@vuu-ui/vuu-table 0.8.88 → 0.8.89

package/cjs/bulk-edit/BulkEditPanel.js

@@ -12,7 +12,9 @@ var BulkEditPanel$1 = require('./BulkEditPanel.css.js');
 const classBase = "vuuBulkEditPanel";
 const BulkEditPanel = ({
   className,
+  columns,
   dataSource,
+  parentDs,
   ...htmlAttributes
 }) => {
   const targetWindow = window.useWindow();
@@ -30,18 +32,26 @@ const BulkEditPanel = ({
         type: "VIEW_PORT_RPC_CALL"
       });
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(BulkEditRow.BulkEditRow, { onChange });
-  }, [dataSource]);
+    return /* @__PURE__ */ jsxRuntime.jsx(BulkEditRow.BulkEditRow, { onChange, dataSource: parentDs });
+  }, [dataSource, parentDs]);
   const config = react.useMemo(() => {
     return {
-      columns: dataSource.columns.map((name) => ({
+      columns: columns ? columns.map((col) => {
+        return {
+          editable: col.editableBulk === "bulk",
+          hidden: col.editableBulk === false,
+          name: col.name,
+          serverDataType: col.serverDataType ?? "string",
+          type: col.name === "date" ? col.type : "string"
+        };
+      }) : dataSource.columns.map((name) => ({
         editable: true,
         name,
         serverDataType: "string"
       })),
       rowSeparators: true
     };
-  }, [dataSource]);
+  }, [columns, dataSource.columns]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

package/cjs/bulk-edit/BulkEditPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkEditPanel.js","sources":["../../src/bulk-edit/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource, RpcResponse } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRpcViewportRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport type { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Table } from \"../Table\";\nimport { BulkEditRow, type EditValueChangeHandler } from \"./BulkEditRow\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\nexport interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {\n  dataSource: DataSource;\n  response?: RpcResponse;\n  mainTableName?: string;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  dataSource,\n  ...htmlAttributes\n}: BulkEditPanelProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  const bulkEditRow = useMemo(() => {\n    const onChange: EditValueChangeHandler = (column, value) => {\n      dataSource.rpcCall?.({\n        namedParams: { column: column.name, value },\n        params: [],\n        rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n        type: \"VIEW_PORT_RPC_CALL\",\n      } as Omit<VuuRpcViewportRequest, \"vpId\">);\n    };\n    return <BulkEditRow onChange={onChange} />;\n  }, [dataSource]);\n\n  const config: TableConfig = useMemo(() => {\n    return {\n      columns: dataSource.columns.map((name) => ({\n        editable: true,\n        name,\n        serverDataType: \"string\",\n      })),\n      rowSeparators: true,\n    };\n  }, [dataSource]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      <div className={`${classBase}-toolbar`} />\n      <div className={`${classBase}-table`}>\n        <Table\n          allowDragColumnHeader={false}\n          config={config}\n          customHeader={bulkEditRow}\n          dataSource={dataSource}\n          height={400}\n          width={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditPanelCss","useMemo","jsx","BulkEditRow","jsxs","Table"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,kBAAA,CAAA;AAQX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAuC,KAAA;AACrC,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,cAAQ,MAAM;AAChC,IAAM,MAAA,QAAA,GAAmC,CAAC,MAAA,EAAQ,KAAU,KAAA;AAC1D,MAAA,UAAA,CAAW,OAAU,GAAA;AAAA,QACnB,WAAa,EAAA,EAAE,MAAQ,EAAA,MAAA,CAAO,MAAM,KAAM,EAAA;AAAA,QAC1C,QAAQ,EAAC;AAAA,QACT,OAAS,EAAA,+BAAA;AAAA,QACT,IAAM,EAAA,oBAAA;AAAA,OACgC,CAAA,CAAA;AAAA,KAC1C,CAAA;AACA,IAAO,uBAAAC,cAAA,CAACC,2BAAY,QAAoB,EAAA,CAAA,CAAA;AAAA,GAC1C,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAM,MAAA,MAAA,GAAsBF,cAAQ,MAAM;AACxC,IAAO,OAAA;AAAA,MACL,OAAS,EAAA,UAAA,CAAW,OAAQ,CAAA,GAAA,CAAI,CAAC,IAAU,MAAA;AAAA,QACzC,QAAU,EAAA,IAAA;AAAA,QACV,IAAA;AAAA,QACA,cAAgB,EAAA,QAAA;AAAA,OAChB,CAAA,CAAA;AAAA,MACF,aAAe,EAAA,IAAA;AAAA,KACjB,CAAA;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EACE,uBAAAG,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAElD,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,CAAA;AAAA,wBACvCA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA;AAAA,UAACG,WAAA;AAAA,UAAA;AAAA,YACC,qBAAuB,EAAA,KAAA;AAAA,YACvB,MAAA;AAAA,YACA,YAAc,EAAA,WAAA;AAAA,YACd,UAAA;AAAA,YACA,MAAQ,EAAA,GAAA;AAAA,YACR,KAAO,EAAA,GAAA;AAAA,YACP,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,WAAA;AAAA,SAEnB,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BulkEditPanel.js","sources":["../../src/bulk-edit/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource, RpcResponse } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRpcViewportRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ColumnDescriptor, TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Table } from \"../Table\";\nimport { BulkEditRow, type EditValueChangeHandler } from \"./BulkEditRow\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\nexport interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {\n  columns?: ColumnDescriptor[];\n  dataSource: DataSource;\n  response?: RpcResponse;\n  mainTableName?: string;\n  parentDs: DataSource;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  columns,\n  dataSource,\n  parentDs,\n  ...htmlAttributes\n}: BulkEditPanelProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  const bulkEditRow = useMemo(() => {\n    const onChange: EditValueChangeHandler = (column, value) => {\n      dataSource.rpcCall?.({\n        namedParams: { column: column.name, value },\n        params: [],\n        rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n        type: \"VIEW_PORT_RPC_CALL\",\n      } as Omit<VuuRpcViewportRequest, \"vpId\">);\n    };\n    return <BulkEditRow onChange={onChange} dataSource={parentDs} />;\n  }, [dataSource, parentDs]);\n\n  const config: TableConfig = useMemo(() => {\n    return {\n      columns: columns\n        ? columns.map((col) => {\n            return {\n              editable: col.editableBulk === \"bulk\",\n              hidden: col.editableBulk === false,\n              name: col.name,\n              serverDataType: col.serverDataType ?? \"string\",\n              type: col.name === \"date\" ? col.type : \"string\",\n            };\n          })\n        : dataSource.columns.map((name) => ({\n            editable: true,\n            name,\n            serverDataType: \"string\",\n          })),\n      rowSeparators: true,\n    };\n  }, [columns, dataSource.columns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      <div className={`${classBase}-toolbar`} />\n      <div className={`${classBase}-table`}>\n        <Table\n          allowDragColumnHeader={false}\n          config={config}\n          customHeader={bulkEditRow}\n          dataSource={dataSource}\n          height={400}\n          width={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditPanelCss","useMemo","jsx","BulkEditRow","jsxs","Table"],"mappings":"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"}

package/cjs/bulk-edit/BulkEditRow.js

@@ -16,20 +16,24 @@ const InputProps = {
   placeholder: "Enter value",
   variant: "primary"
 };
-const BulkEditRow = ({ onChange, ...htmlAttributes }) => {
+const BulkEditRow = ({
+  dataSource,
+  onChange,
+  ...htmlAttributes
+}) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "vuu-bulk-edit-row",
     css: BulkEditRow$1,
     window: targetWindow
   });
+  const fieldRef = react.useRef("");
   const { columns, virtualColSpan = 0 } = HeaderProvider.useHeaderProps();
   const onCommit = react.useCallback(
     (evt, value) => {
       if (value !== void 0 && String(value).trim() !== "") {
-        const field = vuuUtils.queryClosest(evt.target, "[data-field]");
-        if (field) {
-          const columnName = field.dataset.field;
+        const columnName = fieldRef.current;
+        if (columnName) {
           const column = columns.find((c) => c.name === columnName);
           if (column) {
             onChange(column, value);
@@ -39,14 +43,43 @@ const BulkEditRow = ({ onChange, ...htmlAttributes }) => {
     },
     [columns, onChange]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, children: [
+  const handleFocus = react.useCallback((evt) => {
+    const field = vuuUtils.queryClosest(evt.target, "[data-field]");
+    if (field) {
+      const columnName = field.dataset.field;
+      if (columnName) {
+        fieldRef.current = columnName;
+      }
+    }
+  }, []);
+  const getSuggestions = react.useCallback(
+    ([, column, pattern]) => {
+      const a = dataSource.getTypeaheadSuggestions(column, pattern);
+      console.log(a);
+      return a;
+    },
+    [dataSource]
+  );
+  const suggestionProvider = react.useMemo(() => {
+    if (vuuUtils.isTypeaheadSuggestionProvider(dataSource)) {
+      return () => getSuggestions;
+    }
+  }, [dataSource, getSuggestions]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, onFocus: handleFocus, children: [
     /* @__PURE__ */ jsxRuntime.jsx(VirtualColSpan.VirtualColSpan, { width: virtualColSpan }),
     columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: `${classBase}-filter`,
+        "data-field": column.name,
         style: { width: column.width },
-        children: vuuDataReact.getDataItemEditControl({ InputProps, column, onCommit })
+        children: vuuDataReact.getDataItemEditControl({
+          InputProps,
+          column,
+          onCommit,
+          suggestionProvider,
+          table: dataSource.table
+        })
       },
       column.name
     ))

package/cjs/bulk-edit/BulkEditRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\n\nimport bulkEditRowCss from \"./BulkEditRow.css\";\nimport { InputProps } from \"@salt-ds/core\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: string,\n) => void;\nexport interface BulkEditProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: EditValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n  placeholder: \"Enter value\",\n  variant: \"primary\",\n};\n\nexport const BulkEditRow = ({ onChange, ...htmlAttributes }: BulkEditProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-bulk-edit-row\",\n    css: bulkEditRowCss,\n    window: targetWindow,\n  });\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLInputElement, string | undefined>\n  >(\n    (evt, value) => {\n      if (value !== undefined && String(value).trim() !== \"\") {\n        const field = queryClosest(evt.target, \"[data-field]\");\n        if (field) {\n          const columnName = field.dataset.field;\n          const column = columns.find((c) => c.name === columnName);\n          if (column) {\n            onChange(column, value);\n          }\n        }\n      }\n    },\n    [columns, onChange],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column) => (\n        <div\n          className={`${classBase}-filter`}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({ InputProps, column, onCommit })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditRowCss","useHeaderProps","useCallback","queryClosest","jsxs","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAWlB,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,aAAA;AAAA,EACb,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC,EAAE,QAAU,EAAA,GAAG,gBAAoC,KAAA;AAC7E,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAMC,6BAAe,EAAA,CAAA;AAEvD,EAAA,MAAM,QAAW,GAAAC,iBAAA;AAAA,IAGf,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,UAAU,KAAa,CAAA,IAAA,MAAA,CAAO,KAAK,CAAE,CAAA,IAAA,OAAW,EAAI,EAAA;AACtD,QAAA,MAAM,KAAQ,GAAAC,qBAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,cAAc,CAAA,CAAA;AACrD,QAAA,IAAI,KAAO,EAAA;AACT,UAAM,MAAA,UAAA,GAAa,MAAM,OAAQ,CAAA,KAAA,CAAA;AACjC,UAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA,CAAA;AACxD,UAAA,IAAI,MAAQ,EAAA;AACV,YAAA,QAAA,CAAS,QAAQ,KAAK,CAAA,CAAA;AAAA,WACxB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,6BAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,QAEvB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAAE,mCAAA,CAAA,EAAE,UAAY,EAAA,MAAA,EAAQ,UAAU,CAAA;AAAA,OAAA;AAAA,MAHnD,MAAO,CAAA,IAAA;AAAA,KAKf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport {\n  DataSource,\n  SuggestionFetcher,\n  TypeaheadSuggestionProvider,\n} from \"@vuu-ui/vuu-data-types\";\nimport { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  CommitHandler,\n  isTypeaheadSuggestionProvider,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback, useMemo, useRef } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: string,\n) => void;\nexport interface BulkEditProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  dataSource: DataSource;\n  onChange: EditValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n  placeholder: \"Enter value\",\n  variant: \"primary\",\n};\n\nexport const BulkEditRow = ({\n  dataSource,\n  onChange,\n  ...htmlAttributes\n}: BulkEditProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-bulk-edit-row\",\n    css: bulkEditRowCss,\n    window: targetWindow,\n  });\n\n  const fieldRef = useRef(\"\");\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLInputElement, string | undefined>\n  >(\n    (evt, value) => {\n      if (value !== undefined && String(value).trim() !== \"\") {\n        const columnName = fieldRef.current;\n        if (columnName) {\n          const column = columns.find((c) => c.name === columnName);\n          if (column) {\n            onChange(column, value);\n          }\n        }\n      }\n    },\n    [columns, onChange],\n  );\n\n  const handleFocus = useCallback((evt) => {\n    const field = queryClosest(evt.target, \"[data-field]\");\n    if (field) {\n      const columnName = field.dataset.field;\n      if (columnName) {\n        fieldRef.current = columnName;\n      }\n    }\n  }, []);\n\n  const getSuggestions = useCallback<SuggestionFetcher>(\n    ([, column, pattern]: TypeaheadParams) => {\n      const a = (\n        dataSource as TypeaheadSuggestionProvider\n      ).getTypeaheadSuggestions(column, pattern);\n      console.log(a);\n      return a;\n    },\n    [dataSource],\n  );\n\n  const suggestionProvider = useMemo(() => {\n    if (isTypeaheadSuggestionProvider(dataSource)) {\n      return () => getSuggestions;\n    }\n  }, [dataSource, getSuggestions]);\n\n  return (\n    <div {...htmlAttributes} className={classBase} onFocus={handleFocus}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column) => (\n        <div\n          className={`${classBase}-filter`}\n          data-field={column.name}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({\n            InputProps,\n            column,\n            onCommit,\n            suggestionProvider,\n            table: dataSource.table,\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditRowCss","useRef","useHeaderProps","useCallback","queryClosest","useMemo","isTypeaheadSuggestionProvider","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":"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"}

package/cjs/useTableContextMenu.js

@@ -27,6 +27,7 @@ const useTableContextMenu = ({
         showContextMenu(evt, "grid", {
           columnMap,
           columnName,
+          columns,
           row,
           selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
           viewport: dataSource.viewport

package/cjs/useTableContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableContextMenu.js","sources":["../src/useTableContextMenu.ts"],"sourcesContent":["import { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useContextMenu as usePopupContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { buildColumnMap, getIndexFromRowElement } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, useCallback } from \"react\";\n\nexport interface TableContextMenuHookProps {\n  columns: RuntimeColumnDescriptor[];\n  data: DataSourceRow[];\n  dataSource: DataSource;\n  getSelectedRows: () => DataSourceRow[];\n}\n\nconst NO_ROWS = [] as const;\n\nexport const useTableContextMenu = ({\n  columns,\n  data,\n  dataSource,\n  getSelectedRows,\n}: TableContextMenuHookProps) => {\n  const [showContextMenu] = usePopupContextMenu();\n\n  const onContextMenu = useCallback(\n    (evt: MouseEvent<HTMLElement>) => {\n      const target = evt.target as HTMLElement;\n      const cellEl = target?.closest(\"div[role='cell']\");\n      const rowEl = target?.closest(\"div[role='row']\") as HTMLElement;\n      if (cellEl && rowEl) {\n        const { selectedRowsCount } = dataSource;\n        const columnMap = buildColumnMap(columns);\n        const rowIndex = getIndexFromRowElement(rowEl);\n        const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);\n        const row = data.find(([idx]) => idx === rowIndex);\n        const columnName = columns[cellIndex];\n        // TODO does it really make sense to collect selected rows ?\n        // We only have access to rows in local cache\n        showContextMenu(evt, \"grid\", {\n          columnMap,\n          columnName,\n          row,\n          selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),\n          viewport: dataSource.viewport,\n        });\n      }\n    },\n    [columns, data, dataSource, getSelectedRows, showContextMenu],\n  );\n\n  return onContextMenu;\n};\n"],"names":["usePopupContextMenu","useCallback","buildColumnMap","getIndexFromRowElement"],"mappings":";;;;;;AAaA,MAAM,UAAU,EAAC,CAAA;AAEV,MAAM,sBAAsB,CAAC;AAAA,EAClC,OAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AACF,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,eAAe,CAAA,GAAIA,wBAAoB,EAAA,CAAA;AAE9C,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,GAAiC,KAAA;AAChC,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA,CAAA;AACnB,MAAM,MAAA,MAAA,GAAS,MAAQ,EAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AACjD,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,OAAA,CAAQ,iBAAiB,CAAA,CAAA;AAC/C,MAAA,IAAI,UAAU,KAAO,EAAA;AACnB,QAAM,MAAA,EAAE,mBAAsB,GAAA,UAAA,CAAA;AAC9B,QAAM,MAAA,SAAA,GAAYC,wBAAe,OAAO,CAAA,CAAA;AACxC,QAAM,MAAA,QAAA,GAAWC,gCAAuB,KAAK,CAAA,CAAA;AAC7C,QAAA,MAAM,YAAY,KAAM,CAAA,IAAA,CAAK,MAAM,UAAU,CAAA,CAAE,QAAQ,MAAM,CAAA,CAAA;AAC7D,QAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAAC,CAAC,GAAG,CAAA,KAAM,QAAQ,QAAQ,CAAA,CAAA;AACjD,QAAM,MAAA,UAAA,GAAa,QAAQ,SAAS,CAAA,CAAA;AAGpC,QAAA,eAAA,CAAgB,KAAK,MAAQ,EAAA;AAAA,UAC3B,SAAA;AAAA,UACA,UAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAc,EAAA,iBAAA,KAAsB,CAAI,GAAA,OAAA,GAAU,eAAgB,EAAA;AAAA,UAClE,UAAU,UAAW,CAAA,QAAA;AAAA,SACtB,CAAA,CAAA;AAAA,OACH;AAAA,KACF;AAAA,IACA,CAAC,OAAA,EAAS,IAAM,EAAA,UAAA,EAAY,iBAAiB,eAAe,CAAA;AAAA,GAC9D,CAAA;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"useTableContextMenu.js","sources":["../src/useTableContextMenu.ts"],"sourcesContent":["import { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useContextMenu as usePopupContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { buildColumnMap, getIndexFromRowElement } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, useCallback } from \"react\";\n\nexport interface TableContextMenuHookProps {\n  columns: RuntimeColumnDescriptor[];\n  data: DataSourceRow[];\n  dataSource: DataSource;\n  getSelectedRows: () => DataSourceRow[];\n}\n\nconst NO_ROWS = [] as const;\n\nexport const useTableContextMenu = ({\n  columns,\n  data,\n  dataSource,\n  getSelectedRows,\n}: TableContextMenuHookProps) => {\n  const [showContextMenu] = usePopupContextMenu();\n\n  const onContextMenu = useCallback(\n    (evt: MouseEvent<HTMLElement>) => {\n      const target = evt.target as HTMLElement;\n      const cellEl = target?.closest(\"div[role='cell']\");\n      const rowEl = target?.closest(\"div[role='row']\") as HTMLElement;\n      if (cellEl && rowEl) {\n        const { selectedRowsCount } = dataSource;\n        const columnMap = buildColumnMap(columns);\n        const rowIndex = getIndexFromRowElement(rowEl);\n        const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);\n        const row = data.find(([idx]) => idx === rowIndex);\n        const columnName = columns[cellIndex];\n        // TODO does it really make sense to collect selected rows ?\n        // We only have access to rows in local cache\n        showContextMenu(evt, \"grid\", {\n          columnMap,\n          columnName,\n          columns,\n          row,\n          selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),\n          viewport: dataSource.viewport,\n        });\n      }\n    },\n    [columns, data, dataSource, getSelectedRows, showContextMenu],\n  );\n\n  return onContextMenu;\n};\n"],"names":["usePopupContextMenu","useCallback","buildColumnMap","getIndexFromRowElement"],"mappings":";;;;;;AAaA,MAAM,UAAU,EAAC,CAAA;AAEV,MAAM,sBAAsB,CAAC;AAAA,EAClC,OAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AACF,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,eAAe,CAAA,GAAIA,wBAAoB,EAAA,CAAA;AAE9C,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,GAAiC,KAAA;AAChC,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA,CAAA;AACnB,MAAM,MAAA,MAAA,GAAS,MAAQ,EAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AACjD,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,OAAA,CAAQ,iBAAiB,CAAA,CAAA;AAC/C,MAAA,IAAI,UAAU,KAAO,EAAA;AACnB,QAAM,MAAA,EAAE,mBAAsB,GAAA,UAAA,CAAA;AAC9B,QAAM,MAAA,SAAA,GAAYC,wBAAe,OAAO,CAAA,CAAA;AACxC,QAAM,MAAA,QAAA,GAAWC,gCAAuB,KAAK,CAAA,CAAA;AAC7C,QAAA,MAAM,YAAY,KAAM,CAAA,IAAA,CAAK,MAAM,UAAU,CAAA,CAAE,QAAQ,MAAM,CAAA,CAAA;AAC7D,QAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAAC,CAAC,GAAG,CAAA,KAAM,QAAQ,QAAQ,CAAA,CAAA;AACjD,QAAM,MAAA,UAAA,GAAa,QAAQ,SAAS,CAAA,CAAA;AAGpC,QAAA,eAAA,CAAgB,KAAK,MAAQ,EAAA;AAAA,UAC3B,SAAA;AAAA,UACA,UAAA;AAAA,UACA,OAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAc,EAAA,iBAAA,KAAsB,CAAI,GAAA,OAAA,GAAU,eAAgB,EAAA;AAAA,UAClE,UAAU,UAAW,CAAA,QAAA;AAAA,SACtB,CAAA,CAAA;AAAA,OACH;AAAA,KACF;AAAA,IACA,CAAC,OAAA,EAAS,IAAM,EAAA,UAAA,EAAY,iBAAiB,eAAe,CAAA;AAAA,GAC9D,CAAA;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}

package/esm/bulk-edit/BulkEditPanel.js

@@ -10,7 +10,9 @@ import bulkEditPanelCss from './BulkEditPanel.css.js';
 const classBase = "vuuBulkEditPanel";
 const BulkEditPanel = ({
   className,
+  columns,
   dataSource,
+  parentDs,
   ...htmlAttributes
 }) => {
   const targetWindow = useWindow();
@@ -28,18 +30,26 @@ const BulkEditPanel = ({
         type: "VIEW_PORT_RPC_CALL"
       });
     };
-    return /* @__PURE__ */ jsx(BulkEditRow, { onChange });
-  }, [dataSource]);
+    return /* @__PURE__ */ jsx(BulkEditRow, { onChange, dataSource: parentDs });
+  }, [dataSource, parentDs]);
   const config = useMemo(() => {
     return {
-      columns: dataSource.columns.map((name) => ({
+      columns: columns ? columns.map((col) => {
+        return {
+          editable: col.editableBulk === "bulk",
+          hidden: col.editableBulk === false,
+          name: col.name,
+          serverDataType: col.serverDataType ?? "string",
+          type: col.name === "date" ? col.type : "string"
+        };
+      }) : dataSource.columns.map((name) => ({
         editable: true,
         name,
         serverDataType: "string"
       })),
       rowSeparators: true
     };
-  }, [dataSource]);
+  }, [columns, dataSource.columns]);
   return /* @__PURE__ */ jsxs(
     "div",
     {

package/esm/bulk-edit/BulkEditPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkEditPanel.js","sources":["../../src/bulk-edit/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource, RpcResponse } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRpcViewportRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport type { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Table } from \"../Table\";\nimport { BulkEditRow, type EditValueChangeHandler } from \"./BulkEditRow\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\nexport interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {\n  dataSource: DataSource;\n  response?: RpcResponse;\n  mainTableName?: string;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  dataSource,\n  ...htmlAttributes\n}: BulkEditPanelProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  const bulkEditRow = useMemo(() => {\n    const onChange: EditValueChangeHandler = (column, value) => {\n      dataSource.rpcCall?.({\n        namedParams: { column: column.name, value },\n        params: [],\n        rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n        type: \"VIEW_PORT_RPC_CALL\",\n      } as Omit<VuuRpcViewportRequest, \"vpId\">);\n    };\n    return <BulkEditRow onChange={onChange} />;\n  }, [dataSource]);\n\n  const config: TableConfig = useMemo(() => {\n    return {\n      columns: dataSource.columns.map((name) => ({\n        editable: true,\n        name,\n        serverDataType: \"string\",\n      })),\n      rowSeparators: true,\n    };\n  }, [dataSource]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      <div className={`${classBase}-toolbar`} />\n      <div className={`${classBase}-table`}>\n        <Table\n          allowDragColumnHeader={false}\n          config={config}\n          customHeader={bulkEditRow}\n          dataSource={dataSource}\n          height={400}\n          width={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYA,MAAM,SAAY,GAAA,kBAAA,CAAA;AAQX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAuC,KAAA;AACrC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAM,MAAA,QAAA,GAAmC,CAAC,MAAA,EAAQ,KAAU,KAAA;AAC1D,MAAA,UAAA,CAAW,OAAU,GAAA;AAAA,QACnB,WAAa,EAAA,EAAE,MAAQ,EAAA,MAAA,CAAO,MAAM,KAAM,EAAA;AAAA,QAC1C,QAAQ,EAAC;AAAA,QACT,OAAS,EAAA,+BAAA;AAAA,QACT,IAAM,EAAA,oBAAA;AAAA,OACgC,CAAA,CAAA;AAAA,KAC1C,CAAA;AACA,IAAO,uBAAA,GAAA,CAAC,eAAY,QAAoB,EAAA,CAAA,CAAA;AAAA,GAC1C,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAM,MAAA,MAAA,GAAsB,QAAQ,MAAM;AACxC,IAAO,OAAA;AAAA,MACL,OAAS,EAAA,UAAA,CAAW,OAAQ,CAAA,GAAA,CAAI,CAAC,IAAU,MAAA;AAAA,QACzC,QAAU,EAAA,IAAA;AAAA,QACV,IAAA;AAAA,QACA,cAAgB,EAAA,QAAA;AAAA,OAChB,CAAA,CAAA;AAAA,MACF,aAAe,EAAA,IAAA;AAAA,KACjB,CAAA;AAAA,GACF,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAElD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAAY,QAAA,CAAA,EAAA,CAAA;AAAA,wBACvC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,qBAAuB,EAAA,KAAA;AAAA,YACvB,MAAA;AAAA,YACA,YAAc,EAAA,WAAA;AAAA,YACd,UAAA;AAAA,YACA,MAAQ,EAAA,GAAA;AAAA,YACR,KAAO,EAAA,GAAA;AAAA,YACP,qBAAuB,EAAA,KAAA;AAAA,YACvB,cAAe,EAAA,MAAA;AAAA,WAAA;AAAA,SAEnB,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BulkEditPanel.js","sources":["../../src/bulk-edit/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource, RpcResponse } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRpcViewportRequest } from \"@vuu-ui/vuu-protocol-types\";\nimport type { ColumnDescriptor, TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { Table } from \"../Table\";\nimport { BulkEditRow, type EditValueChangeHandler } from \"./BulkEditRow\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\nexport interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {\n  columns?: ColumnDescriptor[];\n  dataSource: DataSource;\n  response?: RpcResponse;\n  mainTableName?: string;\n  parentDs: DataSource;\n}\n\nexport const BulkEditPanel = ({\n  className,\n  columns,\n  dataSource,\n  parentDs,\n  ...htmlAttributes\n}: BulkEditPanelProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  const bulkEditRow = useMemo(() => {\n    const onChange: EditValueChangeHandler = (column, value) => {\n      dataSource.rpcCall?.({\n        namedParams: { column: column.name, value },\n        params: [],\n        rpcName: \"VP_BULK_EDIT_COLUMN_CELLS_RPC\",\n        type: \"VIEW_PORT_RPC_CALL\",\n      } as Omit<VuuRpcViewportRequest, \"vpId\">);\n    };\n    return <BulkEditRow onChange={onChange} dataSource={parentDs} />;\n  }, [dataSource, parentDs]);\n\n  const config: TableConfig = useMemo(() => {\n    return {\n      columns: columns\n        ? columns.map((col) => {\n            return {\n              editable: col.editableBulk === \"bulk\",\n              hidden: col.editableBulk === false,\n              name: col.name,\n              serverDataType: col.serverDataType ?? \"string\",\n              type: col.name === \"date\" ? col.type : \"string\",\n            };\n          })\n        : dataSource.columns.map((name) => ({\n            editable: true,\n            name,\n            serverDataType: \"string\",\n          })),\n      rowSeparators: true,\n    };\n  }, [columns, dataSource.columns]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      style={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      <div className={`${classBase}-toolbar`} />\n      <div className={`${classBase}-table`}>\n        <Table\n          allowDragColumnHeader={false}\n          config={config}\n          customHeader={bulkEditRow}\n          dataSource={dataSource}\n          height={400}\n          width={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/bulk-edit/BulkEditRow.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getDataItemEditControl } from '@vuu-ui/vuu-data-react';
-import { queryClosest } from '@vuu-ui/vuu-utils';
+import { queryClosest, isTypeaheadSuggestionProvider } from '@vuu-ui/vuu-utils';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { useCallback } from 'react';
+import { useRef, useCallback, useMemo } from 'react';
 import { VirtualColSpan } from '../VirtualColSpan.js';
 import { useHeaderProps } from '../table-header/HeaderProvider.js';
 import '../table-header/TableHeader.js';
@@ -14,20 +14,24 @@ const InputProps = {
   placeholder: "Enter value",
   variant: "primary"
 };
-const BulkEditRow = ({ onChange, ...htmlAttributes }) => {
+const BulkEditRow = ({
+  dataSource,
+  onChange,
+  ...htmlAttributes
+}) => {
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "vuu-bulk-edit-row",
     css: bulkEditRowCss,
     window: targetWindow
   });
+  const fieldRef = useRef("");
   const { columns, virtualColSpan = 0 } = useHeaderProps();
   const onCommit = useCallback(
     (evt, value) => {
       if (value !== void 0 && String(value).trim() !== "") {
-        const field = queryClosest(evt.target, "[data-field]");
-        if (field) {
-          const columnName = field.dataset.field;
+        const columnName = fieldRef.current;
+        if (columnName) {
           const column = columns.find((c) => c.name === columnName);
           if (column) {
             onChange(column, value);
@@ -37,14 +41,43 @@ const BulkEditRow = ({ onChange, ...htmlAttributes }) => {
     },
     [columns, onChange]
   );
-  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, children: [
+  const handleFocus = useCallback((evt) => {
+    const field = queryClosest(evt.target, "[data-field]");
+    if (field) {
+      const columnName = field.dataset.field;
+      if (columnName) {
+        fieldRef.current = columnName;
+      }
+    }
+  }, []);
+  const getSuggestions = useCallback(
+    ([, column, pattern]) => {
+      const a = dataSource.getTypeaheadSuggestions(column, pattern);
+      console.log(a);
+      return a;
+    },
+    [dataSource]
+  );
+  const suggestionProvider = useMemo(() => {
+    if (isTypeaheadSuggestionProvider(dataSource)) {
+      return () => getSuggestions;
+    }
+  }, [dataSource, getSuggestions]);
+  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, onFocus: handleFocus, children: [
     /* @__PURE__ */ jsx(VirtualColSpan, { width: virtualColSpan }),
     columns.map((column) => /* @__PURE__ */ jsx(
       "div",
       {
         className: `${classBase}-filter`,
+        "data-field": column.name,
         style: { width: column.width },
-        children: getDataItemEditControl({ InputProps, column, onCommit })
+        children: getDataItemEditControl({
+          InputProps,
+          column,
+          onCommit,
+          suggestionProvider,
+          table: dataSource.table
+        })
       },
       column.name
     ))

package/esm/bulk-edit/BulkEditRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\n\nimport bulkEditRowCss from \"./BulkEditRow.css\";\nimport { InputProps } from \"@salt-ds/core\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: string,\n) => void;\nexport interface BulkEditProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: EditValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n  placeholder: \"Enter value\",\n  variant: \"primary\",\n};\n\nexport const BulkEditRow = ({ onChange, ...htmlAttributes }: BulkEditProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-bulk-edit-row\",\n    css: bulkEditRowCss,\n    window: targetWindow,\n  });\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLInputElement, string | undefined>\n  >(\n    (evt, value) => {\n      if (value !== undefined && String(value).trim() !== \"\") {\n        const field = queryClosest(evt.target, \"[data-field]\");\n        if (field) {\n          const columnName = field.dataset.field;\n          const column = columns.find((c) => c.name === columnName);\n          if (column) {\n            onChange(column, value);\n          }\n        }\n      }\n    },\n    [columns, onChange],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column) => (\n        <div\n          className={`${classBase}-filter`}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({ InputProps, column, onCommit })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAWlB,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,aAAA;AAAA,EACb,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC,EAAE,QAAU,EAAA,GAAG,gBAAoC,KAAA;AAC7E,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAM,cAAe,EAAA,CAAA;AAEvD,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IAGf,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,UAAU,KAAa,CAAA,IAAA,MAAA,CAAO,KAAK,CAAE,CAAA,IAAA,OAAW,EAAI,EAAA;AACtD,QAAA,MAAM,KAAQ,GAAA,YAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,cAAc,CAAA,CAAA;AACrD,QAAA,IAAI,KAAO,EAAA;AACT,UAAM,MAAA,UAAA,GAAa,MAAM,OAAQ,CAAA,KAAA,CAAA;AACjC,UAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA,CAAA;AACxD,UAAA,IAAI,MAAQ,EAAA;AACV,YAAA,QAAA,CAAS,QAAQ,KAAK,CAAA,CAAA;AAAA,WACxB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SAClC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,QAEvB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAA,sBAAA,CAAA,EAAE,UAAY,EAAA,MAAA,EAAQ,UAAU,CAAA;AAAA,OAAA;AAAA,MAHnD,MAAO,CAAA,IAAA;AAAA,KAKf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport {\n  DataSource,\n  SuggestionFetcher,\n  TypeaheadSuggestionProvider,\n} from \"@vuu-ui/vuu-data-types\";\nimport { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  CommitHandler,\n  isTypeaheadSuggestionProvider,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback, useMemo, useRef } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n  column: ColumnDescriptor,\n  value: string,\n) => void;\nexport interface BulkEditProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  dataSource: DataSource;\n  onChange: EditValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n  placeholder: \"Enter value\",\n  variant: \"primary\",\n};\n\nexport const BulkEditRow = ({\n  dataSource,\n  onChange,\n  ...htmlAttributes\n}: BulkEditProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-bulk-edit-row\",\n    css: bulkEditRowCss,\n    window: targetWindow,\n  });\n\n  const fieldRef = useRef(\"\");\n\n  const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLInputElement, string | undefined>\n  >(\n    (evt, value) => {\n      if (value !== undefined && String(value).trim() !== \"\") {\n        const columnName = fieldRef.current;\n        if (columnName) {\n          const column = columns.find((c) => c.name === columnName);\n          if (column) {\n            onChange(column, value);\n          }\n        }\n      }\n    },\n    [columns, onChange],\n  );\n\n  const handleFocus = useCallback((evt) => {\n    const field = queryClosest(evt.target, \"[data-field]\");\n    if (field) {\n      const columnName = field.dataset.field;\n      if (columnName) {\n        fieldRef.current = columnName;\n      }\n    }\n  }, []);\n\n  const getSuggestions = useCallback<SuggestionFetcher>(\n    ([, column, pattern]: TypeaheadParams) => {\n      const a = (\n        dataSource as TypeaheadSuggestionProvider\n      ).getTypeaheadSuggestions(column, pattern);\n      console.log(a);\n      return a;\n    },\n    [dataSource],\n  );\n\n  const suggestionProvider = useMemo(() => {\n    if (isTypeaheadSuggestionProvider(dataSource)) {\n      return () => getSuggestions;\n    }\n  }, [dataSource, getSuggestions]);\n\n  return (\n    <div {...htmlAttributes} className={classBase} onFocus={handleFocus}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column) => (\n        <div\n          className={`${classBase}-filter`}\n          data-field={column.name}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({\n            InputProps,\n            column,\n            onCommit,\n            suggestionProvider,\n            table: dataSource.table,\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/useTableContextMenu.js

@@ -25,6 +25,7 @@ const useTableContextMenu = ({
         showContextMenu(evt, "grid", {
           columnMap,
           columnName,
+          columns,
           row,
           selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
           viewport: dataSource.viewport

package/esm/useTableContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableContextMenu.js","sources":["../src/useTableContextMenu.ts"],"sourcesContent":["import { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useContextMenu as usePopupContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { buildColumnMap, getIndexFromRowElement } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, useCallback } from \"react\";\n\nexport interface TableContextMenuHookProps {\n  columns: RuntimeColumnDescriptor[];\n  data: DataSourceRow[];\n  dataSource: DataSource;\n  getSelectedRows: () => DataSourceRow[];\n}\n\nconst NO_ROWS = [] as const;\n\nexport const useTableContextMenu = ({\n  columns,\n  data,\n  dataSource,\n  getSelectedRows,\n}: TableContextMenuHookProps) => {\n  const [showContextMenu] = usePopupContextMenu();\n\n  const onContextMenu = useCallback(\n    (evt: MouseEvent<HTMLElement>) => {\n      const target = evt.target as HTMLElement;\n      const cellEl = target?.closest(\"div[role='cell']\");\n      const rowEl = target?.closest(\"div[role='row']\") as HTMLElement;\n      if (cellEl && rowEl) {\n        const { selectedRowsCount } = dataSource;\n        const columnMap = buildColumnMap(columns);\n        const rowIndex = getIndexFromRowElement(rowEl);\n        const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);\n        const row = data.find(([idx]) => idx === rowIndex);\n        const columnName = columns[cellIndex];\n        // TODO does it really make sense to collect selected rows ?\n        // We only have access to rows in local cache\n        showContextMenu(evt, \"grid\", {\n          columnMap,\n          columnName,\n          row,\n          selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),\n          viewport: dataSource.viewport,\n        });\n      }\n    },\n    [columns, data, dataSource, getSelectedRows, showContextMenu],\n  );\n\n  return onContextMenu;\n};\n"],"names":["usePopupContextMenu"],"mappings":";;;;AAaA,MAAM,UAAU,EAAC,CAAA;AAEV,MAAM,sBAAsB,CAAC;AAAA,EAClC,OAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AACF,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,eAAe,CAAA,GAAIA,cAAoB,EAAA,CAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAiC,KAAA;AAChC,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA,CAAA;AACnB,MAAM,MAAA,MAAA,GAAS,MAAQ,EAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AACjD,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,OAAA,CAAQ,iBAAiB,CAAA,CAAA;AAC/C,MAAA,IAAI,UAAU,KAAO,EAAA;AACnB,QAAM,MAAA,EAAE,mBAAsB,GAAA,UAAA,CAAA;AAC9B,QAAM,MAAA,SAAA,GAAY,eAAe,OAAO,CAAA,CAAA;AACxC,QAAM,MAAA,QAAA,GAAW,uBAAuB,KAAK,CAAA,CAAA;AAC7C,QAAA,MAAM,YAAY,KAAM,CAAA,IAAA,CAAK,MAAM,UAAU,CAAA,CAAE,QAAQ,MAAM,CAAA,CAAA;AAC7D,QAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAAC,CAAC,GAAG,CAAA,KAAM,QAAQ,QAAQ,CAAA,CAAA;AACjD,QAAM,MAAA,UAAA,GAAa,QAAQ,SAAS,CAAA,CAAA;AAGpC,QAAA,eAAA,CAAgB,KAAK,MAAQ,EAAA;AAAA,UAC3B,SAAA;AAAA,UACA,UAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAc,EAAA,iBAAA,KAAsB,CAAI,GAAA,OAAA,GAAU,eAAgB,EAAA;AAAA,UAClE,UAAU,UAAW,CAAA,QAAA;AAAA,SACtB,CAAA,CAAA;AAAA,OACH;AAAA,KACF;AAAA,IACA,CAAC,OAAA,EAAS,IAAM,EAAA,UAAA,EAAY,iBAAiB,eAAe,CAAA;AAAA,GAC9D,CAAA;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"useTableContextMenu.js","sources":["../src/useTableContextMenu.ts"],"sourcesContent":["import { DataSource, DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { useContextMenu as usePopupContextMenu } from \"@vuu-ui/vuu-popups\";\nimport { buildColumnMap, getIndexFromRowElement } from \"@vuu-ui/vuu-utils\";\nimport { MouseEvent, useCallback } from \"react\";\n\nexport interface TableContextMenuHookProps {\n  columns: RuntimeColumnDescriptor[];\n  data: DataSourceRow[];\n  dataSource: DataSource;\n  getSelectedRows: () => DataSourceRow[];\n}\n\nconst NO_ROWS = [] as const;\n\nexport const useTableContextMenu = ({\n  columns,\n  data,\n  dataSource,\n  getSelectedRows,\n}: TableContextMenuHookProps) => {\n  const [showContextMenu] = usePopupContextMenu();\n\n  const onContextMenu = useCallback(\n    (evt: MouseEvent<HTMLElement>) => {\n      const target = evt.target as HTMLElement;\n      const cellEl = target?.closest(\"div[role='cell']\");\n      const rowEl = target?.closest(\"div[role='row']\") as HTMLElement;\n      if (cellEl && rowEl) {\n        const { selectedRowsCount } = dataSource;\n        const columnMap = buildColumnMap(columns);\n        const rowIndex = getIndexFromRowElement(rowEl);\n        const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);\n        const row = data.find(([idx]) => idx === rowIndex);\n        const columnName = columns[cellIndex];\n        // TODO does it really make sense to collect selected rows ?\n        // We only have access to rows in local cache\n        showContextMenu(evt, \"grid\", {\n          columnMap,\n          columnName,\n          columns,\n          row,\n          selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),\n          viewport: dataSource.viewport,\n        });\n      }\n    },\n    [columns, data, dataSource, getSelectedRows, showContextMenu],\n  );\n\n  return onContextMenu;\n};\n"],"names":["usePopupContextMenu"],"mappings":";;;;AAaA,MAAM,UAAU,EAAC,CAAA;AAEV,MAAM,sBAAsB,CAAC;AAAA,EAClC,OAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AACF,CAAiC,KAAA;AAC/B,EAAM,MAAA,CAAC,eAAe,CAAA,GAAIA,cAAoB,EAAA,CAAA;AAE9C,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,GAAiC,KAAA;AAChC,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA,CAAA;AACnB,MAAM,MAAA,MAAA,GAAS,MAAQ,EAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AACjD,MAAM,MAAA,KAAA,GAAQ,MAAQ,EAAA,OAAA,CAAQ,iBAAiB,CAAA,CAAA;AAC/C,MAAA,IAAI,UAAU,KAAO,EAAA;AACnB,QAAM,MAAA,EAAE,mBAAsB,GAAA,UAAA,CAAA;AAC9B,QAAM,MAAA,SAAA,GAAY,eAAe,OAAO,CAAA,CAAA;AACxC,QAAM,MAAA,QAAA,GAAW,uBAAuB,KAAK,CAAA,CAAA;AAC7C,QAAA,MAAM,YAAY,KAAM,CAAA,IAAA,CAAK,MAAM,UAAU,CAAA,CAAE,QAAQ,MAAM,CAAA,CAAA;AAC7D,QAAM,MAAA,GAAA,GAAM,KAAK,IAAK,CAAA,CAAC,CAAC,GAAG,CAAA,KAAM,QAAQ,QAAQ,CAAA,CAAA;AACjD,QAAM,MAAA,UAAA,GAAa,QAAQ,SAAS,CAAA,CAAA;AAGpC,QAAA,eAAA,CAAgB,KAAK,MAAQ,EAAA;AAAA,UAC3B,SAAA;AAAA,UACA,UAAA;AAAA,UACA,OAAA;AAAA,UACA,GAAA;AAAA,UACA,YAAc,EAAA,iBAAA,KAAsB,CAAI,GAAA,OAAA,GAAU,eAAgB,EAAA;AAAA,UAClE,UAAU,UAAW,CAAA,QAAA;AAAA,SACtB,CAAA,CAAA;AAAA,OACH;AAAA,KACF;AAAA,IACA,CAAC,OAAA,EAAS,IAAM,EAAA,UAAA,EAAY,iBAAiB,eAAe,CAAA;AAAA,GAC9D,CAAA;AAEA,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}

package/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "0.8.88",
+  "version": "0.8.89",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.88",
-    "@vuu-ui/vuu-table-types": "0.8.88",
-    "@vuu-ui/vuu-protocol-types": "0.8.88"
+    "@vuu-ui/vuu-data-types": "0.8.89",
+    "@vuu-ui/vuu-table-types": "0.8.89",
+    "@vuu-ui/vuu-protocol-types": "0.8.89"
   },
   "dependencies": {
     "@salt-ds/core": "1.34.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-react": "0.8.88",
-    "@vuu-ui/vuu-layout": "0.8.88",
-    "@vuu-ui/vuu-popups": "0.8.88",
-    "@vuu-ui/vuu-ui-controls": "0.8.88",
-    "@vuu-ui/vuu-utils": "0.8.88"
+    "@vuu-ui/vuu-data-react": "0.8.89",
+    "@vuu-ui/vuu-layout": "0.8.89",
+    "@vuu-ui/vuu-popups": "0.8.89",
+    "@vuu-ui/vuu-ui-controls": "0.8.89",
+    "@vuu-ui/vuu-utils": "0.8.89"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/types/bulk-edit/BulkEditPanel.d.ts

@@ -1,8 +1,11 @@
 import { DataSource, RpcResponse } from "@vuu-ui/vuu-data-types";
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { HTMLAttributes } from "react";
 export interface BulkEditPanelProps extends HTMLAttributes<HTMLDivElement> {
+    columns?: ColumnDescriptor[];
     dataSource: DataSource;
     response?: RpcResponse;
     mainTableName?: string;
+    parentDs: DataSource;
 }
-export declare const BulkEditPanel: ({ className, dataSource, ...htmlAttributes }: BulkEditPanelProps) => JSX.Element;
+export declare const BulkEditPanel: ({ className, columns, dataSource, parentDs, ...htmlAttributes }: BulkEditPanelProps) => JSX.Element;

package/types/bulk-edit/BulkEditRow.d.ts

@@ -1,7 +1,9 @@
+import { DataSource } from "@vuu-ui/vuu-data-types";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { HTMLAttributes } from "react";
 export type EditValueChangeHandler = (column: ColumnDescriptor, value: string) => void;
 export interface BulkEditProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    dataSource: DataSource;
     onChange: EditValueChangeHandler;
 }
-export declare const BulkEditRow: ({ onChange, ...htmlAttributes }: BulkEditProps) => JSX.Element;
+export declare const BulkEditRow: ({ dataSource, onChange, ...htmlAttributes }: BulkEditProps) => JSX.Element;