@bspk/ui 1.3.3 → 1.3.5

package/src/components/Select/SelectExample.tsx

@@ -27,18 +27,45 @@ export const presets: Preset<SelectProps>[] = [
     {
         label: 'Simple',
         propState: {
-            label: 'Demo Select',
             options: DEFAULT_OPTIONS,
-
             name: 'demo-select',
             value: '',
+            menuWidth: '',
+        },
+    },
+    {
+        label: 'SubText',
+        propState: {
+            options: [
+                {
+                    value: 'Claude 3.7 Sonnet',
+                    label: 'Claude 3.7 Sonnet',
+                    subText: 'bedrock • us.anthropic.claude-3-7-sonnet-20250219-v1:0',
+                },
+                {
+                    value: 'Claude 4 Sonnet',
+                    label: 'Claude 4 Sonnet',
+                    subText: 'bedrock • us.anthropic.claude-sonnet-4-20250514-v1:0',
+                },
+                {
+                    value: 'Claude 4.5 Sonnet',
+                    label: 'Claude 4.5 Sonnet',
+                    subText: 'bedrock • us.anthropic.claude-sonnet-4-5-20250929-v1:0',
+                },
+                {
+                    value: 'GPT 4.1',
+                    label: 'GPT 4.1',
+                    subText: 'azure • gpt-41',
+                },
+            ],
+            name: 'demo-select-long',
+            value: '',
+            menuWidth: '600px',
         },
     },
     {
         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' },
@@ -47,13 +74,12 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-long',
             value: '',
+            menuWidth: '',
         },
     },
     {
         label: 'Trailing Tags',
         propState: {
-            label: 'Demo Select',
-
             options: [
                 //
                 {
@@ -71,13 +97,12 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-tags',
             value: 'a',
+            menuWidth: '',
         },
     },
     {
         label: 'Trailing Text',
         propState: {
-            label: 'Demo Select',
-
             options: [
                 {
                     value: '1',
@@ -90,13 +115,12 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-trailing',
             value: '',
+            menuWidth: '',
         },
     },
     {
         label: 'Leading Avatar',
         propState: {
-            label: 'Select user',
-
             options: [
                 //
                 {
@@ -122,19 +146,17 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-avatar',
             value: '',
+            menuWidth: '',
         },
     },
 ];
 
 export const SelectExample: ComponentExample<SelectProps> = {
     defaultState: {
-        label: 'Demo Select',
         options: DEFAULT_OPTIONS,
         scrollLimit: 5,
         value: '',
     },
-    render: ({ props, Component }) => {
-        return <Component {...props} />;
-    },
+    render: ({ props, Component, preset }) => <Component key={preset?.label} {...props} />,
     presets,
 };

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

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

package/src/components/SelectField/SelectField.tsx

@@ -1,69 +1,35 @@
-import { FormField, FormFieldWrapProps } from '-/components/FormField';
-import { SelectProps, Select } from '-/components/Select';
+import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Select, SelectProps } from '-/components/Select';
 
-export type SelectFieldProps = FormFieldWrapProps<SelectProps>;
+export type SelectFieldProps = FormFieldControlProps<SelectProps>;
 
 /**
- * A component that allows users to input large amounts of text that could span multiple lines.
+ * A field wrapper for the Select component.
  *
  * This component takes properties from the FormField and Select components.
  *
- * @example
- *     import { SelectField } from '@bspk/ui/SelectField';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState(['option1']);
- *         return (
- *             <SelectField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={(nextValue) => setState(nextValue)}
- *                 options={[
- *                     { label: 'Option 1', value: 'option1' },
- *                     { label: 'Option 2', value: 'option2' },
- *                     { label: 'Option 3', value: 'option3' },
- *                 ]}
- *                 placeholder="Select one..."
- *                 value={state}
- *             />
- *         );
- *     }
- *
  * @name SelectField
  * @phase UXReview
+ *
+ * @generated
  */
 export function SelectField({
     label,
     helperText,
-    controlId,
     labelTrailing,
-    required,
-    invalid,
     errorMessage,
-    ...inputProps
+    style,
+    ...controlProps
 }: SelectFieldProps) {
     return (
         <FormField
-            controlId={controlId}
-            data-bspk="select-field"
             errorMessage={errorMessage}
             helperText={helperText}
-            invalid={invalid}
             label={label}
             labelTrailing={labelTrailing}
-            required={required}
+            style={style}
         >
-            {(fieldProps) => (
-                <Select
-                    //
-                    {...inputProps}
-                    {...fieldProps}
-                    id={controlId}
-                    invalid={invalid}
-                    label={label}
-                />
-            )}
+            <Select {...controlProps} />
         </FormField>
     );
 }

package/src/components/Skeleton/SkeletonExample.tsx

@@ -31,9 +31,7 @@ function SkeletonTransition({
     const [loaded, setLoaded] = useState(false);
     useTimeout(() => setLoaded(true), 3000);
 
-    return (
-        <Component {...props}>{loaded && <>{PROP_VARIANT_CHILDREN[props!.variant as SkeletonVariant]}</>}</Component>
-    );
+    return <Component {...props}>{loaded && PROP_VARIANT_CHILDREN[props!.variant as SkeletonVariant]}</Component>;
 }
 
 const PROP_VARIANT_CHILDREN: Record<SkeletonVariant, SkeletonProps['children']> = {

package/src/components/SkeletonText/SkeletonText.tsx

@@ -48,7 +48,7 @@ export type SkeletonTextProps = {
  * @name SkeletonText
  * @phase UXReview
  */
-export function SkeletonText({ lines = 3, variant, children = null }: SkeletonTextProps) {
+export function SkeletonText({ lines = 3, variant = 'body-base', children = null }: SkeletonTextProps) {
     return children !== null && children !== undefined && children !== false ? (
         children
     ) : (

package/src/components/Slider/slider.scss

@@ -26,6 +26,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
+        position: relative;
     }
 
     [data-slider-body] {

package/src/components/Snackbar/Snackbar.tsx

@@ -1,48 +1,144 @@
 import './snackbar.scss';
+import { FocusTrap } from 'focus-trap-react';
+import { ReactNode, isValidElement, useEffect, useRef } from 'react';
 import { Button } from '-/components/Button';
-import { Txt } from '-/components/Txt';
-import { SnackbarData } from '-/utils/snackbarContext';
+import { Portal } from '-/components/Portal';
+import { Truncated } from '-/components/Truncated';
+import { useId } from '-/hooks/useId';
+import { CommonProps, SetRef } from '-/types/common';
 
-export type SnackbarProps = {
-    /** Text to be shown in the snackbar */
+export type SnackbarProps = CommonProps<'id'> & {
+    /**
+     * Text to be shown in the snackbar
+     *
+     * @required
+     */
     text: string;
-    /** Optional action button */
-    button?: SnackbarData['button'];
-    /** Callback when the snackbar is dismissed */
+    /**
+     * Whether to show a close button on the snackbar.
+     *
+     * Since there is no default timeout, this is true by default. You can provide a timeout to auto-dismiss the
+     * snackbar in addition to the close button.
+     *
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Label for the close button.
+     *
+     * @default Dismiss
+     */
+    closeButtonLabel?: string;
+    /**
+     * The icon of the button.
+     *
+     * @type BspkIcon
+     */
+    icon?: ReactNode;
+    /**
+     * Callback when the snackbar is dismissed
+     *
+     * @required
+     */
     onClose: () => void;
+    /** Content to be rendered inside the snack bar provider, the snackbar trigger element. */
+    // children: ReactNode;
+    /**
+     * Time in milliseconds after which the snackbar will auto dismiss.
+     *
+     * If no timeout is provided, and closeButton is set to false the snackbar will not be dismissable.
+     */
+    timeout?: number;
+    /**
+     * If the snackbar is open or not.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /** A ref to the snackbar element. */
+    innerRef?: SetRef<HTMLDivElement>;
+    /**
+     * If focus trapping should be disabled. Generally this should not be disabled as snackbars should always trap
+     * focus.
+     *
+     * @default false
+     */
+    disableFocusTrap?: boolean;
 };
 
 /**
- * Snackbars are intended to provide feedback about an action without interrupting the customer experience. NOTE: While
- * they can be imported and used directly, they are intended to be used via the SnackbarProvider and the
- * useSnackbarContext hook.
+ * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
+ * experience.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { useState } from 'react';
  *
- *     function Example() {
- *         return <Snackbar text="Something happened!" />;
+ *     function ExampleComponent(props) {
+ *         const [snackbarOpen, setSnackbarOpen] = useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
+ *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *             </>
+ *         );
  *     }
  *
  * @name Snackbar
- * @phase Utility
+ *
+ * @phase UXReview
  */
-export function Snackbar({ text, button, onClose }: SnackbarProps) {
-    return (
-        <span data-bspk="snackbar" role="alert">
-            <Txt variant="body-small">{text}</Txt>
+export function Snackbar({
+    id: propId,
+    text,
+    timeout,
+    closeButton = true,
+    closeButtonLabel = 'Dismiss',
+    icon,
+    onClose,
+    open = false,
+    innerRef,
+    disableFocusTrap = false,
+}: SnackbarProps) {
+    const id = useId(propId);
+    const boxRef = useRef<HTMLDivElement | null>(null);
+    useEffect(() => {
+        if (open && timeout) {
+            const timer = setTimeout(() => {
+                onClose?.();
+            }, timeout);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [open, timeout, onClose]);
 
-            {button && (
-                <Button
-                    label={button.label}
-                    onClick={button.onClick === 'close' ? onClose : button.onClick}
-                    variant="tertiary"
+    if (!open) return null;
+
+    return (
+        <Portal>
+            <div aria-live="off" data-bspk="snackbar" id={id} ref={innerRef}>
+                <FocusTrap
+                    active={!disableFocusTrap}
+                    focusTrapOptions={{
+                        clickOutsideDeactivates: true,
+                        fallbackFocus: () => boxRef.current!,
+                    }}
                 >
-                    {button.label}
-                </Button>
-            )}
-        </span>
+                    <div data-snackbar-content key={id} role="alert">
+                        <div data-snackbar-icon-text>
+                            {!!icon && isValidElement(icon) && (
+                                <span aria-hidden={true} data-snackbar-icon>
+                                    {icon}
+                                </span>
+                            )}
+                            <Truncated data-label>{text}</Truncated>
+                        </div>
+                        {closeButton && <Button label={closeButtonLabel} onClick={onClose} variant="tertiary" />}
+                    </div>
+                </FocusTrap>
+            </div>
+        </Portal>
     );
 }
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Snackbar/SnackbarExample.tsx

@@ -1,4 +1,5 @@
-import { SnackbarProps } from '.';
+import { Snackbar, SnackbarProps } from './Snackbar';
+import { Button } from '-/components/Button';
 import { ComponentExample } from '-/utils/demo';
 
 export const SnackbarExample: ComponentExample<SnackbarProps> = {
@@ -6,7 +7,12 @@ export const SnackbarExample: ComponentExample<SnackbarProps> = {
     defaultState: {},
     disableProps: [],
     presets: [],
-    render: ({ props, Component }) => <Component {...props} />,
+    render: ({ props, setState }) => (
+        <>
+            <Snackbar {...props} onClose={() => setState({ open: false })} />
+            <Button label="open snackbar" onClick={() => setState({ open: true })} size="medium" title="Snackbar" />
+        </>
+    ),
     sections: [],
-    variants: {},
+    variants: false,
 };

package/src/components/Snackbar/snackbar.scss

@@ -1,22 +1,54 @@
 [data-bspk='snackbar'] {
-    pointer-events: auto;
+    position: fixed;
+    z-index: var(--z-index-dialog);
     display: flex;
-    flex-direction: row;
+    flex-direction: column-reverse;
+    max-height: 100%;
+    overflow: hidden;
+    inset: 0;
     align-items: center;
-    justify-content: space-between;
-    border-radius: var(--radius-md);
-    padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
-    gap: var(--spacing-sizing-03);
-    width: 600px;
-    max-width: 100%;
-    box-shadow:
-        0 0 1px 0 var(--shadow-variant-05),
-        0 0 12px 0 var(--shadow-variant-03);
-    background-color: var(--surface-neutral-inverse);
-    color: var(--foreground-neutral-on-inverse-surface);
-    height: var(--spacing-sizing-14);
+    gap: var(--spacing-sizing-02);
+    pointer-events: none;
+    padding: var(--spacing-sizing-02);
 
-    [data-bspk='button'][data-variant='tertiary'] {
-        color: inherit;
+    [data-snackbar-content] {
+        pointer-events: auto;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: var(--radius-md);
+        padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
+        gap: var(--spacing-sizing-03);
+        width: 600px;
+        box-shadow:
+            0 0 1px 0 var(--shadow-variant-05),
+            0 0 12px 0 var(--shadow-variant-03);
+        background-color: var(--surface-neutral-inverse);
+        color: var(--foreground-neutral-on-inverse-surface);
+        height: var(--spacing-sizing-14);
+
+        [data-snackbar-icon-text] {
+            flex: 1 1 0; // allow to grow and shrink, but not overflow
+            min-width: 0; // Prevent overflow from long content
+            max-width: 100%;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-sizing-03);
+        }
+
+        [data-snackbar-icon] {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: var(--spacing-sizing-05);
+            height: var(--spacing-sizing-05);
+        }
+
+        [data-bspk='button'][data-variant='tertiary'] {
+            flex: 0 0 auto; // prevent button from shrinking
+            color: inherit;
+        }
     }
 }

package/src/components/StylesProviderDemo/StylesProviderDemo.tsx

@@ -1,15 +1,18 @@
 import { useRef, useEffect } from 'react';
 import { BRANDS_CSS } from './brandsCss';
+import { EXAMPLE_CSS } from './exampleCss';
 import { Brand } from '-/types/common';
 import '-/styles/base.scss';
 
+const THEME_CSS = { ...BRANDS_CSS, ...EXAMPLE_CSS };
+
 export type StylesProviderDemoProps = {
     /**
      * The current brand variant.
      *
      * @default anywhere
      */
-    brand?: Brand;
+    brand?: Brand | 'example';
 };
 
 /**
@@ -34,7 +37,7 @@ export function StylesProviderDemo({ brand = 'anywhere' }: StylesProviderDemoPro
             document.head.appendChild(styleElement.current);
         }
 
-        styleElement.current.textContent = (brand && BRANDS_CSS[brand]) || BRANDS_CSS.anywhere;
+        styleElement.current.textContent = (brand && THEME_CSS[brand]) || THEME_CSS.anywhere;
 
         return () => {
             if (!styleElement.current) return;