import { FunctionComponent } from 'react'; import * as react_jsx_runtime from 'react/jsx-runtime'; import { GenericList, IOrder, IFilter, GenericCudList } from '@knowmax/genericlist-core'; import { ButtonProps } from '@fluentui/react-button'; /** Wrap this around each list and use @see ListItemPanel for each item in list. */ declare const ListPanel: FunctionComponent<{ loading?: boolean; children?: React.ReactNode; className?: string; }>; /** Wrap this around each list item panel. */ declare const ListItemPanel: FunctionComponent<{ children?: React.ReactNode; className?: string; }>; type TOnRenderListItem = (item: T, index: number) => JSX.Element; type TListLayout = 'list' | 'grid' | 'compact' | 'card'; interface IListProps { list: GenericList; onRenderListItem: TOnRenderListItem; showPager?: boolean; layout?: TListLayout; className?: string; } /** Generic component to render list for items in provided @see GenericList. */ declare const List: (({ list, onRenderListItem, showPager, layout, className }: IListProps) => react_jsx_runtime.JSX.Element) & { displayName: string; }; interface IVirtualizedListProps { list: GenericList; onRenderListItem: TOnRenderListItem; /** * Fixed pixel height of each list item row. * When omitted, defaults to 90 px for `list`/`grid`/`card` and 64 px for `compact`. */ itemHeight?: number; /** * Height of the scrollable list container in pixels. * * When omitted, the list expands to fill all available vertical space in its * parent using `AutoSizer` (from `react-virtualized-auto-sizer`). This requires * that a parent element in the tree has a **constrained height** (e.g. `height: * 100vh`, `flex: 1` in a fixed-height flex column, or an explicit pixel value). * Without a constrained ancestor the measured height will be 0 and nothing will * render. * * When provided, `AutoSizer` is skipped and the list container is sized to the * exact pixel value – useful when the parent height is unconstrained. */ height?: number; /** * Layout style – mirrors the `layout` prop of `List` to ease migration. * * `list` and `compact` translate naturally to row-based virtualization. * `grid` and `card` are accepted for API compatibility but items will still * render one per row – react-window's absolute-positioned rows are incompatible * with CSS multi-column grid on the container. */ layout?: TListLayout; /** Number of extra items rendered outside the visible area for smoother scrolling. Defaults to 3. */ overscanCount?: number; className?: string; } /** * Virtualized list component that renders items with react-window and loads more * results automatically as the user scrolls down (infinite scroll). * * Items from the underlying {@link GenericList} are accumulated across pages so the * user never loses previously loaded rows. A new page is requested from the server * once the visible window reaches within {@link IVirtualizedListProps.overscanCount} * rows of the last loaded item. * * **Height behaviour** * * - When `height` is **omitted** the list uses `AutoSizer` to fill all available * vertical space in its parent. The parent (or an ancestor) must have a * constrained height; otherwise the measured size will be 0 and nothing renders. * - When `height` is **provided** `AutoSizer` is bypassed and the container is * fixed to that pixel value, which works fine even when the parent height is * unconstrained. * * The existing {@link List} component remains unchanged and continues to work with * a traditional pager – this component is an additive, non-breaking addition. */ declare const VirtualizedList: (({ list, onRenderListItem, itemHeight, height, layout, overscanCount, className }: IVirtualizedListProps) => react_jsx_runtime.JSX.Element) & { displayName: string; }; /** Wrap this around components to be put on a fancy side panel besides list. Renders as div. */ declare const SidePanel: FunctionComponent<{ children?: React.ReactNode; caption?: string; showResetFilters?: boolean; showRecycleBinFilter?: boolean; collapsible?: boolean; collapsed?: boolean; list?: GenericList; listId?: string; className?: string; captionClassName?: string; }>; declare module '@knowmax/genericlist-core' { interface IOrder { } } /** Offers sort order options. Serializes and deserializes in query params of url. */ declare const OrderSelector: FunctionComponent<{ list: IOrder[]; listId?: string; }>; /** Offers operator options. Serializes and deserializes in query params of url. */ declare const OperatorSelector: FunctionComponent<{ filter: IFilter; listId?: string; }>; /** Renders a single filter. Serializes and deserializes in query params of url. */ declare const Filter: FunctionComponent<{ filter: IFilter; listId?: string; }>; /** Renders a single text input filter. Serializes and deserializes in query params of url. */ declare const FilterText: FunctionComponent<{ filter: IFilter; listId?: string; }>; /** Renders filter with renderCustom property set. */ declare const FilterCustom: FunctionComponent<{ filter: IFilter; listId?: string; }>; declare const FilterOptions: FunctionComponent<{ filter: IFilter; listId?: string; }>; /** Renders filter for boolean value. */ declare const FilterBoolean: FunctionComponent<{ filter: IFilter; listId?: string; }>; /** Renders list of filters. */ declare const FilterList: FunctionComponent<{ list: IFilter[]; listId?: string; className?: string; }>; /** Shows list of filters currently serialized in params of query. */ declare const SelectedFilterList: FunctionComponent<{ list: IFilter[]; hiddenOnly?: boolean; allowClear?: boolean; listId?: string; className?: string; }>; declare const SelectedFilter: FunctionComponent<{ filter: IFilter; value: string; allowClear: boolean; listId?: string; }>; /** Total number of items in generic list. */ declare const TotalItems: FunctionComponent<{ list: GenericList; }>; /** Dedicated pager wrapper including loader and total number of items for lists. */ declare const PagerWrapper: FunctionComponent<{ list: GenericList; className?: string; }>; declare const ResetFilters: FunctionComponent<{ list?: GenericList; listId?: string; }>; declare const RecycleBinFilter: FunctionComponent<{ listId?: string; }>; type IProps$1 = { list: GenericCudList; template?: ET; } & ButtonProps; /** Renders button to start process to create new item. */ declare const CreateItem: ((props: IProps$1) => react_jsx_runtime.JSX.Element) & { displayName: string; }; type IProps = { list: GenericList; } & ButtonProps; /** Renders button to refresh/reload the list data. */ declare const RefreshList: ((props: IProps) => react_jsx_runtime.JSX.Element) & { displayName: string; }; type IHeadPanelSharedProps = { /** Title to display in head panel. */ title?: string; /** Optional children to render between optional title and create item. */ children?: React.ReactNode; /** Set to show a refresh button on the right side of head panel. Only when @see list is set. */ showRefreshList?: boolean; /** Props for optional refresh list button. */ refreshListProps?: ButtonProps; /** Optional text to display for optional refresh list button. */ refreshListText?: string; /** Optional class name to merge with default class. */ className?: string; /** * Set to show a layout selector on the right side of the head panel. Defaults to false. * Requires @see layout and @see onLayoutChange to be set. */ showLayoutSelector?: boolean; /** Currently active layout. Required when @see showLayoutSelector is true. */ layout?: TListLayout; /** Callback fired when the user selects a different layout. Required when @see showLayoutSelector is true. */ onLayoutChange?: (layout: TListLayout) => void; /** Restrict the layouts offered in the selector. Defaults to all four layouts. */ availableLayouts?: TListLayout[]; }; type IHeadPanelRefreshOnlyProps = IHeadPanelSharedProps & { /** List associated with head panel, used for refresh functionality. */ list?: GenericList; /** Set to show create item button on the right side of head panel. */ showCreateItem?: false; /** Create item props are only supported when list supports create(). */ createItemProps?: never; /** Create item text is only supported when list supports create(). */ createItemText?: never; }; type IHeadPanelCudProps = IHeadPanelSharedProps & { /** List associated with head panel, needed to show create item. */ list?: GenericCudList; /** Set to show create item button on the right side of head panel. Only when @see list supports create(). */ showCreateItem?: boolean; /** Props for optional create item. */ createItemProps?: ButtonProps & { template?: ET; }; /** Optional text to display for optional create item. */ createItemText?: string; }; type IHeadPanelProps = IHeadPanelRefreshOnlyProps | IHeadPanelCudProps; /** Use to put a fancy head panel above list. For example containing list title, custom contents and create button. */ declare const HeadPanel: ((props: IHeadPanelProps) => react_jsx_runtime.JSX.Element) & { displayName: string; }; type TLayoutOption = { layout: TListLayout; /** Translation key used with onTranslate, or a fallback label when not translated. */ labelKey: string; /** Fallback label shown when no translator is configured. */ defaultLabel: string; icon: JSX.Element; }; /** Default layout options. Labels are resolved via the onTranslate mechanism at render time. */ declare const ALL_LAYOUT_OPTIONS: TLayoutOption[]; interface ILayoutSelectorProps { /** Currently active layout. */ value: TListLayout; /** Callback fired when the user selects a different layout. */ onChange: (layout: TListLayout) => void; /** * Subset of layouts to offer. Defaults to all four layouts. * When exactly two layouts are provided a two-icon toggle bar is shown; * for three or more a menu button is shown. */ availableLayouts?: TListLayout[]; } /** Renders a layout selector for a list. Shows a two-icon toggle for two options, or a menu button for three or more. */ declare const LayoutSelector: FunctionComponent; export { ALL_LAYOUT_OPTIONS, CreateItem, Filter, FilterBoolean, FilterCustom, FilterList, FilterOptions, FilterText, HeadPanel, type ILayoutSelectorProps, type IListProps, type IVirtualizedListProps, LayoutSelector, List, ListItemPanel, ListPanel, OperatorSelector, OrderSelector, PagerWrapper, RecycleBinFilter, RefreshList, ResetFilters, SelectedFilter, SelectedFilterList, SidePanel, type TLayoutOption, type TListLayout, type TOnRenderListItem, TotalItems, VirtualizedList };