@xeonr/platform-ui 1.3.1 → 1.4.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/index.d.ts +12 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +22 -0
- package/dist/index.js.map +1 -1
- package/dist/kit/Anchored.d.ts +13 -2
- package/dist/kit/Anchored.d.ts.map +1 -1
- package/dist/kit/Anchored.js +47 -18
- package/dist/kit/Anchored.js.map +1 -1
- package/dist/kit/Badge.d.ts +1 -0
- package/dist/kit/Badge.d.ts.map +1 -1
- package/dist/kit/Badge.js +14 -0
- package/dist/kit/Badge.js.map +1 -1
- package/dist/kit/Button.d.ts +8 -2
- package/dist/kit/Button.d.ts.map +1 -1
- package/dist/kit/Button.js +17 -3
- package/dist/kit/Button.js.map +1 -1
- package/dist/kit/Chip.d.ts +6 -0
- package/dist/kit/Chip.d.ts.map +1 -1
- package/dist/kit/Chip.js +2 -1
- package/dist/kit/Chip.js.map +1 -1
- package/dist/kit/Color.d.ts +69 -0
- package/dist/kit/Color.d.ts.map +1 -0
- package/dist/kit/Color.js +150 -0
- package/dist/kit/Color.js.map +1 -0
- package/dist/kit/Combobox.d.ts +5 -1
- package/dist/kit/Combobox.d.ts.map +1 -1
- package/dist/kit/Combobox.js +39 -28
- package/dist/kit/Combobox.js.map +1 -1
- package/dist/kit/Controls.d.ts +184 -0
- package/dist/kit/Controls.d.ts.map +1 -0
- package/dist/kit/Controls.js +344 -0
- package/dist/kit/Controls.js.map +1 -0
- package/dist/kit/DatePicker.d.ts +125 -0
- package/dist/kit/DatePicker.d.ts.map +1 -0
- package/dist/kit/DatePicker.js +438 -0
- package/dist/kit/DatePicker.js.map +1 -0
- package/dist/kit/Dropzone.d.ts +41 -0
- package/dist/kit/Dropzone.d.ts.map +1 -0
- package/dist/kit/Dropzone.js +118 -0
- package/dist/kit/Dropzone.js.map +1 -0
- package/dist/kit/Form.d.ts +86 -13
- package/dist/kit/Form.d.ts.map +1 -1
- package/dist/kit/Form.js +124 -13
- package/dist/kit/Form.js.map +1 -1
- package/dist/kit/Icon.d.ts +4 -0
- package/dist/kit/Icon.d.ts.map +1 -1
- package/dist/kit/Icon.js +5 -1
- package/dist/kit/Icon.js.map +1 -1
- package/dist/kit/List.d.ts +55 -8
- package/dist/kit/List.d.ts.map +1 -1
- package/dist/kit/List.js +43 -6
- package/dist/kit/List.js.map +1 -1
- package/dist/kit/Menu.d.ts +71 -9
- package/dist/kit/Menu.d.ts.map +1 -1
- package/dist/kit/Menu.js +119 -21
- package/dist/kit/Menu.js.map +1 -1
- package/dist/kit/Modal.d.ts +37 -4
- package/dist/kit/Modal.d.ts.map +1 -1
- package/dist/kit/Modal.js +42 -14
- package/dist/kit/Modal.js.map +1 -1
- package/dist/kit/MultiCombobox.d.ts +48 -1
- package/dist/kit/MultiCombobox.d.ts.map +1 -1
- package/dist/kit/MultiCombobox.js +100 -27
- package/dist/kit/MultiCombobox.js.map +1 -1
- package/dist/kit/Picker.d.ts +6 -1
- package/dist/kit/Picker.d.ts.map +1 -1
- package/dist/kit/Picker.js +10 -5
- package/dist/kit/Picker.js.map +1 -1
- package/dist/kit/Popover.d.ts +13 -1
- package/dist/kit/Popover.d.ts.map +1 -1
- package/dist/kit/Popover.js +31 -9
- package/dist/kit/Popover.js.map +1 -1
- package/dist/kit/Skeleton.d.ts +44 -3
- package/dist/kit/Skeleton.d.ts.map +1 -1
- package/dist/kit/Skeleton.js +39 -1
- package/dist/kit/Skeleton.js.map +1 -1
- package/dist/kit/Stepper.d.ts +33 -0
- package/dist/kit/Stepper.d.ts.map +1 -0
- package/dist/kit/Stepper.js +97 -0
- package/dist/kit/Stepper.js.map +1 -0
- package/package.json +1 -1
package/dist/kit/List.js
CHANGED
|
@@ -106,14 +106,51 @@ export function SelectableList({ rows, value, onPick, rowKey, render, onDelete,
|
|
|
106
106
|
const Crumbs = styled.nav `
|
|
107
107
|
display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
|
|
108
108
|
font-family: ${v.mono}; font-size: 12px; color: ${v.muted};
|
|
109
|
-
button, a { font: inherit; color: ${v.muted}; background: none; border: none; padding: 2px 4px; border-radius: 4px; cursor: pointer; text-decoration: none; }
|
|
109
|
+
button, a { font: inherit; color: ${v.muted}; background: none; border: none; padding: 2px 4px; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
|
|
110
110
|
button:hover, a:hover { color: ${v.text}; background: ${v.hover}; }
|
|
111
111
|
.sep { color: ${v.faint}; display: grid; svg { font-size: 10px; } }
|
|
112
|
-
.cur { color: ${v.text}; padding: 2px 4px; }
|
|
112
|
+
.cur { color: ${v.text}; padding: 2px 4px; display: inline-flex; align-items: center; gap: 5px; }
|
|
113
|
+
.crumb-icon { font-size: 11px; opacity: 0.8; }
|
|
114
|
+
/* a crumb something can be dropped on: ready while a drag is in progress, over while it hovers */
|
|
115
|
+
[data-drop="ready"] { box-shadow: inset 0 0 0 1px ${v.line2}; background: ${v.surface2}; }
|
|
116
|
+
[data-drop="over"] { box-shadow: inset 0 0 0 1px ${v.success}; background: ${v.successBg}; color: ${v.text}; }
|
|
117
|
+
${(p) => p.$pill &&
|
|
118
|
+
css `
|
|
119
|
+
gap: 6px;
|
|
120
|
+
font-family: ${v.font};
|
|
121
|
+
font-size: 12.5px;
|
|
122
|
+
button, a, .cur { height: 25px; padding: 0 10px; border-radius: 999px; background: ${v.hover}; color: ${v.text}; }
|
|
123
|
+
button:hover, a:hover { background: ${v.brand12}; }
|
|
124
|
+
.cur { background: transparent; box-shadow: inset 0 0 0 1px ${v.line2}; }
|
|
125
|
+
`}
|
|
113
126
|
`;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
127
|
+
/**
|
|
128
|
+
* Crumb: one ancestor in a Breadcrumbs path, drawn as Breadcrumbs draws it —
|
|
129
|
+
* a router link (`to`) or a button (`onClick`). Exported for `renderSegment`
|
|
130
|
+
* (1.4): a drag library whose drop target is a hook called once per target
|
|
131
|
+
* (react-dnd's `useDrop`, dnd-kit's `useDroppable`) needs a component of the
|
|
132
|
+
* product's own per crumb, which calls the hook and returns a `Crumb` with
|
|
133
|
+
* `targetRef` and `drop` filled in. Only meaningful inside Breadcrumbs.
|
|
134
|
+
*/
|
|
135
|
+
export function Crumb({ targetRef, ...s }) {
|
|
136
|
+
const body = (_jsxs(_Fragment, { children: [s.icon ? _jsx(Icon, { className: "crumb-icon", name: s.icon }) : null, s.label, s.after] }));
|
|
137
|
+
const extra = {
|
|
138
|
+
"data-drop": s.drop,
|
|
139
|
+
onDragOver: s.onDragOver,
|
|
140
|
+
onDragLeave: s.onDragLeave,
|
|
141
|
+
onDrop: s.onDrop,
|
|
142
|
+
};
|
|
143
|
+
return s.to !== undefined
|
|
144
|
+
? _jsx(Link, { to: s.to, ref: targetRef, ...extra, children: body })
|
|
145
|
+
: _jsx("button", { type: "button", onClick: s.onClick, ref: targetRef, ...extra, children: body });
|
|
146
|
+
}
|
|
147
|
+
export function Breadcrumbs({ segments, current, label = "Path", variant = "plain", currentIcon, currentTo, renderSegment }) {
|
|
148
|
+
const currentBody = (_jsxs(_Fragment, { children: [currentIcon ? _jsx(Icon, { className: "crumb-icon", name: currentIcon }) : null, current] }));
|
|
149
|
+
return (_jsxs(Crumbs, { "aria-label": label, "$pill": variant === "pill", children: [segments.map((s, i) => {
|
|
150
|
+
const crumb = _jsx(Crumb, { ...s });
|
|
151
|
+
return (_jsxs("span", { style: { display: "contents" }, children: [renderSegment ? renderSegment(s, crumb, i) : crumb, variant === "pill" ? _jsx("span", { className: "sep", "aria-hidden": true, children: "/" }) : _jsx("span", { className: "sep", children: _jsx(Icon, { name: "chevron-right" }) })] }, `${typeof s.label === "string" ? s.label : ""}-${i}`));
|
|
152
|
+
}), currentTo !== undefined
|
|
153
|
+
? _jsx(Link, { className: "cur", to: currentTo, "aria-current": "page", children: currentBody })
|
|
154
|
+
: _jsx("span", { className: "cur", "aria-current": "location", children: currentBody })] }));
|
|
118
155
|
}
|
|
119
156
|
//# sourceMappingURL=List.js.map
|
package/dist/kit/List.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/kit/List.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/kit/List.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/Menu.d.ts
CHANGED
|
@@ -1,32 +1,94 @@
|
|
|
1
1
|
import { type ReactNode } from "react";
|
|
2
|
+
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
|
2
3
|
import { type IconName } from "./Icon.tsx";
|
|
4
|
+
import { type AnchoredAlign, type AnchoredSide } from "./Anchored.tsx";
|
|
3
5
|
export declare const MenuLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
4
6
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
|
|
5
7
|
}> & string;
|
|
6
8
|
export declare const MenuDivider: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
|
|
7
9
|
style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
|
|
8
10
|
}> & string;
|
|
9
|
-
export declare function MenuItem({ icon, to, href, onClick, danger, disabled, children }: {
|
|
10
|
-
icon
|
|
11
|
+
export declare function MenuItem({ icon, to, href, target, rel, external, download, meta, onClick, danger, disabled, children }: {
|
|
12
|
+
/** a kit icon name, or a FontAwesome IconDefinition for a glyph the kit map lacks (1.4) */
|
|
13
|
+
icon?: IconName | (string & {}) | IconDefinition | undefined;
|
|
11
14
|
/** router destination */
|
|
12
15
|
to?: string | undefined;
|
|
13
16
|
/** plain anchor destination (external) */
|
|
14
17
|
href?: string | undefined;
|
|
18
|
+
/**
|
|
19
|
+
* Where a `to`/`href` opens — `_blank` for a new tab. A real link, so the
|
|
20
|
+
* browser's own middle-click and "open in new tab" work, and no popup
|
|
21
|
+
* blocker gets a say (window.open from a click handler is how menus used to
|
|
22
|
+
* fake this). `_blank` adds `rel="noopener noreferrer"` unless `rel` says otherwise.
|
|
23
|
+
*/
|
|
24
|
+
target?: string | undefined;
|
|
25
|
+
rel?: string | undefined;
|
|
26
|
+
/** leaves the product: opens in a new tab, and marked with the external glyph */
|
|
27
|
+
external?: boolean | undefined;
|
|
28
|
+
/** `href` is a file to save (the anchor's `download`); a string names it */
|
|
29
|
+
download?: boolean | string | undefined;
|
|
30
|
+
/** trailing text — a shortcut, a count, the current value */
|
|
31
|
+
meta?: ReactNode | undefined;
|
|
15
32
|
onClick?: (() => void) | undefined;
|
|
16
33
|
danger?: boolean | undefined;
|
|
17
34
|
disabled?: boolean | undefined;
|
|
18
35
|
children: ReactNode;
|
|
19
36
|
}): import("react").JSX.Element;
|
|
20
|
-
|
|
21
|
-
* Menu: click-to-open popover anchored under its trigger. Closes on outside
|
|
22
|
-
* click, on Escape, and on any click inside the panel — menu items navigate or
|
|
23
|
-
* act, so "one click, one outcome" is always the right behaviour.
|
|
24
|
-
*/
|
|
25
|
-
export declare function Menu({ trigger, children, align, width }: {
|
|
37
|
+
export interface MenuProps {
|
|
26
38
|
/** renders the anchor; `open` lets it show its own state (a chevron, a tint) */
|
|
27
39
|
trigger: (open: boolean) => ReactNode;
|
|
28
40
|
children: ReactNode;
|
|
29
|
-
|
|
41
|
+
/**
|
|
42
|
+
* Which edge lines up with the trigger's (default "right"). Below or above
|
|
43
|
+
* the trigger: `left`/`right` (or `start`/`end`), or `center`. Beside it
|
|
44
|
+
* (`side="right"`/`"left"`): `start` lines up the top edges, `end` the bottom.
|
|
45
|
+
*/
|
|
46
|
+
align?: AnchoredAlign | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Which side of the trigger it opens on (default "bottom"); it flips to the
|
|
49
|
+
* opposite side near a viewport edge. `right` is the account menu at the
|
|
50
|
+
* foot of an icon rail; `top` is a menu in a footer bar.
|
|
51
|
+
*/
|
|
52
|
+
side?: AnchoredSide | undefined;
|
|
53
|
+
width?: number | undefined;
|
|
54
|
+
/** accessible name of the menu */
|
|
55
|
+
label?: string | undefined;
|
|
56
|
+
/** told whenever it opens or closes — a rail that stays expanded while its menu is open */
|
|
57
|
+
onOpenChange?: ((open: boolean) => void) | undefined;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Menu: click-to-open popover anchored to its trigger. It portals to
|
|
61
|
+
* document.body, so a card or table with `overflow: hidden` cannot clip it,
|
|
62
|
+
* and it flips near a viewport edge. Closes on outside click, on Escape (the
|
|
63
|
+
* top layer only, so a menu inside a modal closes before the modal does), and
|
|
64
|
+
* on any click inside the panel — menu items navigate or act, so "one click,
|
|
65
|
+
* one outcome" is always the right behaviour. Arrow keys, Home and End move
|
|
66
|
+
* between items.
|
|
67
|
+
*/
|
|
68
|
+
export declare function Menu({ trigger, children, align, side, width, label, onOpenChange }: MenuProps): import("react").JSX.Element;
|
|
69
|
+
/**
|
|
70
|
+
* OverflowMenu: the ⋯ button on a row or a card and the menu it opens.
|
|
71
|
+
*
|
|
72
|
+
* Everything a row's action menu needs and three consoles got wrong: the menu
|
|
73
|
+
* portals (a card with `overflow: hidden` cannot clip it) and flips near an
|
|
74
|
+
* edge; the button says what it is (`label`, also its tooltip); and clicks,
|
|
75
|
+
* pointer and key events inside it never reach the row — so choosing "Delete"
|
|
76
|
+
* does not also open the row it sits on, and pressing the button does not
|
|
77
|
+
* start a drag on a draggable card.
|
|
78
|
+
*/
|
|
79
|
+
export declare function OverflowMenu({ label, icon, size, align, side, width, tooltip, onOpenChange, children }: {
|
|
80
|
+
/** the button's accessible name and tooltip (default "More actions") */
|
|
81
|
+
label?: string | undefined;
|
|
82
|
+
icon?: IconName | (string & {}) | undefined;
|
|
83
|
+
/** the button's size in px (IconButton's `$size`, default 30) */
|
|
84
|
+
size?: number | undefined;
|
|
85
|
+
align?: AnchoredAlign | undefined;
|
|
86
|
+
side?: AnchoredSide | undefined;
|
|
30
87
|
width?: number | undefined;
|
|
88
|
+
/** show `label` as a tooltip on hover (default true) */
|
|
89
|
+
tooltip?: boolean | undefined;
|
|
90
|
+
onOpenChange?: ((open: boolean) => void) | undefined;
|
|
91
|
+
/** MenuItem, MenuLabel and MenuDivider */
|
|
92
|
+
children: ReactNode;
|
|
31
93
|
}): import("react").JSX.Element;
|
|
32
94
|
//# sourceMappingURL=Menu.d.ts.map
|
package/dist/kit/Menu.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/kit/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/kit/Menu.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/Menu.js
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { useEffect, useRef, useState } from "react";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import { Link } from "react-router-dom";
|
|
5
|
+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
5
6
|
import { v } from "../theme/tokens.js";
|
|
6
7
|
import { Icon } from "./Icon.js";
|
|
7
8
|
import { Anchored } from "./Anchored.js";
|
|
9
|
+
import { useEscapeLayer } from "./layers.js";
|
|
10
|
+
import { IconButton } from "./Button.js";
|
|
11
|
+
import { Tooltip } from "./Tooltip.js";
|
|
8
12
|
const Wrap = styled.div `position: relative;`;
|
|
9
13
|
const Dropdown = styled.div `
|
|
10
14
|
width: ${(p) => p.$width}px;
|
|
@@ -40,6 +44,7 @@ const rowCss = `
|
|
|
40
44
|
font-size: 12px;
|
|
41
45
|
text-decoration: none;
|
|
42
46
|
svg { width: 13px; opacity: 0.85; flex: none; }
|
|
47
|
+
&:focus-visible { outline: none; box-shadow: none; background: ${v.hover}; color: ${v.text}; }
|
|
43
48
|
`;
|
|
44
49
|
const RowButton = styled.button `
|
|
45
50
|
${rowCss}
|
|
@@ -56,24 +61,71 @@ const RowAnchor = styled.a `
|
|
|
56
61
|
${rowCss}
|
|
57
62
|
color: ${(p) => (p.$danger ? v.danger : v.muted)};
|
|
58
63
|
&:hover { background: ${(p) => (p.$danger ? v.dangerBg : v.hover)}; color: ${(p) => (p.$danger ? v.danger : v.text)}; }
|
|
64
|
+
&[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; background: none; }
|
|
59
65
|
`;
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
const Trail = styled.span `
|
|
67
|
+
margin-left: auto;
|
|
68
|
+
padding-left: 8px;
|
|
69
|
+
display: inline-flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
gap: 6px;
|
|
72
|
+
font-size: 11px;
|
|
73
|
+
color: ${v.faint};
|
|
74
|
+
svg { width: 10px; opacity: 0.7; }
|
|
75
|
+
`;
|
|
76
|
+
export function MenuItem({ icon, to, href, target, rel, external, download, meta, onClick, danger, disabled, children }) {
|
|
77
|
+
const tgt = target ?? (external ? "_blank" : undefined);
|
|
78
|
+
const linkRel = rel ?? (tgt === "_blank" ? "noopener noreferrer" : undefined);
|
|
79
|
+
const trail = meta || external ? (_jsxs(Trail, { children: [meta, external ? _jsx(Icon, { name: "external" }) : null] })) : null;
|
|
80
|
+
const glyph = !icon ? null : typeof icon === "string"
|
|
81
|
+
? _jsx(Icon, { name: icon })
|
|
82
|
+
: _jsx(FontAwesomeIcon, { icon: icon, style: { width: "1em", height: "1em" } });
|
|
83
|
+
const inner = _jsxs(_Fragment, { children: [glyph, children, trail] });
|
|
84
|
+
if ((to || href) && disabled) {
|
|
85
|
+
// A link has no :disabled; off, it is a link to nowhere that says so.
|
|
86
|
+
return _jsx(RowAnchor, { role: "menuitem", "aria-disabled": "true", tabIndex: -1, "$danger": danger, onClick: (e) => { e.preventDefault(); e.stopPropagation(); }, children: inner });
|
|
87
|
+
}
|
|
88
|
+
if (to) {
|
|
89
|
+
return (_jsx(RowLink, { role: "menuitem", to: to, "$danger": danger, target: tgt, rel: linkRel, onClick: onClick, children: inner }));
|
|
90
|
+
}
|
|
91
|
+
if (href) {
|
|
92
|
+
return (_jsx(RowAnchor, { role: "menuitem", href: href, "$danger": danger, target: tgt, rel: linkRel, download: download === true ? "" : download || undefined, onClick: onClick, children: inner }));
|
|
93
|
+
}
|
|
94
|
+
return _jsx(RowButton, { role: "menuitem", type: "button", "$danger": danger, disabled: disabled, onClick: onClick, children: inner });
|
|
67
95
|
}
|
|
96
|
+
const ITEMS = '[role="menuitem"]:not(:disabled):not([aria-disabled="true"])';
|
|
68
97
|
/**
|
|
69
|
-
* Menu: click-to-open popover anchored
|
|
70
|
-
*
|
|
71
|
-
*
|
|
98
|
+
* Menu: click-to-open popover anchored to its trigger. It portals to
|
|
99
|
+
* document.body, so a card or table with `overflow: hidden` cannot clip it,
|
|
100
|
+
* and it flips near a viewport edge. Closes on outside click, on Escape (the
|
|
101
|
+
* top layer only, so a menu inside a modal closes before the modal does), and
|
|
102
|
+
* on any click inside the panel — menu items navigate or act, so "one click,
|
|
103
|
+
* one outcome" is always the right behaviour. Arrow keys, Home and End move
|
|
104
|
+
* between items.
|
|
72
105
|
*/
|
|
73
|
-
export function Menu({ trigger, children, align = "right", width = 220 }) {
|
|
74
|
-
const [open,
|
|
106
|
+
export function Menu({ trigger, children, align = "right", side = "bottom", width = 220, label, onOpenChange }) {
|
|
107
|
+
const [open, setOpenState] = useState(false);
|
|
75
108
|
const ref = useRef(null);
|
|
76
109
|
const layer = useRef(null);
|
|
110
|
+
const changed = useRef(onOpenChange);
|
|
111
|
+
useEffect(() => { changed.current = onOpenChange; });
|
|
112
|
+
// The last state told to onOpenChange. Compared here rather than inside a
|
|
113
|
+
// setState updater: StrictMode runs updaters twice, and a parent's setState
|
|
114
|
+
// called from one warns.
|
|
115
|
+
const told = useRef(false);
|
|
116
|
+
const setOpen = useCallback((next) => {
|
|
117
|
+
setOpenState(next);
|
|
118
|
+
if (told.current !== next) {
|
|
119
|
+
told.current = next;
|
|
120
|
+
changed.current?.(next);
|
|
121
|
+
}
|
|
122
|
+
}, []);
|
|
123
|
+
// Escape closes this before any drawer or modal it sits in (CON-59), and
|
|
124
|
+
// hands focus back to the trigger.
|
|
125
|
+
useEscapeLayer(open, () => {
|
|
126
|
+
setOpen(false);
|
|
127
|
+
ref.current?.querySelector("button, a, [tabindex]")?.focus();
|
|
128
|
+
});
|
|
77
129
|
useEffect(() => {
|
|
78
130
|
if (!open)
|
|
79
131
|
return;
|
|
@@ -82,12 +134,58 @@ export function Menu({ trigger, children, align = "right", width = 220 }) {
|
|
|
82
134
|
if (!ref.current?.contains(t) && !layer.current?.contains(t))
|
|
83
135
|
setOpen(false);
|
|
84
136
|
};
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
document.addEventListener("mousedown", onDown);
|
|
88
|
-
document.
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
137
|
+
// capture: a row or card that stops its own mousedown (a drag handle) must
|
|
138
|
+
// not keep a menu elsewhere open
|
|
139
|
+
document.addEventListener("mousedown", onDown, true);
|
|
140
|
+
return () => document.removeEventListener("mousedown", onDown, true);
|
|
141
|
+
}, [open, setOpen]);
|
|
142
|
+
const move = (e) => {
|
|
143
|
+
const items = Array.from(layer.current?.querySelectorAll(ITEMS) ?? []);
|
|
144
|
+
if (!items.length)
|
|
145
|
+
return;
|
|
146
|
+
const at = items.indexOf(document.activeElement);
|
|
147
|
+
let next = -1;
|
|
148
|
+
if (e.key === "ArrowDown")
|
|
149
|
+
next = at < 0 ? 0 : (at + 1) % items.length;
|
|
150
|
+
else if (e.key === "ArrowUp")
|
|
151
|
+
next = at < 0 ? items.length - 1 : (at - 1 + items.length) % items.length;
|
|
152
|
+
else if (e.key === "Home")
|
|
153
|
+
next = 0;
|
|
154
|
+
else if (e.key === "End")
|
|
155
|
+
next = items.length - 1;
|
|
156
|
+
else if (e.key === "Tab") {
|
|
157
|
+
setOpen(false);
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
if (next < 0)
|
|
161
|
+
return;
|
|
162
|
+
e.preventDefault();
|
|
163
|
+
items[next].focus();
|
|
164
|
+
};
|
|
165
|
+
return (_jsxs(Wrap, { ref: ref, children: [_jsx("div", { onClick: () => setOpen(!open), onKeyDown: (e) => {
|
|
166
|
+
// ArrowDown on the trigger opens the menu with the first item focused
|
|
167
|
+
if (e.key === "ArrowDown" && !open) {
|
|
168
|
+
e.preventDefault();
|
|
169
|
+
setOpen(true);
|
|
170
|
+
requestAnimationFrame(() => layer.current?.querySelector(ITEMS)?.focus());
|
|
171
|
+
}
|
|
172
|
+
else if (open)
|
|
173
|
+
move(e);
|
|
174
|
+
}, style: { display: "contents" }, children: trigger(open) }), open ? (_jsx(Anchored, { anchor: ref, align: align, side: side, layerRef: layer, children: _jsx(Dropdown, { role: "menu", "aria-label": label, "$width": width, onClick: () => setOpen(false), onKeyDown: move, children: children }) })) : null] }));
|
|
175
|
+
}
|
|
176
|
+
const Isolate = styled.span `display: inline-flex;`;
|
|
177
|
+
/**
|
|
178
|
+
* OverflowMenu: the ⋯ button on a row or a card and the menu it opens.
|
|
179
|
+
*
|
|
180
|
+
* Everything a row's action menu needs and three consoles got wrong: the menu
|
|
181
|
+
* portals (a card with `overflow: hidden` cannot clip it) and flips near an
|
|
182
|
+
* edge; the button says what it is (`label`, also its tooltip); and clicks,
|
|
183
|
+
* pointer and key events inside it never reach the row — so choosing "Delete"
|
|
184
|
+
* does not also open the row it sits on, and pressing the button does not
|
|
185
|
+
* start a drag on a draggable card.
|
|
186
|
+
*/
|
|
187
|
+
export function OverflowMenu({ label = "More actions", icon = "more", size, align = "right", side = "bottom", width, tooltip = true, onOpenChange, children }) {
|
|
188
|
+
const stop = (e) => e.stopPropagation();
|
|
189
|
+
return (_jsx(Isolate, { onClick: stop, onPointerDown: stop, onMouseDown: stop, onTouchStart: stop, onKeyDown: stop, children: _jsx(Menu, { align: align, side: side, width: width, label: label, onOpenChange: onOpenChange, trigger: (open) => (_jsx(Tooltip, { label: label, disabled: !tooltip || open, children: _jsx(IconButton, { "$size": size, "$on": open, "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open, children: _jsx(Icon, { name: icon }) }) })), children: children }) }));
|
|
92
190
|
}
|
|
93
191
|
//# sourceMappingURL=Menu.js.map
|
package/dist/kit/Menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/kit/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/kit/Menu.tsx"],"names":[],"mappings":"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"}
|
package/dist/kit/Modal.d.ts
CHANGED
|
@@ -4,19 +4,48 @@ declare const sizes: {
|
|
|
4
4
|
readonly sm: 420;
|
|
5
5
|
readonly md: 560;
|
|
6
6
|
readonly lg: 760;
|
|
7
|
+
readonly xl: 1080;
|
|
8
|
+
readonly full: 0;
|
|
7
9
|
};
|
|
8
|
-
export
|
|
10
|
+
export type EntityModalSize = keyof typeof sizes;
|
|
11
|
+
export declare function EntityModal({ title, sub, icon, size, onClose, dismissable, footer, flush, head, portal, children }: {
|
|
9
12
|
title: string;
|
|
10
13
|
/** the line under the title: what is being created, or the entity acted on */
|
|
11
14
|
sub?: ReactNode | undefined;
|
|
12
15
|
/** a brand-tinted glyph left of the title */
|
|
13
16
|
icon?: IconName | (string & {}) | undefined;
|
|
14
|
-
|
|
17
|
+
/**
|
|
18
|
+
* `sm` 420, `md` 560 (default), `lg` 760, `xl` 1080 px; `full` is a sheet
|
|
19
|
+
* inset 2% from every edge of the viewport — a preview, a viewer, an editor.
|
|
20
|
+
*/
|
|
21
|
+
size?: EntityModalSize | undefined;
|
|
15
22
|
onClose: () => void;
|
|
16
23
|
/** false for one-time-secret flows: no backdrop/Esc close, explicit button only */
|
|
17
24
|
dismissable?: boolean | undefined;
|
|
18
25
|
/** the action row, pinned under the body — a ButtonRow, usually */
|
|
19
26
|
footer?: ReactNode | undefined;
|
|
27
|
+
/**
|
|
28
|
+
* The body has no padding and does not scroll; its child fills it and
|
|
29
|
+
* scrolls itself — an iframe, a viewer, a split pane. Usually with `size="full"`.
|
|
30
|
+
*/
|
|
31
|
+
flush?: boolean | undefined;
|
|
32
|
+
/**
|
|
33
|
+
* false drops the title row (and its close button) for content that brings
|
|
34
|
+
* its own top bar; `title` stays the dialog's accessible name, and Escape and
|
|
35
|
+
* the backdrop still close it when `dismissable`.
|
|
36
|
+
*/
|
|
37
|
+
head?: boolean | undefined;
|
|
38
|
+
/**
|
|
39
|
+
* Render into document.body rather than in place. Rendered in place, a
|
|
40
|
+
* modal opened from inside a transformed element (a draggable card, an
|
|
41
|
+
* animated list) is positioned against that element, not the viewport, and
|
|
42
|
+
* a card with `overflow: hidden` can clip it. Opt-in (1.4) so a modal that
|
|
43
|
+
* today inherits something from where it sits keeps it; reach for it
|
|
44
|
+
* whenever a modal is opened from a row or a card. SSR-safe: the server and
|
|
45
|
+
* the first client render draw it in place, and it moves into the body once
|
|
46
|
+
* mounted, so a modal open on first load hydrates without a mismatch.
|
|
47
|
+
*/
|
|
48
|
+
portal?: boolean | undefined;
|
|
20
49
|
children: ReactNode;
|
|
21
50
|
}): import("react").JSX.Element;
|
|
22
51
|
/**
|
|
@@ -24,7 +53,7 @@ export declare function EntityModal({ title, sub, icon, size, onClose, dismissab
|
|
|
24
53
|
* to require the operator to type the entity name (function deletes, team
|
|
25
54
|
* deletes) before the destructive button arms.
|
|
26
55
|
*/
|
|
27
|
-
export declare function ConfirmDialog({ title, body, actionLabel, typedValue, danger, busy, extra, onConfirm, onClose }: {
|
|
56
|
+
export declare function ConfirmDialog({ title, body, actionLabel, typedValue, danger, busy, extra, portal, onConfirm, onClose }: {
|
|
28
57
|
title: string;
|
|
29
58
|
body: ReactNode;
|
|
30
59
|
actionLabel: string;
|
|
@@ -32,6 +61,8 @@ export declare function ConfirmDialog({ title, body, actionLabel, typedValue, da
|
|
|
32
61
|
danger?: boolean | undefined;
|
|
33
62
|
busy?: boolean | undefined;
|
|
34
63
|
extra?: ReactNode | undefined;
|
|
64
|
+
/** render into document.body (see EntityModal `portal`) */
|
|
65
|
+
portal?: boolean | undefined;
|
|
35
66
|
onConfirm: () => void;
|
|
36
67
|
onClose: () => void;
|
|
37
68
|
}): import("react").JSX.Element;
|
|
@@ -39,7 +70,7 @@ export declare function ConfirmDialog({ title, body, actionLabel, typedValue, da
|
|
|
39
70
|
* PromptDialog: a one-field modal for naming things (new file, rename) — the
|
|
40
71
|
* kit's replacement for window.prompt, which cannot be styled or validated.
|
|
41
72
|
*/
|
|
42
|
-
export declare function PromptDialog({ title, sub, body, label, initial, value: controlled, onChange, placeholder, actionLabel, actionIcon, busy, validate, extra, hint, readOnly, onSubmit, onClose }: {
|
|
73
|
+
export declare function PromptDialog({ title, sub, body, label, initial, value: controlled, onChange, placeholder, actionLabel, actionIcon, busy, validate, extra, hint, readOnly, portal, onSubmit, onClose }: {
|
|
43
74
|
title: string;
|
|
44
75
|
/** modal subtitle (the path being acted on) */
|
|
45
76
|
sub?: string | undefined;
|
|
@@ -61,6 +92,8 @@ export declare function PromptDialog({ title, sub, body, label, initial, value:
|
|
|
61
92
|
hint?: ReactNode | undefined;
|
|
62
93
|
/** the field shows a computed value; submit stays enabled */
|
|
63
94
|
readOnly?: boolean | undefined;
|
|
95
|
+
/** render into document.body (see EntityModal `portal`) */
|
|
96
|
+
portal?: boolean | undefined;
|
|
64
97
|
onSubmit: (value: string) => void;
|
|
65
98
|
onClose: () => void;
|
|
66
99
|
}): import("react").JSX.Element;
|
package/dist/kit/Modal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/kit/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/kit/Modal.tsx"],"names":[],"mappings":"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"}
|