@westpac/ui 1.0.0-canary.9 → 1.1.0

package/src/components/multi-select/components/multi-select-searchbar/multi-select-searchbar.component.tsx

@@ -0,0 +1,81 @@
+import React, { useContext, useCallback, KeyboardEvent } from 'react';
+
+import { Button } from '../../../../components/button/index.js';
+import { ClearIcon, SearchIcon } from '../../../../components/icon/index.js';
+import { InputGroup } from '../../../../components/input-group/index.js';
+import { Input } from '../../../input/index.js';
+import { MultiSelectContext } from '../../multi-select.component.js';
+
+import { styles as searchbarStyles } from './multi-select-searchbar.styles.js';
+
+import type { MultiSelectSearchbarProps } from './multi-select-searchbar.types.js';
+
+export function MultiSelectSearchbar({
+  filterText,
+  setFilterText,
+  closeBtnRef,
+}: Pick<MultiSelectSearchbarProps, 'filterText' | 'setFilterText' | 'closeBtnRef'>) {
+  const { size, inputRef, selectAllRef, listBoxRef } = useContext(MultiSelectContext);
+  const styles = searchbarStyles();
+  const handleInputKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (selectAllRef.current) {
+          selectAllRef.current.focus();
+        } else {
+          const firstItem = listBoxRef.current?.querySelector('[data-key]') as HTMLElement;
+          firstItem?.focus();
+        }
+      }
+      if (e.key === 'Escape' && filterText.length > 0) {
+        e.stopPropagation();
+        setFilterText('');
+      }
+      if (e.key === 'Tab' && filterText.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        closeBtnRef.current?.focus();
+      }
+    },
+    [filterText.length, setFilterText, selectAllRef, listBoxRef, closeBtnRef],
+  );
+  return (
+    <div className={styles.searchInputWrapper()}>
+      <InputGroup
+        before={{
+          icon: props => <SearchIcon {...props} color="muted" />,
+        }}
+        after={
+          filterText.length > 0 && {
+            inset: true,
+            element: (
+              <Button
+                onClick={() => {
+                  setFilterText('');
+                  inputRef.current?.focus();
+                }}
+                look="unstyled"
+                className={styles.clearButton()}
+                ref={closeBtnRef}
+                aria-label="Clear filter text"
+              >
+                <ClearIcon color="muted" size="small" />
+              </Button>
+            ),
+          }
+        }
+        aria-label="Filter options"
+      >
+        <Input
+          ref={inputRef}
+          size={size}
+          value={filterText}
+          onChange={e => setFilterText(e.target.value)}
+          onKeyDown={handleInputKeyDown}
+          tabIndex={-1}
+        />
+      </InputGroup>
+    </div>
+  );
+}

package/src/components/multi-select/components/multi-select-searchbar/multi-select-searchbar.styles.ts

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    searchInputWrapper: 'border-b border-b-border-muted-soft p-2',
+    clearButton: 'mb-0.5 px-2',
+  },
+});

package/src/components/multi-select/components/multi-select-searchbar/multi-select-searchbar.types.ts

@@ -0,0 +1,7 @@
+import { ButtonRef } from '../../../../components/button/button.types.js';
+
+export type MultiSelectSearchbarProps = {
+  filterText: string;
+  setFilterText: (text: string) => void;
+  closeBtnRef: React.RefObject<ButtonRef>;
+};

package/src/components/multi-select/index.ts

@@ -0,0 +1,2 @@
+export { MultiSelect, MultiSelectItem, MultiSelectSection } from './multi-select.component.js';
+export { type MultiSelectValue } from './multi-select.types.js';

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

@@ -0,0 +1,116 @@
+'use client';
+
+import { Node } from '@react-types/shared';
+import React, { useRef, useState, memo, createContext } from 'react';
+import { useFilter, useOverlayTrigger } from 'react-aria';
+import { Item, useListState, useOverlayTriggerState } from 'react-stately';
+
+import { MultiSelectDropdown } from './components/multi-select-dropdown/multi-select-dropdown.component.js';
+import { MultiSelectListBoxTrigger } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.component.js';
+import { styles as multiSelectStyles } from './multi-select.styles.js';
+import { filterNodes } from './utils/filter-nodes.js';
+
+import type {
+  MultiSelectContextProps,
+  MultiSelectItemProps,
+  MultiSelectProps,
+  MultiSelectValue,
+} from './multi-select.types.js';
+
+export const MultiSelectContext = createContext<MultiSelectContextProps>({
+  overlayState: {} as MultiSelectContextProps['overlayState'],
+  listState: {} as MultiSelectContextProps['listState'],
+  listBoxRef: { current: null },
+  buttonRef: { current: null },
+  popoverRef: { current: null },
+  selectAllRef: { current: null },
+  inputRef: { current: null },
+  filterText: '',
+  overlayProps: {},
+});
+
+export function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({
+  size = 'medium',
+  listBoxProps,
+  selectionMode = 'multiple',
+  selectedKeys,
+  onSelectionChange,
+  placeholder = 'Select',
+  showSingleSectionTitle = false,
+  placement,
+  portalContainer,
+  id,
+  ...props
+}: MultiSelectProps<T>) {
+  const [filterText, setFilterText] = useState('');
+  const filter = useFilter({ sensitivity: 'base' });
+
+  const listState = useListState<T>({
+    ...props,
+    selectedKeys,
+    selectionMode,
+    onSelectionChange,
+    // Need to provide a custom filter as the default filtering in react-stately does not work with sections
+    // https://github.com/adobe/react-spectrum/issues/4930
+    filter: (nodes: Iterable<Node<T>>) =>
+      filterNodes(nodes, filterText, (value, string) => filter.contains(value, string)),
+  });
+
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const selectAllRef = useRef<HTMLInputElement>(null);
+  const listBoxRef = useRef<HTMLUListElement>(null);
+
+  const overlayState = useOverlayTriggerState({
+    onOpenChange: isOpen => {
+      if (isOpen) {
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+        });
+      }
+      if (!isOpen) {
+        buttonRef.current?.focus();
+      }
+    },
+  });
+  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, overlayState, buttonRef);
+
+  const styles = multiSelectStyles({});
+
+  return (
+    <MultiSelectContext.Provider
+      value={{
+        filterText,
+        size,
+        overlayState,
+        listState,
+        buttonRef,
+        popoverRef,
+        placement,
+        selectAllRef,
+        listBoxRef,
+        inputRef,
+        overlayProps,
+        portalContainer,
+      }}
+    >
+      <div className={styles.root()}>
+        <MultiSelectListBoxTrigger
+          placeholder={placeholder}
+          selectedKeys={selectedKeys}
+          showSingleSectionTitle={showSingleSectionTitle}
+          triggerProps={triggerProps}
+          id={id}
+        />
+        {overlayState.isOpen && <MultiSelectDropdown setFilterText={setFilterText} {...listBoxProps} />}
+      </div>
+    </MultiSelectContext.Provider>
+  );
+}
+export const MultiSelect = memo(BaseMultiSelect);
+
+// Exporting react-stately's Item with custom props/naming and Section with custom naming to align with other components
+export const MultiSelectItem = Item as (props: MultiSelectItemProps) => JSX.Element;
+export { Section as MultiSelectSection } from 'react-stately';

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

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    root: 'relative flex flex-col gap-1',
+  },
+});

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

@@ -0,0 +1,60 @@
+import { DOMProps } from '@react-types/shared';
+import { Key, ReactNode, RefObject } from 'react';
+import { AriaListBoxOptions, AriaPopoverProps } from 'react-aria';
+import { ItemProps, ListProps, ListState, OverlayTriggerState } from 'react-stately';
+
+import { MultiSelectSize } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.types.js';
+
+export type MultiSelectContextProps<T extends object = object> = {
+  size?: MultiSelectSize;
+  overlayState: OverlayTriggerState;
+  listState: ListState<T>;
+  buttonRef: RefObject<HTMLButtonElement>;
+  listBoxRef: RefObject<HTMLUListElement>;
+  popoverRef: RefObject<HTMLDivElement>;
+  selectAllRef: RefObject<HTMLInputElement>;
+  inputRef: RefObject<HTMLInputElement>;
+  filterText: string;
+  overlayProps: DOMProps;
+  placement?: AriaPopoverProps['placement'];
+  portalContainer?: Element;
+};
+
+export type MultiSelectItemProps<T extends object = object> = { description?: string } & ItemProps<T>;
+
+// Props for the items that can be passed to the MultiSelect component
+export type MultiSelectValue = { textValue?: string; content?: ReactNode; key: Key; description?: string };
+
+export type MultiSelectProps<T> = {
+  /**
+   * Props for the list box within the multi-select
+   */
+  listBoxProps?: Omit<AriaListBoxOptions<T>, 'state' | 'selectionMode'>;
+  /**
+   * id for the base multi-select container for accessibility/other uses
+   */
+  id?: string;
+  /**
+   * Placeholder text for the input
+   */
+  placeholder?: string;
+  /**
+   * Manual placement of the dropdown, will flip automatically if there is not enough space
+   * @default bottom
+   */
+  placement?: AriaPopoverProps['placement'];
+  /**
+   * Element where the popover will be rendered, by default it will be into the body
+   */
+  portalContainer?: Element;
+  /**
+   * Whether to show the section for the selected option in the field i.e. "Transaction: Savings" rather than "Savings"
+   * NOTE: Only works with single selectionMode multi-selects
+   */
+  showSingleSectionTitle?: boolean;
+  /**
+   * Size of input
+   * @default medium
+   */
+  size?: MultiSelectSize;
+} & ListProps<T>;

package/src/components/multi-select/utils/filter-nodes.ts

@@ -0,0 +1,29 @@
+import { Node } from '@react-types/shared';
+
+export function filterNodes<T>(
+  nodes: Iterable<Node<T>>,
+  filterText: string,
+  contains: (value: string, search: string) => boolean,
+): Iterable<Node<T>> {
+  if (!filterText) return nodes;
+
+  const arr = Array.from(nodes);
+
+  return arr.flatMap((node: Node<T>) => {
+    if (node.type !== 'section') {
+      return contains(node.textValue ?? '', filterText) ? [node] : [];
+    }
+
+    // See https://github.com/adobe/react-spectrum/discussions/4348 for why this deprecation is ignored
+    // eslint-disable-next-line sonarjs/deprecation
+    const childNodesArr = Array.from(node.childNodes || []);
+    const matchedChildren: Node<T>[] = childNodesArr.filter((child: Node<T>) =>
+      contains(child.textValue ?? '', filterText),
+    );
+
+    if (matchedChildren.length === 0) return [];
+
+    const sectionWithMatches = { ...node, childNodes: matchedChildren } as Node<T>;
+    return [sectionWithMatches];
+  });
+}

package/src/components/pass-code/pass-code.component.tsx

@@ -18,7 +18,10 @@ import { styles as passCodeStyles } from './pass-code.styles.js';
 import { PassCodeProps, PassCodeRef } from './pass-code.types.js';
 
 export const PassCode = forwardRef<PassCodeRef, PassCodeProps>(
-  ({ length, value, onChange, onComplete, className, type = 'alphanumeric', onBlur, ...props }, ref) => {
+  (
+    { length, value, onChange, onComplete, onPasteComplete, className, type = 'alphanumeric', onBlur, ...props },
+    ref,
+  ) => {
     const [internalPasscode, setInternalPasscode] = useState<string[]>(Array.from({ length }).map(() => ''));
     const passcode = value ? value : internalPasscode;
     const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
@@ -84,11 +87,15 @@ export const PassCode = forwardRef<PassCodeRef, PassCodeProps>(
         } else {
           setInternalPasscode(newPasscode);
         }
-        if (newPasscode.filter(passcode => !passcode).length === 0 && onComplete) {
-          onComplete(newPasscode.join(''));
+        if (newPasscode.filter(passcode => !passcode).length === 0) {
+          if (onPasteComplete) {
+            onPasteComplete(newPasscode.join(''));
+          } else if (onComplete) {
+            onComplete(newPasscode.join(''));
+          }
         }
       },
-      [passcode, length, onChange, onComplete, type],
+      [passcode, length, onChange, onComplete, onPasteComplete, type],
     );
 
     const handleKeyDown = useCallback(

package/src/components/pass-code/pass-code.types.ts

@@ -20,6 +20,10 @@ export type PassCodeProps = {
    * Callback when the passcode is completely typed
    */
   onComplete?: (passcode: string) => void;
+  /**
+   * Callback when the passcode is completely pasted
+   */
+  onPasteComplete?: (passcode: string) => void;
   /**
    * Type of passcode input
    */

package/src/components/pictogram/pictogram.styles.ts

@@ -8,9 +8,8 @@ export const fill = tv({
   base: '',
   variants: {
     mode: {
-      dark: 'fill-surface-pictogram-base',
-      light: 'fill-surface-mono',
-      reversed: 'fill-surface-reversed',
+      base: 'fill-surface-pictogram-base',
+      mono: 'fill-surface-mono',
       duo: '',
     },
     highlight: {

package/src/components/pictogram/pictogram.types.ts

@@ -1,6 +1,6 @@
 import { type SVGAttributes } from 'react';
 
-export type PictogramMode = 'dark' | 'light' | 'duo' | 'reversed';
+export type PictogramMode = 'base' | 'mono' | 'duo';
 
 export type PictogramProps = SVGAttributes<SVGElement> & {
   /**

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

@@ -1,9 +1,9 @@
-import React, { useRef } from 'react';
-import { FocusScope } from 'react-aria';
+import React, { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../../../utils/breakpoint.util.js';
+import { ButtonRef } from '../../../button/button.types.js';
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
 
@@ -16,42 +16,66 @@ export function BasePanel({
   heading,
   headingTag: Tag = 'h1',
   content,
-  placement = 'bottom',
+  placement = 'top',
   id,
   triggerRef,
+  onClose,
+  open,
   portal,
 }: PanelProps) {
   const popoverRef = useRef<HTMLDivElement>(null);
   const arrowRef = useRef<HTMLDivElement>(null);
   const breakpoint = useBreakpoint();
-  const resolvedPlacement = resolveResponsiveVariant(placement, breakpoint);
-  const { popoverPosition, arrowPosition } = usePanel({ state, placement: resolvedPlacement, triggerRef, portal });
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const buttonRef = useRef<ButtonRef>(null);
+  const { popoverPosition, arrowPosition, localPlacement } = usePanel({
+    state,
+    placement,
+    triggerRef,
+    portal,
+    popoverRef,
+  });
+  const resolvedPlacement = resolveResponsiveVariant(localPlacement, breakpoint);
 
   const styles = panelStyles({ placement: resolvedPlacement });
+  useEffect(() => {
+    if (state.isOpen && !open) {
+      if (headingRef.current) {
+        headingRef.current.focus();
+      } else {
+        buttonRef.current?.focus();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.isOpen]);
+
   return (
-    <FocusScope autoFocus restoreFocus>
-      <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef}>
-        <div className={styles.content()}>
-          {heading && (
-            <Tag tabIndex={0} className={styles.heading()}>
-              {heading}
-            </Tag>
-          )}
-          <div className={styles.body()} tabIndex={0}>
-            {content}
-          </div>
-          <Button
-            look="link"
-            size="small"
-            onClick={() => state.close()}
-            className={styles.closeBtn()}
-            iconAfter={() => <CloseIcon color="primary" size="small" aria-hidden />}
-            aria-label="Close popover"
-          />
+    <div style={popoverPosition} className={styles.popover()} test-id="popover" id={id} ref={popoverRef} role="dialog">
+      <div className={styles.content()}>
+        {heading && (
+          <Tag className={styles.heading()} tabIndex={-1} ref={headingRef}>
+            {heading}
+          </Tag>
+        )}
+        <div className={styles.body()} id="popover-content">
+          {content}
         </div>
-        <div aria-hidden className={styles.arrow()} style={arrowPosition} test-id="arrow" ref={arrowRef} />
+        <Button
+          look="link"
+          tag="button"
+          size="small"
+          ref={buttonRef}
+          onClick={() => {
+            onClose?.();
+            state.close();
+          }}
+          className={styles.closeBtn()}
+          iconAfter={() => <CloseIcon color="primary" size="small" aria-hidden />}
+          aria-label="Close popover"
+        />
       </div>
-    </FocusScope>
+      <div aria-hidden className={styles.arrow()} style={arrowPosition} test-id="arrow" ref={arrowRef} />
+    </div>
   );
 }