@westpac/ui 0.50.0 → 0.52.0

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);

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/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;