@devtron-labs/devtron-fe-common-lib 0.0.63-beta-4 → 0.0.63-beta-5

package/dist/Shared/Components/BulkSelection/BulkSelectionDropdownItems.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { BulkSelectionDropdownItemsProps } from './types';
-declare const BulkSelectionDropdownItems: <T>({ locator, label, isSelected, handleBulkSelection, icon: Icon, }: BulkSelectionDropdownItemsProps<T>) => JSX.Element;
+declare const BulkSelectionDropdownItems: <T>({ locator, label, isSelected, handleBulkSelection, icon: Icon, iconClass, }: BulkSelectionDropdownItemsProps<T>) => JSX.Element;
 export default BulkSelectionDropdownItems;

package/dist/Shared/Components/BulkSelection/types.d.ts

@@ -34,6 +34,7 @@ export interface BulkSelectionDropdownItemsType {
     label: string;
     isSelected: boolean;
     icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    iconClass?: string;
 }
 export interface BulkSelectionDropdownItemsProps<T> extends BulkSelectionDropdownItemsType, Pick<UseBulkSelectionReturnType<T>, 'handleBulkSelection'> {
 }

package/dist/index.js

@@ -28771,7 +28771,7 @@ function CustomInput(_a) {
             return (jsxRuntime.jsx("label", __assign({ className: "form__label ".concat(labelClassName), "data-testid": "label-".concat(dataTestid) }, { children: renderInputLabelConditionally() })));
         }
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top ".concat(inputWrapClassName) }, { children: [renderInputLabel(), jsxRuntime.jsx("input", __assign({ "data-testid": dataTestid, type: type, name: name, autoComplete: autoComplete, className: "form__input fs-13 ".concat(rootClassName), onChange: function (e) {
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top ".concat(inputWrapClassName) }, { children: [renderInputLabel(), jsxRuntime.jsx("input", __assign({ "data-testid": dataTestid, type: type, name: name, autoComplete: autoComplete, className: "form__input fs-13 lh-20 fw-4 ".concat(rootClassName), onChange: function (e) {
                     e.persist();
                     onChange(e);
                 }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus, readOnly: readOnly, ref: ref, onKeyPress: onKeyPress, defaultValue: defaultValue, onKeyDown: onKeyDown, required: required }, inputProps)), getInputError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
@@ -29429,7 +29429,7 @@ var SelectOption = function (props) {
 };
 
 var BulkSelectionDropdownItems = function (_a) {
-    var locator = _a.locator, label = _a.label, isSelected = _a.isSelected, handleBulkSelection = _a.handleBulkSelection, Icon = _a.icon;
+    var locator = _a.locator, label = _a.label, isSelected = _a.isSelected, handleBulkSelection = _a.handleBulkSelection, Icon = _a.icon, iconClass = _a.iconClass;
     var handleSelect = function () {
         handleBulkSelection({
             action: locator,
@@ -29437,7 +29437,7 @@ var BulkSelectionDropdownItems = function (_a) {
     };
     return (jsxRuntime.jsxs("button", __assign({ "data-testid": "bulk-action-".concat(locator), onClick: handleSelect, className: "dc__no-border dc__outline-none-imp w-100 flexbox h-32 dc__align-items-center pt-6 pr-8 pb-6 pl-8 dc__gap-8 ".concat(isSelected
             ? 'cb-5 bcb-1 icon-stroke-b5 fs-13 fw-6 lh-20'
-            : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'), type: "button" }, { children: [jsxRuntime.jsx(Icon, { className: "icon-dim-16" }), label] })));
+            : 'dc__no-background cn-9 fs-13 fw-4 lh-20 dc__hover-n50'), type: "button" }, { children: [jsxRuntime.jsx(Icon, { className: "icon-dim-16 ".concat(iconClass || '') }), label] })));
 };
 
 exports.BulkSelectionEvents = void 0;
@@ -29703,10 +29703,11 @@ var BulkSelection = function (_a) {
                 label: BulkSelectionOptionsLabels[exports.BulkSelectionEvents.CLEAR_ALL_SELECTIONS],
                 isSelected: false,
                 icon: SvgIcClose,
+                iconClass: 'icon-use-fill-n6',
             },
         ]
         : [])), false);
-    return (jsxRuntime.jsxs(PopupMenu, __assign({ autoClose: true }, { children: [jsxRuntime.jsxs(PopupMenu.Button, __assign({ isKebab: true, rootClassName: "h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp", dataTestId: BULK_DROPDOWN_TEST_ID }, { children: [jsxRuntime.jsx(Checkbox$1, { isChecked: isChecked, onChange: noop$1, rootClassName: "icon-dim-20 m-0", value: checkboxValue }), jsxRuntime.jsx(SvgIcChevronDown, { className: "icon-dim-20 fcn-6 dc__no-shrink" })] })), jsxRuntime.jsx(PopupMenu.Body, __assign({ rootClassName: "dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bcn-0 flex column dc__content-start dc__align-start dc__position-abs bcn-0 dc__border dc__border-radius-4-imp" }, { children: BulkSelectionItems.map(function (item) { return (jsxRuntime.jsx(BulkSelectionDropdownItems, { locator: item.locator, label: item.label, isSelected: item.isSelected, icon: item.icon, handleBulkSelection: handleBulkSelection }, item.locator)); }) }))] })));
+    return (jsxRuntime.jsxs(PopupMenu, __assign({ autoClose: true }, { children: [jsxRuntime.jsxs(PopupMenu.Button, __assign({ isKebab: true, rootClassName: "h-20 flexbox p-0 dc__no-background dc__no-border dc__outline-none-imp", dataTestId: BULK_DROPDOWN_TEST_ID }, { children: [jsxRuntime.jsx(Checkbox$1, { isChecked: isChecked, onChange: noop$1, rootClassName: "icon-dim-20 m-0", value: checkboxValue }), jsxRuntime.jsx(SvgIcChevronDown, { className: "icon-dim-20 fcn-6 dc__no-shrink" })] })), jsxRuntime.jsx(PopupMenu.Body, __assign({ rootClassName: "dc__top-22 w-150 dc__right-0 pt-4 pb-4 pl-0 pr-0 bcn-0 flex column dc__content-start dc__align-start dc__position-abs bcn-0 dc__border dc__border-radius-4-imp" }, { children: BulkSelectionItems.map(function (item) { return (jsxRuntime.jsx(BulkSelectionDropdownItems, { locator: item.locator, label: item.label, isSelected: item.isSelected, icon: item.icon, handleBulkSelection: handleBulkSelection, iconClass: item.iconClass }, item.locator)); }) }))] })));
 };
 
 var FilterChip = function (_a) {

package/package.json

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

package/src/Common/CustomInput/CustomInput.tsx

@@ -101,7 +101,7 @@ export function CustomInput({
                 type={type}
                 name={name}
                 autoComplete={autoComplete}
-                className={`form__input fs-13 ${rootClassName}`}
+                className={`form__input fs-13 lh-20 fw-4 ${rootClassName}`}
                 onChange={(e) => {
                     e.persist()
                     onChange(e)

package/src/Shared/Components/BulkSelection/BulkSelection.tsx

@@ -35,6 +35,7 @@ const BulkSelection = <T,>({ showPagination }: BulkSelectionProps) => {
                       label: BulkSelectionOptionsLabels[BulkSelectionEvents.CLEAR_ALL_SELECTIONS],
                       isSelected: false,
                       icon: ICClose,
+                      iconClass: 'icon-use-fill-n6',
                   },
               ]
             : []),
@@ -67,6 +68,7 @@ const BulkSelection = <T,>({ showPagination }: BulkSelectionProps) => {
                         isSelected={item.isSelected}
                         icon={item.icon}
                         handleBulkSelection={handleBulkSelection}
+                        iconClass={item.iconClass}
                     />
                 ))}
             </PopupMenu.Body>

package/src/Shared/Components/BulkSelection/BulkSelectionDropdownItems.tsx

@@ -6,6 +6,7 @@ const BulkSelectionDropdownItems = <T,>({
     isSelected,
     handleBulkSelection,
     icon: Icon,
+    iconClass,
 }: BulkSelectionDropdownItemsProps<T>) => {
     const handleSelect = () => {
         handleBulkSelection({
@@ -24,7 +25,7 @@ const BulkSelectionDropdownItems = <T,>({
             }`}
             type="button"
         >
-            <Icon className="icon-dim-16" />
+            <Icon className={`icon-dim-16 ${iconClass || ''}`} />
             {label}
         </button>
     )

package/src/Shared/Components/BulkSelection/types.tsx

@@ -39,6 +39,7 @@ export interface BulkSelectionDropdownItemsType {
     label: string
     isSelected: boolean
     icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
+    iconClass?: string
 }
 
 export interface BulkSelectionDropdownItemsProps<T>