@infomaximum/ui-kit 0.19.0 → 0.20.1

package/dist/components/NewDropdown/NewDropdown.d.ts

@@ -0,0 +1,2 @@
+import { NewDropdownProps } from './NewDropdown.types';
+export declare const NewDropdown: import('react').NamedExoticComponent<NewDropdownProps>;

package/dist/components/NewDropdown/NewDropdown.js

@@ -0,0 +1,180 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { memo, useRef, useState, useMemo, useEffect, isValidElement, cloneElement } from "react";
+import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, size, useFloating, offset, flip, shift, autoUpdate, useMergeRefs, useClick, useHover, safePolygon, useDismiss, useListNavigation, useInteractions, useFloatingTree, FloatingNode, FloatingList, FloatingPortal, FloatingFocusManager } from "@floating-ui/react";
+import { useControlledState } from "../../hooks/useControlledState/useControlledState.js";
+import { useEvent } from "../../hooks/useEvent/useEvent.js";
+import { rootStyle } from "./NewDropdown.styles.js";
+import { placementMap, getFirstEnabledIndex, defaultMenuConfig, defaultTrigger, defaultDropdownMinWidth, defaultDropdownMaxHeight } from "./NewDropdown.utils.js";
+import { Menu } from "./components/Menu/Menu.js";
+import { NewDropdownContext } from "./contexts/NewDropdownContext.js";
+import { NewDropdownNavigationContext } from "./contexts/NewDropdownNavigationContext.js";
+import { getNodeRef } from "rc-util/es/ref.js";
+import { useNewDropdownTokens } from "./hooks/useNewDropdownTokens/useNewDropdownTokens.js";
+import { useContextMenu } from "./hooks/useContextMenu/useContextMenu.js";
+const NewDropdownInner = (props) => {
+  var _a;
+  const {
+    children: childrenProp,
+    menu,
+    placement = "bottomLeft",
+    styles,
+    trigger = defaultTrigger,
+    open: openProp,
+    onOpenChange: onOpenChangeProp,
+    disabled = false,
+    autoFocus = false,
+    dropdownWidth = null,
+    dropdownMinWidth = defaultDropdownMinWidth,
+    dropdownMaxHeight = defaultDropdownMaxHeight,
+    popupRender,
+    getPopupContainer,
+    "test-id": testId
+  } = props;
+  const {
+    theme,
+    tokens
+  } = useNewDropdownTokens();
+  const nodeId = useFloatingNodeId();
+  const elementsRef = useRef([]);
+  const [open, setOpen] = useControlledState(false, openProp);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [triggerEl, setTriggerEl] = useState(null);
+  const handleOpenChange = (next, _event, reason) => {
+    setOpen(next);
+    onOpenChangeProp == null ? void 0 : onOpenChangeProp(next, {
+      source: reason !== void 0 ? "trigger" : "menu"
+    });
+  };
+  const [referenceWidth, setReferenceWidth] = useState(null);
+  const sizeMiddleware = useMemo(() => size({
+    apply({
+      rects
+    }) {
+      if (dropdownWidth === "equal") {
+        setReferenceWidth(rects.reference.width);
+      }
+    }
+  }), [dropdownWidth]);
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = useFloating({
+    nodeId,
+    open,
+    onOpenChange: handleOpenChange,
+    placement: placementMap[placement],
+    middleware: [offset(theme.x1), flip(), shift(), sizeMiddleware],
+    whileElementsMounted: autoUpdate
+  });
+  const childRef = getNodeRef(childrenProp);
+  const mergedRef = useMergeRefs([refs.setReference, childRef, setTriggerEl]);
+  const click = useClick(context, {
+    enabled: !disabled && trigger.includes("click")
+  });
+  const hover = useHover(context, {
+    enabled: !disabled && trigger.includes("hover"),
+    handleClose: safePolygon()
+  });
+  const isContextMenuOnly = trigger.includes("contextMenu") && !trigger.includes("click");
+  const dismiss = useDismiss(context, {
+    escapeKey: true,
+    outsidePress: true,
+    referencePress: isContextMenuOnly,
+    enabled: !disabled
+  });
+  const contextMenu = useContextMenu(context, {
+    enabled: !disabled && trigger.includes("contextMenu")
+  });
+  const listNavigation = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    enabled: !disabled
+  });
+  const {
+    getFloatingProps,
+    getReferenceProps,
+    getItemProps
+  } = useInteractions([click, hover, dismiss, contextMenu, listNavigation]);
+  const stableGetItemProps = useEvent(getItemProps);
+  const autoFocusIndex = useMemo(() => getFirstEnabledIndex(menu.items), [menu.items]);
+  useEffect(() => {
+    if (!open) {
+      setActiveIndex(null);
+      return;
+    }
+    if (autoFocus) {
+      setActiveIndex(autoFocusIndex);
+    }
+  }, [autoFocus, open, autoFocusIndex]);
+  const tree = useFloatingTree();
+  useEffect(() => {
+    if (!tree) {
+      return;
+    }
+    const handleTreeClick = (event) => {
+      context.onOpenChange(false, event);
+    };
+    tree.events.on("click", handleTreeClick);
+    return () => {
+      tree.events.off("click", handleTreeClick);
+    };
+  }, [tree, context]);
+  const referenceProps = getReferenceProps({
+    ref: mergedRef,
+    ...childrenProp.props
+  });
+  const children = isValidElement(childrenProp) ? cloneElement(childrenProp, referenceProps) : childrenProp;
+  const contextValue = useMemo(() => ({
+    styles,
+    triggerSubMenuAction: menu.triggerSubMenuAction ?? defaultMenuConfig.triggerSubMenuAction,
+    subMenuOpenDelay: menu.subMenuOpenDelay ?? defaultMenuConfig.subMenuOpenDelay,
+    subMenuCloseDelay: menu.subMenuCloseDelay ?? defaultMenuConfig.subMenuCloseDelay,
+    onMenuClick: menu.onClick
+  }), [styles, menu.triggerSubMenuAction, menu.subMenuOpenDelay, menu.subMenuCloseDelay, menu.onClick]);
+  const navigationContextValue = useMemo(() => ({
+    activeIndex,
+    getItemProps: stableGetItemProps
+  }), [activeIndex, stableGetItemProps]);
+  const popupContainer = useMemo(() => {
+    if (!getPopupContainer || !triggerEl) {
+      return void 0;
+    }
+    return getPopupContainer(triggerEl);
+  }, [getPopupContainer, triggerEl]);
+  const canRenderPopup = open && (!getPopupContainer || popupContainer);
+  const popupStyle = useMemo(() => {
+    const width = dropdownWidth === "equal" ? referenceWidth : dropdownWidth;
+    return {
+      ...floatingStyles,
+      ...width !== null && {
+        width
+      },
+      ...dropdownMinWidth !== null && {
+        minWidth: dropdownMinWidth
+      },
+      ...dropdownMaxHeight !== null && {
+        maxHeight: dropdownMaxHeight,
+        overflowY: "auto",
+        overflowX: "hidden"
+      }
+    };
+  }, [floatingStyles, dropdownWidth, dropdownMinWidth, dropdownMaxHeight, referenceWidth]);
+  const menuNode = /* @__PURE__ */ jsx(NewDropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(NewDropdownNavigationContext.Provider, { value: navigationContextValue, children: /* @__PURE__ */ jsx(Menu, { items: menu.items, "test-id": menu["test-id"] }) }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: canRenderPopup && /* @__PURE__ */ jsx(FloatingPortal, { root: popupContainer, children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, initialFocus: autoFocus ? 0 : -1, children: /* @__PURE__ */ jsx("div", { ref: refs.setFloating, style: popupStyle, css: [rootStyle(theme), (_a = styles == null ? void 0 : styles.root) == null ? void 0 : _a.call(styles, tokens, theme), process.env.NODE_ENV === "production" ? "" : ";label:NewDropdownInner;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTmV3RHJvcGRvd24vTmV3RHJvcGRvd24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStQa0IiLCJmaWxlIjoiL2J1aWxkcy9mcm9udGVuZC9saWJzL3VpLWtpdC9zcmMvY29tcG9uZW50cy9OZXdEcm9wZG93bi9OZXdEcm9wZG93bi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBjbG9uZUVsZW1lbnQsXG4gIGlzVmFsaWRFbGVtZW50LFxuICBtZW1vLFxuICB1c2VFZmZlY3QsXG4gIHVzZU1lbW8sXG4gIHVzZVJlZixcbiAgdXNlU3RhdGUsXG4gIHR5cGUgQ1NTUHJvcGVydGllcyxcbiAgdHlwZSBGQyxcbn0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQge1xuICBhdXRvVXBkYXRlLFxuICBmbGlwLFxuICBGbG9hdGluZ0ZvY3VzTWFuYWdlcixcbiAgRmxvYXRpbmdMaXN0LFxuICBGbG9hdGluZ05vZGUsXG4gIEZsb2F0aW5nUG9ydGFsLFxuICBGbG9hdGluZ1RyZWUsXG4gIG9mZnNldCxcbiAgc2FmZVBvbHlnb24sXG4gIHNoaWZ0LFxuICBzaXplLFxuICB1c2VDbGljayxcbiAgdXNlRGlzbWlzcyxcbiAgdXNlRmxvYXRpbmcsXG4gIHVzZUZsb2F0aW5nTm9kZUlkLFxuICB1c2VGbG9hdGluZ1BhcmVudE5vZGVJZCxcbiAgdXNlRmxvYXRpbmdUcmVlLFxuICB1c2VIb3ZlcixcbiAgdXNlSW50ZXJhY3Rpb25zLFxuICB1c2VMaXN0TmF2aWdhdGlvbixcbiAgdXNlTWVyZ2VSZWZzLFxufSBmcm9tIFwiQGZsb2F0aW5nLXVpL3JlYWN0XCI7XG5pbXBvcnQgeyB1c2VDb250cm9sbGVkU3RhdGUgfSBmcm9tIFwiaG9va3MvdXNlQ29udHJvbGxlZFN0YXRlXCI7XG5pbXBvcnQgeyB1c2VFdmVudCB9IGZyb20gXCJob29rcy91c2VFdmVudFwiO1xuaW1wb3J0IHsgdXNlTmV3RHJvcGRvd25Ub2tlbnMgfSBmcm9tIFwiLi9ob29rcy91c2VOZXdEcm9wZG93blRva2Vuc1wiO1xuaW1wb3J0IHsgcm9vdFN0eWxlIH0gZnJvbSBcIi4vTmV3RHJvcGRvd24uc3R5bGVzXCI7XG5pbXBvcnQge1xuICBkZWZhdWx0RHJvcGRvd25NYXhIZWlnaHQsXG4gIGRlZmF1bHREcm9wZG93bk1pbldpZHRoLFxuICBkZWZhdWx0TWVudUNvbmZpZyxcbiAgZGVmYXVsdFRyaWdnZXIsXG4gIGdldEZpcnN0RW5hYmxlZEluZGV4LFxuICBwbGFjZW1lbnRNYXAsXG59IGZyb20gXCIuL05ld0Ryb3Bkb3duLnV0aWxzXCI7XG5pbXBvcnQgeyBNZW51IH0gZnJvbSBcIi4vY29tcG9uZW50cy9NZW51L01lbnVcIjtcbmltcG9ydCB7IHVzZUNvbnRleHRNZW51IH0gZnJvbSBcIi4vaG9va3MvdXNlQ29udGV4dE1lbnVcIjtcbmltcG9ydCB7IE5ld0Ryb3Bkb3duQ29udGV4dCwgdHlwZSBOZXdEcm9wZG93bkNvbnRleHRWYWx1ZSB9IGZyb20gXCIuL2NvbnRleHRzL05ld0Ryb3Bkb3duQ29udGV4dFwiO1xuaW1wb3J0IHtcbiAgTmV3RHJvcGRvd25OYXZpZ2F0aW9uQ29udGV4dCxcbiAgdHlwZSBOZXdEcm9wZG93bk5hdmlnYXRpb25Db250ZXh0VmFsdWUsXG59IGZyb20gXCIuL2NvbnRleHRzL05ld0Ryb3Bkb3duTmF2aWdhdGlvbkNvbnRleHRcIjtcbmltcG9ydCB0eXBlIHsgTmV3RHJvcGRvd25Qcm9wcyB9IGZyb20gXCIuL05ld0Ryb3Bkb3duLnR5cGVzXCI7XG5pbXBvcnQgeyBnZXROb2RlUmVmIH0gZnJvbSBcInJjLXV0aWwvZXMvcmVmLmpzXCI7XG5cbmNvbnN0IE5ld0Ryb3Bkb3duSW5uZXI6IEZDPE5ld0Ryb3Bkb3duUHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBjaGlsZHJlbjogY2hpbGRyZW5Qcm9wLFxuICAgIG1lbnUsXG4gICAgcGxhY2VtZW50ID0gXCJib3R0b21MZWZ0XCIsXG4gICAgc3R5bGVzLFxuICAgIHRyaWdnZXIgPSBkZWZhdWx0VHJpZ2dlcixcbiAgICBvcGVuOiBvcGVuUHJvcCxcbiAgICBvbk9wZW5DaGFuZ2U6IG9uT3BlbkNoYW5nZVByb3AsXG4gICAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgICBhdXRvRm9jdXMgPSBmYWxzZSxcbiAgICBkcm9wZG93bldpZHRoID0gbnVsbCxcbiAgICBkcm9wZG93bk1pbldpZHRoID0gZGVmYXVsdERyb3Bkb3duTWluV2lkdGgsXG4gICAgZHJvcGRvd25NYXhIZWlnaHQgPSBkZWZhdWx0RHJvcGRvd25NYXhIZWlnaHQsXG4gICAgcG9wdXBSZW5kZXIsXG4gICAgZ2V0UG9wdXBDb250YWluZXIsXG4gICAgXCJ0ZXN0LWlkXCI6IHRlc3RJZCxcbiAgfSA9IHByb3BzO1xuICBjb25zdCB7IHRoZW1lLCB0b2tlbnMgfSA9IHVzZU5ld0Ryb3Bkb3duVG9rZW5zKCk7XG4gIGNvbnN0IG5vZGVJZCA9IHVzZUZsb2F0aW5nTm9kZUlkKCk7XG4gIGNvbnN0IGVsZW1lbnRzUmVmID0gdXNlUmVmPEFycmF5PEhUTUxFbGVtZW50IHwgbnVsbD4+KFtdKTtcblxuICBjb25zdCBbb3Blbiwgc2V0T3Blbl0gPSB1c2VDb250cm9sbGVkU3RhdGUoZmFsc2UsIG9wZW5Qcm9wKTtcbiAgY29uc3QgW2FjdGl2ZUluZGV4LCBzZXRBY3RpdmVJbmRleF0gPSB1c2VTdGF0ZTxudW1iZXIgfCBudWxsPihudWxsKTtcbiAgY29uc3QgW3RyaWdnZXJFbCwgc2V0VHJpZ2dlckVsXSA9IHVzZVN0YXRlPEhUTUxFbGVtZW50IHwgbnVsbD4obnVsbCk7XG5cbiAgY29uc3QgaGFuZGxlT3BlbkNoYW5nZTogTm9uTnVsbGFibGU8UGFyYW1ldGVyczx0eXBlb2YgdXNlRmxvYXRpbmc+WzBdPltcIm9uT3BlbkNoYW5nZVwiXSA9IChcbiAgICBuZXh0LFxuICAgIF9ldmVudCxcbiAgICByZWFzb25cbiAgKSA9PiB7XG4gICAgc2V0T3BlbihuZXh0KTtcbiAgICBvbk9wZW5DaGFuZ2VQcm9wPy4obmV4dCwgeyBzb3VyY2U6IHJlYXNvbiAhPT0gdW5kZWZpbmVkID8gXCJ0cmlnZ2VyXCIgOiBcIm1lbnVcIiB9KTtcbiAgfTtcblxuICBjb25zdCBbcmVmZXJlbmNlV2lkdGgsIHNldFJlZmVyZW5jZVdpZHRoXSA9IHVzZVN0YXRlPG51bWJlciB8IG51bGw+KG51bGwpO1xuXG4gIGNvbnN0IHNpemVNaWRkbGV3YXJlID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgc2l6ZSh7XG4gICAgICAgIGFwcGx5KHsgcmVjdHMgfSkge1xuICAgICAgICAgIGlmIChkcm9wZG93bldpZHRoID09PSBcImVxdWFsXCIpIHtcbiAgICAgICAgICAgIHNldFJlZmVyZW5jZVdpZHRoKHJlY3RzLnJlZmVyZW5jZS53aWR0aCk7XG4gICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgW2Ryb3Bkb3duV2lkdGhdXG4gICk7XG5cbiAgY29uc3QgeyByZWZzLCBmbG9hdGluZ1N0eWxlcywgY29udGV4dCB9ID0gdXNlRmxvYXRpbmcoe1xuICAgIG5vZGVJZCxcbiAgICBvcGVuLFxuICAgIG9uT3BlbkNoYW5nZTogaGFuZGxlT3BlbkNoYW5nZSxcbiAgICBwbGFjZW1lbnQ6IHBsYWNlbWVudE1hcFtwbGFjZW1lbnRdLFxuICAgIG1pZGRsZXdhcmU6IFtvZmZzZXQodGhlbWUueDEpLCBmbGlwKCksIHNoaWZ0KCksIHNpemVNaWRkbGV3YXJlXSxcbiAgICB3aGlsZUVsZW1lbnRzTW91bnRlZDogYXV0b1VwZGF0ZSxcbiAgfSk7XG4gIGNvbnN0IGNoaWxkUmVmID0gZ2V0Tm9kZVJlZihjaGlsZHJlblByb3ApO1xuICBjb25zdCBtZXJnZWRSZWYgPSB1c2VNZXJnZVJlZnMoW3JlZnMuc2V0UmVmZXJlbmNlLCBjaGlsZFJlZiwgc2V0VHJpZ2dlckVsXSk7XG5cbiAgY29uc3QgY2xpY2sgPSB1c2VDbGljayhjb250ZXh0LCB7IGVuYWJsZWQ6ICFkaXNhYmxlZCAmJiB0cmlnZ2VyLmluY2x1ZGVzKFwiY2xpY2tcIikgfSk7XG4gIGNvbnN0IGhvdmVyID0gdXNlSG92ZXIoY29udGV4dCwge1xuICAgIGVuYWJsZWQ6ICFkaXNhYmxlZCAmJiB0cmlnZ2VyLmluY2x1ZGVzKFwiaG92ZXJcIiksXG4gICAgaGFuZGxlQ2xvc2U6IHNhZmVQb2x5Z29uKCksXG4gIH0pO1xuICBjb25zdCBpc0NvbnRleHRNZW51T25seSA9IHRyaWdnZXIuaW5jbHVkZXMoXCJjb250ZXh0TWVudVwiKSAmJiAhdHJpZ2dlci5pbmNsdWRlcyhcImNsaWNrXCIpO1xuICBjb25zdCBkaXNtaXNzID0gdXNlRGlzbWlzcyhjb250ZXh0LCB7XG4gICAgZXNjYXBlS2V5OiB0cnVlLFxuICAgIG91dHNpZGVQcmVzczogdHJ1ZSxcbiAgICByZWZlcmVuY2VQcmVzczogaXNDb250ZXh0TWVudU9ubHksXG4gICAgZW5hYmxlZDogIWRpc2FibGVkLFxuICB9KTtcbiAgY29uc3QgY29udGV4dE1lbnUgPSB1c2VDb250ZXh0TWVudShjb250ZXh0LCB7XG4gICAgZW5hYmxlZDogIWRpc2FibGVkICYmIHRyaWdnZXIuaW5jbHVkZXMoXCJjb250ZXh0TWVudVwiKSxcbiAgfSk7XG4gIGNvbnN0IGxpc3ROYXZpZ2F0aW9uID0gdXNlTGlzdE5hdmlnYXRpb24oY29udGV4dCwge1xuICAgIGxpc3RSZWY6IGVsZW1lbnRzUmVmLFxuICAgIGFjdGl2ZUluZGV4LFxuICAgIG9uTmF2aWdhdGU6IHNldEFjdGl2ZUluZGV4LFxuICAgIGVuYWJsZWQ6ICFkaXNhYmxlZCxcbiAgfSk7XG4gIGNvbnN0IHsgZ2V0RmxvYXRpbmdQcm9wcywgZ2V0UmVmZXJlbmNlUHJvcHMsIGdldEl0ZW1Qcm9wcyB9ID0gdXNlSW50ZXJhY3Rpb25zKFtcbiAgICBjbGljayxcbiAgICBob3ZlcixcbiAgICBkaXNtaXNzLFxuICAgIGNvbnRleHRNZW51LFxuICAgIGxpc3ROYXZpZ2F0aW9uLFxuICBdKTtcbiAgLy8gZ2V0SXRlbVByb3BzINC+0YIgdXNlSW50ZXJhY3Rpb25zINC40LzQtdC10YIg0L3QvtCy0YPRjiDRgdGB0YvQu9C60YMg0LrQsNC20LTRi9C5INGA0LXQvdC00LXRgDsg0YHRgtCw0LHQuNC70LjQt9C40YDRg9C10LxcbiAgLy8g0YfQtdGA0LXQtyB1c2VFdmVudCwg0YfRgtC+0LHRiyBuYXZpZ2F0aW9uQ29udGV4dFZhbHVlINC90LUg0LjQvdCy0LDQu9C40LTQuNGA0L7QstCw0LvRgdGPINCx0LXQtyDRgdC80LXQvdGLIGFjdGl2ZUluZGV4LlxuICBjb25zdCBzdGFibGVHZXRJdGVtUHJvcHMgPSB1c2VFdmVudChnZXRJdGVtUHJvcHMpO1xuXG4gIGNvbnN0IGF1dG9Gb2N1c0luZGV4ID0gdXNlTWVtbygoKSA9PiBnZXRGaXJzdEVuYWJsZWRJbmRleChtZW51Lml0ZW1zKSwgW21lbnUuaXRlbXNdKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmICghb3Blbikge1xuICAgICAgc2V0QWN0aXZlSW5kZXgobnVsbCk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBpZiAoYXV0b0ZvY3VzKSB7XG4gICAgICBzZXRBY3RpdmVJbmRleChhdXRvRm9jdXNJbmRleCk7XG4gICAgfVxuICB9LCBbYXV0b0ZvY3VzLCBvcGVuLCBhdXRvRm9jdXNJbmRleF0pO1xuXG4gIGNvbnN0IHRyZWUgPSB1c2VGbG9hdGluZ1RyZWUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmICghdHJlZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IGhhbmRsZVRyZWVDbGljayA9IChldmVudD86IEV2ZW50KSA9PiB7XG4gICAgICBjb250ZXh0Lm9uT3BlbkNoYW5nZShmYWxzZSwgZXZlbnQpO1xuICAgIH07XG5cbiAgICB0cmVlLmV2ZW50cy5vbihcImNsaWNrXCIsIGhhbmRsZVRyZWVDbGljayk7XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgdHJlZS5ldmVudHMub2ZmKFwiY2xpY2tcIiwgaGFuZGxlVHJlZUNsaWNrKTtcbiAgICB9O1xuICB9LCBbdHJlZSwgY29udGV4dF0pO1xuXG4gIGNvbnN0IHJlZmVyZW5jZVByb3BzID0gZ2V0UmVmZXJlbmNlUHJvcHMoe1xuICAgIHJlZjogbWVyZ2VkUmVmLFxuICAgIC4uLmNoaWxkcmVuUHJvcC5wcm9wcyxcbiAgfSk7XG5cbiAgY29uc3QgY2hpbGRyZW4gPSBpc1ZhbGlkRWxlbWVudChjaGlsZHJlblByb3ApXG4gICAgPyBjbG9uZUVsZW1lbnQoY2hpbGRyZW5Qcm9wLCByZWZlcmVuY2VQcm9wcylcbiAgICA6IGNoaWxkcmVuUHJvcDtcblxuICBjb25zdCBjb250ZXh0VmFsdWUgPSB1c2VNZW1vPE5ld0Ryb3Bkb3duQ29udGV4dFZhbHVlPihcbiAgICAoKSA9PiAoe1xuICAgICAgc3R5bGVzLFxuICAgICAgdHJpZ2dlclN1Yk1lbnVBY3Rpb246IG1lbnUudHJpZ2dlclN1Yk1lbnVBY3Rpb24gPz8gZGVmYXVsdE1lbnVDb25maWcudHJpZ2dlclN1Yk1lbnVBY3Rpb24sXG4gICAgICBzdWJNZW51T3BlbkRlbGF5OiBtZW51LnN1Yk1lbnVPcGVuRGVsYXkgPz8gZGVmYXVsdE1lbnVDb25maWcuc3ViTWVudU9wZW5EZWxheSxcbiAgICAgIHN1Yk1lbnVDbG9zZURlbGF5OiBtZW51LnN1Yk1lbnVDbG9zZURlbGF5ID8/IGRlZmF1bHRNZW51Q29uZmlnLnN1Yk1lbnVDbG9zZURlbGF5LFxuICAgICAgb25NZW51Q2xpY2s6IG1lbnUub25DbGljayxcbiAgICB9KSxcbiAgICBbc3R5bGVzLCBtZW51LnRyaWdnZXJTdWJNZW51QWN0aW9uLCBtZW51LnN1Yk1lbnVPcGVuRGVsYXksIG1lbnUuc3ViTWVudUNsb3NlRGVsYXksIG1lbnUub25DbGlja11cbiAgKTtcblxuICBjb25zdCBuYXZpZ2F0aW9uQ29udGV4dFZhbHVlID0gdXNlTWVtbzxOZXdEcm9wZG93bk5hdmlnYXRpb25Db250ZXh0VmFsdWU+KFxuICAgICgpID0+ICh7IGFjdGl2ZUluZGV4LCBnZXRJdGVtUHJvcHM6IHN0YWJsZUdldEl0ZW1Qcm9wcyB9KSxcbiAgICBbYWN0aXZlSW5kZXgsIHN0YWJsZUdldEl0ZW1Qcm9wc11cbiAgKTtcblxuICBjb25zdCBwb3B1cENvbnRhaW5lciA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGlmICghZ2V0UG9wdXBDb250YWluZXIgfHwgIXRyaWdnZXJFbCkge1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICB9XG5cbiAgICByZXR1cm4gZ2V0UG9wdXBDb250YWluZXIodHJpZ2dlckVsKTtcbiAgfSwgW2dldFBvcHVwQ29udGFpbmVyLCB0cmlnZ2VyRWxdKTtcblxuICAvLyDQldGB0LvQuCBnZXRQb3B1cENvbnRhaW5lciDQt9Cw0LTQsNC9LCDQttC00ZHQvCDQs9C+0YLQvtCy0L3QvtGB0YLQuCB0cmlnZ2VyRWwsINGH0YLQvtCx0Ysg0L/QvtGA0YLQsNC7XG4gIC8vINC90LUg0LzQvtGA0LPQsNC7IMKrYm9keSDihpIg0L3Rg9C20L3Ri9C5INC60L7QvdGC0LXQudC90LXRgMK7INC/0YDQuCDQv9C10YDQstC40YfQvdC+0LwgcmVuZGVyINGBIGNvbnRyb2xsZWQgb3Blbj10cnVlLlxuICBjb25zdCBjYW5SZW5kZXJQb3B1cCA9IG9wZW4gJiYgKCFnZXRQb3B1cENvbnRhaW5lciB8fCBwb3B1cENvbnRhaW5lcik7XG5cbiAgY29uc3QgcG9wdXBTdHlsZSA9IHVzZU1lbW88Q1NTUHJvcGVydGllcz4oKCkgPT4ge1xuICAgIGNvbnN0IHdpZHRoID0gZHJvcGRvd25XaWR0aCA9PT0gXCJlcXVhbFwiID8gcmVmZXJlbmNlV2lkdGggOiBkcm9wZG93bldpZHRoO1xuXG4gICAgcmV0dXJuIHtcbiAgICAgIC4uLmZsb2F0aW5nU3R5bGVzLFxuICAgICAgLi4uKHdpZHRoICE9PSBudWxsICYmIHsgd2lkdGggfSksXG4gICAgICAuLi4oZHJvcGRvd25NaW5XaWR0aCAhPT0gbnVsbCAmJiB7IG1pbldpZHRoOiBkcm9wZG93bk1pbldpZHRoIH0pLFxuICAgICAgLi4uKGRyb3Bkb3duTWF4SGVpZ2h0ICE9PSBudWxsICYmIHtcbiAgICAgICAgbWF4SGVpZ2h0OiBkcm9wZG93bk1heEhlaWdodCxcbiAgICAgICAgb3ZlcmZsb3dZOiBcImF1dG9cIixcbiAgICAgICAgb3ZlcmZsb3dYOiBcImhpZGRlblwiLFxuICAgICAgfSksXG4gICAgfTtcbiAgfSwgW2Zsb2F0aW5nU3R5bGVzLCBkcm9wZG93bldpZHRoLCBkcm9wZG93bk1pbldpZHRoLCBkcm9wZG93bk1heEhlaWdodCwgcmVmZXJlbmNlV2lkdGhdKTtcblxuICBjb25zdCBtZW51Tm9kZSA9IChcbiAgICA8TmV3RHJvcGRvd25Db250ZXh0LlByb3ZpZGVyIHZhbHVlPXtjb250ZXh0VmFsdWV9PlxuICAgICAgPE5ld0Ryb3Bkb3duTmF2aWdhdGlvbkNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e25hdmlnYXRpb25Db250ZXh0VmFsdWV9PlxuICAgICAgICA8TWVudSBpdGVtcz17bWVudS5pdGVtc30gdGVzdC1pZD17bWVudVtcInRlc3QtaWRcIl19IC8+XG4gICAgICA8L05ld0Ryb3Bkb3duTmF2aWdhdGlvbkNvbnRleHQuUHJvdmlkZXI+XG4gICAgPC9OZXdEcm9wZG93bkNvbnRleHQuUHJvdmlkZXI+XG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge2NoaWxkcmVufVxuICAgICAgPEZsb2F0aW5nTm9kZSBpZD17bm9kZUlkfT5cbiAgICAgICAgPEZsb2F0aW5nTGlzdCBlbGVtZW50c1JlZj17ZWxlbWVudHNSZWZ9PlxuICAgICAgICAgIHtjYW5SZW5kZXJQb3B1cCAmJiAoXG4gICAgICAgICAgICA8RmxvYXRpbmdQb3J0YWwgcm9vdD17cG9wdXBDb250YWluZXJ9PlxuICAgICAgICAgICAgICA8RmxvYXRpbmdGb2N1c01hbmFnZXJcbiAgICAgICAgICAgICAgICBjb250ZXh0PXtjb250ZXh0fVxuICAgICAgICAgICAgICAgIG1vZGFsPXtmYWxzZX1cbiAgICAgICAgICAgICAgICBpbml0aWFsRm9jdXM9e2F1dG9Gb2N1cyA/IDAgOiAtMX1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgIHJlZj17cmVmcy5zZXRGbG9hdGluZ31cbiAgICAgICAgICAgICAgICAgIHN0eWxlPXtwb3B1cFN0eWxlfVxuICAgICAgICAgICAgICAgICAgY3NzPXtbcm9vdFN0eWxlKHRoZW1lKSwgc3R5bGVzPy5yb290Py4odG9rZW5zLCB0aGVtZSldfVxuICAgICAgICAgICAgICAgICAgey4uLmdldEZsb2F0aW5nUHJvcHMoKX1cbiAgICAgICAgICAgICAgICAgIHRlc3QtaWQ9e3Rlc3RJZH1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICB7cG9wdXBSZW5kZXI/LihtZW51Tm9kZSkgPz8gbWVudU5vZGV9XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgIDwvRmxvYXRpbmdGb2N1c01hbmFnZXI+XG4gICAgICAgICAgICA8L0Zsb2F0aW5nUG9ydGFsPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvRmxvYXRpbmdMaXN0PlxuICAgICAgPC9GbG9hdGluZ05vZGU+XG4gICAgPC8+XG4gICk7XG59O1xuXG5jb25zdCBOZXdEcm9wZG93bkNvbXBvbmVudDogRkM8TmV3RHJvcGRvd25Qcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgcGFyZW50SWQgPSB1c2VGbG9hdGluZ1BhcmVudE5vZGVJZCgpO1xuXG4gIGlmIChwYXJlbnRJZCA9PT0gbnVsbCkge1xuICAgIHJldHVybiAoXG4gICAgICA8RmxvYXRpbmdUcmVlPlxuICAgICAgICA8TmV3RHJvcGRvd25Jbm5lciB7Li4ucHJvcHN9IC8+XG4gICAgICA8L0Zsb2F0aW5nVHJlZT5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIDxOZXdEcm9wZG93bklubmVyIHsuLi5wcm9wc30gLz47XG59O1xuXG5leHBvcnQgY29uc3QgTmV3RHJvcGRvd24gPSBtZW1vKE5ld0Ryb3Bkb3duQ29tcG9uZW50KTtcbiJdfQ== */"], ...getFloatingProps(), "test-id": testId, children: (popupRender == null ? void 0 : popupRender(menuNode)) ?? menuNode }) }) }) }) })
+  ] });
+};
+const NewDropdownComponent = (props) => {
+  const parentId = useFloatingParentNodeId();
+  if (parentId === null) {
+    return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(NewDropdownInner, { ...props }) });
+  }
+  return /* @__PURE__ */ jsx(NewDropdownInner, { ...props });
+};
+const NewDropdown = memo(NewDropdownComponent);
+export {
+  NewDropdown
+};

package/dist/components/NewDropdown/NewDropdown.styles.d.ts

@@ -0,0 +1,10 @@
+import { Interpolation } from '@emotion/react';
+import { Theme } from 'themes';
+/**
+ * Стили внешней обёртки popup-контейнера.
+ * Принимает только theme → именование без `get`-префикса.
+ *
+ * Свойства, зависящие от пропсов (`min-width`, `max-height`, `overflow`),
+ * задаются инлайном в `NewDropdown.tsx` — см. `popupStyle`.
+ */
+export declare const rootStyle: (theme: Theme) => Interpolation;

package/dist/components/NewDropdown/NewDropdown.styles.js

@@ -0,0 +1,11 @@
+const rootStyle = (theme) => ({
+  boxSizing: "border-box",
+  background: theme.bgFloat,
+  borderRadius: theme.borderRadiusL,
+  boxShadow: theme.shadow2,
+  paddingBlock: theme.paddingXS,
+  paddingInline: theme.paddingXS
+});
+export {
+  rootStyle
+};

package/dist/components/NewDropdown/NewDropdown.tokens.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from 'themes';
+export declare const getNewDropdownTokens: (theme: Theme) => {
+    readonly dropdownItemText: "#262626";
+    readonly dropdownItemTextSelected: "#0CB3B3";
+    readonly dropdownItemTextDisabled: "#8C8C8C";
+    readonly dropdownItemTextExtra: "#8C8C8C";
+    readonly dropdownItemTextTitle: "#8C8C8C";
+    readonly dropdownItemBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    readonly dropdownItemDivider: "#E5E5E5";
+    readonly dropdownItemPaddingVertical: 4;
+    readonly dropdownItemPaddingHorizontal: 8;
+};
+export type NewDropdownTokens = ReturnType<typeof getNewDropdownTokens>;
+declare module "../ConfigProvider" {
+    interface Tokens {
+        NewDropdown?: Partial<NewDropdownTokens>;
+    }
+}

package/dist/components/NewDropdown/NewDropdown.tokens.js

@@ -0,0 +1,14 @@
+const getNewDropdownTokens = (theme) => ({
+  dropdownItemText: theme.textPrimary,
+  dropdownItemTextSelected: theme.primaryBase,
+  dropdownItemTextDisabled: theme.textDisabled,
+  dropdownItemTextExtra: theme.textSecondary,
+  dropdownItemTextTitle: theme.textSecondary,
+  dropdownItemBgHover: theme.bgContainerHover,
+  dropdownItemDivider: theme.lineDivider,
+  dropdownItemPaddingVertical: theme.x1,
+  dropdownItemPaddingHorizontal: theme.x2
+});
+export {
+  getNewDropdownTokens
+};

package/dist/components/NewDropdown/NewDropdown.types.d.ts

@@ -0,0 +1,132 @@
+import { Interpolation } from '@emotion/react';
+import { CSSProperties, MouseEvent, ReactElement, ReactNode } from 'react';
+import { Theme } from 'themes';
+import { NewDropdownTokens } from './NewDropdown.tokens';
+export type NewDropdownTriggerType = "click" | "hover" | "contextMenu";
+export type NewDropdownPlacementType = "bottomLeft" | "bottom" | "bottomRight" | "topLeft" | "top" | "topRight";
+export type NewDropdownSubMenuTrigger = Extract<NewDropdownTriggerType, "click" | "hover">;
+interface NewDropdownItemBase {
+    key: string;
+    label: ReactNode;
+    type?: never;
+    icon?: ReactNode;
+    /** @default false */
+    disabled?: boolean;
+    "test-id"?: string;
+}
+export interface NewDropdownMenuItem extends NewDropdownItemBase {
+    extra?: ReactNode;
+    onClick?: NewDropdownItemClickHandler;
+}
+export interface NewDropdownSubMenuItem extends NewDropdownItemBase {
+    children: NewDropdownItem[];
+    onClick?: NewDropdownSubMenuClickHandler;
+}
+export interface NewDropdownGroupItem extends Partial<Pick<NewDropdownItemBase, "key" | "label" | "icon">> {
+    type: "group";
+    children: NewDropdownItem[];
+}
+export interface NewDropdownDividerItem extends Partial<Pick<NewDropdownItemBase, "key">> {
+    type: "divider";
+}
+export type NewDropdownItem = NewDropdownMenuItem | NewDropdownSubMenuItem | NewDropdownGroupItem | NewDropdownDividerItem;
+export interface NewDropdownOpenChangeInfo {
+    source: "trigger" | "menu";
+}
+export interface NewDropdownMenuClickInfo {
+    item: NewDropdownItem;
+    key: string;
+    keyPath: string[];
+    domEvent: MouseEvent;
+}
+export type NewDropdownMenuClickHandler = (info: NewDropdownMenuClickInfo) => void;
+export interface NewDropdownItemClickInfo {
+    key: string;
+    keyPath: string[];
+    domEvent: MouseEvent;
+}
+export type NewDropdownItemClickHandler = (info: NewDropdownItemClickInfo) => void;
+export interface NewDropdownSubMenuClickInfo {
+    key: string;
+    domEvent: MouseEvent;
+}
+export type NewDropdownSubMenuClickHandler = (info: NewDropdownSubMenuClickInfo) => void;
+export type GetStyle = (newDropdownTokens: NewDropdownTokens, theme: Theme) => Interpolation;
+export interface NewDropdownStyles {
+    root?: GetStyle;
+    item?: GetStyle;
+    itemTitle?: GetStyle;
+    itemIcon?: GetStyle;
+    itemContent?: GetStyle;
+    itemExtra?: GetStyle;
+    divider?: GetStyle;
+}
+export interface NewDropdownMenuProps {
+    items: NewDropdownItem[];
+    onClick?: NewDropdownMenuClickHandler;
+    /**
+     * Задержка перед открытием подменю по hover, в секундах.
+     * @default 0
+     */
+    subMenuOpenDelay?: number;
+    /**
+     * Задержка перед закрытием подменю по hover, в секундах.
+     * @default 0.1
+     */
+    subMenuCloseDelay?: number;
+    /** @default "click" */
+    triggerSubMenuAction?: NewDropdownSubMenuTrigger;
+    "test-id"?: string;
+}
+export interface NewDropdownProps {
+    /**
+     * Триггер выпадающего меню. Должен быть ОДНИМ React-элементом —
+     * DOM-узлом или компонентом, который пробрасывает ref в DOM и
+     * расплющивает остальные props (...rest) на корневой элемент.
+     * Fragment и массивы не поддерживаются.
+     */
+    children: ReactElement;
+    menu: NewDropdownMenuProps;
+    /** @default ["click"] */
+    trigger?: NewDropdownTriggerType[];
+    popupRender?: (originNode: ReactNode) => ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean, info: NewDropdownOpenChangeInfo) => void;
+    /** @default "bottomLeft" */
+    placement?: NewDropdownPlacementType;
+    /**
+     * Отключает все триггеры взаимодействия (useClick, useHover, useDismiss).
+     * При `disabled={true}` и `open={true}` (controlled) контролируемое состояние
+     * не перезаписывается принудительным закрытием.
+     * @default false
+     */
+    disabled?: boolean;
+    /** @default false */
+    autoFocus?: boolean;
+    /**
+     * Ширина выпадающего списка.
+     * - `"equal"` — равна ширине триггера (как у `<Select>`);
+     * - число — пиксели;
+     * - строка — произвольное CSS-значение (`fit-content`, `100%`, `12rem`, ...);
+     * - `null` — `width` вообще не применяется (popup растёт по контенту).
+     * @default null
+     */
+    dropdownWidth?: number | "equal" | (string & {}) | null;
+    /**
+     * Минимальная ширина выпадающего списка. Число — пиксели, строка — произвольное CSS-значение.
+     * `null` — `min-width` не применяется.
+     * @default 120
+     */
+    dropdownMinWidth?: CSSProperties["minWidth"] | null;
+    /**
+     * Максимальная высота выпадающего списка; при превышении появляется вертикальный скролл.
+     * Число — пиксели, строка — произвольное CSS-значение. `null` — `max-height`/скролл не применяются.
+     * @default 414
+     */
+    dropdownMaxHeight?: CSSProperties["maxHeight"] | null;
+    /** @default () => document.body */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    styles?: NewDropdownStyles;
+    "test-id"?: string;
+}
+export {};

package/dist/components/NewDropdown/NewDropdown.utils.d.ts

@@ -0,0 +1,26 @@
+import { NewDropdownDividerItem, NewDropdownGroupItem, NewDropdownItem, NewDropdownMenuItem, NewDropdownSubMenuItem, NewDropdownTriggerType } from './NewDropdown.types';
+export declare const defaultTrigger: NewDropdownTriggerType[];
+export declare const defaultDropdownMinWidth = 120;
+export declare const defaultDropdownMaxHeight = 414;
+export declare const defaultMenuConfig: {
+    readonly triggerSubMenuAction: "click";
+    readonly subMenuOpenDelay: 0;
+    readonly subMenuCloseDelay: 0.1;
+};
+export declare const placementMap: {
+    bottomLeft: "bottom-start";
+    bottom: "bottom";
+    bottomRight: "bottom-end";
+    topLeft: "top-start";
+    top: "top";
+    topRight: "top-end";
+};
+export declare function isFlatMenuItem(item: NewDropdownItem): item is NewDropdownMenuItem;
+export declare function isDividerItem(item: NewDropdownItem): item is NewDropdownDividerItem;
+export declare function isSubMenuItem(item: NewDropdownItem): item is NewDropdownSubMenuItem;
+export declare function isGroupItem(item: NewDropdownItem): item is NewDropdownGroupItem;
+/**
+ * Возвращает индекс первого не-disabled пункта в порядке FloatingList'а.
+ * Возвращает `null`, если интерактивных пунктов нет или все disabled.
+ */
+export declare function getFirstEnabledIndex(items: NewDropdownItem[]): number | null;

package/dist/components/NewDropdown/NewDropdown.utils.js

@@ -0,0 +1,55 @@
+const defaultTrigger = ["click"];
+const defaultDropdownMinWidth = 120;
+const defaultDropdownMaxHeight = 414;
+const defaultMenuConfig = {
+  triggerSubMenuAction: "click",
+  subMenuOpenDelay: 0,
+  subMenuCloseDelay: 0.1
+};
+const placementMap = {
+  bottomLeft: "bottom-start",
+  bottom: "bottom",
+  bottomRight: "bottom-end",
+  topLeft: "top-start",
+  top: "top",
+  topRight: "top-end"
+};
+function isFlatMenuItem(item) {
+  return item.type === void 0 && !("children" in item);
+}
+function isDividerItem(item) {
+  return item.type === "divider";
+}
+function isSubMenuItem(item) {
+  return "children" in item && item.type !== "group";
+}
+function isGroupItem(item) {
+  return item.type === "group";
+}
+function flattenInteractiveItems(items) {
+  return items.flatMap((item) => {
+    if (isDividerItem(item)) {
+      return [];
+    }
+    if (isGroupItem(item)) {
+      return flattenInteractiveItems(item.children);
+    }
+    return [item];
+  });
+}
+function getFirstEnabledIndex(items) {
+  const index = flattenInteractiveItems(items).findIndex((item) => !item.disabled);
+  return index === -1 ? null : index;
+}
+export {
+  defaultDropdownMaxHeight,
+  defaultDropdownMinWidth,
+  defaultMenuConfig,
+  defaultTrigger,
+  getFirstEnabledIndex,
+  isDividerItem,
+  isFlatMenuItem,
+  isGroupItem,
+  isSubMenuItem,
+  placementMap
+};

package/dist/components/NewDropdown/components/Divider/Divider.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const Divider: FC;

package/dist/components/NewDropdown/components/Divider/Divider.js

@@ -0,0 +1,21 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import { NewDropdownContext } from "../../contexts/NewDropdownContext.js";
+import { getDividerStyle } from "./Divider.styles.js";
+import { useNewDropdownTokens } from "../../hooks/useNewDropdownTokens/useNewDropdownTokens.js";
+const Divider = () => {
+  var _a;
+  const {
+    styles
+  } = useContext(NewDropdownContext);
+  const {
+    theme,
+    tokens
+  } = useNewDropdownTokens();
+  return /* @__PURE__ */ jsx("li", { css: [getDividerStyle({
+    tokens
+  }), (_a = styles == null ? void 0 : styles.divider) == null ? void 0 : _a.call(styles, tokens, theme), process.env.NODE_ENV === "production" ? "" : ";label:Divider;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTmV3RHJvcGRvd24vY29tcG9uZW50cy9EaXZpZGVyL0RpdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNhIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvTmV3RHJvcGRvd24vY29tcG9uZW50cy9EaXZpZGVyL0RpdmlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdXNlQ29udGV4dCwgdHlwZSBGQyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlTmV3RHJvcGRvd25Ub2tlbnMgfSBmcm9tIFwiLi4vLi4vaG9va3MvdXNlTmV3RHJvcGRvd25Ub2tlbnNcIjtcbmltcG9ydCB7IE5ld0Ryb3Bkb3duQ29udGV4dCB9IGZyb20gXCIuLi8uLi9jb250ZXh0cy9OZXdEcm9wZG93bkNvbnRleHRcIjtcbmltcG9ydCB7IGdldERpdmlkZXJTdHlsZSB9IGZyb20gXCIuL0RpdmlkZXIuc3R5bGVzXCI7XG5cbmV4cG9ydCBjb25zdCBEaXZpZGVyOiBGQyA9ICgpID0+IHtcbiAgY29uc3QgeyBzdHlsZXMgfSA9IHVzZUNvbnRleHQoTmV3RHJvcGRvd25Db250ZXh0KTtcbiAgY29uc3QgeyB0aGVtZSwgdG9rZW5zIH0gPSB1c2VOZXdEcm9wZG93blRva2VucygpO1xuXG4gIHJldHVybiA8bGkgY3NzPXtbZ2V0RGl2aWRlclN0eWxlKHsgdG9rZW5zIH0pLCBzdHlsZXM/LmRpdmlkZXI/Lih0b2tlbnMsIHRoZW1lKV19IC8+O1xufTtcbiJdfQ== */"] });
+};
+export {
+  Divider
+};

package/dist/components/NewDropdown/components/Divider/Divider.styles.d.ts

@@ -0,0 +1,10 @@
+import { Interpolation } from '@emotion/react';
+import { NewDropdownTokens } from '../../NewDropdown.tokens';
+/**
+ * Стили строки-разделителя `<li>`.
+ * Горизонтальная линия на всю ширину: цвет `dropdownItemDivider`, вертикальные отступы — `dropdownItemPaddingVertical`.
+ * Не зависит от темы — все значения берутся из component-tokens.
+ */
+export declare const getDividerStyle: ({ tokens }: {
+    tokens: NewDropdownTokens;
+}) => Interpolation;

package/dist/components/NewDropdown/components/Divider/Divider.styles.js

@@ -0,0 +1,12 @@
+const getDividerStyle = ({
+  tokens
+}) => ({
+  height: 1,
+  listStyle: "none",
+  background: tokens.dropdownItemDivider,
+  marginBlock: tokens.dropdownItemPaddingVertical,
+  cursor: "default"
+});
+export {
+  getDividerStyle
+};

package/dist/components/NewDropdown/components/Divider/index.d.ts

@@ -0,0 +1 @@
+export { Divider } from './Divider';

package/dist/components/NewDropdown/components/GroupItem/GroupItem.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { GroupItemProps } from './GroupItem.types';
+export declare const GroupItem: FC<GroupItemProps>;

package/dist/components/NewDropdown/components/GroupItem/GroupItem.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { itemIconStyle } from "../MenuItem/MenuItem.styles.js";
+import { Menu } from "../Menu/Menu.js";
+import { groupItemStyle, getGroupHeaderStyle, groupHeaderLabelStyle } from "./GroupItem.styles.js";
+import { useNewDropdownTokens } from "../../hooks/useNewDropdownTokens/useNewDropdownTokens.js";
+const GroupItem = (props) => {
+  const {
+    item,
+    parentKeyPath
+  } = props;
+  const {
+    key,
+    label,
+    icon,
+    children
+  } = item;
+  const {
+    theme,
+    tokens
+  } = useNewDropdownTokens();
+  const hasHeader = Boolean(label || icon);
+  const childKeyPath = key ? parentKeyPath ? `${parentKeyPath}.${key}` : key : parentKeyPath;
+  return /* @__PURE__ */ jsxs("li", { role: "presentation", css: groupItemStyle(theme), children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { css: getGroupHeaderStyle(tokens)(theme), children: [
+      icon && /* @__PURE__ */ jsx("span", { css: itemIconStyle(theme), children: icon }),
+      label && /* @__PURE__ */ jsx("span", { css: groupHeaderLabelStyle(theme), children: label })
+    ] }),
+    /* @__PURE__ */ jsx(Menu, { items: children, parentKeyPath: childKeyPath })
+  ] });
+};
+export {
+  GroupItem
+};

package/dist/components/NewDropdown/components/GroupItem/GroupItem.styles.d.ts

@@ -0,0 +1,29 @@
+import { Interpolation } from '@emotion/react';
+import { Theme } from 'themes';
+import { NewDropdownTokens } from '../../NewDropdown.tokens';
+/**
+ * Стили корневого `<li role="presentation">` для группы.
+ * Сбрасывает маркер списка — остальное наследуется из родительского `<ul>`.
+ *
+ * `& > ul` — дочерний `<ul>`, рендерится через `<Menu items={children}>`.
+ * Специфичность `[0,1,1]` (class + element) > menuListStyle `[0,1,0]` (class),
+ * поэтому longhand `paddingInlineStart: theme.x5` (20 px) перебивает shorthand `padding: 0`.
+ *
+ * inlineIndent = 20 означает, что children должны быть на 20 px ПРАВЕЕ заголовка группы.
+ * Заголовок группы имеет `paddingInline: 8 px` (dropdownItemPaddingHorizontal).
+ * Children `<li>` тоже имеет `paddingInline: 8 px` от MenuItem.
+ * Для дельты 20 px: ul.paddingInlineStart + li.paddingInline = header.paddingInline + 20
+ *                   ul.paddingInlineStart = 8 + 20 - 8 = 20 px = theme.x5.
+ */
+export declare const groupItemStyle: (theme: Theme) => Interpolation;
+/**
+ * Стили заголовка группы (не интерактивный блок с label + icon).
+ * Цвет `dropdownItemTextTitle` (= `textSecondary`) применяется к тексту и иконке через наследование.
+ * Hover-состояние отсутствует (матрица Overview: group → hover: `—`).
+ */
+export declare const getGroupHeaderStyle: (tokens: NewDropdownTokens) => (theme: Theme) => Interpolation;
+/**
+ * Стили текстового узла label в заголовке группы.
+ * Цвет наследуется из `getGroupHeaderStyle` (= `dropdownItemTextTitle`).
+ */
+export declare const groupHeaderLabelStyle: (theme: Theme) => Interpolation;

package/dist/components/NewDropdown/components/GroupItem/GroupItem.styles.js

@@ -0,0 +1,31 @@
+const groupItemStyle = (theme) => ({
+  listStyle: "none",
+  // inlineIndent = 20: children располагаются на 20 px правее заголовка группы (API Menu.inlineIndent = 20).
+  // ul.paddingInlineStart = 20 px = theme.x5.
+  "& > ul": {
+    paddingInlineStart: theme.x5
+  }
+});
+const getGroupHeaderStyle = (tokens) => (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  paddingBlock: tokens.dropdownItemPaddingVertical,
+  paddingInline: tokens.dropdownItemPaddingHorizontal,
+  gap: theme.marginXS,
+  color: tokens.dropdownItemTextTitle,
+  cursor: "default",
+  userSelect: "none"
+});
+const groupHeaderLabelStyle = (theme) => ({
+  ...theme.typography.body2,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  // flex-reset: позволяет дочернему flex-элементу сжиматься ниже content-size при overflow: hidden
+  minWidth: 0
+});
+export {
+  getGroupHeaderStyle,
+  groupHeaderLabelStyle,
+  groupItemStyle
+};

package/dist/components/NewDropdown/components/GroupItem/GroupItem.types.d.ts

@@ -0,0 +1,5 @@
+import { NewDropdownGroupItem } from '../../NewDropdown.types';
+export interface GroupItemProps {
+    item: NewDropdownGroupItem;
+    parentKeyPath: string;
+}

package/dist/components/NewDropdown/components/GroupItem/index.d.ts

@@ -0,0 +1 @@
+export { GroupItem } from './GroupItem';

package/dist/components/NewDropdown/components/Menu/Menu.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MenuProps } from './Menu.types';
+export declare const Menu: FC<MenuProps>;