@qoretechnologies/reqore 0.40.2 → 0.40.4

package/src/hooks/usePopover.tsx

@@ -182,19 +182,21 @@ const usePopover = ({
       }
     }
 
+    if (!content) {
+      _removePopover();
+    }
+
     return () => {
-      if (targetElement && content) {
-        cancelTimeout();
+      cancelTimeout();
 
-        targetElement.removeEventListener(startEvent, _addPopover);
+      targetElement?.removeEventListener(startEvent, _addPopover);
 
-        if (endEvent) {
-          targetElement.removeEventListener(endEvent, _removePopover);
-        }
+      if (endEvent) {
+        targetElement?.removeEventListener(endEvent, _removePopover);
+      }
 
-        if (handler === 'hoverStay') {
-          targetElement.removeEventListener('mouseleave', cancelTimeout);
-        }
+      if (handler === 'hoverStay') {
+        targetElement?.removeEventListener('mouseleave', cancelTimeout);
       }
     };
   }, [targetElement?.toString(), content, current, currentPopover]);

package/src/hooks/useTooltip.ts

@@ -14,7 +14,7 @@ export const useTooltip = (
   );
 
   useEffect(() => {
-    if (targetElement && content) {
+    if (targetElement) {
       setElement(targetElement);
       setData(tooltip);
     }

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

@@ -369,3 +369,11 @@ export const GlobalEffect: Story = {
     },
   },
 };
+
+export const Pill: Story = {
+  render: Template,
+
+  args: {
+    pill: true,
+  },
+};

package/src/stories/Input/Input.stories.tsx

@@ -57,6 +57,7 @@ const Template: StoryFn<typeof ReqoreInput> = (args: IReqoreInputProps) => {
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           onChange={handleValueChange}
+          leftIconProps={{ size: 'tiny' }}
         />
         <ReqoreInput
           {...args}
@@ -66,6 +67,7 @@ const Template: StoryFn<typeof ReqoreInput> = (args: IReqoreInputProps) => {
           onChange={handleValueChange}
           rightIcon='EraserFill'
           rightIconColor='#8727b7'
+          focusRules={{ type: 'keypress', shortcut: '.', doNotInsertShortcut: true }}
         />
         <ReqoreInput {...args} placeholder='Disabled Input' disabled onChange={handleValueChange} />
         <ReqoreInput
@@ -208,3 +210,11 @@ export const Effect: Story = {
     },
   },
 };
+
+export const Pill: Story = {
+  render: Template,
+
+  args: {
+    pill: true,
+  },
+};

package/src/stories/Popover/Popover.stories.tsx

@@ -1,6 +1,8 @@
+import { expect } from '@storybook/jest';
 import { StoryFn, StoryObj } from '@storybook/react';
 import { fireEvent } from '@storybook/testing-library';
 import { useState } from 'react';
+import { useMount } from 'react-use';
 import { IReqorePopoverProps } from '../../components/Popover';
 import { sleep } from '../../helpers/utils';
 import usePopover from '../../hooks/usePopover';
@@ -16,6 +18,7 @@ import {
   ReqoreSpacer,
   ReqoreTextarea,
 } from '../../index';
+import { IReqoreTooltip } from '../../types/global';
 import { StoryMeta } from '../utils';
 import { FlatArg, argManager } from '../utils/args';
 
@@ -434,3 +437,35 @@ export const ChangingElement: Story = {
     });
   },
 };
+
+export const TooltipIsRemovedWhenContentIsEmpty: Story = {
+  render: (args) => {
+    const [tooltip, setTooltip] = useState<IReqoreTooltip>({
+      content: 'test',
+      handler: 'focus',
+      noArrow: true,
+      noWrapper: true,
+      useTargetWidth: true,
+    });
+
+    useMount(() => {
+      setTimeout(() => {
+        setTooltip(undefined);
+      }, 1500);
+    });
+
+    return <ReqoreTextarea tooltip={tooltip} />;
+  },
+
+  play: async ({ canvasElement }) => {
+    const textarea = canvasElement.querySelector('textarea');
+    await sleep(500);
+    fireEvent.focusIn(textarea);
+    await sleep(300);
+    await expect(document.querySelector('.reqore-popover-content')).toBeInTheDocument();
+    await sleep(1000);
+    fireEvent.focusIn(textarea);
+    await sleep(300);
+    await expect(document.querySelector('.reqore-popover-content')).not.toBeInTheDocument();
+  },
+};