@bspk/ui 1.3.20 → 1.3.22

package/src/components/InputPhone/InputPhone.tsx

@@ -3,12 +3,12 @@ import { SvgIcon } from '@bspk/icons/SvgIcon';
 import { AsYouType, getCountryCallingCode } from 'libphonenumber-js';
 import { useMemo, useRef, 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 { ListItem } from '-/components/ListItem';
 import { Menu } from '-/components/Menu';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useFloating } from '-/hooks/useFloating';
+import { useId } from '-/hooks/useId';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { FieldControlProps } from '-/types/common';
 import { countryCodeData, countryCodes, SupportedCountryCode } from '-/utils/countryCodes';
@@ -57,26 +57,26 @@ export type InputPhoneProps = FieldControlProps<string, SupportedCountryCode> &
  * For a more complete example with field usage, see the InputPhoneField component.
  *
  * @example
- *     import { InputPhone } from '@bspk/ui/InputPhone';
- *     import { Field, FieldDescription, FieldLabel } from '@bspk/ui/Field';
+ *     import { InputPhone } from '-/components/InputPhone';
  *
  *     () => {
  *         const [value, onChange] = useState<string | undefined>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Input Phone</FieldLabel>
+ *                 <Field
+ *                     controlId="example-input-phone"
+ *                     helperText="The phone input allows you to enter a phone number with country code."
+ *                     label="Example Input Phone"
+ *                 >
  *                     <InputPhone
  *                         aria-label="Phone Number"
+ *                         id="example-input-phone"
  *                         initialCountryCode="US"
  *                         name="example-name"
  *                         onChange={onChange}
  *                         value={value}
  *                     />
- *                     <FieldDescription>
- *                         The phone input allows you to enter a phone number with country code.
- *                     </FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -94,20 +94,16 @@ export function InputPhone({
     readOnly,
     name,
     id: idProp,
-    invalid: invalidProp,
+    invalid = false,
     required = false,
     size = 'medium',
     inputRef,
     scrollLimit = 5,
     'aria-label': ariaLabel = 'Phone number input',
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
 }: InputPhoneProps) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+    const id = useId(idProp);
     const menuId = useMemo(() => `${id}-menu`, [id]);
 
     const items = useIds(`input-phone-${id}`, SELECT_OPTIONS);
@@ -174,7 +170,7 @@ export function InputPhone({
                     },
                 })}
             >
-                <InputElement
+                <Input
                     aria-describedby={ariaDescribedBy}
                     aria-errormessage={ariaErrorMessage}
                     aria-label={ariaLabel || undefined}

package/src/components/InputPhone/InputPhoneExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { InputPhone, InputPhoneProps } from '.';
-import { Field, FieldDescription, FieldLabel } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { Preset, ComponentExample } from '-/utils/demo';
 
 export const presets: Preset<InputPhoneProps>[] = [];
@@ -19,18 +19,19 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Example Input Phone</FieldLabel>
+            <Field
+                controlId="example-input-phone"
+                helperText="The phone input allows you to enter a phone number with country code."
+                label="Example Input Phone"
+            >
                 <InputPhone
                     aria-label="Phone Number"
+                    id="example-input-phone"
                     initialCountryCode="US"
                     name="example-name"
                     onChange={onChange}
                     value={value}
                 />
-                <FieldDescription>
-                    The phone input allows you to enter a phone number with country code.
-                </FieldDescription>
             </Field>
         </div>
     );

package/src/components/InputPhone/input-phone.scss

@@ -12,6 +12,7 @@
 
     input:focus-visible {
         outline: solid 2px var(--stroke-neutral-focus);
+        isolation: isolate;
         border-radius: var(--radius-sm);
     }
 

package/src/components/InputPhoneField/InputPhoneField.tsx

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

package/src/components/ListItem/list-item.scss

@@ -24,6 +24,7 @@
     &:focus-visible,
     &:has(*:focus-visible) {
         outline: solid 2px var(--stroke-neutral-focus);
+        isolation: isolate;
 
         [data-inner] {
             border-color: transparent;

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, FieldControlProps, propsWithAria } from '-/components/Field';
 import { Password, PasswordProps } from '-/components/Password';
+import { useId } from '-/hooks/useId';
 
-export type PasswordFieldProps = FormFieldControlProps<PasswordProps>;
+export type PasswordFieldProps = FieldControlProps<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,21 @@ 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}
             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/RadioGroupField/RadioGroupField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldDescription, FieldError, FieldLabel } from '-/components/Field';
-import { FormFieldControlProps } from '-/components/FormField';
+import { FieldControlProps, Fieldset, propsWithAria } from '-/components/Field';
 import { RadioGroup, RadioGroupProps } from '-/components/RadioGroup';
+import { useId } from '-/hooks/useId';
 
-export type RadioGroupFieldProps = FormFieldControlProps<RadioGroupProps>;
+export type RadioGroupFieldProps = FieldControlProps<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';
  *
  *     () => {