@superblocksteam/library 2.0.28 → 2.0.29-next.0

package/dist-types/lib/user-facing/components/table/table-utilities.d.ts

@@ -0,0 +1,148 @@
+import React from "react";
+import { HorizontalAlignment, VerticalAlignment } from "./types.js";
+import type { ColumnProperties, EditProps, SingleCellProperties, TagDisplayConfig, RowDensity, BooleanStyleFalse, UnknownRow, ContextualColumnProperty } from "./types.js";
+import type { IconPosition } from "../../icons/constants.js";
+import type { ButtonVariant } from "../button/props.js";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { DimModes } from "@superblocksteam/library-shared";
+import type { TextStyleWithVariant, UserAccessibleTheme, PerSideBorder } from "@superblocksteam/library-shared/types";
+export declare const getAllTableColumnKeys: (tableData: Readonly<Array<Record<string, unknown>>>, additionalColumnKeys?: string[]) => string[];
+interface TableTagsProps {
+    theme: UserAccessibleTheme;
+    isHidden: boolean;
+    cellProperties: SingleCellProperties;
+    tagValues: unknown[];
+    tagsColorAssignment?: Record<string, TagDisplayConfig>;
+    rowDensity: RowDensity;
+    handleCellFocus?: () => void;
+    maxWidth?: number;
+    maxLinesPerRow?: number;
+}
+export type TableCellProps = SingleCellProperties & {
+    isHidden: boolean;
+    cellProperties: SingleCellProperties;
+    tagsColorAssignment?: Record<string, TagDisplayConfig>;
+    booleanStyleFalse?: BooleanStyleFalse;
+    rowDensity: RowDensity;
+    isFocused: boolean;
+    isMultiselecting: boolean;
+};
+interface CellPosition {
+    currentRowIndex: number;
+    originalRowIndex: number;
+    columnId: string;
+}
+export declare const TagsCell: ({ isHidden, cellProperties, tagValues, tagsColorAssignment, rowDensity, handleCellFocus, maxWidth, maxLinesPerRow, theme, }: TableTagsProps) => React.JSX.Element;
+interface ColumnAction {
+    label: string;
+    id: string;
+    actions: () => void;
+}
+export declare const formatByType: (value: unknown, type: string, options: {
+    maxLen?: number;
+    displayedValue?: string;
+    notation?: Intl.NumberFormatOptions["notation"] | "unformatted";
+    currency?: string;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    inputFormat?: string;
+    outputFormat?: string;
+    manageTimezone?: boolean;
+    timezone?: string;
+    displayTimezone?: string;
+}) => string;
+export declare const EditableCell: (props: {
+    value: any;
+    rawValue: any;
+    columnType: string;
+    cellProps: TableCellProps;
+    editProps: EditProps;
+    tableName: string;
+    rowDensity: RowDensity;
+    position: CellPosition;
+    isInserted: boolean;
+    columnName: string;
+    maxLinesPerRow?: number;
+    theme: UserAccessibleTheme;
+}) => React.JSX.Element;
+export declare function getCellProperties(tableCellTextStyle: TextStyleWithVariant | undefined, columnProperties: ColumnProperties, currentRow?: UnknownRow): SingleCellProperties;
+export declare function getPropertyValue<T>(value: ContextualColumnProperty<T>, currentRow?: UnknownRow): T | undefined;
+export declare function getFirstPropertyValue<T>(value: ContextualColumnProperty<T>): T;
+export declare const renderCell: ({ value, columnType, editInputType, cellProps, defaultValue, maxLinesPerRow, tableCellTextStyle, typographies, theme, }: {
+    value: any;
+    columnType: string;
+    editInputType?: string;
+    cellProps: TableCellProps;
+    position: CellPosition;
+    defaultValue?: string;
+    maxLinesPerRow?: number;
+    tableCellTextStyle?: TextStyleWithVariant;
+    typographies?: UserAccessibleTheme["typographies"];
+    theme: UserAccessibleTheme;
+}) => React.JSX.Element;
+interface TableButtonProps {
+    rowIndex: number;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    columnActions?: ColumnAction[];
+    backgroundColor?: string;
+    buttonBorder?: PerSideBorder;
+    buttonVariant: ButtonVariant;
+    buttonTextStyle?: TextStyleWithVariant;
+    cellIcon?: string;
+    cellIconPosition: IconPosition;
+    handleRowSelect: (rowIndex: number) => void;
+    rowDensity: RowDensity;
+    theme: UserAccessibleTheme;
+    buttonLabel: string;
+    onClick: (onComplete: () => void) => void;
+}
+export declare const TableButton: (props: TableButtonProps) => React.JSX.Element;
+export declare const renderLink: (props: {
+    isHidden: boolean;
+    cellProperties: SingleCellProperties;
+    rowDensity: RowDensity;
+    position: CellPosition;
+    maxLinesPerRow?: number;
+    tableCellTextStyle?: TextStyleWithVariant;
+    value?: string;
+}) => React.JSX.Element;
+export declare const renderEmptyRow: (columns: any, page: any, prepareRow: any, index: number, columnSizeMap: undefined | {
+    [key: string]: number;
+}, resizingColumnIdRef: React.MutableRefObject<string>) => React.JSX.Element;
+export declare const getIsColumnFrozen: (columnId: string, columnFreezes: undefined | Record<string, boolean>, defaultFrozen: undefined | boolean) => boolean | undefined;
+export declare const getMergedColumnOrder: (originalColumnOrder: string[], newColumnIds: string[]) => string[];
+export declare const TABLE_MULTISELECT_COLID = "SB_$$_MULTISELECT";
+export declare const getVisibleOrderedColumnIds: (columns: Record<string, ColumnProperties>, columnOrder: string[], columnFreezes: undefined | Record<string, boolean>, isMultiSelect: boolean | undefined, hiddenColumns: undefined | string[]) => string[];
+export declare const reorderColumns: (columns: Record<string, ColumnProperties>, columnOrder: string[], columnFreezes?: Record<string, boolean>) => Record<string, ColumnProperties>;
+export declare function getDefaultColumnProperties(accessor: string, index: number, isDerived?: boolean): ColumnProperties;
+export declare const getColumnWidthStyle: ({ column, columnSizeMap, resizingColumnIdRef, canvasScaleFactor, }: {
+    column: any;
+    columnSizeMap: {
+        [key: string]: number;
+    } | undefined;
+    resizingColumnIdRef: React.MutableRefObject<string>;
+    canvasScaleFactor: number;
+}) => {
+    flex: string;
+    width: string;
+} | undefined;
+export declare const getFluidColumnWidth: (componentWidth: Dim<DimModes>, allColumns: Record<string, ColumnProperties>, columnSizeMap: {
+    [key: string]: number;
+} | undefined) => number;
+export declare const getColumnWidth: (colId: string, columnSizeMap: {
+    [key: string]: number;
+} | undefined, fluidColumnWidth: number) => {
+    width: number;
+    actualFlexWidth?: undefined;
+} | {
+    width: number;
+    actualFlexWidth: number;
+};
+export declare function collapseTableData(data: unknown[][], largestRow?: number): unknown[][];
+export declare function createTableColumns(columns: Record<string, any> | undefined, tableData: UnknownRow[] | undefined, tableStyles: {
+    cellBackground?: string;
+    verticalAlign?: VerticalAlignment;
+    horizontalAlign?: HorizontalAlignment;
+}): Record<string, ColumnProperties> | undefined;
+export {};

package/dist-types/lib/user-facing/components/table/table-widget.d.ts

@@ -0,0 +1,149 @@
+import React from "react";
+import { TableManager } from "./table-manager.js";
+import type { InsertRowOptions } from "./constants.js";
+import type { ColumnFilter, ColumnProperties, ReactTableColumnProps, TableWidgetProps, TagDisplayConfig } from "./types.js";
+interface TableWidgetState {
+    isSaving: boolean;
+}
+export declare class TableWidget extends React.Component<TableWidgetProps, TableWidgetState> {
+    customEditValidation: Record<string, undefined | string>;
+    customEditMessage: Record<string, undefined | string>;
+    editOptions: Record<string, undefined | string | Array<string | {
+        label: string;
+        value: string;
+    }>>;
+    tableElement: null | HTMLElement;
+    tableScroller?: null | HTMLElement;
+    dropdownValueToLabelMaps: Record<string, Record<string, string>>;
+    totalRowsInserted: number;
+    suppressLoading: boolean;
+    tableManager: TableManager;
+    state: TableWidgetState;
+    currentCellFocus: {
+        row: number;
+        columnId: string;
+    }[];
+    eventListenerController: AbortController | undefined;
+    cachedTagColorAssignment: Record<string, Record<string, TagDisplayConfig>> | undefined;
+    componentDidMount(): void;
+    addEventListeners(): void;
+    componentWillUnmount(): void;
+    getDisplayedValueForEditCell: ({ columnId, rawValue, displayedValue, useLabelAsDisplayValue, }: {
+        columnId: string;
+        rawValue: string;
+        displayedValue?: string;
+        useLabelAsDisplayValue?: boolean;
+    }) => string | undefined;
+    previousColumnsString: string;
+    previousColumns: ReactTableColumnProps[];
+    handleTableButtonClick: (columnId: string, onComplete: () => void) => void;
+    getReactTableColumns(): ReactTableColumnProps[];
+    columnPropertyFunctionMap: WeakMap<WeakKey, any>;
+    functionCounter: number;
+    getColumnPropertiesString: (columnProperties: ColumnProperties) => string;
+    createTableCell(columnProperties: ColumnProperties, isHidden: boolean): (props: any) => React.JSX.Element;
+    static transformData: (tableData: Array<Record<string, unknown>>, filteredOrderMap: Array<number>, columns: ReactTableColumnProps[], editOverrides: Record<number, Record<string, {
+        value: unknown;
+        validationErrors?: Array<string>;
+    }>>) => {
+        [key: string]: any;
+    }[];
+    getEmptyRow: () => {
+        [key: string]: any;
+    };
+    getSelectedRow: (filteredTableData?: Array<Record<string, unknown>>, selectedRowIndex?: number) => {
+        [key: string]: any;
+    };
+    updateDefaultSelectedRow: (filteredTableData: Array<Record<string, unknown>> | undefined) => void;
+    getSelectedRowIndexes: (selectedRowIndices: string) => number[];
+    getComputedSelectedRowIndices: () => number[];
+    getOriginalRowIndex: (index?: number) => number;
+    getCurrentRowIndex: (originalIndex: number) => number;
+    getIsRowEdited: (rowIndex: number, isOriginalIndex?: boolean) => boolean;
+    getIsRowInserted: (rowIndex: number, isOriginalIndex?: boolean) => boolean;
+    getCellBackground: (currentRowIndex: number, columnId: string) => string | undefined;
+    getIsLoading: () => boolean;
+    getDropdownOptionsLoading: () => boolean;
+    render(): React.JSX.Element;
+    handleReorderColumn: (columnOrder: string[]) => void;
+    handleColumnSorting: (column: string, asc: boolean) => void;
+    handleResizeColumn: (columnSizeMap: {
+        [key: string]: number;
+    }) => void;
+    handleSearchTable: (searchKey: any) => void;
+    assignTagColors(tableData?: Array<Record<string, unknown>>, columns?: Record<string, ColumnProperties>): void;
+    selectRows: (rows?: "ALL" | "NONE") => void;
+    handleRowSelect: (index: number, shiftKey?: boolean) => void;
+    getRowContext: (idx?: number) => {
+        row: {
+            [key: string]: any;
+        };
+        rowIndex: number | undefined;
+    };
+    handleRowClick: (_rowData: Record<string, unknown>, index: number) => void;
+    updatePageNumber: (pageNo: number) => void;
+    handleNextPageClick: () => void;
+    handlePrevPageClick: () => void;
+    resetSelectedRowIndex: () => void;
+    handleSetColumnFilter: (columnId: string, filter: ColumnFilter) => void;
+    setCurrentCellFocus: (focus: {
+        row: number;
+        columnId: string;
+    }[]) => void;
+    clearCellFocus: () => void;
+    handleClickOutside: () => void;
+    getTopVisibleIndex: () => number;
+    getBottomVisibleIndex: () => number;
+    handlePaste: (event: Event) => void;
+    handleCopy: (event: Event) => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    handleEditStart: (rowIndex: number, columnId: string, startingValue: string) => void;
+    getCellValue: (originalRowIndex: number, columnId: string, includeEdits?: boolean) => unknown;
+    handleOneClickEdit: (columnProperties: ColumnProperties, row: number, newValue: unknown) => void;
+    handleEditChange: (value: any, dropdownOptions?: Array<{
+        label: string;
+        value: string;
+    }>) => void;
+    debouncedEditChange: import("lodash").DebouncedFunc<(value: any, dropdownOptions?: Array<{
+        label: string;
+        value: string;
+    }>) => void>;
+    onDropdownEdit: (columnId: string, selectedOption: {
+        label: string;
+        value: string;
+    }) => void;
+    onEditStop: (columnProperties: ColumnProperties, _currentRowIndex: number, editStopProps: {
+        shouldSave: boolean;
+        value?: any;
+        validationErrors?: Array<string>;
+        overrideEditFocus?: {
+            row: number;
+            columnId: string;
+        };
+        dropdownOption?: {
+            label: string;
+            value: string;
+        };
+    }) => void;
+    handleEditStop: ({ shouldSave, value, validationErrors, overrideEditFocus, dropdownOption, }: {
+        shouldSave: boolean;
+        value?: any;
+        validationErrors?: Array<string>;
+        overrideEditFocus?: {
+            row: number;
+            columnId: string;
+        };
+        dropdownOption?: {
+            label: string;
+            value: string;
+        };
+    }) => void;
+    handleEditCancel: () => void;
+    handleEditSave: () => void;
+    handleRowDeletion: (currentIndices: number[]) => void;
+    getIsRowDeleted: (rowIndex: number, isOriginalIndex?: boolean) => boolean;
+    insertRow: (defaultRow: Record<string, any>, validationErrors: Record<string, string[]>, options?: InsertRowOptions) => number;
+    handleRowInsertion: (options?: InsertRowOptions) => void;
+    getTableScroller: () => HTMLElement | null | undefined;
+}
+export default TableWidget;