@westpac/ui 0.50.3 → 0.53.1

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/select/components/index.ts

@@ -0,0 +1,2 @@
+export { SelectWithTooltip } from './select-with-tooltip/select-with-tooltip.component.js';
+export { StyledSelect } from './styled-select/styled-select.component.js';

package/src/components/select/components/select-with-tooltip/select-with-tooltip.component.tsx

@@ -0,0 +1,31 @@
+import React, { ForwardedRef, forwardRef, useState } from 'react';
+
+import { Tooltip } from '../../../tooltip/index.js';
+import { SelectProps } from '../../select.types.js';
+import { StyledSelect } from '../styled-select/styled-select.component.js';
+
+import { styles } from './select-with-tooltip.styles.js';
+
+function BaseSelectWithTooltip(
+  { width = 'auto', children, onChange, ...props }: SelectProps,
+  ref: ForwardedRef<HTMLSelectElement>,
+) {
+  const [selectedOption, setSelectedOption] = useState('');
+  return (
+    <Tooltip tooltip={selectedOption} className={styles({ width })}>
+      <StyledSelect
+        ref={ref}
+        onChange={e => {
+          setSelectedOption(e.target.options[e.target.selectedIndex].text);
+          onChange?.(e);
+        }}
+        width={width}
+        {...props}
+      >
+        {children}
+      </StyledSelect>
+    </Tooltip>
+  );
+}
+
+export const SelectWithTooltip = forwardRef<HTMLSelectElement, SelectProps>(BaseSelectWithTooltip);

package/src/components/select/components/select-with-tooltip/select-with-tooltip.styles.ts

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: '',
+    variants: {
+      width: {
+        auto: 'flex-1',
+        full: 'w-full flex-1',
+        1: 'w-[1.81ex]',
+        2: 'w-[3.62ex]',
+        3: 'w-[5.43ex]',
+        4: 'w-[7.24ex]',
+        5: 'w-[9.05ex]',
+        6: 'w-[10.86ex]',
+        7: 'w-[12.67ex]',
+        8: 'w-[14.48ex]',
+        9: 'w-[16.29ex]',
+        10: 'w-[18.1ex]',
+        20: 'w-[36.2ex]',
+        30: 'w-[54.3ex]',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/select/components/styled-select/styled-select.component.tsx

@@ -0,0 +1,25 @@
+import React, { ForwardedRef, forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
+
+import { type SelectProps } from '../../select.types.js';
+
+import { styles } from './styled-select.styles.js';
+
+function BaseSelect(
+  { className, size = 'medium', invalid = false, width = 'auto', children, ...props }: SelectProps,
+  ref: ForwardedRef<HTMLSelectElement>,
+) {
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+
+  return (
+    <select
+      ref={ref}
+      className={styles({ className, size, invalid, isFocused, isFocusVisible, width })}
+      {...mergeProps(props, focusProps)}
+    >
+      {children}
+    </select>
+  );
+}
+
+export const StyledSelect = forwardRef<HTMLSelectElement, SelectProps>(BaseSelect);

package/src/components/select/components/styled-select/styled-select.styles.ts

@@ -0,0 +1,42 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'form-control overflow-hidden overflow-ellipsis whitespace-nowrap bg-no-repeat select-caret disabled:form-control-disabled group-first/add-on-before:!rounded-l group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:!rounded-r group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+    variants: {
+      size: {
+        small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
+        medium: 'form-control-medium bg-[right_0.75rem_center] pr-[calc(0.5rem+14px+0.75rem)]',
+        large: 'form-control-large bg-[right_0.9375rem_center] pr-[calc(0.5rem+14px+0.9375rem)]',
+        xlarge: 'form-control-xlarge bg-[right_1.125rem_center] pr-[calc(0.5rem+14px+1.125rem)]',
+      },
+      invalid: {
+        true: 'border-danger',
+        false: 'border-borderDark',
+      },
+      isFocusVisible: {
+        true: 'focus-outline',
+      },
+      isFocused: {
+        true: 'outline-none',
+      },
+      width: {
+        auto: 'flex-1',
+        full: 'w-full flex-1',
+        1: 'box-content w-[1.81ex]',
+        2: 'box-content w-[3.62ex]',
+        3: 'box-content w-[5.43ex]',
+        4: 'box-content w-[7.24ex]',
+        5: 'box-content w-[9.05ex]',
+        6: 'box-content w-[10.86ex]',
+        7: 'box-content w-[12.67ex]',
+        8: 'box-content w-[14.48ex]',
+        9: 'box-content w-[16.29ex]',
+        10: 'box-content w-[18.1ex]',
+        20: 'box-content w-[36.2ex]',
+        30: 'box-content w-[54.3ex]',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/select/select.component.tsx

@@ -1,24 +1,19 @@
 'use client';
 
 import React, { ForwardedRef, forwardRef } from 'react';
-import { mergeProps, useFocusRing } from 'react-aria';
 
-import { styles } from './select.styles.js';
+import { SelectWithTooltip, StyledSelect } from './components/index.js';
 import { type SelectProps } from './select.types.js';
 
-function BaseSelect(
-  { className, size = 'medium', invalid = false, width = 'auto', children, ...props }: SelectProps,
-  ref: ForwardedRef<HTMLSelectElement>,
-) {
-  const { isFocused, isFocusVisible, focusProps } = useFocusRing();
-  return (
-    <select
-      ref={ref}
-      className={styles({ className, size, invalid, isFocused, isFocusVisible, width })}
-      {...mergeProps(props, focusProps)}
-    >
+function BaseSelect({ children, enableTooltip, ...props }: SelectProps, ref: ForwardedRef<HTMLSelectElement>) {
+  return enableTooltip ? (
+    <SelectWithTooltip ref={ref} {...props}>
       {children}
-    </select>
+    </SelectWithTooltip>
+  ) : (
+    <StyledSelect ref={ref} {...props}>
+      {children}
+    </StyledSelect>
   );
 }
 

package/src/components/select/select.styles.ts

@@ -2,7 +2,10 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled group-first/add-on-before:!rounded-l group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:!rounded-r group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+    slots: {
+      base: 'form-control overflow-hidden overflow-ellipsis whitespace-nowrap bg-no-repeat select-caret disabled:form-control-disabled group-first/add-on-before:!rounded-l group-first/add-on-before:rounded-r-none group-first/add-on-before:!border-x group-last/add-on-after:!rounded-r group-last/add-on-after:rounded-l-none group-last/add-on-after:!border-x group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+      tooltip: '',
+    },
     variants: {
       size: {
         small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
@@ -21,20 +24,20 @@ export const styles = tv(
         true: 'outline-none',
       },
       width: {
-        auto: 'flex-1',
-        full: 'w-full flex-1',
-        1: 'box-content w-[1.81ex]',
-        2: 'box-content w-[3.62ex]',
-        3: 'box-content w-[5.43ex]',
-        4: 'box-content w-[7.24ex]',
-        5: 'box-content w-[9.05ex]',
-        6: 'box-content w-[10.86ex]',
-        7: 'box-content w-[12.67ex]',
-        8: 'box-content w-[14.48ex]',
-        9: 'box-content w-[16.29ex]',
-        10: 'box-content w-[18.1ex]',
-        20: 'box-content w-[36.2ex]',
-        30: 'box-content w-[54.3ex]',
+        auto: { base: 'flex-1', tooltip: 'flex-1' },
+        full: { base: 'w-full flex-1', tooltip: 'w-full flex-1' },
+        1: { base: 'box-content w-[1.81ex]', tooltip: 'w-[1.81ex]' },
+        2: { base: 'box-content w-[3.62ex]', tooltip: 'w-[3.62ex]' },
+        3: { base: 'box-content w-[5.43ex]', tooltip: 'w-[5.43ex]' },
+        4: { base: 'box-content w-[7.24ex]', tooltip: 'w-[7.24ex]' },
+        5: { base: 'box-content w-[9.05ex]', tooltip: 'w-[9.05ex]' },
+        6: { base: 'box-content w-[10.86ex]', tooltip: 'w-[10.86ex]' },
+        7: { base: 'box-content w-[12.67ex]', tooltip: 'w-[12.67ex]' },
+        8: { base: 'box-content w-[14.48ex]', tooltip: 'w-[14.48ex]' },
+        9: { base: 'box-content w-[16.29ex]', tooltip: 'w-[16.29ex]' },
+        10: { base: 'box-content w-[18.1ex]', tooltip: 'w-[18.1ex]' },
+        20: { base: 'box-content w-[36.2ex]', tooltip: 'w-[36.2ex]' },
+        30: { base: 'box-content w-[54.3ex]', tooltip: 'w-[54.3ex]' },
       },
     },
   },

package/src/components/select/select.types.ts

@@ -6,6 +6,12 @@ import { styles } from './select.styles.js';
 type Variants = VariantProps<typeof styles>;
 
 export type SelectProps = {
+  /**
+   * Whether to set the title for the select to the currently selected option for use with truncation.
+   * Optional for accessibility reasons as it should only be enabled when required. Will not be read by screen readers.
+   * @default false
+   */
+  enableTooltip?: boolean;
   /**
    * Whether select is invalid
    * @default false

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/tooltip/components/tooltip-content/tooltip-content.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './tooltip-content.styles.js';
+import { TooltipContentProps } from './tooltip-content.types.js';
+
+export function TooltipContent({ children, id }: TooltipContentProps) {
+  return children ? (
+    <span className={styles()} role="tooltip" id={id}>
+      {children}
+    </span>
+  ) : null;
+}

package/src/components/tooltip/components/tooltip-content/tooltip-content.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text',
+});

package/src/components/tooltip/components/tooltip-content/tooltip-content.types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export type TooltipContentProps = {
+  children?: ReactNode;
+  id: string;
+};

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip } from './tooltip.component.js';

package/src/components/tooltip/tooltip.component.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { mergeProps, useHover, useFocusRing } from 'react-aria';
+
+import { TooltipContent } from './components/tooltip-content/tooltip-content.component.js';
+import { styles } from './tooltip.styles.js';
+import { TooltipProps } from './tooltip.types.js';
+
+// TODO: Complete component/replace with a library that works (react-tooltip if can find a way to remove aria-described by for select)
+export function Tooltip({ children, tooltip, id, className }: TooltipProps) {
+  const localId = useId();
+  const [isOpen, setIsOpen] = useState(false);
+  const tooltipWaitTime = useRef<NodeJS.Timeout | null>(null);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && isOpen) {
+      setIsOpen(false);
+    }
+  };
+  const { hoverProps, isHovered } = useHover({});
+  const { isFocusVisible, focusProps } = useFocusRing({ within: true });
+
+  const startTimer = useCallback(() => {
+    tooltipWaitTime.current = setTimeout(() => {
+      setIsOpen(true);
+    }, 1000);
+  }, []);
+
+  const stopTimer = useCallback(() => {
+    if (tooltipWaitTime.current) {
+      clearTimeout(tooltipWaitTime.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    setIsOpen(isFocusVisible);
+  }, [isFocusVisible]);
+
+  useEffect(() => {
+    if (isHovered && !isOpen) startTimer();
+    if (!isHovered) setIsOpen(false);
+
+    return () => stopTimer();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isHovered]);
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  return (
+    <span {...mergeProps(hoverProps, focusProps)} className={styles({ className })}>
+      {children}
+      {isOpen && <TooltipContent id={id ?? localId}>{tooltip}</TooltipContent>}
+    </span>
+  );
+}

package/src/components/tooltip/tooltip.styles.ts

@@ -0,0 +1,3 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({ base: 'relative' });

package/src/components/tooltip/tooltip.types.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export type TooltipProps = {
+  children: ReactNode;
+  tooltip: string;
+  id?: string;
+  className?: string;
+};

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',