@bspk/ui 1.1.18 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.18",
+    "version": "1.1.20",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/Dropdown.tsx

@@ -21,7 +21,7 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
     'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'
 > &
     InvalidPropsLibrary &
-    Pick<MenuProps<T>, 'isMulti' | 'itemCount' | 'renderListItem'> & {
+    Pick<MenuProps<T>, 'isMulti' | 'itemCount' | 'renderListItem' | 'selectAll'> & {
         /**
          * Array of options to display in the dropdown
          *
@@ -52,7 +52,7 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
         /**
          * Placeholder for the dropdown
          *
-         * @default Select...
+         * @default Select one...
          */
         placeholder?: string;
         /**
@@ -94,6 +94,7 @@ function Dropdown({
     isMulti,
     renderListItem,
     style: styleProp,
+    selectAll,
 }: DropdownProps) {
     const id = useId(propId);
 
@@ -142,6 +143,7 @@ function Dropdown({
                         onChange?.(next);
                     }}
                     renderListItem={renderListItem}
+                    selectAll={selectAll}
                     selectedValues={selected}
                     {...menuProps}
                 />

package/src/Menu.tsx

@@ -1,13 +1,16 @@
 import './menu.scss';
-import { ComponentProps, CSSProperties, useMemo } from 'react';
+import { ComponentProps, CSSProperties, ReactNode, useMemo } from 'react';
 
 import { Checkbox } from './Checkbox';
 import { ListItem } from './ListItem';
-import { Txt } from './Txt';
 import { useId } from './hooks/useId';
 
 import { CommonProps, ElementProps, SetRef } from './';
 
+const DEFAULT = {
+    selectAll: 'Select All',
+};
+
 export const MIN_ITEM_COUNT = 3;
 export const MAX_ITEM_COUNT = 10;
 
@@ -68,12 +71,8 @@ export type MenuProps<T extends MenuItem = MenuItem> = CommonProps<'disabled' |
     items?: T[];
     /** A ref to the inner div element. */
     innerRef?: SetRef<HTMLDivElement>;
-    /**
-     * Message to display when no results are found
-     *
-     * @type multiline
-     */
-    noResultsMessage?: string;
+    /** Message to display when no results are found */
+    noResultsMessage?: ReactNode;
     /** The index of the currently highlighted item. */
     activeIndex?: number;
     /** The values of the selected items */
@@ -92,6 +91,17 @@ export type MenuProps<T extends MenuItem = MenuItem> = CommonProps<'disabled' |
      * @default false
      */
     isMulti?: boolean;
+    /**
+     * The label for the "Select All" option.
+     *
+     * Ignored if `isMulti` is false.
+     *
+     * If `isMulti` is `true`, defaults to "Select All". If a string, it will be used as the label. If false the select
+     * all option will not be rendered.
+     *
+     * @default false
+     */
+    selectAll?: boolean | string;
     /**
      * The function to call when the selected values change.
      *
@@ -118,24 +128,39 @@ function Menu({
     id: idProp,
     renderListItem,
     isMulti,
+    selectAll: selectAllProp,
     ...props
 }: ElementProps<MenuProps, 'div'>) {
     const menuId = useId(idProp);
-    const items = Array.isArray(itemsProp) ? itemsProp : [];
-    const itemCount = useMemo(
-        () =>
+
+    const selectAll = useMemo(() => {
+        if (!isMulti) return false;
+        if (selectAllProp && typeof selectAllProp === 'string') return selectAllProp;
+        return selectAllProp === true ? DEFAULT.selectAll : false;
+    }, [isMulti, selectAllProp]);
+
+    const { items, itemCount } = useMemo(() => {
+        const itemsNext = Array.isArray(itemsProp) ? itemsProp : [];
+        return {
+            items: itemsNext,
             // Ensure itemCount is within the range of items.length
-            Math.min(
-                items.length,
+            itemCount: Math.min(
+                itemsNext.length,
                 // pin itemCountProp to a range of 3 to 10
                 Math.max(MIN_ITEM_COUNT, Math.min(itemCountProp, MAX_ITEM_COUNT)),
             ),
-        [itemCountProp, items.length],
+        };
+    }, [itemCountProp, itemsProp]);
+
+    const allSelected = useMemo(
+        () => !!(items.length && items.every((item) => selectedValues.includes(item.value))),
+        [items, selectedValues],
     );
 
     return (
         <div
             {...props}
+            aria-multiselectable={isMulti || undefined}
             data-bspk="menu"
             data-disabled={disabled || undefined}
             data-item-count={itemCount || undefined}
@@ -145,87 +170,101 @@ function Menu({
             role="listbox"
             style={{ ...props.style, '--item-count': itemCount } as CSSProperties}
         >
-            {items.length ? (
-                items.map((item, index) => {
-                    const itemId = item.id || menuItemId(menuId, index);
-
-                    const selected = Array.isArray(selectedValues) && selectedValues.includes(item.value);
-
-                    const renderProps = renderListItem?.({
-                        activeIndex,
-                        index,
-                        item,
-                        selectedValues,
-                        isMulti,
-                        menuId: menuId || '',
-                        selected,
-                        itemId,
-                    });
-
-                    return (
-                        <ListItem
-                            {...renderProps}
-                            active={activeIndex === index || undefined}
-                            aria-disabled={item.disabled || undefined}
-                            aria-posinset={index + 1}
-                            aria-selected={selected || undefined}
-                            as="button"
-                            data-menu-item
-                            data-selected={selected || undefined}
-                            disabled={item.disabled || undefined}
-                            id={itemId}
-                            key={itemId}
-                            label={renderProps?.label?.toString() || item.label?.toString()}
-                            onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                                if (renderProps) renderProps?.onClick?.(event);
-
-                                if (onChange) {
-                                    if (!isMulti) {
-                                        onChange?.([item.value], event);
-                                        return;
-                                    }
-                                    onChange(
-                                        selected
-                                            ? selectedValues.filter((value) => value !== item.value)
-                                            : [...selectedValues, item.value],
-                                        event,
-                                    );
-                                }
+            {isMulti && selectAll && (
+                <ListItem
+                    as="button"
+                    data-selected={allSelected || undefined}
+                    key="select-all"
+                    label={selectAll}
+                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                        onChange?.(allSelected ? [] : items.map((item) => item.value), event);
+                    }}
+                    role="option"
+                    tabIndex={-1}
+                    trailing={
+                        <Checkbox
+                            aria-label={selectAll}
+                            checked={!!allSelected}
+                            name=""
+                            onChange={(checked) => {
+                                onChange?.(checked ? items.map((item) => item.value) : []);
                             }}
-                            role="option"
-                            tabIndex={-1}
-                            trailing={
-                                isMulti ? (
-                                    <Checkbox
-                                        aria-label={item.label}
-                                        checked={selected}
-                                        name={item.value}
-                                        onChange={(checked) => {
-                                            onChange?.(
-                                                checked
-                                                    ? selectedValues.filter((value) => value !== item.value)
-                                                    : [...selectedValues, item.value],
-                                            );
-                                        }}
-                                        value={item.value}
-                                    />
-                                ) : (
-                                    renderProps?.trailing
-                                )
-                            }
+                            value=""
                         />
-                    );
-                })
-            ) : (
-                <>
-                    <Txt as="div" variant="heading-h5">
-                        No results found
-                    </Txt>
-                    <Txt as="div" variant="body-base">
-                        {noResultsMessage}
-                    </Txt>
-                </>
+                    }
+                />
             )}
+            {items.length
+                ? items.map((item, index) => {
+                      const itemId = item.id || menuItemId(menuId, index);
+
+                      const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
+
+                      const renderProps = renderListItem?.({
+                          activeIndex,
+                          index,
+                          item,
+                          selectedValues,
+                          isMulti,
+                          menuId: menuId || '',
+                          selected,
+                          itemId,
+                      });
+
+                      return (
+                          <ListItem
+                              {...renderProps}
+                              active={activeIndex === index || undefined}
+                              aria-disabled={item.disabled || undefined}
+                              aria-posinset={index + 1}
+                              aria-selected={selected || undefined}
+                              as="button"
+                              //data-selected={selected || undefined}
+                              disabled={item.disabled || undefined}
+                              id={itemId}
+                              key={itemId}
+                              label={renderProps?.label?.toString() || item.label?.toString()}
+                              onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                                  if (renderProps) renderProps?.onClick?.(event);
+
+                                  if (onChange) {
+                                      if (!isMulti) {
+                                          onChange?.([item.value], event);
+                                          return;
+                                      }
+                                      onChange(
+                                          selected
+                                              ? selectedValues.filter((value) => value !== item.value)
+                                              : [...selectedValues, item.value],
+                                          event,
+                                      );
+                                  }
+                              }}
+                              role="option"
+                              tabIndex={-1}
+                              trailing={
+                                  isMulti ? (
+                                      <Checkbox
+                                          aria-label={item.label}
+                                          checked={selected}
+                                          name={item.value}
+                                          onChange={(checked) => {
+                                              onChange?.(
+                                                  checked
+                                                      ? selectedValues.filter((value) => value !== item.value)
+                                                      : [...selectedValues, item.value],
+                                              );
+                                          }}
+                                          value={item.value}
+                                      />
+                                  ) : (
+                                      renderProps?.trailing
+                                  )
+                              }
+                          />
+                      );
+                  })
+                : noResultsMessage}
         </div>
     );
 }

package/src/SearchBar.tsx

@@ -5,21 +5,26 @@ import { useRef } from 'react';
 import { MenuItem, MenuProps, Menu } from './Menu';
 import { Portal } from './Portal';
 import { TextInputProps, TextInput } from './TextInput';
+import { Txt } from './Txt';
 import { useFloatingMenu } from './hooks/useFloatingMenu';
 import { useId } from './hooks/useId';
 //import { useFloatingMenu } from './hooks/useFloatingMenu';
 
-export type SearchBarProps = Pick<MenuProps, 'itemCount' | 'items' | 'noResultsMessage'> &
+export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, 'itemCount' | 'noResultsMessage'> &
     Pick<TextInputProps, 'aria-label' | 'id' | 'inputRef' | 'name' | 'placeholder' | 'size'> & {
-        /** The current value of the search bar. */
-        searchValue?: string;
+        /**
+         * The current value of the search bar.
+         *
+         * @default Search
+         */
+        value?: string;
         /**
          * Handler for state updates.
          *
          * @type (value: String) => void
          * @required
          */
-        setSearchValue: (value: string) => void;
+        onChange: (value: string) => void;
         /*
          * Handler for item selection.
          *
@@ -27,6 +32,38 @@ export type SearchBarProps = Pick<MenuProps, 'itemCount' | 'items' | 'noResultsM
          * @required
          */
         onSelect: (item?: MenuItem) => void;
+        /**
+         * Content to display in the menu.
+         *
+         * @example
+         *     [
+         *         { value: '1', label: 'Apple Pie' },
+         *         { value: '2', label: 'Banana Split' },
+         *         { value: '3', label: 'Cherry Tart' },
+         *         { value: '4', label: 'Dragonfruit Sorbet' },
+         *         { value: '5', label: 'Elderberry Jam' },
+         *         { value: '6', label: 'Fig Newton' },
+         *         { value: '7', label: 'Grape Soda' },
+         *         { value: '8', label: 'Honeydew Smoothie' },
+         *         { value: '9', label: 'Ice Cream Sandwich' },
+         *         { value: '10', label: 'Jackfruit Pudding' },
+         *     ];
+         *
+         * @type Array<MenuItem>
+         */
+        items?: T[];
+        /**
+         * Message to display when no results are found
+         *
+         * @type multiline
+         */
+        noResultsMessage?: string;
+        /**
+         * Whether to show or hide menu.
+         *
+         * @default true
+         */
+        showMenu?: boolean;
     };
 
 /**
@@ -45,8 +82,9 @@ function SearchBar({
     name,
     size = 'medium',
     onSelect,
-    searchValue,
-    setSearchValue,
+    value,
+    onChange,
+    showMenu = true,
 }: SearchBarProps) {
     const id = useId(idProp);
     const {
@@ -61,49 +99,66 @@ function SearchBar({
 
     return (
         <>
-            <TextInput
-                aria-label={ariaLabel}
-                autoComplete="off"
-                containerRef={triggerRef}
-                data-bspk="search-bar"
-                id={id}
-                inputRef={(node) => {
-                    inputRef?.(node || null);
-                    inputRefLocal.current = node;
-                }}
-                leading={<SvgSearch />}
-                name={name}
-                onChange={(str) => setSearchValue(str)}
-                placeholder={placeholder}
-                size={size}
-                value={searchValue}
-                {...triggerProps}
-                onClick={(event) => {
-                    if (items?.length) onClick(event);
-                }}
-                onKeyDownCapture={(event) => {
-                    const handled = onKeyDownCapture(event);
+            <div data-bspk="search-bar">
+                <TextInput
+                    aria-label={ariaLabel}
+                    autoComplete="off"
+                    containerRef={triggerRef}
+                    id={id}
+                    inputRef={(node) => {
+                        inputRef?.(node || null);
+                        inputRefLocal.current = node;
+                    }}
+                    leading={<SvgSearch />}
+                    name={name}
+                    onChange={(str) => onChange(str)}
+                    placeholder={placeholder}
+                    size={size}
+                    value={value}
+                    {...triggerProps}
+                    onClick={(event) => {
+                        if (items?.length) onClick(event);
+                    }}
+                    onKeyDownCapture={(event) => {
+                        const handled = onKeyDownCapture(event);
 
-                    if (handled) return;
+                        if (handled) return;
 
-                    inputRefLocal.current?.focus();
-                }}
-            />
-            <Portal>
-                <Menu
-                    itemCount={itemCount}
-                    items={items}
-                    noResultsMessage={noResultsMessage}
-                    onChange={(selectedValues, event) => {
-                        event?.preventDefault();
-                        const item = items?.find((i) => i.value === selectedValues[0]);
-                        onSelect?.(item);
-                        setSearchValue(item?.label || '');
-                        closeMenu();
+                        inputRefLocal.current?.focus();
                     }}
-                    {...menuProps}
                 />
-            </Portal>
+            </div>
+            {showMenu && (
+                <Portal>
+                    <Menu
+                        itemCount={itemCount}
+                        items={items}
+                        noResultsMessage={
+                            !!value?.length &&
+                            !items?.length && (
+                                <>
+                                    <Txt as="div" variant="heading-h5">
+                                        No results found
+                                    </Txt>
+                                    {noResultsMessage && (
+                                        <Txt as="div" variant="body-base">
+                                            {noResultsMessage}
+                                        </Txt>
+                                    )}
+                                </>
+                            )
+                        }
+                        onChange={(selectedValues, event) => {
+                            event?.preventDefault();
+                            const item = items?.find((i) => i.value === selectedValues[0]);
+                            onSelect?.(item);
+                            onChange(item?.label || '');
+                            closeMenu();
+                        }}
+                        {...menuProps}
+                    />
+                </Portal>
+            )}
         </>
     );
 }

package/src/avatar.scss

@@ -1,6 +1,7 @@
 [data-bspk='avatar'] {
     --height: var(--spacing-sizing-10);
     --font: var(--labels-base);
+    --svg-size: var(--spacing-sizing-10);
 
     &:not([data-color]) {
         --foreground: var(--foreground-neutral-on-surface);
@@ -28,49 +29,69 @@
         max-width: 100%;
     }
 
+    svg {
+        width: var(--svg-size);
+        height: var(--svg-size);
+    }
+
+    [data-icon] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
     &[data-size='x-small'] {
         --height: var(--spacing-sizing-06);
         --font: var(--labels-x-small);
+        --svg-size: var(--spacing-sizing-04);
     }
 
     &[data-size='small'] {
         --height: var(--spacing-sizing-08);
         --font: var(--labels-small);
+        --svg-size: var(--spacing-sizing-05);
     }
 
     &[data-size='medium'] {
         --height: var(--spacing-sizing-10);
         --font: var(--labels-base);
+        --svg-size: var(--spacing-sizing-05);
     }
 
     &[data-size='large'] {
         --height: var(--spacing-sizing-12);
         --font: var(--labels-large);
+        --svg-size: var(--spacing-sizing-06);
     }
 
     &[data-size='x-large'] {
         --height: var(--spacing-sizing-14);
         --font: var(--subheader-x-large);
+        --svg-size: var(--spacing-sizing-08);
     }
 
     &[data-size='xx-large'] {
         --height: var(--spacing-sizing-17);
         --font: var(--subheader-xx-large);
+        --svg-size: var(--spacing-sizing-09);
     }
 
     &[data-size='xxx-large'] {
         --height: var(--spacing-sizing-19);
         --font: var(--display-regular-small);
+        --svg-size: var(--spacing-sizing-12);
     }
 
     &[data-size='xxxx-large'] {
         --height: var(--spacing-sizing-21);
         --font: var(--display-regular-medium);
+        --svg-size: var(--spacing-sizing-15);
     }
 
     &[data-size='xxxxx-large'] {
         --height: var(--spacing-sizing-23);
         --font: var(--display-regular-large);
+        --svg-size: var(--spacing-sizing-17);
     }
 }
 

package/src/demo/examples.tsx

@@ -19,6 +19,7 @@ import { ModalProps } from '../Modal';
 import { Popover, PopoverProps } from '../Popover';
 import { ProgressionStepperProps } from '../ProgressionStepper';
 import { Radio } from '../Radio';
+import { SearchBarProps } from '../SearchBar';
 import { SegmentedControlProps } from '../SegmentedControl';
 import { Switch } from '../Switch';
 import { TabGroupProps } from '../TabGroup';
@@ -550,6 +551,32 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
             },
         ]),
     },
+    SearchBar: {
+        containerStyle: { width: '400px' },
+        render: ({ props: state, Component, preset }) => {
+            const props = { ...state } as SearchBarProps;
+
+            if (preset?.label === 'Show Filtered Items') {
+                const searchValue = (props.value as string | undefined)?.trim()?.toLowerCase() || '';
+                if (Array.isArray(props.items) && searchValue.length)
+                    props.items = props.items?.filter((item: MenuItem) =>
+                        item.label.toLowerCase().includes(searchValue),
+                    );
+                props.showMenu = !!searchValue;
+            }
+
+            return <Component {...props} items={props.items || []} />;
+        },
+        presets: setPresets<SearchBarProps>([
+            {
+                // we change the items and showMenu based on the input value
+                label: 'Show Filtered Items',
+                state: {
+                    showMenu: false,
+                },
+            },
+        ]),
+    },
     TextInput: {
         containerStyle: { width: '280px' },
         presets: setPresets<TextInputProps>([

package/src/dropdown.scss

@@ -56,6 +56,10 @@
         }
     }
 
+    [data-bspk='list-item'][data-selected] {
+        background: var(--surface-brand-primary-highlight);
+    }
+
     &[data-size='small'] {
         --dropdown-height: var(--spacing-sizing-08);
         --dropdown-font: var(--body-small);

package/src/hooks/useKeyboardNavigation.ts

@@ -79,7 +79,8 @@ export function useKeyboardNavigation(
         if (next >= itemElements.length) next = 0;
 
         itemElements.forEach((el, index) => {
-            el.dataset.selected = index === next ? 'true' : undefined;
+            if (index === next) el.setAttribute('data-selected', 'true');
+            else el.removeAttribute('data-selected');
         });
 
         scrollElementIntoView(itemElements[next], containerElement);
@@ -90,7 +91,7 @@ export function useKeyboardNavigation(
     return {
         handleKeyNavigation: handleArrowKeyNavigation,
         selectedIndex,
-        selectedId: selectedIndex === -1 ? undefined : containerElement.children[selectedIndex].id,
+        selectedId: selectedIndex === -1 ? undefined : containerElement.children[selectedIndex]?.id,
         setSelectedIndex: setSelectedIndex,
     };
 }

package/src/menu.scss

@@ -30,6 +30,10 @@
     [data-bspk='list-item'] {
         min-height: var(--item-size);
         height: var(--item-size);
+
+        &[data-selected] {
+            background-color: var(--surface-brand-primary-highlight);
+        }
     }
 }