[core] Remove delayType prop across hoverable popup components (mui…

…#730)
mj12albert · Oct 15, 2024 · 18256f6 · 18256f6
1 parent 6d7156a
commit 18256f6
Show file tree

Hide file tree

Showing 21 changed files with 6 additions and 218 deletions.
diff --git a/docs/data/api/popover-root.json b/docs/data/api/popover-root.json
@@ -4,10 +4,6 @@
     "closeDelay": { "type": { "name": "number" }, "default": "0" },
     "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
     "delay": { "type": { "name": "number" }, "default": "300" },
-    "delayType": {
-      "type": { "name": "enum", "description": "'hover'<br>&#124;&nbsp;'rest'" },
-      "default": "'rest'"
-    },
     "onOpenChange": { "type": { "name": "func" } },
     "open": { "type": { "name": "bool" }, "default": "false" },
     "openOnHover": { "type": { "name": "bool" }, "default": "false" }

diff --git a/docs/data/api/preview-card-root.json b/docs/data/api/preview-card-root.json
@@ -4,10 +4,6 @@
     "closeDelay": { "type": { "name": "number" }, "default": "300" },
     "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
     "delay": { "type": { "name": "number" }, "default": "600" },
-    "delayType": {
-      "type": { "name": "enum", "description": "'hover'<br>&#124;&nbsp;'rest'" },
-      "default": "'rest'"
-    },
     "onOpenChange": { "type": { "name": "func" } },
     "open": { "type": { "name": "bool" }, "default": "false" }
   },

diff --git a/docs/data/api/tooltip-root.json b/docs/data/api/tooltip-root.json
@@ -4,10 +4,6 @@
     "closeDelay": { "type": { "name": "number" }, "default": "0" },
     "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
     "delay": { "type": { "name": "number" }, "default": "600" },
-    "delayType": {
-      "type": { "name": "enum", "description": "'hover'<br>&#124;&nbsp;'rest'" },
-      "default": "'rest'"
-    },
     "hoverable": { "type": { "name": "bool" }, "default": "true" },
     "onOpenChange": { "type": { "name": "func" } },
     "open": { "type": { "name": "bool" }, "default": "false" },

diff --git a/docs/data/components/popover/popover.mdx b/docs/data/components/popover/popover.mdx
@@ -111,12 +111,6 @@ To change how long the popover waits until it opens or closes when `openOnHover`
 <Popover.Root openOnHover delay={200} closeDelay={200}>
 ```
 
-The delay type can be changed from `"rest"` (user's cursor is static over the trigger for the given timeout in milliseconds) to `"hover"` (the user's cursor has entered the trigger):
-
-```jsx
-<Popover.Root openOnHover delayType="hover">
-```
-
 ## Controlled
 
 To control the popover with external state, use the `open` and `onOpenChange` props:

diff --git a/docs/data/components/preview-card/preview-card.mdx b/docs/data/components/preview-card/preview-card.mdx
@@ -104,12 +104,6 @@ To change how long the Preview Card waits until it opens or closes, use the `del
 <PreviewCard.Root delay={200} closeDelay={200}>
 ```
 
-The delay type can be changed from `"rest"` (user's cursor is static over the trigger for the given timeout in milliseconds) to `"hover"` (the user's cursor has entered the trigger):
-
-```jsx
-<PreviewCard.Root delayType="hover">
-```
-
 ## Controlled
 
 To control the Preview Card with external state, use the `open` and `onOpenChange` props:

diff --git a/docs/data/components/tooltip/tooltip.mdx b/docs/data/components/tooltip/tooltip.mdx
@@ -126,12 +126,6 @@ To change how long the tooltip waits until it opens or closes, use the `delay` a
 <Tooltip.Root delay={200} closeDelay={200}>
 ```
 
-The delay type can be changed from `"rest"` (user's cursor is static over the trigger for the given timeout in milliseconds) to `"hover"` (the user's cursor has entered the trigger):
-
-```jsx
-<Tooltip.Root delayType="hover">
-```
-
 ## Controlled
 
 To control the tooltip with external state, use the `open` and `onOpenChange` props:

diff --git a/docs/data/translations/api-docs/popover-root/popover-root.json b/docs/data/translations/api-docs/popover-root/popover-root.json
@@ -13,9 +13,6 @@
     "delay": {
       "description": "The delay in milliseconds until the popover popup is opened when <code>openOnHover</code> is <code>true</code>."
     },
-    "delayType": {
-      "description": "The delay type to use when <code>openOnHover</code> is <code>true</code>. <code>rest</code> means the <code>delay</code> represents how long the user&#39;s cursor must rest on the trigger before the popover popup is opened. <code>hover</code> means the <code>delay</code> represents how long to wait as soon as the user&#39;s cursor has entered the trigger."
-    },
     "onOpenChange": {
       "description": "Callback fired when the popover popup is requested to be opened or closed. Use when controlled."
     },

diff --git a/docs/data/translations/api-docs/preview-card-root/preview-card-root.json b/docs/data/translations/api-docs/preview-card-root/preview-card-root.json
@@ -13,9 +13,6 @@
     "delay": {
       "description": "The delay in milliseconds until the preview card popup is opened when <code>openOnHover</code> is <code>true</code>."
     },
-    "delayType": {
-      "description": "The delay type to use when the preview card is triggered by hover. <code>rest</code> means the <code>delay</code> represents how long the user&#39;s cursor must rest on the trigger before the preview card popup is opened. <code>hover</code> means the <code>delay</code> represents how long to wait as soon as the user&#39;s cursor has entered the trigger."
-    },
     "onOpenChange": {
       "description": "Callback fired when the preview card popup is requested to be opened or closed. Use when controlled."
     },

diff --git a/docs/data/translations/api-docs/tooltip-root/tooltip-root.json b/docs/data/translations/api-docs/tooltip-root/tooltip-root.json
@@ -9,9 +9,6 @@
       "description": "Whether the tooltip popup is open by default. Use when uncontrolled."
     },
     "delay": { "description": "The delay in milliseconds until the tooltip popup is opened." },
-    "delayType": {
-      "description": "The delay type to use. <code>rest</code> means the <code>delay</code> represents how long the user&#39;s cursor must rest on the trigger before the tooltip popup is opened. <code>hover</code> means the <code>delay</code> represents how long to wait as soon as the user&#39;s cursor has entered the trigger."
-    },
     "hoverable": {
       "description": "Whether the user can move their cursor from the trigger element toward the tooltip popup element without it closing using a &quot;safe polygon&quot; technique."
     },

diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.test.tsx
@@ -263,32 +263,6 @@ describe('<Popover.Root />', () => {
 
       expect(screen.getByText('Content')).not.to.equal(null);
     });
-
-    it('should open after delay with hover type', async () => {
-      await render(
-        <Root openOnHover delayType="hover">
-          <Popover.Trigger />
-          <Popover.Positioner>
-            <Popover.Popup>Content</Popover.Popup>
-          </Popover.Positioner>
-        </Root>,
-      );
-
-      const anchor = screen.getByRole('button');
-
-      fireEvent.mouseEnter(anchor);
-      clock.tick(OPEN_DELAY / 2);
-
-      await flushMicrotasks();
-
-      expect(screen.queryByText('Content')).to.equal(null);
-
-      clock.tick(OPEN_DELAY / 2);
-
-      await flushMicrotasks();
-
-      expect(screen.getByText('Content')).not.to.equal(null);
-    });
   });
 
   describe('prop: closeDelay', () => {

diff --git a/packages/mui-base/src/Popover/Root/PopoverRoot.tsx b/packages/mui-base/src/Popover/Root/PopoverRoot.tsx
@@ -17,7 +17,7 @@ import { OPEN_DELAY } from '../utils/constants';
  * - [PopoverRoot API](https://base-ui.netlify.app/components/react-popover/#api-reference-PopoverRoot)
  */
 const PopoverRoot: React.FC<PopoverRoot.Props> = function PopoverRoot(props) {
-  const { openOnHover = false, delayType = 'rest', delay, closeDelay = 0, animated = true } = props;
+  const { openOnHover = false, delay, closeDelay = 0, animated = true } = props;
 
   const delayWithDefault = delay ?? OPEN_DELAY;
 
@@ -43,7 +43,6 @@ const PopoverRoot: React.FC<PopoverRoot.Props> = function PopoverRoot(props) {
   } = usePopoverRoot({
     openOnHover,
     delay: delayWithDefault,
-    delayType,
     closeDelay,
     animated,
     open: props.open,
@@ -55,7 +54,6 @@ const PopoverRoot: React.FC<PopoverRoot.Props> = function PopoverRoot(props) {
     () => ({
       openOnHover,
       delay: delayWithDefault,
-      delayType,
       closeDelay,
       open,
       setOpen,
@@ -79,7 +77,6 @@ const PopoverRoot: React.FC<PopoverRoot.Props> = function PopoverRoot(props) {
     [
       openOnHover,
       delayWithDefault,
-      delayType,
       closeDelay,
       open,
       setOpen,
@@ -145,14 +142,6 @@ PopoverRoot.propTypes /* remove-proptypes */ = {
    * @default 300
    */
   delay: PropTypes.number,
-  /**
-   * The delay type to use when `openOnHover` is `true`. `rest` means the `delay` represents how
-   * long the user's cursor must rest on the trigger before the popover popup is opened. `hover`
-   * means the `delay` represents how long to wait as soon as the user's cursor has entered the
-   * trigger.
-   * @default 'rest'
-   */
-  delayType: PropTypes.oneOf(['hover', 'rest']),
   /**
    * Callback fired when the popover popup is requested to be opened or closed. Use when
    * controlled.

diff --git a/packages/mui-base/src/Popover/Root/PopoverRootContext.ts b/packages/mui-base/src/Popover/Root/PopoverRootContext.ts
@@ -15,7 +15,6 @@ export interface PopoverRootContext {
   popupRef: React.RefObject<HTMLElement | null>;
   delay: number;
   closeDelay: number;
-  delayType: 'rest' | 'hover';
   instantType: 'dismiss' | 'click' | undefined;
   mounted: boolean;
   setMounted: React.Dispatch<React.SetStateAction<boolean>>;

diff --git a/packages/mui-base/src/Popover/Root/usePopoverRoot.ts b/packages/mui-base/src/Popover/Root/usePopoverRoot.ts
@@ -25,7 +25,6 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo
     onOpenChange: onOpenChangeProp = () => {},
     defaultOpen = false,
     keepMounted = false,
-    delayType = 'rest',
     delay,
     closeDelay,
     openOnHover = false,
@@ -96,12 +95,7 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo
     },
   });
 
-  const computedRestMs = delayType === 'rest' ? delayWithDefault : undefined;
-  let computedOpenDelay: number | undefined = delayType === 'hover' ? delayWithDefault : undefined;
-
-  if (delayType === 'hover') {
-    computedOpenDelay = delay == null ? delayWithDefault : delay;
-  }
+  const computedRestMs = delayWithDefault;
 
   const hover = useHover(context, {
     enabled: openOnHover,
@@ -110,7 +104,6 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo
     handleClose: safePolygon(),
     restMs: computedRestMs,
     delay: {
-      open: computedOpenDelay,
       close: closeDelayWithDefault,
     },
   });
@@ -191,14 +184,6 @@ export namespace usePopoverRoot {
      * @default 0
      */
     closeDelay?: number;
-    /**
-     * The delay type to use when `openOnHover` is `true`. `rest` means the `delay` represents how
-     * long the user's cursor must rest on the trigger before the popover popup is opened. `hover`
-     * means the `delay` represents how long to wait as soon as the user's cursor has entered the
-     * trigger.
-     * @default 'rest'
-     */
-    delayType?: 'rest' | 'hover';
     /**
      * Whether the popover popup element stays mounted in the DOM when closed.
      * @default false

diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts b/packages/mui-base/src/PreviewCard/Root/PreviewCardContext.ts
@@ -13,7 +13,6 @@ export interface PreviewCardRootContext {
   setPositionerElement: (el: HTMLElement | null) => void;
   delay: number;
   closeDelay: number;
-  delayType: 'rest' | 'hover';
   mounted: boolean;
   setMounted: React.Dispatch<React.SetStateAction<boolean>>;
   getRootTriggerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;

diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx
@@ -330,32 +330,6 @@ describe('<PreviewCard.Root />', () => {
 
       expect(screen.getByText('Content')).not.to.equal(null);
     });
-
-    it('should open after delay with hover type', async () => {
-      await render(
-        <Root delayType="hover">
-          <Trigger />
-          <PreviewCard.Positioner>
-            <PreviewCard.Popup>Content</PreviewCard.Popup>
-          </PreviewCard.Positioner>
-        </Root>,
-      );
-
-      const trigger = screen.getByRole('link');
-
-      fireEvent.mouseEnter(trigger);
-      clock.tick(OPEN_DELAY - 100);
-
-      await flushMicrotasks();
-
-      expect(screen.queryByText('Content')).to.equal(null);
-
-      clock.tick(100);
-
-      await flushMicrotasks();
-
-      expect(screen.getByText('Content')).not.to.equal(null);
-    });
   });
 
   describe('prop: closeDelay', () => {

diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.tsx
@@ -16,7 +16,7 @@ import { CLOSE_DELAY, OPEN_DELAY } from '../utils/constants';
  * - [PreviewCardRoot API](https://base-ui.netlify.app/components/react-preview-card/#api-reference-PreviewCardRoot)
  */
 const PreviewCardRoot: React.FC<PreviewCardRoot.Props> = function PreviewCardRoot(props) {
-  const { delayType = 'rest', delay, closeDelay, animated = true } = props;
+  const { delay, closeDelay, animated = true } = props;
 
   const delayWithDefault = delay ?? OPEN_DELAY;
   const closeDelayWithDefault = closeDelay ?? CLOSE_DELAY;
@@ -39,7 +39,6 @@ const PreviewCardRoot: React.FC<PreviewCardRoot.Props> = function PreviewCardRoo
   } = usePreviewCardRoot({
     animated,
     delay,
-    delayType,
     closeDelay,
     open: props.open,
     onOpenChange: props.onOpenChange,
@@ -49,7 +48,6 @@ const PreviewCardRoot: React.FC<PreviewCardRoot.Props> = function PreviewCardRoo
   const contextValue = React.useMemo(
     () => ({
       delay: delayWithDefault,
-      delayType,
       closeDelay: closeDelayWithDefault,
       open,
       setOpen,
@@ -68,7 +66,6 @@ const PreviewCardRoot: React.FC<PreviewCardRoot.Props> = function PreviewCardRoo
     }),
     [
       delayWithDefault,
-      delayType,
       closeDelayWithDefault,
       open,
       setOpen,
@@ -132,14 +129,6 @@ PreviewCardRoot.propTypes /* remove-proptypes */ = {
    * @default 600
    */
   delay: PropTypes.number,
-  /**
-   * The delay type to use when the preview card is triggered by hover. `rest` means the `delay`
-   * represents how long the user's cursor must rest on the trigger before the preview card popup is
-   * opened. `hover` means the `delay` represents how long to wait as soon as the user's cursor has
-   * entered the trigger.
-   * @default 'rest'
-   */
-  delayType: PropTypes.oneOf(['hover', 'rest']),
   /**
    * Callback fired when the preview card popup is requested to be opened or closed. Use when
    * controlled.

diff --git a/packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts b/packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts
@@ -27,7 +27,6 @@ export function usePreviewCardRoot(
     defaultOpen = false,
     keepMounted = false,
     animated = true,
-    delayType = 'rest',
     delay,
     closeDelay,
   } = params;
@@ -98,20 +97,14 @@ export function usePreviewCardRoot(
   });
 
   const instantType = instantTypeState;
-  const computedRestMs = delayType === 'rest' ? delayWithDefault : undefined;
-  let computedOpenDelay: number | undefined = delayType === 'hover' ? delayWithDefault : undefined;
-
-  if (delayType === 'hover') {
-    computedOpenDelay = delay == null ? delayWithDefault : delay;
-  }
+  const computedRestMs = delayWithDefault;
 
   const hover = useHover(context, {
     mouseOnly: true,
     move: false,
     handleClose: safePolygon(),
     restMs: computedRestMs,
     delay: {
-      open: computedOpenDelay,
       close: closeDelayWithDefault,
     },
   });
@@ -186,14 +179,6 @@ export namespace usePreviewCardRoot {
      * @default 300
      */
     closeDelay?: number;
-    /**
-     * The delay type to use when the preview card is triggered by hover. `rest` means the `delay`
-     * represents how long the user's cursor must rest on the trigger before the preview card popup is
-     * opened. `hover` means the `delay` represents how long to wait as soon as the user's cursor has
-     * entered the trigger.
-     * @default 'rest'
-     */
-    delayType?: 'rest' | 'hover';
     /**
      * Whether the preview card popup element stays mounted in the DOM when closed.
      * @default false