@canonical/react-components 0.47.0 → 0.47.2

package/dist/components/Table/Table.js

@@ -6,19 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["children", "className", "expanding", "responsive"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-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; }
-var Table = function Table(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$expanding = _ref.expanding,
-    expanding = _ref$expanding === void 0 ? false : _ref$expanding,
-    _ref$responsive = _ref.responsive,
-    responsive = _ref$responsive === void 0 ? false : _ref$responsive,
-    props = _objectWithoutProperties(_ref, _excluded);
+const Table = _ref => {
+  let {
+    children,
+    className,
+    expanding = false,
+    responsive = false,
+    ...props
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("table", _extends({
     role: "grid",
     className: (0, _classnames.default)(className, {
@@ -27,5 +24,4 @@ var Table = function Table(_ref) {
     })
   }, props), children);
 };
-var _default = Table;
-exports.default = _default;
+var _default = exports.default = Table;

package/dist/components/Table/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Table.default;
   }
 });

package/dist/components/TableCell/TableCell.js

@@ -6,23 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["children", "className", "hasOverflow", "expanding", "hidden", "role"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-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; }
-var TableCell = function TableCell(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$hasOverflow = _ref.hasOverflow,
-    hasOverflow = _ref$hasOverflow === void 0 ? false : _ref$hasOverflow,
-    _ref$expanding = _ref.expanding,
-    expanding = _ref$expanding === void 0 ? false : _ref$expanding,
-    _ref$hidden = _ref.hidden,
-    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
-    _ref$role = _ref.role,
-    role = _ref$role === void 0 ? "gridcell" : _ref$role,
-    props = _objectWithoutProperties(_ref, _excluded);
+const TableCell = _ref => {
+  let {
+    children,
+    className,
+    hasOverflow = false,
+    expanding = false,
+    hidden = false,
+    role = "gridcell",
+    ...props
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("td", _extends({
     role: role,
     "aria-hidden": hidden,
@@ -32,5 +27,4 @@ var TableCell = function TableCell(_ref) {
     })
   }, props), children);
 };
-var _default = TableCell;
-exports.default = _default;
+var _default = exports.default = TableCell;

package/dist/components/TableCell/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _TableCell.default;
   }
 });

package/dist/components/TableHeader/TableHeader.js

@@ -5,19 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["children", "sort"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-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; }
-var TableHeader = function TableHeader(_ref) {
-  var children = _ref.children,
-    sort = _ref.sort,
-    props = _objectWithoutProperties(_ref, _excluded);
+const TableHeader = _ref => {
+  let {
+    children,
+    sort,
+    ...props
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("th", _extends({
     role: "columnheader",
     "aria-sort": sort
   }, props), children);
 };
-var _default = TableHeader;
-exports.default = _default;
+var _default = exports.default = TableHeader;

package/dist/components/TableHeader/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _TableHeader.default;
   }
 });

package/dist/components/TablePagination/TablePagination.d.ts

@@ -0,0 +1,37 @@
+import React, { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import "./TablePagination.scss";
+export type Props = PropsWithChildren<{
+    /**
+     * list of data elements to be paginated. This component is un-opinionated about
+     * the structure of the data but it should be identical to the data structure
+     * reuiqred by the child table component
+     */
+    data: unknown[];
+    /**
+     * prop name of the child table component that receives paginated data.
+     * default value is set to @constant rows, which is the data prop for the @func MainTable component
+     */
+    dataForwardProp?: string;
+    /**
+     * the name of the item associated to each row within the table.
+     */
+    itemName?: string;
+    /**
+     * custom styling for the pagination container
+     */
+    className?: string;
+    /**
+     * custom description to be displayed by the pagination
+     */
+    description?: ReactNode;
+    /**
+     * custom per page limits express as an array of numbers.
+     */
+    pageLimits?: number[];
+    /**
+     * place the pagination component above or below the table?
+     */
+    position?: "above" | "below";
+}> & HTMLAttributes<HTMLDivElement>;
+declare const TablePagination: ({ data, className, itemName, description, position, dataForwardProp, pageLimits, children, ...divProps }: Props) => React.JSX.Element;
+export default TablePagination;

package/dist/components/TablePagination/TablePagination.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../../hooks");
+var _Select = _interopRequireDefault(require("../Select"));
+var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
+require("./TablePagination.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+/**
+ * Determine if we are working with a small screen.
+ * 'small screen' in this case is relative to the width of the description div
+ */
+const figureSmallScreen = descriptionRef => {
+  const descriptionElement = descriptionRef.current;
+  if (!descriptionElement) {
+    return true;
+  }
+  return descriptionElement.getBoundingClientRect().width < 230;
+};
+
+/**
+ * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
+ * for those child components.
+ * @param children - react node children to iterate
+ * @param dataForwardProp - the name of the prop from the children components to override
+ * @param data - actual data to be passed to the prop specified by @param dataForwardProp
+ */
+const renderChildren = (children, dataForwardProp, data) => {
+  return _react.Children.map(children, child => {
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
+      [dataForwardProp]: data
+    });
+  });
+};
+const DEFAULT_PAGE_LIMITS = [50, 100, 200];
+const generatePagingOptions = pageLimits => {
+  return pageLimits.map(limit => ({
+    value: limit,
+    label: "".concat(limit, "/page")
+  }));
+};
+const TablePagination = _ref => {
+  let {
+    data,
+    className,
+    itemName = "item",
+    description,
+    position = "above",
+    dataForwardProp = "rows",
+    pageLimits = DEFAULT_PAGE_LIMITS,
+    children,
+    ...divProps
+  } = _ref;
+  const descriptionRef = (0, _react.useRef)(null);
+  const [isSmallScreen, setSmallScreen] = (0, _react.useState)(false);
+  const [pageSize, setPageSize] = (0, _react.useState)(() => {
+    return generatePagingOptions(pageLimits)[0].value;
+  });
+  const {
+    paginate,
+    currentPage,
+    pageData,
+    totalItems
+  } = (0, _hooks.usePagination)(data, {
+    itemsPerPage: pageSize,
+    autoResetPage: true
+  });
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      setSmallScreen(figureSmallScreen(descriptionRef));
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isSmallScreen]);
+  const handlePageSizeChange = e => {
+    paginate(1);
+    setPageSize(parseInt(e.target.value));
+  };
+  const getDescription = () => {
+    if (description) {
+      return description;
+    }
+    const visibleCount = pageData.length;
+    if (isSmallScreen) {
+      return "".concat(visibleCount, " out of ").concat(totalItems);
+    }
+    if (visibleCount === totalItems && visibleCount > 1) {
+      return "Showing all ".concat(totalItems, " ").concat(itemName, "s");
+    }
+    return "Showing ".concat(visibleCount, " out of ").concat(totalItems, " ").concat(itemName).concat(totalItems !== 1 ? "s" : "");
+  };
+  const totalPages = Math.ceil(data.length / pageSize);
+  const clonedChildren = renderChildren(children, dataForwardProp, pageData);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, position === "below" && clonedChildren, /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)("pagination", className)
+  }, divProps, {
+    role: "navigation"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "description",
+    ref: descriptionRef
+  }, getDescription()), /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, {
+    onPageChange: paginate,
+    currentPage: currentPage,
+    totalPages: totalPages
+  }), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    className: "items-per-page",
+    label: "Items per page",
+    labelClassName: "u-off-screen",
+    id: "itemsPerPage",
+    options: generatePagingOptions(pageLimits),
+    onChange: handlePageSizeChange,
+    value: pageSize
+  })), position === "above" && clonedChildren);
+};
+var _default = exports.default = TablePagination;

package/dist/components/TablePagination/TablePagination.scss

@@ -0,0 +1,40 @@
+@import "~vanilla-framework/scss/settings";
+
+.pagination {
+  align-items: baseline;
+  display: flex;
+  margin-top: 1.2rem;
+
+  .description {
+    flex-grow: 1;
+  }
+
+  .back {
+    margin: 0 $spv--large;
+
+    .p-icon--chevron-down {
+      rotate: 90deg;
+    }
+  }
+
+  .next {
+    margin: 0 $spv--large;
+
+    .p-icon--chevron-down {
+      rotate: 270deg;
+    }
+  }
+
+  .pagination-input {
+    margin-right: $spv--small;
+    min-width: 0;
+    width: 3rem;
+  }
+
+  .pagination-select {
+    margin-bottom: 0;
+    margin-left: $spv--x-large;
+    min-width: 0;
+    width: 7rem;
+  }
+}

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts

@@ -0,0 +1,16 @@
+export type Props = {
+    /**
+     * Callback function to handle a change in page number
+     */
+    onPageChange: (pageNumber: number) => void;
+    /**
+     * The current page of the data
+     */
+    currentPage: number;
+    /**
+     * The total number of pages that exists within the data
+     */
+    totalPages: number;
+};
+declare const TablePaginationControls: ({ onPageChange, currentPage, totalPages, }: Props) => JSX.Element;
+export default TablePaginationControls;

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _Input = _interopRequireDefault(require("../../Input"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TablePaginationControls = _ref => {
+  let {
+    onPageChange,
+    currentPage,
+    totalPages
+  } = _ref;
+  const handleDecrementPage = currentPage => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleIncrementPage = (currentPage, totalPages) => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  const handleInputPageChange = e => {
+    const newPage = Math.min(totalPages, Math.max(1, parseInt(e.target.value)));
+    onPageChange(newPage);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    "aria-label": "Previous page",
+    className: "back",
+    appearance: "base",
+    hasIcon: true,
+    disabled: currentPage === 1,
+    onClick: () => handleDecrementPage(currentPage)
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "chevron-down"
+  })), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    id: "paginationPageInput",
+    label: "Page number",
+    labelClassName: "u-off-screen",
+    className: "u-no-margin--bottom pagination-input",
+    onChange: handleInputPageChange,
+    value: currentPage,
+    type: "number"
+  }), " ", "of\xA0", totalPages, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    "aria-label": "Next page",
+    className: "next",
+    appearance: "base",
+    hasIcon: true,
+    disabled: currentPage === totalPages,
+    onClick: () => handleIncrementPage(currentPage, totalPages)
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "chevron-down"
+  })));
+};
+TablePaginationControls.propTypes = {
+  onPageChange: _propTypes.default.func.isRequired,
+  currentPage: _propTypes.default.number.isRequired,
+  totalPages: _propTypes.default.number.isRequired
+};
+var _default = exports.default = TablePaginationControls;

package/dist/components/TablePagination/TablePaginationControls/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TablePaginationControls";
+export type { Props as TablePaginationControlsProps } from "./TablePaginationControls";

package/dist/components/TablePagination/TablePaginationControls/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _TablePaginationControls.default;
+  }
+});
+var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,2 @@
+export { default } from "./TablePagination";
+export type { Props as TablePaginationProps } from "./TablePagination";

package/dist/components/TablePagination/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _TablePagination.default;
+  }
+});
+var _TablePagination = _interopRequireDefault(require("./TablePagination"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/TableRow/TableRow.js

@@ -5,17 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-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; }
-var TableRow = function TableRow(_ref) {
-  var children = _ref.children,
-    trProps = _objectWithoutProperties(_ref, _excluded);
+const TableRow = _ref => {
+  let {
+    children,
+    ...trProps
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("tr", _extends({
     role: "row"
   }, trProps), children);
 };
-var _default = TableRow;
-exports.default = _default;
+var _default = exports.default = TableRow;

package/dist/components/TableRow/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _TableRow.default;
   }
 });

package/dist/components/Tabs/Tabs.js

@@ -6,27 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["active", "className", "component", "label", "listItemClassName"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
-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; }
-var Tabs = function Tabs(_ref) {
-  var className = _ref.className,
-    links = _ref.links,
-    listClassName = _ref.listClassName;
+const Tabs = _ref => {
+  let {
+    className,
+    links,
+    listClassName
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("nav", {
     className: (0, _classnames.default)("p-tabs", className)
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: (0, _classnames.default)("p-tabs__list", listClassName)
-  }, links.map(function (link, i) {
-    var active = link.active,
-      className = link.className,
-      component = link.component,
-      label = link.label,
-      listItemClassName = link.listItemClassName,
-      rest = _objectWithoutProperties(link, _excluded);
-    var Component = component || "a";
+  }, links.map((link, i) => {
+    const {
+      active,
+      className,
+      component,
+      label,
+      listItemClassName,
+      ...rest
+    } = link;
+    const Component = component || "a";
     return /*#__PURE__*/_react.default.createElement("li", {
       className: (0, _classnames.default)("p-tabs__item", listItemClassName),
       key: i
@@ -37,5 +38,4 @@ var Tabs = function Tabs(_ref) {
     }, rest), label));
   })));
 };
-var _default = Tabs;
-exports.default = _default;
+var _default = exports.default = Tabs;

package/dist/components/Tabs/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tabs.default;
   }
 });