@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/elements/addons/buttons/CustomIconButton.d.ts

@@ -0,0 +1,15 @@
+import { type IconButtonProps } from '@mui/material';
+import { type HTMLAttributeAnchorTarget, type ReactNode } from 'react';
+export type CustomIconButtonProps = Omit<IconButtonProps, 'color'> & {
+    progress?: boolean | number;
+    transparent?: boolean;
+    solid?: boolean;
+    color?: string;
+    route?: string;
+    href?: string;
+    tooltip?: string | ReactNode;
+    target?: HTMLAttributeAnchorTarget;
+    clickableWithProgress?: boolean;
+};
+declare const CustomIconButton: ({ progress, transparent, solid, color, route, href, target, tooltip, disabled, children, clickableWithProgress, ...props }: CustomIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomIconButton;

package/dist/components/elements/addons/buttons/CustomIconButton.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { alpha, CircularProgress, darken, emphasize, IconButton, lighten, Link as MuiLink, Tooltip, useTheme } from '@mui/material';
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { isMuiButtonColor } from '.';
+const CustomIconButton = ({ progress, transparent, solid, color, route, href, target, tooltip, disabled, children, clickableWithProgress = false, ...props }) => {
+    const theme = useTheme();
+    const requestedColor = color || 'primary';
+    const isMuiColor = isMuiButtonColor(requestedColor);
+    const sx = useMemo(() => {
+        if (isMuiColor) {
+            return props.sx || {};
+        }
+        const _bgColor = !transparent && solid ? requestedColor : alpha(requestedColor, 0.2);
+        const _color = !transparent && solid ? theme.palette.getContrastText(requestedColor) : requestedColor;
+        return {
+            ...(props.sx && { ...props.sx }),
+            color: _color,
+            backgroundColor: transparent ? 'transparent' : _bgColor,
+            '&:hover': {
+                backgroundColor: transparent ? _bgColor : darken(_bgColor, 0.2)
+            },
+            '&:disabled': {
+                backgroundColor: !transparent ? lighten(_bgColor, 0.1) : null
+            }
+        };
+    }, [requestedColor, solid, transparent, props.sx, isMuiColor, theme]);
+    const progressColor = useMemo(() => {
+        const _color = isMuiColor ? theme.palette[requestedColor].main : requestedColor;
+        return solid ? emphasize(_color, 0.5) : _color;
+    }, [solid, requestedColor, isMuiColor, theme]);
+    let _IconButton = (_jsx(IconButton, { ...props, disabled: (!clickableWithProgress && !!progress) || disabled, color: isMuiColor ? color : 'inherit', sx: sx, children: progress ? (_jsxs("div", { style: { position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }, children: [children, _jsx(CircularProgress, { disableShrink: true, size: props.size === 'large' ? 52 : props.size === 'small' ? 28 : 40, style: {
+                        position: 'absolute',
+                        color: progressColor,
+                        animationDuration: typeof progress === 'number' ? `${progress}s` : null
+                    } })] })) : (children) }));
+    if (tooltip) {
+        _IconButton = (_jsx(Tooltip, { title: tooltip, children: _jsx("span", { children: _IconButton }) }));
+    }
+    if (route) {
+        _IconButton = _jsx(Link, { to: route, children: _IconButton });
+    }
+    else if (href) {
+        _IconButton = (_jsx(MuiLink, { href: href, target: target ?? '_new', children: _IconButton }));
+    }
+    return _IconButton;
+};
+export default CustomIconButton;

package/dist/components/elements/addons/buttons/index.d.ts

@@ -0,0 +1,3 @@
+export declare const MuiButtonColors: readonly ["inherit", "primary", "secondary", "success", "error", "info", "warning"];
+export type MuiButtonColorType = (typeof MuiButtonColors)[number];
+export declare function isMuiButtonColor(color: string): boolean;

package/dist/components/elements/addons/buttons/index.js

@@ -0,0 +1,4 @@
+export const MuiButtonColors = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+export function isMuiButtonColor(color) {
+    return MuiButtonColors.some(c => c === color);
+}

package/dist/components/elements/addons/layout/FlexOne.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").MemoExoticComponent<({ children }: {
+    children?: any;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/elements/addons/layout/FlexOne.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+const FlexOne = ({ children = null }) => {
+    return _jsx("div", { style: { flex: 1 }, children: children });
+};
+export default memo(FlexOne);

package/dist/components/elements/addons/layout/FlexPort.d.ts

@@ -0,0 +1,12 @@
+type FlexPortProps = {
+    margin?: number;
+    mt?: number;
+    mr?: number;
+    mb?: number;
+    ml?: number;
+    disableOverflow?: boolean;
+    id?: string;
+    children: React.ReactNode;
+};
+declare const _default: import("react").MemoExoticComponent<({ children, disableOverflow, id, ...props }: FlexPortProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/elements/addons/layout/FlexPort.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import usePageProps from 'commons/components/pages/hooks/usePageProps';
+import { memo } from 'react';
+const FlexPort = ({ children, disableOverflow = false, id = '', ...props }) => {
+    const pageProps = usePageProps({ props, defaultOverrides: { height: '100%', mb: 0, ml: 0, mr: 0, mt: 0 } });
+    return (_jsx("div", { className: pageProps.className, style: {
+            position: 'relative',
+            flex: 1,
+            marginBottom: pageProps.style.marginBottom,
+            marginLeft: pageProps.style.marginLeft,
+            marginRight: pageProps.style.marginRight,
+            marginTop: pageProps.style.marginTop
+        }, children: _jsx("div", { style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, overflow: !disableOverflow && 'auto' }, id: id, children: children }) }));
+};
+export default memo(FlexPort);

package/dist/components/elements/addons/layout/FlexVertical.d.ts

@@ -0,0 +1,8 @@
+import type { PageProps } from 'commons/components/pages/hooks/usePageProps';
+import type { ReactNode } from 'react';
+type FlexVerticalProps = PageProps & {
+    flex?: number;
+    children: ReactNode;
+};
+declare const _default: import("react").MemoExoticComponent<({ flex, children, ...props }: FlexVerticalProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/elements/addons/layout/FlexVertical.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import usePageProps from 'commons/components/pages/hooks/usePageProps';
+import { memo } from 'react';
+const FlexVertical = ({ flex = 1, children, ...props }) => {
+    const pageProps = usePageProps({ props, defaultOverrides: { mb: 0, ml: 0, mr: 0, mt: 0 } });
+    return (_jsx("div", { className: pageProps.className ? pageProps.className : '', style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex,
+            ...pageProps.style
+        }, children: children }));
+};
+export default memo(FlexVertical);

package/dist/components/elements/addons/layout/vsbox/VSBox.d.ts

@@ -0,0 +1,16 @@
+import { type StackProps } from '@mui/material';
+type VSBoxProps = StackProps & {
+    top?: number;
+};
+type VSBoxState = {
+    header?: HTMLDivElement;
+    content?: HTMLDivElement;
+    top: number;
+    scrollTop: number;
+};
+export declare const VSBoxContext: import("react").Context<{
+    state: VSBoxState;
+    setState?: (state: VSBoxState) => void;
+}>;
+declare const VSBox: ({ top, children, ...stackProps }: VSBoxProps) => import("react/jsx-runtime").JSX.Element;
+export default VSBox;

package/dist/components/elements/addons/layout/vsbox/VSBox.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { useAppBar, useAppBarHeight } from 'commons/components/app/hooks';
+import { createContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
+export const VSBoxContext = createContext({
+    state: { top: 0, scrollTop: 0 }
+});
+const VSBox = ({ top, children, ...stackProps }) => {
+    const ref = useRef();
+    const appbarHeight = useAppBarHeight();
+    const { autoHide } = useAppBar();
+    const [state, setState] = useState({ top, scrollTop: top });
+    useLayoutEffect(() => {
+        // const tableHeader = content?.querySelector(':first-child[data-tuitable]') as HTMLDivElement;
+        const header = ref.current?.querySelector('[data-vsbox-header]');
+        const content = ref.current?.querySelector('[data-vsbox-content]');
+        // Explicit top or appbar height.
+        const _top = top !== undefined && top !== null ? top : autoHide ? 0 : appbarHeight;
+        // We compute scroll top value on demand in order to ensure the
+        //  header element is fully rendered.
+        const _scrollTop = _top + (header?.offsetHeight || 0);
+        setState({ top: _top, scrollTop: _scrollTop, header, content });
+    }, [top, appbarHeight, autoHide]);
+    const _value = useMemo(() => ({ state, setState }), [state]);
+    return (_jsx(VSBoxContext.Provider, { value: _value, children: _jsx(Stack, { id: "vs-box", ref: ref, height: "fit-content", ...stackProps, children: children }) }));
+};
+export default VSBox;

package/dist/components/elements/addons/layout/vsbox/VSBoxContent.d.ts

@@ -0,0 +1,4 @@
+import type { BoxProps } from '@mui/material';
+import type { FC, PropsWithChildren } from 'react';
+declare const VSBoxContent: FC<PropsWithChildren<Omit<BoxProps, 'children'>>>;
+export default VSBoxContent;

package/dist/components/elements/addons/layout/vsbox/VSBoxContent.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+const VSBoxContent = ({ children, ...boxProps }) => {
+    return (_jsx(Box, { "data-vsbox-content": "true", ...boxProps, children: children }));
+};
+export default VSBoxContent;

package/dist/components/elements/addons/layout/vsbox/VSBoxElement.d.ts

@@ -0,0 +1,8 @@
+import type { BoxProps } from '@mui/material';
+import type { ReactElement } from 'react';
+type VSBoxElementProps = Omit<BoxProps, 'children'> & {
+    focus: boolean;
+    children: ReactElement;
+};
+declare const _default: import("react").MemoExoticComponent<({ focus, children }: VSBoxElementProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/elements/addons/layout/vsbox/VSBoxElement.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useContext, useLayoutEffect, useRef } from 'react';
+import { VSBoxContext } from './VSBox';
+const VSBoxElement = ({ focus, children }) => {
+    const { state: { header, content, scrollTop } } = useContext(VSBoxContext);
+    const ref = useRef(null);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (focus && element && element.offsetParent) {
+            // if the first child of the vsbox content is a table,
+            //  then we'll offset the scroll bar by the height of
+            //  it header.
+            const tableHeader = content?.querySelector(':first-child[data-tuitable] [data-tuitable-header]');
+            // the amount of offset to add to scroll bar.
+            // this accounts for the vsbox header and a tuitable header.
+            const hh = scrollTop + (tableHeader?.offsetHeight || 0);
+            // offsetParent has no offsetHeight, so we use bounding client object.
+            const parent = element.offsetParent.getBoundingClientRect();
+            // visual frame of reference.
+            const fStart = element.offsetParent.scrollTop + hh;
+            const fEnd = fStart + parent.height - hh;
+            // element frame of reference.
+            const eStart = element.offsetTop;
+            const eEnd = eStart + element.offsetHeight;
+            // Determine scroll direction
+            if (eStart < fStart) {
+                element.offsetParent.scrollBy({ top: eStart - fStart });
+            }
+            else if (eEnd > fEnd) {
+                element.offsetParent.scrollBy({ top: eEnd - fEnd });
+            }
+            else {
+                // element is within visual frame.
+            }
+        }
+    }, [header, content, scrollTop, focus]);
+    return (_jsx("div", { ref: ref, className: "tui-vsbox-element", children: children }));
+};
+export default memo(VSBoxElement);

package/dist/components/elements/addons/layout/vsbox/VSBoxHeader.d.ts

@@ -0,0 +1,5 @@
+import type { BoxProps } from '@mui/material';
+import type { FC, PropsWithChildren } from 'react';
+type VSBoxHeaderProps = Omit<BoxProps, 'children'>;
+declare const VSBoxHeader: FC<PropsWithChildren<VSBoxHeaderProps>>;
+export default VSBoxHeader;

package/dist/components/elements/addons/layout/vsbox/VSBoxHeader.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, useTheme } from '@mui/material';
+import { useContext, useEffect, useRef } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import { VSBoxContext } from './VSBox';
+const VSBoxHeader = ({ children, ...boxProps }) => {
+    const theme = useTheme();
+    const heightRef = useRef();
+    const { height, ref } = useResizeDetector({ handleWidth: false });
+    const { state, setState } = useContext(VSBoxContext);
+    useEffect(() => {
+        if (height !== heightRef.current) {
+            setState({ ...state, scrollTop: state.top + height });
+            heightRef.current = height;
+        }
+    }, [height, state, setState]);
+    return (_jsx(Box, { ...boxProps, ref: ref, "data-vsbox-header": "true", position: "sticky", top: state.top, sx: {
+            backgroundColor: theme.palette.background.default,
+            zIndex: theme.zIndex.appBar - 1,
+            ...(boxProps.sx && { ...boxProps.sx })
+        }, children: children }));
+};
+export default VSBoxHeader;

package/dist/components/elements/addons/lists/TuiList.d.ts

@@ -0,0 +1,8 @@
+import type { TuiListItemOnSelect, TuiListItemRenderer } from '.';
+type TuiListProps<T> = {
+    keyboard?: boolean;
+    children: TuiListItemRenderer<T>;
+    onSelection?: TuiListItemOnSelect<T>;
+};
+declare const _default: import("react").MemoExoticComponent<(<T>({ keyboard, children, onSelection }: TuiListProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+export default _default;

package/dist/components/elements/addons/lists/TuiList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AppListEmpty from 'commons/components/display/AppListEmpty';
+import { memo } from 'react';
+import TuiListBase from './TuiListBase';
+import TuiListElement from './TuiListElement';
+const TuiList = ({ keyboard, children, onSelection }) => {
+    return (_jsx(TuiListBase, { keyboard: keyboard, onSelect: onSelection, children: (items, onSelect) => items && items.length > 0 ? (items.map((element, i) => (_jsx(TuiListElement, { position: i, item: element, onSelect: onSelect, children: children }, element.id)))) : (_jsx(AppListEmpty, {})) }));
+};
+export default memo(TuiList);

package/dist/components/elements/addons/lists/TuiListBase.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import type { TuiListItem, TuiListItemOnSelect } from '.';
+export type TuiListItemsRenderer<T> = (items: TuiListItem<T>[], onSelect: TuiListItemOnSelect<T>) => ReactNode;
+type TuiListBaseProps<T> = {
+    keyboard?: boolean;
+    onSelect: TuiListItemOnSelect<T>;
+    children: TuiListItemsRenderer<T>;
+};
+declare const _default: import("react").MemoExoticComponent<(<T>({ keyboard, onSelect, children }: TuiListBaseProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+export default _default;

package/dist/components/elements/addons/lists/TuiListBase.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { emphasize, styled } from '@mui/material';
+import { useAppBar, useAppBarHeight, useAppLayout } from 'commons/components/app/hooks';
+import useTuiListKeyboard from 'components/elements/addons/lists/hooks/useTuiListKeyboard';
+import { memo, useCallback, useContext, useEffect, useLayoutEffect, useRef } from 'react';
+import { TuiListItemsContext, TuiListMethodContext } from './TuiListProvider';
+const TuiListBaseRoot = styled('div')(({ theme }) => ({
+    outline: 'none',
+    backgroundColor: theme.palette.background.default,
+    '.elementFocus': {
+        backgroundColor: emphasize(theme.palette.background.default, 0.02),
+        '& .actions': {
+            display: 'flex',
+            backgroundColor: emphasize(theme.palette.background.default, 0.02)
+        }
+    },
+    '.elementHover': {
+        '&:hover': {
+            cursor: 'pointer',
+            backgroundColor: emphasize(theme.palette.background.default, 0.03)
+        },
+        '&:hover .actions': {
+            display: 'flex',
+            backgroundColor: emphasize(theme.palette.background.default, 0.03)
+        }
+    },
+    '.elementSelected': {
+        backgroundColor: emphasize(theme.palette.background.default, 0.04),
+        '& .actions': {
+            display: 'flex',
+            backgroundColor: emphasize(theme.palette.background.default, 0.04)
+        }
+    }
+}));
+const TuiListBase = ({ keyboard = false, onSelect, children }) => {
+    const listEl = useRef();
+    const appbar = useAppBar();
+    const appbarHeight = useAppBarHeight();
+    const layout = useAppLayout();
+    const { items } = useContext(TuiListItemsContext);
+    const { select } = useContext(TuiListMethodContext);
+    const onItemSelect = useCallback((selection, index) => {
+        const newItem = select(selection, index);
+        if (onSelect) {
+            onSelect(newItem, index);
+        }
+    }, [select, onSelect]);
+    const { register } = useTuiListKeyboard(onItemSelect);
+    useEffect(() => {
+        if (keyboard) {
+            return register(listEl.current);
+        }
+    }, [keyboard, register]);
+    useLayoutEffect(() => {
+        if (keyboard) {
+            listEl.current.focus({ preventScroll: true });
+        }
+    }, [keyboard]);
+    return (_jsx(TuiListBaseRoot, { ref: listEl, tabIndex: -1, "data-tuiappbar-height": appbarHeight, "data-tuilayout": layout.current, "data-tuiappbar-autohide": appbar.autoHide, children: children(items, onItemSelect) }));
+};
+export default memo(TuiListBase);

package/dist/components/elements/addons/lists/TuiListElement.d.ts

@@ -0,0 +1,9 @@
+import { type TuiListItem, type TuiListItemOnSelect, type TuiListItemRenderer } from '.';
+type TuiListElementProps<T> = {
+    position: number;
+    item: TuiListItem<T>;
+    onSelect?: TuiListItemOnSelect<T>;
+    children: TuiListItemRenderer<T>;
+};
+declare const _default: import("react").MemoExoticComponent<(<T>({ position, item, onSelect: onClick, children }: TuiListElementProps<T>) => import("react/jsx-runtime").JSX.Element)>;
+export default _default;

package/dist/components/elements/addons/lists/TuiListElement.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback, useRef } from 'react';
+import {} from '.';
+import VSBoxElement from '../layout/vsbox/VSBoxElement';
+const TuiListElement = ({ position, item, onSelect: onClick, children }) => {
+    const elementEl = useRef();
+    const onItemClick = useCallback(_event => {
+        if (onClick) {
+            onClick(item, position);
+        }
+    }, [onClick, item, position]);
+    const classRenderer = useCallback(() => {
+        const _classes = ['elementHover'];
+        if (item.cursor) {
+            _classes.push('elementFocus');
+        }
+        if (item.selected) {
+            _classes.push('elementSelected');
+        }
+        return _classes.join(' ');
+    }, [item.cursor, item.selected]);
+    return (_jsx(VSBoxElement, { focus: !!item.cursor, children: _jsx("div", { ref: elementEl, "data-tuilist-index": position, "data-tuilist-id": item.id, "data-tuilist-focus": !!item.cursor, "data-tuilist-selected": !!item.selected, onClick: onItemClick, children: children({ item, position }, classRenderer) }) }));
+};
+export default memo(TuiListElement);

package/dist/components/elements/addons/lists/TuiListMenu.d.ts

@@ -0,0 +1,49 @@
+import type { CSSProperties, ReactElement } from 'react';
+declare const PLACEMENTS: {
+    right: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: any;
+    };
+    left: {
+        top: number;
+        right: any;
+        bottom: number;
+        left: number;
+    };
+    'top-left': {
+        top: number;
+        right: any;
+        bottom: any;
+        left: number;
+    };
+    'top-right': {
+        top: number;
+        right: number;
+        bottom: any;
+        left: any;
+    };
+    'bottom-left': {
+        top: any;
+        right: any;
+        bottom: number;
+        left: number;
+    };
+    'bottom-right': {
+        top: any;
+        right: number;
+        bottom: number;
+        left: any;
+    };
+};
+type TuiListMenuProps = {
+    permanent?: boolean;
+    placement?: TuiListMenuPlacement;
+    style?: CSSProperties;
+    className?: string;
+    children: ReactElement | ReactElement[];
+};
+export type TuiListMenuPlacement = keyof typeof PLACEMENTS;
+declare const _default: import("react").MemoExoticComponent<({ style, className, permanent, placement, children }: TuiListMenuProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/elements/addons/lists/TuiListMenu.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material';
+import { memo } from 'react';
+const MY_PROPS = ['permanent', 'placement'];
+const PLACEMENTS = {
+    right: { top: 0, right: 0, bottom: 0, left: null },
+    left: { top: 0, right: null, bottom: 0, left: 0 },
+    'top-left': { top: 0, right: null, bottom: null, left: 0 },
+    'top-right': { top: 0, right: 0, bottom: null, left: null },
+    'bottom-left': { top: null, right: null, bottom: 0, left: 0 },
+    'bottom-right': { top: null, right: 0, bottom: 0, left: null }
+};
+const TuiListMenuRoot = styled('div', { shouldForwardProp: prop => !MY_PROPS.includes(prop) })(({ theme, permanent, placement }) => {
+    const position = PLACEMENTS[placement];
+    return {
+        ...(position || {}),
+        zIndex: position ? 100 : null,
+        display: permanent ? 'flex' : 'none',
+        position: position ? 'absolute' : 'inherit',
+        alignItems: 'center',
+        margin: 'auto',
+        backgroundColor: theme.palette.background.default,
+        '& button': {
+            marginRight: theme.spacing(1),
+            boxShadow: theme.shadows[4]
+        }
+    };
+});
+// TODO: placement property (top-left, top-right, bottom-left, bottom-right)
+const TuiListMenu = ({ style, className, permanent, placement, children }) => {
+    return (_jsx(TuiListMenuRoot, { permanent: permanent, placement: placement, style: style, className: `actions ${className || ''}`, onClick: event => event.stopPropagation(), children: children }));
+};
+export default memo(TuiListMenu);

package/dist/components/elements/addons/lists/TuiListProvider.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { TuiListItem } from '.';
+export type TuiListMethodsState<T> = {
+    load: (items: TuiListItem<T>[]) => void;
+    move: (index: number) => void;
+    select: (item: TuiListItem<T>, index: number) => TuiListItem<T>;
+    replace: (item: TuiListItem<T>, newItem: TuiListItem<T>) => void;
+    replaceById: (item: TuiListItem<T>, newItem: TuiListItem<T>) => void;
+    remove: (id: string) => void;
+};
+export type TuiListItemsState<T> = {
+    items: TuiListItem<T>[];
+    moveNext: () => void;
+    movePrevious: () => void;
+};
+export declare const TuiListMethodContext: import("react").Context<TuiListMethodsState<any>>;
+export declare const TuiListItemsContext: import("react").Context<TuiListItemsState<any>>;
+type TuiListProviderProps = {
+    children: ReactNode;
+};
+declare const TuiListProvider: <T>({ children }: TuiListProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default TuiListProvider;

package/dist/components/elements/addons/lists/TuiListProvider.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useMemo, useState } from 'react';
+const DEFAULT_METHODS_STATE = {
+    load: () => null,
+    move: () => null,
+    select: () => null,
+    replace: () => null,
+    replaceById: () => null,
+    remove: () => null
+};
+const DEFAULT_ITEMS_STATE = {
+    size: 0,
+    items: [],
+    movePrevious: () => null,
+    moveNext: () => null
+};
+export const TuiListMethodContext = createContext(DEFAULT_METHODS_STATE);
+export const TuiListItemsContext = createContext(DEFAULT_ITEMS_STATE);
+const TuiListProvider = ({ children }) => {
+    const [items, setItems] = useState([]);
+    const load = useCallback((_items) => {
+        setItems(current => {
+            return _items.map(i => {
+                const previous = current.find(_i => i.id === _i.id);
+                if (previous) {
+                    return {
+                        ...i,
+                        cursor: i.cursor === undefined ? previous.cursor : i.cursor,
+                        selected: i.selected === undefined ? previous.selected : i.selected,
+                        details: i.details === undefined ? previous.details : i.details
+                    };
+                }
+                return i;
+            });
+        });
+    }, []);
+    const select = useCallback((item, index) => {
+        const newItem = { ...item, cursor: true, selected: item ? !item.selected : true };
+        setItems(current => {
+            return current.map((_item, _index) => {
+                if (index === _index) {
+                    return newItem;
+                }
+                else if (_item.selected || _item.cursor) {
+                    return { ..._item, cursor: false, selected: false };
+                }
+                return _item;
+            });
+        });
+        return newItem;
+    }, []);
+    const move = useCallback((index) => {
+        setItems(current => {
+            return current.map((_item, _index) => {
+                if (index === _index) {
+                    return { ..._item, cursor: true };
+                }
+                else if (_item.cursor) {
+                    return { ..._item, cursor: false };
+                }
+                return _item;
+            });
+        });
+    }, []);
+    const replace = useCallback((item, newItem) => {
+        setItems(current => {
+            const index = current.findIndex(i => i === item);
+            if (index > -1) {
+                current[index] = { ...current[index], ...newItem };
+            }
+            return [...current];
+        });
+    }, []);
+    const replaceById = useCallback((item, newItem) => {
+        setItems(current => {
+            const index = current.findIndex(i => i.id === item.id);
+            if (index > -1) {
+                current[index] = { ...current[index], ...newItem };
+            }
+            return [...current];
+        });
+    }, []);
+    const remove = useCallback((id) => {
+        setItems(current => {
+            const index = current.findIndex(i => i.id === id);
+            if (index > -1) {
+                return current.filter(i => i.id !== id);
+            }
+            return [...current];
+        });
+    }, []);
+    const moveNext = useCallback(() => {
+        const cursor = items.findIndex(i => !!i.cursor);
+        const next = cursor + 1 > items.length - 1 ? 0 : cursor + 1;
+        move(next);
+    }, [items, move]);
+    const movePrevious = useCallback(() => {
+        const cursor = items.findIndex(i => !!i.cursor);
+        const next = cursor - 1 < 0 ? items.length - 1 : cursor - 1;
+        move(next);
+    }, [items, move]);
+    const _items = useMemo(() => ({
+        items,
+        moveNext,
+        movePrevious
+    }), [items, moveNext, movePrevious]);
+    const _functions = useMemo(() => ({
+        load,
+        move,
+        select,
+        replace,
+        replaceById,
+        remove
+    }), [load, select, move, replace, replaceById, remove]);
+    return (_jsx(TuiListMethodContext.Provider, { value: _functions, children: _jsx(TuiListItemsContext.Provider, { value: _items, children: children }) }));
+};
+export default TuiListProvider;

package/dist/components/elements/addons/lists/hooks/useTuiListKeyboard.d.ts

@@ -0,0 +1,5 @@
+import type { TuiListItemOnSelect } from '..';
+declare const useTuiListKeyboard: <T>(onSelect: TuiListItemOnSelect<T>) => {
+    register: (element: HTMLElement) => () => void;
+};
+export default useTuiListKeyboard;