@bspk/ui 1.3.3 → 1.3.4

package/src/components/Popover/Popover.tsx

@@ -49,7 +49,7 @@ export type PopoverProps = CommonProps<'disabled'> &
          *
          * @required
          */
-        children: (triggerProps: PopoverTriggerProps) => ReactElement;
+        children: (triggerProps: PopoverTriggerProps) => ReactElement | null;
     };
 
 /**
@@ -60,7 +60,7 @@ export type PopoverProps = CommonProps<'disabled'> &
  *     import { Popover } from '@bspk/ui/Popover';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [showPopover, setShowPopover] = useState<boolean>(false);
  *
  *         const togglePopover = () => setShowPopover(!showPopover);

package/src/components/Popover/PopoverExample.tsx

@@ -25,7 +25,7 @@ export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) =>
                     label: 'CTA Button',
                     onClick: () => action('Call to action clicked!'),
                 },
-                children: () => <></>,
+                children: () => null,
             },
         },
         {
@@ -41,7 +41,7 @@ export const PopoverExample: ComponentExampleFn<PopoverProps> = ({ action }) =>
                     label: 'Secondary',
                     onClick: () => action('Secondary call to action clicked!'),
                 },
-                children: () => <></>,
+                children: () => null,
             },
         },
     ],

package/src/components/ProgressBar/ProgressBar.tsx

@@ -53,7 +53,7 @@ export type ProgressBarProps = {
  * @example
  *     import { ProgressBar } from '@bspk/ui/ProgressBar';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <ProgressBar label="Example label" completion={50} />;
  *     }
  *

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -27,7 +27,7 @@ export type ProgressCircleProps = {
  * @example
  *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <ProgressCircle label="Example label" />;
  *     }
  *

package/src/components/ProgressionStepper/ProgressionStepper.tsx

@@ -59,7 +59,7 @@ export type ProgressionStepperProps = {
  * @example
  *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
  *     }
  *
@@ -86,19 +86,14 @@ export function ProgressionStepper({
                 <label>
                     <span data-title>{currentStep.name}</span>
                     <span data-subtitle>
-                        {currentStep.subtext ? (
-                            currentStep.subtext
-                        ) : (
-                            <>
-                                {completedStepNumber === steps.length ? (
-                                    'Completed'
-                                ) : (
-                                    <>
-                                        Step {currentStepNumber} of {steps.length}
-                                    </>
-                                )}
-                            </>
-                        )}
+                        {currentStep?.subtext ||
+                            (completedStepNumber === steps.length ? (
+                                'Completed'
+                            ) : (
+                                <>
+                                    Step {currentStepNumber} of {steps.length}
+                                </>
+                            ))}
                     </span>
                 </label>
             )}

package/src/components/ProgressionStepper/ProgressionStepperExample.tsx

@@ -51,7 +51,7 @@ export const presets: Preset<ProgressionStepperProps>[] = [
         label: 'Widget (w/ subtext)',
         propState: {
             variant: 'widget',
-            completedStep: 3,
+            completedStep: 6,
             steps: [
                 { name: 'Name of step 1' },
                 { name: 'Name of step 2' },
@@ -59,7 +59,7 @@ export const presets: Preset<ProgressionStepperProps>[] = [
                 { name: 'Name of step 4' },
                 { name: 'Name of step 5' },
                 { name: 'Name of step 6' },
-                { name: 'Review', subtext: `Check your information...` },
+                { name: 'Review', subtext: `Whoop, there it is...` },
             ],
         },
     },

package/src/components/Radio/Radio.tsx

@@ -1,22 +1,21 @@
 import './radio.scss';
 import { ChangeEvent } from 'react';
-import { ElementProps, CommonProps } from '-/types/common';
+import { ElementProps, FieldControlProps } from '-/types/common';
 
-export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> &
-    Required<CommonProps<'value'>> & {
-        /**
-         * Marks the radio as checked.
-         *
-         * @default false
-         */
-        checked?: boolean;
-        /**
-         * The function to call when the radio is checked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    };
+export type RadioProps = Omit<FieldControlProps<string, ChangeEvent<HTMLInputElement>>, 'onChange' | 'readOnly'> & {
+    /**
+     * Marks the radio as checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * The function to call when the radio is checked.
+     *
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+};
 
 /**
  * A round control that allows user to choose one option from a set. This is the base element and if used directly you

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

@@ -4,18 +4,17 @@ import { render } from '-/rtl/util';
 
 const TestBed = () => (
     <RadioGroup
-        label="Example label"
-        name="Example name"
+        aria-label="Example label"
+        name="example-name"
         onChange={() => {}}
         options={[
             {
                 value: '1',
                 label: 'Option 1',
-                name: 'Option 1',
                 description: 'Description here',
             },
-            { value: '2', label: 'Option 2', name: 'Option 2' },
-            { value: '3', label: 'Option 3', name: 'Option 3' },
+            { value: '2', label: 'Option 2' },
+            { value: '3', label: 'Option 3' },
         ]}
         value="2"
     />

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,36 +67,46 @@ 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) => {
+                {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={disabledGroup || disabled}
+                            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}
                         />
                     );

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,36 @@
+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,
+    ...controlProps
+}: RadioGroupFieldProps) {
+    return (
+        <Field as="fieldset">
+            <FieldLabel as="legend" labelTrailing={labelTrailing}>
+                {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'> &
     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,
@@ -189,8 +177,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}

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();
     });
 });