@vuu-ui/vuu-data-react 2.1.19-beta.2 → 2.1.19-beta.3

package/cjs/lost-connection-indicator/useLostConnection.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuDataRemote = require('@vuu-ui/vuu-data-remote');
+var react = require('react');
+var vuuNotifications = require('@vuu-ui/vuu-notifications');
+var LostConnectionIndicator = require('./LostConnectionIndicator.js');
+
+const useLostConnection = () => {
+  const { hideNotification, showNotification } = vuuNotifications.useNotifications();
+  const isConnectedRef = react.useRef(vuuDataRemote.ConnectionManager.connected);
+  const handleConnectionStatusChange = react.useCallback(
+    (connectionStatus) => {
+      const { current: wasConnected } = isConnectedRef;
+      isConnectedRef.current = vuuDataRemote.isConnected(connectionStatus);
+      if (wasConnected && connectionStatus === "disconnected") {
+        showNotification({
+          content: /* @__PURE__ */ jsxRuntime.jsx(LostConnectionIndicator.LostConnectionIndicator, {}),
+          status: "error",
+          type: vuuNotifications.NotificationType.Workspace
+        });
+      } else if (!wasConnected && isConnectedRef.current) {
+        hideNotification();
+      }
+    },
+    [hideNotification, showNotification]
+  );
+  react.useMemo(async () => {
+    vuuDataRemote.ConnectionManager.on("connection-status", handleConnectionStatusChange);
+  }, [handleConnectionStatusChange]);
+};
+
+exports.useLostConnection = useLostConnection;
+//# sourceMappingURL=useLostConnection.js.map

package/cjs/lost-connection-indicator/useLostConnection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLostConnection.js","sources":["../../../../packages/vuu-data-react/src/lost-connection-indicator/useLostConnection.tsx"],"sourcesContent":["import {\n  ConnectionManager,\n  ConnectionStatus,\n  isConnected,\n} from \"@vuu-ui/vuu-data-remote\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { NotificationType, useNotifications } from \"@vuu-ui/vuu-notifications\";\nimport { LostConnectionIndicator } from \"../lost-connection-indicator/LostConnectionIndicator\";\n\nexport const useLostConnection = () => {\n  const { hideNotification, showNotification } = useNotifications();\n\n  const isConnectedRef = useRef(ConnectionManager.connected);\n\n  const handleConnectionStatusChange = useCallback(\n    (connectionStatus: ConnectionStatus) => {\n      const { current: wasConnected } = isConnectedRef;\n      isConnectedRef.current = isConnected(connectionStatus);\n\n      if (wasConnected && connectionStatus === \"disconnected\") {\n        showNotification({\n          content: <LostConnectionIndicator />,\n          status: \"error\",\n          type: NotificationType.Workspace,\n        });\n      } else if (!wasConnected && isConnectedRef.current) {\n        hideNotification();\n      }\n    },\n    [hideNotification, showNotification],\n  );\n\n  useMemo(async () => {\n    ConnectionManager.on(\"connection-status\", handleConnectionStatusChange);\n  }, [handleConnectionStatusChange]);\n};\n"],"names":["useNotifications","useRef","ConnectionManager","useCallback","isConnected","LostConnectionIndicator","NotificationType","useMemo"],"mappings":";;;;;;;;AASO,MAAM,oBAAoB,MAAM;AACrC,EAAA,MAAM,EAAE,gBAAA,EAAkB,gBAAiB,EAAA,GAAIA,iCAAiB,EAAA;AAEhE,EAAM,MAAA,cAAA,GAAiBC,YAAO,CAAAC,+BAAA,CAAkB,SAAS,CAAA;AAEzD,EAAA,MAAM,4BAA+B,GAAAC,iBAAA;AAAA,IACnC,CAAC,gBAAuC,KAAA;AACtC,MAAM,MAAA,EAAE,OAAS,EAAA,YAAA,EAAiB,GAAA,cAAA;AAClC,MAAe,cAAA,CAAA,OAAA,GAAUC,0BAAY,gBAAgB,CAAA;AAErD,MAAI,IAAA,YAAA,IAAgB,qBAAqB,cAAgB,EAAA;AACvD,QAAiB,gBAAA,CAAA;AAAA,UACf,OAAA,iCAAUC,+CAAwB,EAAA,EAAA,CAAA;AAAA,UAClC,MAAQ,EAAA,OAAA;AAAA,UACR,MAAMC,iCAAiB,CAAA;AAAA,SACxB,CAAA;AAAA,OACQ,MAAA,IAAA,CAAC,YAAgB,IAAA,cAAA,CAAe,OAAS,EAAA;AAClD,QAAiB,gBAAA,EAAA;AAAA;AACnB,KACF;AAAA,IACA,CAAC,kBAAkB,gBAAgB;AAAA,GACrC;AAEA,EAAAC,aAAA,CAAQ,YAAY;AAClB,IAAkBL,+BAAA,CAAA,EAAA,CAAG,qBAAqB,4BAA4B,CAAA;AAAA,GACxE,EAAG,CAAC,4BAA4B,CAAC,CAAA;AACnC;;;;"}

package/cjs/session-editing-form/SessionEditingForm.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var sessionEditingFormCss = ".vuuSessionEditingForm {\n    display: flex;\n    flex-direction: column;\n    gap: 3px;\n    min-width: 400px;\n}\n\n.vuuSessionEditingForm-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 1 auto;\n    gap: 3px;\n    overflow: auto;\n    padding: var(--salt-spacing-200);\n}\n\n\n.vuuSessionEditingForm-fieldValue.vuuReadOnly {\n    font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n.vuuSessionEditingForm-buttonbar {\n    align-items: center;\n    border-top: solid 1px var(--salt-container-primary-borderColor);\n    box-sizing: content-box;\n    display: flex;\n    justify-content: flex-end;\n    flex: 0 0 autox;\n    gap: 6px;\n    height: var(--salt-size-base);\n    margin: var(--salt-spacing-200);\n    padding-top: var(--salt-spacing-200);\n\n}\n\n.vuuSessionEditingForm-errorBanner {\n    --vuu-icon-left: 3px;\n    --vuu-icon-size: 18px;\n    --vuu-icon-top: 3px;\n    border: solid 1px var(--salt-status-error-borderColor);\n    line-height: 24px;\n    padding: 0 6px 0 26px;\n    position: relative;\n}";
+
+module.exports = sessionEditingFormCss;
+//# sourceMappingURL=SessionEditingForm.css.js.map

package/cjs/session-editing-form/SessionEditingForm.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionEditingForm.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/session-editing-form/SessionEditingForm.js

@@ -0,0 +1,270 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuDataRemote = require('@vuu-ui/vuu-data-remote');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var react = require('react');
+var SessionEditingForm$1 = require('./SessionEditingForm.css.js');
+
+const classBase = "vuuSessionEditingForm";
+const getField = (fields, name) => {
+  const field = fields.find((f) => f.name === name);
+  if (field) {
+    return field;
+  } else {
+    throw Error(`SessionEditingForm, no field '${name}' found`);
+  }
+};
+const getFieldNameAndValue = ({
+  target
+}) => {
+  const formField = vuuUtils.queryClosest(target, ".saltFormField");
+  if (formField) {
+    const {
+      dataset: { field }
+    } = formField;
+    if (field === void 0) {
+      throw Error("SessionEditingForm, form field has no field data attribute");
+    }
+    return [field, target.value];
+  } else {
+    throw Error("Form control is not enclosed in FormField");
+  }
+};
+const Status = {
+  uninitialised: 0,
+  unchanged: 1,
+  changed: 2,
+  invalid: 3
+};
+const getDataSource = (dataSource, schema) => {
+  if (dataSource) {
+    return dataSource;
+  } else if (schema) {
+    return new vuuDataRemote.VuuDataSource({
+      bufferSize: 0,
+      table: schema.table,
+      columns: schema.columns.map((col) => col.name)
+    });
+  } else {
+    throw Error(
+      "SessionEditingForm: either a DataSource or a TableSchema must be provided"
+    );
+  }
+};
+const SessionEditingForm = ({
+  className,
+  config: { fields, key: keyField },
+  dataSource: dataSourceProp,
+  id: idProp,
+  onClose,
+  schema,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-session-editing-form",
+    css: SessionEditingForm$1,
+    window: targetWindow
+  });
+  const [fieldStatusValues, setFieldStatusValues] = react.useState({});
+  const [values, setValues] = react.useState();
+  const [errorMessage, setErrorMessage] = react.useState("");
+  const formContentRef = react.useRef(null);
+  const initialDataRef = react.useRef(void 0);
+  const dataStatusRef = react.useRef(Status.uninitialised);
+  const dataSource = react.useMemo(() => {
+    const ds = getDataSource(dataSourceProp, schema);
+    const { columns } = ds;
+    const columnMap = vuuUtils.buildColumnMap(ds.columns);
+    const applyServerData = (data) => {
+      if (columnMap) {
+        const values2 = {};
+        for (const column of columns) {
+          values2[column] = data[columnMap[column]];
+        }
+        if (dataStatusRef.current === Status.uninitialised) {
+          dataStatusRef.current = Status.unchanged;
+          initialDataRef.current = values2;
+        }
+        setValues(values2);
+      }
+    };
+    ds.subscribe({ range: vuuUtils.Range(0, 5) }, (message) => {
+      if (message.type === "viewport-update" && message.rows) {
+        if (dataStatusRef.current === Status.uninitialised) {
+          applyServerData(message.rows[0]);
+        } else {
+          console.log("what do we do with server updates");
+        }
+      }
+    });
+    return ds;
+  }, [dataSourceProp, schema]);
+  const id = core.useIdMemo(idProp);
+  const handleChange = react.useCallback(
+    (evt) => {
+      const [field, value] = getFieldNameAndValue(evt);
+      const { type } = getField(fields, field);
+      const typedValue = vuuUtils.getTypedValue(value, type);
+      setValues((values2 = {}) => {
+        const newValues = {
+          ...values2,
+          [field]: typedValue
+        };
+        const notUpdated = vuuUtils.shallowEquals(newValues, initialDataRef.current);
+        dataStatusRef.current = notUpdated ? Status.unchanged : typedValue !== void 0 ? Status.changed : Status.invalid;
+        return newValues;
+      });
+    },
+    [fields]
+  );
+  const handleBlur = react.useCallback(
+    async (evt) => {
+      const [column, value] = getFieldNameAndValue(evt);
+      const key = values?.[keyField];
+      const { type } = getField(fields, column);
+      const data = vuuUtils.getTypedValue(value, type, true);
+      if (typeof key === "string") {
+        const response = await dataSource.rpcRequest?.({
+          params: {
+            key,
+            column,
+            data
+          },
+          rpcName: "editCell",
+          type: "RPC_REQUEST"
+        });
+        if (response?.type === "SUCCESS_RESULT") {
+          setFieldStatusValues((map) => ({
+            ...map,
+            [column]: void 0
+          }));
+        } else if (response?.type === "ERROR_RESULT") {
+          console.log(`edit rejected ${response.errorMessage}`);
+          setFieldStatusValues((map) => ({
+            ...map,
+            [column]: response.errorMessage
+          }));
+        }
+      }
+    },
+    [dataSource, fields, keyField, values]
+  );
+  const handleSubmit = react.useCallback(async () => {
+    const response = await dataSource.rpcRequest?.({
+      params: { comment: "" },
+      rpcName: "submitForm",
+      type: "RPC_REQUEST"
+    });
+    if (response?.type === "SUCCESS_RESULT") {
+      onClose?.();
+    } else if (response?.type === "ERROR_RESULT") {
+      setErrorMessage(response.errorMessage);
+    }
+  }, [dataSource, onClose]);
+  const handleKeyDown = react.useCallback(
+    (evt) => {
+      if (evt.key === "Enter" && dataStatusRef.current === Status.changed) {
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+  const handleCancel = react.useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+  const getFormControl = (field) => {
+    const value = String(values?.[field.name] ?? "");
+    if (field.readonly || field.name === keyField) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-fieldValue vuuReadOnly`, children: value });
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.Input,
+        {
+          className: `${classBase}-fieldValue`,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          value,
+          id: `${id}-input-${field.name}`
+        }
+      );
+    }
+  };
+  react.useEffect(() => {
+    if (formContentRef.current) {
+      const firstInput = formContentRef.current.querySelector(
+        "input"
+      );
+      if (firstInput) {
+        setTimeout(() => {
+          firstInput.focus();
+          firstInput.select();
+        }, 100);
+      }
+    }
+  }, []);
+  react.useEffect(() => {
+    return () => {
+      if (dataSource) {
+        dataSource.unsubscribe();
+      }
+    };
+  }, [dataSource]);
+  const isDirty = dataStatusRef.current === Status.changed;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
+    errorMessage ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${classBase}-errorBanner`,
+        "data-icon": "error",
+        title: errorMessage,
+        children: "Error, edit(s) not saved"
+      }
+    ) : void 0,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${classBase}-content`,
+        ref: formContentRef,
+        onKeyDown: handleKeyDown,
+        children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
+          core.FormField,
+          {
+            className: `${classBase}-field`,
+            "data-field": field.name,
+            necessity: field.required ? "required" : "optional",
+            readOnly: field.readonly,
+            validationStatus: fieldStatusValues[field.name] ? "error" : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: field?.label ?? field.description }),
+              getFormControl(field),
+              /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, { children: fieldStatusValues[field.name] ?? "" })
+            ]
+          },
+          field.name
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-buttonbar salt-theme salt-density-high`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Button,
+        {
+          type: "submit",
+          variant: "cta",
+          disabled: !isDirty,
+          onClick: handleSubmit,
+          children: "Submit"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(core.Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" })
+    ] })
+  ] });
+};
+
+exports.SessionEditingForm = SessionEditingForm;
+//# sourceMappingURL=SessionEditingForm.js.map

package/cjs/session-editing-form/SessionEditingForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionEditingForm.js","sources":["../../../../packages/vuu-data-react/src/session-editing-form/SessionEditingForm.tsx"],"sourcesContent":["import { VuuDataSource } from \"@vuu-ui/vuu-data-remote\";\nimport { DataSource, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport {\n  VuuColumnDataType,\n  VuuDataRow,\n  VuuRowDataItemType,\n} from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  buildColumnMap,\n  getTypedValue,\n  queryClosest,\n  Range,\n  shallowEquals,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  Button,\n  FormField,\n  FormFieldHelperText,\n  FormFieldLabel,\n  Input,\n  useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  FocusEvent,\n  FocusEventHandler,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport sessionEditingFormCss from \"./SessionEditingForm.css\";\n\nexport type FormFieldDescriptor = {\n  isKeyField?: boolean;\n  label?: string;\n  name: string;\n  type: VuuColumnDataType;\n  description: string;\n  readonly?: boolean;\n  required?: boolean;\n};\n\nexport type FormConfig = {\n  title: string;\n  key: string;\n  fields: FormFieldDescriptor[];\n};\n\nexport interface SessionEditingFormProps\n  extends HTMLAttributes<HTMLDivElement> {\n  config: FormConfig;\n  onClose?: () => void;\n  dataSource?: DataSource;\n  schema?: TableSchema;\n}\n\nconst classBase = \"vuuSessionEditingForm\";\n\nconst getField = (\n  fields: FormFieldDescriptor[],\n  name: string,\n): FormFieldDescriptor => {\n  const field = fields.find((f) => f.name === name);\n  if (field) {\n    return field;\n  } else {\n    throw Error(`SessionEditingForm, no field '${name}' found`);\n  }\n};\n\nconst getFieldNameAndValue = ({\n  target,\n}: ChangeEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>): [\n  string,\n  string,\n] => {\n  const formField = queryClosest(target, \".saltFormField\");\n  if (formField) {\n    const {\n      dataset: { field },\n    } = formField;\n    if (field === undefined) {\n      throw Error(\"SessionEditingForm, form field has no field data attribute\");\n    }\n    return [field, target.value];\n  } else {\n    throw Error(\"Form control is not enclosed in FormField\");\n  }\n};\n\nconst Status = {\n  uninitialised: 0,\n  unchanged: 1,\n  changed: 2,\n  invalid: 3,\n};\n\nconst getDataSource = (\n  dataSource?: DataSource,\n  schema?: TableSchema,\n): DataSource => {\n  if (dataSource) {\n    return dataSource;\n  } else if (schema) {\n    return new VuuDataSource({\n      bufferSize: 0,\n      table: schema.table,\n      columns: schema.columns.map((col) => col.name),\n    }) as DataSource;\n  } else {\n    throw Error(\n      \"SessionEditingForm: either a DataSource or a TableSchema must be provided\",\n    );\n  }\n};\n\ntype FormValues = { [key: string]: VuuRowDataItemType | undefined };\n\nexport const SessionEditingForm = ({\n  className,\n  config: { fields, key: keyField },\n  dataSource: dataSourceProp,\n  id: idProp,\n  onClose,\n  schema,\n  ...htmlAttributes\n}: SessionEditingFormProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-session-editing-form\",\n    css: sessionEditingFormCss,\n    window: targetWindow,\n  });\n\n  const [fieldStatusValues, setFieldStatusValues] = useState<\n    Record<string, string | undefined>\n  >({});\n  const [values, setValues] = useState<FormValues>();\n  const [errorMessage, setErrorMessage] = useState(\"\");\n  const formContentRef = useRef<HTMLDivElement>(null);\n  const initialDataRef = useRef<FormValues>(undefined);\n  const dataStatusRef = useRef(Status.uninitialised);\n\n  const dataSource = useMemo(() => {\n    const ds = getDataSource(dataSourceProp, schema);\n    const { columns } = ds;\n    const columnMap = buildColumnMap(ds.columns);\n\n    const applyServerData = (data: VuuDataRow) => {\n      if (columnMap) {\n        const values: { [key: string]: VuuRowDataItemType } = {};\n        for (const column of columns) {\n          values[column] = data[columnMap[column]];\n        }\n        if (dataStatusRef.current === Status.uninitialised) {\n          dataStatusRef.current = Status.unchanged;\n          initialDataRef.current = values;\n        }\n        setValues(values);\n      }\n    };\n\n    ds.subscribe({ range: Range(0, 5) }, (message) => {\n      if (message.type === \"viewport-update\" && message.rows) {\n        if (dataStatusRef.current === Status.uninitialised) {\n          applyServerData(message.rows[0]);\n        } else {\n          console.log(\"what do we do with server updates\");\n        }\n      }\n    });\n    return ds;\n  }, [dataSourceProp, schema]);\n\n  const id = useIdMemo(idProp);\n\n  const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (evt) => {\n      const [field, value] = getFieldNameAndValue(evt);\n      const { type } = getField(fields, field);\n      const typedValue = getTypedValue(value, type);\n      setValues((values = {}) => {\n        const newValues = {\n          ...values,\n          [field]: typedValue,\n        };\n        const notUpdated = shallowEquals(newValues, initialDataRef.current);\n        dataStatusRef.current = notUpdated\n          ? Status.unchanged\n          : typedValue !== undefined\n            ? Status.changed\n            : Status.invalid;\n        return newValues;\n      });\n    },\n    [fields],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLInputElement>>(\n    async (evt) => {\n      const [column, value] = getFieldNameAndValue(evt);\n      const key = values?.[keyField];\n      // TODO link this with client side validation if we're going to use it\n      const { type } = getField(fields, column);\n      const data = getTypedValue(value, type, true);\n      if (typeof key === \"string\") {\n        const response = await dataSource.rpcRequest?.({\n          params: {\n            key,\n            column,\n            data,\n          },\n          rpcName: \"editCell\",\n          type: \"RPC_REQUEST\",\n        });\n        if (response?.type === \"SUCCESS_RESULT\") {\n          setFieldStatusValues((map) => ({\n            ...map,\n            [column]: undefined,\n          }));\n        } else if (response?.type === \"ERROR_RESULT\") {\n          console.log(`edit rejected ${response.errorMessage}`);\n          setFieldStatusValues((map) => ({\n            ...map,\n            [column]: response.errorMessage,\n          }));\n        }\n      }\n    },\n    [dataSource, fields, keyField, values],\n  );\n\n  // const applyAction = useCallback(\n  //   // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  //   (action: any) => {\n  //     if (action?.type === \"CLOSE_DIALOG_ACTION\") {\n  //       onClose?.();\n  //     }\n  //   },\n  //   [onClose],\n  // );\n\n  const handleSubmit = useCallback(async () => {\n    const response = await dataSource.rpcRequest?.({\n      params: { comment: \"\" },\n      rpcName: \"submitForm\",\n      type: \"RPC_REQUEST\",\n    });\n    if (response?.type === \"SUCCESS_RESULT\") {\n      // applyAction(response.action);\n      onClose?.();\n    } else if (response?.type === \"ERROR_RESULT\") {\n      setErrorMessage(response.errorMessage);\n    }\n  }, [dataSource, onClose]);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Enter\" && dataStatusRef.current === Status.changed) {\n        handleSubmit();\n      }\n    },\n    [handleSubmit],\n  );\n\n  const handleCancel = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  const getFormControl = (field: FormFieldDescriptor) => {\n    const value = String(values?.[field.name] ?? \"\");\n    if (field.readonly || field.name === keyField) {\n      return (\n        <div className={`${classBase}-fieldValue vuuReadOnly`}>{value}</div>\n      );\n    } else {\n      return (\n        <Input\n          className={`${classBase}-fieldValue`}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          value={value}\n          id={`${id}-input-${field.name}`}\n        />\n      );\n    }\n  };\n\n  useEffect(() => {\n    if (formContentRef.current) {\n      const firstInput = formContentRef.current.querySelector(\n        \"input\",\n      ) as HTMLInputElement;\n      if (firstInput) {\n        setTimeout(() => {\n          firstInput.focus();\n          firstInput.select();\n        }, 100);\n      }\n    }\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (dataSource) {\n        dataSource.unsubscribe();\n      }\n    };\n  }, [dataSource]);\n\n  const isDirty = dataStatusRef.current === Status.changed;\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {errorMessage ? (\n        <div\n          className={`${classBase}-errorBanner`}\n          data-icon=\"error\"\n          title={errorMessage}\n        >\n          Error, edit(s) not saved\n        </div>\n      ) : undefined}\n      <div\n        className={`${classBase}-content`}\n        ref={formContentRef}\n        onKeyDown={handleKeyDown}\n      >\n        {fields.map((field) => (\n          <FormField\n            className={`${classBase}-field`}\n            data-field={field.name}\n            key={field.name}\n            necessity={field.required ? \"required\" : \"optional\"}\n            readOnly={field.readonly}\n            validationStatus={\n              fieldStatusValues[field.name] ? \"error\" : undefined\n            }\n          >\n            <FormFieldLabel>{field?.label ?? field.description}</FormFieldLabel>\n            {getFormControl(field)}\n            <FormFieldHelperText>\n              {fieldStatusValues[field.name] ?? \"\"}\n            </FormFieldHelperText>\n          </FormField>\n        ))}\n      </div>\n      <div className={`${classBase}-buttonbar salt-theme salt-density-high`}>\n        <Button\n          type=\"submit\"\n          variant=\"cta\"\n          disabled={!isDirty}\n          onClick={handleSubmit}\n        >\n          Submit\n        </Button>\n        <Button variant=\"secondary\" onClick={handleCancel}>\n          Cancel\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":["queryClosest","VuuDataSource","useWindow","useComponentCssInjection","sessionEditingFormCss","useState","useRef","useMemo","buildColumnMap","values","Range","useIdMemo","useCallback","getTypedValue","shallowEquals","jsx","Input","useEffect","jsxs","FormField","FormFieldLabel","FormFieldHelperText","Button"],"mappings":"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"}

package/esm/data-editing/EditForm.css.js

@@ -0,0 +1,4 @@
+var editFormCss = ".EditForm {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-400);\n  height: 100%;\n  padding: var(--salt-spacing-200) var(--salt-spacing-200)\n    var(--salt-spacing-200) var(--salt-spacing-400);\n  width: 100%;\n}\n\n.EditForm-form-fields {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-400);\n}\n\n.EditForm-buttons {\n  align-items: center;\n  display: flex;\n  gap: var(--salt-spacing-200);\n  justify-content: flex-end;\n}\n\n.EditForm-field {\n  display: flex;\n\n  .saltFormField {\n    flex: 1 1 auto;\n  }\n\n  .EditForm-edit-indicator {\n    flex: 0 0 14px;\n    position: relative;\n  }\n\n  &[data-edited=\"true\"] {\n    .EditForm-edit-indicator:after {\n      background-color: var(--salt-content-secondary-foreground);\n      border-radius: 5px;\n      content: \"\";\n      height: 10px;\n      position: absolute;\n      top: 50%;\n      right: -3px;\n      width: 10px;\n    }\n  }\n}\n";
+
+export { editFormCss as default };
+//# sourceMappingURL=EditForm.css.js.map

package/esm/data-editing/EditForm.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditForm.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/data-editing/EditForm.js

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormField, FormFieldLabel, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { registerRules } from './edit-validation-rules.js';
+import { useEditForm } from './useEditForm.js';
+import editFormCss from './EditForm.css.js';
+import { getDataItemEditControl } from './get-data-item-edit-control.js';
+
+const classBase = "EditForm";
+registerRules();
+const EditForm = ({
+  className,
+  dataSource,
+  formFieldDescriptors,
+  onSubmit: onSubmitProp,
+  ...htmlAttributes
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-edit-form",
+    css: editFormCss,
+    window: targetWindow
+  });
+  const {
+    editedFields,
+    editEntity,
+    errorMessages,
+    formFieldsContainerRef,
+    isClean,
+    ok,
+    onCancel,
+    onChange,
+    onCommit,
+    onFocus,
+    onSubmit
+  } = useEditForm({
+    dataSource,
+    formFieldDescriptors,
+    onSubmit: onSubmitProp
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      onFocus,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${classBase}-form-fields`, ref: formFieldsContainerRef, children: formFieldDescriptors.map((dataDescriptor) => {
+          const { name, label = name } = dataDescriptor;
+          const errorMessage = errorMessages[name];
+          const isEdited = !isClean && editedFields.includes(name);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${classBase}-field`,
+              "data-edited": isEdited,
+              children: [
+                /* @__PURE__ */ jsxs(FormField, { "data-field": name, children: [
+                  /* @__PURE__ */ jsx(FormFieldLabel, { children: label }),
+                  getDataItemEditControl({
+                    InputProps: {
+                      onChange,
+                      value: editEntity?.[name]?.toString() ?? ""
+                    },
+                    dataDescriptor,
+                    errorMessage,
+                    onCommit
+                  })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: `${classBase}-edit-indicator` })
+              ]
+            },
+            name
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: `${classBase}-buttons`, children: [
+          /* @__PURE__ */ jsx(Button, { disabled: isClean, onClick: onCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { onClick: onSubmit, disabled: !ok || isClean, children: "Save" })
+        ] })
+      ]
+    }
+  );
+};
+
+export { EditForm };
+//# sourceMappingURL=EditForm.js.map

package/esm/data-editing/EditForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditForm.js","sources":["../../../../packages/vuu-data-react/src/data-editing/EditForm.tsx"],"sourcesContent":["import { Button, FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { registerRules } from \"./edit-validation-rules\";\nimport { EditFormHookProps, useEditForm } from \"./useEditForm\";\n\nimport editFormCss from \"./EditForm.css\";\nimport { getDataItemEditControl } from \"./get-data-item-edit-control\";\n\nconst classBase = \"EditForm\";\n\nregisterRules();\n\nexport interface EditFormProps\n  extends EditFormHookProps,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\"> {}\n\nexport const EditForm = ({\n  className,\n  dataSource,\n  formFieldDescriptors,\n  onSubmit: onSubmitProp,\n  ...htmlAttributes\n}: EditFormProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-edit-form\",\n    css: editFormCss,\n    window: targetWindow,\n  });\n\n  const {\n    editedFields,\n    editEntity,\n    errorMessages,\n    formFieldsContainerRef,\n    isClean,\n    ok,\n    onCancel,\n    onChange,\n    onCommit,\n    onFocus,\n    onSubmit,\n  } = useEditForm({\n    dataSource,\n    formFieldDescriptors,\n    onSubmit: onSubmitProp,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      onFocus={onFocus}\n    >\n      <div className={`${classBase}-form-fields`} ref={formFieldsContainerRef}>\n        {formFieldDescriptors.map((dataDescriptor) => {\n          const { name, label = name } = dataDescriptor;\n          const errorMessage = errorMessages[name];\n          const isEdited = !isClean && editedFields.includes(name);\n\n          return (\n            <div\n              className={`${classBase}-field`}\n              key={name}\n              data-edited={isEdited}\n            >\n              <FormField data-field={name}>\n                <FormFieldLabel>{label}</FormFieldLabel>\n                {getDataItemEditControl({\n                  InputProps: {\n                    onChange,\n                    value: editEntity?.[name]?.toString() ?? \"\",\n                  },\n                  dataDescriptor,\n                  errorMessage,\n                  onCommit,\n                })}\n              </FormField>\n              <div className={`${classBase}-edit-indicator`} />\n            </div>\n          );\n        })}\n      </div>\n      <div className={`${classBase}-buttons`}>\n        <Button disabled={isClean} onClick={onCancel}>\n          Cancel\n        </Button>\n        <Button onClick={onSubmit} disabled={!ok || isClean}>\n          Save\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,UAAA;AAElB,aAAc,EAAA;AAMP,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,oBAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,GAAG;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAA,WAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,sBAAA;AAAA,IACA,OAAA;AAAA,IACA,EAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,MACE,WAAY,CAAA;AAAA,IACd,UAAA;AAAA,IACA,oBAAA;AAAA,IACA,QAAU,EAAA;AAAA,GACX,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,OAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,YAAA,CAAA,EAAgB,KAAK,sBAC9C,EAAA,QAAA,EAAA,oBAAA,CAAqB,GAAI,CAAA,CAAC,cAAmB,KAAA;AAC5C,UAAA,MAAM,EAAE,IAAA,EAAM,KAAQ,GAAA,IAAA,EAAS,GAAA,cAAA;AAC/B,UAAM,MAAA,YAAA,GAAe,cAAc,IAAI,CAAA;AACvC,UAAA,MAAM,QAAW,GAAA,CAAC,OAAW,IAAA,YAAA,CAAa,SAAS,IAAI,CAAA;AAEvD,UACE,uBAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,cAEvB,aAAa,EAAA,QAAA;AAAA,cAEb,QAAA,EAAA;AAAA,gCAAC,IAAA,CAAA,SAAA,EAAA,EAAU,cAAY,IACrB,EAAA,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,kBAAgB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,kBACtB,sBAAuB,CAAA;AAAA,oBACtB,UAAY,EAAA;AAAA,sBACV,QAAA;AAAA,sBACA,KAAO,EAAA,UAAA,GAAa,IAAI,CAAA,EAAG,UAAc,IAAA;AAAA,qBAC3C;AAAA,oBACA,cAAA;AAAA,oBACA,YAAA;AAAA,oBACA;AAAA,mBACD;AAAA,iBACH,EAAA,CAAA;AAAA,gCACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAmB,eAAA,CAAA,EAAA;AAAA;AAAA,aAAA;AAAA,YAf1C;AAAA,WAgBP;AAAA,SAEH,CACH,EAAA,CAAA;AAAA,wBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAO,EAAA,EAAA,QAAA,EAAU,OAAS,EAAA,OAAA,EAAS,UAAU,QAE9C,EAAA,QAAA,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,UAAO,OAAS,EAAA,QAAA,EAAU,UAAU,CAAC,EAAA,IAAM,SAAS,QAErD,EAAA,MAAA,EAAA;AAAA,SACF,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/esm/data-editing/UnsavedChangesReport.css.js

@@ -0,0 +1,4 @@
+var unsavedChangesCss = ".vuuUnsavedChanges-table {\n  border-collapse: collapse;\n  width: 100%;\n}\n\n.vuuUnsavedChanges-row {\n  box-sizing: content-box;\n  border-bottom: solid 1px var(--salt-separable-secondary-borderColor);\n  height: 32px;\n\n  td {\n    padding: 0 var(--salt-spacing-200);\n  }\n}\n\n.vuuUnsavedChanges-fieldName {\n  text-transform: capitalize;\n}\n\n.vuuUnsavedChanges-new {\n  font-weight: bold;\n}\n";
+
+export { unsavedChangesCss as default };
+//# sourceMappingURL=UnsavedChangesReport.css.js.map

package/esm/data-editing/UnsavedChangesReport.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnsavedChangesReport.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/data-editing/UnsavedChangesReport.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { buildFormEditState } from './form-edit-state.js';
+import unsavedChangesCss from './UnsavedChangesReport.css.js';
+
+const classBase = "vuuUnsavedChanges";
+const UnsavedChangesReport = ({
+  entity,
+  editedEntity
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-unsaved-changes-report",
+    css: unsavedChangesCss,
+    window: targetWindow
+  });
+  const { editedFields } = buildFormEditState(entity, editedEntity);
+  return /* @__PURE__ */ jsx("div", { className: classBase, children: /* @__PURE__ */ jsx("table", { className: `${classBase}-table`, children: /* @__PURE__ */ jsx("tbody", { children: editedFields.map((fieldName, i) => /* @__PURE__ */ jsxs("tr", { className: `${classBase}-row`, children: [
+    /* @__PURE__ */ jsx("td", { className: `${classBase}-fieldName`, children: fieldName }),
+    /* @__PURE__ */ jsx("td", { className: `${classBase}-old`, children: entity[fieldName] }),
+    /* @__PURE__ */ jsx("td", { className: `${classBase}-new`, children: editedEntity[fieldName] })
+  ] }, i)) }) }) });
+};
+
+export { UnsavedChangesReport };
+//# sourceMappingURL=UnsavedChangesReport.js.map

package/esm/data-editing/UnsavedChangesReport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnsavedChangesReport.js","sources":["../../../../packages/vuu-data-react/src/data-editing/UnsavedChangesReport.tsx"],"sourcesContent":["import { Entity } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { buildFormEditState } from \"./form-edit-state\";\n\nimport unsavedChangesCss from \"./UnsavedChangesReport.css\";\n\nconst classBase = \"vuuUnsavedChanges\";\n\nexport interface UnsavedChangesReportProps<T extends Entity = Entity> {\n  entity: T;\n  editedEntity: T;\n}\n\nexport const UnsavedChangesReport = ({\n  entity,\n  editedEntity,\n}: UnsavedChangesReportProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-unsaved-changes-report\",\n    css: unsavedChangesCss,\n    window: targetWindow,\n  });\n\n  const { editedFields } = buildFormEditState(entity, editedEntity);\n\n  return (\n    <div className={classBase}>\n      <table className={`${classBase}-table`}>\n        <tbody>\n          {editedFields.map((fieldName, i) => (\n            <tr className={`${classBase}-row`} key={i}>\n              <td className={`${classBase}-fieldName`}>{fieldName}</td>\n              <td className={`${classBase}-old`}>{entity[fieldName]}</td>\n              <td className={`${classBase}-new`}>{editedEntity[fieldName]}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,SAAY,GAAA,mBAAA;AAOX,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA;AACF,CAAiC,KAAA;AAC/B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAA,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAiB,GAAA,kBAAA,CAAmB,QAAQ,YAAY,CAAA;AAEhE,EACE,uBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,SAAA,EACd,8BAAC,OAAM,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC5B,MAAA,CAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,WACE,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,SAAW,EAAA,CAAA,0BAC3B,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CACzB,IAAA,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,cAAe,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,oBACpD,GAAA,CAAC,QAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,IAAA,CAAA,EAAA,QAAA,EAAA,MAAA,CAAO,SAAS,CAAE,EAAA,CAAA;AAAA,oBACtD,GAAA,CAAC,QAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,IAAA,CAAA,EAAA,QAAA,EAAA,YAAA,CAAa,SAAS,CAAE,EAAA;AAAA,GAAA,EAAA,EAHtB,CAIxC,CACD,CACH,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}

package/esm/data-editing/edit-rule-validation-checker.js

@@ -0,0 +1,37 @@
+import { isTypeDescriptor, getEditRuleValidator } from '@vuu-ui/vuu-utils';
+
+const OK = { ok: true };
+const NO_VALIDATION_RULES = [];
+function getEditValidationRules(descriptor, editPhase) {
+  if (isTypeDescriptor(descriptor.type)) {
+    return editPhase === "*" ? descriptor.type.rules ?? [] : descriptor.type.rules?.filter(
+      ({ phase: a = "commit" }) => a === editPhase
+    ) ?? NO_VALIDATION_RULES;
+  }
+  return NO_VALIDATION_RULES;
+}
+const buildValidationChecker = (rules) => (value, editPhase) => applyRules(rules, value, editPhase);
+function applyRules(rules, value, editPhase = "commit") {
+  const result = { ok: true };
+  for (const rule of rules) {
+    const { phase = "commit" } = rule;
+    if (editPhase === "*" || phase === editPhase) {
+      const applyRuleToValue = getEditRuleValidator(rule.name);
+      if (applyRuleToValue) {
+        const res = applyRuleToValue(rule, value);
+        if (!res.ok) {
+          result.ok = false;
+          (result.messages ?? (result.messages = [])).push(res.message);
+        }
+      } else {
+        throw Error(
+          `editable-utils applyRules, no validator registered for rule '${rule.name}'`
+        );
+      }
+    }
+  }
+  return result;
+}
+
+export { OK, buildValidationChecker, getEditValidationRules };
+//# sourceMappingURL=edit-rule-validation-checker.js.map

package/esm/data-editing/edit-rule-validation-checker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-rule-validation-checker.js","sources":["../../../../packages/vuu-data-react/src/data-editing/edit-rule-validation-checker.ts"],"sourcesContent":["import type {\n  DataValueDescriptor,\n  DataValueValidationChecker,\n  DataValueValidationResult,\n  EditPhase,\n  EditRuleValidationSuccessResult,\n  EditValidationRule,\n} from \"@vuu-ui/vuu-data-types\";\nimport type { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { getEditRuleValidator, isTypeDescriptor } from \"@vuu-ui/vuu-utils\";\n\nexport const OK: EditRuleValidationSuccessResult = { ok: true };\n\nconst NO_VALIDATION_RULES: EditValidationRule[] = [] as const;\n\nexport function getEditValidationRules(\n  descriptor: DataValueDescriptor,\n  editPhase: EditPhase | \"*\",\n) {\n  if (isTypeDescriptor(descriptor.type)) {\n    return editPhase === \"*\"\n      ? (descriptor.type.rules ?? [])\n      : (descriptor.type.rules?.filter(\n          ({ phase: a = \"commit\" }) => a === editPhase,\n        ) ?? NO_VALIDATION_RULES);\n  }\n\n  return NO_VALIDATION_RULES;\n}\n\nexport const buildValidationChecker =\n  (rules: EditValidationRule[]): DataValueValidationChecker =>\n  (value: VuuRowDataItemType | undefined, editPhase: EditPhase | \"*\") =>\n    applyRules(rules, value, editPhase);\n\nfunction applyRules(\n  rules: EditValidationRule[],\n  value?: VuuRowDataItemType,\n  editPhase: EditPhase | \"*\" = \"commit\",\n) {\n  const result: { ok: boolean; messages?: string[] } = { ok: true };\n  for (const rule of rules) {\n    const { phase = \"commit\" } = rule;\n    if (editPhase === \"*\" || phase === editPhase) {\n      const applyRuleToValue = getEditRuleValidator(rule.name);\n      if (applyRuleToValue) {\n        const res = applyRuleToValue(rule, value);\n        if (!res.ok) {\n          result.ok = false;\n          (result.messages ?? (result.messages = [])).push(res.message);\n        }\n      } else {\n        throw Error(\n          `editable-utils applyRules, no validator registered for rule '${rule.name}'`,\n        );\n      }\n    }\n  }\n  return result as DataValueValidationResult;\n}\n"],"names":[],"mappings":";;AAWa,MAAA,EAAA,GAAsC,EAAE,EAAA,EAAI,IAAK;AAE9D,MAAM,sBAA4C,EAAC;AAEnC,SAAA,sBAAA,CACd,YACA,SACA,EAAA;AACA,EAAI,IAAA,gBAAA,CAAiB,UAAW,CAAA,IAAI,CAAG,EAAA;AACrC,IAAO,OAAA,SAAA,KAAc,MAChB,UAAW,CAAA,IAAA,CAAK,SAAS,EAAC,GAC1B,UAAW,CAAA,IAAA,CAAK,KAAO,EAAA,MAAA;AAAA,MACtB,CAAC,EAAE,KAAA,EAAO,CAAI,GAAA,QAAA,OAAe,CAAM,KAAA;AAAA,KAChC,IAAA,mBAAA;AAAA;AAGX,EAAO,OAAA,mBAAA;AACT;AAEa,MAAA,sBAAA,GACX,CAAC,KACD,KAAA,CAAC,OAAuC,SACtC,KAAA,UAAA,CAAW,KAAO,EAAA,KAAA,EAAO,SAAS;AAEtC,SAAS,UACP,CAAA,KAAA,EACA,KACA,EAAA,SAAA,GAA6B,QAC7B,EAAA;AACA,EAAM,MAAA,MAAA,GAA+C,EAAE,EAAA,EAAI,IAAK,EAAA;AAChE,EAAA,KAAA,MAAW,QAAQ,KAAO,EAAA;AACxB,IAAM,MAAA,EAAE,KAAQ,GAAA,QAAA,EAAa,GAAA,IAAA;AAC7B,IAAI,IAAA,SAAA,KAAc,GAAO,IAAA,KAAA,KAAU,SAAW,EAAA;AAC5C,MAAM,MAAA,gBAAA,GAAmB,oBAAqB,CAAA,IAAA,CAAK,IAAI,CAAA;AACvD,MAAA,IAAI,gBAAkB,EAAA;AACpB,QAAM,MAAA,GAAA,GAAM,gBAAiB,CAAA,IAAA,EAAM,KAAK,CAAA;AACxC,QAAI,IAAA,CAAC,IAAI,EAAI,EAAA;AACX,UAAA,MAAA,CAAO,EAAK,GAAA,KAAA;AACZ,UAAC,CAAA,MAAA,CAAO,aAAa,MAAO,CAAA,QAAA,GAAW,EAAK,CAAA,EAAA,IAAA,CAAK,IAAI,OAAO,CAAA;AAAA;AAC9D,OACK,MAAA;AACL,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,6DAAA,EAAgE,KAAK,IAAI,CAAA,CAAA;AAAA,SAC3E;AAAA;AACF;AACF;AAEF,EAAO,OAAA,MAAA;AACT;;;;"}

package/esm/data-editing/edit-validation-rules.js

@@ -0,0 +1,50 @@
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import { OK } from './edit-rule-validation-checker.js';
+
+const isString = (value) => typeof value === "string";
+const NUMERIC = /^(?:[0-9]|\.)+$/;
+const CharValidatorNumeric = (rule, value) => {
+  if (isString(value)) {
+    if (value.trim() === "") {
+      return OK;
+    } else if (value.match(NUMERIC)) {
+      return OK;
+    }
+  }
+  return { ok: false, message: "only numeric characters are permitted" };
+};
+const ValueValidatorInteger = (rule, value) => {
+  if (isString(value)) {
+    if (value.trim() === "") {
+      return OK;
+    } else {
+      if (!value.match(NUMERIC)) {
+        return {
+          ok: false,
+          message: "value must be an integer, invalid character"
+        };
+      }
+      if (parseFloat(value) === parseInt(value)) {
+        return OK;
+      }
+    }
+  }
+  return { ok: false, message: "must be an integer value" };
+};
+const registerRules = () => {
+  registerComponent(
+    "char-numeric",
+    CharValidatorNumeric,
+    "data-edit-validator",
+    {}
+  );
+  registerComponent(
+    "value-integer",
+    ValueValidatorInteger,
+    "data-edit-validator",
+    {}
+  );
+};
+
+export { registerRules };
+//# sourceMappingURL=edit-validation-rules.js.map

package/esm/data-editing/edit-validation-rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-validation-rules.js","sources":["../../../../packages/vuu-data-react/src/data-editing/edit-validation-rules.ts"],"sourcesContent":["import type { EditRuleValidator } from \"@vuu-ui/vuu-data-types\";\nimport type { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { OK } from \"./edit-rule-validation-checker\";\n\nconst isString = (value?: VuuRowDataItemType): value is string =>\n  typeof value === \"string\";\n\nconst NUMERIC = /^(?:[0-9]|\\.)+$/;\n\nconst CharValidatorNumeric: EditRuleValidator = (rule, value) => {\n  if (isString(value)) {\n    if (value.trim() === \"\") {\n      return OK;\n    } else if (value.match(NUMERIC)) {\n      return OK;\n    }\n  }\n  return { ok: false, message: \"only numeric characters are permitted\" };\n};\n\nconst ValueValidatorInteger: EditRuleValidator = (rule, value) => {\n  if (isString(value)) {\n    if (value.trim() === \"\") {\n      return OK;\n    } else {\n      if (!value.match(NUMERIC)) {\n        return {\n          ok: false,\n          message: \"value must be an integer, invalid character\",\n        };\n      }\n      if (parseFloat(value) === parseInt(value)) {\n        return OK;\n      }\n    }\n  }\n  return { ok: false, message: \"must be an integer value\" };\n};\n\nexport const registerRules = () => {\n  registerComponent(\n    \"char-numeric\",\n    CharValidatorNumeric,\n    \"data-edit-validator\",\n    {},\n  );\n  registerComponent(\n    \"value-integer\",\n    ValueValidatorInteger,\n    \"data-edit-validator\",\n    {},\n  );\n};\n"],"names":[],"mappings":";;;AAKA,MAAM,QAAW,GAAA,CAAC,KAChB,KAAA,OAAO,KAAU,KAAA,QAAA;AAEnB,MAAM,OAAU,GAAA,iBAAA;AAEhB,MAAM,oBAAA,GAA0C,CAAC,IAAA,EAAM,KAAU,KAAA;AAC/D,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAI,IAAA,KAAA,CAAM,IAAK,EAAA,KAAM,EAAI,EAAA;AACvB,MAAO,OAAA,EAAA;AAAA,KACE,MAAA,IAAA,KAAA,CAAM,KAAM,CAAA,OAAO,CAAG,EAAA;AAC/B,MAAO,OAAA,EAAA;AAAA;AACT;AAEF,EAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,uCAAwC,EAAA;AACvE,CAAA;AAEA,MAAM,qBAAA,GAA2C,CAAC,IAAA,EAAM,KAAU,KAAA;AAChE,EAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,IAAI,IAAA,KAAA,CAAM,IAAK,EAAA,KAAM,EAAI,EAAA;AACvB,MAAO,OAAA,EAAA;AAAA,KACF,MAAA;AACL,MAAA,IAAI,CAAC,KAAA,CAAM,KAAM,CAAA,OAAO,CAAG,EAAA;AACzB,QAAO,OAAA;AAAA,UACL,EAAI,EAAA,KAAA;AAAA,UACJ,OAAS,EAAA;AAAA,SACX;AAAA;AAEF,MAAA,IAAI,UAAW,CAAA,KAAK,CAAM,KAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACzC,QAAO,OAAA,EAAA;AAAA;AACT;AACF;AAEF,EAAA,OAAO,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,0BAA2B,EAAA;AAC1D,CAAA;AAEO,MAAM,gBAAgB,MAAM;AACjC,EAAA,iBAAA;AAAA,IACE,cAAA;AAAA,IACA,oBAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAC,GACH;AACA,EAAA,iBAAA;AAAA,IACE,eAAA;AAAA,IACA,qBAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAC,GACH;AACF;;;;"}

package/esm/data-editing/form-edit-state.js

@@ -0,0 +1,23 @@
+const CLEAN_FORM = {
+  isClean: true,
+  editedFields: []
+};
+const buildFormEditState = (entity, newEntity) => {
+  if (entity === void 0) {
+    return CLEAN_FORM;
+  } else {
+    const editedFields = [];
+    for (const [fieldName, value] of Object.entries(entity)) {
+      if (value !== newEntity[fieldName]) {
+        editedFields.push(fieldName);
+      }
+    }
+    return {
+      isClean: editedFields.length === 0,
+      editedFields
+    };
+  }
+};
+
+export { CLEAN_FORM, buildFormEditState };
+//# sourceMappingURL=form-edit-state.js.map