@wtfalch/design 0.1.0

package/dist/hooks/useTrapFocus.js

@@ -0,0 +1,67 @@
+/**
+ * Keep focus inside a window, and put it back when the window goes away.
+ *
+ * `Modal` uses this, and so does anything that is modal without being shaped
+ * like a modal -- the applet studio is a full-screen workspace with its own
+ * header and its own idea of what closing means, and wrapping it in `Modal` to
+ * borrow the behaviour would mean pretending it is a dialog with a title and a
+ * footer. It is not. It just has the same obligation.
+ *
+ * **The obligation.** Everything behind a modal stays in the tab order:
+ * focusable, operable by keyboard, and invisible under the scrim. Tab past the
+ * last control and you are somewhere on the page you cannot see, pressing
+ * buttons you cannot read. No mouse ever finds this, which is why every one of
+ * the app's eight modals shipped without it.
+ */
+import { useCallback, useEffect } from 'react';
+const FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]),' +
+    ' select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+export function useTrapFocus(box, { active = true, onEscape, } = {}) {
+    const focusables = useCallback(() => [...(box.current?.querySelectorAll(FOCUSABLE) ?? [])]
+        // A control inside a collapsed section is in the DOM and not on screen.
+        .filter((el) => el.offsetParent !== null || el === document.activeElement), [box]);
+    useEffect(() => {
+        if (!active)
+            return;
+        const cameFrom = document.activeElement;
+        // Only if nothing inside has claimed it already: several of these windows
+        // put `autoFocus` on the field you came here to edit, which is a better
+        // landing place than the box.
+        if (!box.current?.contains(document.activeElement))
+            box.current?.focus();
+        return () => {
+            // Back to the control that opened it. Without this, focus falls to the
+            // top of the document and a keyboard user starts the page again.
+            const back = cameFrom;
+            if (back?.isConnected)
+                back.focus?.();
+        };
+    }, [active, box]);
+    return useCallback((e) => {
+        if (!active)
+            return;
+        if (e.key === 'Escape' && onEscape) {
+            // Stopped here so a window inside a window closes one layer, not both.
+            e.stopPropagation();
+            onEscape();
+            return;
+        }
+        if (e.key !== 'Tab')
+            return;
+        const items = focusables();
+        if (!items.length)
+            return;
+        const first = items[0];
+        const last = items[items.length - 1];
+        const here = document.activeElement;
+        if (e.shiftKey && (here === first || here === box.current)) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && here === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }, [active, box, focusables, onEscape]);
+}
+export default useTrapFocus;

package/dist/illustrations.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The art, inlined.
+ *
+ * ~240 KB of SVG, which is most of this package's weight — so it lives in its
+ * own module referenced only by `Illustration`. A bundler that tree-shakes the
+ * component away drops the art with it, and an app that never draws an empty
+ * state never pays for one.
+ */
+export declare const ILLUSTRATIONS: readonly ["alien", "alsoarrg", "alsonote", "alsositting", "arrgh", "chill", "cycling", "hah", "happystab", "idk", "moustache", "note", "psychoticstab", "really", "righton", "sitting", "uhm", "vibes", "weird", "what", "wow"];
+export type IllustrationName = (typeof ILLUSTRATIONS)[number];
+export declare const ILLUSTRATION_SVG: Record<IllustrationName, string>;