@westpac/ui 0.50.3 → 0.53.1

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

@@ -1,4 +1,8 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
     firstItem: {
         true: string;
         false: string;
@@ -18,6 +22,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
 }, undefined, "typography-body-10 relative block min-w-7 border border-border px-2 py-1.5 text-center text-text", {
     responsiveVariants: string[];
 }, {
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
     firstItem: {
         true: string;
         false: string;
@@ -35,6 +43,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
     firstItem: {
         true: string;
         false: string;

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

@@ -2,6 +2,10 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     base: 'typography-body-10 relative block min-w-7 border border-border px-2 py-1.5 text-center text-text',
     variants: {
+        isFocusVisible: {
+            true: 'z-10 focus-outline',
+            false: ''
+        },
         firstItem: {
             true: 'rounded-l',
             false: 'ml-[-1px]'
@@ -11,7 +15,7 @@ export const styles = tv({
             false: ''
         },
         active: {
-            true: 'z-10 border-hero bg-hero text-white',
+            true: 'border-hero bg-hero text-white',
             false: 'hover:bg-light'
         },
         disabled: {

package/dist/components/pagination/components/pagination-presentational/pagination-presentational.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: 'flex flex-col items-center',
-        ul: 'flex overflow-hidden',
+        ul: 'flex',
         emptyItem: 'typography-body-10 relative block min-w-7 cursor-default border-y border-border px-2 py-1.5 text-center text-text'
     },
     variants: {}

package/dist/components/panel/components/panel-footer/panel-footer.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'border-0 border-t border-border bg-light px-2 py-[0.625rem] sm:px-4'
+        base: 'border-0 border-t border-border bg-light px-2 py-[0.625rem] sm:px-4 [&_:focus-visible]:focus-outline'
     },
     variants: {}
 }, {

package/dist/components/panel/panel.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'group/panel overflow-hidden rounded border border-hero',
+        base: 'group/panel overflow-hidden rounded border border-hero [&_:focus-visible]:focus-outline',
         header: 'px-2 py-[0.625rem] sm:px-4'
     },
     variants: {

package/dist/components/popover/components/panel/panel.component.js

@@ -28,11 +28,12 @@ export function BasePanel({ state, heading, headingTag: Tag = 'h1', content, pla
         ref: popoverRef
     }, React.createElement("div", {
         className: styles.content()
-    }, React.createElement(Tag, {
-        tabIndex: 0,
-        className: styles.heading()
+    }, heading && React.createElement(Tag, {
+        className: styles.heading(),
+        tabIndex: 0
     }, heading), React.createElement("div", {
-        className: styles.body()
+        className: styles.body(),
+        tabIndex: 0
     }, content), React.createElement(Button, {
         look: "link",
         size: "small",

package/dist/components/popover/components/panel/panel.styles.js

@@ -9,8 +9,8 @@ export const styles = tv({
       `,
         closeBtn: 'absolute right-1 top-1 h-3 p-0 hover:opacity-80',
         content: 'w-[17.625rem] rounded-[3px] bg-white py-4 pl-3 pr-5',
-        heading: 'typography-body-9 mb-2 font-medium text-text',
-        body: 'typography-body-10 text-text'
+        heading: 'typography-body-9 mb-2 font-medium text-text focus-visible:focus-outline',
+        body: 'typography-body-10 text-text focus-visible:focus-outline'
     },
     variants: {
         placement: {

package/dist/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.js

@@ -1,11 +1,12 @@
-import { AnimatePresence, LazyMotion, m } from 'motion/react';
-import React, { useId, useMemo } from 'react';
+import { LazyMotion, m, useAnimate } from 'motion/react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { useFocusRing } from 'react-aria';
 import { Circle, VisuallyHidden } from '../../../index.js';
 import { ProgressRopeStep } from '../index.js';
 import { styles as progressRopeGroupStyles } from './progress-rope-group-step.styles.js';
 const loadAnimations = ()=>import('./progress-rope-group-step.utils.js').then((res)=>res.default);
 export function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep, children, firstItem, opened, onToggle, tag: Tag }) {
+    const [scope, animate] = useAnimate();
     const id = useId();
     const stepsContainerID = `progress-rope-group-steps-container-${id}`;
     const current = useMemo(()=>{
@@ -55,6 +56,32 @@ export function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep,
         state,
         isFocusVisible
     });
+    const [overflowVisible, setOverflowVisible] = useState(false);
+    useEffect(()=>{
+        if (opened) {
+            animate(scope.current, {
+                height: 'auto'
+            }, {
+                duration: 0.2,
+                ease: 'easeInOut',
+                onComplete: ()=>{
+                    setOverflowVisible(true);
+                }
+            });
+        } else {
+            animate(scope.current, {
+                height: 0
+            }, {
+                duration: 0.2,
+                ease: 'easeInOut',
+                onPlay: ()=>{
+                    setOverflowVisible(false);
+                }
+            });
+        }
+    }, [
+        opened
+    ]);
     return React.createElement(Tag, null, React.createElement("button", {
         "aria-expanded": opened,
         className: styles.circleWrapper({}),
@@ -66,23 +93,13 @@ export function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep,
         "aria-hidden": "true"
     }), children, React.createElement(VisuallyHidden, null, visuallyHiddenMessage)), React.createElement(LazyMotion, {
         features: loadAnimations
-    }, React.createElement(AnimatePresence, {
-        initial: false
-    }, opened && React.createElement(m.div, {
+    }, React.createElement(m.div, {
+        ref: scope,
         initial: {
-            height: 0,
-            overflow: 'hidden'
-        },
-        animate: {
-            height: 'auto'
-        },
-        exit: {
-            height: 0,
-            overflow: 'hidden'
+            height: opened ? 'auto' : 0
         },
-        transition: {
-            duration: 0.2,
-            ease: 'easeInOut'
+        style: {
+            overflow: overflowVisible ? 'visible' : 'hidden'
         }
     }, React.createElement("ol", {
         className: styles.stepsWrapper({}),
@@ -97,6 +114,7 @@ export function ProgressRopeGroupStep({ steps, currentKey, furthestVisitedStep,
             onClick: (furthestVisitedStep || 0) >= step.index ? step.onClick : undefined,
             current: step.index === currentKey,
             visited: (furthestVisitedStep || 0) > step.index,
-            furthest: furthestVisitedStep === step.index
-        }, step.text))))))));
+            furthest: furthestVisitedStep === step.index,
+            tabIndex: opened ? 0 : -1
+        }, step.text)))))));
 }

package/dist/components/repeater/repeater.styles.js

@@ -5,7 +5,7 @@ export const styles = tv({
         list: 'm-0 flex list-none flex-col pl-0',
         item: 'relative',
         itemIndex: 'mb-3 font-bold',
-        content: '',
+        content: '[&_:focus-visible]:focus-outline',
         removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
         footer: 'flex justify-between pt-[0.875rem]',
         addBtn: 'h-auto p-0 no-underline hover:underline'

package/dist/components/select/components/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectWithTooltip } from './select-with-tooltip/select-with-tooltip.component.js';
+export { StyledSelect } from './styled-select/styled-select.component.js';

package/dist/components/select/components/index.js

@@ -0,0 +1,2 @@
+export { SelectWithTooltip } from './select-with-tooltip/select-with-tooltip.component.js';
+export { StyledSelect } from './styled-select/styled-select.component.js';

package/dist/components/select/components/select-with-tooltip/select-with-tooltip.component.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const SelectWithTooltip: React.ForwardRefExoticComponent<{
+    enableTooltip?: boolean;
+    invalid?: boolean | {
+        [x: string]: boolean | undefined;
+    } | undefined;
+    size?: "small" | "xlarge" | "medium" | "large" | {
+        [x: string]: "small" | "xlarge" | "medium" | "large" | undefined;
+    } | undefined;
+    width?: "auto" | 1 | 2 | "full" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | {
+        [x: string]: "auto" | 1 | 2 | "full" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | undefined;
+    } | undefined;
+} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/select/components/select-with-tooltip/select-with-tooltip.component.js

@@ -0,0 +1,22 @@
+import React, { forwardRef, useState } from 'react';
+import { Tooltip } from '../../../tooltip/index.js';
+import { StyledSelect } from '../styled-select/styled-select.component.js';
+import { styles } from './select-with-tooltip.styles.js';
+function BaseSelectWithTooltip({ width = 'auto', children, onChange, ...props }, ref) {
+    const [selectedOption, setSelectedOption] = useState('');
+    return React.createElement(Tooltip, {
+        tooltip: selectedOption,
+        className: styles({
+            width
+        })
+    }, React.createElement(StyledSelect, {
+        ref: ref,
+        onChange: (e)=>{
+            setSelectedOption(e.target.options[e.target.selectedIndex].text);
+            onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        },
+        width: width,
+        ...props
+    }, children));
+}
+export const SelectWithTooltip = forwardRef(BaseSelectWithTooltip);

package/dist/components/select/components/select-with-tooltip/select-with-tooltip.styles.d.ts

@@ -0,0 +1,56 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    width: {
+        auto: string;
+        full: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        20: string;
+        30: string;
+    };
+}, undefined, "", {
+    responsiveVariants: string[];
+}, {
+    width: {
+        auto: string;
+        full: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        20: string;
+        30: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    width: {
+        auto: string;
+        full: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        20: string;
+        30: string;
+    };
+}, undefined, "", {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/select/components/select-with-tooltip/select-with-tooltip.styles.js

@@ -0,0 +1,30 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: '',
+    variants: {
+        width: {
+            auto: 'flex-1',
+            full: 'w-full flex-1',
+            1: 'w-[1.81ex]',
+            2: 'w-[3.62ex]',
+            3: 'w-[5.43ex]',
+            4: 'w-[7.24ex]',
+            5: 'w-[9.05ex]',
+            6: 'w-[10.86ex]',
+            7: 'w-[12.67ex]',
+            8: 'w-[14.48ex]',
+            9: 'w-[16.29ex]',
+            10: 'w-[18.1ex]',
+            20: 'w-[36.2ex]',
+            30: 'w-[54.3ex]'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

package/dist/components/select/components/styled-select/styled-select.component.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const StyledSelect: React.ForwardRefExoticComponent<{
+    enableTooltip?: boolean;
+    invalid?: boolean | {
+        [x: string]: boolean | undefined;
+    } | undefined;
+    size?: "small" | "xlarge" | "medium" | "large" | {
+        [x: string]: "small" | "xlarge" | "medium" | "large" | undefined;
+    } | undefined;
+    width?: "auto" | 1 | 2 | "full" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | {
+        [x: string]: "auto" | 1 | 2 | "full" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | 30 | undefined;
+    } | undefined;
+} & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/select/components/styled-select/styled-select.component.js

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
+import { styles } from './styled-select.styles.js';
+function BaseSelect({ className, size = 'medium', invalid = false, width = 'auto', children, ...props }, ref) {
+    const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+    return React.createElement("select", {
+        ref: ref,
+        className: styles({
+            className,
+            size,
+            invalid,
+            isFocused,
+            isFocusVisible,
+            width
+        }),
+        ...mergeProps(props, focusProps)
+    }, children);
+}
+export const StyledSelect = forwardRef(BaseSelect);

package/dist/components/select/components/styled-select/styled-select.styles.d.ts

@@ -0,0 +1,104 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+    isFocusVisible: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    width: {
+        auto: string;
+        full: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        20: string;
+        30: string;
+    };
+}, undefined, "form-control overflow-hidden overflow-ellipsis whitespace-nowrap bg-no-repeat select-caret disabled:form-control-disabled group-first/add-on-before:!rounded-l group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:!rounded-r group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0", {
+    responsiveVariants: string[];
+}, {
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+    isFocusVisible: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    width: {
+        auto: string;
+        full: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        20: string;
+        30: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    invalid: {
+        true: string;
+        false: string;
+    };
+    isFocusVisible: {
+        true: string;
+    };
+    isFocused: {
+        true: string;
+    };
+    width: {
+        auto: string;
+        full: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        20: string;
+        30: string;
+    };
+}, undefined, "form-control overflow-hidden overflow-ellipsis whitespace-nowrap bg-no-repeat select-caret disabled:form-control-disabled group-first/add-on-before:!rounded-l group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:!rounded-r group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0", {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/select/components/styled-select/styled-select.styles.js

@@ -0,0 +1,46 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'form-control overflow-hidden overflow-ellipsis whitespace-nowrap bg-no-repeat select-caret disabled:form-control-disabled group-first/add-on-before:!rounded-l group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:!rounded-r group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+    variants: {
+        size: {
+            small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
+            medium: 'form-control-medium bg-[right_0.75rem_center] pr-[calc(0.5rem+14px+0.75rem)]',
+            large: 'form-control-large bg-[right_0.9375rem_center] pr-[calc(0.5rem+14px+0.9375rem)]',
+            xlarge: 'form-control-xlarge bg-[right_1.125rem_center] pr-[calc(0.5rem+14px+1.125rem)]'
+        },
+        invalid: {
+            true: 'border-danger',
+            false: 'border-borderDark'
+        },
+        isFocusVisible: {
+            true: 'focus-outline'
+        },
+        isFocused: {
+            true: 'outline-none'
+        },
+        width: {
+            auto: 'flex-1',
+            full: 'w-full flex-1',
+            1: 'box-content w-[1.81ex]',
+            2: 'box-content w-[3.62ex]',
+            3: 'box-content w-[5.43ex]',
+            4: 'box-content w-[7.24ex]',
+            5: 'box-content w-[9.05ex]',
+            6: 'box-content w-[10.86ex]',
+            7: 'box-content w-[12.67ex]',
+            8: 'box-content w-[14.48ex]',
+            9: 'box-content w-[16.29ex]',
+            10: 'box-content w-[18.1ex]',
+            20: 'box-content w-[36.2ex]',
+            30: 'box-content w-[54.3ex]'
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const Select: React.ForwardRefExoticComponent<{
+    enableTooltip?: boolean;
     invalid?: boolean | {
         [x: string]: boolean | undefined;
     } | undefined;

package/dist/components/select/select.component.js

@@ -1,20 +1,13 @@
 'use client';
 import React, { forwardRef } from 'react';
-import { mergeProps, useFocusRing } from 'react-aria';
-import { styles } from './select.styles.js';
-function BaseSelect({ className, size = 'medium', invalid = false, width = 'auto', children, ...props }, ref) {
-    const { isFocused, isFocusVisible, focusProps } = useFocusRing();
-    return React.createElement("select", {
+import { SelectWithTooltip, StyledSelect } from './components/index.js';
+function BaseSelect({ children, enableTooltip, ...props }, ref) {
+    return enableTooltip ? React.createElement(SelectWithTooltip, {
         ref: ref,
-        className: styles({
-            className,
-            size,
-            invalid,
-            isFocused,
-            isFocusVisible,
-            width
-        }),
-        ...mergeProps(props, focusProps)
+        ...props
+    }, children) : React.createElement(StyledSelect, {
+        ref: ref,
+        ...props
     }, children);
 }
 export const Select = forwardRef(BaseSelect);