@salutejs/plasma-new-hope 0.173.0-canary.1497.11459278795.0 → 0.173.0-dev.0

package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx

@@ -4,7 +4,8 @@ import { action } from '@storybook/addon-actions';
 import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
-import { IconChevronLeft } from '../../../../components/_Icon';
+import { IconCross } from '../../../../components/_Icon';
+import type { PopoverPlacement } from '../Popover/Popover';
 
 import { TextField } from './TextField';
 
@@ -16,7 +17,29 @@ const onChipsChange = action('onChipsChange');
 
 const sizes = ['l', 'm', 's', 'xs'];
 const views = ['default', 'positive', 'warning', 'negative'];
+const hintViews = ['default'];
+const hintSizes = ['m', 's'];
+const hintTriggers = ['hover', 'click'];
 const labelPlacements = ['outer', 'inner'];
+const placements: Array<PopoverPlacement> = [
+    'top',
+    'top-start',
+    'top-end',
+
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+
+    'left',
+    'left-start',
+    'left-end',
+
+    'right',
+    'right-start',
+    'right-end',
+
+    'auto',
+];
 
 const meta: Meta<typeof TextField> = {
     title: 'plasma_web/TextField',
@@ -70,6 +93,46 @@ const meta: Meta<typeof TextField> = {
                 type: 'inline-radio',
             },
         },
+        hintText: {
+            control: { type: 'text' },
+        },
+        hintView: {
+            options: hintViews,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hintText', neq: '' },
+        },
+        hintSize: {
+            options: hintSizes,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hintText', neq: '' },
+        },
+        hintTrigger: {
+            options: hintTriggers,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'hintText', neq: '' },
+        },
+        hintPlacement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hintText', neq: '' },
+            mappers: placements,
+        },
+        hintHasArrow: {
+            control: { type: 'boolean' },
+            if: { arg: 'hintText', neq: '' },
+        },
+        hintWidth: {
+            control: { type: 'text' },
+            if: { arg: 'hintText', neq: '' },
+        },
     },
 };
 
@@ -105,13 +168,13 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
     const iconSize = rest.size === 'xs' ? 'xs' : 's';
 
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '70%', margin: '0 auto' }}>
             <TextField
                 {...rest}
                 enumerationType="plain"
                 value={text}
-                contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-                contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+                contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
                 view={view}
                 onChange={(e) => {
                     setText(e.target.value);
@@ -145,17 +208,27 @@ export const Default: StoryObj<StoryPropsDefault> = {
         view: 'default',
         label: 'Лейбл',
         labelPlacement: 'outer',
+        titleCaption: 'Подпись к полю',
+        textBefore: '',
+        textAfter: '',
         placeholder: 'Заполните поле',
         leftHelper: 'Подсказка к полю',
         disabled: false,
         readOnly: false,
-        required: false,
-        requiredPlacement: 'right',
-        optional: false,
         enableContentLeft: true,
         enableContentRight: true,
         clear: false,
         hasDivider: false,
+        optional: false,
+        required: false,
+        requiredPlacement: 'right',
+        hintText: 'Текст подсказки',
+        hintTrigger: 'hover',
+        hintView: 'default',
+        hintSize: 'm',
+        hintPlacement: 'auto',
+        hintWidth: '10rem',
+        hintHasArrow: true,
     },
     render: (args) => <StoryDemo {...args} />,
 };
@@ -176,8 +249,6 @@ type StoryPropsChips = Omit<
     | 'checked'
     | 'maxLength'
     | 'minLength'
-    | 'required'
-    | 'optional'
     | 'enumerationType'
 > & {
     enableContentLeft: boolean;
@@ -194,7 +265,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             {...rest}
             enumerationType="chip"
             value={text}
-            contentLeft={enableContentLeft ? <IconChevronLeft color="inherit" size={iconSize} /> : undefined}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
             contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             view={view}
             onChange={(e) => {
@@ -204,6 +275,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             onFocus={onFocus}
             onBlur={onBlur}
             onChangeChips={onChipsChange}
+            style={{ width: '70%', margin: '0 auto' }}
         />
     );
 };

package/emotion/cjs/hooks/useOutsideClick.js

@@ -11,7 +11,7 @@ var useOutsideClick = exports.useOutsideClick = function useOutsideClick(callbac
     var handleClickOutside = function handleClickOutside(event) {
       if (ref.current && !ref.current.contains(event.target)) {
         if (!(secondaryRef !== null && secondaryRef !== void 0 && secondaryRef.current) || secondaryRef.current && !secondaryRef.current.contains(event.target)) {
-          callback(event);
+          callback();
         }
       }
     };

package/emotion/es/components/Autocomplete/Autocomplete.js

@@ -1,4 +1,4 @@
-var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
+var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hintText"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -47,6 +47,7 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       renderList = _ref.renderList,
       renderListEnd = _ref.renderListEnd,
       onSearch = _ref.onSearch,
+      hintText = _ref.hintText,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useReducer = useReducer(focusedReducer, null),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -144,7 +145,8 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
         "aria-controls": listId,
         "aria-expanded": isOpen,
         "aria-activedescendant": "".concat(listId, "/").concat(focused),
-        "aria-describedby": helperTextId
+        "aria-describedby": helperTextId,
+        hintText: String(hintText || '')
       }, rest)),
       preventOverflow: false,
       ref: targetRef,

package/emotion/es/components/Dropdown/Dropdown.js

@@ -8,34 +8,30 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { createContext, forwardRef, useReducer, useRef } from 'react';
-import { safeUseId } from '@salutejs/plasma-core';
-import { cx } from '../../utils';
-import { useOutsideClick } from '../../hooks';
+import React, { forwardRef, useReducer } from 'react';
+import { cx, getPlacements } from '../../utils';
 import { pathReducer } from './reducers/pathReducer';
 import { focusedPathReducer } from './reducers/focusedPathReducer';
 import { DropdownInner } from './ui';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
-import { Ul, base } from './Dropdown.styles';
-import { childrenWithProps, getItemByFocused, getItemId } from './utils';
+import { Ul, StyledPopover, base } from './Dropdown.styles';
+import { childrenWithProps } from './utils';
 import { classes } from './Dropdown.tokens';
 import { useKeyNavigation } from './hooks/useKeyboardNavigation';
 import { useHashMaps } from './hooks/useHashMaps';
-import { FloatingPopover } from './FloatingPopover';
-export var Context = /*#__PURE__*/createContext({});
 
 /**
  * Выпадающий список.
  */
 export var dropdownRoot = function dropdownRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
-    var _getItemByFocused;
     var items = _ref.items,
       children = _ref.children,
       _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
-      offset = _ref.offset,
+      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? [0, 0] : _ref$offset,
       _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
       closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
       onToggle = _ref.onToggle,
@@ -72,25 +68,6 @@ export var dropdownRoot = function dropdownRoot(Root) {
       _useHashMaps2 = _slicedToArray(_useHashMaps, 2),
       pathMap = _useHashMaps2[0],
       focusedToValueMap = _useHashMaps2[1];
-    var activeDescendantItemValue = ((_getItemByFocused = getItemByFocused(focusedPath, focusedToValueMap)) === null || _getItemByFocused === void 0 ? void 0 : _getItemByFocused.value) || '';
-    var floatingPopoverRef = useRef(null);
-    var treeId = safeUseId();
-
-    // Логика работы при клике за пределами выпадающего списка
-    var targetRef = useOutsideClick(function (event) {
-      if (!isCurrentListOpen || !closeOnOverlayClick) {
-        return;
-      }
-      dispatchPath({
-        type: 'reset'
-      });
-      dispatchFocusedPath({
-        type: 'reset'
-      });
-      if (onToggle) {
-        onToggle(false, event);
-      }
-    }, floatingPopoverRef);
     var handleGlobalToggle = function handleGlobalToggle(opened, event) {
       if (opened) {
         dispatchPath({
@@ -122,64 +99,66 @@ export var dropdownRoot = function dropdownRoot(Root) {
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
     var isCurrentListOpen = Boolean(path[0]);
-    return /*#__PURE__*/React.createElement(Context.Provider, {
-      value: {
-        focusedPath: focusedPath,
-        size: size,
-        variant: variant,
-        itemRole: itemRole,
-        handleGlobalToggle: handleGlobalToggle,
-        closeOnSelect: closeOnSelect,
-        onHover: onHover,
-        onItemClick: onItemClick,
-        onItemSelect: onItemSelect,
-        hasArrow: hasArrow,
-        treeId: treeId
-      }
-    }, /*#__PURE__*/React.createElement(FloatingPopover, {
-      ref: floatingPopoverRef,
+    var getActiveDescendant = function getActiveDescendant() {
+      var _focusedToValueMap$ge;
+      var focusedPathAsString = focusedPath.reduce(function (acc, n) {
+        return "".concat(acc, "/").concat(n);
+      }, '').replace(/^(\/)/, '');
+      return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
+    };
+    return /*#__PURE__*/React.createElement(StyledPopover, {
       opened: isCurrentListOpen,
       onToggle: handleGlobalToggle,
-      placement: placement,
       offset: offset,
-      portal: portal,
+      placement: getPlacements(placement),
       trigger: trigger,
+      closeOnOverlayClick: closeOnOverlayClick,
+      isFocusTrapped: false,
       target: childrenWithProps(children, {
         role: 'combobox',
-        'aria-controls': "".concat(treeId, "_tree_level_1"),
+        'aria-controls': 'tree_level_1',
         'aria-expanded': isCurrentListOpen,
-        'aria-activedescendant': activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue.toString()) : '',
+        'aria-activedescendant': getActiveDescendant(),
         onKeyDown: onKeyDown
-      })
+      }),
+      preventOverflow: false,
+      usePortal: Boolean(portal),
+      frame: portal
     }, /*#__PURE__*/React.createElement(Root, _extends({
       className: cx(className, classes.dropdownRoot),
       ref: ref,
       view: view,
-      size: size,
-      style: {
-        display: 'inline-block'
-      }
+      size: size
     }, rest), /*#__PURE__*/React.createElement(Ul, {
-      ref: targetRef,
-      id: "".concat(treeId, "_tree_level_1"),
-      role: "tree",
       listHeight: listHeight,
       listOverflow: listOverflow,
+      role: "tree",
+      id: "tree_level_1",
       listWidth: listWidth
     }, items.map(function (item, index) {
       return /*#__PURE__*/React.createElement(DropdownInner, {
         key: "".concat(index, "/0"),
         item: item,
         currentLevel: 0,
+        focusedPath: focusedPath,
         trigger: trigger,
         path: path,
         dispatchPath: dispatchPath,
         index: index,
+        itemRole: itemRole,
         listHeight: listHeight,
         listOverflow: listOverflow,
-        listWidth: listWidth
+        handleGlobalToggle: handleGlobalToggle,
+        closeOnSelect: closeOnSelect,
+        onHover: onHover,
+        onItemSelect: onItemSelect,
+        onItemClick: onItemClick,
+        listWidth: listWidth,
+        variant: variant,
+        hasArrow: hasArrow,
+        size: size
       });
-    })))));
+    }))));
   });
 };
 export var dropdownConfig = {

package/emotion/es/components/Dropdown/Dropdown.styles.js

@@ -1,21 +1,37 @@
 import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import { css } from '@emotion/react';
+import { component } from '../../engines';
+import { popoverConfig, popoverClasses } from '../Popover';
 import { getCorrectHeight } from './utils';
-import { tokens, constants } from './Dropdown.tokens';
+import { tokens } from './Dropdown.tokens';
+var Popover = /*#__PURE__*/component(popoverConfig);
+export var StyledPopover = /*#__PURE__*/_styled(Popover, {
+  target: "euqmbvx1",
+  label: "plasma-new-hope__StyledPopover"
+})(".", /*#__PURE__*/String(popoverClasses.wrapper), ",.", /*#__PURE__*/String(popoverClasses.target), "{display:block;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRHJvcGRvd24vRHJvcGRvd24uc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVk0QyIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0Ryb3Bkb3duL0Ryb3Bkb3duLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgY29tcG9uZW50IH0gZnJvbSAnLi4vLi4vZW5naW5lcyc7XG5pbXBvcnQgeyBwb3BvdmVyQ29uZmlnLCBwb3BvdmVyQ2xhc3NlcyB9IGZyb20gJy4uL1BvcG92ZXInO1xuXG5pbXBvcnQgeyBnZXRDb3JyZWN0SGVpZ2h0IH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyBEcm9wZG93blByb3BzIH0gZnJvbSAnLi9Ecm9wZG93bi50eXBlcyc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL0Ryb3Bkb3duLnRva2Vucyc7XG5cbmNvbnN0IFBvcG92ZXIgPSBjb21wb25lbnQocG9wb3ZlckNvbmZpZyk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQb3BvdmVyID0gc3R5bGVkKFBvcG92ZXIpYFxuICAgIC4ke1N0cmluZyhwb3BvdmVyQ2xhc3Nlcy53cmFwcGVyKX0sIC4ke1N0cmluZyhwb3BvdmVyQ2xhc3Nlcy50YXJnZXQpfSB7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBVbCA9IHN0eWxlZC51bDx7XG4gICAgbGlzdEhlaWdodDogRHJvcGRvd25Qcm9wc1snbGlzdEhlaWdodCddO1xuICAgIGxpc3RPdmVyZmxvdzogRHJvcGRvd25Qcm9wc1snbGlzdE92ZXJmbG93J107XG4gICAgaXNJbm5lclVsPzogYm9vbGVhbjtcbiAgICBsaXN0V2lkdGg/OiBEcm9wZG93blByb3BzWydsaXN0V2lkdGgnXTtcbn0+YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMuYmFja2dyb3VuZH0pO1xuICAgIGJveC1zaGFkb3c6IHZhcigke3Rva2Vucy5ib3hTaGFkb3d9KTtcblxuICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KTtcbiAgICB3aWR0aDogJHsoeyBsaXN0V2lkdGggfSkgPT4gbGlzdFdpZHRoIHx8IGB2YXIoJHt0b2tlbnMud2lkdGh9KWB9O1xuICAgIGhlaWdodDogJHsoeyBsaXN0SGVpZ2h0IH0pID0+IChsaXN0SGVpZ2h0ID8gZ2V0Q29ycmVjdEhlaWdodChsaXN0SGVpZ2h0KSA6ICdhdXRvJyl9O1xuICAgIG92ZXJmbG93OiAkeyh7IGxpc3RPdmVyZmxvdyB9KSA9PiBsaXN0T3ZlcmZsb3cgfHwgJ2luaXRpYWwnfTtcblxuICAgIG1hcmdpbjogJHsoeyBpc0lubmVyVWwgfSkgPT4gKGlzSW5uZXJVbCA/IGBjYWxjKHZhcigke3Rva2Vucy5wYWRkaW5nfSkgKiAtMSkgMCAwIHZhcigke3Rva2Vucy5wYWRkaW5nfSlgIDogMCl9O1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5wYWRkaW5nfSk7XG5gO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5gO1xuIl19 */"));
 export var Ul = /*#__PURE__*/_styled("ul", {
   target: "euqmbvx0",
   label: "plasma-new-hope__Ul"
-})("box-sizing:border-box;width:", function (_ref) {
+})("box-sizing:border-box;background:var(", tokens.background, ");box-shadow:var(", tokens.boxShadow, ");border-radius:var(", tokens.borderRadius, ");width:", function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || "var(".concat(tokens.width, ")");
 }, ";height:", function (_ref2) {
   var listHeight = _ref2.listHeight;
   return listHeight ? getCorrectHeight(listHeight) : 'auto';
-}, ";margin:", function (_ref3) {
-  var isInnerUl = _ref3.isInnerUl;
-  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0.125rem 0") : 0;
-}, ";padding:var(", tokens.padding, ") 0;overflow:", function (_ref4) {
-  var listOverflow = _ref4.listOverflow;
+}, ";overflow:", function (_ref3) {
+  var listOverflow = _ref3.listOverflow;
   return listOverflow || 'initial';
-}, ";background:var(", constants.background, ");box-shadow:", constants.boxShadow, ";border-radius:var(", tokens.borderRadius, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRHJvcGRvd24vRHJvcGRvd24uc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVlFIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRHJvcGRvd24vRHJvcGRvd24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBnZXRDb3JyZWN0SGVpZ2h0IH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyBEcm9wZG93blByb3BzIH0gZnJvbSAnLi9Ecm9wZG93bi50eXBlcyc7XG5pbXBvcnQgeyB0b2tlbnMsIGNvbnN0YW50cyB9IGZyb20gJy4vRHJvcGRvd24udG9rZW5zJztcblxuZXhwb3J0IGNvbnN0IFVsID0gc3R5bGVkLnVsPHtcbiAgICBsaXN0SGVpZ2h0OiBEcm9wZG93blByb3BzWydsaXN0SGVpZ2h0J107XG4gICAgbGlzdE92ZXJmbG93OiBEcm9wZG93blByb3BzWydsaXN0T3ZlcmZsb3cnXTtcbiAgICBsaXN0V2lkdGg/OiBEcm9wZG93blByb3BzWydsaXN0V2lkdGgnXTtcbiAgICBpc0lubmVyVWw/OiBib29sZWFuO1xufT5gXG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICB3aWR0aDogJHsoeyBsaXN0V2lkdGggfSkgPT4gbGlzdFdpZHRoIHx8IGB2YXIoJHt0b2tlbnMud2lkdGh9KWB9O1xuICAgIGhlaWdodDogJHsoeyBsaXN0SGVpZ2h0IH0pID0+IChsaXN0SGVpZ2h0ID8gZ2V0Q29ycmVjdEhlaWdodChsaXN0SGVpZ2h0KSA6ICdhdXRvJyl9O1xuICAgIG1hcmdpbjogJHsoeyBpc0lubmVyVWwgfSkgPT4gKGlzSW5uZXJVbCA/IGBjYWxjKHZhcigke3Rva2Vucy5wYWRkaW5nfSkgKiAtMSkgMC4xMjVyZW0gMGAgOiAwKX07XG4gICAgcGFkZGluZzogdmFyKCR7dG9rZW5zLnBhZGRpbmd9KSAwO1xuICAgIG92ZXJmbG93OiAkeyh7IGxpc3RPdmVyZmxvdyB9KSA9PiBsaXN0T3ZlcmZsb3cgfHwgJ2luaXRpYWwnfTtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHtjb25zdGFudHMuYmFja2dyb3VuZH0pO1xuICAgIGJveC1zaGFkb3c6ICR7Y29uc3RhbnRzLmJveFNoYWRvd307XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLmJvcmRlclJhZGl1c30pO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgYDtcbiJdfQ== */"));
-export var base = /*#__PURE__*/css(";label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRHJvcGRvd24vRHJvcGRvd24uc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9Ecm9wZG93bi9Ecm9wZG93bi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGdldENvcnJlY3RIZWlnaHQgfSBmcm9tICcuL3V0aWxzJztcbmltcG9ydCB7IERyb3Bkb3duUHJvcHMgfSBmcm9tICcuL0Ryb3Bkb3duLnR5cGVzJztcbmltcG9ydCB7IHRva2VucywgY29uc3RhbnRzIH0gZnJvbSAnLi9Ecm9wZG93bi50b2tlbnMnO1xuXG5leHBvcnQgY29uc3QgVWwgPSBzdHlsZWQudWw8e1xuICAgIGxpc3RIZWlnaHQ6IERyb3Bkb3duUHJvcHNbJ2xpc3RIZWlnaHQnXTtcbiAgICBsaXN0T3ZlcmZsb3c6IERyb3Bkb3duUHJvcHNbJ2xpc3RPdmVyZmxvdyddO1xuICAgIGxpc3RXaWR0aD86IERyb3Bkb3duUHJvcHNbJ2xpc3RXaWR0aCddO1xuICAgIGlzSW5uZXJVbD86IGJvb2xlYW47XG59PmBcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIHdpZHRoOiAkeyh7IGxpc3RXaWR0aCB9KSA9PiBsaXN0V2lkdGggfHwgYHZhcigke3Rva2Vucy53aWR0aH0pYH07XG4gICAgaGVpZ2h0OiAkeyh7IGxpc3RIZWlnaHQgfSkgPT4gKGxpc3RIZWlnaHQgPyBnZXRDb3JyZWN0SGVpZ2h0KGxpc3RIZWlnaHQpIDogJ2F1dG8nKX07XG4gICAgbWFyZ2luOiAkeyh7IGlzSW5uZXJVbCB9KSA9PiAoaXNJbm5lclVsID8gYGNhbGModmFyKCR7dG9rZW5zLnBhZGRpbmd9KSAqIC0xKSAwLjEyNXJlbSAwYCA6IDApfTtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMucGFkZGluZ30pIDA7XG4gICAgb3ZlcmZsb3c6ICR7KHsgbGlzdE92ZXJmbG93IH0pID0+IGxpc3RPdmVyZmxvdyB8fCAnaW5pdGlhbCd9O1xuICAgIGJhY2tncm91bmQ6IHZhcigke2NvbnN0YW50cy5iYWNrZ3JvdW5kfSk7XG4gICAgYm94LXNoYWRvdzogJHtjb25zdGFudHMuYm94U2hhZG93fTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSk7XG5gO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BgO1xuIl19 */"));
+}, ";margin:", function (_ref4) {
+  var isInnerUl = _ref4.isInnerUl;
+  return isInnerUl ? "calc(var(".concat(tokens.padding, ") * -1) 0 0 var(").concat(tokens.padding, ")") : 0;
+}, ";padding:var(", tokens.padding, ");" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRHJvcGRvd24vRHJvcGRvd24uc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCRSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMtZW1vdGlvbi9jb21wb25lbnRzL0Ryb3Bkb3duL0Ryb3Bkb3duLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgY29tcG9uZW50IH0gZnJvbSAnLi4vLi4vZW5naW5lcyc7XG5pbXBvcnQgeyBwb3BvdmVyQ29uZmlnLCBwb3BvdmVyQ2xhc3NlcyB9IGZyb20gJy4uL1BvcG92ZXInO1xuXG5pbXBvcnQgeyBnZXRDb3JyZWN0SGVpZ2h0IH0gZnJvbSAnLi91dGlscyc7XG5pbXBvcnQgeyBEcm9wZG93blByb3BzIH0gZnJvbSAnLi9Ecm9wZG93bi50eXBlcyc7XG5pbXBvcnQgeyB0b2tlbnMgfSBmcm9tICcuL0Ryb3Bkb3duLnRva2Vucyc7XG5cbmNvbnN0IFBvcG92ZXIgPSBjb21wb25lbnQocG9wb3ZlckNvbmZpZyk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQb3BvdmVyID0gc3R5bGVkKFBvcG92ZXIpYFxuICAgIC4ke1N0cmluZyhwb3BvdmVyQ2xhc3Nlcy53cmFwcGVyKX0sIC4ke1N0cmluZyhwb3BvdmVyQ2xhc3Nlcy50YXJnZXQpfSB7XG4gICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBVbCA9IHN0eWxlZC51bDx7XG4gICAgbGlzdEhlaWdodDogRHJvcGRvd25Qcm9wc1snbGlzdEhlaWdodCddO1xuICAgIGxpc3RPdmVyZmxvdzogRHJvcGRvd25Qcm9wc1snbGlzdE92ZXJmbG93J107XG4gICAgaXNJbm5lclVsPzogYm9vbGVhbjtcbiAgICBsaXN0V2lkdGg/OiBEcm9wZG93blByb3BzWydsaXN0V2lkdGgnXTtcbn0+YFxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMuYmFja2dyb3VuZH0pO1xuICAgIGJveC1zaGFkb3c6IHZhcigke3Rva2Vucy5ib3hTaGFkb3d9KTtcblxuICAgIGJvcmRlci1yYWRpdXM6IHZhcigke3Rva2Vucy5ib3JkZXJSYWRpdXN9KTtcbiAgICB3aWR0aDogJHsoeyBsaXN0V2lkdGggfSkgPT4gbGlzdFdpZHRoIHx8IGB2YXIoJHt0b2tlbnMud2lkdGh9KWB9O1xuICAgIGhlaWdodDogJHsoeyBsaXN0SGVpZ2h0IH0pID0+IChsaXN0SGVpZ2h0ID8gZ2V0Q29ycmVjdEhlaWdodChsaXN0SGVpZ2h0KSA6ICdhdXRvJyl9O1xuICAgIG92ZXJmbG93OiAkeyh7IGxpc3RPdmVyZmxvdyB9KSA9PiBsaXN0T3ZlcmZsb3cgfHwgJ2luaXRpYWwnfTtcblxuICAgIG1hcmdpbjogJHsoeyBpc0lubmVyVWwgfSkgPT4gKGlzSW5uZXJVbCA/IGBjYWxjKHZhcigke3Rva2Vucy5wYWRkaW5nfSkgKiAtMSkgMCAwIHZhcigke3Rva2Vucy5wYWRkaW5nfSlgIDogMCl9O1xuICAgIHBhZGRpbmc6IHZhcigke3Rva2Vucy5wYWRkaW5nfSk7XG5gO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5gO1xuIl19 */"));
+export var base = process.env.NODE_ENV === "production" ? {
+  name: "1mufh2u-plasma-new-hope__base",
+  styles: "display:inline-block;label:plasma-new-hope__base;"
+} : {
+  name: "1mufh2u-plasma-new-hope__base",
+  styles: "display:inline-block;label:plasma-new-hope__base;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvRHJvcGRvd24vRHJvcGRvd24uc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjLWVtb3Rpb24vY29tcG9uZW50cy9Ecm9wZG93bi9Ecm9wZG93bi5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGNvbXBvbmVudCB9IGZyb20gJy4uLy4uL2VuZ2luZXMnO1xuaW1wb3J0IHsgcG9wb3ZlckNvbmZpZywgcG9wb3ZlckNsYXNzZXMgfSBmcm9tICcuLi9Qb3BvdmVyJztcblxuaW1wb3J0IHsgZ2V0Q29ycmVjdEhlaWdodCB9IGZyb20gJy4vdXRpbHMnO1xuaW1wb3J0IHsgRHJvcGRvd25Qcm9wcyB9IGZyb20gJy4vRHJvcGRvd24udHlwZXMnO1xuaW1wb3J0IHsgdG9rZW5zIH0gZnJvbSAnLi9Ecm9wZG93bi50b2tlbnMnO1xuXG5jb25zdCBQb3BvdmVyID0gY29tcG9uZW50KHBvcG92ZXJDb25maWcpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUG9wb3ZlciA9IHN0eWxlZChQb3BvdmVyKWBcbiAgICAuJHtTdHJpbmcocG9wb3ZlckNsYXNzZXMud3JhcHBlcil9LCAuJHtTdHJpbmcocG9wb3ZlckNsYXNzZXMudGFyZ2V0KX0ge1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgVWwgPSBzdHlsZWQudWw8e1xuICAgIGxpc3RIZWlnaHQ6IERyb3Bkb3duUHJvcHNbJ2xpc3RIZWlnaHQnXTtcbiAgICBsaXN0T3ZlcmZsb3c6IERyb3Bkb3duUHJvcHNbJ2xpc3RPdmVyZmxvdyddO1xuICAgIGlzSW5uZXJVbD86IGJvb2xlYW47XG4gICAgbGlzdFdpZHRoPzogRHJvcGRvd25Qcm9wc1snbGlzdFdpZHRoJ107XG59PmBcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXG4gICAgYmFja2dyb3VuZDogdmFyKCR7dG9rZW5zLmJhY2tncm91bmR9KTtcbiAgICBib3gtc2hhZG93OiB2YXIoJHt0b2tlbnMuYm94U2hhZG93fSk7XG5cbiAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuYm9yZGVyUmFkaXVzfSk7XG4gICAgd2lkdGg6ICR7KHsgbGlzdFdpZHRoIH0pID0+IGxpc3RXaWR0aCB8fCBgdmFyKCR7dG9rZW5zLndpZHRofSlgfTtcbiAgICBoZWlnaHQ6ICR7KHsgbGlzdEhlaWdodCB9KSA9PiAobGlzdEhlaWdodCA/IGdldENvcnJlY3RIZWlnaHQobGlzdEhlaWdodCkgOiAnYXV0bycpfTtcbiAgICBvdmVyZmxvdzogJHsoeyBsaXN0T3ZlcmZsb3cgfSkgPT4gbGlzdE92ZXJmbG93IHx8ICdpbml0aWFsJ307XG5cbiAgICBtYXJnaW46ICR7KHsgaXNJbm5lclVsIH0pID0+IChpc0lubmVyVWwgPyBgY2FsYyh2YXIoJHt0b2tlbnMucGFkZGluZ30pICogLTEpIDAgMCB2YXIoJHt0b2tlbnMucGFkZGluZ30pYCA6IDApfTtcbiAgICBwYWRkaW5nOiB2YXIoJHt0b2tlbnMucGFkZGluZ30pO1xuYDtcblxuZXhwb3J0IGNvbnN0IGJhc2UgPSBjc3NgXG4gICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};

package/emotion/es/components/Dropdown/Dropdown.tokens.js

@@ -3,7 +3,7 @@ export var classes = {
   dropdownItemIsFocused: 'dropdown-item-is-focused',
   dropdownItemIsDisabled: 'dropdown-item-is-disabled',
   dropdownItemIsActive: 'dropdown-item-is-active',
-  dropdownItemIsSelected: 'dropdown-item-is-selected'
+  dropdownItemIsSelected: 'dropdownItemIsSelected'
 };
 export var tokens = {
   background: '--plasma-dropdown-background',
@@ -14,8 +14,6 @@ export var tokens = {
   disclosureIconColor: '--plasma-dropdown-disclosure-icon-color',
   disabledOpacity: '--plasma-dropdown-disabled-opacity',
   focusColor: '--plasma-dropdown-focus-color',
-  // Old
-
   dividerColor: '--plasma-dropdown-divider-color',
   dividerMarginTop: '--plasma-dropdown-divider-margin-top',
   dividerMarginTopTight: '--plasma-dropdown-divider-margin-top-tight',
@@ -30,7 +28,6 @@ export var tokens = {
   itemBackgroundSelectedHover: '--plasma-dropdown-item-background-selected-hover',
   // Old
   itemColor: '--plasma-dropdown-item-color',
-  // Old
   itemColorSelected: '--plasma-dropdown-item-color-selected',
   // Old
   itemColorSelectedHover: '--plasma-dropdown-item-color-selected-hover',
@@ -49,17 +46,11 @@ export var tokens = {
   itemMarginLeft: '--plasma-dropdown-item-margin-left',
   // Old
   itemPaddingTop: '--plasma-dropdown-item-padding-top',
-  // Old
   itemPaddingTopTight: '--plasma-dropdown-item-padding-top-tight',
-  // Old
   itemPaddingRight: '--plasma-dropdown-item-padding-right',
-  // Old
   itemPaddingBottom: '--plasma-dropdown-item-padding-bottom',
-  // Old
   itemPaddingBottomTight: '--plasma-dropdown-item-padding-bottom-tight',
-  // Old
   itemPaddingLeft: '--plasma-dropdown-item-padding-left',
-  // Old
   itemContentLeftWidth: '--plasma-dropdown-item-content-left-width',
   // Old
   itemContentLeftColor: '--plasma-dropdown-item-content-left-color',
@@ -74,20 +65,6 @@ export var tokens = {
   itemFontWeightBold: '--plasma-dropdown-item-letter-spacing',
   itemFontLetterSpacing: '--plasma-dropdown-item-line-height',
   itemFontLineHeight: '--plasma-dropdown-item-font-weight',
-  itemPadding: '--plasma-dropdown-item-padding',
-  itemPaddingTight: '--plasma-dropdown-item-padding-tight',
-  cellPadding: '--plasma-dropdown-cell-padding',
-  cellPaddingLeftContent: '--plasma-dropdown-cell-padding-left-content',
-  cellPaddingContent: '--plasma-dropdown-cell-padding-content',
-  cellPaddingRightContent: '--plasma-dropdown-cell-padding-right-content',
-  cellTextboxGap: '--plasma-dropdown-cell-textbox-gap',
-  cellGap: '--plasma-dropdown-cell-gap',
-  cellTitleFontFamily: '--plasma-dropdown-cell-title-font-family',
-  cellTitleFontSize: '--plasma-dropdown-cell-title-font-size',
-  cellTitleFontStyle: '--plasma-dropdown-cell-title-font-style',
-  cellTitleFontWeight: '--plasma-dropdown-cell-title-font-weight',
-  cellTitleLetterSpacing: '--plasma-dropdown-cell-title-letter-spacing',
-  cellTitleLineHeight: '--plasma-dropdown-cell-title-line-height',
   // TODO: Remove below tokens as soon as they are no longer needed
   footerBackground: '--plasma-dropdown-footer-background',
   footerWidth: '--plasma-dropdown-footer-width',
@@ -151,15 +128,4 @@ export var tokens = {
   groupLabelMarginRight: '--plasma-dropdown-group-label-margin-right',
   groupLabelMarginBottom: '--plasma-dropdown-group-label-margin-bottom',
   groupLabelMarginLeft: '--plasma-dropdown-group-label-margin-left'
-};
-export var constants = {
-  focusColor: '--surface-accent',
-  background: '--surface-solid-card',
-  boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
-  disclosureIconColor: '--text-secondary',
-  itemBackground: '--plasma-colors-transparent',
-  itemBackgroundHover: '--surface-transparent-secondary',
-  opacity: '0.4',
-  cellTitleColor: '--text-primary',
-  cellBackgroundColor: '--plasma-colors-transparent'
 };

package/emotion/es/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -1,18 +1,26 @@
 import React from 'react';
-import { safeUseId } from '@salutejs/plasma-core';
 import { DropdownItem } from '..';
-import { Ul } from '../../Dropdown.styles';
-import { FloatingPopover } from '../../FloatingPopover';
+import { Ul, StyledPopover } from '../../Dropdown.styles';
 var DropdownInner = function DropdownInner(_ref) {
   var item = _ref.item,
     currentLevel = _ref.currentLevel,
+    focusedPath = _ref.focusedPath,
     path = _ref.path,
     dispatchPath = _ref.dispatchPath,
     index = _ref.index,
     trigger = _ref.trigger,
+    itemRole = _ref.itemRole,
     listHeight = _ref.listHeight,
     listOverflow = _ref.listOverflow,
-    listWidth = _ref.listWidth;
+    handleGlobalToggle = _ref.handleGlobalToggle,
+    closeOnSelect = _ref.closeOnSelect,
+    onHover = _ref.onHover,
+    onItemSelect = _ref.onItemSelect,
+    onItemClick = _ref.onItemClick,
+    listWidth = _ref.listWidth,
+    variant = _ref.variant,
+    hasArrow = _ref.hasArrow,
+    size = _ref.size;
   var handleToggle = function handleToggle(opened) {
     if (opened) {
       dispatchPath({
@@ -28,54 +36,80 @@ var DropdownInner = function DropdownInner(_ref) {
     }
   };
   var isCurrentListOpen = path[currentLevel + 1] === item.value.toString();
-  var treeId = safeUseId();
-  var listId = "".concat(treeId, "_tree_level_").concat(currentLevel + 2);
+  var listId = "tree_level_".concat(currentLevel + 2);
   var nextLevel = currentLevel + 1;
   if (item !== null && item !== void 0 && item.items) {
-    return /*#__PURE__*/React.createElement(FloatingPopover, {
-      placement: "right-start",
+    return /*#__PURE__*/React.createElement(StyledPopover, {
       opened: isCurrentListOpen,
-      onToggle: handleToggle,
+      usePortal: false,
+      placement: "right-start",
       trigger: trigger,
       target: /*#__PURE__*/React.createElement(DropdownItem, {
         item: item,
         index: index,
         path: path,
+        focusedPath: focusedPath,
         currentLevel: currentLevel,
+        itemRole: itemRole,
+        onHover: onHover,
+        onItemSelect: onItemSelect,
+        onItemClick: onItemClick,
+        variant: variant,
+        hasArrow: hasArrow,
         ariaControls: listId,
         ariaExpanded: isCurrentListOpen,
         ariaLevel: nextLevel,
-        ariaLabel: item.label
+        ariaLabel: item.label,
+        size: size
       }),
-      isInner: true
+      onToggle: handleToggle,
+      isFocusTrapped: false,
+      preventOverflow: false
     }, /*#__PURE__*/React.createElement(Ul, {
-      id: listId,
-      role: "group",
-      isInnerUl: true,
       listHeight: listHeight,
       listOverflow: listOverflow,
-      listWidth: listWidth
+      role: "group",
+      id: listId,
+      listWidth: listWidth,
+      isInnerUl: true
     }, item.items.map(function (innerItem, innerIndex) {
       return /*#__PURE__*/React.createElement(DropdownInner, {
         key: "".concat(innerIndex, "/").concat(currentLevel),
         item: innerItem,
         currentLevel: nextLevel,
+        focusedPath: focusedPath,
         path: path,
         dispatchPath: dispatchPath,
         index: innerIndex,
         trigger: trigger,
+        itemRole: itemRole,
         listHeight: listHeight,
         listOverflow: listOverflow,
-        listWidth: listWidth
+        handleGlobalToggle: handleGlobalToggle,
+        closeOnSelect: closeOnSelect,
+        onHover: onHover,
+        onItemSelect: onItemSelect,
+        onItemClick: onItemClick,
+        listWidth: listWidth,
+        variant: variant,
+        hasArrow: hasArrow,
+        size: size
       });
     })));
   }
   return /*#__PURE__*/React.createElement(DropdownItem, {
     item: item,
-    path: path,
     index: index,
+    focusedPath: focusedPath,
     currentLevel: currentLevel,
-    ariaLevel: nextLevel
+    itemRole: itemRole,
+    handleGlobalToggle: handleGlobalToggle,
+    closeOnSelect: closeOnSelect,
+    onHover: onHover,
+    onItemSelect: onItemSelect,
+    onItemClick: onItemClick,
+    variant: variant,
+    size: size
   });
 };
 export { DropdownInner };