@qoretechnologies/reqore 0.37.0 → 0.37.1

package/dist/containers/UIProvider.js

@@ -51,7 +51,6 @@ var Layout_1 = __importDefault(require("../components/Layout"));
 var theme_1 = require("../constants/theme");
 var ThemeContext_1 = __importDefault(require("../context/ThemeContext"));
 var colors_1 = require("../helpers/colors");
-var PopoverProvider_1 = __importDefault(require("./PopoverProvider"));
 var ReqoreProvider_1 = __importDefault(require("./ReqoreProvider"));
 var ThemeProvider_1 = __importDefault(require("./ThemeProvider"));
 var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .reqore-blur-wrapper {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999998;\n    cursor: pointer;\n    background-color: ", ";\n    backdrop-filter: blur(3px);\n  }\n\n  .reqore-blur-z-index {\n    z-index: 999999;\n  }\n"], ["\n  .reqore-blur-wrapper {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 999998;\n    cursor: pointer;\n    background-color: ", ";\n    backdrop-filter: blur(3px);\n  }\n\n  .reqore-blur-z-index {\n    z-index: 999999;\n  }\n"])), function (_a) {
@@ -71,7 +70,7 @@ var ReqoreUIProvider = function (_a) {
     var _theme = (0, lodash_1.cloneDeep)(theme || {});
     var _defaultTheme = (0, lodash_1.cloneDeep)(theme_1.DEFAULT_THEME);
     var rebuiltTheme = (0, colors_1.buildTheme)((0, merge_1["default"])(_defaultTheme, _theme));
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(ThemeContext_1["default"].Provider, __assign({ value: __assign({}, rebuiltTheme) }, { children: [(0, jsx_runtime_1.jsx)(ThemeProvider_1["default"], { children: (0, jsx_runtime_1.jsx)(GlobalStyle, {}) }), (0, jsx_runtime_1.jsx)(Layout_1["default"], __assign({ withSidebar: options === null || options === void 0 ? void 0 : options.withSidebar }, { children: modalPortal ? ((0, jsx_runtime_1.jsx)(ReqoreProvider_1["default"], __assign({ options: options }, { children: (0, jsx_runtime_1.jsx)(PopoverProvider_1["default"], __assign({ uiScale: options === null || options === void 0 ? void 0 : options.uiScale }, { children: children })) }))) : null })), (0, jsx_runtime_1.jsx)(ReqorePortal, { ref: setModalPortal })] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(ThemeContext_1["default"].Provider, __assign({ value: __assign({}, rebuiltTheme) }, { children: [(0, jsx_runtime_1.jsx)(ThemeProvider_1["default"], { children: (0, jsx_runtime_1.jsx)(GlobalStyle, {}) }), (0, jsx_runtime_1.jsx)(Layout_1["default"], __assign({ withSidebar: options === null || options === void 0 ? void 0 : options.withSidebar }, { children: modalPortal ? (0, jsx_runtime_1.jsx)(ReqoreProvider_1["default"], __assign({ options: options }, { children: children })) : null })), (0, jsx_runtime_1.jsx)(ReqorePortal, { ref: setModalPortal })] })) }));
 };
 exports["default"] = ReqoreUIProvider;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/containers/UIProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"UIProvider.js","sourceRoot":"","sources":["../../src/containers/UIProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAmC;AACnC,uDAAiC;AACjC,qCAAgC;AAChC,+BAAoD;AACpD,qEAAmE;AACnE,gEAAuD;AAEvD,4CAAiE;AACjE,yEAAmD;AACnD,4CAAyF;AACzF,sEAAgD;AAChD,oEAA8C;AAC9C,kEAAkD;AA0BlD,IAAM,WAAW,OAAG,qCAAiB,wVAAA,gLASb,EAAuD,kGAO9E,KAPuB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,IAAA,eAAI,EAAC,IAAA,+BAAsB,EAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AAAxC,CAAwC,CAO9E,CAAC;AAEF,IAAM,YAAY,GAAG,8BAAM,CAAC,GAAG,8IAAA,qEAO3B,EAED,IACF,KAHG,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,WAAA,uBAAG,4FAAA,eACT,EAAmD,OAC7D,KADU,IAAA,yBAAgB,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC;AAD7C,CAEhB,CACF,CAAC;AAEF,IAAM,YAAY,GAAG,IAAA,kBAAU,EAAyB,UAAC,MAAM,EAAE,GAAG;IAClE,OAAO,CACL,uBAAC,0BAAmB,cAClB,uBAAC,YAAY,IAAC,EAAE,EAAC,eAAe,EAAC,GAAG,EAAE,GAAG,GAAI,GACzB,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAM,gBAAgB,GAAqC,UAAC,EAA4B;QAA1B,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;IAC9E,IAAA,KAAgC,IAAA,gBAAQ,EAAM,KAAK,CAAC,EAAnD,WAAW,QAAA,EAAE,cAAc,QAAwB,CAAC;IAE3D,IAAM,MAAM,GAA0B,IAAA,kBAAS,EAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC7D,IAAM,aAAa,GAAiB,IAAA,kBAAS,EAAC,qBAAa,CAAC,CAAC;IAC7D,IAAM,YAAY,GAAiB,IAAA,mBAAU,EAAC,IAAA,kBAAK,EAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5E,OAAO,CACL,2DACE,wBAAC,yBAAY,CAAC,QAAQ,aAAC,KAAK,eAAO,YAAY,kBAC7C,uBAAC,0BAAmB,cAClB,uBAAC,WAAW,KAAG,GACK,EACtB,uBAAC,mBAAmB,aAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,gBACnD,WAAW,CAAC,CAAC,CAAC,CACb,uBAAC,2BAAc,aAAC,OAAO,EAAE,OAAO,gBAC9B,uBAAC,4BAAe,aAAC,OAAO,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,gBAAG,QAAQ,IAAmB,IACzD,CAClB,CAAC,CAAC,CAAC,IAAI,IACY,EACtB,uBAAC,YAAY,IAAC,GAAG,EAAE,cAAc,GAAI,KACf,GACvB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UIProvider.js","sourceRoot":"","sources":["../../src/containers/UIProvider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAmC;AACnC,uDAAiC;AACjC,qCAAgC;AAChC,+BAAoD;AACpD,qEAAmE;AACnE,gEAAuD;AAEvD,4CAAiE;AACjE,yEAAmD;AACnD,4CAAyF;AACzF,oEAA8C;AAC9C,kEAAkD;AA0BlD,IAAM,WAAW,OAAG,qCAAiB,wVAAA,gLASb,EAAuD,kGAO9E,KAPuB,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,IAAA,eAAI,EAAC,IAAA,+BAAsB,EAAC,KAAK,CAAC,EAAE,GAAG,CAAC;AAAxC,CAAwC,CAO9E,CAAC;AAEF,IAAM,YAAY,GAAG,8BAAM,CAAC,GAAG,8IAAA,qEAO3B,EAED,IACF,KAHG,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,WAAA,uBAAG,4FAAA,eACT,EAAmD,OAC7D,KADU,IAAA,yBAAgB,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC;AAD7C,CAEhB,CACF,CAAC;AAEF,IAAM,YAAY,GAAG,IAAA,kBAAU,EAAyB,UAAC,MAAM,EAAE,GAAG;IAClE,OAAO,CACL,uBAAC,0BAAmB,cAClB,uBAAC,YAAY,IAAC,EAAE,EAAC,eAAe,EAAC,GAAG,EAAE,GAAG,GAAI,GACzB,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAM,gBAAgB,GAAqC,UAAC,EAA4B;QAA1B,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;IAC9E,IAAA,KAAgC,IAAA,gBAAQ,EAAM,KAAK,CAAC,EAAnD,WAAW,QAAA,EAAE,cAAc,QAAwB,CAAC;IAE3D,IAAM,MAAM,GAA0B,IAAA,kBAAS,EAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAC7D,IAAM,aAAa,GAAiB,IAAA,kBAAS,EAAC,qBAAa,CAAC,CAAC;IAC7D,IAAM,YAAY,GAAiB,IAAA,mBAAU,EAAC,IAAA,kBAAK,EAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5E,OAAO,CACL,2DACE,wBAAC,yBAAY,CAAC,QAAQ,aAAC,KAAK,eAAO,YAAY,kBAC7C,uBAAC,0BAAmB,cAClB,uBAAC,WAAW,KAAG,GACK,EACtB,uBAAC,mBAAmB,aAAC,WAAW,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,gBACnD,WAAW,CAAC,CAAC,CAAC,uBAAC,2BAAc,aAAC,OAAO,EAAE,OAAO,gBAAG,QAAQ,IAAkB,CAAC,CAAC,CAAC,IAAI,IAC/D,EACtB,uBAAC,YAAY,IAAC,GAAG,EAAE,cAAc,GAAI,KACf,GACvB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.37.0",
+  "version": "0.37.1",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Collection/item.tsx

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
 import { useReqoreProperty } from '../../hooks/useReqoreContext';
 import { useReqoreTheme } from '../../hooks/useTheme';
-import { StyledBackdrop } from '../Drawer';
+import { ReqoreBackdrop } from '../Drawer/backdrop';
 import {
   IReqorePanelAction,
   IReqorePanelBottomAction,
@@ -150,7 +150,7 @@ export const ReqoreCollectionItem = ({
   );
 
   const renderContent = () => {
-    const handleItemClick = (event) => {
+    const handleItemClick = (event?: any) => {
       if (expandable) {
         if (isSelected) {
           setDimensions(originalDimensions.current);
@@ -194,11 +194,10 @@ export const ReqoreCollectionItem = ({
         {position && (
           <>
             <div style={{ ...originalDimensions.current }} />
-            <StyledBackdrop
+            <ReqoreBackdrop
               zIndex={getAndIncreaseZIndex()}
               blur={5}
-              closable
-              onClick={handleItemClick}
+              onClose={() => handleItemClick()}
             />
           </>
         )}

package/src/components/Drawer/backdrop.tsx

@@ -0,0 +1,43 @@
+import { animated } from '@react-spring/web';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import styled from 'styled-components';
+import { IReqoreDrawerStyle } from '.';
+import { getMainBackgroundColor } from '../../helpers/colors';
+
+export interface IReqoreBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+  zIndex?: number;
+  blur?: number;
+  onClose?: () => void;
+  opacity?: number;
+}
+
+export const StyledBackdrop = styled(animated.div)<
+  IReqoreDrawerStyle & { closable: boolean; zIndex?: number }
+>`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  backdrop-filter: ${({ blur }) => (blur ? `blur(${blur}px)` : undefined)};
+  z-index: ${({ zIndex }) => zIndex};
+  background-color: ${({ theme }) => rgba(getMainBackgroundColor(theme), 0.3)};
+  cursor: ${({ closable }) => (closable ? 'pointer' : 'initial')};
+`;
+
+export const ReqoreBackdrop = memo(
+  ({ onClose, zIndex, blur, opacity, ...rest }: IReqoreBackdropProps) => (
+    <StyledBackdrop
+      {...rest}
+      className={`${rest.className || ''} reqore-drawer-backdrop`}
+      onClick={() => onClose?.()}
+      closable={!!onClose}
+      zIndex={zIndex}
+      blur={blur}
+      style={{
+        opacity,
+      }}
+    />
+  )
+);

package/src/components/Drawer/index.tsx

@@ -1,5 +1,4 @@
 import { animated, useTransition } from '@react-spring/web';
-import { rgba } from 'polished';
 import { Resizable } from 're-resizable';
 import { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -8,12 +7,12 @@ import { useReqoreProperty } from '../..';
 import { SPRING_CONFIG, SPRING_CONFIG_NO_ANIMATIONS } from '../../constants/animations';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
-import { getMainBackgroundColor } from '../../helpers/colors';
 import useLatestZIndex from '../../hooks/useLatestZIndex';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreButton from '../Button';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../Panel';
+import { ReqoreBackdrop } from './backdrop';
 
 export type TPosition = 'top' | 'bottom' | 'left' | 'right';
 
@@ -97,20 +96,6 @@ export const StyledCloseWrapper = styled.div<IReqoreDrawerStyle>`
 
 export const StyledDrawerResizable = styled(animated.div)``;
 
-export const StyledBackdrop = styled(animated.div)<
-  IReqoreDrawerStyle & { closable: boolean; zIndex?: number }
->`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  backdrop-filter: ${({ blur }) => (blur ? `blur(${blur}px)` : undefined)};
-  z-index: ${({ zIndex }) => zIndex};
-  background-color: ${({ theme }) => rgba(getMainBackgroundColor(theme), 0.3)};
-  cursor: ${({ closable }) => (closable ? 'pointer' : 'initial')};
-`;
-
 /**
  * It returns an icon name based on the position and whether the panel is hidden or not
  * @param {'top' | 'bottom' | 'left' | 'right'} position - The position of the panel.
@@ -245,15 +230,11 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
       item ? (
         <ReqoreThemeProvider theme={theme}>
           {hasBackdrop && !_isHidden ? (
-            <StyledBackdrop
-              className='reqore-drawer-backdrop'
-              onClick={() => onClose && onClose()}
-              closable={!!onClose}
+            <ReqoreBackdrop
+              onClose={onClose}
               zIndex={zIndex}
               blur={blur}
-              style={{
-                opacity: styles.opacity,
-              }}
+              opacity={styles.opacity}
             />
           ) : null}
           <Resizable

package/src/components/Navbar/index.tsx

@@ -20,6 +20,7 @@ export interface IReqoreNavbarStyle extends IReqoreNavbarProps {
 export const StyledNavbar = styled.div<IReqoreNavbarStyle>`
   ${({ theme, type }: IReqoreNavbarStyle) => css`
     height: 50px;
+    flex-shrink: 0;
     width: 100%;
     padding: 0 10px;
     color: ${theme[type]?.color ||

package/src/components/Sidebar/index.tsx

@@ -13,7 +13,7 @@ import useLatestZIndex from '../../hooks/useLatestZIndex';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { ActiveIconScale, InactiveIconScale, ScaleIconOnHover } from '../../styles';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledBackdrop } from '../Drawer';
+import { ReqoreBackdrop } from '../Drawer/backdrop';
 import ReqoreIcon from '../Icon';
 import SidebarItem from './item';
 
@@ -423,10 +423,9 @@ const ReqoreSidebar: React.FC<IQorusSidebarProps> = ({
   return (
     <>
       {floating && hasFloatingBackdrop && isOpen ? (
-        <StyledBackdrop
+        <ReqoreBackdrop
           className='reqore-sidebar-backdrop'
-          onClick={() => onCloseClick?.()}
-          closable
+          onClose={() => onCloseClick?.()}
           zIndex={zIndex}
         />
       ) : null}

package/src/containers/ReqoreProvider.tsx

@@ -1,5 +1,6 @@
 import { map, size } from 'lodash';
 import React, { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useMedia } from 'react-use';
 import shortid from 'shortid';
 import { useContext } from 'use-context-selector';
@@ -13,6 +14,7 @@ import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
 import ReqoreContext from '../context/ReqoreContext';
 import ThemeContext from '../context/ThemeContext';
 import { IReqoreIconName } from '../types/icons';
+import PopoverProvider from './PopoverProvider';
 import { IReqoreOptions } from './UIProvider';
 
 export interface IReqoreNotificationData extends IReqoreNotificationProps {
@@ -159,99 +161,104 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
             'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
         }}
       >
-        {size(notifications) > 0 ? (
-          <ReqoreNotificationsWrapper position={options.notificationsPosition}>
-            {notifications.map((notification) => (
-              <ReqoreNotification
-                {...notification}
-                key={notification.id}
-                onClick={
-                  notification.onClick
-                    ? () => void notification.onClick(notification.id)
-                    : undefined
-                }
-                onClose={() => {
-                  if (notification.onClose) {
-                    notification.onClose(notification.id);
+        <PopoverProvider uiScale={options?.uiScale}>
+          {size(notifications) > 0 ? (
+            <ReqoreNotificationsWrapper position={options.notificationsPosition}>
+              {notifications.map((notification) => (
+                <ReqoreNotification
+                  {...notification}
+                  key={notification.id}
+                  onClick={
+                    notification.onClick
+                      ? () => void notification.onClick(notification.id)
+                      : undefined
                   }
+                  onClose={() => {
+                    if (notification.onClose) {
+                      notification.onClose(notification.id);
+                    }
 
-                  removeNotification(notification.id);
-                }}
-                onFinish={() => {
-                  if (notification.onFinish) {
-                    notification.onFinish(notification.id);
-                  }
+                    removeNotification(notification.id);
+                  }}
+                  onFinish={() => {
+                    if (notification.onFinish) {
+                      notification.onFinish(notification.id);
+                    }
 
-                  removeNotification(notification.id);
-                }}
-              />
-            ))}
-          </ReqoreNotificationsWrapper>
-        ) : null}
-        {children}
-        {confirmationModal.isOpen && (
-          <ReqoreModal
-            isOpen
-            flat
-            opacity={0.9}
-            blur={2}
-            width='500px'
-            intent={confirmationModal.intent}
-            label={confirmationModal.title || 'Confirm your action'}
-            icon='ErrorWarningFill'
-            className='reqore-confirmation-modal'
-            bottomActions={[
-              {
-                label: confirmationModal.cancelLabel || 'Cancel',
-                icon: 'CloseLine',
-                onClick: () => {
-                  confirmationModal?.onCancel?.();
-                  closeConfirmationModal();
+                    removeNotification(notification.id);
+                  }}
+                />
+              ))}
+            </ReqoreNotificationsWrapper>
+          ) : null}
+          {children}
+          {confirmationModal.isOpen && (
+            <ReqoreModal
+              isOpen
+              flat
+              opacity={0.9}
+              blur={2}
+              width='500px'
+              intent={confirmationModal.intent}
+              label={confirmationModal.title || 'Confirm your action'}
+              icon='ErrorWarningFill'
+              className='reqore-confirmation-modal'
+              bottomActions={[
+                {
+                  label: confirmationModal.cancelLabel || 'Cancel',
+                  icon: 'CloseLine',
+                  onClick: () => {
+                    confirmationModal?.onCancel?.();
+                    closeConfirmationModal();
+                  },
+                  position: 'left',
                 },
-                position: 'left',
-              },
-              {
-                label: confirmationModal.confirmLabel || 'Confirm',
-                intent: confirmationModal.confirmButtonIntent || 'success',
-                icon: confirmationModal.confirmIcon || 'CheckLine',
-                onClick: () => {
-                  confirmationModal?.onConfirm?.();
-                  closeConfirmationModal();
+                {
+                  label: confirmationModal.confirmLabel || 'Confirm',
+                  intent: confirmationModal.confirmButtonIntent || 'success',
+                  icon: confirmationModal.confirmIcon || 'CheckLine',
+                  onClick: () => {
+                    confirmationModal?.onConfirm?.();
+                    closeConfirmationModal();
+                  },
+                  position: 'right',
                 },
-                position: 'right',
-              },
-            ]}
-          >
-            <ReqoreTextEffect
-              as='p'
-              effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
+              ]}
             >
-              {confirmationModal.description || 'Are you sure you want to proceed?'}
-            </ReqoreTextEffect>
-          </ReqoreModal>
-        )}
-        {map(modals, (modal, key) =>
-          React.isValidElement(modal) ? (
-            React.cloneElement(modal, {
-              key,
-              isOpen: true,
-              onClose: () => {
-                removeModal(key);
-                modal.props.onClose?.();
-              },
-            })
-          ) : (
-            <ReqoreModal
-              {...modal}
-              key={key}
-              isOpen
-              onClose={() => {
-                removeModal(key);
-                modal.onClose?.();
-              }}
-            />
-          )
-        )}
+              <ReqoreTextEffect
+                as='p'
+                effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
+              >
+                {confirmationModal.description || 'Are you sure you want to proceed?'}
+              </ReqoreTextEffect>
+            </ReqoreModal>
+          )}
+          {map(modals, (modal, key) =>
+            React.isValidElement(modal) ? (
+              createPortal(
+                React.cloneElement(modal, {
+                  key,
+                  isOpen: true,
+                  onClose: () => {
+                    removeModal(key);
+                    modal.props.onClose?.();
+                  },
+                }),
+                document.querySelector('#reqore-portal')!
+              )
+            ) : (
+              <ReqoreModal
+                {...modal}
+                key={key}
+                isOpen
+                onClose={() => {
+                  removeModal(key);
+                  modal.onClose?.();
+                }}
+              />
+            )
+          )}
+        </PopoverProvider>
       </ReqoreContext.Provider>
     </>
   );

package/src/containers/UIProvider.tsx

@@ -8,7 +8,6 @@ import { IReqoreNotificationsPosition } from '../components/Notifications';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
 import { buildTheme, getMainBackgroundColor, getReadableColor } from '../helpers/colors';
-import PopoverProvider from './PopoverProvider';
 import ReqoreProvider from './ReqoreProvider';
 import ReqoreThemeProvider from './ThemeProvider';
 
@@ -88,11 +87,7 @@ const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, o
           <GlobalStyle />
         </ReqoreThemeProvider>
         <ReqoreLayoutWrapper withSidebar={options?.withSidebar}>
-          {modalPortal ? (
-            <ReqoreProvider options={options}>
-              <PopoverProvider uiScale={options?.uiScale}>{children}</PopoverProvider>
-            </ReqoreProvider>
-          ) : null}
+          {modalPortal ? <ReqoreProvider options={options}>{children}</ReqoreProvider> : null}
         </ReqoreLayoutWrapper>
         <ReqorePortal ref={setModalPortal} />
       </ThemeContext.Provider>

package/src/stories/Drawer/Drawer.stories.tsx

@@ -4,6 +4,7 @@ import { IReqoreDrawerProps, ReqoreDrawer } from '../../components/Drawer';
 import { IReqoreInputProps } from '../../components/Input';
 import {
   ReqoreButton,
+  ReqoreCollection,
   ReqoreInput,
   ReqorePanel,
   ReqoreTabs,
@@ -246,7 +247,10 @@ const Template: StoryFn<typeof ReqoreDrawer> = (args) => {
               Hello I am a super long button that opens a modal on click
             </ReqoreButton>
           </ReqoreTabsContent>
-          <ReqoreTabsContent tabId='tab2'>Tab 2 here</ReqoreTabsContent>
+          <ReqoreTabsContent tabId='tab2'>
+            Tab 2 here
+            <ReqoreCollection items={[{ label: 'Item 1' }, { label: 'Item 2' }]} />
+          </ReqoreTabsContent>
         </ReqoreTabs>
       </ReqoreDrawer>
     </>

package/src/stories/Modal/Manager.stories.tsx

@@ -3,8 +3,10 @@ import { StoryObj } from '@storybook/react';
 import { fireEvent, waitFor, within } from '@storybook/testing-library';
 import { noop } from 'lodash';
 import { useEffect, useState } from 'react';
+import { ReqoreBackdrop } from '../../components/Drawer/backdrop';
 import {
   ReqoreButton,
+  ReqoreCollection,
   ReqoreControlGroup,
   ReqoreInput,
   ReqoreModal,
@@ -86,11 +88,15 @@ const ModalWithState = (props) => {
           intent={props.intent}
           onChange={(e: any) => setText(e.target.value)}
         />
-        <ReqoreButton onClick={() => addModal(<ModalWithState label='Another modal' />)}>
+        <ReqoreButton
+          onClick={() => addModal(<ModalWithState label='Another modal' />)}
+          tooltip='Open sesame'
+        >
           Open another modal
         </ReqoreButton>
         <ReqoreButton onClick={() => removeModal('modal')}>Remove modal</ReqoreButton>
       </ReqoreControlGroup>
+      <ReqoreCollection items={[{ label: 'Item 1' }, { label: 'Item 2' }]} />
     </ReqoreModal>
   );
 };
@@ -104,6 +110,25 @@ export const FromElement: Story = {
   },
 };
 
+export const FromCustomElement: Story = {
+  args: {
+    data: (
+      <>
+        <ReqoreBackdrop />
+        <div
+          className='custom-modal reqore-modal'
+          style={{ position: 'absolute', left: '50%', top: '50%' }}
+        >
+          This is a custom modal
+        </div>
+      </>
+    ),
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    await FromObject.play({ canvasElement, ...rest });
+  },
+};
+
 export const CanBeClosed: Story = {
   ...FromObject,
   play: async ({ canvasElement, ...rest }) => {