@abgov/react-components 7.2.0-dev.20 → 7.2.0-dev.22

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/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-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/package.json

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