cozy-ui 103.0.0 → 103.1.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [103.1.1](https://github.com/cozy/cozy-ui/compare/v103.1.0...v103.1.1) (2024-02-09)
+
+
+### Bug Fixes
+
+* Stop propagation of event ([167e50b](https://github.com/cozy/cozy-ui/commit/167e50b))
+
+# [103.1.0](https://github.com/cozy/cozy-ui/compare/v103.0.0...v103.1.0) (2024-02-07)
+
+
+### Bug Fixes
+
+* **Filename:** Adjust style and DOM structure ([7f000a6](https://github.com/cozy/cozy-ui/commit/7f000a6))
+
+
+### Features
+
+* **MidEllipsis:** Use `ui.midellipsis-lib.enabled` flag for better one ([b7b484e](https://github.com/cozy/cozy-ui/commit/b7b484e))
+* **Packages:** Add react-middle-ellipsis package ([a8991d9](https://github.com/cozy/cozy-ui/commit/a8991d9))
+
 # [103.0.0](https://github.com/cozy/cozy-ui/compare/v102.2.1...v103.0.0) (2024-02-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "103.0.0",
+  "version": "103.1.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -174,6 +174,7 @@
     "piwik-react-router": "0.12.1",
     "react-chartjs-2": "4.1.0",
     "react-markdown": "^4.0.8",
+    "react-middle-ellipsis": "1.2.2",
     "react-pdf": "^5.7.2",
     "react-popper": "^2.2.3",
     "react-remove-scroll": "^2.4.0",

package/react/Filename/Readme.md

@@ -17,7 +17,7 @@ const initialVariants = [
       icon={variant.icon ? FileIcon : undefined}
       variant={variant.body1Variant ? 'body1' : undefined}
       midEllipsis={variant.midEllipsis}
-      filename="Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex"
+      filename="Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex and this is the end"
       extension={variant.noExtension ? undefined : ".pdf"}
     />
   )}

package/react/Filename/index.jsx

@@ -1,58 +1,35 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import cx from 'classnames'
 
-import { Media, Bd, Img } from '../deprecated/Media'
-import Icon from '../Icon'
+import Icon, { iconPropType } from '../Icon'
 import Typography from '../Typography'
 import MidEllipsis from '../MidEllipsis'
 
-import styles from './styles.styl'
-
 const Filename = ({ icon, filename, extension, midEllipsis, variant }) => {
   return (
-    <Media>
+    <div className="u-flex u-flex-items-center">
       {icon && (
-        <Img>
-          <Icon className={'u-mr-1'} icon={icon} width={30} height={30} />
-        </Img>
+        <div className="u-mr-1">
+          <Icon icon={icon} width={30} height={30} />
+        </div>
+      )}
+      {filename && (
+        <Typography variant={variant} component="span" noWrap>
+          {midEllipsis ? <MidEllipsis text={filename} /> : filename}
+        </Typography>
       )}
-      {(filename || extension) && (
-        <Bd className={styles['c-filename-wrapper']}>
-          {filename && (
-            <Typography
-              variant={variant}
-              component="span"
-              className={cx(styles['c-filename-name'], {
-                'u-ellipsis': !midEllipsis,
-                'u-ov-hidden': midEllipsis
-              })}
-            >
-              {midEllipsis ? <MidEllipsis text={filename} /> : filename}
-            </Typography>
-          )}
-          {extension && (
-            <Typography
-              variant={variant}
-              component="span"
-              color="textSecondary"
-            >
-              {extension}
-            </Typography>
-          )}
-        </Bd>
+      {extension && (
+        <Typography variant={variant} component="span" color="textSecondary">
+          {extension}
+        </Typography>
       )}
-    </Media>
+    </div>
   )
 }
 
 Filename.propTypes = {
   /** Filename icon */
-  icon: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.object,
-    PropTypes.func
-  ]),
+  icon: iconPropType,
   /** folder or file name */
   filename: PropTypes.string,
   /** If a file name, you can specify the extension */

package/react/IntentDialogOpener/IntentDialogOpener.jsx

@@ -28,6 +28,7 @@ const IntentDialogOpener = props => {
 
   const openModal = ev => {
     ev.preventDefault()
+    ev.stopPropagation()
     setModalOpened(true)
   }
   const closeModal = () => setModalOpened(false)

package/react/MidEllipsis/Readme.md

@@ -1,39 +1,11 @@
 #### Ellipsis in the middle
 
-```jsx
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
-
-<MidEllipsis text={content.ada.short} />
-```
-
-#### Ellipsis in directory tree
-
-```jsx
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
-
-<MidEllipsis text="/Administratif/Netflix" />
-```
-
-#### Ellipsis with React string children
+Text can be passed in `text` prop or as `child`.
 
 ```jsx
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
+import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
 
-<MidEllipsis>/Administratif/Netflix</MidEllipsis>
-```
-
-#### Ellipsis in directory tree with complex names
-
-```jsx
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
-
-<MidEllipsis text="/Administratif/Ameli//1 88 88 88 888 888" />
-```
-
-#### Ellipsis in directory tree with complex names and unusual characters
+;
 
-```jsx
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
-
-<MidEllipsis text="/Partages reçus/Cozy 🗄 - Team/Customers & Partners 🛒/Xxxxxx (Xxxxxxxx)/4_Suivi opérationnel/Point de synchro" />
+<MidEllipsis text={content.ada.short} />
 ```

package/react/MidEllipsis/index.jsx

@@ -1,6 +1,8 @@
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
 import PropTypes from 'prop-types'
+import cx from 'classnames'
+import MiddleEllipsis from 'react-middle-ellipsis'
+import flag from 'cozy-flags'
 
 /** The left-to-right mark (LRM) is a control character (an invisible formatting character)
  * used in computerized typesetting (including word processing in a program like Microsoft Word)
@@ -14,7 +16,7 @@ import PropTypes from 'prop-types'
  * */
 const LRM = <>&#8206;</>
 
-const MidEllipsis = forwardRef(
+const MidEllipsisLegacy = forwardRef(
   ({ text, className, children, ...props }, ref) => {
     if (text && typeof text !== 'string')
       throw new Error('The "text" prop of MidEllipsis can only be a string')
@@ -41,11 +43,36 @@ const MidEllipsis = forwardRef(
   }
 )
 
-MidEllipsis.displayName = 'MidEllipsis'
+MidEllipsisLegacy.displayName = 'MidEllipsis'
 
-MidEllipsis.propTypes = {
+MidEllipsisLegacy.propTypes = {
   text: PropTypes.string,
   className: PropTypes.string
 }
 
+// --
+// This is new component based on react-middle-ellipsis
+// We will delete all other stuff if perf test are successful with this one
+const styles = { whiteSpace: 'nowrap', overflow: 'hidden' }
+
+const MidEllipsisWithLib = forwardRef(({ text, ...props }, ref) => {
+  return (
+    <span style={styles}>
+      <MiddleEllipsis {...props} ref={ref}>
+        <span>{text}</span>
+      </MiddleEllipsis>
+    </span>
+  )
+})
+//
+// --
+
+const MidEllipsis = forwardRef((props, ref) => {
+  if (flag('ui.midellipsis-lib.enabled')) {
+    return <MidEllipsisWithLib {...props} ref={ref} />
+  }
+
+  return <MidEllipsisLegacy {...props} ref={ref} />
+})
+
 export default MidEllipsis

package/react/deprecated/IntentModal/IntentModal.jsx

@@ -46,9 +46,9 @@ class IntentModal extends Component {
   // FIXME: this should be fixed by diferenciating dismissAction (for closing
   // modal) and onCancel (for intent cancellation), but it implies deprecating
   // dismissAction first, ensure legacy, prevent regressions, etc.
-  dismiss = once(() => {
+  dismiss = once(evt => {
     const { dismissAction } = this.props
-    dismissAction && dismissAction()
+    dismissAction && dismissAction(evt)
   })
 
   render() {

package/scripts/screenshots/fetchAllComponents.js

@@ -41,7 +41,9 @@ const fetchAllComponents = async (page, args, config) => {
     return Array.from(document.querySelectorAll(`${sidebarSelector} a`))
       .filter(v => !v.href.includes('?id='))
       .map(x => x.text)
+      .filter(x => x !== 'Cozy-ui documentation') // see section's name in styleguide.config.js
   })
+
   const sortedCategoriesNames = sortBy(
     categoriesName.map(catName => ({
       link: styleguideIndexURL + '#/' + catName,

package/scripts/screenshots/screenshotComponent.js

@@ -26,7 +26,7 @@ const screenshotComponent = async (page, options) => {
   const { link, name } = component
 
   await page.goto(link)
-  await sleep(100) // to be sure the page is entirely loaded
+  await sleep(200) // to be sure the page is entirely loaded
 
   const getScreenshotName =
     options.getScreenshotName || defaultGetScreenshotName

package/transpiled/react/Filename/index.js

@@ -1,14 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Media, Bd, Img } from "cozy-ui/transpiled/react/deprecated/Media";
-import Icon from "cozy-ui/transpiled/react/Icon";
+import Icon, { iconPropType } from "cozy-ui/transpiled/react/Icon";
 import Typography from "cozy-ui/transpiled/react/Typography";
 import MidEllipsis from "cozy-ui/transpiled/react/MidEllipsis";
-var styles = {
-  "c-filename-wrapper": "styles__c-filename-wrapper___3tVpA",
-  "c-filename-name": "styles__c-filename-name___1jDMz"
-};
 
 var Filename = function Filename(_ref) {
   var icon = _ref.icon,
@@ -16,32 +10,30 @@ var Filename = function Filename(_ref) {
       extension = _ref.extension,
       midEllipsis = _ref.midEllipsis,
       variant = _ref.variant;
-  return /*#__PURE__*/React.createElement(Media, null, icon && /*#__PURE__*/React.createElement(Img, null, /*#__PURE__*/React.createElement(Icon, {
-    className: 'u-mr-1',
+  return /*#__PURE__*/React.createElement("div", {
+    className: "u-flex u-flex-items-center"
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: "u-mr-1"
+  }, /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     width: 30,
     height: 30
-  })), (filename || extension) && /*#__PURE__*/React.createElement(Bd, {
-    className: styles['c-filename-wrapper']
-  }, filename && /*#__PURE__*/React.createElement(Typography, {
+  })), filename && /*#__PURE__*/React.createElement(Typography, {
     variant: variant,
     component: "span",
-    className: cx(styles['c-filename-name'], {
-      'u-ellipsis': !midEllipsis,
-      'u-ov-hidden': midEllipsis
-    })
+    noWrap: true
   }, midEllipsis ? /*#__PURE__*/React.createElement(MidEllipsis, {
     text: filename
   }) : filename), extension && /*#__PURE__*/React.createElement(Typography, {
     variant: variant,
     component: "span",
     color: "textSecondary"
-  }, extension)));
+  }, extension));
 };
 
 Filename.propTypes = {
   /** Filename icon */
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
+  icon: iconPropType,
 
   /** folder or file name */
   filename: PropTypes.string,

package/transpiled/react/IntentDialogOpener/IntentDialogOpener.js

@@ -33,6 +33,7 @@ var IntentDialogOpener = function IntentDialogOpener(props) {
 
   var openModal = function openModal(ev) {
     ev.preventDefault();
+    ev.stopPropagation();
     setModalOpened(true);
   };
 

package/transpiled/react/MidEllipsis/index.js

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["text", "className", "children"];
+var _excluded = ["text", "className", "children"],
+    _excluded2 = ["text"];
 import React, { forwardRef } from 'react';
-import cx from 'classnames';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
+import MiddleEllipsis from 'react-middle-ellipsis';
+import flag from 'cozy-flags';
 /** The left-to-right mark (LRM) is a control character (an invisible formatting character)
  * used in computerized typesetting (including word processing in a program like Microsoft Word)
  * of text that contains a mixture of left-to-right text (such as English or Russian)
@@ -16,7 +19,7 @@ import PropTypes from 'prop-types';
  * */
 
 var LRM = /*#__PURE__*/React.createElement(React.Fragment, null, "\u200E");
-var MidEllipsis = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var MidEllipsisLegacy = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var text = _ref.text,
       className = _ref.className,
       children = _ref.children,
@@ -33,9 +36,39 @@ var MidEllipsis = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, props), /*#__PURE__*/React.createElement("span", null, firstPart), /*#__PURE__*/React.createElement("span", null, LRM, lastPart, LRM));
 });
-MidEllipsis.displayName = 'MidEllipsis';
-MidEllipsis.propTypes = {
+MidEllipsisLegacy.displayName = 'MidEllipsis';
+MidEllipsisLegacy.propTypes = {
   text: PropTypes.string,
   className: PropTypes.string
+}; // --
+// This is new component based on react-middle-ellipsis
+// We will delete all other stuff if perf test are successful with this one
+
+var styles = {
+  whiteSpace: 'nowrap',
+  overflow: 'hidden'
 };
+var MidEllipsisWithLib = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var text = _ref2.text,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/React.createElement("span", {
+    style: styles
+  }, /*#__PURE__*/React.createElement(MiddleEllipsis, _extends({}, props, {
+    ref: ref
+  }), /*#__PURE__*/React.createElement("span", null, text)));
+}); //
+// --
+
+var MidEllipsis = /*#__PURE__*/forwardRef(function (props, ref) {
+  if (flag('ui.midellipsis-lib.enabled')) {
+    return /*#__PURE__*/React.createElement(MidEllipsisWithLib, _extends({}, props, {
+      ref: ref
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(MidEllipsisLegacy, _extends({}, props, {
+    ref: ref
+  }));
+});
 export default MidEllipsis;

package/transpiled/react/deprecated/IntentModal/IntentModal.js

@@ -58,9 +58,9 @@ var IntentModal = /*#__PURE__*/function (_Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "dismiss", once(function () {
+    _defineProperty(_assertThisInitialized(_this), "dismiss", once(function (evt) {
       var dismissAction = _this.props.dismissAction;
-      dismissAction && dismissAction();
+      dismissAction && dismissAction(evt);
     }));
 
     logIntentModalDepecrated('The IntentModal component has been deprecated and should be replaced by IntentIframe wrapped in Dialog');