@westpac/ui 0.50.0 → 0.50.3

package/dist/hook/breakpoints.hook.js

@@ -1,21 +1,70 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { create } from 'zustand';
 import { BREAKPOINTS } from '../tailwind/constants/index.js';
 function checkBreakpoint() {
+    if (typeof window === 'undefined') {
+        return 'initial';
+    }
     const breakpointsAsArray = Object.entries(BREAKPOINTS).reverse();
     const breakpoint = breakpointsAsArray.find(([, value])=>window.matchMedia(`(min-width: ${value})`).matches);
     return breakpoint ? breakpoint[0] : 'initial';
 }
+const BREAKPOINTS_ENTRIES = Object.entries(BREAKPOINTS);
+const BREAKPOINTS_MEDIA = 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})`;
+    })();
+    return {
+        ...acc,
+        [key]: finalValue
+    };
+}, {
+    initial: `(max-width: ${+BREAKPOINTS_ENTRIES[0][1].replace('px', '') - 1}px)`
+});
+const useBreakpointStore = create()((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)=>{
+                    if (e.matches) {
+                        set({
+                            breakpoint: label
+                        });
+                    }
+                };
+                mq.addEventListener('change', listener);
+                return {
+                    mq,
+                    listener
+                };
+            });
+            set({
+                mediaQueryListeners: listeners,
+                initialised: true,
+                breakpoint: checkBreakpoint()
+            });
+        },
+        removeListeners: ()=>{
+            var _get_mediaQueryListeners;
+            (_get_mediaQueryListeners = get().mediaQueryListeners) === null || _get_mediaQueryListeners === void 0 ? void 0 : _get_mediaQueryListeners.forEach(({ mq, listener })=>{
+                mq.removeEventListener('change', listener);
+            });
+        }
+    }));
 export function useBreakpoint() {
-    const [breakpoint, setBreakpoint] = useState(checkBreakpoint());
+    const { breakpoint, ensureInitialized: initIfNotInitialised } = useBreakpointStore();
     useEffect(()=>{
-        const listener = ()=>{
-            const breakpoint = checkBreakpoint();
-            setBreakpoint(breakpoint);
-        };
-        window.addEventListener('resize', listener);
-        return ()=>{
-            window.removeEventListener('resize', listener);
-        };
+        initIfNotInitialised();
     }, []);
     return breakpoint;
 }

package/dist/hook/index.d.ts

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

package/dist/hook/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.50.0",
+  "version": "0.50.3",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -270,7 +270,8 @@
     "lodash.throttle": "~4.1.1",
     "motion": "~12.23.12",
     "react-aria": "~3.41.1",
-    "react-stately": "~3.39.0"
+    "react-stately": "~3.39.0",
+    "zustand": "~4.5.4"
   },
   "overrides": {
     "react-aria": {

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,33 +80,18 @@ export function AccordionItem<T = HTMLElement>({
       </h3>
       <div {...regionProps}>
         <LazyMotion features={loadAnimations}>
-          <AnimatePresence initial={false}>
-            <m.div
-              className="overflow-hidden"
-              initial={{
-                height: 0,
-              }}
-              animate={{
-                height: 'auto',
-              }}
-              exit={{
-                height: 0,
+          <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();
               }}
-              transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }}
-              key={`${item.index}-${isOpen}`}
             >
-              <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>
+              {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/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/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';