@westpac/ui 1.14.0 → 1.15.1

package/dist/css/westpac-ui.min.css

@@ -769,6 +769,9 @@
   .h-8 {
     height: calc(0.375rem * 8);
   }
+  .h-9 {
+    height: calc(0.375rem * 9);
+  }
   .h-10 {
     height: calc(0.375rem * 10);
   }
@@ -781,6 +784,9 @@
   .h-30 {
     height: calc(0.375rem * 30);
   }
+  .h-50 {
+    height: calc(0.375rem * 50);
+  }
   .h-\[0\.625rem\] {
     height: 0.625rem;
   }
@@ -979,6 +985,12 @@
   .w-23 {
     width: calc(0.375rem * 23);
   }
+  .w-50 {
+    width: calc(0.375rem * 50);
+  }
+  .w-70 {
+    width: calc(0.375rem * 70);
+  }
   .w-\[1\.81ex\] {
     width: 1.81ex;
   }
@@ -1348,6 +1360,14 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-0 {
+    --tw-translate-x: calc(0.375rem * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-\[-2\.5px\] {
     --tw-translate-x: -2.5px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1360,6 +1380,10 @@
     --tw-translate-x: 14px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-full {
+    --tw-translate-x: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1542,6 +1566,13 @@
       margin-inline-end: calc(calc(0.375rem * 1) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .space-x-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(0.375rem * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(0.375rem * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -3150,6 +3181,10 @@
     --tw-shadow: 0 0.375rem 0.75rem var(--tw-shadow-color, rgba(0,0,0,0.175));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_2px_5px_rgba\(0\,0\,0\,0\.3\)\] {
+    --tw-shadow: 0 2px 5px var(--tw-shadow-color, rgba(0,0,0,0.3));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_2px_12px_rgba\(0\,0\,0\,0\.2\)\] {
     --tw-shadow: 0 2px 12px var(--tw-shadow-color, rgba(0,0,0,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3309,6 +3344,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
   .duration-\[\.3s\] {
     --tw-duration: .3s;
     transition-duration: .3s;
@@ -3317,6 +3356,10 @@
     --tw-duration: .6s;
     transition-duration: .6s;
   }
+  .ease-\[cubic-bezier\(0\.23\,1\,0\.32\,1\)\] {
+    --tw-ease: cubic-bezier(0.23,1,0.32,1);
+    transition-timing-function: cubic-bezier(0.23,1,0.32,1);
+  }
   .ease-\[cubic-bezier\(0\.25\,0\.1\,0\.25\,1\)\] {
     --tw-ease: cubic-bezier(0.25,0.1,0.25,1);
     transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.14.0",
+  "version": "1.15.1",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -88,6 +88,9 @@
     "./flexi-cell": {
       "default": "./dist/components/flexi-cell/index.js"
     },
+    "./flyout": {
+      "default": "./dist/components/flyout/index.js"
+    },
     "./footer": {
       "default": "./dist/components/footer/index.js"
     },

package/src/components/flyout/components/flyout-backdrop/flyout-backdrop.component.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useExitAnimation } from '@react-aria/utils';
+import React, { useMemo, useRef } from 'react';
+import { Overlay, useModalOverlay } from 'react-aria';
+
+import { styles as backdropStyles } from './flyout-backdrop.styles.js';
+import { type FlyoutBackdropProps } from './flyout-backdrop.types.js';
+
+/**
+ * @private
+ */
+export function FlyoutBackdrop({
+  children,
+  className,
+  isDismissable = true,
+  portalContainer,
+  state,
+  zIndex = 100,
+  ...props
+}: FlyoutBackdropProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isExiting = useExitAnimation(ref, state.isOpen);
+  const styles = backdropStyles({ isOpen: state.isOpen });
+  const { modalProps, underlayProps } = useModalOverlay({ isDismissable, ...props }, state, ref);
+
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      return (
+        document.querySelector('[data-brand]') ||
+        document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
+        document.body
+      );
+    }
+  }, []);
+
+  if (!state.isOpen && !isExiting) {
+    return null;
+  }
+
+  return (
+    <Overlay isExiting={isExiting} portalContainer={portalContainer || brandContainer}>
+      <div className={styles.base({ className })} style={{ zIndex }} {...underlayProps}>
+        {children({ flyoutRef: ref, modalProps })}
+      </div>
+    </Overlay>
+  );
+}

package/src/components/flyout/components/flyout-backdrop/flyout-backdrop.styles.ts

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    base: 'fixed inset-0',
+  },
+  variants: {
+    isOpen: {
+      true: {
+        base: 'animate-fadeIn bg-black/65',
+      },
+      false: {
+        base: 'pointer-events-none',
+      },
+    },
+  },
+});

package/src/components/flyout/components/flyout-backdrop/flyout-backdrop.types.ts

@@ -0,0 +1,32 @@
+import { type ReactNode, type RefObject } from 'react';
+import { type AriaModalOverlayProps, type useModalOverlay } from 'react-aria';
+import { type OverlayTriggerState } from 'react-stately';
+
+export type FlyoutBackdropRenderProps = {
+  flyoutRef: RefObject<HTMLDivElement>;
+  modalProps: ReturnType<typeof useModalOverlay>['modalProps'];
+};
+
+export type FlyoutBackdropProps = {
+  /**
+   * Function that renders the flyout dialog within the backdrop
+   */
+  children: (props: FlyoutBackdropRenderProps) => ReactNode;
+  /**
+   * Additional class name for the backdrop
+   */
+  className?: string;
+  /**
+   * Element where the backdrop will be rendered
+   */
+  portalContainer?: Element;
+  /**
+   * The flyout opening and closing state
+   */
+  state: OverlayTriggerState;
+  /**
+   * z-index of the backdrop
+   * @default 100
+   */
+  zIndex?: number;
+} & AriaModalOverlayProps;

package/src/components/flyout/components/flyout-backdrop/index.ts

@@ -0,0 +1,2 @@
+export { FlyoutBackdrop } from './flyout-backdrop.component.js';
+export { type FlyoutBackdropProps, type FlyoutBackdropRenderProps } from './flyout-backdrop.types.js';

package/src/components/flyout/components/flyout-dialog/flyout-dialog.component.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useEnterAnimation } from '@react-aria/utils';
+import { clsx } from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+import { mergeProps, useDialog } from 'react-aria';
+
+import { Button } from '../../../button/index.js';
+import { CloseIcon } from '../../../icon/index.js';
+
+import { styles as dialogStyles } from './flyout-dialog.styles.js';
+import { type FlyoutDialogInternalProps } from './flyout-dialog.types.js';
+
+/**
+ * @private
+ */
+export function FlyoutDialog({
+  children,
+  className,
+  closeAssistiveText = 'Close flyout',
+  flyoutRef,
+  heading,
+  headingTag: HeadingTag = 'h2',
+  isOpen,
+  modalProps,
+  onClose,
+  position = 'right',
+  ...props
+}: FlyoutDialogInternalProps) {
+  const isEntering = useEnterAnimation(flyoutRef);
+  const styles = dialogStyles({ isEntering, isOpen, position });
+  const { dialogProps, titleProps } = useDialog(props, flyoutRef);
+  const [scrolled, setScrolled] = useState<boolean>(false);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = listRef.current;
+    if (!element) {
+      return;
+    }
+    const listener = () => {
+      const y = listRef.current?.scrollTop || 0;
+      setScrolled(y > 0);
+    };
+    listRef?.current?.addEventListener('scroll', listener);
+    return () => {
+      listRef?.current?.removeEventListener('scroll', listener);
+    };
+  }, []);
+
+  return (
+    <div
+      {...mergeProps(modalProps, dialogProps, props)}
+      aria-hidden={!isOpen || undefined}
+      className={styles.base({ className })}
+      ref={flyoutRef}
+    >
+      <div className={styles.content()}>
+        <div
+          className={clsx(styles.header(), {
+            'shadow-[0_2px_5px_rgba(0,0,0,0.3)]': scrolled,
+          })}
+        >
+          {heading && (
+            <HeadingTag {...titleProps} className={styles.heading()}>
+              {heading}
+            </HeadingTag>
+          )}
+          {onClose && (
+            <Button
+              aria-label={closeAssistiveText}
+              className={styles.button()}
+              iconAfter={() => <CloseIcon color="primary" size="medium" aria-hidden />}
+              look="link"
+              onClick={onClose}
+              type="button"
+            />
+          )}
+        </div>
+        <div className={styles.body()} ref={listRef}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    base: 'fixed inset-y-0 flex w-50 flex-col bg-background-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]',
+    body: 'min-h-0 flex-1 overflow-auto',
+    button: 'ml-auto shrink-0',
+    content: 'flex h-full flex-col',
+    header: 'flex h-9 w-full shrink-0 items-center pl-2',
+    heading: 'min-w-0 typography-body-10 font-bold text-text-body',
+  },
+  variants: {
+    isEntering: {
+      true: {},
+    },
+    isOpen: {
+      true: {
+        base: 'translate-x-0',
+      },
+      false: {
+        content: 'hidden',
+      },
+    },
+    position: {
+      left: {
+        base: 'left-0 border-r border-border-muted-soft',
+      },
+      right: {
+        base: 'right-0 border-l border-border-muted-soft',
+      },
+    },
+  },
+  compoundSlots: [
+    {
+      slots: ['base'],
+      isOpen: false,
+      position: 'left',
+      className: '-translate-x-full',
+    },
+    {
+      slots: ['base'],
+      isOpen: false,
+      position: 'right',
+      className: 'translate-x-full',
+    },
+    {
+      slots: ['base'],
+      isEntering: true,
+      position: 'left',
+      className: '-translate-x-full',
+    },
+    {
+      slots: ['base'],
+      isEntering: true,
+      position: 'right',
+      className: 'translate-x-full',
+    },
+  ],
+});

package/src/components/flyout/components/flyout-dialog/flyout-dialog.types.ts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { type AriaDialogProps, type useModalOverlay } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './flyout-dialog.styles.js';
+
+type Variants = VariantProps<typeof styles>;
+
+export type FlyoutDialogProps = {
+  /**
+   * Flyout content
+   */
+  children?: ReactNode;
+  /**
+   * Assistive text for the close button
+   * @default Close flyout
+   */
+  closeAssistiveText?: string;
+  /**
+   * The heading of the flyout
+   */
+  heading?: ReactNode;
+  /**
+   * The flyout heading tag may be overridden for semantic reasons
+   * @default h2
+   */
+  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /**
+   * Called when the close button is pressed
+   */
+  onClose?: () => void;
+  /**
+   * Side of the page from which the flyout opens
+   * @default right
+   */
+  position?: Variants['position'];
+} & AriaDialogProps &
+  HTMLAttributes<HTMLDivElement>;
+
+export type FlyoutDialogInternalProps = FlyoutDialogProps & {
+  flyoutRef: RefObject<HTMLDivElement>;
+  isOpen: boolean;
+  modalProps: ReturnType<typeof useModalOverlay>['modalProps'];
+};

package/src/components/flyout/components/flyout-dialog/index.ts

@@ -0,0 +1,2 @@
+export { FlyoutDialog } from './flyout-dialog.component.js';
+export { type FlyoutDialogProps } from './flyout-dialog.types.js';

package/src/components/flyout/components/index.ts

@@ -0,0 +1,2 @@
+export * from './flyout-backdrop/index.js';
+export * from './flyout-dialog/index.js';

package/src/components/flyout/flyout.component.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+
+import { FlyoutBackdrop, FlyoutDialog } from './components/index.js';
+import { type FlyoutProps } from './flyout.types.js';
+
+export function Flyout({
+  backdropClassName,
+  children,
+  className,
+  closeAssistiveText,
+  heading,
+  headingTag,
+  isDismissable = true,
+  isKeyboardDismissDisabled,
+  portalContainer,
+  position = 'right',
+  shouldCloseOnInteractOutside,
+  state,
+  zIndex,
+  ...props
+}: FlyoutProps) {
+  return (
+    <FlyoutBackdrop
+      className={backdropClassName}
+      isDismissable={isDismissable}
+      isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+      portalContainer={portalContainer}
+      shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}
+      state={state}
+      zIndex={zIndex}
+    >
+      {({ flyoutRef, modalProps }) => (
+        <FlyoutDialog
+          {...props}
+          className={className}
+          closeAssistiveText={closeAssistiveText}
+          flyoutRef={flyoutRef}
+          heading={heading}
+          headingTag={headingTag}
+          isOpen={state.isOpen}
+          modalProps={modalProps}
+          onClose={isDismissable ? () => state.close() : undefined}
+          position={position}
+          key={position}
+        >
+          {children}
+        </FlyoutDialog>
+      )}
+    </FlyoutBackdrop>
+  );
+}

package/src/components/flyout/flyout.types.ts

@@ -0,0 +1,9 @@
+import { type FlyoutBackdropProps, type FlyoutDialogProps } from './components/index.js';
+
+export type FlyoutProps = Omit<FlyoutBackdropProps, 'children' | 'className'> &
+  Omit<FlyoutDialogProps, 'onClose'> & {
+    /**
+     * Additional class name for the backdrop
+     */
+    backdropClassName?: string;
+  };

package/src/components/flyout/index.ts

@@ -0,0 +1,2 @@
+export { Flyout } from './flyout.component.js';
+export { type FlyoutProps } from './flyout.types.js';

package/src/components/index.ts

@@ -47,3 +47,4 @@ export * from './progress-indicator/index.js';
 export * from './header/index.js';
 export * from './footer/index.js';
 export * from './multi-select/index.js';
+export * from './flyout/index.js';

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

@@ -10,6 +10,7 @@ import React, {
   useId,
   useMemo,
 } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
@@ -94,14 +95,14 @@ export function InputGroup({
 
   const renderChildren = useCallback(() => {
     return Children.map<ReactNode, ReactNode>(children, child => {
-      if (isValidElement(child)) {
+      if (isValidElement<{ className?: string }>(child)) {
         return cloneElement(child, {
           size: resolvedSize,
           id: propID || id,
           'aria-labelledby': ariaLabelledBy,
           'aria-describedby': ariaDescribedBy || ariaDescribedByValue,
           'aria-label': ariaLabel,
-          className: 'focus:z-10', // for focus ring visibility
+          className: twMerge('focus:z-10', child.props.className), // for focus ring visibility
           ...(resolvedWidth !== 'full' ? { width: resolvedWidth } : {}),
         } as Partial<unknown> & Attributes);
       }