cozy-ui 105.0.2 → 105.2.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [105.2.0](https://github.com/cozy/cozy-ui/compare/v105.1.0...v105.2.0) (2024-03-21)
+
+
+### Features
+
+* **Viewer:** Refactor PrintButton and use `ActionsItems` ([8b7a068](https://github.com/cozy/cozy-ui/commit/8b7a068))
+
+# [105.1.0](https://github.com/cozy/cozy-ui/compare/v105.0.2...v105.1.0) (2024-03-21)
+
+
+### Bug Fixes
+
+* **NestedSelect:** Remove title attribute on modal ([de57aff](https://github.com/cozy/cozy-ui/commit/de57aff))
+
+
+### Features
+
+* **NestedSelect:** Add ellipsis on modal title ([341db5a](https://github.com/cozy/cozy-ui/commit/341db5a))
+
 ## [105.0.2](https://github.com/cozy/cozy-ui/compare/v105.0.1...v105.0.2) (2024-03-20)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "105.0.2",
+  "version": "105.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionsMenu/Actions/helpers.js

@@ -5,18 +5,18 @@ import { fetchBlobFileById } from 'cozy-client/dist/models/file'
 const MAX_RESIZE_IMAGE_SIZE = 3840
 
 /**
- * Make array of actions for ActionsItems component
+ * Make array of actions and hydrate actions with options
  *
- * @param {Function[]} actions - Array of actions to create ActionsMenuItem components with associated actions and conditions
+ * @param {Function[]} actions - Array of actions with associated actions and conditions
  * @param {object} actionOptions - Options that need to be passed on actions
  * @returns {object[]} Array of actions
  */
 export const makeActions = (actions = [], options = {}) => {
-  return actions.filter(Boolean).map(action => {
-    const actionMenu = action(options)
-    const name = actionMenu.name || action.name
+  return actions.filter(Boolean).map(actionFn => {
+    const action = actionFn(options)
+    const name = action.name || actionFn.name
 
-    return { [name]: actionMenu }
+    return { [name]: action }
   })
 }
 
@@ -58,7 +58,7 @@ export const getOnlyNeededActions = (actions, docs) => {
         return actionObject
       })
       .filter(Boolean)
-      // We don't want to have an hr as the latest actions available
+      // We don't want to have an hr/divider as the latest actions available
       .filter((cleanedAction, idx, cleanedActions) => {
         return !(
           (getActionName(cleanedAction) === 'hr' ||

package/react/ActionsMenu/ActionsItems.jsx

@@ -74,4 +74,12 @@ ActionsItems.propTypes = {
   onClick: PropTypes.func
 }
 
+export const actionsItemsComponentPropTypes = {
+  docs: PropTypes.array,
+  action: PropTypes.object,
+  autoFocus: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func
+}
+
 export default ActionsItems

package/react/ActionsMenu/Readme.md

@@ -4,23 +4,7 @@ You can pass a reference to a custom DOM element through the `ref` prop to attac
 
 A header `ActionsMenuMobileHeader` can be used to provide context on the menu actions. Since on desktop, we display a popper and not a `BottomSheet`, context for the user is not lost, so the header would be redundant. This is why it is not rendered unless we are on mobile.
 
-### With an automatic creation of actions
-
-Use `makeActions` method and create (or use the predefined actions) to build the actions to pass to `ActionsMenu` high level component. The method `makeActions` takes `actions` array as first argument, and `options` as second argument. `options` are then passed to the `actions` component as `props`.
-
-```bash
-const action1 = ({ option1, option2 }) => ({
-  name: action1,
-  action: (doc, { option3, option4 }) => {}
-  Component: ({ onClick, ...props }) => <SomeComponent {...props} onClick={() => onClick({ option3 })}} />
-})
-
-const actions = makeActions([action1, action2], { option1, option2 })
-
-<ActionsMenu actions={actions} componentsProps={{ actionsItems: { actionOptions: { option4 }} }}
-```
-
-#### How to create actions
+### How to create and use actions
 
 An action is a simple function that returns an object with specific keys:
 
@@ -33,7 +17,7 @@ An action is a simple function that returns an object with specific keys:
 * **Component** : `<func>` – The returned component that manages the display
 
 ```bash
-const expl = makeActionOptions => ({
+const actionExpl = options => ({
   name: 'expl',
   action: () => {},
   disabled: false,
@@ -43,6 +27,32 @@ const expl = makeActionOptions => ({
 })
 ```
 
+The method `makeActions` takes `actions` array as first argument, and `options` as second argument. `options` are then passed to the `actions` component as `props`.
+
+```bash
+const action1 = ({ option1, option2, option5 }) => ({
+  name: action1,
+  action: (doc, { option3, option4 }) => {}
+  Component: ({ onClick, ...props }) => <SomeComponent {...props} onClick={() => onClick({ option3 })}} />
+})
+
+const actions = makeActions([action1, action2], { option1, option2 })
+```
+
+Then you can use `ActionsItems` to render the actions, and pass options (as simple props) and component (in `component` prop) to be used for rendering.
+
+```bash
+<ActionsItems actions={actions} docs={[file]} component={ActionComponent} option5="" />
+```
+
+### ActionsMenu with an automatic creation of actions
+
+Use `makeActions` method and create (or use the predefined actions) to build the actions to pass to `ActionsMenu`. You can pass options to actions with `componentsProps.actionsItems.actionOptions` prop.
+
+```bash
+<ActionsMenu actions={actions} componentsProps={{ actionsItems: { actionOptions: { option4 }} }} />
+```
+
 ```jsx
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
@@ -125,7 +135,9 @@ const actions = makeActions([ modify, viewInContacts, divider, call, smsTo, emai
 </DemoProvider>
 ```
 
-### With a manual creation of the actions
+### ActionsMenu with a manual creation of the actions
+
+We don't use `makeActions` here, all actions are created "by hand". This is not the recommanded choice.
 
 ```jsx
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'

package/react/NestedSelect/Modal.jsx

@@ -13,7 +13,8 @@ import List from '../List'
 
 const NestedSelectDialogHeader = ({ onClickBack, showBack, title }) => {
   const { dialogTitleProps } = useCozyDialog({
-    open: true
+    open: true,
+    onClose: true
   })
 
   if (!title) return null
@@ -28,7 +29,7 @@ const NestedSelectDialogHeader = ({ onClickBack, showBack, title }) => {
             </IconButton>
           </Img>
         )}
-        <Bd>{title}</Bd>
+        <Bd className="u-ellipsis">{title}</Bd>
       </Media>
     </DialogTitle>
   )
@@ -44,8 +45,9 @@ const NestedSelectDialogContent = ({ children }) => {
 
 const NestedSelectModal = props => {
   const { dialogProps } = useCozyDialog({ open: true })
+
   return (
-    <Dialog {...dialogProps} title={props.title} onClose={props.onClose}>
+    <Dialog {...dialogProps} onClose={props.onClose}>
       <DialogCloseButton
         onClick={props.onClose}
         data-testid={`modal-close-button-nested-select`}

package/react/Viewer/Readme.md

@@ -68,6 +68,7 @@ const files = [
   {
     _id: 'audio',
     class: 'audio',
+    type: 'file',
     name: 'Sample.mp3',
     mime: 'audio/mp3',
     dir_id: 'parent_folder'
@@ -75,6 +76,7 @@ const files = [
   {
     _id: 'slide',
     class: 'slide',
+    type: 'file',
     name: 'Slide.pptx',
     mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
     dir_id: 'parent_folder'
@@ -82,6 +84,7 @@ const files = [
   {
     _id: 'pdf',
     class: 'pdf',
+    type: 'file',
     name: 'My vehicle registration.pdf',
     mime: 'application/pdf',
     metadata: {
@@ -107,6 +110,7 @@ const files = [
   {
     _id: 'text',
     class: 'text',
+    type: 'file',
     name: 'LoremipsumdolorsitametconsecteturadipiscingelitSednonrisusSuspendisselectustortordignissimsitametadipiscingnecultriciesseddolorCraselementumultricesdiamMaecenasligulamassavariusasempercongueeuismodnonmiProinporttitororcinecnonummymolestieenimesteleifendminonfermentumdiamnislsitameteratDuissemperDuisarcumassascelerisquevitaeconsequatinpretiumaenimPellentesquecongueUtinrisusvolutpatliberopharetratemporCrasvestibulumbibendumauguePraesentegestasleoinpedePraesentblanditodioeuenimPellentesquesedduiutaugueblanditsodalesVestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCuraeAliquamnibhMaurisacmaurissedpedepellentesquefermentumMaecenasadipiscingantenondiamsodaleshendrerit.txt',
     mime: 'text/plain',
     metadata: {
@@ -120,6 +124,7 @@ const files = [
     {
     _id: 'text',
     class: 'text',
+    type: 'file',
     name: 'encrypted-example.txt',
     mime: 'text/plain',
     encrypted: true
@@ -128,6 +133,7 @@ const files = [
   {
     _id: 'image',
     class: 'image',
+    type: 'file',
     name: 'Demo.jpg',
     mime: 'image/jpg',
     metadata: {
@@ -143,12 +149,14 @@ const files = [
   {
     _id: 'none',
     class: 'unknown',
+    type: 'file',
     name: 'Unsupported file type',
     mime: '???/???'
   },
   {
     _id: 'none',
     class: 'unknown',
+    type: 'file',
     name: 'Unsupported file type',
     mime: '???/???',
     metadata: {

package/react/Viewer/components/PrintButton.jsx

@@ -1,30 +1,57 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
-import { useClient } from 'cozy-client'
 import { useWebviewIntent } from 'cozy-intent'
 
 import Button from '../../Buttons'
 import IconButton from '../../IconButton'
 import Icon from '../../Icon'
+import ActionsItems, {
+  actionsItemsComponentPropTypes
+} from '../../ActionsMenu/ActionsItems'
 import { print } from '../../ActionsMenu/Actions/print'
+import { makeActions } from '../../ActionsMenu/Actions/helpers'
+
+const ActionComponent = forwardRef(({ action, variant, onClick }, ref) => {
+  const { label, icon } = action
+
+  if (variant === 'button') {
+    return (
+      <Button
+        ref={ref}
+        variant="secondary"
+        aria-label={label}
+        label={<Icon icon={icon} />}
+        onClick={onClick}
+      />
+    )
+  }
+
+  return (
+    <IconButton
+      ref={ref}
+      className="u-white"
+      aria-label={label}
+      onClick={onClick}
+    >
+      <Icon icon={icon} />
+    </IconButton>
+  )
+})
+
+ActionComponent.displayName = 'ActionComponent'
+
+ActionComponent.propTypes = {
+  ...actionsItemsComponentPropTypes,
+  variant: PropTypes.oneOf(['default', 'button'])
+}
 
 const PrintButton = ({ file, variant }) => {
   const [isPrintAvailable, setIsPrintAvailable] = useState(false)
-  const client = useClient()
   const webviewIntent = useWebviewIntent()
-  const {
-    icon: printIcon,
-    label: printLabel,
-    action: printAction,
-    displayCondition: printDisplayCondition
-  } = print()
 
   const isPDFDoc = file.mime === 'application/pdf'
-  const showPrintButton = printDisplayCondition && isPDFDoc && isPrintAvailable
-
-  const handleClick = async () =>
-    await printAction([file], { client, webviewIntent })
+  const showPrintButton = isPDFDoc && isPrintAvailable
 
   useEffect(() => {
     const init = async () => {
@@ -39,25 +66,15 @@ const PrintButton = ({ file, variant }) => {
 
   if (!showPrintButton) return null
 
-  if (variant === 'button') {
-    return (
-      <Button
-        variant="secondary"
-        aria-label={printLabel}
-        label={<Icon icon={printIcon} />}
-        onClick={handleClick}
-      />
-    )
-  }
+  const actions = makeActions([print])
 
   return (
-    <IconButton
-      className="u-white"
-      aria-label={printLabel}
-      onClick={handleClick}
-    >
-      <Icon icon={printIcon} />
-    </IconButton>
+    <ActionsItems
+      docs={[file]}
+      actions={actions}
+      component={ActionComponent}
+      variant={variant}
+    />
   )
 }
 

package/transpiled/react/ActionsMenu/Actions/helpers.js

@@ -13,9 +13,9 @@ import { fetchBlobFileById } from 'cozy-client/dist/models/file'; // Should guar
 
 var MAX_RESIZE_IMAGE_SIZE = 3840;
 /**
- * Make array of actions for ActionsItems component
+ * Make array of actions and hydrate actions with options
  *
- * @param {Function[]} actions - Array of actions to create ActionsMenuItem components with associated actions and conditions
+ * @param {Function[]} actions - Array of actions with associated actions and conditions
  * @param {object} actionOptions - Options that need to be passed on actions
  * @returns {object[]} Array of actions
  */
@@ -23,10 +23,10 @@ var MAX_RESIZE_IMAGE_SIZE = 3840;
 export var makeActions = function makeActions() {
   var actions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return actions.filter(Boolean).map(function (action) {
-    var actionMenu = action(options);
-    var name = actionMenu.name || action.name;
-    return _defineProperty({}, name, actionMenu);
+  return actions.filter(Boolean).map(function (actionFn) {
+    var action = actionFn(options);
+    var name = action.name || actionFn.name;
+    return _defineProperty({}, name, action);
   });
 };
 export var getActionName = function getActionName(actionObject) {
@@ -57,7 +57,7 @@ export var getOnlyNeededActions = function getOnlyNeededActions(actions, docs) {
     }
 
     return actionObject;
-  }).filter(Boolean) // We don't want to have an hr as the latest actions available
+  }).filter(Boolean) // We don't want to have an hr/divider as the latest actions available
   .filter(function (cleanedAction, idx, cleanedActions) {
     return !((getActionName(cleanedAction) === 'hr' || getActionName(cleanedAction) === 'divider') && idx === cleanedActions.length - 1);
   });

package/transpiled/react/ActionsMenu/ActionsItems.js

@@ -71,4 +71,11 @@ ActionsItems.propTypes = {
   /** The overrideClick function from ActionsMenuWrapper */
   onClick: PropTypes.func
 };
+export var actionsItemsComponentPropTypes = {
+  docs: PropTypes.array,
+  action: PropTypes.object,
+  autoFocus: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func
+};
 export default ActionsItems;

package/transpiled/react/NestedSelect/Modal.js

@@ -18,7 +18,8 @@ var NestedSelectDialogHeader = function NestedSelectDialogHeader(_ref) {
       title = _ref.title;
 
   var _useCozyDialog = useCozyDialog({
-    open: true
+    open: true,
+    onClose: true
   }),
       dialogTitleProps = _useCozyDialog.dialogTitleProps;
 
@@ -30,7 +31,9 @@ var NestedSelectDialogHeader = function NestedSelectDialogHeader(_ref) {
     onClick: onClickBack
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: LeftIcon
-  }))), /*#__PURE__*/React.createElement(Bd, null, title)));
+  }))), /*#__PURE__*/React.createElement(Bd, {
+    className: "u-ellipsis"
+  }, title)));
 };
 
 var NestedSelectDialogContent = function NestedSelectDialogContent(_ref2) {
@@ -47,7 +50,6 @@ var NestedSelectModal = function NestedSelectModal(props) {
       dialogProps = _useCozyDialog2.dialogProps;
 
   return /*#__PURE__*/React.createElement(Dialog, _extends({}, dialogProps, {
-    title: props.title,
     onClose: props.onClose
   }), /*#__PURE__*/React.createElement(DialogCloseButton, {
     onClick: props.onClose,

package/transpiled/react/Viewer/components/PrintButton.js

@@ -1,111 +1,113 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect } from 'react';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { useState, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { useClient } from 'cozy-client';
 import { useWebviewIntent } from 'cozy-intent';
 import Button from "cozy-ui/transpiled/react/Buttons";
 import IconButton from "cozy-ui/transpiled/react/IconButton";
 import Icon from "cozy-ui/transpiled/react/Icon";
+import ActionsItems, { actionsItemsComponentPropTypes } from "cozy-ui/transpiled/react/ActionsMenu/ActionsItems";
 import { print } from "cozy-ui/transpiled/react/ActionsMenu/Actions/print";
+import { makeActions } from "cozy-ui/transpiled/react/ActionsMenu/Actions/helpers";
+var ActionComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var action = _ref.action,
+      variant = _ref.variant,
+      onClick = _ref.onClick;
+  var label = action.label,
+      icon = action.icon;
+
+  if (variant === 'button') {
+    return /*#__PURE__*/React.createElement(Button, {
+      ref: ref,
+      variant: "secondary",
+      "aria-label": label,
+      label: /*#__PURE__*/React.createElement(Icon, {
+        icon: icon
+      }),
+      onClick: onClick
+    });
+  }
 
-var PrintButton = function PrintButton(_ref) {
-  var file = _ref.file,
-      variant = _ref.variant;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    ref: ref,
+    className: "u-white",
+    "aria-label": label,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }));
+});
+ActionComponent.displayName = 'ActionComponent';
+ActionComponent.propTypes = _objectSpread(_objectSpread({}, actionsItemsComponentPropTypes), {}, {
+  variant: PropTypes.oneOf(['default', 'button'])
+});
+
+var PrintButton = function PrintButton(_ref2) {
+  var file = _ref2.file,
+      variant = _ref2.variant;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isPrintAvailable = _useState2[0],
       setIsPrintAvailable = _useState2[1];
 
-  var client = useClient();
   var webviewIntent = useWebviewIntent();
-
-  var _print = print(),
-      printIcon = _print.icon,
-      printLabel = _print.label,
-      printAction = _print.action,
-      printDisplayCondition = _print.displayCondition;
-
   var isPDFDoc = file.mime === 'application/pdf';
-  var showPrintButton = printDisplayCondition && isPDFDoc && isPrintAvailable;
-
-  var handleClick = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return printAction([file], {
-                client: client,
-                webviewIntent: webviewIntent
-              });
-
-            case 2:
-              return _context.abrupt("return", _context.sent);
-
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function handleClick() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
+  var showPrintButton = isPDFDoc && isPrintAvailable;
   useEffect(function () {
     var init = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var _yield$webviewIntent$;
 
         var isAvailable;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context.prev = _context.next) {
               case 0:
-                _context2.next = 2;
+                _context.next = 2;
                 return webviewIntent === null || webviewIntent === void 0 ? void 0 : webviewIntent.call('isAvailable', 'print');
 
               case 2:
-                _context2.t1 = _yield$webviewIntent$ = _context2.sent;
-                _context2.t0 = _context2.t1 !== null;
+                _context.t1 = _yield$webviewIntent$ = _context.sent;
+                _context.t0 = _context.t1 !== null;
 
-                if (!_context2.t0) {
-                  _context2.next = 6;
+                if (!_context.t0) {
+                  _context.next = 6;
                   break;
                 }
 
-                _context2.t0 = _yield$webviewIntent$ !== void 0;
+                _context.t0 = _yield$webviewIntent$ !== void 0;
 
               case 6:
-                if (!_context2.t0) {
-                  _context2.next = 10;
+                if (!_context.t0) {
+                  _context.next = 10;
                   break;
                 }
 
-                _context2.t2 = _yield$webviewIntent$;
-                _context2.next = 11;
+                _context.t2 = _yield$webviewIntent$;
+                _context.next = 11;
                 break;
 
               case 10:
-                _context2.t2 = true;
+                _context.t2 = true;
 
               case 11:
-                isAvailable = _context2.t2;
+                isAvailable = _context.t2;
                 setIsPrintAvailable(isAvailable);
 
               case 13:
               case "end":
-                return _context2.stop();
+                return _context.stop();
             }
           }
-        }, _callee2);
+        }, _callee);
       }));
 
       return function init() {
@@ -116,25 +118,13 @@ var PrintButton = function PrintButton(_ref) {
     init();
   }, [webviewIntent]);
   if (!showPrintButton) return null;
-
-  if (variant === 'button') {
-    return /*#__PURE__*/React.createElement(Button, {
-      variant: "secondary",
-      "aria-label": printLabel,
-      label: /*#__PURE__*/React.createElement(Icon, {
-        icon: printIcon
-      }),
-      onClick: handleClick
-    });
-  }
-
-  return /*#__PURE__*/React.createElement(IconButton, {
-    className: "u-white",
-    "aria-label": printLabel,
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: printIcon
-  }));
+  var actions = makeActions([print]);
+  return /*#__PURE__*/React.createElement(ActionsItems, {
+    docs: [file],
+    actions: actions,
+    component: ActionComponent,
+    variant: variant
+  });
 };
 
 PrintButton.propTypes = {