@devtron-labs/devtron-fe-common-lib 0.0.7-beta-14 → 0.0.7-beta-15

package/dist/Common/CustomTagSelector/TagLabelValueSelector.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TagLabelValueSelectorType } from './Types';
-export declare const TagLabelValueSelector: ({ selectedTagIndex, tagData, setTagData, tagOptions, isRequired, tagInputType, placeholder, tabIndex, refVar, dependentRef, }: TagLabelValueSelectorType) => JSX.Element;
+export declare const TagLabelValueSelector: ({ selectedTagIndex, tagData, setTagData, tagOptions, isRequired, tagInputType, placeholder, tabIndex, refVar, dependentRef, noBackDrop }: TagLabelValueSelectorType) => JSX.Element;

package/dist/Common/CustomTagSelector/Types.d.ts

@@ -49,6 +49,7 @@ export interface TagLabelValueSelectorType {
     tabIndex?: number;
     refVar?: React.MutableRefObject<HTMLTextAreaElement>;
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
+    noBackDrop?: boolean;
 }
 export interface ResizableTagTextAreaProps {
     className?: string;

package/dist/Common/Modals/Modal.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ModalType } from '../Types';
-export declare const Modal: ({ style, children, modal, rootClassName, onClick, callbackRef, preventWheelDisable, }: ModalType) => React.ReactPortal;
+export declare const Modal: ({ style, children, modal, rootClassName, onClick, callbackRef, preventWheelDisable, noBackDrop }: ModalType) => React.ReactPortal;

package/dist/Common/PopupMenu.d.ts

@@ -3,6 +3,6 @@ import { PopupMenuBodyType, PopupMenuButtonType, PopupMenuType } from './Types';
 declare function PopupMenu({ children, onToggleCallback, autoClose, autoPosition, }: PopupMenuType): any;
 declare namespace PopupMenu {
     var Button: ({ children, disabled, rootClassName, tabIndex, onHover, isKebab, }: PopupMenuButtonType) => JSX.Element;
-    var Body: ({ children, rootClassName, style, autoWidth, preventWheelDisable, }: PopupMenuBodyType) => JSX.Element;
+    var Body: ({ children, rootClassName, style, autoWidth, preventWheelDisable, noBackDrop }: PopupMenuBodyType) => JSX.Element;
 }
 export default PopupMenu;

package/dist/Common/Types.d.ts

@@ -142,6 +142,7 @@ export interface PopupMenuBodyType {
     style?: React.CSSProperties;
     autoWidth?: boolean;
     preventWheelDisable?: boolean;
+    noBackDrop?: boolean;
 }
 export interface ModalType {
     style?: React.CSSProperties;
@@ -151,4 +152,5 @@ export interface ModalType {
     onClick?: any;
     callbackRef?: (element?: any) => any;
     preventWheelDisable?: boolean;
+    noBackDrop?: boolean;
 }

package/dist/index.js

@@ -4057,7 +4057,7 @@ var Drawer = function (_a) {
 };
 
 var Modal = function (_a) {
-    var _b = _a.style, style = _b === void 0 ? {} : _b, children = _a.children, _c = _a.modal, modal = _c === void 0 ? false : _c, _d = _a.rootClassName, rootClassName = _d === void 0 ? '' : _d, _e = _a.onClick, onClick = _e === void 0 ? null : _e, _f = _a.callbackRef, callbackRef = _f === void 0 ? null : _f, _g = _a.preventWheelDisable, preventWheelDisable = _g === void 0 ? false : _g;
+    var _b = _a.style, style = _b === void 0 ? {} : _b, children = _a.children, _c = _a.modal, modal = _c === void 0 ? false : _c, _d = _a.rootClassName, rootClassName = _d === void 0 ? '' : _d, _e = _a.onClick, onClick = _e === void 0 ? null : _e, _f = _a.callbackRef, callbackRef = _f === void 0 ? null : _f, _g = _a.preventWheelDisable, preventWheelDisable = _g === void 0 ? false : _g, noBackDrop = _a.noBackDrop;
     var innerRef = React.useRef(null);
     function handleClick(e) {
         var _a;
@@ -4087,6 +4087,8 @@ var Modal = function (_a) {
         var modal = document.getElementById('visible-modal');
         if (modal)
             modal.classList.add('show');
+        if (noBackDrop)
+            modal.classList.add('no-back-drop');
         if (!preventWheelDisable)
             document.body.addEventListener('wheel', disableWheel, { passive: false });
         return function () {
@@ -4095,6 +4097,8 @@ var Modal = function (_a) {
             document.removeEventListener('click', handleClick);
             if (modal)
                 modal.classList.remove('show');
+            if (noBackDrop)
+                modal.classList.remove('no-back-drop');
         };
     }, []);
     return ReactDOM.createPortal(jsxRuntime.jsx("div", __assign({ tabIndex: 0, onClick: onClick, ref: function (el) {
@@ -4402,9 +4406,9 @@ function Button(_a) {
     return (jsxRuntime.jsx("button", __assign({ ref: initialiseButtonWidth, type: "button", tabIndex: tabIndex, disabled: disabled, className: "".concat(rootClassName, " ").concat(popupPosition ? 'focused' : '', "  ").concat(isKebab ? 'popup-button-kebab' : 'popup-button'), onMouseEnter: onHover ? (disabled ? null : handleOpen) : function () { }, onClick: disabled ? null : handleOpen }, { children: children })));
 }
 function Body$1(_a) {
-    var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.rootClassName, rootClassName = _c === void 0 ? '' : _c, _d = _a.style, style = _d === void 0 ? {} : _d, _e = _a.autoWidth, autoWidth = _e === void 0 ? false : _e, _f = _a.preventWheelDisable, preventWheelDisable = _f === void 0 ? false : _f;
+    var _b = _a.children, children = _b === void 0 ? null : _b, _c = _a.rootClassName, rootClassName = _c === void 0 ? '' : _c, _d = _a.style, style = _d === void 0 ? {} : _d, _e = _a.autoWidth, autoWidth = _e === void 0 ? false : _e, _f = _a.preventWheelDisable, preventWheelDisable = _f === void 0 ? false : _f, noBackDrop = _a.noBackDrop;
     var _g = usePopupContext(), handleClose = _g.handleClose, popupPosition = _g.popupPosition, opacity = _g.opacity, callbackRef = _g.callbackRef, buttonWidth = _g.buttonWidth;
-    return popupPosition ? (jsxRuntime.jsx(Modal, __assign({ callbackRef: callbackRef, onClick: handleClose, rootClassName: "".concat(rootClassName, " popup-body ").concat(!children ? 'popup-body--empty' : '', " ").concat(Object.keys(popupPosition).join(' ')), style: __assign(__assign(__assign(__assign({}, popupPosition), style), (autoWidth ? { width: buttonWidth.current } : {})), { opacity: opacity }), preventWheelDisable: preventWheelDisable }, { children: children }))) : null;
+    return popupPosition ? (jsxRuntime.jsx(Modal, __assign({ callbackRef: callbackRef, onClick: handleClose, rootClassName: "".concat(rootClassName, " popup-body ").concat(!children ? 'popup-body--empty' : '', " ").concat(Object.keys(popupPosition).join(' ')), style: __assign(__assign(__assign(__assign({}, popupPosition), style), (autoWidth ? { width: buttonWidth.current } : {})), { opacity: opacity }), preventWheelDisable: preventWheelDisable, noBackDrop: noBackDrop }, { children: children }))) : null;
 }
 PopupMenu.Button = Button;
 PopupMenu.Body = Body$1;
@@ -8619,7 +8623,7 @@ function ResizableTagTextArea(_a) {
 }
 
 var TagLabelValueSelector = function (_a) {
-    var selectedTagIndex = _a.selectedTagIndex, tagData = _a.tagData, setTagData = _a.setTagData, tagOptions = _a.tagOptions, isRequired = _a.isRequired, tagInputType = _a.tagInputType, placeholder = _a.placeholder, _b = _a.tabIndex, tabIndex = _b === void 0 ? null : _b, refVar = _a.refVar, dependentRef = _a.dependentRef;
+    var selectedTagIndex = _a.selectedTagIndex, tagData = _a.tagData, setTagData = _a.setTagData, tagOptions = _a.tagOptions, isRequired = _a.isRequired, tagInputType = _a.tagInputType, placeholder = _a.placeholder, _b = _a.tabIndex, tabIndex = _b === void 0 ? null : _b, refVar = _a.refVar, dependentRef = _a.dependentRef, noBackDrop = _a.noBackDrop;
     var _c = __read(React.useState(''), 2), selectedValue = _c[0], setSelectedValue = _c[1];
     var _d = __read(React.useState(''), 2), activeElement = _d[0], setActiveElement = _d[1];
     var validationRules = new ValidationRules();
@@ -8681,10 +8685,10 @@ var TagLabelValueSelector = function (_a) {
         return null;
     };
     var option = function (tag, index) {
-        return (jsxRuntime.jsx("div", __assign({ "data-key": tag.label, "data-propagate": tag.propagate, className: "dc__hover-n50 lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor", onClick: onSelectValue }, { children: tag.label }), "".concat(tag.value, "-").concat(index)));
+        return (jsxRuntime.jsx("div", __assign({ "data-key": tag.label, "data-propagate": tag.propagate, className: "dc__hover-n50 dc__ellipsis-right lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor", onClick: onSelectValue }, { children: tag.label }), "".concat(tag.value, "-").concat(index)));
     };
     var optionWithTippy = function (tag, index) {
-        return (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: false, placement: "right", content: jsxRuntime.jsxs("div", __assign({ className: "pt-6 pr-10 pb-6 pl-10" }, { children: [jsxRuntime.jsx("div", __assign({ className: "mb-10 fs-12 fw-6 cn-0 dc__break-word" }, { children: tag.label })), jsxRuntime.jsx("div", __assign({ className: "fs-12 fw-4 cn-0 dc__break-word" }, { children: tag.description }))] })) }, { children: option(tag, index) })));
+        return (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: false, placement: "right", content: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", __assign({ className: "mb-10 fs-12 fw-6 cn-0 dc__break-word" }, { children: tag.label })), jsxRuntime.jsx("div", __assign({ className: "fs-12 fw-4 cn-0 dc__break-word" }, { children: tag.description }))] }) }, { children: option(tag, index) })));
     };
     var renderSuggestions = function () {
         if (tagOptions === null || tagOptions === void 0 ? void 0 : tagOptions.length) {
@@ -8702,7 +8706,7 @@ var TagLabelValueSelector = function (_a) {
                         ? "dc__no-right-radius"
                         : "dc__no-border-radius dc__no-right-border dc__no-left-border", " ").concat(tagData[tagInputType === exports.KEY_VALUE.KEY ? 'isInvalidKey' : 'isInvalidValue']
                         ? 'form__input--error'
-                        : ''), value: selectedValue, onChange: handleInputChange, onBlur: handleOnBlur, onFocus: handleOnFocus, placeholder: placeholder, tabIndex: tabIndex, refVar: refVar, dependentRef: dependentRef }) })), popupMenuBody && (jsxRuntime.jsx(PopupMenu.Body, __assign({ rootClassName: "mxh-210 dc__overflow-auto tag-".concat(selectedTagIndex, "-class"), autoWidth: true, preventWheelDisable: true }, { children: popupMenuBody })))] })));
+                        : ''), value: selectedValue, onChange: handleInputChange, onBlur: handleOnBlur, onFocus: handleOnFocus, placeholder: placeholder, tabIndex: tabIndex, refVar: refVar, dependentRef: dependentRef }) })), popupMenuBody && (jsxRuntime.jsx(PopupMenu.Body, __assign({ rootClassName: "mxh-210 dc__overflow-auto tag-".concat(selectedTagIndex, "-class"), autoWidth: true, preventWheelDisable: true, noBackDrop: noBackDrop }, { children: popupMenuBody })))] })));
 };
 
 var TagDetails = function (_a) {

package/package.json

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

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -20,6 +20,7 @@ export const TagLabelValueSelector = ({
     tabIndex = null,
     refVar,
     dependentRef,
+    noBackDrop
 }: TagLabelValueSelectorType) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
     const [activeElement, setActiveElement] = useState<string>('')
@@ -111,7 +112,7 @@ export const TagLabelValueSelector = ({
                 key={`${tag.value}-${index}`}
                 data-key={tag.label}
                 data-propagate={tag.propagate}
-                className="dc__hover-n50 lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor"
+                className="dc__hover-n50 dc__ellipsis-right lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor"
                 onClick={onSelectValue}
             >
                 {tag.label}
@@ -126,7 +127,7 @@ export const TagLabelValueSelector = ({
                 arrow={false}
                 placement="right"
                 content={
-                    <div className="pt-6 pr-10 pb-6 pl-10">
+                    <div>
                         <div className="mb-10 fs-12 fw-6 cn-0 dc__break-word">
                             {tag.label}
                         </div>
@@ -188,6 +189,7 @@ export const TagLabelValueSelector = ({
                     rootClassName={`mxh-210 dc__overflow-auto tag-${selectedTagIndex}-class`}
                     autoWidth={true}
                     preventWheelDisable={true}
+                    noBackDrop={noBackDrop}
                 >
                     {popupMenuBody}
                 </PopupMenu.Body>

package/src/Common/CustomTagSelector/Types.ts

@@ -52,6 +52,7 @@ export interface TagLabelValueSelectorType {
     tabIndex?: number
     refVar?: React.MutableRefObject<HTMLTextAreaElement>
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+    noBackDrop?: boolean
 }
 
 export interface ResizableTagTextAreaProps {

package/src/Common/Modals/Modal.tsx

@@ -10,6 +10,7 @@ export const Modal = ({
     onClick = null,
     callbackRef = null,
     preventWheelDisable = false,
+    noBackDrop
 }: ModalType) => {
     const innerRef = React.useRef(null)
     function handleClick(e) {
@@ -36,11 +37,13 @@ export const Modal = ({
         document.addEventListener('click', handleClick)
         let modal = document.getElementById('visible-modal')
         if (modal) modal.classList.add('show')
+        if (noBackDrop) modal.classList.add('no-back-drop')
         if (!preventWheelDisable) document.body.addEventListener('wheel', disableWheel, { passive: false })
         return () => {
             if (!preventWheelDisable) document.body.removeEventListener('wheel', disableWheel)
             document.removeEventListener('click', handleClick)
             if (modal) modal.classList.remove('show')
+            if (noBackDrop) modal.classList.remove('no-back-drop')
         }
     }, [])
     return ReactDOM.createPortal(

package/src/Common/PopupMenu.tsx

@@ -167,6 +167,7 @@ function Body({
     style = {},
     autoWidth = false,
     preventWheelDisable = false,
+    noBackDrop
 }: PopupMenuBodyType) {
     const { handleClose, popupPosition, opacity, callbackRef, buttonWidth } = usePopupContext()
     return popupPosition ? (
@@ -183,6 +184,7 @@ function Body({
                 opacity: opacity,
             }}
             preventWheelDisable={preventWheelDisable}
+            noBackDrop={noBackDrop}
         >
             {children}
         </Modal>

package/src/Common/Types.ts

@@ -157,6 +157,7 @@ export interface PopupMenuBodyType {
     style?: React.CSSProperties
     autoWidth?: boolean
     preventWheelDisable?: boolean
+    noBackDrop?: boolean
 }
 
 export interface ModalType {
@@ -167,4 +168,5 @@ export interface ModalType {
     onClick?: any
     callbackRef?: (element?: any) => any
     preventWheelDisable?: boolean
+    noBackDrop?: boolean
 }