@deepnoid/ui 0.0.90 → 0.0.91

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 (24) hide show
  1. package/dist/{chunk-N6IEGD4K.mjs → chunk-D5GGG7IO.mjs} +5 -2
  2. package/dist/{chunk-2ZFHB4JM.mjs → chunk-FWJ2ZKH6.mjs} +23 -12
  3. package/dist/{chunk-S2VUKVCH.mjs → chunk-HHYPMVLY.mjs} +50 -10
  4. package/dist/components/dateTimePicker/dateTimePicker.d.mts +2 -0
  5. package/dist/components/dateTimePicker/dateTimePicker.d.ts +2 -0
  6. package/dist/components/dateTimePicker/dateTimePicker.js +76 -22
  7. package/dist/components/dateTimePicker/dateTimePicker.mjs +3 -3
  8. package/dist/components/dateTimePicker/index.js +76 -22
  9. package/dist/components/dateTimePicker/index.mjs +3 -3
  10. package/dist/components/dateTimePicker/timePicker.d.mts +2 -1
  11. package/dist/components/dateTimePicker/timePicker.d.ts +2 -1
  12. package/dist/components/dateTimePicker/timePicker.js +5 -2
  13. package/dist/components/dateTimePicker/timePicker.mjs +1 -1
  14. package/dist/components/dateTimePicker/useDateTimePicker.d.mts +4 -1
  15. package/dist/components/dateTimePicker/useDateTimePicker.d.ts +4 -1
  16. package/dist/components/dateTimePicker/useDateTimePicker.js +23 -12
  17. package/dist/components/dateTimePicker/useDateTimePicker.mjs +1 -1
  18. package/dist/components/select/index.mjs +2 -2
  19. package/dist/components/select/select.mjs +2 -2
  20. package/dist/components/select/select.test.mjs +2 -2
  21. package/dist/index.js +76 -22
  22. package/dist/index.mjs +9 -9
  23. package/package.json +1 -1
  24. package/dist/{chunk-2BCJZILI.mjs → chunk-JN7EGKJL.mjs} +3 -3
package/dist/{chunk-N6IEGD4K.mjs → chunk-D5GGG7IO.mjs} RENAMED
@@ -9,7 +9,7 @@ import {
9
9
  // src/components/dateTimePicker/timePicker.tsx
10
10
  import { useState, useRef, useEffect } from "react";
11
11
  import { jsx, jsxs } from "react/jsx-runtime";
12
- var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
12
+ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
13
13
  const TOTAL_HOURS = 12;
14
14
  const TOTAL_MINUTES = 60;
15
15
  const ITEM_HEIGHT = 30;
@@ -29,7 +29,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
29
29
  setSelectedMinute(minute);
30
30
  setSelectedPeriod(period);
31
31
  }
32
- }, [selectedTime]);
32
+ if (isFocusInput) {
33
+ scrollToSelectedTime();
34
+ }
35
+ }, [selectedTime, isFocusInput]);
33
36
  useEffect(() => {
34
37
  scrollToSelectedTime();
35
38
  }, []);
package/dist/{chunk-2ZFHB4JM.mjs → chunk-FWJ2ZKH6.mjs} RENAMED
@@ -13,21 +13,23 @@ var useDatePicker = ({ initialDate, initialTime }) => {
13
13
  const [targetRect, setTargetRect] = useState(null);
14
14
  const [popupWidth, setPopupWidth] = useState(0);
15
15
  const [popupHeight, setPopupHeight] = useState(0);
16
+ const [isFocusInput, setIsFocusInput] = useState(false);
16
17
  const dateInputRef = useRef(null);
17
18
  const datePickerWrapperRef = useRef(null);
18
19
  const datePickerRef = useRef(null);
19
- const dataPickerGap = 4;
20
- const calculatePositionWithScroll = (targetRect2, popupHeight2) => {
21
- if (popupWidth === 0 || popupHeight2 === 0) return;
22
- const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
23
- const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
24
- const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + dataPickerGap);
25
- const spaceAbove = targetRect2.y - dataPickerGap;
26
- const top = spaceBelow < popupHeight2 && spaceAbove > popupHeight2 ? targetRect2.y - popupHeight2 - dataPickerGap : targetRect2.y + targetRect2.height + dataPickerGap;
27
- return {
28
- top: top + scrollTop,
29
- left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
30
- };
20
+ const DATE_PICKER_GAP = 4;
21
+ const calculatePositionWithScroll = (targetRect2) => {
22
+ if (targetRect2 && popupWidth && popupHeight) {
23
+ const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
24
+ const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
25
+ const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
26
+ const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
27
+ const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
28
+ return {
29
+ top: top + scrollTop,
30
+ left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
31
+ };
32
+ }
31
33
  };
32
34
  const handleToggleDatePicker = () => {
33
35
  if (datePickerRef.current) {
@@ -41,6 +43,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
41
43
  const handleChangeTime = (time) => {
42
44
  setSelectedTime(time);
43
45
  };
46
+ const handleFocusInput = () => {
47
+ setIsFocusInput(true);
48
+ };
49
+ const handleBlueInput = () => {
50
+ setIsFocusInput(false);
51
+ };
44
52
  useEffect(() => {
45
53
  const onClickOutside = (e) => {
46
54
  if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
@@ -61,12 +69,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
61
69
  selectedTime,
62
70
  targetRect,
63
71
  popupHeight,
72
+ isFocusInput,
64
73
  dateInputRef,
65
74
  datePickerWrapperRef,
66
75
  datePickerRef,
67
76
  handleToggleDatePicker,
68
77
  handleChangeDate,
69
78
  handleChangeTime,
79
+ handleFocusInput,
80
+ handleBlueInput,
70
81
  calculatePositionWithScroll
71
82
  };
72
83
  };
package/dist/{chunk-S2VUKVCH.mjs → chunk-HHYPMVLY.mjs} RENAMED
@@ -1,13 +1,13 @@
1
1
  "use client";
2
2
  import {
3
3
  useDatePicker
4
- } from "./chunk-2ZFHB4JM.mjs";
4
+ } from "./chunk-FWJ2ZKH6.mjs";
5
5
  import {
6
6
  calendar_default
7
7
  } from "./chunk-WX32MAKV.mjs";
8
8
  import {
9
9
  timePicker_default
10
- } from "./chunk-N6IEGD4K.mjs";
10
+ } from "./chunk-D5GGG7IO.mjs";
11
11
  import {
12
12
  Icon_default
13
13
  } from "./chunk-LCI6RPWE.mjs";
@@ -24,24 +24,38 @@ import { createPortal } from "react-dom";
24
24
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
25
25
  var DatePicker = forwardRef((originalProps, ref) => {
26
26
  const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
27
- const { classNames, label, errorMessage, startContent, endContent, type = "date", ...inputProps } = props;
27
+ const {
28
+ classNames,
29
+ label,
30
+ errorMessage,
31
+ startContent,
32
+ endContent,
33
+ type = "date",
34
+ value,
35
+ onChangeDate,
36
+ onChangeTime,
37
+ ...inputProps
38
+ } = props;
28
39
  const slots = useMemo(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
29
40
  const {
30
41
  selectedDate,
31
42
  selectedTime,
32
43
  targetRect,
33
44
  popupHeight,
45
+ isFocusInput,
34
46
  datePickerRef,
35
47
  dateInputRef,
36
48
  datePickerWrapperRef,
37
49
  handleToggleDatePicker,
38
50
  handleChangeDate,
39
51
  handleChangeTime,
52
+ handleFocusInput,
53
+ handleBlueInput,
40
54
  calculatePositionWithScroll
41
55
  } = useDatePicker({
42
56
  initialDate: void 0
43
57
  });
44
- const position = targetRect ? calculatePositionWithScroll(targetRect, popupHeight) : null;
58
+ const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
45
59
  const getBaseProps = useCallback(
46
60
  () => ({
47
61
  className: slots.base({ class: classNames == null ? void 0 : classNames.base })
@@ -74,17 +88,29 @@ var DatePicker = forwardRef((originalProps, ref) => {
74
88
  className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
75
89
  size: 0,
76
90
  type,
77
- value: type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
91
+ value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
78
92
  onChange: (e) => {
79
93
  if (type === "date") {
80
94
  handleChangeDate(e.target.value);
95
+ if (onChangeDate) {
96
+ onChangeDate(e.target.value);
97
+ }
81
98
  } else if (type === "time") {
82
99
  handleChangeTime(e.target.value);
100
+ if (onChangeTime) {
101
+ onChangeTime(e.target.value);
102
+ }
83
103
  }
84
104
  },
105
+ onFocus: (e) => {
106
+ handleFocusInput();
107
+ },
108
+ onBlur: (e) => {
109
+ handleBlueInput();
110
+ },
85
111
  max: "9999-12-31"
86
112
  }),
87
- [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate]
113
+ [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
88
114
  );
89
115
  const getContentProps = useCallback(
90
116
  () => ({
@@ -167,8 +193,8 @@ var DatePicker = forwardRef((originalProps, ref) => {
167
193
  ref: datePickerWrapperRef,
168
194
  style: {
169
195
  position: "absolute",
170
- top: position == null ? void 0 : position.top,
171
- left: position == null ? void 0 : position.left,
196
+ top: (position == null ? void 0 : position.top) || -99999,
197
+ left: (position == null ? void 0 : position.left) || -99999,
172
198
  zIndex: 1e3
173
199
  },
174
200
  children: [
@@ -178,10 +204,24 @@ var DatePicker = forwardRef((originalProps, ref) => {
178
204
  color: originalProps.color,
179
205
  selectedDate,
180
206
  highlightWeekend: originalProps.highlightWeekend,
181
- onChangeDate: handleChangeDate
207
+ onChangeDate: (date) => {
208
+ handleChangeDate(date);
209
+ if (onChangeDate) onChangeDate(date);
210
+ }
182
211
  }
183
212
  ),
184
- type === "time" && /* @__PURE__ */ jsx(timePicker_default, { color: originalProps.color, selectedTime, onChangeTime: handleChangeTime })
213
+ type === "time" && /* @__PURE__ */ jsx(
214
+ timePicker_default,
215
+ {
216
+ color: originalProps.color,
217
+ selectedTime,
218
+ isFocusInput,
219
+ onChangeTime: (time) => {
220
+ handleChangeTime(time);
221
+ if (onChangeTime) onChangeTime(time);
222
+ }
223
+ }
224
+ )
185
225
  ]
186
226
  }
187
227
  ),
package/dist/components/dateTimePicker/dateTimePicker.d.mts CHANGED
@@ -17,6 +17,8 @@ interface Props extends Omit<ComponentProps<"input">, "size"> {
17
17
  size?: "sm" | "md" | "lg";
18
18
  }> | string;
19
19
  classNames?: SlotsToClasses<DateTimePickerSlots>;
20
+ onChangeDate?: (date: string) => void;
21
+ onChangeTime?: (time: string) => void;
20
22
  }
21
23
  type DateTimePickerProps = Props & DateTimePickerVariantProps;
22
24
  declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<DateTimePickerProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
package/dist/components/dateTimePicker/dateTimePicker.d.ts CHANGED
@@ -17,6 +17,8 @@ interface Props extends Omit<ComponentProps<"input">, "size"> {
17
17
  size?: "sm" | "md" | "lg";
18
18
  }> | string;
19
19
  classNames?: SlotsToClasses<DateTimePickerSlots>;
20
+ onChangeDate?: (date: string) => void;
21
+ onChangeTime?: (time: string) => void;
20
22
  }
21
23
  type DateTimePickerProps = Props & DateTimePickerVariantProps;
22
24
  declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<DateTimePickerProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
package/dist/components/dateTimePicker/dateTimePicker.js CHANGED
@@ -101,21 +101,23 @@ var useDatePicker = ({ initialDate, initialTime }) => {
101
101
  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
102
102
  const [popupWidth, setPopupWidth] = (0, import_react.useState)(0);
103
103
  const [popupHeight, setPopupHeight] = (0, import_react.useState)(0);
104
+ const [isFocusInput, setIsFocusInput] = (0, import_react.useState)(false);
104
105
  const dateInputRef = (0, import_react.useRef)(null);
105
106
  const datePickerWrapperRef = (0, import_react.useRef)(null);
106
107
  const datePickerRef = (0, import_react.useRef)(null);
107
- const dataPickerGap = 4;
108
- const calculatePositionWithScroll = (targetRect2, popupHeight2) => {
109
- if (popupWidth === 0 || popupHeight2 === 0) return;
110
- const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
111
- const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
112
- const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + dataPickerGap);
113
- const spaceAbove = targetRect2.y - dataPickerGap;
114
- const top = spaceBelow < popupHeight2 && spaceAbove > popupHeight2 ? targetRect2.y - popupHeight2 - dataPickerGap : targetRect2.y + targetRect2.height + dataPickerGap;
115
- return {
116
- top: top + scrollTop,
117
- left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
118
- };
108
+ const DATE_PICKER_GAP = 4;
109
+ const calculatePositionWithScroll = (targetRect2) => {
110
+ if (targetRect2 && popupWidth && popupHeight) {
111
+ const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
112
+ const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
113
+ const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
114
+ const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
115
+ const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
116
+ return {
117
+ top: top + scrollTop,
118
+ left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
119
+ };
120
+ }
119
121
  };
120
122
  const handleToggleDatePicker = () => {
121
123
  if (datePickerRef.current) {
@@ -129,6 +131,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
129
131
  const handleChangeTime = (time) => {
130
132
  setSelectedTime(time);
131
133
  };
134
+ const handleFocusInput = () => {
135
+ setIsFocusInput(true);
136
+ };
137
+ const handleBlueInput = () => {
138
+ setIsFocusInput(false);
139
+ };
132
140
  (0, import_react.useEffect)(() => {
133
141
  const onClickOutside = (e) => {
134
142
  if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
@@ -149,12 +157,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
149
157
  selectedTime,
150
158
  targetRect,
151
159
  popupHeight,
160
+ isFocusInput,
152
161
  dateInputRef,
153
162
  datePickerWrapperRef,
154
163
  datePickerRef,
155
164
  handleToggleDatePicker,
156
165
  handleChangeDate,
157
166
  handleChangeTime,
167
+ handleFocusInput,
168
+ handleBlueInput,
158
169
  calculatePositionWithScroll
159
170
  };
160
171
  };
@@ -4083,7 +4094,7 @@ var listItem = tv({
4083
4094
 
4084
4095
  // src/components/dateTimePicker/timePicker.tsx
4085
4096
  var import_jsx_runtime6 = require("react/jsx-runtime");
4086
- var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
4097
+ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
4087
4098
  const TOTAL_HOURS = 12;
4088
4099
  const TOTAL_MINUTES = 60;
4089
4100
  const ITEM_HEIGHT = 30;
@@ -4103,7 +4114,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
4103
4114
  setSelectedMinute(minute);
4104
4115
  setSelectedPeriod(period);
4105
4116
  }
4106
- }, [selectedTime]);
4117
+ if (isFocusInput) {
4118
+ scrollToSelectedTime();
4119
+ }
4120
+ }, [selectedTime, isFocusInput]);
4107
4121
  (0, import_react5.useEffect)(() => {
4108
4122
  scrollToSelectedTime();
4109
4123
  }, []);
@@ -4192,24 +4206,38 @@ var timePicker_default = TimePicker;
4192
4206
  var import_jsx_runtime7 = require("react/jsx-runtime");
4193
4207
  var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
4194
4208
  const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
4195
- const { classNames, label, errorMessage, startContent, endContent, type = "date", ...inputProps } = props;
4209
+ const {
4210
+ classNames,
4211
+ label,
4212
+ errorMessage,
4213
+ startContent,
4214
+ endContent,
4215
+ type = "date",
4216
+ value,
4217
+ onChangeDate,
4218
+ onChangeTime,
4219
+ ...inputProps
4220
+ } = props;
4196
4221
  const slots = (0, import_react6.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
4197
4222
  const {
4198
4223
  selectedDate,
4199
4224
  selectedTime,
4200
4225
  targetRect,
4201
4226
  popupHeight,
4227
+ isFocusInput,
4202
4228
  datePickerRef,
4203
4229
  dateInputRef,
4204
4230
  datePickerWrapperRef,
4205
4231
  handleToggleDatePicker,
4206
4232
  handleChangeDate,
4207
4233
  handleChangeTime,
4234
+ handleFocusInput,
4235
+ handleBlueInput,
4208
4236
  calculatePositionWithScroll
4209
4237
  } = useDatePicker({
4210
4238
  initialDate: void 0
4211
4239
  });
4212
- const position = targetRect ? calculatePositionWithScroll(targetRect, popupHeight) : null;
4240
+ const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
4213
4241
  const getBaseProps = (0, import_react6.useCallback)(
4214
4242
  () => ({
4215
4243
  className: slots.base({ class: classNames == null ? void 0 : classNames.base })
@@ -4242,17 +4270,29 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
4242
4270
  className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
4243
4271
  size: 0,
4244
4272
  type,
4245
- value: type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
4273
+ value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
4246
4274
  onChange: (e) => {
4247
4275
  if (type === "date") {
4248
4276
  handleChangeDate(e.target.value);
4277
+ if (onChangeDate) {
4278
+ onChangeDate(e.target.value);
4279
+ }
4249
4280
  } else if (type === "time") {
4250
4281
  handleChangeTime(e.target.value);
4282
+ if (onChangeTime) {
4283
+ onChangeTime(e.target.value);
4284
+ }
4251
4285
  }
4252
4286
  },
4287
+ onFocus: (e) => {
4288
+ handleFocusInput();
4289
+ },
4290
+ onBlur: (e) => {
4291
+ handleBlueInput();
4292
+ },
4253
4293
  max: "9999-12-31"
4254
4294
  }),
4255
- [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate]
4295
+ [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
4256
4296
  );
4257
4297
  const getContentProps = (0, import_react6.useCallback)(
4258
4298
  () => ({
@@ -4335,8 +4375,8 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
4335
4375
  ref: datePickerWrapperRef,
4336
4376
  style: {
4337
4377
  position: "absolute",
4338
- top: position == null ? void 0 : position.top,
4339
- left: position == null ? void 0 : position.left,
4378
+ top: (position == null ? void 0 : position.top) || -99999,
4379
+ left: (position == null ? void 0 : position.left) || -99999,
4340
4380
  zIndex: 1e3
4341
4381
  },
4342
4382
  children: [
@@ -4346,10 +4386,24 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
4346
4386
  color: originalProps.color,
4347
4387
  selectedDate,
4348
4388
  highlightWeekend: originalProps.highlightWeekend,
4349
- onChangeDate: handleChangeDate
4389
+ onChangeDate: (date) => {
4390
+ handleChangeDate(date);
4391
+ if (onChangeDate) onChangeDate(date);
4392
+ }
4350
4393
  }
4351
4394
  ),
4352
- type === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(timePicker_default, { color: originalProps.color, selectedTime, onChangeTime: handleChangeTime })
4395
+ type === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4396
+ timePicker_default,
4397
+ {
4398
+ color: originalProps.color,
4399
+ selectedTime,
4400
+ isFocusInput,
4401
+ onChangeTime: (time) => {
4402
+ handleChangeTime(time);
4403
+ if (onChangeTime) onChangeTime(time);
4404
+ }
4405
+ }
4406
+ )
4353
4407
  ]
4354
4408
  }
4355
4409
  ),
package/dist/components/dateTimePicker/dateTimePicker.mjs CHANGED
@@ -2,11 +2,11 @@
2
2
  import {
3
3
  dateTimePickerStyle,
4
4
  dateTimePicker_default
5
- } from "../../chunk-S2VUKVCH.mjs";
6
- import "../../chunk-2ZFHB4JM.mjs";
5
+ } from "../../chunk-HHYPMVLY.mjs";
6
+ import "../../chunk-FWJ2ZKH6.mjs";
7
7
  import "../../chunk-WX32MAKV.mjs";
8
8
  import "../../chunk-P732YGHO.mjs";
9
- import "../../chunk-N6IEGD4K.mjs";
9
+ import "../../chunk-D5GGG7IO.mjs";
10
10
  import "../../chunk-7MVEAQ7Z.mjs";
11
11
  import "../../chunk-EYY4CRRR.mjs";
12
12
  import "../../chunk-EDEV4IK4.mjs";
package/dist/components/dateTimePicker/index.js CHANGED
@@ -102,21 +102,23 @@ var useDatePicker = ({ initialDate, initialTime }) => {
102
102
  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
103
103
  const [popupWidth, setPopupWidth] = (0, import_react.useState)(0);
104
104
  const [popupHeight, setPopupHeight] = (0, import_react.useState)(0);
105
+ const [isFocusInput, setIsFocusInput] = (0, import_react.useState)(false);
105
106
  const dateInputRef = (0, import_react.useRef)(null);
106
107
  const datePickerWrapperRef = (0, import_react.useRef)(null);
107
108
  const datePickerRef = (0, import_react.useRef)(null);
108
- const dataPickerGap = 4;
109
- const calculatePositionWithScroll = (targetRect2, popupHeight2) => {
110
- if (popupWidth === 0 || popupHeight2 === 0) return;
111
- const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
112
- const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
113
- const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + dataPickerGap);
114
- const spaceAbove = targetRect2.y - dataPickerGap;
115
- const top = spaceBelow < popupHeight2 && spaceAbove > popupHeight2 ? targetRect2.y - popupHeight2 - dataPickerGap : targetRect2.y + targetRect2.height + dataPickerGap;
116
- return {
117
- top: top + scrollTop,
118
- left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
119
- };
109
+ const DATE_PICKER_GAP = 4;
110
+ const calculatePositionWithScroll = (targetRect2) => {
111
+ if (targetRect2 && popupWidth && popupHeight) {
112
+ const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
113
+ const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
114
+ const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
115
+ const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
116
+ const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
117
+ return {
118
+ top: top + scrollTop,
119
+ left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
120
+ };
121
+ }
120
122
  };
121
123
  const handleToggleDatePicker = () => {
122
124
  if (datePickerRef.current) {
@@ -130,6 +132,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
130
132
  const handleChangeTime = (time) => {
131
133
  setSelectedTime(time);
132
134
  };
135
+ const handleFocusInput = () => {
136
+ setIsFocusInput(true);
137
+ };
138
+ const handleBlueInput = () => {
139
+ setIsFocusInput(false);
140
+ };
133
141
  (0, import_react.useEffect)(() => {
134
142
  const onClickOutside = (e) => {
135
143
  if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
@@ -150,12 +158,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
150
158
  selectedTime,
151
159
  targetRect,
152
160
  popupHeight,
161
+ isFocusInput,
153
162
  dateInputRef,
154
163
  datePickerWrapperRef,
155
164
  datePickerRef,
156
165
  handleToggleDatePicker,
157
166
  handleChangeDate,
158
167
  handleChangeTime,
168
+ handleFocusInput,
169
+ handleBlueInput,
159
170
  calculatePositionWithScroll
160
171
  };
161
172
  };
@@ -4084,7 +4095,7 @@ var listItem = tv({
4084
4095
 
4085
4096
  // src/components/dateTimePicker/timePicker.tsx
4086
4097
  var import_jsx_runtime6 = require("react/jsx-runtime");
4087
- var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
4098
+ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
4088
4099
  const TOTAL_HOURS = 12;
4089
4100
  const TOTAL_MINUTES = 60;
4090
4101
  const ITEM_HEIGHT = 30;
@@ -4104,7 +4115,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
4104
4115
  setSelectedMinute(minute);
4105
4116
  setSelectedPeriod(period);
4106
4117
  }
4107
- }, [selectedTime]);
4118
+ if (isFocusInput) {
4119
+ scrollToSelectedTime();
4120
+ }
4121
+ }, [selectedTime, isFocusInput]);
4108
4122
  (0, import_react5.useEffect)(() => {
4109
4123
  scrollToSelectedTime();
4110
4124
  }, []);
@@ -4193,24 +4207,38 @@ var timePicker_default = TimePicker;
4193
4207
  var import_jsx_runtime7 = require("react/jsx-runtime");
4194
4208
  var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
4195
4209
  const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
4196
- const { classNames, label, errorMessage, startContent, endContent, type = "date", ...inputProps } = props;
4210
+ const {
4211
+ classNames,
4212
+ label,
4213
+ errorMessage,
4214
+ startContent,
4215
+ endContent,
4216
+ type = "date",
4217
+ value,
4218
+ onChangeDate,
4219
+ onChangeTime,
4220
+ ...inputProps
4221
+ } = props;
4197
4222
  const slots = (0, import_react6.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
4198
4223
  const {
4199
4224
  selectedDate,
4200
4225
  selectedTime,
4201
4226
  targetRect,
4202
4227
  popupHeight,
4228
+ isFocusInput,
4203
4229
  datePickerRef,
4204
4230
  dateInputRef,
4205
4231
  datePickerWrapperRef,
4206
4232
  handleToggleDatePicker,
4207
4233
  handleChangeDate,
4208
4234
  handleChangeTime,
4235
+ handleFocusInput,
4236
+ handleBlueInput,
4209
4237
  calculatePositionWithScroll
4210
4238
  } = useDatePicker({
4211
4239
  initialDate: void 0
4212
4240
  });
4213
- const position = targetRect ? calculatePositionWithScroll(targetRect, popupHeight) : null;
4241
+ const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
4214
4242
  const getBaseProps = (0, import_react6.useCallback)(
4215
4243
  () => ({
4216
4244
  className: slots.base({ class: classNames == null ? void 0 : classNames.base })
@@ -4243,17 +4271,29 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
4243
4271
  className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
4244
4272
  size: 0,
4245
4273
  type,
4246
- value: type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
4274
+ value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
4247
4275
  onChange: (e) => {
4248
4276
  if (type === "date") {
4249
4277
  handleChangeDate(e.target.value);
4278
+ if (onChangeDate) {
4279
+ onChangeDate(e.target.value);
4280
+ }
4250
4281
  } else if (type === "time") {
4251
4282
  handleChangeTime(e.target.value);
4283
+ if (onChangeTime) {
4284
+ onChangeTime(e.target.value);
4285
+ }
4252
4286
  }
4253
4287
  },
4288
+ onFocus: (e) => {
4289
+ handleFocusInput();
4290
+ },
4291
+ onBlur: (e) => {
4292
+ handleBlueInput();
4293
+ },
4254
4294
  max: "9999-12-31"
4255
4295
  }),
4256
- [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate]
4296
+ [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
4257
4297
  );
4258
4298
  const getContentProps = (0, import_react6.useCallback)(
4259
4299
  () => ({
@@ -4336,8 +4376,8 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
4336
4376
  ref: datePickerWrapperRef,
4337
4377
  style: {
4338
4378
  position: "absolute",
4339
- top: position == null ? void 0 : position.top,
4340
- left: position == null ? void 0 : position.left,
4379
+ top: (position == null ? void 0 : position.top) || -99999,
4380
+ left: (position == null ? void 0 : position.left) || -99999,
4341
4381
  zIndex: 1e3
4342
4382
  },
4343
4383
  children: [
@@ -4347,10 +4387,24 @@ var DatePicker = (0, import_react6.forwardRef)((originalProps, ref) => {
4347
4387
  color: originalProps.color,
4348
4388
  selectedDate,
4349
4389
  highlightWeekend: originalProps.highlightWeekend,
4350
- onChangeDate: handleChangeDate
4390
+ onChangeDate: (date) => {
4391
+ handleChangeDate(date);
4392
+ if (onChangeDate) onChangeDate(date);
4393
+ }
4351
4394
  }
4352
4395
  ),
4353
- type === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(timePicker_default, { color: originalProps.color, selectedTime, onChangeTime: handleChangeTime })
4396
+ type === "time" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4397
+ timePicker_default,
4398
+ {
4399
+ color: originalProps.color,
4400
+ selectedTime,
4401
+ isFocusInput,
4402
+ onChangeTime: (time) => {
4403
+ handleChangeTime(time);
4404
+ if (onChangeTime) onChangeTime(time);
4405
+ }
4406
+ }
4407
+ )
4354
4408
  ]
4355
4409
  }
4356
4410
  ),
package/dist/components/dateTimePicker/index.mjs CHANGED
@@ -2,11 +2,11 @@
2
2
  import "../../chunk-75HLCORR.mjs";
3
3
  import {
4
4
  dateTimePicker_default
5
- } from "../../chunk-S2VUKVCH.mjs";
6
- import "../../chunk-2ZFHB4JM.mjs";
5
+ } from "../../chunk-HHYPMVLY.mjs";
6
+ import "../../chunk-FWJ2ZKH6.mjs";
7
7
  import "../../chunk-WX32MAKV.mjs";
8
8
  import "../../chunk-P732YGHO.mjs";
9
- import "../../chunk-N6IEGD4K.mjs";
9
+ import "../../chunk-D5GGG7IO.mjs";
10
10
  import "../../chunk-7MVEAQ7Z.mjs";
11
11
  import "../../chunk-EYY4CRRR.mjs";
12
12
  import "../../chunk-EDEV4IK4.mjs";
package/dist/components/dateTimePicker/timePicker.d.mts CHANGED
@@ -3,8 +3,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
  interface Props {
4
4
  color?: "primary" | "secondary";
5
5
  selectedTime?: string;
6
+ isFocusInput?: boolean;
6
7
  onChangeTime?: (time: string) => void;
7
8
  }
8
- declare const TimePicker: ({ color, selectedTime, onChangeTime }: Props) => react_jsx_runtime.JSX.Element;
9
+ declare const TimePicker: ({ color, selectedTime, isFocusInput, onChangeTime }: Props) => react_jsx_runtime.JSX.Element;
9
10
 
10
11
  export { type Props, TimePicker as default };
package/dist/components/dateTimePicker/timePicker.d.ts CHANGED
@@ -3,8 +3,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
3
3
  interface Props {
4
4
  color?: "primary" | "secondary";
5
5
  selectedTime?: string;
6
+ isFocusInput?: boolean;
6
7
  onChangeTime?: (time: string) => void;
7
8
  }
8
- declare const TimePicker: ({ color, selectedTime, onChangeTime }: Props) => react_jsx_runtime.JSX.Element;
9
+ declare const TimePicker: ({ color, selectedTime, isFocusInput, onChangeTime }: Props) => react_jsx_runtime.JSX.Element;
9
10
 
10
11
  export { type Props, TimePicker as default };
package/dist/components/dateTimePicker/timePicker.js CHANGED
@@ -236,7 +236,7 @@ var listItem = tv({
236
236
 
237
237
  // src/components/dateTimePicker/timePicker.tsx
238
238
  var import_jsx_runtime3 = require("react/jsx-runtime");
239
- var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
239
+ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
240
240
  const TOTAL_HOURS = 12;
241
241
  const TOTAL_MINUTES = 60;
242
242
  const ITEM_HEIGHT = 30;
@@ -256,7 +256,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
256
256
  setSelectedMinute(minute);
257
257
  setSelectedPeriod(period);
258
258
  }
259
- }, [selectedTime]);
259
+ if (isFocusInput) {
260
+ scrollToSelectedTime();
261
+ }
262
+ }, [selectedTime, isFocusInput]);
260
263
  (0, import_react3.useEffect)(() => {
261
264
  scrollToSelectedTime();
262
265
  }, []);
package/dist/components/dateTimePicker/timePicker.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  timePicker_default
4
- } from "../../chunk-N6IEGD4K.mjs";
4
+ } from "../../chunk-D5GGG7IO.mjs";
5
5
  import "../../chunk-7MVEAQ7Z.mjs";
6
6
  import "../../chunk-EYY4CRRR.mjs";
7
7
  import "../../chunk-EDEV4IK4.mjs";
package/dist/components/dateTimePicker/useDateTimePicker.d.mts CHANGED
@@ -16,13 +16,16 @@ declare const useDatePicker: ({ initialDate, initialTime }: DatePickerHookProps)
16
16
  selectedTime: string | undefined;
17
17
  targetRect: TargetRect | null;
18
18
  popupHeight: number;
19
+ isFocusInput: boolean;
19
20
  dateInputRef: React.RefObject<HTMLInputElement>;
20
21
  datePickerWrapperRef: React.RefObject<HTMLDivElement>;
21
22
  datePickerRef: React.RefObject<HTMLDivElement>;
22
23
  handleToggleDatePicker: () => void;
23
24
  handleChangeDate: (date: string) => void;
24
25
  handleChangeTime: (time: string) => void;
25
- calculatePositionWithScroll: (targetRect: TargetRect, popupHeight: number) => {
26
+ handleFocusInput: () => void;
27
+ handleBlueInput: () => void;
28
+ calculatePositionWithScroll: (targetRect: TargetRect) => {
26
29
  top: number;
27
30
  left: number;
28
31
  } | undefined;
package/dist/components/dateTimePicker/useDateTimePicker.d.ts CHANGED
@@ -16,13 +16,16 @@ declare const useDatePicker: ({ initialDate, initialTime }: DatePickerHookProps)
16
16
  selectedTime: string | undefined;
17
17
  targetRect: TargetRect | null;
18
18
  popupHeight: number;
19
+ isFocusInput: boolean;
19
20
  dateInputRef: React.RefObject<HTMLInputElement>;
20
21
  datePickerWrapperRef: React.RefObject<HTMLDivElement>;
21
22
  datePickerRef: React.RefObject<HTMLDivElement>;
22
23
  handleToggleDatePicker: () => void;
23
24
  handleChangeDate: (date: string) => void;
24
25
  handleChangeTime: (time: string) => void;
25
- calculatePositionWithScroll: (targetRect: TargetRect, popupHeight: number) => {
26
+ handleFocusInput: () => void;
27
+ handleBlueInput: () => void;
28
+ calculatePositionWithScroll: (targetRect: TargetRect) => {
26
29
  top: number;
27
30
  left: number;
28
31
  } | undefined;
package/dist/components/dateTimePicker/useDateTimePicker.js CHANGED
@@ -43,21 +43,23 @@ var useDatePicker = ({ initialDate, initialTime }) => {
43
43
  const [targetRect, setTargetRect] = (0, import_react.useState)(null);
44
44
  const [popupWidth, setPopupWidth] = (0, import_react.useState)(0);
45
45
  const [popupHeight, setPopupHeight] = (0, import_react.useState)(0);
46
+ const [isFocusInput, setIsFocusInput] = (0, import_react.useState)(false);
46
47
  const dateInputRef = (0, import_react.useRef)(null);
47
48
  const datePickerWrapperRef = (0, import_react.useRef)(null);
48
49
  const datePickerRef = (0, import_react.useRef)(null);
49
- const dataPickerGap = 4;
50
- const calculatePositionWithScroll = (targetRect2, popupHeight2) => {
51
- if (popupWidth === 0 || popupHeight2 === 0) return;
52
- const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
53
- const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
54
- const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + dataPickerGap);
55
- const spaceAbove = targetRect2.y - dataPickerGap;
56
- const top = spaceBelow < popupHeight2 && spaceAbove > popupHeight2 ? targetRect2.y - popupHeight2 - dataPickerGap : targetRect2.y + targetRect2.height + dataPickerGap;
57
- return {
58
- top: top + scrollTop,
59
- left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
60
- };
50
+ const DATE_PICKER_GAP = 4;
51
+ const calculatePositionWithScroll = (targetRect2) => {
52
+ if (targetRect2 && popupWidth && popupHeight) {
53
+ const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
54
+ const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
55
+ const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
56
+ const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
57
+ const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
58
+ return {
59
+ top: top + scrollTop,
60
+ left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
61
+ };
62
+ }
61
63
  };
62
64
  const handleToggleDatePicker = () => {
63
65
  if (datePickerRef.current) {
@@ -71,6 +73,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
71
73
  const handleChangeTime = (time) => {
72
74
  setSelectedTime(time);
73
75
  };
76
+ const handleFocusInput = () => {
77
+ setIsFocusInput(true);
78
+ };
79
+ const handleBlueInput = () => {
80
+ setIsFocusInput(false);
81
+ };
74
82
  (0, import_react.useEffect)(() => {
75
83
  const onClickOutside = (e) => {
76
84
  if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
@@ -91,12 +99,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
91
99
  selectedTime,
92
100
  targetRect,
93
101
  popupHeight,
102
+ isFocusInput,
94
103
  dateInputRef,
95
104
  datePickerWrapperRef,
96
105
  datePickerRef,
97
106
  handleToggleDatePicker,
98
107
  handleChangeDate,
99
108
  handleChangeTime,
109
+ handleFocusInput,
110
+ handleBlueInput,
100
111
  calculatePositionWithScroll
101
112
  };
102
113
  };
package/dist/components/dateTimePicker/useDateTimePicker.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useDatePicker
4
- } from "../../chunk-2ZFHB4JM.mjs";
4
+ } from "../../chunk-FWJ2ZKH6.mjs";
5
5
  import "../../chunk-P732YGHO.mjs";
6
6
  import "../../chunk-IZ6II3QA.mjs";
7
7
  export {
package/dist/components/select/index.mjs CHANGED
@@ -2,9 +2,9 @@
2
2
  import "../../chunk-QCEKPS7U.mjs";
3
3
  import {
4
4
  select_default
5
- } from "../../chunk-2BCJZILI.mjs";
6
- import "../../chunk-S3QS5B7F.mjs";
5
+ } from "../../chunk-JN7EGKJL.mjs";
7
6
  import "../../chunk-RZZWHI6O.mjs";
7
+ import "../../chunk-S3QS5B7F.mjs";
8
8
  import "../../chunk-ZYIIXWVY.mjs";
9
9
  import "../../chunk-LCI6RPWE.mjs";
10
10
  import "../../chunk-IOCRFIQF.mjs";
package/dist/components/select/select.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
  import {
3
3
  select_default
4
- } from "../../chunk-2BCJZILI.mjs";
5
- import "../../chunk-S3QS5B7F.mjs";
4
+ } from "../../chunk-JN7EGKJL.mjs";
6
5
  import "../../chunk-RZZWHI6O.mjs";
6
+ import "../../chunk-S3QS5B7F.mjs";
7
7
  import "../../chunk-ZYIIXWVY.mjs";
8
8
  import "../../chunk-LCI6RPWE.mjs";
9
9
  import "../../chunk-IOCRFIQF.mjs";
package/dist/components/select/select.test.mjs CHANGED
@@ -4,9 +4,9 @@ import {
4
4
  } from "../../chunk-S4DTK5GI.mjs";
5
5
  import {
6
6
  select_default
7
- } from "../../chunk-2BCJZILI.mjs";
8
- import "../../chunk-S3QS5B7F.mjs";
7
+ } from "../../chunk-JN7EGKJL.mjs";
9
8
  import "../../chunk-RZZWHI6O.mjs";
9
+ import "../../chunk-S3QS5B7F.mjs";
10
10
  import {
11
11
  act,
12
12
  render
package/dist/index.js CHANGED
@@ -8002,21 +8002,23 @@ var useDatePicker = ({ initialDate, initialTime }) => {
8002
8002
  const [targetRect, setTargetRect] = (0, import_react30.useState)(null);
8003
8003
  const [popupWidth, setPopupWidth] = (0, import_react30.useState)(0);
8004
8004
  const [popupHeight, setPopupHeight] = (0, import_react30.useState)(0);
8005
+ const [isFocusInput, setIsFocusInput] = (0, import_react30.useState)(false);
8005
8006
  const dateInputRef = (0, import_react30.useRef)(null);
8006
8007
  const datePickerWrapperRef = (0, import_react30.useRef)(null);
8007
8008
  const datePickerRef = (0, import_react30.useRef)(null);
8008
- const dataPickerGap = 4;
8009
- const calculatePositionWithScroll = (targetRect2, popupHeight2) => {
8010
- if (popupWidth === 0 || popupHeight2 === 0) return;
8011
- const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
8012
- const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
8013
- const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + dataPickerGap);
8014
- const spaceAbove = targetRect2.y - dataPickerGap;
8015
- const top = spaceBelow < popupHeight2 && spaceAbove > popupHeight2 ? targetRect2.y - popupHeight2 - dataPickerGap : targetRect2.y + targetRect2.height + dataPickerGap;
8016
- return {
8017
- top: top + scrollTop,
8018
- left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
8019
- };
8009
+ const DATE_PICKER_GAP = 4;
8010
+ const calculatePositionWithScroll = (targetRect2) => {
8011
+ if (targetRect2 && popupWidth && popupHeight) {
8012
+ const scrollTop = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
8013
+ const scrollLeft = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
8014
+ const spaceBelow = window.innerHeight - (targetRect2.y + targetRect2.height + DATE_PICKER_GAP);
8015
+ const spaceAbove = targetRect2.y - DATE_PICKER_GAP;
8016
+ const top = spaceBelow < popupHeight && spaceAbove > popupHeight ? targetRect2.y - popupHeight - DATE_PICKER_GAP : targetRect2.y + targetRect2.height + DATE_PICKER_GAP;
8017
+ return {
8018
+ top: top + scrollTop,
8019
+ left: targetRect2.x + targetRect2.width - popupWidth + scrollLeft
8020
+ };
8021
+ }
8020
8022
  };
8021
8023
  const handleToggleDatePicker = () => {
8022
8024
  if (datePickerRef.current) {
@@ -8030,6 +8032,12 @@ var useDatePicker = ({ initialDate, initialTime }) => {
8030
8032
  const handleChangeTime = (time) => {
8031
8033
  setSelectedTime(time);
8032
8034
  };
8035
+ const handleFocusInput = () => {
8036
+ setIsFocusInput(true);
8037
+ };
8038
+ const handleBlueInput = () => {
8039
+ setIsFocusInput(false);
8040
+ };
8033
8041
  (0, import_react30.useEffect)(() => {
8034
8042
  const onClickOutside = (e) => {
8035
8043
  if (datePickerRef.current && !datePickerRef.current.contains(e.target) && datePickerWrapperRef.current && !datePickerWrapperRef.current.contains(e.target)) {
@@ -8050,12 +8058,15 @@ var useDatePicker = ({ initialDate, initialTime }) => {
8050
8058
  selectedTime,
8051
8059
  targetRect,
8052
8060
  popupHeight,
8061
+ isFocusInput,
8053
8062
  dateInputRef,
8054
8063
  datePickerWrapperRef,
8055
8064
  datePickerRef,
8056
8065
  handleToggleDatePicker,
8057
8066
  handleChangeDate,
8058
8067
  handleChangeTime,
8068
+ handleFocusInput,
8069
+ handleBlueInput,
8059
8070
  calculatePositionWithScroll
8060
8071
  };
8061
8072
  };
@@ -8256,7 +8267,7 @@ var calendarStyle = tv({
8256
8267
  // src/components/dateTimePicker/timePicker.tsx
8257
8268
  var import_react32 = require("react");
8258
8269
  var import_jsx_runtime29 = require("react/jsx-runtime");
8259
- var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
8270
+ var TimePicker = ({ color = "primary", selectedTime, isFocusInput, onChangeTime }) => {
8260
8271
  const TOTAL_HOURS = 12;
8261
8272
  const TOTAL_MINUTES = 60;
8262
8273
  const ITEM_HEIGHT = 30;
@@ -8276,7 +8287,10 @@ var TimePicker = ({ color = "primary", selectedTime, onChangeTime }) => {
8276
8287
  setSelectedMinute(minute);
8277
8288
  setSelectedPeriod(period);
8278
8289
  }
8279
- }, [selectedTime]);
8290
+ if (isFocusInput) {
8291
+ scrollToSelectedTime();
8292
+ }
8293
+ }, [selectedTime, isFocusInput]);
8280
8294
  (0, import_react32.useEffect)(() => {
8281
8295
  scrollToSelectedTime();
8282
8296
  }, []);
@@ -8365,24 +8379,38 @@ var timePicker_default = TimePicker;
8365
8379
  var import_jsx_runtime30 = require("react/jsx-runtime");
8366
8380
  var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
8367
8381
  const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
8368
- const { classNames, label, errorMessage, startContent, endContent, type = "date", ...inputProps } = props;
8382
+ const {
8383
+ classNames,
8384
+ label,
8385
+ errorMessage,
8386
+ startContent,
8387
+ endContent,
8388
+ type = "date",
8389
+ value,
8390
+ onChangeDate,
8391
+ onChangeTime,
8392
+ ...inputProps
8393
+ } = props;
8369
8394
  const slots = (0, import_react33.useMemo)(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
8370
8395
  const {
8371
8396
  selectedDate,
8372
8397
  selectedTime,
8373
8398
  targetRect,
8374
8399
  popupHeight,
8400
+ isFocusInput,
8375
8401
  datePickerRef,
8376
8402
  dateInputRef,
8377
8403
  datePickerWrapperRef,
8378
8404
  handleToggleDatePicker,
8379
8405
  handleChangeDate,
8380
8406
  handleChangeTime,
8407
+ handleFocusInput,
8408
+ handleBlueInput,
8381
8409
  calculatePositionWithScroll
8382
8410
  } = useDatePicker({
8383
8411
  initialDate: void 0
8384
8412
  });
8385
- const position = targetRect ? calculatePositionWithScroll(targetRect, popupHeight) : null;
8413
+ const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
8386
8414
  const getBaseProps = (0, import_react33.useCallback)(
8387
8415
  () => ({
8388
8416
  className: slots.base({ class: classNames == null ? void 0 : classNames.base })
@@ -8415,17 +8443,29 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
8415
8443
  className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
8416
8444
  size: 0,
8417
8445
  type,
8418
- value: type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
8446
+ value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
8419
8447
  onChange: (e) => {
8420
8448
  if (type === "date") {
8421
8449
  handleChangeDate(e.target.value);
8450
+ if (onChangeDate) {
8451
+ onChangeDate(e.target.value);
8452
+ }
8422
8453
  } else if (type === "time") {
8423
8454
  handleChangeTime(e.target.value);
8455
+ if (onChangeTime) {
8456
+ onChangeTime(e.target.value);
8457
+ }
8424
8458
  }
8425
8459
  },
8460
+ onFocus: (e) => {
8461
+ handleFocusInput();
8462
+ },
8463
+ onBlur: (e) => {
8464
+ handleBlueInput();
8465
+ },
8426
8466
  max: "9999-12-31"
8427
8467
  }),
8428
- [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate]
8468
+ [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
8429
8469
  );
8430
8470
  const getContentProps = (0, import_react33.useCallback)(
8431
8471
  () => ({
@@ -8508,8 +8548,8 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
8508
8548
  ref: datePickerWrapperRef,
8509
8549
  style: {
8510
8550
  position: "absolute",
8511
- top: position == null ? void 0 : position.top,
8512
- left: position == null ? void 0 : position.left,
8551
+ top: (position == null ? void 0 : position.top) || -99999,
8552
+ left: (position == null ? void 0 : position.left) || -99999,
8513
8553
  zIndex: 1e3
8514
8554
  },
8515
8555
  children: [
@@ -8519,10 +8559,24 @@ var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
8519
8559
  color: originalProps.color,
8520
8560
  selectedDate,
8521
8561
  highlightWeekend: originalProps.highlightWeekend,
8522
- onChangeDate: handleChangeDate
8562
+ onChangeDate: (date) => {
8563
+ handleChangeDate(date);
8564
+ if (onChangeDate) onChangeDate(date);
8565
+ }
8523
8566
  }
8524
8567
  ),
8525
- type === "time" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(timePicker_default, { color: originalProps.color, selectedTime, onChangeTime: handleChangeTime })
8568
+ type === "time" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
8569
+ timePicker_default,
8570
+ {
8571
+ color: originalProps.color,
8572
+ selectedTime,
8573
+ isFocusInput,
8574
+ onChangeTime: (time) => {
8575
+ handleChangeTime(time);
8576
+ if (onChangeTime) onChangeTime(time);
8577
+ }
8578
+ }
8579
+ )
8526
8580
  ]
8527
8581
  }
8528
8582
  ),
package/dist/index.mjs CHANGED
@@ -32,16 +32,16 @@ import {
32
32
  } from "./chunk-6YE26GOI.mjs";
33
33
  import "./chunk-DWROPKZW.mjs";
34
34
  import "./chunk-VG4644BG.mjs";
35
- import "./chunk-MV2WCFK7.mjs";
36
- import {
37
- slider_default
38
- } from "./chunk-A3RWT3JJ.mjs";
39
35
  import "./chunk-QCEKPS7U.mjs";
40
36
  import {
41
37
  select_default
42
- } from "./chunk-2BCJZILI.mjs";
43
- import "./chunk-S3QS5B7F.mjs";
38
+ } from "./chunk-JN7EGKJL.mjs";
44
39
  import "./chunk-RZZWHI6O.mjs";
40
+ import "./chunk-S3QS5B7F.mjs";
41
+ import "./chunk-MV2WCFK7.mjs";
42
+ import {
43
+ slider_default
44
+ } from "./chunk-A3RWT3JJ.mjs";
45
45
  import "./chunk-7VOQKIIK.mjs";
46
46
  import {
47
47
  progress_default
@@ -71,11 +71,11 @@ import {
71
71
  import "./chunk-75HLCORR.mjs";
72
72
  import {
73
73
  dateTimePicker_default
74
- } from "./chunk-S2VUKVCH.mjs";
75
- import "./chunk-2ZFHB4JM.mjs";
74
+ } from "./chunk-HHYPMVLY.mjs";
75
+ import "./chunk-FWJ2ZKH6.mjs";
76
76
  import "./chunk-WX32MAKV.mjs";
77
77
  import "./chunk-P732YGHO.mjs";
78
- import "./chunk-N6IEGD4K.mjs";
78
+ import "./chunk-D5GGG7IO.mjs";
79
79
  import "./chunk-7MVEAQ7Z.mjs";
80
80
  import {
81
81
  list_default
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deepnoid/ui",
3
- "version": "0.0.90",
3
+ "version": "0.0.91",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/index.js",
package/dist/{chunk-2BCJZILI.mjs → chunk-JN7EGKJL.mjs} RENAMED
@@ -1,10 +1,10 @@
1
1
  "use client";
2
- import {
3
- useSelect
4
- } from "./chunk-S3QS5B7F.mjs";
5
2
  import {
6
3
  option_default
7
4
  } from "./chunk-RZZWHI6O.mjs";
5
+ import {
6
+ useSelect
7
+ } from "./chunk-S3QS5B7F.mjs";
8
8
  import {
9
9
  Icon_default
10
10
  } from "./chunk-LCI6RPWE.mjs";