@infomaximum/ui-kit 0.9.1

package/dist/components/Dropdown/components/Menu/Menu.styles.js

@@ -0,0 +1,69 @@
+import { getDropdownTokens } from "../../Dropdown.tokens.js";
+const getMenuDefaultStyle = (maxHeight, minWidth) => ({
+  wrapper: (theme) => ({
+    display: "flex",
+    flexDirection: "column",
+    maxHeight,
+    minWidth,
+    padding: theme.paddingXS,
+    borderRadius: theme.borderRadiusL,
+    background: theme.bgFloat,
+    boxShadow: theme.shadow2,
+    boxSizing: "border-box",
+    listStyleType: "none",
+    margin: 0
+  }),
+  titleBlock: (theme) => {
+    const dropdownTokens = getDropdownTokens(theme);
+    return {
+      display: "flex",
+      alignItems: "center",
+      gap: theme.marginXS,
+      height: 28,
+      boxSizing: "border-box",
+      padding: `${dropdownTokens.dropdownItemPaddingVertical}px ${dropdownTokens.dropdownItemPaddingHorizontal}px`,
+      cursor: "pointer",
+      ":hover": {
+        background: dropdownTokens.dropdownItemBgHover
+      }
+    };
+  },
+  backIcon: (theme) => {
+    const dropdownTokens = getDropdownTokens(theme);
+    return {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: theme.iconM,
+      color: dropdownTokens.dropdownItemTextTitle
+    };
+  },
+  titleText: (theme) => {
+    const dropdownTokens = getDropdownTokens(theme);
+    return {
+      ...theme.typography.body2,
+      color: dropdownTokens.dropdownItemTextTitle
+    };
+  },
+  searchBlock: (theme) => {
+    const dropdownTokens = getDropdownTokens(theme);
+    return {
+      display: "flex",
+      height: 36,
+      boxSizing: "border-box",
+      padding: `${dropdownTokens.dropdownItemPaddingVertical}px ${dropdownTokens.dropdownItemPaddingHorizontal}px`,
+      maxWidth: "100%"
+    };
+  },
+  emptyContentStyle: (theme) => {
+    const dropdownTokens = getDropdownTokens(theme);
+    return {
+      ...theme.typography.body3,
+      color: theme.textSecondary,
+      padding: `${dropdownTokens.dropdownItemPaddingVertical}px ${dropdownTokens.dropdownItemPaddingHorizontal}px`
+    };
+  }
+});
+export {
+  getMenuDefaultStyle
+};

package/dist/components/Dropdown/components/Menu/Menu.types.d.ts

@@ -0,0 +1,7 @@
+import { DropdownMenu } from 'components/Dropdown/Dropdown.types';
+import { ReactNode } from 'react';
+export interface MenuProps extends DropdownMenu {
+    subMenuOpen?: "overflow" | "step";
+    title?: ReactNode;
+    withSearch?: boolean;
+}

package/dist/components/Dropdown/components/SubMenu/SubMenu.d.ts

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

package/dist/components/Dropdown/components/SubMenu/SubMenu.js

@@ -0,0 +1,131 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { memo, useRef, useContext, useEffect, useMemo, useCallback } from "react";
+import { dropdownContext } from "../../contexts/dropdownContext.js";
+import { Menu } from "../Menu/Menu.js";
+import { offset, flip, useFloating, autoUpdate, useHover, useInteractions } from "@floating-ui/react";
+import { convertSecondsToMilliseconds } from "../../../../utils/converters.js";
+import { Item } from "../Item/Item.js";
+import { isSelected } from "./SubMenu.utils.js";
+const floatingMiddleware = [offset(0)];
+const SubMenu = memo(({
+  children,
+  label,
+  disabled,
+  icon,
+  itemKey,
+  clearSearchValue
+}) => {
+  const timerId = useRef(null);
+  const context = useContext(dropdownContext);
+  const isStepMode = context.subMenuOpen === "step";
+  const triggerSubMenuAction = context.triggerSubMenuAction ?? "click";
+  const isOpen = context.openedSubMenuKeys.includes(itemKey);
+  useEffect(() => {
+    if (context.autoAdjustOverflow) {
+      floatingMiddleware.push(flip());
+    }
+  }, [context.autoAdjustOverflow]);
+  const {
+    refs,
+    floatingStyles,
+    context: floatingContext
+  } = useFloating({
+    whileElementsMounted: autoUpdate,
+    placement: "right-start",
+    middleware: floatingMiddleware
+  });
+  const hover = useHover(floatingContext);
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([hover]);
+  const selected = useMemo(() => {
+    return isSelected(children, context.selectedKeys);
+  }, [children, context.selectedKeys]);
+  const showSubMenu = useCallback(() => {
+    context.openSubMenu(itemKey);
+  }, [context, itemKey]);
+  const closeSubMenu = useCallback(() => {
+    context.closeSubMenu(itemKey);
+  }, [context, itemKey]);
+  const handlePointerOver = useMemo(() => {
+    if (triggerSubMenuAction !== "hover") {
+      return;
+    }
+    return (e) => {
+      e.stopPropagation();
+      if (disabled) {
+        return;
+      }
+      if (timerId.current) {
+        clearTimeout(timerId.current);
+      }
+      timerId.current = setTimeout(showSubMenu, convertSecondsToMilliseconds(context.subMenuOpenDelay ?? 0));
+    };
+  }, [context.subMenuOpenDelay, disabled, showSubMenu, triggerSubMenuAction]);
+  const handlePointerOut = useMemo(() => {
+    if (triggerSubMenuAction !== "hover") {
+      return;
+    }
+    return (e) => {
+      e.stopPropagation();
+      if (disabled) {
+        return;
+      }
+      if (timerId.current) {
+        clearTimeout(timerId.current);
+      }
+      timerId.current = setTimeout(closeSubMenu, convertSecondsToMilliseconds(context.subMenuCloseDelay ?? 0));
+    };
+  }, [closeSubMenu, context.subMenuCloseDelay, disabled, triggerSubMenuAction]);
+  const handleClick = useMemo(() => {
+    if (triggerSubMenuAction !== "click") {
+      return;
+    }
+    return (e) => {
+      var _a;
+      e.stopPropagation();
+      if (disabled) {
+        return;
+      }
+      if (isStepMode) {
+        context.changeStep({
+          children,
+          label,
+          disabled,
+          icon,
+          key: itemKey
+        });
+        clearSearchValue();
+      } else {
+        context.switchSubMenu(itemKey);
+      }
+      (_a = context.onOpenChange) == null ? void 0 : _a.call(context, context.openedSubMenuKeys);
+    };
+  }, [children, clearSearchValue, context, disabled, icon, isStepMode, itemKey, label, triggerSubMenuAction]);
+  const handleMouseUp = useCallback((e) => {
+    var _a;
+    e.stopPropagation();
+    if (!e.target) {
+      return;
+    }
+    if (!isOpen || ((_a = refs.floating.current) == null ? void 0 : _a.contains(e.target))) {
+      return;
+    }
+    closeSubMenu();
+  }, [closeSubMenu, isOpen, refs.floating]);
+  useEffect(() => {
+    document.body.addEventListener("mouseup", handleMouseUp);
+    return () => document.body.removeEventListener("mouseup", handleMouseUp);
+  }, [handleMouseUp]);
+  return /* @__PURE__ */ jsxs("div", { ref: refs.setReference, ...getReferenceProps, onPointerOver: handlePointerOver, onPointerOut: handlePointerOut, onClick: handleClick, children: [
+    /* @__PURE__ */ jsx(Item, { label, icon, selected, isSubMenuItem: true, disabled }, itemKey),
+    !isStepMode && (isOpen || !!context.forceSubMenuRender) && /* @__PURE__ */ jsx("div", { ref: refs.setFloating, style: {
+      ...floatingStyles,
+      visibility: isOpen ? "visible" : "hidden"
+    }, ...getFloatingProps, children: /* @__PURE__ */ jsx(Menu, { ...context, items: children, title: label, subMenuOpen: context.subMenuOpen }) })
+  ] });
+});
+export {
+  SubMenu
+};

package/dist/components/Dropdown/components/SubMenu/SubMenu.types.d.ts

@@ -0,0 +1,6 @@
+import { SubMenuType } from '../../Dropdown.types';
+export type DropdownSubMenuTrigger = "hover" | "click";
+export interface SubMenuProps extends Omit<SubMenuType, "key"> {
+    itemKey: string;
+    clearSearchValue: () => void;
+}

package/dist/components/Dropdown/components/SubMenu/SubMenu.utils.d.ts

@@ -0,0 +1,2 @@
+import { ItemType } from 'components/Dropdown/Dropdown.types';
+export declare const isSelected: (items: ItemType[], selectedKeys: string[]) => boolean;

package/dist/components/Dropdown/components/SubMenu/SubMenu.utils.js

@@ -0,0 +1,15 @@
+import { isSubMenu, isGroupType, isMenuItem } from "../../Dropdown.types.js";
+const isSelected = (items, selectedKeys) => {
+  return items.some((item) => {
+    if (isSubMenu(item) || isGroupType(item)) {
+      return isSelected(item.children, selectedKeys);
+    }
+    if (isMenuItem(item)) {
+      return selectedKeys.includes(item.key);
+    }
+    return false;
+  });
+};
+export {
+  isSelected
+};

package/dist/components/Dropdown/contexts/dropdownContext.d.ts

@@ -0,0 +1,22 @@
+import { MouseEvent } from 'react';
+import { DropdownMenu, ItemType, SubMenuType } from '../Dropdown.types';
+export interface DropdownContextShape extends Omit<DropdownMenu, "items"> {
+    selectedKeys: string[];
+    openedSubMenuKeys: string[];
+    maxHeight: number;
+    minWidth: number;
+    autoAdjustOverflow: boolean;
+    currentStep: SubMenuType | null;
+    loading: boolean;
+    returnToPrevStep: () => void;
+    changeStep: (items: SubMenuType) => void;
+    openSubMenu: (subMenuKey: string) => void;
+    closeSubMenu: (subMenuKey: string) => void;
+    switchSubMenu: (subMenuKey: string) => void;
+    onMenuItemClick: (itemKey: string, item: ItemType, e: MouseEvent) => void;
+    onMouseUp: (e: MouseEvent) => void;
+    select: (itemKey: string) => void;
+    deselect: (itemKey: string) => void;
+    closeDropdown: () => void;
+}
+export declare const dropdownContext: import('react').Context<DropdownContextShape>;

package/dist/components/Dropdown/contexts/dropdownContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const dropdownContext = createContext({});
+export {
+  dropdownContext
+};

package/dist/components/Dropdown/forStories/menusData.d.ts

@@ -0,0 +1,9 @@
+import { ItemType } from '../Dropdown.types';
+export declare const firstExampleItems: ItemType[];
+export declare const secondExampleItems: ItemType[];
+export declare const thirdExampleItems: ItemType[];
+export declare const fourthExampleItems: ItemType[];
+export declare const fifthExampleItems: ItemType[];
+export declare const sixthExampleItems: ItemType[];
+export declare const seventhExampleItems: ItemType[];
+export declare const eighthExampleItems: ItemType[];

package/dist/components/Dropdown/hooks/useFilter.d.ts

@@ -0,0 +1,8 @@
+import { ItemType } from '../Dropdown.types';
+import { ChangeEvent } from 'react';
+export declare const useFilter: (items: ItemType[]) => {
+    filteredItems: ItemType[];
+    searchValue: string;
+    handleSearch: (e: ChangeEvent<HTMLInputElement>) => void;
+    clearSearchValue: () => void;
+};

package/dist/components/Dropdown/hooks/useFilter.js

@@ -0,0 +1,45 @@
+import { useDebounce } from "../../../hooks/useDebounce.js";
+import { isDivider, isMenuItem, isSubMenu } from "../Dropdown.types.js";
+import { useMemo, useCallback } from "react";
+import { isNull } from "lodash-es";
+const checkItem = (item, searchValue) => {
+  var _a;
+  if (isDivider(item)) {
+    return item;
+  }
+  if (isMenuItem(item) || isSubMenu(item)) {
+    const isIncluded = (_a = item.label) == null ? void 0 : _a.toString().toLowerCase().includes(searchValue.toLowerCase());
+    return isIncluded ? item : null;
+  }
+  const filteredChildren = filterItems(item.children, searchValue);
+  const isEmptyChildren = filteredChildren.length === 0;
+  return !isEmptyChildren ? {
+    ...item,
+    children: filteredChildren
+  } : null;
+};
+const filterItems = (items, searchValue) => {
+  const filteredItems = items.map((item) => checkItem(item, searchValue));
+  return filteredItems.filter((item) => !isNull(item));
+};
+const useFilter = (items) => {
+  const [debouncedSearchValue, searchValue, setSearchValue] = useDebounce("", 300);
+  const filteredItems = useMemo(() => {
+    return filterItems(items, debouncedSearchValue);
+  }, [debouncedSearchValue, items]);
+  const handleSearch = useCallback((e) => {
+    setSearchValue(e.target.value);
+  }, [setSearchValue]);
+  const clearSearchValue = useCallback(() => {
+    setSearchValue("");
+  }, [setSearchValue]);
+  return {
+    filteredItems,
+    searchValue,
+    handleSearch,
+    clearSearchValue
+  };
+};
+export {
+  useFilter
+};

package/dist/components/Dropdown/hooks/useSelectedKeysController.d.ts

@@ -0,0 +1,30 @@
+import { MouseEvent } from 'react';
+import { ItemType } from '../Dropdown.types';
+interface UseSelectedKeysControllerProps {
+    defaultSelectedKeys: string[] | undefined;
+    selectedKeys: string[] | undefined;
+    multiple: boolean;
+    onClick: ((props: {
+        item: ItemType;
+        key: string;
+        e: MouseEvent;
+    }) => void) | undefined;
+    onSelect: ((props: {
+        item: ItemType;
+        key: string;
+        e: MouseEvent;
+    }) => void) | undefined;
+    onDeselect: ((props: {
+        item: ItemType;
+        key: string;
+        e: MouseEvent;
+    }) => void) | undefined;
+}
+export declare const useSelectedKeysController: ({ defaultSelectedKeys, selectedKeys, multiple, onClick, onSelect, onDeselect, }: UseSelectedKeysControllerProps) => {
+    currentSelectedKey: string[];
+    onMenuItemClick: (itemKey: string, item: ItemType, e: MouseEvent) => void;
+    onMouseUp: (e: MouseEvent) => void;
+    select: (itemKey: string) => void;
+    deselect: (itemKey: string) => void;
+};
+export {};

package/dist/components/Dropdown/hooks/useSelectedKeysController.js

@@ -0,0 +1,58 @@
+import { useState, useCallback } from "react";
+import { isUndefined } from "lodash-es";
+const useSelectedKeysController = ({
+  defaultSelectedKeys = [],
+  selectedKeys,
+  multiple,
+  onClick,
+  onSelect,
+  onDeselect
+}) => {
+  const [localSelectedKeys, setLocalSelectedKeys] = useState(defaultSelectedKeys);
+  const currentSelectedKey = selectedKeys ?? localSelectedKeys;
+  const select = useCallback((itemKey) => {
+    setLocalSelectedKeys((prev) => multiple ? [...prev, itemKey] : [itemKey]);
+  }, [multiple]);
+  const deselect = useCallback((itemKey) => {
+    setLocalSelectedKeys((prev) => prev.filter((key) => key !== itemKey));
+  }, []);
+  const handleMenuItemClick = useCallback((itemKey, item, e) => {
+    e.stopPropagation();
+    onClick == null ? void 0 : onClick({
+      item,
+      key: itemKey,
+      e
+    });
+    if (!isUndefined(selectedKeys)) {
+      return;
+    }
+    if (localSelectedKeys.includes(itemKey) && multiple) {
+      deselect(itemKey);
+      onDeselect == null ? void 0 : onDeselect({
+        item,
+        key: itemKey,
+        e
+      });
+      return;
+    }
+    select(itemKey);
+    onSelect == null ? void 0 : onSelect({
+      item,
+      key: itemKey,
+      e
+    });
+  }, [deselect, localSelectedKeys, multiple, onClick, onDeselect, onSelect, select, selectedKeys]);
+  const handleMouseUp = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  return {
+    currentSelectedKey,
+    onMenuItemClick: handleMenuItemClick,
+    onMouseUp: handleMouseUp,
+    select,
+    deselect
+  };
+};
+export {
+  useSelectedKeysController
+};

package/dist/components/Dropdown/hooks/useStepSubMenus.d.ts

@@ -0,0 +1,7 @@
+import { SubMenuType } from '../Dropdown.types';
+export declare const useStepSubMenus: () => {
+    currentStep: SubMenuType | null;
+    returnToPrevStep: () => void;
+    changeStep: (items: SubMenuType) => void;
+    resetSteps: () => void;
+};

package/dist/components/Dropdown/hooks/useStepSubMenus.js

@@ -0,0 +1,34 @@
+import { useState, useRef, useCallback } from "react";
+import { isNull, isUndefined } from "lodash-es";
+const useStepSubMenus = () => {
+  const [currentStep, setCurrentStep] = useState(null);
+  const parentSteps = useRef(/* @__PURE__ */ new Map());
+  const returnToPrevStep = useCallback(() => {
+    if (isNull(currentStep)) {
+      return;
+    }
+    const newCurrentStep = parentSteps.current.get(currentStep);
+    if (isUndefined(newCurrentStep)) {
+      return;
+    }
+    parentSteps.current.delete(currentStep);
+    setCurrentStep(newCurrentStep);
+  }, [currentStep]);
+  const changeStep = useCallback((items) => {
+    parentSteps.current.set(items, currentStep);
+    setCurrentStep(items);
+  }, [currentStep]);
+  const resetSteps = useCallback(() => {
+    setCurrentStep(null);
+    parentSteps.current = /* @__PURE__ */ new Map();
+  }, []);
+  return {
+    currentStep,
+    returnToPrevStep,
+    changeStep,
+    resetSteps
+  };
+};
+export {
+  useStepSubMenus
+};

package/dist/components/Dropdown/hooks/useSubMenusController.d.ts

@@ -0,0 +1,7 @@
+export declare const useSubMenusController: () => {
+    openedSubMenuKeys: string[];
+    openSubMenu: (subMenuKey: string) => void;
+    closeSubMenu: (subMenuKey: string) => void;
+    switchSubMenu: (subMenuKey: string) => void;
+    closeAllSubMenus: () => void;
+};

package/dist/components/Dropdown/hooks/useSubMenusController.js

@@ -0,0 +1,30 @@
+import { useState, useCallback } from "react";
+const useSubMenusController = () => {
+  const [openedSubMenuKeys, setOpenedSubMenuKeys] = useState([]);
+  const openSubMenu = useCallback((subMenuKey) => {
+    setOpenedSubMenuKeys((prev) => [...prev, subMenuKey]);
+  }, []);
+  const closeSubMenu = useCallback((subMenuKey) => {
+    setOpenedSubMenuKeys((prev) => prev.filter((key) => key !== subMenuKey));
+  }, []);
+  const closeAllSubMenus = useCallback(() => {
+    setOpenedSubMenuKeys([]);
+  }, []);
+  const switchSubMenu = useCallback((subMenuKey) => {
+    if (openedSubMenuKeys.includes(subMenuKey)) {
+      closeSubMenu(subMenuKey);
+      return;
+    }
+    openSubMenu(subMenuKey);
+  }, [closeSubMenu, openSubMenu, openedSubMenuKeys]);
+  return {
+    openedSubMenuKeys,
+    openSubMenu,
+    closeSubMenu,
+    switchSubMenu,
+    closeAllSubMenus
+  };
+};
+export {
+  useSubMenusController
+};

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownMenu } from './Dropdown.types';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,3 @@
+import { MemoExoticComponent, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { InputProps, WithPassword, WithTextArea } from './Input.types';
+export declare const Input: MemoExoticComponent<ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>> & WithPassword & WithTextArea;