@commercetools/nimbus 0.0.10 → 0.0.12-rc1

package/dist/chunks/ListBox-0C7L4Sat.es.js

@@ -0,0 +1,645 @@
+import { $ as ve, a as pe, b as ge, c as ye, d as he, e as me, f as xe, g as De, h as Pe, i as ke, j, k as Me, l as Ke, m as Se, n as we, o as Ee } from "./Separator-ChieGwKF.es.js";
+import { a as O, d as ie, g as Fe, $ as Ve, b as Ie, f as Be } from "./utils-C4ruQppN.es.js";
+import u, { useRef as C, version as nt, useMemo as M, useCallback as ae, useEffect as q, createContext as z, forwardRef as G, useContext as x } from "react";
+import { $ as Le } from "./Text-DOcU1ycg.es.js";
+import { c as ct, d as ut, a as re, $ as B, b as te, e as Te } from "./mergeProps-C0OSi2w3.es.js";
+import { $ as N } from "./filterDOMProps-HzsCnE3d.es.js";
+import { $ as J } from "./useObjectRef-CaJ5pgjX.es.js";
+import { $ as vt } from "./scrollIntoView-C5qp-va8.es.js";
+import { a as Ce } from "./openLink-BRnXRj9w.es.js";
+import { b as Oe, a as ze } from "./platform-D-bXaP3n.es.js";
+import { $ as oe } from "./useFocus-DyrL604F.es.js";
+import { $ as ne } from "./useHover-EutQBS3I.es.js";
+import { $ as Ne } from "./useFocusWithin-DH1ei7eA.es.js";
+import { $ as He } from "./useLabel-Dsvi6pv1.es.js";
+import { $ as Ue } from "./context-D3RF-nTI.es.js";
+import { $ as Ae } from "./useCollator-BhJcleP-.es.js";
+import { $ as Re } from "./useFocusRing-BOPRvfsD.es.js";
+import { b as We } from "./FocusScope-qJgAziUV.es.js";
+const Q = /* @__PURE__ */ new WeakMap();
+function _e(t) {
+  return typeof t == "string" ? t.replace(/\s*/g, "") : "" + t;
+}
+function je(t, e) {
+  let o = Q.get(t);
+  if (!o) throw new Error("Unknown list");
+  return `${o.id}-option-${_e(e)}`;
+}
+function qe(t, e, o) {
+  let l = N(t, {
+    labelable: !0
+  }), n = t.selectionBehavior || "toggle", r = t.linkBehavior || (n === "replace" ? "action" : "override");
+  n === "toggle" && r === "action" && (r = "override");
+  let { listProps: i } = ve({
+    ...t,
+    ref: o,
+    selectionManager: e.selectionManager,
+    collection: e.collection,
+    disabledKeys: e.disabledKeys,
+    linkBehavior: r
+  }), { focusWithinProps: a } = Ne({
+    onFocusWithin: t.onFocus,
+    onBlurWithin: t.onBlur,
+    onFocusWithinChange: t.onFocusChange
+  }), c = re(t.id);
+  Q.set(e, {
+    id: c,
+    shouldUseVirtualFocus: t.shouldUseVirtualFocus,
+    shouldSelectOnPressUp: t.shouldSelectOnPressUp,
+    shouldFocusOnHover: t.shouldFocusOnHover,
+    isVirtualized: t.isVirtualized,
+    onAction: t.onAction,
+    linkBehavior: r
+  });
+  let { labelProps: f, fieldProps: d } = He({
+    ...t,
+    id: c,
+    // listbox is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: "span"
+  });
+  return {
+    labelProps: f,
+    listBoxProps: B(l, a, e.selectionManager.selectionMode === "multiple" ? {
+      "aria-multiselectable": "true"
+    } : {}, {
+      role: "listbox",
+      ...B(d, i)
+    })
+  };
+}
+function Ge(t, e, o) {
+  var l, n;
+  let { key: r } = t, i = Q.get(e);
+  var a;
+  let c = (a = t.isDisabled) !== null && a !== void 0 ? a : e.selectionManager.isDisabled(r);
+  var f;
+  let d = (f = t.isSelected) !== null && f !== void 0 ? f : e.selectionManager.isSelected(r);
+  var b;
+  let s = (b = t.shouldSelectOnPressUp) !== null && b !== void 0 ? b : i?.shouldSelectOnPressUp;
+  var h;
+  let $ = (h = t.shouldFocusOnHover) !== null && h !== void 0 ? h : i?.shouldFocusOnHover;
+  var m;
+  let v = (m = t.shouldUseVirtualFocus) !== null && m !== void 0 ? m : i?.shouldUseVirtualFocus;
+  var g;
+  let p = (g = t.isVirtualized) !== null && g !== void 0 ? g : i?.isVirtualized, K = te(), E = te(), D = {
+    role: "option",
+    "aria-disabled": c || void 0,
+    "aria-selected": e.selectionManager.selectionMode !== "none" ? d : void 0
+  };
+  Oe() && ze() || (D["aria-label"] = t["aria-label"], D["aria-labelledby"] = K, D["aria-describedby"] = E);
+  let y = e.collection.getItem(r);
+  if (p) {
+    let k = Number(y?.index);
+    D["aria-posinset"] = Number.isNaN(k) ? void 0 : k + 1, D["aria-setsize"] = pe(e.collection);
+  }
+  let F = i?.onAction ? () => {
+    var k;
+    return i == null || (k = i.onAction) === null || k === void 0 ? void 0 : k.call(i, r);
+  } : void 0, L = je(e, r), { itemProps: A, isPressed: R, isFocused: S, hasAction: P, allowsSelection: w } = ge({
+    selectionManager: e.selectionManager,
+    key: r,
+    ref: o,
+    shouldSelectOnPressUp: s,
+    allowsDifferentPressOrigin: s && $,
+    isVirtualized: p,
+    shouldUseVirtualFocus: v,
+    isDisabled: c,
+    onAction: F || !(y == null || (l = y.props) === null || l === void 0) && l.onAction ? Te(y == null || (n = y.props) === null || n === void 0 ? void 0 : n.onAction, F) : void 0,
+    linkBehavior: i?.linkBehavior,
+    id: L
+  }), { hoverProps: V } = ne({
+    isDisabled: c || !$,
+    onHoverStart() {
+      oe() || (e.selectionManager.setFocused(!0), e.selectionManager.setFocusedKey(r));
+    }
+  }), I = N(y?.props);
+  delete I.id;
+  let T = Ce(y?.props);
+  return {
+    optionProps: {
+      ...D,
+      ...B(I, A, V, T),
+      id: L
+    },
+    labelProps: {
+      id: K
+    },
+    descriptionProps: {
+      id: E
+    },
+    isFocused: S,
+    isFocusVisible: S && e.selectionManager.isFocused && oe(),
+    isSelected: d,
+    isDisabled: c,
+    isPressed: R,
+    allowsSelection: w,
+    hasAction: P
+  };
+}
+function Je(t) {
+  let { heading: e, "aria-label": o } = t, l = re();
+  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: l,
+      role: "presentation"
+    } : {},
+    groupProps: {
+      role: "group",
+      "aria-label": o,
+      "aria-labelledby": e ? l : void 0
+    }
+  };
+}
+class le {
+  *[Symbol.iterator]() {
+    yield* this.iterable;
+  }
+  get size() {
+    return this.keyMap.size;
+  }
+  getKeys() {
+    return this.keyMap.keys();
+  }
+  getKeyBefore(e) {
+    let o = this.keyMap.get(e);
+    var l;
+    return o && (l = o.prevKey) !== null && l !== void 0 ? l : null;
+  }
+  getKeyAfter(e) {
+    let o = this.keyMap.get(e);
+    var l;
+    return o && (l = o.nextKey) !== null && l !== void 0 ? l : null;
+  }
+  getFirstKey() {
+    return this.firstKey;
+  }
+  getLastKey() {
+    return this.lastKey;
+  }
+  getItem(e) {
+    var o;
+    return (o = this.keyMap.get(e)) !== null && o !== void 0 ? o : null;
+  }
+  at(e) {
+    const o = [
+      ...this.getKeys()
+    ];
+    return this.getItem(o[e]);
+  }
+  getChildren(e) {
+    let o = this.keyMap.get(e);
+    return o?.childNodes || [];
+  }
+  constructor(e) {
+    this.keyMap = /* @__PURE__ */ new Map(), this.firstKey = null, this.lastKey = null, this.iterable = e;
+    let o = (i) => {
+      if (this.keyMap.set(i.key, i), i.childNodes && i.type === "section") for (let a of i.childNodes) o(a);
+    };
+    for (let i of e) o(i);
+    let l = null, n = 0;
+    for (let [i, a] of this.keyMap)
+      l ? (l.nextKey = i, a.prevKey = l.key) : (this.firstKey = i, a.prevKey = void 0), a.type === "item" && (a.index = n++), l = a, l.nextKey = void 0;
+    var r;
+    this.lastKey = (r = l?.key) !== null && r !== void 0 ? r : null;
+  }
+}
+function Qe(t) {
+  let { filter: e, layoutDelegate: o } = t, l = ye(t), n = M(() => t.disabledKeys ? new Set(t.disabledKeys) : /* @__PURE__ */ new Set(), [
+    t.disabledKeys
+  ]), r = ae((f) => e ? new le(e(f)) : new le(f), [
+    e
+  ]), i = M(() => ({
+    suppressTextValueWarning: t.suppressTextValueWarning
+  }), [
+    t.suppressTextValueWarning
+  ]), a = he(t, r, i), c = M(() => new me(a, l, {
+    layoutDelegate: o
+  }), [
+    a,
+    l,
+    o
+  ]);
+  return de(a, c), {
+    collection: a,
+    disabledKeys: n,
+    selectionManager: c
+  };
+}
+function Xe(t, e) {
+  let o = M(() => e ? t.collection.UNSTABLE_filter(e) : t.collection, [
+    t.collection,
+    e
+  ]), l = t.selectionManager.withCollection(o);
+  return de(o, l), {
+    collection: o,
+    selectionManager: l,
+    disabledKeys: t.disabledKeys
+  };
+}
+function de(t, e) {
+  const o = C(null);
+  q(() => {
+    if (e.focusedKey != null && !t.getItem(e.focusedKey) && o.current) {
+      const d = o.current.getItem(e.focusedKey), b = [
+        ...o.current.getKeys()
+      ].map((g) => {
+        const p = o.current.getItem(g);
+        return p?.type === "item" ? p : null;
+      }).filter((g) => g !== null), s = [
+        ...t.getKeys()
+      ].map((g) => {
+        const p = t.getItem(g);
+        return p?.type === "item" ? p : null;
+      }).filter((g) => g !== null);
+      var l, n;
+      const h = ((l = b?.length) !== null && l !== void 0 ? l : 0) - ((n = s?.length) !== null && n !== void 0 ? n : 0);
+      var r, i, a;
+      let $ = Math.min(h > 1 ? Math.max(((r = d?.index) !== null && r !== void 0 ? r : 0) - h + 1, 0) : (i = d?.index) !== null && i !== void 0 ? i : 0, ((a = s?.length) !== null && a !== void 0 ? a : 0) - 1), m = null, v = !1;
+      for (; $ >= 0; ) {
+        if (!e.isDisabled(s[$].key)) {
+          m = s[$];
+          break;
+        }
+        if ($ < s.length - 1 && !v) $++;
+        else {
+          v = !0;
+          var c, f;
+          $ > ((c = d?.index) !== null && c !== void 0 ? c : 0) && ($ = (f = d?.index) !== null && f !== void 0 ? f : 0), $--;
+        }
+      }
+      e.setFocusedKey(m ? m.key : null);
+    }
+    o.current = t;
+  }, [
+    t,
+    e
+  ]);
+}
+const H = /* @__PURE__ */ z({}), se = /* @__PURE__ */ z(null), Ye = /* @__PURE__ */ G(function(e, o) {
+  let { render: l } = x(se);
+  return /* @__PURE__ */ u.createElement(u.Fragment, null, l(e, o));
+});
+function ce(t, e) {
+  var o;
+  let l = t?.renderDropIndicator, n = t == null || (o = t.isVirtualDragging) === null || o === void 0 ? void 0 : o.call(t), r = ae((i) => {
+    if (n || e?.isDropTarget(i)) return l ? l(i) : /* @__PURE__ */ u.createElement(Ye, {
+      target: i
+    });
+  }, [
+    e?.target,
+    n,
+    l
+  ]);
+  return t?.useDropIndicator ? r : void 0;
+}
+function Ze(t, e, o) {
+  var l, n;
+  let r = t.focusedKey, i = null;
+  if (!(e == null || (l = e.isVirtualDragging) === null || l === void 0) && l.call(e) && (o == null || (n = o.target) === null || n === void 0 ? void 0 : n.type) === "item") {
+    i = o.target.key;
+    var a;
+    o.target.dropPosition === "after" && (i = (a = o.collection.getKeyAfter(i)) !== null && a !== void 0 ? a : i);
+  }
+  return M(() => new Set([
+    r,
+    i
+  ].filter((c) => c != null)), [
+    r,
+    i
+  ]);
+}
+const ue = /* @__PURE__ */ z(null), U = /* @__PURE__ */ z(null), Kt = /* @__PURE__ */ G(function(e, o) {
+  [e, o] = Ve(e, o, ue);
+  let l = x(U);
+  return l ? /* @__PURE__ */ u.createElement(fe, {
+    state: l,
+    props: e,
+    listBoxRef: o
+  }) : /* @__PURE__ */ u.createElement(Pe, {
+    content: /* @__PURE__ */ u.createElement(ke, e)
+  }, (n) => /* @__PURE__ */ u.createElement(et, {
+    props: e,
+    listBoxRef: o,
+    collection: n
+  }));
+});
+function et({ props: t, listBoxRef: e, collection: o }) {
+  t = {
+    ...t,
+    collection: o,
+    children: null,
+    items: null
+  };
+  let { layoutDelegate: l } = x(j), n = Qe({
+    ...t,
+    layoutDelegate: l
+  });
+  return /* @__PURE__ */ u.createElement(fe, {
+    state: n,
+    props: t,
+    listBoxRef: e
+  });
+}
+function fe({ state: t, props: e, listBoxRef: o }) {
+  var l;
+  let { filter: n, collectionProps: r, collectionRef: i } = x(Ke) || {};
+  e = M(() => r ? {
+    ...e,
+    ...r
+  } : e, [
+    e,
+    r
+  ]);
+  let { dragAndDropHooks: a, layout: c = "stack", orientation: f = "vertical" } = e;
+  o = J(M(() => Be(o, i !== void 0 ? i : null), [
+    i,
+    o
+  ]));
+  let d = Xe(t, n), { collection: b, selectionManager: s } = d, h = !!a?.useDraggableCollectionState, $ = !!a?.useDroppableCollectionState, { direction: m } = Ue(), { disabledBehavior: v, disabledKeys: g } = s, p = Ae({
+    usage: "search",
+    sensitivity: "base"
+  }), { isVirtualized: K, layoutDelegate: E, dropTargetDelegate: D, CollectionRoot: y } = x(j), F = M(() => e.keyboardDelegate || new Se({
+    collection: b,
+    collator: p,
+    ref: o,
+    disabledKeys: g,
+    disabledBehavior: v,
+    layout: c,
+    orientation: f,
+    direction: m,
+    layoutDelegate: E
+  }), [
+    b,
+    p,
+    o,
+    v,
+    g,
+    f,
+    m,
+    e.keyboardDelegate,
+    c,
+    E
+  ]), { listBoxProps: L } = qe({
+    ...e,
+    shouldSelectOnPressUp: h || e.shouldSelectOnPressUp,
+    keyboardDelegate: F,
+    isVirtualized: K
+  }, d, o), A = C(h), R = C($);
+  q(() => {
+    process.env.NODE_ENV !== "production" && (A.current !== h && console.warn("Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior."), R.current !== $ && console.warn("Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior."));
+  }, [
+    h,
+    $
+  ]);
+  let S, P, w, V = !1, I = null, T = C(null);
+  if (h && a) {
+    S = a.useDraggableCollectionState({
+      collection: b,
+      selectionManager: s,
+      preview: a.renderDragPreview ? T : void 0
+    }), a.useDraggableCollection({}, S, o);
+    let _ = a.DragPreview;
+    I = a.renderDragPreview ? /* @__PURE__ */ u.createElement(_, {
+      ref: T
+    }, a.renderDragPreview) : null;
+  }
+  if ($ && a) {
+    P = a.useDroppableCollectionState({
+      collection: b,
+      selectionManager: s
+    });
+    let _ = a.dropTargetDelegate || D || new a.ListDropTargetDelegate(b, o, {
+      orientation: f,
+      layout: c,
+      direction: m
+    });
+    w = a.useDroppableCollection({
+      keyboardDelegate: F,
+      dropTargetDelegate: _
+    }, P, o), V = P.isDropTarget({
+      type: "root"
+    });
+  }
+  let { focusProps: k, isFocused: X, isFocusVisible: Y } = Re(), W = d.collection.size === 0 || d.collection.size === 1 && ((l = d.collection.getItem(d.collection.getFirstKey())) === null || l === void 0 ? void 0 : l.type) === "loader", Z = {
+    isDropTarget: V,
+    isEmpty: W,
+    isFocused: X,
+    isFocusVisible: Y,
+    layout: e.layout || "stack",
+    state: d
+  }, be = O({
+    className: e.className,
+    style: e.style,
+    defaultClassName: "react-aria-ListBox",
+    values: Z
+  }), ee = null;
+  return W && e.renderEmptyState && (ee = /* @__PURE__ */ u.createElement("div", {
+    // eslint-disable-next-line
+    role: "option",
+    style: {
+      display: "contents"
+    }
+  }, e.renderEmptyState(Z))), /* @__PURE__ */ u.createElement(We, null, /* @__PURE__ */ u.createElement("div", {
+    ...N(e),
+    ...B(L, k, w?.collectionProps),
+    ...be,
+    ref: o,
+    slot: e.slot || void 0,
+    onScroll: e.onScroll,
+    "data-drop-target": V || void 0,
+    "data-empty": W || void 0,
+    "data-focused": X || void 0,
+    "data-focus-visible": Y || void 0,
+    "data-layout": e.layout || "stack",
+    "data-orientation": e.orientation || "vertical"
+  }, /* @__PURE__ */ u.createElement(ie, {
+    values: [
+      [
+        ue,
+        e
+      ],
+      [
+        U,
+        d
+      ],
+      [
+        H,
+        {
+          dragAndDropHooks: a,
+          dragState: S,
+          dropState: P
+        }
+      ],
+      [
+        we,
+        {
+          elementType: "div"
+        }
+      ],
+      [
+        se,
+        {
+          render: tt
+        }
+      ],
+      [
+        Ee,
+        {
+          name: "ListBoxSection",
+          render: $e
+        }
+      ]
+    ]
+  }, /* @__PURE__ */ u.createElement(y, {
+    collection: b,
+    scrollRef: o,
+    persistedKeys: Ze(s, a, P),
+    renderDropIndicator: ce(a, P)
+  })), ee, I));
+}
+function $e(t, e, o, l = "react-aria-ListBoxSection") {
+  let n = x(U), { dragAndDropHooks: r, dropState: i } = x(H), { CollectionBranch: a } = x(j), [c, f] = Ie();
+  var d;
+  let { headingProps: b, groupProps: s } = Je({
+    heading: f,
+    "aria-label": (d = t["aria-label"]) !== null && d !== void 0 ? d : void 0
+  }), h = O({
+    defaultClassName: l,
+    className: t.className,
+    style: t.style,
+    values: {}
+  });
+  return /* @__PURE__ */ u.createElement("section", {
+    ...N(t),
+    ...s,
+    ...h,
+    ref: e
+  }, /* @__PURE__ */ u.createElement(Me.Provider, {
+    value: {
+      ...b,
+      ref: c
+    }
+  }, /* @__PURE__ */ u.createElement(a, {
+    collection: n.collection,
+    parent: o,
+    renderDropIndicator: ce(r, i)
+  })));
+}
+const St = /* @__PURE__ */ De("section", $e), wt = /* @__PURE__ */ xe("item", function(e, o, l) {
+  let n = J(o), r = x(U), { dragAndDropHooks: i, dragState: a, dropState: c } = x(H), { optionProps: f, labelProps: d, descriptionProps: b, ...s } = Ge({
+    key: l.key,
+    "aria-label": e?.["aria-label"]
+  }, r, n), { hoverProps: h, isHovered: $ } = ne({
+    isDisabled: !s.allowsSelection && !s.hasAction,
+    onHoverStart: l.props.onHoverStart,
+    onHoverChange: l.props.onHoverChange,
+    onHoverEnd: l.props.onHoverEnd
+  }), m = null;
+  a && i && (m = i.useDraggableItem({
+    key: l.key
+  }, a));
+  let v = null;
+  c && i && (v = i.useDroppableItem({
+    target: {
+      type: "item",
+      key: l.key,
+      dropPosition: "on"
+    }
+  }, c, n));
+  let g = a && a.isDragging(l.key), p = O({
+    ...e,
+    id: void 0,
+    children: e.children,
+    defaultClassName: "react-aria-ListBoxItem",
+    values: {
+      ...s,
+      isHovered: $,
+      selectionMode: r.selectionManager.selectionMode,
+      selectionBehavior: r.selectionManager.selectionBehavior,
+      allowsDragging: !!a,
+      isDragging: g,
+      isDropTarget: v?.isDropTarget
+    }
+  });
+  q(() => {
+    !l.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.");
+  }, [
+    l.textValue
+  ]);
+  let K = e.href ? "a" : "div";
+  return /* @__PURE__ */ u.createElement(K, {
+    ...B(f, h, m?.dragProps, v?.dropProps),
+    ...p,
+    ref: n,
+    "data-allows-dragging": !!a || void 0,
+    "data-selected": s.isSelected || void 0,
+    "data-disabled": s.isDisabled || void 0,
+    "data-hovered": $ || void 0,
+    "data-focused": s.isFocused || void 0,
+    "data-focus-visible": s.isFocusVisible || void 0,
+    "data-pressed": s.isPressed || void 0,
+    "data-dragging": g || void 0,
+    "data-drop-target": v?.isDropTarget || void 0,
+    "data-selection-mode": r.selectionManager.selectionMode === "none" ? void 0 : r.selectionManager.selectionMode
+  }, /* @__PURE__ */ u.createElement(ie, {
+    values: [
+      [
+        Le,
+        {
+          slots: {
+            [Fe]: d,
+            label: d,
+            description: b
+          }
+        }
+      ]
+    ]
+  }, p.children));
+});
+function tt(t, e) {
+  e = J(e);
+  let { dragAndDropHooks: o, dropState: l } = x(H), { dropIndicatorProps: n, isHidden: r, isDropTarget: i } = o.useDropIndicator(t, l, e);
+  return r ? null : /* @__PURE__ */ u.createElement(lt, {
+    ...t,
+    dropIndicatorProps: n,
+    isDropTarget: i,
+    ref: e
+  });
+}
+function ot(t, e) {
+  let { dropIndicatorProps: o, isDropTarget: l, ...n } = t, r = O({
+    ...n,
+    defaultClassName: "react-aria-DropIndicator",
+    values: {
+      isDropTarget: l
+    }
+  });
+  return /* @__PURE__ */ u.createElement("div", {
+    ...o,
+    ...r,
+    // eslint-disable-next-line
+    role: "option",
+    ref: e,
+    "data-drop-target": l || void 0
+  });
+}
+const lt = /* @__PURE__ */ G(ot);
+export {
+  Qe as $,
+  ue as a,
+  U as b,
+  Kt as c,
+  wt as d,
+  St as e,
+  Q as f,
+  je as g,
+  le as h
+};
+//# sourceMappingURL=ListBox-0C7L4Sat.es.js.map