@commercetools/nimbus 1.0.1 → 2.0.1-rc1

package/dist/chunks/tag-group-pJFnuRoJ.es.js

@@ -0,0 +1,554 @@
+import { jsx as v, jsxs as Le, Fragment as ke } from "react/jsx-runtime";
+import { createSlotRecipeContext as he } from "@chakra-ui/react";
+import { $ as Te } from "./Button-CrgZzRm9.es.js";
+import { h as w, k as we, l as Fe } from "./SelectionManager-2q7N4psD.es.js";
+import { a as F, d as R, $ as T, b as Re } from "./utils-Cyja2WdR.es.js";
+import { $ as Se } from "./Label-qcXzazih.es.js";
+import { a as D } from "./ListBox-DAcVFwWW.es.js";
+import { a as Ae } from "./RSPContexts-DV4cFLUV.es.js";
+import { a as ze, $ as Me } from "./SelectionIndicator-DopimabS.es.js";
+import { $ as Ne } from "./Text-DOcU1ycg.es.js";
+import { $ as Ve, e as je, g as Ge, f as Ke } from "./CollectionBuilder-Wz-mnWjQ.es.js";
+import { a as x, $ as Oe } from "./mergeProps-CzyOU2NE.es.js";
+import { $ as g } from "./filterDOMProps-BSVCO5jK.es.js";
+import { $ as Ie } from "./useObjectRef-CaJ5pgjX.es.js";
+import d, { useState as He, useRef as S, useEffect as A, forwardRef as z, useContext as P, createContext as M } from "react";
+import { $ as N } from "./useFocusRing-DRIG5NVg.es.js";
+import { $ as Ue } from "./useHover-9Xdm5U9d.es.js";
+import { $ as We, a as _e } from "./useGridListItem-Cosrmt8g.es.js";
+import { $ as qe } from "./ListKeyboardDelegate-D-k0fIME.es.js";
+import { $ as Je } from "./useField-B0j4t47V.es.js";
+import { $ as Qe } from "./useFocusWithin-CfiDXiVK.es.js";
+import { $ as Ze } from "./context-R4YUlO9Y.es.js";
+import { a as Xe } from "./openLink-DT8XzqFh.es.js";
+import { b as Ye } from "./scrollIntoView-DTfS0nWq.es.js";
+import { f as eo } from "./useFocusVisible-BIPjFmFE.es.js";
+import { $ as oo } from "./useFocusable-D1mzTlxa.es.js";
+import { $ as ro } from "./useLocalizedStringFormatter-BRnRyxJp.es.js";
+import { $ as to, a as ao } from "./useListState-CUO8Wibt.es.js";
+import { Close as uo } from "@commercetools/nimbus-icons";
+import { I as io } from "./icon-button-9Ni8-hO7.es.js";
+const V = /* @__PURE__ */ new WeakMap();
+function so(e, o, r) {
+  let { direction: t } = Ze(), s = e.keyboardDelegate || new qe({
+    collection: o.collection,
+    ref: r,
+    orientation: "horizontal",
+    direction: t,
+    disabledKeys: o.disabledKeys,
+    disabledBehavior: o.selectionManager.disabledBehavior
+  }), { labelProps: i, fieldProps: a, descriptionProps: f, errorMessageProps: c } = Je({
+    ...e,
+    labelElementType: "span"
+  }), { gridProps: p } = We({
+    ...e,
+    ...a,
+    keyboardDelegate: s,
+    shouldFocusWrap: !0,
+    linkBehavior: "override",
+    keyboardNavigationBehavior: "tab"
+  }, o, r), [u, b] = He(!1), { focusWithinProps: l } = Qe({
+    onFocusWithinChange: b
+  }), $ = g(e), n = S(o.collection.size);
+  return A(() => {
+    r.current && n.current > 0 && o.collection.size === 0 && u && r.current.focus(), n.current = o.collection.size;
+  }, [
+    o.collection.size,
+    u,
+    r
+  ]), V.set(o, {
+    onRemove: e.onRemove
+  }), {
+    gridProps: x(p, $, {
+      role: o.collection.size ? "grid" : "group",
+      "aria-atomic": !1,
+      "aria-relevant": "additions",
+      "aria-live": u ? "polite" : "off",
+      ...l,
+      ...a
+    }),
+    labelProps: i,
+    descriptionProps: f,
+    errorMessageProps: c
+  };
+}
+var j = {};
+j = {
+  removeButtonLabel: "إزالة",
+  removeDescription: "اضغط على مفتاح DELETE لإزالة علامة."
+};
+var G = {};
+G = {
+  removeButtonLabel: "Премахване",
+  removeDescription: "Натиснете Delete, за да премахнете маркера."
+};
+var K = {};
+K = {
+  removeButtonLabel: "Odebrat",
+  removeDescription: "Stisknutím klávesy Delete odeberete značku."
+};
+var O = {};
+O = {
+  removeButtonLabel: "Fjern",
+  removeDescription: "Tryk på Slet for at fjerne tag."
+};
+var I = {};
+I = {
+  removeButtonLabel: "Entfernen",
+  removeDescription: "Auf „Löschen“ drücken, um das Tag zu entfernen."
+};
+var H = {};
+H = {
+  removeButtonLabel: "Κατάργηση",
+  removeDescription: "Πατήστε Διαγραφή για να καταργήσετε την ετικέτα."
+};
+var U = {};
+U = {
+  removeDescription: "Press Delete to remove tag.",
+  removeButtonLabel: "Remove"
+};
+var W = {};
+W = {
+  removeButtonLabel: "Quitar",
+  removeDescription: "Pulse Eliminar para quitar la etiqueta."
+};
+var _ = {};
+_ = {
+  removeButtonLabel: "Eemalda",
+  removeDescription: "Sildi eemaldamiseks vajutage kustutusklahvi Delete."
+};
+var q = {};
+q = {
+  removeButtonLabel: "Poista",
+  removeDescription: "Poista tunniste painamalla Poista-painiketta."
+};
+var J = {};
+J = {
+  removeButtonLabel: "Supprimer",
+  removeDescription: "Appuyez sur Supprimer pour supprimer l’étiquette."
+};
+var Q = {};
+Q = {
+  removeButtonLabel: "הסר",
+  removeDescription: "לחץ על מחק כדי להסיר תג."
+};
+var Z = {};
+Z = {
+  removeButtonLabel: "Ukloni",
+  removeDescription: "Pritisnite Delete za uklanjanje oznake."
+};
+var X = {};
+X = {
+  removeButtonLabel: "Eltávolítás",
+  removeDescription: "Nyomja meg a Delete billentyűt a címke eltávolításához."
+};
+var Y = {};
+Y = {
+  removeButtonLabel: "Rimuovi",
+  removeDescription: "Premi Elimina per rimuovere il tag."
+};
+var ee = {};
+ee = {
+  removeButtonLabel: "削除",
+  removeDescription: "タグを削除するには、Delete キーを押します。"
+};
+var oe = {};
+oe = {
+  removeButtonLabel: "제거",
+  removeDescription: "태그를 제거하려면 Delete 키를 누르십시오."
+};
+var re = {};
+re = {
+  removeButtonLabel: "Pašalinti",
+  removeDescription: "Norėdami pašalinti žymą, paspauskite „Delete“ klavišą."
+};
+var te = {};
+te = {
+  removeButtonLabel: "Noņemt",
+  removeDescription: "Nospiediet Delete [Dzēst], lai noņemtu tagu."
+};
+var ae = {};
+ae = {
+  removeButtonLabel: "Fjern",
+  removeDescription: "Trykk på Slett for å fjerne taggen."
+};
+var ue = {};
+ue = {
+  removeButtonLabel: "Verwijderen",
+  removeDescription: "Druk op Verwijderen om de tag te verwijderen."
+};
+var ie = {};
+ie = {
+  removeButtonLabel: "Usuń",
+  removeDescription: "Naciśnij Usuń, aby usunąć znacznik."
+};
+var se = {};
+se = {
+  removeButtonLabel: "Remover",
+  removeDescription: "Pressione Delete para remover a tag."
+};
+var le = {};
+le = {
+  removeButtonLabel: "Eliminar",
+  removeDescription: "Prima Delete para eliminar a tag."
+};
+var ne = {};
+ne = {
+  removeButtonLabel: "Îndepărtaţi",
+  removeDescription: "Apăsați pe Delete (Ștergere) pentru a elimina eticheta."
+};
+var de = {};
+de = {
+  removeButtonLabel: "Удалить",
+  removeDescription: "Нажмите DELETE, чтобы удалить тег."
+};
+var ce = {};
+ce = {
+  removeButtonLabel: "Odstrániť",
+  removeDescription: "Ak chcete odstrániť značku, stlačte kláves Delete."
+};
+var fe = {};
+fe = {
+  removeButtonLabel: "Odstrani",
+  removeDescription: "Pritisnite Delete, da odstranite oznako."
+};
+var pe = {};
+pe = {
+  removeButtonLabel: "Ukloni",
+  removeDescription: "Pritisnite Obriši da biste uklonili oznaku."
+};
+var be = {};
+be = {
+  removeButtonLabel: "Ta bort",
+  removeDescription: "Tryck på Radera för att ta bort taggen."
+};
+var $e = {};
+$e = {
+  removeButtonLabel: "Kaldır",
+  removeDescription: "Etiketi kaldırmak için Sil tuşuna basın."
+};
+var me = {};
+me = {
+  removeButtonLabel: "Вилучити",
+  removeDescription: "Натисніть Delete, щоб вилучити тег."
+};
+var ve = {};
+ve = {
+  removeButtonLabel: "删除",
+  removeDescription: "按下“删除”以删除标记。"
+};
+var xe = {};
+xe = {
+  removeButtonLabel: "移除",
+  removeDescription: "按 Delete 鍵以移除標記。"
+};
+var De = {};
+De = {
+  "ar-AE": j,
+  "bg-BG": G,
+  "cs-CZ": K,
+  "da-DK": O,
+  "de-DE": I,
+  "el-GR": H,
+  "en-US": U,
+  "es-ES": W,
+  "et-EE": _,
+  "fi-FI": q,
+  "fr-FR": J,
+  "he-IL": Q,
+  "hr-HR": Z,
+  "hu-HU": X,
+  "it-IT": Y,
+  "ja-JP": ee,
+  "ko-KR": oe,
+  "lt-LT": re,
+  "lv-LV": te,
+  "nb-NO": ae,
+  "nl-NL": ue,
+  "pl-PL": ie,
+  "pt-BR": se,
+  "pt-PT": le,
+  "ro-RO": ne,
+  "ru-RU": de,
+  "sk-SK": ce,
+  "sl-SI": fe,
+  "sr-SP": pe,
+  "sv-SE": be,
+  "tr-TR": $e,
+  "uk-UA": me,
+  "zh-CN": ve,
+  "zh-TW": xe
+};
+function lo(e) {
+  return e && e.__esModule ? e.default : e;
+}
+function no(e, o, r) {
+  let { item: t } = e, s = ro(lo(De), "@react-aria/tag"), i = Oe(), { onRemove: a } = V.get(o) || {}, { rowProps: f, gridCellProps: c, ...p } = _e({
+    node: t
+  }, o, r), { descriptionProps: u, ...b } = p, l = o.disabledKeys.has(t.key) || t.props.isDisabled, $ = (h) => {
+    if (h.key === "Delete" || h.key === "Backspace") {
+      if (l) return;
+      h.preventDefault(), o.selectionManager.isSelected(t.key) ? a?.(new Set(o.selectionManager.selectedKeys)) : a?.(/* @__PURE__ */ new Set([
+        t.key
+      ]));
+    }
+  }, n = eo();
+  n === "virtual" && typeof window < "u" && "ontouchstart" in window && (n = "pointer");
+  let C = a && (n === "keyboard" || n === "virtual") ? s.format("removeDescription") : "", E = Ye(C), y = t.key === o.selectionManager.focusedKey, L = o.selectionManager.focusedKey != null, m = -1;
+  !l && (y || !L) && (m = 0);
+  let B = g(t.props), k = Xe(t.props), { focusableProps: ye } = oo({
+    isDisabled: l
+  }, r);
+  return {
+    removeButtonProps: {
+      "aria-label": s.format("removeButtonLabel"),
+      "aria-labelledby": `${i} ${f.id}`,
+      isDisabled: l,
+      id: i,
+      onPress: () => a ? a(/* @__PURE__ */ new Set([
+        t.key
+      ])) : null
+    },
+    rowProps: x(ye, f, B, k, {
+      tabIndex: m,
+      onKeyDown: a ? $ : void 0,
+      "aria-describedby": E["aria-describedby"]
+    }),
+    gridCellProps: x(c, {
+      "aria-errormessage": e["aria-errormessage"],
+      "aria-label": e["aria-label"]
+    }),
+    ...b,
+    allowsRemoving: !!a
+  };
+}
+const co = /* @__PURE__ */ M(null), ge = /* @__PURE__ */ M(null), fo = /* @__PURE__ */ z(function(o, r) {
+  return [o, r] = T(o, r, co), /* @__PURE__ */ d.createElement(D.Provider, {
+    value: null
+  }, /* @__PURE__ */ d.createElement(Ke, {
+    content: o.children
+  }, (t) => /* @__PURE__ */ d.createElement(po, {
+    props: o,
+    forwardedRef: r,
+    collection: t
+  })));
+});
+function po({ props: e, forwardedRef: o, collection: r }) {
+  let t = S(null), { id: s, ...i } = e;
+  [i, t] = T(i, t, Ae);
+  let { filter: a, shouldUseVirtualFocus: f, ...c } = i, [p, u] = Re(!e["aria-label"] && !e["aria-labelledby"]), b = to({
+    ...c,
+    children: void 0,
+    collection: r
+  }), l = ao(b, a), $ = g(i, {
+    global: !0
+  }), n = Object.fromEntries(Object.entries($).map(([B, k]) => [
+    B,
+    B === "id" ? k : void 0
+  ])), { gridProps: C, labelProps: E, descriptionProps: y, errorMessageProps: L } = so({
+    ...c,
+    ...n,
+    label: u
+  }, l, t);
+  var m;
+  return /* @__PURE__ */ d.createElement("div", {
+    ...$,
+    id: s,
+    ref: o,
+    slot: e.slot || void 0,
+    className: (m = e.className) !== null && m !== void 0 ? m : "react-aria-TagGroup",
+    style: e.style
+  }, /* @__PURE__ */ d.createElement(R, {
+    values: [
+      [
+        Se,
+        {
+          ...E,
+          elementType: "span",
+          ref: p
+        }
+      ],
+      [
+        ge,
+        {
+          ...C,
+          ref: t
+        }
+      ],
+      [
+        D,
+        l
+      ],
+      [
+        Ne,
+        {
+          slots: {
+            description: y,
+            errorMessage: L
+          }
+        }
+      ]
+    ]
+  }, e.children));
+}
+const bo = /* @__PURE__ */ z(function(o, r) {
+  return P(D) ? /* @__PURE__ */ d.createElement($o, {
+    props: o,
+    forwardedRef: r
+  }) : /* @__PURE__ */ d.createElement(Ge, o);
+});
+function $o({ props: e, forwardedRef: o }) {
+  let r = P(D), { CollectionRoot: t } = P(w), [s, i] = T({}, o, ge), { focusProps: a, isFocused: f, isFocusVisible: c } = N(), p = {
+    isEmpty: r.collection.size === 0,
+    isFocused: f,
+    isFocusVisible: c,
+    state: r
+  }, u = F({
+    className: e.className,
+    style: e.style,
+    defaultClassName: "react-aria-TagList",
+    values: p
+  }), b = Fe(r.selectionManager.focusedKey), l = g(e, {
+    global: !0
+  });
+  return /* @__PURE__ */ d.createElement("div", {
+    ...x(l, u, s, a),
+    ref: i,
+    "data-empty": r.collection.size === 0 || void 0,
+    "data-focused": f || void 0,
+    "data-focus-visible": c || void 0
+  }, /* @__PURE__ */ d.createElement(Me, null, r.collection.size === 0 && e.renderEmptyState ? e.renderEmptyState(p) : /* @__PURE__ */ d.createElement(t, {
+    collection: r.collection,
+    persistedKeys: b
+  })));
+}
+const mo = /* @__PURE__ */ Ve(je, (e, o, r) => {
+  let t = P(D), s = Ie(o), { focusProps: i, isFocusVisible: a } = N({
+    within: !1
+  }), { rowProps: f, gridCellProps: c, removeButtonProps: p, ...u } = no({
+    item: r
+  }, t, s), { hoverProps: b, isHovered: l } = Ue({
+    isDisabled: !u.allowsSelection,
+    onHoverStart: r.props.onHoverStart,
+    onHoverChange: r.props.onHoverChange,
+    onHoverEnd: r.props.onHoverEnd
+  }), $ = F({
+    ...e,
+    id: void 0,
+    children: r.rendered,
+    defaultClassName: "react-aria-Tag",
+    values: {
+      ...u,
+      isFocusVisible: a,
+      isHovered: l,
+      selectionMode: t.selectionManager.selectionMode,
+      selectionBehavior: t.selectionManager.selectionBehavior
+    }
+  });
+  A(() => {
+    !r.textValue && process.env.NODE_ENV !== "production" && console.warn("A `textValue` prop is required for <Tag> elements with non-plain text children for accessibility.");
+  }, [
+    r.textValue
+  ]);
+  let n = g(e, {
+    global: !0
+  });
+  return delete n.id, delete n.onClick, /* @__PURE__ */ d.createElement("div", {
+    ref: s,
+    ...x(n, $, f, i, b),
+    "data-selected": u.isSelected || void 0,
+    "data-disabled": u.isDisabled || void 0,
+    "data-hovered": l || void 0,
+    "data-focused": u.isFocused || void 0,
+    "data-focus-visible": a || void 0,
+    "data-pressed": u.isPressed || void 0,
+    "data-allows-removing": u.allowsRemoving || void 0,
+    "data-selection-mode": t.selectionManager.selectionMode === "none" ? void 0 : t.selectionManager.selectionMode
+  }, /* @__PURE__ */ d.createElement("div", {
+    ...c,
+    style: {
+      display: "contents"
+    }
+  }, /* @__PURE__ */ d.createElement(R, {
+    values: [
+      [
+        Te,
+        {
+          slots: {
+            remove: p
+          }
+        }
+      ],
+      [
+        w,
+        we
+      ],
+      [
+        ze,
+        {
+          isSelected: u.isSelected
+        }
+      ]
+    ]
+  }, $.children)));
+}), { withProvider: vo, withContext: Be } = /* @__PURE__ */ he({
+  key: "taggroup"
+}), xo = /* @__PURE__ */ vo(fo, "root"), Do = (e) => {
+  const { ref: o, ...r } = e, t = Be(
+    bo,
+    "tagList"
+  );
+  return /* @__PURE__ */ v(t, { ...r, ref: o });
+}, go = /* @__PURE__ */ Be(mo, "tag"), Pe = ({
+  children: e,
+  onRemove: o,
+  selectionMode: r,
+  ref: t,
+  ...s
+}) => (o && (r === "multiple" || r === "single") && console.warn(
+  'Nimbus TagGroup: when "selectionMode" is "single" or "mutiple", Tags cannot be removed'
+), /* @__PURE__ */ v(
+  xo,
+  {
+    ref: t,
+    onRemove: o,
+    selectionMode: r,
+    ...s,
+    children: e
+  }
+));
+Pe.displayName = "TagGroup.Root";
+const Ce = ({
+  children: e,
+  ref: o,
+  ...r
+}) => /* @__PURE__ */ v(Do, { ref: o, ...r, children: e });
+Ce.displayName = "TagGroup.TagList";
+const Ee = ({
+  children: e,
+  ref: o,
+  ...r
+}) => /* @__PURE__ */ v(go, { ref: o, textValue: typeof e == "string" ? e : void 0, ...r, children: ({ allowsRemoving: s, isSelected: i, selectionMode: a }) => /* @__PURE__ */ Le(ke, { children: [
+  e,
+  s && a !== "multiple" && a !== "single" && // @ts-expect-error aria props are handled by ButtonContext internally in IconButton
+  /* @__PURE__ */ v(
+    io,
+    {
+      size: "2xs",
+      variant: i ? "solid" : "ghost",
+      slot: "remove",
+      tone: i ? void 0 : "neutral",
+      children: /* @__PURE__ */ v(uo, {})
+    }
+  )
+] }) });
+Ee.displayName = "TagGroup.Tag";
+const Zo = {
+  Root: Pe,
+  TagList: Ce,
+  Tag: Ee
+};
+export {
+  Zo as T
+};
+//# sourceMappingURL=tag-group-pJFnuRoJ.es.js.map