@westpac/ui 0.49.0 → 0.50.3

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

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: '!typography-body-8 appearance-none border-none !bg-none pl-0 pr-4 font-semibold',
+        caret: 'pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 touch-none'
+    },
+    variants: {
+        isFocusVisible: {
+            true: {
+                base: 'focus-outline'
+            }
+        }
+    }
+});

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

@@ -0,0 +1,2 @@
+import { SelectHTMLAttributes } from 'react';
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;

package/dist/components/date-picker-beta/components/calendar/components/select/select.types.js

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

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

@@ -0,0 +1,5 @@
+import { DateSegmentProps } from './date-segment.types.js';
+/**
+ * @private
+ */
+export declare function DateSegment({ segment, state, separator, ...props }: DateSegmentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+'use client';
+import React, { useRef } from 'react';
+import { mergeProps, useDateSegment, useFocusRing } from 'react-aria';
+import { styles as dateSegmentStyles } from './date-segment.styles.js';
+export function DateSegment({ segment, state, separator, ...props }) {
+    const ref = useRef(null);
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const { segmentProps } = useDateSegment(segment, state, ref);
+    const styles = dateSegmentStyles({
+        isFocusVisible,
+        isPlaceholder: segment.isPlaceholder,
+        isSeparator: segmentProps.role !== 'spinbutton'
+    });
+    return React.createElement("span", {
+        ...props,
+        ...mergeProps(focusProps, segmentProps),
+        ref: ref,
+        className: styles
+    }, segment.type === 'literal' ? separator || segment.text : segment.text);
+}

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

@@ -0,0 +1,44 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    isPlaceholder: {
+        true: string;
+        false: string;
+    };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
+    isSeparator: {
+        true: string;
+        false: string;
+    };
+}, undefined, "font-light disabled:form-control-disabled", {
+    responsiveVariants: string[];
+}, {
+    isPlaceholder: {
+        true: string;
+        false: string;
+    };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
+    isSeparator: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isPlaceholder: {
+        true: string;
+        false: string;
+    };
+    isFocusVisible: {
+        true: string;
+        false: string;
+    };
+    isSeparator: {
+        true: string;
+        false: string;
+    };
+}, undefined, "font-light disabled:form-control-disabled", {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

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

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    base: 'font-light disabled:form-control-disabled',
+    variants: {
+        isPlaceholder: {
+            true: 'text-text-50 opacity-100',
+            false: ''
+        },
+        isFocusVisible: {
+            true: 'focus-outline',
+            false: ''
+        },
+        isSeparator: {
+            true: 'px-0.5 text-text-50',
+            false: ''
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { DateFieldState, DateSegment } from 'react-stately';
+export type DateSegmentProps = {
+    segment: DateSegment;
+    separator?: string;
+    state: DateFieldState;
+} & HTMLAttributes<Element>;

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

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

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

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

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

@@ -0,0 +1,25 @@
+'use client';
+import { createCalendar } from '@internationalized/date';
+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 }) {
+    const { locale } = useLocale();
+    const state = useDateFieldState({
+        ...props,
+        locale,
+        createCalendar
+    });
+    const ref = useRef(null);
+    const { fieldProps } = useDateField(props, state, ref);
+    return React.createElement("div", {
+        ...fieldProps,
+        ref: ref
+    }, state.segments.map((segment, i)=>React.createElement(DateSegment, {
+            separator: separator,
+            key: i,
+            segment: segment,
+            state: state
+        })));
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { DialogProps } from './dialog.types.js';
+/**
+ * @private
+ */
+export declare function Dialog({ title, children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import React, { useRef } from 'react';
+import { useDialog } from 'react-aria';
+export function Dialog({ title, children, ...props }) {
+    const ref = useRef(null);
+    const { dialogProps, titleProps } = useDialog(props, ref);
+    return React.createElement("div", {
+        ...dialogProps,
+        ref: ref,
+        className: "p-3"
+    }, title && React.createElement("h3", {
+        ...titleProps,
+        style: {
+            marginTop: 0
+        }
+    }, title), children);
+}

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

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+import { AriaDialogProps } from 'react-aria';
+export type DialogProps = AriaDialogProps & HTMLAttributes<Element>;

package/dist/components/date-picker-beta/components/dialog/dialog.types.js

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

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

@@ -0,0 +1,5 @@
+import { PopoverProps } from './popover.types.js';
+/**
+ * @private
+ */
+export declare function Popover({ state, portalContainer, children, showAsBottomSheet, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import React, { useRef } from 'react';
+import { Overlay, usePopover } from 'react-aria';
+import { CloseIcon } from '../../../icon/index.js';
+import { styles as popoverStyles } from './popover.styles.js';
+export function Popover({ state, portalContainer, children, showAsBottomSheet, ...props }) {
+    const ref = useRef(null);
+    const { popoverProps, underlayProps } = usePopover({
+        ...props,
+        popoverRef: ref,
+        containerPadding: 0,
+        offset: 0
+    }, state);
+    const styles = popoverStyles({
+        showAsBottomSheet
+    });
+    return React.createElement(Overlay, {
+        portalContainer: portalContainer
+    }, React.createElement("div", {
+        ...underlayProps,
+        className: styles.underlay()
+    }), React.createElement("div", {
+        ...popoverProps,
+        ref: ref,
+        className: styles.popover()
+    }, React.createElement("div", {
+        className: styles.header()
+    }, React.createElement("p", {
+        className: styles.headerLabel()
+    }, "Choose a date"), React.createElement("button", {
+        className: styles.closeButton(),
+        onClick: ()=>state.close(),
+        "aria-label": "Close window"
+    }, React.createElement(CloseIcon, {
+        color: "primary",
+        className: "block",
+        size: "small"
+    }))), children));
+}

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

@@ -0,0 +1,71 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    showAsBottomSheet: {
+        true: {
+            underlay: string;
+            popover: string;
+            header: string;
+            headerLabel: string;
+            closeButton: string;
+        };
+        false: {
+            underlay: string;
+            closeButton: string;
+            headerLabel: string;
+            popover: string;
+        };
+    };
+}, {
+    underlay: string;
+    popover: string;
+    header: string;
+    headerLabel: string;
+    closeButton: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    showAsBottomSheet: {
+        true: {
+            underlay: string;
+            popover: string;
+            header: string;
+            headerLabel: string;
+            closeButton: string;
+        };
+        false: {
+            underlay: string;
+            closeButton: string;
+            headerLabel: string;
+            popover: string;
+        };
+    };
+}, {
+    underlay: string;
+    popover: string;
+    header: string;
+    headerLabel: string;
+    closeButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    showAsBottomSheet: {
+        true: {
+            underlay: string;
+            popover: string;
+            header: string;
+            headerLabel: string;
+            closeButton: string;
+        };
+        false: {
+            underlay: string;
+            closeButton: string;
+            headerLabel: string;
+            popover: string;
+        };
+    };
+}, {
+    underlay: string;
+    popover: string;
+    header: string;
+    headerLabel: string;
+    closeButton: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

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

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        underlay: 'fixed inset-0',
+        popover: 'bg-white',
+        header: '',
+        headerLabel: '',
+        closeButton: 'flex items-center justify-center focus-outline'
+    },
+    variants: {
+        showAsBottomSheet: {
+            true: {
+                underlay: 'animate-fadeIn bg-black/20',
+                popover: '!fixed inset-x-0 !bottom-0 !left-0 !top-auto animate-slideUp overflow-auto rounded-t px-[8%] pb-3',
+                header: 'mx-[-8vw] flex items-center justify-between border-b border-b-border px-3.5 py-2',
+                headerLabel: 'typography-body-10 text-text',
+                closeButton: 'pointer-events-none touch-none rounded-full bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100'
+            },
+            false: {
+                underlay: '',
+                closeButton: 'border-border pointer-events-none absolute right-0 top-0 size-5 -translate-y-1/2 translate-x-1/2 touch-none rounded-full border bg-white opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
+                headerLabel: 'hidden',
+                popover: 'absolute mt-1 scale-100 animate-fadeIn rounded border border-border bg-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]'
+            }
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { AriaPopoverProps } from 'react-aria';
+import { OverlayTriggerState } from 'react-stately';
+export type PopoverProps = Omit<AriaPopoverProps, 'popoverRef'> & {
+    children: ReactNode;
+    showAsBottomSheet?: boolean;
+    state: OverlayTriggerState;
+    portalContainer?: Element;
+};

package/dist/components/date-picker-beta/components/popover/popover.types.js

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

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

@@ -0,0 +1,2 @@
+import { type DatePickerBetaProps } from './date-picker.types.js';
+export declare function DatePickerBeta({ size, className, bottomSheetView, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, ...props }: DatePickerBetaProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,114 @@
+'use client';
+import { getDayOfWeek, isWeekend } from '@internationalized/date';
+import React, { useMemo, useRef } from 'react';
+import { useButton, useDatePicker, useLocale } from 'react-aria';
+import { useDatePickerState } from 'react-stately';
+import { useBreakpoint } from '../../hook/breakpoints.hook.js';
+import { Button } from '../button/index.js';
+import { CalendarIcon } from '../icon/index.js';
+import { Calendar } from './components/calendar/calendar.component.js';
+import { DateField } from './components/date-field/date-field.component.js';
+import { Dialog } from './components/dialog/dialog.component.js';
+import { Popover } from './components/popover/popover.component.js';
+import { styles as datePickerStyles } from './date-picker.styles.js';
+const BREAKPOINTS_DECRECENT = [
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xsl',
+    'initial'
+];
+export function DatePickerBeta({ size = 'medium', className, bottomSheetView = {
+    initial: true,
+    xsl: false
+}, isDateUnavailable, disableDaysOfWeek, disableWeekends, separator, portalContainer, ...props }) {
+    const { locale } = useLocale();
+    const enhancedIsDateUnavailable = useMemo(()=>{
+        return disableDaysOfWeek || disableWeekends ? (date)=>{
+            let conditions = [
+                (isDateUnavailable === null || isDateUnavailable === void 0 ? void 0 : isDateUnavailable(date)) || false
+            ];
+            if (disableDaysOfWeek) {
+                conditions = [
+                    disableDaysOfWeek.indexOf(getDayOfWeek(date, locale)) !== -1,
+                    ...conditions
+                ];
+            }
+            if (disableWeekends) {
+                conditions = [
+                    isWeekend(date, locale),
+                    ...conditions
+                ];
+            }
+            return conditions.some((condition)=>condition);
+        } : isDateUnavailable;
+    }, [
+        disableDaysOfWeek,
+        disableWeekends,
+        isDateUnavailable,
+        locale
+    ]);
+    const state = useDatePickerState({
+        isDateUnavailable: enhancedIsDateUnavailable,
+        ...props
+    });
+    const styles = datePickerStyles({
+        size,
+        isInvalid: state.isInvalid,
+        isDisabled: props.isDisabled
+    });
+    const breakpoint = useBreakpoint();
+    const ref = useRef(null);
+    const { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = useDatePicker({
+        isDateUnavailable: enhancedIsDateUnavailable,
+        ...props
+    }, state, ref);
+    const showAsBottomSheet = useMemo(()=>{
+        if (typeof bottomSheetView === 'boolean') {
+            return bottomSheetView;
+        }
+        const currentBreakpointIndex = BREAKPOINTS_DECRECENT.findIndex((bp)=>bp === breakpoint);
+        const finalBreakPoint = [
+            breakpoint,
+            ...BREAKPOINTS_DECRECENT.slice(currentBreakpointIndex)
+        ].find((currentBreakpoint)=>bottomSheetView[currentBreakpoint] !== undefined);
+        return bottomSheetView[finalBreakPoint] || false;
+    }, [
+        bottomSheetView,
+        breakpoint
+    ]);
+    const buttonRef = useRef(null);
+    const { buttonProps: newButtonProps } = useButton(buttonProps, buttonRef);
+    const brandContainer = useMemo(()=>{
+        return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || undefined;
+    }, []);
+    return React.createElement(React.Fragment, null, React.createElement("div", labelProps, props.label), React.createElement("div", {
+        ...props,
+        ...groupProps,
+        ref: ref,
+        className: styles.input({
+            className
+        })
+    }, React.createElement(DateField, {
+        separator: separator,
+        ...fieldProps
+    }), React.createElement(Button, {
+        look: "faint",
+        className: styles.button(),
+        iconColor: "muted",
+        size: size,
+        iconAfter: CalendarIcon,
+        ...newButtonProps,
+        "aria-labelledby": undefined
+    })), state.isOpen && React.createElement(Popover, {
+        portalContainer: portalContainer || brandContainer,
+        showAsBottomSheet: showAsBottomSheet,
+        state: state,
+        triggerRef: ref,
+        placement: "bottom left"
+    }, React.createElement(Dialog, dialogProps, React.createElement(Calendar, {
+        ...calendarProps,
+        firstDayOfWeek: props.firstDayOfWeek
+    }))));
+}

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

@@ -0,0 +1,107 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: {
+            input: string;
+            button: string;
+        };
+        medium: {
+            input: string;
+            button: string;
+        };
+        large: {
+            input: string;
+            button: string;
+        };
+        xlarge: {
+            input: string;
+            button: string;
+        };
+    };
+    isInvalid: {
+        true: {
+            input: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            input: string;
+        };
+        false: {};
+    };
+}, {
+    input: string;
+    button: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    size: {
+        small: {
+            input: string;
+            button: string;
+        };
+        medium: {
+            input: string;
+            button: string;
+        };
+        large: {
+            input: string;
+            button: string;
+        };
+        xlarge: {
+            input: string;
+            button: string;
+        };
+    };
+    isInvalid: {
+        true: {
+            input: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            input: string;
+        };
+        false: {};
+    };
+}, {
+    input: string;
+    button: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        small: {
+            input: string;
+            button: string;
+        };
+        medium: {
+            input: string;
+            button: string;
+        };
+        large: {
+            input: string;
+            button: string;
+        };
+        xlarge: {
+            input: string;
+            button: string;
+        };
+    };
+    isInvalid: {
+        true: {
+            input: string;
+        };
+        false: {};
+    };
+    isDisabled: {
+        true: {
+            input: string;
+        };
+        false: {};
+    };
+}, {
+    input: string;
+    button: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

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

@@ -0,0 +1,47 @@
+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'
+    },
+    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]'
+            },
+            medium: {
+                input: 'form-control-medium gap-2',
+                button: 'my-[-0.3125rem] -mr-2 min-h-6 py-[0.3125rem]'
+            },
+            large: {
+                input: 'form-control-large gap-2.5',
+                button: 'my-[-0.5rem] -mr-2.5 min-h-7 py-[0.5rem]'
+            },
+            xlarge: {
+                input: 'form-control-xlarge gap-3',
+                button: '-my-1.5 -mr-3 mb-[-0.625rem] min-h-8 py-1.5'
+            }
+        },
+        isInvalid: {
+            true: {
+                input: 'border-danger'
+            },
+            false: {}
+        },
+        isDisabled: {
+            true: {
+                input: 'form-control-disabled'
+            },
+            false: {}
+        }
+    }
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
+});