@westpac/ui 0.56.0 → 0.57.0

package/dist/components/button/button.styles.js

@@ -33,7 +33,7 @@ export const styles = tv({
                 base: 'border border-borderDark bg-light text-muted hover:bg-white active:bg-white'
             },
             link: {
-                base: 'text-link underline'
+                base: 'text-link underline hover:no-underline'
             },
             unstyled: {
                 base: 'p-0 text-left'

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

@@ -8,7 +8,6 @@ export function DateSegment({ segment, state, separator, ...props }) {
     const { segmentProps } = useDateSegment(segment, state, ref);
     const styles = dateSegmentStyles({
         isFocusVisible,
-        isPlaceholder: segment.isPlaceholder,
         isSeparator: segmentProps.role !== 'spinbutton'
     });
     return React.createElement("span", {

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

@@ -1,8 +1,4 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
-    isPlaceholder: {
-        true: string;
-        false: string;
-    };
     isFocusVisible: {
         true: string;
         false: string;
@@ -11,13 +7,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "font-light disabled:form-control-disabled focus:focus-outline", {
+}, undefined, "uppercase disabled:form-control-disabled focus:focus-outline", {
     responsiveVariants: string[];
 }, {
-    isPlaceholder: {
-        true: string;
-        false: string;
-    };
     isFocusVisible: {
         true: string;
         false: string;
@@ -27,10 +19,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
-    isPlaceholder: {
-        true: string;
-        false: string;
-    };
     isFocusVisible: {
         true: string;
         false: string;
@@ -39,6 +27,6 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "font-light disabled:form-control-disabled focus:focus-outline", {
+}, undefined, "uppercase disabled:form-control-disabled focus:focus-outline", {
     responsiveVariants: string[];
 }, unknown, unknown, undefined>>;

package/dist/components/date-picker-beta/components/date-field/components/date-segment/date-segment.styles.js

@@ -1,17 +1,13 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'font-light disabled:form-control-disabled focus:focus-outline',
+    base: 'uppercase disabled:form-control-disabled focus:focus-outline',
     variants: {
-        isPlaceholder: {
-            true: 'text-text-50 opacity-100',
-            false: ''
-        },
         isFocusVisible: {
             true: 'focus-outline',
             false: ''
         },
         isSeparator: {
-            true: 'px-0.5 text-text-50',
+            true: 'px-0.5 text-text',
             false: ''
         }
     }

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

@@ -2,4 +2,4 @@ import { type DateFieldProps } from './date-field.types.js';
 /**
  * @private
  */
-export declare function DateField({ separator, ...props }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateField({ separator, className, ...props }: DateFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ import React, { 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, ...props }) {
+export function DateField({ separator, className, ...props }) {
     const { locale } = useLocale();
     const state = useDateFieldState({
         ...props,
@@ -15,7 +15,8 @@ export function DateField({ separator, ...props }) {
     const { fieldProps } = useDateField(props, state, ref);
     return React.createElement("div", {
         ...fieldProps,
-        ref: ref
+        ref: ref,
+        className: className
     }, state.segments.map((segment, i)=>React.createElement(DateSegment, {
             separator: separator,
             key: i,

package/dist/components/date-picker-beta/components/date-field/date-field.types.d.ts

@@ -1,4 +1,5 @@
 import { AriaDateFieldProps, DateValue } from 'react-aria';
 export type DateFieldProps<T extends DateValue = DateValue> = AriaDateFieldProps<T> & {
     separator?: string;
+    className?: string;
 };

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

@@ -57,6 +57,7 @@ export function DatePickerBeta({ size = 'medium', className, bottomSheetView = {
         size,
         isInvalid: state.isInvalid,
         isDisabled: props.isDisabled,
+        isReadOnly: props.isReadOnly,
         block
     });
     const breakpoint = useBreakpoint();
@@ -88,12 +89,21 @@ export function DatePickerBeta({ size = 'medium', className, bottomSheetView = {
         ...props,
         ...groupProps,
         ref: ref,
+        onBlur: (e)=>{
+            var _props_onBlur;
+            if (state.value) {
+                var _props_onBlur1;
+                return (_props_onBlur1 = props.onBlur) === null || _props_onBlur1 === void 0 ? void 0 : _props_onBlur1.call(props, e, state.value);
+            }
+            return (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
+        },
         className: styles.input({
             className
         })
     }, React.createElement(DateField, {
         separator: separator,
-        ...fieldProps
+        ...fieldProps,
+        className: styles.dateField()
     }), React.createElement(Button, {
         look: "faint",
         className: styles.button(),

package/dist/components/date-picker-beta/date-picker.styles.d.ts

@@ -2,40 +2,49 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
         small: {
             input: string;
-            button: string;
+            dateField: string;
         };
         medium: {
             input: string;
-            button: string;
+            dateField: string;
         };
         large: {
             input: string;
-            button: string;
+            dateField: string;
         };
         xlarge: {
             input: string;
-            button: string;
+            dateField: string;
         };
     };
     block: {
         true: {
             input: string;
+            dateField: string;
         };
     };
     isInvalid: {
         true: {
-            input: string;
+            dateField: string;
+            button: string;
         };
         false: {};
     };
     isDisabled: {
         true: {
-            input: string;
+            dateField: string;
+        };
+        false: {};
+    };
+    isReadOnly: {
+        true: {
+            dateField: string;
         };
         false: {};
     };
 }, {
     input: string;
+    dateField: string;
     button: string;
 }, undefined, {
     responsiveVariants: string[];
@@ -43,79 +52,97 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
         small: {
             input: string;
-            button: string;
+            dateField: string;
         };
         medium: {
             input: string;
-            button: string;
+            dateField: string;
         };
         large: {
             input: string;
-            button: string;
+            dateField: string;
         };
         xlarge: {
             input: string;
-            button: string;
+            dateField: string;
         };
     };
     block: {
         true: {
             input: string;
+            dateField: string;
         };
     };
     isInvalid: {
         true: {
-            input: string;
+            dateField: string;
+            button: string;
         };
         false: {};
     };
     isDisabled: {
         true: {
-            input: string;
+            dateField: string;
+        };
+        false: {};
+    };
+    isReadOnly: {
+        true: {
+            dateField: string;
         };
         false: {};
     };
 }, {
     input: string;
+    dateField: string;
     button: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
         small: {
             input: string;
-            button: string;
+            dateField: string;
         };
         medium: {
             input: string;
-            button: string;
+            dateField: string;
         };
         large: {
             input: string;
-            button: string;
+            dateField: string;
         };
         xlarge: {
             input: string;
-            button: string;
+            dateField: string;
         };
     };
     block: {
         true: {
             input: string;
+            dateField: string;
         };
     };
     isInvalid: {
         true: {
-            input: string;
+            dateField: string;
+            button: string;
         };
         false: {};
     };
     isDisabled: {
         true: {
-            input: string;
+            dateField: string;
+        };
+        false: {};
+    };
+    isReadOnly: {
+        true: {
+            dateField: string;
         };
         false: {};
     };
 }, {
     input: string;
+    dateField: string;
     button: string;
 }, undefined, {
     responsiveVariants: string[];

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

@@ -1,42 +1,51 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        input: 'form-control flex items-center border-borderDark disabled:form-control-disabled',
-        button: 'flex h-auto items-center justify-center rounded-l-none border-y-0 border-l border-r-0 border-l-borderDark bg-light'
+        input: 'form-control flex items-center border-0',
+        dateField: 'rounded rounded-r-none border border-r-0 border-borderDark',
+        button: 'flex items-center justify-center rounded-l-none border-borderDark bg-light'
     },
     variants: {
         size: {
             small: {
-                input: 'form-control-small gap-1.5',
-                button: '-my-0.5 -mr-1.5 mb-[-0.25rem] min-h-5 py-[0.25rem]'
+                input: 'max-h-5',
+                dateField: 'form-control-small h-5'
             },
             medium: {
-                input: 'form-control-medium gap-2',
-                button: 'my-[-0.3125rem] -mr-2 min-h-6 py-[0.3125rem]'
+                input: 'max-h-6',
+                dateField: 'form-control-medium h-6'
             },
             large: {
-                input: 'form-control-large gap-2.5',
-                button: 'my-[-0.5rem] -mr-2.5 min-h-7 py-[0.5rem]'
+                input: 'max-h-7',
+                dateField: 'form-control-large h-7'
             },
             xlarge: {
-                input: 'form-control-xlarge gap-3',
-                button: '-my-1.5 -mr-3 mb-[-0.625rem] min-h-8 py-1.5'
+                input: 'max-h-8',
+                dateField: 'form-control-xlarge h-8'
             }
         },
         block: {
             true: {
-                input: 'w-full justify-between gap-0'
+                input: 'w-full gap-0',
+                dateField: 'w-full'
             }
         },
         isInvalid: {
             true: {
-                input: 'border-danger'
+                dateField: 'border-danger',
+                button: 'border-danger border-l-borderDark'
             },
             false: {}
         },
         isDisabled: {
             true: {
-                input: 'form-control-disabled'
+                dateField: 'form-control-disabled'
+            },
+            false: {}
+        },
+        isReadOnly: {
+            true: {
+                dateField: 'form-control-disabled'
             },
             false: {}
         }

package/dist/components/date-picker-beta/date-picker.types.d.ts

@@ -1,11 +1,11 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, FocusEvent } from 'react';
 import { DateValue } from 'react-aria';
 import { DatePickerStateOptions } from 'react-stately';
 import { VariantProps } from 'tailwind-variants';
 import { Breakpoint } from '../../tailwind/constants/index.js';
 import { styles } from './date-picker.styles.js';
 type Variants = VariantProps<typeof styles>;
-export type DatePickerBetaProps<T extends DateValue = DateValue> = DatePickerStateOptions<T> & Omit<Variants, 'block'> & Omit<HTMLAttributes<HTMLDivElement>, 'invalid'> & {
+export type DatePickerBetaProps<T extends DateValue = DateValue> = Omit<DatePickerStateOptions<T>, 'onBlur'> & Omit<Variants, 'block'> & Omit<HTMLAttributes<HTMLDivElement>, 'invalid' | 'onBlur'> & {
     /**
      * Allows the input to take the full width of its container.
      * @default false
@@ -29,6 +29,10 @@ export type DatePickerBetaProps<T extends DateValue = DateValue> = DatePickerSta
      * Separator character used in the date field. Defaults to "/".
      */
     separator?: string;
+    /**
+     * Custom onBlur that provides the regular event as the first parameter and the date value in the same format as onChange as the second.
+     */
+    onBlur?: (event: FocusEvent<Element, Element>, date?: T) => void;
     /**
      * Placement for the datepicker popover.
      * @default "bottom left"

package/dist/components/popover/components/panel/panel.hook.d.ts

@@ -1,9 +1,11 @@
+import { RefObject } from 'react';
 import { PanelProps } from './panel.types.js';
 export type PanelHookProps = {
     placement: PanelProps['placement'];
     portal: PanelProps['portal'];
     state: PanelProps['state'];
     triggerRef: PanelProps['triggerRef'];
+    popoverRef?: RefObject<HTMLDivElement>;
 };
 /**
  * Custom hook to calculate the position of a popover panel relative to its trigger element.

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

@@ -1,34 +1,54 @@
-import { useMemo } from 'react';
-const PANEL_WIDTH_SIZE = 282;
-const getVerticalPositionPopover = (element)=>{
+import { useEffect, useMemo, useState } from 'react';
+const PANEL_WIDTH_SIZE = 300;
+const getHorizontalPositionPopover = (element, screenWidth)=>{
     const triggerDOMRect = element.getBoundingClientRect();
-    const offsetLeftToCenter = (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0) / 2) * -1;
+    const offsetLeftToCenter = (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0)) / 2 * -1;
     if (triggerDOMRect.left + offsetLeftToCenter <= 0) {
         return 'left';
     }
-    if (triggerDOMRect.left + offsetLeftToCenter >= 0 && triggerDOMRect.right + offsetLeftToCenter * -1 <= window.innerWidth) {
+    if (triggerDOMRect.left + offsetLeftToCenter >= 0 && triggerDOMRect.right + offsetLeftToCenter * -1 <= screenWidth) {
         return 'center';
     }
-    if (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) >= window.innerWidth) {
+    if (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) >= screenWidth) {
         return 'right';
     }
 };
-const getLeftOffsetPerVerticalPosition = (element)=>{
+const getLeftOffsetPerHorizontalPosition = (element, screenWidth)=>{
     const triggerDOMRect = element.getBoundingClientRect();
-    switch(getVerticalPositionPopover(element)){
+    const rightOffset = (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) - screenWidth + (screenWidth - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.right) || 0))) * -1;
+    switch(getHorizontalPositionPopover(element, screenWidth)){
         case 'center':
             return (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0)) / 2 * -1;
         case 'right':
-            return (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) - window.innerWidth + (window.innerWidth - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.right) || 0))) * -1;
+            if (triggerDOMRect.left + rightOffset <= 0) {
+                return rightOffset - (triggerDOMRect.left + rightOffset) + 16;
+            }
+            return rightOffset;
         default:
             return 0;
     }
 };
 export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
+    const [screenWidth, setScreenWidth] = useState(document.documentElement.clientWidth);
+    useEffect(()=>{
+        const handleResize = ()=>{
+            if (portal instanceof Element) {
+                setScreenWidth(portal.clientWidth);
+            } else {
+                setScreenWidth(document.documentElement.clientWidth);
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        return ()=>{
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [
+        portal
+    ]);
     const popoverPosition = useMemo(()=>{
         var _triggerRef_current;
         const triggerDOMRect = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getBoundingClientRect();
-        const leftOffset = triggerRef.current ? getLeftOffsetPerVerticalPosition(triggerRef.current) : 0;
+        const leftOffset = triggerRef.current ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) : 0;
         if (!portal) {
             switch(placement){
                 case 'top':
@@ -63,18 +83,20 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
         placement,
         portal,
         triggerRef,
-        state.isOpen
+        state.isOpen,
+        screenWidth
     ]);
     const arrowPosition = useMemo(()=>{
         var _triggerRef_current;
         const triggerDOMRect = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getBoundingClientRect();
-        const leftOffset = triggerRef.current ? getLeftOffsetPerVerticalPosition(triggerRef.current) * -1 : 0;
+        const leftOffset = triggerRef.current ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) * -1 : 0;
         return {
             left: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0) / 2 + leftOffset}px`
         };
     }, [
         triggerRef,
-        state.isOpen
+        state.isOpen,
+        screenWidth
     ]);
     return {
         popoverPosition,