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

package/dist/index.js

@@ -33083,6 +33083,33 @@ function useDebouncedCallback(callback, delay) {
     return debouncedCallback;
 }
 
+const matches = (query, fallback) => typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia(query).matches
+    : fallback;
+/**
+ * Whether a CSS media query matches, updated when it changes. Returns
+ * `defaultValue` where `matchMedia` does not exist (server rendering, old
+ * test environments).
+ */
+const useMediaQuery = (query, defaultValue = false) => {
+    const [value, setValue] = React.useState(() => matches(query, defaultValue));
+    React.useEffect(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+            return;
+        const list = window.matchMedia(query);
+        const onChange = () => setValue(list.matches);
+        onChange();
+        // Safari < 14 only has addListener.
+        if (list.addEventListener) {
+            list.addEventListener("change", onChange);
+            return () => list.removeEventListener("change", onChange);
+        }
+        list.addListener(onChange);
+        return () => list.removeListener(onChange);
+    }, [query]);
+    return value;
+};
+
 const DEFAULT_TIMEOUT_MS = 180000;
 const DEFAULT_STORAGE_KEY = "ews-idle-lock";
 const ACTIVITY_WRITE_INTERVAL_MS = 5000;
@@ -35502,6 +35529,131 @@ const PinPad = ({ length = 4, onComplete, onChange, disabled = false, invalid =
                             : "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 MASK = "•";
+const onlyDigits = (text) => text.replace(/\D/g, "");
+/**
+ * Row of one-digit boxes for a PIN or a one-time code (desktop keyboards):
+ * typing moves to the next box, Backspace goes back, arrows move, pasting a
+ * code fills the boxes and `onComplete` fires once every box is filled.
+ */
+const PinCodeInput = ({ length = 4, onComplete, onChange, masked = true, autoComplete = "off", autoFocus = true, disabled = false, invalid = false, resetKey, digitLabel, groupLabel, className, }) => {
+    const empty = React.useCallback(() => Array.from({ length }, () => ""), [length]);
+    const [digits, setDigits] = React.useState(empty);
+    const digitsRef = React.useRef(digits);
+    const inputs = React.useRef([]);
+    const focusBox = (index) => {
+        const input = inputs.current[Math.max(0, Math.min(index, length - 1))];
+        input?.focus();
+        input?.select();
+    };
+    const update = (next) => {
+        digitsRef.current = next;
+        setDigits(next);
+        const value = next.join("");
+        onChange?.(value);
+        if (value.length === length && next.every(Boolean))
+            onComplete(value);
+    };
+    /** Writes `chars` from box `start` on and focuses the box after them. */
+    const fill = (start, chars) => {
+        const next = [...digitsRef.current];
+        const written = chars.slice(0, length - start).split("");
+        written.forEach((char, offset) => {
+            next[start + offset] = char;
+        });
+        focusBox(start + written.length);
+        update(next);
+    };
+    // Clear the boxes when the caller asks for it.
+    React.useEffect(() => {
+        const cleared = empty();
+        digitsRef.current = cleared;
+        setDigits(cleared);
+    }, [resetKey, empty]);
+    // Focus the first empty box on mount, after a reset and once re-enabled.
+    React.useEffect(() => {
+        if (!autoFocus || disabled)
+            return;
+        const firstEmpty = digitsRef.current.findIndex((digit) => !digit);
+        focusBox(firstEmpty === -1 ? length - 1 : firstEmpty);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoFocus, disabled, resetKey, length]);
+    const handleChange = (index, event) => {
+        if (disabled)
+            return;
+        const { value, selectionStart } = event.target;
+        const typed = onlyDigits(value);
+        if (!typed) {
+            const next = [...digitsRef.current];
+            next[index] = "";
+            update(next);
+            return;
+        }
+        // A digit typed next to the one already in the box: keep the new one.
+        if (digitsRef.current[index] && value.length === 2) {
+            const inserted = value.charAt((selectionStart ?? value.length) - 1);
+            if (/\d/.test(inserted)) {
+                fill(index, inserted);
+                return;
+            }
+        }
+        // One digit, or a whole code (browser autofill of the one-time code).
+        fill(typed.length >= length ? 0 : index, typed);
+    };
+    const handleKeyDown = (index, event) => {
+        if (disabled)
+            return;
+        switch (event.key) {
+            case "Backspace": {
+                event.preventDefault();
+                const next = [...digitsRef.current];
+                const target = next[index] ? index : Math.max(0, index - 1);
+                next[target] = "";
+                focusBox(target);
+                update(next);
+                return;
+            }
+            case "Delete": {
+                event.preventDefault();
+                const next = [...digitsRef.current];
+                next[index] = "";
+                update(next);
+                return;
+            }
+            case "ArrowLeft":
+                event.preventDefault();
+                focusBox(index - 1);
+                return;
+            case "ArrowRight":
+                event.preventDefault();
+                focusBox(index + 1);
+                return;
+            case "Home":
+                event.preventDefault();
+                focusBox(0);
+                return;
+            case "End":
+                event.preventDefault();
+                focusBox(length - 1);
+                return;
+        }
+    };
+    const handlePaste = (index, event) => {
+        event.preventDefault();
+        if (disabled)
+            return;
+        const pasted = onlyDigits(event.clipboardData.getData("text"));
+        if (!pasted)
+            return;
+        fill(pasted.length >= length ? 0 : index, pasted);
+    };
+    return (
+    // Codes stay left-to-right in RTL locales.
+    jsxRuntime.jsx("div", { dir: "ltr", role: "group", "aria-label": groupLabel, "data-testid": "pin-code-input", className: cn("flex justify-center gap-3", invalid && "animate-pin-shake", className), children: digits.map((digit, index) => (jsxRuntime.jsx("input", { ref: (element) => {
+                inputs.current[index] = element;
+            }, type: "text", inputMode: "numeric", pattern: "[0-9]*", autoComplete: index === 0 ? autoComplete : "off", autoCorrect: "off", spellCheck: false, value: digit && masked ? MASK : digit, disabled: disabled, "aria-label": digitLabel(index + 1, length), "aria-invalid": invalid || undefined, "data-filled": !!digit, onChange: (event) => handleChange(index, event), onKeyDown: (event) => handleKeyDown(index, event), onPaste: (event) => handlePaste(index, event), onFocus: (event) => event.target.select(), className: cn("h-14 w-12 rounded-lg border bg-white text-center text-2xl font-medium text-ews-gray-900 outline-none", "transition-colors focus:border-ews-primary focus:ring-2 focus:ring-ews-primary", "disabled:cursor-not-allowed disabled:opacity-60", invalid ? "border-ews-error" : digit ? "border-ews-primary" : "border-ews-gray-300", disabled && digit && "animate-pulse") }, index))) }));
+};
+
 const FIRST_STEP = {
     create: "new",
     unlock: "unlock",
@@ -35522,14 +35674,19 @@ const titleOf = (mode, step, texts) => {
             return texts.confirmTitle;
     }
 };
+/** Same breakpoint as Tailwind's `sm`. */
+const DESKTOP_QUERY = "(min-width: 640px)";
+/** Open lock screens, oldest first; only the last one traps focus. */
+const trapStack = [];
 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`.
+ * code) the user's secret code. Below 640px: full screen with an on-screen
+ * keypad. From 640px: compact dialog on a grey backdrop with one box per digit,
+ * typed on the keyboard. 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 LockScreen = ({ mode, texts, error, busy = false, onCreate, onUnlock, onChangePin, onReset, onForgot, onCancel, onSignOut, subtitle, 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("");
@@ -35540,6 +35697,7 @@ const LockScreen = ({ mode, texts, error, busy = false, onCreate, onUnlock, onCh
     const [resetKey, setResetKey] = React.useState(0);
     const panelRef = React.useRef(null);
     const mounted = React.useRef(true);
+    const isDesktop = useMediaQuery(DESKTOP_QUERY);
     const restart = React.useCallback((failed) => {
         setStep(FIRST_STEP[mode]);
         setFirstValue("");
@@ -35558,22 +35716,33 @@ const LockScreen = ({ mode, texts, error, busy = false, onCreate, onUnlock, onCh
             mounted.current = false;
         };
     }, []);
-    // Block page scroll and keep focus inside the screen.
+    // Block page scroll and keep focus inside the screen. Only the most recently
+    // mounted lock screen traps focus: two traps pulling focus back to their own
+    // panel would loop forever (e.g. a Storybook docs page rendering every story).
     React.useEffect(() => {
+        const token = {};
+        trapStack.push(token);
         const previousOverflow = document.body.style.overflow;
         document.body.style.overflow = "hidden";
         const previousFocus = document.activeElement;
-        panelRef.current?.focus();
+        // The desktop code boxes focus themselves first.
+        if (!panelRef.current?.contains(document.activeElement))
+            panelRef.current?.focus();
         const keepFocus = (event) => {
+            if (trapStack[trapStack.length - 1] !== token)
+                return;
             const panel = panelRef.current;
             if (panel && !panel.contains(event.target))
                 panel.focus();
         };
         document.addEventListener("focusin", keepFocus);
         return () => {
+            const wasTop = trapStack[trapStack.length - 1] === token;
+            trapStack.splice(trapStack.indexOf(token), 1);
             document.body.style.overflow = previousOverflow;
             document.removeEventListener("focusin", keepFocus);
-            previousFocus?.focus?.();
+            if (wasTop)
+                previousFocus?.focus?.();
         };
     }, []);
     const trapTab = (event) => {
@@ -35654,16 +35823,26 @@ const LockScreen = ({ mode, texts, error, busy = false, onCreate, onUnlock, onCh
         setInvalid(false);
         setStep("new");
     };
+    const completeOtp = (code) => {
+        setLocalError(null);
+        setFirstValue(code);
+        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 digitLabel = texts.digit ?? texts.progress;
+    const desktopContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "pb-5", children: logo ?? jsxRuntime.jsx(Logo, { size: "sm", variant: "normal" }) }), title && (jsxRuntime.jsx("h2", { className: "text-center text-xl font-semibold text-ews-gray-900", children: title })), subtitle && (jsxRuntime.jsx("p", { className: "mt-1 text-center text-sm text-ews-gray-600", children: subtitle })), step === "otp" && texts.otpDescription && (jsxRuntime.jsx("p", { className: "mt-2 text-center text-sm text-ews-gray-600", children: texts.otpDescription })), jsxRuntime.jsx("div", { className: "mt-6", children: step === "otp" ? (jsxRuntime.jsx(PinCodeInput, { length: otpLength, masked: false, autoComplete: "one-time-code", onComplete: completeOtp, onChange: () => setInvalid(false), disabled: isBusy, invalid: invalid, resetKey: resetKey, digitLabel: digitLabel, groupLabel: texts.otpLabel ?? title }, step)) : (jsxRuntime.jsx(PinCodeInput, { length: pinLength, onComplete: handlePin, onChange: () => setInvalid(false), disabled: isBusy, invalid: invalid, resetKey: resetKey, digitLabel: digitLabel, groupLabel: title }, step)) }), jsxRuntime.jsx("p", { role: "alert", className: "mt-3 min-h-[1.25rem] text-center text-sm text-ews-error", children: shownError }), (showForgot || (onCancel && texts.cancel) || (onSignOut && texts.signOut)) && (jsxRuntime.jsxs("div", { className: "mt-4 flex w-full flex-col items-center gap-2 border-t border-ews-gray-200 pt-4", children: [showForgot && (jsxRuntime.jsx("button", { type: "button", onClick: onForgot, disabled: isBusy, className: "text-sm 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 })), onSignOut && texts.signOut && (jsxRuntime.jsx("button", { type: "button", onClick: onSignOut, disabled: isBusy, className: "text-sm text-ews-gray-600 hover:underline focus-visible:underline", children: texts.signOut }))] }))] }));
+    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", isDesktop && "p-4", className), "data-testid": "lock-screen", "data-layout": isDesktop ? "desktop" : "mobile", children: jsxRuntime.jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": texts.dialogLabel, "aria-busy": isBusy, tabIndex: -1, onKeyDown: trapTab, className: isDesktop
+                ? "flex w-full max-w-[400px] flex-col items-center rounded-2xl bg-white px-8 py-8 shadow-xl outline-none"
+                : 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: isDesktop ? (desktopContent) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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", }) => {
@@ -40163,6 +40342,7 @@ exports.PillBottle = PillBottle;
 exports.PillBottleIcon = PillBottle;
 exports.PillIcon = Pill;
 exports.Pin = Pin;
+exports.PinCodeInput = PinCodeInput;
 exports.PinIcon = Pin;
 exports.PinOff = PinOff;
 exports.PinOffIcon = PinOff;
@@ -41341,6 +41521,7 @@ exports.parseDateSafe = parseDateSafe;
 exports.useDebounce = useDebounce;
 exports.useDebouncedCallback = useDebouncedCallback;
 exports.useIdleLock = useIdleLock;
+exports.useMediaQuery = useMediaQuery;
 exports.useSelectField = useSelectField;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map