@canonical/react-components 1.2.0 → 1.2.2

package/dist/components/Switch/Switch.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Switch = void 0;
 var _react = _interopRequireDefault(require("react"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
  */

package/dist/components/Switch/Switch.stories.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Disabled = exports.Default = void 0;
 var _Switch = _interopRequireDefault(require("./Switch"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   component: _Switch.default,
   tags: ["autodocs"]

package/dist/components/Switch/index.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _Switch = _interopRequireDefault(require("./Switch"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Table/Table.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Table = _ref => {
   let {
     children,

package/dist/components/Table/index.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _Table = _interopRequireDefault(require("./Table"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/TableCell/TableCell.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const TableCell = _ref => {
   let {
     children,

package/dist/components/TableCell/index.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _TableCell = _interopRequireDefault(require("./TableCell"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/TableHeader/TableHeader.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const TableHeader = _ref => {
   let {
     children,

package/dist/components/TableHeader/index.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _TableHeader = _interopRequireDefault(require("./TableHeader"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -4,7 +4,7 @@ export type BasePaginationProps = {
     /**
      * 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
+     * required by the child table component
      */
     data: unknown[];
     /**

package/dist/components/TablePagination/TablePagination.js

@@ -9,10 +9,10 @@ require("./TablePagination.scss");
 var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
 var _utils = require("./utils");
 var _hooks = require("../../hooks");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
+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 && {}.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() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /**
 This is an HOC [React](https://reactjs.org/) component for applying pagination to direct children components. This component is un-opinionated about
 the structure of the input data and can be used with any child component that displays a list of data. However, the styling and behaviour of this component were designed
@@ -94,7 +94,7 @@ const TablePagination = props => {
   };
   const clonedChildren = (0, _utils.renderChildren)(children, dataForwardProp, controlData);
   const controls = /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, _extends({}, divProps, {
-    data: controlData,
+    visibleCount: controlData.length,
     className: className,
     itemName: itemName,
     description: description,

package/dist/components/TablePagination/TablePagination.scss

@@ -18,7 +18,7 @@
   }
 
   .back {
-    margin: 0 $spv--large;
+    margin: 0 0 0 $spv--large;
 
     .p-icon--chevron-down {
       rotate: 90deg;
@@ -34,7 +34,7 @@
   }
 
   .pagination-input {
-    margin-right: $spv--small;
+    margin: 0 $spv--small 0 $spv--large;
     min-width: 0;
     width: 3rem;
   }

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

@@ -8,3 +8,7 @@ export declare const CustomPageLimit: Story;
 export declare const CustomDisplayTitle: Story;
 export declare const RenderAbove: Story;
 export declare const RenderBelow: Story;
+/** The table pagination controls can be used without wrapping MainTable by
+ * using the `TablePaginationControls` component.
+ */
+export declare const ControlsOnly: Story;

package/dist/components/TablePagination/TablePagination.stories.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.RenderBelow = exports.RenderAbove = exports.Default = exports.CustomPageLimit = exports.CustomDisplayTitle = void 0;
+exports.default = exports.RenderBelow = exports.RenderAbove = exports.Default = exports.CustomPageLimit = exports.CustomDisplayTitle = exports.ControlsOnly = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TablePagination = _interopRequireDefault(require("./TablePagination"));
 var _MainTable = _interopRequireDefault(require("../MainTable"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   component: _TablePagination.default,
   tags: ["autodocs"],
@@ -299,4 +300,31 @@ const RenderBelow = exports.RenderBelow = {
     }));
   },
   name: "RenderBelow"
+};
+
+/** The table pagination controls can be used without wrapping MainTable by
+ * using the `TablePaginationControls` component.
+ */
+const ControlsOnly = exports.ControlsOnly = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, {
+      currentPage: 1,
+      itemName: "row",
+      nextButtonProps: {
+        disabled: false
+      },
+      onInputPageChange: console.log,
+      onNextPage: console.log,
+      onPageSizeChange: console.log,
+      onPreviousPage: console.log,
+      pageLimits: [10, 25, 50],
+      pageSize: 20,
+      previousButtonProps: {
+        disabled: false
+      },
+      showPageInput: true,
+      totalItems: 100,
+      visibleCount: 10
+    });
+  }
 };

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

@@ -1,6 +1,24 @@
+import { ButtonProps } from "../../Button";
 import { HTMLAttributes } from "react";
 import { BasePaginationProps, ExternalControlProps, InternalControlProps } from "../TablePagination";
+export declare enum Label {
+    NEXT_PAGE = "Next page",
+    PREVIOUS_PAGE = "Previous page",
+    PAGE_NUMBER = "Page number"
+}
 export type AllProps = BasePaginationProps & InternalControlProps & ExternalControlProps;
-export type Props = Omit<AllProps, "externallyControlled" | "dataForwardProp" | "position"> & HTMLAttributes<HTMLDivElement>;
-declare const TablePaginationControls: ({ data, className, itemName, description, pageLimits, totalItems, currentPage, pageSize, onPageChange, onPageSizeChange, ...divProps }: Props) => JSX.Element;
+export type Props = Omit<AllProps, "currentPage" | "data" | "dataForwardProp" | "externallyControlled" | "onPageChange" | "position" | "totalItems"> & {
+    currentPage?: AllProps["currentPage"];
+    displayDescription?: boolean;
+    onInputPageChange?: (page: number) => void;
+    nextButtonProps?: Partial<ButtonProps>;
+    onNextPage?: (page: number) => void;
+    onPageChange?: AllProps["onPageChange"];
+    onPreviousPage?: (page: number) => void;
+    previousButtonProps?: Partial<ButtonProps>;
+    totalItems?: AllProps["totalItems"];
+    visibleCount?: number;
+    showPageInput?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+declare const TablePaginationControls: ({ className, currentPage, description, displayDescription, onInputPageChange, itemName, nextButtonProps, onNextPage, onPageChange, onPageSizeChange, onPreviousPage, pageLimits, pageSize, previousButtonProps, showPageInput, totalItems, visibleCount, ...divProps }: Props) => JSX.Element;
 export default TablePaginationControls;

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

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Label = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("../../Button"));
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _Input = _interopRequireDefault(require("../../Input"));
@@ -11,44 +12,60 @@ var _Select = _interopRequireDefault(require("../../Select"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let Label = exports.Label = /*#__PURE__*/function (Label) {
+  Label["NEXT_PAGE"] = "Next page";
+  Label["PREVIOUS_PAGE"] = "Previous page";
+  Label["PAGE_NUMBER"] = "Page number";
+  return Label;
+}({});
 const TablePaginationControls = _ref => {
   let {
-    data,
     className,
-    itemName,
-    description,
-    pageLimits,
-    totalItems,
     currentPage,
-    pageSize,
+    description,
+    displayDescription = true,
+    onInputPageChange,
+    itemName,
+    nextButtonProps,
+    onNextPage,
     onPageChange,
     onPageSizeChange,
+    onPreviousPage,
+    pageLimits,
+    pageSize,
+    previousButtonProps,
+    showPageInput = true,
+    totalItems,
+    visibleCount,
     ...divProps
   } = _ref;
   const isSmallScreen = (0, _utils.useFigureSmallScreen)();
-  const totalPages = Math.ceil(totalItems / pageSize);
+  const totalPages = totalItems ? Math.ceil(totalItems / pageSize) : null;
   const descriptionDisplay = (0, _utils.getDescription)({
     description,
-    data,
+    visibleCount,
     isSmallScreen,
     totalItems,
     itemName
   });
   const handleDecrementPage = currentPage => {
     if (currentPage > 1) {
-      onPageChange(currentPage - 1);
+      onPageChange === null || onPageChange === void 0 || onPageChange(currentPage - 1);
     }
+    onPreviousPage === null || onPreviousPage === void 0 || onPreviousPage(typeof currentPage === "number" ? currentPage - 1 : null);
   };
   const handleIncrementPage = (currentPage, totalPages) => {
     if (currentPage < totalPages) {
-      onPageChange(currentPage + 1);
+      onPageChange === null || onPageChange === void 0 || onPageChange(currentPage + 1);
     }
+    onNextPage === null || onNextPage === void 0 || onNextPage(typeof currentPage === "number" ? currentPage + 1 : null);
   };
   const handleInputPageChange = e => {
     const newPage = Math.min(totalPages, Math.max(1, parseInt(e.target.value)));
-    onPageChange(newPage);
+    onPageChange === null || onPageChange === void 0 || onPageChange(newPage);
+    onInputPageChange === null || onInputPageChange === void 0 || onInputPageChange(Number(e.target.value));
   };
   const handlePageSizeChange = e => {
     onPageSizeChange(parseInt(e.target.value));
@@ -60,31 +77,31 @@ const TablePaginationControls = _ref => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "description",
     id: "pagination-description"
-  }, descriptionDisplay), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    "aria-label": "Previous page",
+  }, displayDescription ? descriptionDisplay : null), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+    "aria-label": Label.PREVIOUS_PAGE,
     className: "back",
     appearance: "base",
     hasIcon: true,
     disabled: currentPage === 1,
     onClick: () => handleDecrementPage(currentPage)
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, previousButtonProps), previousButtonProps !== null && previousButtonProps !== void 0 && previousButtonProps.children ? previousButtonProps.children : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "chevron-down"
-  })), /*#__PURE__*/_react.default.createElement(_Input.default, {
+  })), showPageInput ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
     id: "paginationPageInput",
-    label: "Page number",
+    label: 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",
+  }), " ") : null, typeof totalPages === "number" ? "of ".concat(totalPages) : null, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+    "aria-label": Label.NEXT_PAGE,
     className: "next",
     appearance: "base",
     hasIcon: true,
     disabled: currentPage === totalPages,
     onClick: () => handleIncrementPage(currentPage, totalPages)
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, nextButtonProps), /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "chevron-down"
   })), /*#__PURE__*/_react.default.createElement(_Select.default, {
     className: "u-no-margin--bottom",
@@ -96,4 +113,12 @@ const TablePaginationControls = _ref => {
     value: pageSize
   }));
 };
+TablePaginationControls.propTypes = {
+  displayDescription: _propTypes.default.bool,
+  onInputPageChange: _propTypes.default.func,
+  onNextPage: _propTypes.default.func,
+  onPreviousPage: _propTypes.default.func,
+  visibleCount: _propTypes.default.number,
+  showPageInput: _propTypes.default.bool
+};
 var _default = exports.default = TablePaginationControls;

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

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/TablePagination/index.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _TablePagination = _interopRequireDefault(require("./TablePagination"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -17,11 +17,11 @@ export declare const generatePagingOptions: (pageLimits: number[]) => {
     value: number;
     label: string;
 }[];
-export declare const getDescription: ({ description, data, isSmallScreen, totalItems, itemName, }: {
+export declare const getDescription: ({ description, isSmallScreen, totalItems, itemName, visibleCount, }: {
     description: ReactNode;
-    data: unknown[];
     isSmallScreen: boolean;
     totalItems: number;
     itemName: string;
+    visibleCount: number;
 }) => string | number | true | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
 export declare const useFigureSmallScreen: () => boolean;

package/dist/components/TablePagination/utils.js

@@ -44,15 +44,14 @@ exports.generatePagingOptions = generatePagingOptions;
 const getDescription = _ref => {
   let {
     description,
-    data,
     isSmallScreen,
     totalItems,
-    itemName
+    itemName,
+    visibleCount
   } = _ref;
   if (description) {
     return description;
   }
-  const visibleCount = data.length;
   if (isSmallScreen) {
     return "".concat(visibleCount, " out of ").concat(totalItems);
   }

package/dist/components/TableRow/TableRow.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const TableRow = _ref => {
   let {
     children,

package/dist/components/TableRow/index.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _TableRow = _interopRequireDefault(require("./TableRow"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Tabs/Tabs.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /**
  * This is the [React](https://reactjs.org/) component for Vanilla [Tabs](https://vanillaframework.io/docs/patterns/tabs).
 Tabs organise and allow navigation between groups of content that are related and at the same level

package/dist/components/Tabs/Tabs.stories.js

@@ -7,7 +7,7 @@ exports.default = exports.HorizontallyAligned = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Row = _interopRequireDefault(require("../Row"));
 var _Tabs = _interopRequireDefault(require("./Tabs"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   component: _Tabs.default,
   tags: ["autodocs"]

package/dist/components/Tabs/index.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _Tabs = _interopRequireDefault(require("./Tabs"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Textarea/Textarea.js

@@ -8,9 +8,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
 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 _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 _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 && {}.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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /**
  * The props for the Textarea component.
  */

package/dist/components/Textarea/Textarea.stories.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DynamicHeight = exports.Default = void 0;
 var _Textarea = _interopRequireDefault(require("./Textarea"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   component: _Textarea.default,
   tags: ["autodocs"],

package/dist/components/Textarea/index.js

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _Textarea = _interopRequireDefault(require("./Textarea"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Tooltip/Tooltip.js

@@ -9,8 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactUseportal = _interopRequireDefault(require("react-useportal"));
 var _hooks = require("../../hooks");
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && {}.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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const position = exports.position = {
   btmCenter: "btm-center",
   btmLeft: "btm-left",

package/dist/components/Tooltip/Tooltip.stories.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && {}.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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Template = args => {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {

package/dist/components/Tooltip/index.js

@@ -17,4 +17,4 @@ Object.defineProperty(exports, "position", {
 });
 var _Tooltip = _interopRequireWildcard(require("./Tooltip"));
 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 _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 && {}.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; }

package/dist/index.d.ts

@@ -63,6 +63,7 @@ export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
+export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";
 export type { ArticlePaginationProps } from "./components/ArticlePagination";

package/dist/index.js

@@ -79,6 +79,7 @@ var _exportNames = {
   Textarea: true,
   Tooltip: true,
   TablePagination: true,
+  TablePaginationControls: true,
   useOnClickOutside: true,
   useClickOutside: true,
   useId: true,
@@ -488,6 +489,12 @@ Object.defineProperty(exports, "TablePagination", {
     return _TablePagination.default;
   }
 });
+Object.defineProperty(exports, "TablePaginationControls", {
+  enumerable: true,
+  get: function () {
+    return _TablePaginationControls.default;
+  }
+});
 Object.defineProperty(exports, "TableRow", {
   enumerable: true,
   get: function () {
@@ -690,9 +697,10 @@ var _Tabs = _interopRequireDefault(require("./components/Tabs"));
 var _Textarea = _interopRequireDefault(require("./components/Textarea"));
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 var _TablePagination = _interopRequireDefault(require("./components/TablePagination"));
+var _TablePaginationControls = _interopRequireDefault(require("./components/TablePagination/TablePaginationControls"));
 var _hooks = require("./hooks");
 var _utils = require("./utils");
 var _enums = require("./enums");
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && {}.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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }