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

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

@@ -29,6 +29,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactStately = require("react-stately");
+var _i18n = require("@react-aria/i18n");
 var _react2 = require("@testing-library/react");
 var _reactHooks = require("@testing-library/react-hooks");
 var _index = require("../../index");
@@ -310,7 +311,7 @@ describe('Async DataTable', function () {
     (0, _react2.act)(function () {
       jest.runAllTimers();
     });
-    expect(onLoadMore).toHaveBeenCalledTimes(2);
+    expect(onLoadMore).toHaveBeenCalledTimes(6);
   });
   test('renders a spinner at the bottom when loading more', function () {
     var testId = 'loadingMoreTable';
@@ -814,10 +815,16 @@ describe('Sortable DataTable with useAsyncList', function () {
     })));
   };
   test('click on column header should sort column A => Z', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee24() {
-    var _renderHook5, result, sortableTable, headers;
+    var utils, collator, _renderHook5, result, sortableTable, headers;
     return _regeneratorRuntime().wrap(function _callee24$(_context28) {
       while (1) switch (_context28.prev = _context28.next) {
         case 0:
+          utils = (0, _reactHooks.renderHook)(function () {
+            return (0, _i18n.useCollator)({
+              numeric: true
+            });
+          });
+          collator = utils.result.current;
           _renderHook5 = (0, _reactHooks.renderHook)(function () {
             return (0, _reactStately.useAsyncList)({
               load: function load() {
@@ -847,7 +854,7 @@ describe('Sortable DataTable with useAsyncList', function () {
                             var first = a[sortDescriptor.column];
                             var second = b[sortDescriptor.column];
                             // eslint-disable-next-line radix
-                            var cmp = ((0, _parseInt2["default"])(first) || first) < ((0, _parseInt2["default"])(second) || second) ? -1 : 1;
+                            var cmp = collator.compare(first, second);
                             if (sortDescriptor.direction === 'descending') {
                               cmp *= -1;
                             }
@@ -867,7 +874,7 @@ describe('Sortable DataTable with useAsyncList', function () {
               }
             });
           }), result = _renderHook5.result;
-          _context28.next = 3;
+          _context28.next = 5;
           return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee19() {
             return _regeneratorRuntime().wrap(function _callee19$(_context23) {
               while (1) switch (_context23.prev = _context23.next) {
@@ -879,11 +886,11 @@ describe('Sortable DataTable with useAsyncList', function () {
               }
             }, _callee19);
           })));
-        case 3:
+        case 5:
           sortableDataTable({
             result: result
           });
-          _context28.next = 6;
+          _context28.next = 8;
           return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee20() {
             return _regeneratorRuntime().wrap(function _callee20$(_context24) {
               while (1) switch (_context24.prev = _context24.next) {
@@ -895,7 +902,7 @@ describe('Sortable DataTable with useAsyncList', function () {
               }
             }, _callee20);
           })));
-        case 6:
+        case 8:
           sortableTable = _react2.screen.getByTestId(testId);
           expect(sortableTable).toBeInTheDocument();
           expect(sortableTable).toBeVisible();
@@ -919,7 +926,7 @@ describe('Sortable DataTable with useAsyncList', function () {
           expect(result.current.items[1].continent).toBe('North America');
           expect(result.current.items[2].continent).toBe('Asia');
           expect(result.current.items[3].continent).toBe('Europe');
-          _context28.next = 31;
+          _context28.next = 33;
           return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee21() {
             return _regeneratorRuntime().wrap(function _callee21$(_context25) {
               while (1) switch (_context25.prev = _context25.next) {
@@ -931,12 +938,12 @@ describe('Sortable DataTable with useAsyncList', function () {
               }
             }, _callee21);
           })));
-        case 31:
+        case 33:
           expect(result.current.items[0].country).toBe('Canada');
           expect(result.current.items[1].country).toBe('China');
           expect(result.current.items[2].country).toBe('France');
           expect(result.current.items[3].country).toBe('USA');
-          _context28.next = 37;
+          _context28.next = 39;
           return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee22() {
             return _regeneratorRuntime().wrap(function _callee22$(_context26) {
               while (1) switch (_context26.prev = _context26.next) {
@@ -948,12 +955,12 @@ describe('Sortable DataTable with useAsyncList', function () {
               }
             }, _callee22);
           })));
-        case 37:
+        case 39:
           expect(result.current.items[0].population).toBe(37000000);
           expect(result.current.items[1].population).toBe(67000000);
           expect(result.current.items[2].population).toBe(320000000);
           expect(result.current.items[3].population).toBe(1398000000);
-          _context28.next = 43;
+          _context28.next = 45;
           return (0, _reactHooks.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee23() {
             return _regeneratorRuntime().wrap(function _callee23$(_context27) {
               while (1) switch (_context27.prev = _context27.next) {
@@ -965,12 +972,12 @@ describe('Sortable DataTable with useAsyncList', function () {
               }
             }, _callee23);
           })));
-        case 43:
+        case 45:
           expect(result.current.items[0].continent).toBe('Asia');
           expect(result.current.items[1].continent).toBe('Europe');
           expect(result.current.items[2].continent).toBe('North America');
           expect(result.current.items[3].continent).toBe('North America');
-        case 47:
+        case 49:
         case "end":
           return _context28.stop();
       }

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

@@ -22,6 +22,7 @@ var DataTableMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "row menu"
   }, (0, _react2.jsx)(_index.Icon, {
+    size: 25,
     icon: _DotsVerticalIcon["default"],
     title: {
       name: 'Dots Vertical Icon'

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

@@ -18,7 +18,7 @@ var _virtualizer2 = require("@react-stately/virtualizer");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["layout", "collection", "focusedKey", "renderView", "renderWrapper", "domRef", "bodyRef", "setTableWidth", "getColumnWidth", "onVisibleRectChange"];
+var _excluded = ["layout", "collection", "renderView", "renderWrapper", "domRef", "bodyRef", "setTableWidth", "getColumnWidth", "onVisibleRectChange"];
 /**
  * Custom Virtualizer using react aria Spectrum TableView/TableVirtualizer
  * Primarily utilizes [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
@@ -29,7 +29,6 @@ var DataTableVirtualizer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
   var _layout$getLayoutInfo;
   var layout = _ref.layout,
     collection = _ref.collection,
-    focusedKey = _ref.focusedKey,
     renderView = _ref.renderView,
     renderWrapper = _ref.renderWrapper,
     domRef = _ref.domRef,
@@ -43,6 +42,7 @@ var DataTableVirtualizer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
   var loadingState = collection.body.props.loadingState;
   var isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
   var onLoadMore = collection.body.props.onLoadMore;
+  /* istanbul ignore next */
   var state = (0, _virtualizer2.useVirtualizerState)({
     layout: layout,
     collection: collection,
@@ -56,7 +56,6 @@ var DataTableVirtualizer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     transitionDuration: isLoading ? 160 : 220
   });
   var _useVirtualizer = (0, _virtualizer.useVirtualizer)({
-      focusedKey: focusedKey,
       scrollToItem: function scrollToItem(key) {
         var item = collection.getItem(key);
         state.virtualizer.scrollToItem(key, {
@@ -71,7 +70,7 @@ var DataTableVirtualizer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     }, state, domRef),
     virtualizerProps = _useVirtualizer.virtualizerProps;
 
-  // If column widths change, need to relay out.
+  // If column widths change, need to relay out
   (0, _utils.useLayoutEffect)(function () {
     state.virtualizer.relayoutNow({
       sizeChanged: true
@@ -85,7 +84,6 @@ var DataTableVirtualizer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
   }, [bodyRef]);
   var onVisibleRectChange = (0, _react.useCallback)(function (rect) {
-    setTableWidth(rect.width);
     state.setVisibleRect(rect);
     if (!isLoading && onLoadMore) {
       var scrollOffset = state.virtualizer.contentSize.height - rect.height * 2;
@@ -93,9 +91,8 @@ var DataTableVirtualizer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
         onLoadMore();
       }
     }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onLoadMore, isLoading, state.setVisibleRect, state.virtualizer]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onLoadMore, isLoading, state.setVisibleRect, state.virtualizer]);
   (0, _utils.useLayoutEffect)(function () {
     if (!isLoading && onLoadMore && !state.isAnimating) {
       if (state.contentSize.height <= state.virtualizer.visibleRect.height) {
@@ -132,7 +129,8 @@ var DataTableVirtualizer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, r
     onVisibleRectChange: (0, _utils.chain)(onVisibleRectChange, onVisibleRectChangeProp),
     onScrollStart: state.startScrolling,
     onScrollEnd: state.endScrolling,
-    onScroll: onScroll
+    onScroll: onScroll,
+    tabIndex: 0
   }, state.visibleViews[1]));
 });
 DataTableVirtualizer.propTypes = {
@@ -152,7 +150,6 @@ DataTableVirtualizer.propTypes = {
     getItem: _propTypes["default"].func
   }),
   domRef: _propTypes["default"].shape({}),
-  focusedKey: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   getColumnWidth: _propTypes["default"].func,
   layout: _propTypes["default"].shape({
     getLayoutInfo: _propTypes["default"].func

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

@@ -23,7 +23,7 @@ _Object$defineProperty(exports, "DataTableMultiLine", {
     return _DataTableMultiLine["default"];
   }
 });
-_Object$defineProperty(exports, "DataTableVirtualize", {
+_Object$defineProperty(exports, "DataTableVirtualizer", {
   enumerable: true,
   get: function get() {
     return _DataTableVirtualizer["default"];

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -312,6 +312,17 @@ export declare const text: {
         wordBreak: string;
         fontFamily: string;
     };
+    tableHeader: {
+        fontSize: string;
+        fontWeight: number;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: string;
+        maxWidth: string;
+        wordWrap: string;
+        wordBreak: string;
+    };
     tableData: {
         fontSize: string;
         fontWeight: number;

package/lib/cjs/components/Text/Text.styles.js

@@ -191,6 +191,12 @@ var text = {
   sectionTitle: sectionTitle,
   subtitle: subtitle,
   tabLabel: tabLabel,
+  tableHeader: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  }),
   tableData: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'sm',
     fontWeight: 1,