intelicoreact 0.0.24 → 0.0.41

package/src/Atomic/{FormElements → UI}/Status/Status.js

@@ -3,9 +3,7 @@ import cn from 'classnames';
 
 import './Status.scss';
 
-const Status = ({ value, status, disabled, type, active = 0, pause = 0, className, noBackground }) => {
-  const label = (value || status)?.[0].toUpperCase() + (value || status)?.slice(1);
-
+const Status = ({ label, status, disabled, type, active = 0, pause = 0, className, noBackground, children }) => {
   return (
     <div className={cn({ disabled }, className)}>
       {type === 'number' ? (
@@ -30,7 +28,7 @@ const Status = ({ value, status, disabled, type, active = 0, pause = 0, classNam
             { 'color--gray-gull': noBackground && status === 'pause' && !className }
           )}
         >
-          {label}
+          {children || label}
         </div>
       )}
     </div>

package/src/Atomic/{FormElements → UI}/Status/Status.stories.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import Status from './Status';
 
-import '../../../../scss/main.scss';
-
 global.lng = 'en';
 
 export default {
-  title: 'Status',
+  title: 'UI/Status',
   component: Status,
   argTypes: {
     status: {
@@ -21,6 +19,9 @@ export default {
     },
     disabled: {
       description: 'boolean'
+    },
+    children: {
+      description: 'any rect children'
     }
   }
 };

package/src/Functions/useClickOutside.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+export const useClickOutside = (ref, setOut, open) => {
+  function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setOut(open);
+    }
+  }
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+};

package/src/scss/main.scss

@@ -35,6 +35,6 @@ button {
 
 .main {
     &__wrap {
-        display: flex;  
+        display: flex;
     }
-}
+}