@pingux/astro 2.218.0 → 2.219.0-alpha.0

package/lib/cjs/components/NumberField/NumberField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NumberFieldProps } from '../../types';
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default NumberField;

package/lib/cjs/components/NumberField/NumberField.js

@@ -22,18 +22,15 @@ var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _i18n = require("@react-aria/i18n");
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var displayName = 'NumberField';
 var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var helperText = props.helperText,
     status = props.status;
@@ -48,9 +45,9 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _reactStately.useNumberFieldState)(_objectSpread(_objectSpread({}, props), {}, {
     locale: locale
   }));
-  var inputRef = _react["default"].useRef();
-  var incrRef = _react["default"].useRef();
-  var decRef = _react["default"].useRef();
+  var inputRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var incrRef = _react["default"].useRef(null);
+  var decRef = _react["default"].useRef(null);
   var _useNumberField = (0, _reactAria.useNumberField)(props, state, inputRef),
     labelProps = _useNumberField.labelProps,
     groupProps = _useNumberField.groupProps,
@@ -63,16 +60,12 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     fieldControlWrapperProps = _useField.fieldControlWrapperProps,
     fieldLabelProps = _useField.fieldLabelProps;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return inputRef.current;
-  });
   var ControlArrows = (0, _react2.jsx)(_.Box, {
     variant: "forms.numberField.arrows"
   }, (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, incrementButtonProps, {
-    ref: decRef,
-    tabIndex: "0",
-    p: !isOnyx && 0
+    ref: incrRef,
+    tabIndex: 0,
+    p: !isOnyx ? 0 : undefined
   }), (0, _react2.jsx)(_.Icon, {
     icon: MenuUp,
     size: numberFieldArrowSize,
@@ -81,9 +74,9 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     "aria-hidden": "true"
   })), (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({}, decrementButtonProps, {
-    ref: incrRef,
-    tabIndex: "0",
-    p: !isOnyx && 0
+    ref: decRef,
+    tabIndex: 0,
+    p: !isOnyx ? 0 : undefined
   }), (0, _react2.jsx)(_.Icon, {
     icon: MenuDown,
     size: numberFieldArrowSize,
@@ -92,18 +85,16 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     "aria-hidden": "true"
   })));
-
-  // this needed to remove console warning in React 16
-  // I believe once we update to 17 - we can remove this
+  var typedFieldControlInputProps = fieldControlInputProps;
   var onInputFocus = function onInputFocus(e) {
-    e.persist();
-    fieldControlInputProps.onFocus(e);
-    inputProps.onFocus(e);
+    var _typedFieldControlInp, _inputProps$onFocus;
+    (_typedFieldControlInp = typedFieldControlInputProps.onFocus) === null || _typedFieldControlInp === void 0 || _typedFieldControlInp.call(typedFieldControlInputProps, e);
+    (_inputProps$onFocus = inputProps.onFocus) === null || _inputProps$onFocus === void 0 || _inputProps$onFocus.call(inputProps, e);
   };
   var onInputBlur = function onInputBlur(e) {
-    e.persist();
-    fieldControlInputProps.onBlur(e);
-    inputProps.onBlur(e);
+    var _typedFieldControlInp2, _inputProps$onBlur;
+    (_typedFieldControlInp2 = typedFieldControlInputProps.onBlur) === null || _typedFieldControlInp2 === void 0 || _typedFieldControlInp2.call(typedFieldControlInputProps, e);
+    (_inputProps$onBlur = inputProps.onBlur) === null || _inputProps$onBlur === void 0 || _inputProps$onBlur.call(inputProps, e);
   };
   var updatedFieldControlInputProps = _objectSpread(_objectSpread({}, fieldControlInputProps), {}, {
     onFocus: onInputFocus,
@@ -113,13 +104,13 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var updatedLabelProps = _objectSpread({}, (0, _reactAria.mergeProps)(fieldLabelProps, labelProps));
   var inputPropsValue = inputProps.value || 0;
   var inputPropsNumericValue = state.numberValue;
-  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)('NumberField'), fieldContainerProps), (0, _react2.jsx)(_.Label, updatedLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({}, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Label, updatedLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.numberField.noDefaultArrows"
   }, groupProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "forms.numberField.arrowsWrapper"
   }, fieldControlWrapperProps, {
     role: "spinbutton",
-    "aria-valuetext": inputPropsValue,
+    "aria-valuetext": String(inputPropsValue),
     "aria-valuenow": inputPropsNumericValue,
     "aria-labelledby": updatedLabelProps.id
   }), (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
@@ -134,68 +125,5 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     id: helperTextId
   }, helperText)));
 });
-var _default = exports["default"] = NumberField;
-NumberField.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  /** A custom aria-label for the decrement button.
-   * If not provided, the localized string "Decrement" is used. */
-  decrementAriaLabel: _propTypes["default"].string,
-  /** A custom aria-label for the increment button.
-   * If not provided, the localized string "Increment" is used. */
-  incrementAriaLabel: _propTypes["default"].string,
-  /** Formatting options for the value displayed in the number field.
-   * This also affects what characters are allowed to be typed by the user.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat)
-   * */
-  formatOptions: _propTypes["default"].shape({}),
-  /** Whether the input is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the input can be selected but not changed by the user. */
-  isReadOnly: _propTypes["default"].bool,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: _propTypes["default"].bool,
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: _propTypes["default"].bool,
-  /**
-   * Callback fired when focus is lost on the input element.
-   */
-  onBlur: _propTypes["default"].func,
-  /**
-   * Callback fired when focus is lost on the input element.
-   */
-  onFocus: _propTypes["default"].func,
-  /** Handler that is called when the element's focus status changes. */
-  onFocusChange: _propTypes["default"].func,
-  /** Handler that is called when a key is pressed. */
-  onKeyDown: _propTypes["default"].func,
-  /** Handler that is called when a key is released. */
-  onKeyUp: _propTypes["default"].func,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: _propTypes["default"].string,
-  /** The amount that the input value changes with each increment or decrement "tick".
-   * The step prop can be used to snap the value to certain increments.
-   * You can read more about this prop here
-   * [Step values](https://react-spectrum.adobe.com/react-aria/useNumberField.html#step-values)
-   * */
-  step: _propTypes["default"].number,
-  /** The smallest value allowed for the input. */
-  minValue: _propTypes["default"].number,
-  /** The largest value allowed for the input. */
-  maxValue: _propTypes["default"].number,
-  /** The rendered label for the field. */
-  label: _propTypes["default"].node,
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].node,
-  /** Props object that is spread directly into the helphint element. */
-  helpHintProps: _propTypes["default"].shape({}),
-  /** If present this prop will cause a help hint to render in the label of the field. */
-  hintText: _propTypes["default"].string,
-  /**
-   * Handler that is called when the value changes.
-   * (value: number) => void
-   */
-  onChange: _propTypes["default"].func,
-  /** The default value (uncontrolled). */
-  defaultValue: _propTypes["default"].number,
-  /** The current value (controlled). */
-  value: _propTypes["default"].number
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
+NumberField.displayName = displayName;
+var _default = exports["default"] = NumberField;

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

@@ -0,0 +1,19 @@
+import { ThemeUICSSObject } from 'theme-ui';
+declare const _default: {
+    arrowsWrapper: ThemeUICSSObject;
+    arrows: ThemeUICSSObject;
+    noDefaultArrows: {
+        'input::-webkit-outer-spin-button': {
+            WebkitAppearance: string;
+            margin: number;
+        };
+        'input::-webkit-inner-spin-button': {
+            WebkitAppearance: string;
+            margin: number;
+        };
+        'input[type=number]': {
+            MozAppearance: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/NumberField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './NumberField';

package/lib/cjs/components/TableBase/TableBase.js

@@ -380,7 +380,8 @@ function Resizer(props) {
       onResizeEnd: onResizeEnd
     }, layoutState, ref),
     resizerProps = _useTableColumnResize.resizerProps,
-    inputProps = _useTableColumnResize.inputProps;
+    inputProps = _useTableColumnResize.inputProps,
+    isResizing = _useTableColumnResize.isResizing;
   var _useFocusRing = (0, _focus.useFocusRing)(),
     isFocusVisible = _useFocusRing.isFocusVisible,
     focusProps = _useFocusRing.focusProps;
@@ -389,8 +390,9 @@ function Resizer(props) {
   // keyboard events fired on the input (Enter to start resize, Escape/Tab to
   // end it) bubble up to the element with the keyboard handlers.
 
-  var _useStatusClasses3 = (0, _hooks.useStatusClasses)('', {
-      isFocused: isFocusVisible
+  var _useStatusClasses3 = (0, _hooks.useStatusClasses)('resizer', {
+      isFocused: isFocusVisible,
+      isResizing: isResizing
     }),
     classNames = _useStatusClasses3.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
@@ -455,11 +457,15 @@ function TableColumnHeader(props) {
       width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key),
       position: 'relative'
     }, column.props.sx)
-  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps, column.props)), (0, _react2.jsx)(_.Box, {
+  }, (0, _utils.mergeProps)(columnHeaderProps, column.props)), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    as: "button",
+    type: "button",
     isRow: true,
     gap: "sm",
-    alignItems: "center"
-  }, (0, _react2.jsx)(_.Text, {
+    alignItems: "center",
+    variant: "tableBase.sortButton",
+    "aria-label": "Sort by ".concat(column.textValue)
+  }, (0, _utils.mergeProps)(focusProps)), (0, _react2.jsx)(_.Text, {
     as: "h4",
     variant: "headText"
   }, column.rendered), allowsSorting && sortIcon), allowsResizing && (0, _react2.jsx)(Resizer, {

package/lib/cjs/components/TableBase/TableBase.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TableBaseStories from './TableBase.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={TableBaseStories} isTemplate />
 
@@ -42,23 +43,16 @@ This component requires these additional components:
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | Moves focus to the next focusable component. All focusable components in the table are included in the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Space or Enter | Focuses the component and triggers an action if one is associated with it. |
-| Arrow keys | Can be used to navigate between the components in the table. |
-| Home or Page Up | Shifts the focus to the first row. |
-| End or Page Down | Shifts the focus to the last visible row. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`aria-label`** attribute should be provided on the `TableBase` to give the table an accessible name. When a visible `TableCaption` is present, use **`aria-labelledby`** to associate the caption with the table instead.
-- The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure.
-- Each `Row` uses the **`aria-rowindex`** attribute to enumerate its position within the table.
-- Each `Column` and `Cell` uses the **`aria-colindex`** attribute to enumerate its position within its row.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus into the table (from outside) or out of the table (to the next focusable element after it). The table is a single stop in the page tab sequence — Tab does not move focus between rows or cells within the table.' },
+  { key: 'Shift + Tab', description: 'Moves focus out of the table to the previous focusable element (or into the table from after it).' },
+  { key: 'Space or Enter', description: 'Triggers an action on the focused component, such as toggling row selection or sorting a column.' },
+  { key: 'Arrow keys', description: 'Moves focus between rows and cells within the table.' },
+  { key: 'Home or Page Up', description: 'Shifts the focus to the first row.' },
+  { key: 'End or Page Down', description: 'Shifts the focus to the last visible row.' },
+]} screenReaderRows={[
+  'The **`aria-label`** attribute should be provided on the `TableBase` to give the table an accessible name. When a visible `TableCaption` is present, use **`aria-labelledby`** to associate the caption with the table instead.',
+  'The **`aria-rowcount`** and **`aria-columncount`** attributes are used to indicate the total number of rows and columns in the grid structure.',
+  'Each `Row` uses the **`aria-rowindex`** attribute to enumerate its position within the table.',
+  'Each `Column` and `Cell` uses the **`aria-colindex`** attribute to enumerate its position within its row.',
+]} />

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

@@ -23,7 +23,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithStickyHeader = exports.WithResizableColumns = exports.WithPagination = exports.WithMinMaxColumnWidth = exports.WithLoadingState = exports.WithLastColumnSticky = exports.WithEmptyState = exports.RowActions = exports.MultiSelection = exports.DynamicWithSorting = exports.DefaultEmptyStateWithButton = exports.DefaultEmptyState = exports.Default = void 0;
+exports["default"] = exports.WithStickyHeader = exports.WithSortingAndResizing = exports.WithResizableColumns = exports.WithPagination = exports.WithMinMaxColumnWidth = exports.WithLoadingState = exports.WithLastColumnSticky = exports.WithEmptyState = exports.RowActions = exports.MultiSelection = exports.DynamicWithSorting = exports.DefaultEmptyStateWithButton = exports.DefaultEmptyState = exports.Default = void 0;
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
@@ -55,7 +55,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 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) { (0, _defineProperty2["default"])(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) { (0, _defineProperty2["default"])(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; }
 var _default = exports["default"] = {
   title: 'Components/TableBase',
   component: _.TableBase,
@@ -430,6 +430,152 @@ var WithResizableColumns = exports.WithResizableColumns = function WithResizable
     }, (0, _react2.jsx)(_.Cell, null, item.type), (0, _react2.jsx)(_.Cell, null, item.date), (0, _react2.jsx)(_.Cell, null, item.additional_grant), (0, _react2.jsx)(_.Cell, null, item.total_grant));
   })));
 };
+var WithSortingAndResizing = exports.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 = (0, _i18n.useCollator)({
+    numeric: true
+  });
+  var list = (0, _data.useAsyncList)({
+    load: function load() {
+      return (0, _asyncToGenerator2["default"])(/*#__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 (0, _asyncToGenerator2["default"])(/*#__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 !(0, _isNan["default"])(str) && (0, _parseFloat2["default"])(str.replace(/,/g, ''));
+              };
+              return _context6.abrupt("return", {
+                items: (0, _sort["default"])(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 (0, _react2.jsx)(_.Card, {
+    variant: "cards.tableWrapper"
+  }, (0, _react2.jsx)(_.TableBase, {
+    "aria-label": "Table with sorting and resizing enabled together",
+    onSortChange: function onSortChange(descriptor) {
+      if (descriptor.column) {
+        (0, _sort["default"])(list).call(list, descriptor);
+      }
+    },
+    sortDescriptor: list.sortDescriptor
+  }, (0, _react2.jsx)(_.THead, {
+    columns: columns
+  }, function (column) {
+    return (0, _react2.jsx)(_.Column, {
+      minWidth: 155,
+      allowsSorting: column.isSortable,
+      allowsResizing: column.key !== columns[columns.length - 1].key
+    }, column.name);
+  }), (0, _react2.jsx)(_.TBody, {
+    items: list.items,
+    loadingState: list.loadingState,
+    onLoadMore: list.loadMore
+  }, function (item) {
+    return (0, _react2.jsx)(_.Row, {
+      key: item.name
+    }, function (columnKey) {
+      return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
+    });
+  })));
+};
+
+// Added to bypass color contrast issue due to virtualizer
+WithSortingAndResizing.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var WithMinMaxColumnWidth = exports.WithMinMaxColumnWidth = function WithMinMaxColumnWidth() {
   return (0, _react2.jsx)(_.Card, {
     variant: "cards.tableWrapper"

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

@@ -160,6 +160,9 @@ declare const _default: {
             outline: string;
         };
         '&.is-focused': {
+            '& .resizer': {
+                backgroundColor: string;
+            };
             outline: string;
             outlineStyle: string;
             outlineColor: string;
@@ -209,12 +212,42 @@ declare const _default: {
         width: string;
         height: string;
         backgroundColor: string;
+        boxSizing: string;
+        paddingLeft: string;
+        paddingRight: string;
+        backgroundClip: string;
         position: string;
         right: string;
         top: string;
         '&.is-focused': {
+            outline: string;
+            outlineStyle: string;
+            outlineColor: string;
+            outlineOffset: string;
+            zIndex: number;
+        };
+        '&.is-resizing': {
             backgroundColor: string;
+            outline: string;
         };
     };
+    sortButton: {
+        fontWeight: number;
+        appearance: string;
+        background: string;
+        border: string;
+        padding: number;
+        margin: number;
+        cursor: string;
+        textAlign: string;
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: import("../..").overflowWrap;
+        maxWidth: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
+    };
 };
 export default _default;

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

@@ -134,7 +134,11 @@ var head = _objectSpread(_objectSpread({}, _Text.text.label), {}, {
   '&:focus-visible': {
     outline: 'none'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    '& .resizer': {
+      backgroundColor: 'focus'
+    }
+  })
 });
 var resizer = {
   cursor: 'col-resize',
@@ -142,13 +146,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.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',
@@ -193,5 +218,6 @@ var _default = exports["default"] = {
   data: data,
   head: head,
   row: row,
-  resizer: resizer
+  resizer: resizer,
+  sortButton: sortButton
 };