@devtron-labs/devtron-fe-common-lib 0.0.38 → 0.0.39

package/dist/Common/Hooks/UseClickOutside/UseClickOutside.d.ts

@@ -0,0 +1 @@
+export declare const useClickOutside: (ref: any, callback: () => void) => void;

package/dist/Common/Hooks/index.d.ts

@@ -1 +1,2 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin';
+export { useClickOutside } from './UseClickOutside/UseClickOutside';

package/dist/index.js

@@ -22845,7 +22845,7 @@ var Toggle = function (_a) {
     return (jsxRuntime.jsxs("label", __assign({}, props, { className: "".concat(rootClassName, " toggle__switch ").concat(disabled ? 'disabled' : ''), style: (_b = {}, _b['--color'] = color, _b) }, { children: [jsxRuntime.jsx("input", { type: "checkbox", checked: !!active, onChange: handleClick, className: "toggle__input" }), jsxRuntime.jsx("span", __assign({ className: "toggle__slider ".concat(Icon ? 'with-icon br-4 dc__border' : 'round'), "data-testid": dataTestId }, { children: Icon && jsxRuntime.jsx(Icon, { className: "icon-dim-20 br-4 p-2 ".concat(iconClass) }) }))] })));
 };
 
-var css_248z$1 = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
+var css_248z$1 = ".modal-body--scan-details {\n    position: fixed;\n    top: 0;\n    right: 0;\n    background: var(--N000);\n    width: 800px;\n}\n\n.security-tab__table {\n    width: 100%;\n}\n\n.security-tab__table-header {\n    border-bottom: solid 1px var(--N200);\n}\n\n.security-cell-header {\n    font-size: 12px;\n    font-weight: 600;\n    line-height: 1.5;\n    letter-spacing: normal;\n    text-transform: uppercase;\n    color: var(--N500);\n}\n\n.dc__security-tab__table-row {\n    font-size: 13px;\n    font-weight: normal;\n    line-height: 1.54;\n    letter-spacing: normal;\n    color: var(--N900);\n    box-shadow: inset 0 -1px 0 0 #f5f5f5;\n}\n\n.security-tab__cell-cve,\n.security-tab__cell-severity,\n.security-tab__cell-package,\n.security-tab__cell-current-ver,\n.security-tab__cell-fixed-ver,\n.security-tab__cell-policy {\n    padding: 10px;\n    max-width: 120px;\n    word-wrap: break-word;\n}\n\n.security-tab__cell-cve {\n    padding-left: 0px;\n    text-align: left;\n    width: 20%;\n}\n\n.security-tab__cell-policy {\n    padding-right: 0px;\n}\n\n.security-tab__cell-policy--whitelist,\n.security-tab__cell-policy--whitelisted {\n    color: var(--G500);\n    text-transform: capitalize;\n}\n\n.security-tab__cell-policy--block {\n    color: var(--R500);\n    text-transform: capitalize;\n}\n\n.scanned-object__results {\n    margin: 0 20px;\n}";
 styleInject(css_248z$1);
 
 function ScanVulnerabilitiesTable(_a) {
@@ -23616,6 +23616,20 @@ var useSuperAdmin = function () {
     return { isSuperAdmin: isSuperAdmin };
 };
 
+var useClickOutside = function (ref, callback) {
+    React.useEffect(function () {
+        var handleClickOutside = function (e) {
+            if ((ref === null || ref === void 0 ? void 0 : ref.current) && !ref.current.contains(e.target)) {
+                callback();
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return function () {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [ref, callback]);
+};
+
 var StatusConstants = {
     NOT_DEPLOYED: {
         noSpaceLower: 'notdeployed',
@@ -23811,6 +23825,7 @@ exports.toastAccessDenied = toastAccessDenied;
 exports.trash = trash;
 exports.useAsync = useAsync;
 exports.useBreadcrumb = useBreadcrumb;
+exports.useClickOutside = useClickOutside;
 exports.useEffectAfterMount = useEffectAfterMount;
 exports.useForm = useForm;
 exports.useSearchString = useSearchString;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.38",
+    "version": "0.0.39",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/Hooks/UseClickOutside/UseClickOutside.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react'
+
+export const useClickOutside = (ref: any, callback: () => void) => {
+    useEffect(() => {
+        const handleClickOutside = (e: any) => {
+            if (ref?.current && !ref.current.contains(e.target)) {
+                callback()
+            }
+        }
+        document.addEventListener('click', handleClickOutside)
+        return () => {
+            document.removeEventListener('click', handleClickOutside)
+        }
+    }, [ref, callback])
+}

package/src/Common/Hooks/index.ts

@@ -1 +1,2 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
+export { useClickOutside } from './UseClickOutside/UseClickOutside'

package/src/Common/Security/scanVulnerabilities.css

@@ -39,6 +39,8 @@
 .security-tab__cell-fixed-ver,
 .security-tab__cell-policy {
     padding: 10px;
+    max-width: 120px;
+    word-wrap: break-word;
 }
 
 .security-tab__cell-cve {