@canonical/react-components 2.14.0 → 2.15.0

package/dist/components/ScrollableContainer/ScrollableContainer.d.ts

@@ -0,0 +1,27 @@
+import type { DependencyList, FC, ReactNode } from "react";
+import "./ScrollableContainer.scss";
+export type Props = {
+    /**
+     * The content that should be scrollable on overflow.
+     */
+    children: ReactNode;
+    /**
+     * An array of dependencies that will trigger a re-calculation of the scrollable height when changed.
+     */
+    dependencies: DependencyList;
+    /**
+     * An array of element IDs below the scrollable container that should be considered when calculating the height.
+     */
+    belowIds?: string[];
+    /**
+     * Additional CSS classes to apply to the scrollable container.
+     */
+    className?: string;
+};
+/**
+ * This is a [React](https://reactjs.org/) component for use within the [Vanilla framework](https://docs.vanillaframework.io/).
+ *
+ * It is used to make any child element scrollable by adjusting the height based on the viewport height and the heights of elements above and below it. As a result the surrounding elements are sticky and only the wrapped element contents scroll
+ */
+declare const ScrollableContainer: FC<Props>;
+export default ScrollableContainer;

package/dist/components/ScrollableContainer/ScrollableContainer.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./ScrollableContainer.scss");
+var _utils = require("../../utils");
+var _hooks = require("../../hooks");
+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; }
+/**
+ * This is a [React](https://reactjs.org/) component for use within the [Vanilla framework](https://docs.vanillaframework.io/).
+ *
+ * It is used to make any child element scrollable by adjusting the height based on the viewport height and the heights of elements above and below it. As a result the surrounding elements are sticky and only the wrapped element contents scroll
+ */
+const ScrollableContainer = _ref => {
+  let {
+    dependencies,
+    children,
+    belowIds = ["status-bar"],
+    className
+  } = _ref;
+  const ref = (0, _react.useRef)(null);
+  const updateChildContainerHeight = () => {
+    var _ref$current;
+    const childContainer = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.children[0];
+    if (!childContainer) {
+      return;
+    }
+    const above = childContainer.getBoundingClientRect().top + 1;
+    const below = belowIds.reduce((acc, belowId) => acc + (0, _utils.getAbsoluteHeightBelowById)(belowId), 0);
+    const parentsBottomSpacing = (0, _utils.getParentsBottomSpacing)(childContainer);
+    const offset = Math.ceil(above + below + parentsBottomSpacing);
+    const style = "height: calc(100dvh - ".concat(offset, "px); min-height: calc(100dvh - ").concat(offset, "px)");
+    childContainer.setAttribute("style", style);
+  };
+  (0, _hooks.useListener)(window, updateChildContainerHeight, "resize", true);
+  (0, _react.useEffect)(updateChildContainerHeight, [dependencies, belowIds, ref]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: (0, _classnames.default)("scrollable-container", className)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "content-details",
+    className: "content-details"
+  }, children));
+};
+var _default = exports.default = ScrollableContainer;

package/dist/components/ScrollableContainer/ScrollableContainer.scss

@@ -0,0 +1,7 @@
+.scrollable-container {
+  .content-details {
+    display: block;
+    overflow: auto;
+    scrollbar-gutter: stable;
+  }
+}

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ScrollableContainer from "./ScrollableContainer";
+declare const meta: Meta<typeof ScrollableContainer>;
+export default meta;
+type Story = StoryObj<typeof ScrollableContainer>;
+export declare const Default: Story;

package/dist/components/ScrollableContainer/ScrollableContainer.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ScrollableContainer = _interopRequireDefault(require("./ScrollableContainer"));
+var _react = _interopRequireDefault(require("react"));
+var _blocks = require("@storybook/blocks");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _ScrollableContainer.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const StoryExample = args => {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Above contents"), /*#__PURE__*/_react.default.createElement(_ScrollableContainer.default, {
+    belowIds: args.belowIds,
+    dependencies: []
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius mi eu pretium vulputate. Nunc commodo sit amet nibh quis rhoncus. Aliquam rhoncus porttitor semper. Aenean faucibus consectetur neque in sodales. Sed cursus mauris id ex sollicitudin sodales. Quisque molestie rutrum odio, ornare pharetra ligula. Pellentesque ornare tristique feugiat. In a augue neque. Aenean eget arcu quis lacus tempus posuere in sit amet dui. Suspendisse faucibus sapien nisl, nec laoreet sem convallis nec."), /*#__PURE__*/_react.default.createElement("p", null, "Vestibulum sed placerat lorem. Nam luctus ex id nisi luctus, id vestibulum sem bibendum. Vivamus turpis sem, pellentesque fermentum malesuada eu, faucibus porta libero. Duis eget venenatis odio. Etiam sed volutpat magna, non tempus erat. Nunc id tortor ac quam consectetur dapibus ac ut tellus. Pellentesque ut tellus venenatis elit vehicula condimentum eget quis lorem. Ut non consectetur est, a fringilla ipsum. Nunc vitae ligula ipsum. Etiam suscipit, libero ut lacinia viverra, nunc urna consequat ex, vel eleifend eros mauris vitae ipsum. Pellentesque sed dictum augue. Ut sit amet ullamcorper mauris. Nunc congue orci mollis purus sodales facilisis ac ut arcu. Maecenas feugiat sapien ac massa mollis sodales. Donec vitae turpis eu nisi laoreet pulvinar quis at nisl. Integer volutpat, metus eget elementum dictum, lacus sapien viverra felis, consequat fermentum nisl mi ac dui."), /*#__PURE__*/_react.default.createElement("p", null, "Nullam nulla turpis, dignissim vel dapibus ut, volutpat ac dui. Donec vel elementum lacus. Mauris maximus nec felis at faucibus. Nunc faucibus gravida velit, id blandit lectus tincidunt ac. Vestibulum orci diam, elementum in congue eu, placerat id risus. Sed tempor tempus tellus, vitae iaculis turpis fringilla nec. Phasellus imperdiet facilisis velit, sit amet lobortis odio dignissim ut."), /*#__PURE__*/_react.default.createElement("p", null, "Nam placerat urna vitae ligula hendrerit, ac tincidunt lorem maximus. Mauris eu odio nisi. Nulla facilisi. Sed egestas elit sed velit rutrum, sit amet bibendum metus hendrerit. Pellentesque luctus placerat tellus, eu bibendum justo. Cras eget leo ac ex volutpat gravida. Duis vitae mollis ante. Duis a congue nunc. Aenean aliquet, sapien quis tincidunt tincidunt, odio eros consectetur lacus, vel finibus mauris tortor id velit. Donec tincidunt vitae purus eu interdum. Pellentesque scelerisque dui viverra ex ullamcorper volutpat. Vestibulum lacinia vitae arcu volutpat porta. Etiam et cursus nulla, id aliquet felis. Nam ultricies, urna id mattis pretium, velit erat viverra elit, eu maximus diam eros id nisi."), /*#__PURE__*/_react.default.createElement("p", null, "Nullam eget nisl lectus. Pellentesque eu mauris ut tortor malesuada sagittis. Cras dictum cursus est non ultricies. Duis mollis non neque at commodo. Nunc feugiat justo et consequat aliquam. Ut consectetur libero eu erat feugiat finibus. Duis varius convallis quam eu sagittis. Maecenas ac est arcu. Suspendisse at enim eget nibh ultricies dictum. Etiam aliquet tellus vel felis malesuada laoreet.")), /*#__PURE__*/_react.default.createElement("div", {
+    id: "footer"
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "u-no-margin"
+  }, "Below contents"), /*#__PURE__*/_react.default.createElement("div", null, "here be dragons.")));
+};
+const Default = exports.Default = {
+  args: {
+    belowIds: ["footer"]
+  },
+  render: StoryExample,
+  parameters: {
+    docs: {
+      page: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null), /*#__PURE__*/_react.default.createElement(_blocks.Subtitle, null), /*#__PURE__*/_react.default.createElement(_blocks.Description, null))
+    }
+  }
+};

package/dist/components/ScrollableContainer/ScrollableContainer.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/ScrollableContainer/index.js

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

package/dist/components/ScrollableTable/ScrollableTable.d.ts

@@ -0,0 +1,27 @@
+import type { DependencyList, FC, ReactNode } from "react";
+import "./ScrollableTable.scss";
+export type Props = {
+    /**
+     * A MainTable that will be made scrollable.
+     */
+    children: ReactNode;
+    /**
+     * An array of dependencies that will trigger a re-calculation of the table body height when they change.
+     */
+    dependencies: DependencyList;
+    /**
+     * The ID of the table element that contains the `<tbody>` to be made scrollable.
+     */
+    tableId: string;
+    /**
+     * An array of element IDs below the table that should be considered when calculating the height.
+     */
+    belowIds?: string[];
+};
+/**
+ * This is a [React](https://reactjs.org/) component for use within the [Vanilla framework](https://docs.vanillaframework.io/).
+ *
+ * It is used to make a table scrollable by adjusting the height of the `<tbody>` element based on the viewport height and the heights of elements above and below it. As a result the header is sticky and only the body scrolls
+ */
+declare const ScrollableTable: FC<Props>;
+export default ScrollableTable;

package/dist/components/ScrollableTable/ScrollableTable.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../utils");
+require("./ScrollableTable.scss");
+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; }
+/**
+ * This is a [React](https://reactjs.org/) component for use within the [Vanilla framework](https://docs.vanillaframework.io/).
+ *
+ * It is used to make a table scrollable by adjusting the height of the `<tbody>` element based on the viewport height and the heights of elements above and below it. As a result the header is sticky and only the body scrolls
+ */
+const ScrollableTable = _ref => {
+  let {
+    dependencies,
+    children,
+    tableId,
+    belowIds = []
+  } = _ref;
+  const updateTBodyHeight = () => {
+    const table = document.getElementById(tableId);
+    if (!table || table.children.length !== 2) {
+      return;
+    }
+    const tBody = table.children[1];
+    const above = tBody.getBoundingClientRect().top + 1;
+    const below = belowIds.reduce((acc, belowId) => acc + (0, _utils.getAbsoluteHeightBelowById)(belowId), 0);
+    const parentsBottomSpacing = (0, _utils.getParentsBottomSpacing)(table);
+    const offset = Math.ceil(above + below + parentsBottomSpacing);
+    const style = "height: calc(100dvh - ".concat(offset, "px); min-height: calc(100dvh - ").concat(offset, "px)");
+    tBody.setAttribute("style", style);
+  };
+  (0, _hooks.useListener)(window, updateTBodyHeight, "resize", true);
+  (0, _react.useEffect)(updateTBodyHeight, [...dependencies, belowIds, tableId]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "scrollable-table"
+  }, children);
+};
+var _default = exports.default = ScrollableTable;

package/dist/components/ScrollableTable/ScrollableTable.scss

@@ -0,0 +1,58 @@
+@import "vanilla-framework/scss/settings";
+
+/* stylelint-disable selector-max-type */
+.scrollable-table {
+  table {
+    margin-bottom: 0;
+  }
+
+  th,
+  td {
+    display: table-cell;
+    vertical-align: top;
+  }
+
+  th::before {
+    content: "";
+    height: 1rem;
+  }
+
+  thead,
+  tbody {
+    display: block;
+    overflow: hidden auto;
+    scrollbar-gutter: stable;
+  }
+
+  tbody {
+    height: calc(100dvh - 323px);
+  }
+
+  thead tr,
+  tbody tr {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  @media screen and (max-width: $breakpoint-large) {
+    .p-table--mobile-card {
+      thead {
+        display: none;
+      }
+
+      td {
+        display: block;
+      }
+
+      tbody tr {
+        display: block;
+      }
+
+      tbody tr:first-child {
+        margin-top: $spv--x-large;
+      }
+    }
+  }
+}
+/* stylelint-enable selector-max-type */

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ScrollableTable from "./ScrollableTable";
+declare const meta: Meta<typeof ScrollableTable>;
+export default meta;
+type Story = StoryObj<typeof ScrollableTable>;
+export declare const Default: Story;

package/dist/components/ScrollableTable/ScrollableTable.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ScrollableTable = _interopRequireDefault(require("./ScrollableTable"));
+var _index = require("../../index");
+var _blocks = require("@storybook/blocks");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _ScrollableTable.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const StoryExample = args => {
+  const headers = [{
+    content: "Fact"
+  }, {
+    content: "Relevancy score"
+  }, {
+    content: "Size"
+  }, {
+    content: "ID"
+  }, {
+    "aria-label": "Actions",
+    className: "actions"
+  }];
+  const facts = ["Dragons are mythical creatures", "They can fly", "They breathe fire", "They hoard treasure", "They are often depicted as large reptiles", "They appear in various cultures' folklore", "They can be friendly or hostile", "They are often associated with wisdom", "They can shapeshift in some legends", "They are sometimes guardians of sacred places", "They can be found in literature and movies", "They are often depicted with wings", "They can be of various colors", "They are sometimes associated with knights"];
+  const rows = facts.map(item => {
+    return {
+      columns: [{
+        content: item,
+        role: "rowheader"
+      }, {
+        content: 1
+      }, {
+        content: "1 GiB"
+      }, {
+        content: 2
+      }]
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Above contents"), /*#__PURE__*/_react.default.createElement(_ScrollableTable.default, {
+    belowIds: args.belowIds,
+    dependencies: [headers, rows],
+    tableId: "facts-about-dragons"
+  }, /*#__PURE__*/_react.default.createElement(_index.MainTable, {
+    headers: headers,
+    rows: rows,
+    id: "facts-about-dragons"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    id: "footer"
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "u-no-margin"
+  }, "Below contents"), /*#__PURE__*/_react.default.createElement("div", null, "here be dragons.")));
+};
+const Default = exports.Default = {
+  args: {
+    belowIds: ["footer"]
+  },
+  render: StoryExample,
+  parameters: {
+    docs: {
+      page: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null), /*#__PURE__*/_react.default.createElement(_blocks.Subtitle, null), /*#__PURE__*/_react.default.createElement(_blocks.Description, null))
+    }
+  }
+};

package/dist/components/ScrollableTable/ScrollableTable.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/ScrollableTable/index.js

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

package/dist/components/SidePanel/SidePanel.js

@@ -32,7 +32,7 @@ The sidepanel component should be used to show additional information relating t
 
 * **SidePanel.HeaderControls:** To show controls in the header, such as buttons or icons for actions like closing the panel.
 
-* **SidePanel.Sticky:** Can be wrapped around the header or footer to make them sticky when scrolling.
+* **SidePanel.Sticky:** Can be wrapped around the header or footer to make them sticky when scrolling. The scrollbar will use the full area of the side panel, not just the content area. To limit the scrollbar to the content area, use the `ScrollableContainer` component instead of this one.
 
 * **SidePanel.Content:** To show the main content of the side panel.
 

package/dist/components/TablePagination/TablePagination.scss

@@ -26,7 +26,7 @@
   }
 
   .next {
-    margin: 0 $spv--large;
+    margin: 0 $spv--large 0 0;
 
     .p-icon--chevron-down {
       rotate: 270deg;
@@ -34,11 +34,15 @@
   }
 
   .pagination-input {
-    margin: 0 $spv--small 0 $spv--large;
+    margin: 0 $spv--large;
     min-width: 0;
     width: 4rem;
   }
 
+  .pagination-item-count {
+    margin: 0 $spv--large 0 0;
+  }
+
   .pagination-select {
     margin-bottom: 0;
     margin-left: $spv--x-large;
@@ -48,10 +52,6 @@
 
   @media screen and (max-width: $breakpoint-small) {
     .back,
-    .pagination-input {
-      margin-left: 0;
-    }
-
     .next {
       margin-left: 0;
       margin-right: 0;

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

@@ -12,3 +12,11 @@ export declare const RenderBelow: Story;
  * using the `TablePaginationControls` component.
  */
 export declare const ControlsOnly: Story;
+/** The `TablePaginationControls` component can be used when the total
+ *  number of entries is unknown.
+ */
+export declare const ControlsWithUnknownEntries: Story;
+/** The `TablePaginationControls` component can be used when it is known
+ *  that there are more entries than the amount displayed on the current page.
+ */
+export declare const ControlsWithPartiallyKnownEntries: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.RenderBelow = exports.RenderAbove = exports.Default = exports.CustomPageLimit = exports.CustomDisplayTitle = exports.ControlsOnly = void 0;
+exports.default = exports.RenderBelow = exports.RenderAbove = exports.Default = exports.CustomPageLimit = exports.CustomDisplayTitle = exports.ControlsWithUnknownEntries = exports.ControlsWithPartiallyKnownEntries = exports.ControlsOnly = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TablePagination = _interopRequireDefault(require("./TablePagination"));
 var _MainTable = _interopRequireDefault(require("../MainTable"));
@@ -327,4 +327,56 @@ const ControlsOnly = exports.ControlsOnly = {
       visibleCount: 10
     });
   }
+};
+
+/** The `TablePaginationControls` component can be used when the total
+ *  number of entries is unknown.
+ */
+const ControlsWithUnknownEntries = exports.ControlsWithUnknownEntries = {
+  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,
+      visibleCount: 10
+    });
+  }
+};
+
+/** The `TablePaginationControls` component can be used when it is known
+ *  that there are more entries than the amount displayed on the current page.
+ */
+const ControlsWithPartiallyKnownEntries = exports.ControlsWithPartiallyKnownEntries = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, {
+      currentPage: 3,
+      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,
+      visibleCount: 10
+    });
+  }
 };

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

@@ -27,7 +27,7 @@ const TablePaginationControls = _ref => {
     description,
     displayDescription = true,
     onInputPageChange,
-    itemName,
+    itemName = "row",
     nextButtonProps,
     onNextPage,
     onPageChange,
@@ -48,7 +48,8 @@ const TablePaginationControls = _ref => {
     visibleCount,
     isSmallScreen,
     totalItems,
-    itemName
+    itemName,
+    currentPage
   });
   const handleDecrementPage = currentPage => {
     if (currentPage > 1) {
@@ -70,7 +71,7 @@ const TablePaginationControls = _ref => {
   const handlePageSizeChange = e => {
     onPageSizeChange(parseInt(e.target.value));
   };
-  const isInputDisabled = !totalPages || totalPages == 1;
+  const isInputDisabled = typeof totalItems === "number" && (!totalPages || totalPages == 1);
   const maxPageValue = typeof totalPages === "number" ? totalPages : 1;
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("pagination", className)
@@ -99,7 +100,9 @@ const TablePaginationControls = _ref => {
     disabled: isInputDisabled,
     min: 1,
     max: maxPageValue
-  }), " ", typeof totalPages === "number" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "of\xA0", totalPages) : null) : null, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+  }), " ", typeof totalPages === "number" ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "pagination-item-count"
+  }, "of\xA0", totalPages) : null) : null, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
     "aria-label": Label.NEXT_PAGE,
     className: "next",
     appearance: "base",

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

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

package/dist/components/TablePagination/utils.js

@@ -47,18 +47,25 @@ const getDescription = _ref => {
     isSmallScreen,
     totalItems,
     itemName,
-    visibleCount
+    visibleCount,
+    currentPage
   } = _ref;
   if (description) {
     return description;
   }
+  let closing = "";
+  if (typeof totalItems === "number") {
+    closing = " out of ".concat(totalItems);
+  } else if (currentPage !== 1) {
+    closing = " of more than ".concat(visibleCount);
+  }
   if (isSmallScreen) {
-    return "".concat(visibleCount, " out of ").concat(totalItems);
+    return "".concat(visibleCount).concat(closing);
   }
   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" : "");
+  return "Showing ".concat(visibleCount).concat(closing, " ").concat(itemName).concat(totalItems !== 1 ? "s" : "");
 };
 exports.getDescription = getDescription;
 const useFigureSmallScreen = () => {

package/dist/esm/components/ScrollableContainer/ScrollableContainer.d.ts

@@ -0,0 +1,27 @@
+import type { DependencyList, FC, ReactNode } from "react";
+import "./ScrollableContainer.scss";
+export type Props = {
+    /**
+     * The content that should be scrollable on overflow.
+     */
+    children: ReactNode;
+    /**
+     * An array of dependencies that will trigger a re-calculation of the scrollable height when changed.
+     */
+    dependencies: DependencyList;
+    /**
+     * An array of element IDs below the scrollable container that should be considered when calculating the height.
+     */
+    belowIds?: string[];
+    /**
+     * Additional CSS classes to apply to the scrollable container.
+     */
+    className?: string;
+};
+/**
+ * This is a [React](https://reactjs.org/) component for use within the [Vanilla framework](https://docs.vanillaframework.io/).
+ *
+ * It is used to make any child element scrollable by adjusting the height based on the viewport height and the heights of elements above and below it. As a result the surrounding elements are sticky and only the wrapped element contents scroll
+ */
+declare const ScrollableContainer: FC<Props>;
+export default ScrollableContainer;