@planningcenter/tapestry-react 2.6.0-rc.9 → 2.6.0

package/dist/cjs/system/utils.js

@@ -24,7 +24,7 @@ var _react2 = require("@emotion/react");
 
 var _polished = require("polished");
 
-var _lodash = require("lodash");
+var _get = _interopRequireDefault(require("lodash/get"));
 
 var _colors = require("./colors");
 
@@ -161,7 +161,7 @@ function getForegroundColor(color) {
 
 function useThemeValue(path, defaultValue) {
   var userTheme = (0, _react.useContext)(_react2.ThemeContext);
-  return path ? (0, _lodash.get)(userTheme, path, defaultValue || (0, _lodash.get)(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
+  return path ? (0, _get["default"])(userTheme, path, defaultValue || (0, _get["default"])(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
 }
 
 function useThemeProps(path, props) {

package/dist/cjs/utils.js

@@ -46,7 +46,7 @@ var _react = require("react");
 
 var _tabbable = require("tabbable");
 
-var _lodash = require("lodash");
+var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -785,11 +785,11 @@ function createCSSProperty(key, value) {
     createdCSSProperties.add(key);
   }
 
-  return "--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value);
+  return "--" + (0, _kebabCase["default"])(key) + "-" + (0, _kebabCase["default"])(value);
 }
 
 function getCSSProperty(key, value) {
-  return key && value ? "var(--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value) + ")" : undefined;
+  return key && value ? "var(--" + (0, _kebabCase["default"])(key) + "-" + (0, _kebabCase["default"])(value) + ")" : undefined;
 }
 
 function objectToCSSProperties(themeKey, props) {

package/dist/esm/Button/Button.js

@@ -210,6 +210,13 @@ export function Button(_ref) {
 
   if (to) {
     restProps['href'] = to;
+  } // remove `type` if either `to` or `href` is specified
+
+
+  if (to || restProps.href) {
+    buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
+      type: null
+    });
   } // apply stroke defaults and higher z-index when hovering to show outline in group properly
 
 
@@ -244,7 +251,7 @@ export function Button(_ref) {
       restProps = mergeProps(restProps, wrapperProps);
     }
 
-    if (type && restProps.as && restProps.as !== "button") {
+    if (buttonProps.type && restProps.as && restProps.as !== "button") {
       console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }

package/dist/esm/Button/Button.test.js

@@ -1,25 +1,83 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { Button } from './Button';
+
+var _ref = /*#__PURE__*/React.createElement(Button, null);
+
+it("should render as <button> with type=\"button\" by default", function () {
+  var _render = render(_ref),
+      container = _render.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('button');
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+});
+
+it("should render as <button> with type=\"submit\"", function () {
+  var _render2 = render(_ref2),
+      container = _render2.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('submit');
+});
 it("should render title", function () {
   var title = 'Hello';
 
-  var _render = render( /*#__PURE__*/React.createElement(Button, {
+  var _render3 = render( /*#__PURE__*/React.createElement(Button, {
     title: title
   })),
-      getByText = _render.getByText;
+      getByText = _render3.getByText;
 
   getByText(title);
 });
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, {
+  to: "#"
+});
+
+it("should render <a> without a type if \"to\" is provided", function () {
+  var _render4 = render(_ref3),
+      container = _render4.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(Button, {
+  href: "#"
+});
+
+it("should render <a> without a type if \"href\" is provided", function () {
+  var _render5 = render(_ref4),
+      container = _render5.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(Button, {
+  to: "#"
+});
+
+it("should render <a> with \"href\" if \"to\" is specifed", function () {
+  var _render6 = render(_ref5),
+      container = _render6.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('href')).toEqual('#');
+});
 it("should render href and external link values", function () {
   var title = 'Hello';
 
-  var _render2 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render7 = render( /*#__PURE__*/React.createElement(Button, {
     external: true,
     title: title,
     to: "https://www.planningcenter.com"
   })),
-      getByText = _render2.getByText;
+      getByText = _render7.getByText;
 
   var button = getByText(title);
   expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -29,20 +87,20 @@ it("should render href and external link values", function () {
 it("should call onClick when clicked or Enter or Space key is pressed", function () {
   var onClick = jest.fn();
 
-  var _render3 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render8 = render( /*#__PURE__*/React.createElement(Button, {
     onClick: onClick
   })),
-      container = _render3.container;
+      container = _render8.container;
 
   fireEvent.click(container.firstChild);
   expect(onClick).toHaveBeenCalledTimes(1);
 });
 
-var _ref = /*#__PURE__*/React.createElement(Button, null);
+var _ref6 = /*#__PURE__*/React.createElement(Button, null);
 
 it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
-  var _render4 = render(_ref),
-      container = _render4.container;
+  var _render9 = render(_ref6),
+      container = _render9.container;
 
   fireEvent.keyDown(container.firstChild, {
     key: 'Enter'

package/dist/esm/DataTable/components/BodyRow.js

@@ -29,8 +29,8 @@ function BodyRow(_ref) {
 
   var props = _objectSpread({
     ref: innerRef,
-    onClick: onRowClick && function () {
-      return onRowClick(rowData, rowIndex);
+    onClick: function onClick(event) {
+      return onRowClick && onRowClick(rowData, rowIndex, event);
     },
     onMouseEnter: bindKeyboardShortcuts,
     onMouseLeave: unbindKeyboardShortcuts,

package/dist/esm/DataTable/hooks/useCollapsibleRows.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { createContext, useCallback, useContext, useEffect } from 'react';
 import useConstant from '../../hooks/useConstant';
-import create from 'zustand';
+import { create } from 'zustand';
 import { range } from '../../utils';
 export var CollapsibleRowsContext = /*#__PURE__*/createContext(null);
 export function useCollapsibleRowsStore(selector) {

package/dist/esm/Dropdown/Dropdown.js

@@ -16,7 +16,7 @@ import Menu from '../Menu';
 import Popover from '../Popover';
 import { cloneChildren, generateId } from '../utils';
 import Item, { ITEM_DISPLAY_NAME } from './Item';
-import Link, { LINK_DISPLAY_NAME, LINK_DATA } from './Link';
+import Link, { LINK_DISPLAY_NAME } from './Link';
 
 var Dropdown = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Dropdown, _Component);
@@ -67,7 +67,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         _this.popover.focusAnchor();
       }
 
-      if (data === LINK_DATA) {
+      if (node.tagName === 'A' && event.type !== 'click') {
         node.click();
       } else if (_this.props.onSelect) {
         _this.props.onSelect(data);
@@ -96,7 +96,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         keepInView = _this$props.keepInView,
         lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
         matchWidths = _this$props.matchWidths,
-        onClick = _this$props.onClick,
+        _onClick = _this$props.onClick,
         onClose = _this$props.onClose,
         onKeyDown = _this$props.onKeyDown,
         onOpen = _this$props.onOpen,
@@ -179,12 +179,14 @@ var Dropdown = /*#__PURE__*/function (_Component) {
               }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
                 name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                 size: 'sm'
-              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick() {
+              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick(event) {
                 _this2.togglePopover();
 
                 if (!isPopoverOpen) {
                   _this2.popover.focusAnchor();
                 }
+
+                _onClick && _onClick(event);
               }, _objectSpread2.onKeyDown = function onKeyDown(event) {
                 anchorProps.onKeyDown(event);
 

package/dist/esm/Dropdown/Dropdown.test.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
-import { noop } from 'lodash';
+import noop from 'lodash/noop';
 import { Box, Button, Text, ThemeProvider } from '..';
 import Dropdown from './Dropdown';
 

package/dist/esm/Dropdown/Link.js

@@ -6,7 +6,6 @@ import React, { Component } from 'react';
 import { ItemListItem } from '../ItemList';
 import Menu from '../Menu';
 export var LINK_DISPLAY_NAME = 'Dropdown.Link';
-export var LINK_DATA = 'link';
 
 var Link = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Link, _Component);
@@ -33,7 +32,7 @@ var Link = /*#__PURE__*/function (_Component) {
     }
 
     return /*#__PURE__*/React.createElement(ItemListItem, {
-      data: LINK_DATA,
+      data: "link",
       text: text,
       disabled: disabled,
       index: index

package/dist/esm/Input/InputLabel.js

@@ -1,79 +1,56 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React, { Component } from 'react';
+import React, { useCallback, useRef, useEffect } from 'react';
 import { getColor } from '../system';
 import Text from '../Text';
+import { useThemeProps } from '../system';
 import { inputs, inputLabels } from './utils';
 
-var InputLabel = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(InputLabel, _Component);
+function InputLabel(_ref) {
+  var controls = _ref.controls,
+      state = _ref.state,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["controls", "state"]);
 
-  function InputLabel() {
-    var _this;
+  var _useThemeProps = useThemeProps('inputLabel', restProps),
+      themeProps = _extends({}, _useThemeProps);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var input = useRef(null);
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+  if (controls) {
+    themeProps.id = controls + "-label";
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "focusInput", function () {
-      _this.input && _this.input.focus();
-    });
+  if (state) {
+    themeProps.color = getColor(state);
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOver", function () {
-      _this.input && _this.input.setState({
-        isHovered: true
-      });
+  useEffect(function () {
+    input.current = inputs[controls];
+    inputLabels[controls] = true;
+    return function () {
+      delete inputLabels[controls];
+    };
+  }, []);
+  var focusInput = useCallback(function () {
+    input.current && input.current.focus();
+  }, [input]);
+  var handleMouseOver = useCallback(function () {
+    input.current && input.current.setState({
+      isHovered: true
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOut", function () {
-      _this.input && _this.input.setState({
-        isHovered: false
-      });
+  }, [input]);
+  var handleMouseOut = useCallback(function () {
+    input.current && input.current.setState({
+      isHovered: false
     });
-
-    return _this;
-  }
-
-  var _proto = InputLabel.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.input = inputs[this.props.controls];
-    inputLabels[this.props.controls] = true;
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    delete inputLabels[this.props.controls];
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        controls = _this$props.controls,
-        state = _this$props.state,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["controls", "state"]);
-
-    if (controls) {
-      restProps.id = controls + "-label";
-    }
-
-    if (state) {
-      restProps.color = getColor(state);
-    }
-
-    return /*#__PURE__*/React.createElement(Text, _extends({
-      as: "label",
-      onMouseOver: this.handleMouseOver,
-      onMouseOut: this.handleMouseOut,
-      onClick: this.focusInput
-    }, restProps));
-  };
-
-  return InputLabel;
-}(Component);
+  }, [input]);
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "label",
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onClick: focusInput
+  }, themeProps));
+}
 
 InputLabel.displayName = 'Input.InputLabel';
 export default InputLabel;

package/dist/esm/Modal/Modal.js

@@ -5,6 +5,7 @@ import Box from '../Box';
 import Scrim from '../Scrim';
 import { useDocumentEvent } from '../hooks';
 import { trapFocus } from '../utils';
+import { useThemeProps } from '../system';
 
 function Modal(_ref) {
   var children = _ref.children,
@@ -13,6 +14,11 @@ function Modal(_ref) {
       open = _ref.open,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "closeOnOutsideClick", "onRequestClose", "open"]);
 
+  var _useThemeProps = useThemeProps('modal', restProps),
+      _useThemeProps$scrimP = _useThemeProps.scrimProps,
+      scrimProps = _useThemeProps$scrimP === void 0 ? {} : _useThemeProps$scrimP,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["scrimProps"]);
+
   var modalRef = useRef(null);
   useLayoutEffect(function () {
     if (open) {
@@ -29,22 +35,22 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Scrim, {
+  return /*#__PURE__*/React.createElement(Scrim, _extends({
     alignment: "center",
     onMouseDown: function onMouseDown(event) {
       if (closeOnOutsideClick && event.currentTarget === event.target) {
         onRequestClose();
       }
     }
-  }, /*#__PURE__*/React.createElement(Box, _extends({
+  }, scrimProps), /*#__PURE__*/React.createElement(Box, _extends({
+    backgroundColor: "surface",
     innerRef: modalRef,
-    width: "100%",
+    margin: 4,
     maxWidth: 60,
     padding: 2,
-    margin: 4,
-    backgroundColor: "surface",
-    radius: 3
-  }, restProps), children));
+    radius: 3,
+    width: "100%"
+  }, themeProps), children));
 }
 
 export default Modal;

package/dist/esm/Modal/Modal.test.js

@@ -5,7 +5,7 @@ import '@testing-library/jest-dom/extend-expect';
 import Dropdown from '../Dropdown';
 import Select from '../Select';
 import { Button, Heading, Modal, ThemeProvider } from '../';
-import { noop } from 'lodash';
+import noop from 'lodash/noop';
 
 var _ref = /*#__PURE__*/React.createElement(Heading, {
   "data-testid": "modal-header"

package/dist/esm/Popover/Popover.js

@@ -12,6 +12,7 @@ import Portal from '../Portal';
 import { lockScroll } from '../utils';
 import rewireTabOrder from './rewireTabOrder';
 import { getFixedParent, getModifiers } from './utils';
+import { useThemeProps } from '../system';
 export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var anchorElement = _ref.anchorElement,
       _ref$as = _ref.as,
@@ -34,6 +35,11 @@ export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       shouldFlip = _ref$shouldFlip === void 0 ? false : _ref$shouldFlip,
       restProps = _objectWithoutPropertiesLoose(_ref, ["anchorElement", "as", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "offset", "open", "onKeyDown", "onRequestClose", "placement", "relativeTo", "renderTo", "shouldFlip"]);
 
+  var _useThemeProps = useThemeProps('popover', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["zIndex"]);
+
   var anchorRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var unlockScroll = React.useRef(null);
@@ -194,8 +200,8 @@ export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     // ideally this should be pulled out to something like ThemeProvider for predictable z indices
     style: {
-      zIndex: 10000
+      zIndex: zIndex
     }
-  }, restProps)) : null);
+  }, themeProps)) : null);
 });
 Popover.displayName = 'Popover';

package/dist/esm/Scrim/Scrim.js

@@ -1,24 +1,35 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import * as React from 'react';
 import StackView from '../StackView';
-var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
+import { useThemeProps } from '../system';
+var Scrim = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+  var ref = _ref2.ref,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["ref"]);
+
   React.useLayoutEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {
       document.body.style.overflow = '';
     };
   }, []);
+
+  var _useThemeProps = useThemeProps('scrim', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["zIndex"]);
+
   return /*#__PURE__*/React.createElement(StackView, _extends({
-    innerRef: props.ref,
+    innerRef: ref,
     position: "fixed",
     top: 0,
     right: 0,
     bottom: 0,
     left: 0,
-    zIndex: 10000,
+    zIndex: zIndex,
     overflow: "auto" // @ts-ignore
     ,
     backgroundColor: "hsla(0,0%,0%,0.4)"
-  }, props));
+  }, themeProps));
 });
 export { Scrim };

package/dist/esm/Table/Table.js

@@ -10,7 +10,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { PureComponent, Children, Fragment } from 'react';
 import { Global } from '@emotion/react';
-import { camelCase, snakeCase } from 'lodash';
+import camelCase from 'lodash/camelCase';
+import snakeCase from 'lodash/snakeCase';
 import Button from '../Button';
 import DragDrop from '../DragDrop';
 import Pagination from '../Pagination';

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -10,7 +10,7 @@ import React, { useLayoutEffect, useState } from 'react';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { Box } from '../Box';
 import defaultTheme from '../system/default-theme';
 import { flattenPalette } from '../system';

package/dist/esm/TimeField/TimeField.js

@@ -208,7 +208,7 @@ var TimeField = /*#__PURE__*/function (_Component) {
       highlightOnInteraction: true,
       value: this.state.meridiem,
       grow: 0,
-      width: 3,
+      width: "2em",
       textAlign: "center",
       "aria-label": "AM/PM",
       onChange: noop // prevent React warnings

package/dist/esm/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { Children, cloneElement, forwardRef, useRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
+import React, { Children, cloneElement, forwardRef, useRef, useState, useImperativeHandle, useEffect } from 'react';
 import mitt from 'mitt';
 import Popover from '../Popover';
 import { composeEvents, pageViewChange } from '../utils';
@@ -41,23 +41,22 @@ function Tooltip(props, ref) {
       triggerOnHover = _useThemeProps$trigge2 === void 0 ? true : _useThemeProps$trigge2,
       childProps = _objectWithoutPropertiesLoose(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
 
-  var isPageInView = true;
-  var isFocused = false;
-  var isMouseDown = false;
+  var isPageInView = useRef(true);
+  var isMouseDown = useRef(false);
   var openTimeoutId = useRef(null);
-  var closeTimeoutId = useRef(null); // prevents tooltips showing when focused and navigating back to a page after leaving
-
-  var cleanupPageViewChange = useCallback(pageViewChange(function (inView) {
-    return setTimeout(function () {
-      return isPageInView = inView;
-    });
-  }));
+  var closeTimeoutId = useRef(null);
 
   var _useState = useState(defaultOpen),
       isPopoverOpen = _useState[0],
       setIsPopoverOpen = _useState[1];
 
   useEffect(function () {
+    // prevents tooltips showing when focused and navigating back to a page after leaving
+    var cleanupPageViewChange = pageViewChange(function (inView) {
+      return setTimeout(function () {
+        return isPageInView.current = inView;
+      });
+    });
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
@@ -100,7 +99,8 @@ function Tooltip(props, ref) {
       close();
     }
   }, [triggerOnHover]);
-  var createOpenTimeout = useCallback(function () {
+
+  var createOpenTimeout = function createOpenTimeout() {
     clearGlobalTimeout();
 
     if (openTimeoutId.current === null) {
@@ -114,8 +114,9 @@ function Tooltip(props, ref) {
         }, instantDelay ? 0 : openDelay);
       }
     }
-  });
-  var createCloseTimeout = useCallback(function () {
+  };
+
+  var createCloseTimeout = function createCloseTimeout() {
     startGlobalTimeout();
 
     if (closeTimeoutId.current === null) {
@@ -125,19 +126,23 @@ function Tooltip(props, ref) {
         return close();
       }, closeDelay);
     }
-  });
-  var handleFocus = useCallback(function () {
-    if (isPageInView && !isMouseDown) {
+  };
+
+  var handleFocus = function handleFocus() {
+    if (isPageInView.current && !isMouseDown.current) {
       open();
     }
-  });
-  var handleMouseDown = useCallback(function () {
-    isMouseDown = true;
+  };
+
+  var handleMouseDown = function handleMouseDown() {
+    isMouseDown.current = true;
     close();
-  });
-  var handleMouseUp = useCallback(function () {
-    isMouseDown = false;
-  });
+  };
+
+  var handleMouseUp = function handleMouseUp() {
+    isMouseDown.current = false;
+  };
+
   var child = Children.only(children);
   var _child$props = child.props,
       onFocus = _child$props.onFocus,

package/dist/esm/system/utils.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useContext, useCallback } from 'react';
 import { ThemeContext } from '@emotion/react';
 import { darken, getLuminance, lighten, parseToRgb } from 'polished';
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { getColor } from './colors';
 import defaultTheme from './default-theme';
 export var spacing = 8;