@westpac/ui 1.0.0-canary.8 → 1.0.0

package/dist/components/popover/components/panel/panel.hook.js

@@ -1,36 +1,109 @@
-import { useMemo } from 'react';
-const PANEL_WIDTH_SIZE = 282;
-const getVerticalPositionPopover = (element)=>{
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+const PANEL_WIDTH_SIZE = 300;
+const ARROW_HEIGHT = 7;
+const getHorizontalPositionPopover = (element, screenWidth)=>{
     const triggerDOMRect = element.getBoundingClientRect();
-    const offsetLeftToCenter = (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0) / 2) * -1;
+    const offsetLeftToCenter = (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0)) / 2 * -1;
     if (triggerDOMRect.left + offsetLeftToCenter <= 0) {
         return 'left';
     }
-    if (triggerDOMRect.left + offsetLeftToCenter >= 0 && triggerDOMRect.right + offsetLeftToCenter * -1 <= window.innerWidth) {
+    if (triggerDOMRect.left + offsetLeftToCenter >= 0 && triggerDOMRect.right + offsetLeftToCenter * -1 <= screenWidth) {
         return 'center';
     }
-    if (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) >= window.innerWidth) {
+    if (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) >= screenWidth) {
         return 'right';
     }
 };
-const getLeftOffsetPerVerticalPosition = (element)=>{
+const getLeftOffsetPerHorizontalPosition = (element, screenWidth)=>{
     const triggerDOMRect = element.getBoundingClientRect();
-    switch(getVerticalPositionPopover(element)){
+    const rightOffset = (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) - screenWidth + (screenWidth - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.right) || 0))) * -1;
+    switch(getHorizontalPositionPopover(element, screenWidth)){
         case 'center':
             return (PANEL_WIDTH_SIZE - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0)) / 2 * -1;
         case 'right':
-            return (PANEL_WIDTH_SIZE + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) - window.innerWidth + (window.innerWidth - ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.right) || 0))) * -1;
+            if (triggerDOMRect.left + rightOffset <= 0) {
+                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:
+            if ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) + PANEL_WIDTH_SIZE >= screenWidth) {
+                return -((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.left) || 0) + (screenWidth - PANEL_WIDTH_SIZE) / 2;
+            }
             return 0;
     }
 };
-export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
+export function usePanel({ state, placement = 'top', triggerRef, portal, popoverRef }) {
+    if (!triggerRef.current) {
+        throw new Error('You must pass valid refs.');
+    }
+    const [screenWidth, setScreenWidth] = useState(document.documentElement.clientWidth);
+    const [localPlacement, setLocalPlacement] = useState(placement);
+    const [originalPosition, setOriginalPosition] = useState(null);
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const getVerticalPosition = useCallback(()=>{
+        if (portal instanceof Element) {
+            const portalRect = portal.getBoundingClientRect();
+            if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.top) < portalRect.top) {
+                setLocalPlacement('bottom');
+            }
+            if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.bottom) > portalRect.bottom) {
+                setLocalPlacement('top');
+            }
+            return;
+        }
+        if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.height) > trigger.top) {
+            setLocalPlacement('bottom');
+        }
+        if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.bottom) > document.documentElement.clientHeight) {
+            setLocalPlacement('top');
+        }
+        if (originalPosition && (originalPosition === null || originalPosition === void 0 ? void 0 : originalPosition.bottom) <= document.documentElement.clientHeight && placement === 'bottom') {
+            setLocalPlacement('bottom');
+        }
+    }, [
+        placement,
+        portal,
+        originalPosition,
+        trigger.top
+    ]);
+    useLayoutEffect(()=>{
+        var _popoverRef_current;
+        setOriginalPosition((popoverRef === null || popoverRef === void 0 ? void 0 : (_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.getBoundingClientRect()) || null);
+    }, [
+        popoverRef
+    ]);
+    useLayoutEffect(()=>{
+        getVerticalPosition();
+    }, [
+        getVerticalPosition
+    ]);
+    useEffect(()=>{
+        const handleResize = ()=>{
+            if (portal instanceof Element) {
+                setScreenWidth(portal.clientWidth);
+                getVerticalPosition();
+            } else {
+                setScreenWidth(document.documentElement.clientWidth);
+                getVerticalPosition();
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        return ()=>{
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [
+        portal,
+        getVerticalPosition
+    ]);
     const popoverPosition = useMemo(()=>{
         var _triggerRef_current;
         const triggerDOMRect = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getBoundingClientRect();
-        const leftOffset = triggerRef.current ? getLeftOffsetPerVerticalPosition(triggerRef.current) : 0;
+        const leftOffset = triggerRef.current ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) : 0;
         if (!portal) {
-            switch(placement){
+            switch(localPlacement){
                 case 'top':
                     return {
                         bottom: '100%',
@@ -45,7 +118,7 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
             }
         }
         const portalElement = portal;
-        switch(placement){
+        switch(localPlacement){
             case 'top':
                 return {
                     top: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.top) || 0) - portalElement.getBoundingClientRect().top}px`,
@@ -60,24 +133,28 @@ export function usePanel({ state, placement = 'bottom', triggerRef, portal }) {
                 };
         }
     }, [
-        placement,
+        localPlacement,
         portal,
         triggerRef,
-        state.isOpen
+        state.isOpen,
+        screenWidth
     ]);
     const arrowPosition = useMemo(()=>{
         var _triggerRef_current;
         const triggerDOMRect = (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.getBoundingClientRect();
-        const leftOffset = triggerRef.current ? getLeftOffsetPerVerticalPosition(triggerRef.current) * -1 : 0;
+        const leftOffset = triggerRef.current ? getLeftOffsetPerHorizontalPosition(triggerRef.current, screenWidth) * -1 : 0;
         return {
-            left: `${((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0) / 2 + leftOffset}px`
+            left: `${leftOffset - ARROW_HEIGHT + ((triggerDOMRect === null || triggerDOMRect === void 0 ? void 0 : triggerDOMRect.width) || 0) / 2}px`
         };
     }, [
         triggerRef,
-        state.isOpen
+        state.isOpen,
+        screenWidth,
+        originalPosition
     ]);
     return {
         popoverPosition,
-        arrowPosition
+        arrowPosition,
+        localPlacement
     };
 }

package/dist/components/popover/components/panel/panel.styles.js

@@ -16,11 +16,11 @@ export const styles = tv({
         placement: {
             top: {
                 popover: '-mt-2 mb-2',
-                arrow: 'top-full translate-x-[-6px] translate-y-0'
+                arrow: 'top-full translate-x-[-2.5px]'
             },
             bottom: {
                 popover: 'mt-2',
-                arrow: 'bottom-full translate-x-[6px] rotate-180 after:bottom-[1px]'
+                arrow: 'bottom-full translate-x-[14px] rotate-180'
             }
         }
     }

package/dist/components/popover/components/panel/panel.types.d.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/dist/components/popover/popover.component.js

@@ -1,5 +1,5 @@
 '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';
 import { Panel } from './components/panel/panel.component.js';
@@ -11,7 +11,9 @@ export function Popover({ children, className, headingTag, content, heading, onC
         linkStyling
     });
     const ref = useRef(null);
+    const [isOpenDefault, setIsOpenDefault] = useState(open);
     const handleClick = useCallback((event)=>{
+        if (isOpenDefault) setIsOpenDefault(false);
         onClick(event);
         state.toggle();
     }, [
@@ -35,8 +37,7 @@ export function Popover({ children, className, headingTag, content, heading, onC
     useLayoutEffect(()=>{
         if (open) state.setOpen(true);
     }, [
-        open,
-        state
+        open
     ]);
     return React.createElement("div", {
         className: styles.base({
@@ -49,6 +50,7 @@ export function Popover({ children, className, headingTag, content, heading, onC
         soft: soft,
         "aria-expanded": state.isOpen,
         "aria-controls": panelId,
+        "aria-haspopup": "dialog",
         onClick: handleClick,
         ref: ref,
         size: size,
@@ -61,6 +63,14 @@ export function Popover({ children, className, headingTag, content, heading, onC
         content: content,
         state: state,
         id: panelId,
-        triggerRef: ref
+        triggerRef: ref,
+        open: isOpenDefault,
+        onClose: ()=>{
+            var _ref_current;
+            (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
+            if (isOpenDefault) {
+                setIsOpenDefault(false);
+            }
+        }
     }));
 }

package/dist/components/radio-group/radio-group.component.js

@@ -14,6 +14,7 @@ export const RadioGroupContext = createContext({
     size: 'medium',
     state: {
         name: '',
+        defaultSelectedValue: null,
         isDisabled: false,
         isReadOnly: false,
         isRequired: false,
@@ -65,8 +66,7 @@ export const RadioGroupContext = createContext({
         },
         commitValidation: function() {
             throw new Error(FUNCTION_NOT_IMPLEMENTED);
-        },
-        defaultSelectedValue: null
+        }
     }
 });
 export function RadioGroup({ className, radios, label, orientation = 'vertical', showAmount = 0, size = 'medium', errorMessage, hintMessage, ...props }) {

package/dist/components/selector/components/selector-button-group/selector-button-group.component.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SelectorButtonGroupContextState, SelectorButtonGroupProps } from './selector-button-group.types.js';
-export declare const SelectorButtonContext: import("react").Context<SelectorButtonGroupContextState>;
+export declare const SelectorButtonContext: React.Context<SelectorButtonGroupContextState>;
 export declare function SelectorButtonGroup({ className, children, label, orientation, errorMessage, description, value, isDisabled, ...props }: SelectorButtonGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/selector/components/selector-button-group/selector-button-group.component.js

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, useCallback, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useMemo, useState } from 'react';
 import { useField } from 'react-aria';
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../../../utils/breakpoint.util.js';

package/dist/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.js

@@ -41,6 +41,7 @@ function BaseSelectorCheckboxGroupOption({ className, children, value, withBorde
         className: styles.base({})
     }, React.createElement(VisuallyHidden, null, React.createElement("input", {
         ...mergeProps(inputProps, focusProps),
+        "aria-describedby": undefined,
         ref: localRef
     })), children);
 }

package/dist/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.js

@@ -7,6 +7,7 @@ import { ErrorMessage, Hint, Label } from '../../../index.js';
 import { styles } from './selector-checkbox-group.styles.js';
 export const SelectorCheckboxGroupContext = createContext({
     value: [],
+    defaultValue: [],
     isDisabled: false,
     isReadOnly: false,
     isSelected: ()=>false,
@@ -62,8 +63,7 @@ export const SelectorCheckboxGroupContext = createContext({
     },
     commitValidation: function() {
         throw new Error(FUNCTION_NOT_IMPLEMENTED);
-    },
-    defaultValue: []
+    }
 });
 export function SelectorCheckboxGroup(props) {
     const { children, label, description, errorMessage } = props;

package/dist/components/selector/components/selector-link-group/selector-link-group.component.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { SelectorLinkGroupProps } from './selector-link-group.types.js';
-export declare const SelectorLinkContext: import("react").Context<{
+export declare const SelectorLinkContext: React.Context<{
     isDisabled?: boolean;
 }>;
 export declare function SelectorLinkGroup({ className, children, label, orientation, errorMessage, description, isDisabled, ...props }: SelectorLinkGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/selector/components/selector-link-group/selector-link-group.component.js

@@ -1,5 +1,5 @@
 'use client';
-import { createContext } from 'react';
+import React, { createContext } from 'react';
 import { useField } from 'react-aria';
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../../../utils/breakpoint.util.js';

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.js

@@ -48,6 +48,7 @@ function BaseSelectorRadioGroupOption({ className, children, value, withBorder =
         className: styles.base({})
     }, React.createElement(VisuallyHidden, null, React.createElement("input", {
         ...mergeProps(inputProps, focusProps),
+        "aria-describedby": undefined,
         ref: localRef
     })), children);
 }

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.js

@@ -11,6 +11,7 @@ export const SelectorRadioGroupContext = createContext({
     orientation: 'vertical',
     state: {
         name: '',
+        defaultSelectedValue: null,
         isDisabled: false,
         isReadOnly: false,
         isRequired: false,
@@ -62,8 +63,7 @@ export const SelectorRadioGroupContext = createContext({
         },
         commitValidation: function() {
             throw new Error(FUNCTION_NOT_IMPLEMENTED);
-        },
-        defaultSelectedValue: null
+        }
     }
 });
 export function SelectorRadioGroup({ className, children, label, orientation = 'vertical', errorMessage, description, ...props }) {

package/dist/components/symbol/components/logos/bom-logo.d.ts

@@ -1,2 +1,2 @@
 import { type SymbolProps } from '../../symbol.types.js';
-export declare function BOMLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, mode, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;
+export declare function BOMLogo({ 'aria-label': ariaLabel, copyrightYear, viewBoxWidth, viewBoxHeight, className, ...props }: SymbolProps): import("react/jsx-runtime").JSX.Element;