@pingux/astro 2.65.0 → 2.66.0-alpha.0

package/lib/cjs/types/shared/index.d.ts

@@ -1,5 +1,6 @@
 export * from './dom';
 export * from './events';
+export * from './loadingState';
 export * from './orientation';
 export * from './style';
 export * from './utils';

package/lib/cjs/types/shared/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -29,8 +29,19 @@ _forEachInstanceProperty(_context2 = _Object$keys(_events)).call(_context2, func
     }
   });
 });
+var _loadingState = require("./loadingState");
+_forEachInstanceProperty(_context3 = _Object$keys(_loadingState)).call(_context3, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _loadingState[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _loadingState[key];
+    }
+  });
+});
 var _orientation = require("./orientation");
-_forEachInstanceProperty(_context3 = _Object$keys(_orientation)).call(_context3, function (key) {
+_forEachInstanceProperty(_context4 = _Object$keys(_orientation)).call(_context4, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _orientation[key]) return;
   _Object$defineProperty(exports, key, {
@@ -41,7 +52,7 @@ _forEachInstanceProperty(_context3 = _Object$keys(_orientation)).call(_context3,
   });
 });
 var _style = require("./style");
-_forEachInstanceProperty(_context4 = _Object$keys(_style)).call(_context4, function (key) {
+_forEachInstanceProperty(_context5 = _Object$keys(_style)).call(_context5, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _style[key]) return;
   _Object$defineProperty(exports, key, {
@@ -52,7 +63,7 @@ _forEachInstanceProperty(_context4 = _Object$keys(_style)).call(_context4, funct
   });
 });
 var _utils = require("./utils");
-_forEachInstanceProperty(_context5 = _Object$keys(_utils)).call(_context5, function (key) {
+_forEachInstanceProperty(_context6 = _Object$keys(_utils)).call(_context6, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _utils[key]) return;
   _Object$defineProperty(exports, key, {
@@ -63,7 +74,7 @@ _forEachInstanceProperty(_context5 = _Object$keys(_utils)).call(_context5, funct
   });
 });
 var _validPositiveInteger = require("./validPositiveInteger");
-_forEachInstanceProperty(_context6 = _Object$keys(_validPositiveInteger)).call(_context6, function (key) {
+_forEachInstanceProperty(_context7 = _Object$keys(_validPositiveInteger)).call(_context7, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _validPositiveInteger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/shared/loadingState.d.ts

@@ -0,0 +1 @@
+export type loadingState = 'error' | 'filtering' | 'idle' | 'loading' | 'loadingMore' | 'sorting';

package/lib/cjs/types/shared/loadingState.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/DataTable/DataTable.js

@@ -24,7 +24,6 @@ import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTab
 import { layoutInfoToStyle, VirtualizerItem } from '@react-aria/virtualizer';
 import { TableLayout } from '@react-stately/layout';
 import { TableColumnLayout, useTableState } from '@react-stately/table';
-import PropTypes from 'prop-types';
 import { DataTableContext, useDataTableContext } from '../../context/DataTableContext';
 import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
 import { Box, Icon, Loader } from '../../index';
@@ -48,14 +47,18 @@ var ROW_HEIGHTS = {
     large: 50
   },
   spacious: {
-    medium: 48
+    medium: 48,
+    large: 60
   }
 };
 var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
-  var scale = 'large';
   var direction = 'ltr';
-  var onAction = props.onAction;
-  var getDefaultWidth = useCallback();
+  var onAction = props.onAction,
+    _props$scale = props.scale,
+    scale = _props$scale === void 0 ? 'large' : _props$scale;
+
+  // const getDefaultWidth = useCallback(() => null, []) as GetDefaultWidth;
+
   var getDefaultMinWidth = useCallback(function (_ref) {
     var _ref$props = _ref.props,
       hideHeader = _ref$props.hideHeader,
@@ -78,23 +81,22 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
   // with table layout, so we need to track it here
   var state = useTableState(_objectSpread({}, props));
   var domRef = useLocalOrForwardRef(ref);
-  var headerRef = useRef();
-  var bodyRef = useRef();
+  var headerRef = useRef(null);
+  var bodyRef = useRef(null);
   var density = props.density || 'regular';
   var columnLayout = useMemo(function () {
     return new TableColumnLayout({
-      getDefaultWidth: getDefaultWidth,
       getDefaultMinWidth: getDefaultMinWidth
     });
-  }, [getDefaultWidth, getDefaultMinWidth]);
+  }, [getDefaultMinWidth]);
   var layout = useMemo(function () {
     return new TableLayout({
       // 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,
+      headingHeight: props.overflowMode === 'wrap' ? undefined : DEFAULT_HEADER_HEIGHT[scale],
+      estimatedHeadingHeight: props.overflowMode === 'wrap' ? DEFAULT_HEADER_HEIGHT[scale] : undefined,
       columnLayout: columnLayout,
       initialCollection: state.collection
     });
@@ -116,10 +118,6 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
   // This overrides collection view's renderWrapper to support DOM hierarchy.
   var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
     var style = layoutInfoToStyle(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
-    if (style.overflow === 'hidden') {
-      style.overflow = 'visible'; // needed to support position: sticky
-    }
-
     if (reusableView.viewType === 'rowgroup') {
       return ___EmotionJSX(TableRowGroup, {
         key: reusableView.key,
@@ -164,7 +162,7 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
       case 'rowgroup':
       case 'row':
       case 'headerrow':
-        return null;
+        return undefined;
       case 'cell':
         {
           return ___EmotionJSX(TableCell, {
@@ -183,7 +181,7 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
           "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
         }));
       default:
-        return null;
+        return undefined;
     }
   };
   var viewport = useRef({
@@ -204,7 +202,9 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
   var isEmpty = state.collection.size === 0;
   var onFocusedResizer = function onFocusedResizer() {
     /* istanbul ignore next */
-    bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+    if (bodyRef.current && headerRef.current) {
+      bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
+    }
   };
   var mergedProps = mergeProps(gridProps, focusProps);
   return ___EmotionJSX(DataTableContext.Provider, {
@@ -234,47 +234,6 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   })));
 });
-DataTable.propTypes = {
-  /**
-    * Sets the amount of vertical padding within each cell.
-    * density: 'compact' | 'regular' | 'spacious'
-    * @default 'regular'
-  */
-  density: PropTypes.string,
-  /** Sets the height of table. */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Determine if the header should be hidden. */
-  hasHiddenHeader: PropTypes.bool,
-  /** Bool that determines if the items are sortable. */
-  isSortable: PropTypes.bool,
-  /** The list of DataTable items. */
-  items: PropTypes.arrayOf(PropTypes.shape({})),
-  /** Reflects current loading state. */
-  loadingState: PropTypes.oneOf(['error', 'filtering', 'idle', 'loading', 'loadingMore', 'sorting']),
-  /** Handler that is called when a user performs an action on a row. */
-  onAction: PropTypes.func,
-  /**
-   * Sets the overflow behavior for the cell contents.
-   * overflowMode: 'wrap' | 'truncate'
-   * @default 'truncate'
-   */
-  overflowMode: PropTypes.string,
-  /** Callback function that fires when more data should be loaded on demand as user scrolls. */
-  onLoadMore: PropTypes.func,
-  /** 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.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])
-};
-DataTable.defaultProps = {
-  width: '100%',
-  height: 565
-};
 var TableHeader = function TableHeader(_ref2) {
   var children = _ref2.children,
     otherProps = _objectWithoutProperties(_ref2, _excluded);
@@ -311,7 +270,7 @@ var TableColumnHeader = function TableColumnHeader(props) {
     }
   });
   var allProps = [columnHeaderProps];
-  var _useStatusClasses = useStatusClasses((_useStatusClasses2 = {
+  var _useStatusClasses = useStatusClasses('', (_useStatusClasses2 = {
       'is-column-sortable': columnProps.allowsSorting
     }, _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;
@@ -323,7 +282,7 @@ var TableColumnHeader = function TableColumnHeader(props) {
     ref: ref,
     variant: "dataTable.tableHeadCell",
     className: classNames
-  }, 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)));
+  }, mergeProps.apply(void 0, _concatInstanceProperty(allProps).call(allProps, [column.props]))), 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,
@@ -337,7 +296,7 @@ var TableRow = function TableRow(_ref4) {
     children = _ref4.children,
     hasActions = _ref4.hasActions,
     otherProps = _objectWithoutProperties(_ref4, _excluded3);
-  var ref = useRef();
+  var ref = useRef(null);
   var _useDataTableContext2 = useDataTableContext(),
     state = _useDataTableContext2.state;
   var _useTableRow = useTableRow({
@@ -354,7 +313,7 @@ var TableRow = function TableRow(_ref4) {
     isFocusVisible = _useFocusRing3.isFocusVisible,
     focusProps = _useFocusRing3.focusProps;
   var props = mergeProps(rowProps, otherProps, focusWithinProps, focusProps);
-  var _useStatusClasses3 = useStatusClasses({
+  var _useStatusClasses3 = useStatusClasses('', {
       'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
     }),
     classNames = _useStatusClasses3.classNames;
@@ -370,7 +329,7 @@ var TableHeaderRow = function TableHeaderRow(_ref5) {
     style = _ref5.style;
   var _useDataTableContext3 = useDataTableContext(),
     state = _useDataTableContext3.state;
-  var ref = useRef();
+  var ref = useRef(null);
   var _useTableHeaderRow = useTableHeaderRow({
       node: item,
       isVirtualized: true
@@ -382,17 +341,18 @@ var TableHeaderRow = function TableHeaderRow(_ref5) {
   }), children);
 };
 var TableCell = function TableCell(_ref6) {
+  var _cell$column;
   var cell = _ref6.cell;
   var _useDataTableContext4 = useDataTableContext(),
     state = _useDataTableContext4.state;
-  var ref = useRef();
-  var columnProps = cell.column.props;
+  var ref = useRef(null);
+  var columnProps = (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.props;
   var _useTableCell = useTableCell({
       node: cell,
       isVirtualized: true
     }, state, ref),
     gridCellProps = _useTableCell.gridCellProps;
-  var _useStatusClasses4 = useStatusClasses(_defineProperty({}, "is-align-".concat(columnProps.align), columnProps.align)),
+  var _useStatusClasses4 = useStatusClasses('', _defineProperty({}, "is-align-".concat(columnProps.align), columnProps.align)),
     classNames = _useStatusClasses4.classNames;
   return ___EmotionJSX(FocusRing, {
     focusRingClass: "is-key-focused"
@@ -401,7 +361,7 @@ var TableCell = function TableCell(_ref6) {
     ref: ref,
     variant: "dataTable.tableCell",
     className: classNames
-  }, mergeProps(gridCellProps, cell.props.cellProps)), ___EmotionJSX(Box, {
+  }, mergeProps(gridCellProps, cell.props)), ___EmotionJSX(Box, {
     variant: "dataTable.tableCellContents"
   }, cell.rendered)));
 };
@@ -418,44 +378,4 @@ var CenteredWrapper = function CenteredWrapper(_ref7) {
     "aria-colspan": state.collection.columns.length
   }, children));
 };
-TableCell.propTypes = {
-  cell: PropTypes.shape({
-    column: PropTypes.shape({
-      props: PropTypes.shape({
-        align: PropTypes.string
-      })
-    }),
-    index: PropTypes.number,
-    parentKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    props: PropTypes.shape({
-      cellProps: PropTypes.shape({})
-    }),
-    rendered: PropTypes.node
-  })
-};
-TableHeaderRow.propTypes = {
-  children: PropTypes.node,
-  item: PropTypes.shape({}),
-  style: PropTypes.shape({})
-};
-TableRow.propTypes = {
-  children: PropTypes.node,
-  hasActions: PropTypes.func,
-  item: PropTypes.shape({})
-};
-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;

package/lib/components/DataTable/DataTable.stories.js

@@ -112,10 +112,12 @@ export default {
     overflowMode: 'truncate'
   }
 };
-var getCellProps = function getCellProps(columnKey) {
+var getCellProps = function getCellProps(columnKey, align) {
   return {
     pr: columnKey !== 'menu' ? 'lg' : 0,
-    pl: columnKey === 'timestamp' || columnKey === 'menu' ? 0 : 'lg'
+    pl: columnKey === 'timestamp' || columnKey === 'menu' ? 0 : 'lg',
+    hideHeader: columnKey === 'menu',
+    align: align
   };
 };
 export var Default = function Default(args) {
@@ -204,19 +206,15 @@ export var Default = function Default(args) {
   }), ___EmotionJSX(DataTableHeader, {
     columns: columns
   }, function (column) {
-    return ___EmotionJSX(DataTableColumn, {
-      cellProps: getCellProps(column.key),
+    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), {
       minWidth: column.key !== 'menu' ? 175 : 32,
-      width: column.key !== 'menu' ? '19.4%' : 32,
-      hideHeader: column.key === 'menu'
-    }, column.name);
+      width: column.key !== 'menu' ? '19.4%' : 32
+    }), column.name);
   }), ___EmotionJSX(DataTableBody, {
     items: rows
   }, function (item) {
     return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, {
-        cellProps: getCellProps(columnKey)
-      }, item[columnKey]);
+      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, false), item[columnKey]);
     });
   }));
 };
@@ -297,22 +295,20 @@ export var Dynamic = function Dynamic(args) {
     }
   });
   return ___EmotionJSX(DataTable, _extends({}, args, {
-    "aria-label": "Dynamic table"
+    "aria-label": "Dynamic table",
+    density: "compact",
+    scale: "medium"
   }), ___EmotionJSX(DataTableHeader, {
     columns: columns
   }, function (column) {
-    return ___EmotionJSX(DataTableColumn, {
-      cellProps: getCellProps(column.key),
-      minWidth: 155,
-      align: "center"
-    }, column.name);
+    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, 'center'), {
+      minWidth: 155
+    }), column.name);
   }), ___EmotionJSX(DataTableBody, {
     items: list.items
   }, function (item) {
     return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, {
-        cellProps: getCellProps(columnKey)
-      }, item[columnKey]);
+      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, 'left'), item[columnKey]);
     });
   }));
 };
@@ -413,12 +409,15 @@ export var Sortable = function Sortable(args) {
               };
               return _context3.abrupt("return", {
                 items: _sortInstanceProperty(items).call(items, function (a, b) {
-                  var first = a[sortDescriptor.column];
-                  var second = b[sortDescriptor.column];
-                  var firstNumericValue = getNumericValue(first);
-                  var secondNumericValue = getNumericValue(second);
-                  var cmp = firstNumericValue && secondNumericValue ? firstNumericValue - secondNumericValue : collator.compare(first, second);
-                  return sortDescriptor.direction === 'descending' ? -cmp : cmp;
+                  if (sortDescriptor.column) {
+                    var first = a[sortDescriptor.column];
+                    var second = b[sortDescriptor.column];
+                    var firstNumericValue = getNumericValue(first);
+                    var secondNumericValue = getNumericValue(second);
+                    var cmp = firstNumericValue && secondNumericValue ? firstNumericValue - secondNumericValue : collator.compare(first, second);
+                    return sortDescriptor.direction === 'descending' ? -cmp : cmp;
+                  }
+                  return 1;
                 })
               });
             case 3:
@@ -441,23 +440,21 @@ export var Sortable = function Sortable(args) {
   return ___EmotionJSX(DataTable, _extends({}, args, {
     "aria-label": "Sortable table",
     sortDescriptor: list.sortDescriptor,
-    onSortChange: _sortInstanceProperty(list)
+    onSortChange: _sortInstanceProperty(list),
+    density: "compact",
+    scale: "medium"
   }), ___EmotionJSX(DataTableHeader, {
     columns: columns
   }, function (column) {
-    return ___EmotionJSX(DataTableColumn, {
-      cellProps: getCellProps(column.key),
+    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, 'center'), {
       allowsSorting: true,
-      minWidth: 155,
-      align: "center"
-    }, column.name);
+      minWidth: 155
+    }), column.name);
   }), ___EmotionJSX(DataTableBody, {
     items: list.items
   }, function (item) {
     return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, {
-        cellProps: getCellProps(columnKey)
-      }, item[columnKey]);
+      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, false), item[columnKey]);
     });
   }));
 };
@@ -534,14 +531,15 @@ export var AsyncLoading = function AsyncLoading(args) {
   });
   return ___EmotionJSX(DataTable, _extends({}, args, {
     "aria-label": "Custom content table",
-    onAction: action('onAction')
+    onAction: action('onAction'),
+    density: "compact",
+    scale: "medium"
   }), ___EmotionJSX(DataTableHeader, {
     columns: columns
   }, function (column) {
-    return ___EmotionJSX(DataTableColumn, {
-      cellProps: getCellProps(column.key),
+    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), {
       minWidth: 155
-    }, column.name);
+    }), column.name);
   }), ___EmotionJSX(DataTableBody, {
     items: list.items,
     loadingState: list.loadingState,
@@ -550,9 +548,7 @@ export var AsyncLoading = function AsyncLoading(args) {
     return ___EmotionJSX(DataTableRow, {
       key: item.name
     }, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, {
-        cellProps: getCellProps(columnKey)
-      }, item[columnKey]);
+      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, false), item[columnKey]);
     });
   }));
 };