@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/DataTable/DataTable.js

@@ -10,28 +10,22 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["children"],
-    _excluded2 = ["children"],
-    _excluded3 = ["item", "children", "hasActions"];
-
+  _excluded2 = ["children"],
+  _excluded3 = ["item", "children", "hasActions"];
 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) { _defineProperty(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; }
-
 import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
-import { mergeProps } from '@react-aria/utils';
-import { FocusRing, useFocusRing } from '@react-aria/focus';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { FocusRing, mergeProps, useFocusRing, useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, VisuallyHidden } from 'react-aria';
 import { layoutInfoToStyle, VirtualizerItem } from '@react-aria/virtualizer';
-import { useTableColumnResizeState, useTableState } from '@react-stately/table';
 import { TableLayout } from '@react-stately/layout';
-import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
-import PropTypes from 'prop-types';
+import { useTableColumnResizeState, useTableState } from '@react-stately/table';
 import MenuDownIcon from 'mdi-react/MenuDownIcon';
 import MenuUpIcon from 'mdi-react/MenuUpIcon';
+import PropTypes from 'prop-types';
 import { DataTableContext, useDataTableContext } from '../../context/DataTableContext';
-import DataTableVirtualizer from './DataTableVirtualizer';
 import { useStatusClasses } from '../../hooks';
 import { Box, Icon, Loader } from '../../index';
+import DataTableVirtualizer from './DataTableVirtualizer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var DEFAULT_HEADER_HEIGHT = {
   medium: 34,
@@ -51,12 +45,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__*/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 = useCallback();
@@ -79,18 +99,16 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [props.overflowMode, scale, density]);
   layout.collection = state.collection;
   layout.getColumnWidth = columnState.getColumnWidth;
-
   var _useTable = 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.
-
+      isVirtualized: true,
+      layout: layout,
+      onRowAction: onAction
+    }), state, domRef),
+    gridProps = _useTable.gridProps;
 
+  // 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
     }
@@ -101,14 +119,12 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
         style: style
       }, renderChildren(children));
     }
-
     if (reusableView.viewType === 'header') {
       return ___EmotionJSX(TableHeader, {
         key: reusableView.key,
         style: style
       }, renderChildren(children));
     }
-
     if (reusableView.viewType === 'row') {
       return ___EmotionJSX(TableRow, {
         key: reusableView.key,
@@ -117,7 +133,6 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
         hasActions: onAction
       }, renderChildren(children));
     }
-
     if (reusableView.viewType === 'headerrow') {
       return ___EmotionJSX(TableHeaderRow, {
         key: reusableView.key,
@@ -125,14 +140,12 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
         item: reusableView.content
       }, renderChildren(children));
     }
-
     return ___EmotionJSX(VirtualizerItem, {
       key: reusableView.key,
       reusableView: reusableView,
       parent: parent
     });
   };
-
   var renderView = function renderView(type, item) {
     switch (type) {
       case 'header':
@@ -140,30 +153,25 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
       case 'row':
       case 'headerrow':
         return null;
-
       case 'cell':
         {
           return ___EmotionJSX(TableCell, {
             cell: item
           });
         }
-
       case 'column':
         return ___EmotionJSX(TableColumnHeader, {
           column: item
         });
-
       case 'loader':
         return ___EmotionJSX(CenteredWrapper, null, ___EmotionJSX(Loader, {
           color: "accent.70",
           "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
         }));
-
       default:
         return null;
     }
   };
-
   var viewport = useRef({
     x: 0,
     y: 0,
@@ -174,7 +182,6 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
     if (viewport.current.width === e.width && viewport.current.height === e.height) {
       return;
     }
-
     viewport.current = e;
   }, []);
   return ___EmotionJSX(DataTableContext.Provider, {
@@ -209,41 +216,30 @@ DataTable.propTypes = {
     * @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.oneOf(['ascending', 'descending']),
-
   /** Sets the width of table. */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
@@ -251,32 +247,24 @@ DataTable.defaultProps = {
   width: '100%',
   height: 565
 };
-
 function TableHeader(_ref) {
   var children = _ref.children,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-
+    otherProps = _objectWithoutProperties(_ref, _excluded);
   var _useTableRowGroup = useTableRowGroup(),
-      rowGroupProps = _useTableRowGroup.rowGroupProps;
-
+    rowGroupProps = _useTableRowGroup.rowGroupProps;
   return ___EmotionJSX(Box, _extends({}, rowGroupProps, otherProps), children);
 }
-
 function TableColumnHeader(props) {
   var _state$sortDescriptor, _state$sortDescriptor2;
-
   var column = props.column;
   var ref = useRef(null);
-
   var _useDataTableContext = useDataTableContext(),
-      state = _useDataTableContext.state;
-
+    state = _useDataTableContext.state;
   var _useTableColumnHeader = useTableColumnHeader({
-    node: column,
-    isVirtualized: true
-  }, state, ref),
-      columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
-
+      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) ? ___EmotionJSX(Icon, {
     icon: MenuUpIcon
@@ -285,12 +273,10 @@ function TableColumnHeader(props) {
     color: "active"
   });
   var allProps = [columnHeaderProps];
-
   var _useStatusClasses = useStatusClasses(_defineProperty({
-    'is-column-sortable': columnProps.allowsSorting
-  }, "is-align-".concat(columnProps.align), columnProps.align)),
-      classNames = _useStatusClasses.classNames;
-
+      'is-column-sortable': columnProps.allowsSorting
+    }, "is-align-".concat(columnProps.align), columnProps.align)),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(FocusRing, {
     focusRingClass: "is-key-focused",
     focusClass: "is-click-focused"
@@ -300,98 +286,75 @@ function TableColumnHeader(props) {
     className: classNames
   }), columnProps.hideHeader ? ___EmotionJSX(VisuallyHidden, null, column.rendered) : ___EmotionJSX(Box, null, column.rendered), columnProps.allowsSorting && ___EmotionJSX(Box, null, arrowIcon)));
 }
-
 function TableRowGroup(_ref2) {
   var children = _ref2.children,
-      otherProps = _objectWithoutProperties(_ref2, _excluded2);
-
+    otherProps = _objectWithoutProperties(_ref2, _excluded2);
   var _useTableRowGroup2 = useTableRowGroup(),
-      rowGroupProps = _useTableRowGroup2.rowGroupProps;
-
+    rowGroupProps = _useTableRowGroup2.rowGroupProps;
   return ___EmotionJSX(Box, _extends({}, rowGroupProps, otherProps), children);
 }
-
 function TableRow(_ref3) {
   var item = _ref3.item,
-      children = _ref3.children,
-      hasActions = _ref3.hasActions,
-      otherProps = _objectWithoutProperties(_ref3, _excluded3);
-
+    children = _ref3.children,
+    hasActions = _ref3.hasActions,
+    otherProps = _objectWithoutProperties(_ref3, _excluded3);
   var ref = useRef();
-
   var _useDataTableContext2 = useDataTableContext(),
-      state = _useDataTableContext2.state;
-
+    state = _useDataTableContext2.state;
   var _useTableRow = useTableRow({
-    node: item,
-    isVirtualized: true
-  }, state, ref),
-      rowProps = _useTableRow.rowProps;
-
+      node: item,
+      isVirtualized: true
+    }, state, ref),
+    rowProps = _useTableRow.rowProps;
   var _useFocusRing = useFocusRing({
-    within: true
-  }),
-      isFocusVisibleWithin = _useFocusRing.isFocusVisible,
-      focusWithinProps = _useFocusRing.focusProps;
-
+      within: true
+    }),
+    isFocusVisibleWithin = _useFocusRing.isFocusVisible,
+    focusWithinProps = _useFocusRing.focusProps;
   var _useFocusRing2 = useFocusRing(),
-      isFocusVisible = _useFocusRing2.isFocusVisible,
-      focusProps = _useFocusRing2.focusProps;
-
+    isFocusVisible = _useFocusRing2.isFocusVisible,
+    focusProps = _useFocusRing2.focusProps;
   var props = mergeProps(rowProps, otherProps, focusWithinProps, focusProps);
-
   var _useStatusClasses3 = useStatusClasses({
-    'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
-  }),
-      classNames = _useStatusClasses3.classNames;
-
+      'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
+    }),
+    classNames = _useStatusClasses3.classNames;
   return ___EmotionJSX(Box, _extends({}, 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 = useDataTableContext(),
-      state = _useDataTableContext3.state;
-
+    state = _useDataTableContext3.state;
   var ref = useRef();
-
   var _useTableHeaderRow = useTableHeaderRow({
-    node: item,
-    isVirtualized: true
-  }, state, ref),
-      rowProps = _useTableHeaderRow.rowProps;
-
+      node: item,
+      isVirtualized: true
+    }, state, ref),
+    rowProps = _useTableHeaderRow.rowProps;
   return ___EmotionJSX(Box, _extends({}, rowProps, {
     ref: ref,
     style: style
   }), children);
 }
-
 function TableCell(_ref5) {
   var cell = _ref5.cell;
-
   var _useDataTableContext4 = useDataTableContext(),
-      state = _useDataTableContext4.state;
-
+    state = _useDataTableContext4.state;
   var ref = useRef();
   var columnProps = cell.column.props;
-
   var _useTableCell = useTableCell({
-    node: cell,
-    isVirtualized: true
-  }, state, ref),
-      gridCellProps = _useTableCell.gridCellProps;
-
+      node: cell,
+      isVirtualized: true
+    }, state, ref),
+    gridCellProps = _useTableCell.gridCellProps;
   var _useStatusClasses4 = useStatusClasses(_defineProperty({}, "is-align-".concat(columnProps.align), columnProps.align)),
-      classNames = _useStatusClasses4.classNames;
-
+    classNames = _useStatusClasses4.classNames;
   return ___EmotionJSX(FocusRing, {
     focusRingClass: "is-key-focused"
   }, ___EmotionJSX(Box, _extends({}, gridCellProps, {
@@ -402,13 +365,10 @@ function TableCell(_ref5) {
     variant: "dataTable.tableCellContents"
   }, cell.rendered)));
 }
-
 function CenteredWrapper(_ref6) {
   var children = _ref6.children;
-
   var _useDataTableContext5 = useDataTableContext(),
-      state = _useDataTableContext5.state;
-
+    state = _useDataTableContext5.state;
   return ___EmotionJSX(Box, {
     role: "row",
     "aria-rowindex": state.collection.headerRows.length + state.collection.size + 1,
@@ -418,7 +378,6 @@ function CenteredWrapper(_ref6) {
     "aria-colspan": state.collection.columns.length
   }, children));
 }
-
 TableCell.propTypes = {
   cell: PropTypes.shape({
     column: PropTypes.shape({

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

@@ -6,34 +6,37 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
+import _Object$getPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/get-prototype-of";
+import _Object$setPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/set-prototype-of";
+import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context10; _forEachInstanceProperty(_context10 = ["next", "throw", "return"]).call(_context10, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context11; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context11 = this.tryEntries).call(_context11, resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
-
 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 _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
-import { useAsyncList } from '@react-stately/data';
-import ApplicationIcon from 'mdi-react/ApplicationIcon';
-import { action } from '@storybook/addon-actions';
+import { useAsyncList } from 'react-stately';
 import { faker } from '@faker-js/faker';
+import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
+import ApplicationIcon from 'mdi-react/ApplicationIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import DataTableReadme from './DataTable.mdx';
+import { DataTable, DataTableBadge, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableMenu, DataTableMultiLine, DataTableRow } from '../../index';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
-import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableChip, DataTableMenu, DataTableMultiLine } from '../../index';
+import DataTableReadme from './DataTable.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/DataTable',
@@ -192,54 +195,45 @@ export var CustomContent = function CustomContent(args) {
     key: 'menu',
     isSortable: false
   }];
-
   var random = function random(items) {
     return items[Math.floor(Math.random() * items.length)];
   };
-
   var list = useAsyncList({
     load: function load(_ref) {
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
         var _context, _context2, _context3;
-
         var signal, cursor, res, json, fakeData, tableData;
-        return _regeneratorRuntime.wrap(function _callee$(_context5) {
+        return _regeneratorRuntime().wrap(function _callee$(_context5) {
           while (1) {
             switch (_context5.prev = _context5.next) {
               case 0:
                 signal = _ref.signal, cursor = _ref.cursor;
-
                 if (cursor) {
                   // eslint-disable-next-line no-param-reassign
                   cursor = cursor.replace(/^http:\/\//i, 'https://');
                 }
-
                 _context5.next = 4;
                 return fetch(cursor || 'https://pokeapi.co/api/v2/pokemon', {
                   signal: signal
                 });
-
               case 4:
                 res = _context5.sent;
                 _context5.next = 7;
                 return res.json();
-
               case 7:
                 json = _context5.sent;
                 _context5.next = 10;
                 return new _Promise(function (resolve) {
                   return _setTimeout(resolve, cursor ? 2000 : 3000);
                 });
-
               case 10:
                 fakeData = _mapInstanceProperty(_context = _concatInstanceProperty(_context2 = []).call(_context2, _keysInstanceProperty(_context3 = Array(json.results.length)).call(_context3))).call(_context, function (key) {
                   var _context4;
-
                   return {
                     id: key,
                     date: chromatic ? '2022-12-25' : "".concat(faker.date.past().toLocaleDateString('fr-CA')),
                     category: chromatic ? 'Other' : "".concat(random(['App Catalog', 'Delete Environment', 'Other'])),
-                    status: ___EmotionJSX(DataTableChip, {
+                    status: ___EmotionJSX(DataTableBadge, {
                       cell: chromatic ? 'Pending' : "".concat(random(['Pending', 'Rejected', 'Approved', 'Failed']))
                     }),
                     submitted_by: chromatic ? 'John Doe' : _concatInstanceProperty(_context4 = "".concat(faker.name.firstName(), " ")).call(_context4, faker.name.lastName()),
@@ -254,13 +248,12 @@ export var CustomContent = function CustomContent(args) {
                   };
                 });
                 tableData = _mapInstanceProperty(fakeData).call(fakeData, function (item, i) {
-                  return _Object$assign({}, item, json.results[i]);
+                  return _objectSpread(_objectSpread({}, item), json.results[i]);
                 });
                 return _context5.abrupt("return", {
                   items: tableData,
                   cursor: json.next
                 });
-
               case 13:
               case "end":
                 return _context5.stop();
@@ -270,9 +263,9 @@ export var CustomContent = function CustomContent(args) {
       }))();
     },
     sort: function sort(_ref2) {
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
         var items, sortDescriptor, cmp;
-        return _regeneratorRuntime.wrap(function _callee2$(_context7) {
+        return _regeneratorRuntime().wrap(function _callee2$(_context7) {
           while (1) {
             switch (_context7.prev = _context7.next) {
               case 0:
@@ -280,24 +273,19 @@ export var CustomContent = function CustomContent(args) {
                 return _context7.abrupt("return", {
                   items: _sortInstanceProperty(items).call(items, function (a, b) {
                     var _context6;
-
                     var first = sortDescriptor.column !== 'name_id' ? a[sortDescriptor.column] : a[sortDescriptor.column].props.cell[0].name;
                     var second = sortDescriptor.column !== 'name_id' ? b[sortDescriptor.column] : b[sortDescriptor.column].props.cell[0].name;
-
                     if (_includesInstanceProperty(_context6 = sortDescriptor.column).call(_context6, 'date')) {
                       cmp = new Date(first) < new Date(second) ? -1 : 1;
                     } else {
                       cmp = (_parseInt(first, 10) || first) < (_parseInt(second, 10) || second) ? -1 : 1;
                     }
-
                     if (sortDescriptor.direction === 'descending') {
                       cmp *= -1;
                     }
-
                     return cmp;
                   })
                 });
-
               case 2:
               case "end":
                 return _context7.stop();
@@ -307,7 +295,7 @@ export var CustomContent = function CustomContent(args) {
       }))();
     }
   });
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DataTable, _extends({}, args, {
+  return ___EmotionJSX(DataTable, _extends({}, args, {
     sortDescriptor: list.sortDescriptor,
     onSortChange: _sortInstanceProperty(list),
     "aria-label": "Custom content table",
@@ -316,7 +304,8 @@ export var CustomContent = function CustomContent(args) {
     columns: columns
   }, function (column) {
     return ___EmotionJSX(DataTableColumn, {
-      width: // eslint-disable-next-line no-nested-ternary
+      width:
+      // eslint-disable-next-line no-nested-ternary
       column.key === 'name_id' ? '26.5%' : column.key === 'menu' ? '5%' : '16%',
       align: column.key !== 'menu' ? 'start' : 'center',
       allowsSorting: column.isSortable,
@@ -332,5 +321,5 @@ export var CustomContent = function CustomContent(args) {
     }, function (columnKey) {
       return ___EmotionJSX(DataTableCell, null, item[columnKey]);
     });
-  })));
+  }));
 };