@vuu-ui/vuu-table-extras 0.13.34 → 0.13.35

package/cjs/cell-renderers/button-cell/IconButtonCell.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var iconButtonCellCss = "\n.vuuTableCell:has(.vuuIconButtonCell){\n    padding: 0;\n    position: relative;\n}\n\n.vuuIconButtonCell {\n    align-items: center;\n    display: inline-flex;\n    justify-content: center;\n    padding: 0;\n    font-weight: 500;\n    position: relative;\n    height: 100%;\n    --saltButton-height: 100%;\n    --saltButton-minWidth: 100%;\n    --saltButton-padding: 0;\n    --saltButton-width: 100%;\n}\n";
+
+module.exports = iconButtonCellCss;
+//# sourceMappingURL=IconButtonCell.css.js.map

package/cjs/cell-renderers/button-cell/IconButtonCell.css.js.map

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

package/cjs/cell-renderers/button-cell/IconButtonCell.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var IconButtonCell$1 = require('./IconButtonCell.css.js');
+var TableProvider = require('../../table-provider/TableProvider.js');
+var core = require('@salt-ds/core');
+
+const classBase = "vuuIconButtonCell";
+const IconButtonCell = ({ column, row }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-dropdown-cell",
+    css: IconButtonCell$1,
+    window: targetWindow
+  });
+  const actionHandler = TableProvider.useRowAction(column.name);
+  const handleClick = react.useCallback(
+    (evt) => {
+      evt.stopPropagation();
+      actionHandler(column.name, row);
+    },
+    [actionHandler, column, row]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Button,
+    {
+      appearance: "transparent",
+      className: classBase,
+      "data-embedded": true,
+      "data-icon": true,
+      onClick: handleClick
+    }
+  );
+};
+
+exports.IconButtonCell = IconButtonCell;
+//# sourceMappingURL=IconButtonCell.js.map

package/cjs/cell-renderers/button-cell/IconButtonCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/button-cell/IconButtonCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { MouseEventHandler, useCallback } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport iconButtonCellCss from \"./IconButtonCell.css\";\nimport { useRowAction } from \"../../table-provider/TableProvider\";\nimport { Button } from \"@salt-ds/core\";\n\nconst classBase = \"vuuIconButtonCell\";\n\n/**\n * To assign an icon to the cell, give the columndescriptor\n * a className. In css, assign an icon variable to --vuu-svg-icon.\n */\nexport const IconButtonCell = ({ column, row }: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dropdown-cell\",\n    css: iconButtonCellCss,\n    window: targetWindow,\n  });\n\n  const actionHandler = useRowAction(column.name);\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      evt.stopPropagation();\n      actionHandler(column.name, row);\n    },\n    [actionHandler, column, row],\n  );\n\n  return (\n    <Button\n      appearance=\"transparent\"\n      className={classBase}\n      data-embedded\n      data-icon\n      onClick={handleClick}\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","iconButtonCellCss","useRowAction","useCallback","jsx","Button"],"mappings":";;;;;;;;;;AASA,MAAM,SAAY,GAAA,mBAAA;AAMX,MAAM,cAAiB,GAAA,CAAC,EAAE,MAAA,EAAQ,KAAkC,KAAA;AACzE,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,aAAA,GAAgBC,0BAAa,CAAA,MAAA,CAAO,IAAI,CAAA;AAC9C,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,GAAA,CAAI,eAAgB,EAAA;AACpB,MAAc,aAAA,CAAA,MAAA,CAAO,MAAM,GAAG,CAAA;AAAA,KAChC;AAAA,IACA,CAAC,aAAe,EAAA,MAAA,EAAQ,GAAG;AAAA,GAC7B;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,aAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAS,EAAA,IAAA;AAAA,MACT,OAAS,EAAA;AAAA;AAAA,GACX;AAEJ;;;;"}

package/cjs/index.js

@@ -8,6 +8,7 @@ var DropdownCell = require('./cell-renderers/dropdown-cell/DropdownCell.js');
 var LookupCell = require('./cell-renderers/lookup-cell/LookupCell.js');
 var PctProgressCell = require('./cell-renderers/pct-progress-cell/PctProgressCell.js');
 require('./cell-renderers/progress-cell/ProgressCell.js');
+var IconButtonCell = require('./cell-renderers/button-cell/IconButtonCell.js');
 var ColumnList = require('./column-list/ColumnList.js');
 var ColumnMenu = require('./column-menu/ColumnMenu.js');
 var useColumnActions = require('./column-menu/useColumnActions.js');
@@ -39,6 +40,7 @@ exports.BackgroundCellConfigurationEditor = BackgroundCellConfigurationEditor.Ba
 exports.DropdownCell = DropdownCell.DropdownCell;
 exports.LookupCell = LookupCell.LookupCell;
 exports.PctProgressCell = PctProgressCell.PctProgressCell;
+exports.IconButtonCell = IconButtonCell.IconButtonCell;
 exports.ColumnList = ColumnList.ColumnList;
 exports.classBase = ColumnList.classBase;
 exports.classBaseListItem = ColumnList.classBaseListItem;

package/cjs/index.js.map

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

package/cjs/table-provider/TableProvider.js

@@ -17,14 +17,16 @@ const TableContext = react.createContext({
 const TableProvider = ({
   children,
   dataSource,
-  menuActionHandler
+  menuActionHandler,
+  rowActionHandlers
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TableContext.Provider,
     {
       value: {
         dataSource,
-        menuActionHandler
+        menuActionHandler,
+        rowActionHandlers
       },
       children
     }
@@ -41,8 +43,19 @@ function useTableContext(throwIfNoDataSource = false) {
     };
   }
 }
+const useRowAction = (actionId) => {
+  const { rowActionHandlers } = react.useContext(TableContext);
+  if (rowActionHandlers?.[actionId]) {
+    return rowActionHandlers[actionId];
+  } else {
+    throw Error(
+      `[TableProvider] useRowAction, no action configured #${actionId}`
+    );
+  }
+};
 
 exports.TableContext = TableContext;
 exports.TableProvider = TableProvider;
+exports.useRowAction = useRowAction;
 exports.useTableContext = useTableContext;
 //# sourceMappingURL=TableProvider.js.map

package/cjs/table-provider/TableProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableProvider.js","sources":["../../../../packages/vuu-table-extras/src/table-provider/TableProvider.tsx"],"sourcesContent":["import { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactNode, useContext } from \"react\";\nimport { ColumnMenuActionType } from \"../column-menu/column-menu-utils\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport interface TableContextProps {\n  dataSource: DataSource;\n  menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n}\n\nconst NullMenuActionHandler = (menuItemId: string) => {\n  console.log(\n    `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`,\n  );\n  return false;\n};\nconst NullDataSource = {} as DataSource;\n\nexport const TableContext = createContext<TableContextProps>({\n  dataSource: NullDataSource,\n  menuActionHandler: NullMenuActionHandler,\n});\n\nexport const TableProvider = ({\n  children,\n  dataSource,\n  menuActionHandler,\n}: TableContextProps & {\n  children: ReactNode;\n}) => {\n  return (\n    <TableContext.Provider\n      value={{\n        dataSource,\n        menuActionHandler,\n      }}\n    >\n      {children}\n    </TableContext.Provider>\n  );\n};\n\nexport function useTableContext(throwIfNoDataSource = false) {\n  const { dataSource, menuActionHandler } = useContext(TableContext);\n  if (\n    dataSource === NullDataSource &&\n    menuActionHandler == NullMenuActionHandler &&\n    throwIfNoDataSource\n  ) {\n    throw Error(`[TableProvider] no DataSourceProvider has been declared`);\n  } else {\n    return {\n      dataSource,\n      menuActionHandler,\n    };\n  }\n}\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAWA,MAAM,qBAAA,GAAwB,CAAC,UAAuB,KAAA;AACpD,EAAQ,OAAA,CAAA,GAAA;AAAA,IACN,iFAAiF,UAAU,CAAA,CAAA;AAAA,GAC7F;AACA,EAAO,OAAA,KAAA;AACT,CAAA;AACA,MAAM,iBAAiB,EAAC;AAEjB,MAAM,eAAeA,mBAAiC,CAAA;AAAA,EAC3D,UAAY,EAAA,cAAA;AAAA,EACZ,iBAAmB,EAAA;AACrB,CAAC;AAEM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAEM,KAAA;AACJ,EACE,uBAAAC,cAAA;AAAA,IAAC,YAAa,CAAA,QAAA;AAAA,IAAb;AAAA,MACC,KAAO,EAAA;AAAA,QACL,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEgB,SAAA,eAAA,CAAgB,sBAAsB,KAAO,EAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAIC,iBAAW,YAAY,CAAA;AACjE,EAAA,IACE,UAAe,KAAA,cAAA,IACf,iBAAqB,IAAA,qBAAA,IACrB,mBACA,EAAA;AACA,IAAA,MAAM,MAAM,CAAyD,uDAAA,CAAA,CAAA;AAAA,GAChE,MAAA;AACL,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA;AAAA,KACF;AAAA;AAEJ;;;;;;"}
+{"version":3,"file":"TableProvider.js","sources":["../../../../packages/vuu-table-extras/src/table-provider/TableProvider.tsx"],"sourcesContent":["import type { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport type { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport type { TableProps } from \"@vuu-ui/vuu-table\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { createContext, ReactNode, useContext } from \"react\";\nimport type { ColumnMenuActionType } from \"../column-menu/column-menu-utils\";\n\nexport interface TableContextProps\n  extends Pick<TableProps, \"dataSource\" | \"rowActionHandlers\"> {\n  menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n}\n\nconst NullMenuActionHandler = (menuItemId: string) => {\n  console.log(\n    `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`,\n  );\n  return false;\n};\nconst NullDataSource = {} as DataSource;\n\nexport const TableContext = createContext<TableContextProps>({\n  dataSource: NullDataSource,\n  menuActionHandler: NullMenuActionHandler,\n});\n\nexport const TableProvider = ({\n  children,\n  dataSource,\n  menuActionHandler,\n  rowActionHandlers,\n}: TableContextProps & {\n  children: ReactNode;\n}) => {\n  return (\n    <TableContext.Provider\n      value={{\n        dataSource,\n        menuActionHandler,\n        rowActionHandlers,\n      }}\n    >\n      {children}\n    </TableContext.Provider>\n  );\n};\n\nexport function useTableContext(throwIfNoDataSource = false) {\n  const { dataSource, menuActionHandler } = useContext(TableContext);\n  if (\n    dataSource === NullDataSource &&\n    menuActionHandler == NullMenuActionHandler &&\n    throwIfNoDataSource\n  ) {\n    throw Error(`[TableProvider] no DataSourceProvider has been declared`);\n  } else {\n    return {\n      dataSource,\n      menuActionHandler,\n    };\n  }\n}\n\nexport const useRowAction = (actionId: string) => {\n  const { rowActionHandlers } = useContext(TableContext);\n  if (rowActionHandlers?.[actionId]) {\n    return rowActionHandlers[actionId];\n  } else {\n    throw Error(\n      `[TableProvider] useRowAction, no action configured #${actionId}`,\n    );\n  }\n};\n"],"names":["createContext","jsx","useContext"],"mappings":";;;;;AAYA,MAAM,qBAAA,GAAwB,CAAC,UAAuB,KAAA;AACpD,EAAQ,OAAA,CAAA,GAAA;AAAA,IACN,iFAAiF,UAAU,CAAA,CAAA;AAAA,GAC7F;AACA,EAAO,OAAA,KAAA;AACT,CAAA;AACA,MAAM,iBAAiB,EAAC;AAEjB,MAAM,eAAeA,mBAAiC,CAAA;AAAA,EAC3D,UAAY,EAAA,cAAA;AAAA,EACZ,iBAAmB,EAAA;AACrB,CAAC;AAEM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAEM,KAAA;AACJ,EACE,uBAAAC,cAAA;AAAA,IAAC,YAAa,CAAA,QAAA;AAAA,IAAb;AAAA,MACC,KAAO,EAAA;AAAA,QACL,UAAA;AAAA,QACA,iBAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEgB,SAAA,eAAA,CAAgB,sBAAsB,KAAO,EAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAIC,iBAAW,YAAY,CAAA;AACjE,EAAA,IACE,UAAe,KAAA,cAAA,IACf,iBAAqB,IAAA,qBAAA,IACrB,mBACA,EAAA;AACA,IAAA,MAAM,MAAM,CAAyD,uDAAA,CAAA,CAAA;AAAA,GAChE,MAAA;AACL,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA;AAAA,KACF;AAAA;AAEJ;AAEa,MAAA,YAAA,GAAe,CAAC,QAAqB,KAAA;AAChD,EAAA,MAAM,EAAE,iBAAA,EAAsB,GAAAA,gBAAA,CAAW,YAAY,CAAA;AACrD,EAAI,IAAA,iBAAA,GAAoB,QAAQ,CAAG,EAAA;AACjC,IAAA,OAAO,kBAAkB,QAAQ,CAAA;AAAA,GAC5B,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,uDAAuD,QAAQ,CAAA;AAAA,KACjE;AAAA;AAEJ;;;;;;;"}

package/esm/cell-renderers/button-cell/IconButtonCell.css.js

@@ -0,0 +1,4 @@
+var iconButtonCellCss = "\n.vuuTableCell:has(.vuuIconButtonCell){\n    padding: 0;\n    position: relative;\n}\n\n.vuuIconButtonCell {\n    align-items: center;\n    display: inline-flex;\n    justify-content: center;\n    padding: 0;\n    font-weight: 500;\n    position: relative;\n    height: 100%;\n    --saltButton-height: 100%;\n    --saltButton-minWidth: 100%;\n    --saltButton-padding: 0;\n    --saltButton-width: 100%;\n}\n";
+
+export { iconButtonCellCss as default };
+//# sourceMappingURL=IconButtonCell.css.js.map

package/esm/cell-renderers/button-cell/IconButtonCell.css.js.map

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

package/esm/cell-renderers/button-cell/IconButtonCell.js

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import iconButtonCellCss from './IconButtonCell.css.js';
+import { useRowAction } from '../../table-provider/TableProvider.js';
+import { Button } from '@salt-ds/core';
+
+const classBase = "vuuIconButtonCell";
+const IconButtonCell = ({ column, row }) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-dropdown-cell",
+    css: iconButtonCellCss,
+    window: targetWindow
+  });
+  const actionHandler = useRowAction(column.name);
+  const handleClick = useCallback(
+    (evt) => {
+      evt.stopPropagation();
+      actionHandler(column.name, row);
+    },
+    [actionHandler, column, row]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "transparent",
+      className: classBase,
+      "data-embedded": true,
+      "data-icon": true,
+      onClick: handleClick
+    }
+  );
+};
+
+export { IconButtonCell };
+//# sourceMappingURL=IconButtonCell.js.map

package/esm/cell-renderers/button-cell/IconButtonCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/button-cell/IconButtonCell.tsx"],"sourcesContent":["import { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport { MouseEventHandler, useCallback } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport iconButtonCellCss from \"./IconButtonCell.css\";\nimport { useRowAction } from \"../../table-provider/TableProvider\";\nimport { Button } from \"@salt-ds/core\";\n\nconst classBase = \"vuuIconButtonCell\";\n\n/**\n * To assign an icon to the cell, give the columndescriptor\n * a className. In css, assign an icon variable to --vuu-svg-icon.\n */\nexport const IconButtonCell = ({ column, row }: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dropdown-cell\",\n    css: iconButtonCellCss,\n    window: targetWindow,\n  });\n\n  const actionHandler = useRowAction(column.name);\n  const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (evt) => {\n      evt.stopPropagation();\n      actionHandler(column.name, row);\n    },\n    [actionHandler, column, row],\n  );\n\n  return (\n    <Button\n      appearance=\"transparent\"\n      className={classBase}\n      data-embedded\n      data-icon\n      onClick={handleClick}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,SAAY,GAAA,mBAAA;AAMX,MAAM,cAAiB,GAAA,CAAC,EAAE,MAAA,EAAQ,KAAkC,KAAA;AACzE,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,aAAA,GAAgB,YAAa,CAAA,MAAA,CAAO,IAAI,CAAA;AAC9C,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,GAAA,CAAI,eAAgB,EAAA;AACpB,MAAc,aAAA,CAAA,MAAA,CAAO,MAAM,GAAG,CAAA;AAAA,KAChC;AAAA,IACA,CAAC,aAAe,EAAA,MAAA,EAAQ,GAAG;AAAA,GAC7B;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,aAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,eAAa,EAAA,IAAA;AAAA,MACb,WAAS,EAAA,IAAA;AAAA,MACT,OAAS,EAAA;AAAA;AAAA,GACX;AAEJ;;;;"}

package/esm/index.js

@@ -6,6 +6,7 @@ export { DropdownCell } from './cell-renderers/dropdown-cell/DropdownCell.js';
 export { LookupCell } from './cell-renderers/lookup-cell/LookupCell.js';
 export { PctProgressCell } from './cell-renderers/pct-progress-cell/PctProgressCell.js';
 import './cell-renderers/progress-cell/ProgressCell.js';
+export { IconButtonCell } from './cell-renderers/button-cell/IconButtonCell.js';
 export { ColumnList, classBase, classBaseListItem } from './column-list/ColumnList.js';
 export { ColumnMenu } from './column-menu/ColumnMenu.js';
 export { useColumnActions } from './column-menu/useColumnActions.js';

package/esm/index.js.map

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

package/esm/table-provider/TableProvider.js

@@ -15,14 +15,16 @@ const TableContext = createContext({
 const TableProvider = ({
   children,
   dataSource,
-  menuActionHandler
+  menuActionHandler,
+  rowActionHandlers
 }) => {
   return /* @__PURE__ */ jsx(
     TableContext.Provider,
     {
       value: {
         dataSource,
-        menuActionHandler
+        menuActionHandler,
+        rowActionHandlers
       },
       children
     }
@@ -39,6 +41,16 @@ function useTableContext(throwIfNoDataSource = false) {
     };
   }
 }
+const useRowAction = (actionId) => {
+  const { rowActionHandlers } = useContext(TableContext);
+  if (rowActionHandlers?.[actionId]) {
+    return rowActionHandlers[actionId];
+  } else {
+    throw Error(
+      `[TableProvider] useRowAction, no action configured #${actionId}`
+    );
+  }
+};
 
-export { TableContext, TableProvider, useTableContext };
+export { TableContext, TableProvider, useRowAction, useTableContext };
 //# sourceMappingURL=TableProvider.js.map

package/esm/table-provider/TableProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableProvider.js","sources":["../../../../packages/vuu-table-extras/src/table-provider/TableProvider.tsx"],"sourcesContent":["import { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { createContext, ReactNode, useContext } from \"react\";\nimport { ColumnMenuActionType } from \"../column-menu/column-menu-utils\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport interface TableContextProps {\n  dataSource: DataSource;\n  menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n}\n\nconst NullMenuActionHandler = (menuItemId: string) => {\n  console.log(\n    `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`,\n  );\n  return false;\n};\nconst NullDataSource = {} as DataSource;\n\nexport const TableContext = createContext<TableContextProps>({\n  dataSource: NullDataSource,\n  menuActionHandler: NullMenuActionHandler,\n});\n\nexport const TableProvider = ({\n  children,\n  dataSource,\n  menuActionHandler,\n}: TableContextProps & {\n  children: ReactNode;\n}) => {\n  return (\n    <TableContext.Provider\n      value={{\n        dataSource,\n        menuActionHandler,\n      }}\n    >\n      {children}\n    </TableContext.Provider>\n  );\n};\n\nexport function useTableContext(throwIfNoDataSource = false) {\n  const { dataSource, menuActionHandler } = useContext(TableContext);\n  if (\n    dataSource === NullDataSource &&\n    menuActionHandler == NullMenuActionHandler &&\n    throwIfNoDataSource\n  ) {\n    throw Error(`[TableProvider] no DataSourceProvider has been declared`);\n  } else {\n    return {\n      dataSource,\n      menuActionHandler,\n    };\n  }\n}\n"],"names":[],"mappings":";;;AAWA,MAAM,qBAAA,GAAwB,CAAC,UAAuB,KAAA;AACpD,EAAQ,OAAA,CAAA,GAAA;AAAA,IACN,iFAAiF,UAAU,CAAA,CAAA;AAAA,GAC7F;AACA,EAAO,OAAA,KAAA;AACT,CAAA;AACA,MAAM,iBAAiB,EAAC;AAEjB,MAAM,eAAe,aAAiC,CAAA;AAAA,EAC3D,UAAY,EAAA,cAAA;AAAA,EACZ,iBAAmB,EAAA;AACrB,CAAC;AAEM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAEM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,YAAa,CAAA,QAAA;AAAA,IAAb;AAAA,MACC,KAAO,EAAA;AAAA,QACL,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEgB,SAAA,eAAA,CAAgB,sBAAsB,KAAO,EAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAI,WAAW,YAAY,CAAA;AACjE,EAAA,IACE,UAAe,KAAA,cAAA,IACf,iBAAqB,IAAA,qBAAA,IACrB,mBACA,EAAA;AACA,IAAA,MAAM,MAAM,CAAyD,uDAAA,CAAA,CAAA;AAAA,GAChE,MAAA;AACL,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA;AAAA,KACF;AAAA;AAEJ;;;;"}
+{"version":3,"file":"TableProvider.js","sources":["../../../../packages/vuu-table-extras/src/table-provider/TableProvider.tsx"],"sourcesContent":["import type { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport type { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport type { TableProps } from \"@vuu-ui/vuu-table\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { createContext, ReactNode, useContext } from \"react\";\nimport type { ColumnMenuActionType } from \"../column-menu/column-menu-utils\";\n\nexport interface TableContextProps\n  extends Pick<TableProps, \"dataSource\" | \"rowActionHandlers\"> {\n  menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;\n}\n\nconst NullMenuActionHandler = (menuItemId: string) => {\n  console.log(\n    `[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`,\n  );\n  return false;\n};\nconst NullDataSource = {} as DataSource;\n\nexport const TableContext = createContext<TableContextProps>({\n  dataSource: NullDataSource,\n  menuActionHandler: NullMenuActionHandler,\n});\n\nexport const TableProvider = ({\n  children,\n  dataSource,\n  menuActionHandler,\n  rowActionHandlers,\n}: TableContextProps & {\n  children: ReactNode;\n}) => {\n  return (\n    <TableContext.Provider\n      value={{\n        dataSource,\n        menuActionHandler,\n        rowActionHandlers,\n      }}\n    >\n      {children}\n    </TableContext.Provider>\n  );\n};\n\nexport function useTableContext(throwIfNoDataSource = false) {\n  const { dataSource, menuActionHandler } = useContext(TableContext);\n  if (\n    dataSource === NullDataSource &&\n    menuActionHandler == NullMenuActionHandler &&\n    throwIfNoDataSource\n  ) {\n    throw Error(`[TableProvider] no DataSourceProvider has been declared`);\n  } else {\n    return {\n      dataSource,\n      menuActionHandler,\n    };\n  }\n}\n\nexport const useRowAction = (actionId: string) => {\n  const { rowActionHandlers } = useContext(TableContext);\n  if (rowActionHandlers?.[actionId]) {\n    return rowActionHandlers[actionId];\n  } else {\n    throw Error(\n      `[TableProvider] useRowAction, no action configured #${actionId}`,\n    );\n  }\n};\n"],"names":[],"mappings":";;;AAYA,MAAM,qBAAA,GAAwB,CAAC,UAAuB,KAAA;AACpD,EAAQ,OAAA,CAAA,GAAA;AAAA,IACN,iFAAiF,UAAU,CAAA,CAAA;AAAA,GAC7F;AACA,EAAO,OAAA,KAAA;AACT,CAAA;AACA,MAAM,iBAAiB,EAAC;AAEjB,MAAM,eAAe,aAAiC,CAAA;AAAA,EAC3D,UAAY,EAAA,cAAA;AAAA,EACZ,iBAAmB,EAAA;AACrB,CAAC;AAEM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAEM,KAAA;AACJ,EACE,uBAAA,GAAA;AAAA,IAAC,YAAa,CAAA,QAAA;AAAA,IAAb;AAAA,MACC,KAAO,EAAA;AAAA,QACL,UAAA;AAAA,QACA,iBAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEgB,SAAA,eAAA,CAAgB,sBAAsB,KAAO,EAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAI,WAAW,YAAY,CAAA;AACjE,EAAA,IACE,UAAe,KAAA,cAAA,IACf,iBAAqB,IAAA,qBAAA,IACrB,mBACA,EAAA;AACA,IAAA,MAAM,MAAM,CAAyD,uDAAA,CAAA,CAAA;AAAA,GAChE,MAAA;AACL,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA;AAAA,KACF;AAAA;AAEJ;AAEa,MAAA,YAAA,GAAe,CAAC,QAAqB,KAAA;AAChD,EAAA,MAAM,EAAE,iBAAA,EAAsB,GAAA,UAAA,CAAW,YAAY,CAAA;AACrD,EAAI,IAAA,iBAAA,GAAoB,QAAQ,CAAG,EAAA;AACjC,IAAA,OAAO,kBAAkB,QAAQ,CAAA;AAAA,GAC5B,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,uDAAuD,QAAQ,CAAA;AAAA,KACjE;AAAA;AAEJ;;;;"}

package/package.json

@@ -1,20 +1,20 @@
 {
-  "version": "0.13.34",
+  "version": "0.13.35",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.13.34",
-    "@vuu-ui/vuu-protocol-types": "0.13.34"
+    "@vuu-ui/vuu-filter-types": "0.13.35",
+    "@vuu-ui/vuu-protocol-types": "0.13.35"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.13.34",
-    "@vuu-ui/vuu-data-react": "0.13.34",
-    "@vuu-ui/vuu-data-types": "0.13.34",
-    "@vuu-ui/vuu-table-types": "0.13.34",
-    "@vuu-ui/vuu-popups": "0.13.34",
-    "@vuu-ui/vuu-table": "0.13.34",
-    "@vuu-ui/vuu-utils": "0.13.34",
-    "@vuu-ui/vuu-ui-controls": "0.13.34",
+    "@vuu-ui/vuu-codemirror": "0.13.35",
+    "@vuu-ui/vuu-data-react": "0.13.35",
+    "@vuu-ui/vuu-data-types": "0.13.35",
+    "@vuu-ui/vuu-table-types": "0.13.35",
+    "@vuu-ui/vuu-popups": "0.13.35",
+    "@vuu-ui/vuu-table": "0.13.35",
+    "@vuu-ui/vuu-utils": "0.13.35",
+    "@vuu-ui/vuu-ui-controls": "0.13.35",
     "@lezer/lr": "1.4.2",
     "@salt-ds/core": "1.43.0",
     "@salt-ds/styles": "0.2.1",

package/types/cell-renderers/button-cell/IconButtonCell.d.ts

@@ -0,0 +1,6 @@
+import { TableCellRendererProps } from "@vuu-ui/vuu-table-types";
+/**
+ * To assign an icon to the cell, give the columndescriptor
+ * a className. In css, assign an icon variable to --vuu-svg-icon.
+ */
+export declare const IconButtonCell: ({ column, row }: TableCellRendererProps) => import("react/jsx-runtime").JSX.Element;

package/types/cell-renderers/index.d.ts

@@ -3,3 +3,4 @@ export * from "./dropdown-cell";
 export * from "./lookup-cell";
 export * from "./pct-progress-cell";
 export * from "./progress-cell";
+export { IconButtonCell } from "./button-cell/IconButtonCell";

package/types/table-provider/TableProvider.d.ts

@@ -1,17 +1,18 @@
-import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
-import { DataSource } from "@vuu-ui/vuu-data-types";
+import type { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
+import type { DataSource } from "@vuu-ui/vuu-data-types";
+import type { TableProps } from "@vuu-ui/vuu-table";
+import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { ReactNode } from "react";
-import { ColumnMenuActionType } from "../column-menu/column-menu-utils";
-import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-export interface TableContextProps {
-    dataSource: DataSource;
+import type { ColumnMenuActionType } from "../column-menu/column-menu-utils";
+export interface TableContextProps extends Pick<TableProps, "dataSource" | "rowActionHandlers"> {
     menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;
 }
 export declare const TableContext: import("react").Context<TableContextProps>;
-export declare const TableProvider: ({ children, dataSource, menuActionHandler, }: TableContextProps & {
+export declare const TableProvider: ({ children, dataSource, menuActionHandler, rowActionHandlers, }: TableContextProps & {
     children: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare function useTableContext(throwIfNoDataSource?: boolean): {
     dataSource: DataSource;
     menuActionHandler: MenuActionHandler<ColumnMenuActionType, ColumnDescriptor>;
 };
+export declare const useRowAction: (actionId: string) => import("@vuu-ui/vuu-table-types").RowActionHandler;