cozy-ui 90.1.0 → 90.2.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [90.2.0](https://github.com/cozy/cozy-ui/compare/v90.1.0...v90.2.0) (2023-07-31)
+
+
+### Bug Fixes
+
+* **Viewer:** Success alert for copied item is now with a success style ([f934e3c](https://github.com/cozy/cozy-ui/commit/f934e3c))
+
+
+### Features
+
+* Add copy-text-to-clipboard 3.2.0 package ([c79456f](https://github.com/cozy/cozy-ui/commit/c79456f))
+* Replace navigator.clipboard by copy-text-to-clipboard ([2884a37](https://github.com/cozy/cozy-ui/commit/2884a37))
+
 # [90.1.0](https://github.com/cozy/cozy-ui/compare/v90.0.0...v90.1.0) (2023-07-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "90.1.0",
+  "version": "90.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -161,6 +161,7 @@
     "bundlemon": "^1.3.2",
     "chart.js": "3.7.1",
     "classnames": "^2.2.5",
+    "copy-text-to-clipboard": "3.2.0",
     "cozy-interapp": "^0.5.4",
     "date-fns": "^1.28.5",
     "filesize": "8.0.7",

package/react/List/Readme.md

@@ -279,116 +279,3 @@ import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
   </ListItem>
 </List>
 ```
-
-### Contextualized item
-
-```jsx
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
-import List from 'cozy-ui/transpiled/react/List'
-import ListItemByDoc from 'cozy-ui/transpiled/react/ListItem/ListItemByDoc'
-import ListItem from 'cozy-ui/transpiled/react/ListItem'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import Divider from 'cozy-ui/transpiled/react/Divider'
-import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-
-const mockClient = {
-  plugins: {
-    realtime: {
-      subscribe: () => {},
-      unsubscribe: () => {},
-      unsubscribeAll: () => {}
-    }
-  },
-  getStackClient: () => ({
-    uri: 'https://cozy.io/'
-  }),
-  getInstanceOptions: () => ({
-    subdomain: ''
-  })
-}
-
-const contacts = [
-  {
-    _id: 'id01',
-    _type: 'io.cozy.contacts',
-    displayName: 'John Doe',
-    birthday: '25/10/2022',
-    email: [{ address: 'johndoe@cozy.cc', primary: true }],
-    phone: [{ number: '0102030405', primary: true }]
-  },
-  {
-    _id: 'id02',
-    _type: 'io.cozy.contacts',
-    displayName: 'Jason Bourne',
-    birthday: '01/01/2020',
-    email: [{ address: 'jbourne@cozy.cc', primary: true }]
-  }
-]
-
-const files = [
-  {
-    _type: 'io.cozy.files',
-    name: 'File01.pdf',
-    metadata: {
-      number: 12345,
-      qualification: {
-        label: 'driver_license'
-      }
-    }
-  },
-  {
-    _type: 'io.cozy.files',
-    type: 'file',
-    name: 'Note01.cozy-note',
-    metadata: {
-      title: 'note title',
-      version: 0
-    }
-  }
-]
-
-;
-
-<DemoProvider client={mockClient}>
-  <List>
-    <ListItem button>
-      <ListItemIcon>
-        <Icon icon={FiletypeTextIcon} width="32" height="32" />
-      </ListItemIcon>
-      <ListItemText primary="I'm a standard item" />
-    </ListItem>
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={contacts[0]}
-      expandedAttributesProps={{ isExpandedAttributesActive: true, expandedAttributes: ['email', 'birthday'] }}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={contacts[1]}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={files[0]}
-      expandedAttributesProps={{ isExpandedAttributesActive: true, expandedAttributes: ['metadata.number'] }}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItemByDoc
-      doc={files[1]}
-      onClick={() => {}}
-    />
-    <Divider variant="inset" />
-    <ListItem button>
-      <ListItemIcon>
-        <Icon icon={FiletypeTextIcon} width="32" height="32" />
-      </ListItemIcon>
-      <ListItemText primary="I'm a standard item" />
-    </ListItem>
-  </List>
-</DemoProvider>
-```

package/react/ListItem/ExpandedAttributes/helpers.js

@@ -1,4 +1,5 @@
 import get from 'lodash/get'
+import copy from 'copy-text-to-clipboard'
 
 import { formatDate } from '../../Viewer/helpers'
 
@@ -67,9 +68,8 @@ export const makeDefaultExpandedAttributes = (doc, expandedAttributes) => {
 }
 
 export const copyToClipboard = ({ value, setAlertProps, t }) => () => {
-  if (navigator?.clipboard) {
-    navigator.clipboard.writeText(value)
-
+  const hasCopied = copy(value)
+  if (hasCopied) {
     setAlertProps({
       open: true,
       severity: 'success',

package/react/ListItem/ExpandedAttributes/helpers.spec.js

@@ -7,6 +7,8 @@ import {
 import { I18nContext } from '../../jestLib/I18n'
 import en from '../locales/en'
 
+jest.mock('copy-text-to-clipboard', () => ({ copy: jest.fn() }))
+
 const i18nContext = I18nContext({
   locale: en
 })

package/react/ListItem/Readme.md

@@ -97,3 +97,103 @@ const initialVariants = [{
   }}
 </Variants>
 ```
+
+### Contextualized items
+
+```jsx
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import List from 'cozy-ui/transpiled/react/List'
+import ListItemByDoc from 'cozy-ui/transpiled/react/ListItem/ListItemByDoc'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Divider from 'cozy-ui/transpiled/react/Divider'
+import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+const mockClient = {
+  plugins: {
+    realtime: {
+      subscribe: () => {},
+      unsubscribe: () => {},
+      unsubscribeAll: () => {}
+    }
+  },
+  getStackClient: () => ({
+    uri: 'https://cozy.io/'
+  }),
+  getInstanceOptions: () => ({
+    subdomain: ''
+  })
+}
+
+const contacts = [
+  {
+    _id: 'id01',
+    _type: 'io.cozy.contacts',
+    displayName: 'John Doe',
+    birthday: '25/10/2022',
+    email: [{ address: 'johndoe@cozy.cc', primary: true }],
+    phone: [{ number: '0102030405', primary: true }]
+  },
+  {
+    _id: 'id02',
+    _type: 'io.cozy.contacts',
+    displayName: 'Jason Bourne',
+    birthday: '01/01/2020',
+    email: [{ address: 'jbourne@cozy.cc', primary: true }]
+  }
+]
+
+const files = [
+  {
+    _type: 'io.cozy.files',
+    name: 'File01.pdf',
+    metadata: {
+      number: 12345,
+      qualification: {
+        label: 'driver_license'
+      }
+    }
+  },
+  {
+    _type: 'io.cozy.files',
+    type: 'file',
+    name: 'Note01.cozy-note',
+    metadata: {
+      title: 'note title',
+      version: 0
+    }
+  }
+]
+
+;
+
+<DemoProvider client={mockClient}>
+  <List>
+    <ListItemByDoc
+      doc={contacts[0]}
+      expandedAttributesProps={{
+        isExpandedAttributesActive: true,
+        expandedAttributes: ['email', 'birthday']
+      }}
+      onClick={() => {}}
+    />
+    <Divider variant="inset" />
+    <ListItemByDoc
+      doc={files[0]}
+      expandedAttributesProps={{
+        isExpandedAttributesActive: true,
+        expandedAttributes: ['metadata.number']
+      }}
+      onClick={() => {}}
+    />
+    <Divider variant="inset" />
+    <ListItemByDoc
+      doc={files[1]}
+      onClick={() => {}}
+    />
+  </List>
+</DemoProvider>
+```

package/react/Viewer/Panel/ActionMenuWrapper.jsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
+import copy from 'copy-text-to-clipboard'
 
 import { useAppLinkWithStoreFallback, useClient } from 'cozy-client'
 
@@ -40,10 +41,10 @@ const ActionMenuWrapper = forwardRef(({ onClose, file, optionFile }, ref) => {
   const isAppLinkLoaded = fetchStatus === 'loaded'
 
   const handleCopy = () => {
-    if (navigator?.clipboard) {
-      navigator.clipboard.writeText(value)
+    const hasCopied = copy(value)
+    if (hasCopied) {
       showViewerSnackbar(
-        'secondary',
+        'success',
         t(`Viewer.snackbar.copiedToClipboard.success`)
       )
     } else {

package/react/Viewer/Panel/getPanelBlocks.spec.jsx

@@ -4,6 +4,8 @@ jest.mock('cozy-harvest-lib/dist/components/KonnectorBlock', () => jest.fn())
 const block1Component = jest.fn()
 const block2Component = jest.fn()
 
+jest.mock('copy-text-to-clipboard', () => ({ copy: jest.fn() }))
+
 describe('getPanelBlocks', () => {
   it('should return only blocks with truthy condition', () => {
     // with two truthy component

package/transpiled/react/ListItem/ExpandedAttributes/helpers.js

@@ -1,4 +1,5 @@
 import get from 'lodash/get';
+import copy from 'copy-text-to-clipboard';
 import { formatDate } from "cozy-ui/transpiled/react/Viewer/helpers";
 export var normalizeExpandedAttribute = function normalizeExpandedAttribute(attr) {
   return attr.replaceAll(':', '.').replace('flexsearchProps.', '').replace('translated.', '');
@@ -38,10 +39,9 @@ export var copyToClipboard = function copyToClipboard(_ref) {
       setAlertProps = _ref.setAlertProps,
       t = _ref.t;
   return function () {
-    var _navigator;
+    var hasCopied = copy(value);
 
-    if ((_navigator = navigator) !== null && _navigator !== void 0 && _navigator.clipboard) {
-      navigator.clipboard.writeText(value);
+    if (hasCopied) {
       setAlertProps({
         open: true,
         severity: 'success',

package/transpiled/react/Viewer/Panel/ActionMenuWrapper.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import copy from 'copy-text-to-clipboard';
 import { useAppLinkWithStoreFallback, useClient } from 'cozy-client';
 import useBreakpoints from "cozy-ui/transpiled/react/hooks/useBreakpoints";
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
@@ -37,11 +38,10 @@ var ActionMenuWrapper = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isAppLinkLoaded = fetchStatus === 'loaded';
 
   var handleCopy = function handleCopy() {
-    var _navigator;
+    var hasCopied = copy(value);
 
-    if ((_navigator = navigator) !== null && _navigator !== void 0 && _navigator.clipboard) {
-      navigator.clipboard.writeText(value);
-      showViewerSnackbar('secondary', t("Viewer.snackbar.copiedToClipboard.success"));
+    if (hasCopied) {
+      showViewerSnackbar('success', t("Viewer.snackbar.copiedToClipboard.success"));
     } else {
       showViewerSnackbar('error', t("Viewer.snackbar.copiedToClipboard.error"));
     }