@pingux/astro 2.218.0 → 2.219.0

package/lib/components/TableBase/TableBase.stories.js

@@ -36,7 +36,7 @@ import _parseFloat from "@babel/runtime-corejs3/core-js-stable/parse-float";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context7, _context8; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(t), !0)).call(_context7, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context8 = ownKeys(Object(t))).call(_context8, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useRef, useState } from 'react';
 import { useCollator } from '@react-aria/i18n';
 import { useAsyncList } from '@react-stately/data';
@@ -421,6 +421,152 @@ export var WithResizableColumns = function WithResizableColumns() {
     }, ___EmotionJSX(Cell, null, item.type), ___EmotionJSX(Cell, null, item.date), ___EmotionJSX(Cell, null, item.additional_grant), ___EmotionJSX(Cell, null, item.total_grant));
   })));
 };
+export var WithSortingAndResizing = function WithSortingAndResizing() {
+  var columns = [{
+    name: 'Country',
+    key: 'country',
+    isSortable: true
+  }, {
+    name: 'Population',
+    key: 'population',
+    isSortable: true
+  }, {
+    name: 'Continent',
+    key: 'continent',
+    isSortable: false
+  }];
+  var rows = [{
+    id: 1,
+    country: 'Austria',
+    population: '25,000,000',
+    continent: 'Oceania'
+  }, {
+    id: 2,
+    country: 'Canada',
+    population: '37,000,000',
+    continent: 'North America'
+  }, {
+    id: 3,
+    country: 'China',
+    population: '1,398,000,000',
+    continent: 'Asia'
+  }, {
+    id: 4,
+    country: 'Ethiopia',
+    population: '120,000,000',
+    continent: 'Africa'
+  }, {
+    id: 5,
+    country: 'France',
+    population: '67,000,000',
+    continent: 'Europe'
+  }, {
+    id: 6,
+    country: 'Mexico',
+    population: '126,000,000',
+    continent: 'North America'
+  }, {
+    id: 7,
+    country: 'USA',
+    population: '320,000,000',
+    continent: 'North America'
+  }];
+  var collator = useCollator({
+    numeric: true
+  });
+  var list = useAsyncList({
+    load: function load() {
+      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        return _regeneratorRuntime().wrap(function _callee3$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              return _context5.abrupt("return", {
+                items: rows
+              });
+            case 1:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee3);
+      }))();
+    },
+    sort: function sort(_ref2) {
+      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+        var items, sortDescriptor, getNumericValue;
+        return _regeneratorRuntime().wrap(function _callee4$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              items = _ref2.items, sortDescriptor = _ref2.sortDescriptor;
+              getNumericValue = function getNumericValue(str) {
+                return !_Number$isNaN(str) && _parseFloat(str.replace(/,/g, ''));
+              };
+              return _context6.abrupt("return", {
+                items: _sortInstanceProperty(items).call(items, function (a, b) {
+                  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:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee4);
+      }))();
+    },
+    initialSortDescriptor: {
+      column: 'country',
+      direction: 'ascending'
+    }
+  });
+  return ___EmotionJSX(Card, {
+    variant: "cards.tableWrapper"
+  }, ___EmotionJSX(TableBase, {
+    "aria-label": "Table with sorting and resizing enabled together",
+    onSortChange: function onSortChange(descriptor) {
+      if (descriptor.column) {
+        _sortInstanceProperty(list).call(list, descriptor);
+      }
+    },
+    sortDescriptor: list.sortDescriptor
+  }, ___EmotionJSX(THead, {
+    columns: columns
+  }, function (column) {
+    return ___EmotionJSX(Column, {
+      minWidth: 155,
+      allowsSorting: column.isSortable,
+      allowsResizing: column.key !== columns[columns.length - 1].key
+    }, column.name);
+  }), ___EmotionJSX(TBody, {
+    items: list.items,
+    loadingState: list.loadingState,
+    onLoadMore: list.loadMore
+  }, function (item) {
+    return ___EmotionJSX(Row, {
+      key: item.name
+    }, function (columnKey) {
+      return ___EmotionJSX(Cell, null, item[columnKey]);
+    });
+  })));
+};
+
+// Added to bypass color contrast issue due to virtualizer
+WithSortingAndResizing.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 export var WithMinMaxColumnWidth = function WithMinMaxColumnWidth() {
   return ___EmotionJSX(Card, {
     variant: "cards.tableWrapper"

package/lib/components/TableBase/TableBase.styles.js

@@ -127,7 +127,11 @@ var head = _objectSpread(_objectSpread({}, text.label), {}, {
   '&:focus-visible': {
     outline: 'none'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    '& .resizer': {
+      backgroundColor: 'focus'
+    }
+  })
 });
 var resizer = {
   cursor: 'col-resize',
@@ -135,13 +139,34 @@ var resizer = {
   width: '2px',
   height: '100%',
   backgroundColor: 'neutral.10',
+  boxSizing: 'content-box',
+  paddingLeft: '0.25rem',
+  paddingRight: '0.25rem',
+  backgroundClip: 'content-box',
   position: 'absolute',
-  right: '0px',
+  right: '-0.25rem',
   top: '0',
-  '&.is-focused': {
-    backgroundColor: 'focus'
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-resizing': {
+    backgroundColor: 'focus',
+    outline: '0px'
   }
 };
+
+// Resets native <button> chrome so the sort trigger reads as plain header
+// text/icon, matching `head`'s typography, while remaining its own
+// focusable, activatable element (a sibling to the resizer, not a
+// descendant of it, or vice versa).
+var sortButton = _objectSpread(_objectSpread({}, text.label), {}, {
+  fontWeight: 500,
+  appearance: 'none',
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  margin: 0,
+  cursor: 'pointer',
+  textAlign: 'left'
+});
 var tbody = {
   borderBottom: '1px solid',
   borderBottomColor: 'neutral.80',
@@ -186,5 +211,6 @@ export default {
   data: data,
   head: head,
   row: row,
-  resizer: resizer
+  resizer: resizer,
+  sortButton: sortButton
 };