cozy-sharing 4.6.1 → 4.7.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.7.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@4.6.1...cozy-sharing@4.7.0) (2022-11-15)
+
+
+### Bug Fixes
+
+* **SharingProvider:** Wait until all request finish to rise allLoaded ([05b14c4](https://github.com/cozy/cozy-libs/commit/05b14c4af3b572c919f944a3b2b5ef5ec7b51257))
+
+
+### Features
+
+* Add ShareButtonWithRecipients ([b1f99b3](https://github.com/cozy/cozy-libs/commit/b1f99b3f3ea6ed00b3c11e87042434239c83d94d))
+
+
+
+
+
 ## [4.6.1](https://github.com/cozy/cozy-libs/compare/cozy-sharing@4.6.0...cozy-sharing@4.6.1) (2022-11-14)
 
 **Note:** Version bump only for package cozy-sharing

package/dist/ShareButtonWithRecipients.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["docId", "onClick"];
+import React from 'react';
+import { ShareButton } from './ShareButton';
+import { SharedRecipients } from './SharedRecipients';
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
+import SharingContext from './context';
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid';
+import Skeleton from 'cozy-ui/transpiled/react/Skeleton';
+export var ShareButtonWithRecipients = function ShareButtonWithRecipients(_ref) {
+  var docId = _ref.docId,
+      onClick = _ref.onClick,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
+  return /*#__PURE__*/React.createElement(SharingContext.Consumer, null, function (_ref2) {
+    var allLoaded = _ref2.allLoaded;
+    return allLoaded ? /*#__PURE__*/React.createElement(Grid, {
+      container: true,
+      alignItems: "center",
+      className: "u-w-auto"
+    }, !isMobile && /*#__PURE__*/React.createElement(Grid, {
+      item: true
+    }, /*#__PURE__*/React.createElement(SharedRecipients, {
+      docId: docId,
+      onClick: onClick,
+      size: 32
+    })), /*#__PURE__*/React.createElement(Grid, {
+      item: true
+    }, /*#__PURE__*/React.createElement(ShareButton, _extends({
+      docId: docId,
+      onClick: onClick
+    }, props)))) : /*#__PURE__*/React.createElement(Skeleton, {
+      width: 120,
+      animation: "wave"
+    });
+  });
+};

package/dist/SharingProvider.js

@@ -636,18 +636,15 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
                   hasLoadedAtLeastOnePage: true
                 }); // eslint-disable-next-line promise/catch-or-return
 
-                fetchNextPermissions(permissions, this.dispatch, this.permissionCol).then(this.setState({
-                  allLoaded: true
-                }));
+                _context12.next = 12;
+                return fetchNextPermissions(permissions, this.dispatch, this.permissionCol);
 
-                if (!(doctype !== 'io.cozy.files')) {
-                  _context12.next = 13;
+              case 12:
+                if (!(doctype === 'io.cozy.files')) {
+                  _context12.next = 22;
                   break;
                 }
 
-                return _context12.abrupt("return");
-
-              case 13:
                 sharedDocIds = getSharedDocIdsBySharings(sharings);
                 _context12.next = 16;
                 return client.collection(doctype).all({
@@ -671,6 +668,11 @@ export var SharingProvider = /*#__PURE__*/function (_Component) {
                 this.dispatch(receivePaths([].concat(_toConsumableArray(folderPaths), _toConsumableArray(filePaths))));
 
               case 22:
+                this.setState({
+                  allLoaded: true
+                });
+
+              case 23:
               case "end":
                 return _context12.stop();
             }

package/dist/index.js

@@ -16,4 +16,5 @@ export { useFetchDocumentPath } from './components/useFetchDocumentPath';
 export { CozyPassFingerprintDialogContent } from './components/CozyPassFingerprintDialogContent';
 export { SharingBannerPlugin } from './SharingBanner';
 export { useSharingInfos } from './SharingBanner/hooks/useSharingInfos';
-export { ConfirmTrustedRecipientsDialog } from './ConfirmTrustedRecipientsDialog';
+export { ConfirmTrustedRecipientsDialog } from './ConfirmTrustedRecipientsDialog';
+export { ShareButtonWithRecipients } from './ShareButtonWithRecipients';

package/dist/stylesheet.css

@@ -800,6 +800,7 @@ html {
   --borderGhostDisabledColor: rgba(255,255,255,0.24);
   --paperBackgroundColor: #297ef2;
   --defaultBackgroundColor: #579eff;
+  --contrastBackgroundColor: rgba(255,255,255,0.12);
   --primaryColorLight: #fff;
   --primaryColor: #fff;
   --primaryColorDark: #eaf3ff;
@@ -829,8 +830,9 @@ html {
     The CSS variables below are historic and we should strive not to
     use them. Prefer to use directly semantic colors above.
     */
-  --iconColor: var(--secondaryTextColor);
+  --iconColor: currentColor;
   --textIconColor: #fff;
+  --actionMenuIconColor: #fff;
   --barIconColor: #fff;
   --barIconColorDisabled: rgba(255,255,255,0.88);
   --spinnerColor: #fff;
@@ -988,12 +990,14 @@ html,
     Stylus: primaryBackgroundLight -  #F7FAFF, CSS: var(--primaryBackgroundLight)
     Stylus: paperBackgroundColor -  #FFF, CSS: var(--paperBackgroundColor)
     Stylus: defaultBackgroundColor -  #F4F5F6, CSS: var(--defaultBackgroundColor)
+    Stylus: contrastBackgroundColor -  #F5F5F6, CSS: var(--contrastBackgroundColor)
 
     Styleguide Settings.theme.background
     */
   --primaryBackgroundLight: #f7faff;
   --paperBackgroundColor: #fff;
   --defaultBackgroundColor: #f4f5f6;
+  --contrastBackgroundColor: rgba(29,33,42,0.048);
 /*
     Text colors
 
@@ -1914,6 +1918,7 @@ input[type=text] {
   --borderGhostDisabledColor: rgba(255,255,255,0.24);
   --paperBackgroundColor: #297ef2;
   --defaultBackgroundColor: #579eff;
+  --contrastBackgroundColor: rgba(255,255,255,0.12);
   --primaryColorLight: #fff;
   --primaryColor: #fff;
   --primaryColorDark: #eaf3ff;
@@ -1943,8 +1948,9 @@ input[type=text] {
     The CSS variables below are historic and we should strive not to
     use them. Prefer to use directly semantic colors above.
     */
-  --iconColor: var(--secondaryTextColor);
+  --iconColor: currentColor;
   --textIconColor: #fff;
+  --actionMenuIconColor: #fff;
   --barIconColor: #fff;
   --barIconColorDisabled: rgba(255,255,255,0.88);
   --spinnerColor: #fff;
@@ -2102,12 +2108,14 @@ html,
     Stylus: primaryBackgroundLight -  #F7FAFF, CSS: var(--primaryBackgroundLight)
     Stylus: paperBackgroundColor -  #FFF, CSS: var(--paperBackgroundColor)
     Stylus: defaultBackgroundColor -  #F4F5F6, CSS: var(--defaultBackgroundColor)
+    Stylus: contrastBackgroundColor -  #F5F5F6, CSS: var(--contrastBackgroundColor)
 
     Styleguide Settings.theme.background
     */
   --primaryBackgroundLight: #f7faff;
   --paperBackgroundColor: #fff;
   --defaultBackgroundColor: #f4f5f6;
+  --contrastBackgroundColor: rgba(29,33,42,0.048);
 /*
     Text colors
 
@@ -2395,6 +2403,7 @@ html,
   --borderGhostDisabledColor: rgba(255,255,255,0.24);
   --paperBackgroundColor: #297ef2;
   --defaultBackgroundColor: #579eff;
+  --contrastBackgroundColor: rgba(255,255,255,0.12);
   --primaryColorLight: #fff;
   --primaryColor: #fff;
   --primaryColorDark: #eaf3ff;
@@ -2424,8 +2433,9 @@ html,
     The CSS variables below are historic and we should strive not to
     use them. Prefer to use directly semantic colors above.
     */
-  --iconColor: var(--secondaryTextColor);
+  --iconColor: currentColor;
   --textIconColor: #fff;
+  --actionMenuIconColor: #fff;
   --barIconColor: #fff;
   --barIconColorDisabled: rgba(255,255,255,0.88);
   --spinnerColor: #fff;
@@ -2583,12 +2593,14 @@ html,
     Stylus: primaryBackgroundLight -  #F7FAFF, CSS: var(--primaryBackgroundLight)
     Stylus: paperBackgroundColor -  #FFF, CSS: var(--paperBackgroundColor)
     Stylus: defaultBackgroundColor -  #F4F5F6, CSS: var(--defaultBackgroundColor)
+    Stylus: contrastBackgroundColor -  #F5F5F6, CSS: var(--contrastBackgroundColor)
 
     Styleguide Settings.theme.background
     */
   --primaryBackgroundLight: #f7faff;
   --paperBackgroundColor: #fff;
   --defaultBackgroundColor: #f4f5f6;
+  --contrastBackgroundColor: rgba(29,33,42,0.048);
 /*
     Text colors
 
@@ -2883,6 +2895,7 @@ html {
   --borderGhostDisabledColor: rgba(255,255,255,0.24);
   --paperBackgroundColor: #297ef2;
   --defaultBackgroundColor: #579eff;
+  --contrastBackgroundColor: rgba(255,255,255,0.12);
   --primaryColorLight: #fff;
   --primaryColor: #fff;
   --primaryColorDark: #eaf3ff;
@@ -2912,8 +2925,9 @@ html {
     The CSS variables below are historic and we should strive not to
     use them. Prefer to use directly semantic colors above.
     */
-  --iconColor: var(--secondaryTextColor);
+  --iconColor: currentColor;
   --textIconColor: #fff;
+  --actionMenuIconColor: #fff;
   --barIconColor: #fff;
   --barIconColorDisabled: rgba(255,255,255,0.88);
   --spinnerColor: #fff;
@@ -3071,12 +3085,14 @@ html,
     Stylus: primaryBackgroundLight -  #F7FAFF, CSS: var(--primaryBackgroundLight)
     Stylus: paperBackgroundColor -  #FFF, CSS: var(--paperBackgroundColor)
     Stylus: defaultBackgroundColor -  #F4F5F6, CSS: var(--defaultBackgroundColor)
+    Stylus: contrastBackgroundColor -  #F5F5F6, CSS: var(--contrastBackgroundColor)
 
     Styleguide Settings.theme.background
     */
   --primaryBackgroundLight: #f7faff;
   --paperBackgroundColor: #fff;
   --defaultBackgroundColor: #f4f5f6;
+  --contrastBackgroundColor: rgba(29,33,42,0.048);
 /*
     Text colors
 
@@ -3300,6 +3316,7 @@ html,
   --borderGhostDisabledColor: rgba(255,255,255,0.24);
   --paperBackgroundColor: #297ef2;
   --defaultBackgroundColor: #579eff;
+  --contrastBackgroundColor: rgba(255,255,255,0.12);
   --primaryColorLight: #fff;
   --primaryColor: #fff;
   --primaryColorDark: #eaf3ff;
@@ -3329,8 +3346,9 @@ html,
     The CSS variables below are historic and we should strive not to
     use them. Prefer to use directly semantic colors above.
     */
-  --iconColor: var(--secondaryTextColor);
+  --iconColor: currentColor;
   --textIconColor: #fff;
+  --actionMenuIconColor: #fff;
   --barIconColor: #fff;
   --barIconColorDisabled: rgba(255,255,255,0.88);
   --spinnerColor: #fff;
@@ -3488,12 +3506,14 @@ html,
     Stylus: primaryBackgroundLight -  #F7FAFF, CSS: var(--primaryBackgroundLight)
     Stylus: paperBackgroundColor -  #FFF, CSS: var(--paperBackgroundColor)
     Stylus: defaultBackgroundColor -  #F4F5F6, CSS: var(--defaultBackgroundColor)
+    Stylus: contrastBackgroundColor -  #F5F5F6, CSS: var(--contrastBackgroundColor)
 
     Styleguide Settings.theme.background
     */
   --primaryBackgroundLight: #f7faff;
   --paperBackgroundColor: #fff;
   --defaultBackgroundColor: #f4f5f6;
+  --contrastBackgroundColor: rgba(29,33,42,0.048);
 /*
     Text colors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -37,12 +37,11 @@
   },
   "devDependencies": {
     "@babel/core": "7.16.12",
-    "@material-ui/core": "4.12.3",
     "babel-jest": "26.6.3",
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-inline-react-svg": "1.1.2",
     "cozy-client": "34.1.0",
-    "cozy-ui": "62.1.2",
+    "cozy-ui": "77.6.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
@@ -52,10 +51,9 @@
     "react-router": "^5.0.1"
   },
   "peerDependencies": {
-    "@material-ui/core": "4",
     "cozy-client": "^34.1.0",
     "cozy-realtime": "^3.11.0",
-    "cozy-ui": "^45.1.0",
+    "cozy-ui": ">=77.6.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-router": "^5.0.1"
@@ -63,5 +61,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "bf1c3b7b74f13f770cb978fc0879935575790482"
+  "gitHead": "c5a7a80ded9e8c0aae431449453744c51daa3c3f"
 }

package/src/ShareButtonWithRecipients.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { ShareButton } from './ShareButton'
+import { SharedRecipients } from './SharedRecipients'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import SharingContext from './context'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
+
+export const ShareButtonWithRecipients = ({ docId, onClick, ...props }) => {
+  const { isMobile } = useBreakpoints()
+
+  return (
+    <SharingContext.Consumer>
+      {({ allLoaded }) => {
+        return allLoaded ? (
+          <Grid container alignItems="center" className="u-w-auto">
+            {!isMobile && (
+              <Grid item>
+                <SharedRecipients docId={docId} onClick={onClick} size={32} />
+              </Grid>
+            )}
+            <Grid item>
+              <ShareButton docId={docId} onClick={onClick} {...props} />
+            </Grid>
+          </Grid>
+        ) : (
+          <Skeleton width={120} animation="wave" />
+        )
+      }}
+    </SharingContext.Consumer>
+  )
+}

package/src/SharingProvider.jsx

@@ -186,22 +186,24 @@ export class SharingProvider extends Component {
     )
     this.setState({ hasLoadedAtLeastOnePage: true })
     // eslint-disable-next-line promise/catch-or-return
-    fetchNextPermissions(permissions, this.dispatch, this.permissionCol).then(
-      this.setState({ allLoaded: true })
-    )
-    if (doctype !== 'io.cozy.files') return
-    const sharedDocIds = getSharedDocIdsBySharings(sharings)
-    const resp = await client.collection(doctype).all({ keys: sharedDocIds })
-    const folderPaths = resp.data
-      .filter(f => f.type === 'directory' && !f.trashed)
-      .map(f => f.path)
-    const filePaths = await fetchFilesPaths(
-      client,
-      doctype,
-      resp.data.filter(f => f.type !== 'directory' && !f.trashed)
-    )
+    await fetchNextPermissions(permissions, this.dispatch, this.permissionCol)
+
+    if (doctype === 'io.cozy.files') {
+      const sharedDocIds = getSharedDocIdsBySharings(sharings)
+      const resp = await client.collection(doctype).all({ keys: sharedDocIds })
+      const folderPaths = resp.data
+        .filter(f => f.type === 'directory' && !f.trashed)
+        .map(f => f.path)
+      const filePaths = await fetchFilesPaths(
+        client,
+        doctype,
+        resp.data.filter(f => f.type !== 'directory' && !f.trashed)
+      )
+
+      this.dispatch(receivePaths([...folderPaths, ...filePaths]))
+    }
 
-    this.dispatch(receivePaths([...folderPaths, ...filePaths]))
+    this.setState({ allLoaded: true })
   }
 
   share = async ({

package/src/index.jsx

@@ -20,3 +20,4 @@ export { CozyPassFingerprintDialogContent } from './components/CozyPassFingerpri
 export { SharingBannerPlugin } from './SharingBanner'
 export { useSharingInfos } from './SharingBanner/hooks/useSharingInfos'
 export { ConfirmTrustedRecipientsDialog } from './ConfirmTrustedRecipientsDialog'
+export { ShareButtonWithRecipients } from './ShareButtonWithRecipients'