@alfalab/core-components-switch 3.0.1 → 3.0.3

package/modern/Component.js

@@ -1,19 +1,19 @@
-import React, { forwardRef, useRef, useCallback } from 'react';
-import cn from 'classnames';
+import React, { forwardRef, useRef } from 'react';
 import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"component":"switch__component_s25if","start":"switch__start_s25if","center":"switch__center_s25if","addons":"switch__addons_s25if","block":"switch__block_s25if","switch":"switch__switch_s25if","content":"switch__content_s25if","label":"switch__label_s25if","hint":"switch__hint_s25if","reversed":"switch__reversed_s25if","checked":"switch__checked_s25if","disabled":"switch__disabled_s25if","inactive":"switch__inactive_s25if","focused":"switch__focused_s25if"};
+const styles = {"component":"switch__component_1pggx","start":"switch__start_1pggx","center":"switch__center_1pggx","addons":"switch__addons_1pggx","block":"switch__block_1pggx","switch":"switch__switch_1pggx","content":"switch__content_1pggx","label":"switch__label_1pggx","hint":"switch__hint_1pggx","reversed":"switch__reversed_1pggx","checked":"switch__checked_1pggx","disabled":"switch__disabled_1pggx","inactive":"switch__inactive_1pggx","focused":"switch__focused_1pggx"};
 require('./index.css')
 
 const Switch = forwardRef(({ reversed = false, checked = false, align = 'start', addons, block, disabled, inactive, label, hint, name, value, className, onChange, dataTestId, ...restProps }, ref) => {
     const labelRef = useRef(null);
     const [focused] = useFocus(labelRef, 'keyboard');
-    const handleChange = useCallback((e) => {
+    const handleChange = (e) => {
         if (onChange) {
             onChange(e, { checked: e.target.checked, name });
         }
-    }, [onChange, name]);
+    };
     return (
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
     React.createElement("label", { className: cn(styles.component, styles[align], className, {
@@ -24,7 +24,7 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
             [styles.focused]: focused,
             [styles.block]: block,
         }), ref: mergeRefs([labelRef, ref]) },
-        React.createElement("input", Object.assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
+        React.createElement("input", { type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId, ...restProps }),
         React.createElement("span", { className: styles.switch }),
         (label || hint) && (React.createElement("span", { className: styles.content },
             label && React.createElement("span", { className: styles.label }, label),

package/modern/index.css

@@ -1,5 +1,6 @@
-/* hash: ibo40 */
+/* hash: 1p577 */
 :root {
+} /* deprecated */ :root {
     --color-light-border-link: #007aff;
     --color-light-border-underline: #b6bcc3;
     --color-light-graphic-accent: #ef3124;
@@ -7,31 +8,29 @@
     --color-light-graphic-quaternary: #dbdee1;
     --color-light-graphic-secondary: #6d7986;
     --color-light-text-primary: #0b1f35;
-    --color-light-text-secondary: #546272;
-}
-:root {
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-xl: 16px;
+    --border-radius-circle: 50%;
+} :root {
     --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-s: 12px;
     --gap-m: 16px;
-}
-:root {
-    --border-radius-xl: 16px;
-    --border-radius-circle: 50%;
-}
-:root {
+} :root {
+} :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
-}
-:root {
+} :root {
     --switch-label-color: var(--color-light-text-primary);
     --switch-hint-color: var(--color-light-text-secondary);
     --switch-bg-color: var(--color-light-graphic-secondary);
@@ -48,8 +47,7 @@
 
     /* inactive */
     --switch-inactive-color: var(--color-light-border-underline);
-}
-.switch__component_s25if {
+} .switch__component_1pggx {
     display: inline-flex;
     align-items: flex-start;
     margin: 0;
@@ -57,26 +55,20 @@
     border: 0;
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.switch__component_s25if input {
+} .switch__component_1pggx input {
     opacity: 0;
     position: absolute;
-}
-.switch__start_s25if {
+} .switch__start_1pggx {
     align-items: flex-start;
-}
-.switch__center_s25if {
+} .switch__center_1pggx {
     align-items: center;
-}
-.switch__addons_s25if {
+} .switch__addons_1pggx {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
-}
-.switch__block_s25if {
+} .switch__block_1pggx {
     width: 100%;
-}
-.switch__switch_s25if {
+} .switch__switch_1pggx {
     position: relative;
     border-radius: var(--border-radius-xl);
     width: 36px;
@@ -87,8 +79,7 @@
     border: 2px solid var(--switch-border-color);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
-}
-.switch__switch_s25if:before {
+} .switch__switch_1pggx:before {
     content: '';
     position: absolute;
     top: 0;
@@ -100,78 +91,56 @@
     background-color: var(--color-light-graphic-primary-inverted);
     box-sizing: border-box;
     transition: transform 0.2s ease;
-}
-.switch__content_s25if {
+} .switch__content_1pggx {
     margin-left: var(--gap-s);
     flex-grow: 1;
-}
-.switch__label_s25if {
+} .switch__label_1pggx {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
     color: var(--switch-label-color);
-}
-.switch__label_s25if:not(:only-child) {
+} .switch__label_1pggx:not(:only-child) {
     margin-bottom: var(--gap-2xs);
-}
-.switch__hint_s25if {
+} .switch__hint_1pggx {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
     color: var(--switch-hint-color);
-}
-/* Reversed state */
-.switch__component_s25if.switch__reversed_s25if {
+} /* Reversed state */ .switch__component_1pggx.switch__reversed_1pggx {
     flex-direction: row-reverse;
-}
-.switch__reversed_s25if .switch__content_s25if {
+} .switch__reversed_1pggx .switch__content_1pggx {
     margin-right: var(--gap-m);
     margin-left: 0;
-}
-.switch__reversed_s25if .switch__addons_s25if {
+} .switch__reversed_1pggx .switch__addons_1pggx {
     margin-left: 0;
     padding-left: 0;
     margin-right: auto;
     padding-right: var(--gap-m);
-}
-/* Checked state */
-.switch__checked_s25if .switch__switch_s25if {
+} /* Checked state */ .switch__checked_1pggx .switch__switch_1pggx {
     background-color: var(--switch-checked-bg-color);
     border-color: var(--switch-checked-border-color);
-}
-.switch__checked_s25if .switch__switch_s25if:before {
+} .switch__checked_1pggx .switch__switch_1pggx:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
-}
-/* Disabled state */
-.switch__disabled_s25if {
+} /* Disabled state */ .switch__disabled_1pggx {
     cursor: var(--disabled-cursor);
-}
-.switch__disabled_s25if .switch__switch_s25if {
+} .switch__disabled_1pggx .switch__switch_1pggx {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color);
-}
-.switch__disabled_s25if .switch__label_s25if {
+} .switch__disabled_1pggx .switch__label_1pggx {
     color: var(--switch-disabled-color);
-}
-.switch__disabled_s25if .switch__hint_s25if {
+} .switch__disabled_1pggx .switch__hint_1pggx {
     color: var(--switch-disabled-color);
-}
-/* Inactive */
-.switch__inactive_s25if {
+} /* Inactive */ .switch__inactive_1pggx {
     cursor: var(--disabled-cursor);
-}
-.switch__inactive_s25if .switch__switch_s25if {
+} .switch__inactive_1pggx .switch__switch_1pggx {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color)
-}
-.switch__inactive_s25if .switch__switch_s25if:before {
+} .switch__inactive_1pggx .switch__switch_1pggx:before {
         background-color: var(--switch-inactive-color);
-    }
-/* Focused state */
-.switch__focused_s25if .switch__switch_s25if {
+    } /* Focused state */ .switch__focused_1pggx .switch__switch_1pggx {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/index.js

@@ -1,5 +1,5 @@
+export { Switch } from './Component.js';
 import 'react';
-import 'classnames';
 import 'react-merge-refs';
+import 'classnames';
 import '@alfalab/hooks';
-export { Switch } from './Component.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-switch",
-    "version": "3.0.1",
+    "version": "3.0.3",
     "description": "",
     "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
     "keywords": [],
@@ -20,6 +20,7 @@
     "dependencies": {
         "@alfalab/hooks": "^1.4.1",
         "classnames": "^2.3.1",
-        "react-merge-refs": "^1.1.0"
+        "react-merge-refs": "^1.1.0",
+        "tslib": "^2.4.0"
     }
 }

package/send-stats.js

@@ -55,7 +55,7 @@ async function main() {
         };
 
         return new Promise((resolve, reject) => {
-            const req = http.request(options, res => {
+            const req = http.request(options, (res) => {
                 res.on('end', () => {
                     resolve();
                 });