armtek-uikit-react 1.0.118 → 1.0.120

package/assets/BackDrop.scss

@@ -11,8 +11,16 @@
   align-items: center;
   justify-content: center;
 }
-
+.BackDropBase__overlay{
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  position: absolute;
+}
 .BackDropBase__inner{
+  position: relative;
+  z-index: 2;
   max-width: 500px;
   width: 100%;
 }

package/assets/Button.scss

@@ -39,9 +39,7 @@
 .button_radius_none{
   border-radius: 0;
 }
-.button_radius_full{
-  border-radius: 30px;
-}
+
 .button_contained {
   &.button_primary{
     color: #fff;
@@ -79,7 +77,7 @@
       background: var(--color-gray-600);
     }
     &:disabled{
-      background: var(--color-secondary-light);
+      background: var(--color-neutral-light);
     }
   }
   &.button_black {
@@ -92,7 +90,7 @@
       background: var(--color-gray-600);
     }
     &:disabled{
-      background: var(--color-secondary-light);
+      background: var(--color-neutral-light);
     }
   }
   &.button_green {

package/assets/ButtonIcon.scss

@@ -25,4 +25,7 @@
     font-size: 16px;
     & .material_icon {font-size: 16px}
   }
-}
+}
+.ButtonIcon_square{
+  border-radius: 0;
+}

package/assets/Checkbox.scss

@@ -2,35 +2,40 @@
 
 .checkbox{
   position: relative;
+  display: flex;
+}
+.checkbox_text{
+  align-items: center;
 }
 .checkbox__input{
   display: none;
 }
-.checkbox__text_raw{
-  padding-top: 2px;
+.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;
-  min-height: 22px;
-  & .checkbox__text{
-    display: block;
-    padding-left: 31px;
-  }
+  width:22px;
+  height: 22px;
   &:before{
-    width:22px;
-    height: 22px;
+    width: 100%;
+    height: 100%;
     border-radius: $radius;
     border: 1px solid $color-gray-700;
     background: #fff;
     position: absolute;
     content: '';
     left: 0;
-    top: 0px;
+    top: 0;
     box-sizing: border-box;
   }
   &:after{
@@ -49,34 +54,20 @@
 }
 
 .checkbox_medium{
-  min-height: 18px;
-  & .checkbox__text{
-    //padding-left: 27px;
-  }
-  &:before{
-    width:18px;
-    height: 18px;
-  }
+  width:18px;
+  height: 18px;
   &:after{
     left: 6px;
     top: 2px;
     width: 6px;
     height: 10px;
   }
-  & .checkbox__text_raw{
-    padding-top: 0px;
-  }
 }
+
 .checkbox_small{
   font-size: 14px;
-  min-height: 16px;
-  & .checkbox__text{
-    padding-left: 25px;
-  }
-  &:before{
-    width:16px;
-    height: 16px;
-  }
+  width:16px;
+  height: 16px;
   &:after{
     left: 5px;
     top: 3px;
@@ -84,6 +75,7 @@
     width: 6px;
   }
 }
+
 .checkbox__label_intermediate{
   &:after{
     border-left: none;

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.118","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.120","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/BackDrop/BackDropBase.js

@@ -1,6 +1,7 @@
 import css from "./BackDrop.module.scss";
 import clsx from 'clsx';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 export const BackDropBase = props => {
   const {
@@ -10,24 +11,22 @@ export const BackDropBase = props => {
     onClick
   } = props;
   const handleClick = e => {
-    if (e.target instanceof Element) {
-      if (e.target.classList.contains('Arm-BackDropBase')) {
-        e.stopPropagation();
-        if (onClick) onClick(e);
-      }
-    }
+    e.stopPropagation();
+    if (onClick) onClick(e);
   };
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       className: clsx('Arm-BackDropBase', className, css.BackDropBase),
-      onClick: handleClick,
-      children: /*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: css.BackDropBase__overlay,
+        onClick: handleClick
+      }), /*#__PURE__*/_jsx("div", {
         className: css.BackDropBase__inner,
         style: {
           maxWidth: width + 'px'
         },
         children: children
-      })
+      })]
     })
   });
 };

package/ui/ButtonIcon/ButtonIcon.js

@@ -14,7 +14,10 @@ function ButtonIcon(props) {
       variant: 'transparent',
       ...props,
       asIcon: true,
-      className: clsx(css.button_icon, css['button_icon_' + props.size], props.className),
+      className: clsx(css.button_icon, css['button_icon_' + props.size], props.className, {
+        [css['ButtonIcon_square']]: props.radius === false,
+        'border-radius': props.radius === true
+      }),
       children: props.children
     })
   });

package/ui/Form/Checkbox/Checkbox.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { isValidElement, 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,34 +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: clsx(css.checkbox__text, {
-            [css.checkbox__text_raw]: ! /*#__PURE__*/isValidElement(label)
-          }),
-          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
+      })]
     })
   });
 };