@ogcio/design-system-react 1.15.3 → 1.16.0

package/dist/drawer/drawer.js

@@ -1,22 +1,22 @@
 "use client";
-import { jsx as r, jsxs as x, Fragment as y } from "react/jsx-runtime";
+import { jsx as s, jsxs as x, Fragment as y } from "react/jsx-runtime";
 import { useState as D, cloneElement as O } from "react";
 import { cn as a } from "../cn.js";
 import { ModalBody as F, ModalFooter as M, ModalWrapper as N } from "../modal/modal.js";
 const b = ({
   children: o,
   className: e,
-  ...s
-}) => /* @__PURE__ */ r(N, { className: a("gi-drawer-container", e), ...s, children: o }), I = ({
+  ...r
+}) => /* @__PURE__ */ s(N, { className: a("gi-drawer-container", e), ...r, children: o }), I = ({
   children: o,
   triggerButton: e,
-  startsOpen: s,
+  startsOpen: r,
   closeButtonLabel: p,
   position: i = "right",
   className: m,
   closeButtonSize: f
 }) => {
-  const [t, n] = D(!!s), w = () => n(!0), C = () => n(!1), h = O(e, {
+  const [t, n] = D(!!r), w = () => n(!0), C = () => n(!1), h = O(e, {
     "data-testid": "drawer-trigger-button-container",
     onClick: (k) => {
       var l, d;
@@ -26,7 +26,7 @@ const b = ({
   });
   return /* @__PURE__ */ x(y, { children: [
     h,
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ s(
       b,
       {
         children: o,
@@ -39,7 +39,11 @@ const b = ({
       }
     )
   ] });
-}, S = ({ children: o, className: e }) => /* @__PURE__ */ r(F, { className: a("gi-drawer-body", e), children: o }), T = ({ children: o, className: e }) => /* @__PURE__ */ r(M, { className: a("gi-drawer-footer", e), children: o });
+}, S = ({ children: o, className: e }) => /* @__PURE__ */ s(F, { className: a("gi-drawer-body", e), children: o }), T = ({
+  children: o,
+  className: e,
+  stacked: r
+}) => /* @__PURE__ */ s(M, { stacked: r, className: a("gi-drawer-footer", e), children: o });
 export {
   I as Drawer,
   S as DrawerBody,

package/dist/file-upload/file-upload.d.ts

@@ -6,4 +6,6 @@ export type FileUploadProps = InputFileProps;
 /**
  * @deprecated Use <InputFile /> instead of <FileUpload />.
  */
-export declare const FileUpload: import('react').ForwardRefExoticComponent<InputFileProps & import('react').RefAttributes<HTMLInputElement>>;
+export declare const FileUpload: import('react').ForwardRefExoticComponent<{
+    dataTestid?: string;
+} & import('react').InputHTMLAttributes<Omit<HTMLInputElement, "type">> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/forms/form-field/form-field.d.ts

@@ -12,7 +12,7 @@ declare const FormFieldHint: {
     displayName: string;
 };
 declare const FormFieldError: {
-    ({ children, text, size, className, }: ErrorTextProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, text, size, className, ...props }: ErrorTextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { FormField, FormFieldLabel, FormFieldHint, FormFieldError };

package/dist/forms/form-field/form-field.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
 import { S as g } from "../../index-2sRBqKFV.js";
 import { createContext as x, useContext as v, Children as L, isValidElement as C } from "react";
-import { cn as m } from "../../cn.js";
+import { cn as d } from "../../cn.js";
 import { ErrorText as E } from "../../error-text/error-text.js";
 import { HintText as N } from "../../hint-text/hint-text.js";
 import { Label as T } from "../../label/label.js";
@@ -10,18 +10,18 @@ const c = x(null);
 function s(e) {
   v(c) || console.error(`[${e}] must be used within a <FormField>.`);
 }
-function a(e) {
+function m(e) {
   var r, i;
   return C(e) && (((r = e.type) == null ? void 0 : r.componentType) || ((i = e.props) == null ? void 0 : i.__mdxType)) || null;
 }
 function H(e) {
   return ["FormFieldLabel", "FormFieldHint", "FormFieldError"].includes(
-    a(e) ?? ""
+    m(e) ?? ""
   );
 }
 const _ = (e) => ["error", "hint", "label"].some((l) => l in e) ? (console.warn(
   "[FormField] Using legacy props. Please migrate to the new composable API."
-), /* @__PURE__ */ o(c.Provider, { value: !0, children: /* @__PURE__ */ n(y, { ...e, children: [
+), /* @__PURE__ */ o(c.Provider, { value: !0, children: /* @__PURE__ */ a(y, { ...e, children: [
   e.label && /* @__PURE__ */ o(F, { ...e.label }),
   e.hint && /* @__PURE__ */ o(u, { ...e.hint }),
   e.error && /* @__PURE__ */ o(f, { ...e.error }),
@@ -31,22 +31,22 @@ const _ = (e) => ["error", "hint", "label"].some((l) => l in e) ? (console.warn(
   className: r,
   ...i
 }) => {
-  const l = L.toArray(e), d = l.find(
-    (t) => a(t) === "FormFieldLabel"
+  const l = L.toArray(e), n = l.find(
+    (t) => m(t) === "FormFieldLabel"
   ), p = l.find(
-    (t) => a(t) === "FormFieldHint"
+    (t) => m(t) === "FormFieldHint"
   ), b = l.find(
-    (t) => a(t) === "FormFieldError"
+    (t) => m(t) === "FormFieldError"
   ), h = l.filter((t) => !H(t));
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(
     "fieldset",
     {
-      className: m({ "gi-error-state": !!b }, r),
+      className: d({ "gi-error-state": !!b }, r),
       ...i,
       children: [
-        /* @__PURE__ */ n("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
-          /* @__PURE__ */ n("div", { children: [
-            d,
+        /* @__PURE__ */ a("div", { className: "gi-pb-3 gi-flex gi-flex-col gi-gap-1", children: [
+          /* @__PURE__ */ a("div", { children: [
+            n,
             p
           ] }),
           b
@@ -60,14 +60,14 @@ const _ = (e) => ["error", "hint", "label"].some((l) => l in e) ? (console.warn(
   text: r,
   size: i,
   htmlFor: l,
-  className: d
+  className: n
 }) => (s("FormFieldLabel"), /* @__PURE__ */ o(
   T,
   {
     text: r,
     size: i,
     htmlFor: l,
-    className: m("gi-font-bold", d),
+    className: d("gi-font-bold", n),
     children: e
   }
 ));
@@ -77,7 +77,7 @@ Object.defineProperty(F, "componentType", {
   enumerable: !1
 });
 F.displayName = "FormFieldLabel";
-const u = ({ children: e, text: r, size: i, className: l }) => (s("FormFieldHint"), /* @__PURE__ */ o(N, { text: r, size: i, className: m("gi-mb-1", l), children: e }));
+const u = ({ children: e, text: r, size: i, className: l }) => (s("FormFieldHint"), /* @__PURE__ */ o(N, { text: r, size: i, className: d("gi-mb-1", l), children: e }));
 Object.defineProperty(u, "componentType", {
   value: "FormFieldHint",
   writable: !1,
@@ -88,8 +88,18 @@ const f = ({
   children: e,
   text: r,
   size: i,
-  className: l
-}) => (s("FormFieldError"), /* @__PURE__ */ o(E, { text: r, size: i, className: m("gi-mb-1", l), children: e }));
+  className: l,
+  ...n
+}) => (s("FormFieldError"), /* @__PURE__ */ o(
+  E,
+  {
+    text: r,
+    size: i,
+    className: d("gi-mb-1", l),
+    ...n,
+    children: e
+  }
+));
 Object.defineProperty(f, "componentType", {
   value: "FormFieldError",
   writable: !1,

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

@@ -1,97 +1,103 @@
 "use client";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
 import { useState as g } from "react";
 import { cn as f } from "../../cn.js";
 import { translate as d } from "../../i18n/utility.js";
-import { Icon as s } from "../../icon/icon.js";
-import { ListItem as t } from "../../list-item/list-item.js";
-const b = ({ index: o, item: a }) => {
-  const [r, n] = g(!1);
-  return /* @__PURE__ */ i(
+import { Icon as h } from "../../icon/icon.js";
+import { ListItem as s } from "../../list-item/list-item.js";
+const b = ({ index: r, item: a }) => {
+  const [l, n] = g(!1), e = () => {
+    n((i) => !i);
+  }, c = (i) => {
+    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), e());
+  };
+  return /* @__PURE__ */ t(
     "div",
     {
-      id: `Accordion-item-${o}`,
+      id: `Accordion-item-${r}`,
       className: "gi-accordion-item-container",
-      "data-open": r.toString(),
+      "data-open": l.toString(),
       role: "region",
-      "aria-labelledby": `Accordion-header-${o}`,
-      onClick: () => n(!r),
+      "aria-labelledby": `Accordion-header-${r}`,
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ o(
           "div",
           {
             "aria-label": a.label,
-            id: `Accordion-header-${o}`,
+            id: `Accordion-header-${r}`,
             role: "button",
-            "aria-expanded": "false",
-            "aria-controls": `Accordion-slot-${o}`,
+            "aria-expanded": l,
+            "aria-controls": `Accordion-slot-${r}`,
             className: "gi-header-accordion-item-toggle",
-            children: /* @__PURE__ */ i("div", { children: [
-              /* @__PURE__ */ e("span", { className: "gi-text-sm gi-font-bold gi-ml-1", children: a.label }),
-              /* @__PURE__ */ e(s, { icon: "chevron_right", className: "gi-accordion-item-icon" })
+            tabIndex: 0,
+            onClick: e,
+            onKeyDown: c,
+            children: /* @__PURE__ */ t("div", { children: [
+              /* @__PURE__ */ o("span", { className: "gi-text-sm gi-font-bold gi-ml-1", children: a.label }),
+              /* @__PURE__ */ o(h, { icon: "chevron_right", className: "gi-accordion-item-icon" })
             ] })
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ o(
           "div",
           {
-            id: `Accordion-slot-${o}`,
+            id: `Accordion-slot-${r}`,
             role: "region",
             className: f("gi-accordion-item-slot", {
-              "gi-hidden": !r
+              "gi-hidden": !l
             }),
             children: a.slot
           }
         )
       ]
     },
-    `Accordion-item-${o}`
+    `Accordion-item-${r}`
   );
 }, m = ({
-  items: o,
+  items: r,
   secondaryLinks: a
-}) => /* @__PURE__ */ i("ul", { children: [
-  o == null ? void 0 : o.map(({ itemType: r, label: n, ...l }, c) => {
-    const [h, u] = [
-      r === "link" || r === "custom-link",
-      r === "slot"
+}) => /* @__PURE__ */ t("ul", { children: [
+  r == null ? void 0 : r.map(({ itemType: l, label: n, ...e }, c) => {
+    const [i, u] = [
+      l === "link" || l === "custom-link",
+      l === "slot"
     ];
     if (!n)
       return null;
-    if (h)
-      return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-        t,
+    if (i)
+      return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
+        s,
         {
-          href: l == null ? void 0 : l.href,
+          href: e == null ? void 0 : e.href,
           label: n,
-          external: l == null ? void 0 : l.external,
-          slot: l == null ? void 0 : l.component
+          external: e == null ? void 0 : e.external,
+          slot: e == null ? void 0 : e.component
         }
       ) }, `navLink-${n}-${c}`);
     if (u)
-      return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+      return /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
         b,
         {
           index: c,
           item: {
             label: n,
-            slot: l == null ? void 0 : l.component
+            slot: e == null ? void 0 : e.component
           }
         }
       ) }, `toolItems-${n}-${c}`);
   }),
-  a == null ? void 0 : a.map((r, n) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-    t,
+  a == null ? void 0 : a.map((l, n) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
+    s,
     {
-      href: r.href,
-      label: r.label,
+      href: l.href,
+      label: l.label,
       bold: !1,
-      slot: r.slot
+      slot: l.slot
     }
-  ) }, `secondary-${r.label}-${n}`))
+  ) }, `secondary-${l.label}-${n}`))
 ] });
-function I({ ...o }) {
-  return /* @__PURE__ */ i(
+function I({ ...r }) {
+  return /* @__PURE__ */ t(
     "div",
     {
       id: "HeaderMenuContainer",
@@ -100,7 +106,7 @@ function I({ ...o }) {
         defaultValue: "Mobile Navigation Menu"
       }),
       children: [
-        /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("div", { className: "gi-flex gi-items-center", children: /* @__PURE__ */ i(
+        /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o("div", { className: "gi-flex gi-items-center", children: /* @__PURE__ */ t(
           "label",
           {
             htmlFor: "MobileMenuTrigger",
@@ -109,12 +115,12 @@ function I({ ...o }) {
               defaultValue: "Close Mobile Menu"
             }),
             children: [
-              /* @__PURE__ */ e("span", { children: "Close" }),
-              /* @__PURE__ */ e(s, { icon: "close" })
+              /* @__PURE__ */ o("span", { children: "Close" }),
+              /* @__PURE__ */ o(h, { icon: "close" })
             ]
           }
         ) }) }),
-        /* @__PURE__ */ e(m, { ...o })
+        /* @__PURE__ */ o(m, { ...r })
       ]
     }
   );

package/dist/header/components/header-slot.d.ts

@@ -1,12 +1,14 @@
-import { HeaderItem } from '../types.js';
+import { HeaderAppearance, HeaderItem } from '../types.js';
 type HeaderSlotProps = {
     item: HeaderItem;
     index: number;
+    appearance: HeaderAppearance;
 };
 type HeaderSlotContainerProps = {
     slot: React.ReactNode;
     index: number;
+    appearance: HeaderAppearance;
 };
-export declare const SlotContainer: ({ index, slot }: HeaderSlotContainerProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SlotItemAction: ({ item, index }: HeaderSlotProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SlotContainer: ({ index, slot, appearance, }: HeaderSlotContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SlotItemAction: ({ item, index, appearance, }: HeaderSlotProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,74 +1,80 @@
-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 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 D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
+import { jsx as a, jsxs as s, Fragment as I } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { cn as n } from "../../cn.js";
+import { DrawerWrapper as f, DrawerBody as T } from "../../drawer/drawer.js";
+import { translate as c } from "../../i18n/utility.js";
+import { Icon as i } from "../../icon/icon.js";
+import { Input as h } from "../../primitives/input.js";
+import { headerSlotContainerVariants as b, headerToolItemVariants as p } from "../variants.js";
+const y = ({
+  index: e,
+  slot: r,
+  appearance: t
+}) => /* @__PURE__ */ a(
   "div",
   {
     id: `SlotContainer-${e}`,
     "data-testid": `SlotContainer-${e}`,
     "data-index": e,
-    "aria-label": s("header.headerSlot", {
+    "aria-label": c("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",
+    className: n(b({ appearance: t }), "gi-hidden"),
     children: r
   }
-), $ = ({
+), C = ({
   index: e,
-  item: { component: r, drawerPosition: h, icon: c, label: i, ariaLabel: g }
+  item: { component: r, drawerPosition: t, icon: d, label: l, ariaLabel: m },
+  appearance: u
 }) => {
-  const [t, n] = u(!1);
-  return /* @__PURE__ */ l(p, { children: [
-    /* @__PURE__ */ l(
+  const [o, g] = $(!1);
+  return /* @__PURE__ */ s(I, { children: [
+    /* @__PURE__ */ s(
       "label",
       {
         htmlFor: `ItemActionDrawerTrigger-${e}`,
-        className: "gi-header-tool-item",
-        onClick: () => n(!0),
+        className: p({ appearance: u }),
+        onClick: () => g(!0),
         children: [
           /* @__PURE__ */ a(
-            m,
+            h,
             {
               "data-testid": `ItemActionDrawerTrigger-${e}`,
-              className: "gi-block gi-w-0 gi-absolute gi-h-0",
+              className: "gi-header-tool-item-input",
               id: `ItemActionDrawerTrigger-${e}`,
               "data-index": e,
-              "aria-label": g || i || "",
+              "aria-label": m || l || "",
               type: "checkbox"
             }
           ),
-          i && /* @__PURE__ */ a(
+          l && /* @__PURE__ */ a(
             "span",
             {
               id: `ItemActionDrawerTrigger-${e}-label`,
               className: "label",
-              "aria-hidden": g ? "true" : "false",
-              children: i
+              "aria-hidden": m ? "true" : "false",
+              children: l
             }
           ),
-          c && /* @__PURE__ */ a(
-            o,
+          d && /* @__PURE__ */ a(
+            i,
             {
-              className: d({
-                "gi-hidden": t,
-                "gi-block": !t
+              className: n({
+                "gi-hidden": o,
+                "gi-block": !o
               }),
-              icon: c,
+              icon: d,
               id: `ItemIconDrawerActionTrigger-${e}`,
               ariaHidden: !0
             }
           ),
           /* @__PURE__ */ a(
-            o,
+            i,
             {
-              className: d({
-                "gi-hidden": !t,
-                "gi-block": t
+              className: n({
+                "gi-hidden": !o,
+                "gi-block": o
               }),
               id: `ItemCloseTrigger-${e}`,
               ariaHidden: !0,
@@ -80,35 +86,40 @@ const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
       }
     ),
     /* @__PURE__ */ a(
-      b,
+      f,
       {
-        isOpen: t,
-        onClose: () => n(!1),
-        position: h || "right",
-        closeButtonLabel: s("header.drawer.close", {
+        isOpen: o,
+        onClose: () => g(!1),
+        position: t || "right",
+        closeButtonLabel: c("header.drawer.close", {
           defaultValue: "Close"
         }),
         closeButtonSize: "large",
-        children: /* @__PURE__ */ a(I, { children: r })
+        children: /* @__PURE__ */ a(T, { children: r })
       }
     )
   ] });
-}, y = ({ item: e, index: r }) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a($, { index: r, item: e }) : /* @__PURE__ */ l(
+}, B = ({
+  item: e,
+  index: r,
+  appearance: t
+}) => e.slotAppearance === "drawer" ? /* @__PURE__ */ a(C, { index: r, item: e, appearance: t }) : /* @__PURE__ */ s(
   "label",
   {
     htmlFor: `ItemActionTrigger-${r}`,
-    "aria-label": s("header.toggleActionItem", {
+    "aria-label": c("header.toggleActionItem", {
       item: e.label || `item ${r + 1}`,
       defaultValue: `Toggle item action for ${e.label || `item ${r + 1}`}`
     }),
-    className: "gi-header-tool-item",
+    className: p({ appearance: t }),
     "data-label-index": r,
     children: [
       /* @__PURE__ */ a(
-        m,
+        h,
         {
           "data-testid": `ItemActionTrigger-${r}`,
           id: `ItemActionTrigger-${r}`,
+          className: "gi-header-tool-item-input",
           "data-index": r,
           "aria-expanded": "false",
           "aria-controls": `SlotContainer-${r + 1}`,
@@ -117,7 +128,7 @@ const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
       ),
       e.label && /* @__PURE__ */ a("span", { className: "label", children: e.label }),
       e.icon && /* @__PURE__ */ a(
-        o,
+        i,
         {
           icon: e.icon,
           ariaHidden: !0,
@@ -125,7 +136,7 @@ const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
         }
       ),
       /* @__PURE__ */ a(
-        o,
+        i,
         {
           className: "gi-hidden close-icon",
           ariaHidden: !0,
@@ -138,6 +149,6 @@ const D = ({ index: e, slot: r }) => /* @__PURE__ */ a(
   }
 );
 export {
-  D as SlotContainer,
-  y as SlotItemAction
+  y as SlotContainer,
+  B as SlotItemAction
 };

package/dist/header/header.d.ts

@@ -1,2 +1,2 @@
 import { HeaderProps } from './types.js';
-export declare function Header({ title, items, logo, secondaryLinks, fullWidth, addDefaultMobileMenu, mobileMenuLabel, showMenuLabel, showTitleOnMobile, dataTestid, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, items, logo, secondaryLinks, fullWidth, addDefaultMobileMenu, mobileMenuLabel, showMenuLabel, showTitleOnMobile, dataTestid, appearance, }: HeaderProps): import("react/jsx-runtime").JSX.Element;