@bspk/ui 1.3.2 → 1.3.4

package/src/components/NumberField/NumberField.tsx

@@ -1,70 +0,0 @@
-import { FormField, FormFieldWrapProps } from '-/components/FormField';
-import { NumberInputProps, NumberInput } from '-/components/NumberInput';
-
-export type NumberFieldProps = FormFieldWrapProps<NumberInputProps>;
-
-/**
- * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
- * pressing the (+) or (-).
- *
- * This component takes properties from the FormField and NumberInput components.
- *
- * @example
- *     import React from 'react';
- *
- *     import { NumberField } from '@bspk/ui/NumberField';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState<number>();
- *
- *         return (
- *             <NumberField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={(nextValue) => setState(nextValue)}
- *                 value={state}
- *             />
- *         );
- *     }
- *
- * @name NumberField
- * @phase UXReview
- */
-export function NumberField({
-    label,
-    errorMessage,
-    disabled,
-    helperText,
-    controlId,
-    labelTrailing,
-    required,
-    invalid,
-    ...inputProps
-}: NumberFieldProps) {
-    return (
-        <FormField
-            controlId={controlId}
-            data-bspk="number-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            invalid={invalid}
-            label={label}
-            labelTrailing={labelTrailing}
-            required={required}
-        >
-            {(fieldProps) => (
-                <NumberInput
-                    {...inputProps}
-                    {...fieldProps}
-                    aria-label={label}
-                    disabled={disabled}
-                    id={controlId}
-                    invalid={invalid}
-                />
-            )}
-        </FormField>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/NumberField/index.tsx

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

package/src/components/NumberInput/index.tsx

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

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

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

package/src/components/PasswordInput/PasswordInput.tsx

@@ -1,115 +0,0 @@
-import './password-input.scss';
-import { useState } from 'react';
-import { Button } from '-/components/Button';
-import { TextInput, TextInputProps } from '-/components/TextInput';
-
-export type PasswordInputProps = Pick<
-    TextInputProps,
-    | 'aria-describedby'
-    | 'aria-errormessage'
-    | 'aria-label'
-    | 'containerRef'
-    | 'disabled'
-    | 'id'
-    | 'inputProps'
-    | 'inputRef'
-    | 'invalid'
-    | 'name'
-    | 'onChange'
-    | 'readOnly'
-    | 'required'
-    | 'size'
-    | 'value'
->;
-
-/**
- * An input field that is specifically built with a show/hide toggle for entering security passwords.
- *
- * @example
- *     import { PasswordInput } from '@bspk/ui/PasswordInput';
- *     import { useState } from 'react';
- *
- *     function Example() {
- *         const [value, setValue] = useState('');
- *
- *         return <PasswordInput value={value} onChange={setValue} aria-label="password" name="password" />;
- *     }
- *
- * @name PasswordInput
- * @phase UXReview
- */
-export function PasswordInput({
-    disabled,
-    readOnly,
-    size = 'medium',
-    'aria-label': ariaLabel,
-    'aria-describedby': ariaDescribedBy,
-    'aria-errormessage': ariaErrorMessage,
-    inputProps,
-    inputRef,
-    name,
-    onChange,
-    required,
-    value,
-    containerRef,
-    id,
-    invalid,
-    ...props
-}: PasswordInputProps) {
-    const [isShowingPassword, setIsShowingPassword] = useState(false);
-
-    const togglePasswordVisibility = () => {
-        if (disabled || readOnly) return;
-        setIsShowingPassword((prev) => !prev);
-    };
-
-    return (
-        <div {...props} data-bspk="password-input">
-            <TextInput
-                aria-describedby={ariaDescribedBy}
-                aria-errormessage={ariaErrorMessage}
-                aria-label={ariaLabel}
-                autoComplete="off"
-                containerRef={containerRef}
-                disabled={disabled}
-                id={id}
-                inputProps={inputProps}
-                inputRef={inputRef}
-                invalid={invalid}
-                leading={
-                    !isShowingPassword && (
-                        <>
-                            {Array.from({ length: value?.length || 0 }, (_, i) => (
-                                <span key={i} />
-                            ))}
-                        </>
-                    )
-                }
-                name={name}
-                onChange={onChange}
-                onClick={(e) => {
-                    (e.currentTarget as HTMLElement)?.querySelector('input')?.focus();
-                }}
-                owner="password-input"
-                readOnly={readOnly}
-                required={required}
-                showClearButton={false}
-                size={size}
-                trailing={
-                    !disabled &&
-                    !readOnly && (
-                        <Button
-                            label={isShowingPassword ? 'Hide' : 'Show'}
-                            onClick={togglePasswordVisibility}
-                            variant="tertiary"
-                        />
-                    )
-                }
-                type={isShowingPassword ? 'text' : 'password'}
-                value={value}
-            />
-        </div>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PasswordInput/index.tsx

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

package/src/components/PasswordInput/password-input.scss

@@ -1,36 +0,0 @@
-[data-bspk='password-input'] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 100%;
-
-    [data-bspk='text-input'] {
-        padding-right: 0;
-
-        [data-bspk='button'] {
-            font: var(--button-font);
-            height: 100%;
-        }
-    }
-
-    [data-disabled],
-    [data-readonly] {
-        [data-toggle-visibility-button] {
-            cursor: default;
-        }
-    }
-
-    &[data-size='small'] {
-        --button-font: var(--labels-small);
-    }
-
-    &[data-size='medium'] {
-        --button-font: var(--labels-base);
-    }
-
-    &[data-size='large'] {
-        --button-font: var(--labels-large);
-    }
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -1,24 +0,0 @@
-import { PhoneNumberField } from './PhoneNumberField';
-import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
-import { render } from '-/rtl/util';
-
-const TestBed = () => (
-    <PhoneNumberField
-        aria-label="Phone number field"
-        controlId="Example controlId"
-        label="Phone number field"
-        name="Example name"
-        onChange={() => {}}
-        value="9375551060"
-    />
-);
-
-describe('PhoneNumberField (RTL)', () => {
-    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
-
-    it('renders', () => {
-        const { getByLabelText } = render(<TestBed />);
-
-        expect(getByLabelText('Phone number field')).toBeInTheDocument();
-    });
-});

package/src/components/PhoneNumberField/PhoneNumberField.tsx

@@ -1,41 +0,0 @@
-import { FormField, FormFieldWrapProps } from '-/components/FormField';
-import { PhoneNumberInput, PhoneNumberInputProps } from '-/components/PhoneNumberInput';
-
-export type PhoneNumberFieldProps = FormFieldWrapProps<PhoneNumberInputProps>;
-
-/**
- * A text input that allows users to enter text phone numbers with country codes.
- *
- * @example
- *     <PhoneNumberField label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
- *
- * @name PhoneNumberField
- * @phase UXReview
- */
-export function PhoneNumberField({
-    controlId,
-    errorMessage,
-    helperText,
-    invalid,
-    label,
-    labelTrailing,
-    required,
-    ...inputProps
-}: PhoneNumberFieldProps) {
-    return (
-        <FormField
-            controlId={controlId}
-            data-bspk="phone-number-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            invalid={invalid}
-            label={label}
-            labelTrailing={labelTrailing}
-            required={required}
-        >
-            {(fieldProps) => <PhoneNumberInput {...inputProps} {...fieldProps} aria-label={label} invalid={invalid} />}
-        </FormField>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PhoneNumberField/index.tsx

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

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

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

package/src/components/PhoneNumberInput/PhoneNumberInput.tsx

@@ -1,186 +0,0 @@
-import './phone-number-input.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 { ListItemMenu } from '-/components/ListItemMenu';
-import { TextInput, TextInputProps } from '-/components/TextInput';
-import { useId } from '-/hooks/useId';
-import { useUIContext } from '-/hooks/useUIContext';
-import { FormFieldControlProps } from '-/types/common';
-import { countryCodeData, countryCodes, SupportedCountryCode } from '-/utils/countryCodes';
-import { guessUserCountryCode } from '-/utils/guessUserCountryCode';
-import { useIds } from '-/utils/useIds';
-
-const SELECT_OPTIONS = countryCodes.map((code) => {
-    const countryCodeDetails = countryCodeData[code];
-    return {
-        value: code,
-        label: `${countryCodeDetails?.name}`,
-        leading: countryCodeDetails?.flagIconName ? (
-            <SvgIcon aria-hidden name={countryCodeDetails?.flagIconName} />
-        ) : null,
-        trailing: `(+${getCountryCallingCode(code)})`,
-    };
-});
-
-export type PhoneNumberInputProps = FormFieldControlProps &
-    Pick<
-        TextInputProps,
-        'aria-label' | 'disabled' | 'inputRef' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size' | 'value'
-    > & {
-        /**
-         * 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;
-        /** Handler for change events. Contains the raw phone number value and the selected country code. */
-        onChange: (value: string, countryCode: SupportedCountryCode) => void;
-    };
-
-/**
- * A text input that allows users to enter text phone numbers with country codes.
- *
- * This is the base element and if used must contain the field label contextually. This will more often be used in the
- * PhoneNumberField component.
- *
- * @example
- *     <PhoneNumberInput aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
- *
- * @name PhoneNumberInput
- * @phase UXReview
- */
-export function PhoneNumberInput({
-    value,
-    onChange,
-    disableFormatting,
-    initialCountryCode,
-    disabled,
-    readOnly,
-    'aria-label': ariaLabel,
-    'aria-describedby': ariaDescribedBy,
-    'aria-errormessage': ariaErrorMessage,
-    name,
-    ...inputProps
-}: PhoneNumberInputProps) {
-    const id = useId();
-
-    const items = useIds(`phone-number-input-${id}`, SELECT_OPTIONS);
-
-    const [countryCode, setCountryCode] = useState<SupportedCountryCode>(initialCountryCode || guessUserCountryCode());
-
-    const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
-
-    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();
-
-    const fauxInputRef = useRef<HTMLInputElement | null>(null);
-
-    return (
-        <ListItemMenu
-            disabled={disabled || readOnly}
-            itemOnClick={({ currentId, setShow }) => {
-                if (currentId) {
-                    const item = items.find((i) => i.id === currentId)!;
-                    setCountryCode(item.value as SupportedCountryCode);
-                    sendAriaLiveMessage(`Selected country code ${item.label}`);
-                    setShow(false);
-                }
-            }}
-            items={({ show }) => {
-                if (!show) return items.filter((item) => countryCode.includes(item.value));
-
-                return items.map((item) => ({
-                    ...item,
-                    'aria-selected': item.value === countryCode,
-                }));
-            }}
-            label="Select country code"
-            onClose={() => {
-                inputRef?.focus();
-            }}
-            owner="phone-number-input"
-            role="listbox"
-            scrollLimit={10}
-            width="reference"
-        >
-            {(toggleProps, { setRef }) => {
-                return (
-                    <div data-bspk="phone-number-input">
-                        <TextInput
-                            {...inputProps}
-                            aria-describedby={ariaDescribedBy}
-                            aria-errormessage={ariaErrorMessage}
-                            aria-label={ariaLabel}
-                            autoComplete="off"
-                            containerRef={setRef}
-                            disabled={disabled}
-                            inputRef={setInputRef}
-                            leading={
-                                <>
-                                    <input
-                                        contentEditable
-                                        name={`${name}-country-code`}
-                                        {...toggleProps}
-                                        aria-label="select country code"
-                                        ref={fauxInputRef}
-                                    />
-                                    <Button
-                                        disabled={disabled || readOnly}
-                                        label="Open country code menu"
-                                        onClick={() => {
-                                            fauxInputRef.current?.focus();
-                                            fauxInputRef.current?.click();
-                                        }}
-                                        variant="tertiary"
-                                    >
-                                        <SvgIcon name={selectedCodeData.flagIconName} />
-                                        <SvgIcon name="KeyboardArrowDown" />
-                                    </Button>
-                                    <span aria-hidden="true" style={{ cursor: 'default' }}>{`+${callingCode}`}</span>
-                                </>
-                            }
-                            name={name}
-                            onChange={handleChange}
-                            owner="phone-number-input"
-                            readOnly={readOnly}
-                            value={value}
-                        />
-                    </div>
-                );
-            }}
-        </ListItemMenu>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PhoneNumberInput/PhoneNumberInputExample.tsx

@@ -1,8 +0,0 @@
-import { PhoneNumberInputProps } from '.';
-import { ComponentExample, Preset } from '-/utils/demo';
-
-export const presets: Preset<PhoneNumberInputProps>[] = [];
-
-export const PhoneNumberInputExample: ComponentExample<PhoneNumberInputProps> = {
-    variants: false,
-};

package/src/components/PhoneNumberInput/index.tsx

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

package/src/components/SelectField/SelectFieldExample.tsx

@@ -1,16 +0,0 @@
-import { SelectFieldProps } from '.';
-import { presets as selectPresets, SelectExample } from '-/components/Select/SelectExample';
-import { ComponentExample } from '-/utils/demo';
-
-export const presets = selectPresets.map((preset, index) => ({
-    ...preset,
-    propState: {
-        ...preset.propState,
-        controlId: `example-select-${index}`,
-    },
-}));
-
-export const SelectFieldExample: ComponentExample<SelectFieldProps> = {
-    defaultState: SelectExample.defaultState,
-    presets,
-};