@gnome-ui/react 1.45.2 → 1.46.0

package/dist/components/ShortcutsDialog/ShortcutsDialog.js

@@ -1,127 +1,127 @@
-import e from "./ShortcutsDialog.module.css.js";
-import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
-import { createPortal as a } from "react-dom";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useBodyScrollLock as e } from "../Dialog/dialogUtils.js";
+import t from "./ShortcutsDialog.module.css.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { createPortal as o } from "react-dom";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/ShortcutsDialog/ShortcutsDialog.tsx
-var c = "button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", l = ({ open: l, onClose: u, title: d = "Keyboard Shortcuts", sections: f }) => {
-	let [p, m] = i(""), h = r(null), g = r(null), _ = r(null), v = r(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);
-	n(() => {
-		l ? (_.current = document.activeElement, requestAnimationFrame(() => g.current?.focus())) : (m(""), _.current?.focus());
-	}, [l]);
-	let y = t((e) => {
+var l = "button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", u = ({ open: u, onClose: d, title: f = "Keyboard Shortcuts", sections: p }) => {
+	let [m, h] = a(""), g = i(null), _ = i(null), v = i(null), y = i(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);
+	e(u), r(() => {
+		u ? (v.current = document.activeElement, requestAnimationFrame(() => _.current?.focus())) : (h(""), v.current?.focus());
+	}, [u]);
+	let b = n((e) => {
 		if (e.key === "Escape") {
-			e.preventDefault(), u();
+			e.preventDefault(), d();
 			return;
 		}
 		if (e.key !== "Tab") return;
-		let t = Array.from(h.current?.querySelectorAll(c) ?? []);
+		let t = Array.from(g.current?.querySelectorAll(l) ?? []);
 		if (t.length === 0) return;
 		let n = t[0], r = t[t.length - 1];
 		e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
-	}, [u]);
-	if (!l) return null;
-	let b = p.trim().toLowerCase(), x = f.map((e) => ({
+	}, [d]);
+	if (!u) return null;
+	let x = m.trim().toLowerCase(), S = p.map((e) => ({
 		...e,
-		shortcuts: e.shortcuts.filter(({ description: e, keys: t }) => !b || e.toLowerCase().includes(b) || t.some((e) => e.toLowerCase().includes(b)))
-	})).filter((e) => e.shortcuts.length > 0), S = /* @__PURE__ */ o("div", {
-		className: e.backdrop,
-		onClick: u,
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ s("div", {
-			ref: h,
+		shortcuts: e.shortcuts.filter(({ description: e, keys: t }) => !x || e.toLowerCase().includes(x) || t.some((e) => e.toLowerCase().includes(x)))
+	})).filter((e) => e.shortcuts.length > 0), C = /* @__PURE__ */ s("div", {
+		className: t.backdrop,
+		onClick: d,
+		children: /* @__PURE__ */ c("div", {
+			ref: g,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": v.current,
-			className: e.dialog,
-			onKeyDown: y,
+			"aria-labelledby": y.current,
+			className: t.dialog,
+			onKeyDown: b,
 			onClick: (e) => e.stopPropagation(),
 			children: [
-				/* @__PURE__ */ s("div", {
-					className: e.header,
-					children: [/* @__PURE__ */ o("span", {
-						id: v.current,
-						className: e.title,
-						children: d
-					}), /* @__PURE__ */ o("button", {
+				/* @__PURE__ */ c("div", {
+					className: t.header,
+					children: [/* @__PURE__ */ s("span", {
+						id: y.current,
+						className: t.title,
+						children: f
+					}), /* @__PURE__ */ s("button", {
 						type: "button",
-						className: e.closeBtn,
+						className: t.closeBtn,
 						"aria-label": "Close",
-						onClick: u,
+						onClick: d,
 						children: "×"
 					})]
 				}),
-				/* @__PURE__ */ s("div", {
-					className: e.searchRow,
+				/* @__PURE__ */ c("div", {
+					className: t.searchRow,
 					children: [
-						/* @__PURE__ */ o("span", {
-							className: e.searchIcon,
+						/* @__PURE__ */ s("span", {
+							className: t.searchIcon,
 							"aria-hidden": "true",
 							children: "⌕"
 						}),
-						/* @__PURE__ */ o("input", {
-							ref: g,
+						/* @__PURE__ */ s("input", {
+							ref: _,
 							type: "search",
-							className: e.searchInput,
+							className: t.searchInput,
 							placeholder: "Search shortcuts…",
-							value: p,
-							onChange: (e) => m(e.target.value),
+							value: m,
+							onChange: (e) => h(e.target.value),
 							"aria-label": "Search shortcuts"
 						}),
-						p && /* @__PURE__ */ o("button", {
+						m && /* @__PURE__ */ s("button", {
 							type: "button",
-							className: e.searchClear,
+							className: t.searchClear,
 							"aria-label": "Clear search",
 							onClick: () => {
-								m(""), g.current?.focus();
+								h(""), _.current?.focus();
 							},
 							children: "×"
 						})
 					]
 				}),
-				/* @__PURE__ */ o("div", {
-					className: e.body,
+				/* @__PURE__ */ s("div", {
+					className: t.body,
 					role: "list",
-					children: x.length === 0 ? /* @__PURE__ */ s("p", {
-						className: e.empty,
+					children: S.length === 0 ? /* @__PURE__ */ c("p", {
+						className: t.empty,
 						children: [
 							"No shortcuts match \"",
-							p,
+							m,
 							"\""
 						]
-					}) : x.map((t) => /* @__PURE__ */ s("section", {
-						className: e.section,
-						children: [/* @__PURE__ */ o("h3", {
-							className: e.sectionTitle,
-							children: t.title
-						}), /* @__PURE__ */ o("ul", {
-							className: e.list,
-							children: t.shortcuts.map((t) => /* @__PURE__ */ s("li", {
-								className: e.row,
-								children: [/* @__PURE__ */ o("span", {
-									className: e.keys,
-									"aria-label": t.keys.join(" + "),
-									children: t.keys.map((n, r) => /* @__PURE__ */ s("span", {
-										className: e.keyCap,
-										children: [/* @__PURE__ */ o("kbd", { children: n }), r < t.keys.length - 1 && /* @__PURE__ */ o("span", {
-											className: e.plus,
+					}) : S.map((e) => /* @__PURE__ */ c("section", {
+						className: t.section,
+						children: [/* @__PURE__ */ s("h3", {
+							className: t.sectionTitle,
+							children: e.title
+						}), /* @__PURE__ */ s("ul", {
+							className: t.list,
+							children: e.shortcuts.map((e) => /* @__PURE__ */ c("li", {
+								className: t.row,
+								children: [/* @__PURE__ */ s("span", {
+									className: t.keys,
+									"aria-label": e.keys.join(" + "),
+									children: e.keys.map((n, r) => /* @__PURE__ */ c("span", {
+										className: t.keyCap,
+										children: [/* @__PURE__ */ s("kbd", { children: n }), r < e.keys.length - 1 && /* @__PURE__ */ s("span", {
+											className: t.plus,
 											"aria-hidden": "true",
 											children: "+"
 										})]
 									}, r))
-								}), /* @__PURE__ */ o("span", {
-									className: e.description,
-									children: t.description
+								}), /* @__PURE__ */ s("span", {
+									className: t.description,
+									children: e.description
 								})]
-							}, t.description))
+							}, e.description))
 						})]
-					}, t.title))
+					}, e.title))
 				})
 			]
 		})
 	});
-	return typeof document > "u" ? S : a(S, document.body);
+	return typeof document > "u" ? C : o(C, document.body);
 };
 //#endregion
-export { l as ShortcutsDialog };
+export { u as ShortcutsDialog };
 
 //# sourceMappingURL=ShortcutsDialog.js.map

package/dist/components/ShortcutsDialog/ShortcutsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './ShortcutsDialog.module.css';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport const ShortcutsDialog = ({\n  open,\n  onClose,\n  title = 'Keyboard Shortcuts',\n  sections,\n}: ShortcutsDialogProps) => {\n  const [query, setQuery] = useState('');\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery('');\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div className={styles.backdrop} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">\n            ⌕\n          </span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                setQuery('');\n                searchRef.current?.focus();\n              }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row}>\n                      <span className={styles.keys} aria-label={shortcut.keys.join(' + ')}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">\n                                +\n                              </span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}
+{"version":3,"file":"ShortcutsDialog.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './ShortcutsDialog.module.css';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport const ShortcutsDialog = ({\n  open,\n  onClose,\n  title = 'Keyboard Shortcuts',\n  sections,\n}: ShortcutsDialogProps) => {\n  const [query, setQuery] = useState('');\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  useBodyScrollLock(open);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery('');\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div className={styles.backdrop} onClick={onClose}>\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">\n            ⌕\n          </span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                setQuery('');\n                searchRef.current?.focus();\n              }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row}>\n                      <span className={styles.keys} aria-label={shortcut.keys.join(' + ')}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">\n                                +\n                              </span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnome-ui/react",
-  "version": "1.45.2",
+  "version": "1.46.0",
   "description": "React component library following GNOME Human Interface Guidelines",
   "type": "module",
   "main": "./dist/index.cjs",