@pingux/astro 2.238.0 → 2.240.0-alpha.0

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

@@ -1,854 +0,0 @@
-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 _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
-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 _Symbol$asyncIterator from "@babel/runtime-corejs3/core-js-stable/symbol/async-iterator";
-import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
-import _Symbol$iterator from "@babel/runtime-corejs3/core-js-stable/symbol/iterator";
-import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
-import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _Number$isNaN from "@babel/runtime-corejs3/core-js-stable/number/is-nan";
-import _parseFloat from "@babel/runtime-corejs3/core-js-stable/parse-float";
-import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
-function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
-function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
-function _regeneratorAsync(n, e, r, t, o) { var a = _regeneratorAsyncGen(n, e, r, t, o); return a.next().then(function (n) { return n.done ? n.value : a.next(); }); }
-function _regeneratorAsyncGen(r, e, t, o, n) { return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || _Promise); }
-function _regeneratorAsyncIterator(t, e) { function n(r, o, i, f) { try { var c = t[r](o), u = c.value; return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) { n("next", t, i, f); }, function (t) { n("throw", t, i, f); }) : e.resolve(u).then(function (t) { c.value = t, i(c); }, function (t) { return n("throw", t, i, f); }); } catch (t) { f(t); } } var r; this.next || (_regeneratorDefine2(_regeneratorAsyncIterator.prototype), _regeneratorDefine2(_regeneratorAsyncIterator.prototype, "function" == typeof _Symbol && _Symbol$asyncIterator || "@asyncIterator", function () { return this; })), _regeneratorDefine2(this, "_invoke", function (t, o, i) { function f() { return new e(function (e, r) { n(t, i, e, r); }); } return r = r ? r.then(f, f) : f(); }, !0); }
-function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof _Symbol ? _Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = _Object$create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: _bindInstanceProperty(d).call(d, e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = _Object$getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(c); function f(e) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = _Object$create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
-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; }
-import React, { useCallback, useEffect, useState } from 'react';
-import { useAsyncList } from 'react-stately';
-import { useCollator } from '@react-aria/i18n';
-import { action } from 'storybook/actions';
-import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { getAllUsers } from '../../api/users';
-import { Box, DataTable, DataTableBadge, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableMenu, DataTableRow } from '../../index';
-import { LIMIT } from '../../mocks/constants';
-import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import DataTableReadme from './DataTable.mdx';
-import { dataTableArgTypes } from './dataTableAttributes';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Components/DataTable',
-  component: DataTable,
-  parameters: {
-    docs: {
-      page: function page() {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DataTableReadme, null), ___EmotionJSX(DocsLayout, null));
-      }
-    }
-  },
-  argTypes: dataTableArgTypes,
-  args: {
-    density: 'spacious',
-    overflowMode: 'truncate'
-  }
-};
-var getHeaderProps = function getHeaderProps() {
-  return {
-    sx: {
-      fontWeight: '3'
-    }
-  };
-};
-var getCellProps = function getCellProps(columnKey, align) {
-  return {
-    pr: columnKey !== 'menu' ? 'lg' : 0,
-    pl: columnKey === 'timestamp' || columnKey === 'menu' ? 0 : 'lg',
-    hideHeader: columnKey === 'menu',
-    align: align
-  };
-};
-export var Default = function Default() {
-  var date = '2023-05-03';
-  var time = '07:16:30 pm UTC';
-  var timestampCell = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, date), ___EmotionJSX(Box, null, time));
-  var columns = [{
-    name: 'Timestamp',
-    key: 'timestamp'
-  }, {
-    name: 'Event Type',
-    key: 'eventType'
-  }, {
-    name: 'Description',
-    key: 'description'
-  }, {
-    name: 'Status',
-    key: 'status'
-  }, {
-    name: 'User Identity',
-    key: 'userIdentity'
-  }, {
-    name: 'Menu',
-    key: 'menu'
-  }];
-  var rows = [{
-    id: 1,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Approved"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 2,
-    timestamp: timestampCell,
-    eventType: 'User Access Denied',
-    description: ___EmotionJSX(Box, {
-      display: "-webkit-box",
-      variant: "dataTable.truncateText"
-    }, "Passed Role Access Control Words Words Words Words Words Words Words Words Words Words Words Words Words Words"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Rejected"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 3,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(Box, {
-      display: "-webkit-box",
-      variant: "dataTable.truncateText"
-    }, "Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words Words"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Approved"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 4,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Approved"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 5,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Approved"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }];
-  return ___EmotionJSX(DataTable, {
-    "aria-label": "Static table",
-    height: "100%",
-    density: "spacious"
-  }, ___EmotionJSX(DataTableHeader, {
-    columns: columns
-  }, function (column) {
-    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), getHeaderProps(), {
-      minWidth: column.key !== 'menu' ? 175 : 32,
-      width: column.key !== 'menu' ? '19.4%' : 32
-    }), column.name);
-  }), ___EmotionJSX(DataTableBody, {
-    items: rows
-  }, function (item) {
-    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, false), item[columnKey]);
-    });
-  }));
-};
-
-// Added to bypass color contrast issue due to virtualizer
-Default.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
-export var OnyxDefault = function OnyxDefault() {
-  var date = '2023-05-03';
-  var time = '07:16:30 pm UTC';
-  var timestampCell = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, date), ___EmotionJSX(Box, null, time));
-  var columns = [{
-    name: 'Timestamp',
-    key: 'timestamp'
-  }, {
-    name: 'Event Type',
-    key: 'eventType'
-  }, {
-    name: 'Description',
-    key: 'description'
-  }, {
-    name: 'Status',
-    key: 'status',
-    isSortable: true
-  }, {
-    name: 'User Identity',
-    key: 'userIdentity'
-  }, {
-    name: 'Menu',
-    key: 'menu'
-  }];
-  var rows = [{
-    id: 1,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Approved"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 2,
-    timestamp: timestampCell,
-    eventType: 'User Access Denied',
-    description: ___EmotionJSX(Box, {
-      display: "block"
-    }, "Passed Role Access Control"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Rejected"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 3,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(Box, {
-      display: "block"
-    }, "Passed Role Access Control"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Inactive"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 4,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Approved"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }, {
-    id: 5,
-    timestamp: timestampCell,
-    eventType: 'User Access Allowed',
-    description: ___EmotionJSX(Box, null, "Passed Role Access Control"),
-    status: ___EmotionJSX(DataTableBadge, {
-      cell: "Approved"
-    }),
-    userIdentity: 'Vincent Diep',
-    menu: ___EmotionJSX(DataTableMenu, null)
-  }];
-  return ___EmotionJSX(DataTable, {
-    "aria-label": "Onyx table",
-    height: "100%",
-    scale: "xl"
-  }, ___EmotionJSX(DataTableHeader, {
-    columns: columns
-  }, function (column) {
-    return ___EmotionJSX(DataTableColumn, {
-      hideHeader: column.key === 'menu',
-      minWidth: column.key !== 'menu' ? 175 : 75,
-      width: column.key !== 'menu' ? '19.4%' : 75
-    }, column.name);
-  }), ___EmotionJSX(DataTableBody, {
-    items: rows
-  }, function (item) {
-    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, null, item[columnKey]);
-    });
-  }));
-};
-
-// Added to bypass color contrast issue due to virtualizer
-OnyxDefault.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
-export var Dynamic = function Dynamic(args) {
-  var columns = [{
-    name: 'Country',
-    key: 'country'
-  }, {
-    name: 'Population',
-    key: 'population'
-  }, {
-    name: 'Continent',
-    key: 'continent'
-  }];
-  var rows = [{
-    id: 1,
-    country: 'USA',
-    population: '320,000,000',
-    continent: 'North America'
-  }, {
-    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: 'France',
-    population: '67,000,000',
-    continent: 'Europe'
-  }, {
-    id: 5,
-    country: 'Mexico',
-    population: '126,000,000',
-    continent: 'North America'
-  }, {
-    id: 6,
-    country: 'Ethiopia',
-    population: '120,000,000',
-    continent: 'Africa'
-  }, {
-    id: 7,
-    country: 'Austria',
-    population: '25,000,000',
-    continent: 'Oceania'
-  }];
-  var list = useAsyncList({
-    load: function load() {
-      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              return _context.abrupt("return", {
-                items: rows
-              });
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }))();
-    }
-  });
-  return ___EmotionJSX(DataTable, _extends({}, args, {
-    "aria-label": "Dynamic table",
-    density: "compact",
-    scale: "medium"
-  }), ___EmotionJSX(DataTableHeader, {
-    columns: columns
-  }, function (column) {
-    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, 'center'), {
-      minWidth: 155
-    }), column.name);
-  }), ___EmotionJSX(DataTableBody, {
-    items: list.items
-  }, function (item) {
-    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, 'left'), item[columnKey]);
-    });
-  }));
-};
-
-// Added to bypass color contrast issue due to virtualizer
-Dynamic.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
-export var Sortable = function Sortable(args) {
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasFirstSortFlag = _useState2[0],
-    setFirstSortFlag = _useState2[1];
-  var columns = [{
-    name: 'Country',
-    key: 'country',
-    isSortable: true
-  }, {
-    name: 'Population',
-    key: 'population',
-    isSortable: true
-  }, {
-    name: 'Continent',
-    key: 'continent',
-    isSortable: true
-  }];
-  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 _callee2() {
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              return _context2.abrupt("return", {
-                items: rows
-              });
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }))();
-    },
-    sort: function sort(_ref) {
-      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        var items, sortDescriptor, getNumericValue;
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              items = _ref.items, sortDescriptor = _ref.sortDescriptor;
-              getNumericValue = function getNumericValue(str) {
-                return !_Number$isNaN(str) && _parseFloat(str.replace(/,/g, ''));
-              };
-              return _context3.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 _context3.stop();
-          }
-        }, _callee3);
-      }))();
-    }
-  });
-  useEffect(function () {
-    if (hasFirstSortFlag && !list.isLoading && list.items.length > 0) {
-      _sortInstanceProperty(list).call(list, {
-        column: 'country',
-        direction: 'ascending'
-      });
-      setFirstSortFlag(false);
-    }
-  }, [hasFirstSortFlag, list, list.isLoading, list.items]);
-  return ___EmotionJSX(DataTable, _extends({}, args, {
-    "aria-label": "Sortable table",
-    sortDescriptor: list.sortDescriptor,
-    onSortChange: _sortInstanceProperty(list),
-    density: "compact",
-    scale: "medium"
-  }), ___EmotionJSX(DataTableHeader, {
-    columns: columns
-  }, function (column) {
-    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, 'center'), {
-      allowsSorting: true,
-      minWidth: 155
-    }), column.name);
-  }), ___EmotionJSX(DataTableBody, {
-    items: list.items
-  }, function (item) {
-    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, false), item[columnKey]);
-    });
-  }));
-};
-
-// Added to bypass color contrast issue due to virtualizer
-Sortable.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
-export var Selection = function Selection(args) {
-  var columns = [{
-    name: 'Country',
-    key: 'country'
-  }, {
-    name: 'Population',
-    key: 'population'
-  }, {
-    name: 'Continent',
-    key: 'continent'
-  }];
-  var rows = [{
-    id: 1,
-    country: 'USA',
-    population: '320,000,000',
-    continent: 'North America'
-  }, {
-    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: 'France',
-    population: '67,000,000',
-    continent: 'Europe'
-  }, {
-    id: 5,
-    country: 'Mexico',
-    population: '126,000,000',
-    continent: 'North America'
-  }, {
-    id: 6,
-    country: 'Ethiopia',
-    population: '120,000,000',
-    continent: 'Africa'
-  }, {
-    id: 7,
-    country: 'Austria',
-    population: '25,000,000',
-    continent: 'Oceania'
-  }];
-  return ___EmotionJSX(DataTable, _extends({}, args, {
-    "aria-label": "Dynamic table",
-    density: "compact",
-    scale: "medium",
-    selectionMode: "single",
-    disabledKeys: [3],
-    defaultSelectedKeys: [1]
-  }), ___EmotionJSX(DataTableHeader, {
-    columns: columns
-  }, function (column) {
-    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, 'center'), {
-      minWidth: 155
-    }), column.name);
-  }), ___EmotionJSX(DataTableBody, {
-    items: rows
-  }, function (item) {
-    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, 'left'), item[columnKey]);
-    });
-  }));
-};
-
-// Added to bypass color contrast issue due to virtualizer
-Selection.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
-export var ControlledSelection = function ControlledSelection(args) {
-  var _useState3 = useState([2]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedKeys = _useState4[0],
-    setSelectedKeys = _useState4[1];
-  var columns = [{
-    name: 'Country',
-    key: 'country'
-  }, {
-    name: 'Population',
-    key: 'population'
-  }, {
-    name: 'Continent',
-    key: 'continent'
-  }];
-  var rows = [{
-    id: 1,
-    country: 'USA',
-    population: '320,000,000',
-    continent: 'North America'
-  }, {
-    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: 'France',
-    population: '67,000,000',
-    continent: 'Europe'
-  }, {
-    id: 5,
-    country: 'Mexico',
-    population: '126,000,000',
-    continent: 'North America'
-  }, {
-    id: 6,
-    country: 'Ethiopia',
-    population: '120,000,000',
-    continent: 'Africa'
-  }, {
-    id: 7,
-    country: 'Austria',
-    population: '25,000,000',
-    continent: 'Oceania'
-  }];
-  var list = useAsyncList({
-    load: function load() {
-      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
-            case 0:
-              return _context4.abrupt("return", {
-                items: rows
-              });
-            case 1:
-            case "end":
-              return _context4.stop();
-          }
-        }, _callee4);
-      }))();
-    }
-  });
-  return ___EmotionJSX(DataTable, _extends({}, args, {
-    "aria-label": "Dynamic table",
-    density: "compact",
-    scale: "medium",
-    selectionMode: "single",
-    disabledKeys: [3],
-    selectedKeys: selectedKeys,
-    onSelectionChange: setSelectedKeys
-  }), ___EmotionJSX(DataTableHeader, {
-    columns: columns
-  }, function (column) {
-    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, 'center'), {
-      minWidth: 155
-    }), column.name);
-  }), ___EmotionJSX(DataTableBody, {
-    items: list.items
-  }, function (item) {
-    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
-      return ___EmotionJSX(DataTableCell, getCellProps(columnKey, 'left'), item[columnKey]);
-    });
-  }));
-};
-
-// Added to bypass color contrast issue due to virtualizer
-ControlledSelection.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};
-export var AsyncLoading = function AsyncLoading(args) {
-  var columns = [{
-    name: 'Name',
-    key: 'name',
-    isSortable: false
-  }, {
-    name: 'Username',
-    key: 'username',
-    isSortable: true
-  }, {
-    name: 'Email',
-    key: 'email',
-    isSortable: true
-  }, {
-    name: 'Updated At',
-    key: 'updatedAt',
-    isSortable: true
-  }];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    data = _useState6[0],
-    setData = _useState6[1];
-  var _useState7 = useState(LIMIT),
-    _useState8 = _slicedToArray(_useState7, 2),
-    limit = _useState8[0],
-    setLimit = _useState8[1];
-  var _useState9 = useState(0),
-    _useState0 = _slicedToArray(_useState9, 2),
-    dataSize = _useState0[0],
-    setDataSize = _useState0[1];
-  var _useState1 = useState(loadingStates.LOADING),
-    _useState10 = _slicedToArray(_useState1, 2),
-    loading = _useState10[0],
-    setLoading = _useState10[1];
-  var _useState11 = useState(undefined),
-    _useState12 = _slicedToArray(_useState11, 2),
-    sortDescriptor = _useState12[0],
-    setSortDescriptor = _useState12[1];
-  var fetchData = useCallback(/*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5(currentLimit) {
-      var response, json;
-      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            _context5.prev = 0;
-            _context5.next = 3;
-            return getAllUsers(currentLimit, '', 3000);
-          case 3:
-            response = _context5.sent;
-            _context5.next = 6;
-            return response.json();
-          case 6:
-            json = _context5.sent;
-            if (response.ok) {
-              setData(json.body._embedded.users || []);
-              setDataSize(json.body.count);
-            }
-            setLoading(loadingStates.IDLE);
-            _context5.next = 15;
-            break;
-          case 11:
-            _context5.prev = 11;
-            _context5.t0 = _context5["catch"](0);
-            console.error('Fetch error:', _context5.t0);
-            setLoading(loadingStates.ERROR);
-          case 15:
-          case "end":
-            return _context5.stop();
-        }
-      }, _callee5, null, [[0, 11]]);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), []);
-  var handleLoadMore = useCallback(function () {
-    if (loading !== loadingStates.IDLE || limit >= dataSize) return;
-    setLoading(loadingStates.LOADING_MORE);
-    setLimit(function (prev) {
-      return prev + LIMIT;
-    });
-  }, [loading, limit, dataSize]);
-  useEffect(function () {
-    fetchData(limit);
-  }, [fetchData, limit]);
-  var handleSortChange = function handleSortChange(descriptor) {
-    var _context6, _context7;
-    var _descriptor$direction = descriptor.direction,
-      direction = _descriptor$direction === void 0 ? 'ascending' : _descriptor$direction,
-      _descriptor$column = descriptor.column,
-      column = _descriptor$column === void 0 ? 'username' : _descriptor$column;
-    var sorted = _sortInstanceProperty(_context6 = _sliceInstanceProperty(data).call(data)).call(_context6, function (a, b) {
-      var cmp = a[column] < b[column] ? -1 : 1;
-      if (direction === 'descending') {
-        cmp *= -1;
-      }
-      return cmp;
-    });
-    setData(_concatInstanceProperty(_context7 = []).call(_context7, sorted));
-    setSortDescriptor(descriptor);
-  };
-  return ___EmotionJSX(DataTable, _extends({}, args, {
-    "aria-label": "Custom content table",
-    onAction: action('onAction'),
-    density: "compact",
-    scale: "medium",
-    height: 300,
-    sortDescriptor: sortDescriptor,
-    onSortChange: handleSortChange
-  }), ___EmotionJSX(DataTableHeader, {
-    columns: columns
-  }, function (column) {
-    return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), {
-      minWidth: 155,
-      allowsSorting: column.isSortable
-    }), column.name);
-  }), ___EmotionJSX(DataTableBody, {
-    items: data,
-    loadingState: loading,
-    onLoadMore: handleLoadMore
-  }, function (item) {
-    var _context8;
-    return ___EmotionJSX(DataTableRow, {
-      key: item.id
-    }, ___EmotionJSX(DataTableCell, getCellProps('name', false), _concatInstanceProperty(_context8 = "".concat(item.name.given, " ")).call(_context8, item.name.family)), ___EmotionJSX(DataTableCell, getCellProps('username', false), item.username), ___EmotionJSX(DataTableCell, getCellProps('email', false), item.email), ___EmotionJSX(DataTableCell, getCellProps('updatedAt', false), new Date(item.updatedAt).toLocaleDateString()));
-  }));
-};
-
-// Added to bypass color contrast issue due to virtualizer
-AsyncLoading.parameters = {
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }]
-    }
-  }
-};