jcicl 1.0.5 → 1.0.7
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/CircularIconButton/CircularIconButton.js +22 -18
- package/DefaultTemplate/DefaultTemplate.js +3 -3
- package/DetailItemWithIcon/DetailItemWithIcon.js +31 -19
- package/DetailPageComponents/DetailPageComponents.d.ts +12 -4
- package/DetailPageComponents/DetailPageComponents.js +44 -28
- package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.d.ts +1 -0
- package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.js +63 -62
- package/EditableInfoCard/EditableInfoCard.js +107 -103
- package/FormComponents/FormComponents.d.ts +17 -10
- package/FormComponents/FormComponents.js +52 -46
- package/Icon/Icon.js +23 -22
- package/InfoCard/InfoCard.js +37 -33
- package/Input/Input.js +19 -15
- package/LabeledCheckbox/LabeledCheckbox.js +58 -55
- package/LabeledDropdown/LabeledDropdown.js +370 -366
- package/LabeledInput/LabeledInput.js +13 -13
- package/LabeledTextArea/LabeledTextArea.js +20 -13
- package/List/List.js +19 -18
- package/ListButton/ListButton.d.ts +2 -4
- package/ListButton/ListButton.js +21 -12
- package/Loading/Loading.js +14 -9
- package/Pill/Pill.js +13 -12
- package/Search/Search.js +64 -62
- package/SquareIcon/SquareIcon.js +28 -25
- package/SquareIconButton/SquareIconButton.js +24 -11
- package/Stepper/Stepper.js +166 -146
- package/Table/Table.js +233 -221
- package/WithLoading/WithLoading.js +16 -11
- package/package.json +1 -1
- package/theme.d.ts +17 -9
- package/theme.js +4 -0
- package/themeUtils.d.ts +5 -0
- package/themeUtils.js +81 -69
package/InfoCard/InfoCard.js
CHANGED
|
@@ -1,50 +1,54 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { n as
|
|
3
|
-
import { c as
|
|
4
|
-
import
|
|
5
|
-
import { LabeledValue as
|
|
1
|
+
import { jsxs as d, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { n as i } from "../.chunks/emotion-styled.browser.esm.js";
|
|
3
|
+
import { c as m } from "../.chunks/emotion-react.browser.esm.js";
|
|
4
|
+
import h from "../theme.js";
|
|
5
|
+
import { LabeledValue as u } from "../LabeledValue/LabeledValue.js";
|
|
6
6
|
import { Flex as g } from "../Flex/Flex.js";
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
import { useThemeColors as x } from "../ThemeContext.js";
|
|
8
|
+
const w = i("div", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(({ padding: o, shadow: r, styles: e, customTheme: t }) => ({
|
|
9
|
+
...m`
|
|
9
10
|
h3 {
|
|
10
11
|
margin: 0;
|
|
11
12
|
width: 100%;
|
|
12
13
|
font-size: 28px;
|
|
13
14
|
}
|
|
14
15
|
font-family: 'Roboto', sans-serif;
|
|
15
|
-
padding: ${
|
|
16
|
+
padding: ${o};
|
|
16
17
|
display: flex;
|
|
17
18
|
flex-direction: column;
|
|
18
|
-
box-shadow: ${
|
|
19
|
+
box-shadow: ${r || t.themeShadowB};
|
|
19
20
|
border-radius: 5px;
|
|
20
|
-
background-color: ${
|
|
21
|
+
background-color: ${h.colors.white};
|
|
21
22
|
${e};
|
|
22
23
|
`
|
|
23
|
-
})),
|
|
24
|
-
...
|
|
25
|
-
margin-top: calc(${
|
|
26
|
-
grid-row-gap: ${
|
|
27
|
-
grid-column-gap: calc(${
|
|
24
|
+
})), $ = i("div")(({ spacing: o, columns: r }) => ({
|
|
25
|
+
...m`
|
|
26
|
+
margin-top: calc(${o} * 0.75);
|
|
27
|
+
grid-row-gap: ${o};
|
|
28
|
+
grid-column-gap: calc(${o} * 1.5);
|
|
28
29
|
display: grid;
|
|
29
|
-
grid-template-columns: repeat(${
|
|
30
|
+
grid-template-columns: repeat(${r}, 1fr);
|
|
30
31
|
`
|
|
31
|
-
})),
|
|
32
|
-
decorativeElement:
|
|
33
|
-
title:
|
|
32
|
+
})), k = ({
|
|
33
|
+
decorativeElement: o,
|
|
34
|
+
title: r,
|
|
34
35
|
items: e,
|
|
35
|
-
padding:
|
|
36
|
-
shadow:
|
|
37
|
-
spacing:
|
|
38
|
-
columns:
|
|
39
|
-
styles:
|
|
40
|
-
}) =>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
] })
|
|
36
|
+
padding: t = "1rem 2rem",
|
|
37
|
+
shadow: l,
|
|
38
|
+
spacing: s = "2rem",
|
|
39
|
+
columns: c = 3,
|
|
40
|
+
styles: p
|
|
41
|
+
}) => {
|
|
42
|
+
const f = x();
|
|
43
|
+
return /* @__PURE__ */ d(w, { ...{ padding: t, shadow: l, styles: p }, customTheme: f, children: [
|
|
44
|
+
/* @__PURE__ */ d(g, { width: "100%", gap: "1rem", alignItems: "center", children: [
|
|
45
|
+
o && o,
|
|
46
|
+
/* @__PURE__ */ n("h3", { children: r })
|
|
47
|
+
] }),
|
|
48
|
+
/* @__PURE__ */ n($, { ...{ spacing: s, columns: c }, children: e == null ? void 0 : e.map((a) => /* @__PURE__ */ n(u, { ...a }, a.label)) })
|
|
49
|
+
] });
|
|
50
|
+
};
|
|
47
51
|
export {
|
|
48
|
-
|
|
49
|
-
|
|
52
|
+
k as InfoCard,
|
|
53
|
+
k as default
|
|
50
54
|
};
|
package/Input/Input.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as p } from "react/jsx-runtime";
|
|
2
2
|
import { n } from "../.chunks/emotion-styled.browser.esm.js";
|
|
3
|
-
import { c as
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
|
|
3
|
+
import { c as t } from "../.chunks/emotion-react.browser.esm.js";
|
|
4
|
+
import i from "../theme.js";
|
|
5
|
+
import { useThemeColors as d } from "../ThemeContext.js";
|
|
6
|
+
import { T as a } from "../.chunks/TextField.js";
|
|
7
|
+
const x = n(a, {
|
|
7
8
|
shouldForwardProp: (o) => o != "borderFocusColor"
|
|
8
9
|
})(({ borderFocusColor: o, type: e, disabled: r }) => ({
|
|
9
|
-
...
|
|
10
|
-
background-color: ${
|
|
10
|
+
...t`
|
|
11
|
+
background-color: ${i.colors.white};
|
|
11
12
|
border-radius: 0;
|
|
12
13
|
height: 18px;
|
|
13
14
|
|
|
@@ -16,11 +17,11 @@ const a = n(p, {
|
|
|
16
17
|
height: 15px;
|
|
17
18
|
padding: 2px 0;
|
|
18
19
|
border-radius: 0;
|
|
19
|
-
border-bottom: 1px solid ${
|
|
20
|
+
border-bottom: 1px solid ${i.colors.gray};
|
|
20
21
|
width: 100%;
|
|
21
22
|
|
|
22
23
|
&:focus-visible {
|
|
23
|
-
${e !== "date" && !r &&
|
|
24
|
+
${e !== "date" && !r && t`
|
|
24
25
|
box-shadow: 0 -5px 4px -4px ${o} inset;
|
|
25
26
|
`}
|
|
26
27
|
}
|
|
@@ -42,7 +43,7 @@ const a = n(p, {
|
|
|
42
43
|
&:hover,
|
|
43
44
|
:focus-visible {
|
|
44
45
|
input {
|
|
45
|
-
${e !== "date" && !r &&
|
|
46
|
+
${e !== "date" && !r && t`
|
|
46
47
|
box-shadow: 0 -5px 4px -4px ${o} inset;
|
|
47
48
|
`}
|
|
48
49
|
}
|
|
@@ -59,13 +60,16 @@ const a = n(p, {
|
|
|
59
60
|
}
|
|
60
61
|
}
|
|
61
62
|
`
|
|
62
|
-
})),
|
|
63
|
-
borderFocusColor: o
|
|
63
|
+
})), f = ({
|
|
64
|
+
borderFocusColor: o,
|
|
64
65
|
// border primary
|
|
65
66
|
type: e,
|
|
66
67
|
...r
|
|
67
|
-
}) =>
|
|
68
|
+
}) => {
|
|
69
|
+
const s = d();
|
|
70
|
+
return /* @__PURE__ */ p(x, { borderFocusColor: o || s.themeColor, type: e, ...r });
|
|
71
|
+
};
|
|
68
72
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
73
|
+
f as Input,
|
|
74
|
+
f as default
|
|
71
75
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsxs as z, jsx as
|
|
1
|
+
import { jsxs as z, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import { n as te } from "../.chunks/emotion-styled.browser.esm.js";
|
|
3
|
-
import { c as
|
|
4
|
-
import ae from "../
|
|
3
|
+
import { c as M } from "../.chunks/emotion-react.browser.esm.js";
|
|
4
|
+
import { useThemeColors as ae } from "../ThemeContext.js";
|
|
5
5
|
import * as v from "react";
|
|
6
6
|
import { g as q, a as V, s as O, r as U, b as H, P as e, c as b, d as D, e as L, u as ne } from "../.chunks/DefaultPropsProvider.js";
|
|
7
7
|
import { u as se } from "../.chunks/useFormControl.js";
|
|
@@ -21,11 +21,11 @@ const de = (o) => {
|
|
|
21
21
|
checked: a,
|
|
22
22
|
disabled: s,
|
|
23
23
|
edge: n
|
|
24
|
-
} = o,
|
|
24
|
+
} = o, r = {
|
|
25
25
|
root: ["root", a && "checked", s && "disabled", n && `edge${b(n)}`],
|
|
26
26
|
input: ["input"]
|
|
27
27
|
};
|
|
28
|
-
return D(
|
|
28
|
+
return D(r, le, t);
|
|
29
29
|
}, pe = O(re)({
|
|
30
30
|
padding: 9,
|
|
31
31
|
borderRadius: "50%",
|
|
@@ -75,11 +75,11 @@ const de = (o) => {
|
|
|
75
75
|
margin: 0,
|
|
76
76
|
padding: 0,
|
|
77
77
|
zIndex: 1
|
|
78
|
-
}),
|
|
78
|
+
}), A = /* @__PURE__ */ v.forwardRef(function(t, a) {
|
|
79
79
|
const {
|
|
80
80
|
autoFocus: s,
|
|
81
81
|
checked: n,
|
|
82
|
-
checkedIcon:
|
|
82
|
+
checkedIcon: r,
|
|
83
83
|
className: p,
|
|
84
84
|
defaultChecked: d,
|
|
85
85
|
disabled: k,
|
|
@@ -88,8 +88,8 @@ const de = (o) => {
|
|
|
88
88
|
icon: w,
|
|
89
89
|
id: B,
|
|
90
90
|
inputProps: I,
|
|
91
|
-
inputRef:
|
|
92
|
-
name:
|
|
91
|
+
inputRef: C,
|
|
92
|
+
name: y,
|
|
93
93
|
onBlur: f,
|
|
94
94
|
onChange: h,
|
|
95
95
|
onFocus: F,
|
|
@@ -104,18 +104,18 @@ const de = (o) => {
|
|
|
104
104
|
default: !!d,
|
|
105
105
|
name: "SwitchBase",
|
|
106
106
|
state: "checked"
|
|
107
|
-
}),
|
|
108
|
-
F && F(
|
|
109
|
-
}, Z = (
|
|
110
|
-
f && f(
|
|
111
|
-
}, ee = (
|
|
112
|
-
if (
|
|
107
|
+
}), l = se(), Y = (c) => {
|
|
108
|
+
F && F(c), l && l.onFocus && l.onFocus(c);
|
|
109
|
+
}, Z = (c) => {
|
|
110
|
+
f && f(c), l && l.onBlur && l.onBlur(c);
|
|
111
|
+
}, ee = (c) => {
|
|
112
|
+
if (c.nativeEvent.defaultPrevented)
|
|
113
113
|
return;
|
|
114
|
-
const
|
|
115
|
-
X(
|
|
114
|
+
const T = c.target.checked;
|
|
115
|
+
X(T), h && h(c, T);
|
|
116
116
|
};
|
|
117
117
|
let m = k;
|
|
118
|
-
|
|
118
|
+
l && typeof m > "u" && (m = l.disabled);
|
|
119
119
|
const oe = x === "checkbox" || x === "radio", R = {
|
|
120
120
|
...t,
|
|
121
121
|
checked: j,
|
|
@@ -136,17 +136,17 @@ const de = (o) => {
|
|
|
136
136
|
ownerState: R,
|
|
137
137
|
ref: a,
|
|
138
138
|
...Q,
|
|
139
|
-
children: [/* @__PURE__ */
|
|
139
|
+
children: [/* @__PURE__ */ i(ue, {
|
|
140
140
|
autoFocus: s,
|
|
141
141
|
checked: n,
|
|
142
142
|
defaultChecked: d,
|
|
143
143
|
className: N.input,
|
|
144
144
|
disabled: m,
|
|
145
145
|
id: oe ? B : void 0,
|
|
146
|
-
name:
|
|
146
|
+
name: y,
|
|
147
147
|
onChange: ee,
|
|
148
148
|
readOnly: G,
|
|
149
|
-
ref:
|
|
149
|
+
ref: C,
|
|
150
150
|
required: J,
|
|
151
151
|
ownerState: R,
|
|
152
152
|
tabIndex: K,
|
|
@@ -155,10 +155,10 @@ const de = (o) => {
|
|
|
155
155
|
value: $
|
|
156
156
|
},
|
|
157
157
|
...I
|
|
158
|
-
}), j ?
|
|
158
|
+
}), j ? r : w]
|
|
159
159
|
});
|
|
160
160
|
});
|
|
161
|
-
process.env.NODE_ENV !== "production" && (
|
|
161
|
+
process.env.NODE_ENV !== "production" && (A.propTypes = {
|
|
162
162
|
/**
|
|
163
163
|
* If `true`, the `input` element is focused during the first mount.
|
|
164
164
|
*/
|
|
@@ -261,11 +261,11 @@ process.env.NODE_ENV !== "production" && (W.propTypes = {
|
|
|
261
261
|
*/
|
|
262
262
|
value: e.any
|
|
263
263
|
});
|
|
264
|
-
const fe = P(/* @__PURE__ */
|
|
264
|
+
const fe = P(/* @__PURE__ */ i("path", {
|
|
265
265
|
d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
|
|
266
|
-
}), "CheckBoxOutlineBlank"), he = P(/* @__PURE__ */
|
|
266
|
+
}), "CheckBoxOutlineBlank"), he = P(/* @__PURE__ */ i("path", {
|
|
267
267
|
d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
|
268
|
-
}), "CheckBox"), me = P(/* @__PURE__ */
|
|
268
|
+
}), "CheckBox"), me = P(/* @__PURE__ */ i("path", {
|
|
269
269
|
d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
|
|
270
270
|
}), "IndeterminateCheckBox");
|
|
271
271
|
function be(o) {
|
|
@@ -277,15 +277,15 @@ const S = V("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
|
|
|
277
277
|
indeterminate: a,
|
|
278
278
|
color: s,
|
|
279
279
|
size: n
|
|
280
|
-
} = o,
|
|
280
|
+
} = o, r = {
|
|
281
281
|
root: ["root", a && "indeterminate", `color${b(s)}`, `size${b(n)}`]
|
|
282
|
-
}, p = D(
|
|
282
|
+
}, p = D(r, be, t);
|
|
283
283
|
return {
|
|
284
284
|
...t,
|
|
285
285
|
// forward the disabled and checked classes to the SwitchBase
|
|
286
286
|
...p
|
|
287
287
|
};
|
|
288
|
-
}, ge = O(
|
|
288
|
+
}, ge = O(A, {
|
|
289
289
|
shouldForwardProp: (o) => U(o) || o === "classes",
|
|
290
290
|
name: "MuiCheckbox",
|
|
291
291
|
slot: "Root",
|
|
@@ -345,14 +345,14 @@ const S = V("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
|
|
|
345
345
|
}
|
|
346
346
|
}
|
|
347
347
|
}]
|
|
348
|
-
}))),
|
|
348
|
+
}))), Ce = /* @__PURE__ */ i(he, {}), ye = /* @__PURE__ */ i(fe, {}), xe = /* @__PURE__ */ i(me, {}), W = /* @__PURE__ */ v.forwardRef(function(t, a) {
|
|
349
349
|
const s = ne({
|
|
350
350
|
props: t,
|
|
351
351
|
name: "MuiCheckbox"
|
|
352
352
|
}), {
|
|
353
|
-
checkedIcon: n =
|
|
354
|
-
color:
|
|
355
|
-
icon: p =
|
|
353
|
+
checkedIcon: n = Ce,
|
|
354
|
+
color: r = "primary",
|
|
355
|
+
icon: p = ye,
|
|
356
356
|
indeterminate: d = !1,
|
|
357
357
|
indeterminateIcon: k = xe,
|
|
358
358
|
inputProps: g,
|
|
@@ -360,25 +360,25 @@ const S = V("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
|
|
|
360
360
|
disableRipple: w = !1,
|
|
361
361
|
className: B,
|
|
362
362
|
...I
|
|
363
|
-
} = s,
|
|
363
|
+
} = s, C = d ? k : p, y = d ? k : n, f = {
|
|
364
364
|
...s,
|
|
365
365
|
disableRipple: w,
|
|
366
|
-
color:
|
|
366
|
+
color: r,
|
|
367
367
|
indeterminate: d,
|
|
368
368
|
size: u
|
|
369
369
|
}, h = ke(f);
|
|
370
|
-
return /* @__PURE__ */
|
|
370
|
+
return /* @__PURE__ */ i(ge, {
|
|
371
371
|
type: "checkbox",
|
|
372
372
|
inputProps: {
|
|
373
373
|
"data-indeterminate": d,
|
|
374
374
|
...g
|
|
375
375
|
},
|
|
376
|
-
icon: /* @__PURE__ */ v.cloneElement(
|
|
377
|
-
fontSize: y.props.fontSize ?? u
|
|
378
|
-
}),
|
|
379
|
-
checkedIcon: /* @__PURE__ */ v.cloneElement(C, {
|
|
376
|
+
icon: /* @__PURE__ */ v.cloneElement(C, {
|
|
380
377
|
fontSize: C.props.fontSize ?? u
|
|
381
378
|
}),
|
|
379
|
+
checkedIcon: /* @__PURE__ */ v.cloneElement(y, {
|
|
380
|
+
fontSize: y.props.fontSize ?? u
|
|
381
|
+
}),
|
|
382
382
|
ownerState: f,
|
|
383
383
|
ref: a,
|
|
384
384
|
className: H(h.root, B),
|
|
@@ -386,7 +386,7 @@ const S = V("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
|
|
|
386
386
|
classes: h
|
|
387
387
|
});
|
|
388
388
|
});
|
|
389
|
-
process.env.NODE_ENV !== "production" && (
|
|
389
|
+
process.env.NODE_ENV !== "production" && (W.propTypes = {
|
|
390
390
|
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
391
391
|
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
392
392
|
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
|
|
@@ -487,8 +487,8 @@ process.env.NODE_ENV !== "production" && (A.propTypes = {
|
|
|
487
487
|
*/
|
|
488
488
|
value: e.any
|
|
489
489
|
});
|
|
490
|
-
const ve = te("div")(({ displayMode: o }) => ({
|
|
491
|
-
...
|
|
490
|
+
const ve = te("div", { shouldForwardProp: (o) => !["customTheme"].includes(o) })(({ displayMode: o, customTheme: t }) => ({
|
|
491
|
+
...M`
|
|
492
492
|
display: flex;
|
|
493
493
|
flex-wrap: nowrap;
|
|
494
494
|
align-items: flex-end;
|
|
@@ -508,10 +508,10 @@ const ve = te("div")(({ displayMode: o }) => ({
|
|
|
508
508
|
}
|
|
509
509
|
|
|
510
510
|
.Mui-checked {
|
|
511
|
-
color: ${
|
|
511
|
+
color: ${t.themeIconBackgroundA} !important;
|
|
512
512
|
}
|
|
513
513
|
|
|
514
|
-
${o &&
|
|
514
|
+
${o && M`
|
|
515
515
|
.Mui-disabled {
|
|
516
516
|
color: inherit !important;
|
|
517
517
|
-webkit-text-fill-color: inherit !important;
|
|
@@ -521,20 +521,23 @@ const ve = te("div")(({ displayMode: o }) => ({
|
|
|
521
521
|
}
|
|
522
522
|
`}
|
|
523
523
|
`
|
|
524
|
-
})),
|
|
524
|
+
})), Te = ({
|
|
525
525
|
label: o,
|
|
526
526
|
colon: t = !0,
|
|
527
527
|
displayMode: a = !1,
|
|
528
528
|
noLabel: s = !1,
|
|
529
529
|
...n
|
|
530
|
-
}) =>
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
] })
|
|
530
|
+
}) => {
|
|
531
|
+
const r = ae();
|
|
532
|
+
return /* @__PURE__ */ z(ve, { displayMode: a, className: "jcLabeledCheckbox", customTheme: r, children: [
|
|
533
|
+
!s && /* @__PURE__ */ z("span", { className: "jcCheckboxLabel", children: [
|
|
534
|
+
o,
|
|
535
|
+
t && ":"
|
|
536
|
+
] }),
|
|
537
|
+
/* @__PURE__ */ i(W, { ...n })
|
|
538
|
+
] });
|
|
539
|
+
};
|
|
537
540
|
export {
|
|
538
|
-
|
|
539
|
-
|
|
541
|
+
Te as LabeledCheckbox,
|
|
542
|
+
Te as default
|
|
540
543
|
};
|