@bspk/ui 1.3.3 → 1.3.5

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

package/src/components/SnackbarProvider/SnackbarProviderExample.tsx

@@ -1,127 +0,0 @@
-import { useRef, useState } from 'react';
-import { SnackbarProvider, SnackbarProviderProps } from './SnackbarProvider';
-import { Button } from '-/components/Button';
-import { CheckboxGroup } from '-/components/CheckboxGroup';
-import { NumberField } from '-/components/NumberField';
-import { TextField } from '-/components/TextField';
-import { Txt } from '-/components/Txt';
-import { useSnackbarContext } from '-/hooks/useSnackbarContext';
-import { ComponentExample } from '-/utils/demo';
-import './snackbar-provider-example.scss';
-
-export const SnackbarProviderExample: ComponentExample<SnackbarProviderProps> = {
-    containerStyle: { width: '100%' },
-    defaultState: {},
-    disableProps: [],
-    presets: [],
-    render: ({ props }) => (
-        <SnackbarProvider countLimit={props.countLimit} timeout={props.timeout || 5000}>
-            <ExampleForm />
-        </SnackbarProvider>
-    ),
-    sections: [],
-    variants: {},
-};
-
-function ExampleForm() {
-    const countRef = useRef(0);
-    const [snackbarText, setSnackbarText] = useState('Full send!');
-    const [options, setOptions] = useState<string[]>(['enableTimeout']);
-    const [dismissButtonText, setDismissButtonText] = useState('Dismiss');
-    const [timeout, setTimeout] = useState(5000);
-
-    const { sendSnackbar } = useSnackbarContext();
-
-    const enableTimeout = options.includes('enableTimeout');
-    const enableDismiss = options.includes('dismissButton');
-    const enableCount = options.includes('showCount');
-
-    const onButtonClick = () => {
-        if (enableCount) {
-            countRef.current += 1;
-        }
-
-        sendSnackbar({
-            text: snackbarText + (enableCount ? ` (${countRef.current})` : ''),
-            timeout: enableTimeout ? timeout : null,
-            button: enableDismiss
-                ? {
-                      label: dismissButtonText,
-                      onClick: 'close',
-                  }
-                : undefined,
-        });
-    };
-
-    return (
-        <div data-snackbar-provider-example="">
-            <TextField
-                aria-label="Snackbar Text"
-                controlId="text"
-                label="Snackbar Text"
-                name="text"
-                onChange={setSnackbarText}
-                size="small"
-                value={snackbarText}
-            />
-
-            <CheckboxGroup
-                aria-label="Example Checkbox Group"
-                name="example-checkbox-group"
-                onChange={(nextValues: string[]) => {
-                    setOptions(nextValues);
-                }}
-                options={[
-                    { label: 'Enable timeout', value: 'enableTimeout' },
-                    {
-                        label: 'Include dismiss button',
-                        value: 'dismissButton',
-                    },
-                    {
-                        label: 'Count sends (diagnostic)',
-                        value: 'showCount',
-                    },
-                ]}
-                values={options}
-            />
-
-            {enableTimeout && (
-                <NumberField
-                    aria-label="Timeout"
-                    controlId="timeout"
-                    label="Timeout (ms)"
-                    max={60000}
-                    min={0}
-                    name="timeout"
-                    onChange={(val) => setTimeout(parseInt(`${val}`) || 0)}
-                    size="small"
-                    step={1000}
-                    value={timeout}
-                />
-            )}
-
-            {enableDismiss && (
-                <TextField
-                    aria-label="Dismiss button Text"
-                    controlId="text"
-                    label="Dismiss Button Text"
-                    name="text"
-                    onChange={setDismissButtonText}
-                    size="small"
-                    value={dismissButtonText}
-                />
-            )}
-
-            {!enableDismiss && !enableTimeout && (
-                <Txt data-warning="" variant="body-small">
-                    Note: Without a timeout or dismiss button the snackbar can only be closed programatically using the
-                    useSnackbarContext hook.
-                </Txt>
-            )}
-
-            <div data-button-wrapper="">
-                <Button label="Send it!" onClick={onButtonClick} size="medium" title="Snackbar" />
-            </div>
-        </div>
-    );
-}

package/src/components/SnackbarProvider/index.tsx

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

package/src/components/SnackbarProvider/snackbar-provider-example.scss

@@ -1,17 +0,0 @@
-[data-snackbar-provider-example] {
-    display: flex;
-    gap: var(--spacing-sizing-03);
-    flex-direction: column;
-    width: 300px;
-    flex: 1;
-
-    [data-warning] {
-        color: var(--status-error);
-    }
-
-    [data-button-wrapper] {
-        display: flex;
-        justify-content: center;
-        margin-top: var(--spacing-sizing-02);
-    }
-}

package/src/components/SnackbarProvider/snackbar-provider.scss

@@ -1,15 +0,0 @@
-[data-bspk='snackbar-provider'] {
-    position: fixed;
-    z-index: var(--z-index-dialog);
-    display: flex;
-    flex-direction: column-reverse;
-    max-height: 100%;
-    overflow: hidden;
-    inset: 0;
-    align-items: center;
-    gap: var(--spacing-sizing-02);
-    pointer-events: none;
-    padding: var(--spacing-sizing-02);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -1,24 +0,0 @@
-import { TextField } from './TextField';
-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"
-    />
-);
-
-describe('TextField (RTL)', () => {
-    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
-
-    it('renders', () => {
-        const { getByLabelText } = render(<TestBed />);
-
-        expect(getByLabelText('Example label')).toBeInTheDocument();
-    });
-});