@vuu-ui/vuu-table-extras 2.1.17 → 2.1.19-beta.1

package/package.json

@@ -1,25 +1,27 @@
 {
-  "version": "2.1.17",
+  "version": "2.1.19-beta.1",
   "author": "heswell",
   "license": "Apache-2.0",
+  "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "2.1.17",
-    "@vuu-ui/vuu-protocol-types": "2.1.17"
+    "@vuu-ui/vuu-filter-types": "2.1.19-beta.1",
+    "@vuu-ui/vuu-protocol-types": "2.1.19-beta.1"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "2.1.17",
-    "@vuu-ui/vuu-data-react": "2.1.17",
-    "@vuu-ui/vuu-data-types": "2.1.17",
-    "@vuu-ui/vuu-table-types": "2.1.17",
-    "@vuu-ui/vuu-popups": "2.1.17",
-    "@vuu-ui/vuu-table": "2.1.17",
-    "@vuu-ui/vuu-utils": "2.1.17",
-    "@vuu-ui/vuu-ui-controls": "2.1.17",
+    "@vuu-ui/vuu-codemirror": "2.1.19-beta.1",
+    "@vuu-ui/vuu-data-react": "2.1.19-beta.1",
+    "@vuu-ui/vuu-data-types": "2.1.19-beta.1",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.1",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.1",
+    "@vuu-ui/vuu-table": "2.1.19-beta.1",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.1",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.1",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1"
+    "@salt-ds/window": "0.1.1",
+    "csv-parse": "^7.0.0"
   },
   "peerDependencies": {
     "@floating-ui/react": "^0.26.28",
@@ -27,7 +29,6 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
-  "type": "module",
   "files": [
     "README.md",
     "esm",
@@ -36,13 +37,11 @@
   ],
   "exports": {
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./esm/index.js",
+      "import": "./index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "module": "index.js",
   "name": "@vuu-ui/vuu-table-extras",
   "types": "types/index.d.ts"
 }

package/types/cell-renderers/background-cell/BackgroundCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const BackgroundCell: import("react").NamedExoticComponent<TableCellRendererProps>;
+export declare const BackgroundCell: import("react").MemoExoticComponent<({ column, dataRow, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element>;

package/types/cell-renderers/dropdown-cell/DropdownCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const DropdownCell: import("react").NamedExoticComponent<TableCellRendererProps>;
+export declare const DropdownCell: import("react").MemoExoticComponent<({ column, dataRow, editedDuringCurrentSession, onEdit, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element>;

package/types/cell-renderers/lookup-cell/LookupCell.d.ts

@@ -1,2 +1,2 @@
 import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
-export declare const LookupCell: import("react").NamedExoticComponent<TableCellRendererProps>;
+export declare const LookupCell: import("react").MemoExoticComponent<({ column, dataRow, }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element>;

package/types/column-expression-input/column-language-parser/generated/column-parser.d.ts

@@ -1,2 +1,2 @@
-export const parser: LRParser;
 import { LRParser } from "@lezer/lr";
+export declare const parser: LRParser;

package/types/column-expression-input/column-language-parser/generated/column-parser.terms.d.ts

@@ -1,24 +1 @@
-export const ColumnDefinitionExpression: 1;
-export const Column: 2;
-export const Number: 3;
-export const String: 4;
-export const True: 5;
-export const False: 6;
-export const ParenthesizedExpression: 7;
-export const OpenBrace: 8;
-export const CloseBrace: 9;
-export const ArithmeticExpression: 10;
-export const Divide: 11;
-export const Times: 12;
-export const Plus: 13;
-export const Minus: 14;
-export const ConditionalExpression: 15;
-export const If: 16;
-export const RelationalExpression: 17;
-export const RelationalOperator: 18;
-export const AndCondition: 19;
-export const OrCondition: 20;
-export const Comma: 21;
-export const CallExpression: 22;
-export const Function: 23;
-export const ArgList: 24;
+export declare const ColumnDefinitionExpression = 1, Column = 2, Number = 3, String = 4, True = 5, False = 6, ParenthesizedExpression = 7, OpenBrace = 8, CloseBrace = 9, ArithmeticExpression = 10, Divide = 11, Times = 12, Plus = 13, Minus = 14, ConditionalExpression = 15, If = 16, RelationalExpression = 17, RelationalOperator = 18, AndCondition = 19, OrCondition = 20, Comma = 21, CallExpression = 22, Function = 23, ArgList = 24;

package/types/column-expression-input/column-language-parser/test.d.mts

@@ -1 +1 @@
-export function walkTree(tree: any, source: any): void;
+export declare const walkTree: (tree: any, source: any) => void;

package/types/csv-upload/CsvUpload.d.ts

@@ -0,0 +1,47 @@
+import { type ReactNode } from "react";
+import type { DataSource } from "@vuu-ui/vuu-data-types";
+import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
+import type { CsvParseError, CsvParseOptions } from "./parse/csv-parse";
+import type { CsvValidationStructuredError } from "./parse/csv-schema-validation";
+import type { CsvUploadTableData } from "./parse/csv-upload-utils";
+export type CsvUploadImportedResult = {
+    rpcResult: unknown;
+    tableData: CsvUploadTableData;
+};
+export type CsvUploadErrors = {
+    schemaError?: CsvUploadError;
+    validationError?: CsvUploadError;
+    importError?: CsvUploadError;
+};
+export type CsvUploadError = {
+    message: string;
+    parseError?: CsvParseError;
+    validationError?: CsvValidationStructuredError;
+    source: "schema" | "validation" | "import";
+};
+export type CsvUploadErrorResult = {
+    errors: CsvUploadErrors;
+};
+export type CsvUploadSessionTable = VuuTable;
+export type CsvUploadSessionEndReason = "saved" | "discarded" | "failed";
+export type CsvUploadSessionEndResult = {
+    reason: CsvUploadSessionEndReason;
+    sessionTable?: CsvUploadSessionTable;
+};
+export type CsvUploadPhase = "idle" | "processing" | "preview-ready" | "importing" | "imported" | "failed";
+export interface CsvUploadProps {
+    children?: ReactNode;
+    dataSource: DataSource;
+    onEditSessionStarted?: (dataSource: DataSource) => void;
+    onEditSessionEnded?: (result: CsvUploadSessionEndResult) => void;
+    onError?: (result: CsvUploadErrorResult | undefined) => void;
+    onImported?: (result: CsvUploadImportedResult) => void;
+    onProcessingStarted?: () => void;
+    dialogTitle?: string;
+    maxRows?: number;
+    onCancel?: () => void;
+    onClose?: () => void;
+    open?: boolean;
+    parseOptions?: CsvParseOptions;
+}
+export declare const CsvUpload: (props: CsvUploadProps) => import("react/jsx-runtime").JSX.Element;

package/types/csv-upload/index.d.ts

@@ -0,0 +1,7 @@
+export { CsvUpload, type CsvUploadError, type CsvUploadProps, type CsvUploadErrorResult, type CsvUploadErrors, type CsvUploadPhase, type CsvUploadImportedResult, type CsvUploadSessionEndReason, type CsvUploadSessionEndResult, type CsvUploadSessionTable, } from "./CsvUpload";
+export { useCsvUpload, type CsvUploadHookProps, type UseCsvUploadReturn, } from "./useCsvUpload";
+export { useCsvUploadSessionPreview, type UseCsvUploadSessionPreviewReturn, } from "./useCsvUploadSessionPreview";
+export { validateCsvAgainstSchema, type CsvValidationOptions, type CsvValidationResult, } from "./parse/csv-schema-validation";
+export { parseCsv, type CsvParseOptions, type CsvParseResult, } from "./parse/csv-parse";
+export { CsvValidationErrorEnum, CsvParseErrorEnum, type CsvError, type CsvErrorMap, type CsvStructuredError, type CsvValidationError, type CsvValidationErrorMap, type CsvValidationErrorType, type CsvValidationStructuredError, type CsvParseError, type CsvParseErrorMap, } from "./parse/csv-errors";
+export { CSV_FIRST_DATA_ROW_NUMBER, CSV_HEADER_ROW_NUMBER, } from "./parse/csv-constants";

package/types/csv-upload/parse/csv-constants.d.ts

@@ -0,0 +1,2 @@
+export declare const CSV_HEADER_ROW_NUMBER = 1;
+export declare const CSV_FIRST_DATA_ROW_NUMBER = 2;

package/types/csv-upload/parse/csv-errors.d.ts

@@ -0,0 +1,46 @@
+export declare enum CsvParseErrorEnum {
+    EMPTY_FILE = "EMPTY_FILE",
+    INVALID_SEPARATOR = "INVALID_SEPARATOR",
+    INVALID_FORMAT = "INVALID_FORMAT",
+    UNQUOTED_VALUE = "UNQUOTED_VALUE",
+    EMPTY_HEADER_COLUMN = "EMPTY_HEADER_COLUMN",
+    DUPLICATE_HEADER_COLUMN = "DUPLICATE_HEADER_COLUMN",
+    ROW_COLUMN_COUNT_MISMATCH = "ROW_COLUMN_COUNT_MISMATCH"
+}
+export declare enum CsvValidationErrorEnum {
+    MISSING_KEY_COLUMN = "MISSING_KEY_COLUMN",
+    UNKNOWN_COLUMN = "UNKNOWN_COLUMN",
+    MAX_ROWS_EXCEEDED = "MAX_ROWS_EXCEEDED",
+    EMPTY_NON_STRING_VALUE = "EMPTY_NON_STRING_VALUE",
+    TYPE_MISMATCH = "TYPE_MISMATCH"
+}
+export type CsvErrorMap<TError extends string> = {
+    rowErrors: Record<number, Record<string, TError[]>>;
+    fileErrors: Record<string, TError[]>;
+};
+export type CsvStructuredError<TError extends string> = {
+    rowNum: number;
+    column: string;
+    value: string;
+    message: string;
+    errorEnum: TError;
+};
+export type CsvError<TError extends string> = {
+    errorMap: CsvErrorMap<TError>;
+    errors: CsvStructuredError<TError>[];
+    message: string;
+};
+export type CsvErrorState<TError extends string> = {
+    errorMap: CsvErrorMap<TError>;
+    errors: CsvStructuredError<TError>[];
+};
+export declare const createCsvErrorState: <TError extends string>() => CsvErrorState<TError>;
+export declare const addCsvFileError: <TError extends string>(state: CsvErrorState<TError>, columnName: string, error: TError, message: string, value?: string) => void;
+export declare const addCsvRowError: <TError extends string>(state: CsvErrorState<TError>, rowNum: number, columnName: string, error: TError, message: string, value?: string) => void;
+export declare const hasCsvErrors: <TError extends string>(errorMap: CsvErrorMap<TError>) => boolean;
+export type CsvParseErrorMap = CsvErrorMap<CsvParseErrorEnum>;
+export type CsvParseError = CsvError<CsvParseErrorEnum>;
+export type CsvValidationErrorType = CsvValidationErrorEnum | CsvParseErrorEnum;
+export type CsvValidationErrorMap = CsvErrorMap<CsvValidationErrorEnum>;
+export type CsvValidationStructuredError = CsvError<CsvValidationErrorType>;
+export type CsvValidationError = CsvStructuredError<CsvValidationErrorType>;

package/types/csv-upload/parse/csv-parse.d.ts

@@ -0,0 +1,11 @@
+import { type CsvParseError } from "./csv-errors";
+export { CsvParseErrorEnum, type CsvError, type CsvErrorMap, type CsvStructuredError, type CsvParseError, type CsvParseErrorMap, } from "./csv-errors";
+export type CsvParseResult = {
+    error?: CsvParseError;
+    header: string[];
+    rows: string[][];
+};
+export type CsvParseOptions = {
+    requireQuotedValues?: boolean;
+};
+export declare const parseCsv: (csvText: string, options?: CsvParseOptions) => CsvParseResult;

package/types/csv-upload/parse/csv-schema-validation.d.ts

@@ -0,0 +1,16 @@
+import type { TableSchema } from "@vuu-ui/vuu-data-types";
+import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import type { CsvValidationError, CsvValidationErrorMap, CsvParseError } from "./csv-errors";
+import type { CsvParseResult } from "./csv-parse";
+export { CsvValidationErrorEnum, type CsvValidationError, type CsvValidationErrorMap, type CsvValidationErrorType, type CsvValidationStructuredError, } from "./csv-errors";
+export type CsvValidationResult = {
+    columns: string[];
+    errorMap: CsvValidationErrorMap;
+    errors: CsvValidationError[];
+    parseRowError?: CsvParseError;
+    rows: Record<string, VuuRowDataItemType>[];
+};
+export type CsvValidationOptions = {
+    maxRows?: number;
+};
+export declare const validateCsvAgainstSchema: (parsed: CsvParseResult, tableSchema: TableSchema, options?: CsvValidationOptions) => CsvValidationResult;

package/types/csv-upload/parse/csv-upload-utils.d.ts

@@ -0,0 +1,21 @@
+import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
+import type { CsvUploadError } from "../CsvUpload";
+import type { CsvParseError } from "./csv-parse";
+import type { CsvValidationError, CsvValidationResult } from "./csv-schema-validation";
+export type CsvUploadTableData = {
+    columns: string[];
+    rows: VuuRowDataItemType[][];
+};
+export declare const toErrorMessage: (error: unknown) => string;
+export declare const isCsvParseError: (value: unknown) => value is CsvParseError;
+export declare const hasFileParseErrors: (parseError: CsvParseError) => boolean;
+export declare const createUploadError: (source: CsvUploadError["source"], message: string, parseError?: CsvParseError, validationError?: CsvUploadError["validationError"]) => CsvUploadError;
+export declare const mergeValidationWithParseErrors: (schemaValidation: CsvValidationResult, parseError: CsvParseError | undefined) => CsvValidationResult;
+export declare const buildRowErrorMessage: (prefix: string, rowErrors: string[]) => string;
+export declare const toValidationErrorsFromParseRowErrors: (parseError: CsvParseError) => CsvValidationError[];
+export declare const normalizeTableData: (value: unknown, fallback: CsvUploadTableData) => CsvUploadTableData;
+export type RpcBatchResult = {
+    errors: string[];
+    results: unknown[];
+};
+export declare const executeBatchRpcCalls: <T>(items: T[], executor: (item: T) => Promise<unknown>, errorFormatter: (item: T, error: string) => string) => Promise<RpcBatchResult>;

package/types/csv-upload/parse/index.d.ts

@@ -0,0 +1,5 @@
+export { CSV_FIRST_DATA_ROW_NUMBER, CSV_HEADER_ROW_NUMBER, } from "./csv-constants";
+export { CsvParseErrorEnum, CsvValidationErrorEnum, type CsvError, type CsvErrorMap, type CsvErrorState, type CsvParseError, type CsvParseErrorMap, type CsvStructuredError, type CsvValidationError, type CsvValidationErrorMap, type CsvValidationErrorType, type CsvValidationStructuredError, addCsvFileError, addCsvRowError, createCsvErrorState, hasCsvErrors, } from "./csv-errors";
+export { parseCsv, type CsvParseOptions, type CsvParseResult, } from "./csv-parse";
+export { validateCsvAgainstSchema, type CsvValidationOptions, type CsvValidationResult, } from "./csv-schema-validation";
+export { buildRowErrorMessage, executeBatchRpcCalls, hasFileParseErrors, isCsvParseError, mergeValidationWithParseErrors, normalizeTableData, toErrorMessage, toValidationErrorsFromParseRowErrors, type CsvUploadTableData, type RpcBatchResult, } from "./csv-upload-utils";

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

@@ -0,0 +1,26 @@
+import type { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
+import { type CsvParseOptions } from "./parse/csv-parse";
+import { type CsvValidationResult } from "./parse/csv-schema-validation";
+import type { CsvUploadErrorResult, CsvUploadImportedResult, CsvUploadSessionEndResult, CsvUploadSessionTable } from "./CsvUpload";
+export interface CsvUploadHookProps {
+    dataSource: DataSource;
+    maxRows?: number;
+    onEditSessionEnded?: (result: CsvUploadSessionEndResult) => void;
+    onEditSessionStarted?: (dataSource: DataSource) => void;
+    onError?: (result: CsvUploadErrorResult | undefined) => void;
+    onImported?: (result: CsvUploadImportedResult) => void;
+    onProcessingStarted?: () => void;
+    parseOptions?: CsvParseOptions;
+}
+export type UseCsvUploadReturn = {
+    canImport: boolean;
+    importData: () => Promise<void>;
+    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;
+};
+export declare const useCsvUpload: ({ dataSource, onEditSessionEnded, onEditSessionStarted, onError, onImported, onProcessingStarted, maxRows, parseOptions, }: CsvUploadHookProps) => UseCsvUploadReturn;

package/types/csv-upload/useCsvUploadSessionPreview.d.ts

@@ -0,0 +1,10 @@
+import type { DataSource } from "@vuu-ui/vuu-data-types";
+import type { TableConfig } from "@vuu-ui/vuu-table-types";
+import type { CsvUploadSessionTable } from "./CsvUpload";
+export type UseCsvUploadSessionPreviewReturn = {
+    isLoadingPreview: boolean;
+    previewConfig: TableConfig | undefined;
+    previewDataSource: DataSource | undefined;
+    previewError: string | undefined;
+};
+export declare const useCsvUploadSessionPreview: (sessionTable: CsvUploadSessionTable | undefined) => UseCsvUploadSessionPreviewReturn;

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

@@ -4,7 +4,7 @@ export interface FreezeProps {
     dataSource: DataSource;
 }
 export declare const useFreezeControl: ({ dataSource }: FreezeProps) => {
-    onToggleChange: (evt: SyntheticEvent<HTMLButtonElement>) => void;
     isFrozen: boolean;
     newRecordCount: number;
+    onToggleChange: (evt: SyntheticEvent<HTMLButtonElement>) => void;
 };

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export { CalculatedColumnPanel } from "./calculated-column/CalculatedColumnPanel";
+export * from "./csv-upload";
 export * from "./cell-edit-validators";
 export * from "./cell-renderers";
 export * from "./column-expression-input";

package/cjs/calculated-column/CalculatedColumnPanel.js

@@ -1,85 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var useCalculatedColumnPanel = require('./useCalculatedColumnPanel.js');
-var react = require('react');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var ColumnExpressionInput = require('../column-expression-input/ColumnExpressionInput.js');
-require('../column-expression-input/column-language-parser/ColumnExpressionLanguage.js');
-require('../column-expression-input/column-language-parser/ColumnExpressionTreeWalker.js');
-require('../column-expression-input/column-language-parser/column-expression-parse-utils.js');
-require('@vuu-ui/vuu-codemirror');
-require('../column-expression-input/highlighting.js');
-require('../column-expression-input/theme.js');
-var useColumnExpressionSuggestionProvider = require('../column-expression-input/useColumnExpressionSuggestionProvider.js');
-
-const classBase = "vuuCalculatedColumnPanel";
-const CalculatedColumnPanel = ({
-  column: columnProp,
-  columnModel,
-  onChangeColumn,
-  onChangeServerDataType: onChangeServerDataTypeProp,
-  vuuTable
-}) => {
-  const typeRef = react.useRef(null);
-  const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useCalculatedColumnPanel.useCalculatedColumnPanel({
-    column: columnProp,
-    onChangeColumn,
-    onChangeServerDataType: onChangeServerDataTypeProp
-  });
-  const initialExpressionRef = react.useRef(
-    vuuUtils.getCalculatedColumnDetails(column).expression ?? ""
-  );
-  const suggestionProvider = useColumnExpressionSuggestionProvider.useColumnExpressionSuggestionProvider({
-    columns: columnModel.selectedColumns,
-    table: vuuTable
-  });
-  const handleSubmitExpression = react.useCallback(() => {
-    if (typeRef.current) {
-      typeRef.current?.querySelector("button")?.focus();
-    }
-  }, []);
-  const { name, serverDataType } = vuuUtils.getCalculatedColumnDetails(column);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: column.name }),
-    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-name", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column Label" }),
-      /* @__PURE__ */ jsxRuntime.jsx(core.Input, { className: "vuuInput", onChange: onChangeName, value: name })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "column-expression", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Expression" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ColumnExpressionInput.ColumnExpressionInput,
-        {
-          onChange: onChangeExpression,
-          onSubmitExpression: handleSubmitExpression,
-          source: initialExpressionRef.current,
-          suggestionProvider
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "type", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Column type" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        core.Dropdown,
-        {
-          className: `${classBase}-type`,
-          onSelectionChange: onChangeServerDataType,
-          ref: typeRef,
-          selected: serverDataType ? [serverDataType] : [],
-          value: serverDataType,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "boolean", children: "Boolean" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "double", children: "Double" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "long", children: "Long" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: "string", children: "String" })
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-
-exports.CalculatedColumnPanel = CalculatedColumnPanel;
-//# sourceMappingURL=CalculatedColumnPanel.js.map

package/cjs/calculated-column/CalculatedColumnPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CalculatedColumnPanel.js","sources":["../../../../packages/vuu-table-extras/src/calculated-column/CalculatedColumnPanel.tsx"],"sourcesContent":["import {\n  Dropdown,\n  FormField,\n  FormFieldLabel,\n  Input,\n  Option,\n} from \"@salt-ds/core\";\nimport { useCalculatedColumnPanel } from \"./useCalculatedColumnPanel\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { VuuColumnDataType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { getCalculatedColumnDetails } from \"@vuu-ui/vuu-utils\";\nimport {\n  ColumnExpressionInput,\n  ColumnExpressionSubmitHandler,\n  useColumnExpressionSuggestionProvider,\n} from \"../column-expression-input\";\nimport { ColumnModel } from \"../column-picker/ColumnModel\";\n\nconst classBase = \"vuuCalculatedColumnPanel\";\n\nexport interface CalculatedColumnPanelProps\n  extends HTMLAttributes<HTMLDivElement> {\n  column: ColumnDescriptor;\n  columnModel: ColumnModel;\n  onChangeColumn: (column: ColumnDescriptor) => void;\n  onChangeServerDataType?: (name: VuuColumnDataType) => void;\n  vuuTable: VuuTable;\n}\n\nexport const CalculatedColumnPanel = ({\n  column: columnProp,\n  columnModel,\n  onChangeColumn,\n  onChangeServerDataType: onChangeServerDataTypeProp,\n  vuuTable,\n}: CalculatedColumnPanelProps) => {\n  const typeRef = useRef<HTMLButtonElement>(null);\n\n  const { column, onChangeExpression, onChangeName, onChangeServerDataType } =\n    useCalculatedColumnPanel({\n      column: columnProp,\n      onChangeColumn,\n      onChangeServerDataType: onChangeServerDataTypeProp,\n    });\n  // The initial value to pass into the Expression Input. That is a\n  // CodeMirror editor and will manage its own state once initialised.\n  const initialExpressionRef = useRef<string>(\n    getCalculatedColumnDetails(column).expression ?? \"\",\n  );\n\n  const suggestionProvider = useColumnExpressionSuggestionProvider({\n    columns: columnModel.selectedColumns,\n    table: vuuTable,\n  });\n\n  const handleSubmitExpression =\n    useCallback<ColumnExpressionSubmitHandler>(() => {\n      if (typeRef.current) {\n        (\n          typeRef.current?.querySelector(\"button\") as HTMLButtonElement\n        )?.focus();\n      }\n    }, []);\n\n  const { name, serverDataType } = getCalculatedColumnDetails(column);\n\n  return (\n    <div className={classBase}>\n      <div>{column.name}</div>\n\n      <FormField data-field=\"column-name\">\n        <FormFieldLabel>Column Label</FormFieldLabel>\n        <Input className=\"vuuInput\" onChange={onChangeName} value={name} />\n      </FormField>\n\n      <FormField data-field=\"column-expression\">\n        <FormFieldLabel>Expression</FormFieldLabel>\n        <ColumnExpressionInput\n          onChange={onChangeExpression}\n          onSubmitExpression={handleSubmitExpression}\n          source={initialExpressionRef.current}\n          suggestionProvider={suggestionProvider}\n        />\n      </FormField>\n      <FormField data-field=\"type\">\n        <FormFieldLabel>Column type</FormFieldLabel>\n        <Dropdown\n          className={`${classBase}-type`}\n          onSelectionChange={onChangeServerDataType}\n          ref={typeRef}\n          selected={serverDataType ? [serverDataType] : []}\n          value={serverDataType}\n        >\n          <Option value=\"boolean\">Boolean</Option>\n          <Option value=\"double\">Double</Option>\n          <Option value=\"long\">Long</Option>\n          <Option value=\"string\">String</Option>\n        </Dropdown>\n      </FormField>\n    </div>\n  );\n};\n"],"names":["useRef","useCalculatedColumnPanel","getCalculatedColumnDetails","useColumnExpressionSuggestionProvider","useCallback","jsxs","jsx","FormField","FormFieldLabel","Input","ColumnExpressionInput","Dropdown","Option"],"mappings":"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"}

package/cjs/calculated-column/useCalculatedColumnPanel.js

@@ -1,71 +0,0 @@
-'use strict';
-
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var react = require('react');
-
-const applyDefaults = (column) => {
-  const { name, expression, serverDataType } = vuuUtils.getCalculatedColumnDetails(column);
-  if (serverDataType === void 0) {
-    return {
-      ...column,
-      name: `${name}:string:${expression}`
-    };
-  } else {
-    return column;
-  }
-};
-const useCalculatedColumnPanel = ({
-  column: columnProp,
-  onChangeColumn,
-  onChangeServerDataType: onChangeServerDataTypeProp
-}) => {
-  const [column, _setColumn] = react.useState(
-    applyDefaults(columnProp)
-  );
-  const columnRef = react.useRef(columnProp);
-  const setColumn = react.useCallback((column2) => {
-    columnRef.current = column2;
-    _setColumn(column2);
-  }, []);
-  const onChangeName = react.useCallback(
-    (evt) => {
-      const { value } = evt.target;
-      const newColumn = vuuUtils.setCalculatedColumnName(column, value);
-      console.log(`name = ${newColumn.name}`);
-      setColumn(newColumn);
-      onChangeColumn(newColumn);
-    },
-    [column, onChangeColumn, setColumn]
-  );
-  const onChangeExpression = react.useCallback(
-    (value) => {
-      console.log(`expression = ${value}`);
-      const expression = value.trim();
-      const { current: column2 } = columnRef;
-      const newColumn = vuuUtils.setCalculatedColumnExpression(column2, expression);
-      setColumn(newColumn);
-      onChangeColumn(newColumn);
-    },
-    [onChangeColumn, setColumn]
-  );
-  const onChangeServerDataType = react.useCallback(
-    (_e, [serverDataType]) => {
-      if (vuuUtils.isVuuColumnDataType(serverDataType)) {
-        const newColumn = vuuUtils.setCalculatedColumnType(column, serverDataType);
-        setColumn(newColumn);
-        onChangeServerDataTypeProp?.(serverDataType);
-        onChangeColumn(newColumn);
-      }
-    },
-    [column, onChangeColumn, onChangeServerDataTypeProp, setColumn]
-  );
-  return {
-    column,
-    onChangeExpression,
-    onChangeName,
-    onChangeServerDataType
-  };
-};
-
-exports.useCalculatedColumnPanel = useCalculatedColumnPanel;
-//# sourceMappingURL=useCalculatedColumnPanel.js.map

package/cjs/calculated-column/useCalculatedColumnPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCalculatedColumnPanel.js","sources":["../../../../packages/vuu-table-extras/src/calculated-column/useCalculatedColumnPanel.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getCalculatedColumnDetails,\n  isVuuColumnDataType,\n  setCalculatedColumnExpression,\n  setCalculatedColumnName,\n  setCalculatedColumnType,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FormEventHandler,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { CalculatedColumnPanelProps } from \"./CalculatedColumnPanel\";\n\nexport type ColumnExpressionHookProps = Pick<\n  CalculatedColumnPanelProps,\n  \"column\" | \"onChangeColumn\" | \"onChangeServerDataType\"\n>;\n\nconst applyDefaults = (column: ColumnDescriptor) => {\n  const { name, expression, serverDataType } =\n    getCalculatedColumnDetails(column);\n  if (serverDataType === undefined) {\n    return {\n      ...column,\n      name: `${name}:string:${expression}`,\n    };\n  } else {\n    return column;\n  }\n};\n\nexport const useCalculatedColumnPanel = ({\n  column: columnProp,\n  onChangeColumn,\n  onChangeServerDataType: onChangeServerDataTypeProp,\n}: ColumnExpressionHookProps) => {\n  const [column, _setColumn] = useState<ColumnDescriptor>(\n    applyDefaults(columnProp),\n  );\n  const columnRef = useRef<ColumnDescriptor>(columnProp);\n  const setColumn = useCallback((column: ColumnDescriptor) => {\n    columnRef.current = column;\n    _setColumn(column);\n  }, []);\n\n  // We need to track column name in a ref because ColunExpressionInput\n  // is not a pure React component, it hosts a CodeMirror editor. We\n  // do not want to cause it to render mid-edit. Therefore it uses memo\n  // and only renders on initial load. onChangeExpression must be stable.\n  // const columnNameRef = useRef<string>(column.name);\n  // const expressionRef = useRef(getCalculatedColumnDetails(column)[1]);\n  const onChangeName = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const newColumn = setCalculatedColumnName(column, value);\n      // columnNameRef.current = newColumn.name;\n      console.log(`name = ${newColumn.name}`);\n      setColumn(newColumn);\n      onChangeColumn(newColumn);\n    },\n    [column, onChangeColumn, setColumn],\n  );\n\n  const onChangeExpression = useCallback(\n    (value: string) => {\n      console.log(`expression = ${value}`);\n      // we do not set state when this changes as the codemirror editor\n      // manages state of the expression for us until complete\n      const expression = value.trim();\n      // expressionRef.current = expression;\n      // const [name, , type] = column.name.split(\":\");\n      // columnNameRef.current = `${name}:${expression}:${type}`;\n\n      const { current: column } = columnRef;\n      const newColumn = setCalculatedColumnExpression(column, expression);\n      setColumn(newColumn);\n\n      onChangeColumn(newColumn);\n    },\n    [onChangeColumn, setColumn],\n  );\n\n  const onChangeServerDataType = useCallback(\n    (_e: SyntheticEvent, [serverDataType]: string[]) => {\n      if (isVuuColumnDataType(serverDataType)) {\n        const newColumn = setCalculatedColumnType(column, serverDataType);\n        setColumn(newColumn);\n        onChangeServerDataTypeProp?.(serverDataType);\n        onChangeColumn(newColumn);\n      }\n    },\n    [column, onChangeColumn, onChangeServerDataTypeProp, setColumn],\n  );\n\n  return {\n    column,\n    onChangeExpression,\n    onChangeName,\n    onChangeServerDataType,\n  };\n};\n"],"names":["getCalculatedColumnDetails","useState","useRef","useCallback","column","setCalculatedColumnName","setCalculatedColumnExpression","isVuuColumnDataType","setCalculatedColumnType"],"mappings":";;;;;AAsBA,MAAM,aAAA,GAAgB,CAAC,MAA6B,KAAA;AAClD,EAAA,MAAM,EAAE,IAAM,EAAA,UAAA,EAAY,cAAe,EAAA,GACvCA,oCAA2B,MAAM,CAAA;AACnC,EAAA,IAAI,mBAAmB,KAAW,CAAA,EAAA;AAChC,IAAO,OAAA;AAAA,MACL,GAAG,MAAA;AAAA,MACH,IAAM,EAAA,CAAA,EAAG,IAAI,CAAA,QAAA,EAAW,UAAU,CAAA;AAAA,KACpC;AAAA,GACK,MAAA;AACL,IAAO,OAAA,MAAA;AAAA;AAEX,CAAA;AAEO,MAAM,2BAA2B,CAAC;AAAA,EACvC,MAAQ,EAAA,UAAA;AAAA,EACR,cAAA;AAAA,EACA,sBAAwB,EAAA;AAC1B,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,MAAQ,EAAA,UAAU,CAAI,GAAAC,cAAA;AAAA,IAC3B,cAAc,UAAU;AAAA,GAC1B;AACA,EAAM,MAAA,SAAA,GAAYC,aAAyB,UAAU,CAAA;AACrD,EAAM,MAAA,SAAA,GAAYC,iBAAY,CAAA,CAACC,OAA6B,KAAA;AAC1D,IAAA,SAAA,CAAU,OAAUA,GAAAA,OAAAA;AACpB,IAAA,UAAA,CAAWA,OAAM,CAAA;AAAA,GACnB,EAAG,EAAE,CAAA;AAQL,EAAA,MAAM,YAAe,GAAAD,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAM,MAAA,SAAA,GAAYE,gCAAwB,CAAA,MAAA,EAAQ,KAAK,CAAA;AAEvD,MAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,OAAA,EAAU,SAAU,CAAA,IAAI,CAAE,CAAA,CAAA;AACtC,MAAA,SAAA,CAAU,SAAS,CAAA;AACnB,MAAA,cAAA,CAAe,SAAS,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,MAAQ,EAAA,cAAA,EAAgB,SAAS;AAAA,GACpC;AAEA,EAAA,MAAM,kBAAqB,GAAAF,iBAAA;AAAA,IACzB,CAAC,KAAkB,KAAA;AACjB,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAgB,aAAA,EAAA,KAAK,CAAE,CAAA,CAAA;AAGnC,MAAM,MAAA,UAAA,GAAa,MAAM,IAAK,EAAA;AAK9B,MAAM,MAAA,EAAE,OAASC,EAAAA,OAAAA,EAAW,GAAA,SAAA;AAC5B,MAAM,MAAA,SAAA,GAAYE,sCAA8BF,CAAAA,OAAAA,EAAQ,UAAU,CAAA;AAClE,MAAA,SAAA,CAAU,SAAS,CAAA;AAEnB,MAAA,cAAA,CAAe,SAAS,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,gBAAgB,SAAS;AAAA,GAC5B;AAEA,EAAA,MAAM,sBAAyB,GAAAD,iBAAA;AAAA,IAC7B,CAAC,EAAA,EAAoB,CAAC,cAAc,CAAgB,KAAA;AAClD,MAAI,IAAAI,4BAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,QAAM,MAAA,SAAA,GAAYC,gCAAwB,CAAA,MAAA,EAAQ,cAAc,CAAA;AAChE,QAAA,SAAA,CAAU,SAAS,CAAA;AACnB,QAAA,0BAAA,GAA6B,cAAc,CAAA;AAC3C,QAAA,cAAA,CAAe,SAAS,CAAA;AAAA;AAC1B,KACF;AAAA,IACA,CAAC,MAAA,EAAQ,cAAgB,EAAA,0BAAA,EAA4B,SAAS;AAAA,GAChE;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}