@commercetools/nimbus 2.9.1 → 2.11.0

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

@@ -0,0 +1,613 @@
+import { jsx as m, jsxs as ke, Fragment as Te } from "react/jsx-runtime";
+import { Close as Re } from "@commercetools/nimbus-icons";
+import { createSlotRecipeContext as we } from "@chakra-ui/react/styled-system";
+import { $ as Fe } from "./Button-i3wfJjZy.es.js";
+import { a as w, b as T, e as F, $ as R, c as Se } from "./utils-BBrLCz2b.es.js";
+import { h as S, j as Ae, k as Me } from "./useCollection-BHV9RL7c.es.js";
+import { $ as ze } from "./Label-DVM33Itv.es.js";
+import { a as D } from "./ListBox-BQGvhjf1.es.js";
+import { $ as Ge } from "./Autocomplete-B1xvEyxv.es.js";
+import { a as Ne, $ as je } from "./SelectionIndicator-BX52LU2T.es.js";
+import { $ as Ve } from "./Text-DOcU1ycg.es.js";
+import { $ as B } from "./filterDOMProps-BBiQzGq3.es.js";
+import { $ as Ke, a as Oe } from "./useGridListItem-DK2Qg6fD.es.js";
+import { c as Ie } from "./getItemCount-BEy-gD1d.es.js";
+import { a as x, $ as He } from "./mergeProps-Bcbq3GVJ.es.js";
+import { $ as _e } from "./useField-lGJsB_QJ.es.js";
+import { $ as Ue } from "./useFocusWithin-B9hMajq2.es.js";
+import { $ as We } from "./I18nProvider-BuwVdK1A.es.js";
+import d, { useState as qe, useRef as A, useEffect as M, createContext as z, useContext as P, forwardRef as G } from "react";
+import { a as Je } from "./useDescription-Cs3XF2eh.es.js";
+import { $ as Qe } from "./useFocusable-Cd_G32KV.es.js";
+import { q as Ze, r as Xe } from "./useFocusVisible-DZMx0daa.es.js";
+import { $ as Ye } from "./useLocalizedStringFormatter-pZiuCYXV.es.js";
+import { $ as er, e as rr, g as or, f as tr } from "./CollectionBuilder-CbqLnlVI.es.js";
+import { a as ar, $ as ur } from "./useListState-CCuYEVMA.es.js";
+import { $ as N } from "./useFocusRing-2PACod61.es.js";
+import { $ as sr } from "./useHover-BdXEf8Xj.es.js";
+import { $ as ir } from "./useObjectRef-tuMEdnba.es.js";
+import { n as g, u as nr } from "./normalize-messages-CeN1NEyM.es.js";
+import { I as lr } from "./icon-button-COjLtd6N.es.js";
+const j = /* @__PURE__ */ new WeakMap();
+function cr(e, r, o) {
+  let { direction: t } = We(), i = e.keyboardDelegate || new Ie({
+    collection: r.collection,
+    ref: o,
+    orientation: "horizontal",
+    direction: t,
+    disabledKeys: r.disabledKeys,
+    disabledBehavior: r.selectionManager.disabledBehavior
+  }), { labelProps: s, fieldProps: a, descriptionProps: l, errorMessageProps: f } = _e({
+    ...e,
+    labelElementType: "span"
+  }), { gridProps: p } = Ke({
+    ...e,
+    ...a,
+    keyboardDelegate: i,
+    shouldFocusWrap: !0,
+    linkBehavior: "override",
+    keyboardNavigationBehavior: "tab"
+  }, r, o), [u, b] = qe(!1), { focusWithinProps: n } = Ue({
+    onFocusWithinChange: b
+  }), $ = B(e), c = A(r.collection.size);
+  return M(() => {
+    o.current && c.current > 0 && r.collection.size === 0 && u && o.current.focus(), c.current = r.collection.size;
+  }, [
+    r.collection.size,
+    u,
+    o
+  ]), j.set(r, {
+    onRemove: e.onRemove
+  }), {
+    gridProps: x(p, $, {
+      role: r.collection.size ? "grid" : "group",
+      "aria-atomic": !1,
+      "aria-relevant": "additions",
+      "aria-live": u ? "polite" : "off",
+      ...n,
+      ...a
+    }),
+    labelProps: s,
+    descriptionProps: l,
+    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 I = {};
+I = {
+  removeButtonLabel: "Fjern",
+  removeDescription: "Tryk på Slet for at fjerne tag."
+};
+var H = {};
+H = {
+  removeButtonLabel: "Entfernen",
+  removeDescription: "Auf „Löschen“ drücken, um das Tag zu entfernen."
+};
+var _ = {};
+_ = {
+  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 re = {};
+re = {
+  removeButtonLabel: "削除",
+  removeDescription: "タグを削除するには、Delete キーを押します。"
+};
+var oe = {};
+oe = {
+  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 ne = {};
+ne = {
+  removeButtonLabel: "Remover",
+  removeDescription: "Pressione Delete para remover a tag."
+};
+var le = {};
+le = {
+  removeButtonLabel: "Eliminar",
+  removeDescription: "Prima Delete para eliminar a tag."
+};
+var ce = {};
+ce = {
+  removeButtonLabel: "Îndepărtaţi",
+  removeDescription: "Apăsați pe Delete (Ștergere) pentru a elimina eticheta."
+};
+var de = {};
+de = {
+  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 $e = {};
+$e = {
+  removeButtonLabel: "Ta bort",
+  removeDescription: "Tryck på Radera för att ta bort taggen."
+};
+var me = {};
+me = {
+  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": I,
+  "de-DE": H,
+  "el-GR": _,
+  "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": re,
+  "ko-KR": oe,
+  "lt-LT": te,
+  "lv-LV": ae,
+  "nb-NO": ue,
+  "nl-NL": se,
+  "pl-PL": ie,
+  "pt-BR": ne,
+  "pt-PT": le,
+  "ro-RO": ce,
+  "ru-RU": de,
+  "sk-SK": fe,
+  "sl-SI": pe,
+  "sr-SP": be,
+  "sv-SE": $e,
+  "tr-TR": me,
+  "uk-UA": ve,
+  "zh-CN": ge,
+  "zh-TW": xe
+};
+function dr(e) {
+  return e && e.__esModule ? e.default : e;
+}
+function fr(e, r, o) {
+  let { item: t } = e, i = Ye(dr(De), "@react-aria/tag"), s = He(), { onRemove: a } = j.get(r) || {}, { rowProps: l, gridCellProps: f, ...p } = Oe({
+    node: t
+  }, r, o), { descriptionProps: u, ...b } = p, n = r.disabledKeys.has(t.key) || t.props.isDisabled, $ = (k) => {
+    if (k.key === "Delete" || k.key === "Backspace") {
+      if (n) return;
+      k.preventDefault(), r.selectionManager.isSelected(t.key) ? a?.(new Set(r.selectionManager.selectedKeys)) : a?.(/* @__PURE__ */ new Set([
+        t.key
+      ]));
+    }
+  }, c = Ze();
+  c === "virtual" && typeof window < "u" && "ontouchstart" in window && (c = "pointer");
+  let C = a && (c === "keyboard" || c === "virtual") ? i.format("removeDescription") : "", E = Je(C), y = t.key === r.selectionManager.focusedKey, L = r.selectionManager.focusedKey != null, v = -1;
+  !n && (y || !L) && (v = 0);
+  let h = B(t.props), Le = Xe(t.props), { focusableProps: he } = Qe({
+    ...t.props,
+    isDisabled: n
+  }, o);
+  return {
+    removeButtonProps: {
+      "aria-label": i.format("removeButtonLabel"),
+      "aria-labelledby": `${s} ${l.id}`,
+      isDisabled: n,
+      id: s,
+      onPress: () => a ? a(/* @__PURE__ */ new Set([
+        t.key
+      ])) : null
+    },
+    rowProps: x(he, l, h, Le, {
+      tabIndex: v,
+      onKeyDown: a ? $ : void 0,
+      "aria-describedby": E["aria-describedby"]
+    }),
+    gridCellProps: x(f, {
+      "aria-errormessage": e["aria-errormessage"],
+      "aria-label": e["aria-label"]
+    }),
+    ...b,
+    allowsRemoving: !!a
+  };
+}
+const pr = /* @__PURE__ */ z(null), Be = /* @__PURE__ */ z(null), br = /* @__PURE__ */ G(function(r, o) {
+  return [r, o] = R(r, o, pr), /* @__PURE__ */ d.createElement(D.Provider, {
+    value: null
+  }, /* @__PURE__ */ d.createElement(tr, {
+    content: r.children
+  }, (t) => /* @__PURE__ */ d.createElement($r, {
+    props: r,
+    forwardedRef: o,
+    collection: t
+  })));
+});
+function $r({ props: e, forwardedRef: r, collection: o }) {
+  let t = A(null), { id: i, ...s } = e;
+  [s, t] = R(s, t, Ge);
+  let { filter: a, shouldUseVirtualFocus: l, ...f } = s, [p, u] = Se(!e["aria-label"] && !e["aria-labelledby"]), b = ar({
+    ...f,
+    children: void 0,
+    collection: o
+  }), n = ur(b, a), $ = B(s, {
+    global: !0
+  }), c = Object.fromEntries(Object.entries($).map(([v, h]) => [
+    v,
+    v === "id" ? h : void 0
+  ])), { gridProps: C, labelProps: E, descriptionProps: y, errorMessageProps: L } = cr({
+    ...f,
+    ...c,
+    label: u
+  }, n, t);
+  return /* @__PURE__ */ d.createElement(T.div, {
+    render: e.render,
+    ...$,
+    id: i,
+    ref: r,
+    slot: e.slot || void 0,
+    className: e.className ?? "react-aria-TagGroup",
+    style: e.style
+  }, /* @__PURE__ */ d.createElement(F, {
+    values: [
+      [
+        ze,
+        {
+          ...E,
+          elementType: "span",
+          ref: p
+        }
+      ],
+      [
+        Be,
+        {
+          ...C,
+          ref: t
+        }
+      ],
+      [
+        D,
+        n
+      ],
+      [
+        Ve,
+        {
+          slots: {
+            description: y,
+            errorMessage: L
+          }
+        }
+      ]
+    ]
+  }, e.children));
+}
+const mr = /* @__PURE__ */ G(function(r, o) {
+  return P(D) ? /* @__PURE__ */ d.createElement(vr, {
+    props: r,
+    forwardedRef: o
+  }) : /* @__PURE__ */ d.createElement(or, r);
+});
+function vr({ props: e, forwardedRef: r }) {
+  let o = P(D), { CollectionRoot: t } = P(S), [i, s] = R({}, r, Be), { focusProps: a, isFocused: l, isFocusVisible: f } = N(), p = {
+    isEmpty: o.collection.size === 0,
+    isFocused: l,
+    isFocusVisible: f,
+    state: o
+  }, u = w({
+    ...e,
+    children: void 0,
+    defaultClassName: "react-aria-TagList",
+    values: p
+  }), b = Me(o.selectionManager.focusedKey), n = B(e, {
+    global: !0
+  });
+  return /* @__PURE__ */ d.createElement(T.div, {
+    ...x(n, u, i, a),
+    ref: s,
+    "data-empty": o.collection.size === 0 || void 0,
+    "data-focused": l || void 0,
+    "data-focus-visible": f || void 0
+  }, /* @__PURE__ */ d.createElement(je, null, o.collection.size === 0 && e.renderEmptyState ? e.renderEmptyState(p) : /* @__PURE__ */ d.createElement(t, {
+    collection: o.collection,
+    persistedKeys: b
+  })));
+}
+const gr = /* @__PURE__ */ er(rr, (e, r, o) => {
+  let t = P(D), i = ir(r), { focusProps: s, isFocusVisible: a } = N({
+    within: !1
+  }), { rowProps: l, gridCellProps: f, removeButtonProps: p, ...u } = fr({
+    item: o
+  }, t, i), { hoverProps: b, isHovered: n } = sr({
+    isDisabled: !u.allowsSelection && !u.hasAction,
+    onHoverStart: o.props.onHoverStart,
+    onHoverChange: o.props.onHoverChange,
+    onHoverEnd: o.props.onHoverEnd
+  }), $ = w({
+    ...e,
+    id: void 0,
+    children: o.rendered,
+    defaultClassName: "react-aria-Tag",
+    values: {
+      ...u,
+      isFocusVisible: a,
+      isHovered: n,
+      selectionMode: t.selectionManager.selectionMode,
+      selectionBehavior: t.selectionManager.selectionBehavior
+    }
+  });
+  M(() => {
+    !o.textValue && process.env.NODE_ENV !== "production" && console.warn("A `textValue` prop is required for <Tag> elements with non-plain text children for accessibility.");
+  }, [
+    o.textValue
+  ]);
+  let c = B(e, {
+    global: !0
+  });
+  return delete c.id, delete c.onClick, /* @__PURE__ */ d.createElement(T.div, {
+    ref: i,
+    ...x(c, $, l, s, b),
+    "data-selected": u.isSelected || void 0,
+    "data-disabled": u.isDisabled || void 0,
+    "data-hovered": n || 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", {
+    ...f,
+    style: {
+      display: "contents"
+    }
+  }, /* @__PURE__ */ d.createElement(F, {
+    values: [
+      [
+        Fe,
+        {
+          slots: {
+            remove: p
+          }
+        }
+      ],
+      [
+        S,
+        Ae
+      ],
+      [
+        Ne,
+        {
+          isSelected: u.isSelected
+        }
+      ]
+    ]
+  }, $.children)));
+}), { withProvider: xr, withContext: Pe } = /* @__PURE__ */ we({
+  key: "nimbusTagGroup"
+}), Dr = /* @__PURE__ */ xr(br, "root"), Br = (e) => {
+  const { ref: r, ...o } = e, t = Pe(
+    mr,
+    "tagList"
+  );
+  return /* @__PURE__ */ m(t, { ...o, ref: r });
+}, Pr = /* @__PURE__ */ Pe(gr, "tag"), Ce = ({
+  children: e,
+  onRemove: r,
+  selectionMode: o,
+  ref: t,
+  ...i
+}) => (r && (o === "multiple" || o === "single") && console.warn(
+  'Nimbus TagGroup: when "selectionMode" is "single" or "mutiple", Tags cannot be removed'
+), /* @__PURE__ */ m(
+  Dr,
+  {
+    ref: t,
+    onRemove: r,
+    selectionMode: o,
+    ...i,
+    children: e
+  }
+));
+Ce.displayName = "TagGroup.Root";
+const Ee = ({
+  children: e,
+  ref: r,
+  ...o
+}) => /* @__PURE__ */ m(Br, { ref: r, ...o, children: e });
+Ee.displayName = "TagGroup.TagList";
+const Cr = { removeTag: "Remove tag" }, Er = { removeTag: "Tag entfernen" }, yr = { removeTag: "Retirar etiqueta" }, Lr = { removeTag: "Supprimer la balise" }, hr = { removeTag: "Remover tag" }, kr = {
+  en: /* @__PURE__ */ g(Cr),
+  de: /* @__PURE__ */ g(Er),
+  es: /* @__PURE__ */ g(yr),
+  "fr-FR": /* @__PURE__ */ g(Lr),
+  "pt-BR": /* @__PURE__ */ g(hr)
+}, ye = ({
+  children: e,
+  ref: r,
+  ...o
+}) => {
+  const t = nr(kr);
+  return /* @__PURE__ */ m(Pr, { ref: r, textValue: typeof e == "string" ? e : void 0, ...o, children: ({ allowsRemoving: s, isSelected: a, selectionMode: l }) => /* @__PURE__ */ ke(Te, { children: [
+    e,
+    s && l !== "multiple" && l !== "single" && /* @__PURE__ */ m(
+      lr,
+      {
+        size: "2xs",
+        variant: a ? "solid" : "ghost",
+        slot: "remove",
+        colorPalette: a ? void 0 : "neutral",
+        "aria-label": t.format("removeTag"),
+        children: /* @__PURE__ */ m(Re, {})
+      }
+    )
+  ] }) });
+};
+ye.displayName = "TagGroup.Tag";
+const uo = {
+  /**
+   * # 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 {
+  pr as $,
+  uo as T
+};
+//# sourceMappingURL=tag-group-D8hKdjB9.es.js.map