cozy-ui 93.0.1 → 93.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [93.1.0](https://github.com/cozy/cozy-ui/compare/v93.0.1...v93.1.0) (2023-09-15)
+
+
+### Features
+
+* **NestedSelect:** Manage ellipsis ([adbabc9](https://github.com/cozy/cozy-ui/commit/adbabc9))
+
 ## [93.0.1](https://github.com/cozy/cozy-ui/compare/v93.0.0...v93.0.1) (2023-09-14)
 
 

package/package.json

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

package/react/NestedSelect/ItemRow.jsx

@@ -12,13 +12,21 @@ import Typography from '../Typography'
 
 const infoStyle = { color: 'var(--secondaryTextColor)' }
 
-const ItemRow = ({ item, onClick, isSelected, radioPosition, isLast }) => {
+const ItemRow = ({
+  item,
+  onClick,
+  isSelected,
+  radioPosition,
+  isLast,
+  ellipsis
+}) => {
   const { isDesktop } = useBreakpoints()
 
   return (
     <>
       <ListItem
         gutters={isDesktop ? 'double' : 'default'}
+        {...(ellipsis === false && { ellipsis: false })}
         button
         onClick={() => onClick(item)}
       >

package/react/NestedSelect/NestedSelect.jsx

@@ -80,7 +80,8 @@ class NestedSelect extends Component {
       isSelected,
       title,
       transformParentItem,
-      radioPosition
+      radioPosition,
+      ellipsis
     } = this.props
     const { history, searchValue, searchResult } = this.state
     const current = history[0]
@@ -117,6 +118,7 @@ class NestedSelect extends Component {
               item={parentItem}
               onClick={this.handleClickItem}
               isSelected={isSelectedWithLevel(parentItem)}
+              ellipsis={ellipsis}
             />
           ) : null}
           {searchOptions && level === 0 && (
@@ -146,6 +148,7 @@ class NestedSelect extends Component {
                   onClick={this.handleClickItem}
                   isSelected={isSelectedWithLevel(item)}
                   isLast={index === searchResult.length - 1}
+                  ellipsis={ellipsis}
                 />
               ))
             )
@@ -158,6 +161,7 @@ class NestedSelect extends Component {
                 onClick={this.handleClickItem}
                 isSelected={isSelectedWithLevel(item)}
                 isLast={index === children.length - 1}
+                ellipsis={ellipsis}
               />
             ))
           )}
@@ -236,7 +240,12 @@ NestedSelect.propTypes = {
     placeholderSearch: PropTypes.string.isRequired,
     noDataLabel: PropTypes.string.isRequired,
     onSearch: PropTypes.func.isRequired
-  })
+  }),
+
+  /**
+   * To manage ellipsis on ItemRow
+   */
+  ellipsis: PropTypes.bool
 }
 
 export default NestedSelect

package/react/NestedSelect/NestedSelect.md

@@ -107,6 +107,7 @@ const isParent = (item, childItem) => {
 const InteractiveExample = () => {
   const [leftRadio, setLeftRadio] = useState(false)
   const [searchOptions, setSearchOptions] = useState(null)
+  const [withEllipsis, setWithEllipsis] = useState(true)
   const [showingModal, setShowingModal] = useState(false)
   const [selectedItem, setSelected] = useState({ title: 'A' })
   const showModal = () => setShowingModal(true)
@@ -125,6 +126,9 @@ const InteractiveExample = () => {
   const handleClickLeftRadio = () => {
     setLeftRadio(!leftRadio)
   }
+  const handleClickWithEllipsis = () => {
+    setWithEllipsis(prev => !prev)
+  }
 
   const handleClickWithSearch = e => {
     if (e.target.checked) {
@@ -173,6 +177,14 @@ const InteractiveExample = () => {
         checked={!!searchOptions}
         onClick={handleClickWithSearch}
       />
+      <Checkbox
+        label='without ellipsis'
+        readOnly
+        name='withEllipsis'
+        value={!!withEllipsis}
+        checked={!!withEllipsis}
+        onClick={handleClickWithEllipsis}
+      />
       { selectedItem && (
         <>Selected: { selectedItem.title }<br/></>
       )}
@@ -188,6 +200,7 @@ const InteractiveExample = () => {
           title="Please select letter"
           transformParentItem={transformParentItem}
           searchOptions={searchOptions}
+          ellipsis={withEllipsis}
         />
       )}
     </>

package/transpiled/react/NestedSelect/ItemRow.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 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; }
@@ -23,18 +24,22 @@ var ItemRow = function ItemRow(_ref) {
       _onClick = _ref.onClick,
       isSelected = _ref.isSelected,
       radioPosition = _ref.radioPosition,
-      isLast = _ref.isLast;
+      isLast = _ref.isLast,
+      ellipsis = _ref.ellipsis;
 
   var _useBreakpoints = useBreakpoints(),
       isDesktop = _useBreakpoints.isDesktop;
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
-    gutters: isDesktop ? 'double' : 'default',
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, _extends({
+    gutters: isDesktop ? 'double' : 'default'
+  }, ellipsis === false && {
+    ellipsis: false
+  }, {
     button: true,
     onClick: function onClick() {
       return _onClick(item);
     }
-  }, radioPosition === 'left' && /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Radio, {
+  }), radioPosition === 'left' && /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Radio, {
     readOnly: true,
     name: item.title,
     value: item.title,

package/transpiled/react/NestedSelect/NestedSelect.js

@@ -117,7 +117,8 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
           isSelected = _this$props.isSelected,
           title = _this$props.title,
           transformParentItem = _this$props.transformParentItem,
-          radioPosition = _this$props.radioPosition;
+          radioPosition = _this$props.radioPosition,
+          ellipsis = _this$props.ellipsis;
       var _this$state = this.state,
           history = _this$state.history,
           searchValue = _this$state.searchValue,
@@ -157,7 +158,8 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
         radioPosition: radioPosition,
         item: parentItem,
         onClick: this.handleClickItem,
-        isSelected: isSelectedWithLevel(parentItem)
+        isSelected: isSelectedWithLevel(parentItem),
+        ellipsis: ellipsis
       }) : null, searchOptions && level === 0 && /*#__PURE__*/React.createElement("div", {
         className: "u-mh-1 u-mb-half"
       }, /*#__PURE__*/React.createElement(Input, {
@@ -174,7 +176,8 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
           item: item,
           onClick: _this2.handleClickItem,
           isSelected: isSelectedWithLevel(item),
-          isLast: index === searchResult.length - 1
+          isLast: index === searchResult.length - 1,
+          ellipsis: ellipsis
         });
       }) : children.map(function (item, index) {
         return /*#__PURE__*/React.createElement(ItemRow, {
@@ -183,7 +186,8 @@ var NestedSelect = /*#__PURE__*/function (_Component) {
           item: item,
           onClick: _this2.handleClickItem,
           isSelected: isSelectedWithLevel(item),
-          isLast: index === children.length - 1
+          isLast: index === children.length - 1,
+          ellipsis: ellipsis
         });
       })));
     }
@@ -265,6 +269,11 @@ NestedSelect.propTypes = {
     placeholderSearch: PropTypes.string.isRequired,
     noDataLabel: PropTypes.string.isRequired,
     onSearch: PropTypes.func.isRequired
-  })
+  }),
+
+  /**
+   * To manage ellipsis on ItemRow
+   */
+  ellipsis: PropTypes.bool
 };
 export default NestedSelect;