@infomaximum/ui-kit 0.10.2 → 0.11.1

package/dist/components/Tabs/hooks/useMoreTabsController.js

@@ -0,0 +1,68 @@
+import { useState, useRef, useCallback, useMemo } from "react";
+import { isMenuItem } from "../../Dropdown/Dropdown.types.js";
+const useMoreTabsController = (items, currentActiveKey, currentTabElement, onTabClick, onChange, changeActiveKey) => {
+  const [hiddenTabs, setHiddenTabs] = useState([]);
+  const tabsRef = useRef(null);
+  const addHiddenTab = useCallback((itemKey) => {
+    setHiddenTabs((prev) => [...prev, itemKey]);
+  }, []);
+  const deleteHiddenTab = useCallback((itemKey) => {
+    setHiddenTabs((prev) => prev.filter((item) => item !== itemKey));
+  }, []);
+  const dropdownItems = useMemo(() => {
+    return items.reduce((acc, item) => {
+      if (!hiddenTabs.includes(item.key)) {
+        return acc;
+      }
+      const dropdownItem = {
+        key: item.key,
+        icon: item.icon,
+        label: item.label,
+        disabled: item.disabled
+      };
+      return [...acc, dropdownItem];
+    }, []);
+  }, [hiddenTabs, items]);
+  const scrollToTab = useCallback((element) => {
+    if (tabsRef.current && element) {
+      const leftPos = element.offsetLeft + element.offsetWidth < tabsRef.current.offsetWidth ? element.offsetLeft : element.offsetLeft - tabsRef.current.offsetWidth + element.offsetWidth;
+      tabsRef.current.scrollTo({
+        left: leftPos
+      });
+    }
+  }, []);
+  const handleDropdownItemClick = useCallback((props) => {
+    const {
+      item,
+      key,
+      e
+    } = props;
+    const selected = key === currentActiveKey;
+    onTabClick == null ? void 0 : onTabClick(key, e);
+    if (isMenuItem(item) && (item == null ? void 0 : item.disabled)) {
+      return;
+    }
+    if (selected) {
+      scrollToTab(currentTabElement);
+      return;
+    }
+    onChange == null ? void 0 : onChange(key);
+    changeActiveKey(key);
+  }, [changeActiveKey, currentActiveKey, currentTabElement, onChange, onTabClick, scrollToTab]);
+  const dropdownMenu = useMemo(() => {
+    return {
+      items: dropdownItems,
+      onClick: handleDropdownItemClick
+    };
+  }, [dropdownItems, handleDropdownItemClick]);
+  return {
+    tabsRef,
+    dropdownMenu,
+    addHiddenTab,
+    deleteHiddenTab,
+    scrollToTab
+  };
+};
+export {
+  useMoreTabsController
+};

package/dist/components/Tabs/hooks/useTabsDndController.d.ts

@@ -0,0 +1,10 @@
+import { TabItem } from '../components/TabItem/TabItem.types';
+import { DragEndEvent } from '@dnd-kit/core';
+export declare const useTabsDndController: (items: TabItem[]) => {
+    tabsOrder: string[];
+    isDragging: boolean;
+    dndEvents: {
+        onDragStart: () => void;
+        onDragEnd: (e: DragEndEvent) => void;
+    };
+};

package/dist/components/Tabs/hooks/useTabsDndController.js

@@ -0,0 +1,36 @@
+import { useState, useCallback } from "react";
+import { arrayMove } from "@dnd-kit/sortable";
+const useTabsDndController = (items) => {
+  const [tabsOrder, setTabsOrder] = useState(items.map((item) => item.key));
+  const [isDragging, setIsDragging] = useState(false);
+  const handleDragStart = useCallback(() => {
+    setIsDragging(true);
+  }, []);
+  const handleDragEnd = useCallback((e) => {
+    const {
+      active,
+      over
+    } = e;
+    setIsDragging(false);
+    if (active.id === (over == null ? void 0 : over.id)) {
+      return;
+    }
+    setTabsOrder((prev) => {
+      const activeIndex = prev.findIndex((key) => key === active.id);
+      const overIndex = prev.findIndex((key) => key === (over == null ? void 0 : over.id));
+      return arrayMove(prev, activeIndex, overIndex);
+    });
+  }, []);
+  const dndEvents = {
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  };
+  return {
+    tabsOrder,
+    isDragging,
+    dndEvents
+  };
+};
+export {
+  useTabsDndController
+};

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

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps } from './Tabs.types';

package/dist/index.d.ts

@@ -32,8 +32,10 @@ export { type UploadProps, Upload } from './components/Upload';
 export { Dropdown } from './components/Dropdown';
 export type { DropdownProps, DropdownMenu } from './components/Dropdown';
 export { type ProgressProps, Progress } from './components/Progress';
-export { Avatar } from './components/Avatar';
-export type { AvatarProps } from './components/Avatar';
+export { Avatar, avatarColors } from './components/Avatar';
+export type { AvatarProps, AvatarColorType } from './components/Avatar';
+export { Tabs } from './components/Tabs';
+export type { TabsProps } from './components/Tabs';
 export { Tag } from './components/Tag';
 export type { TagProps, CheckableProps } from './components/Tag';
 export { ConfigProvider, useConfig, type Locale } from './components/ConfigProvider';

package/dist/index.js

@@ -21,6 +21,8 @@ import { Upload } from "./components/Upload/Upload.js";
 import { Dropdown } from "./components/Dropdown/Dropdown.js";
 import { Progress } from "./components/Progress/Progress.js";
 import { Avatar } from "./components/Avatar/Avatar.js";
+import { avatarColors } from "./components/Avatar/Avatar.utils.js";
+import { Tabs } from "./components/Tabs/Tabs.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { ConfigProvider } from "./components/ConfigProvider/ConfigProvider.js";
 import { useConfig } from "./components/ConfigProvider/hooks/useConfig/useConfig.js";
@@ -44,11 +46,13 @@ export {
   Radio,
   Select,
   Switch,
+  Tabs,
   Tag,
   ThemeProvider,
   TimePicker,
   Tooltip,
   Upload,
+  avatarColors,
   message,
   messagesHolder,
   themeMap,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.10.2",
+  "version": "0.11.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,6 +34,9 @@
     "update-icons": "node scripts/updateIcons/updateIcons.js"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.0.0",
     "@floating-ui/react": "^0.27.6",
     "@infomaximum/icons": "^1.3.2",
@@ -42,13 +45,17 @@
     "rc-picker": "^4.11.3",
     "rc-util": "^5.44.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.16.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",
     "dayjs": "^1.0.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "@dnd-kit/core": "^6",
+    "@dnd-kit/sortable": "^10",
+    "@dnd-kit/utilities": "^3"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.13.5",

package/dist/docComponents/Demonstration/Demonstration.d.ts

@@ -1,4 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { DemonstrationVerticalInnerProps } from './Demonstration.types';
-export declare const Demonstration: FC<PropsWithChildren>;
-export declare const DemonstrationVerticalInner: FC<DemonstrationVerticalInnerProps>;

package/dist/docComponents/Demonstration/Demonstration.styles.d.ts

@@ -1,9 +0,0 @@
-export declare const demonstrationStyle: {
-    padding: string;
-};
-export declare const demonstrationVerticalInnerStyle: {
-    readonly display: "inline-flex";
-    readonly flexDirection: "column";
-    readonly rowGap: 16;
-    readonly alignItems: "start";
-};

package/dist/docComponents/Demonstration/Demonstration.types.d.ts

@@ -1,5 +0,0 @@
-import { Interpolation } from '@emotion/react';
-import { HTMLAttributes, PropsWithChildren } from 'react';
-export type DemonstrationVerticalInnerProps = PropsWithChildren & {
-    css?: Interpolation;
-} & Pick<HTMLAttributes<HTMLElement>, "className">;

package/dist/docComponents/Description/Description.d.ts

@@ -1,5 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-export declare const DescriptionComponent: FC<PropsWithChildren>;
-export declare const Description: FC<{
-    children?: import('react').ReactNode | undefined;
-}>;

package/dist/docComponents/Description/Description.style.d.ts

@@ -1,26 +0,0 @@
-import { Theme } from 'themes';
-export declare const descriptionStyle: (theme: Theme) => {
-    readonly padding: "24px 48px";
-    readonly background: "#FAFAFA";
-    readonly display: "flex";
-    readonly flexDirection: "column";
-    readonly gap: "24px";
-    readonly ".docblock-source.sb-unstyled": {
-        readonly margin: 0;
-    };
-    readonly "p, span": {
-        readonly color: "inherit";
-        readonly fontWeight: 400;
-        readonly margin: 0;
-        readonly fontFamily: "Roboto";
-        readonly fontSize: 14;
-        readonly lineHeight: "20px";
-    };
-    readonly h4: {
-        readonly color: "#262626";
-        readonly fontWeight: 500;
-        readonly fontFamily: "Roboto";
-        readonly fontSize: 16;
-        readonly lineHeight: "24px";
-    };
-};

package/dist/docComponents/Doc/Doc.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-export declare const Doc: FC<{
-    children?: import('react').ReactNode | undefined;
-}>;

package/dist/docComponents/Doc/Doc.style.d.ts

@@ -1,13 +0,0 @@
-import { Theme } from 'themes';
-export declare const docStyle: (theme: Theme) => {
-    readonly ".blue": {
-        readonly color: "#1677FF";
-    };
-    readonly fontFamily: "Roboto";
-    readonly fontSize: 14;
-    readonly lineHeight: "20px";
-    readonly display: "flex";
-    readonly flexDirection: "column";
-    readonly gap: 48;
-    readonly color: "#595959";
-};

package/dist/docComponents/Example/Example.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-export declare const Example: FC<{
-    children?: import('react').ReactNode | undefined;
-}>;

package/dist/docComponents/Example/Example.styles.d.ts

@@ -1,9 +0,0 @@
-import { Theme } from 'themes';
-export declare const exampleStyle: (theme: Theme) => {
-    readonly display: "flex";
-    readonly flexDirection: "column";
-    readonly borderRadius: 12;
-    readonly border: "1px solid #D9D9D9";
-    readonly background: "#FFFFFF";
-    readonly overflow: "hidden";
-};