@react-spectrum/tooltip - npm Package Compare versions

Comparing version 3.0.0-nightly.697 to 3.0.0-nightly.698

dist/main.js

@@ -29,4 +29,5 @@ var {
 var {
-  useRef,
-  useContext
+  useContext,
+  useImperativeHandle,
+  useRef
 } = _react2;
@@ -42,4 +43,4 @@
   classNames,
-  useStyleProps,
-  useDOMRef
+  createDOMRef,
+  useStyleProps
 } = require("@react-spectrum/utils");
@@ -82,78 +83,21 @@
 
-const $b29140c6a34ca04560623b3e2e0d4c0b$var$TooltipContext = _react.createContext({});
+const $a23748555680c48540a4239b15ea00bc$export$TooltipContext = _react.createContext({});
 
-function useTooltipProvider() {
-  return useContext($b29140c6a34ca04560623b3e2e0d4c0b$var$TooltipContext) || {};
-}
-
-exports.useTooltipProvider = useTooltipProvider;
-
-function $b29140c6a34ca04560623b3e2e0d4c0b$var$TooltipTrigger(props, ref) {
-  let {
-    children,
-    isDisabled
-  } = props;
-
-  let [trigger, tooltip] = _react.Children.toArray(children);
-
-  let state = useTooltipTriggerState(props);
-  let domRef = useDOMRef(ref);
-  let triggerRef = useRef();
-  let tooltipTriggerRef = domRef || triggerRef;
-  let overlayRef = useRef();
-  let {
-    triggerProps,
-    tooltipProps
-  } = useTooltipTrigger({
-    isDisabled
-  }, state, tooltipTriggerRef);
-  let {
-    overlayProps,
-    placement
-  } = useOverlayPosition({
-    placement: props.placement || 'right',
-    targetRef: tooltipTriggerRef,
-    overlayRef,
-    isOpen: state.isOpen
-  });
-  return /*#__PURE__*/_react.createElement(FocusableProvider, _babelRuntimeHelpersExtends({}, triggerProps, {
-    ref: tooltipTriggerRef
-  }), trigger, /*#__PURE__*/_react.createElement($b29140c6a34ca04560623b3e2e0d4c0b$var$TooltipContext.Provider, {
-    value: _babelRuntimeHelpersExtends({
-      placement,
-      ref: overlayRef,
-      UNSAFE_style: overlayProps.style
-    }, tooltipProps)
-  }, /*#__PURE__*/_react.createElement(Overlay, {
-    isOpen: state.isOpen
-  }, tooltip)));
-}
-/**
- * Display container for Tooltip content. Has a directional arrow dependent on its placement.
- */
-
-
-let TooltipTrigger = _react.forwardRef($b29140c6a34ca04560623b3e2e0d4c0b$var$TooltipTrigger);
-
-exports.TooltipTrigger = TooltipTrigger;
 let $ff273912ab399ba4f2bd386cbddf33$var$iconMap = {
-  neutral: '',
   info: _spectrumIconsUiInfoSmall,
   positive: _spectrumIconsUiSuccessSmall,
   negative: _spectrumIconsUiAlertSmall
-}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+};
 var $e02064c879d8df5d7c99552d96e8391$$interop$default = $parcel$interopDefault($e02064c879d8df5d7c99552d96e8391$exports);
 
 function $ff273912ab399ba4f2bd386cbddf33$var$Tooltip(props, ref) {
-  let defaultRef = useRef(); // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-  ref = ref || defaultRef; // need to figure out how to merge?
-
-  let _useTooltipProvider = useTooltipProvider(),
+  let _useContext = useContext($a23748555680c48540a4239b15ea00bc$export$TooltipContext),
       {
-    ref: overlayRef
-  } = _useTooltipProvider,
-      tooltipProviderProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(_useTooltipProvider, ["ref"]);
+    ref: overlayRef,
+    arrowProps
+  } = _useContext,
+      tooltipProviderProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(_useContext, ["ref", "arrowProps"]);
 
+  let defaultRef = useRef();
+  overlayRef = overlayRef || defaultRef;
   props = mergeProps(props, tooltipProviderProps);
@@ -163,3 +107,3 @@
     variant = 'neutral',
-    placement = 'right',
+    placement = 'top',
     isOpen,
@@ -175,3 +119,5 @@ showIcon
     tooltipProps
-  } = useTooltip(props);
+  } = useTooltip(props); // Sync ref with overlayRef from context.
+
+  useImperativeHandle(ref, () => createDOMRef(overlayRef));
   let Icon = $ff273912ab399ba4f2bd386cbddf33$var$iconMap[variant];
@@ -188,5 +134,5 @@ return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersExtends({}, styleProps, tooltipProps, {
     className: classNames($e02064c879d8df5d7c99552d96e8391$$interop$default, 'spectrum-Tooltip-label')
-  }, props.children), /*#__PURE__*/_react.createElement("span", {
+  }, props.children), /*#__PURE__*/_react.createElement("span", _babelRuntimeHelpersExtends({}, arrowProps, {
     className: classNames($e02064c879d8df5d7c99552d96e8391$$interop$default, 'spectrum-Tooltip-tip')
-  }));
+  })));
 }
@@ -201,2 +147,65 @@ /**
 exports.Tooltip = Tooltip;
+
+function $b29140c6a34ca04560623b3e2e0d4c0b$var$TooltipTrigger(props) {
+  let {
+    children,
+    isDisabled
+  } = props;
+
+  let [trigger, tooltip] = _react.Children.toArray(children);
+
+  let state = useTooltipTriggerState(props);
+  let tooltipTriggerRef = useRef();
+  let overlayRef = useRef();
+  let {
+    triggerProps,
+    tooltipProps
+  } = useTooltipTrigger({
+    isDisabled
+  }, state, tooltipTriggerRef);
+  let {
+    overlayProps,
+    arrowProps,
+    placement
+  } = useOverlayPosition({
+    placement: props.placement || 'top',
+    targetRef: tooltipTriggerRef,
+    overlayRef,
+    isOpen: state.isOpen
+  });
+  return /*#__PURE__*/_react.createElement(FocusableProvider, _babelRuntimeHelpersExtends({}, triggerProps, {
+    ref: tooltipTriggerRef
+  }), trigger, /*#__PURE__*/_react.createElement($a23748555680c48540a4239b15ea00bc$export$TooltipContext.Provider, {
+    value: _babelRuntimeHelpersExtends({
+      placement,
+      ref: overlayRef,
+      UNSAFE_style: overlayProps.style,
+      arrowProps
+    }, tooltipProps)
+  }, /*#__PURE__*/_react.createElement(Overlay, {
+    isOpen: state.isOpen
+  }, tooltip)));
+} // Support TooltipTrigger inside components using CollectionBuilder.
+
+
+$b29140c6a34ca04560623b3e2e0d4c0b$var$TooltipTrigger.getCollectionNode = function* (props) {
+  let [trigger, tooltip] = _react.Children.toArray(props.children);
+
+  yield {
+    element: trigger,
+    wrapper: element => /*#__PURE__*/_react.createElement($b29140c6a34ca04560623b3e2e0d4c0b$var$TooltipTrigger, _babelRuntimeHelpersExtends({
+      key: element.key
+    }, props), element, tooltip)
+  };
+};
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+// We don't want getCollectionNode to show up in the type definition
+
+
+let TooltipTrigger = $b29140c6a34ca04560623b3e2e0d4c0b$var$TooltipTrigger;
+exports.TooltipTrigger = TooltipTrigger;
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -7,6 +7,6 @@ import { useTooltipTriggerState } from "@react-stately/tooltip";
 import _spectrumIconsUiSuccessSmall from "@spectrum-icons/ui/SuccessSmall";
-import _react, { useRef, useContext } from "react";
+import _react, { useContext, useImperativeHandle, useRef } from "react";
 import { mergeProps } from "@react-aria/utils";
 import _spectrumIconsUiInfoSmall from "@spectrum-icons/ui/InfoSmall";
-import { classNames, useStyleProps, useDOMRef } from "@react-spectrum/utils";
+import { classNames, createDOMRef, useStyleProps } from "@react-spectrum/utils";
 import _spectrumIconsUiAlertSmall from "@spectrum-icons/ui/AlertSmall";
@@ -44,74 +44,21 @@ import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 
-const $af9462b3a75853dd6b5cae0d0c0ce5a$var$TooltipContext = _react.createContext({});
+const $d79690ed71d0e589905a11b2fa970c7$export$TooltipContext = _react.createContext({});
 
-export function useTooltipProvider() {
-  return useContext($af9462b3a75853dd6b5cae0d0c0ce5a$var$TooltipContext) || {};
-}
-
-function $af9462b3a75853dd6b5cae0d0c0ce5a$var$TooltipTrigger(props, ref) {
-  let {
-    children,
-    isDisabled
-  } = props;
-
-  let [trigger, tooltip] = _react.Children.toArray(children);
-
-  let state = useTooltipTriggerState(props);
-  let domRef = useDOMRef(ref);
-  let triggerRef = useRef();
-  let tooltipTriggerRef = domRef || triggerRef;
-  let overlayRef = useRef();
-  let {
-    triggerProps,
-    tooltipProps
-  } = useTooltipTrigger({
-    isDisabled
-  }, state, tooltipTriggerRef);
-  let {
-    overlayProps,
-    placement
-  } = useOverlayPosition({
-    placement: props.placement || 'right',
-    targetRef: tooltipTriggerRef,
-    overlayRef,
-    isOpen: state.isOpen
-  });
-  return /*#__PURE__*/_react.createElement(FocusableProvider, _babelRuntimeHelpersEsmExtends({}, triggerProps, {
-    ref: tooltipTriggerRef
-  }), trigger, /*#__PURE__*/_react.createElement($af9462b3a75853dd6b5cae0d0c0ce5a$var$TooltipContext.Provider, {
-    value: _babelRuntimeHelpersEsmExtends({
-      placement,
-      ref: overlayRef,
-      UNSAFE_style: overlayProps.style
-    }, tooltipProps)
-  }, /*#__PURE__*/_react.createElement(Overlay, {
-    isOpen: state.isOpen
-  }, tooltip)));
-}
-/**
- * Display container for Tooltip content. Has a directional arrow dependent on its placement.
- */
-
-
-export let TooltipTrigger = _react.forwardRef($af9462b3a75853dd6b5cae0d0c0ce5a$var$TooltipTrigger);
 let $bbf06d7c74e4575391edac06758d45$var$iconMap = {
-  neutral: '',
   info: _spectrumIconsUiInfoSmall,
   positive: _spectrumIconsUiSuccessSmall,
   negative: _spectrumIconsUiAlertSmall
-}; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+};
 var $fce0adf931fbcb6e5bbc907c5444$$interop$default = $parcel$interopDefault($fce0adf931fbcb6e5bbc907c5444$exports);
 
 function $bbf06d7c74e4575391edac06758d45$var$Tooltip(props, ref) {
-  let defaultRef = useRef(); // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
-  ref = ref || defaultRef; // need to figure out how to merge?
-
-  let _useTooltipProvider = useTooltipProvider(),
+  let _useContext = useContext($d79690ed71d0e589905a11b2fa970c7$export$TooltipContext),
       {
-    ref: overlayRef
-  } = _useTooltipProvider,
-      tooltipProviderProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(_useTooltipProvider, ["ref"]);
+    ref: overlayRef,
+    arrowProps
+  } = _useContext,
+      tooltipProviderProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(_useContext, ["ref", "arrowProps"]);
 
+  let defaultRef = useRef();
+  overlayRef = overlayRef || defaultRef;
   props = mergeProps(props, tooltipProviderProps);
@@ -121,3 +68,3 @@
     variant = 'neutral',
-    placement = 'right',
+    placement = 'top',
     isOpen,
@@ -133,3 +80,5 @@ showIcon
     tooltipProps
-  } = useTooltip(props);
+  } = useTooltip(props); // Sync ref with overlayRef from context.
+
+  useImperativeHandle(ref, () => createDOMRef(overlayRef));
   let Icon = $bbf06d7c74e4575391edac06758d45$var$iconMap[variant];
@@ -146,5 +95,5 @@ return /*#__PURE__*/_react.createElement("div", _babelRuntimeHelpersEsmExtends({}, styleProps, tooltipProps, {
     className: classNames($fce0adf931fbcb6e5bbc907c5444$$interop$default, 'spectrum-Tooltip-label')
-  }, props.children), /*#__PURE__*/_react.createElement("span", {
+  }, props.children), /*#__PURE__*/_react.createElement("span", _babelRuntimeHelpersEsmExtends({}, arrowProps, {
     className: classNames($fce0adf931fbcb6e5bbc907c5444$$interop$default, 'spectrum-Tooltip-tip')
-  }));
+  })));
 }
@@ -157,2 +106,64 @@ /**
 export let Tooltip = _react.forwardRef($bbf06d7c74e4575391edac06758d45$var$Tooltip);
+
+function $af9462b3a75853dd6b5cae0d0c0ce5a$var$TooltipTrigger(props) {
+  let {
+    children,
+    isDisabled
+  } = props;
+
+  let [trigger, tooltip] = _react.Children.toArray(children);
+
+  let state = useTooltipTriggerState(props);
+  let tooltipTriggerRef = useRef();
+  let overlayRef = useRef();
+  let {
+    triggerProps,
+    tooltipProps
+  } = useTooltipTrigger({
+    isDisabled
+  }, state, tooltipTriggerRef);
+  let {
+    overlayProps,
+    arrowProps,
+    placement
+  } = useOverlayPosition({
+    placement: props.placement || 'top',
+    targetRef: tooltipTriggerRef,
+    overlayRef,
+    isOpen: state.isOpen
+  });
+  return /*#__PURE__*/_react.createElement(FocusableProvider, _babelRuntimeHelpersEsmExtends({}, triggerProps, {
+    ref: tooltipTriggerRef
+  }), trigger, /*#__PURE__*/_react.createElement($d79690ed71d0e589905a11b2fa970c7$export$TooltipContext.Provider, {
+    value: _babelRuntimeHelpersEsmExtends({
+      placement,
+      ref: overlayRef,
+      UNSAFE_style: overlayProps.style,
+      arrowProps
+    }, tooltipProps)
+  }, /*#__PURE__*/_react.createElement(Overlay, {
+    isOpen: state.isOpen
+  }, tooltip)));
+} // Support TooltipTrigger inside components using CollectionBuilder.
+
+
+$af9462b3a75853dd6b5cae0d0c0ce5a$var$TooltipTrigger.getCollectionNode = function* (props) {
+  let [trigger, tooltip] = _react.Children.toArray(props.children);
+
+  yield {
+    element: trigger,
+    wrapper: element => /*#__PURE__*/_react.createElement($af9462b3a75853dd6b5cae0d0c0ce5a$var$TooltipTrigger, _babelRuntimeHelpersEsmExtends({
+      key: element.key
+    }, props), element, tooltip)
+  };
+};
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+// We don't want getCollectionNode to show up in the type definition
+
+
+export let TooltipTrigger = $af9462b3a75853dd6b5cae0d0c0ce5a$var$TooltipTrigger;
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -1,20 +0,14 @@
-import { StyleProps } from "@react-types/shared";
-import { PlacementAxis } from "@react-types/overlays";
-import React, { RefObject } from "react";
-import { TooltipTriggerProps, SpectrumTooltipProps } from "@react-types/tooltip";
-interface TooltipContextProps extends StyleProps {
-    ref?: RefObject<HTMLDivElement>;
-    placement?: PlacementAxis;
-    isOpen?: boolean;
-}
-export function useTooltipProvider(): TooltipContextProps;
+import React from "react";
+import { SpectrumTooltipProps, SpectrumTooltipTriggerProps } from "@react-types/tooltip";
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.
  */
-export let TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLElement>>>;
+export let Tooltip: React.ForwardRefExoticComponent<SpectrumTooltipProps & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLElement>>>;
 /**
- * Display container for Tooltip content. Has a directional arrow dependent on its placement.
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
  */
-export let Tooltip: React.ForwardRefExoticComponent<SpectrumTooltipProps & React.RefAttributes<HTMLDivElement>>;
+export let TooltipTrigger: (props: SpectrumTooltipTriggerProps) => JSX.Element;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-spectrum/tooltip",
-  "version": "3.0.0-nightly.697+b8e7a96e",
+  "version": "3.0.0-nightly.698+1aa1058d",
   "description": "Spectrum UI components in React",
@@ -35,18 +35,18 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "3.0.0-nightly.697+b8e7a96e",
-    "@react-aria/interactions": "3.0.0-nightly.697+b8e7a96e",
-    "@react-aria/overlays": "3.0.0-nightly.697+b8e7a96e",
-    "@react-aria/tooltip": "3.0.0-nightly.697+b8e7a96e",
-    "@react-aria/utils": "3.0.0-nightly.697+b8e7a96e",
-    "@react-spectrum/overlays": "3.0.0-nightly.697+b8e7a96e",
-    "@react-spectrum/utils": "3.0.0-nightly.697+b8e7a96e",
-    "@react-stately/tooltip": "3.0.0-nightly.2375+b8e7a96e",
-    "@react-stately/utils": "3.0.0-nightly.697+b8e7a96e",
-    "@react-types/overlays": "3.2.1-nightly.2375+b8e7a96e",
-    "@react-types/shared": "3.0.0-nightly.697+b8e7a96e",
-    "@react-types/tooltip": "3.0.0-nightly.2375+b8e7a96e",
-    "@spectrum-icons/ui": "3.0.0-nightly.697+b8e7a96e"
+    "@react-aria/focus": "3.0.0-nightly.698+1aa1058d",
+    "@react-aria/interactions": "3.0.0-nightly.698+1aa1058d",
+    "@react-aria/overlays": "3.0.0-nightly.698+1aa1058d",
+    "@react-aria/tooltip": "3.0.0-nightly.698+1aa1058d",
+    "@react-aria/utils": "3.0.0-nightly.698+1aa1058d",
+    "@react-spectrum/overlays": "3.0.0-nightly.698+1aa1058d",
+    "@react-spectrum/utils": "3.0.0-nightly.698+1aa1058d",
+    "@react-stately/tooltip": "3.0.0-nightly.2376+1aa1058d",
+    "@react-stately/utils": "3.0.0-nightly.698+1aa1058d",
+    "@react-types/overlays": "3.2.1-nightly.2376+1aa1058d",
+    "@react-types/shared": "3.0.0-nightly.698+1aa1058d",
+    "@react-types/tooltip": "3.0.0-nightly.2376+1aa1058d",
+    "@spectrum-icons/ui": "3.0.0-nightly.698+1aa1058d"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.697+b8e7a96e"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.698+1aa1058d"
   },
@@ -60,3 +60,3 @@ "peerDependencies": {
   },
-  "gitHead": "b8e7a96e0b55f9875146f58484f97a1d9c1b04d8"
+  "gitHead": "1aa1058d2bef892d4ecf411cfaeec5ba24440cde"
 }

New alerts

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

Fixed alerts

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

82528

increased by6.6%

Number of package files

15

increased by7.14%

Lines of code

546

increased by7.48%

Dependency changes

• Updated@react-aria/focus@3.0.0-nightly.698+1aa1058d

• Updated@react-aria/interactions@3.0.0-nightly.698+1aa1058d

• Updated@react-aria/overlays@3.0.0-nightly.698+1aa1058d

• Updated@react-aria/tooltip@3.0.0-nightly.698+1aa1058d

• Updated@react-aria/utils@3.0.0-nightly.698+1aa1058d

• Updated@react-spectrum/overlays@3.0.0-nightly.698+1aa1058d

• Updated@react-spectrum/utils@3.0.0-nightly.698+1aa1058d

• Updated@react-stately/tooltip@3.0.0-nightly.2376+1aa1058d

• Updated@react-stately/utils@3.0.0-nightly.698+1aa1058d

• Updated@react-types/overlays@3.2.1-nightly.2376+1aa1058d

• Updated@react-types/shared@3.0.0-nightly.698+1aa1058d

• Updated@react-types/tooltip@3.0.0-nightly.2376+1aa1058d

• Updated@spectrum-icons/ui@3.0.0-nightly.698+1aa1058d