npm - @frontify/fondue - Versions diffs - 13.0.0-rc.12 → 13.0.0-rc.13 - Mend

@frontify/fondue 13.0.0-rc.12 → 13.0.0-rc.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (326) hide show

package/dist/components/MultiSelect/MultiSelect.es.js CHANGED Viewed

@@ -1,39 +1,38 @@
 import { jsxs as P, jsx as t } from "react/jsx-runtime";
-import { useButton as Y } from "@react-aria/button";
-import { useFocusRing as Z, FocusScope as $ } from "@react-aria/focus";
-import { useState as p, useRef as O, useId as I, useEffect as h, useLayoutEffect as K } from "react";
-import { usePopper as ee } from "react-popper";
-import { CheckboxState as te } from "../Checkbox/Checkbox.es.js";
-import { Checklist as oe, ChecklistDirection as re } from "../Checklist/Checklist.es.js";
-import { Tag as z, TagSize as d, TagType as F } from "../Tag/Tag.es.js";
-import { Trigger as le, TriggerEmphasis as se } from "../Trigger/Trigger.es.js";
-import { useDropdownAutoHeight as ne, DEFAULT_DROPDOWN_MAX_HEIGHT as ae } from "../../hooks/useDropdownAutoHeight.es.js";
-import { EnablePortalWrapper as ie } from "../../utilities/dialogs/EnablePortalWrapper.es.js";
-import { merge as ce } from "../../utilities/merge.es.js";
-import { Validation as ue } from "../../utilities/validation.es.js";
-import { useClickOutside as pe, getPaddingClasses as de } from "./helpers.es.js";
-import { Text as R } from "../../typography/Text/Text.es.js";
-var fe = /* @__PURE__ */ ((o) => (o.Default = "Default", o.Summarized = "Summarized", o))(fe || {}), we = /* @__PURE__ */ ((o) => (o.Small = "Small", o.Medium = "Medium", o))(we || {});
-const me = ({
+import { useButton as Q } from "@react-aria/button";
+import { useFocusRing as Y, FocusScope as Z } from "@react-aria/focus";
+import { useState as p, useRef as O, useId as $, useEffect as h, useLayoutEffect as I } from "react";
+import { usePopper as K } from "react-popper";
+import { CheckboxState as ee } from "../Checkbox/Checkbox.es.js";
+import { Checklist as te, ChecklistDirection as oe } from "../Checklist/Checklist.es.js";
+import { Tag as y, TagSize as d, TagType as z } from "../Tag/Tag.es.js";
+import { Trigger as le, TriggerEmphasis as re } from "../Trigger/Trigger.es.js";
+import { useDropdownAutoHeight as se, DEFAULT_DROPDOWN_MAX_HEIGHT as ne } from "../../hooks/useDropdownAutoHeight.es.js";
+import { EnablePortalWrapper as ae } from "../../utilities/dialogs/EnablePortalWrapper.es.js";
+import { merge as ie } from "../../utilities/merge.es.js";
+import { Validation as ce } from "../../utilities/validation.es.js";
+import { useClickOutside as ue, getPaddingClasses as pe } from "./helpers.es.js";
+var de = /* @__PURE__ */ ((o) => (o.Default = "Default", o.Summarized = "Summarized", o))(de || {}), fe = /* @__PURE__ */ ((o) => (o.Small = "Small", o.Medium = "Medium", o))(fe || {});
+const we = ({
   items: o,
-  activeItemKeys: l,
+  activeItemKeys: r,
   onSelectionChange: f,
   ariaLabel: g = "Select list",
   disabled: x = !1,
-  placeholder: S,
-  label: b,
+  placeholder: b,
+  label: S,
   type: v = "Default",
   size: w = "Medium",
-  validation: A = ue.Default,
+  validation: F = ce.Default,
   summarizedLabel: D,
   indeterminateItemKeys: s,
-  flip: V = !1,
-  emphasis: H = se.Default,
-  enablePortal: L = !0
+  flip: R = !1,
+  emphasis: A = re.Default,
+  enablePortal: V = !0
 }) => {
-  const [a, c] = p(!1), [j, B] = p([]), n = O(null), [k, T] = p(null), [i, W] = p(null), _ = O(null), { isFocusVisible: y, focusProps: G } = Z(), { maxHeight: C } = ne({ current: i }, { isOpen: a, autoResize: !0 }), E = l.length > 0, U = D ?? [l.length, "selected"].join(" ");
-  pe(null, () => c(!1), [n == null ? void 0 : n.current, k]);
-  const X = C !== ae, M = I(), m = () => c((e) => !e), { buttonProps: q } = Y(
+  const [a, c] = p(!1), [H, L] = p([]), n = O(null), [k, C] = p(null), [i, j] = p(null), B = O(null), { isFocusVisible: W, focusProps: _ } = Y(), { maxHeight: E } = se({ current: i }, { isOpen: a, autoResize: !0 }), T = r.length > 0, G = D ?? [r.length, "selected"].join(" ");
+  ue(null, () => c(!1), [n == null ? void 0 : n.current, k]);
+  const U = E !== ne, M = $(), m = () => c((e) => !e), { buttonProps: X } = Q(
     {
       onPress: m,
       onKeyDown: (e) => {
@@ -42,23 +41,23 @@ const me = ({
       elementType: "div"
     },
     { current: i }
-  ), J = (e) => {
-    const r = new Set(l);
-    r.has(e) ? r.delete(e) : r.add(e), f(Array.from(r));
-  }, Q = (e) => {
+  ), q = (e) => {
+    const l = new Set(r);
+    l.has(e) ? l.delete(e) : l.add(e), f(Array.from(l));
+  }, J = (e) => {
     (e.code === "Space" || e.code === "Enter") && m();
-  }, N = () => a ? F.SelectedWithFocus : F.Selected;
+  }, N = () => a ? z.SelectedWithFocus : z.Selected;
   h(() => {
-    T(n == null ? void 0 : n.current);
+    C(n == null ? void 0 : n.current);
   }, []), h(() => {
-    B(
+    L(
       o.map((e) => {
-        const r = { ...e, label: e.value };
-        return s != null && s.includes(e.value) ? { ...r, state: te.Mixed } : r;
+        const l = { ...e, label: e.value };
+        return s != null && s.includes(e.value) ? { ...l, state: ee.Mixed } : l;
       })
     );
   }, [o, s]);
-  const u = ee(i, k, {
+  const u = K(i, k, {
     placement: "bottom-start",
     strategy: "fixed",
     modifiers: [
@@ -70,7 +69,7 @@ const me = ({
       },
       {
         name: "flip",
-        enabled: V
+        enabled: R
       }
     ]
   });
@@ -78,9 +77,9 @@ const me = ({
     (async () => {
       u.update && await u.update();
     })().catch(console.error);
-  }, [l]), K(() => {
-    const e = (r) => {
-      r.key === "Escape" && c(!1);
+  }, [r]), I(() => {
+    const e = (l) => {
+      l.key === "Escape" && c(!1);
     };
     return window.addEventListener("keyup", e), () => {
       window.removeEventListener("keyup", e);
@@ -90,75 +89,75 @@ const me = ({
       le,
       {
         disabled: x,
-        buttonProps: q,
-        isFocusVisible: y,
+        buttonProps: X,
+        isFocusVisible: W,
         isOpen: a,
-        validation: A,
-        emphasis: H,
-        children: /* @__PURE__ */ t("div", { className: ce(["tw-flex tw-flex-1 tw-gap-2", de(w)]), ref: W, children: /* @__PURE__ */ t(
+        validation: F,
+        emphasis: A,
+        children: /* @__PURE__ */ t("div", { className: ie(["tw-flex tw-flex-1 tw-gap-2", pe(w)]), ref: j, children: /* @__PURE__ */ t(
           "div",
           {
             className: "tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0",
             onClick: (e) => {
-              e.target === _.current && a || m();
+              e.target === B.current && a || m();
             },
             role: "combobox",
             "aria-expanded": a,
             "aria-controls": M,
             "aria-label": g,
-            ...G,
+            ..._,
             tabIndex: 0,
-            onKeyDown: Q,
+            onKeyDown: J,
             children: /* @__PURE__ */ P("div", { className: "tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]", children: [
-              b && E && /* @__PURE__ */ t(R, { weight: "strong", children: b }),
-              v === "Default" && l.map((e) => /* @__PURE__ */ t(
-                z,
+              S && T && /* @__PURE__ */ t("span", { className: "tw-body-medium-strong tw-text-primary", children: S }),
+              v === "Default" && r.map((e) => /* @__PURE__ */ t(
+                y,
                 {
                   type: N(),
                   label: e.toString(),
                   size: w === "Small" ? d.Small : d.Medium,
-                  onClick: x ? void 0 : () => J(e)
+                  onClick: x ? void 0 : () => q(e)
                 },
                 e
               )),
-              v === "Summarized" && (E || D) && /* @__PURE__ */ t(
-                z,
+              v === "Summarized" && (T || D) && /* @__PURE__ */ t(
+                y,
                 {
                   type: N(),
-                  label: U,
+                  label: G,
                   size: w === "Small" ? d.Small : d.Medium,
                   onClick: (s == null ? void 0 : s.length) === 0 ? () => f([]) : void 0
                 }
               ),
-              l.length === 0 && S && /* @__PURE__ */ t(R, { color: "weak", children: S })
+              r.length === 0 && b && /* @__PURE__ */ t("span", { className: "tw-body-medium tw-text-secondary", children: b })
             ] })
           }
         ) })
       }
     ),
-    a && X && /* @__PURE__ */ t(ie, { enablePortal: L, children: /* @__PURE__ */ t(
+    a && U && /* @__PURE__ */ t(ae, { enablePortal: V, children: /* @__PURE__ */ t(
       "div",
       {
         id: M,
-        ref: T,
+        ref: C,
         className: "tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-[120000] tw-bg-base tw-min-w-72",
         style: {
           ...u.styles.popper,
           width: i == null ? void 0 : i.getBoundingClientRect().width
         },
         ...u.attributes.popper,
-        children: /* @__PURE__ */ t($, { restoreFocus: !0, children: /* @__PURE__ */ t(
+        children: /* @__PURE__ */ t(Z, { restoreFocus: !0, children: /* @__PURE__ */ t(
           "div",
           {
             className: "tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative",
-            style: { maxHeight: C },
+            style: { maxHeight: E },
             children: /* @__PURE__ */ t(
-              oe,
+              te,
               {
-                activeValues: l.map((e) => e.toString()),
+                activeValues: r.map((e) => e.toString()),
                 setActiveValues: f,
-                checkboxes: j.filter((e) => !e.isDivider && !e.isCategory),
-                direction: re.Vertical,
+                checkboxes: H.filter((e) => !e.isDivider && !e.isCategory),
+                direction: oe.Vertical,
                 ariaLabel: g
               }
             )
@@ -169,10 +168,10 @@ const me = ({
     ) })
   ] });
 };
-me.displayName = "FondueMultiSelect";
+we.displayName = "FondueMultiSelect";
 export {
-  me as MultiSelect,
-  we as MultiSelectSize,
-  fe as MultiSelectType
+  we as MultiSelect,
+  fe as MultiSelectSize,
+  de as MultiSelectType
 };
 //# sourceMappingURL=MultiSelect.es.js.map

package/dist/components/MultiSelect/MultiSelect.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport {\n type KeyboardEvent,\n type ReactElement,\n type ReactNode,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger/Trigger';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { Text } from '@typography/Text';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nimport { getPaddingClasses, useClickOutside } from './helpers';\n\nexport enum MultiSelectType {\n Default = 'Default',\n Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n Small = 'Small',\n Medium = 'Medium',\n}\n\nexport type MultiSelectItem = {\n value: string;\n isCategory?: boolean;\n isDivider?: boolean;\n avatar?: ReactNode;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n items: MultiSelectItem[];\n activeItemKeys: (string \| number)[];\n disabled?: boolean;\n onSelectionChange: (keys: (string \| number)[]) => void;\n ariaLabel?: string;\n label?: string;\n placeholder?: string;\n type?: MultiSelectType;\n size?: MultiSelectSize;\n validation?: Validation;\n summarizedLabel?: string;\n indeterminateItemKeys?: (string \| number)[];\n flip?: boolean;\n emphasis?: TriggerEmphasis;\n enablePortal?: boolean;\n};\n\nexport type Item = {\n label: string;\n value: string;\n avatar?: ReactNode;\n isCategory?: boolean;\n isDivider?: boolean;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport const MultiSelect = ({\n items,\n activeItemKeys,\n onSelectionChange,\n ariaLabel = 'Select list',\n disabled = false,\n placeholder,\n label,\n type = MultiSelectType.Default,\n size = MultiSelectSize.Medium,\n validation = Validation.Default,\n summarizedLabel: summarizedLabelFromProps,\n indeterminateItemKeys,\n flip = false,\n emphasis = TriggerEmphasis.Default,\n enablePortal = true,\n}: MultiSelectProps): ReactElement => {\n const [open, setOpen] = useState(false);\n const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n const multiSelectRef = useRef<HTMLDivElement \| null>(null);\n\n const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null \| HTMLDivElement>(null);\n const [triggerRef, setTriggerRef] = useState<HTMLDivElement \| null>(null);\n\n const filterInputRef = useRef<HTMLInputElement \| null>(null);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n const hasSelectedItems = activeItemKeys.length > 0;\n const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n\n const handleClose = () => setOpen(false);\n\n useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n const muliSelectContentId = useId();\n\n const toggleOpen = () => setOpen((open) => !open);\n\n const { buttonProps } = useButton(\n {\n onPress: toggleOpen,\n onKeyDown: (e) => {\n if (e.key === 'Escape') {\n setOpen(false);\n }\n },\n elementType: 'div',\n },\n { current: triggerRef },\n );\n\n const toggleSelection = (key: string \| number) => {\n const keySet = new Set(activeItemKeys);\n\n if (keySet.has(key)) {\n keySet.delete(key);\n } else {\n keySet.add(key);\n }\n\n onSelectionChange(Array.from(keySet));\n };\n\n const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.code === 'Space' \|\| e.code === 'Enter') {\n toggleOpen();\n }\n };\n\n const getTagType = () => {\n if (!open) {\n return TagType.Selected;\n }\n return TagType.SelectedWithFocus;\n };\n\n useEffect(() => {\n setMultiSelectMenuRef(multiSelectRef?.current as HTMLDivElement);\n }, []);\n\n useEffect(() => {\n setCheckboxes(\n items.map((item) => {\n const checkboxBaseItem = { ...item, label: item.value };\n if (indeterminateItemKeys?.includes(item.value)) {\n return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n }\n return checkboxBaseItem;\n }),\n );\n }, [items, indeterminateItemKeys]);\n\n const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n placement: 'bottom-start',\n strategy: 'fixed',\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n useEffect(() => {\n const updatePopper = async () => {\n if (popperInstance.update) {\n await popperInstance.update();\n }\n };\n\n updatePopper().catch(console.error);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeItemKeys]);\n\n useLayoutEffect(() => {\n const handleEscapeKey = (event: globalThis.KeyboardEvent) => {\n if (event.key === 'Escape') {\n setOpen(false);\n }\n };\n\n window.addEventListener('keyup', handleEscapeKey);\n\n return () => {\n window.removeEventListener('keyup', handleEscapeKey);\n };\n }, []);\n\n return (\n <div className=\"tw-relative\" ref={multiSelectRef}>\n <Trigger\n disabled={disabled}\n buttonProps={buttonProps}\n isFocusVisible={isFocusVisible}\n isOpen={open}\n validation={validation}\n emphasis={emphasis}\n >\n <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n <div\n className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n onClick={(e) => {\n if (e.target === filterInputRef.current && open) {\n return;\n }\n toggleOpen();\n }}\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={muliSelectContentId}\n aria-label={ariaLabel}\n {...focusProps}\n tabIndex={0}\n onKeyDown={handleSpacebarToggle}\n >\n <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n {label && hasSelectedItems && <Text weight=\"strong\">{label}</Text>}\n {type === MultiSelectType.Default &&\n activeItemKeys.map((key) => (\n <Tag\n key={key}\n type={getTagType()}\n label={key.toString()}\n size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={disabled ? undefined : () => toggleSelection(key)}\n />\n ))}\n\n {type === MultiSelectType.Summarized && (hasSelectedItems \|\| summarizedLabelFromProps) && (\n <Tag\n type={getTagType()}\n label={summarizedLabel}\n size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={\n indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n }\n />\n )}\n\n {activeItemKeys.length === 0 && placeholder && <Text color=\"weak\">{placeholder}</Text>}\n </div>\n </div>\n </div>\n </Trigger>\n\n {open && heightIsReady && (\n <EnablePortalWrapper enablePortal={enablePortal}>\n <div\n id={muliSelectContentId}\n ref={setMultiSelectMenuRef}\n className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-[120000] tw-bg-base tw-min-w-72\"\n key=\"content\"\n style={{\n ...popperInstance.styles.popper,\n width: triggerRef?.getBoundingClientRect().width,\n }}\n {...popperInstance.attributes.popper}\n >\n <FocusScope restoreFocus>\n <div\n className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n style={{ maxHeight }}\n >\n <Checklist\n activeValues={activeItemKeys.map((key) => key.toString())}\n setActiveValues={onSelectionChange}\n checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n direction={ChecklistDirection.Vertical}\n ariaLabel={ariaLabel}\n />\n </div>\n </FocusScope>\n </div>\n </EnablePortalWrapper>\n )}\n </div>\n );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","type","size","validation","Validation","summarizedLabelFromProps","indeterminateItemKeys","flip","emphasis","TriggerEmphasis","enablePortal","open","setOpen","useState","checkboxes","setCheckboxes","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","muliSelectContentId","useId","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getTagType","TagType","useEffect","item","checkboxBaseItem","CheckboxState","popperInstance","usePopper","useLayoutEffect","handleEscapeKey","event","jsxs","jsx","Trigger","merge","getPaddingClasses","Text","Tag","TagSize","EnablePortalWrapper","FocusScope","Checklist","ChecklistDirection"],"mappings":"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"}
1	+ {"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport {\n type KeyboardEvent,\n type ReactElement,\n type ReactNode,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger/Trigger';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\n\nimport { getPaddingClasses, useClickOutside } from './helpers';\n\nexport enum MultiSelectType {\n Default = 'Default',\n Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n Small = 'Small',\n Medium = 'Medium',\n}\n\nexport type MultiSelectItem = {\n value: string;\n isCategory?: boolean;\n isDivider?: boolean;\n avatar?: ReactNode;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n items: MultiSelectItem[];\n activeItemKeys: (string \| number)[];\n disabled?: boolean;\n onSelectionChange: (keys: (string \| number)[]) => void;\n ariaLabel?: string;\n label?: string;\n placeholder?: string;\n type?: MultiSelectType;\n size?: MultiSelectSize;\n validation?: Validation;\n summarizedLabel?: string;\n indeterminateItemKeys?: (string \| number)[];\n flip?: boolean;\n emphasis?: TriggerEmphasis;\n enablePortal?: boolean;\n};\n\nexport type Item = {\n label: string;\n value: string;\n avatar?: ReactNode;\n isCategory?: boolean;\n isDivider?: boolean;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport const MultiSelect = ({\n items,\n activeItemKeys,\n onSelectionChange,\n ariaLabel = 'Select list',\n disabled = false,\n placeholder,\n label,\n type = MultiSelectType.Default,\n size = MultiSelectSize.Medium,\n validation = Validation.Default,\n summarizedLabel: summarizedLabelFromProps,\n indeterminateItemKeys,\n flip = false,\n emphasis = TriggerEmphasis.Default,\n enablePortal = true,\n}: MultiSelectProps): ReactElement => {\n const [open, setOpen] = useState(false);\n const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n const multiSelectRef = useRef<HTMLDivElement \| null>(null);\n\n const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null \| HTMLDivElement>(null);\n const [triggerRef, setTriggerRef] = useState<HTMLDivElement \| null>(null);\n\n const filterInputRef = useRef<HTMLInputElement \| null>(null);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n const hasSelectedItems = activeItemKeys.length > 0;\n const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n\n const handleClose = () => setOpen(false);\n\n useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n const muliSelectContentId = useId();\n\n const toggleOpen = () => setOpen((open) => !open);\n\n const { buttonProps } = useButton(\n {\n onPress: toggleOpen,\n onKeyDown: (e) => {\n if (e.key === 'Escape') {\n setOpen(false);\n }\n },\n elementType: 'div',\n },\n { current: triggerRef },\n );\n\n const toggleSelection = (key: string \| number) => {\n const keySet = new Set(activeItemKeys);\n\n if (keySet.has(key)) {\n keySet.delete(key);\n } else {\n keySet.add(key);\n }\n\n onSelectionChange(Array.from(keySet));\n };\n\n const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.code === 'Space' \|\| e.code === 'Enter') {\n toggleOpen();\n }\n };\n\n const getTagType = () => {\n if (!open) {\n return TagType.Selected;\n }\n return TagType.SelectedWithFocus;\n };\n\n useEffect(() => {\n setMultiSelectMenuRef(multiSelectRef?.current as HTMLDivElement);\n }, []);\n\n useEffect(() => {\n setCheckboxes(\n items.map((item) => {\n const checkboxBaseItem = { ...item, label: item.value };\n if (indeterminateItemKeys?.includes(item.value)) {\n return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n }\n return checkboxBaseItem;\n }),\n );\n }, [items, indeterminateItemKeys]);\n\n const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n placement: 'bottom-start',\n strategy: 'fixed',\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n useEffect(() => {\n const updatePopper = async () => {\n if (popperInstance.update) {\n await popperInstance.update();\n }\n };\n\n updatePopper().catch(console.error);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeItemKeys]);\n\n useLayoutEffect(() => {\n const handleEscapeKey = (event: globalThis.KeyboardEvent) => {\n if (event.key === 'Escape') {\n setOpen(false);\n }\n };\n\n window.addEventListener('keyup', handleEscapeKey);\n\n return () => {\n window.removeEventListener('keyup', handleEscapeKey);\n };\n }, []);\n\n return (\n <div className=\"tw-relative\" ref={multiSelectRef}>\n <Trigger\n disabled={disabled}\n buttonProps={buttonProps}\n isFocusVisible={isFocusVisible}\n isOpen={open}\n validation={validation}\n emphasis={emphasis}\n >\n <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n <div\n className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n onClick={(e) => {\n if (e.target === filterInputRef.current && open) {\n return;\n }\n toggleOpen();\n }}\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={muliSelectContentId}\n aria-label={ariaLabel}\n {...focusProps}\n tabIndex={0}\n onKeyDown={handleSpacebarToggle}\n >\n <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n {label && hasSelectedItems && (\n <span className=\"tw-body-medium-strong tw-text-primary\">{label}</span>\n )}\n {type === MultiSelectType.Default &&\n activeItemKeys.map((key) => (\n <Tag\n key={key}\n type={getTagType()}\n label={key.toString()}\n size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={disabled ? undefined : () => toggleSelection(key)}\n />\n ))}\n\n {type === MultiSelectType.Summarized && (hasSelectedItems \|\| summarizedLabelFromProps) && (\n <Tag\n type={getTagType()}\n label={summarizedLabel}\n size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={\n indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n }\n />\n )}\n\n {activeItemKeys.length === 0 && placeholder && (\n <span className=\"tw-body-medium tw-text-secondary\">{placeholder}</span>\n )}\n </div>\n </div>\n </div>\n </Trigger>\n\n {open && heightIsReady && (\n <EnablePortalWrapper enablePortal={enablePortal}>\n <div\n id={muliSelectContentId}\n ref={setMultiSelectMenuRef}\n className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-[120000] tw-bg-base tw-min-w-72\"\n key=\"content\"\n style={{\n ...popperInstance.styles.popper,\n width: triggerRef?.getBoundingClientRect().width,\n }}\n {...popperInstance.attributes.popper}\n >\n <FocusScope restoreFocus>\n <div\n className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n style={{ maxHeight }}\n >\n <Checklist\n activeValues={activeItemKeys.map((key) => key.toString())}\n setActiveValues={onSelectionChange}\n checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n direction={ChecklistDirection.Vertical}\n ariaLabel={ariaLabel}\n />\n </div>\n </FocusScope>\n </div>\n </EnablePortalWrapper>\n )}\n </div>\n );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","type","size","validation","Validation","summarizedLabelFromProps","indeterminateItemKeys","flip","emphasis","TriggerEmphasis","enablePortal","open","setOpen","useState","checkboxes","setCheckboxes","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","muliSelectContentId","useId","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getTagType","TagType","useEffect","item","checkboxBaseItem","CheckboxState","popperInstance","usePopper","useLayoutEffect","handleEscapeKey","event","jsxs","jsx","Trigger","merge","getPaddingClasses","Tag","TagSize","EnablePortalWrapper","FocusScope","Checklist","ChecklistDirection"],"mappings":"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"}

package/dist/components/OrderableList/OrderableList.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrderableList.es.js","sources":["../../../src/components/OrderableList/OrderableList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useId } from '@react-aria/utils';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Tree } from '@components/Tree/Tree';\nimport { TreeItem } from '@components/Tree/TreeItem/TreeItem';\nimport { type OnTreeDropCallback } from '@components/Tree/types';\nimport { type DraggableItem } from '@utilities/dnd/types';\n\nimport { type OrderableListItem, type OrderableListItemStyle, type OrderableListProps } from './types';\n\nconst listItemsCompareFn = <T extends object>(itemA: OrderableListItem<T>, itemB: OrderableListItem<T>): number => {\n if (itemA.sort === null && itemB.sort === null) {\n return 1;\n }\n if (itemA.sort === null) {\n return 1;\n }\n if (itemB.sort === null) {\n return -1;\n }\n\n return itemA.sort - itemB.sort;\n};\n\nconst moveItem = <T extends object>(\n id: string,\n newPosition: number \| null,\n items: DraggableItem<T>[],\n): DraggableItem<T>[] => {\n const theItem = items.find((item) => item.id === id) as DraggableItem<T>;\n\n return theItem ? [{ ...theItem, sort: newPosition }] : [];\n};\n\nexport const OrderableList = <T extends object>({\n onMove,\n dragDisabled,\n items,\n dragHandlerPosition = 'none',\n enableDragDelay = true,\n itemStyle,\n selectedId,\n renderContent,\n 'data-test-id': dataTestId = 'orderable-list',\n}: OrderableListProps<T>) => {\n const [itemsState, setItemsState] = useState(items);\n const listId = useId();\n const isDraggable = !dragDisabled;\n\n useEffect(() => {\n // sort the incoming items\n const itemsClone = [...items];\n itemsClone.sort(listItemsCompareFn);\n setItemsState(itemsClone);\n }, [items]);\n\n const handleDrop: OnTreeDropCallback = (dropArgs) => {\n onMove(moveItem(dropArgs.id, dropArgs.sort, itemsState));\n };\n\n const treeItemStyle = useMemo(() => {\n return {\n spacingY: 'small',\n contentHight: 'content-fit',\n shadow: 'small',\n borderRadius: 'medium',\n borderWidth: 'x-small',\n borderStyle: 'solid',\n activeColorStyle: 'soft',\n ...itemStyle,\n } as OrderableListItemStyle;\n }, [itemStyle]);\n\n return (\n <Tree\n draggable={isDraggable}\n id={listId}\n onDrop={handleDrop}\n data-test-id={dataTestId}\n selectedIds={selectedId ? [selectedId] : []}\n itemStyle={treeItemStyle}\n showDragHandlerOnHoverOnly={!isDraggable}\n dragHandlerPosition={!isDraggable ? 'none' : dragHandlerPosition}\n showContentWhileDragging\n enableDragDelay={enableDragDelay}\n >\n {itemsState.map((item) => {\n const identifier = `collection-item-${item.id}`;\n return (\n <TreeItem\n data-test-id={`${dataTestId}-item`}\n id={item.id}\n key={identifier}\n type=\"collection-item\"\n accepts=\"collection-item\"\n expandable={false}\n levelConstraint={0}\n contentComponent={renderContent(item)}\n />\n );\n })}\n </Tree>\n );\n};\nOrderableList.displayName = 'FondueOrderableList';\n"],"names":["listItemsCompareFn","itemA","itemB","moveItem","id","newPosition","items","theItem","item","OrderableList","onMove","dragDisabled","dragHandlerPosition","enableDragDelay","itemStyle","selectedId","renderContent","dataTestId","itemsState","setItemsState","useState","listId","useId","isDraggable","useEffect","itemsClone","handleDrop","dropArgs","treeItemStyle","useMemo","jsx","Tree","identifier","TreeItem"],"mappings":";;;;;AAYA,MAAMA,IAAqB,CAAmBC,GAA6BC,MACnED,EAAM,SAAS,QAAQC,EAAM,SAAS,QAGtCD,EAAM,SAAS,OACR,IAEPC,EAAM,SAAS,OACR,KAGJD,EAAM,OAAOC,EAAM,MAGxBC,IAAW,CACbC,GACAC,GACAC,MACqB;AACrB,QAAMC,IAAUD,EAAM,KAAK,CAACE,MAASA,EAAK,OAAOJ,CAAE;AAEnD,SAAOG,IAAU,CAAC,EAAE,GAAGA,GAAS,MAAMF,EAAA,CAAa,IAAI,CAAA;AAC3D,GAEaI,IAAgB,CAAmB;AAAA,EAC5C,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAL;AAAA,EACA,qBAAAM,IAAsB;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAA6B;AACzB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASd,CAAK,GAC5Ce,IAASC,EAAA,GACTC,IAAc,CAACZ;AAErB,EAAAa,EAAU,MAAM;AAEZ,UAAMC,IAAa,CAAC,GAAGnB,CAAK;AAC5B,IAAAmB,EAAW,KAAKzB,CAAkB,~~GAClCmB~~,EAAcM,CAAU;AAAA,EAC5B,GAAG,CAACnB,CAAK,CAAC;AAEV,QAAMoB,IAAiC,CAACC,MAAa;AACjD,IAAAjB,EAAOP,EAASwB,EAAS,IAAIA,EAAS,MAAMT,CAAU,CAAC;AAAA,EAC3D,GAEMU,IAAgBC,EAAQ,OACnB;AAAA,IACH,UAAU;AAAA,IACV,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,GAAGf;AAAA,EAAA,IAER,CAACA,CAAS,CAAC;AAEd,SACI,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWR;AAAA,MACX,IAAIF;AAAA,MACJ,QAAQK;AAAA,MACR,gBAAcT;AAAA,MACd,aAAaF,IAAa,CAACA,CAAU,IAAI,CAAA;AAAA,MACzC,WAAWa;AAAA,MACX,4BAA4B,CAACL;AAAA,MAC7B,qBAAsBA,IAAuBX,IAAT;AAAA,MACpC,0BAAwB;AAAA,MACxB,iBAAAC;AAAA,MAEC,UAAAK,EAAW,IAAI,CAACV,MAAS;AACtB,cAAMwB,IAAa,mBAAmBxB,EAAK,EAAE;AAC7C,eACI,gBAAAsB;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGhB,CAAU;AAAA,YAC3B,IAAIT,EAAK;AAAA,YAET,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,YAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,kBAAkBQ,EAAcR,CAAI;AAAA,UAAA;AAAA,UAL/BwB;AAAA,QAAA;AAAA,MAQjB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;AACAvB,EAAc,cAAc;"}
1	+ {"version":3,"file":"OrderableList.es.js","sources":["../../../src/components/OrderableList/OrderableList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useId } from '@react-aria/utils';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Tree } from '@components/Tree/Tree';\nimport { TreeItem } from '@components/Tree/TreeItem/TreeItem';\nimport { type OnTreeDropCallback } from '@components/Tree/types';\nimport { type DraggableItem } from '@utilities/dnd/types';\n\nimport { type OrderableListItem, type OrderableListItemStyle, type OrderableListProps } from './types';\n\nconst listItemsCompareFn = <T extends object>(itemA: OrderableListItem<T>, itemB: OrderableListItem<T>): number => {\n if (itemA.sort === null && itemB.sort === null) {\n return 1;\n }\n if (itemA.sort === null) {\n return 1;\n }\n if (itemB.sort === null) {\n return -1;\n }\n\n return itemA.sort - itemB.sort;\n};\n\nconst moveItem = <T extends object>(\n id: string,\n newPosition: number \| null,\n items: DraggableItem<T>[],\n): DraggableItem<T>[] => {\n const theItem = items.find((item) => item.id === id) as DraggableItem<T>;\n\n return theItem ? [{ ...theItem, sort: newPosition }] : [];\n};\n\nexport const OrderableList = <T extends object>({\n onMove,\n dragDisabled,\n items,\n dragHandlerPosition = 'none',\n enableDragDelay = true,\n itemStyle,\n selectedId,\n renderContent,\n 'data-test-id': dataTestId = 'orderable-list',\n}: OrderableListProps<T>) => {\n const [itemsState, setItemsState] = useState(items);\n const listId = useId();\n const isDraggable = !dragDisabled;\n\n useEffect(() => {\n // sort the incoming items\n const itemsClone = [...items];\n itemsClone.sort(listItemsCompareFn);\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setItemsState(itemsClone);\n }, [items]);\n\n const handleDrop: OnTreeDropCallback = (dropArgs) => {\n onMove(moveItem(dropArgs.id, dropArgs.sort, itemsState));\n };\n\n const treeItemStyle = useMemo(() => {\n return {\n spacingY: 'small',\n contentHight: 'content-fit',\n shadow: 'small',\n borderRadius: 'medium',\n borderWidth: 'x-small',\n borderStyle: 'solid',\n activeColorStyle: 'soft',\n ...itemStyle,\n } as OrderableListItemStyle;\n }, [itemStyle]);\n\n return (\n <Tree\n draggable={isDraggable}\n id={listId}\n onDrop={handleDrop}\n data-test-id={dataTestId}\n selectedIds={selectedId ? [selectedId] : []}\n itemStyle={treeItemStyle}\n showDragHandlerOnHoverOnly={!isDraggable}\n dragHandlerPosition={!isDraggable ? 'none' : dragHandlerPosition}\n showContentWhileDragging\n enableDragDelay={enableDragDelay}\n >\n {itemsState.map((item) => {\n const identifier = `collection-item-${item.id}`;\n return (\n <TreeItem\n data-test-id={`${dataTestId}-item`}\n id={item.id}\n key={identifier}\n type=\"collection-item\"\n accepts=\"collection-item\"\n expandable={false}\n levelConstraint={0}\n contentComponent={renderContent(item)}\n />\n );\n })}\n </Tree>\n );\n};\nOrderableList.displayName = 'FondueOrderableList';\n"],"names":["listItemsCompareFn","itemA","itemB","moveItem","id","newPosition","items","theItem","item","OrderableList","onMove","dragDisabled","dragHandlerPosition","enableDragDelay","itemStyle","selectedId","renderContent","dataTestId","itemsState","setItemsState","useState","listId","useId","isDraggable","useEffect","itemsClone","handleDrop","dropArgs","treeItemStyle","useMemo","jsx","Tree","identifier","TreeItem"],"mappings":";;;;;AAYA,MAAMA,IAAqB,CAAmBC,GAA6BC,MACnED,EAAM,SAAS,QAAQC,EAAM,SAAS,QAGtCD,EAAM,SAAS,OACR,IAEPC,EAAM,SAAS,OACR,KAGJD,EAAM,OAAOC,EAAM,MAGxBC,IAAW,CACbC,GACAC,GACAC,MACqB;AACrB,QAAMC,IAAUD,EAAM,KAAK,CAACE,MAASA,EAAK,OAAOJ,CAAE;AAEnD,SAAOG,IAAU,CAAC,EAAE,GAAGA,GAAS,MAAMF,EAAA,CAAa,IAAI,CAAA;AAC3D,GAEaI,IAAgB,CAAmB;AAAA,EAC5C,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAL;AAAA,EACA,qBAAAM,IAAsB;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAA6B;AACzB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASd,CAAK,GAC5Ce,IAASC,EAAA,GACTC,IAAc,CAACZ;AAErB,EAAAa,EAAU,MAAM;AAEZ,UAAMC,IAAa,CAAC,GAAGnB,CAAK;AAC5B,IAAAmB,EAAW,KAAKzB,CAAkB,GAElCmB,EAAcM,CAAU;AAAA,EAC5B,GAAG,CAACnB,CAAK,CAAC;AAEV,QAAMoB,IAAiC,CAACC,MAAa;AACjD,IAAAjB,EAAOP,EAASwB,EAAS,IAAIA,EAAS,MAAMT,CAAU,CAAC;AAAA,EAC3D,GAEMU,IAAgBC,EAAQ,OACnB;AAAA,IACH,UAAU;AAAA,IACV,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,GAAGf;AAAA,EAAA,IAER,CAACA,CAAS,CAAC;AAEd,SACI,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWR;AAAA,MACX,IAAIF;AAAA,MACJ,QAAQK;AAAA,MACR,gBAAcT;AAAA,MACd,aAAaF,IAAa,CAACA,CAAU,IAAI,CAAA;AAAA,MACzC,WAAWa;AAAA,MACX,4BAA4B,CAACL;AAAA,MAC7B,qBAAsBA,IAAuBX,IAAT;AAAA,MACpC,0BAAwB;AAAA,MACxB,iBAAAC;AAAA,MAEC,UAAAK,EAAW,IAAI,CAACV,MAAS;AACtB,cAAMwB,IAAa,mBAAmBxB,EAAK,EAAE;AAC7C,eACI,gBAAAsB;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGhB,CAAU;AAAA,YAC3B,IAAIT,EAAK;AAAA,YAET,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,YAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,kBAAkBQ,EAAcR,CAAI;AAAA,UAAA;AAAA,UAL/BwB;AAAA,QAAA;AAAA,MAQjB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;AACAvB,EAAc,cAAc;"}

package/dist/components/RadioList/RadioButton.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.es.js","sources":["../../../src/components/RadioList/RadioButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useRef } from 'react';\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { checkIfContainInteractiveElements } from '@utilities/elements';\n\n/\n @deprecated Use `RadioList` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#radiolist the migration guide}.\n /\nexport enum RadioButtonEmphasis {\n Weak = 'Weak',\n}\n\n/\n @deprecated Use `RadioList` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#radiolist the migration guide}.\n /\nexport type RadioButtonProps = {\n value: string;\n disabled?: boolean;\n hideLabel?: boolean;\n emphasis?: RadioButtonEmphasis;\n helperText?: string;\n tooltip?: string;\n};\n\n/\n @deprecated Use `RadioList` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#radiolist the migration guide}.\n */\nexport const RadioButton = ({ ...props }: RadioButtonProps) => {\n const id = useMemoizedId();\n const ref = useRef<HTMLDivElement \| null>(null);\n const hasInteractiveElements = checkIfContainInteractiveElements(ref.current);\n\n return (\n <div\n role=\"tabpanel\"\n ref={ref}\n id={`${id}-content`}\n aria-labelledby={id}\n tabIndex={hasInteractiveElements ? -1 : 0}\n {...props}\n />\n );\n};\n"],"names":["RadioButtonEmphasis","RadioButton","props","id","useMemoizedId","ref","useRef","hasInteractiveElements","checkIfContainInteractiveElements","jsx"],"mappings":";;;;AAUO,IAAKA,sBAAAA,OACRA,EAAA,OAAO,QADCA,IAAAA,KAAA,CAAA,CAAA;AAmBL,MAAMC,IAAc,CAAC,EAAE,GAAGC,QAA8B;AAC3D,QAAMC,IAAKC,EAAA,GACLC,IAAMC,EAA8B,IAAI,~~GACxCC~~,IAAyBC,EAAkCH,EAAI,OAAO;AAE5E,SACI,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,KAAAJ;AAAA,MACA,IAAI,GAAGF,CAAE;AAAA,MACT,mBAAiBA;AAAA,MACjB,UAAUI,IAAyB,KAAK;AAAA,MACvC,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
1	+ {"version":3,"file":"RadioButton.es.js","sources":["../../../src/components/RadioList/RadioButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useRef } from 'react';\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { checkIfContainInteractiveElements } from '@utilities/elements';\n\n/\n @deprecated Use `RadioList` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#radiolist the migration guide}.\n /\nexport enum RadioButtonEmphasis {\n Weak = 'Weak',\n}\n\n/\n @deprecated Use `RadioList` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#radiolist the migration guide}.\n /\nexport type RadioButtonProps = {\n value: string;\n disabled?: boolean;\n hideLabel?: boolean;\n emphasis?: RadioButtonEmphasis;\n helperText?: string;\n tooltip?: string;\n};\n\n/\n @deprecated Use `RadioList` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#radiolist the migration guide}.\n */\nexport const RadioButton = ({ ...props }: RadioButtonProps) => {\n const id = useMemoizedId();\n const ref = useRef<HTMLDivElement \| null>(null);\n // eslint-disable-next-line react-hooks/refs\n const hasInteractiveElements = checkIfContainInteractiveElements(ref.current);\n\n return (\n <div\n role=\"tabpanel\"\n ref={ref}\n id={`${id}-content`}\n aria-labelledby={id}\n tabIndex={hasInteractiveElements ? -1 : 0}\n {...props}\n />\n );\n};\n"],"names":["RadioButtonEmphasis","RadioButton","props","id","useMemoizedId","ref","useRef","hasInteractiveElements","checkIfContainInteractiveElements","jsx"],"mappings":";;;;AAUO,IAAKA,sBAAAA,OACRA,EAAA,OAAO,QADCA,IAAAA,KAAA,CAAA,CAAA;AAmBL,MAAMC,IAAc,CAAC,EAAE,GAAGC,QAA8B;AAC3D,QAAMC,IAAKC,EAAA,GACLC,IAAMC,EAA8B,IAAI,GAExCC,IAAyBC,EAAkCH,EAAI,OAAO;AAE5E,SACI,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,KAAAJ;AAAA,MACA,IAAI,GAAGF,CAAE;AAAA,MACT,mBAAiBA;AAAA,MACjB,UAAUI,IAAyB,KAAK;AAAA,MACvC,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TableColumnHeader.es.js","sources":["../../../src/components/Table/TableColumnHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type Key, cloneElement, useEffect, useRef, useState } from 'react';\n\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport IconArrowBidirectional from '@foundation/Icon/Generated/IconArrowBidirectional';\nimport IconArrowDown from '@foundation/Icon/Generated/IconArrowDown';\nimport IconArrowUp from '@foundation/Icon/Generated/IconArrowUp';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type ColumnAlign, SelectionMode, SortDirection } from './Table';\n\n/\n @deprecated Use `Table` from `@frontify/fondue/components` instead.\n /\nexport enum TableColumnHeaderType {\n Default = 'Default',\n SelectAll = 'SelectAll',\n}\n\n/\n @deprecated Use `Table` from `@frontify/fondue/components` instead.\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 align?: ColumnAlign;\n};\n\n/\n @deprecated Use `Table` from `@frontify/fondue/components` instead.\n /\nexport const TableColumnHeader = ({\n column,\n type = TableColumnHeaderType.Default,\n rowIds,\n sortDirection,\n selectionMode,\n isColumnSorted = false,\n handleSortChange,\n setSelectedRows,\n align = 'left',\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 const cursorStyle = allowsSorting ? 'tw-cursor-pointer' : 'tw-cursor-default';\n const alignStyles = align === 'right' ? 'tw-w-full tw-justify-end' : '';\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 {/ eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison */}\n {selectionMode === SelectionMode.SingleSelect ? (\n <span className=\"tw-sr-only\">{ariaProps['aria-label']}</span>\n ) : (\n <Checkbox value={key} aria-label={key} state={checkboxState} onChange={handleChange} />\n )}\n </th>\n );\n }\n\n return (\n <th\n ref={ref}\n className={merge([\n '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-text-xs tw-font-medium tw-text-black-100 dark:tw-text-white tw-flex tw-gap-x-1 tw-items-center',\n FOCUS_VISIBLE_STYLE,\n cursorStyle,\n alignStyles,\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};\nTableColumnHeader.displayName = 'FondueTableColumnHeader';\n"],"names":["TableColumnHeaderType","TableColumnHeader","column","type","rowIds","sortDirection","selectionMode","isColumnSorted","handleSortChange","setSelectedRows","align","key","rendered","allowsSorting","icon","setIcon","useState","jsx","IconArrowBidirectional","isChecked","setIsChecked","ref","useRef","ButtonOrSpan","cursorStyle","alignStyles","useEffect","SortDirection","IconArrowDown","IconArrowUp","ariaProps","checkboxState","CheckboxState","handleChange","checked","SelectionMode","Checkbox","merge","jsxs","FOCUS_VISIBLE_STYLE","IconSize"],"mappings":";;;;;;;;;;AAiBO,IAAKA,sBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,YAAY,aAFJA,IAAAA,KAAA,CAAA,CAAA;AAuBL,MAAMC,IAAoB,CAAC;AAAA,EAC9B,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,OAAAC,IAAQ;AACZ,MAA8B;AAC1B,QAAM;AAAA,IACF,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAO,EAAE,eAAAC,EAAA;AAAA,EAAc,IACvBX,GACE,CAACY,GAAMC,CAAO,IAAIC,EAAS,gBAAAC,EAACC,KAAuB,CAAE,GACrD,CAACC,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1CK,IAAMC,EAAoC,IAAI,GAC9CC,IAAeV,IAAgB,WAAW,QAC1CW,IAAcX,IAAgB,sBAAsB,qBACpDY,IAAcf,MAAU,UAAU,6BAA6B;~~AAUrE~~,~~MARAgB~~,EAAU,MAAM;AACZ,~~IACIX~~,~~EADAR~~,~~IACQF~~,MAAkBsB,EAAc,aAAa,gBAAAV,EAACW,KAAc,IAAK,gBAAAX,EAACY,KAAY,IAE9E,gBAAAZ,EAACC,KAAuB,CAFwD;AAAA,EAIhG,GAAG,CAACX,GAAgBF,CAAa,CAAC,GAE9BF,MAAS,aAAiC;AAC1C,UAAM2B,IAAY;AAAA,MACd,cAAc;AAAA,MACd,OAAO;AAAA,IAAA,GAGLC,IAAgBZ,IAAYa,EAAc,UAAUA,EAAc,WAElEC,IAAe,MAAM;AACvB,MAAKxB,MAKDA,EADAU,IACgB,CAAA,IAEAf,CAFE,GAKtBgB,EAAa,CAACc,MAAY,CAACA,CAAO;AAAA,IACtC;AAEA,WACI,gBAAAjB;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGa;AAAA,QACJ,KAAAT;AAAA,QACA,WAAU;AAAA,QACV,gBAAa;AAAA,QAGZ,UAAAf,MAAkB6B,EAAc,eAC7B,gBAAAlB,EAAC,UAAK,WAAU,cAAc,YAAU,YAAY,GAAE,IAEtD,gBAAAA,EAACmB,GAAA,EAAS,OAAOzB,GAAK,cAAYA,GAAK,OAAOoB,GAAe,UAAUE,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAIrG;AAEA,SACI,gBAAAhB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAI;AAAA,MACA,WAAWgB,EAAM;AAAA,QACb;AAAA,QACAxB,IAAgB,sBAAsB;AAAA,MAAA,CACzC;AAAA,MACD,gBAAa;AAAA,MACb,OAAM;AAAA,MACN,SAASA,IAAgB,MAAML,EAAiBN,EAAO,KAAKG,CAAa,IAAI,MAAM;AAAA,MAEnF,UAAA,gBAAAiC;AAAA,QAACf;AAAA,QAAA;AAAA,UACG,WAAWc,EAAM;AAAA,YACb;AAAA,YACAE;AAAA,YACAf;AAAA,YACAC;AAAA,UAAA,CACH;AAAA,UAEA,UAAA;AAAA,YAAAb;AAAA,YACAC,KACG,gBAAAI;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,eAAY;AAAA,gBACZ,WACIV,IACM,sBACA;AAAA,gBAGT,YAAaO,GAAM,EAAE,MAAM0B,EAAS,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UACjD;AAAA,QAAA;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGZ;AACAvC,EAAkB,cAAc;"}
1	+ {"version":3,"file":"TableColumnHeader.es.js","sources":["../../../src/components/Table/TableColumnHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type Key, cloneElement, useEffect, useRef, useState } from 'react';\n\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport IconArrowBidirectional from '@foundation/Icon/Generated/IconArrowBidirectional';\nimport IconArrowDown from '@foundation/Icon/Generated/IconArrowDown';\nimport IconArrowUp from '@foundation/Icon/Generated/IconArrowUp';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type ColumnAlign, SelectionMode, SortDirection } from './Table';\n\n/\n @deprecated Use `Table` from `@frontify/fondue/components` instead.\n /\nexport enum TableColumnHeaderType {\n Default = 'Default',\n SelectAll = 'SelectAll',\n}\n\n/\n @deprecated Use `Table` from `@frontify/fondue/components` instead.\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 align?: ColumnAlign;\n};\n\n/\n @deprecated Use `Table` from `@frontify/fondue/components` instead.\n /\nexport const TableColumnHeader = ({\n column,\n type = TableColumnHeaderType.Default,\n rowIds,\n sortDirection,\n selectionMode,\n isColumnSorted = false,\n handleSortChange,\n setSelectedRows,\n align = 'left',\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 const cursorStyle = allowsSorting ? 'tw-cursor-pointer' : 'tw-cursor-default';\n const alignStyles = align === 'right' ? 'tw-w-full tw-justify-end' : '';\n\n useEffect(() => {\n if (isColumnSorted) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\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 {/ eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison */}\n {selectionMode === SelectionMode.SingleSelect ? (\n <span className=\"tw-sr-only\">{ariaProps['aria-label']}</span>\n ) : (\n <Checkbox value={key} aria-label={key} state={checkboxState} onChange={handleChange} />\n )}\n </th>\n );\n }\n\n return (\n <th\n ref={ref}\n className={merge([\n '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-text-xs tw-font-medium tw-text-black-100 dark:tw-text-white tw-flex tw-gap-x-1 tw-items-center',\n FOCUS_VISIBLE_STYLE,\n cursorStyle,\n alignStyles,\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};\nTableColumnHeader.displayName = 'FondueTableColumnHeader';\n"],"names":["TableColumnHeaderType","TableColumnHeader","column","type","rowIds","sortDirection","selectionMode","isColumnSorted","handleSortChange","setSelectedRows","align","key","rendered","allowsSorting","icon","setIcon","useState","jsx","IconArrowBidirectional","isChecked","setIsChecked","ref","useRef","ButtonOrSpan","cursorStyle","alignStyles","useEffect","SortDirection","IconArrowDown","IconArrowUp","ariaProps","checkboxState","CheckboxState","handleChange","checked","SelectionMode","Checkbox","merge","jsxs","FOCUS_VISIBLE_STYLE","IconSize"],"mappings":";;;;;;;;;;AAiBO,IAAKA,sBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,YAAY,aAFJA,IAAAA,KAAA,CAAA,CAAA;AAuBL,MAAMC,IAAoB,CAAC;AAAA,EAC9B,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,OAAAC,IAAQ;AACZ,MAA8B;AAC1B,QAAM;AAAA,IACF,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAO,EAAE,eAAAC,EAAA;AAAA,EAAc,IACvBX,GACE,CAACY,GAAMC,CAAO,IAAIC,EAAS,gBAAAC,EAACC,KAAuB,CAAE,GACrD,CAACC,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1CK,IAAMC,EAAoC,IAAI,GAC9CC,IAAeV,IAAgB,WAAW,QAC1CW,IAAcX,IAAgB,sBAAsB,qBACpDY,IAAcf,MAAU,UAAU,6BAA6B;AAWrE,MATAgB,EAAU,MAAM;AACZ,IAEIX,EAFAR,IAEQF,MAAkBsB,EAAc,aAAa,gBAAAV,EAACW,KAAc,IAAK,gBAAAX,EAACY,KAAY,IAE9E,gBAAAZ,EAACC,KAAuB,CAFwD;AAAA,EAIhG,GAAG,CAACX,GAAgBF,CAAa,CAAC,GAE9BF,MAAS,aAAiC;AAC1C,UAAM2B,IAAY;AAAA,MACd,cAAc;AAAA,MACd,OAAO;AAAA,IAAA,GAGLC,IAAgBZ,IAAYa,EAAc,UAAUA,EAAc,WAElEC,IAAe,MAAM;AACvB,MAAKxB,MAKDA,EADAU,IACgB,CAAA,IAEAf,CAFE,GAKtBgB,EAAa,CAACc,MAAY,CAACA,CAAO;AAAA,IACtC;AAEA,WACI,gBAAAjB;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGa;AAAA,QACJ,KAAAT;AAAA,QACA,WAAU;AAAA,QACV,gBAAa;AAAA,QAGZ,UAAAf,MAAkB6B,EAAc,eAC7B,gBAAAlB,EAAC,UAAK,WAAU,cAAc,YAAU,YAAY,GAAE,IAEtD,gBAAAA,EAACmB,GAAA,EAAS,OAAOzB,GAAK,cAAYA,GAAK,OAAOoB,GAAe,UAAUE,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAIrG;AAEA,SACI,gBAAAhB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAI;AAAA,MACA,WAAWgB,EAAM;AAAA,QACb;AAAA,QACAxB,IAAgB,sBAAsB;AAAA,MAAA,CACzC;AAAA,MACD,gBAAa;AAAA,MACb,OAAM;AAAA,MACN,SAASA,IAAgB,MAAML,EAAiBN,EAAO,KAAKG,CAAa,IAAI,MAAM;AAAA,MAEnF,UAAA,gBAAAiC;AAAA,QAACf;AAAA,QAAA;AAAA,UACG,WAAWc,EAAM;AAAA,YACb;AAAA,YACAE;AAAA,YACAf;AAAA,YACAC;AAAA,UAAA,CACH;AAAA,UAEA,UAAA;AAAA,YAAAb;AAAA,YACAC,KACG,gBAAAI;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,eAAY;AAAA,gBACZ,WACIV,IACM,sBACA;AAAA,gBAGT,YAAaO,GAAM,EAAE,MAAM0B,EAAS,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UACjD;AAAA,QAAA;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGZ;AACAvC,EAAkB,cAAc;"}

package/dist/components/Tabs/TabItem.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabItem.es.js","sources":["../../../src/components/Tabs/TabItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type ReactElement, type ReactNode, useEffect, useState } from 'react';\n\nimport { type BadgeProps } from '@components/Badge';\nimport { checkIfContainInteractiveElements } from '@utilities/elements';\nimport { merge } from '@utilities/merge';\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n /\nexport type TabItemProps = {\n id: string;\n // eslint-disable-next-line @eslint-react/no-unused-props\n label: string;\n // eslint-disable-next-line @eslint-react/no-unused-props\n onClick?: () => void;\n disabled?: boolean;\n // eslint-disable-next-line @eslint-react/no-unused-props\n decorator?: ReactElement;\n // eslint-disable-next-line @eslint-react/no-unused-props\n badge?: BadgeProps;\n children: ReactNode;\n active?: boolean;\n};\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n */\nexport const TabItem = ({ active, disabled, children, id }: TabItemProps): Nullable<ReactElement> => {\n const [ref, setRef] = useState<HTMLDivElement \| null>(null);\n const [hasInteractiveElements, setHasInteractiveElements] = useState(false);\n\n useEffect(() => {\n setHasInteractiveElements(checkIfContainInteractiveElements(ref));\n }, [ref]);\n\n return active ? (\n <div\n role=\"tabpanel\"\n ref={setRef}\n id={`${id}-content`}\n aria-labelledby={id}\n className={merge([!active \|\| disabled ? 'tw-hidden' : '', 'focus:tw-ring-4 focus:tw-ring-blue'])}\n tabIndex={hasInteractiveElements ? -1 : 0}\n >\n {children}\n </div>\n ) : null;\n};\nTabItem.displayName = 'FondueTabItem';\n"],"names":["TabItem","active","disabled","children","id","ref","setRef","useState","hasInteractiveElements","setHasInteractiveElements","useEffect","checkIfContainInteractiveElements","jsx","merge"],"mappings":";;;;AA6BO,MAAMA,IAAU,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,UAAAC,GAAU,IAAAC,QAA+C;AACjG,QAAM,CAACC,GAAKC,CAAM,IAAIC,EAAgC,IAAI,GACpD,CAACC,GAAwBC,CAAyB,IAAIF,EAAS,EAAK;AAE1E,SAAAG,EAAU,MAAM;AACZ,IAAAD,EAA0BE,EAAkCN,CAAG,CAAC;AAAA,EACpE,GAAG,CAACA,CAAG,CAAC,GAEDJ,IACH,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,KAAKN;AAAA,MACL,IAAI,GAAGF,CAAE;AAAA,MACT,mBAAiBA;AAAA,MACjB,WAAWS,EAAM,CAAC,CAACZ,KAAUC,IAAW,cAAc,IAAI,oCAAoC,CAAC;AAAA,MAC/F,UAAUM,IAAyB,KAAK;AAAA,MAEvC,UAAAL;AAAA,IAAA;AAAA,EAAA,IAEL;AACR;AACAH,EAAQ,cAAc;"}
1	+ {"version":3,"file":"TabItem.es.js","sources":["../../../src/components/Tabs/TabItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type ReactElement, type ReactNode, useEffect, useState } from 'react';\n\nimport { type BadgeProps } from '@components/Badge/types';\nimport { checkIfContainInteractiveElements } from '@utilities/elements';\nimport { merge } from '@utilities/merge';\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n /\nexport type TabItemProps = {\n id: string;\n // eslint-disable-next-line @eslint-react/no-unused-props\n label: string;\n // eslint-disable-next-line @eslint-react/no-unused-props\n onClick?: () => void;\n disabled?: boolean;\n // eslint-disable-next-line @eslint-react/no-unused-props\n decorator?: ReactElement;\n // eslint-disable-next-line @eslint-react/no-unused-props\n badge?: BadgeProps;\n children: ReactNode;\n active?: boolean;\n};\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n */\nexport const TabItem = ({ active, disabled, children, id }: TabItemProps): Nullable<ReactElement> => {\n const [ref, setRef] = useState<HTMLDivElement \| null>(null);\n const [hasInteractiveElements, setHasInteractiveElements] = useState(false);\n\n useEffect(() => {\n setHasInteractiveElements(checkIfContainInteractiveElements(ref));\n }, [ref]);\n\n return active ? (\n <div\n role=\"tabpanel\"\n ref={setRef}\n id={`${id}-content`}\n aria-labelledby={id}\n className={merge([!active \|\| disabled ? 'tw-hidden' : '', 'focus:tw-ring-4 focus:tw-ring-blue'])}\n tabIndex={hasInteractiveElements ? -1 : 0}\n >\n {children}\n </div>\n ) : null;\n};\nTabItem.displayName = 'FondueTabItem';\n"],"names":["TabItem","active","disabled","children","id","ref","setRef","useState","hasInteractiveElements","setHasInteractiveElements","useEffect","checkIfContainInteractiveElements","jsx","merge"],"mappings":";;;;AA6BO,MAAMA,IAAU,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,UAAAC,GAAU,IAAAC,QAA+C;AACjG,QAAM,CAACC,GAAKC,CAAM,IAAIC,EAAgC,IAAI,GACpD,CAACC,GAAwBC,CAAyB,IAAIF,EAAS,EAAK;AAE1E,SAAAG,EAAU,MAAM;AACZ,IAAAD,EAA0BE,EAAkCN,CAAG,CAAC;AAAA,EACpE,GAAG,CAACA,CAAG,CAAC,GAEDJ,IACH,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,KAAKN;AAAA,MACL,IAAI,GAAGF,CAAE;AAAA,MACT,mBAAiBA;AAAA,MACjB,WAAWS,EAAM,CAAC,CAACZ,KAAUC,IAAW,cAAc,IAAI,oCAAoC,CAAC;AAAA,MAC/F,UAAUM,IAAyB,KAAK;AAAA,MAEvC,UAAAL;AAAA,IAAA;AAAA,EAAA,IAEL;AACR;AACAH,EAAQ,cAAc;"}

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

@@ -1,12 +1,12 @@
 import { jsxs as m, Fragment as U, jsx as o } from "react/jsx-runtime";
 import { useFocusRing as V } from "@react-aria/focus";
 import { useRef as K, useState as y, Children as A, isValidElement as O, useCallback as P, useEffect as L, cloneElement as z } from "react";
+import { Badge as B } from "../Badge/Badge.es.js";
 import Y from "../../foundation/Icon/Generated/IconDotsHorizontal.es.js";
 import { useMemoizedId as W } from "../../hooks/useMemoizedId.es.js";
 import { FOCUS_VISIBLE_STYLE_INSET as H, FOCUS_STYLE as X, FOCUS_VISIBLE_STYLE as q } from "../../utilities/focusStyle.es.js";
 import { merge as g } from "../../utilities/merge.es.js";
-import { Badge as B } from "../Badge/Badge.es.js";
-import { motion as G } from "../../node_modules/.pnpm/framer-motion@12.23.24_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
+import { motion as G } from "../../node_modules/.pnpm/framer-motion@12.23.27_@emotion_is-prop-valid@0.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
 var J = /* @__PURE__ */ ((l) => (l.Small = "Small", l.Large = "Large", l))(J || {});
 const Q = {
   None: "tw-pl-0",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { motion } from 'motion/react';\nimport {\n Children,\n type KeyboardEvent,\n type ReactElement,\n type ReactNode,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { Badge } from '@components/Badge';\nimport { type TabItemProps } from '@components/Tabs/TabItem';\nimport IconDotsHorizontal from '@foundation/Icon/Generated/IconDotsHorizontal';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { type DimensionUnity } from '@utilities/dimensions';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE, FOCUS_VISIBLE_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n /\nexport enum TabsPaddingX {\n None = 'None',\n XSmall = 'XSmall',\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n /\nexport enum TabSize {\n Small = 'Small',\n Large = 'Large',\n}\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n /\nexport type TabsProps = {\n paddingX?: TabsPaddingX;\n size?: TabSize;\n activeItemId: string;\n children: ReactNode;\n onChange?: (tabId: string) => void;\n maxHeight?: `${number}${DimensionUnity}`;\n minHeight?: `${number}${DimensionUnity}`;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n [TabsPaddingX.None]: 'tw-pl-0',\n [TabsPaddingX.XSmall]: 'tw-pl-xs',\n [TabsPaddingX.Small]: 'tw-pl-s',\n [TabsPaddingX.Medium]: 'tw-pl-m',\n [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nconst getTabButtonTextStyle = (tab: TabItemProps, activeItemId: string) => {\n if (tab.disabled) {\n return 'tw-text-text-disabled';\n }\n\n if (tab.id === activeItemId) {\n return 'tw-font-medium tw-text-text';\n }\n\n return 'tw-text-text-weak hover:tw-text-text';\n};\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n */\nexport const Tabs = ({\n paddingX,\n size,\n activeItemId,\n children,\n onChange,\n maxHeight,\n minHeight,\n}: TabsProps): ReactElement => {\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 = useCallback(() => {\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 const activeItemIndex = array.findIndex((tab) => tab.id === activeItemId);\n\n return array.filter((tab, index) => {\n if (direction === 'next') {\n if (index > activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n if (direction === 'previous') {\n if (index < activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n return false;\n });\n };\n\n const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(event.key)) {\n event.stopPropagation();\n }\n\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 new Error((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 }, [checkIfOverflowing]);\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-h-full tw-w-full tw-flex tw-justify-start',\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-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n getTabButtonTextStyle(tab, activeItemId),\n FOCUS_VISIBLE_STYLE_INSET,\n size === TabSize.Small\n ? 'tw-h-12 tw-text-body-medium'\n : 'tw-h-14 tw-text-body-large',\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 <span className=\"tw-ml-1.5\">\n <Badge disabled={tab.disabled} style={tab.badge.style}>\n {tab.badge.children}\n </Badge>\n </span>\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-box-selected-strong tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n />\n )}\n </button>\n );\n })}\n </div>\n {isOverflowing && (\n <div\n data-test-id=\"tab-overflow\"\n className=\"tw-z-50 tw-flex-grow tw-pl-3 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 FOCUS_VISIBLE_STYLE,\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\" className=\"tw-flex tw-flex-col tw-overflow-y-auto\">\n <div className=\"tw-mr-0\" style={{ maxHeight, minHeight }}>\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 </div>\n </>\n );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabSize","paddingMap","getTabButtonTextStyle","tab","activeItemId","Tabs","paddingX","size","children","onChange","maxHeight","minHeight","groupId","useMemoizedId","tabNavRef","useRef","isOverflowing","setIsOverflowing","useState","isMenuOpened","setIsMenuOpened","tabs","Children","child","isValidElement","overflowArray","setOverflowArray","checkIfOverflowing","useCallback","tabNav","overFlowIndex","tabItem","i","navPosition","tabPosition","overFlowIndexInAscOrder","a","b","getOverflownTabs","filterTabList","array","direction","activeItemIndex","index","handleKeyboardTabChange","event","overflownTabs","target","fromOverflow","currentTabId","currentTabsArray","nextTabs","previousTabs","triggerTabButton","elementId","tabElement","buttonElement","error","triggerOverflowMenu","useEffect","isFocusVisible","focusProps","useFocusRing","jsxs","Fragment","jsx","merge","FOCUS_VISIBLE_STYLE_INSET","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","FOCUS_VISIBLE_STYLE","_a","_b","cloneElement"],"mappings":"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"}
1	+ {"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { motion } from 'motion/react';\nimport {\n Children,\n type KeyboardEvent,\n type ReactElement,\n type ReactNode,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport { Badge } from '@components/Badge/Badge';\nimport { type TabItemProps } from '@components/Tabs/TabItem';\nimport IconDotsHorizontal from '@foundation/Icon/Generated/IconDotsHorizontal';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { type DimensionUnity } from '@utilities/dimensions';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE, FOCUS_VISIBLE_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n /\nexport enum TabsPaddingX {\n None = 'None',\n XSmall = 'XSmall',\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n /\nexport enum TabSize {\n Small = 'Small',\n Large = 'Large',\n}\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n /\nexport type TabsProps = {\n paddingX?: TabsPaddingX;\n size?: TabSize;\n activeItemId: string;\n children: ReactNode;\n onChange?: (tabId: string) => void;\n maxHeight?: `${number}${DimensionUnity}`;\n minHeight?: `${number}${DimensionUnity}`;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n [TabsPaddingX.None]: 'tw-pl-0',\n [TabsPaddingX.XSmall]: 'tw-pl-xs',\n [TabsPaddingX.Small]: 'tw-pl-s',\n [TabsPaddingX.Medium]: 'tw-pl-m',\n [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nconst getTabButtonTextStyle = (tab: TabItemProps, activeItemId: string) => {\n if (tab.disabled) {\n return 'tw-text-text-disabled';\n }\n\n if (tab.id === activeItemId) {\n return 'tw-font-medium tw-text-text';\n }\n\n return 'tw-text-text-weak hover:tw-text-text';\n};\n\n/\n @deprecated Please use updated tabs component from `@frontify/fondue/components` instead.\n */\nexport const Tabs = ({\n paddingX,\n size,\n activeItemId,\n children,\n onChange,\n maxHeight,\n minHeight,\n}: TabsProps): ReactElement => {\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 = useCallback(() => {\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 const activeItemIndex = array.findIndex((tab) => tab.id === activeItemId);\n\n return array.filter((tab, index) => {\n if (direction === 'next') {\n if (index > activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n if (direction === 'previous') {\n if (index < activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n return false;\n });\n };\n\n const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(event.key)) {\n event.stopPropagation();\n }\n\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 new Error((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 // eslint-disable-next-line react-hooks/set-state-in-effect\n checkIfOverflowing();\n }, [checkIfOverflowing]);\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-h-full tw-w-full tw-flex tw-justify-start',\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-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n getTabButtonTextStyle(tab, activeItemId),\n FOCUS_VISIBLE_STYLE_INSET,\n size === TabSize.Small\n ? 'tw-h-12 tw-text-body-medium'\n : 'tw-h-14 tw-text-body-large',\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 <span className=\"tw-ml-1.5\">\n <Badge disabled={tab.disabled} style={tab.badge.style}>\n {tab.badge.children}\n </Badge>\n </span>\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-box-selected-strong tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n />\n )}\n </button>\n );\n })}\n </div>\n {isOverflowing && (\n <div\n data-test-id=\"tab-overflow\"\n className=\"tw-z-50 tw-flex-grow tw-pl-3 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 FOCUS_VISIBLE_STYLE,\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\" className=\"tw-flex tw-flex-col tw-overflow-y-auto\">\n <div className=\"tw-mr-0\" style={{ maxHeight, minHeight }}>\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 </div>\n </>\n );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabSize","paddingMap","getTabButtonTextStyle","tab","activeItemId","Tabs","paddingX","size","children","onChange","maxHeight","minHeight","groupId","useMemoizedId","tabNavRef","useRef","isOverflowing","setIsOverflowing","useState","isMenuOpened","setIsMenuOpened","tabs","Children","child","isValidElement","overflowArray","setOverflowArray","checkIfOverflowing","useCallback","tabNav","overFlowIndex","tabItem","i","navPosition","tabPosition","overFlowIndexInAscOrder","a","b","getOverflownTabs","filterTabList","array","direction","activeItemIndex","index","handleKeyboardTabChange","event","overflownTabs","target","fromOverflow","currentTabId","currentTabsArray","nextTabs","previousTabs","triggerTabButton","elementId","tabElement","buttonElement","error","triggerOverflowMenu","useEffect","isFocusVisible","focusProps","useFocusRing","jsxs","Fragment","jsx","merge","FOCUS_VISIBLE_STYLE_INSET","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","FOCUS_VISIBLE_STYLE","_a","_b","cloneElement"],"mappings":"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"}