@alfalab/core-components-calendar-input 10.4.4 → 10.4.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 (19) hide show
  1. package/@alfalab/icons-glyph/package.json +14 -0
  2. package/Component.responsive.d.ts +8 -0
  3. package/Component.responsive.js +4 -8
  4. package/components/calendar-input/Component.js +1 -1
  5. package/components/calendar-input/index.css +11 -11
  6. package/cssm/Component.responsive.d.ts +8 -0
  7. package/cssm/Component.responsive.js +4 -8
  8. package/esm/Component.responsive.d.ts +8 -0
  9. package/esm/Component.responsive.js +4 -8
  10. package/esm/components/calendar-input/Component.js +1 -1
  11. package/esm/components/calendar-input/index.css +11 -11
  12. package/modern/Component.responsive.d.ts +8 -0
  13. package/modern/Component.responsive.js +4 -8
  14. package/modern/components/calendar-input/Component.js +1 -1
  15. package/modern/components/calendar-input/index.css +11 -11
  16. package/moderncssm/Component.responsive.d.ts +8 -0
  17. package/moderncssm/Component.responsive.js +4 -8
  18. package/package.json +6 -5
  19. package/src/Component.responsive.tsx +9 -11
package/@alfalab/icons-glyph/package.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "name": "@alfalab/icons-glyph",
3
+ "version": "2.140.0",
4
+ "license": "MIT",
5
+ "peerDependencies": {
6
+ "react": ">=16.8.0",
7
+ "react-dom": ">=16.8.0"
8
+ },
9
+ "main": "./index.js",
10
+ "module": "./esm/index.js",
11
+ "publishConfig": {
12
+ "access": "public"
13
+ }
14
+ }
package/Component.responsive.d.ts CHANGED
@@ -7,6 +7,10 @@ type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type CalendarInputMedia = 'desktop' | 'mobile';
12
16
  /**
@@ -19,5 +23,9 @@ declare const CalendarInputResponsive: React.ForwardRefExoticComponent<Omit<Cale
19
23
  * @default 1024
20
24
  */
21
25
  breakpoint?: number | undefined;
26
+ /**
27
+ * Версия, которая будет использоваться при серверном рендеринге
28
+ */
29
+ client?: "desktop" | "mobile" | undefined;
22
30
  } & React.RefAttributes<HTMLInputElement>>;
23
31
  export { CalendarInputResponsiveProps, CalendarInputMedia, CalendarInputResponsive };
package/Component.responsive.js CHANGED
@@ -4,8 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
- var coreComponentsShared = require('@alfalab/core-components-shared');
8
- var hooks = require('@alfalab/hooks');
7
+ var coreComponentsMq = require('@alfalab/core-components-mq');
9
8
  var desktop_Component_desktop = require('./desktop/Component.desktop.js');
10
9
  var mobile_Component_mobile = require('./mobile/Component.mobile.js');
11
10
 
@@ -18,12 +17,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
17
  * use UniversalDateInput instead
19
18
  */
20
19
  var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
21
- var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
22
- var view = hooks.useMedia([
23
- ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
24
- ['desktop', "(min-width: ".concat(breakpoint, "px)")],
25
- ], 'desktop')[0];
26
- return view === 'desktop' ? (React__default.default.createElement(desktop_Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
20
+ var breakpoint = _a.breakpoint, client = _a.client, restProps = tslib.__rest(_a, ["breakpoint", "client"]);
21
+ var isDesktop = coreComponentsMq.useIsDesktop(breakpoint, client === 'desktop');
22
+ return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
27
23
  });
28
24
 
29
25
  exports.CalendarInputResponsive = CalendarInputResponsive;
package/components/calendar-input/Component.js CHANGED
@@ -18,7 +18,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
18
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
19
19
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
20
20
 
21
- var styles = {"component":"calendar-input__component_1heez","block":"calendar-input__block_1heez","calendarContainer":"calendar-input__calendarContainer_1heez","calendarResponsive":"calendar-input__calendarResponsive_1heez","calendarIcon":"calendar-input__calendarIcon_1heez","nativeInput":"calendar-input__nativeInput_1heez"};
21
+ var styles = {"component":"calendar-input__component_hnrno","block":"calendar-input__block_hnrno","calendarContainer":"calendar-input__calendarContainer_hnrno","calendarResponsive":"calendar-input__calendarResponsive_hnrno","calendarIcon":"calendar-input__calendarIcon_hnrno","nativeInput":"calendar-input__nativeInput_hnrno"};
22
22
  require('./index.css')
23
23
 
24
24
  var CalendarInput = React.forwardRef(function (_a, ref) {
package/components/calendar-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 9nhvy */
1
+ /* hash: 1jdge */
2
2
  :root { /* 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 */ /* 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 */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -50,31 +50,31 @@
50
50
  } :root {
51
51
  --calendar-input-icon-color: var(--color-light-neutral-translucent-700);
52
52
  --calendar-input-popover-border-radius: var(--border-radius-8);
53
- } .calendar-input__component_1heez {
53
+ } .calendar-input__component_hnrno {
54
54
  display: inline-block;
55
55
  outline: none;
56
56
  position: relative;
57
- } .calendar-input__block_1heez {
57
+ } .calendar-input__block_hnrno {
58
58
  width: 100%;
59
- } .calendar-input__calendarContainer_1heez {
59
+ } .calendar-input__calendarContainer_hnrno {
60
60
  display: inline-block;
61
61
  box-sizing: border-box;
62
62
  border-radius: var(--calendar-input-popover-border-radius);
63
63
  border: 1px solid var(--color-light-neutral-300)
64
- } @media (max-width: 374px) { .calendar-input__calendarContainer_1heez {
64
+ } @media (max-width: 374px) { .calendar-input__calendarContainer_hnrno {
65
65
  width: 100%;
66
66
  min-width: 288px
67
67
  }
68
- } .calendar-input__calendarResponsive_1heez {
68
+ } .calendar-input__calendarResponsive_hnrno {
69
69
  width: var(--calendar-width);
70
- } .calendar-input__calendarIcon_1heez {
70
+ } .calendar-input__calendarIcon_hnrno {
71
71
  width: 24px;
72
72
  height: 24px;
73
73
  display: block;
74
74
  color: var(--calendar-input-icon-color)
75
- } .calendar-input__calendarIcon_1heez:not(:only-child) {
75
+ } .calendar-input__calendarIcon_hnrno:not(:only-child) {
76
76
  margin-right: var(--gap-4);
77
- } .calendar-input__nativeInput_1heez {
77
+ } .calendar-input__nativeInput_hnrno {
78
78
  opacity: 0;
79
79
  position: absolute;
80
80
  top: var(--gap-0);
@@ -83,8 +83,8 @@
83
83
  height: 100%;
84
84
  appearance: none;
85
85
  z-index: 1
86
- } .calendar-input__nativeInput_1heez::-webkit-calendar-picker-indicator {
86
+ } .calendar-input__nativeInput_hnrno::-webkit-calendar-picker-indicator {
87
87
  display: none;
88
- } .calendar-input__nativeInput_1heez::-webkit-inner-spin-button {
88
+ } .calendar-input__nativeInput_hnrno::-webkit-inner-spin-button {
89
89
  display: none;
90
90
  }
package/cssm/Component.responsive.d.ts CHANGED
@@ -7,6 +7,10 @@ type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type CalendarInputMedia = 'desktop' | 'mobile';
12
16
  /**
@@ -19,5 +23,9 @@ declare const CalendarInputResponsive: React.ForwardRefExoticComponent<Omit<Cale
19
23
  * @default 1024
20
24
  */
21
25
  breakpoint?: number | undefined;
26
+ /**
27
+ * Версия, которая будет использоваться при серверном рендеринге
28
+ */
29
+ client?: "desktop" | "mobile" | undefined;
22
30
  } & React.RefAttributes<HTMLInputElement>>;
23
31
  export { CalendarInputResponsiveProps, CalendarInputMedia, CalendarInputResponsive };
package/cssm/Component.responsive.js CHANGED
@@ -4,8 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
- var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
8
- var hooks = require('@alfalab/hooks');
7
+ var coreComponentsMq = require('@alfalab/core-components-mq/cssm');
9
8
  var desktop_Component_desktop = require('./desktop/Component.desktop.js');
10
9
  var mobile_Component_mobile = require('./mobile/Component.mobile.js');
11
10
 
@@ -18,12 +17,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
17
  * use UniversalDateInput instead
19
18
  */
20
19
  var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
21
- var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
22
- var view = hooks.useMedia([
23
- ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
24
- ['desktop', "(min-width: ".concat(breakpoint, "px)")],
25
- ], 'desktop')[0];
26
- return view === 'desktop' ? (React__default.default.createElement(desktop_Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
20
+ var breakpoint = _a.breakpoint, client = _a.client, restProps = tslib.__rest(_a, ["breakpoint", "client"]);
21
+ var isDesktop = coreComponentsMq.useIsDesktop(breakpoint, client === 'desktop');
22
+ return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
27
23
  });
28
24
 
29
25
  exports.CalendarInputResponsive = CalendarInputResponsive;
package/esm/Component.responsive.d.ts CHANGED
@@ -7,6 +7,10 @@ type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type CalendarInputMedia = 'desktop' | 'mobile';
12
16
  /**
@@ -19,5 +23,9 @@ declare const CalendarInputResponsive: React.ForwardRefExoticComponent<Omit<Cale
19
23
  * @default 1024
20
24
  */
21
25
  breakpoint?: number | undefined;
26
+ /**
27
+ * Версия, которая будет использоваться при серверном рендеринге
28
+ */
29
+ client?: "desktop" | "mobile" | undefined;
22
30
  } & React.RefAttributes<HTMLInputElement>>;
23
31
  export { CalendarInputResponsiveProps, CalendarInputMedia, CalendarInputResponsive };
package/esm/Component.responsive.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { __rest, __assign } from 'tslib';
2
2
  import React, { forwardRef } from 'react';
3
- import { getComponentBreakpoint } from '@alfalab/core-components-shared/esm';
4
- import { useMedia } from '@alfalab/hooks';
3
+ import { useIsDesktop } from '@alfalab/core-components-mq/esm';
5
4
  import { CalendarInputDesktop } from './desktop/Component.desktop.js';
6
5
  import { CalendarInputMobile } from './mobile/Component.mobile.js';
7
6
 
@@ -10,12 +9,9 @@ import { CalendarInputMobile } from './mobile/Component.mobile.js';
10
9
  * use UniversalDateInput instead
11
10
  */
12
11
  var CalendarInputResponsive = forwardRef(function (_a, ref) {
13
- var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
14
- var view = useMedia([
15
- ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
16
- ['desktop', "(min-width: ".concat(breakpoint, "px)")],
17
- ], 'desktop')[0];
18
- return view === 'desktop' ? (React.createElement(CalendarInputDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(CalendarInputMobile, __assign({}, restProps, { ref: ref })));
12
+ var breakpoint = _a.breakpoint, client = _a.client, restProps = __rest(_a, ["breakpoint", "client"]);
13
+ var isDesktop = useIsDesktop(breakpoint, client === 'desktop');
14
+ return isDesktop ? (React.createElement(CalendarInputDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(CalendarInputMobile, __assign({}, restProps, { ref: ref })));
19
15
  });
20
16
 
21
17
  export { CalendarInputResponsive };
package/esm/components/calendar-input/Component.js CHANGED
@@ -8,7 +8,7 @@ import { Popover } from '@alfalab/core-components-popover/esm';
8
8
  import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
9
9
  import { SUPPORTS_INPUT_TYPE_DATE } from '../../utils.js';
10
10
 
11
- var styles = {"component":"calendar-input__component_1heez","block":"calendar-input__block_1heez","calendarContainer":"calendar-input__calendarContainer_1heez","calendarResponsive":"calendar-input__calendarResponsive_1heez","calendarIcon":"calendar-input__calendarIcon_1heez","nativeInput":"calendar-input__nativeInput_1heez"};
11
+ var styles = {"component":"calendar-input__component_hnrno","block":"calendar-input__block_hnrno","calendarContainer":"calendar-input__calendarContainer_hnrno","calendarResponsive":"calendar-input__calendarResponsive_hnrno","calendarIcon":"calendar-input__calendarIcon_hnrno","nativeInput":"calendar-input__nativeInput_hnrno"};
12
12
  require('./index.css')
13
13
 
14
14
  var CalendarInput = forwardRef(function (_a, ref) {
package/esm/components/calendar-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 9nhvy */
1
+ /* hash: 1jdge */
2
2
  :root { /* 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 */ /* 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 */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -50,31 +50,31 @@
50
50
  } :root {
51
51
  --calendar-input-icon-color: var(--color-light-neutral-translucent-700);
52
52
  --calendar-input-popover-border-radius: var(--border-radius-8);
53
- } .calendar-input__component_1heez {
53
+ } .calendar-input__component_hnrno {
54
54
  display: inline-block;
55
55
  outline: none;
56
56
  position: relative;
57
- } .calendar-input__block_1heez {
57
+ } .calendar-input__block_hnrno {
58
58
  width: 100%;
59
- } .calendar-input__calendarContainer_1heez {
59
+ } .calendar-input__calendarContainer_hnrno {
60
60
  display: inline-block;
61
61
  box-sizing: border-box;
62
62
  border-radius: var(--calendar-input-popover-border-radius);
63
63
  border: 1px solid var(--color-light-neutral-300)
64
- } @media (max-width: 374px) { .calendar-input__calendarContainer_1heez {
64
+ } @media (max-width: 374px) { .calendar-input__calendarContainer_hnrno {
65
65
  width: 100%;
66
66
  min-width: 288px
67
67
  }
68
- } .calendar-input__calendarResponsive_1heez {
68
+ } .calendar-input__calendarResponsive_hnrno {
69
69
  width: var(--calendar-width);
70
- } .calendar-input__calendarIcon_1heez {
70
+ } .calendar-input__calendarIcon_hnrno {
71
71
  width: 24px;
72
72
  height: 24px;
73
73
  display: block;
74
74
  color: var(--calendar-input-icon-color)
75
- } .calendar-input__calendarIcon_1heez:not(:only-child) {
75
+ } .calendar-input__calendarIcon_hnrno:not(:only-child) {
76
76
  margin-right: var(--gap-4);
77
- } .calendar-input__nativeInput_1heez {
77
+ } .calendar-input__nativeInput_hnrno {
78
78
  opacity: 0;
79
79
  position: absolute;
80
80
  top: var(--gap-0);
@@ -83,8 +83,8 @@
83
83
  height: 100%;
84
84
  appearance: none;
85
85
  z-index: 1
86
- } .calendar-input__nativeInput_1heez::-webkit-calendar-picker-indicator {
86
+ } .calendar-input__nativeInput_hnrno::-webkit-calendar-picker-indicator {
87
87
  display: none;
88
- } .calendar-input__nativeInput_1heez::-webkit-inner-spin-button {
88
+ } .calendar-input__nativeInput_hnrno::-webkit-inner-spin-button {
89
89
  display: none;
90
90
  }
package/modern/Component.responsive.d.ts CHANGED
@@ -7,6 +7,10 @@ type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type CalendarInputMedia = 'desktop' | 'mobile';
12
16
  /**
@@ -19,5 +23,9 @@ declare const CalendarInputResponsive: React.ForwardRefExoticComponent<Omit<Cale
19
23
  * @default 1024
20
24
  */
21
25
  breakpoint?: number | undefined;
26
+ /**
27
+ * Версия, которая будет использоваться при серверном рендеринге
28
+ */
29
+ client?: "desktop" | "mobile" | undefined;
22
30
  } & React.RefAttributes<HTMLInputElement>>;
23
31
  export { CalendarInputResponsiveProps, CalendarInputMedia, CalendarInputResponsive };
package/modern/Component.responsive.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { forwardRef } from 'react';
2
- import { getComponentBreakpoint } from '@alfalab/core-components-shared/modern';
3
- import { useMedia } from '@alfalab/hooks';
2
+ import { useIsDesktop } from '@alfalab/core-components-mq/modern';
4
3
  import { CalendarInputDesktop } from './desktop/Component.desktop.js';
5
4
  import { CalendarInputMobile } from './mobile/Component.mobile.js';
6
5
 
@@ -8,12 +7,9 @@ import { CalendarInputMobile } from './mobile/Component.mobile.js';
8
7
  * @deprecated
9
8
  * use UniversalDateInput instead
10
9
  */
11
- const CalendarInputResponsive = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
12
- const [view] = useMedia([
13
- ['mobile', `(max-width: ${breakpoint - 1}px)`],
14
- ['desktop', `(min-width: ${breakpoint}px)`],
15
- ], 'desktop');
16
- return view === 'desktop' ? (React.createElement(CalendarInputDesktop, { ...restProps, ref: ref })) : (React.createElement(CalendarInputMobile, { ...restProps, ref: ref }));
10
+ const CalendarInputResponsive = forwardRef(({ breakpoint, client, ...restProps }, ref) => {
11
+ const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
12
+ return isDesktop ? (React.createElement(CalendarInputDesktop, { ...restProps, ref: ref })) : (React.createElement(CalendarInputMobile, { ...restProps, ref: ref }));
17
13
  });
18
14
 
19
15
  export { CalendarInputResponsive };
package/modern/components/calendar-input/Component.js CHANGED
@@ -7,7 +7,7 @@ import { Popover } from '@alfalab/core-components-popover/modern';
7
7
  import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
8
8
  import { SUPPORTS_INPUT_TYPE_DATE } from '../../utils.js';
9
9
 
10
- const styles = {"component":"calendar-input__component_1heez","block":"calendar-input__block_1heez","calendarContainer":"calendar-input__calendarContainer_1heez","calendarResponsive":"calendar-input__calendarResponsive_1heez","calendarIcon":"calendar-input__calendarIcon_1heez","nativeInput":"calendar-input__nativeInput_1heez"};
10
+ const styles = {"component":"calendar-input__component_hnrno","block":"calendar-input__block_hnrno","calendarContainer":"calendar-input__calendarContainer_hnrno","calendarResponsive":"calendar-input__calendarResponsive_hnrno","calendarIcon":"calendar-input__calendarIcon_hnrno","nativeInput":"calendar-input__nativeInput_hnrno"};
11
11
  require('./index.css')
12
12
 
13
13
  const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onCalendarOpen, onCalendarClose, onKeyDown, readOnly, disableUserInput = false, Calendar, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, view = 'desktop', ...restProps }, ref) => {
package/modern/components/calendar-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 9nhvy */
1
+ /* hash: 1jdge */
2
2
  :root { /* 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 */ /* 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 */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-neutral-300: #e7e8eb;
@@ -50,31 +50,31 @@
50
50
  } :root {
51
51
  --calendar-input-icon-color: var(--color-light-neutral-translucent-700);
52
52
  --calendar-input-popover-border-radius: var(--border-radius-8);
53
- } .calendar-input__component_1heez {
53
+ } .calendar-input__component_hnrno {
54
54
  display: inline-block;
55
55
  outline: none;
56
56
  position: relative;
57
- } .calendar-input__block_1heez {
57
+ } .calendar-input__block_hnrno {
58
58
  width: 100%;
59
- } .calendar-input__calendarContainer_1heez {
59
+ } .calendar-input__calendarContainer_hnrno {
60
60
  display: inline-block;
61
61
  box-sizing: border-box;
62
62
  border-radius: var(--calendar-input-popover-border-radius);
63
63
  border: 1px solid var(--color-light-neutral-300)
64
- } @media (max-width: 374px) { .calendar-input__calendarContainer_1heez {
64
+ } @media (max-width: 374px) { .calendar-input__calendarContainer_hnrno {
65
65
  width: 100%;
66
66
  min-width: 288px
67
67
  }
68
- } .calendar-input__calendarResponsive_1heez {
68
+ } .calendar-input__calendarResponsive_hnrno {
69
69
  width: var(--calendar-width);
70
- } .calendar-input__calendarIcon_1heez {
70
+ } .calendar-input__calendarIcon_hnrno {
71
71
  width: 24px;
72
72
  height: 24px;
73
73
  display: block;
74
74
  color: var(--calendar-input-icon-color)
75
- } .calendar-input__calendarIcon_1heez:not(:only-child) {
75
+ } .calendar-input__calendarIcon_hnrno:not(:only-child) {
76
76
  margin-right: var(--gap-4);
77
- } .calendar-input__nativeInput_1heez {
77
+ } .calendar-input__nativeInput_hnrno {
78
78
  opacity: 0;
79
79
  position: absolute;
80
80
  top: var(--gap-0);
@@ -83,8 +83,8 @@
83
83
  height: 100%;
84
84
  appearance: none;
85
85
  z-index: 1
86
- } .calendar-input__nativeInput_1heez::-webkit-calendar-picker-indicator {
86
+ } .calendar-input__nativeInput_hnrno::-webkit-calendar-picker-indicator {
87
87
  display: none;
88
- } .calendar-input__nativeInput_1heez::-webkit-inner-spin-button {
88
+ } .calendar-input__nativeInput_hnrno::-webkit-inner-spin-button {
89
89
  display: none;
90
90
  }
package/moderncssm/Component.responsive.d.ts CHANGED
@@ -7,6 +7,10 @@ type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type CalendarInputMedia = 'desktop' | 'mobile';
12
16
  /**
@@ -19,5 +23,9 @@ declare const CalendarInputResponsive: React.ForwardRefExoticComponent<Omit<Cale
19
23
  * @default 1024
20
24
  */
21
25
  breakpoint?: number | undefined;
26
+ /**
27
+ * Версия, которая будет использоваться при серверном рендеринге
28
+ */
29
+ client?: "desktop" | "mobile" | undefined;
22
30
  } & React.RefAttributes<HTMLInputElement>>;
23
31
  export { CalendarInputResponsiveProps, CalendarInputMedia, CalendarInputResponsive };
package/moderncssm/Component.responsive.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import React, { forwardRef } from 'react';
2
- import { getComponentBreakpoint } from '@alfalab/core-components-shared/moderncssm';
3
- import { useMedia } from '@alfalab/hooks';
2
+ import { useIsDesktop } from '@alfalab/core-components-mq/moderncssm';
4
3
  import { CalendarInputDesktop } from './desktop/Component.desktop.js';
5
4
  import { CalendarInputMobile } from './mobile/Component.mobile.js';
6
5
 
@@ -8,12 +7,9 @@ import { CalendarInputMobile } from './mobile/Component.mobile.js';
8
7
  * @deprecated
9
8
  * use UniversalDateInput instead
10
9
  */
11
- const CalendarInputResponsive = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
12
- const [view] = useMedia([
13
- ['mobile', `(max-width: ${breakpoint - 1}px)`],
14
- ['desktop', `(min-width: ${breakpoint}px)`],
15
- ], 'desktop');
16
- return view === 'desktop' ? (React.createElement(CalendarInputDesktop, { ...restProps, ref: ref })) : (React.createElement(CalendarInputMobile, { ...restProps, ref: ref }));
10
+ const CalendarInputResponsive = forwardRef(({ breakpoint, client, ...restProps }, ref) => {
11
+ const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
12
+ return isDesktop ? (React.createElement(CalendarInputDesktop, { ...restProps, ref: ref })) : (React.createElement(CalendarInputMobile, { ...restProps, ref: ref }));
17
13
  });
18
14
 
19
15
  export { CalendarInputResponsive };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-calendar-input",
3
- "version": "10.4.4",
3
+ "version": "10.4.6",
4
4
  "description": "Calendar input component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,16 +15,17 @@
15
15
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
16
16
  },
17
17
  "dependencies": {
18
- "@alfalab/core-components-calendar": "^7.15.1",
19
- "@alfalab/core-components-date-input": "^4.4.5",
20
- "@alfalab/core-components-popover": "^6.3.2",
18
+ "@alfalab/core-components-calendar": "^7.15.2",
19
+ "@alfalab/core-components-date-input": "^4.4.7",
20
+ "@alfalab/core-components-mq": "^4.3.0",
21
+ "@alfalab/core-components-popover": "^6.3.3",
21
22
  "@alfalab/hooks": "^1.13.0",
22
23
  "@alfalab/icons-glyph": "^2.139.0",
23
24
  "classnames": "^2.3.1",
24
25
  "date-fns": "^2.16.1",
25
26
  "react-merge-refs": "^1.1.0",
26
27
  "tslib": "^2.4.0",
27
- "@alfalab/core-components-shared": "^0.13.0"
28
+ "@alfalab/core-components-shared": "^0.14.0"
28
29
  },
29
30
  "themesVersion": "13.5.0",
30
31
  "varsVersion": "9.15.0"
package/src/Component.responsive.tsx CHANGED
@@ -2,8 +2,7 @@ import React, { forwardRef } from 'react';
2
2
 
3
3
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
4
4
  import { DateInputProps } from '@alfalab/core-components-date-input';
5
- import { getComponentBreakpoint } from '@alfalab/core-components-shared';
6
- import { useMedia } from '@alfalab/hooks';
5
+ import { useIsDesktop } from '@alfalab/core-components-mq';
7
6
 
8
7
  import { CalendarInputProps } from './components/calendar-input/Component';
9
8
  import { CalendarInputDesktop } from './desktop';
@@ -15,6 +14,11 @@ export type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
15
14
  * @default 1024
16
15
  */
17
16
  breakpoint?: number;
17
+
18
+ /**
19
+ * Версия, которая будет использоваться при серверном рендеринге
20
+ */
21
+ client?: 'desktop' | 'mobile';
18
22
  };
19
23
 
20
24
  export type CalendarInputMedia = 'desktop' | 'mobile';
@@ -24,16 +28,10 @@ export type CalendarInputMedia = 'desktop' | 'mobile';
24
28
  * use UniversalDateInput instead
25
29
  */
26
30
  export const CalendarInputResponsive = forwardRef<HTMLInputElement, CalendarInputResponsiveProps>(
27
- ({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
28
- const [view] = useMedia<CalendarInputMedia>(
29
- [
30
- ['mobile', `(max-width: ${breakpoint - 1}px)`],
31
- ['desktop', `(min-width: ${breakpoint}px)`],
32
- ],
33
- 'desktop',
34
- );
31
+ ({ breakpoint, client, ...restProps }, ref) => {
32
+ const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
35
33
 
36
- return view === 'desktop' ? (
34
+ return isDesktop ? (
37
35
  <CalendarInputDesktop {...restProps} ref={ref} />
38
36
  ) : (
39
37
  <CalendarInputMobile {...restProps} ref={ref} />