panel-frame-ui 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# panel-frame-ui
+
+## 0.1.1
+
+### Patch Changes
+
+- 79c6325: Fix field accessibility attributes and mobile navigation drawer focus handling.

package/dist/dashboard-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-shell.d.ts","sourceRoot":"","sources":["../src/dashboard-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAKF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,cAAc,EACd,aAAa,EACb,OAAO,EACP,cAAqB,EACrB,aAAoB,EACpB,QAAQ,GACT,EAAE,mBAAmB,+BA0JrB"}
+{"version":3,"file":"dashboard-shell.d.ts","sourceRoot":"","sources":["../src/dashboard-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAKF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,cAAc,EACd,aAAa,EACb,OAAO,EACP,cAAqB,EACrB,aAAoB,EACpB,QAAQ,GACT,EAAE,mBAAmB,+BAwLrB"}

package/dist/dashboard-shell.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, } from "react";
-const focusableSelector = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+const focusableSelector = 'a[href], button:not(:disabled), input:not([type="hidden"]):not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
 export function DashboardShell({ brand, navigation, sidebarContext, sidebarFooter, toolbar, sidebarVisible = true, contentAsMain = true, children, }) {
     const [isMobile, setIsMobile] = useState(false);
     const [mobileOpen, setMobileOpen] = useState(false);
     const sidebarRef = useRef(null);
     const triggerRef = useRef(null);
+    const wasMobileOpenRef = useRef(false);
     useEffect(() => {
         const media = window.matchMedia("(max-width: 780px)");
         const update = () => {
@@ -18,36 +19,56 @@ export function DashboardShell({ brand, navigation, sidebarContext, sidebarFoote
         media.addEventListener("change", update);
         return () => media.removeEventListener("change", update);
     }, []);
+    useEffect(() => {
+        if (mobileOpen) {
+            wasMobileOpenRef.current = true;
+            return;
+        }
+        if (wasMobileOpenRef.current) {
+            wasMobileOpenRef.current = false;
+            if (isMobile)
+                triggerRef.current?.focus();
+        }
+    }, [isMobile, mobileOpen]);
     useEffect(() => {
         if (!isMobile || !mobileOpen)
             return;
         const previousOverflow = document.body.style.overflow;
         document.body.style.overflow = "hidden";
         const focusable = () => Array.from(sidebarRef.current?.querySelectorAll(focusableSelector) ??
-            []).filter((element) => !element.hasAttribute("hidden"));
-        focusable()[0]?.focus();
+            []).filter((element) => !element.closest('[hidden], [inert], [aria-hidden="true"]'));
+        const first = focusable()[0];
+        (first ?? sidebarRef.current)?.focus();
         const onKeyDown = (event) => {
             if (event.key === "Escape") {
                 event.preventDefault();
-                setMobileOpen(false);
-                triggerRef.current?.focus();
+                closeDrawer();
                 return;
             }
             if (event.key !== "Tab")
                 return;
             const elements = focusable();
-            const first = elements[0];
-            const last = elements.at(-1);
-            if (!first || !last) {
+            const firstFocusable = elements[0];
+            const lastFocusable = elements.at(-1);
+            if (!firstFocusable || !lastFocusable) {
+                event.preventDefault();
+                sidebarRef.current?.focus();
+            }
+            else if (!sidebarRef.current?.contains(document.activeElement)) {
+                event.preventDefault();
+                (event.shiftKey ? lastFocusable : firstFocusable).focus();
+            }
+            else if (document.activeElement === sidebarRef.current) {
                 event.preventDefault();
+                (event.shiftKey ? lastFocusable : firstFocusable).focus();
             }
-            else if (event.shiftKey && document.activeElement === first) {
+            else if (event.shiftKey && document.activeElement === firstFocusable) {
                 event.preventDefault();
-                last.focus();
+                lastFocusable.focus();
             }
-            else if (!event.shiftKey && document.activeElement === last) {
+            else if (!event.shiftKey && document.activeElement === lastFocusable) {
                 event.preventDefault();
-                first.focus();
+                firstFocusable.focus();
             }
         };
         document.addEventListener("keydown", onKeyDown);
@@ -60,14 +81,13 @@ export function DashboardShell({ brand, navigation, sidebarContext, sidebarFoote
         if (isMobile &&
             event.target instanceof Element &&
             event.target.closest("a[href]")) {
-            setMobileOpen(false);
+            closeDrawer();
         }
     }
     function closeDrawer() {
         setMobileOpen(false);
-        triggerRef.current?.focus();
     }
-    return (_jsxs("div", { className: "pf-dashboard-shell", "data-mobile-open": mobileOpen ? "true" : "false", "data-sidebar-visible": sidebarVisible ? "true" : "false", children: [_jsx("a", { className: "pf-skip-link", href: "#pf-main-content", children: "Skip to main content" }), _jsxs("aside", { ref: sidebarRef, "aria-hidden": (isMobile && !mobileOpen) || (!isMobile && !sidebarVisible)
+    return (_jsxs("div", { className: "pf-dashboard-shell", "data-mobile-open": mobileOpen ? "true" : "false", "data-sidebar-visible": sidebarVisible ? "true" : "false", children: [_jsx("a", { "aria-hidden": isMobile && mobileOpen ? true : undefined, className: "pf-skip-link", href: "#pf-main-content", inert: isMobile && mobileOpen, children: "Skip to main content" }), _jsxs("aside", { ref: sidebarRef, "aria-hidden": (isMobile && !mobileOpen) || (!isMobile && !sidebarVisible)
                     ? true
-                    : undefined, "aria-label": "Primary navigation", "aria-modal": isMobile && mobileOpen ? true : undefined, className: "pf-sidebar", id: "pf-dashboard-sidebar", inert: (isMobile && !mobileOpen) || (!isMobile && !sidebarVisible), onClick: closeAfterNavigation, role: isMobile && mobileOpen ? "dialog" : undefined, tabIndex: -1, children: [_jsx("div", { className: "pf-sidebar-brand", children: brand }), sidebarContext ? (_jsx("div", { className: "pf-sidebar-context", children: sidebarContext })) : null, _jsx("div", { className: "pf-sidebar-navigation", children: navigation }), _jsx("div", { className: "pf-sidebar-spacer" }), sidebarFooter ? (_jsx("div", { className: "pf-sidebar-footer", children: sidebarFooter })) : null] }), isMobile && mobileOpen ? (_jsx("button", { "aria-label": "Close dashboard navigation", className: "pf-sidebar-backdrop", onClick: closeDrawer, tabIndex: -1, type: "button" })) : null, _jsxs("div", { className: "pf-dashboard-main", children: [_jsxs("header", { className: "pf-dashboard-toolbar", children: [_jsx("button", { "aria-controls": "pf-dashboard-sidebar", "aria-expanded": mobileOpen, "aria-label": mobileOpen ? "Close navigation" : "Open navigation", className: "pf-mobile-menu-button", onClick: () => setMobileOpen((open) => !open), ref: triggerRef, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "\u2630" }) }), toolbar ? _jsx("div", { className: "pf-toolbar-content", children: toolbar }) : null] }), contentAsMain ? (_jsx("main", { className: "pf-dashboard-content", id: "pf-main-content", tabIndex: -1, children: children })) : (_jsx("div", { className: "pf-dashboard-content", id: "pf-main-content", tabIndex: -1, children: children }))] })] }));
+                    : undefined, "aria-label": "Primary navigation", "aria-modal": isMobile && mobileOpen ? true : undefined, className: "pf-sidebar", id: "pf-dashboard-sidebar", inert: (isMobile && !mobileOpen) || (!isMobile && !sidebarVisible), onClick: closeAfterNavigation, role: isMobile && mobileOpen ? "dialog" : undefined, tabIndex: -1, children: [_jsx("div", { className: "pf-sidebar-brand", children: brand }), sidebarContext ? (_jsx("div", { className: "pf-sidebar-context", children: sidebarContext })) : null, _jsx("div", { className: "pf-sidebar-navigation", children: navigation }), _jsx("div", { className: "pf-sidebar-spacer" }), sidebarFooter ? (_jsx("div", { className: "pf-sidebar-footer", children: sidebarFooter })) : null] }), isMobile && mobileOpen ? (_jsx("button", { "aria-label": "Close dashboard navigation", className: "pf-sidebar-backdrop", onClick: closeDrawer, tabIndex: -1, type: "button" })) : null, _jsxs("div", { "aria-hidden": isMobile && mobileOpen ? true : undefined, className: "pf-dashboard-main", inert: isMobile && mobileOpen, children: [_jsxs("header", { className: "pf-dashboard-toolbar", children: [_jsx("button", { "aria-controls": "pf-dashboard-sidebar", "aria-expanded": mobileOpen, "aria-label": mobileOpen ? "Close navigation" : "Open navigation", className: "pf-mobile-menu-button", onClick: () => setMobileOpen((open) => !open), ref: triggerRef, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "\u2630" }) }), toolbar ? _jsx("div", { className: "pf-toolbar-content", children: toolbar }) : null] }), contentAsMain ? (_jsx("main", { className: "pf-dashboard-content", id: "pf-main-content", tabIndex: -1, children: children })) : (_jsx("div", { className: "pf-dashboard-content", id: "pf-main-content", tabIndex: -1, children: children }))] })] }));
 }

package/dist/primitives.d.ts

@@ -21,13 +21,13 @@ export declare function Field({ label, hint, error, id, children, }: {
         "aria-invalid"?: true;
     }) => ReactNode;
 }): import("react").JSX.Element;
-export declare function TextField({ label, hint, error, id, ...inputProps }: Omit<InputHTMLAttributes<HTMLInputElement>, "id"> & {
+export declare function TextField({ label, hint, error, id, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }: Omit<InputHTMLAttributes<HTMLInputElement>, "id"> & {
     label: string;
     hint?: string;
     error?: string;
     id?: string;
 }): import("react").JSX.Element;
-export declare function SelectField({ label, hint, error, id, children, ...selectProps }: Omit<SelectHTMLAttributes<HTMLSelectElement>, "id"> & {
+export declare function SelectField({ label, hint, error, id, children, className, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...selectProps }: Omit<SelectHTMLAttributes<HTMLSelectElement>, "id"> & {
     label: string;
     hint?: string;
     error?: string;

package/dist/primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}

package/dist/primitives.js

@@ -24,11 +24,15 @@ export function Field({ label, hint, error, id, children, }) {
                 "aria-invalid": error ? true : undefined,
             }), hint ? (_jsx("span", { className: "pf-field-hint", id: hintId, children: hint })) : null, error ? (_jsx("span", { className: "pf-field-error", id: errorId, children: error })) : null] }));
 }
-export function TextField({ label, hint, error, id, ...inputProps }) {
-    return (_jsx(Field, { label: label, hint: hint, error: error, id: id, children: (fieldProps) => (_jsx("input", { className: "pf-input", ...fieldProps, ...inputProps })) }));
+function mergeDescribedBy(...values) {
+    const ids = values.flatMap((value) => value?.split(/\s+/) ?? []);
+    return [...new Set(ids.filter(Boolean))].join(" ") || undefined;
 }
-export function SelectField({ label, hint, error, id, children, ...selectProps }) {
-    return (_jsx(Field, { label: label, hint: hint, error: error, id: id, children: (fieldProps) => (_jsx("select", { className: "pf-input pf-select", ...fieldProps, ...selectProps, children: children })) }));
+export function TextField({ label, hint, error, id, className = "", "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }) {
+    return (_jsx(Field, { label: label, hint: hint, error: error, id: id, children: (fieldProps) => (_jsx("input", { ...fieldProps, ...inputProps, "aria-describedby": mergeDescribedBy(fieldProps["aria-describedby"], ariaDescribedBy), "aria-invalid": error ? true : ariaInvalid, className: `pf-input ${className}`.trim() })) }));
+}
+export function SelectField({ label, hint, error, id, children, className = "", "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...selectProps }) {
+    return (_jsx(Field, { label: label, hint: hint, error: error, id: id, children: (fieldProps) => (_jsx("select", { ...fieldProps, ...selectProps, "aria-describedby": mergeDescribedBy(fieldProps["aria-describedby"], ariaDescribedBy), "aria-invalid": error ? true : ariaInvalid, className: `pf-input pf-select ${className}`.trim(), children: children })) }));
 }
 export function EmptyState({ title, description, action, }) {
     return (_jsxs("section", { className: "pf-empty-state", children: [_jsx("h2", { children: title }), description ? (_jsx("div", { className: "pf-empty-description", children: description })) : null, action ? _jsx("div", { className: "pf-empty-action", children: action }) : null] }));

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "panel-frame-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Shared dashboard and account UI for Panel Frame projects",
   "license": "MIT",
   "engines": {
     "node": ">=22.14.0"
   },
-  "packageManager": "pnpm@12.16.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zakaihamilton/panel-frame-ui.git"
@@ -42,19 +41,6 @@
       "default": "./styles.css"
     }
   },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "lint": "eslint .",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "test": "vitest run",
-    "prepack": "pnpm run build",
-    "health": "pnpm run build && pnpm run lint && pnpm run format:check && pnpm run test && repnix check",
-    "health:dead-code": "knip",
-    "health:duplication": "jscpd src",
-    "health:package:publint": "publint",
-    "health:package:types": "attw --pack ."
-  },
   "peerDependencies": {
     "react": ">=19.0.0 <20.0.0",
     "react-dom": ">=19.0.0 <20.0.0"
@@ -78,5 +64,17 @@
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.72.2",
     "vitest": "^5.1.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "health": "pnpm run build && pnpm run lint && pnpm run format:check && pnpm run test && repnix check",
+    "health:dead-code": "knip",
+    "health:duplication": "jscpd src",
+    "health:package:publint": "publint",
+    "health:package:types": "attw --pack ."
   }
-}
+}