@sima-land/ui-nucleons 44.2.3 → 44.2.6

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.3",
+  "version": "44.2.6",
   "repository": "ssh://git@github.com:sima-land/ui-nucleons.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",

package/range/index.js

@@ -280,8 +280,8 @@ class Range extends react_1.Component {
                     width: `${finish - start}%`,
                 } }),
             react_1.default.createElement("div", { ref: this.containerRef, className: cx('range-container-base', 'range-container-styled') },
-                react_1.default.createElement("button", { type: 'button', ref: this.startThumbRef, className: cx('thumb-base', 'thumb-styled'), style: { left: `${start}%` } }),
-                react_1.default.createElement("button", { type: 'button', ref: this.finishThumbRef, className: cx('thumb-base', 'thumb-styled'), style: { left: `${finish}%` } }))));
+                react_1.default.createElement("button", { type: 'button', "aria-label": '\u041D\u0430\u0447\u0430\u043B\u044C\u043D\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u0438\u0430\u043F\u0430\u0437\u043E\u043D\u0430', ref: this.startThumbRef, className: cx('thumb-base', 'thumb-styled'), style: { left: `${start}%` }, "data-testid": 'range:thumb-start' }),
+                react_1.default.createElement("button", { type: 'button', "aria-label": '\u041A\u043E\u043D\u0435\u0447\u043D\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u0438\u0430\u043F\u0430\u0437\u043E\u043D\u0430', ref: this.finishThumbRef, className: cx('thumb-base', 'thumb-styled'), style: { left: `${finish}%` }, "data-testid": 'range:thumb-end' }))));
     }
 }
 exports.Range = Range;

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>