@chayns-components/navigation 5.0.65 → 5.1.1

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

@@ -0,0 +1,126 @@
+import { css, styled } from 'styled-components';
+import { motion } from 'motion/react';
+export const StyledSidebarItem = styled.div`
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+`;
+export const StyledSidebarItemHead = 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 css`
+                cursor: help;
+            `;
+  }
+  if ($isDisabled) {
+    return css`
+                cursor: default;
+            `;
+  }
+  return css`
+            cursor: ${$isReorderable ? 'grab' : 'pointer'};
+        `;
+}}
+
+    ${({
+  $isDragging
+}) => $isDragging && css`
+            opacity: 0.55;
+            cursor: grabbing;
+        `}
+
+    ${({
+  $shouldHighlight
+}) => $shouldHighlight && css`
+            background-color: rgba(30, 30, 30, 0.3);
+        `}
+`;
+export const StyledSidebarItemHeadContent = styled.div`
+    display: flex;
+    align-items: center;
+    height: 100%;
+    min-width: 0;
+`;
+export const StyledSidebarItemPopup = 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%);
+`;
+export const StyledSidebarItemIcon = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    height: 100%;
+`;
+export const StyledMotionSidebarOpenIcon = styled(motion.div)`
+    height: 30px;
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+`;
+export const StyledSidebarItemIconImage = styled.img`
+    width: 28px;
+`;
+export const StyledSidebarItemLabel = styled.div`
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    flex: 1;
+    min-width: 0;
+`;
+export const StyledSidebarItemChildren = styled.div`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-top: 2px;
+
+    padding-left: 8px;
+`;
+//# sourceMappingURL=SidebarItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItem.styles.js","names":["css","styled","motion","StyledSidebarItem","div","StyledSidebarItemHead","$isDisabled","$hasDisabledReason","$isReorderable","$isDragging","$shouldHighlight","StyledSidebarItemHeadContent","StyledSidebarItemPopup","theme","text","$coordinates","y","x","StyledSidebarItemIcon","StyledMotionSidebarOpenIcon","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,SAASA,GAAG,EAAEC,MAAM,QAAQ,mBAAmB;AAC/C,SAASC,MAAM,QAAQ,cAAc;AAIrC,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,GAAG;AAC3C;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,qBAAqB,GAAGJ,MAAM,CAACG,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,OAAOP,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIM,WAAW,EAAE;IACb,OAAON,GAAG;AACtB;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB,sBAAsBQ,cAAc,GAAG,MAAM,GAAG,SAAS;AACzD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXT,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEU;AAAiB,CAAC,KACnBA,gBAAgB,IAChBV,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMW,4BAA4B,GAAGV,MAAM,CAACG,GAAG;AACtD;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMQ,sBAAsB,GAAGX,MAAM,CAACG,GAAgC;AAC7E;AACA;AACA;AACA,wBAAwB,CAAC;EAAES;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;AAED,OAAO,MAAMC,qBAAqB,GAAGjB,MAAM,CAACG,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMe,2BAA2B,GAAGlB,MAAM,CAACC,MAAM,CAACE,GAAG,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMgB,0BAA0B,GAAGnB,MAAM,CAACoB,GAAG;AACpD;AACA,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGrB,MAAM,CAACG,GAAG;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMmB,yBAAyB,GAAGtB,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,67 @@
+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));
+};
+export const areCoordinatesEqual = ({
+  coordinatesA,
+  coordinatesB
+}) => {
+  if (!coordinatesA || !coordinatesB) {
+    return coordinatesA === coordinatesB;
+  }
+  return coordinatesA.x === coordinatesB.x && coordinatesA.y === coordinatesB.y;
+};
+export 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)
+  };
+};
+export 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;
+};
+export const isItemOrChildSelected = (item, selectedId) => {
+  if (!selectedId) {
+    return false;
+  }
+  if (item.id === selectedId) {
+    return true;
+  }
+  if (!item.children?.length) {
+    return false;
+  }
+  return item.children.some(child => isItemOrChildSelected(child, selectedId));
+};
+//# sourceMappingURL=SidebarItem.utils.js.map

package/lib/esm/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","getSidebarItemPopupCoordinates","container","item","offset","left","itemLeft","top","itemTop","width","height","getBoundingClientRect","containerLeft","containerTop","Math","round","getScrollableAncestorElements","boundaryElement","scrollableElements","currentElement","parentElement","push","isItemOrChildSelected","selectedId","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;AAED,OAAO,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;AAED,OAAO,MAAMC,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;IACHZ,CAAC,EAAEe,IAAI,CAACC,KAAK,CAACT,QAAQ,GAAGM,aAAa,GAAGH,KAAK,GAAGL,MAAM,CAAC;IACxDJ,CAAC,EAAEc,IAAI,CAACC,KAAK,CAACP,OAAO,GAAGK,YAAY,GAAGH,MAAM,GAAG,CAAC;EACrD,CAAC;AACL,CAAC;AAED,OAAO,MAAMM,6BAA6B,GAAGA,CAAC;EAC1C5B,OAAO;EACP6B;AACkC,CAAC,KAAoB;EACvD,MAAMC,kBAAiC,GAAG,EAAE;EAC5C,IAAIC,cAAc,GAAG/B,OAAO,CAACgC,aAAa;EAE1C,OAAOD,cAAc,EAAE;IACnB,IAAIhC,mBAAmB,CAACgC,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;AAED,OAAO,MAAMI,qBAAqB,GAAGA,CAACnB,IAA0B,EAAEoB,UAAmB,KAAc;EAC/F,IAAI,CAACA,UAAU,EAAE;IACb,OAAO,KAAK;EAChB;EAEA,IAAIpB,IAAI,CAACqB,EAAE,KAAKD,UAAU,EAAE;IACxB,OAAO,IAAI;EACf;EAEA,IAAI,CAACpB,IAAI,CAACsB,QAAQ,EAAEC,MAAM,EAAE;IACxB,OAAO,KAAK;EAChB;EAEA,OAAOvB,IAAI,CAACsB,QAAQ,CAAChC,IAAI,CAAEkC,KAAK,IAAKL,qBAAqB,CAACK,KAAK,EAAEJ,UAAU,CAAC,CAAC;AAClF,CAAC","ignoreList":[]}

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

@@ -0,0 +1,80 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import ResizeHandle from './resize-handle/ResizeHandle';
+import { StyledSplitLayout, StyledSplitLayoutPane } from './SplitLayout.styles';
+import { SplitLayoutDirection } from './SplitLayout.types';
+import { getContainerSizeByDirection, getVisibleViewIds } from './SplitLayout.utils';
+export const SplitLayout = ({
+  direction = SplitLayoutDirection.HORIZONTAL,
+  handleSize = 2,
+  views,
+  onChange,
+  fullScreenViewId
+}) => {
+  const ref = useRef(null);
+  const [sizes, setSizes] = useState({});
+  const [containerSize, setContainerSize] = useState(0);
+  useEffect(() => {
+    if (!ref.current) {
+      return () => {};
+    }
+    const element = ref.current;
+    const updateSize = () => {
+      setContainerSize(getContainerSizeByDirection(element, direction));
+    };
+    updateSize();
+    const observer = new ResizeObserver(() => {
+      updateSize();
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [direction]);
+  const viewIdsToDisplay = useMemo(() => getVisibleViewIds({
+    views,
+    containerSize
+  }), [views, containerSize]);
+  const handleResize = useCallback((key, delta) => {
+    setSizes(prev => {
+      const nextSize = (prev[key] ?? views[key]?.defaultSize ?? 0) + delta;
+      const minSize = views[key]?.minSize ?? 0;
+      const maxSize = views[key]?.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 = 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.createElement(React.Fragment, {
+        key: key
+      }, /*#__PURE__*/React.createElement(StyledSplitLayoutPane, {
+        $direction: direction,
+        $size: sizes[key] ?? view.defaultSize ?? view.minSize ?? view.maxSize
+      }, view.component), index < viewIdsToDisplay.length - 1 && /*#__PURE__*/React.createElement(ResizeHandle, {
+        size: handleSize,
+        direction: direction,
+        onDrag: delta => handleResize(key, delta)
+      }));
+    });
+  }, [direction, fullScreenViewId, handleResize, handleSize, sizes, viewIdsToDisplay, views]);
+  return /*#__PURE__*/React.createElement(StyledSplitLayout, {
+    ref: ref,
+    $direction: direction
+  }, content);
+};
+SplitLayout.displayName = 'SplitLayout';
+export default SplitLayout;
+//# sourceMappingURL=SplitLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","ResizeHandle","StyledSplitLayout","StyledSplitLayoutPane","SplitLayoutDirection","getContainerSizeByDirection","getVisibleViewIds","SplitLayout","direction","HORIZONTAL","handleSize","views","onChange","fullScreenViewId","ref","sizes","setSizes","containerSize","setContainerSize","current","element","updateSize","observer","ResizeObserver","observe","disconnect","viewIdsToDisplay","handleResize","key","delta","prev","nextSize","defaultSize","minSize","maxSize","Number","MAX_SAFE_INTEGER","clampedSize","Math","min","max","content","component","map","index","view","createElement","Fragment","$direction","$size","length","size","onDrag","displayName"],"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":[]}

package/lib/esm/components/split-layout/SplitLayout.styles.js

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+import { SplitLayoutDirection } from './SplitLayout.types';
+export const StyledSplitLayout = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+
+    ${({
+  $direction
+}) => $direction === SplitLayoutDirection.HORIZONTAL ? css`
+                  flex-direction: row;
+              ` : css`
+                  flex-direction: column;
+              `}
+`;
+export const StyledSplitLayoutPane = styled.div`
+    position: relative;
+    flex: 0 0 auto;
+    overflow: hidden;
+
+    ${({
+  $direction,
+  $size
+}) => $direction === SplitLayoutDirection.HORIZONTAL ? css`
+                  min-width: 0;
+                  height: 100%;
+                  width: ${$size ? `${$size}px` : '100%'};
+              ` : css`
+                  min-height: 0;
+                  width: 100%;
+                  height: ${$size ? `${$size}px` : '100%'};
+              `}
+`;
+//# sourceMappingURL=SplitLayout.styles.js.map

package/lib/esm/components/split-layout/SplitLayout.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.styles.js","names":["styled","css","SplitLayoutDirection","StyledSplitLayout","div","$direction","HORIZONTAL","StyledSplitLayoutPane","$size"],"sources":["../../../../src/components/split-layout/SplitLayout.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { SplitLayoutDirection } from './SplitLayout.types';\nimport { WithTheme } from '@chayns-components/core';\n\ntype StyledSplitLayoutProps = WithTheme<{\n    $direction: SplitLayoutDirection;\n}>;\n\nexport const StyledSplitLayout = styled.div<StyledSplitLayoutProps>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    min-width: 0;\n    min-height: 0;\n    overflow: hidden;\n\n    ${({ $direction }) =>\n        $direction === SplitLayoutDirection.HORIZONTAL\n            ? css`\n                  flex-direction: row;\n              `\n            : css`\n                  flex-direction: column;\n              `}\n`;\n\ntype StyledSplitLayoutPaneProps = WithTheme<{\n    $direction: SplitLayoutDirection;\n    $size?: number;\n}>;\n\nexport const StyledSplitLayoutPane = styled.div<StyledSplitLayoutPaneProps>`\n    position: relative;\n    flex: 0 0 auto;\n    overflow: hidden;\n\n    ${({ $direction, $size }) =>\n        $direction === SplitLayoutDirection.HORIZONTAL\n            ? css`\n                  min-width: 0;\n                  height: 100%;\n                  width: ${$size ? `${$size}px` : '100%'};\n              `\n            : css`\n                  min-height: 0;\n                  width: 100%;\n                  height: ${$size ? `${$size}px` : '100%'};\n              `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,oBAAoB,QAAQ,qBAAqB;AAO1D,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACbA,UAAU,KAAKH,oBAAoB,CAACI,UAAU,GACxCL,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,CAAC;AAOD,OAAO,MAAMM,qBAAqB,GAAGP,MAAM,CAACI,GAA+B;AAC3E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,UAAU;EAAEG;AAAM,CAAC,KACpBH,UAAU,KAAKH,oBAAoB,CAACI,UAAU,GACxCL,GAAG;AACjB;AACA;AACA,2BAA2BO,KAAK,GAAG,GAAGA,KAAK,IAAI,GAAG,MAAM;AACxD,eAAe,GACDP,GAAG;AACjB;AACA;AACA,4BAA4BO,KAAK,GAAG,GAAGA,KAAK,IAAI,GAAG,MAAM;AACzD,eAAe;AACf,CAAC","ignoreList":[]}

package/lib/esm/components/split-layout/SplitLayout.types.js

@@ -0,0 +1,6 @@
+export let SplitLayoutDirection = /*#__PURE__*/function (SplitLayoutDirection) {
+  SplitLayoutDirection["HORIZONTAL"] = "HORIZONTAL";
+  SplitLayoutDirection["VERTICAL"] = "VERTICAL";
+  return SplitLayoutDirection;
+}({});
+//# sourceMappingURL=SplitLayout.types.js.map

package/lib/esm/components/split-layout/SplitLayout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.types.js","names":["SplitLayoutDirection"],"sources":["../../../../src/components/split-layout/SplitLayout.types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport interface SplitLayoutProps {\n    views: Record<string, SplitLayoutView>;\n    direction?: SplitLayoutDirection;\n    handleSize?: number;\n    fullScreenViewId?: string;\n    onChange?: (id: string, size: number) => void;\n}\n\nexport interface SplitLayoutView {\n    component: ReactNode;\n    minSize?: number;\n    maxSize?: number;\n    collapseBreakpoint?: number;\n    defaultSize?: number;\n}\n\nexport enum SplitLayoutDirection {\n    HORIZONTAL = 'HORIZONTAL',\n    VERTICAL = 'VERTICAL',\n}\n"],"mappings":"AAkBA,WAAYA,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA","ignoreList":[]}

package/lib/esm/components/split-layout/SplitLayout.utils.js

@@ -0,0 +1,17 @@
+import { SplitLayoutDirection } from './SplitLayout.types';
+export const getVisibleViewIds = ({
+  views,
+  containerSize
+}) => Object.entries(views).filter(([, view]) => {
+  if (typeof view.collapseBreakpoint !== 'number') {
+    return true;
+  }
+  return containerSize >= view.collapseBreakpoint;
+}).map(([id]) => id);
+export const getContainerSizeByDirection = (element, direction) => {
+  if (!element) {
+    return 0;
+  }
+  return direction === SplitLayoutDirection.HORIZONTAL ? element.clientWidth : element.clientHeight;
+};
+//# sourceMappingURL=SplitLayout.utils.js.map

package/lib/esm/components/split-layout/SplitLayout.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitLayout.utils.js","names":["SplitLayoutDirection","getVisibleViewIds","views","containerSize","Object","entries","filter","view","collapseBreakpoint","map","id","getContainerSizeByDirection","element","direction","HORIZONTAL","clientWidth","clientHeight"],"sources":["../../../../src/components/split-layout/SplitLayout.utils.ts"],"sourcesContent":["import { SplitLayoutDirection, SplitLayoutView } from './SplitLayout.types';\n\ninterface GetVisibleViewIdsOptions {\n    views: Record<string, SplitLayoutView>;\n    containerSize: number;\n}\n\nexport const getVisibleViewIds = ({ views, containerSize }: GetVisibleViewIdsOptions): string[] =>\n    Object.entries(views)\n        .filter(([, view]) => {\n            if (typeof view.collapseBreakpoint !== 'number') {\n                return true;\n            }\n\n            return containerSize >= view.collapseBreakpoint;\n        })\n        .map(([id]) => id);\n\nexport const getContainerSizeByDirection = (\n    element: HTMLDivElement | null,\n    direction: SplitLayoutDirection,\n): number => {\n    if (!element) {\n        return 0;\n    }\n\n    return direction === SplitLayoutDirection.HORIZONTAL\n        ? element.clientWidth\n        : element.clientHeight;\n};\n"],"mappings":"AAAA,SAASA,oBAAoB,QAAyB,qBAAqB;AAO3E,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAwC,CAAC,KAChFC,MAAM,CAACC,OAAO,CAACH,KAAK,CAAC,CAChBI,MAAM,CAAC,CAAC,GAAGC,IAAI,CAAC,KAAK;EAClB,IAAI,OAAOA,IAAI,CAACC,kBAAkB,KAAK,QAAQ,EAAE;IAC7C,OAAO,IAAI;EACf;EAEA,OAAOL,aAAa,IAAII,IAAI,CAACC,kBAAkB;AACnD,CAAC,CAAC,CACDC,GAAG,CAAC,CAAC,CAACC,EAAE,CAAC,KAAKA,EAAE,CAAC;AAE1B,OAAO,MAAMC,2BAA2B,GAAGA,CACvCC,OAA8B,EAC9BC,SAA+B,KACtB;EACT,IAAI,CAACD,OAAO,EAAE;IACV,OAAO,CAAC;EACZ;EAEA,OAAOC,SAAS,KAAKb,oBAAoB,CAACc,UAAU,GAC9CF,OAAO,CAACG,WAAW,GACnBH,OAAO,CAACI,YAAY;AAC9B,CAAC","ignoreList":[]}

package/lib/esm/components/split-layout/resize-handle/ResizeHandle.hooks.js

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { SplitLayoutDirection } from '../SplitLayout.types';
+const getPointerPosition = (event, direction) => direction === SplitLayoutDirection.HORIZONTAL ? event.clientX : event.clientY;
+export const useDragHandle = ({
+  direction,
+  onDrag,
+  onDragStart,
+  onDragEnd
+}) => {
+  const startPositionRef = useRef(0);
+  const cleanupRef = useRef(null);
+  useEffect(() => () => {
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+  }, []);
+  return useCallback(event => {
+    event.preventDefault();
+    startPositionRef.current = getPointerPosition(event, direction);
+    const originalUserSelect = document.body.style.userSelect;
+    const originalCursor = document.body.style.cursor;
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = direction === SplitLayoutDirection.HORIZONTAL ? 'col-resize' : 'row-resize';
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    if (typeof onDragStart === 'function') {
+      onDragStart();
+    }
+    const onMove = moveEvent => {
+      moveEvent.preventDefault();
+      const currentPosition = getPointerPosition(moveEvent, direction);
+      const delta = currentPosition - startPositionRef.current;
+      startPositionRef.current = currentPosition;
+      onDrag(delta);
+    };
+    const cleanup = () => {
+      document.body.style.userSelect = originalUserSelect;
+      document.body.style.cursor = originalCursor;
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      cleanupRef.current = null;
+    };
+    const onUp = () => {
+      cleanup();
+      if (typeof onDragEnd === 'function') {
+        onDragEnd();
+      }
+    };
+    cleanupRef.current = cleanup;
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+  }, [direction, onDrag, onDragEnd, onDragStart]);
+};
+//# sourceMappingURL=ResizeHandle.hooks.js.map

package/lib/esm/components/split-layout/resize-handle/ResizeHandle.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.hooks.js","names":["useCallback","useEffect","useRef","SplitLayoutDirection","getPointerPosition","event","direction","HORIZONTAL","clientX","clientY","useDragHandle","onDrag","onDragStart","onDragEnd","startPositionRef","cleanupRef","current","preventDefault","originalUserSelect","document","body","style","userSelect","originalCursor","cursor","currentTarget","setPointerCapture","pointerId","onMove","moveEvent","currentPosition","delta","cleanup","window","removeEventListener","onUp","addEventListener"],"sources":["../../../../../src/components/split-layout/resize-handle/ResizeHandle.hooks.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, type PointerEvent as ReactPointerEvent } from 'react';\nimport { SplitLayoutDirection } from '../SplitLayout.types';\n\nexport interface UseDragHandleOptions {\n    direction: SplitLayoutDirection;\n    onDrag: (delta: number) => void;\n    onDragStart?: () => void;\n    onDragEnd?: () => void;\n}\n\nconst getPointerPosition = (\n    event: PointerEvent | ReactPointerEvent,\n    direction: SplitLayoutDirection,\n): number => (direction === SplitLayoutDirection.HORIZONTAL ? event.clientX : event.clientY);\n\nexport const useDragHandle = ({\n    direction,\n    onDrag,\n    onDragStart,\n    onDragEnd,\n}: UseDragHandleOptions): ((e: ReactPointerEvent<HTMLElement>) => void) => {\n    const startPositionRef = useRef(0);\n    const cleanupRef = useRef<(() => void) | null>(null);\n\n    useEffect(\n        () => () => {\n            cleanupRef.current?.();\n            cleanupRef.current = null;\n        },\n        [],\n    );\n\n    return useCallback(\n        (event: ReactPointerEvent<HTMLElement>) => {\n            event.preventDefault();\n\n            startPositionRef.current = getPointerPosition(event, direction);\n\n            const originalUserSelect = document.body.style.userSelect;\n            const originalCursor = document.body.style.cursor;\n\n            document.body.style.userSelect = 'none';\n            document.body.style.cursor =\n                direction === SplitLayoutDirection.HORIZONTAL ? 'col-resize' : 'row-resize';\n\n            event.currentTarget.setPointerCapture?.(event.pointerId);\n\n            if (typeof onDragStart === 'function') {\n                onDragStart();\n            }\n\n            const onMove = (moveEvent: PointerEvent) => {\n                moveEvent.preventDefault();\n\n                const currentPosition = getPointerPosition(moveEvent, direction);\n                const delta = currentPosition - startPositionRef.current;\n\n                startPositionRef.current = currentPosition;\n\n                onDrag(delta);\n            };\n\n            const cleanup = () => {\n                document.body.style.userSelect = originalUserSelect;\n                document.body.style.cursor = originalCursor;\n\n                window.removeEventListener('pointermove', onMove);\n                window.removeEventListener('pointerup', onUp);\n                window.removeEventListener('pointercancel', onUp);\n\n                cleanupRef.current = null;\n            };\n\n            const onUp = () => {\n                cleanup();\n\n                if (typeof onDragEnd === 'function') {\n                    onDragEnd();\n                }\n            };\n\n            cleanupRef.current = cleanup;\n\n            window.addEventListener('pointermove', onMove);\n            window.addEventListener('pointerup', onUp);\n            window.addEventListener('pointercancel', onUp);\n        },\n        [direction, onDrag, onDragEnd, onDragStart],\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/split-layout/resize-handle/ResizeHandle.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyledResizeHandle, StyledResizeHandleDrag, StyledResizeHandleLine } from './ResizeHandle.styles';
+import { useDragHandle } from './ResizeHandle.hooks';
+const ResizeHandle = ({
+  onDrag,
+  onDragStart,
+  onDragEnd,
+  direction,
+  size
+}) => {
+  const handlePointerDown = useDragHandle({
+    direction,
+    onDrag,
+    onDragStart,
+    onDragEnd
+  });
+  return /*#__PURE__*/React.createElement(StyledResizeHandle, {
+    $direction: direction,
+    $size: size
+  }, /*#__PURE__*/React.createElement(StyledResizeHandleDrag, {
+    $direction: direction,
+    onPointerDown: handlePointerDown
+  }), /*#__PURE__*/React.createElement(StyledResizeHandleLine, null));
+};
+ResizeHandle.displayName = 'ResizeHandle';
+export default ResizeHandle;
+//# sourceMappingURL=ResizeHandle.js.map

package/lib/esm/components/split-layout/resize-handle/ResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.js","names":["React","StyledResizeHandle","StyledResizeHandleDrag","StyledResizeHandleLine","useDragHandle","ResizeHandle","onDrag","onDragStart","onDragEnd","direction","size","handlePointerDown","createElement","$direction","$size","onPointerDown","displayName"],"sources":["../../../../../src/components/split-layout/resize-handle/ResizeHandle.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport {\n    StyledResizeHandle,\n    StyledResizeHandleDrag,\n    StyledResizeHandleLine,\n} from './ResizeHandle.styles';\nimport { useDragHandle } from './ResizeHandle.hooks';\nimport { SplitLayoutDirection } from '../SplitLayout.types';\n\ninterface ResizeHandleProps {\n    onDrag: (delta: number) => void;\n    onDragStart?: () => void;\n    onDragEnd?: () => void;\n    direction: SplitLayoutDirection;\n    size: number;\n}\n\nconst ResizeHandle: FC<ResizeHandleProps> = ({\n    onDrag,\n    onDragStart,\n    onDragEnd,\n    direction,\n    size,\n}) => {\n    const handlePointerDown = useDragHandle({\n        direction,\n        onDrag,\n        onDragStart,\n        onDragEnd,\n    });\n\n    return (\n        <StyledResizeHandle $direction={direction} $size={size}>\n            <StyledResizeHandleDrag $direction={direction} onPointerDown={handlePointerDown} />\n            <StyledResizeHandleLine />\n        </StyledResizeHandle>\n    );\n};\n\nResizeHandle.displayName = 'ResizeHandle';\n\nexport default ResizeHandle;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAc,OAAO;AACjC,SACIC,kBAAkB,EAClBC,sBAAsB,EACtBC,sBAAsB,QACnB,uBAAuB;AAC9B,SAASC,aAAa,QAAQ,sBAAsB;AAWpD,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,MAAM;EACNC,WAAW;EACXC,SAAS;EACTC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,iBAAiB,GAAGP,aAAa,CAAC;IACpCK,SAAS;IACTH,MAAM;IACNC,WAAW;IACXC;EACJ,CAAC,CAAC;EAEF,oBACIR,KAAA,CAAAY,aAAA,CAACX,kBAAkB;IAACY,UAAU,EAAEJ,SAAU;IAACK,KAAK,EAAEJ;EAAK,gBACnDV,KAAA,CAAAY,aAAA,CAACV,sBAAsB;IAACW,UAAU,EAAEJ,SAAU;IAACM,aAAa,EAAEJ;EAAkB,CAAE,CAAC,eACnFX,KAAA,CAAAY,aAAA,CAACT,sBAAsB,MAAE,CACT,CAAC;AAE7B,CAAC;AAEDE,YAAY,CAACW,WAAW,GAAG,cAAc;AAEzC,eAAeX,YAAY","ignoreList":[]}

package/lib/esm/components/split-layout/resize-handle/ResizeHandle.styles.js

@@ -0,0 +1,52 @@
+import { css, styled } from 'styled-components';
+import { SplitLayoutDirection } from '../SplitLayout.types';
+export const StyledResizeHandle = styled.div`
+    position: relative;
+    flex-shrink: 0;
+    width: ${({
+  $direction,
+  $size
+}) => $direction === SplitLayoutDirection.HORIZONTAL ? `${$size}px` : '100%'};
+    height: ${({
+  $direction,
+  $size
+}) => $direction === SplitLayoutDirection.VERTICAL ? `${$size}px` : '100%'};
+`;
+export const StyledResizeHandleLine = styled.div`
+    width: 100%;
+    height: 100%;
+    background-color: ${({
+  theme
+}) => theme['002']};
+    position: relative;
+    z-index: 10;
+`;
+export const StyledResizeHandleDrag = styled.div`
+    position: absolute;
+
+    opacity: 0;
+    z-index: 20;
+
+    ${({
+  $direction
+}) => $direction === SplitLayoutDirection.HORIZONTAL ? css`
+                  cursor: col-resize;
+
+                  transform: translateX(-50%);
+                  top: 0;
+                  left: 50%;
+
+                  width: 20px;
+                  height: 100%;
+              ` : css`
+                  cursor: row-resize;
+                  transform: translateY(-50%);
+
+                  top: 50%;
+                  left: 0;
+
+                  width: 100%;
+                  height: 20px;
+              `}
+`;
+//# sourceMappingURL=ResizeHandle.styles.js.map

package/lib/esm/components/split-layout/resize-handle/ResizeHandle.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.styles.js","names":["css","styled","SplitLayoutDirection","StyledResizeHandle","div","$direction","$size","HORIZONTAL","VERTICAL","StyledResizeHandleLine","theme","StyledResizeHandleDrag"],"sources":["../../../../../src/components/split-layout/resize-handle/ResizeHandle.styles.ts"],"sourcesContent":["import { css, styled } from 'styled-components';\nimport { WithTheme } from '@chayns-components/core';\nimport { SplitLayoutDirection } from '../SplitLayout.types';\n\ntype StyledResizeHandleProps = WithTheme<{ $direction: SplitLayoutDirection; $size: number }>;\n\nexport const StyledResizeHandle = styled.div<StyledResizeHandleProps>`\n    position: relative;\n    flex-shrink: 0;\n    width: ${({ $direction, $size }) =>\n        $direction === SplitLayoutDirection.HORIZONTAL ? `${$size}px` : '100%'};\n    height: ${({ $direction, $size }) =>\n        $direction === SplitLayoutDirection.VERTICAL ? `${$size}px` : '100%'};\n`;\n\ntype StyledResizeHandleLineProps = WithTheme<unknown>;\n\nexport const StyledResizeHandleLine = styled.div<StyledResizeHandleLineProps>`\n    width: 100%;\n    height: 100%;\n    background-color: ${({ theme }) => theme['002']};\n    position: relative;\n    z-index: 10;\n`;\n\ntype StyledResizeHandleDragProps = WithTheme<{ $direction: SplitLayoutDirection }>;\n\nexport const StyledResizeHandleDrag = styled.div<StyledResizeHandleDragProps>`\n    position: absolute;\n\n    opacity: 0;\n    z-index: 20;\n\n    ${({ $direction }) =>\n        $direction === SplitLayoutDirection.HORIZONTAL\n            ? css`\n                  cursor: col-resize;\n\n                  transform: translateX(-50%);\n                  top: 0;\n                  left: 50%;\n\n                  width: 20px;\n                  height: 100%;\n              `\n            : css`\n                  cursor: row-resize;\n                  transform: translateY(-50%);\n\n                  top: 50%;\n                  left: 0;\n\n                  width: 100%;\n                  height: 20px;\n              `}\n`;\n"],"mappings":"AAAA,SAASA,GAAG,EAAEC,MAAM,QAAQ,mBAAmB;AAE/C,SAASC,oBAAoB,QAAQ,sBAAsB;AAI3D,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA;AACA,aAAa,CAAC;EAAEC,UAAU;EAAEC;AAAM,CAAC,KAC3BD,UAAU,KAAKH,oBAAoB,CAACK,UAAU,GAAG,GAAGD,KAAK,IAAI,GAAG,MAAM;AAC9E,cAAc,CAAC;EAAED,UAAU;EAAEC;AAAM,CAAC,KAC5BD,UAAU,KAAKH,oBAAoB,CAACM,QAAQ,GAAG,GAAGF,KAAK,IAAI,GAAG,MAAM;AAC5E,CAAC;AAID,OAAO,MAAMG,sBAAsB,GAAGR,MAAM,CAACG,GAAgC;AAC7E;AACA;AACA,wBAAwB,CAAC;EAAEM;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGV,MAAM,CAACG,GAAgC;AAC7E;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACbA,UAAU,KAAKH,oBAAoB,CAACK,UAAU,GACxCP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,GACDA,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}

package/lib/esm/components/user-image/UserImage.js

@@ -0,0 +1,31 @@
+import React, { useMemo } from 'react';
+import { StyledUserImage, StyledUserImageUser } from './userImage.styles';
+import { Popup } from '@chayns-components/core';
+import { useUser } from 'chayns-api';
+const UserImage = ({
+  size = 35,
+  personId,
+  popupContent,
+  yOffset = -10,
+  onClick
+}) => {
+  const user = useUser();
+  const src = useMemo(() => `https://tsimg.cloud/${personId || user.personId || ''}/profile_w200-h200.png`, [personId, user]);
+  return /*#__PURE__*/React.createElement(StyledUserImage, {
+    $size: size
+  }, popupContent ? /*#__PURE__*/React.createElement(Popup, {
+    content: popupContent,
+    yOffset: yOffset
+  }, /*#__PURE__*/React.createElement(StyledUserImageUser, {
+    $size: size,
+    src: src,
+    onClick: onClick
+  })) : /*#__PURE__*/React.createElement(StyledUserImageUser, {
+    $size: size,
+    src: src,
+    onClick: onClick
+  }));
+};
+UserImage.displayName = 'UserImage';
+export default UserImage;
+//# sourceMappingURL=UserImage.js.map

package/lib/esm/components/user-image/UserImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserImage.js","names":["React","useMemo","StyledUserImage","StyledUserImageUser","Popup","useUser","UserImage","size","personId","popupContent","yOffset","onClick","user","src","createElement","$size","content","displayName"],"sources":["../../../../src/components/user-image/UserImage.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { StyledUserImage, StyledUserImageUser } from './userImage.styles';\nimport { UserImageProps } from './UserImage.types';\nimport { Popup } from '@chayns-components/core';\nimport { useUser } from 'chayns-api';\n\nconst UserImage: FC<UserImageProps> = ({\n    size = 35,\n    personId,\n    popupContent,\n    yOffset = -10,\n    onClick,\n}) => {\n    const user = useUser();\n\n    const src = useMemo(\n        () => `https://tsimg.cloud/${personId || user.personId || ''}/profile_w200-h200.png`,\n        [personId, user],\n    );\n\n    return (\n        <StyledUserImage $size={size}>\n            {popupContent ? (\n                <Popup content={popupContent} yOffset={yOffset}>\n                    <StyledUserImageUser $size={size} src={src} onClick={onClick} />\n                </Popup>\n            ) : (\n                <StyledUserImageUser $size={size} src={src} onClick={onClick} />\n            )}\n        </StyledUserImage>\n    );\n};\n\nUserImage.displayName = 'UserImage';\n\nexport default UserImage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,OAAO,QAAQ,OAAO;AAC1C,SAASC,eAAe,EAAEC,mBAAmB,QAAQ,oBAAoB;AAEzE,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SAASC,OAAO,QAAQ,YAAY;AAEpC,MAAMC,SAA6B,GAAGA,CAAC;EACnCC,IAAI,GAAG,EAAE;EACTC,QAAQ;EACRC,YAAY;EACZC,OAAO,GAAG,CAAC,EAAE;EACbC;AACJ,CAAC,KAAK;EACF,MAAMC,IAAI,GAAGP,OAAO,CAAC,CAAC;EAEtB,MAAMQ,GAAG,GAAGZ,OAAO,CACf,MAAM,uBAAuBO,QAAQ,IAAII,IAAI,CAACJ,QAAQ,IAAI,EAAE,wBAAwB,EACpF,CAACA,QAAQ,EAAEI,IAAI,CACnB,CAAC;EAED,oBACIZ,KAAA,CAAAc,aAAA,CAACZ,eAAe;IAACa,KAAK,EAAER;EAAK,GACxBE,YAAY,gBACTT,KAAA,CAAAc,aAAA,CAACV,KAAK;IAACY,OAAO,EAAEP,YAAa;IAACC,OAAO,EAAEA;EAAQ,gBAC3CV,KAAA,CAAAc,aAAA,CAACX,mBAAmB;IAACY,KAAK,EAAER,IAAK;IAACM,GAAG,EAAEA,GAAI;IAACF,OAAO,EAAEA;EAAQ,CAAE,CAC5D,CAAC,gBAERX,KAAA,CAAAc,aAAA,CAACX,mBAAmB;IAACY,KAAK,EAAER,IAAK;IAACM,GAAG,EAAEA,GAAI;IAACF,OAAO,EAAEA;EAAQ,CAAE,CAEtD,CAAC;AAE1B,CAAC;AAEDL,SAAS,CAACW,WAAW,GAAG,WAAW;AAEnC,eAAeX,SAAS","ignoreList":[]}

package/lib/esm/components/user-image/UserImage.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=UserImage.types.js.map

package/lib/esm/components/user-image/UserImage.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserImage.types.js","names":[],"sources":["../../../../src/components/user-image/UserImage.types.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport interface UserImageProps {\n    personId?: string;\n    size?: number;\n    yOffset?: number;\n    popupContent?: ReactNode;\n    onClick?: () => void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/user-image/userImage.styles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+export const StyledUserImage = styled.div`
+    height: ${({
+  $size
+}) => $size}px;
+
+    aspect-ratio: 1;
+`;
+export const StyledUserImageUser = styled.img`
+    height: ${({
+  $size
+}) => $size}px;
+
+    aspect-ratio: 1;
+
+    border-radius: 50%;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+`;
+//# sourceMappingURL=userImage.styles.js.map

package/lib/esm/components/user-image/userImage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"userImage.styles.js","names":["styled","StyledUserImage","div","$size","StyledUserImageUser","img"],"sources":["../../../../src/components/user-image/userImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '@chayns-components/core';\n\ntype StyledUserImageProps = WithTheme<{ $size: number }>;\n\nexport const StyledUserImage = styled.div<StyledUserImageProps>`\n    height: ${({ $size }) => $size}px;\n\n    aspect-ratio: 1;\n`;\n\ntype StyledUserImageUserProps = WithTheme<{ $size: number }>;\n\nexport const StyledUserImageUser = styled.img<StyledUserImageUserProps>`\n    height: ${({ $size }) => $size}px;\n\n    aspect-ratio: 1;\n\n    border-radius: 50%;\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAyB;AAC/D,cAAc,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,GAA6B;AACvE,cAAc,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}