@alfalab/core-components-date-time-input 4.5.5 → 4.5.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/date-time-input/Component.js +1 -1
  5. package/components/date-time-input/index.css +7 -7
  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/date-time-input/Component.js +1 -1
  11. package/esm/components/date-time-input/index.css +7 -7
  12. package/modern/Component.responsive.d.ts +8 -0
  13. package/modern/Component.responsive.js +4 -8
  14. package/modern/components/date-time-input/Component.js +1 -1
  15. package/modern/components/date-time-input/index.css +7 -7
  16. package/moderncssm/Component.responsive.d.ts +8 -0
  17. package/moderncssm/Component.responsive.js +4 -8
  18. package/package.json +7 -6
  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 DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view' | 'InputComp
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type DateTimeInputMedia = 'desktop' | 'mobile';
12
16
  declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<DateTimeInputProps, "view" | "InputComponent"> & {
@@ -15,5 +19,9 @@ declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<Date
15
19
  * @default 1024
16
20
  */
17
21
  breakpoint?: number | undefined;
22
+ /**
23
+ * Версия, которая будет использоваться при серверном рендеринге
24
+ */
25
+ client?: "desktop" | "mobile" | undefined;
18
26
  } & React.RefAttributes<HTMLInputElement>>;
19
27
  export { DateTimeInputResponsiveProps, DateTimeInputMedia, DateTimeInputResponsive };
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
 
@@ -14,12 +13,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
14
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
14
 
16
15
  var DateTimeInputResponsive = React.forwardRef(function (_a, ref) {
17
- var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
18
- var view = hooks.useMedia([
19
- ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
20
- ['desktop', "(min-width: ".concat(breakpoint, "px)")],
21
- ], 'desktop')[0];
22
- return view === 'desktop' ? (React__default.default.createElement(desktop_Component_desktop.DateTimeInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.DateTimeInputMobile, tslib.__assign({}, restProps, { ref: ref })));
16
+ var breakpoint = _a.breakpoint, client = _a.client, restProps = tslib.__rest(_a, ["breakpoint", "client"]);
17
+ var isDesktop = coreComponentsMq.useIsDesktop(breakpoint, client === 'desktop');
18
+ return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.DateTimeInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.DateTimeInputMobile, tslib.__assign({}, restProps, { ref: ref })));
23
19
  });
24
20
 
25
21
  exports.DateTimeInputResponsive = DateTimeInputResponsive;
package/components/date-time-input/Component.js CHANGED
@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
19
19
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
20
20
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
21
 
22
- var styles = {"component":"date-time-input__component_12vgg","calendarContainer":"date-time-input__calendarContainer_12vgg","calendarResponsive":"date-time-input__calendarResponsive_12vgg","block":"date-time-input__block_12vgg","calendarIcon":"date-time-input__calendarIcon_12vgg"};
22
+ var styles = {"component":"date-time-input__component_r00to","calendarContainer":"date-time-input__calendarContainer_r00to","calendarResponsive":"date-time-input__calendarResponsive_r00to","block":"date-time-input__block_r00to","calendarIcon":"date-time-input__calendarIcon_r00to"};
23
23
  require('./index.css')
24
24
 
25
25
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
package/components/date-time-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ktns */
1
+ /* hash: a5saq */
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; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -47,24 +47,24 @@
47
47
  /* marker */
48
48
  } :root {
49
49
  --calendar-popover-border-radius: var(--border-radius-8);
50
- } .date-time-input__component_12vgg {
50
+ } .date-time-input__component_r00to {
51
51
  display: inline-block;
52
52
  outline: none;
53
53
  position: relative;
54
- } .date-time-input__calendarContainer_12vgg {
54
+ } .date-time-input__calendarContainer_r00to {
55
55
  display: inline-block;
56
56
  box-sizing: border-box;
57
57
  border-radius: var(--calendar-popover-border-radius);
58
58
  border: 1px solid var(--color-light-neutral-300)
59
- } @media (max-width: 374px) { .date-time-input__calendarContainer_12vgg {
59
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_r00to {
60
60
  width: 100%;
61
61
  min-width: 288px
62
62
  }
63
- } .date-time-input__calendarResponsive_12vgg {
63
+ } .date-time-input__calendarResponsive_r00to {
64
64
  width: var(--calendar-width);
65
- } .date-time-input__block_12vgg {
65
+ } .date-time-input__block_r00to {
66
66
  width: 100%;
67
- } .date-time-input__calendarIcon_12vgg {
67
+ } .date-time-input__calendarIcon_r00to {
68
68
  margin-right: var(--gap-12-neg);
69
69
  height: 100%;
70
70
  }
package/cssm/Component.responsive.d.ts CHANGED
@@ -7,6 +7,10 @@ type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view' | 'InputComp
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type DateTimeInputMedia = 'desktop' | 'mobile';
12
16
  declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<DateTimeInputProps, "view" | "InputComponent"> & {
@@ -15,5 +19,9 @@ declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<Date
15
19
  * @default 1024
16
20
  */
17
21
  breakpoint?: number | undefined;
22
+ /**
23
+ * Версия, которая будет использоваться при серверном рендеринге
24
+ */
25
+ client?: "desktop" | "mobile" | undefined;
18
26
  } & React.RefAttributes<HTMLInputElement>>;
19
27
  export { DateTimeInputResponsiveProps, DateTimeInputMedia, DateTimeInputResponsive };
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
 
@@ -14,12 +13,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
14
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
14
 
16
15
  var DateTimeInputResponsive = React.forwardRef(function (_a, ref) {
17
- var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
18
- var view = hooks.useMedia([
19
- ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
20
- ['desktop', "(min-width: ".concat(breakpoint, "px)")],
21
- ], 'desktop')[0];
22
- return view === 'desktop' ? (React__default.default.createElement(desktop_Component_desktop.DateTimeInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.DateTimeInputMobile, tslib.__assign({}, restProps, { ref: ref })));
16
+ var breakpoint = _a.breakpoint, client = _a.client, restProps = tslib.__rest(_a, ["breakpoint", "client"]);
17
+ var isDesktop = coreComponentsMq.useIsDesktop(breakpoint, client === 'desktop');
18
+ return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.DateTimeInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.DateTimeInputMobile, tslib.__assign({}, restProps, { ref: ref })));
23
19
  });
24
20
 
25
21
  exports.DateTimeInputResponsive = DateTimeInputResponsive;
package/esm/Component.responsive.d.ts CHANGED
@@ -7,6 +7,10 @@ type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view' | 'InputComp
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type DateTimeInputMedia = 'desktop' | 'mobile';
12
16
  declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<DateTimeInputProps, "view" | "InputComponent"> & {
@@ -15,5 +19,9 @@ declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<Date
15
19
  * @default 1024
16
20
  */
17
21
  breakpoint?: number | undefined;
22
+ /**
23
+ * Версия, которая будет использоваться при серверном рендеринге
24
+ */
25
+ client?: "desktop" | "mobile" | undefined;
18
26
  } & React.RefAttributes<HTMLInputElement>>;
19
27
  export { DateTimeInputResponsiveProps, DateTimeInputMedia, DateTimeInputResponsive };
package/esm/Component.responsive.js CHANGED
@@ -1,17 +1,13 @@
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 { DateTimeInputDesktop } from './desktop/Component.desktop.js';
6
5
  import { DateTimeInputMobile } from './mobile/Component.mobile.js';
7
6
 
8
7
  var DateTimeInputResponsive = forwardRef(function (_a, ref) {
9
- var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
10
- var view = useMedia([
11
- ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
12
- ['desktop', "(min-width: ".concat(breakpoint, "px)")],
13
- ], 'desktop')[0];
14
- return view === 'desktop' ? (React.createElement(DateTimeInputDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(DateTimeInputMobile, __assign({}, restProps, { ref: ref })));
8
+ var breakpoint = _a.breakpoint, client = _a.client, restProps = __rest(_a, ["breakpoint", "client"]);
9
+ var isDesktop = useIsDesktop(breakpoint, client === 'desktop');
10
+ return isDesktop ? (React.createElement(DateTimeInputDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(DateTimeInputMobile, __assign({}, restProps, { ref: ref })));
15
11
  });
16
12
 
17
13
  export { DateTimeInputResponsive };
package/esm/components/date-time-input/Component.js CHANGED
@@ -9,7 +9,7 @@ import { useDidUpdateEffect } from '@alfalab/hooks';
9
9
  import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
10
10
  import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isCompleteDateInput, isValid, addTimeToDate, parseTimestampToDate } from '../../utils/format.js';
11
11
 
12
- var styles = {"component":"date-time-input__component_12vgg","calendarContainer":"date-time-input__calendarContainer_12vgg","calendarResponsive":"date-time-input__calendarResponsive_12vgg","block":"date-time-input__block_12vgg","calendarIcon":"date-time-input__calendarIcon_12vgg"};
12
+ var styles = {"component":"date-time-input__component_r00to","calendarContainer":"date-time-input__calendarContainer_r00to","calendarResponsive":"date-time-input__calendarResponsive_r00to","block":"date-time-input__block_r00to","calendarIcon":"date-time-input__calendarIcon_r00to"};
13
13
  require('./index.css')
14
14
 
15
15
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
package/esm/components/date-time-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ktns */
1
+ /* hash: a5saq */
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; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -47,24 +47,24 @@
47
47
  /* marker */
48
48
  } :root {
49
49
  --calendar-popover-border-radius: var(--border-radius-8);
50
- } .date-time-input__component_12vgg {
50
+ } .date-time-input__component_r00to {
51
51
  display: inline-block;
52
52
  outline: none;
53
53
  position: relative;
54
- } .date-time-input__calendarContainer_12vgg {
54
+ } .date-time-input__calendarContainer_r00to {
55
55
  display: inline-block;
56
56
  box-sizing: border-box;
57
57
  border-radius: var(--calendar-popover-border-radius);
58
58
  border: 1px solid var(--color-light-neutral-300)
59
- } @media (max-width: 374px) { .date-time-input__calendarContainer_12vgg {
59
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_r00to {
60
60
  width: 100%;
61
61
  min-width: 288px
62
62
  }
63
- } .date-time-input__calendarResponsive_12vgg {
63
+ } .date-time-input__calendarResponsive_r00to {
64
64
  width: var(--calendar-width);
65
- } .date-time-input__block_12vgg {
65
+ } .date-time-input__block_r00to {
66
66
  width: 100%;
67
- } .date-time-input__calendarIcon_12vgg {
67
+ } .date-time-input__calendarIcon_r00to {
68
68
  margin-right: var(--gap-12-neg);
69
69
  height: 100%;
70
70
  }
package/modern/Component.responsive.d.ts CHANGED
@@ -7,6 +7,10 @@ type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view' | 'InputComp
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type DateTimeInputMedia = 'desktop' | 'mobile';
12
16
  declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<DateTimeInputProps, "view" | "InputComponent"> & {
@@ -15,5 +19,9 @@ declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<Date
15
19
  * @default 1024
16
20
  */
17
21
  breakpoint?: number | undefined;
22
+ /**
23
+ * Версия, которая будет использоваться при серверном рендеринге
24
+ */
25
+ client?: "desktop" | "mobile" | undefined;
18
26
  } & React.RefAttributes<HTMLInputElement>>;
19
27
  export { DateTimeInputResponsiveProps, DateTimeInputMedia, DateTimeInputResponsive };
package/modern/Component.responsive.js CHANGED
@@ -1,15 +1,11 @@
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 { DateTimeInputDesktop } from './desktop/Component.desktop.js';
5
4
  import { DateTimeInputMobile } from './mobile/Component.mobile.js';
6
5
 
7
- const DateTimeInputResponsive = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
8
- const [view] = useMedia([
9
- ['mobile', `(max-width: ${breakpoint - 1}px)`],
10
- ['desktop', `(min-width: ${breakpoint}px)`],
11
- ], 'desktop');
12
- return view === 'desktop' ? (React.createElement(DateTimeInputDesktop, { ...restProps, ref: ref })) : (React.createElement(DateTimeInputMobile, { ...restProps, ref: ref }));
6
+ const DateTimeInputResponsive = forwardRef(({ breakpoint, client, ...restProps }, ref) => {
7
+ const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
8
+ return isDesktop ? (React.createElement(DateTimeInputDesktop, { ...restProps, ref: ref })) : (React.createElement(DateTimeInputMobile, { ...restProps, ref: ref }));
13
9
  });
14
10
 
15
11
  export { DateTimeInputResponsive };
package/modern/components/date-time-input/Component.js CHANGED
@@ -8,7 +8,7 @@ import { useDidUpdateEffect } from '@alfalab/hooks';
8
8
  import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
9
9
  import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isCompleteDateInput, isValid, addTimeToDate, parseTimestampToDate } from '../../utils/format.js';
10
10
 
11
- const styles = {"component":"date-time-input__component_12vgg","calendarContainer":"date-time-input__calendarContainer_12vgg","calendarResponsive":"date-time-input__calendarResponsive_12vgg","block":"date-time-input__block_12vgg","calendarIcon":"date-time-input__calendarIcon_12vgg"};
11
+ const styles = {"component":"date-time-input__component_r00to","calendarContainer":"date-time-input__calendarContainer_r00to","calendarResponsive":"date-time-input__calendarResponsive_r00to","block":"date-time-input__block_r00to","calendarIcon":"date-time-input__calendarIcon_r00to"};
12
12
  require('./index.css')
13
13
 
14
14
  /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
package/modern/components/date-time-input/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ktns */
1
+ /* hash: a5saq */
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; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -47,24 +47,24 @@
47
47
  /* marker */
48
48
  } :root {
49
49
  --calendar-popover-border-radius: var(--border-radius-8);
50
- } .date-time-input__component_12vgg {
50
+ } .date-time-input__component_r00to {
51
51
  display: inline-block;
52
52
  outline: none;
53
53
  position: relative;
54
- } .date-time-input__calendarContainer_12vgg {
54
+ } .date-time-input__calendarContainer_r00to {
55
55
  display: inline-block;
56
56
  box-sizing: border-box;
57
57
  border-radius: var(--calendar-popover-border-radius);
58
58
  border: 1px solid var(--color-light-neutral-300)
59
- } @media (max-width: 374px) { .date-time-input__calendarContainer_12vgg {
59
+ } @media (max-width: 374px) { .date-time-input__calendarContainer_r00to {
60
60
  width: 100%;
61
61
  min-width: 288px
62
62
  }
63
- } .date-time-input__calendarResponsive_12vgg {
63
+ } .date-time-input__calendarResponsive_r00to {
64
64
  width: var(--calendar-width);
65
- } .date-time-input__block_12vgg {
65
+ } .date-time-input__block_r00to {
66
66
  width: 100%;
67
- } .date-time-input__calendarIcon_12vgg {
67
+ } .date-time-input__calendarIcon_r00to {
68
68
  margin-right: var(--gap-12-neg);
69
69
  height: 100%;
70
70
  }
package/moderncssm/Component.responsive.d.ts CHANGED
@@ -7,6 +7,10 @@ type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view' | 'InputComp
7
7
  * @default 1024
8
8
  */
9
9
  breakpoint?: number;
10
+ /**
11
+ * Версия, которая будет использоваться при серверном рендеринге
12
+ */
13
+ client?: 'desktop' | 'mobile';
10
14
  };
11
15
  type DateTimeInputMedia = 'desktop' | 'mobile';
12
16
  declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<DateTimeInputProps, "view" | "InputComponent"> & {
@@ -15,5 +19,9 @@ declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<Date
15
19
  * @default 1024
16
20
  */
17
21
  breakpoint?: number | undefined;
22
+ /**
23
+ * Версия, которая будет использоваться при серверном рендеринге
24
+ */
25
+ client?: "desktop" | "mobile" | undefined;
18
26
  } & React.RefAttributes<HTMLInputElement>>;
19
27
  export { DateTimeInputResponsiveProps, DateTimeInputMedia, DateTimeInputResponsive };
package/moderncssm/Component.responsive.js CHANGED
@@ -1,15 +1,11 @@
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 { DateTimeInputDesktop } from './desktop/Component.desktop.js';
5
4
  import { DateTimeInputMobile } from './mobile/Component.mobile.js';
6
5
 
7
- const DateTimeInputResponsive = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
8
- const [view] = useMedia([
9
- ['mobile', `(max-width: ${breakpoint - 1}px)`],
10
- ['desktop', `(min-width: ${breakpoint}px)`],
11
- ], 'desktop');
12
- return view === 'desktop' ? (React.createElement(DateTimeInputDesktop, { ...restProps, ref: ref })) : (React.createElement(DateTimeInputMobile, { ...restProps, ref: ref }));
6
+ const DateTimeInputResponsive = forwardRef(({ breakpoint, client, ...restProps }, ref) => {
7
+ const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
8
+ return isDesktop ? (React.createElement(DateTimeInputDesktop, { ...restProps, ref: ref })) : (React.createElement(DateTimeInputMobile, { ...restProps, ref: ref }));
13
9
  });
14
10
 
15
11
  export { DateTimeInputResponsive };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-date-time-input",
3
- "version": "4.5.5",
3
+ "version": "4.5.6",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -15,17 +15,18 @@
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-input": "^15.3.0",
20
- "@alfalab/core-components-icon-button": "^6.11.0",
21
- "@alfalab/core-components-popover": "^6.3.2",
18
+ "@alfalab/core-components-calendar": "^7.15.2",
19
+ "@alfalab/core-components-input": "^15.3.1",
20
+ "@alfalab/core-components-icon-button": "^6.11.1",
21
+ "@alfalab/core-components-mq": "^4.3.0",
22
+ "@alfalab/core-components-popover": "^6.3.3",
22
23
  "@alfalab/hooks": "^1.13.0",
23
24
  "@alfalab/icons-glyph": "^2.139.0",
24
25
  "classnames": "^2.3.1",
25
26
  "date-fns": "^2.16.1",
26
27
  "react-merge-refs": "^1.1.0",
27
28
  "tslib": "^2.4.0",
28
- "@alfalab/core-components-shared": "^0.13.0"
29
+ "@alfalab/core-components-shared": "^0.14.0"
29
30
  },
30
31
  "themesVersion": "13.5.0",
31
32
  "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 { InputProps } from '@alfalab/core-components-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 { DateTimeInputProps } from './components/date-time-input/Component';
9
8
  import { DateTimeInputDesktop } from './desktop';
@@ -15,21 +14,20 @@ export type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view' | 'In
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 DateTimeInputMedia = 'desktop' | 'mobile';
21
25
 
22
26
  export const DateTimeInputResponsive = forwardRef<HTMLInputElement, DateTimeInputResponsiveProps>(
23
- ({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
24
- const [view] = useMedia<DateTimeInputMedia>(
25
- [
26
- ['mobile', `(max-width: ${breakpoint - 1}px)`],
27
- ['desktop', `(min-width: ${breakpoint}px)`],
28
- ],
29
- 'desktop',
30
- );
27
+ ({ breakpoint, client, ...restProps }, ref) => {
28
+ const isDesktop = useIsDesktop(breakpoint, client === 'desktop');
31
29
 
32
- return view === 'desktop' ? (
30
+ return isDesktop ? (
33
31
  <DateTimeInputDesktop {...restProps} ref={ref} />
34
32
  ) : (
35
33
  <DateTimeInputMobile {...restProps} ref={ref} />