@westpac/ui 0.47.1 → 0.49.0

package/dist/components/accordion/accordion.component.js

@@ -32,15 +32,15 @@ function Accordion({ className, rounded = true, look = 'soft', ...props }, ref)
         ref: domRef,
         className: styles({
             className,
-            rounded
+            rounded,
+            lego: look === 'lego'
         })
-    }, React.createElement("div", {
-        className: "-ml-px -mt-px"
-    }, [
+    }, React.createElement("div", null, [
         ...state.collection
     ].map((item)=>React.createElement(AccordionItemContent, {
             key: item.key,
             item: item,
+            rounded: rounded,
             state: state,
             look: look
         }))));

package/dist/components/accordion/accordion.styles.d.ts

@@ -2,16 +2,25 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     rounded: {
         true: string;
     };
+    lego: {
+        true: string;
+    };
 }, undefined, "flex flex-col border border-border text-text", {
     responsiveVariants: string[];
 }, {
     rounded: {
         true: string;
     };
+    lego: {
+        true: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     rounded: {
         true: string;
     };
+    lego: {
+        true: string;
+    };
 }, undefined, "flex flex-col border border-border text-text", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/accordion/accordion.styles.js

@@ -3,7 +3,10 @@ export const styles = tv({
     base: 'flex flex-col border border-border text-text',
     variants: {
         rounded: {
-            true: 'overflow-hidden rounded'
+            true: 'rounded'
+        },
+        lego: {
+            true: 'border-0 border-b'
         }
     }
 }, {

package/dist/components/accordion/components/accordion-item/accordion-item.component.d.ts

@@ -1,2 +1,2 @@
 import { type AccordionItemProps } from './accordion-item.types.js';
-export declare function AccordionItem<T = HTMLElement>({ className, tag: Tag, look, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem<T = HTMLElement>({ className, tag: Tag, look, rounded, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/components/accordion-item/accordion-item.component.js

@@ -5,7 +5,7 @@ import { mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 import { styles as accordionItemStyles } from './accordion-item.styles.js';
 const loadAnimations = ()=>import('./accordion-item.utils.js').then((res)=>res.default);
-export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', ...props }) {
+export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', rounded = true, ...props }) {
     const ref = useRef(null);
     const { state, item } = props;
     const { buttonProps, regionProps } = useAccordionItem(props, state, ref);
@@ -20,7 +20,8 @@ export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', ...p
         isOpen,
         isDisabled,
         look,
-        isFocusVisible
+        isFocusVisible,
+        rounded
     });
     return React.createElement(Tag, {
         className: styles.base({
@@ -63,6 +64,9 @@ export function AccordionItem({ className, tag: Tag = 'div', look = 'soft', ...p
             ]
         }
     }, React.createElement("div", {
-        className: styles.content()
+        className: styles.content(),
+        onBlur: (e)=>{
+            e.stopPropagation();
+        }
     }, item.props.children))))));
 }

package/dist/components/accordion/components/accordion-item/accordion-item.styles.d.ts

@@ -28,6 +28,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             itemHeader: string;
         };
     };
+    rounded: {
+        true: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;
@@ -66,6 +71,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             itemHeader: string;
         };
     };
+    rounded: {
+        true: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;
@@ -102,6 +112,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             itemHeader: string;
         };
     };
+    rounded: {
+        true: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;

package/dist/components/accordion/components/accordion-item/accordion-item.styles.js

@@ -1,8 +1,8 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative',
-        itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2',
+        base: 'group',
+        itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2 group-first:border-t-0',
         headerTitleWrapper: 'flex-1 pr-2 text-left',
         indicator: 'size-3 rotate-90',
         content: 'hidden'
@@ -13,12 +13,12 @@ export const styles = tv({
                 itemHeader: 'border-t border-border bg-light'
             },
             lego: {
-                itemHeader: 'border-l-[0.375rem] border-border bg-light shadow-[inset_0_1px_0_var(--tw-shadow-color)] !shadow-border transition-colors'
+                itemHeader: 'mb-[-1px] border-l-[0.375rem] border-r border-border bg-light shadow-[inset_0px_1px_0_0_var(--tw-shadow-color),inset_0_-1px_0_0_var(--tw-shadow-color)] !shadow-border transition-colors'
             }
         },
         isOpen: {
             true: {
-                content: 'block border-t border-border p-3'
+                content: 'block border-border p-3'
             },
             false: {
                 base: '',
@@ -36,6 +36,11 @@ export const styles = tv({
             false: {
                 itemHeader: 'outline-none'
             }
+        },
+        rounded: {
+            true: {
+                itemHeader: 'group-first:rounded-t-sm group-last:rounded-b-sm'
+            }
         }
     },
     compoundSlots: [
@@ -58,8 +63,25 @@ export const styles = tv({
             slots: [
                 'content'
             ],
+            look: 'soft',
+            isOpen: true,
+            className: 'border-t'
+        },
+        {
+            slots: [
+                'itemHeader'
+            ],
+            isOpen: true,
+            rounded: true,
+            className: 'group-last:rounded-none'
+        },
+        {
+            slots: [
+                'content'
+            ],
+            isOpen: true,
             look: 'lego',
-            className: 'border-l-[0.375rem] border-l-border'
+            className: 'mt-[1px] border-l-[0.375rem] border-r'
         }
     ]
 }, {

package/dist/components/accordion/components/accordion-item/accordion-item.types.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { Node, TreeState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
+import { AccordionProps } from '../../accordion.types.js';
 import { styles } from './accordion-item.styles.js';
 type Variants = VariantProps<typeof styles>;
 export type AccordionItemProps<T = HTMLElement> = {
@@ -16,6 +17,10 @@ export type AccordionItemProps<T = HTMLElement> = {
      * Look of the item
      */
     look?: Variants['look'];
+    /**
+     * Whether accordion is rounded
+     */
+    rounded?: AccordionProps['rounded'];
     /**
      * Tree state
      */

package/dist/components/alert/alert.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'typography-body-10 relative mb-4 xsl:flex',
+        base: 'typography-body-10 relative mb-5 xsl:flex',
         icon: 'float-left flex-none',
         body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
         heading: 'typography-body-9 mb-1 font-bold',

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

@@ -1,2 +1,2 @@
 import { type ButtonDropdownProps } from './button-dropdown.types.js';
-export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, look, soft, block, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, look, soft, block, shouldFlip, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,7 @@ import { Button } from '../button/index.js';
 import { DropDownIcon } from '../icon/index.js';
 import { styles as buttonDropdownStyles } from './button-dropdown.styles.js';
 import { ButtonDropdownPanel } from './components/button-dropdown-panel/button-dropdown-panel.component.js';
-export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore: IconBefore, open = false, text, children, size, look = 'hero', soft = false, block = false }) {
+export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore: IconBefore, open = false, text, children, size, look = 'hero', soft = false, block = false, shouldFlip }) {
     const ref = useRef(null);
     const panelId = useId();
     const styles = buttonDropdownStyles({
@@ -56,6 +56,7 @@ export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore:
         triggerRef: ref,
         state: state,
         block: block,
-        id: panelId
+        id: panelId,
+        shouldFlip: shouldFlip
     }, children));
 }

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

@@ -2,6 +2,7 @@ import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 import { ButtonProps } from '../button/index.js';
 import { styles } from './button-dropdown.styles.js';
+import { ButtonDropdownPanelProps } from './components/button-dropdown-panel/button-dropdown-panel.types.js';
 type Variants = VariantProps<typeof styles>;
 export type ButtonDropdownProps = {
     /**
@@ -28,5 +29,5 @@ export type ButtonDropdownProps = {
      * Button text
      */
     text: string;
-} & ButtonHTMLAttributes<Element> & Pick<ButtonProps, 'size' | 'iconBefore' | 'block'>;
+} & ButtonHTMLAttributes<Element> & Pick<ButtonProps, 'size' | 'iconBefore' | 'block'> & Pick<ButtonDropdownPanelProps, 'shouldFlip'>;
 export {};

package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.component.js

@@ -6,7 +6,6 @@ export function ButtonDropdownPanel({ className, children, state, block, id, ...
     const popoverRef = useRef(null);
     const { popoverProps } = usePopover({
         popoverRef,
-        shouldFlip: false,
         isNonModal: true,
         ...props
     }, state);

package/dist/components/button-dropdown/components/button-dropdown-panel/button-dropdown-panel.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'mt-0.5 rounded border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
+        base: 'my-0.5 rounded border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
         dialog: ''
     },
     variants: {

package/dist/components/field/field.component.js

@@ -26,7 +26,7 @@ export function Field({ className, label, tag: Tag = 'div', children, hintMessag
             className
         }),
         ...props
-    }, React.createElement(Label, {
+    }, label && React.createElement(Label, {
         size: labelSize,
         ...labelProps
     }, label), hintMessage && React.createElement(Hint, descriptionProps, hintMessage), errorMessage && React.createElement(ErrorMessage, {

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

@@ -1,2 +1,2 @@
 import { type HeaderProps } from './header.types.js';
-export declare function Header({ brand, className, children, fixed, isScrolled, leftIcon, leftOnClick, leftAssistiveText, logoAssistiveText, logoLink, logoCenter, logoOnClick, skipLinkContent, skipToContentId, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ anchorTarget, brand, className, children, fixed, fixedMaxWidth, isScrolled, leftIcon, leftOnClick, leftAssistiveText, logoAssistiveText, logoLink, logoCenter, logoOnClick, skipLinkContent, skipToContentId, ...props }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/header/header.component.js

@@ -31,7 +31,7 @@ const logoMap = {
         largeLogo: (props)=>React.createElement(RAMSMultibrandLargeLogo, props)
     }
 };
-export function Header({ brand, className, children, fixed = false, isScrolled, leftIcon, leftOnClick, leftAssistiveText, logoAssistiveText, logoLink = '#', logoCenter = false, logoOnClick, skipLinkContent = 'Skip to main content', skipToContentId, ...props }) {
+export function Header({ anchorTarget, brand, className, children, fixed = false, fixedMaxWidth, isScrolled, leftIcon, leftOnClick, leftAssistiveText, logoAssistiveText, logoLink = '#', logoCenter = false, logoOnClick, skipLinkContent = 'Skip to main content', skipToContentId, ...props }) {
     const [scrolled, setScrolled] = useState(false);
     const handleScroll = throttle(()=>{
         let hasScrolled = false;
@@ -65,7 +65,10 @@ export function Header({ brand, className, children, fixed = false, isScrolled,
         }),
         ...props
     }, React.createElement("div", {
-        className: styles.inner()
+        className: styles.inner(),
+        style: {
+            maxWidth: fixed ? fixedMaxWidth : undefined
+        }
     }, skipToContentId && React.createElement(SkipLink, {
         href: skipToContentId
     }, skipLinkContent), leftIcon && React.createElement("div", {
@@ -80,6 +83,7 @@ export function Header({ brand, className, children, fixed = false, isScrolled,
         iconColor: "text"
     })), React.createElement("a", {
         href: logoLink,
+        target: anchorTarget,
         className: styles.logoLink(),
         onClick: logoOnClick
     }, React.createElement(SmallLogo, {

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

@@ -1,6 +1,11 @@
-import { HTMLAttributes } from 'react';
+import { Property } from 'csstype';
+import { HTMLAttributeAnchorTarget, HTMLAttributes } from 'react';
 import { BrandKey } from '../../tailwind/index.js';
 export type HeaderProps = {
+    /**
+     * Target for the logo link
+     */
+    anchorTarget?: HTMLAttributeAnchorTarget;
     /**
      * Icon for brand
      */
@@ -9,6 +14,11 @@ export type HeaderProps = {
      * Enable fixed header
      */
     fixed?: boolean;
+    /**
+     * Set max width for fixed header for certain layouts
+     * NOTE: Using max-w in classname will work for non-fixed headers
+     */
+    fixedMaxWidth?: Property.MaxWidth;
     /**
      * Used with fixed to show drop shadow when something on screen is scrolled that should trigger drop shadow but doesn't
      */

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

@@ -1,2 +1,2 @@
 import { type InputGroupProps } from './input-group.types.js';
-export declare function InputGroup({ label, hideLabel, size, hint, errorMessage, supportingText, instanceId, after, before, children, tag: Tag, className, width, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputGroup({ label, hideLabel, size, hint, errorMessage, supportingText, instanceId, after, before, children, tag: Tag, className, width, id: propID, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ import { ErrorMessage, Hint, Label } from '../index.js';
 import { InputGroupSupportingText } from './components/index.js';
 import { InputGroupAddOn } from './components/input-group-add-ons/input-group-add-ons.component.js';
 import { styles as inputGroupStyles } from './input-group.styles.js';
-export function InputGroup({ label, hideLabel, size = 'medium', hint, errorMessage, supportingText, instanceId, after, before, children, tag: Tag = 'div', className, width = 'full', ...props }) {
+export function InputGroup({ label, hideLabel, size = 'medium', hint, errorMessage, supportingText, instanceId, after, before, children, tag: Tag = 'div', className, width = 'full', id: propID, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-label': ariaLabel, ...props }) {
     const _id = useId();
     const id = useMemo(()=>instanceId || `gel-field-${_id}`, [
         _id,
@@ -72,8 +72,10 @@ export function InputGroup({ label, hideLabel, size = 'medium', hint, errorMessa
             if (isValidElement(child)) {
                 return cloneElement(child, {
                     size,
-                    id,
-                    'aria-describedby': ariaDescribedByValue,
+                    id: propID || id,
+                    'aria-labelledby': ariaLabelledBy,
+                    'aria-describedby': ariaDescribedBy || ariaDescribedByValue,
+                    'aria-label': ariaLabel,
                     ...width !== 'full' ? {
                         width: width
                     } : {}
@@ -83,8 +85,12 @@ export function InputGroup({ label, hideLabel, size = 'medium', hint, errorMessa
     }, [
         children,
         size,
+        propID,
         id,
+        ariaLabelledBy,
+        ariaDescribedBy,
         ariaDescribedByValue,
+        ariaLabel,
         width
     ]);
     const isFieldset = useMemo(()=>Tag === 'fieldset', [

package/dist/components/input-group/input-group.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'group m-0 mb-5 border-none p-0',
+        base: 'group m-0 border-none p-0',
         input: 'relative flex'
     },
     variants: {

package/dist/components/input-group/input-group.types.d.ts

@@ -70,4 +70,20 @@ export type InputGroupProps = {
      * width of input
      */
     width?: InputProps['width'];
+    /**
+     * id
+     */
+    id?: string;
+    /**
+     * aria-labelledby
+     */
+    'aria-labelledby'?: string;
+    /**
+     * aria-describedby
+     */
+    'aria-describedby'?: string;
+    /**
+     * aria-label
+     */
+    'aria-label'?: string;
 };

package/dist/components/modal/components/modal-backdrop/modal-backdrop.component.js

@@ -6,7 +6,6 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props })
     const { children, state, className } = props;
     const ref = useRef(null);
     const styles = backdropStyles({
-        className,
         fullscreen: size === 'full',
         fluid: size === 'fluid'
     });
@@ -22,10 +21,12 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props })
     return React.createElement(Overlay, {
         portalContainer: portalContainer || brandContainer
     }, React.createElement("div", {
+        className: styles.base({
+            className
+        }),
         style: {
             zIndex
         },
-        className: styles.base(),
         ...underlayProps
     }, React.createElement("div", {
         ...modalProps,

package/dist/components/modal/components/modal-backdrop/modal-backdrop.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'fixed inset-0 z-50 flex animate-fadeIn items-center justify-center overflow-y-auto bg-black/50 p-2',
+        base: 'fixed inset-0 flex animate-fadeIn items-center justify-center overflow-y-auto bg-black/50 p-2',
         modal: 'relative top-3 z-10 h-fit w-full animate-fadeInDown'
     },
     variants: {

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

@@ -1,2 +1,2 @@
 import { type ModalProps } from './modal.types.js';
-export declare function Modal({ children, title, role, body, size, className, fullscreen, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, backdropStyle, title, role, body, size, className, fullscreen, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/modal.component.js

@@ -1,9 +1,10 @@
 'use client';
 import React from 'react';
 import { ModalBackdrop, ModalDialog } from './components/index.js';
-export function Modal({ children, title, role, body, size, className, fullscreen, ...props }) {
+export function Modal({ children, backdropStyle, title, role, body, size, className, fullscreen, ...props }) {
     return React.createElement(ModalBackdrop, {
         size: size,
+        className: backdropStyle,
         ...props
     }, React.createElement(ModalDialog, {
         fullscreen: fullscreen,

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

@@ -1,5 +1,9 @@
 import { type ModalBackdropProps, ModalDialogProps } from './components/index.js';
 export type ModalProps = {
+    /**
+     * Provide inset styles for the backdrop for centering in certain containers
+     */
+    backdropStyle?: string;
     /**
      * Whether the modal is fullscreen
      */