@commercetools/nimbus 2.9.1 → 2.11.0

package/dist/chunks/ListBox-BQGvhjf1.es.js

@@ -0,0 +1,543 @@
+import { a as F, b as B, e as X, g as ue, $ as Y, c as be } from "./utils-BBrLCz2b.es.js";
+import { g as $e, h as U, i as pe } from "./useCollection-BHV9RL7c.es.js";
+import c, { createContext as A, useCallback as ge, useMemo as Z, forwardRef as N, useContext as g, useRef as L, useEffect as ee } from "react";
+import { $ as me, a as he, b as xe, c as ve } from "./getItemCount-BEy-gD1d.es.js";
+import { $ as De } from "./Autocomplete-B1xvEyxv.es.js";
+import { a as Pe, $ as ye } from "./SelectionIndicator-BX52LU2T.es.js";
+import { a as Se } from "./Separator-ByH0WwDE.es.js";
+import { $ as ke } from "./Text-DOcU1ycg.es.js";
+import { $ as I } from "./filterDOMProps-BBiQzGq3.es.js";
+import { $ as te, a as k, d as G, e as Ee, c as Me } from "./mergeProps-Bcbq3GVJ.es.js";
+import { $ as Be } from "./useFocusWithin-B9hMajq2.es.js";
+import { $ as Ie } from "./useLabel-CHLJzMVW.es.js";
+import { $ as Q, c as we } from "./useFocusVisible-DZMx0daa.es.js";
+import { $ as oe } from "./useHover-BdXEf8Xj.es.js";
+import { c as Le, d as Fe, $ as Ae, e as Te, f as Ve, g as He, h as xt } from "./CollectionBuilder-CbqLnlVI.es.js";
+import { b as Oe } from "./FocusScope-D0jw9l8a.es.js";
+import { $ as Ce, a as Ue, b as Pt } from "./useListState-CCuYEVMA.es.js";
+import { $ as Ne } from "./getScrollParent-DpFDagTz.es.js";
+import { $ as Ke } from "./useEffectEvent-CaJWcluo.es.js";
+import { $ as ze } from "./useCollator-BHtcueqX.es.js";
+import { $ as We } from "./useFocus-E3918Dqe.es.js";
+import { $ as _e } from "./useFocusRing-2PACod61.es.js";
+import { a as Re } from "./useFocusable-Cd_G32KV.es.js";
+import { $ as qe } from "./I18nProvider-BuwVdK1A.es.js";
+import { $ as re } from "./useObjectRef-tuMEdnba.es.js";
+const T = /* @__PURE__ */ A({}), ae = /* @__PURE__ */ A(null), Je = /* @__PURE__ */ N(function(e, r) {
+  let { render: t } = g(ae);
+  return /* @__PURE__ */ c.createElement(c.Fragment, null, t(e, r));
+});
+function ie(o, e) {
+  let r = o?.renderDropIndicator, t = o?.isVirtualDragging?.(), a = ge((i) => {
+    if (t || e?.isDropTarget(i)) return r ? r(i) : /* @__PURE__ */ c.createElement(Je, {
+      target: i
+    });
+  }, [
+    e?.target,
+    t,
+    r
+  ]);
+  return o?.useDropIndicator ? a : void 0;
+}
+function je(o, e, r) {
+  let t = o.focusedKey, a = null;
+  if (e?.isVirtualDragging?.() && r?.target?.type === "item" && (a = r.target.key, r.target.dropPosition === "after")) {
+    let i = r.collection.getKeyAfter(a), l = null;
+    if (i != null) {
+      let n = r.collection.getItem(a)?.level ?? 0;
+      for (; i; ) {
+        let d = r.collection.getItem(i);
+        if (!d) break;
+        if (d.type !== "item") {
+          i = r.collection.getKeyAfter(i);
+          continue;
+        }
+        if ((d.level ?? 0) <= n) break;
+        l = i, i = r.collection.getKeyAfter(i);
+      }
+    }
+    a = i ?? l ?? a;
+  }
+  return Z(() => new Set([
+    t,
+    a
+  ].filter((i) => i != null)), [
+    t,
+    a
+  ]);
+}
+const K = /* @__PURE__ */ new WeakMap();
+function Ge(o) {
+  return typeof o == "string" ? o.replace(/\s*/g, "") : "" + o;
+}
+function Qe(o, e) {
+  let r = K.get(o);
+  if (!r) throw new Error("Unknown list");
+  return `${r.id}-option-${Ge(e)}`;
+}
+function Xe(o, e, r) {
+  let t = I(o, {
+    labelable: !0
+  }), a = o.selectionBehavior || "toggle", i = o.orientation || "vertical", l = o.linkBehavior || (a === "replace" ? "action" : "override");
+  a === "toggle" && l === "action" && (l = "override");
+  let { listProps: n } = me({
+    ...o,
+    ref: r,
+    selectionManager: e.selectionManager,
+    collection: e.collection,
+    disabledKeys: e.disabledKeys,
+    linkBehavior: l
+  }), { focusWithinProps: d } = Be({
+    onFocusWithin: o.onFocus,
+    onBlurWithin: o.onBlur,
+    onFocusWithinChange: o.onFocusChange
+  }), f = te(o.id);
+  K.set(e, {
+    id: f,
+    shouldUseVirtualFocus: o.shouldUseVirtualFocus,
+    shouldSelectOnPressUp: o.shouldSelectOnPressUp,
+    shouldFocusOnHover: o.shouldFocusOnHover,
+    isVirtualized: o.isVirtualized,
+    onAction: o.onAction,
+    linkBehavior: l,
+    // @ts-ignore
+    UNSTABLE_itemBehavior: o.UNSTABLE_itemBehavior
+  });
+  let { labelProps: u, fieldProps: b } = Ie({
+    ...o,
+    id: f,
+    // listbox is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: "span"
+  });
+  return {
+    labelProps: u,
+    listBoxProps: k(t, d, e.selectionManager.selectionMode === "multiple" ? {
+      "aria-multiselectable": "true"
+    } : {}, {
+      role: "listbox",
+      "aria-orientation": i,
+      ...k(b, n)
+    })
+  };
+}
+function Ye(o, e, r) {
+  let { key: t } = o, a = K.get(e), i = o.isDisabled ?? e.selectionManager.isDisabled(t), l = o.isSelected ?? e.selectionManager.isSelected(t), n = o.shouldSelectOnPressUp ?? a?.shouldSelectOnPressUp, d = o.shouldFocusOnHover ?? a?.shouldFocusOnHover, f = o.shouldUseVirtualFocus ?? a?.shouldUseVirtualFocus, u = o.isVirtualized ?? a?.isVirtualized, b = G(), s = G(), $ = {
+    role: "option",
+    "aria-disabled": i || void 0,
+    "aria-selected": e.selectionManager.selectionMode !== "none" ? l : void 0,
+    "aria-label": o["aria-label"],
+    "aria-labelledby": b,
+    "aria-describedby": s
+  }, p = e.collection.getItem(t);
+  if (u) {
+    let m = Number(p?.index);
+    $["aria-posinset"] = Number.isNaN(m) ? void 0 : m + 1, $["aria-setsize"] = he(e.collection);
+  }
+  let x = a?.onAction ? () => a?.onAction?.(t) : void 0, S = Qe(e, t), { itemProps: v, isPressed: h, isFocused: D, hasAction: P, allowsSelection: E } = $e({
+    selectionManager: e.selectionManager,
+    key: t,
+    ref: r,
+    shouldSelectOnPressUp: n,
+    allowsDifferentPressOrigin: n && d,
+    isVirtualized: u,
+    shouldUseVirtualFocus: f,
+    isDisabled: i,
+    onAction: x || p?.props?.onAction ? Ee(p?.props?.onAction, x) : void 0,
+    linkBehavior: a?.linkBehavior,
+    // @ts-ignore
+    UNSTABLE_itemBehavior: a?.UNSTABLE_itemBehavior,
+    id: S
+  }), { hoverProps: y } = oe({
+    isDisabled: i || !d,
+    onHoverStart() {
+      Q() || (e.selectionManager.setFocused(!0), e.selectionManager.setFocusedKey(t));
+    }
+  }), w = I(p?.props);
+  delete w.id;
+  let M = we(p?.props);
+  return {
+    optionProps: {
+      ...$,
+      ...k(w, v, y, M),
+      id: S
+    },
+    labelProps: {
+      id: b
+    },
+    descriptionProps: {
+      id: s
+    },
+    isFocused: D,
+    isFocusVisible: D && e.selectionManager.isFocused && Q(),
+    isSelected: l,
+    isDisabled: i,
+    isPressed: h,
+    allowsSelection: E,
+    hasAction: P
+  };
+}
+function Ze(o) {
+  let { heading: e, "aria-label": r } = o, t = te();
+  return {
+    itemProps: {
+      role: "presentation"
+    },
+    headingProps: e ? {
+      // Technically, listbox cannot contain headings according to ARIA.
+      // We hide the heading from assistive technology, using role="presentation",
+      // and only use it as a visual label for the nested group.
+      id: t,
+      role: "presentation",
+      onMouseDown: (a) => {
+        a.preventDefault();
+      }
+    } : {},
+    groupProps: {
+      role: "group",
+      "aria-label": r,
+      "aria-labelledby": e ? t : void 0
+    }
+  };
+}
+function Lt(o, e) {
+  let { collection: r, onLoadMore: t, scrollOffset: a = 1 } = o, i = L(null), l = Ke((n) => {
+    for (let d of n)
+      d.isIntersecting && t && t();
+  });
+  Me(() => (e.current && (i.current = new IntersectionObserver(l, {
+    root: Ne(e?.current),
+    rootMargin: `0px ${100 * a}% ${100 * a}% ${100 * a}%`
+  }), i.current.observe(e.current)), () => {
+    i.current && i.current.disconnect();
+  }), [
+    r,
+    e,
+    a
+  ]);
+}
+const le = /* @__PURE__ */ A(null), V = /* @__PURE__ */ A(null), Ft = /* @__PURE__ */ N(function(e, r) {
+  [e, r] = Y(e, r, le);
+  let t = g(V);
+  return t ? /* @__PURE__ */ c.createElement(ne, {
+    state: t,
+    props: e,
+    listBoxRef: r
+  }) : /* @__PURE__ */ c.createElement(Ve, {
+    content: /* @__PURE__ */ c.createElement(He, e)
+  }, (a) => /* @__PURE__ */ c.createElement(et, {
+    props: e,
+    listBoxRef: r,
+    collection: a
+  }));
+});
+function et({ props: o, listBoxRef: e, collection: r }) {
+  o = {
+    ...o,
+    collection: r,
+    children: null,
+    items: null
+  };
+  let { layoutDelegate: t } = g(U), a = Ue({
+    ...o,
+    layoutDelegate: t
+  });
+  return /* @__PURE__ */ c.createElement(ne, {
+    state: a,
+    props: o,
+    listBoxRef: e
+  });
+}
+function ne({ state: o, props: e, listBoxRef: r }) {
+  [e, r] = Y(e, r, De);
+  let { dragAndDropHooks: t, layout: a = "stack", orientation: i = "vertical", filter: l } = e, n = Ce(o, l), { collection: d, selectionManager: f } = n, u = !!t?.useDraggableCollectionState, b = !!t?.useDroppableCollectionState, { direction: s } = qe(), { disabledBehavior: $, disabledKeys: p } = f, x = ze({
+    usage: "search",
+    sensitivity: "base"
+  }), { isVirtualized: S, layoutDelegate: v, dropTargetDelegate: h, CollectionRoot: D } = g(U), P = Z(() => e.keyboardDelegate || new ve({
+    collection: d,
+    collator: x,
+    ref: r,
+    disabledKeys: p,
+    disabledBehavior: $,
+    layout: a,
+    orientation: i,
+    direction: s,
+    layoutDelegate: v
+  }), [
+    d,
+    x,
+    r,
+    $,
+    p,
+    i,
+    s,
+    e.keyboardDelegate,
+    a,
+    v
+  ]), { listBoxProps: E } = Xe({
+    ...e,
+    shouldSelectOnPressUp: u || e.shouldSelectOnPressUp,
+    keyboardDelegate: P,
+    isVirtualized: S
+  }, n, r), y = L(u), w = L(b);
+  ee(() => {
+    process.env.NODE_ENV !== "production" && (y.current !== u && console.warn("Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior."), w.current !== b && console.warn("Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior."));
+  }, [
+    u,
+    b
+  ]);
+  let M, m, z, H = !1, W = null, _ = L(null);
+  if (u && t) {
+    M = t.useDraggableCollectionState({
+      collection: d,
+      selectionManager: f,
+      preview: t.renderDragPreview ? _ : void 0
+    }), t.useDraggableCollection({}, M, r);
+    let C = t.DragPreview;
+    W = t.renderDragPreview ? /* @__PURE__ */ c.createElement(C, {
+      ref: _
+    }, t.renderDragPreview) : null;
+  }
+  if (b && t) {
+    m = t.useDroppableCollectionState({
+      collection: d,
+      selectionManager: f
+    });
+    let C = t.dropTargetDelegate || h || new t.ListDropTargetDelegate(d, r, {
+      orientation: i,
+      layout: a,
+      direction: s
+    });
+    z = t.useDroppableCollection({
+      keyboardDelegate: P,
+      dropTargetDelegate: C
+    }, m, r), H = m.isDropTarget({
+      type: "root"
+    });
+  }
+  let { focusProps: ce, isFocused: R, isFocusVisible: q } = _e(), O = n.collection.size === 0, J = {
+    isDropTarget: H,
+    isEmpty: O,
+    isFocused: R,
+    isFocusVisible: q,
+    layout: e.layout || "stack",
+    orientation: i,
+    state: n
+  }, se = F({
+    ...e,
+    children: void 0,
+    defaultClassName: "react-aria-ListBox",
+    values: J
+  }), j = null;
+  O && e.renderEmptyState && (j = /* @__PURE__ */ c.createElement("div", {
+    // eslint-disable-next-line
+    role: "option",
+    style: {
+      display: "contents"
+    }
+  }, e.renderEmptyState(J)));
+  let fe = I(e, {
+    global: !0
+  });
+  return /* @__PURE__ */ c.createElement(Oe, null, /* @__PURE__ */ c.createElement(B.div, {
+    ...k(fe, se, E, ce, z?.collectionProps),
+    ref: r,
+    slot: e.slot || void 0,
+    onScroll: e.onScroll,
+    "data-drop-target": H || void 0,
+    "data-empty": O || void 0,
+    "data-focused": R || void 0,
+    "data-focus-visible": q || void 0,
+    "data-layout": e.layout || "stack",
+    "data-orientation": i
+  }, /* @__PURE__ */ c.createElement(X, {
+    values: [
+      [
+        le,
+        e
+      ],
+      [
+        V,
+        n
+      ],
+      [
+        T,
+        {
+          dragAndDropHooks: t,
+          dragState: M,
+          dropState: m
+        }
+      ],
+      [
+        Se,
+        {
+          elementType: "div"
+        }
+      ],
+      [
+        ae,
+        {
+          render: tt
+        }
+      ],
+      [
+        pe,
+        {
+          name: "ListBoxSection",
+          render: de
+        }
+      ]
+    ]
+  }, /* @__PURE__ */ c.createElement(ye, null, /* @__PURE__ */ c.createElement(D, {
+    collection: d,
+    scrollRef: r,
+    persistedKeys: je(f, t, m),
+    renderDropIndicator: ie(t, m)
+  }))), j, W));
+}
+function de(o, e, r, t = "react-aria-ListBoxSection") {
+  let a = g(V), { dragAndDropHooks: i, dropState: l } = g(T), { CollectionBranch: n } = g(U), [d, f] = be(), { headingProps: u, groupProps: b } = Ze({
+    heading: f,
+    "aria-label": o["aria-label"] ?? void 0
+  }), s = F({
+    ...o,
+    id: void 0,
+    children: void 0,
+    defaultClassName: t,
+    values: void 0
+  }), $ = I(o, {
+    global: !0
+  });
+  return delete $.id, /* @__PURE__ */ c.createElement(B.section, {
+    ...k($, s, b),
+    ref: e
+  }, /* @__PURE__ */ c.createElement(xe.Provider, {
+    value: {
+      ...u,
+      ref: d
+    }
+  }, /* @__PURE__ */ c.createElement(n, {
+    collection: a.collection,
+    parent: r,
+    renderDropIndicator: ie(i, l)
+  })));
+}
+const At = /* @__PURE__ */ Le(Fe, de), Tt = /* @__PURE__ */ Ae(Te, function(e, r, t) {
+  let a = re(r), i = g(V), { dragAndDropHooks: l, dragState: n, dropState: d } = g(T), { optionProps: f, labelProps: u, descriptionProps: b, ...s } = Ye({
+    key: t.key,
+    "aria-label": e?.["aria-label"]
+  }, i, a), { hoverProps: $, isHovered: p } = oe({
+    isDisabled: !s.allowsSelection && !s.hasAction,
+    onHoverStart: t.props.onHoverStart,
+    onHoverChange: t.props.onHoverChange,
+    onHoverEnd: t.props.onHoverEnd
+  }), { keyboardProps: x } = Re(e), { focusProps: S } = We(e), v = null;
+  n && l && (v = l.useDraggableItem({
+    key: t.key,
+    hasAction: s.hasAction
+  }, n));
+  let h = null;
+  d && l && (h = l.useDroppableItem({
+    target: {
+      type: "item",
+      key: t.key,
+      dropPosition: "on"
+    }
+  }, d, a));
+  let D = n && n.isDragging(t.key), P = F({
+    ...e,
+    id: void 0,
+    children: e.children,
+    defaultClassName: "react-aria-ListBoxItem",
+    values: {
+      ...s,
+      isHovered: p,
+      selectionMode: i.selectionManager.selectionMode,
+      selectionBehavior: i.selectionManager.selectionBehavior,
+      allowsDragging: !!n,
+      isDragging: D,
+      isDropTarget: h?.isDropTarget
+    }
+  });
+  ee(() => {
+    !t.textValue && process.env.NODE_ENV !== "production" && console.warn("A `textValue` prop is required for <ListBoxItem> elements with non-plain text children in order to support accessibility features such as type to select.");
+  }, [
+    t.textValue
+  ]);
+  let E = e.href ? B.a : B.div, y = I(e, {
+    global: !0
+  });
+  return delete y.id, delete y.onClick, e.href && f.tabIndex == null && (f.tabIndex = -1), /* @__PURE__ */ c.createElement(E, {
+    ...k(y, P, f, $, x, S, v?.dragProps, h?.dropProps),
+    ref: a,
+    "data-allows-dragging": !!n || void 0,
+    "data-selected": s.isSelected || void 0,
+    "data-disabled": s.isDisabled || void 0,
+    "data-hovered": p || void 0,
+    "data-focused": s.isFocused || void 0,
+    "data-focus-visible": s.isFocusVisible || void 0,
+    "data-pressed": s.isPressed || void 0,
+    "data-dragging": D || void 0,
+    "data-drop-target": h?.isDropTarget || void 0,
+    "data-selection-mode": i.selectionManager.selectionMode === "none" ? void 0 : i.selectionManager.selectionMode
+  }, /* @__PURE__ */ c.createElement(X, {
+    values: [
+      [
+        ke,
+        {
+          slots: {
+            [ue]: u,
+            label: u,
+            description: b
+          }
+        }
+      ],
+      [
+        Pe,
+        {
+          isSelected: s.isSelected
+        }
+      ]
+    ]
+  }, P.children));
+});
+function tt(o, e) {
+  e = re(e);
+  let { dragAndDropHooks: r, dropState: t } = g(T), { dropIndicatorProps: a, isHidden: i, isDropTarget: l } = r.useDropIndicator(o, t, e);
+  return i ? null : /* @__PURE__ */ c.createElement(rt, {
+    ...o,
+    dropIndicatorProps: a,
+    isDropTarget: l,
+    ref: e
+  });
+}
+function ot(o, e) {
+  let { dropIndicatorProps: r, isDropTarget: t, ...a } = o, i = F({
+    ...a,
+    defaultClassName: "react-aria-DropIndicator",
+    values: {
+      isDropTarget: t
+    }
+  });
+  return /* @__PURE__ */ c.createElement(B.div, {
+    ...r,
+    ...i,
+    role: "option",
+    ref: e,
+    "data-drop-target": t || void 0
+  });
+}
+const rt = /* @__PURE__ */ N(ot);
+export {
+  le as $,
+  V as a,
+  Ft as b,
+  Tt as c,
+  At as d,
+  T as e,
+  ae as f,
+  ie as g,
+  je as h,
+  Lt as i
+};
+//# sourceMappingURL=ListBox-BQGvhjf1.es.js.map