@chayns-components/navigation 5.0.64 → 5.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.hooks.js","names":["_react","require","_SidebarItem","_NavigationLayout","setDragMoveEffect","event","dataTransfer","dropEffect","resolveSidebarContainer","item","closest","document","getElementById","useSidebarItemPopup","isDisabled","shouldShowCollapsedLabel","coordinates","setCoordinates","useState","isHovered","setIsHovered","popupContainer","setPopupContainer","animationFrameIdRef","useRef","lastCoordinatesRef","itemRef","resetCoordinates","useCallback","current","resolvePopupContainer","nextContainer","previousContainer","updateCoordinates","itemElement","nextCoordinates","getSidebarItemPopupCoordinates","container","areCoordinatesEqual","coordinatesA","coordinatesB","scheduleCoordinatesUpdate","requestAnimationFrame","handleMouseEnter","handleMouseLeave","useEffect","undefined","resizeObserver","ResizeObserver","observe","scrollableElements","getScrollableAncestorElements","element","boundaryElement","forEach","addEventListener","passive","window","removeEventListener","disconnect","cancelAnimationFrame","shouldRenderPopup","exports","useSidebarItemReorder","childItems","draggedItemId","dropTarget","id","index","isReorderEnabled","onDragEnd","onDragStart","onDrop","onDropInside","onDropTargetChange","parentIds","childParentIds","useMemo","canDragItem","canDropInsideItem","currentItem","itemId","beforeTarget","placement","insideTarget","length","childListEndTarget","lastChild","isBeforeDropTargetActive","isNavigationLayoutReorderTargetEqual","targetA","targetB","isInsideDropTargetActive","isChildListEndTargetActive","handleDragStart","handleResolvedDragEnd","handleBeforeDragOver","preventDefault","handleBeforeDrop","stopPropagation","handleInsideDragOver","handleInsideDrop","handleChildListEndDragOver","handleChildListEndDrop","handleDragEnd","isDragging"],"sources":["../../../../../../../src/components/navigation-layout/navigation-sidebar/sidebar-group/sidebar-item/SidebarItem.hooks.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    areCoordinatesEqual,\n    Coordinates,\n    getScrollableAncestorElements,\n    getSidebarItemPopupCoordinates,\n} from './SidebarItem.utils';\nimport {\n    NavigationLayoutItem,\n    NavigationLayoutItemReorderSource,\n    NavigationLayoutItemReorderTarget,\n} from '../../../NavigationLayout.types';\nimport { isNavigationLayoutReorderTargetEqual } from '../../../NavigationLayout.utils';\n\nexport interface UseSidebarItemPopupOptions {\n    isDisabled: boolean;\n    shouldShowCollapsedLabel?: boolean;\n}\n\nexport interface UseSidebarItemPopupResult {\n    coordinates: Coordinates | null;\n    handleMouseEnter: () => void;\n    handleMouseLeave: () => void;\n    isHovered: boolean;\n    itemRef: RefObject<HTMLDivElement>;\n    popupContainer: HTMLElement | null;\n    shouldRenderPopup: boolean;\n}\n\nexport interface UseSidebarItemReorderOptions {\n    childItems: NavigationLayoutItem['children'];\n    draggedItemId?: NavigationLayoutItem['id'];\n    dropTarget: NavigationLayoutItemReorderTarget | null;\n    id: NavigationLayoutItem['id'];\n    index: number;\n    isDisabled?: NavigationLayoutItem['isDisabled'];\n    isReorderEnabled: boolean;\n    onDragEnd: VoidFunction;\n    onDragStart: (\n        event: React.DragEvent<HTMLDivElement>,\n        item: NavigationLayoutItemReorderSource,\n    ) => void;\n    onDrop: (target: NavigationLayoutItemReorderTarget) => void;\n    onDropInside?: VoidFunction;\n    onDropTargetChange: (target: NavigationLayoutItemReorderTarget) => void;\n    parentIds: NavigationLayoutItem['id'][];\n}\n\nexport interface UseSidebarItemReorderResult {\n    canDragItem: boolean;\n    canDropInsideItem: boolean;\n    childParentIds: NavigationLayoutItem['id'][];\n    childListEndTarget: NavigationLayoutItemReorderTarget | null;\n    handleBeforeDragOver: (event: React.DragEvent<HTMLDivElement>) => void;\n    handleBeforeDrop: (event: React.DragEvent<HTMLDivElement>) => void;\n    handleChildListEndDragOver: (event: React.DragEvent<HTMLDivElement>) => void;\n    handleChildListEndDrop: (event: React.DragEvent<HTMLDivElement>) => void;\n    handleDragEnd: VoidFunction;\n    handleDragStart: (event: React.DragEvent<HTMLDivElement>) => void;\n    handleInsideDragOver: (event: React.DragEvent<HTMLDivElement>) => void;\n    handleInsideDrop: (event: React.DragEvent<HTMLDivElement>) => void;\n    isBeforeDropTargetActive: boolean;\n    isChildListEndTargetActive: boolean;\n    isDragging: boolean;\n    isInsideDropTargetActive: boolean;\n}\n\nconst setDragMoveEffect = (event: React.DragEvent<HTMLDivElement>): void => {\n    const { dataTransfer } = event;\n\n    dataTransfer.dropEffect = 'move';\n};\n\nconst resolveSidebarContainer = (item: HTMLDivElement | null): HTMLElement | null => {\n    if (!item) {\n        return null;\n    }\n\n    return (\n        item.closest<HTMLElement>('[data-navigation-sidebar-root=\"true\"]') ??\n        document.getElementById('sidebar')\n    );\n};\n\nexport const useSidebarItemPopup = ({\n    isDisabled,\n    shouldShowCollapsedLabel,\n}: UseSidebarItemPopupOptions): UseSidebarItemPopupResult => {\n    const [coordinates, setCoordinates] = useState<Coordinates | null>(null);\n    const [isHovered, setIsHovered] = useState(false);\n    const [popupContainer, setPopupContainer] = useState<HTMLElement | null>(null);\n\n    const animationFrameIdRef = useRef<number | null>(null);\n    const lastCoordinatesRef = useRef<Coordinates | null>(null);\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    const resetCoordinates = useCallback(() => {\n        lastCoordinatesRef.current = null;\n        setCoordinates(null);\n    }, []);\n\n    const resolvePopupContainer = useCallback(() => {\n        const nextContainer = resolveSidebarContainer(itemRef.current);\n\n        setPopupContainer((previousContainer) =>\n            previousContainer === nextContainer ? previousContainer : nextContainer,\n        );\n\n        return nextContainer;\n    }, []);\n\n    const updateCoordinates = useCallback(() => {\n        const nextContainer = popupContainer ?? resolvePopupContainer();\n        const itemElement = itemRef.current;\n\n        if (!nextContainer || !itemElement) {\n            resetCoordinates();\n\n            return;\n        }\n\n        const nextCoordinates = getSidebarItemPopupCoordinates({\n            container: nextContainer,\n            item: itemElement,\n        });\n\n        if (\n            areCoordinatesEqual({\n                coordinatesA: lastCoordinatesRef.current,\n                coordinatesB: nextCoordinates,\n            })\n        ) {\n            return;\n        }\n\n        lastCoordinatesRef.current = nextCoordinates;\n        setCoordinates(nextCoordinates);\n    }, [popupContainer, resetCoordinates, resolvePopupContainer]);\n\n    const scheduleCoordinatesUpdate = useCallback(() => {\n        if (animationFrameIdRef.current !== null) {\n            return;\n        }\n\n        animationFrameIdRef.current = requestAnimationFrame(() => {\n            animationFrameIdRef.current = null;\n            updateCoordinates();\n        });\n    }, [updateCoordinates]);\n\n    const handleMouseEnter = useCallback(() => {\n        resolvePopupContainer();\n        setIsHovered(true);\n        scheduleCoordinatesUpdate();\n    }, [resolvePopupContainer, scheduleCoordinatesUpdate]);\n\n    const handleMouseLeave = useCallback(() => {\n        setIsHovered(false);\n        resetCoordinates();\n    }, [resetCoordinates]);\n\n    useEffect(() => {\n        resolvePopupContainer();\n    }, [resolvePopupContainer]);\n\n    useEffect(() => {\n        if (!isHovered || isDisabled || !shouldShowCollapsedLabel) {\n            resetCoordinates();\n\n            return undefined;\n        }\n\n        const nextContainer = popupContainer ?? resolvePopupContainer();\n        const itemElement = itemRef.current;\n\n        if (!nextContainer || !itemElement) {\n            return undefined;\n        }\n\n        scheduleCoordinatesUpdate();\n\n        const resizeObserver =\n            typeof ResizeObserver === 'undefined'\n                ? null\n                : new ResizeObserver(() => {\n                      scheduleCoordinatesUpdate();\n                  });\n\n        resizeObserver?.observe(nextContainer);\n        resizeObserver?.observe(itemElement);\n\n        const scrollableElements = getScrollableAncestorElements({\n            element: itemElement,\n            boundaryElement: nextContainer,\n        });\n\n        scrollableElements.forEach((element) => {\n            element.addEventListener('scroll', scheduleCoordinatesUpdate, { passive: true });\n        });\n\n        window.addEventListener('resize', scheduleCoordinatesUpdate);\n\n        return () => {\n            scrollableElements.forEach((element) => {\n                element.removeEventListener('scroll', scheduleCoordinatesUpdate);\n            });\n\n            window.removeEventListener('resize', scheduleCoordinatesUpdate);\n            resizeObserver?.disconnect();\n\n            if (animationFrameIdRef.current !== null) {\n                cancelAnimationFrame(animationFrameIdRef.current);\n                animationFrameIdRef.current = null;\n            }\n        };\n    }, [\n        isDisabled,\n        isHovered,\n        popupContainer,\n        resetCoordinates,\n        resolvePopupContainer,\n        scheduleCoordinatesUpdate,\n        shouldShowCollapsedLabel,\n    ]);\n\n    return {\n        coordinates,\n        handleMouseEnter,\n        handleMouseLeave,\n        isHovered,\n        itemRef,\n        popupContainer,\n        shouldRenderPopup: !isDisabled && !!shouldShowCollapsedLabel && isHovered && !!coordinates,\n    };\n};\n\nexport const useSidebarItemReorder = ({\n    childItems,\n    draggedItemId,\n    dropTarget,\n    id,\n    index,\n    isDisabled,\n    isReorderEnabled,\n    onDragEnd,\n    onDragStart,\n    onDrop,\n    onDropInside,\n    onDropTargetChange,\n    parentIds,\n}: UseSidebarItemReorderOptions): UseSidebarItemReorderResult => {\n    const childParentIds = useMemo(() => [...parentIds, id], [id, parentIds]);\n    const canDragItem = isReorderEnabled && !isDisabled;\n    const canDropInsideItem = isReorderEnabled && !isDisabled;\n\n    const currentItem = useMemo<NavigationLayoutItemReorderSource>(\n        () => ({\n            itemId: id,\n            parentIds,\n            index,\n        }),\n        [id, index, parentIds],\n    );\n\n    const beforeTarget = useMemo<NavigationLayoutItemReorderTarget>(\n        () => ({\n            itemId: id,\n            parentIds,\n            index,\n            placement: 'before',\n        }),\n        [id, index, parentIds],\n    );\n\n    const insideTarget = useMemo<NavigationLayoutItemReorderTarget>(\n        () => ({\n            itemId: id,\n            parentIds: childParentIds,\n            index: childItems?.length ?? 0,\n            placement: 'inside',\n        }),\n        [childItems, childParentIds, id],\n    );\n\n    const childListEndTarget = useMemo<NavigationLayoutItemReorderTarget | null>(() => {\n        const lastChild = childItems?.[childItems.length - 1];\n\n        if (!lastChild) {\n            return null;\n        }\n\n        return {\n            itemId: lastChild.id,\n            parentIds: childParentIds,\n            index: childItems.length,\n            placement: 'after',\n        };\n    }, [childItems, childParentIds]);\n\n    const isBeforeDropTargetActive = useMemo(\n        () =>\n            isNavigationLayoutReorderTargetEqual({\n                targetA: dropTarget,\n                targetB: beforeTarget,\n            }),\n        [beforeTarget, dropTarget],\n    );\n\n    const isInsideDropTargetActive = useMemo(\n        () =>\n            isNavigationLayoutReorderTargetEqual({\n                targetA: dropTarget,\n                targetB: insideTarget,\n            }),\n        [dropTarget, insideTarget],\n    );\n\n    const isChildListEndTargetActive = useMemo(\n        () =>\n            isNavigationLayoutReorderTargetEqual({\n                targetA: dropTarget,\n                targetB: childListEndTarget,\n            }),\n        [childListEndTarget, dropTarget],\n    );\n\n    const handleDragStart = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            if (!canDragItem) {\n                return;\n            }\n\n            onDragStart(event, currentItem);\n        },\n        [canDragItem, currentItem, onDragStart],\n    );\n\n    const handleResolvedDragEnd = useCallback((): void => {\n        if (!canDragItem) {\n            return;\n        }\n\n        onDragEnd();\n    }, [canDragItem, onDragEnd]);\n\n    const handleBeforeDragOver = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            event.preventDefault();\n            setDragMoveEffect(event);\n            onDropTargetChange(beforeTarget);\n        },\n        [beforeTarget, onDropTargetChange],\n    );\n\n    const handleBeforeDrop = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            event.preventDefault();\n            event.stopPropagation();\n            onDrop(beforeTarget);\n        },\n        [beforeTarget, onDrop],\n    );\n\n    const handleInsideDragOver = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            if (!canDropInsideItem) {\n                return;\n            }\n\n            event.preventDefault();\n            setDragMoveEffect(event);\n            onDropTargetChange(insideTarget);\n        },\n        [canDropInsideItem, insideTarget, onDropTargetChange],\n    );\n\n    const handleInsideDrop = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            if (!canDropInsideItem) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n            onDropInside?.();\n            onDrop(insideTarget);\n        },\n        [canDropInsideItem, insideTarget, onDrop, onDropInside],\n    );\n\n    const handleChildListEndDragOver = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            if (!childListEndTarget) {\n                return;\n            }\n\n            event.preventDefault();\n            setDragMoveEffect(event);\n            onDropTargetChange(childListEndTarget);\n        },\n        [childListEndTarget, onDropTargetChange],\n    );\n\n    const handleChildListEndDrop = useCallback(\n        (event: React.DragEvent<HTMLDivElement>): void => {\n            if (!childListEndTarget) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n            onDrop(childListEndTarget);\n        },\n        [childListEndTarget, onDrop],\n    );\n\n    return {\n        canDragItem,\n        canDropInsideItem,\n        childParentIds,\n        childListEndTarget,\n        handleBeforeDragOver,\n        handleBeforeDrop,\n        handleChildListEndDragOver,\n        handleChildListEndDrop,\n        handleDragEnd: handleResolvedDragEnd,\n        handleDragStart,\n        handleInsideDragOver,\n        handleInsideDrop,\n        isBeforeDropTargetActive,\n        isChildListEndTargetActive,\n        isDragging: draggedItemId === id,\n        isInsideDropTargetActive,\n    };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _core = require("@chayns-components/core");
+var _SidebarItem = require("./SidebarItem.styles");
+var _SidebarItem2 = require("./SidebarItem.utils");
+var _reactDom = require("react-dom");
+var _react2 = require("motion/react");
+var _SidebarItem3 = require("./SidebarItem.hooks");
+var _SidebarGroup = require("../SidebarGroup.styles");
+var _NavigationSidebar = require("../../NavigationSidebar.context");
+var _SidebarGroup2 = require("../SidebarGroup.context");
+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 SidebarItem = ({
+  item,
+  index,
+  parentIds,
+  shouldShowCollapsedLabel: shouldShowCollapsedLabelProp
+}) => {
+  const {
+    children: childItems,
+    disabledReason,
+    icons,
+    id,
+    imageElement,
+    imageUrl,
+    isDisabled,
+    label
+  } = item;
+  const [shouldShowChildren, setShouldShowChildren] = (0, _react.useState)(false);
+  const {
+    color,
+    isCompact,
+    onItemClick,
+    selectedItemId,
+    shouldShowCollapsedLabel
+  } = (0, _NavigationSidebar.useNavigationSidebarContext)();
+  const {
+    draggedItemId,
+    dropTarget,
+    isReorderEnabled,
+    onDragEnd,
+    onDragStart,
+    onDrop,
+    onDropTargetChange
+  } = (0, _SidebarGroup2.useSidebarGroupReorderContext)();
+  const resolvedShouldShowCollapsedLabel = shouldShowCollapsedLabelProp ?? shouldShowCollapsedLabel;
+  const {
+    coordinates,
+    handleMouseEnter,
+    handleMouseLeave,
+    isHovered,
+    itemRef,
+    popupContainer,
+    shouldRenderPopup
+  } = (0, _SidebarItem3.useSidebarItemPopup)({
+    isDisabled: Boolean(isDisabled),
+    shouldShowCollapsedLabel: resolvedShouldShowCollapsedLabel
+  });
+  const {
+    canDragItem,
+    canDropInsideItem,
+    childParentIds,
+    childListEndTarget,
+    handleBeforeDragOver,
+    handleBeforeDrop,
+    handleChildListEndDragOver,
+    handleChildListEndDrop,
+    handleDragEnd,
+    handleDragStart,
+    handleInsideDragOver,
+    handleInsideDrop,
+    isBeforeDropTargetActive,
+    isChildListEndTargetActive,
+    isDragging,
+    isInsideDropTargetActive
+  } = (0, _SidebarItem3.useSidebarItemReorder)({
+    childItems,
+    draggedItemId,
+    dropTarget,
+    id,
+    index,
+    isDisabled,
+    isReorderEnabled,
+    onDragEnd,
+    onDragStart,
+    onDrop,
+    onDropInside: () => setShouldShowChildren(true),
+    onDropTargetChange,
+    parentIds
+  });
+  const isSelected = (0, _react.useMemo)(() => (0, _SidebarItem2.isItemOrChildSelected)(item, selectedItemId), [item, selectedItemId]);
+  (0, _react.useEffect)(() => {
+    if (isCompact) {
+      setShouldShowChildren(false);
+    }
+  }, [isCompact]);
+  const handleClick = (0, _react.useCallback)(() => {
+    if (isDisabled || typeof onItemClick !== 'function') {
+      return;
+    }
+    onItemClick(id, parentIds);
+  }, [id, isDisabled, onItemClick, parentIds]);
+  const handleOpenIconClick = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    setShouldShowChildren(previousValue => !previousValue);
+  }, []);
+  const renderChildItem = (0, _react.useCallback)((childItem, childIndex) => /*#__PURE__*/_react.default.createElement(SidebarItem, {
+    key: childItem.id,
+    item: childItem,
+    index: childIndex,
+    parentIds: childParentIds,
+    shouldShowCollapsedLabel: false
+  }), [childParentIds]);
+  const children = (0, _react.useMemo)(() => {
+    if (!(childItems !== null && childItems !== void 0 && childItems.length)) {
+      return null;
+    }
+    return childItems.map(renderChildItem);
+  }, [childItems, renderChildItem]);
+  return /*#__PURE__*/_react.default.createElement(_SidebarItem.StyledSidebarItem, null, isReorderEnabled && /*#__PURE__*/_react.default.createElement(_SidebarGroup.StyledSidebarDropZone, {
+    $depth: parentIds.length,
+    $isActive: isBeforeDropTargetActive,
+    $isDragging: !!draggedItemId,
+    $placement: "before",
+    onDragOver: handleBeforeDragOver,
+    onDrop: handleBeforeDrop
+  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+    item: {
+      text: disabledReason ?? ''
+    },
+    isDisabled: !disabledReason,
+    shouldUseFullWidth: true
+  }, /*#__PURE__*/_react.default.createElement(_SidebarItem.StyledSidebarItemHead, {
+    ref: itemRef,
+    $shouldHighlight: !isDisabled && (isHovered || isSelected),
+    $isDisabled: isDisabled,
+    $hasDisabledReason: !!disabledReason,
+    $isDragging: isDragging,
+    $isReorderable: canDragItem,
+    draggable: canDragItem,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_SidebarItem.StyledSidebarItemHeadContent, null, /*#__PURE__*/_react.default.createElement(_SidebarItem.StyledSidebarItemIcon, null, imageUrl && /*#__PURE__*/_react.default.createElement(_SidebarItem.StyledSidebarItemIconImage, {
+    src: imageUrl
+  }), imageElement, icons && /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    icons: icons,
+    size: 21,
+    color: color
+  })), /*#__PURE__*/_react.default.createElement(_SidebarItem.StyledSidebarItemLabel, null, label)), !!children && !isCompact && !isDisabled && /*#__PURE__*/_react.default.createElement(_SidebarItem.StyledMotionSidebarOpenIcon, {
+    initial: false,
+    animate: {
+      rotate: shouldShowChildren ? 180 : 0
+    },
+    transition: {
+      type: 'tween'
+    },
+    onClick: handleOpenIconClick
+  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    icons: ['fa fa-chevron-down'],
+    color: color
+  })))), canDropInsideItem && /*#__PURE__*/_react.default.createElement(_SidebarGroup.StyledSidebarDropZone, {
+    $depth: childParentIds.length,
+    $isActive: isInsideDropTargetActive,
+    $isDragging: !!draggedItemId,
+    $placement: "inside",
+    onDragOver: handleInsideDragOver,
+    onDrop: handleInsideDrop
+  }), !!children && /*#__PURE__*/_react.default.createElement(_core.ExpandableContent, {
+    isOpen: shouldShowChildren
+  }, /*#__PURE__*/_react.default.createElement(_SidebarItem.StyledSidebarItemChildren, null, children, isReorderEnabled && childListEndTarget && /*#__PURE__*/_react.default.createElement(_SidebarGroup.StyledSidebarDropZone, {
+    $depth: childParentIds.length,
+    $isActive: isChildListEndTargetActive,
+    $isDragging: !!draggedItemId,
+    $placement: "after",
+    onDragOver: handleChildListEndDragOver,
+    onDrop: handleChildListEndDrop
+  }))), popupContainer && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_react2.AnimatePresence, {
+    initial: false
+  }, shouldRenderPopup && coordinates && /*#__PURE__*/_react.default.createElement(_SidebarItem.StyledSidebarItemPopup, {
+    $coordinates: coordinates
+  }, label)), popupContainer));
+};
+SidebarItem.displayName = 'SidebarItem';
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(SidebarItem);
+//# sourceMappingURL=SidebarItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.js","names":["_react","_interopRequireWildcard","require","_core","_SidebarItem","_SidebarItem2","_reactDom","_react2","_SidebarItem3","_SidebarGroup","_NavigationSidebar","_SidebarGroup2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SidebarItem","item","index","parentIds","shouldShowCollapsedLabel","shouldShowCollapsedLabelProp","children","childItems","disabledReason","icons","id","imageElement","imageUrl","isDisabled","label","shouldShowChildren","setShouldShowChildren","useState","color","isCompact","onItemClick","selectedItemId","useNavigationSidebarContext","draggedItemId","dropTarget","isReorderEnabled","onDragEnd","onDragStart","onDrop","onDropTargetChange","useSidebarGroupReorderContext","resolvedShouldShowCollapsedLabel","coordinates","handleMouseEnter","handleMouseLeave","isHovered","itemRef","popupContainer","shouldRenderPopup","useSidebarItemPopup","Boolean","canDragItem","canDropInsideItem","childParentIds","childListEndTarget","handleBeforeDragOver","handleBeforeDrop","handleChildListEndDragOver","handleChildListEndDrop","handleDragEnd","handleDragStart","handleInsideDragOver","handleInsideDrop","isBeforeDropTargetActive","isChildListEndTargetActive","isDragging","isInsideDropTargetActive","useSidebarItemReorder","onDropInside","isSelected","useMemo","isItemOrChildSelected","useEffect","handleClick","useCallback","handleOpenIconClick","event","stopPropagation","previousValue","renderChildItem","childItem","childIndex","createElement","key","length","map","StyledSidebarItem","StyledSidebarDropZone","$depth","$isActive","$isDragging","$placement","onDragOver","Tooltip","text","shouldUseFullWidth","StyledSidebarItemHead","ref","$shouldHighlight","$isDisabled","$hasDisabledReason","$isReorderable","draggable","onMouseEnter","onMouseLeave","onClick","StyledSidebarItemHeadContent","StyledSidebarItemIcon","StyledSidebarItemIconImage","src","Icon","size","StyledSidebarItemLabel","StyledMotionSidebarOpenIcon","initial","animate","rotate","transition","type","ExpandableContent","isOpen","StyledSidebarItemChildren","createPortal","AnimatePresence","StyledSidebarItemPopup","$coordinates","displayName","_default","exports","memo"],"sources":["../../../../../../../src/components/navigation-layout/navigation-sidebar/sidebar-group/sidebar-item/SidebarItem.tsx"],"sourcesContent":["import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport { ExpandableContent, Icon, Tooltip } from '@chayns-components/core';\nimport {\n    StyledSidebarItem,\n    StyledSidebarItemChildren,\n    StyledSidebarItemHead,\n    StyledSidebarItemHeadContent,\n    StyledSidebarItemIcon,\n    StyledSidebarItemIconImage,\n    StyledSidebarItemLabel,\n    StyledMotionSidebarOpenIcon,\n    StyledSidebarItemPopup,\n} from './SidebarItem.styles';\nimport { NavigationLayoutItem } from '../../../NavigationLayout.types';\nimport { isItemOrChildSelected } from './SidebarItem.utils';\nimport { createPortal } from 'react-dom';\nimport { AnimatePresence } from 'motion/react';\nimport { useSidebarItemPopup, useSidebarItemReorder } from './SidebarItem.hooks';\nimport { StyledSidebarDropZone } from '../SidebarGroup.styles';\nimport { useNavigationSidebarContext } from '../../NavigationSidebar.context';\nimport { useSidebarGroupReorderContext } from '../SidebarGroup.context';\n\ninterface SidebarItemProps {\n    item: NavigationLayoutItem;\n    index: number;\n    parentIds: NavigationLayoutItem['id'][];\n    shouldShowCollapsedLabel?: boolean;\n}\n\nconst SidebarItem: FC<SidebarItemProps> = ({\n    item,\n    index,\n    parentIds,\n    shouldShowCollapsedLabel: shouldShowCollapsedLabelProp,\n}) => {\n    const {\n        children: childItems,\n        disabledReason,\n        icons,\n        id,\n        imageElement,\n        imageUrl,\n        isDisabled,\n        label,\n    } = item;\n    const [shouldShowChildren, setShouldShowChildren] = useState(false);\n    const { color, isCompact, onItemClick, selectedItemId, shouldShowCollapsedLabel } =\n        useNavigationSidebarContext();\n    const {\n        draggedItemId,\n        dropTarget,\n        isReorderEnabled,\n        onDragEnd,\n        onDragStart,\n        onDrop,\n        onDropTargetChange,\n    } = useSidebarGroupReorderContext();\n    const resolvedShouldShowCollapsedLabel =\n        shouldShowCollapsedLabelProp ?? shouldShowCollapsedLabel;\n    const {\n        coordinates,\n        handleMouseEnter,\n        handleMouseLeave,\n        isHovered,\n        itemRef,\n        popupContainer,\n        shouldRenderPopup,\n    } = useSidebarItemPopup({\n        isDisabled: Boolean(isDisabled),\n        shouldShowCollapsedLabel: resolvedShouldShowCollapsedLabel,\n    });\n    const {\n        canDragItem,\n        canDropInsideItem,\n        childParentIds,\n        childListEndTarget,\n        handleBeforeDragOver,\n        handleBeforeDrop,\n        handleChildListEndDragOver,\n        handleChildListEndDrop,\n        handleDragEnd,\n        handleDragStart,\n        handleInsideDragOver,\n        handleInsideDrop,\n        isBeforeDropTargetActive,\n        isChildListEndTargetActive,\n        isDragging,\n        isInsideDropTargetActive,\n    } = useSidebarItemReorder({\n        childItems,\n        draggedItemId,\n        dropTarget,\n        id,\n        index,\n        isDisabled,\n        isReorderEnabled,\n        onDragEnd,\n        onDragStart,\n        onDrop,\n        onDropInside: () => setShouldShowChildren(true),\n        onDropTargetChange,\n        parentIds,\n    });\n\n    const isSelected = useMemo(\n        () => isItemOrChildSelected(item, selectedItemId),\n        [item, selectedItemId],\n    );\n\n    useEffect(() => {\n        if (isCompact) {\n            setShouldShowChildren(false);\n        }\n    }, [isCompact]);\n\n    const handleClick = useCallback(() => {\n        if (isDisabled || typeof onItemClick !== 'function') {\n            return;\n        }\n\n        onItemClick(id, parentIds);\n    }, [id, isDisabled, onItemClick, parentIds]);\n\n    const handleOpenIconClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n        setShouldShowChildren((previousValue) => !previousValue);\n    }, []);\n\n    const renderChildItem = useCallback(\n        (childItem: NavigationLayoutItem, childIndex: number) => (\n            <SidebarItem\n                key={childItem.id}\n                item={childItem}\n                index={childIndex}\n                parentIds={childParentIds}\n                shouldShowCollapsedLabel={false}\n            />\n        ),\n        [childParentIds],\n    );\n\n    const children = useMemo(() => {\n        if (!childItems?.length) {\n            return null;\n        }\n\n        return childItems.map(renderChildItem);\n    }, [childItems, renderChildItem]);\n\n    return (\n        <StyledSidebarItem>\n            {isReorderEnabled && (\n                <StyledSidebarDropZone\n                    $depth={parentIds.length}\n                    $isActive={isBeforeDropTargetActive}\n                    $isDragging={!!draggedItemId}\n                    $placement=\"before\"\n                    onDragOver={handleBeforeDragOver}\n                    onDrop={handleBeforeDrop}\n                />\n            )}\n            <Tooltip\n                item={{ text: disabledReason ?? '' }}\n                isDisabled={!disabledReason}\n                shouldUseFullWidth\n            >\n                <StyledSidebarItemHead\n                    ref={itemRef}\n                    $shouldHighlight={!isDisabled && (isHovered || isSelected)}\n                    $isDisabled={isDisabled}\n                    $hasDisabledReason={!!disabledReason}\n                    $isDragging={isDragging}\n                    $isReorderable={canDragItem}\n                    draggable={canDragItem}\n                    onDragEnd={handleDragEnd}\n                    onDragStart={handleDragStart}\n                    onMouseEnter={handleMouseEnter}\n                    onMouseLeave={handleMouseLeave}\n                    onClick={handleClick}\n                >\n                    <StyledSidebarItemHeadContent>\n                        <StyledSidebarItemIcon>\n                            {imageUrl && <StyledSidebarItemIconImage src={imageUrl} />}\n                            {imageElement}\n                            {icons && <Icon icons={icons} size={21} color={color} />}\n                        </StyledSidebarItemIcon>\n                        <StyledSidebarItemLabel>{label}</StyledSidebarItemLabel>\n                    </StyledSidebarItemHeadContent>\n                    {!!children && !isCompact && !isDisabled && (\n                        <StyledMotionSidebarOpenIcon\n                            initial={false}\n                            animate={{ rotate: shouldShowChildren ? 180 : 0 }}\n                            transition={{ type: 'tween' }}\n                            onClick={handleOpenIconClick}\n                        >\n                            <Icon icons={['fa fa-chevron-down']} color={color} />\n                        </StyledMotionSidebarOpenIcon>\n                    )}\n                </StyledSidebarItemHead>\n            </Tooltip>\n            {canDropInsideItem && (\n                <StyledSidebarDropZone\n                    $depth={childParentIds.length}\n                    $isActive={isInsideDropTargetActive}\n                    $isDragging={!!draggedItemId}\n                    $placement=\"inside\"\n                    onDragOver={handleInsideDragOver}\n                    onDrop={handleInsideDrop}\n                />\n            )}\n            {!!children && (\n                <ExpandableContent isOpen={shouldShowChildren}>\n                    <StyledSidebarItemChildren>\n                        {children}\n                        {isReorderEnabled && childListEndTarget && (\n                            <StyledSidebarDropZone\n                                $depth={childParentIds.length}\n                                $isActive={isChildListEndTargetActive}\n                                $isDragging={!!draggedItemId}\n                                $placement=\"after\"\n                                onDragOver={handleChildListEndDragOver}\n                                onDrop={handleChildListEndDrop}\n                            />\n                        )}\n                    </StyledSidebarItemChildren>\n                </ExpandableContent>\n            )}\n            {popupContainer &&\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {shouldRenderPopup && coordinates && (\n                            <StyledSidebarItemPopup $coordinates={coordinates}>\n                                {label}\n                            </StyledSidebarItemPopup>\n                        )}\n                    </AnimatePresence>,\n                    popupContainer,\n                )}\n        </StyledSidebarItem>\n    );\n};\n\nSidebarItem.displayName = 'SidebarItem';\n\nexport default memo(SidebarItem);\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSidebarItemPopup = exports.StyledSidebarItemLabel = exports.StyledSidebarItemIconImage = exports.StyledSidebarItemIcon = exports.StyledSidebarItemHeadContent = exports.StyledSidebarItemHead = exports.StyledSidebarItemChildren = exports.StyledSidebarItem = exports.StyledMotionSidebarOpenIcon = void 0;
+var _styledComponents = require("styled-components");
+var _react = require("motion/react");
+const StyledSidebarItem = exports.StyledSidebarItem = _styledComponents.styled.div`
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+`;
+const StyledSidebarItemHead = exports.StyledSidebarItemHead = _styledComponents.styled.div`
+    height: 42px;
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+
+    ${({
+  $isDisabled,
+  $hasDisabledReason,
+  $isReorderable
+}) => {
+  if ($isDisabled && $hasDisabledReason) {
+    return (0, _styledComponents.css)`
+                cursor: help;
+            `;
+  }
+  if ($isDisabled) {
+    return (0, _styledComponents.css)`
+                cursor: default;
+            `;
+  }
+  return (0, _styledComponents.css)`
+            cursor: ${$isReorderable ? 'grab' : 'pointer'};
+        `;
+}}
+
+    ${({
+  $isDragging
+}) => $isDragging && (0, _styledComponents.css)`
+            opacity: 0.55;
+            cursor: grabbing;
+        `}
+
+    ${({
+  $shouldHighlight
+}) => $shouldHighlight && (0, _styledComponents.css)`
+            background-color: rgba(30, 30, 30, 0.3);
+        `}
+`;
+const StyledSidebarItemHeadContent = exports.StyledSidebarItemHeadContent = _styledComponents.styled.div`
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-width: 0;
+`;
+const StyledSidebarItemPopup = exports.StyledSidebarItemPopup = _styledComponents.styled.div`
+    position: absolute;
+    pointer-events: none;
+    opacity: 1;
+    background-color: ${({
+  theme
+}) => theme['000']};
+    color: ${({
+  theme
+}) => theme.text};
+    border-radius: 4px;
+
+    min-height: 30px;
+    padding: 0 10px;
+    transition: opacity 0.3s;
+    display: flex;
+    align-items: center;
+    z-index: 2;
+    white-space: nowrap;
+
+    box-shadow: 1px 3px 8px rgb(0, 0, 0, 0.3);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+
+    top: ${({
+  $coordinates
+}) => $coordinates.y}px;
+    left: ${({
+  $coordinates
+}) => $coordinates.x}px;
+    transform: translateY(-50%);
+`;
+const StyledSidebarItemIcon = exports.StyledSidebarItemIcon = _styledComponents.styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    height: 100%;
+`;
+const StyledMotionSidebarOpenIcon = exports.StyledMotionSidebarOpenIcon = (0, _styledComponents.styled)(_react.motion.div)`
+    height: 30px;
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+`;
+const StyledSidebarItemIconImage = exports.StyledSidebarItemIconImage = _styledComponents.styled.img`
+    width: 28px;
+`;
+const StyledSidebarItemLabel = exports.StyledSidebarItemLabel = _styledComponents.styled.div`
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    flex: 1;
+    min-width: 0;
+`;
+const StyledSidebarItemChildren = exports.StyledSidebarItemChildren = _styledComponents.styled.div`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-top: 2px;
+
+    padding-left: 8px;
+`;
+//# sourceMappingURL=SidebarItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.styles.js","names":["_styledComponents","require","_react","StyledSidebarItem","exports","styled","div","StyledSidebarItemHead","$isDisabled","$hasDisabledReason","$isReorderable","css","$isDragging","$shouldHighlight","StyledSidebarItemHeadContent","StyledSidebarItemPopup","theme","text","$coordinates","y","x","StyledSidebarItemIcon","StyledMotionSidebarOpenIcon","motion","StyledSidebarItemIconImage","img","StyledSidebarItemLabel","StyledSidebarItemChildren"],"sources":["../../../../../../../src/components/navigation-layout/navigation-sidebar/sidebar-group/sidebar-item/SidebarItem.styles.ts"],"sourcesContent":["import { css, styled } from 'styled-components';\nimport { motion } from 'motion/react';\nimport { WithTheme } from '@chayns-components/core';\nimport { Coordinates } from './SidebarItem.utils';\n\nexport const StyledSidebarItem = styled.div`\n    position: relative;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\ntype StyledSidebarItemHeadProps = WithTheme<{\n    $shouldHighlight: boolean;\n    $hasDisabledReason: boolean;\n    $isDisabled?: boolean;\n    $isDragging?: boolean;\n    $isReorderable?: boolean;\n}>;\n\nexport const StyledSidebarItemHead = styled.div<StyledSidebarItemHeadProps>`\n    height: 42px;\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n\n    ${({ $isDisabled, $hasDisabledReason, $isReorderable }) => {\n        if ($isDisabled && $hasDisabledReason) {\n            return css`\n                cursor: help;\n            `;\n        }\n\n        if ($isDisabled) {\n            return css`\n                cursor: default;\n            `;\n        }\n\n        return css`\n            cursor: ${$isReorderable ? 'grab' : 'pointer'};\n        `;\n    }}\n\n    ${({ $isDragging }) =>\n        $isDragging &&\n        css`\n            opacity: 0.55;\n            cursor: grabbing;\n        `}\n\n    ${({ $shouldHighlight }) =>\n        $shouldHighlight &&\n        css`\n            background-color: rgba(30, 30, 30, 0.3);\n        `}\n`;\n\nexport const StyledSidebarItemHeadContent = styled.div`\n    display: flex;\n    align-items: center;\n    height: 100%;\n    min-width: 0;\n`;\n\ntype StyledSidebarItemPopupProps = WithTheme<{\n    $coordinates: Coordinates;\n}>;\n\nexport const StyledSidebarItemPopup = styled.div<StyledSidebarItemPopupProps>`\n    position: absolute;\n    pointer-events: none;\n    opacity: 1;\n    background-color: ${({ theme }) => theme['000']};\n    color: ${({ theme }) => theme.text};\n    border-radius: 4px;\n\n    min-height: 30px;\n    padding: 0 10px;\n    transition: opacity 0.3s;\n    display: flex;\n    align-items: center;\n    z-index: 2;\n    white-space: nowrap;\n\n    box-shadow: 1px 3px 8px rgb(0, 0, 0, 0.3);\n    border: 1px solid rgba(0, 0, 0, 0.15);\n\n    top: ${({ $coordinates }) => $coordinates.y}px;\n    left: ${({ $coordinates }) => $coordinates.x}px;\n    transform: translateY(-50%);\n`;\n\nexport const StyledSidebarItemIcon = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    height: 100%;\n`;\n\nexport const StyledMotionSidebarOpenIcon = styled(motion.div)`\n    height: 30px;\n    width: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n`;\n\nexport const StyledSidebarItemIconImage = styled.img`\n    width: 28px;\n`;\n\nexport const StyledSidebarItemLabel = styled.div`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n\n    flex: 1;\n    min-width: 0;\n`;\n\nexport const StyledSidebarItemChildren = styled.div`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding-top: 2px;\n\n    padding-left: 8px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAIO,MAAME,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,wBAAM,CAACC,GAAG;AAC3C;AACA;AACA;AACA;AACA,CAAC;AAUM,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAGF,wBAAM,CAACC,GAA+B;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEE;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,MAAM,CAAC;EAAEA,WAAW;EAAEC,kBAAkB;EAAEC;AAAe,CAAC,KAAK;EACvD,IAAIF,WAAW,IAAIC,kBAAkB,EAAE;IACnC,OAAO,IAAAE,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIH,WAAW,EAAE;IACb,OAAO,IAAAG,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAO,IAAAA,qBAAG;AAClB,sBAAsBD,cAAc,GAAG,MAAM,GAAG,SAAS;AACzD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEE;AAAY,CAAC,KACdA,WAAW,IACX,IAAAD,qBAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEE;AAAiB,CAAC,KACnBA,gBAAgB,IAChB,IAAAF,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMG,4BAA4B,GAAAV,OAAA,CAAAU,4BAAA,GAAGT,wBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMS,sBAAsB,GAAAX,OAAA,CAAAW,sBAAA,GAAGV,wBAAM,CAACC,GAAgC;AAC7E;AACA;AACA;AACA,wBAAwB,CAAC;EAAEU;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACC,IAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEC;AAAa,CAAC,KAAKA,YAAY,CAACC,CAAC;AAC/C,YAAY,CAAC;EAAED;AAAa,CAAC,KAAKA,YAAY,CAACE,CAAC;AAChD;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAjB,OAAA,CAAAiB,qBAAA,GAAGhB,wBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMgB,2BAA2B,GAAAlB,OAAA,CAAAkB,2BAAA,GAAG,IAAAjB,wBAAM,EAACkB,aAAM,CAACjB,GAAG,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMkB,0BAA0B,GAAApB,OAAA,CAAAoB,0BAAA,GAAGnB,wBAAM,CAACoB,GAAG;AACpD;AACA,CAAC;AAEM,MAAMC,sBAAsB,GAAAtB,OAAA,CAAAsB,sBAAA,GAAGrB,wBAAM,CAACC,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMqB,yBAAyB,GAAAvB,OAAA,CAAAuB,yBAAA,GAAGtB,wBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isItemOrChildSelected = exports.getSidebarItemPopupCoordinates = exports.getScrollableAncestorElements = exports.areCoordinatesEqual = void 0;
+const SCROLLABLE_OVERFLOW_VALUES = ['auto', 'scroll', 'overlay'];
+const isScrollableElement = element => {
+  const {
+    overflowX,
+    overflowY
+  } = window.getComputedStyle(element);
+  return [overflowX, overflowY].some(value => SCROLLABLE_OVERFLOW_VALUES.includes(value));
+};
+const areCoordinatesEqual = ({
+  coordinatesA,
+  coordinatesB
+}) => {
+  if (!coordinatesA || !coordinatesB) {
+    return coordinatesA === coordinatesB;
+  }
+  return coordinatesA.x === coordinatesB.x && coordinatesA.y === coordinatesB.y;
+};
+exports.areCoordinatesEqual = areCoordinatesEqual;
+const getSidebarItemPopupCoordinates = ({
+  container,
+  item,
+  offset = 5
+}) => {
+  const {
+    left: itemLeft,
+    top: itemTop,
+    width,
+    height
+  } = item.getBoundingClientRect();
+  const {
+    left: containerLeft,
+    top: containerTop
+  } = container.getBoundingClientRect();
+  return {
+    x: Math.round(itemLeft - containerLeft + width + offset),
+    y: Math.round(itemTop - containerTop + height / 2)
+  };
+};
+exports.getSidebarItemPopupCoordinates = getSidebarItemPopupCoordinates;
+const getScrollableAncestorElements = ({
+  element,
+  boundaryElement
+}) => {
+  const scrollableElements = [];
+  let currentElement = element.parentElement;
+  while (currentElement) {
+    if (isScrollableElement(currentElement)) {
+      scrollableElements.push(currentElement);
+    }
+    if (currentElement === boundaryElement) {
+      break;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return scrollableElements;
+};
+exports.getScrollableAncestorElements = getScrollableAncestorElements;
+const isItemOrChildSelected = (item, selectedId) => {
+  var _item$children;
+  if (!selectedId) {
+    return false;
+  }
+  if (item.id === selectedId) {
+    return true;
+  }
+  if (!((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length)) {
+    return false;
+  }
+  return item.children.some(child => isItemOrChildSelected(child, selectedId));
+};
+exports.isItemOrChildSelected = isItemOrChildSelected;
+//# sourceMappingURL=SidebarItem.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.utils.js","names":["SCROLLABLE_OVERFLOW_VALUES","isScrollableElement","element","overflowX","overflowY","window","getComputedStyle","some","value","includes","areCoordinatesEqual","coordinatesA","coordinatesB","x","y","exports","getSidebarItemPopupCoordinates","container","item","offset","left","itemLeft","top","itemTop","width","height","getBoundingClientRect","containerLeft","containerTop","Math","round","getScrollableAncestorElements","boundaryElement","scrollableElements","currentElement","parentElement","push","isItemOrChildSelected","selectedId","_item$children","id","children","length","child"],"sources":["../../../../../../../src/components/navigation-layout/navigation-sidebar/sidebar-group/sidebar-item/SidebarItem.utils.ts"],"sourcesContent":["import { NavigationLayoutItem } from '../../../NavigationLayout.types';\n\nexport interface Coordinates {\n    x: number;\n    y: number;\n}\n\ninterface AreCoordinatesEqualOptions {\n    coordinatesA: Coordinates | null;\n    coordinatesB: Coordinates | null;\n}\n\ninterface GetSidebarItemPopupCoordinatesOptions {\n    container: HTMLElement;\n    item: HTMLElement;\n    offset?: number;\n}\n\ninterface GetScrollableAncestorElementsOptions {\n    element: HTMLElement;\n    boundaryElement?: HTMLElement | null;\n}\n\nconst SCROLLABLE_OVERFLOW_VALUES = ['auto', 'scroll', 'overlay'];\n\nconst isScrollableElement = (element: HTMLElement): boolean => {\n    const { overflowX, overflowY } = window.getComputedStyle(element);\n\n    return [overflowX, overflowY].some((value) => SCROLLABLE_OVERFLOW_VALUES.includes(value));\n};\n\nexport const areCoordinatesEqual = ({\n    coordinatesA,\n    coordinatesB,\n}: AreCoordinatesEqualOptions): boolean => {\n    if (!coordinatesA || !coordinatesB) {\n        return coordinatesA === coordinatesB;\n    }\n\n    return coordinatesA.x === coordinatesB.x && coordinatesA.y === coordinatesB.y;\n};\n\nexport const getSidebarItemPopupCoordinates = ({\n    container,\n    item,\n    offset = 5,\n}: GetSidebarItemPopupCoordinatesOptions): Coordinates => {\n    const { left: itemLeft, top: itemTop, width, height } = item.getBoundingClientRect();\n    const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n    return {\n        x: Math.round(itemLeft - containerLeft + width + offset),\n        y: Math.round(itemTop - containerTop + height / 2),\n    };\n};\n\nexport const getScrollableAncestorElements = ({\n    element,\n    boundaryElement,\n}: GetScrollableAncestorElementsOptions): HTMLElement[] => {\n    const scrollableElements: HTMLElement[] = [];\n    let currentElement = element.parentElement;\n\n    while (currentElement) {\n        if (isScrollableElement(currentElement)) {\n            scrollableElements.push(currentElement);\n        }\n\n        if (currentElement === boundaryElement) {\n            break;\n        }\n\n        currentElement = currentElement.parentElement;\n    }\n\n    return scrollableElements;\n};\n\nexport const isItemOrChildSelected = (item: NavigationLayoutItem, selectedId?: string): boolean => {\n    if (!selectedId) {\n        return false;\n    }\n\n    if (item.id === selectedId) {\n        return true;\n    }\n\n    if (!item.children?.length) {\n        return false;\n    }\n\n    return item.children.some((child) => isItemOrChildSelected(child, selectedId));\n};\n"],"mappings":";;;;;;AAuBA,MAAMA,0BAA0B,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC;AAEhE,MAAMC,mBAAmB,GAAIC,OAAoB,IAAc;EAC3D,MAAM;IAAEC,SAAS;IAAEC;EAAU,CAAC,GAAGC,MAAM,CAACC,gBAAgB,CAACJ,OAAO,CAAC;EAEjE,OAAO,CAACC,SAAS,EAAEC,SAAS,CAAC,CAACG,IAAI,CAAEC,KAAK,IAAKR,0BAA0B,CAACS,QAAQ,CAACD,KAAK,CAAC,CAAC;AAC7F,CAAC;AAEM,MAAME,mBAAmB,GAAGA,CAAC;EAChCC,YAAY;EACZC;AACwB,CAAC,KAAc;EACvC,IAAI,CAACD,YAAY,IAAI,CAACC,YAAY,EAAE;IAChC,OAAOD,YAAY,KAAKC,YAAY;EACxC;EAEA,OAAOD,YAAY,CAACE,CAAC,KAAKD,YAAY,CAACC,CAAC,IAAIF,YAAY,CAACG,CAAC,KAAKF,YAAY,CAACE,CAAC;AACjF,CAAC;AAACC,OAAA,CAAAL,mBAAA,GAAAA,mBAAA;AAEK,MAAMM,8BAA8B,GAAGA,CAAC;EAC3CC,SAAS;EACTC,IAAI;EACJC,MAAM,GAAG;AAC0B,CAAC,KAAkB;EACtD,MAAM;IAAEC,IAAI,EAAEC,QAAQ;IAAEC,GAAG,EAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGP,IAAI,CAACQ,qBAAqB,CAAC,CAAC;EACpF,MAAM;IAAEN,IAAI,EAAEO,aAAa;IAAEL,GAAG,EAAEM;EAAa,CAAC,GAAGX,SAAS,CAACS,qBAAqB,CAAC,CAAC;EAEpF,OAAO;IACHb,CAAC,EAAEgB,IAAI,CAACC,KAAK,CAACT,QAAQ,GAAGM,aAAa,GAAGH,KAAK,GAAGL,MAAM,CAAC;IACxDL,CAAC,EAAEe,IAAI,CAACC,KAAK,CAACP,OAAO,GAAGK,YAAY,GAAGH,MAAM,GAAG,CAAC;EACrD,CAAC;AACL,CAAC;AAACV,OAAA,CAAAC,8BAAA,GAAAA,8BAAA;AAEK,MAAMe,6BAA6B,GAAGA,CAAC;EAC1C7B,OAAO;EACP8B;AACkC,CAAC,KAAoB;EACvD,MAAMC,kBAAiC,GAAG,EAAE;EAC5C,IAAIC,cAAc,GAAGhC,OAAO,CAACiC,aAAa;EAE1C,OAAOD,cAAc,EAAE;IACnB,IAAIjC,mBAAmB,CAACiC,cAAc,CAAC,EAAE;MACrCD,kBAAkB,CAACG,IAAI,CAACF,cAAc,CAAC;IAC3C;IAEA,IAAIA,cAAc,KAAKF,eAAe,EAAE;MACpC;IACJ;IAEAE,cAAc,GAAGA,cAAc,CAACC,aAAa;EACjD;EAEA,OAAOF,kBAAkB;AAC7B,CAAC;AAAClB,OAAA,CAAAgB,6BAAA,GAAAA,6BAAA;AAEK,MAAMM,qBAAqB,GAAGA,CAACnB,IAA0B,EAAEoB,UAAmB,KAAc;EAAA,IAAAC,cAAA;EAC/F,IAAI,CAACD,UAAU,EAAE;IACb,OAAO,KAAK;EAChB;EAEA,IAAIpB,IAAI,CAACsB,EAAE,KAAKF,UAAU,EAAE;IACxB,OAAO,IAAI;EACf;EAEA,IAAI,GAAAC,cAAA,GAACrB,IAAI,CAACuB,QAAQ,cAAAF,cAAA,eAAbA,cAAA,CAAeG,MAAM,GAAE;IACxB,OAAO,KAAK;EAChB;EAEA,OAAOxB,IAAI,CAACuB,QAAQ,CAAClC,IAAI,CAAEoC,KAAK,IAAKN,qBAAqB,CAACM,KAAK,EAAEL,UAAU,CAAC,CAAC;AAClF,CAAC;AAACvB,OAAA,CAAAsB,qBAAA,GAAAA,qBAAA","ignoreList":[]}

package/lib/cjs/components/split-layout/SplitLayout.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SplitLayout = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ResizeHandle = _interopRequireDefault(require("./resize-handle/ResizeHandle"));
+var _SplitLayout = require("./SplitLayout.styles");
+var _SplitLayout2 = require("./SplitLayout.types");
+var _SplitLayout3 = require("./SplitLayout.utils");
+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 SplitLayout = ({
+  direction = _SplitLayout2.SplitLayoutDirection.HORIZONTAL,
+  handleSize = 2,
+  views,
+  onChange,
+  fullScreenViewId
+}) => {
+  const ref = (0, _react.useRef)(null);
+  const [sizes, setSizes] = (0, _react.useState)({});
+  const [containerSize, setContainerSize] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (!ref.current) {
+      return () => {};
+    }
+    const element = ref.current;
+    const updateSize = () => {
+      setContainerSize((0, _SplitLayout3.getContainerSizeByDirection)(element, direction));
+    };
+    updateSize();
+    const observer = new ResizeObserver(() => {
+      updateSize();
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [direction]);
+  const viewIdsToDisplay = (0, _react.useMemo)(() => (0, _SplitLayout3.getVisibleViewIds)({
+    views,
+    containerSize
+  }), [views, containerSize]);
+  const handleResize = (0, _react.useCallback)((key, delta) => {
+    setSizes(prev => {
+      var _views$key, _views$key2, _views$key3;
+      const nextSize = (prev[key] ?? ((_views$key = views[key]) === null || _views$key === void 0 ? void 0 : _views$key.defaultSize) ?? 0) + delta;
+      const minSize = ((_views$key2 = views[key]) === null || _views$key2 === void 0 ? void 0 : _views$key2.minSize) ?? 0;
+      const maxSize = ((_views$key3 = views[key]) === null || _views$key3 === void 0 ? void 0 : _views$key3.maxSize) ?? Number.MAX_SAFE_INTEGER;
+      const clampedSize = Math.min(Math.max(nextSize, minSize), maxSize);
+      if (typeof onChange === 'function') {
+        onChange(key, clampedSize);
+      }
+      return {
+        ...prev,
+        [key]: clampedSize
+      };
+    });
+  }, [onChange, views]);
+  const content = (0, _react.useMemo)(() => {
+    if (typeof fullScreenViewId === 'string' && views[fullScreenViewId]) {
+      return views[fullScreenViewId].component;
+    }
+    return viewIdsToDisplay.map((key, index) => {
+      const view = views[key];
+      if (!view) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+        key: key
+      }, /*#__PURE__*/_react.default.createElement(_SplitLayout.StyledSplitLayoutPane, {
+        $direction: direction,
+        $size: sizes[key] ?? view.defaultSize ?? view.minSize ?? view.maxSize
+      }, view.component), index < viewIdsToDisplay.length - 1 && /*#__PURE__*/_react.default.createElement(_ResizeHandle.default, {
+        size: handleSize,
+        direction: direction,
+        onDrag: delta => handleResize(key, delta)
+      }));
+    });
+  }, [direction, fullScreenViewId, handleResize, handleSize, sizes, viewIdsToDisplay, views]);
+  return /*#__PURE__*/_react.default.createElement(_SplitLayout.StyledSplitLayout, {
+    ref: ref,
+    $direction: direction
+  }, content);
+};
+exports.SplitLayout = SplitLayout;
+SplitLayout.displayName = 'SplitLayout';
+var _default = exports.default = SplitLayout;
+//# sourceMappingURL=SplitLayout.js.map

package/lib/cjs/components/split-layout/SplitLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.js","names":["_react","_interopRequireWildcard","require","_ResizeHandle","_interopRequireDefault","_SplitLayout","_SplitLayout2","_SplitLayout3","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SplitLayout","direction","SplitLayoutDirection","HORIZONTAL","handleSize","views","onChange","fullScreenViewId","ref","useRef","sizes","setSizes","useState","containerSize","setContainerSize","useEffect","current","element","updateSize","getContainerSizeByDirection","observer","ResizeObserver","observe","disconnect","viewIdsToDisplay","useMemo","getVisibleViewIds","handleResize","useCallback","key","delta","prev","_views$key","_views$key2","_views$key3","nextSize","defaultSize","minSize","maxSize","Number","MAX_SAFE_INTEGER","clampedSize","Math","min","max","content","component","map","index","view","createElement","Fragment","StyledSplitLayoutPane","$direction","$size","length","size","onDrag","StyledSplitLayout","exports","displayName","_default"],"sources":["../../../../src/components/split-layout/SplitLayout.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState, type FC } from 'react';\nimport ResizeHandle from './resize-handle/ResizeHandle';\nimport { StyledSplitLayout, StyledSplitLayoutPane } from './SplitLayout.styles';\nimport { SplitLayoutDirection, type SplitLayoutProps } from './SplitLayout.types';\nimport { getContainerSizeByDirection, getVisibleViewIds } from './SplitLayout.utils';\n\nexport const SplitLayout: FC<SplitLayoutProps> = ({\n    direction = SplitLayoutDirection.HORIZONTAL,\n    handleSize = 2,\n    views,\n    onChange,\n    fullScreenViewId,\n}) => {\n    const ref = useRef<HTMLDivElement | null>(null);\n    const [sizes, setSizes] = useState<Record<string, number>>({});\n    const [containerSize, setContainerSize] = useState(0);\n\n    useEffect(() => {\n        if (!ref.current) {\n            return () => {};\n        }\n\n        const element = ref.current;\n\n        const updateSize = (): void => {\n            setContainerSize(getContainerSizeByDirection(element, direction));\n        };\n\n        updateSize();\n\n        const observer = new ResizeObserver(() => {\n            updateSize();\n        });\n\n        observer.observe(element);\n\n        return () => {\n            observer.disconnect();\n        };\n    }, [direction]);\n\n    const viewIdsToDisplay = useMemo(\n        () =>\n            getVisibleViewIds({\n                views,\n                containerSize,\n            }),\n        [views, containerSize],\n    );\n\n    const handleResize = useCallback(\n        (key: string, delta: number) => {\n            setSizes((prev) => {\n                const nextSize = (prev[key] ?? views[key]?.defaultSize ?? 0) + delta;\n\n                const minSize = views[key]?.minSize ?? 0;\n                const maxSize = views[key]?.maxSize ?? Number.MAX_SAFE_INTEGER;\n\n                const clampedSize = Math.min(Math.max(nextSize, minSize), maxSize);\n\n                if (typeof onChange === 'function') {\n                    onChange(key, clampedSize);\n                }\n\n                return {\n                    ...prev,\n                    [key]: clampedSize,\n                };\n            });\n        },\n        [onChange, views],\n    );\n\n    const content = useMemo(() => {\n        if (typeof fullScreenViewId === 'string' && views[fullScreenViewId]) {\n            return views[fullScreenViewId].component;\n        }\n\n        return viewIdsToDisplay.map((key, index) => {\n            const view = views[key];\n\n            if (!view) {\n                return null;\n            }\n\n            return (\n                <React.Fragment key={key}>\n                    <StyledSplitLayoutPane\n                        $direction={direction}\n                        $size={sizes[key] ?? view.defaultSize ?? view.minSize ?? view.maxSize}\n                    >\n                        {view.component}\n                    </StyledSplitLayoutPane>\n\n                    {index < viewIdsToDisplay.length - 1 && (\n                        <ResizeHandle\n                            size={handleSize}\n                            direction={direction}\n                            onDrag={(delta) => handleResize(key, delta)}\n                        />\n                    )}\n                </React.Fragment>\n            );\n        });\n    }, [direction, fullScreenViewId, handleResize, handleSize, sizes, viewIdsToDisplay, views]);\n\n    return (\n        <StyledSplitLayout ref={ref} $direction={direction}>\n            {content}\n        </StyledSplitLayout>\n    );\n};\n\nSplitLayout.displayName = 'SplitLayout';\n\nexport default SplitLayout;\n"],"mappings":"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","ignoreList":[]}