@bspk/ui 1.3.3 → 1.3.4

package/src/components/Select/Select.tsx

@@ -1,13 +1,13 @@
 import './select.scss';
 import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { useMemo, KeyboardEvent, MouseEvent } from 'react';
+import { useFieldInit } from '-/components/Field';
 import { ListItem, ListItemProps } from '-/components/ListItem';
 import { Menu } from '-/components/Menu';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useFloating } from '-/hooks/useFloating';
-import { useId } from '-/hooks/useId';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
-import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
+import { CommonProps, ElementProps, FieldControlProps } from '-/types/common';
 import { getElementById } from '-/utils/dom';
 import { handleKeyDown } from '-/utils/handleKeyDown';
 import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
@@ -22,8 +22,8 @@ export type SelectOption = CommonProps<'disabled'> &
 
 export type SelectItem = SelectOption & { id: string };
 
-export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> &
-    FormFieldControlProps &
+export type SelectProps = CommonProps<'size'> &
+    FieldControlProps<string, KeyboardEvent | MouseEvent> &
     ScrollListItemsStyleProps & {
         /**
          * Array of options to display in the select
@@ -46,23 +46,6 @@ export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | '
          * @required
          */
         options: SelectOption[];
-        /** Selected value */
-        value: string;
-        /**
-         * The function to call when the selected values change.
-         *
-         * @example
-         *     (value, event) => setState({ value });
-         *
-         * @required
-         */
-        onChange: (value: string, event?: KeyboardEvent | MouseEvent) => void;
-        /**
-         * The label for the select element, used for accessibility, and the dropdown modal header.
-         *
-         * @required
-         */
-        label: string;
         /**
          * Placeholder for the select
          *
@@ -74,29 +57,30 @@ export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | '
 /**
  * A field element that allows users to select one option from a list of available choices.
  *
+ * For a more complete example with field usage, see the SelectField component.
+ *
  * @example
  *     import { Select } from '@bspk/ui/Select';
  *
- *     export function Example() {
+ *     const OPTIONS = [
+ *         { id: '1', label: 'Option 1' },
+ *         { id: '2', label: 'Option 2' },
+ *         { id: '3', label: 'Option 3' },
+ *         { id: '4', label: 'Option 4' },
+ *         { id: '5', label: 'Option 5' },
+ *         { id: '6', label: 'Option 6' },
+ *     ];
+ *
+ *     function ExampleStandalone() {
  *         const [selected, setSelected] = React.useState<string[]>([]);
+ *
  *         return (
  *             <Select
- *                 label="Select an option"
+ *                 aria-label="Select an option"
  *                 itemCount={5}
  *                 name="example-select"
  *                 onChange={setSelected}
- *                 options={[
- *                     { id: '1', label: 'Option 1' },
- *                     { id: '2', label: 'Option 2' },
- *                     { id: '3', label: 'Option 3' },
- *                     { id: '4', label: 'Option 4' },
- *                     { id: '5', label: 'Option 5' },
- *                     { id: '6', label: 'Option 6' },
- *                     { id: '7', label: 'Option 7' },
- *                     { id: '8', label: 'Option 8' },
- *                     { id: '9', label: 'Option 9' },
- *                     { id: '10', label: 'Option 10' },
- *                 ]}
+ *                 options={OPTIONS}
  *                 placeholder="Select an option"
  *                 size="medium"
  *                 value={selected}
@@ -104,6 +88,27 @@ export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | '
  *         );
  *     }
  *
+ *     function ExampleWithField() {
+ *         const [selected, setSelected] = React.useState<string[]>([]);
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Select an option</FieldLabel>
+ *                 <Select
+ *                     itemCount={5}
+ *                     name="example-select"
+ *                     onChange={setSelected}
+ *                     options={OPTIONS}
+ *                     placeholder="Select an option"
+ *                     size="medium"
+ *                     value={selected}
+ *                 />
+ *                 <FieldDescription>
+ *                     The select allows you to choose one option from a list of options.
+ *                 </FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
  * @name Select
  * @phase UXReview
  */
@@ -111,21 +116,25 @@ export function Select({
     options: optionsProp = [],
     value = '',
     onChange,
-    label,
     placeholder = 'Select one',
     size = 'medium',
     disabled,
     id: idProp,
-    invalid,
+    invalid: invalidProp,
     readOnly,
     name,
-    'aria-describedby': ariaDescribedBy,
-    'aria-errormessage': ariaErrorMessage,
-    'aria-labelledby': ariaLabelledBy,
     scrollLimit,
-    ...props
+    required = false,
+    'aria-label': ariaLabel,
+    ...elementProps
 }: ElementProps<SelectProps, 'button'>) {
-    const id = useId(idProp);
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
     const menuId = useMemo(() => `${id}-menu`, [id]);
 
     const { items, availableItems } = useMemo(() => {
@@ -134,7 +143,7 @@ export function Select({
                 ...item,
                 id: `${id}-item-${index}`,
                 'aria-label': item.label,
-                'aria-selected': value.includes(item.value),
+                'aria-selected': value == item.value,
             }),
         );
 
@@ -173,22 +182,17 @@ export function Select({
     return (
         <>
             <input name={name} type="hidden" value={value} />
-            {!ariaLabelledBy && (
-                <div data-sr-only id={`${id}-label`}>
-                    {label}
-                </div>
-            )}
             <button
-                {...props}
+                aria-label={`${ariaLabel} ${selectedItem?.label || placeholder}`}
+                {...elementProps}
                 aria-activedescendant={activeElementId || undefined}
                 aria-autocomplete="list"
-                aria-controls={activeElementId ? menuId : undefined}
+                aria-controls={open ? menuId : undefined}
                 aria-describedby={ariaDescribedBy || undefined}
                 aria-disabled={disabled || readOnly || undefined}
                 aria-errormessage={ariaErrorMessage || undefined}
                 aria-expanded={open}
                 aria-haspopup="listbox"
-                aria-labelledby={ariaLabelledBy || `${id}-label`}
                 aria-readonly={readOnly || undefined}
                 data-bspk="select"
                 data-invalid={invalid || undefined}
@@ -244,11 +248,9 @@ export function Select({
             </button>
             <Menu
                 aria-autocomplete={undefined}
-                aria-label={label}
                 as="div"
                 id={menuId}
                 innerRef={elements.setFloating}
-                label={label}
                 onClickCapture={() => {
                     // Prevent the menu from closing when clicking inside it
                     // maintain focus on the select control
@@ -267,7 +269,7 @@ export function Select({
             >
                 {items.map((item) => {
                     const isActive = activeElementId === item.id;
-                    const isSelected = value.includes(item.value);
+                    const isSelected = value === item.value;
 
                     return (
                         <ListItem

package/src/components/Select/SelectExample.tsx

@@ -27,9 +27,7 @@ export const presets: Preset<SelectProps>[] = [
     {
         label: 'Simple',
         propState: {
-            label: 'Demo Select',
             options: DEFAULT_OPTIONS,
-
             name: 'demo-select',
             value: '',
         },
@@ -37,8 +35,6 @@ export const presets: Preset<SelectProps>[] = [
     {
         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' },
@@ -52,8 +48,6 @@ export const presets: Preset<SelectProps>[] = [
     {
         label: 'Trailing Tags',
         propState: {
-            label: 'Demo Select',
-
             options: [
                 //
                 {
@@ -76,8 +70,6 @@ export const presets: Preset<SelectProps>[] = [
     {
         label: 'Trailing Text',
         propState: {
-            label: 'Demo Select',
-
             options: [
                 {
                     value: '1',
@@ -95,8 +87,6 @@ export const presets: Preset<SelectProps>[] = [
     {
         label: 'Leading Avatar',
         propState: {
-            label: 'Select user',
-
             options: [
                 //
                 {
@@ -128,13 +118,10 @@ export const presets: Preset<SelectProps>[] = [
 
 export const SelectExample: ComponentExample<SelectProps> = {
     defaultState: {
-        label: 'Demo Select',
         options: DEFAULT_OPTIONS,
         scrollLimit: 5,
         value: '',
     },
-    render: ({ props, Component }) => {
-        return <Component {...props} />;
-    },
+    render: ({ props, Component }) => <Component {...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,22 @@
-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
-}: SelectFieldProps) {
+export function SelectField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: SelectFieldProps) {
     return (
-        <FormField
-            controlId={controlId}
-            data-bspk="select-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            invalid={invalid}
-            label={label}
-            labelTrailing={labelTrailing}
-            required={required}
-        >
-            {(fieldProps) => (
-                <Select
-                    //
-                    {...inputProps}
-                    {...fieldProps}
-                    id={controlId}
-                    invalid={invalid}
-                    label={label}
-                />
-            )}
+        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+            <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/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;
+        }
     }
 }