@frontify/fondue 12.0.0-beta.61 → 12.0.0-beta.62

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

@@ -3,44 +3,39 @@ import { useButton as re } from "@react-aria/button";
 import { useFocusRing as le, FocusScope as oe } from "@react-aria/focus";
 import { merge as ie } from "../../utilities/merge.es.js";
 import { Validation as se } from "../../utilities/validation.es.js";
-import { AnimatePresence as ce, motion as O } from "framer-motion";
-import t, { useState as V, useRef as v } from "react";
-import { getInputWidth as ue, getPaddingClasses as me } from "./helpers.es.js";
-import { useClickOutside as fe } from "../../hooks/useClickOutside.es.js";
-import { CheckboxState as ge } from "../Checkbox/Checkbox.es.js";
-import { Trigger as de, TriggerEmphasis as y } from "../Trigger/Trigger.es.js";
-import { Tag as A, TagSize as f, TagType as z } from "../Tag/Tag.es.js";
-import { Menu as we } from "../Menu/Menu.es.js";
-import { OptionalItems as pe, DefaultItem as he, NoSearchResults as Ee } from "./SelectMenuItems/SelectMenuItems.es.js";
-import { Text as B } from "../../typography/Text/Text.es.js";
-import { MenuItem as ke } from "../MenuItem/MenuItem.es.js";
-var xe = /* @__PURE__ */ ((n) => (n.Default = "Default", n.Summarized = "Summarized", n))(xe || {}), ve = /* @__PURE__ */ ((n) => (n.Small = "Small", n.Medium = "Medium", n))(ve || {}), Ce = /* @__PURE__ */ ((n) => (n.Default = "Default", n.Weak = "Weak", n))(Ce || {});
-const Pe = ({
+import { AnimatePresence as ce, motion as V } from "framer-motion";
+import t, { useState as y, useRef as v, useEffect as ue } from "react";
+import { getInputWidth as me, getPaddingClasses as fe } from "./helpers.es.js";
+import { useClickOutside as ge } from "../../hooks/useClickOutside.es.js";
+import { CheckboxState as de } from "../Checkbox/Checkbox.es.js";
+import { Trigger as we, TriggerEmphasis as A } from "../Trigger/Trigger.es.js";
+import { Tag as z, TagSize as g, TagType as B } from "../Tag/Tag.es.js";
+import { Menu as pe } from "../Menu/Menu.es.js";
+import { OptionalItems as he, DefaultItem as Ee, NoSearchResults as ke } from "./SelectMenuItems/SelectMenuItems.es.js";
+import { Text as F } from "../../typography/Text/Text.es.js";
+import { MenuItem as xe } from "../MenuItem/MenuItem.es.js";
+var ve = /* @__PURE__ */ ((n) => (n.Default = "Default", n.Summarized = "Summarized", n))(ve || {}), Ce = /* @__PURE__ */ ((n) => (n.Small = "Small", n.Medium = "Medium", n))(Ce || {}), De = /* @__PURE__ */ ((n) => (n.Default = "Default", n.Weak = "Weak", n))(De || {});
+const qe = ({
   items: n,
   activeItemKeys: r,
-  onSelectionChange: g,
-  ariaLabel: F = "Select list",
-  disabled: j = !1,
+  onSelectionChange: d,
+  ariaLabel: j = "Select list",
+  disabled: P = !1,
   placeholder: s,
   label: C,
   filterLabel: D,
-  noResultsLabel: P,
+  noResultsLabel: q,
   type: S = "Default",
-  size: d = "Medium",
-  validation: q = se.Default,
+  size: w = "Medium",
+  validation: G = se.Default,
   emphasis: c = "Default",
   decorator: b = null,
-  filterable: w = !1,
-  summarizedLabel: p,
-  indeterminateItemKeys: h
+  filterable: p = !1,
+  summarizedLabel: h,
+  indeterminateItemKeys: u
 }) => {
-  const [l, E] = V(!1), [o, G] = V(
-    n.map((e) => {
-      const a = { ...e, label: e.value };
-      return h != null && h.includes(e.value) ? { ...a, state: ge.Mixed } : a;
-    })
-  ), H = !!o.find((e) => !e.isCategory && !e.isDivider), J = v(null), i = v(null), k = v(null), { isFocusVisible: Q, focusProps: U } = le(), u = r.length > 0, X = p != null ? p : [r.length, "selected"].join(" "), Y = ue(u, D, s), T = () => E(!1);
-  fe(null, T, [i == null ? void 0 : i.current]);
+  const [l, E] = y(!1), [o, T] = y([]), H = !!o.find((e) => !e.isCategory && !e.isDivider), J = v(null), i = v(null), k = v(null), { isFocusVisible: Q, focusProps: U } = le(), m = r.length > 0, X = h != null ? h : [r.length, "selected"].join(" "), Y = me(m, D, s), N = () => E(!1);
+  ge(null, N, [i == null ? void 0 : i.current]);
   const x = () => E((e) => !e), { buttonProps: Z } = re(
     {
       onPress: x,
@@ -50,28 +45,35 @@ const Pe = ({
       elementType: "div"
     },
     J
-  ), N = (e) => {
+  ), W = (e) => {
     const a = new Set(r);
-    a.has(e) ? a.delete(e) : a.add(e), g(Array.from(a));
+    a.has(e) ? a.delete(e) : a.add(e), d(Array.from(a));
   }, _ = (e) => {
-    e.code === "Space" && (k.current !== document.activeElement || !w) && x();
-  }, $ = () => c === "Weak" ? u ? "" : "tw-text-text-weak" : "", W = () => c === "Weak" || !l ? z.Selected : z.SelectedWithFocus, L = (e) => {
-    G(
+    e.code === "Space" && (k.current !== document.activeElement || !p) && x();
+  }, $ = () => c === "Weak" ? m ? "" : "tw-text-text-weak" : "", M = () => c === "Weak" || !l ? B.Selected : B.SelectedWithFocus, L = (e) => {
+    T(
       n.filter((a) => a.isCategory || a.isDivider ? !0 : a.value.toLowerCase().includes(e.currentTarget.value.toLowerCase())).map((a) => ({ ...a, label: a.value }))
     );
   };
-  return /* @__PURE__ */ t.createElement("div", {
+  return ue(() => {
+    T(
+      n.map((e) => {
+        const a = { ...e, label: e.value };
+        return u != null && u.includes(e.value) ? { ...a, state: de.Mixed } : a;
+      })
+    );
+  }, [n, u]), /* @__PURE__ */ t.createElement("div", {
     className: "tw-relative",
     ref: i
-  }, /* @__PURE__ */ t.createElement(de, {
-    disabled: j,
+  }, /* @__PURE__ */ t.createElement(we, {
+    disabled: P,
     buttonProps: Z,
     isFocusVisible: Q,
     isOpen: l,
-    validation: q,
-    emphasis: c === "Default" ? y.Default : y.Weak
+    validation: G,
+    emphasis: c === "Default" ? A.Default : A.Weak
   }, /* @__PURE__ */ t.createElement("div", {
-    className: ie(["tw-flex tw-flex-1 tw-gap-2", me(d)])
+    className: ie(["tw-flex tw-flex-1 tw-gap-2", fe(w)])
   }, /* @__PURE__ */ t.createElement("div", {
     className: "tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0",
     onClick: (e) => {
@@ -85,28 +87,28 @@ const Pe = ({
     className: "tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]"
   }, b && /* @__PURE__ */ t.createElement("div", {
     className: $()
-  }, b), C && u && /* @__PURE__ */ t.createElement(B, {
+  }, b), C && m && /* @__PURE__ */ t.createElement(F, {
     weight: "strong"
-  }, C), S === "Default" && r.map((e) => /* @__PURE__ */ t.createElement(A, {
+  }, C), S === "Default" && r.map((e) => /* @__PURE__ */ t.createElement(z, {
     key: e,
-    type: W(),
+    type: M(),
     label: e.toString(),
-    size: d === "Small" ? f.Small : f.Medium,
-    onClick: () => N(e)
-  })), S === "Summarized" && u && /* @__PURE__ */ t.createElement(A, {
-    type: W(),
+    size: w === "Small" ? g.Small : g.Medium,
+    onClick: () => W(e)
+  })), S === "Summarized" && m && /* @__PURE__ */ t.createElement(z, {
+    type: M(),
     label: X,
-    size: d === "Small" ? f.Small : f.Medium,
-    onClick: () => g([])
-  }), !w && r.length === 0 && s && /* @__PURE__ */ t.createElement(B, {
+    size: w === "Small" ? g.Small : g.Medium,
+    onClick: () => d([])
+  }), !p && r.length === 0 && s && /* @__PURE__ */ t.createElement(F, {
     color: "weak"
-  }, s)), w && /* @__PURE__ */ t.createElement("input", {
+  }, s)), p && /* @__PURE__ */ t.createElement("input", {
     ref: k,
     className: "focus:tw-outline-0 tw-text-s tw-bg-transparent",
     style: { maxWidth: Y },
     placeholder: r.length === 0 ? s : D,
     onChange: L
-  })))), /* @__PURE__ */ t.createElement(ce, null, l && (c === "Default" ? /* @__PURE__ */ t.createElement(O.div, {
+  })))), /* @__PURE__ */ t.createElement(ce, null, l && (c === "Default" ? /* @__PURE__ */ t.createElement(V.div, {
     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-30 tw-bg-base tw-min-w-[18rem]",
     key: "content",
     initial: { height: 0 },
@@ -119,11 +121,11 @@ const Pe = ({
     className: "tw-p-4"
   }, /* @__PURE__ */ t.createElement(ae, {
     activeValues: r.map((e) => e.toString()),
-    setActiveValues: g,
+    setActiveValues: d,
     checkboxes: o.filter((e) => !e.isDivider && !e.isCategory),
     direction: ne.Vertical,
-    ariaLabel: F
-  })))) : /* @__PURE__ */ t.createElement(O.div, {
+    ariaLabel: j
+  })))) : /* @__PURE__ */ t.createElement(V.div, {
     initial: {
       opacity: 0
     },
@@ -136,35 +138,35 @@ const Pe = ({
       transition: { duration: 0.15 }
     },
     transition: { ease: [0.04, 0.62, 0.23, 0.98] }
-  }, /* @__PURE__ */ t.createElement(we, {
+  }, /* @__PURE__ */ t.createElement(pe, {
     open: l,
-    onClose: T,
+    onClose: N,
     triggerRef: i
   }, o.length > 0 && H ? o.map((e, a) => {
-    const { label: M, value: m, avatar: I, imgSrc: K } = e, R = !!r.find((te) => te === m), ee = () => N(M);
-    return e.isCategory || e.isDivider ? /* @__PURE__ */ t.createElement(pe, {
-      key: m + e,
+    const { label: R, value: f, avatar: I, imgSrc: K } = e, O = !!r.find((te) => te === f), ee = () => W(R);
+    return e.isCategory || e.isDivider ? /* @__PURE__ */ t.createElement(he, {
+      key: f + e,
       checkboxes: o,
       index: a
-    }) : /* @__PURE__ */ t.createElement(ke, {
-      checked: R,
+    }) : /* @__PURE__ */ t.createElement(xe, {
+      checked: O,
       onClick: ee,
-      key: m
-    }, /* @__PURE__ */ t.createElement(he, {
-      label: M,
-      value: m,
+      key: f
+    }, /* @__PURE__ */ t.createElement(Ee, {
+      label: R,
+      value: f,
       avatar: I,
       imgSrc: K,
-      isChecked: R
+      isChecked: O
     }));
-  }) : /* @__PURE__ */ t.createElement(Ee, {
-    label: P
+  }) : /* @__PURE__ */ t.createElement(ke, {
+    label: q
   }))))));
 };
 export {
-  Pe as MultiSelect,
-  Ce as MultiSelectEmphasis,
-  ve as MultiSelectSize,
-  xe as MultiSelectType
+  qe as MultiSelect,
+  De as MultiSelectEmphasis,
+  Ce as MultiSelectSize,
+  ve as MultiSelectType
 };
 //# sourceMappingURL=MultiSelect.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger';\nimport { Text } from '@typography/Text';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ChangeEvent, FC, KeyboardEvent, useRef, useState } from 'react';\nimport { getInputWidth, getPaddingClasses } from './helpers';\nimport { Menu } from '@components/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { DefaultItem, NoSearchResults, OptionalItems } from './SelectMenuItems';\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\n\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport enum MultiSelectEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n}\n\nexport type MultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: React.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    emphasis?: MultiSelectEmphasis;\n    decorator?: React.ReactNode;\n    filterable?: boolean;\n    filterLabel?: string;\n    noResultsLabel?: string;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n};\n\nexport type Item = {\n    label: string;\n    value: string;\n    avatar?: React.ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport const MultiSelect: FC<MultiSelectProps> = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    filterLabel,\n    noResultsLabel,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n    validation = Validation.Default,\n    emphasis = MultiSelectEmphasis.Default,\n    decorator = null,\n    filterable = false,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n}) => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<Item[]>(\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    const hasResults = !!checkboxes.find((item) => !item.isCategory && !item.isDivider);\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n    const filterInputRef = useRef<HTMLInputElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n    const inputWidth = getInputWidth(hasSelectedItems, filterLabel, placeholder);\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement]);\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        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' && (filterInputRef.current !== document.activeElement || !filterable)) {\n            toggleOpen();\n        }\n    };\n\n    const getDecoratorClasses = () => {\n        if (emphasis === MultiSelectEmphasis.Weak) {\n            return hasSelectedItems ? '' : 'tw-text-text-weak';\n        }\n\n        return '';\n    };\n\n    const getTagType = () => {\n        if (emphasis === MultiSelectEmphasis.Weak || !open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {\n        setCheckboxes(\n            items\n                .filter((item) => {\n                    if (item.isCategory || item.isDivider) {\n                        return true;\n                    }\n\n                    return item.value.toLowerCase().includes(e.currentTarget.value.toLowerCase());\n                })\n                .map((item) => ({ ...item, label: item.value })),\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 === MultiSelectEmphasis.Default ? TriggerEmphasis.Default : TriggerEmphasis.Weak}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])}>\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=\"button\"\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                            {decorator && <div className={getDecoratorClasses()}>{decorator}</div>}\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={() => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === MultiSelectType.Summarized && hasSelectedItems && (\n                                <Tag\n                                    type={getTagType()}\n                                    label={summarizedLabel}\n                                    size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                    onClick={() => onSelectionChange([])}\n                                />\n                            )}\n\n                            {!filterable && activeItemKeys.length === 0 && placeholder && (\n                                <Text color=\"weak\">{placeholder}</Text>\n                            )}\n                        </div>\n                        {filterable && (\n                            <input\n                                ref={filterInputRef}\n                                className=\"focus:tw-outline-0 tw-text-s tw-bg-transparent\"\n                                style={{ maxWidth: inputWidth }}\n                                placeholder={activeItemKeys.length === 0 ? placeholder : filterLabel}\n                                onChange={handleFilterChange}\n                            />\n                        )}\n                    </div>\n                </div>\n            </Trigger>\n            <AnimatePresence>\n                {open &&\n                    (emphasis === MultiSelectEmphasis.Default ? (\n                        <motion.div\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-30 tw-bg-base tw-min-w-[18rem]\"\n                            key=\"content\"\n                            initial={{ height: 0 }}\n                            animate={{ height: 'auto' }}\n                            exit={{ height: 0 }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98] }}\n                        >\n                            <FocusScope restoreFocus>\n                                <div className=\"tw-p-4\">\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                        </motion.div>\n                    ) : (\n                        <motion.div\n                            initial={{\n                                opacity: 0,\n                            }}\n                            animate={{\n                                opacity: 1,\n                                transition: { duration: 0.15 },\n                            }}\n                            exit={{\n                                opacity: 0,\n                                transition: { duration: 0.15 },\n                            }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98] }}\n                        >\n                            <Menu open={open} onClose={handleClose} triggerRef={multiSelectRef}>\n                                {checkboxes.length > 0 && hasResults ? (\n                                    checkboxes.map((item, index) => {\n                                        const { label, value, avatar, imgSrc } = item;\n                                        const isChecked = !!activeItemKeys.find((key) => key === value);\n                                        const handleMenuItemClick = () => toggleSelection(label);\n\n                                        if (item.isCategory || item.isDivider) {\n                                            return (\n                                                <OptionalItems\n                                                    key={value + item}\n                                                    {...{\n                                                        checkboxes,\n                                                        index,\n                                                    }}\n                                                />\n                                            );\n                                        }\n\n                                        return (\n                                            <MenuItem checked={isChecked} onClick={handleMenuItemClick} key={value}>\n                                                <DefaultItem {...{ label, value, avatar, imgSrc, isChecked }} />\n                                            </MenuItem>\n                                        );\n                                    })\n                                ) : (\n                                    <NoSearchResults label={noResultsLabel} />\n                                )}\n                            </Menu>\n                        </motion.div>\n                    ))}\n            </AnimatePresence>\n        </div>\n    );\n};\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelectEmphasis","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","filterLabel","noResultsLabel","type","size","validation","Validation","emphasis","decorator","filterable","summarizedLabelFromProps","indeterminateItemKeys","open","setOpen","useState","checkboxes","setCheckboxes","item","checkboxBaseItem","CheckboxState","hasResults","triggerRef","useRef","multiSelectRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","hasSelectedItems","summarizedLabel","inputWidth","getInputWidth","handleClose","useClickOutside","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getDecoratorClasses","getTagType","TagType","handleFilterChange","React","Trigger","TriggerEmphasis","merge","getPaddingClasses","Text","Tag","TagSize","AnimatePresence","motion","FocusScope","Checklist","ChecklistDirection","Menu","index","value","avatar","imgSrc","isChecked","handleMenuItemClick","OptionalItems","MenuItem","DefaultItem","NoSearchResults"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger';\nimport { Text } from '@typography/Text';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ChangeEvent, FC, KeyboardEvent, useEffect, useRef, useState } from 'react';\nimport { getInputWidth, getPaddingClasses } from './helpers';\nimport { Menu } from '@components/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { DefaultItem, NoSearchResults, OptionalItems } from './SelectMenuItems';\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\n\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport enum MultiSelectEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n}\n\nexport type MultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: React.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    emphasis?: MultiSelectEmphasis;\n    decorator?: React.ReactNode;\n    filterable?: boolean;\n    filterLabel?: string;\n    noResultsLabel?: string;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n};\n\nexport type Item = {\n    label: string;\n    value: string;\n    avatar?: React.ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport const MultiSelect: FC<MultiSelectProps> = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    filterLabel,\n    noResultsLabel,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n    validation = Validation.Default,\n    emphasis = MultiSelectEmphasis.Default,\n    decorator = null,\n    filterable = false,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n}) => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n    const hasResults = !!checkboxes.find((item) => !item.isCategory && !item.isDivider);\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n    const filterInputRef = useRef<HTMLInputElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n    const inputWidth = getInputWidth(hasSelectedItems, filterLabel, placeholder);\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement]);\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        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' && (filterInputRef.current !== document.activeElement || !filterable)) {\n            toggleOpen();\n        }\n    };\n\n    const getDecoratorClasses = () => {\n        if (emphasis === MultiSelectEmphasis.Weak) {\n            return hasSelectedItems ? '' : 'tw-text-text-weak';\n        }\n\n        return '';\n    };\n\n    const getTagType = () => {\n        if (emphasis === MultiSelectEmphasis.Weak || !open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {\n        setCheckboxes(\n            items\n                .filter((item) => {\n                    if (item.isCategory || item.isDivider) {\n                        return true;\n                    }\n\n                    return item.value.toLowerCase().includes(e.currentTarget.value.toLowerCase());\n                })\n                .map((item) => ({ ...item, label: item.value })),\n        );\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    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 === MultiSelectEmphasis.Default ? TriggerEmphasis.Default : TriggerEmphasis.Weak}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])}>\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=\"button\"\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                            {decorator && <div className={getDecoratorClasses()}>{decorator}</div>}\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={() => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === MultiSelectType.Summarized && hasSelectedItems && (\n                                <Tag\n                                    type={getTagType()}\n                                    label={summarizedLabel}\n                                    size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                    onClick={() => onSelectionChange([])}\n                                />\n                            )}\n\n                            {!filterable && activeItemKeys.length === 0 && placeholder && (\n                                <Text color=\"weak\">{placeholder}</Text>\n                            )}\n                        </div>\n                        {filterable && (\n                            <input\n                                ref={filterInputRef}\n                                className=\"focus:tw-outline-0 tw-text-s tw-bg-transparent\"\n                                style={{ maxWidth: inputWidth }}\n                                placeholder={activeItemKeys.length === 0 ? placeholder : filterLabel}\n                                onChange={handleFilterChange}\n                            />\n                        )}\n                    </div>\n                </div>\n            </Trigger>\n            <AnimatePresence>\n                {open &&\n                    (emphasis === MultiSelectEmphasis.Default ? (\n                        <motion.div\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-30 tw-bg-base tw-min-w-[18rem]\"\n                            key=\"content\"\n                            initial={{ height: 0 }}\n                            animate={{ height: 'auto' }}\n                            exit={{ height: 0 }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98] }}\n                        >\n                            <FocusScope restoreFocus>\n                                <div className=\"tw-p-4\">\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                        </motion.div>\n                    ) : (\n                        <motion.div\n                            initial={{\n                                opacity: 0,\n                            }}\n                            animate={{\n                                opacity: 1,\n                                transition: { duration: 0.15 },\n                            }}\n                            exit={{\n                                opacity: 0,\n                                transition: { duration: 0.15 },\n                            }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98] }}\n                        >\n                            <Menu open={open} onClose={handleClose} triggerRef={multiSelectRef}>\n                                {checkboxes.length > 0 && hasResults ? (\n                                    checkboxes.map((item, index) => {\n                                        const { label, value, avatar, imgSrc } = item;\n                                        const isChecked = !!activeItemKeys.find((key) => key === value);\n                                        const handleMenuItemClick = () => toggleSelection(label);\n\n                                        if (item.isCategory || item.isDivider) {\n                                            return (\n                                                <OptionalItems\n                                                    key={value + item}\n                                                    {...{\n                                                        checkboxes,\n                                                        index,\n                                                    }}\n                                                />\n                                            );\n                                        }\n\n                                        return (\n                                            <MenuItem checked={isChecked} onClick={handleMenuItemClick} key={value}>\n                                                <DefaultItem {...{ label, value, avatar, imgSrc, isChecked }} />\n                                            </MenuItem>\n                                        );\n                                    })\n                                ) : (\n                                    <NoSearchResults label={noResultsLabel} />\n                                )}\n                            </Menu>\n                        </motion.div>\n                    ))}\n            </AnimatePresence>\n        </div>\n    );\n};\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelectEmphasis","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","filterLabel","noResultsLabel","type","size","validation","Validation","emphasis","decorator","filterable","summarizedLabelFromProps","indeterminateItemKeys","open","setOpen","useState","checkboxes","setCheckboxes","hasResults","item","triggerRef","useRef","multiSelectRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","hasSelectedItems","summarizedLabel","inputWidth","getInputWidth","handleClose","useClickOutside","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getDecoratorClasses","getTagType","TagType","handleFilterChange","useEffect","checkboxBaseItem","CheckboxState","React","Trigger","TriggerEmphasis","merge","getPaddingClasses","Text","Tag","TagSize","AnimatePresence","motion","FocusScope","Checklist","ChecklistDirection","Menu","index","value","avatar","imgSrc","isChecked","handleMenuItemClick","OptionalItems","MenuItem","DefaultItem","NoSearchResults"],"mappings":"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"}