@westpac/ui 0.50.3 → 0.53.1

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

@@ -16,22 +16,67 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         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;
+        auto: {
+            base: string;
+            tooltip: string;
+        };
+        full: {
+            base: string;
+            tooltip: string;
+        };
+        1: {
+            base: string;
+            tooltip: string;
+        };
+        2: {
+            base: string;
+            tooltip: string;
+        };
+        3: {
+            base: string;
+            tooltip: string;
+        };
+        4: {
+            base: string;
+            tooltip: string;
+        };
+        5: {
+            base: string;
+            tooltip: string;
+        };
+        6: {
+            base: string;
+            tooltip: string;
+        };
+        7: {
+            base: string;
+            tooltip: string;
+        };
+        8: {
+            base: string;
+            tooltip: string;
+        };
+        9: {
+            base: string;
+            tooltip: string;
+        };
+        10: {
+            base: string;
+            tooltip: string;
+        };
+        20: {
+            base: string;
+            tooltip: string;
+        };
+        30: {
+            base: string;
+            tooltip: string;
+        };
     };
-}, undefined, "form-control 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", {
+}, {
+    base: string;
+    tooltip: string;
+}, undefined, {
     responsiveVariants: string[];
 }, {
     size: {
@@ -51,22 +96,67 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         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;
+        auto: {
+            base: string;
+            tooltip: string;
+        };
+        full: {
+            base: string;
+            tooltip: string;
+        };
+        1: {
+            base: string;
+            tooltip: string;
+        };
+        2: {
+            base: string;
+            tooltip: string;
+        };
+        3: {
+            base: string;
+            tooltip: string;
+        };
+        4: {
+            base: string;
+            tooltip: string;
+        };
+        5: {
+            base: string;
+            tooltip: string;
+        };
+        6: {
+            base: string;
+            tooltip: string;
+        };
+        7: {
+            base: string;
+            tooltip: string;
+        };
+        8: {
+            base: string;
+            tooltip: string;
+        };
+        9: {
+            base: string;
+            tooltip: string;
+        };
+        10: {
+            base: string;
+            tooltip: string;
+        };
+        20: {
+            base: string;
+            tooltip: string;
+        };
+        30: {
+            base: string;
+            tooltip: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, {
+    base: string;
+    tooltip: string;
+}, import("tailwind-variants").TVReturnType<{
     size: {
         small: string;
         medium: string;
@@ -84,21 +174,66 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         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;
+        auto: {
+            base: string;
+            tooltip: string;
+        };
+        full: {
+            base: string;
+            tooltip: string;
+        };
+        1: {
+            base: string;
+            tooltip: string;
+        };
+        2: {
+            base: string;
+            tooltip: string;
+        };
+        3: {
+            base: string;
+            tooltip: string;
+        };
+        4: {
+            base: string;
+            tooltip: string;
+        };
+        5: {
+            base: string;
+            tooltip: string;
+        };
+        6: {
+            base: string;
+            tooltip: string;
+        };
+        7: {
+            base: string;
+            tooltip: string;
+        };
+        8: {
+            base: string;
+            tooltip: string;
+        };
+        9: {
+            base: string;
+            tooltip: string;
+        };
+        10: {
+            base: string;
+            tooltip: string;
+        };
+        20: {
+            base: string;
+            tooltip: string;
+        };
+        30: {
+            base: string;
+            tooltip: string;
+        };
     };
-}, undefined, "form-control 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", {
+}, {
+    base: string;
+    tooltip: string;
+}, undefined, {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

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

@@ -1,6 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'form-control 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',
+    slots: {
+        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',
+        tooltip: ''
+    },
     variants: {
         size: {
             small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
@@ -19,20 +22,62 @@ export const styles = tv({
             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]'
+            auto: {
+                base: 'flex-1',
+                tooltip: 'flex-1'
+            },
+            full: {
+                base: 'w-full flex-1',
+                tooltip: 'w-full flex-1'
+            },
+            1: {
+                base: 'box-content w-[1.81ex]',
+                tooltip: 'w-[1.81ex]'
+            },
+            2: {
+                base: 'box-content w-[3.62ex]',
+                tooltip: 'w-[3.62ex]'
+            },
+            3: {
+                base: 'box-content w-[5.43ex]',
+                tooltip: 'w-[5.43ex]'
+            },
+            4: {
+                base: 'box-content w-[7.24ex]',
+                tooltip: 'w-[7.24ex]'
+            },
+            5: {
+                base: 'box-content w-[9.05ex]',
+                tooltip: 'w-[9.05ex]'
+            },
+            6: {
+                base: 'box-content w-[10.86ex]',
+                tooltip: 'w-[10.86ex]'
+            },
+            7: {
+                base: 'box-content w-[12.67ex]',
+                tooltip: 'w-[12.67ex]'
+            },
+            8: {
+                base: 'box-content w-[14.48ex]',
+                tooltip: 'w-[14.48ex]'
+            },
+            9: {
+                base: 'box-content w-[16.29ex]',
+                tooltip: 'w-[16.29ex]'
+            },
+            10: {
+                base: 'box-content w-[18.1ex]',
+                tooltip: 'w-[18.1ex]'
+            },
+            20: {
+                base: 'box-content w-[36.2ex]',
+                tooltip: 'w-[36.2ex]'
+            },
+            30: {
+                base: 'box-content w-[54.3ex]',
+                tooltip: 'w-[54.3ex]'
+            }
         }
     }
 }, {

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

@@ -3,6 +3,12 @@ import { type VariantProps } from 'tailwind-variants';
 import { styles } from './select.styles.js';
 type Variants = VariantProps<typeof styles>;
 export type SelectProps = {
+    /**
+     * Whether to set the title for the select to the currently selected option for use with truncation.
+     * Optional for accessibility reasons as it should only be enabled when required. Will not be read by screen readers.
+     * @default false
+     */
+    enableTooltip?: boolean;
     /**
      * Whether select is invalid
      * @default false

package/dist/components/table/table.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'mb-4 w-full',
+        base: 'mb-4 w-full [&_:focus-visible]:focus-outline',
         wrapper: 'max-xsl:mb-3 max-xsl:w-full max-xsl:overflow-x-auto max-xsl:overflow-y-hidden'
     },
     variants: {}

package/dist/components/tabs/components/tabs-tab/tabs-tab.styles.js

@@ -22,7 +22,7 @@ export const styles = tv({
             hero: ''
         },
         isFocusVisible: {
-            true: 'focus-outline',
+            true: 'z-10 focus-outline',
             false: 'outline-none'
         }
     },

package/dist/components/tabs/components/tabs-tab-panel/tabs-tab-panel.styles.d.ts

@@ -6,7 +6,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     isFocused: {
         true: string;
     };
-}, undefined, "flex-1 bg-white p-4", {
+}, undefined, "flex-1 bg-white p-4 [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, {
     look: {
@@ -24,6 +24,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     isFocused: {
         true: string;
     };
-}, undefined, "flex-1 bg-white p-4", {
+}, undefined, "flex-1 bg-white p-4 [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/tabs/components/tabs-tab-panel/tabs-tab-panel.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'flex-1 bg-white p-4',
+    base: 'flex-1 bg-white p-4 [&_:focus-visible]:focus-outline',
     variants: {
         look: {
             default: 'border border-border',

package/dist/components/tooltip/components/tooltip-content/tooltip-content.component.d.ts

@@ -0,0 +1,2 @@
+import { TooltipContentProps } from './tooltip-content.types.js';
+export declare function TooltipContent({ children, id }: TooltipContentProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/tooltip/components/tooltip-content/tooltip-content.component.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { styles } from './tooltip-content.styles.js';
+export function TooltipContent({ children, id }) {
+    return children ? React.createElement("span", {
+        className: styles(),
+        role: "tooltip",
+        id: id
+    }, children) : null;
+}

package/dist/components/tooltip/components/tooltip-content/tooltip-content.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text", TVConfig<V, EV>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text", TVConfig<V, EV>, unknown, unknown, undefined>>;

package/dist/components/tooltip/components/tooltip-content/tooltip-content.styles.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text'
+});

package/dist/components/tooltip/components/tooltip-content/tooltip-content.types.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export type TooltipContentProps = {
+    children?: ReactNode;
+    id: string;
+};

package/dist/components/tooltip/components/tooltip-content/tooltip-content.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+export { Tooltip } from './tooltip.component.js';

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip } from './tooltip.component.js';

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

@@ -0,0 +1,2 @@
+import { TooltipProps } from './tooltip.types.js';
+export declare function Tooltip({ children, tooltip, id, className }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tooltip/tooltip.component.js

@@ -0,0 +1,55 @@
+'use client';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { mergeProps, useHover, useFocusRing } from 'react-aria';
+import { TooltipContent } from './components/tooltip-content/tooltip-content.component.js';
+import { styles } from './tooltip.styles.js';
+export function Tooltip({ children, tooltip, id, className }) {
+    const localId = useId();
+    const [isOpen, setIsOpen] = useState(false);
+    const tooltipWaitTime = useRef(null);
+    const handleKeyDown = (e)=>{
+        if (e.key === 'Escape' && isOpen) {
+            setIsOpen(false);
+        }
+    };
+    const { hoverProps, isHovered } = useHover({});
+    const { isFocusVisible, focusProps } = useFocusRing({
+        within: true
+    });
+    const startTimer = useCallback(()=>{
+        tooltipWaitTime.current = setTimeout(()=>{
+            setIsOpen(true);
+        }, 1000);
+    }, []);
+    const stopTimer = useCallback(()=>{
+        if (tooltipWaitTime.current) {
+            clearTimeout(tooltipWaitTime.current);
+        }
+    }, []);
+    useEffect(()=>{
+        setIsOpen(isFocusVisible);
+    }, [
+        isFocusVisible
+    ]);
+    useEffect(()=>{
+        if (isHovered && !isOpen) startTimer();
+        if (!isHovered) setIsOpen(false);
+        return ()=>stopTimer();
+    }, [
+        isHovered
+    ]);
+    useEffect(()=>{
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>window.removeEventListener('keydown', handleKeyDown);
+    }, [
+        isOpen
+    ]);
+    return React.createElement("span", {
+        ...mergeProps(hoverProps, focusProps),
+        className: styles({
+            className
+        })
+    }, children, isOpen && React.createElement(TooltipContent, {
+        id: id !== null && id !== void 0 ? id : localId
+    }, tooltip));
+}

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

@@ -0,0 +1 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative", TVConfig<V, EV>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "relative", TVConfig<V, EV>, unknown, unknown, undefined>>;

package/dist/components/tooltip/tooltip.styles.js

@@ -0,0 +1,4 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'relative'
+});

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type TooltipProps = {
+    children: ReactNode;
+    tooltip: string;
+    id?: string;
+    className?: string;
+};

package/dist/components/tooltip/tooltip.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -3,7 +3,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         light: string;
         white: string;
     };
-}, undefined, "rounded border border-border p-2 sm:p-4", {
+}, undefined, "rounded border border-border p-2 sm:p-4 [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, {
     color: {
@@ -15,6 +15,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         light: string;
         white: string;
     };
-}, undefined, "rounded border border-border p-2 sm:p-4", {
+}, undefined, "rounded border border-border p-2 sm:p-4 [&_:focus-visible]:focus-outline", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/well/well.styles.js

@@ -1,6 +1,6 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'rounded border border-border p-2 sm:p-4',
+    base: 'rounded border border-border p-2 sm:p-4 [&_:focus-visible]:focus-outline',
     variants: {
         color: {
             light: 'bg-light',