feat(plasma-new-hope): extend (Select/Combobox)Item props with placement

salute-developers · Jan 21, 2025 · 0c22195 · 0c22195
1 parent 45aaf7f
commit 0c22195
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 5 deletions.
diff --git a/packages/plasma-new-hope/src/components/Combobox/Combobox.template-doc.mdx b/packages/plasma-new-hope/src/components/Combobox/Combobox.template-doc.mdx
@@ -25,6 +25,11 @@ type Items = Array<{
          * Метка-подпись к item
          */
         label: string;
+        /**
+        * Сторона открытия вложенного дропдауна относительно текущего элемента
+        * @default right
+        */
+        placement?: Placement;
         /**
          * Список дочерних items.
          */

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.types.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.types.ts
@@ -8,7 +8,7 @@ import { FocusedPathState } from './reducers';
 import { ItemOption, ItemOptionTransformed } from './ui/Inner/ui/Item/Item.types';
 import type { ValueToCheckedMapType } from './hooks/getPathMaps';
 
-type Placement =
+export type Placement =
     | 'top'
     | 'top-start'
     | 'top-end'

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/Inner.tsx b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/Inner.tsx
@@ -28,7 +28,7 @@ export const Inner: FC<InnerProps> = ({ item, currentLevel, path, dispatchPath,
     if (!isEmpty(item?.items)) {
         return (
             <FloatingPopover
-                placement="right-start"
+                placement={item?.placement || 'right-start'}
                 opened={isCurrentListOpen}
                 onToggle={handleToggle}
                 offset={2}

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.ts
@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 
 import type { PathState } from '../../../../../../Select/reducers';
+import type { Placement } from '../../../../Combobox.types';
 
 export type ItemOption = {
     /**
@@ -12,6 +13,11 @@ export type ItemOption = {
      * Метка-подпись к item
      */
     label: string;
+    /**
+     * Сторона открытия вложенного дропдауна относительно текущего элемента
+     * @default right
+     */
+    placement?: Placement;
     /**
      * Список дочерних items
      */

diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.template-doc.mdx b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.template-doc.mdx
@@ -29,6 +29,10 @@ type Items = Array<{
          * Метка-подпись к item
          */
         label: string;
+        /**
+        * Сторона открытия вложенного дропдауна относительно текущего элемента;
+        */
+        placement: DropdownPlacement;
         /**
          * Список дочерних items.
          */

diff --git a/packages/plasma-new-hope/src/components/Select/Select.types.ts b/packages/plasma-new-hope/src/components/Select/Select.types.ts
@@ -12,8 +12,8 @@ import {
 } from './ui/Inner/ui/Item/Item.types';
 import type { ValueToCheckedMapType } from './hooks/usePathMaps';
 
-type SelectPlacementBasic = 'top' | 'bottom' | 'right' | 'left';
-type SelectPlacement = 'top' | 'bottom' | 'right' | 'left' | 'auto';
+export type SelectPlacementBasic = 'top' | 'bottom' | 'right' | 'left';
+export type SelectPlacement = 'top' | 'bottom' | 'right' | 'left' | 'auto';
 
 export type { RequiredProps };
 

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/Inner.tsx b/packages/plasma-new-hope/src/components/Select/ui/Inner/Inner.tsx
@@ -28,7 +28,7 @@ export const Inner: FC<InnerProps> = ({ item, currentLevel, path, dispatchPath,
     if (!isEmpty(item?.items)) {
         return (
             <FloatingPopover
-                placement="right"
+                placement={item?.placement || 'right'}
                 opened={isCurrentListOpen}
                 onToggle={handleToggle}
                 offset={2}

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.types.ts b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.types.ts
@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 
 import type { PathState } from '../../../../reducers';
+import type { SelectPlacement, SelectPlacementBasic } from '../../../../Select.types';
 
 export type ItemOption = {
     /**
@@ -12,6 +13,11 @@ export type ItemOption = {
      * Метка-подпись к item
      */
     label: string;
+    /**
+     * Сторона открытия вложенного дропдауна относительно текущего элемента
+     * @default right
+     */
+    placement?: SelectPlacement | Array<SelectPlacementBasic>;
     /**
      * Список дочерних items
      */
@@ -50,6 +56,11 @@ export type ItemProps = {
 export type MergedDropdownNode = {
     value: string | number;
     label: string;
+    /**
+     * Сторона открытия дропдауна относительно target элемента.
+     * @default bottom
+     */
+    placement?: SelectPlacement | Array<SelectPlacementBasic>;
     items?: MergedDropdownNode[];
     /**
      * @deprecated