@antscorp/ui 0.1.2 → 0.1.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/README.md +26 -2
- package/dist/atoms/AddButton.d.ts +3 -6
- package/dist/atoms/Chip.d.ts +2 -5
- package/dist/atoms/Chip.js +1 -1
- package/dist/atoms/InfoTip.js +2 -0
- package/dist/atoms/LabeledDivider.d.ts +1 -1
- package/dist/atoms/PanelSearchInput.d.ts +1 -1
- package/dist/atoms/RemoveButton.d.ts +2 -5
- package/dist/atoms/TextAction.d.ts +5 -6
- package/dist/atoms/TruncatedOption.d.ts +1 -1
- package/dist/cli.js +248 -0
- package/dist/doc/schema.d.ts +34 -0
- package/dist/doc/schema.js +33 -0
- package/dist/docs.json +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +53 -51
- package/dist/lib/iso.d.ts +2 -2
- package/dist/lib/iso.js +16 -8
- package/dist/lib/tokenEditorExtensions.js +1 -1
- package/dist/lib/useLoadingShown.d.ts +1 -1
- package/dist/molecules/AccentCard.d.ts +2 -3
- package/dist/molecules/AccentCard.js +2 -2
- package/dist/molecules/CheckRow.d.ts +3 -8
- package/dist/molecules/ChoiceTiles.d.ts +1 -1
- package/dist/molecules/ChoiceTiles.js +1 -1
- package/dist/molecules/CommitTextField.d.ts +1 -19
- package/dist/molecules/CommitTextField.js +21 -18
- package/dist/molecules/ConfirmDialog.d.ts +2 -7
- package/dist/molecules/DateTimeInput.d.ts +6 -3
- package/dist/molecules/DateTimeInput.js +82 -73
- package/dist/molecules/FieldGroup.d.ts +1 -1
- package/dist/molecules/FieldRow.d.ts +1 -1
- package/dist/molecules/MetaTable.d.ts +1 -1
- package/dist/molecules/PhoneFrame.d.ts +1 -1
- package/dist/molecules/RemovableRow.d.ts +1 -1
- package/dist/molecules/RemovableRow.js +32 -32
- package/dist/molecules/RevealRadioGroup.d.ts +2 -9
- package/dist/molecules/RevealSwitch.d.ts +2 -7
- package/dist/molecules/Select.d.ts +8 -24
- package/dist/molecules/Select.js +50 -44
- package/dist/molecules/SideLabelRow.d.ts +1 -1
- package/dist/molecules/SplitButton.d.ts +1 -1
- package/dist/molecules/StatusButton.d.ts +2 -7
- package/dist/molecules/TagSelect.d.ts +2 -2
- package/dist/molecules/TransferLayout.d.ts +1 -1
- package/dist/molecules/TreeOptions.d.ts +4 -3
- package/dist/molecules/TreeOptions.js +67 -44
- package/dist/organisms/HourOfDayRow.js +2 -2
- package/dist/organisms/HourOfWeekGrid.js +2 -2
- package/dist/organisms/RuleGroups.d.ts +3 -3
- package/dist/organisms/SearchableGroupedList.d.ts +1 -1
- package/dist/organisms/TransferPicker.d.ts +1 -1
- package/dist/organisms/TreeSearchPanel.js +50 -47
- package/dist/organisms/TreeSelect.d.ts +3 -3
- package/dist/ui.css +1 -1
- package/package.json +36 -19
- package/src/atoms/AddButton.tsx +3 -7
- package/src/atoms/Chip.tsx +7 -9
- package/src/atoms/InfoTip.tsx +2 -2
- package/src/atoms/LabeledDivider.tsx +1 -1
- package/src/atoms/PanelSearchInput.tsx +1 -1
- package/src/atoms/RemoveButton.tsx +2 -6
- package/src/atoms/TextAction.tsx +6 -8
- package/src/atoms/TruncatedOption.tsx +1 -1
- package/src/doc/schema.ts +67 -0
- package/src/index.ts +2 -0
- package/src/lib/iso.ts +15 -3
- package/src/lib/tokenEditorExtensions.ts +1 -1
- package/src/lib/useLoadMore.ts +1 -2
- package/src/lib/useLoadingShown.ts +1 -1
- package/src/molecules/AccentCard.tsx +11 -10
- package/src/molecules/CheckRow.tsx +3 -9
- package/src/molecules/ChoiceTiles.tsx +6 -4
- package/src/molecules/CommitTextField.tsx +15 -20
- package/src/molecules/ConfirmDialog.tsx +2 -8
- package/src/molecules/DateTimeInput.tsx +86 -68
- package/src/molecules/DurationInput.tsx +2 -2
- package/src/molecules/FieldGroup.tsx +1 -1
- package/src/molecules/FieldRow.tsx +1 -1
- package/src/molecules/FrequencyLimitRow.tsx +1 -1
- package/src/molecules/MetaTable.tsx +1 -1
- package/src/molecules/PhoneFrame.tsx +2 -2
- package/src/molecules/RemovableRow.tsx +3 -3
- package/src/molecules/RevealRadioGroup.tsx +5 -10
- package/src/molecules/RevealSwitch.tsx +2 -8
- package/src/molecules/Select.tsx +23 -23
- package/src/molecules/SideLabelRow.tsx +2 -2
- package/src/molecules/SplitButton.tsx +1 -1
- package/src/molecules/StatusButton.tsx +2 -8
- package/src/molecules/TagSelect.tsx +5 -5
- package/src/molecules/TransferLayout.tsx +2 -3
- package/src/molecules/TreeOptions.tsx +89 -65
- package/src/organisms/HourOfDayRow.tsx +5 -3
- package/src/organisms/HourOfWeekGrid.tsx +5 -3
- package/src/organisms/RuleGroups.tsx +3 -3
- package/src/organisms/SearchableGroupedList.tsx +2 -2
- package/src/organisms/TransferPicker.tsx +3 -3
- package/src/organisms/TreeSearchPanel.tsx +2 -2
- package/src/organisms/TreeSelect.tsx +4 -4
|
@@ -5,94 +5,103 @@ import { c as a } from "react/compiler-runtime";
|
|
|
5
5
|
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
6
6
|
import { HStack as c } from "@astryxdesign/core/HStack";
|
|
7
7
|
import { Text as l } from "@astryxdesign/core/Text";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
8
|
+
import { TextInput as u } from "@astryxdesign/core/TextInput";
|
|
9
|
+
import { DateInput as d } from "@astryxdesign/core/DateInput";
|
|
10
|
+
import { TimeInput as f } from "@astryxdesign/core/TimeInput";
|
|
10
11
|
// src/molecules/DateTimeInput.tsx
|
|
11
|
-
function
|
|
12
|
-
let
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
let
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
let
|
|
45
|
-
|
|
46
|
-
label:
|
|
47
|
-
size:
|
|
48
|
-
isLabelHidden:
|
|
49
|
-
|
|
12
|
+
function p(p) {
|
|
13
|
+
let m = a(52), { label: h, isDisabled: g, isReadOnly: _, error: v, hasTime: y, frame: b } = p, x = g !== void 0 && g, S = _ !== void 0 && _, C = y === void 0 || y, w = p.size ?? "md", T = b === "none", E, D, O;
|
|
14
|
+
if (m[0] !== v || m[1] !== C || m[2] !== x || m[3] !== T || m[4] !== S || m[5] !== p || m[6] !== w) {
|
|
15
|
+
let [r, i] = p.value.split(" ");
|
|
16
|
+
E = r === void 0 ? "" : r, O = i === void 0 ? "" : i;
|
|
17
|
+
let a = !T, s = p.isRequired ?? !1, c;
|
|
18
|
+
m[10] !== T || m[11] !== p.description ? (c = T && p.description !== void 0 ? { description: p.description } : {}, m[10] = T, m[11] = p.description, m[12] = c) : c = m[12];
|
|
19
|
+
let l;
|
|
20
|
+
m[13] !== v || m[14] !== T ? (l = T ? e(v) : {}, m[13] = v, m[14] = T, m[15] = l) : l = m[15];
|
|
21
|
+
let f;
|
|
22
|
+
m[16] !== p.labels.date || m[17] !== w || m[18] !== a || m[19] !== s || m[20] !== c || m[21] !== l ? (f = {
|
|
23
|
+
label: p.labels.date,
|
|
24
|
+
size: w,
|
|
25
|
+
isLabelHidden: a,
|
|
26
|
+
isRequired: s,
|
|
27
|
+
...c,
|
|
28
|
+
...l
|
|
29
|
+
}, m[16] = p.labels.date, m[17] = w, m[18] = a, m[19] = s, m[20] = c, m[21] = l, m[22] = f) : f = m[22];
|
|
30
|
+
let h = f;
|
|
31
|
+
D = S ? /* @__PURE__ */ o(u, {
|
|
32
|
+
...h,
|
|
33
|
+
value: E,
|
|
34
|
+
isReadOnly: !0
|
|
35
|
+
}) : /* @__PURE__ */ o(d, {
|
|
36
|
+
...h,
|
|
37
|
+
isDisabled: x,
|
|
38
|
+
...t(E),
|
|
39
|
+
...n(p.min),
|
|
40
|
+
onChange: (e) => {
|
|
41
|
+
p.onChange(C ? [e, O === "" ? "00:00:00" : O].join(" ") : e ?? "");
|
|
42
|
+
}
|
|
43
|
+
}), m[0] = v, m[1] = C, m[2] = x, m[3] = T, m[4] = S, m[5] = p, m[6] = w, m[7] = E, m[8] = D, m[9] = O;
|
|
44
|
+
} else E = m[7], D = m[8], O = m[9];
|
|
45
|
+
let k = D, A = !T, j = w === "sm" ? 150 : 168, M;
|
|
46
|
+
m[23] !== p.labels.time || m[24] !== w || m[25] !== A || m[26] !== j ? (M = {
|
|
47
|
+
label: p.labels.time,
|
|
48
|
+
size: w,
|
|
49
|
+
isLabelHidden: A,
|
|
50
|
+
width: j
|
|
51
|
+
}, m[23] = p.labels.time, m[24] = w, m[25] = A, m[26] = j, m[27] = M) : M = m[27];
|
|
52
|
+
let N = M, P;
|
|
53
|
+
m[28] !== E || m[29] !== C || m[30] !== x || m[31] !== S || m[32] !== p || m[33] !== O || m[34] !== N ? (P = C && (S ? /* @__PURE__ */ o(u, {
|
|
54
|
+
...N,
|
|
55
|
+
value: O,
|
|
56
|
+
isReadOnly: !0
|
|
57
|
+
}) : /* @__PURE__ */ o(f, {
|
|
58
|
+
...N,
|
|
59
|
+
hourFormat: p.hourFormat ?? "12h",
|
|
50
60
|
hasSeconds: !0,
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
...r(F),
|
|
61
|
+
isDisabled: x || p.isTimeLockedWithoutDate === !0 && E === "",
|
|
62
|
+
...r(O),
|
|
54
63
|
onChange: (e) => {
|
|
55
|
-
|
|
64
|
+
p.onChange([E, e?.length === 5 ? `${e}:00` : e].join(" "));
|
|
56
65
|
}
|
|
57
|
-
}),
|
|
58
|
-
let
|
|
59
|
-
|
|
66
|
+
})), m[28] = E, m[29] = C, m[30] = x, m[31] = S, m[32] = p, m[33] = O, m[34] = N, m[35] = P) : P = m[35];
|
|
67
|
+
let F = P, I;
|
|
68
|
+
m[36] === p.labels.timezone ? I = m[37] : (I = p.labels.timezone !== void 0 && /* @__PURE__ */ o(l, {
|
|
60
69
|
type: "supporting",
|
|
61
|
-
children:
|
|
62
|
-
}),
|
|
63
|
-
let
|
|
64
|
-
if (
|
|
65
|
-
if (!
|
|
70
|
+
children: p.labels.timezone
|
|
71
|
+
}), m[36] = p.labels.timezone, m[37] = I);
|
|
72
|
+
let L = I;
|
|
73
|
+
if (T) {
|
|
74
|
+
if (!C) return k;
|
|
66
75
|
let e;
|
|
67
|
-
return
|
|
76
|
+
return m[38] !== k || m[39] !== F || m[40] !== L ? (e = /* @__PURE__ */ s(c, {
|
|
68
77
|
gap: 2,
|
|
69
78
|
wrap: "wrap",
|
|
70
79
|
align: "start",
|
|
71
80
|
children: [
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
81
|
+
k,
|
|
82
|
+
F,
|
|
83
|
+
L
|
|
75
84
|
]
|
|
76
|
-
}),
|
|
85
|
+
}), m[38] = k, m[39] = F, m[40] = L, m[41] = e) : e = m[41], e;
|
|
77
86
|
}
|
|
78
|
-
let
|
|
79
|
-
|
|
87
|
+
let R = x && !S, z;
|
|
88
|
+
m[42] !== k || m[43] !== F || m[44] !== L ? (z = /* @__PURE__ */ s(c, {
|
|
80
89
|
gap: 2,
|
|
81
90
|
wrap: "wrap",
|
|
82
91
|
align: "center",
|
|
83
92
|
children: [
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
93
|
+
k,
|
|
94
|
+
F,
|
|
95
|
+
L
|
|
87
96
|
]
|
|
88
|
-
}),
|
|
89
|
-
let
|
|
90
|
-
return
|
|
91
|
-
label:
|
|
92
|
-
description:
|
|
93
|
-
isDisabled:
|
|
94
|
-
error:
|
|
95
|
-
children:
|
|
96
|
-
}),
|
|
97
|
+
}), m[42] = k, m[43] = F, m[44] = L, m[45] = z) : z = m[45];
|
|
98
|
+
let B;
|
|
99
|
+
return m[46] !== v || m[47] !== h || m[48] !== p.description || m[49] !== z || m[50] !== R ? (B = /* @__PURE__ */ o(i, {
|
|
100
|
+
label: h,
|
|
101
|
+
description: p.description,
|
|
102
|
+
isDisabled: R,
|
|
103
|
+
error: v,
|
|
104
|
+
children: z
|
|
105
|
+
}), m[46] = v, m[47] = h, m[48] = p.description, m[49] = z, m[50] = R, m[51] = B) : B = m[51], B;
|
|
97
106
|
}
|
|
98
|
-
export {
|
|
107
|
+
export { p as DateTimeInput };
|
|
@@ -11,7 +11,7 @@ export type FieldGroupProps = {
|
|
|
11
11
|
readonly frame?: "none" | "card" | undefined;
|
|
12
12
|
/** Help under the label. */
|
|
13
13
|
readonly description?: string | undefined;
|
|
14
|
-
/** Disables
|
|
14
|
+
/** Disables fields through the unframed fieldset; with `frame="card"`, disable children yourself. */
|
|
15
15
|
readonly isDisabled?: boolean | undefined;
|
|
16
16
|
/** A problem with the group as a whole, already in the user's language. */
|
|
17
17
|
readonly error?: string | undefined;
|
|
@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
|
|
|
3
3
|
export type FieldRowProps = {
|
|
4
4
|
/**
|
|
5
5
|
* The row's caption, in a column at the start. Without it the column stays, empty, so the
|
|
6
|
-
* content lines up with the captioned rows around it
|
|
6
|
+
* content lines up with the captioned rows around it; stacked,
|
|
7
7
|
* nothing is drawn above the content.
|
|
8
8
|
*/
|
|
9
9
|
readonly label?: string | undefined;
|
|
@@ -32,7 +32,7 @@ export type MetaTableProps = {
|
|
|
32
32
|
} | undefined;
|
|
33
33
|
};
|
|
34
34
|
/**
|
|
35
|
-
* A read-only table of names and a short value each
|
|
35
|
+
* A read-only table of names and a short value each: a name
|
|
36
36
|
* column (each name a link when it has an `href`, on one line with the whole name in a tooltip when
|
|
37
37
|
* cut; a problem in the error tone with a ⚠ tip) and, with `labels.meta`, a value column at the
|
|
38
38
|
* end. A row that `isLoading` shows shimmer bars in its cells, in the table's real columns; the
|
|
@@ -13,7 +13,7 @@ export type PhoneFrameProps = {
|
|
|
13
13
|
readonly children: ReactNode;
|
|
14
14
|
};
|
|
15
15
|
/**
|
|
16
|
-
* A phone to preview content in,
|
|
16
|
+
* A phone frame with a branding bar to preview content in,
|
|
17
17
|
* drawn rather than pictured: a dark rounded device with a camera island, a status bar (clock,
|
|
18
18
|
* signal, battery), a header with a back chevron, the avatar and the title, and the content under
|
|
19
19
|
* it, scrolling when it is taller than the screen. As wide as its container, up to 290px, with a
|
|
@@ -19,7 +19,7 @@ export type RemovableRowProps = {
|
|
|
19
19
|
*/
|
|
20
20
|
readonly hoverContent?: ReactNode;
|
|
21
21
|
/**
|
|
22
|
-
* A bordered box around the row
|
|
22
|
+
* A bordered box around the row: its text on one line, the whole text
|
|
23
23
|
* in a tooltip when cut. As high as `RowSkeletons variant="framed"`.
|
|
24
24
|
*/
|
|
25
25
|
readonly isFramed?: boolean | undefined;
|
|
@@ -12,29 +12,29 @@ import { VStack as u } from "@astryxdesign/core/VStack";
|
|
|
12
12
|
import { FieldStatus as d } from "@astryxdesign/core/FieldStatus";
|
|
13
13
|
// src/molecules/RemovableRow.tsx
|
|
14
14
|
function f(f) {
|
|
15
|
-
let m = i(29), h = f.isFramed ?? !1, g;
|
|
16
|
-
m[0] !== f.
|
|
15
|
+
let m = i(29), h = f.isFramed ?? !1, g = f.isDisabled ?? !1, _;
|
|
16
|
+
m[0] !== f.isReadOnly || m[1] !== f.labels.remove || m[2] !== f.onRemove || m[3] !== f.size || m[4] !== g ? (_ = /* @__PURE__ */ o(e, {
|
|
17
17
|
label: f.labels.remove,
|
|
18
18
|
size: f.size,
|
|
19
|
-
isDisabled:
|
|
19
|
+
isDisabled: g,
|
|
20
20
|
isReadOnly: f.isReadOnly,
|
|
21
21
|
onClick: f.onRemove
|
|
22
|
-
}), m[0] = f.
|
|
23
|
-
let
|
|
24
|
-
m[6] === h ?
|
|
25
|
-
let
|
|
26
|
-
m[8] === Symbol.for("react.memo_cache_sentinel") ? (
|
|
22
|
+
}), m[0] = f.isReadOnly, m[1] = f.labels.remove, m[2] = f.onRemove, m[3] = f.size, m[4] = g, m[5] = _) : _ = m[5];
|
|
23
|
+
let v = _, y;
|
|
24
|
+
m[6] === h ? y = m[7] : (y = h && { padding: 2 }, m[6] = h, m[7] = y);
|
|
25
|
+
let b;
|
|
26
|
+
m[8] === Symbol.for("react.memo_cache_sentinel") ? (b = {
|
|
27
27
|
"aui-default-marker": "aui-default-marker",
|
|
28
28
|
$$css: !0
|
|
29
|
-
}, m[8] =
|
|
30
|
-
let
|
|
31
|
-
m[9] !==
|
|
32
|
-
y,
|
|
29
|
+
}, m[8] = b) : b = m[8];
|
|
30
|
+
let x = h && p.frame, S = h && f.error !== void 0 && p.frameError, C;
|
|
31
|
+
m[9] !== x || m[10] !== S ? (C = [
|
|
33
32
|
b,
|
|
34
|
-
x
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
x,
|
|
34
|
+
S
|
|
35
|
+
], m[9] = x, m[10] = S, m[11] = C) : C = m[11];
|
|
36
|
+
let w;
|
|
37
|
+
m[12] !== h || m[13] !== f.description || m[14] !== f.error || m[15] !== f.label ? (w = h ? /* @__PURE__ */ s(u, {
|
|
38
38
|
xstyle: p.text,
|
|
39
39
|
children: [/* @__PURE__ */ s(c, {
|
|
40
40
|
gap: 1,
|
|
@@ -69,28 +69,28 @@ function f(f) {
|
|
|
69
69
|
message: f.error
|
|
70
70
|
})
|
|
71
71
|
]
|
|
72
|
-
}), m[12] = h, m[13] = f.description, m[14] = f.error, m[15] = f.label, m[16] =
|
|
73
|
-
let
|
|
74
|
-
m[17] !== f.endContent || m[18] !== f.hoverContent || m[19] !==
|
|
75
|
-
hoverContent: /* @__PURE__ */ s(a, { children: [f.hoverContent,
|
|
72
|
+
}), m[12] = h, m[13] = f.description, m[14] = f.error, m[15] = f.label, m[16] = w) : w = m[16];
|
|
73
|
+
let T = h && p.end, E;
|
|
74
|
+
m[17] !== f.endContent || m[18] !== f.hoverContent || m[19] !== v ? (E = f.hoverContent === void 0 ? /* @__PURE__ */ s(a, { children: [f.endContent, v] }) : /* @__PURE__ */ o(t, {
|
|
75
|
+
hoverContent: /* @__PURE__ */ s(a, { children: [f.hoverContent, v] }),
|
|
76
76
|
children: f.endContent
|
|
77
|
-
}), m[17] = f.endContent, m[18] = f.hoverContent, m[19] =
|
|
78
|
-
let
|
|
79
|
-
m[21] !==
|
|
77
|
+
}), m[17] = f.endContent, m[18] = f.hoverContent, m[19] = v, m[20] = E) : E = m[20];
|
|
78
|
+
let D;
|
|
79
|
+
m[21] !== T || m[22] !== E ? (D = /* @__PURE__ */ o(c, {
|
|
80
80
|
gap: 1.5,
|
|
81
81
|
align: "center",
|
|
82
|
-
xstyle:
|
|
83
|
-
children:
|
|
84
|
-
}), m[21] =
|
|
85
|
-
let
|
|
86
|
-
return m[24] !==
|
|
82
|
+
xstyle: T,
|
|
83
|
+
children: E
|
|
84
|
+
}), m[21] = T, m[22] = E, m[23] = D) : D = m[23];
|
|
85
|
+
let O;
|
|
86
|
+
return m[24] !== D || m[25] !== y || m[26] !== C || m[27] !== w ? (O = /* @__PURE__ */ s(c, {
|
|
87
87
|
gap: 1.5,
|
|
88
88
|
align: "center",
|
|
89
89
|
justify: "between",
|
|
90
|
-
...
|
|
91
|
-
xstyle:
|
|
92
|
-
children: [
|
|
93
|
-
}), m[24] =
|
|
90
|
+
...y,
|
|
91
|
+
xstyle: C,
|
|
92
|
+
children: [w, D]
|
|
93
|
+
}), m[24] = D, m[25] = y, m[26] = C, m[27] = w, m[28] = O) : O = m[28], O;
|
|
94
94
|
}
|
|
95
95
|
var p = {
|
|
96
96
|
text: {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type RadioListProps } from "@astryxdesign/core/RadioList";
|
|
1
2
|
import { type ReactNode } from "react";
|
|
2
3
|
/** One choice of a `RevealRadioGroup`. */
|
|
3
4
|
export type RevealRadioOption<V extends string> = {
|
|
@@ -13,13 +14,7 @@ export type RevealRadioOption<V extends string> = {
|
|
|
13
14
|
readonly content?: ReactNode;
|
|
14
15
|
};
|
|
15
16
|
/** What `RevealRadioGroup` takes. */
|
|
16
|
-
export type RevealRadioGroupProps<V extends string> = {
|
|
17
|
-
/** Names the group; also its accessible name when hidden. */
|
|
18
|
-
readonly label: string;
|
|
19
|
-
/** Keeps the label for screen readers only. */
|
|
20
|
-
readonly isLabelHidden?: boolean | undefined;
|
|
21
|
-
/** Lays the options out in a row instead of a column. */
|
|
22
|
-
readonly orientation?: "vertical" | "horizontal" | undefined;
|
|
17
|
+
export type RevealRadioGroupProps<V extends string> = Pick<RadioListProps, "label" | "isLabelHidden" | "orientation" | "isDisabled"> & {
|
|
23
18
|
/** The choices, in order. */
|
|
24
19
|
readonly options: readonly RevealRadioOption<V>[];
|
|
25
20
|
/** The chosen option's value. */
|
|
@@ -28,8 +23,6 @@ export type RevealRadioGroupProps<V extends string> = {
|
|
|
28
23
|
readonly onChange: (value: V) => void;
|
|
29
24
|
/** The radios' size, `md` by default (Astryx's default; the theme draws it at 18px). */
|
|
30
25
|
readonly size?: "sm" | "md" | undefined;
|
|
31
|
-
/** Dims the radios and blocks them. */
|
|
32
|
-
readonly isDisabled?: boolean | undefined;
|
|
33
26
|
/** Shows the value, not dimmed, and ignores changes. */
|
|
34
27
|
readonly isReadOnly?: boolean | undefined;
|
|
35
28
|
/** The space between the list and the revealed content, `2` by default. */
|
|
@@ -1,16 +1,11 @@
|
|
|
1
|
+
import { type SwitchProps } from "@astryxdesign/core/Switch";
|
|
1
2
|
import type { ReactNode } from "react";
|
|
2
3
|
/** What `RevealSwitch` takes. */
|
|
3
|
-
export type RevealSwitchProps = {
|
|
4
|
-
/** What the switch turns on. */
|
|
5
|
-
readonly label: string;
|
|
6
|
-
/** Whether the switch is on. */
|
|
7
|
-
readonly value: boolean;
|
|
4
|
+
export type RevealSwitchProps = Pick<SwitchProps, "label" | "isDisabled" | "value"> & {
|
|
8
5
|
/** Called with the new state. */
|
|
9
6
|
readonly onChange: (value: boolean) => void;
|
|
10
7
|
/** The switch's size, `md` by default. */
|
|
11
8
|
readonly size?: "sm" | "md" | undefined;
|
|
12
|
-
/** Dims the switch and blocks it. */
|
|
13
|
-
readonly isDisabled?: boolean | undefined;
|
|
14
9
|
/** Shows the value, not dimmed, and ignores changes. */
|
|
15
10
|
readonly isReadOnly?: boolean | undefined;
|
|
16
11
|
/** What shows below the switch while it is on. */
|
|
@@ -1,15 +1,9 @@
|
|
|
1
|
-
import { type SelectorOptionType } from "@astryxdesign/core/Selector";
|
|
1
|
+
import { type SelectorOptionType, type SelectorProps } from "@astryxdesign/core/Selector";
|
|
2
2
|
import type { ReactNode } from "react";
|
|
3
3
|
/** One entry of `Select`'s list: an option, a titled section of options, or a divider (Astryx's). */
|
|
4
4
|
export type SelectOption = SelectorOptionType;
|
|
5
5
|
/** What `Select` takes. */
|
|
6
|
-
export type SelectProps = {
|
|
7
|
-
/** Names the control for assistive tech; shown above it unless `isLabelHidden`. */
|
|
8
|
-
readonly label: string;
|
|
9
|
-
/** Hides the label, as in a rule row. */
|
|
10
|
-
readonly isLabelHidden?: boolean | undefined;
|
|
11
|
-
/** A line under the label that explains the choice. */
|
|
12
|
-
readonly description?: string | undefined;
|
|
6
|
+
export type SelectProps = Pick<SelectorProps, "label" | "isLabelHidden" | "description" | "placeholder" | "hasSearch" | "width" | "isDisabled" | "isReadOnly" | "isRequired" | "controlXstyle" | "containerXstyle"> & {
|
|
13
7
|
/** The list, in order. */
|
|
14
8
|
readonly options: readonly SelectOption[];
|
|
15
9
|
/** The picked option's value; `null` or none shows the placeholder. */
|
|
@@ -18,22 +12,10 @@ export type SelectProps = {
|
|
|
18
12
|
readonly onChange: (value: string) => void;
|
|
19
13
|
/** Called by the clear button, which shows only when this is given and an option is picked. */
|
|
20
14
|
readonly onClear?: (() => void) | undefined;
|
|
21
|
-
/** Shown in the trigger while nothing is picked. */
|
|
22
|
-
readonly placeholder?: string | undefined;
|
|
23
|
-
/** A search box over the list, filtering it as it is typed. */
|
|
24
|
-
readonly hasSearch?: boolean | undefined;
|
|
25
15
|
/** The trigger's look: an underlined field (`input`, the default) or a bare text button (`ghost`). */
|
|
26
16
|
readonly variant?: "input" | "ghost" | undefined;
|
|
27
|
-
/** The trigger's size,
|
|
28
|
-
readonly size?: "sm" | "md" | undefined;
|
|
29
|
-
/** The trigger's width, in pixels or any CSS length such as `"100%"`. */
|
|
30
|
-
readonly width?: number | string | undefined;
|
|
31
|
-
/** Dims the trigger and blocks it. */
|
|
32
|
-
readonly isDisabled?: boolean | undefined;
|
|
33
|
-
/** Shows the picked label without the chevron; the list does not open. */
|
|
34
|
-
readonly isReadOnly?: boolean | undefined;
|
|
35
|
-
/** Marks the field as required. */
|
|
36
|
-
readonly isRequired?: boolean | undefined;
|
|
17
|
+
/** The trigger's size, md by default; the kit narrows the upstream sizes to sm and md. */
|
|
18
|
+
readonly size?: Extract<SelectorProps["size"], "sm" | "md"> | undefined;
|
|
37
19
|
/**
|
|
38
20
|
* The options are loading: a spinner in place of the chevron and the trigger busy from 300 ms
|
|
39
21
|
* on, for at least 300 ms (`useLoadingShown`), and the list does not open meanwhile. The picked
|
|
@@ -43,7 +25,7 @@ export type SelectProps = {
|
|
|
43
25
|
readonly isLoading?: boolean | undefined;
|
|
44
26
|
/** A problem with the pick, already in the user's language, shown under the trigger. */
|
|
45
27
|
readonly error?: string | undefined;
|
|
46
|
-
/**
|
|
28
|
+
/** Host texts; missing strings use the facade's InternationalizationProvider locale (English by default). */
|
|
47
29
|
readonly labels?: {
|
|
48
30
|
/** The search box's placeholder, such as "Search". */
|
|
49
31
|
readonly search?: string | undefined;
|
|
@@ -56,8 +38,10 @@ export type SelectProps = {
|
|
|
56
38
|
} | undefined;
|
|
57
39
|
};
|
|
58
40
|
/**
|
|
59
|
-
* The kit's select
|
|
41
|
+
* The kit's select on Astryx's `Selector`: the list is as wide as the
|
|
60
42
|
* trigger (the theme) and a long option label ends in an ellipsis with the whole label in a
|
|
61
43
|
* tooltip. Every select is one rather than Astryx's `Selector` (lint-enforced). It holds no state.
|
|
44
|
+
* Localize upstream search, clear and empty text with `InternationalizationProvider` from
|
|
45
|
+
* `@antscorp/ui/astryx/i18n`; `labels` overrides individual kit captions.
|
|
62
46
|
*/
|
|
63
47
|
export declare function Select(props: SelectProps): ReactNode;
|
package/dist/molecules/Select.js
CHANGED
|
@@ -1,59 +1,63 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import { TruncatedOption as e } from "../atoms/TruncatedOption.js";
|
|
2
|
+
import { errorStatus as t } from "../lib/errorStatus.js";
|
|
3
|
+
import { useLoadingShown as n } from "../lib/useLoadingShown.js";
|
|
4
4
|
import { c as r } from "react/compiler-runtime";
|
|
5
5
|
import { jsx as i } from "react/jsx-runtime";
|
|
6
6
|
import { Selector as a } from "@astryxdesign/core/Selector";
|
|
7
7
|
// src/molecules/Select.tsx
|
|
8
|
-
function o(
|
|
9
|
-
let o = r(
|
|
8
|
+
function o(e) {
|
|
9
|
+
let o = r(75), { labels: l, onClear: u, onChange: d } = e, f;
|
|
10
10
|
o[0] === l ? f = o[1] : (f = l === void 0 ? {} : l, o[0] = l, o[1] = f);
|
|
11
|
-
let p = f, m =
|
|
12
|
-
o[2] !== h || o[3] !== p.value || o[4] !==
|
|
11
|
+
let p = f, m = e.value ?? void 0, { isBusy: h, isShown: g } = n(e.isLoading === !0), _;
|
|
12
|
+
o[2] !== h || o[3] !== p.value || o[4] !== e.options || o[5] !== m ? (_ = h && m !== void 0 && p.value !== void 0 && !c(e.options, m) ? [{
|
|
13
13
|
value: m,
|
|
14
14
|
label: p.value
|
|
15
|
-
}] : [], o[2] = h, o[3] = p.value, o[4] =
|
|
15
|
+
}] : [], o[2] = h, o[3] = p.value, o[4] = e.options, o[5] = m, o[6] = _) : _ = o[6];
|
|
16
16
|
let v = _, y;
|
|
17
|
-
o[7] !==
|
|
17
|
+
o[7] !== e.options || o[8] !== v ? (y = [...e.options, ...v], o[7] = e.options, o[8] = v, o[9] = y) : y = o[9];
|
|
18
18
|
let b;
|
|
19
|
-
o[10] !== p.warning || o[11] !==
|
|
19
|
+
o[10] !== p.warning || o[11] !== e.error ? (b = p.warning === void 0 ? t(e.error) : {
|
|
20
20
|
status: {
|
|
21
21
|
type: "warning",
|
|
22
22
|
message: p.warning
|
|
23
23
|
},
|
|
24
24
|
statusVariant: "tooltip"
|
|
25
|
-
}, o[10] = p.warning, o[11] =
|
|
25
|
+
}, o[10] = p.warning, o[11] = e.error, o[12] = b) : b = o[12];
|
|
26
26
|
let x;
|
|
27
|
-
o[13] ===
|
|
27
|
+
o[13] === e.isLabelHidden ? x = o[14] : (x = e.isLabelHidden !== void 0 && { isLabelHidden: e.isLabelHidden }, o[13] = e.isLabelHidden, o[14] = x);
|
|
28
28
|
let S;
|
|
29
|
-
o[15] ===
|
|
29
|
+
o[15] === e.description ? S = o[16] : (S = e.description !== void 0 && { description: e.description }, o[15] = e.description, o[16] = S);
|
|
30
30
|
let C;
|
|
31
|
-
o[17] !== h || o[18] !== g || o[19] !==
|
|
31
|
+
o[17] !== h || o[18] !== g || o[19] !== e.placeholder ? (C = h ? {
|
|
32
32
|
isLoading: g,
|
|
33
33
|
isReadOnly: !0,
|
|
34
34
|
placeholder: ""
|
|
35
|
-
} :
|
|
35
|
+
} : e.placeholder !== void 0 && { placeholder: e.placeholder }, o[17] = h, o[18] = g, o[19] = e.placeholder, o[20] = C) : C = o[20];
|
|
36
36
|
let w;
|
|
37
|
-
o[21] ===
|
|
37
|
+
o[21] === e.hasSearch ? w = o[22] : (w = e.hasSearch !== void 0 && { hasSearch: e.hasSearch }, o[21] = e.hasSearch, o[22] = w);
|
|
38
38
|
let T;
|
|
39
|
-
o[23] ===
|
|
39
|
+
o[23] === e.variant ? T = o[24] : (T = e.variant !== void 0 && { variant: e.variant }, o[23] = e.variant, o[24] = T);
|
|
40
40
|
let E;
|
|
41
|
-
o[25] ===
|
|
41
|
+
o[25] === e.size ? E = o[26] : (E = e.size !== void 0 && { size: e.size }, o[25] = e.size, o[26] = E);
|
|
42
42
|
let D;
|
|
43
|
-
o[27] ===
|
|
43
|
+
o[27] === e.width ? D = o[28] : (D = e.width !== void 0 && { width: e.width }, o[27] = e.width, o[28] = D);
|
|
44
44
|
let O;
|
|
45
|
-
o[29] ===
|
|
45
|
+
o[29] === e.isDisabled ? O = o[30] : (O = e.isDisabled !== void 0 && { isDisabled: e.isDisabled }, o[29] = e.isDisabled, o[30] = O);
|
|
46
46
|
let k;
|
|
47
|
-
o[31] !== h || o[32] !==
|
|
47
|
+
o[31] !== h || o[32] !== e.isReadOnly ? (k = e.isReadOnly !== void 0 && !h && { isReadOnly: e.isReadOnly }, o[31] = h, o[32] = e.isReadOnly, o[33] = k) : k = o[33];
|
|
48
48
|
let A;
|
|
49
|
-
o[34] ===
|
|
49
|
+
o[34] === e.isRequired ? A = o[35] : (A = e.isRequired !== void 0 && { isRequired: e.isRequired }, o[34] = e.isRequired, o[35] = A);
|
|
50
50
|
let j;
|
|
51
|
-
o[36] ===
|
|
51
|
+
o[36] === e.controlXstyle ? j = o[37] : (j = e.controlXstyle !== void 0 && { controlXstyle: e.controlXstyle }, o[36] = e.controlXstyle, o[37] = j);
|
|
52
52
|
let M;
|
|
53
|
-
o[38] ===
|
|
53
|
+
o[38] === e.containerXstyle ? M = o[39] : (M = e.containerXstyle !== void 0 && { containerXstyle: e.containerXstyle }, o[38] = e.containerXstyle, o[39] = M);
|
|
54
54
|
let N;
|
|
55
|
-
o[40]
|
|
56
|
-
|
|
55
|
+
o[40] === p.search ? N = o[41] : (N = p.search !== void 0 && { searchPlaceholder: p.search }, o[40] = p.search, o[41] = N);
|
|
56
|
+
let P;
|
|
57
|
+
o[42] === p.noMatch ? P = o[43] : (P = p.noMatch !== void 0 && { emptySearchText: p.noMatch }, o[42] = p.noMatch, o[43] = P);
|
|
58
|
+
let F;
|
|
59
|
+
o[44] !== e.label || o[45] !== E || o[46] !== D || o[47] !== O || o[48] !== k || o[49] !== A || o[50] !== j || o[51] !== M || o[52] !== N || o[53] !== P || o[54] !== y || o[55] !== b || o[56] !== x || o[57] !== S || o[58] !== C || o[59] !== w || o[60] !== T ? (F = {
|
|
60
|
+
label: e.label,
|
|
57
61
|
options: y,
|
|
58
62
|
renderOption: s,
|
|
59
63
|
...b,
|
|
@@ -68,33 +72,35 @@ function o(n) {
|
|
|
68
72
|
...k,
|
|
69
73
|
...A,
|
|
70
74
|
...j,
|
|
71
|
-
...M
|
|
72
|
-
|
|
73
|
-
|
|
75
|
+
...M,
|
|
76
|
+
...N,
|
|
77
|
+
...P
|
|
78
|
+
}, o[44] = e.label, o[45] = E, o[46] = D, o[47] = O, o[48] = k, o[49] = A, o[50] = j, o[51] = M, o[52] = N, o[53] = P, o[54] = y, o[55] = b, o[56] = x, o[57] = S, o[58] = C, o[59] = w, o[60] = T, o[61] = F) : F = o[61];
|
|
79
|
+
let I = F;
|
|
74
80
|
if (u === void 0) {
|
|
75
81
|
let e;
|
|
76
|
-
o[
|
|
82
|
+
o[62] === m ? e = o[63] : (e = m !== void 0 && { value: m }, o[62] = m, o[63] = e);
|
|
77
83
|
let t;
|
|
78
|
-
return o[
|
|
79
|
-
...
|
|
84
|
+
return o[64] !== I || o[65] !== d || o[66] !== e ? (t = /* @__PURE__ */ i(a, {
|
|
85
|
+
...I,
|
|
80
86
|
...e,
|
|
81
87
|
onChange: d
|
|
82
|
-
}), o[
|
|
88
|
+
}), o[64] = I, o[65] = d, o[66] = e, o[67] = t) : t = o[67], t;
|
|
83
89
|
}
|
|
84
|
-
let
|
|
85
|
-
o[
|
|
90
|
+
let L = m ?? null, R;
|
|
91
|
+
o[68] !== d || o[69] !== u ? (R = (e) => {
|
|
86
92
|
e === null ? u() : d(e);
|
|
87
|
-
}, o[
|
|
88
|
-
let
|
|
89
|
-
return o[
|
|
90
|
-
...
|
|
93
|
+
}, o[68] = d, o[69] = u, o[70] = R) : R = o[70];
|
|
94
|
+
let z;
|
|
95
|
+
return o[71] !== I || o[72] !== L || o[73] !== R ? (z = /* @__PURE__ */ i(a, {
|
|
96
|
+
...I,
|
|
91
97
|
hasClear: !0,
|
|
92
|
-
value:
|
|
93
|
-
onChange:
|
|
94
|
-
}), o[
|
|
98
|
+
value: L,
|
|
99
|
+
onChange: R
|
|
100
|
+
}), o[71] = I, o[72] = L, o[73] = R, o[74] = z) : z = o[74], z;
|
|
95
101
|
}
|
|
96
|
-
function s(
|
|
97
|
-
return /* @__PURE__ */ i(
|
|
102
|
+
function s(t) {
|
|
103
|
+
return /* @__PURE__ */ i(e, { option: t });
|
|
98
104
|
}
|
|
99
105
|
function c(e, t) {
|
|
100
106
|
return e.some((e) => typeof e == "string" ? e === t : "value" in e ? e.value === t : e.type === "section" && c(e.options, t));
|
|
@@ -10,7 +10,7 @@ export type SideLabelRowProps = {
|
|
|
10
10
|
};
|
|
11
11
|
/**
|
|
12
12
|
* One row of a card: a narrow label column and the row's controls, padded as a card's rows are.
|
|
13
|
-
* The label sits centred on the first line of controls (`md` high,
|
|
13
|
+
* The label sits centred on the first line of controls (`md` high, the theme's 30px); where the controls would get
|
|
14
14
|
* narrower than 240px they move under the label. It holds no state.
|
|
15
15
|
*/
|
|
16
16
|
export declare function SideLabelRow({ label, labelWidth, children }: SideLabelRowProps): ReactNode;
|
|
@@ -29,7 +29,7 @@ export type SplitButtonProps = {
|
|
|
29
29
|
readonly isMainDisabled?: boolean | undefined;
|
|
30
30
|
/** The main button shows a spinner and is announced as busy; the menu is not affected. */
|
|
31
31
|
readonly isLoading?: boolean | undefined;
|
|
32
|
-
/** Rounds its two ends into a pill
|
|
32
|
+
/** Rounds its two ends into a pill; the inner corners stay square. */
|
|
33
33
|
readonly isRound?: boolean | undefined;
|
|
34
34
|
/** The button's weight, `primary` by default. */
|
|
35
35
|
readonly variant?: "primary" | "secondary" | undefined;
|