@dmsi/wedgekit-react 0.0.476 → 0.0.477
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/{chunk-HSJ34DOK.js → chunk-WIDUWFLX.js} +748 -34
- package/dist/components/CalendarRange.cjs +452 -152
- package/dist/components/CalendarRange.js +1 -2
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.cjs +916 -151
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.js +1 -1
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/index.cjs +926 -161
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/index.js +1 -1
- package/dist/components/DataGrid/PinnedColumns.cjs +941 -176
- package/dist/components/DataGrid/PinnedColumns.js +1 -1
- package/dist/components/DataGrid/TableBody/LoadingCell.cjs +917 -152
- package/dist/components/DataGrid/TableBody/LoadingCell.js +1 -1
- package/dist/components/DataGrid/TableBody/TableBodyRow.cjs +923 -158
- package/dist/components/DataGrid/TableBody/TableBodyRow.js +1 -1
- package/dist/components/DataGrid/TableBody/index.cjs +938 -173
- package/dist/components/DataGrid/TableBody/index.js +1 -1
- package/dist/components/DataGrid/index.cjs +1027 -262
- package/dist/components/DataGrid/index.js +1 -1
- package/dist/components/DataGrid/utils.cjs +917 -152
- package/dist/components/DataGrid/utils.js +1 -1
- package/dist/components/DateInput.js +7 -254
- package/dist/components/DateRangeInput.cjs +406 -176
- package/dist/components/DateRangeInput.js +1 -2
- package/dist/components/MobileDataGrid/ColumnSelector/index.cjs +923 -158
- package/dist/components/MobileDataGrid/ColumnSelector/index.js +1 -1
- package/dist/components/MobileDataGrid/MobileDataGridHeader.cjs +921 -156
- package/dist/components/MobileDataGrid/MobileDataGridHeader.js +1 -1
- package/dist/components/MobileDataGrid/index.cjs +971 -206
- package/dist/components/MobileDataGrid/index.js +1 -1
- package/dist/components/index.cjs +1145 -378
- package/dist/components/index.js +3 -1
- package/package.json +1 -1
- package/src/components/index.ts +1 -0
- package/dist/chunk-X35NLL3N.js +0 -493
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-HSJ34DOK.js";
|
|
2
|
+
DateInput
|
|
3
|
+
} from "../chunk-WIDUWFLX.js";
|
|
5
4
|
import "../chunk-M7INAUAJ.js";
|
|
6
5
|
import "../chunk-4Q7T4GJ2.js";
|
|
7
6
|
import "../chunk-3DEYCNUE.js";
|
|
@@ -43,25 +42,15 @@ import "../chunk-TCMOGTPB.js";
|
|
|
43
42
|
import "../chunk-DVU5XV7L.js";
|
|
44
43
|
import "../chunk-IPAKWF2V.js";
|
|
45
44
|
import "../chunk-RQRR4FEF.js";
|
|
46
|
-
import
|
|
47
|
-
InputBase
|
|
48
|
-
} from "../chunk-44TH3VC7.js";
|
|
45
|
+
import "../chunk-44TH3VC7.js";
|
|
49
46
|
import "../chunk-AL5QIRY3.js";
|
|
50
47
|
import "../chunk-WVUIIBRR.js";
|
|
51
48
|
import "../chunk-75USUR3I.js";
|
|
52
49
|
import "../chunk-WEAVZEE4.js";
|
|
53
50
|
import "../chunk-OZBB6RFM.js";
|
|
54
51
|
import "../chunk-URYQ24NF.js";
|
|
55
|
-
import
|
|
56
|
-
|
|
57
|
-
} from "../chunk-VXWSAIB5.js";
|
|
58
|
-
import {
|
|
59
|
-
calculateCursorPosition,
|
|
60
|
-
formatDate,
|
|
61
|
-
formatInputValue,
|
|
62
|
-
isValidDate,
|
|
63
|
-
parseInputDate
|
|
64
|
-
} from "../chunk-R3EQIDBX.js";
|
|
52
|
+
import "../chunk-VXWSAIB5.js";
|
|
53
|
+
import "../chunk-R3EQIDBX.js";
|
|
65
54
|
import "../chunk-5UH6QUFB.js";
|
|
66
55
|
import "../chunk-UCJUC5AZ.js";
|
|
67
56
|
import "../chunk-IY7SXEVY.js";
|
|
@@ -70,246 +59,10 @@ import "../chunk-4UH72JT2.js";
|
|
|
70
59
|
import "../chunk-H2KC5XUY.js";
|
|
71
60
|
import "../chunk-ZSETMD4A.js";
|
|
72
61
|
import "../chunk-DORD2EBO.js";
|
|
73
|
-
import
|
|
74
|
-
Icon
|
|
75
|
-
} from "../chunk-NKUETCDA.js";
|
|
62
|
+
import "../chunk-NKUETCDA.js";
|
|
76
63
|
import "../chunk-LPY6PMAY.js";
|
|
77
64
|
import "../chunk-IXR65MOU.js";
|
|
78
|
-
import
|
|
79
|
-
__objRest,
|
|
80
|
-
__spreadProps,
|
|
81
|
-
__spreadValues
|
|
82
|
-
} from "../chunk-ORMEWXMH.js";
|
|
83
|
-
|
|
84
|
-
// src/components/DateInput.tsx
|
|
85
|
-
import { useRef, useEffect, useState, useLayoutEffect } from "react";
|
|
86
|
-
import { createPortal } from "react-dom";
|
|
87
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
88
|
-
var DateInput = (_a) => {
|
|
89
|
-
var _b = _a, {
|
|
90
|
-
id,
|
|
91
|
-
testid,
|
|
92
|
-
value,
|
|
93
|
-
onChange,
|
|
94
|
-
placeholder = "MM/DD/YYYY",
|
|
95
|
-
disabled,
|
|
96
|
-
readOnly = false,
|
|
97
|
-
label
|
|
98
|
-
} = _b, props = __objRest(_b, [
|
|
99
|
-
"id",
|
|
100
|
-
"testid",
|
|
101
|
-
"value",
|
|
102
|
-
"onChange",
|
|
103
|
-
"placeholder",
|
|
104
|
-
"disabled",
|
|
105
|
-
"readOnly",
|
|
106
|
-
"label"
|
|
107
|
-
]);
|
|
108
|
-
const [visible, setVisible] = useState(false);
|
|
109
|
-
const [inputValue, setInputValue] = useState("");
|
|
110
|
-
const [isTyping, setIsTyping] = useState(false);
|
|
111
|
-
const popoverRef = useRef(null);
|
|
112
|
-
const triggerRef = useRef(null);
|
|
113
|
-
const rootRef = useRef(null);
|
|
114
|
-
const [calendarPosition, setCalendarPosition] = useState({
|
|
115
|
-
top: 0,
|
|
116
|
-
left: 0,
|
|
117
|
-
width: 0
|
|
118
|
-
});
|
|
119
|
-
const [from, to] = [value, ""];
|
|
120
|
-
useEffect(() => {
|
|
121
|
-
if (!isTyping) {
|
|
122
|
-
setInputValue(formatDisplayValue(from));
|
|
123
|
-
}
|
|
124
|
-
}, [from, isTyping]);
|
|
125
|
-
useLayoutEffect(() => {
|
|
126
|
-
if (visible) {
|
|
127
|
-
updatePosition();
|
|
128
|
-
}
|
|
129
|
-
}, [visible]);
|
|
130
|
-
const updatePosition = () => {
|
|
131
|
-
if (rootRef.current) {
|
|
132
|
-
const rect = rootRef.current.getBoundingClientRect();
|
|
133
|
-
setCalendarPosition({
|
|
134
|
-
top: rect.bottom + window.scrollY,
|
|
135
|
-
left: rect.left + window.scrollX,
|
|
136
|
-
width: rect.width
|
|
137
|
-
});
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
useEffect(() => {
|
|
141
|
-
updatePosition();
|
|
142
|
-
const resizeObserver = new ResizeObserver(updatePosition);
|
|
143
|
-
if (triggerRef.current) {
|
|
144
|
-
resizeObserver.observe(triggerRef.current);
|
|
145
|
-
}
|
|
146
|
-
window.addEventListener("scroll", updatePosition);
|
|
147
|
-
return () => {
|
|
148
|
-
resizeObserver.disconnect();
|
|
149
|
-
window.removeEventListener("scroll", updatePosition);
|
|
150
|
-
};
|
|
151
|
-
}, []);
|
|
152
|
-
useEffect(() => {
|
|
153
|
-
const handleKeyDown2 = (event) => {
|
|
154
|
-
var _a2;
|
|
155
|
-
if (event.key === "Escape" && popoverRef.current) {
|
|
156
|
-
setVisible(false);
|
|
157
|
-
(_a2 = triggerRef.current) == null ? void 0 : _a2.blur();
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
document.addEventListener("keydown", handleKeyDown2);
|
|
161
|
-
return () => {
|
|
162
|
-
document.removeEventListener("keydown", handleKeyDown2);
|
|
163
|
-
};
|
|
164
|
-
});
|
|
165
|
-
useEffect(() => {
|
|
166
|
-
const handleClickOutside = (event) => {
|
|
167
|
-
if (popoverRef.current && !popoverRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
|
|
168
|
-
setVisible(false);
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
172
|
-
return () => {
|
|
173
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
174
|
-
};
|
|
175
|
-
}, []);
|
|
176
|
-
function handleDateChange(fromValue) {
|
|
177
|
-
onChange(fromValue);
|
|
178
|
-
setVisible(false);
|
|
179
|
-
setIsTyping(false);
|
|
180
|
-
}
|
|
181
|
-
const handleFocus = () => {
|
|
182
|
-
if (readOnly) return;
|
|
183
|
-
setVisible(true);
|
|
184
|
-
};
|
|
185
|
-
const handleClick = () => {
|
|
186
|
-
handleFocus();
|
|
187
|
-
};
|
|
188
|
-
const handleInputChange = (event) => {
|
|
189
|
-
if (readOnly) return;
|
|
190
|
-
const rawValue = event.target.value;
|
|
191
|
-
const cursorPosition = event.target.selectionStart || 0;
|
|
192
|
-
setIsTyping(true);
|
|
193
|
-
const formattedValue = formatInputValue(rawValue);
|
|
194
|
-
setInputValue(formattedValue);
|
|
195
|
-
requestAnimationFrame(() => {
|
|
196
|
-
if (triggerRef.current) {
|
|
197
|
-
const newPosition = calculateCursorPosition(
|
|
198
|
-
rawValue,
|
|
199
|
-
formattedValue,
|
|
200
|
-
cursorPosition
|
|
201
|
-
);
|
|
202
|
-
triggerRef.current.setSelectionRange(newPosition, newPosition);
|
|
203
|
-
}
|
|
204
|
-
});
|
|
205
|
-
const parsedDate = parseInputDate(formattedValue);
|
|
206
|
-
if (parsedDate && isValidDate(parsedDate)) {
|
|
207
|
-
onChange(parsedDate);
|
|
208
|
-
}
|
|
209
|
-
};
|
|
210
|
-
const handleBlur = () => {
|
|
211
|
-
setIsTyping(false);
|
|
212
|
-
const parsedDate = parseInputDate(inputValue);
|
|
213
|
-
if (!parsedDate || !isValidDate(parsedDate)) {
|
|
214
|
-
setInputValue(formatDisplayValue(from));
|
|
215
|
-
}
|
|
216
|
-
};
|
|
217
|
-
const handleKeyDown = (event) => {
|
|
218
|
-
if (event.key === "Backspace") {
|
|
219
|
-
const input = event.target;
|
|
220
|
-
const cursorPosition = input.selectionStart || 0;
|
|
221
|
-
const value2 = input.value;
|
|
222
|
-
if (cursorPosition > 0 && value2[cursorPosition - 1] === "/") {
|
|
223
|
-
event.preventDefault();
|
|
224
|
-
const newValue = value2.slice(0, cursorPosition - 2) + value2.slice(cursorPosition);
|
|
225
|
-
const formattedValue = formatInputValue(newValue);
|
|
226
|
-
setInputValue(formattedValue);
|
|
227
|
-
requestAnimationFrame(() => {
|
|
228
|
-
if (triggerRef.current) {
|
|
229
|
-
const newPosition = Math.max(0, cursorPosition - 2);
|
|
230
|
-
triggerRef.current.setSelectionRange(newPosition, newPosition);
|
|
231
|
-
}
|
|
232
|
-
});
|
|
233
|
-
setIsTyping(true);
|
|
234
|
-
return;
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
if (event.key === "Enter") {
|
|
238
|
-
const parsedDate = parseInputDate(inputValue);
|
|
239
|
-
if (parsedDate && isValidDate(parsedDate)) {
|
|
240
|
-
onChange(parsedDate);
|
|
241
|
-
setVisible(false);
|
|
242
|
-
setIsTyping(false);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
};
|
|
246
|
-
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
247
|
-
/* @__PURE__ */ jsx(
|
|
248
|
-
InputBase,
|
|
249
|
-
__spreadProps(__spreadValues({
|
|
250
|
-
id,
|
|
251
|
-
testid,
|
|
252
|
-
ref: (el) => {
|
|
253
|
-
triggerRef.current = el;
|
|
254
|
-
}
|
|
255
|
-
}, props), {
|
|
256
|
-
wrapperRef: rootRef,
|
|
257
|
-
value: inputValue,
|
|
258
|
-
placeholder,
|
|
259
|
-
disabled,
|
|
260
|
-
readOnly,
|
|
261
|
-
after: /* @__PURE__ */ jsx(Icon, { name: "calendar_month" }),
|
|
262
|
-
onFocus: handleFocus,
|
|
263
|
-
onClick: handleClick,
|
|
264
|
-
onChange: handleInputChange,
|
|
265
|
-
onBlur: handleBlur,
|
|
266
|
-
onKeyDown: handleKeyDown,
|
|
267
|
-
label,
|
|
268
|
-
secondaryIconColor: true
|
|
269
|
-
})
|
|
270
|
-
),
|
|
271
|
-
visible && !readOnly && createPortal(
|
|
272
|
-
/* @__PURE__ */ jsx(
|
|
273
|
-
"div",
|
|
274
|
-
{
|
|
275
|
-
ref: (el) => {
|
|
276
|
-
popoverRef.current = el;
|
|
277
|
-
},
|
|
278
|
-
className: "absolute z-40 bg-white",
|
|
279
|
-
style: {
|
|
280
|
-
top: `${calendarPosition.top + 4}px`,
|
|
281
|
-
left: `${calendarPosition.left}px`,
|
|
282
|
-
minWidth: `${calendarPosition.width}px`
|
|
283
|
-
},
|
|
284
|
-
children: /* @__PURE__ */ jsx(
|
|
285
|
-
CalendarRange,
|
|
286
|
-
{
|
|
287
|
-
id: id ? `${id}-calendar` : void 0,
|
|
288
|
-
testid: testid ? `${testid}-calendar` : void 0,
|
|
289
|
-
from,
|
|
290
|
-
to: to || from,
|
|
291
|
-
onChange: handleDateChange,
|
|
292
|
-
cardStyle: true,
|
|
293
|
-
mode: "single",
|
|
294
|
-
disableRange: true
|
|
295
|
-
}
|
|
296
|
-
)
|
|
297
|
-
}
|
|
298
|
-
),
|
|
299
|
-
findDocumentRoot(popoverRef.current)
|
|
300
|
-
)
|
|
301
|
-
] });
|
|
302
|
-
};
|
|
303
|
-
DateInput.displayName = "DateInput";
|
|
304
|
-
function formatDisplayValue(from) {
|
|
305
|
-
if (!from) {
|
|
306
|
-
return "";
|
|
307
|
-
}
|
|
308
|
-
if (!isValidDate(from)) {
|
|
309
|
-
return "";
|
|
310
|
-
}
|
|
311
|
-
return formatDate(from);
|
|
312
|
-
}
|
|
65
|
+
import "../chunk-ORMEWXMH.js";
|
|
313
66
|
export {
|
|
314
67
|
DateInput
|
|
315
68
|
};
|