@canonical/react-components 2.16.1 → 3.0.1

package/dist/components/LoginPageLayout/LoginPageLayout.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _Card = _interopRequireDefault(require("../Card"));
 var _Col = _interopRequireDefault(require("../Col"));
 var _Navigation = _interopRequireDefault(require("../Navigation"));
 var _Row = _interopRequireDefault(require("../Row"));
 var _enums = require("../../enums");
 require("./LoginPageLayout.scss");
-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 }; }
 const defaultLogo = {
   src: "https://assets.ubuntu.com/v1/82818827-CoF_white.svg",
@@ -30,20 +28,6 @@ const LoginPageLayout = _ref => {
     title,
     logo = defaultLogo
   } = _ref;
-  (0, _react.useLayoutEffect)(() => {
-    var _document$querySelect;
-    const bodyInitiallyContainsIsPaper = (_document$querySelect = document.querySelector("body")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.classList.contains("is-paper");
-    if (!bodyInitiallyContainsIsPaper) {
-      var _document$querySelect2;
-      (_document$querySelect2 = document.querySelector("body")) === null || _document$querySelect2 === void 0 || _document$querySelect2.classList.add("is-paper");
-    }
-    return () => {
-      if (!bodyInitiallyContainsIsPaper) {
-        var _document$querySelect3;
-        (_document$querySelect3 = document.querySelector("body")) === null || _document$querySelect3 === void 0 || _document$querySelect3.classList.remove("is-paper");
-      }
-    };
-  }, []);
   return /*#__PURE__*/_react.default.createElement(_Row.default, {
     className: "p-strip page-row"
   }, /*#__PURE__*/_react.default.createElement(_Col.default, {

package/dist/components/Modal/Modal.js

@@ -64,18 +64,19 @@ const Modal = _ref => {
   (0, _react.useEffect)(() => {
     modalRef.current.focus();
   }, [modalRef]);
+  const hasCloseButton = !!close;
   (0, _react.useEffect)(() => {
     var _focusableModalElemen;
     focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
     let focusIndex = 0;
     // when the close button is rendered, focus on the 2nd content element and not the close btn.
-    if (close && focusableModalElements.current.length > 1) {
+    if (hasCloseButton && focusableModalElements.current.length > 1) {
       focusIndex = 1;
     }
     (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 || _focusableModalElemen.focus({
       preventScroll: true
     });
-  }, [close]);
+  }, [hasCloseButton]);
   (0, _react.useEffect)(() => {
     const keyDown = event => {
       const listener = keyListenersMap.get(event.code);
@@ -129,7 +130,7 @@ const Modal = _ref => {
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "p-modal__title",
     id: titleId
-  }, title), !!close && /*#__PURE__*/_react.default.createElement("button", {
+  }, title), hasCloseButton && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "p-modal__close",
     "aria-label": "Close active modal",

package/dist/esm/components/LoginPageLayout/LoginPageLayout.js

@@ -1,5 +1,5 @@
 import _pt from "prop-types";
-import React, { useLayoutEffect } from "react";
+import React from "react";
 import Card from "../Card";
 import Col from "../Col";
 import Navigation from "../Navigation";
@@ -21,20 +21,6 @@ var LoginPageLayout = _ref => {
     title,
     logo = defaultLogo
   } = _ref;
-  useLayoutEffect(() => {
-    var _document$querySelect;
-    var bodyInitiallyContainsIsPaper = (_document$querySelect = document.querySelector("body")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.classList.contains("is-paper");
-    if (!bodyInitiallyContainsIsPaper) {
-      var _document$querySelect2;
-      (_document$querySelect2 = document.querySelector("body")) === null || _document$querySelect2 === void 0 || _document$querySelect2.classList.add("is-paper");
-    }
-    return () => {
-      if (!bodyInitiallyContainsIsPaper) {
-        var _document$querySelect3;
-        (_document$querySelect3 = document.querySelector("body")) === null || _document$querySelect3 === void 0 || _document$querySelect3.classList.remove("is-paper");
-      }
-    };
-  }, []);
   return /*#__PURE__*/React.createElement(Row, {
     className: "p-strip page-row"
   }, /*#__PURE__*/React.createElement(Col, {

package/dist/esm/components/Modal/Modal.js

@@ -58,18 +58,19 @@ export var Modal = _ref => {
   useEffect(() => {
     modalRef.current.focus();
   }, [modalRef]);
+  var hasCloseButton = !!close;
   useEffect(() => {
     var _focusableModalElemen;
     focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
     var focusIndex = 0;
     // when the close button is rendered, focus on the 2nd content element and not the close btn.
-    if (close && focusableModalElements.current.length > 1) {
+    if (hasCloseButton && focusableModalElements.current.length > 1) {
       focusIndex = 1;
     }
     (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 || _focusableModalElemen.focus({
       preventScroll: true
     });
-  }, [close]);
+  }, [hasCloseButton]);
   useEffect(() => {
     var keyDown = event => {
       var listener = keyListenersMap.get(event.code);
@@ -123,7 +124,7 @@ export var Modal = _ref => {
   }, /*#__PURE__*/React.createElement("h2", {
     className: "p-modal__title",
     id: titleId
-  }, title), !!close && /*#__PURE__*/React.createElement("button", {
+  }, title), hasCloseButton && /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "p-modal__close",
     "aria-label": "Close active modal",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.16.1",
+  "version": "3.0.1",
   "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.30.0",
+    "vanilla-framework": "4.33.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },