@alfalab/core-components-date-time-input 3.1.8 → 3.1.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-time-input/Component.js +2 -2
  2. package/components/date-time-input/index.css +10 -8
  3. package/cssm/components/date-time-input/Component.js +1 -1
  4. package/cssm/components/date-time-input/index.module.css +4 -2
  5. package/esm/components/date-time-input/Component.js +2 -2
  6. package/esm/components/date-time-input/index.css +10 -8
  7. package/modern/components/date-time-input/Component.js +2 -2
  8. package/modern/components/date-time-input/index.css +10 -8
  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_1npzv","calendarContainer":"date-time-input__calendarContainer_1npzv","calendarResponsive":"date-time-input__calendarResponsive_1npzv","block":"date-time-input__block_1npzv"};
25
+ var styles = {"component":"date-time-input__component_9mhw2","calendarContainer":"date-time-input__calendarContainer_9mhw2","calendarResponsive":"date-time-input__calendarResponsive_9mhw2","block":"date-time-input__block_9mhw2","calendarIcon":"date-time-input__calendarIcon_9mhw2"};
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: tp9qj */
1
+ /* hash: ix83t */
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-time-input__component_1npzv {
44
+ } .date-time-input__component_9mhw2 {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-time-input__calendarContainer_1npzv {
48
+ } .date-time-input__calendarContainer_9mhw2 {
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-time-input__calendarContainer_1npzv {
53
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_9mhw2 {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-time-input__calendarResponsive_1npzv {
57
+ } .date-time-input__calendarResponsive_9mhw2 {
58
58
  width: var(--calendar-width);
59
- padding: 0 var(--gap-m);
60
- } .date-time-input__block_1npzv {
59
+ } .date-time-input__block_9mhw2 {
61
60
  width: 100%;
61
+ } .date-time-input__calendarIcon_9mhw2 {
62
+ margin-right: var(--gap-s-neg);
63
+ height: 100%;
62
64
  }
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
@@ -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-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_1npzv","calendarContainer":"date-time-input__calendarContainer_1npzv","calendarResponsive":"date-time-input__calendarResponsive_1npzv","block":"date-time-input__block_1npzv"};
15
+ var styles = {"component":"date-time-input__component_9mhw2","calendarContainer":"date-time-input__calendarContainer_9mhw2","calendarResponsive":"date-time-input__calendarResponsive_9mhw2","block":"date-time-input__block_9mhw2","calendarIcon":"date-time-input__calendarIcon_9mhw2"};
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: tp9qj */
1
+ /* hash: ix83t */
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-time-input__component_1npzv {
44
+ } .date-time-input__component_9mhw2 {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-time-input__calendarContainer_1npzv {
48
+ } .date-time-input__calendarContainer_9mhw2 {
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-time-input__calendarContainer_1npzv {
53
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_9mhw2 {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-time-input__calendarResponsive_1npzv {
57
+ } .date-time-input__calendarResponsive_9mhw2 {
58
58
  width: var(--calendar-width);
59
- padding: 0 var(--gap-m);
60
- } .date-time-input__block_1npzv {
59
+ } .date-time-input__block_9mhw2 {
61
60
  width: 100%;
61
+ } .date-time-input__calendarIcon_9mhw2 {
62
+ margin-right: var(--gap-s-neg);
63
+ height: 100%;
62
64
  }
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_1npzv","calendarContainer":"date-time-input__calendarContainer_1npzv","calendarResponsive":"date-time-input__calendarResponsive_1npzv","block":"date-time-input__block_1npzv"};
14
+ const styles = {"component":"date-time-input__component_9mhw2","calendarContainer":"date-time-input__calendarContainer_9mhw2","calendarResponsive":"date-time-input__calendarResponsive_9mhw2","block":"date-time-input__block_9mhw2","calendarIcon":"date-time-input__calendarIcon_9mhw2"};
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: tp9qj */
1
+ /* hash: ix83t */
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-time-input__component_1npzv {
44
+ } .date-time-input__component_9mhw2 {
45
45
  display: inline-block;
46
46
  outline: none;
47
47
  position: relative;
48
- } .date-time-input__calendarContainer_1npzv {
48
+ } .date-time-input__calendarContainer_9mhw2 {
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-time-input__calendarContainer_1npzv {
53
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_9mhw2 {
54
54
  width: 100%;
55
55
  min-width: 288px
56
56
  }
57
- } .date-time-input__calendarResponsive_1npzv {
57
+ } .date-time-input__calendarResponsive_9mhw2 {
58
58
  width: var(--calendar-width);
59
- padding: 0 var(--gap-m);
60
- } .date-time-input__block_1npzv {
59
+ } .date-time-input__block_9mhw2 {
61
60
  width: 100%;
61
+ } .date-time-input__calendarIcon_9mhw2 {
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-time-input",
3
- "version": "3.1.8",
3
+ "version": "3.1.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-calendar": "^6.3.3",
19
- "@alfalab/core-components-input": "^11.1.14",
20
- "@alfalab/core-components-icon-button": "^6.0.12",
18
+ "@alfalab/core-components-calendar": "^6.5.0",
19
+ "@alfalab/core-components-input": "^11.1.16",
20
+ "@alfalab/core-components-icon-button": "^6.1.1",
21
21
  "@alfalab/core-components-popover": "^6.0.8",
22
22
  "@alfalab/hooks": "^1.13.0",
23
23
  "classnames": "^2.3.1",