@abgov/react-components 7.2.2 → 7.4.0

package/lib/app-header/app-header.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from 'react';
+import { ReactNode, JSX } from 'react';
 import { DataAttributes } from '@abgov/ui-components-common';
 interface WCProps {
     heading?: string;
@@ -22,7 +22,7 @@ declare module "react" {
 export interface GoabAppHeaderProps extends DataAttributes {
     /** Set the service name to display in the app header. */
     heading?: string;
-    /** V2 only: Secondary text displayed under the service name. */
+    /** Secondary text displayed under the service name. */
     secondaryText?: string;
     /** Set the URL to link from the alberta.ca logo. A full url is required. */
     url?: string;
@@ -31,12 +31,20 @@ export interface GoabAppHeaderProps extends DataAttributes {
     /** Sets the breakpoint in px for the full menu to display. */
     fullMenuBreakpoint?: number;
     /** Content rendered inside the app header, typically navigation links. */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /** Callback fired when the menu button is clicked. When provided, clicking the menu button dispatches a custom event instead of toggling the menu. */
     onMenuClick?: () => void;
     /** Sets a data-testid attribute for automated testing. */
     testId?: string;
+    /** Banner content displayed above the header. */
+    banner?: ReactNode;
+    /** Phase badge content displayed beside the service name. */
+    phase?: ReactNode;
+    /** Links and app header menus appear in the navigation bar below the header. Use plain links for single items and app header menu for grouped items with a dropdown. */
+    navigation?: ReactNode;
+    /** Actions like user account menus appear on the right side of the header. Use menu button for dropdowns with actions. */
+    utilities?: ReactNode;
 }
 /** Provide structure to help users find their way around the service. */
-export declare function GoabAppHeader({ onMenuClick, children, secondaryText, ...rest }: GoabAppHeaderProps): JSX.Element;
+export declare function GoabAppHeader({ onMenuClick, children, secondaryText, banner, phase, navigation, utilities, ...rest }: GoabAppHeaderProps): JSX.Element;
 export {};

package/lib/app-header-menu/app-header-menu.d.ts

@@ -19,7 +19,7 @@ export interface GoabAppHeaderMenuProps extends DataAttributes {
     leadingIcon?: GoabIconType;
     /** Sets a data-testid attribute for automated testing. */
     testId?: string;
-    /** Slot name used to place this menu in the correct slot of the parent component. */
+    /** @deprecated Sets the slot name for the component. Deprecated: use AppHeader navigation prop instead. */
     slotName?: string;
     /** Content rendered inside the menu dropdown, typically navigation links. */
     children?: ReactNode;

package/lib/badge/badge.d.ts

@@ -1,5 +1,5 @@
 import { DataAttributes, GoabBadgeEmphasis, GoabBadgeSize, GoabBadgeType, GoabIconType, Margins } from '@abgov/ui-components-common';
-import { JSX } from 'react';
+import { JSX, ReactNode } from 'react';
 interface WCProps extends Margins {
     type: GoabBadgeType;
     icon?: string;
@@ -23,8 +23,8 @@ export interface GoabBadgeProps extends Margins, DataAttributes {
     type: GoabBadgeType;
     /** @deprecated Use iconType instead. When true, displays an icon in the badge. */
     icon?: boolean;
-    /** Text label of the badge. */
-    content?: string;
+    /** Content displayed in the badge. Accepts a string or ReactNode for custom content. */
+    content?: ReactNode;
     /** Sets a data-testid attribute for automated testing. */
     testId?: string;
     /** Accessible label for screen readers. */
@@ -37,5 +37,5 @@ export interface GoabBadgeProps extends Margins, DataAttributes {
     emphasis?: GoabBadgeEmphasis;
 }
 /** Small labels which hold small amounts of information, system feedback, or states. */
-export declare function GoabBadge({ icon, iconType, size, emphasis, ...rest }: GoabBadgeProps): JSX.Element;
+export declare function GoabBadge({ content, icon, iconType, size, emphasis, ...rest }: GoabBadgeProps): JSX.Element;
 export {};

package/lib/block/block.d.ts

@@ -4,6 +4,7 @@ export interface WCProps extends Margins {
     gap?: Spacing;
     direction?: GoabBlockDirection;
     alignment?: GoabBlockAlignment;
+    stretch?: string;
     "min-width"?: string;
     "max-width"?: string;
     width?: string;
@@ -23,6 +24,8 @@ export interface GoabBlockProps extends Margins, DataAttributes {
     direction?: GoabBlockDirection;
     /** Primary axis alignment of child components. @default "normal" */
     alignment?: GoabBlockAlignment;
+    /** When true, children fill the cross-axis (e.g. width in a column block) regardless of alignment. @default false */
+    stretch?: boolean;
     /** Sets the minimum width of the block container. */
     minWidth?: string;
     /** Sets the maximum width of the block container. */
@@ -35,4 +38,4 @@ export interface GoabBlockProps extends Margins, DataAttributes {
     children?: ReactNode;
 }
 /** Group components into a block with consistent space between. */
-export declare function GoabBlock({ testId, children, ...rest }: GoabBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function GoabBlock({ testId, stretch, children, ...rest }: GoabBlockProps): import("react/jsx-runtime").JSX.Element;

package/lib/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { DataAttributes, GoabCheckboxOnChangeDetail, GoabCheckboxSize, Margins } from '@abgov/ui-components-common';
+import { DataAttributes, GoabCheckboxOnBlurDetail, GoabCheckboxOnChangeDetail, GoabCheckboxOnFocusDetail, GoabCheckboxSize, Margins } from '@abgov/ui-components-common';
 import { JSX } from 'react';
 declare module "react" {
     namespace JSX {
@@ -62,8 +62,12 @@ export interface GoabCheckboxProps extends Margins, DataAttributes {
     size?: GoabCheckboxSize;
     /** Callback fired when the checkbox selection changes. */
     onChange?: (detail: GoabCheckboxOnChangeDetail) => void;
+    /** Callback fired when the checkbox receives focus. */
+    onFocus?: (detail: GoabCheckboxOnFocusDetail) => void;
+    /** Callback fired when the checkbox loses focus. */
+    onBlur?: (detail: GoabCheckboxOnBlurDetail) => void;
 }
 export type Props = GoabCheckboxProps;
 /** Let the user select one or more options. */
-export declare function GoabCheckbox({ error, checked, indeterminate, disabled, value, description, reveal, onChange, name, children, size, ...rest }: GoabCheckboxProps): JSX.Element;
+export declare function GoabCheckbox({ error, checked, indeterminate, disabled, value, description, reveal, onChange, onFocus, onBlur, name, children, size, ...rest }: GoabCheckboxProps): JSX.Element;
 export default GoabCheckbox;

package/lib/checkbox-list/checkbox-list.d.ts

@@ -1,4 +1,4 @@
-import { GoabCheckboxListOnChangeDetail, Margins } from '@abgov/ui-components-common';
+import { GoabCheckboxListOnBlurDetail, GoabCheckboxListOnChangeDetail, GoabCheckboxListOnFocusDetail, Margins } from '@abgov/ui-components-common';
 import { JSX } from 'react';
 interface WCProps extends Margins {
     ref: React.RefObject<HTMLElement | null>;
@@ -37,7 +37,11 @@ export interface GoabCheckboxListProps extends Margins {
     children?: React.ReactNode;
     /** Callback fired when the selected values change. */
     onChange?: (detail: GoabCheckboxListOnChangeDetail) => void;
+    /** Callback fired when focus enters any checkbox in the list. */
+    onFocus?: (detail: GoabCheckboxListOnFocusDetail) => void;
+    /** Callback fired when focus leaves all checkboxes in the list. */
+    onBlur?: (detail: GoabCheckboxListOnBlurDetail) => void;
 }
 /** A multiple selection input. */
-export declare function GoabCheckboxList({ name, value, disabled, error, testId, maxWidth, size, children, onChange, mt, mr, mb, ml, }: GoabCheckboxListProps): JSX.Element;
+export declare function GoabCheckboxList({ name, value, disabled, error, testId, maxWidth, size, children, onChange, onFocus, onBlur, mt, mr, mb, ml, }: GoabCheckboxListProps): JSX.Element;
 export default GoabCheckboxList;

package/lib/date-picker/date-picker.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { GoabDatePickerInputType, GoabDatePickerOnChangeDetail, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabDatePickerInputType, GoabDatePickerOnBlurDetail, GoabDatePickerOnChangeDetail, GoabDatePickerOnFocusDetail, Margins, DataAttributes } from '@abgov/ui-components-common';
 interface WCProps extends Margins {
     name?: string;
     value?: string;
@@ -45,7 +45,11 @@ export interface GoabDatePickerProps extends Margins, DataAttributes {
     width?: string;
     /** Callback fired when the selected date changes. */
     onChange?: (detail: GoabDatePickerOnChangeDetail) => void;
+    /** Callback fired when focus enters any of the date picker's internal fields. */
+    onFocus?: (detail: GoabDatePickerOnFocusDetail) => void;
+    /** Callback fired when focus leaves all of the date picker's internal fields. */
+    onBlur?: (detail: GoabDatePickerOnBlurDetail) => void;
 }
 /** Lets users select a date through a calendar without the need to manually type it in a field. */
-export declare function GoabDatePicker({ value, error, min, max, disabled, relative, onChange, ...rest }: GoabDatePickerProps): JSX.Element;
+export declare function GoabDatePicker({ value, error, min, max, disabled, relative, onChange, onFocus, onBlur, ...rest }: GoabDatePickerProps): JSX.Element;
 export default GoabDatePicker;

package/lib/dropdown/dropdown-item.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { GoabDropdownItemMountType } from '@abgov/ui-components-common';
 interface WCProps {
     value: string;
@@ -18,17 +19,19 @@ export interface GoabDropdownItemProps {
     value: string;
     /** Display label for the dropdown item. */
     label?: string;
-    /** Text used to filter and match this item in typeahead search. */
+    /** Rich item content. On selection, `label` is shown and `filter` defaults to the content's text. */
     filter?: string;
     /** Sets a data-testid attribute for automated testing. */
     testId?: string;
     /** Controls how the item is registered with the parent dropdown. */
     mountType?: GoabDropdownItemMountType;
+    /** Rich content rendered for this item in the dropdown menu. When set, `label` is shown in the dropdown input on selection and `filter` defaults to the content's text. */
+    children?: ReactNode;
     /** @deprecated */
     name?: string;
 }
 /** Present a list of options to the user to select from. */
 export declare function GoabDropdownOption(props: GoabDropdownItemProps): import("react/jsx-runtime").JSX.Element;
 /** Present a list of options to the user to select from. */
-export declare function GoabDropdownItem({ value, label, filter, name, mountType, }: GoabDropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function GoabDropdownItem({ value, label, filter, name, mountType, children, }: GoabDropdownItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/dropdown/dropdown.d.ts

@@ -1,4 +1,4 @@
-import { GoabDropdownOnChangeDetail, GoabDropdownSize, GoabIconType, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabDropdownOnBlurDetail, GoabDropdownOnChangeDetail, GoabDropdownOnFocusDetail, GoabDropdownSize, GoabIconType, Margins, DataAttributes } from '@abgov/ui-components-common';
 import { JSX } from 'react';
 interface WCProps extends Margins {
     arialabel?: string;
@@ -38,6 +38,10 @@ export interface GoabDropdownProps extends Margins, DataAttributes {
     value?: string[] | string;
     /** Callback fired when the selected value changes. */
     onChange?: (detail: GoabDropdownOnChangeDetail) => void;
+    /** Callback fired when the dropdown receives focus. */
+    onFocus?: (detail: GoabDropdownOnFocusDetail) => void;
+    /** Callback fired when the dropdown loses focus. */
+    onBlur?: (detail: GoabDropdownOnBlurDetail) => void;
     /** Defines how the selected value will be translated for the screen reader. If not specified it will fall back to the name. */
     ariaLabel?: string;
     /** The aria-labelledby attribute identifies the element that labels the dropdown. Normally it is the id of the label. */
@@ -76,5 +80,5 @@ export interface GoabDropdownProps extends Margins, DataAttributes {
     relative?: boolean;
 }
 /** Present a list of options to the user to select from. */
-export declare function GoabDropdown({ value, onChange, disabled, error, filterable, multiselect, native, relative, children, size, ...rest }: GoabDropdownProps): JSX.Element;
+export declare function GoabDropdown({ value, onChange, onFocus, onBlur, disabled, error, filterable, multiselect, native, relative, children, size, ...rest }: GoabDropdownProps): JSX.Element;
 export default GoabDropdown;

package/lib/dropdown-multiselect/dropdown-multiselect.d.ts

@@ -0,0 +1,66 @@
+import { GoabDropdownMultiselectLabelFormatOptions, GoabDropdownMultiselectOnChangeDetail, GoabDropdownMultiselectSize, GoabIconType, Margins } from '@abgov/ui-components-common';
+import { JSX } from 'react';
+interface WCProps extends Margins {
+    ref: React.RefObject<HTMLElement | null>;
+    name: string;
+    value?: string[];
+    placeholder?: string;
+    disabled?: string;
+    error?: string;
+    filterable?: string;
+    "leading-icon"?: string;
+    testid?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "max-height"?: string;
+    width?: string;
+    size?: GoabDropdownMultiselectSize;
+    "label-format"?: string;
+    "show-select-all"?: string;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-dropdown-multiselect": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoabDropdownMultiselectProps extends Margins {
+    /** @required Identifier for the group. Used in change events. */
+    name: string;
+    /** Array of currently selected checkbox value. */
+    value?: string[];
+    /** Text shown when nothing is selected. */
+    placeholder?: string;
+    /** Enables filtering of options by typing in the trigger. */
+    filterable?: boolean;
+    /** Icon shown to the left of the dropdown input. */
+    leadingIcon?: GoabIconType;
+    /** Disables the component.  @default false */
+    disabled?: boolean;
+    /** Shows an error state.  @default false */
+    error?: boolean;
+    /** Sets a data-testid attribute for automated testing. */
+    testId?: string;
+    /** Provides an accessible label when no visible label is associated. */
+    ariaLabel?: string;
+    /** References an external element that labels this component. */
+    ariaLabelledBy?: string;
+    /** Sets the maximum height of the dropdown content area. @default "276px" */
+    maxHeight?: string;
+    /** Sets a fixed width for the component and popover panel. */
+    width?: string;
+    /** Sets the size variant. @default "default" */
+    size?: GoabDropdownMultiselectSize;
+    /** The display label format of the closed dropdown. When 'count' the display label shows only "n items" in the label, when 'list' it shows a comma separated list of selected item labels. @default "list" */
+    labelFormat?: GoabDropdownMultiselectLabelFormatOptions;
+    /** Shows a "Select All" checkbox at the top of the options list. @default false */
+    showSelectAll?: boolean;
+    /** Dropdown items rendered inside the component (GoabDropdownItem elements). */
+    children?: React.ReactNode;
+    /** Callback fired when the selected value change. */
+    onChange?: (detail: GoabDropdownMultiselectOnChangeDetail) => void;
+}
+/** A dropdown that presents a list of checkboxes for multiple selection. */
+export declare function GoabDropdownMultiselect({ name, value, placeholder, disabled, error, filterable, leadingIcon, showSelectAll, testId, ariaLabel, ariaLabelledBy, maxHeight, width, size, labelFormat, children, onChange, mt, mr, mb, ml, }: GoabDropdownMultiselectProps): JSX.Element;
+export default GoabDropdownMultiselect;

package/lib/filter-chip/filter-chip.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 import { DataAttributes, GoabFilterChipTheme, GoabIconType, Margins } from '@abgov/ui-components-common';
 interface WCProps extends Margins {
     icontheme: GoabFilterChipTheme;
     error?: string;
-    content: string;
+    content?: string;
+    arialabel?: string;
     secondarytext?: string;
     leadingicon?: GoabIconType;
     testid?: string;
@@ -18,8 +20,10 @@ declare module "react" {
     }
 }
 export interface GoabFilterChipProps extends Margins, DataAttributes {
-    /** @required Text label of the chip. */
-    content: string;
+    /** @required Content displayed in the chip. Accepts a string or ReactNode for custom content. */
+    content: ReactNode;
+    /** Accessible content used to label the filter chip controls. */
+    ariaLabel?: string;
     /** Theme style of the leading icon. @default "outline" */
     iconTheme?: GoabFilterChipTheme;
     /** Shows an error state. */
@@ -34,5 +38,5 @@ export interface GoabFilterChipProps extends Margins, DataAttributes {
     onClick?: () => void;
 }
 /** Allow the user to enter information, filter content, and make selections. */
-export declare const GoabFilterChip: ({ iconTheme, error, onClick, ...rest }: GoabFilterChipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GoabFilterChip: ({ content, iconTheme, error, onClick, ...rest }: GoabFilterChipProps) => import("react/jsx-runtime").JSX.Element;
 export default GoabFilterChip;

package/lib/icon-button/icon-button.d.ts

@@ -1,10 +1,11 @@
-import { GoabIconButtonVariant, GoabIconSize, GoabIconTheme, GoabIconType, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabIconButtonType, GoabIconButtonVariant, GoabIconSize, GoabIconTheme, GoabIconType, Margins, DataAttributes } from '@abgov/ui-components-common';
 import { JSX, ReactNode } from 'react';
 interface WCProps extends Margins {
     icon: GoabIconType;
     size?: GoabIconSize;
     theme?: GoabIconTheme;
     variant?: GoabIconButtonVariant;
+    type?: GoabIconButtonType;
     title?: string;
     disabled?: string;
     arialabel?: string;
@@ -29,6 +30,8 @@ export interface GoabIconButtonProps extends Margins, DataAttributes {
     size?: GoabIconSize;
     /** Styles the button to show color, light, dark or destructive action. @default "color" */
     variant?: GoabIconButtonVariant;
+    /** Sets the visual style of the button. @default "default" */
+    type?: GoabIconButtonType;
     /** Sets the theme of the icon inside the button. "outline" for stroked icons, "filled" for solid icons. @default "outline" */
     theme?: GoabIconTheme;
     /** Sets the title of the button. */
@@ -51,5 +54,5 @@ export interface GoabIconButtonProps extends Margins, DataAttributes {
     children?: ReactNode;
 }
 /** A compact button with an icon and no text. */
-export declare function GoabIconButton({ variant, size, theme, disabled, onClick, actionArgs, actionArg, children, ...rest }: GoabIconButtonProps): JSX.Element;
+export declare function GoabIconButton({ variant, type, size, theme, disabled, onClick, actionArgs, actionArg, children, ...rest }: GoabIconButtonProps): JSX.Element;
 export {};

package/lib/radio-group/radio-group.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { GoabRadioGroupOnChangeDetail, GoabRadioGroupOrientation, GoabRadioGroupSize, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabRadioGroupOnBlurDetail, GoabRadioGroupOnChangeDetail, GoabRadioGroupOnFocusDetail, GoabRadioGroupOrientation, GoabRadioGroupSize, Margins, DataAttributes } from '@abgov/ui-components-common';
 export * from './radio';
 interface WCProps extends Margins {
     name: string;
@@ -45,7 +45,11 @@ export interface GoabRadioGroupProps extends Margins, DataAttributes {
     children?: React.ReactNode;
     /** Callback fired when the selected radio item changes. */
     onChange?: (detail: GoabRadioGroupOnChangeDetail) => void;
+    /** Callback fired when focus enters any radio item in the group. */
+    onFocus?: (detail: GoabRadioGroupOnFocusDetail) => void;
+    /** Callback fired when focus leaves all radio items in the group. */
+    onBlur?: (detail: GoabRadioGroupOnBlurDetail) => void;
 }
 /** Allow users to select one option from a set. */
-export declare function GoabRadioGroup({ disabled, error, onChange, name, children, size, ...rest }: GoabRadioGroupProps): JSX.Element;
+export declare function GoabRadioGroup({ disabled, error, onChange, onFocus, onBlur, name, children, size, ...rest }: GoabRadioGroupProps): JSX.Element;
 export default GoabRadioGroup;

package/lib/scroll-panel/scroll-panel.d.ts

@@ -0,0 +1,39 @@
+import { DataAttributes, GoabScrollPanelDirectionType } from '@abgov/ui-components-common';
+import { default as React, ReactNode, JSX } from 'react';
+interface WCProps {
+    height?: string;
+    testid?: string;
+    direction?: string;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-scroll-panel": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoabScrollPanelProps extends DataAttributes {
+    /** Content rendered in the sticky header region. */
+    header?: ReactNode;
+    /** Content rendered in the scrollable body region. */
+    children?: ReactNode;
+    /** Content rendered in the sticky footer region. */
+    footer?: ReactNode;
+    /**
+     * Sets the height of the panel. Accepts any valid CSS height value, including
+     * calc()/min()/clamp() and viewport units (e.g. "400px", "100%", "100vh",
+     * "calc(100vh - 4rem)"). Invalid values fall back to "100%". Defaults to "100%".
+     * The parent element must establish a height context for "100%" to resolve.
+     */
+    height?: string;
+    /** Sets a data-testid attribute for automated testing. */
+    testId?: string;
+    /**
+     * The scroll direction(s). When content overflows, enables scrolling and shadow
+     * indicators for the specified direction(s). Accepts "vertical", "horizontal", or "both".
+     * Defaults to "vertical".
+     */
+    direction?: GoabScrollPanelDirectionType;
+}
+export declare function GoabScrollPanel({ header, children, footer, height, testId, direction, ...rest }: GoabScrollPanelProps): JSX.Element;
+export default GoabScrollPanel;

package/lib/textarea/textarea.d.ts

@@ -1,4 +1,4 @@
-import { GoabTextAreaCountBy, GoabTextAreaOnChangeDetail, GoabTextAreaOnKeyPressDetail, GoabTextAreaOnBlurDetail, GoabTextAreaSize, Margins, DataAttributes } from '@abgov/ui-components-common';
+import { GoabTextAreaCountBy, GoabTextAreaOnChangeDetail, GoabTextAreaOnKeyPressDetail, GoabTextAreaOnBlurDetail, GoabTextAreaOnFocusDetail, GoabTextAreaSize, Margins, DataAttributes } from '@abgov/ui-components-common';
 import { JSX } from 'react';
 interface WCProps extends Margins {
     name: string;
@@ -64,9 +64,11 @@ export interface GoabTextAreaProps extends Margins, DataAttributes {
     onChange?: (event: GoabTextAreaOnChangeDetail) => void;
     /** Callback fired when a key is pressed within the textarea. */
     onKeyPress?: (event: GoabTextAreaOnKeyPressDetail) => void;
+    /** Callback fired when the textarea receives focus. */
+    onFocus?: (event: GoabTextAreaOnFocusDetail) => void;
     /** Callback fired when the textarea loses focus. */
     onBlur?: (event: GoabTextAreaOnBlurDetail) => void;
 }
 /** A multi-line field where users can input and edit text. */
-export declare function GoabTextArea({ readOnly, disabled, error, onChange, onKeyPress, onBlur, ...rest }: GoabTextAreaProps): JSX.Element;
+export declare function GoabTextArea({ readOnly, disabled, error, onChange, onKeyPress, onFocus, onBlur, ...rest }: GoabTextAreaProps): JSX.Element;
 export default GoabTextArea;

package/lib/workspace-layout/workspace-layout-scroll-state.d.ts

@@ -0,0 +1,22 @@
+import { GoabWorkspaceLayoutScrollState } from '@abgov/ui-components-common';
+export interface GoabWorkspaceLayoutScrollStateValue {
+    scrollPosition: GoabWorkspaceLayoutScrollState;
+    isScrollable: boolean;
+}
+export declare const GoabWorkspaceLayoutScrollStateDefault: GoabWorkspaceLayoutScrollStateValue;
+/** @internal — provided by GoabWorkspaceLayout, consumed via the hook below. */
+export declare const GoabWorkspaceLayoutScrollStateContext: import('react').Context<GoabWorkspaceLayoutScrollStateValue>;
+/**
+ * Hook that returns the current scroll state of the nearest enclosing
+ * GoabWorkspaceLayout. Returns `{ scrollPosition: 'no-scroll', isScrollable: false }`
+ * if no layout is mounted.
+ *
+ * @example
+ * ```tsx
+ * const { scrollPosition, isScrollable } = useGoabWorkspaceLayoutScrollState();
+ * const isCollapsed =
+ *   scrollPosition === GoabWorkspaceLayoutScrollState.MIDDLE ||
+ *   scrollPosition === GoabWorkspaceLayoutScrollState.AT_BOTTOM;
+ * ```
+ */
+export declare function useGoabWorkspaceLayoutScrollState(): GoabWorkspaceLayoutScrollStateValue;

package/lib/workspace-layout/workspace-layout.d.ts

@@ -0,0 +1,42 @@
+import { DataAttributes, GoabWorkspaceLayoutOnScrollStateChangeDetail } from '@abgov/ui-components-common';
+import { default as React, ReactNode, JSX } from 'react';
+interface WCProps {
+    testid?: string;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-workspace-layout": WCProps & React.HTMLAttributes<HTMLElement> & {
+                ref: React.RefObject<HTMLElement | null>;
+            };
+        }
+    }
+}
+export interface GoabWorkspaceLayoutProps extends DataAttributes {
+    /** Content rendered in the side navigation region (e.g. work-side-menu). */
+    sideMenu?: ReactNode;
+    /** Content rendered in the sticky page header region. */
+    pageHeader?: ReactNode;
+    /** Content rendered in the sticky page footer region. */
+    pageFooter?: ReactNode;
+    /**
+     * A GoabPushDrawer rendered as a sibling of the main card, inside the same
+     * workspace shell. Use this slot when the page needs a push drawer alongside
+     * the workspace layout — it gives the drawer the shell-level height and flex
+     * context it expects, so the consumer does not have to wrap the layout in
+     * their own flex container. The side menu is not pushed; only the card is.
+     */
+    pushDrawer?: ReactNode;
+    /** Main scrollable content. */
+    children?: ReactNode;
+    /** Sets a data-testid attribute for automated testing. */
+    testId?: string;
+    /**
+     * Called whenever the internal scroll state changes (no-scroll → at-top →
+     * middle → at-bottom)
+     */
+    onScrollStateChange?: (detail: GoabWorkspaceLayoutOnScrollStateChangeDetail) => void;
+}
+export declare function GoabWorkspaceLayout({ sideMenu, pageHeader, pageFooter, pushDrawer, children, testId, onScrollStateChange, ...rest }: GoabWorkspaceLayoutProps): JSX.Element;
+export default GoabWorkspaceLayout;
+export { useGoabWorkspaceLayoutScrollState, type GoabWorkspaceLayoutScrollStateValue, } from './workspace-layout-scroll-state';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "7.2.2",
+  "version": "7.4.0",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"