@canonical/react-components 2.13.0 → 2.15.0

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/NotificationProvider/index.d.ts

@@ -1,3 +1,3 @@
 export { NotificationConsumer, NotificationProvider, useNotify, } from "./NotificationProvider";
-export { info, success, failure, queue } from "./messageBuilder";
+export { info, success, failure, caution, queue } from "./messageBuilder";
 export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./types";

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

@@ -1,2 +1,2 @@
 export { NotificationConsumer, NotificationProvider, useNotify } from "./NotificationProvider";
-export { info, success, failure, queue } from "./messageBuilder";
+export { info, success, failure, caution, queue } from "./messageBuilder";

package/dist/esm/components/NotificationProvider/messageBuilder.d.ts

@@ -1,6 +1,8 @@
 import { NotificationAction, NotificationType, QueuedNotification } from "./types";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 export declare const queue: (notification: NotificationType) => QueuedNotification;
-export declare const info: (message: ReactNode, title?: string) => NotificationType;
-export declare const success: (message: ReactNode, title?: string) => NotificationType;
+export declare const info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => NotificationType;
+export declare const success: (message: ReactNode, title?: string, actions?: NotificationAction[]) => NotificationType;
 export declare const failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;
+export declare const caution: (message: ReactNode, title?: string, actions?: NotificationAction[]) => NotificationType;
+export declare const formatErrorMessage: (message?: ReactNode, error?: unknown) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;

package/dist/esm/components/NotificationProvider/messageBuilder.js

@@ -7,25 +7,42 @@ export var queue = notification => {
     }
   };
 };
-export var info = (message, title) => {
+export var info = (message, title, actions) => {
   return {
     message,
     title,
+    actions,
     type: NotificationSeverity.INFORMATION
   };
 };
-export var success = (message, title) => {
+export var success = (message, title, actions) => {
   return {
     message,
     title,
+    actions,
     type: NotificationSeverity.POSITIVE
   };
 };
 export var failure = (title, error, message, actions) => {
   return {
     actions,
-    message: error && error instanceof Error ? /*#__PURE__*/React.createElement(React.Fragment, null, message, " ", error.message) : message,
+    message: formatErrorMessage(message, error),
     title,
     type: NotificationSeverity.NEGATIVE
   };
+};
+export var caution = (message, title, actions) => {
+  return {
+    message,
+    actions,
+    title,
+    type: NotificationSeverity.CAUTION
+  };
+};
+export var formatErrorMessage = (message, error) => {
+  if (error && error instanceof Error) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, message, " ", error.message);
+  } else {
+    return message;
+  }
 };

package/dist/esm/components/Notifications/ToastNotification/ToastNotification.stories.js

@@ -51,6 +51,8 @@ var PreloadedList = () => {
       onClick: () => console.log("Retry clicked")
     }])
   }, "Add Error"), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => toastNotify.caution("You have unsaved changes")
+  }, "Add Warning"), /*#__PURE__*/React.createElement(Button, {
     onClick: toastNotify.toggleListView
   }, "Toggle List View"));
 };

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts

@@ -11,10 +11,10 @@ interface Props {
 }
 interface ToastNotificationHelper {
     notifications: ToastNotificationType[];
-    success: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
-    info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => ToastNotificationType;
-    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
-    caution: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
+    success: (message: ReactNode, actions?: NotificationAction[], title?: string, id?: ToastNotificationType["id"]) => ToastNotificationType;
+    info: (message: ReactNode, title?: string, actions?: NotificationAction[], id?: ToastNotificationType["id"]) => ToastNotificationType;
+    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[], id?: ToastNotificationType["id"]) => ToastNotificationType;
+    caution: (message: ReactNode, actions?: NotificationAction[], title?: string, id?: ToastNotificationType["id"]) => ToastNotificationType;
     clear: (notification?: ToastNotificationType[]) => void;
     toggleListView: () => void;
     isListView: boolean;

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.js

@@ -3,8 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 { failure as _failure } from "../../NotificationProvider";
-import { NotificationSeverity } from "./..";
+import { failure as _failure, info as _info, caution as _caution, success as _success } from "../../NotificationProvider";
 import ToastNotification from "./ToastNotification";
 import ToastNotificationList from "./ToastNotificationList";
 import { createContext, useContext, useEffect, useState } from "react";
@@ -138,9 +137,10 @@ var ToastNotificationProvider = _ref => {
     });
   };
   var addNotification = notification => {
+    var _notification$id;
     var notificationToAdd = _objectSpread(_objectSpread({}, notification), {}, {
       timestamp: new Date().toLocaleString(),
-      id: Date.now().toString() + (Math.random() + 1).toString(36).substring(7)
+      id: (_notification$id = notification.id) !== null && _notification$id !== void 0 ? _notification$id : Date.now().toString() + (Math.random() + 1).toString(36).substring(7)
     });
     setNotifications(prev => {
       return [...prev, notificationToAdd];
@@ -186,25 +186,18 @@ var ToastNotificationProvider = _ref => {
   });
   var helper = {
     notifications,
-    failure: (title, error, message, actions) => addNotification(_failure(title, error, message, actions)),
-    info: (message, title, actions) => addNotification({
-      message,
-      actions,
-      title,
-      type: NotificationSeverity.INFORMATION
-    }),
-    success: (message, actions, title) => addNotification({
-      message,
-      actions,
-      title,
-      type: NotificationSeverity.POSITIVE
-    }),
-    caution: (message, actions, title) => addNotification({
-      message,
-      actions,
-      title,
-      type: NotificationSeverity.CAUTION
-    }),
+    failure: (title, error, message, actions, id) => addNotification(_objectSpread(_objectSpread({}, _failure(title, error, message, actions)), {}, {
+      id
+    })),
+    info: (message, title, actions, id) => addNotification(_objectSpread(_objectSpread({}, _info(message, title, actions)), {}, {
+      id
+    })),
+    success: (message, actions, title, id) => addNotification(_objectSpread(_objectSpread({}, _success(message, title, actions)), {}, {
+      id
+    })),
+    caution: (message, actions, title, id) => addNotification(_objectSpread(_objectSpread({}, _caution(message, title, actions)), {}, {
+      id
+    })),
     clear,
     toggleListView,
     isListView: showList,

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;

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 (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/esm/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/esm/components/ScrollableTable/ScrollableTable.stories.js

@@ -0,0 +1,62 @@
+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"
+  }, {
+    "aria-label": "Actions",
+    className: "actions"
+  }];
+  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,
+    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))
+    }
+  }
+};

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";