@bspk/ui 1.3.3 → 1.3.4

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,
-};

package/src/components/SnackbarProvider/SnackbarProvider.tsx

@@ -1,160 +0,0 @@
-import './snackbar-provider.scss';
-import { useState, ReactNode, useRef, useEffect } from 'react';
-import { Portal } from '-/components/Portal';
-import { Snackbar } from '-/components/Snackbar';
-import { randomString } from '-/utils/random';
-import { SnackbarContext, SnackbarData, SnackbarInput } from '-/utils/snackbarContext';
-
-export type SnackbarProviderProps = {
-    /** Content to be rendered inside the provider */
-    children: ReactNode;
-    /**
-     * Default time in milliseconds after which the snackbar will auto dismiss. If a Snackbar is sent with a timeout
-     * property that value will be used instead. If you want to disable the timeout for a specific snackbar, set its
-     * timeout to null.
-     */
-    timeout?: number | null;
-    /**
-     * Maximum number of snackbars to show at once
-     *
-     * @default 10
-     */
-    countLimit?: number;
-};
-
-/**
- * Snackbar context provider. Snackbars are intended to provide feedback about an action without interrupting the
- * customer experience.
- *
- * @example
- *     import { SnackbarProvider } from '@bspk/ui/SnackbarProvider';
- *
- *     // In your application root
- *     function Example() {
- *         return (
- *             <SnackbarProvider timeout={5000} countLimit={1}>
- *                 <App />
- *             </SnackbarProvider>
- *         );
- *     }
- *
- *     // In a descendent component
- *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
- *
- *     function ExampleComponent() {
- *         // The useSnackbarContext provides access to the sendSnackbar function
- *         const { sendSnackbar } = useSnackbarContext();
- *
- *         return (
- *             <button
- *                 onClick={() =>
- *                     sendSnackbar({
- *                         text: 'Example snackbar',
- *                         button: { text: 'Dismiss', onClick: 'close' },
- *                         timeout: 3000,
- *                     })
- *                 }
- *             >
- *                 Show snackbar
- *             </button>
- *         );
- *     }
- *
- *     // You can also programatically dismiss a Snackbar by calling clearSnackbar with the Snackbar's id.
- *     import { useSnackbarContext } from '@bspk/ui/hooks/useSnackbarContext';
- *     import { useState } from 'react';
- *
- *     function ExampleClearComponent() {
- *         const [snackbarId, setSnackbarId] = useState<string | null>(null);
- *
- *         const { sendSnackbar, clearSnackbar } = useSnackbarContext();
- *
- *         const sendAndStoreId = () => {
- *             const id = sendSnackbar({
- *                 text: 'Without a button or timeout I can only be closed programatically',
- *             });
- *             setSnackbarId(id);
- *         };
- *
- *         const clear = () => {
- *             if (snackbarId) {
- *                 clearSnackbar(snackbarId);
- *                 setSnackbarId(null);
- *             }
- *         };
- *
- *         return snackbarId ? (
- *             <button onClick={clear}>Clear snackbar</button>
- *         ) : (
- *             <button onClick={sendAndStoreId}>Send snackbar</button>
- *         );
- *     }
- *
- * @name SnackbarProvider
- * @phase UXReview
- */
-export function SnackbarProvider({ children, timeout, countLimit = 10 }: SnackbarProviderProps) {
-    const [snackbars, setSnackbars] = useState<SnackbarData[]>([]);
-    const timeouts = useRef<Map<string, NodeJS.Timeout>>(new Map());
-
-    const baseTimeout = timeout ?? 0;
-
-    const sendSnackbar = (data: SnackbarInput): string => {
-        const id = randomString(8);
-
-        setSnackbars((prevState) => prevState.concat([{ id, ...data }]));
-
-        const nextTimeout = data.timeout ?? baseTimeout;
-        if (data.timeout !== null && nextTimeout) {
-            timeouts.current.set(
-                id,
-                setTimeout(() => {
-                    clearSnackbar(id);
-                    timeouts.current.delete(id);
-                }, data.timeout ?? baseTimeout),
-            );
-        }
-
-        return id;
-    };
-
-    const clearSnackbar = (id: string) => {
-        setSnackbars((prevState) => prevState.filter((snackbarData) => snackbarData.id !== id));
-    };
-
-    const clearAll = () => {
-        setSnackbars([]);
-    };
-
-    useEffect(() => {
-        return () => {
-            // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want to run this on dismount
-            timeouts.current.forEach((timeoutToClear) => clearTimeout(timeoutToClear));
-        };
-    }, []);
-
-    const visibleSnackbars = countLimit ? snackbars.slice(0, countLimit) : snackbars;
-
-    return (
-        <SnackbarContext.Provider
-            value={{
-                snackbars,
-                sendSnackbar,
-                clearSnackbar,
-                clearAll,
-            }}
-        >
-            {visibleSnackbars.length > 0 && (
-                <Portal>
-                    <div aria-live="off" data-bspk="snackbar-provider">
-                        {visibleSnackbars.map(({ button, text, id }) => (
-                            <Snackbar button={button} key={id} onClose={() => clearSnackbar(id)} text={text} />
-                        ))}
-                    </div>
-                </Portal>
-            )}
-
-            {children}
-        </SnackbarContext.Provider>
-    );
-}