@commercetools/nimbus 2.0.1-rc4 → 2.1.0

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

@@ -0,0 +1,612 @@
+import { jsx as v, jsxs as Le, Fragment as ke } from "react/jsx-runtime";
+import { defineMessages as he, useIntl as Te } from "react-intl";
+import { Close as we } from "@commercetools/nimbus-icons";
+import { createSlotRecipeContext as Re } from "@chakra-ui/react";
+import { $ as Fe } from "./Button-BjcDZ5eb.es.js";
+import { h as w, k as Se, l as Ae } from "./SelectionManager-bgcDT3lR.es.js";
+import { a as R, e as F, $ as T, b as Me } from "./utils-B6pV5ewr.es.js";
+import { $ as ze } from "./Label-DIseLESi.es.js";
+import { a as g } from "./ListBox-C8TVMFFY.es.js";
+import { b as Ne } from "./RSPContexts-DLgb84PF.es.js";
+import { a as Ge, $ as Ve } from "./SelectionIndicator-B27AsfqE.es.js";
+import { $ as je } from "./Text-DOcU1ycg.es.js";
+import { $ as Ke, f as Ie, c as Oe, g as He } from "./CollectionBuilder-ZlIN4SR4.es.js";
+import { $ as x, a as Ue } from "./mergeProps-Dsl8k3Ig.es.js";
+import { $ as D } from "./filterDOMProps-BSVCO5jK.es.js";
+import { $ as We } from "./useObjectRef-CaJ5pgjX.es.js";
+import c, { useState as _e, useRef as S, useEffect as A, forwardRef as M, useContext as P, createContext as z } from "react";
+import { $ as N } from "./useFocusRing-FPt2Rwil.es.js";
+import { $ as qe } from "./useHover-BQRSM3qT.es.js";
+import { $ as Je, a as Qe } from "./useGridListItem-DAGp36bD.es.js";
+import { c as Ze } from "./Header-Bvo6aMcQ.es.js";
+import { $ as Xe } from "./useField-CHrpmkxe.es.js";
+import { $ as Ye } from "./useFocusWithin-EFOG-Jn1.es.js";
+import { $ as eo } from "./context-DW7UvQ8z.es.js";
+import { e as oo } from "./openLink-BNz58j4a.es.js";
+import { a as ro } from "./scrollIntoView-B7D07fJk.es.js";
+import { f as to } from "./useFocusVisible-B3HmFL2Q.es.js";
+import { $ as ao } from "./useFocusable-Cs6i58WP.es.js";
+import { $ as uo } from "./useLocalizedStringFormatter-DaRRUvyV.es.js";
+import { $ as io, a as so } from "./useListState-BHLGQlP3.es.js";
+import { I as lo } from "./icon-button-DgL7XNUZ.es.js";
+const G = /* @__PURE__ */ new WeakMap();
+function no(e, o, r) {
+  let { direction: t } = eo(), s = e.keyboardDelegate || new Ze({
+    collection: o.collection,
+    ref: r,
+    orientation: "horizontal",
+    direction: t,
+    disabledKeys: o.disabledKeys,
+    disabledBehavior: o.selectionManager.disabledBehavior
+  }), { labelProps: i, fieldProps: a, descriptionProps: n, errorMessageProps: f } = Xe({
+    ...e,
+    labelElementType: "span"
+  }), { gridProps: p } = Je({
+    ...e,
+    ...a,
+    keyboardDelegate: s,
+    shouldFocusWrap: !0,
+    linkBehavior: "override",
+    keyboardNavigationBehavior: "tab"
+  }, o, r), [u, b] = _e(!1), { focusWithinProps: l } = Ye({
+    onFocusWithinChange: b
+  }), $ = D(e), d = S(o.collection.size);
+  return A(() => {
+    r.current && d.current > 0 && o.collection.size === 0 && u && r.current.focus(), d.current = o.collection.size;
+  }, [
+    o.collection.size,
+    u,
+    r
+  ]), G.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: n,
+    errorMessageProps: f
+  };
+}
+var V = {};
+V = {
+  removeButtonLabel: "إزالة",
+  removeDescription: "اضغط على مفتاح DELETE لإزالة علامة."
+};
+var j = {};
+j = {
+  removeButtonLabel: "Премахване",
+  removeDescription: "Натиснете Delete, за да премахнете маркера."
+};
+var K = {};
+K = {
+  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 O = {};
+O = {
+  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 ge = {};
+ge = {
+  "ar-AE": V,
+  "bg-BG": j,
+  "cs-CZ": K,
+  "da-DK": I,
+  "de-DE": O,
+  "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 co(e) {
+  return e && e.__esModule ? e.default : e;
+}
+function fo(e, o, r) {
+  let { item: t } = e, s = uo(co(ge), "@react-aria/tag"), i = Ue(), { onRemove: a } = G.get(o) || {}, { rowProps: n, gridCellProps: f, ...p } = Qe({
+    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
+      ]));
+    }
+  }, d = to();
+  d === "virtual" && typeof window < "u" && "ontouchstart" in window && (d = "pointer");
+  let C = a && (d === "keyboard" || d === "virtual") ? s.format("removeDescription") : "", E = ro(C), y = t.key === o.selectionManager.focusedKey, L = o.selectionManager.focusedKey != null, m = -1;
+  !l && (y || !L) && (m = 0);
+  let B = D(t.props), k = oo(t.props), { focusableProps: ye } = ao({
+    isDisabled: l
+  }, r);
+  return {
+    removeButtonProps: {
+      "aria-label": s.format("removeButtonLabel"),
+      "aria-labelledby": `${i} ${n.id}`,
+      isDisabled: l,
+      id: i,
+      onPress: () => a ? a(/* @__PURE__ */ new Set([
+        t.key
+      ])) : null
+    },
+    rowProps: x(ye, n, B, k, {
+      tabIndex: m,
+      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 po = /* @__PURE__ */ z(null), De = /* @__PURE__ */ z(null), bo = /* @__PURE__ */ M(function(o, r) {
+  return [o, r] = T(o, r, po), /* @__PURE__ */ c.createElement(g.Provider, {
+    value: null
+  }, /* @__PURE__ */ c.createElement(He, {
+    content: o.children
+  }, (t) => /* @__PURE__ */ c.createElement($o, {
+    props: o,
+    forwardedRef: r,
+    collection: t
+  })));
+});
+function $o({ props: e, forwardedRef: o, collection: r }) {
+  let t = S(null), { id: s, ...i } = e;
+  [i, t] = T(i, t, Ne);
+  let { filter: a, shouldUseVirtualFocus: n, ...f } = i, [p, u] = Me(!e["aria-label"] && !e["aria-labelledby"]), b = io({
+    ...f,
+    children: void 0,
+    collection: r
+  }), l = so(b, a), $ = D(i, {
+    global: !0
+  }), d = Object.fromEntries(Object.entries($).map(([B, k]) => [
+    B,
+    B === "id" ? k : void 0
+  ])), { gridProps: C, labelProps: E, descriptionProps: y, errorMessageProps: L } = no({
+    ...f,
+    ...d,
+    label: u
+  }, l, t);
+  var m;
+  return /* @__PURE__ */ c.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__ */ c.createElement(F, {
+    values: [
+      [
+        ze,
+        {
+          ...E,
+          elementType: "span",
+          ref: p
+        }
+      ],
+      [
+        De,
+        {
+          ...C,
+          ref: t
+        }
+      ],
+      [
+        g,
+        l
+      ],
+      [
+        je,
+        {
+          slots: {
+            description: y,
+            errorMessage: L
+          }
+        }
+      ]
+    ]
+  }, e.children));
+}
+const mo = /* @__PURE__ */ M(function(o, r) {
+  return P(g) ? /* @__PURE__ */ c.createElement(vo, {
+    props: o,
+    forwardedRef: r
+  }) : /* @__PURE__ */ c.createElement(Oe, o);
+});
+function vo({ props: e, forwardedRef: o }) {
+  let r = P(g), { CollectionRoot: t } = P(w), [s, i] = T({}, o, De), { focusProps: a, isFocused: n, isFocusVisible: f } = N(), p = {
+    isEmpty: r.collection.size === 0,
+    isFocused: n,
+    isFocusVisible: f,
+    state: r
+  }, u = R({
+    className: e.className,
+    style: e.style,
+    defaultClassName: "react-aria-TagList",
+    values: p
+  }), b = Ae(r.selectionManager.focusedKey), l = D(e, {
+    global: !0
+  });
+  return /* @__PURE__ */ c.createElement("div", {
+    ...x(l, u, s, a),
+    ref: i,
+    "data-empty": r.collection.size === 0 || void 0,
+    "data-focused": n || void 0,
+    "data-focus-visible": f || void 0
+  }, /* @__PURE__ */ c.createElement(Ve, null, r.collection.size === 0 && e.renderEmptyState ? e.renderEmptyState(p) : /* @__PURE__ */ c.createElement(t, {
+    collection: r.collection,
+    persistedKeys: b
+  })));
+}
+const xo = /* @__PURE__ */ Ke(Ie, (e, o, r) => {
+  let t = P(g), s = We(o), { focusProps: i, isFocusVisible: a } = N({
+    within: !1
+  }), { rowProps: n, gridCellProps: f, removeButtonProps: p, ...u } = fo({
+    item: r
+  }, t, s), { hoverProps: b, isHovered: l } = qe({
+    isDisabled: !u.allowsSelection,
+    onHoverStart: r.props.onHoverStart,
+    onHoverChange: r.props.onHoverChange,
+    onHoverEnd: r.props.onHoverEnd
+  }), $ = R({
+    ...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 d = D(e, {
+    global: !0
+  });
+  return delete d.id, delete d.onClick, /* @__PURE__ */ c.createElement("div", {
+    ref: s,
+    ...x(d, $, n, 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__ */ c.createElement("div", {
+    ...f,
+    style: {
+      display: "contents"
+    }
+  }, /* @__PURE__ */ c.createElement(F, {
+    values: [
+      [
+        Fe,
+        {
+          slots: {
+            remove: p
+          }
+        }
+      ],
+      [
+        w,
+        Se
+      ],
+      [
+        Ge,
+        {
+          isSelected: u.isSelected
+        }
+      ]
+    ]
+  }, $.children)));
+}), { withProvider: go, withContext: Be } = /* @__PURE__ */ Re({
+  key: "taggroup"
+}), Do = /* @__PURE__ */ go(bo, "root"), Bo = (e) => {
+  const { ref: o, ...r } = e, t = Be(
+    mo,
+    "tagList"
+  );
+  return /* @__PURE__ */ v(t, { ...r, ref: o });
+}, Po = /* @__PURE__ */ Be(xo, "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(
+  Do,
+  {
+    ref: t,
+    onRemove: o,
+    selectionMode: r,
+    ...s,
+    children: e
+  }
+));
+Pe.displayName = "TagGroup.Root";
+const Ce = ({
+  children: e,
+  ref: o,
+  ...r
+}) => /* @__PURE__ */ v(Bo, { ref: o, ...r, children: e });
+Ce.displayName = "TagGroup.TagList";
+const Co = /* @__PURE__ */ he({
+  removeTag: {
+    id: "Nimbus.TagGroup.removeTag",
+    description: "aria-label for remove tag button",
+    defaultMessage: "Remove tag"
+  }
+}), Ee = ({
+  children: e,
+  ref: o,
+  ...r
+}) => {
+  const t = Te();
+  return /* @__PURE__ */ v(Po, { ref: o, textValue: typeof e == "string" ? e : void 0, ...r, children: ({ allowsRemoving: i, isSelected: a, selectionMode: n }) => /* @__PURE__ */ Le(ke, { children: [
+    e,
+    i && n !== "multiple" && n !== "single" && /* @__PURE__ */ v(
+      lo,
+      {
+        size: "2xs",
+        variant: a ? "solid" : "ghost",
+        slot: "remove",
+        colorPalette: a ? void 0 : "neutral",
+        "aria-label": t.formatMessage(Co.removeTag),
+        children: /* @__PURE__ */ v(we, {})
+      }
+    )
+  ] }) });
+};
+Ee.displayName = "TagGroup.Tag";
+const or = {
+  /**
+   * # 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: Pe,
+  /**
+   * # 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: Ce,
+  /**
+   * # 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: Ee
+};
+export {
+  or as T
+};
+//# sourceMappingURL=tag-group-Aa30DcsU.es.js.map