@ogcio/design-system-react 1.29.0 → 1.31.0

package/dist/autocomplete/autocomplete.js

@@ -1,83 +1,67 @@
 "use client";
-import { jsxs as z, jsx as h } from "react/jsx-runtime";
-import { forwardRef as J, useRef as N, useImperativeHandle as Q, useEffect as W, useCallback as D, createElement as Y, Children as Z, isValidElement as ee } from "react";
-import { cn as P } from "../cn.js";
-import { useDomId as te } from "../hooks/use-dom-id.js";
+import { jsxs as z, jsx as y } from "react/jsx-runtime";
+import { forwardRef as J, useRef as D, useImperativeHandle as Q, useEffect as W, useCallback as P, createElement as Y, Children as Z, isValidElement as ee } from "react";
+import { c as te } from "../index-CB-zPpNk.js";
+import { cn as oe } from "../cn.js";
+import { useDomId as ne } from "../hooks/use-dom-id.js";
 import { translate as G } from "../i18n/utility.js";
-import { InputText as oe } from "../input-text/input-text.js";
-import { Popover as ne } from "../popover/popover.js";
-import { SelectMenu as ae, SelectMenuOption as L, SelectMenuGroupItem as re } from "../select/select-menu.js";
-import { cycleEnabledIndex as le } from "../utilities.js";
-import { AUTOCOMPLETE_ACTIONS as pe } from "./types.js";
-import { useAutocompleteController as ie } from "./use-autocomplete-controller.js";
+import { InputText as re } from "../input-text/input-text.js";
+import { Popover as ae } from "../popover/popover.js";
+import { SelectMenu as le, SelectMenuOption as L, SelectMenuGroupItem as pe } from "../select/select-menu.js";
+import { cycleEnabledIndex as ie } from "../utilities.js";
+import { AUTOCOMPLETE_ACTIONS as se } from "./types.js";
+import { useAutocompleteController as ce } from "./use-autocomplete-controller.js";
 const {
-  ON_RESET: se,
-  ON_SELECT_ITEM: ce,
+  ON_RESET: ue,
+  ON_SELECT_ITEM: de,
   SET_INPUT_VALUE: R,
   SET_IS_OPEN: i,
-  TOGGLE_CLEAR_BUTTON: C,
-  SET_HIGHLIGHTED_INDEX: ue,
-  SET_VALUE: de
-} = pe, me = (a) => a ? "keyboard_arrow_up" : "keyboard_arrow_down", T = (a, r) => (p) => {
-  a && a({
-    target: { name: r, value: p },
-    currentTarget: { name: r, value: p },
-    type: "change",
-    bubbles: !0,
-    isTrusted: !0
-  });
-}, fe = (a, r) => (p) => {
-  a && a({
-    target: { name: r, value: p },
-    currentTarget: { name: r, value: p },
-    type: "blur",
-    bubbles: !0,
-    isTrusted: !0
-  });
-}, ke = J(
-  (a, r) => {
-    var x;
-    const p = N(null), {
-      disabled: l,
-      children: c,
-      placeholder: y,
+  TOGGLE_CLEAR_BUTTON: S,
+  SET_HIGHLIGHTED_INDEX: me,
+  SET_VALUE: fe
+} = se, Pe = J(
+  (r, a) => {
+    var k;
+    const l = D(null), {
+      disabled: p = !1,
+      children: s,
+      placeholder: h,
       onSelectItem: m,
       isLoading: g,
-      freeSolo: s = !1,
+      freeSolo: c = !1,
       onChange: b,
       onBlur: B,
       name: u,
       value: E,
       id: M
-    } = a, v = N(!1), {
+    } = r, v = D(!1), C = be({ freeSolo: c, disabled: p }), {
       state: t,
       dispatch: o,
       inputRef: f,
-      getOptionLabelByValue: S,
-      listRef: A,
-      debouncedFilter: U,
-      validChildren: be
-    } = ie({
-      ...a,
+      getOptionLabelByValue: A,
+      listRef: _,
+      debouncedFilter: U
+    } = ce({
+      ...r,
       onChange: T(b, u)
-    }), _ = te();
-    Q(r, () => f.current), W(() => {
-      E !== void 0 && (o({ type: de, payload: E }), o({
+    }), w = ne();
+    Q(a, () => f.current), W(() => {
+      E !== void 0 && (o({ type: fe, payload: E }), o({
         type: R,
-        payload: S(c, E)
-      }), o({ type: C }));
+        payload: A(s, E)
+      }), o({ type: S }));
     }, [E]);
-    const w = a["aria-label"] ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }), V = (e) => {
-      o({ type: i, payload: e }), e || o({ type: C, payload: !1 });
+    const x = r["aria-label"] ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }), V = (e) => {
+      o({ type: i, payload: e }), e || o({ type: S, payload: !1 });
     }, H = () => {
-      o({ type: se }), o({ type: i, payload: !1 }), T(b, u)("");
+      o({ type: ue }), o({ type: i, payload: !1 }), T(b, u)("");
     }, j = (e) => {
-      o({ type: R, payload: e }), s && T(b, u)(e), e && o({ type: i, payload: !0 }), U(e);
+      o({ type: R, payload: e }), c && T(b, u)(e), e && o({ type: i, payload: !0 }), U(e);
     }, $ = (e) => {
       const {
         target: { value: n }
       } = e;
-      e.__origin === "clear_button" && H(), !/^\s/.test(n) && (j(n), o({ type: C }), setTimeout(() => {
+      e.__origin === "clear_button" && H(), !/^\s/.test(n) && (j(n), o({ type: S }), setTimeout(() => {
         var d;
         return (d = f.current) == null ? void 0 : d.focus();
       }));
@@ -89,12 +73,12 @@ const {
         type: i,
         payload: !0
       });
-    }, I = D(
+    }, I = P(
       (e) => {
         o({
-          type: ce,
+          type: de,
           payload: {
-            inputValue: S(c, e),
+            inputValue: A(s, e),
             value: e
           }
         }), T(b, u)(e), setTimeout(() => {
@@ -102,28 +86,28 @@ const {
           (n = f.current) == null || n.focus();
         }, 0), m == null || m(e);
       },
-      [c, o, u, b, m]
+      [s, o, u, b, m]
     ), X = (e) => {
-      var O, k;
+      var O, N;
       const { relatedTarget: n } = e;
-      if (n && ((O = A.current) != null && O.contains(n) || (k = p.current) != null && k.contains(n)) || v.current) {
+      if (n && ((O = _.current) != null && O.contains(n) || (N = l.current) != null && N.contains(n)) || v.current) {
         setTimeout(() => v.current = !1, 0);
         return;
       }
       const d = t.value ?? t.inputValue ?? "";
-      fe(B, u)(d);
-    }, q = D(
+      Ie(B, u)(d);
+    }, q = P(
       (e) => {
         switch (e.key) {
           case "ArrowDown":
           case "ArrowUp": {
             e.preventDefault();
-            const n = () => t.highlightedIndex === -1 ? d === -1 ? 0 : -1 : t.highlightedIndex, d = e.key === "ArrowDown" ? 1 : -1, O = le(
+            const n = () => t.highlightedIndex === -1 ? d === -1 ? 0 : -1 : t.highlightedIndex, d = e.key === "ArrowDown" ? 1 : -1, O = ie(
               t.autocompleteOptions,
               n(),
               d
             );
-            o({ type: ue, payload: O }), o({ type: i, payload: !0 });
+            o({ type: me, payload: O }), o({ type: i, payload: !0 });
             break;
           }
           case "Enter":
@@ -149,12 +133,12 @@ const {
     return /* @__PURE__ */ z(
       "div",
       {
-        "aria-disabled": l,
-        className: P("gi-autocomplete gi-not-prose", a.className),
+        "aria-disabled": p,
+        className: oe(C.root(), r.className),
         children: [
-          /* @__PURE__ */ h("span", { id: _, className: "gi-sr-only", children: w }),
-          /* @__PURE__ */ h(
-            oe,
+          /* @__PURE__ */ y("span", { id: w, className: "gi-sr-only", children: x }),
+          /* @__PURE__ */ y(
+            re,
             {
               autoComplete: "off",
               id: M,
@@ -166,28 +150,25 @@ const {
               onBlur: X,
               clearButtonEnabled: t.isClearButtonEnabled,
               inputActionPosition: "beforeSuffix",
-              "aria-label": w,
-              "aria-labelledby": _,
-              "aria-disabled": l,
-              disabled: l,
-              placeholder: y ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }),
-              iconEndClassName: P({
-                "gi-cursor-pointer": !l && !s,
-                "gi-cursor-not-allowed gi-pointer-events-none": l && !s
-              }),
-              iconEnd: s ? void 0 : me(t.isOpen),
+              "aria-label": x,
+              "aria-labelledby": w,
+              "aria-disabled": p,
+              disabled: p,
+              placeholder: h ?? G("autocomplete.placeholder", { defaultValue: "Type to Search" }),
+              iconEndClassName: C.iconEnd(),
+              iconEnd: c ? void 0 : Ee(t.isOpen),
               ref: f,
-              iconEndRef: p,
+              iconEndRef: l,
               value: t.inputValue,
               "data-highlighted-index": t.highlightedIndex
             }
           ),
-          /* @__PURE__ */ h(
-            ne,
+          /* @__PURE__ */ y(
+            ae,
             {
               onOpenChange: V,
               triggerRef: f,
-              extraRefs: [p],
+              extraRefs: [l],
               open: t.isOpen,
               maxHeight: 304,
               options: {
@@ -201,14 +182,14 @@ const {
                   }
                 ]
               },
-              children: /* @__PURE__ */ h(
-                ae,
+              children: /* @__PURE__ */ y(
+                le,
                 {
                   onChange: I,
                   isLoading: g,
-                  showNoData: !((x = t.autocompleteOptions) != null && x.length),
-                  ref: A,
-                  children: he(
+                  showNoData: !((k = t.autocompleteOptions) != null && k.length),
+                  ref: _,
+                  children: ye(
                     t.autocompleteOptions,
                     t,
                     I
@@ -221,44 +202,44 @@ const {
       }
     );
   }
-), he = (a, r, p) => a.map((l, c) => {
-  if (r.optionType === "AutocompleteItem")
+), ye = (r, a, l) => r.map((p, s) => {
+  if (a.optionType === "AutocompleteItem")
     return /* @__PURE__ */ Y(
       L,
       {
-        ...l.props,
-        key: `AutocompleteItem-${l.props.value}`,
-        selected: r.value === l.props.value,
-        isHighlighted: c === r.highlightedIndex,
-        index: c
+        ...p.props,
+        key: `AutocompleteItem-${p.props.value}`,
+        selected: a.value === p.props.value,
+        isHighlighted: s === a.highlightedIndex,
+        index: s
       }
     );
-  if (r.optionType === "AutocompleteGroupItem") {
-    const y = l, m = Z.toArray(y.props.children).filter((g) => ee(g)).map((g) => {
-      const s = g.props;
-      return /* @__PURE__ */ h(
+  if (a.optionType === "AutocompleteGroupItem") {
+    const h = p, m = Z.toArray(h.props.children).filter((g) => ee(g)).map((g) => {
+      const c = g.props;
+      return /* @__PURE__ */ y(
         L,
         {
-          ...s,
-          selected: r.value.toString() === s.value.toString(),
-          onChange: p,
-          index: c
+          ...c,
+          selected: a.value.toString() === c.value.toString(),
+          onChange: l,
+          index: s
         },
-        `SelectGroupItemNext-SelectItemNext-${s.value.toString()}`
+        `SelectGroupItemNext-SelectItemNext-${c.value.toString()}`
       );
     });
-    return /* @__PURE__ */ h(
-      re,
+    return /* @__PURE__ */ y(
+      pe,
       {
-        label: y.props.label,
+        label: h.props.label,
         children: m
       },
-      `Group-${y.props.label}`
+      `Group-${h.props.label}`
     );
   }
   return null;
-}), ye = () => null;
-Object.defineProperty(ye, "componentType", {
+}), he = () => null;
+Object.defineProperty(he, "componentType", {
   value: "AutocompleteItem",
   writable: !1,
   enumerable: !1
@@ -269,9 +250,44 @@ Object.defineProperty(ge, "componentType", {
   writable: !1,
   enumerable: !1
 });
+const be = te({
+  slots: {
+    root: "gi-relative gi-w-full gi-not-prose",
+    iconEnd: ""
+  },
+  variants: {
+    freeSolo: {
+      true: {},
+      false: {
+        iconEnd: "gi-cursor-pointer"
+      }
+    },
+    disabled: {
+      true: {
+        iconEnd: "gi-cursor-not-allowed gi-pointer-events-none"
+      }
+    }
+  }
+}), Ee = (r) => r ? "keyboard_arrow_up" : "keyboard_arrow_down", T = (r, a) => (l) => {
+  r == null || r({
+    target: { name: a, value: l },
+    currentTarget: { name: a, value: l },
+    type: "change",
+    bubbles: !0,
+    isTrusted: !0
+  });
+}, Ie = (r, a) => (l) => {
+  r && r({
+    target: { name: a, value: l },
+    currentTarget: { name: a, value: l },
+    type: "blur",
+    bubbles: !0,
+    isTrusted: !0
+  });
+};
 export {
-  ke as Autocomplete,
+  Pe as Autocomplete,
   ge as AutocompleteGroupItem,
-  ye as AutocompleteItem,
-  he as renderSelectMenuOptions
+  he as AutocompleteItem,
+  ye as renderSelectMenuOptions
 };

package/dist/blockquote/blockquote.d.ts

@@ -1,3 +1,6 @@
 import { default as React } from 'react';
 export type BlockquoteProps = React.QuoteHTMLAttributes<HTMLQuoteElement>;
-export declare function Blockquote({ children, cite, ...props }: BlockquoteProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use `InsetText` instead. `Blockquote` is kept as an alias for backward compatibility.
+ */
+export declare function Blockquote(props: BlockquoteProps): import("react/jsx-runtime").JSX.Element;

package/dist/blockquote/blockquote.js

@@ -1,7 +1,21 @@
-import { jsx as c } from "react/jsx-runtime";
-function u({ children: o, cite: t, ...e }) {
-  return /* @__PURE__ */ c("blockquote", { className: "gi-blockquote", cite: t, ...e, children: o });
+import { jsx as l } from "react/jsx-runtime";
+import s from "../atoms/InsetText.js";
+const a = ({
+  id: e,
+  cite: r,
+  children: t,
+  "aria-describedby": o,
+  "aria-labelledby": i
+}) => ({
+  id: e,
+  cite: r,
+  children: t,
+  describedBy: o,
+  labelledBy: i
+});
+function n(e) {
+  return /* @__PURE__ */ l(s, { ...a(e) });
 }
 export {
-  u as Blockquote
+  n as Blockquote
 };

package/dist/breadcrumbs/breadcrumbs.js

@@ -1,44 +1,65 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { translate as c } from "../i18n/utility.js";
-import { Icon as t } from "../icon/icon.js";
-import { Link as o } from "../link/link.js";
-const h = () => /* @__PURE__ */ r("div", { "aria-hidden": "true", children: /* @__PURE__ */ r(t, { className: "gi-text-gray-700", icon: "more_horiz" }) }), n = ({
-  href: e,
-  children: a,
-  asChild: s,
-  ...i
-}) => /* @__PURE__ */ r(
-  o,
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { translate as m } from "../i18n/utility.js";
+import { Icon as n } from "../icon/icon.js";
+import { Link as c } from "../link/link.js";
+const f = () => /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(n, { className: "gi-text-gray-700", icon: "more_horiz" }) }), o = ({
+  href: r,
+  children: i,
+  asChild: a,
+  ...s
+}) => /* @__PURE__ */ e(
+  c,
   {
     noColor: !0,
-    asChild: s,
-    href: e,
-    "aria-label": `${a} page`,
+    asChild: a,
+    href: r,
+    "aria-label": `${i} page`,
     size: "sm",
-    className: "gi-breadcrumbs-link",
-    ...i,
-    children: a
+    className: "gi-text-ellipsis gi-whitespace-nowrap gi-line-clamp-1",
+    ...s,
+    children: i
   }
-), f = (e) => /* @__PURE__ */ r(n, { ...e, "aria-current": "page" }), b = () => /* @__PURE__ */ r("span", { className: "gi-breadcrumbs-separator", children: "/" }), B = ({ children: e, iconStart: a }) => {
-  const s = Array.isArray(e) ? e : [e];
-  return /* @__PURE__ */ r(
+), x = (r) => /* @__PURE__ */ e(o, { ...r, "aria-current": "page" }), g = () => /* @__PURE__ */ e("span", { className: "gi-px-3 gi-text-gray-500", children: "/" }), h = ({ children: r, iconStart: i }) => {
+  const a = Array.isArray(r) ? r : [r];
+  return /* @__PURE__ */ e(
     "nav",
     {
-      "aria-label": c("breadcrumbs.breadcrumbs", { defaultValue: "Breadcrumbs" }),
-      className: "gi-breadcrumbs",
-      children: /* @__PURE__ */ m("ol", { role: "list", children: [
-        a && /* @__PURE__ */ r("li", { role: "listitem", className: "gi-pr-1", children: /* @__PURE__ */ r(t, { "aria-label": "chevron-left", icon: "chevron_left", size: "sm" }) }),
-        s.map((i, l) => /* @__PURE__ */ m("li", { role: "listitem", children: [
-          i,
-          l < s.length - 1 && /* @__PURE__ */ r(b, {})
-        ] }, `breadcrumb_item_${l}`))
-      ] })
+      "aria-label": m("breadcrumbs.breadcrumbs", { defaultValue: "Breadcrumbs" }),
+      className: "gi-flex gi-items-center gi-gap-1",
+      children: /* @__PURE__ */ t(
+        "ol",
+        {
+          role: "list",
+          className: `
+          gi-flex
+          gi-list-none
+          gi-flex-wrap
+          [&>li]:gi-flex
+          [&>li]:gi-items-center
+          `,
+          children: [
+            i && /* @__PURE__ */ e("li", { role: "listitem", className: "gi-pr-1", children: /* @__PURE__ */ e(n, { "aria-label": "chevron-left", icon: "chevron_left", size: "sm" }) }),
+            a.map((s, l) => /* @__PURE__ */ t(
+              "li",
+              {
+                className: "gi-mx-0",
+                role: "listitem",
+                children: [
+                  s,
+                  l < a.length - 1 && /* @__PURE__ */ e(g, {})
+                ]
+              },
+              `breadcrumb_item_${l}`
+            ))
+          ]
+        }
+      )
     }
   );
 };
 export {
-  f as BreadcrumbCurrentLink,
-  h as BreadcrumbEllipsis,
-  n as BreadcrumbLink,
-  B as Breadcrumbs
+  x as BreadcrumbCurrentLink,
+  f as BreadcrumbEllipsis,
+  o as BreadcrumbLink,
+  h as Breadcrumbs
 };

package/dist/button-group/button-group.js

@@ -1,20 +1,20 @@
 "use client";
-import { jsx as y } from "react/jsx-runtime";
-import { createContext as G, useState as V, useEffect as k, useContext as S } from "react";
-import { Button as w } from "../button/button.js";
-import { cn as E } from "../cn.js";
-import { useDomId as $ } from "../hooks/use-dom-id.js";
-const x = G(
+import { jsx as x } from "react/jsx-runtime";
+import { createContext as G, useState as V, useEffect as k, useContext as w } from "react";
+import { Button as S } from "../button/button.js";
+import { cn as g } from "../cn.js";
+import { useDomId as j } from "../hooks/use-dom-id.js";
+const I = G(
   void 0
-), P = ({
+), D = ({
   value: r,
-  children: d,
-  role: s,
+  children: s,
+  role: d,
   "aria-checked": e,
   "aria-label": a,
   ...t
 }) => {
-  const c = S(x);
+  const c = w(I);
   if (!c)
     throw new Error("ButtonGroupItem must be used within a ButtonGroup");
   const {
@@ -27,26 +27,26 @@ const x = G(
   } = c, i = n === r, b = () => {
     l(r), o == null || o(r);
   }, f = `${m}-${r}`;
-  return /* @__PURE__ */ y(
-    w,
+  return /* @__PURE__ */ x(
+    S,
     {
       variant: i ? "primary" : "secondary",
       size: u,
       appearance: p,
       onClick: b,
       id: f,
-      role: s || "radio",
+      role: d || "radio",
       "aria-checked": e === void 0 ? i : e,
       "aria-label": a,
       type: "button",
       ...t,
-      children: d
+      children: s
     }
   );
-}, q = ({
+}, N = ({
   name: r,
-  size: d = "medium",
-  appearance: s = "dark",
+  size: s = "medium",
+  appearance: d = "dark",
   onChange: e,
   defaultValue: a,
   value: t,
@@ -63,26 +63,29 @@ const x = G(
   k(() => {
     t !== void 0 && i(t);
   }, [t]);
-  const f = (I) => {
-    t === void 0 && i(I), e == null || e(I);
-  }, B = $();
-  return /* @__PURE__ */ y(
-    x.Provider,
+  const f = (y) => {
+    t === void 0 && i(y), e == null || e(y);
+  }, B = j();
+  return /* @__PURE__ */ x(
+    I.Provider,
     {
       value: {
         selectedValue: b,
         setSelectedValue: f,
         name: r,
-        size: d,
+        size: s,
         onChange: e,
         groupId: B,
-        appearance: s,
+        appearance: d,
         ...m
       },
-      children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ x(
         "div",
         {
-          className: E("gi-btn-group", o),
+          className: g(
+            "gi-flex gi-flex-wrap gi-gap-3 [&_button]:gi-min-w-12 [&_button]:gi-justify-center",
+            o
+          ),
           role: n || "radiogroup",
           "aria-labelledby": l,
           "aria-describedby": u,
@@ -93,6 +96,6 @@ const x = G(
   );
 };
 export {
-  q as ButtonGroup,
-  P as ButtonGroupItem
+  N as ButtonGroup,
+  D as ButtonGroupItem
 };

package/dist/character-count/character-count.js

@@ -4,15 +4,15 @@ import { HintText as n } from "../hint-text/hint-text.js";
 import { translate as i } from "../i18n/utility.js";
 const m = ({
   maxChars: e,
-  value: r
+  value: t
 }) => {
-  const t = Math.max(0, e - ((r == null ? void 0 : r.length) ?? 0));
-  return /* @__PURE__ */ a("div", { className: "gi-textarea-remaining-chars", children: /* @__PURE__ */ a(
+  const r = Math.max(0, e - ((t == null ? void 0 : t.length) ?? 0));
+  return /* @__PURE__ */ a("div", { className: "gi-mt-2", children: /* @__PURE__ */ a(
     n,
     {
       text: i("textarea.remainingChars", {
-        remainingChars: t,
-        defaultValue: `You have ${t} characters remaining`
+        remainingChars: r,
+        defaultValue: `You have ${r} characters remaining`
       })
     }
   ) });