@ogcio/design-system-react 1.19.0 → 1.20.0

package/dist/header/types.d.ts

@@ -1,3 +1,4 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from 'react';
 import { LogoProps } from '../common/types.js';
 import { DrawerPosition } from '../drawer/drawer.js';
 import { IconId } from '../icon/icon.js';
@@ -67,17 +68,96 @@ export type SecondaryLink = {
     href?: undefined;
     label?: undefined;
 };
-export type HeaderProps = {
+export type HeaderProps = ComponentPropsWithoutRef<'header'> & {
+    dataTestid?: string;
+    fullWidth?: boolean;
+    children?: ReactNode;
+    /**
+     * @deprecated Replaced by `variant` (new composable API).
+     * Use: `<Header variant="default" | "light">…</Header>`.
+     */
+    appearance?: HeaderAppearance;
+    /**
+     * @deprecated Use `<HeaderTitle>` child instead.
+     * Example: `<Header><HeaderTitle>My site</HeaderTitle></Header>`.
+     */
     title?: string;
+    /**
+     * @deprecated Use `<HeaderLogo>` + `<SomeLogo />` children.
+     * Example: `<Header><HeaderLogo><img src="..."/></HeaderLogo></Header>`.
+     */
     logo?: LogoProps;
+    /**
+     * @deprecated Mobile menu is now composed with `<HeaderPrimaryMenu>` and item buttons/links.
+     * Use: `<HeaderPrimaryMenu><HeaderMenuItemButton showItemMode="mobile-only" … /></HeaderPrimaryMenu>`.
+     */
     addDefaultMobileMenu?: boolean;
+    /**
+     * @deprecated Provide your own button/label via `<HeaderPrimaryMenu>` children.
+     * Use: `<HeaderMenuItemButton aria-label="Open menu">Menu</HeaderMenuItemButton>`.
+     */
     mobileMenuLabel?: string;
+    /**
+     * @deprecated Control visibility per item with `showItemMode`.
+     * Use: `<HeaderMenuItemButton showItemMode="desktop-only" />` (or `mobile-only`, `always`).
+     */
     showMenuLabel?: boolean;
+    /**
+     * @deprecated Replace with composable menu children.
+     * Use:
+     * `<HeaderPrimaryMenu>
+     *    <HeaderMenuItemLink href="/departments">Departments</HeaderMenuItemLink>
+     *    <HeaderMenuItemButton icon="search" …>Search</HeaderMenuItemButton>
+     *  </HeaderPrimaryMenu>`
+     */
     items?: HeaderItem[];
+    /**
+     * @deprecated Replace with `<HeaderSecondaryMenu>` + `<HeaderMenuItemLink|Slot>`.
+     * Use:
+     * `<HeaderSecondaryMenu>
+     *    <HeaderMenuItemLink href="/ga">Gaeilge</HeaderMenuItemLink>
+     *    <HeaderMenuItemSlot><UserChip/></HeaderMenuItemSlot>
+     *  </HeaderSecondaryMenu>`
+     */
     secondaryLinks?: SecondaryLink[];
-    fullWidth?: boolean;
+    /**
+     * @deprecated The title’s responsive behavior is controlled by your child components and CSS.
+     * Use: media utilities (e.g., hide/show via classes) around `<HeaderTitle>`.
+     */
     showTitleOnMobile?: boolean;
-    dataTestid?: string;
-    appearance?: HeaderAppearance;
 };
+export type HeaderNextProps = ComponentPropsWithoutRef<'header'> & {
+    children?: ReactNode;
+    variant?: HeaderVariant;
+    fullWidth?: boolean;
+};
+export type HeaderLogoProps = PropsWithChildren;
+export type HeaderVariant = 'default' | 'light';
+export type HeaderMenuItemLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+    showItemMode?: HeaderItemMode;
+    icon?: IconId;
+    href?: string;
+    external?: boolean;
+    children: ReactNode;
+};
+export type HeaderMenuItemButtonProps = PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement> & {
+    className?: string;
+    asChild?: boolean;
+    showItemMode?: HeaderItemMode;
+    icon?: IconId;
+}>;
+export type HeaderPrimaryMenuProps = PropsWithChildren<ComponentPropsWithoutRef<'nav'>>;
+export type HeaderMenuSectionContextProps = 'primary' | 'secondary';
+export type HeaderSlotContainerProps = PropsWithChildren<{
+    variant: HeaderVariant;
+    className?: string;
+} & ComponentPropsWithoutRef<'div'>>;
+export type HeaderTitleProps = PropsWithChildren<{
+    className?: string;
+} & ComponentPropsWithoutRef<'div'>>;
+export type HeaderSecondaryMenuProps = PropsWithChildren<ComponentPropsWithoutRef<'nav'>>;
+export type HeaderMenuItemSlotProps = PropsWithChildren<ComponentPropsWithoutRef<'div'> & {
+    children?: ReactNode;
+}>;
 export {};

package/dist/header/variants.d.ts

@@ -35,7 +35,7 @@ export declare const headerToolItemVariants: import('tailwind-variants').TVRetur
         default: string;
         light: string;
     };
-}, undefined, "gi-header-tool-item ", TVConfig<V, EV>, {
+}, undefined, "gi-header-tool-item", TVConfig<V, EV>, {
     appearance: {
         default: string;
         light: string;
@@ -45,7 +45,7 @@ export declare const headerToolItemVariants: import('tailwind-variants').TVRetur
         default: string;
         light: string;
     };
-}, undefined, "gi-header-tool-item ", TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, "gi-header-tool-item", TVConfig<V, EV>, unknown, unknown, undefined>>;
 export declare const headerSecondaryLinksVariants: import('tailwind-variants').TVReturnType<{
     appearance: {
         default: string;

package/dist/header/variants.js

@@ -16,7 +16,7 @@ const e = {
     appearance: r
   }
 }), s = a({
-  base: "gi-header-tool-item ",
+  base: "gi-header-tool-item",
   variants: {
     appearance: {
       default: `${e.default} gi-header-tool-item-default`,

package/dist/hooks/use-toggle-map.d.ts

@@ -0,0 +1,15 @@
+export declare const ACTIONS: {
+    readonly OPEN: "open";
+    readonly CLOSE: "close";
+    readonly TOGGLE: "toggle";
+    readonly OPEN_ALL: "openAll";
+    readonly CLOSE_ALL: "closeAll";
+};
+export declare const useToggleMap: (initialState: any) => readonly [any, {
+    open: (key: string) => void;
+    close: (key: string) => void;
+    toggle: (key: string) => void;
+    openAll: () => void;
+    closeAll: () => void;
+    isOpen: (key: string) => boolean;
+}];

package/dist/hooks/use-toggle-map.js

@@ -0,0 +1,45 @@
+"use client";
+import "@ogcio/design-system-react/browser-check";
+import { useReducer as u, useMemo as E } from "react";
+const t = {
+  OPEN: "open",
+  CLOSE: "close",
+  TOGGLE: "toggle",
+  OPEN_ALL: "openAll",
+  CLOSE_ALL: "closeAll"
+}, O = (s, L) => {
+  const l = { ...s }, n = Object.keys(s);
+  for (const o of n)
+    l[o] = L;
+  return l;
+}, C = (s) => {
+  const L = {
+    [t.OPEN]: (e, r) => ({ ...e, [r.key]: !0 }),
+    [t.CLOSE]: (e, r) => ({ ...e, [r.key]: !1 }),
+    [t.TOGGLE]: (e, r) => ({ ...e, [r.key]: !e[r.key] }),
+    [t.OPEN_ALL]: (e) => O(e, !0),
+    [t.CLOSE_ALL]: (e) => O(e, !1)
+  }, l = (e, r) => (L[r.type] ?? ((p) => p))(e, r), [n, o] = u(l, s), c = E(() => ({
+    open: (e) => {
+      o({ type: t.OPEN, key: e });
+    },
+    close: (e) => {
+      o({ type: t.CLOSE, key: e });
+    },
+    toggle: (e) => {
+      o({ type: t.TOGGLE, key: e });
+    },
+    openAll: () => {
+      o({ type: t.OPEN_ALL });
+    },
+    closeAll: () => {
+      o({ type: t.CLOSE_ALL });
+    },
+    isOpen: (e) => !!(n != null && n[e])
+  }), [n]);
+  return [n, c];
+};
+export {
+  t as ACTIONS,
+  C as useToggleMap
+};

package/dist/icon/icons.d.ts

@@ -1,2 +1,2 @@
-export declare const iconIds: readonly ["accessibility_new", "add_circle", "apps", "arrow_back", "arrow_downward", "arrow_drop_down", "arrow_drop_up", "arrow_forward", "arrow_left_alt", "arrow_outward", "arrow_right_alt", "arrow_upward", "attach_file", "block", "call", "cancel", "candlestick_chart", "chat_bubble", "check", "check_circle", "chevron_left", "chevron_right", "child_care", "close", "content_copy", "credit_card", "delete", "directions_car", "do_not_disturb_on", "download", "edit", "error", "event", "filter_list", "health_and_safety", "home", "info", "keyboard_arrow_down", "keyboard_arrow_up", "location_on", "login", "logout", "mail", "menu", "mic", "more_horiz", "more_vert", "open_in_new", "person", "person_cancel", "person_check", "refresh", "search", "send", "settings", "sort", "space_dashboard", "sync", "swap_vert", "thumb_down", "thumb_up", "unfold_more", "upload", "visibility", "visibility_off", "warning", "work", "social_bluesky", "social_facebook", "social_instagram", "social_linkedin", "social_threads", "social_tiktok", "social_x", "social_youtube", "placeholder", "first_page", "last_page"];
-export declare const Icons: ("accessibility_new" | "add_circle" | "apps" | "arrow_back" | "arrow_downward" | "arrow_drop_down" | "arrow_drop_up" | "arrow_forward" | "arrow_left_alt" | "arrow_outward" | "arrow_right_alt" | "arrow_upward" | "attach_file" | "block" | "call" | "cancel" | "candlestick_chart" | "chat_bubble" | "check" | "check_circle" | "chevron_left" | "chevron_right" | "child_care" | "close" | "content_copy" | "credit_card" | "delete" | "directions_car" | "do_not_disturb_on" | "download" | "edit" | "error" | "event" | "filter_list" | "health_and_safety" | "home" | "info" | "keyboard_arrow_down" | "keyboard_arrow_up" | "location_on" | "login" | "logout" | "mail" | "menu" | "mic" | "more_horiz" | "more_vert" | "open_in_new" | "person" | "person_cancel" | "person_check" | "refresh" | "search" | "send" | "settings" | "sort" | "space_dashboard" | "sync" | "swap_vert" | "thumb_down" | "thumb_up" | "unfold_more" | "upload" | "visibility" | "visibility_off" | "warning" | "work" | "social_bluesky" | "social_facebook" | "social_instagram" | "social_linkedin" | "social_threads" | "social_tiktok" | "social_x" | "social_youtube" | "placeholder" | "first_page" | "last_page")[];
+export declare const iconIds: readonly ["accessibility_new", "add_circle", "apps", "arrow_back", "arrow_downward", "arrow_drop_down", "arrow_drop_up", "arrow_forward", "arrow_left_alt", "arrow_outward", "arrow_right_alt", "arrow_upward", "attach_file", "block", "call", "cancel", "candlestick_chart", "chat_bubble", "check", "check_circle", "chevron_left", "chevron_right", "child_care", "close", "content_copy", "credit_card", "delete", "directions_car", "do_not_disturb_on", "download", "edit", "error", "event", "filter_list", "health_and_safety", "home", "info", "keyboard_arrow_down", "keyboard_arrow_up", "link", "location_on", "login", "logout", "mail", "menu", "mic", "more_horiz", "more_vert", "open_in_new", "person", "person_cancel", "person_check", "refresh", "search", "send", "settings", "sort", "space_dashboard", "sync", "swap_vert", "thumb_down", "thumb_up", "unfold_more", "upload", "visibility", "visibility_off", "warning", "work", "social_bluesky", "social_facebook", "social_instagram", "social_linkedin", "social_threads", "social_tiktok", "social_x", "social_youtube", "placeholder", "first_page", "last_page"];
+export declare const Icons: ("accessibility_new" | "add_circle" | "apps" | "arrow_back" | "arrow_downward" | "arrow_drop_down" | "arrow_drop_up" | "arrow_forward" | "arrow_left_alt" | "arrow_outward" | "arrow_right_alt" | "arrow_upward" | "attach_file" | "block" | "call" | "cancel" | "candlestick_chart" | "chat_bubble" | "check" | "check_circle" | "chevron_left" | "chevron_right" | "child_care" | "close" | "content_copy" | "credit_card" | "delete" | "directions_car" | "do_not_disturb_on" | "download" | "edit" | "error" | "event" | "filter_list" | "health_and_safety" | "home" | "info" | "keyboard_arrow_down" | "keyboard_arrow_up" | "link" | "location_on" | "login" | "logout" | "mail" | "menu" | "mic" | "more_horiz" | "more_vert" | "open_in_new" | "person" | "person_cancel" | "person_check" | "refresh" | "search" | "send" | "settings" | "sort" | "space_dashboard" | "sync" | "swap_vert" | "thumb_down" | "thumb_up" | "unfold_more" | "upload" | "visibility" | "visibility_off" | "warning" | "work" | "social_bluesky" | "social_facebook" | "social_instagram" | "social_linkedin" | "social_threads" | "social_tiktok" | "social_x" | "social_youtube" | "placeholder" | "first_page" | "last_page")[];

package/dist/icon/icons.js

@@ -76,6 +76,8 @@ const o = [
   // Keyboard arrow down
   "keyboard_arrow_up",
   // Keyboard arrow up
+  "link",
+  // Link
   "location_on",
   // Location on
   "login",

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export type { FormFieldProps } from './forms/form-field/types.js';
 export { Form } from './forms/form.js';
 export { HeaderSearch, type HeaderSearchProps, } from './header/components/header-search.js';
 export { Header } from './header/header.js';
+export * from './header/header-next/index.js';
 export type { HeaderItem, HeaderProps } from './header/types.js';
 export { Heading, type HeadingProps } from './heading/heading.js';
 export type { HintTextProps } from './hint-text/types.js';
@@ -109,3 +110,4 @@ export type { ToastHorizontalPosition, ToastPosition, ToastProps, ToastVariant,
 export { Tooltip, type TooltipProps } from './tooltip/tooltip.js';
 export { EditableTableCell } from './data-table/editable-table-cell.js';
 export type { EditorTableCellConfig, EditorTableCellProps, } from './data-table/types.js';
+export { useToggleMap } from './hooks/use-toggle-map.js';