@bspk/ui 1.1.34 → 1.3.0

package/src/components/PhoneNumberInput/PhoneNumberInput.tsx

@@ -1,55 +1,33 @@
+import './phone-number-input.scss';
 import { SvgIcon } from '@bspk/icons/SvgIcon';
 import { AsYouType, getCountryCallingCode } from 'libphonenumber-js';
-import { useMemo, useState } from 'react';
-
-import { InvalidPropsLibrary } from '-';
-import { Divider } from '-/components/Divider';
-import { ListItem, ListItemProps } from '-/components/ListItem';
-import { Listbox } from '-/components/Listbox';
-import { Modal } from '-/components/Modal';
+import { useMemo, useRef, useState } from 'react';
+import { Button } from '-/components/Button';
+import { ListItemMenu } from '-/components/ListItemMenu';
 import { TextInput, TextInputProps } from '-/components/TextInput';
-import { useCombobox } from '-/hooks/useCombobox';
+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)})`,
+    };
+});
 
-import './phone-number-input.scss';
-
-const useCountryCodeSelectOptions = (initialCountryCode?: SupportedCountryCode) => {
-    return useMemo(() => {
-        const selectOptions = countryCodes.map((code): ListItemProps & { value: string } => {
-            const countryCodeDetails = countryCodeData[code];
-            const callingCodeString = `(+${getCountryCallingCode(code)})`;
-
-            return {
-                value: code,
-                label: `${countryCodeDetails?.name}`,
-                leading: countryCodeDetails?.flagIconName ? <SvgIcon name={countryCodeDetails?.flagIconName} /> : null,
-                trailing: callingCodeString,
-            };
-        });
-
-        const defaultCode = initialCountryCode || guessUserCountryCode();
-
-        return { countryCodeSelectOptions: selectOptions, defaultCountryCode: defaultCode };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-};
-
-export type PhoneNumberInputProps = InvalidPropsLibrary &
+export type PhoneNumberInputProps = FormFieldControlProps &
     Pick<
         TextInputProps,
-        | 'aria-label'
-        | 'autoComplete'
-        | 'disabled'
-        | 'inputRef'
-        | 'name'
-        | 'placeholder'
-        | 'readOnly'
-        | 'required'
-        | 'size'
-        | 'type'
-        | 'value'
+        '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
@@ -80,53 +58,32 @@ export type PhoneNumberInputProps = InvalidPropsLibrary &
  *     <PhoneNumberInput aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
  *
  * @name PhoneNumberInput
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function PhoneNumberInput({
-    errorMessage,
+export function PhoneNumberInput({
     value,
     onChange,
     disableFormatting,
     initialCountryCode,
     disabled,
-    invalid,
     readOnly,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
+    name,
     ...inputProps
 }: PhoneNumberInputProps) {
-    const { isMobile } = useUIContext();
-    const {
-        toggleProps,
-        menuProps,
-        closeMenu,
-        elements,
-        isOpen: showCountryCodeSelectMenu,
-        activeIndex,
-    } = useCombobox({
-        placement: 'bottom',
-        disabled,
-        invalid,
-        readOnly,
-        errorMessage,
-    });
-
-    const { countryCodeSelectOptions, defaultCountryCode } = useCountryCodeSelectOptions(initialCountryCode);
-
-    const [countryCode, setCountryCode] = useState<SupportedCountryCode>(defaultCountryCode);
+    const id = useId();
 
-    const formattedValue = useMemo(() => {
-        if (disableFormatting) {
-            return value;
-        }
+    const items = useIds(`phone-number-input-${id}`, SELECT_OPTIONS);
 
-        const formatter = new AsYouType(countryCode);
+    const [countryCode, setCountryCode] = useState<SupportedCountryCode>(initialCountryCode || guessUserCountryCode());
 
-        return formatter.input(value || '');
-    }, [value, countryCode, disableFormatting]);
+    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,
@@ -134,93 +91,96 @@ function PhoneNumberInput({
     }, [countryCode]);
 
     const handleChange = (newValue: string) => {
-        const rawNumber = newValue.replace(/\D/g, '');
+        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 setRef = (el: HTMLDivElement | null) => {
-        elements.setReference(el);
-    };
+    const { sendAriaLiveMessage } = useUIContext();
 
-    return (
-        <div data-bspk="phone-number-input" ref={setRef}>
-            <TextInput
-                onChange={handleChange}
-                value={formattedValue}
-                {...inputProps}
-                disabled={disabled}
-                errorMessage={errorMessage}
-                invalid={invalid}
-                leading={
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <button
-                            {...(disabled ? {} : toggleProps)}
-                            aria-label="Open country code menu"
-                            data-bspk="country-code-select"
-                        >
-                            <SvgIcon name={selectedCodeData.flagIconName} />
+    const fauxInputRef = useRef<HTMLInputElement | null>(null);
 
-                            <SvgIcon name="KeyboardArrowDown" />
-                        </button>
-                        <Divider orientation="vertical" />
-                        <span aria-label="Country code" style={{ cursor: 'default' }}>{`+${callingCode}`}</span>
-                    </div>
+    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);
                 }
-                readOnly={readOnly}
-            />
-            {showCountryCodeSelectMenu && (
-                <>
-                    {isMobile ? (
-                        <Modal
-                            data-bspk-owner="phone-number-input"
-                            description="select a country code for your phone number"
-                            header="Country Code"
-                            onClose={closeMenu}
-                            open={showCountryCodeSelectMenu}
-                        >
-                            {countryCodeSelectOptions.map((option, index) => (
-                                <ListItem
-                                    active={activeIndex === index || undefined}
-                                    aria-selected={countryCode === option.value}
-                                    data-bspk="country-code-select-option"
-                                    id={`${option.value}-country-code-select-option`}
-                                    key={option.value}
-                                    label={option.label}
-                                    leading={option.leading}
-                                    onClick={() => {
-                                        setCountryCode(option.value as SupportedCountryCode);
-                                        closeMenu();
-                                    }}
-                                    trailing={option.trailing}
-                                />
-                            ))}
-                        </Modal>
-                    ) : (
-                        <Listbox
-                            activeIndex={activeIndex}
-                            data-bspk-owner="phone-number-input"
-                            innerRef={elements.setFloating}
-                            itemDisplayCount={countryCodeSelectOptions.length}
-                            items={countryCodeSelectOptions}
-                            onChange={(next, event) => {
-                                event?.preventDefault();
-                                closeMenu();
-                                setCountryCode(next[0] as SupportedCountryCode);
-                            }}
-                            selectedValues={[countryCode]}
-                            {...menuProps}
+            }}
+            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>
+                    </div>
+                );
+            }}
+        </ListItemMenu>
     );
 }
 
-PhoneNumberInput.bspkName = 'PhoneNumberInput';
-
-export { PhoneNumberInput };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PhoneNumberInput/PhoneNumberInputExample.tsx

@@ -0,0 +1,8 @@
+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/phone-number-input.scss

@@ -1,49 +1,58 @@
 [data-bspk='phone-number-input'] {
+    position: relative;
     width: 100%;
+}
 
-    [data-bspk='text-input'] {
-        padding-left: 0;
-    }
+[data-bspk-owner='phone-number-input'] {
+    padding-left: 0;
 
     [data-bspk='divider'] {
-        margin-left: 0;
-        margin-top: var(--spacing-sizing-01);
-        margin-bottom: var(--spacing-sizing-01);
+        margin: 0 var(--spacing-sizing-02) 0 0;
     }
 
-    [data-bspk='country-code-select'] {
-        border: 0;
-        padding: var(--spacing-sizing-02);
-        background: none;
-        cursor: pointer;
-        outline: none;
+    [data-leading] {
+        overflow: hidden;
+        position: relative;
 
-        [data-bspk-name='KeyboardArrowDown'] {
-            margin-left: var(--spacing-sizing-02);
+        [contentEditable] {
+            position: absolute;
+            opacity: 0;
+            inset: 0;
+            z-index: 2;
         }
-    }
 
-    [data-bspk='country-code'] {
-        font: var(--body-base);
-        color: var(--foreground-neutral-on-surface);
-    }
+        [contentEditable]:focus-visible {
+            outline: none;
 
-    [data-bspk='txt'] {
-        cursor: default;
-    }
+            & + [data-bspk='button'] {
+                outline: solid 2px var(--stroke-neutral-focus);
+            }
+        }
 
-    [data-disabled] {
-        [data-bspk='country-code-select'] {
-            cursor: default;
+        [data-bspk='button'] {
+            gap: var(--spacing-sizing-02);
+            padding: 0 var(--spacing-sizing-03);
+            min-height: 100%;
+            margin-right: var(--spacing-sizing-02);
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: var(--spacing-sizing-01);
+                bottom: var(--spacing-sizing-01);
+                right: 0;
+                width: 1px;
+                background-color: var(--stroke-neutral-base);
+                pointer-events: none;
+            }
         }
     }
-}
 
-[data-bspk-owner='phone-number-input'] {
-    [data-bspk='list-item'] {
-        [data-trailing] {
-            font: var(--body-base);
-            color: var(--foreground-neutral-on-surface);
+    &[data-size='small'] {
+        [data-leading] {
+            [data-bspk='button'] {
+                padding-left: var(--spacing-sizing-02);
+            }
         }
     }
 }

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

@@ -0,0 +1,28 @@
+import { Popover } from './Popover';
+import { Button } from '-/components/Button';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <Popover
+        callToAction={{
+            label: 'Action',
+            onClick: () => {},
+        }}
+        content="This is a popover content"
+        header="Popover Header"
+        placement="bottom"
+    >
+        {(triggerProps) => <Button label="Toggle popover" {...triggerProps} />}
+    </Popover>
+);
+
+describe('Popover (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Toggle popover')).toBeInTheDocument();
+    });
+});