@commercetools/nimbus 0.0.11 → 0.0.12-rc2

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

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