@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/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/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/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/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/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;

package/components/elements/addons/lists/hooks/useTuiListKeyboard.js

@@ -0,0 +1,41 @@
+import { isArrowDown, isArrowUp, isEnter } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { useCallback, useContext, useMemo } from 'react';
+import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
+import { TuiListItemsContext } from '../TuiListProvider';
+const THROTTLER = new Throttler(10);
+const useTuiListKeyboard = (onSelect) => {
+    const { items, movePrevious, moveNext } = useContext(TuiListItemsContext);
+    // Keyboard[keydown] event handler.
+    const onKeyDown = useCallback((event) => {
+        // console.log(`kd[${event.key}]`);
+        // event.preventDefault();
+        // going up.
+        if (isArrowUp(event.key)) {
+            event.preventDefault();
+            THROTTLER.debounce(() => movePrevious());
+        }
+        // going down.
+        else if (isArrowDown(event.key)) {
+            event.preventDefault();
+            THROTTLER.debounce(() => moveNext());
+        }
+        // select.
+        else if (isEnter(event.key)) {
+            const index = items.findIndex(i => !!i.cursor);
+            onSelect(items[index], index);
+        }
+    }, [items, movePrevious, moveNext, onSelect]);
+    // Register keyboard event handler.
+    const register = useCallback((element) => {
+        if (element) {
+            element.addEventListener('keydown', onKeyDown);
+        }
+        return () => {
+            element.removeEventListener('keydown', onKeyDown);
+        };
+    }, [onKeyDown]);
+    return useMemo(() => ({
+        register
+    }), [register]);
+};
+export default useTuiListKeyboard;

package/components/elements/addons/lists/index.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement } from 'react';
+import TuiList from './TuiList';
+import TuiListElement from './TuiListElement';
+import TuiListProvider from './TuiListProvider';
+export type TuiListItemOnSelect<T> = (selection: TuiListItem<T>, rowIndex: number) => void;
+export type TuiListItem<T> = {
+    id: string | number;
+    details?: boolean;
+    cursor?: boolean;
+    selected?: boolean;
+    item: T;
+};
+export type TuiListItemProps<T> = {
+    item: TuiListItem<T>;
+    position: number;
+};
+export type TuiListMenuRenderer<T> = (props: TuiListItemProps<T>) => ReactElement | ReactElement[];
+export type TuiListItemRenderer<T> = (props: TuiListItemProps<T>, classRenderer: () => string) => ReactElement;
+export { TuiList, TuiListElement, TuiListProvider };

package/components/elements/addons/lists/index.js

@@ -0,0 +1,4 @@
+import TuiList from './TuiList';
+import TuiListElement from './TuiListElement';
+import TuiListProvider from './TuiListProvider';
+export { TuiList, TuiListElement, TuiListProvider };

package/components/elements/addons/lists/table/TuiTable.d.ts

@@ -0,0 +1,14 @@
+import type { TuiTableCellRenderer, TuiTableColumn, TuiTableRowDetailRenderer } from '.';
+import type { TuiListItemOnSelect, TuiListMenuRenderer } from '..';
+type TuiTableProps<T> = {
+    keyboard?: boolean;
+    flexPort?: boolean;
+    headless?: boolean;
+    columns: TuiTableColumn[];
+    onRowSelect?: TuiListItemOnSelect<T>;
+    menuRenderer?: TuiListMenuRenderer<T>;
+    detailRenderer?: TuiTableRowDetailRenderer<T>;
+    children?: TuiTableCellRenderer<T>;
+};
+declare const TuiTable: <T>({ keyboard, flexPort, headless, columns, onRowSelect, menuRenderer, detailRenderer, children }: TuiTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TuiTable;

package/components/elements/addons/lists/table/TuiTable.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { darken, emphasize, lighten, styled } from '@mui/material';
+import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
+import { useEffect, useRef, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import TuiTableBody from './TuiTableBody';
+import TuiTableHead from './TuiTableHead';
+import TuiTableLayout from './TuiTableLayout';
+const TableRoot = styled('div')(({ theme }) => ({
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    '.tui-table-row': {
+        wordBreak: 'break-all',
+        borderBottom: '1px solid',
+        borderBottomColor: theme.palette.mode === 'dark'
+            ? lighten(theme.palette.background.default, 0.05)
+            : darken(theme.palette.background.default, 0.05)
+    },
+    '.tui-table-cell': {
+        padding: theme.spacing(1)
+    },
+    '.tui-table-header': {
+        display: 'flex',
+        alignItems: 'center',
+        border: '1px dotted transparent',
+        padding: theme.spacing(1)
+    },
+    '.tui-table-header-active': {
+        border: '1px dotted',
+        borderColor: emphasize(theme.palette.background.default, 0.25),
+        backgroundColor: emphasize(theme.palette.background.default, 0.05)
+    },
+    '.tui-table-header-hover': {
+        '&:hover': {
+            cursor: 'pointer',
+            backgroundColor: emphasize(theme.palette.background.default, 0.05)
+        },
+        '&:hover .tui-table-header-menu-btn': {
+            opacity: 1
+        }
+    },
+    '.tui-table-header-menu': {},
+    '.tui-table-header-menu-btn': {
+        opacity: 0
+    },
+    '.tui-table-head': {
+        display: 'flex',
+        backgroundColor: theme.palette.background.default,
+        zIndex: theme.zIndex.appBar - 2
+    },
+    '.tui-table-divider': {
+        borderBottom: '1px solid',
+        borderBottomColor: theme.palette.divider
+    }
+}));
+const TuiTable = ({ keyboard, flexPort, headless, columns, onRowSelect, menuRenderer, detailRenderer, children }) => {
+    const { width, ref } = useResizeDetector({ handleHeight: false });
+    const { width: bodyWidth, ref: bodyRef } = useResizeDetector({ handleHeight: false });
+    const [layout, setLayout] = useState();
+    const widthRef = useRef(width);
+    useEffect(() => {
+        if (!flexPort || !layout) {
+            if (width && width !== widthRef.current) {
+                setLayout(new TuiTableLayout(width, width, columns));
+            }
+            widthRef.current = width;
+        }
+    }, [flexPort, layout, width, columns]);
+    useEffect(() => {
+        if (flexPort && layout) {
+            if (bodyWidth && bodyWidth !== widthRef.current) {
+                setLayout(new TuiTableLayout(width, bodyWidth, columns));
+            }
+            widthRef.current = bodyWidth;
+        }
+    }, [flexPort, layout, width, bodyWidth, columns]);
+    return (_jsxs(TableRoot, { ref: ref, "data-tuitable": "true", children: [!headless && layout && _jsx(TuiTableHead, { layout: layout, columns: columns }), layout &&
+                (flexPort ? (_jsx(FlexPort, { children: _jsx("div", { ref: bodyRef, children: _jsx(TuiTableBody, { keyboard: keyboard, layout: layout, columns: columns, onRowSelect: onRowSelect, menuRenderer: menuRenderer, detailRenderer: detailRenderer, children: children }) }) })) : (_jsx(TuiTableBody, { keyboard: keyboard, layout: layout, columns: columns, onRowSelect: onRowSelect, menuRenderer: menuRenderer, detailRenderer: detailRenderer, children: children })))] }));
+};
+export default TuiTable;

package/components/elements/addons/lists/table/TuiTableBody.d.ts

@@ -0,0 +1,14 @@
+import type { TuiTableCellRenderer, TuiTableColumn, TuiTableRowDetailRenderer } from '.';
+import type { TuiListItemOnSelect, TuiListMenuRenderer } from '..';
+import type TuiTableLayout from './TuiTableLayout';
+type TuiTableBodyProps<T> = {
+    keyboard?: boolean;
+    layout: TuiTableLayout;
+    columns: TuiTableColumn[];
+    onRowSelect?: TuiListItemOnSelect<T>;
+    menuRenderer?: TuiListMenuRenderer<T>;
+    detailRenderer?: TuiTableRowDetailRenderer<T>;
+    children?: TuiTableCellRenderer<T>;
+};
+declare const TuiTableBody: <T>({ keyboard, layout, columns, onRowSelect, menuRenderer, detailRenderer, children }: TuiTableBodyProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TuiTableBody;

package/components/elements/addons/lists/table/TuiTableBody.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapse } from '@mui/material';
+import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
+import { get } from 'lodash-es';
+import { useCallback } from 'react';
+import { TuiListElement } from '..';
+import TuiListBase from '../TuiListBase';
+const TuiTableBody = ({ keyboard, layout, columns, onRowSelect, menuRenderer, detailRenderer, children }) => {
+    const trowRenderer = useCallback((props, classRenderer) => {
+        return (_jsxs("div", { className: `tui-table-row ${classRenderer()}`, children: [_jsxs("div", { style: { display: 'flex', position: 'relative' }, children: [columns.map((column, columnIndex) => {
+                            const value = get(props.item.item, column.path || column.column, '');
+                            return (_jsx("div", { className: "tui-table-cell", style: { minWidth: layout.getWidth(column.column) }, children: children ? children(value, columnIndex, column, props) : _jsx("div", { children: value }) }, column.column));
+                        }), menuRenderer && menuRenderer(props)] }), detailRenderer && (_jsx(Collapse, { in: props.item.details, unmountOnExit: true, children: detailRenderer(props) }))] }));
+    }, [layout, columns, menuRenderer, detailRenderer, children]);
+    return (_jsx(TuiListBase, { keyboard: keyboard, onSelect: onRowSelect, children: (items, onClick) => {
+            return items.length > 0 ? (items.map((item, index) => (_jsx(TuiListElement, { item: item, position: index, onSelect: onClick, children: trowRenderer }, item.id)))) : (_jsx(AppListEmpty, { mt: 4 }));
+        } }));
+};
+export default TuiTableBody;

package/components/elements/addons/lists/table/TuiTableHead.d.ts

@@ -0,0 +1,8 @@
+import type { TuiTableColumn } from '.';
+import type TuiTableLayout from './TuiTableLayout';
+type TuiTableHeaderProps = {
+    layout: TuiTableLayout;
+    columns: TuiTableColumn[];
+};
+declare const TuiTableHead: ({ layout, columns }: TuiTableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TuiTableHead;

package/components/elements/addons/lists/table/TuiTableHead.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VSBoxContext } from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
+import { useContext } from 'react';
+import TuiTableHeader from './TuiTableHeader';
+const TuiTableHead = ({ layout, columns }) => {
+    const { state: { scrollTop } } = useContext(VSBoxContext);
+    return (_jsx("div", { "data-tuitable-header": "true", className: "tui-table-head tui-table-divider", style: { position: scrollTop ? 'sticky' : null, top: scrollTop || null }, children: columns.map(column => (_jsx(TuiTableHeader, { width: layout.getWidth(column.column, true), column: column }, column.column))) }));
+};
+export default TuiTableHead;

package/components/elements/addons/lists/table/TuiTableHeader.d.ts

@@ -0,0 +1,6 @@
+import type { TuiTableColumn } from '.';
+declare const _default: import("react").MemoExoticComponent<({ width, column }: {
+    width: number;
+    column: TuiTableColumn;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/components/elements/addons/lists/table/TuiTableHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+const TuiTableHeader = ({ width, column }) => {
+    const { t } = useTranslation();
+    return (_jsx("div", { className: "tui-table-header", style: { minWidth: width }, children: _jsx("div", { children: column.i18nKey ? t(column.i18nKey) : column.label }) }));
+};
+export default memo(TuiTableHeader);

package/components/elements/addons/lists/table/TuiTableLayout.d.ts

@@ -0,0 +1,12 @@
+import type { TuiTableColumn } from '.';
+export default class TuiTableLayout {
+    private tableWidth;
+    private bodyWidth;
+    private columns;
+    private widths;
+    constructor(tableWidth: number, bodyWidth: number, columns: TuiTableColumn[]);
+    getWidth(column?: string, header?: boolean): number;
+    private isLast;
+    private columnWidth;
+    private compute;
+}

package/components/elements/addons/lists/table/TuiTableLayout.js

@@ -0,0 +1,41 @@
+export default class TuiTableLayout {
+    tableWidth;
+    bodyWidth;
+    columns = [];
+    widths;
+    constructor(tableWidth, bodyWidth, columns) {
+        this.tableWidth = tableWidth;
+        this.bodyWidth = bodyWidth;
+        this.columns = columns;
+        this.compute();
+    }
+    getWidth(column, header) {
+        if (column) {
+            const extra = column && header && this.isLast(column) ? this.tableWidth - this.bodyWidth : 0;
+            return extra > 0 ? this.widths[column] + extra : this.widths[column];
+        }
+        return this.bodyWidth;
+    }
+    isLast(column) {
+        const index = this.columns.findIndex(c => c.column === column);
+        return index === this.columns.length - 1;
+    }
+    columnWidth(ratio) {
+        return (ratio / 12) * this.bodyWidth;
+    }
+    compute() {
+        let _rw = this.bodyWidth;
+        const _nw = this.columns.filter(c => !c.width);
+        const _ww = this.columns.filter(c => !!c.width);
+        this.widths = {};
+        _ww.forEach(c => {
+            const cw = this.columnWidth(c.width);
+            this.widths[c.column] = cw;
+            _rw -= cw;
+        });
+        const cw = _rw / _nw.length;
+        _nw.forEach(c => {
+            this.widths[c.column] = cw;
+        });
+    }
+}

package/components/elements/addons/lists/table/index.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { TuiListItemProps } from '..';
+export declare const MATCHERS: readonly ["like", "in", "is", ">=", "<=", "="];
+export type TuiSearchMatcher = (typeof MATCHERS)[number];
+export type TuiTableColumn = {
+    column: string;
+    label?: string;
+    i18nKey?: string;
+    operators?: TuiSearchMatcher[];
+    path?: string;
+    sortable?: boolean;
+    width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+export type TuiTableRowDetailRenderer<T> = (props: TuiListItemProps<T>) => ReactNode;
+export type TuiTableCellRenderer<T> = (value: any, columnIndex: number, column: TuiTableColumn, props: TuiListItemProps<T>) => ReactNode;

package/components/elements/addons/lists/table/index.js

@@ -0,0 +1 @@
+export const MATCHERS = ['like', 'in', 'is', '>=', '<=', '='];

package/components/elements/addons/search/SearchPagination.d.ts

@@ -0,0 +1,9 @@
+import type { PaginationProps } from '@mui/material';
+type SearchPaginationProps = Omit<PaginationProps, 'onChange'> & {
+    limit: number;
+    offset: number;
+    total: number;
+    onChange: (nextOffset: number) => void;
+};
+declare const SearchPagination: ({ limit, offset, total, onChange, ...paginationProps }: SearchPaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default SearchPagination;

package/components/elements/addons/search/SearchPagination.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pagination } from '@mui/material';
+import { useCallback } from 'react';
+const SearchPagination = ({ limit, offset, total, onChange, ...paginationProps }) => {
+    const onPageChange = useCallback((_event, nextPage) => {
+        onChange(nextPage === 1 ? 0 : (nextPage - 1) * limit);
+    }, [limit, onChange]);
+    const count = Math.ceil(total / limit);
+    const page = Math.floor((offset + 1) / limit) + 1;
+    return limit && total && limit < total ? (_jsx(Pagination, { count: count, page: page, onChange: onPageChange, ...paginationProps })) : null;
+};
+export default SearchPagination;

package/components/elements/addons/search/SearchTotal.d.ts

@@ -0,0 +1,8 @@
+import type { TypographyProps } from '@mui/material';
+type SearchTotalProps = TypographyProps & {
+    total: number;
+    offset: number;
+    pageLength: number;
+};
+declare const SearchTotal: ({ total, offset, pageLength, ...typographyProps }: SearchTotalProps) => import("react/jsx-runtime").JSX.Element;
+export default SearchTotal;

package/components/elements/addons/search/SearchTotal.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { Trans } from 'react-i18next';
+const SearchTotal = ({ total, offset, pageLength, ...typographyProps }) => {
+    return (_jsx(Typography, { ...typographyProps, children: total <= 1 ? (_jsx(Trans, { i18nKey: "search.result.showing.single", values: {
+                total: total
+            } })) : (_jsx(Trans, { i18nKey: "search.result.showing", values: {
+                total: total,
+                offset: offset + 1,
+                length: pageLength + offset
+            } })) }));
+};
+export default SearchTotal;

package/components/elements/addons/search/phrase/Phrase.d.ts

@@ -0,0 +1,19 @@
+import { type TextFieldProps } from '@mui/material';
+import { parseEvent } from '@cccsaurora/howler-ui/commons/components/utils/keyboard';
+import { type ReactElement } from 'react';
+import type { PhraseSuggester } from '.';
+import type PhraseLexer from './PhraseLexer';
+export type PhraseProps = Omit<TextFieldProps, 'onChange' | 'onKeyDown' | 'variant'> & {
+    value: string;
+    variant?: 'filled' | 'outlined' | 'standard';
+    suggestions?: string[];
+    lexer?: PhraseLexer;
+    suggester?: PhraseSuggester;
+    debug?: boolean;
+    startAdornment?: ReactElement | ReactElement[];
+    endAdornment?: ReactElement | ReactElement[];
+    onChange: (phrase: string) => void;
+    onKeyDown?: (event: ReturnType<typeof parseEvent>) => void;
+};
+declare const Phrase: ({ value, variant, suggestions, lexer, suggester, debug, startAdornment, endAdornment, onChange, onKeyDown, ...props }: PhraseProps) => import("react/jsx-runtime").JSX.Element;
+export default Phrase;