@react-stately/tooltip - npm Package Compare versions

Comparing version 3.0.0-nightly.2401 to 3.0.0-nightly-07431f4b1-241030

dist/main.js

@@ -1,122 +0,22 @@
-var {
-  useOverlayTriggerState
-} = require("@react-stately/overlays");
+var $3391baedd777a697$exports = require("./useTooltipTriggerState.main.js");
 
-var {
-  useEffect,
-  useMemo
-} = require("react");
 
-const $dbf206483fc3f3f5862f69116107e0c$var$TOOLTIP_DELAY = 1500; // this seems to be a 1.5 second delay, check with design
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
 
-const $dbf206483fc3f3f5862f69116107e0c$var$TOOLTIP_COOLDOWN = 500;
-let $dbf206483fc3f3f5862f69116107e0c$var$tooltips = {};
-let $dbf206483fc3f3f5862f69116107e0c$var$tooltipId = 0;
-let $dbf206483fc3f3f5862f69116107e0c$var$globalWarmedUp = false;
-let $dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout = null;
-let $dbf206483fc3f3f5862f69116107e0c$var$globalCooldownTimeout = null;
+$parcel$export(module.exports, "useTooltipTriggerState", () => $3391baedd777a697$exports.useTooltipTriggerState);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
-function useTooltipTriggerState(props) {
-  let {
-    delay = $dbf206483fc3f3f5862f69116107e0c$var$TOOLTIP_DELAY
-  } = props;
-  let {
-    isOpen,
-    open,
-    close
-  } = useOverlayTriggerState(props);
-  let id = useMemo(() => "" + ++$dbf206483fc3f3f5862f69116107e0c$var$tooltipId, []);
 
-  let ensureTooltipEntry = () => {
-    $dbf206483fc3f3f5862f69116107e0c$var$tooltips[id] = hideTooltip;
-  };
-
-  let closeOpenTooltips = () => {
-    for (let hideTooltipId in $dbf206483fc3f3f5862f69116107e0c$var$tooltips) {
-      if (hideTooltipId !== id) {
-        $dbf206483fc3f3f5862f69116107e0c$var$tooltips[hideTooltipId]();
-        delete $dbf206483fc3f3f5862f69116107e0c$var$tooltips[hideTooltipId];
-      }
-    }
-  };
-
-  let showTooltip = () => {
-    closeOpenTooltips();
-    ensureTooltipEntry();
-    $dbf206483fc3f3f5862f69116107e0c$var$globalWarmedUp = true;
-    open();
-
-    if ($dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout) {
-      clearTimeout($dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout);
-      $dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout = null;
-    }
-
-    if ($dbf206483fc3f3f5862f69116107e0c$var$globalCooldownTimeout) {
-      clearTimeout($dbf206483fc3f3f5862f69116107e0c$var$globalCooldownTimeout);
-      $dbf206483fc3f3f5862f69116107e0c$var$globalCooldownTimeout = null;
-    }
-  };
-
-  let hideTooltip = () => {
-    close();
-
-    if ($dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout) {
-      clearTimeout($dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout);
-      $dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout = null;
-    }
-
-    if ($dbf206483fc3f3f5862f69116107e0c$var$globalWarmedUp) {
-      if ($dbf206483fc3f3f5862f69116107e0c$var$globalCooldownTimeout) {
-        clearTimeout($dbf206483fc3f3f5862f69116107e0c$var$globalCooldownTimeout);
-      }
-
-      $dbf206483fc3f3f5862f69116107e0c$var$globalCooldownTimeout = setTimeout(() => {
-        delete $dbf206483fc3f3f5862f69116107e0c$var$tooltips[id];
-        $dbf206483fc3f3f5862f69116107e0c$var$globalCooldownTimeout = null;
-        $dbf206483fc3f3f5862f69116107e0c$var$globalWarmedUp = false;
-      }, $dbf206483fc3f3f5862f69116107e0c$var$TOOLTIP_COOLDOWN);
-    }
-  };
-
-  let warmupTooltip = () => {
-    closeOpenTooltips();
-    ensureTooltipEntry();
-
-    if (!isOpen && !$dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout && !$dbf206483fc3f3f5862f69116107e0c$var$globalWarmedUp) {
-      $dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout = setTimeout(() => {
-        $dbf206483fc3f3f5862f69116107e0c$var$globalWarmUpTimeout = null;
-        $dbf206483fc3f3f5862f69116107e0c$var$globalWarmedUp = true;
-        showTooltip();
-      }, $dbf206483fc3f3f5862f69116107e0c$var$TOOLTIP_DELAY);
-    } else if (!isOpen) {
-      showTooltip();
-    }
-  }; // eslint-disable-next-line arrow-body-style
-
-
-  useEffect(() => {
-    return () => {
-      let tooltip = $dbf206483fc3f3f5862f69116107e0c$var$tooltips[id];
-
-      if (tooltip) {
-        delete $dbf206483fc3f3f5862f69116107e0c$var$tooltips[id];
-      }
-    };
-  }, []);
-  return {
-    isOpen,
-    open: immediate => {
-      if (!immediate && delay > 0) {
-        warmupTooltip();
-      } else {
-        showTooltip();
-      }
-    },
-    close: () => {
-      hideTooltip();
-    }
-  };
-}
-
-exports.useTooltipTriggerState = useTooltipTriggerState;
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,112 +0,17 @@
-import { useOverlayTriggerState } from "@react-stately/overlays";
-import { useEffect, useMemo } from "react";
-const $af9cde49ea815e766aeca6386e9$var$TOOLTIP_DELAY = 1500; // this seems to be a 1.5 second delay, check with design
+import {useTooltipTriggerState as $8796f90736e175cb$export$4d40659c25ecb50b} from "./useTooltipTriggerState.module.js";
 
-const $af9cde49ea815e766aeca6386e9$var$TOOLTIP_COOLDOWN = 500;
-let $af9cde49ea815e766aeca6386e9$var$tooltips = {};
-let $af9cde49ea815e766aeca6386e9$var$tooltipId = 0;
-let $af9cde49ea815e766aeca6386e9$var$globalWarmedUp = false;
-let $af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout = null;
-let $af9cde49ea815e766aeca6386e9$var$globalCooldownTimeout = null;
-export function useTooltipTriggerState(props) {
-  let {
-    delay = $af9cde49ea815e766aeca6386e9$var$TOOLTIP_DELAY
-  } = props;
-  let {
-    isOpen,
-    open,
-    close
-  } = useOverlayTriggerState(props);
-  let id = useMemo(() => "" + ++$af9cde49ea815e766aeca6386e9$var$tooltipId, []);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
-  let ensureTooltipEntry = () => {
-    $af9cde49ea815e766aeca6386e9$var$tooltips[id] = hideTooltip;
-  };
 
-  let closeOpenTooltips = () => {
-    for (let hideTooltipId in $af9cde49ea815e766aeca6386e9$var$tooltips) {
-      if (hideTooltipId !== id) {
-        $af9cde49ea815e766aeca6386e9$var$tooltips[hideTooltipId]();
-        delete $af9cde49ea815e766aeca6386e9$var$tooltips[hideTooltipId];
-      }
-    }
-  };
-
-  let showTooltip = () => {
-    closeOpenTooltips();
-    ensureTooltipEntry();
-    $af9cde49ea815e766aeca6386e9$var$globalWarmedUp = true;
-    open();
-
-    if ($af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout) {
-      clearTimeout($af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout);
-      $af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout = null;
-    }
-
-    if ($af9cde49ea815e766aeca6386e9$var$globalCooldownTimeout) {
-      clearTimeout($af9cde49ea815e766aeca6386e9$var$globalCooldownTimeout);
-      $af9cde49ea815e766aeca6386e9$var$globalCooldownTimeout = null;
-    }
-  };
-
-  let hideTooltip = () => {
-    close();
-
-    if ($af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout) {
-      clearTimeout($af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout);
-      $af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout = null;
-    }
-
-    if ($af9cde49ea815e766aeca6386e9$var$globalWarmedUp) {
-      if ($af9cde49ea815e766aeca6386e9$var$globalCooldownTimeout) {
-        clearTimeout($af9cde49ea815e766aeca6386e9$var$globalCooldownTimeout);
-      }
-
-      $af9cde49ea815e766aeca6386e9$var$globalCooldownTimeout = setTimeout(() => {
-        delete $af9cde49ea815e766aeca6386e9$var$tooltips[id];
-        $af9cde49ea815e766aeca6386e9$var$globalCooldownTimeout = null;
-        $af9cde49ea815e766aeca6386e9$var$globalWarmedUp = false;
-      }, $af9cde49ea815e766aeca6386e9$var$TOOLTIP_COOLDOWN);
-    }
-  };
-
-  let warmupTooltip = () => {
-    closeOpenTooltips();
-    ensureTooltipEntry();
-
-    if (!isOpen && !$af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout && !$af9cde49ea815e766aeca6386e9$var$globalWarmedUp) {
-      $af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout = setTimeout(() => {
-        $af9cde49ea815e766aeca6386e9$var$globalWarmUpTimeout = null;
-        $af9cde49ea815e766aeca6386e9$var$globalWarmedUp = true;
-        showTooltip();
-      }, $af9cde49ea815e766aeca6386e9$var$TOOLTIP_DELAY);
-    } else if (!isOpen) {
-      showTooltip();
-    }
-  }; // eslint-disable-next-line arrow-body-style
-
-
-  useEffect(() => {
-    return () => {
-      let tooltip = $af9cde49ea815e766aeca6386e9$var$tooltips[id];
-
-      if (tooltip) {
-        delete $af9cde49ea815e766aeca6386e9$var$tooltips[id];
-      }
-    };
-  }, []);
-  return {
-    isOpen,
-    open: immediate => {
-      if (!immediate && delay > 0) {
-        warmupTooltip();
-      } else {
-        showTooltip();
-      }
-    },
-    close: () => {
-      hideTooltip();
-    }
-  };
-}
+export {$8796f90736e175cb$export$4d40659c25ecb50b as useTooltipTriggerState};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

 import { TooltipTriggerProps } from "@react-types/tooltip";
 export interface TooltipTriggerState {
+    /** Whether the tooltip is currently showing. */
     isOpen: boolean;
-    open: (immediate?: boolean) => void;
-    close: () => void;
+    /**
+     * Shows the tooltip. By default, the tooltip becomes visible after a delay
+     * depending on a global warmup timer. The `immediate` option shows the
+     * tooltip immediately instead.
+     */
+    open(immediate?: boolean): void;
+    /** Hides the tooltip. */
+    close(immediate?: boolean): void;
 }
-export function useTooltipTriggerState(props: TooltipTriggerProps): TooltipTriggerState;
+/**
+ * Manages state for a tooltip trigger. Tracks whether the tooltip is open, and provides
+ * methods to toggle this state. Ensures only one tooltip is open at a time and controls
+ * the delay for showing a tooltip.
+ */
+export function useTooltipTriggerState(props?: TooltipTriggerProps): TooltipTriggerState;
+export type { TooltipTriggerProps } from '@react-types/tooltip';
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-stately/tooltip",
-  "version": "3.0.0-nightly.2401+61d8633a",
+  "version": "3.0.0-nightly-07431f4b1-241030",
   "description": "Spectrum UI components in React",
@@ -8,2 +8,7 @@ "license": "Apache-2.0",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
@@ -21,9 +26,8 @@ "source": "src/index.ts",
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-stately/overlays": "3.1.1-nightly.2401+61d8633a",
-    "@react-stately/utils": "3.0.0-nightly.723+61d8633a",
-    "@react-types/tooltip": "3.0.0-nightly.2401+61d8633a"
+    "@react-stately/overlays": "^3.0.0-nightly-07431f4b1-241030",
+    "@react-types/tooltip": "^3.0.0-nightly-07431f4b1-241030",
+    "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
@@ -33,3 +37,3 @@ "publishConfig": {
   },
-  "gitHead": "61d8633a588d2603c84651e81ccdefb50f1bdff9"
-}
+  "stableVersion": "3.4.13"
+}

src/index.ts

@@ -13,2 +13,5 @@ /*
 
-export * from './useTooltipTriggerState';
+export {useTooltipTriggerState} from './useTooltipTriggerState';
+
+export type {TooltipTriggerProps} from '@react-types/tooltip';
+export type {TooltipTriggerState} from './useTooltipTriggerState';

src/useTooltipTriggerState.ts

@@ -14,3 +14,3 @@ /*
 import {TooltipTriggerProps} from '@react-types/tooltip';
-import {useEffect, useMemo} from 'react';
+import {useEffect, useMemo, useRef} from 'react';
 import {useOverlayTriggerState} from '@react-stately/overlays';
@@ -22,5 +22,12 @@
 export interface TooltipTriggerState {
+  /** Whether the tooltip is currently showing. */
   isOpen: boolean,
-  open: (immediate?: boolean) => void,
-  close: () => void
+  /**
+   * Shows the tooltip. By default, the tooltip becomes visible after a delay
+   * depending on a global warmup timer. The `immediate` option shows the
+   * tooltip immediately instead.
+   */
+  open(immediate?: boolean): void,
+  /** Hides the tooltip. */
+  close(immediate?: boolean): void
 }
@@ -34,6 +41,13 @@
 
-export function useTooltipTriggerState(props: TooltipTriggerProps): TooltipTriggerState {
-  let {delay = TOOLTIP_DELAY} = props;
+/**
+ * Manages state for a tooltip trigger. Tracks whether the tooltip is open, and provides
+ * methods to toggle this state. Ensures only one tooltip is open at a time and controls
+ * the delay for showing a tooltip.
+ */
+export function useTooltipTriggerState(props: TooltipTriggerProps = {}): TooltipTriggerState {
+  let {delay = TOOLTIP_DELAY, closeDelay = TOOLTIP_COOLDOWN} = props;
   let {isOpen, open, close} = useOverlayTriggerState(props);
   let id = useMemo(() => `${++tooltipId}`, []);
+  let closeTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
+  let closeCallback = useRef<() => void>(close);
 
@@ -47,3 +61,3 @@ let ensureTooltipEntry = () => {
       if (hideTooltipId !== id) {
-        tooltips[hideTooltipId]();
+        tooltips[hideTooltipId](true);
         delete tooltips[hideTooltipId];
@@ -55,2 +69,4 @@ }
   let showTooltip = () => {
+    clearTimeout(closeTimeout.current);
+    closeTimeout.current = null;
     closeOpenTooltips();
@@ -70,4 +86,14 @@ ensureTooltipEntry();
 
-  let hideTooltip = () => {
-    close();
+  let hideTooltip = (immediate?: boolean) => {
+    if (immediate || closeDelay <= 0) {
+      clearTimeout(closeTimeout.current);
+      closeTimeout.current = null;
+      closeCallback.current();
+    } else if (!closeTimeout.current) {
+      closeTimeout.current = setTimeout(() => {
+        closeTimeout.current = null;
+        closeCallback.current();
+      }, closeDelay);
+    }
+
     if (globalWarmUpTimeout) {
@@ -85,3 +111,3 @@ clearTimeout(globalWarmUpTimeout);
         globalWarmedUp = false;
-      }, TOOLTIP_COOLDOWN);
+      }, Math.max(TOOLTIP_COOLDOWN, closeDelay));
     }
@@ -98,3 +124,3 @@ };
         showTooltip();
-      }, TOOLTIP_DELAY);
+      }, delay);
     } else if (!isOpen) {
@@ -105,5 +131,10 @@ showTooltip();
 
-  // eslint-disable-next-line arrow-body-style
   useEffect(() => {
+    closeCallback.current = close;
+  }, [close]);
+
+   
+  useEffect(() => {
     return () => {
+      clearTimeout(closeTimeout.current);
       let tooltip = tooltips[id];
@@ -114,3 +145,3 @@ if (tooltip) {
     };
-  }, []);
+  }, [id]);
 
@@ -120,3 +151,3 @@ return {
     open: (immediate) => {
-      if (!immediate && delay > 0) {
+      if (!immediate && delay > 0 && !closeTimeout.current) {
         warmupTooltip();
@@ -127,6 +158,4 @@ } else {
     },
-    close: () => {
-      hideTooltip();
-    }
+    close: hideTooltip
   };
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 3 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41652

increased by12.04%

Dependency count

4

decreased by-20%

Number of package files

16

increased by45.45%

Lines of code

541

increased by64.94%

Worsened metrics

Number of low license alerts

3

increased byInfinity%

License quality

80

decreased by-20%

Dependency changes

• + Added@swc/helpers@^0.5.0

• + Added@react-stately/overlays@3.6.11(transitive)

• + Added@react-stately/utils@3.10.4(transitive)

• + Added@react-types/overlays@3.8.10(transitive)

• + Added@react-types/shared@3.25.0(transitive)

• + Added@react-types/tooltip@3.4.12(transitive)

• + Added@swc/helpers@0.5.13(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedtslib@2.8.0(transitive)

• - Removed@babel/runtime@^7.6.2

• - Removed@react-stately/utils@3.0.0-nightly.723+61d8633a

• - Removed@babel/runtime@7.26.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@react-stately/overlays@^3.0.0-nightly-07431f4b1-241030

• Updated@react-types/tooltip@^3.0.0-nightly-07431f4b1-241030