@ogcio/design-system-react 1.13.0 → 1.15.0

package/dist/autocomplete/use-autocomplete-controller.js

@@ -1,31 +1,36 @@
-import { l as B } from "../lodash-D1c5hFAM.js";
-import { useRef as _, useMemo as v, Children as x, useReducer as R, useEffect as y, isValidElement as U } from "react";
-import { AUTOCOMPLETE_ACTIONS as w } from "./types.js";
+import { l as D } from "../lodash-D1c5hFAM.js";
+import { useRef as O, useMemo as v, Children as V, useReducer as F, useEffect as T, isValidElement as g, cloneElement as X } from "react";
+import { useScrollHighlightedItem as Y } from "../hooks/use-scroll-highlighted-item.js";
+import { AUTOCOMPLETE_ACTIONS as j } from "./types.js";
 const {
-  ON_RESET: V,
-  ON_SELECT_ITEM: C,
-  SET_INPUT_VALUE: L,
-  SET_IS_OPEN: f,
-  SET_OPTIONS: c,
-  TOGGLE_CLEAR_BUTTON: b,
-  SET_VALUE: E,
-  SET_HIGHLIGHTED_INDEX: G
-} = w, M = (e, t) => {
+  ON_RESET: R,
+  ON_SELECT_ITEM: k,
+  SET_INPUT_VALUE: P,
+  SET_IS_OPEN: G,
+  SET_OPTIONS: _,
+  TOGGLE_CLEAR_BUTTON: U,
+  SET_VALUE: w,
+  SET_HIGHLIGHTED_INDEX: S,
+  SET_OPTION_TYPE: H
+} = j, q = (e, t) => {
   switch (t.type) {
-    case f:
+    case G:
       return { ...e, isOpen: t.payload };
-    case L:
+    case P:
       return { ...e, inputValue: t.payload };
-    case c:
-      return { ...e, autocompleteOptions: t.payload || [] };
-    case E:
+    case _:
+      return {
+        ...e,
+        autocompleteOptions: t.payload || []
+      };
+    case w:
       return { ...e, value: t.payload };
-    case b:
+    case U:
       return {
         ...e,
         isClearButtonEnabled: t.payload || !!e.inputValue
       };
-    case V:
+    case R:
       return {
         ...e,
         value: "",
@@ -33,7 +38,7 @@ const {
         isClearButtonEnabled: !1,
         highlightedIndex: -1
       };
-    case C:
+    case k:
       return {
         ...e,
         inputValue: t.payload.inputValue,
@@ -41,85 +46,124 @@ const {
         isOpen: !1,
         isClearButtonEnabled: !0
       };
-    case G:
-      return { ...e, highlightedIndex: t.payload, isOpen: !0 };
+    case S:
+      return { ...e, highlightedIndex: t.payload };
+    case H:
+      return { ...e, optionType: t.payload };
     default:
       return e;
   }
-}, P = (e) => {
-  var p, r;
-  const t = ((p = e == null ? void 0 : e.type) == null ? void 0 : p.componentType) || ((r = e == null ? void 0 : e.props) == null ? void 0 : r.__mdxType);
-  return U(e) && t === "AutocompleteItem";
-}, H = (e, t) => {
-  var i, a;
-  const p = ((i = e.props.children) == null ? void 0 : i.toString().toLowerCase()) || "", r = (a = e.props.value) == null ? void 0 : a.toLowerCase(), o = t.toLowerCase();
-  return p.includes(o) || r.includes(o);
-}, S = (e) => x.toArray(e).filter((t) => P(t)) || [], I = (e, t) => {
-  var p;
-  return (((p = S(e).find((r) => r.props.value === t)) == null ? void 0 : p.props.children) || "").toString();
-}, X = ({
+}, z = (e) => {
+  var s, p;
+  const t = ((s = e == null ? void 0 : e.type) == null ? void 0 : s.componentType) || ((p = e == null ? void 0 : e.props) == null ? void 0 : p.__mdxType);
+  return g(e) && (t === "AutocompleteItem" || t === "AutocompleteGroupItem");
+}, h = (e, t) => {
+  var a, u;
+  const s = ((a = e.props.children) == null ? void 0 : a.toString().toLowerCase()) || "", p = (u = e.props.value) == null ? void 0 : u.toLowerCase(), l = t.toLowerCase();
+  return s.includes(l) || p.includes(l);
+}, L = (e) => V.toArray(e).filter((t) => z(t)) || [], C = (e, t) => {
+  var p, l, a, u, d, f;
+  const s = L(e);
+  for (const y of s) {
+    const i = ((p = y.type) == null ? void 0 : p.componentType) || ((l = y.props) == null ? void 0 : l.__mdxType);
+    if (((a = y.props) == null ? void 0 : a.value) === t)
+      return ((u = y.props.children) == null ? void 0 : u.toString()) || "";
+    if (i === "AutocompleteGroupItem") {
+      const E = V.toArray(y.props.children).filter(
+        (n) => g(n)
+      );
+      for (const n of E)
+        if (((d = n.props) == null ? void 0 : d.value) === t)
+          return ((f = n.props.children) == null ? void 0 : f.toString()) || "";
+    }
+  }
+  return "";
+}, J = (e) => {
+  const t = L(e);
+  return t != null && t.length && t.every(
+    (p) => {
+      var l;
+      return p.props.__mdxType === "AutocompleteGroupItem" || ((l = p.type) == null ? void 0 : l.componentType) === "AutocompleteGroupItem";
+    }
+  ) ? "AutocompleteGroupItem" : "AutocompleteItem";
+}, te = ({
   children: e,
   defaultValue: t = "",
-  isOpen: p = !1,
-  freeSolo: r = !1,
-  onOpen: o,
-  onClose: i,
-  onChange: a
+  isOpen: s = !1,
+  freeSolo: p = !1,
+  onOpen: l,
+  onClose: a,
+  onChange: u
 }) => {
-  const d = _(null), T = _(!1), n = v(
-    () => S(e || []),
+  const d = O(null), f = O(null), y = O(!1), i = v(
+    () => L(e || []),
     [e]
-  ), O = () => {
-    var s;
-    return (s = d.current) == null ? void 0 : s.focus();
-  }, [u, l] = R(M, null, () => ({
-    isOpen: !!p,
+  ), E = () => {
+    var c;
+    return (c = d.current) == null ? void 0 : c.focus();
+  }, n = v(() => J(e), [e]), [o, r] = F(q, null, () => ({
+    isOpen: !!s,
     value: t,
     inputValue: t,
-    autocompleteOptions: n,
+    autocompleteOptions: i,
     isClearButtonEnabled: !1,
-    highlightedIndex: -1
+    highlightedIndex: -1,
+    optionType: n
   }));
-  y(() => {
-    l({ type: c, payload: n });
-  }, [n]), y(() => {
-    if (!T.current) {
-      T.current = !0;
+  Y(f, o.highlightedIndex), T(() => {
+    r({ type: _, payload: i });
+  }, [i]), T(() => {
+    r({ type: H, payload: n });
+  }, [n]), T(() => {
+    if (!y.current) {
+      y.current = !0;
       return;
     }
-    u.inputValue === "" && u.value === "" && O();
-  }, [u.isClearButtonEnabled]), y(() => {
-    if (u.isOpen)
-      o == null || o(), O();
+    o.inputValue === "" && o.value === "" && E();
+  }, [o.isClearButtonEnabled]), T(() => {
+    if (o.isOpen)
+      l == null || l(), E();
     else {
-      i == null || i();
-      const s = I(e, u.value);
-      s && u.value ? (l({
-        type: L,
-        payload: s
-      }), l({ type: f, payload: !1 }), a == null || a(s, d)) : r || (l({ type: V }), a == null || a("", d)), l({ type: b });
+      a == null || a();
+      const c = C(e, o.value);
+      c && o.value ? (r({
+        type: P,
+        payload: c
+      }), r({ type: G, payload: !1 }), u == null || u(o.value)) : p || (r({ type: R }), u == null || u("")), r({ type: U });
     }
-  }, [u.isOpen]);
-  const m = v(
-    () => B.debounce((s) => {
-      if (s) {
-        const A = n.filter(
-          (N) => H(N, s)
-        );
-        l({ type: c, payload: A }), !u.isOpen && !u.value && l({ type: f, payload: !0 }), r && l({ type: E, payload: "" });
+  }, [o.isOpen]);
+  const b = v(
+    () => D.debounce((c) => {
+      if (c) {
+        const I = i.map((m) => {
+          var x, N;
+          const M = ((x = m.type) == null ? void 0 : x.componentType) || ((N = m.props) == null ? void 0 : N.__mdxType);
+          if (n === "AutocompleteGroupItem" && M === "AutocompleteGroupItem") {
+            const B = V.toArray(
+              m.props.children
+            ).filter((A) => g(A)).filter(
+              (A) => h(A, c)
+            );
+            return B.length > 0 ? X(m, { children: B }) : null;
+          } else if (n === "AutocompleteItem")
+            return h(m, c) ? m : null;
+          return null;
+        }).filter(Boolean);
+        r({ type: _, payload: I }), r({ type: S, payload: -1 }), (!o.isOpen && !o.value || (I == null ? void 0 : I.length) === 0) && r({ type: G, payload: !0 });
       } else
-        l({ type: E, payload: "" }), l({ type: c, payload: n });
+        r({ type: w, payload: "" }), r({ type: _, payload: i }), r({ type: S, payload: -1 });
     }, 500),
-    [n, u.isOpen, u.value, r]
+    [i, o.isOpen, o.value, p]
   );
-  return y(() => (m(u.inputValue), () => m.cancel()), [u.inputValue]), {
-    state: u,
-    dispatch: l,
+  return T(() => (b(o.inputValue), () => b.cancel()), [o.inputValue]), {
+    state: o,
+    dispatch: r,
     inputRef: d,
-    validChildren: n,
-    getOptionLabelByValue: I
+    listRef: f,
+    validChildren: i,
+    getOptionLabelByValue: C
   };
 };
 export {
-  X as useAutocompleteController
+  te as useAutocompleteController
 };

package/dist/button/button.js

@@ -1,38 +1,43 @@
 "use client";
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { cn as p } from "../cn.js";
-import { isButtonDisabled as c, getSizeClass as g, getVariantAppearanceClass as l } from "./helpers.js";
-const B = f(
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { cn as u } from "../cn.js";
+import { getSizeClass as c, isButtonDisabled as b, getVariantAppearanceClass as B } from "./helpers.js";
+const r = p(
   ({
-    variant: o,
-    appearance: r,
-    size: e,
+    variant: e,
+    appearance: o,
+    size: a,
     disabled: t,
-    className: i,
+    className: n,
     children: s,
-    dataTestid: m,
-    ...n
-  }, a) => /* @__PURE__ */ u(
+    dataTestid: i,
+    ...m
+  }, f) => /* @__PURE__ */ l(
     "button",
     {
-      ...n,
-      "data-testid": m || "govie-button",
-      ref: a,
+      ...m,
+      "data-testid": i,
+      ref: f,
       "aria-disabled": t,
       disabled: t,
-      className: p(
+      className: u(
         "gi-btn",
-        l({ disabled: t, variant: o, appearance: r }),
-        g(e),
-        c({ disabled: t, variant: o, appearance: r }),
-        i
+        B({ disabled: t, variant: e, appearance: o }),
+        b({ disabled: t, variant: e, appearance: o }),
+        c(a),
+        n
       ),
       children: s
     }
   )
 );
-B.displayName = "Button";
+r.displayName = "Button";
+Object.defineProperty(r, "componentType", {
+  value: "Button",
+  writable: !1,
+  enumerable: !1
+});
 export {
-  B as Button
+  r as Button
 };

package/dist/data-grid/data-grid-footer.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface DataGridFooterTypeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+interface DataGridFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export type { DataGridFooterProps, DataGridFooterTypeProps };
+export declare const DataGridFooterStart: React.FC<DataGridFooterTypeProps>;
+export declare const DataGridFooterCenter: React.FC<DataGridFooterTypeProps>;
+export declare const DataGridFooterEnd: React.FC<DataGridFooterTypeProps>;
+export declare const DataGridFooter: React.FC<DataGridFooterProps>;

package/dist/data-grid/data-grid-footer.js

@@ -0,0 +1,66 @@
+import { jsx as s, jsxs as E } from "react/jsx-runtime";
+import i from "react";
+import { cn as l } from "../cn.js";
+const n = (t, e) => i.isValidElement(t) && t.type === e, o = (t, e, a) => t ? /* @__PURE__ */ s(
+  "div",
+  {
+    className: l(
+      e,
+      a,
+      t.props.className
+    ),
+    style: t.props.style,
+    children: t.props.children
+  }
+) : null, F = ({
+  children: t,
+  ...e
+}) => /* @__PURE__ */ s("div", { ...e, children: t });
+F.displayName = "DataGridFooterStart";
+const D = ({
+  children: t,
+  ...e
+}) => /* @__PURE__ */ s("div", { ...e, children: t });
+D.displayName = "DataGridFooterCenter";
+const G = ({
+  children: t,
+  ...e
+}) => /* @__PURE__ */ s("div", { ...e, children: t });
+G.displayName = "DataGridFooterEnd";
+const N = ({
+  children: t,
+  className: e,
+  ...a
+}) => {
+  const C = i.useMemo(() => {
+    let f = null, u = null, y = null;
+    return i.Children.forEach(t, (r) => {
+      n(r, F) ? f = r : n(r, D) ? u = r : n(r, G) && (y = r);
+    }), { start: f, center: u, end: y };
+  }, [t]), { start: d, center: c, end: m } = C, p = !!!d && !!!c && !!m, g = "gi-grow gi-basis-0 gi-min-w-0", S = `${g} gi-text-center`, x = l("gi-min-w-0", {
+    "gi-basis-1/2 gi-text-right": !p
+  });
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ...a,
+      className: l(
+        "gi-flex gi-flex-row gi-w-full gi-items-center gi-py-2",
+        p ? "gi-justify-end" : "gi-gap-2",
+        e
+      ),
+      children: [
+        o(d, g),
+        o(c, S),
+        o(m, x)
+      ]
+    }
+  );
+};
+N.displayName = "DataGridFooter";
+export {
+  N as DataGridFooter,
+  D as DataGridFooterCenter,
+  G as DataGridFooterEnd,
+  F as DataGridFooterStart
+};

package/dist/data-grid/data-grid-header.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface DataGridHeaderTypeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+interface DataGridHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const DataGridHeader: React.FC<DataGridHeaderProps>;
+export declare const DataGridHeaderSearch: React.FC<DataGridHeaderTypeProps>;
+export declare const DataGridHeaderFilter: React.FC<DataGridHeaderTypeProps>;
+export declare const DataGridHeaderActions: React.FC<DataGridHeaderTypeProps>;
+export {};

package/dist/data-grid/data-grid-header.js

@@ -0,0 +1,82 @@
+import { jsxs as D, jsx as n } from "react/jsx-runtime";
+import s from "react";
+import { cn as i } from "../cn.js";
+const l = (e, a) => s.isValidElement(e) && e.type === a, u = ({
+  children: e,
+  className: a,
+  ...r
+}) => {
+  const { search: g, filter: b, actions: y } = s.useMemo(() => {
+    let f = null, m = null, p = null;
+    return s.Children.forEach(e, (t) => {
+      l(t, o) ? f = t : l(t, d) ? m = t : l(t, c) && (p = t);
+    }), { search: f, filter: m, actions: p };
+  }, [e]);
+  return /* @__PURE__ */ D(
+    "div",
+    {
+      ...r,
+      className: i(
+        "gi-flex gi-flex-wrap gi-items-center gi-w-full gi-gap-4 gi-mb-2",
+        a
+      ),
+      children: [
+        g,
+        b,
+        y
+      ]
+    }
+  );
+};
+u.displayName = "DataGridHeader";
+Object.defineProperty(u, "componentType", {
+  value: "DataGridHeader",
+  writable: !1,
+  enumerable: !1
+});
+const o = ({
+  children: e,
+  className: a,
+  ...r
+}) => /* @__PURE__ */ n("div", { className: i("gi-flex gi-flex-1", a), ...r, children: e });
+o.displayName = "DataGridHeaderSearch";
+Object.defineProperty(o, "componentType", {
+  value: "DataGridHeaderSearch",
+  writable: !1,
+  enumerable: !1
+});
+const d = ({
+  children: e,
+  className: a,
+  ...r
+}) => /* @__PURE__ */ n("div", { className: i("gi-flex gi-items-center", a), ...r, children: e });
+d.displayName = "DataGridHeaderFilter";
+Object.defineProperty(d, "componentType", {
+  value: "DataGridHeaderFilter",
+  writable: !1,
+  enumerable: !1
+});
+const c = ({
+  children: e,
+  className: a,
+  ...r
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: i("gi-flex gi-items-center gi-ml-auto", a),
+    ...r,
+    children: e
+  }
+);
+c.displayName = "DataGridHeaderActions";
+Object.defineProperty(c, "componentType", {
+  value: "DataGridHeaderActions",
+  writable: !1,
+  enumerable: !1
+});
+export {
+  u as DataGridHeader,
+  c as DataGridHeaderActions,
+  d as DataGridHeaderFilter,
+  o as DataGridHeaderSearch
+};

package/dist/header/components/header-slot.js

@@ -1,34 +1,35 @@
-import { jsx as a, jsxs as l, Fragment as u } from "react/jsx-runtime";
-import { useState as h } from "react";
+import { jsx as a, jsxs as l, Fragment as p } from "react/jsx-runtime";
+import { useState as u } from "react";
 import { cn as d } from "../../cn.js";
-import { DrawerWrapper as b, DrawerBody as f } from "../../drawer/drawer.js";
-import { translate as c } from "../../i18n/utility.js";
-import { Icon as i } from "../../icon/icon.js";
+import { DrawerWrapper as b, DrawerBody as I } from "../../drawer/drawer.js";
+import { translate as s } from "../../i18n/utility.js";
+import { Icon as o } from "../../icon/icon.js";
 import { Input as m } from "../../primitives/input.js";
-const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
+const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
   "div",
   {
     id: `SlotContainer-${e}`,
+    "data-testid": `SlotContainer-${e}`,
     "data-index": e,
-    "aria-label": c("header.headerSlot", {
+    "aria-label": s("header.headerSlot", {
       index: e + 1,
       defaultValue: `Slot Container ${e + 1}`
     }),
     className: "gi-hidden gi-bg-gray-50 gi-py-4 gi-px-4 gi-border-b-2xl gi-border-b-color-surface-system-primary-default gi-order-3",
     children: r
   }
-), I = ({
+), $ = ({
   index: e,
-  item: { component: r, drawerPosition: p, icon: n, label: o, ariaLabel: s }
+  item: { component: r, drawerPosition: h, icon: c, label: i, ariaLabel: g }
 }) => {
-  const [t, g] = h(!1);
-  return /* @__PURE__ */ l(u, { children: [
+  const [t, n] = u(!1);
+  return /* @__PURE__ */ l(p, { children: [
     /* @__PURE__ */ l(
       "label",
       {
         htmlFor: `ItemActionDrawerTrigger-${e}`,
         className: "gi-header-tool-item",
-        onClick: () => g(!0),
+        onClick: () => n(!0),
         children: [
           /* @__PURE__ */ a(
             m,
@@ -37,33 +38,33 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
               className: "gi-block gi-w-0 gi-absolute gi-h-0",
               id: `ItemActionDrawerTrigger-${e}`,
               "data-index": e,
-              "aria-label": s || o || "",
-              type: "button"
+              "aria-label": g || i || "",
+              type: "checkbox"
             }
           ),
-          o && /* @__PURE__ */ a(
+          i && /* @__PURE__ */ a(
             "span",
             {
               id: `ItemActionDrawerTrigger-${e}-label`,
               className: "label",
-              "aria-hidden": s ? "true" : "false",
-              children: o
+              "aria-hidden": g ? "true" : "false",
+              children: i
             }
           ),
-          n && /* @__PURE__ */ a(
-            i,
+          c && /* @__PURE__ */ a(
+            o,
             {
               className: d({
                 "gi-hidden": t,
                 "gi-block": !t
               }),
-              icon: n,
+              icon: c,
               id: `ItemIconDrawerActionTrigger-${e}`,
               ariaHidden: !0
             }
           ),
           /* @__PURE__ */ a(
-            i,
+            o,
             {
               className: d({
                 "gi-hidden": !t,
@@ -71,6 +72,7 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
               }),
               id: `ItemCloseTrigger-${e}`,
               ariaHidden: !0,
+              "data-testid": `ItemCloseTrigger-${e}`,
               icon: "close"
             }
           )
@@ -81,21 +83,21 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
       b,
       {
         isOpen: t,
-        onClose: () => g(!1),
-        position: p || "right",
-        closeButtonLabel: c("header.drawer.close", {
+        onClose: () => n(!1),
+        position: h || "right",
+        closeButtonLabel: s("header.drawer.close", {
           defaultValue: "Close"
         }),
         closeButtonSize: "large",
-        children: /* @__PURE__ */ a(f, { children: r })
+        children: /* @__PURE__ */ a(I, { children: r })
       }
     )
   ] });
-}, y = ({ item: e, index: r }) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a(I, { index: r, item: e }) : /* @__PURE__ */ l(
+}, y = ({ item: e, index: r }) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a($, { index: r, item: e }) : /* @__PURE__ */ l(
   "label",
   {
     htmlFor: `ItemActionTrigger-${r}`,
-    "aria-label": c("header.toggleActionItem", {
+    "aria-label": s("header.toggleActionItem", {
       item: e.label || `item ${r + 1}`,
       defaultValue: `Toggle item action for ${e.label || `item ${r + 1}`}`
     }),
@@ -115,7 +117,7 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
       ),
       e.label && /* @__PURE__ */ a("span", { className: "label", children: e.label }),
       e.icon && /* @__PURE__ */ a(
-        i,
+        o,
         {
           icon: e.icon,
           ariaHidden: !0,
@@ -123,18 +125,19 @@ const S = ({ index: e, slot: r }) => /* @__PURE__ */ a(
         }
       ),
       /* @__PURE__ */ a(
-        i,
+        o,
         {
           className: "gi-hidden close-icon",
           ariaHidden: !0,
           id: `ItemCloseTrigger-${r}`,
-          icon: "close"
+          icon: "close",
+          "data-testid": `ItemCloseTrigger-${r}`
         }
       )
     ]
   }
 );
 export {
-  S as SlotContainer,
+  D as SlotContainer,
   y as SlotItemAction
 };

package/dist/header/helper.d.ts

@@ -1,2 +1 @@
 export declare const attachEventsToItemActionTriggers: () => (() => void) | undefined;
-export declare const attachEventsToSearchTrigger: () => () => void;