@westpac/ui 0.48.0 → 0.50.0

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

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'] },
+);