@linagora/twake-mui 17.1.0 → 18.1.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# @linagora/twake-mui [18.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.0.0...@linagora/twake-mui@18.1.0) (2026-10-22)
+
+
+### Features
+
+* **twake-mui:** Lighten the Backdrop to 12% black in light theme ([48ea234](https://github.com/linagora/twake-ui/commit/48ea234e6ccd1d69cc6164a291e0d5c4976c1897))
+
+# @linagora/twake-mui [18.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@17.1.0...@linagora/twake-mui@18.0.0) (2026-10-22)
+
+
+* feat(twake-mui)!: Remove encryptedUrl from the download action ([bf7480f](https://github.com/linagora/twake-ui/commit/bf7480f37d89b166850cc50fdf566b421eef00cb))
+
+
+### Features
+
+* **twake-mui:** Migrate ConfirmDialogProvider from cozy-ui ([eb9de6d](https://github.com/linagora/twake-ui/commit/eb9de6d3ac69b83455d127bb44f826f26af9e2ec))
+* **twake-mui:** Migrate SelectionProvider from cozy-ui ([50b91f4](https://github.com/linagora/twake-ui/commit/50b91f446ca91c498514debe1034010db2ac5557))
+
+
+### BREAKING CHANGES
+
+* `download` no longer accepts `encryptedUrl` and
+`DownloadFileOptions` no longer has `url`. Apps that downloaded an
+encrypted file through this option must pass its URL to their own
+`downloadFile` implementation instead.
+
 # @linagora/twake-mui [17.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@17.0.0...@linagora/twake-mui@17.1.0) (2026-10-22)
 
 

package/dist/components/ActionsMenu/Actions/download.d.ts

@@ -3,13 +3,11 @@ import { Action, ActionDocument } from '../types';
 export interface DownloadFileOptions<Client> {
     client: Client;
     file: ActionDocument;
-    url?: string;
     webviewIntent?: WebviewService;
     driveId?: string;
 }
 export interface DownloadActionOptions<Client> {
     client: Client;
-    encryptedUrl?: string;
     downloadFile: (options: DownloadFileOptions<Client>) => unknown;
 }
-export declare const download: <Client>({ client, encryptedUrl, downloadFile }: DownloadActionOptions<Client>) => Action;
+export declare const download: <Client>({ client, downloadFile }: DownloadActionOptions<Client>) => Action;

package/dist/components/ActionsMenu/Actions/download.js

@@ -1,7 +1,7 @@
 import { Download } from '@linagora/twake-icons';
 import { makeAction } from './makeAction';
 import { getActionsI18n } from '../locales';
-export const download = ({ client, encryptedUrl, downloadFile }) => {
+export const download = ({ client, downloadFile }) => {
     const { t } = getActionsI18n();
     return makeAction({
         name: 'download',
@@ -10,7 +10,6 @@ export const download = ({ client, encryptedUrl, downloadFile }) => {
         action: (docs, { webviewIntent, driveId }) => downloadFile({
             client,
             file: docs[0],
-            url: encryptedUrl,
             webviewIntent,
             driveId
         })

package/dist/components/NavItem/NavBadge.d.ts

@@ -1,2 +1,2 @@
 import { Theme } from '@mui/material/styles';
-export declare const NavBadge: import("@emotion/styled").StyledComponent<import("@mui/material").BadgeOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "color" | "className" | "max" | "children" | "classes" | "sx" | "variant" | "slotProps" | "slots" | "anchorOrigin" | "badgeContent" | "invisible" | "overlap" | "showZero"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const NavBadge: import("@emotion/styled").StyledComponent<import("@mui/material").BadgeOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "color" | "className" | "max" | "children" | "classes" | "sx" | "variant" | "slotProps" | "slots" | "invisible" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;

package/dist/index.d.ts

@@ -78,10 +78,12 @@ export { default as NestedSelectModal } from './components/NestedSelect/NestedSe
 export { default as NestedSelectBottomSheet } from './components/NestedSelect/NestedSelectBottomSheet';
 export { default as NestedSelectResponsive } from './components/NestedSelect/NestedSelectResponsive';
 export { default as PointerAlert } from './components/PointerAlert';
-export type { AlertProviderProps } from './providers/AlertProvider';
-export type { AlertContextValue, ShowAlert, ShowAlertOptions } from './providers/AlertProvider/useAlert';
 export { default as AlertProvider } from './providers/AlertProvider';
 export { useAlert } from './providers/AlertProvider/useAlert';
+export { default as ConfirmDialogProvider } from './providers/ConfirmDialogProvider';
+export { useConfirmDialog } from './providers/ConfirmDialogProvider/useConfirmDialog';
+export { default as SelectionProvider } from './providers/SelectionProvider';
+export { useSelection } from './providers/SelectionProvider/useSelection';
 export { default as ProgressionBanner } from './components/ProgressionBanner';
 export { default as Tabs } from './components/Tabs';
 export { default as Switch } from './components/Switch';
@@ -160,6 +162,12 @@ export type { DialogCloseButtonProps } from './components/Dialogs/DialogCloseBut
 export type { DialogBackButtonProps } from './components/Dialogs/DialogBackButton';
 export type { DialogCloseReason, DialogLayout, DialogLayoutComponentsProps, DialogLayoutProps } from './components/Dialogs/useDialogLayout';
 export type { PointerAlertProps, PointerAlertDirection } from './components/PointerAlert';
+export type { AlertProviderProps } from './providers/AlertProvider';
+export type { AlertContextValue, ShowAlert, ShowAlertOptions } from './providers/AlertProvider/useAlert';
+export type { ConfirmDialogProviderProps } from './providers/ConfirmDialogProvider';
+export type { ConfirmDialogContextValue, ShowConfirmDialogOptions } from './providers/ConfirmDialogProvider/useConfirmDialog';
+export type { SelectionProviderProps } from './providers/SelectionProvider';
+export type { SelectionContextValue } from './providers/SelectionProvider/useSelection';
 export type { ProgressionBannerProps } from './components/ProgressionBanner';
 export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './components/Empty';
 export type { DropdownButtonProps } from './components/DropdownButton';

package/dist/index.js

@@ -83,6 +83,10 @@ export { default as NestedSelectResponsive } from './components/NestedSelect/Nes
 export { default as PointerAlert } from './components/PointerAlert';
 export { default as AlertProvider } from './providers/AlertProvider';
 export { useAlert } from './providers/AlertProvider/useAlert';
+export { default as ConfirmDialogProvider } from './providers/ConfirmDialogProvider';
+export { useConfirmDialog } from './providers/ConfirmDialogProvider/useConfirmDialog';
+export { default as SelectionProvider } from './providers/SelectionProvider';
+export { useSelection } from './providers/SelectionProvider/useSelection';
 export { default as ProgressionBanner } from './components/ProgressionBanner';
 export { default as Tabs } from './components/Tabs';
 export { default as Switch } from './components/Switch';

package/dist/lib/overrides.js

@@ -424,6 +424,23 @@ export const overrides = {
             }
         }
     },
+    MuiBackdrop: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                variants: [
+                    {
+                        props: { invisible: false },
+                        style: {
+                            backgroundColor: alpha(theme.palette.common.black, 0.12),
+                            ...theme.applyStyles('dark', {
+                                backgroundColor: alpha(theme.palette.common.black, 0.5)
+                            })
+                        }
+                    }
+                ]
+            })
+        }
+    },
     MuiDialog: {
         defaultProps: { disableEnforceFocus: true },
         styleOverrides: {

package/dist/providers/ConfirmDialogProvider/ConfirmDialogProvider.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ShowConfirmDialogOptions } from './useConfirmDialog';
+type StoryArgs = Pick<ShowConfirmDialogOptions, 'title' | 'content'>;
+declare const meta: Meta<StoryArgs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/providers/ConfirmDialogProvider/ConfirmDialogProvider.stories.js

@@ -0,0 +1,31 @@
+import { Button } from '@mui/material';
+import React from 'react';
+import ConfirmDialogProvider from './index';
+import { useConfirmDialog } from './useConfirmDialog';
+const meta = {
+    title: 'ConfirmDialogProvider',
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        title: { control: 'text' },
+        content: { control: 'text' }
+    }
+};
+export default meta;
+const ShowConfirmDialogButton = ({ args }) => {
+    const { showConfirmDialog, closeConfirmDialog } = useConfirmDialog();
+    return (React.createElement(Button, { onClick: () => showConfirmDialog({
+            ...args,
+            actions: (React.createElement(React.Fragment, null,
+                React.createElement(Button, { variant: "outlined", onClick: closeConfirmDialog }, "Cancel"),
+                React.createElement(Button, null, "Ok")))
+        }) }, "Show ConfirmDialog"));
+};
+export const Default = {
+    args: {
+        title: 'Title of the ConfirmDialog',
+        content: 'Content of the ConfirmDialog'
+    },
+    render: args => (React.createElement(ConfirmDialogProvider, null,
+        React.createElement(ShowConfirmDialogButton, { args: args })))
+};

package/dist/providers/ConfirmDialogProvider/index.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+export interface ConfirmDialogProviderProps {
+    children?: ReactNode;
+}
+declare const ConfirmDialogProvider: React.FC<ConfirmDialogProviderProps>;
+export default ConfirmDialogProvider;

package/dist/providers/ConfirmDialogProvider/index.js

@@ -0,0 +1,15 @@
+import React, { useMemo, useState } from 'react';
+import { ConfirmDialogContext } from './useConfirmDialog';
+import ConfirmDialog from '../../components/Dialogs/ConfirmDialog';
+const ConfirmDialogProvider = ({ children }) => {
+    const [state, setState] = useState({ open: false });
+    const { open, ...confirmDialogProps } = state;
+    const value = useMemo(() => ({
+        showConfirmDialog: (options) => setState({ ...options, open: true }),
+        closeConfirmDialog: () => setState(current => ({ ...current, open: false }))
+    }), []);
+    return (React.createElement(ConfirmDialogContext.Provider, { value: value },
+        children,
+        open && (React.createElement(ConfirmDialog, { open: true, onClose: value.closeConfirmDialog, ...confirmDialogProps }))));
+};
+export default ConfirmDialogProvider;

package/dist/providers/ConfirmDialogProvider/useConfirmDialog.d.ts

@@ -0,0 +1,8 @@
+import type { ConfirmDialogProps } from '../../components/Dialogs/ConfirmDialog';
+export type ShowConfirmDialogOptions = Omit<ConfirmDialogProps, 'open'>;
+export interface ConfirmDialogContextValue {
+    showConfirmDialog: (options: ShowConfirmDialogOptions) => void;
+    closeConfirmDialog: () => void;
+}
+export declare const ConfirmDialogContext: import("react").Context<ConfirmDialogContextValue | null>;
+export declare const useConfirmDialog: () => ConfirmDialogContextValue;

package/dist/providers/ConfirmDialogProvider/useConfirmDialog.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const ConfirmDialogContext = createContext(null);
+export const useConfirmDialog = () => {
+    const context = useContext(ConfirmDialogContext);
+    if (!context) {
+        throw new Error('useConfirmDialog must be used within a ConfirmDialogProvider');
+    }
+    return context;
+};

package/dist/providers/SelectionProvider/SelectionProvider.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import SelectionProvider from './index';
+declare const meta: Meta<typeof SelectionProvider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/providers/SelectionProvider/SelectionProvider.stories.js

@@ -0,0 +1,25 @@
+import { Button, Stack, Typography } from '@mui/material';
+import React from 'react';
+import SelectionProvider from './index';
+import { useSelection } from './useSelection';
+const meta = {
+    title: 'SelectionProvider',
+    component: SelectionProvider,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs']
+};
+export default meta;
+const SelectionExample = () => {
+    const { selectedItemsId, addSelectedItem, removeSelectedItem } = useSelection();
+    return (React.createElement(Stack, { spacing: 1 },
+        React.createElement(Typography, null,
+            "selectedItemsId : ",
+            JSON.stringify(selectedItemsId)),
+        React.createElement(Stack, { direction: "row", spacing: 1 },
+            React.createElement(Button, { onClick: () => addSelectedItem('01') }, "Add Item"),
+            React.createElement(Button, { onClick: () => removeSelectedItem('01') }, "Remove Item"))));
+};
+export const Default = {
+    render: () => (React.createElement(SelectionProvider, null,
+        React.createElement(SelectionExample, null)))
+};

package/dist/providers/SelectionProvider/index.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+export interface SelectionProviderProps {
+    children?: ReactNode;
+}
+/** Shares the ids of the selected items with its children */
+declare const SelectionProvider: React.FC<SelectionProviderProps>;
+export default SelectionProvider;

package/dist/providers/SelectionProvider/index.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { SelectionContext } from './useSelection';
+/** Shares the ids of the selected items with its children */
+const SelectionProvider = ({ children }) => {
+    const [selectedItemsId, setSelectedItemsId] = useState([]);
+    const isSelectedItem = (itemId) => selectedItemsId.includes(itemId);
+    const addSelectedItem = (itemId) => setSelectedItemsId(current => [...current, itemId]);
+    const removeSelectedItem = (itemId) => setSelectedItemsId(current => current.filter(id => id !== itemId));
+    const toggleSelectedItem = (itemId) => isSelectedItem(itemId)
+        ? removeSelectedItem(itemId)
+        : addSelectedItem(itemId);
+    const selectAll = (itemsId) => setSelectedItemsId(itemsId);
+    const unselectAll = () => setSelectedItemsId([]);
+    const isSelectedAllItems = (itemsId) => itemsId.length === selectedItemsId.length && itemsId.every(isSelectedItem);
+    const toggleSelectAllItems = (itemsId) => isSelectedAllItems(itemsId) ? unselectAll() : selectAll(itemsId);
+    return (React.createElement(SelectionContext.Provider, { value: {
+            selectedItemsId,
+            addSelectedItem,
+            removeSelectedItem,
+            toggleSelectedItem,
+            selectAll,
+            toggleSelectAllItems,
+            isSelectedItem,
+            isSelectionEnabled: selectedItemsId.length > 0,
+            isSelectedAllItems
+        } }, children));
+};
+export default SelectionProvider;

package/dist/providers/SelectionProvider/useSelection.d.ts

@@ -0,0 +1,13 @@
+export interface SelectionContextValue {
+    selectedItemsId: string[];
+    addSelectedItem: (itemId: string) => void;
+    removeSelectedItem: (itemId: string) => void;
+    toggleSelectedItem: (itemId: string) => void;
+    selectAll: (itemsId: string[]) => void;
+    toggleSelectAllItems: (itemsId: string[]) => void;
+    isSelectedItem: (itemId: string) => boolean;
+    isSelectionEnabled: boolean;
+    isSelectedAllItems: (itemsId: string[]) => boolean;
+}
+export declare const SelectionContext: import("react").Context<SelectionContextValue | null>;
+export declare const useSelection: () => SelectionContextValue;

package/dist/providers/SelectionProvider/useSelection.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const SelectionContext = createContext(null);
+export const useSelection = () => {
+    const context = useContext(SelectionContext);
+    if (!context) {
+        throw new Error('useSelection must be used within a SelectionProvider');
+    }
+    return context;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "17.1.0",
+  "version": "18.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",