@qoretechnologies/reqore 0.37.0 → 0.37.2

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,48 @@
+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={(event) => {
+        // Only close if the click is on the backdrop itself
+        if (event.target === event.currentTarget) {
+          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/ExportModal/index.tsx

@@ -83,6 +83,7 @@ export const ReqoreExportModal = ({
         activeTabIntent='info'
         activeTab={isArray ? 'csv' : 'json'}
         padded={false}
+        flat={false}
         {...tabsOptions}
         onTabChange={(tabId) => setTab(tabId.toString())}
         tabs={tabs}

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/components/Tabs/index.tsx

@@ -9,7 +9,7 @@ import { TReqoreTabsContentPadding } from './content';
 import ReqoreTabsList from './list';
 
 export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
-  label: string;
+  label: string | number;
   as?: any;
   id: string | number;
   props?: React.HTMLAttributes<any>;

package/src/components/Tabs/item.tsx

@@ -2,7 +2,7 @@ import { omit } from 'lodash';
 import { forwardRef, memo } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem } from '.';
-import { TABS_PADDING_TO_PX, TSizes } from '../../constants/sizes';
+import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -29,7 +29,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
 }
 
 export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ disabled, vertical, size, fill, padded }: IReqoreTabListItemStyle) => {
+  ${({ disabled, vertical, fill, padded }: IReqoreTabListItemStyle) => {
     return css`
       display: flex;
       flex-shrink: 0;
@@ -37,9 +37,6 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
       position: relative;
       align-items: center;
       width: ${vertical ? `100%` : undefined};
-      padding: ${`${TABS_PADDING_TO_PX[size!]}px`};
-      padding-bottom: ${!vertical && 0};
-      padding-right: ${vertical && 0};
 
       ${vertical
         ? css`

package/src/components/Tabs/list.tsx

@@ -1,13 +1,13 @@
-import { isArray } from 'lodash';
+import { isArray, isObject } from 'lodash';
 import React from 'react';
 import { useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem, IReqoreTabsProps } from '.';
 import { ReqorePopover } from '../..';
 import {
+  GAP_FROM_SIZE,
   ICON_FROM_SIZE,
   PADDING_FROM_SIZE,
-  TABS_PADDING_TO_PX,
   TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
@@ -18,12 +18,14 @@ import {
   getColorFromMaybeString,
   getNthGradientColor,
 } from '../../helpers/colors';
-import { calculateStringSizeInPixels } from '../../helpers/utils';
+import { calculateStringSizeInPixels, getOneLessSize } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreButtonProps } from '../Button';
 import { TReqoreHexColor } from '../Effect';
 import ReqoreMenu from '../Menu';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
 import { StyledPopover } from '../Popover';
+import { IReqoreTagProps } from '../Tag';
 import ReqoreTabsListItem, { IReqoreTabListItemProps, StyledTabListItem } from './item';
 
 export interface IReqoreTabsListProps
@@ -39,20 +41,30 @@ export interface IReqoreTabsListStyle extends Omit<IReqoreTabsListProps, 'tabs'>
 }
 
 export const StyledReqoreTabsList = styled.div<IReqoreTabsListStyle>`
-  ${({ fill, vertical, currentTabColor, width }) => css`
+  ${({ fill, vertical, size, padded, flat, currentTabColor, width }) => css`
     height: ${vertical ? '100%' : undefined};
     width: ${vertical ? width || '200px' : '100%'};
     flex-flow: ${vertical ? 'column' : 'row'};
     display: flex;
     align-items: center;
+
+    gap: ${GAP_FROM_SIZE[size]}px;
+
+    ${padded &&
+    css`
+      padding: 0 ${PADDING_FROM_SIZE[size]}px;
+    `}
+
+    ${!flat &&
+    css`
     border-${vertical ? 'right' : 'bottom'}: 1px solid ${changeLightness(currentTabColor, 0.175)};
+    `}
 
-    ${
-      fill &&
-      css`
-        justify-content: space-around;
-      `
-    }
+
+    ${fill &&
+    css`
+      justify-content: space-around;
+    `}
 
     ${StyledPopover} {
       > ${StyledTabListItem} {
@@ -73,8 +85,27 @@ const getMoreLabel = (items: IReqoreTabsListItem[], activeTab?: string | number)
   return 'More';
 };
 
-const getLabel = (
-  item: IReqoreTabsListItem | IReqoreTabsListItem[],
+const getBadgeLength = (badge: IReqoreButtonProps['badge'], tabsSize: TSizes = 'normal') => {
+  if (!badge) {
+    return 0;
+  }
+
+  if (isArray(badge)) {
+    return badge.reduce((len, b) => len + getBadgeLength(b), 0);
+  }
+
+  if (isObject(badge)) {
+    return getLabelLength(badge, undefined, getOneLessSize(tabsSize)) + PADDING_FROM_SIZE[tabsSize];
+  }
+
+  return (
+    calculateStringSizeInPixels(badge.toString(), TEXT_FROM_SIZE[getOneLessSize(tabsSize)]) +
+    PADDING_FROM_SIZE[tabsSize]
+  );
+};
+
+const getLabelLength = (
+  item: IReqoreTabsListItem | IReqoreTabsListItem[] | IReqoreTagProps,
   activeTab?: string | number,
   tabsSize: TSizes = 'normal'
 ) => {
@@ -82,11 +113,29 @@ const getLabel = (
     return 0;
   }
 
-  const label: string = isArray(item) ? getMoreLabel(item, activeTab) : item.label;
-  const icon: number = isArray(item) || item.icon ? ICON_FROM_SIZE[tabsSize] : 0;
-  const closeIconSize = isArray(item) || !item.onCloseClick ? 0 : ICON_FROM_SIZE[tabsSize] * 2;
+  const label: string | number = isArray(item) ? getMoreLabel(item, activeTab) : item.label;
+  const icon: number =
+    isArray(item) || item.icon ? ICON_FROM_SIZE[tabsSize] + PADDING_FROM_SIZE[tabsSize] : 0;
+  const rightIcon = (item as IReqoreTagProps).rightIcon
+    ? ICON_FROM_SIZE[tabsSize] + PADDING_FROM_SIZE[tabsSize]
+    : 0;
+  const closeIconSize =
+    isArray(item) ||
+    !(item as IReqoreTabsListItem).onCloseClick ||
+    !(item as IReqoreTagProps).onRemoveClick
+      ? 0
+      : ICON_FROM_SIZE[tabsSize] * 2;
+  const badgeLength = isArray(item)
+    ? 0
+    : getBadgeLength((item as IReqoreTabsListItem).badge, tabsSize);
 
-  return calculateStringSizeInPixels(label, TEXT_FROM_SIZE[tabsSize]) + icon + closeIconSize;
+  return (
+    calculateStringSizeInPixels(label?.toString(), TEXT_FROM_SIZE[tabsSize]) +
+    icon +
+    closeIconSize +
+    badgeLength +
+    rightIcon
+  );
 };
 
 /**
@@ -105,15 +154,15 @@ export const getTabsLength = (
 ): number =>
   items.reduce((len, item) => {
     if (type === 'height') {
-      const rows = getLabel(item, activeTab, tabsSize) / 4 || 1;
+      const rows = getLabelLength(item, activeTab, tabsSize) / 4 || 1;
 
       return len + rows * 15 + 10;
     }
 
     const labelLength: number =
-      PADDING_FROM_SIZE[tabsSize] * 3 +
-      TABS_PADDING_TO_PX[tabsSize] * 2 +
-      getLabel(item, activeTab, tabsSize);
+      PADDING_FROM_SIZE[tabsSize] * 2 +
+      GAP_FROM_SIZE[tabsSize] * 2 +
+      getLabelLength(item, activeTab, tabsSize);
 
     return len + labelLength;
   }, 0);
@@ -264,7 +313,7 @@ const ReqoreTabsList = ({
                           } as IReqoreMenuItemProps)}
                           tooltip={tooltip}
                           {...rest}
-                          key={index + label}
+                          key={index + label?.toString()}
                         >
                           {label}
                         </ReqoreMenuItem>

package/src/components/Tree/index.tsx

@@ -2,6 +2,7 @@ import { cloneDeep, size as lodashSize } from 'lodash';
 import { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { ReqoreMessage, ReqorePanel, useReqoreProperty } from '../..';
+import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { getTypeFromValue } from '../../helpers/utils';
 import { IWithReqoreSize } from '../../types/global';
@@ -28,12 +29,21 @@ export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
 export interface ITreeStyle {
   interactive?: boolean;
   theme: IReqoreTheme;
+  level?: number;
+  size?: TSizes;
 }
 
 export const StyledTreeLabel = styled(ReqoreMessage)`
   flex-shrink: 1;
 `;
 
+export const StyledTreeWrapper = styled.div<ITreeStyle>`
+  display: flex;
+  flex-flow: column;
+  gap: ${({ size }) => GAP_FROM_SIZE[size]}px;
+  margin-left: ${({ level, size }) => (level ? level * GAP_FROM_SIZE[size] : 0)}px;
+`;
+
 export const ReqoreTree = ({
   data,
   size = 'normal',
@@ -98,7 +108,7 @@ export const ReqoreTree = ({
       }
 
       return (
-        <div key={index} style={{ margin: level === 1 ? '15px 0' : `15px` }}>
+        <StyledTreeWrapper key={index} size={zoomToSize[zoom]} level={level}>
           {isObject ? (
             <ReqoreControlGroup size={zoomToSize[zoom]}>
               <ReqoreButton
@@ -113,7 +123,7 @@ export const ReqoreTree = ({
               {_showTypes ? <ReqoreTag label={dataType} className='reqore-tree-type' /> : null}
             </ReqoreControlGroup>
           ) : (
-            <ReqoreControlGroup size={zoomToSize[zoom]}>
+            <ReqoreControlGroup size={zoomToSize[zoom]} verticalAlign='flex-start'>
               <ReqoreTag
                 label={displayKey}
                 actions={
@@ -148,7 +158,7 @@ export const ReqoreTree = ({
           {isExpandable && isObject
             ? renderTree(data[key], stateKey, level + 1, [...path, key])
             : null}
-        </div>
+        </StyledTreeWrapper>
       );
     });
   };
@@ -226,6 +236,11 @@ export const ReqoreTree = ({
         flat
         transparent
         size={size}
+        contentStyle={{
+          display: 'flex',
+          flexFlow: 'column',
+          gap: `${GAP_FROM_SIZE[size]}px`,
+        }}
         {...rest}
         actions={actions}
       >

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>
     </>
   );