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

package/dist/esm/TimeField/TimeField.test.js

@@ -182,7 +182,7 @@ it('does not change the meridiem on arrow key if arrow keys are ignored', functi
   userEvent.type(meridiemInput, '{arrowup}');
   expect(meridiemInput).toHaveValue('PM');
 });
-it('changes the value of hours on arrow up or arrow down', function () {
+it('increment hour on arrow up', function () {
   var _setup15 = setup({
     hours: 1,
     minutes: 42
@@ -193,13 +193,156 @@ it('changes the value of hours on arrow up or arrow down', function () {
   userEvent.type(hourInput, '{arrowup}');
   expect(hourInput).toHaveValue("02");
 });
-it('does not change the value of hours on arrow up or arrow down if ignored', function () {
+it('increment hour if arrow up on minutes exceeds max value', function () {
   var _setup16 = setup({
+    hours: 1,
+    minutes: 59
+  }),
+      hourInput = _setup16.hourInput,
+      minuteInput = _setup16.minuteInput;
+
+  expect(hourInput).toHaveValue("01");
+  userEvent.type(minuteInput, '{arrowup}');
+  expect(hourInput).toHaveValue("02");
+});
+it('decrement hour on arrow down', function () {
+  var _setup17 = setup({
+    hours: 2,
+    minutes: 42
+  }),
+      hourInput = _setup17.hourInput;
+
+  expect(hourInput).toHaveValue("02");
+  userEvent.type(hourInput, '{arrowdown}');
+  expect(hourInput).toHaveValue("01");
+});
+it('decrement hour if arrow down on minutes exceeds min value', function () {
+  var _setup18 = setup({
+    hours: 2,
+    minutes: 0
+  }),
+      hourInput = _setup18.hourInput,
+      minuteInput = _setup18.minuteInput;
+
+  expect(hourInput).toHaveValue("02");
+  userEvent.type(minuteInput, '{arrowdown}');
+  expect(hourInput).toHaveValue("01");
+});
+it('increment minute on arrow up', function () {
+  var _setup19 = setup({
+    hours: 1,
+    minutes: 42
+  }),
+      minuteInput = _setup19.minuteInput;
+
+  expect(minuteInput).toHaveValue("42");
+  userEvent.type(minuteInput, '{arrowup}');
+  expect(minuteInput).toHaveValue("43");
+});
+it('decrement minute on arrow down', function () {
+  var _setup20 = setup({
+    hours: 2,
+    minutes: 43
+  }),
+      minuteInput = _setup20.minuteInput;
+
+  expect(minuteInput).toHaveValue("43");
+  userEvent.type(minuteInput, '{arrowdown}');
+  expect(minuteInput).toHaveValue("42");
+});
+it('set minute to min value if arrow up on minutes exceeds max value', function () {
+  var _setup21 = setup({
+    hours: 1,
+    minutes: 59
+  }),
+      minuteInput = _setup21.minuteInput;
+
+  expect(minuteInput).toHaveValue("59");
+  userEvent.type(minuteInput, '{arrowup}');
+  expect(minuteInput).toHaveValue("00");
+});
+it('set minute to max value if arrow down on minutes exceeds min value', function () {
+  var _setup22 = setup({
+    hours: 1,
+    minutes: 0
+  }),
+      minuteInput = _setup22.minuteInput;
+
+  expect(minuteInput).toHaveValue("00");
+  userEvent.type(minuteInput, '{arrowdown}');
+  expect(minuteInput).toHaveValue("59");
+});
+it('toggle meridiem if arrow up on hour exceeds eleven', function () {
+  var _setup23 = setup({
+    hours: 11
+  }),
+      hourInput = _setup23.hourInput,
+      meridiemInput = _setup23.meridiemInput;
+
+  expect(meridiemInput).toHaveValue('AM');
+  userEvent.type(hourInput, '{arrowup}');
+  expect(meridiemInput).toHaveValue('PM');
+});
+it('toggle meridiem if arrow down on hour exceeds min value', function () {
+  var _setup24 = setup({
+    hours: 1
+  }),
+      hourInput = _setup24.hourInput,
+      meridiemInput = _setup24.meridiemInput;
+
+  expect(meridiemInput).toHaveValue('AM');
+  userEvent.type(hourInput, '{arrowdown}');
+  expect(meridiemInput).toHaveValue('PM');
+});
+it('set 12 hour clock to min value if arrow up on hour exceeds max value', function () {
+  var _setup25 = setup({
+    hours: 12
+  }),
+      hourInput = _setup25.hourInput;
+
+  expect(hourInput).toHaveValue("12");
+  userEvent.type(hourInput, '{arrowup}');
+  expect(hourInput).toHaveValue("01");
+});
+it('set 24 hour clock to min value if arrow up on hour exceeds max value', function () {
+  var _setup26 = setup({
+    hours: 23,
+    twelveHourClock: false
+  }),
+      hourInput = _setup26.hourInput;
+
+  expect(hourInput).toHaveValue("23");
+  userEvent.type(hourInput, '{arrowup}');
+  expect(hourInput).toHaveValue("00");
+});
+it('set 12 hour clock to max value if arrow down on hour exceeds min value', function () {
+  var _setup27 = setup({
+    hours: 1
+  }),
+      hourInput = _setup27.hourInput;
+
+  expect(hourInput).toHaveValue("01");
+  userEvent.type(hourInput, '{arrowdown}');
+  expect(hourInput).toHaveValue("12");
+});
+it('set 24 hour clock to max value if arrow down on hour exceeds min value', function () {
+  var _setup28 = setup({
+    hours: 0,
+    twelveHourClock: false
+  }),
+      hourInput = _setup28.hourInput;
+
+  expect(hourInput).toHaveValue("00");
+  userEvent.type(hourInput, '{arrowdown}');
+  expect(hourInput).toHaveValue("23");
+});
+it('does not change the value of hours on arrow up or arrow down if ignored', function () {
+  var _setup29 = setup({
     hours: 1,
     minutes: 42,
     ignoredKeys: ['ArrowUp', 'ArrowDown']
   }),
-      hourInput = _setup16.hourInput;
+      hourInput = _setup29.hourInput;
 
   expect(hourInput).toHaveValue("01");
   userEvent.type(hourInput, '{arrowup}');
@@ -208,12 +351,12 @@ it('does not change the value of hours on arrow up or arrow down if ignored', fu
   expect(hourInput).toHaveValue("01");
 });
 it('does not change the value of minutes on arrow up or arrow down if ignored', function () {
-  var _setup17 = setup({
+  var _setup30 = setup({
     hours: 1,
     minutes: 42,
     ignoredKeys: ['ArrowUp', 'ArrowDown']
   }),
-      minuteInput = _setup17.minuteInput;
+      minuteInput = _setup30.minuteInput;
 
   expect(minuteInput).toHaveValue("42");
   userEvent.type(minuteInput, '{arrowup}');
@@ -223,15 +366,15 @@ it('does not change the value of minutes on arrow up or arrow down if ignored',
 }); // ios
 
 it('renders iOS as a single input', function () {
-  var _setup18 = setup({
+  var _setup31 = setup({
     isIOS: true,
     hours: 13,
     minutes: 42
   }),
-      container = _setup18.container,
-      hourInput = _setup18.hourInput,
-      minuteInput = _setup18.minuteInput,
-      meridiemInput = _setup18.meridiemInput;
+      container = _setup31.container,
+      hourInput = _setup31.hourInput,
+      minuteInput = _setup31.minuteInput,
+      meridiemInput = _setup31.meridiemInput;
 
   var singleTimeInput = container.querySelector('[type=time]');
   expect(singleTimeInput).toHaveValue('13:42');

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/Tooltip/Tooltip.test.js

@@ -0,0 +1,160 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import React from 'react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { Button, Link, StackView, Text, Tooltip, hooks } from '..';
+
+var _ref = /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor");
+
+var _ref3 = /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor");
+
+var _ref5 = /*#__PURE__*/React.createElement(Button, null, "Tooltip anchor");
+
+var _ref7 = /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor");
+
+var _ref8 = /*#__PURE__*/React.createElement(Tooltip, {
+  title: "Test Text"
+}, /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor"));
+
+describe('Tooltip', function () {
+  test('does not render string when closed', function () {
+    var string = 'Test Text';
+    render( /*#__PURE__*/React.createElement(Tooltip, {
+      title: string
+    }, _ref));
+    expect(screen.queryByText(string)).toBeNull();
+  });
+  test('renders string on hover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var string, tooltip;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            string = 'Test Text';
+            render( /*#__PURE__*/React.createElement(Tooltip, {
+              title: string
+            }, _ref3));
+            userEvent.hover(screen.getByText('Tooltip anchor'));
+            _context.next = 5;
+            return screen.findByText(string);
+
+          case 5:
+            tooltip = _context.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test('renders string on focus', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var string, tooltip;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            string = 'Test Text';
+            render( /*#__PURE__*/React.createElement(Tooltip, {
+              title: string,
+              triggerOnFocus: true
+            }, _ref5));
+            userEvent.tab();
+            _context2.next = 5;
+            return screen.findByText(string);
+
+          case 5:
+            tooltip = _context2.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('removes string after timeout', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var string, anchor, tooltip;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            string = 'Test Text';
+            render( /*#__PURE__*/React.createElement(Tooltip, {
+              title: string
+            }, _ref7));
+            anchor = screen.getByText('Tooltip anchor');
+            expect(screen.queryByText(string)).toBeNull();
+            userEvent.hover(anchor);
+            _context3.next = 7;
+            return screen.findByText(string);
+
+          case 7:
+            tooltip = _context3.sent;
+            expect(tooltip).toBeInTheDocument();
+            userEvent.unhover(anchor);
+            _context3.next = 12;
+            return waitFor(function () {
+              expect(screen.queryByText(string)).not.toBeInTheDocument();
+            });
+
+          case 12:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  test('stays open when hovering a custom tooltip', function () {
+    var CustomTooltip = function CustomTooltip() {
+      var _hooks$useHover = hooks.useHover(),
+          hover = _hooks$useHover.hover,
+          hoverProps = _hooks$useHover.hoverProps;
+
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        title: /*#__PURE__*/React.createElement(Link, {
+          to: "#"
+        }, /*#__PURE__*/React.createElement(StackView, null, /*#__PURE__*/React.createElement(Text, {
+          "data-hover": hover
+        }, string)))
+      }, /*#__PURE__*/React.createElement(Button, hoverProps, "Tooltip anchor"));
+    };
+
+    var string = 'Test Text';
+    render( /*#__PURE__*/React.createElement(CustomTooltip, null));
+    var anchor = screen.getByText('Tooltip anchor');
+    userEvent.hover(anchor);
+    act(function () {
+      jest.runAllTimers();
+    });
+    var tooltip = screen.getByText(string);
+    expect(tooltip).toBeInTheDocument();
+    userEvent.unhover(anchor);
+    userEvent.hover(tooltip);
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).toBeInTheDocument();
+    userEvent.unhover(tooltip);
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).not.toBeInTheDocument();
+  });
+  test('cleans up pageViewChange listeners', function () {
+    window.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+    document.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+
+    var _render = render(_ref8),
+        unmount = _render.unmount;
+
+    unmount();
+    expect(window.removeEventListener).toBeCalledWith('focus', expect.any(Function));
+    expect(window.removeEventListener).toBeCalledWith('blur', expect.any(Function));
+    expect(document.removeEventListener).toBeCalledWith('visibilitychange', expect.any(Function));
+  });
+});

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/Tooltip/Tooltip.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

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.9",
+  "version": "2.6.1",
   "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/Collapse/Collapse.js

@@ -98,7 +98,7 @@ function Collapse(props: Props) {
       }
     }
     if (instantRender) {
-      handleComplete()
+      requestAnimationFrame(() => handleComplete())
     }
     node.addEventListener('transitionend', handleTransitionEnd)
     return () => {

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.
    */

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/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'