@canonical/react-components 2.0.0 → 2.2.0

package/dist/external/usePortal.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePortal = exports.errorMessage1 = void 0;
+var _react = require("react");
+var _reactDom = require("react-dom");
+var _useSSR = require("./useSSR");
+/**
+ * This is a reference implementation of the usePortal hook from react-useportal: https://github.com/iamthesiz/react-useportal/blob/master/usePortal.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/react-useportal/blob/master/license.md
+ */
+
+const errorMessage1 = exports.errorMessage1 = "You must either add a `ref` to the element you are interacting with or pass an `event` to openPortal(e) or togglePortal(e) when the `programmaticallyOpen` option is not set to `true`.";
+const usePortal = function () {
+  let {
+    closeOnOutsideClick = true,
+    closeOnEsc = true,
+    bindTo,
+    // attach the portal to this node in the DOM
+    isOpen: defaultIsOpen = false,
+    onOpen,
+    onClose,
+    onPortalClick,
+    programmaticallyOpen = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    isServer,
+    isBrowser
+  } = (0, _useSSR.useSSR)();
+  const [isOpen, makeOpen] = (0, _react.useState)(defaultIsOpen);
+  // we use this ref because `isOpen` is stale for handleOutsideMouseClick
+  const open = (0, _react.useRef)(isOpen);
+  const setOpen = (0, _react.useCallback)(v => {
+    // workaround to not have stale `isOpen` in the handleOutsideMouseClick
+    open.current = v;
+    makeOpen(v);
+  }, []);
+  const targetEl = (0, _react.useRef)(null); // this is the element you are clicking/hovering/whatever, to trigger opening the portal
+  const portal = (0, _react.useRef)(isBrowser ? document.createElement("div") : null);
+  (0, _react.useEffect)(() => {
+    if (isBrowser && !portal.current) portal.current = document.createElement("div");
+  }, [isBrowser, portal]);
+  const elToMountTo = (0, _react.useMemo)(() => {
+    if (isServer) return null;
+    return bindTo && bindTo.current || document.body;
+  }, [isServer, bindTo]);
+  const createCustomEvent = e => {
+    if (!e) return {
+      portal,
+      targetEl,
+      event: e
+    };
+    const event = e || {};
+    if (event.persist) event.persist();
+    event.portal = portal;
+    event.targetEl = targetEl;
+    event.event = e;
+    const {
+      currentTarget
+    } = e;
+    if (!targetEl.current && currentTarget && currentTarget !== document) targetEl.current = event.currentTarget;
+    return event;
+  };
+  const openPortal = (0, _react.useCallback)(e => {
+    if (isServer) return;
+    const customEvent = createCustomEvent(e);
+    // for some reason, when we don't have the event argument, there
+    // is a weird race condition. Would like to see if we can remove
+    // setTimeout, but for now this works
+    if (targetEl.current == null && !programmaticallyOpen) {
+      setTimeout(() => setOpen(true), 0);
+      throw Error(errorMessage1);
+    }
+    if (onOpen) onOpen(customEvent);
+    setOpen(true);
+  }, [isServer, portal, setOpen, targetEl, onOpen, programmaticallyOpen]);
+  const closePortal = (0, _react.useCallback)(e => {
+    if (isServer) return;
+    const customEvent = createCustomEvent(e);
+    if (onClose && open.current) onClose(customEvent);
+    if (open.current) setOpen(false);
+  }, [isServer, onClose, setOpen]);
+  const togglePortal = (0, _react.useCallback)(e => open.current ? closePortal(e) : openPortal(e), [closePortal, openPortal]);
+  const handleKeydown = (0, _react.useCallback)(e => e.key === "Escape" && closeOnEsc ? closePortal(e) : undefined, [closeOnEsc, closePortal]);
+  const handleOutsideMouseClick = (0, _react.useCallback)(e => {
+    const containsTarget = target => target.current.contains(e.target);
+    // There might not be a targetEl if the portal was opened programmatically.
+    if (containsTarget(portal) || e.button !== 0 || !open.current || targetEl.current && containsTarget(targetEl)) return;
+    if (closeOnOutsideClick) closePortal(e);
+  }, [isServer, closePortal, closeOnOutsideClick, portal]);
+  const handleMouseDown = (0, _react.useCallback)(e => {
+    if (isServer || !(portal.current instanceof HTMLElement)) return;
+    const customEvent = createCustomEvent(e);
+    if (portal.current.contains(customEvent.target) && onPortalClick) onPortalClick(customEvent);
+    handleOutsideMouseClick(e);
+  }, [handleOutsideMouseClick, isServer]);
+  (0, _react.useEffect)(() => {
+    if (isServer) return null;
+    if (!(elToMountTo instanceof HTMLElement) || !(portal.current instanceof HTMLElement)) return null;
+    const node = portal.current;
+    elToMountTo.appendChild(portal.current);
+    document.addEventListener("keydown", handleKeydown);
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+      document.removeEventListener("mousedown", handleMouseDown);
+      elToMountTo.removeChild(node);
+    };
+  }, [isServer, handleOutsideMouseClick, handleKeydown, elToMountTo, portal]);
+  const Portal = (0, _react.useCallback)(_ref => {
+    let {
+      children
+    } = _ref;
+    if (portal.current != null) return /*#__PURE__*/(0, _reactDom.createPortal)(children, portal.current);
+    return null;
+  }, [portal]);
+  return Object.assign([openPortal, closePortal, open.current, Portal, togglePortal, targetEl, portal], {
+    isOpen: open.current,
+    openPortal,
+    ref: targetEl,
+    closePortal,
+    togglePortal,
+    Portal,
+    portalRef: portal,
+    bind: {
+      // used if you want to spread all html attributes onto the target element
+      ref: targetEl
+    }
+  });
+};
+exports.usePortal = usePortal;

package/dist/external/usePortal.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This is a reference implementation of the usePortal hook from react-useportal: https://github.com/iamthesiz/react-useportal/blob/master/usePortal.test.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/react-useportal/blob/master/license.md
+ */
+export {};

package/dist/external/useSSR.d.ts

@@ -0,0 +1,19 @@
+/**
+ * This is a reference implementation of the useSSR hook from use-ssr: https://github.com/iamthesiz/use-ssr/blob/master/useSSR.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/use-ssr/blob/master/license.md
+ */
+interface UseSSRReturn {
+    isBrowser: boolean;
+    isServer: boolean;
+    device: Device;
+    canUseWorkers: boolean;
+    canUseEventListeners: boolean;
+    canUseViewport: boolean;
+}
+export declare enum Device {
+    Browser = "browser",
+    Server = "server"
+}
+export declare const weAreServer: () => void;
+export declare const useSSR: () => UseSSRReturn;
+export {};

package/dist/external/useSSR.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.weAreServer = exports.useSSR = exports.Device = void 0;
+/**
+ * This is a reference implementation of the useSSR hook from use-ssr: https://github.com/iamthesiz/use-ssr/blob/master/useSSR.ts
+ * The license for the content in this file is goverened by the original project's license: https://github.com/iamthesiz/use-ssr/blob/master/license.md
+ */
+let Device = exports.Device = /*#__PURE__*/function (Device) {
+  Device["Browser"] = "browser";
+  Device["Server"] = "server";
+  return Device;
+}({});
+const {
+  Browser,
+  Server
+} = Device;
+const canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+const device = canUseDOM ? Browser : Server;
+const SSRObject = {
+  isBrowser: device === Browser,
+  isServer: device === Server,
+  device,
+  canUseWorkers: typeof Worker !== "undefined",
+  canUseEventListeners: device === Browser && !!window.addEventListener,
+  canUseViewport: device === Browser && !!window.screen
+};
+const assign = function () {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return args.reduce((acc, obj) => ({
+    ...acc,
+    ...obj
+  }), {});
+};
+const values = obj => Object.keys(obj).map(key => obj[key]);
+const toArrayObject = () => assign((values(SSRObject), SSRObject));
+let useSSRObject = toArrayObject();
+const weAreServer = () => {
+  SSRObject.isServer = true;
+  useSSRObject = toArrayObject();
+};
+exports.weAreServer = weAreServer;
+const useSSR = () => useSSRObject;
+exports.useSSR = useSSR;

package/dist/hooks/useWindowFitment.js

@@ -29,8 +29,8 @@ const useWindowFitment = function (targetNode, referenceNode, callback) {
         referenceCoordinates = {
           // The mouse is a single point so use 0 for the height and width.
           height: 0,
-          left: evt.x || 0,
-          top: evt.y || 0,
+          left: ("x" in evt && typeof evt.x === "number" ? evt.x : null) || 0,
+          top: ("y" in evt && typeof evt.y === "number" ? evt.y : null) || 0,
           width: 0
         };
       }

package/dist/index.d.ts

@@ -138,3 +138,5 @@ export type { WindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";
 export { Theme } from "./enums";
+export type { UsePortalOptions } from "./external";
+export { usePortal } from "./external";

package/dist/index.js

@@ -96,7 +96,8 @@ var _exportNames = {
   useWindowFitment: true,
   isNavigationAnchor: true,
   isNavigationButton: true,
-  Theme: true
+  Theme: true,
+  usePortal: true
 };
 Object.defineProperty(exports, "Accordion", {
   enumerable: true,
@@ -638,6 +639,12 @@ Object.defineProperty(exports, "usePagination", {
     return _hooks.usePagination;
   }
 });
+Object.defineProperty(exports, "usePortal", {
+  enumerable: true,
+  get: function () {
+    return _external.usePortal;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function () {
@@ -740,6 +747,7 @@ var _CustomSelect = _interopRequireDefault(require("./components/CustomSelect"))
 var _hooks = require("./hooks");
 var _utils = require("./utils");
 var _enums = require("./enums");
+var _external = require("./external");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -26,90 +26,88 @@
   "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
     "@babel/cli": "7.26.4",
-    "@babel/eslint-parser": "7.26.5",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/preset-env": "7.26.0",
+    "@babel/eslint-parser": "7.26.8",
+    "@babel/plugin-transform-class-properties": "7.25.9",
+    "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
-    "@eslint/compat": "1.2.5",
+    "@eslint/compat": "1.2.6",
     "@eslint/eslintrc": "3.2.0",
-    "@eslint/js": "9.18.0",
-    "@percy/cli": "1.30.6",
+    "@eslint/js": "9.20.0",
+    "@percy/cli": "1.30.7",
     "@percy/storybook": "6.0.3",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@storybook/addon-a11y": "8.4.7",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.5.0",
-    "@storybook/addon-onboarding": "8.5.0",
+    "@storybook/addon-a11y": "8.5.6",
+    "@storybook/addon-essentials": "8.5.6",
+    "@storybook/addon-interactions": "8.5.6",
+    "@storybook/addon-links": "8.5.6",
+    "@storybook/addon-onboarding": "8.5.6",
     "@storybook/addon-webpack5-compiler-babel": "3.0.5",
-    "@storybook/blocks": "8.4.7",
-    "@storybook/react": "8.4.7",
-    "@storybook/react-webpack5": "8.5.0",
-    "@testing-library/cypress": "10.0.2",
+    "@storybook/blocks": "8.5.6",
+    "@storybook/react": "8.5.6",
+    "@storybook/react-webpack5": "8.5.6",
+    "@testing-library/cypress": "10.0.3",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
-    "@types/lodash.isequal": "4",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "babel-plugin-module-resolver": "5.0.2",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
     "concurrently": "9.1.2",
     "css-loader": "7.1.2",
-    "cypress": "14.0.1",
+    "cypress": "14.0.3",
     "deepmerge": "4.3.1",
-    "eslint": "9.18.0",
+    "eslint": "9.20.1",
     "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-prettier": "5.2.3",
     "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-storybook": "0.11.2",
+    "eslint-plugin-storybook": "0.11.3",
     "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",
+    "prettier": "3.5.1",
     "react": "19.0.0",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "19.0.0",
-    "sass": "1.83.4",
-    "sass-loader": "16.0.4",
-    "semantic-release": "24.2.1",
-    "storybook": "8.4.7",
+    "sass": "1.85.0",
+    "sass-loader": "16.0.5",
+    "semantic-release": "24.2.3",
+    "storybook": "8.5.6",
     "strip-ansi": "7.1.0",
     "style-loader": "4.0.0",
-    "stylelint": "16.13.2",
+    "stylelint": "16.14.1",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
-    "stylelint-prettier": "5.0.2",
+    "stylelint-prettier": "5.0.3",
     "ts-jest": "29.2.5",
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
-    "typescript-eslint": "8.20.0",
-    "vanilla-framework": "4.20.2",
+    "typescript-eslint": "8.24.1",
+    "vanilla-framework": "4.21.0",
     "wait-on": "8.0.2",
-    "webpack": "5.97.1"
+    "webpack": "5.98.0"
   },
   "dependencies": {
     "@types/jest": "29.5.14",
-    "@types/node": "20.17.13",
-    "@types/react": "19.0.8",
-    "@types/react-dom": "19.0.3",
+    "@types/node": "20.17.19",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "@types/react-table": "7.7.20",
     "classnames": "2.5.1",
+    "fast-deep-equal": "3.1.3",
     "jest-environment-jsdom": "29.7.0",
-    "lodash.isequal": "4.5.0",
     "prop-types": "15.8.1",
-    "react-table": "7.8.0",
-    "react-useportal": "1.0.19"
+    "react-table": "7.8.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",