@westpac/ui 0.49.0 → 0.50.3

package/src/components/date-picker-beta/components/popover/popover.styles.ts

@@ -0,0 +1,34 @@
+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/src/components/date-picker-beta/components/popover/popover.types.ts

@@ -0,0 +1,10 @@
+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/src/components/date-picker-beta/date-picker.component.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { DateValue, 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 { Breakpoint } from '../../tailwind/constants/index.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';
+import { type DatePickerBetaProps } from './date-picker.types.js';
+
+const BREAKPOINTS_DECRECENT = ['xl', 'lg', 'md', 'sm', 'xsl', 'initial'] as const;
+export function DatePickerBeta({
+  size = 'medium',
+  className,
+  bottomSheetView = { initial: true, xsl: false },
+  isDateUnavailable,
+  disableDaysOfWeek,
+  disableWeekends,
+  separator,
+  portalContainer,
+  ...props
+}: DatePickerBetaProps) {
+  const { locale } = useLocale();
+
+  const enhancedIsDateUnavailable = useMemo(() => {
+    return disableDaysOfWeek || disableWeekends
+      ? (date: DateValue) => {
+          let conditions = [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: boolean = 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,
+    ) as Breakpoint | 'initial';
+
+    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 (
+    <>
+      <div {...labelProps}>{props.label}</div>
+      <div {...props} {...groupProps} ref={ref} className={styles.input({ className })}>
+        <DateField separator={separator} {...fieldProps} />
+        <Button
+          look="faint"
+          className={styles.button()}
+          iconColor="muted"
+          size={size}
+          iconAfter={CalendarIcon}
+          {...newButtonProps}
+          aria-labelledby={undefined}
+        />
+      </div>
+      {state.isOpen && (
+        <Popover
+          portalContainer={portalContainer || brandContainer}
+          showAsBottomSheet={showAsBottomSheet}
+          state={state}
+          triggerRef={ref}
+          placement="bottom left"
+        >
+          <Dialog {...dialogProps}>
+            <Calendar {...calendarProps} firstDayOfWeek={props.firstDayOfWeek} />
+          </Dialog>
+        </Popover>
+      )}
+    </>
+  );
+}

package/src/components/date-picker-beta/date-picker.styles.ts

@@ -0,0 +1,44 @@
+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'] },
+);

package/src/components/date-picker-beta/date-picker.types.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes } 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> &
+  Variants &
+  Omit<HTMLAttributes<HTMLDivElement>, 'invalid'> & {
+    /**
+     * Determines whether to display the component as a bottom sheet view.
+     * Can also accept an object to conditionally enable the bottom sheet based on breakpoints.
+     */
+    bottomSheetView?: boolean | Partial<Record<Breakpoint | 'initial', boolean>>;
+
+    /**
+     * An array of numbers representing the days of the week to disable.
+     * For example, to disable Monday, Wednesday, and Saturday: [0, 2, 5].
+     */
+    disableDaysOfWeek?: number[];
+
+    /**
+     * If true, disables selection of weekend days (Saturday and Sunday).
+     */
+    disableWeekends?: boolean;
+
+    /**
+     * Separator character used in the date field. Defaults to "/".
+     */
+    separator?: string;
+    /**
+     * portal container for date picker
+     */
+    portalContainer?: Element;
+  };

package/src/components/date-picker-beta/index.ts

@@ -0,0 +1,2 @@
+export { DatePickerBeta } from './date-picker.component.js';
+export { type DatePickerBetaProps } from './date-picker.types.js';

package/src/components/footer/footer.component.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import { useFocusRing } from 'react-aria';
 
-import { Grid, GridItem, VisuallyHidden } from '../index.js';
+import { VisuallyHidden } from '../index.js';
 import {
   BOMMultibrandSmallLogo,
   BSAMultibrandSmallLogo,
@@ -54,18 +54,14 @@ export function Footer({
   return (
     <footer className={styles.base({ className })} {...props}>
       <div className={styles.wrapper()}>
-        <Grid className={styles.topRow()}>
-          <GridItem span={12}>{children}</GridItem>
-        </Grid>
+        <div>{children}</div>
         {!hideLogo && (
-          <Grid>
-            <GridItem span={{ initial: 12, md: 1 }}>
-              <a href={logoLink} className={styles.link()} {...focusProps}>
-                {srOnlyText && <VisuallyHidden>{srOnlyText}</VisuallyHidden>}
-                <Logo align="right" aria-label={logoAssistiveText} />
-              </a>
-            </GridItem>
-          </Grid>
+          <div className={styles.logoWrapper()}>
+            <a href={logoLink} className={styles.link()} {...focusProps}>
+              {srOnlyText && <VisuallyHidden>{srOnlyText}</VisuallyHidden>}
+              <Logo align="right" aria-label={logoAssistiveText} />
+            </a>
+          </div>
         )}
       </div>
     </footer>

package/src/components/footer/footer.styles.ts

@@ -4,9 +4,9 @@ export const styles = tv(
   {
     slots: {
       base: 'relative overflow-hidden border-t border-t-border',
-      wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
-      topRow: '',
+      wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-3',
       link: 'float-right block',
+      logoWrapper: 'flex justify-end',
     },
     variants: {
       offsetSidebar: {
@@ -18,10 +18,6 @@ export const styles = tv(
       isFocusVisible: {
         true: { link: 'focus-outline' },
       },
-      hideLogo: {
-        true: '',
-        false: { topRow: 'max-md:mb-7 md:mb-4' },
-      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/index.ts

@@ -17,6 +17,7 @@ export * from './switch/index.js';
 export * from './progress-bar/index.js';
 export * from './link/index.js';
 export * from './date-picker/index.js';
+export * from './date-picker-beta/index.js';
 export * from './grid/index.js';
 export * from './table/index.js';
 export * from './panel/index.js';

package/src/hook/breakpoints.hook.ts

@@ -1,8 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { create } from 'zustand';
 
 import { BREAKPOINTS, Breakpoint } from '../tailwind/constants/index.js';
 
 function checkBreakpoint(): Breakpoint | 'initial' {
+  if (typeof window === 'undefined') {
+    return 'initial';
+  }
   const breakpointsAsArray = Object.entries(BREAKPOINTS).reverse() as [Breakpoint, string][];
   const breakpoint = breakpointsAsArray.find(([, value]) => window.matchMedia(`(min-width: ${value})`).matches) as [
     Breakpoint,
@@ -11,18 +15,74 @@ function checkBreakpoint(): Breakpoint | 'initial' {
   return breakpoint ? breakpoint[0] : 'initial';
 }
 
-export function useBreakpoint() {
-  const [breakpoint, setBreakpoint] = useState<Breakpoint | 'initial'>(checkBreakpoint());
+const BREAKPOINTS_ENTRIES = Object.entries(BREAKPOINTS);
+const BREAKPOINTS_MEDIA: Record<Breakpoint | 'initial', string> = BREAKPOINTS_ENTRIES.reduce(
+  (acc, [key, value], index) => {
+    const finalValue = (() => {
+      const nextBreakpoint = BREAKPOINTS_ENTRIES[index + 1];
+      if (nextBreakpoint) {
+        return `(min-width: ${value}) and (max-width: ${+nextBreakpoint[1].replace('px', '') - 1}px)`;
+      }
+      return `(min-width: ${value})`;
+    })();
 
-  useEffect(() => {
-    const listener = () => {
-      const breakpoint = checkBreakpoint();
-      setBreakpoint(breakpoint);
-    };
-    window.addEventListener('resize', listener);
-    return () => {
-      window.removeEventListener('resize', listener);
+    return {
+      ...acc,
+      [key]: finalValue,
     };
+  },
+  {
+    initial: `(max-width: ${+BREAKPOINTS_ENTRIES[0][1].replace('px', '') - 1}px)`,
+  } as Record<Breakpoint | 'initial', string>,
+);
+
+type BreakpointState = {
+  breakpoint: Breakpoint | 'initial';
+  mediaQueryListeners:
+    | {
+        mq: MediaQueryList;
+        listener: (e: MediaQueryListEvent) => void;
+      }[]
+    | null;
+  initialised: boolean;
+  ensureInitialized: () => void;
+  removeListeners: () => void;
+};
+
+const useBreakpointStore = create<BreakpointState>()((set, get) => ({
+  breakpoint: 'initial',
+  mediaQueryListeners: null,
+  initialised: false,
+  ensureInitialized: () => {
+    if (get().initialised) {
+      return;
+    }
+    const listeners = Object.entries(BREAKPOINTS_MEDIA).map(([label, query]) => {
+      const mq = window.matchMedia(query);
+      const listener = (e: MediaQueryListEvent) => {
+        if (e.matches) {
+          set({ breakpoint: label as Breakpoint });
+        }
+      };
+      mq.addEventListener('change', listener);
+      return {
+        mq,
+        listener,
+      };
+    });
+    set({ mediaQueryListeners: listeners, initialised: true, breakpoint: checkBreakpoint() });
+  },
+  removeListeners: () => {
+    get().mediaQueryListeners?.forEach(({ mq, listener }) => {
+      mq.removeEventListener('change', listener);
+    });
+  },
+}));
+
+export function useBreakpoint() {
+  const { breakpoint, ensureInitialized: initIfNotInitialised } = useBreakpointStore();
+  useEffect(() => {
+    initIfNotInitialised();
   }, []);
 
   return breakpoint;

package/src/hook/index.ts

@@ -1 +1,2 @@
+export * from './breakpoints.hook.js';
 export * from '../components/pagination/pagination.hooks.js';

package/src/tailwind/tailwind-plugin.ts

@@ -129,6 +129,24 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
                 transform: 'translateY(0)',
               },
             },
+            fadeInUp: {
+              '0%': {
+                opacity: '0',
+                transform: 'translateY(10vh)',
+              },
+              '100%': {
+                opacity: '1',
+                transform: 'translateY(0)',
+              },
+            },
+            slideUp: {
+              '0%': {
+                transform: 'translateY(100%)',
+              },
+              '100%': {
+                transform: 'translateY(0)',
+              },
+            },
             maxHeightIn: {
               '0%': { maxHeight: '0' },
             },
@@ -137,6 +155,8 @@ export const WestpacUIKitBasePlugin = plugin.withOptions(
             skeleton: 'waveLines 2s infinite ease-out',
             fadeIn: 'fadeIn 0.2s ease',
             fadeInDown: 'fadeInDown 0.4s ease',
+            fadeInUp: 'fadeInUp 0.4s ease',
+            slideUp: 'slideUp 0.4s ease',
             maxHeightIn: 'maxHeightIn 0.4s ease',
           },
           boxShadow: {