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

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

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