@vuu-ui/vuu-table-extras 3.3.9 → 3.3.11

package/types/src/csv-upload/useCsvUpload.d.ts

@@ -0,0 +1,43 @@
+import type { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
+import { type RowDefaultDataItemValues } from "@vuu-ui/vuu-data-editing";
+import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import { type CsvParseOptions } from "./parse/csv-parse";
+import { type CsvValidationResult, type CsvColumnValidator } from "./parse/csv-schema-validation";
+import type { CsvUploadErrorResult, CsvUploadImportedResult, CsvUploadPreviewResult, CsvUploadSessionEndResult, CsvUploadSessionTable } from "./CsvUpload";
+export interface CsvUploadHookProps {
+    dataSource: DataSource;
+    importMode?: "direct" | "preview";
+    /**
+     * Schema of the import table, where it differs from the target table. Used to validate
+     * the CSV and to determine the session datasource columns. If omitted and importTable is
+     * provided, the schema is fetched via getTableSchema. Pass a stable reference.
+     */
+    importSchema?: TableSchema;
+    /** Expected import table, used to validate the session table returned by the server. */
+    importTable?: VuuTable;
+    maxRows?: number;
+    onImportSessionEnded?: (result: CsvUploadSessionEndResult) => void;
+    onImportSessionStarted?: (dataSource: DataSource) => void;
+    onError?: (result: CsvUploadErrorResult | undefined) => void;
+    onImported?: (result: CsvUploadImportedResult) => void;
+    onPreview?: (result: CsvUploadPreviewResult) => void;
+    onProcessingStarted?: () => void;
+    parseOptions?: CsvParseOptions;
+    /** Default column values applied to every addRow call. Pass a stable reference — a new object triggers EditSession recreation. */
+    rowDefaults?: RowDefaultDataItemValues;
+    validators?: Record<string, CsvColumnValidator>;
+}
+export type UseCsvUploadReturn = {
+    canImport: boolean;
+    cancelImport: () => Promise<void>;
+    importData: () => Promise<boolean>;
+    isImporting: boolean;
+    isProcessingFile: boolean;
+    onDrop: (_event: React.DragEvent<HTMLDivElement>, files: File[]) => void;
+    onTriggerChange: (_event: React.ChangeEvent<HTMLInputElement>, files: File[]) => void;
+    sessionTable: CsvUploadSessionTable | undefined;
+    schema: TableSchema | undefined;
+    validation: CsvValidationResult | undefined;
+    error: CsvUploadErrorResult | undefined;
+};
+export declare const useCsvUpload: ({ dataSource, importMode, importSchema, importTable, onImportSessionEnded, onImportSessionStarted, onError, onImported, onPreview, onProcessingStarted, maxRows, parseOptions, rowDefaults, validators, }: CsvUploadHookProps) => UseCsvUploadReturn;

package/types/src/datasource-stats/DatasourceStats.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+import { DatasourceStatsHookProps } from "./useDatasourceStats";
+export type ItemLabel = string | {
+    singlular: string;
+    plural: string;
+};
+export interface DataSourceStatsProps extends DatasourceStatsHookProps, Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * children will be displayed when selection present. Intended
+     * use case is display of action button(s) that will operate on
+     * selected rows.
+     */
+    children?: ReactNode;
+    selectionActions?: ReactNode;
+    tooltrayActions?: ReactNode;
+}
+export declare const DataSourceStats: ({ children, className, dataSource, showRowStats, tooltrayActions, ...htmlAttributes }: DataSourceStatsProps) => import("react").JSX.Element;

package/types/src/datasource-stats/useDatasourceStats.d.ts

@@ -0,0 +1,15 @@
+import { DataSource } from "@vuu-ui/vuu-data-types";
+import { Range } from "@vuu-ui/vuu-utils";
+export interface DatasourceStatsHookProps {
+    dataSource: DataSource;
+    showFreezeStatus?: boolean;
+    showRowStats?: boolean;
+    showSelectionStats?: boolean;
+}
+export declare const useDatasourceStats: ({ dataSource, }: DatasourceStatsHookProps) => {
+    range: Range;
+    selectedCount: number;
+    size: number;
+    freezeTime: string | undefined;
+    maxScroll: number;
+};

package/types/src/freeze-control/FreezeControl.d.ts

@@ -0,0 +1,15 @@
+import { type FreezeProps } from "./useFreezeControl";
+import { HTMLAttributes } from "react";
+export interface FreezeControlProps extends HTMLAttributes<HTMLDivElement>, FreezeProps {
+    /**
+     * Label shown when the table is frozen next to the new record badge.
+     * @default "New Orders"
+     */
+    newItemsLabel?: string;
+    /**
+     * Duration of the flash animation for the badge (in seconds).
+     * @default 0.25
+     */
+    flashDuration?: number;
+}
+export declare const FreezeControl: ({ dataSource, className, newItemsLabel, flashDuration, ...htmlAttributes }: FreezeControlProps) => import("react").JSX.Element;

package/types/src/freeze-control/FrozenBanner.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+import { DataSource } from "@vuu-ui/vuu-data-types";
+export interface FrozenBannerProps extends HTMLAttributes<HTMLDivElement> {
+    dataSource: DataSource;
+}
+export declare const FrozenBanner: ({ dataSource, className, ...htmlAttributes }: FrozenBannerProps) => import("react").JSX.Element | null;

package/types/src/freeze-control/freezeControlBadge.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Calculates the badge value and overflow state for FreezeControl
+ * It should max at 99, and when this is exceeded show 99+
+ *
+ * @param newRecordCount - int of new records
+ * @returns An object with `badgeValue` (the displayed number, max 99) and `isOverflow` (whether count exceeds 99)
+ */
+export declare const calculateBadgeState: (newRecordCount: number) => {
+    badgeValue: number;
+    isOverflow: boolean;
+};

package/types/src/freeze-control/useFreezeControl.d.ts

@@ -0,0 +1,10 @@
+import { DataSource } from "@vuu-ui/vuu-data-types";
+import { SyntheticEvent } from "react";
+export interface FreezeProps {
+    dataSource: DataSource;
+}
+export declare const useFreezeControl: ({ dataSource }: FreezeProps) => {
+    isFrozen: boolean;
+    newRecordCount: number;
+    onToggleChange: (evt: SyntheticEvent<HTMLButtonElement>) => void;
+};

package/types/src/index.d.ts

@@ -0,0 +1,26 @@
+export { CalculatedColumnPanel } from "./calculated-column/CalculatedColumnPanel";
+export * from "./csv-export";
+export * from "./csv-upload";
+export * from "./cell-edit-validators";
+export * from "./cell-renderers";
+export * from "./column-expression-input";
+export * from "./column-formatting-settings";
+export type { ColumnDisplayActionHandler, TableSettingsActionHandler, } from "./column-menu/column-action-types";
+export { ColumnMenu } from "./column-menu/ColumnMenu";
+export { useColumnActions } from "./column-menu/useColumnActions";
+export { ColumnChangeSource, ColumnModel, isColumnAdded, isColumnRemoved, isColumnsReordered, SelectedColumnChangeType, type ColumnEvents, type ColumnsChangeHandler, } from "./column-picker/ColumnModel";
+export { ColumnPicker, type ColumnPickerProps, } from "./column-picker/ColumnPicker";
+export { ColumnPickerAction } from "./column-picker/ColumnPickerAction";
+export type { SelectedColumnsChangeHandler } from "./column-picker/useColumnPicker";
+export { useTableColumnPicker } from "./column-picker/useTableColumnPicker";
+export { ColumnSettingsPanel } from "./column-settings-panel/ColumnSettingsPanel";
+export { useColumnSettings } from "./column-settings-panel/useColumnSettings";
+export { DataSourceStats, type DataSourceStatsProps, } from "./datasource-stats/DatasourceStats";
+export { FreezeControl } from "./freeze-control/FreezeControl";
+export { FrozenBanner } from "./freeze-control/FrozenBanner";
+export * from "./inline-add-row";
+export { TabbedTableConfigPanel } from "./tabbed-table-config-panel/TabbedTableConfigPanel";
+export { TabbedTableSettingsAction } from "./tabbed-table-config-panel/TabbedTableSettingsAction";
+export { TableFooter, TableFooterTray } from "./table-footer/TableFooter";
+export { TableProvider, useTableContext } from "./table-provider/TableProvider";
+export { defaultTableSettingsPermissions, TableSettingsPanel, type TableDisplayAttributeChangeHandler, } from "./table-settings-panel/TableSettingsPanel";

package/types/src/inline-add-row/InlineAddRow.d.ts

@@ -0,0 +1,3 @@
+import type { BaseRowProps } from "@vuu-ui/vuu-table-types";
+export type InlineAddRowProps = BaseRowProps;
+export declare const InlineAddRow: ({ ariaRowIndex, className, columns, style, }: InlineAddRowProps) => import("react").JSX.Element;

package/types/src/inline-add-row/index.d.ts

@@ -0,0 +1,2 @@
+export { InlineAddRow, type InlineAddRowProps } from "./InlineAddRow";
+export { useInlineAddRow, type UseInlineAddRowProps } from "./useInlineAddRow";

package/types/src/inline-add-row/useInlineAddRow.d.ts

@@ -0,0 +1,59 @@
+import type { DataRow, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
+export interface UseInlineAddRowProps {
+    columns: RuntimeColumnDescriptor[];
+}
+export declare const useInlineAddRow: ({ columns }: UseInlineAddRowProps) => {
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    dataRow: DataRow;
+    draftRevision: number;
+    inlineAddColumns: {
+        editableBulk?: import("@vuu-ui/vuu-data-types").BulkEdit;
+        name: string;
+        required?: boolean;
+        serverDataType?: import("@vuu-ui/vuu-protocol-types").VuuColumnDataType;
+        type?: import("@vuu-ui/vuu-data-types").DataValueType;
+        aggregate?: import("@vuu-ui/vuu-protocol-types").VuuAggType;
+        allowColumnHeaderMenu?: false;
+        colHeaderContentRenderer?: string;
+        colHeaderLabelRenderer?: string;
+        exportFormatter?: (value: unknown) => string;
+        getIcon?: (row: DataRow) => string | undefined;
+        groupable?: boolean;
+        hidden?: boolean;
+        locked?: Exclude<import("@vuu-ui/vuu-table-types").PinLocation, "left"> | false;
+        maxWidth?: number;
+        minWidth?: number;
+        pin?: import("@vuu-ui/vuu-table-types").PinLocation | false;
+        removeable?: boolean;
+        selected?: boolean;
+        source?: "client" | "server";
+        status?: import("@salt-ds/core").ValidationStatus;
+        align?: "left" | "right";
+        ariaColIndex: number;
+        HeaderCellContentRenderer?: import("react").FunctionComponent<Omit<import("@vuu-ui/vuu-table-types").HeaderCellProps, "id" | "index">>;
+        HeaderCellLabelRenderer?: import("react").FunctionComponent<Omit<import("@vuu-ui/vuu-table-types").HeaderCellProps, "id" | "index">>;
+        canStretch?: boolean;
+        className?: string;
+        clientSideEditValidationCheck?: import("@vuu-ui/vuu-data-types").DataValueValidationChecker;
+        draggable?: boolean;
+        filter?: import("@vuu-ui/vuu-filter-types").Filter;
+        flex?: number;
+        heading?: [...string[]];
+        isGroup?: boolean;
+        isSystemColumn?: boolean;
+        label: string;
+        marginLeft?: number;
+        moving?: boolean;
+        originalIdx?: number;
+        pinnedOffset?: number;
+        pinnedWidth?: number;
+        resizeable?: boolean;
+        resizing?: boolean;
+        sortable?: boolean;
+        sorted?: import("@vuu-ui/vuu-table-types").ColumnSort;
+        valueFormatter: import("@vuu-ui/vuu-table-types").ValueFormatter;
+        width: number;
+        editable: boolean;
+        CellRenderer: import("react").FunctionComponent<import("@vuu-ui/vuu-table-types").TableCellRendererProps> | undefined;
+    }[];
+};

package/types/src/tabbed-table-config-panel/TabbedTableConfigPanel.d.ts

@@ -0,0 +1,17 @@
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import type { TableProps } from "@vuu-ui/vuu-table";
+import { HTMLAttributes } from "react";
+import { ColumnPickerProps } from "../column-picker/ColumnPicker";
+import { TableSettingsPanelProps } from "../table-settings-panel/TableSettingsPanel";
+declare const TabLabels: {
+    readonly "table-settings": "Table";
+    readonly "table-columns": "Columns";
+};
+type TabName = keyof typeof TabLabels;
+export interface TabbedTableConfigPanelProps extends ColumnPickerProps, Pick<TableSettingsPanelProps, "onDisplayAttributeChange">, Pick<TableProps, "config">, HTMLAttributes<HTMLDivElement> {
+    allowCreateCalculatedColumn?: boolean;
+    selectedTab?: TabName;
+    vuuTable?: VuuTable;
+}
+export declare const TabbedTableConfigPanel: ({ allowCreateCalculatedColumn, className, columnModel, config, onDisplayAttributeChange, selectedTab, vuuTable, ...htmlAttributes }: TabbedTableConfigPanelProps) => import("react").JSX.Element;
+export {};

package/types/src/tabbed-table-config-panel/TabbedTableSettingsAction.d.ts

@@ -0,0 +1,7 @@
+import { IconButtonProps } from "@vuu-ui/vuu-ui-controls";
+import { TabbedTableConfigPanelHookProps } from "./useTabbedTableConfigPanel";
+import { TableDisplayAttributeChangeHandler } from "../table-settings-panel/TableSettingsPanel";
+export interface TabbedTableSettingsActionProps extends Partial<IconButtonProps>, TabbedTableConfigPanelHookProps {
+    onDisplayAttributeChange: TableDisplayAttributeChangeHandler;
+}
+export declare const TabbedTableSettingsAction: ({ allowCreateCalculatedColumn, appearance, columnModel, config, icon, onDisplayAttributeChange, sentiment, vuuTable, ...IconButtonProps }: TabbedTableSettingsActionProps) => import("react").JSX.Element;

package/types/src/tabbed-table-config-panel/useTabbedTableConfigPanel.d.ts

@@ -0,0 +1,13 @@
+import { TableSettingsPanelProps } from "../table-settings-panel/TableSettingsPanel";
+import { TableProps } from "@vuu-ui/vuu-table";
+import { ColumnPickerProps } from "../column-picker/ColumnPicker";
+import { VuuTable } from "@vuu-ui/vuu-protocol-types";
+export interface TabbedTableConfigPanelHookProps extends Pick<ColumnPickerProps, "allowCreateCalculatedColumn" | "columnModel">, Pick<TableSettingsPanelProps, "onDisplayAttributeChange">, Pick<TableProps, "config"> {
+    /**
+     * only required for calculated columns
+     */
+    vuuTable?: VuuTable;
+}
+export declare const useTabbedTableConfigPanel: ({ allowCreateCalculatedColumn, columnModel, config, onDisplayAttributeChange, vuuTable, }: TabbedTableConfigPanelHookProps) => {
+    showTabbedTableConfigPanel: (title?: string) => void;
+};

package/types/src/table-footer/TableFooter.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface TableFooterProps extends HTMLAttributes<HTMLDivElement> {
+    onInvokeAction?: (action: string) => void;
+    tooltrayActions?: ReactNode;
+}
+export declare const TableFooterTray: ({ children, position }: {
+    children: ReactNode;
+    position?: 'center' | 'end';
+}) => import("react").JSX.Element;
+export declare const TableFooter: ({ children, className, onInvokeAction, tooltrayActions, ...htmlAttributes }: TableFooterProps) => import("react").JSX.Element;

package/types/src/table-provider/TableProvider.d.ts

@@ -0,0 +1,18 @@
+import type { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+import type { DataSource } from "@vuu-ui/vuu-data-types";
+import type { TableProps } from "@vuu-ui/vuu-table";
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { ReactNode } from "react";
+import type { ColumnMenuActionType } from "../column-menu/column-menu-utils";
+export interface TableContextProps extends Pick<TableProps, "dataSource" | "rowActionHandlers"> {
+    menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;
+}
+export declare const TableContext: import("react").Context<TableContextProps>;
+export declare const TableProvider: ({ children, dataSource, menuActionHandler, rowActionHandlers, }: TableContextProps & {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare function useTableContext(throwIfNoDataSource?: boolean): {
+    dataSource: DataSource;
+    menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;
+};
+export declare const useRowAction: (actionId: string) => import("@vuu-ui/vuu-table-types").RowActionHandler;

package/types/src/table-settings-panel/TableSettingsPanel.d.ts

@@ -0,0 +1,22 @@
+import { TableDisplayAttributes, TableSettingsPermissions } from "@vuu-ui/vuu-table-types";
+export declare const defaultTableSettingsPermissions: Readonly<TableSettingsPermissions>;
+export declare const noTableSettingsPermissions: Readonly<TableSettingsPermissions>;
+export type TableDisplayAttributeChangeHandler = (displayAttributes: TableDisplayAttributes) => void;
+/**
+ * Describes the props for a Table Configuration Editor, for which
+ * an implementation is provided in vuu-table-extras
+ */
+export interface TableSettingsPanelProps {
+    allowColumnLabelCase?: boolean;
+    allowColumnDefaultWidth?: boolean;
+    allowGridRowStyling?: boolean;
+    onDisplayAttributeChange: TableDisplayAttributeChangeHandler;
+    tableDisplayAttributes: TableDisplayAttributes;
+    permissions?: TableSettingsPermissions | boolean;
+}
+/**
+  The TableSettingsPanel assumes 'ownership' of the tableSettings.
+  It updates the settings in state locally and notifies caller of
+  every change via onChange callback
+ */
+export declare const TableSettingsPanel: ({ onDisplayAttributeChange, tableDisplayAttributes: tableDisplayAttributesProp, permissions: permissionsProp, }: TableSettingsPanelProps) => import("react").JSX.Element;

package/types/src/table-settings-panel/useTableSettings.d.ts

@@ -0,0 +1,14 @@
+import { TableDisplayAttributes } from "@vuu-ui/vuu-table-types";
+import { CommitHandler } from "@vuu-ui/vuu-utils";
+import { MouseEvent, SyntheticEvent } from "react";
+import { TableSettingsPanelProps } from "./TableSettingsPanel";
+export type ColumnLike = {
+    name: string;
+};
+export declare const useTableSettings: ({ onDisplayAttributeChange, tableDisplayAttributes: tableDisplayAttributesProp, }: TableSettingsPanelProps) => {
+    columnLabelsValue: number;
+    onChangeColumnLabels: (evt: SyntheticEvent) => void;
+    onChangeTableAttribute: (evt: MouseEvent<HTMLButtonElement>) => void;
+    onCommitColumnWidth: CommitHandler;
+    tableDisplayAttributes: TableDisplayAttributes;
+};