@bspk/ui 1.1.33 → 1.2.0

package/src/components/TimeInput/Segment.tsx

@@ -0,0 +1,221 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { bound } from '-/utils/bound';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+
+export const MINUTE_BOUNDS = { min: 0, max: 59 } as const;
+export const HOUR_BOUNDS = { min: 1, max: 12 } as const;
+
+export const NUMBER_PLACEHOLDER = '--' as const;
+
+export type TimeInputType = 'hours' | 'meridiem' | 'minutes';
+
+type TimeInputSegmentProps<T extends number | string> = {
+    ariaLabel?: string;
+    disabled?: boolean;
+    name: string;
+    readOnly?: boolean;
+    defaultValue?: T;
+    type: TimeInputType;
+    onChange: (value: T | null) => void;
+};
+
+export function TimeInputSegment<T extends number | string>({
+    ariaLabel,
+    disabled,
+    name,
+    readOnly,
+    defaultValue,
+    type: kind,
+    onChange,
+}: TimeInputSegmentProps<T>) {
+    const ref = useRef<HTMLSpanElement | null>(null);
+
+    const selectAll = (element: HTMLElement | null = ref.current) => {
+        if (!element) return;
+        setTimeout(() => {
+            window.getSelection()?.selectAllChildren(element);
+        }, 10);
+    };
+
+    const valueToContent = useCallback(
+        (value: number | string | undefined) => {
+            if (kind === 'meridiem') return value?.toString() || 'AM';
+            if (typeof value === 'undefined') return NUMBER_PLACEHOLDER;
+            const boundedValue = bound({
+                num: value,
+                rollover: true,
+                ...(kind === 'hours' ? HOUR_BOUNDS : MINUTE_BOUNDS),
+            });
+            return boundedValue.toString().padStart(2, '0');
+        },
+        [kind],
+    );
+
+    useEffect(() => {
+        if (ref.current) ref.current.textContent = valueToContent(defaultValue);
+    }, [defaultValue, valueToContent]);
+
+    const handleBlur = () => {
+        window.getSelection()?.removeAllRanges();
+    };
+
+    const handleIncrement = useCallback(
+        (increment: number) => {
+            const currentValue = ref.current?.textContent;
+
+            if (kind === 'meridiem') {
+                const nextMeridiem = currentValue === 'AM' ? 'PM' : 'AM';
+                onChange(nextMeridiem as T);
+                return;
+            }
+            const nextValue = bound({
+                num: Number(currentValue) + increment,
+                rollover: true,
+                ...(kind === 'minutes' ? MINUTE_BOUNDS : HOUR_BOUNDS),
+            });
+            onChange(nextValue as T);
+            if (ref.current) ref.current.textContent = nextValue.toString().padStart(2, '0');
+        },
+        [kind, onChange],
+    );
+
+    const nextSibling = () => getNextSibling(ref.current, '[data-input]');
+
+    const previousSibling = () => getPreviousSibling(ref.current, '[data-input]');
+
+    const handleInputKeyDown = useCallback(
+        (event: React.KeyboardEvent) => {
+            // Prevent default behavior for all keys - we handle them manually
+            if (
+                handleKeyDown({
+                    ArrowRight: () => {
+                        nextSibling()?.focus();
+                        event.preventDefault();
+                    },
+                    ArrowLeft: () => {
+                        previousSibling()?.focus();
+                        event.preventDefault();
+                    },
+                    ArrowUp: () => {
+                        handleIncrement(1);
+                        event.preventDefault();
+                    },
+                    ArrowDown: () => {
+                        handleIncrement(-1);
+                        event.preventDefault();
+                    },
+                    Enter: () => ref.current?.blur(),
+                    Escape: () => ref.current?.blur(),
+                    Backspace: () => onChange(null),
+                    Tab: () => {
+                        // do nothing
+                    },
+                })(event)
+            )
+                return;
+
+            event.preventDefault();
+
+            // if hours only allow digits and if digit is found only once in VALID_HOURS then set the value and move to next element
+            if (kind === 'meridiem') {
+                const inputValue = event.key.toUpperCase();
+
+                if (inputValue === 'A' || inputValue === 'P') {
+                    onChange(`${inputValue}M` as T);
+                    nextSibling()?.focus();
+                    selectAll();
+                    return;
+                }
+
+                return;
+            }
+
+            // only handle digits from here
+            if (!/^\d$/.test(event.key)) return;
+
+            let nextNumber = Number(event.key);
+            const currentValue = ref.current?.textContent;
+
+            const addToExisting =
+                (kind === 'hours' && currentValue === '01' && nextNumber < 3) ||
+                (kind === 'minutes' && Number(currentValue) < 6);
+
+            if (addToExisting) nextNumber = Number(`${currentValue}${nextNumber}`);
+            else if (nextNumber === 0) return; // ignore leading zero
+
+            nextNumber = bound({
+                num: nextNumber,
+                ...(kind === 'minutes' ? MINUTE_BOUNDS : HOUR_BOUNDS),
+            });
+
+            onChange(nextNumber as T);
+            if (ref.current) ref.current.textContent = nextNumber.toString().padStart(2, '0');
+
+            const moveToNext = (kind === 'hours' && nextNumber > 2) || (kind === 'minutes' && nextNumber > 5);
+
+            if (moveToNext) {
+                nextSibling()?.focus();
+                selectAll(nextSibling());
+            } else {
+                selectAll();
+            }
+
+            return;
+        },
+        [kind, handleIncrement, onChange],
+    );
+
+    return (
+        <span
+            aria-disabled={disabled}
+            aria-label={`${ariaLabel} ${name.charAt(0).toUpperCase() + name.slice(1)}`}
+            aria-readonly={readOnly}
+            contentEditable={!readOnly && !disabled}
+            data-input=""
+            data-type={kind}
+            data-value={defaultValue || undefined}
+            id={`${name}`}
+            onBlur={handleBlur}
+            onClick={() => {
+                if (disabled || readOnly) return;
+                selectAll();
+            }}
+            onFocus={() => {
+                if (disabled || readOnly) return;
+                selectAll();
+            }}
+            onKeyDown={handleInputKeyDown}
+            ref={(element) => {
+                if (!element) return;
+                ref.current = element;
+                element.textContent = valueToContent(defaultValue);
+            }}
+            role="spinbutton"
+            tabIndex={0}
+        />
+    );
+}
+
+function getNextSibling(elem: HTMLElement | null, selector: string): HTMLElement | null {
+    // Get the next sibling element
+    let sibling = elem?.nextElementSibling;
+    // If the sibling matches our selector, use it
+    // If not, jump to the next sibling and continue the loop
+    while (sibling) {
+        if (sibling.matches(selector)) return sibling as HTMLElement | null;
+        sibling = sibling.nextElementSibling;
+    }
+    return null;
+}
+
+function getPreviousSibling(elem: HTMLElement | null, selector: string): HTMLElement | null {
+    // Get the previous sibling element
+    let sibling = elem?.previousElementSibling;
+    // If the sibling matches our selector, use it
+    // If not, jump to the previous sibling and continue the loop
+    while (sibling) {
+        if (sibling.matches(selector)) return sibling as HTMLElement | null;
+        sibling = sibling.previousElementSibling;
+    }
+    return null;
+}

package/src/components/TimeInput/TimeInput.tsx

@@ -0,0 +1,192 @@
+import { SvgSchedule } from '@bspk/icons/Schedule';
+import { useEffect, useState } from 'react';
+import './time-input.scss';
+import { TimeInputListbox } from './Listbox';
+import { TimeInputSegment } from './Segment';
+import { Button } from '-/components/Button';
+import { Menu } from '-/components/Menu';
+import { TextInputProps } from '-/components/TextInput';
+import { useFloating } from '-/hooks/useFloating';
+import { useId } from '-/hooks/useId';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+
+export const MINUTE_OPTIONS = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+export const HOUR_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+
+type Meridiem = 'AM' | 'PM';
+export const MERIDIEM_OPTIONS: Meridiem[] = ['AM', 'PM'];
+
+export type TimeInputProps = Pick<
+    TextInputProps,
+    | 'aria-describedby'
+    | 'aria-errormessage'
+    | 'aria-label'
+    | 'disabled'
+    | 'id'
+    | 'invalid'
+    | 'name'
+    | 'readOnly'
+    | 'size'
+> & {
+    value?: string;
+};
+
+/**
+ * An input field that allows a customer to manually type in a specific time or triggers a time picker combobox to
+ * select a date.
+ *
+ * @example
+ *     import { TimeInput } from '@bspk/ui/TimeInput';
+ *
+ *     function Example() {
+ *         return <TimeInput>Example TimeInput</TimeInput>;
+ *     }
+ *
+ * @name TimeInput
+ * @phase UXReview
+ */
+export function TimeInput({
+    value,
+    'aria-label': ariaLabel,
+    disabled,
+    id: idProp,
+    invalid,
+    readOnly,
+    name,
+    size,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
+}: TimeInputProps) {
+    const id = useId(idProp);
+
+    const [inputValue, setInputValue] = useState(value);
+
+    const [hours, setHours] = useState<number>();
+    const [minutes, setMinutes] = useState<number>();
+    const [meridiem, setMeridiem] = useState<Meridiem>('AM');
+
+    useEffect(() => {
+        setInputValue(
+            `${hours?.toString().padStart(2, '0')}:${minutes?.toString().padStart(2, '0')} ${meridiem || ''}`.trim(),
+        );
+        if (hours !== undefined && minutes === undefined) setMinutes(0);
+    }, [hours, minutes, meridiem]);
+
+    const [open, setOpen] = useState(false);
+
+    const { floatingStyles, elements } = useFloating({
+        strategy: 'fixed',
+        refWidth: true,
+        offsetOptions: 4,
+        hide: !open,
+    });
+
+    return (
+        <>
+            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+            <div
+                aria-describedby={ariaErrorMessage || ariaDescribedBy || undefined}
+                data-aria-label={ariaLabel || undefined}
+                data-bspk="time-input"
+                data-disabled={disabled || undefined}
+                data-invalid={invalid || undefined}
+                data-name={name || undefined}
+                data-open={open || undefined}
+                data-readonly={readOnly || undefined}
+                data-size={size || undefined}
+                data-value={inputValue || undefined}
+                id={id}
+                onClick={() => {
+                    elements.reference?.querySelector<HTMLElement>('[tabIndex]')?.focus();
+                }}
+                onKeyDown={handleKeyDown({ Escape: () => setOpen(false) })}
+                ref={elements.setReference}
+                role="group"
+            >
+                <TimeInputSegment
+                    ariaLabel={ariaLabel}
+                    defaultValue={hours}
+                    disabled={disabled}
+                    name={`${name}-hours`}
+                    onChange={(next) => setHours(next || undefined)}
+                    readOnly={readOnly}
+                    type="hours"
+                />
+                <span aria-hidden="true">:</span>
+                <TimeInputSegment
+                    ariaLabel={ariaLabel}
+                    defaultValue={minutes}
+                    disabled={disabled}
+                    name={`${name}-minutes`}
+                    onChange={(next) => setMinutes(next || undefined)}
+                    readOnly={readOnly}
+                    type="minutes"
+                />
+                <TimeInputSegment
+                    ariaLabel={ariaLabel}
+                    defaultValue={meridiem}
+                    disabled={disabled}
+                    name={`${name}-meridiem`}
+                    onChange={(next) => setMeridiem(next || 'AM')}
+                    readOnly={readOnly}
+                    type="meridiem"
+                />
+                <Button
+                    icon={<SvgSchedule />}
+                    iconOnly
+                    label={`${open ? 'Close' : 'Open'} Time Picker`}
+                    onClick={() => {
+                        setOpen(!open);
+                        elements.reference?.focus();
+                    }}
+                    variant="tertiary"
+                />
+            </div>
+            {!!open && (
+                <Menu
+                    floating
+                    innerRef={(node) => {
+                        if (!node) return;
+                        elements.setFloating(node as HTMLElement);
+                        node.querySelector<HTMLElement>('[data-scroll-column="hours"]')?.focus();
+                    }}
+                    onOutsideClick={() => {
+                        setOpen(false);
+                    }}
+                    owner="time-input"
+                    scroll={false}
+                    style={{ ...floatingStyles }}
+                >
+                    <div data-scroll-values>
+                        <TimeInputListbox
+                            onSelect={setHours}
+                            options={HOUR_OPTIONS.map((h) => h)}
+                            selectedValue={hours}
+                            type="hours"
+                        />
+                        <TimeInputListbox
+                            onSelect={setMinutes}
+                            options={MINUTE_OPTIONS}
+                            selectedValue={minutes}
+                            type="minutes"
+                        />
+                        <TimeInputListbox
+                            onSelect={setMeridiem}
+                            onTab={(e) => {
+                                e.preventDefault();
+                                setOpen(false);
+                                setTimeout(() => elements.reference?.focus(), 10);
+                                // Focus back on the input after closing
+                            }}
+                            options={MERIDIEM_OPTIONS}
+                            selectedValue={meridiem}
+                            type="meridiem"
+                        />
+                    </div>
+                </Menu>
+            )}
+        </>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/TimeInput/TimeInputExample.tsx

@@ -0,0 +1,6 @@
+import { TimeInputProps } from './TimeInput';
+import { ComponentExample } from '-/utils/demo';
+
+export const TimeInputExample: ComponentExample<TimeInputProps> = {
+    variants: false,
+};

package/src/components/TimeInput/index.tsx

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

package/src/components/TimeInput/time-input.scss

@@ -0,0 +1,176 @@
+[data-bspk='time-input'] {
+    --border-color: var(--stroke-neutral-base);
+
+    display: flex;
+    flex-flow: row;
+    background-color: var(--surface-neutral-t1-base);
+    border: solid 1px var(--border-color);
+    height: var(--field-height);
+    border-radius: var(--radius-sm);
+    padding: 0 0 0 var(--field-padding);
+    width: 100%;
+    justify-content: flex-start;
+    align-items: center;
+
+    &:hover:not(:focus-within) {
+        background:
+            linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &:active:not(:focus-within) {
+        background:
+            linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &[data-readonly] {
+        --border-color: var(--stroke-neutral-disabled-light);
+
+        background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &[data-disabled],
+    &:has(input[disabled]) {
+        --border-color: var(--stroke-neutral-disabled-light);
+
+        background:
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+
+        & > * {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    &[data-invalid] {
+        --border-color: var(--status-error);
+    }
+
+    &[data-size='small'] {
+        --field-padding: var(--spacing-sizing-02);
+        --field-height: var(--spacing-sizing-08);
+        --field-font: var(--body-small);
+    }
+
+    &[data-size='medium'] {
+        --field-padding: var(--spacing-sizing-03);
+        --field-height: var(--spacing-sizing-10);
+        --field-font: var(--body-base);
+    }
+
+    &[data-size='large'] {
+        --field-padding: var(--spacing-sizing-03);
+        --field-height: var(--spacing-sizing-12);
+        --field-font: var(--body-large);
+    }
+
+    [aria-hidden] {
+        font: var(--field-font);
+    }
+
+    [data-input] {
+        background-color: transparent !important;
+        border: none;
+        outline: none;
+        padding: 0;
+        height: var(--field-height);
+        font: var(--field-font);
+        min-width: 0;
+        text-align: right;
+        line-height: var(--field-height);
+        width: fit-content;
+
+        &[data-type='meridiem'] {
+            text-transform: uppercase;
+            margin-left: 0.25em;
+        }
+
+        * {
+            pointer-events: none;
+        }
+    }
+
+    [data-bspk='button'] {
+        margin-left: auto;
+
+        &:focus {
+            outline-offset: -4px;
+            border-radius: var(--radius-md);
+        }
+    }
+
+    &:focus-within,
+    &[data-open] {
+        --border-color: var(--stroke-neutral-focus);
+
+        outline: 1px solid var(--stroke-neutral-focus);
+    }
+}
+
+[data-bspk-owner='time-input'][data-bspk='menu'] {
+    overflow: hidden;
+    height: 324px;
+
+    [data-scroll-values] {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        justify-content: center;
+        align-items: start;
+        gap: var(--spacing-sizing-04);
+        padding: var(--spacing-sizing-04);
+
+        [data-scroll-column] {
+            padding: 0 var(--spacing-sizing-01);
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            overflow: hidden auto;
+            font: var(--labels-base);
+            gap: var(--spacing-sizing-02);
+            align-items: center;
+            justify-content: start;
+
+            span {
+                display: flex;
+                cursor: pointer;
+                align-items: center;
+                justify-content: center;
+                width: var(--spacing-sizing-13);
+                flex: 0;
+                border-radius: var(--radius-sm);
+                font: var(--labels-base);
+                line-height: var(--spacing-sizing-10);
+
+                &[aria-selected] {
+                    background: var(--surface-brand-primary);
+                    color: var(--foreground-brand-on-primary);
+                }
+            }
+
+            &:focus {
+                outline: none;
+
+                span[data-active] {
+                    background: var(--interactions-neutral-hover-opacity);
+                    outline: 2px solid var(--interactions-neutral-hover-opacity);
+                    outline-offset: -2px;
+
+                    &[aria-selected] {
+                        background: var(--surface-brand-primary);
+                        color: var(--foreground-brand-on-primary);
+                    }
+                }
+            }
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ToggleOption/ToggleOption.tsx

@@ -1,9 +1,14 @@
 import { ReactElement } from 'react';
+
 import './toggle-option.scss';
+import { CommonProps } from '-/types/common';
+
+export type ToggleOptionControlProps<T extends { 'aria-label'?: string }> = Omit<T, 'aria-label'> &
+    Pick<ToggleOptionProps, 'description' | 'label'>;
 
-export type ToggleOptionProps = {
+export type ToggleOptionProps = CommonProps<'disabled'> & {
     /**
-     * The label of the option. Also used as the aria-label of the checkbox.
+     * The label of the option. Also used as the aria-label of the control.
      *
      * @required
      */
@@ -25,20 +30,14 @@ export type ToggleOptionProps = {
  * @name ToggleOption
  * @phase Utility
  */
-function ToggleOption({ label, description, children }: ToggleOptionProps) {
+export function ToggleOption({ label, description, children, disabled }: ToggleOptionProps) {
     return (
-        <label data-bspk="toggle-option">
+        <label aria-disabled={!!disabled || undefined} data-bspk="toggle-option">
             <span data-control>{children}</span>
-            <span data-content>
-                <span data-label>{label}</span>
-                {description && <span data-description>{description}</span>}
-            </span>
+            <span data-label>{label}</span>
+            {description && <span data-description>{description}</span>}
         </label>
     );
 }
 
-ToggleOption.bspkName = 'ToggleOption';
-
-export { ToggleOption };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */