@commercetools/nimbus 0.0.0-canary-20251027194157 → 0.0.0-canary-20251028202350

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

@@ -0,0 +1,561 @@
+import { g as ue, h as R, i as fe } from "./SelectionManager-S9Amkvfg.es.js";
+import { a as U, e as X, g as $e, $ as Y, b as be } from "./utils-_m_bPtjI.es.js";
+import c, { useRef as N, createContext as A, useCallback as pe, forwardRef as W, useMemo as Z, useContext as x, useEffect as ee } from "react";
+import { $ as ve, a as ge, b as me, c as he } from "./Header-CpF5ynyj.es.js";
+import { b as xe } from "./RSPContexts-DLgb84PF.es.js";
+import { a as Pe, $ as De } from "./SelectionIndicator-B27AsfqE.es.js";
+import { a as ye } from "./Separator-kuF-Wo1o.es.js";
+import { $ as Ee } from "./Text-DOcU1ycg.es.js";
+import { d as Be, $ as Me, e as Se, f as Fe, g as Le, c as ke, h as $o } from "./CollectionBuilder-BhYUxJYI.es.js";
+import { d as we, c as Ve, a as oe, $ as k, b as J, e as Ie } from "./mergeProps-DtKAFxbD.es.js";
+import { $ as V } from "./filterDOMProps-BSVCO5jK.es.js";
+import { $ as te } from "./useObjectRef-CaJ5pgjX.es.js";
+import { $ as Te } from "./getScrollParent-g7luwBTz.es.js";
+import { a as Oe, $ as Ce, b as ho } from "./useListState-BFNT8oUW.es.js";
+import { b as Ne } from "./openLink-BNz58j4a.es.js";
+import { b as Ue, a as Ae } from "./platform-Z5fvtFmM.es.js";
+import { $ as Q } from "./useFocusVisible-Cqoc10KD.es.js";
+import { $ as ae } from "./useHover-B62SXQZ1.es.js";
+import { $ as He } from "./useFocusWithin-CmZPz1jk.es.js";
+import { $ as Ke } from "./useLabel-Dy7MtUCn.es.js";
+import { $ as _e } from "./context-DW7UvQ8z.es.js";
+import { $ as ze } from "./useCollator-BjnMaGJd.es.js";
+import { $ as Re } from "./useFocusRing-4xTd5aPf.es.js";
+import { b as We } from "./FocusScope-C6u6zr_m.es.js";
+function ko(o, e) {
+  let { collection: a, onLoadMore: t, scrollOffset: i = 1 } = o, l = N(null), r = we((n) => {
+    for (let s of n)
+      s.isIntersecting && t && t();
+  });
+  Ve(() => (e.current && (l.current = new IntersectionObserver(r, {
+    root: Te(e?.current),
+    rootMargin: `0px ${100 * i}% ${100 * i}% ${100 * i}%`
+  }), l.current.observe(e.current)), () => {
+    l.current && l.current.disconnect();
+  }), [
+    a,
+    r,
+    e,
+    i
+  ]);
+}
+const j = /* @__PURE__ */ new WeakMap();
+function je(o) {
+  return typeof o == "string" ? o.replace(/\s*/g, "") : "" + o;
+}
+function qe(o, e) {
+  let a = j.get(o);
+  if (!a) throw new Error("Unknown list");
+  return `${a.id}-option-${je(e)}`;
+}
+function Ge(o, e, a) {
+  let t = V(o, {
+    labelable: !0
+  }), i = o.selectionBehavior || "toggle", l = o.linkBehavior || (i === "replace" ? "action" : "override");
+  i === "toggle" && l === "action" && (l = "override");
+  let { listProps: r } = ve({
+    ...o,
+    ref: a,
+    selectionManager: e.selectionManager,
+    collection: e.collection,
+    disabledKeys: e.disabledKeys,
+    linkBehavior: l
+  }), { focusWithinProps: n } = He({
+    onFocusWithin: o.onFocus,
+    onBlurWithin: o.onBlur,
+    onFocusWithinChange: o.onFocusChange
+  }), s = oe(o.id);
+  j.set(e, {
+    id: s,
+    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: $, fieldProps: u } = Ke({
+    ...o,
+    id: s,
+    // listbox is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: "span"
+  });
+  return {
+    labelProps: $,
+    listBoxProps: k(t, n, e.selectionManager.selectionMode === "multiple" ? {
+      "aria-multiselectable": "true"
+    } : {}, {
+      role: "listbox",
+      ...k(u, r)
+    })
+  };
+}
+function Je(o, e, a) {
+  var t, i;
+  let { key: l } = o, r = j.get(e);
+  var n;
+  let s = (n = o.isDisabled) !== null && n !== void 0 ? n : e.selectionManager.isDisabled(l);
+  var $;
+  let u = ($ = o.isSelected) !== null && $ !== void 0 ? $ : e.selectionManager.isSelected(l);
+  var d;
+  let f = (d = o.shouldSelectOnPressUp) !== null && d !== void 0 ? d : r?.shouldSelectOnPressUp;
+  var g;
+  let p = (g = o.shouldFocusOnHover) !== null && g !== void 0 ? g : r?.shouldFocusOnHover;
+  var m;
+  let v = (m = o.shouldUseVirtualFocus) !== null && m !== void 0 ? m : r?.shouldUseVirtualFocus;
+  var P;
+  let B = (P = o.isVirtualized) !== null && P !== void 0 ? P : r?.isVirtualized, M = J(), D = J(), y = {
+    role: "option",
+    "aria-disabled": s || void 0,
+    "aria-selected": e.selectionManager.selectionMode !== "none" ? u : void 0
+  };
+  Ue() && Ae() || (y["aria-label"] = o["aria-label"], y["aria-labelledby"] = M, y["aria-describedby"] = D);
+  let b = e.collection.getItem(l);
+  if (B) {
+    let h = Number(b?.index);
+    y["aria-posinset"] = Number.isNaN(h) ? void 0 : h + 1, y["aria-setsize"] = ge(e.collection);
+  }
+  let I = r?.onAction ? () => {
+    var h;
+    return r == null || (h = r.onAction) === null || h === void 0 ? void 0 : h.call(r, l);
+  } : void 0, S = qe(e, l), { itemProps: E, isPressed: F, isFocused: L, hasAction: T, allowsSelection: O } = ue({
+    selectionManager: e.selectionManager,
+    key: l,
+    ref: a,
+    shouldSelectOnPressUp: f,
+    allowsDifferentPressOrigin: f && p,
+    isVirtualized: B,
+    shouldUseVirtualFocus: v,
+    isDisabled: s,
+    onAction: I || !(b == null || (t = b.props) === null || t === void 0) && t.onAction ? Ie(b == null || (i = b.props) === null || i === void 0 ? void 0 : i.onAction, I) : void 0,
+    linkBehavior: r?.linkBehavior,
+    // @ts-ignore
+    UNSTABLE_itemBehavior: r?.UNSTABLE_itemBehavior,
+    id: S
+  }), { hoverProps: _ } = ae({
+    isDisabled: s || !p,
+    onHoverStart() {
+      Q() || (e.selectionManager.setFocused(!0), e.selectionManager.setFocusedKey(l));
+    }
+  }), w = V(b?.props);
+  delete w.id;
+  let C = Ne(b?.props);
+  return {
+    optionProps: {
+      ...y,
+      ...k(w, E, _, C),
+      id: S
+    },
+    labelProps: {
+      id: M
+    },
+    descriptionProps: {
+      id: D
+    },
+    isFocused: L,
+    isFocusVisible: L && e.selectionManager.isFocused && Q(),
+    isSelected: u,
+    isDisabled: s,
+    isPressed: F,
+    allowsSelection: O,
+    hasAction: T
+  };
+}
+function Qe(o) {
+  let { heading: e, "aria-label": a } = o, t = oe();
+  return {
+    itemProps: {
+      role: "presentation"
+    },
+    headingProps: e ? {
+      // Techincally, 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"
+    } : {},
+    groupProps: {
+      role: "group",
+      "aria-label": a,
+      "aria-labelledby": e ? t : void 0
+    }
+  };
+}
+const H = /* @__PURE__ */ A({}), re = /* @__PURE__ */ A(null), Xe = /* @__PURE__ */ W(function(e, a) {
+  let { render: t } = x(re);
+  return /* @__PURE__ */ c.createElement(c.Fragment, null, t(e, a));
+});
+function le(o, e) {
+  var a;
+  let t = o?.renderDropIndicator, i = o == null || (a = o.isVirtualDragging) === null || a === void 0 ? void 0 : a.call(o), l = pe((r) => {
+    if (i || e?.isDropTarget(r)) return t ? t(r) : /* @__PURE__ */ c.createElement(Xe, {
+      target: r
+    });
+  }, [
+    e?.target,
+    i,
+    t
+  ]);
+  return o?.useDropIndicator ? l : void 0;
+}
+function Ye(o, e, a) {
+  var t, i;
+  let l = o.focusedKey, r = null;
+  if (!(e == null || (t = e.isVirtualDragging) === null || t === void 0) && t.call(e) && (a == null || (i = a.target) === null || i === void 0 ? void 0 : i.type) === "item" && (r = a.target.key, a.target.dropPosition === "after")) {
+    let d = a.collection.getKeyAfter(r), f = null;
+    if (d != null) {
+      var n, s;
+      let g = (s = (n = a.collection.getItem(r)) === null || n === void 0 ? void 0 : n.level) !== null && s !== void 0 ? s : 0;
+      for (; d; ) {
+        let p = a.collection.getItem(d);
+        if (!p) break;
+        if (p.type !== "item") {
+          d = a.collection.getKeyAfter(d);
+          continue;
+        }
+        var $;
+        if ((($ = p.level) !== null && $ !== void 0 ? $ : 0) <= g) break;
+        f = d, d = a.collection.getKeyAfter(d);
+      }
+    }
+    var u;
+    r = (u = d ?? f) !== null && u !== void 0 ? u : r;
+  }
+  return Z(() => new Set([
+    l,
+    r
+  ].filter((d) => d != null)), [
+    l,
+    r
+  ]);
+}
+const ie = /* @__PURE__ */ A(null), K = /* @__PURE__ */ A(null), wo = /* @__PURE__ */ W(function(e, a) {
+  [e, a] = Y(e, a, ie);
+  let t = x(K);
+  return t ? /* @__PURE__ */ c.createElement(ne, {
+    state: t,
+    props: e,
+    listBoxRef: a
+  }) : /* @__PURE__ */ c.createElement(Le, {
+    content: /* @__PURE__ */ c.createElement(ke, e)
+  }, (i) => /* @__PURE__ */ c.createElement(Ze, {
+    props: e,
+    listBoxRef: a,
+    collection: i
+  }));
+});
+function Ze({ props: o, listBoxRef: e, collection: a }) {
+  o = {
+    ...o,
+    collection: a,
+    children: null,
+    items: null
+  };
+  let { layoutDelegate: t } = x(R), i = Ce({
+    ...o,
+    layoutDelegate: t
+  });
+  return /* @__PURE__ */ c.createElement(ne, {
+    state: i,
+    props: o,
+    listBoxRef: e
+  });
+}
+function ne({ state: o, props: e, listBoxRef: a }) {
+  [e, a] = Y(e, a, xe);
+  let { dragAndDropHooks: t, layout: i = "stack", orientation: l = "vertical", filter: r } = e, n = Oe(o, r), { collection: s, selectionManager: $ } = n, u = !!t?.useDraggableCollectionState, d = !!t?.useDroppableCollectionState, { direction: f } = _e(), { disabledBehavior: g, disabledKeys: p } = $, m = ze({
+    usage: "search",
+    sensitivity: "base"
+  }), { isVirtualized: v, layoutDelegate: P, dropTargetDelegate: B, CollectionRoot: M } = x(R), D = Z(() => e.keyboardDelegate || new he({
+    collection: s,
+    collator: m,
+    ref: a,
+    disabledKeys: p,
+    disabledBehavior: g,
+    layout: i,
+    orientation: l,
+    direction: f,
+    layoutDelegate: P
+  }), [
+    s,
+    m,
+    a,
+    g,
+    p,
+    l,
+    f,
+    e.keyboardDelegate,
+    i,
+    P
+  ]), { listBoxProps: y } = Ge({
+    ...e,
+    shouldSelectOnPressUp: u || e.shouldSelectOnPressUp,
+    keyboardDelegate: D,
+    isVirtualized: v
+  }, n, a), b = N(u), I = N(d);
+  ee(() => {
+    process.env.NODE_ENV !== "production" && (b.current !== u && console.warn("Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior."), I.current !== d && console.warn("Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior."));
+  }, [
+    u,
+    d
+  ]);
+  let S, E, F, L = !1, T = null, O = N(null);
+  if (u && t) {
+    S = t.useDraggableCollectionState({
+      collection: s,
+      selectionManager: $,
+      preview: t.renderDragPreview ? O : void 0
+    }), t.useDraggableCollection({}, S, a);
+    let z = t.DragPreview;
+    T = t.renderDragPreview ? /* @__PURE__ */ c.createElement(z, {
+      ref: O
+    }, t.renderDragPreview) : null;
+  }
+  if (d && t) {
+    E = t.useDroppableCollectionState({
+      collection: s,
+      selectionManager: $
+    });
+    let z = t.dropTargetDelegate || B || new t.ListDropTargetDelegate(s, a, {
+      orientation: l,
+      layout: i,
+      direction: f
+    });
+    F = t.useDroppableCollection({
+      keyboardDelegate: D,
+      dropTargetDelegate: z
+    }, E, a), L = E.isDropTarget({
+      type: "root"
+    });
+  }
+  let { focusProps: _, isFocused: w, isFocusVisible: C } = Re(), h = n.collection.size === 0, q = {
+    isDropTarget: L,
+    isEmpty: h,
+    isFocused: w,
+    isFocusVisible: C,
+    layout: e.layout || "stack",
+    state: n
+  }, se = U({
+    className: e.className,
+    style: e.style,
+    defaultClassName: "react-aria-ListBox",
+    values: q
+  }), G = null;
+  h && e.renderEmptyState && (G = /* @__PURE__ */ c.createElement("div", {
+    // eslint-disable-next-line
+    role: "option",
+    style: {
+      display: "contents"
+    }
+  }, e.renderEmptyState(q)));
+  let ce = V(e, {
+    global: !0
+  });
+  return /* @__PURE__ */ c.createElement(We, null, /* @__PURE__ */ c.createElement("div", {
+    ...k(ce, se, y, _, F?.collectionProps),
+    ref: a,
+    slot: e.slot || void 0,
+    onScroll: e.onScroll,
+    "data-drop-target": L || void 0,
+    "data-empty": h || void 0,
+    "data-focused": w || void 0,
+    "data-focus-visible": C || void 0,
+    "data-layout": e.layout || "stack",
+    "data-orientation": e.orientation || "vertical"
+  }, /* @__PURE__ */ c.createElement(X, {
+    values: [
+      [
+        ie,
+        e
+      ],
+      [
+        K,
+        n
+      ],
+      [
+        H,
+        {
+          dragAndDropHooks: t,
+          dragState: S,
+          dropState: E
+        }
+      ],
+      [
+        ye,
+        {
+          elementType: "div"
+        }
+      ],
+      [
+        re,
+        {
+          render: eo
+        }
+      ],
+      [
+        fe,
+        {
+          name: "ListBoxSection",
+          render: de
+        }
+      ]
+    ]
+  }, /* @__PURE__ */ c.createElement(De, null, /* @__PURE__ */ c.createElement(M, {
+    collection: s,
+    scrollRef: a,
+    persistedKeys: Ye($, t, E),
+    renderDropIndicator: le(t, E)
+  }))), G, T));
+}
+function de(o, e, a, t = "react-aria-ListBoxSection") {
+  let i = x(K), { dragAndDropHooks: l, dropState: r } = x(H), { CollectionBranch: n } = x(R), [s, $] = be();
+  var u;
+  let { headingProps: d, groupProps: f } = Qe({
+    heading: $,
+    "aria-label": (u = o["aria-label"]) !== null && u !== void 0 ? u : void 0
+  }), g = U({
+    defaultClassName: t,
+    className: o.className,
+    style: o.style,
+    values: {}
+  }), p = V(o, {
+    global: !0
+  });
+  return delete p.id, /* @__PURE__ */ c.createElement("section", {
+    ...k(p, g, f),
+    ref: e
+  }, /* @__PURE__ */ c.createElement(me.Provider, {
+    value: {
+      ...d,
+      ref: s
+    }
+  }, /* @__PURE__ */ c.createElement(n, {
+    collection: i.collection,
+    parent: a,
+    renderDropIndicator: le(l, r)
+  })));
+}
+const Vo = /* @__PURE__ */ Be(Se, de), Io = /* @__PURE__ */ Me(Fe, function(e, a, t) {
+  let i = te(a), l = x(K), { dragAndDropHooks: r, dragState: n, dropState: s } = x(H), { optionProps: $, labelProps: u, descriptionProps: d, ...f } = Je({
+    key: t.key,
+    "aria-label": e?.["aria-label"]
+  }, l, i), { hoverProps: g, isHovered: p } = ae({
+    isDisabled: !f.allowsSelection && !f.hasAction,
+    onHoverStart: t.props.onHoverStart,
+    onHoverChange: t.props.onHoverChange,
+    onHoverEnd: t.props.onHoverEnd
+  }), m = null;
+  n && r && (m = r.useDraggableItem({
+    key: t.key
+  }, n));
+  let v = null;
+  s && r && (v = r.useDroppableItem({
+    target: {
+      type: "item",
+      key: t.key,
+      dropPosition: "on"
+    }
+  }, s, i));
+  let P = n && n.isDragging(t.key), B = U({
+    ...e,
+    id: void 0,
+    children: e.children,
+    defaultClassName: "react-aria-ListBoxItem",
+    values: {
+      ...f,
+      isHovered: p,
+      selectionMode: l.selectionManager.selectionMode,
+      selectionBehavior: l.selectionManager.selectionBehavior,
+      allowsDragging: !!n,
+      isDragging: P,
+      isDropTarget: v?.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 M = e.href ? "a" : "div", D = V(e, {
+    global: !0
+  });
+  return delete D.id, delete D.onClick, /* @__PURE__ */ c.createElement(M, {
+    ...k(D, B, $, g, m?.dragProps, v?.dropProps),
+    ref: i,
+    "data-allows-dragging": !!n || void 0,
+    "data-selected": f.isSelected || void 0,
+    "data-disabled": f.isDisabled || void 0,
+    "data-hovered": p || void 0,
+    "data-focused": f.isFocused || void 0,
+    "data-focus-visible": f.isFocusVisible || void 0,
+    "data-pressed": f.isPressed || void 0,
+    "data-dragging": P || void 0,
+    "data-drop-target": v?.isDropTarget || void 0,
+    "data-selection-mode": l.selectionManager.selectionMode === "none" ? void 0 : l.selectionManager.selectionMode
+  }, /* @__PURE__ */ c.createElement(X, {
+    values: [
+      [
+        Ee,
+        {
+          slots: {
+            [$e]: u,
+            label: u,
+            description: d
+          }
+        }
+      ],
+      [
+        Pe,
+        {
+          isSelected: f.isSelected
+        }
+      ]
+    ]
+  }, B.children));
+});
+function eo(o, e) {
+  e = te(e);
+  let { dragAndDropHooks: a, dropState: t } = x(H), { dropIndicatorProps: i, isHidden: l, isDropTarget: r } = a.useDropIndicator(o, t, e);
+  return l ? null : /* @__PURE__ */ c.createElement(to, {
+    ...o,
+    dropIndicatorProps: i,
+    isDropTarget: r,
+    ref: e
+  });
+}
+function oo(o, e) {
+  let { dropIndicatorProps: a, isDropTarget: t, ...i } = o, l = U({
+    ...i,
+    defaultClassName: "react-aria-DropIndicator",
+    values: {
+      isDropTarget: t
+    }
+  });
+  return /* @__PURE__ */ c.createElement("div", {
+    ...a,
+    ...l,
+    // eslint-disable-next-line
+    role: "option",
+    ref: e,
+    "data-drop-target": t || void 0
+  });
+}
+const to = /* @__PURE__ */ W(oo);
+export {
+  ie as $,
+  K as a,
+  wo as b,
+  Io as c,
+  Vo as d,
+  H as e,
+  re as f,
+  le as g,
+  Ye as h,
+  ko as i,
+  j,
+  qe as k
+};
+//# sourceMappingURL=ListBox-CdtzuZzA.es.js.map