@westpac/ui 0.13.0 → 0.14.0

package/src/components/autocomplete/components/list-box/components/list-box-option/list-box-option.types.ts

@@ -1,7 +0,0 @@
-import { type Node } from '@react-types/shared';
-import { type ListState } from 'react-stately';
-
-export type OptionProps<T = any> = {
-  item: Node<T>;
-  state: ListState<T>;
-};

package/src/components/autocomplete/components/list-box/components/list-box-section/index.ts

@@ -1,2 +0,0 @@
-export { ListBoxSection } from './list-box-section.component.js';
-export { type ListBoxSectionProps } from './list-box-section.types.js';

package/src/components/autocomplete/components/list-box/components/list-box-section/list-box-section.component.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { useListBoxSection } from 'react-aria';
-
-import { Option } from '../list-box-option/index.js';
-
-import { type ListBoxSectionProps } from './list-box-section.types.js';
-
-/**
- * @private
- */
-export function ListBoxSection({ section, state }: ListBoxSectionProps) {
-  const { itemProps, headingProps, groupProps } = useListBoxSection({
-    heading: section.rendered,
-    'aria-label': section['aria-label'],
-  });
-
-  return (
-    <>
-      <li {...itemProps} className="pt-2">
-        {section.rendered && (
-          <span {...headingProps} className="mx-3 text-xs font-bold uppercase text-text">
-            {section.rendered}
-          </span>
-        )}
-
-        <ul {...groupProps}>
-          {[...section.childNodes].map(node => (
-            <Option key={node.key} item={node} state={state} />
-          ))}
-        </ul>
-      </li>
-    </>
-  );
-}

package/src/components/autocomplete/components/list-box/components/list-box-section/list-box-section.types.ts

@@ -1,7 +0,0 @@
-import { type Node } from '@react-types/shared';
-import { ListState } from 'react-stately';
-
-export type ListBoxSectionProps<T = any> = {
-  section: Node<T>;
-  state: ListState<T>;
-};

package/src/components/autocomplete/components/list-box/index.ts

@@ -1,2 +0,0 @@
-export { ListBox } from './list-box.component.js';
-export { type ListBoxProps } from './list-box.types.js';

package/src/components/autocomplete/components/list-box/list-box.component.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { useListBox } from 'react-aria';
-
-import { ListBoxSection, Option } from './components/index.js';
-import { ListBoxProps } from './list-box.types.js';
-
-/**
- * @private
- */
-export function ListBox(props: ListBoxProps) {
-  const ref = React.useRef<HTMLUListElement>(null);
-
-  const { listBoxRef = ref, state } = props;
-
-  const { listBoxProps } = useListBox(props, state, listBoxRef);
-
-  return (
-    <ul {...listBoxProps} ref={listBoxRef} className="max-h-[400px] w-full overflow-auto outline-none">
-      {[...state.collection].map(item =>
-        item.type === 'section' ? (
-          <ListBoxSection key={item.key} section={item} state={state} />
-        ) : (
-          <Option key={item.key} item={item} state={state} />
-        ),
-      )}
-    </ul>
-  );
-}

package/src/components/autocomplete/components/list-box/list-box.types.ts

@@ -1,8 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { AriaListBoxOptions } from 'react-aria';
-import { ListState } from 'react-stately';
-
-export type ListBoxProps<T = any> = AriaListBoxOptions<T> & {
-  listBoxRef?: React.RefObject<HTMLUListElement>;
-  state: ListState<T>;
-} & HTMLAttributes<Element>;

package/src/components/autocomplete/components/popover/index.ts

@@ -1,2 +0,0 @@
-export { Popover } from './popover.component.js';
-export { type PopoverProps } from './popover.types.js';

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

@@ -1,37 +0,0 @@
-import { clsx } from 'clsx';
-import * as React from 'react';
-import { DismissButton, Overlay, usePopover } from 'react-aria';
-
-import { PopoverProps } from './popover.types.js';
-/**
- * @private
- */
-export function Popover(props: PopoverProps) {
-  const ref = React.useRef<HTMLDivElement>(null);
-  const { popoverRef = ref, state, children, className, isNonModal, portalContainer } = props;
-  const { popoverProps, underlayProps } = usePopover(
-    {
-      ...props,
-      popoverRef,
-    },
-    state,
-  );
-
-  const width = props.triggerRef.current?.getBoundingClientRect().width;
-  return (
-    <Overlay portalContainer={portalContainer}>
-      {!isNonModal && <div {...underlayProps} className="fixed inset-0" />}
-
-      <div
-        {...popoverProps}
-        style={{ ...popoverProps.style, width: width ? `${width}px` : undefined }}
-        ref={popoverRef}
-        className={clsx('z-10 border border-border bg-white shadow-lg', className)}
-      >
-        {!isNonModal && <DismissButton onDismiss={state.close} />}
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  );
-}

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

@@ -1,27 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { type AriaPopoverProps } from 'react-aria';
-import { type OverlayTriggerState } from 'react-stately';
-
-// @private
-export type PopoverProps = Omit<AriaPopoverProps, 'popoverRef'> & {
-  /**
-   * Popover content
-   */
-  children: ReactNode;
-  /**
-   * Classname
-   */
-  className?: string;
-  /**
-   * Popover ref
-   */
-  popoverRef?: React.RefObject<HTMLDivElement>;
-  /**
-   * Element where the popover will be rendered, by default it will be into the body
-   */
-  portalContainer?: Element;
-  /**
-   * Popover state
-   */
-  state: OverlayTriggerState;
-} & HTMLAttributes<Element>;

package/src/components/button-dropdown/components/heading/heading.component.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { styles as headingStyles } from './heading.styles.js';
-import { type HeadingProps } from './heading.types.js';
-
-export function Heading({ className, tag: Tag = 'h1', children, ...props }: HeadingProps) {
-  const styles = headingStyles({});
-
-  return (
-    <Tag className={styles.base({ className })} {...props}>
-      {children}
-    </Tag>
-  );
-}

package/src/components/button-dropdown/components/heading/heading.types.ts

@@ -1,8 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-export type HeadingProps = {
-  /**
-   * The tag of the heading element for semantic reasons
-   */
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-} & HTMLAttributes<Element>;

package/src/components/button-dropdown/components/panel/index.ts

@@ -1,2 +0,0 @@
-export { Panel } from './panel.component.js';
-export { type PanelProps } from './panel.types.js';

package/src/components/button-dropdown/components/panel/panel.component.tsx

@@ -1,66 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { DismissButton, Overlay, mergeProps, useFocusRing, usePopover } from 'react-aria';
-
-import { styles as panelStyles } from './panel.styles.js';
-import { type PanelProps } from './panel.types.js';
-
-/**
- * @private
- */
-export function Panel({ className, children, state, block, id, ...props }: PanelProps) {
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const { popoverProps } = usePopover({ popoverRef, shouldFlip: false, isNonModal: true, ...props }, state);
-  const { isFocused, focusProps } = useFocusRing();
-  const styles = panelStyles({ isFocused });
-  const width = props.triggerRef.current?.getBoundingClientRect().width;
-
-  // Added this based on accessibility features seen https://gel.westpacgroup.com.au/design-system/components/button-dropdowns?b=WBC&tab=accessibility and React Aria doesn't do this
-  const focusHandler = useCallback(
-    (event: globalThis.FocusEvent) => {
-      if (
-        event.target &&
-        popoverRef.current &&
-        event.target !== props.triggerRef.current &&
-        !popoverRef.current.contains(event.target as Node) &&
-        state.isOpen
-      )
-        state.close();
-    },
-    [state.isOpen],
-  );
-
-  // React Aria does not handle click as we need when isNonModal is true so this is needed
-  const clickHandler = useCallback(
-    (event: globalThis.MouseEvent) => {
-      if (event.target && popoverRef.current && !popoverRef.current.contains(event.target as Node) && state.isOpen)
-        state.close();
-    },
-    [state.isOpen],
-  );
-
-  useEffect(() => {
-    window.document.addEventListener('focusin', focusHandler);
-    window.document.addEventListener('click', clickHandler);
-    return () => {
-      window.document.removeEventListener('focusin', focusHandler);
-      window.document.removeEventListener('click', clickHandler);
-    };
-  }, []);
-
-  return (
-    <Overlay>
-      <div
-        {...mergeProps(popoverProps, focusProps)}
-        id={id}
-        data-testid="panel-dialog"
-        style={{ ...popoverProps.style, width: block && width ? `${width}px` : undefined }}
-        ref={popoverRef}
-        className={styles.base({ className })}
-      >
-        <DismissButton onDismiss={state.close} />
-        <div className={styles.dialog()}>{children}</div>
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
-  );
-}

package/src/components/button-dropdown/components/panel/panel.types.ts

@@ -1,14 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { AriaPopoverProps } from 'react-aria';
-import { OverlayTriggerState } from 'react-stately';
-
-import { ButtonProps } from '../../../button/index.js';
-
-export type PanelProps = {
-  /**
-   * State for the panel
-   */
-  state: OverlayTriggerState;
-} & HTMLAttributes<Element> &
-  Omit<AriaPopoverProps, 'popoverRef'> &
-  Pick<ButtonProps, 'block'>;

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

@@ -1,36 +0,0 @@
-import React, { useContext, useRef } from 'react';
-import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
-
-import { Button as GELButton } from '../../../button/index.js';
-import { ButtonGroupContext } from '../../button-group.component.js';
-
-import { styles as buttonStyles } from './button.styles.js';
-import { type ButtonProps } from './button.types.js';
-
-export function Button({ className, children, ...props }: ButtonProps) {
-  const state = useContext(ButtonGroupContext);
-  const { size, look, block } = state;
-  const ref = useRef(null);
-  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children }, state, ref);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const styles = buttonStyles({ block, isDisabled, isFocusVisible });
-
-  return (
-    <label className={styles.base({ className })}>
-      <VisuallyHidden>
-        <input {...inputProps} {...focusProps} ref={ref} />
-      </VisuallyHidden>
-      <GELButton
-        tag="div"
-        block={block}
-        soft={!isSelected}
-        disabled={isDisabled}
-        look={look}
-        size={size}
-        className={styles.button()}
-      >
-        {children}
-      </GELButton>
-    </label>
-  );
-}

package/src/components/button-group/components/button/button.types.ts

@@ -1,8 +0,0 @@
-import { AriaRadioProps } from 'react-aria';
-
-export type ButtonProps = {
-  /**
-   * `string` for overriding base style
-   */
-  className?: string;
-} & AriaRadioProps;

package/src/components/button-group/components/button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './button.component.js';
-export { type ButtonProps } from './button.types.js';

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

@@ -1,57 +0,0 @@
-import React, { forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
-
-import { Icon } from '../../../icon/icon.component.js';
-import { IconProps } from '../../../icon/index.js';
-import { CheckboxGroupContext } from '../../checkbox-group.component.js';
-
-import { styles as checkboxItemStyles } from './checkbox.styles.js';
-import { type CheckboxProps } from './checkbox.types.js';
-
-// TODO: Discuss with designers if this icon should be included as part of Icons
-// Icon based on SVGs/instructions received from this issue https://github.com/WestpacGEL/GEL-next/issues/159
-function CheckIcon({ copyrightYear = '2023', size, ...props }: IconProps) {
-  const viewBoxSize = size === 'large' ? '0 0 30 30' : '0 0 24 24';
-  return (
-    <Icon copyrightYear={copyrightYear} viewBox={viewBoxSize} {...props}>
-      {size === 'large' ? (
-        <path
-          d="M12.9952 17.5891L20.2923 10.292L21.7023 11.712L12.9952 20.4191L8.28809 15.712L9.69809 14.302L12.9952 17.5891Z"
-          fill="currentColor"
-        />
-      ) : (
-        <path
-          d="M9.99519 14.5891L17.2923 7.29199L18.7023 8.71199L9.99519 17.4191L5.28809 12.712L6.69809 11.302L9.99519 14.5891Z"
-          fill="currentColor"
-        />
-      )}
-    </Icon>
-  );
-}
-
-function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxProps, ref: any) {
-  const state = useContext(CheckboxGroupContext);
-  const { size, orientation } = state;
-  const localRef = useRef(null);
-  const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem({ ...props, value, children }, state, localRef);
-  const { isFocused, focusProps } = useFocusRing();
-  const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocused });
-
-  return (
-    <label className={styles.base({ className })} ref={ref}>
-      <VisuallyHidden>
-        <input {...inputProps} {...focusProps} ref={localRef} />
-      </VisuallyHidden>
-      <div className={styles.checkbox()}>
-        {isSelected && <CheckIcon className={styles.checkIcon()} size={size} color={isDisabled ? 'border' : 'hero'} />}
-      </div>
-      <div className={styles.textWrapper()}>
-        <span className={styles.labelText()}>{children}</span>
-        {hint && <span className={styles.hintText()}>{hint}</span>}
-      </div>
-    </label>
-  );
-}
-
-export const Checkbox = forwardRef(BaseCheckbox);
-Checkbox.displayName = 'CheckboxGroup.Checkbox';

package/src/components/checkbox-group/components/checkbox/checkbox.styles.ts

@@ -1,49 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    slots: {
-      base: 'flex',
-      checkIcon: 'overflow-visible',
-      textWrapper: 'flex flex-col justify-center',
-      labelText: 'typography-body-10 py-[2px] pl-1',
-      hintText: 'typography-body-10 pl-1 text-muted',
-      checkbox: 'flex shrink-0 items-center justify-center rounded border border-hero',
-    },
-    variants: {
-      isDisabled: {
-        true: {
-          labelText: 'text-muted',
-          checkbox: 'border-border bg-border-20',
-        },
-        false: {
-          base: 'hover:cursor-pointer',
-        },
-      },
-      isFocused: {
-        true: { checkbox: 'focus-outline' },
-      },
-      orientation: {
-        horizontal: {
-          base: 'mr-3',
-        },
-        vertical: {
-          base: '',
-        },
-      },
-      size: {
-        large: {
-          checkIcon: 'h-5 w-5',
-          base: 'mb-2',
-          checkbox: 'h-5 w-5',
-        },
-        medium: {
-          checkIcon: 'h-4 w-4',
-          base: 'mb-1',
-          checkbox: 'h-4 w-4',
-        },
-      },
-    },
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);

package/src/components/checkbox-group/components/checkbox/checkbox.types.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import { AriaCheckboxGroupItemProps } from 'react-aria';
-
-export type CheckboxProps = {
-  /**
-   * `string` for overriding base style
-   */
-  className?: string;
-  /**
-   * Renders hint under option, most likely a `string` but could be something else
-   */
-  hint?: ReactNode;
-} & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

package/src/components/checkbox-group/components/checkbox/index.ts

@@ -1,2 +0,0 @@
-export { Checkbox } from './checkbox.component.js';
-export { type CheckboxProps } from './checkbox.types.js';

package/src/components/form-hint/form-hint.component.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { styles } from './form-hint.styles.js';
-import { type FormHintProps } from './form-hint.types.js';
-
-export function FormHint({ className, tag: Tag = 'div', children, spacing, ...props }: FormHintProps) {
-  return (
-    <Tag className={styles({ className, spacing: spacing || 'medium' })} {...props}>
-      {children}
-    </Tag>
-  );
-}

package/src/components/form-hint/form-hint.types.ts

@@ -1,12 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-export type FormHintProps = {
-  /**
-   * spacing
-   */
-  spacing?: 'medium' | 'large';
-  /**
-   * Tag to render
-   */
-  tag?: keyof JSX.IntrinsicElements;
-} & HTMLAttributes<Element>;

package/src/components/form-hint/index.ts

@@ -1,2 +0,0 @@
-export { FormHint } from './form-hint.component.js';
-export { type FormHintProps } from './form-hint.types.js';

package/src/components/form-label/form-label.component.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { VisuallyHidden } from '../index.js';
-
-import { styles } from './form-label.styles.js';
-import { type FormLabelProps } from './form-label.types.js';
-
-export function FormLabel({
-  className,
-  tag: Tag = 'label',
-  spacing,
-  srOnly,
-  children,
-  subLabel = false,
-  ...props
-}: FormLabelProps) {
-  const finalSpacing = spacing || 'medium';
-
-  return srOnly ? (
-    <VisuallyHidden>{children}</VisuallyHidden>
-  ) : (
-    <Tag className={styles({ className, spacing: finalSpacing, subLabel })} {...props}>
-      {children}
-    </Tag>
-  );
-}

package/src/components/form-label/form-label.styles.ts

@@ -1,40 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-export const styles = tv(
-  {
-    base: 'typography-body-9 block font-medium leading-loose',
-    variants: {
-      spacing: {
-        medium: '',
-        large: '',
-      },
-      subLabel: {
-        true: 'typography-body-10',
-        false: 'typography-body-9',
-      },
-    },
-    compoundVariants: [
-      {
-        subLabel: true,
-        spacing: 'medium',
-        className: 'mb-1',
-      },
-      {
-        subLabel: true,
-        spacing: 'large',
-        className: 'mb-1',
-      },
-      {
-        subLabel: false,
-        spacing: 'medium',
-        className: 'mb-2',
-      },
-      {
-        subLabel: false,
-        spacing: 'large',
-        className: 'mb-3',
-      },
-    ],
-  },
-  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
-);

package/src/components/form-label/form-label.types.ts

@@ -1,35 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './form-label.styles.js';
-
-type Variants = VariantProps<typeof styles>;
-
-export type FormLabelProps = {
-  /**
-   * Children
-   */
-  children?: ReactNode;
-
-  /**
-   * Label `for` attribute.
-   *
-   */
-  htmlFor?: string;
-  /**
-   * Spacing
-   */
-  spacing?: Variants['spacing'];
-  /**
-   * Enable ‘screen reader only’ mode
-   */
-  srOnly?: boolean;
-  /**
-   * Sub-label mode (smaller label text size)
-   */
-  subLabel?: Variants['subLabel'];
-  /**
-   * Component tag
-   */
-  tag?: 'label' | 'legend';
-} & HTMLAttributes<Element>;

package/src/components/form-label/index.ts

@@ -1,2 +0,0 @@
-export { FormLabel } from './form-label.component.js';
-export { type FormLabelProps } from './form-label.types.js';

package/src/components/grid/components/container/container.component.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { styles } from './container.styles.js';
-import { type ContainerProps } from './container.types.js';
-
-export function Container({ className, tag: Tag = 'div', fixed, children, ...props }: ContainerProps) {
-  return (
-    <Tag className={styles({ fixed, className })} {...props}>
-      {children}
-    </Tag>
-  );
-}

package/src/components/grid/components/container/container.types.ts

@@ -1,12 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-export type ContainerProps = {
-  /**
-   * Enable fixed width container mode. In this mode the container width is fixed at each breakpoint.
-   */
-  fixed?: boolean;
-  /**
-   * Tag to render
-   */
-  tag?: keyof JSX.IntrinsicElements;
-} & HTMLAttributes<Element>;

package/src/components/grid/components/item/item.component.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { styles } from './item.styles.js';
-import { type ItemProps } from './item.types.js';
-
-export function Item({ className, tag: Tag = 'div', span, start, children, ...props }: ItemProps) {
-  return (
-    <Tag className={styles({ span, start, className })} {...props}>
-      {children}
-    </Tag>
-  );
-}