@planningcenter/tapestry-react 0.0.1-alpha.0

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

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Icon from '../../Icon';
+import HeadingUppercase from '../../HeadingUppercase';
+import { getIconDirection, SORT_ASC } from '../hooks/useColumnSort';
+import useHoverFocus from '../hooks/useHoverFocus';
+
+var HeaderText = function HeaderText(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(HeadingUppercase, {
+    truncate: true,
+    color: "foregroundSecondary",
+    cursor: "inherit"
+  }, children);
+};
+
+var HeaderSort = function HeaderSort(_ref2) {
+  var affordance = _ref2.affordance,
+      column = _ref2.column,
+      currentSort = _ref2.currentSort,
+      defaultSort = _ref2.defaultSort,
+      sorted = _ref2.sorted;
+  return /*#__PURE__*/React.createElement(Icon, {
+    size: "xs",
+    name: getIconDirection(currentSort.columnId === column.id ? currentSort.direction : column.defaultSortDirection || (defaultSort ? defaultSort.direction : SORT_ASC)),
+    opacity: sorted ? 1 : affordance ? 0.4 : 0
+  });
+};
+
+function HeaderCell(_ref3) {
+  var cellRef = _ref3.cellRef,
+      column = _ref3.column,
+      columnIndex = _ref3.columnIndex,
+      columnSort = _ref3.columnSort,
+      defaultSort = _ref3.defaultSort,
+      restProps = _objectWithoutPropertiesLoose(_ref3, ["cellRef", "column", "columnIndex", "columnSort", "defaultSort"]);
+
+  var currentSort = columnSort.currentSort,
+      sortColumnById = columnSort.sortColumnById;
+
+  var _useHoverFocus = useHoverFocus(),
+      isHoverFocus = _useHoverFocus.isHoverFocus,
+      bind = _useHoverFocus.bind;
+
+  if (column.sortable) {
+    restProps.tabIndex = 0;
+    restProps['aria-sort'] = currentSort.columnId === column.id ? currentSort.direction === 'ASC' ? 'ascending' : 'descending' : 'none';
+
+    restProps.onClick = function () {
+      sortColumnById(column);
+    };
+
+    restProps.onKeyDown = function (event) {
+      if (event.key === 'Enter') {
+        sortColumnById(column);
+      }
+    };
+  }
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: cellRef,
+    role: "columnheader"
+  }, restProps, bind), typeof column.header === 'string' ? /*#__PURE__*/React.createElement(HeaderText, null, column.header) : /*#__PURE__*/React.isValidElement(column.header) ? column.header : column.header ? /*#__PURE__*/React.createElement(column.header, {
+    columnIndex: columnIndex
+  }) : null, column.sortable && /*#__PURE__*/React.createElement(HeaderSort, {
+    defaultSort: defaultSort,
+    currentSort: currentSort,
+    column: column,
+    sorted: currentSort.columnId === column.id,
+    affordance: isHoverFocus
+  }));
+}
+
+export default HeaderCell;

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

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useThemeValue } from '../../system';
+var sizes = {
+  xxs: '8px',
+  xs: '10px',
+  sm: '12px',
+  md: '14px',
+  lg: '18px',
+  xl: '32px',
+  xxl: '48px'
+};
+
+function Icon(_ref) {
+  var as = _ref.as,
+      name = _ref.name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      color = _ref.color,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["as", "name", "size", "color", "children"]);
+
+  var icons = useThemeValue('icons');
+  var themeColor = useThemeValue(['colors', color]);
+  var iconSize = sizes[size] || size;
+  var childrenToRender = name ? jsx("path", {
+    d: icons[name]
+  }) : children;
+  return jsx("svg", _extends({
+    viewBox: "0 0 16 16",
+    width: iconSize,
+    height: iconSize,
+    fill: themeColor,
+    className: "uikit-reset",
+    children: childrenToRender
+  }, props));
+}
+
+function Path(_ref2) {
+  var name = _ref2.name,
+      fill = _ref2.fill,
+      stroke = _ref2.stroke,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["name", "fill", "stroke"]);
+
+  var themeFill = useThemeValue(['colors', fill]);
+  var themeStroke = useThemeValue(['colors', stroke]);
+  var icons = useThemeValue('icons');
+  return jsx("path", _extends({
+    d: icons[name],
+    fill: fill ? themeFill || fill : 'none',
+    stroke: stroke ? themeStroke || stroke : undefined
+  }, restProps));
+}
+
+Icon.Path = Path;
+export default Icon;

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

@@ -0,0 +1,4 @@
+export { default as BodyRows } from './BodyRows';
+export { default as CheckboxCell } from './CheckboxCell';
+export { default as ColumnPicker } from './ColumnPicker';
+export { default as HeaderCell } from './HeaderCell';

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

@@ -0,0 +1,6 @@
+export * from './useCollapsibleRows';
+export { default as useColumnSort } from './useColumnSort';
+export { default as useColumnWidths } from './useColumnWidths';
+export { default as useScrollShadows } from './useScrollShadows';
+export { default as useScrollSync } from './useScrollSync';
+export { default as useVariants } from './useVariants';

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

@@ -0,0 +1,107 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { createContext, useCallback, useContext, useEffect } from 'react';
+import useConstant from 'use-constant';
+import create from 'zustand';
+import { range } from '../../utils';
+export var CollapsibleRowsContext = /*#__PURE__*/createContext(null);
+export function useCollapsibleRowsStore(selector) {
+  var _useContext = useContext(CollapsibleRowsContext),
+      useStore = _useContext.useStore;
+
+  return useStore(selector);
+}
+export function useSubRowOpen(index) {
+  return useCollapsibleRowsStore(useCallback(function (state) {
+    return state.allSubRowsOpen || state.openSubRows.indexOf(index) > -1;
+  }, [index]));
+}
+export function useAnySubRowsOpen() {
+  return useCollapsibleRowsStore(useCallback(function (state) {
+    return state.openSubRows.length > 0;
+  }, []));
+}
+export function useCollapsibleRows(data, defaultAllSubRowsOpen) {
+  if (defaultAllSubRowsOpen === void 0) {
+    defaultAllSubRowsOpen = false;
+  }
+
+  var useStore = useConstant(function () {
+    return create(function (set) {
+      return {
+        instant: false,
+        allSubRowsOpen: defaultAllSubRowsOpen,
+        openSubRows: [],
+        rowCountRange: [],
+        callbacks: {
+          openAllSubRows: function openAllSubRows() {
+            set(function (state) {
+              return {
+                instant: true,
+                allSubRowsOpen: true,
+                openSubRows: state.rowCountRange
+              };
+            });
+          },
+          closeAllSubRows: function closeAllSubRows() {
+            set({
+              instant: true,
+              allSubRowsOpen: false,
+              openSubRows: []
+            });
+          },
+          toggleAllSubRows: function toggleAllSubRows() {
+            set(function (state) {
+              var nextAllSubRowsOpen = state.openSubRows.length === 0;
+              return {
+                instant: true,
+                allSubRowsOpen: nextAllSubRowsOpen,
+                openSubRows: nextAllSubRowsOpen ? state.rowCountRange : []
+              };
+            });
+          },
+          toggleSubRowAtIndex: function toggleSubRowAtIndex(index) {
+            set(function (state) {
+              var nextOpenSubRows = [].concat(state.openSubRows);
+              var currentIndex = state.openSubRows.indexOf(index);
+
+              if (currentIndex > -1) {
+                nextOpenSubRows.splice(currentIndex, 1);
+              } else {
+                nextOpenSubRows.push(index);
+              }
+
+              return {
+                instant: false,
+                allSubRowsOpen: state.rowCountRange.every(function (index) {
+                  return nextOpenSubRows.indexOf(index) > -1;
+                }),
+                openSubRows: nextOpenSubRows
+              };
+            });
+          }
+        }
+      };
+    });
+  });
+  var callbacks = useStore(function (state) {
+    return state.callbacks;
+  });
+  useEffect(function () {
+    var rowCountRange = range(0, data.length);
+    useStore.setState(function (state) {
+      return {
+        instant: true,
+        openSubRows: state.allSubRowsOpen ? rowCountRange : [],
+        rowCountRange: rowCountRange
+      };
+    });
+  }, [data]);
+  return _objectSpread({
+    useStore: useStore
+  }, callbacks);
+}

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

@@ -0,0 +1,85 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { useCallback, useState } from 'react';
+export var SORT_ASC = 'ASC';
+export var SORT_DESC = 'DESC';
+export function getIconDirection(direction) {
+  return direction === SORT_ASC ? 'arrow-up' : 'arrow-down';
+}
+export function getOppositeSortDirection(direction) {
+  return direction === SORT_ASC ? SORT_DESC : SORT_ASC;
+}
+
+function parseSortOrder(query) {
+  var isDescending = query[0] === '-';
+  return {
+    columnId: isDescending ? query.substring(1) : query,
+    direction: isDescending ? SORT_DESC : SORT_ASC
+  };
+}
+
+function getSortOrder(_ref) {
+  var columnId = _ref.columnId,
+      direction = _ref.direction;
+  return "" + (direction === SORT_ASC ? '' : '-') + columnId;
+}
+
+function getDefaultSort(_ref2) {
+  var columnId = _ref2.columnId,
+      direction = _ref2.direction,
+      order = _ref2.order;
+  var defaultSort = order ? parseSortOrder(order) : {
+    columnId: columnId,
+    direction: direction
+  };
+  return _objectSpread(_objectSpread({}, defaultSort), {}, {
+    order: getSortOrder(defaultSort)
+  });
+}
+
+export default function useColumnSort(_ref3) {
+  var _ref3$defaultSort = _ref3.defaultSort,
+      defaultSort = _ref3$defaultSort === void 0 ? {
+    columnId: null,
+    direction: SORT_ASC,
+    order: null
+  } : _ref3$defaultSort,
+      onColumnSort = _ref3.onColumnSort;
+
+  var _useState = useState(getDefaultSort(defaultSort)),
+      currentSort = _useState[0],
+      setCurrentSort = _useState[1];
+
+  var sortColumnById = useCallback(function (column) {
+    setCurrentSort(function (currentSort) {
+      var parsedDefaultSort = getDefaultSort(_objectSpread(_objectSpread({}, defaultSort), {}, {
+        direction: column.defaultSortDirection
+      }));
+      var nextSort = {
+        columnId: column.id
+      };
+
+      if (currentSort.columnId === column.id) {
+        nextSort.direction = getOppositeSortDirection(currentSort.direction);
+      } else {
+        nextSort.direction = column.defaultSortDirection || SORT_ASC;
+      }
+
+      nextSort.order = getSortOrder(nextSort);
+
+      if (onColumnSort) {
+        onColumnSort(nextSort.columnId ? nextSort : parsedDefaultSort);
+      }
+
+      return nextSort;
+    });
+  }, [defaultSort, onColumnSort]);
+  return {
+    currentSort: currentSort,
+    sortColumnById: sortColumnById
+  };
+}

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

@@ -0,0 +1,104 @@
+import { useLayoutEffect, useRef } from 'react';
+import useRefManager from './useRefManager';
+
+function useColumnWidths(_ref) {
+  var columns = _ref.columns,
+      data = _ref.data,
+      loading = _ref.loading,
+      bodyRef = _ref.bodyRef;
+
+  var _useRefManager = useRefManager(),
+      columnRefs = _useRefManager[0],
+      getColumnRef = _useRefManager[1];
+
+  var columnWidths = useRef([]);
+  useLayoutEffect(function () {
+    var nextColumnWidths = [];
+    var cells = [];
+    var paddingDelta = 0; // build cells collection
+
+    for (var key in columnRefs.current) {
+      var _key$split = key.split('.'),
+          columnIndex = _key$split[0],
+          rowIndex = _key$split[1],
+          parentRowIndex = _key$split[2];
+
+      var column = columns[columnIndex];
+      var node = columnRefs.current[key];
+      var isSubColumn = parentRowIndex !== undefined; // skip sub columns unless specifically enabled
+
+      if (!column.includeSubCellWidth && isSubColumn) {
+        continue;
+      } // this is a naive padding calculation, but getComputedStyle is expensive
+      // and all cells should use the same padding so it should be ok
+      // alternatively, we could use a first-class padding API to avoid getComputedStyle
+
+
+      if (!paddingDelta) {
+        var computedStyle = getComputedStyle(node);
+        paddingDelta = parseInt(computedStyle.paddingLeft, 10) + parseInt(computedStyle.paddingRight, 10);
+      } // only collect widths for undefined column.width
+
+
+      if (column.width) {
+        node.style.width = column.width + 'px';
+
+        if (!nextColumnWidths[columnIndex]) {
+          nextColumnWidths[columnIndex] = column.width;
+        }
+      } else {
+        // set cell widths to "auto" so we can take an accurate measurement
+        node.style.width = 'auto'; // store cell data so it's easier to work with below
+
+        cells.push({
+          column: column,
+          columnIndex: columnIndex,
+          node: node
+        });
+      }
+    } // collect the largest width from the header and body cells
+
+
+    for (var index = 0; index < cells.length; index++) {
+      var _cells$index = cells[index],
+          _column = _cells$index.column,
+          _columnIndex = _cells$index.columnIndex,
+          _node = _cells$index.node;
+      var width = Math.max(Math.ceil(_node.getBoundingClientRect().width) - paddingDelta, nextColumnWidths[_columnIndex] || 0);
+
+      if (_column.minWidth) {
+        width = Math.max(width, _column.minWidth);
+      }
+
+      if (_column.maxWidth) {
+        width = Math.min(width, _column.maxWidth);
+      }
+
+      nextColumnWidths[_columnIndex] = width;
+    } // apply widths back to cells
+
+
+    for (var _index = 0; _index < cells.length; _index++) {
+      var _cells$_index = cells[_index],
+          _columnIndex2 = _cells$_index.columnIndex,
+          _node2 = _cells$_index.node;
+      _node2.style.width = nextColumnWidths[_columnIndex2] + 'px';
+    } // apply row widths
+
+
+    var minRowWidth = bodyRef.current.scrollWidth;
+
+    for (var _index2 = 0; _index2 < bodyRef.current.children.length; _index2++) {
+      bodyRef.current.children[_index2].style.minWidth = minRowWidth + 'px';
+    } // update column widths for sub rows
+
+
+    columnWidths.current = nextColumnWidths;
+  }, [columns, data, loading]);
+  return {
+    columnWidths: columnWidths,
+    getColumnRef: getColumnRef
+  };
+}
+
+export default useColumnWidths;

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

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+function useHoverFocus() {
+  var _useState = useState(),
+      isHoverFocus = _useState[0],
+      setHoverFocus = _useState[1];
+
+  return {
+    isHoverFocus: isHoverFocus,
+    bind: {
+      onFocus: function onFocus() {
+        return setHoverFocus(true);
+      },
+      onBlur: function onBlur() {
+        return setHoverFocus(false);
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setHoverFocus(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoverFocus(false);
+      }
+    }
+  };
+}
+
+export default useHoverFocus;

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

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from 'react';
+
+function useRefManager() {
+  var storedRefs = useRef({});
+  var refCallbacks = useRef({});
+  var getRef = useCallback(function (id) {
+    if (!refCallbacks.current[id]) {
+      refCallbacks.current[id] = function (ref) {
+        if (!storedRefs.current[id] && ref) {
+          storedRefs.current[id] = ref;
+        } else if (!ref) {
+          delete storedRefs.current[id];
+        }
+      };
+    }
+
+    return refCallbacks.current[id];
+  }, []);
+  return [storedRefs, getRef];
+}
+
+export default useRefManager;

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

@@ -0,0 +1,94 @@
+import React, { Fragment, useLayoutEffect, useRef, useState } from 'react';
+import { interpolate } from '@popmotion/popcorn';
+import { useMeasure } from '../../hooks';
+import { supportsPassiveEvents } from '../../utils';
+var getLeftScrollShadow = interpolate([0, 0.2], [0, 1]);
+var getRightScrollShadow = interpolate([0.8, 1], [1, 0]);
+var listenerOptions = supportsPassiveEvents ? {
+  capture: true,
+  passive: false
+} : true;
+var shadowStyle = {
+  width: 10,
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  zIndex: 30,
+  pointerEvents: 'none'
+};
+
+function getProgress(offset, maxOffset) {
+  return !offset || !maxOffset ? 0 : offset / maxOffset;
+}
+
+function getBackground(direction) {
+  var rotate = 90 * direction;
+  return "linear-gradient(" + rotate + "deg, transparent 4px, rgba(125, 125, 125, 0.15))";
+}
+
+function setShadowStyles(_ref) {
+  var leftNode = _ref.leftNode,
+      rightNode = _ref.rightNode,
+      offset = _ref.offset,
+      progress = _ref.progress;
+  leftNode.style.left = offset + 'px';
+  leftNode.style.background = getBackground(-1);
+  leftNode.style.opacity = getLeftScrollShadow(progress);
+  rightNode.style.right = offset + 'px';
+  rightNode.style.background = getBackground(1);
+  rightNode.style.opacity = getRightScrollShadow(progress);
+}
+
+function useScrollShadows(ref) {
+  var leftShadow = useRef();
+  var rightShadow = useRef();
+
+  var _useState = useState(false),
+      canScroll = _useState[0],
+      setCanScroll = _useState[1];
+
+  var _useState2 = useState(null),
+      maxOffset = _useState2[0],
+      setMaxOffset = _useState2[1];
+
+  var _useMeasure = useMeasure(),
+      useMeasureRef = _useMeasure[0],
+      useMeasureEffect = _useMeasure[1];
+
+  useMeasureRef(ref);
+  useMeasureEffect(function (_ref2) {
+    var node = _ref2[0];
+    setCanScroll(node.scrollWidth > node.offsetWidth);
+    setMaxOffset(node.scrollWidth - node.offsetWidth);
+  }, []);
+  useLayoutEffect(function () {
+    if (leftShadow.current && rightShadow.current) {
+      var handleScroll = function handleScroll() {
+        setShadowStyles({
+          leftNode: leftShadow.current,
+          rightNode: rightShadow.current,
+          progress: getProgress(node.scrollLeft, maxOffset),
+          offset: 0
+        });
+      };
+
+      var node = ref.current;
+      handleScroll();
+      node.addEventListener('scroll', handleScroll, listenerOptions);
+      return function () {
+        node.removeEventListener('scroll', handleScroll, listenerOptions);
+      };
+    }
+  }, [maxOffset]);
+  return canScroll && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: leftShadow,
+    style: shadowStyle,
+    "aria-hidden": true
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: rightShadow,
+    style: shadowStyle,
+    "aria-hidden": true
+  }));
+}
+
+export default useScrollShadows;

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

@@ -0,0 +1,46 @@
+import { useCallback, useLayoutEffect, useRef } from 'react';
+
+function useScrollSync() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  var timeoutId = useRef();
+  var handleScroll = useCallback(function (event) {
+    var syncedRefs = refs.filter(function (ref) {
+      return ref.current !== event.target;
+    });
+    var targetScrollLeft = event.target.scrollLeft;
+    clearTimeout(timeoutId.current);
+    syncedRefs.forEach(function (ref) {
+      removeEvent(ref);
+      ref.current.style.willChange = 'scroll-position';
+      ref.current.scrollLeft = targetScrollLeft;
+    });
+    timeoutId.current = setTimeout(function () {
+      syncedRefs.forEach(function (ref) {
+        addEvent(ref);
+        ref.current.style.willChange = '';
+      });
+    }, 120);
+  }, [refs]);
+  var addEvent = useCallback(function (ref) {
+    ref.current.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+  }, [handleScroll]);
+  var removeEvent = useCallback(function (ref) {
+    ref.current.removeEventListener('scroll', handleScroll, {
+      passive: true
+    });
+  }, [handleScroll]);
+  useLayoutEffect(function () {
+    refs.forEach(addEvent);
+    return function () {
+      clearTimeout(timeoutId.current);
+      refs.forEach(removeEvent);
+    };
+  }, []);
+}
+
+export default useScrollSync;

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

@@ -0,0 +1,9 @@
+import { defaultVariant } from '../utils/variants';
+export default function useVariants(variants) {
+  var parsedVariants = [defaultVariant].concat((Array.isArray(variants) ? variants : [variants]).filter(Boolean));
+  return function (key, context) {
+    return parsedVariants.map(function (variant) {
+      return typeof variant[key] === 'function' ? variant[key](context) : variant[key];
+    });
+  };
+}

package/dist/esm/DataTable/index.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import { CheckboxCell, ColumnPicker } from './components';
+import DataTable from './DataTable';
+import { variants } from './utils';
+var ForwardRefDataTable = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(DataTable, _extends({
+    dataTableRef: ref
+  }, props));
+});
+ForwardRefDataTable.CheckboxCell = CheckboxCell;
+ForwardRefDataTable.ColumnPicker = ColumnPicker;
+ForwardRefDataTable.variants = variants;
+export default ForwardRefDataTable;

package/dist/esm/DataTable/utils/getCell.js

@@ -0,0 +1,18 @@
+function getCell(cell, _ref) {
+  var rowData = _ref.rowData,
+      rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      _dragHandleProps = _ref._dragHandleProps;
+
+  if (typeof cell === 'string') {
+    return rowData[cell];
+  } else if (cell) {
+    return cell(rowData, {
+      rowIndex: rowIndex,
+      columnIndex: columnIndex,
+      _dragHandleProps: _dragHandleProps
+    });
+  }
+}
+
+export default getCell;