@bspk/ui 1.3.21 → 1.3.23

package/src/components/Modal/Modal.tsx

@@ -3,40 +3,30 @@ import { SvgClose } from '@bspk/icons/Close';
 import { ReactNode, useMemo, useRef } from 'react';
 import { Button, ButtonProps } from '-/components/Button';
 import { DialogProps, Dialog } from '-/components/Dialog';
-import { useDebounceCallback } from '-/hooks/useDebounceCallback';
 import { useEventListener } from '-/hooks/useEventListener';
 import { useUIContext } from '-/hooks/useUIContext';
 import { CallToActionButton } from '-/types/common';
 
-// This hook is used to set the height of the modal based on the dialog box height.
-// It listens to the resize event and updates the modal height accordingly.
-function useDialogHeight() {
-    const onResize = () => {
-        const { dialogBox, modal } = modalRefs.current || {};
-        if (!dialogBox || !modal) return;
-        modal.style.height = `${dialogBox.offsetHeight}px`;
-        modal.style.visibility = '';
+function useMatchParentHeight() {
+    const elementRef = useRef<HTMLDivElement | null>(null);
+    const updateHeight = () => {
+        const element = elementRef.current;
+        const parentElement = element?.parentElement;
+        if (!element || !parentElement) return;
+        // Reset height to allow shrinking or growing
+        element.style.height = '';
+        // Apply new height on next frame
+        requestAnimationFrame(() => {
+            element.style.height = `${parentElement.clientHeight}px`;
+        });
     };
-
-    useEventListener('resize', useDebounceCallback(onResize, 100));
-
-    const modalRefs = useRef<{
-        dialogBox: HTMLDivElement | null;
-        modal: HTMLDivElement | null;
-    } | null>(null);
+    useEventListener('resize', updateHeight);
+    useEventListener('orientationchange', updateHeight);
 
     return {
-        setModalRefs: (node: HTMLElement | null) => {
-            if (!node) return;
-            const dialogBox = node.querySelector<HTMLDivElement>('[data-dialog-box]');
-            const modal = node.querySelector<HTMLDivElement>('[data-bspk="modal"]');
-            modalRefs.current = {
-                dialogBox,
-                modal,
-            };
-            if (!dialogBox || !modal) return;
-            modal.style.height = `${dialogBox.offsetHeight}px`;
-            modal.style.visibility = '';
+        setElement: (el: HTMLDivElement | null) => {
+            elementRef.current = el;
+            updateHeight();
         },
     };
 }
@@ -168,7 +158,7 @@ export function Modal({
         return nextButtons;
     }, [callToAction, cancelButton, dialogProps.onClose, isMobile]);
 
-    const { setModalRefs } = useDialogHeight();
+    const { setElement } = useMatchParentHeight();
 
     return (
         <Dialog
@@ -176,11 +166,16 @@ export function Modal({
             aria-description={description}
             aria-label={header}
             disableFocusTrap={disableFocusTrap}
-            innerRef={setModalRefs}
             placement="center"
             showScrim
         >
-            <div data-bspk="modal" ref={(node) => innerRef?.(node)} style={{ visibility: 'hidden' }}>
+            <div
+                data-bspk="modal"
+                ref={(node) => {
+                    innerRef?.(node);
+                    setElement(node);
+                }}
+            >
                 <div data-modal-header>
                     <div data-modal-title>{header}</div>
                     <Button
@@ -188,6 +183,7 @@ export function Modal({
                         iconOnly
                         label="close"
                         onClick={dialogProps.onClose}
+                        size={isMobile ? 'medium' : 'small'}
                         variant="tertiary"
                     />
                 </div>

package/src/components/Modal/ModalExample.tsx

@@ -47,7 +47,12 @@ export const ModalExample: ComponentExampleFn<ModalProps> = ({ action }) => ({
                 header: 'Header Only',
                 description: 'This modal has no buttons.',
                 children: (
-                    <>
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }}
+                    >
                         <p>
                             This is a demo of a scrolling modal. Most modals won&apos;t scroll but mobile uses modals as
                             dropdowns which may have more items than can fit in the screen.
@@ -63,7 +68,7 @@ export const ModalExample: ComponentExampleFn<ModalProps> = ({ action }) => ({
                                     trailing={<Checkbox aria-label="" name="" onChange={() => {}} value="" />}
                                 />
                             ))}
-                    </>
+                    </div>
                 ),
             },
         },

package/src/components/Modal/modal.scss

@@ -5,7 +5,7 @@
     gap: var(--spacing-sizing-02);
     padding: var(--spacing-sizing-05);
 
-    [data-screen-size='small'] & {
+    @media (width < 640px) {
         padding: var(--spacing-sizing-04);
     }
 

package/src/components/OTPInput/otp-input.scss

@@ -40,6 +40,7 @@
         [data-digit] {
             &[data-active] {
                 outline: solid 2px var(--stroke-neutral-focus);
+                isolation: isolate;
 
                 &:empty::before {
                     // caret

package/src/components/Pagination/Pagination.tsx

@@ -3,7 +3,7 @@ import { SvgIcon } from '@bspk/icons/SvgIcon';
 import { AriaAttributes, useEffect, useState } from 'react';
 import { PageList } from './PageList';
 import { Button } from '-/components/Button';
-import { InputElement } from '-/components/Input';
+import { Input } from '-/components/Input';
 import { sendAriaLiveMessage } from '-/utils/sendAriaLiveMessage';
 
 // After this point the manual input renders. With equal or fewer pages the individual page buttons render instead.
@@ -104,7 +104,7 @@ export function Pagination({
                         submitInputChange();
                     }}
                 >
-                    <InputElement
+                    <Input
                         name="page-number"
                         onBlur={() => submitInputChange()}
                         onChange={setInputValue}

package/src/components/Password/Password.tsx

@@ -1,8 +1,8 @@
 import './password.scss';
 import { useState } from 'react';
 import { Button } from '-/components/Button';
-import { useFieldInit } from '-/components/Field';
-import { InputElement, InputProps } from '-/components/Input';
+import { Input, InputProps } from '-/components/Input';
+import { useId } from '-/hooks/useId';
 import { FieldControlProps } from '-/types/common';
 
 export type PasswordProps = FieldControlProps & Pick<InputProps, 'containerRef' | 'inputProps' | 'inputRef' | 'size'>;
@@ -13,23 +13,25 @@ export type PasswordProps = FieldControlProps & Pick<InputProps, 'containerRef'
  * For a more complete example with field usage, see the PasswordField component.
  *
  * @example
- *     import { Password } from '@bspk/ui/Password';
- *     import { Field, FieldLabel, FieldDescription } from '-/components/Field';
+ *     import { Password } from '-/components/Password';
  *
  *     () => {
  *         const [value, setValue] = useState<string | undefined>('');
  *
  *         return (
- *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Password</FieldLabel>
+ *             <div>
+ *                 <Field
+ *                     controlId="example-password"
+ *                     helperText="The password field allows you to enter a secure password."
+ *                     label="Password"
+ *                 >
  *                     <Password
  *                         aria-label="password"
+ *                         id="example-password"
  *                         name="password"
  *                         onChange={(next) => setValue(next)}
  *                         value={value}
  *                     />
- *                     <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -45,20 +47,16 @@ export function Password({
     onChange,
     required = false,
     containerRef,
-    invalid: invalidProp,
+    invalid = false,
     readOnly,
     disabled,
     id: idProp,
     'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...props
 }: PasswordProps) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+    const id = useId(idProp);
 
     const [isShowingPassword, setIsShowingPassword] = useState(false);
 
@@ -68,7 +66,7 @@ export function Password({
     };
 
     return (
-        <InputElement
+        <Input
             {...props}
             aria-describedby={ariaDescribedBy}
             aria-errormessage={ariaErrorMessage}

package/src/components/Password/PasswordExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Password, PasswordProps } from '.';
-import { Field, FieldLabel, FieldDescription } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const PasswordExample: ComponentExample<PasswordProps> = {
@@ -15,10 +15,18 @@ export const Usage = () => {
 
     return (
         <div>
-            <Field>
-                <FieldLabel>Password</FieldLabel>
-                <Password aria-label="password" name="password" onChange={(next) => setValue(next)} value={value} />
-                <FieldDescription>The password field allows you to enter a secure password.</FieldDescription>
+            <Field
+                controlId="example-password"
+                helperText="The password field allows you to enter a secure password."
+                label="Password"
+            >
+                <Password
+                    aria-label="password"
+                    id="example-password"
+                    name="password"
+                    onChange={(next) => setValue(next)}
+                    value={value}
+                />
             </Field>
         </div>
     );

package/src/components/PasswordField/PasswordField.tsx

@@ -1,7 +1,8 @@
-import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { Password, PasswordProps } from '-/components/Password';
+import { useId } from '-/hooks/useId';
 
-export type PasswordFieldProps = FormFieldControlProps<PasswordProps>;
+export type PasswordFieldProps = ComposedFieldProps<PasswordProps>;
 
 /**
  * A field wrapper for the Password component.
@@ -9,7 +10,7 @@ export type PasswordFieldProps = FormFieldControlProps<PasswordProps>;
  * This component takes properties from the FormField and Password components.
  *
  * @name PasswordField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
@@ -19,18 +20,22 @@ export function PasswordField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: PasswordFieldProps) {
+    const id = useId(idProp);
     return (
-        <FormField
+        <Field
+            controlId={id}
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
-            <Password {...controlProps} />
-        </FormField>
+            <Password {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }
 

package/src/components/Popover/Popover.tsx

@@ -56,7 +56,6 @@ export type PopoverProps = CommonProps<'disabled'> &
  * Brief message that provide additional guidance and helps users perform an action if needed.
  *
  * @example
- *     import { useState } from 'react';
  *     import { Popover } from '@bspk/ui/Popover';
  *     import { Button } from '@bspk/ui/Button';
  *

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,7 +1,7 @@
 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, FieldControlProps } from '-/types/common';
 
 export type RadioGroupOption = Pick<RadioOptionProps, 'checked' | 'description' | 'disabled' | 'label'> &
@@ -37,7 +37,6 @@ export type RadioGroupProps = Omit<FieldControlProps, 'readOnly'> & {
  * For a more complete example with field usage, see the RadioGroupField component.
  *
  * @example
- *     import { useState } from 'react';
  *     import { RadioGroup } from '@bspk/ui/RadioGroup';
  *
  *     () => {
@@ -68,45 +67,40 @@ export function RadioGroup({
     onChange,
     options = [],
     name,
-    value: groupValue,
+    value,
     disabled = false,
-    invalid: invalidProp,
     required,
+    invalid = false,
     id: idProp,
-    'aria-describedby': ariaDescribedByProp,
-    'aria-errormessage': ariaErrorMessageProp,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...props
 }: ElementProps<RadioGroupProps, 'div'>) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        invalidProp,
-    });
+    const id = useId(idProp);
 
     return (
         <div
             {...props}
-            aria-describedby={ariaDescribedByProp || ariaDescribedBy || undefined}
+            aria-describedby={ariaDescribedBy || undefined}
             data-bspk="radio-group"
             id={id}
             role="radiogroup"
         >
-            {options.map(({ label, description, value, ...option }, index) => {
+            {options.map(({ label, description, value: optionValue, ...option }) => {
                 return (
                     <RadioOption
-                        aria-describedby={ariaDescribedByProp || ariaDescribedBy || undefined}
-                        aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
-                        checked={groupValue === value}
+                        aria-describedby={ariaDescribedBy || undefined}
+                        aria-errormessage={ariaErrorMessage || undefined}
+                        checked={value === optionValue}
                         description={description}
                         disabled={disabled || option.disabled}
                         invalid={invalid || undefined}
-                        key={`radio-option-${value || index}`}
+                        key={optionValue}
                         label={label}
                         name={name}
-                        onChange={(checked) => checked && onChange(value)}
+                        onChange={(checked) => checked && onChange(optionValue)}
                         required={required}
-                        value={value}
+                        value={optionValue}
                     />
                 );
             })}

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

@@ -5,4 +5,8 @@
     max-width: 100%;
 
     --list-item-height: 'auto';
+
+    [data-bspk='list-item'] {
+        background: transparent;
+    }
 }

package/src/components/RadioGroupField/RadioGroupField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldDescription, FieldError, FieldLabel } from '-/components/Field';
-import { FormFieldControlProps } from '-/components/FormField';
+import { ComposedFieldProps, Fieldset, propsWithAria } from '-/components/Field';
 import { RadioGroup, RadioGroupProps } from '-/components/RadioGroup';
+import { useId } from '-/hooks/useId';
 
-export type RadioGroupFieldProps = FormFieldControlProps<RadioGroupProps>;
+export type RadioGroupFieldProps = ComposedFieldProps<RadioGroupProps>;
 
 /**
  * A field wrapper for the RadioGroup component.
@@ -20,17 +20,22 @@ export function RadioGroupField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: RadioGroupFieldProps) {
+    const id = useId(idProp);
     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>
+        <Fieldset
+            controlId={id}
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            required={controlProps.required}
+            style={style}
+        >
+            <RadioGroup {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Fieldset>
     );
 }
 

package/src/components/SearchBar/SearchBar.tsx

@@ -69,7 +69,6 @@ export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = Omit<
  * An input field that allows customers to input search queries and retrieve results.
  *
  * @example
- *     import { useState } from 'react';
  *     import { SearchBar } from '@bspk/ui/SearchBar';
  *
  *     () => {

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -9,7 +9,6 @@ export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
  * Navigation tool that organizes content across different screens and views.
  *
  * @example
- *     import { useState } from 'react';
  *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
  *
  *     () => {

package/src/components/Select/Select.tsx

@@ -1,11 +1,11 @@
 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, 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, FieldControlProps } from '-/types/common';
 import { getElementById } from '-/utils/dom';
@@ -82,9 +82,13 @@ export type SelectProps = CommonProps<'size'> &
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Select an option</FieldLabel>
+ *                 <Field
+ *                     controlId="example-select"
+ *                     helperText="The select allows you to choose one option from a list of options."
+ *                     label="Select an option"
+ *                 >
  *                     <Select
+ *                         id="example-select"
  *                         name="example-select"
  *                         onChange={setSelected}
  *                         options={OPTIONS}
@@ -93,9 +97,6 @@ export type SelectProps = CommonProps<'size'> &
  *                         size="medium"
  *                         value={selected}
  *                     />
- *                     <FieldDescription>
- *                         The select allows you to choose one option from a list of options.
- *                     </FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -112,22 +113,19 @@ export function Select({
     size = 'medium',
     disabled,
     id: idProp,
-    invalid: invalidProp,
+    invalid = false,
     readOnly,
     name,
     scrollLimit,
     required = false,
     'aria-label': ariaLabel,
     menuWidth,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...elementProps
 }: ElementProps<SelectProps, 'button'>) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+    const id = useId(idProp);
+
     const menuId = useMemo(() => `${id}-menu`, [id]);
 
     const { items, availableItems } = useMemo(() => {
@@ -188,6 +186,7 @@ export function Select({
                 aria-expanded={open}
                 aria-haspopup="listbox"
                 aria-readonly={readOnly || undefined}
+                aria-required={required || undefined}
                 data-bspk="select"
                 data-invalid={invalid || undefined}
                 data-open={open || undefined}

package/src/components/Select/SelectExample.tsx

@@ -2,7 +2,7 @@
 import { useState } from 'react';
 import { Select, SelectProps } from '.';
 import { Avatar } from '-/components/Avatar';
-import { Field, FieldDescription, FieldLabel } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { Tag } from '-/components/Tag';
 import { Txt } from '-/components/Txt';
 import { ComponentExample, Preset } from '-/utils/demo';
@@ -180,9 +180,13 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Select an option</FieldLabel>
+            <Field
+                controlId="example-select"
+                helperText="The select allows you to choose one option from a list of options."
+                label="Select an option"
+            >
                 <Select
+                    id="example-select"
                     name="example-select"
                     onChange={setSelected}
                     options={OPTIONS}
@@ -191,7 +195,6 @@ export const Usage = () => {
                     size="medium"
                     value={selected}
                 />
-                <FieldDescription>The select allows you to choose one option from a list of options.</FieldDescription>
             </Field>
         </div>
     );

package/src/components/Select/select.scss

@@ -46,18 +46,6 @@
         color: var(--select-text-color);
     }
 
-    [data-icon] {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        pointer-events: none;
-
-        svg {
-            transform: rotate(90deg);
-            width: var(--select-icon-width);
-        }
-    }
-
     &[data-size='small'] {
         --select-height: var(--spacing-sizing-08);
         --select-font: var(--body-small);

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

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