@sima-land/ui-nucleons 44.2.2 → 44.2.5

package/_internal/body-scroll.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.allowTouchMove = exports.useBodyScrollLock = void 0;
 const body_scroll_lock_1 = require("body-scroll-lock");
-const react_1 = require("react");
 const constants_1 = require("../constants");
+const hooks_1 = require("../hooks");
 /**
  * Хук управления блокировкой прокрутки body.
  * @param ref Реф элемента для которого нужно отключить прокрутку body.
@@ -11,7 +11,7 @@ const constants_1 = require("../constants");
  * @param options Опции.
  */
 const useBodyScrollLock = (ref, needDisable, options) => {
-    (0, react_1.useEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         const element = ref.current;
         if (element && needDisable) {
             (0, body_scroll_lock_1.disableBodyScroll)(element, options);

package/checkbox/checkbox.module.scss

@@ -1,3 +1,5 @@
+@use '../colors';
+
 .root {
   position: relative;
   display: inline-block;
@@ -17,4 +19,23 @@
   opacity: 0;
   margin: 0;
   padding: 0;
+  &:not(:checked) + svg .mark {
+    display: none;
+  }
+  &:not(:checked) + svg .square {
+    fill: #fff;
+    stroke: colors.$basic-gray24;
+  }
+  &:checked + svg .square {
+    fill: colors.$basic-blue;
+    stroke: colors.$basic-blue;
+  }
+  &:disabled:not(:checked) + svg .square {
+    fill: colors.$basic-gray4;
+    stroke: colors.$basic-gray24;
+  }
+  &:disabled:checked + svg .square {
+    fill: colors.$basic-gray12;
+    stroke: colors.$basic-gray12;
+  }
 }

package/checkbox/index.js

@@ -39,10 +39,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 const react_1 = __importStar(require("react"));
-const checked_svg_1 = __importDefault(require("./svg/checked.svg"));
-const unchecked_svg_1 = __importDefault(require("./svg/unchecked.svg"));
-const disabled_checked_svg_1 = __importDefault(require("./svg/disabled-checked.svg"));
-const disabled_unchecked_svg_1 = __importDefault(require("./svg/disabled-unchecked.svg"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const checkbox_module_scss_1 = __importDefault(require("./checkbox.module.scss"));
 const cx = bind_1.default.bind(checkbox_module_scss_1.default);
@@ -50,21 +46,13 @@ const cx = bind_1.default.bind(checkbox_module_scss_1.default);
  * Компонент стилизованного переключателя (input[type=checkbox]).
  */
 exports.Checkbox = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, style, 'data-testid': testId = 'checkbox', 
+    var { className, style, 'data-testid': testId = 'checkbox' } = _a, 
     // input props
-    defaultChecked, checked = defaultChecked, disabled, onChange } = _a, restProps = __rest(_a, ["className", "style", 'data-testid', "defaultChecked", "checked", "disabled", "onChange"]);
-    const [isChecked, toggleCheck] = (0, react_1.useState)(Boolean(checked));
-    (0, react_1.useEffect)(() => {
-        toggleCheck(Boolean(checked));
-    }, [checked]);
+    restProps = __rest(_a, ["className", "style", 'data-testid']);
     return (react_1.default.createElement("span", { className: cx('root', className), style: style },
-        react_1.default.createElement("input", Object.assign({}, restProps, { "data-testid": testId, ref: ref, type: 'checkbox', className: cx('input'), onChange: event => {
-                toggleCheck(event.target.checked);
-                onChange === null || onChange === void 0 ? void 0 : onChange(event);
-            }, checked: isChecked, disabled: disabled })),
-        !isChecked && !disabled && react_1.default.createElement(unchecked_svg_1.default, null),
-        isChecked && !disabled && react_1.default.createElement(checked_svg_1.default, null),
-        !isChecked && disabled && react_1.default.createElement(disabled_unchecked_svg_1.default, null),
-        isChecked && disabled && react_1.default.createElement(disabled_checked_svg_1.default, null)));
+        react_1.default.createElement("input", Object.assign({}, restProps, { "data-testid": testId, ref: ref, type: 'checkbox', className: cx('input') })),
+        react_1.default.createElement("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none' },
+            react_1.default.createElement("rect", { x: '0.5', y: '0.5', width: '15', height: '15', rx: '1.5', className: cx('square') }),
+            react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z', fill: 'white', className: cx('mark') }))));
 });
 exports.Checkbox.displayName = 'Checkbox';

package/hooks/index.d.ts

@@ -26,4 +26,4 @@ export declare const useOutsideClick: (elementRef: React.MutableRefObject<HTMLEl
  * Нужен для того чтобы не получать ошибку при использовании в SSR с NodeJS.
  * @see {@link https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#gistcomment-2911761}
  */
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/ui-nucleons",
-  "version": "44.2.2",
+  "version": "44.2.5",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",

package/text-field/text-field.module.scss

@@ -91,7 +91,7 @@ input.reset {
       box-shadow: inset 0 -1px colors.$basic-blue;
     }
     &.failed:not(:disabled) {
-      box-shadow: inset 0 -1px colors.$additional-red;
+      box-shadow: inset 0 -1px colors.$additional-deep-red;
     }
     &:not(.multiline) {
       height: 48px;
@@ -158,12 +158,12 @@ input.reset {
     }
     &.failed.focused,
     &.failed.filled {
-      color: colors.$additional-red;
+      color: colors.$additional-deep-red;
     }
   }
   &.variant-desktop {
     &.failed:not(.focused):not(.filled) {
-      color: colors.$additional-red;
+      color: colors.$additional-deep-red;
     }
   }
 }
@@ -190,7 +190,7 @@ input.reset {
     text-overflow: ellipsis;
   }
   &.variant-desktop.failed {
-    color: colors.$additional-red;
+    color: colors.$additional-deep-red;
     --placeholder-color: #{colors.$additional-deep-red};
   }
 }
@@ -200,6 +200,6 @@ input.reset {
   line-height: 16px;
   color: colors.$basic-gray38;
   &.failed {
-    color: colors.$additional-red;
+    color: colors.$additional-deep-red;
   }
 }

package/checkbox/svg/checked.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="16" height="16" rx="2" fill="#1F84DB"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z" fill="white"/>
-</svg>

package/checkbox/svg/disabled-checked.svg

@@ -1,4 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="16" height="16" rx="2" fill="#E0E0E0"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.8 5.21967L6.4 9.18934L5.36569 8.21967C5.05327 7.92678 4.54673 7.92678 4.23431 8.21967C3.9219 8.51256 3.9219 8.98744 4.23431 9.28033L5.83431 10.7803C6.14673 11.0732 6.65327 11.0732 6.96569 10.7803L11.7657 6.28033C12.0781 5.98744 12.0781 5.51256 11.7657 5.21967C11.4533 4.92678 11.1124 4.92678 10.8 5.21967Z" fill="#F5F5F5"/>
-</svg>

package/checkbox/svg/disabled-unchecked.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0.5" y="0.5" width="15" height="15" rx="1.5" fill="#F5F5F5" stroke="#C2C2C2"/>
-</svg>

package/checkbox/svg/unchecked.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="0.5" y="0.5" width="15" height="15" rx="1.5" stroke="#9E9E9E"/>
-</svg>