@bspk/ui 1.2.0 → 1.3.1

package/src/components/PhoneNumberInput/PhoneNumberInput.tsx

@@ -1,56 +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 { 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 './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
-    }, []);
-};
+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'
-        | 'autoComplete'
-        | 'disabled'
-        | 'inputRef'
-        | 'invalid'
-        | '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
@@ -90,42 +67,23 @@ export function PhoneNumberInput({
     initialCountryCode,
     disabled,
     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,
-        readOnly,
-    });
+    const id = useId();
 
-    const { countryCodeSelectOptions, defaultCountryCode } = useCountryCodeSelectOptions(initialCountryCode);
+    const items = useIds(`phone-number-input-${id}`, SELECT_OPTIONS);
 
-    const [countryCode, setCountryCode] = useState<SupportedCountryCode>(defaultCountryCode);
-
-    const formattedValue = useMemo(() => {
-        if (disableFormatting) {
-            return value;
-        }
+    const [countryCode, setCountryCode] = useState<SupportedCountryCode>(initialCountryCode || guessUserCountryCode());
 
-        const formatter = new AsYouType(countryCode);
-
-        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,
@@ -133,94 +91,95 @@ export 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
-                {...inputProps}
-                aria-describedby={ariaDescribedBy || undefined}
-                aria-errormessage={ariaErrorMessage || undefined}
-                disabled={disabled}
-                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 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);
                 }
-                onChange={handleChange}
-                readOnly={readOnly}
-                value={formattedValue}
-            />
-            {showCountryCodeSelectMenu && (
-                <>
-                    {isMobile ? (
-                        <Modal
-                            description="select a country code for your phone number"
-                            header="Country Code"
-                            onClose={closeMenu}
-                            open={showCountryCodeSelectMenu}
-                            owner="phone-number-input"
-                        >
-                            {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`}
-                                    includeAriaLabel={false}
-                                    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"
-                            includeAriaLabel={false}
-                            innerRef={elements.setFloating}
-                            itemCount={countryCodeSelectOptions.length}
-                            itemDisplayCount={
-                                countryCodeSelectOptions.length <= 10 ? countryCodeSelectOptions.length : 10
+            }}
+            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>
+                                </>
                             }
-                            items={countryCodeSelectOptions}
-                            onChange={(next, event) => {
-                                event?.preventDefault();
-                                closeMenu();
-                                setCountryCode(next[0] as SupportedCountryCode);
-                            }}
+                            name={name}
+                            onChange={handleChange}
                             owner="phone-number-input"
-                            selectedValues={[countryCode]}
-                            {...menuProps}
+                            readOnly={readOnly}
+                            value={value}
                         />
-                    )}
-                </>
-            )}
-        </div>
+                    </div>
+                );
+            }}
+        </ListItemMenu>
     );
 }
 

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

package/src/components/Popover/Popover.tsx

@@ -1,6 +1,7 @@
+import './popover.scss';
 import { SvgClose } from '@bspk/icons/Close';
-import { ReactElement, cloneElement, useMemo, useRef, useState } from 'react';
-
+import { FocusTrap } from 'focus-trap-react';
+import { ReactElement, useRef, useState } from 'react';
 import { Button } from '-/components/Button';
 import { Portal } from '-/components/Portal';
 import { Txt } from '-/components/Txt';
@@ -10,7 +11,10 @@ import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { CallToActionButton, CommonProps, ElementProps } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
-import './popover.scss';
+export type PopoverTriggerProps = {
+    onClick?: () => void;
+    'aria-describedby'?: string;
+};
 
 export type PopoverProps = CommonProps<'disabled'> &
     Pick<UseFloatingProps, 'refWidth'> & {
@@ -41,12 +45,11 @@ export type PopoverProps = CommonProps<'disabled'> &
          */
         secondaryCallToAction?: CallToActionButton;
         /**
-         * A single element that will trigger the popover when clicked.
+         * A callback to render the trigger element.
          *
-         * @type ReactElement
          * @required
          */
-        children: ReactElement;
+        children: (triggerProps: PopoverTriggerProps) => ReactElement;
     };
 
 /**
@@ -89,7 +92,7 @@ export function Popover({
     secondaryCallToAction,
     children,
     disabled = false,
-    refWidth = false,
+    refWidth,
     ...props
 }: ElementProps<PopoverProps, 'div'>) {
     const id = useId();
@@ -102,7 +105,7 @@ export function Popover({
         offsetOptions: 22,
         arrowRef,
         hide: !show,
-        refWidth: refWidth,
+        refWidth,
     });
 
     useOutsideClick({
@@ -110,17 +113,6 @@ export function Popover({
         callback: () => setShow(false),
     });
 
-    const child = useMemo(
-        () =>
-            !disabled &&
-            children &&
-            cloneElement(children, {
-                onClick: () => setShow((prev) => !prev),
-                'aria-describedby': id,
-            }),
-        [children, disabled, id],
-    );
-
     const basicArrowX = middlewareData?.arrow?.x ? `${middlewareData.arrow.x}px` : '0px';
 
     const getArrowX = () => {
@@ -133,63 +125,81 @@ export function Popover({
         return '0px';
     };
 
-    return disabled ? (
-        children
-    ) : (
+    if (disabled) return children({});
+    return (
         <>
-            {child}
-            <Portal>
-                <div
-                    data-bspk="popover"
-                    data-placement={middlewareData?.offset?.placement}
-                    id={id}
-                    ref={(node) => {
-                        elements.setFloating(node);
-                        elements.setReference(document.querySelector<HTMLElement>(`[aria-describedby="${id}"]`));
-                    }}
-                    style={{ ...floatingStyles, ...props.style }}
-                >
-                    <header>
-                        <Txt variant="heading-h6">{header}</Txt>
-                        <button aria-label="Close" onClick={() => setShow(false)}>
-                            <SvgClose />
-                        </button>
-                    </header>
-                    <div data-content>
-                        <Txt as="div" variant="body-small">
-                            {content}
-                        </Txt>
-                        <div data-cta-row>
-                            {secondaryCallToAction?.label && secondaryCallToAction?.onClick && (
-                                <Button
-                                    label={secondaryCallToAction.label}
-                                    onClick={secondaryCallToAction.onClick}
-                                    size="small"
-                                    variant="secondary"
-                                />
-                            )}
-                            {callToAction?.label && callToAction?.onClick && (
+            {children({
+                onClick: () => setShow(!show),
+                'aria-describedby': id,
+            })}
+            {show && (
+                <Portal>
+                    <FocusTrap
+                        focusTrapOptions={{
+                            fallbackFocus: () => elements.floating || document.body,
+                            clickOutsideDeactivates: true,
+                        }}
+                    >
+                        <div
+                            data-bspk="popover"
+                            data-placement={middlewareData?.offset?.placement}
+                            id={id}
+                            ref={(node) => {
+                                elements.setFloating(node);
+                                elements.setReference(
+                                    document.querySelector<HTMLElement>(`[aria-describedby="${id}"]`),
+                                );
+                            }}
+                            style={{ ...floatingStyles, ...props.style }}
+                        >
+                            <header>
+                                <Txt variant="heading-h6">{header}</Txt>
                                 <Button
-                                    label={callToAction.label}
-                                    onClick={callToAction.onClick}
-                                    size="small"
-                                    variant="primary"
+                                    data-close
+                                    icon={<SvgClose />}
+                                    iconOnly
+                                    label="Close"
+                                    onClick={() => setShow(false)}
+                                    variant="tertiary"
                                 />
-                            )}
+                            </header>
+                            <div data-content>
+                                <Txt as="div" variant="body-small">
+                                    {content}
+                                </Txt>
+                                <div data-cta-row>
+                                    {secondaryCallToAction?.label && secondaryCallToAction?.onClick && (
+                                        <Button
+                                            label={secondaryCallToAction.label}
+                                            onClick={secondaryCallToAction.onClick}
+                                            size="small"
+                                            variant="secondary"
+                                        />
+                                    )}
+                                    {callToAction?.label && callToAction?.onClick && (
+                                        <Button
+                                            label={callToAction.label}
+                                            onClick={callToAction.onClick}
+                                            size="small"
+                                            variant="primary"
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                            <div
+                                data-arrow
+                                ref={(node) => {
+                                    arrowRef.current = node;
+                                }}
+                                style={cssWithVars({
+                                    '--position-left': refWidth ? getArrowX() : basicArrowX,
+                                    '--position-top': `${middlewareData?.arrow?.y || 0}px`,
+                                })}
+                            />
                         </div>
-                    </div>
-                    <div
-                        data-arrow
-                        ref={(node) => {
-                            arrowRef.current = node;
-                        }}
-                        style={cssWithVars({
-                            '--position-left': refWidth ? getArrowX() : basicArrowX,
-                            '--position-top': `${middlewareData?.arrow?.y || 0}px`,
-                        })}
-                    />
-                </div>
-            </Portal>
+                    </FocusTrap>
+                </Portal>
+            )}
         </>
     );
 }