cozy-sharing 29.0.0 → 30.0.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [30.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@29.0.0...cozy-sharing@30.0.0) (2026-03-24)
+
+### Features
+
+- Upgrade cozy-ui and cozy-ui-plus in cozy-search and cozy-sharing ([f5fd252](https://github.com/cozy/cozy-libs/commit/f5fd2520150e276c8b55feeb1b994ba33d0a114b))
+
+### BREAKING CHANGES
+
+- You must have `cozy-ui >= 138.1.0 and cozy-ui-plus >= 6.0.0`
+
 # [29.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@28.11.3...cozy-sharing@29.0.0) (2026-03-24)
 
 ### Features

package/dist/components/SharingBanner/components/PublicBanner.js

@@ -4,8 +4,10 @@ import React from 'react';
 import snarkdown from 'snarkdown';
 import { useClient } from 'cozy-client';
 import flag from 'cozy-flags';
-import Banner from 'cozy-ui/transpiled/react/Banner';
+import Alert from 'cozy-ui/transpiled/react/Alert';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Button from 'cozy-ui/transpiled/react/Buttons';
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'twake-i18n';
 import CozyHomeLinkIcon from './CozyHomeLinkIcon';
 var styles = {
@@ -36,7 +38,7 @@ var PublicBannerCozyToCozyContent = function PublicBannerCozyToCozyContent(_ref)
       userBoldName = _beginning$1$split$1$2[0],
       ending = _beginning$1$split$1$2[1];
 
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(Avatar, {
     className: styles['bannermarkdown']
   }, beginning[0], /*#__PURE__*/React.createElement("img", {
     src: avatarURL,
@@ -61,6 +63,9 @@ var SharingBannerCozyToCozy = function SharingBannerCozyToCozy(_ref2) {
   var _useI18n2 = useI18n(),
       t = _useI18n2.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   var action = function action() {
     return openExternalLink(addSharingLink);
   };
@@ -78,24 +83,23 @@ var SharingBannerCozyToCozy = function SharingBannerCozyToCozy(_ref2) {
     icon: 'to-the-cloud',
     action: action
   };
-  return /*#__PURE__*/React.createElement(Banner, {
-    bgcolor: "var(--defaultBackgroundColor)",
-    text: /*#__PURE__*/React.createElement(PublicBannerCozyToCozyContent, {
-      sharing: sharing
-    }),
-    buttonOne: /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement(Alert, {
+    color: "var(--defaultBackgroundColor)",
+    square: true,
+    block: isMobile,
+    action: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
       variant: "text",
       label: buttonOne.label,
       icon: buttonOne.icon,
       onClick: buttonOne.action
-    }),
-    buttonTwo: /*#__PURE__*/React.createElement(Button, {
+    }), /*#__PURE__*/React.createElement(Button, {
       variant: "text",
       label: t('Share.banner.close'),
       onClick: onClose
-    }),
-    inline: true
-  });
+    }))
+  }, /*#__PURE__*/React.createElement(PublicBannerCozyToCozyContent, {
+    sharing: sharing
+  }));
 };
 
 var SharingBannerByLinkText = function SharingBannerByLinkText() {
@@ -122,6 +126,9 @@ var SharingBannerByLink = function SharingBannerByLink(_ref3) {
   var _useI18n4 = useI18n(),
       t = _useI18n4.t;
 
+  var _useBreakpoints2 = useBreakpoints(),
+      isMobile = _useBreakpoints2.isMobile;
+
   var HOME_LINK_HREF = flag('signup.url');
   var canNotCreateTwakeFromPublicSharingLink = flag('drive.twake-creation-from-public-sharing.disabled');
 
@@ -129,10 +136,11 @@ var SharingBannerByLink = function SharingBannerByLink(_ref3) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Banner, {
-    bgcolor: "var(--defaultBackgroundColor)",
-    text: /*#__PURE__*/React.createElement(SharingBannerByLinkText, null),
-    buttonOne: /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement(Alert, {
+    color: "var(--defaultBackgroundColor)",
+    square: true,
+    block: isMobile,
+    action: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
       component: "a",
       variant: "text",
       label: t('Share.create-cozy', {
@@ -140,14 +148,12 @@ var SharingBannerByLink = function SharingBannerByLink(_ref3) {
       }),
       icon: CozyHomeLinkIcon,
       href: HOME_LINK_HREF
-    }),
-    buttonTwo: /*#__PURE__*/React.createElement(Button, {
+    }), /*#__PURE__*/React.createElement(Button, {
       variant: "text",
       label: t('Share.banner.close'),
       onClick: onClose
-    }),
-    inline: true
-  });
+    }))
+  }, /*#__PURE__*/React.createElement(SharingBannerByLinkText, null));
 };
 
 SharingBannerCozyToCozy.propTypes = {

package/dist/components/SharingBanner/components/PublicBanner.spec.js

@@ -1,6 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { useClient } from 'cozy-client';
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'twake-i18n';
 import { SharingBannerCozyToCozy } from './PublicBanner';
 jest.mock('twake-i18n');
@@ -33,12 +34,12 @@ describe('PublicBanner', function () {
       }
     }; // When
 
-    var _render = render( /*#__PURE__*/React.createElement(SharingBannerCozyToCozy, {
+    var _render = render( /*#__PURE__*/React.createElement(BreakpointsProvider, null, /*#__PURE__*/React.createElement(SharingBannerCozyToCozy, {
       sharing: sharing,
       isSharingShortcutCreated: true,
       addSharingLink: "discoveryLink",
       onClose: function onClose() {}
-    })),
+    }))),
         container = _render.container; // Then
 
 

package/dist/styles/publicBanner.styl

@@ -1,10 +1,10 @@
-@require 'components/avatar'
-@require 'components/circle'
 .bannermarkdown
     display inline-block
+    background-color var(--paleGrey)
+    color var(--silver)
+    position relative
+
     img
-        @extend $avatar
-        @extend $circle
         width rem(16)
         height rem(16)
         min-width rem(16)

package/dist/stylesheet.css

@@ -518,39 +518,18 @@ input[type=text] {
 }
 /*  imported from publicBanner.styl  */
 
-.publicBanner__bannermarkdown___1dR1E img {
+.publicBanner__bannermarkdown___1dR1E {
+  display: inline-block;
   background-color: var(--paleGrey);
   color: var(--silver);
   position: relative;
 }
-.publicBanner__bannermarkdown___1dR1E img svg {
-  width: 50%;
-  height: 50%;
-}
-.publicBanner__bannermarkdown___1dR1E img {
-  --circleSize: 2.5rem;
-  width: var(--circleSize);
-  height: var(--circleSize);
-  min-width: var(--circleSize);
-  min-height: var(--circleSize);
-  font-size: calc(var(--circleSize) / 2.28);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  overflow: hidden;
-  background-color: var(--dodgerBlue);
-  color: var(--white);
-}
-.publicBanner__bannermarkdown___1dR1E {
-  display: inline-block;
-}
 .publicBanner__bannermarkdown___1dR1E img {
-  width: 1rem;
-  height: 1rem;
-  min-width: 1rem;
-  min-height: 1rem;
-  font-size: 0.438rem;
+  width: rem(16);
+  height: rem(16);
+  min-width: rem(16);
+  min-height: rem(16);
+  font-size: rem(7);
   vertical-align: text-bottom;
 }
 /*  imported from tooltip.styl  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "29.0.0",
+  "version": "30.0.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -58,7 +58,7 @@
     "cozy-device-helper": "^3.7.1",
     "cozy-intent": "^2.31.1",
     "cozy-minilog": "^3.10.1",
-    "cozy-ui": "^135.0.0",
+    "cozy-ui": "^138.1.0",
     "cozy-ui-plus": "^6.0.0",
     "jest": "30.3.0",
     "jest-environment-jsdom": "30.3.0",
@@ -74,8 +74,8 @@
     "cozy-flags": ">=4.8.1",
     "cozy-intent": ">=2.29.1",
     "cozy-minilog": ">=3.9.1",
-    "cozy-ui": ">=135.0.0",
-    "cozy-ui-plus": ">=1.2.0",
+    "cozy-ui": ">=138.1.0",
+    "cozy-ui-plus": ">=6.0.0",
     "prop-types": ">=15.7.2",
     "react": ">=16.12.0",
     "react-router": ">=5.0.1",
@@ -84,5 +84,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "4c152ef7f2acafb450df245f5ce58638cbdb6be3"
+  "gitHead": "9655a128354d92bbb108ed6ec830704dd158d48a"
 }

package/src/components/SharingBanner/components/PublicBanner.jsx

@@ -4,8 +4,10 @@ import snarkdown from 'snarkdown'
 
 import { useClient } from 'cozy-client'
 import flag from 'cozy-flags'
-import Banner from 'cozy-ui/transpiled/react/Banner'
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Button from 'cozy-ui/transpiled/react/Buttons'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'twake-i18n'
 
 import CozyHomeLinkIcon from './CozyHomeLinkIcon'
@@ -32,11 +34,11 @@ const PublicBannerCozyToCozyContent = ({ sharing }) => {
     .split('</strong>')
 
   return (
-    <span className={styles['bannermarkdown']}>
+    <Avatar className={styles['bannermarkdown']}>
       {beginning[0]}
       <img src={avatarURL} alt="avatar" /> <strong>{userBoldName}</strong>
       {ending}
-    </span>
+    </Avatar>
   )
 }
 PublicBannerCozyToCozyContent.propTypes = {
@@ -52,6 +54,7 @@ const SharingBannerCozyToCozy = ({
   onClose
 }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   const action = () => openExternalLink(addSharingLink)
   const buttonOne = isSharingShortcutCreated
@@ -66,26 +69,28 @@ const SharingBannerCozyToCozy = ({
         action
       }
   return (
-    <Banner
-      bgcolor="var(--defaultBackgroundColor)"
-      text={<PublicBannerCozyToCozyContent sharing={sharing} />}
-      buttonOne={
-        <Button
-          variant="text"
-          label={buttonOne.label}
-          icon={buttonOne.icon}
-          onClick={buttonOne.action}
-        />
-      }
-      buttonTwo={
-        <Button
-          variant="text"
-          label={t('Share.banner.close')}
-          onClick={onClose}
-        />
+    <Alert
+      color="var(--defaultBackgroundColor)"
+      square
+      block={isMobile}
+      action={
+        <>
+          <Button
+            variant="text"
+            label={buttonOne.label}
+            icon={buttonOne.icon}
+            onClick={buttonOne.action}
+          />
+          <Button
+            variant="text"
+            label={t('Share.banner.close')}
+            onClick={onClose}
+          />
+        </>
       }
-      inline
-    />
+    >
+      <PublicBannerCozyToCozyContent sharing={sharing} />
+    </Alert>
   )
 }
 
@@ -111,6 +116,7 @@ const SharingBannerByLinkText = () => {
 
 const SharingBannerByLink = ({ onClose }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   const HOME_LINK_HREF = flag('signup.url')
   const canNotCreateTwakeFromPublicSharingLink = flag(
@@ -122,27 +128,29 @@ const SharingBannerByLink = ({ onClose }) => {
   }
 
   return (
-    <Banner
-      bgcolor="var(--defaultBackgroundColor)"
-      text={<SharingBannerByLinkText />}
-      buttonOne={
-        <Button
-          component="a"
-          variant="text"
-          label={t('Share.create-cozy', { smart_count: 2 })}
-          icon={CozyHomeLinkIcon}
-          href={HOME_LINK_HREF}
-        />
+    <Alert
+      color="var(--defaultBackgroundColor)"
+      square
+      block={isMobile}
+      action={
+        <>
+          <Button
+            component="a"
+            variant="text"
+            label={t('Share.create-cozy', { smart_count: 2 })}
+            icon={CozyHomeLinkIcon}
+            href={HOME_LINK_HREF}
+          />
+          <Button
+            variant="text"
+            label={t('Share.banner.close')}
+            onClick={onClose}
+          />
+        </>
       }
-      buttonTwo={
-        <Button
-          variant="text"
-          label={t('Share.banner.close')}
-          onClick={onClose}
-        />
-      }
-      inline
-    />
+    >
+      <SharingBannerByLinkText />
+    </Alert>
   )
 }
 SharingBannerCozyToCozy.propTypes = {

package/src/components/SharingBanner/components/PublicBanner.spec.jsx

@@ -2,6 +2,7 @@ import { render } from '@testing-library/react'
 import React from 'react'
 
 import { useClient } from 'cozy-client'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'twake-i18n'
 
 import { SharingBannerCozyToCozy } from './PublicBanner'
@@ -31,12 +32,14 @@ describe('PublicBanner', () => {
 
     // When
     const { container } = render(
-      <SharingBannerCozyToCozy
-        sharing={sharing}
-        isSharingShortcutCreated={true}
-        addSharingLink="discoveryLink"
-        onClose={() => {}}
-      />
+      <BreakpointsProvider>
+        <SharingBannerCozyToCozy
+          sharing={sharing}
+          isSharingShortcutCreated={true}
+          addSharingLink="discoveryLink"
+          onClose={() => {}}
+        />
+      </BreakpointsProvider>
     )
 
     // Then

package/src/styles/publicBanner.styl

@@ -1,10 +1,10 @@
-@require 'components/avatar'
-@require 'components/circle'
 .bannermarkdown
     display inline-block
+    background-color var(--paleGrey)
+    color var(--silver)
+    position relative
+
     img
-        @extend $avatar
-        @extend $circle
         width rem(16)
         height rem(16)
         min-width rem(16)