@canonical/react-components 1.9.1 → 2.0.0

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ReactNode } from "react";
 /**
  * Determine if we are working with a small screen.
  * 'small screen' in this case is relative to the width of the description div
@@ -11,7 +11,7 @@ export declare const figureSmallScreen: () => boolean;
  * @param dataForwardProp - the name of the prop from the children components to override
  * @param data - actual data to be passed to the prop specified by @param dataForwardProp
  */
-export declare const renderChildren: (children: ReactNode, dataForwardProp: string, data: unknown[]) => ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+export declare const renderChildren: (children: ReactNode, dataForwardProp: string, data: unknown[]) => import("react").FunctionComponentElement<any>[];
 export declare const DEFAULT_PAGE_LIMITS: number[];
 export declare const generatePagingOptions: (pageLimits: number[]) => {
     value: number;
@@ -23,5 +23,5 @@ export declare const getDescription: ({ description, isSmallScreen, totalItems,
     totalItems: number;
     itemName: string;
     visibleCount: number;
-}) => string | number | true | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
+}) => 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/TableRow/TableRow.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLProps, ReactNode } from "react";
+import React from "react";
 import type { PropsWithSpread } from "../../types";
 export type Props = PropsWithSpread<{
     /**
@@ -6,5 +7,5 @@ export type Props = PropsWithSpread<{
      */
     children: ReactNode;
 }, HTMLProps<HTMLTableRowElement>>;
-declare const TableRow: ({ children, ...trProps }: Props) => JSX.Element;
+declare const TableRow: ({ children, ...trProps }: Props) => React.JSX.Element;
 export default TableRow;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { HTMLProps, ElementType, ReactNode, ComponentType } from "react";
 import type { ClassName } from "../../types";
 export type TabLink<P = null> = {
@@ -41,5 +42,5 @@ export type Props<P = null> = {
 Tabs organise and allow navigation between groups of content that are related and at the same level
 of hierarchy.
  */
-declare const Tabs: <P>({ className, links, listClassName, }: Props<P>) => JSX.Element;
+declare const Tabs: <P>({ className, links, listClassName, }: Props<P>) => React.JSX.Element;
 export default Tabs;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { TextareaHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 /**
@@ -66,5 +67,5 @@ export type Props = PropsWithSpread<{
  *
  * The Textarea component defines a multi-line text input control.
  */
-declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, onControlEnter, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => JSX.Element;
+declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, onControlEnter, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => React.JSX.Element;
 export default Textarea;

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

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 import type { WindowFitment } from "../../hooks";
 import type { ClassName, ValueOf } from "../../types";
@@ -71,5 +72,5 @@ export declare const adjustForWindow: (position: Position, fitsWindow: WindowFit
  *
  * An alternative use of tooltips is to provide information on a disabled actionable element, e.g. for disabled buttons, providing information about why they are disabled.
  */
-declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => JSX.Element;
+declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => React.JSX.Element;
 export default Tooltip;

package/dist/esm/hooks/useThrottle.js

@@ -10,8 +10,8 @@ export var THROTTLE_DELAY = 1000 / 60;
  */
 export var useThrottle = function useThrottle(callback) {
   var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : THROTTLE_DELAY;
-  var timeout = useRef();
-  var lastCall = useRef();
+  var timeout = useRef(null);
+  var lastCall = useRef(null);
   var lastArgs = useRef(null);
   var throttle = useCallback(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {

package/dist/hooks/useThrottle.js

@@ -16,8 +16,8 @@ const THROTTLE_DELAY = exports.THROTTLE_DELAY = 1000 / 60;
  */
 const useThrottle = function (callback) {
   let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : THROTTLE_DELAY;
-  const timeout = (0, _react.useRef)();
-  const lastCall = (0, _react.useRef)();
+  const timeout = (0, _react.useRef)(null);
+  const lastCall = (0, _react.useRef)(null);
   const lastArgs = (0, _react.useRef)(null);
   const throttle = (0, _react.useCallback)(function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.9.1",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -57,28 +57,28 @@
     "babel-loader": "9.2.1",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
-    "concurrently": "8.2.2",
+    "concurrently": "9.1.2",
     "css-loader": "7.1.2",
-    "cypress": "13.17.0",
+    "cypress": "14.0.1",
     "deepmerge": "4.3.1",
     "eslint": "9.18.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-cypress": "3.6.0",
+    "eslint-config-prettier": "10.0.1",
+    "eslint-plugin-cypress": "4.1.0",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.2.2",
     "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-hooks": "5.1.0",
     "eslint-plugin-storybook": "0.11.2",
-    "eslint-plugin-testing-library": "6.5.0",
+    "eslint-plugin-testing-library": "7.1.1",
     "formik": "2.4.6",
     "jest": "29.7.0",
     "npm-package-json-lint": "8.0.0",
     "prettier": "3.4.2",
-    "react": "18.3.1",
+    "react": "19.0.0",
     "react-docgen-typescript-loader": "3.7.2",
-    "react-dom": "18.3.1",
+    "react-dom": "19.0.0",
     "sass": "1.83.4",
     "sass-loader": "16.0.4",
     "semantic-release": "24.2.1",
@@ -101,8 +101,8 @@
   "dependencies": {
     "@types/jest": "29.5.14",
     "@types/node": "20.17.13",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/react-table": "7.7.20",
     "classnames": "2.5.1",
     "jest-environment-jsdom": "29.7.0",
@@ -111,19 +111,12 @@
     "react-table": "7.8.0",
     "react-useportal": "1.0.19"
   },
-  "resolutions": {
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
-    "postcss": "^8.3.11",
-    "jackspeak": "2.1.1",
-    "strip-ansi": "6.0.1"
-  },
   "peerDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
     "formik": "^2.4.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {