@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/cjs/components/CopyText/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _CopyText["default"];
   }
 });
-
 var _CopyText = _interopRequireDefault(require("./CopyText"));

package/lib/cjs/components/DataTable/DataTable.js

@@ -1,83 +1,43 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
-
 var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
-
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
-
 var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
-
 var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-var _utils = require("@react-aria/utils");
-
-var _focus = require("@react-aria/focus");
-
-var _visuallyHidden = require("@react-aria/visually-hidden");
-
+var _reactAria = require("react-aria");
 var _virtualizer = require("@react-aria/virtualizer");
-
-var _table = require("@react-stately/table");
-
 var _layout = require("@react-stately/layout");
-
-var _table2 = require("@react-aria/table");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
+var _table = require("@react-stately/table");
 var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
-
 var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
-
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DataTableContext = require("../../context/DataTableContext");
-
-var _DataTableVirtualizer = _interopRequireDefault(require("./DataTableVirtualizer"));
-
 var _hooks = require("../../hooks");
-
 var _index = require("../../index");
-
+var _DataTableVirtualizer = _interopRequireDefault(require("./DataTableVirtualizer"));
 var _react2 = require("@emotion/react");
-
 var _excluded = ["children"],
-    _excluded2 = ["children"],
-    _excluded3 = ["item", "children", "hasActions"];
-
+  _excluded2 = ["children"],
+  _excluded3 = ["item", "children", "hasActions"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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) { (0, _defineProperty2["default"])(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; }
-
 var DEFAULT_HEADER_HEIGHT = {
   medium: 34,
   large: 37.5
@@ -96,12 +56,38 @@ var ROW_HEIGHTS = {
     large: 75
   }
 };
+
+/**
+ * Inspired by [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+ * from React Spectrum and [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
+ * from React Stately.
+ *
+ * DataTable is a complex collection component that is built from many child elements including
+ * columns, rows and cells. Columns are defined within DataTableHeader element via DataTableColumn
+ * and rows are defined within a DataTableBody element via DataTableRow. Rows contain DataTableCell
+ * elements that correspond to each column.
+ *
+ * [TableHeader](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=defined%20using%20the-,TableHeader,-%2C%20Column%2C)
+ * uses the alias DataTableHeader.
+ *
+ * [Column](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=the%20TableHeader%2C-,Column,-%2C%20TableBody%2C)
+ * uses the alias DataTableColumn.
+ *
+ * [Cell](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=Row%2C%20and-,Cell,-components%2C%20which%20support)
+ * uses the alias DataTableCell.
+ *
+ * [Row](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20TableBody%2C-,Row,-%2C%20and%20Cell%20components)
+ * uses the alias DataTableCell.
+ *
+ * [TableBody](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20Column%2C-,TableBody,-%2C%20Row%2C%20and)
+ * uses the alias DataTableBody.
+*/
+
 var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var width = props.width,
-      height = props.height,
-      onAction = props.onAction;
+    height = props.height,
+    onAction = props.onAction;
   var direction = 'ltr'; // useLocale override
-
   var scale = 'large'; // useProvider override
 
   var getDefaultWidth = (0, _react.useCallback)();
@@ -124,18 +110,16 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [props.overflowMode, scale, density]);
   layout.collection = state.collection;
   layout.getColumnWidth = columnState.getColumnWidth;
+  var _useTable = (0, _reactAria.useTable)(_objectSpread(_objectSpread({}, props), {}, {
+      isVirtualized: true,
+      layout: layout,
+      onRowAction: onAction
+    }), state, domRef),
+    gridProps = _useTable.gridProps;
 
-  var _useTable = (0, _table2.useTable)(_objectSpread(_objectSpread({}, props), {}, {
-    isVirtualized: true,
-    layout: layout,
-    onRowAction: onAction
-  }), state, domRef),
-      gridProps = _useTable.gridProps; // This overrides collection view's renderWrapper to support DOM hierarchy.
-
-
+  // This overrides collection view's renderWrapper to support DOM hierarchy.
   var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
     var style = (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
-
     if (style.overflow === 'hidden') {
       style.overflow = 'visible'; // needed to support position: sticky
     }
@@ -146,14 +130,12 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         style: style
       }, renderChildren(children));
     }
-
     if (reusableView.viewType === 'header') {
       return (0, _react2.jsx)(TableHeader, {
         key: reusableView.key,
         style: style
       }, renderChildren(children));
     }
-
     if (reusableView.viewType === 'row') {
       return (0, _react2.jsx)(TableRow, {
         key: reusableView.key,
@@ -162,7 +144,6 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         hasActions: onAction
       }, renderChildren(children));
     }
-
     if (reusableView.viewType === 'headerrow') {
       return (0, _react2.jsx)(TableHeaderRow, {
         key: reusableView.key,
@@ -170,14 +151,12 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         item: reusableView.content
       }, renderChildren(children));
     }
-
     return (0, _react2.jsx)(_virtualizer.VirtualizerItem, {
       key: reusableView.key,
       reusableView: reusableView,
       parent: parent
     });
   };
-
   var renderView = function renderView(type, item) {
     switch (type) {
       case 'header':
@@ -185,30 +164,25 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       case 'row':
       case 'headerrow':
         return null;
-
       case 'cell':
         {
           return (0, _react2.jsx)(TableCell, {
             cell: item
           });
         }
-
       case 'column':
         return (0, _react2.jsx)(TableColumnHeader, {
           column: item
         });
-
       case 'loader':
         return (0, _react2.jsx)(CenteredWrapper, null, (0, _react2.jsx)(_index.Loader, {
           color: "accent.70",
           "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
         }));
-
       default:
         return null;
     }
   };
-
   var viewport = (0, _react.useRef)({
     x: 0,
     y: 0,
@@ -219,7 +193,6 @@ var DataTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     if (viewport.current.width === e.width && viewport.current.height === e.height) {
       return;
     }
-
     viewport.current = e;
   }, []);
   return (0, _react2.jsx)(_DataTableContext.DataTableContext.Provider, {
@@ -254,41 +227,30 @@ DataTable.propTypes = {
     * @default 'regular'
   */
   density: _propTypes["default"].string,
-
   /** Sets the height of table. */
   height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-
   /** Determine if the header should be hidden. */
   hasHiddenHeader: _propTypes["default"].bool,
-
   /** Bool that determines if the items are sortable. */
   isSortable: _propTypes["default"].bool,
-
   /** The list of DataTable items. */
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
-
   /** Reflects current loading state. */
   loadingState: _propTypes["default"].oneOf(['error', 'filtering', 'idle', 'loading', 'loadingMore', 'sorting']),
-
   /** Handler that is called when a user performs an action on a row. */
   onAction: _propTypes["default"].func,
-
   /**
    * Sets the overflow behavior for the cell contents.
    * overflowMode: 'wrap' | 'truncate'
    * @default 'truncate'
    */
   overflowMode: _propTypes["default"].string,
-
   /** Callback function that fires when more data should be loaded on demand as user scrolls. */
   onLoadMore: _propTypes["default"].func,
-
   /** Callback function that fires when sortable column header is pressed. */
   onSortChange: _propTypes["default"].func,
-
   /** Defines the current column key to sort by and the sort direction. */
   sortDescriptor: _propTypes["default"].oneOf(['ascending', 'descending']),
-
   /** Sets the width of table. */
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
 };
@@ -296,32 +258,24 @@ DataTable.defaultProps = {
   width: '100%',
   height: 565
 };
-
 function TableHeader(_ref) {
   var children = _ref.children,
-      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-
-  var _useTableRowGroup = (0, _table2.useTableRowGroup)(),
-      rowGroupProps = _useTableRowGroup.rowGroupProps;
-
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var _useTableRowGroup = (0, _reactAria.useTableRowGroup)(),
+    rowGroupProps = _useTableRowGroup.rowGroupProps;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
 }
-
 function TableColumnHeader(props) {
   var _state$sortDescriptor, _state$sortDescriptor2;
-
   var column = props.column;
   var ref = (0, _react.useRef)(null);
-
   var _useDataTableContext = (0, _DataTableContext.useDataTableContext)(),
-      state = _useDataTableContext.state;
-
-  var _useTableColumnHeader = (0, _table2.useTableColumnHeader)({
-    node: column,
-    isVirtualized: true
-  }, state, ref),
-      columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
-
+    state = _useDataTableContext.state;
+  var _useTableColumnHeader = (0, _reactAria.useTableColumnHeader)({
+      node: column,
+      isVirtualized: true
+    }, state, ref),
+    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) ? (0, _react2.jsx)(_index.Icon, {
     icon: _MenuUpIcon["default"]
@@ -330,113 +284,89 @@ function TableColumnHeader(props) {
     color: "active"
   });
   var allProps = [columnHeaderProps];
-
   var _useStatusClasses = (0, _hooks.useStatusClasses)((0, _defineProperty2["default"])({
-    'is-column-sortable': columnProps.allowsSorting
-  }, "is-align-".concat(columnProps.align), columnProps.align)),
-      classNames = _useStatusClasses.classNames;
-
-  return (0, _react2.jsx)(_focus.FocusRing, {
+      'is-column-sortable': columnProps.allowsSorting
+    }, "is-align-".concat(columnProps.align), columnProps.align)),
+    classNames = _useStatusClasses.classNames;
+  return (0, _react2.jsx)(_reactAria.FocusRing, {
     focusRingClass: "is-key-focused",
     focusClass: "is-click-focused"
-  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, _utils.mergeProps.apply(void 0, allProps), {
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, _reactAria.mergeProps.apply(void 0, allProps), {
     ref: ref,
     variant: "dataTable.tableHeadCell",
     className: classNames
-  }), columnProps.hideHeader ? (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, column.rendered) : (0, _react2.jsx)(_index.Box, null, column.rendered), columnProps.allowsSorting && (0, _react2.jsx)(_index.Box, null, arrowIcon)));
+  }), columnProps.hideHeader ? (0, _react2.jsx)(_reactAria.VisuallyHidden, null, column.rendered) : (0, _react2.jsx)(_index.Box, null, column.rendered), columnProps.allowsSorting && (0, _react2.jsx)(_index.Box, null, arrowIcon)));
 }
-
 function TableRowGroup(_ref2) {
   var children = _ref2.children,
-      otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-
-  var _useTableRowGroup2 = (0, _table2.useTableRowGroup)(),
-      rowGroupProps = _useTableRowGroup2.rowGroupProps;
-
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+  var _useTableRowGroup2 = (0, _reactAria.useTableRowGroup)(),
+    rowGroupProps = _useTableRowGroup2.rowGroupProps;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowGroupProps, otherProps), children);
 }
-
 function TableRow(_ref3) {
   var item = _ref3.item,
-      children = _ref3.children,
-      hasActions = _ref3.hasActions,
-      otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
+    children = _ref3.children,
+    hasActions = _ref3.hasActions,
+    otherProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
   var ref = (0, _react.useRef)();
-
   var _useDataTableContext2 = (0, _DataTableContext.useDataTableContext)(),
-      state = _useDataTableContext2.state;
-
-  var _useTableRow = (0, _table2.useTableRow)({
-    node: item,
-    isVirtualized: true
-  }, state, ref),
-      rowProps = _useTableRow.rowProps;
-
-  var _useFocusRing = (0, _focus.useFocusRing)({
-    within: true
-  }),
-      isFocusVisibleWithin = _useFocusRing.isFocusVisible,
-      focusWithinProps = _useFocusRing.focusProps;
-
-  var _useFocusRing2 = (0, _focus.useFocusRing)(),
-      isFocusVisible = _useFocusRing2.isFocusVisible,
-      focusProps = _useFocusRing2.focusProps;
-
-  var props = (0, _utils.mergeProps)(rowProps, otherProps, focusWithinProps, focusProps);
-
+    state = _useDataTableContext2.state;
+  var _useTableRow = (0, _reactAria.useTableRow)({
+      node: item,
+      isVirtualized: true
+    }, state, ref),
+    rowProps = _useTableRow.rowProps;
+  var _useFocusRing = (0, _reactAria.useFocusRing)({
+      within: true
+    }),
+    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
+    focusWithinProps = _useFocusRing.focusProps;
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
+    isFocusVisible = _useFocusRing2.isFocusVisible,
+    focusProps = _useFocusRing2.focusProps;
+  var props = (0, _reactAria.mergeProps)(rowProps, otherProps, focusWithinProps, focusProps);
   var _useStatusClasses3 = (0, _hooks.useStatusClasses)({
-    'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
-  }),
-      classNames = _useStatusClasses3.classNames;
-
+      'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
+    }),
+    classNames = _useStatusClasses3.classNames;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, props, {
     ref: ref,
     variant: "dataTable.tableRow",
     className: classNames
   }), children);
 }
-
 function TableHeaderRow(_ref4) {
   var item = _ref4.item,
-      children = _ref4.children,
-      style = _ref4.style;
-
+    children = _ref4.children,
+    style = _ref4.style;
   var _useDataTableContext3 = (0, _DataTableContext.useDataTableContext)(),
-      state = _useDataTableContext3.state;
-
+    state = _useDataTableContext3.state;
   var ref = (0, _react.useRef)();
-
-  var _useTableHeaderRow = (0, _table2.useTableHeaderRow)({
-    node: item,
-    isVirtualized: true
-  }, state, ref),
-      rowProps = _useTableHeaderRow.rowProps;
-
+  var _useTableHeaderRow = (0, _reactAria.useTableHeaderRow)({
+      node: item,
+      isVirtualized: true
+    }, state, ref),
+    rowProps = _useTableHeaderRow.rowProps;
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, rowProps, {
     ref: ref,
     style: style
   }), children);
 }
-
 function TableCell(_ref5) {
   var cell = _ref5.cell;
-
   var _useDataTableContext4 = (0, _DataTableContext.useDataTableContext)(),
-      state = _useDataTableContext4.state;
-
+    state = _useDataTableContext4.state;
   var ref = (0, _react.useRef)();
   var columnProps = cell.column.props;
-
-  var _useTableCell = (0, _table2.useTableCell)({
-    node: cell,
-    isVirtualized: true
-  }, state, ref),
-      gridCellProps = _useTableCell.gridCellProps;
-
+  var _useTableCell = (0, _reactAria.useTableCell)({
+      node: cell,
+      isVirtualized: true
+    }, state, ref),
+    gridCellProps = _useTableCell.gridCellProps;
   var _useStatusClasses4 = (0, _hooks.useStatusClasses)((0, _defineProperty2["default"])({}, "is-align-".concat(columnProps.align), columnProps.align)),
-      classNames = _useStatusClasses4.classNames;
-
-  return (0, _react2.jsx)(_focus.FocusRing, {
+    classNames = _useStatusClasses4.classNames;
+  return (0, _react2.jsx)(_reactAria.FocusRing, {
     focusRingClass: "is-key-focused"
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, gridCellProps, {
     ref: ref,
@@ -446,13 +376,10 @@ function TableCell(_ref5) {
     variant: "dataTable.tableCellContents"
   }, cell.rendered)));
 }
-
 function CenteredWrapper(_ref6) {
   var children = _ref6.children;
-
   var _useDataTableContext5 = (0, _DataTableContext.useDataTableContext)(),
-      state = _useDataTableContext5.state;
-
+    state = _useDataTableContext5.state;
   return (0, _react2.jsx)(_index.Box, {
     role: "row",
     "aria-rowindex": state.collection.headerRows.length + state.collection.size + 1,
@@ -462,7 +389,6 @@ function CenteredWrapper(_ref6) {
     "aria-colspan": state.collection.columns.length
   }, children));
 }
-
 TableCell.propTypes = {
   cell: _propTypes["default"].shape({
     column: _propTypes["default"].shape({