@westpac/ui 0.57.4 → 0.59.0

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

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    underlay: 'fixed inset-0 bg-black/5',
+    overlay: 'z-10 flex flex-col overflow-hidden rounded border border-border bg-white shadow-lg',
+  },
+});

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

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import type { AriaPopoverProps } from 'react-aria';
+
+export type MultiSelectPopoverProps = {
+  children: React.ReactNode;
+  className?: string;
+} & Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'>;

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 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/tooltip/components/tooltip-content/tooltip-content.component.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { styles } from './tooltip-content.styles.js';
 import { TooltipContentProps } from './tooltip-content.types.js';
 
-export function TooltipContent({ children, id }: TooltipContentProps) {
+export function TooltipContent({ children, id, position }: TooltipContentProps) {
   return children ? (
-    <span className={styles()} role="tooltip" id={id}>
+    <span className={styles({ position })} role="tooltip" id={id}>
       {children}
     </span>
   ) : null;

package/src/components/tooltip/components/tooltip-content/tooltip-content.styles.ts

@@ -2,4 +2,10 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   base: 'absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text',
+  variants: {
+    position: {
+      top: 'top-auto bottom-full',
+      bottom: 'top-full mt-2 mb-0',
+    },
+  },
 });

package/src/components/tooltip/components/tooltip-content/tooltip-content.types.ts

@@ -3,4 +3,5 @@ import { ReactNode } from 'react';
 export type TooltipContentProps = {
   children?: ReactNode;
   id: string;
+  position?: 'top' | 'bottom';
 };

package/src/components/tooltip/tooltip.component.tsx

@@ -8,7 +8,7 @@ import { styles } from './tooltip.styles.js';
 import { TooltipProps } from './tooltip.types.js';
 
 // TODO: Complete component/replace with a library that works (react-tooltip if can find a way to remove aria-described by for select)
-export function Tooltip({ children, tooltip, id, className }: TooltipProps) {
+export function Tooltip({ children, disabled, tooltip, id, className, position = 'bottom' }: TooltipProps) {
   const localId = useId();
   const [isOpen, setIsOpen] = useState(false);
   const tooltipWaitTime = useRef<NodeJS.Timeout | null>(null);
@@ -34,7 +34,7 @@ export function Tooltip({ children, tooltip, id, className }: TooltipProps) {
   }, []);
 
   useEffect(() => {
-    setIsOpen(isFocusVisible);
+    setIsOpen(isFocusVisible && !disabled);
   }, [isFocusVisible]);
 
   useEffect(() => {
@@ -55,7 +55,11 @@ export function Tooltip({ children, tooltip, id, className }: TooltipProps) {
   return (
     <span {...mergeProps(hoverProps, focusProps)} className={styles({ className })}>
       {children}
-      {isOpen && <TooltipContent id={id ?? localId}>{tooltip}</TooltipContent>}
+      {isOpen && (
+        <TooltipContent id={id ?? localId} position={position}>
+          {tooltip}
+        </TooltipContent>
+      )}
     </span>
   );
 }

package/src/components/tooltip/tooltip.types.ts

@@ -1,8 +1,12 @@
 import { ReactNode } from 'react';
 
+import { TooltipContentProps } from './components/tooltip-content/tooltip-content.types.js';
+
 export type TooltipProps = {
   children: ReactNode;
+  disabled?: boolean;
   tooltip: string;
   id?: string;
   className?: string;
+  position?: TooltipContentProps['position'];
 };