@ews-admin/global-design-system 1.29.0 → 1.30.0

package/dist/index.js

@@ -33083,6 +33083,155 @@ function useDebouncedCallback(callback, delay) {
     return debouncedCallback;
 }
 
+const DEFAULT_TIMEOUT_MS = 180000;
+const DEFAULT_STORAGE_KEY = "ews-idle-lock";
+const ACTIVITY_WRITE_INTERVAL_MS = 5000;
+const ACTIVITY_EVENTS = [
+    "pointerdown",
+    "pointermove",
+    "keydown",
+    "wheel",
+    "scroll",
+    "touchstart",
+];
+const readStorage = (key) => {
+    try {
+        return typeof window === "undefined" ? null : window.localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+};
+const writeStorage = (key, value) => {
+    try {
+        if (typeof window === "undefined")
+            return;
+        if (value === null)
+            window.localStorage.removeItem(key);
+        else
+            window.localStorage.setItem(key, value);
+    }
+    catch {
+        // Storage unavailable (private mode, quota): the lock still works in this tab.
+    }
+};
+/**
+ * Locks the screen after `timeoutMs` without user activity. The locked flag is
+ * kept in localStorage (it survives a reload) and shared between tabs through
+ * a BroadcastChannel, or the `storage` event where BroadcastChannel is missing:
+ * locking or unlocking one tab does the same in every tab. Activity in any tab
+ * keeps every tab unlocked.
+ */
+function useIdleLock({ timeoutMs = DEFAULT_TIMEOUT_MS, onLock, storageKey = DEFAULT_STORAGE_KEY, enabled = true, } = {}) {
+    const activityKey = `${storageKey}:activity`;
+    const [locked, setLocked] = React.useState(() => readStorage(storageKey) === "1");
+    const lockedRef = React.useRef(locked);
+    const onLockRef = React.useRef(onLock);
+    const lastActivity = React.useRef(Date.now());
+    const lastActivityWrite = React.useRef(0);
+    const channelRef = React.useRef(null);
+    React.useEffect(() => {
+        onLockRef.current = onLock;
+    }, [onLock]);
+    const markActivity = React.useCallback((now) => {
+        lastActivity.current = now;
+        if (now - lastActivityWrite.current >= ACTIVITY_WRITE_INTERVAL_MS) {
+            lastActivityWrite.current = now;
+            writeStorage(activityKey, String(now));
+        }
+    }, [activityKey]);
+    const applyLocked = React.useCallback((next) => {
+        if (lockedRef.current === next)
+            return;
+        lockedRef.current = next;
+        setLocked(next);
+        if (next)
+            onLockRef.current?.();
+    }, []);
+    const lock = React.useCallback(() => {
+        if (lockedRef.current)
+            return;
+        writeStorage(storageKey, "1");
+        channelRef.current?.postMessage("lock");
+        applyLocked(true);
+    }, [storageKey, applyLocked]);
+    const unlock = React.useCallback(() => {
+        lastActivityWrite.current = 0;
+        markActivity(Date.now());
+        writeStorage(storageKey, null);
+        channelRef.current?.postMessage("unlock");
+        applyLocked(false);
+    }, [storageKey, applyLocked, markActivity]);
+    // Cross-tab sync.
+    React.useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const onRemote = (nextLocked) => {
+            if (!nextLocked)
+                lastActivity.current = Date.now();
+            applyLocked(nextLocked);
+        };
+        if (typeof window.BroadcastChannel === "function") {
+            const channel = new window.BroadcastChannel(storageKey);
+            channelRef.current = channel;
+            channel.onmessage = (event) => {
+                if (event.data === "lock")
+                    onRemote(true);
+                else if (event.data === "unlock")
+                    onRemote(false);
+            };
+            return () => {
+                channelRef.current = null;
+                channel.close();
+            };
+        }
+        const onStorage = (event) => {
+            if (event.key !== storageKey)
+                return;
+            onRemote(event.newValue === "1");
+        };
+        window.addEventListener("storage", onStorage);
+        return () => window.removeEventListener("storage", onStorage);
+    }, [storageKey, applyLocked]);
+    // Inactivity timer.
+    React.useEffect(() => {
+        if (!enabled || locked || typeof window === "undefined")
+            return;
+        lastActivity.current = Date.now();
+        let timer;
+        const idleFor = () => {
+            const shared = Number(readStorage(activityKey)) || 0;
+            return Date.now() - Math.max(lastActivity.current, shared);
+        };
+        const check = () => {
+            const idle = idleFor();
+            if (idle >= timeoutMs)
+                lock();
+            else
+                timer = setTimeout(check, timeoutMs - idle);
+        };
+        const onActivity = () => markActivity(Date.now());
+        // Timers are throttled in background tabs: check the delay on return.
+        const onVisibility = () => {
+            if (document.visibilityState !== "visible")
+                return;
+            if (idleFor() >= timeoutMs)
+                lock();
+            else
+                onActivity();
+        };
+        timer = setTimeout(check, timeoutMs);
+        ACTIVITY_EVENTS.forEach((name) => document.addEventListener(name, onActivity, { capture: true, passive: true }));
+        document.addEventListener("visibilitychange", onVisibility);
+        return () => {
+            clearTimeout(timer);
+            ACTIVITY_EVENTS.forEach((name) => document.removeEventListener(name, onActivity, { capture: true }));
+            document.removeEventListener("visibilitychange", onVisibility);
+        };
+    }, [enabled, locked, timeoutMs, activityKey, lock, markActivity]);
+    return { locked, lock, unlock };
+}
+
 function useSelectField({ name, control, options: _options, rules, defaultValue, }) {
     const { field, fieldState: { error, invalid }, } = reactHookForm.useController({
         name,
@@ -35292,6 +35441,231 @@ const PaymentDueBanner = ({ title, subtitle, warning, ctaLabel, onCtaClick, onDi
  */
 const SecureLoader = ({ label, description }) => (jsxRuntime.jsx("div", { "data-testid": "secure-loader", className: "flex min-h-screen items-center justify-center bg-gray-100", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center rounded-lg bg-white p-6 shadow-lg", children: [jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Lock, { className: "h-16 w-16 text-gray-500" }), jsxRuntime.jsx("div", { className: "absolute bottom-2 right-1 h-6 w-6 animate-spin rounded-full border-4 border-gray-300 border-t-green-500" })] }), jsxRuntime.jsx("p", { className: "mt-4 text-lg text-gray-600", children: label }), description && (jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500", children: description }))] }) }));
 
+const DIGIT_ROWS = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+const keyClass = "flex h-16 w-16 items-center justify-center justify-self-center rounded-full text-3xl font-light text-ews-gray-900 " +
+    "transition-colors hover:bg-ews-gray-100 active:bg-ews-gray-200 " +
+    "focus-visible:ring-2 focus-visible:ring-ews-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent";
+/**
+ * iOS-style PIN entry: a row of dots filled as digits are typed and a 3x4
+ * keypad. Texts are provided by the caller (already translated).
+ */
+const PinPad = ({ length = 4, onComplete, onChange, disabled = false, invalid = false, resetKey, captureKeyboard = true, eraseLabel, progressLabel, keypadLabel, className, }) => {
+    const [value, setValue] = React.useState("");
+    const valueRef = React.useRef("");
+    const update = React.useCallback((next) => {
+        valueRef.current = next;
+        setValue(next);
+        onChange?.(next);
+        if (next.length === length)
+            onComplete(next);
+    }, [length, onChange, onComplete]);
+    // Clear the typed digits when the caller asks for it.
+    React.useEffect(() => {
+        valueRef.current = "";
+        setValue("");
+    }, [resetKey]);
+    const press = React.useCallback((digit) => {
+        if (disabled || valueRef.current.length >= length)
+            return;
+        update(valueRef.current + digit);
+    }, [disabled, length, update]);
+    const erase = React.useCallback(() => {
+        if (disabled || valueRef.current.length === 0)
+            return;
+        update(valueRef.current.slice(0, -1));
+    }, [disabled, update]);
+    React.useEffect(() => {
+        if (!captureKeyboard)
+            return;
+        const onKeyDown = (event) => {
+            if (event.ctrlKey || event.metaKey || event.altKey)
+                return;
+            const target = event.target;
+            if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA"))
+                return;
+            if (/^[0-9]$/.test(event.key)) {
+                event.preventDefault();
+                press(event.key);
+            }
+            else if (event.key === "Backspace") {
+                event.preventDefault();
+                erase();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [captureKeyboard, press, erase]);
+    return (jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-10", className), children: [jsxRuntime.jsx("div", { dir: "ltr", "aria-hidden": "true", "data-testid": "pin-dots", className: cn("flex gap-5", invalid && "animate-pin-shake"), children: Array.from({ length }, (_, index) => (jsxRuntime.jsx("span", { "data-filled": index < value.length, className: cn("h-3.5 w-3.5 rounded-full transition-colors", invalid
+                        ? "bg-ews-error"
+                        : index < value.length
+                            ? "bg-ews-primary"
+                            : "bg-ews-primary-light", disabled && index < value.length && "animate-pulse") }, index))) }), jsxRuntime.jsx("p", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: progressLabel(value.length, length) }), jsxRuntime.jsxs("div", { dir: "ltr", role: "group", "aria-label": keypadLabel, className: "grid grid-cols-3 gap-x-8 gap-y-4", children: [DIGIT_ROWS.map((digit) => (jsxRuntime.jsx("button", { type: "button", className: keyClass, disabled: disabled, onClick: () => press(digit), children: digit }, digit))), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("button", { type: "button", className: keyClass, disabled: disabled, onClick: () => press("0"), children: "0" }), jsxRuntime.jsx("button", { type: "button", className: cn(keyClass, "text-ews-gray-700"), disabled: disabled || value.length === 0, "aria-label": eraseLabel, onClick: erase, children: jsxRuntime.jsx(Delete, { className: "h-7 w-7", strokeWidth: 1.5, "aria-hidden": "true" }) })] })] }));
+};
+
+const FIRST_STEP = {
+    create: "new",
+    unlock: "unlock",
+    change: "current",
+    reset: "otp",
+};
+const titleOf = (mode, step, texts) => {
+    switch (step) {
+        case "unlock":
+            return texts.unlockTitle;
+        case "current":
+            return texts.currentTitle;
+        case "otp":
+            return texts.otpTitle;
+        case "new":
+            return mode === "create" ? texts.createTitle : texts.newTitle;
+        case "confirm":
+            return texts.confirmTitle;
+    }
+};
+const FOCUSABLE = 'button:not([disabled]), input:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
+/**
+ * Blocking PIN screen: creates, checks, changes or resets (with a one-time
+ * code) the user's secret code. Full screen on mobile, centered card on a grey
+ * backdrop from 640px. Submit handlers return promises: a rejection clears the
+ * code and goes back to the first step, the app shows its message in `error`.
+ */
+const LockScreen = ({ mode, texts, error, busy = false, onCreate, onUnlock, onChangePin, onReset, onForgot, onCancel, pinLength = 4, otpLength = 6, logo, className, }) => {
+    const [step, setStep] = React.useState(FIRST_STEP[mode]);
+    const [firstValue, setFirstValue] = React.useState(""); // current PIN or one-time code
+    const [newPin, setNewPin] = React.useState("");
+    const [otp, setOtp] = React.useState("");
+    const [localError, setLocalError] = React.useState(null);
+    const [invalid, setInvalid] = React.useState(false);
+    const [pending, setPending] = React.useState(false);
+    const [resetKey, setResetKey] = React.useState(0);
+    const panelRef = React.useRef(null);
+    const mounted = React.useRef(true);
+    const restart = React.useCallback((failed) => {
+        setStep(FIRST_STEP[mode]);
+        setFirstValue("");
+        setNewPin("");
+        setOtp("");
+        setInvalid(failed);
+        setResetKey((key) => key + 1);
+    }, [mode]);
+    React.useEffect(() => {
+        restart(false);
+        setLocalError(null);
+    }, [restart]);
+    React.useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    // Block page scroll and keep focus inside the screen.
+    React.useEffect(() => {
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        const previousFocus = document.activeElement;
+        panelRef.current?.focus();
+        const keepFocus = (event) => {
+            const panel = panelRef.current;
+            if (panel && !panel.contains(event.target))
+                panel.focus();
+        };
+        document.addEventListener("focusin", keepFocus);
+        return () => {
+            document.body.style.overflow = previousOverflow;
+            document.removeEventListener("focusin", keepFocus);
+            previousFocus?.focus?.();
+        };
+    }, []);
+    const trapTab = (event) => {
+        if (event.key !== "Tab" || !panelRef.current)
+            return;
+        const items = Array.from(panelRef.current.querySelectorAll(FOCUSABLE));
+        if (items.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && (active === first || active === panelRef.current)) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    const submit = async (call) => {
+        if (!call)
+            return;
+        setPending(true);
+        try {
+            await call();
+            if (mounted.current)
+                restart(false);
+        }
+        catch {
+            if (mounted.current)
+                restart(true);
+        }
+        finally {
+            if (mounted.current)
+                setPending(false);
+        }
+    };
+    const handlePin = (pin) => {
+        setLocalError(null);
+        switch (step) {
+            case "unlock":
+                void submit(onUnlock && (() => onUnlock(pin)));
+                return;
+            case "current":
+                setFirstValue(pin);
+                setStep("new");
+                return;
+            case "new":
+                setNewPin(pin);
+                setStep("confirm");
+                return;
+            case "confirm":
+                if (pin !== newPin) {
+                    setLocalError(texts.mismatchError);
+                    setInvalid(true);
+                    setNewPin("");
+                    setStep("new");
+                    setResetKey((key) => key + 1);
+                    return;
+                }
+                if (mode === "create")
+                    void submit(onCreate && (() => onCreate(pin)));
+                else if (mode === "change")
+                    void submit(onChangePin && (() => onChangePin(firstValue, pin)));
+                else if (mode === "reset")
+                    void submit(onReset && (() => onReset(firstValue, pin)));
+                return;
+        }
+    };
+    const submitOtp = (event) => {
+        event.preventDefault();
+        if (otp.length !== otpLength)
+            return;
+        setFirstValue(otp);
+        setInvalid(false);
+        setStep("new");
+    };
+    const isBusy = busy || pending;
+    const shownError = localError ?? error;
+    const showForgot = !!onForgot &&
+        !!texts.forgot &&
+        (step === "unlock" || step === "current");
+    const title = titleOf(mode, step, texts);
+    return (jsxRuntime.jsx("div", { className: cn("fixed inset-0 z-[1000] flex justify-center overflow-y-auto bg-white", "sm:items-center sm:bg-ews-gray-900/50 sm:backdrop-blur-sm", className), "data-testid": "lock-screen", children: jsxRuntime.jsxs("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": texts.dialogLabel, "aria-busy": isBusy, tabIndex: -1, onKeyDown: trapTab, className: cn("flex min-h-full w-full flex-col items-center px-6 pb-8 outline-none", "sm:min-h-0 sm:w-auto sm:min-w-[22rem] sm:rounded-2xl sm:bg-white sm:px-10 sm:py-10 sm:shadow-xl"), children: [jsxRuntime.jsx("div", { className: "flex min-h-[33vh] shrink-0 items-center justify-center sm:min-h-0 sm:pb-8", children: logo ?? jsxRuntime.jsx(Logo, { size: "lg", variant: "normal" }) }), title && (jsxRuntime.jsx("h2", { className: "mb-8 text-center text-lg font-normal text-ews-gray-900", children: title })), step === "otp" ? (jsxRuntime.jsxs("form", { onSubmit: submitOtp, className: "flex w-full max-w-xs flex-col items-center gap-4", children: [texts.otpDescription && (jsxRuntime.jsx("p", { className: "text-center text-sm text-ews-gray-600", children: texts.otpDescription })), jsxRuntime.jsx("label", { className: "sr-only", htmlFor: "lock-screen-otp", children: texts.otpLabel }), jsxRuntime.jsx("input", { id: "lock-screen-otp", dir: "ltr", inputMode: "numeric", autoComplete: "one-time-code", maxLength: otpLength, value: otp, disabled: isBusy, "aria-label": texts.otpLabel, "aria-invalid": invalid || undefined, onChange: (event) => {
+                                setOtp(event.target.value.replace(/\D/g, "").slice(0, otpLength));
+                                setInvalid(false);
+                            }, className: cn("w-full rounded-lg border bg-white px-4 py-3 text-center text-2xl tracking-[0.5em]", "focus:border-ews-primary focus:ring-2 focus:ring-ews-primary", invalid ? "border-ews-error" : "border-ews-gray-300") }), jsxRuntime.jsx(Button, { type: "submit", variant: "ews-primary", fullWidth: true, disabled: otp.length !== otpLength || isBusy, children: texts.otpSubmit })] })) : (jsxRuntime.jsx(PinPad, { length: pinLength, onComplete: handlePin, onChange: () => setInvalid(false), disabled: isBusy, invalid: invalid, resetKey: resetKey, eraseLabel: texts.erase, progressLabel: texts.progress, keypadLabel: texts.keypad }, step)), jsxRuntime.jsx("p", { role: "alert", className: "mt-6 min-h-[1.25rem] text-center text-sm text-ews-error", children: shownError }), jsxRuntime.jsxs("div", { className: "mt-auto flex flex-col items-center gap-3 pt-6 sm:mt-4", children: [showForgot && (jsxRuntime.jsx("button", { type: "button", onClick: onForgot, disabled: isBusy, className: "text-base font-medium text-ews-primary hover:underline focus-visible:underline", children: texts.forgot })), onCancel && texts.cancel && (jsxRuntime.jsx("button", { type: "button", onClick: onCancel, disabled: isBusy, className: "text-sm text-ews-gray-600 hover:underline focus-visible:underline", children: texts.cancel }))] })] }) }));
+};
+
 const SpecialtySearchAutocomplete = ({ selectedSpecialties = [], onSpecialtiesChange, specialties: availableSpecialties, placeholder = "Search and select medical specialties...", className = "", disabled = false, maxSelections, showSelectedCount = true, title = "Medical Specialties", label = "Select Specialties", getSelectedCountText, removeSpecialtyLabel = "Remove specialty", }) => {
     const [filteredSpecialties, setFilteredSpecialties] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -37406,6 +37780,7 @@ exports.LockKeyholeOpen = LockKeyholeOpen;
 exports.LockKeyholeOpenIcon = LockKeyholeOpen;
 exports.LockOpen = LockOpen;
 exports.LockOpenIcon = LockOpen;
+exports.LockScreen = LockScreen;
 exports.LogIn = LogIn;
 exports.LogInIcon = LogIn;
 exports.LogOut = LogOut;
@@ -39791,6 +40166,7 @@ exports.Pin = Pin;
 exports.PinIcon = Pin;
 exports.PinOff = PinOff;
 exports.PinOffIcon = PinOff;
+exports.PinPad = PinPad;
 exports.Pipette = Pipette;
 exports.PipetteIcon = Pipette;
 exports.Pizza = Pizza;
@@ -40964,6 +41340,7 @@ exports.isValidPhoneNumber = isValidPhoneNumber;
 exports.parseDateSafe = parseDateSafe;
 exports.useDebounce = useDebounce;
 exports.useDebouncedCallback = useDebouncedCallback;
+exports.useIdleLock = useIdleLock;
 exports.useSelectField = useSelectField;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map