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

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 -6
  3. package/cssm/components/date-range-input/Component.js +1 -1
  4. package/cssm/components/date-range-input/index.module.css +4 -0
  5. package/esm/components/date-range-input/Component.js +2 -2
  6. package/esm/components/date-range-input/index.css +10 -6
  7. package/modern/components/date-range-input/Component.js +2 -2
  8. package/modern/components/date-range-input/index.css +10 -6
  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_1hpcg","calendarContainer":"date-range-input__calendarContainer_1hpcg","calendarResponsive":"date-range-input__calendarResponsive_1hpcg","block":"date-range-input__block_1hpcg","calendarIcon":"date-range-input__calendarIcon_1hpcg"};
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: j0suf */
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 */
@@ -15,6 +15,7 @@
15
15
  --border-radius-m: 8px;
16
16
  } :root {
17
17
  --gap-m: 16px;
18
+ --gap-s-neg: -12px;
18
19
  } :root {
19
20
  } :root {
20
21
  } :root {
@@ -41,22 +42,25 @@
41
42
  /* marker */
42
43
  } :root {
43
44
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_72hqg {
45
+ } .date-range-input__component_1hpcg {
45
46
  display: inline-block;
46
47
  outline: none;
47
48
  position: relative;
48
- } .date-range-input__calendarContainer_72hqg {
49
+ } .date-range-input__calendarContainer_1hpcg {
49
50
  display: inline-block;
50
51
  box-sizing: border-box;
51
52
  border-radius: var(--calendar-popover-border-radius);
52
53
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_72hqg {
54
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_1hpcg {
54
55
  width: 100%;
55
56
  min-width: 288px
56
57
  }
57
- } .date-range-input__calendarResponsive_72hqg {
58
+ } .date-range-input__calendarResponsive_1hpcg {
58
59
  width: var(--calendar-width);
59
60
  padding: 0 var(--gap-m);
60
- } .date-range-input__block_72hqg {
61
+ } .date-range-input__block_1hpcg {
61
62
  width: 100%;
63
+ } .date-range-input__calendarIcon_1hpcg {
64
+ margin-right: var(--gap-s-neg);
65
+ height: 100%;
62
66
  }
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
@@ -14,6 +14,7 @@
14
14
  --border-radius-m: 8px;
15
15
  } :root {
16
16
  --gap-m: 16px;
17
+ --gap-s-neg: -12px;
17
18
  } :root {
18
19
  } :root {
19
20
  } :root {
@@ -58,4 +59,7 @@
58
59
  padding: 0 var(--gap-m);
59
60
  } .block {
60
61
  width: 100%;
62
+ } .calendarIcon {
63
+ margin-right: var(--gap-s-neg);
64
+ height: 100%;
61
65
  }
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_1hpcg","calendarContainer":"date-range-input__calendarContainer_1hpcg","calendarResponsive":"date-range-input__calendarResponsive_1hpcg","block":"date-range-input__block_1hpcg","calendarIcon":"date-range-input__calendarIcon_1hpcg"};
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: j0suf */
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 */
@@ -15,6 +15,7 @@
15
15
  --border-radius-m: 8px;
16
16
  } :root {
17
17
  --gap-m: 16px;
18
+ --gap-s-neg: -12px;
18
19
  } :root {
19
20
  } :root {
20
21
  } :root {
@@ -41,22 +42,25 @@
41
42
  /* marker */
42
43
  } :root {
43
44
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_72hqg {
45
+ } .date-range-input__component_1hpcg {
45
46
  display: inline-block;
46
47
  outline: none;
47
48
  position: relative;
48
- } .date-range-input__calendarContainer_72hqg {
49
+ } .date-range-input__calendarContainer_1hpcg {
49
50
  display: inline-block;
50
51
  box-sizing: border-box;
51
52
  border-radius: var(--calendar-popover-border-radius);
52
53
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_72hqg {
54
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_1hpcg {
54
55
  width: 100%;
55
56
  min-width: 288px
56
57
  }
57
- } .date-range-input__calendarResponsive_72hqg {
58
+ } .date-range-input__calendarResponsive_1hpcg {
58
59
  width: var(--calendar-width);
59
60
  padding: 0 var(--gap-m);
60
- } .date-range-input__block_72hqg {
61
+ } .date-range-input__block_1hpcg {
61
62
  width: 100%;
63
+ } .date-range-input__calendarIcon_1hpcg {
64
+ margin-right: var(--gap-s-neg);
65
+ height: 100%;
62
66
  }
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_1hpcg","calendarContainer":"date-range-input__calendarContainer_1hpcg","calendarResponsive":"date-range-input__calendarResponsive_1hpcg","block":"date-range-input__block_1hpcg","calendarIcon":"date-range-input__calendarIcon_1hpcg"};
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: j0suf */
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 */
@@ -15,6 +15,7 @@
15
15
  --border-radius-m: 8px;
16
16
  } :root {
17
17
  --gap-m: 16px;
18
+ --gap-s-neg: -12px;
18
19
  } :root {
19
20
  } :root {
20
21
  } :root {
@@ -41,22 +42,25 @@
41
42
  /* marker */
42
43
  } :root {
43
44
  --calendar-popover-border-radius: var(--border-radius-m);
44
- } .date-range-input__component_72hqg {
45
+ } .date-range-input__component_1hpcg {
45
46
  display: inline-block;
46
47
  outline: none;
47
48
  position: relative;
48
- } .date-range-input__calendarContainer_72hqg {
49
+ } .date-range-input__calendarContainer_1hpcg {
49
50
  display: inline-block;
50
51
  box-sizing: border-box;
51
52
  border-radius: var(--calendar-popover-border-radius);
52
53
  border: 1px solid var(--color-light-border-secondary)
53
- } @media (max-width: 374px) { .date-range-input__calendarContainer_72hqg {
54
+ } @media (max-width: 374px) { .date-range-input__calendarContainer_1hpcg {
54
55
  width: 100%;
55
56
  min-width: 288px
56
57
  }
57
- } .date-range-input__calendarResponsive_72hqg {
58
+ } .date-range-input__calendarResponsive_1hpcg {
58
59
  width: var(--calendar-width);
59
60
  padding: 0 var(--gap-m);
60
- } .date-range-input__block_72hqg {
61
+ } .date-range-input__block_1hpcg {
61
62
  width: 100%;
63
+ } .date-range-input__calendarIcon_1hpcg {
64
+ margin-right: var(--gap-s-neg);
65
+ height: 100%;
62
66
  }
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.9",
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.15",
19
+ "@alfalab/core-components-icon-button": "^6.1.0",
20
+ "@alfalab/core-components-calendar": "^6.4.0",
21
21
  "@alfalab/core-components-popover": "^6.0.8",
22
22
  "@alfalab/hooks": "^1.13.0",
23
23
  "classnames": "^2.3.1",