@livechat/design-system-react-components 1.17.1-alpha.3 → 1.17.1-alpha.4

package/dist/components/Picker/index.es.js

@@ -0,0 +1,740 @@
+var Ce = Object.defineProperty, Le = Object.defineProperties;
+var Ie = Object.getOwnPropertyDescriptors;
+var O = Object.getOwnPropertySymbols;
+var te = Object.prototype.hasOwnProperty, ie = Object.prototype.propertyIsEnumerable;
+var re = (r, t, c) => t in r ? Ce(r, t, { enumerable: !0, configurable: !0, writable: !0, value: c }) : r[t] = c, x = (r, t) => {
+  for (var c in t || (t = {}))
+    te.call(t, c) && re(r, c, t[c]);
+  if (O)
+    for (var c of O(t))
+      ie.call(t, c) && re(r, c, t[c]);
+  return r;
+}, U = (r, t) => Le(r, Ie(t));
+var _e = (r, t) => {
+  var c = {};
+  for (var a in r)
+    te.call(r, a) && t.indexOf(a) < 0 && (c[a] = r[a]);
+  if (r != null && O)
+    for (var a of O(r))
+      t.indexOf(a) < 0 && ie.call(r, a) && (c[a] = r[a]);
+  return c;
+};
+import * as e from "react";
+import { useEffect as xe } from "react";
+import { FloatingFocusManager as ce, useFloatingNodeId as Be, useFloating as Fe, autoUpdate as Re, offset as Se, flip as He, shift as De, size as Me, useClick as Ke, useRole as Oe, useDismiss as Ue, useListNavigation as Ge, useInteractions as Ae, FloatingNode as We, FloatingPortal as Ye } from "@floating-ui/react";
+import E from "clsx";
+import { Virtuoso as je } from "react-virtuoso";
+import { Check as qe, Close as Xe, ChevronDown as ze, ChevronUp as Qe } from "@livechat/design-system-icons";
+import { Checkbox as Ve } from "../Checkbox/index.es.js";
+import { Icon as D } from "../Icon/index.es.js";
+import { H as Je } from "../../chunks/Heading-6b95d08b.js";
+import { T as oe } from "../../chunks/Text-b31d1e9a.js";
+import "../../chunks/Typography.module-93efb34d.js";
+import { Tag as Ze } from "../Tag/index.es.js";
+import * as er from "react-dom";
+import "../FieldDescription/index.es.js";
+import "polished";
+const rr = 2, Y = 400;
+[
+  ...[...Array(100)].map((r, t) => ({
+    key: `option${t + 8}`,
+    name: `Option #${t + 8}`,
+    disabled: t % 4 === 0
+  }))
+];
+const M = "select-all", tr = (r, t) => {
+  const c = [];
+  return r.forEach((a, _) => {
+    t(a) && c.push(_);
+  }), c;
+}, j = (r) => r.filter(
+  ({ key: t, disabled: c, groupHeader: a }) => !(t === M || c || a)
+), le = ({ key: r }) => r, b = {
+  "item-wrapper": "lc-PickerListItem-module__item-wrapper___ETYMU",
+  "item-wrapper__first": "lc-PickerListItem-module__item-wrapper__first___uit1z",
+  "item-wrapper__last": "lc-PickerListItem-module__item-wrapper__last___cWmGF",
+  "picker-list__item": "lc-PickerListItem-module__picker-list__item___cujFw",
+  "picker-list__item--select-all": "lc-PickerListItem-module__picker-list__item--select-all___-cXxr",
+  "picker-list__item__header": "lc-PickerListItem-module__picker-list__item__header___abypL",
+  "picker-list__item__content": "lc-PickerListItem-module__picker-list__item__content___EI4cV",
+  "picker-list__item__custom": "lc-PickerListItem-module__picker-list__item__custom___CFubU",
+  "picker-list__item__checkbox": "lc-PickerListItem-module__picker-list__item__checkbox___XqHxc",
+  "picker-list__item__avatar": "lc-PickerListItem-module__picker-list__item__avatar___dKtMr",
+  "picker-list__item__icon": "lc-PickerListItem-module__picker-list__item__icon___5Yvui",
+  "picker-list__item__label-container": "lc-PickerListItem-module__picker-list__item__label-container___awy0M",
+  "picker-list__item__main-label": "lc-PickerListItem-module__picker-list__item__main-label___YfUhr",
+  "picker-list__item__secondary-label": "lc-PickerListItem-module__picker-list__item__secondary-label___6xcMD"
+}, I = "picker-list__item", ir = ({
+  index: r,
+  isActive: t,
+  isSelected: c,
+  listElementsRef: a,
+  onSelect: _,
+  getItemProps: d,
+  item: o,
+  numberOfItems: n
+}) => {
+  const f = (l) => l != null && l.customElement ? /* @__PURE__ */ e.createElement("div", { className: b[`${I}__custom`] }, l.customElement.listItemBody) : /* @__PURE__ */ e.createElement(e.Fragment, null, l.showCheckbox && /* @__PURE__ */ e.createElement(
+    Ve,
+    {
+      className: b[`${I}__checkbox`],
+      checked: c
+    }
+  ), l.icon && /* @__PURE__ */ e.createElement(
+    D,
+    {
+      className: b[`${I}__icon`],
+      kind: "link",
+      source: l.icon
+    }
+  ), l.avatarSrc && /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      className: E(b[`${I}__avatar`]),
+      src: l.avatarSrc,
+      alt: l.name
+    }
+  ), /* @__PURE__ */ e.createElement("div", { className: b[`${I}__label-container`] }, /* @__PURE__ */ e.createElement(
+    "span",
+    {
+      className: E({
+        [b[`${I}__main-label`]]: l.secondaryText
+      }),
+      "aria-disabled": l.disabled
+    },
+    l.name
+  ), l.secondaryText && /* @__PURE__ */ e.createElement("span", { className: b[`${I}__secondary-label`] }, l.secondaryText)));
+  if (o.groupHeader)
+    return /* @__PURE__ */ e.createElement(
+      "div",
+      x({
+        id: `item-${r}`,
+        key: o.key,
+        role: "group",
+        className: b[`${I}__header`]
+      }, d()),
+      /* @__PURE__ */ e.createElement(Je, { size: "2xs", uppercase: !0, bold: !0, as: "div" }, o.name)
+    );
+  const k = (l) => {
+    !o.disabled && _(l);
+  };
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    U(x({
+      id: o.key,
+      key: o.key,
+      tabIndex: t ? 0 : -1,
+      ref: (l) => {
+        l && (a.current[r] = l);
+      },
+      role: "option",
+      "aria-setsize": n,
+      "aria-posinset": r + 1
+    }, d({
+      onClick: () => k(o.key)
+    })), {
+      className: E(b["item-wrapper"], {
+        [b["item-wrapper__first"]]: r === 0 && !o.groupHeader,
+        [b["item-wrapper__last"]]: r === n - 1 && !o.groupHeader
+      })
+    }),
+    /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        "aria-selected": c,
+        "aria-disabled": o.disabled,
+        "aria-current": t && !o.disabled,
+        className: E(b[I], {
+          [b[`${I}__custom`]]: o.customElement,
+          [b[`${I}--select-all`]]: o.key === M
+        })
+      },
+      /* @__PURE__ */ e.createElement("div", { className: b[`${I}__content`] }, /* @__PURE__ */ e.createElement(oe, { as: "span" }, f(o))),
+      c && !o.showCheckbox && /* @__PURE__ */ e.createElement(
+        D,
+        {
+          kind: "link",
+          source: qe,
+          customColor: "var(--content-basic-info)"
+        }
+      )
+    )
+  );
+}, _r = "lc-PickerList-module__listbox___-LqE-", R = {
+  listbox: _r,
+  "no-results": "lc-PickerList-module__no-results___QRce-",
+  "listbox-wrapper": "lc-PickerList-module__listbox-wrapper___FbDrf"
+}, ae = "picker-list", cr = ({
+  context: r,
+  setFloating: t,
+  floatingStyles: c,
+  maxHeight: a,
+  options: _,
+  isPositioned: d,
+  pointer: o,
+  activeIndex: n,
+  selectedKeys: f,
+  listElementsRef: k,
+  setPointer: l,
+  onSelect: y,
+  getFloatingProps: u,
+  getItemProps: w,
+  emptyStateText: N = "No results found",
+  pickerType: C = "single",
+  listClassName: L,
+  virtuosoProps: g
+}) => {
+  const m = e.useRef(null), [i, p] = e.useState(Y), h = _.length;
+  e.useLayoutEffect(() => {
+    var s;
+    d && !o && n !== null && ((s = m.current) == null || s.focus({ preventScroll: !0 }));
+  }, [d, n, o, m]);
+  const S = e.useCallback(
+    (s) => {
+      s !== i && (s < Y ? p(s + (h - 1) * rr) : p(Y));
+    },
+    [h]
+  );
+  if (xe(() => {
+    k.current = new Array(_.length);
+  }, [_.length]), _.length === 0) {
+    const s = E(R[ae], {
+      [R[`${ae}__no-results`]]: _.length === 0
+    });
+    return /* @__PURE__ */ e.createElement(ce, { context: r, modal: !1, initialFocus: -1 }, /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: E(R.listbox, R["no-results"]),
+        ref: t,
+        tabIndex: -1,
+        style: c
+      },
+      /* @__PURE__ */ e.createElement("div", { className: s }, N)
+    ));
+  }
+  const H = (s) => f.includes(s) || s === M && f.length === j(_).length;
+  return /* @__PURE__ */ e.createElement(ce, { context: r, modal: !1, initialFocus: -1 }, /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: t,
+      tabIndex: -1,
+      className: E(R.listbox, L),
+      style: U(x({}, c), {
+        maxHeight: a
+      })
+    },
+    /* @__PURE__ */ e.createElement(
+      "div",
+      x({
+        tabIndex: 0,
+        "aria-multiselectable": C === "multi",
+        className: R["listbox-wrapper"],
+        ref: m
+      }, u({
+        onKeyDown(s) {
+          l(!1), s.key === "Enter" && n !== null && y(_[n].key), s.key === " " && s.preventDefault();
+        },
+        onKeyUp(s) {
+          s.key === " " && n !== null && y(_[n].key);
+        },
+        onPointerMove() {
+          l(!0);
+        }
+      })),
+      /* @__PURE__ */ e.createElement(
+        je,
+        U(x({
+          totalListHeightChanged: S,
+          style: { height: `${i}px`, maxHeight: a },
+          totalCount: _.length,
+          data: _,
+          increaseViewportBy: 200
+        }, g), {
+          itemContent: (s, F) => /* @__PURE__ */ e.createElement(
+            ir,
+            {
+              index: s,
+              getItemProps: w,
+              listElementsRef: k,
+              isActive: n === s,
+              isSelected: H(F.key),
+              onSelect: y,
+              item: F,
+              numberOfItems: h
+            }
+          )
+        })
+      )
+    )
+  ));
+}, v = {
+  "picker-trigger": "lc-PickerTrigger-module__picker-trigger___-tjS0",
+  "picker-trigger--multi-select": "lc-PickerTrigger-module__picker-trigger--multi-select___av4Ws",
+  "picker-trigger--multi-select--with-items": "lc-PickerTrigger-module__picker-trigger--multi-select--with-items___7uI-R",
+  "picker-trigger__content": "lc-PickerTrigger-module__picker-trigger__content___USgUX",
+  "picker-trigger__content--compact": "lc-PickerTrigger-module__picker-trigger__content--compact___tJ0c0",
+  "picker-trigger__content--medium": "lc-PickerTrigger-module__picker-trigger__content--medium___FDI7S",
+  "picker-trigger__content--large": "lc-PickerTrigger-module__picker-trigger__content--large___3F05E",
+  "picker-trigger__content--with-items": "lc-PickerTrigger-module__picker-trigger__content--with-items___gXBgO",
+  "picker-trigger__controls": "lc-PickerTrigger-module__picker-trigger__controls___atRqc",
+  "picker-trigger__controls--compact": "lc-PickerTrigger-module__picker-trigger__controls--compact___WEdel",
+  "picker-trigger__controls--medium": "lc-PickerTrigger-module__picker-trigger__controls--medium___MNwT1",
+  "picker-trigger__controls--large": "lc-PickerTrigger-module__picker-trigger__controls--large___mHG04",
+  "picker-trigger__clear-icon": "lc-PickerTrigger-module__picker-trigger__clear-icon___4TVYX",
+  "picker-trigger__chevron-icon": "lc-PickerTrigger-module__picker-trigger__chevron-icon___hmDvU",
+  "picker-trigger--disabled": "lc-PickerTrigger-module__picker-trigger--disabled___4MGb4",
+  "picker-trigger--focused": "lc-PickerTrigger-module__picker-trigger--focused___vBA4d",
+  "picker-trigger--error": "lc-PickerTrigger-module__picker-trigger--error___yu6Dt"
+}, P = "picker-trigger", lr = ({
+  setReference: r,
+  getReferenceProps: t,
+  testId: c,
+  size: a = "medium",
+  isMultiSelect: _,
+  isItemSelected: d,
+  hideClearButton: o,
+  isDisabled: n,
+  isRequired: f,
+  isOpen: k,
+  isError: l,
+  onClear: y,
+  children: u
+}) => {
+  const w = E(
+    v[P],
+    v[`${P}--${a}`],
+    _ && v[`${P}--multi-select`],
+    _ && d && v[`${P}--multi-select--with-items`],
+    n && v[`${P}--disabled`],
+    k && v[`${P}--focused`],
+    l && v[`${P}--error`]
+  ), N = !o && d && !n && !f, C = (L) => {
+    L.stopPropagation(), y();
+  };
+  return /* @__PURE__ */ e.createElement(
+    "button",
+    x({
+      tabIndex: n ? -1 : 0,
+      "aria-disabled": n,
+      className: w,
+      "data-testid": c,
+      ref: r,
+      type: "button"
+    }, t()),
+    /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: E(
+          v[`${P}__content`],
+          v[`${P}__content--${a}`],
+          _ && d && v[`${P}__content--with-items`]
+        )
+      },
+      /* @__PURE__ */ e.createElement(oe, { as: "div" }, u)
+    ),
+    /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: E(
+          v[`${P}__controls`],
+          v[`${P}__controls--${a}`]
+        )
+      },
+      N && /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          "data-testid": `${P}__clear-icon`,
+          className: v[`${P}__clear-icon`],
+          onClick: C
+        },
+        /* @__PURE__ */ e.createElement(D, { kind: "primary", size: "small", source: Xe })
+      ),
+      /* @__PURE__ */ e.createElement(
+        D,
+        {
+          className: v[`${P}__chevron-icon`],
+          source: k ? Qe : ze,
+          size: "medium",
+          disabled: n
+        }
+      )
+    )
+  );
+}, T = {
+  "picker-trigger-body": "lc-PickerTriggerBody-module__picker-trigger-body___xL0Rq",
+  "picker-trigger-body--single": "lc-PickerTriggerBody-module__picker-trigger-body--single___5LWZK",
+  "picker-trigger-body__item-container": "lc-PickerTriggerBody-module__picker-trigger-body__item-container___5Qs5E",
+  "picker-trigger-body__item": "lc-PickerTriggerBody-module__picker-trigger-body__item___TADgm",
+  "picker-trigger-body__item__content": "lc-PickerTriggerBody-module__picker-trigger-body__item__content___R6cqX",
+  "picker-trigger-body__item__avatar": "lc-PickerTriggerBody-module__picker-trigger-body__item__avatar___jqFLr",
+  "picker-trigger-body__item__icon": "lc-PickerTriggerBody-module__picker-trigger-body__item__icon___Dz9ln",
+  "picker-trigger-body__placeholder": "lc-PickerTriggerBody-module__picker-trigger-body__placeholder___1m8Qa",
+  "picker-trigger-body__placeholder--disabled": "lc-PickerTriggerBody-module__picker-trigger-body__placeholder--disabled___1QQf8",
+  "picker-trigger-body__input": "lc-PickerTriggerBody-module__picker-trigger-body__input___N2WzY",
+  "picker-trigger-body__input--compact": "lc-PickerTriggerBody-module__picker-trigger-body__input--compact___uu3rm",
+  "picker-trigger-body__input--medium": "lc-PickerTriggerBody-module__picker-trigger-body__input--medium___4GjnK",
+  "picker-trigger-body__input--large": "lc-PickerTriggerBody-module__picker-trigger-body__input--large___hWdHe",
+  "picker-trigger-body__tag": "lc-PickerTriggerBody-module__picker-trigger-body__tag___UYkhU",
+  "picker-trigger-body__tag--compact": "lc-PickerTriggerBody-module__picker-trigger-body__tag--compact___vajtL",
+  "picker-trigger-body__tag--medium": "lc-PickerTriggerBody-module__picker-trigger-body__tag--medium___yhMyC",
+  "picker-trigger-body__tag--large": "lc-PickerTriggerBody-module__picker-trigger-body__tag--large___FbETT"
+}, $ = "picker-trigger-body", ar = ({
+  isOpen: r,
+  isSearchDisabled: t,
+  isDisabled: c,
+  placeholder: a,
+  selectedItems: _,
+  type: d,
+  clearSearchAfterSelection: o,
+  size: n = "medium",
+  onItemRemove: f,
+  onSelect: k,
+  onFilter: l,
+  searchPhrase: y,
+  virtualItemRef: u
+}) => {
+  const w = r && !t, N = e.useRef(null);
+  e.useEffect(() => {
+    o && (l(""), N.current && (N.current.value = "", N.current.focus()));
+  }, [_, o]);
+  const C = (i) => d === "single" && r && !t ? null : i != null && i.customElement ? /* @__PURE__ */ e.createElement("div", { className: T[`${$}__item`] }, i.customElement.selectedItemBody) : /* @__PURE__ */ e.createElement("div", { className: T[`${$}__item`] }, i.icon && /* @__PURE__ */ e.createElement(
+    D,
+    {
+      source: i.icon,
+      className: T[`${$}__item__icon`]
+    }
+  ), i.avatarSrc && /* @__PURE__ */ e.createElement(
+    "img",
+    {
+      src: i.avatarSrc,
+      alt: "",
+      className: T[`${$}__item__avatar`]
+    }
+  ), /* @__PURE__ */ e.createElement("div", { className: T[`${$}__item__content`] }, i.name)), L = (i) => l(i.target.value), g = (i) => {
+    var p, h;
+    (p = u.current) != null && p.id && i.key === "Enter" && k((h = u.current) == null ? void 0 : h.id), d === "multi" && (i.key === "Backspace" || i.key === "Delete") && !y && _ && (_ == null ? void 0 : _.length) > 0 && f(_[_.length - 1].key);
+  }, m = () => /* @__PURE__ */ e.createElement(
+    "input",
+    {
+      ref: N,
+      className: E(
+        T[`${$}__input`],
+        T[`${$}__input--${n}`]
+      ),
+      placeholder: a,
+      onChange: L,
+      onKeyDown: g,
+      autoFocus: !0,
+      value: y
+    }
+  );
+  return !_ || _.length === 0 ? w ? m() : /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: E({
+        [T[`${$}__placeholder`]]: !0,
+        [T[`${$}__placeholder--disabled`]]: c
+      })
+    },
+    a
+  ) : /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: E(T[$], {
+        [T[`${$}--single`]]: d === "single"
+      })
+    },
+    /* @__PURE__ */ e.createElement("div", { className: T[`${$}__item-container`] }, d === "single" ? C(_[0]) : _.map((i) => /* @__PURE__ */ e.createElement(
+      Ze,
+      {
+        key: i.name,
+        className: E(
+          T[`${$}__tag`],
+          T[`${$}__tag--${n}`]
+        ),
+        dismissible: !c,
+        onRemove: (p) => {
+          p.stopPropagation(), f(i.key);
+        }
+      },
+      C(i)
+    ))),
+    w && m()
+  );
+}, or = 10, nr = ({
+  disabled: r,
+  items: t,
+  placement: c,
+  floatingStrategy: a,
+  useDismissHookProps: _,
+  useClickHookProps: d,
+  isOpen: o,
+  onVisibilityChange: n
+}) => {
+  const f = Be(), [k, l] = e.useState(!1), [y, u] = e.useState(null), [w, N] = e.useState(400), C = e.useRef([]), L = e.useRef(null), { refs: g, floatingStyles: m, context: i, isPositioned: p } = Fe({
+    nodeId: f,
+    open: o,
+    strategy: a,
+    onOpenChange: n,
+    whileElementsMounted: Re,
+    placement: c,
+    middleware: [
+      Se(4),
+      He({ padding: 10 }),
+      De(),
+      Me({
+        apply({ availableHeight: B, rects: A, elements: W }) {
+          er.flushSync(() => {
+            N(B);
+          }), Object.assign(W.floating.style, {
+            width: `${A.reference.width}px`
+          });
+        },
+        padding: or
+      })
+    ]
+  }), h = Ke(i, x({
+    enabled: !r,
+    keyboardHandlers: !1,
+    toggle: !1
+  }, d)), S = Oe(i, { role: "listbox" }), H = Ue(i, _), s = Ge(i, {
+    enabled: t.length > 0 && !r,
+    listRef: C,
+    activeIndex: y,
+    onNavigate: u,
+    virtual: !0,
+    virtualItemRef: L,
+    disabledIndices: tr(
+      t,
+      (B) => !!B.disabled || !!B.groupHeader
+    )
+  }), { getReferenceProps: F, getFloatingProps: G, getItemProps: q } = Ae(
+    [h, H, S, s]
+  );
+  return !o && k && l(!1), {
+    getReferenceProps: F,
+    getFloatingProps: G,
+    getItemProps: q,
+    setReference: g.setReference,
+    floatingStyles: m,
+    isPositioned: p,
+    context: i,
+    nodeId: f,
+    setFloating: g.setFloating,
+    activeIndex: y,
+    listElementsRef: C,
+    virtualItemRef: L,
+    maxHeight: w,
+    pointer: k,
+    setPointer: l
+  };
+}, sr = ({
+  selected: r,
+  options: t,
+  type: c,
+  selectAllOptionText: a,
+  onSelect: _,
+  setOpen: d
+}) => {
+  const [o, n] = e.useState(
+    () => (r == null ? void 0 : r.map(le)) || []
+  ), k = r !== void 0 ? (r == null ? void 0 : r.map(le)) || [] : o, [l, y] = e.useState(""), u = e.useMemo(() => {
+    const g = c === "multi" && a;
+    let m = t;
+    return l && (m = m.filter((i) => {
+      if (i.groupHeader)
+        return !1;
+      const p = l.toLowerCase();
+      return i.name.toLowerCase().includes(p);
+    })), g && m.length > 1 && (m = [
+      {
+        key: M,
+        name: a
+      },
+      ...m
+    ]), m;
+  }, [l, t, c, a]), w = (g) => {
+    const m = u.find((i) => i.key === g);
+    !m || m.disabled || (c === "single" ? (d(!1), n(() => (_([m]), [g]))) : g === M ? k.length === j(u).length ? n(() => (_(null), [])) : n(() => {
+      const i = j(u);
+      return _(i), i.map(({ key: p }) => p);
+    }) : n((i) => {
+      const p = i.includes(g) ? i.filter((h) => h !== g) : [...i, g];
+      return _(t.filter(({ key: h }) => p.includes(h))), p;
+    }));
+  };
+  return {
+    selectedKeys: k,
+    items: u,
+    searchPhrase: l,
+    handleSelect: w,
+    handleOnFilter: (g) => y(g),
+    handleItemRemove: (g) => w(g),
+    handleClear: () => {
+      d(!1), n([]), _(null), y("");
+    }
+  };
+}, gr = {
+  "picker-wrapper": "lc-Picker-module__picker-wrapper___2EDne"
+}, wr = (q) => {
+  var B = q, {
+    id: r,
+    className: t,
+    listClassName: c,
+    disabled: a,
+    error: _,
+    options: d,
+    selected: o,
+    size: n = "medium",
+    placeholder: f = "Select option",
+    isRequired: k,
+    noSearchResultText: l = "No results found",
+    selectAllOptionText: y,
+    type: u = "single",
+    searchDisabled: w = !1,
+    hideClearButton: N,
+    isVisible: C,
+    onOpen: L,
+    onClose: g,
+    openedOnInit: m = !1,
+    clearSearchAfterSelection: i,
+    onSelect: p,
+    placement: h,
+    floatingStrategy: S,
+    useDismissHookProps: H,
+    useClickHookProps: s,
+    virtuosoProps: F
+  } = B, G = _e(B, [
+    "id",
+    "className",
+    "listClassName",
+    "disabled",
+    "error",
+    "options",
+    "selected",
+    "size",
+    "placeholder",
+    "isRequired",
+    "noSearchResultText",
+    "selectAllOptionText",
+    "type",
+    "searchDisabled",
+    "hideClearButton",
+    "isVisible",
+    "onOpen",
+    "onClose",
+    "openedOnInit",
+    "clearSearchAfterSelection",
+    "onSelect",
+    "placement",
+    "floatingStrategy",
+    "useDismissHookProps",
+    "useClickHookProps",
+    "virtuosoProps"
+  ]);
+  const [A, W] = e.useState(m), X = C !== void 0, K = X ? C : A, z = (Z, ee) => {
+    Z ? L == null || L(ee) : g == null || g(ee), !X && W(Z);
+  }, {
+    selectedKeys: Q,
+    items: V,
+    searchPhrase: ne,
+    handleSelect: J,
+    handleOnFilter: se,
+    handleItemRemove: ge,
+    handleClear: me
+  } = sr({
+    selected: o,
+    options: d,
+    type: u,
+    selectAllOptionText: y,
+    onSelect: p,
+    setOpen: z
+  }), {
+    context: de,
+    nodeId: ue,
+    getReferenceProps: pe,
+    setReference: ke,
+    getFloatingProps: ye,
+    getItemProps: fe,
+    isPositioned: he,
+    setFloating: be,
+    floatingStyles: Pe,
+    listElementsRef: Ee,
+    virtualItemRef: ve,
+    activeIndex: Te,
+    maxHeight: $e,
+    pointer: we,
+    setPointer: Ne
+  } = nr({
+    openedOnInit: m,
+    disabled: a,
+    items: V,
+    placement: h,
+    floatingStrategy: S,
+    useClickHookProps: s,
+    useDismissHookProps: H,
+    isOpen: K,
+    onVisibilityChange: z
+  });
+  return /* @__PURE__ */ e.createElement("div", { id: r, className: E(gr["picker-wrapper"], t) }, /* @__PURE__ */ e.createElement(
+    lr,
+    {
+      getReferenceProps: pe,
+      setReference: ke,
+      testId: G["data-testid"],
+      isItemSelected: Q.length > 0,
+      isOpen: K,
+      onClear: me,
+      hideClearButton: N,
+      isDisabled: a,
+      isError: _,
+      isRequired: k,
+      isMultiSelect: u === "multi",
+      size: n
+    },
+    /* @__PURE__ */ e.createElement(
+      ar,
+      {
+        isOpen: K,
+        isSearchDisabled: w,
+        isDisabled: a,
+        placeholder: f,
+        selectedItems: o,
+        type: u,
+        size: n,
+        clearSearchAfterSelection: i,
+        onItemRemove: ge,
+        onSelect: J,
+        onFilter: se,
+        searchPhrase: ne,
+        virtualItemRef: ve
+      }
+    )
+  ), /* @__PURE__ */ e.createElement(We, { id: ue }, K && /* @__PURE__ */ e.createElement(Ye, null, /* @__PURE__ */ e.createElement(
+    cr,
+    {
+      pickerType: u,
+      options: V,
+      listClassName: c,
+      context: de,
+      setFloating: be,
+      floatingStyles: Pe,
+      maxHeight: $e,
+      isPositioned: he,
+      pointer: we,
+      activeIndex: Te,
+      selectedKeys: Q,
+      listElementsRef: Ee,
+      setPointer: Ne,
+      onSelect: J,
+      getFloatingProps: ye,
+      getItemProps: fe,
+      emptyStateText: l,
+      virtuosoProps: F
+    }
+  ))));
+};
+export {
+  wr as Picker,
+  cr as PickerList
+};