@bspk/ui 1.3.3 → 1.3.4

package/src/components/Input/InputExample.tsx

@@ -0,0 +1,57 @@
+import { InputProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+type InputExampleProps = InputProps & { label: string; description?: string };
+
+export const InputExample: ComponentExample<InputExampleProps> = {
+    defaultState: {
+        label: 'Property Description',
+        description: 'This is a description of the property.',
+        placeholder: 'Waterfront condo with great views',
+    },
+    render: ({ props, Component }) => <Component {...props} />,
+    presets: [
+        {
+            label: 'Currency',
+            propState: {
+                value: '',
+                type: 'number',
+                leading: '$',
+                trailing: undefined,
+                placeholder: '0.00',
+                name: 'currency',
+                label: 'Balance',
+                description: 'Enter the current balance',
+            },
+        },
+        {
+            label: 'Percent',
+            propState: {
+                value: '',
+                type: 'number',
+                leading: undefined,
+                trailing: '%',
+                placeholder: '0',
+                name: 'percent',
+                label: 'Growth Rate',
+                description: 'Enter the expected growth rate',
+            },
+        },
+        {
+            label: 'Dimension',
+            propState: {
+                value: '',
+                type: 'number',
+                leading: undefined,
+                placeholder: '0',
+                trailing: 'Acre(s)',
+                name: 'dimension',
+                label: 'Land Size',
+                description: 'Enter the size of the land',
+            },
+        },
+    ],
+    variants: {
+        type: false,
+    },
+};

package/src/components/Input/index.tsx

@@ -0,0 +1,2 @@
+export * from './Input';
+export * from './InputElement';

package/src/components/{TextInput/text-input.scss → Input/input.scss}

@@ -1,4 +1,4 @@
-[data-bspk='text-input'] {
+[data-bspk='input'] {
     --border-color: var(--stroke-neutral-base);
 
     display: flex;
@@ -62,6 +62,12 @@
         --border-color: var(--status-error);
     }
 
+    &:focus-within {
+        --border-color: var(--stroke-neutral-focus);
+
+        outline: 1px solid var(--stroke-neutral-focus);
+    }
+
     &[data-size='small'] {
         --field-padding: var(--spacing-sizing-02);
         --field-height: var(--spacing-sizing-08);
@@ -114,12 +120,6 @@
             display: none;
         }
     }
-
-    &:focus-within {
-        --border-color: var(--stroke-neutral-focus);
-
-        outline: 1px solid var(--stroke-neutral-focus);
-    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

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

package/src/components/InputField/InputField.tsx

@@ -0,0 +1,24 @@
+import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Input, InputProps } from '-/components/Input';
+
+export type InputFieldProps = FormFieldControlProps<InputProps>;
+
+/**
+ * A field wrapper for the Input component.
+ *
+ * This component takes properties from the FormField and Input components.
+ *
+ * @name InputField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function InputField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: InputFieldProps) {
+    return (
+        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+            <Input {...controlProps} />
+        </FormField>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/InputField/index.tsx

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

package/src/components/{TextField/TextField.rtl.test.tsx → InputNumber/InputNumber.rtl.test.tsx}

@@ -1,19 +1,10 @@
-import { TextField } from './TextField';
+import { InputNumber } from './';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-const TestBed = () => (
-    <TextField
-        aria-label="Example label"
-        controlId="1"
-        label="Example label"
-        name="Example name"
-        onChange={() => {}}
-        value="text value"
-    />
-);
+const TestBed = () => <InputNumber aria-label="Example label" name="example-name" onChange={() => {}} value={24} />;
 
-describe('TextField (RTL)', () => {
+describe('InputNumber (RTL)', () => {
     it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
 
     it('renders', () => {

package/src/components/{NumberInput/NumberInput.tsx → InputNumber/InputNumber.tsx}

@@ -1,8 +1,9 @@
-import './number-input.scss';
+import './input-number.scss';
 import { useMemo } from 'react';
 import { IncrementButton } from './IncrementButton';
+import { useFieldInit } from '-/components/Field';
 import { useId } from '-/hooks/useId';
-import { CommonProps, FormFieldControlProps } from '-/types/common';
+import { CommonProps, FieldControlProps } from '-/types/common';
 
 function isNumber(value: unknown, fallbackValue: number | undefined = undefined): number | undefined {
     if (typeof value === 'number') return value;
@@ -11,18 +12,8 @@ function isNumber(value: unknown, fallbackValue: number | undefined = undefined)
     return isNaN(num) ? fallbackValue : num;
 }
 
-export type NumberInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'
-> &
-    FormFieldControlProps & {
-        /** The value of the control. */
-        value?: number;
-        /**
-         * Callback when the value changes.
-         *
-         * @required
-         */
-        onChange: (value: number | string | undefined) => void;
+export type InputNumberProps = CommonProps<'size'> &
+    FieldControlProps<number> & {
         /**
          * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.
          *
@@ -55,26 +46,45 @@ export type NumberInputProps = CommonProps<
  *
  * The value of the input is a number. The value is clamped to the min and max values if they are provided.
  *
+ * For a more complete example with field usage, see the InputNumberField component.
+ *
  * @example
- *     import { NumberInput } from '@bspk/ui/NumberInput';
+ *     import { InputNumber } from '@bspk/ui/InputNumber';
  *
- *     export function Example() {
- *         const [state, setState] = React.useState<number>();
+ *     function ExampleStandalone() {
+ *         const [state, setState] = React.useState<number | undefined>();
  *
  *         return (
- *             <NumberInput
+ *             <InputNumber
  *                 aria-label="Example aria-label"
- *                 name="Example name"
+ *                 name="example-name"
  *                 onChange={(nextValue) => setState(nextValue)}
  *                 value={state}
  *             />
  *         );
  *     }
  *
- * @name NumberInput
- * @phase Utility
+ *     function ExampleWithField() {
+ *         const [state, setState] = React.useState<number | undefined>();
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Input Number</FieldLabel>
+ *                 <InputNumber
+ *                     aria-label="Example aria-label"
+ *                     name="example-name"
+ *                     onChange={(nextValue) => setState(nextValue)}
+ *                     value={state}
+ *                 />
+ *                 <FieldDescription>The input number allows you to increment or decrement a value.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name InputNumber
+ * @phase UXReview
  */
-export function NumberInput({
+export function InputNumber({
     value: valueProp,
     onChange,
     align = 'center',
@@ -82,19 +92,26 @@ export function NumberInput({
     disabled = false,
     readOnly = false,
     name,
-    id: inputIdProp,
-    'aria-label': ariaLabel,
+    id: idProp,
+    'aria-label': ariaLabel = 'Input number',
     max: maxProp,
     min = 0,
-    invalid,
-    'aria-describedby': ariaDescribedBy,
-    'aria-errormessage': ariaErrorMessage,
+    invalid: invalidProp = false,
     step = 1,
+    required = false,
     ...inputElementProps
-}: NumberInputProps) {
+}: InputNumberProps) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+
     const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
-    const inputId = useId(inputIdProp);
+    const inputId = useId(id);
     const value = useMemo(() => isNumber(valueProp) || 0, [valueProp]);
 
     const handleIncrement = (increment: -1 | 1) => {
@@ -103,7 +120,7 @@ export function NumberInput({
 
     return (
         <div
-            data-bspk="number-input"
+            data-bspk="input-number"
             data-centered={centered || undefined}
             data-disabled={disabled || undefined}
             data-invalid={invalid || undefined}
@@ -138,6 +155,7 @@ export function NumberInput({
                     onChange(isNumber(e.target.value));
                 }}
                 readOnly={readOnly}
+                required={required}
                 step={step}
                 type="number"
                 value={value}

package/src/components/{NumberInput/NumberInputExample.tsx → InputNumber/InputNumberExample.tsx}

@@ -1,6 +1,6 @@
-import { NumberInputProps } from './NumberInput';
+import { InputNumberProps } from './InputNumber';
 import { ComponentExample } from '-/utils/demo';
 
-export const NumberInputExample: ComponentExample<NumberInputProps> = {
+export const InputNumberExample: ComponentExample<InputNumberProps> = {
     render: ({ props, Component }) => <Component {...props} />,
 };

package/src/components/InputNumber/index.tsx

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

package/src/components/{NumberInput/number-input.scss → InputNumber/input-number.scss}

@@ -1,4 +1,4 @@
-[data-bspk='number-input'] {
+[data-bspk='input-number'] {
     // medium is the default size
     --font: var(--body-base);
     --height: var(--spacing-sizing-10);

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

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

package/src/components/InputNumberField/InputNumberField.tsx

@@ -0,0 +1,30 @@
+import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { InputNumber, InputNumberProps } from '-/components/InputNumber';
+
+export type InputNumberFieldProps = FormFieldControlProps<InputNumberProps>;
+
+/**
+ * A field wrapper for the InputNumber component.
+ *
+ * This component takes properties from the FormField and InputNumber components.
+ *
+ * @name InputNumberField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function InputNumberField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    ...controlProps
+}: InputNumberFieldProps) {
+    return (
+        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+            <InputNumber {...controlProps} />
+        </FormField>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/InputNumberField/index.tsx

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

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

@@ -0,0 +1,17 @@
+import { InputPhone } from './';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <InputPhone aria-label="Phone number input" name="example-name" onChange={() => {}} value="9375551060" />
+);
+
+describe('InputPhone (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getAllByLabelText } = render(<TestBed />);
+
+        expect(getAllByLabelText('Phone number input')[0]).toBeInTheDocument();
+    });
+});

package/src/components/InputPhone/InputPhone.tsx

@@ -0,0 +1,290 @@
+import './input-phone.scss';
+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 { ListItem } from '-/components/ListItem';
+import { Menu } from '-/components/Menu';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { useFloating } from '-/hooks/useFloating';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
+import { useUIContext } from '-/hooks/useUIContext';
+import { FieldControlProps } from '-/types/common';
+import { countryCodeData, countryCodes, SupportedCountryCode } from '-/utils/countryCodes';
+import { getElementById } from '-/utils/dom';
+import { guessUserCountryCode } from '-/utils/guessUserCountryCode';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
+import { useIds } from '-/utils/useIds';
+
+const SELECT_OPTIONS = countryCodes.map((code) => {
+    const countryCodeDetails = countryCodeData[code];
+    return {
+        value: code,
+        label: `${countryCodeDetails?.name}`,
+        countryCallingCode: getCountryCallingCode(code),
+        flagIconName: countryCodeDetails?.flagIconName,
+    };
+});
+
+export type InputPhoneProps = FieldControlProps<string, SupportedCountryCode> &
+    Pick<InputProps, 'inputRef' | 'size'> &
+    ScrollListItemsStyleProps & {
+        /**
+         * The default country code to select when the component is rendered. If not provided, it will attempt to guess
+         * based on the user's locale. If the guessed country code is not supported, it will default to 'US'. Based on
+         * [ISO](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes) 2-digit country codes.
+         *
+         * @type string
+         */
+        initialCountryCode?: SupportedCountryCode;
+        /**
+         * Disables formatting of the phone number input in the UI. values returned by `onChange` are always
+         * unformatted.
+         *
+         * @type boolean
+         */
+        disableFormatting?: boolean;
+    };
+
+/**
+ * An input that allows users to enter text phone numbers and select country codes for the phone number.
+ *
+ * This is the base element and if used must contain the field label contextually.
+ *
+ * For a more complete example with field usage, see the InputPhoneField component.
+ *
+ * @example
+ *     import { InputPhone } from '@bspk/ui/InputPhone';
+ *
+ *     function ExampleStandalone() {
+ *         const [value, onChange] = React.useState<number | undefined>();
+ *
+ *         return <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [value, onChange] = React.useState<number | undefined>();
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Input Phone</FieldLabel>
+ *                 <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />
+ *                 <FieldDescription>
+ *                     The phone input allows you to enter a phone number with country code.
+ *                 </FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name InputPhone
+ * @phase UXReview
+ */
+export function InputPhone({
+    value,
+    onChange,
+    disableFormatting,
+    initialCountryCode,
+    disabled,
+    readOnly,
+    name,
+    id: idProp,
+    invalid: invalidProp,
+    required = false,
+    size = 'medium',
+    inputRef,
+    scrollLimit = 5,
+    'aria-label': ariaLabel = 'Phone number input',
+}: InputPhoneProps) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+    const menuId = useMemo(() => `${id}-menu`, [id]);
+
+    const items = useIds(`input-phone-${id}`, SELECT_OPTIONS);
+
+    const [countryCode, setCountryCode] = useState<SupportedCountryCode>(initialCountryCode || guessUserCountryCode());
+
+    const inputInternalRef = useRef<HTMLInputElement | null>(null);
+
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: items.map((i) => i.id),
+    });
+
+    const closeMenu = () => setActiveElementId(null);
+    const open = Boolean(activeElementId);
+
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: true,
+    });
+
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: () => closeMenu(),
+        disabled: !open,
+    });
+
+    const spaceEnter = () => {
+        if (!open) {
+            elements.reference?.click();
+            return;
+        }
+        if (activeElementId) getElementById(activeElementId)?.click();
+    };
+
+    const { callingCode, selectedCodeData } = useMemo(() => {
+        const selectedValue = (countryCode || 'US') as SupportedCountryCode;
+        const data = countryCodeData[selectedValue] ?? countryCodeData.US;
+        return {
+            callingCode: getCountryCallingCode(countryCode),
+            selectedCodeData: data,
+        };
+    }, [countryCode]);
+
+    const handleChange = (newValue: string) => {
+        let rawNumber = newValue.replace(/\D/g, '');
+        if (rawNumber === value) return;
+
+        if (!disableFormatting) {
+            const formatter = new AsYouType(countryCode);
+            rawNumber = formatter.input(`${rawNumber}`);
+        }
+
+        onChange(rawNumber, countryCode);
+    };
+
+    const { sendAriaLiveMessage } = useUIContext();
+
+    return (
+        <>
+            <div
+                data-bspk="input-phone"
+                onKeyDownCapture={handleKeyDown({
+                    Tab: () => {
+                        //  if (open) closeMenu();
+                    },
+                })}
+            >
+                <InputElement
+                    aria-describedby={ariaDescribedBy}
+                    aria-errormessage={ariaErrorMessage}
+                    aria-label={ariaLabel || undefined}
+                    autoComplete="off"
+                    containerRef={elements.setReference}
+                    disabled={disabled}
+                    id={id}
+                    inputRef={(node) => {
+                        inputRef?.(node);
+                        inputInternalRef.current = node;
+                    }}
+                    invalid={invalid}
+                    leading={
+                        <>
+                            <Button
+                                aria-activedescendant={open ? activeElementId || undefined : undefined}
+                                aria-controls={open ? menuId : undefined}
+                                aria-disabled={disabled || undefined}
+                                aria-expanded={open}
+                                aria-haspopup="listbox"
+                                aria-label="select country code"
+                                aria-owns={menuId}
+                                aria-readonly={readOnly || undefined}
+                                disabled={disabled || readOnly}
+                                label="Open country code menu"
+                                name={`${name}-country-code`}
+                                onClick={(event) => {
+                                    const nextOpen = !open;
+                                    if (nextOpen) {
+                                        setActiveElementId(items[0]?.id || null);
+                                    } else {
+                                        setActiveElementId(null);
+                                    }
+                                    event.preventDefault();
+                                }}
+                                onKeyDown={handleKeyDown(
+                                    {
+                                        ...arrowKeyCallbacks,
+                                        ArrowDown: (event) => {
+                                            if (!open) spaceEnter();
+                                            arrowKeyCallbacks.ArrowDown?.(event);
+                                        },
+                                        Space: spaceEnter,
+                                        Enter: spaceEnter,
+                                        Escape: closeMenu,
+                                        'Ctrl+Option+Space': spaceEnter,
+                                    },
+                                    { preventDefault: true, stopPropagation: true },
+                                )}
+                                role="combobox"
+                                variant="tertiary"
+                            >
+                                <SvgIcon name={selectedCodeData.flagIconName} />
+                                <SvgIcon name="KeyboardArrowDown" />
+                            </Button>
+                            <span aria-hidden="true" style={{ cursor: 'default' }}>{`+${callingCode}`}</span>
+                        </>
+                    }
+                    name={name}
+                    onChange={handleChange}
+                    owner="input-phone"
+                    readOnly={readOnly}
+                    required={required}
+                    size={size}
+                    value={value}
+                />
+            </div>
+            {open && (
+                <Menu
+                    aria-autocomplete={undefined}
+                    aria-label="Select country code"
+                    as="div"
+                    id={menuId}
+                    innerRef={elements.setFloating}
+                    onClickCapture={() => {
+                        // Prevent the menu from closing when clicking inside it
+                        // maintain focus on the select control
+                        inputInternalRef.current?.focus();
+                    }}
+                    onFocus={() => {
+                        inputInternalRef.current?.focus();
+                    }}
+                    owner="input-phone"
+                    role="listbox"
+                    style={{
+                        ...(open ? scrollListItemsStyle(scrollLimit, items.length) : {}),
+                        ...floatingStyles,
+                    }}
+                    tabIndex={-1}
+                >
+                    {items.map(({ countryCallingCode, flagIconName, ...item }) => (
+                        <ListItem
+                            {...item}
+                            active={item.id === activeElementId}
+                            aria-selected={item.value === countryCode}
+                            key={item.id}
+                            leading={flagIconName ? <SvgIcon aria-hidden name={flagIconName} /> : null}
+                            onClick={() => {
+                                setCountryCode(item.value as SupportedCountryCode);
+                                sendAriaLiveMessage(`Selected country code ${item.label}`);
+                                closeMenu();
+                                inputInternalRef.current?.focus();
+                            }}
+                            role="option"
+                            trailing={`(+${countryCallingCode})`}
+                        />
+                    ))}
+                </Menu>
+            )}
+        </>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */