@bspk/ui 1.1.34 → 1.2.0

package/src/components/ListItem/ListItemExample.tsx

@@ -1,92 +1,41 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */ import { SvgContentCopy } from '@bspk/icons/ContentCopy';
-import { SvgDiamond } from '@bspk/icons/Diamond';
-
-import { Avatar } from '-/components/Avatar';
-import { Checkbox } from '-/components/Checkbox';
-import { Img } from '-/components/Img';
-import { Radio } from '-/components/Radio';
-import { Switch } from '-/components/Switch';
-import { Tag } from '-/components/Tag';
-import { Txt } from '-/components/Txt';
-import { ComponentExampleFn, DemoAction, DemoSetState } from '-/utils/demo';
-
-import { ListItem, ListItemProps } from '.';
+import { ElementType } from 'react';
+import { ListItem, ListItemProps } from './ListItem';
+import { createExampleChildElement } from '-/utils/createExampleChildElement';
+import { ComponentExampleFn } from '-/utils/demo';
 
 export const ListItemExample: ComponentExampleFn<ListItemProps> = ({ action, setState }) => ({
-    render: ({ props, Component, id }) => {
-        return (
-            <Component
-                {...props}
-                leading={createChildrenElement(props, 'leading', setState, action, id)}
-                trailing={createChildrenElement(props, 'trailing', setState, action, id)}
-            />
-        );
+    render: ({ props, id }) => {
+        const leading = createExampleChildElement({
+            exampleState: props,
+            name: 'leading',
+            setState,
+            action,
+            id,
+        });
+        const trailing = createExampleChildElement({
+            exampleState: props,
+            name: 'trailing',
+            setState,
+            action,
+            id,
+        });
+
+        let as: ElementType = props.as || 'div';
+
+        if (trailing.componentName && ['Checkbox', 'Radio', 'Switch'].includes(trailing.componentName)) as = 'label';
+
+        return <ListItem {...props} as={as} leading={leading.element} trailing={trailing.element} />;
     },
     presets: [
-        // really long label
         {
             value: 'long-label',
             label: 'Long Label',
             propState: {
                 label: 'This is a really long label that should be truncated if it exceeds the width of the ListItem',
+                subText: 'See below for other leading and trailing examples',
                 trailing: 'Checkbox',
                 leading: 'Avatar',
             },
         },
     ],
 });
-
-export const createChildrenElement = (
-    state: Record<string, any>,
-    name: string,
-    setState: DemoSetState,
-    action: DemoAction,
-    id?: string,
-) => {
-    const componentName = state[name];
-
-    if (componentName === 'Checkbox' || componentName === 'Radio' || componentName === 'Switch') {
-        let As: typeof Checkbox | typeof Radio | typeof Switch = Checkbox;
-        if (componentName === 'Radio') As = Radio;
-        else if (componentName === 'Switch') As = Switch;
-
-        const toggleName = `data-${name}-toggle-${id}`;
-        return (
-            <As
-                aria-label={`${componentName} demo`}
-                checked={state[toggleName]}
-                disabled={state.disabled}
-                name={`${name}-toggle`}
-                onChange={(checked: boolean) => {
-                    setState({ [toggleName]: checked });
-                }}
-                onClick={() => action(`${name} ${componentName} clicked`)}
-                readOnly={state.readOnly}
-                value={`${name}-${componentName}`}
-            />
-        );
-    }
-
-    if (componentName === 'ListItemButton')
-        return (
-            <ListItem.Button
-                icon={<SvgContentCopy />}
-                label="LI Button"
-                onClick={() => action('ListItem button clicked')}
-            />
-        );
-
-    if (componentName === 'Img') return <Img alt="placeholder" src="/placeholder.svg" />;
-
-    if (componentName === 'Avatar') return <Avatar name="List Item" showTooltip={false} />;
-
-    if (componentName === 'Tag') {
-        return <Tag>Tag</Tag>;
-    }
-
-    if (componentName === 'Txt') return <Txt>Text</Txt>;
-
-    if (componentName === 'Icon') return <SvgDiamond />;
-
-    return null;
-};

package/src/components/ListItem/list-item.scss

@@ -1,26 +1,19 @@
-body[data-bspk] a[data-bspk='list-item'] {
-    color: unset !important;
-    text-decoration: !important;
-    font: !important;
-}
-
 [data-bspk='list-item'] {
-    display: block;
+    display: flex;
     width: 100%;
-    padding: 0 var(--spacing-sizing-02);
+    user-select: none;
+    color: var(--foreground-neutral-on-surface);
+    height: 100%;
+    overflow: hidden;
+    min-height: var(--list-item-height);
+    flex-direction: row;
+    gap: var(--spacing-sizing-03);
+    padding: var(--spacing-sizing-02);
+    justify-items: stretch;
     background: unset;
     border: unset;
     margin: unset;
     text-decoration: unset;
-    user-select: none;
-    color: var(--foreground-neutral-on-surface);
-
-    &:is(a),
-    &:is(button),
-    &[onclick],
-    &[role='button'] {
-        cursor: pointer;
-    }
 
     [data-pseudo='focus'] &,
     &:focus-visible,
@@ -52,18 +45,6 @@ body[data-bspk] a[data-bspk='list-item'] {
         }
     }
 
-    [data-inner] {
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-        min-height: var(--list-item-height);
-        display: flex;
-        flex-direction: row;
-        gap: var(--spacing-sizing-03);
-        padding: var(--spacing-sizing-02) 0;
-        justify-items: stretch;
-    }
-
     [data-leading],
     [data-item-label],
     [data-trailing] {
@@ -106,7 +87,7 @@ body[data-bspk] a[data-bspk='list-item'] {
         pointer-events: none;
     }
 
-    [data-component='Img'] > img {
+    img {
         height: 36px;
         width: 36px;
         max-width: unset;

package/src/components/Listbox/Listbox.tsx

@@ -1,10 +1,10 @@
 import { ReactNode, useMemo } from 'react';
 
-import { CommonProps, ElementProps, SetRef } from '-';
 import { Checkbox } from '-/components/Checkbox';
 import { ListItem, ListItemProps } from '-/components/ListItem';
 import { Menu, MenuProps } from '-/components/Menu';
 import { useId } from '-/hooks/useId';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
 
 const DEFAULT = {
     selectAll: 'Select All',
@@ -20,7 +20,7 @@ export type ListboxItemProps = CommonProps<'disabled'> &
     };
 
 export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = CommonProps<'disabled' | 'id'> &
-    Pick<MenuProps, 'itemDisplayCount'> & {
+    Pick<MenuProps, 'itemCount' | 'itemDisplayCount' | 'onOutsideClick' | 'owner'> & {
         /**
          * Content to display in the listbox.
          *
@@ -83,6 +83,7 @@ export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = Com
          * Usually only used for showing no items found.
          */
         children?: ReactNode;
+        includeAriaLabel?: boolean;
     };
 
 /**
@@ -117,10 +118,12 @@ export type ListboxProps<Item extends ListboxItemProps = ListboxItemProps> = Com
  *     }
  *
  * @name Listbox
- * @phase Backlog
+ * @phase Utility
  */
-function Listbox<Item extends ListboxItemProps>({
+export function Listbox<Item extends ListboxItemProps>({
+    includeAriaLabel,
     itemDisplayCount,
+    itemCount,
     items = [],
     innerRef,
     onChange,
@@ -132,6 +135,7 @@ function Listbox<Item extends ListboxItemProps>({
     isMulti,
     selectAll: selectAllProp,
     children,
+    owner,
     ...props
 }: ElementProps<ListboxProps<Item>, 'div'>) {
     const menuId = useId(idProp);
@@ -152,16 +156,18 @@ function Listbox<Item extends ListboxItemProps>({
             {...props}
             aria-multiselectable={isMulti || undefined}
             data-bspk="listbox"
+            data-bspk-owner={owner || undefined}
             data-disabled={disabled || undefined}
             data-no-items={!items.length || undefined}
             id={menuId}
             innerRef={innerRef}
-            itemCount={items.length}
-            itemDisplayCount={itemDisplayCount}
+            itemCount={itemCount || items.length}
+            itemDisplayCount={itemDisplayCount || items.length}
             role="listbox"
         >
             {isMulti && selectAll && (
                 <ListItem
+                    as="label"
                     data-selected={allSelected || undefined}
                     id={`${menuId}-select-all`}
                     key="select-all"
@@ -170,7 +176,6 @@ function Listbox<Item extends ListboxItemProps>({
                         onChange?.(allSelected ? [] : items.map((item) => item.value), event);
                     }}
                     role="option"
-                    tabIndex={-1}
                     trailing={
                         <Checkbox
                             aria-label={selectAll}
@@ -200,11 +205,11 @@ function Listbox<Item extends ListboxItemProps>({
                         {...renderProps}
                         active={activeIndex === index || undefined}
                         aria-disabled={item.disabled || undefined}
-                        aria-posinset={index + 1}
                         aria-selected={selected || undefined}
-                        as="button"
+                        as={isMulti ? 'label' : 'button'}
                         disabled={item.disabled || undefined}
                         id={`${menuId}-item-${index}`}
+                        includeAriaLabel={includeAriaLabel}
                         key={`${menuId}-item-${index}`}
                         label={renderProps?.label?.toString() || item.label?.toString()}
                         onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -222,7 +227,6 @@ function Listbox<Item extends ListboxItemProps>({
                             }
                         }}
                         role="option"
-                        tabIndex={-1}
                         trailing={
                             isMulti ? (
                                 <Checkbox
@@ -250,8 +254,4 @@ function Listbox<Item extends ListboxItemProps>({
     );
 }
 
-Listbox.bspkName = 'Listbox';
-
-export { Listbox };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Menu/Menu.tsx

@@ -1,75 +1,68 @@
-import { ReactNode, useMemo } from 'react';
+// import { ReactNode, useMemo, useRef } from 'react';
+import { ReactNode, useRef } from 'react';
 
-import { CommonProps, ElementProps, SetRef } from '-';
-import { Portal } from '-/components/Portal';
-import { Scrim } from '-/components/Scrim';
+import { Portal, PortalProps } from '-/components/Portal';
 import { useId } from '-/hooks/useId';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
+
 import './menu.scss';
 
 export function menuItemId(menuId: string, index: number) {
     return `menu-${menuId}-item-${index}`;
 }
 
-export const MIN_ITEM_COUNT = 3;
-export const MAX_ITEM_COUNT = 10;
-
-// returns the item count to display based on the items and the itemDisplayCount bounded by the MIN_ITEM_COUNT and MAX_ITEM_COUNT
-function boundCount(itemLength = 0, itemDisplayCount = 0) {
-    const minItemCount = Math.max(MIN_ITEM_COUNT, itemLength);
-    const maxItemCount = Math.min(MAX_ITEM_COUNT, itemLength);
-    return (
-        // Ensure we don't display less than the minimum item count
-        Math.min(
-            minItemCount,
-            // Ensure we don't display more items than available
-            Math.min(maxItemCount, itemDisplayCount),
-        )
-    );
-}
-
-export type MenuProps = CommonProps<'data-bspk-owner' | 'id'> & {
-    /** A ref to the inner div element. */
-    innerRef?: SetRef<HTMLDivElement>;
-    /**
-     * The items to display in the menu. These should be ListItem and Divider components.
-     *
-     * @required
-     */
-    children: ReactNode;
-    /**
-     * Should the menu be rendered in a portal? This is useful for menus that need to be rendered outside of the normal
-     * DOM flow, such as dropdowns or modals.
-     *
-     * @default true
-     */
-    portal?: boolean;
-    /**
-     * The number of items to show in the menu. This is used to determine the height of the menu.
-     *
-     * - If set to `false`, the menu will not have a maximum height and will grow to fit its content.
-     * - If set to a number, the menu will display that many items before scrolling.
-     * - If not set or set to `undefined`, the menu will default to showing a minimum of 3 items and a maximum of 10
-     *   items.
-     */
-    itemDisplayCount?: number | false;
-    /**
-     * The number of items in the menu.
-     *
-     * This is used to determine the maximum height of the menu when `itemDisplayCount` is set to a number.
-     *
-     * @required
-     */
-    itemCount?: number;
-    /**
-     * Whether the menu is rendered as a floating element.
-     *
-     * @default true
-     */
-    floating?: boolean;
-    /** A function that is called when the user clicks outside of the menu. */
-    onOutsideClick?: () => void;
-};
+export type MenuProps = CommonProps<'id' | 'owner'> &
+    Pick<PortalProps, 'container'> & {
+        /** A ref to the inner div element. */
+        innerRef?: SetRef<HTMLDivElement>;
+        /**
+         * The items to display in the menu. These should be ListItem and Divider components.
+         *
+         * @required
+         */
+        children: ReactNode;
+        /**
+         * Should the menu be rendered in a portal? This is useful for menus that need to be rendered outside of the
+         * normal DOM flow, such as dropdowns or modals.
+         *
+         * @default true
+         */
+        portal?: boolean;
+        /**
+         * The number of items to show in the menu. This is used to determine the height of the menu.
+         *
+         * @default 1
+         */
+        itemDisplayCount?: number;
+        /**
+         * The number of items in the menu.
+         *
+         * @default 1
+         */
+        itemCount?: number;
+        /**
+         * Whether the menu is rendered as a floating element.
+         *
+         * @default true
+         */
+        floating?: boolean;
+        /**
+         * A function that is called when the user clicks outside of the menu.
+         *
+         * @required
+         */
+        onOutsideClick: () => void;
+        /**
+         * Whether or not the menu is scrollable.
+         *
+         * Setting to false will override itemDisplayCount.
+         *
+         * @default true
+         */
+        scroll?: boolean;
+    };
 
 /**
  * A container housing a simple list of options presented to the customer to select one option at a time.
@@ -81,51 +74,60 @@ export type MenuProps = CommonProps<'data-bspk-owner' | 'id'> & {
  *
  *     export function Example() {
  *         return (
- *             <Menu>
+ *             <Menu scroll={false}>
+ *                 <ListItem label="List Item" />
+ *                 <ListItem label="List Item" />
  *                 <ListItem label="List Item" />
  *             </Menu>
  *         );
  *     }
  *
  * @name Menu
- * @phase DesignReview
+ * @phase UXReview
  */
-function Menu({
+export function Menu({
     //
     innerRef,
     id: idProp,
     children,
     portal = true,
-    itemDisplayCount: itemDisplayCountProp,
-    itemCount,
+    itemDisplayCount = 1,
+    itemCount = 1,
     floating = true,
     onOutsideClick,
+    owner,
+    scroll = true,
+    container,
     ...props
 }: ElementProps<MenuProps, 'div'>) {
     const menuId = useId(idProp);
 
-    const itemDisplayCount = useMemo(() => {
-        return itemDisplayCountProp && boundCount(itemCount, itemDisplayCountProp);
-    }, [itemCount, itemDisplayCountProp]);
+    const menuElement = useRef(null as HTMLDivElement | null);
+
+    const scrollDefault = scroll === true && itemCount > itemDisplayCount;
+
+    useOutsideClick({
+        elements: [menuElement.current],
+        callback: () => onOutsideClick?.(),
+        disabled: !onOutsideClick,
+    });
 
     const menu = (
         <>
-            {floating && <Scrim data-bspk-owner="menu" onClick={() => onOutsideClick?.()} variant="dropdown" />}
             <div
-                role="listbox"
                 {...props}
                 data-bspk="menu"
+                data-bspk-owner={owner || undefined}
                 data-floating={floating || undefined}
+                data-scroll={scroll || scrollDefault || undefined}
                 id={menuId}
-                ref={innerRef}
+                ref={(node) => {
+                    innerRef?.(node);
+                    menuElement.current = node;
+                }}
                 style={cssWithVars({
                     ...props.style,
-                    '--overflow-y':
-                        itemCount && itemDisplayCount && itemCount > itemDisplayCount ? 'scroll' : undefined,
-                    maxHeight:
-                        itemDisplayCount === false
-                            ? 'auto'
-                            : `calc(calc(${itemDisplayCount} * var(--list-item-height)) + 2px /* borders */)`,
+                    '--item-display-count': itemDisplayCount,
                 })}
             >
                 {children}
@@ -133,11 +135,7 @@ function Menu({
         </>
     );
 
-    return portal ? <Portal>{menu}</Portal> : menu;
+    return portal ? <Portal container={container}>{menu}</Portal> : menu;
 }
 
-Menu.bspkName = 'Menu';
-
-export { Menu };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Menu/MenuExample.tsx

@@ -7,16 +7,14 @@ import { SvgLogout } from '@bspk/icons/Logout';
 import { SvgMenuBook } from '@bspk/icons/MenuBook';
 import { SvgSettings } from '@bspk/icons/Settings';
 
+import { MenuProps } from '.';
 import { Avatar } from '-/components/Avatar';
 import { Divider } from '-/components/Divider';
 import { ListItem } from '-/components/ListItem';
 import { Switch } from '-/components/Switch';
+import { ElementProps } from '-/types/common';
 import { ComponentExampleFn } from '-/utils/demo';
 
-import { ElementProps } from '../..';
-
-import { MenuProps } from '.';
-
 export const MenuExample: ComponentExampleFn<ElementProps<MenuProps, 'div'> & { 'data-dark-mode': boolean }> = ({
     action,
 }) => ({
@@ -24,7 +22,6 @@ export const MenuExample: ComponentExampleFn<ElementProps<MenuProps, 'div'> & {
         return (
             <Component
                 {...props}
-                aria-label="Settings Menu"
                 floating={false}
                 portal={false}
                 style={{ padding: 'var(--spacing-sizing-02) var(--spacing-sizing-02)' }}
@@ -38,9 +35,9 @@ export const MenuExample: ComponentExampleFn<ElementProps<MenuProps, 'div'> & {
                 <ListItem href="#/my-profile" label="My profile" leading={<SvgAccountCircle />} />
                 <ListItem href="#/settings" label="Settings" leading={<SvgSettings />} />
                 <ListItem
+                    as="label"
                     label="Dark mode"
                     leading={props['data-dark-mode'] ? <SvgDarkModeFill /> : <SvgDarkMode />}
-                    role="checkbox"
                     trailing={
                         <Switch
                             aria-label="Toggle dark mode"
@@ -64,9 +61,34 @@ export const MenuExample: ComponentExampleFn<ElementProps<MenuProps, 'div'> & {
                     onClick={() => {
                         action('Log out clicked');
                     }}
+                    role="button"
                 />
             </Component>
         );
     },
+    presets: [
+        {
+            label: 'Scroll = False',
+            propState: {
+                floating: false,
+                portal: false,
+                itemDisplayCount: 5,
+                itemCount: 11,
+                scroll: false,
+            },
+        },
+        {
+            label: 'Item Display Count',
+            propState: {
+                floating: false,
+                portal: false,
+                itemDisplayCount: 5,
+                itemCount: 11,
+                scroll: true,
+            },
+        },
+    ],
+
     disableProps: ['floating', 'portal'],
+    variants: false,
 });

package/src/components/Menu/menu.scss

@@ -6,10 +6,14 @@
     border: 1px solid var(--stroke-neutral-low);
     background-color: var(--surface-neutral-t1-base);
     box-shadow: var(--drop-shadow-float);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-lg);
     display: flex;
     flex-direction: column;
-    overflow: hidden var(--overflow-y);
+
+    &[data-scroll='true'] {
+        overflow: hidden scroll;
+        max-height: calc(calc(var(--item-display-count, 1) * var(--list-item-height)) + 2px /* borders */);
+    }
 
     &[data-floating] {
         z-index: var(--z-index-dropdown);

package/src/components/MenuButton/MenuButton.tsx

@@ -1,7 +1,8 @@
 import { SvgMenu } from '@bspk/icons/Menu';
 
-import { ElementProps } from '-';
 import { ButtonProps } from '-/components/Button';
+import { ElementProps } from '-/types/common';
+
 import './menu-button.scss';
 
 export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
@@ -19,7 +20,7 @@ export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
  * @name MenuButton
  * @phase Utility
  */
-function MenuButton(props: ElementProps<MenuButtonProps, 'button'>) {
+export function MenuButton(props: ElementProps<MenuButtonProps, 'button'>) {
     return (
         <button data-bspk="menu-button" {...props}>
             <SvgMenu />
@@ -27,8 +28,4 @@ function MenuButton(props: ElementProps<MenuButtonProps, 'button'>) {
     );
 }
 
-MenuButton.bspkName = 'MenuButton';
-
-export { MenuButton };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */