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/FilterableMultiSelect/FilterableMultiSelect.es.js CHANGED Viewed

@@ -1,42 +1,41 @@
 import { jsxs as d, jsx as l } from "react/jsx-runtime";
-import { useButton as ee } from "@react-aria/button";
-import { useFocusRing as le, FocusScope as oe } from "@react-aria/focus";
-import { useState as i, useRef as te, useId as re, useEffect as f, useCallback as se } from "react";
-import { usePopper as ae } from "react-popper";
-import { CheckboxState as V } from "../Checkbox/Checkbox.es.js";
-import { Checklist as ne, ChecklistDirection as ce } from "../Checklist/Checklist.es.js";
-import { Tag as j, TagSize as w, TagType as B } from "../Tag/Tag.es.js";
-import { TextInput as ue } from "../TextInput/TextInput.es.js";
-import { Trigger as ie, TriggerEmphasis as pe } from "../Trigger/Trigger.es.js";
-import { useDropdownAutoHeight as de, DEFAULT_DROPDOWN_MAX_HEIGHT as fe } from "../../hooks/useDropdownAutoHeight.es.js";
-import { EnablePortalWrapper as we } from "../../utilities/dialogs/EnablePortalWrapper.es.js";
-import { merge as he } from "../../utilities/merge.es.js";
-import { Validation as ge } from "../../utilities/validation.es.js";
-import { useClickOutside as me, getPaddingClasses as be } from "./helpers.es.js";
-import { Text as S } from "../../typography/Text/Text.es.js";
-var xe = /* @__PURE__ */ ((o) => (o.Default = "Default", o.Summarized = "Summarized", o))(xe || {}), ve = /* @__PURE__ */ ((o) => (o.Small = "Small", o.Medium = "Medium", o))(ve || {});
-const Se = ({
+import { useButton as K } from "@react-aria/button";
+import { useFocusRing as ee, FocusScope as le } from "@react-aria/focus";
+import { useState as i, useRef as oe, useId as te, useEffect as f, useCallback as re } from "react";
+import { usePopper as se } from "react-popper";
+import { CheckboxState as H } from "../Checkbox/Checkbox.es.js";
+import { Checklist as ae, ChecklistDirection as ne } from "../Checklist/Checklist.es.js";
+import { Tag as V, TagSize as w, TagType as j } from "../Tag/Tag.es.js";
+import { TextInput as ce } from "../TextInput/TextInput.es.js";
+import { Trigger as ue, TriggerEmphasis as ie } from "../Trigger/Trigger.es.js";
+import { useDropdownAutoHeight as pe, DEFAULT_DROPDOWN_MAX_HEIGHT as de } from "../../hooks/useDropdownAutoHeight.es.js";
+import { EnablePortalWrapper as fe } from "../../utilities/dialogs/EnablePortalWrapper.es.js";
+import { merge as we } from "../../utilities/merge.es.js";
+import { Validation as he } from "../../utilities/validation.es.js";
+import { useClickOutside as ge, getPaddingClasses as me } from "./helpers.es.js";
+var be = /* @__PURE__ */ ((o) => (o.Default = "Default", o.Summarized = "Summarized", o))(be || {}), xe = /* @__PURE__ */ ((o) => (o.Small = "Small", o.Medium = "Medium", o))(xe || {});
+const ve = ({
   items: o,
   activeItemKeys: a,
   onSelectionChange: h,
-  ariaLabel: C = "Select list",
-  disabled: T = !1,
+  ariaLabel: S = "Select list",
+  disabled: C = !1,
   placeholder: D,
-  label: M,
-  type: k = "Default",
+  label: T,
+  type: M = "Default",
   size: g = "Medium",
-  validation: L = ge.Default,
+  validation: B = he.Default,
   summarizedLabel: N,
   indeterminateItemKeys: t,
-  flip: W = !1,
-  emphasis: _ = pe.Default,
-  enablePortal: G = !0,
-  filterLabel: U,
-  emptyFilteredResultsLabel: X
+  flip: L = !1,
+  emphasis: W = ie.Default,
+  enablePortal: _ = !0,
+  filterLabel: G,
+  emptyFilteredResultsLabel: U
 }) => {
-  const [n, m] = i(!1), [b, O] = i([]), [P, q] = i(""), c = te(null), [z, F] = i(null), [u, J] = i(null), { isFocusVisible: Q, focusProps: Y } = le(), { maxHeight: E } = de({ current: u }, { isOpen: n, autoResize: !0 }), A = a.length > 0, Z = N ?? [a.length, "selected"].join(" ");
-  me(null, () => m(!1), [c == null ? void 0 : c.current, z]);
-  const $ = E !== fe, R = re(), x = () => m((e) => !e), { buttonProps: y } = ee(
+  const [n, m] = i(!1), [b, k] = i([]), [O, X] = i(""), c = oe(null), [P, F] = i(null), [u, q] = i(null), { isFocusVisible: J, focusProps: Q } = ee(), { maxHeight: z } = pe({ current: u }, { isOpen: n, autoResize: !0 }), E = a.length > 0, Y = N ?? [a.length, "selected"].join(" ");
+  ge(null, () => m(!1), [c == null ? void 0 : c.current, P]);
+  const Z = z !== de, A = te(), x = () => m((e) => !e), { buttonProps: $ } = K(
     {
       onPress: x,
       onKeyDown: (e) => {
@@ -45,23 +44,23 @@ const Se = ({
       elementType: "div"
     },
     { current: u }
-  ), I = (e) => {
+  ), y = (e) => {
     const r = new Set(a);
     r.has(e) ? r.delete(e) : r.add(e), h(Array.from(r));
-  }, K = (e) => {
+  }, I = (e) => {
     e.code === "Space" && x();
-  }, H = () => n ? B.SelectedWithFocus : B.Selected;
+  }, R = () => n ? j.SelectedWithFocus : j.Selected;
   f(() => {
     F(c == null ? void 0 : c.current);
   }, []), f(() => {
-    O(
-      o.map((e) => t != null && t.includes(e.value) ? { ...e, label: e.value, state: V.Mixed } : { ...e, label: e.value })
+    k(
+      o.map((e) => t != null && t.includes(e.value) ? { ...e, label: e.value, state: H.Mixed } : { ...e, label: e.value })
     );
   }, [o, t]);
-  const v = se(
+  const v = re(
     (e) => {
-      q(e), O(
-        o.reduce((r, s) => s.isCategory || s.isDivider || s.value.toLowerCase().includes(e.toLowerCase()) ? t != null && t.includes(s.value) ? [...r, { ...s, label: s.value, state: V.Mixed }] : [...r, { ...s, label: s.value }] : r, [])
+      X(e), k(
+        o.reduce((r, s) => s.isCategory || s.isDivider || s.value.toLowerCase().includes(e.toLowerCase()) ? t != null && t.includes(s.value) ? [...r, { ...s, label: s.value, state: H.Mixed }] : [...r, { ...s, label: s.value }] : r, [])
       );
     },
     [t, o]
@@ -69,7 +68,7 @@ const Se = ({
   f(() => {
     n || v("");
   }, [n, v]);
-  const p = ae(u, z, {
+  const p = se(u, P, {
     placement: "bottom-start",
     strategy: "fixed",
     modifiers: [
@@ -81,7 +80,7 @@ const Se = ({
       },
       {
         name: "flip",
-        enabled: W
+        enabled: L
       }
     ]
   });
@@ -91,57 +90,57 @@ const Se = ({
     })().catch(console.error);
   }, [a]), /* @__PURE__ */ d("div", { className: "tw-relative", ref: c, children: [
     /* @__PURE__ */ l(
-      ie,
+      ue,
       {
-        disabled: T,
-        buttonProps: y,
-        isFocusVisible: Q,
+        disabled: C,
+        buttonProps: $,
+        isFocusVisible: J,
         isOpen: n,
-        validation: L,
-        emphasis: _,
-        children: /* @__PURE__ */ l("div", { className: he(["tw-flex tw-flex-1 tw-gap-2", be(g)]), ref: J, children: /* @__PURE__ */ l(
+        validation: B,
+        emphasis: W,
+        children: /* @__PURE__ */ l("div", { className: we(["tw-flex tw-flex-1 tw-gap-2", me(g)]), ref: q, children: /* @__PURE__ */ l(
           "div",
           {
             className: "tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0",
             onClick: x,
             role: "combobox",
             "aria-expanded": n,
-            "aria-controls": R,
-            "aria-label": C,
-            ...Y,
+            "aria-controls": A,
+            "aria-label": S,
+            ...Q,
             tabIndex: 0,
-            onKeyDown: K,
+            onKeyDown: I,
             children: /* @__PURE__ */ d("div", { className: "tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]", children: [
-              M && A && /* @__PURE__ */ l(S, { weight: "strong", children: M }),
-              k === "Default" && a.map((e) => /* @__PURE__ */ l(
-                j,
+              T && E && /* @__PURE__ */ l("span", { className: "tw-body-medium-strong tw-text-primary", children: T }),
+              M === "Default" && a.map((e) => /* @__PURE__ */ l(
+                V,
                 {
-                  type: H(),
+                  type: R(),
                   label: e.toString(),
                   size: g === "Small" ? w.Small : w.Medium,
-                  onClick: T ? void 0 : () => I(e)
+                  onClick: C ? void 0 : () => y(e)
                 },
                 e
               )),
-              k === "Summarized" && (A || N) && /* @__PURE__ */ l(
-                j,
+              M === "Summarized" && (E || N) && /* @__PURE__ */ l(
+                V,
                 {
-                  type: H(),
-                  label: Z,
+                  type: R(),
+                  label: Y,
                   size: g === "Small" ? w.Small : w.Medium,
                   onClick: (t == null ? void 0 : t.length) === 0 ? () => h([]) : void 0
                 }
               ),
-              a.length === 0 && D && /* @__PURE__ */ l(S, { color: "weak", children: D })
+              a.length === 0 && D && /* @__PURE__ */ l("span", { className: "tw-body-medium tw-text-secondary", children: D })
             ] })
           }
         ) })
       }
     ),
-    n && $ && /* @__PURE__ */ l(we, { enablePortal: G, children: /* @__PURE__ */ l(
+    n && Z && /* @__PURE__ */ l(fe, { enablePortal: _, children: /* @__PURE__ */ l(
       "div",
       {
-        id: R,
+        id: A,
         ref: F,
         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: {
@@ -149,12 +148,12 @@ const Se = ({
           width: u == null ? void 0 : u.getBoundingClientRect().width
         },
         ...p.attributes.popper,
-        children: /* @__PURE__ */ d(oe, { restoreFocus: !0, children: [
+        children: /* @__PURE__ */ d(le, { restoreFocus: !0, children: [
           /* @__PURE__ */ l("div", { className: "tw-p-4 tw-pb-0", children: /* @__PURE__ */ l(
-            ue,
+            ce,
             {
-              value: P,
-              placeholder: U,
+              value: O,
+              placeholder: G,
               clearable: !0,
               onChange: v,
               focusOnMount: !0
@@ -164,19 +163,19 @@ const Se = ({
             "div",
             {
               className: "tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative",
-              style: { maxHeight: E },
+              style: { maxHeight: z },
               children: [
                 b.length > 0 && /* @__PURE__ */ l(
-                  ne,
+                  ae,
                   {
                     activeValues: a.map((e) => e.toString()),
                     setActiveValues: h,
                     checkboxes: b.filter((e) => !e.isDivider && !e.isCategory),
-                    direction: ce.Vertical,
-                    ariaLabel: C
+                    direction: ne.Vertical,
+                    ariaLabel: S
                   }
                 ),
-                b.length === 0 && P !== "" && /* @__PURE__ */ l(S, { size: "small", color: "weak", children: X })
+                b.length === 0 && O !== "" && /* @__PURE__ */ l("span", { className: "tw-body-small tw-text-secondary", children: U })
               ]
             }
           )
@@ -186,10 +185,10 @@ const Se = ({
     ) })
   ] });
 };
-Se.displayName = "FondueFilterableMultiSelect";
+ve.displayName = "FondueFilterableMultiSelect";
 export {
-  Se as FilterableMultiSelect,
-  ve as FilterableMultiSelectSize,
-  xe as FilterableMultiSelectType
+  ve as FilterableMultiSelect,
+  xe as FilterableMultiSelectSize,
+  be as FilterableMultiSelectType
 };
 //# sourceMappingURL=FilterableMultiSelect.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterableMultiSelect.es.js","sources":["../../../src/components/FilterableMultiSelect/FilterableMultiSelect.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 useCallback,\n useEffect,\n useId,\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 { TextInput } from '@components/TextInput/TextInput';\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 FilterableMultiSelectType {\n Default = 'Default',\n Summarized = 'Summarized',\n}\n\nexport enum FilterableMultiSelectSize {\n Small = 'Small',\n Medium = 'Medium',\n}\n\nexport type FilterableMultiSelectItem = {\n value: string;\n isCategory?: boolean;\n isDivider?: boolean;\n avatar?: ReactNode;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport type FilterableMultiSelectProps = {\n items: FilterableMultiSelectItem[];\n activeItemKeys: (string \| number)[];\n disabled?: boolean;\n onSelectionChange: (keys: (string \| number)[]) => void;\n ariaLabel?: string;\n label?: string;\n placeholder?: string;\n type?: FilterableMultiSelectType;\n size?: FilterableMultiSelectSize;\n validation?: Validation;\n summarizedLabel?: string;\n indeterminateItemKeys?: (string \| number)[];\n flip?: boolean;\n emphasis?: TriggerEmphasis;\n enablePortal?: boolean;\n filterLabel?: string;\n emptyFilteredResultsLabel?: string;\n};\n\ntype FilterableMultiSelectCheckboxItem = {\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 FilterableMultiSelect = ({\n items,\n activeItemKeys,\n onSelectionChange,\n ariaLabel = 'Select list',\n disabled = false,\n placeholder,\n label,\n type = FilterableMultiSelectType.Default,\n size = FilterableMultiSelectSize.Medium,\n validation = Validation.Default,\n summarizedLabel: summarizedLabelFromProps,\n indeterminateItemKeys,\n flip = false,\n emphasis = TriggerEmphasis.Default,\n enablePortal = true,\n filterLabel,\n emptyFilteredResultsLabel,\n}: FilterableMultiSelectProps): ReactElement => {\n const [open, setOpen] = useState(false);\n const [checkboxes, setCheckboxes] = useState<FilterableMultiSelectCheckboxItem[]>([]);\n const [searchTerm, setSearchTerm] = useState<string>('');\n\n const multiSelectRef = useRef<HTMLDivElement \| null>(null);\n const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null \| HTMLDivElement>(null);\n const [triggerRef, setTriggerRef] = useState<HTMLDivElement \| null>(null);\n\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 multiSelectContentId = 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 = (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.code === 'Space') {\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 if (indeterminateItemKeys?.includes(item.value)) {\n return { ...item, label: item.value, state: CheckboxState.Mixed };\n }\n\n return { ...item, label: item.value };\n }),\n );\n }, [items, indeterminateItemKeys]);\n\n const handleFilterChange = useCallback(\n (newValue: string) => {\n setSearchTerm(newValue);\n\n setCheckboxes(\n items.reduce((acc: FilterableMultiSelectCheckboxItem[], item) => {\n if (\n item.isCategory \|\|\n item.isDivider \|\|\n item.value.toLowerCase().includes(newValue.toLowerCase())\n ) {\n if (indeterminateItemKeys?.includes(item.value)) {\n return [...acc, { ...item, label: item.value, state: CheckboxState.Mixed }];\n }\n\n return [...acc, { ...item, label: item.value }];\n }\n return acc;\n }, []),\n );\n },\n [indeterminateItemKeys, items],\n );\n\n useEffect(() => {\n if (!open) {\n handleFilterChange('');\n }\n }, [open, handleFilterChange]);\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 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={toggleOpen}\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={multiSelectContentId}\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 === FilterableMultiSelectType.Default &&\n activeItemKeys.map((key) => (\n <Tag\n key={key}\n type={getTagType()}\n label={key.toString()}\n size={size === FilterableMultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={disabled ? undefined : () => toggleSelection(key)}\n />\n ))}\n\n {type === FilterableMultiSelectType.Summarized &&\n (hasSelectedItems \|\| summarizedLabelFromProps) && (\n <Tag\n type={getTagType()}\n label={summarizedLabel}\n size={size === FilterableMultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={\n indeterminateItemKeys?.length === 0\n ? () => onSelectionChange([])\n : 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={multiSelectContentId}\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 className=\"tw-p-4 tw-pb-0\">\n <TextInput\n value={searchTerm}\n placeholder={filterLabel}\n clearable\n onChange={handleFilterChange}\n focusOnMount\n />\n </div>\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 {checkboxes.length > 0 && (\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 )}\n\n {checkboxes.length === 0 && searchTerm !== '' && (\n <Text size=\"small\" color=\"weak\">\n {emptyFilteredResultsLabel}\n </Text>\n )}\n </div>\n </FocusScope>\n </div>\n </EnablePortalWrapper>\n )}\n </div>\n );\n};\nFilterableMultiSelect.displayName = 'FondueFilterableMultiSelect';\n"],"names":["FilterableMultiSelectType","FilterableMultiSelectSize","FilterableMultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","type","size","validation","Validation","summarizedLabelFromProps","indeterminateItemKeys","flip","emphasis","TriggerEmphasis","enablePortal","filterLabel","emptyFilteredResultsLabel","open","setOpen","useState","checkboxes","setCheckboxes","searchTerm","setSearchTerm","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","multiSelectContentId","useId","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpaceBarToggle","event","getTagType","TagType","useEffect","item","CheckboxState","handleFilterChange","useCallback","newValue","acc","popperInstance","usePopper","jsxs","jsx","Trigger","merge","getPaddingClasses","Text","Tag","TagSize","EnablePortalWrapper","FocusScope","TextInput","Checklist","ChecklistDirection"],"mappings":"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"}
1	+ {"version":3,"file":"FilterableMultiSelect.es.js","sources":["../../../src/components/FilterableMultiSelect/FilterableMultiSelect.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 useCallback,\n useEffect,\n useId,\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 { TextInput } from '@components/TextInput/TextInput';\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 FilterableMultiSelectType {\n Default = 'Default',\n Summarized = 'Summarized',\n}\n\nexport enum FilterableMultiSelectSize {\n Small = 'Small',\n Medium = 'Medium',\n}\n\nexport type FilterableMultiSelectItem = {\n value: string;\n isCategory?: boolean;\n isDivider?: boolean;\n avatar?: ReactNode;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport type FilterableMultiSelectProps = {\n items: FilterableMultiSelectItem[];\n activeItemKeys: (string \| number)[];\n disabled?: boolean;\n onSelectionChange: (keys: (string \| number)[]) => void;\n ariaLabel?: string;\n label?: string;\n placeholder?: string;\n type?: FilterableMultiSelectType;\n size?: FilterableMultiSelectSize;\n validation?: Validation;\n summarizedLabel?: string;\n indeterminateItemKeys?: (string \| number)[];\n flip?: boolean;\n emphasis?: TriggerEmphasis;\n enablePortal?: boolean;\n filterLabel?: string;\n emptyFilteredResultsLabel?: string;\n};\n\ntype FilterableMultiSelectCheckboxItem = {\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 FilterableMultiSelect = ({\n items,\n activeItemKeys,\n onSelectionChange,\n ariaLabel = 'Select list',\n disabled = false,\n placeholder,\n label,\n type = FilterableMultiSelectType.Default,\n size = FilterableMultiSelectSize.Medium,\n validation = Validation.Default,\n summarizedLabel: summarizedLabelFromProps,\n indeterminateItemKeys,\n flip = false,\n emphasis = TriggerEmphasis.Default,\n enablePortal = true,\n filterLabel,\n emptyFilteredResultsLabel,\n}: FilterableMultiSelectProps): ReactElement => {\n const [open, setOpen] = useState(false);\n const [checkboxes, setCheckboxes] = useState<FilterableMultiSelectCheckboxItem[]>([]);\n const [searchTerm, setSearchTerm] = useState<string>('');\n\n const multiSelectRef = useRef<HTMLDivElement \| null>(null);\n const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null \| HTMLDivElement>(null);\n const [triggerRef, setTriggerRef] = useState<HTMLDivElement \| null>(null);\n\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 multiSelectContentId = 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 = (event: KeyboardEvent<HTMLDivElement>) => {\n if (event.code === 'Space') {\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 if (indeterminateItemKeys?.includes(item.value)) {\n return { ...item, label: item.value, state: CheckboxState.Mixed };\n }\n\n return { ...item, label: item.value };\n }),\n );\n }, [items, indeterminateItemKeys]);\n\n const handleFilterChange = useCallback(\n (newValue: string) => {\n setSearchTerm(newValue);\n\n setCheckboxes(\n items.reduce((acc: FilterableMultiSelectCheckboxItem[], item) => {\n if (\n item.isCategory \|\|\n item.isDivider \|\|\n item.value.toLowerCase().includes(newValue.toLowerCase())\n ) {\n if (indeterminateItemKeys?.includes(item.value)) {\n return [...acc, { ...item, label: item.value, state: CheckboxState.Mixed }];\n }\n\n return [...acc, { ...item, label: item.value }];\n }\n return acc;\n }, []),\n );\n },\n [indeterminateItemKeys, items],\n );\n\n useEffect(() => {\n if (!open) {\n handleFilterChange('');\n }\n }, [open, handleFilterChange]);\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 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={toggleOpen}\n role=\"combobox\"\n aria-expanded={open}\n aria-controls={multiSelectContentId}\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 === FilterableMultiSelectType.Default &&\n activeItemKeys.map((key) => (\n <Tag\n key={key}\n type={getTagType()}\n label={key.toString()}\n size={size === FilterableMultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={disabled ? undefined : () => toggleSelection(key)}\n />\n ))}\n\n {type === FilterableMultiSelectType.Summarized &&\n (hasSelectedItems \|\| summarizedLabelFromProps) && (\n <Tag\n type={getTagType()}\n label={summarizedLabel}\n size={size === FilterableMultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={\n indeterminateItemKeys?.length === 0\n ? () => onSelectionChange([])\n : 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={multiSelectContentId}\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 className=\"tw-p-4 tw-pb-0\">\n <TextInput\n value={searchTerm}\n placeholder={filterLabel}\n clearable\n onChange={handleFilterChange}\n focusOnMount\n />\n </div>\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 {checkboxes.length > 0 && (\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 )}\n\n {checkboxes.length === 0 && searchTerm !== '' && (\n <span className=\"tw-body-small tw-text-secondary\">{emptyFilteredResultsLabel}</span>\n )}\n </div>\n </FocusScope>\n </div>\n </EnablePortalWrapper>\n )}\n </div>\n );\n};\nFilterableMultiSelect.displayName = 'FondueFilterableMultiSelect';\n"],"names":["FilterableMultiSelectType","FilterableMultiSelectSize","FilterableMultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","type","size","validation","Validation","summarizedLabelFromProps","indeterminateItemKeys","flip","emphasis","TriggerEmphasis","enablePortal","filterLabel","emptyFilteredResultsLabel","open","setOpen","useState","checkboxes","setCheckboxes","searchTerm","setSearchTerm","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","multiSelectContentId","useId","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpaceBarToggle","event","getTagType","TagType","useEffect","item","CheckboxState","handleFilterChange","useCallback","newValue","acc","popperInstance","usePopper","jsxs","jsx","Trigger","merge","getPaddingClasses","Tag","TagSize","EnablePortalWrapper","FocusScope","TextInput","Checklist","ChecklistDirection"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LegacyTooltip.es.js","sources":["../../../src/components/LegacyTooltip/LegacyTooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type Placement } from '@popperjs/core';\nimport { useLink } from '@react-aria/link';\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n type FocusEvent,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Button } from '@components/Button/Button';\nimport { ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button/ButtonTypes';\nimport { Portal } from '@components/Portal/Portal';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { BrightHeader, brightHeaderArrowBackgroundColors, type BrightHeaderStyle } from './BrightHeader';\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport type TooltipButton = {\n label: string;\n action: () => void;\n};\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport type LegacyTooltipProps = {\n triggerElement?: ReactElement;\n content: ReactNode;\n tooltipIcon?: ReactElement;\n heading?: ReactNode;\n headingIcon?: ReactElement;\n linkUrl?: string;\n linkLabel?: string;\n brightHeader?: BrightHeaderStyle;\n buttons?: [TooltipButton, TooltipButton] \| [TooltipButton];\n children?: ReactNode;\n position?: TooltipPosition \| 'top' \| 'bottom' \| 'left' \| 'right';\n alignment?: TooltipAlignment;\n flip?: boolean;\n withArrow?: boolean;\n withStrongBorder?: boolean;\n hoverDelay?: number;\n enterDelay?: number;\n open?: boolean;\n disabled?: boolean;\n /* @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore /\n hidden?: boolean;\n enablePortal?: boolean;\n 'data-test-id'?: string;\n};\n\nconst paddingsTop = {\n small: 'tw-pt-2',\n large: 'tw-pt-3',\n};\n\nconst paddingsBottom = {\n small: 'tw-pb-2',\n large: 'tw-pb-3',\n};\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport enum TooltipPosition {\n Top = 'top',\n Right = 'right',\n Bottom = 'bottom',\n Left = 'left',\n}\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport enum TooltipAlignment {\n Start = 'Start',\n Middle = 'Middle',\n}\n\nconst placementMap: Record<`${TooltipPosition \| 'top' \| 'bottom' \| 'left' \| 'right'}-${TooltipAlignment}`, Placement> =\n {\n 'top-Start': 'top-start',\n 'bottom-Start': 'bottom-start',\n 'left-Start': 'left-start',\n 'right-Start': 'right-start',\n 'top-Middle': 'top',\n 'right-Middle': 'right',\n 'bottom-Middle': 'bottom',\n 'left-Middle': 'left',\n };\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle \| undefined, alignment: string) => {\n switch (true) {\n case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-primary';\n case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n return merge([\n 'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n brightHeader &&\n // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-bg-primary',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-bg-primary',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n brightHeader &&\n // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-bg-primary',\n ]);\n default:\n return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-primary';\n }\n};\n\nconst TooltipWrapper = ({\n enablePortal = false,\n children,\n}: {\n enablePortal?: boolean;\n children?: ReactNode \| ReactNode[];\n}) => {\n if (enablePortal) {\n return (<Portal>{children}</Portal>) as JSX.Element;\n }\n\n return children as JSX.Element;\n};\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport const LegacyTooltip = ({\n content,\n tooltipIcon,\n heading,\n headingIcon,\n linkUrl,\n linkLabel,\n brightHeader,\n buttons,\n children,\n position = TooltipPosition.Bottom,\n alignment = TooltipAlignment.Middle,\n withStrongBorder = false,\n withArrow,\n flip = true,\n triggerElement,\n hoverDelay = 200,\n enterDelay = 0,\n open = false,\n disabled = false,\n enablePortal = false,\n hidden = false,\n 'data-test-id': dataTestId = 'tooltip',\n}: LegacyTooltipProps) => {\n const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement \| HTMLDivElement \| HTMLButtonElement \| null>(\n null,\n );\n const [isOpen, setIsOpen] = useState(false);\n const linkRef = useRef<HTMLAnchorElement \| null>(null);\n\n const shouldPreventTooltipOpening = hidden \|\| disabled;\n const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n const hasLargePaddingTop = useMemo(\n () => linkUrl \|\| buttons \|\| heading \|\| headingIcon,\n [linkUrl, buttons, heading, headingIcon],\n );\n\n const placement = placementMap[`${position}-${alignment}`];\n const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement \| null>(null);\n const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement \| null>(null);\n const [arrowElement, setArrowElement] = useState<HTMLDivElement \| null>(null);\n const id = useMemoizedId();\n\n const tooltipOffset = withArrow ? 10 : 5;\n const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n placement,\n strategy: 'fixed',\n modifiers: [\n {\n name: 'arrow',\n options: {\n element: arrowElement,\n },\n },\n {\n name: 'eventListeners',\n options: { scroll: isOpen, resize: isOpen },\n },\n {\n name: 'offset',\n options: {\n offset: [0, tooltipOffset],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n const currentPlacement = popperInstance.state?.placement ?? position;\n const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const handleHideTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n }, [hoverDelay]);\n\n const handleShowTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n if (enterDelay) {\n timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n return;\n }\n\n setIsOpen(true);\n }, [enterDelay]);\n\n const checkIfHovered = useCallback(\n (event: MouseEvent) => {\n const hoveredElement = event.composedPath?.();\n const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n if (hoveredElement && hoverSources.some((el) => el && hoveredElement.includes(el))) {\n handleShowTooltipOnHover();\n }\n },\n [handleShowTooltipOnHover, tooltipContainerRef, triggerElementContainerRef, triggerElementRef],\n );\n\n const handleCloseIfFocusedOutside = useCallback(\n (event: FocusEvent<HTMLElement>) => {\n const { relatedTarget } = event;\n const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n if (!relatedTarget \|\| !elements.some((element) => element?.contains(relatedTarget))) {\n setIsOpen(false);\n }\n },\n [tooltipContainerRef, triggerElementContainerRef],\n );\n\n const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n ? {}\n : {\n onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n onMouseLeave: handleHideTooltipOnHover,\n onFocus: () => setIsOpen(true),\n onBlur: handleCloseIfFocusedOutside,\n };\n\n useEffect(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsOpen(shouldPreventTooltipOpening ? false : open);\n }, [open, shouldPreventTooltipOpening]);\n\n const listenForEsc = useCallback(\n (event: KeyboardEvent) => {\n if (isOpen && event.key === 'Escape') {\n setIsOpen(false);\n }\n },\n [isOpen],\n );\n\n useLayoutEffect(() => {\n if (typeof popperInstance.update === 'function' && isOpen) {\n popperInstance.update();\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n useEffect(() => {\n if (isOpen) {\n window.addEventListener('keydown', listenForEsc);\n } else {\n window.removeEventListener('keydown', listenForEsc);\n }\n\n return () => {\n window.removeEventListener('keydown', listenForEsc);\n };\n }, [listenForEsc, isOpen]);\n\n return (\n <>\n <div {...openingEvents} ref={setTriggerElementContainerRef}>\n <div ref={setTriggerElementRef} aria-describedby={id} role=\"tooltip\">\n {triggerElement}\n </div>\n </div>\n <TooltipWrapper enablePortal={enablePortal}>\n <div\n ref={setTooltipContainerRef}\n aria-hidden={shouldPreventTooltipOpening}\n className={merge([\n 'tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-primary tw-rounded-md tw-shadow-mid tw-text-primary-on-primary tw-z-[120000]',\n !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n withStrongBorder && 'tw-border tw-border-line-mid',\n ])}\n data-test-id={dataTestId}\n role=\"tooltip\"\n id={id}\n style={popperInstance.styles.popper}\n {...popperInstance.attributes.popper}\n {...openingEvents}\n >\n {brightHeader ? <BrightHeader headerStyle={brightHeader} /> : null}\n <div\n className={merge([\n 'tw-px-3 tw-bg-primary tw-rounded-md tw-relative tw-z-[120000]',\n hasLargePaddingTop ? paddingsTop.large : paddingsTop.small,\n linkUrl ? paddingsBottom.large : paddingsBottom.small,\n ])}\n >\n {heading ? (\n <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n {headingIcon && (\n <span className=\"tw-mr-1.5\">\n {cloneElement(headingIcon, { size: IconSize.Size20 })}\n </span>\n )}\n {heading}\n </h4>\n ) : null}\n <div className=\"tw-flex\">\n {tooltipIcon ? (\n <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n </span>\n ) : null}\n <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n </div>\n {linkUrl ? (\n <a\n {...linkProps}\n data-test-id={`${dataTestId}-link`}\n ref={linkRef}\n href={linkUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={merge([\n 'tw-text-xs tw-text-black-40 tw-underline tw-mt-1',\n FOCUS_VISIBLE_STYLE,\n ])}\n >\n {linkLabel ?? 'Click here to learn more.'}\n </a>\n ) : null}\n {buttons ? (\n <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n {buttons.length > 0 && (\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Strong}\n size={ButtonSize.Small}\n onClick={buttons[0].action}\n disabled={shouldPreventTooltipOpening}\n >\n {buttons[0].label}\n </Button>\n )}\n {buttons.length === 2 && (\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Default}\n size={ButtonSize.Small}\n onClick={buttons[1].action}\n disabled={shouldPreventTooltipOpening}\n >\n {buttons[1].label}\n </Button>\n )}\n </div>\n ) : null}\n </div>\n {/\n This container is needed for the arrow element to not be styled by popperJS\n * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n * */}\n <div aria-hidden=\"true\">\n <div\n data-test-id=\"popover-arrow\"\n data-popper-arrow={withArrow}\n ref={setArrowElement}\n style={popperInstance.styles.arrow}\n className={merge([\n withArrow &&\n 'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border',\n withArrow && arrowStyling,\n withStrongBorder\n ? 'before:tw-border-line-strong'\n : withArrow && 'before:tw-border-line',\n ])}\n />\n </div>\n {children}\n </div>\n </TooltipWrapper>\n </>\n );\n};\nLegacyTooltip.displayName = 'FondueLegacyTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","TooltipWrapper","enablePortal","children","jsx","Portal","LegacyTooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","position","withStrongBorder","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","dataTestId","triggerElementRef","setTriggerElementRef","useState","isOpen","setIsOpen","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","jsxs","Fragment","BrightHeader","cloneElement","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":";;;;;;;;;;;;AAkEA,MAAMA,IAAc;AAAA,EAChB,OAAO;AAAA,EACP,OAAO;AACX,GAEMC,IAAiB;AAAA,EACnB,OAAO;AAAA,EACP,OAAO;AACX;AAKO,IAAKC,uBAAAA,OACRA,EAAA,MAAM,OACNA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QAJCA,IAAAA,MAAA,CAAA,CAAA,GAUAC,uBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAFDA,IAAAA,MAAA,CAAA,CAAA;AAKZ,MAAMC,KACF;AAAA,EACI,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,eAAe;AACnB,GAEEC,KAAkB,CAACC,GAA0BC,GAA6CC,MAAsB;AAClH,UAAQ,IAAA;AAAA,IACJ,KAAKF,EAAiB,SAAA,EAAW,SAAS,MAAoB,aAAa;AACvE,aAAO;AAAA,IACX,KAAKA,EAAiB,SAAA,EAAW,SAAS,QAAsB,aAAa;AACzE,aAAOG,EAAM;AAAA,QACT;AAAA,QACAF;AAAA,QAEAC,MAAc,WACdF,EAAiB,WAAW,SAAS,QAAuB,YAAA,CAAa,IACnEI,EAAkCH,CAAY,IAC9C;AAAA,MAAA,CACT;AAAA,IACL,KAAKD,EAAiB,SAAA,EAAW,SAAS,SAAuB,aAAa;AAC1E,aAAOG,EAAM;AAAA,QACT;AAAA,QACAF,IAAeG,EAAkCH,CAAY,IAAI;AAAA,MAAA,CACpE;AAAA,IACL,KAAKD,EAAiB,SAAA,EAAW,SAAS,OAAqB,aAAa;AACxE,aAAOG,EAAM;AAAA,QACT;AAAA,QACAF;AAAA,QAEAC,MAAc,WACdF,EAAiB,WAAW,SAAS,QAAuB,YAAA,CAAa,IACnEI,EAAkCH,CAAY,IAC9C;AAAA,MAAA,CACT;AAAA,IACL;AACI,aAAO;AAAA,EAAA;AAEnB,GAEMI,KAAiB,CAAC;AAAA,EACpB,cAAAC,IAAe;AAAA,EACf,UAAAC;AACJ,MAIQD,IACQ,gBAAAE,EAACC,MAAQ,UAAAF,GAAS,IAGvBA,GAMEG,KAAgB,CAAC;AAAA,EAC1B,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAf;AAAA,EACA,SAAAgB;AAAA,EACA,UAAAV;AAAA,EACA,UAAAW,IAAW;AAAA,EACX,WAAAhB,IAAY;AAAA,EACZ,kBAAAiB,IAAmB;AAAA,EACnB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,cAAApB,KAAe;AAAA,EACf,QAAAqB,KAAS;AAAA,EACT,gBAAgBC,IAAa;AACjC,MAA0B;;AACtB,QAAM,CAACC,GAAmBC,EAAoB,IAAIC;AAAA,IAC9C;AAAA,EAAA,GAEE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GACpCG,IAAUC,EAAiC,IAAI,GAE/CC,IAA8BT,MAAUD,GACxC,EAAE,WAAAW,OAAcC,GAAQ,EAAE,YAAYF,EAAA,GAA+BF,CAAO,GAC5EK,KAAqBC;AAAA,IACvB,MAAMzB,KAAWE,KAAWJ,KAAWC;AAAA,IACvC,CAACC,GAASE,GAASJ,GAASC,CAAW;AAAA,EAAA,GAGrC2B,KAAY3C,GAAa,GAAGoB,CAAQ,IAAIhB,CAAS,EAAE,GACnD,CAACwC,GAAqBC,EAAsB,IAAIZ,EAAgC,IAAI,GACpF,CAACa,GAA4BC,EAA6B,IAAId,EAAgC,IAAI,GAClG,CAACe,IAAcC,EAAe,IAAIhB,EAAgC,IAAI,GACtEiB,IAAKC,GAAA,GAGLC,IAAiBC,GAAUtB,GAAmBa,GAAqB;AAAA,IACrE,WAAAD;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,SAASK;AAAA,QAAA;AAAA,MACb;AAAA,MAEJ;AAAA,QACI,MAAM;AAAA,QACN,SAAS,EAAE,QAAQd,GAAQ,QAAQA,EAAA;AAAA,MAAO;AAAA,MAE9C;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,GAlBHZ,IAAY,KAAK,CAkBE;AAAA,QAAA;AAAA,MAC7B;AAAA,MAEJ;AAAA,QACI,MAAM;AAAA,QACN,SAASC;AAAA,MAAA;AAAA,IACb;AAAA,EACJ,CACH,GAEKrB,OAAmBoD,IAAAF,EAAe,UAAf,gBAAAE,EAAsB,cAAalC,GACtDmC,KAAetD,GAAgBC,IAAkBC,GAAcC,CAAS,GACxEoD,IAAanB,EAA6C,IAAI,GAE9DoB,KAA2BC,EAAY,MAAM;AAC/C,IAAIF,EAAW,WACX,aAAaA,EAAW,OAAO,GAEnCA,EAAW,UAAU,WAAW,MAAMrB,EAAU,EAAK,GAAGV,CAAU;AAAA,EACtE,GAAG,CAACA,CAAU,CAAC,GAETkC,IAA2BD,EAAY,MAAM;AAK/C,QAJIF,EAAW,WACX,aAAaA,EAAW,OAAO,GAG/B9B,GAAY;AACZ,MAAA8B,EAAW,UAAU,WAAW,MAAMrB,EAAU,EAAI,GAAGT,CAAU;AACjE;AAAA,IACJ;AAEA,IAAAS,EAAU,EAAI;AAAA,EAClB,GAAG,CAACT,CAAU,CAAC,GAETkC,KAAiBF;AAAA,IACnB,CAACG,MAAsB;;AACnB,YAAMC,KAAiBR,IAAAO,EAAM,iBAAN,gBAAAP,EAAA,KAAAO;AAGvB,MAAIC,KAFiB,CAAC/B,GAAmBe,GAA4BF,CAAmB,EAErD,KAAK,CAACmB,MAAOA,KAAMD,EAAe,SAASC,CAAE,CAAC,KAC7EJ,EAAA;AAAA,IAER;AAAA,IACA,CAACA,GAA0Bf,GAAqBE,GAA4Bf,CAAiB;AAAA,EAAA,GAG3FiC,KAA8BN;AAAA,IAChC,CAACG,MAAmC;AAChC,YAAM,EAAE,eAAAI,MAAkBJ;AAG1B,OAAI,CAACI,KAAiB,CAFL,CAACrB,GAAqBE,CAA0B,EAEjC,KAAK,CAACoB,MAAYA,KAAA,gBAAAA,EAAS,SAASD,EAAc,MAC9E9B,EAAU,EAAK;AAAA,IAEvB;AAAA,IACA,CAACS,GAAqBE,CAA0B;AAAA,EAAA,GAG9CqB,IAA6C7B,IAC7C,KACA;AAAA,IACI,aAAa,CAACuB,MAAUD,GAAeC,EAAM,WAAW;AAAA,IACxD,cAAcJ;AAAA,IACd,SAAS,MAAMtB,EAAU,EAAI;AAAA,IAC7B,QAAQ6B;AAAA,EAAA;AAGlB,EAAAI,EAAU,MAAM;AACZ,IAAIZ,EAAW,WACX,aAAaA,EAAW,OAAO,GAEnCrB,EAAUG,IAA8B,KAAQX,CAAI;AAAA,EACxD,GAAG,CAACA,GAAMW,CAA2B,CAAC;AAEtC,QAAM+B,IAAeX;AAAA,IACjB,CAACG,MAAyB;AACtB,MAAI3B,KAAU2B,EAAM,QAAQ,YACxB1B,EAAU,EAAK;AAAA,IAEvB;AAAA,IACA,CAACD,CAAM;AAAA,EAAA;AAGX,SAAAoC,GAAgB,MAAM;AAClB,IAAI,OAAOlB,EAAe,UAAW,cAAclB,KAC/CkB,EAAe,OAAA;AAAA,EAIvB,GAAG,CAAClB,CAAM,CAAC,GAEXkC,EAAU,OACFlC,IACA,OAAO,iBAAiB,WAAWmC,CAAY,IAE/C,OAAO,oBAAoB,WAAWA,CAAY,GAG/C,MAAM;AACT,WAAO,oBAAoB,WAAWA,CAAY;AAAA,EACtD,IACD,CAACA,GAAcnC,CAAM,CAAC,GAGrB,gBAAAqC,EAAAC,IAAA,EACI,UAAA;AAAA,IAAA,gBAAA9D,EAAC,OAAA,EAAK,GAAGyD,GAAe,KAAKpB,IACzB,UAAA,gBAAArC,EAAC,OAAA,EAAI,KAAKsB,IAAsB,oBAAkBkB,GAAI,MAAK,WACtD,aACL,GACJ;AAAA,IACA,gBAAAxC,EAACH,MAAe,cAAAC,IACZ,UAAA,gBAAA+D;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAK1B;AAAA,QACL,eAAaP;AAAA,QACb,WAAWjC,EAAM;AAAA,UACb;AAAA,UACA,CAAC6B,KAAU;AAAA,UACXb,KAAoB;AAAA,QAAA,CACvB;AAAA,QACD,gBAAcS;AAAA,QACd,MAAK;AAAA,QACL,IAAAoB;AAAA,QACA,OAAOE,EAAe,OAAO;AAAA,QAC5B,GAAGA,EAAe,WAAW;AAAA,QAC7B,GAAGe;AAAA,QAEH,UAAA;AAAA,UAAAhE,IAAe,gBAAAO,EAAC+D,IAAA,EAAa,aAAatE,EAAA,CAAc,IAAK;AAAA,UAC9D,gBAAAoE;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWlE,EAAM;AAAA,gBACb;AAAA,gBACAoC,KAAqB7C,EAAY,QAAQA,EAAY;AAAA,gBACrDqB,IAAUpB,EAAe,QAAQA,EAAe;AAAA,cAAA,CACnD;AAAA,cAEA,UAAA;AAAA,gBAAAkB,IACG,gBAAAwD,EAAC,MAAA,EAAG,WAAU,0CACT,UAAA;AAAA,kBAAAvD,KACG,gBAAAN,EAAC,QAAA,EAAK,WAAU,aACX,UAAAgE,EAAa1D,GAAa,EAAE,MAAM2D,EAAS,OAAA,CAAQ,EAAA,CACxD;AAAA,kBAEH5D;AAAA,gBAAA,EAAA,CACL,IACA;AAAA,gBACJ,gBAAAwD,EAAC,OAAA,EAAI,WAAU,WACV,UAAA;AAAA,kBAAAzD,IACG,gBAAAJ,EAAC,QAAA,EAAK,WAAU,oCACX,UAAAgE,EAAa5D,GAAa,EAAE,MAAM6D,EAAS,OAAA,CAAQ,EAAA,CACxD,IACA;AAAA,kBACJ,gBAAAjE,EAAC,QAAA,EAAK,WAAU,uCAAuC,UAAAG,EAAA,CAAQ;AAAA,gBAAA,GACnE;AAAA,gBACCI,IACG,gBAAAP;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACI,GAAG6B;AAAA,oBACJ,gBAAc,GAAGT,CAAU;AAAA,oBAC3B,KAAKM;AAAA,oBACL,MAAMnB;AAAA,oBACN,QAAO;AAAA,oBACP,KAAI;AAAA,oBACJ,WAAWZ,EAAM;AAAA,sBACb;AAAA,sBACAuE;AAAA,oBAAA,CACH;AAAA,oBAEA,UAAA1D,KAAa;AAAA,kBAAA;AAAA,gBAAA,IAElB;AAAA,gBACHC,IACG,gBAAAoD,EAAC,OAAA,EAAI,WAAU,kDACV,UAAA;AAAA,kBAAApD,EAAQ,SAAS,KACd,gBAAAT;AAAA,oBAACmE;AAAA,oBAAA;AAAA,sBACG,OAAOC,EAAY;AAAA,sBACnB,UAAUC,EAAe;AAAA,sBACzB,MAAMC,EAAW;AAAA,sBACjB,SAAS7D,EAAQ,CAAC,EAAE;AAAA,sBACpB,UAAUmB;AAAA,sBAET,UAAAnB,EAAQ,CAAC,EAAE;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAGnBA,EAAQ,WAAW,KAChB,gBAAAT;AAAA,oBAACmE;AAAA,oBAAA;AAAA,sBACG,OAAOC,EAAY;AAAA,sBACnB,UAAUC,EAAe;AAAA,sBACzB,MAAMC,EAAW;AAAA,sBACjB,SAAS7D,EAAQ,CAAC,EAAE;AAAA,sBACpB,UAAUmB;AAAA,sBAET,UAAAnB,EAAQ,CAAC,EAAE;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAChB,EAAA,CAER,IACA;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAMR,gBAAAT,EAAC,OAAA,EAAI,eAAY,QACb,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,qBAAmBY;AAAA,cACnB,KAAK2B;AAAA,cACL,OAAOG,EAAe,OAAO;AAAA,cAC7B,WAAW/C,EAAM;AAAA,gBACbiB,KACI;AAAA,gBACJA,KAAaiC;AAAA,gBACblC,IACM,iCACAC,KAAa;AAAA,cAAA,CACtB;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,UACCb;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACL,CACJ;AAAA,EAAA,GACJ;AAER;AACAG,GAAc,cAAc;"}
1	+ {"version":3,"file":"LegacyTooltip.es.js","sources":["../../../src/components/LegacyTooltip/LegacyTooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type Placement } from '@popperjs/core';\nimport { useLink } from '@react-aria/link';\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n type FocusEvent,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { Button } from '@components/Button/Button';\nimport { ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button/ButtonTypes';\nimport { Portal } from '@components/Portal/Portal';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { BrightHeader, brightHeaderArrowBackgroundColors, type BrightHeaderStyle } from './BrightHeader';\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport type TooltipButton = {\n label: string;\n action: () => void;\n};\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport type LegacyTooltipProps = {\n triggerElement?: ReactElement;\n content: ReactNode;\n tooltipIcon?: ReactElement;\n heading?: ReactNode;\n headingIcon?: ReactElement;\n linkUrl?: string;\n linkLabel?: string;\n brightHeader?: BrightHeaderStyle;\n buttons?: [TooltipButton, TooltipButton] \| [TooltipButton];\n children?: ReactNode;\n position?: TooltipPosition \| 'top' \| 'bottom' \| 'left' \| 'right';\n alignment?: TooltipAlignment;\n flip?: boolean;\n withArrow?: boolean;\n withStrongBorder?: boolean;\n hoverDelay?: number;\n enterDelay?: number;\n open?: boolean;\n disabled?: boolean;\n /* @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore /\n hidden?: boolean;\n enablePortal?: boolean;\n 'data-test-id'?: string;\n};\n\nconst paddingsTop = {\n small: 'tw-pt-2',\n large: 'tw-pt-3',\n};\n\nconst paddingsBottom = {\n small: 'tw-pb-2',\n large: 'tw-pb-3',\n};\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport enum TooltipPosition {\n Top = 'top',\n Right = 'right',\n Bottom = 'bottom',\n Left = 'left',\n}\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport enum TooltipAlignment {\n Start = 'Start',\n Middle = 'Middle',\n}\n\nconst placementMap: Record<`${TooltipPosition \| 'top' \| 'bottom' \| 'left' \| 'right'}-${TooltipAlignment}`, Placement> =\n {\n 'top-Start': 'top-start',\n 'bottom-Start': 'bottom-start',\n 'left-Start': 'left-start',\n 'right-Start': 'right-start',\n 'top-Middle': 'top',\n 'right-Middle': 'right',\n 'bottom-Middle': 'bottom',\n 'left-Middle': 'left',\n };\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle \| undefined, alignment: string) => {\n switch (true) {\n case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-primary';\n case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n return merge([\n 'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n brightHeader &&\n // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-bg-primary',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-bg-primary',\n ]);\n case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n return merge([\n 'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n brightHeader &&\n // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison\n alignment === TooltipAlignment.Start &&\n currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n ? brightHeaderArrowBackgroundColors[brightHeader]\n : 'before:tw-bg-primary',\n ]);\n default:\n return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-primary';\n }\n};\n\nconst TooltipWrapper = ({\n enablePortal = false,\n children,\n}: {\n enablePortal?: boolean;\n children?: ReactNode \| ReactNode[];\n}) => {\n if (enablePortal) {\n return (<Portal>{children}</Portal>) as JSX.Element;\n }\n\n return children as JSX.Element;\n};\n\n/\n @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}.\n /\nexport const LegacyTooltip = ({\n content,\n tooltipIcon,\n heading,\n headingIcon,\n linkUrl,\n linkLabel,\n brightHeader,\n buttons,\n children,\n position = TooltipPosition.Bottom,\n alignment = TooltipAlignment.Middle,\n withStrongBorder = false,\n withArrow,\n flip = true,\n triggerElement,\n hoverDelay = 200,\n enterDelay = 0,\n open = false,\n disabled = false,\n enablePortal = false,\n hidden = false,\n 'data-test-id': dataTestId = 'tooltip',\n}: LegacyTooltipProps) => {\n const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement \| HTMLDivElement \| HTMLButtonElement \| null>(\n null,\n );\n const [isOpen, setIsOpen] = useState(false);\n const linkRef = useRef<HTMLAnchorElement \| null>(null);\n\n const shouldPreventTooltipOpening = hidden \|\| disabled;\n const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n const hasLargePaddingTop = useMemo(\n () => linkUrl \|\| buttons \|\| heading \|\| headingIcon,\n [linkUrl, buttons, heading, headingIcon],\n );\n\n const placement = placementMap[`${position}-${alignment}`];\n const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement \| null>(null);\n const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement \| null>(null);\n const [arrowElement, setArrowElement] = useState<HTMLDivElement \| null>(null);\n const id = useMemoizedId();\n\n const tooltipOffset = withArrow ? 10 : 5;\n const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n placement,\n strategy: 'fixed',\n modifiers: [\n {\n name: 'arrow',\n options: {\n element: arrowElement,\n },\n },\n {\n name: 'eventListeners',\n options: { scroll: isOpen, resize: isOpen },\n },\n {\n name: 'offset',\n options: {\n offset: [0, tooltipOffset],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n const currentPlacement = popperInstance.state?.placement ?? position;\n const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const handleHideTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n }, [hoverDelay]);\n\n const handleShowTooltipOnHover = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n\n if (enterDelay) {\n timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n return;\n }\n\n setIsOpen(true);\n }, [enterDelay]);\n\n const checkIfHovered = useCallback(\n (event: MouseEvent) => {\n const hoveredElement = event.composedPath?.();\n const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n if (hoveredElement && hoverSources.some((el) => el && hoveredElement.includes(el))) {\n handleShowTooltipOnHover();\n }\n },\n [handleShowTooltipOnHover, tooltipContainerRef, triggerElementContainerRef, triggerElementRef],\n );\n\n const handleCloseIfFocusedOutside = useCallback(\n (event: FocusEvent<HTMLElement>) => {\n const { relatedTarget } = event;\n const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n if (!relatedTarget \|\| !elements.some((element) => element?.contains(relatedTarget))) {\n setIsOpen(false);\n }\n },\n [tooltipContainerRef, triggerElementContainerRef],\n );\n\n const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n ? {}\n : {\n onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n onMouseLeave: handleHideTooltipOnHover,\n onFocus: () => setIsOpen(true),\n onBlur: handleCloseIfFocusedOutside,\n };\n\n useEffect(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n setIsOpen(shouldPreventTooltipOpening ? false : open);\n }, [open, shouldPreventTooltipOpening]);\n\n // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n const listenForEsc = useCallback(\n (event: KeyboardEvent) => {\n if (isOpen && event.key === 'Escape') {\n setIsOpen(false);\n }\n },\n [isOpen],\n );\n\n useLayoutEffect(() => {\n if (typeof popperInstance.update === 'function' && isOpen) {\n popperInstance.update();\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen]);\n\n useEffect(() => {\n if (isOpen) {\n window.addEventListener('keydown', listenForEsc);\n } else {\n window.removeEventListener('keydown', listenForEsc);\n }\n\n return () => {\n window.removeEventListener('keydown', listenForEsc);\n };\n }, [listenForEsc, isOpen]);\n\n return (\n <>\n <div {...openingEvents} ref={setTriggerElementContainerRef}>\n <div ref={setTriggerElementRef} aria-describedby={id} role=\"tooltip\">\n {triggerElement}\n </div>\n </div>\n <TooltipWrapper enablePortal={enablePortal}>\n <div\n ref={setTooltipContainerRef}\n aria-hidden={shouldPreventTooltipOpening}\n className={merge([\n 'tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-primary tw-rounded-md tw-shadow-mid tw-text-primary-on-primary tw-z-[120000]',\n !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n withStrongBorder && 'tw-border tw-border-line-mid',\n ])}\n data-test-id={dataTestId}\n role=\"tooltip\"\n id={id}\n style={popperInstance.styles.popper}\n {...popperInstance.attributes.popper}\n {...openingEvents}\n >\n {brightHeader ? <BrightHeader headerStyle={brightHeader} /> : null}\n <div\n className={merge([\n 'tw-px-3 tw-bg-primary tw-rounded-md tw-relative tw-z-[120000]',\n hasLargePaddingTop ? paddingsTop.large : paddingsTop.small,\n linkUrl ? paddingsBottom.large : paddingsBottom.small,\n ])}\n >\n {heading ? (\n <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n {headingIcon && (\n <span className=\"tw-mr-1.5\">\n {cloneElement(headingIcon, { size: IconSize.Size20 })}\n </span>\n )}\n {heading}\n </h4>\n ) : null}\n <div className=\"tw-flex\">\n {tooltipIcon ? (\n <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n </span>\n ) : null}\n <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n </div>\n {linkUrl ? (\n <a\n {...linkProps}\n data-test-id={`${dataTestId}-link`}\n ref={linkRef}\n href={linkUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={merge([\n 'tw-text-xs tw-text-black-40 tw-underline tw-mt-1',\n FOCUS_VISIBLE_STYLE,\n ])}\n >\n {linkLabel ?? 'Click here to learn more.'}\n </a>\n ) : null}\n {buttons ? (\n <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n {buttons.length > 0 && (\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Strong}\n size={ButtonSize.Small}\n onClick={buttons[0].action}\n disabled={shouldPreventTooltipOpening}\n >\n {buttons[0].label}\n </Button>\n )}\n {buttons.length === 2 && (\n <Button\n style={ButtonStyle.Default}\n emphasis={ButtonEmphasis.Default}\n size={ButtonSize.Small}\n onClick={buttons[1].action}\n disabled={shouldPreventTooltipOpening}\n >\n {buttons[1].label}\n </Button>\n )}\n </div>\n ) : null}\n </div>\n {/\n This container is needed for the arrow element to not be styled by popperJS\n * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n * */}\n <div aria-hidden=\"true\">\n <div\n data-test-id=\"popover-arrow\"\n data-popper-arrow={withArrow}\n ref={setArrowElement}\n style={popperInstance.styles.arrow}\n className={merge([\n withArrow &&\n 'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border',\n withArrow && arrowStyling,\n withStrongBorder\n ? 'before:tw-border-line-strong'\n : withArrow && 'before:tw-border-line',\n ])}\n />\n </div>\n {children}\n </div>\n </TooltipWrapper>\n </>\n );\n};\nLegacyTooltip.displayName = 'FondueLegacyTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","TooltipWrapper","enablePortal","children","jsx","Portal","LegacyTooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","position","withStrongBorder","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","dataTestId","triggerElementRef","setTriggerElementRef","useState","isOpen","setIsOpen","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","jsxs","Fragment","BrightHeader","cloneElement","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}

package/dist/components/Menu/useMenuKeyboardNavigation.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useMenuKeyboardNavigation.es.js","sources":["../../../src/components/Menu/useMenuKeyboardNavigation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useCallback, useEffect, useState } from 'react';\n\n/\n @deprecated Please use custom keyboard navigation instead.\n */\nexport const useMenuKeyboardNavigation = (\n isMenuOpened: boolean,\n menuContainerRef: HTMLElement \| null,\n focusableElementsSelector = 'li > button:not(:disabled)',\n) => {\n const [currentItemIndex, setCurrentItemIndex] = useState(0);\n const [itemsElements, setItemsElements] = useState<NodeList>();\n const [menuKeyboardNavigationAction, setMenuKeyboardNavigationAction] = useState('');\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!itemsElements \|\| !['Tab', 'ArrowDown', 'ArrowUp', 'Escape'].includes(event.key)) {\n return;\n }\n\n const isTab = event.key === 'Tab' && !event.shiftKey;\n const isShiftTab = event.key === 'Tab' && event.shiftKey;\n const isEsc = event.key === 'Escape';\n const shouldMoveDown = isTab \|\| event.key === 'ArrowDown';\n const shouldMoveUp = isShiftTab \|\| event.key === 'ArrowUp';\n\n if (\n (isShiftTab && currentItemIndex <= 0) \|\|\n (isTab && currentItemIndex >= itemsElements.length - 1) \|\|\n isEsc\n ) {\n setMenuKeyboardNavigationAction('CLOSE_MENU');\n return;\n }\n\n if (shouldMoveDown) {\n setCurrentItemIndex(Math.min(currentItemIndex + 1, itemsElements.length - 1));\n } else if (shouldMoveUp) {\n setCurrentItemIndex(Math.max(currentItemIndex - 1, 0));\n }\n\n event.preventDefault();\n },\n [itemsElements, currentItemIndex],\n );\n\n useEffect(() => {\n if (!isMenuOpened \|\| !menuContainerRef) {\n return;\n }\n\n const focusableItems = menuContainerRef.querySelectorAll(focusableElementsSelector);\n for (const item of focusableItems) {\n (item as HTMLButtonElement \| HTMLAnchorElement).onkeydown = handleKeyDown;\n }\n\n if (!itemsElements && focusableItems.length > 0) {\n setItemsElements(focusableItems);\n }\n }, [isMenuOpened, menuContainerRef, itemsElements, handleKeyDown, focusableElementsSelector]);\n\n useEffect(() => {\n if (!itemsElements) {\n return;\n }\n\n if (itemsElements[currentItemIndex]) {\n (itemsElements[currentItemIndex] as HTMLButtonElement \| HTMLAnchorElement).focus();\n }\n }, [currentItemIndex, itemsElements]);\n\n useEffect(() => {\n if (!isMenuOpened) {\n setItemsElements(undefined);\n setMenuKeyboardNavigationAction('');\n }\n\n setCurrentItemIndex(0);\n }, [isMenuOpened]);\n\n return menuKeyboardNavigationAction;\n};\n"],"names":["useMenuKeyboardNavigation","isMenuOpened","menuContainerRef","focusableElementsSelector","currentItemIndex","setCurrentItemIndex","useState","itemsElements","setItemsElements","menuKeyboardNavigationAction","setMenuKeyboardNavigationAction","handleKeyDown","useCallback","event","isTab","isShiftTab","isEsc","shouldMoveDown","shouldMoveUp","useEffect","focusableItems","item"],"mappings":";AAOO,MAAMA,IAA4B,CACrCC,GACAC,GACAC,IAA4B,iCAC3B;AACD,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAS,CAAC,GACpD,CAACC,GAAeC,CAAgB,IAAIF,EAAA,GACpC,CAACG,GAA8BC,CAA+B,IAAIJ,EAAS,EAAE,~~GAE7EK~~,IAAgBC;AAAA,IAClB,CAACC,MAAyB;AACtB,UAAI,CAACN,KAAiB,CAAC,CAAC,OAAO,aAAa,WAAW,QAAQ,EAAE,SAASM,EAAM,GAAG;AAC/E;AAGJ,YAAMC,IAAQD,EAAM,QAAQ,SAAS,CAACA,EAAM,UACtCE,IAAaF,EAAM,QAAQ,SAASA,EAAM,UAC1CG,IAAQH,EAAM,QAAQ,UACtBI,IAAiBH,KAASD,EAAM,QAAQ,aACxCK,IAAeH,KAAcF,EAAM,QAAQ;AAEjD,UACKE,KAAcX,KAAoB,KAClCU,KAASV,KAAoBG,EAAc,SAAS,KACrDS,GACF;AACE,QAAAN,EAAgC,YAAY;AAC5C;AAAA,MACJ;AAEA,MAAIO,IACAZ,EAAoB,KAAK,IAAID,IAAmB,GAAGG,EAAc,SAAS,CAAC,CAAC,IACrEW,KACPb,EAAoB,KAAK,IAAID,IAAmB,GAAG,CAAC,CAAC,GAGzDS,EAAM,eAAA;AAAA,IACV;AAAA,IACA,CAACN,GAAeH,CAAgB;AAAA,EAAA;AAGpC,SAAAe,EAAU,MAAM;AACZ,QAAI,CAAClB,KAAgB,CAACC;AAClB;AAGJ,UAAMkB,IAAiBlB,EAAiB,iBAAiBC,CAAyB;AAClF,eAAWkB,KAAQD;AACd,MAAAC,EAA+C,YAAYV;AAGhE,IAAI,CAACJ,KAAiBa,EAAe,SAAS,~~KAC1CZ~~,EAAiBY,CAAc;AAAA,EAEvC,GAAG,CAACnB,GAAcC,GAAkBK,GAAeI,GAAeR,CAAyB,CAAC,GAE5FgB,EAAU,MAAM;AACZ,IAAKZ,KAIDA,EAAcH,CAAgB,KAC7BG,EAAcH,CAAgB,EAA4C,MAAA;AAAA,EAEnF,GAAG,CAACA,GAAkBG,CAAa,CAAC,GAEpCY,EAAU,MAAM;AACZ,IAAKlB,~~MACDO~~,EAAiB,MAAS,GAC1BE,EAAgC,EAAE,IAGtCL,EAAoB,CAAC;AAAA,EACzB,GAAG,CAACJ,CAAY,CAAC,GAEVQ;AACX;"}
1	+ {"version":3,"file":"useMenuKeyboardNavigation.es.js","sources":["../../../src/components/Menu/useMenuKeyboardNavigation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { useCallback, useEffect, useState } from 'react';\n\n/\n @deprecated Please use custom keyboard navigation instead.\n */\nexport const useMenuKeyboardNavigation = (\n isMenuOpened: boolean,\n menuContainerRef: HTMLElement \| null,\n focusableElementsSelector = 'li > button:not(:disabled)',\n) => {\n const [currentItemIndex, setCurrentItemIndex] = useState(0);\n const [itemsElements, setItemsElements] = useState<NodeList>();\n const [menuKeyboardNavigationAction, setMenuKeyboardNavigationAction] = useState('');\n\n // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (!itemsElements \|\| !['Tab', 'ArrowDown', 'ArrowUp', 'Escape'].includes(event.key)) {\n return;\n }\n\n const isTab = event.key === 'Tab' && !event.shiftKey;\n const isShiftTab = event.key === 'Tab' && event.shiftKey;\n const isEsc = event.key === 'Escape';\n const shouldMoveDown = isTab \|\| event.key === 'ArrowDown';\n const shouldMoveUp = isShiftTab \|\| event.key === 'ArrowUp';\n\n if (\n (isShiftTab && currentItemIndex <= 0) \|\|\n (isTab && currentItemIndex >= itemsElements.length - 1) \|\|\n isEsc\n ) {\n setMenuKeyboardNavigationAction('CLOSE_MENU');\n return;\n }\n\n if (shouldMoveDown) {\n setCurrentItemIndex(Math.min(currentItemIndex + 1, itemsElements.length - 1));\n } else if (shouldMoveUp) {\n setCurrentItemIndex(Math.max(currentItemIndex - 1, 0));\n }\n\n event.preventDefault();\n },\n [itemsElements, currentItemIndex],\n );\n\n useEffect(() => {\n if (!isMenuOpened \|\| !menuContainerRef) {\n return;\n }\n\n const focusableItems = menuContainerRef.querySelectorAll(focusableElementsSelector);\n for (const item of focusableItems) {\n (item as HTMLButtonElement \| HTMLAnchorElement).onkeydown = handleKeyDown;\n }\n\n if (!itemsElements && focusableItems.length > 0) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setItemsElements(focusableItems);\n }\n }, [isMenuOpened, menuContainerRef, itemsElements, handleKeyDown, focusableElementsSelector]);\n\n useEffect(() => {\n if (!itemsElements) {\n return;\n }\n\n if (itemsElements[currentItemIndex]) {\n (itemsElements[currentItemIndex] as HTMLButtonElement \| HTMLAnchorElement).focus();\n }\n }, [currentItemIndex, itemsElements]);\n\n useEffect(() => {\n if (!isMenuOpened) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setItemsElements(undefined);\n setMenuKeyboardNavigationAction('');\n }\n\n setCurrentItemIndex(0);\n }, [isMenuOpened]);\n\n return menuKeyboardNavigationAction;\n};\n"],"names":["useMenuKeyboardNavigation","isMenuOpened","menuContainerRef","focusableElementsSelector","currentItemIndex","setCurrentItemIndex","useState","itemsElements","setItemsElements","menuKeyboardNavigationAction","setMenuKeyboardNavigationAction","handleKeyDown","useCallback","event","isTab","isShiftTab","isEsc","shouldMoveDown","shouldMoveUp","useEffect","focusableItems","item"],"mappings":";AAOO,MAAMA,IAA4B,CACrCC,GACAC,GACAC,IAA4B,iCAC3B;AACD,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAS,CAAC,GACpD,CAACC,GAAeC,CAAgB,IAAIF,EAAA,GACpC,CAACG,GAA8BC,CAA+B,IAAIJ,EAAS,EAAE,GAG7EK,IAAgBC;AAAA,IAClB,CAACC,MAAyB;AACtB,UAAI,CAACN,KAAiB,CAAC,CAAC,OAAO,aAAa,WAAW,QAAQ,EAAE,SAASM,EAAM,GAAG;AAC/E;AAGJ,YAAMC,IAAQD,EAAM,QAAQ,SAAS,CAACA,EAAM,UACtCE,IAAaF,EAAM,QAAQ,SAASA,EAAM,UAC1CG,IAAQH,EAAM,QAAQ,UACtBI,IAAiBH,KAASD,EAAM,QAAQ,aACxCK,IAAeH,KAAcF,EAAM,QAAQ;AAEjD,UACKE,KAAcX,KAAoB,KAClCU,KAASV,KAAoBG,EAAc,SAAS,KACrDS,GACF;AACE,QAAAN,EAAgC,YAAY;AAC5C;AAAA,MACJ;AAEA,MAAIO,IACAZ,EAAoB,KAAK,IAAID,IAAmB,GAAGG,EAAc,SAAS,CAAC,CAAC,IACrEW,KACPb,EAAoB,KAAK,IAAID,IAAmB,GAAG,CAAC,CAAC,GAGzDS,EAAM,eAAA;AAAA,IACV;AAAA,IACA,CAACN,GAAeH,CAAgB;AAAA,EAAA;AAGpC,SAAAe,EAAU,MAAM;AACZ,QAAI,CAAClB,KAAgB,CAACC;AAClB;AAGJ,UAAMkB,IAAiBlB,EAAiB,iBAAiBC,CAAyB;AAClF,eAAWkB,KAAQD;AACd,MAAAC,EAA+C,YAAYV;AAGhE,IAAI,CAACJ,KAAiBa,EAAe,SAAS,KAE1CZ,EAAiBY,CAAc;AAAA,EAEvC,GAAG,CAACnB,GAAcC,GAAkBK,GAAeI,GAAeR,CAAyB,CAAC,GAE5FgB,EAAU,MAAM;AACZ,IAAKZ,KAIDA,EAAcH,CAAgB,KAC7BG,EAAcH,CAAgB,EAA4C,MAAA;AAAA,EAEnF,GAAG,CAACA,GAAkBG,CAAa,CAAC,GAEpCY,EAAU,MAAM;AACZ,IAAKlB,MAEDO,EAAiB,MAAS,GAC1BE,EAAgC,EAAE,IAGtCL,EAAoB,CAAC;AAAA,EACzB,GAAG,CAACJ,CAAY,CAAC,GAEVQ;AACX;"}