@alfalab/core-components-date-range-input 2.3.8 → 2.3.10

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/components/date-range-input/Component.js +2 -2
  2. package/components/date-range-input/index.css +10 -8
  3. package/cssm/components/date-range-input/Component.js +1 -1
  4. package/cssm/components/date-range-input/index.module.css +4 -2
  5. package/esm/components/date-range-input/Component.js +2 -2
  6. package/esm/components/date-range-input/index.css +10 -8
  7. package/modern/components/date-range-input/Component.js +2 -2
  8. package/modern/components/date-range-input/index.css +10 -8
  9. package/package.json +4 -4
package/components/date-range-input/Component.js CHANGED
@@ -24,7 +24,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
24
24
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
25
25
  var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultCompat(dateFnsIsValid);
26
26
 
27
- var styles = {"component":"date-range-input__component_72hqg","calendarContainer":"date-range-input__calendarContainer_72hqg","calendarResponsive":"date-range-input__calendarResponsive_72hqg","block":"date-range-input__block_72hqg"};
27
+ var styles = {"component":"date-range-input__component_y2s0j","calendarContainer":"date-range-input__calendarContainer_y2s0j","calendarResponsive":"date-range-input__calendarResponsive_y2s0j","block":"date-range-input__block_y2s0j","calendarIcon":"date-range-input__calendarIcon_y2s0j"};
28
28
  require('./index.css')
29
29
 
30
30
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -220,7 +220,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
220
220
  _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
221
221
  React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
222
222
  rightAddons,
223
- picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
223
+ picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
224
224
  picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles.calendarContainer, (_c = {},
225
225
  _c[styles.calendarResponsive] = calendarResponsive,
226
226
  _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
package/components/date-range-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1g0xc */
1
+ /* hash: dtvq6 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,7 +14,7 @@
14
14
  } :root {
15
15
  --border-radius-m: 8px;
16
16
  } :root {
17
- --gap-m: 16px;
17
+ --gap-s-neg: -12px;
18
18
  } :root {
19
19
  } :root {
20
20
  } :root {
@@ -41,22 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_72hqg {
44
+ } .date-range-input__component_y2s0j {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-range-input__calendarContainer_72hqg {
48
+ } .date-range-input__calendarContainer_y2s0j {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_72hqg {
53
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_y2s0j {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-range-input__calendarResponsive_72hqg {
57
+ } .date-range-input__calendarResponsive_y2s0j {
58
58
  width: var(--calendar-width);
59
- padding: 0 var(--gap-m);
60
- } .date-range-input__block_72hqg {
59
+ } .date-range-input__block_y2s0j {
61
60
  width: 100%;
61
+ } .date-range-input__calendarIcon_y2s0j {
62
+ margin-right: var(--gap-s-neg);
63
+ height: 100%;
62
64
  }
package/cssm/components/date-range-input/Component.js CHANGED
@@ -219,7 +219,7 @@ var DateRangeInput = React__default.default.forwardRef(function (_a, ref) {
219
219
  _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
220
220
  React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({}, restProps, { block: block, ref: mergeRefs__default.default([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
221
221
  rightAddons,
222
- picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
222
+ picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
223
223
  picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles__default.default.calendarContainer, (_c = {},
224
224
  _c[styles__default.default.calendarResponsive] = calendarResponsive,
225
225
  _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
package/cssm/components/date-range-input/index.module.css CHANGED
@@ -13,7 +13,7 @@
13
13
  } :root {
14
14
  --border-radius-m: 8px;
15
15
  } :root {
16
- --gap-m: 16px;
16
+ --gap-s-neg: -12px;
17
17
  } :root {
18
18
  } :root {
19
19
  } :root {
@@ -55,7 +55,9 @@
55
55
  }
56
56
  } .calendarResponsive {
57
57
  width: var(--calendar-width);
58
- padding: 0 var(--gap-m);
59
58
  } .block {
60
59
  width: 100%;
60
+ } .calendarIcon {
61
+ margin-right: var(--gap-s-neg);
62
+ height: 100%;
61
63
  }
package/esm/components/date-range-input/Component.js CHANGED
@@ -13,7 +13,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
13
13
  import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
14
14
  import 'date-fns/parse';
15
15
 
16
- var styles = {"component":"date-range-input__component_72hqg","calendarContainer":"date-range-input__calendarContainer_72hqg","calendarResponsive":"date-range-input__calendarResponsive_72hqg","block":"date-range-input__block_72hqg"};
16
+ var styles = {"component":"date-range-input__component_y2s0j","calendarContainer":"date-range-input__calendarContainer_y2s0j","calendarResponsive":"date-range-input__calendarResponsive_y2s0j","block":"date-range-input__block_y2s0j","calendarIcon":"date-range-input__calendarIcon_y2s0j"};
17
17
  require('./index.css')
18
18
 
19
19
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -209,7 +209,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
209
209
  _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
210
210
  React.createElement(Input, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
211
211
  rightAddons,
212
- picker && (React.createElement(IconButton, { ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) })),
212
+ picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })),
213
213
  picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
214
214
  _c[styles.calendarResponsive] = calendarResponsive,
215
215
  _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
package/esm/components/date-range-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1g0xc */
1
+ /* hash: dtvq6 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,7 +14,7 @@
14
14
  } :root {
15
15
  --border-radius-m: 8px;
16
16
  } :root {
17
- --gap-m: 16px;
17
+ --gap-s-neg: -12px;
18
18
  } :root {
19
19
  } :root {
20
20
  } :root {
@@ -41,22 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_72hqg {
44
+ } .date-range-input__component_y2s0j {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-range-input__calendarContainer_72hqg {
48
+ } .date-range-input__calendarContainer_y2s0j {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_72hqg {
53
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_y2s0j {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-range-input__calendarResponsive_72hqg {
57
+ } .date-range-input__calendarResponsive_y2s0j {
58
58
  width: var(--calendar-width);
59
- padding: 0 var(--gap-m);
60
- } .date-range-input__block_72hqg {
59
+ } .date-range-input__block_y2s0j {
61
60
  width: 100%;
61
+ } .date-range-input__calendarIcon_y2s0j {
62
+ margin-right: var(--gap-s-neg);
63
+ height: 100%;
62
64
  }
package/modern/components/date-range-input/Component.js CHANGED
@@ -12,7 +12,7 @@ import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
12
12
  import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
13
13
  import 'date-fns/parse';
14
14
 
15
- const styles = {"component":"date-range-input__component_72hqg","calendarContainer":"date-range-input__calendarContainer_72hqg","calendarResponsive":"date-range-input__calendarResponsive_72hqg","block":"date-range-input__block_72hqg"};
15
+ const styles = {"component":"date-range-input__component_y2s0j","calendarContainer":"date-range-input__calendarContainer_y2s0j","calendarResponsive":"date-range-input__calendarResponsive_y2s0j","block":"date-range-input__block_y2s0j","calendarIcon":"date-range-input__calendarIcon_y2s0j"};
16
16
  require('./index.css')
17
17
 
18
18
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -202,7 +202,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
202
202
  }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
203
203
  React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
204
204
  rightAddons,
205
- picker && (React.createElement(IconButton, { ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) }),
205
+ picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) }),
206
206
  picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
207
207
  [styles.calendarResponsive]: calendarResponsive,
208
208
  }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
package/modern/components/date-range-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1g0xc */
1
+ /* hash: dtvq6 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,7 +14,7 @@
14
14
  } :root {
15
15
  --border-radius-m: 8px;
16
16
  } :root {
17
- --gap-m: 16px;
17
+ --gap-s-neg: -12px;
18
18
  } :root {
19
19
  } :root {
20
20
  } :root {
@@ -41,22 +41,24 @@
41
41
  /* marker */
42
42
  } :root {
43
43
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_72hqg {
44
+ } .date-range-input__component_y2s0j {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-range-input__calendarContainer_72hqg {
48
+ } .date-range-input__calendarContainer_y2s0j {
49
49
  display: inline-block;
50
50
  box-sizing: border-box;
51
51
  border-radius: var(--calendar-popover-border-radius);
52
52
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_72hqg {
53
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_y2s0j {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-range-input__calendarResponsive_72hqg {
57
+ } .date-range-input__calendarResponsive_y2s0j {
58
58
  width: var(--calendar-width);
59
- padding: 0 var(--gap-m);
60
- } .date-range-input__block_72hqg {
59
+ } .date-range-input__block_y2s0j {
61
60
  width: 100%;
61
+ } .date-range-input__calendarIcon_y2s0j {
62
+ margin-right: var(--gap-s-neg);
63
+ height: 100%;
62
64
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-date-range-input",
3
- "version": "2.3.8",
3
+ "version": "2.3.10",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,9 +15,9 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-input": "^11.1.14",
19
- "@alfalab/core-components-icon-button": "^6.0.12",
20
- "@alfalab/core-components-calendar": "^6.3.3",
18
+ "@alfalab/core-components-input": "^11.1.16",
19
+ "@alfalab/core-components-icon-button": "^6.1.1",
20
+ "@alfalab/core-components-calendar": "^6.5.0",
21
21
  "@alfalab/core-components-popover": "^6.0.8",
22
22
  "@alfalab/hooks": "^1.13.0",
23
23
  "classnames": "^2.3.1",