@bspk/ui 1.3.3 → 1.3.4

package/src/components/{CalendarPicker/CalendarPicker.tsx → Calendar/Calendar.tsx}

@@ -1,4 +1,4 @@
-import './calendar-picker.scss';
+import './calendar.scss';
 import { SvgChevronLeft } from '@bspk/icons/ChevronLeft';
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
 import { SvgKeyboardDoubleArrowLeft } from '@bspk/icons/KeyboardDoubleArrowLeft';
@@ -202,7 +202,7 @@ const CONFIG: Record<Kind, ConfigKind> = {
     },
 };
 
-export type CalendarPickerProps = {
+export type CalendarProps = {
     /**
      * The currently selected date
      *
@@ -212,27 +212,28 @@ export type CalendarPickerProps = {
     /** Fires when the date changes with the new date */
     onChange: (newDate: Date) => void;
     /**
-     * Determines how the CalendarPicker will appear.
+     * Determines how the Calendar will appear.
      *
      * @default flat
      */
     variant?: 'elevated' | 'flat';
+    /**
+     * If focus trap should be enabled within the calendar component.
+     *
+     * Only applicable if the Calendar is used in a popover like in DatePicker.
+     *
+     * @default false
+     */
+    focusTrap?: boolean;
 };
 
 /**
- * A component or widget that allows customers to select the date, month, and year.
- *
- * @example
- *     import { CalendarPicker } from '@bspk/ui/CalendarPicker';
+ * Allows customers to select the date, month, and year.
  *
- *     function Example() {
- *         return <CalendarPicker>Example CalendarPicker</CalendarPicker>;
- *     }
- *
- * @name CalendarPicker
- * @phase Dev
+ * @name Calendar
+ * @phase UXReview
  */
-export function CalendarPicker({ value: valueProp, onChange, variant = 'flat' }: CalendarPickerProps) {
+export function Calendar({ value: valueProp, onChange, variant = 'flat', focusTrap = false }: CalendarProps) {
     const baseId = useId();
     const [kind, setKind] = useState<Kind>('day');
     const config = useMemo(() => CONFIG[kind], [kind]);
@@ -245,7 +246,74 @@ export function CalendarPicker({ value: valueProp, onChange, variant = 'flat' }:
 
     const { handleKeyDownCapture } = useKeyDownCaptures({ config, baseDate, setBaseDate });
 
-    return (
+    const calendar = (
+        <div data-bspk="calendar" data-kind={kind} data-variant={variant || 'flat'}>
+            <div data-header>
+                <HeaderButton
+                    baseDate={baseDate}
+                    config={config.header['<<']}
+                    direction="<<"
+                    setBaseDate={setBaseDate}
+                />
+                <HeaderButton baseDate={baseDate} config={config.header['<']} direction="<" setBaseDate={setBaseDate} />
+                <span data-title>{config.header.label(baseDate, setKind)}</span>
+                <HeaderButton baseDate={baseDate} config={config.header['>']} direction=">" setBaseDate={setBaseDate} />
+                <HeaderButton
+                    baseDate={baseDate}
+                    config={config.header['>>']}
+                    direction=">>"
+                    setBaseDate={setBaseDate}
+                />
+            </div>
+            {config.listBoxHeader}
+            <div
+                aria-label={config.listboxLabel}
+                data-body
+                onKeyDownCapture={handleKeyDownCapture}
+                ref={(node) => {
+                    if (!focusTrap) return;
+
+                    const idToFocus = items.find(({ value: date }) => config.compare(date, baseDate))?.id;
+                    node?.querySelector<HTMLElement>(`[id="${idToFocus}"]`)?.focus();
+                }}
+                role="listbox"
+            >
+                {items.map(({ value: date, label, id, 'aria-label': ariaLabel }) => {
+                    const isSelected = config.compare(date, value);
+                    const isActive = config.compare(date, baseDate);
+                    const isFocusable = isActive || (!baseDate && isSelected);
+                    return (
+                        <Button
+                            aria-label={ariaLabel}
+                            aria-selected={isSelected || undefined}
+                            data-active={isActive || undefined}
+                            id={id}
+                            innerRef={(node) => {
+                                if (isFocusable && focusTrap) node?.focus();
+                            }}
+                            key={date.toString()}
+                            label={label}
+                            role="option"
+                            size="large"
+                            tabIndex={isFocusable ? 0 : -1}
+                            width="hug"
+                            {...config.optionProps?.({
+                                date,
+                                baseDate,
+                                isSelected,
+                                isActive,
+                                setBaseDate,
+                                onChange,
+                                setKind,
+                            })}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+
+    return focusTrap ? (
         <FocusTrap
             focusTrapOptions={{
                 fallbackFocus: () => {
@@ -255,79 +323,10 @@ export function CalendarPicker({ value: valueProp, onChange, variant = 'flat' }:
                 clickOutsideDeactivates: true,
             }}
         >
-            <div data-bspk="calendar-picker" data-kind={kind} data-variant={variant || 'flat'}>
-                <div data-header>
-                    <HeaderButton
-                        baseDate={baseDate}
-                        config={config.header['<<']}
-                        direction="<<"
-                        setBaseDate={setBaseDate}
-                    />
-                    <HeaderButton
-                        baseDate={baseDate}
-                        config={config.header['<']}
-                        direction="<"
-                        setBaseDate={setBaseDate}
-                    />
-                    <span data-title>{config.header.label(baseDate, setKind)}</span>
-                    <HeaderButton
-                        baseDate={baseDate}
-                        config={config.header['>']}
-                        direction=">"
-                        setBaseDate={setBaseDate}
-                    />
-                    <HeaderButton
-                        baseDate={baseDate}
-                        config={config.header['>>']}
-                        direction=">>"
-                        setBaseDate={setBaseDate}
-                    />
-                </div>
-                {config.listBoxHeader}
-                <div
-                    aria-label={config.listboxLabel}
-                    data-body
-                    onKeyDownCapture={handleKeyDownCapture}
-                    ref={(node) => {
-                        const idToFocus = items.find(({ value: date }) => config.compare(date, baseDate))?.id;
-                        node?.querySelector<HTMLElement>(`[id="${idToFocus}"]`)?.focus();
-                    }}
-                    role="listbox"
-                >
-                    {items.map(({ value: date, label, id, 'aria-label': ariaLabel }) => {
-                        const isSelected = config.compare(date, value);
-                        const isActive = config.compare(date, baseDate);
-                        const isFocusable = isActive || (!baseDate && isSelected);
-                        return (
-                            <Button
-                                aria-label={ariaLabel}
-                                aria-selected={isSelected || undefined}
-                                data-active={isActive || undefined}
-                                id={id}
-                                innerRef={(node) => {
-                                    if (isFocusable) node?.focus();
-                                }}
-                                key={date.toString()}
-                                label={label}
-                                role="option"
-                                size="large"
-                                tabIndex={isFocusable ? 0 : -1}
-                                width="hug"
-                                {...config.optionProps?.({
-                                    date,
-                                    baseDate,
-                                    isSelected,
-                                    isActive,
-                                    setBaseDate,
-                                    onChange,
-                                    setKind,
-                                })}
-                            />
-                        );
-                    })}
-                </div>
-            </div>
+            {calendar}
         </FocusTrap>
+    ) : (
+        calendar
     );
 }
 

package/src/components/Calendar/CalendarExample.tsx

@@ -0,0 +1,31 @@
+import { CalendarProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+
+export const presets: Preset<CalendarProps>[] = [
+    {
+        label: 'With selected date',
+        propState: {
+            value: new Date(2024, 5, 10),
+        },
+    },
+    {
+        label: 'No selected date',
+        propState: {
+            value: undefined,
+        },
+    },
+];
+
+export const CalendarExample: ComponentExample<CalendarProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {
+        value: undefined,
+    },
+    disableProps: ['focusTrap'],
+    presets,
+    render: ({ props, Component }) => <Component {...props} />,
+    sections: [],
+    variants: {
+        focusTrap: false,
+    },
+};

package/src/components/{CalendarPicker/calendar-picker.scss → Calendar/calendar.scss}

@@ -1,4 +1,4 @@
-[data-bspk='calendar-picker'] {
+[data-bspk='calendar'] {
     display: flex;
     flex-direction: column;
     justify-content: center;

package/src/components/Calendar/index.tsx

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

package/src/components/Checkbox/Checkbox.tsx

@@ -1,32 +1,32 @@
 import './checkbox.scss';
 import { ChangeEvent, useEffect, useRef } from 'react';
-import { CommonProps, ElementProps, FormFieldControlProps, RequiredCommonProps } from '-/types/common';
+import { ElementProps, FieldControlProps } from '-/types/common';
 
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name' | 'readOnly'> &
-    FormFieldControlProps &
-    RequiredCommonProps<'value'> & {
-        /**
-         * If the checkbox is partially checked or
-         * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
-         *
-         * This will override the `checked` prop.
-         *
-         * @default false
-         */
-        indeterminate?: boolean;
-        /**
-         * Marks the checkbox as checked.
-         *
-         * @default false
-         */
-        checked?: boolean;
-        /**
-         * The function to call when the checkbox is checked or unchecked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    };
+export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'value'> & {
+    /**
+     * If the checkbox is partially checked or
+     * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
+     *
+     * This will override the `checked` prop.
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Marks the checkbox as checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * The function to call when the checkbox is checked or unchecked.
+     *
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+    /** The value of the checkbox. */
+    value: string;
+};
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off. This is the base
@@ -65,6 +65,7 @@ export function Checkbox({
     invalid,
     disabled,
     readOnly,
+    required,
     ...props
 }: ElementProps<CheckboxProps, 'input'>) {
     const indeterminate = !!indeterminateProp;
@@ -97,6 +98,7 @@ export function Checkbox({
                     inputRef.current = node;
                     node.indeterminate = indeterminate;
                 }}
+                required={required || undefined}
                 type="checkbox"
             />
             <span aria-hidden>

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -1,56 +1,38 @@
-import { Checkbox } from '-/components/Checkbox';
+import './checkbox-group.scss';
+import { Checkbox, CheckboxProps } from '-/components/Checkbox';
+import { useFieldInit } from '-/components/Field';
 import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
-import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
+import { ElementProps, FieldControlProps } from '-/types/common';
 
-export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'> &
-    Required<CommonProps<'value'>>;
+const ALL_LABEL = 'All';
 
-export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> &
-    FormFieldControlProps & {
-        /**
-         * The function to call when the checkboxes are changed.
-         *
-         * @example
-         *     (values) => setState({ values });
-         *
-         * @required
-         */
-        onChange: (values: string[]) => void;
-        /**
-         * The input control name of the checkboxes.
-         *
-         * @required
-         */
-        name: string;
-        /**
-         * The options for the checkboxes.
-         *
-         * @example
-         *     [
-         *         { label: 'Option 1', value: 'option1' },
-         *         { label: 'Option 2', value: 'option2' },
-         *         { label: 'Option 3', value: 'option3' },
-         *     ];
-         *
-         * @type Array<CheckboxGroupOption>
-         * @required
-         */
-        options: CheckboxGroupOption[];
-        /**
-         * The values of the checked checkboxes.
-         *
-         * @type Array<string>
-         */
-        values?: CheckboxGroupProps['options'][number]['value'][];
-        /**
-         * Whether to show a select all checkbox at the top of the list.
-         *
-         * @default false
-         */
-        selectAll?: boolean;
-        /** The props for the select all checkbox. */
-        selectAllProps?: CheckboxGroupOption;
-    };
+export type CheckboxGroupOption = Pick<CheckboxProps, 'value'> &
+    Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'>;
+
+export type CheckboxGroupProps = FieldControlProps<string[]> & {
+    /**
+     * The options for the checkboxes.
+     *
+     * @example
+     *     [
+     *         { label: 'Option 1', value: 'option1' },
+     *         { label: 'Option 2', value: 'option2' },
+     *         { label: 'Option 3', value: 'option3' },
+     *     ];
+     *
+     * @type Array<CheckboxGroupOption>
+     * @required
+     */
+    options: CheckboxGroupOption[];
+    /**
+     * Whether to show a select all checkbox at the top of the list.
+     *
+     * @default false
+     */
+    selectAll?: boolean;
+    /** The props for the select all checkbox. */
+    selectAllProps?: CheckboxGroupOption;
+};
 
 /**
  * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
@@ -85,57 +67,71 @@ export function CheckboxGroup({
     onChange,
     options = [],
     name,
-    values = [],
+    value = [],
     selectAll,
     selectAllProps,
-    disabled: disabledGroup = false,
+    disabled = false,
     readOnly,
-    'aria-describedby': ariaDescribedBy,
-    'aria-errormessage': ariaErrorMessage,
+    invalid: invalidProp,
+    required,
+    id: idProp,
+    'aria-describedby': ariaDescribedByProp,
+    'aria-errormessage': ariaErrorMessageProp,
     ...props
 }: ElementProps<CheckboxGroupProps, 'div'>) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+
     return (
         <div
             {...props}
-            aria-describedby={ariaErrorMessage || ariaDescribedBy || undefined}
+            aria-describedby={ariaDescribedByProp || ariaDescribedBy || undefined}
             data-bspk="checkbox-group"
+            id={id}
             role="group"
         >
             {selectAll && (
-                <>
-                    <ToggleOption label={selectAllProps?.label || 'All'} readOnly={readOnly}>
-                        <Checkbox
-                            aria-label={selectAllProps?.label || 'All'}
-                            checked={!!values.length && values.length === options.length}
-                            data-testid="selectAll-Checkbox"
-                            disabled={disabledGroup}
-                            indeterminate={!!values.length && values.length < options.length}
-                            name={name}
-                            onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
-                            readOnly={readOnly}
-                            value="all"
-                        />
-                    </ToggleOption>
-                </>
+                <ToggleOption label={selectAllProps?.label || ALL_LABEL} readOnly={readOnly}>
+                    <Checkbox
+                        aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
+                        aria-label={selectAllProps?.label || ALL_LABEL}
+                        checked={!!value.length && value.length === options.length}
+                        data-testid="selectAll-Checkbox"
+                        disabled={disabled}
+                        indeterminate={!!value.length && value.length < options.length}
+                        invalid={invalid || undefined}
+                        name={name}
+                        onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
+                        readOnly={readOnly}
+                        value="all"
+                    />
+                </ToggleOption>
             )}
-            {options.map(({ label, description, value, disabled }) => (
+            {options.map(({ label, description, value: optionValue, disabled: optionDisabled }) => (
                 <ToggleOption
                     description={description}
-                    disabled={disabled || disabledGroup}
-                    key={value}
+                    disabled={disabled || optionDisabled}
+                    key={optionValue}
                     label={label}
                     readOnly={readOnly}
                 >
                     <Checkbox
+                        aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
                         aria-label={label}
-                        checked={values.includes(value)}
-                        disabled={disabled || disabledGroup}
+                        checked={value.includes(optionValue)}
+                        disabled={disabled || optionDisabled}
+                        invalid={invalid || undefined}
                         name={name}
                         onChange={(checked) => {
-                            onChange(checked ? [...values, value] : values.filter((v) => v !== value));
+                            onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
                         }}
                         readOnly={readOnly}
-                        value={value}
+                        value={optionValue}
                     />
                 </ToggleOption>
             ))}

package/src/components/CheckboxGroup/CheckboxGroupExample.tsx

@@ -5,6 +5,7 @@ export const presets: Preset<CheckboxGroupProps>[] = [
     {
         label: 'With Descriptions',
         propState: {
+            value: ['option2'],
             disabled: false,
             options: [
                 { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
@@ -23,6 +24,7 @@ export const presets: Preset<CheckboxGroupProps>[] = [
     {
         label: 'Group disabled',
         propState: {
+            value: ['option2'],
             disabled: true,
             options: [
                 { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
@@ -40,6 +42,7 @@ export const presets: Preset<CheckboxGroupProps>[] = [
     {
         label: 'Long labels',
         propState: {
+            value: ['option2'],
             disabled: false,
             options: [
                 { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },

package/src/components/CheckboxGroup/checkbox-group.scss

@@ -0,0 +1,8 @@
+[data-bspk='checkbox-group'] {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    max-width: 100%;
+
+    --list-item-height: 'auto';
+}

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

@@ -0,0 +1,27 @@
+import { CheckboxGroupField } from '.';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <CheckboxGroupField
+        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('CheckboxGroupField (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/CheckboxGroupField/CheckboxGroupField.tsx

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

package/src/components/CheckboxGroupField/index.tsx

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

package/src/components/{ChipUtility/ChipUtility.rtl.test.tsx → Chip/Chip.rtl.test.tsx}

@@ -1,15 +1,15 @@
-import { ChipUtility } from './ChipUtility';
-import { presets } from './ChipUtilityExample';
+import { Chip } from './Chip';
+import { presets } from './ChipExample';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-describe('ChipUtility (RTL)', () => {
+describe('Chip (RTL)', () => {
     presets.forEach((preset) => {
-        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<ChipUtility {...preset.propState} />));
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<Chip {...preset.propState} />));
     });
 
     it('renders', () => {
-        const { getByText } = render(<ChipUtility {...presets[0].propState} />);
+        const { getByText } = render(<Chip {...presets[0].propState} />);
 
         expect(getByText('chip')).toBeInTheDocument();
     });