@bspk/ui 1.1.34 → 1.2.0

package/src/components/ChipUtility/ChipUtility.tsx

@@ -1,11 +1,10 @@
 import { ReactNode, isValidElement } from 'react';
 
 import { Badge, BadgeProps } from '-/components/Badge';
-import { isValidIcon } from '-/utils/children';
 
 import './chip-utility.scss';
 
-export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder' | 'variant'>;
+export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder'>;
 
 export type ChipUtilityProps = {
     /**
@@ -24,7 +23,7 @@ export type ChipUtilityProps = {
      * The label of the chip.
      *
      * @example
-     *     'Hello I am Chip';
+     *     Hello I am Chip
      *
      * @required
      */
@@ -77,7 +76,7 @@ export type ChipUtilityProps = {
  * @name ChipUtility
  * @phase Utility
  */
-function ChipUtility({
+export function ChipUtility({
     flat = false,
     disabled = false,
     label,
@@ -89,21 +88,22 @@ function ChipUtility({
 }: ChipUtilityProps) {
     return (
         <button
-            data-bspk="chip-utility"
+            data-bspk-utility="chip-utility"
             data-disabled={disabled || undefined}
             data-flat={flat || undefined}
             data-selected={selected || undefined}
             data-touch-target-parent
+            disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
             <>
-                {isValidIcon(leadingIcon) && isValidElement(leadingIcon) && (
+                {isValidElement(leadingIcon) && (
                     <span aria-hidden="true" data-chip-icon>
                         {leadingIcon}
                     </span>
                 )}
                 <span>{label}</span>
-                {isValidIcon(trailingIcon) && isValidElement(trailingIcon) && (
+                {isValidElement(trailingIcon) && (
                     <span aria-hidden="true" data-chip-icon>
                         {trailingIcon}
                     </span>
@@ -113,7 +113,6 @@ function ChipUtility({
                         count={trailingBadge.count}
                         size={trailingBadge.size}
                         surfaceBorder={trailingBadge.surfaceBorder}
-                        variant={trailingBadge.variant}
                     />
                 )}
             </>
@@ -122,8 +121,4 @@ function ChipUtility({
     );
 }
 
-ChipUtility.bspkName = 'ChipUtility';
-
-export { ChipUtility };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipUtility/ChipUtilityExample.tsx

@@ -1,8 +1,8 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { ChipUtilityProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const ChipUtilityExample: ComponentExample<ChipUtilityProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
     presets: [
         {
             label: 'Basic',

package/src/components/ChipUtility/chip-utility.scss

@@ -1,4 +1,4 @@
-[data-bspk='chip-utility'] {
+[data-bspk-utility='chip-utility'] {
     flex-direction: row;
     gap: var(--spacing-sizing-02);
     height: var(--spacing-sizing-08);

package/src/components/Combobox/Combobox.tsx

@@ -1,13 +1,12 @@
-/* eslint-disable react/no-multi-comp */ import { ReactNode, useMemo } from 'react';
-
-import { CommonProps, ElementProps } from '-';
-import { Checkbox } from '-/components/Checkbox';
-import { ListItem, ListItemProps } from '-/components/ListItem';
+import { ReactNode, useMemo } from 'react';
+import { ListItems } from './ListItems';
+import { ListItemProps } from '-/components/ListItem';
 import { Menu, MenuProps } from '-/components/Menu';
 import { Modal, ModalProps } from '-/components/Modal';
 import { ToggleProps, useCombobox, UseComboboxProps } from '-/hooks/useCombobox';
 import { useId } from '-/hooks/useId';
 import { useUIContext } from '-/hooks/useUIContext';
+import { CommonProps, ElementProps } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
 const DEFAULT = {
@@ -26,10 +25,10 @@ export type ComboboxItemProps = CommonProps<'disabled'> &
         value: string;
     };
 
-export type ComboboxProps<Item extends ComboboxItemProps = ComboboxItemProps> = CommonProps<'data-bspk-owner' | 'id'> &
+export type ComboboxProps<Item extends ComboboxItemProps = ComboboxItemProps> = CommonProps<'id' | 'owner'> &
     Pick<MenuProps, 'itemDisplayCount'> &
-    Pick<ModalProps, 'description' | 'header'> &
-    Pick<UseComboboxProps, 'disabled' | 'errorMessage' | 'invalid' | 'offsetOptions' | 'readOnly' | 'refWidth'> & {
+    Pick<ModalProps, 'description'> &
+    Pick<UseComboboxProps, 'disabled' | 'offsetOptions' | 'readOnly' | 'refWidth'> & {
         /**
          * Content to display in the listbox.
          *
@@ -102,7 +101,7 @@ export type ComboboxProps<Item extends ComboboxItemProps = ComboboxItemProps> =
  * @name Combobox
  * @phase Utility
  */
-function Combobox<Item extends ComboboxItemProps>({
+export function Combobox<Item extends ComboboxItemProps>({
     itemDisplayCount,
     items = [],
     onChange,
@@ -112,13 +111,12 @@ function Combobox<Item extends ComboboxItemProps>({
     isMulti,
     selectAll: selectAllProp,
     children,
-    invalid,
     readOnly,
-    errorMessage,
     refWidth,
     offsetOptions = 4,
-    header,
     description,
+    owner,
+    label,
     ...props
 }: ElementProps<ComboboxProps<Item>, 'div'>) {
     const menuId = useId(idProp);
@@ -129,9 +127,7 @@ function Combobox<Item extends ComboboxItemProps>({
         refWidth,
         placement: 'bottom-start',
         disabled,
-        invalid,
         readOnly,
-        errorMessage,
         offsetOptions,
     });
 
@@ -154,26 +150,33 @@ function Combobox<Item extends ComboboxItemProps>({
             {children({ toggleProps, setReference: elements.setReference })}
             {isMobile ? (
                 <Modal
-                    data-bspk-owner={props['data-bspk-owner'] || undefined}
                     description={description}
-                    header={header}
+                    header={label}
                     onClose={closeMenu}
                     open={isOpen}
+                    owner={owner || undefined}
                 >
-                    <ListItems
-                        activeIndex={activeIndex}
-                        allSelected={allSelected}
-                        data-testid="listbox-items"
-                        isMulti={isMulti}
-                        items={items}
-                        menuId={menuId}
-                        onChange={(next) => {
-                            onChange(next);
-                            if (!isMulti) closeMenu();
-                        }}
-                        selectAll={selectAll}
-                        selectedValues={selectedValues}
-                    />
+                    <div
+                        aria-multiselectable={isMulti || undefined}
+                        id={menuId}
+                        role="listbox"
+                        style={{ display: 'contents' }}
+                    >
+                        <ListItems
+                            activeIndex={activeIndex}
+                            allSelected={allSelected}
+                            data-testid="listbox-items"
+                            isMulti={isMulti}
+                            items={items}
+                            menuId={menuId}
+                            onChange={(next) => {
+                                onChange(next);
+                                if (!isMulti) closeMenu();
+                            }}
+                            selectAll={selectAll}
+                            selectedValues={selectedValues}
+                        />
+                    </div>
                 </Modal>
             ) : (
                 <Menu
@@ -215,100 +218,7 @@ function Combobox<Item extends ComboboxItemProps>({
     );
 }
 
-Combobox.bspkName = 'Combobox';
-
-export { Combobox };
-
 // ListItems component to render the items in the listbox or modal.
 // This is a separate component to keep the Combobox component clean and focused on its main functionality
-function ListItems({
-    isMulti = false,
-    items = [],
-    activeIndex,
-    selectedValues = [],
-    onChange,
-    selectAll = false,
-    menuId = '',
-    allSelected = false,
-}: {
-    isMulti?: boolean;
-    items?: ComboboxItemProps[];
-    activeIndex?: number;
-    selectedValues?: string[];
-    onChange?: (nextSelectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    selectAll?: string | false;
-    menuId?: string;
-    allSelected?: boolean;
-}) {
-    const multiSelectValue = (selected: boolean, itemValue: string) => {
-        return selected ? selectedValues.filter((value) => value !== itemValue) : [...selectedValues, itemValue];
-    };
-
-    return (
-        <>
-            {isMulti && selectAll && (
-                <ListItem
-                    data-selected={allSelected || undefined}
-                    key="select-all"
-                    label={selectAll}
-                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-                        onChange?.(allSelected ? [] : items.map((item) => item.value), event);
-                    }}
-                    role="option"
-                    tabIndex={-1}
-                    trailing={
-                        <Checkbox
-                            aria-label={selectAll}
-                            checked={!!allSelected}
-                            indeterminate={!allSelected && selectedValues.length > 0}
-                            name=""
-                            onChange={(checked) => {
-                                onChange?.(checked ? items.map((item) => item.value) : []);
-                            }}
-                            value=""
-                        />
-                    }
-                />
-            )}
-            {items.map((item, index) => {
-                const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
-                return (
-                    <ListItem
-                        {...item}
-                        active={activeIndex === index || undefined}
-                        aria-disabled={item.disabled || undefined}
-                        aria-posinset={index + 1}
-                        as="button"
-                        disabled={item.disabled || undefined}
-                        id={`${menuId}-item-${index}`}
-                        key={`${menuId}-item-${index}`}
-                        label={item.label}
-                        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                            onChange?.(isMulti ? multiSelectValue(selected, item.value) : [item.value], event);
-                        }}
-                        role="option"
-                        selected={selected || undefined}
-                        tabIndex={-1}
-                        trailing={
-                            isMulti ? (
-                                <Checkbox
-                                    aria-label={item.label}
-                                    checked={selected}
-                                    name={item.value}
-                                    onChange={(checked) => {
-                                        onChange?.(multiSelectValue(checked, item.value));
-                                    }}
-                                    value={item.value}
-                                />
-                            ) : (
-                                item.trailing || undefined
-                            )
-                        }
-                    />
-                );
-            })}
-        </>
-    );
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Combobox/ListItems.tsx

@@ -0,0 +1,107 @@
+import { Checkbox } from '-/components/Checkbox';
+import { ListItem } from '-/components/ListItem';
+
+type Item = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    trailing?: React.ReactNode;
+};
+
+export type ListItemsProps<I extends Item> = {
+    /** Whether the listbox allows multiple selections. */
+    isMulti?: boolean;
+    /** The items to display in the listbox. */
+    items?: I[];
+    /** The index of the currently active item. */
+    activeIndex?: number;
+    /** The values that are currently selected. */
+    selectedValues?: string[];
+    /** Callback function when the selected values change. */
+    onChange?: (nextSelectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** The label for the "Select All" option. */
+    selectAll?: string | false;
+    /** The ID of the menu for accessibility purposes. */
+    menuId?: string;
+    /** Whether all items are selected in a multi-select scenario. */
+    allSelected?: boolean;
+};
+
+export function ListItems<I extends Item>({
+    isMulti = false,
+    items = [],
+    activeIndex,
+    selectedValues = [],
+    onChange,
+    selectAll = false,
+    menuId = '',
+    allSelected = false,
+}: ListItemsProps<I>) {
+    const multiSelectValue = (selected: boolean, itemValue: string) => {
+        return selected ? selectedValues.filter((value) => value !== itemValue) : [...selectedValues, itemValue];
+    };
+
+    return (
+        <>
+            {isMulti && selectAll && (
+                <ListItem
+                    as="label"
+                    data-selected={allSelected || undefined}
+                    key="select-all"
+                    label={selectAll}
+                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                        onChange?.(allSelected ? [] : items.map((item) => item.value), event);
+                    }}
+                    tabIndex={-1}
+                    trailing={
+                        <Checkbox
+                            aria-label={selectAll}
+                            checked={!!allSelected}
+                            indeterminate={!allSelected && selectedValues.length > 0}
+                            name=""
+                            onChange={(checked) => {
+                                onChange?.(checked ? items.map((item) => item.value) : []);
+                            }}
+                            value=""
+                        />
+                    }
+                />
+            )}
+            {items.map((item, index) => {
+                const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
+                return (
+                    <ListItem
+                        {...item}
+                        active={activeIndex === index || undefined}
+                        aria-disabled={item.disabled || undefined}
+                        aria-selected={selected || undefined}
+                        as={isMulti ? 'label' : 'button'}
+                        disabled={item.disabled || undefined}
+                        id={`${menuId}-item-${index}`}
+                        key={`${menuId}-item-${index}`}
+                        label={item.label}
+                        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                            onChange?.(isMulti ? multiSelectValue(selected, item.value) : [item.value], event);
+                        }}
+                        tabIndex={-1}
+                        trailing={
+                            isMulti ? (
+                                <Checkbox
+                                    aria-label={item.label}
+                                    checked={selected}
+                                    name={item.value}
+                                    onChange={(checked) => {
+                                        onChange?.(multiSelectValue(checked, item.value));
+                                    }}
+                                    value={item.value}
+                                />
+                            ) : (
+                                item.trailing || undefined
+                            )
+                        }
+                    />
+                );
+            })}
+        </>
+    );
+}

package/src/components/Dialog/Dialog.tsx

@@ -1,47 +1,45 @@
 import { FocusTrap } from 'focus-trap-react';
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useRef } from 'react';
 
-import { CommonProps, ElementProps, SetRef } from '-';
-import { Portal } from '-/components/Portal';
+import { Portal, PortalProps } from '-/components/Portal';
 import { Scrim } from '-/components/Scrim';
 import { useId } from '-/hooks/useId';
-import { useOutsideClick } from '-/hooks/useOutsideClick';
+import { CommonProps, ElementProps, SetRef } from '-/types/common';
+
 import './dialog.scss';
 
-export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
-    /** The content of the dialog. */
-    children?: ReactNode;
-    /** A ref to the dialog element. */
-    innerRef?: SetRef<HTMLDivElement>;
-    /**
-     * If the dialog should appear.
-     *
-     * @example
-     *     false;
-     *
-     * @default false
-     */
-    open?: boolean;
-    /**
-     * Function to call when the dialog is closed.
-     *
-     * @type () => void
-     * @required
-     */
-    onClose: () => void;
-    /**
-     * The placement of the dialog on the screen.
-     *
-     * @default center
-     */
-    placement?: 'bottom' | 'center' | 'left' | 'right' | 'top';
-    /**
-     * Whether the dialog should have a scrim behind it.
-     *
-     * @default true
-     */
-    showScrim?: boolean;
-};
+export type DialogProps = CommonProps<'id' | 'owner'> &
+    Pick<PortalProps, 'container'> & {
+        /** The content of the dialog. */
+        children?: ReactNode;
+        /** A ref to the dialog element. */
+        innerRef?: SetRef<HTMLDivElement>;
+        /**
+         * If the dialog should appear.
+         *
+         * @default false
+         */
+        open?: boolean;
+        /**
+         * Function to call when the dialog is closed.
+         *
+         * @type () => void
+         * @required
+         */
+        onClose: () => void;
+        /**
+         * The placement of the dialog on the screen.
+         *
+         * @default center
+         */
+        placement?: 'bottom' | 'center' | 'left' | 'right' | 'top';
+        /**
+         * Whether the dialog should have a scrim behind it.
+         *
+         * @default true
+         */
+        showScrim?: boolean;
+    };
 
 /**
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
@@ -69,79 +67,37 @@ export type DialogProps = CommonProps<'data-bspk-owner' | 'id'> & {
  * @name Dialog
  * @phase Utility
  */
-function Dialog({
-    //
+export function Dialog({
     children,
     innerRef,
     onClose,
-    open,
+    open = false,
     placement = 'center',
     showScrim = true,
     id: idProp,
+    owner,
+    container,
     ...containerProps
 }: ElementProps<DialogProps, 'div'>) {
     const id = useId(idProp);
     const boxRef = useRef<HTMLDivElement | null>(null);
-    const [visibility, setVisibilityState] = useState<'hidden' | 'hiding' | 'show' | 'showing'>(
-        open ? 'show' : 'hidden',
-    );
-
-    const prevVisibility = useRef(visibility);
-
-    const setVisibility = useCallback((next: typeof visibility) => {
-        setVisibilityState((prev) => {
-            prevVisibility.current = prev;
-            return next;
-        });
-    }, []);
 
     const handleKeyDown = useCallback((e: KeyboardEvent) => e.key === 'Escape' && onClose(), [onClose]);
 
     useEffect(() => {
-        if (open) {
-            if (prevVisibility.current.startsWith('show')) return;
-            setVisibility('showing');
-            return;
-        }
-
-        if (prevVisibility.current.startsWith('hid')) return;
-        setVisibility('hiding');
-    }, [open, setVisibility]);
-
-    useEffect(() => {
-        if (prevVisibility.current === visibility) return;
-
-        if (visibility === 'showing') {
-            document.body.style.overflow = 'hidden';
-            setTimeout(() => setVisibility('show'), 10);
-        }
-
-        if (visibility === 'hiding') {
-            document.body.style.overflow = '';
-            setTimeout(() => setVisibility('hidden'), 10);
-        }
-    }, [setVisibility, visibility]);
-
-    useEffect(() => {
-        if (visibility.startsWith('hid')) return;
-
-        document.addEventListener('keydown', handleKeyDown);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [handleKeyDown, visibility]);
-
-    useOutsideClick([boxRef.current], onClose, !open);
+        document.documentElement.style.overflow = open ? 'hidden' : '';
+        if (open) document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [handleKeyDown, open]);
 
     return (
-        visibility !== 'hidden' && (
-            <Portal>
-                <Scrim data-bspk-owner="dialog" onClick={onClose} variant="dialog" visible={showScrim !== false} />
+        open && (
+            <Portal container={container}>
                 <div
                     {...containerProps}
                     data-bspk="dialog"
+                    data-bspk-owner={owner || undefined}
                     data-placement={placement}
-                    data-visibility={visibility}
                     id={id}
                     ref={innerRef}
                     role="presentation"
@@ -163,13 +119,16 @@ function Dialog({
                         </div>
                     </FocusTrap>
                 </div>
+                <Scrim
+                    onClick={() => {
+                        onClose();
+                    }}
+                    owner="dialog"
+                    visible={showScrim !== false}
+                />
             </Portal>
         )
     );
 }
 
-Dialog.bspkName = 'Dialog';
-
-export { Dialog };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Dialog/DialogExample.tsx

@@ -1,27 +1,18 @@
+import { DialogProps } from '.';
 import { Button } from '-/components/Button';
 import { ComponentExample } from '-/utils/demo';
 
-import { DialogProps } from '.';
-
 export const DialogExample: ComponentExample<DialogProps> = {
     render: ({ props, setState, Component }) => {
         const label = 'Open Dialog';
-
-        const { children, ...modalProps } = props;
-
         return (
             <>
                 <Button label={label} onClick={() => setState({ open: true })} />
-                <Component
-                    data-example-component
-                    id="exampleId"
-                    {...modalProps}
-                    onClose={() => setState({ open: false })}
-                >
-                    {children}
+                <Component data-example-component {...props} id="exampleId" onClose={() => setState({ open: false })}>
+                    <div style={{ padding: 'var(--spacing-sizing-04)' }}>Hello, I am a ({props.placement}) dialog!</div>
                 </Component>
             </>
         );
     },
-    hideVariants: true,
+    variants: false,
 };