@ogcio/design-system-react 1.12.3 → 1.13.0

package/dist/button-group/button-group.d.ts

@@ -13,6 +13,7 @@ type ButtonGroupProps = PropsWithChildren<{
     appearance?: ButtonAppearance;
     onChange?: (value: string) => void;
     defaultValue?: string;
+    value?: string;
     role?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;

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

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

package/dist/card/card-next.js

@@ -1,39 +1,39 @@
 "use client";
 import { jsx as r, jsxs as g } from "react/jsx-runtime";
-import { createContext as l, useContext as m, useMemo as f, Children as p, isValidElement as v } from "react";
+import { createContext as l, Children as m, isValidElement as f, useContext as p, useMemo as v } from "react";
 import { Icon as N } from "../icon/icon.js";
 import { Paragraph as h } from "../paragraph/paragraph.js";
 import { Tag as x } from "../tag/tag.js";
-const u = l(!1), c = l(!1), o = l(!1);
-function i(e, a, t) {
-  if (!m(e))
-    throw new Error(`${a} must be used inside <${t}>`);
+const u = l(!1), o = l(!1), c = l(!1);
+function i(e, a, n) {
+  if (!p(e))
+    throw new Error(`${a} must be used inside <${n}>`);
   return !0;
 }
 const P = ({
   children: e,
   inset: a,
-  type: t = "vertical",
-  dataTestid: n
+  type: n = "vertical",
+  dataTestid: t
 }) => {
-  const d = f(() => {
-    const s = `gi-card-inset-${a || "none"}`;
-    return `gi-card gi-card-${t} ${s} gi-not-prose`;
-  }, [t, a]);
-  return /* @__PURE__ */ r(u.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: d, "data-testid": n, children: e }) });
+  const s = v(() => {
+    const d = `gi-card-inset-${a || "none"}`;
+    return `gi-card gi-card-${n} ${d} gi-not-prose`;
+  }, [n, a]);
+  return /* @__PURE__ */ r(u.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: s, "data-testid": t, children: e }) });
 }, j = ({ media: e, href: a }) => {
   if (i(u, "CardMedia", "Card"), !e)
     return null;
   switch (e.type) {
     case "image": {
-      const { src: t, alt: n, aspectRatio: d } = e.config;
+      const { src: n, alt: t, aspectRatio: s } = e.config;
       return /* @__PURE__ */ r("div", { className: "gi-card-image", children: /* @__PURE__ */ r("a", { href: a, children: /* @__PURE__ */ r(
         "img",
         {
-          src: t,
-          alt: n,
-          style: d ? { aspectRatio: d } : void 0,
-          className: d ? "gi-w-full" : void 0
+          src: n,
+          alt: t,
+          style: s ? { aspectRatio: s } : void 0,
+          className: s ? "gi-w-full" : void 0
         }
       ) }) });
     }
@@ -47,29 +47,29 @@ const P = ({
 }, E = ({
   children: e,
   inset: a = "none"
-}) => (i(u, "CardContainer", "Card"), /* @__PURE__ */ r(o.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: `gi-card-content gi-card-inset-${a || "none"}`, children: e }) })), M = ({ children: e }) => (i(c, "CardTitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-title", children: e }) : null), A = ({ children: e }) => (i(c, "CardSubtitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-subheading", children: e }) : null), T = ({ text: e, type: a }) => (i(c, "CardTag", "CardHeader"), /* @__PURE__ */ r("div", { className: "gi-card-tag", children: /* @__PURE__ */ r(x, { text: e, type: a }) }));
+}) => (i(u, "CardContainer", "Card"), /* @__PURE__ */ r(c.Provider, { value: !0, children: /* @__PURE__ */ r("div", { className: `gi-card-content gi-card-inset-${a || "none"}`, children: e }) })), M = ({ children: e }) => (i(o, "CardTitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-title", children: e }) : null), A = ({ children: e }) => (i(o, "CardSubtitle", "CardHeader"), e ? /* @__PURE__ */ r("div", { className: "gi-card-subheading", children: e }) : null), T = ({ text: e, type: a }) => (i(o, "CardTag", "CardHeader"), /* @__PURE__ */ r("div", { className: "gi-card-tag", children: /* @__PURE__ */ r(x, { text: e, type: a }) }));
 Object.defineProperty(T, "componentType", {
   value: "CardTag",
   writable: !1,
   enumerable: !1
 });
 const D = ({ children: e }) => {
-  i(o, "CardHeader", "CardContainer");
-  const a = [], t = [];
-  return p.forEach(e, (n) => {
-    var s, C;
-    if (!v(n))
+  i(c, "CardHeader", "CardContainer");
+  const a = [], n = [];
+  return m.forEach(e, (t) => {
+    var d, C;
+    if (!f(t))
       return;
-    (((s = n == null ? void 0 : n.type) == null ? void 0 : s.componentType) || ((C = n.props) == null ? void 0 : C.__mdxType)) === "CardTag" ? t.push(n) : a.push(n);
-  }), /* @__PURE__ */ r(c.Provider, { value: !0, children: /* @__PURE__ */ g("div", { className: "gi-card-header", children: [
+    (((d = t == null ? void 0 : t.type) == null ? void 0 : d.componentType) || ((C = t.props) == null ? void 0 : C.__mdxType)) === "CardTag" ? n.push(t) : a.push(t);
+  }), /* @__PURE__ */ r(o.Provider, { value: !0, children: /* @__PURE__ */ g("div", { className: "gi-card-header", children: [
     /* @__PURE__ */ r("div", { className: "gi-card-heading", children: a }),
-    t
+    n
   ] }) });
 }, R = ({
   children: e
-}) => (i(o, "CardDescription", "CardContainer"), e ? /* @__PURE__ */ r("div", { className: "gi-card-paragraph", children: /* @__PURE__ */ r(h, { size: "sm", children: e }) }) : null), S = ({
+}) => (i(c, "CardDescription", "CardContainer"), e ? /* @__PURE__ */ r("div", { className: "gi-card-paragraph", children: /* @__PURE__ */ r(h, { size: "sm", children: e }) }) : null), S = ({
   children: e
-}) => (i(o, "CardAction", "CardContainer"), /* @__PURE__ */ r("div", { className: "gi-card-action", children: e }));
+}) => (i(c, "CardAction", "CardContainer"), /* @__PURE__ */ r("div", { className: "gi-card-action", children: e }));
 export {
   S as CardAction,
   E as CardContainer,

package/dist/checkbox/checkbox.d.ts

@@ -1,4 +1,10 @@
 /**
  * @deprecated Use <InputCheckbox /> instead of <Checkbox />.
  */
-export declare const Checkbox: import('react').FC<import('../index.js').InputCheckboxProps>;
+export declare const Checkbox: import('react').ForwardRefExoticComponent<{
+    size?: import('../index.js').InputCheckboxSizeEnumType;
+    label?: string;
+    hint?: string;
+    indeterminate?: boolean;
+    containerProps?: any;
+} & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "size"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/combo-box/dropdown-item.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
 import { useState as u, useId as j, useEffect as q } from "react";
 import { Button as B } from "../button/button.js";
 import { cn as x } from "../cn.js";
@@ -11,7 +11,7 @@ import { InputText as O } from "../input-text/input-text.js";
 import { Paragraph as y } from "../paragraph/paragraph.js";
 import { Tag as A, TagTypeEnum as F } from "../tag/tag.js";
 import { slugify as P } from "../utilities.js";
-const ee = ({
+const oo = ({
   children: c,
   noSearch: h,
   options: p,
@@ -26,40 +26,40 @@ const ee = ({
     )
   ];
   q(() => {
-    var a, n;
-    let e = 0;
-    const o = z();
-    for (const b of o) {
+    var a, i;
+    let o = 0;
+    const e = z();
+    for (const b of e) {
       const f = (a = b.querySelector("label")) == null ? void 0 : a.textContent;
-      (n = f == null ? void 0 : f.toLowerCase()) != null && n.includes(d.toLowerCase()) ? b.style.display = "flex" : (b.style.display = "none", e++);
+      (i = f == null ? void 0 : f.toLowerCase()) != null && i.includes(d.toLowerCase()) ? b.style.display = "flex" : (b.style.display = "none", o++);
     }
-    _(e === p.length);
+    _(o === p.length);
   }, [d, p.length]);
-  const R = (e, o) => {
-    const a = o ? [...t || [], e] : (t || []).filter((n) => n !== e);
+  const R = (o, e) => {
+    const a = e ? [...t || [], o] : (t || []).filter((i) => i !== o);
     w || V(a), g == null || g(a);
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     "div",
     {
       role: "group",
       "aria-label": `${c} dropdown`,
       className: "gi-combobox-dropdown-item",
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ n(
           B,
           {
             variant: "flat",
             appearance: "dark",
             size: "large",
-            onClick: (e) => {
-              e.preventDefault(), C(!m);
+            onClick: (o) => {
+              o.preventDefault(), C(!m);
             },
             className: x("gi-combobox-toggle", {
               "gi-combobox-toggle-open": m
             }),
             children: [
-              /* @__PURE__ */ i("div", { className: "gi-combobox-toggle-content", children: [
+              /* @__PURE__ */ n("div", { className: "gi-combobox-toggle-content", children: [
                 /* @__PURE__ */ s(y, { size: "md", children: c }),
                 (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ s(A, { type: F.Counter, text: t.length.toString() })
               ] }),
@@ -73,22 +73,22 @@ const ee = ({
             ]
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ n(
           "div",
           {
             className: m ? "gi-combobox-dropdown-container-open" : "gi-hidden",
             id: `${r}-search`,
             children: [
-              !h && /* @__PURE__ */ i("div", { className: "gi-combobox-search", children: [
+              !h && /* @__PURE__ */ n("div", { className: "gi-combobox-search", children: [
                 /* @__PURE__ */ s(
                   O,
                   {
                     placeholder: N("dropdownItem.search", { defaultValue: "Search" }),
                     className: "gi-combobox-search-input",
                     value: d,
-                    onChange: (e) => {
-                      const o = e.target.value;
-                      $(o), l == null || l(o);
+                    onChange: (o) => {
+                      const e = o.target.value;
+                      $(e), l == null || l(e);
                     }
                   }
                 ),
@@ -108,7 +108,7 @@ const ee = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ n(
                 "div",
                 {
                   className: x("gi-combobox-checkbox-container", {
@@ -118,8 +118,8 @@ const ee = ({
                     I && /* @__PURE__ */ s(y, { className: "gi-combobox-checkbox-paragraph", children: N("dropdownItem.noResultFound", {
                       defaultValue: "No results found."
                     }) }),
-                    p.map((e, o) => {
-                      const a = t == null ? void 0 : t.includes(e.value);
+                    p.map((o, e) => {
+                      const a = t == null ? void 0 : t.includes(o.value);
                       return /* @__PURE__ */ s(
                         "div",
                         {
@@ -127,16 +127,16 @@ const ee = ({
                           children: /* @__PURE__ */ s(
                             L,
                             {
-                              onChange: (n) => R(e.value, n.target.checked),
+                              onChange: (i) => R(o.value, i.target.checked),
                               checked: a,
-                              id: `${o}_${r}_${e.value}`,
-                              label: e.label,
-                              name: `${o}_${e.label}_${r}`,
-                              value: e.value
+                              id: `${e}_${r}_${o.value}`,
+                              label: o.label,
+                              name: `${e}_${o.label}_${r}`,
+                              value: o.value
                             }
                           )
                         },
-                        `${o}_${r}_${e.value}`
+                        `${e}_${r}_${o.value}`
                       );
                     })
                   ]
@@ -150,5 +150,5 @@ const ee = ({
   );
 };
 export {
-  ee as DropdownItem
+  oo as DropdownItem
 };

package/dist/data-grid/editable-table-cell.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { EditorTableCellProps } from './types.js';
+export declare const EditableTableCell: FC<EditorTableCellProps<any>>;

package/dist/data-grid/editable-table-cell.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { l as O } from "../lodash-D1c5hFAM.js";
+import { useState as g, useMemo as S, useEffect as k } from "react";
+import { InputCheckboxTableCell as V } from "../input-checkbox/input-checkbox.js";
+import { InputTextTableCell as j } from "../input-text/input-text.js";
+import { SelectTableCell as y } from "../select/select-native.js";
+const A = ({
+  value: l,
+  rowIndex: h,
+  columnId: C,
+  setData: x,
+  editor: e
+}) => {
+  var b;
+  const [t, m] = g(l), [u, T] = g(!!t), E = (s, n, a) => {
+    x(
+      (c) => c.map((r, D) => D === s ? {
+        ...r,
+        [n]: a
+      } : r)
+    );
+  }, p = S(
+    () => O.debounce((s) => E(h, C, s), 500),
+    [h, C]
+  );
+  k(() => () => {
+    p.cancel();
+  }, [p]);
+  const f = (s) => {
+    var a, c;
+    const n = s.target.value;
+    m(n), p(n), (c = (a = e == null ? void 0 : e.props) == null ? void 0 : a.onChange) == null || c.call(a, s);
+  }, v = (s) => {
+    var n, a;
+    T(!u), p(!u), (a = (n = e == null ? void 0 : e.props) == null ? void 0 : n.onChange) == null || a.call(n, s);
+  };
+  switch (k(() => {
+    m(l);
+  }, [l]), e.type) {
+    case "select":
+      return /* @__PURE__ */ o(
+        y,
+        {
+          ...e.props,
+          defaultValue: t,
+          onChange: f,
+          options: ((b = e == null ? void 0 : e.props) == null ? void 0 : b.options) || []
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ o(
+        V,
+        {
+          checked: u,
+          ...e == null ? void 0 : e.props,
+          onChange: v
+        }
+      );
+    default:
+      return /* @__PURE__ */ o(
+        j,
+        {
+          ...e.props,
+          value: t,
+          onChange: f
+        }
+      );
+  }
+};
+export {
+  A as EditableTableCell
+};

package/dist/data-grid/tanstack/tanstack-helpers.d.ts

@@ -0,0 +1,11 @@
+export type Person = {
+    firstName: string;
+    lastName: string;
+    email: string;
+    age: number;
+    city: string;
+    isActive: boolean;
+    status: 'pending' | 'in progress' | 'accepted' | 'declined';
+    disabledFields?: string[];
+};
+export declare function makeData(...lens: number[]): Person[];