datastake-daf 0.6.143 → 0.6.145

package/dist/components/index.js

@@ -3065,7 +3065,7 @@ const config$3 = {
   Integration: config$4
 };
 
-const _excluded$r = ["width", "height", "size", "name", "fill"];
+const _excluded$q = ["width", "height", "size", "name", "fill"];
 const CustomIcon = _ref => {
   let {
       width = 14,
@@ -3074,7 +3074,7 @@ const CustomIcon = _ref => {
       name = "",
       fill = "none"
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   const conf = config$3[name];
   if (conf) {
     return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread2(_objectSpread2({}, props), {}, {
@@ -9276,7 +9276,7 @@ createCommonjsModule(function (module, exports) {
 !function(e,n){module.exports=n();}(commonjsGlobal,(function(){return {name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var n=["th","st","nd","rd"],t=e%100;return "["+e+(n[(t-20)%10]||n[t]||n[0])+"]"}}}));
 });
 
-const _excluded$q = ["view", "module", "scope", "form", "meta"];
+const _excluded$p = ["view", "module", "scope", "form", "meta"];
 dayjs__default["default"].extend(customParseFormat);
 dayjs__default["default"].extend(utc);
 dayjs__default["default"].extend(utc);
@@ -9650,7 +9650,7 @@ const filterCreateData = data => {
       form,
       meta
     } = data,
-    rest = _objectWithoutProperties(data, _excluded$q);
+    rest = _objectWithoutProperties(data, _excluded$p);
   const _meta = isObjectEmpty(meta) ? undefined : meta;
   return _objectSpread2(_objectSpread2({}, rest), {}, {
     meta: _meta
@@ -10035,7 +10035,7 @@ SelectFilters.propTypes = {
   apiUrl: PropTypes__default["default"].string
 };
 
-const _excluded$p = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
+const _excluded$o = ["columns", "data", "defaultFilters", "style", "pagination", "loading", "onChange", "onFilterChange", "selectOptions", "filtersConfig", "rowSelection", "setShowFilters", "rowKey", "showFilters", "hideOnLoading", "sourcesKey", "className", "projects", "t", "selectedProject", "sourceId", "projectSources", "language", "scrollX", "apiUrl", "app", "doEmptyRows"];
 function DAFTable(_ref) {
   let {
       columns = [],
@@ -10066,7 +10066,7 @@ function DAFTable(_ref) {
       app,
       doEmptyRows
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$p);
+    rest = _objectWithoutProperties(_ref, _excluded$o);
   const [source, setSource] = React.useState([]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = React.useState(!loading);
@@ -10788,7 +10788,7 @@ Pagination.propTypes = {
   isMobile: PropTypes__default["default"].bool
 };
 
-const _excluded$o = ["size", "maxHeight", "dataSource", "columns", "pagination"];
+const _excluded$n = ["size", "maxHeight", "dataSource", "columns", "pagination"];
 function StickyTable(_ref) {
   let {
       size = null,
@@ -10797,7 +10797,7 @@ function StickyTable(_ref) {
       columns = {},
       pagination = false
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "daf-sticky-table",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Table, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11262,7 +11262,7 @@ const BTN_SIZE = {
   LG: 'large'
 };
 
-const _excluded$n = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
+const _excluded$m = ["content", "size", "type", "icon", "onClick", "disabled", "loading", "title", "style", "className"];
 function DafButton(_ref) {
   let {
       content = '',
@@ -11276,7 +11276,7 @@ function DafButton(_ref) {
       style = {},
       className = ''
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$n);
+    restProps = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({
     icon: icon,
     type: type,
@@ -11510,12 +11510,12 @@ const Style$H = dt.div`
   }
 `;
 
-const _excluded$m = ["children"];
+const _excluded$l = ["children"];
 const BorderedButton = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/jsxRuntime.jsx(Style$H, {
     className: "d-btn-cont",
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -11524,7 +11524,7 @@ const BorderedButton = _ref => {
   });
 };
 
-var _templateObject$c;
+var _templateObject$b;
 const variantConfig = {
   default: {
     className: "default-badge",
@@ -11642,7 +11642,7 @@ function Badge(_ref) {
     })
   });
 }
-const Style$G = dt.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
+const Style$G = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 4px;\n\tpadding: 4px;\n\tmax-width: 100%;\n\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t> svg {\n\t\tflex-shrink: 0;\n\t}\n\n\t> span {\n\t\tall: unset;\n\t\tmargin-left: 4px;\n\t\tfont-weight: 600;\n\t\tfont-size: 12px;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\tdisplay: block;\n\t\tmax-width: 100%;\n\t}\n"])));
 Badge.propTypes = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -11655,12 +11655,12 @@ Badge.propTypes = {
   props: PropTypes__default["default"].object
 };
 
-const _excluded$l = ["icon"];
+const _excluded$k = ["icon"];
 function GetIcon(_ref) {
   let {
       icon
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   let Icon = Icons__namespace.CloseOutlined;
   if (Icons__namespace[icon]) {
     Icon = Icons__namespace[icon];
@@ -11982,7 +11982,7 @@ GoToSelect.propTypes = {
   t: PropTypes__default["default"].func
 };
 
-const _excluded$k = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
+const _excluded$j = ["options", "defaultSelected", "onChange", "textWhenMultiple", "withCount", "oneAlwaysSelected", "canUnselectLast", "isAvatarGroup", "maxAvatarCount", "dropDownWidth", "topAvatarValue", "isSingle", "selectionType"];
 const {
   useToken: useToken$i
 } = antd.theme;
@@ -12075,7 +12075,7 @@ function Multiselect(_ref) {
       isSingle = false,
       selectionType = SELECTION_TYPES.DEFAULT
     } = _ref,
-    restProps = _objectWithoutProperties(_ref, _excluded$k);
+    restProps = _objectWithoutProperties(_ref, _excluded$j);
   const {
     token
   } = useToken$i();
@@ -12401,25 +12401,26 @@ function Loading(_ref) {
 const {
   Paragraph
 } = antd.Typography;
-const useHeader = ({
-  title = '',
-  tooltip = '',
-  supportText = '',
-  tags = [],
-  actionButtons: _actionButtons = [],
-  titleTooltip,
-  className,
-  addedHeader = null,
-  addedHeaderFirst,
-  extraButtons: _extraButtons = [],
-  onDownload,
-  downloadDisabled,
-  goBackTo,
-  loading,
-  renderExtraComponents,
-  app = '',
-  isViewMode = false
-}) => {
+const useHeader = _ref => {
+  let {
+    title = '',
+    tooltip = '',
+    supportText = '',
+    tags = [],
+    actionButtons: _actionButtons = [],
+    titleTooltip,
+    className,
+    addedHeader = null,
+    addedHeaderFirst,
+    extraButtons: _extraButtons = [],
+    onDownload,
+    downloadDisabled,
+    goBackTo,
+    loading,
+    renderExtraComponents,
+    app = '',
+    isViewMode = false
+  } = _ref;
   const downloadButtonAction = app && app === 'sbg' && isViewMode ? null : {
     onClick: onDownload,
     disabled: downloadDisabled,
@@ -12445,9 +12446,9 @@ const useHeader = ({
   const buttonCont = React.useRef();
   const [mainContWidth, setMainContWidth] = React.useState(600);
   const [buttonContWidth, setButtonContWidth] = React.useState(0);
-  const hasSupportText = !!supportText?.length;
-  const hasTags = !!tags?.length;
-  const hasButtons = !!(actionButtons?.length || extraButtons?.length);
+  const hasSupportText = !!(supportText !== null && supportText !== void 0 && supportText.length);
+  const hasTags = !!(tags !== null && tags !== void 0 && tags.length);
+  const hasButtons = !!(actionButtons !== null && actionButtons !== void 0 && actionButtons.length || extraButtons !== null && extraButtons !== void 0 && extraButtons.length);
   React.useEffect(() => {
     const mainContObserver = new ResizeObserver(entries => {
       const _mainEntry = entries[0];
@@ -12741,7 +12742,7 @@ DAFHeader.propTypes = {
   downloadDisabled: PropTypes__default["default"].any
 };
 
-const _excluded$j = ["tabs", "onChange", "value", "className"];
+const _excluded$i = ["tabs", "onChange", "value", "className"];
 function TabsHeader(_ref) {
   let {
       tabs = [],
@@ -12749,7 +12750,7 @@ function TabsHeader(_ref) {
       value = '',
       className = 'mt-2'
     } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$j);
+    rest = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: formatClassname(['daf-tabs-header pl-6 pr-6', className]),
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Tabs, _objectSpread2({
@@ -12846,16 +12847,14 @@ DrawerHeader.propTypes = {
   tabsConfig: PropTypes__default["default"].any
 };
 
-const _excluded$i = ["label", "onClick", "icon", "type", "tooltip", "disabled", "loading", "style", "className"];
-const useFooter = _ref => {
-  let {
-    leftContent,
-    centerContent,
-    rightContent,
-    actionButtons,
-    app,
-    isViewMode
-  } = _ref;
+const useFooter = ({
+  leftContent,
+  centerContent,
+  rightContent,
+  actionButtons,
+  app,
+  isViewMode
+}) => {
   const renderFooterContent = React.useMemo(() => {
     const FooterContent = () => /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "daf-footer-content",
@@ -12871,18 +12870,18 @@ const useFooter = _ref => {
           className: "daf-footer-actions",
           children: actionButtons.map((button, index) => {
             const {
-                label,
-                onClick,
-                icon,
-                type = BTN_TYPES.PRIMARY,
-                tooltip,
-                disabled = false,
-                loading = false,
-                style = {},
-                className = ""
-              } = button,
-              restProps = _objectWithoutProperties(button, _excluded$i);
-            return /*#__PURE__*/jsxRuntime.jsx(DafButton, _objectSpread2({
+              label,
+              onClick,
+              icon,
+              type = BTN_TYPES.PRIMARY,
+              tooltip,
+              disabled = false,
+              loading = false,
+              style = {},
+              className = "",
+              ...restProps
+            } = button;
+            return /*#__PURE__*/jsxRuntime.jsx(DafButton, {
               content: label,
               type: type,
               size: BTN_SIZE.MD,
@@ -12894,8 +12893,9 @@ const useFooter = _ref => {
               loading: loading,
               title: tooltip,
               style: style,
-              className: className
-            }, restProps), index);
+              className: className,
+              ...restProps
+            }, index);
           })
         })]
       })]
@@ -12908,8 +12908,180 @@ const useFooter = _ref => {
   };
 };
 
-var _templateObject$b;
-const FooterContainer = dt.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n\t.daf-footer {\n\t\tbackground: #ffffff;\n\t\tborder-top: 1px solid #e8e8e8;\n\t\tborder-left: none;\n\t\tborder-right: none;\n\t\tborder-bottom: none;\n\t\tborder-radius: 0;\n\t\tpadding: 24px;\n\t\tmargin: 0;\n\t\tbox-shadow: none;\n\t\tz-index: 100;\n\t\tposition: relative;\n\t\tmin-height: 80px;\n\n\t\t&.daf-footer-fixed {\n\t\t\tposition: fixed;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tz-index: 1000;\n\t\t}\n\n\t\t.daf-footer-content {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\twidth: 100%;\n\t\t\tmin-height: 32px;\n\n\t\t\t.daf-footer-left {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: flex-start;\n\t\t\t}\n\n\t\t\t.daf-footer-center {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t}\n\n\t\t\t.daf-footer-right {\n\t\t\t\tflex: 1;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: flex-end;\n\t\t\t\tgap: 12px;\n\n\t\t\t\t.daf-footer-actions {\n\t\t\t\t\t.ant-btn {\n\t\t\t\t\t\theight: 40px;\n\t\t\t\t\t\tpadding: 0 24px;\n\t\t\t\t\t\tborder-radius: 6px;\n\t\t\t\t\t\tfont-weight: 500;\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\ttransition: all 0.3s ease;\n\t\t\t\t\t\tborder: 1px solid transparent;\n\n\t\t\t\t\t\t&.ant-btn-primary {\n\t\t\t\t\t\t\tbackground-color: var(--color-primary-70);\n\t\t\t\t\t\t\tcolor: #ffffff;\n\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tbackground-color: var(--color-primary-60);\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-60);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tbackground-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tbackground-color: #f5f5f5;\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&.ant-btn-default {\n\t\t\t\t\t\t\tbackground: #ffffff;\n\t\t\t\t\t\t\tcolor: #666666;\n\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-70);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tbackground-color: #f5f5f5;\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&.ant-btn-ghost {\n\t\t\t\t\t\t\tbackground: transparent;\n\t\t\t\t\t\t\tcolor: #666666;\n\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-70);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-70);\n\t\t\t\t\t\t\t\tbackground: rgba(0, 0, 0, 0.02);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:active {\n\t\t\t\t\t\t\t\tborder-color: var(--color-primary-80);\n\t\t\t\t\t\t\t\tcolor: var(--color-primary-80);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t&:disabled {\n\t\t\t\t\t\t\t\tcolor: #bfbfbf;\n\t\t\t\t\t\t\t\tborder-color: #d9d9d9;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Responsive design */\n\t@media (max-width: 768px) {\n\t\t.daf-footer {\n\t\t\tmargin: 0;\n\t\t\tpadding: 16px;\n\n\t\t\t.daf-footer-content {\n\t\t\t\tflex-direction: column;\n\t\t\t\tgap: 16px;\n\t\t\t\talign-items: stretch;\n\n\t\t\t\t.daf-footer-left,\n\t\t\t\t.daf-footer-center,\n\t\t\t\t.daf-footer-right {\n\t\t\t\t\tflex: none;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\n\t\t\t\t.daf-footer-right {\n\t\t\t\t\t.daf-footer-actions {\n\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* App-specific styling */\n\t&.sbg-app {\n\t\t.daf-footer {\n\t\t\tbackground: #f8f9fa;\n\t\t\tborder-color: #e9ecef;\n\t\t}\n\t}\n\n\t&.nashiriki-app {\n\t\t.daf-footer {\n\t\t\tbackground: #fff;\n\t\t\tborder-color: #d9d9d9;\n\t\t}\n\t}\n"])));
+const FooterContainer = dt.div`
+	.daf-footer {
+		background: #ffffff;
+		border-top: 1px solid #e8e8e8;
+		border-left: none;
+		border-right: none;
+		border-bottom: none;
+		border-radius: 0;
+		padding: 24px;
+		margin: 0;
+		box-shadow: none;
+		z-index: 100;
+		position: relative;
+		min-height: 80px;
+
+		&.daf-footer-fixed {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 1000;
+		}
+
+		.daf-footer-content {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: 100%;
+			min-height: 32px;
+
+			.daf-footer-left {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+			}
+
+			.daf-footer-center {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.daf-footer-right {
+				flex: 1;
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				gap: 12px;
+
+				.daf-footer-actions {
+					.ant-btn {
+						height: 40px;
+						padding: 0 24px;
+						border-radius: 6px;
+						font-weight: 500;
+						font-size: 14px;
+						transition: all 0.3s ease;
+						border: 1px solid transparent;
+
+						&.ant-btn-primary {
+							background-color: var(--color-primary-70);
+							color: #ffffff;
+							border-color: var(--color-primary-70);
+
+							&:hover {
+								background-color: var(--color-primary-60);
+								border-color: var(--color-primary-60);
+							}
+
+							&:active {
+								background-color: var(--color-primary-80);
+								border-color: var(--color-primary-80);
+							}
+
+							&:disabled {
+								background-color: #f5f5f5;
+								color: #bfbfbf;
+								border-color: #d9d9d9;
+							}
+						}
+
+						&.ant-btn-default {
+							background: #ffffff;
+							color: #666666;
+							border-color: #d9d9d9;
+
+							&:hover {
+								border-color: var(--color-primary-70);
+								color: var(--color-primary-70);
+							}
+
+							&:active {
+								border-color: var(--color-primary-80);
+								color: var(--color-primary-80);
+							}
+
+							&:disabled {
+								background-color: #f5f5f5;
+								color: #bfbfbf;
+								border-color: #d9d9d9;
+							}
+						}
+
+						&.ant-btn-ghost {
+							background: transparent;
+							color: #666666;
+							border-color: #d9d9d9;
+
+							&:hover {
+								border-color: var(--color-primary-70);
+								color: var(--color-primary-70);
+								background: rgba(0, 0, 0, 0.02);
+							}
+
+							&:active {
+								border-color: var(--color-primary-80);
+								color: var(--color-primary-80);
+							}
+
+							&:disabled {
+								color: #bfbfbf;
+								border-color: #d9d9d9;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	/* Responsive design */
+	@media (max-width: 768px) {
+		.daf-footer {
+			margin: 0;
+			padding: 16px;
+
+			.daf-footer-content {
+				flex-direction: column;
+				gap: 16px;
+				align-items: stretch;
+
+				.daf-footer-left,
+				.daf-footer-center,
+				.daf-footer-right {
+					flex: none;
+					justify-content: center;
+				}
+
+				.daf-footer-right {
+					.daf-footer-actions {
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+
+	/* App-specific styling */
+	&.sbg-app {
+		.daf-footer {
+			background: #f8f9fa;
+			border-color: #e9ecef;
+		}
+	}
+
+	&.nashiriki-app {
+		.daf-footer {
+			background: #fff;
+			border-color: #d9d9d9;
+		}
+	}
+`;
 
 function DAFFooter(_ref) {
   let {
@@ -13777,9 +13949,8 @@ const determineHasChildren = ({
 
 const sortByPosition = (items, getConfig) => {
   return items.sort((a, b) => {
-    var _getConfig, _getConfig2;
-    const positionA = ((_getConfig = getConfig(a)) === null || _getConfig === void 0 ? void 0 : _getConfig.position) || 0;
-    const positionB = ((_getConfig2 = getConfig(b)) === null || _getConfig2 === void 0 ? void 0 : _getConfig2.position) || 0;
+    const positionA = getConfig(a)?.position || 0;
+    const positionB = getConfig(b)?.position || 0;
     return positionA - positionB;
   });
 };
@@ -13796,7 +13967,7 @@ const resolveDynamicLabel = (labelConfig, item, defaultLabel) => {
       const parts = labelKey.split(' is ');
       if (parts.length === 2) {
         const [conditionKey, conditionValue] = parts;
-        if ((item === null || item === void 0 ? void 0 : item[conditionKey]) === conditionValue) {
+        if (item?.[conditionKey] === conditionValue) {
           return labelConfig[labelKey];
         }
       }
@@ -16856,7 +17027,7 @@ function StakeholderIcon$1({
   const isSmall = isSmallMarker(zoom) || isExtraSmallMarker(zoom);
   const isMedium = isMediumMarker(zoom);
   const isSelected = React.useMemo(() => selectedMarkersId.includes(data.datastakeId), [selectedMarkersId, data.datastakeId]);
-  const isOpen = React.useMemo(() => openPopupIdRef.current === data.datastakeId, [openPopupIdRef.current, data.datastakeId]);
+  React.useMemo(() => openPopupIdRef.current === data.datastakeId, [openPopupIdRef.current, data.datastakeId]);
   const linkNodesData = React.useMemo(() => {
     const nodes = [];
     const links = data.links || [];
@@ -16998,39 +17169,45 @@ function StakeholderIcon$1({
       });
     });
   }, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen]);
-  return /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
-    content: renderTooltipJsx({
-      title: data.name,
-      subTitle: data.subTitle,
-      total: data.sources,
-      className: "pt-0 pb-0",
-      items: renderTooltip(data),
-      link,
-      onClickLink: () => {
-        const popovers = document.querySelectorAll(".ant-popover");
-        popovers.forEach(popover => {
-          if (popover && popover.parentNode) {
-            popover.parentNode.removeChild(popover);
-          }
-        });
-        onClickLink(data);
-      }
-    }),
-    trigger: "click",
-    open: isOpen,
-    children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMarker, {
-      className: `${data.type} ${isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""} 
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
+      content: renderTooltipJsx({
+        title: data.name,
+        subTitle: data.subTitle,
+        total: data.sources,
+        className: "pt-0 pb-0",
+        items: renderTooltip(data),
+        link,
+        onClickLink: () => {
+          // const popovers = document.querySelectorAll(".ant-popover");
+
+          // popovers.forEach((popover) => {
+          // 	if (popover && popover.parentNode) {
+          // 		popover.parentNode.removeChild(popover);
+          // 	}
+          // });
+          onClickLink(data);
+        }
+      })
+      // trigger="click"
+      // zIndex={1000}
+      // open={isOpen}
+      ,
+      getPopupContainer: () => document.getElementById(data.datastakeId),
+      children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMarker, {
+        className: `${data.type} ${isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""} 
 			${isSmall ? "small" : isMedium ? "medium" : "large"}
 			${className}`,
-      onClick: () => handleSelectMarker(data),
-      style: {
-        opacity: isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1,
-        pointerEvents: isExtraSmallMarker(zoom) && !isForceOpen ? "none" : "auto"
-      },
-      children: !isSmall && /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-        name: getStakeholderIcon(data?.type || ""),
-        size: isMedium ? 13 : 16,
-        color: !isSelected && selectedMarkersId.length > 0 ? "white" : "white"
+        onClick: () => handleSelectMarker(data),
+        style: {
+          opacity: isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1,
+          pointerEvents: isExtraSmallMarker(zoom) && !isForceOpen ? "none" : "auto"
+        },
+        children: !isSmall && /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+          name: getStakeholderIcon(data?.type || ""),
+          size: isMedium ? 13 : 16,
+          color: !isSelected && selectedMarkersId.length > 0 ? "white" : "white"
+        })
       })
     })
   });
@@ -17045,6 +17222,7 @@ function LocationIcon({
   onClickLink,
   selectedMarkersId,
   handleSelectMarker,
+  i,
   mapRef,
   setMapMarkers,
   openPopupIdRef,
@@ -17090,7 +17268,7 @@ function LocationIcon({
   }, [data.stakeholders, zoom]);
   React.useEffect(() => {
     stakeholdersOfLocation.map((stakeholder, index) => {
-      const markerId = `${index}${stakeholder.datastakeId}`;
+      const markerId = `${stakeholder.datastakeId}`;
       const {
         x,
         y,
@@ -17212,8 +17390,14 @@ function LocationIcon({
       items: renderTooltip(data),
       link,
       onClickLink: () => onClickLink(data)
-    }),
-    open: (!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) && isHovering,
+    })
+    // open={
+    // 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
+    // 	isHovering
+    // }
+    ,
+
+    getPopupContainer: () => document.getElementById(i),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
         position: "relative",
@@ -17240,9 +17424,7 @@ function LocationIcon({
         zoom: zoom,
         onMouseEnter: () => setIsHovering(true),
         onMouseLeave: () => {
-          setTimeout(() => {
-            setIsHovering(false);
-          }, 100);
+          setIsHovering(false);
         },
         selectedMarkersId: selectedMarkersId
       })]
@@ -17699,6 +17881,7 @@ function useMapHelper$1({
         root.render( /*#__PURE__*/jsxRuntime.jsx(LocationIcon, {
           data: data,
           zoom: zoom,
+          i: i,
           allData: allData,
           link: link,
           renderTooltip: renderTooltip,
@@ -17948,7 +18131,6 @@ const useMap$1 = ({
     handleSelectMarker
   });
   function handleSelectMarker(clickedMarker) {
-    destroyAllPopovers();
     setSelectedMarkersId(prev => {
       if (prev.includes(clickedMarker.datastakeId)) {
         openPopupIdRef.current = null;
@@ -17970,14 +18152,14 @@ const useMap$1 = ({
     setMarkerWithPopup(null);
   }
   function destroyAllPopovers() {
-    if (isStakeholder(markerWithPopup?.type)) {
-      const popovers = document.querySelectorAll(".ant-popover");
-      popovers.forEach(popover => {
-        if (popover && popover.parentNode) {
-          popover.parentNode.removeChild(popover);
-        }
-      });
-    }
+    // if (isStakeholder(markerWithPopup?.type)) {
+    //   const popovers = document.querySelectorAll(".ant-popover");
+    //   popovers.forEach((popover) => {
+    //     if (popover && popover.parentNode) {
+    //       popover.parentNode.removeChild(popover);
+    //     }
+    //   });
+    // }
   }
   const addAllDataToMap = () => {
     if (type === "chain" && markerWithPopup && isStakeholder(markerWithPopup?.type)) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.143",
+	"version": "0.6.145",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",