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

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';
@@ -20,6 +20,15 @@ var STORAGE_KEY = 'tapestry-react-theme';
 export var cache = createCache({
   key: 'tapestry-react'
 });
+
+function mergeIntoNewObject() {
+  for (var _len = arguments.length, merges = new Array(_len), _key = 0; _key < _len; _key++) {
+    merges[_key] = arguments[_key];
+  }
+
+  return merge.apply(void 0, [{}].concat(merges));
+}
+
 export var themeStorage = {
   get: function get() {
     return window.localStorage.getItem(STORAGE_KEY);
@@ -44,12 +53,12 @@ function mergeThemes(a, b) {
 
   return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
     button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
-      themes: 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: merge(flattenPalette(a.colors || {}), flattenPalette(b.colors || {})),
+    colors: mergeIntoNewObject(flattenPalette(a.colors || {}), flattenPalette(b.colors || {})),
     spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
-      sizes: merge(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
-      thickness: 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/esm/ThemeProvider/styles.js

@@ -24,7 +24,7 @@ export var setRootStyles = function setRootStyles(themeId, styles) {
   sheet.insertRule(styleString, 0);
 };
 export var defaultColorProperties = objectToCSSProperties('colors', flattenPalette(defaultTheme.colors));
-export 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
+export 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/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/split-styles.js

@@ -37,7 +37,7 @@ export default 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/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;

package/dist/esm/utils.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { Children, cloneElement } from 'react';
 import { tabbable } from 'tabbable';
-import { kebabCase } from 'lodash';
+import kebabCase from 'lodash/kebabCase';
 /**
  * Returns true if user platform is an iOS device
  * https://stackoverflow.com/a/9039885/1461204

package/dist/types/Button/Button.d.ts

@@ -60,6 +60,10 @@ declare type ButtonProps = {
      * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
      */
     to?: string;
+    /**
+     * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
+     */
+    href?: string;
     /**
      * Wraps button in a [`<Tooltip />`](./tooltip). Accepts any valid Tooltip props.
      */

package/dist/types/ThemeProvider/ThemeProvider.d.ts

@@ -8,11 +8,11 @@ export declare const themeStorage: {
     set: (value: any) => void;
 };
 export declare const themeInitializerScript: string;
-export declare function ThemeProvider({ theme, children, ...boxProps }: {
+declare type Props = {
     theme?: Theme;
     children: React.ReactNode;
-    boxProps?: BoxProps;
-}): JSX.Element;
+} & BoxProps;
+export declare function ThemeProvider({ theme, children, ...boxProps }: Props): JSX.Element;
 export declare namespace ThemeProvider {
     var cache: import("@emotion/utils").EmotionCache;
     var setRootStyles: (themeId: any, styles: any) => void;

package/dist/types/index.d.ts

@@ -350,7 +350,7 @@ export const Checkbox: HTMLInputWrapperComponent
 // Input
 // =====
 
-export const Input: CommonComponent & {
+export const Input: HTMLInputWrapperComponent & {
   Inline: HTMLInputWrapperComponent
   Input: HTMLInputWrapperComponent
   InputBox: CommonComponent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.6.0-rc.8",
+  "version": "2.6.0",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",
@@ -76,7 +76,7 @@
     "husky": "^4.3.8",
     "is-ci-cli": "^2.2.0",
     "jest": "^26.6.3",
-    "jest-canvas-mock": "2.3.1",
+    "jest-canvas-mock": "^2.5.0",
     "jest-watch-typeahead": "0.6.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -88,7 +88,7 @@
     "typescript": "^4.1.5"
   },
   "dependencies": {
-    "@planningcenter/icons": "^14.11.0",
+    "@planningcenter/icons": "^14.12.0",
     "@planningcenter/react-beautiful-dnd": "^13.2.1",
     "@popmotion/popcorn": "^0.4.4",
     "@popperjs/core": "^2.11.6",
@@ -106,6 +106,6 @@
     "stylefire": "^7.0.3",
     "tabbable": "^6.0.0",
     "tiny-spring": "^1.0.0",
-    "zustand": "^4.1.1"
+    "zustand": "^4.3.7"
   }
 }

package/src/Button/Button.test.tsx

@@ -2,12 +2,42 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { Button } from './Button'
 
+it(`should render as <button> with type="button" by default`, () => {
+  const { container } = render(<Button />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute('type')).toEqual('button')
+})
+
+it(`should render as <button> with type="submit"`, () => {
+  const { container } = render(<Button type='submit' />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute('type')).toEqual('submit')
+})
+
 it(`should render title`, () => {
   const title = 'Hello'
   const { getByText } = render(<Button title={title} />)
   getByText(title)
 })
 
+it(`should render <a> without a type if "to" is provided`, () => {
+  const { container } = render(<Button to='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('type')).toBeNull()
+})
+
+it(`should render <a> without a type if "href" is provided`, () => {
+  const { container } = render(<Button href='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('type')).toBeNull()
+})
+
+it(`should render <a> with "href" if "to" is specifed`, () => {
+  const { container } = render(<Button to='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('href')).toEqual('#')
+})
+
 it(`should render href and external link values`, () => {
   const title = 'Hello'
   const { getByText } = render(

package/src/Button/Button.tsx

@@ -86,6 +86,11 @@ type ButtonProps = {
    */
   to?: string
 
+  /**
+   * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
+   */
+  href?: string
+
   /**
    * Wraps button in a [`<Tooltip />`](./tooltip). Accepts any valid Tooltip props.
    */
@@ -287,6 +292,14 @@ export function Button({
     restProps['href'] = to
   }
 
+  // remove `type` if either `to` or `href` is specified
+  if (to || (restProps as any).href) {
+    buttonProps = {
+      ...buttonProps,
+      type: null,
+    }
+  }
+
   // apply stroke defaults and higher z-index when hovering to show outline in group properly
   if (variant === 'outline') {
     buttonProps = {
@@ -342,7 +355,7 @@ export function Button({
     }
 
     if (
-      type &&
+      buttonProps.type &&
       (restProps as any).as &&
       (restProps as any).as !== "button"
     ) {

package/src/DataTable/DataTable.js

@@ -242,7 +242,7 @@ export type Props = {
   onColumnSort?: Function,
 
   /**
-   * `(rowData: any, rowIndex: number) => void`
+   * `(rowData: any, rowIndex: number, event: React.SyntheticEvent) => void`
    *
    * Callback when a row has been clicked.
    */
@@ -480,7 +480,7 @@ const DataTable = (props: Props) => {
         <div
           role={getRowLink ? undefined : 'grid'}
           style={isLoadingOrEmpty ? { display: 'none' } : undefined}
-          className={css({ position: 'relative' })}
+          className={`tapestry-react-reset ${css({ position: 'relative' })}`}
         >
           <div
             ref={headerRef}
@@ -500,7 +500,10 @@ const DataTable = (props: Props) => {
                     column={column}
                     columnIndex={columnIndex}
                     columnSort={columnSort}
-                    className={css([...cellVariantClassName, column.css])}
+                    className={`tapestry-react-reset ${css([
+                      ...cellVariantClassName,
+                      column.css,
+                    ])}`}
                   />
                 )
               })}
@@ -524,7 +527,10 @@ const DataTable = (props: Props) => {
                       key={columnIndex}
                       role="cell"
                       ref={getColumnRef(`${columnIndex}.${data.length + 1}`)}
-                      className={css([...cellVariantClassName, column.css])}
+                      className={`tapestry-react-reset ${css([
+                        ...cellVariantClassName,
+                        column.css,
+                      ])}`}
                     >
                       {typeof column.footer === 'string' ||
                       React.isValidElement(column.footer)

package/src/DataTable/components/BodyRow.js

@@ -19,7 +19,7 @@ function BodyRow({
   } = useKeyboardShortcuts(keyboardShortcuts, { rowData, rowIndex })
   const props = {
     ref: innerRef,
-    onClick: onRowClick && (() => onRowClick(rowData, rowIndex)),
+    onClick: (event) => onRowClick && onRowClick(rowData, rowIndex, event),
     onMouseEnter: bindKeyboardShortcuts,
     onMouseLeave: unbindKeyboardShortcuts,
     style: {

package/src/DataTable/components/BodyRows.js

@@ -38,7 +38,10 @@ function BodyRows({
             key={columnIndex}
             ref={getColumnRef(`${columnIndex}.${rowIndex + 1}`)} // offset by 1 to account for header row
             role="cell"
-            className={css([...cellVariantStyles, column.css])}
+            className={`tapestry-react-reset ${css([
+              ...cellVariantStyles,
+              column.css,
+            ])}`}
           >
             {getCell(column.cell, {
               columnIndex,
@@ -64,7 +67,7 @@ function BodyRows({
       rowIndex,
       keyboardShortcuts,
       onRowClick,
-      className: css(rowVariantClassName),
+      className: `tapestry-react-reset ${css(rowVariantClassName)}`,
       ...getRowLinkProps({ getRowLink, data: rowData, isSubRow: false }),
     }
     const subRowData = getSubData ? getSubData(rowData) : null

package/src/DataTable/components/BodySubRows.js

@@ -57,7 +57,7 @@ const BodySubRows = ({
             rowIndex={rowIndex}
             keyboardShortcuts={keyboardShortcuts}
             onRowClick={onRowClick}
-            className={css(rowVariantClassName)}
+            className={`tapestry-react-reset ${css(rowVariantClassName)}`}
             {...getRowLinkProps({ getRowLink, data: rowData, isSubRow: true })}
           >
             {columns.map((column, columnIndex) => {
@@ -77,7 +77,10 @@ const BodySubRows = ({
                   ref={getColumnRef(
                     `${columnIndex}.${parentRowIndex + 1}.${rowIndex}`
                   )}
-                  className={css([...cellVariantClassName, column.css])}
+                  className={`tapestry-react-reset ${css([
+                    ...cellVariantClassName,
+                    column.css,
+                  ])}`}
                 >
                   {getCell(
                     column.subCell !== undefined ? column.subCell : column.cell,

package/src/DataTable/components/CheckboxCell.js

@@ -87,22 +87,22 @@ function CheckboxCell({
       onFocus={onFocus}
       onClick={handleChange}
       onKeyDown={(event) => event.key === ' ' && handleChange(event)}
-      className="tapestry-react-Checkbox"
+      className="tapestry-react-reset tapestry-react-Checkbox"
       css={cssStyles}
     >
       <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'}
       />
       <Icon.Path
         name={iconPaths.minus}
-        className="tapestry-react-Checkbox-Minus"
+        className="tapestry-react-reset tapestry-react-Checkbox-Fill"
       />
       <Icon.Path
         name={iconPaths.checked}
-        className="tapestry-react-Checkbox-Checked"
+        className="tapestry-react-reset tapestry-react-Checkbox-Checked"
       />
     </Icon>
   )

package/src/DataTable/hooks/useCollapsibleRows.js

@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useEffect } from 'react'
 import useConstant from '../../hooks/useConstant'
-import create from 'zustand'
+import { create } from 'zustand'
 
 import { range } from '../../utils'