@vuu-ui/vuu-table-extras 2.2.1 → 3.0.0-beta.1

package/cjs/packages/vuu-table-extras/src/inline-add-row/useInlineAddRow.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var vuuDataEditing = require('@vuu-ui/vuu-data-editing');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const createSyntheticDataRow = (newRowState, columns) => vuuDataEditing.withDataRowEditErrors(
+  {
+    ...newRowState.values,
+    childCount: 0,
+    depth: 1,
+    hasColumn: (name) => columns.some((column) => column.name === name),
+    index: -1,
+    isExpanded: false,
+    isLeaf: true,
+    isSelected: false,
+    key: vuuDataEditing.EditSession.newRowKey,
+    renderIndex: -1
+  },
+  newRowState.errors
+);
+const useInlineAddRow = ({ columns }) => {
+  const editSession = vuuDataEditing.useEditSession(true);
+  const containerRef = react.useRef(null);
+  const inlineAddColumns = react.useMemo(
+    () => columns.map((column) => {
+      const editable = vuuUtils.isDataValueEditable(column, "insert");
+      const inlineAddColumn = { ...column, editable };
+      return {
+        ...inlineAddColumn,
+        CellRenderer: editable ? vuuUtils.getCellRenderer(inlineAddColumn) : void 0
+      };
+    }),
+    [columns]
+  );
+  const visibleColumns = react.useMemo(
+    () => inlineAddColumns.filter(vuuUtils.isNotHidden),
+    [inlineAddColumns]
+  );
+  const visibleInsertColumns = react.useMemo(
+    () => visibleColumns.filter((column) => vuuUtils.isDataValueEditable(column, "insert")),
+    [visibleColumns]
+  );
+  const subscribeToNewRow = react.useCallback(
+    (onStoreChange) => {
+      editSession.on("newRow", onStoreChange);
+      return () => editSession.removeListener("newRow", onStoreChange);
+    },
+    [editSession]
+  );
+  const newRowState = react.useSyncExternalStore(
+    subscribeToNewRow,
+    () => editSession.newRowState,
+    () => editSession.newRowState
+  );
+  const dataRow = react.useMemo(
+    () => createSyntheticDataRow(newRowState, inlineAddColumns),
+    [inlineAddColumns, newRowState]
+  );
+  const previousValuesRef = react.useRef(newRowState.values);
+  const focusEditor = react.useCallback((index) => {
+    const cell = containerRef.current?.querySelectorAll("[data-field]")[index];
+    cell?.querySelector("input, button, [tabindex]")?.focus();
+  }, []);
+  react.useEffect(() => {
+    editSession.configureNewRow(visibleInsertColumns.map(({ name }) => name));
+  }, [editSession, visibleInsertColumns]);
+  react.useEffect(() => {
+    visibleInsertColumns.filter(
+      (column) => column.serverDataType === "boolean" && newRowState.values[column.name] === void 0
+    ).forEach((column) => {
+      editSession.setNewRowValue(column.name, false);
+    });
+  }, [editSession, newRowState.values, visibleInsertColumns]);
+  react.useEffect(() => {
+    const firstInvalidIndex = visibleColumns.findIndex(
+      ({ name }) => newRowState.errors[name] !== void 0
+    );
+    if (firstInvalidIndex !== -1) {
+      focusEditor(firstInvalidIndex);
+    }
+  }, [focusEditor, newRowState.errors, visibleColumns]);
+  react.useEffect(() => {
+    const previousValues = previousValuesRef.current;
+    previousValuesRef.current = newRowState.values;
+    if (Object.keys(previousValues).length > 0 && Object.keys(newRowState.values).length === 0 && Object.keys(newRowState.errors).length === 0) {
+      const firstEditableIndex = visibleColumns.findIndex(
+        (column) => vuuUtils.isDataValueEditable(column, "insert")
+      );
+      if (firstEditableIndex !== -1) {
+        requestAnimationFrame(() => focusEditor(firstEditableIndex));
+      }
+    }
+  }, [focusEditor, newRowState.errors, newRowState.values, visibleColumns]);
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const handleCommit = (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        return;
+      }
+      const cell = target.closest("[data-field]");
+      const cells = container.querySelectorAll("[data-field]");
+      const currentIndex = Array.from(cells).indexOf(cell ?? container);
+      const firstInvalidIndex = visibleColumns.findIndex(
+        ({ name }) => editSession.newRowState.errors[name] !== void 0
+      );
+      const firstEditableIndex = visibleColumns.findIndex(
+        (column) => vuuUtils.isDataValueEditable(column, "insert")
+      );
+      const nextEditableIndex = visibleColumns.findIndex(
+        (column, index) => index > currentIndex && vuuUtils.isDataValueEditable(column, "insert")
+      );
+      if (firstInvalidIndex !== -1) {
+        requestAnimationFrame(() => focusEditor(firstInvalidIndex));
+      } else if (nextEditableIndex !== -1) {
+        focusEditor(nextEditableIndex);
+      } else if (firstEditableIndex !== -1) {
+        requestAnimationFrame(() => focusEditor(firstEditableIndex));
+      }
+    };
+    container.addEventListener("vuu-commit", handleCommit);
+    return () => container.removeEventListener("vuu-commit", handleCommit);
+  }, [editSession, focusEditor, visibleColumns]);
+  return {
+    containerRef,
+    dataRow,
+    draftRevision: newRowState.draftRevision,
+    inlineAddColumns
+  };
+};
+
+exports.useInlineAddRow = useInlineAddRow;
+//# sourceMappingURL=useInlineAddRow.js.map

package/cjs/packages/vuu-table-extras/src/inline-add-row/useInlineAddRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInlineAddRow.js","sources":["../../../../../../../packages/vuu-table-extras/src/inline-add-row/useInlineAddRow.ts"],"sourcesContent":["import {\n  EditSession,\n  useEditSession,\n  withDataRowEditErrors,\n  type NewRowState,\n} from \"@vuu-ui/vuu-data-editing\";\nimport type { DataRow, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  getCellRenderer,\n  isDataValueEditable,\n  isNotHidden,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from \"react\";\n\nconst createSyntheticDataRow = (\n  newRowState: NewRowState,\n  columns: RuntimeColumnDescriptor[],\n): DataRow =>\n  withDataRowEditErrors(\n    {\n      ...newRowState.values,\n      childCount: 0,\n      depth: 1,\n      hasColumn: (name: string) =>\n        columns.some((column) => column.name === name),\n      index: -1,\n      isExpanded: false,\n      isLeaf: true,\n      isSelected: false,\n      key: EditSession.newRowKey,\n      renderIndex: -1,\n    } as DataRow,\n    newRowState.errors,\n  );\n\nexport interface UseInlineAddRowProps {\n  columns: RuntimeColumnDescriptor[];\n}\n\nexport const useInlineAddRow = ({ columns }: UseInlineAddRowProps) => {\n  const editSession = useEditSession(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const inlineAddColumns = useMemo(\n    () =>\n      columns.map((column) => {\n        const editable = isDataValueEditable(column, \"insert\");\n        const inlineAddColumn = { ...column, editable };\n        return {\n          ...inlineAddColumn,\n          CellRenderer: editable ? getCellRenderer(inlineAddColumn) : undefined,\n        };\n      }),\n    [columns],\n  );\n  const visibleColumns = useMemo(\n    () => inlineAddColumns.filter(isNotHidden),\n    [inlineAddColumns],\n  );\n  const visibleInsertColumns = useMemo(\n    () =>\n      visibleColumns.filter((column) => isDataValueEditable(column, \"insert\")),\n    [visibleColumns],\n  );\n  const subscribeToNewRow = useCallback(\n    (onStoreChange: () => void) => {\n      editSession.on(\"newRow\", onStoreChange);\n      return () => editSession.removeListener(\"newRow\", onStoreChange);\n    },\n    [editSession],\n  );\n  const newRowState = useSyncExternalStore(\n    subscribeToNewRow,\n    () => editSession.newRowState,\n    () => editSession.newRowState,\n  );\n  const dataRow = useMemo(\n    () => createSyntheticDataRow(newRowState, inlineAddColumns),\n    [inlineAddColumns, newRowState],\n  );\n  const previousValuesRef = useRef(newRowState.values);\n\n  const focusEditor = useCallback((index: number) => {\n    const cell =\n      containerRef.current?.querySelectorAll<HTMLElement>(\"[data-field]\")[\n        index\n      ];\n    cell?.querySelector<HTMLElement>(\"input, button, [tabindex]\")?.focus();\n  }, []);\n\n  useEffect(() => {\n    editSession.configureNewRow(visibleInsertColumns.map(({ name }) => name));\n  }, [editSession, visibleInsertColumns]);\n\n  useEffect(() => {\n    visibleInsertColumns\n      .filter(\n        (column) =>\n          column.serverDataType === \"boolean\" &&\n          newRowState.values[column.name] === undefined,\n      )\n      .forEach((column) => {\n        editSession.setNewRowValue(column.name, false);\n      });\n  }, [editSession, newRowState.values, visibleInsertColumns]);\n\n  useEffect(() => {\n    const firstInvalidIndex = visibleColumns.findIndex(\n      ({ name }) => newRowState.errors[name] !== undefined,\n    );\n    if (firstInvalidIndex !== -1) {\n      focusEditor(firstInvalidIndex);\n    }\n  }, [focusEditor, newRowState.errors, visibleColumns]);\n\n  useEffect(() => {\n    const previousValues = previousValuesRef.current;\n    previousValuesRef.current = newRowState.values;\n    if (\n      Object.keys(previousValues).length > 0 &&\n      Object.keys(newRowState.values).length === 0 &&\n      Object.keys(newRowState.errors).length === 0\n    ) {\n      const firstEditableIndex = visibleColumns.findIndex((column) =>\n        isDataValueEditable(column, \"insert\"),\n      );\n      if (firstEditableIndex !== -1) {\n        requestAnimationFrame(() => focusEditor(firstEditableIndex));\n      }\n    }\n  }, [focusEditor, newRowState.errors, newRowState.values, visibleColumns]);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const handleCommit = (event: Event) => {\n      const target = event.target;\n      if (!(target instanceof Element)) {\n        return;\n      }\n      const cell = target.closest<HTMLElement>(\"[data-field]\");\n      const cells = container.querySelectorAll<HTMLElement>(\"[data-field]\");\n      const currentIndex = Array.from(cells).indexOf(cell ?? container);\n      const firstInvalidIndex = visibleColumns.findIndex(\n        ({ name }) => editSession.newRowState.errors[name] !== undefined,\n      );\n      const firstEditableIndex = visibleColumns.findIndex((column) =>\n        isDataValueEditable(column, \"insert\"),\n      );\n      const nextEditableIndex = visibleColumns.findIndex(\n        (column, index) =>\n          index > currentIndex && isDataValueEditable(column, \"insert\"),\n      );\n      if (firstInvalidIndex !== -1) {\n        requestAnimationFrame(() => focusEditor(firstInvalidIndex));\n      } else if (nextEditableIndex !== -1) {\n        focusEditor(nextEditableIndex);\n      } else if (firstEditableIndex !== -1) {\n        requestAnimationFrame(() => focusEditor(firstEditableIndex));\n      }\n    };\n\n    container.addEventListener(\"vuu-commit\", handleCommit);\n    return () => container.removeEventListener(\"vuu-commit\", handleCommit);\n  }, [editSession, focusEditor, visibleColumns]);\n\n  return {\n    containerRef,\n    dataRow,\n    draftRevision: newRowState.draftRevision,\n    inlineAddColumns,\n  };\n};\n"],"names":["withDataRowEditErrors","EditSession","useEditSession","useRef","useMemo","isDataValueEditable","getCellRenderer","isNotHidden","useCallback","useSyncExternalStore","useEffect"],"mappings":"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"}

package/cjs/packages/vuu-table-extras/src/table-footer/TableFooter.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tableFooterCss = ".vuuTableFooter {\n    background-color: var(--salt-container-secondary-background);\n    display: grid;\n    --table-footer-height: var(--vuuTableFooter-height, 32px);\n    flex: 0 0 var(--table-footer-height);\n    grid-template-areas: \"panel-start panel-center panel-end\";\n    grid-template-columns: 1fr 1fr 1fr;\n    grid-template-rows: auto;\n\n    height: var(--table-footer-height);\n\n    .vuuTableFooterTray {\n        align-items: center;\n        display: flex;\n        justify-self: end;;\n        margin: 0 var(--salt-spacing-200);\n        grid-area: panel-end;\n  }\n\n}\n";
+var tableFooterCss = ".vuuTableFooter {\n  background-color: var(--salt-container-secondary-background);\n  display: grid;\n  --table-footer-height: var(--vuuTableFooter-height, 32px);\n  flex: 0 0 var(--table-footer-height);\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n\n  height: var(--table-footer-height);\n\n  .vuuTableFooterTray {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-100);\n    margin: 0 var(--salt-spacing-200);\n\n    &.vuuTableFooterTray-center {\n      grid-area: panel-center;\n      justify-self: center;\n    }\n    &.vuuTableFooterTray-end {\n      grid-area: panel-end;\n      justify-self: end;\n    }\n  }\n}\n";
 
 module.exports = tableFooterCss;
 //# sourceMappingURL=TableFooter.css.js.map

package/cjs/packages/vuu-table-extras/src/table-footer/TableFooter.js

@@ -7,8 +7,11 @@ var window = require('@salt-ds/window');
 var TableFooter$1 = require('./TableFooter.css.js');
 
 const classBase = "vuuTableFooter";
-const TableFooterTray = ({ children }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}Tray`, children });
+const TableFooterTray = ({ children, position = "end" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(`${classBase}Tray`, {
+    [`${classBase}Tray-center`]: position === "center",
+    [`${classBase}Tray-end`]: position === "end"
+  }), children });
 };
 const TableFooter = ({
   children,

package/cjs/packages/vuu-table-extras/src/table-footer/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","sources":["../../../../../../../packages/vuu-table-extras/src/table-footer/TableFooter.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tableFooterCss from \"./TableFooter.css\";\n\nexport interface TableFooterProps extends HTMLAttributes<HTMLDivElement> {\n  onInvokeAction?: (action: string) => void;\n  tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuTableFooter\";\n\nexport const TableFooterTray = ({ children }: { children: ReactNode }) => {\n  return <div className={`${classBase}Tray`}>{children}</div>;\n};\n\nexport const TableFooter = ({\n  children,\n  className,\n  onInvokeAction,\n  tooltrayActions,\n  ...htmlAttributes\n}: TableFooterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-footer\",\n    css: tableFooterCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {children}\n      {tooltrayActions ? (\n        <div className={`${classBase}-tooltray`}>{tooltrayActions}</div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableFooterCss","jsxs"],"mappings":";;;;;;;;AAYA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,eAAkB,GAAA,CAAC,EAAE,QAAA,EAAwC,KAAA;AACxE,EAAA,sCAAQ,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,QAAS,QAAS,EAAA,CAAA;AACvD;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,GAAG;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACxD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,eAAA,kCACE,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAc,2BAAgB,CACxD,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"TableFooter.js","sources":["../../../../../../../packages/vuu-table-extras/src/table-footer/TableFooter.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport tableFooterCss from \"./TableFooter.css\";\n\nexport interface TableFooterProps extends HTMLAttributes<HTMLDivElement> {\n  onInvokeAction?: (action: string) => void;\n  tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuTableFooter\";\n\nexport const TableFooterTray = ({ children, position = 'end' }: { children: ReactNode, position?: 'center' | 'end' }) => {\n  return <div className={cx(`${classBase}Tray`, {\n    [`${classBase}Tray-center`]: position === 'center',\n    [`${classBase}Tray-end`]: position === 'end'\n  })}>{children}</div>;\n};\n\nexport const TableFooter = ({\n  children,\n  className,\n  onInvokeAction,\n  tooltrayActions,\n  ...htmlAttributes\n}: TableFooterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-footer\",\n    css: tableFooterCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      {children}\n      {tooltrayActions ? (\n        <div className={`${classBase}-tooltray`}>{tooltrayActions}</div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","tableFooterCss","jsxs"],"mappings":";;;;;;;;AAYA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,kBAAkB,CAAC,EAAE,QAAU,EAAA,QAAA,GAAW,OAAkE,KAAA;AACvH,EAAA,sCAAQ,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAQ,IAAA,CAAA,EAAA;AAAA,IAC5C,CAAC,CAAA,EAAG,SAAS,CAAA,WAAA,CAAa,GAAG,QAAa,KAAA,QAAA;AAAA,IAC1C,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG,QAAa,KAAA;AAAA,GACxC,GAAI,QAAS,EAAA,CAAA;AAChB;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,GAAG;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CACxD,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,eAAA,kCACE,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAc,2BAAgB,CACxD,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;;"}

package/esm/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useLookupValues } from '@vuu-ui/vuu-data-react';
 import { getSelectedOption, isRpcSuccess, dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent } from '@vuu-ui/vuu-utils';
+import { isEditRowReadOnly } from '@vuu-ui/vuu-data-editing';
 import cx from 'clsx';
 import { Dropdown, Option } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
@@ -27,6 +28,7 @@ const DropdownCell = memo(
     }
     const [open, setOpen] = useState(false);
     const dataValue = dataRow[column.name];
+    const readOnly = isEditRowReadOnly(dataRow);
     const { values } = useLookupValues(column, dataValue);
     const valueRef = useRef(void 0);
     useMemo(() => {
@@ -85,6 +87,7 @@ const DropdownCell = memo(
         onOpenChange: handleOpenChange,
         onSelectionChange: handleSelectionChange,
         open,
+        readOnly,
         selected: selectedOption ? [selectedOption] : [],
         value: selectedOption?.label,
         children: values.map((listOption, i) => /* @__PURE__ */ jsx(Option, { value: listOption, children: listOption.label }, i))

package/esm/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownCell.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  getSelectedOption,\n  isRpcSuccess,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  SyntheticEvent,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(\n  function DropdownCell({\n    column,\n    dataRow,\n    editedDuringCurrentSession,\n    onEdit,\n  }: TableCellRendererProps) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-dropdown-cell\",\n      css: dropdownCellCss,\n      window: targetWindow,\n    });\n\n    if (editedDuringCurrentSession) {\n      console.log(`${column.name} edited ${editedDuringCurrentSession}`);\n    }\n\n    const [open, setOpen] = useState(false);\n    const dataValue = dataRow[column.name] as string | number;\n    const { values } = useLookupValues(column, dataValue);\n    const valueRef = useRef<ListOption>(undefined);\n\n    useMemo(() => {\n      valueRef.current = getSelectedOption(values, dataValue);\n    }, [dataValue, values]);\n\n    const handleOpenChange = useCallback((isOpen: boolean) => {\n      console.log(`handleOpenChange ${isOpen}`);\n      if (isOpen === false) {\n        setOpen(false);\n      }\n    }, []);\n\n    const handleSelectionChange = useCallback(\n      async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n        if (selectedOption) {\n          // Note, we do not setState locally when a selection is made, we just send the update\n          // to the server. We rely on the update coming back in from a server response which\n          // we handle in the useMemo above. If we worry that server repsonses might be too slow\n          // we can extend this logic with some kind of pending update state.\n          const response = await onEdit?.(\n            {\n              editType: \"commit\",\n              isValid: true,\n              previousValue: valueRef.current?.value,\n              value: selectedOption.value as VuuColumnDataType,\n            },\n            \"commit\",\n          );\n          if (isRpcSuccess(response)) {\n            // TODO this should be done in TableCell\n            dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n          }\n        }\n      },\n      [onEdit],\n    );\n\n    const handleClick = useCallback<\n      MouseEventHandler<HTMLButtonElement>\n    >(() => {\n      if (!open) {\n        setOpen(true);\n      }\n    }, [open]);\n\n    const handleKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        if (e.key === \"Enter\" && !open) {\n          e.preventDefault();\n          e.stopPropagation();\n          setOpen(true);\n        }\n      },\n      [open],\n    );\n\n    const { current: selectedOption } = valueRef;\n    return (\n      <Dropdown<ListOption>\n        className={cx(classBase, {\n          [`${classBase}-edited`]: editedDuringCurrentSession === true,\n        })}\n        data-icon=\"triangle-down\"\n        onClick={handleClick}\n        onKeyDownCapture={handleKeyDown}\n        onOpenChange={handleOpenChange}\n        onSelectionChange={handleSelectionChange}\n        open={open}\n        selected={selectedOption ? [selectedOption] : []}\n        value={selectedOption?.label}\n      >\n        {values.map((listOption, i) => (\n          <Option key={i} value={listOption}>\n            {listOption.label}\n          </Option>\n        ))}\n      </Dropdown>\n    );\n  },\n  (p: TableCellRendererProps, p1: TableCellRendererProps) =>\n    p.editedDuringCurrentSession !== p1.editedDuringCurrentSession &&\n    dataColumnAndKeyUnchanged(p, p1),\n);\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["DropdownCell","selectedOption"],"mappings":"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"}
+{"version":3,"file":"DropdownCell.js","sources":["../../../../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  getSelectedOption,\n  isRpcSuccess,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { isEditRowReadOnly } from \"@vuu-ui/vuu-data-editing\";\nimport cx from \"clsx\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  SyntheticEvent,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(\n  function DropdownCell({\n    column,\n    dataRow,\n    editedDuringCurrentSession,\n    onEdit,\n  }: TableCellRendererProps) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-dropdown-cell\",\n      css: dropdownCellCss,\n      window: targetWindow,\n    });\n\n    if (editedDuringCurrentSession) {\n      console.log(`${column.name} edited ${editedDuringCurrentSession}`);\n    }\n\n    const [open, setOpen] = useState(false);\n    const dataValue = dataRow[column.name] as string | number;\n    const readOnly = isEditRowReadOnly(dataRow);\n    const { values } = useLookupValues(column, dataValue);\n    const valueRef = useRef<ListOption>(undefined);\n\n    useMemo(() => {\n      valueRef.current = getSelectedOption(values, dataValue);\n    }, [dataValue, values]);\n\n    const handleOpenChange = useCallback((isOpen: boolean) => {\n      console.log(`handleOpenChange ${isOpen}`);\n      if (isOpen === false) {\n        setOpen(false);\n      }\n    }, []);\n\n    const handleSelectionChange = useCallback(\n      async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n        if (selectedOption) {\n          // Note, we do not setState locally when a selection is made, we just send the update\n          // to the server. We rely on the update coming back in from a server response which\n          // we handle in the useMemo above. If we worry that server repsonses might be too slow\n          // we can extend this logic with some kind of pending update state.\n          const response = await onEdit?.(\n            {\n              editType: \"commit\",\n              isValid: true,\n              previousValue: valueRef.current?.value,\n              value: selectedOption.value as VuuColumnDataType,\n            },\n            \"commit\",\n          );\n          if (isRpcSuccess(response)) {\n            // TODO this should be done in TableCell\n            dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n          }\n        }\n      },\n      [onEdit],\n    );\n\n    const handleClick = useCallback<\n      MouseEventHandler<HTMLButtonElement>\n    >(() => {\n      if (!open) {\n        setOpen(true);\n      }\n    }, [open]);\n\n    const handleKeyDown = useCallback<KeyboardEventHandler>(\n      (e) => {\n        if (e.key === \"Enter\" && !open) {\n          e.preventDefault();\n          e.stopPropagation();\n          setOpen(true);\n        }\n      },\n      [open],\n    );\n\n    const { current: selectedOption } = valueRef;\n    return (\n      <Dropdown<ListOption>\n        className={cx(classBase, {\n          [`${classBase}-edited`]: editedDuringCurrentSession === true,\n        })}\n        data-icon=\"triangle-down\"\n        onClick={handleClick}\n        onKeyDownCapture={handleKeyDown}\n        onOpenChange={handleOpenChange}\n        onSelectionChange={handleSelectionChange}\n        open={open}\n        readOnly={readOnly}\n        selected={selectedOption ? [selectedOption] : []}\n        value={selectedOption?.label}\n      >\n        {values.map((listOption, i) => (\n          <Option key={i} value={listOption}>\n            {listOption.label}\n          </Option>\n        ))}\n      </Dropdown>\n    );\n  },\n  (p: TableCellRendererProps, p1: TableCellRendererProps) =>\n    p.editedDuringCurrentSession !== p1.editedDuringCurrentSession &&\n    dataColumnAndKeyUnchanged(p, p1),\n);\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["DropdownCell","selectedOption"],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/column-picker/ColumnModel.js

@@ -1,4 +1,4 @@
-import { EventEmitter, reorderColumnItems } from '@vuu-ui/vuu-utils';
+import { EventEmitter, reorderItems } from '@vuu-ui/vuu-utils';
 
 var __defProp = Object.defineProperty;
 var __typeError = (msg) => {
@@ -109,7 +109,7 @@ class ColumnModel extends EventEmitter {
   }
   reorderSelectedColumns(orderedColumnNames, source) {
     this.setSelectedColumns(
-      reorderColumnItems(__privateGet(this, _selectedColumns), orderedColumnNames),
+      reorderItems(__privateGet(this, _selectedColumns), orderedColumnNames),
       source,
       { type: SelectedColumnChangeType.ColumnsReordered }
     );

package/esm/packages/vuu-table-extras/src/column-picker/ColumnModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnModel.js","sources":["../../../../../../../packages/vuu-table-extras/src/column-picker/ColumnModel.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { EventEmitter, reorderColumnItems, ValueOf } from \"@vuu-ui/vuu-utils\";\n\nexport const ColumnChangeSource = {\n  ColumnPicker: \"column-picker\",\n  ColumnSettings: \"column-settings\",\n  Table: \"table\",\n} as const;\nexport type ColumnChangeSource = ValueOf<typeof ColumnChangeSource>;\n\nexport const SelectedColumnChangeType = {\n  CalculatedColumnAdded: \"calculated-column-added\",\n  ColumnAdded: \"column-added\",\n  ColumnRemoved: \"column-removed\",\n  ColumnUpdated: \"column-updated\",\n  ColumnsReordered: \"columns-reordered\",\n} as const;\nexport type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;\n\nexport interface SelectedColumnChangeColumnAdded {\n  type: Extract<SelectedColumnChangeType, \"column-added\">;\n  column: ColumnDescriptor;\n}\nexport interface SelectedColumnChangeCalculatedColumnAdded {\n  type: Extract<SelectedColumnChangeType, \"calculated-column-added\">;\n  column: ColumnDescriptor;\n}\nexport interface SelectedColumnChangeColumnUpdated {\n  type: Extract<SelectedColumnChangeType, \"column-updated\">;\n  column: ColumnDescriptor;\n}\n\nexport interface SelectedColumnChangeColumnRemoved {\n  type: Extract<SelectedColumnChangeType, \"column-removed\">;\n  column: ColumnDescriptor;\n}\n\nexport interface SelectedColumnChangeColumnsReordered {\n  type: Extract<SelectedColumnChangeType, \"columns-reordered\">;\n}\n\nexport type SelectedColumnChangeDescriptor =\n  | SelectedColumnChangeCalculatedColumnAdded\n  | SelectedColumnChangeColumnAdded\n  | SelectedColumnChangeColumnRemoved\n  | SelectedColumnChangeColumnUpdated\n  | SelectedColumnChangeColumnsReordered;\n\nexport const isColumnAdded = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnAdded =>\n  change?.type === SelectedColumnChangeType.ColumnAdded;\nexport const isColumnRemoved = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnRemoved =>\n  change?.type === SelectedColumnChangeType.ColumnRemoved;\nexport const isColumnUpdated = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnUpdated =>\n  change?.type === SelectedColumnChangeType.ColumnUpdated;\nexport const isColumnsReordered = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnsReordered =>\n  change?.type === SelectedColumnChangeType.ColumnsReordered;\n\nexport type ColumnsChangeHandler = (\n  columns: readonly ColumnDescriptor[],\n  changeSource: ColumnChangeSource,\n  changeDescriptor?: SelectedColumnChangeDescriptor,\n) => void;\nexport type ColumnEvents = {\n  change: ColumnsChangeHandler;\n  render: (o: object) => void;\n};\n\nconst byColumnName = (\n  { name: n1, label: l1 = n1 }: ColumnDescriptor,\n  { name: n2, label: l2 = n2 }: ColumnDescriptor,\n) => (l1 > l2 ? 1 : l2 > l1 ? -1 : 0);\n\nconst filterColumns = (\n  columns: readonly ColumnDescriptor[],\n  pattern: string,\n) => {\n  if (pattern) {\n    const lowerCasePattern = pattern.toLowerCase();\n    return columns.filter(\n      ({ name, label = name }) =>\n        label.toLowerCase().indexOf(lowerCasePattern) !== -1,\n    );\n  } else {\n    return columns;\n  }\n};\n\nexport class ColumnModel extends EventEmitter<ColumnEvents> {\n  #searchPattern = \"\";\n  #selectedColumns: readonly ColumnDescriptor[];\n  constructor(\n    /**\n     * All available columns, including selected columns.\n     */\n    public allColumns: readonly ColumnDescriptor[],\n    /**\n     * Columns already selected and rendered in Table.\n     */\n    selectedColumns: readonly ColumnDescriptor[],\n  ) {\n    super();\n    this.#selectedColumns = selectedColumns;\n  }\n\n  get availableColumns(): ColumnDescriptor[] {\n    return filterColumns(this.allColumns, this.#searchPattern)\n      .filter(\n        ({ name }) =>\n          this.#selectedColumns.findIndex((c) => c.name === name) === -1,\n      )\n      .toSorted(byColumnName);\n  }\n\n  set searchPattern(pattern: string) {\n    const searchPattern = pattern;\n    if (searchPattern !== this.#searchPattern) {\n      this.#searchPattern = searchPattern;\n      this.emit(\"render\", {});\n    }\n  }\n\n  get searchPattern() {\n    return this.#searchPattern ?? \"\";\n  }\n\n  get selectedColumns() {\n    return filterColumns(this.#selectedColumns, this.#searchPattern);\n  }\n  setSelectedColumns(\n    selectedColumns: ColumnDescriptor[],\n    source: ColumnChangeSource,\n    changeDescriptor?: SelectedColumnChangeDescriptor,\n  ) {\n    this.#selectedColumns = selectedColumns;\n    this.notifyListeners(selectedColumns, source, changeDescriptor);\n  }\n\n  getColumn(name: string) {\n    const col = this.#selectedColumns.find((col) => col.name === name);\n    if (col) {\n      return col;\n    }\n    throw Error(`[ColumnModel] columns does not contain column ${name}`);\n  }\n\n  addItemToSelectedColumns(name: string, source: ColumnChangeSource) {\n    const column = this.allColumns.find((col) => col.name === name);\n    if (column) {\n      this.#selectedColumns = this.#selectedColumns.concat(column);\n      this.notifyListeners(this.#selectedColumns, source, {\n        type: SelectedColumnChangeType.ColumnAdded,\n        column,\n      });\n    } else {\n      throw Error(\n        `[ColumnModel] addItemToSelectedColumns, column '${name}' not found`,\n      );\n    }\n  }\n  removeItemFromSelectedColumns(name: string, source: ColumnChangeSource) {\n    const column = this.#selectedColumns.find((col) => col.name === name);\n    if (column) {\n      const index = this.#selectedColumns.indexOf(column);\n      this.#selectedColumns = this.#selectedColumns.toSpliced(index, 1);\n      this.notifyListeners(this.#selectedColumns, source, {\n        type: SelectedColumnChangeType.ColumnRemoved,\n        column,\n      });\n    } else {\n      throw Error(\n        `[ColumnModel] removeItemFromSelectedColumns, column '${name}' not found`,\n      );\n    }\n  }\n\n  reorderSelectedColumns(\n    orderedColumnNames: string[],\n    source: ColumnChangeSource,\n  ) {\n    this.setSelectedColumns(\n      reorderColumnItems(this.#selectedColumns, orderedColumnNames),\n      source,\n      { type: SelectedColumnChangeType.ColumnsReordered },\n    );\n  }\n\n  updateColumn(\n    currentColumn: ColumnDescriptor,\n    newColumn: ColumnDescriptor,\n  ): void;\n  updateColumn(column: ColumnDescriptor): void;\n  updateColumn(column: ColumnDescriptor, newColumn: ColumnDescriptor = column) {\n    const allIndex = this.allColumns.findIndex(\n      (col) => col.name === column.name,\n    );\n    const selectedIndex = this.#selectedColumns.findIndex(\n      (col) => col.name === column.name,\n    );\n\n    if (selectedIndex !== -1) {\n      if (allIndex === -1) {\n        throw Error(\n          `[ColumnModel] updateColumn, selected column not in allColumns collection`,\n        );\n      }\n\n      this.#selectedColumns = this.#selectedColumns.toSpliced(\n        selectedIndex,\n        1,\n        newColumn,\n      );\n      this.allColumns = this.allColumns.toSpliced(allIndex, 1, newColumn);\n\n      this.notifyListeners(this.#selectedColumns, \"column-settings\", {\n        type: SelectedColumnChangeType.ColumnUpdated,\n        column,\n      });\n    } else {\n      throw Error(\n        `[ColumnModel] updateColumn, column ${column.name} not found`,\n      );\n    }\n  }\n\n  /**\n   * Used when adding a calculated column\n   *\n   * @param column\n   *\n   * @param addToSelectedColumns\n   */\n  addColumn(column: ColumnDescriptor, addToSelectedColumns = false) {\n    console.log(`[ColumnModel] add column ${JSON.stringify(column)}`);\n    if (addToSelectedColumns) {\n      console.log(`add it to selected coliumns`);\n    }\n\n    this.allColumns = this.allColumns.concat(column);\n    this.#selectedColumns = this.#selectedColumns.concat(column);\n\n    this.notifyListeners(this.#selectedColumns, \"column-picker\", {\n      type: SelectedColumnChangeType.CalculatedColumnAdded,\n      column,\n    });\n  }\n\n  private notifyListeners: ColumnsChangeHandler = (\n    columns,\n    source,\n    changeType,\n  ) => {\n    this.emit(\"change\", columns, source, changeType);\n    this.emit(\"render\", {});\n  };\n}\n"],"names":["col"],"mappings":"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"}
+{"version":3,"file":"ColumnModel.js","sources":["../../../../../../../packages/vuu-table-extras/src/column-picker/ColumnModel.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { EventEmitter, reorderItems, ValueOf } from \"@vuu-ui/vuu-utils\";\n\nexport const ColumnChangeSource = {\n  ColumnPicker: \"column-picker\",\n  ColumnSettings: \"column-settings\",\n  Table: \"table\",\n} as const;\nexport type ColumnChangeSource = ValueOf<typeof ColumnChangeSource>;\n\nexport const SelectedColumnChangeType = {\n  CalculatedColumnAdded: \"calculated-column-added\",\n  ColumnAdded: \"column-added\",\n  ColumnRemoved: \"column-removed\",\n  ColumnUpdated: \"column-updated\",\n  ColumnsReordered: \"columns-reordered\",\n} as const;\nexport type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;\n\nexport interface SelectedColumnChangeColumnAdded {\n  type: Extract<SelectedColumnChangeType, \"column-added\">;\n  column: ColumnDescriptor;\n}\nexport interface SelectedColumnChangeCalculatedColumnAdded {\n  type: Extract<SelectedColumnChangeType, \"calculated-column-added\">;\n  column: ColumnDescriptor;\n}\nexport interface SelectedColumnChangeColumnUpdated {\n  type: Extract<SelectedColumnChangeType, \"column-updated\">;\n  column: ColumnDescriptor;\n}\n\nexport interface SelectedColumnChangeColumnRemoved {\n  type: Extract<SelectedColumnChangeType, \"column-removed\">;\n  column: ColumnDescriptor;\n}\n\nexport interface SelectedColumnChangeColumnsReordered {\n  type: Extract<SelectedColumnChangeType, \"columns-reordered\">;\n}\n\nexport type SelectedColumnChangeDescriptor =\n  | SelectedColumnChangeCalculatedColumnAdded\n  | SelectedColumnChangeColumnAdded\n  | SelectedColumnChangeColumnRemoved\n  | SelectedColumnChangeColumnUpdated\n  | SelectedColumnChangeColumnsReordered;\n\nexport const isColumnAdded = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnAdded =>\n  change?.type === SelectedColumnChangeType.ColumnAdded;\nexport const isColumnRemoved = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnRemoved =>\n  change?.type === SelectedColumnChangeType.ColumnRemoved;\nexport const isColumnUpdated = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnUpdated =>\n  change?.type === SelectedColumnChangeType.ColumnUpdated;\nexport const isColumnsReordered = (\n  change?: SelectedColumnChangeDescriptor,\n): change is SelectedColumnChangeColumnsReordered =>\n  change?.type === SelectedColumnChangeType.ColumnsReordered;\n\nexport type ColumnsChangeHandler = (\n  columns: readonly ColumnDescriptor[],\n  changeSource: ColumnChangeSource,\n  changeDescriptor?: SelectedColumnChangeDescriptor,\n) => void;\nexport type ColumnEvents = {\n  change: ColumnsChangeHandler;\n  render: (o: object) => void;\n};\n\nconst byColumnName = (\n  { name: n1, label: l1 = n1 }: ColumnDescriptor,\n  { name: n2, label: l2 = n2 }: ColumnDescriptor,\n) => (l1 > l2 ? 1 : l2 > l1 ? -1 : 0);\n\nconst filterColumns = (\n  columns: readonly ColumnDescriptor[],\n  pattern: string,\n) => {\n  if (pattern) {\n    const lowerCasePattern = pattern.toLowerCase();\n    return columns.filter(\n      ({ name, label = name }) =>\n        label.toLowerCase().indexOf(lowerCasePattern) !== -1,\n    );\n  } else {\n    return columns;\n  }\n};\n\nexport class ColumnModel extends EventEmitter<ColumnEvents> {\n  #searchPattern = \"\";\n  #selectedColumns: readonly ColumnDescriptor[];\n  constructor(\n    /**\n     * All available columns, including selected columns.\n     */\n    public allColumns: readonly ColumnDescriptor[],\n    /**\n     * Columns already selected and rendered in Table.\n     */\n    selectedColumns: readonly ColumnDescriptor[],\n  ) {\n    super();\n    this.#selectedColumns = selectedColumns;\n  }\n\n  get availableColumns(): ColumnDescriptor[] {\n    return filterColumns(this.allColumns, this.#searchPattern)\n      .filter(\n        ({ name }) =>\n          this.#selectedColumns.findIndex((c) => c.name === name) === -1,\n      )\n      .toSorted(byColumnName);\n  }\n\n  set searchPattern(pattern: string) {\n    const searchPattern = pattern;\n    if (searchPattern !== this.#searchPattern) {\n      this.#searchPattern = searchPattern;\n      this.emit(\"render\", {});\n    }\n  }\n\n  get searchPattern() {\n    return this.#searchPattern ?? \"\";\n  }\n\n  get selectedColumns() {\n    return filterColumns(this.#selectedColumns, this.#searchPattern);\n  }\n  setSelectedColumns(\n    selectedColumns: ColumnDescriptor[],\n    source: ColumnChangeSource,\n    changeDescriptor?: SelectedColumnChangeDescriptor,\n  ) {\n    this.#selectedColumns = selectedColumns;\n    this.notifyListeners(selectedColumns, source, changeDescriptor);\n  }\n\n  getColumn(name: string) {\n    const col = this.#selectedColumns.find((col) => col.name === name);\n    if (col) {\n      return col;\n    }\n    throw Error(`[ColumnModel] columns does not contain column ${name}`);\n  }\n\n  addItemToSelectedColumns(name: string, source: ColumnChangeSource) {\n    const column = this.allColumns.find((col) => col.name === name);\n    if (column) {\n      this.#selectedColumns = this.#selectedColumns.concat(column);\n      this.notifyListeners(this.#selectedColumns, source, {\n        type: SelectedColumnChangeType.ColumnAdded,\n        column,\n      });\n    } else {\n      throw Error(\n        `[ColumnModel] addItemToSelectedColumns, column '${name}' not found`,\n      );\n    }\n  }\n  removeItemFromSelectedColumns(name: string, source: ColumnChangeSource) {\n    const column = this.#selectedColumns.find((col) => col.name === name);\n    if (column) {\n      const index = this.#selectedColumns.indexOf(column);\n      this.#selectedColumns = this.#selectedColumns.toSpliced(index, 1);\n      this.notifyListeners(this.#selectedColumns, source, {\n        type: SelectedColumnChangeType.ColumnRemoved,\n        column,\n      });\n    } else {\n      throw Error(\n        `[ColumnModel] removeItemFromSelectedColumns, column '${name}' not found`,\n      );\n    }\n  }\n\n  reorderSelectedColumns(\n    orderedColumnNames: string[],\n    source: ColumnChangeSource,\n  ) {\n    this.setSelectedColumns(\n      reorderItems(this.#selectedColumns, orderedColumnNames),\n      source,\n      { type: SelectedColumnChangeType.ColumnsReordered },\n    );\n  }\n\n  updateColumn(\n    currentColumn: ColumnDescriptor,\n    newColumn: ColumnDescriptor,\n  ): void;\n  updateColumn(column: ColumnDescriptor): void;\n  updateColumn(column: ColumnDescriptor, newColumn: ColumnDescriptor = column) {\n    const allIndex = this.allColumns.findIndex(\n      (col) => col.name === column.name,\n    );\n    const selectedIndex = this.#selectedColumns.findIndex(\n      (col) => col.name === column.name,\n    );\n\n    if (selectedIndex !== -1) {\n      if (allIndex === -1) {\n        throw Error(\n          `[ColumnModel] updateColumn, selected column not in allColumns collection`,\n        );\n      }\n\n      this.#selectedColumns = this.#selectedColumns.toSpliced(\n        selectedIndex,\n        1,\n        newColumn,\n      );\n      this.allColumns = this.allColumns.toSpliced(allIndex, 1, newColumn);\n\n      this.notifyListeners(this.#selectedColumns, \"column-settings\", {\n        type: SelectedColumnChangeType.ColumnUpdated,\n        column,\n      });\n    } else {\n      throw Error(\n        `[ColumnModel] updateColumn, column ${column.name} not found`,\n      );\n    }\n  }\n\n  /**\n   * Used when adding a calculated column\n   *\n   * @param column\n   *\n   * @param addToSelectedColumns\n   */\n  addColumn(column: ColumnDescriptor, addToSelectedColumns = false) {\n    console.log(`[ColumnModel] add column ${JSON.stringify(column)}`);\n    if (addToSelectedColumns) {\n      console.log(`add it to selected coliumns`);\n    }\n\n    this.allColumns = this.allColumns.concat(column);\n    this.#selectedColumns = this.#selectedColumns.concat(column);\n\n    this.notifyListeners(this.#selectedColumns, \"column-picker\", {\n      type: SelectedColumnChangeType.CalculatedColumnAdded,\n      column,\n    });\n  }\n\n  private notifyListeners: ColumnsChangeHandler = (\n    columns,\n    source,\n    changeType,\n  ) => {\n    this.emit(\"change\", columns, source, changeType);\n    this.emit(\"render\", {});\n  };\n}\n"],"names":["col"],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/csv-upload/CsvUpload.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Dialog, DialogHeader, DialogContent, FileDropZone, FileDropZoneIcon, FileDropZoneTrigger, DialogActions, Button } from '@salt-ds/core';
+import { FileDropZone, FileDropZoneIcon, FileDropZoneTrigger, Dialog, DialogHeader, DialogContent, DialogActions, Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { useState, useCallback } from 'react';
@@ -11,18 +11,13 @@ const CsvUpload = (props) => {
   const {
     children,
     dialogTitle = "Import CSV",
+    embedded = false,
     onCancel,
     onClose,
     open
   } = props;
   const isControlledOpen = open !== void 0;
   const [internalOpen, setInternalOpen] = useState(open ?? true);
-  const handleCancel = useCallback(() => {
-    if (!isControlledOpen) {
-      setInternalOpen(false);
-    }
-    onCancel?.();
-  }, [isControlledOpen, onCancel]);
   const dialogOpen = isControlledOpen ? open : internalOpen;
   const targetWindow = useWindow();
   useComponentCssInjection({
@@ -32,6 +27,7 @@ const CsvUpload = (props) => {
   });
   const {
     canImport,
+    cancelImport,
     isProcessingFile,
     isImporting,
     importData,
@@ -40,52 +36,70 @@ const CsvUpload = (props) => {
     schema,
     validation
   } = useCsvUpload(props);
+  const handleCancel = useCallback(async () => {
+    await cancelImport();
+    if (!isControlledOpen) {
+      setInternalOpen(false);
+    }
+    onCancel?.();
+  }, [cancelImport, isControlledOpen, onCancel]);
   const handleImport = useCallback(async () => {
-    await importData();
-    onClose?.();
+    if (await importData()) {
+      onClose?.();
+    }
   }, [importData, onClose]);
+  const content = /* @__PURE__ */ jsxs("div", { className: classBase, children: [
+    /* @__PURE__ */ jsxs(
+      FileDropZone,
+      {
+        className: `${classBase}-dropZone`,
+        disabled: schema === void 0 || isProcessingFile || isImporting,
+        onDrop,
+        status: validation && validation.errors.length > 0 ? "error" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(FileDropZoneIcon, {}),
+          validation && validation.errors.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { children: "Your file contains errors" }),
+            /* @__PURE__ */ jsx("div", { children: " Please rectify and reupload" })
+          ] }) : /* @__PURE__ */ jsx("div", { children: "Drop a file here or" }),
+          /* @__PURE__ */ jsx(FileDropZoneTrigger, { accept: ".csv,text/csv", onChange: onTriggerChange, children: "BROWSE FILES" })
+        ]
+      }
+    ),
+    children
+  ] });
+  const actions = /* @__PURE__ */ jsxs(DialogActions, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        appearance: "solid",
+        disabled: isImporting,
+        sentiment: "negative",
+        onClick: handleCancel,
+        children: "Cancel"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: !canImport,
+        appearance: "solid",
+        sentiment: "accented",
+        onClick: handleImport,
+        children: isProcessingFile ? "Validating..." : isImporting ? "Importing..." : "Import"
+      }
+    )
+  ] });
+  if (embedded) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      content,
+      actions
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Dialog, { open: dialogOpen, children: [
     /* @__PURE__ */ jsx(DialogHeader, { header: dialogTitle }),
-    /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs("div", { className: classBase, children: [
-      /* @__PURE__ */ jsxs(
-        FileDropZone,
-        {
-          className: `${classBase}-dropZone`,
-          disabled: schema === void 0 || isProcessingFile || isImporting,
-          onDrop,
-          status: validation && validation.errors.length > 0 ? "error" : void 0,
-          children: [
-            /* @__PURE__ */ jsx(FileDropZoneIcon, {}),
-            validation && validation.errors.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { children: "Your file contains errors" }),
-              /* @__PURE__ */ jsx("div", { children: " Please rectify and reupload" })
-            ] }) : /* @__PURE__ */ jsx("div", { children: "Drop a file here or" }),
-            /* @__PURE__ */ jsx(
-              FileDropZoneTrigger,
-              {
-                accept: ".csv,text/csv",
-                onChange: onTriggerChange,
-                children: "BROWSE FILES"
-              }
-            )
-          ]
-        }
-      ),
-      children
-    ] }) }),
-    /* @__PURE__ */ jsxs(DialogActions, { children: [
-      /* @__PURE__ */ jsx(Button, { appearance: "solid", sentiment: "negative", onClick: handleCancel, children: "Cancel" }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          disabled: !canImport,
-          appearance: "solid",
-          sentiment: "accented",
-          onClick: handleImport,
-          children: isProcessingFile ? "Validating..." : isImporting ? "Importing..." : "Import"
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx(DialogContent, { children: content }),
+    actions
   ] });
 };
 

package/esm/packages/vuu-table-extras/src/csv-upload/CsvUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"CsvUpload.js","sources":["../../../../../../../packages/vuu-table-extras/src/csv-upload/CsvUpload.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogHeader,\n  FileDropZone,\n  FileDropZoneIcon,\n  FileDropZoneTrigger,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ReactNode, useCallback, useState } from \"react\";\nimport type { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport type { CsvParseError, CsvParseOptions } from \"./parse/csv-parse\";\nimport type { CsvValidationStructuredError } from \"./parse/csv-schema-validation\";\nimport type { CsvUploadTableData } from \"./parse/csv-upload-utils\";\nimport { useCsvUpload } from \"./useCsvUpload\";\nimport css from \"./CsvUpload.css\";\n\nexport type CsvUploadImportedResult = {\n  rpcResult: unknown;\n  tableData: CsvUploadTableData;\n};\n\nexport type CsvUploadErrors = {\n  schemaError?: CsvUploadError;\n  validationError?: CsvUploadError;\n  importError?: CsvUploadError;\n};\n\nexport type CsvUploadError = {\n  message: string;\n  parseError?: CsvParseError;\n  validationError?: CsvValidationStructuredError;\n  source: \"schema\" | \"validation\" | \"import\";\n};\n\nexport type CsvUploadErrorResult = {\n  errors: CsvUploadErrors;\n};\n\nexport type CsvUploadSessionTable = VuuTable;\n\nexport type CsvUploadSessionEndReason = \"saved\" | \"discarded\" | \"failed\";\n\nexport type CsvUploadSessionEndResult = {\n  reason: CsvUploadSessionEndReason;\n  sessionTable?: CsvUploadSessionTable;\n};\n\nexport type CsvUploadPhase =\n  | \"idle\"\n  | \"processing\"\n  | \"preview-ready\"\n  | \"importing\"\n  | \"imported\"\n  | \"failed\";\n\nexport interface CsvUploadProps {\n  children?: ReactNode;\n  dataSource: DataSource;\n  onImportSessionStarted?: (dataSource: DataSource) => void;\n  onImportSessionEnded?: (result: CsvUploadSessionEndResult) => void;\n  onError?: (result: CsvUploadErrorResult | undefined) => void;\n  onImported?: (result: CsvUploadImportedResult) => void;\n  onProcessingStarted?: () => void;\n  dialogTitle?: string;\n  maxRows?: number;\n  onCancel?: () => void;\n  onClose?: () => void;\n  open?: boolean;\n  parseOptions?: CsvParseOptions;\n}\n\nconst classBase = \"vuuCsvUpload\";\n\nexport const CsvUpload = (props: CsvUploadProps) => {\n  const {\n    children,\n    dialogTitle = \"Import CSV\",\n    onCancel,\n    onClose,\n    open,\n  } = props;\n  const isControlledOpen = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(open ?? true);\n\n  const handleCancel = useCallback(() => {\n    if (!isControlledOpen) {\n      setInternalOpen(false);\n    }\n    onCancel?.();\n  }, [isControlledOpen, onCancel]);\n\n  const dialogOpen = isControlledOpen ? open : internalOpen;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-csv-upload\",\n    css,\n    window: targetWindow,\n  });\n\n  const {\n    canImport,\n    isProcessingFile,\n    isImporting,\n    importData,\n    onDrop,\n    onTriggerChange,\n    schema,\n    validation,\n  } = useCsvUpload(props);\n\n  const handleImport = useCallback(async () => {\n    await importData();\n    onClose?.();\n  }, [importData, onClose]);\n\n  return (\n    <Dialog open={dialogOpen}>\n      <DialogHeader header={dialogTitle} />\n      <DialogContent>\n        <div className={classBase}>\n          <FileDropZone\n            className={`${classBase}-dropZone`}\n            disabled={schema === undefined || isProcessingFile || isImporting}\n            onDrop={onDrop}\n            status={\n              validation && validation.errors.length > 0 ? \"error\" : undefined\n            }\n          >\n            <FileDropZoneIcon />\n            {validation && validation.errors.length > 0 ? (\n              <>\n                <div>Your file contains errors</div>\n                <div> Please rectify and reupload</div>\n              </>\n            ) : (\n              <div>Drop a file here or</div>\n            )}\n            <FileDropZoneTrigger\n              accept=\".csv,text/csv\"\n              onChange={onTriggerChange}\n            >\n              BROWSE FILES\n            </FileDropZoneTrigger>\n          </FileDropZone>\n          {children}\n        </div>\n      </DialogContent>\n      <DialogActions>\n        <Button appearance=\"solid\" sentiment=\"negative\" onClick={handleCancel}>\n          Cancel\n        </Button>\n        <Button\n          disabled={!canImport}\n          appearance=\"solid\"\n          sentiment=\"accented\"\n          onClick={handleImport}\n        >\n          {isProcessingFile\n            ? \"Validating...\"\n            : isImporting\n              ? \"Importing...\"\n              : \"Import\"}\n        </Button>\n      </DialogActions>\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CsvUpload.js","sources":["../../../../../../../packages/vuu-table-extras/src/csv-upload/CsvUpload.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogHeader,\n  FileDropZone,\n  FileDropZoneIcon,\n  FileDropZoneTrigger,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ReactNode, useCallback, useState } from \"react\";\nimport type { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport type { EditSession } from \"@vuu-ui/vuu-data-editing\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport type { CsvParseError, CsvParseOptions } from \"./parse/csv-parse\";\nimport type { CsvValidationStructuredError } from \"./parse/csv-schema-validation\";\nimport type { CsvUploadTableData } from \"./parse/csv-upload-utils\";\nimport { useCsvUpload } from \"./useCsvUpload\";\nimport css from \"./CsvUpload.css\";\n\nexport type CsvUploadImportedResult = {\n  tableData: CsvUploadTableData;\n};\n\nexport type CsvUploadPreviewResult = {\n  dataSource: DataSource;\n  editSession: EditSession;\n  tableData: CsvUploadTableData;\n};\n\nexport type CsvUploadErrors = {\n  schemaError?: CsvUploadError;\n  validationError?: CsvUploadError;\n  importError?: CsvUploadError;\n};\n\nexport type CsvUploadError = {\n  message: string;\n  parseError?: CsvParseError;\n  validationError?: CsvValidationStructuredError;\n  source: \"schema\" | \"validation\" | \"import\";\n};\n\nexport type CsvUploadErrorResult = {\n  errors: CsvUploadErrors;\n};\n\nexport type CsvUploadSessionTable = VuuTable;\n\nexport type CsvUploadSessionEndReason = \"saved\" | \"discarded\" | \"failed\";\n\nexport type CsvUploadSessionEndResult = {\n  reason: CsvUploadSessionEndReason;\n  sessionTable?: CsvUploadSessionTable;\n};\n\nexport type CsvUploadPhase =\n  | \"idle\"\n  | \"processing\"\n  | \"preview-ready\"\n  | \"importing\"\n  | \"imported\"\n  | \"failed\";\n\nexport interface CsvUploadProps {\n  children?: ReactNode;\n  dataSource: DataSource;\n  embedded?: boolean;\n  onImportSessionStarted?: (dataSource: DataSource) => void;\n  onImportSessionEnded?: (result: CsvUploadSessionEndResult) => void;\n  onError?: (result: CsvUploadErrorResult | undefined) => void;\n  onImported?: (result: CsvUploadImportedResult) => void;\n  onPreview?: (result: CsvUploadPreviewResult) => void;\n  onProcessingStarted?: () => void;\n  dialogTitle?: string;\n  maxRows?: number;\n  onCancel?: () => void;\n  onClose?: () => void;\n  open?: boolean;\n  parseOptions?: CsvParseOptions;\n  importMode?: \"direct\" | \"preview\";\n}\n\nconst classBase = \"vuuCsvUpload\";\n\nexport const CsvUpload = (props: CsvUploadProps) => {\n  const {\n    children,\n    dialogTitle = \"Import CSV\",\n    embedded = false,\n    onCancel,\n    onClose,\n    open,\n  } = props;\n  const isControlledOpen = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(open ?? true);\n\n  const dialogOpen = isControlledOpen ? open : internalOpen;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-csv-upload\",\n    css,\n    window: targetWindow,\n  });\n\n  const {\n    canImport,\n    cancelImport,\n    isProcessingFile,\n    isImporting,\n    importData,\n    onDrop,\n    onTriggerChange,\n    schema,\n    validation,\n  } = useCsvUpload(props);\n\n  const handleCancel = useCallback(async () => {\n    await cancelImport();\n    if (!isControlledOpen) {\n      setInternalOpen(false);\n    }\n    onCancel?.();\n  }, [cancelImport, isControlledOpen, onCancel]);\n\n  const handleImport = useCallback(async () => {\n    if (await importData()) {\n      onClose?.();\n    }\n  }, [importData, onClose]);\n\n  const content = (\n    <div className={classBase}>\n      <FileDropZone\n        className={`${classBase}-dropZone`}\n        disabled={schema === undefined || isProcessingFile || isImporting}\n        onDrop={onDrop}\n        status={\n          validation && validation.errors.length > 0 ? \"error\" : undefined\n        }\n      >\n        <FileDropZoneIcon />\n        {validation && validation.errors.length > 0 ? (\n          <>\n            <div>Your file contains errors</div>\n            <div> Please rectify and reupload</div>\n          </>\n        ) : (\n          <div>Drop a file here or</div>\n        )}\n        <FileDropZoneTrigger accept=\".csv,text/csv\" onChange={onTriggerChange}>\n          BROWSE FILES\n        </FileDropZoneTrigger>\n      </FileDropZone>\n      {children}\n    </div>\n  );\n\n  const actions = (\n    <DialogActions>\n      <Button\n        appearance=\"solid\"\n        disabled={isImporting}\n        sentiment=\"negative\"\n        onClick={handleCancel}\n      >\n        Cancel\n      </Button>\n      <Button\n        disabled={!canImport}\n        appearance=\"solid\"\n        sentiment=\"accented\"\n        onClick={handleImport}\n      >\n        {isProcessingFile\n          ? \"Validating...\"\n          : isImporting\n            ? \"Importing...\"\n            : \"Import\"}\n      </Button>\n    </DialogActions>\n  );\n\n  if (embedded) {\n    return (\n      <>\n        {content}\n        {actions}\n      </>\n    );\n  }\n\n  return (\n    <Dialog open={dialogOpen}>\n      <DialogHeader header={dialogTitle} />\n      <DialogContent>{content}</DialogContent>\n      {actions}\n    </Dialog>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/packages/vuu-table-extras/src/csv-upload/data-upload-preview/DataUploadPreview.css.js

@@ -0,0 +1,4 @@
+var css = ".vuuDataUploadPreview {\n  display: flex;\n  flex-direction: column;\n  height: 420px;\n  width: 900px;\n\n  .vuuDataUploadPreview-content {\n    flex: 1 1 auto;\n  }\n}\n";
+
+export { css as default };
+//# sourceMappingURL=DataUploadPreview.css.js.map

package/esm/packages/vuu-table-extras/src/csv-upload/data-upload-preview/DataUploadPreview.css.js.map

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