@westpac/ui 0.49.0 → 0.50.3

package/src/components/accordion/components/accordion-item/accordion-item.component.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable sonarjs/deprecation */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useAccordionItem } from '@react-aria/accordion';
-import { AnimatePresence, LazyMotion, m } from 'motion/react';
-import React, { useRef } from 'react';
+import { LazyMotion, m, useAnimate } from 'motion/react';
+import React, { useEffect, useRef, useState } from 'react';
 import { mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
@@ -23,11 +23,44 @@ export function AccordionItem<T = HTMLElement>({
   const { state, item } = props;
   const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
-  const isOpen = state.expandedKeys.has(item.key);
+  const isOpenState = state.expandedKeys.has(item.key);
   const isDisabled = state.disabledKeys.has(item.key);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
-  const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible, rounded });
+  // Open/close animation needs to be done with useAnimate as AnimatePresence will unmount component
+  const [scope, animate] = useAnimate();
+  const [enableOpenStyle, setEnableOpenStyle] = useState(false);
+
+  const styles = accordionItemStyles({
+    isOpen: enableOpenStyle,
+    isOpenState,
+    isDisabled,
+    look,
+    isFocusVisible,
+    rounded,
+  });
+
+  useEffect(() => {
+    // setEnableStyle here as opening animation isn't working correctly if done below
+    if (isOpenState) setEnableOpenStyle(true);
+
+    if (enableOpenStyle) {
+      animate(scope.current, { height: 'auto' }, { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] });
+    }
+    if (!isOpenState) {
+      animate(
+        scope.current,
+        { height: '0px' },
+        {
+          duration: 0.3,
+          ease: [0.25, 0.1, 0.25, 1.0],
+          // set some styles after animation completes so content doesn't disappear on close
+          onComplete: () => setEnableOpenStyle(false),
+        },
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpenState, enableOpenStyle]);
 
   return (
     <Tag className={styles.base({ className })}>
@@ -47,34 +80,18 @@ export function AccordionItem<T = HTMLElement>({
       </h3>
       <div {...regionProps}>
         <LazyMotion features={loadAnimations}>
-          <AnimatePresence initial={false}>
-            {isOpen && (
-              <m.div
-                className="overflow-hidden"
-                initial={{
-                  height: 0,
-                }}
-                animate={{
-                  height: 'auto',
-                }}
-                exit={{
-                  height: 0,
-                }}
-                transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }}
-              >
-                <div
-                  className={styles.content()}
-                  // TODO: Remove below with updated accordion that uses disclosure as the issue doesn't happen with that version
-                  // Need to call stopPropagation here as some events from children are bubbling up and focusing the accordion i.e. inputs
-                  onBlur={e => {
-                    e.stopPropagation();
-                  }}
-                >
-                  {item.props.children}
-                </div>
-              </m.div>
-            )}
-          </AnimatePresence>
+          <m.div className="overflow-hidden" initial={{ height: isOpenState ? 'auto' : 0 }} ref={scope}>
+            <div
+              className={styles.content()}
+              // TODO: Remove below with updated accordion that uses disclosure as the issue doesn't happen with that version
+              // Need to call stopPropagation here as some events from children are bubbling up and focusing the accordion i.e. inputs
+              onBlur={e => {
+                e.stopPropagation();
+              }}
+            >
+              {item.props.children}
+            </div>
+          </m.div>
         </LazyMotion>
       </div>
     </Tag>

package/src/components/accordion/components/accordion-item/accordion-item.styles.ts

@@ -7,7 +7,7 @@ export const styles = tv(
       itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2 group-first:border-t-0',
       headerTitleWrapper: 'flex-1 pr-2 text-left',
       indicator: 'size-3 rotate-90',
-      content: 'hidden',
+      content: '',
     },
     variants: {
       look: {
@@ -19,13 +19,17 @@ export const styles = tv(
             'mb-[-1px] border-l-[0.375rem] border-r border-border bg-light shadow-[inset_0px_1px_0_0_var(--tw-shadow-color),inset_0_-1px_0_0_var(--tw-shadow-color)] !shadow-border transition-colors',
         },
       },
+      isOpenState: {
+        false: {
+          itemHeader: 'background-transition hover:bg-background',
+        },
+      },
       isOpen: {
         true: {
-          content: 'block border-border p-3',
+          content: 'visible block border-border p-3',
         },
         false: {
-          base: '',
-          itemHeader: 'background-transition hover:bg-background',
+          content: 'hidden',
         },
       },
       isDisabled: {
@@ -45,13 +49,13 @@ export const styles = tv(
     compoundSlots: [
       {
         slots: ['indicator'],
-        isOpen: true,
+        isOpenState: true,
         className: '-rotate-90',
       },
       {
         slots: ['itemHeader'],
         look: 'lego',
-        isOpen: true,
+        isOpenState: true,
         className: 'border-l-hero',
       },
       {

package/src/components/autocomplete/autocomplete.component.tsx

@@ -41,13 +41,15 @@ function Autocomplete<T extends object>(
     className,
     width = 'full',
     loadingState,
+    comboBoxState,
     ...props
   }: AutocompleteProps<T>,
   ref: ForwardedRef<HTMLInputElement>,
 ) {
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { contains } = useFilter({ sensitivity: 'base' });
-  const state = useComboBoxState({ isDisabled, ...props, defaultFilter: contains });
+  const internalState = useComboBoxState({ isDisabled, ...props, defaultFilter: contains });
+  const state = comboBoxState ?? internalState;
   const { isFocusVisible, focusProps } = useFocusRing();
   const { isFocusVisible: isInputFocusVisible, focusProps: inputFocusProps } = useFocusRing();
   const inputRef = React.useRef<HTMLInputElement>(null);

package/src/components/autocomplete/autocomplete.types.ts

@@ -1,6 +1,7 @@
 import { type ComboBoxProps } from '@react-types/combobox';
 import { type AriaLabelingProps } from '@react-types/shared';
 import { type ReactNode } from 'react';
+import { ComboBoxState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 
 import { HintProps, InputProps } from '../index.js';
@@ -63,5 +64,10 @@ export type AutocompleteProps<T extends object> = {
    * Width of autocomplete
    */
   width?: InputProps['width'];
+  /**
+   * Pass through comboBox state from consuming component. If not specified,
+   * will be handled internally.
+   */
+  comboBoxState?: ComboBoxState<T>;
 } & ComboBoxProps<T> &
   AriaLabelingProps;

package/src/components/date-picker-beta/components/calendar/calendar.component.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { CalendarDate, createCalendar } from '@internationalized/date';
+import React, { ChangeEvent, useCallback, useMemo, useRef } from 'react';
+import { useButton, useCalendar, useLocale } from 'react-aria';
+import { useCalendarState } from 'react-stately';
+
+import { Button } from '../../../button/index.js';
+import { Circle } from '../../../circle/circle.component.js';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
+
+import { type CalendarProps } from './calendar.types.js';
+import { CalendarGrid } from './components/calendar-grid/calendar-grid.component.js';
+import { Select } from './components/select/select.component.js';
+
+const MONTHS = Array.from({ length: 12 }, (_, i) => {
+  const date = new Date(2020, i, 1); // Year doesn't matter, use 2020 as a common year
+  const monthName = new Intl.DateTimeFormat('en', { month: 'short' }).format(date);
+
+  return {
+    value: i + 1,
+    label: monthName,
+  };
+});
+
+const YEAR_OFFSET = 10;
+
+/**
+ * @private
+ */
+export function Calendar({ value, ...props }: CalendarProps) {
+  const { locale } = useLocale();
+  const refPrevButton = useRef(null);
+  const refNextButton = useRef(null);
+  const state = useCalendarState({
+    createCalendar,
+    ...props,
+    value,
+    locale,
+  });
+
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar({ value, ...props }, state);
+  const { buttonProps: newPrevButtonProps } = useButton(prevButtonProps, refPrevButton);
+  const { buttonProps: newNextButtonProps } = useButton(nextButtonProps, refNextButton);
+
+  const years = useMemo(() => {
+    const beginning = state.focusedDate.year - YEAR_OFFSET;
+    return Array.from({ length: 20 }, (_, i) => {
+      return {
+        value: beginning + i,
+        label: beginning + i,
+      };
+    });
+  }, [state.focusedDate.year]);
+
+  const handleMonthChange = useCallback(
+    (ev: ChangeEvent<HTMLSelectElement>) => {
+      state.setFocusedDate(new CalendarDate(state.focusedDate.year, +ev.target.value, state.focusedDate.day));
+    },
+    [state],
+  );
+
+  const handleYearChange = useCallback(
+    (ev: ChangeEvent<HTMLSelectElement>) => {
+      state.setFocusedDate(new CalendarDate(+ev.target.value, state.focusedDate.month, state.focusedDate.day));
+    },
+    [state],
+  );
+
+  return (
+    <div {...calendarProps}>
+      <div className="flex items-center justify-between">
+        <div className="flex gap-3">
+          <Select onChange={handleMonthChange} value={state.visibleRange.start.month}>
+            {MONTHS.map(month => (
+              <option key={month.value} value={month.value}>
+                {month.label}
+              </option>
+            ))}
+          </Select>
+
+          <Select onChange={handleYearChange} value={state.visibleRange.start.year}>
+            {years.map(year => (
+              <option key={year.value} value={year.value}>
+                {year.label}
+              </option>
+            ))}
+          </Select>
+        </div>
+        <div className="flex gap-2">
+          <Button look="unstyled" {...newPrevButtonProps}>
+            <Circle className="bg-light">
+              <ArrowLeftIcon size="small" color="primary" />
+            </Circle>
+          </Button>
+          <Button look="unstyled" {...newNextButtonProps}>
+            <Circle className="bg-light">
+              <ArrowRightIcon size="small" color="primary" />
+            </Circle>
+          </Button>
+        </div>
+      </div>
+      <CalendarGrid state={state} firstDayOfWeek={props.firstDayOfWeek} />
+    </div>
+  );
+}

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

@@ -0,0 +1,3 @@
+import { AriaCalendarProps, DateValue } from 'react-aria';
+
+export type CalendarProps<T extends DateValue = DateValue> = AriaCalendarProps<T>;

package/src/components/date-picker-beta/components/calendar/components/calendar-cell/calendar-cell.component.tsx

@@ -0,0 +1,42 @@
+'use client';
+import React, { useRef } from 'react';
+import { useCalendarCell, useFocusVisible } from 'react-aria';
+
+import { styles as calendarCellStyles } from './calendar-cell.styles.js';
+import { CalendarCellProps } from './calendar-cell.types.js';
+
+/**
+ * @private
+ */
+export function CalendarCell({ state, date }: CalendarCellProps) {
+  const ref = useRef(null);
+  const { isFocusVisible } = useFocusVisible();
+  const {
+    cellProps,
+    buttonProps,
+    isSelected,
+    isOutsideVisibleRange,
+    isDisabled,
+    isUnavailable,
+    formattedDate,
+    isFocused,
+  } = useCalendarCell({ date }, state, ref);
+  const isToday = buttonProps['aria-label']?.indexOf('Today') !== -1;
+  const styles = calendarCellStyles({
+    isSelected,
+    isFocused: isFocused && isFocusVisible,
+    isToday,
+    isDisabled,
+    isUnavailable,
+  });
+
+  return (
+    <td {...cellProps}>
+      <div className={styles.base()}>
+        <div {...buttonProps} ref={ref} hidden={isOutsideVisibleRange} className={styles.text()}>
+          {formattedDate}
+        </div>
+      </div>
+    </td>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    base: 'flex items-center justify-center',
+    text: 'size-6 rounded-full border border-white text-center leading-[2.125rem]',
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        text: 'cursor-default line-through opacity-50',
+      },
+      false: {
+        text: 'hover:bg-primary/5',
+      },
+    },
+    isUnavailable: {
+      true: {
+        text: 'cursor-default line-through opacity-50',
+      },
+      false: {},
+    },
+    isFocused: {
+      true: {
+        text: '!outline-offset-0 focus-outline',
+      },
+    },
+    isToday: {
+      true: {
+        text: 'border-primary bg-primary/5',
+      },
+    },
+    isSelected: {
+      true: {
+        text: 'bg-primary text-white hover:bg-primary',
+      },
+      false: 'bg-white',
+    },
+  },
+});

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

@@ -0,0 +1,8 @@
+import { AriaCalendarCellProps } from 'react-aria';
+import { CalendarState, RangeCalendarState } from 'react-stately';
+
+// import { styles } from './calendar-Cell.styles.js';
+
+// type Variants = VariantProps<typeof styles>;
+
+export type CalendarCellProps = AriaCalendarCellProps & { state: CalendarState | RangeCalendarState };

package/src/components/date-picker-beta/components/calendar/components/calendar-grid/calendar-grid.component.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useCalendarGrid } from 'react-aria';
+
+import { CalendarCell } from '../calendar-cell/calendar-cell.component.js';
+
+import { CalendarGridProps } from './calendar-grid.types.js';
+
+/**
+ * @private
+ */
+export function CalendarGrid({ state, weekdayStyle = 'short', ...props }: CalendarGridProps) {
+  const { gridProps, headerProps, weekDays, weeksInMonth } = useCalendarGrid({ weekdayStyle, ...props }, state);
+
+  return (
+    <table className="w-full" {...gridProps}>
+      <thead {...headerProps}>
+        <tr>
+          {weekDays.map((day, index) => (
+            <th key={index} className="text-text size-6 text-center text-[0.75rem] font-semibold leading-9">
+              {day.toUpperCase().slice(0, 2)}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {[...new Array(weeksInMonth).keys()].map(weekIndex => (
+          <tr key={weekIndex}>
+            {state
+              .getDatesInWeek(weekIndex)
+              .map((date, i) => (date ? <CalendarCell key={i} state={state} date={date} /> : <td key={i} />))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

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

@@ -0,0 +1,4 @@
+import { AriaCalendarGridProps } from 'react-aria';
+import { CalendarState, RangeCalendarState } from 'react-stately';
+
+export type CalendarGridProps = AriaCalendarGridProps & { state: CalendarState | RangeCalendarState };

package/src/components/date-picker-beta/components/calendar/components/select/select.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useFocusRing } from 'react-aria';
+
+import { ExpandMoreIcon } from '../../../../../icon/index.js';
+
+import { styles as selectStyles } from './select.styles.js';
+import { SelectProps } from './select.types.js';
+
+/**
+ * @private
+ */
+export function Select({ ...props }: SelectProps) {
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = selectStyles({ isFocusVisible });
+  return (
+    <div className="relative">
+      <select {...focusProps} className={styles.base({ className: props.className })} {...props} />
+      <ExpandMoreIcon color="primary" size="small" className={styles.caret()} />
+    </div>
+  );
+}

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

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

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

package/src/components/date-picker-beta/components/date-field/components/date-segment/date-segment.component.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import React, { useRef } from 'react';
+import { mergeProps, useDateSegment, useFocusRing } from 'react-aria';
+
+import { styles as dateSegmentStyles } from './date-segment.styles.js';
+import { DateSegmentProps } from './date-segment.types.js';
+
+/**
+ * @private
+ */
+export function DateSegment({ segment, state, separator, ...props }: DateSegmentProps) {
+  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 (
+    <span {...props} {...mergeProps(focusProps, segmentProps)} ref={ref} className={styles}>
+      {segment.type === 'literal' ? separator || segment.text : segment.text}
+    </span>
+  );
+}

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

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

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

package/src/components/date-picker-beta/components/date-field/date-field.component.tsx

@@ -0,0 +1,32 @@
+'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';
+import { type DateFieldProps } from './date-field.types.js';
+
+/**
+ * @private
+ */
+export function DateField({ separator, ...props }: DateFieldProps) {
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar,
+  });
+
+  const ref = useRef(null);
+  const { fieldProps } = useDateField(props, state, ref);
+
+  return (
+    <div {...fieldProps} ref={ref}>
+      {state.segments.map((segment, i) => (
+        <DateSegment separator={separator} key={i} segment={segment} state={state} />
+      ))}
+    </div>
+  );
+}

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

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

package/src/components/date-picker-beta/components/dialog/dialog.component.tsx

@@ -0,0 +1,23 @@
+import React, { useRef } from 'react';
+import { useDialog } from 'react-aria';
+
+import { DialogProps } from './dialog.types.js';
+
+/**
+ * @private
+ */
+export function Dialog({ title, children, ...props }: DialogProps) {
+  const ref = useRef(null);
+  const { dialogProps, titleProps } = useDialog(props, ref);
+
+  return (
+    <div {...dialogProps} ref={ref} className="p-3">
+      {title && (
+        <h3 {...titleProps} style={{ marginTop: 0 }}>
+          {title}
+        </h3>
+      )}
+      {children}
+    </div>
+  );
+}

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

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

package/src/components/date-picker-beta/components/popover/popover.component.tsx

@@ -0,0 +1,34 @@
+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';
+import { PopoverProps } from './popover.types.js';
+
+/**
+ * @private
+ */
+export function Popover({ state, portalContainer, children, showAsBottomSheet, ...props }: PopoverProps) {
+  const ref = useRef(null);
+  const { popoverProps, underlayProps } = usePopover(
+    { ...props, popoverRef: ref, containerPadding: 0, offset: 0 },
+    state,
+  );
+  const styles = popoverStyles({ showAsBottomSheet });
+
+  return (
+    <Overlay portalContainer={portalContainer}>
+      <div {...underlayProps} className={styles.underlay()} />
+      <div {...popoverProps} ref={ref} className={styles.popover()}>
+        <div className={styles.header()}>
+          <p className={styles.headerLabel()}>Choose a date</p>
+          <button className={styles.closeButton()} onClick={() => state.close()} aria-label="Close window">
+            <CloseIcon color="primary" className="block" size="small" />
+          </button>
+        </div>
+        {children}
+      </div>
+    </Overlay>
+  );
+}