@commercetools/nimbus 0.0.12-rc1 → 0.0.13-rc2

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

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