@astral/ui 4.0.0-alpha.36 → 4.0.0-alpha.38

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 (11) hide show
  1. package/components/Switch/Switch.d.ts +10 -1
  2. package/components/Switch/Switch.js +19 -2
  3. package/components/Switch/styles.js +5 -3
  4. package/components/theme/components/MuiSwitch.js +5 -5
  5. package/components/utils/date/buildDaysCalendarGrid/buildDaysCalendarGrid.js +3 -2
  6. package/node/components/Switch/Switch.d.ts +10 -1
  7. package/node/components/Switch/Switch.js +19 -2
  8. package/node/components/Switch/styles.js +5 -3
  9. package/node/components/theme/components/MuiSwitch.js +5 -5
  10. package/node/components/utils/date/buildDaysCalendarGrid/buildDaysCalendarGrid.js +2 -1
  11. package/package.json +1 -1
package/components/Switch/Switch.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  /// <reference types="react" />
2
2
  import { type SwitchProps as MuiSwitchProps } from '@mui/material';
3
3
  import { type WithoutEmotionSpecific } from '../types';
4
- export type SwitchProps = WithoutEmotionSpecific<MuiSwitchProps>;
4
+ export type SwitchProps = WithoutEmotionSpecific<MuiSwitchProps> & {
5
+ /**
6
+ * Текст поля
7
+ */
8
+ label?: string;
9
+ /**
10
+ * Расположение текста
11
+ */
12
+ labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
13
+ };
5
14
  export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
package/components/Switch/Switch.js CHANGED
@@ -1,6 +1,23 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
1
12
  import { jsx as _jsx } from "react/jsx-runtime";
2
13
  import { forwardRef } from 'react';
14
+ import { FormControlLabel } from '../FormControlLabel';
15
+ import { Typography } from '../Typography';
3
16
  import { StyledSwitch } from './styles';
4
- export const Switch = forwardRef((props, ref) => {
5
- return _jsx(StyledSwitch, Object.assign({ ref: ref }, props));
17
+ export const Switch = forwardRef((_a, ref) => {
18
+ var { label, labelPlacement } = _a, restProps = __rest(_a, ["label", "labelPlacement"]);
19
+ if (label) {
20
+ return (_jsx(FormControlLabel, { control: _jsx(StyledSwitch, Object.assign({ ref: ref }, restProps)), label: _jsx(Typography, { variant: "body1", component: "span", children: label }), labelPlacement: labelPlacement }));
21
+ }
22
+ return _jsx(StyledSwitch, Object.assign({ ref: ref }, restProps));
6
23
  });
package/components/Switch/styles.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import { Switch as MuiSwitch, switchClasses } from '@mui/material';
2
2
  import { styled } from '../styles';
3
3
  export const StyledSwitch = styled(MuiSwitch) `
4
- .Mui-focusVisible {
5
- border: 2px solid ${({ theme }) => theme.palette.components.focused};
6
- }
4
+
7
5
  ${`.${switchClasses.track}`}::before {
8
6
  display: none;
9
7
  }
@@ -11,4 +9,8 @@ export const StyledSwitch = styled(MuiSwitch) `
11
9
  ${`.${switchClasses.track}`}::after {
12
10
  display: none;
13
11
  }
12
+
13
+ ${({ theme }) => theme.breakpoints.down('sm')} {
14
+ margin: ${({ theme }) => theme.microSpacing(3, 0)};
15
+ }
14
16
  `;
package/components/theme/components/MuiSwitch.js CHANGED
@@ -26,7 +26,7 @@ export const MuiSwitch = {
26
26
  '& :not(.Mui-checked).MuiSwitch-switchBase': {
27
27
  padding: 0,
28
28
  '& + .MuiSwitch-track': {
29
- backgroundColor: theme.palette.grey[700],
29
+ backgroundColor: theme.palette.grey[500],
30
30
  opacity: 1,
31
31
  },
32
32
  },
@@ -36,7 +36,7 @@ export const MuiSwitch = {
36
36
  },
37
37
  // NOT CHECKED HOVER
38
38
  '& :not(.Mui-checked):hover + .MuiSwitch-track': {
39
- backgroundColor: theme.palette.grey[500],
39
+ backgroundColor: theme.palette.grey[600],
40
40
  },
41
41
  // DISABLED TRACK
42
42
  '& .MuiButtonBase-root.MuiSwitch-switchBase.Mui-disabled': {
@@ -50,9 +50,9 @@ export const MuiSwitch = {
50
50
  },
51
51
  },
52
52
  },
53
- // ACTIVE TRACK
54
- '& :not(.Mui-disabled):active + .MuiSwitch-track': {
55
- border: `2px solid ${theme.palette.components.focused}`,
53
+ // FOCUS
54
+ '& .Mui-focusVisible + .MuiSwitch-track': {
55
+ outline: `2px solid ${theme.palette.components.focused}`,
56
56
  },
57
57
  };
58
58
  },
package/components/utils/date/buildDaysCalendarGrid/buildDaysCalendarGrid.js CHANGED
@@ -1,4 +1,4 @@
1
- import { addDays, isDate } from '@astral/utils';
1
+ import { isDate } from '@astral/utils';
2
2
  import { DAYS_IN_WEEK } from '../../../constants';
3
3
  import { buildIsoDate } from '../buildIsoDate';
4
4
  import { checkIsDateInRange } from '../checkIsDateInRange';
@@ -33,7 +33,8 @@ export const buildDaysCalendarGrid = ({ minDate, maxDate, selectedDate, selected
33
33
  return Array.from({ length: DAYS_CALENDAR_ITEMS_COUNT }).map((_, index) => {
34
34
  var _a, _b;
35
35
  // текущая дата в счетчике
36
- const date = addDays(startDate, index - startWeekDay + firstWeekDayGap);
36
+ const date = new Date(startDate);
37
+ date.setUTCDate(startDate.getUTCDate() + index - startWeekDay + firstWeekDayGap);
37
38
  /**
38
39
  * нормализованный номер месяца
39
40
  */
package/node/components/Switch/Switch.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  /// <reference types="react" />
2
2
  import { type SwitchProps as MuiSwitchProps } from '@mui/material';
3
3
  import { type WithoutEmotionSpecific } from '../types';
4
- export type SwitchProps = WithoutEmotionSpecific<MuiSwitchProps>;
4
+ export type SwitchProps = WithoutEmotionSpecific<MuiSwitchProps> & {
5
+ /**
6
+ * Текст поля
7
+ */
8
+ label?: string;
9
+ /**
10
+ * Расположение текста
11
+ */
12
+ labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
13
+ };
5
14
  export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
package/node/components/Switch/Switch.js CHANGED
@@ -1,9 +1,26 @@
1
1
  "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
2
13
  Object.defineProperty(exports, "__esModule", { value: true });
3
14
  exports.Switch = void 0;
4
15
  const jsx_runtime_1 = require("react/jsx-runtime");
5
16
  const react_1 = require("react");
17
+ const FormControlLabel_1 = require("../FormControlLabel");
18
+ const Typography_1 = require("../Typography");
6
19
  const styles_1 = require("./styles");
7
- exports.Switch = (0, react_1.forwardRef)((props, ref) => {
8
- return (0, jsx_runtime_1.jsx)(styles_1.StyledSwitch, Object.assign({ ref: ref }, props));
20
+ exports.Switch = (0, react_1.forwardRef)((_a, ref) => {
21
+ var { label, labelPlacement } = _a, restProps = __rest(_a, ["label", "labelPlacement"]);
22
+ if (label) {
23
+ return ((0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledSwitch, Object.assign({ ref: ref }, restProps)), label: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", component: "span", children: label }), labelPlacement: labelPlacement }));
24
+ }
25
+ return (0, jsx_runtime_1.jsx)(styles_1.StyledSwitch, Object.assign({ ref: ref }, restProps));
9
26
  });
package/node/components/Switch/styles.js CHANGED
@@ -4,9 +4,7 @@ exports.StyledSwitch = void 0;
4
4
  const material_1 = require("@mui/material");
5
5
  const styles_1 = require("../styles");
6
6
  exports.StyledSwitch = (0, styles_1.styled)(material_1.Switch) `
7
- .Mui-focusVisible {
8
- border: 2px solid ${({ theme }) => theme.palette.components.focused};
9
- }
7
+
10
8
  ${`.${material_1.switchClasses.track}`}::before {
11
9
  display: none;
12
10
  }
@@ -14,4 +12,8 @@ exports.StyledSwitch = (0, styles_1.styled)(material_1.Switch) `
14
12
  ${`.${material_1.switchClasses.track}`}::after {
15
13
  display: none;
16
14
  }
15
+
16
+ ${({ theme }) => theme.breakpoints.down('sm')} {
17
+ margin: ${({ theme }) => theme.microSpacing(3, 0)};
18
+ }
17
19
  `;
package/node/components/theme/components/MuiSwitch.js CHANGED
@@ -29,7 +29,7 @@ exports.MuiSwitch = {
29
29
  '& :not(.Mui-checked).MuiSwitch-switchBase': {
30
30
  padding: 0,
31
31
  '& + .MuiSwitch-track': {
32
- backgroundColor: theme.palette.grey[700],
32
+ backgroundColor: theme.palette.grey[500],
33
33
  opacity: 1,
34
34
  },
35
35
  },
@@ -39,7 +39,7 @@ exports.MuiSwitch = {
39
39
  },
40
40
  // NOT CHECKED HOVER
41
41
  '& :not(.Mui-checked):hover + .MuiSwitch-track': {
42
- backgroundColor: theme.palette.grey[500],
42
+ backgroundColor: theme.palette.grey[600],
43
43
  },
44
44
  // DISABLED TRACK
45
45
  '& .MuiButtonBase-root.MuiSwitch-switchBase.Mui-disabled': {
@@ -53,9 +53,9 @@ exports.MuiSwitch = {
53
53
  },
54
54
  },
55
55
  },
56
- // ACTIVE TRACK
57
- '& :not(.Mui-disabled):active + .MuiSwitch-track': {
58
- border: `2px solid ${theme.palette.components.focused}`,
56
+ // FOCUS
57
+ '& .Mui-focusVisible + .MuiSwitch-track': {
58
+ outline: `2px solid ${theme.palette.components.focused}`,
59
59
  },
60
60
  };
61
61
  },
package/node/components/utils/date/buildDaysCalendarGrid/buildDaysCalendarGrid.js CHANGED
@@ -36,7 +36,8 @@ const buildDaysCalendarGrid = ({ minDate, maxDate, selectedDate, selectedRanges,
36
36
  return Array.from({ length: exports.DAYS_CALENDAR_ITEMS_COUNT }).map((_, index) => {
37
37
  var _a, _b;
38
38
  // текущая дата в счетчике
39
- const date = (0, utils_1.addDays)(startDate, index - startWeekDay + firstWeekDayGap);
39
+ const date = new Date(startDate);
40
+ date.setUTCDate(startDate.getUTCDate() + index - startWeekDay + firstWeekDayGap);
40
41
  /**
41
42
  * нормализованный номер месяца
42
43
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "4.0.0-alpha.36",
3
+ "version": "4.0.0-alpha.38",
4
4
  "browser": "./index.js",
5
5
  "main": "./node/index.js",
6
6
  "dependencies": {