@epilot/volt-ui-experimental-griffel 0.2.1 → 0.2.3
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/AGENTS.md +153 -0
- package/AUTHORING.md +292 -0
- package/README.md +85 -7
- package/dist/components/alert-dialog/alert-dialog.js +18 -18
- package/dist/components/avatar/avatar.js +18 -19
- package/dist/components/avatar/avatar.js.map +1 -1
- package/dist/components/badge/badge.js +13 -13
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +6 -6
- package/dist/components/button/button.js +20 -20
- package/dist/components/button-group/button-group.js +6 -6
- package/dist/components/callout/callout.js +6 -6
- package/dist/components/card/card.js +8 -8
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js +4 -4
- package/dist/components/command/command.js +15 -15
- package/dist/components/data-table/data-table-column-header.js +5 -5
- package/dist/components/data-table/data-table-error.js +13 -13
- package/dist/components/data-table/data-table-loading.js +4 -4
- package/dist/components/date-range-picker/date-range-picker.js +8 -8
- package/dist/components/date-time-picker/calendar.js +15 -15
- package/dist/components/date-time-picker/date-time-picker-panel.js +73 -67
- package/dist/components/date-time-picker/date-time-picker-panel.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker.js +53 -49
- package/dist/components/date-time-picker/date-time-picker.js.map +1 -1
- package/dist/components/date-time-picker/time-picker.js +77 -71
- package/dist/components/date-time-picker/time-picker.js.map +1 -1
- package/dist/components/dialog/dialog.js +21 -21
- package/dist/components/drawer/drawer.js +16 -16
- package/dist/components/dropdown-menu/dropdown-menu.js +13 -13
- package/dist/components/field/field-combobox.js +9 -9
- package/dist/components/field/field.js +22 -22
- package/dist/components/label/label.js +11 -11
- package/dist/components/list/list.js +13 -13
- package/dist/components/option-card/option-card.js +24 -24
- package/dist/components/pill/pill.js +21 -20
- package/dist/components/pill/pill.js.map +1 -1
- package/dist/components/popover/popover.js +4 -4
- package/dist/components/radio/radio.js +8 -8
- package/dist/components/scroll-overflow/scroll-overflow.js +6 -6
- package/dist/components/select/select.js +25 -25
- package/dist/components/skeleton/skeleton.js +17 -17
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/table/table-pagination.js +74 -76
- package/dist/components/table/table-pagination.js.map +1 -1
- package/dist/components/tabs/tabs.js +19 -19
- package/dist/components/toast/toast.js +24 -24
- package/dist/components/toggle/toggle.js +17 -17
- package/dist/components/tooltip/tooltip.js +6 -6
- package/dist/index.d.ts +1490 -1056
- package/dist/index.js +276 -273
- package/dist/index.js.map +1 -1
- package/dist/tokens/core.generated.js +1168 -1154
- package/dist/tokens/core.generated.js.map +1 -1
- package/dist/tokens/index.d.ts +1076 -1054
- package/dist/tokens/index.js +1078 -1056
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/install.js +21 -9
- package/dist/tokens/install.js.map +1 -1
- package/dist/tokens/palette.generated.js +1323 -1293
- package/dist/tokens/palette.generated.js.map +1 -1
- package/dist/tokens.json +45 -1
- package/package.json +7 -2
- package/testing/jest-preset.cjs +64 -0
|
@@ -5,7 +5,7 @@ import { shorthands as c } from "../../packages/volt-runtime/dist/vendor/@griffe
|
|
|
5
5
|
import { SLOT_ATTR as i } from "../../packages/volt-runtime/dist/renderer/contract.js";
|
|
6
6
|
import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
|
|
7
7
|
import { makeVoltStyles as N } from "../../styles/make-styles.js";
|
|
8
|
-
import { spacingElement1 as u,
|
|
8
|
+
import { radiusSm as q, spacingElement2 as r, spacingElement1 as u, radiusMd as S, grayA3 as I, spacingElement3 as f, fontWeightMedium as v, grayA11 as h, leadingXs as T, textXs as L, accentA3 as b, grayA12 as y, leadingSm as C, textSm as x, semGraySoft as B, body as D } from "../../tokens/index.js";
|
|
9
9
|
import { Dialog as E, DialogHeader as X, DialogTitle as A, DialogDescription as H, DialogContent as W } from "../dialog/dialog.js";
|
|
10
10
|
const z = (d) => /* @__PURE__ */ n(
|
|
11
11
|
"svg",
|
|
@@ -20,7 +20,7 @@ const z = (d) => /* @__PURE__ */ n(
|
|
|
20
20
|
}
|
|
21
21
|
), l = N({
|
|
22
22
|
root: {
|
|
23
|
-
backgroundColor:
|
|
23
|
+
backgroundColor: D,
|
|
24
24
|
color: y,
|
|
25
25
|
display: "flex",
|
|
26
26
|
height: "100%",
|
|
@@ -28,13 +28,13 @@ const z = (d) => /* @__PURE__ */ n(
|
|
|
28
28
|
flexDirection: "column",
|
|
29
29
|
overflowX: "hidden",
|
|
30
30
|
overflowY: "hidden",
|
|
31
|
-
...c.borderRadius(
|
|
31
|
+
...c.borderRadius(S)
|
|
32
32
|
},
|
|
33
33
|
inputWrapper: {
|
|
34
34
|
display: "flex",
|
|
35
35
|
alignItems: "center",
|
|
36
36
|
...c.gap(r),
|
|
37
|
-
...c.borderBottom("1px", "solid",
|
|
37
|
+
...c.borderBottom("1px", "solid", I),
|
|
38
38
|
paddingLeft: f,
|
|
39
39
|
paddingRight: f
|
|
40
40
|
},
|
|
@@ -48,7 +48,7 @@ const z = (d) => /* @__PURE__ */ n(
|
|
|
48
48
|
height: "3rem",
|
|
49
49
|
display: "flex",
|
|
50
50
|
width: "100%",
|
|
51
|
-
...c.borderRadius(
|
|
51
|
+
...c.borderRadius(S),
|
|
52
52
|
backgroundColor: "transparent",
|
|
53
53
|
paddingTop: f,
|
|
54
54
|
paddingBottom: f,
|
|
@@ -88,13 +88,13 @@ const z = (d) => /* @__PURE__ */ n(
|
|
|
88
88
|
paddingRight: r,
|
|
89
89
|
paddingTop: "0.375rem",
|
|
90
90
|
paddingBottom: "0.375rem",
|
|
91
|
-
fontSize:
|
|
92
|
-
lineHeight:
|
|
93
|
-
fontWeight:
|
|
91
|
+
fontSize: L,
|
|
92
|
+
lineHeight: T,
|
|
93
|
+
fontWeight: v
|
|
94
94
|
}
|
|
95
95
|
},
|
|
96
96
|
separator: {
|
|
97
|
-
backgroundColor:
|
|
97
|
+
backgroundColor: B,
|
|
98
98
|
marginLeft: `calc(-1 * ${u})`,
|
|
99
99
|
marginRight: `calc(-1 * ${u})`,
|
|
100
100
|
height: "1px"
|
|
@@ -105,7 +105,7 @@ const z = (d) => /* @__PURE__ */ n(
|
|
|
105
105
|
cursor: "default",
|
|
106
106
|
alignItems: "center",
|
|
107
107
|
...c.gap(r),
|
|
108
|
-
...c.borderRadius(
|
|
108
|
+
...c.borderRadius(q),
|
|
109
109
|
paddingLeft: r,
|
|
110
110
|
paddingRight: r,
|
|
111
111
|
paddingTop: "0.375rem",
|
|
@@ -116,10 +116,10 @@ const z = (d) => /* @__PURE__ */ n(
|
|
|
116
116
|
userSelect: "none",
|
|
117
117
|
color: y,
|
|
118
118
|
"&[data-selected='true'], &[aria-selected='true']": {
|
|
119
|
-
backgroundColor:
|
|
119
|
+
backgroundColor: b
|
|
120
120
|
},
|
|
121
121
|
":hover": {
|
|
122
|
-
backgroundColor:
|
|
122
|
+
backgroundColor: b
|
|
123
123
|
},
|
|
124
124
|
"&[data-disabled='true'], &[aria-disabled='true']": {
|
|
125
125
|
pointerEvents: "none",
|
|
@@ -138,8 +138,8 @@ const z = (d) => /* @__PURE__ */ n(
|
|
|
138
138
|
shortcut: {
|
|
139
139
|
color: h,
|
|
140
140
|
marginLeft: "auto",
|
|
141
|
-
fontSize:
|
|
142
|
-
lineHeight:
|
|
141
|
+
fontSize: L,
|
|
142
|
+
lineHeight: T,
|
|
143
143
|
letterSpacing: "0.1em"
|
|
144
144
|
},
|
|
145
145
|
loading: {
|
|
@@ -155,7 +155,7 @@ const z = (d) => /* @__PURE__ */ n(
|
|
|
155
155
|
color: h,
|
|
156
156
|
paddingLeft: r,
|
|
157
157
|
paddingRight: r,
|
|
158
|
-
fontWeight:
|
|
158
|
+
fontWeight: v
|
|
159
159
|
},
|
|
160
160
|
[`& [${i}="command-input-wrapper"]`]: {
|
|
161
161
|
height: "3rem"
|
|
@@ -4,7 +4,7 @@ import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffe
|
|
|
4
4
|
import { SLOT_ATTR as g } from "../../packages/volt-runtime/dist/renderer/contract.js";
|
|
5
5
|
import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
|
|
6
6
|
import { makeVoltStyles as m } from "../../styles/make-styles.js";
|
|
7
|
-
import {
|
|
7
|
+
import { radiusLg as p, spacingElement1 as c, accent11 as u, accentA8 as w, semAccentSoft as k } from "../../tokens/index.js";
|
|
8
8
|
const f = (e) => /* @__PURE__ */ n(
|
|
9
9
|
"svg",
|
|
10
10
|
{
|
|
@@ -66,24 +66,24 @@ const f = (e) => /* @__PURE__ */ n(
|
|
|
66
66
|
gap: c,
|
|
67
67
|
...i.paddingBlock("0.125rem"),
|
|
68
68
|
...i.paddingInline(c),
|
|
69
|
-
...i.borderRadius(
|
|
69
|
+
...i.borderRadius(p),
|
|
70
70
|
cursor: "pointer",
|
|
71
71
|
transitionProperty: "color, background-color, border-color",
|
|
72
72
|
transitionDuration: "150ms",
|
|
73
73
|
":hover": {
|
|
74
|
-
backgroundColor:
|
|
74
|
+
backgroundColor: k
|
|
75
75
|
},
|
|
76
76
|
":focus-visible": {
|
|
77
77
|
outlineWidth: "2px",
|
|
78
78
|
outlineStyle: "solid",
|
|
79
79
|
outlineOffset: "2px",
|
|
80
|
-
outlineColor:
|
|
80
|
+
outlineColor: w
|
|
81
81
|
}
|
|
82
82
|
},
|
|
83
83
|
iconActive: {
|
|
84
84
|
width: "1rem",
|
|
85
85
|
height: "1rem",
|
|
86
|
-
color:
|
|
86
|
+
color: u,
|
|
87
87
|
flexShrink: 0
|
|
88
88
|
},
|
|
89
89
|
iconUnsorted: {
|
|
@@ -4,7 +4,7 @@ import { shorthands as e } from "../../packages/volt-runtime/dist/vendor/@griffe
|
|
|
4
4
|
import { SLOT_ATTR as T } from "../../packages/volt-runtime/dist/renderer/contract.js";
|
|
5
5
|
import { mergeClasses as h } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
|
|
6
6
|
import { makeVoltStyles as q } from "../../styles/make-styles.js";
|
|
7
|
-
import {
|
|
7
|
+
import { spacingLayout2 as f, spacingGroup1 as x, grayA11 as y, leadingSm as u, textSm as w, grayA12 as v, fontWeightMedium as S, leadingBase as B, textBase as A, spacingElement2 as E, errorA11 as N, spacingElement1 as Z } from "../../tokens/index.js";
|
|
8
8
|
import { Button as b } from "../button/button.js";
|
|
9
9
|
const C = (o) => /* @__PURE__ */ t(
|
|
10
10
|
"svg",
|
|
@@ -23,32 +23,32 @@ const C = (o) => /* @__PURE__ */ t(
|
|
|
23
23
|
flexDirection: "column",
|
|
24
24
|
alignItems: "center",
|
|
25
25
|
justifyContent: "center",
|
|
26
|
-
gap:
|
|
27
|
-
...e.paddingBlock(
|
|
26
|
+
gap: Z,
|
|
27
|
+
...e.paddingBlock(f),
|
|
28
28
|
textAlign: "center"
|
|
29
29
|
},
|
|
30
30
|
icon: {
|
|
31
31
|
width: "2.5rem",
|
|
32
32
|
height: "2.5rem",
|
|
33
|
-
color:
|
|
34
|
-
marginBottom:
|
|
33
|
+
color: N,
|
|
34
|
+
marginBottom: E
|
|
35
35
|
},
|
|
36
36
|
title: {
|
|
37
|
-
fontSize:
|
|
38
|
-
lineHeight:
|
|
39
|
-
fontWeight:
|
|
40
|
-
color:
|
|
37
|
+
fontSize: A,
|
|
38
|
+
lineHeight: B,
|
|
39
|
+
fontWeight: S,
|
|
40
|
+
color: v,
|
|
41
41
|
...e.margin(0)
|
|
42
42
|
},
|
|
43
43
|
description: {
|
|
44
|
-
fontSize:
|
|
45
|
-
lineHeight:
|
|
46
|
-
color:
|
|
44
|
+
fontSize: w,
|
|
45
|
+
lineHeight: u,
|
|
46
|
+
color: y,
|
|
47
47
|
maxWidth: "28rem",
|
|
48
48
|
...e.margin(0)
|
|
49
49
|
},
|
|
50
50
|
retry: {
|
|
51
|
-
marginTop:
|
|
51
|
+
marginTop: x
|
|
52
52
|
}
|
|
53
53
|
}), M = d.forwardRef(function({ title: n, description: a, retryLabel: s, onRetry: i, className: l, children: m }, c) {
|
|
54
54
|
const r = j();
|
|
@@ -4,7 +4,7 @@ import { shorthands as n } from "../../packages/volt-runtime/dist/vendor/@griffe
|
|
|
4
4
|
import { SLOT_ATTR as i } from "../../packages/volt-runtime/dist/renderer/contract.js";
|
|
5
5
|
import { mergeClasses as m } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
|
|
6
6
|
import { makeVoltStyles as l } from "../../styles/make-styles.js";
|
|
7
|
-
import {
|
|
7
|
+
import { spacingLayout2 as p, grayA11 as c, spacingElement2 as d } from "../../tokens/index.js";
|
|
8
8
|
import { Spinner as f } from "../spinner/spinner.js";
|
|
9
9
|
const g = l({
|
|
10
10
|
root: {
|
|
@@ -12,13 +12,13 @@ const g = l({
|
|
|
12
12
|
flexDirection: "column",
|
|
13
13
|
alignItems: "center",
|
|
14
14
|
justifyContent: "center",
|
|
15
|
-
gap:
|
|
16
|
-
...n.paddingBlock(
|
|
15
|
+
gap: d,
|
|
16
|
+
...n.paddingBlock(p)
|
|
17
17
|
},
|
|
18
18
|
spinner: {
|
|
19
19
|
width: "2.5rem",
|
|
20
20
|
height: "2.5rem",
|
|
21
|
-
color:
|
|
21
|
+
color: c
|
|
22
22
|
}
|
|
23
23
|
}), D = s.forwardRef(function({ className: o, children: e }, r) {
|
|
24
24
|
const t = g();
|
|
@@ -9,7 +9,7 @@ import { Button as pe } from "../button/button.js";
|
|
|
9
9
|
import { Pill as le } from "../pill/pill.js";
|
|
10
10
|
import { Popover as ce, PopoverTrigger as ge, PopoverContent as he } from "../popover/popover.js";
|
|
11
11
|
import { makeVoltStyles as ue } from "../../styles/make-styles.js";
|
|
12
|
-
import {
|
|
12
|
+
import { spacingElement1 as me, spacingGroup1 as fe, spacingElement2 as Te, gray6 as ye, gray9 as Ce, leadingSm as G, textSm as H, grayA8 as qe, grayA12 as Se } from "../../tokens/index.js";
|
|
13
13
|
import { RangeCalendar as ke } from "./range-calendar.js";
|
|
14
14
|
import { formatDateTimeDisplay as d, parseDateTimeInput as b } from "../date-time-picker/date-time-picker-utils.js";
|
|
15
15
|
const xe = (k) => /* @__PURE__ */ s(
|
|
@@ -53,7 +53,7 @@ const xe = (k) => /* @__PURE__ */ s(
|
|
|
53
53
|
triggerRoot: {
|
|
54
54
|
display: "flex",
|
|
55
55
|
alignItems: "center",
|
|
56
|
-
...l.gap(
|
|
56
|
+
...l.gap(Te),
|
|
57
57
|
flexGrow: 1,
|
|
58
58
|
flexShrink: 1,
|
|
59
59
|
flexBasis: "0%",
|
|
@@ -65,13 +65,13 @@ const xe = (k) => /* @__PURE__ */ s(
|
|
|
65
65
|
outlineStyle: "none",
|
|
66
66
|
fontSize: H,
|
|
67
67
|
lineHeight: G,
|
|
68
|
-
color:
|
|
68
|
+
color: Se,
|
|
69
69
|
backgroundColor: "transparent",
|
|
70
70
|
textAlign: "center",
|
|
71
71
|
...l.border("0"),
|
|
72
72
|
...l.padding("0"),
|
|
73
73
|
"::placeholder": {
|
|
74
|
-
color:
|
|
74
|
+
color: qe
|
|
75
75
|
},
|
|
76
76
|
":disabled": {
|
|
77
77
|
cursor: "not-allowed"
|
|
@@ -80,7 +80,7 @@ const xe = (k) => /* @__PURE__ */ s(
|
|
|
80
80
|
separator: {
|
|
81
81
|
fontSize: H,
|
|
82
82
|
lineHeight: G,
|
|
83
|
-
color:
|
|
83
|
+
color: Ce,
|
|
84
84
|
flexShrink: 0,
|
|
85
85
|
userSelect: "none",
|
|
86
86
|
...l.padding("0", "0.125rem")
|
|
@@ -92,19 +92,19 @@ const xe = (k) => /* @__PURE__ */ s(
|
|
|
92
92
|
content: {
|
|
93
93
|
display: "flex",
|
|
94
94
|
flexDirection: "row",
|
|
95
|
-
...l.gap(
|
|
95
|
+
...l.gap(fe),
|
|
96
96
|
...l.padding("0.75rem")
|
|
97
97
|
// v1 p-3 (0.75rem)
|
|
98
98
|
},
|
|
99
99
|
presets: {
|
|
100
100
|
display: "flex",
|
|
101
101
|
flexDirection: "column",
|
|
102
|
-
...l.gap(
|
|
102
|
+
...l.gap(me),
|
|
103
103
|
width: "8rem",
|
|
104
104
|
// v1 w-32
|
|
105
105
|
borderLeftWidth: "1px",
|
|
106
106
|
borderLeftStyle: "solid",
|
|
107
|
-
borderLeftColor:
|
|
107
|
+
borderLeftColor: ye,
|
|
108
108
|
paddingLeft: "0.75rem"
|
|
109
109
|
// v1 pl-3 (0.75rem)
|
|
110
110
|
},
|
|
@@ -6,7 +6,7 @@ import { SLOT_ATTR as l } from "../../packages/volt-runtime/dist/renderer/contra
|
|
|
6
6
|
import { mergeClasses as g } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
|
|
7
7
|
import { Button as te } from "../button/button.js";
|
|
8
8
|
import { makeVoltStyles as $e } from "../../styles/make-styles.js";
|
|
9
|
-
import { spacingElement2 as H, leadingSm as V, textSm as X, grayA12 as j, accentA3 as Ve, accent3 as Xe, semAccentSolidHover as Z, fontWeightSemibold as Y, semAccentContrast as _, semAccentSolid as Q,
|
|
9
|
+
import { radiusMd as R, spacingElement2 as H, spacingElement1 as ge, leadingSm as V, textSm as X, grayA12 as j, accentA3 as Ve, accent3 as Xe, semAccentSolidHover as Z, fontWeightSemibold as Y, semAccentContrast as _, semAccentSolid as Q, grayA8 as Ze, accentA11 as me, grayA4 as ue, grayA11 as ye, fontWeightMedium as fe, leadingXs as pe, textXs as be, grayA3 as _e } from "../../tokens/index.js";
|
|
10
10
|
import { getWeekDays as Qe, getCalendarDays as Ue, getMonthNames as qe, goToPreviousMonth as Je, goToNextMonth as Ke, adjustTimeIfPast as ke, isDateDisabled as Be, formatMonth as et, getDecadeStart as tt, getWeekLabel as at, isDayInCurrentMonth as Ce, getWeekNumber as we, isDaySelected as nt, isDayToday as rt, isDateInRange as ot, normalizeRange as st } from "./date-time-picker-utils.js";
|
|
11
11
|
import { isSameDay as ae } from "../../vendor/date-fns/isSameDay.js";
|
|
12
12
|
const dt = (F) => /* @__PURE__ */ n(
|
|
@@ -48,7 +48,7 @@ const dt = (F) => /* @__PURE__ */ n(
|
|
|
48
48
|
headerCenter: {
|
|
49
49
|
display: "flex",
|
|
50
50
|
alignItems: "center",
|
|
51
|
-
...d.gap(
|
|
51
|
+
...d.gap(ge)
|
|
52
52
|
},
|
|
53
53
|
headerBtn: {
|
|
54
54
|
fontWeight: Y,
|
|
@@ -57,7 +57,7 @@ const dt = (F) => /* @__PURE__ */ n(
|
|
|
57
57
|
color: j,
|
|
58
58
|
backgroundColor: _e,
|
|
59
59
|
":hover": {
|
|
60
|
-
backgroundColor:
|
|
60
|
+
backgroundColor: ue
|
|
61
61
|
},
|
|
62
62
|
transitionProperty: "background-color, color",
|
|
63
63
|
transitionDuration: "150ms",
|
|
@@ -87,17 +87,17 @@ const dt = (F) => /* @__PURE__ */ n(
|
|
|
87
87
|
gridTemplateColumns: "auto repeat(7, minmax(0, 1fr))"
|
|
88
88
|
},
|
|
89
89
|
gridRange: {
|
|
90
|
-
rowGap:
|
|
90
|
+
rowGap: ge,
|
|
91
91
|
columnGap: "0"
|
|
92
92
|
},
|
|
93
93
|
weekLabel: {
|
|
94
94
|
display: "flex",
|
|
95
95
|
alignItems: "center",
|
|
96
96
|
justifyContent: "center",
|
|
97
|
-
fontSize:
|
|
98
|
-
lineHeight:
|
|
99
|
-
fontWeight:
|
|
100
|
-
color:
|
|
97
|
+
fontSize: be,
|
|
98
|
+
lineHeight: pe,
|
|
99
|
+
fontWeight: fe,
|
|
100
|
+
color: ye,
|
|
101
101
|
height: "1.75rem",
|
|
102
102
|
width: "2rem"
|
|
103
103
|
},
|
|
@@ -105,10 +105,10 @@ const dt = (F) => /* @__PURE__ */ n(
|
|
|
105
105
|
display: "flex",
|
|
106
106
|
alignItems: "center",
|
|
107
107
|
justifyContent: "center",
|
|
108
|
-
fontSize:
|
|
109
|
-
lineHeight:
|
|
110
|
-
fontWeight:
|
|
111
|
-
color:
|
|
108
|
+
fontSize: be,
|
|
109
|
+
lineHeight: pe,
|
|
110
|
+
fontWeight: fe,
|
|
111
|
+
color: ye,
|
|
112
112
|
height: "2rem",
|
|
113
113
|
width: "2rem"
|
|
114
114
|
},
|
|
@@ -138,15 +138,15 @@ const dt = (F) => /* @__PURE__ */ n(
|
|
|
138
138
|
},
|
|
139
139
|
dayBtnHover: {
|
|
140
140
|
":hover": {
|
|
141
|
-
backgroundColor:
|
|
141
|
+
backgroundColor: ue
|
|
142
142
|
}
|
|
143
143
|
},
|
|
144
144
|
dayBtnToday: {
|
|
145
|
-
color:
|
|
145
|
+
color: me,
|
|
146
146
|
textDecorationLine: "underline",
|
|
147
147
|
textUnderlineOffset: "4px",
|
|
148
148
|
textDecorationThickness: "1.5px",
|
|
149
|
-
textDecorationColor:
|
|
149
|
+
textDecorationColor: me
|
|
150
150
|
},
|
|
151
151
|
dayBtnSelected: {
|
|
152
152
|
fontWeight: Y,
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { jsx as t, jsxs as k, Fragment as
|
|
1
|
+
import { jsx as t, jsxs as k, Fragment as W } from "react/jsx-runtime";
|
|
2
2
|
import * as m from "react";
|
|
3
3
|
import { shorthands as f } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
|
|
4
4
|
import { SLOT_ATTR as r } from "../../packages/volt-runtime/dist/renderer/contract.js";
|
|
5
|
-
import { mergeClasses as
|
|
6
|
-
import { Button as
|
|
7
|
-
import { PopoverPortal as
|
|
8
|
-
import { makeVoltStyles as
|
|
9
|
-
import {
|
|
10
|
-
import { Calendar as
|
|
11
|
-
import { TimePicker as
|
|
12
|
-
import { useDateTimePickerContext as
|
|
13
|
-
const
|
|
5
|
+
import { mergeClasses as j } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
|
|
6
|
+
import { Button as Y } from "../button/button.js";
|
|
7
|
+
import { PopoverPortal as ie, PopoverContent as oe } from "../popover/popover.js";
|
|
8
|
+
import { makeVoltStyles as ne } from "../../styles/make-styles.js";
|
|
9
|
+
import { spacingElement2 as re, spacingGroup1 as G, spacingElement3 as ae, spacingGroup2 as se } from "../../tokens/index.js";
|
|
10
|
+
import { Calendar as I } from "./calendar.js";
|
|
11
|
+
import { TimePicker as M } from "./time-picker.js";
|
|
12
|
+
import { useDateTimePickerContext as de } from "./date-time-picker-context.js";
|
|
13
|
+
const ce = ne({
|
|
14
14
|
content: {
|
|
15
15
|
overflowX: "hidden",
|
|
16
16
|
overflowY: "hidden"
|
|
@@ -21,19 +21,19 @@ const se = ie({
|
|
|
21
21
|
panelContent: {
|
|
22
22
|
display: "flex",
|
|
23
23
|
flexDirection: "column",
|
|
24
|
-
...f.gap(
|
|
25
|
-
...f.padding(
|
|
24
|
+
...f.gap(se),
|
|
25
|
+
...f.padding(ae)
|
|
26
26
|
},
|
|
27
27
|
body: {
|
|
28
28
|
display: "flex"
|
|
29
29
|
},
|
|
30
30
|
bodyBottom: {
|
|
31
31
|
flexDirection: "column",
|
|
32
|
-
...f.gap(
|
|
32
|
+
...f.gap(G)
|
|
33
33
|
},
|
|
34
34
|
bodySide: {
|
|
35
35
|
flexDirection: "row",
|
|
36
|
-
...f.gap(
|
|
36
|
+
...f.gap(G),
|
|
37
37
|
position: "relative"
|
|
38
38
|
},
|
|
39
39
|
dateSection: {
|
|
@@ -60,39 +60,41 @@ const se = ie({
|
|
|
60
60
|
footer: {
|
|
61
61
|
display: "flex",
|
|
62
62
|
justifyContent: "flex-end",
|
|
63
|
-
...f.gap(
|
|
63
|
+
...f.gap(re)
|
|
64
64
|
}
|
|
65
|
-
}),
|
|
65
|
+
}), Ce = m.forwardRef(function({
|
|
66
66
|
showTimePicker: C = !0,
|
|
67
67
|
timePickerPosition: S = "bottom",
|
|
68
|
-
okLabel:
|
|
69
|
-
cancelLabel:
|
|
68
|
+
okLabel: V = "Apply",
|
|
69
|
+
cancelLabel: X = "Cancel",
|
|
70
70
|
previousMonthLabel: z = "Previous month",
|
|
71
71
|
nextMonthLabel: A = "Next month",
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
72
|
+
hoursLabel: D,
|
|
73
|
+
minutesLabel: N,
|
|
74
|
+
showTodayButton: F = !1,
|
|
75
|
+
todayLabel: T = "Today",
|
|
76
|
+
showWeekNumbers: O = !1,
|
|
77
|
+
className: Q,
|
|
78
|
+
minuteStep: P = 1
|
|
79
|
+
}, _) {
|
|
80
|
+
const i = ce(), {
|
|
79
81
|
tempValue: p,
|
|
80
|
-
isOpen:
|
|
81
|
-
locale:
|
|
82
|
+
isOpen: q,
|
|
83
|
+
locale: H,
|
|
82
84
|
disablePast: h,
|
|
83
85
|
currentTimeInTimezone: u,
|
|
84
86
|
handleDateChange: y,
|
|
85
|
-
confirm:
|
|
86
|
-
cancel:
|
|
87
|
-
} =
|
|
87
|
+
confirm: J,
|
|
88
|
+
cancel: K
|
|
89
|
+
} = de(), [U, Z] = m.useState(!0);
|
|
88
90
|
m.useEffect(() => {
|
|
89
91
|
if (S !== "side") return;
|
|
90
|
-
const a = () =>
|
|
92
|
+
const a = () => Z(window.innerWidth >= 480);
|
|
91
93
|
return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
|
|
92
94
|
}, [S]);
|
|
93
95
|
const w = m.useRef(null);
|
|
94
96
|
m.useLayoutEffect(() => {
|
|
95
|
-
if (!
|
|
97
|
+
if (!q) return;
|
|
96
98
|
const a = () => {
|
|
97
99
|
const e = w.current;
|
|
98
100
|
if (!e) return;
|
|
@@ -105,7 +107,7 @@ const se = ie({
|
|
|
105
107
|
`[${r}="datetimepicker-body"]`
|
|
106
108
|
);
|
|
107
109
|
s && (s.style.maxHeight = "", s.style.overflowY = "");
|
|
108
|
-
const o = x.getBoundingClientRect(), R = window.innerHeight,
|
|
110
|
+
const o = x.getBoundingClientRect(), R = window.innerHeight, $ = window.innerWidth, n = 8, B = R - 2 * n;
|
|
109
111
|
let E = { m41: 0, m42: 0 };
|
|
110
112
|
try {
|
|
111
113
|
const c = getComputedStyle(x).transform;
|
|
@@ -113,46 +115,46 @@ const se = ie({
|
|
|
113
115
|
} catch {
|
|
114
116
|
}
|
|
115
117
|
let d = 0, l = 0;
|
|
116
|
-
if (o.height >
|
|
118
|
+
if (o.height > B) {
|
|
117
119
|
if (s) {
|
|
118
120
|
const c = e.querySelector(
|
|
119
121
|
`[${r}="datetimepicker-footer"]`
|
|
120
|
-
),
|
|
121
|
-
s.style.maxHeight = `${
|
|
122
|
+
), te = c ? c.getBoundingClientRect().height : 0;
|
|
123
|
+
s.style.maxHeight = `${B - te}px`, s.style.overflowY = "auto";
|
|
122
124
|
}
|
|
123
125
|
d = n - o.top;
|
|
124
126
|
} else
|
|
125
127
|
o.bottom > R - n && (d = R - n - o.bottom), o.top + d < n && (d = n - o.top);
|
|
126
|
-
o.right >
|
|
127
|
-
},
|
|
128
|
+
o.right > $ - n && (l = $ - n - o.right), o.left + l < n && (l = n - o.left), (l !== 0 || d !== 0) && (x.style.transform = `translate(${E.m41 + l}px, ${E.m42 + d}px)`);
|
|
129
|
+
}, ee = requestAnimationFrame(() => {
|
|
128
130
|
requestAnimationFrame(a);
|
|
129
131
|
});
|
|
130
132
|
let v = 0;
|
|
131
|
-
const
|
|
133
|
+
const L = () => {
|
|
132
134
|
const e = w.current;
|
|
133
135
|
e && (e.style.width = "", delete e.dataset.widthLocked), cancelAnimationFrame(v), v = requestAnimationFrame(() => {
|
|
134
136
|
v = requestAnimationFrame(a);
|
|
135
137
|
});
|
|
136
138
|
};
|
|
137
|
-
window.addEventListener("resize",
|
|
139
|
+
window.addEventListener("resize", L);
|
|
138
140
|
const b = w.current;
|
|
139
141
|
return () => {
|
|
140
|
-
cancelAnimationFrame(
|
|
142
|
+
cancelAnimationFrame(ee), cancelAnimationFrame(v), window.removeEventListener("resize", L), b && (b.style.width = "", delete b.dataset.widthLocked);
|
|
141
143
|
};
|
|
142
|
-
}, [
|
|
143
|
-
const g = C && S === "side" &&
|
|
144
|
-
return /* @__PURE__ */ t(
|
|
145
|
-
|
|
144
|
+
}, [q]);
|
|
145
|
+
const g = C && S === "side" && U;
|
|
146
|
+
return /* @__PURE__ */ t(ie, { children: /* @__PURE__ */ t(
|
|
147
|
+
oe,
|
|
146
148
|
{
|
|
147
149
|
align: "start",
|
|
148
|
-
className:
|
|
150
|
+
className: j(
|
|
149
151
|
i.content,
|
|
150
152
|
!g && i.contentNarrow,
|
|
151
|
-
|
|
153
|
+
Q
|
|
152
154
|
),
|
|
153
155
|
collisionPadding: 8,
|
|
154
156
|
flush: !0,
|
|
155
|
-
ref:
|
|
157
|
+
ref: _,
|
|
156
158
|
side: "bottom",
|
|
157
159
|
sideOffset: 4,
|
|
158
160
|
sticky: "always",
|
|
@@ -167,7 +169,7 @@ const se = ie({
|
|
|
167
169
|
/* @__PURE__ */ k(
|
|
168
170
|
"div",
|
|
169
171
|
{
|
|
170
|
-
className:
|
|
172
|
+
className: j(
|
|
171
173
|
i.body,
|
|
172
174
|
g ? i.bodySide : i.bodyBottom
|
|
173
175
|
),
|
|
@@ -181,37 +183,37 @@ const se = ie({
|
|
|
181
183
|
"data-slot": "datetimepicker-date-section",
|
|
182
184
|
[r]: "datetimepicker-date-section",
|
|
183
185
|
children: /* @__PURE__ */ t(
|
|
184
|
-
|
|
186
|
+
I,
|
|
185
187
|
{
|
|
186
188
|
currentTimeInTimezone: u,
|
|
187
189
|
disablePast: h,
|
|
188
|
-
locale:
|
|
190
|
+
locale: H,
|
|
189
191
|
nextMonthLabel: A,
|
|
190
192
|
onChange: y,
|
|
191
193
|
previousMonthLabel: z,
|
|
192
|
-
showTodayButton:
|
|
193
|
-
showWeekNumbers:
|
|
194
|
-
todayLabel:
|
|
194
|
+
showTodayButton: F,
|
|
195
|
+
showWeekNumbers: O,
|
|
196
|
+
todayLabel: T,
|
|
195
197
|
value: p
|
|
196
198
|
}
|
|
197
199
|
)
|
|
198
200
|
}
|
|
199
201
|
) : /* @__PURE__ */ t(
|
|
200
|
-
|
|
202
|
+
I,
|
|
201
203
|
{
|
|
202
204
|
currentTimeInTimezone: u,
|
|
203
205
|
disablePast: h,
|
|
204
|
-
locale:
|
|
206
|
+
locale: H,
|
|
205
207
|
nextMonthLabel: A,
|
|
206
208
|
onChange: y,
|
|
207
209
|
previousMonthLabel: z,
|
|
208
|
-
showTodayButton:
|
|
209
|
-
showWeekNumbers:
|
|
210
|
-
todayLabel:
|
|
210
|
+
showTodayButton: F,
|
|
211
|
+
showWeekNumbers: O,
|
|
212
|
+
todayLabel: T,
|
|
211
213
|
value: p
|
|
212
214
|
}
|
|
213
215
|
),
|
|
214
|
-
C && /* @__PURE__ */ t(
|
|
216
|
+
C && /* @__PURE__ */ t(W, { children: g ? /* @__PURE__ */ k(W, { children: [
|
|
215
217
|
/* @__PURE__ */ t(
|
|
216
218
|
"div",
|
|
217
219
|
{
|
|
@@ -227,12 +229,14 @@ const se = ie({
|
|
|
227
229
|
"data-slot": "datetimepicker-time-section",
|
|
228
230
|
[r]: "datetimepicker-time-section",
|
|
229
231
|
children: /* @__PURE__ */ t(
|
|
230
|
-
|
|
232
|
+
M,
|
|
231
233
|
{
|
|
232
234
|
currentTimeInTimezone: u,
|
|
233
235
|
disablePast: h,
|
|
234
236
|
fillHeight: !0,
|
|
235
|
-
|
|
237
|
+
hoursLabel: D,
|
|
238
|
+
minuteStep: P,
|
|
239
|
+
minutesLabel: N,
|
|
236
240
|
onChange: y,
|
|
237
241
|
value: p
|
|
238
242
|
}
|
|
@@ -240,11 +244,13 @@ const se = ie({
|
|
|
240
244
|
}
|
|
241
245
|
)
|
|
242
246
|
] }) : /* @__PURE__ */ t(
|
|
243
|
-
|
|
247
|
+
M,
|
|
244
248
|
{
|
|
245
249
|
currentTimeInTimezone: u,
|
|
246
250
|
disablePast: h,
|
|
247
|
-
|
|
251
|
+
hoursLabel: D,
|
|
252
|
+
minuteStep: P,
|
|
253
|
+
minutesLabel: N,
|
|
248
254
|
onChange: y,
|
|
249
255
|
value: p
|
|
250
256
|
}
|
|
@@ -259,8 +265,8 @@ const se = ie({
|
|
|
259
265
|
"data-slot": "datetimepicker-footer",
|
|
260
266
|
[r]: "datetimepicker-footer",
|
|
261
267
|
children: [
|
|
262
|
-
/* @__PURE__ */ t(
|
|
263
|
-
/* @__PURE__ */ t(
|
|
268
|
+
/* @__PURE__ */ t(Y, { onClick: K, size: "sm", variant: "secondary", children: X }),
|
|
269
|
+
/* @__PURE__ */ t(Y, { onClick: J, size: "sm", variant: "primary", children: V })
|
|
264
270
|
]
|
|
265
271
|
}
|
|
266
272
|
)
|
|
@@ -271,6 +277,6 @@ const se = ie({
|
|
|
271
277
|
) });
|
|
272
278
|
});
|
|
273
279
|
export {
|
|
274
|
-
|
|
280
|
+
Ce as DateTimePickerPanel
|
|
275
281
|
};
|
|
276
282
|
//# sourceMappingURL=date-time-picker-panel.js.map
|