@westpac/ui 0.59.1 → 0.59.3

package/src/components/popover/components/panel/panel.hook.tsx

@@ -30,10 +30,18 @@ const getLeftOffsetPerHorizontalPosition = (element: HTMLDivElement, screenWidth
     case 'right':
       // For smaller screens, if adjusting for right makes it go off screen on the left, adjust it to have a 16px space from the edge
       if (triggerDOMRect.left + rightOffset <= 0) {
+        // For extra small screens extra adjustment is needed e.g. <320px wide
+        if (triggerDOMRect.left + rightOffset - PANEL_WIDTH_SIZE <= -screenWidth) {
+          return rightOffset - (triggerDOMRect.left + rightOffset) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+        }
         return rightOffset - (triggerDOMRect.left + rightOffset) + 16;
       }
       return rightOffset;
     default:
+      // For extra small screens extra adjustment is needed e.g. <320px wide
+      if (triggerDOMRect?.left + PANEL_WIDTH_SIZE >= screenWidth) {
+        return -(triggerDOMRect?.left || 0) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+      }
       return 0;
   }
 };

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

@@ -14,6 +14,14 @@ export type PanelProps = {
    * Tag to render
    */
   headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+  /**
+   * onClose callback
+   */
+  onClose?: () => void;
+  /**
+   * Whether the popover is open by default
+   */
+  open?: boolean;
   /**
    * Placement of popover. If no placement provided it will default to top unless there is no space then will appear on bottom.
    */

package/src/components/popover/popover.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 
 import { Button } from '../button/index.js';
@@ -34,12 +34,15 @@ export function Popover({
   const panelId = useId();
   const styles = popoverStyles({ linkStyling });
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
+  const [isOpenDefault, setIsOpenDefault] = useState(open);
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
+      if (isOpenDefault) setIsOpenDefault(false);
       onClick(event);
       state.toggle();
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [onClick, state],
   );
 
@@ -59,7 +62,8 @@ export function Popover({
 
   useLayoutEffect(() => {
     if (open) state.setOpen(true);
-  }, [open, state]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
 
   return (
     <div className={styles.base({ className })}>
@@ -70,6 +74,7 @@ export function Popover({
         soft={soft}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
+        aria-haspopup="dialog"
         onClick={handleClick}
         ref={ref}
         size={size}
@@ -87,6 +92,15 @@ export function Popover({
           state={state}
           id={panelId}
           triggerRef={ref}
+          // Ensures popover heading doesn't get focused if default opened
+          open={isOpenDefault}
+          onClose={() => {
+            ref.current?.focus();
+            // Ensures focus handling works once popover is closed if it was default opened
+            if (isOpenDefault) {
+              setIsOpenDefault(false);
+            }
+          }}
         />
       )}
     </div>

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.tsx

@@ -58,7 +58,12 @@ function BaseSelectorCheckboxGroupOption(
       className={styles.base({})}
     >
       <VisuallyHidden>
-        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
+        <input
+          {...mergeProps(inputProps, focusProps)}
+          // override the aria-describedby to prevent screen readers from reading the content of the option twice, once from the input and once from the cell
+          aria-describedby={undefined}
+          ref={localRef}
+        />
       </VisuallyHidden>
       {children}
     </FlexiCell>

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.tsx

@@ -55,7 +55,12 @@ function BaseSelectorRadioGroupOption(
       className={styles.base({})}
     >
       <VisuallyHidden>
-        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
+        <input
+          {...mergeProps(inputProps, focusProps)}
+          // override the aria-describedby to prevent screen readers from reading the content of the option twice, once from the input and once from the cell
+          aria-describedby={undefined}
+          ref={localRef}
+        />
       </VisuallyHidden>
       {children}
     </FlexiCell>