@vuu-ui/vuu-utils 0.8.23-debug → 0.8.24-debug

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vuu-ui/vuu-utils",
-  "version": "0.8.23-debug",
+  "version": "0.8.24-debug",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.23-debug",
-    "@vuu-ui/vuu-table-types": "0.8.23-debug",
-    "@vuu-ui/vuu-filter-types": "0.8.23-debug",
-    "@vuu-ui/vuu-protocol-types": "0.8.23-debug"
+    "@vuu-ui/vuu-data-types": "0.8.24-debug",
+    "@vuu-ui/vuu-table-types": "0.8.24-debug",
+    "@vuu-ui/vuu-filter-types": "0.8.24-debug",
+    "@vuu-ui/vuu-protocol-types": "0.8.24-debug"
   },
   "peerDependencies": {
     "react": ">=17.0.2",

package/types/column-utils.d.ts

@@ -18,6 +18,7 @@ export declare function mapSortCriteria(sortCriteria: SortCriteriaItem[], column
 export declare const getDefaultAlignment: (serverDataType?: VuuColumnDataType) => ColumnAlignment;
 export declare const isValidColumnAlignment: (v: string) => v is ColumnAlignment;
 export declare const isValidPinLocation: (v: string) => v is PinLocation;
+export declare const isVuuColumnDataType: (value: string | undefined | null) => value is VuuColumnDataType;
 export declare const fromServerDataType: (serverDataType: VuuColumnDataType) => ColumnTypeSimple;
 export declare const isNumericColumn: ({ serverDataType, type }: ColumnDescriptor) => boolean;
 export declare const isDateTimeColumn: (column: ColumnDescriptor) => column is DateTimeColumnDescriptor;
@@ -171,5 +172,16 @@ export declare function applyWidthToColumns(columns: RuntimeColumnDescriptor[],
  * A memo compare function for cell renderers. Can be used to suppress
  * render where column and data are both unchanged. Avoids render
  * when row changes, where changes in row are unrelated to this cell.
+ * Suitabnle only for readonly cell renderers. See below for editable
+ * cell renderers.
  */
 export declare const dataAndColumnUnchanged: (p: TableCellRendererProps, p1: TableCellRendererProps) => boolean;
+/**
+ * A memo compare function for cell renderers. Can be used to suppress
+ * render where column, row key  and data are all unchanged. Avoids render
+ * when row changes, where changes in row are unrelated to this cell.
+ * Suitable for editable cells. Including key in compare is not strictly
+ * necessary for rendering, but it is important in the event that user
+ * edits data - ensures we never have a stale key.
+ */
+export declare const dataColumnAndKeyUnchanged: (p: TableCellRendererProps, p1: TableCellRendererProps) => boolean;

package/types/component-registry.d.ts

@@ -1,6 +1,8 @@
-import { FunctionComponent as FC, HTMLAttributes } from "react";
-import { ColumnDescriptor, ColumnDescriptorCustomRenderer, ColumnTypeRendering, EditValidationRule, HeaderCellProps, TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+import { DataSourceRow } from "@vuu-ui/vuu-data-types";
 import { VuuColumnDataType, VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import { ColumnDescriptor, ColumnDescriptorCustomRenderer, ColumnTypeRendering, EditValidationRule, HeaderCellProps, TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+import { FunctionComponent as FC, HTMLAttributes } from "react";
+import { ColumnMap } from "./column-utils";
 export interface CellConfigPanelProps extends HTMLAttributes<HTMLDivElement> {
     onConfigChange: () => void;
 }
@@ -10,25 +12,32 @@ export interface ConfigurationEditorProps {
     column: ColumnDescriptorCustomRenderer;
     onChangeRendering: ColumnRenderPropsChangeHandler;
 }
+export type RowClassNameGenerator = (row: DataSourceRow, columnMap: ColumnMap) => string | undefined;
+export type RowClassGenerator = {
+    id: string;
+    fn: RowClassNameGenerator;
+};
 export type ConfigEditorComponent = FC<CellConfigPanelProps>;
 export type EditRuleValidator = (editRule: EditValidationRule, value?: VuuRowDataItemType) => boolean | string;
-export type ComponentType = "cell-renderer" | "column-header-content-renderer" | "column-header-label-renderer" | "cell-config-panel" | "data-edit-validator";
+export type ComponentType = "cell-renderer" | "cell-config-panel" | "column-header-content-renderer" | "column-header-label-renderer" | "data-edit-validator" | "row-class-generator";
 type CellRendererOptions = {
     configEditor?: string;
     description?: string;
     label?: string;
     serverDataType?: VuuColumnDataType | VuuColumnDataType[] | "json" | "private";
+    userCanAssign?: boolean;
 };
 export interface CellRendererDescriptor extends CellRendererOptions {
     name: string;
 }
-export declare function registerComponent<T extends TableCellRendererProps | CellConfigPanelProps | EditRuleValidator | HeaderCellProps = TableCellRendererProps>(componentName: string, component: T extends EditRuleValidator ? T : FC<T>, type: ComponentType | undefined, options: CellRendererOptions): void;
+export declare function registerComponent<T extends CellConfigPanelProps | EditRuleValidator | HeaderCellProps | RowClassGenerator | TableCellRendererProps = TableCellRendererProps>(componentName: string, component: T extends EditRuleValidator | RowClassGenerator ? T : FC<T>, type: ComponentType | undefined, options: CellRendererOptions): void;
 export declare const registerConfigurationEditor: (componentName: string, configurationEditor: FC<ConfigurationEditorProps>) => void;
 export declare const getRegisteredCellRenderers: (serverDataType?: VuuColumnDataType | "json") => CellRendererDescriptor[];
 export declare const getCellRendererOptions: (renderName: string) => CellRendererOptions | undefined;
 export declare function getCellRenderer(column: ColumnDescriptor): FC<TableCellRendererProps> | undefined;
 export declare function getColumnHeaderContentRenderer(column: ColumnDescriptor): FC<HeaderCellProps> | undefined;
 export declare function getColumnHeaderLabelRenderer(column: ColumnDescriptor): FC<HeaderCellProps> | undefined;
+export declare const getRowClassNameGenerator: (generatorId: string) => RowClassGenerator | undefined;
 export declare function getConfigurationEditor(configEditor?: string): FC<ConfigurationEditorProps> | undefined;
 export declare function getCellConfigPanelRenderer(name: string): ConfigEditorComponent | undefined;
 export declare function getEditRuleValidator(name: string): EditRuleValidator | undefined;

package/types/datasource-utils.d.ts

@@ -3,11 +3,22 @@ import { LinkDescriptorWithLabel, VuuFilter, VuuSort } from "@vuu-ui/vuu-protoco
 export declare const NoFilter: VuuFilter;
 export declare const NoSort: VuuSort;
 export declare const vanillaConfig: WithFullConfig;
+export type DataSourceConfigChanges = {
+    aggregationsChanged: boolean;
+    columnsChanged: boolean;
+    filterChanged: boolean;
+    groupByChanged: boolean;
+    sortChanged: boolean;
+    visualLinkChanged: boolean;
+};
+export type MaybeDataSourceConfigChanges = DataSourceConfigChanges & {
+    noChanges: boolean;
+};
 type DataConfigPredicate = (config: DataSourceConfig, newConfig: DataSourceConfig) => boolean;
-export declare const columnsChanged: DataConfigPredicate;
-export declare const filterChanged: DataConfigPredicate;
-export declare const groupByChanged: DataConfigPredicate;
-export declare const configChanged: (config: DataSourceConfig | undefined, newConfig: DataSourceConfig | undefined) => boolean;
+export declare const isFilterChanged: DataConfigPredicate;
+export declare const isGroupByChanged: DataConfigPredicate;
+export declare const NO_CONFIG_CHANGES: MaybeDataSourceConfigChanges;
+export declare const isConfigChanged: (config: DataSourceConfig | undefined, newConfig: DataSourceConfig | undefined) => MaybeDataSourceConfigChanges;
 export declare const hasGroupBy: (config?: DataSourceConfig) => config is WithGroupBy;
 export declare const hasFilter: (config?: DataSourceConfig) => config is WithFilter;
 export declare const hasSort: (config?: DataSourceConfig) => config is WithSort;

package/types/html-utils.d.ts

@@ -1,6 +1,7 @@
 export declare const createEl: (elementType: "div" | "p" | "span", className?: string, textContent?: string) => HTMLElement;
 export declare const getFocusableElement: (el: HTMLElement | null, tabIndex?: number) => HTMLElement | undefined;
 export declare const getElementDataIndex: (el: HTMLElement | null) => number;
+export declare const queryClosest: <T extends HTMLElement = HTMLElement>(el: HTMLElement | EventTarget, cssQueryString: string) => T;
 export declare const getClosest: (el: HTMLElement, dataProperty: string) => HTMLElement;
 export declare const getClosestIndexItem: (el: HTMLElement) => HTMLElement;
 export declare function getElementByDataIndex(c: HTMLElement | null, i: number | string, throwIfNotFound: true): HTMLElement;