@bspk/ui 1.3.2 → 1.3.3

package/src/components/ListItem/ListItem.tsx

@@ -13,9 +13,7 @@ import { Truncated } from '-/components/Truncated';
 import { useId } from '-/hooks/useId';
 import { CommonProps, ElementProps, SetRef } from '-/types/common';
 
-export type ListItemProps<As extends ElementType = ElementType> = CommonProps<
-    'active' | 'disabled' | 'owner' | 'readOnly'
-> &
+export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'active' | 'owner'> &
     Pick<AriaAttributes, 'aria-label'> & {
         /**
          * The element type to render as.
@@ -123,14 +121,12 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<
  * @name ListItem
  * @phase UXReview
  */
-function ListItem<As extends ElementType = ElementType>({
+function ListItem<As extends ElementType = 'div'>({
     active,
     as,
-    disabled,
     innerRef,
     label,
     leading,
-    readOnly,
     owner,
     role: roleProp,
     subText,
@@ -138,6 +134,8 @@ function ListItem<As extends ElementType = ElementType>({
     id: idProp,
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
+    'aria-disabled': ariaDisabled,
+    'aria-readonly': ariaReadonly,
     hideAriaLabel,
     ...props
 }: ElementProps<ListItemProps<As>, As>) {
@@ -146,24 +144,30 @@ function ListItem<As extends ElementType = ElementType>({
     if (!label) return null;
 
     const As = asLogic(as, props);
-    const role = roleLogic(roleProp, { as: As, props });
-    const actionable = (props.href || props.onClick) && !props.disabled && !props.readOnly;
+
+    const isReadOnly = Boolean(props.readOnly || ariaReadonly);
+    const isDisabled = Boolean(props.disabled || ariaDisabled);
+
+    const actionable = !!(props.href || props.onClick || as === 'button') && !isReadOnly && !isDisabled;
+
+    const role = roleLogic(roleProp, { as: As, props, actionable });
 
     return (
         <As
             {...props}
-            aria-disabled={disabled || undefined}
             aria-label={ariaLabel || undefined}
             aria-selected={ariaSelected}
             data-action={actionable || undefined}
             data-active={active || undefined}
             data-bspk="list-item"
             data-bspk-owner={owner || undefined}
-            data-readonly={readOnly || undefined}
+            data-disabled={isDisabled || undefined}
+            data-readonly={isReadOnly || undefined}
             id={id}
+            onClick={isReadOnly || isDisabled ? undefined : props.onClick}
             ref={innerRef}
             role={role}
-            tabIndex={props.tabIndex || (actionable ? 0 : undefined)}
+            tabIndex={props.tabIndex || (actionable ? 0 : -1)}
         >
             {leading && (
                 <span aria-hidden data-leading>
@@ -190,18 +194,21 @@ function asLogic<As extends ElementType>(as: As | undefined, props: Partial<List
 }
 
 function roleLogic(
+    /** User provided role prop */
     existingRole: AriaRole | undefined,
     {
         as: As,
         props,
+        actionable,
     }: {
         as: ElementType;
         props: Partial<ListItemProps>;
+        actionable?: boolean;
     },
 ): HTMLAttributes<HTMLElement>['role'] | undefined {
     if (existingRole) return existingRole;
 
-    if (props.href) return As !== 'a' ? 'link' : undefined;
+    if (!actionable) return undefined;
 
     if (props.onClick && As !== 'button' && As !== 'label') return 'button';
 

package/src/components/ListItem/ListItemExample.tsx

@@ -1,22 +1,90 @@
 import { ElementType } from 'react';
 import { ListItem, ListItemProps } from './ListItem';
+import { ElementProps } from '-/types/common';
 import { createExampleChildElement } from '-/utils/createExampleChildElement';
 import { ComponentExampleFn, Preset } from '-/utils/demo';
 
-export const presets: Preset<ListItemProps>[] = [
+export const presets = (action: (param: string) => void): Preset<ListItemProps>[] => [
     {
         label: 'Long Label',
         propState: {
             label: 'This is a really long label that should be truncated if it exceeds the width of the ListItem',
+            as: undefined,
             subText: 'See below for other leading and trailing examples',
             trailing: 'Checkbox',
             leading: 'Avatar',
-        },
+            disabled: undefined,
+            readOnly: undefined,
+            'aria-disabled': undefined,
+            'aria-readonly': undefined,
+        } as ElementProps<ListItemProps<'div'>, 'div'>,
+    },
+    {
+        label: 'As Role Button',
+        propState: {
+            as: undefined,
+            label: 'as="button"',
+            role: 'button',
+            subText: 'Button example',
+            trailing: undefined,
+            leading: undefined,
+            'aria-disabled': true,
+            disabled: undefined,
+            readOnly: undefined,
+            'aria-readonly': undefined,
+            onClick: () => action('This is aria disabled and should not show'),
+        } as ElementProps<ListItemProps<'div'>, 'div'>,
+    },
+    {
+        label: 'As Button',
+        propState: {
+            label: 'as="button"',
+            as: 'button',
+            subText: 'Button example',
+            trailing: undefined,
+            leading: undefined,
+            disabled: undefined,
+            readOnly: undefined,
+            'aria-disabled': undefined,
+            'aria-readonly': undefined,
+            onClick: () => action('This is not disabled or readonly and should show'),
+        } as ElementProps<ListItemProps<'button'>, 'button'>,
+    },
+    {
+        label: 'As Button Disabled',
+        propState: {
+            label: 'as="button"',
+            as: 'button',
+            subText: 'Disabled button example',
+            trailing: undefined,
+            leading: undefined,
+            disabled: true,
+            readOnly: false,
+            'aria-disabled': undefined,
+            'aria-readonly': undefined,
+            onClick: () => action('This is disabled and should not show'),
+        } as ElementProps<ListItemProps<'button'>, 'button'>,
+    },
+    {
+        label: 'As Button Read Only',
+        propState: {
+            label: 'as="button"',
+            as: 'button',
+            subText: 'Read only button example',
+            trailing: undefined,
+            leading: undefined,
+            readOnly: true,
+            disabled: undefined,
+            'aria-disabled': undefined,
+            'aria-readonly': undefined,
+            onClick: () => action('This is readonly and should not show'),
+        } as ElementProps<ListItemProps<'button'>, 'button'>,
     },
 ];
 
 export const ListItemExample: ComponentExampleFn<ListItemProps> = ({ action, setState }) => ({
-    render: ({ props, id }) => {
+    presets: presets(action),
+    render: ({ props, id, preset }) => {
         const leading = createExampleChildElement({
             exampleState: props,
             name: 'leading',
@@ -34,9 +102,11 @@ export const ListItemExample: ComponentExampleFn<ListItemProps> = ({ action, set
 
         let as: ElementType = props.as || 'div';
 
+        if (!preset) return null;
+
         if (trailing.componentName && ['Checkbox', 'Radio', 'Switch'].includes(trailing.componentName)) as = 'label';
 
         return <ListItem {...props} as={as} leading={leading.element} trailing={trailing.element} />;
     },
-    presets,
+    variants: false,
 });

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

@@ -25,18 +25,20 @@
         }
     }
 
-    &[data-action],
-    &:is(label) {
-        &[data-active],
-        [data-pseudo='hover'] &,
-        &:hover {
-            background-color: var(--interactions-neutral-hover-opacity);
-        }
-
-        [data-pseudo='active'] &,
+    &:not([data-disabled], [data-readonly]) {
+        &[data-action],
+        &:is(label) {
+            &[data-active],
+            [data-pseudo='hover'] &,
+            &:hover {
+                background-color: var(--interactions-neutral-hover-opacity);
+            }
+
+            [data-pseudo='active'] &,
         // pressed state
         &:active {
-            background-color: var(--interactions-neutral-press-opacity);
+                background-color: var(--interactions-neutral-press-opacity);
+            }
         }
     }
 
@@ -78,13 +80,6 @@
         }
     }
 
-    &[aria-disabled] {
-        [data-text],
-        [data-sub-text] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-
     [data-trailing]:has(input) {
         pointer-events: none;
     }
@@ -105,6 +100,15 @@
     &[aria-selected='true'] {
         background-color: var(--surface-brand-primary-highlight);
     }
+
+    &[data-disabled],
+    &[data-readonly] {
+        [data-text],
+        [data-sub-text] {
+            color: var(--foreground-neutral-disabled-on-surface);
+            cursor: not-allowed;
+        }
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ListItemMenu/ListItemMenu.tsx

@@ -20,9 +20,10 @@ import { CommonProps, SetRef } from '-/types/common';
 import { getElementById } from '-/utils/dom';
 import { handleKeyDown } from '-/utils/handleKeyDown';
 
-export type MenuListItem = Omit<ListItemProps, 'id'> & {
-    id: string;
-};
+export type MenuListItem = CommonProps<'disabled'> &
+    Omit<ListItemProps, 'id'> & {
+        id: string;
+    };
 
 export type ListItemMenuRole = keyof typeof LIST_ITEM_ROLES;
 

package/src/components/NumberInput/NumberInput.tsx

@@ -1,5 +1,5 @@
 import './number-input.scss';
-import { useCallback, useState } from 'react';
+import { useMemo } from 'react';
 import { IncrementButton } from './IncrementButton';
 import { useId } from '-/hooks/useId';
 import { CommonProps, FormFieldControlProps } from '-/types/common';
@@ -16,7 +16,7 @@ export type NumberInputProps = CommonProps<
 > &
     FormFieldControlProps & {
         /** The value of the control. */
-        value?: number | string;
+        value?: number;
         /**
          * Callback when the value changes.
          *
@@ -75,7 +75,7 @@ export type NumberInputProps = CommonProps<
  * @phase Utility
  */
 export function NumberInput({
-    value,
+    value: valueProp,
     onChange,
     align = 'center',
     size = 'medium',
@@ -95,27 +95,12 @@ export function NumberInput({
     const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
     const inputId = useId(inputIdProp);
-    const valueNumber = isNumber(value) || 0;
-
-    const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null);
+    const value = useMemo(() => isNumber(valueProp) || 0, [valueProp]);
 
     const handleIncrement = (increment: -1 | 1) => {
-        if (!inputElement) return;
-        const nextValue = (isNumber(inputElement.value) || 0) + increment * step;
-        handleUpdate(nextValue);
+        onChange(value + increment * step);
     };
 
-    const handleUpdate = useCallback(
-        (nextValue: number | undefined) => {
-            if (!inputElement) return;
-            let nextVal = isNumber(nextValue);
-            if (nextVal !== undefined) nextVal = Math.min(Math.max(nextVal, min), max);
-            onChange(nextVal);
-            inputElement.value = nextVal?.toString() || '';
-        },
-        [inputElement, min, max, onChange],
-    );
-
     return (
         <div
             data-bspk="number-input"
@@ -128,7 +113,7 @@ export function NumberInput({
         >
             {!!centered && (
                 <IncrementButton
-                    disabled={disabled ? true : valueNumber + -1 < min}
+                    disabled={disabled ? true : value + -1 < min}
                     increment={-1}
                     inputId={inputId}
                     onIncrement={handleIncrement}
@@ -141,25 +126,27 @@ export function NumberInput({
                 aria-invalid={invalid}
                 aria-label={ariaLabel}
                 autoComplete="off"
-                defaultValue={String(valueNumber)}
+                data-input
+                data-stepper-input-element
                 disabled={disabled}
                 id={inputId}
+                inputMode="numeric"
                 max={max}
                 min={min}
                 name={name}
-                onBlur={() => {
-                    handleUpdate(isNumber(inputElement?.value));
+                onChange={(e) => {
+                    onChange(isNumber(e.target.value));
                 }}
                 readOnly={readOnly}
-                ref={(node) => node && setInputElement(node)}
                 step={step}
                 type="number"
+                value={value}
             />
             {!centered && (
                 <>
                     <div aria-hidden data-divider />
                     <IncrementButton
-                        disabled={disabled ? true : valueNumber + -1 < min}
+                        disabled={!!disabled || value + -1 < min}
                         increment={-1}
                         inputId={inputId}
                         onIncrement={handleIncrement}
@@ -167,7 +154,7 @@ export function NumberInput({
                 </>
             )}
             <IncrementButton
-                disabled={disabled ? true : valueNumber + 1 > max}
+                disabled={!!disabled || value + 1 > max}
                 increment={1}
                 inputId={inputId}
                 onIncrement={handleIncrement}

package/src/components/Popover/Popover.tsx

@@ -111,6 +111,7 @@ export function Popover({
     useOutsideClick({
         elements: [elements.floating],
         callback: () => setShow(false),
+        disabled: !show,
     });
 
     const basicArrowX = middlewareData?.arrow?.x ? `${middlewareData.arrow.x}px` : '0px';

package/src/components/ProgressionStepper/ProgressionStepper.tsx

@@ -37,16 +37,12 @@ export type ProgressionStepperProps = {
      */
     steps: ProgressionStepperItem[];
     /**
-     * The current step in the progress bar.
-     *
-     * If the current step is greater than the number of steps, all steps with be completed.
-     *
-     * If the current step is less than 1, all steps will be incomplete.
+     * The last completed step in the progress bar. This is only applicable for the 'widget' variant.
      *
      * @default 0
      * @minimum 0
      */
-    currentStep?: number;
+    completedStep?: number;
     /**
      * The variant of the progress bar. Can be either horizontal, vertical, or widget.
      *
@@ -72,22 +68,35 @@ export type ProgressionStepperProps = {
  */
 export function ProgressionStepper({
     steps = [],
-    currentStep: currentStepProp = 0,
+    completedStep: completedStepProp = 0,
     variant = 'horizontal',
     ...containerProps
 }: ElementProps<ProgressionStepperProps, 'div'>) {
-    const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
-    return !steps?.length ? null : (
+    const completedStepNumber = Math.max(0, Math.min(completedStepProp, steps.length));
+
+    const currentStepNumber = Math.min(completedStepNumber + 1, steps.length);
+
+    const currentStep = steps[currentStepNumber - 1];
+
+    if (!steps?.length) return null;
+
+    return (
         <div {...containerProps} data-bspk="progression-stepper" data-variant={variant}>
             {variant === 'widget' && (
                 <label>
-                    <span data-title>{steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name}</span>
+                    <span data-title>{currentStep.name}</span>
                     <span data-subtitle>
-                        {currentStep > steps.length ? (
-                            'Completed'
+                        {currentStep.subtext ? (
+                            currentStep.subtext
                         ) : (
                             <>
-                                Step {currentStep} of {steps.length}
+                                {completedStepNumber === steps.length ? (
+                                    'Completed'
+                                ) : (
+                                    <>
+                                        Step {currentStepNumber} of {steps.length}
+                                    </>
+                                )}
                             </>
                         )}
                     </span>
@@ -97,8 +106,8 @@ export function ProgressionStepper({
                 {steps.map(({ name, subtext }, index) => {
                     const stepNum = index + 1;
                     let status: 'complete' | 'current' | 'incomplete' = 'incomplete';
-                    if (currentStep > stepNum) status = 'complete';
-                    else if (currentStep === stepNum) status = 'current';
+                    if (completedStepNumber >= stepNum) status = 'complete';
+                    else if (completedStepNumber + 1 === stepNum) status = 'current';
 
                     return (
                         <li

package/src/components/ProgressionStepper/ProgressionStepperExample.tsx

@@ -6,7 +6,7 @@ export const presets: Preset<ProgressionStepperProps>[] = [
         label: 'Horizontal',
         propState: {
             variant: 'horizontal',
-            currentStep: 2,
+            completedStep: 2,
             steps: [{ name: 'Name of step 1' }, { name: 'Name of step 2' }, { name: 'Name of step 3' }],
         },
     },
@@ -14,7 +14,7 @@ export const presets: Preset<ProgressionStepperProps>[] = [
         label: 'Vertical',
         propState: {
             variant: 'vertical',
-            currentStep: 2,
+            completedStep: 2,
             steps: [
                 {
                     name: 'Name of step 1',
@@ -35,7 +35,7 @@ export const presets: Preset<ProgressionStepperProps>[] = [
         label: 'Widget',
         propState: {
             variant: 'widget',
-            currentStep: 3,
+            completedStep: 3,
             steps: [
                 { name: 'Name of step 1' },
                 { name: 'Name of step 2' },
@@ -43,7 +43,23 @@ export const presets: Preset<ProgressionStepperProps>[] = [
                 { name: 'Name of step 4' },
                 { name: 'Name of step 5' },
                 { name: 'Name of step 6' },
-                { name: 'Name of step 7' },
+                { name: 'Review' },
+            ],
+        },
+    },
+    {
+        label: 'Widget (w/ subtext)',
+        propState: {
+            variant: 'widget',
+            completedStep: 3,
+            steps: [
+                { name: 'Name of step 1' },
+                { name: 'Name of step 2' },
+                { name: 'Name of step 3' },
+                { name: 'Name of step 4' },
+                { name: 'Name of step 5' },
+                { name: 'Name of step 6' },
+                { name: 'Review', subtext: `Check your information...` },
             ],
         },
     },

package/src/components/SearchBar/SearchBar.rtl.test.tsx

@@ -23,7 +23,6 @@ const TestBed = () => {
             items={items}
             name="Example name"
             onChange={() => {}}
-            onSelect={() => {}}
             placeholder="Search"
             value=""
         />