cozy-ui 107.2.0 → 107.4.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [107.4.0](https://github.com/cozy/cozy-ui/compare/v107.3.0...v107.4.0) (2024-06-05)
+
+
+### Bug Fixes
+
+* **useSetFlagshipUi:** The navbar and statusbar height should be dynamic ([bb931d1](https://github.com/cozy/cozy-ui/commit/bb931d1))
+
+
+### Features
+
+* **BottomSheet:** Open BottomSheet at minimum height ([53e00bb](https://github.com/cozy/cozy-ui/commit/53e00bb))
+* **Viewer:** Open BottomSheet at minimum height in public view ([479f998](https://github.com/cozy/cozy-ui/commit/479f998))
+
+# [107.3.0](https://github.com/cozy/cozy-ui/compare/v107.2.0...v107.3.0) (2024-06-04)
+
+
+### Features
+
+* Remove jobs for argos on branch master ([a4512d1](https://github.com/cozy/cozy-ui/commit/a4512d1))
+
 # [107.2.0](https://github.com/cozy/cozy-ui/compare/v107.1.0...v107.2.0) (2024-05-29)
 
 

package/package.json

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

package/react/BottomSheet/BottomSheet.jsx

@@ -129,7 +129,8 @@ export const defaultBottomSheetSpringConfig = {
 
 const defaultSettings = {
   mediumHeightRatio: 0.75,
-  mediumHeight: null
+  mediumHeight: null,
+  isOpenMin: false
 }
 
 const BottomSheet = memo(
@@ -142,7 +143,7 @@ const BottomSheet = memo(
     offset,
     children
   }) => {
-    const { mediumHeightRatio, mediumHeight } = {
+    const { mediumHeightRatio, mediumHeight, isOpenMin } = {
       ...defaultSettings,
       ...settings
     }
@@ -240,21 +241,25 @@ const BottomSheet = memo(
         toolbarProps,
         offset
       })
-      const computedMediumHeight = computeMediumHeight({
-        backdrop,
-        maxHeight,
-        mediumHeight,
-        mediumHeightRatio,
-        innerContentHeight,
-        bottomSpacerHeight,
-        offset
-      })
       const minHeight = computeMinHeight({
         isClosable,
+        isOpenMin,
         headerRef,
         actionButtonsHeight,
         actionButtonsBottomMargin
       })
+      const computedMediumHeight =
+        isOpenMin && actionButtonsHeight > 0
+          ? minHeight + 1
+          : computeMediumHeight({
+              backdrop,
+              maxHeight,
+              mediumHeight,
+              mediumHeightRatio,
+              innerContentHeight,
+              bottomSpacerHeight,
+              offset
+            })
 
       const newPeekHeights = [
         ...new Set([minHeight, computedMediumHeight, maxHeight])
@@ -408,7 +413,9 @@ BottomSheet.propTypes = {
     /** Height in pixel of the middle snap point */
     mediumHeight: PropTypes.number,
     /** Height of the middle snap point, expressed as a percentage of the viewport height */
-    mediumHeightRatio: PropTypes.number
+    mediumHeightRatio: PropTypes.number,
+    /** To open the BottomSheet at the minimum height, if have an header */
+    isOpenMin: PropTypes.bool
   }),
   /** To add a backdrop */
   backdrop: PropTypes.bool,

package/react/BottomSheet/README.md

@@ -88,7 +88,8 @@ const initialVariants = [{
   withFakeToolbar: false,
   withHeader: true,
   withListContent: false,
-  withTitle: false
+  withTitle: false,
+  isOpenMin: false
 }]
 const initialState = {
   isBottomSheetDisplayed: isTesting(),
@@ -112,10 +113,14 @@ const handleChangeOffset = el => {
   setState({ offset: Number(el.target.value) })
 }
 
+const makeSettings = variant => {
 const settings = state.mediumHeight === undefined && state.mediumHeightRatio === undefined
   ? undefined
   : { mediumHeight: state.mediumHeight, mediumHeightRatio: state.mediumHeightRatio }
 
+  return { ...settings, isOpenMin: variant.isOpenMin }
+}
+
 // -->
 
 ;
@@ -163,7 +168,7 @@ const settings = state.mediumHeight === undefined && state.mediumHeightRatio ===
         {state.isBottomSheetDisplayed && (
           <BottomSheet
             toolbarProps={variant.withFakeToolbar ? { height: 50 } : undefined}
-            settings={settings}
+            settings={makeSettings(variant)}
             backdrop={variant.backdrop}
             skipAnimation={isTesting()}
             offset={state.offset}

package/react/BottomSheet/helpers.js

@@ -55,11 +55,12 @@ export const computeMediumHeight = ({
 
 export const computeMinHeight = ({
   isClosable,
+  isOpenMin,
   headerRef,
   actionButtonsHeight,
   actionButtonsBottomMargin
 }) => {
-  if (isClosable) return 0
+  if (isClosable && !isOpenMin) return 0
 
   return (
     headerRef.current.offsetHeight +

package/react/ListItem/Readme.md

@@ -153,9 +153,10 @@ const files = [
     metadata: {
       number: 12345,
       refTaxIncome: '153',
-      datetime: new Date(Date.now()).toISOString(),
-      referencedDate: new Date(Date.now()).toISOString(),
-      expirationDate: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(),
+      datetime: '2024-01-11T12:00:00.000Z',
+      datetimeLabel: 'expirationDate',
+      referencedDate: '2024-01-01T12:00:00.000Z',
+      expirationDate: '2024-01-11T12:00:00.000Z',
       noticePeriod: '30',
       qualification: {
         label: 'driver_license'

package/react/Viewer/Footer/FooterContent.jsx

@@ -48,12 +48,17 @@ const FooterContent = ({ file, toolbarRef, children, isPublic }) => {
     name: 'FooterActionButtons'
   })
 
+  const bottomSheetSettings = {
+    isOpenMin: isPublic ? true : false,
+    mediumHeightRatio: isPublic ? undefined : 0.5
+  }
+
   if (isValidForPanel({ file })) {
     return (
       <BottomSheet
         toolbarProps={toolbarProps}
         portalProps={{ disablePortal: true }}
-        settings={{ mediumHeightRatio: isPublic ? 0 : 0.5 }}
+        settings={bottomSheetSettings}
       >
         <BottomSheetHeader
           className={cx('u-ph-1 u-pb-1', styles.bottomSheetHeader)}

package/react/Viewer/Readme.md

@@ -26,6 +26,7 @@ The `Viewer` can display an **information panel** to show additional information
   * **page** : `<string>` – URL used to edit the file when editing a `page` type metadata (side of the document)
 * **onChangeRequest** : `<function>` - Called with (nextFile, nextIndex) when the user requests to navigate to another file
 * **onCloseRequest** : `<function>` - Called when the user wants to leave the Viewer
+* **isPublic**: `<boolean>` - Whether the viewer is used in a public page or not
 * **componentsProps** : `<object>` – Props passed to components with the same name
   * **modalProps** : `<object>` – Props passed to Modal component
   * **OnlyOfficeViewer** : `<object>` – Used to open an Only Office file
@@ -204,7 +205,7 @@ initialState = {
 }
 
 const initialVariants = [
-  { navigation: true, toolbar: true, onlyOfficeEnabled: true, disableModal: false }
+  { navigation: true, toolbar: true, onlyOfficeEnabled: true, disableModal: false, isPublic: false }
 ]
 
 const getURL = (file) => {
@@ -252,6 +253,7 @@ const editPathByModelProps = {
           {state.viewerOpened && (
             <Viewer
               files={files}
+              isPublic={variant.isPublic}
               currentIndex={state.currentIndex}
               currentURL={state.currentURL}
               disableModal={variant.disableModal}

package/react/hooks/useSetFlagshipUi/helpers.js

@@ -91,13 +91,16 @@ export const isRsg = !!document.getElementById('rsg-root')
  */
 export const getFlagshipMetadata =
   isRsg || process.env.NODE_ENV === 'test'
-    ? () => ({
-        immersive:
-          JSON.parse(localStorage.getItem('flagship-app'))?.contained ===
-            'off' || false,
-        statusBarHeight: 40,
-        navbarHeight: 40
-      })
+    ? () => {
+        const isFlagshipAppContained =
+          JSON.parse(localStorage.getItem('flagship-app'))?.contained === 'on'
+
+        return {
+          immersive: isFlagshipAppContained ? false : true,
+          statusBarHeight: isFlagshipAppContained ? 0 : 40,
+          navbarHeight: isFlagshipAppContained ? 0 : 40
+        }
+      }
     : getFlagshipMetadataFromDeviceHelper
 
 /**

package/transpiled/react/BottomSheet/BottomSheet.js

@@ -125,7 +125,8 @@ export var defaultBottomSheetSpringConfig = {
 };
 var defaultSettings = {
   mediumHeightRatio: 0.75,
-  mediumHeight: null
+  mediumHeight: null,
+  isOpenMin: false
 };
 var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
   var toolbarProps = _ref3.toolbarProps,
@@ -138,7 +139,8 @@ var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
 
   var _defaultSettings$sett = _objectSpread(_objectSpread({}, defaultSettings), settings),
       mediumHeightRatio = _defaultSettings$sett.mediumHeightRatio,
-      mediumHeight = _defaultSettings$sett.mediumHeight;
+      mediumHeight = _defaultSettings$sett.mediumHeight,
+      isOpenMin = _defaultSettings$sett.isOpenMin;
 
   var innerContentRef = useRef();
   var headerRef = useRef();
@@ -263,7 +265,14 @@ var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
       toolbarProps: toolbarProps,
       offset: offset
     });
-    var computedMediumHeight = computeMediumHeight({
+    var minHeight = computeMinHeight({
+      isClosable: isClosable,
+      isOpenMin: isOpenMin,
+      headerRef: headerRef,
+      actionButtonsHeight: actionButtonsHeight,
+      actionButtonsBottomMargin: actionButtonsBottomMargin
+    });
+    var computedMediumHeight = isOpenMin && actionButtonsHeight > 0 ? minHeight + 1 : computeMediumHeight({
       backdrop: backdrop,
       maxHeight: maxHeight,
       mediumHeight: mediumHeight,
@@ -272,12 +281,6 @@ var BottomSheet = /*#__PURE__*/memo(function (_ref3) {
       bottomSpacerHeight: bottomSpacerHeight,
       offset: offset
     });
-    var minHeight = computeMinHeight({
-      isClosable: isClosable,
-      headerRef: headerRef,
-      actionButtonsHeight: actionButtonsHeight,
-      actionButtonsBottomMargin: actionButtonsBottomMargin
-    });
 
     var newPeekHeights = _toConsumableArray(new Set([minHeight, computedMediumHeight, maxHeight]));
 
@@ -400,7 +403,10 @@ BottomSheet.propTypes = {
     mediumHeight: PropTypes.number,
 
     /** Height of the middle snap point, expressed as a percentage of the viewport height */
-    mediumHeightRatio: PropTypes.number
+    mediumHeightRatio: PropTypes.number,
+
+    /** To open the BottomSheet at the minimum height, if have an header */
+    isOpenMin: PropTypes.bool
   }),
 
   /** To add a backdrop */

package/transpiled/react/BottomSheet/helpers.js

@@ -43,10 +43,11 @@ export var computeMediumHeight = function computeMediumHeight(_ref) {
 };
 export var computeMinHeight = function computeMinHeight(_ref2) {
   var isClosable = _ref2.isClosable,
+      isOpenMin = _ref2.isOpenMin,
       headerRef = _ref2.headerRef,
       actionButtonsHeight = _ref2.actionButtonsHeight,
       actionButtonsBottomMargin = _ref2.actionButtonsBottomMargin;
-  if (isClosable) return 0;
+  if (isClosable && !isOpenMin) return 0;
   return headerRef.current.offsetHeight + actionButtonsHeight + actionButtonsBottomMargin + (getFlagshipMetadata().navbarHeight || 0) + getSafeAreaValue('bottom');
 };
 export var makeOverridenChildren = function makeOverridenChildren(children, headerContentRef) {

package/transpiled/react/Viewer/Footer/FooterContent.js

@@ -54,6 +54,10 @@ var FooterContent = function FooterContent(_ref2) {
     file: file,
     name: 'FooterActionButtons'
   });
+  var bottomSheetSettings = {
+    isOpenMin: isPublic ? true : false,
+    mediumHeightRatio: isPublic ? undefined : 0.5
+  };
 
   if (isValidForPanel({
     file: file
@@ -63,9 +67,7 @@ var FooterContent = function FooterContent(_ref2) {
       portalProps: {
         disablePortal: true
       },
-      settings: {
-        mediumHeightRatio: isPublic ? 0 : 0.5
-      }
+      settings: bottomSheetSettings
     }, /*#__PURE__*/React.createElement(BottomSheetHeader, {
       className: cx('u-ph-1 u-pb-1', styles.bottomSheetHeader)
     }, /*#__PURE__*/React.createElement(FooterButtons, {

package/transpiled/react/hooks/useSetFlagshipUi/helpers.js

@@ -92,10 +92,11 @@ export var isRsg = !!document.getElementById('rsg-root');
 export var getFlagshipMetadata = isRsg || process.env.NODE_ENV === 'test' ? function () {
   var _JSON$parse;
 
+  var isFlagshipAppContained = ((_JSON$parse = JSON.parse(localStorage.getItem('flagship-app'))) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.contained) === 'on';
   return {
-    immersive: ((_JSON$parse = JSON.parse(localStorage.getItem('flagship-app'))) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.contained) === 'off' || false,
-    statusBarHeight: 40,
-    navbarHeight: 40
+    immersive: isFlagshipAppContained ? false : true,
+    statusBarHeight: isFlagshipAppContained ? 0 : 40,
+    navbarHeight: isFlagshipAppContained ? 0 : 40
   };
 } : getFlagshipMetadataFromDeviceHelper;
 /**