@westpac/ui 0.52.0 → 0.53.2

package/src/components/filter/components/filter-buttons/filter-buttons.styles.ts

@@ -2,17 +2,17 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'relative flex justify-start',
-    buttonList: 'flex w-full touch-pan-x gap-1 overflow-x-auto overflow-y-visible whitespace-nowrap',
-    scrollButton: 'absolute rounded-none contrast-more:bg-black',
+    base: 'relative -left-1 flex justify-start', // left positioning for padding on buttons to show focus ring but be aligned to input
+    buttonList: 'flex w-full touch-pan-x gap-1 overflow-y-visible overflow-x-scroll whitespace-nowrap p-1',
+    scrollButton: 'absolute inset-y-0 h-auto rounded-none contrast-more:bg-black',
   },
   variants: {
     position: {
       left: {
-        scrollButton: '-left-1 bg-[linear-gradient(90deg,_#fff_66%,_transparent)] pl-0',
+        scrollButton: 'left-0 bg-[linear-gradient(90deg,_#fff_66%,_transparent)] pl-0',
       },
       right: {
-        scrollButton: '-right-1 bg-[linear-gradient(270deg,_#fff_66%,_transparent)] pr-0',
+        scrollButton: '-right-2 bg-[linear-gradient(270deg,_#fff_66%,_transparent)] pr-0',
       },
     },
     hidden: {

package/src/components/filter/filter.component.tsx

@@ -4,7 +4,7 @@ import { type FilterProps } from './filter.types.js';
 
 export function Filter({ children, ...props }: FilterProps) {
   return (
-    <div {...props} className="flex flex-col gap-3">
+    <div {...props} className="flex flex-col gap-2">
       {children}
     </div>
   );

package/src/components/flexi-cell/components/flexi-cell-body/flexi-cell-body.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex flex-1 flex-col gap-1 overflow-hidden',
+    base: 'flex flex-1 flex-col gap-1 overflow-x-clip',
     variants: {
       isLink: {
         true: 'group/dualaction',

package/src/components/flexi-cell/flexi-cell.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative flex bg-white transition-colors',
+      base: 'relative flex bg-white transition-colors [&_:focus-visible]:focus-outline',
       topBadgeWrapper: 'absolute right-[-1px] top-[-1px]',
       topBadge: 'rounded-br-none rounded-tl-none',
     },

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

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative overflow-hidden border-t border-t-border',
+      base: 'relative overflow-hidden border-t border-t-border [&_:focus-visible]:focus-outline',
       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',

package/src/components/header/header.styles.ts

@@ -12,7 +12,7 @@ export const styles = tv(
       leftContent: 'flex items-center',
       leftButton:
         'my-1 rounded-none border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-7 sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-10',
-      rightContent: 'ml-auto flex items-center',
+      rightContent: 'ml-auto flex items-center [&_:focus-visible]:focus-outline',
     },
     variants: {
       logoCenter: {

package/src/components/input-group/components/input-group-add-ons/input-group-add-ons.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'inset-y-0',
+    base: 'inset-y-0 focus-within:z-20',
     variants: {
       isInset: {
         true: 'absolute',
@@ -17,12 +17,12 @@ export const styles = tv(
       {
         isInset: true,
         position: 'before',
-        className: 'left-0',
+        className: 'left-0 z-[11]',
       },
       {
         isInset: true,
         position: 'after',
-        className: 'right-0',
+        className: 'right-0 z-[11]',
       },
     ],
   },

package/src/components/input-group/input-group.component.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { clsx } from 'clsx';
 import React, {
   Attributes,
   Children,
@@ -96,6 +97,8 @@ export function InputGroup({
           'aria-describedby': ariaDescribedBy || ariaDescribedByValue,
           'aria-label': ariaLabel,
           ...(width !== 'full' ? { width: width } : {}),
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-argument
+          className: clsx(child.props.className, 'focus:z-10'), // for focus ring visibility
         } as Partial<unknown> & Attributes);
       }
     });

package/src/components/modal/components/modal-dialog/modal-dialog.styles.ts

@@ -32,7 +32,7 @@ export const styles = tv(
         },
       },
       isFocusVisible: {
-        true: { close: 'focus-outline' },
+        true: { close: '!outline-offset-[-3px] focus-outline' },
         false: { close: 'outline-none' },
       },
     },

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AriaButtonOptions, mergeProps, useButton, useFocusRing } from 'react-aria';
 
 import { styles } from './pagination-item.styles.js';
 import { type PaginationItemProps } from './pagination-item.types.js';
@@ -16,10 +17,16 @@ export function PaginationItem({
   disabled = false,
   ...props
 }: PaginationItemProps) {
+  const ref = React.useRef(null);
+  const { focusProps, isFocusVisible } = useFocusRing();
+  const { buttonProps } = useButton(props as AriaButtonOptions<'button'>, ref);
+
+  const finalButtonProps = mergeProps(focusProps, buttonProps);
+
   return (
     <Tag
-      className={styles({ className, firstItem, lastItem, active, disabled })}
-      {...props}
+      className={styles({ className, firstItem, lastItem, active, disabled, isFocusVisible })}
+      {...finalButtonProps}
       disabled={disabled}
       aria-disabled={disabled ? 'true' : 'false'}
       aria-current={active ? 'page' : undefined}

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

@@ -4,6 +4,10 @@ export const styles = tv(
   {
     base: 'typography-body-10 relative block min-w-7 border border-border px-2 py-1.5 text-center text-text',
     variants: {
+      isFocusVisible: {
+        true: 'z-10 focus-outline',
+        false: '',
+      },
       firstItem: {
         true: 'rounded-l',
         false: 'ml-[-1px]',
@@ -13,7 +17,7 @@ export const styles = tv(
         false: '',
       },
       active: {
-        true: 'z-10 border-hero bg-hero text-white',
+        true: 'border-hero bg-hero text-white',
         false: 'hover:bg-light',
       },
       disabled: {

package/src/components/pagination/components/pagination-presentational/pagination-presentational.styles.ts

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'flex flex-col items-center',
-      ul: 'flex overflow-hidden',
+      ul: 'flex',
       emptyItem:
         'typography-body-10 relative block min-w-7 cursor-default border-y border-border px-2 py-1.5 text-center text-text',
     },

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

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'border-0 border-t border-border bg-light px-2 py-[0.625rem] sm:px-4',
+      base: 'border-0 border-t border-border bg-light px-2 py-[0.625rem] sm:px-4 [&_:focus-visible]:focus-outline',
     },
     variants: {},
   },

package/src/components/panel/panel.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'group/panel overflow-hidden rounded border border-hero',
+      base: 'group/panel overflow-hidden rounded border border-hero [&_:focus-visible]:focus-outline',
       header: 'px-2 py-[0.625rem] sm:px-4',
     },
     variants: {

package/src/components/popover/components/panel/panel.styles.ts

@@ -11,8 +11,8 @@ export const styles = tv(
       `,
       closeBtn: 'absolute right-1 top-1 h-3 p-0 hover:opacity-80',
       content: 'w-[17.625rem] rounded-[3px] bg-white py-4 pl-3 pr-5',
-      heading: 'typography-body-9 mb-2 font-medium text-text',
-      body: 'typography-body-10 text-text',
+      heading: 'typography-body-9 mb-2 font-medium text-text focus-visible:focus-outline',
+      body: 'typography-body-10 text-text focus-visible:focus-outline',
     },
     variants: {
       placement: {

package/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.component.tsx

@@ -1,5 +1,5 @@
-import { AnimatePresence, LazyMotion, m } from 'motion/react';
-import React, { useId, useMemo } from 'react';
+import { LazyMotion, m, useAnimate } from 'motion/react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { useFocusRing } from 'react-aria';
 
 import { Circle, VisuallyHidden } from '../../../index.js';
@@ -23,6 +23,8 @@ export function ProgressRopeGroupStep({
   onToggle,
   tag: Tag,
 }: ProgressRopeGroupStepProps) {
+  // Handling expanding animation this way for focus ring on steps
+  const [scope, animate] = useAnimate();
   const id = useId();
   const stepsContainerID = `progress-rope-group-steps-container-${id}`;
 
@@ -60,6 +62,38 @@ export function ProgressRopeGroupStep({
   }, [current, visited]);
 
   const styles = progressRopeGroupStyles({ firstItem, state, isFocusVisible });
+  const [overflowVisible, setOverflowVisible] = useState(false);
+
+  useEffect(() => {
+    // Animates expanding/collapsing steps
+    if (opened) {
+      animate(
+        scope.current,
+        { height: 'auto' },
+        {
+          duration: 0.2,
+          ease: 'easeInOut',
+          onComplete: () => {
+            setOverflowVisible(true);
+          },
+        },
+      );
+    } else {
+      animate(
+        scope.current,
+        { height: 0 },
+        {
+          duration: 0.2,
+          ease: 'easeInOut',
+          onPlay: () => {
+            setOverflowVisible(false);
+          },
+        },
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [opened]);
+
   return (
     <Tag>
       <button
@@ -74,42 +108,32 @@ export function ProgressRopeGroupStep({
         <VisuallyHidden>{visuallyHiddenMessage}</VisuallyHidden>
       </button>
       <LazyMotion features={loadAnimations}>
-        <AnimatePresence initial={false}>
-          {opened && (
-            <m.div
-              initial={{
-                height: 0,
-                overflow: 'hidden',
-              }}
-              animate={{
-                height: 'auto',
-              }}
-              exit={{
-                height: 0,
-                overflow: 'hidden',
-              }}
-              transition={{ duration: 0.2, ease: 'easeInOut' }}
-            >
-              <ol className={styles.stepsWrapper({})} id={stepsContainerID} aria-hidden={!opened}>
-                {steps.map((step, index) => (
-                  <li key={step.index}>
-                    <ProgressRopeStep
-                      firstItem={index === 0}
-                      lastItemInGroup={index === steps.length - 1}
-                      size="small"
-                      onClick={(furthestVisitedStep || 0) >= step.index ? step.onClick : undefined}
-                      current={step.index === currentKey}
-                      visited={(furthestVisitedStep || 0) > step.index}
-                      furthest={furthestVisitedStep === step.index}
-                    >
-                      {step.text}
-                    </ProgressRopeStep>
-                  </li>
-                ))}
-              </ol>
-            </m.div>
-          )}
-        </AnimatePresence>
+        <m.div
+          ref={scope}
+          initial={{ height: opened ? 'auto' : 0 }}
+          style={{
+            overflow: overflowVisible ? 'visible' : 'hidden', // to show focus ring correctly when expanded
+          }}
+        >
+          <ol className={styles.stepsWrapper({})} id={stepsContainerID} aria-hidden={!opened}>
+            {steps.map((step, index) => (
+              <li key={step.index}>
+                <ProgressRopeStep
+                  firstItem={index === 0}
+                  lastItemInGroup={index === steps.length - 1}
+                  size="small"
+                  onClick={(furthestVisitedStep || 0) >= step.index ? step.onClick : undefined}
+                  current={step.index === currentKey}
+                  visited={(furthestVisitedStep || 0) > step.index}
+                  furthest={furthestVisitedStep === step.index}
+                  tabIndex={opened ? 0 : -1} // Using hidden/visibility breaks styles
+                >
+                  {step.text}
+                </ProgressRopeStep>
+              </li>
+            ))}
+          </ol>
+        </m.div>
       </LazyMotion>
     </Tag>
   );

package/src/components/repeater/repeater.styles.ts

@@ -7,7 +7,7 @@ export const styles = tv(
       list: 'm-0 flex list-none flex-col pl-0',
       item: 'relative',
       itemIndex: 'mb-3 font-bold',
-      content: '',
+      content: '[&_:focus-visible]:focus-outline',
       removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
       footer: 'flex justify-between pt-[0.875rem]',
       addBtn: 'h-auto p-0 no-underline hover:underline',

package/src/components/table/table.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'mb-4 w-full',
+      base: 'mb-4 w-full [&_:focus-visible]:focus-outline',
       wrapper: 'max-xsl:mb-3 max-xsl:w-full max-xsl:overflow-x-auto max-xsl:overflow-y-hidden',
     },
     variants: {},

package/src/components/tabs/components/tabs-tab/tabs-tab.styles.ts

@@ -24,7 +24,7 @@ export const styles = tv(
         hero: '',
       },
       isFocusVisible: {
-        true: 'focus-outline',
+        true: 'z-10 focus-outline',
         false: 'outline-none',
       },
     },

package/src/components/tabs/components/tabs-tab-panel/tabs-tab-panel.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex-1 bg-white p-4',
+    base: 'flex-1 bg-white p-4 [&_:focus-visible]:focus-outline',
     variants: {
       look: {
         default: 'border border-border',

package/src/components/well/well.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'rounded border border-border p-2 sm:p-4',
+    base: 'rounded border border-border p-2 sm:p-4 [&_:focus-visible]:focus-outline',
     variants: {
       color: {
         light: 'bg-light',