cozy-bar 35.2.22 → 35.3.0

package/dist/components/BarComponent.js

@@ -25,6 +25,8 @@ var _Bar = _interopRequireDefault(require("./Bar"));
 
 var _BarProvider = require("./BarProvider");
 
+var _PlatformBanners = require("./PlatformBanners");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -136,7 +138,7 @@ var BarComponent = function BarComponent(_ref2) {
     }
   };
   var cozyThemeProps = (componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.CozyTheme) || {};
-  return /*#__PURE__*/_react.default.createElement(ReactPortal, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ReactPortal, {
     wrapperElement: wrapperElement,
     setWrapperElement: setWrapperElement
   }, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, (0, _extends2.default)({}, cozyThemeProps, {
@@ -146,7 +148,7 @@ var BarComponent = function BarComponent(_ref2) {
     barLeft: barLeft,
     barCenter: barCenter,
     barRight: barRight
-  }))));
+  })))), !options.isPublic && /*#__PURE__*/_react.default.createElement(_PlatformBanners.PlatformBanners, null));
 };
 
 exports.BarComponent = BarComponent;

package/dist/components/PlatformBanners/PlatformBannersPortal.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlatformBannersPortal = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _reactDom = require("react-dom");
+
+var _dom = require("../../dom");
+
+var CONTAINER_ID = 'cozy-platform-banners';
+var ACTIVE_CLASS = 'has-platform-banners';
+/**
+ * Renders into a container created as the first child of the application node,
+ * so the application reflows around the banners rather than the bar's chrome.
+ *
+ * @param {object} props - Props
+ * @param {import('react').ReactNode} props.children - What to render
+ * @returns {import('react').ReactPortal|null} The portal, once the container exists
+ */
+
+var PlatformBannersPortal = function PlatformBannersPortal(_ref) {
+  var children = _ref.children;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      container = _useState2[0],
+      setContainer = _useState2[1];
+
+  (0, _react.useLayoutEffect)(function () {
+    var appNode = document.querySelector(_dom.APP_SELECTOR);
+
+    if (!appNode) {
+      // eslint-disable-next-line no-console
+      console.warn("[cozy-bar] no ".concat(_dom.APP_SELECTOR, " node, platform banners are disabled"));
+      return;
+    } // Resolved from the DOM, not a ref: React clears its root container on
+    // mount, so anything captured earlier points at a detached node.
+
+
+    var node = appNode.querySelector("#".concat(CONTAINER_ID));
+
+    if (!node) {
+      node = document.createElement('div');
+      node.id = CONTAINER_ID;
+      appNode.insertBefore(node, appNode.firstChild);
+    } // eslint-disable-next-line react-hooks/set-state-in-effect
+
+
+    setContainer(node);
+    appNode.classList.add(ACTIVE_CLASS);
+    return function () {
+      return appNode.classList.remove(ACTIVE_CLASS);
+    };
+  }, []);
+  if (!container) return null;
+  return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
+};
+
+exports.PlatformBannersPortal = PlatformBannersPortal;

package/dist/components/PlatformBanners/index.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlatformBanners = void 0;
+
+var _useI18n2 = _interopRequireDefault(require("../useI18n"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _twakeIcons = require("@linagora/twake-icons");
+
+var _Alert = _interopRequireDefault(require("cozy-ui/transpiled/react/Alert"));
+
+var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
+
+var _CozyDialogs = require("cozy-ui/transpiled/react/CozyDialogs");
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
+var _PlatformBannersPortal = require("./PlatformBannersPortal");
+
+var _useBanners2 = require("./useBanners");
+
+/** Rendered directly: `Icon` paints one theme colour over the whole glyph. */
+var RESTRICTED = /*#__PURE__*/_react.default.createElement(_twakeIcons.RestrictedWorkspace, {
+  width: 100,
+  height: 100,
+  className: "u-mb-1",
+  "aria-hidden": "true"
+});
+/**
+ * A banner in the application's own layout, above its content. Polite whatever
+ * the severity: the condition outlives the page, so an assertive region would
+ * re-interrupt on every navigation.
+ */
+
+
+var PlatformBanner = function PlatformBanner(_ref) {
+  var banner = _ref.banner,
+      onDismiss = _ref.onDismiss;
+
+  var _useI18n = (0, _useI18n2.default)(),
+      t = _useI18n.t;
+
+  var action = banner.cta || banner.dismissible ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, banner.cta && /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+    variant: "text",
+    size: "small",
+    label: banner.cta.label,
+    component: "a",
+    href: banner.cta.url
+  }), banner.dismissible && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    size: "small",
+    "aria-label": t('platformBanners.dismiss'),
+    onClick: function onClick() {
+      return onDismiss(banner);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+    icon: _twakeIcons.Cross
+  }))) : null;
+  return /*#__PURE__*/_react.default.createElement(_Alert.default, {
+    role: "status",
+    severity: banner.severity,
+    "data-banner-id": banner.bannerId,
+    action: action // The host application may cancel the context menu across its content.
+    ,
+    onContextMenu: function onContextMenu(event) {
+      return event.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    lang: banner.lang,
+    className: "coz-platform-banner-text"
+  }, banner.text));
+};
+/**
+ * A banner that interrupts rather than informs.
+ *
+ * Always escapable: a dialog with no call to action and no dismiss control
+ * would cover the application for good. Wider than the Figma's 480 except on
+ * mobile, where that size goes full screen and clips the actions. Named from
+ * its text when there is no heading, since cozy-ui's `aria-labelledby` then
+ * points at an empty block.
+ */
+
+
+var BlockingDialog = function BlockingDialog(_ref2) {
+  var banner = _ref2.banner,
+      onDismiss = _ref2.onDismiss;
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var illustration = banner.category === 'billing' ? RESTRICTED : undefined;
+  var dismissible = banner.dismissible || !banner.cta;
+  var Dialog = illustration ? _CozyDialogs.IllustrationDialog : _CozyDialogs.ConfirmDialog; // A stray backdrop click is not the user asking, and a dismissal is recorded
+  // server side for every device.
+
+  var onClose = function onClose(event, reason) {
+    if (reason !== 'backdropClick') onDismiss(banner);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(Dialog, {
+    open: true,
+    "data-banner-id": banner.bannerId,
+    size: isMobile ? 'small' : 'medium',
+    actionsLayout: isMobile ? 'column' : undefined,
+    disableEscapeKeyDown: !dismissible,
+    onClose: dismissible ? onClose : undefined,
+    PaperProps: banner.title ? undefined : {
+      'aria-label': banner.text
+    },
+    title: banner.title || illustration ? /*#__PURE__*/_react.default.createElement("div", {
+      className: illustration ? 'u-flex u-flex-column u-flex-items-center u-ta-center' : undefined
+    }, illustration, /*#__PURE__*/_react.default.createElement("span", {
+      lang: banner.lang
+    }, banner.title)) : null,
+    content: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      lang: banner.lang,
+      className: "coz-platform-banner-text"
+    }, banner.text),
+    actions: banner.cta && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, banner.secondaryCta && /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+      variant: "secondary",
+      label: banner.secondaryCta.label,
+      component: "a",
+      href: banner.secondaryCta.url
+    }), /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+      label: banner.cta.label,
+      component: "a",
+      href: banner.cta.url
+    }))
+  });
+};
+/**
+ * Platform banners, rendered by the bar into the application. Only the inline
+ * ones reach the portal; MUI puts the dialog on the body.
+ *
+ * @returns {import('react').ReactNode} The banners and the blocking dialog
+ */
+
+
+var PlatformBanners = function PlatformBanners() {
+  var _useBanners = (0, _useBanners2.useBanners)(),
+      banners = _useBanners.banners,
+      dismiss = _useBanners.dismiss;
+
+  var inline = banners.filter(function (banner) {
+    return banner.surface !== 'modal';
+  });
+  var blocking = banners.find(function (banner) {
+    return banner.surface === 'modal';
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inline.length > 0 && /*#__PURE__*/_react.default.createElement(_PlatformBannersPortal.PlatformBannersPortal, null, inline.map(function (banner) {
+    return /*#__PURE__*/_react.default.createElement(PlatformBanner, {
+      key: banner.bannerId,
+      banner: banner,
+      onDismiss: dismiss
+    });
+  })), blocking && /*#__PURE__*/_react.default.createElement(BlockingDialog, {
+    banner: blocking,
+    onDismiss: dismiss
+  }));
+};
+
+exports.PlatformBanners = PlatformBanners;

package/dist/components/PlatformBanners/useBanners.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBanners = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _cozyClient = require("cozy-client");
+
+var _banner = require("cozy-client/dist/models/banner");
+
+var POLL_INTERVAL_MS = 5 * 60 * 1000;
+/**
+ * The banners to display, kept up to date. cozy-client owns the reading rules;
+ * this only owns when to read and how to record a dismissal.
+ *
+ * @returns {{banners: object[], dismiss: Function}} The banners and a dismisser
+ */
+
+var useBanners = function useBanners() {
+  var client = (0, _cozyClient.useClient)();
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      banners = _useState2[0],
+      setBanners = _useState2[1];
+
+  var generation = (0, _react.useRef)(0);
+  var read = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var startedAt, next;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (client) {
+              _context.next = 2;
+              break;
+            }
+
+            return _context.abrupt("return");
+
+          case 2:
+            startedAt = generation.current;
+            _context.prev = 3;
+            _context.next = 6;
+            return (0, _banner.getActiveBanners)(client);
+
+          case 6:
+            next = _context.sent;
+            if (generation.current === startedAt) setBanners(next);
+            _context.next = 13;
+            break;
+
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](3);
+            // eslint-disable-next-line no-console
+            console.warn('[cozy-bar] could not read the platform banners', _context.t0);
+
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[3, 10]]);
+  })), [client]);
+  (0, _react.useEffect)(function () {
+    var readIfVisible = function readIfVisible() {
+      if (document.visibilityState !== 'visible') return;
+      read();
+    }; // eslint-disable-next-line react-hooks/set-state-in-effect
+
+
+    read();
+    var id = setInterval(readIfVisible, POLL_INTERVAL_MS);
+    document.addEventListener('visibilitychange', readIfVisible);
+    return function () {
+      clearInterval(id);
+      document.removeEventListener('visibilitychange', readIfVisible);
+    };
+  }, [read]);
+  var dismiss = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(banner) {
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              // Hidden before the round trip; the bump stops an in-flight read
+              // restoring it.
+              generation.current += 1;
+              setBanners(function (current) {
+                return current.filter(function (b) {
+                  return b.bannerId !== banner.bannerId;
+                });
+              });
+              _context2.prev = 2;
+              _context2.next = 5;
+              return (0, _banner.dismiss)(client, banner);
+
+            case 5:
+              _context2.next = 11;
+              break;
+
+            case 7:
+              _context2.prev = 7;
+              _context2.t0 = _context2["catch"](2);
+              // eslint-disable-next-line no-console
+              console.warn('[cozy-bar] could not record the dismissal', _context2.t0);
+              read();
+
+            case 11:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[2, 7]]);
+    }));
+
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [client, read]);
+  return {
+    banners: banners,
+    dismiss: dismiss
+  };
+};
+
+exports.useBanners = useBanners;

package/dist/locales/en.json

@@ -57,5 +57,8 @@
     "storageAvailable": "%{smart_count} GB available",
     "emailDomainNotActive": "Email not active",
     "logOut": "Log out"
+  },
+  "platformBanners": {
+    "dismiss": "Dismiss"
   }
 }

package/dist/locales/fr.json

@@ -57,5 +57,8 @@
     "storageAvailable": "%{smart_count} Go disponible",
     "emailDomainNotActive": "E-mail inactif",
     "logOut": "Se déconnecter"
+  },
+  "platformBanners": {
+    "dismiss": "Masquer"
   }
 }

package/dist/locales/ru.json

@@ -57,5 +57,8 @@
     "storageAvailable": "Доступно %{smart_count} ГБ",
     "emailDomainNotActive": "Электронная почта неактивна",
     "logOut": "Выйти"
+  },
+  "platformBanners": {
+    "dismiss": "Скрыть"
   }
 }

package/dist/locales/vi.json

@@ -57,6 +57,9 @@
     "storageAvailable": "Còn trống %{smart_count} GB",
     "emailDomainNotActive": "Địa chỉ email chưa được kích hoạt",
     "logOut": "Đăng xuất"
+  },
+  "platformBanners": {
+    "dismiss": "Ẩn"
   }
 }
 

package/dist/styles/banner.css

@@ -62,3 +62,44 @@
   flex-shrink: 0;
   max-width: 10rem;
 }
+
+/* Platform banners (io.cozy.banners), injected into the application's layout. */
+
+/* No height: the node is already sized by its parent, and 100% ignores the bar
+   above it, pushing the application below the fold. */
+[role=application].has-platform-banners {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Class specificity, so an application can still override it. The container is
+   exempted by the id rule below. */
+[role=application].has-platform-banners > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Inset and stacked per the design. Fixed basis, or a tall application
+   squashes the stack into a sliver. */
+#cozy-platform-banners {
+  flex: 0 0 auto;
+  min-height: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 1rem 0;
+}
+
+#cozy-platform-banners:empty {
+  display: none;
+}
+
+/* Or a long message squeezes the slot until the call to action wraps. */
+#cozy-platform-banners .MuiAlert-action {
+  flex-shrink: 0;
+}
+
+/* A newline the stack wrote is a line break the reader is meant to see. */
+.coz-platform-banner-text {
+  white-space: pre-line;
+}

package/dist/stylesheet.css

@@ -284,6 +284,47 @@
   max-width: 10rem;
 }
 
+/* Platform banners (io.cozy.banners), injected into the application's layout. */
+
+/* No height: the node is already sized by its parent, and 100% ignores the bar
+   above it, pushing the application below the fold. */
+[role=application].has-platform-banners {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Class specificity, so an application can still override it. The container is
+   exempted by the id rule below. */
+[role=application].has-platform-banners > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+/* Inset and stacked per the design. Fixed basis, or a tall application
+   squashes the stack into a sliver. */
+#cozy-platform-banners {
+  flex: 0 0 auto;
+  min-height: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 1rem 0;
+}
+
+#cozy-platform-banners:empty {
+  display: none;
+}
+
+/* Or a long message squeezes the slot until the call to action wraps. */
+#cozy-platform-banners .MuiAlert-action {
+  flex-shrink: 0;
+}
+
+/* A newline the stack wrote is a line break the reader is meant to see. */
+.coz-platform-banner-text {
+  white-space: pre-line;
+}
+
 [role=banner] .coz-nav {
   display: flex;
   margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-bar",
-  "version": "35.2.22",
+  "version": "35.3.0",
   "description": "cozy-bar.js library, a small lib provided by cozy-stack to inject the Cozy-bar component into each app",
   "main": "dist/index.js",
   "author": "Cozy Cloud <contact@cozycloud.cc> (https://cozy.io/)",
@@ -31,11 +31,11 @@
     "@babel/cli": "7.16.8",
     "@babel/core": "7.16.12",
     "@cozy/minilog": "^1.0.0",
-    "@linagora/twake-icons": "^2.6.6",
+    "@linagora/twake-icons": "^2.10.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "babel-preset-cozy-app": "^2.8.4",
-    "cozy-client": "^60.21.0",
+    "cozy-client": "^60.32.0",
     "cozy-dataproxy-lib": "^4.15.6",
     "cozy-device-helper": "2.6.0",
     "cozy-flags": "^4.6.1",
@@ -60,8 +60,8 @@
   },
   "peerDependencies": {
     "@cozy/minilog": ">=1.0.0",
-    "@linagora/twake-icons": ">=2.6.6",
-    "cozy-client": ">=60.21.0",
+    "@linagora/twake-icons": ">=2.10.0",
+    "cozy-client": ">=60.32.0",
     "cozy-dataproxy-lib": ">=4.1.0",
     "cozy-device-helper": ">=2.6.0",
     "cozy-flags": ">=4.6.1",
@@ -75,5 +75,5 @@
     "react-router-dom": ">=6.14.2",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "319c4890af0fbee641e25a2cb7c1bd2501b57024"
+  "gitHead": "fd478feb7f75253be1cbc3bf79f15cfe7c132ab3"
 }