cozy-ui 125.0.0 → 126.0.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [126.0.0](https://github.com/cozy/cozy-ui/compare/v125.1.0...v126.0.0) (2025-06-11)
+
+
+### Features
+
+* Add new QualificationIcon and use it in QualificationModal ([65cadc4](https://github.com/cozy/cozy-ui/commit/65cadc4))
+* Remove QualificationIconStack component ([d520f80](https://github.com/cozy/cozy-ui/commit/d520f80))
+
+
+### BREAKING CHANGES
+
+* You must replace `QualificationIconStack` by `QualificationIcon`
+
+# [125.1.0](https://github.com/cozy/cozy-ui/compare/v125.0.0...v125.1.0) (2025-06-11)
+
+
+### Bug Fixes
+
+* **Dialog:** Width wasn't correct for small screens ([0951f70](https://github.com/cozy/cozy-ui/commit/0951f70))
+
+
+### Features
+
+* **BreakpointsProvider:** Add `parentBasedIframe` prop ([4a49946](https://github.com/cozy/cozy-ui/commit/4a49946))
+
 # [125.0.0](https://github.com/cozy/cozy-ui/compare/v124.2.0...v125.0.0) (2025-06-05)
 
 

package/package.json

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

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -586,8 +586,8 @@ export const makeLightNormalOverrides = theme => ({
   },
   MuiDialog: {
     paper: {
+      width: '100%',
       '&.small': {
-        width: '480px',
         maxWidth: '480px',
         [theme.breakpoints.down('md')]: {
           margin: '16px',
@@ -602,19 +602,12 @@ export const makeLightNormalOverrides = theme => ({
         }
       },
       '&.medium': {
-        [theme.breakpoints.up('md')]: {
-          width: '544px',
-          maxWidth: '544px'
-        }
+        maxWidth: '544px'
       },
       '&.large': {
-        [theme.breakpoints.up('md')]: {
-          width: '800px',
-          maxWidth: '800px'
-        }
+        maxWidth: '800px'
       },
       '&.full': {
-        width: '100%',
         maxWidth: '100%'
       }
     },
@@ -624,6 +617,15 @@ export const makeLightNormalOverrides = theme => ({
       }
     },
     paperFullScreen: {
+      '&.small': {
+        maxWidth: '100%'
+      },
+      '&.medium': {
+        maxWidth: '100%'
+      },
+      '&.large': {
+        maxWidth: '100%'
+      },
       '& .cozyDialogActions': {
         paddingBottom: `calc(env(safe-area-inset-bottom) + ${getFlagshipCssVar(
           'bottom'

package/react/QualificationIcon/Readme.md

@@ -0,0 +1,14 @@
+```jsx
+import QualificationIcon from 'cozy-ui/transpiled/react/QualificationIcon'
+
+;
+
+<>
+  <QualificationIcon className="u-mr-1" />
+  <QualificationIcon className="u-mr-1" qualification="isp_invoice" />
+  <QualificationIcon className="u-mr-1" qualification="phone_invoice" />
+  <QualificationIcon className="u-mr-1" qualification="family_record_book" />
+  <QualificationIcon className="u-mr-1" theme="identity" />
+  <QualificationIcon theme="transport" />
+</>
+```

package/react/{QualificationIconStack → QualificationIcon}/index.jsx

@@ -4,7 +4,6 @@ import React from 'react'
 import { getIconByLabel } from 'cozy-client/dist/models/document/qualification'
 
 import Icon from '../Icon'
-import IconStack from '../IconStack'
 import BankIcon from '../Icons/Bank'
 import BankCheckIcon from '../Icons/BankCheck'
 import BenefitIcon from '../Icons/Benefit'
@@ -16,8 +15,6 @@ import DotsIcon from '../Icons/Dots'
 import EmailIcon from '../Icons/Email'
 import EuroIcon from '../Icons/Euro'
 import ExchangeIcon from '../Icons/Exchange'
-import FileDuotoneIcon from '../Icons/FileDuotone'
-import FileTypeNoteIcon from '../Icons/FileTypeNote'
 import FitnessIcon from '../Icons/Fitness'
 import GlobeIcon from '../Icons/Globe'
 import GouvIcon from '../Icons/Gouv'
@@ -27,6 +24,7 @@ import ImageIcon from '../Icons/Image'
 import JusticeIcon from '../Icons/Justice'
 import LaudryIcon from '../Icons/Laudry'
 import LightningIcon from '../Icons/Lightning'
+import NoteIcon from '../Icons/Note'
 import PeopleIcon from '../Icons/People'
 import PlaneIcon from '../Icons/Plane'
 import RemboursementIcon from '../Icons/Remboursement'
@@ -39,20 +37,6 @@ import TelephoneIcon from '../Icons/Telephone'
 import WaterIcon from '../Icons/Water'
 import WorkIcon from '../Icons/Work'
 
-// this is a copy of FileDuotone without the flap and with a white background
-function FileDuotoneWhite(props) {
-  return (
-    <svg viewBox="0 0 26 32" {...props}>
-      <g fillRule="evenodd">
-        <path
-          d="M0 2.002C0 .896.89 0 1.997 0H19l7 7v22.996A2 2 0 0124.003 32H1.997A1.995 1.995 0 010 29.998C.048 16 0 16 0 2.002z"
-          fill="#ffffff"
-        />
-      </g>
-    </svg>
-  )
-}
-
 const IconByLabel = {
   'bank-check': BankCheckIcon,
   bank: BankIcon,
@@ -65,7 +49,7 @@ const IconByLabel = {
   email: EmailIcon,
   euro: EuroIcon,
   exchange: ExchangeIcon,
-  'file-type-note': FileTypeNoteIcon,
+  'file-type-note': NoteIcon,
   fitness: FitnessIcon,
   globe: GlobeIcon,
   gouv: GouvIcon,
@@ -101,32 +85,21 @@ const themeIconByLabel = {
   others: 'dots'
 }
 
-const QualificationIconStack = ({ theme, qualification, ...props }) => {
-  const ForegroundIcon = qualification
+const QualificationIcon = ({ theme, qualification, ...props }) => {
+  const _Icon = qualification
     ? IconByLabel[getIconByLabel(qualification)]
     : theme
     ? IconByLabel[themeIconByLabel[theme]]
     : null
 
-  return (
-    <IconStack
-      {...props}
-      backgroundIcon={
-        <>
-          <Icon className="u-pos-absolute" icon={FileDuotoneWhite} size={32} />
-          <Icon icon={FileDuotoneIcon} color="#E049BF" size={32} />
-        </>
-      }
-      foregroundIcon={<Icon icon={ForegroundIcon} color="#E049BF" size={16} />}
-    />
-  )
+  return <Icon icon={_Icon} color="#E049BF" size={16} {...props} />
 }
 
-QualificationIconStack.propTypes = {
+QualificationIcon.propTypes = {
   /** The name of the qualification (isp\_invoice, family\_record\_book, etc.) */
   qualification: PropTypes.string,
   /** The name of the qualification theme (indentity, family, etc.) */
   theme: PropTypes.string
 }
 
-export default QualificationIconStack
+export default QualificationIcon

package/react/QualificationModal/helpers.js

@@ -5,8 +5,8 @@ import { isQualificationNote } from 'cozy-client/dist/models/document/documentTy
 import { getBoundT } from 'cozy-client/dist/models/document/locales'
 
 import Icon from '../Icon'
-import FileTypeNoteIcon from '../Icons/FileTypeNote'
-import QualificationIconStack from '../QualificationIconStack'
+import NoteIcon from '../Icons/Note'
+import QualificationIcon from '../QualificationIcon'
 
 export const makeOptions = lang => {
   const qualifT = getBoundT(lang)
@@ -16,20 +16,20 @@ export const makeOptions = lang => {
       {
         id: 'none',
         title: qualifT('Scan.themes.none'),
-        icon: <QualificationIconStack />
+        icon: <QualificationIcon />
       },
       ...themesList.map(theme => ({
         id: theme.id,
         title: qualifT(`Scan.themes.${theme.label}`),
-        icon: <QualificationIconStack theme={theme.label} />,
+        icon: <QualificationIcon theme={theme.label} />,
         children: theme.items.map(item => ({
           id: item.label,
           item,
           title: qualifT(`Scan.items.${item.label}`),
           icon: isQualificationNote(item) ? (
-            <Icon icon={FileTypeNoteIcon} size={64} />
+            <Icon icon={NoteIcon} color="#E049BF" size={16} />
           ) : (
-            <QualificationIconStack qualification={item.label} />
+            <QualificationIcon qualification={item.label} />
           )
         }))
       }))

package/react/helpers/breakpoints.js

@@ -16,12 +16,20 @@ const breakpoints = {
   isMobile: [0, small]
 }
 
-export const getBreakpointsStatus = breakpoints => {
-  const width = window.innerWidth
+export const getBreakpointsStatus = (breakpoints, innerWidth) => {
+  const width = innerWidth || window.innerWidth
   return mapValues(
     breakpoints,
     ([min, max]) => width >= min && (max === undefined || width <= max)
   )
 }
 
+export const isInsideIframe = () => {
+  try {
+    return window.self !== window.top
+  } catch (e) {
+    return true
+  }
+}
+
 export default breakpoints

package/react/index.js

@@ -125,7 +125,7 @@ export { default as Thumbnail } from './Thumbnail'
 export { default as ButtonBase } from './ButtonBase'
 export { default as QualificationGrid } from './QualificationGrid'
 export { default as QualificationItem } from './QualificationItem'
-export { default as QualificationIconStack } from './QualificationIconStack'
+export { default as QualificationIcon } from './QualificationIcon'
 export { default as QualificationModal } from './QualificationModal'
 export { default as Timeline } from './Timeline'
 export { default as TimelineConnector } from './TimelineConnector'

package/react/providers/Breakpoints/Readme.md

@@ -15,6 +15,8 @@ completely change the content, the layout, or prune away complete
 subtrees (useful on mobile where space is at a premium). Here for
 example, the square contents changes on desktop or mobile.
 
+By default, using `useBreakpoints` inside an iframe will refere to the iframe inner width. If you use `parentBasedIframe=true` on the provider wrapping the iframe, the breakpoints returned inside the iframe will refere to the parent window inner width instead.
+
 ```jsx
 import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 

package/react/providers/Breakpoints/index.jsx

@@ -1,20 +1,25 @@
 import throttle from 'lodash/throttle'
+import PropTypes from 'prop-types'
 import React, { createContext, useContext, useState, useEffect } from 'react'
 
-import breakpointDefs, {
-  getBreakpointsStatus as _getBreakpointsStatus
-} from '../../helpers/breakpoints'
-
-const getBreakpointsStatus = () => _getBreakpointsStatus(breakpointDefs)
+import { useIframeConnection } from './useIframeConnection'
+import { useIframeToSendWidth } from './useIframeToSendWidth'
+import { useParentBreakpoints } from './useParentBreakpoints'
+import breakpointDefs, { getBreakpointsStatus } from '../../helpers/breakpoints'
 
 const BreakpointsCtx = createContext(null)
 
-export const BreakpointsProvider = ({ children }) => {
-  const [breakpoints, setBreakpoints] = useState(getBreakpointsStatus())
+export const BreakpointsProvider = ({ parentBasedIframe, children }) => {
+  const [breakpoints, setBreakpoints] = useState(
+    getBreakpointsStatus(breakpointDefs)
+  )
+  const { hasIframe } = useIframeConnection({ parentBasedIframe })
+  useIframeToSendWidth({ hasIframe })
+  const { parentBreakpoints } = useParentBreakpoints({ parentBasedIframe })
 
   useEffect(() => {
     const handleResize = throttle(() => {
-      setBreakpoints(getBreakpointsStatus())
+      setBreakpoints(getBreakpointsStatus(breakpointDefs))
     }, 100)
 
     window.addEventListener('resize', handleResize)
@@ -25,12 +30,21 @@ export const BreakpointsProvider = ({ children }) => {
   }, [])
 
   return (
-    <BreakpointsCtx.Provider value={breakpoints}>
+    <BreakpointsCtx.Provider value={parentBreakpoints || breakpoints}>
       {children}
     </BreakpointsCtx.Provider>
   )
 }
 
+BreakpointsProvider.defaultProps = {
+  parentBasedIframe: false
+}
+
+BreakpointsProvider.propTypes = {
+  /** Iframes breakpoints are based on parent window inner width instead of iframe inner width  */
+  parentBasedIframe: PropTypes.bool
+}
+
 export const useBreakpoints = () => {
   const v = useContext(BreakpointsCtx)
   if (v === null) {

package/react/providers/Breakpoints/useIframeConnection.jsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+import { isInsideIframe } from '../../helpers/breakpoints'
+
+export const useIframeConnection = ({ parentBasedIframe }) => {
+  const [hasIframe, setHasIframe] = useState(false)
+
+  const isIframe = parentBasedIframe && isInsideIframe()
+
+  // parent window receives from iframe to give breakpoints
+  useEffect(() => {
+    const handleMessage = ev => {
+      if (ev.data === 'UI-breakpoints-needParentBreakpoints') {
+        setHasIframe(true)
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => window.removeEventListener('message', handleMessage)
+  }, [])
+
+  // iframe send to parent window ask for its breakpoints
+  useEffect(() => {
+    if (isIframe) {
+      window.parent.postMessage('UI-breakpoints-needParentBreakpoints', '*')
+    }
+  }, [isIframe])
+
+  return { hasIframe }
+}

package/react/providers/Breakpoints/useIframeToSendWidth.jsx

@@ -0,0 +1,33 @@
+import throttle from 'lodash/throttle'
+import { useEffect } from 'react'
+
+/**
+ * To send window innerWidth to first iframe
+ * @returns
+ */
+const sendWidthToIframe = () =>
+  window.frames[1].postMessage(`UI-breakpoints-value:${window.innerWidth}`, '*')
+
+export const useIframeToSendWidth = ({ hasIframe }) => {
+  // parent window send its innerWidth
+  useEffect(() => {
+    if (hasIframe) {
+      sendWidthToIframe()
+    }
+  }, [hasIframe])
+
+  // parent window send its innerWidth on resize
+  useEffect(() => {
+    const handleResize = throttle(() => {
+      if (hasIframe) {
+        sendWidthToIframe()
+      }
+    }, 100)
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [hasIframe])
+}

package/react/providers/Breakpoints/useParentBreakpoints.jsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react'
+
+import breakpointDefs, {
+  getBreakpointsStatus,
+  isInsideIframe
+} from '../../helpers/breakpoints'
+
+export const useParentBreakpoints = ({ parentBasedIframe }) => {
+  const [parentBreakpoints, setParentBreakpoints] = useState()
+
+  const isIframe = parentBasedIframe && isInsideIframe()
+
+  // iframe receives breakpoints from parent window
+  useEffect(() => {
+    const handleMessage = ev => {
+      if (!isIframe) return
+
+      if (
+        typeof ev.data === 'string' &&
+        ev.data.includes?.('UI-breakpoints-value:')
+      ) {
+        const parentInnerWidth = ev.data.split(':')[1]
+
+        setParentBreakpoints(
+          getBreakpointsStatus(breakpointDefs, parentInnerWidth)
+        )
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => window.removeEventListener('message', handleMessage)
+  }, [isIframe])
+
+  return { parentBreakpoints }
+}

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -656,6 +656,7 @@ export function makeDarkInvertedOverrides(theme: any): {
     };
     MuiDialog: {
         paper: {
+            width: string;
             '&.small': {
                 [x: number]: {
                     margin: string;
@@ -668,23 +669,15 @@ export function makeDarkInvertedOverrides(theme: any): {
                         marginRight: string;
                     };
                 };
-                width: string;
                 maxWidth: string;
             };
             '&.medium': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.large': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.full': {
-                width: string;
                 maxWidth: string;
             };
         };
@@ -694,6 +687,15 @@ export function makeDarkInvertedOverrides(theme: any): {
             };
         };
         paperFullScreen: {
+            '&.small': {
+                maxWidth: string;
+            };
+            '&.medium': {
+                maxWidth: string;
+            };
+            '&.large': {
+                maxWidth: string;
+            };
             '& .cozyDialogActions': {
                 paddingBottom: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -656,6 +656,7 @@ export function makeDarkNormalOverrides(theme: any): {
     };
     MuiDialog: {
         paper: {
+            width: string;
             '&.small': {
                 [x: number]: {
                     margin: string;
@@ -668,23 +669,15 @@ export function makeDarkNormalOverrides(theme: any): {
                         marginRight: string;
                     };
                 };
-                width: string;
                 maxWidth: string;
             };
             '&.medium': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.large': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.full': {
-                width: string;
                 maxWidth: string;
             };
         };
@@ -694,6 +687,15 @@ export function makeDarkNormalOverrides(theme: any): {
             };
         };
         paperFullScreen: {
+            '&.small': {
+                maxWidth: string;
+            };
+            '&.medium': {
+                maxWidth: string;
+            };
+            '&.large': {
+                maxWidth: string;
+            };
             '& .cozyDialogActions': {
                 paddingBottom: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -656,6 +656,7 @@ export function makeLightInvertedOverrides(theme: any): {
     };
     MuiDialog: {
         paper: {
+            width: string;
             '&.small': {
                 [x: number]: {
                     margin: string;
@@ -668,23 +669,15 @@ export function makeLightInvertedOverrides(theme: any): {
                         marginRight: string;
                     };
                 };
-                width: string;
                 maxWidth: string;
             };
             '&.medium': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.large': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.full': {
-                width: string;
                 maxWidth: string;
             };
         };
@@ -694,6 +687,15 @@ export function makeLightInvertedOverrides(theme: any): {
             };
         };
         paperFullScreen: {
+            '&.small': {
+                maxWidth: string;
+            };
+            '&.medium': {
+                maxWidth: string;
+            };
+            '&.large': {
+                maxWidth: string;
+            };
             '& .cozyDialogActions': {
                 paddingBottom: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -656,6 +656,7 @@ export function makeLightNormalOverrides(theme: any): {
     };
     MuiDialog: {
         paper: {
+            width: string;
             '&.small': {
                 [x: number]: {
                     margin: string;
@@ -668,23 +669,15 @@ export function makeLightNormalOverrides(theme: any): {
                         marginRight: string;
                     };
                 };
-                width: string;
                 maxWidth: string;
             };
             '&.medium': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.large': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.full': {
-                width: string;
                 maxWidth: string;
             };
         };
@@ -694,6 +687,15 @@ export function makeLightNormalOverrides(theme: any): {
             };
         };
         paperFullScreen: {
+            '&.small': {
+                maxWidth: string;
+            };
+            '&.medium': {
+                maxWidth: string;
+            };
+            '&.large': {
+                maxWidth: string;
+            };
             '& .cozyDialogActions': {
                 paddingBottom: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -561,8 +561,8 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
     },
     MuiDialog: {
       paper: {
+        width: '100%',
         '&.small': _defineProperty({
-          width: '480px',
           maxWidth: '480px'
         }, theme.breakpoints.down('md'), {
           margin: '16px',
@@ -575,16 +575,13 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
             marginRight: '-8px'
           }
         }),
-        '&.medium': _defineProperty({}, theme.breakpoints.up('md'), {
-          width: '544px',
+        '&.medium': {
           maxWidth: '544px'
-        }),
-        '&.large': _defineProperty({}, theme.breakpoints.up('md'), {
-          width: '800px',
+        },
+        '&.large': {
           maxWidth: '800px'
-        }),
+        },
         '&.full': {
-          width: '100%',
           maxWidth: '100%'
         }
       },
@@ -594,6 +591,15 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
         }
       },
       paperFullScreen: {
+        '&.small': {
+          maxWidth: '100%'
+        },
+        '&.medium': {
+          maxWidth: '100%'
+        },
+        '&.large': {
+          maxWidth: '100%'
+        },
         '& .cozyDialogActions': {
           paddingBottom: "calc(env(safe-area-inset-bottom) + ".concat(getFlagshipCssVar('bottom'), ")")
         },

package/transpiled/react/{QualificationIconStack → QualificationIcon}/index.d.ts

@@ -1,10 +1,10 @@
-export default QualificationIconStack;
-declare function QualificationIconStack({ theme, qualification, ...props }: {
+export default QualificationIcon;
+declare function QualificationIcon({ theme, qualification, ...props }: {
     [x: string]: any;
     theme: any;
     qualification: any;
 }): JSX.Element;
-declare namespace QualificationIconStack {
+declare namespace QualificationIcon {
     namespace propTypes {
         const qualification: PropTypes.Requireable<string>;
         const theme: PropTypes.Requireable<string>;

package/transpiled/react/{QualificationIconStack → QualificationIcon}/index.js

@@ -1,11 +1,10 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["theme", "qualification"];
 import PropTypes from 'prop-types';
 import React from 'react';
 import { getIconByLabel } from 'cozy-client/dist/models/document/qualification';
 import Icon from "cozy-ui/transpiled/react/Icon";
-import IconStack from "cozy-ui/transpiled/react/IconStack";
 import BankIcon from "cozy-ui/transpiled/react/Icons/Bank";
 import BankCheckIcon from "cozy-ui/transpiled/react/Icons/BankCheck";
 import BenefitIcon from "cozy-ui/transpiled/react/Icons/Benefit";
@@ -17,8 +16,6 @@ import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import EmailIcon from "cozy-ui/transpiled/react/Icons/Email";
 import EuroIcon from "cozy-ui/transpiled/react/Icons/Euro";
 import ExchangeIcon from "cozy-ui/transpiled/react/Icons/Exchange";
-import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone";
-import FileTypeNoteIcon from "cozy-ui/transpiled/react/Icons/FileTypeNote";
 import FitnessIcon from "cozy-ui/transpiled/react/Icons/Fitness";
 import GlobeIcon from "cozy-ui/transpiled/react/Icons/Globe";
 import GouvIcon from "cozy-ui/transpiled/react/Icons/Gouv";
@@ -28,6 +25,7 @@ import ImageIcon from "cozy-ui/transpiled/react/Icons/Image";
 import JusticeIcon from "cozy-ui/transpiled/react/Icons/Justice";
 import LaudryIcon from "cozy-ui/transpiled/react/Icons/Laudry";
 import LightningIcon from "cozy-ui/transpiled/react/Icons/Lightning";
+import NoteIcon from "cozy-ui/transpiled/react/Icons/Note";
 import PeopleIcon from "cozy-ui/transpiled/react/Icons/People";
 import PlaneIcon from "cozy-ui/transpiled/react/Icons/Plane";
 import RemboursementIcon from "cozy-ui/transpiled/react/Icons/Remboursement";
@@ -38,19 +36,7 @@ import TeamIcon from "cozy-ui/transpiled/react/Icons/Team";
 import TelecomIcon from "cozy-ui/transpiled/react/Icons/Telecom";
 import TelephoneIcon from "cozy-ui/transpiled/react/Icons/Telephone";
 import WaterIcon from "cozy-ui/transpiled/react/Icons/Water";
-import WorkIcon from "cozy-ui/transpiled/react/Icons/Work"; // this is a copy of FileDuotone without the flap and with a white background
-
-function FileDuotoneWhite(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 26 32"
-  }, props), /*#__PURE__*/React.createElement("g", {
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M0 2.002C0 .896.89 0 1.997 0H19l7 7v22.996A2 2 0 0124.003 32H1.997A1.995 1.995 0 010 29.998C.048 16 0 16 0 2.002z",
-    fill: "#ffffff"
-  })));
-}
-
+import WorkIcon from "cozy-ui/transpiled/react/Icons/Work";
 var IconByLabel = {
   'bank-check': BankCheckIcon,
   bank: BankIcon,
@@ -63,7 +49,7 @@ var IconByLabel = {
   email: EmailIcon,
   euro: EuroIcon,
   exchange: ExchangeIcon,
-  'file-type-note': FileTypeNoteIcon,
+  'file-type-note': NoteIcon,
   fitness: FitnessIcon,
   globe: GlobeIcon,
   gouv: GouvIcon,
@@ -98,35 +84,25 @@ var themeIconByLabel = {
   others: 'dots'
 };
 
-var QualificationIconStack = function QualificationIconStack(_ref) {
+var QualificationIcon = function QualificationIcon(_ref) {
   var theme = _ref.theme,
       qualification = _ref.qualification,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var ForegroundIcon = qualification ? IconByLabel[getIconByLabel(qualification)] : theme ? IconByLabel[themeIconByLabel[theme]] : null;
-  return /*#__PURE__*/React.createElement(IconStack, _extends({}, props, {
-    backgroundIcon: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-      className: "u-pos-absolute",
-      icon: FileDuotoneWhite,
-      size: 32
-    }), /*#__PURE__*/React.createElement(Icon, {
-      icon: FileDuotoneIcon,
-      color: "#E049BF",
-      size: 32
-    })),
-    foregroundIcon: /*#__PURE__*/React.createElement(Icon, {
-      icon: ForegroundIcon,
-      color: "#E049BF",
-      size: 16
-    })
-  }));
+  var _Icon = qualification ? IconByLabel[getIconByLabel(qualification)] : theme ? IconByLabel[themeIconByLabel[theme]] : null;
+
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    icon: _Icon,
+    color: "#E049BF",
+    size: 16
+  }, props));
 };
 
-QualificationIconStack.propTypes = {
+QualificationIcon.propTypes = {
   /** The name of the qualification (isp\_invoice, family\_record\_book, etc.) */
   qualification: PropTypes.string,
 
   /** The name of the qualification theme (indentity, family, etc.) */
   theme: PropTypes.string
 };
-export default QualificationIconStack;
+export default QualificationIcon;

package/transpiled/react/QualificationModal/helpers.js

@@ -4,20 +4,20 @@ import { themesList } from 'cozy-client/dist/models/document/documentTypeData';
 import { isQualificationNote } from 'cozy-client/dist/models/document/documentTypeDataHelpers';
 import { getBoundT } from 'cozy-client/dist/models/document/locales';
 import Icon from "cozy-ui/transpiled/react/Icon";
-import FileTypeNoteIcon from "cozy-ui/transpiled/react/Icons/FileTypeNote";
-import QualificationIconStack from "cozy-ui/transpiled/react/QualificationIconStack";
+import NoteIcon from "cozy-ui/transpiled/react/Icons/Note";
+import QualificationIcon from "cozy-ui/transpiled/react/QualificationIcon";
 export var makeOptions = function makeOptions(lang) {
   var qualifT = getBoundT(lang);
   return {
     children: [{
       id: 'none',
       title: qualifT('Scan.themes.none'),
-      icon: /*#__PURE__*/React.createElement(QualificationIconStack, null)
+      icon: /*#__PURE__*/React.createElement(QualificationIcon, null)
     }].concat(_toConsumableArray(themesList.map(function (theme) {
       return {
         id: theme.id,
         title: qualifT("Scan.themes.".concat(theme.label)),
-        icon: /*#__PURE__*/React.createElement(QualificationIconStack, {
+        icon: /*#__PURE__*/React.createElement(QualificationIcon, {
           theme: theme.label
         }),
         children: theme.items.map(function (item) {
@@ -26,9 +26,10 @@ export var makeOptions = function makeOptions(lang) {
             item: item,
             title: qualifT("Scan.items.".concat(item.label)),
             icon: isQualificationNote(item) ? /*#__PURE__*/React.createElement(Icon, {
-              icon: FileTypeNoteIcon,
-              size: 64
-            }) : /*#__PURE__*/React.createElement(QualificationIconStack, {
+              icon: NoteIcon,
+              color: "#E049BF",
+              size: 16
+            }) : /*#__PURE__*/React.createElement(QualificationIcon, {
               qualification: item.label
             })
           };

package/transpiled/react/helpers/breakpoints.d.ts

@@ -1,6 +1,7 @@
-export function getBreakpointsStatus(breakpoints: any): {
+export function getBreakpointsStatus(breakpoints: any, innerWidth: any): {
     [x: string]: boolean;
 };
+export function isInsideIframe(): boolean;
 export default breakpoints;
 declare namespace breakpoints {
     const isExtraLarge: number[];

package/transpiled/react/helpers/breakpoints.js

@@ -14,8 +14,8 @@ var breakpoints = {
   isTablet: [small + 1, medium],
   isMobile: [0, small]
 };
-export var getBreakpointsStatus = function getBreakpointsStatus(breakpoints) {
-  var width = window.innerWidth;
+export var getBreakpointsStatus = function getBreakpointsStatus(breakpoints, innerWidth) {
+  var width = innerWidth || window.innerWidth;
   return mapValues(breakpoints, function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         min = _ref2[0],
@@ -24,4 +24,11 @@ export var getBreakpointsStatus = function getBreakpointsStatus(breakpoints) {
     return width >= min && (max === undefined || width <= max);
   });
 };
+export var isInsideIframe = function isInsideIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+};
 export default breakpoints;

package/transpiled/react/index.d.ts

@@ -84,7 +84,7 @@ export { default as Thumbnail } from "./Thumbnail";
 export { default as ButtonBase } from "./ButtonBase";
 export { default as QualificationGrid } from "./QualificationGrid";
 export { default as QualificationItem } from "./QualificationItem";
-export { default as QualificationIconStack } from "./QualificationIconStack";
+export { default as QualificationIcon } from "./QualificationIcon";
 export { default as QualificationModal } from "./QualificationModal";
 export { default as Timeline } from "./Timeline";
 export { default as TimelineConnector } from "./TimelineConnector";

package/transpiled/react/index.js

@@ -98,7 +98,7 @@ export { default as Thumbnail } from './Thumbnail';
 export { default as ButtonBase } from './ButtonBase';
 export { default as QualificationGrid } from './QualificationGrid';
 export { default as QualificationItem } from './QualificationItem';
-export { default as QualificationIconStack } from './QualificationIconStack';
+export { default as QualificationIcon } from './QualificationIcon';
 export { default as QualificationModal } from './QualificationModal';
 export { default as Timeline } from './Timeline';
 export { default as TimelineConnector } from './TimelineConnector';

package/transpiled/react/providers/Breakpoints/index.d.ts

@@ -1,5 +1,16 @@
-export function BreakpointsProvider({ children }: {
+export function BreakpointsProvider({ parentBasedIframe, children }: {
+    parentBasedIframe: any;
     children: any;
 }): JSX.Element;
+export namespace BreakpointsProvider {
+    namespace defaultProps {
+        const parentBasedIframe: boolean;
+    }
+    namespace propTypes {
+        const parentBasedIframe_1: PropTypes.Requireable<boolean>;
+        export { parentBasedIframe_1 as parentBasedIframe };
+    }
+}
 export function useBreakpoints(): never;
 export default useBreakpoints;
+import PropTypes from "prop-types";

package/transpiled/react/providers/Breakpoints/index.js

@@ -1,24 +1,38 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import throttle from 'lodash/throttle';
+import PropTypes from 'prop-types';
 import React, { createContext, useContext, useState, useEffect } from 'react';
-import breakpointDefs, { getBreakpointsStatus as _getBreakpointsStatus } from "cozy-ui/transpiled/react/helpers/breakpoints";
-
-var getBreakpointsStatus = function getBreakpointsStatus() {
-  return _getBreakpointsStatus(breakpointDefs);
-};
-
+import { useIframeConnection } from "cozy-ui/transpiled/react/providers/Breakpoints/useIframeConnection";
+import { useIframeToSendWidth } from "cozy-ui/transpiled/react/providers/Breakpoints/useIframeToSendWidth";
+import { useParentBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints/useParentBreakpoints";
+import breakpointDefs, { getBreakpointsStatus } from "cozy-ui/transpiled/react/helpers/breakpoints";
 var BreakpointsCtx = /*#__PURE__*/createContext(null);
 export var BreakpointsProvider = function BreakpointsProvider(_ref) {
-  var children = _ref.children;
+  var parentBasedIframe = _ref.parentBasedIframe,
+      children = _ref.children;
 
-  var _useState = useState(getBreakpointsStatus()),
+  var _useState = useState(getBreakpointsStatus(breakpointDefs)),
       _useState2 = _slicedToArray(_useState, 2),
       breakpoints = _useState2[0],
       setBreakpoints = _useState2[1];
 
+  var _useIframeConnection = useIframeConnection({
+    parentBasedIframe: parentBasedIframe
+  }),
+      hasIframe = _useIframeConnection.hasIframe;
+
+  useIframeToSendWidth({
+    hasIframe: hasIframe
+  });
+
+  var _useParentBreakpoints = useParentBreakpoints({
+    parentBasedIframe: parentBasedIframe
+  }),
+      parentBreakpoints = _useParentBreakpoints.parentBreakpoints;
+
   useEffect(function () {
     var handleResize = throttle(function () {
-      setBreakpoints(getBreakpointsStatus());
+      setBreakpoints(getBreakpointsStatus(breakpointDefs));
     }, 100);
     window.addEventListener('resize', handleResize);
     return function () {
@@ -26,9 +40,16 @@ export var BreakpointsProvider = function BreakpointsProvider(_ref) {
     };
   }, []);
   return /*#__PURE__*/React.createElement(BreakpointsCtx.Provider, {
-    value: breakpoints
+    value: parentBreakpoints || breakpoints
   }, children);
 };
+BreakpointsProvider.defaultProps = {
+  parentBasedIframe: false
+};
+BreakpointsProvider.propTypes = {
+  /** Iframes breakpoints are based on parent window inner width instead of iframe inner width  */
+  parentBasedIframe: PropTypes.bool
+};
 export var useBreakpoints = function useBreakpoints() {
   var v = useContext(BreakpointsCtx);
 

package/transpiled/react/providers/Breakpoints/useIframeConnection.d.ts

@@ -0,0 +1,5 @@
+export function useIframeConnection({ parentBasedIframe }: {
+    parentBasedIframe: any;
+}): {
+    hasIframe: boolean;
+};

package/transpiled/react/providers/Breakpoints/useIframeConnection.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import { isInsideIframe } from "cozy-ui/transpiled/react/helpers/breakpoints";
+export var useIframeConnection = function useIframeConnection(_ref) {
+  var parentBasedIframe = _ref.parentBasedIframe;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasIframe = _useState2[0],
+      setHasIframe = _useState2[1];
+
+  var isIframe = parentBasedIframe && isInsideIframe(); // parent window receives from iframe to give breakpoints
+
+  useEffect(function () {
+    var handleMessage = function handleMessage(ev) {
+      if (ev.data === 'UI-breakpoints-needParentBreakpoints') {
+        setHasIframe(true);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return function () {
+      return window.removeEventListener('message', handleMessage);
+    };
+  }, []); // iframe send to parent window ask for its breakpoints
+
+  useEffect(function () {
+    if (isIframe) {
+      window.parent.postMessage('UI-breakpoints-needParentBreakpoints', '*');
+    }
+  }, [isIframe]);
+  return {
+    hasIframe: hasIframe
+  };
+};

package/transpiled/react/providers/Breakpoints/useIframeToSendWidth.d.ts

@@ -0,0 +1,3 @@
+export function useIframeToSendWidth({ hasIframe }: {
+    hasIframe: any;
+}): void;

package/transpiled/react/providers/Breakpoints/useIframeToSendWidth.js

@@ -0,0 +1,32 @@
+import throttle from 'lodash/throttle';
+import { useEffect } from 'react';
+/**
+ * To send window innerWidth to first iframe
+ * @returns
+ */
+
+var sendWidthToIframe = function sendWidthToIframe() {
+  return window.frames[1].postMessage("UI-breakpoints-value:".concat(window.innerWidth), '*');
+};
+
+export var useIframeToSendWidth = function useIframeToSendWidth(_ref) {
+  var hasIframe = _ref.hasIframe;
+  // parent window send its innerWidth
+  useEffect(function () {
+    if (hasIframe) {
+      sendWidthToIframe();
+    }
+  }, [hasIframe]); // parent window send its innerWidth on resize
+
+  useEffect(function () {
+    var handleResize = throttle(function () {
+      if (hasIframe) {
+        sendWidthToIframe();
+      }
+    }, 100);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [hasIframe]);
+};

package/transpiled/react/providers/Breakpoints/useParentBreakpoints.d.ts

@@ -0,0 +1,5 @@
+export function useParentBreakpoints({ parentBasedIframe }: {
+    parentBasedIframe: any;
+}): {
+    parentBreakpoints: undefined;
+};

package/transpiled/react/providers/Breakpoints/useParentBreakpoints.js

@@ -0,0 +1,34 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+import breakpointDefs, { getBreakpointsStatus, isInsideIframe } from "cozy-ui/transpiled/react/helpers/breakpoints";
+export var useParentBreakpoints = function useParentBreakpoints(_ref) {
+  var parentBasedIframe = _ref.parentBasedIframe;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      parentBreakpoints = _useState2[0],
+      setParentBreakpoints = _useState2[1];
+
+  var isIframe = parentBasedIframe && isInsideIframe(); // iframe receives breakpoints from parent window
+
+  useEffect(function () {
+    var handleMessage = function handleMessage(ev) {
+      var _ev$data$includes, _ev$data;
+
+      if (!isIframe) return;
+
+      if (typeof ev.data === 'string' && (_ev$data$includes = (_ev$data = ev.data).includes) !== null && _ev$data$includes !== void 0 && _ev$data$includes.call(_ev$data, 'UI-breakpoints-value:')) {
+        var parentInnerWidth = ev.data.split(':')[1];
+        setParentBreakpoints(getBreakpointsStatus(breakpointDefs, parentInnerWidth));
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return function () {
+      return window.removeEventListener('message', handleMessage);
+    };
+  }, [isIframe]);
+  return {
+    parentBreakpoints: parentBreakpoints
+  };
+};

package/react/QualificationIconStack/Readme.md

@@ -1,14 +0,0 @@
-```jsx
-import QualificationIconStack from 'cozy-ui/transpiled/react/QualificationIconStack'
-
-;
-
-<>
-  <QualificationIconStack className="u-mr-1" />
-  <QualificationIconStack className="u-mr-1" qualification="isp_invoice" />
-  <QualificationIconStack className="u-mr-1" qualification="phone_invoice" />
-  <QualificationIconStack className="u-mr-1" qualification="family_record_book" />
-  <QualificationIconStack className="u-mr-1" theme="identity" />
-  <QualificationIconStack theme="transport" />
-</>
-```