@crisp-ui-kit/crisp 0.31.3 → 0.31.4
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/cjs/components/accordion/accordion.js +1 -1
- package/dist/cjs/components/avatargroup/avatargroup.js +1 -1
- package/dist/cjs/components/barchart/barchart.js +1 -1
- package/dist/cjs/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/cjs/components/bulkbar/bulkbar.js +1 -1
- package/dist/cjs/components/callout/callout.js +1 -1
- package/dist/cjs/components/checkbox/checkbox.js +1 -1
- package/dist/cjs/components/columncalc/columncalc.js +2 -2
- package/dist/cjs/components/datatable/datatable.js +5 -5
- package/dist/cjs/components/datepickerfield/datepickerfield.js +1 -1
- package/dist/cjs/components/dialog/dialog.js +1 -1
- package/dist/cjs/components/donutchart/donutchart.js +1 -1
- package/dist/cjs/components/fileupload/fileupload.js +1 -1
- package/dist/cjs/components/formfield/formfield.js +1 -1
- package/dist/cjs/components/linechart/linechart.js +1 -1
- package/dist/cjs/components/menu/menu.js +1 -1
- package/dist/cjs/components/multiselect/multiselect.js +1 -1
- package/dist/cjs/components/radiogroup/radiogroup.js +1 -1
- package/dist/cjs/components/resizablepanel/resizablepanel.js +1 -1
- package/dist/cjs/components/segmented/segmented.js +1 -1
- package/dist/cjs/components/select/select.js +1 -1
- package/dist/cjs/components/stagebar/stagebar.js +1 -1
- package/dist/cjs/components/statcard/statcard.js +1 -1
- package/dist/cjs/components/switch/switch.js +1 -1
- package/dist/cjs/components/tabletoolbar/tabletoolbar.js +2 -2
- package/dist/cjs/components/tabs/tabs.js +2 -2
- package/dist/cjs/components/textarea/textarea.js +1 -1
- package/dist/cjs/components/tooltip/tooltip.js +1 -1
- package/dist/cjs/product/appshell/appshell.js +4 -4
- package/dist/cjs/product/authshell/authshell.js +1 -1
- package/dist/cjs/product/board/board.js +1 -1
- package/dist/cjs/product/command/command.js +1 -1
- package/dist/cjs/product/entitycard/entitycard.js +1 -1
- package/dist/cjs/product/flowcanvas/flowcanvas.js +1 -1
- package/dist/cjs/product/inbox/inbox.js +1 -1
- package/dist/cjs/product/listpage/listpage.js +1 -1
- package/dist/cjs/product/onboarding/onboarding.js +1 -1
- package/dist/cjs/product/recordpage/recordpage.js +7 -7
- package/dist/cjs/product/recordstable/recordstable.js +9 -9
- package/dist/cjs/product/richtext/richtext.js +1 -1
- package/dist/cjs/product/settingssection/settingssection.js +1 -1
- package/dist/cjs/product/settingsshell/settingsshell.js +1 -1
- package/dist/cjs/product/sidebar/sidebar.js +6 -6
- package/dist/cjs/product/tasklist/tasklist.js +1 -1
- package/dist/cjs/product/trialbanner/trialbanner.js +1 -1
- package/dist/cjs/product/viewtoggle/viewtoggle.js +1 -1
- package/dist/esm/components/accordion/accordion.js +1 -1
- package/dist/esm/components/avatargroup/avatargroup.js +1 -1
- package/dist/esm/components/barchart/barchart.js +1 -1
- package/dist/esm/components/breadcrumb/breadcrumb.js +1 -1
- package/dist/esm/components/bulkbar/bulkbar.js +1 -1
- package/dist/esm/components/callout/callout.js +1 -1
- package/dist/esm/components/checkbox/checkbox.js +1 -1
- package/dist/esm/components/columncalc/columncalc.js +2 -2
- package/dist/esm/components/datatable/datatable.js +5 -5
- package/dist/esm/components/datepickerfield/datepickerfield.js +1 -1
- package/dist/esm/components/dialog/dialog.js +1 -1
- package/dist/esm/components/donutchart/donutchart.js +1 -1
- package/dist/esm/components/fileupload/fileupload.js +1 -1
- package/dist/esm/components/formfield/formfield.js +1 -1
- package/dist/esm/components/linechart/linechart.js +1 -1
- package/dist/esm/components/menu/menu.js +1 -1
- package/dist/esm/components/multiselect/multiselect.js +1 -1
- package/dist/esm/components/radiogroup/radiogroup.js +1 -1
- package/dist/esm/components/resizablepanel/resizablepanel.js +1 -1
- package/dist/esm/components/segmented/segmented.js +1 -1
- package/dist/esm/components/select/select.js +1 -1
- package/dist/esm/components/stagebar/stagebar.js +1 -1
- package/dist/esm/components/statcard/statcard.js +1 -1
- package/dist/esm/components/switch/switch.js +1 -1
- package/dist/esm/components/tabletoolbar/tabletoolbar.js +2 -2
- package/dist/esm/components/tabs/tabs.js +2 -2
- package/dist/esm/components/textarea/textarea.js +1 -1
- package/dist/esm/components/tooltip/tooltip.js +1 -1
- package/dist/esm/product/appshell/appshell.js +4 -4
- package/dist/esm/product/authshell/authshell.js +1 -1
- package/dist/esm/product/board/board.js +1 -1
- package/dist/esm/product/command/command.js +1 -1
- package/dist/esm/product/entitycard/entitycard.js +1 -1
- package/dist/esm/product/flowcanvas/flowcanvas.js +1 -1
- package/dist/esm/product/inbox/inbox.js +1 -1
- package/dist/esm/product/listpage/listpage.js +1 -1
- package/dist/esm/product/onboarding/onboarding.js +1 -1
- package/dist/esm/product/recordpage/recordpage.js +7 -7
- package/dist/esm/product/recordstable/recordstable.js +9 -9
- package/dist/esm/product/richtext/richtext.js +1 -1
- package/dist/esm/product/settingssection/settingssection.js +1 -1
- package/dist/esm/product/settingsshell/settingsshell.js +1 -1
- package/dist/esm/product/sidebar/sidebar.js +6 -6
- package/dist/esm/product/tasklist/tasklist.js +1 -1
- package/dist/esm/product/trialbanner/trialbanner.js +1 -1
- package/dist/esm/product/viewtoggle/viewtoggle.js +1 -1
- package/dist/types/components/avatargroup/avatargroup.d.ts +1 -1
- package/dist/types/components/barchart/barchart.d.ts +1 -1
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +1 -1
- package/dist/types/components/bulkbar/bulkbar.d.ts +1 -1
- package/dist/types/components/callout/callout.d.ts +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +1 -1
- package/dist/types/components/columncalc/columncalc.d.ts +5 -5
- package/dist/types/components/datatable/datatable.d.ts +5 -5
- package/dist/types/components/datepickerfield/datepickerfield.d.ts +1 -1
- package/dist/types/components/dialog/dialog.d.ts +1 -1
- package/dist/types/components/donutchart/donutchart.d.ts +1 -1
- package/dist/types/components/emptystate/emptystate.d.ts +1 -1
- package/dist/types/components/formfield/formfield.d.ts +1 -1
- package/dist/types/components/linechart/linechart.d.ts +1 -1
- package/dist/types/components/menu/menu.d.ts +1 -1
- package/dist/types/components/multiselect/multiselect.d.ts +1 -1
- package/dist/types/components/progress/progress.d.ts +1 -1
- package/dist/types/components/radiogroup/radiogroup.d.ts +1 -1
- package/dist/types/components/resizablepanel/resizablepanel.d.ts +4 -4
- package/dist/types/components/segmented/segmented.d.ts +1 -1
- package/dist/types/components/select/select.d.ts +2 -2
- package/dist/types/components/stagebar/stagebar.d.ts +1 -1
- package/dist/types/components/statcard/statcard.d.ts +1 -1
- package/dist/types/components/switch/switch.d.ts +1 -1
- package/dist/types/components/tabletoolbar/tabletoolbar.d.ts +1 -1
- package/dist/types/components/tabs/tabs.d.ts +2 -2
- package/dist/types/components/textarea/textarea.d.ts +1 -1
- package/dist/types/components/tooltip/tooltip.d.ts +1 -1
- package/dist/types/product/appshell/appshell.d.ts +2 -2
- package/dist/types/product/authshell/authshell.d.ts +1 -1
- package/dist/types/product/board/board.d.ts +1 -1
- package/dist/types/product/entitycard/entitycard.d.ts +1 -1
- package/dist/types/product/flowcanvas/flowcanvas.d.ts +1 -1
- package/dist/types/product/inbox/inbox.d.ts +1 -1
- package/dist/types/product/listpage/listpage.d.ts +1 -1
- package/dist/types/product/onboarding/onboarding.d.ts +1 -1
- package/dist/types/product/recordpage/recordpage.d.ts +2 -2
- package/dist/types/product/recordstable/recordstable.d.ts +10 -4
- package/dist/types/product/richtext/richtext.d.ts +1 -1
- package/dist/types/product/settingssection/settingssection.d.ts +1 -1
- package/dist/types/product/settingsshell/settingsshell.d.ts +1 -1
- package/dist/types/product/sidebar/sidebar.d.ts +10 -10
- package/dist/types/product/tasklist/tasklist.d.ts +1 -1
- package/dist/types/product/trialbanner/trialbanner.d.ts +1 -1
- package/dist/types/product/viewtoggle/viewtoggle.d.ts +1 -1
- package/package.json +1 -1
|
@@ -39,7 +39,7 @@ const lucide_react_1 = require("lucide-react");
|
|
|
39
39
|
const React = __importStar(require("react"));
|
|
40
40
|
const accordion_recipe_1 = require("./accordion.recipe");
|
|
41
41
|
/**
|
|
42
|
-
* A collapsible section list — measured from
|
|
42
|
+
* A collapsible section list — measured from sidebar groups. Single or
|
|
43
43
|
* multiple open; panels animate their height (grid-rows 0fr->1fr). Headers are
|
|
44
44
|
* buttons with `aria-expanded` / `aria-controls`.
|
|
45
45
|
*/
|
|
@@ -40,7 +40,7 @@ const avatar_1 = require("../avatar/avatar");
|
|
|
40
40
|
const avatargroup_recipe_1 = require("./avatargroup.recipe");
|
|
41
41
|
/**
|
|
42
42
|
* A stack of overlapping avatars with an optional "+N" overflow chip — measured
|
|
43
|
-
* from
|
|
43
|
+
* from team / member rows. Pass `<Avatar>` children; each is ringed in
|
|
44
44
|
* the surface colour so it reads against its neighbour.
|
|
45
45
|
*/
|
|
46
46
|
function AvatarGroup({ children, max, size = "md", className, "aria-label": ariaLabel, ...rest }) {
|
|
@@ -14,7 +14,7 @@ function niceNum(raw) {
|
|
|
14
14
|
return step * mag;
|
|
15
15
|
}
|
|
16
16
|
/**
|
|
17
|
-
* A responsive bar chart
|
|
17
|
+
* A responsive bar chart for dashboards. Pure CSS, so
|
|
18
18
|
* it scales with its container. Renders `role="img"` with an accessible summary.
|
|
19
19
|
*/
|
|
20
20
|
function BarChart({ data, height = 240, max, ticks = 5, color, format = (n) => n.toLocaleString(), yAxisWidth, xAxisTitle, "aria-label": ariaLabel, className, ...rest }) {
|
|
@@ -39,7 +39,7 @@ const lucide_react_1 = require("lucide-react");
|
|
|
39
39
|
const React = __importStar(require("react"));
|
|
40
40
|
const breadcrumb_recipe_1 = require("./breadcrumb.recipe");
|
|
41
41
|
/**
|
|
42
|
-
* A breadcrumb trail — measured from
|
|
42
|
+
* A breadcrumb trail — measured from a record-page nav. The last item is
|
|
43
43
|
* marked `aria-current="page"`; earlier items render as links or buttons.
|
|
44
44
|
*/
|
|
45
45
|
function Breadcrumb({ items, separator, "aria-label": ariaLabel = "Breadcrumb", className, ...rest }) {
|
|
@@ -42,7 +42,7 @@ const bulkbar_recipe_1 = require("./bulkbar.recipe");
|
|
|
42
42
|
/**
|
|
43
43
|
* A floating bulk-action bar. Rises from the bottom-centre of its nearest
|
|
44
44
|
* positioned ancestor when a selection is active; render it conditionally
|
|
45
|
-
* (e.g. `count > 0 && <BulkBar …/>`). Measured from
|
|
45
|
+
* (e.g. `count > 0 && <BulkBar …/>`). Measured from a records table.
|
|
46
46
|
*/
|
|
47
47
|
function BulkBar({ count, onClear, countLabel = "selected", countText = (count, label) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [count, " ", label] })), children, className, clearLabel = "Clear selection", ...rest }) {
|
|
48
48
|
return ((0, jsx_runtime_1.jsx)("div", { className: (0, bulkbar_recipe_1.bulkbarRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "bulkbar-bar", children: [count != null && ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "bulkbar-count", onClick: onClear, title: clearLabel, children: [countText(count, countLabel), (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] })), children] }) }));
|
|
@@ -12,7 +12,7 @@ const DEFAULT_ICONS = {
|
|
|
12
12
|
danger: lucide_react_1.CircleAlert,
|
|
13
13
|
};
|
|
14
14
|
/**
|
|
15
|
-
* An inline callout / banner — measured from
|
|
15
|
+
* An inline callout / banner — measured from info notices. `tone` tints
|
|
16
16
|
* the background and icon; pass a `title` and/or body `children`.
|
|
17
17
|
*/
|
|
18
18
|
function Callout({ tone = "neutral", icon, title, children, action, className, ...rest }) {
|
|
@@ -39,7 +39,7 @@ const React = __importStar(require("react"));
|
|
|
39
39
|
const core_1 = require("../../core");
|
|
40
40
|
const checkbox_recipe_1 = require("./checkbox.recipe");
|
|
41
41
|
/**
|
|
42
|
-
* A native `<input type="checkbox">` styled to
|
|
42
|
+
* A native `<input type="checkbox">` styled to the measured grid checkbox (16px,
|
|
43
43
|
* r6, brand fill + white check). Native on purpose: keyboard, focus, and form
|
|
44
44
|
* semantics come for free. `indeterminate` is a DOM-only property, so it is
|
|
45
45
|
* applied via ref rather than an attribute.
|
|
@@ -42,14 +42,14 @@ const lucide_react_1 = require("lucide-react");
|
|
|
42
42
|
const React = __importStar(require("react"));
|
|
43
43
|
const menu_1 = require("../menu");
|
|
44
44
|
const columncalc_recipe_1 = require("./columncalc.recipe");
|
|
45
|
-
/** The four
|
|
45
|
+
/** The four calcs offered on every column, in their order. */
|
|
46
46
|
exports.UNIVERSAL_CALCS = [
|
|
47
47
|
"countEmpty",
|
|
48
48
|
"countFilled",
|
|
49
49
|
"percentEmpty",
|
|
50
50
|
"percentFilled",
|
|
51
51
|
];
|
|
52
|
-
/** The four
|
|
52
|
+
/** The four calcs added for numeric columns, in their order. */
|
|
53
53
|
exports.NUMERIC_CALCS = ["sum", "average", "min", "max"];
|
|
54
54
|
exports.CALC_LABEL = {
|
|
55
55
|
none: "None",
|
|
@@ -69,7 +69,7 @@ function asText(v) {
|
|
|
69
69
|
return v.join(", ");
|
|
70
70
|
return String(v);
|
|
71
71
|
}
|
|
72
|
-
// stable pastel tone per string value — colour-coded tags/statuses
|
|
72
|
+
// stable pastel tone per string value — colour-coded tags/statuses
|
|
73
73
|
const TAG_TONES = [
|
|
74
74
|
"brand",
|
|
75
75
|
"success",
|
|
@@ -277,8 +277,8 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
|
|
|
277
277
|
});
|
|
278
278
|
}, [filtered, sorts, colByKey]);
|
|
279
279
|
/**
|
|
280
|
-
* Rows bucketed under a heading, preserving first-seen group order (
|
|
281
|
-
*
|
|
280
|
+
* Rows bucketed under a heading, preserving first-seen group order (a
|
|
281
|
+
* grouped view without reordering within a group). One bucket with a null
|
|
282
282
|
* group when `groupBy` is absent, so the render path is identical either way.
|
|
283
283
|
*/
|
|
284
284
|
const groupedRows = React.useMemo(() => {
|
|
@@ -310,7 +310,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
|
|
|
310
310
|
}
|
|
311
311
|
function cycleSort(key) {
|
|
312
312
|
// Clicking a header drives a single sort, as before. Multi-sort is supplied
|
|
313
|
-
// by the caller through the `sort` prop (
|
|
313
|
+
// by the caller through the `sort` prop (built in a sort popover).
|
|
314
314
|
const dir = sortDirByKey.get(key);
|
|
315
315
|
if (!dir)
|
|
316
316
|
setSort({ key, dir: "asc" });
|
|
@@ -320,7 +320,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
|
|
|
320
320
|
setSort(null);
|
|
321
321
|
}
|
|
322
322
|
/**
|
|
323
|
-
* Which editor a column gets. Mirrors RecordsTable — the
|
|
323
|
+
* Which editor a column gets. Mirrors RecordsTable — the measured
|
|
324
324
|
* sibling — rather than giving every type the same text box:
|
|
325
325
|
* number/currency numeric, with a decimal keypad on touch
|
|
326
326
|
* date a native date field
|
|
@@ -53,7 +53,7 @@ const fromDate = (d) => ({
|
|
|
53
53
|
day: d.getDate(),
|
|
54
54
|
});
|
|
55
55
|
/**
|
|
56
|
-
*
|
|
56
|
+
* A measured date field: a trigger showing the value, opening a calendar in a
|
|
57
57
|
* popover. This is what `DatePicker` used to be; `DatePicker` is now
|
|
58
58
|
* seed-design's bare calendar, and this composes it.
|
|
59
59
|
*/
|
|
@@ -57,7 +57,7 @@ function useDialogInstanceId() {
|
|
|
57
57
|
}
|
|
58
58
|
/**
|
|
59
59
|
* A modal dialog — composes Zag's dialog machine (focus trap, scroll lock,
|
|
60
|
-
* Escape / outside-click dismissal) with the measured
|
|
60
|
+
* Escape / outside-click dismissal) with the measured modal surface.
|
|
61
61
|
* Compose the body with `DialogBody` and actions with `DialogFooter`.
|
|
62
62
|
*/
|
|
63
63
|
function Dialog({ open, onOpenChange, title, icon, width = 640, "aria-label": ariaLabel, closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
|
|
@@ -15,7 +15,7 @@ const PALETTE = [
|
|
|
15
15
|
tokens_1.contract.bgDanger,
|
|
16
16
|
];
|
|
17
17
|
/**
|
|
18
|
-
* A donut / ring chart — measured from
|
|
18
|
+
* A donut / ring chart — measured from a reports breakdown report. SVG
|
|
19
19
|
* ring using the r=15.915 (circumference 100) trick so slices are percentages;
|
|
20
20
|
* a centred total and an optional legend. `role="img"` with a summary.
|
|
21
21
|
*/
|
|
@@ -43,7 +43,7 @@ const React = __importStar(require("react"));
|
|
|
43
43
|
const core_1 = require("../../core");
|
|
44
44
|
const fileupload_recipe_1 = require("./fileupload.recipe");
|
|
45
45
|
exports.fileUploadLabels = {
|
|
46
|
-
//
|
|
46
|
+
// Matches the copy on the record Files pane.
|
|
47
47
|
title: "No files",
|
|
48
48
|
hint: "Drag a file here or choose one from your computer.",
|
|
49
49
|
remove: "Remove file",
|
|
@@ -88,7 +88,7 @@ function useFieldWiring({ htmlFor, messageId, invalid, required, }) {
|
|
|
88
88
|
}, [htmlFor, messageId, invalid, required]);
|
|
89
89
|
}
|
|
90
90
|
/**
|
|
91
|
-
* A labelled form field — measured from
|
|
91
|
+
* A labelled form field — measured from settings forms. A muted label
|
|
92
92
|
* above any control, with an optional description or error line below. When
|
|
93
93
|
* `error` is set it replaces the description; the control is given
|
|
94
94
|
* `aria-describedby`, plus `aria-invalid` and `aria-required` as they apply.
|
|
@@ -13,7 +13,7 @@ function niceNum(raw) {
|
|
|
13
13
|
return step * mag;
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
|
-
* A responsive line chart — measured from
|
|
16
|
+
* A responsive line chart — measured from a reports historical chart.
|
|
17
17
|
* A stretched SVG line/area (non-scaling stroke keeps it crisp) over dashed
|
|
18
18
|
* gridlines; dots are HTML so they stay round. `role="img"` with a summary.
|
|
19
19
|
*/
|
|
@@ -46,7 +46,7 @@ const menu_recipe_1 = require("./menu.recipe");
|
|
|
46
46
|
const menu_keyboard_1 = require("./menu-keyboard");
|
|
47
47
|
const MenuContext = React.createContext(null);
|
|
48
48
|
/**
|
|
49
|
-
* A dropdown menu — the ⋯ / sort / filter menu surface, on
|
|
49
|
+
* A dropdown menu — the ⋯ / sort / filter menu surface, on a measured
|
|
50
50
|
* popover. Give it a `trigger` element and Menu items as children. Opens on
|
|
51
51
|
* click / ↓ / Enter; roving-focus keyboard model (↑/↓ move, Home/End jump,
|
|
52
52
|
* typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
|
|
@@ -60,7 +60,7 @@ function Chip({ opt }) {
|
|
|
60
60
|
return ((0, jsx_runtime_1.jsx)("span", { className: "recordstable-tag", "data-tone": opt.tone ?? toneFor(opt.value), children: opt.label }));
|
|
61
61
|
}
|
|
62
62
|
/**
|
|
63
|
-
* A multi-select / tag editor — measured from
|
|
63
|
+
* A multi-select / tag editor — measured from a cell tag picker. The
|
|
64
64
|
* outlined trigger shows the selected values as coloured chips; it opens a
|
|
65
65
|
* popover with a search field over rows of "[chip] … [checkbox]" that toggle on
|
|
66
66
|
* click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
|
|
@@ -42,7 +42,7 @@ const radiogroup_recipe_1 = require("./radiogroup.recipe");
|
|
|
42
42
|
const radiogroup_keyboard_1 = require("./radiogroup-keyboard");
|
|
43
43
|
const RadioContext = React.createContext(null);
|
|
44
44
|
/**
|
|
45
|
-
* A radio group — measured from
|
|
45
|
+
* A radio group — measured from a settings page. `default` renders rows (a ring
|
|
46
46
|
* that fills brand when selected + a label); `card` renders a row of bordered
|
|
47
47
|
* preview cards whose border turns brand when picked (the Theme picker). Arrow
|
|
48
48
|
* keys move between options (roving focus). Controlled or uncontrolled.
|
|
@@ -94,7 +94,7 @@ function writeStoredPercent(key, percent, storage = window.localStorage) {
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
/**
|
|
97
|
-
*
|
|
97
|
+
* An adjustable-panel primitive: a spacer that reserves layout width
|
|
98
98
|
* plus a panel that overlays it, so the panel can move between docked
|
|
99
99
|
* (in-flow) and floating (`position: fixed`, an overlay) without a reflow
|
|
100
100
|
* glitch. Drag the edge handle to resize; constraints are CSS `min-width`/
|
|
@@ -40,7 +40,7 @@ const core_1 = require("../../core");
|
|
|
40
40
|
const radiogroup_1 = require("../radiogroup");
|
|
41
41
|
const segmented_recipe_1 = require("./segmented.recipe");
|
|
42
42
|
/**
|
|
43
|
-
* A segmented control (single-choice toggle) — measured from
|
|
43
|
+
* A segmented control (single-choice toggle) — measured from a view
|
|
44
44
|
* switcher. `role="radiogroup"` over `role="radio"` buttons with roving
|
|
45
45
|
* tabindex and ←/→ (Home/End) keyboard selection.
|
|
46
46
|
*/
|
|
@@ -46,7 +46,7 @@ function optionText(o) {
|
|
|
46
46
|
return typeof o.label === "string" ? o.label : o.value;
|
|
47
47
|
}
|
|
48
48
|
/**
|
|
49
|
-
* A select / dropdown — the settings control, measured
|
|
49
|
+
* A select / dropdown — the settings control, measured live, with an
|
|
50
50
|
* optional Linear-style search. A `role="combobox"` trigger opens a
|
|
51
51
|
* `role="listbox"`; pass `searchable` to add a filter field at the top (with a
|
|
52
52
|
* "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
|
|
@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const stagebar_recipe_1 = require("./stagebar.recipe");
|
|
6
6
|
const DEFAULT = "#266df0";
|
|
7
7
|
/**
|
|
8
|
-
* A pipeline stage bar — measured from
|
|
8
|
+
* A pipeline stage bar — measured from a deal-stage highlight. Each stage
|
|
9
9
|
* is a segment tinted with its colour; the current stage is at full strength.
|
|
10
10
|
*/
|
|
11
11
|
function StageBar({ stages, current, "aria-label": ariaLabel, className, ...rest }) {
|
|
@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const lucide_react_1 = require("lucide-react");
|
|
6
6
|
const statcard_recipe_1 = require("./statcard.recipe");
|
|
7
7
|
/**
|
|
8
|
-
* A single-metric KPI tile — measured from
|
|
8
|
+
* A single-metric KPI tile — measured from a reports number/insight card.
|
|
9
9
|
* Label, a large value, and an optional up/down delta pill with a caption.
|
|
10
10
|
*/
|
|
11
11
|
function StatCard({ label, icon, value, delta, deltaSuffix = "%", caption, card, className, ...rest }) {
|
|
@@ -39,7 +39,7 @@ const React = __importStar(require("react"));
|
|
|
39
39
|
const core_1 = require("../../core");
|
|
40
40
|
const switch_recipe_1 = require("./switch.recipe");
|
|
41
41
|
/**
|
|
42
|
-
* An on/off toggle — the settings switch, measured
|
|
42
|
+
* An on/off toggle — the settings switch, measured live. Renders a
|
|
43
43
|
* `role="switch"` button (a native checkbox's semantics without its box), so
|
|
44
44
|
* label association and keyboard (Space/Enter) come for free. Controlled via
|
|
45
45
|
* `checked`/`onCheckedChange`, or uncontrolled from `defaultChecked`.
|
|
@@ -66,7 +66,7 @@ const asText = (v) => {
|
|
|
66
66
|
// Before the generic object branch, which would look for `.name`, find none
|
|
67
67
|
// and return "" — turning every Date into the empty string (#185). The ISO
|
|
68
68
|
// date is stable and locale-independent, so `contains "2026-06"` works; it
|
|
69
|
-
// will not match "16/06/2026", and a date-aware operator set
|
|
69
|
+
// will not match "16/06/2026", and a date-aware operator set needs a
|
|
70
70
|
// date-picker UI, which has to be measured before it can be built.
|
|
71
71
|
if (v instanceof Date)
|
|
72
72
|
return Number.isNaN(v.getTime()) ? "" : v.toISOString().slice(0, 10);
|
|
@@ -128,7 +128,7 @@ function applySorts(rows, sorts, get = (row, key) => row[key]) {
|
|
|
128
128
|
});
|
|
129
129
|
}
|
|
130
130
|
/**
|
|
131
|
-
*
|
|
131
|
+
* The table toolbar as a standalone primitive: the Sort and Filter
|
|
132
132
|
* controls, their menus, the sort-condition rows and the filter chips.
|
|
133
133
|
*
|
|
134
134
|
* `RecordsTable` renders this same measured chrome internally; this is the
|
|
@@ -40,8 +40,8 @@ const tabs_recipe_1 = require("./tabs.recipe");
|
|
|
40
40
|
const tabs_keyboard_1 = require("./tabs-keyboard");
|
|
41
41
|
/**
|
|
42
42
|
* A row of text tabs over a sliding ink underline — the record-view tab bar,
|
|
43
|
-
* measured
|
|
44
|
-
* Home/End jump); activation follows focus
|
|
43
|
+
* measured live. Roving-tabindex keyboard model (←/→ move + activate,
|
|
44
|
+
* Home/End jump); activation follows focus. Controlled via
|
|
45
45
|
* `value`/`onValueChange`, or uncontrolled from `defaultValue`.
|
|
46
46
|
*/
|
|
47
47
|
function Tabs({ tabs, value, defaultValue, onValueChange, leading, children, className, "aria-label": ariaLabel, ...rest }) {
|
|
@@ -38,7 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
38
38
|
const React = __importStar(require("react"));
|
|
39
39
|
const textarea_recipe_1 = require("./textarea.recipe");
|
|
40
40
|
/**
|
|
41
|
-
* A multiline text field — measured from
|
|
41
|
+
* A multiline text field — measured from settings. Forwards every native
|
|
42
42
|
* `<textarea>` prop; pass `showCount` with `maxLength` to render a live
|
|
43
43
|
* character counter (which turns red if the value exceeds the limit).
|
|
44
44
|
*/
|
|
@@ -39,7 +39,7 @@ const React = __importStar(require("react"));
|
|
|
39
39
|
const react_dom_1 = require("react-dom");
|
|
40
40
|
const tooltip_recipe_1 = require("./tooltip.recipe");
|
|
41
41
|
/**
|
|
42
|
-
* A hover/focus tooltip — a dark hint chip measured
|
|
42
|
+
* A hover/focus tooltip — a dark hint chip measured live. Wraps its
|
|
43
43
|
* trigger in an inline element, shows after `delay` on pointer-enter / focus,
|
|
44
44
|
* and hides on leave / blur / Escape. The bubble is portaled and positioned
|
|
45
45
|
* above the trigger (flipping below near the top edge).
|
|
@@ -40,8 +40,8 @@ const React = __importStar(require("react"));
|
|
|
40
40
|
const core_1 = require("../../core");
|
|
41
41
|
const appshell_recipe_1 = require("./appshell.recipe");
|
|
42
42
|
/**
|
|
43
|
-
* App-shell layout with a collapsible + resizable sidebar, mirroring
|
|
44
|
-
* window: drag the sidebar's right edge to resize, press the sidebar's
|
|
43
|
+
* App-shell layout with a collapsible + resizable sidebar, mirroring a live
|
|
44
|
+
* app's window: drag the sidebar's right edge to resize, press the sidebar's
|
|
45
45
|
* collapse button to slide it away (a floating button brings it back). The
|
|
46
46
|
* sidebar pane clips rather than squishing, so its content never reflows.
|
|
47
47
|
*/
|
|
@@ -68,8 +68,8 @@ function AppShell({ sidebar, children, width: widthProp, defaultWidth = 275, onW
|
|
|
68
68
|
// it there. Mirroring the handle's CSS without this is the half-conversion
|
|
69
69
|
// lesson 54 is about, which is why both change in one commit (#212).
|
|
70
70
|
const dir = (0, core_1.isRtlElement)(e.currentTarget) ? -1 : 1;
|
|
71
|
-
//
|
|
72
|
-
//
|
|
71
|
+
// Only enter the drag state once the pointer has actually moved — a click
|
|
72
|
+
// on the handle is not a drag, so the blue bar must not flash on press.
|
|
73
73
|
let moved = false;
|
|
74
74
|
let last = startW;
|
|
75
75
|
const prevSelect = document.body.style.userSelect;
|
|
@@ -4,7 +4,7 @@ exports.AuthShell = AuthShell;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const authshell_recipe_1 = require("./authshell.recipe");
|
|
6
6
|
/**
|
|
7
|
-
* The
|
|
7
|
+
* The welcome/auth layout — measured live.
|
|
8
8
|
* A centered page frame: an optional top progress bar, a logo, a two-pane
|
|
9
9
|
* card (the form + an optional product preview, hidden under 1200px), and
|
|
10
10
|
* a footer. Auth-surface Input/FormField/Button treatment (flatter fields,
|
|
@@ -42,7 +42,7 @@ const board_recipe_1 = require("./board.recipe");
|
|
|
42
42
|
* A kanban board with native drag-and-drop between columns. Cards are
|
|
43
43
|
* `draggable`; dropping one on a column reparents it via `onCardsChange`
|
|
44
44
|
* (the parent owns the cards, so the move is a controlled state update).
|
|
45
|
-
* Measured from
|
|
45
|
+
* Measured from a deals pipeline.
|
|
46
46
|
*/
|
|
47
47
|
function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel = "New", getCardLabel, announceMove = (column, card) => card ? `${card} moved to ${column}` : `Moved to ${column}`, className, ...rest }) {
|
|
48
48
|
const [dragId, setDragId] = React.useState(null);
|
|
@@ -245,7 +245,7 @@ function Command({ open, onOpenChange, items = exports.defaultCommandItems, plac
|
|
|
245
245
|
combo.setInputValue("", "script");
|
|
246
246
|
combo.clearHighlightValue();
|
|
247
247
|
}, [open]);
|
|
248
|
-
// The footer's primary button mirrors the currently highlighted row (
|
|
248
|
+
// The footer's primary button mirrors the currently highlighted row (this
|
|
249
249
|
// shows the active action there and runs it on ↵ / click).
|
|
250
250
|
const highlightedItem = filteredItems.find((item) => item.id === combo.highlightedValue) ??
|
|
251
251
|
filteredItems[0];
|
|
@@ -4,7 +4,7 @@ exports.EntityCard = EntityCard;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const entitycard_recipe_1 = require("./entitycard.recipe");
|
|
6
6
|
/**
|
|
7
|
-
* A note / entity card — measured from
|
|
7
|
+
* A note / entity card — measured from a notes grid. A bordered white
|
|
8
8
|
* card with an author row, a title, a clamped excerpt, and a footer row with a
|
|
9
9
|
* right-aligned date. Rendered as a button so the whole card is clickable.
|
|
10
10
|
*/
|
|
@@ -42,7 +42,7 @@ const GRID = 20;
|
|
|
42
42
|
const clampZoom = (z) => Math.min(1.5, Math.max(0.5, z));
|
|
43
43
|
/**
|
|
44
44
|
* A pannable, zoomable node canvas with draggable nodes and connecting edges —
|
|
45
|
-
* measured from
|
|
45
|
+
* measured from a workflows editor. Drag a node to move it (fires
|
|
46
46
|
* `onNodesChange`); drag the background to pan; use the toolbar to zoom.
|
|
47
47
|
*/
|
|
48
48
|
function FlowCanvas({ nodes, edges, onNodesChange, renderNode, nodeWidth = 240, nodeHeight = 64, "aria-label": ariaLabel, className, zoomOutLabel = "Zoom out", zoomInLabel = "Zoom in", resetLabel = "Reset", edgesLabel = "Edges", ...rest }) {
|
|
@@ -40,7 +40,7 @@ const React = __importStar(require("react"));
|
|
|
40
40
|
const tabs_1 = require("../../components/tabs");
|
|
41
41
|
const inbox_recipe_1 = require("./inbox.recipe");
|
|
42
42
|
/**
|
|
43
|
-
* A notifications inbox panel — measured from
|
|
43
|
+
* A notifications inbox panel — measured from a notification flyout. A
|
|
44
44
|
* title, Notifications/Requests tabs with counts, then notification rows
|
|
45
45
|
* (avatar + message + time + unread dot) or a centred empty state. Put it inside
|
|
46
46
|
* a Popover for the flyout.
|
|
@@ -13,7 +13,7 @@ function ListRow({ children, onClick, }) {
|
|
|
13
13
|
return (0, jsx_runtime_1.jsx)("div", { className: "listpage-row", children: children });
|
|
14
14
|
}
|
|
15
15
|
/**
|
|
16
|
-
* The entity-list page shell — measured from
|
|
16
|
+
* The entity-list page shell — measured from Reports/Sequences/Tasks/
|
|
17
17
|
* Notes list views. A view-bar toolbar (leading/trailing slots + record count),
|
|
18
18
|
* an optional dashed Favorites region, then column headers and time-grouped
|
|
19
19
|
* rows. Rows are composed by the caller (wrap each in <ListRow>).
|
|
@@ -15,7 +15,7 @@ exports.onboardingLabels = {
|
|
|
15
15
|
completedStepLabel: (label) => `${String(label)} — completed`,
|
|
16
16
|
};
|
|
17
17
|
/**
|
|
18
|
-
* An onboarding checklist card — measured from
|
|
18
|
+
* An onboarding checklist card — measured from a floating "Getting
|
|
19
19
|
* started" widget. Title + optional menu/minimize, a segmented progress bar,
|
|
20
20
|
* and step rows (completed rows strike through with a brand check).
|
|
21
21
|
*/
|
|
@@ -63,7 +63,7 @@ exports.recordPageLabels = {
|
|
|
63
63
|
exitFullScreen: "Exit full screen",
|
|
64
64
|
resizeDetails: "Resize details column",
|
|
65
65
|
composeEmail: "Compose email",
|
|
66
|
-
askAttio: "Ask
|
|
66
|
+
askAttio: "Ask AI",
|
|
67
67
|
addToList: "Add to list",
|
|
68
68
|
noLists: "This record has not been added to any lists.",
|
|
69
69
|
highlights: "Highlights",
|
|
@@ -183,7 +183,7 @@ function EmptyCard({ icon, children, }) {
|
|
|
183
183
|
return ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-emptycard", children: [icon, children] }));
|
|
184
184
|
}
|
|
185
185
|
/**
|
|
186
|
-
* The full-page company record view — the page
|
|
186
|
+
* The full-page company record view — the page that opens when you click into a
|
|
187
187
|
* record (as opposed to the peek [RecordPanel]). A top breadcrumb bar with
|
|
188
188
|
* favourite/edit/compose/… actions, a 320px left attribute column, and a tabbed
|
|
189
189
|
* main area: Overview stacks Highlights, an Activity feed, and Notes / Tasks /
|
|
@@ -208,12 +208,12 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
|
|
|
208
208
|
const [notes, setNotes] = React.useState([]);
|
|
209
209
|
const [tasks, setTasks] = React.useState([]);
|
|
210
210
|
const [showAllActivity, setShowAllActivity] = React.useState(false);
|
|
211
|
-
// Collapsible + searchable Record Details
|
|
211
|
+
// Collapsible + searchable Record Details.
|
|
212
212
|
const [detailsOpen, setDetailsOpen] = React.useState(true);
|
|
213
213
|
const [searchOpen, setSearchOpen] = React.useState(false);
|
|
214
214
|
const [fieldQuery, setFieldQuery] = React.useState("");
|
|
215
215
|
const [showAllValues, setShowAllValues] = React.useState(false);
|
|
216
|
-
// Drag-resizable left details column
|
|
216
|
+
// Drag-resizable left details column.
|
|
217
217
|
const [detailsW, setDetailsW] = React.useState(320);
|
|
218
218
|
const [resizing, setResizing] = React.useState(false);
|
|
219
219
|
const dragRef = React.useRef(null);
|
|
@@ -254,14 +254,14 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
|
|
|
254
254
|
const matchedFields = q
|
|
255
255
|
? fields.filter((col) => col.label.toLowerCase().includes(q))
|
|
256
256
|
: fields;
|
|
257
|
-
//
|
|
257
|
+
// Shows the first 5 fields; "View all values" reveals the rest.
|
|
258
258
|
const FIELD_LIMIT = 5;
|
|
259
259
|
const canRevealFields = !q && matchedFields.length > FIELD_LIMIT;
|
|
260
260
|
const shownFields = canRevealFields && !showAllValues
|
|
261
261
|
? matchedFields.slice(0, FIELD_LIMIT)
|
|
262
262
|
: matchedFields;
|
|
263
263
|
const byKey = React.useMemo(() => new Map(columns.map((col) => [col.key, col])), [columns]);
|
|
264
|
-
//
|
|
264
|
+
// The Overview "Highlights" — a fixed set of enrichment stats (measured
|
|
265
265
|
// from the live app), a couple derived from the record, the rest empty.
|
|
266
266
|
const arrVal = record.arr;
|
|
267
267
|
const empVal = record.employees;
|
|
@@ -406,7 +406,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
|
|
|
406
406
|
setDetailsOpen(true);
|
|
407
407
|
}, children: searchOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 14, strokeWidth: 1.75 })) })] }), detailsOpen &&
|
|
408
408
|
(shownFields.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shownFields.map((col) => ((0, jsx_runtime_1.jsxs)("div", { className: "recordpage-field", children: [(0, jsx_runtime_1.jsxs)("span", { className: "recordpage-field-label", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, (0, jsx_runtime_1.jsx)("span", { className: "recordpage-field-label-text", children: col.label })] }), (0, jsx_runtime_1.jsx)("span", { className: "recordpage-field-value", children: (0, jsx_runtime_1.jsx)(FieldValue, { col: col, row: record, labels: t }) })] }, col.key))), canRevealFields && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordpage-viewall recordpage-viewall--section", onClick: () => {
|
|
409
|
-
//
|
|
409
|
+
// Revealing all fields also opens the (focused)
|
|
410
410
|
// field search; collapsing closes it.
|
|
411
411
|
const next = !showAllValues;
|
|
412
412
|
setShowAllValues(next);
|
|
@@ -311,7 +311,7 @@ function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", label
|
|
|
311
311
|
}
|
|
312
312
|
// Always-interactive cell editors for the picker column types (status / date /
|
|
313
313
|
// reference). Each is a ghost crisp control that reads the cell value and
|
|
314
|
-
// commits the new one — matching
|
|
314
|
+
// commits the new one — matching measured inline field editors.
|
|
315
315
|
function StatusCell({ column, row, onChange, }) {
|
|
316
316
|
return ((0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", "aria-label": column.label, placeholder: "\u2014", value: row[column.key] ?? undefined, onValueChange: onChange, options: column.options ?? [] }));
|
|
317
317
|
}
|
|
@@ -328,8 +328,8 @@ function TagsCell({ column, row, options, onChange, labels, }) {
|
|
|
328
328
|
/**
|
|
329
329
|
* A date-only cell is a CALENDAR DATE, not an instant. ECMA-262 parses the
|
|
330
330
|
* date-only ISO forms — `1998`, `1998-09`, `1998-09-04` — as UTC midnight, and
|
|
331
|
-
* the field then renders that instant in the reader's own timezone.
|
|
332
|
-
*
|
|
331
|
+
* the field then renders that instant in the reader's own timezone. A
|
|
332
|
+
* `founded: "1998"` field therefore read **Dec 31, 1997** for every reader west
|
|
333
333
|
* of UTC, at every hour of every day, and a date picked east of UTC
|
|
334
334
|
* round-tripped back a day short through `toISOString()` (#220).
|
|
335
335
|
*
|
|
@@ -358,7 +358,7 @@ function DateCell({ column, row, onChange, }) {
|
|
|
358
358
|
return ((0, jsx_runtime_1.jsx)(datepickerfield_1.DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange(formatCellDate(d)) }));
|
|
359
359
|
}
|
|
360
360
|
/**
|
|
361
|
-
* The "New <object>" create modal — measured from
|
|
361
|
+
* The "New <object>" create modal — measured from a create-record dialog:
|
|
362
362
|
* a stacked label + "Set …" input per column, a "Create more" toggle, and a
|
|
363
363
|
* primary "Create record" action (⌘↵). Building the row mirrors the inline
|
|
364
364
|
* editor's per-type coercion so a created record reads back like an edited one.
|
|
@@ -418,7 +418,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
|
|
|
418
418
|
} })] }, col.key))) }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "dialog-more", children: [labels.createMore, (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "dialog-submit", onClick: submit, children: [labels.createRecord, (0, jsx_runtime_1.jsx)("span", { className: "dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
|
|
419
419
|
}
|
|
420
420
|
/**
|
|
421
|
-
*
|
|
421
|
+
* A measured-style record grid — fully featured. Toolbar (search / sort status /
|
|
422
422
|
* count / New), sticky checkbox + entity columns, 36px rows, typed cells,
|
|
423
423
|
* click-to-sort headers, column resize by dragging a header edge, inline cell
|
|
424
424
|
* editing (double-click a text/number/url/date cell), add-row and add-column,
|
|
@@ -437,13 +437,13 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
|
|
|
437
437
|
// because a caller passing a stable array never triggers this.
|
|
438
438
|
React.useEffect(() => setCols(columnsProp), [columnsProp]);
|
|
439
439
|
React.useEffect(() => setData(rowsProp), [rowsProp]);
|
|
440
|
-
//
|
|
440
|
+
// Multi-criteria sort: an ordered list of {field, direction} rows.
|
|
441
441
|
const [sorts, setSorts] = React.useState([]);
|
|
442
442
|
const [dragSort, setDragSort] = React.useState(null);
|
|
443
443
|
const [editing, setEditing] = React.useState(null);
|
|
444
444
|
const [renamingCol, setRenamingCol] = React.useState(null);
|
|
445
445
|
const [creating, setCreating] = React.useState(false);
|
|
446
|
-
//
|
|
446
|
+
// A measured-style filter: an ordered list of conditions, each shown as a toolbar
|
|
447
447
|
// chip with an editable value (operator is "contains")
|
|
448
448
|
const [filterConds, setFilterConds] = React.useState([]);
|
|
449
449
|
const [filterQuery, setFilterQuery] = React.useState("");
|
|
@@ -734,7 +734,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
|
|
|
734
734
|
* `nearest` on both axes: a cell already in view is left exactly where it
|
|
735
735
|
* is, which is what makes this safe to run after a click too.
|
|
736
736
|
*
|
|
737
|
-
* No `behavior` of our own — the page's `scroll-behavior` decides, and
|
|
737
|
+
* No `behavior` of our own — the page's `scroll-behavior` decides, and it
|
|
738
738
|
* jumps rather than glides — except under reduced motion, where an explicit
|
|
739
739
|
* "auto" is the only thing that beats a host page that set
|
|
740
740
|
* `scroll-behavior: smooth` on the scroller (#208's rule: JS motion reads
|
|
@@ -1023,7 +1023,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
|
|
|
1023
1023
|
label: ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-sort-optlabel", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), t.descending] })),
|
|
1024
1024
|
keywords: t.descending,
|
|
1025
1025
|
},
|
|
1026
|
-
], "aria-label": t.sortDirection }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-foot", children: (0, jsx_runtime_1.jsxs)("a", { className: "recordstable-sort-learn", href:
|
|
1026
|
+
], "aria-label": t.sortDirection }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), (0, jsx_runtime_1.jsx)("div", { className: "recordstable-sort-foot", children: t.learnSortingHref ? ((0, jsx_runtime_1.jsxs)("a", { className: "recordstable-sort-learn", href: t.learnSortingHref, target: "_blank", rel: "noreferrer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "recordstable-sort-learn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) })] }))] }), (0, jsx_runtime_1.jsxs)("span", { className: "recordstable-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `recordstable-tool recordstable-tool--ghost${activeFilters ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && ((0, jsx_runtime_1.jsxs)("div", { className: "recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [(0, jsx_runtime_1.jsx)("input", { className: "recordstable-menu-input", placeholder: t.filterByPlaceholder, "aria-label": t.filterByField,
|
|
1027
1027
|
// biome-ignore lint/a11y/noAutofocus: focus the picker on open
|
|
1028
1028
|
autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), cols
|
|
1029
1029
|
.filter((col) => col.label
|
|
@@ -40,7 +40,7 @@ const React = __importStar(require("react"));
|
|
|
40
40
|
const richtext_recipe_1 = require("./richtext.recipe");
|
|
41
41
|
const exec = (cmd, value) => document.execCommand(cmd, false, value);
|
|
42
42
|
/**
|
|
43
|
-
* A block rich-text editor — measured from
|
|
43
|
+
* A block rich-text editor — measured from a notes editor. A large title,
|
|
44
44
|
* a prose body (headings, lists, quote, marks, links), and a floating toolbar
|
|
45
45
|
* that appears over a text selection. Built on contentEditable, dependency-free.
|
|
46
46
|
* Uncontrolled: seed with `defaultTitle`/`defaultHtml`, read via `onChange`.
|
|
@@ -4,7 +4,7 @@ exports.SettingsSection = SettingsSection;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const settingssection_recipe_1 = require("./settingssection.recipe");
|
|
6
6
|
/**
|
|
7
|
-
* A settings section — measured from
|
|
7
|
+
* A settings section — measured from settings pages. A title + optional
|
|
8
8
|
* subtitle and trailing action, then a gapped stack of rows (pair with
|
|
9
9
|
* FormField). Compose several inside a settings content pane.
|
|
10
10
|
*/
|