@qoretechnologies/reqore 0.37.0 → 0.37.2

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';
 
@@ -43,19 +42,20 @@ const GlobalStyle = createGlobalStyle`
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 999998;
+    z-index: 8998;
     cursor: pointer;
     background-color: ${({ theme }) => rgba(getMainBackgroundColor(theme), 0.3)};
     backdrop-filter: blur(3px);
   }
 
   .reqore-blur-z-index {
-    z-index: 999999;
+    z-index: 8999;
   }
 `;
 
 const StyledPortal = styled.div`
   z-index: 9999;
+  position: relative;
 
   * {
     box-sizing: border-box;
@@ -88,11 +88,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/helpers/utils.ts

@@ -86,7 +86,7 @@ export const calculateStringSizeInPixels = (value: string = '', fontSize: number
   /* It's calculating the width of a string in pixels. */
   return (
     Array.from(value).reduce((acc, cur) => acc + (widths[cur.charCodeAt(0)] ?? avg), 0) *
-    (fontSize * 1.15)
+    (fontSize * 1.35)
   );
 };
 

package/src/index.tsx

@@ -10,6 +10,7 @@ export { ReqoreCommentFeed } from './components/CommentFeed';
 export { default as ReqoreContent } from './components/Content';
 export { default as ReqoreControlGroup } from './components/ControlGroup';
 export { ReqoreDrawer } from './components/Drawer';
+export { ReqoreBackdrop } from './components/Drawer/backdrop';
 export { default as ReqoreDropdown } from './components/Dropdown';
 export { ReqoreDropdownDivider, ReqoreDropdownItem } from './components/Dropdown/item';
 export { ReqoreEffect, ReqoreTextEffect } from './components/Effect';

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: 'fixed', 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 }) => {

package/src/stories/Tabs/Tabs.stories.tsx

@@ -264,11 +264,11 @@ export const NotFlat: Story = {
   },
 };
 
-export const NoTabsPadding: Story = {
+export const WithPadding: Story = {
   render: Template,
 
   args: {
-    padded: false,
+    padded: true,
   },
 };