@frontify/fondue 12.0.0-beta.108 → 12.0.0-beta.109

package/README.md

@@ -14,20 +14,20 @@
 
 1. Install fondue from npm
 
-```
+```shell
 npm install @frontify/fondue
 ```
 
 2. Load Fondue Stylesheet
 
-```
-import "@frontify/fondue/style";
+```typescript
+import '@frontify/fondue/style';
 ```
 
 3. Use Components
 
-```
-import { Button } from "@frontify/fondue";
+```typescript
+import { Button } from '@frontify/fondue';
 ```
 
 Fondue provides two builds: ES modules and UMD modules. Documentation for the provided components and how to use them is available in [Storybook](https://fondue-components.frontify.com/).

package/dist/components/Menu/Menu.es.js

@@ -43,7 +43,8 @@ const C = "tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]
       role: n ? "dialog" : "",
       ref: b,
       style: e ? o.styles.popper : {},
-      ...e ? o.attributes.popper : {}
+      ...e ? o.attributes.popper : {},
+      "data-test-id": "menu"
     },
     /* @__PURE__ */ c.createElement("ol", { className: "tw-list-none", role: "menu" }, f)
   );

package/dist/components/Menu/Menu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.es.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { PropsWithChildren, ReactNode, RefObject, useCallback, useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { merge } from '@utilities/merge';\nimport { useMenuKeyboardNavigation } from '@components/Menu/useMenuKeyboardNavigation';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { INSET_BORDER } from '@utilities/borderStyle';\n\ninterface Props {\n    triggerRef?: RefObject<Element>;\n    open?: boolean;\n    children?: ReactNode | ReactNode[];\n    onClose?: () => void;\n    offset?: [number, number];\n}\n\nexport type MenuProps = PropsWithChildren<Props>;\n\nconst CONTAINER_BASE_CLASSES = 'tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]';\nconst CONTAINER_CLASSES = merge([CONTAINER_BASE_CLASSES, INSET_BORDER]);\n\nexport const Menu = ({ triggerRef, children, open = true, offset = [0, 8], onClose }: MenuProps) => {\n    const [isMenuOpen, setIsMenuOpen] = useState(open);\n    const [menuContainerRef, setMenuContainerRef] = useState<HTMLElement | null>(null);\n    const [menuOpenerRef, setMenuOpenerRef] = useState<HTMLElement | null>(null);\n\n    const menuKeyboardNavigationAction = useMenuKeyboardNavigation(\n        isMenuOpen,\n        menuContainerRef,\n        'li > a, li > button:not(:disabled)',\n    );\n\n    const handleClickOutside = useCallback(() => {\n        if (menuOpenerRef && isMenuOpen) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuOpenerRef, isMenuOpen, onClose]);\n\n    useClickOutside(menuContainerRef, handleClickOutside, [menuOpenerRef as HTMLElement]);\n\n    const popperInstance = usePopper(menuOpenerRef, menuContainerRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'flip',\n                enabled: true,\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset,\n                },\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const trigger = triggerRef?.current;\n\n        if (trigger) {\n            setMenuOpenerRef(trigger as HTMLElement);\n        }\n    }, [triggerRef]);\n\n    useEffect(() => {\n        setIsMenuOpen(open);\n        if (popperInstance.update && open) {\n            popperInstance.update();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    useEffect(() => {\n        if (menuKeyboardNavigationAction === 'CLOSE_MENU' && menuOpenerRef) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuKeyboardNavigationAction, onClose, menuOpenerRef]);\n\n    return (\n        <nav\n            className={merge([CONTAINER_CLASSES, isMenuOpen ? 'tw-block' : 'tw-hidden'])}\n            role={isMenuOpen ? 'dialog' : ''}\n            ref={setMenuContainerRef}\n            style={menuOpenerRef ? popperInstance.styles.popper : {}}\n            {...(menuOpenerRef ? popperInstance.attributes.popper : {})}\n        >\n            <ol className=\"tw-list-none\" role=\"menu\">\n                {children}\n            </ol>\n        </nav>\n    );\n};\nMenu.displayName = 'FondueMenu';\n"],"names":["CONTAINER_BASE_CLASSES","CONTAINER_CLASSES","merge","INSET_BORDER","Menu","triggerRef","children","open","offset","onClose","isMenuOpen","setIsMenuOpen","useState","menuContainerRef","setMenuContainerRef","menuOpenerRef","setMenuOpenerRef","menuKeyboardNavigationAction","useMenuKeyboardNavigation","handleClickOutside","useCallback","useClickOutside","popperInstance","usePopper","useEffect","trigger","React"],"mappings":";;;;;;AAmBA,MAAMA,IAAyB,yEACzBC,IAAoBC,EAAM,CAACF,GAAwBG,CAAY,CAAC,GAEzDC,IAAO,CAAC,EAAE,YAAAC,GAAY,UAAAC,GAAU,MAAAC,IAAO,IAAM,QAAAC,IAAS,CAAC,GAAG,CAAC,GAAG,SAAAC,QAAyB;AAChG,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASL,CAAI,GAC3C,CAACM,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,CAACG,GAAeC,CAAgB,IAAIJ,EAA6B,IAAI,GAErEK,IAA+BC;AAAA,IACjCR;AAAA,IACAG;AAAA,IACA;AAAA,EAAA,GAGEM,IAAqBC,EAAY,MAAM;AACzC,IAAIL,KAAiBL,MACjBC,EAAc,EAAK,GACfF,KACQA;EAGjB,GAAA,CAACM,GAAeL,GAAYD,CAAO,CAAC;AAEvC,EAAAY,EAAgBR,GAAkBM,GAAoB,CAACJ,CAA4B,CAAC;AAE9E,QAAAO,IAAiBC,EAAUR,GAAeF,GAAkB;AAAA,IAC9D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,MACb;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAL;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA,CACH;AAED,SAAAgB,EAAU,MAAM;AACZ,UAAMC,IAAUpB,KAAA,gBAAAA,EAAY;AAE5B,IAAIoB,KACAT,EAAiBS,CAAsB;AAAA,EAC3C,GACD,CAACpB,CAAU,CAAC,GAEfmB,EAAU,MAAM;AACZ,IAAAb,EAAcJ,CAAI,GACde,EAAe,UAAUf,KACzBe,EAAe,OAAO;AAAA,EAC1B,GAED,CAACf,CAAI,CAAC,GAETiB,EAAU,MAAM;AACR,IAAAP,MAAiC,gBAAgBF,MACjDJ,EAAc,EAAK,GACfF,KACQA;EAGjB,GAAA,CAACQ,GAA8BR,GAASM,CAAa,CAAC,GAGrD,gBAAAW,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWxB,EAAM,CAACD,GAAmBS,IAAa,aAAa,WAAW,CAAC;AAAA,MAC3E,MAAMA,IAAa,WAAW;AAAA,MAC9B,KAAKI;AAAA,MACL,OAAOC,IAAgBO,EAAe,OAAO,SAAS,CAAC;AAAA,MACtD,GAAIP,IAAgBO,EAAe,WAAW,SAAS,CAAC;AAAA,IAAA;AAAA,oCAExD,MAAG,EAAA,WAAU,gBAAe,MAAK,UAC7BhB,CACL;AAAA,EAAA;AAGZ;AACAF,EAAK,cAAc;"}
+{"version":3,"file":"Menu.es.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { PropsWithChildren, ReactNode, RefObject, useCallback, useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\nimport { merge } from '@utilities/merge';\nimport { useMenuKeyboardNavigation } from '@components/Menu/useMenuKeyboardNavigation';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { INSET_BORDER } from '@utilities/borderStyle';\n\ninterface Props {\n    triggerRef?: RefObject<Element>;\n    open?: boolean;\n    children?: ReactNode | ReactNode[];\n    onClose?: () => void;\n    offset?: [number, number];\n}\n\nexport type MenuProps = PropsWithChildren<Props>;\n\nconst CONTAINER_BASE_CLASSES = 'tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]';\nconst CONTAINER_CLASSES = merge([CONTAINER_BASE_CLASSES, INSET_BORDER]);\n\nexport const Menu = ({ triggerRef, children, open = true, offset = [0, 8], onClose }: MenuProps) => {\n    const [isMenuOpen, setIsMenuOpen] = useState(open);\n    const [menuContainerRef, setMenuContainerRef] = useState<HTMLElement | null>(null);\n    const [menuOpenerRef, setMenuOpenerRef] = useState<HTMLElement | null>(null);\n\n    const menuKeyboardNavigationAction = useMenuKeyboardNavigation(\n        isMenuOpen,\n        menuContainerRef,\n        'li > a, li > button:not(:disabled)',\n    );\n\n    const handleClickOutside = useCallback(() => {\n        if (menuOpenerRef && isMenuOpen) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuOpenerRef, isMenuOpen, onClose]);\n\n    useClickOutside(menuContainerRef, handleClickOutside, [menuOpenerRef as HTMLElement]);\n\n    const popperInstance = usePopper(menuOpenerRef, menuContainerRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'flip',\n                enabled: true,\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset,\n                },\n            },\n        ],\n    });\n\n    useEffect(() => {\n        const trigger = triggerRef?.current;\n\n        if (trigger) {\n            setMenuOpenerRef(trigger as HTMLElement);\n        }\n    }, [triggerRef]);\n\n    useEffect(() => {\n        setIsMenuOpen(open);\n        if (popperInstance.update && open) {\n            popperInstance.update();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    useEffect(() => {\n        if (menuKeyboardNavigationAction === 'CLOSE_MENU' && menuOpenerRef) {\n            setIsMenuOpen(false);\n            if (onClose) {\n                onClose();\n            }\n        }\n    }, [menuKeyboardNavigationAction, onClose, menuOpenerRef]);\n\n    return (\n        <nav\n            className={merge([CONTAINER_CLASSES, isMenuOpen ? 'tw-block' : 'tw-hidden'])}\n            role={isMenuOpen ? 'dialog' : ''}\n            ref={setMenuContainerRef}\n            style={menuOpenerRef ? popperInstance.styles.popper : {}}\n            {...(menuOpenerRef ? popperInstance.attributes.popper : {})}\n            data-test-id=\"menu\"\n        >\n            <ol className=\"tw-list-none\" role=\"menu\">\n                {children}\n            </ol>\n        </nav>\n    );\n};\nMenu.displayName = 'FondueMenu';\n"],"names":["CONTAINER_BASE_CLASSES","CONTAINER_CLASSES","merge","INSET_BORDER","Menu","triggerRef","children","open","offset","onClose","isMenuOpen","setIsMenuOpen","useState","menuContainerRef","setMenuContainerRef","menuOpenerRef","setMenuOpenerRef","menuKeyboardNavigationAction","useMenuKeyboardNavigation","handleClickOutside","useCallback","useClickOutside","popperInstance","usePopper","useEffect","trigger","React"],"mappings":";;;;;;AAmBA,MAAMA,IAAyB,yEACzBC,IAAoBC,EAAM,CAACF,GAAwBG,CAAY,CAAC,GAEzDC,IAAO,CAAC,EAAE,YAAAC,GAAY,UAAAC,GAAU,MAAAC,IAAO,IAAM,QAAAC,IAAS,CAAC,GAAG,CAAC,GAAG,SAAAC,QAAyB;AAChG,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASL,CAAI,GAC3C,CAACM,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,CAACG,GAAeC,CAAgB,IAAIJ,EAA6B,IAAI,GAErEK,IAA+BC;AAAA,IACjCR;AAAA,IACAG;AAAA,IACA;AAAA,EAAA,GAGEM,IAAqBC,EAAY,MAAM;AACzC,IAAIL,KAAiBL,MACjBC,EAAc,EAAK,GACfF,KACQA;EAGjB,GAAA,CAACM,GAAeL,GAAYD,CAAO,CAAC;AAEvC,EAAAY,EAAgBR,GAAkBM,GAAoB,CAACJ,CAA4B,CAAC;AAE9E,QAAAO,IAAiBC,EAAUR,GAAeF,GAAkB;AAAA,IAC9D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,MACb;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAL;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA,CACH;AAED,SAAAgB,EAAU,MAAM;AACZ,UAAMC,IAAUpB,KAAA,gBAAAA,EAAY;AAE5B,IAAIoB,KACAT,EAAiBS,CAAsB;AAAA,EAC3C,GACD,CAACpB,CAAU,CAAC,GAEfmB,EAAU,MAAM;AACZ,IAAAb,EAAcJ,CAAI,GACde,EAAe,UAAUf,KACzBe,EAAe,OAAO;AAAA,EAC1B,GAED,CAACf,CAAI,CAAC,GAETiB,EAAU,MAAM;AACR,IAAAP,MAAiC,gBAAgBF,MACjDJ,EAAc,EAAK,GACfF,KACQA;EAGjB,GAAA,CAACQ,GAA8BR,GAASM,CAAa,CAAC,GAGrD,gBAAAW,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWxB,EAAM,CAACD,GAAmBS,IAAa,aAAa,WAAW,CAAC;AAAA,MAC3E,MAAMA,IAAa,WAAW;AAAA,MAC9B,KAAKI;AAAA,MACL,OAAOC,IAAgBO,EAAe,OAAO,SAAS,CAAC;AAAA,MACtD,GAAIP,IAAgBO,EAAe,WAAW,SAAS,CAAC;AAAA,MACzD,gBAAa;AAAA,IAAA;AAAA,oCAEZ,MAAG,EAAA,WAAU,gBAAe,MAAK,UAC7BhB,CACL;AAAA,EAAA;AAGZ;AACAF,EAAK,cAAc;"}

package/dist/components/ScrollWrapper/ScrollWrapper.es.js

@@ -1,4 +1,4 @@
-import { useFocusRing as p } from "@react-aria/focus";
+import { useFocusRing as d } from "@react-aria/focus";
 import e, { useRef as b } from "react";
 import "../../styles.css.es.js";
 import { useScrollWrapper as u } from "./hooks/useScrollWrapper.es.js";
@@ -9,7 +9,7 @@ const i = {
   bottom: "linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)",
   top: "linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)"
 }, E = ({ direction: r = o.Vertical, children: n }) => {
-  const t = b(null), [{ showTopShadow: c, showBottomShadow: s }, w] = u(t), { isFocusVisible: m, focusProps: d } = p(), l = r === o.Vertical || r === o.Both, a = t.current ? t.current.clientWidth + 8 : "100%";
+  const t = b(null), [{ showTopShadow: c, showBottomShadow: s }, w] = u(t), { isFocusVisible: m, focusProps: p } = d(), l = r === o.Vertical || r === o.Both, a = t.current ? t.current.clientWidth + 8 : "100%";
   return /* @__PURE__ */ e.createElement(
     "div",
     {
@@ -35,11 +35,11 @@ const i = {
         "aria-label": "Scrollable dialogue content",
         className: g([
           f[r],
-          "tw-flex-auto tw-min-h-0 tw-outline-none tw-pb-2 tw-px-2 tw--mx-2",
+          "tw-flex-auto tw-min-h-0 tw-outline-none tw-pt-px tw-pb-2 tw-px-2 tw--mx-2",
           m && h
         ]),
         ...w,
-        ...d
+        ...p
       },
       n
     ),

package/dist/components/ScrollWrapper/ScrollWrapper.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollWrapper.es.js","sources":["../../../src/components/ScrollWrapper/ScrollWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport React, { FC, useRef } from 'react';\nimport { FOCUS_STYLE, merge } from '../..';\nimport { useScrollWrapper } from './hooks/useScrollWrapper';\nimport { ScrollWrapperDirection, ScrollWrapperProps, scrollWrapperDirections } from './types';\n\nconst GRADIENTS = {\n    bottom: 'linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n    top: 'linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n};\n\nexport const ScrollWrapper: FC<ScrollWrapperProps> = ({ direction = ScrollWrapperDirection.Vertical, children }) => {\n    const scrollingContainer = useRef<HTMLDivElement>(null);\n\n    const [{ showTopShadow, showBottomShadow }, scrollDivProps] = useScrollWrapper(scrollingContainer);\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const directionVertical =\n        direction === ScrollWrapperDirection.Vertical || direction === ScrollWrapperDirection.Both;\n\n    const gradientWidth = scrollingContainer.current ? scrollingContainer.current.clientWidth + 8 : '100%';\n\n    return (\n        <div\n            data-test-id=\"scroll-wrapper\"\n            className=\"tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0\"\n        >\n            {directionVertical && showTopShadow && (\n                <div\n                    className=\"tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line\"\n                    style={{\n                        background: GRADIENTS.top,\n                        width: gradientWidth,\n                    }}\n                />\n            )}\n            <div\n                ref={scrollingContainer}\n                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n                tabIndex={0}\n                role=\"region\"\n                aria-label=\"Scrollable dialogue content\"\n                className={merge([\n                    scrollWrapperDirections[direction],\n                    'tw-flex-auto tw-min-h-0 tw-outline-none tw-pb-2 tw-px-2 tw--mx-2',\n                    isFocusVisible && FOCUS_STYLE,\n                ])}\n                {...scrollDivProps}\n                {...focusProps}\n            >\n                {children}\n            </div>\n            {directionVertical && showBottomShadow && (\n                <div\n                    className=\"tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line\"\n                    style={{\n                        background: GRADIENTS.bottom,\n                        width: gradientWidth,\n                    }}\n                />\n            )}\n        </div>\n    );\n};\nScrollWrapper.displayName = 'FondueScrollWrapper';\n"],"names":["GRADIENTS","ScrollWrapper","direction","ScrollWrapperDirection","children","scrollingContainer","useRef","showTopShadow","showBottomShadow","scrollDivProps","useScrollWrapper","isFocusVisible","focusProps","useFocusRing","directionVertical","gradientWidth","React","merge","scrollWrapperDirections","FOCUS_STYLE"],"mappings":";;;;;;;AAQA,MAAMA,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEaC,IAAwC,CAAC,EAAE,WAAAC,IAAYC,EAAuB,UAAU,UAAAC,QAAe;AAC1G,QAAAC,IAAqBC,EAAuB,IAAI,GAEhD,CAAC,EAAE,eAAAC,GAAe,kBAAAC,EAAA,GAAoBC,CAAc,IAAIC,EAAiBL,CAAkB,GAE3F,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IACFZ,MAAcC,EAAuB,YAAYD,MAAcC,EAAuB,MAEpFY,IAAgBV,EAAmB,UAAUA,EAAmB,QAAQ,cAAc,IAAI;AAG5F,SAAA,gBAAAW,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAU;AAAA,IAAA;AAAA,IAETF,KAAqBP,KAClB,gBAAAS,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAO;AAAA,UACH,YAAYhB,EAAU;AAAA,UACtB,OAAOe;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,IAEJ,gBAAAC,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKX;AAAA,QAEL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWY,EAAM;AAAA,UACbC,EAAwBhB,CAAS;AAAA,UACjC;AAAA,UACAS,KAAkBQ;AAAA,QAAA,CACrB;AAAA,QACA,GAAGV;AAAA,QACH,GAAGG;AAAA,MAAA;AAAA,MAEHR;AAAA,IACL;AAAA,IACCU,KAAqBN,KAClB,gBAAAQ,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAO;AAAA,UACH,YAAYhB,EAAU;AAAA,UACtB,OAAOe;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAIhB;AACAd,EAAc,cAAc;"}
+{"version":3,"file":"ScrollWrapper.es.js","sources":["../../../src/components/ScrollWrapper/ScrollWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport React, { FC, useRef } from 'react';\nimport { FOCUS_STYLE, merge } from '../..';\nimport { useScrollWrapper } from './hooks/useScrollWrapper';\nimport { ScrollWrapperDirection, ScrollWrapperProps, scrollWrapperDirections } from './types';\n\nconst GRADIENTS = {\n    bottom: 'linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n    top: 'linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)',\n};\n\nexport const ScrollWrapper: FC<ScrollWrapperProps> = ({ direction = ScrollWrapperDirection.Vertical, children }) => {\n    const scrollingContainer = useRef<HTMLDivElement>(null);\n\n    const [{ showTopShadow, showBottomShadow }, scrollDivProps] = useScrollWrapper(scrollingContainer);\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const directionVertical =\n        direction === ScrollWrapperDirection.Vertical || direction === ScrollWrapperDirection.Both;\n\n    const gradientWidth = scrollingContainer.current ? scrollingContainer.current.clientWidth + 8 : '100%';\n\n    return (\n        <div\n            data-test-id=\"scroll-wrapper\"\n            className=\"tw-h-full tw-relative tw-flex-auto tw-flex tw-flex-col tw-min-h-0\"\n        >\n            {directionVertical && showTopShadow && (\n                <div\n                    className=\"tw-h-3 tw-w-full tw-absolute tw-z-10 tw-top-0 tw-left-0 tw-mix-blend-darken tw-border-t tw-border-line\"\n                    style={{\n                        background: GRADIENTS.top,\n                        width: gradientWidth,\n                    }}\n                />\n            )}\n            <div\n                ref={scrollingContainer}\n                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n                tabIndex={0}\n                role=\"region\"\n                aria-label=\"Scrollable dialogue content\"\n                className={merge([\n                    scrollWrapperDirections[direction],\n                    'tw-flex-auto tw-min-h-0 tw-outline-none tw-pt-px tw-pb-2 tw-px-2 tw--mx-2',\n                    isFocusVisible && FOCUS_STYLE,\n                ])}\n                {...scrollDivProps}\n                {...focusProps}\n            >\n                {children}\n            </div>\n            {directionVertical && showBottomShadow && (\n                <div\n                    className=\"tw-h-3 tw-absolute tw-z-10 tw-bottom-0 tw-left-0 tw-mix-blend-darken tw-border-b tw-border-line\"\n                    style={{\n                        background: GRADIENTS.bottom,\n                        width: gradientWidth,\n                    }}\n                />\n            )}\n        </div>\n    );\n};\nScrollWrapper.displayName = 'FondueScrollWrapper';\n"],"names":["GRADIENTS","ScrollWrapper","direction","ScrollWrapperDirection","children","scrollingContainer","useRef","showTopShadow","showBottomShadow","scrollDivProps","useScrollWrapper","isFocusVisible","focusProps","useFocusRing","directionVertical","gradientWidth","React","merge","scrollWrapperDirections","FOCUS_STYLE"],"mappings":";;;;;;;AAQA,MAAMA,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEaC,IAAwC,CAAC,EAAE,WAAAC,IAAYC,EAAuB,UAAU,UAAAC,QAAe;AAC1G,QAAAC,IAAqBC,EAAuB,IAAI,GAEhD,CAAC,EAAE,eAAAC,GAAe,kBAAAC,EAAA,GAAoBC,CAAc,IAAIC,EAAiBL,CAAkB,GAE3F,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAE9CC,IACFZ,MAAcC,EAAuB,YAAYD,MAAcC,EAAuB,MAEpFY,IAAgBV,EAAmB,UAAUA,EAAmB,QAAQ,cAAc,IAAI;AAG5F,SAAA,gBAAAW,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAU;AAAA,IAAA;AAAA,IAETF,KAAqBP,KAClB,gBAAAS,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAO;AAAA,UACH,YAAYhB,EAAU;AAAA,UACtB,OAAOe;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,IAEJ,gBAAAC,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKX;AAAA,QAEL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAWY,EAAM;AAAA,UACbC,EAAwBhB,CAAS;AAAA,UACjC;AAAA,UACAS,KAAkBQ;AAAA,QAAA,CACrB;AAAA,QACA,GAAGV;AAAA,QACH,GAAGG;AAAA,MAAA;AAAA,MAEHR;AAAA,IACL;AAAA,IACCU,KAAqBN,KAClB,gBAAAQ,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,OAAO;AAAA,UACH,YAAYhB,EAAU;AAAA,UACtB,OAAOe;AAAA,QACX;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAIhB;AACAd,EAAc,cAAc;"}

package/dist/components/Tree/TreeItem.es.js

@@ -189,7 +189,7 @@ const ie = 0.4, me = 1, pe = ({
           "button",
           {
             "data-test-id": "tree-item-toggle",
-            className: "tw-flex tw-items-center tw-justify-center tw-py-3 tw-cursor-pointer",
+            className: "tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer",
             onClick: q,
             onKeyDown: z,
             tabIndex: 0

package/dist/components/Tree/TreeItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.es.js","sources":["../../../src/components/Tree/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useDrag } from 'react-dnd';\n\nimport { merge } from '@utilities/merge';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\n\nimport { DropZone } from '@components/DropZone';\nimport type { TreeItemProps } from '@components/Tree/types';\nimport { useTreeContext } from '@components/Tree/TreeContext';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport { getAcceptTypes, getItemPositionInParent, getNextItemToFocus, getPreviousItemToFocus } from './helpers';\nimport { cloneThroughFragments, flattenChildren, isDescendant } from './utils';\n\nconst DRAGGING_OPACITY = 0.4;\nconst DEFAULT_OPACITY = 1;\n\nexport const TreeItem = ({\n    id,\n    parentId,\n    label,\n    draggable: propsDraggable,\n    contentComponent,\n    onDrop,\n    type,\n    accepts,\n    children,\n    level,\n}: TreeItemProps) => {\n    const {\n        treeId,\n        draggable,\n        onSelect,\n        onExpand,\n        onDrop: onTreeDrop,\n        registerTreeItem,\n        registerTreeItemChildren,\n        unregisterTreeItem,\n        treeState,\n    } = useTreeContext();\n\n    const treeItemState = treeState.items.get(id);\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    const [hovered, setHovered] = useState<boolean>(false);\n    const handleMouseEnter = useCallback(() => setHovered(true), []);\n    const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n    const sort = useMemo(\n        () => (treeItemState?.parentId ? getItemPositionInParent(id, treeItemState.parentId, treeState) : -1),\n        [id, treeItemState?.parentId, treeState],\n    );\n\n    useEffect(() => {\n        if (itemRef.current) {\n            registerTreeItem({\n                id,\n                parentId,\n                level: level ?? 0,\n                domElement: itemRef.current,\n            });\n\n            return () => {\n                unregisterTreeItem(id);\n            };\n        }\n    }, [id, level, parentId, registerTreeItem, unregisterTreeItem, itemRef]);\n\n    useEffect(() => {\n        const childrenIds = flattenChildren(children).map((child) => child.props.id);\n        registerTreeItemChildren({ id, childrenIds: childrenIds.length > 0 ? childrenIds : undefined });\n    }, [children, id, registerTreeItemChildren]);\n\n    const [{ opacity }, drag] = useDrag({\n        item: { id, type, sort },\n        collect: (monitor) => ({\n            opacity: monitor.isDragging() ? DRAGGING_OPACITY : DEFAULT_OPACITY,\n            isDragging: monitor.isDragging(),\n        }),\n        type: type ?? treeId,\n        canDrag: propsDraggable ?? draggable,\n    });\n\n    const handleDrop = useCallback(\n        (\n            targetItem: DraggableItem<{ id: string; sort: number }>,\n            sourceItem: DraggableItem<{ id: string; sort: number }>,\n            position: DropZonePosition,\n        ) => {\n            onTreeDrop(targetItem, sourceItem, position);\n            onDrop?.(targetItem, sourceItem, position);\n        },\n        [onDrop, onTreeDrop],\n    );\n\n    const handleSelect = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            if (itemRef.current && isDescendant(event.target as HTMLElement, itemRef.current)) {\n                event.stopPropagation();\n                onSelect(id);\n            }\n        },\n        [id, onSelect],\n    );\n\n    const handleExpandClick = useCallback(\n        (event: MouseEvent) => {\n            event.stopPropagation();\n            onExpand(id, !treeState.expandedIds.has(id));\n        },\n        [id, onExpand, treeState.expandedIds],\n    );\n\n    const handleExpandKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (document.activeElement === itemRef.current && (event.key === 'Space' || event.key === 'Enter')) {\n                event.stopPropagation();\n                onExpand(id, !treeState.expandedIds.has(id));\n            }\n        },\n        [id, onExpand, treeState.expandedIds],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (document.activeElement === itemRef.current) {\n                switch (event.code) {\n                    case 'Enter':\n                        event.preventDefault();\n                        onSelect(id);\n                        break;\n\n                    case 'Space':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds) {\n                            onExpand(id, !treeState.expandedIds.has(id));\n                        } else {\n                            onSelect(id);\n                        }\n                        break;\n\n                    case 'ArrowRight':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds && !treeState.expandedIds.has(id)) {\n                            onExpand(id, true);\n                        } else if (treeItemState?.childrenIds?.[0]) {\n                            const firstChildId = treeItemState.childrenIds[0];\n                            const firstChildState = treeState.items.get(firstChildId);\n                            firstChildState?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowLeft':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds && treeState.expandedIds.has(id)) {\n                            onExpand(id, false);\n                        } else if (treeItemState?.parentId) {\n                            const parentId = treeItemState.parentId;\n                            const parentState = treeState.items.get(parentId);\n                            parentState?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowUp':\n                        event.preventDefault();\n                        if (treeItemState) {\n                            const previousItemToFocus = getPreviousItemToFocus(id, treeItemState, treeState);\n                            previousItemToFocus?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowDown':\n                        event.preventDefault();\n                        if (treeItemState) {\n                            const nextItemToFocus = getNextItemToFocus(id, treeItemState, treeState);\n                            nextItemToFocus?.domElement?.focus();\n                        }\n                        break;\n                }\n            }\n        },\n        [id, onExpand, onSelect, treeItemState, treeState],\n    );\n\n    const enhancedChildren = useMemo(\n        () => (children ? cloneThroughFragments(children, { parentId: id, level: (level || 0) + 1 }) : []),\n        [children, id, level],\n    );\n\n    const hasChildren = Children.count(enhancedChildren) > 0;\n\n    const paddingLeftByLevel = `${treeItemState?.level ?? 0}rem`;\n\n    return (\n        <li data-test-id=\"tree-item\" ref={drag} style={{ opacity, transform: 'translate3d(0, 0, 0)' }}>\n            {sort === 0 ? (\n                <div\n                    style={{\n                        paddingLeft: paddingLeftByLevel,\n                    }}\n                >\n                    <DropZone\n                        data-position={DropZonePosition.Before}\n                        data={{\n                            targetItem: { id, sort: sort ?? 0, type },\n                            position: DropZonePosition.Before,\n                        }}\n                        onDrop={handleDrop}\n                        accept={getAcceptTypes(accepts ?? treeId, 'before')}\n                    />\n                </div>\n            ) : null}\n\n            <DropZone\n                data-position={DropZonePosition.Within}\n                data={{\n                    targetItem: { id, sort: sort ?? 0, type },\n                    position: DropZonePosition.Within,\n                }}\n                onDrop={handleDrop}\n                accept={getAcceptTypes(accepts ?? treeId, 'within')}\n            >\n                <div\n                    className={merge([\n                        treeState.selectedIds.has(id)\n                            ? 'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover'\n                            : 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                    ])}\n                    style={{\n                        paddingLeft: paddingLeftByLevel,\n                    }}\n                >\n                    <div\n                        ref={itemRef}\n                        className={merge([\n                            'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n                            FOCUS_VISIBLE_STYLE,\n                        ])}\n                        role=\"treeitem\"\n                        aria-label={label}\n                        aria-level={treeItemState?.level}\n                        aria-selected={treeState.selectedIds.has(id)}\n                        aria-expanded={treeState.expandedIds.has(id)}\n                        tabIndex={0}\n                        onClick={handleSelect}\n                        onKeyDown={handleKeyDown}\n                        onMouseEnter={handleMouseEnter}\n                        onMouseLeave={handleMouseLeave}\n                    >\n                        <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6\">\n                            <div className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\">\n                                {hasChildren && (\n                                    <button\n                                        data-test-id=\"tree-item-toggle\"\n                                        className=\"tw-flex tw-items-center tw-justify-center tw-py-3 tw-cursor-pointer\"\n                                        onClick={handleExpandClick}\n                                        onKeyDown={handleExpandKeyDown}\n                                        tabIndex={0}\n                                    >\n                                        <div\n                                            className={merge([\n                                                'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                                                treeState.selectedIds.has(id) && 'tw-text-box-selected-strong-inverse',\n                                                treeState.expandedIds.has(id) && 'tw-rotate-90',\n                                            ])}\n                                        />\n                                    </button>\n                                )}\n                            </div>\n\n                            {label ? <span>{label}</span> : null}\n\n                            {contentComponent?.({ selected: treeState.selectedIds.has(id) ?? false, hovered })}\n                        </div>\n                    </div>\n                </div>\n            </DropZone>\n\n            {treeState.expandedIds.has(id) ? (\n                <ul\n                    className=\"tw-p-0 tw-m-0 tw-list-none tw-font-sans tw-font-normal tw-text-left\"\n                    data-test-id=\"sub-tree-items\"\n                >\n                    {enhancedChildren}\n                </ul>\n            ) : null}\n\n            <div\n                style={{\n                    paddingLeft: paddingLeftByLevel,\n                }}\n            >\n                <DropZone\n                    data-position={DropZonePosition.After}\n                    data={{\n                        targetItem: { id, sort: sort ?? 0, type },\n                        position: DropZonePosition.After,\n                    }}\n                    onDrop={handleDrop}\n                    accept={getAcceptTypes(accepts ?? treeId, 'after')}\n                />\n            </div>\n        </li>\n    );\n};\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["DRAGGING_OPACITY","DEFAULT_OPACITY","TreeItem","id","parentId","label","propsDraggable","contentComponent","onDrop","type","accepts","children","level","treeId","draggable","onSelect","onExpand","onTreeDrop","registerTreeItem","registerTreeItemChildren","unregisterTreeItem","treeState","useTreeContext","treeItemState","itemRef","useRef","hovered","setHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","sort","useMemo","getItemPositionInParent","useEffect","childrenIds","flattenChildren","child","opacity","drag","useDrag","monitor","handleDrop","targetItem","sourceItem","position","handleSelect","event","isDescendant","handleExpandClick","handleExpandKeyDown","handleKeyDown","_a","firstChildId","firstChildState","_b","parentState","_c","previousItemToFocus","getPreviousItemToFocus","_d","nextItemToFocus","getNextItemToFocus","_e","enhancedChildren","cloneThroughFragments","hasChildren","Children","paddingLeftByLevel","React","DropZone","DropZonePosition","getAcceptTypes","merge","FOCUS_VISIBLE_STYLE"],"mappings":"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"}
+{"version":3,"file":"TreeItem.es.js","sources":["../../../src/components/Tree/TreeItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useDrag } from 'react-dnd';\n\nimport { merge } from '@utilities/merge';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\n\nimport { DropZone } from '@components/DropZone';\nimport type { TreeItemProps } from '@components/Tree/types';\nimport { useTreeContext } from '@components/Tree/TreeContext';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nimport { getAcceptTypes, getItemPositionInParent, getNextItemToFocus, getPreviousItemToFocus } from './helpers';\nimport { cloneThroughFragments, flattenChildren, isDescendant } from './utils';\n\nconst DRAGGING_OPACITY = 0.4;\nconst DEFAULT_OPACITY = 1;\n\nexport const TreeItem = ({\n    id,\n    parentId,\n    label,\n    draggable: propsDraggable,\n    contentComponent,\n    onDrop,\n    type,\n    accepts,\n    children,\n    level,\n}: TreeItemProps) => {\n    const {\n        treeId,\n        draggable,\n        onSelect,\n        onExpand,\n        onDrop: onTreeDrop,\n        registerTreeItem,\n        registerTreeItemChildren,\n        unregisterTreeItem,\n        treeState,\n    } = useTreeContext();\n\n    const treeItemState = treeState.items.get(id);\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    const [hovered, setHovered] = useState<boolean>(false);\n    const handleMouseEnter = useCallback(() => setHovered(true), []);\n    const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n    const sort = useMemo(\n        () => (treeItemState?.parentId ? getItemPositionInParent(id, treeItemState.parentId, treeState) : -1),\n        [id, treeItemState?.parentId, treeState],\n    );\n\n    useEffect(() => {\n        if (itemRef.current) {\n            registerTreeItem({\n                id,\n                parentId,\n                level: level ?? 0,\n                domElement: itemRef.current,\n            });\n\n            return () => {\n                unregisterTreeItem(id);\n            };\n        }\n    }, [id, level, parentId, registerTreeItem, unregisterTreeItem, itemRef]);\n\n    useEffect(() => {\n        const childrenIds = flattenChildren(children).map((child) => child.props.id);\n        registerTreeItemChildren({ id, childrenIds: childrenIds.length > 0 ? childrenIds : undefined });\n    }, [children, id, registerTreeItemChildren]);\n\n    const [{ opacity }, drag] = useDrag({\n        item: { id, type, sort },\n        collect: (monitor) => ({\n            opacity: monitor.isDragging() ? DRAGGING_OPACITY : DEFAULT_OPACITY,\n            isDragging: monitor.isDragging(),\n        }),\n        type: type ?? treeId,\n        canDrag: propsDraggable ?? draggable,\n    });\n\n    const handleDrop = useCallback(\n        (\n            targetItem: DraggableItem<{ id: string; sort: number }>,\n            sourceItem: DraggableItem<{ id: string; sort: number }>,\n            position: DropZonePosition,\n        ) => {\n            onTreeDrop(targetItem, sourceItem, position);\n            onDrop?.(targetItem, sourceItem, position);\n        },\n        [onDrop, onTreeDrop],\n    );\n\n    const handleSelect = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            if (itemRef.current && isDescendant(event.target as HTMLElement, itemRef.current)) {\n                event.stopPropagation();\n                onSelect(id);\n            }\n        },\n        [id, onSelect],\n    );\n\n    const handleExpandClick = useCallback(\n        (event: MouseEvent) => {\n            event.stopPropagation();\n            onExpand(id, !treeState.expandedIds.has(id));\n        },\n        [id, onExpand, treeState.expandedIds],\n    );\n\n    const handleExpandKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (document.activeElement === itemRef.current && (event.key === 'Space' || event.key === 'Enter')) {\n                event.stopPropagation();\n                onExpand(id, !treeState.expandedIds.has(id));\n            }\n        },\n        [id, onExpand, treeState.expandedIds],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (document.activeElement === itemRef.current) {\n                switch (event.code) {\n                    case 'Enter':\n                        event.preventDefault();\n                        onSelect(id);\n                        break;\n\n                    case 'Space':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds) {\n                            onExpand(id, !treeState.expandedIds.has(id));\n                        } else {\n                            onSelect(id);\n                        }\n                        break;\n\n                    case 'ArrowRight':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds && !treeState.expandedIds.has(id)) {\n                            onExpand(id, true);\n                        } else if (treeItemState?.childrenIds?.[0]) {\n                            const firstChildId = treeItemState.childrenIds[0];\n                            const firstChildState = treeState.items.get(firstChildId);\n                            firstChildState?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowLeft':\n                        event.preventDefault();\n                        if (treeItemState?.childrenIds && treeState.expandedIds.has(id)) {\n                            onExpand(id, false);\n                        } else if (treeItemState?.parentId) {\n                            const parentId = treeItemState.parentId;\n                            const parentState = treeState.items.get(parentId);\n                            parentState?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowUp':\n                        event.preventDefault();\n                        if (treeItemState) {\n                            const previousItemToFocus = getPreviousItemToFocus(id, treeItemState, treeState);\n                            previousItemToFocus?.domElement?.focus();\n                        }\n                        break;\n\n                    case 'ArrowDown':\n                        event.preventDefault();\n                        if (treeItemState) {\n                            const nextItemToFocus = getNextItemToFocus(id, treeItemState, treeState);\n                            nextItemToFocus?.domElement?.focus();\n                        }\n                        break;\n                }\n            }\n        },\n        [id, onExpand, onSelect, treeItemState, treeState],\n    );\n\n    const enhancedChildren = useMemo(\n        () => (children ? cloneThroughFragments(children, { parentId: id, level: (level || 0) + 1 }) : []),\n        [children, id, level],\n    );\n\n    const hasChildren = Children.count(enhancedChildren) > 0;\n\n    const paddingLeftByLevel = `${treeItemState?.level ?? 0}rem`;\n\n    return (\n        <li data-test-id=\"tree-item\" ref={drag} style={{ opacity, transform: 'translate3d(0, 0, 0)' }}>\n            {sort === 0 ? (\n                <div\n                    style={{\n                        paddingLeft: paddingLeftByLevel,\n                    }}\n                >\n                    <DropZone\n                        data-position={DropZonePosition.Before}\n                        data={{\n                            targetItem: { id, sort: sort ?? 0, type },\n                            position: DropZonePosition.Before,\n                        }}\n                        onDrop={handleDrop}\n                        accept={getAcceptTypes(accepts ?? treeId, 'before')}\n                    />\n                </div>\n            ) : null}\n\n            <DropZone\n                data-position={DropZonePosition.Within}\n                data={{\n                    targetItem: { id, sort: sort ?? 0, type },\n                    position: DropZonePosition.Within,\n                }}\n                onDrop={handleDrop}\n                accept={getAcceptTypes(accepts ?? treeId, 'within')}\n            >\n                <div\n                    className={merge([\n                        treeState.selectedIds.has(id)\n                            ? 'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover'\n                            : 'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                    ])}\n                    style={{\n                        paddingLeft: paddingLeftByLevel,\n                    }}\n                >\n                    <div\n                        ref={itemRef}\n                        className={merge([\n                            'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5 tw-h-10',\n                            FOCUS_VISIBLE_STYLE,\n                        ])}\n                        role=\"treeitem\"\n                        aria-label={label}\n                        aria-level={treeItemState?.level}\n                        aria-selected={treeState.selectedIds.has(id)}\n                        aria-expanded={treeState.expandedIds.has(id)}\n                        tabIndex={0}\n                        onClick={handleSelect}\n                        onKeyDown={handleKeyDown}\n                        onMouseEnter={handleMouseEnter}\n                        onMouseLeave={handleMouseLeave}\n                    >\n                        <div className=\"tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6\">\n                            <div className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\">\n                                {hasChildren && (\n                                    <button\n                                        data-test-id=\"tree-item-toggle\"\n                                        className=\"tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer\"\n                                        onClick={handleExpandClick}\n                                        onKeyDown={handleExpandKeyDown}\n                                        tabIndex={0}\n                                    >\n                                        <div\n                                            className={merge([\n                                                'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                                                treeState.selectedIds.has(id) && 'tw-text-box-selected-strong-inverse',\n                                                treeState.expandedIds.has(id) && 'tw-rotate-90',\n                                            ])}\n                                        />\n                                    </button>\n                                )}\n                            </div>\n\n                            {label ? <span>{label}</span> : null}\n\n                            {contentComponent?.({ selected: treeState.selectedIds.has(id) ?? false, hovered })}\n                        </div>\n                    </div>\n                </div>\n            </DropZone>\n\n            {treeState.expandedIds.has(id) ? (\n                <ul\n                    className=\"tw-p-0 tw-m-0 tw-list-none tw-font-sans tw-font-normal tw-text-left\"\n                    data-test-id=\"sub-tree-items\"\n                >\n                    {enhancedChildren}\n                </ul>\n            ) : null}\n\n            <div\n                style={{\n                    paddingLeft: paddingLeftByLevel,\n                }}\n            >\n                <DropZone\n                    data-position={DropZonePosition.After}\n                    data={{\n                        targetItem: { id, sort: sort ?? 0, type },\n                        position: DropZonePosition.After,\n                    }}\n                    onDrop={handleDrop}\n                    accept={getAcceptTypes(accepts ?? treeId, 'after')}\n                />\n            </div>\n        </li>\n    );\n};\nTreeItem.displayName = 'FondueTreeItem';\n"],"names":["DRAGGING_OPACITY","DEFAULT_OPACITY","TreeItem","id","parentId","label","propsDraggable","contentComponent","onDrop","type","accepts","children","level","treeId","draggable","onSelect","onExpand","onTreeDrop","registerTreeItem","registerTreeItemChildren","unregisterTreeItem","treeState","useTreeContext","treeItemState","itemRef","useRef","hovered","setHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","sort","useMemo","getItemPositionInParent","useEffect","childrenIds","flattenChildren","child","opacity","drag","useDrag","monitor","handleDrop","targetItem","sourceItem","position","handleSelect","event","isDescendant","handleExpandClick","handleExpandKeyDown","handleKeyDown","_a","firstChildId","firstChildState","_b","parentState","_c","previousItemToFocus","getPreviousItemToFocus","_d","nextItemToFocus","getNextItemToFocus","_e","enhancedChildren","cloneThroughFragments","hasChildren","Children","paddingLeftByLevel","React","DropZone","DropZonePosition","getAcceptTypes","merge","FOCUS_VISIBLE_STYLE"],"mappings":"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"}