@commercetools/nimbus 0.0.0-canary-20260127154408 → 0.0.0-canary-20260128081211

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

@@ -0,0 +1,613 @@
+import { jsx as v, jsxs as ke, Fragment as Te } from "react/jsx-runtime";
+import { Close as he } from "@commercetools/nimbus-icons";
+import { createSlotRecipeContext as Re } from "@chakra-ui/react";
+import { $ as Se } from "./Button-C9AKe3Kt.es.js";
+import { a as S, e as w, $ as R, b as we } from "./utils-CrjF8U_E.es.js";
+import { h as F, j as Fe, k as Ae } from "./SelectionManager-GNsyMc-q.es.js";
+import { $ as Me } from "./Label-BPLFvUwR.es.js";
+import { a as D } from "./ListBox-Bp_3E18l.es.js";
+import { b as ze } from "./RSPContexts-DLgb84PF.es.js";
+import { a as Ge, $ as Ne } from "./SelectionIndicator-B27AsfqE.es.js";
+import { $ as je } from "./Text-DOcU1ycg.es.js";
+import { $ as Ve, e as Ke, g as Oe, f as _e } from "./CollectionBuilder-CTjJUDzO.es.js";
+import { $ as x, a as Ie } from "./mergeProps-B-cqsBhL.es.js";
+import { $ as B } from "./filterDOMProps-Cxz9cAAv.es.js";
+import { $ as He } from "./useObjectRef-CaJ5pgjX.es.js";
+import c, { useState as Ue, useRef as A, useEffect as M, createContext as z, useContext as C, forwardRef as G } from "react";
+import { $ as N } from "./useFocusRing-CZQUsztf.es.js";
+import { $ as We } from "./useHover-BiPYlZr_.es.js";
+import { $ as qe, a as Je } from "./useGridListItem-CZn3RZIy.es.js";
+import { c as Qe } from "./Header-BQ99pNEi.es.js";
+import { $ as Ze } from "./useField-BxLfE_kx.es.js";
+import { $ as Xe } from "./useFocusWithin-CdBYoNiQ.es.js";
+import { $ as Ye } from "./context-BfHy4NgG.es.js";
+import { k as eo } from "./openLink-m90p5mer.es.js";
+import { a as oo } from "./scrollIntoView-Btu7DgIo.es.js";
+import { f as ro } from "./useFocusVisible-_CKiSck5.es.js";
+import { $ as to } from "./useFocusable-C4Re42UX.es.js";
+import { $ as ao } from "./useLocalizedStringFormatter-CYDf7GZk.es.js";
+import { a as uo, $ as so } from "./useListState-BxWOm_-s.es.js";
+import { n as g, u as io } from "./normalize-messages-BN9BAFXe.es.js";
+import { I as lo } from "./icon-button-YqGrVmHT.es.js";
+const j = /* @__PURE__ */ new WeakMap();
+function no(e, o, r) {
+  let { direction: t } = Ye(), i = e.keyboardDelegate || new Qe({
+    collection: o.collection,
+    ref: r,
+    orientation: "horizontal",
+    direction: t,
+    disabledKeys: o.disabledKeys,
+    disabledBehavior: o.selectionManager.disabledBehavior
+  }), { labelProps: s, fieldProps: a, descriptionProps: n, errorMessageProps: f } = Ze({
+    ...e,
+    labelElementType: "span"
+  }), { gridProps: p } = qe({
+    ...e,
+    ...a,
+    keyboardDelegate: i,
+    shouldFocusWrap: !0,
+    linkBehavior: "override",
+    keyboardNavigationBehavior: "tab"
+  }, o, r), [u, b] = Ue(!1), { focusWithinProps: l } = Xe({
+    onFocusWithinChange: b
+  }), m = B(e), d = A(o.collection.size);
+  return M(() => {
+    r.current && d.current > 0 && o.collection.size === 0 && u && r.current.focus(), d.current = o.collection.size;
+  }, [
+    o.collection.size,
+    u,
+    r
+  ]), j.set(o, {
+    onRemove: e.onRemove
+  }), {
+    gridProps: x(p, m, {
+      role: o.collection.size ? "grid" : "group",
+      "aria-atomic": !1,
+      "aria-relevant": "additions",
+      "aria-live": u ? "polite" : "off",
+      ...l,
+      ...a
+    }),
+    labelProps: s,
+    descriptionProps: n,
+    errorMessageProps: f
+  };
+}
+var V = {};
+V = {
+  removeButtonLabel: "إزالة",
+  removeDescription: "اضغط على مفتاح DELETE لإزالة علامة."
+};
+var K = {};
+K = {
+  removeButtonLabel: "Премахване",
+  removeDescription: "Натиснете Delete, за да премахнете маркера."
+};
+var O = {};
+O = {
+  removeButtonLabel: "Odebrat",
+  removeDescription: "Stisknutím klávesy Delete odeberete značku."
+};
+var _ = {};
+_ = {
+  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 q = {};
+q = {
+  removeButtonLabel: "Eemalda",
+  removeDescription: "Sildi eemaldamiseks vajutage kustutusklahvi Delete."
+};
+var J = {};
+J = {
+  removeButtonLabel: "Poista",
+  removeDescription: "Poista tunniste painamalla Poista-painiketta."
+};
+var Q = {};
+Q = {
+  removeButtonLabel: "Supprimer",
+  removeDescription: "Appuyez sur Supprimer pour supprimer l’étiquette."
+};
+var Z = {};
+Z = {
+  removeButtonLabel: "הסר",
+  removeDescription: "לחץ על מחק כדי להסיר תג."
+};
+var X = {};
+X = {
+  removeButtonLabel: "Ukloni",
+  removeDescription: "Pritisnite Delete za uklanjanje oznake."
+};
+var Y = {};
+Y = {
+  removeButtonLabel: "Eltávolítás",
+  removeDescription: "Nyomja meg a Delete billentyűt a címke eltávolításához."
+};
+var ee = {};
+ee = {
+  removeButtonLabel: "Rimuovi",
+  removeDescription: "Premi Elimina per rimuovere il tag."
+};
+var oe = {};
+oe = {
+  removeButtonLabel: "削除",
+  removeDescription: "タグを削除するには、Delete キーを押します。"
+};
+var re = {};
+re = {
+  removeButtonLabel: "제거",
+  removeDescription: "태그를 제거하려면 Delete 키를 누르십시오."
+};
+var te = {};
+te = {
+  removeButtonLabel: "Pašalinti",
+  removeDescription: "Norėdami pašalinti žymą, paspauskite „Delete“ klavišą."
+};
+var ae = {};
+ae = {
+  removeButtonLabel: "Noņemt",
+  removeDescription: "Nospiediet Delete [Dzēst], lai noņemtu tagu."
+};
+var ue = {};
+ue = {
+  removeButtonLabel: "Fjern",
+  removeDescription: "Trykk på Slett for å fjerne taggen."
+};
+var se = {};
+se = {
+  removeButtonLabel: "Verwijderen",
+  removeDescription: "Druk op Verwijderen om de tag te verwijderen."
+};
+var ie = {};
+ie = {
+  removeButtonLabel: "Usuń",
+  removeDescription: "Naciśnij Usuń, aby usunąć znacznik."
+};
+var le = {};
+le = {
+  removeButtonLabel: "Remover",
+  removeDescription: "Pressione Delete para remover a tag."
+};
+var ne = {};
+ne = {
+  removeButtonLabel: "Eliminar",
+  removeDescription: "Prima Delete para eliminar a tag."
+};
+var de = {};
+de = {
+  removeButtonLabel: "Îndepărtaţi",
+  removeDescription: "Apăsați pe Delete (Ștergere) pentru a elimina eticheta."
+};
+var ce = {};
+ce = {
+  removeButtonLabel: "Удалить",
+  removeDescription: "Нажмите DELETE, чтобы удалить тег."
+};
+var fe = {};
+fe = {
+  removeButtonLabel: "Odstrániť",
+  removeDescription: "Ak chcete odstrániť značku, stlačte kláves Delete."
+};
+var pe = {};
+pe = {
+  removeButtonLabel: "Odstrani",
+  removeDescription: "Pritisnite Delete, da odstranite oznako."
+};
+var be = {};
+be = {
+  removeButtonLabel: "Ukloni",
+  removeDescription: "Pritisnite Obriši da biste uklonili oznaku."
+};
+var me = {};
+me = {
+  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 ve = {};
+ve = {
+  removeButtonLabel: "Вилучити",
+  removeDescription: "Натисніть Delete, щоб вилучити тег."
+};
+var ge = {};
+ge = {
+  removeButtonLabel: "删除",
+  removeDescription: "按下“删除”以删除标记。"
+};
+var xe = {};
+xe = {
+  removeButtonLabel: "移除",
+  removeDescription: "按 Delete 鍵以移除標記。"
+};
+var De = {};
+De = {
+  "ar-AE": V,
+  "bg-BG": K,
+  "cs-CZ": O,
+  "da-DK": _,
+  "de-DE": I,
+  "el-GR": H,
+  "en-US": U,
+  "es-ES": W,
+  "et-EE": q,
+  "fi-FI": J,
+  "fr-FR": Q,
+  "he-IL": Z,
+  "hr-HR": X,
+  "hu-HU": Y,
+  "it-IT": ee,
+  "ja-JP": oe,
+  "ko-KR": re,
+  "lt-LT": te,
+  "lv-LV": ae,
+  "nb-NO": ue,
+  "nl-NL": se,
+  "pl-PL": ie,
+  "pt-BR": le,
+  "pt-PT": ne,
+  "ro-RO": de,
+  "ru-RU": ce,
+  "sk-SK": fe,
+  "sl-SI": pe,
+  "sr-SP": be,
+  "sv-SE": me,
+  "tr-TR": $e,
+  "uk-UA": ve,
+  "zh-CN": ge,
+  "zh-TW": xe
+};
+function co(e) {
+  return e && e.__esModule ? e.default : e;
+}
+function fo(e, o, r) {
+  let { item: t } = e, i = ao(co(De), "@react-aria/tag"), s = Ie(), { onRemove: a } = j.get(o) || {}, { rowProps: n, gridCellProps: f, ...p } = Je({
+    node: t
+  }, o, r), { descriptionProps: u, ...b } = p, l = o.disabledKeys.has(t.key) || t.props.isDisabled, m = (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
+      ]));
+    }
+  }, d = ro();
+  d === "virtual" && typeof window < "u" && "ontouchstart" in window && (d = "pointer");
+  let E = a && (d === "keyboard" || d === "virtual") ? i.format("removeDescription") : "", y = oo(E), L = t.key === o.selectionManager.focusedKey, k = o.selectionManager.focusedKey != null, $ = -1;
+  !l && (L || !k) && ($ = 0);
+  let P = B(t.props), T = eo(t.props), { focusableProps: Le } = to({
+    isDisabled: l
+  }, r);
+  return {
+    removeButtonProps: {
+      "aria-label": i.format("removeButtonLabel"),
+      "aria-labelledby": `${s} ${n.id}`,
+      isDisabled: l,
+      id: s,
+      onPress: () => a ? a(/* @__PURE__ */ new Set([
+        t.key
+      ])) : null
+    },
+    rowProps: x(Le, n, P, T, {
+      tabIndex: $,
+      onKeyDown: a ? m : void 0,
+      "aria-describedby": y["aria-describedby"]
+    }),
+    gridCellProps: x(f, {
+      "aria-errormessage": e["aria-errormessage"],
+      "aria-label": e["aria-label"]
+    }),
+    ...b,
+    allowsRemoving: !!a
+  };
+}
+const po = /* @__PURE__ */ z(null), Be = /* @__PURE__ */ z(null), bo = /* @__PURE__ */ G(function(o, r) {
+  return [o, r] = R(o, r, po), /* @__PURE__ */ c.createElement(D.Provider, {
+    value: null
+  }, /* @__PURE__ */ c.createElement(_e, {
+    content: o.children
+  }, (t) => /* @__PURE__ */ c.createElement(mo, {
+    props: o,
+    forwardedRef: r,
+    collection: t
+  })));
+});
+function mo({ props: e, forwardedRef: o, collection: r }) {
+  let t = A(null), { id: i, ...s } = e;
+  [s, t] = R(s, t, ze);
+  let { filter: a, shouldUseVirtualFocus: n, ...f } = s, [p, u] = we(!e["aria-label"] && !e["aria-labelledby"]), b = uo({
+    ...f,
+    children: void 0,
+    collection: r
+  }), l = so(b, a), m = B(s, {
+    global: !0
+  }), d = Object.fromEntries(Object.entries(m).map(([P, T]) => [
+    P,
+    P === "id" ? T : void 0
+  ])), { gridProps: E, labelProps: y, descriptionProps: L, errorMessageProps: k } = no({
+    ...f,
+    ...d,
+    label: u
+  }, l, t);
+  var $;
+  return /* @__PURE__ */ c.createElement("div", {
+    ...m,
+    id: i,
+    ref: o,
+    slot: e.slot || void 0,
+    className: ($ = e.className) !== null && $ !== void 0 ? $ : "react-aria-TagGroup",
+    style: e.style
+  }, /* @__PURE__ */ c.createElement(w, {
+    values: [
+      [
+        Me,
+        {
+          ...y,
+          elementType: "span",
+          ref: p
+        }
+      ],
+      [
+        Be,
+        {
+          ...E,
+          ref: t
+        }
+      ],
+      [
+        D,
+        l
+      ],
+      [
+        je,
+        {
+          slots: {
+            description: L,
+            errorMessage: k
+          }
+        }
+      ]
+    ]
+  }, e.children));
+}
+const $o = /* @__PURE__ */ G(function(o, r) {
+  return C(D) ? /* @__PURE__ */ c.createElement(vo, {
+    props: o,
+    forwardedRef: r
+  }) : /* @__PURE__ */ c.createElement(Oe, o);
+});
+function vo({ props: e, forwardedRef: o }) {
+  let r = C(D), { CollectionRoot: t } = C(F), [i, s] = R({}, o, Be), { focusProps: a, isFocused: n, isFocusVisible: f } = N(), p = {
+    isEmpty: r.collection.size === 0,
+    isFocused: n,
+    isFocusVisible: f,
+    state: r
+  }, u = S({
+    className: e.className,
+    style: e.style,
+    defaultClassName: "react-aria-TagList",
+    values: p
+  }), b = Ae(r.selectionManager.focusedKey), l = B(e, {
+    global: !0
+  });
+  return /* @__PURE__ */ c.createElement("div", {
+    ...x(l, u, i, a),
+    ref: s,
+    "data-empty": r.collection.size === 0 || void 0,
+    "data-focused": n || void 0,
+    "data-focus-visible": f || void 0
+  }, /* @__PURE__ */ c.createElement(Ne, null, r.collection.size === 0 && e.renderEmptyState ? e.renderEmptyState(p) : /* @__PURE__ */ c.createElement(t, {
+    collection: r.collection,
+    persistedKeys: b
+  })));
+}
+const go = /* @__PURE__ */ Ve(Ke, (e, o, r) => {
+  let t = C(D), i = He(o), { focusProps: s, isFocusVisible: a } = N({
+    within: !1
+  }), { rowProps: n, gridCellProps: f, removeButtonProps: p, ...u } = fo({
+    item: r
+  }, t, i), { hoverProps: b, isHovered: l } = We({
+    isDisabled: !u.allowsSelection,
+    onHoverStart: r.props.onHoverStart,
+    onHoverChange: r.props.onHoverChange,
+    onHoverEnd: r.props.onHoverEnd
+  }), m = S({
+    ...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
+    }
+  });
+  M(() => {
+    !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 d = B(e, {
+    global: !0
+  });
+  return delete d.id, delete d.onClick, /* @__PURE__ */ c.createElement("div", {
+    ref: i,
+    ...x(d, m, n, s, 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__ */ c.createElement("div", {
+    ...f,
+    style: {
+      display: "contents"
+    }
+  }, /* @__PURE__ */ c.createElement(w, {
+    values: [
+      [
+        Se,
+        {
+          slots: {
+            remove: p
+          }
+        }
+      ],
+      [
+        F,
+        Fe
+      ],
+      [
+        Ge,
+        {
+          isSelected: u.isSelected
+        }
+      ]
+    ]
+  }, m.children)));
+}), { withProvider: xo, withContext: Pe } = /* @__PURE__ */ Re({
+  key: "taggroup"
+}), Do = /* @__PURE__ */ xo(bo, "root"), Bo = (e) => {
+  const { ref: o, ...r } = e, t = Pe(
+    $o,
+    "tagList"
+  );
+  return /* @__PURE__ */ v(t, { ...r, ref: o });
+}, Po = /* @__PURE__ */ Pe(go, "tag"), Ce = ({
+  children: e,
+  onRemove: o,
+  selectionMode: r,
+  ref: t,
+  ...i
+}) => (o && (r === "multiple" || r === "single") && console.warn(
+  'Nimbus TagGroup: when "selectionMode" is "single" or "mutiple", Tags cannot be removed'
+), /* @__PURE__ */ v(
+  Do,
+  {
+    ref: t,
+    onRemove: o,
+    selectionMode: r,
+    ...i,
+    children: e
+  }
+));
+Ce.displayName = "TagGroup.Root";
+const Ee = ({
+  children: e,
+  ref: o,
+  ...r
+}) => /* @__PURE__ */ v(Bo, { ref: o, ...r, children: e });
+Ee.displayName = "TagGroup.TagList";
+const Co = { removeTag: "Remove tag" }, Eo = { removeTag: "Tag entfernen" }, yo = { removeTag: "Retirar etiqueta" }, Lo = { removeTag: "Supprimer la balise" }, ko = { removeTag: "Remover tag" }, To = {
+  en: /* @__PURE__ */ g(Co),
+  de: /* @__PURE__ */ g(Eo),
+  es: /* @__PURE__ */ g(yo),
+  "fr-FR": /* @__PURE__ */ g(Lo),
+  "pt-BR": /* @__PURE__ */ g(ko)
+}, ye = ({
+  children: e,
+  ref: o,
+  ...r
+}) => {
+  const t = io(To);
+  return /* @__PURE__ */ v(Po, { ref: o, textValue: typeof e == "string" ? e : void 0, ...r, children: ({ allowsRemoving: s, isSelected: a, selectionMode: n }) => /* @__PURE__ */ ke(Te, { children: [
+    e,
+    s && n !== "multiple" && n !== "single" && /* @__PURE__ */ v(
+      lo,
+      {
+        size: "2xs",
+        variant: a ? "solid" : "ghost",
+        slot: "remove",
+        colorPalette: a ? void 0 : "neutral",
+        "aria-label": t.format("removeTag"),
+        children: /* @__PURE__ */ v(he, {})
+      }
+    )
+  ] }) });
+};
+ye.displayName = "TagGroup.Tag";
+const sr = {
+  /**
+   * # TagGroup.Root
+   *
+   * The root component that provides context and state management for the tag group.
+   * Must wrap all tag group parts (TagList, Tag) to coordinate their behavior.
+   *
+   * @example
+   * ```tsx
+   * <TagGroup.Root selectionMode="multiple" onSelectionChange={handleSelection}>
+   *   <TagGroup.TagList>
+   *     <TagGroup.Tag>Tag 1</TagGroup.Tag>
+   *     <TagGroup.Tag>Tag 2</TagGroup.Tag>
+   *   </TagGroup.TagList>
+   * </TagGroup.Root>
+   * ```
+   */
+  Root: Ce,
+  /**
+   * # TagGroup.TagList
+   *
+   * The container component that holds individual tags within the tag group.
+   * Provides the proper semantic structure and keyboard navigation for tags.
+   *
+   * @example
+   * ```tsx
+   * <TagGroup.Root>
+   *   <TagGroup.TagList>
+   *     <TagGroup.Tag>Tag 1</TagGroup.Tag>
+   *     <TagGroup.Tag>Tag 2</TagGroup.Tag>
+   *   </TagGroup.TagList>
+   * </TagGroup.Root>
+   * ```
+   */
+  TagList: Ee,
+  /**
+   * # TagGroup.Tag
+   *
+   * Individual tag component that can be selected, removed, or used for display.
+   * Supports keyboard interaction and automatic remove button when removable.
+   *
+   * @example
+   * ```tsx
+   * <TagGroup.Root onRemove={handleRemove}>
+   *   <TagGroup.TagList>
+   *     <TagGroup.Tag id="tag1">Removable Tag</TagGroup.Tag>
+   *     <TagGroup.Tag id="tag2">Another Tag</TagGroup.Tag>
+   *   </TagGroup.TagList>
+   * </TagGroup.Root>
+   * ```
+   */
+  Tag: ye
+};
+export {
+  po as $,
+  sr as T
+};
+//# sourceMappingURL=tag-group-DRUqE3JM.es.js.map