@commercetools/nimbus 2.7.0 → 2.9.0

package/dist/chunks/tag-group-BqWFD-bc.es.js

@@ -0,0 +1,614 @@
+import { jsx as v, jsxs as Te, Fragment as he } from "react/jsx-runtime";
+import { Close as Re } from "@commercetools/nimbus-icons";
+import { createSlotRecipeContext as Se } from "@chakra-ui/react/styled-system";
+import { $ as we } from "./Button-B_f19f6I.es.js";
+import { a as w, b as R, e as F, $ as S, c as Fe } from "./utils-CiIOoh_a.es.js";
+import { h as A, j as Ae, k as Me } from "./SelectionManager-Dwxt3P_U.es.js";
+import { $ as ze } from "./Label-DE_LaM97.es.js";
+import { a as D } from "./ListBox-CAJx8YBh.es.js";
+import { b as Ge } from "./RSPContexts-DLgb84PF.es.js";
+import { a as Ne, $ as je } from "./SelectionIndicator-B27AsfqE.es.js";
+import { $ as Ve } from "./Text-DOcU1ycg.es.js";
+import { $ as Ke, e as Oe, g as _e, f as Ie } from "./CollectionBuilder-Bzm4ICAd.es.js";
+import { a as x, $ as He } from "./mergeProps-Dg8WqJiN.es.js";
+import { $ as B } from "./filterDOMProps-Cxz9cAAv.es.js";
+import { $ as Ue } from "./useObjectRef-CaJ5pgjX.es.js";
+import c, { useState as We, useRef as M, useEffect as z, createContext as G, useContext as C, forwardRef as N } from "react";
+import { $ as j } from "./useFocusRing-BUzNZISS.es.js";
+import { $ as qe } from "./useHover-_d7KqTYf.es.js";
+import { $ as Je, a as Qe } from "./useGridListItem-eJAlF8kk.es.js";
+import { c as Ze } from "./Header-BBMNqseS.es.js";
+import { $ as Xe } from "./useField-ZuobdMEN.es.js";
+import { $ as Ye } from "./useFocusWithin-DJvFzdbU.es.js";
+import { $ as er } from "./context-BfHy4NgG.es.js";
+import { q as rr, r as or } from "./useFocusVisible-DY8qx7TG.es.js";
+import { a as tr } from "./scrollIntoView-Cwx7UyTw.es.js";
+import { $ as ar } from "./useFocusable-B3Z_s4s7.es.js";
+import { $ as ur } from "./useLocalizedStringFormatter-CYDf7GZk.es.js";
+import { a as sr, $ as ir } from "./useListState-CK0Ynhz8.es.js";
+import { n as g, u as nr } from "./normalize-messages-BN9BAFXe.es.js";
+import { I as lr } from "./icon-button-CwI7ZK2q.es.js";
+const V = /* @__PURE__ */ new WeakMap();
+function dr(e, r, o) {
+  let { direction: t } = er(), i = e.keyboardDelegate || new Ze({
+    collection: r.collection,
+    ref: o,
+    orientation: "horizontal",
+    direction: t,
+    disabledKeys: r.disabledKeys,
+    disabledBehavior: r.selectionManager.disabledBehavior
+  }), { labelProps: s, fieldProps: a, descriptionProps: l, errorMessageProps: f } = Xe({
+    ...e,
+    labelElementType: "span"
+  }), { gridProps: p } = Je({
+    ...e,
+    ...a,
+    keyboardDelegate: i,
+    shouldFocusWrap: !0,
+    linkBehavior: "override",
+    keyboardNavigationBehavior: "tab"
+  }, r, o), [u, b] = We(!1), { focusWithinProps: n } = Ye({
+    onFocusWithinChange: b
+  }), $ = B(e), d = M(r.collection.size);
+  return z(() => {
+    o.current && d.current > 0 && r.collection.size === 0 && u && o.current.focus(), d.current = r.collection.size;
+  }, [
+    r.collection.size,
+    u,
+    o
+  ]), V.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 K = {};
+K = {
+  removeButtonLabel: "إزالة",
+  removeDescription: "اضغط على مفتاح DELETE لإزالة علامة."
+};
+var O = {};
+O = {
+  removeButtonLabel: "Премахване",
+  removeDescription: "Натиснете Delete, за да премахнете маркера."
+};
+var _ = {};
+_ = {
+  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 U = {};
+U = {
+  removeButtonLabel: "Κατάργηση",
+  removeDescription: "Πατήστε Διαγραφή για να καταργήσετε την ετικέτα."
+};
+var W = {};
+W = {
+  removeDescription: "Press Delete to remove tag.",
+  removeButtonLabel: "Remove"
+};
+var q = {};
+q = {
+  removeButtonLabel: "Quitar",
+  removeDescription: "Pulse Eliminar para quitar la etiqueta."
+};
+var J = {};
+J = {
+  removeButtonLabel: "Eemalda",
+  removeDescription: "Sildi eemaldamiseks vajutage kustutusklahvi Delete."
+};
+var Q = {};
+Q = {
+  removeButtonLabel: "Poista",
+  removeDescription: "Poista tunniste painamalla Poista-painiketta."
+};
+var Z = {};
+Z = {
+  removeButtonLabel: "Supprimer",
+  removeDescription: "Appuyez sur Supprimer pour supprimer l’étiquette."
+};
+var X = {};
+X = {
+  removeButtonLabel: "הסר",
+  removeDescription: "לחץ על מחק כדי להסיר תג."
+};
+var Y = {};
+Y = {
+  removeButtonLabel: "Ukloni",
+  removeDescription: "Pritisnite Delete za uklanjanje oznake."
+};
+var ee = {};
+ee = {
+  removeButtonLabel: "Eltávolítás",
+  removeDescription: "Nyomja meg a Delete billentyűt a címke eltávolításához."
+};
+var re = {};
+re = {
+  removeButtonLabel: "Rimuovi",
+  removeDescription: "Premi Elimina per rimuovere il tag."
+};
+var oe = {};
+oe = {
+  removeButtonLabel: "削除",
+  removeDescription: "タグを削除するには、Delete キーを押します。"
+};
+var te = {};
+te = {
+  removeButtonLabel: "제거",
+  removeDescription: "태그를 제거하려면 Delete 키를 누르십시오."
+};
+var ae = {};
+ae = {
+  removeButtonLabel: "Pašalinti",
+  removeDescription: "Norėdami pašalinti žymą, paspauskite „Delete“ klavišą."
+};
+var ue = {};
+ue = {
+  removeButtonLabel: "Noņemt",
+  removeDescription: "Nospiediet Delete [Dzēst], lai noņemtu tagu."
+};
+var se = {};
+se = {
+  removeButtonLabel: "Fjern",
+  removeDescription: "Trykk på Slett for å fjerne taggen."
+};
+var ie = {};
+ie = {
+  removeButtonLabel: "Verwijderen",
+  removeDescription: "Druk op Verwijderen om de tag te verwijderen."
+};
+var ne = {};
+ne = {
+  removeButtonLabel: "Usuń",
+  removeDescription: "Naciśnij Usuń, aby usunąć znacznik."
+};
+var le = {};
+le = {
+  removeButtonLabel: "Remover",
+  removeDescription: "Pressione Delete para remover a tag."
+};
+var de = {};
+de = {
+  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 fe = {};
+fe = {
+  removeButtonLabel: "Удалить",
+  removeDescription: "Нажмите DELETE, чтобы удалить тег."
+};
+var pe = {};
+pe = {
+  removeButtonLabel: "Odstrániť",
+  removeDescription: "Ak chcete odstrániť značku, stlačte kláves Delete."
+};
+var be = {};
+be = {
+  removeButtonLabel: "Odstrani",
+  removeDescription: "Pritisnite Delete, da odstranite oznako."
+};
+var $e = {};
+$e = {
+  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 ve = {};
+ve = {
+  removeButtonLabel: "Kaldır",
+  removeDescription: "Etiketi kaldırmak için Sil tuşuna basın."
+};
+var ge = {};
+ge = {
+  removeButtonLabel: "Вилучити",
+  removeDescription: "Натисніть Delete, щоб вилучити тег."
+};
+var xe = {};
+xe = {
+  removeButtonLabel: "删除",
+  removeDescription: "按下“删除”以删除标记。"
+};
+var De = {};
+De = {
+  removeButtonLabel: "移除",
+  removeDescription: "按 Delete 鍵以移除標記。"
+};
+var Be = {};
+Be = {
+  "ar-AE": K,
+  "bg-BG": O,
+  "cs-CZ": _,
+  "da-DK": I,
+  "de-DE": H,
+  "el-GR": U,
+  "en-US": W,
+  "es-ES": q,
+  "et-EE": J,
+  "fi-FI": Q,
+  "fr-FR": Z,
+  "he-IL": X,
+  "hr-HR": Y,
+  "hu-HU": ee,
+  "it-IT": re,
+  "ja-JP": oe,
+  "ko-KR": te,
+  "lt-LT": ae,
+  "lv-LV": ue,
+  "nb-NO": se,
+  "nl-NL": ie,
+  "pl-PL": ne,
+  "pt-BR": le,
+  "pt-PT": de,
+  "ro-RO": ce,
+  "ru-RU": fe,
+  "sk-SK": pe,
+  "sl-SI": be,
+  "sr-SP": $e,
+  "sv-SE": me,
+  "tr-TR": ve,
+  "uk-UA": ge,
+  "zh-CN": xe,
+  "zh-TW": De
+};
+function cr(e) {
+  return e && e.__esModule ? e.default : e;
+}
+function fr(e, r, o) {
+  let { item: t } = e, i = ur(cr(Be), "@react-aria/tag"), s = He(), { onRemove: a } = V.get(r) || {}, { rowProps: l, gridCellProps: f, ...p } = Qe({
+    node: t
+  }, r, o), { descriptionProps: u, ...b } = p, n = r.disabledKeys.has(t.key) || t.props.isDisabled, $ = (h) => {
+    if (h.key === "Delete" || h.key === "Backspace") {
+      if (n) return;
+      h.preventDefault(), r.selectionManager.isSelected(t.key) ? a?.(new Set(r.selectionManager.selectedKeys)) : a?.(/* @__PURE__ */ new Set([
+        t.key
+      ]));
+    }
+  }, d = rr();
+  d === "virtual" && typeof window < "u" && "ontouchstart" in window && (d = "pointer");
+  let E = a && (d === "keyboard" || d === "virtual") ? i.format("removeDescription") : "", y = tr(E), L = t.key === r.selectionManager.focusedKey, k = r.selectionManager.focusedKey != null, m = -1;
+  !n && (L || !k) && (m = 0);
+  let P = B(t.props), T = or(t.props), { focusableProps: ke } = ar({
+    ...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(ke, l, P, T, {
+      tabIndex: m,
+      onKeyDown: a ? $ : void 0,
+      "aria-describedby": y["aria-describedby"]
+    }),
+    gridCellProps: x(f, {
+      "aria-errormessage": e["aria-errormessage"],
+      "aria-label": e["aria-label"]
+    }),
+    ...b,
+    allowsRemoving: !!a
+  };
+}
+const pr = /* @__PURE__ */ G(null), Pe = /* @__PURE__ */ G(null), br = /* @__PURE__ */ N(function(r, o) {
+  return [r, o] = S(r, o, pr), /* @__PURE__ */ c.createElement(D.Provider, {
+    value: null
+  }, /* @__PURE__ */ c.createElement(Ie, {
+    content: r.children
+  }, (t) => /* @__PURE__ */ c.createElement($r, {
+    props: r,
+    forwardedRef: o,
+    collection: t
+  })));
+});
+function $r({ props: e, forwardedRef: r, collection: o }) {
+  let t = M(null), { id: i, ...s } = e;
+  [s, t] = S(s, t, Ge);
+  let { filter: a, shouldUseVirtualFocus: l, ...f } = s, [p, u] = Fe(!e["aria-label"] && !e["aria-labelledby"]), b = sr({
+    ...f,
+    children: void 0,
+    collection: o
+  }), n = ir(b, a), $ = B(s, {
+    global: !0
+  }), d = Object.fromEntries(Object.entries($).map(([P, T]) => [
+    P,
+    P === "id" ? T : void 0
+  ])), { gridProps: E, labelProps: y, descriptionProps: L, errorMessageProps: k } = dr({
+    ...f,
+    ...d,
+    label: u
+  }, n, t);
+  var m;
+  return /* @__PURE__ */ c.createElement(R.div, {
+    render: e.render,
+    ...$,
+    id: i,
+    ref: r,
+    slot: e.slot || void 0,
+    className: (m = e.className) !== null && m !== void 0 ? m : "react-aria-TagGroup",
+    style: e.style
+  }, /* @__PURE__ */ c.createElement(F, {
+    values: [
+      [
+        ze,
+        {
+          ...y,
+          elementType: "span",
+          ref: p
+        }
+      ],
+      [
+        Pe,
+        {
+          ...E,
+          ref: t
+        }
+      ],
+      [
+        D,
+        n
+      ],
+      [
+        Ve,
+        {
+          slots: {
+            description: L,
+            errorMessage: k
+          }
+        }
+      ]
+    ]
+  }, e.children));
+}
+const mr = /* @__PURE__ */ N(function(r, o) {
+  return C(D) ? /* @__PURE__ */ c.createElement(vr, {
+    props: r,
+    forwardedRef: o
+  }) : /* @__PURE__ */ c.createElement(_e, r);
+});
+function vr({ props: e, forwardedRef: r }) {
+  let o = C(D), { CollectionRoot: t } = C(A), [i, s] = S({}, r, Pe), { focusProps: a, isFocused: l, isFocusVisible: f } = j(), 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__ */ c.createElement(R.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__ */ c.createElement(je, null, o.collection.size === 0 && e.renderEmptyState ? e.renderEmptyState(p) : /* @__PURE__ */ c.createElement(t, {
+    collection: o.collection,
+    persistedKeys: b
+  })));
+}
+const gr = /* @__PURE__ */ Ke(Oe, (e, r, o) => {
+  let t = C(D), i = Ue(r), { focusProps: s, isFocusVisible: a } = j({
+    within: !1
+  }), { rowProps: l, gridCellProps: f, removeButtonProps: p, ...u } = fr({
+    item: o
+  }, t, i), { hoverProps: b, isHovered: n } = qe({
+    isDisabled: !u.allowsSelection,
+    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
+    }
+  });
+  z(() => {
+    !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 d = B(e, {
+    global: !0
+  });
+  return delete d.id, delete d.onClick, /* @__PURE__ */ c.createElement(R.div, {
+    ref: i,
+    ...x(d, $, 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__ */ c.createElement("div", {
+    ...f,
+    style: {
+      display: "contents"
+    }
+  }, /* @__PURE__ */ c.createElement(F, {
+    values: [
+      [
+        we,
+        {
+          slots: {
+            remove: p
+          }
+        }
+      ],
+      [
+        A,
+        Ae
+      ],
+      [
+        Ne,
+        {
+          isSelected: u.isSelected
+        }
+      ]
+    ]
+  }, $.children)));
+}), { withProvider: xr, withContext: Ce } = /* @__PURE__ */ Se({
+  key: "nimbusTagGroup"
+}), Dr = /* @__PURE__ */ xr(br, "root"), Br = (e) => {
+  const { ref: r, ...o } = e, t = Ce(
+    mr,
+    "tagList"
+  );
+  return /* @__PURE__ */ v(t, { ...o, ref: r });
+}, Pr = /* @__PURE__ */ Ce(gr, "tag"), Ee = ({
+  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__ */ v(
+  Dr,
+  {
+    ref: t,
+    onRemove: r,
+    selectionMode: o,
+    ...i,
+    children: e
+  }
+));
+Ee.displayName = "TagGroup.Root";
+const ye = ({
+  children: e,
+  ref: r,
+  ...o
+}) => /* @__PURE__ */ v(Br, { ref: r, ...o, children: e });
+ye.displayName = "TagGroup.TagList";
+const Cr = { removeTag: "Remove tag" }, Er = { removeTag: "Tag entfernen" }, yr = { removeTag: "Retirar etiqueta" }, Lr = { removeTag: "Supprimer la balise" }, kr = { removeTag: "Remover tag" }, Tr = {
+  en: /* @__PURE__ */ g(Cr),
+  de: /* @__PURE__ */ g(Er),
+  es: /* @__PURE__ */ g(yr),
+  "fr-FR": /* @__PURE__ */ g(Lr),
+  "pt-BR": /* @__PURE__ */ g(kr)
+}, Le = ({
+  children: e,
+  ref: r,
+  ...o
+}) => {
+  const t = nr(Tr);
+  return /* @__PURE__ */ v(Pr, { ref: r, textValue: typeof e == "string" ? e : void 0, ...o, children: ({ allowsRemoving: s, isSelected: a, selectionMode: l }) => /* @__PURE__ */ Te(he, { children: [
+    e,
+    s && l !== "multiple" && l !== "single" && /* @__PURE__ */ v(
+      lr,
+      {
+        size: "2xs",
+        variant: a ? "solid" : "ghost",
+        slot: "remove",
+        colorPalette: a ? void 0 : "neutral",
+        "aria-label": t.format("removeTag"),
+        children: /* @__PURE__ */ v(Re, {})
+      }
+    )
+  ] }) });
+};
+Le.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: Ee,
+  /**
+   * # 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: ye,
+  /**
+   * # 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: Le
+};
+export {
+  pr as $,
+  uo as T
+};
+//# sourceMappingURL=tag-group-BqWFD-bc.es.js.map