import { n as ExportOptions } from "./exporter-zK7PhTrL.js"; import React, { CSSProperties, ComponentType, DependencyList, ReactNode, Ref } from "react"; import { CSSObject, ComponentSelector, Interpolation, Keyframes, SerializedStyles, Theme } from "@emotion/react"; import { Store } from "schummar-state/react"; //#region src/internalState/tableStateStorage.d.ts type TableStateStorage = { getItem: (key: string) => string | null | Promise; setItem: (key: string, value: string) => unknown | Promise; removeItem: (key: string) => unknown | Promise; } & ({ keys: () => string[] | Promise; } | { length: number | (() => number | Promise); key: (keyIndex: number) => string | null | Promise; }); //#endregion //#region src/types.d.ts type Sort = { columnId: string | number; direction: SortDirection; locale?: string; options?: Intl.CollatorOptions; }; type SortDirection = 'asc' | 'desc'; type Id = string | number; type KeyOfType = { [K in keyof T]: T[K] extends S ? K : never }[keyof T]; type FunctionWithDeps any> = F | [function: F, ...deps: DependencyList]; type MemoizedFunctions = { [K in keyof T]: Exclude any, ...deps: DependencyList]> }; type InterpolationPrimitive = null | undefined | boolean | number | string | ComponentSelector | Keyframes | SerializedStyles | CSSObject; interface ArrayCSSInterpolation extends ReadonlyArray {} type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation; type Falsy = false | 0 | '' | null | undefined; type DisplaySize = 'desktop' | 'mobile' | (string & {}); type DisplaySizes = Partial>; interface TableTheme { /** Define display texts. */ text: { selectColumns: ReactNode; showAllColumns: ReactNode; hideAllColumns: ReactNode; noResults: ReactNode; exportTitle: ReactNode; exportCopy: ReactNode; exportDownload: ReactNode; today: ReactNode; thisWeek: ReactNode; thisMonth: ReactNode; thisYear: ReactNode; lastSevenDays: ReactNode; lastThirtyDays: ReactNode; reset: ReactNode; loading: ReactNode; clearFilters: ReactNode; deselectAll: ReactNode; resetAll: ReactNode; rangeMin: ReactNode; rangeMax: ReactNode; calendarWeek: ReactNode; }; /** Define styles. */ classes?: { table?: string; row?: string | FunctionWithDeps<(item: TItem, index: number) => string | undefined>; headerCell?: string; footerCell?: string; cell?: string | FunctionWithDeps<(item: TItem, index: number) => string | undefined>; evenCell?: string; oddCell?: string; popover?: string; popoverBackdrop?: string; dialog?: string; columnDivider?: string; details?: string | FunctionWithDeps<(item: TItem, index: number) => string | undefined>; }; styles?: { table?: Interpolation; row?: CSSInterpolation | FunctionWithDeps<(item: TItem, index: number) => CSSInterpolation | CSSInterpolation[]>; headerCell?: Interpolation; footerCell?: Interpolation; cell?: CSSInterpolation | FunctionWithDeps<(item: TItem, index: number) => Interpolation>; evenCell?: Interpolation; oddCell?: Interpolation; popover?: Interpolation; popoverBackdrop?: CSSInterpolation; dialog?: Interpolation; columnDivider?: Interpolation; details?: Exclude, ((...args: any[]) => any) | Array> | FunctionWithDeps<(item: TItem, index: number) => Interpolation>; }; /** Define components to be used in the table. */ components: { IconButton: ComponentType<{ children: ReactNode; onClick?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void; className?: string; type?: React.ButtonHTMLAttributes['type']; }>; Button: ComponentType<{ children: ReactNode; onClick?: (event: React.MouseEvent) => void; onContextMenu?: (event: React.MouseEvent) => void; startIcon?: ReactNode; variant?: 'text' | 'outlined' | 'contained'; disabled?: boolean; className?: string; type?: React.ButtonHTMLAttributes['type']; }>; Checkbox: ComponentType<{ checked: boolean; onChange: (event: React.ChangeEvent) => void; disabled?: boolean; className?: string; }>; Popover: ComponentType<{ anchorEl: Element | null; open: boolean; hidden?: boolean; onClose: () => void; children: ReactNode; className?: string; backdropClassName?: string; align?: 'center' | 'left'; }>; Badge: ComponentType<{ children: ReactNode; badgeContent: ReactNode; }>; TextField: ComponentType<{ value?: string | null; onChange?: (event: React.ChangeEvent) => void; onKeyUp?: (event: React.KeyboardEvent) => void; onBlur?: (event: React.FocusEvent) => void; startIcon?: ReactNode; endIcon?: ReactNode; className?: string; inputRef?: Ref; placeholder?: string; }>; Spinner: (props: { className?: string; }) => JSX.Element; }; /** Define icons for the table. */ icons: { [K in 'Settings' | 'Export' | 'Clipboard' | 'ChevronRight' | 'Search' | 'Clear' | 'ArrowDropDown' | 'FilterList' | 'ArrowUpward']: ComponentType<{ className?: string; }> }; /** Define colors */ colors: { primary: { main: string; light: string; contrastText: string; }; secondary: { main: string; light: string; contrastText: string; }; blocked: { main: string; light: string; contrastText: string; }; background: string; text: string; border: string; borderLight: string; }; /** Spacing. */ spacing: string | number; /** Locale for number and date rendering */ locale?: string; } type PartialTableTheme = { [K in keyof TableTheme]?: TableTheme[K] extends Record ? Partial[K]> : TableTheme[K] }; type MemoizedTableTheme = Omit & { classes: MemoizedFunctions['classes']>; styles: MemoizedFunctions['styles']>; text: MemoizedFunctions['text']>; }; type ColumnGenerator = (col: ColumnFactory) => (Column | Falsy)[]; type ColumnFactory = (value: FunctionWithDeps<(item: TItem) => TColumnValue>, column: Omit, 'value'>) => Column; interface TableProps extends PartialTableTheme { /** The data to be rendered. One item per row. */ items?: readonly TItem[]; /** Unique id for each item/row. */ id: FunctionWithDeps<(item: TItem) => Id> | KeyOfType; /** Create a nested structure by assigning parents to items. Child items are hidden until the parent is expanded. */ parentId?: FunctionWithDeps<(item: TItem) => Id | undefined> | KeyOfType; /** If true for an item, it means that children will be loaded asynchronously as soon as item is expanded. */ hasDeferredChildren?: (item: TItem) => boolean; /** Column definitions. */ columns: (Column | Falsy)[] | ColumnGenerator; /** Default props for all column. Will take effect if not overriden in column definition. */ defaultColumnProps?: Omit, 'id' | 'value'>; /** Set props for multiple columns at once. Will take effect if not overriden in column definition. */ columnProps?: FunctionWithDeps<(id: Id) => Partial, 'id'>>>; /** Wrap each row */ wrapRow?: FunctionWithDeps<(props: { className?: string; style?: CSSProperties; children?: ReactNode; }, item: TItem, index: number) => ReactNode>; /** Wrap each cell */ wrapCell?: FunctionWithDeps<(content: ReactNode, value: unknown, item: TItem, index: number) => ReactNode>; /** Display a cell at the start of each row. Useful for "go to details" button for example. */ rowAction?: ReactNode | FunctionWithDeps<(item: TItem, index: number) => ReactNode>; /** Expand row to show details. */ rowDetails?: ReactNode | FunctionWithDeps<(item: TItem, index: number) => ReactNode>; /** Default sort order. */ defaultSort?: Sort[]; /** If given, controls the sort order. */ sort?: Sort[]; /** Called when sort order changes. */ onSortChange?: (sort: Sort[]) => void; /** Handle sorting externally, e.g. server side */ externalSort?: boolean; /** Disable sort for all columns (can be override per column) */ disableSort?: boolean; /** Default selection. */ defaultSelection?: Set; /** If given, controls the selection. */ selection?: Set; /** Called when selection changes. */ onSelectionChange?: (selection: Set) => void; /** Whether to show checkboxes at the start of each row. * @default true */ enableSelection?: boolean; /** Select and deselect children if a parent is selected or deselected. * @default true */ selectSyncChildren?: boolean; /** Expand parents whose children fit a newly selected filter * @default false */ revealFiltered?: boolean; /** Default expanded rows. */ defaultExpanded?: Set; /** If given, controls expanded rows. */ expanded?: Set; /** Called when expanded rows change. */ onExpandedChange?: (expanded: Set) => void; /** If enabled and one row is expanded, other rows will be closed. * @default false */ expandOnlyOne?: boolean; /** Default hidden columns. */ defaultHiddenColumns?: Set; /** If given, controls hidden columns. */ hiddenColumns?: Set; /** Called when hidden columns change. */ onHiddenColumnsChange?: (hiddenColumns: Set) => void; /** Whether to stretch the table component over the available space. If value is "left" or "right", align accordingly. */ fullWidth?: boolean | 'left' | 'right'; /** Whether the table header should be sticky. * @default true */ stickyHeader?: boolean | { top: number; }; /** Whether the table footer should be sticky. * @default true */ stickyFooter?: boolean | { bottom: number; }; /** Whether the table cells should only be rendered when in viewport. * @default true */ virtual?: boolean | { rowHeight?: number; initalRowHeight?: number; throttleScroll?: number; overscan?: number; overscanBottom?: number; overscanTop?: number; }; /** Whether to use a subgrid layout */ subgrid?: boolean; /** Enable menu to select which columns are visible. * @default true */ enableColumnSelection?: boolean; /** Enable exporting to csv. * @default false */ enableExport?: boolean | ExportOptions; /** Shows a button to clear all filters while any are active * @default false */ enableClearFiltersButton?: boolean; /** Allow to drag and drop column separators to resize the column left of it. * @default true */ enableColumnResize?: boolean | 'visualOnly'; /** Allow to drag and drop column header to reorder columns. * @default true */ enableColumnReorder?: boolean; /** If enabled, automatically store table state in localStorage, localForage or another compatible storage. */ persist?: { storage: TableStateStorage; id: string; include?: ('sort' | 'selection' | 'expanded' | 'hiddenColumns' | 'filterValues' | 'columnWidths' | 'columnOrder')[]; exclude?: ('sort' | 'selection' | 'expanded' | 'hiddenColumns' | 'filterValues' | 'columnWidths' | 'columnOrder')[]; }; /** The current screen size. Used to determine which columns to display. * Either assert the size manually - e.g. "mobile" or "desktop". * Or provide a map of screen sizes to maximum pixel widths of the screen. * If not provided, <= 400 px will be "mobile", else "desktop". * * @example * displaySize: 'mobile' // assert the size manually * displaySize: { mobile: 450, desktop: Infinity } // provide a map of screen sizes * */ displaySize?: DisplaySize | DisplaySizes; displaySizeOverrides?: Partial, 'displaySize' | 'displaySizeOverrides'>>>>; debug?: (...output: any) => void; debugRender?: (...output: any) => void; onReset?: (scope?: 'table' | 'filters') => void; } interface TableRef { getSort: () => Sort[]; setSort: (sort: Sort[]) => void; getSelection: () => Set; setSelection: (selection: Set) => void; getExpanded: () => Set; setExpanded: (expanded: Set) => void; getHiddenColumns: () => Set; setHiddenColumns: (hidden: Set) => void; } type InternalTableProps = MemoizedFunctions, 'id' | 'parentId' | 'columns' | 'defaultColumnProps' | 'displaySizeOverrides'> & { id: (item: TItem) => Id; parentId?: (item: TItem) => Id | undefined; columns: InternalColumn[]; displaySizeOverrides?: Partial, 'displaySize' | 'displaySizeOverrides'>>>>; }>; type TableItem = { id: Id; parentId?: Id | null; children: TableItem[]; value: TItem; }; type Column = { /** Column id. If not provided, the index in the column array will be used. * An explicit id is better however for controlling column related states, persitance etc. */ id?: string; /** Render table header for this column. */ header?: ReactNode; exportHeader?: string | number | Date; /** Render table header for this column. */ footer?: ReactNode; /** Extract value for this column */ value: FunctionWithDeps<(item: TItem) => TColumnValue>; /** Render table cell. If not provided, a string representation of the value will be rendered. */ renderCell?: FunctionWithDeps<(value: TColumnValue, item: TItem) => ReactNode>; /** Serialize column value for exports. If not provided, a string representation of the value will be used. */ exportCell?: (value: TColumnValue, item: TItem) => string | number | Date; /** Customize sort criteria. By default it will be the value itself in case it's a number or Date, or a string representation of the value otherwise. */ sortBy?: FunctionWithDeps<(value: TColumnValue, item: TItem) => unknown>[]; /** Disable sort for this column */ disableSort?: boolean; /** Set filter component that will be displayed in the column header */ filter?: ReactNode; /** Override whether the column is hidden. If set, prevents toggling the column via menu. */ hidden?: boolean; /** Specify a css width. * @default 'max-content' */ width?: string; /** Provide css class names to override columns styles. */ classes?: Omit['classes']>, 'table' | 'details'>; /** Provide css styles to override columns styles. */ styles?: Omit['styles']>, 'table' | 'details'>; /** Specify the screen size(s) for which this column should be displayed. */ displaySize?: DisplaySize | DisplaySize[]; }; type InternalColumn = MemoizedFunctions, 'id' | 'sortBy' | 'displaySize'>, 'header' | 'exportHeader' | 'renderCell' | 'exportCell' | 'sortBy'> & { id: Id; sortBy: ((value: TColumnValue, item: TItem) => unknown)[]; displaySize: DisplaySize[] | undefined; }>; type Required = T & { [P in keyof T as P extends S ? P : never]-?: T[P] }; type InternalTableState = { normalizedProps: InternalTableProps; props: InternalTableProps; key: any; sort: Sort[]; selection: Set; expanded: Set; rowHeights: Map; rowHeightsKey: number; filters: Map>>; filterValues: Map; hiddenColumns: Set; columnWidths: Map; columnOrder: Id[]; columnStyleOverride: Map; activeColumns: InternalColumn[]; visibleColumns: InternalColumn[]; items: TableItem[]; itemsById: Map>; activeItems: TableItem[]; activeItemsById: Map>; lastSelectedId?: Id; displaySizePx: number | undefined; displaySize: DisplaySize | undefined; }; type CommonFilterProps = { /** Filter by? By default the column value will be used. If filterBy returns an array, an items will be active if at least one entry matches the active filter. */ filterBy?: FunctionWithDeps<(value: TColumnValue, item: TItem) => TFilterBy | TFilterBy[]>; /** Preselected filter value. */ defaultValue?: TFilterValue; /** Controlled filter value. */ value?: TFilterValue; /** Notifies on filter change. */ onChange?: (value?: TFilterValue) => void; /** Table should not filter using this filter. It will be done externally, e.g. server side. */ external?: boolean; /** Whether to persist filter value (given that filter persitance is enabled for the table). * @default true */ persist?: boolean; classNames?: { popover?: string; popoverBackdrop?: string; }; }; type FilterImplementation = CommonFilterProps & { /** Unique filter id. Used to persist filter values. */ id: string; /** Whether the filter is active currently. */ isActive: (filterValue: TFilterValue) => boolean; /** When the filter is active, this function is used to filter the items to be displayed. */ test: (filterValue: TFilterValue, value: TFilterBy) => boolean; }; //#endregion export { TableTheme as _, FilterImplementation as a, InternalColumn as c, PartialTableTheme as d, Sort as f, TableRef as g, TableProps as h, CommonFilterProps as i, InternalTableState as l, TableItem as m, ColumnFactory as n, FunctionWithDeps as o, SortDirection as p, ColumnGenerator as r, Id as s, Column as t, MemoizedTableTheme as u, TableStateStorage as v }; //# sourceMappingURL=types-CJOB-Acy.d.ts.map