@westpac/ui 1.16.0 → 1.19.0

package/dist/components/button/button.component.d.ts

@@ -1,17 +1,2 @@
-import React from 'react';
-import { ButtonRef } from './button.types.js';
-export declare const Button: React.ForwardRefExoticComponent<{
-    block?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
-    children?: React.ReactNode;
-    iconAfter?: (props: import("../icon/icon.types.js").IconProps) => JSX.Element;
-    iconBefore?: (props: import("../icon/icon.types.js").IconProps) => JSX.Element;
-    iconColor?: import("../icon/icon.types.js").IconProps["color"];
-    iconLook?: import("../icon/icon.types.js").IconProps["look"];
-    iconSize?: import("../icon/icon.types.js").IconProps["size"];
-    justify?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
-    look?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"link" | "primary" | "hero" | "faint" | "unstyled" | undefined>;
-    removeLinkPadding?: boolean;
-    size?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"small" | "xlarge" | "medium" | "large" | undefined>;
-    soft?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
-    tag?: keyof Pick<JSX.IntrinsicElements, "a" | "span" | "button" | "div">;
-} & React.ButtonHTMLAttributes<Element> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<ButtonRef>>;
+import { ButtonComponent } from './button.types.js';
+export declare const Button: ButtonComponent;

package/dist/components/button/button.component.js

@@ -5,7 +5,13 @@ import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
-function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag = 'button', iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, removeLinkPadding, type = Tag === 'button' ? 'button' : undefined, ...props }, ref) {
+function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag, iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, removeLinkPadding, ...props }, ref) {
+    var _props_type;
+    const Component = Tag !== null && Tag !== void 0 ? Tag : 'button';
+    const renderProps = Component === 'button' ? {
+        ...props,
+        type: (_props_type = props.type) !== null && _props_type !== void 0 ? _props_type : 'button'
+    } : props;
     const { isFocusVisible, focusProps } = useFocusRing();
     const btnIconSize = useMemo(()=>iconSize || getIconSize(size), [
         iconSize,
@@ -52,13 +58,12 @@ function BaseButton({ className, size = 'medium', look = 'hero', soft, block = f
         look,
         soft
     ]);
-    return React.createElement(Tag, {
+    return React.createElement(Component, {
         ref: ref,
         className: styles.base({
             className
         }),
-        ...mergeProps(props, focusProps),
-        type: type
+        ...mergeProps(renderProps, focusProps)
     }, IconBefore && React.createElement(IconBefore, {
         look: iconLook,
         size: btnIconSize,

package/dist/components/button/button.types.d.ts

@@ -1,11 +1,10 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { ResponsiveVariants } from '../../types/responsive-variants.types.js';
 import { IconProps } from '../icon/index.js';
 import { styles } from './button.styles.js';
 type Variants = VariantProps<typeof styles>;
-export type ButtonRef = HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement;
-export type ButtonProps = {
+export type BaseButtonProps = {
     /**
      * Fit button width to its parent width.
      * @default false
@@ -64,10 +63,21 @@ export type ButtonProps = {
      * Removes background colour and adjusts text colour.
      */
     soft?: ResponsiveVariants<Variants['soft']>;
+};
+export type ButtonRef<C extends React.ElementType = 'button'> = React.ComponentRef<C>;
+export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+export type ButtonProps<C extends React.ElementType = 'button'> = BaseButtonProps & {
     /**
-     * Tag to render
+     * Type to render
      * @default button
      */
-    tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
-} & ButtonHTMLAttributes<Element> & AnchorHTMLAttributes<Element>;
+    tag?: C;
+} & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseButtonProps | 'tag'>;
+export type ButtonImplementationProps = BaseButtonProps & {
+    className?: string;
+    tag?: React.ElementType;
+} & Record<string, unknown>;
+export type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonProps<C> & {
+    ref?: PolymorphicRef<C>;
+}) => React.ReactElement | null;
 export {};

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FocusHandle } from '../../hook/focus-manager-ref.hook.js';
 import type { ButtonGroupProps } from './button-group.types.js';
 import type { ToggleGroupState } from 'react-stately';
 export declare const ToggleButtonGroupContext: React.Context<(ToggleGroupState & {
@@ -7,4 +8,4 @@ export declare const ToggleButtonGroupContext: React.Context<(ToggleGroupState &
     block: ButtonGroupProps["block"];
     orientation: ButtonGroupProps["orientation"];
 }) | null>;
-export declare function ButtonGroup({ size, look, block, children, onSelect, orientation, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, className, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<FocusHandle>>;

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

@@ -1,10 +1,12 @@
 'use client';
-import React, { useCallback, useMemo } from 'react';
+import React, { forwardRef, useCallback, useMemo } from 'react';
 import { useToggleButtonGroup } from 'react-aria';
 import { useToggleGroupState } from 'react-stately';
+import { useFocusManagerRef } from '../../hook/focus-manager-ref.hook.js';
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 export const ToggleButtonGroupContext = React.createContext(null);
-export function ButtonGroup({ size, look, block, children, onSelect, orientation = 'horizontal', selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, className, ...props }) {
+function BaseButtonGroup({ size, look, block, children, onSelect, orientation = 'horizontal', selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, className, ...props }, forwardedRef) {
+    const ref = useFocusManagerRef(forwardedRef);
     const normalizeKeys = useCallback((keys)=>{
         if (keys === undefined) return undefined;
         if (selectionMode === 'multiple') return new Set(keys);
@@ -42,7 +44,6 @@ export function ButtonGroup({ size, look, block, children, onSelect, orientation
         defaultSelectedKeys: finalDefaultSelectedKeys,
         selectedKeys: finalSelectedKeys
     });
-    const ref = React.useRef(null);
     const { groupProps } = useToggleButtonGroup({
         ...props,
         orientation,
@@ -71,3 +72,5 @@ export function ButtonGroup({ size, look, block, children, onSelect, orientation
         }
     }, children));
 }
+export const ButtonGroup = forwardRef(BaseButtonGroup);
+ButtonGroup.displayName = 'ButtonGroup';

package/dist/components/checkbox-group/checkbox-group.component.d.ts

@@ -1,4 +1,13 @@
 import React from 'react';
-import { type CheckboxGroupContextState, type CheckboxGroupProps } from './checkbox-group.types.js';
+import { FocusHandle } from '../../hook/focus-manager-ref.hook.js';
+import { type CheckboxGroupContextState } from './checkbox-group.types.js';
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextState>;
-export declare function CheckboxGroup({ className, checkboxes, label, orientation, showAmount, size, errorMessage, hintMessage, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<{
+    checkboxes: import("./components/checkbox-group-checkbox/checkbox-group-checkbox.types.js").CheckboxGroupCheckboxProps[];
+    className?: string;
+    errorMessage?: string | string[];
+    hintMessage?: import("../index.js").HintProps["children"];
+    orientation?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"horizontal" | "vertical" | undefined>;
+    showAmount?: number;
+    size?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"medium" | "large">;
+} & Omit<import("react-aria").AriaCheckboxGroupProps, "errorMessage" | "description"> & React.RefAttributes<FocusHandle>>;

package/dist/components/checkbox-group/checkbox-group.component.js

@@ -1,9 +1,10 @@
 'use client';
-import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { createContext, forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
+import { acceptInputs, useFocusManagerRef } from '../../hook/focus-manager-ref.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
@@ -73,7 +74,10 @@ export const CheckboxGroupContext = createContext({
         }
     }
 });
-export function CheckboxGroup({ className, checkboxes, label, orientation = 'vertical', showAmount = 0, size = 'medium', errorMessage, hintMessage, ...props }) {
+function BaseCheckboxGroup({ className, checkboxes, label, orientation = 'vertical', showAmount = 0, size = 'medium', errorMessage, hintMessage, ...props }, ref) {
+    const wrapperRef = useFocusManagerRef(ref, {
+        accept: acceptInputs
+    });
     const state = useCheckboxGroupState({
         ...props,
         label
@@ -123,7 +127,8 @@ export function CheckboxGroup({ className, checkboxes, label, orientation = 'ver
         message: errorMessage
     }), React.createElement("div", {
         className: styles.itemWrapper(),
-        id: panelId
+        id: panelId,
+        ref: wrapperRef
     }, React.createElement(CheckboxGroupContext.Provider, {
         value: {
             state,
@@ -145,3 +150,5 @@ export function CheckboxGroup({ className, checkboxes, label, orientation = 'ver
         className: styles.buttonText()
     }, `Show ${revealAmount} more ${revealAmount === 1 ? 'item' : 'items'}`))));
 }
+export const CheckboxGroup = forwardRef(BaseCheckboxGroup);
+CheckboxGroup.displayName = 'CheckboxGroup';

package/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.d.ts

@@ -3,4 +3,4 @@ export declare const CheckboxGroupCheckbox: React.ForwardRefExoticComponent<{
     className?: string;
     hint?: React.ReactNode;
     label: React.ReactNode;
-} & Omit<import("react-aria").AriaCheckboxGroupItemProps, "children" | "isIndeterminate"> & React.RefAttributes<HTMLLabelElement>>;
+} & Omit<import("react-aria").AriaCheckboxGroupItemProps, "children" | "isIndeterminate"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.js

@@ -1,6 +1,6 @@
 'use client';
-import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import React, { forwardRef, useContext } from 'react';
+import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing, useObjectRef } from 'react-aria';
 import { Icon } from '../../../icon/icon.component.js';
 import { CheckboxGroupContext } from '../../checkbox-group.component.js';
 import { styles as checkboxItemStyles } from './checkbox-group-checkbox.styles.js';
@@ -20,12 +20,12 @@ function CheckIcon({ copyrightYear = '2025', size, ...props }) {
 }
 function BaseCheckbox({ className, hint, label, value, ...props }, ref) {
     const { state, size, orientation } = useContext(CheckboxGroupContext);
-    const localRef = useRef(null);
+    const inputRef = useObjectRef(ref);
     const { inputProps, labelProps, isDisabled, isSelected } = useCheckboxGroupItem({
         ...props,
         value,
         children: label
-    }, state, localRef);
+    }, state, inputRef);
     const { isFocusVisible, focusProps } = useFocusRing();
     const styles = checkboxItemStyles({
         isDisabled,
@@ -37,13 +37,12 @@ function BaseCheckbox({ className, hint, label, value, ...props }, ref) {
         className: styles.base({
             className
         }),
-        ref: ref,
         ...labelProps
     }, React.createElement(VisuallyHidden, {
         elementType: "span"
     }, React.createElement("input", {
         ...mergeProps(inputProps, focusProps),
-        ref: localRef
+        ref: inputRef
     })), React.createElement("span", {
         className: styles.checkbox()
     }, isSelected && React.createElement(CheckIcon, {

package/dist/components/date-picker/components/date-field/components/date-segment/date-segment.component.d.ts

@@ -1,5 +1,6 @@
-import { DateSegmentProps } from './date-segment.types.js';
-/**
- * @private
- */
-export declare function DateSegment({ segment, state, separator, ...props }: DateSegmentProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const DateSegment: React.ForwardRefExoticComponent<{
+    segment: import("react-stately").DateSegment;
+    separator?: string;
+    state: import("react-stately").DateFieldState;
+} & React.HTMLAttributes<Element> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/date-picker/components/date-field/components/date-segment/date-segment.component.js

@@ -1,9 +1,9 @@
 'use client';
-import React, { useRef } from 'react';
-import { mergeProps, useDateSegment, useFocusRing } from 'react-aria';
+import React, { forwardRef } from 'react';
+import { mergeProps, useDateSegment, useFocusRing, useObjectRef } from 'react-aria';
 import { styles as dateSegmentStyles } from './date-segment.styles.js';
-export function DateSegment({ segment, state, separator, ...props }) {
-    const ref = useRef(null);
+function BaseDateSegment({ segment, state, separator, ...props }, forwardedRef) {
+    const ref = useObjectRef(forwardedRef);
     const { focusProps, isFocusVisible } = useFocusRing();
     const { segmentProps } = useDateSegment(segment, state, ref);
     const styles = dateSegmentStyles({
@@ -17,3 +17,5 @@ export function DateSegment({ segment, state, separator, ...props }) {
         className: styles
     }, segment.type === 'literal' ? separator || segment.text : segment.text);
 }
+export const DateSegment = forwardRef(BaseDateSegment);
+DateSegment.displayName = 'DateSegment';

package/dist/components/date-picker/components/date-field/date-field.component.d.ts

@@ -1,5 +1,5 @@
-import { type DateFieldProps } from './date-field.types.js';
-/**
- * @private
- */
-export declare function DateField({ separator, className, ...props }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+import React from 'react';
+export declare const DateField: React.ForwardRefExoticComponent<import("react-aria").AriaDateFieldProps<import("react-aria").DateValue> & {
+    separator?: string;
+    className?: string;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/date-picker/components/date-field/date-field.component.js

@@ -1,10 +1,10 @@
 'use client';
 import { createCalendar } from '@internationalized/date';
-import React, { useRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { useDateField, useLocale } from 'react-aria';
 import { useDateFieldState } from 'react-stately';
 import { DateSegment } from './components/date-segment/date-segment.component.js';
-export function DateField({ separator, className, ...props }) {
+function BaseDateField({ separator, className, ...props }, forwardedRef) {
     const { locale } = useLocale();
     const state = useDateFieldState({
         ...props,
@@ -13,6 +13,7 @@ export function DateField({ separator, className, ...props }) {
     });
     const ref = useRef(null);
     const { fieldProps } = useDateField(props, state, ref);
+    const firstEditableIndex = state.segments.findIndex((segment)=>segment.isEditable);
     return React.createElement("div", {
         ...fieldProps,
         className: className,
@@ -21,6 +22,9 @@ export function DateField({ separator, className, ...props }) {
             separator: separator,
             key: i,
             segment: segment,
-            state: state
+            state: state,
+            ref: i === firstEditableIndex ? forwardedRef : null
         })));
 }
+export const DateField = forwardRef(BaseDateField);
+DateField.displayName = 'DateField';

package/dist/components/date-picker/date-picker.component.d.ts

@@ -1,2 +1,19 @@
-import { type DatePickerProps } from './date-picker.types.js';
-export declare function DatePicker({ size, className, bottomSheetView, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, placement, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+import { Breakpoint } from '@westpac/style-config/constants';
+import React from 'react';
+export declare const DatePicker: React.ForwardRefExoticComponent<Omit<import("react-stately").DatePickerStateOptions<import("react-aria").DateValue>, "onBlur"> & Omit<{
+    size?: "small" | "xlarge" | "medium" | "large" | undefined;
+    block?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isReadOnly?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+}, "size" | "block"> & Omit<React.HTMLAttributes<HTMLDivElement>, "onBlur" | "invalid" | "block"> & {
+    bottomSheetView?: boolean | Partial<Record<Breakpoint | "initial", boolean>>;
+    disableDaysOfWeek?: number[];
+    disableWeekends?: boolean;
+    separator?: string;
+    onBlur?: ((event: React.FocusEvent<Element, Element>, date?: import("react-aria").DateValue | undefined) => void) | undefined;
+    placement?: "top left" | "top right" | "bottom left" | "bottom right";
+    portalContainer?: Element;
+    size?: import("../../types/responsive-variants.types.js").ResponsiveVariants<"small" | "xlarge" | "medium" | "large" | undefined>;
+    block?: import("../../types/responsive-variants.types.js").ResponsiveVariants<boolean | undefined>;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/date-picker/date-picker.component.js

@@ -1,6 +1,6 @@
 'use client';
 import { getDayOfWeek, isWeekend } from '@internationalized/date';
-import React, { useMemo, useRef } from 'react';
+import React, { forwardRef, useMemo, useRef } from 'react';
 import { useButton, useDatePicker, useLocale } from 'react-aria';
 import { useDatePickerState } from 'react-stately';
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
@@ -20,10 +20,10 @@ const BREAKPOINTS_DECRECENT = [
     'xsl',
     'initial'
 ];
-export function DatePicker({ size = 'medium', className, bottomSheetView = {
+function BaseDatePicker({ size = 'medium', className, bottomSheetView = {
     initial: true,
     xsl: false
-}, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, placement = 'bottom left', ...props }) {
+}, block, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, placement = 'bottom left', ...props }, forwardedRef) {
     const { locale } = useLocale();
     const enhancedIsDateUnavailable = useMemo(()=>{
         return disableDaysOfWeek || disableWeekends ? (date)=>{
@@ -86,7 +86,9 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
     const buttonRef = useRef(null);
     const { buttonProps: newButtonProps } = useButton(buttonProps, buttonRef);
     const brandContainer = useMemo(()=>{
-        return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || undefined;
+        if (typeof window !== 'undefined') {
+            return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || undefined;
+        }
     }, []);
     return React.createElement(React.Fragment, null, props.label && React.createElement("div", labelProps, props.label), React.createElement("div", {
         ...props,
@@ -106,7 +108,8 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
     }, React.createElement(DateField, {
         className: styles.dateField(),
         separator: separator,
-        ...fieldProps
+        ...fieldProps,
+        ref: forwardedRef
     }), React.createElement(Button, {
         look: "faint",
         className: styles.button(),
@@ -126,3 +129,5 @@ export function DatePicker({ size = 'medium', className, bottomSheetView = {
         firstDayOfWeek: props.firstDayOfWeek
     }))));
 }
+export const DatePicker = forwardRef(BaseDatePicker);
+DatePicker.displayName = 'DatePicker';

package/dist/components/date-picker/date-picker.styles.js

@@ -2,26 +2,26 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         input: 'form-control flex items-center border-0',
-        dateField: 'rounded rounded-r-none border border-r-0 border-border-muted-strong',
+        dateField: 'rounded rounded-r-none border border-r-0 border-border-muted-strong whitespace-nowrap',
         button: 'flex items-center justify-center rounded-l-none border-border-muted-strong bg-surface-muted-pale'
     },
     variants: {
         size: {
             small: {
                 input: 'max-h-5',
-                dateField: 'h-5 w-[120px] form-control-small'
+                dateField: 'h-5 min-w-[120px] form-control-small'
             },
             medium: {
                 input: 'max-h-6',
-                dateField: 'h-6 w-[140px] form-control-medium'
+                dateField: 'h-6 min-w-[140px] form-control-medium'
             },
             large: {
                 input: 'max-h-7',
-                dateField: 'h-7 w-[145px] form-control-large'
+                dateField: 'h-7 min-w-[145px] form-control-large'
             },
             xlarge: {
                 input: 'max-h-8',
-                dateField: 'h-8 w-[165px] form-control-xlarge'
+                dateField: 'h-8 min-w-[165px] form-control-xlarge'
             }
         },
         block: {

package/dist/components/link/link.component.d.ts

@@ -1,12 +1,4 @@
-import React, { ForwardedRef } from 'react';
-import { type LinkProps } from './link.types.js';
-export declare function BaseLink({ className, children, href, iconBefore: IconBefore, iconAfter: IconAfter, iconSize, target, type, underline, ...props }: LinkProps, ref: ForwardedRef<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
-export declare const Link: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-    className?: string;
-    iconAfter?: (props: import("../icon/icon.types.js").IconProps) => JSX.Element;
-    iconBefore?: (props: import("../icon/icon.types.js").IconProps) => JSX.Element;
-    iconSize?: "xsmall" | "small" | "medium" | "large" | "xlarge";
-    type?: "inline" | "standalone";
-    underline?: boolean;
-} & Omit<import("react-aria").AriaLinkOptions, "isDisabled" | "elementType"> & React.AnchorHTMLAttributes<Element> & React.RefAttributes<HTMLAnchorElement>>;
+import { ForwardedRef } from 'react';
+import { LinkComponent, LinkImplementationProps } from './link.types.js';
+export declare function BaseLink({ className, children, href, tag: Tag, iconBefore: IconBefore, iconAfter: IconAfter, iconSize, target, type, underline, autoFocus, elementType, onBlur, onClick, onFocus, onFocusChange, onKeyDown, onKeyUp, onPress, onPressChange, onPressEnd, onPressStart, onPressUp, download, ping, referrerPolicy, rel, routerOptions, ...componentProps }: LinkImplementationProps, ref: ForwardedRef<unknown>): import("react/jsx-runtime").JSX.Element;
+export declare const Link: LinkComponent;

package/dist/components/link/link.component.js

@@ -1,13 +1,35 @@
 'use client';
 import React, { forwardRef } from 'react';
-import { mergeProps, useFocusRing, useLink } from 'react-aria';
+import { mergeProps, useFocusRing, useLink, useObjectRef } from 'react-aria';
 import { ArrowRightIcon } from '../icon/index.js';
 import { styles as linkStyles } from './link.styles.js';
-export function BaseLink({ className, children, href, iconBefore: IconBefore, iconAfter: IconAfter, iconSize = 'small', target, type = 'standalone', underline = true, ...props }, ref) {
+export function BaseLink({ className, children, href, tag: Tag, iconBefore: IconBefore, iconAfter: IconAfter, iconSize = 'small', target, type = 'standalone', underline = true, autoFocus, elementType, onBlur, onClick, onFocus, onFocusChange, onKeyDown, onKeyUp, onPress, onPressChange, onPressEnd, onPressStart, onPressUp, download, ping, referrerPolicy, rel, routerOptions, ...componentProps }, ref) {
+    const Component = Tag !== null && Tag !== void 0 ? Tag : 'a';
+    const ariaElementType = typeof Component === 'string' ? Component : elementType !== null && elementType !== void 0 ? elementType : 'a';
+    const linkRef = useObjectRef(ref);
     const { linkProps } = useLink({
-        ...props,
-        elementType: 'a'
-    }, ref);
+        ...componentProps,
+        autoFocus,
+        download,
+        elementType: ariaElementType,
+        href: typeof href === 'string' ? href : undefined,
+        onBlur,
+        onClick,
+        onFocus,
+        onFocusChange,
+        onKeyDown,
+        onKeyUp,
+        onPress,
+        onPressChange,
+        onPressEnd,
+        onPressStart,
+        onPressUp,
+        ping,
+        referrerPolicy,
+        rel,
+        routerOptions,
+        target
+    }, linkRef);
     const { isFocusVisible, focusProps } = useFocusRing();
     const styles = linkStyles({
         type,
@@ -17,9 +39,10 @@ export function BaseLink({ className, children, href, iconBefore: IconBefore, ic
     if (type === 'standalone' && !IconBefore && !IconAfter) {
         IconBefore = ArrowRightIcon;
     }
-    return React.createElement("a", {
+    return React.createElement(Component, {
+        ...componentProps,
         ...mergeProps(linkProps, focusProps),
-        ref: ref,
+        ref: linkRef,
         href: href,
         target: target,
         className: styles.base({

package/dist/components/link/link.types.d.ts

@@ -1,7 +1,7 @@
-import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { AriaLinkOptions } from 'react-aria';
 import { IconProps } from '../icon/index.js';
-export type LinkProps = {
+export type BaseLinkProps = {
     /**
      * Link text or component
      */
@@ -33,4 +33,27 @@ export type LinkProps = {
      * @default true
      */
     underline?: boolean;
-} & Omit<AriaLinkOptions, 'isDisabled' | 'elementType'> & AnchorHTMLAttributes<Element>;
+    /**
+     * Specifies DOM element rendered by a custom component
+     * Required when the custom component does not render an '<a>' element
+     * @default 'a'
+     */
+    elementType?: AriaLinkOptions['elementType'];
+} & Omit<AriaLinkOptions, 'elementType' | 'href' | 'isDisabled'>;
+export type LinkRef<C extends React.ElementType = 'a'> = React.ComponentRef<C>;
+export type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+export type LinkProps<C extends React.ElementType = 'a'> = BaseLinkProps & {
+    /**
+     * Type to render
+     * @default a
+     */
+    tag?: C;
+} & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseLinkProps | 'tag'>;
+export type LinkImplementationProps = BaseLinkProps & {
+    className?: string;
+    href?: unknown;
+    tag?: React.ElementType;
+} & Record<string, unknown>;
+export type LinkComponent = <C extends React.ElementType = 'a'>(props: LinkProps<C> & {
+    ref?: PolymorphicRef<C>;
+}) => React.ReactElement | null;

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.d.ts

@@ -1,2 +1,2 @@
 import { type ModalDialogFooterProps } from './modal-dialog-footer.types.js';
-export declare function ModalDialogFooter({ className, primaryLabel, primaryOnClick, secondaryLabel, secondaryOnClick, ...props }: ModalDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModalDialogFooter({ className, primaryButtonProps, primaryLabel, primaryOnClick, secondaryButtonProps, secondaryLabel, secondaryOnClick, ...props }: ModalDialogFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.js

@@ -5,7 +5,8 @@ import { resolveResponsiveVariant } from '../../../../../../utils/breakpoint.uti
 import { Button } from '../../../../../button/index.js';
 import { useModalDialogContext } from '../../modal-dialog.component.js';
 import { styles as modalFooterStyles } from './modal-dialog-footer.styles.js';
-export function ModalDialogFooter({ className, primaryLabel, primaryOnClick, secondaryLabel, secondaryOnClick, ...props }) {
+export function ModalDialogFooter({ className, primaryButtonProps, primaryLabel, primaryOnClick, secondaryButtonProps, secondaryLabel, secondaryOnClick, ...props }) {
+    var _ref, _ref1, _ref2, _ref3;
     const { size, compact, setFooterPresent } = useModalDialogContext();
     const breakpoint = useBreakpoint();
     const styles = modalFooterStyles({
@@ -23,14 +24,20 @@ export function ModalDialogFooter({ className, primaryLabel, primaryOnClick, sec
         }),
         ...props
     }, React.createElement(Button, {
-        look: "primary",
-        size: "large",
-        className: styles.primaryBtn(),
+        ...primaryButtonProps,
+        look: (_ref = primaryButtonProps === null || primaryButtonProps === void 0 ? void 0 : primaryButtonProps.look) !== null && _ref !== void 0 ? _ref : 'primary',
+        size: (_ref1 = primaryButtonProps === null || primaryButtonProps === void 0 ? void 0 : primaryButtonProps.size) !== null && _ref1 !== void 0 ? _ref1 : 'large',
+        className: styles.primaryBtn({
+            className: primaryButtonProps === null || primaryButtonProps === void 0 ? void 0 : primaryButtonProps.className
+        }),
         onClick: primaryOnClick
     }, primaryLabel), secondaryLabel && React.createElement(Button, {
-        look: "link",
-        size: "large",
-        className: styles.secondaryBtn(),
+        ...secondaryButtonProps,
+        look: (_ref2 = secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.look) !== null && _ref2 !== void 0 ? _ref2 : 'link',
+        size: (_ref3 = secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.size) !== null && _ref3 !== void 0 ? _ref3 : 'large',
+        className: styles.secondaryBtn({
+            className: secondaryButtonProps === null || secondaryButtonProps === void 0 ? void 0 : secondaryButtonProps.className
+        }),
         onClick: secondaryOnClick
     }, secondaryLabel));
 }

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.types.d.ts

@@ -1,9 +1,15 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { type ButtonProps } from '../../../../../button/index.js';
+type ModalFooterButtonProps = Omit<ButtonProps, 'children' | 'onClick'>;
 export type ModalDialogFooterProps = {
     /**
      * Footer content
      */
     children?: ReactNode;
+    /**
+     * Props passed to the primary button
+     */
+    primaryButtonProps?: ModalFooterButtonProps;
     /**
      * Label for primary button
      */
@@ -12,6 +18,10 @@ export type ModalDialogFooterProps = {
      * onClick for primary button
      */
     primaryOnClick: () => void;
+    /**
+     * Props passed to the secondary button
+     */
+    secondaryButtonProps?: ModalFooterButtonProps;
     /**
      * Label for secondary button
      */
@@ -21,3 +31,4 @@ export type ModalDialogFooterProps = {
      */
     secondaryOnClick?: () => void;
 } & HTMLAttributes<HTMLElement>;
+export {};

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.component.js

@@ -1,4 +1,5 @@
 'use client';
+import { focusWithoutScrolling } from '@react-aria/utils';
 import React, { useCallback, useContext, useRef } from 'react';
 import { mergeProps, useFocusRing, useOption } from 'react-aria';
 import { TickIcon } from '../../../../../icon/index.js';
@@ -21,13 +22,8 @@ export function MultiSelectOption({ item }) {
     const handleButtonKeyDown = useCallback((e)=>{
         if (e.key === 'ArrowUp' && item.index === 0) {
             e.preventDefault();
-            if (selectAllRef.current) {
-                var _selectAllRef_current;
-                (_selectAllRef_current = selectAllRef.current) === null || _selectAllRef_current === void 0 ? void 0 : _selectAllRef_current.focus();
-            } else {
-                var _inputRef_current;
-                (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
-            }
+            const target = selectAllRef.current || inputRef.current;
+            if (target) focusWithoutScrolling(target);
         }
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();