pixelize-design-library 2.2.150 → 2.2.151

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.
Files changed (7) hide show
  1. package/dist/Components/DatePicker/DatePickerProps.d.ts +2 -1
  2. package/dist/Components/DatePicker/RangeDatePicker.js +18 -13
  3. package/dist/Components/DatePicker/SingleDatePicker.js +19 -14
  4. package/dist/Components/DatePicker/TimeOnlyPicker.js +5 -4
  5. package/dist/Components/DatePicker/TimePickerInput.d.ts +1 -0
  6. package/dist/Components/DatePicker/TimePickerInput.js +14 -9
  7. package/package.json +1 -1
package/dist/Components/DatePicker/DatePickerProps.d.ts CHANGED
@@ -20,7 +20,8 @@ export type BaseDatePickerProps = {
20
20
  disabled?: boolean;
21
21
  width?: string | number;
22
22
  disableToday?: boolean;
23
- size?: "sm" | "md" | "lg";
23
+ /** Chakra `Input` / `InputGroup` size for the field and chevron (calendar/clock) scale. */
24
+ size?: "xs" | "sm" | "md" | "lg";
24
25
  };
25
26
  export type SingleDatePickerProps = BaseDatePickerProps & {
26
27
  isRange?: false;
package/dist/Components/DatePicker/RangeDatePicker.js CHANGED
@@ -47,6 +47,7 @@ var HelperText_1 = __importDefault(require("../Common/HelperText"));
47
47
  var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
48
48
  var CalendarPanel_1 = __importDefault(require("./CalendarPanel"));
49
49
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
50
+ var textInputIconSize_1 = require("../Input/textInputIconSize");
50
51
  var TimePicker_1 = __importDefault(require("./TimePicker"));
51
52
  var TimePickerInput_1 = require("./TimePickerInput");
52
53
  // helper to set time on date while preserving date part
@@ -56,20 +57,23 @@ var setTimeFrom = function (base, time) {
56
57
  };
57
58
  var RangeDatePicker = function (props) {
58
59
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
59
- var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _o = props.dateFormat, dateFormat = _o === void 0 ? "dd/MM/yyyy" : _o, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _p = props.autoComplete, autoComplete = _p === void 0 ? "off" : _p, disabled = props.disabled, _q = props.width, width = _q === void 0 ? "100%" : _q, _r = props.disableToday, disableToday = _r === void 0 ? false : _r;
60
+ var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _o = props.dateFormat, dateFormat = _o === void 0 ? "dd/MM/yyyy" : _o, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _p = props.autoComplete, autoComplete = _p === void 0 ? "off" : _p, disabled = props.disabled, _q = props.width, width = _q === void 0 ? "100%" : _q, _r = props.disableToday, disableToday = _r === void 0 ? false : _r, _s = props.size, size = _s === void 0 ? "md" : _s;
60
61
  var theme = (0, useCustomTheme_1.useCustomTheme)();
61
- var _s = (0, react_2.useDisclosure)(), isOpen = _s.isOpen, onOpen = _s.onOpen, onClose = _s.onClose;
62
+ var sizeKey = typeof size === "string" ? size : "md";
63
+ var calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
64
+ var calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
65
+ var _t = (0, react_2.useDisclosure)(), isOpen = _t.isOpen, onOpen = _t.onOpen, onClose = _t.onClose;
62
66
  var inputRef = (0, react_1.useRef)(null);
63
67
  var triggerRef = (0, react_1.useRef)(null);
64
68
  var popoverRef = (0, react_1.useRef)(null);
65
69
  var today = new Date();
66
70
  var placeholder = (0, react_1.useMemo)(function () { return placeholderText || "".concat(dateFormat, " - ").concat(dateFormat); }, [placeholderText, dateFormat]);
67
71
  var selectedRange = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate) !== null && _b !== void 0 ? _b : null;
68
- var _t = (0, react_1.useState)(new Date()), currentMonth = _t[0], setCurrentMonthState = _t[1];
69
- var _u = (0, react_1.useState)((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null), tempRangeStart = _u[0], setTempRangeStart = _u[1];
70
- var _v = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null), tempRangeEnd = _v[0], setTempRangeEnd = _v[1];
71
- var _w = (0, react_1.useState)(true), selectingStart = _w[0], setSelectingStart = _w[1];
72
- var _x = (0, react_1.useState)(""), inputValue = _x[0], setInputValue = _x[1];
72
+ var _u = (0, react_1.useState)(new Date()), currentMonth = _u[0], setCurrentMonthState = _u[1];
73
+ var _v = (0, react_1.useState)((_c = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) !== null && _c !== void 0 ? _c : null), tempRangeStart = _v[0], setTempRangeStart = _v[1];
74
+ var _w = (0, react_1.useState)((_d = selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) !== null && _d !== void 0 ? _d : null), tempRangeEnd = _w[0], setTempRangeEnd = _w[1];
75
+ var _x = (0, react_1.useState)(true), selectingStart = _x[0], setSelectingStart = _x[1];
76
+ var _y = (0, react_1.useState)(""), inputValue = _y[0], setInputValue = _y[1];
73
77
  var formatHasTime = (0, react_1.useMemo)(function () { return /(h{1,2}|H{1,2})/.test(dateFormat); }, [dateFormat]);
74
78
  var formatHasSeconds = (0, react_1.useMemo)(function () { return /s{1,2}/i.test(dateFormat); }, [dateFormat]);
75
79
  var shouldUseSelectTimePicker = formatHasTime && !formatHasSeconds;
@@ -181,8 +185,8 @@ var RangeDatePicker = function (props) {
181
185
  react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false },
182
186
  react_1.default.createElement(react_2.PopoverTrigger, null,
183
187
  react_1.default.createElement(react_2.Box, { ref: triggerRef, as: "div" },
184
- react_1.default.createElement(react_2.InputGroup, null,
185
- react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, autoComplete: autoComplete, onFocus: function () {
188
+ react_1.default.createElement(react_2.InputGroup, { size: sizeKey },
189
+ react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, autoComplete: autoComplete, onFocus: function () {
186
190
  if (!isOpen)
187
191
  handleOpen();
188
192
  }, onClick: function () {
@@ -196,8 +200,9 @@ var RangeDatePicker = function (props) {
196
200
  }, _hover: {
197
201
  borderColor: error ? (_m = (_l = theme.colors.semantic) === null || _l === void 0 ? void 0 : _l.error) === null || _m === void 0 ? void 0 : _m[500] : undefined,
198
202
  }, cursor: "pointer" }),
199
- react_1.default.createElement(react_2.InputRightElement, { pr: 3, pointerEvents: "auto", style: { cursor: "pointer" }, onClick: function () { return (isOpen ? onClose() : handleOpen()); } },
200
- react_1.default.createElement(lucide_react_1.CalendarIcon, { size: 18, color: theme.colors.gray[500] }))))),
203
+ react_1.default.createElement(react_2.InputRightElement, { pr: 3, height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: function () { return (isOpen ? onClose() : handleOpen()); } },
204
+ react_1.default.createElement(react_2.Box, { as: "span", sx: calendarIconWrapperSx },
205
+ react_1.default.createElement(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] })))))),
201
206
  react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
202
207
  react_1.default.createElement(react_2.PopoverBody, null,
203
208
  react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonthState(function (prev) { return updater(prev); }); }, today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }),
@@ -217,7 +222,7 @@ var RangeDatePicker = function (props) {
217
222
  return;
218
223
  }
219
224
  setTempRangeStart(setTimeFrom(startTimeBaseDate, t));
220
- }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart }))),
225
+ }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeStart, size: sizeKey }))),
221
226
  react_1.default.createElement(react_2.Box, null,
222
227
  react_1.default.createElement(react_2.Box, { fontSize: "xs", color: "gray.600", mb: 1 }, "End time"),
223
228
  shouldUseSelectTimePicker ? (react_1.default.createElement(TimePicker_1.default, { date: endTimeBaseDate, onChange: function (updated) {
@@ -233,7 +238,7 @@ var RangeDatePicker = function (props) {
233
238
  return;
234
239
  }
235
240
  setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
236
- }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd }))))),
241
+ }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))))),
237
242
  react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: "gray.200" },
238
243
  react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: handleClear }, "Clear"),
239
244
  react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: requestClose }, "OK"))))),
package/dist/Components/DatePicker/SingleDatePicker.js CHANGED
@@ -43,6 +43,7 @@ var date_fns_1 = require("date-fns");
43
43
  var lucide_react_1 = require("lucide-react");
44
44
  var Button_1 = __importDefault(require("../Button/Button"));
45
45
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
46
+ var textInputIconSize_1 = require("../Input/textInputIconSize");
46
47
  var FormLabel_1 = require("../Common/FormLabel");
47
48
  var HelperText_1 = __importDefault(require("../Common/HelperText"));
48
49
  var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
@@ -275,9 +276,12 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
275
276
  };
276
277
  var SingleDatePicker = function (props) {
277
278
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
278
- var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _l = props.dateFormat, dateFormat = _l === void 0 ? "dd/MM/yyyy" : _l, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _m = props.autoComplete, autoComplete = _m === void 0 ? "off" : _m, disabled = props.disabled, _o = props.width, width = _o === void 0 ? "100%" : _o, _p = props.disableToday, disableToday = _p === void 0 ? false : _p;
279
+ var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _l = props.dateFormat, dateFormat = _l === void 0 ? "dd/MM/yyyy" : _l, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, _m = props.autoComplete, autoComplete = _m === void 0 ? "off" : _m, disabled = props.disabled, _o = props.width, width = _o === void 0 ? "100%" : _o, _p = props.disableToday, disableToday = _p === void 0 ? false : _p, _q = props.size, size = _q === void 0 ? "md" : _q;
279
280
  var theme = (0, useCustomTheme_1.useCustomTheme)();
280
- var _q = (0, react_2.useDisclosure)(), isOpen = _q.isOpen, onOpen = _q.onOpen, onClose = _q.onClose;
281
+ var sizeKey = typeof size === "string" ? size : "md";
282
+ var calendarIconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
283
+ var calendarIconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
284
+ var _r = (0, react_2.useDisclosure)(), isOpen = _r.isOpen, onOpen = _r.onOpen, onClose = _r.onClose;
281
285
  var inputRef = (0, react_1.useRef)(null);
282
286
  var popoverRef = (0, react_1.useRef)(null);
283
287
  var triggerRef = (0, react_1.useRef)(null);
@@ -335,18 +339,18 @@ var SingleDatePicker = function (props) {
335
339
  resolvedDateFormat.toLowerCase().includes("mm") ||
336
340
  resolvedDateFormat.toLowerCase().includes("ss");
337
341
  var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
338
- var _r = (0, react_1.useState)(selectedDate
342
+ var _s = (0, react_1.useState)(selectedDate
339
343
  ? disableToday && (0, date_fns_1.isSameDay)(selectedDate, today)
340
344
  ? tomorrow
341
345
  : selectedDate
342
346
  : disableToday
343
347
  ? tomorrow
344
- : today), currentMonth = _r[0], setCurrentMonth = _r[1];
345
- var _s = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _s[0], setTempDate = _s[1];
346
- var _t = (0, react_1.useState)(""), inputValue = _t[0], setInputValue = _t[1];
347
- var _u = (0, react_1.useState)(false), isTyping = _u[0], setIsTyping = _u[1];
348
- var _v = (0, react_1.useState)(false), isMaskActive = _v[0], setIsMaskActive = _v[1];
349
- var _w = (0, react_1.useState)(0), setCurrentSegmentIndex = _w[1];
348
+ : today), currentMonth = _s[0], setCurrentMonth = _s[1];
349
+ var _t = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _t[0], setTempDate = _t[1];
350
+ var _u = (0, react_1.useState)(""), inputValue = _u[0], setInputValue = _u[1];
351
+ var _v = (0, react_1.useState)(false), isTyping = _v[0], setIsTyping = _v[1];
352
+ var _w = (0, react_1.useState)(false), isMaskActive = _w[0], setIsMaskActive = _w[1];
353
+ var _x = (0, react_1.useState)(0), setCurrentSegmentIndex = _x[1];
350
354
  var lastSegmentIndexRef = (0, react_1.useRef)(0);
351
355
  var resetCommitGuardAndOpen = function () {
352
356
  didCommitRef.current = false;
@@ -952,8 +956,8 @@ var SingleDatePicker = function (props) {
952
956
  }, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false },
953
957
  react_1.default.createElement(react_2.PopoverTrigger, null,
954
958
  react_1.default.createElement(react_2.Box, { ref: triggerRef, as: "div" },
955
- react_1.default.createElement(react_2.InputGroup, null,
956
- react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : undefined, _focus: {
959
+ react_1.default.createElement(react_2.InputGroup, { size: sizeKey },
960
+ react_1.default.createElement(react_2.Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: displayPlaceholder, value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDownMask, onPaste: handlePasteMask, onBlur: handleInputBlur, onClick: handleInputClickMask, onFocus: handleInputFocusMask, isDisabled: disabled, autoComplete: autoComplete, borderColor: error ? (_c = (_b = theme.colors.semantic) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c[500] : undefined, _focus: {
957
961
  borderColor: error ? (_e = (_d = theme.colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[500] : theme.colors.primary[500],
958
962
  boxShadow: error
959
963
  ? "0 0 0 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
@@ -961,7 +965,7 @@ var SingleDatePicker = function (props) {
961
965
  }, _hover: {
962
966
  borderColor: error ? (_j = (_h = theme.colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[500] : undefined,
963
967
  }, cursor: "text", boxShadow: error ? "0 0 0 0.125rem ".concat((_k = theme.colors.boxShadow) === null || _k === void 0 ? void 0 : _k.error) : "" }),
964
- react_1.default.createElement(react_2.InputRightElement, { pr: 3, pointerEvents: "auto", onClick: function (e) {
968
+ react_1.default.createElement(react_2.InputRightElement, { pr: 3, height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", onClick: function (e) {
965
969
  e.stopPropagation();
966
970
  if (!isOpen) {
967
971
  handleOpen();
@@ -970,7 +974,8 @@ var SingleDatePicker = function (props) {
970
974
  onClose();
971
975
  }
972
976
  }, style: { cursor: "pointer" } },
973
- react_1.default.createElement(lucide_react_1.CalendarIcon, { size: 18, color: theme.colors.gray[500] }))))),
977
+ react_1.default.createElement(react_2.Box, { as: "span", sx: calendarIconWrapperSx },
978
+ react_1.default.createElement(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.gray[500] })))))),
974
979
  react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
975
980
  react_1.default.createElement(react_2.PopoverBody, null,
976
981
  showDate && (react_1.default.createElement(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: function (updater) { return setCurrentMonth(function (prev) { return updater(prev); }); }, today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })),
@@ -978,7 +983,7 @@ var SingleDatePicker = function (props) {
978
983
  setTempDate(updatedDate);
979
984
  setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
980
985
  setIsTyping(false);
981
- }, dateFormat: resolvedDateFormat, disabled: disabled, placeholder: placeholderText })) : (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: function (updatedDate) {
986
+ }, dateFormat: resolvedDateFormat, disabled: disabled, placeholder: placeholderText, size: sizeKey, error: error })) : (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : new Date((disableToday ? tomorrow : today).getFullYear(), (disableToday ? tomorrow : today).getMonth(), (disableToday ? tomorrow : today).getDate(), 0, 0, 0, 0), dateFormat: resolvedDateFormat, onChange: function (updatedDate) {
982
987
  setTempDate(updatedDate);
983
988
  setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
984
989
  setIsTyping(false);
package/dist/Components/DatePicker/TimeOnlyPicker.js CHANGED
@@ -50,15 +50,16 @@ var formatToPlaceholder = function (formatStr) {
50
50
  };
51
51
  var TimeOnlyPicker = function (props) {
52
52
  var _a;
53
- var id = props.id, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _b = props.dateFormat, dateFormat = _b === void 0 ? "HH:mm" : _b, disabled = props.disabled, _c = props.width, width = _c === void 0 ? "100%" : _c, _d = props.disableToday, disableToday = _d === void 0 ? false : _d;
54
- var _e = (0, react_2.useDisclosure)(), isOpen = _e.isOpen, onOpen = _e.onOpen, onClose = _e.onClose;
53
+ var id = props.id, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _b = props.dateFormat, dateFormat = _b === void 0 ? "HH:mm" : _b, disabled = props.disabled, _c = props.width, width = _c === void 0 ? "100%" : _c, _d = props.disableToday, disableToday = _d === void 0 ? false : _d, _e = props.size, size = _e === void 0 ? "md" : _e;
54
+ var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onOpen = _f.onOpen, onClose = _f.onClose;
55
55
  var popoverRef = (0, react_1.useRef)(null);
56
56
  var triggerRef = (0, react_1.useRef)(null);
57
57
  var inputWrapperRef = (0, react_1.useRef)(null);
58
58
  var today = new Date();
59
59
  var tomorrow = (0, date_fns_1.addDays)(today, 1);
60
+ var sizeKey = typeof size === "string" ? size : "md";
60
61
  var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
61
- var _f = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null), tempDate = _f[0], setTempDate = _f[1];
62
+ var _g = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null), tempDate = _g[0], setTempDate = _g[1];
62
63
  (0, react_1.useEffect)(function () {
63
64
  setTempDate(selectedDate ? new Date(selectedDate) : null);
64
65
  }, [selectedDate]);
@@ -114,7 +115,7 @@ var TimeOnlyPicker = function (props) {
114
115
  }, dateFormat: dateFormat, disabled: disabled, placeholder: placeholder, onFocus: function () {
115
116
  if (!disabled && !isOpen)
116
117
  onOpen();
117
- }, error: error })))),
118
+ }, error: error, size: sizeKey })))),
118
119
  react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg" },
119
120
  react_1.default.createElement(react_2.PopoverBody, null,
120
121
  react_1.default.createElement(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: function (updatedDate) {
package/dist/Components/DatePicker/TimePickerInput.d.ts CHANGED
@@ -8,6 +8,7 @@ interface TimePickerInputProps {
8
8
  onFocus?: () => void;
9
9
  onBlur?: () => void;
10
10
  error?: boolean;
11
+ size?: "xs" | "sm" | "md" | "lg";
11
12
  }
12
13
  export declare const TimePickerInput: React.FC<TimePickerInputProps>;
13
14
  export {};
package/dist/Components/DatePicker/TimePickerInput.js CHANGED
@@ -39,6 +39,7 @@ var react_2 = require("@chakra-ui/react");
39
39
  var date_fns_1 = require("date-fns");
40
40
  var lucide_react_1 = require("lucide-react");
41
41
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
42
+ var textInputIconSize_1 = require("../Input/textInputIconSize");
42
43
  var sanitizeDigits = function (input) { return input.replace(/\D/g, "").slice(0, 4); };
43
44
  var adjustDigits = function (digits, is12Hour) {
44
45
  var result = sanitizeDigits(digits);
@@ -125,18 +126,21 @@ var formatToPlaceholder = function (formatStr) {
125
126
  return formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
126
127
  };
127
128
  var TimePickerInput = function (_a) {
128
- var value = _a.value, onChange = _a.onChange, dateFormat = _a.dateFormat, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, onFocus = _a.onFocus, onBlur = _a.onBlur, error = _a.error;
129
+ var value = _a.value, onChange = _a.onChange, dateFormat = _a.dateFormat, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, onFocus = _a.onFocus, onBlur = _a.onBlur, error = _a.error, _c = _a.size, size = _c === void 0 ? "md" : _c;
129
130
  var theme = (0, useCustomTheme_1.useCustomTheme)();
131
+ var sizeKey = typeof size === "string" ? size : "md";
132
+ var iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
133
+ var iconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
130
134
  var inputRef = (0, react_1.useRef)(null);
131
- var _c = (0, react_1.useState)(""), digits = _c[0], setDigits = _c[1];
135
+ var _d = (0, react_1.useState)(""), digits = _d[0], setDigits = _d[1];
132
136
  var digitsRef = (0, react_1.useRef)("");
133
- var _d = (0, react_1.useState)(false), setIsFocused = _d[1];
137
+ var _e = (0, react_1.useState)(false), setIsFocused = _e[1];
134
138
  var isFocusedRef = (0, react_1.useRef)(false);
135
- var _e = (0, react_1.useState)("hour"), setActiveSegment = _e[1];
139
+ var _f = (0, react_1.useState)("hour"), setActiveSegment = _f[1];
136
140
  var is12Hour = (0, react_1.useMemo)(function () { return /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat); }, [dateFormat]);
137
141
  var placeholderText = (0, react_1.useMemo)(function () { return placeholder || formatToPlaceholder(dateFormat); }, [placeholder, dateFormat]);
138
142
  var ampmRef = (0, react_1.useRef)("AM");
139
- var _f = (0, react_1.useState)("AM"), ampm = _f[0], setAmpm = _f[1];
143
+ var _g = (0, react_1.useState)("AM"), ampm = _g[0], setAmpm = _g[1];
140
144
  var setInputValueAndCaret = (0, react_1.useCallback)(function (formatted, caretDigitIndex) {
141
145
  requestAnimationFrame(function () {
142
146
  var el = inputRef.current;
@@ -434,9 +438,10 @@ var TimePickerInput = function (_a) {
434
438
  inputRef.current.value = is12Hour && formatted ? "".concat(formatted, " ").concat(ampm) : formatted;
435
439
  }
436
440
  }, [digits, ampm, is12Hour]);
437
- return (react_1.default.createElement(react_2.InputGroup, null,
438
- react_1.default.createElement(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error }),
439
- react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none" },
440
- react_1.default.createElement(lucide_react_1.ClockIcon, { size: 18, color: theme.colors.gray[500] }))));
441
+ return (react_1.default.createElement(react_2.InputGroup, { size: sizeKey },
442
+ react_1.default.createElement(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey }),
443
+ react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center" },
444
+ react_1.default.createElement(react_2.Box, { as: "span", sx: iconWrapperSx },
445
+ react_1.default.createElement(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.gray[500] })))));
441
446
  };
442
447
  exports.TimePickerInput = TimePickerInput;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.150",
3
+ "version": "2.2.151",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",