@salutejs/plasma-new-hope 0.245.0-dev.0 → 0.246.0-canary.1709.12889448199.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
  2. package/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
  3. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
  4. package/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  5. package/cjs/components/Select/ui/Inner/Inner.js +1 -1
  6. package/cjs/components/Select/ui/Inner/Inner.js.map +1 -1
  7. package/emotion/cjs/components/Combobox/Combobox.template-doc.mdx +5 -0
  8. package/emotion/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
  9. package/emotion/cjs/components/Dropdown/Dropdown.template-doc.mdx +4 -0
  10. package/emotion/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
  11. package/emotion/cjs/components/Select/Select.template-doc.mdx +441 -0
  12. package/emotion/cjs/components/Select/ui/Inner/Inner.js +1 -1
  13. package/emotion/es/components/Combobox/Combobox.template-doc.mdx +5 -0
  14. package/emotion/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
  15. package/emotion/es/components/Dropdown/Dropdown.template-doc.mdx +4 -0
  16. package/emotion/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
  17. package/emotion/es/components/Select/Select.template-doc.mdx +441 -0
  18. package/emotion/es/components/Select/ui/Inner/Inner.js +1 -1
  19. package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
  20. package/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js.map +1 -1
  21. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
  22. package/es/components/Dropdown/ui/DropdownInner/DropdownInner.js.map +1 -1
  23. package/es/components/Select/ui/Inner/Inner.js +1 -1
  24. package/es/components/Select/ui/Inner/Inner.js.map +1 -1
  25. package/package.json +2 -2
  26. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +5 -0
  27. package/styled-components/cjs/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
  28. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +4 -0
  29. package/styled-components/cjs/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
  30. package/styled-components/cjs/components/Select/Select.template-doc.mdx +441 -0
  31. package/styled-components/cjs/components/Select/ui/Inner/Inner.js +1 -1
  32. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +5 -0
  33. package/styled-components/es/components/Combobox/ComboboxNew/ui/Inner/Inner.js +1 -1
  34. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +4 -0
  35. package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js +2 -1
  36. package/styled-components/es/components/Select/Select.template-doc.mdx +441 -0
  37. package/styled-components/es/components/Select/ui/Inner/Inner.js +1 -1
  38. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +1 -1
  39. package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
  40. package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts +6 -0
  41. package/types/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
  42. package/types/components/Dropdown/ui/DropdownInner/DropdownInner.d.ts.map +1 -1
  43. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts +5 -0
  44. package/types/components/Dropdown/ui/DropdownItem/DropdownItem.type.d.ts.map +1 -1
  45. package/types/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.styles.d.ts +6 -6
  46. package/types/components/Select/Select.types.d.ts +2 -2
  47. package/types/components/Select/Select.types.d.ts.map +1 -1
  48. package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts +11 -0
  49. package/types/components/Select/ui/Inner/ui/Item/Item.types.d.ts.map +1 -1
  50. package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts +48 -48
  51. package/types/examples/plasma_b2c/components/Select/Select.d.ts +6 -6
  52. package/types/examples/plasma_web/components/Combobox/Combobox.d.ts +48 -48
  53. package/types/examples/plasma_web/components/Select/Select.d.ts +6 -6
@@ -41,7 +41,7 @@ var Inner = function Inner(_ref) {
41
41
  if (!isEmpty.isEmpty(item === null || item === void 0 ? void 0 : item.items)) {
42
42
  var _item$items;
43
43
  return /*#__PURE__*/React__default.default.createElement(FloatingPopover.FloatingPopover, {
44
- placement: "right-start",
44
+ placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right-start',
45
45
  opened: isCurrentListOpen,
46
46
  onToggle: handleToggle,
47
47
  offset: 2,
@@ -1 +1 @@
1
- {"version":3,"file":"Inner.js","sources":["../../../../../../src/components/Combobox/ComboboxNew/ui/Inner/Inner.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { FloatingPopover } from '../../FloatingPopover';\nimport { isEmpty } from '../../../../../utils';\nimport { Ul } from '../../Combobox.styles';\n\nimport type { ItemOptionTransformed } from './ui/Item/Item.types';\nimport { Item } from './ui';\nimport { InnerProps } from './Inner.type';\n\nexport const Inner: FC<InnerProps> = ({ item, currentLevel, path, dispatchPath, index, listWidth }) => {\n const handleToggle = (opened: boolean): void => {\n if (opened) {\n dispatchPath({ type: 'changed_on_level', value: item.value.toString(), level: currentLevel + 1 });\n } else {\n dispatchPath({ type: 'cut_by_level', level: currentLevel + 1 });\n }\n };\n\n const isCurrentListOpen = path[currentLevel + 1] === item.value.toString();\n\n const treeId = safeUseId();\n const listId = `${treeId}_tree_level_${currentLevel + 2}`;\n const nextLevel = currentLevel + 1;\n\n if (!isEmpty(item?.items)) {\n return (\n <FloatingPopover\n placement=\"right-start\"\n opened={isCurrentListOpen}\n onToggle={handleToggle}\n offset={2}\n target={\n <Item\n item={item}\n path={path}\n currentLevel={currentLevel}\n index={index}\n ariaControls={listId}\n ariaExpanded={isCurrentListOpen}\n ariaLevel={nextLevel}\n ariaLabel={item.label}\n />\n }\n >\n <Ul role=\"group\" id={listId} isInnerUl listWidth={listWidth}>\n {item.items?.map((innerItem: ItemOptionTransformed, innerIndex: number) => (\n <Inner\n key={`${innerIndex}/${currentLevel}`}\n item={innerItem}\n currentLevel={nextLevel}\n path={path}\n dispatchPath={dispatchPath}\n index={innerIndex}\n listWidth={listWidth}\n />\n ))}\n </Ul>\n </FloatingPopover>\n );\n }\n\n return <Item item={item} path={path} index={index} currentLevel={currentLevel} ariaLevel={nextLevel} />;\n};\n"],"names":["Inner","_ref","item","currentLevel","path","dispatchPath","index","listWidth","handleToggle","opened","type","value","toString","level","isCurrentListOpen","treeId","safeUseId","listId","concat","nextLevel","isEmpty","items","_item$items","React","createElement","FloatingPopover","placement","onToggle","offset","target","Item","ariaControls","ariaExpanded","ariaLevel","ariaLabel","label","Ul","role","id","isInnerUl","map","innerItem","innerIndex","key"],"mappings":"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"}
1
+ {"version":3,"file":"Inner.js","sources":["../../../../../../src/components/Combobox/ComboboxNew/ui/Inner/Inner.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { FloatingPopover } from '../../FloatingPopover';\nimport { isEmpty } from '../../../../../utils';\nimport { Ul } from '../../Combobox.styles';\n\nimport type { ItemOptionTransformed } from './ui/Item/Item.types';\nimport { Item } from './ui';\nimport { InnerProps } from './Inner.type';\n\nexport const Inner: FC<InnerProps> = ({ item, currentLevel, path, dispatchPath, index, listWidth }) => {\n const handleToggle = (opened: boolean): void => {\n if (opened) {\n dispatchPath({ type: 'changed_on_level', value: item.value.toString(), level: currentLevel + 1 });\n } else {\n dispatchPath({ type: 'cut_by_level', level: currentLevel + 1 });\n }\n };\n\n const isCurrentListOpen = path[currentLevel + 1] === item.value.toString();\n\n const treeId = safeUseId();\n const listId = `${treeId}_tree_level_${currentLevel + 2}`;\n const nextLevel = currentLevel + 1;\n\n if (!isEmpty(item?.items)) {\n return (\n <FloatingPopover\n placement={item?.placement || 'right-start'}\n opened={isCurrentListOpen}\n onToggle={handleToggle}\n offset={2}\n target={\n <Item\n item={item}\n path={path}\n currentLevel={currentLevel}\n index={index}\n ariaControls={listId}\n ariaExpanded={isCurrentListOpen}\n ariaLevel={nextLevel}\n ariaLabel={item.label}\n />\n }\n >\n <Ul role=\"group\" id={listId} isInnerUl listWidth={listWidth}>\n {item.items?.map((innerItem: ItemOptionTransformed, innerIndex: number) => (\n <Inner\n key={`${innerIndex}/${currentLevel}`}\n item={innerItem}\n currentLevel={nextLevel}\n path={path}\n dispatchPath={dispatchPath}\n index={innerIndex}\n listWidth={listWidth}\n />\n ))}\n </Ul>\n </FloatingPopover>\n );\n }\n\n return <Item item={item} path={path} index={index} currentLevel={currentLevel} ariaLevel={nextLevel} />;\n};\n"],"names":["Inner","_ref","item","currentLevel","path","dispatchPath","index","listWidth","handleToggle","opened","type","value","toString","level","isCurrentListOpen","treeId","safeUseId","listId","concat","nextLevel","isEmpty","items","_item$items","React","createElement","FloatingPopover","placement","onToggle","offset","target","Item","ariaControls","ariaExpanded","ariaLevel","ariaLabel","label","Ul","role","id","isInnerUl","map","innerItem","innerIndex","key"],"mappings":"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"}
@@ -7,6 +7,7 @@ var plasmaCore = require('@salutejs/plasma-core');
7
7
  var DropdownItem = require('../DropdownItem/DropdownItem.js');
8
8
  var Dropdown_styles = require('../../Dropdown.styles.js');
9
9
  var FloatingPopover = require('../../FloatingPopover.js');
10
+ var getPlacement = require('../../utils/getPlacement.js');
10
11
 
11
12
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
12
13
 
@@ -42,7 +43,7 @@ var DropdownInner = function DropdownInner(_ref) {
42
43
  var nextLevel = currentLevel + 1;
43
44
  if (item !== null && item !== void 0 && item.items) {
44
45
  return /*#__PURE__*/React__default.default.createElement(FloatingPopover.FloatingPopover, {
45
- placement: "right-start",
46
+ placement: getPlacement.getPlacement((item === null || item === void 0 ? void 0 : item.placement) || 'right'),
46
47
  opened: isCurrentListOpen,
47
48
  onToggle: handleToggle,
48
49
  trigger: trigger,
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownInner.js","sources":["../../../../../src/components/Dropdown/ui/DropdownInner/DropdownInner.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { DropdownItem } from '../DropdownItem/DropdownItem';\nimport { Ul } from '../../Dropdown.styles';\nimport { FloatingPopover } from '../../FloatingPopover';\n\nimport { DropdownInnerProps } from './DropdownInner.type';\n\nconst DropdownInner: FC<DropdownInnerProps> = ({\n item,\n currentLevel,\n path,\n dispatchPath,\n index,\n trigger,\n listHeight,\n listOverflow,\n listWidth,\n}) => {\n const handleToggle = (opened: boolean): void => {\n if (opened) {\n dispatchPath({ type: 'changed_on_level', value: item.value.toString(), level: currentLevel + 1 });\n } else {\n dispatchPath({ type: 'cut_by_level', level: currentLevel + 1 });\n }\n };\n\n const isCurrentListOpen = path[currentLevel + 1] === item.value.toString();\n\n const treeId = safeUseId();\n const listId = `${treeId}_tree_level_${currentLevel + 2}`;\n const nextLevel = currentLevel + 1;\n\n if (item?.items) {\n return (\n <FloatingPopover\n placement=\"right-start\"\n opened={isCurrentListOpen}\n onToggle={handleToggle}\n trigger={trigger}\n target={\n <DropdownItem\n item={item}\n index={index}\n path={path}\n currentLevel={currentLevel}\n ariaControls={listId}\n ariaExpanded={isCurrentListOpen}\n ariaLevel={nextLevel}\n ariaLabel={item.label}\n />\n }\n isInner\n >\n <Ul\n id={listId}\n role=\"group\"\n isInnerUl\n listHeight={listHeight}\n listOverflow={listOverflow}\n listWidth={listWidth}\n >\n {item.items.map((innerItem, innerIndex) => (\n <DropdownInner\n key={`${innerIndex}/${currentLevel}`}\n item={innerItem}\n currentLevel={nextLevel}\n path={path}\n dispatchPath={dispatchPath}\n index={innerIndex}\n trigger={trigger}\n listHeight={listHeight}\n listOverflow={listOverflow}\n listWidth={listWidth}\n />\n ))}\n </Ul>\n </FloatingPopover>\n );\n }\n\n return <DropdownItem item={item} path={path} index={index} currentLevel={currentLevel} ariaLevel={nextLevel} />;\n};\n\nexport { DropdownInner };\n"],"names":["DropdownInner","_ref","item","currentLevel","path","dispatchPath","index","trigger","listHeight","listOverflow","listWidth","handleToggle","opened","type","value","toString","level","isCurrentListOpen","treeId","safeUseId","listId","concat","nextLevel","items","React","createElement","FloatingPopover","placement","onToggle","target","DropdownItem","ariaControls","ariaExpanded","ariaLevel","ariaLabel","label","isInner","Ul","id","role","isInnerUl","map","innerItem","innerIndex","key"],"mappings":"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"}
1
+ {"version":3,"file":"DropdownInner.js","sources":["../../../../../src/components/Dropdown/ui/DropdownInner/DropdownInner.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { DropdownItem } from '../DropdownItem/DropdownItem';\nimport { Ul } from '../../Dropdown.styles';\nimport { FloatingPopover } from '../../FloatingPopover';\nimport { getPlacement } from '../../utils';\n\nimport { DropdownInnerProps } from './DropdownInner.type';\n\nconst DropdownInner: FC<DropdownInnerProps> = ({\n item,\n currentLevel,\n path,\n dispatchPath,\n index,\n trigger,\n listHeight,\n listOverflow,\n listWidth,\n}) => {\n const handleToggle = (opened: boolean): void => {\n if (opened) {\n dispatchPath({ type: 'changed_on_level', value: item.value.toString(), level: currentLevel + 1 });\n } else {\n dispatchPath({ type: 'cut_by_level', level: currentLevel + 1 });\n }\n };\n\n const isCurrentListOpen = path[currentLevel + 1] === item.value.toString();\n\n const treeId = safeUseId();\n const listId = `${treeId}_tree_level_${currentLevel + 2}`;\n const nextLevel = currentLevel + 1;\n\n if (item?.items) {\n return (\n <FloatingPopover\n placement={getPlacement(item?.placement || 'right')}\n opened={isCurrentListOpen}\n onToggle={handleToggle}\n trigger={trigger}\n target={\n <DropdownItem\n item={item}\n index={index}\n path={path}\n currentLevel={currentLevel}\n ariaControls={listId}\n ariaExpanded={isCurrentListOpen}\n ariaLevel={nextLevel}\n ariaLabel={item.label}\n />\n }\n isInner\n >\n <Ul\n id={listId}\n role=\"group\"\n isInnerUl\n listHeight={listHeight}\n listOverflow={listOverflow}\n listWidth={listWidth}\n >\n {item.items.map((innerItem, innerIndex) => (\n <DropdownInner\n key={`${innerIndex}/${currentLevel}`}\n item={innerItem}\n currentLevel={nextLevel}\n path={path}\n dispatchPath={dispatchPath}\n index={innerIndex}\n trigger={trigger}\n listHeight={listHeight}\n listOverflow={listOverflow}\n listWidth={listWidth}\n />\n ))}\n </Ul>\n </FloatingPopover>\n );\n }\n\n return <DropdownItem item={item} path={path} index={index} currentLevel={currentLevel} ariaLevel={nextLevel} />;\n};\n\nexport { DropdownInner };\n"],"names":["DropdownInner","_ref","item","currentLevel","path","dispatchPath","index","trigger","listHeight","listOverflow","listWidth","handleToggle","opened","type","value","toString","level","isCurrentListOpen","treeId","safeUseId","listId","concat","nextLevel","items","React","createElement","FloatingPopover","placement","getPlacement","onToggle","target","DropdownItem","ariaControls","ariaExpanded","ariaLevel","ariaLabel","label","isInner","Ul","id","role","isInnerUl","map","innerItem","innerIndex","key"],"mappings":"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"}
@@ -41,7 +41,7 @@ var Inner = function Inner(_ref) {
41
41
  if (!isEmpty.isEmpty(item === null || item === void 0 ? void 0 : item.items)) {
42
42
  var _item$items;
43
43
  return /*#__PURE__*/React__default.default.createElement(FloatingPopover.FloatingPopover, {
44
- placement: "right",
44
+ placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right',
45
45
  opened: isCurrentListOpen,
46
46
  onToggle: handleToggle,
47
47
  offset: 2,
@@ -1 +1 @@
1
- {"version":3,"file":"Inner.js","sources":["../../../../../src/components/Select/ui/Inner/Inner.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { isEmpty } from '../../../../utils';\nimport { Ul } from '../../Select.styles';\nimport { FloatingPopover } from '../../FloatingPopover';\n\nimport type { MergedDropdownNodeTransformed } from './ui/Item/Item.types';\nimport { Item } from './ui/Item/Item';\nimport { InnerProps } from './Inner.type';\n\nexport const Inner: FC<InnerProps> = ({ item, currentLevel, path, dispatchPath, index, listWidth }) => {\n const handleToggle = (opened: boolean): void => {\n if (opened) {\n dispatchPath({ type: 'changed_on_level', value: item.value.toString(), level: currentLevel + 1 });\n } else {\n dispatchPath({ type: 'cut_by_level', level: currentLevel + 1 });\n }\n };\n\n const isCurrentListOpen = path[currentLevel + 1] === item.value.toString();\n\n const treeId = safeUseId();\n const listId = `${treeId}_tree_level_${currentLevel + 2}`;\n const nextLevel = currentLevel + 1;\n\n if (!isEmpty(item?.items)) {\n return (\n <FloatingPopover\n placement=\"right\"\n opened={isCurrentListOpen}\n onToggle={handleToggle}\n offset={2}\n target={\n <Item\n item={item}\n path={path}\n currentLevel={currentLevel}\n index={index}\n ariaControls={listId}\n ariaExpanded={isCurrentListOpen}\n ariaLevel={nextLevel}\n ariaLabel={item.label}\n />\n }\n >\n <Ul role=\"group\" id={listId} isInnerUl listWidth={listWidth}>\n {item.items?.map((innerItem: MergedDropdownNodeTransformed, innerIndex: number) => (\n <Inner\n key={`${innerIndex}/${currentLevel}`}\n item={innerItem}\n currentLevel={nextLevel}\n path={path}\n dispatchPath={dispatchPath}\n index={innerIndex}\n listWidth={listWidth}\n />\n ))}\n </Ul>\n </FloatingPopover>\n );\n }\n\n return <Item item={item} path={path} index={index} currentLevel={currentLevel} ariaLevel={nextLevel} />;\n};\n"],"names":["Inner","_ref","item","currentLevel","path","dispatchPath","index","listWidth","handleToggle","opened","type","value","toString","level","isCurrentListOpen","treeId","safeUseId","listId","concat","nextLevel","isEmpty","items","_item$items","React","createElement","FloatingPopover","placement","onToggle","offset","target","Item","ariaControls","ariaExpanded","ariaLevel","ariaLabel","label","Ul","role","id","isInnerUl","map","innerItem","innerIndex","key"],"mappings":";;;;;;;;;;;;;;;IAYaA,KAAqB,GAAG,SAAxBA,KAAqBA,CAAAC,IAAA,EAAqE;AAAA,EAAA,IAA/DC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IAAEC,YAAY,GAAAF,IAAA,CAAZE,YAAY;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAEC,YAAY,GAAAJ,IAAA,CAAZI,YAAY;IAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAEC,SAAS,GAAAN,IAAA,CAATM,SAAS,CAAA;AAC5F,EAAA,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAIC,MAAe,EAAW;AAC5C,IAAA,IAAIA,MAAM,EAAE;AACRJ,MAAAA,YAAY,CAAC;AAAEK,QAAAA,IAAI,EAAE,kBAAkB;AAAEC,QAAAA,KAAK,EAAET,IAAI,CAACS,KAAK,CAACC,QAAQ,EAAE;QAAEC,KAAK,EAAEV,YAAY,GAAG,CAAA;AAAE,OAAC,CAAC,CAAA;AACrG,KAAC,MAAM;AACHE,MAAAA,YAAY,CAAC;AAAEK,QAAAA,IAAI,EAAE,cAAc;QAAEG,KAAK,EAAEV,YAAY,GAAG,CAAA;AAAE,OAAC,CAAC,CAAA;AACnE,KAAA;GACH,CAAA;AAED,EAAA,IAAMW,iBAAiB,GAAGV,IAAI,CAACD,YAAY,GAAG,CAAC,CAAC,KAAKD,IAAI,CAACS,KAAK,CAACC,QAAQ,EAAE,CAAA;AAE1E,EAAA,IAAMG,MAAM,GAAGC,oBAAS,EAAE,CAAA;EAC1B,IAAMC,MAAM,GAAAC,EAAAA,CAAAA,MAAA,CAAMH,MAAM,EAAAG,cAAAA,CAAAA,CAAAA,MAAA,CAAef,YAAY,GAAG,CAAC,CAAE,CAAA;AACzD,EAAA,IAAMgB,SAAS,GAAGhB,YAAY,GAAG,CAAC,CAAA;EAElC,IAAI,CAACiB,eAAO,CAAClB,IAAI,KAAA,IAAA,IAAJA,IAAI,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAJA,IAAI,CAAEmB,KAAK,CAAC,EAAE;AAAA,IAAA,IAAAC,WAAA,CAAA;AACvB,IAAA,oBACIC,sBAAA,CAAAC,aAAA,CAACC,+BAAe,EAAA;AACZC,MAAAA,SAAS,EAAC,OAAO;AACjBjB,MAAAA,MAAM,EAAEK,iBAAkB;AAC1Ba,MAAAA,QAAQ,EAAEnB,YAAa;AACvBoB,MAAAA,MAAM,EAAE,CAAE;AACVC,MAAAA,MAAM,eACFN,sBAAA,CAAAC,aAAA,CAACM,SAAI,EAAA;AACD5B,QAAAA,IAAI,EAAEA,IAAK;AACXE,QAAAA,IAAI,EAAEA,IAAK;AACXD,QAAAA,YAAY,EAAEA,YAAa;AAC3BG,QAAAA,KAAK,EAAEA,KAAM;AACbyB,QAAAA,YAAY,EAAEd,MAAO;AACrBe,QAAAA,YAAY,EAAElB,iBAAkB;AAChCmB,QAAAA,SAAS,EAAEd,SAAU;QACrBe,SAAS,EAAEhC,IAAI,CAACiC,KAAAA;OACnB,CAAA;AACJ,KAAA,eAEDZ,sBAAA,CAAAC,aAAA,CAACY,gBAAE,EAAA;AAACC,MAAAA,IAAI,EAAC,OAAO;AAACC,MAAAA,EAAE,EAAErB,MAAO;MAACsB,SAAS,EAAA,IAAA;AAAChC,MAAAA,SAAS,EAAEA,SAAAA;AAAU,KAAA,EAAA,CAAAe,WAAA,GACvDpB,IAAI,CAACmB,KAAK,MAAAC,IAAAA,IAAAA,WAAA,KAAVA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,WAAA,CAAYkB,GAAG,CAAC,UAACC,SAAwC,EAAEC,UAAkB,EAAA;AAAA,MAAA,oBAC1EnB,sBAAA,CAAAC,aAAA,CAACxB,KAAK,EAAA;QACF2C,GAAG,EAAA,EAAA,CAAAzB,MAAA,CAAKwB,UAAU,OAAAxB,MAAA,CAAIf,YAAY,CAAG;AACrCD,QAAAA,IAAI,EAAEuC,SAAU;AAChBtC,QAAAA,YAAY,EAAEgB,SAAU;AACxBf,QAAAA,IAAI,EAAEA,IAAK;AACXC,QAAAA,YAAY,EAAEA,YAAa;AAC3BC,QAAAA,KAAK,EAAEoC,UAAW;AAClBnC,QAAAA,SAAS,EAAEA,SAAAA;AAAU,OACxB,CAAC,CAAA;KACL,CACD,CACS,CAAC,CAAA;AAE1B,GAAA;AAEA,EAAA,oBAAOgB,sBAAA,CAAAC,aAAA,CAACM,SAAI,EAAA;AAAC5B,IAAAA,IAAI,EAAEA,IAAK;AAACE,IAAAA,IAAI,EAAEA,IAAK;AAACE,IAAAA,KAAK,EAAEA,KAAM;AAACH,IAAAA,YAAY,EAAEA,YAAa;AAAC8B,IAAAA,SAAS,EAAEd,SAAAA;AAAU,GAAE,CAAC,CAAA;AAC3G;;;;"}
1
+ {"version":3,"file":"Inner.js","sources":["../../../../../src/components/Select/ui/Inner/Inner.tsx"],"sourcesContent":["import React from 'react';\nimport type { FC } from 'react';\nimport { safeUseId } from '@salutejs/plasma-core';\n\nimport { isEmpty } from '../../../../utils';\nimport { Ul } from '../../Select.styles';\nimport { FloatingPopover } from '../../FloatingPopover';\n\nimport type { MergedDropdownNodeTransformed } from './ui/Item/Item.types';\nimport { Item } from './ui/Item/Item';\nimport { InnerProps } from './Inner.type';\n\nexport const Inner: FC<InnerProps> = ({ item, currentLevel, path, dispatchPath, index, listWidth }) => {\n const handleToggle = (opened: boolean): void => {\n if (opened) {\n dispatchPath({ type: 'changed_on_level', value: item.value.toString(), level: currentLevel + 1 });\n } else {\n dispatchPath({ type: 'cut_by_level', level: currentLevel + 1 });\n }\n };\n\n const isCurrentListOpen = path[currentLevel + 1] === item.value.toString();\n\n const treeId = safeUseId();\n const listId = `${treeId}_tree_level_${currentLevel + 2}`;\n const nextLevel = currentLevel + 1;\n\n if (!isEmpty(item?.items)) {\n return (\n <FloatingPopover\n placement={item?.placement || 'right'}\n opened={isCurrentListOpen}\n onToggle={handleToggle}\n offset={2}\n target={\n <Item\n item={item}\n path={path}\n currentLevel={currentLevel}\n index={index}\n ariaControls={listId}\n ariaExpanded={isCurrentListOpen}\n ariaLevel={nextLevel}\n ariaLabel={item.label}\n />\n }\n >\n <Ul role=\"group\" id={listId} isInnerUl listWidth={listWidth}>\n {item.items?.map((innerItem: MergedDropdownNodeTransformed, innerIndex: number) => (\n <Inner\n key={`${innerIndex}/${currentLevel}`}\n item={innerItem}\n currentLevel={nextLevel}\n path={path}\n dispatchPath={dispatchPath}\n index={innerIndex}\n listWidth={listWidth}\n />\n ))}\n </Ul>\n </FloatingPopover>\n );\n }\n\n return <Item item={item} path={path} index={index} currentLevel={currentLevel} ariaLevel={nextLevel} />;\n};\n"],"names":["Inner","_ref","item","currentLevel","path","dispatchPath","index","listWidth","handleToggle","opened","type","value","toString","level","isCurrentListOpen","treeId","safeUseId","listId","concat","nextLevel","isEmpty","items","_item$items","React","createElement","FloatingPopover","placement","onToggle","offset","target","Item","ariaControls","ariaExpanded","ariaLevel","ariaLabel","label","Ul","role","id","isInnerUl","map","innerItem","innerIndex","key"],"mappings":"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"}
@@ -25,6 +25,11 @@ type Items = Array<{
25
25
  * Метка-подпись к item
26
26
  */
27
27
  label: string;
28
+ /**
29
+ * Сторона открытия вложенного дропдауна относительно текущего элемента
30
+ * @default right
31
+ */
32
+ placement?: Placement;
28
33
  /**
29
34
  * Список дочерних items.
30
35
  */
@@ -39,7 +39,7 @@ var Inner = exports.Inner = function Inner(_ref) {
39
39
  if (!(0, _utils.isEmpty)(item === null || item === void 0 ? void 0 : item.items)) {
40
40
  var _item$items;
41
41
  return /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
42
- placement: "right-start",
42
+ placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right-start',
43
43
  opened: isCurrentListOpen,
44
44
  onToggle: handleToggle,
45
45
  offset: 2,
@@ -29,6 +29,10 @@ type Items = Array<{
29
29
  * Метка-подпись к item
30
30
  */
31
31
  label: string;
32
+ /**
33
+ * Сторона открытия вложенного дропдауна относительно текущего элемента;
34
+ */
35
+ placement: DropdownPlacement;
32
36
  /**
33
37
  * Список дочерних items.
34
38
  */
@@ -9,6 +9,7 @@ var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
9
9
  var _DropdownItem = /*#__PURE__*/require("../DropdownItem/DropdownItem");
10
10
  var _Dropdown = /*#__PURE__*/require("../../Dropdown.styles");
11
11
  var _FloatingPopover = /*#__PURE__*/require("../../FloatingPopover");
12
+ var _utils = /*#__PURE__*/require("../../utils");
12
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
14
  var DropdownInner = exports.DropdownInner = function DropdownInner(_ref) {
14
15
  var item = _ref.item,
@@ -40,7 +41,7 @@ var DropdownInner = exports.DropdownInner = function DropdownInner(_ref) {
40
41
  var nextLevel = currentLevel + 1;
41
42
  if (item !== null && item !== void 0 && item.items) {
42
43
  return /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
43
- placement: "right-start",
44
+ placement: (0, _utils.getPlacement)((item === null || item === void 0 ? void 0 : item.placement) || 'right'),
44
45
  opened: isCurrentListOpen,
45
46
  onToggle: handleToggle,
46
47
  trigger: trigger,
@@ -0,0 +1,441 @@
1
+ ---
2
+ id: select
3
+ title: Select
4
+ ---
5
+
6
+ import { PropsTable, Description, StorybookLink } from '@site/src/components';
7
+ import Tabs from '@theme/Tabs';
8
+ import TabItem from '@theme/TabItem';
9
+
10
+ # Select
11
+
12
+ <Description name="Select" />
13
+ <PropsTable name="Select" />
14
+
15
+ ## Использование
16
+ Обязательным параметром являются: `items`, `value` и `onChange`. Внутри items может быть такой же вложенный массив items. Формат следующий:
17
+
18
+ ```tsx
19
+ type Items = Array<{
20
+ /**
21
+ * Значение у item
22
+ */
23
+ value: string;
24
+ /**
25
+ * Метка-подпись к item
26
+ */
27
+ label: string;
28
+ /**
29
+ * Сторона открытия вложенного дропдауна относительно текущего элемента;
30
+ */
31
+ placement: SelectPlacement | Array<SelectPlacementBasic>;
32
+ /**
33
+ * Список дочерних items.
34
+ */
35
+ items?: Array<ItemOption>;
36
+ /**
37
+ * Item не активен
38
+ */
39
+ disabled?: boolean;
40
+ /**
41
+ * Слот для контента слева
42
+ */
43
+ contentLeft?: ReactNode;
44
+ /**
45
+ * Слот для контента справа
46
+ */
47
+ contentRight?: ReactNode;
48
+ /**
49
+ * Выбранный item.
50
+ * @deprecated
51
+ */
52
+ isActive?: boolean;
53
+ /**
54
+ * Кастомный цвет текста
55
+ * @deprecated
56
+ */
57
+ color?: string;
58
+ /**
59
+ * Айтем не активен
60
+ * @deprecated использовать disabled
61
+ */
62
+ isDisabled?: boolean;
63
+ }>;
64
+ ```
65
+
66
+ Тип выбора селекта - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.
67
+ Select может выглядеть как Button и как Textfield. За это отвечает пропс - `target`.\
68
+ Есть возможность прокидывать компонент `EmptyState` в пропс `renderList` для изменения содержимого выпадающего окна.\
69
+ Это нужно в случаях, когда произошла ошибка при загрузке `items`, либо когда `items` пустой. Более подробно в примерах.
70
+
71
+ ## Примеры
72
+
73
+ <Tabs>
74
+ <TabItem value="textfield" label="Textfield" default>
75
+ В режиме `textfield` доступны только следующие варианты `view`: `default`, `warning`, `positive` и `negative`.
76
+
77
+ ```tsx live
78
+ import React from 'react';
79
+ import { Select } from '@salutejs/{{ package }}';
80
+
81
+ export function App() {
82
+ const [singleValue, setSingleValue] = useState('');
83
+ const [multipleValue, setMultipleValue] = useState([]);
84
+
85
+ const items = [
86
+ {
87
+ value: 'north_america',
88
+ label: 'Северная Америка',
89
+ },
90
+ {
91
+ value: 'south_america',
92
+ label: 'Южная Америка',
93
+ items: [
94
+ {
95
+ value: 'brazil',
96
+ label: 'Бразилия',
97
+ },
98
+ {
99
+ value: 'argentina',
100
+ label: 'Аргентина',
101
+ },
102
+ ],
103
+ },
104
+ ];
105
+
106
+ return (
107
+ <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
108
+ <div style=\{{width: '300px'}}>
109
+ <Select items={items} value={singleValue} onChange={setSingleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
110
+ </div>
111
+
112
+ <div style=\{{width: '300px'}}>
113
+ <Select multiselect items={items} value={multipleValue} onChange={setMultipleValue} label="Label" placeholder="Placeholder" helperText="Helper text" />
114
+ </div>
115
+ </div>
116
+ );
117
+ }
118
+ ```
119
+ </TabItem>
120
+ <TabItem value="button" label="Button">
121
+ В режиме `button` недоступны следующие пропсы: `contentLeft`, `label`, `labelPlacement`, `placeholder` и `helperText`.
122
+
123
+ ```tsx live
124
+ import React from 'react';
125
+ import { Select } from '@salutejs/{{ package }}';
126
+
127
+ export function App() {
128
+ const [singleValue, setSingleValue] = useState('');
129
+ const [multipleValue, setMultipleValue] = useState([]);
130
+
131
+ const items = [
132
+ {
133
+ value: 'north_america',
134
+ label: 'Северная Америка',
135
+ },
136
+ {
137
+ value: 'south_america',
138
+ label: 'Южная Америка',
139
+ items: [
140
+ {
141
+ value: 'brazil',
142
+ label: 'Бразилия',
143
+ },
144
+ {
145
+ value: 'argentina',
146
+ label: 'Аргентина',
147
+ },
148
+ ],
149
+ },
150
+ ];
151
+
152
+ return (
153
+ <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
154
+ <div style=\{{width: '300px'}}>
155
+ <Select items={items} label="Single" target="button-like" value={singleValue} onChange={setSingleValue} />
156
+ </div>
157
+
158
+ <div style=\{{width: '300px'}}>
159
+ <Select multiselect items={items} label="Multiple" target="button-like" value={multipleValue} onChange={setMultipleValue} />
160
+ </div>
161
+ </div>
162
+ );
163
+ }
164
+ ```
165
+ </TabItem>
166
+ <TabItem value="predefined" label="Predefined">
167
+ Есть возможность задать значения по дефолту (главное, чтобы они находились в `items`). Также можно управлять состоянием снаружи селекта.
168
+
169
+ ```tsx live
170
+ import React from 'react';
171
+ import { Select, Button } from '@salutejs/{{ package }}';
172
+
173
+ export function App() {
174
+ const [multipleValue, setMultipleValue] = useState(['brazil', 'north_america']);
175
+
176
+ const items = [
177
+ {
178
+ value: 'north_america',
179
+ label: 'Северная Америка',
180
+ },
181
+ {
182
+ value: 'south_america',
183
+ label: 'Южная Америка',
184
+ items: [
185
+ {
186
+ value: 'brazil',
187
+ label: 'Бразилия',
188
+ },
189
+ {
190
+ value: 'argentina',
191
+ label: 'Аргентина',
192
+ },
193
+ ],
194
+ },
195
+ ];
196
+
197
+ return (
198
+ <div style=\{{ display: 'flex', gap: '30px', height: '300px' }}>
199
+ <div style=\{{width: '300px'}}>
200
+ <Select multiselect items={items} label="Label" placeholder="Placeholder" value={multipleValue} onChange={setMultipleValue} />
201
+ </div>
202
+
203
+ <Button onClick={() => setMultipleValue([])}>Очистить</Button>
204
+ </div>
205
+ );
206
+ }
207
+ ```
208
+ </TabItem>
209
+ <TabItem value="renderValue" label="Render value">
210
+ Пропс `renderValue` для кастомной настройки `value` внутри таргета. Принимает коллбэк с двумя параметрами: `value` и `label`.
211
+
212
+ ```tsx live
213
+ import React from 'react';
214
+ import { Select } from '@salutejs/{{ package }}';
215
+
216
+ export function App() {
217
+ const [singleValue, setSingleValue] = useState('');
218
+
219
+ const items = [
220
+ {
221
+ value: 'north_america',
222
+ label: 'Северная Америка',
223
+ },
224
+ {
225
+ value: 'south_america',
226
+ label: 'Южная Америка',
227
+ items: [
228
+ {
229
+ value: 'brazil',
230
+ label: 'Бразилия',
231
+ },
232
+ {
233
+ value: 'argentina',
234
+ label: 'Аргентина',
235
+ },
236
+ ],
237
+ },
238
+ ];
239
+
240
+ const renderValue = (itemData): string => {
241
+ if (!Array.isArray(itemData)) {
242
+ return `${itemData.value} - ${itemData.label}`;
243
+ }
244
+
245
+ return '';
246
+ };
247
+
248
+ return (
249
+ <div style=\{{ height: '300px' }}>
250
+ <div style=\{{ width: '300px' }}>
251
+ <Select
252
+ items={items}
253
+ label="Label"
254
+ placeholder="Placeholder"
255
+ value={singleValue}
256
+ onChange={setSingleValue}
257
+ renderValue={renderValue}
258
+ />
259
+ </div>
260
+ </div>
261
+ );
262
+ }
263
+ ```
264
+ </TabItem>
265
+ <TabItem value="renderItem" label="Render item">
266
+ `renderTarget` - для кастомной настройки таргета в Select. Принимает коллбэк с один параметром: `value`.
267
+ Пропс `renderItem` для кастомной настройки айтема в выпадающем списке. Принимает коллбэк с двумя параметрами: `value` и `label`.
268
+ В примере использован другой наш компонент - Cell.
269
+
270
+ ```tsx live
271
+ import React from 'react';
272
+ import { Select, Cell } from '@salutejs/{{ package }}';
273
+
274
+ export function App() {
275
+ const [multipleValue, setMultipleValue] = useState([]);
276
+
277
+ const items = [
278
+ {
279
+ value: 'north_america',
280
+ label: 'Северная Америка',
281
+ },
282
+ {
283
+ value: 'south_america',
284
+ label: 'Южная Америка',
285
+ },
286
+ ];
287
+
288
+ const renderTarget = (itemData) => {
289
+ if (Array.isArray(itemData)) {
290
+ if (itemData.length === 0) {
291
+ return (
292
+ <div style=\{{ padding: '0.5rem 0' }}>
293
+ <Cell
294
+ view="default"
295
+ title="Выберите страну"
296
+ subtitle="Subtitle"
297
+ label="Label"
298
+ />
299
+ </div>
300
+ );
301
+ }
302
+
303
+ const title = itemData.map((item) => item.label).join(', ');
304
+
305
+ return (
306
+ <div style=\{{ padding: '0.5rem 0.75rem' }}>
307
+ <Cell view="default" title={title} subtitle="Subtitle" label="Label" />
308
+ </div>
309
+ );
310
+ }
311
+ }
312
+
313
+ const renderItem = ({ value, label }) => (
314
+ <Cell
315
+ view="default"
316
+ title={label}
317
+ label="Top left"
318
+ contentRight={<Cell view="default" title="Bottom right" label="Top right" />}
319
+ />
320
+ )
321
+
322
+ return (
323
+ <div style=\{{ height: '300px' }}>
324
+ <div style=\{{ width: '400px' }}>
325
+ <Select
326
+ items={items}
327
+ value={multipleValue}
328
+ onChange={setMultipleValue}
329
+ multiselect
330
+ renderTarget={renderTarget}
331
+ renderItem={renderItem}
332
+ />
333
+ </div>
334
+ </div>
335
+ );
336
+ }
337
+ ```
338
+ </TabItem>
339
+ <TabItem value="portal" label="Portal">
340
+ Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
341
+ Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\
342
+ Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
343
+
344
+ ```tsx live
345
+ import React, { useRef } from 'react';
346
+ import { Select } from '@salutejs/{{ package }}';
347
+
348
+ export function App() {
349
+ const [value, setValue] = useState('');
350
+
351
+ const items = [
352
+ {
353
+ value: 'north_america',
354
+ label: 'Северная Америка',
355
+ },
356
+ {
357
+ value: 'south_america',
358
+ label: 'Южная Америка',
359
+ items: [
360
+ {
361
+ value: 'brazil',
362
+ label: 'Бразилия',
363
+ },
364
+ {
365
+ value: 'argentina',
366
+ label: 'Аргентина',
367
+ },
368
+ ],
369
+ },
370
+ ];
371
+
372
+ const ref = useRef(null)
373
+
374
+ return (
375
+ <div style=\{{ position: "relative", height: "300px" }} ref={ref}>
376
+ <div style=\{{width: '300px'}}>
377
+ <Select items={items} label="Label" placeholder="Placeholder" value={value} onChange={setValue} portal={ref} listWidth="300px" />
378
+ </div>
379
+ </div>
380
+ );
381
+ }
382
+ ```
383
+ </TabItem>
384
+ <TabItem value="uncontrolled" label="Uncontrolled">
385
+ `value` и `onChange` - опциональные параметры. Если вы хотите `uncontrolled` вариант компонента - их пробрасывать необязательно.
386
+
387
+ ```tsx live
388
+ import React from 'react';
389
+ import { Select } from '@salutejs/{{ package }}';
390
+
391
+ export function App() {
392
+ const items = [
393
+ {
394
+ value: 'north_america',
395
+ label: 'Северная Америка',
396
+ },
397
+ {
398
+ value: 'south_america',
399
+ label: 'Южная Америка',
400
+ items: [
401
+ {
402
+ value: 'brazil',
403
+ label: 'Бразилия',
404
+ },
405
+ {
406
+ value: 'argentina',
407
+ label: 'Аргентина',
408
+ },
409
+ ],
410
+ },
411
+ ];
412
+
413
+ return (
414
+ <div style=\{{ height: '300px' }}>
415
+ <div style=\{{width: '300px'}}>
416
+ <Select items={items} label="Label" placeholder="Placeholder" />
417
+ </div>
418
+ </div>
419
+ );
420
+ }
421
+ ```
422
+ </TabItem>
423
+ </Tabs>
424
+
425
+ ## Клавиатурная навигация
426
+
427
+ Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
428
+
429
+ - `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице;
430
+ - `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его. Если у элемента есть дочерний дропдаун - открывает его, выбор элемента не происходит;
431
+ - `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его и все дочерние элементы.
432
+ - `Home` - открывает дропдаун и перемещает фокус на первый элемент;
433
+ - `End` - открывает дропдаун и перемещает фокус на последний элемент;
434
+ - `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка;
435
+ - `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка;
436
+ - `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
437
+ - `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
438
+ - `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент; Если фокус на таргете - переходит в режим выбора чипа.
439
+ - `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий; Если фокус на таргете - переходит в режим выбора чипа.
440
+ - `Backspace` - только если фокус на чипе - снимает выбор с текущего значения;
441
+
@@ -39,7 +39,7 @@ var Inner = exports.Inner = function Inner(_ref) {
39
39
  if (!(0, _utils.isEmpty)(item === null || item === void 0 ? void 0 : item.items)) {
40
40
  var _item$items;
41
41
  return /*#__PURE__*/_react["default"].createElement(_FloatingPopover.FloatingPopover, {
42
- placement: "right",
42
+ placement: (item === null || item === void 0 ? void 0 : item.placement) || 'right',
43
43
  opened: isCurrentListOpen,
44
44
  onToggle: handleToggle,
45
45
  offset: 2,