@canonical/react-components 2.14.0 → 2.15.0

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.14.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.28.0",
+    "vanilla-framework": "4.29.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },