@wix/patterns 1.456.0 → 1.458.0

package/dist/dts-bundle/components/Table.d.ts

@@ -0,0 +1,175 @@
+import React, { ReactNode } from 'react';
+import { IconElement } from '@wix/design-system';
+
+/**
+ * `CollectionState` — you receive this, you don't construct it.
+ * Produced by `useFilterCollection()` (also `useStaticListFilterCollection()`, `useCollection()`, `createCollection()`).
+ */
+declare class CollectionState<T, F> {
+}
+
+/**
+ * `Filter` — cut here because it has its own bundle.
+ * Look `Filter` up in the bundle index for its full shape.
+ */
+interface Filter<T> {
+}
+type FiltersMap = {
+    [key: string]: Filter<any> | undefined;
+};
+
+/**
+ * `TableState` — you receive this, you don't construct it.
+ * Produced by `useTableCollection()` (also `useAmbassadorTable()`, `useTableContext()`). Look `TableState` up in the bundle index for its own API.
+ */
+declare class TableState<T, F> {
+}
+
+interface CtaBaseProps {
+    /**
+     * A unique identifier for the CTA.
+     * @external
+     */
+    id: string;
+    /**
+     * A callback that runs each time the button is clicked.
+     * @external
+     */
+    onClick?: () => void;
+    /**
+     * Button label.
+     * @external
+     */
+    label?: string;
+    /**
+     * An optional Icon prefix.
+     * @external
+     */
+    prefixIcon?: IconElement;
+}
+
+interface SectionBadgeConfig {
+    visible: boolean;
+    skin?: 'light' | 'danger' | 'neutralLight';
+}
+/**
+ * A summary item to display in the section header.
+ * @external
+ */
+interface SectionSummaryItem {
+    /**
+     * An icon to display before the text.
+     * @external
+     */
+    icon: ReactNode;
+    /**
+     * A label for the summary item.
+     * @external
+     */
+    text: string;
+    /**
+     * A count value for the summary item.
+     * @external
+     */
+    count: number;
+}
+interface Section {
+    /**
+     * A title for the section.
+     * @external
+     */
+    title: string;
+    /**
+     * A primary call to action for the section.
+     * @overrideType [CtaBaseProps](./?path=/story/common-types--ctabaseprops)
+     * @external
+     */
+    primaryAction?: CtaBaseProps;
+    /**
+     * A badge for the section. Configuration object for showing item count.
+     * @external
+     */
+    badge?: SectionBadgeConfig;
+    /**
+     * Summary items to display in the section header.
+     * Each item can have an icon, text label, and count.
+     * @external
+     */
+    summary?: SectionSummaryItem[];
+    /**
+     * Whether the section is collapsed.
+     * When true, the section items are hidden.
+     * @external
+     */
+    collapsed?: boolean;
+}
+/**
+ * A function that extracts the grouping key from an item.
+ * @external
+ */
+type GroupBy<T> = (item: T) => string;
+/**
+ * A function that renders section configuration given the section ID and all items in the section.
+ * @external
+ */
+type RenderSection<T> = (sectionId: string, items: T[]) => Section;
+/**
+ * Event callbacks for section interactions.
+ * @external
+ */
+interface SectionEvents {
+    /**
+     * Called when a section is toggled (collapsed/expanded).
+     * @param sectionId - The ID of the section being toggled
+     * @param isCollapsed - Whether the section is now collapsed
+     * @external
+     */
+    onToggle?: (sectionId: string, isCollapsed: boolean) => void;
+}
+
+interface TableSectionsProps<T, F extends FiltersMap> extends CollectionTableBaseProps<T, F> {
+    groupBy: GroupBy<T>;
+    renderSection: RenderSection<T>;
+    table: TableState<T, F>;
+    collapsible?: boolean;
+    events?: SectionEvents;
+}
+declare const TableSections: (<T, F extends FiltersMap>({ groupBy, renderSection, table, columns, rowDetails, collapsible, events, ...collectionTableProps }: TableSectionsProps<T, F>) => React.JSX.Element) & {
+    displayName: string;
+};
+type TableSectionsProp<T> = {
+    TableSections: typeof TableSections;
+    groupBy: GroupBy<T>;
+    renderSection: RenderSection<T>;
+    collapsible?: boolean;
+    events?: SectionEvents;
+};
+
+/**
+ * `CollectionTableBaseProps` — cut here because it has its own bundle.
+ * Look `CollectionTableBaseProps` up in the bundle index for its full shape.
+ */
+interface CollectionTableBaseProps<T, F> {
+}
+
+interface TableProps<T, F extends FiltersMap> extends CollectionTableBaseProps<T, F> {
+    rowHeight?: number | ((item: T, index: number) => number);
+    estimatedRowHeight?: number;
+    /**
+     * A state instance created using the [`useTableCollection()`](./?path=/story/base-components-collections-table-usetablecollection--usetablecollection) hook, responsible for managing the data displayed in the table.
+     * @overrideType [TableState](./?path=/story/base-components-collections-table-tablestate--tablestate)
+     * @external
+     */
+    state: CollectionState<T, F> | TableState<T, F>;
+    isVirtual?: boolean;
+    /**
+     * Configuration for rendering table sections. When provided, the table will render with section headers
+     * that group related rows together
+     * @external
+     */
+    sections?: TableSectionsProp<T>;
+}
+declare function Table<T, F extends FiltersMap = FiltersMap>(props: TableProps<T, F>): React.JSX.Element;
+
+export { Table };
+export type { TableProps };

package/dist/dts-bundle/components/TableFolders.d.ts

@@ -0,0 +1,222 @@
+import React, { ReactElement, ReactNode, ComponentType, ForwardRefExoticComponent } from 'react';
+import { MessageModalLayoutProps, TableProps } from '@wix/design-system';
+import { TableColumn as TableColumn$1 } from '@wix/design-system/dist/types/Table';
+
+/**
+ * `CollectionState` — you receive this, you don't construct it.
+ * Produced by `useFilterCollection()` (also `useStaticListFilterCollection()`, `useCollection()`, `createCollection()`).
+ */
+declare class CollectionState<T, F> {
+}
+
+/**
+ * `Filter` — cut here because it has its own bundle.
+ * Look `Filter` up in the bundle index for its full shape.
+ */
+interface Filter<T> {
+}
+type FiltersMap = {
+    [key: string]: Filter<any> | undefined;
+};
+
+interface KeyedItem<T> {
+    item: T;
+    key: string;
+    id: string;
+    pageIndex: number;
+    indexWithinPage: number;
+    index: number;
+}
+
+interface ActionCellAPI$1<T, F extends FiltersMap> {
+    openConfirmModal: (props?: Partial<MessageModalLayoutProps>) => void;
+    openConfirmDeleteModal: (props?: Partial<MessageModalLayoutProps>) => void;
+    collection: CollectionState<T, F>;
+    keyedItem: KeyedItem<T>;
+}
+
+type ActionCellAPI<T, F extends FiltersMap> = ActionCellAPI$1<T, F>;
+/**
+ * `ActionCellProps` — cut here because it has its own bundle.
+ * Look `ActionCellProps` up in the bundle index for its full shape.
+ */
+interface ActionCellProps {
+}
+type ActionCell<T, F extends FiltersMap> = ActionCellProps | ((item: T, index: number, api: ActionCellAPI<T, F>) => ActionCellProps);
+
+type MultiCollectionBulkActionToolbarRenderProps = (props: {
+    readonly allSelected: boolean;
+    readonly isModalOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+    clearSelection: () => void;
+    openConfirmModal: (props?: Partial<MessageModalLayoutProps>) => void;
+}) => ReactElement;
+type MultiCollectionBulkActionModalRenderProps = (props: {
+    allSelected: boolean;
+    readonly isModalOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+    clearSelection: () => void;
+    openConfirmModal: (props?: Partial<MessageModalLayoutProps>) => void;
+}) => ReactElement;
+
+/**
+ * `ToolbarCollectionState` — you receive this, you don't construct it.
+ * Produced by `useToolbarCollectionContext()` (also `useTableCollectionSyncProps()`, `useKanbanCollectionSyncProps()`, `useToolbarCollectionSyncProps()`).
+ */
+declare class ToolbarCollectionState<T, F> {
+}
+
+/**
+ * `ToolbarCollectionBaseProps` — cut here because it has its own bundle.
+ * Look `ToolbarCollectionBaseProps` up in the bundle index for its full shape.
+ */
+interface ToolbarCollectionBaseProps<T, F> {
+}
+
+type PartialAllFilters<F1 extends FiltersMap, F2 extends FiltersMap> = Partial<F1 & F2>;
+
+interface Item<T1> {
+    _tag: 'item';
+    originalKeyedItem: KeyedItem<T1>;
+}
+interface Folder<T2> {
+    _tag: 'folder';
+    originalKeyedItem: KeyedItem<T2>;
+}
+type RowItem<T1, T2> = Item<T1> | Folder<T2>;
+/**
+ * `TableFoldersState` — you receive this, you don't construct it.
+ * Produced by `useTableFolders()` (also `useTableFoldersSyncProps()`). Look `TableFoldersState` up in the bundle index for its own API.
+ */
+declare class TableFoldersState<T1, F1, T2, F2> {
+}
+
+/**
+ * `TableColumn` — cut here because it has its own bundle.
+ * Look `TableColumn` up in the bundle index for its full shape.
+ */
+type TableColumn<T> = unknown;
+
+interface CollectionTableContentBaseProps {
+    children?: ReactNode;
+}
+
+interface CollectionToolbarsVisualizationProps<T, F extends FiltersMap> {
+    state: ToolbarCollectionState<T, F>;
+    visualization: ComponentType<{
+        state: ToolbarCollectionState<T, F>;
+    }>;
+}
+
+interface CollectionTableWSRTableBaseProps<U, T, F extends FiltersMap> extends ToolbarCollectionBaseProps<T, F>, CollectionTableContentBaseProps, Omit<TableProps<KeyedItem<U>>, 'columns' | 'data' | 'rowDataHook' | 'onRowClick' | 'onDragEnd' | 'onDragStart' | 'onDragCancel' | 'isDragAndDropDisabled' | 'hideBulkSelectionCheckbox' | 'skin'> {
+    /**
+     * @deprecated The table skin is determined internally and any value passed here is ignored. This prop will be removed in a future release.
+     */
+    skin?: TableProps<KeyedItem<U>>['skin'];
+    useShowLoaderWhenEmpty?: boolean;
+    useNewInfiniteScrollLoader?: boolean;
+    /**
+     * Whether to add a sticky column. <br>
+     * Sticky columns allow you to display specific columns at all times while the visitor scrolls the table horizontally.
+     * @external
+     */
+    stickySelectionColumn?: boolean;
+    /**
+     * Limits the amount of rows a visitor can select.
+     * @external
+     */
+    maxSelection?: number;
+    /**
+     * Hides bulk selection checkbox in the table titlebar, If the [`MultiBulkActionToolbar`](./?path=/story/features-actions-bulk-actions--multibulkactiontoolbar) feature is enabled, this flag will have no effect.
+     * @external
+     */
+    hideBulkSelectionCheckbox?: boolean;
+    BodyElementType?: ComponentType<{
+        children: ReactElement[];
+    }>;
+    TrElementType?: ForwardRefExoticComponent<{
+        children: ReactElement[];
+        rowData: any;
+        className: string;
+    }>;
+    visualization?: CollectionToolbarsVisualizationProps<T, F>['visualization'];
+}
+
+interface ActionCellPropsType<T> extends Partial<Omit<TableColumn$1<T>, 'render' | 'style'>> {
+}
+interface CollectionTableActionCellProps<T, F extends FiltersMap> {
+    /**
+     * Use this property to add an action at the end of each row. For example, a delete button to delete a table item.
+     * Accepts an [`ActionCellProps`](./?path=/story/features-actions-action-cell--actioncellprops) object, or a function that returns an `ActionCellProps` object.
+     * @external
+     */
+    actionCell?: ActionCell<T, F>;
+    /**
+     * Width of the column containing the `actionCell` component.
+     *
+     * @external
+     */
+    actionCellWidth?: string | number;
+    /**
+     * Extra columns props for the actions cell.
+     */
+    actionCellProps?: ActionCellPropsType<T>;
+}
+
+type TableFoldersColumn<T1, T2> = TableColumn<T1> & {
+    renderFolder?: (row: T2, rowNum: number) => ReactNode;
+};
+
+type TableFolderWSRTableBaseProps<T1, F1 extends FiltersMap, T2, F2 extends FiltersMap> = CollectionTableWSRTableBaseProps<RowItem<T1, T2>, T1, PartialAllFilters<F1, F2>>;
+interface TableFoldersContentProps<T1, F1 extends FiltersMap, T2, F2 extends FiltersMap> extends Omit<TableFolderWSRTableBaseProps<T1, F1, T2, F2>, 'actionCell' | 'sticky' | 'topNotification' | 'selectionDisabled'>, CollectionTableActionCellProps<T1, F1> {
+    dataHook?: string;
+    /** A TableFoldersState instance created using [useTableFolders](./?path=/story/base-components-collections-tablefolders-usetablefolders--usetablefolders). */
+    state: TableFoldersState<T1, F1, T2, F2>;
+    /** The same as [Table.columns](./?path=/story/base-components-collections-table-table--table), with the addition of `renderFolder` property. */
+    columns: TableFoldersColumn<T1, T2>[];
+    /** Specific entry for rendering the item icon, defaults to simple `Avatar` (for folders a `Folder` icon is rendered). */
+    iconColumn?: TableFoldersColumn<T1, T2>;
+    onRowClick?: (item: T1, index: number) => void;
+    /** Callback for folder row click  */
+    onFolderRowClick?: (item: T2, index: number) => void;
+    /** Disables row checkbox */
+    selectionDisabled?: (item: T1 | T2) => void;
+    folderActionCell?: ActionCell<T2, F2>;
+    topNotification?: ReactElement;
+    /**
+     * A toolbar for performing bulk actions on multiple items.
+     * Supported parameters:
+     *  + `selectedValues`: Selected item values.
+     *  + `uncheckedValues`: Unselected item values.
+     *  + `isSelectAll`: [bool] Whether the **Select All** option is selected.
+     *  + `openModal`: Opens a modal that contains the component from `bulkActionModal` render prop.
+     *  + `clearSelection`: Clears all selections. Call this after the action on the selected items finishes.
+     *  + `closeModal`: Closes the modal.
+     *  + `openConfirmModal`: Opens a `<MessageModalLayout />` to confirm an action to be applied to the selected items.
+     *  + `query`: [object] Instance of [ComputedQuery](./?path=/story/common-types--computedquery) that represents the query that resulted in an empty state. Representation of the current paging, sorting and filtering applied. Usually for using together with bulk action such as `updateAll` and `deleteAll`.
+     * @external
+     */
+    bulkActionToolbar?: MultiCollectionBulkActionToolbarRenderProps;
+    /**
+     * Render a modal to be opened from `bulkActionToolbar`.<br>
+     * The function accepts the following parameters
+     *   * `allSelected`: Indicates whether the "Select All" checkbox is checked
+     *   * `closeModal`: Closes the a modal
+     */
+    bulkActionModal?: MultiCollectionBulkActionModalRenderProps;
+}
+
+interface TableFoldersProps<T1, F1 extends FiltersMap, T2, F2 extends FiltersMap> extends TableFoldersContentProps<T1, F1, T2, F2> {
+    dataHook?: string;
+    rowHeight?: number;
+    estimatedRowHeight?: number;
+}
+declare function _TableFolders<T1, F1 extends FiltersMap, T2, F2 extends FiltersMap>(props: TableFoldersProps<T1, F1, T2, F2>): React.JSX.Element;
+declare const TableFolders: typeof _TableFolders & {
+    displayName: string;
+};
+
+export { TableFolders };
+export type { TableFoldersProps };