@frontify/fondue 12.0.0-beta.6 → 12.0.0-beta.7

package/dist/components/RichTextEditor/utils/toolbarCalc.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbarCalc.es.js","sources":["../../../../src/components/RichTextEditor/utils/toolbarCalc.ts"],"sourcesContent":["import { ButtonGroupsPerRow } from '../EditorActions/Toolbar/types';\nimport { ButtonGroupWidths } from '../types';\nimport { EditorActions } from './actions';\n\nexport const getButtonGroupWidthsPerRow = (toolbarWidth: number, buttonGroupsWidths: ButtonGroupWidths) =>\n    buttonGroupsWidths.reduce<ButtonGroupWidths[]>((buttonGroupWidthsPerRow, { actions, buttonGroupWidth, index }) => {\n        const rowCount = Math.max(0, buttonGroupWidthsPerRow.length - 1);\n\n        buttonGroupWidthsPerRow[rowCount] = buttonGroupWidthsPerRow[rowCount] ?? [];\n\n        const currentRowWidth = (buttonGroupWidthsPerRow[rowCount] ?? [{ actions: [], buttonGroupWidth: 0 }]).reduce(\n            (prev, { buttonGroupWidth }) => prev + buttonGroupWidth,\n            0,\n        );\n\n        if (currentRowWidth + buttonGroupWidth <= toolbarWidth) {\n            buttonGroupWidthsPerRow[rowCount].push({ actions, buttonGroupWidth, index });\n        } else {\n            buttonGroupWidthsPerRow.push([{ actions, buttonGroupWidth, index }]);\n        }\n\n        return buttonGroupWidthsPerRow.filter((element) => element.length);\n    }, []);\n\nexport const calculateToolbarWidth = (toolbarButtonGroups: ButtonGroupWidths[] | ButtonGroupsPerRow) =>\n    Math.max(\n        0,\n        ...toolbarButtonGroups.map((element) =>\n            [...element, { buttonGroupWidth: 0 }].reduce((prev, { buttonGroupWidth }) => prev + buttonGroupWidth, 0),\n        ),\n    );\n\nconst BUTTON_GROUP_PADDING_PX = 12;\nconst BUTTON_GROUP_SIZE_PX = 26;\nconst BUTTON_GROUP_DROPDOWN_PX = 124;\n\nexport const getButtonGroupWidths = (toolbarActions: EditorActions[][]) =>\n    toolbarActions.map((actions, index) => ({\n        actions,\n        buttonGroupWidth: actions.reduce(\n            (prev, element: EditorActions) =>\n                element === EditorActions.TEXT_STYLES ? BUTTON_GROUP_DROPDOWN_PX : BUTTON_GROUP_SIZE_PX + prev,\n            BUTTON_GROUP_PADDING_PX,\n        ),\n        index,\n    }));\n"],"names":[],"mappings":";AAIa,MAAA,IAA6B,CAAC,GAAsB,MAC7D,EAAmB,OAA4B,CAAC,GAAyB,EAAE,YAAS,qBAAkB,eAAY;;AAC9G,QAAM,IAAW,KAAK,IAAI,GAAG,EAAwB,SAAS,CAAC;AAEvC,WAAA,KAAY,OAAwB,OAAxB,WAAqC,CAAA,GAOrE,AAAA,AAL6C,QAAA,OAAA,WAAa,CAAC,EAAE,SAAS,IAAI,kBAAkB,GAAG,GAAG,OAClG,CAAC,GAAM,EAAE,kBAAuB,QAAA,IAAO,GACvC,CACJ,IAEsB,KAAoB,IACtC,EAAwB,GAAU,KAAK,EAAE,YAAS,qBAAkB,UAAO,IAE3E,EAAwB,KAAK,CAAC,EAAE,YAAS,qBAAkB,SAAO,CAAA,CAAC,GAGhE,EAAwB,OAAO,CAAC,MAAY,EAAQ,MAAM;AACrE,GAAG,EAAE,GAEI,IAAwB,CAAC,MAClC,KAAK,IACD,GACA,GAAG,EAAoB,IAAI,CAAC,MACxB,CAAC,GAAG,GAAS,EAAE,kBAAkB,EAAG,CAAA,EAAE,OAAO,CAAC,GAAM,EAAE,0BAAuB,IAAO,GAAkB,CAAC,CAC3G,CACJ,GAEE,IAA0B,IAC1B,IAAuB,IACvB,IAA2B,KAEpB,IAAuB,CAAC,MACjC,EAAe,IAAI,CAAC,GAAS,MAAW;AAAA,EACpC;AAAA,EACA,kBAAkB,EAAQ,OACtB,CAAC,GAAM,MACH,MAAY,EAAc,cAAc,IAA2B,IAAuB,GAC9F,CACJ;AAAA,EACA;AACJ,EAAE;"}
+{"version":3,"file":"toolbarCalc.es.js","sources":["../../../../src/components/RichTextEditor/utils/toolbarCalc.ts"],"sourcesContent":["import { ButtonGroupsPerRow } from '../Toolbar/types';\nimport { ButtonGroupWidths } from '../types';\nimport { EditorActions } from './actions';\n\nexport const getButtonGroupWidthsPerRow = (toolbarWidth: number, buttonGroupsWidths: ButtonGroupWidths) =>\n    buttonGroupsWidths.reduce<ButtonGroupWidths[]>((buttonGroupWidthsPerRow, { actions, buttonGroupWidth, index }) => {\n        const rowCount = Math.max(0, buttonGroupWidthsPerRow.length - 1);\n\n        buttonGroupWidthsPerRow[rowCount] = buttonGroupWidthsPerRow[rowCount] ?? [];\n\n        const currentRowWidth = (buttonGroupWidthsPerRow[rowCount] ?? [{ actions: [], buttonGroupWidth: 0 }]).reduce(\n            (prev, { buttonGroupWidth }) => prev + buttonGroupWidth,\n            0,\n        );\n\n        if (currentRowWidth + buttonGroupWidth <= toolbarWidth) {\n            buttonGroupWidthsPerRow[rowCount].push({ actions, buttonGroupWidth, index });\n        } else {\n            buttonGroupWidthsPerRow.push([{ actions, buttonGroupWidth, index }]);\n        }\n\n        return buttonGroupWidthsPerRow.filter((element) => element.length);\n    }, []);\n\nexport const calculateToolbarWidth = (toolbarButtonGroups: ButtonGroupWidths[] | ButtonGroupsPerRow) =>\n    Math.max(\n        0,\n        ...toolbarButtonGroups.map((element) =>\n            [...element, { buttonGroupWidth: 0 }].reduce((prev, { buttonGroupWidth }) => prev + buttonGroupWidth, 0),\n        ),\n    );\n\nconst BUTTON_GROUP_PADDING_PX = 12;\nconst BUTTON_GROUP_SIZE_PX = 26;\nconst BUTTON_GROUP_DROPDOWN_PX = 124;\n\nexport const getButtonGroupWidths = (toolbarActions: EditorActions[][]) =>\n    toolbarActions.map((actions, index) => ({\n        actions,\n        buttonGroupWidth: actions.reduce(\n            (prev, element: EditorActions) =>\n                element === EditorActions.TEXT_STYLES ? BUTTON_GROUP_DROPDOWN_PX : BUTTON_GROUP_SIZE_PX + prev,\n            BUTTON_GROUP_PADDING_PX,\n        ),\n        index,\n    }));\n"],"names":[],"mappings":";AAIa,MAAA,IAA6B,CAAC,GAAsB,MAC7D,EAAmB,OAA4B,CAAC,GAAyB,EAAE,YAAS,qBAAkB,eAAY;;AAC9G,QAAM,IAAW,KAAK,IAAI,GAAG,EAAwB,SAAS,CAAC;AAEvC,WAAA,KAAY,OAAwB,OAAxB,WAAqC,CAAA,GAOrE,AAAA,AAL6C,QAAA,OAAA,WAAa,CAAC,EAAE,SAAS,IAAI,kBAAkB,GAAG,GAAG,OAClG,CAAC,GAAM,EAAE,kBAAuB,QAAA,IAAO,GACvC,CACJ,IAEsB,KAAoB,IACtC,EAAwB,GAAU,KAAK,EAAE,YAAS,qBAAkB,UAAO,IAE3E,EAAwB,KAAK,CAAC,EAAE,YAAS,qBAAkB,SAAO,CAAA,CAAC,GAGhE,EAAwB,OAAO,CAAC,MAAY,EAAQ,MAAM;AACrE,GAAG,EAAE,GAEI,IAAwB,CAAC,MAClC,KAAK,IACD,GACA,GAAG,EAAoB,IAAI,CAAC,MACxB,CAAC,GAAG,GAAS,EAAE,kBAAkB,EAAG,CAAA,EAAE,OAAO,CAAC,GAAM,EAAE,0BAAuB,IAAO,GAAkB,CAAC,CAC3G,CACJ,GAEE,IAA0B,IAC1B,IAAuB,IACvB,IAA2B,KAEpB,IAAuB,CAAC,MACjC,EAAe,IAAI,CAAC,GAAS,MAAW;AAAA,EACpC;AAAA,EACA,kBAAkB,EAAQ,OACtB,CAAC,GAAM,MACH,MAAY,EAAc,cAAc,IAA2B,IAAuB,GAC9F,CACJ;AAAA,EACA;AACJ,EAAE;"}

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

@@ -1350,6 +1350,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1691,22 +1703,22 @@ import "../../utilities/dnd/DndWrapper.es.js";
 import "react-dnd-html5-backend";
 import "@udecode/plate";
 import "../RichTextEditor/context/RichTextEditorContext.es.js";
-import "../RichTextEditor/EditorActions/Plugins/CheckboxListPlugin/CheckboxListButton/CheckboxListToolbarButton.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Custom1Plugin/createCustom1Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Custom2Plugin/createCustom2Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Custom3Plugin/createCustom3Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading1Plugin/createHeading1Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading2Plugin/createHeading2Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading3Plugin/createHeading3Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/createHeading4Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/CheckboxListPlugin/index.es.js";
+import "../RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListButton/CheckboxListToolbarButton.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Custom1Plugin/createCustom1Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Custom2Plugin/createCustom2Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Custom3Plugin/createCustom3Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading1Plugin/createHeading1Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading2Plugin/createHeading2Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading3Plugin/createHeading3Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/createHeading4Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
+import "../RichTextEditor/Plugins/CheckboxListPlugin/index.es.js";
 import "slate-react";
-import "../RichTextEditor/EditorActions/Plugins/LinkPlugin/index.es.js";
+import "../RichTextEditor/Plugins/LinkPlugin/index.es.js";
 import "slate";
 import "../RichTextEditor/EditorPositioningWrapper/index.es.js";
-import "../RichTextEditor/EditorActions/Plugins/index.es.js";
+import "../RichTextEditor/Plugins/index.es.js";
 import { useScrollWrapper as g } from "./hooks/useScrollWrapper.es.js";
 import { ScrollWrapperDirection as i, scrollWrapperDirections as h } from "./types.es.js";
 import "@react-stately/table";
@@ -1715,7 +1727,7 @@ import "../Tree/utils/mocks.es.js";
 const e = {
   bottom: "linear-gradient(180deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)",
   top: "linear-gradient(0deg, rgba(232, 233, 233, 0) 0%, #E8E9E9 100%)"
-}, aR = ({ direction: o = i.Vertical, children: l }) => {
+}, xR = ({ direction: o = i.Vertical, children: l }) => {
   const t = b(null), [{ showTopShadow: a, showBottomShadow: n }, c] = g(t), { isFocusVisible: s, focusProps: w } = d(), m = o === i.Vertical || o === i.Both, p = t.current ? t.current.clientWidth + 8 : "100%";
   return /* @__PURE__ */ r.createElement("div", {
     "data-test-id": "scroll-wrapper",
@@ -1747,6 +1759,6 @@ const e = {
   }));
 };
 export {
-  aR as ScrollWrapper
+  xR as ScrollWrapper
 };
 //# sourceMappingURL=ScrollWrapper.es.js.map

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};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEa,KAAwC,CAAC,EAAE,eAAY,EAAuB,UAAU,kBAAe;AAC1G,QAAA,IAAqB,EAAuB,IAAI,GAEhD,CAAC,EAAE,kBAAe,uBAAoB,KAAkB,EAAiB,CAAkB,GAE3F,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IACF,MAAc,EAAuB,YAAY,MAAc,EAAuB,MAEpF,IAAgB,EAAmB,UAAU,EAAmB,QAAQ,cAAc,IAAI;AAEhG,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,EAET,GAAA,KAAqB,KACjB,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,MACH,YAAY,EAAU;AAAA,MACtB,OAAO;AAAA,IACX;AAAA,EAAA,CACJ,GAEH,kBAAA,cAAA,OAAA;AAAA,IACG,KAAK;AAAA,IAEL,UAAU;AAAA,IACV,MAAK;AAAA,IACL,cAAW;AAAA,IACX,WAAW,EAAM;AAAA,MACb,EAAwB;AAAA,MACxB;AAAA,MACA,KAAkB;AAAA,IAAA,CACrB;AAAA,IACA,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,GAEH,CACL,GACC,KAAqB,KACjB,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,MACH,YAAY,EAAU;AAAA,MACtB,OAAO;AAAA,IACX;AAAA,EACJ,CAAA,CAER;AAER;"}
+{"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};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,IAAY;AAAA,EACd,QAAQ;AAAA,EACR,KAAK;AACT,GAEa,KAAwC,CAAC,EAAE,eAAY,EAAuB,UAAU,kBAAe;AAC1G,QAAA,IAAqB,EAAuB,IAAI,GAEhD,CAAC,EAAE,kBAAe,uBAAoB,KAAkB,EAAiB,CAAkB,GAE3F,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IACF,MAAc,EAAuB,YAAY,MAAc,EAAuB,MAEpF,IAAgB,EAAmB,UAAU,EAAmB,QAAQ,cAAc,IAAI;AAEhG,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,EAET,GAAA,KAAqB,KACjB,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,MACH,YAAY,EAAU;AAAA,MACtB,OAAO;AAAA,IACX;AAAA,EAAA,CACJ,GAEH,kBAAA,cAAA,OAAA;AAAA,IACG,KAAK;AAAA,IAEL,UAAU;AAAA,IACV,MAAK;AAAA,IACL,cAAW;AAAA,IACX,WAAW,EAAM;AAAA,MACb,EAAwB;AAAA,MACxB;AAAA,MACA,KAAkB;AAAA,IAAA,CACrB;AAAA,IACA,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,GAEH,CACL,GACC,KAAqB,KACjB,kBAAA,cAAA,OAAA;AAAA,IACG,WAAU;AAAA,IACV,OAAO;AAAA,MACH,YAAY,EAAU;AAAA,MACtB,OAAO;AAAA,IACX;AAAA,EACJ,CAAA,CAER;AAER;"}

package/dist/components/Table/TableCell.es.js

@@ -1350,6 +1350,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1690,28 +1702,28 @@ import "../../utilities/dnd/DndWrapper.es.js";
 import "react-dnd-html5-backend";
 import "@udecode/plate";
 import "../RichTextEditor/context/RichTextEditorContext.es.js";
-import "../RichTextEditor/EditorActions/Plugins/CheckboxListPlugin/CheckboxListButton/CheckboxListToolbarButton.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Custom1Plugin/createCustom1Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Custom2Plugin/createCustom2Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Custom3Plugin/createCustom3Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading1Plugin/createHeading1Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading2Plugin/createHeading2Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading3Plugin/createHeading3Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/createHeading4Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/CheckboxListPlugin/index.es.js";
+import "../RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListButton/CheckboxListToolbarButton.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Custom1Plugin/createCustom1Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Custom2Plugin/createCustom2Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Custom3Plugin/createCustom3Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading1Plugin/createHeading1Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading2Plugin/createHeading2Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading3Plugin/createHeading3Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/createHeading4Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
+import "../RichTextEditor/Plugins/CheckboxListPlugin/index.es.js";
 import "slate-react";
-import "../RichTextEditor/EditorActions/Plugins/LinkPlugin/index.es.js";
+import "../RichTextEditor/Plugins/LinkPlugin/index.es.js";
 import "slate";
 import "../RichTextEditor/EditorPositioningWrapper/index.es.js";
-import "../RichTextEditor/EditorActions/Plugins/index.es.js";
+import "../RichTextEditor/Plugins/index.es.js";
 import "../../styles.es.js";
 import { SelectionMode as k } from "./Table.es.js";
 import "react-textarea-autosize";
 import "../Tree/utils/mocks.es.js";
 var d = /* @__PURE__ */ ((t) => (t.Default = "Default", t.Checkbox = "Checkbox", t))(d || {});
-const eN = ({
+const dN = ({
   cell: t,
   selectionMode: l,
   type: f = "Default",
@@ -1757,7 +1769,7 @@ const eN = ({
   }, t.rendered);
 };
 export {
-  eN as TableCell,
+  dN as TableCell,
   d as TableCellType
 };
 //# sourceMappingURL=TableCell.es.js.map

package/dist/components/Table/TableCell.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.es.js","sources":["../../../src/components/Table/TableCell.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Checkbox as CheckboxComponent, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { merge } from '@utilities/merge';\nimport React, { Key, useRef } from 'react';\nimport { SelectionMode } from '..';\n\nexport enum TableCellType {\n    Default = 'Default',\n    Checkbox = 'Checkbox',\n}\n\nexport type TableCellProps = {\n    cell: any;\n    selectionMode: string;\n    type?: TableCellType;\n    isChecked?: boolean;\n    selectedRows: Key[];\n    setSelectedRows?: (ids?: Key[]) => void;\n};\n\nexport const TableCell = ({\n    cell,\n    selectionMode,\n    type = TableCellType.Default,\n    isChecked = false,\n    selectedRows,\n    setSelectedRows,\n}: TableCellProps) => {\n    const ref = useRef<HTMLTableCellElement | null>(null);\n\n    if (type === TableCellType.Checkbox) {\n        const { key } = cell;\n        const handleChange = () => {\n            if (!setSelectedRows) {\n                return;\n            }\n\n            if (isChecked) {\n                const filteredRows = selectedRows.filter((row) => row !== cell.parentKey);\n                setSelectedRows(filteredRows);\n                return;\n            }\n\n            const rowsToSelect =\n                selectionMode === SelectionMode.SingleSelect ? [cell.parentKey] : [...selectedRows, cell.parentKey];\n            setSelectedRows(rowsToSelect);\n        };\n\n        return (\n            <td\n                role=\"cell\"\n                ref={ref}\n                className={merge([\n                    'tw-pl-8 tw-py-4 tw-pr-4 tw-relative after:tw-absolute after:tw-left-0 after:tw-top-[-1px] after:tw-bottom-[-1px] after:tw-w-1',\n                    isChecked ? 'after:tw-bg-box-selected-strong' : 'after:tw-bg-transparent',\n                ])}\n                data-test-id=\"table-select-cell\"\n            >\n                <CheckboxComponent\n                    value={key}\n                    ariaLabel={cell['aria-label'] || key}\n                    state={isChecked ? CheckboxState.Checked : CheckboxState.Unchecked}\n                    onChange={handleChange}\n                />\n            </td>\n        );\n    }\n\n    return (\n        <td\n            role=\"cell\"\n            ref={ref}\n            className={merge([\n                'tw-p-4 tw-font-normal tw-text-xs focus:tw-outline-none',\n                isChecked ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n            ])}\n        >\n            {cell.rendered}\n        </td>\n    );\n};\n"],"names":["CheckboxComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMY,IAAA,sBAAA,MACE,GAAA,UAAA,WACC,EAAA,WAAA,YAFH,IAAA,KAAA,CAAA,CAAA;AAcL,MAAM,KAAY,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,UAAO;AAAA,EACP,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,MACkB;AACZ,QAAA,IAAM,EAAoC,IAAI;AAEpD,MAAI,MAAS,YAAwB;AACjC,UAAM,EAAE,WAAQ,GACV,IAAe,MAAM;AACvB,UAAI,CAAC;AACD;AAGJ,UAAI,GAAW;AACX,cAAM,IAAe,EAAa,OAAO,CAAC,MAAQ,MAAQ,EAAK,SAAS;AACxE,UAAgB,CAAY;AAC5B;AAAA,MACJ;AAEA,YAAM,IACF,MAAkB,EAAc,eAAe,CAAC,EAAK,SAAS,IAAI,CAAC,GAAG,GAAc,EAAK,SAAS;AACtG,QAAgB,CAAY;AAAA,IAAA;AAGhC,WACK,kBAAA,cAAA,MAAA;AAAA,MACG,MAAK;AAAA,MACL;AAAA,MACA,WAAW,EAAM;AAAA,QACb;AAAA,QACA,IAAY,oCAAoC;AAAA,MAAA,CACnD;AAAA,MACD,gBAAa;AAAA,IAAA,GAEZ,kBAAA,cAAAA,GAAA;AAAA,MACG,OAAO;AAAA,MACP,WAAW,EAAK,iBAAiB;AAAA,MACjC,OAAO,IAAY,EAAc,UAAU,EAAc;AAAA,MACzD,UAAU;AAAA,IACd,CAAA,CACJ;AAAA,EAER;AAEA,SACK,kBAAA,cAAA,MAAA;AAAA,IACG,MAAK;AAAA,IACL;AAAA,IACA,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAY,yCAAyC;AAAA,IAAA,CACxD;AAAA,EAAA,GAEA,EAAK,QACV;AAER;"}
+{"version":3,"file":"TableCell.es.js","sources":["../../../src/components/Table/TableCell.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Checkbox as CheckboxComponent, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { merge } from '@utilities/merge';\nimport React, { Key, useRef } from 'react';\nimport { SelectionMode } from '..';\n\nexport enum TableCellType {\n    Default = 'Default',\n    Checkbox = 'Checkbox',\n}\n\nexport type TableCellProps = {\n    cell: any;\n    selectionMode: string;\n    type?: TableCellType;\n    isChecked?: boolean;\n    selectedRows: Key[];\n    setSelectedRows?: (ids?: Key[]) => void;\n};\n\nexport const TableCell = ({\n    cell,\n    selectionMode,\n    type = TableCellType.Default,\n    isChecked = false,\n    selectedRows,\n    setSelectedRows,\n}: TableCellProps) => {\n    const ref = useRef<HTMLTableCellElement | null>(null);\n\n    if (type === TableCellType.Checkbox) {\n        const { key } = cell;\n        const handleChange = () => {\n            if (!setSelectedRows) {\n                return;\n            }\n\n            if (isChecked) {\n                const filteredRows = selectedRows.filter((row) => row !== cell.parentKey);\n                setSelectedRows(filteredRows);\n                return;\n            }\n\n            const rowsToSelect =\n                selectionMode === SelectionMode.SingleSelect ? [cell.parentKey] : [...selectedRows, cell.parentKey];\n            setSelectedRows(rowsToSelect);\n        };\n\n        return (\n            <td\n                role=\"cell\"\n                ref={ref}\n                className={merge([\n                    'tw-pl-8 tw-py-4 tw-pr-4 tw-relative after:tw-absolute after:tw-left-0 after:tw-top-[-1px] after:tw-bottom-[-1px] after:tw-w-1',\n                    isChecked ? 'after:tw-bg-box-selected-strong' : 'after:tw-bg-transparent',\n                ])}\n                data-test-id=\"table-select-cell\"\n            >\n                <CheckboxComponent\n                    value={key}\n                    ariaLabel={cell['aria-label'] || key}\n                    state={isChecked ? CheckboxState.Checked : CheckboxState.Unchecked}\n                    onChange={handleChange}\n                />\n            </td>\n        );\n    }\n\n    return (\n        <td\n            role=\"cell\"\n            ref={ref}\n            className={merge([\n                'tw-p-4 tw-font-normal tw-text-xs focus:tw-outline-none',\n                isChecked ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n            ])}\n        >\n            {cell.rendered}\n        </td>\n    );\n};\n"],"names":["CheckboxComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMY,IAAA,sBAAA,MACE,GAAA,UAAA,WACC,EAAA,WAAA,YAFH,IAAA,KAAA,CAAA,CAAA;AAcL,MAAM,KAAY,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,UAAO;AAAA,EACP,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,MACkB;AACZ,QAAA,IAAM,EAAoC,IAAI;AAEpD,MAAI,MAAS,YAAwB;AACjC,UAAM,EAAE,WAAQ,GACV,IAAe,MAAM;AACvB,UAAI,CAAC;AACD;AAGJ,UAAI,GAAW;AACX,cAAM,IAAe,EAAa,OAAO,CAAC,MAAQ,MAAQ,EAAK,SAAS;AACxE,UAAgB,CAAY;AAC5B;AAAA,MACJ;AAEA,YAAM,IACF,MAAkB,EAAc,eAAe,CAAC,EAAK,SAAS,IAAI,CAAC,GAAG,GAAc,EAAK,SAAS;AACtG,QAAgB,CAAY;AAAA,IAAA;AAGhC,WACK,kBAAA,cAAA,MAAA;AAAA,MACG,MAAK;AAAA,MACL;AAAA,MACA,WAAW,EAAM;AAAA,QACb;AAAA,QACA,IAAY,oCAAoC;AAAA,MAAA,CACnD;AAAA,MACD,gBAAa;AAAA,IAAA,GAEZ,kBAAA,cAAAA,GAAA;AAAA,MACG,OAAO;AAAA,MACP,WAAW,EAAK,iBAAiB;AAAA,MACjC,OAAO,IAAY,EAAc,UAAU,EAAc;AAAA,MACzD,UAAU;AAAA,IACd,CAAA,CACJ;AAAA,EAER;AAEA,SACK,kBAAA,cAAA,MAAA;AAAA,IACG,MAAK;AAAA,IACL;AAAA,IACA,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAY,yCAAyC;AAAA,IAAA,CACxD;AAAA,EAAA,GAEA,EAAK,QACV;AAER;"}

package/dist/components/Table/TableColumnHeader.es.js

@@ -1340,6 +1340,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1691,28 +1703,28 @@ import "../../utilities/dnd/DndWrapper.es.js";
 import "react-dnd-html5-backend";
 import "@udecode/plate";
 import "../RichTextEditor/context/RichTextEditorContext.es.js";
-import "../RichTextEditor/EditorActions/Plugins/CheckboxListPlugin/CheckboxListButton/CheckboxListToolbarButton.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Custom1Plugin/createCustom1Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Custom2Plugin/createCustom2Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Custom3Plugin/createCustom3Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading1Plugin/createHeading1Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading2Plugin/createHeading2Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading3Plugin/createHeading3Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/createHeading4Plugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
-import "../RichTextEditor/EditorActions/Plugins/CheckboxListPlugin/index.es.js";
+import "../RichTextEditor/Plugins/CheckboxListPlugin/CheckboxListButton/CheckboxListToolbarButton.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Custom1Plugin/createCustom1Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Custom2Plugin/createCustom2Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Custom3Plugin/createCustom3Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading1Plugin/createHeading1Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading2Plugin/createHeading2Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading3Plugin/createHeading3Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Heading4Plugin/createHeading4Plugin.es.js";
+import "../RichTextEditor/Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
+import "../RichTextEditor/Plugins/CheckboxListPlugin/index.es.js";
 import "slate-react";
-import "../RichTextEditor/EditorActions/Plugins/LinkPlugin/index.es.js";
+import "../RichTextEditor/Plugins/LinkPlugin/index.es.js";
 import "slate";
 import "../RichTextEditor/EditorPositioningWrapper/index.es.js";
-import "../RichTextEditor/EditorActions/Plugins/index.es.js";
+import "../RichTextEditor/Plugins/index.es.js";
 import "../../styles.es.js";
 import { SortDirection as O, SelectionMode as _ } from "./Table.es.js";
 import "react-textarea-autosize";
 import "../Tree/utils/mocks.es.js";
 var F = /* @__PURE__ */ ((r) => (r.Default = "Default", r.SelectAll = "SelectAll", r))(F || {});
-const CD = ({
+const MD = ({
   column: r,
   type: d = "Default",
   rowIds: b,
@@ -1771,7 +1783,7 @@ const CD = ({
   }, B(E, { size: N.Size12 }))));
 };
 export {
-  CD as TableColumnHeader,
+  MD as TableColumnHeader,
   F as TableColumnHeaderType
 };
 //# sourceMappingURL=TableColumnHeader.es.js.map

package/dist/components/Table/TableColumnHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnHeader.es.js","sources":["../../../src/components/Table/TableColumnHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { Key, cloneElement, useEffect, useRef, useState } from 'react';\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@foundation/Icon';\nimport { SelectionMode, SortDirection } from '..';\n\nexport enum TableColumnHeaderType {\n    Default = 'Default',\n    SelectAll = 'SelectAll',\n}\n\nexport type TableColumnHeaderProps = {\n    column: any;\n    type?: TableColumnHeaderType;\n    rowIds: Key[];\n    sortDirection?: SortDirection;\n    selectionMode: string;\n    isColumnSorted?: boolean;\n    handleSortChange: (column: string, direction?: SortDirection) => void;\n    setSelectedRows?: (ids?: Key[]) => void;\n};\n\nexport const TableColumnHeader = ({\n    column,\n    type = TableColumnHeaderType.Default,\n    rowIds,\n    sortDirection,\n    selectionMode,\n    isColumnSorted = false,\n    handleSortChange,\n    setSelectedRows,\n}: TableColumnHeaderProps) => {\n    const {\n        key,\n        rendered,\n        props: { allowsSorting },\n    } = column;\n    const [icon, setIcon] = useState(<IconArrowBidirectional />);\n    const [isChecked, setIsChecked] = useState(false);\n    const ref = useRef<HTMLTableCellElement | null>(null);\n    const ButtonOrSpan = allowsSorting ? 'button' : 'span';\n\n    useEffect(() => {\n        if (isColumnSorted) {\n            setIcon(sortDirection === SortDirection.Descending ? <IconArrowDown /> : <IconArrowUp />);\n        } else {\n            setIcon(<IconArrowBidirectional />);\n        }\n    }, [isColumnSorted, sortDirection]);\n\n    if (type === TableColumnHeaderType.SelectAll) {\n        const ariaProps = {\n            'aria-label': 'Select all',\n            scope: 'col',\n        };\n\n        const checkboxState = isChecked ? CheckboxState.Checked : CheckboxState.Unchecked;\n\n        const handleChange = () => {\n            if (!setSelectedRows) {\n                return;\n            }\n\n            if (isChecked) {\n                setSelectedRows([]);\n            } else {\n                setSelectedRows(rowIds);\n            }\n\n            setIsChecked((checked) => !checked);\n        };\n\n        return (\n            <th\n                {...ariaProps}\n                ref={ref}\n                className=\"tw-pl-8 tw-py-3 tw-pr-4 tw-w-16 tw-border-l-4 tw-border-transparent tw-group tw-outline-none\"\n                data-test-id=\"table-select-cell\"\n            >\n                {selectionMode === SelectionMode.SingleSelect ? (\n                    <span className=\"tw-sr-only\">{ariaProps['aria-label']}</span>\n                ) : (\n                    <Checkbox value={key} ariaLabel={key} state={checkboxState} onChange={handleChange} />\n                )}\n            </th>\n        );\n    }\n\n    return (\n        <th\n            ref={ref}\n            className={merge([\n                'tw-text-xs tw-font-medium tw-text-black-100 dark:tw-text-white tw-px-4 tw-py-3 tw-outline-none tw-group focus-visible:bg-violet-90',\n                allowsSorting ? 'tw-cursor-pointer' : '',\n            ])}\n            data-test-id=\"table-column\"\n            scope=\"col\"\n            onClick={allowsSorting ? () => handleSortChange(column.key, sortDirection) : () => null}\n        >\n            <ButtonOrSpan\n                className={merge([\n                    'tw-flex tw-gap-x-1 tw-items-center',\n                    FOCUS_VISIBLE_STYLE,\n                    allowsSorting ? 'tw-cursor-pointer' : 'tw-cursor-default',\n                ])}\n            >\n                {rendered}\n                {allowsSorting && (\n                    <span\n                        aria-hidden=\"true\"\n                        className={\n                            isColumnSorted\n                                ? 'tw-text-violet-50'\n                                : 'tw-text-black-40 dark:tw-text-black-60 group-hover:tw-text-black-100 dark:group-hover:tw-text-white'\n                        }\n                    >\n                        {cloneElement(icon, { size: IconSize.Size12 })}\n                    </span>\n                )}\n            </ButtonOrSpan>\n        </th>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASY,IAAA,sBAAA,MACE,GAAA,UAAA,WACE,EAAA,YAAA,aAFJ,IAAA,KAAA,CAAA,CAAA;AAgBL,MAAM,KAAoB,CAAC;AAAA,EAC9B;AAAA,EACA,UAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,MAC0B;AACpB,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA,OAAO,EAAE;AAAA,MACT,GACE,CAAC,GAAM,KAAW,EAAS,kBAAA,cAAC,OAAuB,CAAE,GACrD,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAM,EAAoC,IAAI,GAC9C,IAAe,IAAgB,WAAW;AAUhD,MARA,EAAU,MAAM;AACZ,IACY,EADZ,AAAI,IACQ,MAAkB,EAAc,aAAa,kBAAA,cAAC,OAAc,IAAK,kBAAA,cAAC,OAAY,IAE9E,kBAAA,cAAC,OAAuB,CAFwD;AAAA,EAG5F,GACD,CAAC,GAAgB,CAAa,CAAC,GAE9B,MAAS,aAAiC;AAC1C,UAAM,IAAY;AAAA,MACd,cAAc;AAAA,MACd,OAAO;AAAA,IAAA,GAGL,IAAgB,IAAY,EAAc,UAAU,EAAc,WAElE,IAAe,MAAM;AACvB,MAAI,CAAC,KAIL,CACI,EADJ,AAAI,IACgB,CAAE,IAEF,CAFE,GAKT,EAAA,CAAC,MAAY,CAAC,CAAO;AAAA,IAAA;AAGtC,WACK,kBAAA,cAAA,MAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA,GAEZ,MAAkB,EAAc,eAC5B,kBAAA,cAAA,QAAA;AAAA,MAAK,WAAU;AAAA,IAAA,GAAc,EAAU,aAAc,IAErD,kBAAA,cAAA,GAAA;AAAA,MAAS,OAAO;AAAA,MAAK,WAAW;AAAA,MAAK,OAAO;AAAA,MAAe,UAAU;AAAA,IAAc,CAAA,CAE5F;AAAA,EAER;AAEA,SACK,kBAAA,cAAA,MAAA;AAAA,IACG;AAAA,IACA,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAgB,sBAAsB;AAAA,IAAA,CACzC;AAAA,IACD,gBAAa;AAAA,IACb,OAAM;AAAA,IACN,SAAS,IAAgB,MAAM,EAAiB,EAAO,KAAK,CAAa,IAAI,MAAM;AAAA,EAAA,GAElF,kBAAA,cAAA,GAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAgB,sBAAsB;AAAA,IAAA,CACzC;AAAA,EAEA,GAAA,GACA,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,eAAY;AAAA,IACZ,WACI,IACM,sBACA;AAAA,EAAA,GAGT,EAAa,GAAM,EAAE,MAAM,EAAS,OAAQ,CAAA,CACjD,CAER,CACJ;AAER;"}
+{"version":3,"file":"TableColumnHeader.es.js","sources":["../../../src/components/Table/TableColumnHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { Key, cloneElement, useEffect, useRef, useState } from 'react';\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@foundation/Icon';\nimport { SelectionMode, SortDirection } from '..';\n\nexport enum TableColumnHeaderType {\n    Default = 'Default',\n    SelectAll = 'SelectAll',\n}\n\nexport type TableColumnHeaderProps = {\n    column: any;\n    type?: TableColumnHeaderType;\n    rowIds: Key[];\n    sortDirection?: SortDirection;\n    selectionMode: string;\n    isColumnSorted?: boolean;\n    handleSortChange: (column: string, direction?: SortDirection) => void;\n    setSelectedRows?: (ids?: Key[]) => void;\n};\n\nexport const TableColumnHeader = ({\n    column,\n    type = TableColumnHeaderType.Default,\n    rowIds,\n    sortDirection,\n    selectionMode,\n    isColumnSorted = false,\n    handleSortChange,\n    setSelectedRows,\n}: TableColumnHeaderProps) => {\n    const {\n        key,\n        rendered,\n        props: { allowsSorting },\n    } = column;\n    const [icon, setIcon] = useState(<IconArrowBidirectional />);\n    const [isChecked, setIsChecked] = useState(false);\n    const ref = useRef<HTMLTableCellElement | null>(null);\n    const ButtonOrSpan = allowsSorting ? 'button' : 'span';\n\n    useEffect(() => {\n        if (isColumnSorted) {\n            setIcon(sortDirection === SortDirection.Descending ? <IconArrowDown /> : <IconArrowUp />);\n        } else {\n            setIcon(<IconArrowBidirectional />);\n        }\n    }, [isColumnSorted, sortDirection]);\n\n    if (type === TableColumnHeaderType.SelectAll) {\n        const ariaProps = {\n            'aria-label': 'Select all',\n            scope: 'col',\n        };\n\n        const checkboxState = isChecked ? CheckboxState.Checked : CheckboxState.Unchecked;\n\n        const handleChange = () => {\n            if (!setSelectedRows) {\n                return;\n            }\n\n            if (isChecked) {\n                setSelectedRows([]);\n            } else {\n                setSelectedRows(rowIds);\n            }\n\n            setIsChecked((checked) => !checked);\n        };\n\n        return (\n            <th\n                {...ariaProps}\n                ref={ref}\n                className=\"tw-pl-8 tw-py-3 tw-pr-4 tw-w-16 tw-border-l-4 tw-border-transparent tw-group tw-outline-none\"\n                data-test-id=\"table-select-cell\"\n            >\n                {selectionMode === SelectionMode.SingleSelect ? (\n                    <span className=\"tw-sr-only\">{ariaProps['aria-label']}</span>\n                ) : (\n                    <Checkbox value={key} ariaLabel={key} state={checkboxState} onChange={handleChange} />\n                )}\n            </th>\n        );\n    }\n\n    return (\n        <th\n            ref={ref}\n            className={merge([\n                'tw-text-xs tw-font-medium tw-text-black-100 dark:tw-text-white tw-px-4 tw-py-3 tw-outline-none tw-group focus-visible:bg-violet-90',\n                allowsSorting ? 'tw-cursor-pointer' : '',\n            ])}\n            data-test-id=\"table-column\"\n            scope=\"col\"\n            onClick={allowsSorting ? () => handleSortChange(column.key, sortDirection) : () => null}\n        >\n            <ButtonOrSpan\n                className={merge([\n                    'tw-flex tw-gap-x-1 tw-items-center',\n                    FOCUS_VISIBLE_STYLE,\n                    allowsSorting ? 'tw-cursor-pointer' : 'tw-cursor-default',\n                ])}\n            >\n                {rendered}\n                {allowsSorting && (\n                    <span\n                        aria-hidden=\"true\"\n                        className={\n                            isColumnSorted\n                                ? 'tw-text-violet-50'\n                                : 'tw-text-black-40 dark:tw-text-black-60 group-hover:tw-text-black-100 dark:group-hover:tw-text-white'\n                        }\n                    >\n                        {cloneElement(icon, { size: IconSize.Size12 })}\n                    </span>\n                )}\n            </ButtonOrSpan>\n        </th>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/components/Tabs/Tabs.es.js

@@ -1337,6 +1337,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1647,7 +1659,7 @@ const q = {
   Small: "tw-pl-s",
   Medium: "tw-pl-m",
   Large: "tw-pl-l"
-}, vT = ({ paddingX: m, size: y, activeItemId: p, children: h, onChange: E }) => {
+}, CT = ({ paddingX: m, size: y, activeItemId: p, children: h, onChange: E }) => {
   var S;
   const B = P(), v = K(null), [k, M] = x(!1), [d, c] = x(!1), g = (S = A.map(h, (t) => L(t) ? t == null ? void 0 : t.props : null)) != null ? S : [], [R, C] = x([0]), l = () => {
     var r;
@@ -1779,7 +1791,7 @@ const q = {
 };
 export {
   _ as TabSize,
-  vT as Tabs,
+  CT as Tabs,
   Y as TabsPaddingX
 };
 //# sourceMappingURL=Tabs.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, {\n    Children,\n    FC,\n    KeyboardEvent,\n    ReactNode,\n    cloneElement,\n    isValidElement,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { TabItemProps } from '@components/Tabs/TabItem';\nimport { merge } from '@utilities/merge';\nimport { IconDotsHorizontal } from '@foundation/Icon';\nimport { Badge } from '@components/Badge';\nimport { motion } from 'framer-motion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport enum TabsPaddingX {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nexport enum TabSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport type TabsProps = {\n    paddingX?: TabsPaddingX;\n    size?: TabSize;\n    activeItemId: string;\n    children: ReactNode;\n    onChange?: (tabId: string) => void;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n    [TabsPaddingX.Small]: 'tw-pl-s',\n    [TabsPaddingX.Medium]: 'tw-pl-m',\n    [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nexport const Tabs: FC<TabsProps> = ({ paddingX, size, activeItemId, children, onChange }) => {\n    const groupId = useMemoizedId();\n    const tabNavRef = useRef<HTMLDivElement | null>(null);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n    const [isMenuOpened, setIsMenuOpened] = useState(false);\n\n    const tabs: TabItemProps[] =\n        Children.map(children, (child) => {\n            if (!isValidElement<TabItemProps>(child)) {\n                return null;\n            }\n            return child?.props;\n        }) ?? [];\n\n    const [overflowArray, setOverflowArray] = useState([0]);\n\n    const checkIfOverflowing = () => {\n        const tabNav = tabNavRef.current;\n        setIsOverflowing((tabNav && tabNav.scrollWidth > tabNav.clientWidth) ?? false);\n        const overFlowIndex = [];\n        if (tabNav) {\n            for (const tabItem of tabNav.children) {\n                const i = [...tabNav.children].indexOf(tabItem);\n                const navPosition = tabNav.getBoundingClientRect();\n                const tabPosition = tabItem.getBoundingClientRect();\n                if (tabPosition.right > navPosition.right || tabPosition.left < navPosition.left) {\n                    overFlowIndex.push(i);\n                }\n            }\n\n            const overFlowIndexInAscOrder = [...overFlowIndex].sort((a, b) => a - b);\n            setOverflowArray(overFlowIndexInAscOrder);\n        }\n    };\n\n    const getOverflownTabs = () => {\n        return overflowArray.map((i) => {\n            return tabs[i];\n        });\n    };\n\n    const filterTabList = (array: TabItemProps[], direction: string) => {\n        return array.filter((tab) => {\n            if (direction === 'next') {\n                if (tab.id > activeItemId && !tab.disabled) {\n                    return tab;\n                }\n            }\n\n            if (direction === 'previous') {\n                if (tab.id < activeItemId && !tab.disabled) {\n                    return tab;\n                }\n            }\n\n            return false;\n        });\n    };\n\n    const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n        const overflownTabs = getOverflownTabs();\n        const target = event.target as HTMLElement;\n        const fromOverflow = target.id.includes('-m');\n        const currentTabId = target.id.replace('-btn-m', '');\n        const currentTabsArray = fromOverflow ? overflownTabs : tabs;\n\n        const nextTabs = filterTabList(currentTabsArray, 'next');\n        const previousTabs = filterTabList(currentTabsArray, 'previous');\n\n        if ((event.key === 'ArrowRight' || event.key === 'ArrowDown') && nextTabs.length > 0) {\n            triggerTabButton(nextTabs[0].id, fromOverflow);\n        }\n\n        if ((event.key === 'ArrowLeft' || event.key === 'ArrowUp') && previousTabs.length > 0) {\n            triggerTabButton(previousTabs[previousTabs.length - 1].id, fromOverflow);\n        }\n\n        if (event.key === 'Enter' && fromOverflow) {\n            triggerTabButton(currentTabId, true);\n            setIsMenuOpened(false);\n            const contentSection = document.getElementById(`${currentTabId}-content`) as HTMLDivElement;\n            contentSection.focus();\n        }\n\n        if (!target.id.includes('-m')) {\n            setIsMenuOpened(false);\n        }\n    };\n\n    const triggerTabButton = (elementId: string, fromOverflow: boolean) => {\n        try {\n            const tabElement = document.getElementById(`${elementId}-btn`) as HTMLButtonElement;\n            const buttonElement = document.getElementById(\n                fromOverflow ? `${elementId}-btn-m` : `${elementId}-btn`,\n            ) as HTMLButtonElement;\n            if (onChange) {\n                onChange(elementId);\n            }\n            if (isOverflowing) {\n                tabElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });\n            }\n            buttonElement.focus();\n        } catch (error) {\n            throw (error as Error).message;\n        }\n    };\n\n    const triggerOverflowMenu = (event: KeyboardEvent<HTMLButtonElement>) => {\n        checkIfOverflowing();\n        const overflownTabs = getOverflownTabs();\n\n        if (event.key === 'Enter') {\n            if (!isMenuOpened && overflownTabs.length > 0) {\n                const buttonElement = document.getElementById(`${overflownTabs[0].id}-btn-m`) as HTMLButtonElement;\n                if (buttonElement) {\n                    buttonElement.focus();\n                }\n            }\n        }\n\n        if (isMenuOpened && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) {\n            triggerTabButton(overflownTabs[0].id, true);\n        }\n    };\n\n    // First render\n    useEffect(() => {\n        checkIfOverflowing();\n    }, []);\n\n    useEffect(() => {\n        window.addEventListener('resize', checkIfOverflowing);\n        return () => {\n            window.removeEventListener('resize', checkIfOverflowing);\n        };\n    }, [checkIfOverflowing]);\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <>\n            <div data-test-id=\"tabs\" className=\"tw-flex tw-relative tw-border-b tw-border-line\">\n                <div\n                    ref={tabNavRef}\n                    role=\"tablist\"\n                    className={merge([\n                        'tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start tw-pr-8',\n                        paddingMap[paddingX ?? TabsPaddingX.Small],\n                        size === TabSize.Small ? 'tw-gap-xxs' : 'tw-gap-xs ',\n                    ])}\n                >\n                    {tabs.map((tab) => {\n                        return (\n                            <button\n                                data-test-id=\"tab-item\"\n                                role=\"tab\"\n                                type=\"button\"\n                                aria-selected={tab.id === activeItemId}\n                                aria-controls={`${tab.id}-content`}\n                                aria-hidden={tab.disabled}\n                                tabIndex={tab.id === activeItemId ? 0 : -1}\n                                id={`${tab.id}-btn`}\n                                className={merge([\n                                    'tw-group tw-relative tw-mx-0 tw-py-4 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n                                    tab.disabled && 'tw-text-text-disabled',\n                                    tab.id === activeItemId ? 'tw-font-medium tw-text-text' : 'tw-text-text-weak',\n                                    size === TabSize.Small ? 'tw-text-sm' : 'tw-text-md',\n                                ])}\n                                key={tab.id}\n                                onClick={() => {\n                                    if (!tab.disabled) {\n                                        triggerTabButton(tab.id, false);\n                                        setIsMenuOpened(false);\n                                    }\n                                }}\n                                onKeyDown={(event) => handleKeyboardTabChange(event)}\n                            >\n                                {tab.decorator && <span className=\"tw-mr-1.5\">{tab.decorator}</span>}\n\n                                <span>{tab.label}</span>\n\n                                {tab.badge && (\n                                    <Badge disabled={tab.disabled} style={tab.badge.style}>\n                                        {tab.badge.children}\n                                    </Badge>\n                                )}\n                                {tab.id === activeItemId && (\n                                    <motion.div\n                                        initial={false}\n                                        layoutDependency={activeItemId}\n                                        data-test-id=\"tab-active-highlight\"\n                                        layoutId={groupId}\n                                        className=\"tw-absolute tw-h-[3px] tw-bg-violet-60 tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n                                    />\n                                )}\n                                {tab.id !== activeItemId && !tab.disabled && (\n                                    <div className=\"group-hover:tw-absolute group-hover:tw-h-[3px] group-hover:tw-bg-box-neutral-hover group-hover:tw-rounded-t-x-large group-hover:tw-w-full group-hover:tw-bottom-0\" />\n                                )}\n                            </button>\n                        );\n                    })}\n                </div>\n                {isOverflowing && (\n                    <div\n                        data-test-id=\"tab-overflow\"\n                        className=\"tw-absolute tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center\"\n                    >\n                        <button\n                            className={merge([\n                                'tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center',\n                                isFocusVisible ? FOCUS_STYLE : '',\n                            ])}\n                            type=\"button\"\n                            onClick={() => {\n                                checkIfOverflowing();\n                                setIsMenuOpened(!isMenuOpened);\n                            }}\n                            onKeyDown={(event) => triggerOverflowMenu(event)}\n                            {...focusProps}\n                        >\n                            <IconDotsHorizontal />\n                        </button>\n                        {isMenuOpened && (\n                            <div\n                                className=\"tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max\"\n                                role=\"dialog\"\n                            >\n                                {getOverflownTabs().map((tab) => {\n                                    return (\n                                        <button\n                                            className={merge([\n                                                'tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak',\n                                                tab.disabled && 'tw-text-text-disabled',\n                                            ])}\n                                            key={tab.id}\n                                            onClick={() => {\n                                                if (!tab.disabled) {\n                                                    triggerTabButton(tab.id, true);\n                                                    setIsMenuOpened(false);\n                                                }\n                                            }}\n                                            role=\"tab\"\n                                            type=\"button\"\n                                            aria-selected={tab.id === activeItemId}\n                                            aria-controls={`${tab.id}-content`}\n                                            aria-hidden={tab.disabled}\n                                            tabIndex={!tab.disabled && isMenuOpened ? 0 : -1}\n                                            id={`${tab.id}-btn-m`}\n                                            onKeyDown={(event) => handleKeyboardTabChange(event)}\n                                        >\n                                            {tab.decorator}\n                                            <span className=\"tw-mr-1 tw-ml-1.5\">{tab.label}</span>\n                                            {tab.badge && (\n                                                <Badge disabled={tab.disabled} style={tab.badge?.style}>\n                                                    {tab.badge?.children}\n                                                </Badge>\n                                            )}\n                                        </button>\n                                    );\n                                })}\n                            </div>\n                        )}\n                    </div>\n                )}\n            </div>\n\n            <div data-test-id=\"tab-content\">\n                {Children.map(children, (child) => {\n                    if (!isValidElement(child)) {\n                        return null;\n                    }\n\n                    return cloneElement(child, { ...child.props, active: child.props.id === activeItemId });\n                })}\n            </div>\n        </>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, {\n    Children,\n    FC,\n    KeyboardEvent,\n    ReactNode,\n    cloneElement,\n    isValidElement,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { TabItemProps } from '@components/Tabs/TabItem';\nimport { merge } from '@utilities/merge';\nimport { IconDotsHorizontal } from '@foundation/Icon';\nimport { Badge } from '@components/Badge';\nimport { motion } from 'framer-motion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nexport enum TabsPaddingX {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nexport enum TabSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport type TabsProps = {\n    paddingX?: TabsPaddingX;\n    size?: TabSize;\n    activeItemId: string;\n    children: ReactNode;\n    onChange?: (tabId: string) => void;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n    [TabsPaddingX.Small]: 'tw-pl-s',\n    [TabsPaddingX.Medium]: 'tw-pl-m',\n    [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nexport const Tabs: FC<TabsProps> = ({ paddingX, size, activeItemId, children, onChange }) => {\n    const groupId = useMemoizedId();\n    const tabNavRef = useRef<HTMLDivElement | null>(null);\n    const [isOverflowing, setIsOverflowing] = useState(false);\n    const [isMenuOpened, setIsMenuOpened] = useState(false);\n\n    const tabs: TabItemProps[] =\n        Children.map(children, (child) => {\n            if (!isValidElement<TabItemProps>(child)) {\n                return null;\n            }\n            return child?.props;\n        }) ?? [];\n\n    const [overflowArray, setOverflowArray] = useState([0]);\n\n    const checkIfOverflowing = () => {\n        const tabNav = tabNavRef.current;\n        setIsOverflowing((tabNav && tabNav.scrollWidth > tabNav.clientWidth) ?? false);\n        const overFlowIndex = [];\n        if (tabNav) {\n            for (const tabItem of tabNav.children) {\n                const i = [...tabNav.children].indexOf(tabItem);\n                const navPosition = tabNav.getBoundingClientRect();\n                const tabPosition = tabItem.getBoundingClientRect();\n                if (tabPosition.right > navPosition.right || tabPosition.left < navPosition.left) {\n                    overFlowIndex.push(i);\n                }\n            }\n\n            const overFlowIndexInAscOrder = [...overFlowIndex].sort((a, b) => a - b);\n            setOverflowArray(overFlowIndexInAscOrder);\n        }\n    };\n\n    const getOverflownTabs = () => {\n        return overflowArray.map((i) => {\n            return tabs[i];\n        });\n    };\n\n    const filterTabList = (array: TabItemProps[], direction: string) => {\n        return array.filter((tab) => {\n            if (direction === 'next') {\n                if (tab.id > activeItemId && !tab.disabled) {\n                    return tab;\n                }\n            }\n\n            if (direction === 'previous') {\n                if (tab.id < activeItemId && !tab.disabled) {\n                    return tab;\n                }\n            }\n\n            return false;\n        });\n    };\n\n    const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n        const overflownTabs = getOverflownTabs();\n        const target = event.target as HTMLElement;\n        const fromOverflow = target.id.includes('-m');\n        const currentTabId = target.id.replace('-btn-m', '');\n        const currentTabsArray = fromOverflow ? overflownTabs : tabs;\n\n        const nextTabs = filterTabList(currentTabsArray, 'next');\n        const previousTabs = filterTabList(currentTabsArray, 'previous');\n\n        if ((event.key === 'ArrowRight' || event.key === 'ArrowDown') && nextTabs.length > 0) {\n            triggerTabButton(nextTabs[0].id, fromOverflow);\n        }\n\n        if ((event.key === 'ArrowLeft' || event.key === 'ArrowUp') && previousTabs.length > 0) {\n            triggerTabButton(previousTabs[previousTabs.length - 1].id, fromOverflow);\n        }\n\n        if (event.key === 'Enter' && fromOverflow) {\n            triggerTabButton(currentTabId, true);\n            setIsMenuOpened(false);\n            const contentSection = document.getElementById(`${currentTabId}-content`) as HTMLDivElement;\n            contentSection.focus();\n        }\n\n        if (!target.id.includes('-m')) {\n            setIsMenuOpened(false);\n        }\n    };\n\n    const triggerTabButton = (elementId: string, fromOverflow: boolean) => {\n        try {\n            const tabElement = document.getElementById(`${elementId}-btn`) as HTMLButtonElement;\n            const buttonElement = document.getElementById(\n                fromOverflow ? `${elementId}-btn-m` : `${elementId}-btn`,\n            ) as HTMLButtonElement;\n            if (onChange) {\n                onChange(elementId);\n            }\n            if (isOverflowing) {\n                tabElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });\n            }\n            buttonElement.focus();\n        } catch (error) {\n            throw (error as Error).message;\n        }\n    };\n\n    const triggerOverflowMenu = (event: KeyboardEvent<HTMLButtonElement>) => {\n        checkIfOverflowing();\n        const overflownTabs = getOverflownTabs();\n\n        if (event.key === 'Enter') {\n            if (!isMenuOpened && overflownTabs.length > 0) {\n                const buttonElement = document.getElementById(`${overflownTabs[0].id}-btn-m`) as HTMLButtonElement;\n                if (buttonElement) {\n                    buttonElement.focus();\n                }\n            }\n        }\n\n        if (isMenuOpened && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) {\n            triggerTabButton(overflownTabs[0].id, true);\n        }\n    };\n\n    // First render\n    useEffect(() => {\n        checkIfOverflowing();\n    }, []);\n\n    useEffect(() => {\n        window.addEventListener('resize', checkIfOverflowing);\n        return () => {\n            window.removeEventListener('resize', checkIfOverflowing);\n        };\n    }, [checkIfOverflowing]);\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <>\n            <div data-test-id=\"tabs\" className=\"tw-flex tw-relative tw-border-b tw-border-line\">\n                <div\n                    ref={tabNavRef}\n                    role=\"tablist\"\n                    className={merge([\n                        'tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start tw-pr-8',\n                        paddingMap[paddingX ?? TabsPaddingX.Small],\n                        size === TabSize.Small ? 'tw-gap-xxs' : 'tw-gap-xs ',\n                    ])}\n                >\n                    {tabs.map((tab) => {\n                        return (\n                            <button\n                                data-test-id=\"tab-item\"\n                                role=\"tab\"\n                                type=\"button\"\n                                aria-selected={tab.id === activeItemId}\n                                aria-controls={`${tab.id}-content`}\n                                aria-hidden={tab.disabled}\n                                tabIndex={tab.id === activeItemId ? 0 : -1}\n                                id={`${tab.id}-btn`}\n                                className={merge([\n                                    'tw-group tw-relative tw-mx-0 tw-py-4 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n                                    tab.disabled && 'tw-text-text-disabled',\n                                    tab.id === activeItemId ? 'tw-font-medium tw-text-text' : 'tw-text-text-weak',\n                                    size === TabSize.Small ? 'tw-text-sm' : 'tw-text-md',\n                                ])}\n                                key={tab.id}\n                                onClick={() => {\n                                    if (!tab.disabled) {\n                                        triggerTabButton(tab.id, false);\n                                        setIsMenuOpened(false);\n                                    }\n                                }}\n                                onKeyDown={(event) => handleKeyboardTabChange(event)}\n                            >\n                                {tab.decorator && <span className=\"tw-mr-1.5\">{tab.decorator}</span>}\n\n                                <span>{tab.label}</span>\n\n                                {tab.badge && (\n                                    <Badge disabled={tab.disabled} style={tab.badge.style}>\n                                        {tab.badge.children}\n                                    </Badge>\n                                )}\n                                {tab.id === activeItemId && (\n                                    <motion.div\n                                        initial={false}\n                                        layoutDependency={activeItemId}\n                                        data-test-id=\"tab-active-highlight\"\n                                        layoutId={groupId}\n                                        className=\"tw-absolute tw-h-[3px] tw-bg-violet-60 tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n                                    />\n                                )}\n                                {tab.id !== activeItemId && !tab.disabled && (\n                                    <div className=\"group-hover:tw-absolute group-hover:tw-h-[3px] group-hover:tw-bg-box-neutral-hover group-hover:tw-rounded-t-x-large group-hover:tw-w-full group-hover:tw-bottom-0\" />\n                                )}\n                            </button>\n                        );\n                    })}\n                </div>\n                {isOverflowing && (\n                    <div\n                        data-test-id=\"tab-overflow\"\n                        className=\"tw-absolute tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center\"\n                    >\n                        <button\n                            className={merge([\n                                'tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center',\n                                isFocusVisible ? FOCUS_STYLE : '',\n                            ])}\n                            type=\"button\"\n                            onClick={() => {\n                                checkIfOverflowing();\n                                setIsMenuOpened(!isMenuOpened);\n                            }}\n                            onKeyDown={(event) => triggerOverflowMenu(event)}\n                            {...focusProps}\n                        >\n                            <IconDotsHorizontal />\n                        </button>\n                        {isMenuOpened && (\n                            <div\n                                className=\"tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max\"\n                                role=\"dialog\"\n                            >\n                                {getOverflownTabs().map((tab) => {\n                                    return (\n                                        <button\n                                            className={merge([\n                                                'tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak',\n                                                tab.disabled && 'tw-text-text-disabled',\n                                            ])}\n                                            key={tab.id}\n                                            onClick={() => {\n                                                if (!tab.disabled) {\n                                                    triggerTabButton(tab.id, true);\n                                                    setIsMenuOpened(false);\n                                                }\n                                            }}\n                                            role=\"tab\"\n                                            type=\"button\"\n                                            aria-selected={tab.id === activeItemId}\n                                            aria-controls={`${tab.id}-content`}\n                                            aria-hidden={tab.disabled}\n                                            tabIndex={!tab.disabled && isMenuOpened ? 0 : -1}\n                                            id={`${tab.id}-btn-m`}\n                                            onKeyDown={(event) => handleKeyboardTabChange(event)}\n                                        >\n                                            {tab.decorator}\n                                            <span className=\"tw-mr-1 tw-ml-1.5\">{tab.label}</span>\n                                            {tab.badge && (\n                                                <Badge disabled={tab.disabled} style={tab.badge?.style}>\n                                                    {tab.badge?.children}\n                                                </Badge>\n                                            )}\n                                        </button>\n                                    );\n                                })}\n                            </div>\n                        )}\n                    </div>\n                )}\n            </div>\n\n            <div data-test-id=\"tab-content\">\n                {Children.map(children, (child) => {\n                    if (!isValidElement(child)) {\n                        return null;\n                    }\n\n                    return cloneElement(child, { ...child.props, active: child.props.id === activeItemId });\n                })}\n            </div>\n        </>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/components/Tag/Tag.es.js

@@ -1342,6 +1342,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1648,7 +1660,7 @@ const S = {
   Selected: "tw-bg-black-5 hover:tw-bg-black-10 dark:hover:tw-bg-black-20 tw-border-black-5 hover:tw-border-black-10 dark:hover:tw-border-black-20 tw-text-black-80 hover:tw-text-black-100",
   SelectedWithFocus: "tw-bg-violet-60 dark:tw-bg-violet-50 hover:tw-bg-violet-70 dark:hover:tw-bg-violet-60 tw-border-violet-60 dark:tw-border-violet-50 hover:tw-border-violet-70 dark:hover:tw-border-violet-60 tw-text-white",
   PreviouslySelected: "tw-bg-white dark:tw-bg-black-100 hover:tw-bg-black-0 dark:hover:tw-bg-black-superdark tw-text-violet-60 dark:tw-text-violet-50 hover:tw-text-violet-70 dark:hover:tw-text-violet-60"
-}, Ky = ({ type: t, label: m, onClick: i, size: p = "Medium" }) => {
+}, eE = ({ type: t, label: m, onClick: i, size: p = "Medium" }) => {
   const e = u(null), { isFocusVisible: l, focusProps: a } = b(), r = (t === "Selected" || t === "SelectedWithFocus") && i, { buttonProps: w } = d({
     onPress: () => r && i()
   }, e);
@@ -1670,7 +1682,7 @@ const S = {
   })));
 };
 export {
-  Ky as Tag,
+  eE as Tag,
   g as TagSize,
   h as TagType,
   S as tagStyles

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.es.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { MouseEvent, useRef } from 'react';\nimport { IconCross } from '@foundation/Icon';\n\nexport enum TagType {\n    Suggested = 'Suggested',\n    Selected = 'Selected',\n    SelectedWithFocus = 'SelectedWithFocus',\n    PreviouslySelected = 'PreviouslySelected',\n}\n\nexport enum TagSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport const tagStyles: Record<TagType, string> = {\n    [TagType.Suggested]:\n        'tw-bg-white dark:tw-bg-black-100 hover:tw-bg-black-0 dark:hover:tw-bg-black-superdark tw-border-black-20 dark:tw-border-white hover:tw-border-black-40 dark:hover:tw-border-black-20 tw-text-black-80 dark:tw-text-white dark:hover:tw-text-black-20',\n    [TagType.Selected]:\n        'tw-bg-black-5 hover:tw-bg-black-10 dark:hover:tw-bg-black-20 tw-border-black-5 hover:tw-border-black-10 dark:hover:tw-border-black-20 tw-text-black-80 hover:tw-text-black-100',\n    [TagType.SelectedWithFocus]:\n        'tw-bg-violet-60 dark:tw-bg-violet-50 hover:tw-bg-violet-70 dark:hover:tw-bg-violet-60 tw-border-violet-60 dark:tw-border-violet-50 hover:tw-border-violet-70 dark:hover:tw-border-violet-60 tw-text-white',\n    [TagType.PreviouslySelected]:\n        'tw-bg-white dark:tw-bg-black-100 hover:tw-bg-black-0 dark:hover:tw-bg-black-superdark tw-text-violet-60 dark:tw-text-violet-50 hover:tw-text-violet-70 dark:hover:tw-text-violet-60',\n};\n\nexport type TagProps = TagPropsUnselected | TagPropsSelected;\n\ntype TagPropsSelected = {\n    type: TagType.Selected | TagType.SelectedWithFocus;\n    label: string;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    size?: TagSize;\n};\n\ntype TagPropsUnselected = {\n    type: TagType.Suggested | TagType.PreviouslySelected;\n    label: string;\n    onClick?: null;\n    size?: TagSize;\n};\n\nexport const Tag = ({ type, label, onClick, size = TagSize.Medium }: TagProps) => {\n    const ref = useRef<HTMLButtonElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const isClickable = (type === TagType.Selected || type === TagType.SelectedWithFocus) && onClick;\n    const { buttonProps } = useButton(\n        {\n            onPress: () => isClickable && onClick(),\n        },\n        ref,\n    );\n\n    return (\n        <button\n            data-test-id=\"tag\"\n            className={merge([\n                'tw-inline-flex tw-items-center tw-border tw-border-solid tw-rounded-full tw-text-xs tw-transition-colors tw-group  tw-break-word',\n                size === TagSize.Small ? 'tw-px-[6px] tw-py-[2px]' : 'tw-px-2.5 tw-py-1',\n                tagStyles[type],\n                isClickable ? 'tw-cursor-pointer' : 'tw-cursor-default',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            {...mergeProps(buttonProps, focusProps)}\n        >\n            {label}\n            {isClickable && (\n                <span\n                    data-test-id=\"tag-reject-icon\"\n                    className=\"tw-opacity-80 group-hover:tw-opacity-100 tw-transition-opacity tw-ml-1\"\n                >\n                    <IconCross size={IconSize.Size12} />\n                </span>\n            )}\n        </button>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWY,IAAA,sBAAA,MACI,GAAA,YAAA,aACD,EAAA,WAAA,YACS,EAAA,oBAAA,qBACC,EAAA,qBAAA,sBAJb,IAAA,KAAA,CAAA,CAAA,GAOA,sBAAA,MACA,GAAA,QAAA,SACC,EAAA,SAAA,UAFD,IAAA,KAAA,CAAA,CAAA;AAKL,MAAM,IAAqC;AAAA,EAC9C,AAAC,WACG;AAAA,EACJ,AAAC,UACG;AAAA,EACJ,AAAC,mBACG;AAAA,EACJ,AAAC,oBACG;AACR,GAkBa,KAAM,CAAC,EAAE,SAAM,UAAO,YAAS,UAAO,eAA+B;AACxE,QAAA,IAAM,EAAiC,IAAI,GAC3C,EAAE,mBAAgB,kBAAe,EAAa,GAC9C,IAAe,OAAS,cAAoB,MAAS,wBAA8B,GACnF,EAAE,mBAAgB,EACpB;AAAA,IACI,SAAS,MAAM,KAAe,EAAQ;AAAA,KAE1C,CACJ;AAEA,SACK,kBAAA,cAAA,UAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,MAAS,UAAgB,4BAA4B;AAAA,MACrD,EAAU;AAAA,MACV,IAAc,sBAAsB;AAAA,MACpC,KAAkB;AAAA,IAAA,CACrB;AAAA,IACA,GAAG,EAAW,GAAa,CAAU;AAAA,EAErC,GAAA,GACA,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,EAAA,GAET,kBAAA,cAAA,GAAA;AAAA,IAAU,MAAM,EAAS;AAAA,EAAQ,CAAA,CACtC,CAER;AAER;"}
+{"version":3,"file":"Tag.es.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useButton } from '@react-aria/button';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { MouseEvent, useRef } from 'react';\nimport { IconCross } from '@foundation/Icon';\n\nexport enum TagType {\n    Suggested = 'Suggested',\n    Selected = 'Selected',\n    SelectedWithFocus = 'SelectedWithFocus',\n    PreviouslySelected = 'PreviouslySelected',\n}\n\nexport enum TagSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport const tagStyles: Record<TagType, string> = {\n    [TagType.Suggested]:\n        'tw-bg-white dark:tw-bg-black-100 hover:tw-bg-black-0 dark:hover:tw-bg-black-superdark tw-border-black-20 dark:tw-border-white hover:tw-border-black-40 dark:hover:tw-border-black-20 tw-text-black-80 dark:tw-text-white dark:hover:tw-text-black-20',\n    [TagType.Selected]:\n        'tw-bg-black-5 hover:tw-bg-black-10 dark:hover:tw-bg-black-20 tw-border-black-5 hover:tw-border-black-10 dark:hover:tw-border-black-20 tw-text-black-80 hover:tw-text-black-100',\n    [TagType.SelectedWithFocus]:\n        'tw-bg-violet-60 dark:tw-bg-violet-50 hover:tw-bg-violet-70 dark:hover:tw-bg-violet-60 tw-border-violet-60 dark:tw-border-violet-50 hover:tw-border-violet-70 dark:hover:tw-border-violet-60 tw-text-white',\n    [TagType.PreviouslySelected]:\n        'tw-bg-white dark:tw-bg-black-100 hover:tw-bg-black-0 dark:hover:tw-bg-black-superdark tw-text-violet-60 dark:tw-text-violet-50 hover:tw-text-violet-70 dark:hover:tw-text-violet-60',\n};\n\nexport type TagProps = TagPropsUnselected | TagPropsSelected;\n\ntype TagPropsSelected = {\n    type: TagType.Selected | TagType.SelectedWithFocus;\n    label: string;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    size?: TagSize;\n};\n\ntype TagPropsUnselected = {\n    type: TagType.Suggested | TagType.PreviouslySelected;\n    label: string;\n    onClick?: null;\n    size?: TagSize;\n};\n\nexport const Tag = ({ type, label, onClick, size = TagSize.Medium }: TagProps) => {\n    const ref = useRef<HTMLButtonElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const isClickable = (type === TagType.Selected || type === TagType.SelectedWithFocus) && onClick;\n    const { buttonProps } = useButton(\n        {\n            onPress: () => isClickable && onClick(),\n        },\n        ref,\n    );\n\n    return (\n        <button\n            data-test-id=\"tag\"\n            className={merge([\n                'tw-inline-flex tw-items-center tw-border tw-border-solid tw-rounded-full tw-text-xs tw-transition-colors tw-group  tw-break-word',\n                size === TagSize.Small ? 'tw-px-[6px] tw-py-[2px]' : 'tw-px-2.5 tw-py-1',\n                tagStyles[type],\n                isClickable ? 'tw-cursor-pointer' : 'tw-cursor-default',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            {...mergeProps(buttonProps, focusProps)}\n        >\n            {label}\n            {isClickable && (\n                <span\n                    data-test-id=\"tag-reject-icon\"\n                    className=\"tw-opacity-80 group-hover:tw-opacity-100 tw-transition-opacity tw-ml-1\"\n                >\n                    <IconCross size={IconSize.Size12} />\n                </span>\n            )}\n        </button>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWY,IAAA,sBAAA,MACI,GAAA,YAAA,aACD,EAAA,WAAA,YACS,EAAA,oBAAA,qBACC,EAAA,qBAAA,sBAJb,IAAA,KAAA,CAAA,CAAA,GAOA,sBAAA,MACA,GAAA,QAAA,SACC,EAAA,SAAA,UAFD,IAAA,KAAA,CAAA,CAAA;AAKL,MAAM,IAAqC;AAAA,EAC9C,AAAC,WACG;AAAA,EACJ,AAAC,UACG;AAAA,EACJ,AAAC,mBACG;AAAA,EACJ,AAAC,oBACG;AACR,GAkBa,KAAM,CAAC,EAAE,SAAM,UAAO,YAAS,UAAO,eAA+B;AACxE,QAAA,IAAM,EAAiC,IAAI,GAC3C,EAAE,mBAAgB,kBAAe,EAAa,GAC9C,IAAe,OAAS,cAAoB,MAAS,wBAA8B,GACnF,EAAE,mBAAgB,EACpB;AAAA,IACI,SAAS,MAAM,KAAe,EAAQ;AAAA,KAE1C,CACJ;AAEA,SACK,kBAAA,cAAA,UAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,MAAS,UAAgB,4BAA4B;AAAA,MACrD,EAAU;AAAA,MACV,IAAc,sBAAsB;AAAA,MACpC,KAAkB;AAAA,IAAA,CACrB;AAAA,IACA,GAAG,EAAW,GAAa,CAAU;AAAA,EAErC,GAAA,GACA,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,EAAA,GAET,kBAAA,cAAA,GAAA;AAAA,IAAU,MAAM,EAAS;AAAA,EAAQ,CAAA,CACtC,CAER;AAER;"}

package/dist/components/TextInput/TextInput.es.js

@@ -1343,6 +1343,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1644,7 +1656,7 @@ import "../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import "../../foundation/Icon/IconsMap.es.js";
 var mt = /* @__PURE__ */ ((m) => (m.Text = "text", m.Password = "password", m.Number = "number", m))(mt || {});
-const LV = ({
+const _V = ({
   id: m,
   type: s = "text",
   decorator: f,
@@ -1772,7 +1784,7 @@ const LV = ({
   }, /* @__PURE__ */ t.createElement(X, null))));
 };
 export {
-  LV as TextInput,
+  _V as TextInput,
   mt as TextInputType
 };
 //# sourceMappingURL=TextInput.es.js.map