@alfalab/core-components-date-time-input 3.1.7 → 3.1.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-time-input/Component.js +2 -2
  2. package/components/date-time-input/index.css +10 -6
  3. package/cssm/components/date-time-input/Component.js +1 -1
  4. package/cssm/components/date-time-input/index.module.css +4 -0
  5. package/esm/components/date-time-input/Component.js +2 -2
  6. package/esm/components/date-time-input/index.css +10 -6
  7. package/modern/components/date-time-input/Component.js +2 -2
  8. package/modern/components/date-time-input/index.css +10 -6
  9. package/package.json +4 -4
package/components/date-time-input/Component.js CHANGED
@@ -22,7 +22,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
22
22
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
23
23
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
24
24
 
25
- var styles = {"component":"date-time-input__component_34cov","calendarContainer":"date-time-input__calendarContainer_34cov","calendarResponsive":"date-time-input__calendarResponsive_34cov","block":"date-time-input__block_34cov"};
25
+ var styles = {"component":"date-time-input__component_dvy59","calendarContainer":"date-time-input__calendarContainer_dvy59","calendarResponsive":"date-time-input__calendarResponsive_dvy59","block":"date-time-input__block_dvy59","calendarIcon":"date-time-input__calendarIcon_dvy59"};
26
26
  require('./index.css')
27
27
 
28
28
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -148,7 +148,7 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
148
148
  _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
149
149
  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, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
150
150
  rightAddons,
151
- picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
151
+ picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
152
152
  picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles.calendarContainer, (_c = {},
153
153
  _c[styles.calendarResponsive] = calendarResponsive,
154
154
  _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
package/components/date-time-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: s9coy */
1
+ /* hash: ah9ag */
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-time-input__component_34cov {
45
+ } .date-time-input__component_dvy59 {
45
46
  display: inline-block;
46
47
  outline: none;
47
48
  position: relative;
48
- } .date-time-input__calendarContainer_34cov {
49
+ } .date-time-input__calendarContainer_dvy59 {
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-time-input__calendarContainer_34cov {
54
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_dvy59 {
54
55
  width: 100%;
55
56
  min-width: 288px
56
57
  }
57
- } .date-time-input__calendarResponsive_34cov {
58
+ } .date-time-input__calendarResponsive_dvy59 {
58
59
  width: var(--calendar-width);
59
60
  padding: 0 var(--gap-m);
60
- } .date-time-input__block_34cov {
61
+ } .date-time-input__block_dvy59 {
61
62
  width: 100%;
63
+ } .date-time-input__calendarIcon_dvy59 {
64
+ margin-right: var(--gap-s-neg);
65
+ height: 100%;
62
66
  }
package/cssm/components/date-time-input/Component.js CHANGED
@@ -147,7 +147,7 @@ var DateTimeInput = React__default.default.forwardRef(function (_a, ref) {
147
147
  _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
148
148
  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, error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
149
149
  rightAddons,
150
- picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
150
+ picker && (React__default.default.createElement(coreComponentsIconButton.IconButton, { className: styles__default.default.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 's' }))) })),
151
151
  picker && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default.default(styles__default.default.calendarContainer, (_c = {},
152
152
  _c[styles__default.default.calendarResponsive] = calendarResponsive,
153
153
  _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
package/cssm/components/date-time-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-time-input/Component.js CHANGED
@@ -12,7 +12,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
12
12
  import 'date-fns/isValid';
13
13
  import 'date-fns/parse';
14
14
 
15
- var styles = {"component":"date-time-input__component_34cov","calendarContainer":"date-time-input__calendarContainer_34cov","calendarResponsive":"date-time-input__calendarResponsive_34cov","block":"date-time-input__block_34cov"};
15
+ var styles = {"component":"date-time-input__component_dvy59","calendarContainer":"date-time-input__calendarContainer_dvy59","calendarResponsive":"date-time-input__calendarResponsive_dvy59","block":"date-time-input__block_dvy59","calendarIcon":"date-time-input__calendarIcon_dvy59"};
16
16
  require('./index.css')
17
17
 
18
18
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -138,7 +138,7 @@ var DateTimeInput = React.forwardRef(function (_a, ref) {
138
138
  _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
139
139
  React.createElement(Input, __assign({}, restProps, { block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React.createElement(React.Fragment, null,
140
140
  rightAddons,
141
- picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) })),
141
+ picker && (React.createElement(IconButton, { className: styles.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })),
142
142
  picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
143
143
  _c[styles.calendarResponsive] = calendarResponsive,
144
144
  _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
package/esm/components/date-time-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: s9coy */
1
+ /* hash: ah9ag */
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-time-input__component_34cov {
45
+ } .date-time-input__component_dvy59 {
45
46
  display: inline-block;
46
47
  outline: none;
47
48
  position: relative;
48
- } .date-time-input__calendarContainer_34cov {
49
+ } .date-time-input__calendarContainer_dvy59 {
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-time-input__calendarContainer_34cov {
54
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_dvy59 {
54
55
  width: 100%;
55
56
  min-width: 288px
56
57
  }
57
- } .date-time-input__calendarResponsive_34cov {
58
+ } .date-time-input__calendarResponsive_dvy59 {
58
59
  width: var(--calendar-width);
59
60
  padding: 0 var(--gap-m);
60
- } .date-time-input__block_34cov {
61
+ } .date-time-input__block_dvy59 {
61
62
  width: 100%;
63
+ } .date-time-input__calendarIcon_dvy59 {
64
+ margin-right: var(--gap-s-neg);
65
+ height: 100%;
62
66
  }
package/modern/components/date-time-input/Component.js CHANGED
@@ -11,7 +11,7 @@ import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isC
11
11
  import 'date-fns/isValid';
12
12
  import 'date-fns/parse';
13
13
 
14
- const styles = {"component":"date-time-input__component_34cov","calendarContainer":"date-time-input__calendarContainer_34cov","calendarResponsive":"date-time-input__calendarResponsive_34cov","block":"date-time-input__block_34cov"};
14
+ const styles = {"component":"date-time-input__component_dvy59","calendarContainer":"date-time-input__calendarContainer_dvy59","calendarResponsive":"date-time-input__calendarResponsive_dvy59","block":"date-time-input__block_dvy59","calendarIcon":"date-time-input__calendarIcon_dvy59"};
15
15
  require('./index.css')
16
16
 
17
17
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
@@ -134,7 +134,7 @@ const DateTimeInput = React.forwardRef(({ className, inputClassName, popoverClas
134
134
  }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
135
135
  React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, error: error, rightAddons: React.createElement(React.Fragment, null,
136
136
  rightAddons,
137
- picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) }),
137
+ picker && (React.createElement(IconButton, { className: styles.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) }),
138
138
  picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
139
139
  [styles.calendarResponsive]: calendarResponsive,
140
140
  }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
package/modern/components/date-time-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: s9coy */
1
+ /* hash: ah9ag */
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-time-input__component_34cov {
45
+ } .date-time-input__component_dvy59 {
45
46
  display: inline-block;
46
47
  outline: none;
47
48
  position: relative;
48
- } .date-time-input__calendarContainer_34cov {
49
+ } .date-time-input__calendarContainer_dvy59 {
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-time-input__calendarContainer_34cov {
54
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_dvy59 {
54
55
  width: 100%;
55
56
  min-width: 288px
56
57
  }
57
- } .date-time-input__calendarResponsive_34cov {
58
+ } .date-time-input__calendarResponsive_dvy59 {
58
59
  width: var(--calendar-width);
59
60
  padding: 0 var(--gap-m);
60
- } .date-time-input__block_34cov {
61
+ } .date-time-input__block_dvy59 {
61
62
  width: 100%;
63
+ } .date-time-input__calendarIcon_dvy59 {
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-time-input",
3
- "version": "3.1.7",
3
+ "version": "3.1.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-calendar": "^6.3.2",
19
- "@alfalab/core-components-input": "^11.1.13",
20
- "@alfalab/core-components-icon-button": "^6.0.11",
18
+ "@alfalab/core-components-calendar": "^6.4.0",
19
+ "@alfalab/core-components-input": "^11.1.15",
20
+ "@alfalab/core-components-icon-button": "^6.1.0",
21
21
  "@alfalab/core-components-popover": "^6.0.8",
22
22
  "@alfalab/hooks": "^1.13.0",
23
23
  "classnames": "^2.3.1",