@devtron-labs/devtron-fe-common-lib 0.0.59-beta-10 → 0.0.59-beta-12

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { BulkSelectionProps } from './types';
-declare const BulkSelection: <T>({ checkboxValue, isChecked, selectedIdentifiers, handleBulkSelection, showPagination, }: BulkSelectionProps<T>) => JSX.Element;
+declare const BulkSelection: <T>({ showPagination }: BulkSelectionProps) => JSX.Element;
 export default BulkSelection;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { UseBulkSelectionProps, UseBulkSelectionReturnType } from './types';
+export declare const useBulkSelection: <T>() => UseBulkSelectionReturnType<T>;
+export declare const BulkSelectionProvider: <T>({ children, identifiers, getSelectAllDialogStatus, }: UseBulkSelectionProps<T>) => JSX.Element;

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

@@ -6,3 +6,4 @@ export declare const BulkSelectionOptionsLabels: {
 };
 export declare const SELECT_ALL_ACROSS_PAGES_LOCATOR: "*";
 export declare const getInvalidActionMessage: (action: string) => string;
+export declare const BULK_SELECTION_CONTEXT_ERROR = "useBulkSelection must be used within BulkSelectionContext";

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

@@ -1,4 +1,4 @@
 export { default as BulkSelection } from './BulkSelection';
-export { default as useBulkSelection } from './UseBulkSelection';
+export * from './BulkSelectionProvider';
 export * from './types';
 export * from './constants';

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

@@ -16,13 +16,15 @@ export interface HandleBulkSelectionType<T> {
         identifierObject?: T;
     };
 }
-export interface UseBulkSelectionReturnType<T> {
+export interface GetBulkSelectionCheckboxValuesType {
+    isChecked: boolean;
+    checkboxValue: CHECKBOX_VALUE;
+}
+export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
     selectedIdentifiers: T;
     handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void;
 }
-export interface BulkSelectionProps<T> extends UseBulkSelectionReturnType<T> {
-    checkboxValue: CHECKBOX_VALUE;
-    isChecked: boolean;
+export interface BulkSelectionProps {
     showPagination: boolean;
 }
 export interface BulkSelectionDropdownItemsType {
@@ -31,7 +33,7 @@ export interface BulkSelectionDropdownItemsType {
     isSelected: boolean;
     icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
 }
-export interface BulkSelectionDropdownItemsProps<T> extends BulkSelectionDropdownItemsType, Pick<BulkSelectionProps<T>, 'handleBulkSelection'> {
+export interface BulkSelectionDropdownItemsProps<T> extends BulkSelectionDropdownItemsType, Pick<UseBulkSelectionReturnType<T>, 'handleBulkSelection'> {
 }
 export declare enum SelectAllDialogStatus {
     OPEN = "OPEN",
@@ -48,4 +50,5 @@ export interface UseBulkSelectionProps<T> {
      * Act as buffer between select all across pages and select all on page state
      */
     getSelectAllDialogStatus: () => SelectAllDialogStatus;
+    children?: React.ReactNode;
 }

package/dist/index.js

@@ -12028,7 +12028,7 @@ var Modal = function (_a) {
         }, id: "popup", className: "".concat(rootClassName, " popup ").concat(modal ? 'modal' : ''), style: __assign({}, style) }, { children: children })), document.getElementById('visible-modal'));
 };
 
-var _path$j;
+var _path$i;
 function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 var SvgIcCross = function SvgIcCross(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
@@ -12037,7 +12037,7 @@ var SvgIcCross = function SvgIcCross(props) {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M19.28 5.78a.75.75 0 0 0-1.06-1.06l1.06 1.06ZM4.72 18.22a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm13.5 1.06a.75.75 0 1 0 1.06-1.06l-1.06 1.06ZM5.78 4.72a.75.75 0 0 0-1.06 1.06l1.06-1.06Zm12.44 0-6.75 6.75 1.06 1.06 6.75-6.75-1.06-1.06Zm-6.75 6.75-6.75 6.75 1.06 1.06 6.75-6.75-1.06-1.06Zm7.81 6.75-6.75-6.75-1.06 1.06 6.75 6.75 1.06-1.06Zm-6.75-6.75L5.78 4.72 4.72 5.78l6.75 6.75 1.06-1.06Z",
     fill: "#596168"
   })));
@@ -16336,7 +16336,7 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
 
 var Tippy = index;
 
-var _path$i;
+var _path$h;
 function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 var SvgIcHelp = function SvgIcHelp(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
@@ -16344,14 +16344,14 @@ var SvgIcHelp = function SvgIcHelp(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#767D84",
     fillRule: "evenodd",
     d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm-.205 12.868c-.615 0-1.12.505-1.12 1.12 0 .617.505 1.121 1.12 1.121.615 0 1.12-.504 1.12-1.12 0-.616-.506-1.12-1.12-1.12zM11.863 7c-1.667 0-3.197 1.187-3.196 2.527 0 .546.41.833.888.833 1.325 0 .642-1.803 2.39-1.803.82 0 1.311.438 1.311 1.175 0 1.34-2.39 1.708-2.39 3.334 0 .438.287.915.874.915.902 0 .792-.67 1.12-1.148.438-.642 2.473-1.325 2.473-3.101 0-1.927-1.721-2.732-3.47-2.732z"
   })));
 };
 
-var _path$h;
+var _path$g;
 function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 var SvgIcHelpOutline = function SvgIcHelpOutline(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
@@ -16359,7 +16359,7 @@ var SvgIcHelpOutline = function SvgIcHelpOutline(props) {
     viewBox: "0 0 17 16",
     width: "1em",
     height: "1em"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#767D84",
     fillRule: "evenodd",
     d: "M9 1.333a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 9 1.333zm0 1.334C6.054 2.667 3.667 5.054 3.667 8S6.054 13.333 9 13.333 14.333 10.946 14.333 8 11.946 2.667 9 2.667zm-.137 7.245c.41 0 .747.337.747.747s-.337.747-.747.747-.747-.336-.747-.747a.75.75 0 0 1 .747-.747zm.046-5.245c1.166 0 2.313.537 2.313 1.82 0 1.185-1.357 1.64-1.648 2.068-.22.319-.146.766-.747.766-.392 0-.583-.319-.583-.61 0-1.085 1.593-1.33 1.593-2.223 0-.492-.327-.783-.873-.783-1.166 0-.711 1.202-1.594 1.202-.319 0-.592-.191-.592-.556 0-.893 1.02-1.684 2.13-1.684z"
@@ -16411,7 +16411,7 @@ function TippyCustomized(props) {
     return (jsxRuntime.jsx(Tippy, __assign({ className: "".concat(isWhiteTheme ? 'tippy-white-container default-white' : 'tippy-black-container default-black', " no-content-padding tippy-shadow ").concat(className), arrow: arrow || false, interactive: interactive || false, placement: placement || 'top', content: getTippyContent(), trigger: trigger || 'mouseenter', onMount: onTippyMount, onClickOutside: closeTippy, showOnCreate: showOnCreate || false, animation: animation || 'fade', duration: duration || 300, visible: props.visible }, { children: children })));
 }
 
-var _path$g, _circle, _path2$2;
+var _path$f, _circle, _path2$2;
 function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 var SvgInjectTag = function SvgInjectTag(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
@@ -16420,7 +16420,7 @@ var SvgInjectTag = function SvgInjectTag(props) {
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 10H3.333",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -16448,7 +16448,7 @@ function PropagateTagInfo(_a) {
     return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300", placement: "top", Icon: SvgInjectTag, heading: 'Propagate tags to K8s resources', infoText: "", additionalContent: additionalInfo(), showCloseButton: true, trigger: "click", interactive: true, documentationLink: isCreateApp ? DOCUMENTATION.APP_TAGS : DOCUMENTATION.APP_OVERVIEW_TAGS, documentationLinkText: "View Documentation" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flexbox cursor" }, { children: [jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-16 mt-2 mr-4" }), jsxRuntime.jsx("span", { children: "Propagate tags" }), jsxRuntime.jsx(SvgIcHelpOutline, { className: "icon-dim-16 mt-2 ml-4" })] })) })));
 }
 
-var _path$f;
+var _path$e;
 function _extends$o() { _extends$o = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 var SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
@@ -16456,7 +16456,7 @@ var SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 1.667c4.6 0 8.333 3.733 8.333 8.333S14.6 18.333 10 18.333 1.667 14.6 1.667 10 5.4 1.667 10 1.667zm0 1.666A6.67 6.67 0 0 0 3.333 10 6.67 6.67 0 0 0 10 16.667 6.67 6.67 0 0 0 16.667 10 6.67 6.67 0 0 0 10 3.333zm0 5.834c.46 0 .833.373.833.833v3.333a.834.834 0 1 1-1.666 0V10c0-.46.373-.833.833-.833zm0-3.334A.833.833 0 1 1 10 7.5a.833.833 0 0 1 0-1.667z",
     fill: "#06C",
     fillRule: "evenodd"
@@ -16690,7 +16690,7 @@ var TagDetails = function (_a) {
     return (jsxRuntime.jsxs("div", __assign({ className: "flexbox mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ".concat(tagData.propagate ? 'bcn-7' : '', " ").concat(tagData.key.startsWith("devtron.ai/") ? 'cursor-not-allowed bcn-1' : ''), onClick: propagateTagToResource, "data-testid": "propagate-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-20 mt-4 ".concat(tagData.propagate ? 'scn-0' : '') }) })), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.KEY, placeholder: "Enter key", tabIndex: tabIndex - 1, refVar: keyRef, dependentRef: valueRef, tagOptions: suggestedTagsOptions }), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.VALUE, placeholder: "Enter value", tabIndex: tabIndex, refVar: valueRef, dependentRef: keyRef }), jsxRuntime.jsx("div", __assign({ className: "dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top", onClick: deleteTag, "data-testid": "delete-tag-".concat(index) }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-20 mt-4" }) }))] })));
 };
 
-var _path$e;
+var _path$d;
 function _extends$n() { _extends$n = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 var SvgIcAdd = function SvgIcAdd(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
@@ -16698,7 +16698,7 @@ var SvgIcAdd = function SvgIcAdd(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     className: "ic-add_svg__fill-color",
     fill: "#999",
     d: "M18 13h-5v5a1 1 0 0 1-2 0v-5H6a1 1 0 0 1 0-2h5V6a1 1 0 0 1 2 0v5h5a1 1 0 0 1 0 2z"
@@ -24240,7 +24240,7 @@ var SvgIcAppstatusCancelled = function SvgIcAppstatusCancelled(props) {
   }))));
 };
 
-var _path$d;
+var _path$c;
 function _extends$k() { _extends$k = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 var SvgIcCheck = function SvgIcCheck(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
@@ -24248,7 +24248,7 @@ var SvgIcCheck = function SvgIcCheck(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     stroke: "#06C",
     strokeLinecap: "round",
     strokeLinejoin: "round",
@@ -24948,7 +24948,7 @@ function DeleteComponent(_a) {
     return (jsxRuntime.jsxs("div", { children: [!showCannotDeleteDialogModal && renderDeleteDialog(), showCannotDeleteDialogModal && renderCannotDeleteDialogModal()] }));
 }
 
-var _path$c;
+var _path$b;
 function _extends$f() { _extends$f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 var SvgIcPencil = function SvgIcPencil(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
@@ -24957,7 +24957,7 @@ var SvgIcPencil = function SvgIcPencil(props) {
     viewBox: "0 0 20 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10.625 5 15 9.375m-7.5 7.5H3.75a.625.625 0 0 1-.625-.625v-3.491a.625.625 0 0 1 .183-.442l9.375-9.375a.625.625 0 0 1 .884 0l3.491 3.491a.625.625 0 0 1 0 .884L7.5 16.875Z",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -24966,7 +24966,7 @@ var SvgIcPencil = function SvgIcPencil(props) {
   })));
 };
 
-var _path$b, _path2$1, _path3;
+var _path$a, _path2$1, _path3;
 function _extends$e() { _extends$e = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
@@ -24975,7 +24975,7 @@ var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
     viewBox: "0 0 12 12",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M3.742 4.674h-2.25v-2.25",
     fill: "#767D84"
   })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -24993,7 +24993,7 @@ var SvgIcArrowCounterClockwise = function SvgIcArrowCounterClockwise(props) {
   })));
 };
 
-var _path$a;
+var _path$9;
 function _extends$d() { _extends$d = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 var SvgIcMinus = function SvgIcMinus(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
@@ -25001,7 +25001,7 @@ var SvgIcMinus = function SvgIcMinus(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 14 14"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#959BA1",
     className: "ic-minus_svg__fill-color",
     fillRule: "evenodd",
@@ -25051,7 +25051,7 @@ var SvgIcErrorExclamation = function SvgIcErrorExclamation(props) {
   }))));
 };
 
-var _path$9;
+var _path$8;
 function _extends$a() { _extends$a = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 var SvgIcEnter = function SvgIcEnter(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
@@ -25060,7 +25060,7 @@ var SvgIcEnter = function SvgIcEnter(props) {
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.667 4a.667.667 0 0 0-.667.667v2.666a.667.667 0 0 1-.667.667H4.94l.867-.86a.67.67 0 1 0-.947-.947l-2 2a.667.667 0 0 0-.14.22.667.667 0 0 0 0 .507c.032.082.08.157.14.22l2 2a.666.666 0 0 0 .947 0 .667.667 0 0 0 0-.947l-.867-.86h6.393a2 2 0 0 0 2-2V4.667A.667.667 0 0 0 12.667 4Z",
     fill: "#3B444C"
   })));
@@ -25466,7 +25466,7 @@ function Grid(_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "flex-wrap flexbox ".concat(container ? containerClass : ''), style: containerStyles }, containerDivProps, { children: children })));
 }
 
-var _path$8;
+var _path$7;
 function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 var SvgIcCopy = function SvgIcCopy(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
@@ -25474,7 +25474,7 @@ var SvgIcCopy = function SvgIcCopy(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 20 20"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#767D84",
     fillRule: "evenodd",
     d: "M15.833 6.917a2.5 2.5 0 0 1 2.5 2.5v6.416a2.5 2.5 0 0 1-2.5 2.5H9.417a2.5 2.5 0 0 1-2.5-2.5V9.417a2.5 2.5 0 0 1 2.5-2.5zm0 1.666H9.417a.833.833 0 0 0-.834.834v6.416c0 .46.373.834.834.834h6.416c.46 0 .834-.373.834-.834V9.417a.833.833 0 0 0-.834-.834zM10.75 1.667c1.24 0 2.256.968 2.33 2.19l.003.143v.75a.833.833 0 0 1-1.66.097l-.006-.097V4c0-.34-.255-.62-.583-.661l-.084-.006H4c-.34 0-.62.255-.661.583L3.333 4v6.75c0 .34.255.62.583.661l.084.006h.75a.833.833 0 0 1 .097 1.66l-.097.006H4a2.333 2.333 0 0 1-2.33-2.19l-.003-.143V4c0-1.24.968-2.256 2.19-2.33L4 1.668h6.75z"
@@ -28306,7 +28306,7 @@ var getInferredTypeFromValueType = function (value) {
     }
 };
 
-var _path$7;
+var _path$6;
 function _extends$8() { _extends$8 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 var SvgIcChevronDown = function SvgIcChevronDown(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
@@ -28314,7 +28314,7 @@ var SvgIcChevronDown = function SvgIcChevronDown(props) {
     width: "1em",
     height: "1em",
     viewBox: "0 0 24 24"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#999",
     className: "ic-chevron-down_svg__fill-color",
     fillRule: "nonzero",
@@ -28654,7 +28654,7 @@ function DraggableWrapper(_a) {
                 } }, { children: children })) })) })));
 }
 
-var _path$6;
+var _path$5;
 function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 var SvgIcDrag = function SvgIcDrag(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
@@ -28663,7 +28663,7 @@ var SvgIcDrag = function SvgIcDrag(props) {
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10.334 9.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5.667 9.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM10.334 5.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5.667 5.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM10.334 13.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM5.667 13.333a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",
     fill: "#596168"
   })));
@@ -28785,7 +28785,7 @@ var Pagination = function (_a) {
     jsxRuntime.jsxs("div", __assign({ className: rootClassName || '' }, { children: [jsxRuntime.jsxs("div", __assign({ className: "page-number" }, { children: [offset + 1, " - ", lastPageNo, " of ", size] })), jsxRuntime.jsxs("ul", __assign({ className: "pagination" }, { children: [jsxRuntime.jsx("li", __assign({ className: "page" }, { children: jsxRuntime.jsx("button", __assign({ className: "page__button page__button--icon", disabled: !pageNoIndex, onClick: selectPreviousPage, type: "button", "aria-label": "Previous page" }, { children: jsxRuntime.jsx("span", __assign({ className: "left-icon" }, { children: jsxRuntime.jsx("i", { className: "fa fa-chevron-left" }) })) })) })), visiblePages.map(function (page) { return (jsxRuntime.jsx(PageValueItem, { value: page.value, isSelected: page.selected, selectPage: selectPage }, page.value)); }), jsxRuntime.jsx("li", __assign({ className: "page" }, { children: jsxRuntime.jsx("button", __assign({ className: "page__button page__button--icon", disabled: pageNoIndex === pages.length - 1, onClick: selectNextPage, type: "button", "aria-label": "Next page" }, { children: jsxRuntime.jsx("span", __assign({ className: "left-icon" }, { children: jsxRuntime.jsx("i", { className: "fa fa-chevron-right" }) })) })) }))] })), !isPageSizeFix && (jsxRuntime.jsxs("div", __assign({ className: "select" }, { children: [jsxRuntime.jsx("span", __assign({ className: "select__placeholder" }, { children: "Rows per page" })), jsxRuntime.jsx(PageSizeSelector, { pageSizeOptions: pageSizeOptions, pageSize: pageSize, changePageSize: changePageSize })] })))] })));
 };
 
-var _path$5, _path2;
+var _path$4, _path2;
 function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 var SvgIcCpu = function SvgIcCpu(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
@@ -28794,7 +28794,7 @@ var SvgIcCpu = function SvgIcCpu(props) {
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M12.5 5.625h-5m5 2.5h-5m8.125-5v13.75c0 .345-.28.625-.625.625H5a.625.625 0 0 1-.625-.625V3.125c0-.345.28-.625.625-.625h10c.345 0 .625.28.625.625Z",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -28806,7 +28806,7 @@ var SvgIcCpu = function SvgIcCpu(props) {
   })));
 };
 
-var _path$4;
+var _path$3;
 function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgIcMemory = function SvgIcMemory(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
@@ -28815,7 +28815,7 @@ var SvgIcMemory = function SvgIcMemory(props) {
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M16.25 8.125h1.875m-1.875 3.75h1.875m-16.25-3.75H3.75m-1.875 3.75H3.75m8.125 4.375v1.875m-3.75-1.875v1.875m3.75-16.25V3.75m-3.75-1.875V3.75m-.313 4.063h4.375v4.375H7.814V7.811ZM4.376 3.75h11.25c.345 0 .625.28.625.625v11.25c0 .345-.28.625-.625.625H4.375a.625.625 0 0 1-.625-.625V4.375c0-.345.28-.625.625-.625Z",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -28824,7 +28824,7 @@ var SvgIcMemory = function SvgIcMemory(props) {
   })));
 };
 
-var _path$3;
+var _path$2;
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgIcTimer = function SvgIcTimer(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
@@ -28833,7 +28833,7 @@ var SvgIcTimer = function SvgIcTimer(props) {
     height: "1em",
     viewBox: "0 0 20 20",
     fill: "none"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "m10 11.041 3.094-3.093M8.125 1.666h3.75m5 9.376a6.875 6.875 0 1 1-13.75 0 6.875 6.875 0 0 1 13.75 0Z",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -29253,9 +29253,128 @@ var BulkSelectionOptionsLabels = (_a = {},
     _a);
 // Considering application can not be named as *
 var SELECT_ALL_ACROSS_PAGES_LOCATOR = '*';
-var getInvalidActionMessage = function (action) { return "Invalid action ".concat(action, " passed to useBulkSelection"); };
+var getInvalidActionMessage = function (action) { return "Invalid action ".concat(action, " passed to useBulkSelection"); };
+var BULK_SELECTION_CONTEXT_ERROR = 'useBulkSelection must be used within BulkSelectionContext';
+
+// giving type any here since not exporting this context, rather using it through useBulkSelection hook which is typed
+var BulkSelectionContext = React.createContext({
+    selectedIdentifiers: {},
+    handleBulkSelection: noop$1,
+    isChecked: false,
+    checkboxValue: exports.CHECKBOX_VALUE.CHECKED,
+});
+var useBulkSelection = function () {
+    var context = React.useContext(BulkSelectionContext);
+    if (!context) {
+        throw new Error(BULK_SELECTION_CONTEXT_ERROR);
+    }
+    return context;
+};
+var BulkSelectionProvider = function (_a) {
+    var children = _a.children, identifiers = _a.identifiers, getSelectAllDialogStatus = _a.getSelectAllDialogStatus;
+    var _b = __read(React.useState({}), 2), selectedIdentifiers = _b[0], setSelectedIdentifiers = _b[1];
+    var setIdentifiersAfterClear = function (newIdentifiers, selectedIds) {
+        var _newIdentifiers = JSON.parse(JSON.stringify(newIdentifiers));
+        selectedIds.forEach(function (id) {
+            delete _newIdentifiers[id];
+        });
+        setSelectedIdentifiers(_newIdentifiers);
+    };
+    var setIdentifiersAfterPageSelection = function (baseObject) {
+        var _selectedIdentifiers = JSON.parse(JSON.stringify(selectedIdentifiers));
+        // removing bulk selection across pages if present
+        if (_selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+            delete _selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR];
+        }
+        setSelectedIdentifiers(__assign(__assign({}, _selectedIdentifiers), baseObject));
+    };
+    var handleBulkSelection = function (_a) {
+        var _b, _c;
+        var _d, _e;
+        var action = _a.action, data = _a.data;
+        var selectedIds = (_d = data === null || data === void 0 ? void 0 : data.identifierIds) !== null && _d !== void 0 ? _d : [];
+        var identifierObject = (_e = data === null || data === void 0 ? void 0 : data.identifierObject) !== null && _e !== void 0 ? _e : {};
+        switch (action) {
+            case exports.BulkSelectionEvents.CLEAR_ALL_SELECTIONS:
+                setSelectedIdentifiers({});
+                break;
+            case exports.BulkSelectionEvents.CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION: {
+                setIdentifiersAfterClear(identifiers, selectedIds);
+                break;
+            }
+            case exports.BulkSelectionEvents.CLEAR_IDENTIFIERS: {
+                setIdentifiersAfterClear(selectedIdentifiers, selectedIds);
+                break;
+            }
+            case exports.BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
+                if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+                    return;
+                }
+                var selectedIdentifiersLength = Object.keys(selectedIdentifiers).length;
+                if (selectedIdentifiersLength > 0 && getSelectAllDialogStatus() === exports.SelectAllDialogStatus.OPEN) {
+                    return;
+                }
+                setSelectedIdentifiers((_b = {},
+                    _b[SELECT_ALL_ACROSS_PAGES_LOCATOR] = true,
+                    _b));
+                break;
+            }
+            case exports.BulkSelectionEvents.CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES:
+                setSelectedIdentifiers((_c = {},
+                    _c[SELECT_ALL_ACROSS_PAGES_LOCATOR] = true,
+                    _c));
+                break;
+            case exports.BulkSelectionEvents.SELECT_ALL_ON_PAGE: {
+                setIdentifiersAfterPageSelection(identifiers);
+                break;
+            }
+            case exports.BulkSelectionEvents.SELECT_IDENTIFIER: {
+                setIdentifiersAfterPageSelection(identifierObject);
+                break;
+            }
+            default:
+                throw new Error(getInvalidActionMessage(action));
+        }
+    };
+    var getBulkSelectionCheckboxValues = function () {
+        var selectedIdentifiersArray = Object.keys(selectedIdentifiers);
+        if (selectedIdentifiersArray.length === 0) {
+            return {
+                isChecked: false,
+                checkboxValue: exports.CHECKBOX_VALUE.CHECKED,
+            };
+        }
+        // if selectedIdentifiers contains select all across pages locator then it means all are selected
+        if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+            return {
+                isChecked: true,
+                checkboxValue: exports.CHECKBOX_VALUE.BULK_CHECKED,
+            };
+        }
+        // if all the identifiers are selected then CHECKED else intermediate
+        var areAllPresentIdentifiersSelected = selectedIdentifiersArray.every(function (identifierId) { return identifiers[identifierId]; });
+        if (areAllPresentIdentifiersSelected) {
+            return {
+                isChecked: true,
+                checkboxValue: exports.CHECKBOX_VALUE.CHECKED,
+            };
+        }
+        return {
+            isChecked: true,
+            checkboxValue: exports.CHECKBOX_VALUE.INTERMEDIATE,
+        };
+    };
+    var _c = getBulkSelectionCheckboxValues(), isChecked = _c.isChecked, checkboxValue = _c.checkboxValue;
+    var value = React.useMemo(function () { return ({
+        selectedIdentifiers: selectedIdentifiers,
+        handleBulkSelection: handleBulkSelection,
+        isChecked: isChecked,
+        checkboxValue: checkboxValue,
+    }); }, [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue]);
+    return jsxRuntime.jsx(BulkSelectionContext.Provider, __assign({ value: value }, { children: children }));
+};
 
-var _rect$1, _path$2;
+var _rect$1, _path$1;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgIcCheckSquare = function SvgIcCheckSquare(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
@@ -29274,7 +29393,7 @@ var SvgIcCheckSquare = function SvgIcCheckSquare(props) {
     strokeWidth: 1.5,
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  })), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "m11.208 5.958-4.083 4.083L5.083 8",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -29283,7 +29402,7 @@ var SvgIcCheckSquare = function SvgIcCheckSquare(props) {
   })));
 };
 
-var _rect, _path$1;
+var _rect, _path;
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgIcCheckAll = function SvgIcCheckAll(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
@@ -29302,7 +29421,7 @@ var SvgIcCheckAll = function SvgIcCheckAll(props) {
     strokeWidth: 1.5,
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  })), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M15.467 5.866v5.6a4 4 0 0 1-4 4h-5.6M10.35 5.85l-3.5 3.5L5.1 7.6",
     stroke: "#596168",
     strokeWidth: 1.5,
@@ -29311,26 +29430,29 @@ var SvgIcCheckAll = function SvgIcCheckAll(props) {
   })));
 };
 
-var _path;
+var _defs, _use;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var SvgIcClose = function SvgIcClose(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
     width: "1em",
     height: "1em",
-    viewBox: "0 0 10 10",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8.333 1.667 1.667 8.334m6.666 0L1.667 1.667",
-    stroke: "#596168",
-    strokeWidth: 1.5,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
+    viewBox: "0 0 24 24"
+  }, props), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("path", {
+    id: "ic-close_svg__a",
+    className: "ic-close_svg__stroke-color",
+    d: "M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"
+  }))), _use || (_use = /*#__PURE__*/React__namespace.createElement("use", {
+    fill: "#999",
+    xlinkHref: "#ic-close_svg__a",
+    fillRule: "evenodd"
   })));
 };
 
 var BulkSelection = function (_a) {
-    var checkboxValue = _a.checkboxValue, isChecked = _a.isChecked, selectedIdentifiers = _a.selectedIdentifiers, handleBulkSelection = _a.handleBulkSelection, showPagination = _a.showPagination;
+    var showPagination = _a.showPagination;
+    var _b = useBulkSelection(), handleBulkSelection = _b.handleBulkSelection, selectedIdentifiers = _b.selectedIdentifiers, isChecked = _b.isChecked, checkboxValue = _b.checkboxValue;
     var areOptionsSelected = Object.keys(selectedIdentifiers).length > 0;
     var BulkSelectionItems = __spreadArray(__spreadArray([
         {
@@ -29361,78 +29483,6 @@ var BulkSelection = function (_a) {
     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", value: checkboxValue }), jsxRuntime.jsx(SvgIcChevronDown, { className: "icon-dim-20 icon-n6" })] })), 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)); }) }))] })));
 };
 
-var useBulkSelection = function (_a) {
-    var identifiers = _a.identifiers, getSelectAllDialogStatus = _a.getSelectAllDialogStatus;
-    var _b = __read(React.useState({}), 2), selectedIdentifiers = _b[0], setSelectedIdentifiers = _b[1];
-    var setIdentifiersAfterClear = function (newIdentifiers, selectedIds) {
-        var _newIdentifiers = JSON.parse(JSON.stringify(newIdentifiers));
-        selectedIds.forEach(function (id) {
-            delete _newIdentifiers[id];
-        });
-        setSelectedIdentifiers(_newIdentifiers);
-    };
-    var setIdentifiersAfterPageSelection = function (baseObject) {
-        var _selectedIdentifiers = JSON.parse(JSON.stringify(selectedIdentifiers));
-        // removing bulk selection across pages if present
-        if (_selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
-            delete _selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR];
-        }
-        setSelectedIdentifiers(__assign(__assign({}, _selectedIdentifiers), baseObject));
-    };
-    var handleBulkSelection = function (_a) {
-        var _b, _c;
-        var _d, _e;
-        var action = _a.action, data = _a.data;
-        var selectedIds = (_d = data === null || data === void 0 ? void 0 : data.identifierIds) !== null && _d !== void 0 ? _d : [];
-        var identifierObject = (_e = data === null || data === void 0 ? void 0 : data.identifierObject) !== null && _e !== void 0 ? _e : {};
-        switch (action) {
-            case exports.BulkSelectionEvents.CLEAR_ALL_SELECTIONS:
-                setSelectedIdentifiers({});
-                break;
-            case exports.BulkSelectionEvents.CLEAR_IDENTIFIERS_AFTER_ACROSS_SELECTION: {
-                setIdentifiersAfterClear(identifiers, selectedIds);
-                break;
-            }
-            case exports.BulkSelectionEvents.CLEAR_IDENTIFIERS: {
-                setIdentifiersAfterClear(selectedIdentifiers, selectedIds);
-                break;
-            }
-            case exports.BulkSelectionEvents.SELECT_ALL_ACROSS_PAGES: {
-                if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
-                    return;
-                }
-                var selectedIdentifiersLength = Object.keys(selectedIdentifiers).length;
-                if (selectedIdentifiersLength > 0 && getSelectAllDialogStatus() === exports.SelectAllDialogStatus.OPEN) {
-                    return;
-                }
-                setSelectedIdentifiers((_b = {},
-                    _b[SELECT_ALL_ACROSS_PAGES_LOCATOR] = true,
-                    _b));
-                break;
-            }
-            case exports.BulkSelectionEvents.CLEAR_SELECTIONS_AND_SELECT_ALL_ACROSS_PAGES:
-                setSelectedIdentifiers((_c = {},
-                    _c[SELECT_ALL_ACROSS_PAGES_LOCATOR] = true,
-                    _c));
-                break;
-            case exports.BulkSelectionEvents.SELECT_ALL_ON_PAGE: {
-                setIdentifiersAfterPageSelection(identifiers);
-                break;
-            }
-            case exports.BulkSelectionEvents.SELECT_IDENTIFIER: {
-                setIdentifiersAfterPageSelection(identifierObject);
-                break;
-            }
-            default:
-                throw new Error(getInvalidActionMessage(action));
-        }
-    };
-    return {
-        handleBulkSelection: handleBulkSelection,
-        selectedIdentifiers: selectedIdentifiers,
-    };
-};
-
 var MESSAGES = {
     PROVIDE_A_NUMBER: 'Please provide a number',
     LOWERCASE_ALPHANUMERIC: 'Only lowercase alphanumeric characters, -, _ or . allowed',
@@ -29972,6 +30022,7 @@ exports.BUILD_INFRA_INPUT_CONSTRAINTS = BUILD_INFRA_INPUT_CONSTRAINTS;
 exports.BUILD_INFRA_TEST_IDS = BUILD_INFRA_TEST_IDS;
 exports.BUILD_INFRA_TEXT = BUILD_INFRA_TEXT;
 exports.BULK_DROPDOWN_TEST_ID = BULK_DROPDOWN_TEST_ID;
+exports.BULK_SELECTION_CONTEXT_ERROR = BULK_SELECTION_CONTEXT_ERROR;
 exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildInfraConfigActionMap = BuildInfraConfigActionMap;
@@ -29981,6 +30032,7 @@ exports.BuildInfraFooter = Footer;
 exports.BuildStageVariable = BuildStageVariable;
 exports.BulkSelection = BulkSelection;
 exports.BulkSelectionOptionsLabels = BulkSelectionOptionsLabels;
+exports.BulkSelectionProvider = BulkSelectionProvider;
 exports.CDModalTab = CDModalTab;
 exports.CREATE_MODE_REQUIRED_INPUT_FIELDS = CREATE_MODE_REQUIRED_INPUT_FIELDS;
 exports.CREATE_PROFILE_BASE_VALUE = CREATE_PROFILE_BASE_VALUE;

package/package.json

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

package/src/Assets/Icon/ic-close.svg

@@ -1,3 +1,9 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.33335 1.66699L1.66669 8.33366M8.33335 8.33366L1.66669 1.66699" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="a" class="stroke-color" d="M18.295 5.705a.997.997 0 0 0-1.41 0L12 10.59 7.115 5.705a.997.997 0 1 0-1.41 1.41L10.59 12l-4.885 4.885a.997.997 0 1 0 1.41 1.41L12 13.41l4.885 4.885a.997.997 0 0 0 1.41-1.41L13.41 12l4.885-4.885a.997.997 0 0 0 0-1.41z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d=""/>
+        <use fill="#999" xlink:href="#a"/>
+    </g>
 </svg>

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

@@ -1,5 +1,6 @@
 import BulkSelectionDropdownItems from './BulkSelectionDropdownItems'
 import { CHECKBOX_VALUE, Checkbox, PopupMenu, noop } from '../../../Common'
+import { useBulkSelection } from './BulkSelectionProvider'
 import { BulkSelectionDropdownItemsType, BulkSelectionEvents, BulkSelectionProps } from './types'
 import { BULK_DROPDOWN_TEST_ID, BulkSelectionOptionsLabels } from './constants'
 import { ReactComponent as ICChevronDown } from '../../../Assets/Icon/ic-chevron-down.svg'
@@ -7,13 +8,8 @@ import { ReactComponent as ICCheckSquare } from '../../../Assets/Icon/ic-check-s
 import { ReactComponent as ICCheckAll } from '../../../Assets/Icon/ic-check-all.svg'
 import { ReactComponent as ICClose } from '../../../Assets/Icon/ic-close.svg'
 
-const BulkSelection = <T,>({
-    checkboxValue,
-    isChecked,
-    selectedIdentifiers,
-    handleBulkSelection,
-    showPagination,
-}: BulkSelectionProps<T>) => {
+const BulkSelection = <T,>({ showPagination }: BulkSelectionProps) => {
+    const { handleBulkSelection, selectedIdentifiers, isChecked, checkboxValue } = useBulkSelection<T>()
     const areOptionsSelected = Object.keys(selectedIdentifiers).length > 0
     const BulkSelectionItems: BulkSelectionDropdownItemsType[] = [
         {

package/src/Shared/Components/BulkSelection/{UseBulkSelection.tsx → BulkSelectionProvider.tsx}

@@ -1,17 +1,36 @@
-import { useState } from 'react'
-import { SELECT_ALL_ACROSS_PAGES_LOCATOR, getInvalidActionMessage } from './constants'
+import { createContext, useContext, useMemo, useState } from 'react'
+import { BULK_SELECTION_CONTEXT_ERROR, SELECT_ALL_ACROSS_PAGES_LOCATOR, getInvalidActionMessage } from './constants'
 import {
     BulkSelectionEvents,
+    GetBulkSelectionCheckboxValuesType,
     HandleBulkSelectionType,
     SelectAllDialogStatus,
     UseBulkSelectionProps,
     UseBulkSelectionReturnType,
 } from './types'
+import { CHECKBOX_VALUE, noop } from '../../../Common'
+
+// giving type any here since not exporting this context, rather using it through useBulkSelection hook which is typed
+const BulkSelectionContext = createContext<UseBulkSelectionReturnType<any>>({
+    selectedIdentifiers: {},
+    handleBulkSelection: noop,
+    isChecked: false,
+    checkboxValue: CHECKBOX_VALUE.CHECKED,
+})
+
+export const useBulkSelection = <T,>() => {
+    const context = useContext<UseBulkSelectionReturnType<T>>(BulkSelectionContext)
+    if (!context) {
+        throw new Error(BULK_SELECTION_CONTEXT_ERROR)
+    }
+    return context
+}
 
-const useBulkSelection = <T,>({
+export const BulkSelectionProvider = <T,>({
+    children,
     identifiers,
     getSelectAllDialogStatus,
-}: UseBulkSelectionProps<T>): UseBulkSelectionReturnType<T> => {
+}: UseBulkSelectionProps<T>) => {
     const [selectedIdentifiers, setSelectedIdentifiers] = useState<T>({} as T)
 
     const setIdentifiersAfterClear = (newIdentifiers: T, selectedIds: (number | string)[]) => {
@@ -90,10 +109,52 @@ const useBulkSelection = <T,>({
         }
     }
 
-    return {
-        handleBulkSelection,
-        selectedIdentifiers,
+    const getBulkSelectionCheckboxValues = (): GetBulkSelectionCheckboxValuesType => {
+        const selectedIdentifiersArray = Object.keys(selectedIdentifiers)
+        if (selectedIdentifiersArray.length === 0) {
+            return {
+                isChecked: false,
+                checkboxValue: CHECKBOX_VALUE.CHECKED,
+            }
+        }
+
+        // if selectedIdentifiers contains select all across pages locator then it means all are selected
+        if (selectedIdentifiers[SELECT_ALL_ACROSS_PAGES_LOCATOR]) {
+            return {
+                isChecked: true,
+                checkboxValue: CHECKBOX_VALUE.BULK_CHECKED,
+            }
+        }
+
+        // if all the identifiers are selected then CHECKED else intermediate
+        const areAllPresentIdentifiersSelected = selectedIdentifiersArray.every(
+            (identifierId) => identifiers[identifierId],
+        )
+
+        if (areAllPresentIdentifiersSelected) {
+            return {
+                isChecked: true,
+                checkboxValue: CHECKBOX_VALUE.CHECKED,
+            }
+        }
+
+        return {
+            isChecked: true,
+            checkboxValue: CHECKBOX_VALUE.INTERMEDIATE,
+        }
     }
-}
 
-export default useBulkSelection
+    const { isChecked, checkboxValue } = getBulkSelectionCheckboxValues()
+
+    const value = useMemo(
+        () => ({
+            selectedIdentifiers,
+            handleBulkSelection,
+            isChecked,
+            checkboxValue,
+        }),
+        [selectedIdentifiers, handleBulkSelection, isChecked, checkboxValue],
+    )
+
+    return <BulkSelectionContext.Provider value={value}>{children}</BulkSelectionContext.Provider>
+}

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

@@ -10,3 +10,4 @@ export const BulkSelectionOptionsLabels = {
 // Considering application can not be named as *
 export const SELECT_ALL_ACROSS_PAGES_LOCATOR = '*' as const
 export const getInvalidActionMessage = (action: string) => `Invalid action ${action} passed to useBulkSelection`
+export const BULK_SELECTION_CONTEXT_ERROR = 'useBulkSelection must be used within BulkSelectionContext'

package/src/Shared/Components/BulkSelection/index.ts

@@ -1,4 +1,4 @@
 export { default as BulkSelection } from './BulkSelection'
-export { default as useBulkSelection } from './UseBulkSelection'
+export * from './BulkSelectionProvider'
 export * from './types'
 export * from './constants'

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

@@ -18,14 +18,17 @@ export interface HandleBulkSelectionType<T> {
     }
 }
 
-export interface UseBulkSelectionReturnType<T> {
+export interface GetBulkSelectionCheckboxValuesType {
+    isChecked: boolean
+    checkboxValue: CHECKBOX_VALUE
+}
+
+export interface UseBulkSelectionReturnType<T> extends GetBulkSelectionCheckboxValuesType {
     selectedIdentifiers: T
     handleBulkSelection: ({ action, data }: HandleBulkSelectionType<T>) => void
 }
 
-export interface BulkSelectionProps<T> extends UseBulkSelectionReturnType<T> {
-    checkboxValue: CHECKBOX_VALUE
-    isChecked: boolean
+export interface BulkSelectionProps {
     showPagination: boolean
 }
 
@@ -38,7 +41,7 @@ export interface BulkSelectionDropdownItemsType {
 
 export interface BulkSelectionDropdownItemsProps<T>
     extends BulkSelectionDropdownItemsType,
-        Pick<BulkSelectionProps<T>, 'handleBulkSelection'> {}
+        Pick<UseBulkSelectionReturnType<T>, 'handleBulkSelection'> {}
 
 export enum SelectAllDialogStatus {
     OPEN = 'OPEN',
@@ -58,4 +61,5 @@ export interface UseBulkSelectionProps<T> {
      * Act as buffer between select all across pages and select all on page state
      */
     getSelectAllDialogStatus: () => SelectAllDialogStatus
+    children?: React.ReactNode
 }

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

@@ -1,3 +0,0 @@
-import { UseBulkSelectionProps, UseBulkSelectionReturnType } from './types';
-declare const useBulkSelection: <T>({ identifiers, getSelectAllDialogStatus, }: UseBulkSelectionProps<T>) => UseBulkSelectionReturnType<T>;
-export default useBulkSelection;