@bspk/ui 1.3.3 → 1.3.5

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,65 +1,35 @@
 import './radio-group.scss';
+import { useFieldInit } from '-/components/Field';
+import { RadioProps } from '-/components/Radio';
 import { RadioOption, RadioOptionProps } from '-/components/RadioOption';
-import { useId } from '-/hooks/useId';
-import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
+import { ElementProps, FieldControlProps } from '-/types/common';
 
-export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label' | 'name'> &
-    Required<CommonProps<'value'>>;
+export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label'> &
+    Pick<RadioProps, 'value'>;
 
-export type RadioGroupProps = CommonProps<'disabled' | 'name'> &
-    FormFieldControlProps & {
-        /**
-         * The value of the control.
-         *
-         * @example
-         *     1;
-         *
-         * @required
-         */
-        value: string;
-        /**
-         * The function to call when the radios are changed.
-         *
-         * @example
-         *     (value) => setState({ value }),
-         *
-         * @required
-         */
-        onChange: (value: string) => void;
-        /**
-         * The options for the radios.
-         *
-         * @example
-         *     [
-         *         {
-         *             value: '1',
-         *             label: 'Option 1',
-         *         },
-         *         {
-         *             value: '2',
-         *             label: 'Option 2',
-         *             description: 'Description here',
-         *         },
-         *         { value: '3', label: 'Option 3' },
-         *     ];
-         *
-         * @type Array<RadioGroupOption>
-         * @required
-         */
-        options: RadioGroupOption[];
-        /**
-         * The label of the radio group.
-         *
-         * @required
-         */
-        label: string;
-        /**
-         * Hides the RadioGroup label. When label isn't showing it is used as the aria-label prop.
-         *
-         * @default false
-         */
-        hideLabel?: boolean;
-    };
+export type RadioGroupProps = FieldControlProps & {
+    /**
+     * The options for the radios.
+     *
+     * @example
+     *     [
+     *         {
+     *             value: '1',
+     *             label: 'Option 1',
+     *         },
+     *         {
+     *             value: '2',
+     *             label: 'Option 2',
+     *             description: 'Description here',
+     *         },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<RadioGroupOption>
+     * @required
+     */
+    options: RadioGroupOption[];
+};
 
 /**
  * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
@@ -68,12 +38,12 @@ export type RadioGroupProps = CommonProps<'disabled' | 'name'> &
  *     import { useState } from 'react';
  *     import { RadioGroup } from '@bspk/ui/RadioGroup';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedOption, setSelectedOption] = useState<string>('1');
  *
  *         return (
  *             <RadioGroup
- *                 name="Example name"
+ *                 name="example-name"
  *                 onChange={(nextValue) => setSelectedOption(nextValue)}
  *                 options={[
  *                     {
@@ -97,41 +67,49 @@ export function RadioGroup({
     options = [],
     name,
     value: groupValue,
-    label: groupLabel,
-    hideLabel: hideLabelProp = false,
-    disabled: disabledGroup = false,
+    disabled = false,
+    readOnly,
+    invalid: invalidProp,
+    required,
+    id: idProp,
+    'aria-describedby': ariaDescribedByProp,
+    'aria-errormessage': ariaErrorMessageProp,
     ...props
 }: ElementProps<RadioGroupProps, 'div'>) {
-    const id = `radio-group-${useId()}`;
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
 
     return (
         <div
             {...props}
-            aria-describedby={props['aria-describedby']}
-            aria-errormessage={props['aria-errormessage']}
-            aria-label={hideLabelProp ? groupLabel : undefined}
-            aria-labelledby={!hideLabelProp ? `${id}-label` : undefined}
+            aria-describedby={ariaDescribedByProp || ariaDescribedBy || undefined}
             data-bspk="radio-group"
             id={id}
             role="radiogroup"
         >
-            {!hideLabelProp && <label id={`${id}-label`}>{groupLabel}</label>}
-            <div role="presentation">
-                {options.map(({ label, description, disabled, value }, index) => {
-                    return (
-                        <RadioOption
-                            checked={groupValue === value}
-                            description={description}
-                            disabled={disabledGroup || disabled}
-                            key={`radio-option-${value || index}`}
-                            label={label}
-                            name={name}
-                            onChange={(checked) => checked && onChange(value)}
-                            value={value}
-                        />
-                    );
-                })}
-            </div>
+            {options.map(({ label, description, value, ...option }, index) => {
+                return (
+                    <RadioOption
+                        aria-describedby={ariaDescribedByProp || ariaDescribedBy || undefined}
+                        aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
+                        checked={groupValue === value}
+                        description={description}
+                        disabled={disabled || option.disabled}
+                        invalid={invalid || undefined}
+                        key={`radio-option-${value || index}`}
+                        label={label}
+                        name={name}
+                        onChange={(checked) => checked && onChange(value)}
+                        required={required}
+                        value={value}
+                    />
+                );
+            })}
         </div>
     );
 }

package/src/components/RadioGroup/radio-group.scss

@@ -1,6 +1,8 @@
 [data-bspk='radio-group'] {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-sizing-01);
+    gap: 0;
     max-width: 100%;
+
+    --list-item-height: 'auto';
 }

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

@@ -0,0 +1,27 @@
+import { RadioGroupField } from '.';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <RadioGroupField
+        label="Example field label"
+        name="example-field-name"
+        onChange={() => {}}
+        options={[
+            { value: '1', label: 'Option 1' },
+            { value: '2', label: 'Option 2' },
+            { value: '3', label: 'Option 3' },
+        ]}
+        value=""
+    />
+);
+
+describe('RadioGroupField (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getAllByText } = render(<TestBed />);
+
+        expect(getAllByText('Example field label')[0]).toBeInTheDocument();
+    });
+});

package/src/components/RadioGroupField/RadioGroupField.tsx

@@ -0,0 +1,37 @@
+import { Field, FieldDescription, FieldError, FieldLabel } from '-/components/Field';
+import { FormFieldControlProps } from '-/components/FormField';
+import { RadioGroup, RadioGroupProps } from '-/components/RadioGroup';
+
+export type RadioGroupFieldProps = FormFieldControlProps<RadioGroupProps>;
+
+/**
+ * A field wrapper for the RadioGroup component.
+ *
+ * This component takes properties from the FormField and RadioGroup components.
+ *
+ * @name RadioGroupField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function RadioGroupField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    style,
+    ...controlProps
+}: RadioGroupFieldProps) {
+    return (
+        <Field as="fieldset">
+            <FieldLabel as="legend" labelTrailing={labelTrailing} style={style}>
+                {label}
+            </FieldLabel>
+            <RadioGroup {...controlProps} />
+            {!errorMessage && helperText && <FieldDescription>{helperText}</FieldDescription>}
+            {errorMessage && <FieldError>{errorMessage}</FieldError>}
+        </Field>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/RadioGroupField/index.tsx

@@ -0,0 +1 @@
+export * from './RadioGroupField';

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

@@ -21,7 +21,7 @@ const TestBed = () => {
         <SearchBar
             aria-label="Example aria-label"
             items={items}
-            name="Example name"
+            name="example-name"
             onChange={() => {}}
             placeholder="Search"
             value=""
@@ -33,8 +33,8 @@ describe('SearchBar (RTL)', () => {
     it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
 
     it('renders', () => {
-        const { getByLabelText } = render(<TestBed />);
+        const { getByPlaceholderText } = render(<TestBed />);
 
-        expect(getByLabelText('Example aria-label')).toBeInTheDocument();
+        expect(getByPlaceholderText('Search')).toBeInTheDocument();
     });
 });

package/src/components/SearchBar/SearchBar.tsx

@@ -1,15 +1,16 @@
 import './search-bar.scss';
 import { SvgSearch } from '@bspk/icons/Search';
 import { useEffect, useMemo, useState } from 'react';
+import { InputProps, Input } from '-/components/Input';
 import { ListItem, ListItemProps } from '-/components/ListItem';
 import { Menu } from '-/components/Menu';
-import { TextInputProps, TextInput } from '-/components/TextInput';
 import { Txt } from '-/components/Txt';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useFloating } from '-/hooks/useFloating';
 import { useId } from '-/hooks/useId';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { useUIContext } from '-/hooks/useUIContext';
+import { FieldControlProps } from '-/types/common';
 import { getElementById } from '-/utils/dom';
 import { handleKeyDown } from '-/utils/handleKeyDown';
 import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
@@ -22,13 +23,9 @@ import { useIds } from '-/utils/useIds';
  */
 export type SearchBarOption = Pick<ListItemProps, 'label' | 'leading' | 'trailing'>;
 
-export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = Pick<
-    TextInputProps,
-    'aria-label' | 'disabled' | 'id' | 'inputRef' | 'name' | 'size'
-> &
+export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = FieldControlProps<string, O> &
+    Pick<InputProps, 'inputRef' | 'size' | 'trailing'> &
     ScrollListItemsStyleProps & {
-        /** The current value of the search bar. */
-        value?: string;
         /**
          * The placeholder of the field.
          *
@@ -37,14 +34,6 @@ export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = Pick<
          * @required
          */
         placeholder: string;
-        /**
-         * Handler for input value change. This is called on every key press in the input field and when a menu item is
-         * selected.
-         *
-         * @type (value: String, item?: SearchBarOption) => void
-         * @required
-         */
-        onChange: (value: string, item?: O) => void;
         /**
          * Content to display in the menu.
          *
@@ -80,8 +69,8 @@ export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = Pick<
  *     import { useState } from 'react';
  *     import { SearchBar } from '@bspk/ui/SearchBar';
  *
- *     export function Example() {
- *         const [searchText, setSearchText] = useState<string>('');
+ *     function Example() {
+ *         const [searchText, setSearchText] = useState('');
  *
  *         return (
  *             <SearchBar
@@ -98,7 +87,7 @@ export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = Pick<
  *                     { label: 'Ice Cream Sandwich' },
  *                     { label: 'Jackfruit Pudding' },
  *                 ]}
- *                 name="Example name"
+ *                 name="example-name"
  *                 placeholder="Search"
  *                 value={searchText}
  *                 onChange={setSearchText}
@@ -113,7 +102,6 @@ export function SearchBar<O extends SearchBarOption>({
     items: itemsProp,
     noResultsMessage,
     placeholder = 'Search',
-    'aria-label': ariaLabel,
     id: idProp,
     inputRef,
     name,
@@ -122,6 +110,7 @@ export function SearchBar<O extends SearchBarOption>({
     onChange,
     disabled = false,
     scrollLimit,
+    trailing,
 }: SearchBarProps<O>) {
     const id = useId(idProp);
     const menuId = `${id}-menu`;
@@ -189,8 +178,7 @@ export function SearchBar<O extends SearchBarOption>({
     return (
         <>
             <div data-bspk="search-bar">
-                <TextInput
-                    aria-label={ariaLabel}
+                <Input
                     autoComplete="off"
                     containerRef={elements.setReference}
                     disabled={disabled}
@@ -228,6 +216,7 @@ export function SearchBar<O extends SearchBarOption>({
                     owner="search-bar"
                     placeholder={placeholder}
                     size={size}
+                    trailing={trailing}
                     value={value}
                 />
             </div>

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -12,7 +12,7 @@ export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
  *     import { useState } from 'react';
  *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedOption, setSelectedOption] = useState<string>();
  *
  *         return (

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

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

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 { Menu, MenuProps } 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';
@@ -18,12 +18,12 @@ import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollL
  * Essentially the props of ListItemProps.
  */
 export type SelectOption = CommonProps<'disabled'> &
-    Omit<ListItemProps, 'id' | 'onClick' | 'subText' | 'value'> & { value: string };
+    Omit<ListItemProps, 'id' | 'onClick' | 'value'> & { value: string };
 
 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,57 +46,47 @@ 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
          *
          * @default Select one
          */
         placeholder?: string;
+        /**
+         * The width of the menu.
+         *
+         * If not provided, the menu will match the width of the select control.
+         */
+        menuWidth?: MenuProps['width'];
     };
 
 /**
  * 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 +94,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 +122,26 @@ 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,
+    menuWidth,
+    ...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 +150,7 @@ export function Select({
                 ...item,
                 id: `${id}-item-${index}`,
                 'aria-label': item.label,
-                'aria-selected': value.includes(item.value),
+                'aria-selected': value == item.value,
             }),
         );
 
@@ -153,7 +169,8 @@ export function Select({
     const { elements, floatingStyles } = useFloating({
         hide: !open,
         offsetOptions: 4,
-        refWidth: true,
+        //match reference width if menuWidth not provided
+        refWidth: !menuWidth,
     });
 
     useOutsideClick({
@@ -173,22 +190,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 +256,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
@@ -264,10 +274,11 @@ export function Select({
                     ...floatingStyles,
                 }}
                 tabIndex={-1}
+                width={menuWidth}
             >
                 {items.map((item) => {
                     const isActive = activeElementId === item.id;
-                    const isSelected = value.includes(item.value);
+                    const isSelected = value === item.value;
 
                     return (
                         <ListItem