cozy-ui 129.0.0 → 130.1.0

package/package.json

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

package/react/CozyDialogs/Readme.md

@@ -55,6 +55,7 @@ Additionally, all the CozyDialogs support [MUI Dialog's props](https://v4.mui.co
 ### Exemples
 
 ```jsx
+import { useRef, useEffect, useState } from 'react'
 import {
   Dialog,
   ConfirmDialog,
@@ -78,7 +79,14 @@ import FormControl from 'cozy-ui/transpiled/react/FormControl'
 import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
 import BottomSheet, { BottomSheetItem } from 'cozy-ui/transpiled/react/BottomSheet'
 import Stack from 'cozy-ui/transpiled/react/Stack'
-
+import Menu from 'cozy-ui/transpiled/react/Menu'
+import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+import AttachmentIcon from 'cozy-ui/transpiled/react/Icons/Attachment'
 import ToTheCloudIcon from 'cozy-ui/transpiled/react/Icons/ToTheCloud'
 import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud"
 import BackgroundImg from './background.png'
@@ -90,6 +98,8 @@ const handleBack = () => {
 }
 const hideBottomSheet = () => setState({ bottomSheetOpened: false })
 const showBottomSheet = () => setState({ bottomSheetOpened: true })
+const hideMenu = () => setState({ menuOpened: false })
+const showMenu = () => setState({ menuOpened: true })
 const hideSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: false })
 const showSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: true })
 const hideSecondDialog = () => setState({ secondDialogOpened: false })
@@ -189,6 +199,7 @@ const toggleDialog = dialog => {
 initialState = {
   modalOpened: isTesting(),
   bottomSheetOpened: false,
+  menuOpened: false,
   secondConfirmDialogOpened: false,
   secondDialogOpened: false,
   BSConfirmDialogOpened: false,
@@ -212,6 +223,60 @@ const initialVariants = [{
   withBackground: false
 }]
 
+const ButtonMenu = () => {
+  const [forceRender, setForceRender] = useState(0)
+  const menuRef = useRef()
+
+  useEffect(() => {
+    if (menuRef.current) {
+      setForceRender(1)
+    }
+  }, [menuRef])
+
+  return (
+    <div ref={menuRef}>
+      <Button label="Show menu" onClick={showMenu}/>
+
+      {state.menuOpened && menuRef.current && (
+        <Menu
+            open
+            anchorEl={menuRef.current}
+            getContentAnchorEl={null}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left'
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'left'
+            }}
+            keepMounted
+            onClose={hideMenu}
+          >
+          <MenuItem onClick={hideMenu}>
+            <ListItemIcon>
+              <Icon icon={PenIcon} />
+            </ListItemIcon>
+            <ListItemText primary="Modify" />
+          </MenuItem>
+          <MenuItem onClick={hideMenu}>
+            <ListItemIcon>
+              <Icon icon={PeopleIcon} />
+            </ListItemIcon>
+            <ListItemText primary="People" />
+          </MenuItem>
+          <MenuItem onClick={hideMenu}>
+            <ListItemIcon>
+              <Icon icon={AttachmentIcon} />
+            </ListItemIcon>
+            <ListItemText primary="Attachment" />
+          </MenuItem>
+        </Menu>
+      )}
+    </div>
+  )
+}
+
 ;
 
 <DemoProvider>
@@ -329,6 +394,7 @@ const initialVariants = [{
                     <div>
                       <Button label="Show inner dialog" onClick={showSecondDialog}/>
                     </div>
+                    <ButtonMenu />
                   </Stack>
                 </Typography>
 

package/react/Table/Readme.md

@@ -121,7 +121,7 @@ const ExampleTable = ({ variant, ...props }) => {
       <Typography className="u-mt-1" variant="h4">Sorted table</Typography>
       <div className="u-mt-half" style={{ border: "1px solid var(--borderMainColor)", height: 400, width: "100%" }}>
         <SelectionProvider>
-          <ExampleTable variant={variant} defaultOrder={columns[0].id} />
+          <ExampleTable variant={variant} defaultOrder={{by: columns[0].id, direction: 'asc'}} />
         </SelectionProvider>
       </div>
     </>

package/react/Table/Virtualized/index.jsx

@@ -28,8 +28,10 @@ const VirtualizedTable = forwardRef(
     },
     ref
   ) => {
-    const [orderDirection, setOrderDirection] = useState('asc')
-    const [orderBy, setOrderBy] = useState(defaultOrder)
+    const [orderDirection, setOrderDirection] = useState(
+      defaultOrder?.direction ?? 'asc'
+    )
+    const [orderBy, setOrderBy] = useState(defaultOrder?.by ?? undefined)
 
     const sortedData = orderBy
       ? stableSort(rows, getComparator(orderDirection, orderBy))
@@ -117,10 +119,27 @@ VirtualizedTable.defaultProps = {
 }
 
 VirtualizedTable.propTypes = {
-  /** Column ID to be used for initiating the sort */
-  defaultOrder: PropTypes.string,
+  /** Rows to display in the table */
+  rows: PropTypes.array,
+  /** Column configuration */
+  columns: PropTypes.array,
   /** Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array }) */
   groups: PropTypes.func,
+  /** Default sorting configuration */
+  defaultOrder: PropTypes.shape({
+    direction: PropTypes.oneOf(['asc', 'desc']),
+    by: PropTypes.string
+  }),
+  /** Sort files by type to put directory and trash before files */
+  secondarySort: PropTypes.func,
+  /** Array of selected items */
+  selectedItems: PropTypes.array,
+  /** Callback function when a row is selected */
+  onSelect: PropTypes.func,
+  /** Callback function when all rows are selected/deselected */
+  onSelectAll: PropTypes.func,
+  /** Function to determine if a row is selected */
+  isSelectedItem: PropTypes.func,
   /** Callback called after the sort */
   onSortChange: PropTypes.func
 }

package/stylus/objects/sidebar.styl

@@ -11,12 +11,15 @@
 $sidebar
     width rem(236)
     background-color var(--defaultBackgroundColor)
-    overflow-y auto
+    overflow-y hidden
     overflow-x hidden
     display flex
     flex-direction column
     flex 0 0 auto
 
+    &:hover
+        overflow-y auto
+
     &--border
         border-right rem(1) solid var(--dividerColor)
 

package/transpiled/react/Table/Virtualized/index.js

@@ -17,6 +17,8 @@ import { stableSort, getComparator } from "cozy-ui/transpiled/react/Table/Virtua
 import virtuosoComponents from "cozy-ui/transpiled/react/Table/Virtualized/virtuosoComponents";
 import TableCell from "cozy-ui/transpiled/react/TableCell";
 var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _defaultOrder$directi, _defaultOrder$by;
+
   var rows = _ref.rows,
       columns = _ref.columns,
       groups = _ref.groups,
@@ -32,12 +34,12 @@ var VirtualizedTable = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onSortChange = _ref.onSortChange,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState('asc'),
+  var _useState = useState((_defaultOrder$directi = defaultOrder === null || defaultOrder === void 0 ? void 0 : defaultOrder.direction) !== null && _defaultOrder$directi !== void 0 ? _defaultOrder$directi : 'asc'),
       _useState2 = _slicedToArray(_useState, 2),
       orderDirection = _useState2[0],
       setOrderDirection = _useState2[1];
 
-  var _useState3 = useState(defaultOrder),
+  var _useState3 = useState((_defaultOrder$by = defaultOrder === null || defaultOrder === void 0 ? void 0 : defaultOrder.by) !== null && _defaultOrder$by !== void 0 ? _defaultOrder$by : undefined),
       _useState4 = _slicedToArray(_useState3, 2),
       orderBy = _useState4[0],
       setOrderBy = _useState4[1];
@@ -129,12 +131,36 @@ VirtualizedTable.defaultProps = {
   onSelectAll: function onSelectAll() {}
 };
 VirtualizedTable.propTypes = {
-  /** Column ID to be used for initiating the sort */
-  defaultOrder: PropTypes.string,
+  /** Rows to display in the table */
+  rows: PropTypes.array,
+
+  /** Column configuration */
+  columns: PropTypes.array,
 
   /** Returned object is: PropTypes.shape({ groupLabels: PropTypes.array, groupCounts: PropTypes.array }) */
   groups: PropTypes.func,
 
+  /** Default sorting configuration */
+  defaultOrder: PropTypes.shape({
+    direction: PropTypes.oneOf(['asc', 'desc']),
+    by: PropTypes.string
+  }),
+
+  /** Sort files by type to put directory and trash before files */
+  secondarySort: PropTypes.func,
+
+  /** Array of selected items */
+  selectedItems: PropTypes.array,
+
+  /** Callback function when a row is selected */
+  onSelect: PropTypes.func,
+
+  /** Callback function when all rows are selected/deselected */
+  onSelectAll: PropTypes.func,
+
+  /** Function to determine if a row is selected */
+  isSelectedItem: PropTypes.func,
+
   /** Callback called after the sort */
   onSortChange: PropTypes.func
 };