@pingux/astro 2.25.0-alpha.1 → 2.25.0-alpha.2

package/lib/components/DataTable/DataTable.js

@@ -9,18 +9,21 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 var _excluded = ["children"],
   _excluded2 = ["children"],
   _excluded3 = ["item", "children", "hasActions"];
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
-import { FocusRing, mergeProps, useFocusRing, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, VisuallyHidden } from 'react-aria';
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { FocusRing, mergeProps, useFocusRing, VisuallyHidden } from 'react-aria';
 import MenuDownIcon from '@pingux/mdi-react/MenuDownIcon';
 import MenuUpIcon from '@pingux/mdi-react/MenuUpIcon';
+import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
 import { layoutInfoToStyle, VirtualizerItem } from '@react-aria/virtualizer';
 import { TableLayout } from '@react-stately/layout';
-import { useTableColumnResizeState, useTableState } from '@react-stately/table';
+import { TableColumnLayout, useTableState } from '@react-stately/table';
 import PropTypes from 'prop-types';
 import { DataTableContext, useDataTableContext } from '../../context/DataTableContext';
 import { useStatusClasses } from '../../hooks';
@@ -29,7 +32,11 @@ import DataTableVirtualizer from './DataTableVirtualizer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DEFAULT_HEADER_HEIGHT = {
   medium: 34,
-  large: 37.5
+  large: 40
+};
+var DEFAULT_HIDE_HEADER_CELL_WIDTH = {
+  medium: 38,
+  large: 46
 };
 var ROW_HEIGHTS = {
   compact: {
@@ -41,43 +48,70 @@ var ROW_HEIGHTS = {
     large: 50
   },
   spacious: {
-    medium: 48,
-    large: 75
+    medium: 48
   }
 };
 var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
-  var width = props.width,
-    height = props.height,
-    onAction = props.onAction;
-  var direction = 'ltr'; // useLocale override
-  var scale = 'large'; // useProvider override
-
+  var scale = 'large';
+  var direction = 'ltr';
+  var onAction = props.onAction;
   var getDefaultWidth = useCallback();
+  var getDefaultMinWidth = useCallback(function (_ref) {
+    var _ref$props = _ref.props,
+      hideHeader = _ref$props.hideHeader,
+      showDivider = _ref$props.showDivider;
+    if (hideHeader) {
+      var width = DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
+      /* istanbul ignore next */
+      return showDivider ? width + 1 : width;
+    }
+    return 75;
+  }, [scale]);
+
+  // Starts when the user selects resize from the menu, ends when resizing ends
+  // used to control the visibility of the resizer Nubbin
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isInResizeMode = _useState2[0],
+    setIsInResizeMode = _useState2[1];
+  // entering resizing/exiting resizing doesn't trigger a render
+  // with table layout, so we need to track it here
   var state = useTableState(_objectSpread({}, props));
-  var columnState = useTableColumnResizeState(_objectSpread(_objectSpread({}, props), {}, {
-    getDefaultWidth: getDefaultWidth
-  }), state.collection);
   var domRef = useRef(ref);
+  var headerRef = useRef();
   var bodyRef = useRef();
   var density = props.density || 'regular';
+  var columnLayout = useMemo(function () {
+    return new TableColumnLayout({
+      getDefaultWidth: getDefaultWidth,
+      getDefaultMinWidth: getDefaultMinWidth
+    });
+  }, [getDefaultWidth, getDefaultMinWidth]);
   var layout = useMemo(function () {
     return new TableLayout({
-      // If props.rowHeight is auto, then use estimated heights based on scale,
-      // otherwise use fixed heights.
+      // If props.rowHeight is auto,
+      // then use estimated heights based on scale, otherwise use fixed heights.
       rowHeight: props.overflowMode === 'wrap' ? null : ROW_HEIGHTS[density][scale],
       estimatedRowHeight: props.overflowMode === 'wrap' ? ROW_HEIGHTS[density][scale] : null,
       headingHeight: props.overflowMode === 'wrap' ? null : DEFAULT_HEADER_HEIGHT[scale],
-      estimatedHeadingHeight: props.overflowMode === 'wrap' ? DEFAULT_HEADER_HEIGHT[scale] : null
+      estimatedHeadingHeight: props.overflowMode === 'wrap' ? DEFAULT_HEADER_HEIGHT[scale] : null,
+      columnLayout: columnLayout,
+      initialCollection: state.collection
     });
-  }, [props.overflowMode, scale, density]);
-  layout.collection = state.collection;
-  layout.getColumnWidth = columnState.getColumnWidth;
+  },
+  // don't recompute when state.collection changes, only used for initial value
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [props.overflowMode, scale, density, columnLayout]);
   var _useTable = useTable(_objectSpread(_objectSpread({}, props), {}, {
       isVirtualized: true,
       layout: layout,
       onRowAction: onAction
     }), state, domRef),
     gridProps = _useTable.gridProps;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    headerMenuOpen = _useState4[0],
+    setHeaderMenuOpen = _useState4[1];
 
   // This overrides collection view's renderWrapper to support DOM hierarchy.
   var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
@@ -119,7 +153,12 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
       parent: parent
     });
   };
+
+  // Overrides default renderView
   var renderView = function renderView(type, item) {
+    var _item$column, _item$column2;
+    var isFirstColumn = (item === null || item === void 0 || (_item$column = item.column) === null || _item$column === void 0 ? void 0 : _item$column.index) === 0;
+    var isLastColumn = (item === null || item === void 0 || (_item$column2 = item.column) === null || _item$column2 === void 0 ? void 0 : _item$column2.index) === state.collection.columnCount - 1;
     switch (type) {
       case 'header':
       case 'rowgroup':
@@ -134,7 +173,9 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
         }
       case 'column':
         return ___EmotionJSX(TableColumnHeader, {
-          column: item
+          column: item,
+          isFirst: isFirstColumn,
+          isLast: isLastColumn
         });
       case 'loader':
         return ___EmotionJSX(CenteredWrapper, null, ___EmotionJSX(Loader, {
@@ -157,29 +198,40 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     viewport.current = e;
   }, []);
+  var _useFocusRing = useFocusRing(),
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
+  var isEmpty = state.collection.size === 0;
+  var onFocusedResizer = function onFocusedResizer() {
+    /* istanbul ignore next */
+    bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+  };
+  var mergedProps = mergeProps(gridProps, focusProps);
   return ___EmotionJSX(DataTableContext.Provider, {
     value: {
       state: state,
       layout: layout,
-      columnState: columnState
+      isInResizeMode: isInResizeMode,
+      setIsInResizeMode: setIsInResizeMode,
+      isEmpty: isEmpty,
+      onFocusedResizer: onFocusedResizer,
+      headerMenuOpen: headerMenuOpen,
+      setHeaderMenuOpen: setHeaderMenuOpen
     }
-  }, ___EmotionJSX(DataTableVirtualizer, _extends({
-    style: {
-      whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
-    }
-  }, gridProps, {
-    width: width,
-    height: height,
+  }, ___EmotionJSX(DataTableVirtualizer, _extends({}, mergedProps, {
     layout: layout,
     collection: state.collection,
-    focusedKey: state.selectionManager.focusedKey,
     renderView: renderView,
     renderWrapper: renderWrapper,
-    setTableWidth: columnState.setTableWidth,
     onVisibleRectChange: onVisibleRectChange,
     domRef: domRef,
+    headerRef: headerRef,
     bodyRef: bodyRef,
-    getColumnWidth: columnState.getColumnWidth
+    isFocusVisible: isFocusVisible,
+    height: props.height,
+    style: {
+      whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
+    }
   })));
 });
 DataTable.propTypes = {
@@ -212,7 +264,10 @@ DataTable.propTypes = {
   /** Callback function that fires when sortable column header is pressed. */
   onSortChange: PropTypes.func,
   /** Defines the current column key to sort by and the sort direction. */
-  sortDescriptor: PropTypes.oneOf(['ascending', 'descending']),
+  sortDescriptor: PropTypes.oneOfType([PropTypes.shape({
+    column: PropTypes.string,
+    direction: PropTypes.oneOf(['ascending', 'descending'])
+  }), PropTypes.string]),
   /** Sets the width of table. */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
@@ -220,16 +275,18 @@ DataTable.defaultProps = {
   width: '100%',
   height: 565
 };
-function TableHeader(_ref) {
-  var children = _ref.children,
-    otherProps = _objectWithoutProperties(_ref, _excluded);
+var TableHeader = function TableHeader(_ref2) {
+  var children = _ref2.children,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
   var _useTableRowGroup = useTableRowGroup(),
     rowGroupProps = _useTableRowGroup.rowGroupProps;
   return ___EmotionJSX(Box, _extends({}, rowGroupProps, otherProps), children);
-}
-function TableColumnHeader(props) {
-  var _state$sortDescriptor, _state$sortDescriptor2;
-  var column = props.column;
+};
+var TableColumnHeader = function TableColumnHeader(props) {
+  var _state$sortDescriptor, _state$sortDescriptor2, _useStatusClasses2, _state$sortDescriptor3;
+  var column = props.column,
+    isFirst = props.isFirst,
+    isLast = props.isLast;
   var ref = useRef(null);
   var _useDataTableContext = useDataTableContext(),
     state = _useDataTableContext.state;
@@ -240,11 +297,13 @@ function TableColumnHeader(props) {
     columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
   var columnProps = column.props;
   var arrowIcon = ((_state$sortDescriptor = state.sortDescriptor) === null || _state$sortDescriptor === void 0 ? void 0 : _state$sortDescriptor.direction) === 'ascending' && column.key === ((_state$sortDescriptor2 = state.sortDescriptor) === null || _state$sortDescriptor2 === void 0 ? void 0 : _state$sortDescriptor2.column) ? ___EmotionJSX(Icon, {
+    size: 24,
     icon: MenuUpIcon,
     title: {
       name: 'Menu Up Icon'
     }
   }) : ___EmotionJSX(Icon, {
+    size: 24,
     icon: MenuDownIcon,
     color: "active",
     title: {
@@ -252,31 +311,32 @@ function TableColumnHeader(props) {
     }
   });
   var allProps = [columnHeaderProps];
-  var _useStatusClasses = useStatusClasses(_defineProperty({
+  var _useStatusClasses = useStatusClasses((_useStatusClasses2 = {
       'is-column-sortable': columnProps.allowsSorting
-    }, "is-align-".concat(columnProps.align), columnProps.align)),
+    }, _defineProperty(_useStatusClasses2, "is-align-".concat(columnProps.align), columnProps.align), _defineProperty(_useStatusClasses2, 'is-first-column', isFirst), _defineProperty(_useStatusClasses2, 'is-last-column', isLast), _useStatusClasses2)),
     classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(FocusRing, {
     focusRingClass: "is-key-focused",
     focusClass: "is-click-focused"
-  }, ___EmotionJSX(Box, _extends({}, mergeProps.apply(void 0, allProps), {
+  }, ___EmotionJSX(Box, _extends({
+    pl: column.index === 0 ? 0 : 'lg',
     ref: ref,
     variant: "dataTable.tableHeadCell",
     className: classNames
-  }), columnProps.hideHeader ? ___EmotionJSX(VisuallyHidden, null, column.rendered) : ___EmotionJSX(Box, null, column.rendered), columnProps.allowsSorting && ___EmotionJSX(Box, null, arrowIcon)));
-}
-function TableRowGroup(_ref2) {
-  var children = _ref2.children,
-    otherProps = _objectWithoutProperties(_ref2, _excluded2);
+  }, mergeProps.apply(void 0, _concatInstanceProperty(allProps).call(allProps, [column.props.cellProps]))), columnProps.hideHeader ? ___EmotionJSX(VisuallyHidden, null, column.rendered) : ___EmotionJSX(Box, null, column.rendered), columnProps.allowsSorting && ((_state$sortDescriptor3 = state.sortDescriptor) === null || _state$sortDescriptor3 === void 0 ? void 0 : _state$sortDescriptor3.column) === column.key && ___EmotionJSX(Box, null, arrowIcon)));
+};
+var TableRowGroup = function TableRowGroup(_ref3) {
+  var children = _ref3.children,
+    otherProps = _objectWithoutProperties(_ref3, _excluded2);
   var _useTableRowGroup2 = useTableRowGroup(),
     rowGroupProps = _useTableRowGroup2.rowGroupProps;
   return ___EmotionJSX(Box, _extends({}, rowGroupProps, otherProps), children);
-}
-function TableRow(_ref3) {
-  var item = _ref3.item,
-    children = _ref3.children,
-    hasActions = _ref3.hasActions,
-    otherProps = _objectWithoutProperties(_ref3, _excluded3);
+};
+var TableRow = function TableRow(_ref4) {
+  var item = _ref4.item,
+    children = _ref4.children,
+    hasActions = _ref4.hasActions,
+    otherProps = _objectWithoutProperties(_ref4, _excluded3);
   var ref = useRef();
   var _useDataTableContext2 = useDataTableContext(),
     state = _useDataTableContext2.state;
@@ -285,14 +345,14 @@ function TableRow(_ref3) {
       isVirtualized: true
     }, state, ref),
     rowProps = _useTableRow.rowProps;
-  var _useFocusRing = useFocusRing({
+  var _useFocusRing2 = useFocusRing({
       within: true
     }),
-    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
-    focusWithinProps = _useFocusRing.focusProps;
-  var _useFocusRing2 = useFocusRing(),
-    isFocusVisible = _useFocusRing2.isFocusVisible,
-    focusProps = _useFocusRing2.focusProps;
+    isFocusVisibleWithin = _useFocusRing2.isFocusVisible,
+    focusWithinProps = _useFocusRing2.focusProps;
+  var _useFocusRing3 = useFocusRing(),
+    isFocusVisible = _useFocusRing3.isFocusVisible,
+    focusProps = _useFocusRing3.focusProps;
   var props = mergeProps(rowProps, otherProps, focusWithinProps, focusProps);
   var _useStatusClasses3 = useStatusClasses({
       'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
@@ -303,11 +363,11 @@ function TableRow(_ref3) {
     variant: "dataTable.tableRow",
     className: classNames
   }), children);
-}
-function TableHeaderRow(_ref4) {
-  var item = _ref4.item,
-    children = _ref4.children,
-    style = _ref4.style;
+};
+var TableHeaderRow = function TableHeaderRow(_ref5) {
+  var item = _ref5.item,
+    children = _ref5.children,
+    style = _ref5.style;
   var _useDataTableContext3 = useDataTableContext(),
     state = _useDataTableContext3.state;
   var ref = useRef();
@@ -320,9 +380,9 @@ function TableHeaderRow(_ref4) {
     ref: ref,
     style: style
   }), children);
-}
-function TableCell(_ref5) {
-  var cell = _ref5.cell;
+};
+var TableCell = function TableCell(_ref6) {
+  var cell = _ref6.cell;
   var _useDataTableContext4 = useDataTableContext(),
     state = _useDataTableContext4.state;
   var ref = useRef();
@@ -336,16 +396,17 @@ function TableCell(_ref5) {
     classNames = _useStatusClasses4.classNames;
   return ___EmotionJSX(FocusRing, {
     focusRingClass: "is-key-focused"
-  }, ___EmotionJSX(Box, _extends({}, gridCellProps, {
+  }, ___EmotionJSX(Box, _extends({
+    pl: cell.index === 0 ? 0 : 'lg',
     ref: ref,
     variant: "dataTable.tableCell",
     className: classNames
-  }), ___EmotionJSX(Box, {
+  }, mergeProps(gridCellProps, cell.props.cellProps)), ___EmotionJSX(Box, {
     variant: "dataTable.tableCellContents"
   }, cell.rendered)));
-}
-function CenteredWrapper(_ref6) {
-  var children = _ref6.children;
+};
+var CenteredWrapper = function CenteredWrapper(_ref7) {
+  var children = _ref7.children;
   var _useDataTableContext5 = useDataTableContext(),
     state = _useDataTableContext5.state;
   return ___EmotionJSX(Box, {
@@ -356,7 +417,7 @@ function CenteredWrapper(_ref6) {
     role: "rowheader",
     "aria-colspan": state.collection.columns.length
   }, children));
-}
+};
 TableCell.propTypes = {
   cell: PropTypes.shape({
     column: PropTypes.shape({
@@ -364,7 +425,11 @@ TableCell.propTypes = {
         align: PropTypes.string
       })
     }),
+    index: PropTypes.number,
     parentKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    props: PropTypes.shape({
+      cellProps: PropTypes.shape({})
+    }),
     rendered: PropTypes.node
   })
 };
@@ -380,13 +445,17 @@ TableRow.propTypes = {
 };
 TableColumnHeader.propTypes = {
   column: PropTypes.shape({
+    index: PropTypes.number,
     key: PropTypes.string,
     props: PropTypes.shape({
       align: PropTypes.string,
       allowsSorting: PropTypes.bool,
+      cellProps: PropTypes.shape({}),
       hideHeader: PropTypes.bool
     }),
     rendered: PropTypes.node
-  })
+  }),
+  isFirst: PropTypes.bool,
+  isLast: PropTypes.bool
 };
 export default DataTable;