@pedidopago/ui 1.0.6

package/dist/components/Table/index.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = Table;
+
+var _react = require("react");
+
+var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _MenuItem = require("./components/MenuItem");
+
+var _FocusLock = _interopRequireDefault(require("../../shared/components/FocusLock"));
+
+var _styles = require("./styles");
+
+var _useColorMode2 = require("../../shared/theme/hooks/useColorMode");
+
+var _GenerateKey = require("../../utils/GenerateKey");
+
+var _excluded = ["selectable", "primaryActions", "secondaryActions", "header", "rows", "rowMenuActions"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function Table(_ref) {
+  var selectable = _ref.selectable,
+      primaryActions = _ref.primaryActions,
+      secondaryActions = _ref.secondaryActions,
+      header = _ref.header,
+      rows = _ref.rows,
+      rowMenuActions = _ref.rowMenuActions,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedRows = _useState2[0],
+      setSelectedRows = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      allSelected = _useState4[0],
+      setAllSelected = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({
+    state: false,
+    rowId: ''
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isMenuOpen = _useState6[0],
+      setIsMenuOpen = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      openSelectDropDownMenu = _useState8[0],
+      setOpenSelectDropDownMenu = _useState8[1];
+
+  var _useColorMode = (0, _useColorMode2.useColorMode)(),
+      colorMode = _useColorMode.colorMode;
+
+  var rowsWithKey = (0, _react.useMemo)(function () {
+    return rows.map(function (row) {
+      return {
+        key: (0, _GenerateKey.generateKey)(),
+        item: row
+      };
+    });
+  }, [rows]);
+  var rowCheckboxHandler = (0, _react.useCallback)(function (rowKey, checked) {
+    var selectedRowArrayIndex = selectedRows.findIndex(function (i) {
+      return i === rowKey;
+    });
+    var selectedList = [];
+
+    if (checked) {
+      if (selectedRowArrayIndex < 0) {
+        selectedList = [].concat(_toConsumableArray(selectedRows), [rowKey]);
+        setSelectedRows([].concat(_toConsumableArray(selectedRows), [rowKey]));
+      }
+    } else {
+      if (selectedRowArrayIndex >= 0) {
+        var updatedArray = _toConsumableArray(selectedRows);
+
+        updatedArray.splice(selectedRowArrayIndex, 1);
+        selectedList = updatedArray;
+        setSelectedRows(updatedArray);
+      }
+    }
+
+    if (selectedList.length === rows.length) {
+      setAllSelected(true);
+    } else {
+      setAllSelected(false);
+    }
+  }, [selectedRows, rows]);
+
+  var toggleSelectAll = function toggleSelectAll() {
+    setSelectedRows(allSelected ? [] : rowsWithKey.map(function (row) {
+      return row.key;
+    }));
+    setAllSelected(!allSelected);
+  };
+
+  return /*#__PURE__*/React.createElement(_styles.StyledTable, rest, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, selectedRows.length ? /*#__PURE__*/React.createElement("th", {
+    colSpan: header.length + 1
+  }, /*#__PURE__*/React.createElement(_styles.SelectedHeader, null, /*#__PURE__*/React.createElement(_styles.ActionsButton, {
+    onClick: function onClick() {
+      return toggleSelectAll();
+    }
+  }, /*#__PURE__*/React.createElement(_CheckboxInput.default, {
+    isInderteminate: selectedRows.length > 0 && !allSelected,
+    defaultIsChecked: allSelected || selectedRows.length > 0,
+    onChangeValue: function onChangeValue(checked) {
+      if (!checked && selectedRows.length > 0) {
+        setSelectedRows([]);
+        setAllSelected(false);
+      }
+    }
+  }), /*#__PURE__*/React.createElement(_Typography.default, {
+    fontSize: "xs",
+    fontWeight: "500"
+  }, selectedRows.length, " ", selectedRows.length > 1 ? 'selecionados' : 'selecionado')), !!primaryActions && primaryActions.map(function (action) {
+    return /*#__PURE__*/React.createElement(_styles.ActionsButton, {
+      key: (0, _GenerateKey.generateKey)(),
+      onClick: function onClick() {
+        return action.handler(selectedRows, allSelected);
+      }
+    }, /*#__PURE__*/React.createElement(_Typography.default, {
+      fontSize: "xs",
+      fontWeight: "500"
+    }, action.label));
+  }), !!secondaryActions && /*#__PURE__*/React.createElement(_styles.ActionsButton, {
+    onClick: function onClick() {
+      return setOpenSelectDropDownMenu(!openSelectDropDownMenu);
+    }
+  }, /*#__PURE__*/React.createElement(_Typography.default, {
+    fontSize: "xs",
+    fontWeight: "500"
+  }, "Mais ", /*#__PURE__*/React.createElement(_Icon.default, {
+    name: "chevron-down"
+  })), /*#__PURE__*/React.createElement(_styles.MenuItemWrapper, null, /*#__PURE__*/React.createElement(_MenuItem.MenuItem, {
+    isOpen: openSelectDropDownMenu,
+    items: secondaryActions,
+    onClickOutside: function onClickOutside() {
+      return setOpenSelectDropDownMenu(false);
+    },
+    top: 25,
+    right: -30
+  }))))) : /*#__PURE__*/React.createElement(React.Fragment, null, selectable && /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(_CheckboxInput.default, {
+    onChangeValue: function onChangeValue() {
+      return toggleSelectAll();
+    }
+  })), header.map(function (label) {
+    return /*#__PURE__*/React.createElement("th", {
+      key: (0, _GenerateKey.generateKey)()
+    }, /*#__PURE__*/React.createElement(_Typography.default, {
+      fontSize: "xxs",
+      fontWeight: "600"
+    }, label));
+  })), !!rowMenuActions && /*#__PURE__*/React.createElement("th", null))), /*#__PURE__*/React.createElement("tbody", null, rowsWithKey.map(function (row) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: row.key,
+      tabIndex: selectable ? 0 : undefined,
+      "data-selected": selectedRows.includes(row.key)
+    }, selectable && /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(_CheckboxInput.default, {
+      defaultIsChecked: selectedRows.includes(row.key),
+      onChangeValue: function onChangeValue(checked) {
+        return rowCheckboxHandler(row.key, checked);
+      }
+    })), row.item.map(function (cell) {
+      return /*#__PURE__*/React.createElement("td", {
+        key: (0, _GenerateKey.generateKey)()
+      }, typeof cell === 'string' ? /*#__PURE__*/React.createElement(_Typography.default, {
+        fontSize: "xxs",
+        fontWeight: "500"
+      }, cell) : cell);
+    }), !!rowMenuActions && /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(_FocusLock.default, {
+      isLocked: isMenuOpen.rowId === row.key && isMenuOpen.state
+    }, /*#__PURE__*/React.createElement(_styles.MenuItemWrapper, null, /*#__PURE__*/React.createElement(_styles.VerticalPointsButton, {
+      onClick: function onClick() {
+        return setIsMenuOpen({
+          state: isMenuOpen.rowId === row.key ? !isMenuOpen.state : true,
+          rowId: row.key
+        });
+      }
+    }, /*#__PURE__*/React.createElement(_Icon.default, {
+      name: "more-vertical",
+      color: colorMode === 'dark' ? 'neutral.white' : 'neutral.black'
+    })), /*#__PURE__*/React.createElement(_MenuItem.MenuItem, {
+      onClickOutside: function onClickOutside() {
+        if (isMenuOpen.rowId === row.key) {
+          setIsMenuOpen({
+            state: false,
+            rowId: ''
+          });
+        }
+      },
+      isOpen: isMenuOpen.rowId === row.key && isMenuOpen.state,
+      items: rowMenuActions,
+      top: 45
+    })))));
+  })));
+}

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { GenericStyledProps } from '../../@types';
+export declare const StyledTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const SelectedHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ActionsButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const MenuItemWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const VerticalPointsButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const MenuItemContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps & {
+    isOpen?: boolean | undefined;
+    posTop?: number | undefined;
+    posRight?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MenuItemContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & GenericStyledProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAkGtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IA6DxB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAoB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HAyB3B,CAAC"}

package/dist/components/Table/styles.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalPointsButton = exports.StyledTable = exports.SelectedHeader = exports.MenuItemWrapper = exports.MenuItemContent = exports.MenuItemContainer = exports.ActionsButton = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react = require("@emotion/react");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledTable = _styled.default.table(function (props) {
+  var theme = props.theme;
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          border-top: 1px solid\n            ", ";\n          border-bottom: 1px solid\n            ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n\n          &:first-of-type {\n            border-left: 1px solid\n              ", ";\n            border-radius: 8px 0px 0px 0px;\n          }\n\n          &:last-child {\n            border-right: 1px solid\n              ", ";\n            border-radius: 0px 8px 0px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colors.neutral.neutral6, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral2, theme.colorMode === 'dark' ? theme.colors.neutral.neutral6 : theme.colors.neutral.neutral1, theme.colors.primary.focus, theme.colorMode === 'dark' ? theme.colors.neutral.neutral6 : theme.colors.neutral.neutral1, theme.colors.neutral.neutral5);
+});
+
+exports.StyledTable = StyledTable;
+
+var SelectedHeader = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+
+exports.SelectedHeader = SelectedHeader;
+
+var ActionsButton = _styled.default.button(function (props) {
+  var theme = props.theme;
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    appearance: none;\n    font-family: inherit;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    margin: 0px -2px 0px 0px;\n    outline: none;\n    border: 2px solid\n      ", ";\n    padding: 0px 24px;\n\n    height: 44px;\n\n    white-space: nowrap;\n\n    color: ", ";\n    background: ", ";\n\n    transition: background-color linear ", ";\n\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:first-of-type {\n      color: ", ";\n      border-radius: 8px 0px 0px 8px;\n    }\n\n    &:last-of-type {\n      border-radius: 0px 8px 8px 0px;\n    }\n\n    &:only-child {\n      border-radius: 8px;\n    }\n\n    &:hover,\n    &:focus {\n      z-index: 1;\n\n      border-color: ", ";\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  "])), theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral2, theme.colors.neutral.neutral5, theme.colorMode === 'dark' ? theme.colors.neutral.black : theme.colors.neutral.white, theme.transition.speed, theme.colors.neutral.black, theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral3, theme.colorMode === 'dark' ? theme.colors.neutral.neutral5 : theme.colors.neutral.neutral1, theme.colorMode === 'dark' ? theme.colors.neutral.neutral4 : theme.colors.neutral.neutral2);
+});
+
+exports.ActionsButton = ActionsButton;
+
+var MenuItemWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+
+exports.MenuItemWrapper = MenuItemWrapper;
+
+var VerticalPointsButton = _styled.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: 0;\n  background-color: transparent;\n  font-family: inherit;\n  position: relative;\n  cursor: pointer;\n\n  border-radius: 50%;\n  z-index: 40;\n\n  padding: 0.5rem;\n\n  transition: background-color linear ", ";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.08);\n  }\n"])), function (props) {
+  return props.theme.transition.speed;
+});
+
+exports.VerticalPointsButton = VerticalPointsButton;
+
+var MenuItemContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: ", ";\n  position: absolute;\n  border-radius: 8px;\n  background-color: ", ";\n  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);\n  right: ", "px;\n  top: ", "px;\n  padding: 10px;\n\n  z-index: ", ";\n"])), function (props) {
+  return props.isOpen ? 'block' : 'none';
+}, function (props) {
+  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral5 : props.theme.colors.neutral.white;
+}, function (props) {
+  return props.posRight ? props.posRight : 0;
+}, function (props) {
+  return props.posTop ? props.posTop : 0;
+}, function (props) {
+  return props.theme.zIndex.level48;
+});
+
+exports.MenuItemContainer = MenuItemContainer;
+
+var MenuItemContent = _styled.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  border-radius: 8px;\n  padding: 10px 35px;\n  cursor: pointer;\n  user-select: none;\n  font-size: 1rem;\n  white-space: nowrap;\n\n  color: ", ";\n\n  transition: background linear ", ";\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (props) {
+  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.white : props.theme.colors.neutral.black;
+}, function (props) {
+  return props.theme.transition.speed;
+}, function (props) {
+  return props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral4 : props.theme.colors.neutral.neutral1;
+});
+
+exports.MenuItemContent = MenuItemContent;

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,96 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = require(".");
+
+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__*/React.createElement(_.Table, props));
+  return _objectSpread({}, utils);
+};
+
+describe('Table', function () {
+  it('should render the table component', function () {
+    var _setup = setup({
+      header: ['Header 1', 'Header 2'],
+      rows: [['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: [['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: [['Row 1', 'Row 2']],
+      rowMenuActions: [{
+        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: [['Row collumn 1', 'Row collumn 2'], ['Row collumn 1', 'Row collumn 2'], ['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: [['Row collumn 1', 'Row collumn 2'], ['Row collumn 1', 'Row collumn 2'], ['Row collumn 1', 'Row collumn 2']],
+      rowMenuActions: [{
+        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

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+export interface TableAction {
+    label: string | ReactNode;
+    handler: (selectedRows?: string[], allSelected?: boolean) => void;
+}
+/** Corresponds to the content displayed inside a table cell. */
+export declare type TableCell = ReactNode;
+export declare type MenuStateProps = {
+    state: boolean;
+    rowId: string;
+};
+export interface ITableProps {
+    /** If the rows can be selected. Displays the checkbox at the start of the row. */
+    selectable?: boolean;
+    /** Primary actions displayed in the header for selected tables. */
+    primaryActions?: TableAction[];
+    /** Secondary actions displayed in a dropdown in the header for selected tables. */
+    secondaryActions?: TableAction[];
+    /** The dropdown actions of the rows */
+    rowMenuActions?: TableAction[];
+    /** An array containing the labels of the columns to be displayed in the header. */
+    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: TableCell[][];
+}
+export interface IMenuItem {
+    /** Table row dropdown menu items. */
+    items: TableAction[];
+    /** Table row dropdown menu state. */
+    isOpen: boolean;
+    /** Table row dropdown handler to outside click */
+    onClickOutside: () => void;
+    /** The top position of the dropdown menu */
+    top?: number;
+    /** The left position of the dropdown menu */
+    right?: number;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnE;AAED,gEAAgE;AAChE,oBAAY,SAAS,GAAG,SAAS,CAAC;AAElC,oBAAY,cAAc,GAAG;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,cAAc,CAAC,EAAE,WAAW,EAAE,CAAC;IAC/B,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,WAAW,EAAE,CAAC;IACjC,uCAAuC;IACvC,cAAc,CAAC,EAAE,WAAW,EAAE,CAAC;IAC/B,mFAAmF;IACnF,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,gJAAgJ;IAChJ,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,qCAAqC;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,kDAAkD;IAClD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Table/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Tabs/TabsExample.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ITabsProps } from './types';
+export declare const TabsExample: ({ ...props }: ITabsProps) => JSX.Element;
+//# sourceMappingURL=TabsExample.d.ts.map

package/dist/components/Tabs/TabsExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsExample.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW,iBAAkB,UAAU,gBAyBnD,CAAC"}

package/dist/components/Tabs/TabsExample.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabsExample = void 0;
+
+var _react = require("react");
+
+var _ = require(".");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var TabsExample = function TabsExample(_ref) {
+  var props = _extends({}, _ref);
+
+  var _useState = (0, _react.useState)(props.value),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentTab = _useState2[0],
+      setCurrentTab = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setCurrentTab(props.value);
+  }, [props.value]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_.Tabs, _extends({}, props, {
+    onChangeTab: function onChangeTab(value) {
+      return setCurrentTab(value);
+    }
+  }), /*#__PURE__*/React.createElement(_.Tab, {
+    value: 1,
+    label: "Item 1"
+  }), /*#__PURE__*/React.createElement(_.Tab, {
+    value: 2,
+    label: "Item 2"
+  }), /*#__PURE__*/React.createElement(_.Tab, {
+    value: 3,
+    label: "Item 3"
+  })), /*#__PURE__*/React.createElement(_.TabPanel, {
+    value: currentTab,
+    index: 1
+  }, "Item 1 content"), /*#__PURE__*/React.createElement(_.TabPanel, {
+    value: currentTab,
+    index: 2
+  }, "Item 2 content"), /*#__PURE__*/React.createElement(_.TabPanel, {
+    value: currentTab,
+    index: 3
+  }, "Item 3 content"));
+};
+
+exports.TabsExample = TabsExample;

package/dist/components/Tabs/components/Tab.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ITabProps } from '../types';
+export declare const Tab: ({ label, value, icon, iconPosition, disabled }: ITabProps) => JSX.Element;
+//# sourceMappingURL=Tab.d.ts.map

package/dist/components/Tabs/components/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/Tab.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,eAAO,MAAM,GAAG,mDAA6D,SAAS,gBA6BrF,CAAC"}

package/dist/components/Tabs/components/Tab.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tab = void 0;
+
+var _react = require("react");
+
+var _Tabs = require("./Tabs");
+
+var _styles = require("../styles");
+
+var Tab = function Tab(_ref) {
+  var label = _ref.label,
+      value = _ref.value,
+      icon = _ref.icon,
+      _ref$iconPosition = _ref.iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
+      disabled = _ref.disabled;
+
+  var _useContext = (0, _react.useContext)(_Tabs.TabsContext),
+      activeTabRef = _useContext.activeTabRef,
+      activeTab = _useContext.activeTab,
+      changeTab = _useContext.changeTab,
+      fullWidth = _useContext.fullWidth,
+      indicatorColor = _useContext.indicatorColor,
+      textColor = _useContext.textColor,
+      isLoading = _useContext.isLoading;
+
+  return /*#__PURE__*/React.createElement(_styles.TabButton, {
+    id: "simple-tab-".concat(value),
+    type: "button",
+    role: "tab",
+    ref: activeTab === Number(value) ? activeTabRef : undefined,
+    active: activeTab === Number(value),
+    tabIndex: activeTab === Number(value) ? 0 : -1,
+    onClick: function onClick(event) {
+      return changeTab(event, Number(value));
+    },
+    disabled: disabled || isLoading,
+    fullWidth: fullWidth,
+    indicatorColor: indicatorColor,
+    textColor: textColor
+  }, isLoading ? /*#__PURE__*/React.createElement(_styles.TabLoadingSkeleton, null) : /*#__PURE__*/React.createElement(React.Fragment, null, iconPosition === 'left' && icon && /*#__PURE__*/React.createElement(_styles.TabButtonIcon, null, icon), label, iconPosition === 'right' && icon && /*#__PURE__*/React.createElement(_styles.TabButtonIcon, null, icon)));
+};
+
+exports.Tab = Tab;

package/dist/components/Tabs/components/TabPanel.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ITabPanelProps } from '../types';
+export declare const TabPanel: FC<ITabPanelProps>;
+//# sourceMappingURL=TabPanel.d.ts.map

package/dist/components/Tabs/components/TabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/components/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,cAAc,CAWvC,CAAC"}