@banyan_cloud/roots 1.0.159 → 1.0.161

package/dist/cjs/index.js

@@ -47177,7 +47177,8 @@ var BaseModal = function BaseModal(props) {
     renderFooter = props.renderFooter,
     toggle = props.toggle,
     open = props.open,
-    noDismiss = props.noDismiss;
+    noDismiss = props.noDismiss,
+    customWrapperId = props.customWrapperId;
   var _useFloating = useFloating({
       open: open,
       onOpenChange: toggle
@@ -47192,7 +47193,7 @@ var BaseModal = function BaseModal(props) {
     open: open,
     className: popperClassName,
     transparent: false,
-    wrapperId: "base-modal-popper",
+    wrapperId: customWrapperId !== null && customWrapperId !== void 0 ? customWrapperId : 'base-modal-popper',
     children: open && /*#__PURE__*/jsxRuntime.jsx(FloatingFocusManager, {
       context: context,
       children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, getFloatingProps({
@@ -47235,7 +47236,8 @@ BaseModal.propTypes = {
   renderHeader: propTypesExports.element,
   renderFooter: propTypesExports.element,
   toggle: propTypesExports.func,
-  noDismiss: propTypesExports.bool
+  noDismiss: propTypesExports.bool,
+  customWrapperId: propTypesExports.string
 };
 BaseModal.defaultProps = {
   className: '',
@@ -47243,7 +47245,8 @@ BaseModal.defaultProps = {
   renderHeader: null,
   renderFooter: null,
   toggle: function toggle() {},
-  noDismiss: false
+  noDismiss: false,
+  customWrapperId: null
 };
 
 var css$R = ".Dialog_module_root__b0f7da04 {\n  padding: 0.25rem 0px;\n  max-height: 14rem;\n  background: var(--white);\n  border-radius: 0.25rem;\n}\n.Dialog_module_root__b0f7da04.Dialog_module_sm__b0f7da04 {\n  width: 21.25rem;\n}\n.Dialog_module_root__b0f7da04.Dialog_module_md__b0f7da04 {\n  width: 35rem;\n}\n.Dialog_module_root__b0f7da04 .Dialog_module_header__b0f7da04 {\n  font-weight: 600;\n  font-size: 0.875rem;\n  color: var(--black);\n}\n.Dialog_module_root__b0f7da04 .Dialog_module_footer__b0f7da04 {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 1rem;\n}\n.Dialog_module_root__b0f7da04 .Dialog_module_footer__b0f7da04 .Dialog_module_cancel__b0f7da04[data-elem=base-cell] {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: stretch;\n  color: var(--grey1);\n  border-radius: 0.25rem;\n  border: 1px solid var(--grey4);\n}\n.Dialog_module_root__b0f7da04 .Dialog_module_description__b0f7da04 {\n  padding: 0.5rem 0px;\n  font-size: 0.75rem;\n}";
@@ -50961,8 +50964,8 @@ Tabs.defaultProps = {
   fallback: false
 };
 
-var css$i = ".BaseSidePanel_module_root__6bcd651e {\n  max-height: 100%;\n  height: 100%;\n  width: 30%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  top: 0;\n  background: var(--white);\n  box-shadow: 0px 8px 20px rgba(24, 24, 24, 0.08);\n  overflow-x: hidden;\n}\n.BaseSidePanel_module_root__6bcd651e.BaseSidePanel_module_close__6bcd651e {\n  width: 0rem;\n}\n.BaseSidePanel_module_root__6bcd651e .BaseSidePanel_module_body__6bcd651e {\n  flex: 1;\n  overflow-y: auto;\n}";
-var modules_c7321921 = {"root":"BaseSidePanel_module_root__6bcd651e","close":"BaseSidePanel_module_close__6bcd651e","body":"BaseSidePanel_module_body__6bcd651e"};
+var css$i = ".BaseSidePanel_module_drawer__c17c9ba1 {\n  max-height: 100%;\n  height: 100%;\n  width: 30%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  top: 0;\n  background: var(--white);\n  box-shadow: 0px 8px 20px rgba(24, 24, 24, 0.08);\n  overflow-x: hidden;\n}\n.BaseSidePanel_module_drawer__c17c9ba1.BaseSidePanel_module_close__c17c9ba1 {\n  width: 0rem;\n}\n.BaseSidePanel_module_drawer__c17c9ba1 .BaseSidePanel_module_body__c17c9ba1 {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.BaseSidePanel_module_modal__c17c9ba1 {\n  height: 100%;\n  width: 30%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: stretch;\n  position: fixed;\n  top: 0 !important;\n  left: 70% !important;\n  z-index: 100;\n  background: var(--white);\n  box-shadow: 0px 8px 20px rgba(24, 24, 24, 0.08);\n  overflow-x: hidden;\n}\n.BaseSidePanel_module_modal__c17c9ba1.BaseSidePanel_module_close__c17c9ba1 {\n  width: 0rem;\n}\n.BaseSidePanel_module_modal__c17c9ba1 .BaseSidePanel_module_body__c17c9ba1 {\n  flex: 1;\n  overflow-y: auto;\n}";
+var modules_c7321921 = {"drawer":"BaseSidePanel_module_drawer__c17c9ba1","close":"BaseSidePanel_module_close__c17c9ba1","body":"BaseSidePanel_module_body__c17c9ba1","modal":"BaseSidePanel_module_modal__c17c9ba1"};
 n(css$i,{});
 
 var BaseSidePanel = function BaseSidePanel(props) {
@@ -50970,11 +50973,31 @@ var BaseSidePanel = function BaseSidePanel(props) {
     renderHeader = props.renderHeader,
     children = props.children,
     renderFooter = props.renderFooter,
-    open = props.open;
+    open = props.open,
+    isModal = props.isModal;
   var panelRef = React.useRef();
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return isModal ? /*#__PURE__*/jsxRuntime.jsxs(Popper, {
+    open: open,
+    customWrapperId: "side-panel",
+    transparent: false,
+    wrapperId: "base-modal-popper",
+    className: classes(modules_c7321921.modal, open ? '' : modules_c7321921.close, className),
+    children: [renderHeader && /*#__PURE__*/jsxRuntime.jsx("div", {
+      "data-elem": "header",
+      className: modules_c7321921.header,
+      children: renderHeader
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      "data-elem": "body",
+      className: modules_c7321921.body,
+      children: children
+    }), renderFooter && /*#__PURE__*/jsxRuntime.jsx("div", {
+      "data-elem": "footer",
+      className: modules_c7321921.footer,
+      children: renderFooter
+    })]
+  }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: panelRef,
-    className: classes(modules_c7321921.root, open ? '' : modules_c7321921.close, className),
+    className: classes(modules_c7321921.drawer, open ? '' : modules_c7321921.close, className),
     children: [renderHeader && /*#__PURE__*/jsxRuntime.jsx("div", {
       "data-elem": "header",
       className: modules_c7321921.header,