@gnome-ui/react 1.45.2 → 1.47.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/dist/components/AboutDialog/AboutDialog.cjs +1 -1
- package/dist/components/AboutDialog/AboutDialog.cjs.map +1 -1
- package/dist/components/AboutDialog/AboutDialog.js +105 -106
- package/dist/components/AboutDialog/AboutDialog.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.cjs +1 -1
- package/dist/components/BottomSheet/BottomSheet.cjs.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.js +36 -36
- package/dist/components/BottomSheet/BottomSheet.js.map +1 -1
- package/dist/components/Dialog/Dialog.cjs +1 -1
- package/dist/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/components/Dialog/Dialog.js +50 -51
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Dialog/dialogUtils.cjs +1 -1
- package/dist/components/Dialog/dialogUtils.cjs.map +1 -1
- package/dist/components/Dialog/dialogUtils.d.ts +6 -0
- package/dist/components/Dialog/dialogUtils.js +11 -2
- package/dist/components/Dialog/dialogUtils.js.map +1 -1
- package/dist/components/Dropdown/Dropdown.cjs +1 -1
- package/dist/components/Dropdown/Dropdown.cjs.map +1 -1
- package/dist/components/Dropdown/Dropdown.js +88 -84
- package/dist/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs.map +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.d.ts +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.js +10 -9
- package/dist/components/PasswordEntryRow/PasswordEntryRow.js.map +1 -1
- package/dist/components/ScrollToTop/ScrollToTop.cjs +2 -0
- package/dist/components/ScrollToTop/ScrollToTop.cjs.map +1 -0
- package/dist/components/ScrollToTop/ScrollToTop.d.ts +74 -0
- package/dist/components/ScrollToTop/ScrollToTop.js +42 -0
- package/dist/components/ScrollToTop/ScrollToTop.js.map +1 -0
- package/dist/components/ScrollToTop/ScrollToTop.module.css.cjs +2 -0
- package/dist/components/ScrollToTop/ScrollToTop.module.css.cjs.map +1 -0
- package/dist/components/ScrollToTop/ScrollToTop.module.css.js +13 -0
- package/dist/components/ScrollToTop/ScrollToTop.module.css.js.map +1 -0
- package/dist/components/ScrollToTop/index.d.ts +2 -0
- package/dist/components/ScrollToTop/useScrollToTopVisibility.cjs +2 -0
- package/dist/components/ScrollToTop/useScrollToTopVisibility.cjs.map +1 -0
- package/dist/components/ScrollToTop/useScrollToTopVisibility.d.ts +21 -0
- package/dist/components/ScrollToTop/useScrollToTopVisibility.js +18 -0
- package/dist/components/ScrollToTop/useScrollToTopVisibility.js.map +1 -0
- package/dist/components/ScrollToTop.cjs +1 -0
- package/dist/components/ScrollToTop.d.ts +2 -0
- package/dist/components/ScrollToTop.js +2 -0
- package/dist/components/ShortcutsDialog/ShortcutsDialog.cjs +1 -1
- package/dist/components/ShortcutsDialog/ShortcutsDialog.cjs.map +1 -1
- package/dist/components/ShortcutsDialog/ShortcutsDialog.js +74 -74
- package/dist/components/ShortcutsDialog/ShortcutsDialog.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +40 -39
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useEffect as e, useState as t } from "react";
|
|
2
|
+
//#region src/components/ScrollToTop/useScrollToTopVisibility.ts
|
|
3
|
+
function n({ visible: n, threshold: r, scrollTarget: i }) {
|
|
4
|
+
let [a, o] = t(!1);
|
|
5
|
+
return e(() => {
|
|
6
|
+
if (n === "always") return;
|
|
7
|
+
let e = i ?? window, t = () => e === window ? window.scrollY : e.scrollTop, a = () => o(t() > r);
|
|
8
|
+
return a(), e.addEventListener("scroll", a, { passive: !0 }), () => e.removeEventListener("scroll", a);
|
|
9
|
+
}, [
|
|
10
|
+
n,
|
|
11
|
+
r,
|
|
12
|
+
i
|
|
13
|
+
]), n === "always" || a;
|
|
14
|
+
}
|
|
15
|
+
//#endregion
|
|
16
|
+
export { n as useScrollToTopVisibility };
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=useScrollToTopVisibility.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollToTopVisibility.js","names":[],"sources":["../../../src/components/ScrollToTop/useScrollToTopVisibility.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { ScrollToTopVisible } from './ScrollToTop';\n\ninterface UseScrollToTopVisibilityOptions {\n /** See {@link ScrollToTopVisible}. */\n visible: ScrollToTopVisible;\n /** Pixels scrolled before returning `true` in `\"auto\"` mode. */\n threshold: number;\n /** Element to observe. Defaults to `window` when `undefined`. */\n scrollTarget?: HTMLElement | Window;\n}\n\n/**\n * Returns `true` when the `ScrollToTop` button should be rendered.\n *\n * - `visible === \"always\"` → always `true`; no scroll listener is attached.\n * - `visible === \"auto\"` → attaches a passive `scroll` listener on `scrollTarget`\n * (or `window`) and returns `true` once the scroll offset exceeds `threshold`.\n * Reverts to `false` when the user scrolls back below the threshold.\n *\n * This is an internal hook — not exported from the package.\n */\nexport function useScrollToTopVisibility({\n visible,\n threshold,\n scrollTarget,\n}: UseScrollToTopVisibilityOptions): boolean {\n const [isScrolledPast, setIsScrolledPast] = useState(false);\n\n useEffect(() => {\n if (visible === 'always') {\n return;\n }\n\n const target = scrollTarget ?? window;\n\n const getScrollY = () =>\n target === window ? window.scrollY : (target as HTMLElement).scrollTop;\n\n const check = () => setIsScrolledPast(getScrollY() > threshold);\n\n check();\n target.addEventListener('scroll', check, { passive: true });\n return () => target.removeEventListener('scroll', check);\n }, [visible, threshold, scrollTarget]);\n\n return visible === 'always' || isScrolledPast;\n}\n"],"mappings":";;AAuBA,SAAgB,EAAyB,EACvC,YACA,cACA,mBAC2C;CAC3C,IAAM,CAAC,GAAgB,KAAqB,EAAS,EAAK;CAmB1D,OAjBA,QAAgB;EACd,IAAI,MAAY,UACd;EAGF,IAAM,IAAS,KAAgB,QAEzB,UACJ,MAAW,SAAS,OAAO,UAAW,EAAuB,WAEzD,UAAc,EAAkB,EAAW,IAAI,CAAS;EAI9D,OAFA,EAAM,GACN,EAAO,iBAAiB,UAAU,GAAO,EAAE,SAAS,GAAK,CAAC,SAC7C,EAAO,oBAAoB,UAAU,CAAK;CACzD,GAAG;EAAC;EAAS;EAAW;CAAY,CAAC,GAE9B,MAAY,YAAY;AACjC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ScrollToTop/ScrollToTop.cjs");exports.ScrollToTop=e.ScrollToTop;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./ShortcutsDialog.module.css.cjs");let
|
|
1
|
+
const e=require("../Dialog/dialogUtils.cjs"),t=require("./ShortcutsDialog.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=`button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])`,o=({open:o,onClose:s,title:c=`Keyboard Shortcuts`,sections:l})=>{let[u,d]=(0,n.useState)(``),f=(0,n.useRef)(null),p=(0,n.useRef)(null),m=(0,n.useRef)(null),h=(0,n.useRef)(`shortcuts-title-${Math.random().toString(36).slice(2,9)}`);e.useBodyScrollLock(o),(0,n.useEffect)(()=>{o?(m.current=document.activeElement,requestAnimationFrame(()=>p.current?.focus())):(d(``),m.current?.focus())},[o]);let g=(0,n.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),s();return}if(e.key!==`Tab`)return;let t=Array.from(f.current?.querySelectorAll(a)??[]);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())},[s]);if(!o)return null;let _=u.trim().toLowerCase(),v=l.map(e=>({...e,shortcuts:e.shortcuts.filter(({description:e,keys:t})=>!_||e.toLowerCase().includes(_)||t.some(e=>e.toLowerCase().includes(_)))})).filter(e=>e.shortcuts.length>0),y=(0,i.jsx)(`div`,{className:t.default.backdrop,onClick:s,children:(0,i.jsxs)(`div`,{ref:f,role:`dialog`,"aria-modal":`true`,"aria-labelledby":h.current,className:t.default.dialog,onKeyDown:g,onClick:e=>e.stopPropagation(),children:[(0,i.jsxs)(`div`,{className:t.default.header,children:[(0,i.jsx)(`span`,{id:h.current,className:t.default.title,children:c}),(0,i.jsx)(`button`,{type:`button`,className:t.default.closeBtn,"aria-label":`Close`,onClick:s,children:`×`})]}),(0,i.jsxs)(`div`,{className:t.default.searchRow,children:[(0,i.jsx)(`span`,{className:t.default.searchIcon,"aria-hidden":`true`,children:`⌕`}),(0,i.jsx)(`input`,{ref:p,type:`search`,className:t.default.searchInput,placeholder:`Search shortcuts…`,value:u,onChange:e=>d(e.target.value),"aria-label":`Search shortcuts`}),u&&(0,i.jsx)(`button`,{type:`button`,className:t.default.searchClear,"aria-label":`Clear search`,onClick:()=>{d(``),p.current?.focus()},children:`×`})]}),(0,i.jsx)(`div`,{className:t.default.body,role:`list`,children:v.length===0?(0,i.jsxs)(`p`,{className:t.default.empty,children:[`No shortcuts match "`,u,`"`]}):v.map(e=>(0,i.jsxs)(`section`,{className:t.default.section,children:[(0,i.jsx)(`h3`,{className:t.default.sectionTitle,children:e.title}),(0,i.jsx)(`ul`,{className:t.default.list,children:e.shortcuts.map(e=>(0,i.jsxs)(`li`,{className:t.default.row,children:[(0,i.jsx)(`span`,{className:t.default.keys,"aria-label":e.keys.join(` + `),children:e.keys.map((n,r)=>(0,i.jsxs)(`span`,{className:t.default.keyCap,children:[(0,i.jsx)(`kbd`,{children:n}),r<e.keys.length-1&&(0,i.jsx)(`span`,{className:t.default.plus,"aria-hidden":`true`,children:`+`})]},r))}),(0,i.jsx)(`span`,{className:t.default.description,children:e.description})]},e.description))})]},e.title))})]})});return typeof document>`u`?y:(0,r.createPortal)(y,document.body)};exports.ShortcutsDialog=o;
|
|
2
2
|
//# sourceMappingURL=ShortcutsDialog.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShortcutsDialog.cjs","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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"}
|
|
1
|
+
{"version":3,"file":"ShortcutsDialog.cjs","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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"}
|
|
@@ -1,127 +1,127 @@
|
|
|
1
|
-
import e from "
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import { useBodyScrollLock as e } from "../Dialog/dialogUtils.js";
|
|
2
|
+
import t from "./ShortcutsDialog.module.css.js";
|
|
3
|
+
import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
|
|
4
|
+
import { createPortal as o } from "react-dom";
|
|
5
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
5
6
|
//#region src/components/ShortcutsDialog/ShortcutsDialog.tsx
|
|
6
|
-
var
|
|
7
|
-
let [
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}, [
|
|
11
|
-
let
|
|
7
|
+
var l = "button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", u = ({ open: u, onClose: d, title: f = "Keyboard Shortcuts", sections: p }) => {
|
|
8
|
+
let [m, h] = a(""), g = i(null), _ = i(null), v = i(null), y = i(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);
|
|
9
|
+
e(u), r(() => {
|
|
10
|
+
u ? (v.current = document.activeElement, requestAnimationFrame(() => _.current?.focus())) : (h(""), v.current?.focus());
|
|
11
|
+
}, [u]);
|
|
12
|
+
let b = n((e) => {
|
|
12
13
|
if (e.key === "Escape") {
|
|
13
|
-
e.preventDefault(),
|
|
14
|
+
e.preventDefault(), d();
|
|
14
15
|
return;
|
|
15
16
|
}
|
|
16
17
|
if (e.key !== "Tab") return;
|
|
17
|
-
let t = Array.from(
|
|
18
|
+
let t = Array.from(g.current?.querySelectorAll(l) ?? []);
|
|
18
19
|
if (t.length === 0) return;
|
|
19
20
|
let n = t[0], r = t[t.length - 1];
|
|
20
21
|
e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
|
|
21
|
-
}, [
|
|
22
|
-
if (!
|
|
23
|
-
let
|
|
22
|
+
}, [d]);
|
|
23
|
+
if (!u) return null;
|
|
24
|
+
let x = m.trim().toLowerCase(), S = p.map((e) => ({
|
|
24
25
|
...e,
|
|
25
|
-
shortcuts: e.shortcuts.filter(({ description: e, keys: t }) => !
|
|
26
|
-
})).filter((e) => e.shortcuts.length > 0),
|
|
27
|
-
className:
|
|
28
|
-
onClick:
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
ref: h,
|
|
26
|
+
shortcuts: e.shortcuts.filter(({ description: e, keys: t }) => !x || e.toLowerCase().includes(x) || t.some((e) => e.toLowerCase().includes(x)))
|
|
27
|
+
})).filter((e) => e.shortcuts.length > 0), C = /* @__PURE__ */ s("div", {
|
|
28
|
+
className: t.backdrop,
|
|
29
|
+
onClick: d,
|
|
30
|
+
children: /* @__PURE__ */ c("div", {
|
|
31
|
+
ref: g,
|
|
32
32
|
role: "dialog",
|
|
33
33
|
"aria-modal": "true",
|
|
34
|
-
"aria-labelledby":
|
|
35
|
-
className:
|
|
36
|
-
onKeyDown:
|
|
34
|
+
"aria-labelledby": y.current,
|
|
35
|
+
className: t.dialog,
|
|
36
|
+
onKeyDown: b,
|
|
37
37
|
onClick: (e) => e.stopPropagation(),
|
|
38
38
|
children: [
|
|
39
|
-
/* @__PURE__ */
|
|
40
|
-
className:
|
|
41
|
-
children: [/* @__PURE__ */
|
|
42
|
-
id:
|
|
43
|
-
className:
|
|
44
|
-
children:
|
|
45
|
-
}), /* @__PURE__ */
|
|
39
|
+
/* @__PURE__ */ c("div", {
|
|
40
|
+
className: t.header,
|
|
41
|
+
children: [/* @__PURE__ */ s("span", {
|
|
42
|
+
id: y.current,
|
|
43
|
+
className: t.title,
|
|
44
|
+
children: f
|
|
45
|
+
}), /* @__PURE__ */ s("button", {
|
|
46
46
|
type: "button",
|
|
47
|
-
className:
|
|
47
|
+
className: t.closeBtn,
|
|
48
48
|
"aria-label": "Close",
|
|
49
|
-
onClick:
|
|
49
|
+
onClick: d,
|
|
50
50
|
children: "×"
|
|
51
51
|
})]
|
|
52
52
|
}),
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
className:
|
|
53
|
+
/* @__PURE__ */ c("div", {
|
|
54
|
+
className: t.searchRow,
|
|
55
55
|
children: [
|
|
56
|
-
/* @__PURE__ */
|
|
57
|
-
className:
|
|
56
|
+
/* @__PURE__ */ s("span", {
|
|
57
|
+
className: t.searchIcon,
|
|
58
58
|
"aria-hidden": "true",
|
|
59
59
|
children: "⌕"
|
|
60
60
|
}),
|
|
61
|
-
/* @__PURE__ */
|
|
62
|
-
ref:
|
|
61
|
+
/* @__PURE__ */ s("input", {
|
|
62
|
+
ref: _,
|
|
63
63
|
type: "search",
|
|
64
|
-
className:
|
|
64
|
+
className: t.searchInput,
|
|
65
65
|
placeholder: "Search shortcuts…",
|
|
66
|
-
value:
|
|
67
|
-
onChange: (e) =>
|
|
66
|
+
value: m,
|
|
67
|
+
onChange: (e) => h(e.target.value),
|
|
68
68
|
"aria-label": "Search shortcuts"
|
|
69
69
|
}),
|
|
70
|
-
|
|
70
|
+
m && /* @__PURE__ */ s("button", {
|
|
71
71
|
type: "button",
|
|
72
|
-
className:
|
|
72
|
+
className: t.searchClear,
|
|
73
73
|
"aria-label": "Clear search",
|
|
74
74
|
onClick: () => {
|
|
75
|
-
|
|
75
|
+
h(""), _.current?.focus();
|
|
76
76
|
},
|
|
77
77
|
children: "×"
|
|
78
78
|
})
|
|
79
79
|
]
|
|
80
80
|
}),
|
|
81
|
-
/* @__PURE__ */
|
|
82
|
-
className:
|
|
81
|
+
/* @__PURE__ */ s("div", {
|
|
82
|
+
className: t.body,
|
|
83
83
|
role: "list",
|
|
84
|
-
children:
|
|
85
|
-
className:
|
|
84
|
+
children: S.length === 0 ? /* @__PURE__ */ c("p", {
|
|
85
|
+
className: t.empty,
|
|
86
86
|
children: [
|
|
87
87
|
"No shortcuts match \"",
|
|
88
|
-
|
|
88
|
+
m,
|
|
89
89
|
"\""
|
|
90
90
|
]
|
|
91
|
-
}) :
|
|
92
|
-
className:
|
|
93
|
-
children: [/* @__PURE__ */
|
|
94
|
-
className:
|
|
95
|
-
children:
|
|
96
|
-
}), /* @__PURE__ */
|
|
97
|
-
className:
|
|
98
|
-
children:
|
|
99
|
-
className:
|
|
100
|
-
children: [/* @__PURE__ */
|
|
101
|
-
className:
|
|
102
|
-
"aria-label":
|
|
103
|
-
children:
|
|
104
|
-
className:
|
|
105
|
-
children: [/* @__PURE__ */
|
|
106
|
-
className:
|
|
91
|
+
}) : S.map((e) => /* @__PURE__ */ c("section", {
|
|
92
|
+
className: t.section,
|
|
93
|
+
children: [/* @__PURE__ */ s("h3", {
|
|
94
|
+
className: t.sectionTitle,
|
|
95
|
+
children: e.title
|
|
96
|
+
}), /* @__PURE__ */ s("ul", {
|
|
97
|
+
className: t.list,
|
|
98
|
+
children: e.shortcuts.map((e) => /* @__PURE__ */ c("li", {
|
|
99
|
+
className: t.row,
|
|
100
|
+
children: [/* @__PURE__ */ s("span", {
|
|
101
|
+
className: t.keys,
|
|
102
|
+
"aria-label": e.keys.join(" + "),
|
|
103
|
+
children: e.keys.map((n, r) => /* @__PURE__ */ c("span", {
|
|
104
|
+
className: t.keyCap,
|
|
105
|
+
children: [/* @__PURE__ */ s("kbd", { children: n }), r < e.keys.length - 1 && /* @__PURE__ */ s("span", {
|
|
106
|
+
className: t.plus,
|
|
107
107
|
"aria-hidden": "true",
|
|
108
108
|
children: "+"
|
|
109
109
|
})]
|
|
110
110
|
}, r))
|
|
111
|
-
}), /* @__PURE__ */
|
|
112
|
-
className:
|
|
113
|
-
children:
|
|
111
|
+
}), /* @__PURE__ */ s("span", {
|
|
112
|
+
className: t.description,
|
|
113
|
+
children: e.description
|
|
114
114
|
})]
|
|
115
|
-
},
|
|
115
|
+
}, e.description))
|
|
116
116
|
})]
|
|
117
|
-
},
|
|
117
|
+
}, e.title))
|
|
118
118
|
})
|
|
119
119
|
]
|
|
120
120
|
})
|
|
121
121
|
});
|
|
122
|
-
return typeof document > "u" ?
|
|
122
|
+
return typeof document > "u" ? C : o(C, document.body);
|
|
123
123
|
};
|
|
124
124
|
//#endregion
|
|
125
|
-
export {
|
|
125
|
+
export { u as ShortcutsDialog };
|
|
126
126
|
|
|
127
127
|
//# sourceMappingURL=ShortcutsDialog.js.map
|
|
@@ -1 +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}
|
|
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 { 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/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./components/AboutDialog/AboutDialog.cjs"),ee=require("./components/ActionRow/ActionRow.cjs"),t=require("./components/Avatar/Avatar.cjs"),n=require("./components/AvatarRotator/AvatarRotator.cjs"),r=require("./components/Badge/Badge.cjs"),i=require("./components/Banner/Banner.cjs"),a=require("./components/Bin/Bin.cjs"),te=require("./components/Blockquote/Blockquote.cjs"),o=require("./components/BottomSheet/BottomSheet.cjs"),s=require("./components/Box/Box.cjs"),c=require("./components/Separator/Separator.cjs"),l=require("./components/BoxedList/BoxedList.cjs"),u=require("./components/BreakpointBin/BreakpointBin.cjs"),d=require("./components/Button/Button.cjs"),f=require("./components/ButtonContent/ButtonContent.cjs"),p=require("./components/ButtonRow/ButtonRow.cjs"),m=require("./components/Card/Card.cjs"),h=require("./components/Carousel/Carousel.cjs"),g=require("./components/CheckRow/CheckRow.cjs"),_=require("./components/Checkbox/Checkbox.cjs"),v=require("./components/Icon/Icon.cjs"),y=require("./components/Chip/Chip.cjs"),b=require("./components/Clamp/Clamp.cjs"),x=require("./components/ColorPicker/ColorPicker.cjs"),S=require("./components/ColumnView/ColumnView.cjs"),C=require("./components/ComboRow/ComboRow.cjs"),w=require("./components/GnomeProvider/GnomeContext.cjs"),T=require("./components/ContributionGraph/ContributionGraph.cjs"),E=require("./components/CountDownTimer/CountDownTimer.cjs"),D=require("./components/Dialog/Dialog.cjs"),O=require("./components/Drawer/Drawer.cjs"),k=require("./components/Dropdown/Dropdown.cjs"),A=require("./components/EntryRow/EntryRow.cjs"),j=require("./components/ExpanderRow/ExpanderRow.cjs"),M=require("./components/Footer/Footer.cjs"),N=require("./components/Frame/Frame.cjs"),P=require("./components/GnomeProvider/GnomeProvider.cjs"),F=require("./components/HeaderBar/HeaderBar.cjs"),I=require("./components/Tooltip/Tooltip.cjs"),L=require("./components/IconButton/IconButton.cjs"),R=require("./components/InlineViewSwitcher/InlineViewSwitcher.cjs"),z=require("./components/InlineViewSwitcher/InlineViewSwitcherItem.cjs"),B=require("./components/Link/Link.cjs"),V=require("./components/LinkedGroup/LinkedGroup.cjs"),H=require("./hooks/useBreakpoint.cjs"),U=require("./components/NavigationSplitView/NavigationSplitView.cjs"),W=require("./components/NavigationView/NavigationView.cjs"),G=require("./components/OverlaySplitView/OverlaySplitView.cjs"),K=require("./components/PasswordEntryRow/PasswordEntryRow.cjs"),q=require("./components/PathBar/PathBar.cjs"),J=require("./components/Popover/Popover.cjs"),Y=require("./components/PreferencesDialog/PreferencesDialog.cjs"),X=require("./components/PreferencesGroup/PreferencesGroup.cjs"),Z=require("./components/PreferencesPage/PreferencesPage.cjs"),Q=require("./components/ProgressBar/ProgressBar.cjs"),ne=require("./components/RadioButton/RadioButton.cjs"),re=require("./components/ScrollToTop/ScrollToTop.cjs"),ie=require("./components/Spinner/Spinner.cjs"),ae=require("./components/SearchBar/SearchBar.cjs"),oe=require("./components/SegmentedBar/SegmentedBar.cjs"),se=require("./components/ShortcutLabel/ShortcutLabel.cjs"),ce=require("./components/ShortcutsDialog/ShortcutsDialog.cjs"),le=require("./components/StatusPage/StatusPage.cjs"),$=require("./components/Sidebar/Sidebar.cjs"),ue=require("./components/Sidebar/SidebarItem.cjs"),de=require("./components/Sidebar/SidebarSection.cjs"),fe=require("./components/Skeleton/Skeleton.cjs"),pe=require("./components/Slider/Slider.cjs"),me=require("./components/SpinButton/SpinButton.cjs"),he=require("./components/SpinRow/SpinRow.cjs"),ge=require("./components/SplitButton/SplitButton.cjs"),_e=require("./components/StatusBadge/StatusBadge.cjs"),ve=require("./components/Switch/Switch.cjs"),ye=require("./components/SwitchRow/SwitchRow.cjs"),be=require("./components/Tabs/TabBar.cjs"),xe=require("./components/Tabs/TabItem.cjs"),Se=require("./components/Tabs/TabPanel.cjs"),Ce=require("./components/TerminalView/TerminalView.cjs"),we=require("./components/Text/Text.cjs"),Te=require("./components/TextField/TextField.cjs"),Ee=require("./components/Timeline/Timeline.cjs"),De=require("./components/Toast/Toast.cjs"),Oe=require("./components/Toast/Toaster.cjs"),ke=require("./components/ToggleGroup/ToggleGroup.cjs"),Ae=require("./components/ToggleGroup/ToggleGroupItem.cjs"),je=require("./components/Toolbar/Spacer.cjs"),Me=require("./components/Toolbar/Toolbar.cjs"),Ne=require("./components/ToolbarView/ToolbarView.cjs"),Pe=require("./components/ViewSwitcher/ViewSwitcher.cjs"),Fe=require("./components/ViewSwitcher/ViewSwitcherItem.cjs"),Ie=require("./components/ViewSwitcherBar/ViewSwitcherBar.cjs"),Le=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs"),Re=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs"),ze=require("./components/WindowTitle/WindowTitle.cjs"),Be=require("./components/WrapBox/WrapBox.cjs");exports.AboutDialog=e.AboutDialog,exports.ActionRow=ee.ActionRow,exports.Avatar=t.Avatar,exports.AvatarRotator=n.AvatarRotator,exports.Badge=r.Badge,exports.Banner=i.Banner,exports.Bin=a.Bin,exports.Blockquote=te.Blockquote,exports.BottomSheet=o.BottomSheet,exports.Box=s.Box,exports.BoxedList=l.BoxedList,exports.BreakpointBin=u.BreakpointBin,exports.Button=d.Button,exports.ButtonContent=f.ButtonContent,exports.ButtonRow=p.ButtonRow,exports.Card=m.Card,exports.Carousel=h.Carousel,exports.CarouselIndicatorDots=h.CarouselIndicatorDots,exports.CarouselIndicatorLines=h.CarouselIndicatorLines,exports.CheckRow=g.CheckRow,exports.Checkbox=_.Checkbox,exports.Chip=y.Chip,exports.Clamp=b.Clamp,exports.ColorPicker=x.ColorPicker,exports.ColorSwatch=x.ColorSwatch,exports.ColumnView=S.ColumnView,exports.ComboRow=C.ComboRow,exports.ContributionGraph=T.ContributionGraph,exports.CountDownTimer=E.CountDownTimer,exports.Dialog=D.Dialog,exports.Drawer=O.Drawer,exports.Dropdown=k.Dropdown,exports.EntryRow=A.EntryRow,exports.ExpanderRow=j.ExpanderRow,exports.Footer=M.Footer,exports.Frame=N.Frame,exports.GNOME_BREAKPOINTS=H.GNOME_BREAKPOINTS,exports.GNOME_PALETTE=x.GNOME_PALETTE,exports.GnomeProvider=P.GnomeProvider,exports.HeaderBar=F.HeaderBar,exports.Icon=v.Icon,exports.IconButton=L.IconButton,exports.InlineViewSwitcher=R.InlineViewSwitcher,exports.InlineViewSwitcherItem=z.InlineViewSwitcherItem,exports.Link=B.Link,exports.LinkedGroup=V.LinkedGroup,exports.NavigationPage=W.NavigationPage,exports.NavigationSplitView=U.NavigationSplitView,exports.NavigationView=W.NavigationView,exports.OverlaySplitView=G.OverlaySplitView,exports.PasswordEntryRow=K.PasswordEntryRow,exports.PathBar=q.PathBar,exports.Popover=J.Popover,exports.PreferencesDialog=Y.PreferencesDialog,exports.PreferencesGroup=X.PreferencesGroup,exports.PreferencesPage=Z.PreferencesPage,exports.ProgressBar=Q.ProgressBar,exports.RadioButton=ne.RadioButton,exports.ScrollToTop=re.ScrollToTop,exports.SearchBar=ae.SearchBar,exports.SegmentedBar=oe.SegmentedBar,exports.Separator=c.Separator,exports.ShortcutLabel=se.ShortcutLabel,exports.ShortcutsDialog=ce.ShortcutsDialog,exports.Sidebar=$.Sidebar,exports.SidebarCollapsedContext=$.SidebarCollapsedContext,exports.SidebarItem=ue.SidebarItem,exports.SidebarSection=de.SidebarSection,exports.Skeleton=fe.Skeleton,exports.Slider=pe.Slider,exports.Spacer=je.Spacer,exports.SpinButton=me.SpinButton,exports.SpinRow=he.SpinRow,exports.Spinner=ie.Spinner,exports.SplitButton=ge.SplitButton,exports.StatusBadge=_e.StatusBadge,exports.StatusPage=le.StatusPage,exports.Switch=ve.Switch,exports.SwitchRow=ye.SwitchRow,exports.TabBar=be.TabBar,exports.TabItem=xe.TabItem,exports.TabPanel=Se.TabPanel,exports.TerminalView=Ce.TerminalView,exports.Text=we.Text,exports.TextField=Te.TextField,exports.Timeline=Ee.Timeline,exports.Toast=De.Toast,exports.Toaster=Oe.Toaster,exports.ToggleGroup=ke.ToggleGroup,exports.ToggleGroupItem=Ae.ToggleGroupItem,exports.Toolbar=Me.Toolbar,exports.ToolbarView=Ne.ToolbarView,exports.Tooltip=I.Tooltip,exports.ViewSwitcher=Pe.ViewSwitcher,exports.ViewSwitcherBar=Ie.ViewSwitcherBar,exports.ViewSwitcherItem=Fe.ViewSwitcherItem,exports.ViewSwitcherSidebar=Le.ViewSwitcherSidebar,exports.ViewSwitcherSidebarItem=Re.ViewSwitcherSidebarItem,exports.WindowTitle=ze.WindowTitle,exports.WrapBox=Be.WrapBox,exports.useAccentColor=w.useAccentColor,exports.useBreakpoint=H.useBreakpoint,exports.useColorScheme=w.useColorScheme,exports.useDateTimeFormatter=w.useDateTimeFormatter,exports.useDir=w.useDir,exports.useLocale=w.useLocale,exports.useNavigation=W.useNavigation,exports.useNumberFormatter=w.useNumberFormatter,exports.useResolvedColorScheme=w.useResolvedColorScheme,exports.useSidebarCollapsed=$.useSidebarCollapsed;
|
package/dist/index.d.ts
CHANGED
|
@@ -102,6 +102,8 @@ export type { ProgressBarProps, ProgressBarVariant } from './components/Progress
|
|
|
102
102
|
export { ProgressBar } from './components/ProgressBar';
|
|
103
103
|
export type { RadioButtonProps } from './components/RadioButton';
|
|
104
104
|
export { RadioButton } from './components/RadioButton';
|
|
105
|
+
export type { ScrollToTopPosition, ScrollToTopProps, ScrollToTopVisible, } from './components/ScrollToTop';
|
|
106
|
+
export { ScrollToTop } from './components/ScrollToTop';
|
|
105
107
|
export type { SearchBarProps } from './components/SearchBar';
|
|
106
108
|
export { SearchBar } from './components/SearchBar';
|
|
107
109
|
export type { SegmentedBarProps, SegmentedBarSegment } from './components/SegmentedBar';
|
package/dist/index.js
CHANGED
|
@@ -54,42 +54,43 @@ import { PreferencesGroup as de } from "./components/PreferencesGroup/Preference
|
|
|
54
54
|
import { PreferencesPage as fe } from "./components/PreferencesPage/PreferencesPage.js";
|
|
55
55
|
import { ProgressBar as pe } from "./components/ProgressBar/ProgressBar.js";
|
|
56
56
|
import { RadioButton as me } from "./components/RadioButton/RadioButton.js";
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import {
|
|
70
|
-
import {
|
|
71
|
-
import {
|
|
72
|
-
import {
|
|
73
|
-
import {
|
|
74
|
-
import {
|
|
75
|
-
import {
|
|
76
|
-
import {
|
|
77
|
-
import {
|
|
78
|
-
import {
|
|
79
|
-
import {
|
|
80
|
-
import {
|
|
81
|
-
import {
|
|
82
|
-
import {
|
|
83
|
-
import {
|
|
84
|
-
import {
|
|
85
|
-
import {
|
|
86
|
-
import {
|
|
87
|
-
import {
|
|
88
|
-
import {
|
|
89
|
-
import {
|
|
90
|
-
import {
|
|
91
|
-
import {
|
|
92
|
-
import {
|
|
93
|
-
import {
|
|
94
|
-
import {
|
|
95
|
-
|
|
57
|
+
import { ScrollToTop as he } from "./components/ScrollToTop/ScrollToTop.js";
|
|
58
|
+
import { Spinner as ge } from "./components/Spinner/Spinner.js";
|
|
59
|
+
import { SearchBar as _e } from "./components/SearchBar/SearchBar.js";
|
|
60
|
+
import { SegmentedBar as ve } from "./components/SegmentedBar/SegmentedBar.js";
|
|
61
|
+
import { ShortcutLabel as ye } from "./components/ShortcutLabel/ShortcutLabel.js";
|
|
62
|
+
import { ShortcutsDialog as be } from "./components/ShortcutsDialog/ShortcutsDialog.js";
|
|
63
|
+
import { StatusPage as xe } from "./components/StatusPage/StatusPage.js";
|
|
64
|
+
import { Sidebar as Se, SidebarCollapsedContext as Ce, useSidebarCollapsed as we } from "./components/Sidebar/Sidebar.js";
|
|
65
|
+
import { SidebarItem as Te } from "./components/Sidebar/SidebarItem.js";
|
|
66
|
+
import { SidebarSection as Ee } from "./components/Sidebar/SidebarSection.js";
|
|
67
|
+
import { Skeleton as De } from "./components/Skeleton/Skeleton.js";
|
|
68
|
+
import { Slider as Oe } from "./components/Slider/Slider.js";
|
|
69
|
+
import { SpinButton as ke } from "./components/SpinButton/SpinButton.js";
|
|
70
|
+
import { SpinRow as Ae } from "./components/SpinRow/SpinRow.js";
|
|
71
|
+
import { SplitButton as je } from "./components/SplitButton/SplitButton.js";
|
|
72
|
+
import { StatusBadge as Me } from "./components/StatusBadge/StatusBadge.js";
|
|
73
|
+
import { Switch as Ne } from "./components/Switch/Switch.js";
|
|
74
|
+
import { SwitchRow as Pe } from "./components/SwitchRow/SwitchRow.js";
|
|
75
|
+
import { TabBar as Fe } from "./components/Tabs/TabBar.js";
|
|
76
|
+
import { TabItem as Ie } from "./components/Tabs/TabItem.js";
|
|
77
|
+
import { TabPanel as Le } from "./components/Tabs/TabPanel.js";
|
|
78
|
+
import { TerminalView as Re } from "./components/TerminalView/TerminalView.js";
|
|
79
|
+
import { Text as ze } from "./components/Text/Text.js";
|
|
80
|
+
import { TextField as Be } from "./components/TextField/TextField.js";
|
|
81
|
+
import { Timeline as Ve } from "./components/Timeline/Timeline.js";
|
|
82
|
+
import { Toast as He } from "./components/Toast/Toast.js";
|
|
83
|
+
import { Toaster as Ue } from "./components/Toast/Toaster.js";
|
|
84
|
+
import { ToggleGroup as We } from "./components/ToggleGroup/ToggleGroup.js";
|
|
85
|
+
import { ToggleGroupItem as Ge } from "./components/ToggleGroup/ToggleGroupItem.js";
|
|
86
|
+
import { Spacer as Ke } from "./components/Toolbar/Spacer.js";
|
|
87
|
+
import { Toolbar as qe } from "./components/Toolbar/Toolbar.js";
|
|
88
|
+
import { ToolbarView as Je } from "./components/ToolbarView/ToolbarView.js";
|
|
89
|
+
import { ViewSwitcher as Ye } from "./components/ViewSwitcher/ViewSwitcher.js";
|
|
90
|
+
import { ViewSwitcherItem as Xe } from "./components/ViewSwitcher/ViewSwitcherItem.js";
|
|
91
|
+
import { ViewSwitcherBar as Ze } from "./components/ViewSwitcherBar/ViewSwitcherBar.js";
|
|
92
|
+
import { ViewSwitcherSidebar as Qe } from "./components/ViewSwitcherSidebar/ViewSwitcherSidebar.js";
|
|
93
|
+
import { ViewSwitcherSidebarItem as $e } from "./components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.js";
|
|
94
|
+
import { WindowTitle as et } from "./components/WindowTitle/WindowTitle.js";
|
|
95
|
+
import { WrapBox as tt } from "./components/WrapBox/WrapBox.js";
|
|
96
|
+
export { e as AboutDialog, t as ActionRow, n as Avatar, r as AvatarRotator, i as Badge, a as Banner, o as Bin, s as Blockquote, c as BottomSheet, l as Box, d as BoxedList, f as BreakpointBin, p as Button, m as ButtonContent, h as ButtonRow, g as Card, _ as Carousel, v as CarouselIndicatorDots, y as CarouselIndicatorLines, b as CheckRow, x as Checkbox, C as Chip, w as Clamp, T as ColorPicker, E as ColorSwatch, O as ColumnView, k as ComboRow, L as ContributionGraph, R as CountDownTimer, z as Dialog, B as Drawer, V as Dropdown, H as EntryRow, U as ExpanderRow, W as Footer, G as Frame, ee as GNOME_BREAKPOINTS, D as GNOME_PALETTE, K as GnomeProvider, q as HeaderBar, S as Icon, Y as IconButton, X as InlineViewSwitcher, Z as InlineViewSwitcherItem, Q as Link, $ as LinkedGroup, re as NavigationPage, ne as NavigationSplitView, ie as NavigationView, oe as OverlaySplitView, se as PasswordEntryRow, ce as PathBar, le as Popover, ue as PreferencesDialog, de as PreferencesGroup, fe as PreferencesPage, pe as ProgressBar, me as RadioButton, he as ScrollToTop, _e as SearchBar, ve as SegmentedBar, u as Separator, ye as ShortcutLabel, be as ShortcutsDialog, Se as Sidebar, Ce as SidebarCollapsedContext, Te as SidebarItem, Ee as SidebarSection, De as Skeleton, Oe as Slider, Ke as Spacer, ke as SpinButton, Ae as SpinRow, ge as Spinner, je as SplitButton, Me as StatusBadge, xe as StatusPage, Ne as Switch, Pe as SwitchRow, Fe as TabBar, Ie as TabItem, Le as TabPanel, Re as TerminalView, ze as Text, Be as TextField, Ve as Timeline, He as Toast, Ue as Toaster, We as ToggleGroup, Ge as ToggleGroupItem, qe as Toolbar, Je as ToolbarView, J as Tooltip, Ye as ViewSwitcher, Ze as ViewSwitcherBar, Xe as ViewSwitcherItem, Qe as ViewSwitcherSidebar, $e as ViewSwitcherSidebarItem, et as WindowTitle, tt as WrapBox, A as useAccentColor, te as useBreakpoint, j as useColorScheme, M as useDateTimeFormatter, N as useDir, P as useLocale, ae as useNavigation, F as useNumberFormatter, I as useResolvedColorScheme, we as useSidebarCollapsed };
|