@qoretechnologies/reqore 0.30.4 → 0.30.6

package/src/containers/PopoverProvider.tsx

@@ -22,15 +22,12 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
   const handleClick = useCallback(
     (event: MouseEvent) => {
       popovers.forEach(({ popperRef, closeOnAnyClick, closeOnOutsideClick, id, targetElement }) => {
-        if (closeOnAnyClick) {
-          removePopover(id);
-          return;
-        }
-
         if (
-          closeOnOutsideClick &&
-          !(popperRef?.current && popperRef.current.contains(event.target)) &&
-          !targetElement?.contains(event.target as Node)
+          closeOnAnyClick ||
+          (closeOnOutsideClick &&
+            popperRef?.current &&
+            !popperRef.current.contains(event.target) &&
+            !targetElement?.contains(event.target as Node))
         ) {
           removePopover(id);
         }
@@ -69,21 +66,21 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
   };
 
   useEffect(() => {
-    document.addEventListener('click', handleClick, true);
+    document.addEventListener('click', handleClick);
 
     if (closePopoversOnEscPress) {
       document.addEventListener('keydown', handleKeyDown);
     }
 
     return () => {
-      document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('click', handleClick);
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [popovers]);
 
   useEffect(() => {
     if (!size(popovers)) {
-      document.removeEventListener('click', handleClick, true);
+      document.removeEventListener('click', handleClick);
       document.removeEventListener('keydown', handleKeyDown);
     }
   }, [popovers]);

package/src/containers/ReqoreProvider.tsx

@@ -120,10 +120,8 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           isMobile,
           isTablet,
           isMobileOrTablet,
-          latestZIndex: latestZIndex.current,
           getAndIncreaseZIndex,
           animations: options.animations || { buttons: true, dialogs: true },
-          tooltips: options.tooltips || { delay: 0 },
           closePopoversOnEscPress:
             'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
         }}
@@ -158,47 +156,44 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           </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',
+        <ReqoreModal
+          isOpen={confirmationModal.isOpen}
+          flat
+          opacity={0.9}
+          blur={2}
+          width='500px'
+          intent={confirmationModal.intent}
+          label={confirmationModal.title || 'Confirm your action'}
+          icon='ErrorWarningFill'
+          bottomActions={[
+            {
+              label: confirmationModal.cancelLabel || 'Cancel',
+              icon: 'CloseLine',
+              onClick: () => {
+                confirmationModal?.onCancel?.();
+                closeConfirmationModal();
               },
-              {
-                label: confirmationModal.confirmLabel || 'Confirm',
-                intent: confirmationModal.confirmButtonIntent || 'success',
-                icon: confirmationModal.confirmIcon || 'CheckLine',
-                onClick: () => {
-                  confirmationModal?.onConfirm?.();
-                  closeConfirmationModal();
-                },
-                position: 'right',
+              position: 'left',
+            },
+            {
+              label: confirmationModal.confirmLabel || 'Confirm',
+              intent: confirmationModal.confirmButtonIntent || 'success',
+              icon: confirmationModal.confirmIcon || 'CheckLine',
+              onClick: () => {
+                confirmationModal?.onConfirm?.();
+                closeConfirmationModal();
               },
-            ]}
+              position: 'right',
+            },
+          ]}
+        >
+          <ReqoreTextEffect
+            as='p'
+            effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
           >
-            <ReqoreTextEffect
-              as='p'
-              effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
-            >
-              {confirmationModal.description || 'Are you sure you want to proceed?'}
-            </ReqoreTextEffect>
-          </ReqoreModal>
-        )}
+            {confirmationModal.description || 'Are you sure you want to proceed?'}
+          </ReqoreTextEffect>
+        </ReqoreModal>
       </ReqoreContext.Provider>
     </>
   );

package/src/containers/UIProvider.tsx

@@ -18,13 +18,6 @@ export interface IReqoreOptions {
     buttons?: boolean;
     dialogs?: boolean;
   };
-  tooltips?: {
-    /**
-     * Delay in ms before showing the tooltip
-     * @default 0
-     * */
-    delay?: number;
-  };
   closePopoversOnEscPress?: boolean;
 }
 export interface IReqoreUIProviderProps {

package/src/context/ReqoreContext.tsx

@@ -12,9 +12,7 @@ export interface IReqoreContext {
   readonly isMobileOrTablet?: boolean;
   readonly getAndIncreaseZIndex?: () => number;
   readonly animations?: IReqoreOptions['animations'];
-  readonly tooltips?: IReqoreOptions['tooltips'];
   readonly closePopoversOnEscPress?: boolean;
-  readonly latestZIndex?: number;
 }
 
 export default createContext<IReqoreContext>({

package/src/helpers/utils.ts

@@ -8,7 +8,6 @@ import {
   isString,
   isUndefined,
 } from 'lodash';
-import { IReqorePanelAction } from '../components/Panel';
 import { NUMBER_TO_SIZE, SIZES, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
 
 export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
@@ -89,5 +88,3 @@ export const getOneLessSize = (size: TSizes): TSizes => {
   // Get the size name from the number
   return NUMBER_TO_SIZE[oneLessSizeNumber];
 };
-
-export const isActionShown = (action: IReqorePanelAction) => action.show !== false;

package/src/hooks/useLatestZIndex.ts

@@ -2,8 +2,8 @@ import { useContext, useMemo } from 'react';
 import { ReqoreContext } from '..';
 
 const useLatestZIndex = (): number => {
-  const { getAndIncreaseZIndex, latestZIndex } = useContext(ReqoreContext);
-  const zIndex = useMemo(() => getAndIncreaseZIndex(), [latestZIndex]);
+  const { getAndIncreaseZIndex } = useContext(ReqoreContext);
+  const zIndex = useMemo(() => getAndIncreaseZIndex(), []);
 
   return zIndex;
 };

package/src/hooks/usePopover.tsx

@@ -11,7 +11,6 @@ import {
   IWithReqoreMinimal,
 } from '../types/global';
 import { IReqoreIconName } from '../types/icons';
-import { useReqore } from './useReqore';
 
 const startEvents = {
   hover: 'mouseenter',
@@ -45,7 +44,6 @@ export interface IPopover
   show?: boolean;
   openOnMount?: boolean;
   noArrow?: boolean;
-  noWrapper?: boolean;
   useTargetWidth?: boolean;
   closeOnOutsideClick?: boolean;
   closeOnAnyClick?: boolean;
@@ -78,7 +76,6 @@ const usePopover = ({
 }: IPopoverOptions): IPopoverControls => {
   const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
     useContext(PopoverContext);
-  const { tooltips } = useReqore();
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
   let { current: timeout }: MutableRefObject<any> = useRef(0);
 
@@ -98,11 +95,11 @@ const usePopover = ({
       noArrow,
       useTargetWidth,
       closeOnOutsideClick,
-      closeOnAnyClick: handler === 'hover',
+      closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
       ...rest,
     });
 
-    if (rest.blur > 0) {
+    if (rest?.blur > 0) {
       targetElement.style.position = 'relative';
       targetElement.style.zIndex = '999999';
     }
@@ -111,13 +108,13 @@ const usePopover = ({
   const _addPopover = () => {
     if (currentPopover) {
       if (handler !== 'hoverStay' && handler !== 'focus') {
-        _removePopover();
+        _removePopover?.();
       }
     } else if (show) {
-      if (delay || tooltips.delay) {
+      if (delay) {
         timeout = setTimeout(() => {
           openPopover();
-        }, delay || tooltips.delay);
+        }, delay);
       } else {
         openPopover();
       }
@@ -144,7 +141,7 @@ const usePopover = ({
         noArrow,
         useTargetWidth,
         closeOnOutsideClick,
-        closeOnAnyClick: handler === 'hover',
+        closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
         ...rest,
       });
     }

package/src/mock/collectionData.tsx

@@ -32,8 +32,6 @@ export default [
     tooltip: 'This is a test item',
     headerSize: 2,
     contentSize: 'huge',
-    selected: true,
-    icon: 'Hashtag',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     tags: [
@@ -53,21 +51,13 @@ export default [
   },
   {
     icon: 'TextWrap',
-    label: 'Small item that is not minimal',
+    label: 'Item that is not minimal',
     tooltip: 'This is a test item',
-    size: 'small',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     minimal: false,
     badge: 0,
   },
-  {
-    icon: 'ZcoolLine',
-    label: 'Item without fade',
-    content:
-      'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long Hello I am a test item content and I am very long so will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long Hello I am a test item content and I am very long so will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
-    showContentFade: false,
-  },
   {
     icon: 'FolderWarningFill',
     label: 'Expandable item',
@@ -92,7 +82,6 @@ export default [
   {
     label: 'Item with custom content when expanded',
     tooltip: 'Expandable item with custom content',
-    selected: true,
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     expandable: true,
@@ -105,22 +94,6 @@ export default [
       weight: 'thin',
       spaced: 2,
     },
-    expandedActions: [
-      {
-        label: 'Action 1',
-        id: 'action1',
-        icon: 'CapsuleFill',
-        onClick: () => alert('Action 1 clicked'),
-        position: 'left',
-      },
-      {
-        label: 'Action 2',
-        id: 'action2',
-        icon: 'CapsuleFill',
-        onClick: () => alert('Action 2 clicked'),
-        position: 'right',
-      },
-    ],
     expandedContent: (
       <>
         <ReqoreMessage intent='info'>Hello I am a custom content</ReqoreMessage>
@@ -208,9 +181,6 @@ export default [
   },
   {
     label: 'I have intent!',
-    transparent: true,
-    minimal: false,
-    flat: false,
     content: (
       <ReqoreP>
         'Well would you look at that. Lorem ipsum dolor{' '}
@@ -262,14 +232,13 @@ export default [
   {
     label: 'I have actions',
     content:
-      'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
+      'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     actions: [
       {
         label: 'Action 1',
         id: 'action1',
         icon: 'CapsuleFill',
         onClick: () => alert('Action 1 clicked'),
-        show: false,
       },
       {
         label: 'Action 2',

package/src/stories/Button/Button.stories.tsx

@@ -20,7 +20,7 @@ export default {
 const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   return (
     <>
-      <ReqoreControlGroup size={buttonProps.size} wrap>
+      <ReqoreControlGroup size={buttonProps.size}>
         <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
         <ReqoreButton {...buttonProps} />
         <ReqoreButton {...buttonProps}>Default</ReqoreButton>
@@ -41,21 +41,14 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup size={buttonProps.size} wrap>
+      <ReqoreControlGroup size={buttonProps.size}>
         <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
           Active Not Flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} flat={false}>
           Not Flat
         </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          minimal
-          flat={false}
-          iconColor='#38fdb2'
-          leftIconColor='#33023c:lighten:3'
-          rightIconColor='#0a487b:lighten:3'
-        >
+        <ReqoreButton {...buttonProps} minimal flat={false}>
           Minimal not flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} readOnly onClick={alert} flat={false}>
@@ -66,17 +59,16 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup fluid wrap>
+      <ReqoreControlGroup fluid>
         <ReqoreButton {...buttonProps} fluid>
           Fluid button
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreButton
           {...buttonProps}
           description='This is a very interesting description for a button, I like it very much'
-          iconColor='#38fdb2'
         >
           With Default Description
         </ReqoreButton>
@@ -117,7 +109,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         />
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
           Read only with badge
         </ReqoreButton>

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
-import { ReqoreCheckbox, ReqoreControlGroup, ReqoreVerticalSpacer } from '../../index';
+import { ReqoreCheckbox, ReqoreControlGroup } from '../../index';
 
 export default {
   title: 'Components/Checkbox',
@@ -10,7 +10,7 @@ export default {
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
     <ReqoreControlGroup vertical>
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreCheckbox {...args} />
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
         <ReqoreCheckbox {...args} checked tooltip='I am checked' />
@@ -18,8 +18,7 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
         <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
       </ReqoreControlGroup>
-      <ReqoreVerticalSpacer height={10} />
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreCheckbox {...args} intent='info' checked />
         <ReqoreCheckbox
           {...args}
@@ -35,8 +34,6 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
           effect={{ gradient: { colors: { 0: '#00fafd', 100: '#ff00d0' } } }}
         />
         <ReqoreCheckbox {...args} disabled onText='yes' offText='no' />
-        <ReqoreCheckbox {...args} onText='yes' offText='no' />
-        <ReqoreCheckbox {...args} onText='yes' offText='no' checked />
         <ReqoreCheckbox
           {...args}
           label='Label'

package/src/stories/Collection/Collection.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
 import items from '../../mock/collectionData';
-import { IntentArg, SizeArg, argManager } from '../utils/args';
+import { argManager, IntentArg, SizeArg } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
   multipleColumns?: boolean;
@@ -45,7 +45,7 @@ export default {
       description: 'If true, the collection will be rounded when stacked',
     }),
     ...createArg('height', {
-      defaultValue: undefined,
+      defaultValue: '600px',
       type: 'string',
       name: 'Height',
       description: 'Height of the collection',
@@ -72,8 +72,6 @@ const Template: Story<IReqoreCollectionProps> = (args) => {
   return (
     <ReqoreCollection
       {...args}
-      badge={10}
-      selectedIcon='CheckLine'
       actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
     />
   );
@@ -85,13 +83,6 @@ Basic.args = {
   items,
 };
 
-export const WithHeight = Template.bind({});
-WithHeight.args = {
-  label: 'Collection of items',
-  height: '600px',
-  items,
-};
-
 export const Stacked = Template.bind({});
 Stacked.args = {
   label: 'Collection of items',
@@ -105,10 +96,3 @@ Fill.args = {
   fill: true,
   items,
 };
-
-export const SelectedFirst = Template.bind({});
-SelectedFirst.args = {
-  label: 'Collection of items',
-  items,
-  showSelectedFirst: true,
-};