@bspk/ui 1.1.34 → 1.3.0

package/src/components/Select/SelectExample.tsx

@@ -1,17 +1,15 @@
+import { SelectProps } from '.';
 import { Avatar } from '-/components/Avatar';
 import { Tag } from '-/components/Tag';
 import { Txt } from '-/components/Txt';
-import { ComponentExample } from '-/utils/demo';
-
-import { SelectProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
 
-const trailingPrice = (price: number) => (
+const TrailingPrice = ({ price }: { price: number }) => (
     <Txt>{`${new Intl.NumberFormat('en-US', {
         style: 'currency',
         currency: 'USD',
     }).format(price / 100)}`}</Txt>
 );
-
 const DEFAULT_OPTIONS = [
     { value: '1', label: 'Option 1' },
     { value: '2', label: 'Option 2' },
@@ -25,106 +23,119 @@ const DEFAULT_OPTIONS = [
     { value: '10', label: 'Option 10' },
 ];
 
-export const SelectExample: ComponentExample<SelectProps> = {
-    defaultState: {
-        label: 'Demo Select',
-        options: DEFAULT_OPTIONS,
-    },
-    presets: [
-        {
-            label: 'Simple',
-            propState: { isMulti: false },
-        },
-        {
-            label: 'Multi',
-            propState: { isMulti: true },
+export const presets: Preset<SelectProps>[] = [
+    {
+        label: 'Simple',
+        propState: {
+            label: 'Demo Select',
+            options: DEFAULT_OPTIONS,
+
+            name: 'demo-select',
+            value: '',
         },
-        {
-            label: 'Long text',
-            propState: {
-                isMulti: false,
-                options: [
-                    { value: '1', label: 'This is a very long option that should truncate' },
-                    { value: '2', label: 'This is another long option that should truncate' },
-                    { value: '3', label: 'Short option' },
-                    { value: '4', label: 'Another short option' },
-                ],
-            },
+    },
+    {
+        label: 'Long text',
+        propState: {
+            label: 'Demo Select',
+
+            options: [
+                { value: '1', label: 'This is a very long option that should truncate' },
+                { value: '2', label: 'This is another long option that should truncate' },
+                { value: '3', label: 'Short option' },
+                { value: '4', label: 'Another short option' },
+            ],
+            name: 'demo-select-long',
+            value: '',
         },
-        {
-            label: 'Trailing Tags',
-            propState: {
-                isMulti: false,
-                options: [
-                    //
-                    {
-                        value: 'a',
-                        label: 'Package A',
-                        trailing: (
-                            <Tag color="blue" size="x-small">
-                                Recommended
-                            </Tag>
-                        ),
-                    },
-                    {
-                        value: 'b',
-                        label: 'Package B',
-                        trailing: (
-                            <Tag color="green" size="x-small">
-                                Best Value
-                            </Tag>
-                        ),
-                    },
-                    { value: 'c', label: 'Package C' },
-                    { value: 'd', label: 'Package D' },
-                ],
-            },
+    },
+    {
+        label: 'Trailing Tags',
+        propState: {
+            label: 'Demo Select',
+
+            options: [
+                //
+                {
+                    value: 'a',
+                    label: 'Package A',
+                    trailing: <Tag color="blue" label="Recommended" size="x-small" />,
+                },
+                {
+                    value: 'b',
+                    label: 'Package B',
+                    trailing: <Tag color="green" label="Best Value" size="x-small" />,
+                },
+                { value: 'c', label: 'Package C' },
+                { value: 'd', label: 'Package D' },
+            ],
+            name: 'demo-select-tags',
+            value: 'a',
         },
-        {
-            label: 'Trailing Text',
-            propState: {
-                isMulti: false,
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option A',
-                        trailing: trailingPrice(400),
-                    },
-                    { value: '2', label: 'Option B', trailing: trailingPrice(1000) },
-                    { value: '3', label: 'Option C', trailing: trailingPrice(1600) },
-                    { value: '4', label: 'Option D', trailing: trailingPrice(2000) },
-                ],
-            },
+    },
+    {
+        label: 'Trailing Text',
+        propState: {
+            label: 'Demo Select',
+
+            options: [
+                {
+                    value: '1',
+                    label: 'Option A',
+                    trailing: <TrailingPrice price={400} />,
+                },
+                { value: '2', label: 'Option B', trailing: <TrailingPrice price={1000} /> },
+                { value: '3', label: 'Option C', trailing: <TrailingPrice price={1600} /> },
+                { value: '4', label: 'Option D', trailing: <TrailingPrice price={2000} /> },
+            ],
+            name: 'demo-select-trailing',
+            value: '',
         },
-        {
-            label: 'Leading Avatar',
-            propState: {
-                isMulti: false,
-                options: [
-                    //
-                    {
-                        value: 'Jessica',
-                        label: 'Jessica P.',
-                        leading: <Avatar name="Jessica P." size="small" />,
-                    },
-                    {
-                        value: 'Louis',
-                        label: 'Louis L.',
-                        leading: <Avatar name="Louis L." size="small" />,
-                    },
-                    {
-                        value: 'Harvey',
-                        label: 'Harvey S.',
-                        leading: <Avatar name="Harvey S." size="small" />,
-                    },
-                    {
-                        value: 'Mike',
-                        label: 'Mike R.',
-                        leading: <Avatar name="Mike R." size="small" />,
-                    },
-                ],
-            },
+    },
+    {
+        label: 'Leading Avatar',
+        propState: {
+            label: 'Select user',
+
+            options: [
+                //
+                {
+                    value: 'Jessica',
+                    label: 'Jessica P.',
+                    leading: <Avatar name="Jessica P." size="small" />,
+                },
+                {
+                    value: 'Louis',
+                    label: 'Louis L.',
+                    leading: <Avatar name="Louis L." size="small" />,
+                },
+                {
+                    value: 'Harvey',
+                    label: 'Harvey S.',
+                    leading: <Avatar name="Harvey S." size="small" />,
+                },
+                {
+                    value: 'Mike',
+                    label: 'Mike R.',
+                    leading: <Avatar name="Mike R." size="small" />,
+                },
+            ],
+            name: 'demo-select-avatar',
+            value: '',
         },
-    ],
-    hideVariants: true,
+    },
+];
+
+export const SelectExample: ComponentExample<SelectProps> = {
+    defaultState: {
+        label: 'Demo Select',
+        options: DEFAULT_OPTIONS,
+        scrollLimit: 5,
+        value: '',
+    },
+    render: ({ props, Component }) => {
+        return <Component {...props} />;
+    },
+    presets,
+    variants: false,
 };

package/src/components/Select/select.scss

@@ -10,14 +10,15 @@
     --select-padding: var(--spacing-sizing-03);
     --select-icon-width: var(--spacing-sizing-05);
 
+    overflow: hidden;
     position: relative;
     width: 100%;
-    max-width: 280px;
     outline: unset;
     min-height: var(--select-height);
     max-height: var(--select-height);
     display: flex;
     flex-direction: row;
+    align-items: center;
     gap: var(--spacing-sizing-02);
     flex-grow: 0;
     flex-shrink: 0;
@@ -27,28 +28,20 @@
     border-radius: var(--radius-sm);
     background: var(--select-background);
     padding: 0 var(--select-padding);
+    cursor: pointer;
 
-    [data-placeholder] {
-        display: block;
-        max-width: 100%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        padding: 0;
-
-        [data-inner] {
-            min-height: auto;
-            padding: 0;
-        }
-
-        [data-item-label] [data-text] {
-            color: var(--select-text-color);
-        }
+    [data-input] {
+        position: absolute;
+        opacity: 0;
+        inset: 0;
+        cursor: pointer;
     }
 
     [data-icon] {
         display: flex;
         flex-direction: column;
         justify-content: center;
+        pointer-events: none;
 
         svg {
             transform: rotate(90deg);
@@ -56,6 +49,10 @@
         }
     }
 
+    [data-bspk='list-item'][data-bspk-owner='select'] {
+        background: transparent;
+    }
+
     [data-bspk='list-item'][data-selected] {
         background: var(--surface-brand-primary-highlight);
     }
@@ -88,7 +85,7 @@
     }
 
     &:not(:disabled) {
-        &:focus {
+        &:focus-within {
             --select-border-color: var(--stroke-neutral-focus);
 
             border-width: 1px;
@@ -111,10 +108,6 @@
     &[data-invalid] {
         --select-border-color: var(--status-error);
     }
-
-    &[data-empty] {
-        --select-text-color: var(--foreground-neutral-on-surface-variant-03);
-    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,25 @@
+import { SelectField } from './SelectField';
+import { presets } from './SelectFieldExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const nonPresetProps = {
+    name: 'Example name',
+    onChange: () => {},
+    placeholder: 'Select an option',
+};
+
+describe('SelectField (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<SelectField {...preset.propState} {...nonPresetProps} />),
+        );
+    });
+
+    it('renders', () => {
+        const { queryByText } = render(<SelectField {...presets[0].propState} {...nonPresetProps} />);
+
+        expect(queryByText(nonPresetProps.placeholder)).toBeInTheDocument();
+    });
+});

package/src/components/SelectField/SelectField.tsx

@@ -1,20 +1,7 @@
-import { FormFieldProps, FormField } from '-/components/FormField';
+import { FormField, FormFieldWrapProps } from '-/components/FormField';
 import { SelectProps, Select } from '-/components/Select';
 
-export type SelectFieldProps = Pick<
-    SelectProps,
-    | 'disabled'
-    | 'itemDisplayCount'
-    | 'label'
-    | 'name'
-    | 'onChange'
-    | 'options'
-    | 'placeholder'
-    | 'readOnly'
-    | 'size'
-    | 'value'
-> &
-    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'labelTrailing' | 'required'>;
+export type SelectFieldProps = FormFieldWrapProps<SelectProps>;
 
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
@@ -44,36 +31,41 @@ export type SelectFieldProps = Pick<
  *     }
  *
  * @name SelectField
- * @phase DesignReview
+ * @phase Dev
  */
-function SelectField({
+export function SelectField({
     label,
-    errorMessage: errorMessageProp,
     helperText,
-    controlId: id,
+    controlId,
     labelTrailing,
     required,
-    ...selectProps
+    invalid,
+    errorMessage,
+    ...inputProps
 }: SelectFieldProps) {
-    const errorMessage = (!selectProps.readOnly && !selectProps.disabled && errorMessageProp) || undefined;
-
     return (
         <FormField
-            controlId={id}
+            controlId={controlId}
             data-bspk="select-field"
             errorMessage={errorMessage}
             helperText={helperText}
+            invalid={invalid}
             label={label}
             labelTrailing={labelTrailing}
             required={required}
         >
-            {(fieldProps) => <Select {...selectProps} {...fieldProps} id={id} invalid={!!errorMessage} label={label} />}
+            {(fieldProps) => (
+                <Select
+                    //
+                    {...inputProps}
+                    {...fieldProps}
+                    id={controlId}
+                    invalid={invalid}
+                    label={label}
+                />
+            )}
         </FormField>
     );
 }
 
-SelectField.bspkName = 'SelectField';
-
-export { SelectField };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/SelectField/SelectFieldExample.tsx

@@ -0,0 +1,16 @@
+import { SelectFieldProps } from '.';
+import { presets as selectPresets, SelectExample } from '-/components/Select/SelectExample';
+import { ComponentExample } from '-/utils/demo';
+
+export const presets = selectPresets.map((preset, index) => ({
+    ...preset,
+    propState: {
+        ...preset.propState,
+        controlId: `example-select-${index}`,
+    },
+}));
+
+export const SelectFieldExample: ComponentExample<SelectFieldProps> = {
+    defaultState: SelectExample.defaultState,
+    presets,
+};

package/src/components/Skeleton/Circular.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonCircular(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="circular" />;
+}

package/src/components/Skeleton/Photo.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonPhoto(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="photo" />;
+}

package/src/components/Skeleton/Profile.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonProfile(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="profile" />;
+}

package/src/components/Skeleton/Rectangular.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonRectangular(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="rectangular" />;
+}

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

@@ -0,0 +1,16 @@
+import { Skeleton } from './Skeleton';
+import { presets } from './SkeletonExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('Skeleton (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<Skeleton {...preset.propState} />));
+    });
+
+    it('renders', () => {
+        const { getByLabelText } = render(<Skeleton {...presets[0].propState} />);
+
+        expect(getByLabelText('Loading')).toBeInTheDocument();
+    });
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -1,14 +1,15 @@
-/* eslint-disable react/no-multi-comp */ import { ReactNode } from 'react';
-
+import { ReactNode } from 'react';
 import { cssWithVars } from '-/utils/cwv';
 
+export type SkeletonVariant = 'circular' | 'photo' | 'profile' | 'rectangular' | 'thumbnail';
+
 export type SkeletonProps = {
     /**
      * The variant of the skeleton that best hints the content being loaded.
      *
      * @default rectangular
      */
-    variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'thumbnail';
+    variant?: SkeletonVariant;
     /**
      * The width of the skeleton. This is ignored when variant is 'profile' or 'thumbnail'.
      *
@@ -66,9 +67,9 @@ export type SkeletonProps = {
  * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
  *
  * @name Skeleton
- * @phase DesignReview
+ * @phase UXReview
  */
-function Skeleton({ width = 100, height = 100, variant = 'rectangular', children = null }: SkeletonProps) {
+export function Skeleton({ width = 100, height = 100, variant = 'rectangular', children = null }: SkeletonProps) {
     return children !== null && children !== undefined && children !== false ? (
         children
     ) : (
@@ -86,28 +87,4 @@ function Skeleton({ width = 100, height = 100, variant = 'rectangular', children
     );
 }
 
-Skeleton.bspkName = 'Skeleton';
-
-function SkeletonCircular(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="circular" />;
-}
-
-function SkeletonPhoto(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="photo" />;
-}
-
-function SkeletonProfile(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="profile" />;
-}
-
-function SkeletonRectangular(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="rectangular" />;
-}
-
-function SkeletonThumbnail(props: Pick<SkeletonProps, 'height' | 'width'>) {
-    return <Skeleton {...props} variant="thumbnail" />;
-}
-
-export { Skeleton, SkeletonCircular, SkeletonPhoto, SkeletonProfile, SkeletonRectangular, SkeletonThumbnail };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Skeleton/SkeletonExample.tsx

@@ -1,62 +1,49 @@
-/* eslint-disable @cspell/spellchecker */ import { useState, useEffect } from 'react';
-
+import { useState } from 'react';
+import { SkeletonProps, SkeletonVariant } from '.';
 import { Avatar } from '-/components/Avatar';
 import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
 import { useTimeout } from '-/hooks/useTimeout';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, ComponentExampleRenderProps, Preset } from '-/utils/demo';
 
-import { SkeletonProps } from '.';
+export const presets: Preset<SkeletonProps>[] = [
+    {
+        label: 'Loading Transition',
+        propState: {
+            width: '100px',
+            height: '100px',
+        },
+    },
+];
 
 export const SkeletonExample: ComponentExample<SkeletonProps> = {
     render: ({ props, preset, Component }) => {
-        if (preset?.label === 'Loading Transition') return <SkeletonTransition {...props} Component={Component} />;
+        if (preset?.label === 'Loading Transition') return <SkeletonTransition Component={Component} props={props} />;
+
         return <Component {...props} />;
     },
-    presets: [
-        {
-            label: 'Loading Transition',
-            propState: {
-                width: '100px',
-                height: '100px',
-            },
-        },
-    ],
+    presets,
 };
 
 function SkeletonTransition({
     Component,
-    ...props
-}: SkeletonProps & { Component: React.ComponentType<SkeletonProps> }) {
-    const loadingTimeout = useTimeout();
+    props,
+}: Pick<ComponentExampleRenderProps<SkeletonProps>, 'Component' | 'props'>) {
     const [loaded, setLoaded] = useState(false);
-    useEffect(() => {
-        setLoaded(false);
-        loadingTimeout.set(() => setLoaded(true), 3000);
-    }, [loadingTimeout, props.variant]);
+    useTimeout(() => setLoaded(true), 3000);
 
     return (
-        <Component {...props}>
-            {loaded && (
-                <>
-                    {props.variant === 'rectangular' && (
-                        <ExamplePlaceholder height={props.height} width={props.width} />
-                    )}
-                    {props.variant === 'circular' && (
-                        <ExamplePlaceholder
-                            height={props.height}
-                            style={{ borderRadius: '100%' }}
-                            width={props.width}
-                        />
-                    )}
-                    {props.variant === 'photo' && (
-                        <ExamplePlaceholder height={props.height} width={props.width}>
-                            Loaded
-                        </ExamplePlaceholder>
-                    )}
-                    {props.variant === 'profile' && <Avatar color="red" name="Bob Boberson" />}
-                    {props.variant === 'thumbnail' && <ExamplePlaceholder height={props.height} width={props.width} />}
-                </>
-            )}
-        </Component>
+        <Component {...props}>{loaded && <>{PROP_VARIANT_CHILDREN[props!.variant as SkeletonVariant]}</>}</Component>
     );
 }
+
+const PROP_VARIANT_CHILDREN: Record<SkeletonVariant, SkeletonProps['children']> = {
+    rectangular: <ExamplePlaceholder height="100px" width="100px" />,
+    circular: <ExamplePlaceholder height="100px" style={{ borderRadius: '100%' }} width="100px" />,
+    photo: (
+        <ExamplePlaceholder height="100px" width="100px">
+            Loaded
+        </ExamplePlaceholder>
+    ),
+    profile: <Avatar color="red" name="Bob Robertson" />,
+    thumbnail: <ExamplePlaceholder height="100px" width="100px" />,
+};

package/src/components/Skeleton/Thumbnail.tsx

@@ -0,0 +1,5 @@
+import { Skeleton, SkeletonProps } from './Skeleton';
+
+export function SkeletonThumbnail(props: Pick<SkeletonProps, 'height' | 'width'>) {
+    return <Skeleton {...props} variant="thumbnail" />;
+}

package/src/components/Skeleton/index.tsx

@@ -1 +1,6 @@
 export * from './Skeleton';
+export * from './Circular';
+export * from './Photo';
+export * from './Profile';
+export * from './Rectangular';
+export * from './Thumbnail';