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

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -20,7 +20,7 @@ var _react2 = require("@emotion/react");
 
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 
-var _lodash = require("lodash");
+var _merge = _interopRequireDefault(require("lodash/merge"));
 
 var _Box = require("../Box");
 
@@ -44,6 +44,15 @@ var cache = (0, _cache["default"])({
   key: 'tapestry-react'
 });
 exports.cache = cache;
+
+function mergeIntoNewObject() {
+  for (var _len = arguments.length, merges = new Array(_len), _key = 0; _key < _len; _key++) {
+    merges[_key] = arguments[_key];
+  }
+
+  return _merge["default"].apply(void 0, [{}].concat(merges));
+}
+
 var themeStorage = {
   get: function get() {
     return window.localStorage.getItem(STORAGE_KEY);
@@ -70,12 +79,12 @@ function mergeThemes(a, b) {
 
   return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
     button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
-      themes: (0, _lodash.merge)(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
+      themes: mergeIntoNewObject(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
     }),
-    colors: (0, _lodash.merge)((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
+    colors: mergeIntoNewObject((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
     spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
-      sizes: (0, _lodash.merge)(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
-      thickness: (0, _lodash.merge)(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
+      sizes: mergeIntoNewObject(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
+      thickness: mergeIntoNewObject(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
     })
   });
 }

package/dist/cjs/ThemeProvider/styles.js

@@ -35,7 +35,7 @@ var setRootStyles = function setRootStyles(themeId, styles) {
 exports.setRootStyles = setRootStyles;
 var defaultColorProperties = (0, _utils.objectToCSSProperties)('colors', (0, _system.flattenPalette)(_system.defaultTheme.colors));
 exports.defaultColorProperties = defaultColorProperties;
-var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset * {\n  appearance: none;\n  background-color: transparent;\n  border-width: 0px;\n  border-style: solid;\n  border-color: transparent;\n  box-sizing: border-box;\n  color: inherit;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: auto;\n  font-weight: 400;\n  margin: 0px;\n  min-height: 0px;\n  min-width: 0px;\n  padding: 0px;\n  text-decoration: none;\n}\n\n.tapestry-react-reset *::-moz-focus-inner {\n  border: none;\n  padding: 0px;\n}\n\n.tapestry-react-reset *:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  background-color: transparent;\n  border-width: 0px;\n  border-style: solid;\n  border-color: transparent;\n  box-sizing: border-box;\n  color: inherit;\n  box-sizing: border-box;\n  flex-grow: 0;\n  flex-shrink: 0;\n  flex-basis: auto;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  margin-top: 0;\n  margin-right: 0;\n  margin-bottom: 0;\n  margin-left: 0;\n  min-width: 0px;\n  min-height: 0px;\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  text-decoration: none;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding-top: 0;\n  padding-right: 0;\n  padding-bottom: 0;\n  padding-left: 0;\n  border: none;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
 ).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page

package/dist/cjs/TimeField/TimeField.js

@@ -214,7 +214,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: _utils.noop // prevent React warnings

package/dist/cjs/Tooltip/Tooltip.js

@@ -57,23 +57,22 @@ function Tooltip(props, ref) {
       triggerOnHover = _useThemeProps$trigge2 === void 0 ? true : _useThemeProps$trigge2,
       childProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
 
-  var isPageInView = true;
-  var isFocused = false;
-  var isMouseDown = false;
+  var isPageInView = (0, _react.useRef)(true);
+  var isMouseDown = (0, _react.useRef)(false);
   var openTimeoutId = (0, _react.useRef)(null);
-  var closeTimeoutId = (0, _react.useRef)(null); // prevents tooltips showing when focused and navigating back to a page after leaving
-
-  var cleanupPageViewChange = (0, _react.useCallback)((0, _utils.pageViewChange)(function (inView) {
-    return setTimeout(function () {
-      return isPageInView = inView;
-    });
-  }));
+  var closeTimeoutId = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(defaultOpen),
       isPopoverOpen = _useState[0],
       setIsPopoverOpen = _useState[1];
 
   (0, _react.useEffect)(function () {
+    // prevents tooltips showing when focused and navigating back to a page after leaving
+    var cleanupPageViewChange = (0, _utils.pageViewChange)(function (inView) {
+      return setTimeout(function () {
+        return isPageInView.current = inView;
+      });
+    });
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
@@ -116,7 +115,8 @@ function Tooltip(props, ref) {
       close();
     }
   }, [triggerOnHover]);
-  var createOpenTimeout = (0, _react.useCallback)(function () {
+
+  var createOpenTimeout = function createOpenTimeout() {
     clearGlobalTimeout();
 
     if (openTimeoutId.current === null) {
@@ -130,8 +130,9 @@ function Tooltip(props, ref) {
         }, instantDelay ? 0 : openDelay);
       }
     }
-  });
-  var createCloseTimeout = (0, _react.useCallback)(function () {
+  };
+
+  var createCloseTimeout = function createCloseTimeout() {
     startGlobalTimeout();
 
     if (closeTimeoutId.current === null) {
@@ -141,19 +142,22 @@ function Tooltip(props, ref) {
         return close();
       }, closeDelay);
     }
-  });
-  var handleFocus = (0, _react.useCallback)(function () {
-    if (isPageInView && !isMouseDown) {
+  };
+
+  var handleFocus = function handleFocus() {
+    if (isPageInView.current && !isMouseDown.current) {
       open();
     }
-  });
-  var handleMouseDown = (0, _react.useCallback)(function () {
-    isMouseDown = true;
+  };
+
+  var handleMouseDown = function handleMouseDown() {
+    isMouseDown.current = true;
     close();
-  });
-  var handleMouseUp = (0, _react.useCallback)(function () {
-    isMouseDown = false;
-  });
+  };
+
+  var handleMouseUp = function handleMouseUp() {
+    isMouseDown.current = false;
+  };
 
   var child = _react.Children.only(children);
 

package/dist/cjs/system/split-styles.js

@@ -46,7 +46,7 @@ function SplitStyles(_ref) {
   }
 
   return _objectSpread(_objectSpread({}, restProps), {}, {
-    className: className,
+    className: className ? "tapestry-react-reset " + className : "tapestry-react-reset",
     css: function css(theme) {
       var propStyles = {};
 

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/DataTable.js

@@ -182,7 +182,7 @@ var DataTable = function DataTable(props) {
     style: isLoadingOrEmpty ? {
       display: 'none'
     } : undefined,
-    className: css({
+    className: "tapestry-react-reset " + css({
       position: 'relative'
     })
   }, /*#__PURE__*/React.createElement("div", {
@@ -203,7 +203,7 @@ var DataTable = function DataTable(props) {
       column: column,
       columnIndex: columnIndex,
       columnSort: columnSort,
-      className: css([].concat(cellVariantClassName, [column.css]))
+      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
     });
   }))), bodyToRender, hasFooterColumns && /*#__PURE__*/React.createElement("div", {
     ref: footerRef,
@@ -221,7 +221,7 @@ var DataTable = function DataTable(props) {
       key: columnIndex,
       role: "cell",
       ref: getColumnRef(columnIndex + "." + (data.length + 1)),
-      className: css([].concat(cellVariantClassName, [column.css]))
+      className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
     }, typeof column.footer === 'string' || /*#__PURE__*/React.isValidElement(column.footer) ? column.footer : column.footer ? /*#__PURE__*/React.createElement(column.footer, {
       columnIndex: columnIndex
     }) : null);

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/components/BodyRows.js

@@ -42,7 +42,7 @@ function BodyRows(_ref) {
           ref: getColumnRef(columnIndex + "." + (rowIndex + 1)) // offset by 1 to account for header row
           ,
           role: "cell",
-          className: css([].concat(cellVariantStyles, [column.css]))
+          className: "tapestry-react-reset " + css([].concat(cellVariantStyles, [column.css]))
         }, getCell(column.cell, {
           columnIndex: columnIndex,
           rowData: rowData,
@@ -68,7 +68,7 @@ function BodyRows(_ref) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: css(rowVariantClassName)
+      className: "tapestry-react-reset " + css(rowVariantClassName)
     }, getRowLinkProps({
       getRowLink: getRowLink,
       data: rowData,

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

@@ -58,7 +58,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       rowIndex: rowIndex,
       keyboardShortcuts: keyboardShortcuts,
       onRowClick: onRowClick,
-      className: css(rowVariantClassName)
+      className: "tapestry-react-reset " + css(rowVariantClassName)
     }, getRowLinkProps({
       getRowLink: getRowLink,
       data: rowData,
@@ -77,7 +77,7 @@ var BodySubRows = function BodySubRows(_ref2) {
       return /*#__PURE__*/React.createElement("div", {
         key: columnIndex,
         ref: getColumnRef(columnIndex + "." + (parentRowIndex + 1) + "." + rowIndex),
-        className: css([].concat(cellVariantClassName, [column.css]))
+        className: "tapestry-react-reset " + css([].concat(cellVariantClassName, [column.css]))
       }, getCell(column.subCell !== undefined ? column.subCell : column.cell, {
         columnIndex: columnIndex,
         rowData: rowData,

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

@@ -85,19 +85,19 @@ function CheckboxCell(_ref) {
     onKeyDown: function onKeyDown(event) {
       return event.key === ' ' && handleChange(event);
     },
-    className: "tapestry-react-Checkbox",
+    className: "tapestry-react-reset tapestry-react-Checkbox",
     css: cssStyles
   }, /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.fill,
-    className: "tapestry-react-Checkbox-Fill",
+    className: "tapestry-react-reset tapestry-react-Checkbox-Fill",
     fill: checked || indeterminate ? 'primary' : 'surfaceTertiary',
     stroke: checked || indeterminate ? 'primary' : 'separatorSecondary'
   }), /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.minus,
-    className: "tapestry-react-Checkbox-Minus"
+    className: "tapestry-react-reset tapestry-react-Checkbox-Fill"
   }), /*#__PURE__*/React.createElement(Icon.Path, {
     name: iconPaths.checked,
-    className: "tapestry-react-Checkbox-Checked"
+    className: "tapestry-react-reset tapestry-react-Checkbox-Checked"
   }));
 }
 

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;