@canonical/react-components 2.14.0 → 2.15.1

package/dist/esm/components/ScrollableContainer/ScrollableContainer.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { useEffect, useRef } from "react";
+import classnames from "classnames";
+import "./ScrollableContainer.scss";
+import { getAbsoluteHeightBelowById, getParentsBottomSpacing } from "../../utils";
+import { useListener } from "../../hooks";
+/**
+ * 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
+ */
+var ScrollableContainer = _ref => {
+  var {
+    dependencies,
+    children,
+    belowIds = ["status-bar"],
+    className
+  } = _ref;
+  var ref = useRef(null);
+  var updateChildContainerHeight = () => {
+    var _ref$current;
+    var childContainer = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.children[0];
+    if (!childContainer) {
+      return;
+    }
+    var above = childContainer.getBoundingClientRect().top + 1;
+    var below = belowIds.reduce((acc, belowId) => acc + getAbsoluteHeightBelowById(belowId), 0);
+    var parentsBottomSpacing = getParentsBottomSpacing(childContainer);
+    var offset = Math.ceil(above + below + parentsBottomSpacing);
+    var style = "height: calc(100dvh - ".concat(offset, "px); min-height: calc(100dvh - ").concat(offset, "px)");
+    childContainer.setAttribute("style", style);
+  };
+  useListener(window, updateChildContainerHeight, "resize", true);
+  useEffect(updateChildContainerHeight, [dependencies, belowIds, ref]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: classnames("scrollable-container", className)
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "content-details",
+    className: "content-details"
+  }, children));
+};
+export default ScrollableContainer;

package/dist/esm/components/ScrollableContainer/ScrollableContainer.scss

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

package/dist/esm/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/esm/components/ScrollableContainer/ScrollableContainer.stories.js

@@ -0,0 +1,29 @@
+import ScrollableContainer from "./ScrollableContainer";
+import React from "react";
+import { Description, Subtitle, Title } from "@storybook/blocks";
+var meta = {
+  component: ScrollableContainer,
+  tags: ["autodocs"]
+};
+export default meta;
+var StoryExample = args => {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Above contents"), /*#__PURE__*/React.createElement(ScrollableContainer, {
+    belowIds: args.belowIds,
+    dependencies: []
+  }, /*#__PURE__*/React.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.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.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.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.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.createElement("div", {
+    id: "footer"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "u-no-margin"
+  }, "Below contents"), /*#__PURE__*/React.createElement("div", null, "here be dragons.")));
+};
+export var Default = {
+  args: {
+    belowIds: ["footer"]
+  },
+  render: StoryExample,
+  parameters: {
+    docs: {
+      page: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null))
+    }
+  }
+};

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

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

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

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

package/dist/esm/components/ScrollableContainer/index.js

@@ -0,0 +1 @@
+export { default } from "./ScrollableContainer";

package/dist/esm/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/esm/components/ScrollableTable/ScrollableTable.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { useEffect } from "react";
+import { getAbsoluteHeightBelowById, getParentsBottomSpacing } from "../../utils";
+import "./ScrollableTable.scss";
+import { useListener } from "../../hooks";
+/**
+ * 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
+ */
+var ScrollableTable = _ref => {
+  var {
+    dependencies,
+    children,
+    tableId,
+    belowIds = []
+  } = _ref;
+  var updateTBodyHeight = () => {
+    var table = document.getElementById(tableId);
+    if (!table || table.children.length !== 2) {
+      return;
+    }
+    var tBody = table.children[1];
+    var above = tBody.getBoundingClientRect().top + 1;
+    var below = belowIds.reduce((acc, belowId) => acc + getAbsoluteHeightBelowById(belowId), 0);
+    var parentsBottomSpacing = getParentsBottomSpacing(table);
+    var offset = Math.ceil(above + below + parentsBottomSpacing);
+    var style = "height: calc(100dvh - ".concat(offset, "px); min-height: calc(100dvh - ").concat(offset, "px)");
+    tBody.setAttribute("style", style);
+  };
+  useListener(window, updateTBodyHeight, "resize", true);
+  useEffect(updateTBodyHeight, [...dependencies, belowIds, tableId]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "scrollable-table"
+  }, children);
+};
+export default ScrollableTable;

package/dist/esm/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 (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/esm/components/ScrollableTable/ScrollableTable.stories.d.ts

@@ -0,0 +1,7 @@
+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;
+export declare const Responsive: Story;

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

@@ -0,0 +1,78 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+import ScrollableTable from "./ScrollableTable";
+import { MainTable } from "../../index";
+import { Description, Subtitle, Title } from "@storybook/blocks";
+var meta = {
+  component: ScrollableTable,
+  tags: ["autodocs"]
+};
+export default meta;
+var StoryExample = args => {
+  var headers = [{
+    content: "Fact"
+  }, {
+    content: "Relevancy score"
+  }, {
+    content: "Size"
+  }, {
+    content: "ID"
+  }];
+  var 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"];
+  var rows = facts.map(item => {
+    return {
+      columns: [{
+        content: item,
+        role: "rowheader"
+      }, {
+        content: 1
+      }, {
+        content: "1 GiB"
+      }, {
+        content: 2
+      }]
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Above contents"), /*#__PURE__*/React.createElement(ScrollableTable, {
+    belowIds: args.belowIds,
+    dependencies: [headers, rows],
+    tableId: "facts-about-dragons"
+  }, /*#__PURE__*/React.createElement(MainTable, {
+    headers: headers,
+    rows: rows,
+    responsive: args["responsive"],
+    id: "facts-about-dragons"
+  })), /*#__PURE__*/React.createElement("div", {
+    id: "footer"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "u-no-margin"
+  }, "Below contents"), /*#__PURE__*/React.createElement("div", null, "here be dragons.")));
+};
+export var Default = {
+  args: {
+    belowIds: ["footer"]
+  },
+  render: StoryExample,
+  parameters: {
+    docs: {
+      page: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null))
+    }
+  }
+};
+export var Responsive = {
+  args: {
+    belowIds: ["footer"]
+  },
+  render: args => StoryExample(_objectSpread(_objectSpread({}, args), {}, {
+    responsive: true
+  })),
+  parameters: {
+    docs: {
+      page: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null))
+    }
+  }
+};

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

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

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

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

package/dist/esm/components/ScrollableTable/index.js

@@ -0,0 +1 @@
+export { default } from "./ScrollableTable";

package/dist/esm/components/SidePanel/SidePanel.js

@@ -26,7 +26,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/esm/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/esm/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/esm/components/TablePagination/TablePagination.stories.js

@@ -320,4 +320,56 @@ export var ControlsOnly = {
       visibleCount: 10
     });
   }
+};
+
+/** The `TablePaginationControls` component can be used when the total
+ *  number of entries is unknown.
+ */
+export var ControlsWithUnknownEntries = {
+  render: () => {
+    return /*#__PURE__*/React.createElement(TablePaginationControls, {
+      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.
+ */
+export var ControlsWithPartiallyKnownEntries = {
+  render: () => {
+    return /*#__PURE__*/React.createElement(TablePaginationControls, {
+      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/esm/components/TablePagination/TablePaginationControls/TablePaginationControls.js

@@ -23,7 +23,7 @@ var TablePaginationControls = _ref => {
       description,
       displayDescription = true,
       onInputPageChange,
-      itemName,
+      itemName = "row",
       nextButtonProps,
       onNextPage,
       onPageChange,
@@ -44,7 +44,8 @@ var TablePaginationControls = _ref => {
     visibleCount,
     isSmallScreen,
     totalItems,
-    itemName
+    itemName,
+    currentPage
   });
   var handleDecrementPage = currentPage => {
     if (currentPage > 1) {
@@ -66,7 +67,7 @@ var TablePaginationControls = _ref => {
   var handlePageSizeChange = e => {
     onPageSizeChange(parseInt(e.target.value));
   };
-  var isInputDisabled = !totalPages || totalPages == 1;
+  var isInputDisabled = typeof totalItems === "number" && (!totalPages || totalPages == 1);
   var maxPageValue = typeof totalPages === "number" ? totalPages : 1;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classnames("pagination", className)
@@ -95,7 +96,9 @@ var TablePaginationControls = _ref => {
     disabled: isInputDisabled,
     min: 1,
     max: maxPageValue
-  }), " ", typeof totalPages === "number" ? /*#__PURE__*/React.createElement(React.Fragment, null, "of\xA0", totalPages) : null) : null, /*#__PURE__*/React.createElement(Button, _extends({
+  }), " ", typeof totalPages === "number" ? /*#__PURE__*/React.createElement("div", {
+    className: "pagination-item-count"
+  }, "of\xA0", totalPages) : null) : null, /*#__PURE__*/React.createElement(Button, _extends({
     "aria-label": Label.NEXT_PAGE,
     className: "next",
     appearance: "base",

package/dist/esm/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/esm/components/TablePagination/utils.js

@@ -39,18 +39,25 @@ export var getDescription = _ref => {
     isSmallScreen,
     totalItems,
     itemName,
-    visibleCount
+    visibleCount,
+    currentPage
   } = _ref;
   if (description) {
     return description;
   }
+  var 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" : "");
 };
 export var useFigureSmallScreen = () => {
   var [isSmallScreen, setSmallScreen] = useState(false);

package/dist/esm/hooks/useId.d.ts

@@ -1,4 +1,4 @@
 /**
- * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
+ * @deprecated Code component is deprecated. Use useId from React directly instead.
  */
 export declare const useId: () => string;

package/dist/esm/hooks/useId.js

@@ -2,7 +2,7 @@ import { useId as useIdReact } from "react";
 import { IS_DEV } from "../utils";
 
 /**
- * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
+ * @deprecated Code component is deprecated. Use useId from React directly instead.
  */
 export var useId = () => {
   var id = useIdReact();

package/dist/esm/hooks/useListener.js

@@ -40,12 +40,13 @@ export var useListener = function useListener(targetNode, callback, eventType) {
       targetNode.addEventListener(eventType, eventListener.current, options);
       isListening.current = true;
     }
+    return () => {
+      // Unattach the listener if the component gets unmounted while
+      // listening.
+      if (targetNode && eventListener.current && isListening.current) {
+        targetNode.removeEventListener(eventType, eventListener.current, options);
+        isListening.current = false;
+      }
+    };
   }, [callback, eventType, options, previousCallback, previousEventType, previousOptions, previousShouldThrottle, previousTargetNode, shouldListen, shouldThrottle, targetNode, throttle]);
-  useEffect(() => () => {
-    // Unattach the listener if the component gets unmounted while
-    // listening.
-    if (targetNode && isListening.current) {
-      targetNode.removeEventListener(eventType, eventListener.current, options);
-    }
-  }, [eventType, targetNode, options]);
 };

package/dist/esm/index.d.ts

@@ -44,6 +44,8 @@ export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
 export { default as RadioInput } from "./components/RadioInput";
 export { default as Row } from "./components/Row";
+export { default as ScrollableContainer } from "./components/ScrollableContainer";
+export { default as ScrollableTable } from "./components/ScrollableTable";
 export { default as SearchAndFilter } from "./components/SearchAndFilter";
 export { default as SearchBox } from "./components/SearchBox";
 export { default as Select } from "./components/Select";
@@ -116,6 +118,8 @@ export type { PaginationProps } from "./components/Pagination";
 export type { PanelProps } from "./components/Panel";
 export type { RadioInputProps } from "./components/RadioInput";
 export type { RowProps } from "./components/Row";
+export type { ScrollableTableProps } from "./components/ScrollableTable";
+export type { ScrollableContainerProps } from "./components/ScrollableContainer";
 export type { SearchAndFilterProps } from "./components/SearchAndFilter";
 export type { SearchBoxProps } from "./components/SearchBox";
 export type { SelectProps } from "./components/Select";
@@ -143,7 +147,7 @@ export type { TablePaginationProps } from "./components/TablePagination";
 export type { CustomSelectProps, CustomSelectDropdownProps, CustomSelectOption, } from "./components/CustomSelect";
 export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, usePrefersReducedMotion, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
-export { isNavigationAnchor, isNavigationButton } from "./utils";
+export { isNavigationAnchor, isNavigationButton, getElementAbsoluteHeight, getAbsoluteHeightBelowById, getParentsBottomSpacing, } from "./utils";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";
 export { Theme } from "./enums";
 export type { UsePortalOptions } from "./external";

package/dist/esm/index.js

@@ -44,6 +44,8 @@ export { default as Panel } from "./components/Panel";
 export { default as PasswordToggle } from "./components/PasswordToggle";
 export { default as RadioInput } from "./components/RadioInput";
 export { default as Row } from "./components/Row";
+export { default as ScrollableContainer } from "./components/ScrollableContainer";
+export { default as ScrollableTable } from "./components/ScrollableTable";
 export { default as SearchAndFilter } from "./components/SearchAndFilter";
 export { default as SearchBox } from "./components/SearchBox";
 export { default as Select } from "./components/Select";
@@ -74,6 +76,6 @@ export { default as TablePaginationControls } from "./components/TablePagination
 export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, usePrefersReducedMotion, useThrottle, useWindowFitment } from "./hooks";
-export { isNavigationAnchor, isNavigationButton } from "./utils";
+export { isNavigationAnchor, isNavigationButton, getElementAbsoluteHeight, getAbsoluteHeightBelowById, getParentsBottomSpacing } from "./utils";
 export { Theme } from "./enums";
 export { usePortal } from "./external";

package/dist/esm/utils.d.ts

@@ -25,3 +25,7 @@ export declare const isNavigationButton: (link: NavLink) => link is NavLinkButto
  * A typeguard for whether an element is a ReactNode.
  */
 export declare const isReactNode: (element: unknown) => element is ReactNode;
+export declare const getElementAbsoluteHeight: (element: HTMLElement) => number;
+export declare const getAbsoluteHeightBelowById: (belowId: string) => number;
+export declare const getParentsBottomSpacing: (element: Element) => number;
+export declare const toFloat: (value: string) => number;