@ogcio/design-system-react 1.20.0 → 1.22.0

package/dist/autocomplete/autocomplete.js

@@ -1,153 +1,161 @@
 "use client";
 import "@ogcio/design-system-react/browser-check";
-import { jsxs as J, jsx as O } from "react/jsx-runtime";
-import { forwardRef as Q, useRef as G, useImperativeHandle as W, useEffect as Y, createElement as Z, Children as ee, isValidElement as te } from "react";
-import { cn as P } from "../cn.js";
-import { translate as D } from "../i18n/utility.js";
+import { jsxs as J, jsx as b } from "react/jsx-runtime";
+import { forwardRef as Q, useRef as D, useImperativeHandle as W, useEffect as Y, createElement as Z, Children as ee, isValidElement as te } from "react";
+import { cn as G } from "../cn.js";
+import { translate as P } 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 le, SelectMenuOption as L, SelectMenuGroupItem as re } from "../select/select-menu.js";
-import { AUTOCOMPLETE_ACTIONS as ae } from "./types.js";
+import { SelectMenu as ae, SelectMenuOption as L, SelectMenuGroupItem as re } from "../select/select-menu.js";
+import { AUTOCOMPLETE_ACTIONS as le } from "./types.js";
 import { useAutocompleteController as pe } from "./use-autocomplete-controller.js";
 const {
   ON_RESET: ie,
   ON_SELECT_ITEM: se,
   SET_INPUT_VALUE: R,
-  SET_IS_OPEN: d,
-  TOGGLE_CLEAR_BUTTON: v,
+  SET_IS_OPEN: c,
+  TOGGLE_CLEAR_BUTTON: S,
   SET_HIGHLIGHTED_INDEX: B,
   SET_VALUE: ce
-} = ae, ue = (n) => n ? "keyboard_arrow_up" : "keyboard_arrow_down", C = (n, l) => (p) => {
+} = le, ue = (n) => n ? "keyboard_arrow_up" : "keyboard_arrow_down", C = (n, a) => (p) => {
   n && n({
-    target: {
-      name: l,
-      value: p
-    },
-    currentTarget: {
-      name: l,
-      value: p
-    },
+    target: { name: a, value: p },
+    currentTarget: { name: a, value: p },
     type: "change",
     bubbles: !0,
     isTrusted: !0
   });
-}, M = (n, l) => (p) => {
+}, M = (n, a) => (p) => {
   n && n({
-    target: { name: l, value: p },
-    currentTarget: { name: l, value: p },
+    target: { name: a, value: p },
+    currentTarget: { name: a, value: p },
     type: "blur",
     bubbles: !0,
     isTrusted: !0
   });
 }, Ae = Q(
-  (n, l) => {
+  (n, a) => {
     var N;
-    const p = G(null), {
+    const p = D(null), {
       disabled: r,
-      children: f,
+      children: m,
       placeholder: h,
       onSelectItem: y,
       isLoading: g,
       freeSolo: s = !1,
-      onChange: b,
+      onChange: E,
       onBlur: A,
-      name: c,
-      value: E,
+      name: u,
+      value: O,
       id: U
-    } = n, _ = G(!1), {
+    } = n, _ = D(!1), {
       state: t,
       dispatch: o,
-      inputRef: m,
+      inputRef: f,
       getOptionLabelByValue: x,
       listRef: w,
       debouncedFilter: V
     } = pe({
       ...n,
-      onChange: C(b, c)
+      onChange: C(E, u)
     });
-    W(l, () => m.current), Y(() => {
-      E !== void 0 && (o({ type: ce, payload: E }), o({
+    W(a, () => f.current), Y(() => {
+      O !== void 0 && (o({ type: ce, payload: O }), o({
         type: R,
-        payload: x(f, E)
-      }), o({ type: v }));
-    }, [E]);
+        payload: x(m, O)
+      }), o({ type: S }));
+    }, [O]);
     const H = (e) => {
-      o({ type: d, payload: e }), e || o({ type: v, payload: !1 });
+      o({ type: c, payload: e }), e || o({ type: S, payload: !1 });
     }, j = () => {
-      o({ type: ie }), o({ type: d, payload: !1 }), C(b, c)("");
+      o({ type: ie }), o({ type: c, payload: !1 }), C(E, u)("");
     }, $ = (e) => {
-      o({ type: R, payload: e }), s && C(b, c)(e), e && o({ type: d, payload: !0 }), V(e);
+      o({ type: R, payload: e }), s && C(E, u)(e), e && o({ type: c, payload: !0 }), V(e);
     }, K = (e) => {
       const {
-        target: { value: a }
+        target: { value: l }
       } = e;
-      e.__origin === "clear_button" ? j() : $(a), o({ type: v }), setTimeout(() => {
-        var u;
-        return (u = m.current) == null ? void 0 : u.focus();
+      e.__origin === "clear_button" ? j() : $(l), o({ type: S }), setTimeout(() => {
+        var d;
+        return (d = f.current) == null ? void 0 : d.focus();
       });
     }, F = () => {
       var e;
-      o({ type: d, payload: !t.isOpen }), (e = m.current) == null || e.focus();
+      o({ type: c, payload: !t.isOpen }), (e = f.current) == null || e.focus();
     }, X = () => {
       t.isOpen || o({
-        type: d,
+        type: c,
         payload: !0
       });
-    }, S = (e) => {
+    }, v = (e) => {
       o({
         type: se,
         payload: {
-          inputValue: x(f, e),
+          inputValue: x(m, e),
           value: e
         }
-      }), C(b, c)(e), setTimeout(() => {
-        var a;
-        M(A, c)(e), (a = m.current) == null || a.blur();
+      }), C(E, u)(e), setTimeout(() => {
+        var l;
+        M(A, u)(e), (l = f.current) == null || l.blur();
       }, 0), y == null || y(e);
     }, q = (e) => {
       var i, I;
-      const { relatedTarget: a } = e;
-      if (a && ((i = w.current) != null && i.contains(a) || (I = p.current) != null && I.contains(a)) || _.current) {
+      const { relatedTarget: l } = e;
+      if (l && ((i = w.current) != null && i.contains(l) || (I = p.current) != null && I.contains(l)) || _.current) {
         setTimeout(() => _.current = !1, 0);
         return;
       }
-      const u = t.value ?? t.inputValue ?? "";
-      M(A, c)(u);
+      const d = t.value ?? t.inputValue ?? "";
+      M(A, u)(d);
     }, z = (e) => {
-      const a = t.autocompleteOptions.length, u = (i, I) => {
+      const l = t.autocompleteOptions.length, d = (i, I) => {
         let T = i;
-        for (let k = 0; k < a; k++)
-          if (T = (T + I + a) % a, !t.autocompleteOptions[T].props.disabled)
+        for (let k = 0; k < l; k++)
+          if (T = (T + I + l) % l, !t.autocompleteOptions[T].props.disabled)
             return T;
         return -1;
       };
-      if (e.key === "ArrowDown")
-        e.preventDefault(), o({
-          type: B,
-          payload: t.isOpen ? u(t.highlightedIndex, 1) : 0
-        }), o({ type: d, payload: !0 });
-      else if (e.key === "ArrowUp")
-        e.preventDefault(), o({
-          type: B,
-          payload: u(t.highlightedIndex, -1)
-        }), o({ type: d, payload: !0 });
-      else if (e.key === "Enter" && t.highlightedIndex >= 0) {
-        const i = t.autocompleteOptions[t.highlightedIndex];
-        i && i.props.value && !i.props.disabled && S(i.props.value);
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault(), o({
+            type: B,
+            payload: t.isOpen ? d(t.highlightedIndex, 1) : 0
+          }), o({ type: c, payload: !0 });
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault(), o({
+            type: B,
+            payload: d(t.highlightedIndex, -1)
+          }), o({ type: c, payload: !0 });
+          break;
+        }
+        case "Enter":
+        case "NumpadEnter": {
+          if (e.preventDefault(), t.highlightedIndex >= 0) {
+            const i = t.autocompleteOptions[t.highlightedIndex];
+            i && i.props.value && !i.props.disabled && v(i.props.value);
+          }
+          break;
+        }
+        case "Escape": {
+          o({ type: c, payload: !1 });
+          break;
+        }
       }
     };
     return /* @__PURE__ */ J(
       "div",
       {
         "aria-disabled": r,
-        className: P("gi-autocomplete gi-not-prose", n.className),
+        className: G("gi-autocomplete gi-not-prose", n.className),
         children: [
-          /* @__PURE__ */ O(
+          /* @__PURE__ */ b(
             oe,
             {
               autoComplete: "off",
               id: U,
-              name: c,
+              name: u,
               onKeyDown: z,
               onIconEndClick: F,
               onChange: K,
@@ -155,28 +163,28 @@ const {
               onBlur: q,
               clearButtonEnabled: t.isClearButtonEnabled,
               inputActionPosition: "beforeSuffix",
-              "aria-label": D("autocomplete.placeholder", {
+              "aria-label": P("autocomplete.placeholder", {
                 defaultValue: "Type to Search"
               }),
               "aria-disabled": r,
               disabled: r,
-              placeholder: h ?? D("autocomplete.placeholder", { defaultValue: "Type to Search" }),
-              iconEndClassName: P({
+              placeholder: h ?? P("autocomplete.placeholder", { defaultValue: "Type to Search" }),
+              iconEndClassName: G({
                 "gi-cursor-pointer": !r && !s,
                 "gi-cursor-not-allowed gi-pointer-events-none": r && !s
               }),
               iconEnd: s ? void 0 : ue(t.isOpen),
-              ref: m,
+              ref: f,
               iconEndRef: p,
               value: t.inputValue,
               "data-highlighted-index": t.highlightedIndex
             }
           ),
-          /* @__PURE__ */ O(
+          /* @__PURE__ */ b(
             ne,
             {
               onOpenChange: H,
-              triggerRef: m,
+              triggerRef: f,
               extraRefs: [p],
               open: t.isOpen,
               maxHeight: 304,
@@ -191,17 +199,17 @@ const {
                   }
                 ]
               },
-              children: /* @__PURE__ */ O(
-                le,
+              children: /* @__PURE__ */ b(
+                ae,
                 {
-                  onChange: S,
+                  onChange: v,
                   isLoading: g,
                   showNoData: !((N = t.autocompleteOptions) != null && N.length),
                   ref: w,
                   children: de(
                     t.autocompleteOptions,
                     t,
-                    S
+                    v
                   )
                 }
               )
@@ -211,33 +219,33 @@ const {
       }
     );
   }
-), de = (n, l, p) => n.map((r, f) => {
-  if (l.optionType === "AutocompleteItem")
+), de = (n, a, p) => n.map((r, m) => {
+  if (a.optionType === "AutocompleteItem")
     return /* @__PURE__ */ Z(
       L,
       {
         ...r.props,
         key: `AutocompleteItem-${r.props.value}`,
-        selected: l.value === r.props.value,
-        isHighlighted: f === l.highlightedIndex,
-        index: f
+        selected: a.value === r.props.value,
+        isHighlighted: m === a.highlightedIndex,
+        index: m
       }
     );
-  if (l.optionType === "AutocompleteGroupItem") {
+  if (a.optionType === "AutocompleteGroupItem") {
     const h = r, y = ee.toArray(h.props.children).filter((g) => te(g)).map((g) => {
       const s = g.props;
-      return /* @__PURE__ */ O(
+      return /* @__PURE__ */ b(
         L,
         {
           ...s,
-          selected: l.value.toString() === s.value.toString(),
+          selected: a.value.toString() === s.value.toString(),
           onChange: p,
-          index: f
+          index: m
         },
         `SelectGroupItemNext-SelectItemNext-${s.value.toString()}`
       );
     });
-    return /* @__PURE__ */ O(
+    return /* @__PURE__ */ b(
       re,
       {
         label: h.props.label,
@@ -247,21 +255,21 @@ const {
     );
   }
   return null;
-}), fe = () => null;
-Object.defineProperty(fe, "componentType", {
+}), me = () => null;
+Object.defineProperty(me, "componentType", {
   value: "AutocompleteItem",
   writable: !1,
   enumerable: !1
 });
-const me = () => null;
-Object.defineProperty(me, "componentType", {
+const fe = () => null;
+Object.defineProperty(fe, "componentType", {
   value: "AutocompleteGroupItem",
   writable: !1,
   enumerable: !1
 });
 export {
   Ae as Autocomplete,
-  me as AutocompleteGroupItem,
-  fe as AutocompleteItem,
+  fe as AutocompleteGroupItem,
+  me as AutocompleteItem,
   de as renderSelectMenuOptions
 };

package/dist/card/card-legacy.d.ts

@@ -1,5 +1,5 @@
 import { CardProps } from './types.js';
 export declare const CardLegacy: {
-    ({ type, title, inset, subTitle, media, content, action, href, tag, dataTestid, titleAsChild, children, }: CardProps): import("react/jsx-runtime").JSX.Element;
+    ({ type, title, inset, subTitle, media, content, action, href, tag, titleAsChild, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/card/card-legacy.js

@@ -1,21 +1,21 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Button as b } from "../button/button.js";
+import { Button as k } from "../button/button.js";
 import { translate as c } from "../i18n/utility.js";
 import { Link as u } from "../link/link.js";
-import { CardNext as k, CardMedia as T, CardContainer as L, CardHeader as V, CardTitle as $, CardSubtitle as j, CardTag as A, CardDescription as B, CardAction as H } from "./card-next.js";
+import { CardNext as b, CardMedia as L, CardContainer as T, CardHeader as V, CardTitle as $, CardSubtitle as j, CardTag as A, CardDescription as B, CardAction as H } from "./card-next.js";
 const N = ({
   type: C = "vertical",
   title: d,
-  inset: t = "none",
-  subTitle: p,
+  inset: p = "none",
+  subTitle: t,
   media: o,
   content: m,
   action: h,
   href: n,
   tag: l,
-  dataTestid: s,
   titleAsChild: a,
-  children: y
+  children: s,
+  ...y
 }) => {
   const f = () => !d || !n && !a ? d || "" : /* @__PURE__ */ e(
     u,
@@ -26,7 +26,7 @@ const N = ({
         title: d,
         defaultValue: `Card link: ${d}`
       }),
-      children: a ? y : d
+      children: a ? s : d
     }
   ), x = (r) => r.type === "link" ? /* @__PURE__ */ e(
     u,
@@ -39,7 +39,7 @@ const N = ({
       children: r.children
     }
   ) : /* @__PURE__ */ e(
-    b,
+    k,
     {
       ...r,
       "aria-label": c("card.actionButton", {
@@ -49,12 +49,12 @@ const N = ({
       children: r.children
     }
   );
-  return /* @__PURE__ */ i(k, { inset: t, type: C, dataTestid: s, children: [
-    o && /* @__PURE__ */ e(T, { media: o, href: n }),
-    /* @__PURE__ */ i(L, { inset: t, children: [
+  return /* @__PURE__ */ i(b, { inset: p, type: C, ...y, children: [
+    o && /* @__PURE__ */ e(L, { media: o, href: n }),
+    /* @__PURE__ */ i(T, { children: [
       /* @__PURE__ */ i(V, { children: [
         /* @__PURE__ */ e($, { children: f() }),
-        /* @__PURE__ */ e(j, { children: p }),
+        t && /* @__PURE__ */ e(j, { children: t }),
         l && /* @__PURE__ */ e(A, { text: l.text, type: l.type })
       ] }),
       /* @__PURE__ */ e(B, { children: m }),

package/dist/card/card-next.d.ts

@@ -1,13 +1,12 @@
 import { Context, FC } from 'react';
-import { TagProps } from '../tag/tag.js';
-import { CardDescriptionProps, CardContainerProps, CardActionProps, CardHeaderProps, CardMediaProps, CardNextProps, CardSubtitleProps, CardTitleProps } from './types.js';
+import { CardDescriptionProps, CardContainerProps, CardActionProps, CardHeaderProps, CardMediaProps, CardNextProps, CardSubtitleProps, CardTitleProps, CardTagProps } from './types.js';
 export declare function useRequiredContext(context: Context<boolean>, componentName: string, parentName: string): true;
 export declare const CardNext: FC<CardNextProps>;
 export declare const CardMedia: FC<CardMediaProps>;
 export declare const CardContainer: FC<CardContainerProps>;
 export declare const CardTitle: FC<CardTitleProps>;
 export declare const CardSubtitle: FC<CardSubtitleProps>;
-export declare const CardTag: FC<TagProps>;
+export declare const CardTag: FC<CardTagProps>;
 export declare const CardHeader: FC<CardHeaderProps>;
 export declare const CardDescription: FC<CardDescriptionProps>;
 export declare const CardAction: FC<CardActionProps>;