@linagora/twake-mui 17.0.0 → 17.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @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)
+
+
+### Features
+
+* **twake-mui:** Migrate NestedSelect from cozy-ui ([112d694](https://github.com/linagora/twake-ui/commit/112d69461cab48248b088c1da2c722b18d2dbffc))
+
 # @linagora/twake-mui [17.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@16.3.0...@linagora/twake-mui@17.0.0) (2026-10-22)
 
 

package/dist/components/NestedSelect/ItemRow.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { NestedSelectItem, NestedSelectRadioPosition } from './types';
+export interface ItemRowProps {
+    item: NestedSelectItem;
+    onClick: (item: NestedSelectItem) => void;
+    isSelected: boolean;
+    radioPosition?: NestedSelectRadioPosition;
+    isLast?: boolean;
+    ellipsis?: boolean;
+    noDivider?: boolean;
+}
+declare const ItemRow: ({ item, onClick, isSelected, radioPosition, isLast, ellipsis, noDivider }: ItemRowProps) => React.ReactElement;
+export default ItemRow;

package/dist/components/NestedSelect/ItemRow.js

@@ -0,0 +1,28 @@
+import { Icon, Right } from '@linagora/twake-icons';
+import { Divider, ListItemIcon, Radio, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import React from 'react';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import ListItemButton from '../ListItemButton';
+import ListItemText from '../ListItemText';
+const ItemRow = ({ item, onClick, isSelected, radioPosition, isLast, ellipsis, noDivider }) => {
+    const { isDesktop } = useBreakpoints();
+    const theme = useTheme();
+    const hasChildren = (item.children?.length ?? 0) > 0;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ListItemButton, { gutters: isDesktop ? 'double' : 'default', ellipsis: ellipsis, onClick: () => onClick(item) },
+            radioPosition === 'left' && (React.createElement(ListItemIcon, null,
+                React.createElement(Radio, { readOnly: true, checked: isSelected }))),
+            item.icon && React.createElement(ListItemIcon, null, item.icon),
+            React.createElement(ListItemText, { primary: item.title, secondary: item.description }),
+            hasChildren && (React.createElement(ListItemIcon, null,
+                React.createElement(Icon, { icon: Right, color: theme.vars?.palette.text.secondary }))),
+            radioPosition === 'right' && !hasChildren && (React.createElement("div", { className: "u-flex u-flex-items-center" },
+                item.info && (React.createElement(Typography, { variant: "body2", color: "textSecondary" }, item.info)),
+                React.createElement(ListItemIcon, null,
+                    React.createElement(Radio, { readOnly: true, edge: "end", checked: isSelected })))),
+            radioPosition === 'right' && item.action && (React.createElement(Divider, { orientation: "vertical", flexItem: true })),
+            item.action?.Component({ item, ...item.action.props })),
+        !noDivider && !isLast && React.createElement(Divider, null)));
+};
+export default ItemRow;

package/dist/components/NestedSelect/NestedSelect.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+interface ExampleArgs {
+    noTitle: boolean;
+    noDivider: boolean;
+    leftRadio: boolean;
+    withSearch: boolean;
+    withEllipsis: boolean;
+    withHeaders: boolean;
+    canSelectParent: boolean;
+    withFocus: boolean;
+}
+declare const Example: ({ noTitle, noDivider, leftRadio, withSearch, withEllipsis, withHeaders, canSelectParent, withFocus }: ExampleArgs) => React.ReactElement;
+declare const meta: Meta<typeof Example>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Screenshot: Story;
+export declare const ResponsiveScreenshot: Story;

package/dist/components/NestedSelect/NestedSelect.stories.js

@@ -0,0 +1,149 @@
+import { Icon, Setting } from '@linagora/twake-icons';
+import { Alert, Button, IconButton, ListItemSecondaryAction, Paper, Stack, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import NestedSelectResponsive from './NestedSelectResponsive';
+import NestedSelect from './index';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+import Avatar from '../Avatar';
+const LONG_TEXT = 'Augusta Ada King-Noel, Countess of Lovelace, was an English mathematician and writer, chiefly known for her work on Charles Babbage proposed mechanical general-purpose computer.';
+const letterOption = (letter, description, key) => ({
+    id: key ? `${letter}_${key}` : letter,
+    key,
+    title: letter,
+    description,
+    icon: React.createElement(Avatar, { color: "sugarCoral" }, letter[0])
+});
+const SettingAction = ({ item, onClick }) => (React.createElement(ListItemSecondaryAction, null,
+    React.createElement(IconButton, { "aria-label": "Settings", onClick: () => onClick(item) },
+        React.createElement(Icon, { icon: Setting }))));
+const makeOptions = ({ withHeaders = false, focusedId } = {}) => ({
+    focusedId,
+    header: withHeaders && (React.createElement(Alert, { className: "u-mt-1 u-mh-1", icon: false }, "This is a header for options")),
+    childrenHeader: withHeaders
+        ? (level) => level === 1 ? (React.createElement(Alert, { className: "u-mt-1 u-mh-1" }, "This is specific option header for first children")) : (React.createElement(Alert, { className: "u-mt-1 u-mh-1", icon: false, severity: "secondary" }, "This is specific option header for other children"))
+        : undefined,
+    children: [
+        { ...letterOption('A', 'is for Apple'), info: 'info' },
+        {
+            ...letterOption('B', 'is for Balloon'),
+            children: [
+                {
+                    ...letterOption('B1'),
+                    children: [letterOption('B1a'), letterOption('B1b')]
+                },
+                {
+                    ...letterOption('B2'),
+                    header: withHeaders && (React.createElement(Alert, { className: "u-mt-1 u-mh-1", icon: false, severity: "success" }, "This is overriden specific option!")),
+                    children: [letterOption('B2a'), letterOption('B2b')]
+                },
+                letterOption('B3')
+            ]
+        },
+        {
+            ...letterOption('C', 'is for crayon'),
+            action: {
+                Component: SettingAction,
+                props: { onClick: () => undefined }
+            }
+        },
+        letterOption('D', 'is for Drums !'),
+        letterOption(`E. A very long option, that should be ellipsed. ${LONG_TEXT}`, `Its description is also very long and will be ellipsed. ${LONG_TEXT}`),
+        letterOption('F'),
+        letterOption('G'),
+        letterOption('H', 'for hero', 'hero'),
+        letterOption('H', 'for helicopter', 'helicopter'),
+        letterOption('I'),
+        letterOption('J'),
+        letterOption('K'),
+        letterOption('L'),
+        letterOption('M'),
+        letterOption('N')
+    ]
+});
+const makeSearchOptions = () => ({
+    placeholderSearch: 'Placeholder Search',
+    noDataLabel: 'No Data Found',
+    onSearch: value => (makeOptions().children ?? []).filter(option => typeof option.description === 'string' &&
+        option.description.toLowerCase().includes(value.toLowerCase()))
+});
+const transformParentItem = (item) => ({
+    ...item,
+    title: React.createElement(React.Fragment, null,
+        "All of ",
+        item.title)
+});
+const Example = ({ noTitle, noDivider, leftRadio, withSearch, withEllipsis, withHeaders, canSelectParent, withFocus }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItem, setSelectedItem] = useState(letterOption('A'));
+    const handleSelect = (item) => {
+        setSelectedItem(item);
+        setIsOpen(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Typography, { className: "u-mb-1" },
+            "Selected item: ",
+            selectedItem.title,
+            " ",
+            selectedItem.description),
+        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Select"),
+        isOpen && (React.createElement(NestedSelectResponsive, { canSelectParent: canSelectParent, onSelect: handleSelect, onClose: () => setIsOpen(false), isSelected: item => item.id === selectedItem.id, options: makeOptions({
+                withHeaders,
+                focusedId: withFocus ? selectedItem.id : undefined
+            }), radioPosition: leftRadio ? 'left' : 'right', title: noTitle ? undefined : 'Please select letter', transformParentItem: transformParentItem, searchOptions: withSearch ? makeSearchOptions() : undefined, ellipsis: withEllipsis, noDivider: noDivider }))));
+};
+const meta = {
+    title: 'NestedSelect',
+    component: Example,
+    tags: ['autodocs'],
+    args: {
+        noTitle: false,
+        noDivider: false,
+        leftRadio: false,
+        withSearch: false,
+        withEllipsis: true,
+        withHeaders: false,
+        canSelectParent: true,
+        withFocus: false
+    },
+    argTypes: {
+        noTitle: { control: 'boolean' },
+        noDivider: { control: 'boolean' },
+        leftRadio: { control: 'boolean' },
+        withSearch: { control: 'boolean' },
+        withEllipsis: { control: 'boolean' },
+        withHeaders: { control: 'boolean' },
+        canSelectParent: { control: 'boolean' },
+        withFocus: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {};
+const Section = ({ label, ...props }) => (React.createElement("section", null,
+    React.createElement("h3", null, label),
+    React.createElement(Paper, { variant: "outlined" },
+        React.createElement(NestedSelect, { onSelect: () => undefined, isSelected: item => item.title === 'A' || item.title === 'B1a', options: {
+                ...makeOptions(),
+                children: makeOptions().children?.slice(0, 5)
+            }, title: "Please select letter", transformParentItem: transformParentItem, ...props }))));
+// Visual Regression - Combined view for Argos testing
+export const Screenshot = {
+    tags: ['argos', '!autodocs'],
+    render: () => (React.createElement(Stack, { spacing: 4 },
+        React.createElement(Section, { label: "Default" }),
+        React.createElement(Section, { label: "Left radio", radioPosition: "left" }),
+        React.createElement(Section, { label: "No divider", noDivider: true }),
+        React.createElement(Section, { label: "No ellipsis", ellipsis: false }),
+        React.createElement(Section, { label: "With search", searchOptions: makeSearchOptions() }),
+        React.createElement(Section, { label: "With headers", options: makeOptions({ withHeaders: true }) }),
+        React.createElement(Section, { label: "Focused on B1a, with selectable parent", canSelectParent: true, options: makeOptions({ withHeaders: true, focusedId: 'B1a' }) })))
+};
+const ResponsiveExample = () => {
+    const { isMobile } = useBreakpoints();
+    return (React.createElement(NestedSelectResponsive, { radioPosition: isMobile ? 'left' : 'right', canSelectParent: true, onSelect: () => undefined, isSelected: item => item.title === 'C', options: makeOptions(), title: "Please select letter", transformParentItem: transformParentItem, componentsProps: { bottomsheet: { skipAnimation: true } }, onClose: () => undefined }));
+};
+// Visual Regression - dialog on desktop, bottom sheet on mobile
+export const ResponsiveScreenshot = {
+    tags: ['argos', '!autodocs'],
+    parameters: { layout: 'fullscreen' },
+    render: () => React.createElement(ResponsiveExample, null)
+};

package/dist/components/NestedSelect/NestedSelectBottomSheet.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { NestedSelectProps } from './types';
+import type { BottomSheetProps } from '../BottomSheet/types';
+export interface NestedSelectBottomSheetProps extends NestedSelectProps {
+    onClose?: () => void;
+    componentsProps?: {
+        bottomsheet?: Omit<BottomSheetProps, 'backdrop' | 'onClose' | 'children'>;
+    };
+}
+/** NestedSelect in a bottom sheet with a backdrop */
+declare const NestedSelectBottomSheet: ({ onClose, componentsProps, ...props }: NestedSelectBottomSheetProps) => React.ReactElement;
+export default NestedSelectBottomSheet;

package/dist/components/NestedSelect/NestedSelectBottomSheet.js

@@ -0,0 +1,27 @@
+import { ArrowUp, Icon } from '@linagora/twake-icons';
+import { Divider, IconButton, Typography } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
+import NestedSelect from './index';
+import BottomSheet from '../BottomSheet';
+import BottomSheetHeader from '../BottomSheet/BottomSheetHeader';
+import BottomSheetItem from '../BottomSheet/BottomSheetItem';
+import { locales } from '../Dialogs/locales';
+const NestedSelectSheetHeader = ({ title, showBack, onClickBack }) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
+    if (!title)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(BottomSheetHeader, { className: cx('u-h-3', { 'u-pl-half u-pr-3': showBack }) },
+            showBack && (React.createElement(IconButton, { "aria-label": t('Dialogs.backButton'), onClick: onClickBack },
+                React.createElement(Icon, { icon: ArrowUp, rotate: -90 }))),
+            React.createElement(Typography, { className: "u-w-100", variant: "h6", align: "center" }, title)),
+        React.createElement(Divider, null)));
+};
+/** NestedSelect in a bottom sheet with a backdrop */
+const NestedSelectBottomSheet = ({ onClose, componentsProps, ...props }) => (React.createElement(BottomSheet, { ...componentsProps?.bottomsheet, backdrop: true, onClose: onClose },
+    React.createElement(BottomSheetItem, { disableGutters: true },
+        React.createElement(NestedSelect, { HeaderComponent: NestedSelectSheetHeader, ...props }))));
+export default NestedSelectBottomSheet;

package/dist/components/NestedSelect/NestedSelectModal.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NestedSelectProps } from './types';
+import { DialogLayoutProps } from '../Dialogs/useDialogLayout';
+export interface NestedSelectModalProps extends NestedSelectProps {
+    onClose?: DialogLayoutProps['onClose'];
+}
+/** NestedSelect in a dialog, with a back button to the parent list */
+declare const NestedSelectModal: ({ onClose, ...props }: NestedSelectModalProps) => React.ReactElement;
+export default NestedSelectModal;

package/dist/components/NestedSelect/NestedSelectModal.js

@@ -0,0 +1,36 @@
+import { DialogContent, DialogTitle, List } from '@mui/material';
+import cx from 'classnames';
+import React, { createContext, useContext } from 'react';
+import NestedSelect from './index';
+import Dialog from '../Dialog';
+import DialogNavButtons from '../Dialogs/DialogNavButtons';
+import { useDialogLayout } from '../Dialogs/useDialogLayout';
+// NestedSelect renders the header and the content as components, so they read the layout here
+const DialogLayoutContext = createContext(null);
+const useDialogLayoutContext = () => {
+    const layout = useContext(DialogLayoutContext);
+    if (!layout)
+        throw new Error('Rendered outside NestedSelectModal');
+    return layout;
+};
+const NestedSelectDialogHeader = ({ title, showBack, onClickBack }) => {
+    const { id, fullScreen, onClose, dialogTitleProps } = useDialogLayoutContext();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DialogNavButtons, { id: id, fullScreen: fullScreen, onClose: onClose, onBack: showBack ? onClickBack : undefined }),
+        title && (React.createElement(DialogTitle, { ...dialogTitleProps, className: cx(dialogTitleProps.className, {
+                dialogTitleWithBack: showBack
+            }) }, title))));
+};
+const NestedSelectDialogContent = ({ children }) => {
+    const { dialogContentProps } = useDialogLayoutContext();
+    return (React.createElement(DialogContent, { ...dialogContentProps },
+        React.createElement(List, null, children)));
+};
+/** NestedSelect in a dialog, with a back button to the parent list */
+const NestedSelectModal = ({ onClose, ...props }) => {
+    const layout = useDialogLayout({ open: true, onClose, disableGutters: true });
+    return (React.createElement(Dialog, { ...layout.dialogProps },
+        React.createElement(DialogLayoutContext.Provider, { value: { ...layout, onClose } },
+            React.createElement(NestedSelect, { HeaderComponent: NestedSelectDialogHeader, ContentComponent: NestedSelectDialogContent, ...props }))));
+};
+export default NestedSelectModal;

package/dist/components/NestedSelect/NestedSelectResponsive.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { NestedSelectBottomSheetProps } from './NestedSelectBottomSheet';
+export type NestedSelectResponsiveProps = NestedSelectBottomSheetProps;
+/** NestedSelect in a bottom sheet on mobile, in a dialog otherwise */
+declare const NestedSelectResponsive: (props: NestedSelectResponsiveProps) => React.ReactElement;
+export default NestedSelectResponsive;

package/dist/components/NestedSelect/NestedSelectResponsive.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import NestedSelectBottomSheet from './NestedSelectBottomSheet';
+import NestedSelectModal from './NestedSelectModal';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
+/** NestedSelect in a bottom sheet on mobile, in a dialog otherwise */
+const NestedSelectResponsive = (props) => {
+    const { isMobile } = useBreakpoints();
+    if (isMobile)
+        return React.createElement(NestedSelectBottomSheet, { ...props });
+    const { componentsProps: _componentsProps, ...modalProps } = props;
+    return React.createElement(NestedSelectModal, { ...modalProps });
+};
+export default NestedSelectResponsive;

package/dist/components/NestedSelect/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { NestedSelectItem, NestedSelectOptions } from './types';
+/** Path from the item matching `options.focusedId` up to `options`, deepest first */
+export declare const makeHistory: (options: NestedSelectOptions | undefined, canSelectParent?: boolean) => NestedSelectItem[];

package/dist/components/NestedSelect/helpers.js

@@ -0,0 +1,22 @@
+/** Path from the item matching `options.focusedId` up to `options`, deepest first */
+export const makeHistory = (options, canSelectParent = false) => {
+    if (!options)
+        return [];
+    const focusedId = options.focusedId ?? null;
+    if (!focusedId)
+        return [options];
+    const history = [];
+    const findFocusedItem = (item) => {
+        const isFound = item.children?.some(child => child.id === focusedId || findFocusedItem(child)) ?? false;
+        if (isFound) {
+            if (canSelectParent) {
+                const focusedItem = item.children?.find(child => child.id === focusedId);
+                if (focusedItem?.children)
+                    history.push(focusedItem);
+            }
+            history.push(item);
+        }
+        return isFound;
+    };
+    return findFocusedItem(options) ? history : [options];
+};

package/dist/components/NestedSelect/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { NestedSelectProps } from './types';
+/**
+ * Select to choose an item among a list. Clicking an item that has children
+ * shows its children instead of selecting it.
+ */
+declare const NestedSelect: ({ onSelect, isSelected, options, title, canSelectParent, transformParentItem, radioPosition, searchOptions, ellipsis, noDivider, ContentComponent, HeaderComponent }: NestedSelectProps) => React.ReactElement;
+export default NestedSelect;

package/dist/components/NestedSelect/index.js

@@ -0,0 +1,71 @@
+import { List, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import cx from 'classnames';
+import React, { useState } from 'react';
+import { useDebounce } from 'rooks';
+import ItemRow from './ItemRow';
+import { makeHistory } from './helpers';
+import SearchBar from '../SearchBar';
+const SEARCH_DELAY = 250;
+const NestedSelectRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'hasTitle'
+})({
+    variants: [{ props: { hasTitle: false }, style: { marginTop: '4rem' } }]
+});
+const keepItem = (item) => item;
+const getItemKey = (item, index) => item.key ?? (typeof item.title === 'string' ? item.title : index);
+/**
+ * Select to choose an item among a list. Clicking an item that has children
+ * shows its children instead of selecting it.
+ */
+const NestedSelect = ({ onSelect, isSelected, options, title, canSelectParent, transformParentItem = keepItem, radioPosition = 'right', searchOptions, ellipsis, noDivider, ContentComponent = List, HeaderComponent = null }) => {
+    const [history, setHistory] = useState(() => makeHistory(options, canSelectParent));
+    const [searchValue, setSearchValue] = useState('');
+    const [searchResult, setSearchResult] = useState(null);
+    const setSearchResultLater = useDebounce(setSearchResult, SEARCH_DELAY);
+    const current = history[0];
+    const level = history.length - 1;
+    const currentTitle = current.title ?? title;
+    const { children: _children, ...currentWithoutChildren } = current;
+    const parentItem = transformParentItem(currentWithoutChildren);
+    const items = searchResult ?? current.children ?? [];
+    const handleBack = () => {
+        setHistory(([, ...parents]) => parents);
+    };
+    const handleClickItem = (item) => {
+        if (item.children && item.children.length > 0) {
+            setHistory(previous => [item, ...previous]);
+        }
+        else {
+            onSelect(item);
+        }
+    };
+    const handleSearchChange = (event) => {
+        if (!searchOptions)
+            return;
+        setSearchValue(event.target.value);
+        setSearchResultLater(searchOptions.onSearch(event.target.value));
+    };
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setSearchResultLater(null);
+    };
+    const renderItemRow = (item, key, isLast) => (React.createElement(ItemRow, { key: key, item: item, onClick: handleClickItem, isSelected: isSelected(item, level), radioPosition: radioPosition, isLast: isLast, ellipsis: ellipsis, noDivider: noDivider }));
+    const header = level === 0
+        ? options.header
+        : (current.header ??
+            (typeof options.childrenHeader === 'function'
+                ? options.childrenHeader(level)
+                : options.childrenHeader));
+    return (React.createElement(NestedSelectRoot, { hasTitle: Boolean(currentTitle) },
+        HeaderComponent && (React.createElement(HeaderComponent, { title: currentTitle, showBack: level > 0, onClickBack: handleBack })),
+        header,
+        React.createElement(ContentComponent, null,
+            canSelectParent &&
+                level > 0 &&
+                renderItemRow(parentItem, 'parent', false),
+            searchOptions && level === 0 && (React.createElement("div", { className: cx('u-mh-1 u-mb-half', { 'u-mt-half': !currentTitle }) },
+                React.createElement(SearchBar, { placeholder: searchOptions.placeholderSearch, value: searchValue, onChange: handleSearchChange, onClear: handleSearchClear }))),
+            searchResult?.length === 0 ? (React.createElement(Typography, { variant: "body1", className: "u-flex u-flex-justify-center u-mb-1" }, searchOptions?.noDataLabel)) : (items.map((item, index) => renderItemRow(item, getItemKey(item, index), index === items.length - 1))))));
+};
+export default NestedSelect;

package/dist/components/NestedSelect/types.d.ts

@@ -0,0 +1,72 @@
+import type React from 'react';
+export interface NestedSelectItemAction {
+    /**
+     * Called as a function with the item and `props`, so that a returned
+     * `ListItemSecondaryAction` is placed outside the row button
+     */
+    Component(props: {
+        item: NestedSelectItem;
+    }): React.ReactNode;
+    props?: object;
+}
+export interface NestedSelectItem {
+    /** Matched against `focusedId` to open the select on this item */
+    id?: string;
+    /** React key of the row, `title` is used without it */
+    key?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Shown on the left of the row */
+    icon?: React.ReactElement;
+    /** Shown before the radio */
+    info?: React.ReactNode;
+    /** Shown above the list of this item's children */
+    header?: React.ReactNode;
+    /** Items shown instead of selecting this one */
+    children?: NestedSelectItem[];
+    /** Shown on the right of the row */
+    action?: NestedSelectItemAction;
+}
+export interface NestedSelectOptions extends NestedSelectItem {
+    /** Opens the select on the item with this `id` */
+    focusedId?: string | null;
+    /** Shown above the children of any item, unless the item has its own `header` */
+    childrenHeader?: React.ReactNode | ((level: number) => React.ReactNode);
+}
+export interface NestedSelectSearchOptions {
+    placeholderSearch: string;
+    noDataLabel: string;
+    onSearch: (value: string) => NestedSelectItem[];
+}
+export interface NestedSelectHeaderProps {
+    title?: React.ReactNode;
+    showBack: boolean;
+    onClickBack: () => void;
+}
+export type NestedSelectRadioPosition = 'left' | 'right';
+export interface NestedSelectProps {
+    /** Called with the chosen item, unless it has children */
+    onSelect: (item: NestedSelectItem) => void;
+    /** Whether the row looks selected, `level` being the depth of the shown list */
+    isSelected: (item: NestedSelectItem, level: number) => boolean;
+    options: NestedSelectOptions;
+    /** Shown when the current item has no title */
+    title?: React.ReactNode;
+    /** Shows the parent item at the top of its children, to select it */
+    canSelectParent?: boolean;
+    /** Changes the parent item before it is shown at the top of its children */
+    transformParentItem?: (item: NestedSelectItem) => NestedSelectItem;
+    radioPosition?: NestedSelectRadioPosition;
+    /** Shows a search bar above the first level */
+    searchOptions?: NestedSelectSearchOptions;
+    /** Ellipses the row texts, `true` by default */
+    ellipsis?: boolean;
+    /** Removes the divider between rows */
+    noDivider?: boolean;
+    /** Wraps the rows */
+    ContentComponent?: React.ElementType<{
+        children?: React.ReactNode;
+    }>;
+    /** Shows the title and the back button */
+    HeaderComponent?: React.ComponentType<NestedSelectHeaderProps> | null;
+}

package/dist/components/NestedSelect/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -73,6 +73,10 @@ export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as NavigationList } from './components/NavigationList';
 export { default as NavigationListHeader } from './components/NavigationList/NavigationListHeader';
 export { default as NavigationListSection } from './components/NavigationList/NavigationListSection';
+export { default as NestedSelect } from './components/NestedSelect';
+export { default as NestedSelectModal } from './components/NestedSelect/NestedSelectModal';
+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';
@@ -176,6 +180,10 @@ export type { MidEllipsisProps } from './components/MidEllipsis';
 export type { NavigationListProps } from './components/NavigationList';
 export type { NavigationListHeaderProps } from './components/NavigationList/NavigationListHeader';
 export type { NavigationListSectionProps } from './components/NavigationList/NavigationListSection';
+export type { NestedSelectHeaderProps, NestedSelectItem, NestedSelectItemAction, NestedSelectOptions, NestedSelectProps, NestedSelectRadioPosition, NestedSelectSearchOptions } from './components/NestedSelect/types';
+export type { NestedSelectModalProps } from './components/NestedSelect/NestedSelectModal';
+export type { NestedSelectBottomSheetProps } from './components/NestedSelect/NestedSelectBottomSheet';
+export type { NestedSelectResponsiveProps } from './components/NestedSelect/NestedSelectResponsive';
 export type { TabsProps } from './components/Tabs';
 export type { SwitchProps } from './components/Switch';
 export type { SearchBarProps } from './components/SearchBar/types';

package/dist/index.js

@@ -76,6 +76,10 @@ export { default as MidEllipsis } from './components/MidEllipsis';
 export { default as NavigationList } from './components/NavigationList';
 export { default as NavigationListHeader } from './components/NavigationList/NavigationListHeader';
 export { default as NavigationListSection } from './components/NavigationList/NavigationListSection';
+export { default as NestedSelect } from './components/NestedSelect';
+export { default as NestedSelectModal } from './components/NestedSelect/NestedSelectModal';
+export { default as NestedSelectBottomSheet } from './components/NestedSelect/NestedSelectBottomSheet';
+export { default as NestedSelectResponsive } from './components/NestedSelect/NestedSelectResponsive';
 export { default as PointerAlert } from './components/PointerAlert';
 export { default as AlertProvider } from './providers/AlertProvider';
 export { useAlert } from './providers/AlertProvider/useAlert';

package/package.json

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