armtek-uikit-react 1.0.117 → 1.0.119

package/assets/Checkbox.scss

@@ -2,23 +2,30 @@
 
 .checkbox{
   position: relative;
+  display: flex;
+}
+.checkbox_text{
+  align-items: center;
 }
 .checkbox__input{
   display: none;
 }
+.checkbox__text{
+  padding-left: calc(var(--size-step));
+  font-size: 16px;
+  display: block;
+}
+.checkbox__text_size_small{
+  font-size: 14px;
+}
 .checkbox__label{
   cursor: pointer;
   text-align: left;
   position: relative;
   display: block;
-  font-size: 16px;
   line-height: 1.2;
   width:22px;
   height: 22px;
-  & .checkbox__text{
-    display: block;
-    padding-left: 31px;
-  }
   &:before{
     width: 100%;
     height: 100%;
@@ -28,7 +35,7 @@
     position: absolute;
     content: '';
     left: 0;
-    top: -3px;
+    top: 0;
     box-sizing: border-box;
   }
   &:after{
@@ -36,7 +43,7 @@
     position: absolute;
     transform: rotate(45deg);
     left: 8px;
-    top: 1px;
+    top: 4px;
     width: 7px;
     height: 11px;
     border-bottom: 2px solid;
@@ -44,61 +51,48 @@
     display: none;
     box-sizing: border-box;
   }
-  & span{
-    display: inline-block;
-    padding-left: 5px;
-  }
 }
 
 .checkbox_medium{
   width:18px;
   height: 18px;
-  & .checkbox__text{
-    //padding-left: 27px;
-  }
   &:after{
     left: 6px;
     top: 2px;
     width: 6px;
     height: 10px;
   }
-  &:before{
-    top:-1px;
-  }
 }
+
 .checkbox_small{
   font-size: 14px;
   width:16px;
   height: 16px;
-  & .checkbox__text{
-    padding-left: 25px;
-  }
   &:after{
     left: 5px;
-    top: 1px;
+    top: 3px;
     height: 8px;
     width: 6px;
   }
-  &:before{
-    top: -2px;
-  }
 }
+
 .checkbox__label_intermediate{
   &:after{
     border-left: none;
     width: 14px;
     transform: none;
-    top: 7px;
+    top: 10px;
     height: 0;
     left: 4px;
     border-right: none;
   }
   &.checkbox_medium:after{
     width: 11px;
+    top: 8px;
   }
   &.checkbox_small:after{
     width: 9px;
-    top: 5px;
+    top: 7px;
   }
 }
 

package/assets/global.css

@@ -210,6 +210,7 @@ body{
 
 .flex{display: flex}
 .block{display: block}
+.d-none{display: none}
 .items-center {align-items: center}
 .flex-wrap {flex-wrap: wrap}
 .justify-center {justify-content: center}

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.117","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.119","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Form/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from 'react';
+import { isValidElement, useRef, useState } from 'react';
 import clsx from 'clsx';
 import css from "./Checkbox.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,32 +21,43 @@ const Checkbox = props => {
     className,
     ...inputProps
   } = props;
-  let [checked, setChecked] = useState(!!props.defaultChecked);
+  const [checked, setChecked] = useState(!!props.defaultChecked);
+  const labelRef = useRef(null);
   const handleChange = e => {
     if (inputProps.checked === undefined) setChecked(prev => !prev);
     if (onChange) onChange(e);
   };
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: clsx(css.checkbox, className),
-      children: /*#__PURE__*/_jsxs("label", {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: clsx(css.checkbox, className, {
+        [css.checkbox_text]: ! /*#__PURE__*/isValidElement(label)
+      }),
+      children: [/*#__PURE__*/_jsx("label", {
+        ref: labelRef,
         className: clsx(css.checkbox__label, css['checkbox_' + size], css['checkbox_' + variant], css['checkbox_' + color], {
           [css.checkbox__label_checked]: inputProps.checked !== undefined ? inputProps.checked : checked,
           [css.checkbox__label_intermediate]: !!intermediate,
           [css.checkbox__label_disabled]: !!inputProps.disabled
         }),
-        children: [/*#__PURE__*/_jsx("input", {
+        children: /*#__PURE__*/_jsx("input", {
           ...inputProps,
           className: clsx(css.checkbox__input, {
             '_checked': !!inputProps.checked
           }),
           onChange: handleChange,
           type: props.type || 'checkbox'
-        }), label && /*#__PURE__*/_jsx("span", {
-          className: css.checkbox__text,
-          children: label
-        })]
-      })
+        })
+      }), label && /*#__PURE__*/_jsx("span", {
+        onClick: () => {
+          var _labelRef$current;
+          return (_labelRef$current = labelRef.current) == null ? void 0 : _labelRef$current.click();
+        },
+        className: clsx(css.checkbox__text, {
+          [css.checkbox__text_raw]: ! /*#__PURE__*/isValidElement(label),
+          [css['checkbox_text_size_' + size]]: size
+        }),
+        children: label
+      })]
     })
   });
 };