@chayns-components/core 5.3.9 → 5.3.11-alpha.0

package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js

@@ -8,7 +8,8 @@ const ListItemTitle = ({
   shouldShowMultilineTitle,
   isOpen,
   onResize,
-  onTitleWidthChange
+  onTitleWidthChange,
+  shouldAllowRightElementFocus = true
 }) => {
   const titleWrapperRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -52,6 +53,33 @@ const ListItemTitle = ({
     }
     return false;
   }, [topElement]);
+  useEffect(() => {
+    const topElementWrapper = topElementWrapperRef.current;
+    if (!topElementWrapper) {
+      return;
+    }
+    const focusableElements = Array.from(topElementWrapper.querySelectorAll('a[href], button, input, select, textarea, [tabindex], [contenteditable="true"]'));
+    focusableElements.forEach(element => {
+      const currentElement = element;
+      const datasetKey = 'listItemRightElementOriginalTabIndex';
+      if (shouldAllowRightElementFocus) {
+        const originalTabIndex = currentElement.dataset[datasetKey];
+        if (typeof originalTabIndex === 'string') {
+          if (originalTabIndex === '') {
+            currentElement.removeAttribute('tabindex');
+          } else {
+            currentElement.setAttribute('tabindex', originalTabIndex);
+          }
+          delete currentElement.dataset[datasetKey];
+        }
+      } else {
+        if (typeof currentElement.dataset[datasetKey] !== 'string') {
+          currentElement.dataset[datasetKey] = currentElement.getAttribute('tabindex') ?? '';
+        }
+        currentElement.setAttribute('tabindex', '-1');
+      }
+    });
+  }, [shouldAllowRightElementFocus, topElement]);
   return /*#__PURE__*/React.createElement(StyledListItemTitle, {
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement(StyledListItemTitleLeftWrapper, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
@@ -61,6 +89,7 @@ const ListItemTitle = ({
   }, title), /*#__PURE__*/React.createElement(StyledListItemHeadTitleElement, {
     ref: elementWrapperRef
   }, titleElement)), topElement && /*#__PURE__*/React.createElement(StyledListItemTopRightElement, {
+    "data-right-element": "true",
     ref: topElementWrapperRef,
     onClick: shouldPreventRightElementClick ? handlePreventClick : undefined
   }, topElement));

package/lib/esm/components/list/list-item/list-item-head/list-item-title/ListItemTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemTitle.js","names":["React","useEffect","useMemo","useRef","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemTitle","StyledListItemTitleLeftWrapper","StyledListItemTopRightElement","getElementClickEvent","ListItemTitle","rightElements","titleElement","title","shouldShowMultilineTitle","isOpen","onResize","onTitleWidthChange","titleWrapperRef","wrapperRef","elementWrapperRef","topElementWrapperRef","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","fullWidth","clientWidth","rightElementWidth","topElementWidth","width","handlePreventClick","event","stopPropagation","preventDefault","topElement","top","shouldPreventRightElementClick","createElement","ref","$isEllipsis","$shouldShowMultilineTitle","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-title/ListItemTitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemTitle,\n    StyledListItemTitleLeftWrapper,\n    StyledListItemTopRightElement,\n} from './ListItemTitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemTitleProps = {\n    rightElements?: IListItemRightElements;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldShowMultilineTitle: boolean;\n    isOpen: boolean;\n    onResize?: (entries: ResizeObserverEntry[]) => void;\n    onTitleWidthChange: (width: number) => void;\n};\n\nconst ListItemTitle: FC<ListItemTitleProps> = ({\n    rightElements,\n    titleElement,\n    title,\n    shouldShowMultilineTitle,\n    isOpen,\n    onResize,\n    onTitleWidthChange,\n}) => {\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const elementWrapperRef = useRef<HTMLDivElement>(null);\n    const topElementWrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const element = titleWrapperRef?.current;\n        if (!element || typeof onResize !== 'function') return undefined;\n\n        const resizeObserver = new ResizeObserver(onResize);\n        resizeObserver.observe(element);\n\n        return () => resizeObserver.disconnect();\n    }, [onResize]);\n\n    useEffect(() => {\n        if (wrapperRef.current && elementWrapperRef.current) {\n            const fullWidth = wrapperRef.current.clientWidth;\n            const rightElementWidth = elementWrapperRef.current.clientWidth;\n            const topElementWidth = topElementWrapperRef.current?.clientWidth;\n\n            let width = fullWidth;\n\n            if (rightElementWidth > 0) {\n                width -= rightElementWidth + 8;\n            }\n\n            if (topElementWidth) {\n                width -= topElementWidth + 12;\n            }\n\n            onTitleWidthChange(width);\n        }\n    }, [onTitleWidthChange]);\n\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const topElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).top;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (topElement) {\n            return getElementClickEvent(topElement);\n        }\n\n        return false;\n    }, [topElement]);\n\n    return (\n        <StyledListItemTitle ref={wrapperRef}>\n            <StyledListItemTitleLeftWrapper>\n                <StyledListItemHeadTitleText\n                    $isEllipsis={!isOpen}\n                    ref={titleWrapperRef}\n                    $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                >\n                    {title}\n                </StyledListItemHeadTitleText>\n                <StyledListItemHeadTitleElement ref={elementWrapperRef}>\n                    {titleElement}\n                </StyledListItemHeadTitleElement>\n            </StyledListItemTitleLeftWrapper>\n            {topElement && (\n                <StyledListItemTopRightElement\n                    ref={topElementWrapperRef}\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {topElement}\n                </StyledListItemTopRightElement>\n            )}\n        </StyledListItemTitle>\n    );\n};\n\nListItemTitle.displayName = 'ListItemTitle';\n\nexport default ListItemTitle;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItemTitle.js","names":["React","useEffect","useMemo","useRef","StyledListItemHeadTitleElement","StyledListItemHeadTitleText","StyledListItemTitle","StyledListItemTitleLeftWrapper","StyledListItemTopRightElement","getElementClickEvent","ListItemTitle","rightElements","titleElement","title","shouldShowMultilineTitle","isOpen","onResize","onTitleWidthChange","shouldAllowRightElementFocus","titleWrapperRef","wrapperRef","elementWrapperRef","topElementWrapperRef","element","current","undefined","resizeObserver","ResizeObserver","observe","disconnect","fullWidth","clientWidth","rightElementWidth","topElementWidth","width","handlePreventClick","event","stopPropagation","preventDefault","topElement","top","shouldPreventRightElementClick","topElementWrapper","focusableElements","Array","from","querySelectorAll","forEach","currentElement","datasetKey","originalTabIndex","dataset","removeAttribute","setAttribute","getAttribute","createElement","ref","$isEllipsis","$shouldShowMultilineTitle","onClick","displayName"],"sources":["../../../../../../../src/components/list/list-item/list-item-head/list-item-title/ListItemTitle.tsx"],"sourcesContent":["import React, { FC, ReactNode, useEffect, useMemo, useRef } from 'react';\nimport type { IListItemRightElement, IListItemRightElements } from '../../../../../types/list';\nimport {\n    StyledListItemHeadTitleElement,\n    StyledListItemHeadTitleText,\n    StyledListItemTitle,\n    StyledListItemTitleLeftWrapper,\n    StyledListItemTopRightElement,\n} from './ListItemTitle.styles';\nimport { getElementClickEvent } from '../../../../../utils/accordion';\n\ntype ListItemTitleProps = {\n    rightElements?: IListItemRightElements;\n    title: ReactNode;\n    titleElement?: ReactNode;\n    shouldShowMultilineTitle: boolean;\n    isOpen: boolean;\n    onResize?: (entries: ResizeObserverEntry[]) => void;\n    onTitleWidthChange: (width: number) => void;\n    shouldAllowRightElementFocus?: boolean;\n};\n\nconst ListItemTitle: FC<ListItemTitleProps> = ({\n    rightElements,\n    titleElement,\n    title,\n    shouldShowMultilineTitle,\n    isOpen,\n    onResize,\n    onTitleWidthChange,\n    shouldAllowRightElementFocus = true,\n}) => {\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const elementWrapperRef = useRef<HTMLDivElement>(null);\n    const topElementWrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        const element = titleWrapperRef?.current;\n        if (!element || typeof onResize !== 'function') return undefined;\n\n        const resizeObserver = new ResizeObserver(onResize);\n        resizeObserver.observe(element);\n\n        return () => resizeObserver.disconnect();\n    }, [onResize]);\n\n    useEffect(() => {\n        if (wrapperRef.current && elementWrapperRef.current) {\n            const fullWidth = wrapperRef.current.clientWidth;\n            const rightElementWidth = elementWrapperRef.current.clientWidth;\n            const topElementWidth = topElementWrapperRef.current?.clientWidth;\n\n            let width = fullWidth;\n\n            if (rightElementWidth > 0) {\n                width -= rightElementWidth + 8;\n            }\n\n            if (topElementWidth) {\n                width -= topElementWidth + 12;\n            }\n\n            onTitleWidthChange(width);\n        }\n    }, [onTitleWidthChange]);\n\n    const handlePreventClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const topElement = useMemo(() => {\n        if (typeof rightElements === 'object' && rightElements && 'top' in rightElements) {\n            return (rightElements as unknown as IListItemRightElement).top;\n        }\n\n        return undefined;\n    }, [rightElements]);\n\n    const shouldPreventRightElementClick = useMemo(() => {\n        if (topElement) {\n            return getElementClickEvent(topElement);\n        }\n\n        return false;\n    }, [topElement]);\n\n    useEffect(() => {\n        const topElementWrapper = topElementWrapperRef.current;\n\n        if (!topElementWrapper) {\n            return;\n        }\n\n        const focusableElements = Array.from(\n            topElementWrapper.querySelectorAll<HTMLElement>(\n                'a[href], button, input, select, textarea, [tabindex], [contenteditable=\"true\"]',\n            ),\n        );\n\n        focusableElements.forEach((element) => {\n            const currentElement = element;\n            const datasetKey = 'listItemRightElementOriginalTabIndex';\n\n            if (shouldAllowRightElementFocus) {\n                const originalTabIndex = currentElement.dataset[datasetKey];\n\n                if (typeof originalTabIndex === 'string') {\n                    if (originalTabIndex === '') {\n                        currentElement.removeAttribute('tabindex');\n                    } else {\n                        currentElement.setAttribute('tabindex', originalTabIndex);\n                    }\n\n                    delete currentElement.dataset[datasetKey];\n                }\n            } else {\n                if (typeof currentElement.dataset[datasetKey] !== 'string') {\n                    currentElement.dataset[datasetKey] =\n                        currentElement.getAttribute('tabindex') ?? '';\n                }\n\n                currentElement.setAttribute('tabindex', '-1');\n            }\n        });\n    }, [shouldAllowRightElementFocus, topElement]);\n\n    return (\n        <StyledListItemTitle ref={wrapperRef}>\n            <StyledListItemTitleLeftWrapper>\n                <StyledListItemHeadTitleText\n                    $isEllipsis={!isOpen}\n                    ref={titleWrapperRef}\n                    $shouldShowMultilineTitle={shouldShowMultilineTitle}\n                >\n                    {title}\n                </StyledListItemHeadTitleText>\n                <StyledListItemHeadTitleElement ref={elementWrapperRef}>\n                    {titleElement}\n                </StyledListItemHeadTitleElement>\n            </StyledListItemTitleLeftWrapper>\n            {topElement && (\n                <StyledListItemTopRightElement\n                    data-right-element=\"true\"\n                    ref={topElementWrapperRef}\n                    onClick={shouldPreventRightElementClick ? handlePreventClick : undefined}\n                >\n                    {topElement}\n                </StyledListItemTopRightElement>\n            )}\n        </StyledListItemTitle>\n    );\n};\n\nListItemTitle.displayName = 'ListItemTitle';\n\nexport default ListItemTitle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAExE,SACIC,8BAA8B,EAC9BC,2BAA2B,EAC3BC,mBAAmB,EACnBC,8BAA8B,EAC9BC,6BAA6B,QAC1B,wBAAwB;AAC/B,SAASC,oBAAoB,QAAQ,gCAAgC;AAarE,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,aAAa;EACbC,YAAY;EACZC,KAAK;EACLC,wBAAwB;EACxBC,MAAM;EACNC,QAAQ;EACRC,kBAAkB;EAClBC,4BAA4B,GAAG;AACnC,CAAC,KAAK;EACF,MAAMC,eAAe,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAMiB,UAAU,GAAGjB,MAAM,CAAiB,IAAI,CAAC;EAC/C,MAAMkB,iBAAiB,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EACtD,MAAMmB,oBAAoB,GAAGnB,MAAM,CAAiB,IAAI,CAAC;EAEzDF,SAAS,CAAC,MAAM;IACZ,MAAMsB,OAAO,GAAGJ,eAAe,EAAEK,OAAO;IACxC,IAAI,CAACD,OAAO,IAAI,OAAOP,QAAQ,KAAK,UAAU,EAAE,OAAOS,SAAS;IAEhE,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAACX,QAAQ,CAAC;IACnDU,cAAc,CAACE,OAAO,CAACL,OAAO,CAAC;IAE/B,OAAO,MAAMG,cAAc,CAACG,UAAU,CAAC,CAAC;EAC5C,CAAC,EAAE,CAACb,QAAQ,CAAC,CAAC;EAEdf,SAAS,CAAC,MAAM;IACZ,IAAImB,UAAU,CAACI,OAAO,IAAIH,iBAAiB,CAACG,OAAO,EAAE;MACjD,MAAMM,SAAS,GAAGV,UAAU,CAACI,OAAO,CAACO,WAAW;MAChD,MAAMC,iBAAiB,GAAGX,iBAAiB,CAACG,OAAO,CAACO,WAAW;MAC/D,MAAME,eAAe,GAAGX,oBAAoB,CAACE,OAAO,EAAEO,WAAW;MAEjE,IAAIG,KAAK,GAAGJ,SAAS;MAErB,IAAIE,iBAAiB,GAAG,CAAC,EAAE;QACvBE,KAAK,IAAIF,iBAAiB,GAAG,CAAC;MAClC;MAEA,IAAIC,eAAe,EAAE;QACjBC,KAAK,IAAID,eAAe,GAAG,EAAE;MACjC;MAEAhB,kBAAkB,CAACiB,KAAK,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACjB,kBAAkB,CAAC,CAAC;EAExB,MAAMkB,kBAAkB,GAAIC,KAAuB,IAAK;IACpDA,KAAK,CAACC,eAAe,CAAC,CAAC;IACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,UAAU,GAAGrC,OAAO,CAAC,MAAM;IAC7B,IAAI,OAAOS,aAAa,KAAK,QAAQ,IAAIA,aAAa,IAAI,KAAK,IAAIA,aAAa,EAAE;MAC9E,OAAQA,aAAa,CAAsC6B,GAAG;IAClE;IAEA,OAAOf,SAAS;EACpB,CAAC,EAAE,CAACd,aAAa,CAAC,CAAC;EAEnB,MAAM8B,8BAA8B,GAAGvC,OAAO,CAAC,MAAM;IACjD,IAAIqC,UAAU,EAAE;MACZ,OAAO9B,oBAAoB,CAAC8B,UAAU,CAAC;IAC3C;IAEA,OAAO,KAAK;EAChB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhBtC,SAAS,CAAC,MAAM;IACZ,MAAMyC,iBAAiB,GAAGpB,oBAAoB,CAACE,OAAO;IAEtD,IAAI,CAACkB,iBAAiB,EAAE;MACpB;IACJ;IAEA,MAAMC,iBAAiB,GAAGC,KAAK,CAACC,IAAI,CAChCH,iBAAiB,CAACI,gBAAgB,CAC9B,gFACJ,CACJ,CAAC;IAEDH,iBAAiB,CAACI,OAAO,CAAExB,OAAO,IAAK;MACnC,MAAMyB,cAAc,GAAGzB,OAAO;MAC9B,MAAM0B,UAAU,GAAG,sCAAsC;MAEzD,IAAI/B,4BAA4B,EAAE;QAC9B,MAAMgC,gBAAgB,GAAGF,cAAc,CAACG,OAAO,CAACF,UAAU,CAAC;QAE3D,IAAI,OAAOC,gBAAgB,KAAK,QAAQ,EAAE;UACtC,IAAIA,gBAAgB,KAAK,EAAE,EAAE;YACzBF,cAAc,CAACI,eAAe,CAAC,UAAU,CAAC;UAC9C,CAAC,MAAM;YACHJ,cAAc,CAACK,YAAY,CAAC,UAAU,EAAEH,gBAAgB,CAAC;UAC7D;UAEA,OAAOF,cAAc,CAACG,OAAO,CAACF,UAAU,CAAC;QAC7C;MACJ,CAAC,MAAM;QACH,IAAI,OAAOD,cAAc,CAACG,OAAO,CAACF,UAAU,CAAC,KAAK,QAAQ,EAAE;UACxDD,cAAc,CAACG,OAAO,CAACF,UAAU,CAAC,GAC9BD,cAAc,CAACM,YAAY,CAAC,UAAU,CAAC,IAAI,EAAE;QACrD;QAEAN,cAAc,CAACK,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC;MACjD;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACnC,4BAA4B,EAAEqB,UAAU,CAAC,CAAC;EAE9C,oBACIvC,KAAA,CAAAuD,aAAA,CAACjD,mBAAmB;IAACkD,GAAG,EAAEpC;EAAW,gBACjCpB,KAAA,CAAAuD,aAAA,CAAChD,8BAA8B,qBAC3BP,KAAA,CAAAuD,aAAA,CAAClD,2BAA2B;IACxBoD,WAAW,EAAE,CAAC1C,MAAO;IACrByC,GAAG,EAAErC,eAAgB;IACrBuC,yBAAyB,EAAE5C;EAAyB,GAEnDD,KACwB,CAAC,eAC9Bb,KAAA,CAAAuD,aAAA,CAACnD,8BAA8B;IAACoD,GAAG,EAAEnC;EAAkB,GAClDT,YAC2B,CACJ,CAAC,EAChC2B,UAAU,iBACPvC,KAAA,CAAAuD,aAAA,CAAC/C,6BAA6B;IAC1B,sBAAmB,MAAM;IACzBgD,GAAG,EAAElC,oBAAqB;IAC1BqC,OAAO,EAAElB,8BAA8B,GAAGN,kBAAkB,GAAGV;EAAU,GAExEc,UAC0B,CAElB,CAAC;AAE9B,CAAC;AAED7B,aAAa,CAACkD,WAAW,GAAG,eAAe;AAE3C,eAAelD,aAAa","ignoreList":[]}

package/lib/esm/components/list/list-item/useListItemFocus.js

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+export const useListItemFocus = ({
+  uuid,
+  listGroupUuid,
+  isInKeyboardNavigationGroup,
+  updateActiveListItemUuid
+}) => {
+  const [isFocusWithinListItem, setIsFocusWithinListItem] = useState(false);
+  const handleFocus = useCallback(event => {
+    setIsFocusWithinListItem(true);
+    if (event.currentTarget === event.target && isInKeyboardNavigationGroup && typeof updateActiveListItemUuid === 'function') {
+      updateActiveListItemUuid(uuid);
+    }
+  }, [isInKeyboardNavigationGroup, updateActiveListItemUuid, uuid]);
+  const handleBlur = useCallback(event => {
+    const nextFocusedElement = event.relatedTarget;
+    const currentListItemElement = event.currentTarget;
+    if (nextFocusedElement && currentListItemElement.contains(nextFocusedElement)) {
+      return;
+    }
+    setIsFocusWithinListItem(false);
+    if (!isInKeyboardNavigationGroup || typeof updateActiveListItemUuid !== 'function' || typeof listGroupUuid !== 'string') {
+      return;
+    }
+    if (!nextFocusedElement) {
+      updateActiveListItemUuid(undefined);
+      return;
+    }
+    const nextFocusedListItem = nextFocusedElement.closest(`[data-uuid^="${listGroupUuid}---"]`);
+    if (!nextFocusedListItem) {
+      updateActiveListItemUuid(undefined);
+    }
+  }, [isInKeyboardNavigationGroup, listGroupUuid, updateActiveListItemUuid]);
+  return {
+    isFocusWithinListItem,
+    handleFocus,
+    handleBlur
+  };
+};
+//# sourceMappingURL=useListItemFocus.js.map

package/lib/esm/components/list/list-item/useListItemFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemFocus.js","names":["useCallback","useState","useListItemFocus","uuid","listGroupUuid","isInKeyboardNavigationGroup","updateActiveListItemUuid","isFocusWithinListItem","setIsFocusWithinListItem","handleFocus","event","currentTarget","target","handleBlur","nextFocusedElement","relatedTarget","currentListItemElement","contains","undefined","nextFocusedListItem","closest"],"sources":["../../../../../src/components/list/list-item/useListItemFocus.ts"],"sourcesContent":["import { type FocusEvent, useCallback, useState } from 'react';\n\ntype UseListItemFocusParams = {\n    uuid: string;\n    listGroupUuid?: string;\n    isInKeyboardNavigationGroup: boolean;\n    updateActiveListItemUuid?: (uuid?: string) => void;\n};\n\nexport const useListItemFocus = ({\n    uuid,\n    listGroupUuid,\n    isInKeyboardNavigationGroup,\n    updateActiveListItemUuid,\n}: UseListItemFocusParams) => {\n    const [isFocusWithinListItem, setIsFocusWithinListItem] = useState(false);\n\n    const handleFocus = useCallback(\n        (event: FocusEvent<HTMLDivElement>) => {\n            setIsFocusWithinListItem(true);\n\n            if (\n                event.currentTarget === event.target &&\n                isInKeyboardNavigationGroup &&\n                typeof updateActiveListItemUuid === 'function'\n            ) {\n                updateActiveListItemUuid(uuid);\n            }\n        },\n        [isInKeyboardNavigationGroup, updateActiveListItemUuid, uuid],\n    );\n\n    const handleBlur = useCallback(\n        (event: FocusEvent<HTMLDivElement>) => {\n            const nextFocusedElement = event.relatedTarget as HTMLElement | null;\n            const currentListItemElement = event.currentTarget as HTMLElement;\n\n            if (nextFocusedElement && currentListItemElement.contains(nextFocusedElement)) {\n                return;\n            }\n\n            setIsFocusWithinListItem(false);\n\n            if (\n                !isInKeyboardNavigationGroup ||\n                typeof updateActiveListItemUuid !== 'function' ||\n                typeof listGroupUuid !== 'string'\n            ) {\n                return;\n            }\n\n            if (!nextFocusedElement) {\n                updateActiveListItemUuid(undefined);\n                return;\n            }\n\n            const nextFocusedListItem = nextFocusedElement.closest<HTMLElement>(\n                `[data-uuid^=\"${listGroupUuid}---\"]`,\n            );\n\n            if (!nextFocusedListItem) {\n                updateActiveListItemUuid(undefined);\n            }\n        },\n        [isInKeyboardNavigationGroup, listGroupUuid, updateActiveListItemUuid],\n    );\n\n    return {\n        isFocusWithinListItem,\n        handleFocus,\n        handleBlur,\n    };\n};\n"],"mappings":"AAAA,SAA0BA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAS9D,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAC7BC,IAAI;EACJC,aAAa;EACbC,2BAA2B;EAC3BC;AACoB,CAAC,KAAK;EAC1B,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGP,QAAQ,CAAC,KAAK,CAAC;EAEzE,MAAMQ,WAAW,GAAGT,WAAW,CAC1BU,KAAiC,IAAK;IACnCF,wBAAwB,CAAC,IAAI,CAAC;IAE9B,IACIE,KAAK,CAACC,aAAa,KAAKD,KAAK,CAACE,MAAM,IACpCP,2BAA2B,IAC3B,OAAOC,wBAAwB,KAAK,UAAU,EAChD;MACEA,wBAAwB,CAACH,IAAI,CAAC;IAClC;EACJ,CAAC,EACD,CAACE,2BAA2B,EAAEC,wBAAwB,EAAEH,IAAI,CAChE,CAAC;EAED,MAAMU,UAAU,GAAGb,WAAW,CACzBU,KAAiC,IAAK;IACnC,MAAMI,kBAAkB,GAAGJ,KAAK,CAACK,aAAmC;IACpE,MAAMC,sBAAsB,GAAGN,KAAK,CAACC,aAA4B;IAEjE,IAAIG,kBAAkB,IAAIE,sBAAsB,CAACC,QAAQ,CAACH,kBAAkB,CAAC,EAAE;MAC3E;IACJ;IAEAN,wBAAwB,CAAC,KAAK,CAAC;IAE/B,IACI,CAACH,2BAA2B,IAC5B,OAAOC,wBAAwB,KAAK,UAAU,IAC9C,OAAOF,aAAa,KAAK,QAAQ,EACnC;MACE;IACJ;IAEA,IAAI,CAACU,kBAAkB,EAAE;MACrBR,wBAAwB,CAACY,SAAS,CAAC;MACnC;IACJ;IAEA,MAAMC,mBAAmB,GAAGL,kBAAkB,CAACM,OAAO,CAClD,gBAAgBhB,aAAa,OACjC,CAAC;IAED,IAAI,CAACe,mBAAmB,EAAE;MACtBb,wBAAwB,CAACY,SAAS,CAAC;IACvC;EACJ,CAAC,EACD,CAACb,2BAA2B,EAAED,aAAa,EAAEE,wBAAwB,CACzE,CAAC;EAED,OAAO;IACHC,qBAAqB;IACrBE,WAAW;IACXI;EACJ,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/esm/components/masonry/Masonry.context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const MasonryContext = /*#__PURE__*/createContext(undefined);
+export const useMasonryContext = () => {
+  const context = useContext(MasonryContext);
+  if (!context) {
+    throw new Error('Masonry.Item must be used inside Masonry.');
+  }
+  return context;
+};
+//# sourceMappingURL=Masonry.context.js.map

package/lib/esm/components/masonry/Masonry.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.context.js","names":["createContext","useContext","MasonryContext","undefined","useMasonryContext","context","Error"],"sources":["../../../../src/components/masonry/Masonry.context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { MasonryContextValue } from './Masonry.types';\n\nexport const MasonryContext = createContext<MasonryContextValue | undefined>(undefined);\n\nexport const useMasonryContext = () => {\n    const context = useContext(MasonryContext);\n\n    if (!context) {\n        throw new Error('Masonry.Item must be used inside Masonry.');\n    }\n\n    return context;\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAGjD,OAAO,MAAMC,cAAc,gBAAGF,aAAa,CAAkCG,SAAS,CAAC;AAEvF,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,MAAMC,OAAO,GAAGJ,UAAU,CAACC,cAAc,CAAC;EAE1C,IAAI,CAACG,OAAO,EAAE;IACV,MAAM,IAAIC,KAAK,CAAC,2CAA2C,CAAC;EAChE;EAEA,OAAOD,OAAO;AAClB,CAAC","ignoreList":[]}

package/lib/esm/components/masonry/Masonry.hooks.js

@@ -0,0 +1,44 @@
+import { Children, useMemo } from 'react';
+import { calculateColumnCount, calculateRowSpan, getMasonryItemKey, packMasonryGrid } from './Masonry.utils';
+export const useMasonryItems = ({
+  children
+}) => useMemo(() => Children.toArray(children), [children]);
+export const useMasonryLayout = ({
+  items,
+  itemHeights,
+  columnCount,
+  columnWidth,
+  rowHeight,
+  gap
+}) => useMemo(() => {
+  const layoutItems = items.map((item, index) => {
+    const key = getMasonryItemKey(item, index);
+    const height = itemHeights[key] ?? rowHeight;
+    return {
+      key,
+      columns: item.props.columns ?? 1,
+      rows: calculateRowSpan({
+        height,
+        rowHeight,
+        gap
+      })
+    };
+  });
+  return packMasonryGrid({
+    items: layoutItems,
+    columnCount,
+    columnWidth,
+    rowHeight,
+    gap
+  });
+}, [items, itemHeights, columnCount, columnWidth, rowHeight, gap]);
+export const useMasonryColumnCount = ({
+  containerWidth,
+  columnWidth,
+  gap
+}) => useMemo(() => calculateColumnCount({
+  containerWidth,
+  columnWidth,
+  gap
+}), [containerWidth, columnWidth, gap]);
+//# sourceMappingURL=Masonry.hooks.js.map

package/lib/esm/components/masonry/Masonry.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.hooks.js","names":["Children","useMemo","calculateColumnCount","calculateRowSpan","getMasonryItemKey","packMasonryGrid","useMasonryItems","children","toArray","useMasonryLayout","items","itemHeights","columnCount","columnWidth","rowHeight","gap","layoutItems","map","item","index","key","height","columns","props","rows","useMasonryColumnCount","containerWidth"],"sources":["../../../../src/components/masonry/Masonry.hooks.ts"],"sourcesContent":["import { Children, ReactNode, useMemo } from 'react';\nimport { MasonryChild, MasonryItemProps, MasonryLayoutItem } from './Masonry.types';\nimport {\n    calculateColumnCount,\n    calculateRowSpan,\n    getMasonryItemKey,\n    packMasonryGrid,\n} from './Masonry.utils';\n\ninterface UseMasonryItemsParams {\n    children: ReactNode;\n}\n\nexport const useMasonryItems = ({ children }: UseMasonryItemsParams) =>\n    useMemo(() => Children.toArray(children) as MasonryChild[], [children]);\n\ninterface UseMasonryLayoutParams {\n    items: MasonryChild[];\n    itemHeights: Record<string, number>;\n    columnCount: number;\n    columnWidth: number;\n    rowHeight: number;\n    gap: number;\n}\n\nexport const useMasonryLayout = ({\n    items,\n    itemHeights,\n    columnCount,\n    columnWidth,\n    rowHeight,\n    gap,\n}: UseMasonryLayoutParams) =>\n    useMemo(() => {\n        const layoutItems: MasonryLayoutItem[] = items.map((item, index) => {\n            const key = getMasonryItemKey(item as React.ReactElement<MasonryItemProps>, index);\n\n            const height = itemHeights[key] ?? rowHeight;\n\n            return {\n                key,\n                columns: item.props.columns ?? 1,\n                rows: calculateRowSpan({\n                    height,\n                    rowHeight,\n                    gap,\n                }),\n            };\n        });\n\n        return packMasonryGrid({\n            items: layoutItems,\n            columnCount,\n            columnWidth,\n            rowHeight,\n            gap,\n        });\n    }, [items, itemHeights, columnCount, columnWidth, rowHeight, gap]);\n\ninterface UseMasonryColumnCountParams {\n    containerWidth: number;\n    columnWidth: number;\n    gap: number;\n}\n\nexport const useMasonryColumnCount = ({\n    containerWidth,\n    columnWidth,\n    gap,\n}: UseMasonryColumnCountParams) =>\n    useMemo(\n        () =>\n            calculateColumnCount({\n                containerWidth,\n                columnWidth,\n                gap,\n            }),\n        [containerWidth, columnWidth, gap],\n    );\n"],"mappings":"AAAA,SAASA,QAAQ,EAAaC,OAAO,QAAQ,OAAO;AAEpD,SACIC,oBAAoB,EACpBC,gBAAgB,EAChBC,iBAAiB,EACjBC,eAAe,QACZ,iBAAiB;AAMxB,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAAgC,CAAC,KAC/DN,OAAO,CAAC,MAAMD,QAAQ,CAACQ,OAAO,CAACD,QAAQ,CAAmB,EAAE,CAACA,QAAQ,CAAC,CAAC;AAW3E,OAAO,MAAME,gBAAgB,GAAGA,CAAC;EAC7BC,KAAK;EACLC,WAAW;EACXC,WAAW;EACXC,WAAW;EACXC,SAAS;EACTC;AACoB,CAAC,KACrBd,OAAO,CAAC,MAAM;EACV,MAAMe,WAAgC,GAAGN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;IAChE,MAAMC,GAAG,GAAGhB,iBAAiB,CAACc,IAAI,EAA0CC,KAAK,CAAC;IAElF,MAAME,MAAM,GAAGV,WAAW,CAACS,GAAG,CAAC,IAAIN,SAAS;IAE5C,OAAO;MACHM,GAAG;MACHE,OAAO,EAAEJ,IAAI,CAACK,KAAK,CAACD,OAAO,IAAI,CAAC;MAChCE,IAAI,EAAErB,gBAAgB,CAAC;QACnBkB,MAAM;QACNP,SAAS;QACTC;MACJ,CAAC;IACL,CAAC;EACL,CAAC,CAAC;EAEF,OAAOV,eAAe,CAAC;IACnBK,KAAK,EAAEM,WAAW;IAClBJ,WAAW;IACXC,WAAW;IACXC,SAAS;IACTC;EACJ,CAAC,CAAC;AACN,CAAC,EAAE,CAACL,KAAK,EAAEC,WAAW,EAAEC,WAAW,EAAEC,WAAW,EAAEC,SAAS,EAAEC,GAAG,CAAC,CAAC;AAQtE,OAAO,MAAMU,qBAAqB,GAAGA,CAAC;EAClCC,cAAc;EACdb,WAAW;EACXE;AACyB,CAAC,KAC1Bd,OAAO,CACH,MACIC,oBAAoB,CAAC;EACjBwB,cAAc;EACdb,WAAW;EACXE;AACJ,CAAC,CAAC,EACN,CAACW,cAAc,EAAEb,WAAW,EAAEE,GAAG,CACrC,CAAC","ignoreList":[]}

package/lib/esm/components/masonry/Masonry.js

@@ -0,0 +1,74 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { AnimatePresence } from 'motion/react';
+import { useElementSize } from '../../hooks/element';
+import { MasonryContext } from './Masonry.context';
+import { StyledMasonry } from './Masonry.styles';
+import { useMasonryColumnCount, useMasonryItems, useMasonryLayout } from './Masonry.hooks';
+import { getMasonryItemKey } from './Masonry.utils';
+import MasonryItem, { InternalMasonryItem } from './masonry-item/MasonryItem';
+const MasonryBase = ({
+  children,
+  gap = 8,
+  columnWidth = 80,
+  rowHeight = 80
+}) => {
+  const ref = useRef(null);
+  const size = useElementSize(ref);
+  const containerWidth = size?.width ?? 0;
+  const [itemHeights, setItemHeights] = useState({});
+  const items = useMasonryItems({
+    children
+  });
+  const columnCount = useMasonryColumnCount({
+    containerWidth,
+    columnWidth,
+    gap
+  });
+  const layout = useMasonryLayout({
+    items,
+    itemHeights,
+    columnCount,
+    columnWidth,
+    rowHeight,
+    gap
+  });
+  const registerItem = useCallback((key, height) => {
+    setItemHeights(currentHeights => {
+      if (currentHeights[key] === height) {
+        return currentHeights;
+      }
+      return {
+        ...currentHeights,
+        [key]: height
+      };
+    });
+  }, []);
+  const contextValue = useMemo(() => ({
+    registerItem
+  }), [registerItem]);
+  return /*#__PURE__*/React.createElement(MasonryContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(StyledMasonry, {
+    ref: ref,
+    $height: layout.height
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, items.map((item, index) => {
+    const key = getMasonryItemKey(item, index);
+    const packedItem = layout.items[key];
+    if (!packedItem) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(InternalMasonryItem, {
+      key: key,
+      itemKey: key,
+      x: packedItem.x,
+      y: packedItem.y,
+      width: packedItem.width
+    }, item.props.children);
+  }))));
+};
+MasonryBase.displayName = 'Masonry';
+const Masonry = Object.assign(MasonryBase, {
+  Item: MasonryItem
+});
+export default Masonry;
+//# sourceMappingURL=Masonry.js.map

package/lib/esm/components/masonry/Masonry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.js","names":["React","useCallback","useMemo","useRef","useState","AnimatePresence","useElementSize","MasonryContext","StyledMasonry","useMasonryColumnCount","useMasonryItems","useMasonryLayout","getMasonryItemKey","MasonryItem","InternalMasonryItem","MasonryBase","children","gap","columnWidth","rowHeight","ref","size","containerWidth","width","itemHeights","setItemHeights","items","columnCount","layout","registerItem","key","height","currentHeights","contextValue","createElement","Provider","value","$height","map","item","index","packedItem","itemKey","x","y","props","displayName","Masonry","Object","assign","Item"],"sources":["../../../../src/components/masonry/Masonry.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\nimport { useElementSize } from '../../hooks/element';\nimport { MasonryComponent, MasonryItemProps, MasonryProps } from './Masonry.types';\nimport { MasonryContext } from './Masonry.context';\nimport { StyledMasonry } from './Masonry.styles';\nimport { useMasonryColumnCount, useMasonryItems, useMasonryLayout } from './Masonry.hooks';\nimport { getMasonryItemKey } from './Masonry.utils';\nimport MasonryItem, { InternalMasonryItem } from './masonry-item/MasonryItem';\n\nconst MasonryBase: FC<MasonryProps> = ({ children, gap = 8, columnWidth = 80, rowHeight = 80 }) => {\n    const ref = useRef<HTMLDivElement | null>(null);\n    const size = useElementSize(ref);\n\n    const containerWidth = size?.width ?? 0;\n\n    const [itemHeights, setItemHeights] = useState<Record<string, number>>({});\n\n    const items = useMasonryItems({ children });\n\n    const columnCount = useMasonryColumnCount({\n        containerWidth,\n        columnWidth,\n        gap,\n    });\n\n    const layout = useMasonryLayout({\n        items,\n        itemHeights,\n        columnCount,\n        columnWidth,\n        rowHeight,\n        gap,\n    });\n\n    const registerItem = useCallback((key: string, height: number) => {\n        setItemHeights((currentHeights) => {\n            if (currentHeights[key] === height) {\n                return currentHeights;\n            }\n\n            return {\n                ...currentHeights,\n                [key]: height,\n            };\n        });\n    }, []);\n\n    const contextValue = useMemo(\n        () => ({\n            registerItem,\n        }),\n        [registerItem],\n    );\n\n    return (\n        <MasonryContext.Provider value={contextValue}>\n            <StyledMasonry ref={ref} $height={layout.height}>\n                <AnimatePresence>\n                    {items.map((item, index) => {\n                        const key = getMasonryItemKey(\n                            item as React.ReactElement<MasonryItemProps>,\n                            index,\n                        );\n\n                        const packedItem = layout.items[key];\n\n                        if (!packedItem) {\n                            return null;\n                        }\n\n                        return (\n                            <InternalMasonryItem\n                                key={key}\n                                itemKey={key}\n                                x={packedItem.x}\n                                y={packedItem.y}\n                                width={packedItem.width}\n                            >\n                                {item.props.children}\n                            </InternalMasonryItem>\n                        );\n                    })}\n                </AnimatePresence>\n            </StyledMasonry>\n        </MasonryContext.Provider>\n    );\n};\n\nMasonryBase.displayName = 'Masonry';\n\nconst Masonry = Object.assign(MasonryBase, {\n    Item: MasonryItem,\n}) as MasonryComponent;\n\nexport default Masonry;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACzE,SAASC,eAAe,QAAQ,cAAc;AAC9C,SAASC,cAAc,QAAQ,qBAAqB;AAEpD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,qBAAqB,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ,iBAAiB;AAC1F,SAASC,iBAAiB,QAAQ,iBAAiB;AACnD,OAAOC,WAAW,IAAIC,mBAAmB,QAAQ,4BAA4B;AAE7E,MAAMC,WAA6B,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,GAAG,GAAG,CAAC;EAAEC,WAAW,GAAG,EAAE;EAAEC,SAAS,GAAG;AAAG,CAAC,KAAK;EAC/F,MAAMC,GAAG,GAAGjB,MAAM,CAAwB,IAAI,CAAC;EAC/C,MAAMkB,IAAI,GAAGf,cAAc,CAACc,GAAG,CAAC;EAEhC,MAAME,cAAc,GAAGD,IAAI,EAAEE,KAAK,IAAI,CAAC;EAEvC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGrB,QAAQ,CAAyB,CAAC,CAAC,CAAC;EAE1E,MAAMsB,KAAK,GAAGhB,eAAe,CAAC;IAAEM;EAAS,CAAC,CAAC;EAE3C,MAAMW,WAAW,GAAGlB,qBAAqB,CAAC;IACtCa,cAAc;IACdJ,WAAW;IACXD;EACJ,CAAC,CAAC;EAEF,MAAMW,MAAM,GAAGjB,gBAAgB,CAAC;IAC5Be,KAAK;IACLF,WAAW;IACXG,WAAW;IACXT,WAAW;IACXC,SAAS;IACTF;EACJ,CAAC,CAAC;EAEF,MAAMY,YAAY,GAAG5B,WAAW,CAAC,CAAC6B,GAAW,EAAEC,MAAc,KAAK;IAC9DN,cAAc,CAAEO,cAAc,IAAK;MAC/B,IAAIA,cAAc,CAACF,GAAG,CAAC,KAAKC,MAAM,EAAE;QAChC,OAAOC,cAAc;MACzB;MAEA,OAAO;QACH,GAAGA,cAAc;QACjB,CAACF,GAAG,GAAGC;MACX,CAAC;IACL,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,YAAY,GAAG/B,OAAO,CACxB,OAAO;IACH2B;EACJ,CAAC,CAAC,EACF,CAACA,YAAY,CACjB,CAAC;EAED,oBACI7B,KAAA,CAAAkC,aAAA,CAAC3B,cAAc,CAAC4B,QAAQ;IAACC,KAAK,EAAEH;EAAa,gBACzCjC,KAAA,CAAAkC,aAAA,CAAC1B,aAAa;IAACY,GAAG,EAAEA,GAAI;IAACiB,OAAO,EAAET,MAAM,CAACG;EAAO,gBAC5C/B,KAAA,CAAAkC,aAAA,CAAC7B,eAAe,QACXqB,KAAK,CAACY,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;IACxB,MAAMV,GAAG,GAAGlB,iBAAiB,CACzB2B,IAAI,EACJC,KACJ,CAAC;IAED,MAAMC,UAAU,GAAGb,MAAM,CAACF,KAAK,CAACI,GAAG,CAAC;IAEpC,IAAI,CAACW,UAAU,EAAE;MACb,OAAO,IAAI;IACf;IAEA,oBACIzC,KAAA,CAAAkC,aAAA,CAACpB,mBAAmB;MAChBgB,GAAG,EAAEA,GAAI;MACTY,OAAO,EAAEZ,GAAI;MACba,CAAC,EAAEF,UAAU,CAACE,CAAE;MAChBC,CAAC,EAAEH,UAAU,CAACG,CAAE;MAChBrB,KAAK,EAAEkB,UAAU,CAAClB;IAAM,GAEvBgB,IAAI,CAACM,KAAK,CAAC7B,QACK,CAAC;EAE9B,CAAC,CACY,CACN,CACM,CAAC;AAElC,CAAC;AAEDD,WAAW,CAAC+B,WAAW,GAAG,SAAS;AAEnC,MAAMC,OAAO,GAAGC,MAAM,CAACC,MAAM,CAAClC,WAAW,EAAE;EACvCmC,IAAI,EAAErC;AACV,CAAC,CAAqB;AAEtB,eAAekC,OAAO","ignoreList":[]}

package/lib/esm/components/masonry/Masonry.styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export const StyledMasonry = styled.div`
+    position: relative;
+    width: 100%;
+    height: ${({
+  $height
+}) => $height}px;
+`;
+//# sourceMappingURL=Masonry.styles.js.map

package/lib/esm/components/masonry/Masonry.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.styles.js","names":["styled","StyledMasonry","div","$height"],"sources":["../../../../src/components/masonry/Masonry.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledMasonry = styled.div<{ $height: number }>`\n    position: relative;\n    width: 100%;\n    height: ${({ $height }) => $height}px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,aAAa,GAAGD,MAAM,CAACE,GAAwB;AAC5D;AACA;AACA,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC,CAAC","ignoreList":[]}

package/lib/esm/components/masonry/Masonry.types.js

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

package/lib/esm/components/masonry/Masonry.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.types.js","names":[],"sources":["../../../../src/components/masonry/Masonry.types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nexport interface MasonryProps {\n    children: ReactNode;\n    gap?: number;\n    columnWidth?: number;\n    rowHeight?: number;\n}\n\nexport interface MasonryItemProps {\n    children: ReactNode;\n    columns?: number;\n}\n\nexport interface MasonryContextValue {\n    registerItem: (key: string, height: number) => void;\n}\n\nexport interface MasonryLayoutItem {\n    key: string;\n    columns: number;\n    rows: number;\n}\n\nexport interface PackedMasonryItem {\n    key: string;\n    x: number;\n    y: number;\n    width: number;\n}\n\nexport interface PackedMasonryGrid {\n    items: Record<string, PackedMasonryItem>;\n    height: number;\n}\n\nexport interface InternalMasonryItemProps {\n    children: ReactNode;\n    itemKey: string;\n    x: number;\n    y: number;\n    width: number;\n}\n\nexport type MasonryChild = ReactElement<MasonryItemProps>;\n\nexport type MasonryComponent = React.FC<MasonryProps> & {\n    Item: React.FC<MasonryItemProps>;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/masonry/Masonry.utils.js

@@ -0,0 +1,110 @@
+export const getMasonryItemKey = (item, index) => item.key != null ? String(item.key) : String(index);
+const isAreaFree = ({
+  grid,
+  startColumn,
+  startRow,
+  columns,
+  rows,
+  columnCount
+}) => {
+  if (startColumn + columns > columnCount) {
+    return false;
+  }
+  for (let row = startRow; row < startRow + rows; row += 1) {
+    for (let column = startColumn; column < startColumn + columns; column += 1) {
+      if (grid[row]?.[column]) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+const occupyArea = ({
+  grid,
+  startColumn,
+  startRow,
+  columns,
+  rows
+}) => {
+  for (let row = startRow; row < startRow + rows; row += 1) {
+    if (!grid[row]) {
+      // eslint-disable-next-line no-param-reassign
+      grid[row] = [];
+    }
+    for (let column = startColumn; column < startColumn + columns; column += 1) {
+      // eslint-disable-next-line no-param-reassign
+      grid[row][column] = true;
+    }
+  }
+};
+export const packMasonryGrid = ({
+  items,
+  columnCount,
+  columnWidth,
+  rowHeight,
+  gap
+}) => {
+  const grid = [];
+  const packedItems = {};
+  let maxRow = 0;
+  items.forEach(item => {
+    const columns = Math.min(Math.max(item.columns, 1), columnCount);
+    const rows = Math.max(item.rows, 1);
+    let placed = false;
+    let row = 0;
+    while (!placed) {
+      for (let column = 0; column < columnCount; column += 1) {
+        const canPlaceItem = isAreaFree({
+          grid,
+          startColumn: column,
+          startRow: row,
+          columns,
+          rows,
+          columnCount
+        });
+        if (!canPlaceItem) {
+          continue;
+        }
+        occupyArea({
+          grid,
+          startColumn: column,
+          startRow: row,
+          columns,
+          rows
+        });
+        packedItems[item.key] = {
+          key: item.key,
+          x: column * (columnWidth + gap),
+          y: row * (rowHeight + gap),
+          width: columns * columnWidth + (columns - 1) * gap
+        };
+        maxRow = Math.max(maxRow, row + rows);
+        placed = true;
+        break;
+      }
+      if (!placed) {
+        row += 1;
+      }
+    }
+  });
+  return {
+    items: packedItems,
+    height: maxRow * rowHeight + Math.max(0, maxRow - 1) * gap
+  };
+};
+export const calculateColumnCount = ({
+  containerWidth,
+  columnWidth,
+  gap
+}) => {
+  if (!containerWidth) {
+    return 1;
+  }
+  return Math.max(1, Math.floor((containerWidth + gap) / (columnWidth + gap)));
+};
+export const calculateRowSpan = ({
+  height,
+  rowHeight,
+  gap
+}) => Math.max(1, Math.ceil((height + gap) / (rowHeight + gap)));
+//# sourceMappingURL=Masonry.utils.js.map

package/lib/esm/components/masonry/Masonry.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masonry.utils.js","names":["getMasonryItemKey","item","index","key","String","isAreaFree","grid","startColumn","startRow","columns","rows","columnCount","row","column","occupyArea","packMasonryGrid","items","columnWidth","rowHeight","gap","packedItems","maxRow","forEach","Math","min","max","placed","canPlaceItem","x","y","width","height","calculateColumnCount","containerWidth","floor","calculateRowSpan","ceil"],"sources":["../../../../src/components/masonry/Masonry.utils.ts"],"sourcesContent":["import { ReactElement } from 'react';\nimport {\n    MasonryItemProps,\n    MasonryLayoutItem,\n    PackedMasonryGrid,\n    PackedMasonryItem,\n} from './Masonry.types';\n\nexport const getMasonryItemKey = (item: ReactElement<MasonryItemProps>, index: number) =>\n    item.key != null ? String(item.key) : String(index);\n\ninterface IsAreaFreeParams {\n    grid: boolean[][];\n    startColumn: number;\n    startRow: number;\n    columns: number;\n    rows: number;\n    columnCount: number;\n}\n\nconst isAreaFree = ({\n    grid,\n    startColumn,\n    startRow,\n    columns,\n    rows,\n    columnCount,\n}: IsAreaFreeParams) => {\n    if (startColumn + columns > columnCount) {\n        return false;\n    }\n\n    for (let row = startRow; row < startRow + rows; row += 1) {\n        for (let column = startColumn; column < startColumn + columns; column += 1) {\n            if (grid[row]?.[column]) {\n                return false;\n            }\n        }\n    }\n\n    return true;\n};\n\ninterface OccupyAreaParams {\n    grid: boolean[][];\n    startColumn: number;\n    startRow: number;\n    columns: number;\n    rows: number;\n}\n\nconst occupyArea = ({ grid, startColumn, startRow, columns, rows }: OccupyAreaParams) => {\n    for (let row = startRow; row < startRow + rows; row += 1) {\n        if (!grid[row]) {\n            // eslint-disable-next-line no-param-reassign\n            grid[row] = [];\n        }\n\n        for (let column = startColumn; column < startColumn + columns; column += 1) {\n            // eslint-disable-next-line no-param-reassign\n            (grid[row] as boolean[])[column] = true;\n        }\n    }\n};\n\ninterface PackMasonryGridParams {\n    items: MasonryLayoutItem[];\n    columnCount: number;\n    columnWidth: number;\n    rowHeight: number;\n    gap: number;\n}\n\nexport const packMasonryGrid = ({\n    items,\n    columnCount,\n    columnWidth,\n    rowHeight,\n    gap,\n}: PackMasonryGridParams): PackedMasonryGrid => {\n    const grid: boolean[][] = [];\n    const packedItems: Record<string, PackedMasonryItem> = {};\n\n    let maxRow = 0;\n\n    items.forEach((item) => {\n        const columns = Math.min(Math.max(item.columns, 1), columnCount);\n        const rows = Math.max(item.rows, 1);\n\n        let placed = false;\n        let row = 0;\n\n        while (!placed) {\n            for (let column = 0; column < columnCount; column += 1) {\n                const canPlaceItem = isAreaFree({\n                    grid,\n                    startColumn: column,\n                    startRow: row,\n                    columns,\n                    rows,\n                    columnCount,\n                });\n\n                if (!canPlaceItem) {\n                    continue;\n                }\n\n                occupyArea({\n                    grid,\n                    startColumn: column,\n                    startRow: row,\n                    columns,\n                    rows,\n                });\n\n                packedItems[item.key] = {\n                    key: item.key,\n                    x: column * (columnWidth + gap),\n                    y: row * (rowHeight + gap),\n                    width: columns * columnWidth + (columns - 1) * gap,\n                };\n\n                maxRow = Math.max(maxRow, row + rows);\n                placed = true;\n                break;\n            }\n\n            if (!placed) {\n                row += 1;\n            }\n        }\n    });\n\n    return {\n        items: packedItems,\n        height: maxRow * rowHeight + Math.max(0, maxRow - 1) * gap,\n    };\n};\n\nexport const calculateColumnCount = ({\n    containerWidth,\n    columnWidth,\n    gap,\n}: {\n    containerWidth: number;\n    columnWidth: number;\n    gap: number;\n}) => {\n    if (!containerWidth) {\n        return 1;\n    }\n\n    return Math.max(1, Math.floor((containerWidth + gap) / (columnWidth + gap)));\n};\n\nexport const calculateRowSpan = ({\n    height,\n    rowHeight,\n    gap,\n}: {\n    height: number;\n    rowHeight: number;\n    gap: number;\n}) => Math.max(1, Math.ceil((height + gap) / (rowHeight + gap)));\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/masonry/masonry-item/MasonryItem.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react';
+import { useMasonryContext } from '../Masonry.context';
+import { StyledMasonryItem } from './MasonryItem.styles';
+const MasonryItem = ({
+  children
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, children);
+export const InternalMasonryItem = ({
+  children,
+  itemKey,
+  x,
+  y,
+  width
+}) => {
+  const ref = useRef(null);
+  const {
+    registerItem
+  } = useMasonryContext();
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return undefined;
+    }
+    let frameId;
+    const updateHeight = () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId);
+      }
+      frameId = window.requestAnimationFrame(() => {
+        registerItem(itemKey, element.getBoundingClientRect().height);
+      });
+    };
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(element);
+    return () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId);
+      }
+      observer.disconnect();
+    };
+  }, [itemKey, registerItem, width]);
+  return /*#__PURE__*/React.createElement(StyledMasonryItem, {
+    ref: ref,
+    initial: {
+      opacity: 0,
+      scale: 0.96
+    },
+    animate: {
+      opacity: 1,
+      scale: 1,
+      x,
+      y,
+      width
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.96
+    },
+    transition: {
+      type: 'spring',
+      stiffness: 320,
+      damping: 34,
+      mass: 0.85
+    }
+  }, children);
+};
+MasonryItem.displayName = 'Masonry.Item';
+export default MasonryItem;
+//# sourceMappingURL=MasonryItem.js.map

package/lib/esm/components/masonry/masonry-item/MasonryItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasonryItem.js","names":["React","useEffect","useRef","useMasonryContext","StyledMasonryItem","MasonryItem","children","createElement","Fragment","InternalMasonryItem","itemKey","x","y","width","ref","registerItem","element","current","undefined","frameId","updateHeight","window","cancelAnimationFrame","requestAnimationFrame","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","initial","opacity","scale","animate","exit","transition","type","stiffness","damping","mass","displayName"],"sources":["../../../../../src/components/masonry/masonry-item/MasonryItem.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef } from 'react';\nimport { InternalMasonryItemProps, MasonryItemProps } from '../Masonry.types';\nimport { useMasonryContext } from '../Masonry.context';\nimport { StyledMasonryItem } from './MasonryItem.styles';\n\nconst MasonryItem: FC<MasonryItemProps> = ({ children }) => <>{children}</>;\n\nexport const InternalMasonryItem: FC<InternalMasonryItemProps> = ({\n    children,\n    itemKey,\n    x,\n    y,\n    width,\n}) => {\n    const ref = useRef<HTMLDivElement | null>(null);\n    const { registerItem } = useMasonryContext();\n\n    useEffect(() => {\n        const element = ref.current;\n\n        if (!element) {\n            return undefined;\n        }\n\n        let frameId: number | undefined;\n\n        const updateHeight = () => {\n            if (frameId) {\n                window.cancelAnimationFrame(frameId);\n            }\n\n            frameId = window.requestAnimationFrame(() => {\n                registerItem(itemKey, element.getBoundingClientRect().height);\n            });\n        };\n\n        updateHeight();\n\n        const observer = new ResizeObserver(updateHeight);\n\n        observer.observe(element);\n\n        return () => {\n            if (frameId) {\n                window.cancelAnimationFrame(frameId);\n            }\n\n            observer.disconnect();\n        };\n    }, [itemKey, registerItem, width]);\n\n    return (\n        <StyledMasonryItem\n            ref={ref}\n            initial={{\n                opacity: 0,\n                scale: 0.96,\n            }}\n            animate={{\n                opacity: 1,\n                scale: 1,\n                x,\n                y,\n                width,\n            }}\n            exit={{\n                opacity: 0,\n                scale: 0.96,\n            }}\n            transition={{\n                type: 'spring',\n                stiffness: 320,\n                damping: 34,\n                mass: 0.85,\n            }}\n        >\n            {children}\n        </StyledMasonryItem>\n    );\n};\n\nMasonryItem.displayName = 'Masonry.Item';\n\nexport default MasonryItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEpD,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,MAAMC,WAAiC,GAAGA,CAAC;EAAEC;AAAS,CAAC,kBAAKN,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,QAAGF,QAAW,CAAC;AAE3E,OAAO,MAAMG,mBAAiD,GAAGA,CAAC;EAC9DH,QAAQ;EACRI,OAAO;EACPC,CAAC;EACDC,CAAC;EACDC;AACJ,CAAC,KAAK;EACF,MAAMC,GAAG,GAAGZ,MAAM,CAAwB,IAAI,CAAC;EAC/C,MAAM;IAAEa;EAAa,CAAC,GAAGZ,iBAAiB,CAAC,CAAC;EAE5CF,SAAS,CAAC,MAAM;IACZ,MAAMe,OAAO,GAAGF,GAAG,CAACG,OAAO;IAE3B,IAAI,CAACD,OAAO,EAAE;MACV,OAAOE,SAAS;IACpB;IAEA,IAAIC,OAA2B;IAE/B,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACvB,IAAID,OAAO,EAAE;QACTE,MAAM,CAACC,oBAAoB,CAACH,OAAO,CAAC;MACxC;MAEAA,OAAO,GAAGE,MAAM,CAACE,qBAAqB,CAAC,MAAM;QACzCR,YAAY,CAACL,OAAO,EAAEM,OAAO,CAACQ,qBAAqB,CAAC,CAAC,CAACC,MAAM,CAAC;MACjE,CAAC,CAAC;IACN,CAAC;IAEDL,YAAY,CAAC,CAAC;IAEd,MAAMM,QAAQ,GAAG,IAAIC,cAAc,CAACP,YAAY,CAAC;IAEjDM,QAAQ,CAACE,OAAO,CAACZ,OAAO,CAAC;IAEzB,OAAO,MAAM;MACT,IAAIG,OAAO,EAAE;QACTE,MAAM,CAACC,oBAAoB,CAACH,OAAO,CAAC;MACxC;MAEAO,QAAQ,CAACG,UAAU,CAAC,CAAC;IACzB,CAAC;EACL,CAAC,EAAE,CAACnB,OAAO,EAAEK,YAAY,EAAEF,KAAK,CAAC,CAAC;EAElC,oBACIb,KAAA,CAAAO,aAAA,CAACH,iBAAiB;IACdU,GAAG,EAAEA,GAAI;IACTgB,OAAO,EAAE;MACLC,OAAO,EAAE,CAAC;MACVC,KAAK,EAAE;IACX,CAAE;IACFC,OAAO,EAAE;MACLF,OAAO,EAAE,CAAC;MACVC,KAAK,EAAE,CAAC;MACRrB,CAAC;MACDC,CAAC;MACDC;IACJ,CAAE;IACFqB,IAAI,EAAE;MACFH,OAAO,EAAE,CAAC;MACVC,KAAK,EAAE;IACX,CAAE;IACFG,UAAU,EAAE;MACRC,IAAI,EAAE,QAAQ;MACdC,SAAS,EAAE,GAAG;MACdC,OAAO,EAAE,EAAE;MACXC,IAAI,EAAE;IACV;EAAE,GAEDjC,QACc,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAACmC,WAAW,GAAG,cAAc;AAExC,eAAenC,WAAW","ignoreList":[]}

package/lib/esm/components/masonry/masonry-item/MasonryItem.styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { motion } from 'motion/react';
+export const StyledMasonryItem = styled(motion.div)`
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    will-change: transform, width;
+`;
+//# sourceMappingURL=MasonryItem.styles.js.map

package/lib/esm/components/masonry/masonry-item/MasonryItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasonryItem.styles.js","names":["styled","motion","StyledMasonryItem","div"],"sources":["../../../../../src/components/masonry/masonry-item/MasonryItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'motion/react';\n\nexport const StyledMasonryItem = styled(motion.div)`\n    position: absolute;\n    top: 0;\n    left: 0;\n    overflow: hidden;\n    will-change: transform, width;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,cAAc;AAErC,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACC,MAAM,CAACE,GAAG,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/mention-finder/MentionFinder.js

@@ -5,6 +5,13 @@ import { MentionFinderPopupAlignment } from '../../constants/mentionFinder';
 import MentionFinderItem from './mention-finder-item/MentionFinderItem';
 import { StyledMentionFinder, StyledMentionFinderDragHandle, StyledMentionFinderDragHandleInner, StyledMentionFinderItemList, StyledMentionFinderOverlay, StyledMotionMentionFinderPopup } from './MentionFinder.styles';
 const DRAG_CLOSE_THRESHOLD_IN_PX = 60;
+const isTextInputElement = element => {
+  if (!element) {
+    return false;
+  }
+  const tagName = element.tagName.toLowerCase();
+  return tagName === 'input' && element.type !== 'button' || tagName === 'textarea' || element.isContentEditable;
+};
 const findTouchByIdentifier = (touchList, identifier) => {
   if (identifier === null) {
     return null;
@@ -31,6 +38,7 @@ const MentionFinder = ({
   const [shouldShowPopup, setShouldShowPopup] = useState(true);
   const popupRef = useRef(null);
   const listRef = useRef(null);
+  const inputElementRef = useRef(null);
   const dragStartYRef = useRef(null);
   const hasTriggeredDragCloseRef = useRef(false);
   const activePointerIdRef = useRef(null);
@@ -49,7 +57,12 @@ const MentionFinder = ({
     info,
     name
   }) => id.toLowerCase().includes(searchString) || info?.replace('chayns', '').toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString)) : members, [members, searchString]);
+  const shouldRenderPopup = shouldShowPopup && !!fullMatch && filteredMembers.length > 0;
   const handleKeyDown = useCallback(event => {
+    const targetElement = event.target;
+    if (isTextInputElement(targetElement)) {
+      inputElementRef.current = targetElement;
+    }
     if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && shouldRenderPopup) {
       event.preventDefault();
       const children = listRef.current?.children;
@@ -75,8 +88,15 @@ const MentionFinder = ({
           member: activeMember
         });
       }
+    } else if (event.key === 'Escape' && shouldRenderPopup) {
+      event.preventDefault();
+      event.stopPropagation();
+      setShouldShowPopup(false);
+      window.requestAnimationFrame(() => {
+        inputElementRef.current?.focus();
+      });
     }
-  }, [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect]);
+  }, [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect, shouldRenderPopup]);
   const handleMemberClick = useCallback(member => {
     if (fullMatch) {
       onSelect({
@@ -111,6 +131,15 @@ const MentionFinder = ({
     hasTriggeredDragCloseRef.current = false;
     setShouldShowPopup(true);
   }, [inputValue]);
+  useEffect(() => {
+    if (!shouldRenderPopup) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (isTextInputElement(activeElement)) {
+      inputElementRef.current = activeElement;
+    }
+  }, [shouldRenderPopup]);
   useEffect(() => {
     if (shouldShowPopup) {
       window.addEventListener('keydown', handleKeyDown, true);
@@ -281,7 +310,6 @@ const MentionFinder = ({
       onTouchCancel: handleDragTouchCancel
     }));
   }, [enableDragHandle, popupAlignment, dragOffset, dragProgress, isDraggingHandle, handleDragPointerDown, handleDragPointerMove, handleDragPointerUp, handleDragPointerCancel, handleDragTouchStart, handleDragTouchMove, handleDragTouchEnd, handleDragTouchCancel]);
-  const shouldRenderPopup = shouldShowPopup && fullMatch && items.length > 0;
   useEffect(() => {
     if (!enableDragHandle || !shouldRenderPopup) {
       setOverlayContainer(null);