@pedidopago/ui 1.5.21 → 1.5.23

package/dist/components/Spinner/spinner.test.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = _interopRequireDefault(require("."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props)));
+  return utils;
+};
+
+describe('Spinner', function () {
+  it('should it render the spinner component', function () {
+    var _setup = setup({}),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the spinner with size', function () {
+    var _setup2 = setup({
+      size: 'lg'
+    }),
+        container = _setup2.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the spinner with color', function () {
+    var _setup3 = setup({
+      color: 'warning.default'
+    }),
+        container = _setup3.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('shoult it render the spinner with empty space color', function () {
+    var _setup4 = setup({
+      emptyColor: 'warning.default'
+    }),
+        container = _setup4.container;
+
+    expect(container).toBeInTheDocument();
+  });
+});

package/dist/components/Spinner/types.d.ts

@@ -1,4 +1,4 @@
-import { ExtendThemeProps, GlobalColorsProps } from '../../shared/theme';
+import { ExtendThemeProps, GlobalColorsProps } from 'src';
 export declare type ISpinnerProps = {
     color?: GlobalColorsProps | (string & {});
     emptyColor?: GlobalColorsProps | (string & {});

package/dist/components/Spinner/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEzE,oBAAY,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,oBAAY,mBAAmB,GAAG,aAAa,GAAG;IAChD,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAC;AAE1D,oBAAY,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,oBAAY,mBAAmB,GAAG,aAAa,GAAG;IAChD,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC"}

package/dist/components/Steps/steps.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=steps.test.d.ts.map

package/dist/components/Steps/steps.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.test.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/steps.test.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/dist/components/Steps/steps.test.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = _interopRequireDefault(require("."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  return _objectSpread({}, (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props))));
+};
+
+describe('Steps', function () {
+  it('should it render the steps component', function () {
+    var _setup = setup({
+      steps: ['Dados pessoais', 'Coleta e retirada', 'Pagamento'],
+      current: 1
+    }),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the steps component with the current step', function () {
+    var _setup2 = setup({
+      steps: ['Dados pessoais', 'Coleta e retirada', 'Pagamento'],
+      current: 2
+    }),
+        container = _setup2.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the steps component with different color', function () {
+    var _setup3 = setup({
+      steps: ['Dados pessoais', 'Coleta e retirada', 'Pagamento'],
+      current: 2,
+      activeColor: 'secondary'
+    }),
+        container = _setup3.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should it render the steps component with full width', function () {
+    var _setup4 = setup({
+      steps: ['Dados pessoais', 'Coleta e retirada', 'Pagamento'],
+      current: 3,
+      activeColor: 'secondary',
+      fullWidth: true
+    }),
+        container = _setup4.container;
+
+    expect(container).toBeInTheDocument();
+  });
+});

package/dist/components/Switch/switch.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+//# sourceMappingURL=switch.test.d.ts.map

package/dist/components/Switch/switch.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.test.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/switch.test.tsx"],"names":[],"mappings":"AAGA,OAAO,yCAAyC,CAAC"}

package/dist/components/Switch/switch.test.js

@@ -0,0 +1,253 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = _interopRequireDefault(require("."));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props)));
+  var SwitchElement = utils.getByTestId('switch');
+  var SwitchWrapper = utils.getByTestId('switch-wrapper');
+  return _objectSpread({
+    SwitchElement: SwitchElement,
+    SwitchWrapper: SwitchWrapper
+  }, utils);
+};
+
+describe('Switch', function () {
+  it('Should be Rendered', function () {
+    var _setup = setup(),
+        SwitchElement = _setup.SwitchElement;
+
+    expect(SwitchElement).toBeInTheDocument();
+  });
+  it('Should return state in callback onChangeValue on click', function () {
+    var onChangeValue = jest.fn();
+
+    var _setup2 = setup({
+      onChangeValue: onChangeValue
+    }),
+        SwitchElement = _setup2.SwitchElement;
+
+    _react.fireEvent.click(SwitchElement);
+
+    expect(onChangeValue).toBeCalledWith(true);
+  });
+  it('Should not be controlled if has Alert prop and show error', function () {
+    var onChangeValue = jest.fn();
+    var onError = jest.fn();
+
+    var _setup3 = setup({
+      onChangeValue: onChangeValue
+    }),
+        SwitchElement = _setup3.SwitchElement;
+
+    _react.fireEvent.click(SwitchElement);
+
+    expect(onChangeValue).toBeCalledWith(false);
+    expect(onError).toBeCalledWith('try click with alert');
+  });
+  it('Should be controlled with keyboard: ArrowUp, ArrowRight make it true', function () {
+    var onChangeValue = jest.fn();
+    var keysToTest = ['ArrowUp', 'ArrowRight'];
+
+    var _setup4 = setup({
+      onChangeValue: onChangeValue
+    }),
+        SwitchElement = _setup4.SwitchElement;
+
+    keysToTest.forEach(function (key) {
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(true);
+
+      _react.fireEvent.click(SwitchElement);
+
+      expect(onChangeValue).toBeCalledWith(false);
+    });
+    keysToTest.forEach(function (key) {
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(true);
+
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(true);
+
+      _react.fireEvent.click(SwitchElement);
+
+      expect(onChangeValue).toBeCalledWith(false);
+    });
+  });
+  it('Should be controlled with keyboard: ArrowDown, ArrowLeft, Enter and Space make it true', function () {
+    var onChangeValue = jest.fn();
+    var keysToTest = ['ArrowDown', 'ArrowLeft'];
+
+    var _setup5 = setup({
+      onChangeValue: onChangeValue
+    }),
+        SwitchElement = _setup5.SwitchElement;
+
+    _react.fireEvent.click(SwitchElement);
+
+    expect(onChangeValue).toBeCalledWith(true);
+    keysToTest.forEach(function (key) {
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(false);
+
+      _react.fireEvent.click(SwitchElement);
+
+      expect(onChangeValue).toBeCalledWith(true);
+    });
+    keysToTest.forEach(function (key) {
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(false);
+
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(false);
+
+      _react.fireEvent.click(SwitchElement);
+
+      expect(onChangeValue).toBeCalledWith(true);
+    });
+  });
+  it('Should be controlled with keyboard: Enter and Space toggle it', function () {
+    var onChangeValue = jest.fn();
+    var keysToTest = ['Enter', 'Space'];
+
+    var _setup6 = setup({
+      onChangeValue: onChangeValue
+    }),
+        SwitchElement = _setup6.SwitchElement;
+
+    keysToTest.forEach(function (key) {
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(true);
+
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(false);
+    });
+  });
+  it('Should not be controlled with keyboard: any other keys', function () {
+    var onChangeValue = jest.fn();
+    var keysToTest = ['KeyA', 'KeyB', 'ShiftRight'];
+
+    var _setup7 = setup({
+      onChangeValue: onChangeValue
+    }),
+        SwitchElement = _setup7.SwitchElement;
+
+    keysToTest.forEach(function (key) {
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(false);
+    });
+  });
+  it('Should not be controlled with keyboard: if has SwitchType, and Show Error', function () {
+    var onChangeValue = jest.fn();
+    var onError = jest.fn();
+    var keysToTest = ['Enter', 'Space'];
+
+    var _setup8 = setup({
+      onChangeValue: onChangeValue
+    }),
+        SwitchElement = _setup8.SwitchElement;
+
+    keysToTest.forEach(function (key) {
+      _react.fireEvent.keyDown(SwitchElement, {
+        code: key
+      });
+
+      expect(onChangeValue).toBeCalledWith(false);
+      expect(onError).toBeCalledWith('try click with alert');
+    });
+  });
+  it('Should not be used if is disabled, and Should show error', function () {
+    var onChangeValue = jest.fn();
+    var onError = jest.fn();
+
+    var _setup9 = setup({
+      onChangeValue: onChangeValue,
+      disabled: true
+    }),
+        SwitchElement = _setup9.SwitchElement;
+
+    _react.fireEvent.click(SwitchElement);
+
+    expect(onChangeValue).toBeCalledWith(false);
+    expect(onError).toBeCalledWith('try click with disabled');
+
+    _react.fireEvent.keyDown(SwitchElement, {
+      code: 'Enter'
+    });
+
+    expect(onChangeValue).toBeCalledWith(false);
+    expect(onError).toBeCalledWith('try click with disabled');
+  });
+  it('Should render the HelpText', function () {
+    var helperText = 'Quer batata no almoço?';
+
+    var _setup10 = setup({
+      helperText: helperText
+    }),
+        SwitchWrapper = _setup10.SwitchWrapper;
+
+    var helpTextElement = SwitchWrapper.querySelector('span');
+    expect(helpTextElement === null || helpTextElement === void 0 ? void 0 : helpTextElement.innerHTML).toEqual(helperText);
+  });
+  it('Should receive a checked state', function () {
+    var _setup11 = setup({
+      checked: true
+    }),
+        SwitchElement = _setup11.SwitchElement;
+
+    var checkedIcon = SwitchElement.querySelector('svg');
+    expect(checkedIcon).toBeInTheDocument();
+  });
+  it('Should receive a false checked state', function () {
+    var _setup12 = setup({
+      checked: false
+    }),
+        SwitchElement = _setup12.SwitchElement;
+
+    var checkedIcon = SwitchElement.querySelector('svg');
+    expect(checkedIcon).not.toBeInTheDocument();
+  });
+});

package/dist/components/Table/components/TableSkeleton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ITableSkeletonColumns } from '../types';
+export declare function TableSkeleton({ skeletonColumns, skeletonRows, skeletonHeight, }: ITableSkeletonColumns): JSX.Element[];
+//# sourceMappingURL=TableSkeleton.d.ts.map

package/dist/components/Table/components/TableSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Table/components/TableSkeleton.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAejD,wBAAgB,aAAa,CAAC,EAC5B,eAAe,EACf,YAAY,EACZ,cAAc,GACf,EAAE,qBAAqB,iBAIvB"}

package/dist/components/Table/components/TableSkeleton.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableSkeleton = TableSkeleton;
+
+var _Skeleton = _interopRequireDefault(require("../../../components/Skeleton"));
+
+var _GenerateKey = require("../../../utils/GenerateKey");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function TableSkeletonColumns(_ref) {
+  var skeletonColumns = _ref.skeletonColumns,
+      skeletonHeight = _ref.skeletonHeight;
+  return Array.from({
+    length: skeletonColumns
+  }).map(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+        isLoaded: false,
+        height: skeletonHeight
+      })
+    }, (0, _GenerateKey.generateKey)());
+  });
+}
+
+function TableSkeleton(_ref2) {
+  var skeletonColumns = _ref2.skeletonColumns,
+      skeletonRows = _ref2.skeletonRows,
+      skeletonHeight = _ref2.skeletonHeight;
+  return Array.from({
+    length: skeletonRows
+  }).map(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+      children: TableSkeletonColumns({
+        skeletonColumns: skeletonColumns,
+        skeletonHeight: skeletonHeight
+      })
+    }, (0, _GenerateKey.generateKey)());
+  });
+}

package/dist/components/Table/index.d.ts

@@ -1,4 +1,4 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { ITableProps } from './types';
-export declare function Table({ selectable, primaryActions, secondaryActions, header, rows, ...rest }: ITableProps & ComponentPropsWithoutRef<'table'>): JSX.Element;
+export declare function Table({ selectable, primaryActions, secondaryActions, header, rows, isLoading, skeletonRows, skeletonHeight, ...rest }: ITableProps & ComponentPropsWithoutRef<'table'>): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAsBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eAsMjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAuBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,SAAiB,EACjB,YAAgB,EAChB,cAAuB,EACvB,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eAyMjD"}

package/dist/components/Table/index.js

@@ -17,6 +17,8 @@ var _MenuItem = require("./components/MenuItem");
 
 var _FocusLock = _interopRequireDefault(require("../../shared/components/FocusLock"));
 
+var _TableSkeleton = require("./components/TableSkeleton");
+
 var _styles = require("./styles");
 
 var _useColorMode2 = require("../../shared/theme/hooks/useColorMode");
@@ -25,7 +27,7 @@ var _GenerateKey = require("../../utils/GenerateKey");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["selectable", "primaryActions", "secondaryActions", "header", "rows"];
+var _excluded = ["selectable", "primaryActions", "secondaryActions", "header", "rows", "isLoading", "skeletonRows", "skeletonHeight"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -65,6 +67,12 @@ function Table(_ref) {
       secondaryActions = _ref.secondaryActions,
       header = _ref.header,
       rows = _ref.rows,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$skeletonRows = _ref.skeletonRows,
+      skeletonRows = _ref$skeletonRows === void 0 ? 5 : _ref$skeletonRows,
+      _ref$skeletonHeight = _ref.skeletonHeight,
+      skeletonHeight = _ref$skeletonHeight === void 0 ? '16px' : _ref$skeletonHeight,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)([]),
@@ -225,7 +233,11 @@ function Table(_ref) {
         })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-      children: rowsWithKey.map(function (row) {
+      children: isLoading ? (0, _TableSkeleton.TableSkeleton)({
+        skeletonColumns: (header === null || header === void 0 ? void 0 : header.length) || 1,
+        skeletonRows: skeletonRows,
+        skeletonHeight: skeletonHeight
+      }) : rowsWithKey.map(function (row) {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
           tabIndex: selectable ? 0 : undefined,
           "data-selected": selectedRows.includes(row.key),

package/dist/components/Table/table.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+//# sourceMappingURL=table.test.d.ts.map

package/dist/components/Table/table.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.test.d.ts","sourceRoot":"","sources":["../../../src/components/Table/table.test.tsx"],"names":[],"mappings":"AAGA,OAAO,yCAAyC,CAAC"}

package/dist/components/Table/table.test.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = require(".");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(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 source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var setup = function setup(props) {
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Table, _objectSpread({}, props)));
+  return _objectSpread({}, utils);
+};
+
+describe('Table', function () {
+  it('should render the table component', function () {
+    var _setup = setup({
+      header: ['Header 1', 'Header 2'],
+      rows: [{
+        items: ['Row 1', 'Row 2']
+      }]
+    }),
+        container = _setup.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should render the table component with selectable prop', function () {
+    var _setup2 = setup({
+      header: ['Header 1', 'Header 2'],
+      rows: [{
+        items: ['Row 1', 'Row 2']
+      }],
+      selectable: true
+    }),
+        container = _setup2.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should render the table component with dropdown menu in rows', function () {
+    var _setup3 = setup({
+      header: ['Header 1', 'Header 2'],
+      rows: [{
+        items: ['Row 1', 'Row 2'],
+        actions: [{
+          label: 'Action 1',
+          handler: function handler() {}
+        }, {
+          label: 'Action 2',
+          handler: function handler() {}
+        }]
+      }]
+    }),
+        container = _setup3.container;
+
+    expect(container).toBeInTheDocument();
+  });
+  it('should select all elements', function () {
+    var _setup4 = setup({
+      header: ['Header 1', 'Header 2'],
+      rows: [{
+        items: ['Row collumn 1', 'Row collumn 2']
+      }, {
+        items: ['Row collumn 1', 'Row collumn 2']
+      }, {
+        items: ['Row collumn 1', 'Row collumn 2']
+      }],
+      selectable: true
+    }),
+        container = _setup4.container;
+
+    var firstCheckbox = container.querySelector('th input[type="checkbox"]');
+
+    _react.fireEvent.click(firstCheckbox);
+
+    var allSelectedRows = container.querySelectorAll('[data-selected="true"]');
+    expect(allSelectedRows.length).toEqual(3);
+  });
+  it('should open the dropdown menu in rows', function () {
+    var _firstRowMenuButton$p;
+
+    var _setup5 = setup({
+      header: ['Header 1', 'Header 2'],
+      rows: [{
+        items: ['Row collumn 1', 'Row collumn 2'],
+        actions: [{
+          label: 'Action 1',
+          handler: function handler() {}
+        }, {
+          label: 'Action 2',
+          handler: function handler() {}
+        }]
+      }, {
+        items: ['Row collumn 1', 'Row collumn 2'],
+        actions: [{
+          label: 'Action 1',
+          handler: function handler() {}
+        }, {
+          label: 'Action 2',
+          handler: function handler() {}
+        }]
+      }, {
+        items: ['Row collumn 1', 'Row collumn 2'],
+        actions: [{
+          label: 'Action 1',
+          handler: function handler() {}
+        }, {
+          label: 'Action 2',
+          handler: function handler() {}
+        }]
+      }]
+    }),
+        container = _setup5.container;
+
+    var firstRowMenuButton = container.querySelector('tbody tr td button');
+
+    _react.fireEvent.click(firstRowMenuButton);
+
+    var firstRowMenu = (_firstRowMenuButton$p = firstRowMenuButton.parentElement) === null || _firstRowMenuButton$p === void 0 ? void 0 : _firstRowMenuButton$p.querySelector('div');
+    expect(firstRowMenu).toHaveStyle('display: block');
+  });
+});

package/dist/components/Table/types.d.ts

@@ -24,6 +24,12 @@ export interface ITableProps {
     header: string[];
     /** An array of TableCell's arrays each matching a row of the table. Each TableCell corresponds to the content displayed inside a table cell. */
     rows: TableRow[];
+    /** A boolean that is used to determine if the table is loading. */
+    isLoading?: boolean;
+    /** Used to determine how many rows to display when the table is loading. */
+    skeletonRows?: number;
+    /** Used to determine how many columns to display when the table is loading. */
+    skeletonHeight?: string | number;
 }
 export interface IMenuItem {
     /** Table row dropdown menu items. */
@@ -37,4 +43,12 @@ export interface IMenuItem {
     /** The left position of the dropdown menu */
     right?: number;
 }
+export interface ITableSkeletonColumns {
+    /** Used to determine how many columns to display when the table is loading. */
+    skeletonColumns: number;
+    /** Used to determine how many rows to display when the table is loading. */
+    skeletonRows: number;
+    /** Used to determine how many columns to display when the table is loading. */
+    skeletonHeight?: string | number;
+}
 //# sourceMappingURL=types.d.ts.map