@chayns-components/navigation 5.0.65 → 5.1.0

package/lib/cjs/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.context.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSidebarGroupReorderContext = exports.SidebarGroupReorderProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SidebarGroupReorderContext = /*#__PURE__*/(0, _react.createContext)(null);
+const SidebarGroupReorderProvider = ({
+  children,
+  value
+}) => /*#__PURE__*/_react.default.createElement(SidebarGroupReorderContext.Provider, {
+  value: value
+}, children);
+exports.SidebarGroupReorderProvider = SidebarGroupReorderProvider;
+SidebarGroupReorderProvider.displayName = 'SidebarGroupReorderProvider';
+const useSidebarGroupReorderContext = () => {
+  const context = (0, _react.useContext)(SidebarGroupReorderContext);
+  if (!context) {
+    throw new Error('useSidebarGroupReorderContext must be used within SidebarGroupReorderProvider.');
+  }
+  return context;
+};
+exports.useSidebarGroupReorderContext = useSidebarGroupReorderContext;
+//# sourceMappingURL=SidebarGroup.context.js.map

package/lib/cjs/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.context.js","names":["_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SidebarGroupReorderContext","createContext","SidebarGroupReorderProvider","children","value","createElement","Provider","exports","displayName","useSidebarGroupReorderContext","context","useContext","Error"],"sources":["../../../../../../src/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.context.tsx"],"sourcesContent":["import React, { ReactNode, createContext, useContext } from 'react';\nimport {\n    NavigationLayoutItem,\n    NavigationLayoutItemReorderSource,\n    NavigationLayoutItemReorderTarget,\n} from '../../NavigationLayout.types';\n\ninterface SidebarGroupReorderContextValue {\n    draggedItemId?: NavigationLayoutItem['id'];\n    dropTarget: NavigationLayoutItemReorderTarget | null;\n    isDragging: boolean;\n    isReorderEnabled: boolean;\n    onDragEnd: VoidFunction;\n    onDragStart: (\n        event: React.DragEvent<HTMLDivElement>,\n        item: NavigationLayoutItemReorderSource,\n    ) => void;\n    onDrop: (target: NavigationLayoutItemReorderTarget) => void;\n    onDropTargetChange: (target: NavigationLayoutItemReorderTarget) => void;\n}\n\ninterface SidebarGroupReorderProviderProps {\n    children: ReactNode;\n    value: SidebarGroupReorderContextValue;\n}\n\nconst SidebarGroupReorderContext = createContext<SidebarGroupReorderContextValue | null>(null);\n\nexport const SidebarGroupReorderProvider = ({\n    children,\n    value,\n}: SidebarGroupReorderProviderProps) => (\n    <SidebarGroupReorderContext.Provider value={value}>\n        {children}\n    </SidebarGroupReorderContext.Provider>\n);\n\nSidebarGroupReorderProvider.displayName = 'SidebarGroupReorderProvider';\n\nexport const useSidebarGroupReorderContext = (): SidebarGroupReorderContextValue => {\n    const context = useContext(SidebarGroupReorderContext);\n\n    if (!context) {\n        throw new Error(\n            'useSidebarGroupReorderContext must be used within SidebarGroupReorderProvider.',\n        );\n    }\n\n    return context;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAoE,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AA0BpE,MAAMkB,0BAA0B,gBAAG,IAAAC,oBAAa,EAAyC,IAAI,CAAC;AAEvF,MAAMC,2BAA2B,GAAGA,CAAC;EACxCC,QAAQ;EACRC;AAC8B,CAAC,kBAC/B1B,MAAA,CAAAa,OAAA,CAAAc,aAAA,CAACL,0BAA0B,CAACM,QAAQ;EAACF,KAAK,EAAEA;AAAM,GAC7CD,QACgC,CACxC;AAACI,OAAA,CAAAL,2BAAA,GAAAA,2BAAA;AAEFA,2BAA2B,CAACM,WAAW,GAAG,6BAA6B;AAEhE,MAAMC,6BAA6B,GAAGA,CAAA,KAAuC;EAChF,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACX,0BAA0B,CAAC;EAEtD,IAAI,CAACU,OAAO,EAAE;IACV,MAAM,IAAIE,KAAK,CACX,gFACJ,CAAC;EACL;EAEA,OAAOF,OAAO;AAClB,CAAC;AAACH,OAAA,CAAAE,6BAAA,GAAAA,6BAAA","ignoreList":[]}

package/lib/cjs/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.hooks.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSidebarGroupReorder = void 0;
+var _react = require("react");
+var _NavigationLayout = require("../../NavigationLayout.utils");
+const setDragMoveEffect = event => {
+  const {
+    dataTransfer
+  } = event;
+  dataTransfer.dropEffect = 'move';
+};
+const useSidebarGroupReorder = ({
+  groupId,
+  isCompact,
+  isReorderable,
+  items,
+  onItemReorder
+}) => {
+  const [draggedItem, setDraggedItem] = (0, _react.useState)(null);
+  const [dropTarget, setDropTarget] = (0, _react.useState)(null);
+  const isReorderEnabled = (0, _react.useMemo)(() => Boolean(isReorderable && !isCompact && typeof onItemReorder === 'function'), [isCompact, isReorderable, onItemReorder]);
+  const resetDragState = (0, _react.useCallback)(() => {
+    setDraggedItem(null);
+    setDropTarget(null);
+  }, []);
+  const createReorderEvent = (0, _react.useCallback)(target => {
+    if (!draggedItem) {
+      return null;
+    }
+    return {
+      groupId,
+      itemId: draggedItem.itemId,
+      source: draggedItem,
+      target
+    };
+  }, [draggedItem, groupId]);
+  const handleDragStart = (0, _react.useCallback)((event, item) => {
+    if (!isReorderEnabled) {
+      return;
+    }
+    const {
+      dataTransfer
+    } = event;
+    dataTransfer.effectAllowed = 'move';
+    dataTransfer.setData('text/plain', item.itemId);
+    setDraggedItem(item);
+    setDropTarget(null);
+  }, [isReorderEnabled]);
+  const handleDropTargetChange = (0, _react.useCallback)(target => {
+    const nextEvent = createReorderEvent(target);
+    if (!nextEvent || !(0, _NavigationLayout.isNavigationLayoutItemReorderEventValid)({
+      items,
+      event: nextEvent
+    })) {
+      setDropTarget(null);
+      return;
+    }
+    setDropTarget(target);
+  }, [createReorderEvent, items]);
+  const handleDrop = (0, _react.useCallback)(target => {
+    const nextEvent = createReorderEvent(target);
+    if (!nextEvent || typeof onItemReorder !== 'function' || !(0, _NavigationLayout.isNavigationLayoutItemReorderEventValid)({
+      items,
+      event: nextEvent
+    })) {
+      resetDragState();
+      return;
+    }
+    onItemReorder(nextEvent);
+    resetDragState();
+  }, [createReorderEvent, items, onItemReorder, resetDragState]);
+  const groupEndTarget = (0, _react.useMemo)(() => {
+    var _items;
+    return {
+      itemId: (_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.id,
+      parentIds: [],
+      index: items.length,
+      placement: 'after'
+    };
+  }, [items]);
+  const isGroupEndTargetActive = (0, _react.useMemo)(() => (0, _NavigationLayout.isNavigationLayoutReorderTargetEqual)({
+    targetA: dropTarget,
+    targetB: groupEndTarget
+  }), [dropTarget, groupEndTarget]);
+  const handleGroupEndDragOver = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    setDragMoveEffect(event);
+    handleDropTargetChange(groupEndTarget);
+  }, [groupEndTarget, handleDropTargetChange]);
+  const handleGroupEndDrop = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    handleDrop(groupEndTarget);
+  }, [groupEndTarget, handleDrop]);
+  const handleGroupDragOver = (0, _react.useCallback)(event => {
+    if (!dropTarget) {
+      return;
+    }
+    event.preventDefault();
+    setDragMoveEffect(event);
+  }, [dropTarget]);
+  const handleGroupDrop = (0, _react.useCallback)(event => {
+    if (!dropTarget) {
+      return;
+    }
+    event.preventDefault();
+    handleDrop(dropTarget);
+  }, [dropTarget, handleDrop]);
+  return {
+    draggedItemId: draggedItem === null || draggedItem === void 0 ? void 0 : draggedItem.itemId,
+    dropTarget,
+    isDragging: draggedItem !== null,
+    isGroupEndTargetActive,
+    isReorderEnabled,
+    handleDragEnd: resetDragState,
+    handleDragStart,
+    handleDrop,
+    handleDropTargetChange,
+    handleGroupDragOver,
+    handleGroupDrop,
+    handleGroupEndDragOver,
+    handleGroupEndDrop
+  };
+};
+exports.useSidebarGroupReorder = useSidebarGroupReorder;
+//# sourceMappingURL=SidebarGroup.hooks.js.map

package/lib/cjs/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.hooks.js","names":["_react","require","_NavigationLayout","setDragMoveEffect","event","dataTransfer","dropEffect","useSidebarGroupReorder","groupId","isCompact","isReorderable","items","onItemReorder","draggedItem","setDraggedItem","useState","dropTarget","setDropTarget","isReorderEnabled","useMemo","Boolean","resetDragState","useCallback","createReorderEvent","target","itemId","source","handleDragStart","item","effectAllowed","setData","handleDropTargetChange","nextEvent","isNavigationLayoutItemReorderEventValid","handleDrop","groupEndTarget","_items","length","id","parentIds","index","placement","isGroupEndTargetActive","isNavigationLayoutReorderTargetEqual","targetA","targetB","handleGroupEndDragOver","preventDefault","handleGroupEndDrop","stopPropagation","handleGroupDragOver","handleGroupDrop","draggedItemId","isDragging","handleDragEnd","exports"],"sources":["../../../../../../src/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.hooks.ts"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport {\n    NavigationLayoutGroup,\n    NavigationLayoutItem,\n    NavigationLayoutItemReorderEvent,\n    NavigationLayoutItemReorderSource,\n    NavigationLayoutItemReorderTarget,\n    NavigationLayoutProps,\n} from '../../NavigationLayout.types';\nimport {\n    isNavigationLayoutItemReorderEventValid,\n    isNavigationLayoutReorderTargetEqual,\n} from '../../NavigationLayout.utils';\n\ninterface UseSidebarGroupReorderOptions {\n    groupId: NavigationLayoutGroup['id'];\n    isCompact: boolean;\n    isReorderable?: NavigationLayoutGroup['isReorderable'];\n    items: NavigationLayoutItem[];\n    onItemReorder?: NavigationLayoutProps['onItemReorder'];\n}\n\ninterface UseSidebarGroupReorderResult {\n    draggedItemId?: NavigationLayoutItem['id'];\n    dropTarget: NavigationLayoutItemReorderTarget | null;\n    isDragging: boolean;\n    isGroupEndTargetActive: boolean;\n    isReorderEnabled: boolean;\n    handleDragEnd: VoidFunction;\n    handleDragStart: (\n        event: React.DragEvent<HTMLDivElement>,\n        item: NavigationLayoutItemReorderSource,\n    ) => void;\n    handleDrop: (target: NavigationLayoutItemReorderTarget) => void;\n    handleDropTargetChange: (target: NavigationLayoutItemReorderTarget) => void;\n    handleGroupDragOver: (event: React.DragEvent<HTMLDivElement>) => void;\n    handleGroupDrop: (event: React.DragEvent<HTMLDivElement>) => void;\n    handleGroupEndDragOver: (event: React.DragEvent<HTMLDivElement>) => void;\n    handleGroupEndDrop: (event: React.DragEvent<HTMLDivElement>) => void;\n}\n\nconst setDragMoveEffect = (event: React.DragEvent<HTMLDivElement>): void => {\n    const { dataTransfer } = event;\n\n    dataTransfer.dropEffect = 'move';\n};\n\nexport const useSidebarGroupReorder = ({\n    groupId,\n    isCompact,\n    isReorderable,\n    items,\n    onItemReorder,\n}: UseSidebarGroupReorderOptions): UseSidebarGroupReorderResult => {\n    const [draggedItem, setDraggedItem] = useState<NavigationLayoutItemReorderSource | null>(null);\n    const [dropTarget, setDropTarget] = useState<NavigationLayoutItemReorderTarget | null>(null);\n\n    const isReorderEnabled = useMemo(\n        () => Boolean(isReorderable && !isCompact && typeof onItemReorder === 'function'),\n        [isCompact, isReorderable, onItemReorder],\n    );\n\n    const resetDragState = useCallback((): void => {\n        setDraggedItem(null);\n        setDropTarget(null);\n    }, []);\n\n    const createReorderEvent = useCallback(\n        (target: NavigationLayoutItemReorderTarget): NavigationLayoutItemReorderEvent | null => {\n            if (!draggedItem) {\n                return null;\n            }\n\n            return {\n                groupId,\n                itemId: draggedItem.itemId,\n                source: draggedItem,\n                target,\n            };\n        },\n        [draggedItem, groupId],\n    );\n\n    const handleDragStart = useCallback(\n        (event: React.DragEvent<HTMLDivElement>, item: NavigationLayoutItemReorderSource): void => {\n            if (!isReorderEnabled) {\n                return;\n            }\n\n            const { dataTransfer } = event;\n\n            dataTransfer.effectAllowed = 'move';\n            dataTransfer.setData('text/plain', item.itemId);\n\n            setDraggedItem(item);\n            setDropTarget(null);\n        },\n        [isReorderEnabled],\n    );\n\n    const handleDropTargetChange = useCallback(\n        (target: NavigationLayoutItemReorderTarget): void => {\n            const nextEvent = createReorderEvent(target);\n\n            if (\n                !nextEvent ||\n                !isNavigationLayoutItemReorderEventValid({ items, event: nextEvent })\n            ) {\n                setDropTarget(null);\n\n                return;\n            }\n\n            setDropTarget(target);\n        },\n        [createReorderEvent, items],\n    );\n\n    const handleDrop = useCallback(\n        (target: NavigationLayoutItemReorderTarget): void => {\n            const nextEvent = createReorderEvent(target);\n\n            if (\n                !nextEvent ||\n                typeof onItemReorder !== 'function' ||\n                !isNavigationLayoutItemReorderEventValid({ items, event: nextEvent })\n            ) {\n                resetDragState();\n\n                return;\n            }\n\n            onItemReorder(nextEvent);\n            resetDragState();\n        },\n        [createReorderEvent, items, onItemReorder, resetDragState],\n    );\n\n    const groupEndTarget = useMemo<NavigationLayoutItemReorderTarget>(\n        () => ({\n            itemId: items[items.length - 1]?.id,\n            parentIds: [],\n            index: items.length,\n            placement: 'after',\n        }),\n        [items],\n    );\n\n    const isGroupEndTargetActive = useMemo(\n        () =>\n            isNavigationLayoutReorderTargetEqual({\n                targetA: dropTarget,\n                targetB: groupEndTarget,\n            }),\n        [dropTarget, groupEndTarget],\n    );\n\n    const handleGroupEndDragOver = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            event.preventDefault();\n            setDragMoveEffect(event);\n            handleDropTargetChange(groupEndTarget);\n        },\n        [groupEndTarget, handleDropTargetChange],\n    );\n\n    const handleGroupEndDrop = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            event.preventDefault();\n            event.stopPropagation();\n            handleDrop(groupEndTarget);\n        },\n        [groupEndTarget, handleDrop],\n    );\n\n    const handleGroupDragOver = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            if (!dropTarget) {\n                return;\n            }\n\n            event.preventDefault();\n            setDragMoveEffect(event);\n        },\n        [dropTarget],\n    );\n\n    const handleGroupDrop = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            if (!dropTarget) {\n                return;\n            }\n\n            event.preventDefault();\n            handleDrop(dropTarget);\n        },\n        [dropTarget, handleDrop],\n    );\n\n    return {\n        draggedItemId: draggedItem?.itemId,\n        dropTarget,\n        isDragging: draggedItem !== null,\n        isGroupEndTargetActive,\n        isReorderEnabled,\n        handleDragEnd: resetDragState,\n        handleDragStart,\n        handleDrop,\n        handleDropTargetChange,\n        handleGroupDragOver,\n        handleGroupDrop,\n        handleGroupEndDragOver,\n        handleGroupEndDrop,\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SidebarGroup = require("./SidebarGroup.styles");
+var _SidebarItem = _interopRequireDefault(require("./sidebar-item/SidebarItem"));
+var _SidebarGroup2 = require("./SidebarGroup.context");
+var _SidebarGroup3 = require("./SidebarGroup.hooks");
+var _NavigationSidebar = require("../NavigationSidebar.context");
+var _NavigationLayout = require("../../NavigationLayout.context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SidebarGroup = ({
+  groupId,
+  items,
+  isReorderable
+}) => {
+  const {
+    isCompact
+  } = (0, _NavigationSidebar.useNavigationSidebarContext)();
+  const {
+    onItemReorder
+  } = (0, _NavigationLayout.useNavigationLayoutContext)();
+  const {
+    draggedItemId,
+    dropTarget,
+    isDragging,
+    isGroupEndTargetActive,
+    isReorderEnabled,
+    handleDragEnd,
+    handleDragStart,
+    handleDrop,
+    handleDropTargetChange,
+    handleGroupDragOver,
+    handleGroupDrop,
+    handleGroupEndDragOver,
+    handleGroupEndDrop
+  } = (0, _SidebarGroup3.useSidebarGroupReorder)({
+    groupId,
+    isCompact,
+    isReorderable,
+    items,
+    onItemReorder
+  });
+  const contextValue = (0, _react.useMemo)(() => ({
+    draggedItemId,
+    dropTarget,
+    isDragging,
+    isReorderEnabled,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    onDrop: handleDrop,
+    onDropTargetChange: handleDropTargetChange
+  }), [draggedItemId, dropTarget, handleDragEnd, handleDragStart, handleDrop, handleDropTargetChange, isDragging, isReorderEnabled]);
+  const content = (0, _react.useMemo)(() => items.map((item, index) => /*#__PURE__*/_react.default.createElement(_SidebarItem.default, {
+    key: item.id,
+    item: item,
+    index: index,
+    parentIds: []
+  })), [items]);
+  return /*#__PURE__*/_react.default.createElement(_SidebarGroup2.SidebarGroupReorderProvider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_SidebarGroup.StyledSidebarGroup, {
+    onDragOver: handleGroupDragOver,
+    onDrop: handleGroupDrop
+  }, content, isReorderEnabled && /*#__PURE__*/_react.default.createElement(_SidebarGroup.StyledSidebarDropZone, {
+    $isActive: isGroupEndTargetActive,
+    $isDragging: isDragging,
+    $placement: "after",
+    onDragOver: handleGroupEndDragOver,
+    onDrop: handleGroupEndDrop
+  })));
+};
+SidebarGroup.displayName = 'SidebarGroup';
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(SidebarGroup);
+//# sourceMappingURL=SidebarGroup.js.map

package/lib/cjs/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.js","names":["_react","_interopRequireWildcard","require","_SidebarGroup","_SidebarItem","_interopRequireDefault","_SidebarGroup2","_SidebarGroup3","_NavigationSidebar","_NavigationLayout","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SidebarGroup","groupId","items","isReorderable","isCompact","useNavigationSidebarContext","onItemReorder","useNavigationLayoutContext","draggedItemId","dropTarget","isDragging","isGroupEndTargetActive","isReorderEnabled","handleDragEnd","handleDragStart","handleDrop","handleDropTargetChange","handleGroupDragOver","handleGroupDrop","handleGroupEndDragOver","handleGroupEndDrop","useSidebarGroupReorder","contextValue","useMemo","onDragEnd","onDragStart","onDrop","onDropTargetChange","content","map","item","index","createElement","key","id","parentIds","SidebarGroupReorderProvider","value","StyledSidebarGroup","onDragOver","StyledSidebarDropZone","$isActive","$isDragging","$placement","displayName","_default","exports","memo"],"sources":["../../../../../../src/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.tsx"],"sourcesContent":["import React, { FC, memo, useMemo } from 'react';\nimport { StyledSidebarDropZone, StyledSidebarGroup } from './SidebarGroup.styles';\nimport { NavigationLayoutGroup, NavigationLayoutItem } from '../../NavigationLayout.types';\nimport SidebarItem from './sidebar-item/SidebarItem';\nimport { SidebarGroupReorderProvider } from './SidebarGroup.context';\nimport { useSidebarGroupReorder } from './SidebarGroup.hooks';\nimport { useNavigationSidebarContext } from '../NavigationSidebar.context';\nimport { useNavigationLayoutContext } from '../../NavigationLayout.context';\n\ninterface SidebarGroupProps {\n    groupId: NavigationLayoutGroup['id'];\n    items: NavigationLayoutItem[];\n    isReorderable?: NavigationLayoutGroup['isReorderable'];\n}\n\nconst SidebarGroup: FC<SidebarGroupProps> = ({ groupId, items, isReorderable }) => {\n    const { isCompact } = useNavigationSidebarContext();\n    const { onItemReorder } = useNavigationLayoutContext();\n    const {\n        draggedItemId,\n        dropTarget,\n        isDragging,\n        isGroupEndTargetActive,\n        isReorderEnabled,\n        handleDragEnd,\n        handleDragStart,\n        handleDrop,\n        handleDropTargetChange,\n        handleGroupDragOver,\n        handleGroupDrop,\n        handleGroupEndDragOver,\n        handleGroupEndDrop,\n    } = useSidebarGroupReorder({\n        groupId,\n        isCompact,\n        isReorderable,\n        items,\n        onItemReorder,\n    });\n\n    const contextValue = useMemo(\n        () => ({\n            draggedItemId,\n            dropTarget,\n            isDragging,\n            isReorderEnabled,\n            onDragEnd: handleDragEnd,\n            onDragStart: handleDragStart,\n            onDrop: handleDrop,\n            onDropTargetChange: handleDropTargetChange,\n        }),\n        [\n            draggedItemId,\n            dropTarget,\n            handleDragEnd,\n            handleDragStart,\n            handleDrop,\n            handleDropTargetChange,\n            isDragging,\n            isReorderEnabled,\n        ],\n    );\n\n    const content = useMemo(\n        () =>\n            items.map((item, index) => (\n                <SidebarItem key={item.id} item={item} index={index} parentIds={[]} />\n            )),\n        [items],\n    );\n\n    return (\n        <SidebarGroupReorderProvider value={contextValue}>\n            <StyledSidebarGroup onDragOver={handleGroupDragOver} onDrop={handleGroupDrop}>\n                {content}\n                {isReorderEnabled && (\n                    <StyledSidebarDropZone\n                        $isActive={isGroupEndTargetActive}\n                        $isDragging={isDragging}\n                        $placement=\"after\"\n                        onDragOver={handleGroupEndDragOver}\n                        onDrop={handleGroupEndDrop}\n                    />\n                )}\n            </StyledSidebarGroup>\n        </SidebarGroupReorderProvider>\n    );\n};\n\nSidebarGroup.displayName = 'SidebarGroup';\n\nexport default memo(SidebarGroup);\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.styles.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSidebarGroup = exports.StyledSidebarDropZone = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledSidebarGroup = exports.StyledSidebarGroup = _styledComponents.default.div`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+`;
+const StyledSidebarDropZone = exports.StyledSidebarDropZone = _styledComponents.default.div`
+    position: absolute;
+    left: ${({
+  $depth = 0
+}) => $depth * 8}px;
+    right: 0;
+    height: 24px;
+    z-index: 1;
+    pointer-events: ${({
+  $isDragging
+}) => $isDragging ? 'auto' : 'none'};
+
+    ${({
+  $placement = 'before'
+}) => {
+  if ($placement === 'after') {
+    return `
+                top: 100%;
+                transform: translateY(-50%);
+            `;
+  }
+  if ($placement === 'inside') {
+    return `
+                top: 42px;
+                transform: translateY(-50%);
+            `;
+  }
+  return `
+            top: 0;
+            transform: translateY(-50%);
+        `;
+}}
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 50%;
+        height: 2px;
+        transform: translateY(-50%);
+        border-radius: 999px;
+        background-color: ${({
+  $isActive
+}) => $isActive ? 'rgba(255, 255, 255, 0.9)' : 'transparent'};
+        box-shadow: ${({
+  $isActive
+}) => $isActive ? '0 0 0 1px rgba(255, 255, 255, 0.25)' : 'none'};
+        opacity: ${({
+  $isActive
+}) => $isActive ? 1 : 0};
+        transition: opacity 0.15s ease;
+    }
+`;
+//# sourceMappingURL=SidebarGroup.styles.js.map

package/lib/cjs/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledSidebarGroup","exports","styled","div","StyledSidebarDropZone","$depth","$isDragging","$placement","$isActive"],"sources":["../../../../../../src/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledSidebarGroup = styled.div`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n`;\n\ninterface StyledSidebarDropZoneProps {\n    $depth?: number;\n    $isActive: boolean;\n    $isDragging: boolean;\n    $placement?: 'before' | 'after' | 'inside';\n}\n\nexport const StyledSidebarDropZone = styled.div<StyledSidebarDropZoneProps>`\n    position: absolute;\n    left: ${({ $depth = 0 }) => $depth * 8}px;\n    right: 0;\n    height: 24px;\n    z-index: 1;\n    pointer-events: ${({ $isDragging }) => ($isDragging ? 'auto' : 'none')};\n\n    ${({ $placement = 'before' }) => {\n        if ($placement === 'after') {\n            return `\n                top: 100%;\n                transform: translateY(-50%);\n            `;\n        }\n\n        if ($placement === 'inside') {\n            return `\n                top: 42px;\n                transform: translateY(-50%);\n            `;\n        }\n\n        return `\n            top: 0;\n            transform: translateY(-50%);\n        `;\n    }}\n\n    &::after {\n        content: '';\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 50%;\n        height: 2px;\n        transform: translateY(-50%);\n        border-radius: 999px;\n        background-color: ${({ $isActive }) =>\n            $isActive ? 'rgba(255, 255, 255, 0.9)' : 'transparent'};\n        box-shadow: ${({ $isActive }) =>\n            $isActive ? '0 0 0 1px rgba(255, 255, 255, 0.25)' : 'none'};\n        opacity: ${({ $isActive }) => ($isActive ? 1 : 0)};\n        transition: opacity 0.15s ease;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA;AACA;AACA,CAAC;AASM,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAGF,yBAAM,CAACC,GAA+B;AAC3E;AACA,YAAY,CAAC;EAAEE,MAAM,GAAG;AAAE,CAAC,KAAKA,MAAM,GAAG,CAAC;AAC1C;AACA;AACA;AACA,sBAAsB,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,MAAM,GAAG,MAAO;AAC1E;AACA,MAAM,CAAC;EAAEC,UAAU,GAAG;AAAS,CAAC,KAAK;EAC7B,IAAIA,UAAU,KAAK,OAAO,EAAE;IACxB,OAAO;AACnB;AACA;AACA,aAAa;EACL;EAEA,IAAIA,UAAU,KAAK,QAAQ,EAAE;IACzB,OAAO;AACnB;AACA;AACA,aAAa;EACL;EAEA,OAAO;AACf;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EAAEC;AAAU,CAAC,KAC9BA,SAAS,GAAG,0BAA0B,GAAG,aAAa;AAClE,sBAAsB,CAAC;EAAEA;AAAU,CAAC,KACxBA,SAAS,GAAG,qCAAqC,GAAG,MAAM;AACtE,mBAAmB,CAAC;EAAEA;AAAU,CAAC,KAAMA,SAAS,GAAG,CAAC,GAAG,CAAE;AACzD;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/navigation-layout/navigation-sidebar/sidebar-group/sidebar-item/SidebarItem.hooks.js

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSidebarItemReorder = exports.useSidebarItemPopup = void 0;
+var _react = require("react");
+var _SidebarItem = require("./SidebarItem.utils");
+var _NavigationLayout = require("../../../NavigationLayout.utils");
+const setDragMoveEffect = event => {
+  const {
+    dataTransfer
+  } = event;
+  dataTransfer.dropEffect = 'move';
+};
+const resolveSidebarContainer = item => {
+  if (!item) {
+    return null;
+  }
+  return item.closest('[data-navigation-sidebar-root="true"]') ?? document.getElementById('sidebar');
+};
+const useSidebarItemPopup = ({
+  isDisabled,
+  shouldShowCollapsedLabel
+}) => {
+  const [coordinates, setCoordinates] = (0, _react.useState)(null);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const [popupContainer, setPopupContainer] = (0, _react.useState)(null);
+  const animationFrameIdRef = (0, _react.useRef)(null);
+  const lastCoordinatesRef = (0, _react.useRef)(null);
+  const itemRef = (0, _react.useRef)(null);
+  const resetCoordinates = (0, _react.useCallback)(() => {
+    lastCoordinatesRef.current = null;
+    setCoordinates(null);
+  }, []);
+  const resolvePopupContainer = (0, _react.useCallback)(() => {
+    const nextContainer = resolveSidebarContainer(itemRef.current);
+    setPopupContainer(previousContainer => previousContainer === nextContainer ? previousContainer : nextContainer);
+    return nextContainer;
+  }, []);
+  const updateCoordinates = (0, _react.useCallback)(() => {
+    const nextContainer = popupContainer ?? resolvePopupContainer();
+    const itemElement = itemRef.current;
+    if (!nextContainer || !itemElement) {
+      resetCoordinates();
+      return;
+    }
+    const nextCoordinates = (0, _SidebarItem.getSidebarItemPopupCoordinates)({
+      container: nextContainer,
+      item: itemElement
+    });
+    if ((0, _SidebarItem.areCoordinatesEqual)({
+      coordinatesA: lastCoordinatesRef.current,
+      coordinatesB: nextCoordinates
+    })) {
+      return;
+    }
+    lastCoordinatesRef.current = nextCoordinates;
+    setCoordinates(nextCoordinates);
+  }, [popupContainer, resetCoordinates, resolvePopupContainer]);
+  const scheduleCoordinatesUpdate = (0, _react.useCallback)(() => {
+    if (animationFrameIdRef.current !== null) {
+      return;
+    }
+    animationFrameIdRef.current = requestAnimationFrame(() => {
+      animationFrameIdRef.current = null;
+      updateCoordinates();
+    });
+  }, [updateCoordinates]);
+  const handleMouseEnter = (0, _react.useCallback)(() => {
+    resolvePopupContainer();
+    setIsHovered(true);
+    scheduleCoordinatesUpdate();
+  }, [resolvePopupContainer, scheduleCoordinatesUpdate]);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    setIsHovered(false);
+    resetCoordinates();
+  }, [resetCoordinates]);
+  (0, _react.useEffect)(() => {
+    resolvePopupContainer();
+  }, [resolvePopupContainer]);
+  (0, _react.useEffect)(() => {
+    if (!isHovered || isDisabled || !shouldShowCollapsedLabel) {
+      resetCoordinates();
+      return undefined;
+    }
+    const nextContainer = popupContainer ?? resolvePopupContainer();
+    const itemElement = itemRef.current;
+    if (!nextContainer || !itemElement) {
+      return undefined;
+    }
+    scheduleCoordinatesUpdate();
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => {
+      scheduleCoordinatesUpdate();
+    });
+    resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(nextContainer);
+    resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(itemElement);
+    const scrollableElements = (0, _SidebarItem.getScrollableAncestorElements)({
+      element: itemElement,
+      boundaryElement: nextContainer
+    });
+    scrollableElements.forEach(element => {
+      element.addEventListener('scroll', scheduleCoordinatesUpdate, {
+        passive: true
+      });
+    });
+    window.addEventListener('resize', scheduleCoordinatesUpdate);
+    return () => {
+      scrollableElements.forEach(element => {
+        element.removeEventListener('scroll', scheduleCoordinatesUpdate);
+      });
+      window.removeEventListener('resize', scheduleCoordinatesUpdate);
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+      if (animationFrameIdRef.current !== null) {
+        cancelAnimationFrame(animationFrameIdRef.current);
+        animationFrameIdRef.current = null;
+      }
+    };
+  }, [isDisabled, isHovered, popupContainer, resetCoordinates, resolvePopupContainer, scheduleCoordinatesUpdate, shouldShowCollapsedLabel]);
+  return {
+    coordinates,
+    handleMouseEnter,
+    handleMouseLeave,
+    isHovered,
+    itemRef,
+    popupContainer,
+    shouldRenderPopup: !isDisabled && !!shouldShowCollapsedLabel && isHovered && !!coordinates
+  };
+};
+exports.useSidebarItemPopup = useSidebarItemPopup;
+const useSidebarItemReorder = ({
+  childItems,
+  draggedItemId,
+  dropTarget,
+  id,
+  index,
+  isDisabled,
+  isReorderEnabled,
+  onDragEnd,
+  onDragStart,
+  onDrop,
+  onDropInside,
+  onDropTargetChange,
+  parentIds
+}) => {
+  const childParentIds = (0, _react.useMemo)(() => [...parentIds, id], [id, parentIds]);
+  const canDragItem = isReorderEnabled && !isDisabled;
+  const canDropInsideItem = isReorderEnabled && !isDisabled;
+  const currentItem = (0, _react.useMemo)(() => ({
+    itemId: id,
+    parentIds,
+    index
+  }), [id, index, parentIds]);
+  const beforeTarget = (0, _react.useMemo)(() => ({
+    itemId: id,
+    parentIds,
+    index,
+    placement: 'before'
+  }), [id, index, parentIds]);
+  const insideTarget = (0, _react.useMemo)(() => ({
+    itemId: id,
+    parentIds: childParentIds,
+    index: (childItems === null || childItems === void 0 ? void 0 : childItems.length) ?? 0,
+    placement: 'inside'
+  }), [childItems, childParentIds, id]);
+  const childListEndTarget = (0, _react.useMemo)(() => {
+    const lastChild = childItems === null || childItems === void 0 ? void 0 : childItems[childItems.length - 1];
+    if (!lastChild) {
+      return null;
+    }
+    return {
+      itemId: lastChild.id,
+      parentIds: childParentIds,
+      index: childItems.length,
+      placement: 'after'
+    };
+  }, [childItems, childParentIds]);
+  const isBeforeDropTargetActive = (0, _react.useMemo)(() => (0, _NavigationLayout.isNavigationLayoutReorderTargetEqual)({
+    targetA: dropTarget,
+    targetB: beforeTarget
+  }), [beforeTarget, dropTarget]);
+  const isInsideDropTargetActive = (0, _react.useMemo)(() => (0, _NavigationLayout.isNavigationLayoutReorderTargetEqual)({
+    targetA: dropTarget,
+    targetB: insideTarget
+  }), [dropTarget, insideTarget]);
+  const isChildListEndTargetActive = (0, _react.useMemo)(() => (0, _NavigationLayout.isNavigationLayoutReorderTargetEqual)({
+    targetA: dropTarget,
+    targetB: childListEndTarget
+  }), [childListEndTarget, dropTarget]);
+  const handleDragStart = (0, _react.useCallback)(event => {
+    if (!canDragItem) {
+      return;
+    }
+    onDragStart(event, currentItem);
+  }, [canDragItem, currentItem, onDragStart]);
+  const handleResolvedDragEnd = (0, _react.useCallback)(() => {
+    if (!canDragItem) {
+      return;
+    }
+    onDragEnd();
+  }, [canDragItem, onDragEnd]);
+  const handleBeforeDragOver = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    setDragMoveEffect(event);
+    onDropTargetChange(beforeTarget);
+  }, [beforeTarget, onDropTargetChange]);
+  const handleBeforeDrop = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    onDrop(beforeTarget);
+  }, [beforeTarget, onDrop]);
+  const handleInsideDragOver = (0, _react.useCallback)(event => {
+    if (!canDropInsideItem) {
+      return;
+    }
+    event.preventDefault();
+    setDragMoveEffect(event);
+    onDropTargetChange(insideTarget);
+  }, [canDropInsideItem, insideTarget, onDropTargetChange]);
+  const handleInsideDrop = (0, _react.useCallback)(event => {
+    if (!canDropInsideItem) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    onDropInside === null || onDropInside === void 0 || onDropInside();
+    onDrop(insideTarget);
+  }, [canDropInsideItem, insideTarget, onDrop, onDropInside]);
+  const handleChildListEndDragOver = (0, _react.useCallback)(event => {
+    if (!childListEndTarget) {
+      return;
+    }
+    event.preventDefault();
+    setDragMoveEffect(event);
+    onDropTargetChange(childListEndTarget);
+  }, [childListEndTarget, onDropTargetChange]);
+  const handleChildListEndDrop = (0, _react.useCallback)(event => {
+    if (!childListEndTarget) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    onDrop(childListEndTarget);
+  }, [childListEndTarget, onDrop]);
+  return {
+    canDragItem,
+    canDropInsideItem,
+    childParentIds,
+    childListEndTarget,
+    handleBeforeDragOver,
+    handleBeforeDrop,
+    handleChildListEndDragOver,
+    handleChildListEndDrop,
+    handleDragEnd: handleResolvedDragEnd,
+    handleDragStart,
+    handleInsideDragOver,
+    handleInsideDrop,
+    isBeforeDropTargetActive,
+    isChildListEndTargetActive,
+    isDragging: draggedItemId === id,
+    isInsideDropTargetActive
+  };
+};
+exports.useSidebarItemReorder = useSidebarItemReorder;
+//# sourceMappingURL=SidebarItem.hooks.js.map