@akinon/ui-date-picker 1.5.5-260827-0 → 1.5.6

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 (9) hide show
  1. package/dist/cjs/index.d.ts +1 -1
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +181 -76
  4. package/dist/cjs/types.d.ts +4 -2
  5. package/dist/esm/index.d.ts +1 -1
  6. package/dist/esm/index.d.ts.map +1 -1
  7. package/dist/esm/index.js +181 -76
  8. package/dist/esm/types.d.ts +4 -2
  9. package/package.json +3 -3
package/dist/cjs/index.d.ts CHANGED
@@ -17,6 +17,6 @@ import type { IDatePickerGroupProps } from './types';
17
17
  * The DatePicker component is designed to cater to both basic and advanced use cases, making it ideal for
18
18
  * enterprise-level applications.
19
19
  */
20
- export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
20
+ export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, inputWidth, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
21
21
  export type { IDatePickerGroupProps };
22
22
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,GAAI,4GAQxB,qBAAqB,sBA8bvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,GAAI,wHASxB,qBAAqB,sBAykBvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -36,13 +36,24 @@ const react_input_mask_1 = require("react-input-mask");
36
36
  * enterprise-level applications.
37
37
  */
38
38
  const DatePicker = (_a) => {
39
- var { pickerType = 'date', suffixIconColor = 'var(--color-gray-500)', suffixIcon = 'chevron_down', suffixIconSize = '10px', showTitle = false, inputTitle = '' } = _a, restDatePickerProps = __rest(_a, ["pickerType", "suffixIconColor", "suffixIcon", "suffixIconSize", "showTitle", "inputTitle"]);
39
+ var { pickerType = 'date', suffixIconColor = 'var(--color-gray-500)', suffixIcon = 'chevron_down', suffixIconSize = '10px', showTitle = false, inputTitle = '', inputWidth } = _a, restDatePickerProps = __rest(_a, ["pickerType", "suffixIconColor", "suffixIcon", "suffixIconSize", "showTitle", "inputTitle", "inputWidth"]);
40
40
  const { getPrefixCls, theme } = React.useContext(antd_1.ConfigProvider.ConfigContext);
41
41
  const { token, hashId } = (0, ui_theme_1.useToken)();
42
42
  const datePickerToken = token.DatePicker;
43
- const prefixWithoutHash = `${getPrefixCls()}-picker`;
43
+ const rootPrefix = getPrefixCls();
44
+ const prefixWithoutHash = `${rootPrefix}-picker`;
44
45
  const prefixClsWithoutHash = `.${prefixWithoutHash}`;
45
- const themeClassName = `${prefixWithoutHash}-${restDatePickerProps.theme}`;
46
+ const blockWithoutHash = `${rootPrefix}-date-picker`;
47
+ const blockClsWithoutHash = `.${blockWithoutHash}`;
48
+ const rangeBlockClsWithoutHash = `${blockClsWithoutHash}-range`;
49
+ const inputWidthVar = `--${blockWithoutHash}-input-width`;
50
+ const rangeShownClsWithoutHash = `${blockWithoutHash}-range-shown`;
51
+ // antd styles these through the column, so match its selector depth
52
+ const timeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell ${prefixClsWithoutHash}-time-panel-cell-inner`;
53
+ const selectedTimeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell-selected ${prefixClsWithoutHash}-time-panel-cell-inner`;
54
+ const isRange = pickerType === 'range';
55
+ const [isSelectingRange, setIsSelectingRange] = React.useState(false);
56
+ const [hasRangeValue, setHasRangeValue] = React.useState(() => Boolean(restDatePickerProps.defaultValue));
46
57
  const [startDate, setStartDate] = React.useState('');
47
58
  const [startTime, setStartTime] = React.useState('');
48
59
  const [endDate, setEndDate] = React.useState('');
@@ -55,27 +66,54 @@ const DatePicker = (_a) => {
55
66
  }, () => {
56
67
  const prefixCls = `:where(.${hashId})`;
57
68
  const customTokens = (0, ui_theme_1.getSafeCustomTokens)(theme);
69
+ // antd sizes these vars from the shared control heights
70
+ const sizedPadding = (size) => `var(--${rootPrefix}-date-picker-padding-block${size}) var(--${rootPrefix}-date-picker-padding-inline${size})`;
71
+ // every panel the picker can switch to, so navigating between them keeps
72
+ // the same popup chrome
73
+ const panelContainers = [
74
+ 'date',
75
+ 'datetime',
76
+ 'week',
77
+ 'month',
78
+ 'quarter',
79
+ 'year',
80
+ 'decade',
81
+ 'time'
82
+ ]
83
+ .map(panel => `${prefixClsWithoutHash}-${panel}-panel-container`)
84
+ .join(', ');
58
85
  return {
59
86
  [prefixCls]: {
60
- [`&${prefixClsWithoutHash}`]: {
87
+ [`&${prefixClsWithoutHash}${blockClsWithoutHash}`]: {
61
88
  width: customTokens.sizing.valueFull,
62
- background: customTokens.others.colorTransparent,
63
- border: customTokens.border.borderNone,
64
- boxShadow: customTokens.layout.displayNone,
65
- padding: customTokens.sizing.valueZero,
66
- [`&:not(${prefixClsWithoutHash}-light)`]: {
67
- background: datePickerToken.general.bgDarkBlue,
68
- [`input`]: {
69
- border: datePickerToken.general.wideBorder,
70
- color: token.colorWhite
71
- }
89
+ [`input`]: {
90
+ fontWeight: datePickerToken.fontWeight
72
91
  },
73
92
  [`&${prefixClsWithoutHash}-light`]: {
74
93
  background: token.colorWhite,
75
94
  border: datePickerToken.general.lightThemeBorder,
76
95
  [`input`]: {
77
- border: datePickerToken.general.lightThemeBorder
96
+ color: datePickerToken.title.lightColor
78
97
  }
98
+ }
99
+ },
100
+ [`&${prefixClsWithoutHash}${rangeBlockClsWithoutHash}`]: {
101
+ background: customTokens.others.colorTransparent,
102
+ border: customTokens.border.borderNone,
103
+ boxShadow: customTokens.layout.displayNone,
104
+ padding: customTokens.sizing.valueZero,
105
+ [`${prefixClsWithoutHash}-input input`]: {
106
+ width: `var(${inputWidthVar}, ${customTokens.sizing.valueFull})`,
107
+ padding: sizedPadding(''),
108
+ background: datePickerToken.general.bgDarkBlue,
109
+ border: datePickerToken.general.wideBorder,
110
+ borderRadius: datePickerToken.pickerPanel.range.inputRadius
111
+ },
112
+ [`&${prefixClsWithoutHash}-large ${prefixClsWithoutHash}-input input`]: {
113
+ padding: sizedPadding('-lg')
114
+ },
115
+ [`&${prefixClsWithoutHash}-small ${prefixClsWithoutHash}-input input`]: {
116
+ padding: sizedPadding('-sm')
79
117
  },
80
118
  [`${prefixClsWithoutHash}-input > span`]: {
81
119
  position: customTokens.layout.positionAbsolute,
@@ -86,40 +124,52 @@ const DatePicker = (_a) => {
86
124
  pointerEvents: customTokens.layout.displayNone
87
125
  }
88
126
  },
89
- [`${prefixClsWithoutHash}-input`]: {
90
- color: datePickerToken.general.fontColor
127
+ [`${prefixClsWithoutHash}-range-separator`]: {
128
+ content: customTokens.others.emptyContent,
129
+ width: datePickerToken.pickerPanel.separator.width,
130
+ height: datePickerToken.pickerPanel.separator.height,
131
+ background: datePickerToken.pickerPanel.separator.backgroundColor,
132
+ padding: customTokens.sizing.valueZero,
133
+ ['svg']: {
134
+ display: customTokens.layout.displayNone
135
+ }
91
136
  },
92
- [`input`]: {
93
- fontWeight: customTokens.typography.fontWeightBold,
94
- padding: datePickerToken.general.inputPadding,
95
- borderRadius: datePickerToken.pickerPanel.range.inputRadius,
96
- width: `${restDatePickerProps.inputWidth} !important`,
97
- outline: customTokens.layout.displayNone
137
+ [`${prefixClsWithoutHash}-suffix`]: {
138
+ display: customTokens.layout.displayNone
98
139
  },
99
- [`&${prefixClsWithoutHash}-range`]: {
100
- [`${prefixClsWithoutHash}-range-separator`]: {
101
- content: customTokens.others.emptyContent,
102
- width: datePickerToken.pickerPanel.separator.width,
103
- height: datePickerToken.pickerPanel.separator.height,
104
- background: datePickerToken.pickerPanel.separator.backgroundColor,
105
- padding: customTokens.sizing.valueZero,
106
- ['svg']: {
107
- display: customTokens.layout.displayNone
108
- }
109
- },
110
- [`${prefixClsWithoutHash}-suffix`]: {
111
- display: customTokens.layout.displayNone
140
+ [`&:hover:has(${prefixClsWithoutHash}-clear)`]: {
141
+ [`${prefixClsWithoutHash}-input ~ ${prefixClsWithoutHash}-input > span`]: {
142
+ opacity: customTokens.others.opacityNone
112
143
  }
144
+ },
145
+ [`${prefixClsWithoutHash}-active-bar`]: {
146
+ display: customTokens.layout.displayNone
113
147
  }
114
148
  },
115
- [`${prefixClsWithoutHash}-active-bar`]: {
116
- display: customTokens.layout.displayNone
117
- },
118
149
  [`&${prefixClsWithoutHash}-dropdown`]: {
119
- [`${prefixClsWithoutHash}-date-panel-container`]: {
150
+ [panelContainers]: {
151
+ [`--${rootPrefix}-color-split`]: datePickerToken.pickerPanel.dividerColor,
152
+ [`--${rootPrefix}-line-width`]: customTokens.border.borderWidthThin,
120
153
  background: datePickerToken.general.bgDarkBlue,
121
154
  border: datePickerToken.general.wideBorder,
122
- boxShadow: datePickerToken.pickerPanel.shadow,
155
+ boxShadow: datePickerToken.pickerPanel.shadow
156
+ },
157
+ [`${prefixClsWithoutHash}-datetime-panel-container`]: {
158
+ [`${timeCellCls}`]: {
159
+ fontSize: datePickerToken.general.fontSize,
160
+ fontWeight: datePickerToken.pickerPanel.row.cellFontWeight,
161
+ color: datePickerToken.pickerPanel.row.cellTextColor,
162
+ paddingInline: customTokens.sizing.valueZero,
163
+ textAlign: customTokens.typography.textAlignCenter
164
+ },
165
+ [`${selectedTimeCellCls}`]: {
166
+ background: datePickerToken.pickerPanel.row.cellBg,
167
+ border: datePickerToken.pickerPanel.row.cellBorder,
168
+ borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
169
+ }
170
+ },
171
+ [`${prefixClsWithoutHash}-date-panel-container,
172
+ ${prefixClsWithoutHash}-datetime-panel-container`]: {
123
173
  [`${prefixClsWithoutHash}-date-panel`]: {
124
174
  width: 'fit-content'
125
175
  },
@@ -139,21 +189,23 @@ const DatePicker = (_a) => {
139
189
  ['button']: {
140
190
  lineHeight: customTokens.others.lineHeightShort
141
191
  },
142
- ['&-prev-btn, &-next-btn']: {
192
+ ['&-prev-btn, &-next-btn, &-super-prev-btn, &-super-next-btn']: {
143
193
  minWidth: datePickerToken.pickerPanel.header.arrawWidth,
144
194
  width: datePickerToken.pickerPanel.header.arrawWidth
145
195
  },
146
- ['&-prev-btn']: {
147
- paddingLeft: datePickerToken.pickerPanel.header.arrowPaddingLeft
196
+ ['&-super-prev-btn']: {
197
+ marginInlineEnd: datePickerToken.pickerPanel.header.arrowGap
148
198
  },
149
- ['&-next-btn']: {
150
- paddingRight: datePickerToken.pickerPanel.header.arrowPaddingRight
151
- },
152
- ['&-super-prev-btn, &-super-next-btn']: {
153
- minWidth: datePickerToken.pickerPanel.header.arrawWidth,
154
- width: datePickerToken.pickerPanel.header.arrawWidth
199
+ ['&-super-next-btn']: {
200
+ marginInlineStart: datePickerToken.pickerPanel.header.arrowGap
155
201
  }
156
202
  },
203
+ [`${prefixClsWithoutHash}-prev-icon,
204
+ ${prefixClsWithoutHash}-next-icon,
205
+ ${prefixClsWithoutHash}-super-prev-icon,
206
+ ${prefixClsWithoutHash}-super-next-icon`]: {
207
+ display: customTokens.layout.displayInlineBlock
208
+ },
157
209
  [`${prefixClsWithoutHash}-body`]: {
158
210
  padding: datePickerToken.pickerPanel.body.padding
159
211
  },
@@ -192,10 +244,11 @@ const DatePicker = (_a) => {
192
244
  minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
193
245
  marginBottom: datePickerToken.pickerPanel.row.marginY
194
246
  },
195
- [`${prefixClsWithoutHash}-cell-today`]: {
247
+ [`${prefixClsWithoutHash}-cell-today:not(${prefixClsWithoutHash}-cell-in-range):not(${prefixClsWithoutHash}-cell-range-start):not(${prefixClsWithoutHash}-cell-range-end)`]: {
196
248
  [`${prefixClsWithoutHash}-cell-inner`]: {
197
249
  background: datePickerToken.pickerPanel.row.cellBg,
198
- border: datePickerToken.pickerPanel.row.cellBorder,
250
+ outline: datePickerToken.pickerPanel.row.cellBorder,
251
+ outlineOffset: `-${customTokens.border.borderWidthThick}`,
199
252
  borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
200
253
  }
201
254
  },
@@ -248,21 +301,22 @@ const DatePicker = (_a) => {
248
301
  ${prefixClsWithoutHash}-cell-in-range`]: {
249
302
  padding: customTokens.sizing.valueZero,
250
303
  minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
251
- marginBottom: datePickerToken.pickerPanel.row.marginY
304
+ marginBottom: datePickerToken.pickerPanel.row.marginY,
305
+ // drop the line box around the cell so the range band can
306
+ // match the cell height exactly
307
+ lineHeight: customTokens.sizing.valueZero
252
308
  },
253
- [`${prefixClsWithoutHash}-cell-in-range`]: {
254
- ['&:before']: {
255
- background: customTokens.others.colorTransparent
256
- }
309
+ [`${prefixClsWithoutHash}-cell-inner`]: {
310
+ // the band paints instantly, so drop the fade on the cell or
311
+ // a hovered day fills in two steps
312
+ transition: customTokens.others.valueUnset
257
313
  },
258
- [`${prefixClsWithoutHash}-cell-today,
259
- ${prefixClsWithoutHash}-cell-range-start,
260
- ${prefixClsWithoutHash}-cell-range-end`]: {
261
- [`${prefixClsWithoutHash}-cell-inner`]: {
262
- background: datePickerToken.pickerPanel.row.cellBg,
263
- border: datePickerToken.pickerPanel.row.cellBorder,
264
- borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
265
- }
314
+ [`${prefixClsWithoutHash}-cell-in-range:not(${prefixClsWithoutHash}-cell-disabled)::before,
315
+ ${prefixClsWithoutHash}-cell-range-start:not(${prefixClsWithoutHash}-cell-disabled)::before,
316
+ ${prefixClsWithoutHash}-cell-range-end:not(${prefixClsWithoutHash}-cell-disabled)::before`]: {
317
+ // match the cell box so the band and the rounded ends line up
318
+ height: customTokens.sizing.valueFull,
319
+ background: token.colorPrimary
266
320
  }
267
321
  },
268
322
  [`${prefixClsWithoutHash}-footer`]: {
@@ -271,6 +325,20 @@ const DatePicker = (_a) => {
271
325
  }
272
326
  }
273
327
  },
328
+ // Until a start date is picked, rc-picker marks the cell under the
329
+ // cursor as both ends of the range. Keep that one on the plain hover
330
+ // background instead of painting it as a selection.
331
+ [`&${prefixClsWithoutHash}-dropdown-range:not(.${rangeShownClsWithoutHash})`]: {
332
+ [`${prefixClsWithoutHash}-date-panel-container ${prefixClsWithoutHash}-content ${prefixClsWithoutHash}-cell-range-start${prefixClsWithoutHash}-cell-range-end`]: {
333
+ ['&::before']: {
334
+ background: customTokens.others.colorTransparent
335
+ },
336
+ [`${prefixClsWithoutHash}-cell-inner`]: {
337
+ background: token.controlItemBgHover,
338
+ color: datePickerToken.pickerPanel.row.cellTextColor
339
+ }
340
+ }
341
+ },
274
342
  [`&${prefixClsWithoutHash}-input-title`]: {
275
343
  display: customTokens.layout.displayBlock,
276
344
  fontWeight: customTokens.typography.fontWeightBold,
@@ -316,7 +384,33 @@ const DatePicker = (_a) => {
316
384
  const customPopupStyle = restDatePickerProps.placement === 'center'
317
385
  ? { left: '50%', transform: 'translateX(-50%)' }
318
386
  : {};
319
- const handleDateChange = (dates) => {
387
+ const themeClassName = `${prefixWithoutHash}-${restDatePickerProps.theme}`;
388
+ const controlledRangeValue = restDatePickerProps
389
+ .value;
390
+ // the plain hover background only applies while the panel shows no range at
391
+ // all; once one is picked (or already set) every cell it covers stays blue
392
+ const showsRange = isSelectingRange ||
393
+ (controlledRangeValue
394
+ ? Boolean(controlledRangeValue[0] && controlledRangeValue[1])
395
+ : hasRangeValue);
396
+ const rootClassName = isRange
397
+ ? `${blockWithoutHash} ${blockWithoutHash}-range`
398
+ : `${blockWithoutHash} ${themeClassName}`;
399
+ const handleCalendarChange = (dates, dateStrings, info) => {
400
+ var _a, _b;
401
+ const [start, end] = dates !== null && dates !== void 0 ? dates : [null, null];
402
+ setIsSelectingRange(Boolean(start) !== Boolean(end));
403
+ (_b = (_a = restDatePickerProps).onCalendarChange) === null || _b === void 0 ? void 0 : _b.call(_a, dates, dateStrings, info);
404
+ };
405
+ const handleOpenChange = (open) => {
406
+ var _a, _b;
407
+ if (!open) {
408
+ setIsSelectingRange(false);
409
+ }
410
+ (_b = (_a = restDatePickerProps).onOpenChange) === null || _b === void 0 ? void 0 : _b.call(_a, open);
411
+ };
412
+ const handleDateChange = (dates, dateStrings) => {
413
+ var _a, _b;
320
414
  const updateDateTime = (date, setDate, setTime) => {
321
415
  if (date) {
322
416
  setDate(date.format('MM/DD/YYYY'));
@@ -327,10 +421,12 @@ const DatePicker = (_a) => {
327
421
  setTime('');
328
422
  }
329
423
  };
424
+ setHasRangeValue(Boolean((dates === null || dates === void 0 ? void 0 : dates[0]) && (dates === null || dates === void 0 ? void 0 : dates[1])));
330
425
  if (dates) {
331
426
  updateDateTime(dates[0], setStartDate, setStartTime);
332
427
  updateDateTime(dates[1], setEndDate, setEndTime);
333
428
  }
429
+ (_b = (_a = restDatePickerProps).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dates, dateStrings);
334
430
  };
335
431
  const renderFooter = (panelType) => {
336
432
  const renderInputMask = (mask, value, onChange, placeholder) => (React.createElement(react_input_mask_1.default, { mask: mask, value: value, onChange: onChange, placeholder: placeholder }));
@@ -346,20 +442,29 @@ const DatePicker = (_a) => {
346
442
  ? e => setStartTime(e.target.value)
347
443
  : e => setEndTime(e.target.value), isStartPanel ? '00:00:00' : 'End Time')));
348
444
  };
349
- const RangePickerCustomInput = React.forwardRef((props, ref) => {
350
- const _a = props, { value, onChange, placeholder } = _a, restProps = __rest(_a, ["value", "onChange", "placeholder"]);
351
- return (React.createElement(React.Fragment, null,
352
- React.createElement("input", Object.assign({}, restProps, { ref: ref, value: value, onChange: onChange, placeholder: placeholder })),
353
- React.createElement("span", null,
354
- React.createElement(icons_1.Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }))));
355
- });
356
- RangePickerCustomInput.displayName = 'RangePickerCustomInput';
357
- return useStyle(pickerType === 'range' ? (React.createElement(antd_1.DatePicker.RangePicker, Object.assign({}, restDatePickerProps, { popupStyle: customPopupStyle, onChange: handleDateChange, renderExtraFooter: () => (React.createElement("div", { className: "range-footer" },
445
+ // A new component type on every render would make React remount the inputs
446
+ // and drop the focus rc-picker moves between them.
447
+ const RangePickerCustomInput = React.useMemo(() => {
448
+ const CustomInput = React.forwardRef((props, ref) => {
449
+ const _a = props, { value, onChange, placeholder } = _a, restProps = __rest(_a, ["value", "onChange", "placeholder"]);
450
+ return (React.createElement(React.Fragment, null,
451
+ React.createElement("input", Object.assign({}, restProps, { ref: ref, value: value, onChange: onChange, placeholder: placeholder })),
452
+ React.createElement("span", null,
453
+ React.createElement(icons_1.Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }))));
454
+ });
455
+ CustomInput.displayName = 'RangePickerCustomInput';
456
+ return CustomInput;
457
+ }, [suffixIcon, suffixIconSize, suffixIconColor]);
458
+ return useStyle(isRange ? (React.createElement(antd_1.DatePicker.RangePicker, Object.assign({}, restDatePickerProps, { className: rootClassName, style: { [inputWidthVar]: inputWidth }, styles: { popup: { root: customPopupStyle } }, classNames: {
459
+ popup: {
460
+ root: showsRange ? rangeShownClsWithoutHash : ''
461
+ }
462
+ }, onCalendarChange: handleCalendarChange, onOpenChange: handleOpenChange, onChange: handleDateChange, renderExtraFooter: () => (React.createElement("div", { className: "range-footer" },
358
463
  renderFooter('start'),
359
464
  renderFooter('end'))), components: {
360
465
  input: RangePickerCustomInput
361
466
  }, variant: "borderless" }))) : (React.createElement("div", null,
362
467
  showTitle && (React.createElement(antd_1.Typography.Text, { className: `${prefixWithoutHash}-input-title ${themeClassName}` }, inputTitle)),
363
- React.createElement(antd_1.DatePicker, Object.assign({ className: themeClassName, suffixIcon: React.createElement(icons_1.Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }) }, restDatePickerProps)))));
468
+ React.createElement(antd_1.DatePicker, Object.assign({ className: rootClassName, style: { width: inputWidth }, suffixIcon: React.createElement(icons_1.Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }) }, restDatePickerProps)))));
364
469
  };
365
470
  exports.DatePicker = DatePicker;
package/dist/cjs/types.d.ts CHANGED
@@ -183,7 +183,8 @@ export interface IDatePickerGroupProps
183
183
  prevIcon?: ReactNode;
184
184
 
185
185
  /**
186
- * To determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px.
186
+ * To determine the size of the picker. Heights match the Input sizes: 40px
187
+ * for large and 26px for small, while the default middle size is 32px.
187
188
  */
188
189
  size?: 'large' | 'middle' | 'small';
189
190
 
@@ -229,7 +230,8 @@ export interface IDatePickerGroupProps
229
230
  showTitle?: boolean;
230
231
 
231
232
  /**
232
- * The width of the input box
233
+ * The width of the picker. On a `range` picker it sets the width of each
234
+ * input instead.
233
235
  */
234
236
  inputWidth?: string;
235
237
 
package/dist/esm/index.d.ts CHANGED
@@ -17,6 +17,6 @@ import type { IDatePickerGroupProps } from './types';
17
17
  * The DatePicker component is designed to cater to both basic and advanced use cases, making it ideal for
18
18
  * enterprise-level applications.
19
19
  */
20
- export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
20
+ export declare const DatePicker: ({ pickerType, suffixIconColor, suffixIcon, suffixIconSize, showTitle, inputTitle, inputWidth, ...restDatePickerProps }: IDatePickerGroupProps) => React.JSX.Element;
21
21
  export type { IDatePickerGroupProps };
22
22
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,GAAI,4GAQxB,qBAAqB,sBA8bvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,UAAU,GAAI,wHASxB,qBAAqB,sBAykBvB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
package/dist/esm/index.js CHANGED
@@ -33,13 +33,24 @@ import InputMask from 'react-input-mask';
33
33
  * enterprise-level applications.
34
34
  */
35
35
  export const DatePicker = (_a) => {
36
- var { pickerType = 'date', suffixIconColor = 'var(--color-gray-500)', suffixIcon = 'chevron_down', suffixIconSize = '10px', showTitle = false, inputTitle = '' } = _a, restDatePickerProps = __rest(_a, ["pickerType", "suffixIconColor", "suffixIcon", "suffixIconSize", "showTitle", "inputTitle"]);
36
+ var { pickerType = 'date', suffixIconColor = 'var(--color-gray-500)', suffixIcon = 'chevron_down', suffixIconSize = '10px', showTitle = false, inputTitle = '', inputWidth } = _a, restDatePickerProps = __rest(_a, ["pickerType", "suffixIconColor", "suffixIcon", "suffixIconSize", "showTitle", "inputTitle", "inputWidth"]);
37
37
  const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
38
38
  const { token, hashId } = useToken();
39
39
  const datePickerToken = token.DatePicker;
40
- const prefixWithoutHash = `${getPrefixCls()}-picker`;
40
+ const rootPrefix = getPrefixCls();
41
+ const prefixWithoutHash = `${rootPrefix}-picker`;
41
42
  const prefixClsWithoutHash = `.${prefixWithoutHash}`;
42
- const themeClassName = `${prefixWithoutHash}-${restDatePickerProps.theme}`;
43
+ const blockWithoutHash = `${rootPrefix}-date-picker`;
44
+ const blockClsWithoutHash = `.${blockWithoutHash}`;
45
+ const rangeBlockClsWithoutHash = `${blockClsWithoutHash}-range`;
46
+ const inputWidthVar = `--${blockWithoutHash}-input-width`;
47
+ const rangeShownClsWithoutHash = `${blockWithoutHash}-range-shown`;
48
+ // antd styles these through the column, so match its selector depth
49
+ const timeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell ${prefixClsWithoutHash}-time-panel-cell-inner`;
50
+ const selectedTimeCellCls = `${prefixClsWithoutHash}-time-panel ${prefixClsWithoutHash}-time-panel-column > li${prefixClsWithoutHash}-time-panel-cell-selected ${prefixClsWithoutHash}-time-panel-cell-inner`;
51
+ const isRange = pickerType === 'range';
52
+ const [isSelectingRange, setIsSelectingRange] = React.useState(false);
53
+ const [hasRangeValue, setHasRangeValue] = React.useState(() => Boolean(restDatePickerProps.defaultValue));
43
54
  const [startDate, setStartDate] = React.useState('');
44
55
  const [startTime, setStartTime] = React.useState('');
45
56
  const [endDate, setEndDate] = React.useState('');
@@ -52,27 +63,54 @@ export const DatePicker = (_a) => {
52
63
  }, () => {
53
64
  const prefixCls = `:where(.${hashId})`;
54
65
  const customTokens = getSafeCustomTokens(theme);
66
+ // antd sizes these vars from the shared control heights
67
+ const sizedPadding = (size) => `var(--${rootPrefix}-date-picker-padding-block${size}) var(--${rootPrefix}-date-picker-padding-inline${size})`;
68
+ // every panel the picker can switch to, so navigating between them keeps
69
+ // the same popup chrome
70
+ const panelContainers = [
71
+ 'date',
72
+ 'datetime',
73
+ 'week',
74
+ 'month',
75
+ 'quarter',
76
+ 'year',
77
+ 'decade',
78
+ 'time'
79
+ ]
80
+ .map(panel => `${prefixClsWithoutHash}-${panel}-panel-container`)
81
+ .join(', ');
55
82
  return {
56
83
  [prefixCls]: {
57
- [`&${prefixClsWithoutHash}`]: {
84
+ [`&${prefixClsWithoutHash}${blockClsWithoutHash}`]: {
58
85
  width: customTokens.sizing.valueFull,
59
- background: customTokens.others.colorTransparent,
60
- border: customTokens.border.borderNone,
61
- boxShadow: customTokens.layout.displayNone,
62
- padding: customTokens.sizing.valueZero,
63
- [`&:not(${prefixClsWithoutHash}-light)`]: {
64
- background: datePickerToken.general.bgDarkBlue,
65
- [`input`]: {
66
- border: datePickerToken.general.wideBorder,
67
- color: token.colorWhite
68
- }
86
+ [`input`]: {
87
+ fontWeight: datePickerToken.fontWeight
69
88
  },
70
89
  [`&${prefixClsWithoutHash}-light`]: {
71
90
  background: token.colorWhite,
72
91
  border: datePickerToken.general.lightThemeBorder,
73
92
  [`input`]: {
74
- border: datePickerToken.general.lightThemeBorder
93
+ color: datePickerToken.title.lightColor
75
94
  }
95
+ }
96
+ },
97
+ [`&${prefixClsWithoutHash}${rangeBlockClsWithoutHash}`]: {
98
+ background: customTokens.others.colorTransparent,
99
+ border: customTokens.border.borderNone,
100
+ boxShadow: customTokens.layout.displayNone,
101
+ padding: customTokens.sizing.valueZero,
102
+ [`${prefixClsWithoutHash}-input input`]: {
103
+ width: `var(${inputWidthVar}, ${customTokens.sizing.valueFull})`,
104
+ padding: sizedPadding(''),
105
+ background: datePickerToken.general.bgDarkBlue,
106
+ border: datePickerToken.general.wideBorder,
107
+ borderRadius: datePickerToken.pickerPanel.range.inputRadius
108
+ },
109
+ [`&${prefixClsWithoutHash}-large ${prefixClsWithoutHash}-input input`]: {
110
+ padding: sizedPadding('-lg')
111
+ },
112
+ [`&${prefixClsWithoutHash}-small ${prefixClsWithoutHash}-input input`]: {
113
+ padding: sizedPadding('-sm')
76
114
  },
77
115
  [`${prefixClsWithoutHash}-input > span`]: {
78
116
  position: customTokens.layout.positionAbsolute,
@@ -83,40 +121,52 @@ export const DatePicker = (_a) => {
83
121
  pointerEvents: customTokens.layout.displayNone
84
122
  }
85
123
  },
86
- [`${prefixClsWithoutHash}-input`]: {
87
- color: datePickerToken.general.fontColor
124
+ [`${prefixClsWithoutHash}-range-separator`]: {
125
+ content: customTokens.others.emptyContent,
126
+ width: datePickerToken.pickerPanel.separator.width,
127
+ height: datePickerToken.pickerPanel.separator.height,
128
+ background: datePickerToken.pickerPanel.separator.backgroundColor,
129
+ padding: customTokens.sizing.valueZero,
130
+ ['svg']: {
131
+ display: customTokens.layout.displayNone
132
+ }
88
133
  },
89
- [`input`]: {
90
- fontWeight: customTokens.typography.fontWeightBold,
91
- padding: datePickerToken.general.inputPadding,
92
- borderRadius: datePickerToken.pickerPanel.range.inputRadius,
93
- width: `${restDatePickerProps.inputWidth} !important`,
94
- outline: customTokens.layout.displayNone
134
+ [`${prefixClsWithoutHash}-suffix`]: {
135
+ display: customTokens.layout.displayNone
95
136
  },
96
- [`&${prefixClsWithoutHash}-range`]: {
97
- [`${prefixClsWithoutHash}-range-separator`]: {
98
- content: customTokens.others.emptyContent,
99
- width: datePickerToken.pickerPanel.separator.width,
100
- height: datePickerToken.pickerPanel.separator.height,
101
- background: datePickerToken.pickerPanel.separator.backgroundColor,
102
- padding: customTokens.sizing.valueZero,
103
- ['svg']: {
104
- display: customTokens.layout.displayNone
105
- }
106
- },
107
- [`${prefixClsWithoutHash}-suffix`]: {
108
- display: customTokens.layout.displayNone
137
+ [`&:hover:has(${prefixClsWithoutHash}-clear)`]: {
138
+ [`${prefixClsWithoutHash}-input ~ ${prefixClsWithoutHash}-input > span`]: {
139
+ opacity: customTokens.others.opacityNone
109
140
  }
141
+ },
142
+ [`${prefixClsWithoutHash}-active-bar`]: {
143
+ display: customTokens.layout.displayNone
110
144
  }
111
145
  },
112
- [`${prefixClsWithoutHash}-active-bar`]: {
113
- display: customTokens.layout.displayNone
114
- },
115
146
  [`&${prefixClsWithoutHash}-dropdown`]: {
116
- [`${prefixClsWithoutHash}-date-panel-container`]: {
147
+ [panelContainers]: {
148
+ [`--${rootPrefix}-color-split`]: datePickerToken.pickerPanel.dividerColor,
149
+ [`--${rootPrefix}-line-width`]: customTokens.border.borderWidthThin,
117
150
  background: datePickerToken.general.bgDarkBlue,
118
151
  border: datePickerToken.general.wideBorder,
119
- boxShadow: datePickerToken.pickerPanel.shadow,
152
+ boxShadow: datePickerToken.pickerPanel.shadow
153
+ },
154
+ [`${prefixClsWithoutHash}-datetime-panel-container`]: {
155
+ [`${timeCellCls}`]: {
156
+ fontSize: datePickerToken.general.fontSize,
157
+ fontWeight: datePickerToken.pickerPanel.row.cellFontWeight,
158
+ color: datePickerToken.pickerPanel.row.cellTextColor,
159
+ paddingInline: customTokens.sizing.valueZero,
160
+ textAlign: customTokens.typography.textAlignCenter
161
+ },
162
+ [`${selectedTimeCellCls}`]: {
163
+ background: datePickerToken.pickerPanel.row.cellBg,
164
+ border: datePickerToken.pickerPanel.row.cellBorder,
165
+ borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
166
+ }
167
+ },
168
+ [`${prefixClsWithoutHash}-date-panel-container,
169
+ ${prefixClsWithoutHash}-datetime-panel-container`]: {
120
170
  [`${prefixClsWithoutHash}-date-panel`]: {
121
171
  width: 'fit-content'
122
172
  },
@@ -136,21 +186,23 @@ export const DatePicker = (_a) => {
136
186
  ['button']: {
137
187
  lineHeight: customTokens.others.lineHeightShort
138
188
  },
139
- ['&-prev-btn, &-next-btn']: {
189
+ ['&-prev-btn, &-next-btn, &-super-prev-btn, &-super-next-btn']: {
140
190
  minWidth: datePickerToken.pickerPanel.header.arrawWidth,
141
191
  width: datePickerToken.pickerPanel.header.arrawWidth
142
192
  },
143
- ['&-prev-btn']: {
144
- paddingLeft: datePickerToken.pickerPanel.header.arrowPaddingLeft
193
+ ['&-super-prev-btn']: {
194
+ marginInlineEnd: datePickerToken.pickerPanel.header.arrowGap
145
195
  },
146
- ['&-next-btn']: {
147
- paddingRight: datePickerToken.pickerPanel.header.arrowPaddingRight
148
- },
149
- ['&-super-prev-btn, &-super-next-btn']: {
150
- minWidth: datePickerToken.pickerPanel.header.arrawWidth,
151
- width: datePickerToken.pickerPanel.header.arrawWidth
196
+ ['&-super-next-btn']: {
197
+ marginInlineStart: datePickerToken.pickerPanel.header.arrowGap
152
198
  }
153
199
  },
200
+ [`${prefixClsWithoutHash}-prev-icon,
201
+ ${prefixClsWithoutHash}-next-icon,
202
+ ${prefixClsWithoutHash}-super-prev-icon,
203
+ ${prefixClsWithoutHash}-super-next-icon`]: {
204
+ display: customTokens.layout.displayInlineBlock
205
+ },
154
206
  [`${prefixClsWithoutHash}-body`]: {
155
207
  padding: datePickerToken.pickerPanel.body.padding
156
208
  },
@@ -189,10 +241,11 @@ export const DatePicker = (_a) => {
189
241
  minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
190
242
  marginBottom: datePickerToken.pickerPanel.row.marginY
191
243
  },
192
- [`${prefixClsWithoutHash}-cell-today`]: {
244
+ [`${prefixClsWithoutHash}-cell-today:not(${prefixClsWithoutHash}-cell-in-range):not(${prefixClsWithoutHash}-cell-range-start):not(${prefixClsWithoutHash}-cell-range-end)`]: {
193
245
  [`${prefixClsWithoutHash}-cell-inner`]: {
194
246
  background: datePickerToken.pickerPanel.row.cellBg,
195
- border: datePickerToken.pickerPanel.row.cellBorder,
247
+ outline: datePickerToken.pickerPanel.row.cellBorder,
248
+ outlineOffset: `-${customTokens.border.borderWidthThick}`,
196
249
  borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
197
250
  }
198
251
  },
@@ -245,21 +298,22 @@ export const DatePicker = (_a) => {
245
298
  ${prefixClsWithoutHash}-cell-in-range`]: {
246
299
  padding: customTokens.sizing.valueZero,
247
300
  minWidth: datePickerToken.pickerPanel.content.tableHeaderWidth,
248
- marginBottom: datePickerToken.pickerPanel.row.marginY
301
+ marginBottom: datePickerToken.pickerPanel.row.marginY,
302
+ // drop the line box around the cell so the range band can
303
+ // match the cell height exactly
304
+ lineHeight: customTokens.sizing.valueZero
249
305
  },
250
- [`${prefixClsWithoutHash}-cell-in-range`]: {
251
- ['&:before']: {
252
- background: customTokens.others.colorTransparent
253
- }
306
+ [`${prefixClsWithoutHash}-cell-inner`]: {
307
+ // the band paints instantly, so drop the fade on the cell or
308
+ // a hovered day fills in two steps
309
+ transition: customTokens.others.valueUnset
254
310
  },
255
- [`${prefixClsWithoutHash}-cell-today,
256
- ${prefixClsWithoutHash}-cell-range-start,
257
- ${prefixClsWithoutHash}-cell-range-end`]: {
258
- [`${prefixClsWithoutHash}-cell-inner`]: {
259
- background: datePickerToken.pickerPanel.row.cellBg,
260
- border: datePickerToken.pickerPanel.row.cellBorder,
261
- borderRadius: datePickerToken.pickerPanel.row.cellBorderRadius
262
- }
311
+ [`${prefixClsWithoutHash}-cell-in-range:not(${prefixClsWithoutHash}-cell-disabled)::before,
312
+ ${prefixClsWithoutHash}-cell-range-start:not(${prefixClsWithoutHash}-cell-disabled)::before,
313
+ ${prefixClsWithoutHash}-cell-range-end:not(${prefixClsWithoutHash}-cell-disabled)::before`]: {
314
+ // match the cell box so the band and the rounded ends line up
315
+ height: customTokens.sizing.valueFull,
316
+ background: token.colorPrimary
263
317
  }
264
318
  },
265
319
  [`${prefixClsWithoutHash}-footer`]: {
@@ -268,6 +322,20 @@ export const DatePicker = (_a) => {
268
322
  }
269
323
  }
270
324
  },
325
+ // Until a start date is picked, rc-picker marks the cell under the
326
+ // cursor as both ends of the range. Keep that one on the plain hover
327
+ // background instead of painting it as a selection.
328
+ [`&${prefixClsWithoutHash}-dropdown-range:not(.${rangeShownClsWithoutHash})`]: {
329
+ [`${prefixClsWithoutHash}-date-panel-container ${prefixClsWithoutHash}-content ${prefixClsWithoutHash}-cell-range-start${prefixClsWithoutHash}-cell-range-end`]: {
330
+ ['&::before']: {
331
+ background: customTokens.others.colorTransparent
332
+ },
333
+ [`${prefixClsWithoutHash}-cell-inner`]: {
334
+ background: token.controlItemBgHover,
335
+ color: datePickerToken.pickerPanel.row.cellTextColor
336
+ }
337
+ }
338
+ },
271
339
  [`&${prefixClsWithoutHash}-input-title`]: {
272
340
  display: customTokens.layout.displayBlock,
273
341
  fontWeight: customTokens.typography.fontWeightBold,
@@ -313,7 +381,33 @@ export const DatePicker = (_a) => {
313
381
  const customPopupStyle = restDatePickerProps.placement === 'center'
314
382
  ? { left: '50%', transform: 'translateX(-50%)' }
315
383
  : {};
316
- const handleDateChange = (dates) => {
384
+ const themeClassName = `${prefixWithoutHash}-${restDatePickerProps.theme}`;
385
+ const controlledRangeValue = restDatePickerProps
386
+ .value;
387
+ // the plain hover background only applies while the panel shows no range at
388
+ // all; once one is picked (or already set) every cell it covers stays blue
389
+ const showsRange = isSelectingRange ||
390
+ (controlledRangeValue
391
+ ? Boolean(controlledRangeValue[0] && controlledRangeValue[1])
392
+ : hasRangeValue);
393
+ const rootClassName = isRange
394
+ ? `${blockWithoutHash} ${blockWithoutHash}-range`
395
+ : `${blockWithoutHash} ${themeClassName}`;
396
+ const handleCalendarChange = (dates, dateStrings, info) => {
397
+ var _a, _b;
398
+ const [start, end] = dates !== null && dates !== void 0 ? dates : [null, null];
399
+ setIsSelectingRange(Boolean(start) !== Boolean(end));
400
+ (_b = (_a = restDatePickerProps).onCalendarChange) === null || _b === void 0 ? void 0 : _b.call(_a, dates, dateStrings, info);
401
+ };
402
+ const handleOpenChange = (open) => {
403
+ var _a, _b;
404
+ if (!open) {
405
+ setIsSelectingRange(false);
406
+ }
407
+ (_b = (_a = restDatePickerProps).onOpenChange) === null || _b === void 0 ? void 0 : _b.call(_a, open);
408
+ };
409
+ const handleDateChange = (dates, dateStrings) => {
410
+ var _a, _b;
317
411
  const updateDateTime = (date, setDate, setTime) => {
318
412
  if (date) {
319
413
  setDate(date.format('MM/DD/YYYY'));
@@ -324,10 +418,12 @@ export const DatePicker = (_a) => {
324
418
  setTime('');
325
419
  }
326
420
  };
421
+ setHasRangeValue(Boolean((dates === null || dates === void 0 ? void 0 : dates[0]) && (dates === null || dates === void 0 ? void 0 : dates[1])));
327
422
  if (dates) {
328
423
  updateDateTime(dates[0], setStartDate, setStartTime);
329
424
  updateDateTime(dates[1], setEndDate, setEndTime);
330
425
  }
426
+ (_b = (_a = restDatePickerProps).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, dates, dateStrings);
331
427
  };
332
428
  const renderFooter = (panelType) => {
333
429
  const renderInputMask = (mask, value, onChange, placeholder) => (React.createElement(InputMask, { mask: mask, value: value, onChange: onChange, placeholder: placeholder }));
@@ -343,19 +439,28 @@ export const DatePicker = (_a) => {
343
439
  ? e => setStartTime(e.target.value)
344
440
  : e => setEndTime(e.target.value), isStartPanel ? '00:00:00' : 'End Time')));
345
441
  };
346
- const RangePickerCustomInput = React.forwardRef((props, ref) => {
347
- const _a = props, { value, onChange, placeholder } = _a, restProps = __rest(_a, ["value", "onChange", "placeholder"]);
348
- return (React.createElement(React.Fragment, null,
349
- React.createElement("input", Object.assign({}, restProps, { ref: ref, value: value, onChange: onChange, placeholder: placeholder })),
350
- React.createElement("span", null,
351
- React.createElement(Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }))));
352
- });
353
- RangePickerCustomInput.displayName = 'RangePickerCustomInput';
354
- return useStyle(pickerType === 'range' ? (React.createElement(AntDatePicker.RangePicker, Object.assign({}, restDatePickerProps, { popupStyle: customPopupStyle, onChange: handleDateChange, renderExtraFooter: () => (React.createElement("div", { className: "range-footer" },
442
+ // A new component type on every render would make React remount the inputs
443
+ // and drop the focus rc-picker moves between them.
444
+ const RangePickerCustomInput = React.useMemo(() => {
445
+ const CustomInput = React.forwardRef((props, ref) => {
446
+ const _a = props, { value, onChange, placeholder } = _a, restProps = __rest(_a, ["value", "onChange", "placeholder"]);
447
+ return (React.createElement(React.Fragment, null,
448
+ React.createElement("input", Object.assign({}, restProps, { ref: ref, value: value, onChange: onChange, placeholder: placeholder })),
449
+ React.createElement("span", null,
450
+ React.createElement(Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }))));
451
+ });
452
+ CustomInput.displayName = 'RangePickerCustomInput';
453
+ return CustomInput;
454
+ }, [suffixIcon, suffixIconSize, suffixIconColor]);
455
+ return useStyle(isRange ? (React.createElement(AntDatePicker.RangePicker, Object.assign({}, restDatePickerProps, { className: rootClassName, style: { [inputWidthVar]: inputWidth }, styles: { popup: { root: customPopupStyle } }, classNames: {
456
+ popup: {
457
+ root: showsRange ? rangeShownClsWithoutHash : ''
458
+ }
459
+ }, onCalendarChange: handleCalendarChange, onOpenChange: handleOpenChange, onChange: handleDateChange, renderExtraFooter: () => (React.createElement("div", { className: "range-footer" },
355
460
  renderFooter('start'),
356
461
  renderFooter('end'))), components: {
357
462
  input: RangePickerCustomInput
358
463
  }, variant: "borderless" }))) : (React.createElement("div", null,
359
464
  showTitle && (React.createElement(Typography.Text, { className: `${prefixWithoutHash}-input-title ${themeClassName}` }, inputTitle)),
360
- React.createElement(AntDatePicker, Object.assign({ className: themeClassName, suffixIcon: React.createElement(Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }) }, restDatePickerProps)))));
465
+ React.createElement(AntDatePicker, Object.assign({ className: rootClassName, style: { width: inputWidth }, suffixIcon: React.createElement(Icon, { icon: suffixIcon, size: suffixIconSize, style: { color: suffixIconColor } }) }, restDatePickerProps)))));
361
466
  };
package/dist/esm/types.d.ts CHANGED
@@ -183,7 +183,8 @@ export interface IDatePickerGroupProps
183
183
  prevIcon?: ReactNode;
184
184
 
185
185
  /**
186
- * To determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px.
186
+ * To determine the size of the picker. Heights match the Input sizes: 40px
187
+ * for large and 26px for small, while the default middle size is 32px.
187
188
  */
188
189
  size?: 'large' | 'middle' | 'small';
189
190
 
@@ -229,7 +230,8 @@ export interface IDatePickerGroupProps
229
230
  showTitle?: boolean;
230
231
 
231
232
  /**
232
- * The width of the input box
233
+ * The width of the picker. On a `range` picker it sets the width of each
234
+ * input instead.
233
235
  */
234
236
  inputWidth?: string;
235
237
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-date-picker",
3
- "version": "1.5.5-260827-0",
3
+ "version": "1.5.6",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -13,8 +13,8 @@
13
13
  "antd": "^5.27.0",
14
14
  "dayjs": "^1.11.13",
15
15
  "react-input-mask": "^2.0.4",
16
- "@akinon/icons": "1.5.0-260827-0",
17
- "@akinon/ui-theme": "1.3.1"
16
+ "@akinon/icons": "1.5.0",
17
+ "@akinon/ui-theme": "1.3.2"
18
18
  },
19
19
  "devDependencies": {
20
20
  "@types/react-input-mask": "^3.0.6",