@canonical/react-components 2.13.0 → 2.15.0

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;

package/dist/esm/utils.js

@@ -38,4 +38,35 @@ export var isNavigationButton = link => !link.url;
 /**
  * A typeguard for whether an element is a ReactNode.
  */
-export var isReactNode = element => /*#__PURE__*/isValidElement(element);
+export var isReactNode = element => /*#__PURE__*/isValidElement(element);
+export var getElementAbsoluteHeight = element => {
+  if (!element) {
+    return 0;
+  }
+  var style = window.getComputedStyle(element);
+  var margin = toFloat(style.marginTop) + toFloat(style.marginBottom);
+  var padding = toFloat(style.paddingTop) + toFloat(style.paddingBottom);
+  return element.offsetHeight + margin + padding + 1;
+};
+export var getAbsoluteHeightBelowById = belowId => {
+  var element = belowId ? document.getElementById(belowId) : undefined;
+  if (!element) {
+    return 0;
+  }
+  return getElementAbsoluteHeight(element);
+};
+export var getParentsBottomSpacing = element => {
+  var sum = 0;
+  while (element.parentElement) {
+    element = element.parentElement;
+    var style = window.getComputedStyle(element);
+    var margin = toFloat(style.marginBottom);
+    var padding = toFloat(style.paddingBottom);
+    sum += margin + padding;
+  }
+  return sum;
+};
+export var toFloat = value => {
+  var result = parseFloat(value);
+  return Number.isNaN(result) ? 0 : result;
+};

package/dist/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/hooks/useId.js

@@ -7,7 +7,7 @@ exports.useId = void 0;
 var _react = require("react");
 var _utils = require("../utils");
 /**
- * @deprecated Code component is deprecated. Use CodeSnippet component or inline `<code>` instead.
+ * @deprecated Code component is deprecated. Use useId from React directly instead.
  */
 const useId = () => {
   const id = (0, _react.useId)();

package/dist/hooks/useListener.js

@@ -45,13 +45,14 @@ const useListener = function (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]);
-  (0, _react.useEffect)(() => () => {
-    // Unattach the listener if the component gets unmounted while
-    // listening.
-    if (targetNode && isListening.current) {
-      targetNode.removeEventListener(eventType, eventListener.current, options);
-    }
-  }, [eventType, targetNode, options]);
 };
 exports.useListener = useListener;

package/dist/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/index.js

@@ -63,6 +63,8 @@ var _exportNames = {
   PasswordToggle: true,
   RadioInput: true,
   Row: true,
+  ScrollableContainer: true,
+  ScrollableTable: true,
   SearchAndFilter: true,
   SearchBox: true,
   Select: true,
@@ -108,6 +110,9 @@ var _exportNames = {
   useWindowFitment: true,
   isNavigationAnchor: true,
   isNavigationButton: true,
+  getElementAbsoluteHeight: true,
+  getAbsoluteHeightBelowById: true,
+  getParentsBottomSpacing: true,
   Theme: true,
   usePortal: true
 };
@@ -417,6 +422,18 @@ Object.defineProperty(exports, "Row", {
     return _Row.default;
   }
 });
+Object.defineProperty(exports, "ScrollableContainer", {
+  enumerable: true,
+  get: function () {
+    return _ScrollableContainer.default;
+  }
+});
+Object.defineProperty(exports, "ScrollableTable", {
+  enumerable: true,
+  get: function () {
+    return _ScrollableTable.default;
+  }
+});
 Object.defineProperty(exports, "SearchAndFilter", {
   enumerable: true,
   get: function () {
@@ -627,6 +644,24 @@ Object.defineProperty(exports, "failure", {
     return _NotificationProvider.failure;
   }
 });
+Object.defineProperty(exports, "getAbsoluteHeightBelowById", {
+  enumerable: true,
+  get: function () {
+    return _utils.getAbsoluteHeightBelowById;
+  }
+});
+Object.defineProperty(exports, "getElementAbsoluteHeight", {
+  enumerable: true,
+  get: function () {
+    return _utils.getElementAbsoluteHeight;
+  }
+});
+Object.defineProperty(exports, "getParentsBottomSpacing", {
+  enumerable: true,
+  get: function () {
+    return _utils.getParentsBottomSpacing;
+  }
+});
 Object.defineProperty(exports, "info", {
   enumerable: true,
   get: function () {
@@ -804,6 +839,8 @@ var _Panel = _interopRequireDefault(require("./components/Panel"));
 var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));
 var _RadioInput = _interopRequireDefault(require("./components/RadioInput"));
 var _Row = _interopRequireDefault(require("./components/Row"));
+var _ScrollableContainer = _interopRequireDefault(require("./components/ScrollableContainer"));
+var _ScrollableTable = _interopRequireDefault(require("./components/ScrollableTable"));
 var _SearchAndFilter = _interopRequireDefault(require("./components/SearchAndFilter"));
 var _SearchBox = _interopRequireDefault(require("./components/SearchBox"));
 var _Select = _interopRequireDefault(require("./components/Select"));

package/dist/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;

package/dist/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isReactNode = exports.isNavigationButton = exports.isNavigationAnchor = exports.highlightSubString = exports.IS_DEV = void 0;
+exports.toFloat = exports.isReactNode = exports.isNavigationButton = exports.isNavigationAnchor = exports.highlightSubString = exports.getParentsBottomSpacing = exports.getElementAbsoluteHeight = exports.getAbsoluteHeightBelowById = exports.IS_DEV = void 0;
 var _react = require("react");
 const IS_DEV = exports.IS_DEV = process.env.NODE_ENV === "development";
 
@@ -48,4 +48,39 @@ const isNavigationButton = link => !link.url;
  */
 exports.isNavigationButton = isNavigationButton;
 const isReactNode = element => /*#__PURE__*/(0, _react.isValidElement)(element);
-exports.isReactNode = isReactNode;
+exports.isReactNode = isReactNode;
+const getElementAbsoluteHeight = element => {
+  if (!element) {
+    return 0;
+  }
+  const style = window.getComputedStyle(element);
+  const margin = toFloat(style.marginTop) + toFloat(style.marginBottom);
+  const padding = toFloat(style.paddingTop) + toFloat(style.paddingBottom);
+  return element.offsetHeight + margin + padding + 1;
+};
+exports.getElementAbsoluteHeight = getElementAbsoluteHeight;
+const getAbsoluteHeightBelowById = belowId => {
+  const element = belowId ? document.getElementById(belowId) : undefined;
+  if (!element) {
+    return 0;
+  }
+  return getElementAbsoluteHeight(element);
+};
+exports.getAbsoluteHeightBelowById = getAbsoluteHeightBelowById;
+const getParentsBottomSpacing = element => {
+  let sum = 0;
+  while (element.parentElement) {
+    element = element.parentElement;
+    const style = window.getComputedStyle(element);
+    const margin = toFloat(style.marginBottom);
+    const padding = toFloat(style.paddingBottom);
+    sum += margin + padding;
+  }
+  return sum;
+};
+exports.getParentsBottomSpacing = getParentsBottomSpacing;
+const toFloat = value => {
+  const result = parseFloat(value);
+  return Number.isNaN(result) ? 0 : result;
+};
+exports.toFloat = toFloat;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.13.0",
+  "version": "2.15.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.26.1",
+    "vanilla-framework": "4.29.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },