cozy-ui 111.15.0 → 111.15.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [111.15.2](https://github.com/cozy/cozy-ui/compare/v111.15.1...v111.15.2) (2024-10-09)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Add safe area and flagship app height to compute toolbar height ([f452eca](https://github.com/cozy/cozy-ui/commit/f452eca))
+
+## [111.15.1](https://github.com/cozy/cozy-ui/compare/v111.15.0...v111.15.1) (2024-10-09)
+
+
+### Bug Fixes
+
+* Show additional apps only when there ones ([64c6c5e](https://github.com/cozy/cozy-ui/commit/64c6c5e))
+
 # [111.15.0](https://github.com/cozy/cozy-ui/compare/v111.14.0...v111.15.0) (2024-10-09)
 
 

package/package.json

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

package/react/AppSections/__snapshots__/index.spec.jsx.snap

@@ -1075,11 +1075,6 @@ exports[`AppsSection component should render dropdown filter on mobile if no nav
           "type": "webapp",
           "value": "partners",
         },
-        Object {
-          "label": "Additional apps",
-          "secondary": false,
-          "value": "shortcuts",
-        },
         Object {
           "label": "Services",
           "secondary": false,
@@ -1481,11 +1476,6 @@ exports[`AppsSection component should render dropdown filter on tablet if no nav
           "type": "webapp",
           "value": "partners",
         },
-        Object {
-          "label": "Additional apps",
-          "secondary": false,
-          "value": "shortcuts",
-        },
         Object {
           "label": "Services",
           "secondary": false,

package/react/AppSections/categories.js

@@ -109,7 +109,9 @@ export const generateOptionsFromApps = (apps, options = {}) => {
         })
       )
     }
-    if (type === APP_TYPE.FILE) {
+
+    const categories = Object.keys(catApps)
+    if (type === APP_TYPE.FILE && categories.length > 0) {
       allCategoryOptions.push(
         addLabel({
           value: 'shortcuts',
@@ -117,7 +119,8 @@ export const generateOptionsFromApps = (apps, options = {}) => {
         })
       )
     }
-    const categoryOptions = Object.keys(catApps).map(cat => {
+
+    const categoryOptions = categories.map(cat => {
       return addLabel({
         value: cat,
         type: type,

package/react/AppSections/categories.spec.js

@@ -10,7 +10,14 @@ import { I18nContext } from '../jestLib/I18n'
 import mockApps from '../mocks/apps'
 
 const i18nContext = I18nContext({
-  locale: en
+  locale: {
+    ...en,
+    app_categories: {
+      ...en.app_categories,
+      foo: 'Foo',
+      bar: 'Bar'
+    }
+  }
 })
 const tMock = i18nContext.t
 
@@ -104,7 +111,6 @@ describe('generateOptionsFromApps', () => {
         type: 'webapp',
         value: 'others'
       },
-      { label: 'Additional apps', secondary: false, value: 'shortcuts' },
       {
         label: 'Services',
         secondary: false,
@@ -157,11 +163,6 @@ describe('generateOptionsFromApps', () => {
         type: 'webapp',
         value: 'others'
       },
-      {
-        label: 'Additional apps',
-        secondary: false,
-        value: 'shortcuts'
-      },
       {
         label: 'Services',
         secondary: false,
@@ -199,4 +200,90 @@ describe('generateOptionsFromApps', () => {
       catUtils.generateOptionsFromApps(null, { includeAll: false, addLabel })
     ).toEqual([])
   })
+
+  it('should return additional apps categories when there more than one', () => {
+    const appsWithAdditionlOnes = [
+      ...mockApps,
+      {
+        _id: 'shortcutA',
+        name: 'Shortcut A',
+        categories: ['foo'],
+        type: 'file',
+        _type: 'io.cozy.files'
+      },
+      {
+        _id: 'shortcutB',
+        name: 'Shortcut B',
+        categories: ['bar'],
+        type: 'file',
+        _type: 'io.cozy.files'
+      }
+    ]
+
+    expect(
+      catUtils.generateOptionsFromApps(appsWithAdditionlOnes, {
+        includeAll: false,
+        addLabel
+      })
+    ).toEqual([
+      {
+        label: 'The essentials',
+        secondary: false,
+        type: 'webapp',
+        value: 'cozy'
+      },
+      {
+        label: 'Partners',
+        secondary: false,
+        type: 'webapp',
+        value: 'partners'
+      },
+      {
+        label: 'Others',
+        secondary: false,
+        type: 'webapp',
+        value: 'others'
+      },
+      {
+        label: 'Additional apps',
+        secondary: false,
+        value: 'shortcuts'
+      },
+      {
+        label: 'Bar',
+        secondary: true,
+        type: 'file',
+        value: 'bar'
+      },
+      {
+        label: 'Foo',
+        secondary: true,
+        type: 'file',
+        value: 'foo'
+      },
+      {
+        label: 'Services',
+        secondary: false,
+        value: 'konnectors'
+      },
+      {
+        label: 'Mobile and Internet',
+        secondary: true,
+        type: 'konnector',
+        value: 'isp'
+      },
+      {
+        label: 'Telecom',
+        secondary: true,
+        type: 'konnector',
+        value: 'telecom'
+      },
+      {
+        label: 'Transportation',
+        secondary: true,
+        type: 'konnector',
+        value: 'transport'
+      }
+    ])
+  })
 })

package/react/BottomSheet/helpers.js

@@ -14,7 +14,11 @@ export const computeToolbarHeight = (toolbarProps = {}) => {
     computedToolbarHeight = ref.current.offsetHeight
   }
 
-  return computedToolbarHeight
+  return (
+    computedToolbarHeight +
+    (getFlagshipMetadata().statusBarHeight || 0) +
+    getSafeAreaValue('top')
+  )
 }
 
 export const computeMaxHeight = toolbarProps => {

package/react/BottomSheet/helpers.spec.js

@@ -22,19 +22,19 @@ describe('computeMaxHeight', () => {
   it('should return correct value if no arg', () => {
     const res = computeMaxHeight({})
 
-    expect(res).toBe(799)
+    expect(res).toBe(784)
   })
 
   it('should return correct value with height arg', () => {
     const res = computeMaxHeight({ height: 50 })
 
-    expect(res).toBe(750)
+    expect(res).toBe(735)
   })
 
   it('should return correct value with ref arg', () => {
     const res = computeMaxHeight({ ref: { current: { offsetHeight: 50 } } })
 
-    expect(res).toBe(750)
+    expect(res).toBe(735)
   })
 })
 
@@ -397,7 +397,7 @@ describe('computeBottomSpacer', () => {
           offset: 0
         })
 
-        expect(res).toBe(1)
+        expect(res).toBe(16)
       })
 
       it('should return the toolbar height', () => {
@@ -409,7 +409,7 @@ describe('computeBottomSpacer', () => {
           offset: 0
         })
 
-        expect(res).toBe(50)
+        expect(res).toBe(65)
       })
 
       it('should return the offset value and border', () => {
@@ -420,7 +420,7 @@ describe('computeBottomSpacer', () => {
           offset: 48
         })
 
-        expect(res).toBe(49)
+        expect(res).toBe(64)
       })
 
       it('should return the offset value and border and toolbar height', () => {
@@ -432,7 +432,7 @@ describe('computeBottomSpacer', () => {
           offset: 48
         })
 
-        expect(res).toBe(98)
+        expect(res).toBe(113)
       })
     })
   })
@@ -495,7 +495,7 @@ describe('computeBottomSpacer', () => {
           offset: 0
         })
 
-        expect(res).toBe(1)
+        expect(res).toBe(16)
       })
 
       it('should return the toolbar height', () => {
@@ -507,7 +507,7 @@ describe('computeBottomSpacer', () => {
           offset: 0
         })
 
-        expect(res).toBe(50)
+        expect(res).toBe(65)
       })
 
       it('should return the offset value', () => {
@@ -518,7 +518,7 @@ describe('computeBottomSpacer', () => {
           offset: 48
         })
 
-        expect(res).toBe(49)
+        expect(res).toBe(64)
       })
 
       it('should return the offset value and toolbar height', () => {
@@ -530,7 +530,7 @@ describe('computeBottomSpacer', () => {
           offset: 48
         })
 
-        expect(res).toBe(98)
+        expect(res).toBe(113)
       })
     })
   })
@@ -540,18 +540,18 @@ describe('computeToolbarHeight', () => {
   it('should return the height prop', () => {
     const res = computeToolbarHeight({ height: 50 })
 
-    expect(res).toBe(50)
+    expect(res).toBe(65)
   })
 
   it('should return the height from ref', () => {
     const res = computeToolbarHeight({ ref: { current: { offsetHeight: 50 } } })
 
-    expect(res).toBe(50)
+    expect(res).toBe(65)
   })
 
   it('should return default value', () => {
     const res = computeToolbarHeight()
 
-    expect(res).toBe(1)
+    expect(res).toBe(16)
   })
 })

package/react/CozyDialogs/Readme.md

@@ -92,6 +92,8 @@ const hideBottomSheet = () => setState({ bottomSheetOpened: false })
 const showBottomSheet = () => setState({ bottomSheetOpened: true })
 const hideSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: false })
 const showSecondConfirmDialog = () => setState({ secondConfirmDialogOpened: true })
+const hideSecondDialog = () => setState({ secondDialogOpened: false })
+const showSecondDialog = () => setState({ secondDialogOpened: true })
 const hideBSConfirmDialog = () => setState({ BSConfirmDialogOpened: false })
 const showBSConfirmDialog = () => setState({ BSConfirmDialogOpened: true })
 
@@ -188,6 +190,7 @@ initialState = {
   modalOpened: isTesting(),
   bottomSheetOpened: false,
   secondConfirmDialogOpened: false,
+  secondDialogOpened: false,
   BSConfirmDialogOpened: false,
   modal: Dialog,
   size: 'medium',
@@ -323,6 +326,9 @@ const initialVariants = [{
                     <div>
                       <Button label="Show inner confirm dialog" onClick={showSecondConfirmDialog}/>
                     </div>
+                    <div>
+                      <Button label="Show inner dialog" onClick={showSecondDialog}/>
+                    </div>
                   </Stack>
                 </Typography>
 
@@ -333,6 +339,13 @@ const initialVariants = [{
                   />
                 )}
 
+                {state.secondDialogOpened && (
+                  <Dialog open onClose={hideSecondDialog}
+                    title="This is a simple title"
+                    content="This is a simple content"
+                  />
+                )}
+
                 {state.bottomSheetOpened && (
                   <BottomSheet backdrop onClose={hideBottomSheet}>
                     <BottomSheetItem>

package/transpiled/react/AppSections/categories.js

@@ -141,14 +141,16 @@ export var generateOptionsFromApps = function generateOptionsFromApps(apps) {
       }));
     }
 
-    if (type === APP_TYPE.FILE) {
+    var categories = Object.keys(catApps);
+
+    if (type === APP_TYPE.FILE && categories.length > 0) {
       allCategoryOptions.push(addLabel({
         value: 'shortcuts',
         secondary: false
       }));
     }
 
-    var categoryOptions = Object.keys(catApps).map(function (cat) {
+    var categoryOptions = categories.map(function (cat) {
       return addLabel({
         value: cat,
         type: type,

package/transpiled/react/BottomSheet/helpers.js

@@ -14,7 +14,7 @@ export var computeToolbarHeight = function computeToolbarHeight() {
     computedToolbarHeight = ref.current.offsetHeight;
   }
 
-  return computedToolbarHeight;
+  return computedToolbarHeight + (getFlagshipMetadata().statusBarHeight || 0) + getSafeAreaValue('top');
 };
 export var computeMaxHeight = function computeMaxHeight(toolbarProps) {
   var toolbarHeight = computeToolbarHeight(toolbarProps);