@zendeskgarden/container-tooltip - npm Package Compare versions

Comparing version 1.0.20 to 2.0.0

dist/index.cjs.js

@@ -11,19 +11,19 @@ /**
 var React = require('react');
-var reactUid = require('react-uid');
 var containerUtilities = require('@zendeskgarden/container-utilities');
 var PropTypes = require('prop-types');
 
-const useTooltip = function (_temp) {
+const useTooltip = _ref => {
   let {
     delayMilliseconds = 500,
     id,
-    isVisible
-  } = _temp === void 0 ? {} : _temp;
+    isVisible,
+    triggerRef
+  } = _ref;
+  const _id = containerUtilities.useId(id);
   const [visibility, setVisibility] = React.useState(isVisible);
-  const seed = reactUid.useUIDSeed();
-  const _id = React.useMemo(() => id || seed(`tooltip_${'1.0.20'}`), [id, seed]);
+  const [isTriggerPopupExpanded, setIsTriggerPopupExpanded] = React.useState(false);
   const isMounted = React.useRef(false);
   const openTooltipTimeoutId = React.useRef();
   const closeTooltipTimeoutId = React.useRef();
-  const openTooltip = function (delayMs) {
+  const openTooltip = React.useCallback(function (delayMs) {
     if (delayMs === void 0) {
@@ -39,4 +39,4 @@ delayMs = delayMilliseconds;
     openTooltipTimeoutId.current = Number(timerId);
-  };
-  const closeTooltip = function (delayMs) {
+  }, [delayMilliseconds]);
+  const closeTooltip = React.useCallback(function (delayMs) {
     if (delayMs === void 0) {
@@ -52,3 +52,3 @@ delayMs = delayMilliseconds;
     closeTooltipTimeoutId.current = Number(timerId);
-  };
+  }, [delayMilliseconds]);
   React.useEffect(() => {
@@ -66,3 +66,20 @@ isMounted.current = true;
   }, [closeTooltipTimeoutId, openTooltipTimeoutId]);
-  const getTriggerProps = function (_temp2) {
+  React.useEffect(() => {
+    const triggerElement = triggerRef?.current?.getAttribute('aria-haspopup') === 'true' ? triggerRef.current : null;
+    const updateTriggerPopupExpandedState = () => {
+      if (triggerElement) {
+        setIsTriggerPopupExpanded(triggerElement.getAttribute('aria-expanded') === 'true');
+      }
+    };
+    const mutationObserver = new MutationObserver(updateTriggerPopupExpandedState);
+    if (triggerElement) {
+      mutationObserver.observe(triggerElement, {
+        attributes: true,
+        attributeFilter: ['aria-expanded']
+      });
+    }
+    updateTriggerPopupExpandedState();
+    return () => mutationObserver.disconnect();
+  }, [triggerRef]);
+  const getTriggerProps = React.useCallback(function (_temp) {
     let {
@@ -76,3 +93,3 @@ tabIndex = 0,
       ...other
-    } = _temp2 === void 0 ? {} : _temp2;
+    } = _temp === void 0 ? {} : _temp;
     return {
@@ -91,7 +108,8 @@ tabIndex,
       'data-garden-container-id': 'containers.tooltip',
-      'data-garden-container-version': '1.0.20',
+      'data-garden-container-version': '2.0.0',
+      ref: triggerRef,
       ...other
     };
-  };
-  const getTooltipProps = function (_temp3) {
+  }, [_id, closeTooltip, openTooltip, triggerRef, visibility]);
+  const getTooltipProps = React.useCallback(function (_temp2) {
     let {
@@ -102,3 +120,3 @@ role = 'tooltip',
       ...other
-    } = _temp3 === void 0 ? {} : _temp3;
+    } = _temp2 === void 0 ? {} : _temp2;
     return {
@@ -108,9 +126,9 @@ role,
       onMouseLeave: containerUtilities.composeEventHandlers(onMouseLeave, () => closeTooltip()),
-      'aria-hidden': !visibility,
+      'aria-hidden': !visibility || isTriggerPopupExpanded,
       id: _id,
       ...other
     };
-  };
-  return {
-    isVisible: visibility,
+  }, [_id, closeTooltip, openTooltip, visibility, isTriggerPopupExpanded]);
+  return React.useMemo(() => ({
+    isVisible: visibility && !isTriggerPopupExpanded,
     getTooltipProps,
@@ -120,11 +138,11 @@ getTriggerProps,
     closeTooltip
-  };
+  }), [closeTooltip, getTooltipProps, getTriggerProps, openTooltip, visibility, isTriggerPopupExpanded]);
 };
 
-const TooltipContainer = _ref => {
-  let {
+const TooltipContainer = props => {
+  const {
     children,
     render = children,
     ...options
-  } = _ref;
+  } = props;
   return React.createElement(React.Fragment, null, render(useTooltip(options)));
@@ -139,3 +157,5 @@ };
   delayMilliseconds: PropTypes.number,
-  isVisible: PropTypes.bool
+  id: PropTypes.string,
+  isVisible: PropTypes.bool,
+  triggerRef: PropTypes.any.isRequired
 };
@@ -142,0 +162,0 @@

dist/index.esm.js

@@ -8,20 +8,20 @@ /**
 
-import React, { useState, useMemo, useRef, useEffect } from 'react';
-import { useUIDSeed } from 'react-uid';
-import { composeEventHandlers, KEYS } from '@zendeskgarden/container-utilities';
+import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { useId, composeEventHandlers, KEYS } from '@zendeskgarden/container-utilities';
 import PropTypes from 'prop-types';
 
-const useTooltip = function (_temp) {
+const useTooltip = _ref => {
   let {
     delayMilliseconds = 500,
     id,
-    isVisible
-  } = _temp === void 0 ? {} : _temp;
+    isVisible,
+    triggerRef
+  } = _ref;
+  const _id = useId(id);
   const [visibility, setVisibility] = useState(isVisible);
-  const seed = useUIDSeed();
-  const _id = useMemo(() => id || seed(`tooltip_${'1.0.20'}`), [id, seed]);
+  const [isTriggerPopupExpanded, setIsTriggerPopupExpanded] = useState(false);
   const isMounted = useRef(false);
   const openTooltipTimeoutId = useRef();
   const closeTooltipTimeoutId = useRef();
-  const openTooltip = function (delayMs) {
+  const openTooltip = useCallback(function (delayMs) {
     if (delayMs === void 0) {
@@ -37,4 +37,4 @@ delayMs = delayMilliseconds;
     openTooltipTimeoutId.current = Number(timerId);
-  };
-  const closeTooltip = function (delayMs) {
+  }, [delayMilliseconds]);
+  const closeTooltip = useCallback(function (delayMs) {
     if (delayMs === void 0) {
@@ -50,3 +50,3 @@ delayMs = delayMilliseconds;
     closeTooltipTimeoutId.current = Number(timerId);
-  };
+  }, [delayMilliseconds]);
   useEffect(() => {
@@ -64,3 +64,20 @@ isMounted.current = true;
   }, [closeTooltipTimeoutId, openTooltipTimeoutId]);
-  const getTriggerProps = function (_temp2) {
+  useEffect(() => {
+    const triggerElement = triggerRef?.current?.getAttribute('aria-haspopup') === 'true' ? triggerRef.current : null;
+    const updateTriggerPopupExpandedState = () => {
+      if (triggerElement) {
+        setIsTriggerPopupExpanded(triggerElement.getAttribute('aria-expanded') === 'true');
+      }
+    };
+    const mutationObserver = new MutationObserver(updateTriggerPopupExpandedState);
+    if (triggerElement) {
+      mutationObserver.observe(triggerElement, {
+        attributes: true,
+        attributeFilter: ['aria-expanded']
+      });
+    }
+    updateTriggerPopupExpandedState();
+    return () => mutationObserver.disconnect();
+  }, [triggerRef]);
+  const getTriggerProps = useCallback(function (_temp) {
     let {
@@ -74,3 +91,3 @@ tabIndex = 0,
       ...other
-    } = _temp2 === void 0 ? {} : _temp2;
+    } = _temp === void 0 ? {} : _temp;
     return {
@@ -89,7 +106,8 @@ tabIndex,
       'data-garden-container-id': 'containers.tooltip',
-      'data-garden-container-version': '1.0.20',
+      'data-garden-container-version': '2.0.0',
+      ref: triggerRef,
       ...other
     };
-  };
-  const getTooltipProps = function (_temp3) {
+  }, [_id, closeTooltip, openTooltip, triggerRef, visibility]);
+  const getTooltipProps = useCallback(function (_temp2) {
     let {
@@ -100,3 +118,3 @@ role = 'tooltip',
       ...other
-    } = _temp3 === void 0 ? {} : _temp3;
+    } = _temp2 === void 0 ? {} : _temp2;
     return {
@@ -106,9 +124,9 @@ role,
       onMouseLeave: composeEventHandlers(onMouseLeave, () => closeTooltip()),
-      'aria-hidden': !visibility,
+      'aria-hidden': !visibility || isTriggerPopupExpanded,
       id: _id,
       ...other
     };
-  };
-  return {
-    isVisible: visibility,
+  }, [_id, closeTooltip, openTooltip, visibility, isTriggerPopupExpanded]);
+  return useMemo(() => ({
+    isVisible: visibility && !isTriggerPopupExpanded,
     getTooltipProps,
@@ -118,11 +136,11 @@ getTriggerProps,
     closeTooltip
-  };
+  }), [closeTooltip, getTooltipProps, getTriggerProps, openTooltip, visibility, isTriggerPopupExpanded]);
 };
 
-const TooltipContainer = _ref => {
-  let {
+const TooltipContainer = props => {
+  const {
     children,
     render = children,
     ...options
-  } = _ref;
+  } = props;
   return React.createElement(React.Fragment, null, render(useTooltip(options)));
@@ -137,5 +155,7 @@ };
   delayMilliseconds: PropTypes.number,
-  isVisible: PropTypes.bool
+  id: PropTypes.string,
+  isVisible: PropTypes.bool,
+  triggerRef: PropTypes.any.isRequired
 };
 
 export { TooltipContainer, useTooltip };

dist/typings/index.d.ts

@@ -7,3 +7,4 @@ /**
  */
-export { useTooltip, type IUseTooltipProps, type IUseTooltipReturnValue } from './useTooltip';
-export { TooltipContainer, type ITooltipContainerProps } from './TooltipContainer';
+export { useTooltip } from './useTooltip';
+export { TooltipContainer } from './TooltipContainer';
+export type { ITooltipContainerProps, IUseTooltipProps, IUseTooltipReturnValue } from './types';

dist/typings/TooltipContainer.d.ts

@@ -7,10 +7,4 @@ /**
  */
-import React from 'react';
-import { IUseTooltipProps, IUseTooltipReturnValue } from './useTooltip';
-export interface ITooltipContainerProps extends IUseTooltipProps {
-    /** A render prop function which receives tooltip state and prop getters */
-    render?: (options: IUseTooltipReturnValue) => React.ReactNode;
-    /** A children render prop function which receives tooltip state and prop getters */
-    children?: (options: IUseTooltipReturnValue) => React.ReactNode;
-}
-export declare const TooltipContainer: React.FunctionComponent<ITooltipContainerProps>;
+import { FC } from 'react';
+import { ITooltipContainerProps } from './types';
+export declare const TooltipContainer: FC<ITooltipContainerProps>;

dist/typings/useTooltip.d.ts

@@ -7,16 +7,3 @@ /**
  */
-export interface IUseTooltipProps {
-    /** Milliseconds of delay before open/close of tooltip is initiated  */
-    delayMilliseconds?: number;
-    id?: string;
-    /** Control visibility state of the tooltip */
-    isVisible?: boolean;
-}
-export interface IUseTooltipReturnValue {
-    isVisible?: boolean;
-    getTooltipProps: <T>(options?: T) => T & React.HTMLProps<any>;
-    getTriggerProps: <T>(options?: T) => T & React.HTMLProps<any>;
-    openTooltip: (delayMs?: number) => void;
-    closeTooltip: (delayMs?: number) => void;
-}
-export declare const useTooltip: ({ delayMilliseconds, id, isVisible }?: IUseTooltipProps) => IUseTooltipReturnValue;
+import { IUseTooltipProps, IUseTooltipReturnValue } from './types';
+export declare const useTooltip: <T extends HTMLElement = HTMLElement>({ delayMilliseconds, id, isVisible, triggerRef }: IUseTooltipProps<T>) => IUseTooltipReturnValue;

package.json

 {
   "name": "@zendeskgarden/container-tooltip",
-  "version": "1.0.20",
+  "version": "2.0.0",
   "description": "Containers relating to tooltip in the Garden Design System",
@@ -24,4 +24,3 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.8.4",
-    "@zendeskgarden/container-utilities": "^2.0.2",
-    "react-uid": "^2.2.0"
+    "@zendeskgarden/container-utilities": "^2.0.2"
   },
@@ -33,2 +32,5 @@ "peerDependencies": {
   },
+  "devDependencies": {
+    "@zendeskgarden/container-menu": "^1.0.0"
+  },
   "keywords": [
@@ -47,3 +49,3 @@ "a11y",
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d34489e45207cf622d2e7d4b39d275d8f06edba6"
+  "gitHead": "0cdb148876f9396ef9d73568d8f2baa5532c8100"
 }

No alert changes

Improved metrics

Total package byte prevSize

26314

14.81%

Dependency count

5

-16.67%

Number of package files

9

12.5%

Lines of code

366

22%

Worsened metrics

Dev dependency count

1

Infinity%

Dependency changes

• - Removed

  react-uid@^2.2.0

• - Removed

  react-uid@2.4.0
  (transitive)

• - Removed

  tslib@2.8.1
  (transitive)