ionbase-ui 0.76.0 → 0.81.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/dist/components/Card.d.ts +61 -0
- package/dist/components/Card.d.ts.map +1 -0
- package/dist/components/Card.js +37 -0
- package/dist/components/Card.js.map +1 -0
- package/dist/components/CommandPalette.d.ts +76 -0
- package/dist/components/CommandPalette.d.ts.map +1 -0
- package/dist/components/CommandPalette.js +194 -0
- package/dist/components/CommandPalette.js.map +1 -0
- package/dist/components/DateField.d.ts +14 -0
- package/dist/components/DateField.d.ts.map +1 -1
- package/dist/components/DateField.js +1 -1
- package/dist/components/DateField.js.map +1 -1
- package/dist/components/Kbd.d.ts +45 -0
- package/dist/components/Kbd.d.ts.map +1 -0
- package/dist/components/Kbd.js +45 -0
- package/dist/components/Kbd.js.map +1 -0
- package/dist/components/Table.d.ts +18 -0
- package/dist/components/Table.d.ts.map +1 -1
- package/dist/components/Table.js +14 -3
- package/dist/components/Table.js.map +1 -1
- package/dist/components/TagGroup.d.ts +51 -0
- package/dist/components/TagGroup.d.ts.map +1 -0
- package/dist/components/TagGroup.js +84 -0
- package/dist/components/TagGroup.js.map +1 -0
- package/dist/components/TimeField.d.ts +72 -0
- package/dist/components/TimeField.d.ts.map +1 -0
- package/dist/components/TimeField.js +102 -0
- package/dist/components/TimeField.js.map +1 -0
- package/dist/components/index.d.ts +14 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +6 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/iso-time.d.ts +23 -0
- package/dist/components/iso-time.d.ts.map +1 -0
- package/dist/components/iso-time.js +34 -0
- package/dist/components/iso-time.js.map +1 -0
- package/dist/components/shortcut.d.ts +19 -0
- package/dist/components/shortcut.d.ts.map +1 -0
- package/dist/components/shortcut.js +122 -0
- package/dist/components/shortcut.js.map +1 -0
- package/dist/components/use-table-sort.d.ts +38 -0
- package/dist/components/use-table-sort.d.ts.map +1 -0
- package/dist/components/use-table-sort.js +33 -0
- package/dist/components/use-table-sort.js.map +1 -0
- package/dist/figma-descriptions.json +103 -68
- package/dist/figma-map.json +343 -2
- package/dist/meta/Card.json +153 -0
- package/dist/meta/Checkbox.json +2 -2
- package/dist/meta/CommandPalette.json +178 -0
- package/dist/meta/DatePicker.json +2 -2
- package/dist/meta/Kbd.json +97 -0
- package/dist/meta/Radio.json +2 -2
- package/dist/meta/RadioGroup.json +2 -2
- package/dist/meta/Table.json +4 -1
- package/dist/meta/TableBody.json +3 -0
- package/dist/meta/TableCell.json +49 -5
- package/dist/meta/TableHead.json +3 -0
- package/dist/meta/TableRow.json +3 -0
- package/dist/meta/Tag.json +54 -0
- package/dist/meta/TagGroup.json +211 -0
- package/dist/meta/TimeField.json +224 -0
- package/dist/meta/Toggle.json +2 -2
- package/dist/meta/components.json +1010 -36
- package/dist/meta/contrast.json +1133 -6
- package/dist/meta/index.json +86 -12
- package/dist/meta/patterns/DataTable.json +27 -3
- package/dist/meta/patterns/PageShell.json +15 -2
- package/dist/meta/patterns/index.json +7 -3
- package/dist/styles/agent-activity.css +4 -2
- package/dist/styles/approval-gate.css +4 -3
- package/dist/styles/card.css +75 -0
- package/dist/styles/citation.css +4 -2
- package/dist/styles/command-palette.css +250 -0
- package/dist/styles/confidence-indicator.css +2 -2
- package/dist/styles/index.css +5 -0
- package/dist/styles/kbd.css +47 -0
- package/dist/styles/streaming-text.css +3 -2
- package/dist/styles/table.css +51 -0
- package/dist/styles/tag-group.css +172 -0
- package/dist/styles/time-field.css +31 -0
- package/llms.txt +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Which heading element the title renders as.
|
|
4
|
+
*
|
|
5
|
+
* `h1` is deliberately absent: a card is a section of a page, never the page's
|
|
6
|
+
* own title.
|
|
7
|
+
*/
|
|
8
|
+
export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
|
|
9
|
+
/** `danger` marks a card whose actions cannot be undone. */
|
|
10
|
+
export type CardIntent = 'default' | 'danger';
|
|
11
|
+
export interface CardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
|
|
12
|
+
/**
|
|
13
|
+
* The card's heading. With a title the card is a `<section>` named by it;
|
|
14
|
+
* without one it is a plain surface — a `<div>`, for skeletons and for
|
|
15
|
+
* content that already has its own heading.
|
|
16
|
+
*/
|
|
17
|
+
title?: React.ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Heading element for the title. Defaults to `h2`: most cards are the
|
|
20
|
+
* first level of section under the page's `h1`. The outline is the page's
|
|
21
|
+
* decision, so it is a prop, not a constant.
|
|
22
|
+
*/
|
|
23
|
+
headingLevel?: CardHeadingLevel;
|
|
24
|
+
/** One line under the title — what the card holds or when changes apply. */
|
|
25
|
+
description?: React.ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* One control at the end of the title row: a standalone Link ("All runs")
|
|
28
|
+
* or a small Button. More than one belongs in the body.
|
|
29
|
+
*/
|
|
30
|
+
action?: React.ReactNode;
|
|
31
|
+
/** `danger` for a card of irreversible actions — the danger zone. */
|
|
32
|
+
intent?: CardIntent;
|
|
33
|
+
/**
|
|
34
|
+
* Whether a titled card is a landmark. Defaults to `true`. Set `false`
|
|
35
|
+
* when the card's only content is itself a landmark named by the same
|
|
36
|
+
* words — a Table's scroll region — or the page gets two regions with one
|
|
37
|
+
* name. The heading still renders; only the `<section>` becomes a `<div>`.
|
|
38
|
+
*/
|
|
39
|
+
isRegion?: boolean;
|
|
40
|
+
children?: React.ReactNode;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Card — a bordered surface that groups one part of a page.
|
|
44
|
+
*
|
|
45
|
+
* Promoted from the demo app, where the same surface was hand-written as
|
|
46
|
+
* `.demo-panel` in nine screens: a settings group, a chart panel, a runs log,
|
|
47
|
+
* the danger zone. For a feature row with media use FullCard; for one
|
|
48
|
+
* headline figure use StatTile.
|
|
49
|
+
*
|
|
50
|
+
* THE TITLE DECIDES THE ELEMENT
|
|
51
|
+
*
|
|
52
|
+
* A titled card is a `<section aria-labelledby>` — a named region, so a
|
|
53
|
+
* screen reader user can jump between cards the way a sighted one scans
|
|
54
|
+
* them. An untitled card is a `<div>`: a `<section>` with no name is not a
|
|
55
|
+
* landmark at all, and pretending otherwise only adds noise.
|
|
56
|
+
*
|
|
57
|
+
* No `'use client'`: `useId` resolves on the server, and nothing here is
|
|
58
|
+
* interactive. Interactive parts arrive through `action` and `children`.
|
|
59
|
+
*/
|
|
60
|
+
export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
|
|
61
|
+
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,4DAA4D;AAC5D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9C,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,OAAO,CACR;IACC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,4EAA4E;IAC5E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qEAAqE;IACrE,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,IAAI,+EAwDhB,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useId } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Card — a bordered surface that groups one part of a page.
|
|
5
|
+
*
|
|
6
|
+
* Promoted from the demo app, where the same surface was hand-written as
|
|
7
|
+
* `.demo-panel` in nine screens: a settings group, a chart panel, a runs log,
|
|
8
|
+
* the danger zone. For a feature row with media use FullCard; for one
|
|
9
|
+
* headline figure use StatTile.
|
|
10
|
+
*
|
|
11
|
+
* THE TITLE DECIDES THE ELEMENT
|
|
12
|
+
*
|
|
13
|
+
* A titled card is a `<section aria-labelledby>` — a named region, so a
|
|
14
|
+
* screen reader user can jump between cards the way a sighted one scans
|
|
15
|
+
* them. An untitled card is a `<div>`: a `<section>` with no name is not a
|
|
16
|
+
* landmark at all, and pretending otherwise only adds noise.
|
|
17
|
+
*
|
|
18
|
+
* No `'use client'`: `useId` resolves on the server, and nothing here is
|
|
19
|
+
* interactive. Interactive parts arrive through `action` and `children`.
|
|
20
|
+
*/
|
|
21
|
+
export const Card = forwardRef(({ title, headingLevel = 2, description, action, intent = 'default', isRegion = true, className, children, ...rest }, ref) => {
|
|
22
|
+
const titleId = useId();
|
|
23
|
+
const Heading = `h${headingLevel}`;
|
|
24
|
+
const hasTitle = title != null && title !== false;
|
|
25
|
+
const Root = hasTitle && isRegion ? 'section' : 'div';
|
|
26
|
+
return (_jsxs(Root, { ...rest, ref: ref, "aria-labelledby": Root === 'section'
|
|
27
|
+
? (rest['aria-labelledby'] ?? titleId)
|
|
28
|
+
: rest['aria-labelledby'], className: [
|
|
29
|
+
'ion-card',
|
|
30
|
+
intent === 'danger' && 'ion-card--danger',
|
|
31
|
+
className,
|
|
32
|
+
]
|
|
33
|
+
.filter(Boolean)
|
|
34
|
+
.join(' '), children: [(hasTitle || action) && (_jsxs("div", { className: "ion-card__header", children: [hasTitle && (_jsxs("div", { className: "ion-card__heading", children: [_jsx(Heading, { id: titleId, className: "ion-card__title", children: title }), description && (_jsx("p", { className: "ion-card__description", children: description }))] })), action && _jsx("div", { className: "ion-card__action", children: action })] })), children] }));
|
|
35
|
+
});
|
|
36
|
+
Card.displayName = 'Card';
|
|
37
|
+
//# sourceMappingURL=Card.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAgDjD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EACE,KAAK,EACL,YAAY,GAAG,CAAC,EAChB,WAAW,EACX,MAAM,EACN,MAAM,GAAG,SAAS,EAClB,QAAQ,GAAG,IAAI,EACf,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAC;IAC5C,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC;IAClD,MAAM,IAAI,GAAG,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;IAEtD,OAAO,CACL,MAAC,IAAI,OACC,IAAI,EACR,GAAG,EAAE,GAAgC,qBAEnC,IAAI,KAAK,SAAS;YAChB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,OAAO,CAAC;YACtC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,EAE7B,SAAS,EAAE;YACT,UAAU;YACV,MAAM,KAAK,QAAQ,IAAI,kBAAkB;YACzC,SAAS;SACV;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,aAEX,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CACvB,eAAK,SAAS,EAAC,kBAAkB,aAC9B,QAAQ,IAAI,CACX,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,OAAO,IAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,iBAAiB,YAC9C,KAAK,GACE,EACT,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,uBAAuB,YAAE,WAAW,GAAK,CACvD,IACG,CACP,EACA,MAAM,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,MAAM,GAAO,IACvD,CACP,EACA,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface CommandPaletteItem {
|
|
3
|
+
/** Passed to `onAction`. Unique within the palette. */
|
|
4
|
+
id: string;
|
|
5
|
+
/** What the row says — a verb first: "Create agent", "Go to Runs". */
|
|
6
|
+
label: string;
|
|
7
|
+
/** A second line. Searchable. */
|
|
8
|
+
description?: string;
|
|
9
|
+
/**
|
|
10
|
+
* The heading this command is listed under. Sections appear in the order
|
|
11
|
+
* their first command does; commands without one come first, unheaded.
|
|
12
|
+
*/
|
|
13
|
+
section?: string;
|
|
14
|
+
/** Leading icon. Decorative — the label names the command. */
|
|
15
|
+
icon?: React.ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* The command's own shortcut, shown as a hint: `mod+shift+n`. Shown, NOT
|
|
18
|
+
* bound — the palette does not listen for it. Bind it where the command
|
|
19
|
+
* lives, or the hint promises a key that does nothing.
|
|
20
|
+
*/
|
|
21
|
+
shortcut?: string;
|
|
22
|
+
/** Other words that should find it: "delete" for "Remove agent". */
|
|
23
|
+
keywords?: readonly string[];
|
|
24
|
+
/** Listed but not runnable, and skipped by the arrow keys. */
|
|
25
|
+
isDisabled?: boolean;
|
|
26
|
+
}
|
|
27
|
+
export interface CommandPaletteProps {
|
|
28
|
+
/** Every command. Filtering happens here, against what is typed. */
|
|
29
|
+
commands: readonly CommandPaletteItem[];
|
|
30
|
+
/**
|
|
31
|
+
* Runs the chosen command. Called AFTER the palette has closed and handed
|
|
32
|
+
* focus back, so an action that moves focus — to a search field, into a
|
|
33
|
+
* form — keeps it.
|
|
34
|
+
*/
|
|
35
|
+
onAction: (id: string) => void;
|
|
36
|
+
isOpen?: boolean;
|
|
37
|
+
defaultOpen?: boolean;
|
|
38
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
39
|
+
/**
|
|
40
|
+
* The shortcut that opens it from anywhere on the page, and closes it again.
|
|
41
|
+
* Defaults to `mod+k` — ⌘K on a Mac, Ctrl+K elsewhere. `null` turns it off,
|
|
42
|
+
* for a page that opens the palette some other way.
|
|
43
|
+
*/
|
|
44
|
+
openShortcut?: string | null;
|
|
45
|
+
/** Names the dialog and the search field. */
|
|
46
|
+
label?: string;
|
|
47
|
+
placeholder?: string;
|
|
48
|
+
/** Shown in place of the list when nothing matches. */
|
|
49
|
+
emptyLabel?: React.ReactNode;
|
|
50
|
+
className?: string;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* CommandPalette — every action in the product, one search away.
|
|
54
|
+
*
|
|
55
|
+
* ⌘K (Ctrl+K elsewhere) opens it from anywhere; typing filters; Enter runs.
|
|
56
|
+
* Mount it once, near the root, and hand it every command the product has.
|
|
57
|
+
*
|
|
58
|
+
* WHY NOT A MODAL WITH A COMBOBOX IN IT
|
|
59
|
+
*
|
|
60
|
+
* A Combobox's list is a popover that opens and closes on its own rules, and
|
|
61
|
+
* it SELECTS a value that stays selected. A palette's list is always open and
|
|
62
|
+
* each row is RUN, once, and the palette goes away. The ARIA shape is the same
|
|
63
|
+
* — a combobox driving a listbox through `aria-activedescendant` — so this
|
|
64
|
+
* uses it, without the parts of Combobox that exist for choosing a value.
|
|
65
|
+
*
|
|
66
|
+
* NOT A NAVIGATION MENU
|
|
67
|
+
*
|
|
68
|
+
* Everything in the palette must also be reachable without it. It is a faster
|
|
69
|
+
* route for people who know what they want, and a shortcut nobody told you
|
|
70
|
+
* about is not a route at all.
|
|
71
|
+
*/
|
|
72
|
+
export declare function CommandPalette({ commands, onAction, isOpen, defaultOpen, onOpenChange, openShortcut, label, placeholder, emptyLabel, className, }: CommandPaletteProps): React.JSX.Element | null;
|
|
73
|
+
export declare namespace CommandPalette {
|
|
74
|
+
var displayName: string;
|
|
75
|
+
}
|
|
76
|
+
//# sourceMappingURL=CommandPalette.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/components/CommandPalette.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAa3E,MAAM,WAAW,kBAAkB;IACjC,uDAAuD;IACvD,EAAE,EAAE,MAAM,CAAC;IACX,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,oEAAoE;IACpE,QAAQ,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuTD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,YAAsB,EACtB,KAAyB,EACzB,WAAyC,EACzC,UAAmC,EACnC,SAAS,GACV,EAAE,mBAAmB,4BA2DrB;yBAtEe,cAAc"}
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
4
|
+
import { Overlay, useDialog, useFilter, useModalOverlay, mergeProps, } from 'react-aria';
|
|
5
|
+
import { useOverlayTriggerState } from 'react-stately';
|
|
6
|
+
import { Kbd, useIsMac } from './Kbd.js';
|
|
7
|
+
import { matchesShortcut, parseShortcut } from './shortcut.js';
|
|
8
|
+
const SearchIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m20 20-3.5-3.5" })] }));
|
|
9
|
+
/** Groups in first-appearance order; unsectioned commands lead, unheaded. */
|
|
10
|
+
function toSections(commands) {
|
|
11
|
+
const bySection = new Map([
|
|
12
|
+
[undefined, []],
|
|
13
|
+
]);
|
|
14
|
+
for (const c of commands) {
|
|
15
|
+
const list = bySection.get(c.section);
|
|
16
|
+
if (list)
|
|
17
|
+
list.push(c);
|
|
18
|
+
else
|
|
19
|
+
bySection.set(c.section, [c]);
|
|
20
|
+
}
|
|
21
|
+
return [...bySection]
|
|
22
|
+
.filter(([, list]) => list.length > 0)
|
|
23
|
+
.map(([title, list]) => ({ title, commands: list }));
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* The dialog, mounted only while open — AGENTS.md's overlay rule: `useDialog`
|
|
27
|
+
* resolves its focus and name in effects that run when the CALLER mounts.
|
|
28
|
+
* Mounting fresh on every open also empties the query and resets the active
|
|
29
|
+
* row, which is what a palette should do.
|
|
30
|
+
*/
|
|
31
|
+
function CommandPalettePanel({ state, commands, onRun, label, placeholder, emptyLabel, className, }) {
|
|
32
|
+
const panelRef = useRef(null);
|
|
33
|
+
const inputRef = useRef(null);
|
|
34
|
+
const listRef = useRef(null);
|
|
35
|
+
const baseId = useId();
|
|
36
|
+
const listId = `${baseId}-list`;
|
|
37
|
+
const { modalProps, underlayProps } = useModalOverlay({ isDismissable: true }, state, panelRef);
|
|
38
|
+
const { dialogProps } = useDialog({ 'aria-label': label }, panelRef);
|
|
39
|
+
const [query, setQuery] = useState('');
|
|
40
|
+
const { contains } = useFilter({ sensitivity: 'base' });
|
|
41
|
+
const sections = useMemo(() => {
|
|
42
|
+
const q = query.trim();
|
|
43
|
+
const matched = q
|
|
44
|
+
? commands.filter((c) => contains([c.label, c.description, c.section, ...(c.keywords ?? [])]
|
|
45
|
+
.filter(Boolean)
|
|
46
|
+
.join(' '), q))
|
|
47
|
+
: commands;
|
|
48
|
+
return toSections(matched);
|
|
49
|
+
}, [commands, contains, query]);
|
|
50
|
+
/* The rows the arrow keys move through, in display order. */
|
|
51
|
+
const rows = useMemo(() => sections.flatMap((s) => s.commands), [sections]);
|
|
52
|
+
const runnable = useMemo(() => rows.filter((c) => !c.isDisabled), [rows]);
|
|
53
|
+
const [activeId, setActiveId] = useState(null);
|
|
54
|
+
/*
|
|
55
|
+
* The active row follows the query: a new query highlights its first
|
|
56
|
+
* runnable result, so Enter after typing runs the best match. Derived rather
|
|
57
|
+
* than set in an effect, so the highlight and the list never disagree for a
|
|
58
|
+
* frame.
|
|
59
|
+
*/
|
|
60
|
+
const active = runnable.find((c) => c.id === activeId) ?? runnable[0] ?? null;
|
|
61
|
+
const optionId = (c) => `${baseId}-${rows.indexOf(c)}`;
|
|
62
|
+
// Keep the keyboard's row in view as it moves past the list's edge.
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
if (!active)
|
|
65
|
+
return;
|
|
66
|
+
document
|
|
67
|
+
.getElementById(optionId(active))
|
|
68
|
+
?.scrollIntoView?.({ block: 'nearest' });
|
|
69
|
+
// optionId is a pure function of rows, which `active` already follows.
|
|
70
|
+
}, [active]);
|
|
71
|
+
const move = (by) => {
|
|
72
|
+
if (!runnable.length)
|
|
73
|
+
return;
|
|
74
|
+
const at = active ? runnable.indexOf(active) : -1;
|
|
75
|
+
const next = (at + by + runnable.length) % runnable.length;
|
|
76
|
+
setActiveId(runnable[next].id);
|
|
77
|
+
};
|
|
78
|
+
const onKeyDown = (e) => {
|
|
79
|
+
if (e.nativeEvent.isComposing)
|
|
80
|
+
return;
|
|
81
|
+
switch (e.key) {
|
|
82
|
+
case 'ArrowDown':
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
move(1);
|
|
85
|
+
break;
|
|
86
|
+
case 'ArrowUp':
|
|
87
|
+
e.preventDefault();
|
|
88
|
+
move(-1);
|
|
89
|
+
break;
|
|
90
|
+
case 'Enter':
|
|
91
|
+
e.preventDefault();
|
|
92
|
+
if (active)
|
|
93
|
+
onRun(active.id);
|
|
94
|
+
break;
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
const count = runnable.length;
|
|
98
|
+
return (_jsx("div", { ...underlayProps, className: "ion-command-palette__scrim", children: _jsxs("div", { ...mergeProps(modalProps, dialogProps), ref: panelRef, className: ['ion-command-palette', className || '']
|
|
99
|
+
.filter(Boolean)
|
|
100
|
+
.join(' '), children: [_jsxs("div", { className: "ion-command-palette__search", children: [_jsx("span", { className: "ion-command-palette__search-icon", "aria-hidden": "true", children: _jsx(SearchIcon, {}) }), _jsx("input", { ref: inputRef, className: "ion-command-palette__input", type: "text", role: "combobox", "aria-label": label, "aria-expanded": "true", "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? optionId(active) : undefined, autoComplete: "off", autoCorrect: "off", spellCheck: false,
|
|
101
|
+
// A palette exists to be typed into; focus starts in the field.
|
|
102
|
+
autoFocus: true, placeholder: placeholder, value: query, onChange: (e) => {
|
|
103
|
+
setQuery(e.target.value);
|
|
104
|
+
setActiveId(null);
|
|
105
|
+
}, onKeyDown: onKeyDown })] }), _jsx("div", { ref: listRef, id: listId, role: "listbox", "aria-label": label, className: "ion-command-palette__list", children: sections.map((section, s) => {
|
|
106
|
+
const headingId = `${baseId}-section-${s}`;
|
|
107
|
+
const options = section.commands.map((c) => {
|
|
108
|
+
const isActive = c === active;
|
|
109
|
+
return (_jsxs("div", { id: optionId(c), role: "option", "aria-selected": isActive, "aria-disabled": c.isDisabled || undefined, className: "ion-command-palette__option", "data-focused": isActive || undefined, "data-disabled": c.isDisabled || undefined,
|
|
110
|
+
/*
|
|
111
|
+
* pointermove, not pointerenter: a list scrolled by the
|
|
112
|
+
* keyboard slides rows under a resting pointer, and enter
|
|
113
|
+
* would hand the highlight to whatever landed there.
|
|
114
|
+
*/
|
|
115
|
+
onPointerMove: () => {
|
|
116
|
+
if (!c.isDisabled && !isActive)
|
|
117
|
+
setActiveId(c.id);
|
|
118
|
+
},
|
|
119
|
+
// Keep focus in the field; a click must not blur it first.
|
|
120
|
+
onMouseDown: (e) => e.preventDefault(), onClick: () => {
|
|
121
|
+
if (!c.isDisabled)
|
|
122
|
+
onRun(c.id);
|
|
123
|
+
}, children: [c.icon && (_jsx("span", { className: "ion-command-palette__icon", "aria-hidden": "true", children: c.icon })), _jsxs("span", { className: "ion-command-palette__text", children: [_jsx("span", { className: "ion-command-palette__label", children: c.label }), c.description && (_jsx("span", { className: "ion-command-palette__description", children: c.description }))] }), c.shortcut && (_jsx(Kbd, { shortcut: c.shortcut, className: "ion-command-palette__shortcut" }))] }, c.id));
|
|
124
|
+
});
|
|
125
|
+
return section.title ? (_jsxs("div", { role: "group", "aria-labelledby": headingId, className: "ion-command-palette__section", children: [_jsx("div", { id: headingId, role: "presentation", className: "ion-command-palette__heading", children: section.title }), options] }, section.title)) : (_jsx(React.Fragment, { children: options }, ""));
|
|
126
|
+
}) }), rows.length === 0 && (_jsx("div", { className: "ion-command-palette__empty", children: emptyLabel })), _jsx("div", { className: "ion-visually-hidden", role: "status", "aria-live": "polite", children: query ? `${count} ${count === 1 ? 'command' : 'commands'}` : '' }), _jsxs("div", { className: "ion-command-palette__footer", "aria-hidden": "true", children: [_jsxs("span", { className: "ion-command-palette__hint", children: [_jsx(Kbd, { shortcut: "up" }), _jsx(Kbd, { shortcut: "down" }), "to move"] }), _jsxs("span", { className: "ion-command-palette__hint", children: [_jsx(Kbd, { shortcut: "enter" }), "to run"] }), _jsxs("span", { className: "ion-command-palette__hint", children: [_jsx(Kbd, { shortcut: "esc" }), "to close"] })] })] }) }));
|
|
127
|
+
}
|
|
128
|
+
/* ---------------------------------------------------------------- palette */
|
|
129
|
+
/**
|
|
130
|
+
* CommandPalette — every action in the product, one search away.
|
|
131
|
+
*
|
|
132
|
+
* ⌘K (Ctrl+K elsewhere) opens it from anywhere; typing filters; Enter runs.
|
|
133
|
+
* Mount it once, near the root, and hand it every command the product has.
|
|
134
|
+
*
|
|
135
|
+
* WHY NOT A MODAL WITH A COMBOBOX IN IT
|
|
136
|
+
*
|
|
137
|
+
* A Combobox's list is a popover that opens and closes on its own rules, and
|
|
138
|
+
* it SELECTS a value that stays selected. A palette's list is always open and
|
|
139
|
+
* each row is RUN, once, and the palette goes away. The ARIA shape is the same
|
|
140
|
+
* — a combobox driving a listbox through `aria-activedescendant` — so this
|
|
141
|
+
* uses it, without the parts of Combobox that exist for choosing a value.
|
|
142
|
+
*
|
|
143
|
+
* NOT A NAVIGATION MENU
|
|
144
|
+
*
|
|
145
|
+
* Everything in the palette must also be reachable without it. It is a faster
|
|
146
|
+
* route for people who know what they want, and a shortcut nobody told you
|
|
147
|
+
* about is not a route at all.
|
|
148
|
+
*/
|
|
149
|
+
export function CommandPalette({ commands, onAction, isOpen, defaultOpen, onOpenChange, openShortcut = 'mod+k', label = 'Command palette', placeholder = 'Type a command or search…', emptyLabel = 'No matching commands', className, }) {
|
|
150
|
+
const state = useOverlayTriggerState({ isOpen, defaultOpen, onOpenChange });
|
|
151
|
+
const isMac = useIsMac();
|
|
152
|
+
// Parsed during render so a malformed shortcut throws where it is written.
|
|
153
|
+
const parsed = useMemo(() => (openShortcut ? parseShortcut(openShortcut) : null), [openShortcut]);
|
|
154
|
+
/*
|
|
155
|
+
* The listener lives on the document, not on the panel, because it has to
|
|
156
|
+
* work while the palette is closed — and while it is open, the same key
|
|
157
|
+
* closes it. Kept in a ref so re-renders do not re-subscribe.
|
|
158
|
+
*/
|
|
159
|
+
const toggle = useRef(state.toggle);
|
|
160
|
+
toggle.current = state.toggle;
|
|
161
|
+
useEffect(() => {
|
|
162
|
+
if (!parsed)
|
|
163
|
+
return;
|
|
164
|
+
const onKeyDown = (e) => {
|
|
165
|
+
if (e.repeat || !matchesShortcut(e, parsed, isMac))
|
|
166
|
+
return;
|
|
167
|
+
e.preventDefault();
|
|
168
|
+
toggle.current();
|
|
169
|
+
};
|
|
170
|
+
document.addEventListener('keydown', onKeyDown);
|
|
171
|
+
return () => document.removeEventListener('keydown', onKeyDown);
|
|
172
|
+
}, [parsed, isMac]);
|
|
173
|
+
/*
|
|
174
|
+
* The command runs once the palette is gone, not from inside it. While the
|
|
175
|
+
* dialog is mounted its focus scope pulls any focus that leaves it straight
|
|
176
|
+
* back, so an action that focuses a field would lose that focus to the
|
|
177
|
+
* palette's own search box. After unmount, React Aria only restores focus to
|
|
178
|
+
* the trigger if nothing else has claimed it.
|
|
179
|
+
*/
|
|
180
|
+
const pending = useRef(null);
|
|
181
|
+
useEffect(() => {
|
|
182
|
+
if (state.isOpen || pending.current === null)
|
|
183
|
+
return;
|
|
184
|
+
const id = pending.current;
|
|
185
|
+
pending.current = null;
|
|
186
|
+
onAction(id);
|
|
187
|
+
});
|
|
188
|
+
return state.isOpen ? (_jsx(Overlay, { children: _jsx(CommandPalettePanel, { state: state, commands: commands, onRun: (id) => {
|
|
189
|
+
pending.current = id;
|
|
190
|
+
state.close();
|
|
191
|
+
}, label: label, placeholder: placeholder, emptyLabel: emptyLabel, className: className }) })) : null;
|
|
192
|
+
}
|
|
193
|
+
CommandPalette.displayName = 'CommandPalette';
|
|
194
|
+
//# sourceMappingURL=CommandPalette.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CommandPalette.js","sourceRoot":"","sources":["../../src/components/CommandPalette.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,22 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { AriaDatePickerProps, DateValue } from 'react-aria';
|
|
3
|
+
import type { DateFieldState, DateSegment } from 'react-stately';
|
|
3
4
|
interface DateFieldProps extends AriaDatePickerProps<DateValue> {
|
|
4
5
|
className?: string;
|
|
5
6
|
}
|
|
7
|
+
/**
|
|
8
|
+
* One segment — a month, a day, a year, or a literal separator.
|
|
9
|
+
*
|
|
10
|
+
* The literal is rendered by the same component rather than being filtered out
|
|
11
|
+
* before the map. `useDateSegment` returns the separator's own props, including
|
|
12
|
+
* the `aria-hidden` that keeps `/` and `.` out of the announcement, and
|
|
13
|
+
* re-deriving that here would mean re-deriving it wrongly the first time a
|
|
14
|
+
* locale used a separator nobody tested.
|
|
15
|
+
*/
|
|
16
|
+
export declare function Segment({ segment, state, }: {
|
|
17
|
+
segment: DateSegment;
|
|
18
|
+
state: DateFieldState;
|
|
19
|
+
}): React.JSX.Element;
|
|
6
20
|
/**
|
|
7
21
|
* The field itself. Rendered inside the picker's `.ion-input` box, which owns
|
|
8
22
|
* the border, the background and the states — exactly as Combobox reuses it.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA2DjE,UAAU,cAAe,SAAQ,mBAAmB,CAAC,SAAS,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,GACN,EAAE;IACD,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;CACvB,qBAsCA;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAqChE;yBArCe,SAAS"}
|
|
@@ -13,7 +13,7 @@ import { createCalendar } from '@internationalized/date';
|
|
|
13
13
|
* re-deriving that here would mean re-deriving it wrongly the first time a
|
|
14
14
|
* locale used a separator nobody tested.
|
|
15
15
|
*/
|
|
16
|
-
function Segment({ segment, state, }) {
|
|
16
|
+
export function Segment({ segment, state, }) {
|
|
17
17
|
const ref = useRef(null);
|
|
18
18
|
const { segmentProps } = useDateSegment(segment, state, ref);
|
|
19
19
|
return (_jsx("div", { ...segmentProps, ref: ref, className: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAiEzD;;;;;;;;GAQG;AACH,
|
|
1
|
+
{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAiEzD;;;;;;;;GAQG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,GAIN;IACC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAE7D,OAAO,CACL,iBACM,YAAY,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,yBAAyB;YACzB,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE;YACnE,OAAO,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE;SACrE;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,sBACM,OAAO,CAAC,aAAa,IAAI,SAAS,EACpD,KAAK,EAAE;YACL;;;;;;;;;;;eAWG;YACH,QAAQ,EACN,OAAO,CAAC,QAAQ,IAAI,IAAI;gBACtB,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,IAAI;gBACxC,CAAC,CAAC,SAAS;SAChB,YAEA,OAAO,CAAC,IAAI,GACT,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAC/D;;;;OAIG;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAE/B,MAAM,KAAK,GAAG,iBAAiB,CAAC;QAC9B,GAAG,KAAK;QACR,MAAM;QACN;;;;;WAKG;QACH,cAAc;KACf,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAEvD,OAAO,CACL,iBACM,UAAU,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;QAClC,iEAAiE;QACjE,kEAAkE;QAClE,2CAA2C;QAC3C,KAAC,OAAO,IAAS,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAjC,CAAC,CAAoC,CACpD,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type KbdPlatform = 'mac' | 'other';
|
|
3
|
+
/**
|
|
4
|
+
* Whether the reader is on an Apple platform.
|
|
5
|
+
*
|
|
6
|
+
* `false` on the server and during hydration, then the real answer — so a
|
|
7
|
+
* server-rendered "Ctrl" becomes "⌘" after hydration instead of producing a
|
|
8
|
+
* mismatch. Not exported from the package: `platform` is the public way to
|
|
9
|
+
* choose.
|
|
10
|
+
*/
|
|
11
|
+
export declare function useIsMac(): boolean;
|
|
12
|
+
export interface KbdProps {
|
|
13
|
+
/**
|
|
14
|
+
* A whole shortcut, `+`-joined: `mod+k`, `mod+shift+p`, `esc`. `mod` is ⌘
|
|
15
|
+
* on a Mac and Ctrl elsewhere, so write `mod` rather than guessing. Drawn as
|
|
16
|
+
* one key per part, in the platform's order.
|
|
17
|
+
*/
|
|
18
|
+
shortcut?: string;
|
|
19
|
+
/** One key, as printed: `K`, `Esc`, `/`. Use `shortcut` for a combination. */
|
|
20
|
+
children?: React.ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Leave it out: the reader's platform is detected. Set it only to show a
|
|
23
|
+
* specific platform's keys — a docs page comparing the two.
|
|
24
|
+
*/
|
|
25
|
+
platform?: KbdPlatform;
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Kbd — a key, or a keyboard shortcut, as printed on the keyboard.
|
|
30
|
+
*
|
|
31
|
+
* `<kbd>` is the element HTML has for this, and a combination is a `<kbd>` of
|
|
32
|
+
* `<kbd>`s — the spec's own shape for "press these together".
|
|
33
|
+
*
|
|
34
|
+
* WHAT A SCREEN READER HEARS
|
|
35
|
+
*
|
|
36
|
+
* The symbols do not survive being read aloud: VoiceOver says "⌘" as "place of
|
|
37
|
+
* interest sign" in some voices and "⇧" as "upwards white arrow". So a
|
|
38
|
+
* shortcut's drawn keys are hidden and a visually hidden copy spells them out
|
|
39
|
+
* — "Command K", "Control Shift P".
|
|
40
|
+
*/
|
|
41
|
+
export declare function Kbd({ shortcut, children, platform, className }: KbdProps): React.JSX.Element;
|
|
42
|
+
export declare namespace Kbd {
|
|
43
|
+
var displayName: string;
|
|
44
|
+
}
|
|
45
|
+
//# sourceMappingURL=Kbd.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,CAAC;AAW1C;;;;;;;GAOG;AACH,wBAAgB,QAAQ,IAAI,OAAO,CAElC;AAED,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,QAAQ,qBAqBxE;yBArBe,GAAG"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useSyncExternalStore } from 'react';
|
|
4
|
+
import { shortcutKeys } from './shortcut.js';
|
|
5
|
+
const subscribe = () => () => { };
|
|
6
|
+
const detectMac = () => /mac|iphone|ipad|ipod/i.test(
|
|
7
|
+
// `userAgentData` is Chromium-only; `platform` is deprecated but universal.
|
|
8
|
+
// Case-insensitive: Chromium says "macOS", everything else "MacIntel".
|
|
9
|
+
navigator
|
|
10
|
+
.userAgentData?.platform || navigator.platform);
|
|
11
|
+
/**
|
|
12
|
+
* Whether the reader is on an Apple platform.
|
|
13
|
+
*
|
|
14
|
+
* `false` on the server and during hydration, then the real answer — so a
|
|
15
|
+
* server-rendered "Ctrl" becomes "⌘" after hydration instead of producing a
|
|
16
|
+
* mismatch. Not exported from the package: `platform` is the public way to
|
|
17
|
+
* choose.
|
|
18
|
+
*/
|
|
19
|
+
export function useIsMac() {
|
|
20
|
+
return useSyncExternalStore(subscribe, detectMac, () => false);
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Kbd — a key, or a keyboard shortcut, as printed on the keyboard.
|
|
24
|
+
*
|
|
25
|
+
* `<kbd>` is the element HTML has for this, and a combination is a `<kbd>` of
|
|
26
|
+
* `<kbd>`s — the spec's own shape for "press these together".
|
|
27
|
+
*
|
|
28
|
+
* WHAT A SCREEN READER HEARS
|
|
29
|
+
*
|
|
30
|
+
* The symbols do not survive being read aloud: VoiceOver says "⌘" as "place of
|
|
31
|
+
* interest sign" in some voices and "⇧" as "upwards white arrow". So a
|
|
32
|
+
* shortcut's drawn keys are hidden and a visually hidden copy spells them out
|
|
33
|
+
* — "Command K", "Control Shift P".
|
|
34
|
+
*/
|
|
35
|
+
export function Kbd({ shortcut, children, platform, className }) {
|
|
36
|
+
const detected = useIsMac();
|
|
37
|
+
const isMac = platform ? platform === 'mac' : detected;
|
|
38
|
+
const classes = (base) => [base, className || ''].filter(Boolean).join(' ');
|
|
39
|
+
if (!shortcut)
|
|
40
|
+
return _jsx("kbd", { className: classes('ion-kbd'), children: children });
|
|
41
|
+
const keys = shortcutKeys(shortcut, isMac);
|
|
42
|
+
return (_jsxs("kbd", { className: classes('ion-kbd-group'), children: [keys.map((k, i) => (_jsx("kbd", { className: "ion-kbd", "aria-hidden": "true", children: k.symbol }, i))), _jsx("span", { className: "ion-visually-hidden", children: keys.map((k) => k.name).join(' ') })] }));
|
|
43
|
+
}
|
|
44
|
+
Kbd.displayName = 'Kbd';
|
|
45
|
+
//# sourceMappingURL=Kbd.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;AACjC,MAAM,SAAS,GAAG,GAAG,EAAE,CACrB,uBAAuB,CAAC,IAAI;AAC1B,4EAA4E;AAC5E,uEAAuE;AACtE,SAAmE;KACjE,aAAa,EAAE,QAAQ,IAAI,SAAS,CAAC,QAAQ,CACjD,CAAC;AAEJ;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,oBAAoB,CAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;AACjE,CAAC;AAmBD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAY;IACvE,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;IAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvD,MAAM,OAAO,GAAG,CAAC,IAAY,EAAE,EAAE,CAC/B,CAAC,IAAI,EAAE,SAAS,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEpD,IAAI,CAAC,QAAQ;QAAE,OAAO,cAAK,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAC;IAE3E,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAC3C,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,aACrC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClB,cAAa,SAAS,EAAC,SAAS,iBAAa,MAAM,YAChD,CAAC,CAAC,MAAM,IADD,CAAC,CAEL,CACP,CAAC,EACF,eAAM,SAAS,EAAC,qBAAqB,YAClC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAC7B,IACH,CACP,CAAC;AACJ,CAAC;AAED,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC"}
|
|
@@ -60,6 +60,11 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
|
|
|
60
60
|
*/
|
|
61
61
|
export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
62
62
|
export type TableCellAlign = 'leading' | 'trailing' | 'center';
|
|
63
|
+
/**
|
|
64
|
+
* A sortable column's state. `none` means sortable but not the current sort —
|
|
65
|
+
* the column shows the neutral indicator and no `aria-sort`.
|
|
66
|
+
*/
|
|
67
|
+
export type TableSortDirection = 'ascending' | 'descending' | 'none';
|
|
63
68
|
export type TableCellScope = 'col' | 'row' | 'colgroup' | 'rowgroup';
|
|
64
69
|
export interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
|
|
65
70
|
/** Renders `<th>` instead of `<td>` — Figma's header cell, `surface/page`
|
|
@@ -80,6 +85,19 @@ export interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCel
|
|
|
80
85
|
/** Figma's `Leading Icon` / `Trailing Icon` slots on `Cell Text`. */
|
|
81
86
|
icon?: React.ReactNode;
|
|
82
87
|
trailingIcon?: React.ReactNode;
|
|
88
|
+
/**
|
|
89
|
+
* Makes a header cell a sort control. Set it on every sortable column:
|
|
90
|
+
* `ascending` or `descending` on the one the rows are sorted by, `none` on
|
|
91
|
+
* the rest. Header cells only — ignored on a body cell. `useTableSort`
|
|
92
|
+
* returns this and `onSort` for each column.
|
|
93
|
+
*/
|
|
94
|
+
sortDirection?: TableSortDirection;
|
|
95
|
+
/**
|
|
96
|
+
* Called when the header is activated. The table does not reorder rows:
|
|
97
|
+
* sorting is the caller's, since only it knows whether the data is local
|
|
98
|
+
* or paged from a server.
|
|
99
|
+
*/
|
|
100
|
+
onSort?: () => void;
|
|
83
101
|
children?: React.ReactNode;
|
|
84
102
|
}
|
|
85
103
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAS7D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;wCACoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAoCjB,CAAC;AAGF,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GACnE,CAAC;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,2FA0BpB,CAAC;AAGF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC5C,OAAO,CACR;IACC;yBACqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;wDACoD;IACpD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAS7D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;wCACoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAoCjB,CAAC;AAGF,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GACnE,CAAC;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,2FA0BpB,CAAC;AAGF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAC/D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;AACrE,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC5C,OAAO,CACR;IACC;yBACqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;wDACoD;IACpD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAuBD;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,6FA4FrB,CAAC"}
|