@bspk/ui 1.1.33 → 1.2.0

package/src/components/ListItem/ListItem.tsx

@@ -1,27 +1,12 @@
-import { AnchorHTMLAttributes, ElementType, ReactNode, AriaRole } from 'react';
-
-import { CommonProps, ElementProps, SetRef } from '-';
-import { ButtonProps, Button } from '-/components/Button';
+import { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
+import { ListItemButton } from './ListItemButton';
 import { Truncated } from '-/components/Truncated';
-import { ChildElement, getChildrenElements } from '-/utils/children';
-import { useErrorLogger } from '-/utils/errors';
-import './list-item.scss';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
 
-export const LEADING_COMPONENTS = Object.freeze(['Icon', 'Img', 'Avatar']);
-
-export const TRAILING_COMPONENTS = Object.freeze([
-    'ListItemButton',
-    'Checkbox',
-    'Icon',
-    'Radio',
-    'Switch',
-    'Tag',
-    'Txt',
-    'string',
-]);
+import './list-item.scss';
 
 export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = CommonProps<
-    'active' | 'disabled' | 'readOnly'
+    'active' | 'disabled' | 'owner' | 'readOnly'
 > & {
     /**
      * The element type to render as.
@@ -65,12 +50,10 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
     href?: AnchorHTMLAttributes<unknown>['href'];
     /** A ref to the list item div element. */
     innerRef?: SetRef<T>;
-    /**
-     * Whether the ListItem is selected.
-     *
-     * @default false
-     */
-    selected?: boolean;
+    /** The ARIA role of the list item. */
+    role?: string;
+    /** Whether the aria-label should be included on the list item. */
+    includeAriaLabel?: boolean;
 };
 
 /**
@@ -102,132 +85,68 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
  *         );
  *     }
  *
- * @subComponents ListItemButton
- *
  * @name ListItem
- * @phase DesignReview
+ * @phase UXReview
  */
 function ListItem<As extends ElementType = 'div', T = HTMLElement>({
+    includeAriaLabel = true,
+    active,
     as,
     disabled,
-    leading: leadingProp,
-    trailing: trailingProp,
+    innerRef,
     label,
-    subText,
-    active,
+    leading,
     readOnly,
-    innerRef,
-    selected = false,
-    role: roleProp,
+    owner,
+    role,
+    subText,
+    trailing,
     ...props
 }: ElementProps<ListItemProps<As, T>, As>) {
-    let As: ElementType = as || 'div';
-    const role: AriaRole[] = ['option', roleProp || 'listitem'];
-    const AsInner: ElementType = 'span';
-
-    const { leading, trailing } = useChildren(leadingProp, trailingProp);
+    if (!label) return null;
 
-    if (!label) return;
+    let As = as || 'div';
 
-    if (props.href) As = 'a';
-
-    if (trailing?.name) {
-        // if trailing is a ListItemButton and As is a button, change As to div
-        if (trailing?.name === 'ListItemButton') As = 'div';
-
-        if (['Checkbox', 'Radio', 'Switch'].includes(trailing.name)) {
-            As = 'div';
-            role.push('button');
-        }
+    if (!as) {
+        if (props.href) As = 'a';
+        else if (props.onClick) As = 'button';
     }
 
-    if (!As && 'onClick' in props) As = 'button';
-
-    const actionable = ('onClick' in props || 'href' in props) && !disabled && !readOnly;
+    const actionable = (As === 'a' || As === 'button') && !props.disabled && !props.readOnly;
 
     return (
         <As
             {...props}
             aria-disabled={disabled || undefined}
-            aria-label={As === 'label' ? undefined : label}
-            aria-selected={selected || undefined}
+            aria-label={
+                As === 'label' || As === 'span' || As === 'div' || includeAriaLabel === false ? undefined : label
+            }
+            as={As}
             data-action={actionable || undefined}
             data-active={active || undefined}
             data-bspk="list-item"
-            data-component={leading?.name || undefined}
+            data-bspk-owner={owner || undefined}
             data-readonly={readOnly || undefined}
             ref={innerRef}
-            role="option"
-            tabIndex={0}
+            role={role || (As === 'button' ? 'option' : undefined)}
+            tabIndex={actionable ? 0 : undefined}
         >
-            <AsInner data-inner>
-                {leading && (
-                    <span data-component={leading.name} data-leading>
-                        {leading.child}
-                    </span>
-                )}
-                <span data-item-label>
-                    <Truncated data-text>{label}</Truncated>
-                    {subText && <span data-sub-text>{subText}</span>}
+            {leading && (
+                <span aria-hidden data-leading>
+                    {leading}
                 </span>
-                {trailing && (
-                    <span data-component={trailing.name} data-trailing>
-                        {trailing.child}
-                    </span>
-                )}
-            </AsInner>
+            )}
+            <span data-item-label>
+                <Truncated data-text>{label}</Truncated>
+                {subText && <span data-sub-text>{subText}</span>}
+            </span>
+            {trailing && <span data-trailing>{trailing}</span>}
         </As>
     );
 }
-ListItem.bspkName = 'ListItem';
 
-/** A button that can be used as a trailing element in a ListItem. */
-// eslint-disable-next-line react/no-multi-comp
-function ListItemButton({ label, icon, ...buttonProps }: Pick<ButtonProps, 'icon' | 'label' | 'onClick'>) {
-    return <Button icon={icon} label={label} showLabel={false} {...buttonProps} size="large" variant="tertiary" />;
-}
-ListItemButton.bspkName = 'ListItemButton';
 ListItem.Button = ListItemButton;
 
 export { ListItem };
 
-function useChildren(
-    leadingProp: ReactNode,
-    trailingProp: ReactNode,
-): {
-    leading?: { child: ReactNode; name: string } | null;
-    trailing?: { child: ReactNode; name: string } | null;
-} {
-    const { logError } = useErrorLogger();
-
-    let leading: ChildElement | null = getChildrenElements(leadingProp)[0] || null;
-
-    const trailingElements = getChildrenElements(trailingProp);
-
-    let trailing: ChildElement | null = trailingElements[0] || null;
-
-    if (leading) {
-        const valid = LEADING_COMPONENTS.includes(leading.name);
-        if (!valid) leading = null;
-        logError(
-            !valid,
-            `ListItem - Leading child is invalid. Must be one of:${LEADING_COMPONENTS} Elements: ${leading?.name || 'None'}`,
-        );
-    }
-
-    if (trailing) {
-        const valid = TRAILING_COMPONENTS.includes(trailing.name);
-        if (!valid) trailing = null;
-        logError(
-            !valid,
-            `ListItem - Trailing child is invalid. Must be one of:${TRAILING_COMPONENTS} Elements: ${trailing?.name || 'None'}`,
-        );
-    }
-
-    return {
-        leading,
-        trailing,
-    };
-}
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ListItem/ListItemButton.tsx

@@ -0,0 +1,6 @@
+import { ButtonProps, Button } from '-/components/Button';
+
+// A button that can be used as a trailing element in a ListItem.
+export function ListItemButton({ label, icon, ...buttonProps }: Pick<ButtonProps, 'icon' | 'label' | 'onClick'>) {
+    return <Button icon={icon} iconOnly label={label} {...buttonProps} size="large" variant="tertiary" />;
+}

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 */