@evolve.ui/core-components 1.0.1 → 1.1.0

package/src/DateTimeInput/timePicker/TimePicker.tsx

@@ -0,0 +1,118 @@
+import {
+    autoUpdate,
+    flip,
+    FloatingPortal,
+    offset,
+    shift,
+    useDismiss,
+    useFloating,
+    useInteractions,
+    useMergeRefs,
+    useRole,
+} from '@floating-ui/react';
+import { ComponentProps, forwardRef, useCallback, useEffect, useState } from 'react';
+
+import { IconButton } from '../../IconButton/IconButton';
+import { Clock } from '../../Icons';
+import { TimePickerTargetId } from '../../providers/targets/TimePickerTarget';
+import { TimeInput } from '../timeInput/TimeInput';
+import { TimePopover } from './components/TimePopover/TimePopover';
+
+type Props = {
+    is24hour?: boolean;
+    zIndex?: number;
+} & Partial<ComponentProps<typeof TimeInput>>;
+
+export const TimePicker = forwardRef<HTMLInputElement, Props>(
+    ({ disabled, is24hour, onClear, onValidTimeChange, time: timeProp, zIndex = 15, ...props }, ref) => {
+        const [time, setTime] = useState<Date | undefined>(timeProp);
+        useEffect(() => {
+            setTime(timeProp);
+        }, [timeProp]);
+
+        const handleOnClear = useCallback(() => {
+            setTime(undefined);
+            onClear?.();
+        }, [onClear, setTime]);
+
+        // #region floating-ui
+        const [isOpen, setIsOpen] = useState(false);
+        const middleware = [
+            shift(),
+            offset({
+                crossAxis: -8,
+                mainAxis: 12,
+            }),
+            flip(),
+        ];
+        const { context, floatingStyles, refs } = useFloating({
+            middleware: middleware,
+            onOpenChange: setIsOpen,
+            open: isOpen,
+            placement: 'bottom-start',
+            whileElementsMounted: autoUpdate,
+        });
+        // Closes the floating element when a dismissal is requested — by default, when the user presses the escape key or outside of the floating element.
+        const dismiss = useDismiss(context);
+        // Adds the correct ARIA attributes for a dialog to the popover and reference elements
+        const role = useRole(context);
+        // A hook to merge or compose interaction event handlers together, preserving memoization.
+        const { getFloatingProps, getReferenceProps } = useInteractions([dismiss, role]);
+        // Merges an array of refs, returning a memoized callback ref or null.
+        const mergedRef = useMergeRefs([ref, refs.setReference]);
+        // #endregion floating-ui
+
+        const handleOnSetTime = useCallback(
+            (time: Date | undefined) => {
+                setTime(time);
+                onValidTimeChange?.(time);
+            },
+            [onValidTimeChange]
+        );
+
+        return (
+            <>
+                <TimeInput
+                    clearAriaLabel="Clear time"
+                    disabled={disabled}
+                    onClear={handleOnClear}
+                    onValidTimeChange={handleOnSetTime}
+                    ref={mergedRef}
+                    suffix={
+                        <IconButton
+                            aria-label="Open Time Picker"
+                            className="!rounded-button"
+                            data-testid="open-time-picker-button"
+                            disabled={disabled}
+                            icon={Clock}
+                            onClick={() => setIsOpen(!isOpen)}
+                            size="sm"
+                            type="button"
+                        />
+                    }
+                    time={time}
+                    {...getReferenceProps()}
+                    {...props}
+                />
+                {isOpen && (
+                    <FloatingPortal id={TimePickerTargetId}>
+                        <div
+                            className="cursor-default rounded-container border border-border-secondary bg-background-primary shadow-02"
+                            data-testid="time-picker-popover"
+                            ref={refs.setFloating}
+                            style={{ ...floatingStyles, zIndex }}
+                            {...getFloatingProps()}
+                        >
+                            <TimePopover
+                                is24Hour={is24hour}
+                                onClose={() => setIsOpen(false)}
+                                onSetValidTime={handleOnSetTime}
+                                time={time}
+                            />
+                        </div>
+                    </FloatingPortal>
+                )}
+            </>
+        );
+    }
+);

package/src/DateTimeInput/timePicker/components/TimePopover/AmPmSwitch.tsx

@@ -0,0 +1,103 @@
+import { cn } from '@evolve.ui/theme-system';
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+
+import { BodyPrimary, H5 } from '../../../../Typography/Text/Text';
+
+type Props = {
+    isAM: boolean;
+    isVisible: boolean;
+    onChange: (isAM: boolean) => void;
+};
+
+export const AmPmSwitch = ({ isAM, isVisible, onChange }: Props) => {
+    const [isAnimating, setIsAnimating] = useState<boolean>(false);
+    const amRef = useRef<HTMLDivElement>(null);
+    const pmRef = useRef<HTMLDivElement>(null);
+    const backgroundRef = useRef<HTMLDivElement>(null);
+
+    const [style, setStyle] = useState<Record<string, string>>({
+        height: '0px',
+        left: '0px',
+        top: '0px',
+        width: '0px',
+    });
+
+    useEffect(() => {
+        if (backgroundRef.current && amRef.current && pmRef.current) {
+            const selectedRef = isAM ? amRef : pmRef;
+
+            if (selectedRef.current) {
+                const { clientHeight, clientWidth, offsetLeft, offsetTop } = selectedRef.current;
+                setStyle({
+                    height: `${clientHeight}px`,
+                    left: `${offsetLeft}px`,
+                    top: `${offsetTop}px`,
+                    width: `${clientWidth}px`,
+                });
+            }
+        }
+    }, [isAM]);
+
+    if (!isVisible) {
+        return null;
+    }
+
+    const handleAmKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            onChange(true);
+            setIsAnimating(true);
+        }
+    };
+
+    const handlePmKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            onChange(false);
+            setIsAnimating(true);
+        }
+    };
+
+    return (
+        <div
+            className="relative flex cursor-pointer self-end rounded-input border border-border-secondary bg-background-disabled p-[1px]"
+            data-testid="ampm-switch"
+        >
+            <div
+                className={cn('pointer-events-none absolute rounded-input bg-background-primary', {
+                    'transition-all duration-[400ms] ease-in-out': isAnimating,
+                })}
+                data-testid="ampm-switch-background"
+                onAnimationEnd={() => {
+                    setIsAnimating(false);
+                }}
+                ref={backgroundRef}
+                style={style}
+            />
+            <div
+                className="z-[1] flex h-[30px] select-none items-center rounded-input px-sm"
+                onClick={() => {
+                    onChange(true);
+                    setIsAnimating(true);
+                }}
+                onKeyDown={handleAmKeyDown}
+                ref={amRef}
+                role="button"
+                tabIndex={0}
+            >
+                {isAM ? <H5>AM</H5> : <BodyPrimary>AM</BodyPrimary>}
+            </div>
+            <div
+                className="z-[1] flex h-[30px] select-none items-center rounded-input px-sm"
+                onClick={() => {
+                    onChange(false);
+                    setIsAnimating(true);
+                }}
+                onKeyDown={handlePmKeyDown}
+                ref={pmRef}
+                role="button"
+                tabIndex={0}
+            >
+                {isAM ? <BodyPrimary>PM</BodyPrimary> : <H5>PM</H5>}
+            </div>
+        </div>
+    );
+};

package/src/DateTimeInput/timePicker/components/TimePopover/TimeFieldInput.tsx

@@ -0,0 +1,26 @@
+import { TextInput } from '../../../../TextInput/TextInput';
+
+type Props = {
+    labelText: string;
+    onValueChange: (value: string) => void;
+    testId: string;
+    value: string;
+};
+
+export const TimeFieldInput = ({ labelText, onValueChange, testId, value }: Props) => {
+    return (
+        <TextInput
+            className="max-w-[75px]"
+            data-testid={testId}
+            labelText={labelText}
+            onChange={({ currentTarget }) => {
+                if (!isNaN(Number(currentTarget.value))) {
+                    onValueChange(currentTarget.value);
+                }
+            }}
+            placeholder={labelText === 'Hour' ? 'HH' : 'MM'}
+            small
+            value={value}
+        />
+    );
+};

package/src/DateTimeInput/timePicker/components/TimePopover/TimePopover.tsx

@@ -0,0 +1,84 @@
+import { useCallback, useState } from 'react';
+
+import { AmPmSwitch } from './AmPmSwitch';
+import { TimeFieldInput } from './TimeFieldInput';
+import { createSelectedTime, getDisplayHours, useEnterKeyHandlers } from './TimePopover.utils';
+import { TimePopoverActions } from './TimePopoverActions';
+
+type Props = {
+    /**
+     * Whether the input is in 24-hour format
+     */
+    is24Hour?: boolean;
+    /**
+     * Fires when the popover is closed
+     */
+    onClose?: () => void;
+    /**
+     * Fires when a valid time is set
+     */
+    onSetValidTime?: (time: Date | undefined) => void;
+    /**
+     * This is the time that will be displayed in HH:MM (AM/PM) format
+     */
+    time?: Date;
+};
+
+export const TimePopover = ({ is24Hour = false, onClose, onSetValidTime, time: timeProp }: Props) => {
+    const [time, setTime] = useState<Date | undefined>(timeProp);
+    const hours = getDisplayHours(timeProp, is24Hour);
+    const [hour, setHour] = useState<string>(hours?.toString().padStart(2, '0') ?? '');
+    const [minute, setMinute] = useState<string>(timeProp?.getMinutes().toString().padStart(2, '0') ?? '');
+    const [isAM, setIsAM] = useState<boolean>((timeProp?.getHours() ?? 0) < 12);
+
+    const handleReset = useCallback(() => {
+        setTime(undefined);
+        setHour('');
+        setMinute('');
+        setIsAM(true);
+        onSetValidTime?.(undefined);
+    }, [onSetValidTime]);
+
+    const handleDone = useCallback(() => {
+        const newTime = createSelectedTime(hour, minute, is24Hour, isAM, time);
+
+        if (newTime !== undefined) {
+            onSetValidTime?.(newTime);
+        }
+
+        onClose?.();
+    }, [hour, is24Hour, isAM, minute, onClose, onSetValidTime, time]);
+
+    useEnterKeyHandlers(handleDone, handleReset);
+
+    return (
+        <div className="flex flex-col">
+            <div className="flex flex-row gap-xs p-md">
+                <div className="flex flex-row items-end gap-xs">
+                    <TimeFieldInput
+                        labelText="Hour"
+                        onValueChange={setHour}
+                        testId="time-input-hour"
+                        value={hour}
+                    />
+                    <span className="pb-[6px]">:</span>
+                    <TimeFieldInput
+                        labelText="Minute"
+                        onValueChange={setMinute}
+                        testId="time-input-minute"
+                        value={minute}
+                    />
+                </div>
+                <AmPmSwitch
+                    isAM={isAM}
+                    isVisible={!is24Hour}
+                    onChange={setIsAM}
+                />
+            </div>
+            <TimePopoverActions
+                onDone={handleDone}
+                onReset={handleReset}
+            />
+        </div>
+    );
+};

package/src/DateTimeInput/timePicker/components/TimePopover/TimePopover.utils.ts

@@ -0,0 +1,67 @@
+import { useEffect } from 'react';
+
+import { effectEventListener } from '../../../../utils/effectEventListener';
+import { createDateWithParsedTime, parseTimeValue } from '../../../utils/parseTimeValue';
+
+const HOURS_IN_A_DAY = 24;
+const HOURS_IN_AM_PM_CLOCK = 12;
+const MIDNIGHT_ON_AM_PM_CLOCK = 12;
+
+export const convertTo12Hours = (hours: number) => {
+    return (hours + HOURS_IN_A_DAY) % HOURS_IN_AM_PM_CLOCK || MIDNIGHT_ON_AM_PM_CLOCK;
+};
+
+export const getDisplayHours = (time: Date | undefined, is24Hour: boolean) => {
+    const hours = time?.getHours();
+
+    if (!is24Hour && hours !== undefined) {
+        return convertTo12Hours(hours);
+    }
+
+    return hours;
+};
+
+export const createSelectedTime = (
+    hour: string,
+    minute: string,
+    is24Hour: boolean,
+    isAM: boolean,
+    time: Date | undefined
+) => {
+    if (!hour || !minute) {
+        return undefined;
+    }
+
+    let meridiem = '';
+    if (!is24Hour) {
+        meridiem = isAM ? 'AM' : 'PM';
+    }
+
+    const parsedTime = parseTimeValue(`${hour}:${minute} ${meridiem}`.trim());
+
+    return createDateWithParsedTime(parsedTime, time);
+};
+
+export const getEnterKeyAction = (event: Event) => {
+    if ((event as KeyboardEvent).key !== 'Enter') {
+        return undefined;
+    }
+
+    return (event.target as HTMLElement).getAttribute('data-testid') === 'time-picker-reset-button' ? 'reset' : 'done';
+};
+
+export const useEnterKeyHandlers = (handleDone: () => void, handleReset: () => void) => {
+    useEffect(() => {
+        return effectEventListener(window, 'keydown', (event) => {
+            const action = getEnterKeyAction(event);
+
+            if (action === 'reset') {
+                handleReset();
+            }
+
+            if (action === 'done') {
+                handleDone();
+            }
+        });
+    }, [handleDone, handleReset]);
+};

package/src/DateTimeInput/timePicker/components/TimePopover/TimePopoverActions.tsx

@@ -0,0 +1,26 @@
+import { Button } from '../../../../Button/Button';
+
+type Props = {
+    onDone: () => void;
+    onReset: () => void;
+};
+
+export const TimePopoverActions = ({ onDone, onReset }: Props) => {
+    return (
+        <div className="flex justify-end gap-sm border-t border-border-secondary p-md">
+            <Button
+                data-testid="time-picker-reset-button"
+                onClick={onReset}
+                variant="transparent"
+            >
+                Reset
+            </Button>
+            <Button
+                data-testid="time-picker-done-button"
+                onClick={onDone}
+            >
+                Done
+            </Button>
+        </div>
+    );
+};

package/src/DateTimeInput/timePicker/index.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker';
+export { TimePickerTarget } from '../../providers/targets/TimePickerTarget';

package/src/DateTimeInput/utils/getDisplayDate.ts

@@ -0,0 +1,15 @@
+// localize date format
+export const getDisplayDate = (date: Date): string => {
+    // Local deviation from hammer: guard against an Invalid Date. `Intl.DateTimeFormat.format`
+    // throws a RangeError on one, so an unguarded call crashes any caller that receives an
+    // invalid value (e.g. a consumer passing `new Date(badInput)` straight into the `date` prop).
+    if (Number.isNaN(date.getTime())) {
+        return '';
+    }
+
+    return new Intl.DateTimeFormat(navigator.language, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    }).format(date);
+};

package/src/DateTimeInput/utils/getDisplayTime.ts

@@ -0,0 +1,15 @@
+// localize time format
+export const getDisplayTime = (time: Date, is24hour: boolean): string => {
+    // Local deviation from hammer: guard against an Invalid Date. `Intl.DateTimeFormat.format`
+    // throws a RangeError on one, which would otherwise crash TimeInput at render (its
+    // useState initializer calls this before the effect's Invalid-Date guard can run).
+    if (Number.isNaN(time.getTime())) {
+        return '';
+    }
+
+    return new Intl.DateTimeFormat(navigator.language, {
+        hour: 'numeric',
+        hour12: !is24hour,
+        minute: 'numeric',
+    }).format(time);
+};

package/src/DateTimeInput/utils/index.ts

@@ -0,0 +1,2 @@
+export { getDisplayDate } from './getDisplayDate';
+export { getDisplayTime } from './getDisplayTime';

package/src/DateTimeInput/utils/parseTimeValue.ts

@@ -0,0 +1,54 @@
+import { isValid, parse } from 'date-fns';
+
+export type ParsedTimeValue = {
+    hours: number;
+    minutes: number;
+};
+
+const normalize = (value: string) =>
+    value
+        .replace(/\s*:\s*/g, ':')
+        .replace(/(\d)(am|pm)/gi, '$1 $2')
+        .replace(/\s+/g, ' ')
+        .trim();
+
+/**
+ * Parses supported time input formats without relying on browser-specific Date string parsing.
+ * Accepts 12-hour (e.g. "6:00 PM", "6:00PM") and 24-hour (e.g. "14:30") formats, with lenient whitespace.
+ * @param value - User-entered time value.
+ * @returns Local 24-hour time parts, or undefined when the value is unsupported.
+ */
+export const parseTimeValue = (value: string): ParsedTimeValue | undefined => {
+    const normalized = normalize(value);
+
+    const date12 = parse(normalized, 'h:mm a', new Date());
+    if (isValid(date12)) {
+        return { hours: date12.getHours(), minutes: date12.getMinutes() };
+    }
+
+    const date24 = parse(normalized, 'HH:mm', new Date());
+    if (isValid(date24)) {
+        return { hours: date24.getHours(), minutes: date24.getMinutes() };
+    }
+
+    return undefined;
+};
+
+/**
+ * Creates a local Date from parsed time parts and an optional base date.
+ * Returns undefined when parsedTime is undefined.
+ * @param parsedTime - Parsed 24-hour time parts, or undefined.
+ * @param baseDate - Date whose local calendar day should be preserved.
+ * @returns A Date on the base date with the parsed local time, or undefined.
+ */
+export function createDateWithParsedTime(parsedTime: ParsedTimeValue, baseDate?: Date): Date;
+export function createDateWithParsedTime(parsedTime: ParsedTimeValue | undefined, baseDate?: Date): Date | undefined;
+export function createDateWithParsedTime(parsedTime: ParsedTimeValue | undefined, baseDate?: Date): Date | undefined {
+    if (!parsedTime) {
+        return parsedTime;
+    }
+
+    const base = baseDate ?? new Date();
+
+    return new Date(base.getFullYear(), base.getMonth(), base.getDate(), parsedTime.hours, parsedTime.minutes);
+}