@chayns-components/navigation 5.0.64 → 5.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.js","names":["React","memo","useMemo","StyledSidebarDropZone","StyledSidebarGroup","SidebarItem","SidebarGroupReorderProvider","useSidebarGroupReorder","useNavigationSidebarContext","useNavigationLayoutContext","SidebarGroup","groupId","items","isReorderable","isCompact","onItemReorder","draggedItemId","dropTarget","isDragging","isGroupEndTargetActive","isReorderEnabled","handleDragEnd","handleDragStart","handleDrop","handleDropTargetChange","handleGroupDragOver","handleGroupDrop","handleGroupEndDragOver","handleGroupEndDrop","contextValue","onDragEnd","onDragStart","onDrop","onDropTargetChange","content","map","item","index","createElement","key","id","parentIds","value","onDragOver","$isActive","$isDragging","$placement","displayName"],"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":"AAAA,OAAOA,KAAK,IAAQC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAChD,SAASC,qBAAqB,EAAEC,kBAAkB,QAAQ,uBAAuB;AAEjF,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,sBAAsB,QAAQ,sBAAsB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,SAASC,0BAA0B,QAAQ,gCAAgC;AAQ3E,MAAMC,YAAmC,GAAGA,CAAC;EAAEC,OAAO;EAAEC,KAAK;EAAEC;AAAc,CAAC,KAAK;EAC/E,MAAM;IAAEC;EAAU,CAAC,GAAGN,2BAA2B,CAAC,CAAC;EACnD,MAAM;IAAEO;EAAc,CAAC,GAAGN,0BAA0B,CAAC,CAAC;EACtD,MAAM;IACFO,aAAa;IACbC,UAAU;IACVC,UAAU;IACVC,sBAAsB;IACtBC,gBAAgB;IAChBC,aAAa;IACbC,eAAe;IACfC,UAAU;IACVC,sBAAsB;IACtBC,mBAAmB;IACnBC,eAAe;IACfC,sBAAsB;IACtBC;EACJ,CAAC,GAAGrB,sBAAsB,CAAC;IACvBI,OAAO;IACPG,SAAS;IACTD,aAAa;IACbD,KAAK;IACLG;EACJ,CAAC,CAAC;EAEF,MAAMc,YAAY,GAAG3B,OAAO,CACxB,OAAO;IACHc,aAAa;IACbC,UAAU;IACVC,UAAU;IACVE,gBAAgB;IAChBU,SAAS,EAAET,aAAa;IACxBU,WAAW,EAAET,eAAe;IAC5BU,MAAM,EAAET,UAAU;IAClBU,kBAAkB,EAAET;EACxB,CAAC,CAAC,EACF,CACIR,aAAa,EACbC,UAAU,EACVI,aAAa,EACbC,eAAe,EACfC,UAAU,EACVC,sBAAsB,EACtBN,UAAU,EACVE,gBAAgB,CAExB,CAAC;EAED,MAAMc,OAAO,GAAGhC,OAAO,CACnB,MACIU,KAAK,CAACuB,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBAClBrC,KAAA,CAAAsC,aAAA,CAACjC,WAAW;IAACkC,GAAG,EAAEH,IAAI,CAACI,EAAG;IAACJ,IAAI,EAAEA,IAAK;IAACC,KAAK,EAAEA,KAAM;IAACI,SAAS,EAAE;EAAG,CAAE,CACxE,CAAC,EACN,CAAC7B,KAAK,CACV,CAAC;EAED,oBACIZ,KAAA,CAAAsC,aAAA,CAAChC,2BAA2B;IAACoC,KAAK,EAAEb;EAAa,gBAC7C7B,KAAA,CAAAsC,aAAA,CAAClC,kBAAkB;IAACuC,UAAU,EAAElB,mBAAoB;IAACO,MAAM,EAAEN;EAAgB,GACxEQ,OAAO,EACPd,gBAAgB,iBACbpB,KAAA,CAAAsC,aAAA,CAACnC,qBAAqB;IAClByC,SAAS,EAAEzB,sBAAuB;IAClC0B,WAAW,EAAE3B,UAAW;IACxB4B,UAAU,EAAC,OAAO;IAClBH,UAAU,EAAEhB,sBAAuB;IACnCK,MAAM,EAAEJ;EAAmB,CAC9B,CAEW,CACK,CAAC;AAEtC,CAAC;AAEDlB,YAAY,CAACqC,WAAW,GAAG,cAAc;AAEzC,4BAAe9C,IAAI,CAACS,YAAY,CAAC","ignoreList":[]}

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

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+export const StyledSidebarGroup = styled.div`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+`;
+export const StyledSidebarDropZone = styled.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/esm/components/navigation-layout/navigation-sidebar/sidebar-group/SidebarGroup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarGroup.styles.js","names":["styled","StyledSidebarGroup","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,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMC,qBAAqB,GAAGH,MAAM,CAACE,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/esm/components/navigation-layout/navigation-sidebar/sidebar-group/sidebar-item/SidebarItem.hooks.js

@@ -0,0 +1,257 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { areCoordinatesEqual, getScrollableAncestorElements, getSidebarItemPopupCoordinates } from './SidebarItem.utils';
+import { isNavigationLayoutReorderTargetEqual } from '../../../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');
+};
+export const useSidebarItemPopup = ({
+  isDisabled,
+  shouldShowCollapsedLabel
+}) => {
+  const [coordinates, setCoordinates] = useState(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [popupContainer, setPopupContainer] = useState(null);
+  const animationFrameIdRef = useRef(null);
+  const lastCoordinatesRef = useRef(null);
+  const itemRef = useRef(null);
+  const resetCoordinates = useCallback(() => {
+    lastCoordinatesRef.current = null;
+    setCoordinates(null);
+  }, []);
+  const resolvePopupContainer = useCallback(() => {
+    const nextContainer = resolveSidebarContainer(itemRef.current);
+    setPopupContainer(previousContainer => previousContainer === nextContainer ? previousContainer : nextContainer);
+    return nextContainer;
+  }, []);
+  const updateCoordinates = useCallback(() => {
+    const nextContainer = popupContainer ?? resolvePopupContainer();
+    const itemElement = itemRef.current;
+    if (!nextContainer || !itemElement) {
+      resetCoordinates();
+      return;
+    }
+    const nextCoordinates = getSidebarItemPopupCoordinates({
+      container: nextContainer,
+      item: itemElement
+    });
+    if (areCoordinatesEqual({
+      coordinatesA: lastCoordinatesRef.current,
+      coordinatesB: nextCoordinates
+    })) {
+      return;
+    }
+    lastCoordinatesRef.current = nextCoordinates;
+    setCoordinates(nextCoordinates);
+  }, [popupContainer, resetCoordinates, resolvePopupContainer]);
+  const scheduleCoordinatesUpdate = useCallback(() => {
+    if (animationFrameIdRef.current !== null) {
+      return;
+    }
+    animationFrameIdRef.current = requestAnimationFrame(() => {
+      animationFrameIdRef.current = null;
+      updateCoordinates();
+    });
+  }, [updateCoordinates]);
+  const handleMouseEnter = useCallback(() => {
+    resolvePopupContainer();
+    setIsHovered(true);
+    scheduleCoordinatesUpdate();
+  }, [resolvePopupContainer, scheduleCoordinatesUpdate]);
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+    resetCoordinates();
+  }, [resetCoordinates]);
+  useEffect(() => {
+    resolvePopupContainer();
+  }, [resolvePopupContainer]);
+  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?.observe(nextContainer);
+    resizeObserver?.observe(itemElement);
+    const scrollableElements = 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?.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
+  };
+};
+export const useSidebarItemReorder = ({
+  childItems,
+  draggedItemId,
+  dropTarget,
+  id,
+  index,
+  isDisabled,
+  isReorderEnabled,
+  onDragEnd,
+  onDragStart,
+  onDrop,
+  onDropInside,
+  onDropTargetChange,
+  parentIds
+}) => {
+  const childParentIds = useMemo(() => [...parentIds, id], [id, parentIds]);
+  const canDragItem = isReorderEnabled && !isDisabled;
+  const canDropInsideItem = isReorderEnabled && !isDisabled;
+  const currentItem = useMemo(() => ({
+    itemId: id,
+    parentIds,
+    index
+  }), [id, index, parentIds]);
+  const beforeTarget = useMemo(() => ({
+    itemId: id,
+    parentIds,
+    index,
+    placement: 'before'
+  }), [id, index, parentIds]);
+  const insideTarget = useMemo(() => ({
+    itemId: id,
+    parentIds: childParentIds,
+    index: childItems?.length ?? 0,
+    placement: 'inside'
+  }), [childItems, childParentIds, id]);
+  const childListEndTarget = useMemo(() => {
+    const lastChild = childItems?.[childItems.length - 1];
+    if (!lastChild) {
+      return null;
+    }
+    return {
+      itemId: lastChild.id,
+      parentIds: childParentIds,
+      index: childItems.length,
+      placement: 'after'
+    };
+  }, [childItems, childParentIds]);
+  const isBeforeDropTargetActive = useMemo(() => isNavigationLayoutReorderTargetEqual({
+    targetA: dropTarget,
+    targetB: beforeTarget
+  }), [beforeTarget, dropTarget]);
+  const isInsideDropTargetActive = useMemo(() => isNavigationLayoutReorderTargetEqual({
+    targetA: dropTarget,
+    targetB: insideTarget
+  }), [dropTarget, insideTarget]);
+  const isChildListEndTargetActive = useMemo(() => isNavigationLayoutReorderTargetEqual({
+    targetA: dropTarget,
+    targetB: childListEndTarget
+  }), [childListEndTarget, dropTarget]);
+  const handleDragStart = useCallback(event => {
+    if (!canDragItem) {
+      return;
+    }
+    onDragStart(event, currentItem);
+  }, [canDragItem, currentItem, onDragStart]);
+  const handleResolvedDragEnd = useCallback(() => {
+    if (!canDragItem) {
+      return;
+    }
+    onDragEnd();
+  }, [canDragItem, onDragEnd]);
+  const handleBeforeDragOver = useCallback(event => {
+    event.preventDefault();
+    setDragMoveEffect(event);
+    onDropTargetChange(beforeTarget);
+  }, [beforeTarget, onDropTargetChange]);
+  const handleBeforeDrop = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    onDrop(beforeTarget);
+  }, [beforeTarget, onDrop]);
+  const handleInsideDragOver = useCallback(event => {
+    if (!canDropInsideItem) {
+      return;
+    }
+    event.preventDefault();
+    setDragMoveEffect(event);
+    onDropTargetChange(insideTarget);
+  }, [canDropInsideItem, insideTarget, onDropTargetChange]);
+  const handleInsideDrop = useCallback(event => {
+    if (!canDropInsideItem) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    onDropInside?.();
+    onDrop(insideTarget);
+  }, [canDropInsideItem, insideTarget, onDrop, onDropInside]);
+  const handleChildListEndDragOver = useCallback(event => {
+    if (!childListEndTarget) {
+      return;
+    }
+    event.preventDefault();
+    setDragMoveEffect(event);
+    onDropTargetChange(childListEndTarget);
+  }, [childListEndTarget, onDropTargetChange]);
+  const handleChildListEndDrop = 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
+  };
+};
+//# sourceMappingURL=SidebarItem.hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.hooks.js","names":["useCallback","useEffect","useMemo","useRef","useState","areCoordinatesEqual","getScrollableAncestorElements","getSidebarItemPopupCoordinates","isNavigationLayoutReorderTargetEqual","setDragMoveEffect","event","dataTransfer","dropEffect","resolveSidebarContainer","item","closest","document","getElementById","useSidebarItemPopup","isDisabled","shouldShowCollapsedLabel","coordinates","setCoordinates","isHovered","setIsHovered","popupContainer","setPopupContainer","animationFrameIdRef","lastCoordinatesRef","itemRef","resetCoordinates","current","resolvePopupContainer","nextContainer","previousContainer","updateCoordinates","itemElement","nextCoordinates","container","coordinatesA","coordinatesB","scheduleCoordinatesUpdate","requestAnimationFrame","handleMouseEnter","handleMouseLeave","undefined","resizeObserver","ResizeObserver","observe","scrollableElements","element","boundaryElement","forEach","addEventListener","passive","window","removeEventListener","disconnect","cancelAnimationFrame","shouldRenderPopup","useSidebarItemReorder","childItems","draggedItemId","dropTarget","id","index","isReorderEnabled","onDragEnd","onDragStart","onDrop","onDropInside","onDropTargetChange","parentIds","childParentIds","canDragItem","canDropInsideItem","currentItem","itemId","beforeTarget","placement","insideTarget","length","childListEndTarget","lastChild","isBeforeDropTargetActive","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/esm/components/navigation-layout/navigation-sidebar/sidebar-group/sidebar-item/SidebarItem.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.js","names":["React","memo","useCallback","useEffect","useMemo","useState","ExpandableContent","Icon","Tooltip","StyledSidebarItem","StyledSidebarItemChildren","StyledSidebarItemHead","StyledSidebarItemHeadContent","StyledSidebarItemIcon","StyledSidebarItemIconImage","StyledSidebarItemLabel","StyledMotionSidebarOpenIcon","StyledSidebarItemPopup","isItemOrChildSelected","createPortal","AnimatePresence","useSidebarItemPopup","useSidebarItemReorder","StyledSidebarDropZone","useNavigationSidebarContext","useSidebarGroupReorderContext","SidebarItem","item","index","parentIds","shouldShowCollapsedLabel","shouldShowCollapsedLabelProp","children","childItems","disabledReason","icons","id","imageElement","imageUrl","isDisabled","label","shouldShowChildren","setShouldShowChildren","color","isCompact","onItemClick","selectedItemId","draggedItemId","dropTarget","isReorderEnabled","onDragEnd","onDragStart","onDrop","onDropTargetChange","resolvedShouldShowCollapsedLabel","coordinates","handleMouseEnter","handleMouseLeave","isHovered","itemRef","popupContainer","shouldRenderPopup","Boolean","canDragItem","canDropInsideItem","childParentIds","childListEndTarget","handleBeforeDragOver","handleBeforeDrop","handleChildListEndDragOver","handleChildListEndDrop","handleDragEnd","handleDragStart","handleInsideDragOver","handleInsideDrop","isBeforeDropTargetActive","isChildListEndTargetActive","isDragging","isInsideDropTargetActive","onDropInside","isSelected","handleClick","handleOpenIconClick","event","stopPropagation","previousValue","renderChildItem","childItem","childIndex","createElement","key","length","map","$depth","$isActive","$isDragging","$placement","onDragOver","text","shouldUseFullWidth","ref","$shouldHighlight","$isDisabled","$hasDisabledReason","$isReorderable","draggable","onMouseEnter","onMouseLeave","onClick","src","size","initial","animate","rotate","transition","type","isOpen","$coordinates","displayName"],"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":[]}