@vuu-ui/vuu-table 0.8.57 → 0.8.59

package/esm/Table.js

@@ -8,8 +8,9 @@ import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { forwardRef, useRef, useState } from 'react';
 import { RowProxy, Row } from './Row.js';
+import './table-header/HeaderProvider.js';
 import { TableHeader } from './table-header/TableHeader.js';
-import { useRowHeight } from './useRowHeight.js';
+import { useMeasuredHeight } from './useMeasuredHeight.js';
 import { useTable } from './useTable.js';
 import tableCss from './Table.css.js';
 
@@ -21,6 +22,7 @@ const TableCore = ({
   availableColumns,
   config,
   containerRef,
+  customHeader,
   dataSource,
   disableFocus = false,
   highlightedIndex: highlightedIndexProp,
@@ -41,7 +43,6 @@ const TableCore = ({
   selectionModel = "extended",
   showColumnHeaders = true,
   showColumnHeaderMenus = true,
-  headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,
   size
 }) => {
   const id = useId(idProp);
@@ -52,10 +53,12 @@ const TableCore = ({
     draggableRow,
     getRowOffset,
     handleContextMenuAction,
+    headerHeight,
     headings,
     highlightedIndex,
     menuBuilder,
     onDataEdited,
+    onHeaderHeightMeasured,
     onMoveColumn,
     onMoveGroupColumn,
     onRemoveGroupColumn,
@@ -76,7 +79,6 @@ const TableCore = ({
     containerRef,
     dataSource,
     disableFocus,
-    headerHeight,
     highlightedIndex: highlightedIndexProp,
     id,
     navigationStyle,
@@ -106,9 +108,8 @@ const TableCore = ({
     "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
     "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
     "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
-    "--header-height": `${headerHeight}px`,
     "--row-height-prop": `${rowHeight}px`,
-    "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
+    "--total-header-height": `${headerHeight}px`,
     "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
     "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
   };
@@ -145,7 +146,9 @@ const TableCore = ({
                     TableHeader,
                     {
                       columns: scrollProps.columnsWithinViewport,
+                      customHeader,
                       headings,
+                      onHeightMeasured: onHeaderHeightMeasured,
                       onMoveColumn,
                       onMoveGroupColumn,
                       onRemoveGroupColumn,
@@ -157,7 +160,7 @@ const TableCore = ({
                       virtualColSpan: scrollProps.virtualColSpan
                     }
                   ) : null,
-                  /* @__PURE__ */ jsx("div", { className: `${classBase}-body`, children: data.map((data2) => /* @__PURE__ */ jsx(
+                  showColumnHeaders === false || headerHeight > 0 ? /* @__PURE__ */ jsx("div", { className: `${classBase}-body`, children: data.map((data2) => /* @__PURE__ */ jsx(
                     Row$1,
                     {
                       "aria-rowindex": data2[0] + 1,
@@ -174,7 +177,7 @@ const TableCore = ({
                       zebraStripes: tableAttributes.zebraStripes
                     },
                     data2[RENDER_IDX]
-                  )) })
+                  )) }) : null
                 ]
               }
             )
@@ -185,12 +188,13 @@ const TableCore = ({
     }
   );
 };
-const Table = forwardRef(function TableNext({
+const Table = forwardRef(function Table2({
   Row,
   allowDragDrop,
   availableColumns,
   className: classNameProp,
   config,
+  customHeader,
   dataSource,
   disableFocus,
   highlightedIndex,
@@ -211,7 +215,6 @@ const Table = forwardRef(function TableNext({
   selectionModel,
   showColumnHeaders,
   showColumnHeaderMenus,
-  headerHeight,
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
@@ -223,7 +226,7 @@ const Table = forwardRef(function TableNext({
   });
   const containerRef = useRef(null);
   const [size, setSize] = useState();
-  const { rowHeight, rowRef } = useRowHeight({ rowHeight: rowHeightProp });
+  const { rowHeight, rowRef } = useMeasuredHeight({ height: rowHeightProp });
   if (config === void 0) {
     throw Error(
       "vuu Table requires config prop. Minimum config is list of Column Descriptors"
@@ -250,9 +253,9 @@ const Table = forwardRef(function TableNext({
             availableColumns,
             config,
             containerRef,
+            customHeader,
             dataSource,
             disableFocus,
-            headerHeight,
             highlightedIndex,
             id,
             navigationStyle,

package/esm/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n  DataSource,\n  SchemaColumn,\n  SelectionChangeHandler,\n  VuuFeatureInvocationMessage,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n  TableConfig,\n  TableConfigChangeHandler,\n  TableRowClickHandler,\n  TableRowSelectHandler,\n  TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragStartHandler,\n  dragStrategy,\n  MeasuredContainer,\n  MeasuredContainerProps,\n  MeasuredSize,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  FC,\n  ForwardedRef,\n  forwardRef,\n  RefObject,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProps, RowProxy } from \"./Row\";\nimport { TableHeader } from \"./table-header/TableHeader\";\nimport { useRowHeight } from \"./useRowHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\n\nimport tableCss from \"./Table.css\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n  extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n  Row?: FC<RowProps>;\n  allowConfigEditing?: boolean;\n  allowDragDrop?: boolean | dragStrategy;\n  /**\n   * required if a fully featured column picker is to be available\n   */\n  availableColumns?: SchemaColumn[];\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n  disableFocus?: boolean;\n  /**\n   * Pixel height of headers. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes. Default value is 125% of\n   * rowHeight, whether set vis rowHeight prop or CSS.\n   */\n  headerHeight?: number;\n  /**\n   * Defined how focus navigation within data cells will be handled by table.\n   * Default is cell.\n   */\n  highlightedIndex?: number;\n  navigationStyle?: TableNavigationStyle;\n  /**\n   * required if a fully featured column picker is to be available.\n   * Available columns can be changed by the addition or removal of\n   * one or more calculated columns.\n   */\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  /**\n   * This callback will be invoked any time a config attribute of TableConfig\n   * is changed. By persisting this value and providing it to the Table as a\n   * prop, table state can be persisted across sessions.\n   */\n  onConfigChange?: TableConfigChangeHandler;\n  onDragStart?: DragStartHandler;\n  onDrop?: (dragDropState: DragDropState) => void;\n  /**\n   * When a Vuu feature e.g. context menu action, has been invoked, the Vuu server\n   * response must be handled. This callback provides that response.\n   */\n  onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;\n\n  onHighlight?: (idx: number) => void;\n  /**\n   * callback invoked when user 'clicks' a table row. CLick triggered either\n   * via mouse click or keyboard (default ENTER);\n   */\n  onRowClick?: TableRowClickHandler;\n  onSelect?: TableRowSelectHandler;\n  onSelectionChange?: SelectionChangeHandler;\n  renderBufferSize?: number;\n  /**\n   * Pixel height of rows. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  rowHeight?: number;\n  /**\n   * imperative API for scrolling table\n   */\n  scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n  /**\n   * Selection Bookends style the left and right edge of a selection block.\n   * They are optional, value defaults to zero.\n   * TODO this should just live in CSS\n   */\n  selectionBookendWidth?: number;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `extended` (default) multiple rows can be selected\n   * `checkbox` same behaviour as extended, with checkbox column for selection\n   */\n  selectionModel?: TableSelectionModel;\n  /**\n   * if false, table rendered without headers. Useful when table is being included in a\n   * composite component.\n   */\n  showColumnHeaders?: boolean;\n  /**\n   * if false, column headers will not display menu icon. Menu items are still available\n   * from contexct menu\n   */\n  showColumnHeaderMenus?: boolean;\n}\n\nconst TableCore = ({\n  Row = DefaultRow,\n  allowDragDrop,\n  availableColumns,\n  config,\n  containerRef,\n  dataSource,\n  disableFocus = false,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  navigationStyle = \"cell\",\n  onAvailableColumnsChange,\n  onConfigChange,\n  onDragStart,\n  onDrop,\n  onFeatureInvocation,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectionChange,\n  renderBufferSize = 5,\n  rowHeight,\n  scrollingApiRef,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  headerHeight = showColumnHeaders ? rowHeight * 1.25 : 0,\n  size,\n}: Omit<TableProps, \"rowHeight\"> & {\n  containerRef: RefObject<HTMLDivElement>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    columnMap,\n    columns,\n    data,\n    draggableRow,\n    getRowOffset,\n    handleContextMenuAction,\n    headings,\n    highlightedIndex,\n    menuBuilder,\n    onDataEdited,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onRowClick,\n    onSortColumn,\n    onToggleGroup,\n    rowClassNameGenerator,\n    scrollProps,\n    tableAttributes,\n    tableConfig,\n    viewportMeasurements,\n    ...tableProps\n  } = useTable({\n    allowDragDrop,\n    availableColumns,\n    config,\n    containerRef,\n    dataSource,\n    disableFocus,\n    headerHeight,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDragStart,\n    onDrop,\n    onFeatureInvocation,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectionChange,\n    renderBufferSize: Math.max(5, renderBufferSize),\n    rowHeight,\n    scrollingApiRef,\n    selectionModel,\n    size,\n  });\n\n  const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n    [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n    [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n    [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n  });\n\n  const cssVariables = {\n    \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n    \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n    \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n    \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n    \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n    \"--header-height\": `${headerHeight}px`,\n    \"--row-height-prop\": `${rowHeight}px`,\n    \"--total-header-height\": `${viewportMeasurements.totalHeaderHeight}px`,\n    \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n    \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n  } as CSSProperties;\n\n  return (\n    <ContextMenuProvider\n      menuActionHandler={handleContextMenuAction}\n      menuBuilder={menuBuilder}\n    >\n      <div\n        className={`${classBase}-scrollbarContainer`}\n        ref={scrollProps.scrollbarContainerRef}\n        style={cssVariables}\n      >\n        <div className={`${classBase}-scrollbarContent`} />\n      </div>\n      <div\n        className={contentContainerClassName}\n        ref={scrollProps.contentContainerRef}\n        style={cssVariables}\n      >\n        <div\n          {...tableProps}\n          className={`${classBase}-table`}\n          role=\"table\"\n          tabIndex={disableFocus ? undefined : -1}\n        >\n          {showColumnHeaders ? (\n            <TableHeader\n              columns={scrollProps.columnsWithinViewport}\n              headings={headings}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showColumnHeaderMenus={showColumnHeaderMenus}\n              tableConfig={tableConfig}\n              tableId={id}\n              virtualColSpan={scrollProps.virtualColSpan}\n            />\n          ) : null}\n          <div className={`${classBase}-body`}>\n            {data.map((data) => (\n              <Row\n                aria-rowindex={data[0] + 1}\n                classNameGenerator={rowClassNameGenerator}\n                columnMap={columnMap}\n                columns={scrollProps.columnsWithinViewport}\n                highlighted={highlightedIndex === data[IDX]}\n                key={data[RENDER_IDX]}\n                onClick={onRowClick}\n                onDataEdited={onDataEdited}\n                row={data}\n                offset={getRowOffset(data)}\n                onToggleGroup={onToggleGroup}\n                virtualColSpan={scrollProps.virtualColSpan}\n                zebraStripes={tableAttributes.zebraStripes}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n      {draggableRow}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Table = forwardRef(function TableNext(\n  {\n    Row,\n    allowDragDrop,\n    availableColumns,\n    className: classNameProp,\n    config,\n    dataSource,\n    disableFocus,\n    highlightedIndex,\n    id,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDragStart,\n    onDrop,\n    onFeatureInvocation,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectionChange,\n    renderBufferSize,\n    rowHeight: rowHeightProp,\n    scrollingApiRef,\n    selectionModel,\n    showColumnHeaders,\n    showColumnHeaderMenus,\n    headerHeight,\n    style: styleProp,\n    ...htmlAttributes\n  }: TableProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table\",\n    css: tableCss,\n    window: targetWindow,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [size, setSize] = useState<MeasuredSize>();\n\n  const { rowHeight, rowRef } = useRowHeight({ rowHeight: rowHeightProp });\n\n  if (config === undefined) {\n    throw Error(\n      \"vuu Table requires config prop. Minimum config is list of Column Descriptors\"\n    );\n  }\n  if (dataSource === undefined) {\n    throw Error(\"vuu Table requires dataSource prop\");\n  }\n\n  return (\n    <MeasuredContainer\n      {...htmlAttributes}\n      className={cx(classBase, classNameProp)}\n      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n    >\n      <RowProxy ref={rowRef} height={rowHeightProp} />\n\n      {size && rowHeight ? (\n        <TableCore\n          Row={Row}\n          allowDragDrop={allowDragDrop}\n          availableColumns={availableColumns}\n          config={config}\n          containerRef={containerRef}\n          dataSource={dataSource}\n          disableFocus={disableFocus}\n          headerHeight={headerHeight}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDragStart={onDragStart}\n          onDrop={onDrop}\n          onFeatureInvocation={onFeatureInvocation}\n          onHighlight={onHighlight}\n          onRowClick={onRowClick}\n          onSelect={onSelect}\n          onSelectionChange={onSelectionChange}\n          renderBufferSize={renderBufferSize}\n          rowHeight={rowHeight}\n          scrollingApiRef={scrollingApiRef}\n          selectionModel={selectionModel}\n          showColumnHeaders={showColumnHeaders}\n          showColumnHeaderMenus={showColumnHeaderMenus}\n          size={size}\n        />\n      ) : null}\n    </MeasuredContainer>\n  );\n});\n"],"names":["Row","DefaultRow","data"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n  DataSource,\n  SchemaColumn,\n  SelectionChangeHandler,\n  VuuFeatureInvocationMessage,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n  CustomHeader,\n  RowProps,\n  TableConfig,\n  TableConfigChangeHandler,\n  TableRowClickHandler,\n  TableRowSelectHandler,\n  TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  DragStartHandler,\n  MeasuredContainer,\n  MeasuredContainerProps,\n  MeasuredSize,\n  dragStrategy,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  CSSProperties,\n  FC,\n  ForwardedRef,\n  RefObject,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProxy } from \"./Row\";\nimport { TableHeader } from \"./table-header\";\nimport { useMeasuredHeight } from \"./useMeasuredHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\n\nimport tableCss from \"./Table.css\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n  extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n  Row?: FC<RowProps>;\n  allowConfigEditing?: boolean;\n  allowDragDrop?: boolean | dragStrategy;\n  /**\n   * required if a fully featured column picker is to be available\n   */\n  availableColumns?: SchemaColumn[];\n  /**\n   * Provide configuration settings for Table. At minimun, column\n   * descriptors must be provided.\n   */\n  config: TableConfig;\n  dataSource: DataSource;\n  disableFocus?: boolean;\n  /**\n   * Allows additional custom element(s) to be embedded immediately below column headers.\n   * Could be used to present inline filters for example.\n   */\n  customHeader?: CustomHeader | CustomHeader[];\n  /**\n   * Defined how focus navigation within data cells will be handled by table.\n   * Default is cell.\n   */\n  highlightedIndex?: number;\n  navigationStyle?: TableNavigationStyle;\n  /**\n   * required if a fully featured column picker is to be available.\n   * Available columns can be changed by the addition or removal of\n   * one or more calculated columns.\n   */\n  onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n  /**\n   * This callback will be invoked any time a config attribute of TableConfig\n   * is changed. By persisting this value and providing it to the Table as a\n   * prop, table state can be persisted across sessions.\n   */\n  onConfigChange?: TableConfigChangeHandler;\n  onDragStart?: DragStartHandler;\n  onDrop?: (dragDropState: DragDropState) => void;\n  /**\n   * When a Vuu feature e.g. context menu action, has been invoked, the Vuu server\n   * response must be handled. This callback provides that response.\n   */\n  onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;\n\n  onHighlight?: (idx: number) => void;\n  /**\n   * callback invoked when user 'clicks' a table row. CLick triggered either\n   * via mouse click or keyboard (default ENTER);\n   */\n  onRowClick?: TableRowClickHandler;\n  onSelect?: TableRowSelectHandler;\n  onSelectionChange?: SelectionChangeHandler;\n  renderBufferSize?: number;\n  /**\n   * Pixel height of rows. If specified here, this will take precedence over CSS\n   * values and Table will not respond to density changes.\n   */\n  rowHeight?: number;\n  /**\n   * imperative API for scrolling table\n   */\n  scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n  /**\n   * Selection Bookends style the left and right edge of a selection block.\n   * They are optional, value defaults to zero.\n   * TODO this should just live in CSS\n   */\n  selectionBookendWidth?: number;\n  /**\n   * Selection behaviour for Table:\n   * `none` selection disabled\n   * `single` no more than one row may be selected\n   * `extended` (default) multiple rows can be selected\n   * `checkbox` same behaviour as extended, with checkbox column for selection\n   */\n  selectionModel?: TableSelectionModel;\n  /**\n   * if false, table rendered without headers. Useful when table is being included in a\n   * composite component.\n   */\n  showColumnHeaders?: boolean;\n  /**\n   * if false, column headers will not display menu icon. Menu items are still available\n   * from contexct menu\n   */\n  showColumnHeaderMenus?: boolean;\n}\n\nconst TableCore = ({\n  Row = DefaultRow,\n  allowDragDrop,\n  availableColumns,\n  config,\n  containerRef,\n  customHeader,\n  dataSource,\n  disableFocus = false,\n  highlightedIndex: highlightedIndexProp,\n  id: idProp,\n  navigationStyle = \"cell\",\n  onAvailableColumnsChange,\n  onConfigChange,\n  onDragStart,\n  onDrop,\n  onFeatureInvocation,\n  onHighlight,\n  onRowClick: onRowClickProp,\n  onSelect,\n  onSelectionChange,\n  renderBufferSize = 5,\n  rowHeight,\n  scrollingApiRef,\n  selectionModel = \"extended\",\n  showColumnHeaders = true,\n  showColumnHeaderMenus = true,\n  size,\n}: Omit<TableProps, \"rowHeight\"> & {\n  containerRef: RefObject<HTMLDivElement>;\n  rowHeight: number;\n  size: MeasuredSize;\n}) => {\n  const id = useId(idProp);\n  const {\n    columnMap,\n    columns,\n    data,\n    draggableRow,\n    getRowOffset,\n    handleContextMenuAction,\n    headerHeight,\n    headings,\n    highlightedIndex,\n    menuBuilder,\n    onDataEdited,\n    onHeaderHeightMeasured,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onRowClick,\n    onSortColumn,\n    onToggleGroup,\n    rowClassNameGenerator,\n    scrollProps,\n    tableAttributes,\n    tableConfig,\n    viewportMeasurements,\n    ...tableProps\n  } = useTable({\n    allowDragDrop,\n    availableColumns,\n    config,\n    containerRef,\n    dataSource,\n    disableFocus,\n    highlightedIndex: highlightedIndexProp,\n    id,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDragStart,\n    onDrop,\n    onFeatureInvocation,\n    onHighlight,\n    onRowClick: onRowClickProp,\n    onSelect,\n    onSelectionChange,\n    renderBufferSize: Math.max(5, renderBufferSize),\n    rowHeight,\n    scrollingApiRef,\n    selectionModel,\n    size,\n  });\n\n  const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n    [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n    [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n    [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n  });\n\n  //TODO move TableBody into separate component\n  // we only render TableBody when we have measured TableHeader\n\n  const cssVariables = {\n    \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n    \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n    \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n    \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n    \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n    \"--row-height-prop\": `${rowHeight}px`,\n    \"--total-header-height\": `${headerHeight}px`,\n    \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n    \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n  } as CSSProperties;\n\n  return (\n    <ContextMenuProvider\n      menuActionHandler={handleContextMenuAction}\n      menuBuilder={menuBuilder}\n    >\n      <div\n        className={`${classBase}-scrollbarContainer`}\n        ref={scrollProps.scrollbarContainerRef}\n        style={cssVariables}\n      >\n        <div className={`${classBase}-scrollbarContent`} />\n      </div>\n      <div\n        className={contentContainerClassName}\n        ref={scrollProps.contentContainerRef}\n        style={cssVariables}\n      >\n        <div\n          {...tableProps}\n          className={`${classBase}-table`}\n          role=\"table\"\n          tabIndex={disableFocus ? undefined : -1}\n        >\n          {showColumnHeaders ? (\n            <TableHeader\n              columns={scrollProps.columnsWithinViewport}\n              customHeader={customHeader}\n              headings={headings}\n              onHeightMeasured={onHeaderHeightMeasured}\n              onMoveColumn={onMoveColumn}\n              onMoveGroupColumn={onMoveGroupColumn}\n              onRemoveGroupColumn={onRemoveGroupColumn}\n              onResizeColumn={onResizeColumn}\n              onSortColumn={onSortColumn}\n              showColumnHeaderMenus={showColumnHeaderMenus}\n              tableConfig={tableConfig}\n              tableId={id}\n              virtualColSpan={scrollProps.virtualColSpan}\n            />\n          ) : null}\n          {showColumnHeaders === false || headerHeight > 0 ? (\n            <div className={`${classBase}-body`}>\n              {data.map((data) => (\n                <Row\n                  aria-rowindex={data[0] + 1}\n                  classNameGenerator={rowClassNameGenerator}\n                  columnMap={columnMap}\n                  columns={scrollProps.columnsWithinViewport}\n                  highlighted={highlightedIndex === data[IDX]}\n                  key={data[RENDER_IDX]}\n                  onClick={onRowClick}\n                  onDataEdited={onDataEdited}\n                  row={data}\n                  offset={getRowOffset(data)}\n                  onToggleGroup={onToggleGroup}\n                  virtualColSpan={scrollProps.virtualColSpan}\n                  zebraStripes={tableAttributes.zebraStripes}\n                />\n              ))}\n            </div>\n          ) : null}\n        </div>\n      </div>\n      {draggableRow}\n    </ContextMenuProvider>\n  );\n};\n\nexport const Table = forwardRef(function Table(\n  {\n    Row,\n    allowDragDrop,\n    availableColumns,\n    className: classNameProp,\n    config,\n    customHeader,\n    dataSource,\n    disableFocus,\n    highlightedIndex,\n    id,\n    navigationStyle,\n    onAvailableColumnsChange,\n    onConfigChange,\n    onDragStart,\n    onDrop,\n    onFeatureInvocation,\n    onHighlight,\n    onRowClick,\n    onSelect,\n    onSelectionChange,\n    renderBufferSize,\n    rowHeight: rowHeightProp,\n    scrollingApiRef,\n    selectionModel,\n    showColumnHeaders,\n    showColumnHeaderMenus,\n    style: styleProp,\n    ...htmlAttributes\n  }: TableProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table\",\n    css: tableCss,\n    window: targetWindow,\n  });\n\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const [size, setSize] = useState<MeasuredSize>();\n\n  const { rowHeight, rowRef } = useMeasuredHeight({ height: rowHeightProp });\n\n  if (config === undefined) {\n    throw Error(\n      \"vuu Table requires config prop. Minimum config is list of Column Descriptors\"\n    );\n  }\n  if (dataSource === undefined) {\n    throw Error(\"vuu Table requires dataSource prop\");\n  }\n\n  // TODO render TableHeader here and measure before row construction begins\n  // TODO we could have MeasuredContainer render a Provider and make size available via a context hook ?\n  return (\n    <MeasuredContainer\n      {...htmlAttributes}\n      className={cx(classBase, classNameProp)}\n      id={id}\n      onResize={setSize}\n      ref={useForkRef(containerRef, forwardedRef)}\n    >\n      <RowProxy ref={rowRef} height={rowHeightProp} />\n\n      {size && rowHeight ? (\n        <TableCore\n          Row={Row}\n          allowDragDrop={allowDragDrop}\n          availableColumns={availableColumns}\n          config={config}\n          containerRef={containerRef}\n          customHeader={customHeader}\n          dataSource={dataSource}\n          disableFocus={disableFocus}\n          highlightedIndex={highlightedIndex}\n          id={id}\n          navigationStyle={navigationStyle}\n          onAvailableColumnsChange={onAvailableColumnsChange}\n          onConfigChange={onConfigChange}\n          onDragStart={onDragStart}\n          onDrop={onDrop}\n          onFeatureInvocation={onFeatureInvocation}\n          onHighlight={onHighlight}\n          onRowClick={onRowClick}\n          onSelect={onSelect}\n          onSelectionChange={onSelectionChange}\n          renderBufferSize={renderBufferSize}\n          rowHeight={rowHeight}\n          scrollingApiRef={scrollingApiRef}\n          selectionModel={selectionModel}\n          showColumnHeaders={showColumnHeaders}\n          showColumnHeaderMenus={showColumnHeaderMenus}\n          size={size}\n        />\n      ) : null}\n    </MeasuredContainer>\n  );\n});\n"],"names":["Row","DefaultRow","data","Table"],"mappings":";;;;;;;;;;;;;;;;AA8CA,MAAM,SAAY,GAAA,UAAA,CAAA;AAElB,MAAM,EAAE,GAAK,EAAA,UAAA,EAAe,GAAA,YAAA,CAAA;AAgG5B,MAAM,YAAY,CAAC;AAAA,OACjBA,KAAM,GAAAC,GAAA;AAAA,EACN,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAe,GAAA,KAAA;AAAA,EACf,gBAAkB,EAAA,oBAAA;AAAA,EAClB,EAAI,EAAA,MAAA;AAAA,EACJ,eAAkB,GAAA,MAAA;AAAA,EAClB,wBAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAmB,GAAA,CAAA;AAAA,EACnB,SAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAiB,GAAA,UAAA;AAAA,EACjB,iBAAoB,GAAA,IAAA;AAAA,EACpB,qBAAwB,GAAA,IAAA;AAAA,EACxB,IAAA;AACF,CAIM,KAAA;AACJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,uBAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,sBAAA;AAAA,IACA,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,oBAAA;AAAA,IACA,GAAG,UAAA;AAAA,MACD,QAAS,CAAA;AAAA,IACX,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAkB,EAAA,oBAAA;AAAA,IAClB,EAAA;AAAA,IACA,eAAA;AAAA,IACA,wBAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAkB,EAAA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,gBAAgB,CAAA;AAAA,IAC9C,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,IAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,yBAA4B,GAAA,EAAA,CAAG,CAAG,EAAA,SAAS,CAAqB,iBAAA,CAAA,EAAA;AAAA,IACpE,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAgB,CAAA,gBAAA;AAAA,IAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,eAAgB,CAAA,aAAA;AAAA,IAC3C,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,eAAgB,CAAA,YAAA;AAAA,GACzC,CAAA,CAAA;AAKD,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB,kBAAA,EAAoB,CAAG,EAAA,oBAAA,CAAqB,aAAa,CAAA,EAAA,CAAA;AAAA,IACzD,iBAAA,EAAmB,CAAG,EAAA,oBAAA,CAAqB,YAAY,CAAA,EAAA,CAAA;AAAA,IACvD,+BAAA,EAAiC,CAAG,EAAA,oBAAA,CAAqB,yBAAyB,CAAA,EAAA,CAAA;AAAA,IAClF,qBAAA,EAAuB,CAAG,EAAA,oBAAA,CAAqB,eAAe,CAAA,EAAA,CAAA;AAAA,IAC9D,sBAAA,EAAwB,CAAG,EAAA,oBAAA,CAAqB,gBAAgB,CAAA,EAAA,CAAA;AAAA,IAChE,mBAAA,EAAqB,GAAG,SAAS,CAAA,EAAA,CAAA;AAAA,IACjC,uBAAA,EAAyB,GAAG,YAAY,CAAA,EAAA,CAAA;AAAA,IACxC,4BAAA,EAA8B,CAAG,EAAA,oBAAA,CAAqB,sBAAsB,CAAA,EAAA,CAAA;AAAA,IAC5E,wBAAA,EAA0B,CAAG,EAAA,oBAAA,CAAqB,kBAAkB,CAAA,EAAA,CAAA;AAAA,GACtE,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,iBAAmB,EAAA,uBAAA;AAAA,MACnB,WAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,mBAAA,CAAA;AAAA,YACvB,KAAK,WAAY,CAAA,qBAAA;AAAA,YACjB,KAAO,EAAA,YAAA;AAAA,YAEP,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAqB,iBAAA,CAAA,EAAA,CAAA;AAAA,WAAA;AAAA,SACnD;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,yBAAA;AAAA,YACX,KAAK,WAAY,CAAA,mBAAA;AAAA,YACjB,KAAO,EAAA,YAAA;AAAA,YAEP,QAAA,kBAAA,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACE,GAAG,UAAA;AAAA,gBACJ,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,gBACvB,IAAK,EAAA,OAAA;AAAA,gBACL,QAAA,EAAU,eAAe,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,gBAEpC,QAAA,EAAA;AAAA,kBACC,iBAAA,mBAAA,GAAA;AAAA,oBAAC,WAAA;AAAA,oBAAA;AAAA,sBACC,SAAS,WAAY,CAAA,qBAAA;AAAA,sBACrB,YAAA;AAAA,sBACA,QAAA;AAAA,sBACA,gBAAkB,EAAA,sBAAA;AAAA,sBAClB,YAAA;AAAA,sBACA,iBAAA;AAAA,sBACA,mBAAA;AAAA,sBACA,cAAA;AAAA,sBACA,YAAA;AAAA,sBACA,qBAAA;AAAA,sBACA,WAAA;AAAA,sBACA,OAAS,EAAA,EAAA;AAAA,sBACT,gBAAgB,WAAY,CAAA,cAAA;AAAA,qBAAA;AAAA,mBAE5B,GAAA,IAAA;AAAA,kBACH,iBAAsB,KAAA,KAAA,IAAS,YAAe,GAAA,CAAA,mBAC5C,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,EACzB,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CAACC,KACT,qBAAA,GAAA;AAAA,oBAACF,KAAA;AAAA,oBAAA;AAAA,sBACC,eAAA,EAAeE,KAAK,CAAA,CAAC,CAAI,GAAA,CAAA;AAAA,sBACzB,kBAAoB,EAAA,qBAAA;AAAA,sBACpB,SAAA;AAAA,sBACA,SAAS,WAAY,CAAA,qBAAA;AAAA,sBACrB,WAAA,EAAa,gBAAqBA,KAAAA,KAAAA,CAAK,GAAG,CAAA;AAAA,sBAE1C,OAAS,EAAA,UAAA;AAAA,sBACT,YAAA;AAAA,sBACA,GAAKA,EAAAA,KAAAA;AAAA,sBACL,MAAA,EAAQ,aAAaA,KAAI,CAAA;AAAA,sBACzB,aAAA;AAAA,sBACA,gBAAgB,WAAY,CAAA,cAAA;AAAA,sBAC5B,cAAc,eAAgB,CAAA,YAAA;AAAA,qBAAA;AAAA,oBAPzBA,MAAK,UAAU,CAAA;AAAA,mBASvB,GACH,CACE,GAAA,IAAA;AAAA,iBAAA;AAAA,eAAA;AAAA,aACN;AAAA,WAAA;AAAA,SACF;AAAA,QACC,YAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,KAAA,GAAQ,UAAW,CAAA,SAASC,MACvC,CAAA;AAAA,EACE,GAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,MAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,gBAAA;AAAA,EACA,EAAA;AAAA,EACA,eAAA;AAAA,EACA,wBAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,mBAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,eAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,qBAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,OAAuB,IAAI,CAAA,CAAA;AAEhD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,QAAuB,EAAA,CAAA;AAE/C,EAAM,MAAA,EAAE,WAAW,MAAO,EAAA,GAAI,kBAAkB,EAAE,MAAA,EAAQ,eAAe,CAAA,CAAA;AAEzE,EAAA,IAAI,WAAW,KAAW,CAAA,EAAA;AACxB,IAAM,MAAA,KAAA;AAAA,MACJ,8EAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAA,IAAI,eAAe,KAAW,CAAA,EAAA;AAC5B,IAAA,MAAM,MAAM,oCAAoC,CAAA,CAAA;AAAA,GAClD;AAIA,EACE,uBAAA,IAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA;AAAA,MACtC,EAAA;AAAA,MACA,QAAU,EAAA,OAAA;AAAA,MACV,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAAA,MAE1C,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,GAAA,EAAK,MAAQ,EAAA,MAAA,EAAQ,aAAe,EAAA,CAAA;AAAA,QAE7C,QAAQ,SACP,mBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,aAAA;AAAA,YACA,gBAAA;AAAA,YACA,MAAA;AAAA,YACA,YAAA;AAAA,YACA,YAAA;AAAA,YACA,UAAA;AAAA,YACA,YAAA;AAAA,YACA,gBAAA;AAAA,YACA,EAAA;AAAA,YACA,eAAA;AAAA,YACA,wBAAA;AAAA,YACA,cAAA;AAAA,YACA,WAAA;AAAA,YACA,MAAA;AAAA,YACA,mBAAA;AAAA,YACA,WAAA;AAAA,YACA,UAAA;AAAA,YACA,QAAA;AAAA,YACA,iBAAA;AAAA,YACA,gBAAA;AAAA,YACA,SAAA;AAAA,YACA,eAAA;AAAA,YACA,cAAA;AAAA,YACA,iBAAA;AAAA,YACA,qBAAA;AAAA,YACA,IAAA;AAAA,WAAA;AAAA,SAEA,GAAA,IAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACN,CAAA;AAEJ,CAAC;;;;"}

package/esm/VirtualColSpan.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const VirtualColSpan = memo(function VirtualColSpan2({
+  width
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "vuuVirtualColSpan",
+      style: { display: "inline-block", width }
+    }
+  );
+});
+
+export { VirtualColSpan };
+//# sourceMappingURL=VirtualColSpan.js.map

package/esm/VirtualColSpan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualColSpan.js","sources":["../src/VirtualColSpan.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nexport const VirtualColSpan = memo(function VirtualColSpan({\n  width,\n}: {\n  width: number;\n}) {\n  return (\n    <div\n      className=\"vuuVirtualColSpan\"\n      style={{ display: \"inline-block\", width }}\n    />\n  );\n});\n"],"names":["VirtualColSpan"],"mappings":";;;AAEa,MAAA,cAAA,GAAiB,IAAK,CAAA,SAASA,eAAe,CAAA;AAAA,EACzD,KAAA;AACF,CAEG,EAAA;AACD,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAU,EAAA,mBAAA;AAAA,MACV,KAAO,EAAA,EAAE,OAAS,EAAA,cAAA,EAAgB,KAAM,EAAA;AAAA,KAAA;AAAA,GAC1C,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,19 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import '@vuu-ui/vuu-ui-controls';
-import '@vuu-ui/vuu-utils';
+import { Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import 'clsx';
-import '@vuu-ui/vuu-popups';
 import { Table } from '../../Table.js';
-import '../../cell-renderers/checkbox-cell/CheckboxCell.js';
-import '../../cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js';
-import '../../cell-renderers/input-cell/InputCell.js';
-import '../../cell-renderers/toggle-cell/ToggleCell.js';
-import '../../useTableModel.js';
-import '../../Row.js';
-import { Button } from '@salt-ds/core';
 import bulkEditPanelCss from './BulkEditPanel.css.js';
 
 const classBase = "vuuBulkEditPanel";

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

@@ -1 +1 @@
-{"version":3,"file":"BulkEditPanel.js","sources":["../../../src/bulk-edit/bulk-edit-panel/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { Table } from \"@vuu-ui/vuu-table\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\ntype BulkEditPanelProps = {\n  className?: string;\n  tableConfig: TableConfig;\n  dataSource: DataSource;\n  onCancel: () => void;\n  onEditMultiple: () => void;\n  onSubmit: () => void;\n};\n\nexport const BulkEditPanel = (props: BulkEditPanelProps): JSX.Element => {\n  const { tableConfig, dataSource, onCancel, onEditMultiple, onSubmit } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={classBase}\n      style={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      {/* <BulkEditRow columnMap={inputColMap} columns={inputColDescriptor} row={dataSource.data[0]} offset={1}></BulkEditRow> */}\n      <div className={`${classBase}-table`}>\n        <Table\n          config={tableConfig}\n          dataSource={dataSource}\n          height={400}\n          width={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n        />\n      </div>\n\n      <div className={`${classBase}-buttonBar`}>\n        <Button onClick={onCancel}>Cancel</Button>\n        <Button onClick={onSubmit}>Save</Button>\n        <Button onClick={onEditMultiple}>Edit Multiple</Button>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AASA,MAAM,SAAY,GAAA,kBAAA,CAAA;AAWL,MAAA,aAAA,GAAgB,CAAC,KAA2C,KAAA;AACvE,EAAA,MAAM,EAAE,WAAa,EAAA,UAAA,EAAY,QAAU,EAAA,cAAA,EAAgB,UAAa,GAAA,KAAA,CAAA;AACxE,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,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACX,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAGlD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAQ,EAAA,WAAA;AAAA,YACR,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,wBAEC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,UAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,QAAA,EAAU,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,0BAChC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,QAAA,EAAU,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,0BAC9B,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,cAAA,EAAgB,QAAa,EAAA,eAAA,EAAA,CAAA;AAAA,SAChD,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BulkEditPanel.js","sources":["../../../src/bulk-edit/bulk-edit-panel/BulkEditPanel.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Table } from \"../../Table\";\n\nimport bulkEditPanelCss from \"./BulkEditPanel.css\";\n\nconst classBase = \"vuuBulkEditPanel\";\n\ntype BulkEditPanelProps = {\n  className?: string;\n  tableConfig: TableConfig;\n  dataSource: DataSource;\n  onCancel: () => void;\n  onEditMultiple: () => void;\n  onSubmit: () => void;\n};\n\nexport const BulkEditPanel = (props: BulkEditPanelProps): JSX.Element => {\n  const { tableConfig, dataSource, onCancel, onEditMultiple, onSubmit } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-checkbox-cell\",\n    css: bulkEditPanelCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={classBase}\n      style={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      {/* <BulkEditRow columnMap={inputColMap} columns={inputColDescriptor} row={dataSource.data[0]} offset={1}></BulkEditRow> */}\n      <div className={`${classBase}-table`}>\n        <Table\n          config={tableConfig}\n          dataSource={dataSource}\n          height={400}\n          width={600}\n          showColumnHeaderMenus={false}\n          selectionModel=\"none\"\n        />\n      </div>\n\n      <div className={`${classBase}-buttonBar`}>\n        <Button onClick={onCancel}>Cancel</Button>\n        <Button onClick={onSubmit}>Save</Button>\n        <Button onClick={onEditMultiple}>Edit Multiple</Button>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,SAAY,GAAA,kBAAA,CAAA;AAWL,MAAA,aAAA,GAAgB,CAAC,KAA2C,KAAA;AACvE,EAAA,MAAM,EAAE,WAAa,EAAA,UAAA,EAAY,QAAU,EAAA,cAAA,EAAgB,UAAa,GAAA,KAAA,CAAA;AACxE,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,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACX,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,EAAQ,eAAe,QAAS,EAAA;AAAA,MAGlD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,MAAA,CAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAQ,EAAA,WAAA;AAAA,YACR,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,wBAEC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,UAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,QAAA,EAAU,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,0BAChC,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,QAAA,EAAU,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,0BAC9B,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,cAAA,EAAgB,QAAa,EAAA,eAAA,EAAA,CAAA;AAAA,SAChD,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/esm/bulk-edit/bulk-edit-row/BulkEditRow.css.js

@@ -0,0 +1,4 @@
+var bulkEditRowCss = ".vuuBulkEditRow{\n    display: flex;\n    flex-direction: column;\n}";
+
+export { bulkEditRowCss as default };
+//# sourceMappingURL=BulkEditRow.css.js.map

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

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

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

@@ -1,8 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { Row } from '../../Row.js';
+import bulkEditRowCss from './BulkEditRow.css.js';
 
 const BulkEditRow = (props) => {
   const { columnMap, columns, row, offset } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-bulk-edit-row",
+    css: bulkEditRowCss,
+    window: targetWindow
+  });
   return /* @__PURE__ */ jsx("div", { className: "vuuBulkEditRow", children: /* @__PURE__ */ jsx(
     Row,
     {

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

@@ -1 +1 @@
-{"version":3,"file":"BulkEditRow.js","sources":["../../../src/bulk-edit/bulk-edit-row/BulkEditRow.tsx"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnMap } from \"@vuu-ui/vuu-utils\";\nimport { Row } from \"../../Row\";\n\nimport \"./BulkEditRow.css\";\n\ntype BulkEditRowProps = {\n  className?: string;\n  columnMap: ColumnMap;\n  columns: RuntimeColumnDescriptor[];\n  row: DataSourceRow;\n  offset: number;\n};\n\nexport const BulkEditRow = (props: BulkEditRowProps): JSX.Element => {\n  const { columnMap, columns, row, offset } = props;\n\n  return (\n    <div className=\"vuuBulkEditRow\">\n      <Row\n        columnMap={columnMap}\n        columns={columns}\n        row={row}\n        offset={offset}\n      ></Row>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAea,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,OAAS,EAAA,GAAA,EAAK,QAAW,GAAA,KAAA,CAAA;AAE5C,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gBACb,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"BulkEditRow.js","sources":["../../../src/bulk-edit/bulk-edit-row/BulkEditRow.tsx"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnMap } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Row } from \"../../Row\";\n\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\ntype BulkEditRowProps = {\n  className?: string;\n  columnMap: ColumnMap;\n  columns: RuntimeColumnDescriptor[];\n  row: DataSourceRow;\n  offset: number;\n};\n\nexport const BulkEditRow = (props: BulkEditRowProps): JSX.Element => {\n  const { columnMap, columns, row, offset } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-bulk-edit-row\",\n    css: bulkEditRowCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className=\"vuuBulkEditRow\">\n      <Row\n        columnMap={columnMap}\n        columns={columns}\n        row={row}\n        offset={offset}\n      ></Row>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiBa,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,OAAS,EAAA,GAAA,EAAK,QAAW,GAAA,KAAA,CAAA;AAC5C,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,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,gBACb,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/column-resizing/ColumnResizer.css.js

@@ -1,4 +1,4 @@
-var columnResizerCss = ".vuuColumnResizer {\n    cursor: col-resize;\n    height: var(--header-height);\n    margin-left: var(--columnResizer-left, auto);\n    position: absolute;\n    right: -5px;\n    width: 8px;\n    z-index:1;\n}\n\n.vuuTableHeaderCell:not(.vuuTableHeaderCell-resizing){\n    .vuuColumnResizer:hover {\n        --columnResizer-color: var(--salt-selectable-background-selected);\n    }\n    \n}\n\n.vuuColumnResizer:after {\n    background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n    bottom:0;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 3px;\n    height: var(--columnResizer-height, 0);\n    width: 2px;\n    z-index: 1;\n}";
+var columnResizerCss = ".vuuColumnResizer {\n  cursor: col-resize;\n  height: var(--vuu-table-col-header-height);\n  margin-left: var(--columnResizer-left, auto);\n  position: absolute;\n  right: -5px;\n  width: 8px;\n  z-index: 1;\n}\n\n.vuuTableHeaderCell:not(.vuuTableHeaderCell-resizing) {\n  .vuuColumnResizer:hover {\n    --columnResizer-color: var(--salt-selectable-background-selected);\n  }\n}\n\n.vuuColumnResizer:after {\n  background-color: var(\n    --columnResizer-color,\n    var(--salt-separable-tertiary-borderColor)\n  );\n  bottom: 0;\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 3px;\n  height: var(--columnResizer-height, 0);\n  width: 2px;\n  z-index: 1;\n}\n";
 
 export { columnResizerCss as default };
 //# sourceMappingURL=ColumnResizer.css.js.map

package/esm/header-cell/HeaderCell.css.js

@@ -1,4 +1,4 @@
-var headerCellCss = ".vuuTableGroupHeaderCell,\n.vuuTableHeaderCell {\n  --cell-align: 'flex-start';\n  --vuuColumnHeaderPill-margin: 0;\n  --vuuColumnHeaderPill-flex: 0 0 24px;\n\n  align-items: center;\n  background-color: var(--vuuTableHeaderCell-background, inherit);\n  border-bottom: 1px solid #ccc;\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  gap: 4px;\n  height: var(--header-height);\n  padding: 0 12px 0 4px;\n  position: relative;\n  vertical-align: top;\n}\n\n.vuuTableHeaderCell:focus {\n  outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);\n  outline-offset: -3px;\n}\n\n.vuuTableHeaderCell-right {\n    --columnResizer-left: 0;\n    --vuuTable-columnMenu-margin: 0;\n    --vuuColumnHeaderPill-margin: 0 3px 0 0;\n    --column-menu-left: 2px;\n    justify-content: flex-end;\n    padding: 0 3px 0 12px;\n}\n\n.vuuTableHeaderCell-noMenu {\n  padding-left: var(--salt-spacing-300)\n}\n\n.vuuTableHeaderCell-label {\n  flex: 0 1 auto;\n  line-height: calc(var(--header-height) - 1px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vuuTableHeaderCell-right .vuuTableHeaderCell-label {\n  text-align: right;\n}\n\n.vuuTableHeaderCell-resizing {\n  --columnResizeThumb-color: var(--vuu-color-purple-10);\n  --columnResizer-color: var(--vuu-color-purple-10);\n  --columnResizer-height: var(--table-height);\n}\n\n.vuuTableHeaderCell.vuuPinLeft {\n  padding-left: 2px;\n}\n\n  .vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizer:before {\n    --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n    --inset-r: calc(var(--pin-width) - 2px);\n    --inset-b: calc(var(--height) - 2px);\n    --clip-path: polygon(\n      0% 0%,                              \n      0% 120%,                            \n      2px 120%,    \n      2px 2px,      \n      var(--inset-r) 2px,      \n      var(--inset-r) var(--inset-b),      \n      2px var(--inset-b),      \n      2px 120%,     \n      120% 120%,    \n      120% 0%       \n    );\n    background-color: transparent;\n    border-color:   var(--vuuTablePinnedColumn-borderColor, var(--salt-container-primary-borderColor));\n    border-width: 1px;\n    border-style: solid solid solid solid;\n    /* border-radius: 0 6px 6px 0; */\n    border-radius: 4px;\n    box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.10);\n    /* clip-path: inset(10px 10px 10px 10px); */\n    clip-path: var(--clip-path);\n    content: '';\n    position: absolute;\n    width: var(--pin-width);\n    top:0;\n    bottom:0;\n    right: 3px;\n    height: var(--height);\n    z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizer:before {\n  --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n  --inset-r: calc(var(--pin-width) - 2px);\n  --inset-b: calc(var(--height) - 2px);\n  --clip-path: polygon(\n    -20% 0%,                              \n    -20% 120%,                            \n    2px 120%,    \n    2px 2px,      \n    var(--inset-r) 2px,      \n    var(--inset-r) var(--inset-b),      \n    2px var(--inset-b),      \n    2px 120%,     \n    120% 120%,    \n    120% 0%       \n  );\n  background-color: transparent;\n  border-color: #A9AAAD;\n  border-width: 1px;\n  border-style: solid solid solid solid;\n  /* border-radius: 0 6px 6px 0; */\n  border-radius: 4px;\n  box-shadow: -2px 1px 4px 0px rgba(0, 0, 0, 0.10);\n  /* clip-path: inset(10px 10px 10px 10px); */\n  clip-path: var(--clip-path);\n  content: '';\n  position: absolute;\n  width: var(--pin-width);\n  top:0;\n  bottom:0;\n  right: 0px;\n  height: var(--height);\n  z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuDraggable-dragAway {\n    display: none;\n}\n\n.vuuTable-headingCell {\n  background: var(--dataTable-background);\n  border-color: var(--salt-separable-tertiary-borderColor);\n  border-style: solid solid solid none;\n  border-width: 1px;\n  color: var(--salt-content-secondary-foreground);\n  display: inline-block;\n  height: var(--header-height);\n  padding: 0 !important;\n}\n";
+var headerCellCss = ".vuuTableGroupHeaderCell,\n.vuuTableHeaderCell {\n  --cell-align: \"flex-start\";\n  --vuuColumnHeaderPill-margin: 0;\n  --vuuColumnHeaderPill-flex: 0 0 24px;\n\n  align-items: center;\n  background-color: var(--vuuTableHeaderCell-background, inherit);\n  border-bottom: 1px solid #ccc;\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  gap: 4px;\n  height: var(--vuu-table-col-header-height);\n  padding: 0 12px 0 4px;\n  position: relative;\n  vertical-align: top;\n}\n\n.vuuTableHeaderCell:focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n  outline-offset: -3px;\n}\n\n.vuuTableHeaderCell-right {\n  --columnResizer-left: 0;\n  --vuuTable-columnMenu-margin: 0;\n  --vuuColumnHeaderPill-margin: 0 3px 0 0;\n  --column-menu-left: 2px;\n  justify-content: flex-end;\n  padding: 0 3px 0 12px;\n}\n\n.vuuTableHeaderCell-noMenu {\n  padding-left: var(--salt-spacing-300);\n}\n\n.vuuTableHeaderCell-label {\n  flex: 0 1 auto;\n  line-height: calc(var(--vuu-table-cell-header-height) - 1px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vuuTableHeaderCell-right .vuuTableHeaderCell-label {\n  text-align: right;\n}\n\n.vuuTableHeaderCell-resizing {\n  --columnResizeThumb-color: var(--vuu-color-purple-10);\n  --columnResizer-color: var(--vuu-color-purple-10);\n  --columnResizer-height: var(--table-height);\n}\n\n.vuuTableHeaderCell.vuuPinLeft {\n  padding-left: 2px;\n}\n\n.vuuTableHeaderCell.vuuPinLeft.vuuEndPin .vuuColumnResizer:before {\n  --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n  --inset-r: calc(var(--pin-width) - 2px);\n  --inset-b: calc(var(--height) - 2px);\n  --clip-path: polygon(\n    0% 0%,\n    0% 120%,\n    2px 120%,\n    2px 2px,\n    var(--inset-r) 2px,\n    var(--inset-r) var(--inset-b),\n    2px var(--inset-b),\n    2px 120%,\n    120% 120%,\n    120% 0%\n  );\n  background-color: transparent;\n  border-color: var(\n    --vuuTablePinnedColumn-borderColor,\n    var(--salt-container-primary-borderColor)\n  );\n  border-width: 1px;\n  border-style: solid solid solid solid;\n  /* border-radius: 0 6px 6px 0; */\n  border-radius: 4px;\n  box-shadow: 2px 1px 4px 0px rgba(0, 0, 0, 0.1);\n  /* clip-path: inset(10px 10px 10px 10px); */\n  clip-path: var(--clip-path);\n  content: \"\";\n  position: absolute;\n  width: var(--pin-width);\n  top: 0;\n  bottom: 0;\n  right: 3px;\n  height: var(--height);\n  z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuPinRight.vuuEndPin .vuuColumnResizer:before {\n  --height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n  --inset-r: calc(var(--pin-width) - 2px);\n  --inset-b: calc(var(--height) - 2px);\n  --clip-path: polygon(\n    -20% 0%,\n    -20% 120%,\n    2px 120%,\n    2px 2px,\n    var(--inset-r) 2px,\n    var(--inset-r) var(--inset-b),\n    2px var(--inset-b),\n    2px 120%,\n    120% 120%,\n    120% 0%\n  );\n  background-color: transparent;\n  border-color: #a9aaad;\n  border-width: 1px;\n  border-style: solid solid solid solid;\n  /* border-radius: 0 6px 6px 0; */\n  border-radius: 4px;\n  box-shadow: -2px 1px 4px 0px rgba(0, 0, 0, 0.1);\n  /* clip-path: inset(10px 10px 10px 10px); */\n  clip-path: var(--clip-path);\n  content: \"\";\n  position: absolute;\n  width: var(--pin-width);\n  top: 0;\n  bottom: 0;\n  right: 0px;\n  height: var(--height);\n  z-index: -5;\n}\n\n.vuuTableHeaderCell.vuuDraggable-dragAway {\n  display: none;\n}\n\n.vuuTable-headingCell {\n  background: var(--dataTable-background);\n  border-color: var(--salt-separable-tertiary-borderColor);\n  border-style: solid solid solid none;\n  border-width: 1px;\n  color: var(--salt-content-secondary-foreground);\n  display: inline-block;\n  height: var(--vuu-table-col-heading-height);\n  padding: 0 !important;\n}\n";
 
 export { headerCellCss as default };
 //# sourceMappingURL=HeaderCell.css.js.map

package/esm/index.js

@@ -1,17 +1,20 @@
-export { GroupHeaderCell, GroupHeaderCell as GroupHeaderCellNext } from './header-cell/GroupHeaderCell.js';
+export { BulkEditRow } from './bulk-edit/bulk-edit-row/BulkEditRow.js';
+export { BulkEditPanel } from './bulk-edit/bulk-edit-panel/BulkEditPanel.js';
+export { CheckboxCell } from './cell-renderers/checkbox-cell/CheckboxCell.js';
+export { CheckboxRowSelectorCell } from './cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js';
+export { InputCell } from './cell-renderers/input-cell/InputCell.js';
+export { ToggleCell } from './cell-renderers/toggle-cell/ToggleCell.js';
+export { GroupHeaderCell } from './header-cell/GroupHeaderCell.js';
 export { HeaderCell } from './header-cell/HeaderCell.js';
 export { Table } from './Table.js';
 export { TableCell } from './table-cell/TableCell.js';
 export { TableGroupCell } from './table-cell/TableGroupCell.js';
 export { updateTableConfig } from './table-config.js';
-export { CheckboxCell } from './cell-renderers/checkbox-cell/CheckboxCell.js';
-export { CheckboxRowSelectorCell } from './cell-renderers/checkbox-row-selector/CheckboxRowSelectorCell.js';
-export { InputCell } from './cell-renderers/input-cell/InputCell.js';
-export { ToggleCell } from './cell-renderers/toggle-cell/ToggleCell.js';
+export { HeaderProvider, useHeaderProps } from './table-header/HeaderProvider.js';
+export { TableHeader } from './table-header/TableHeader.js';
 export { useControlledTableNavigation } from './useControlledTableNavigation.js';
 export { isShowColumnSettings, isShowTableSettings, useTableModel } from './useTableModel.js';
 export { noScrolling, useTableScroll } from './useTableScroll.js';
 export { useTableViewport } from './useTableViewport.js';
-export { BulkEditRow } from './bulk-edit/bulk-edit-row/BulkEditRow.js';
-export { BulkEditPanel } from './bulk-edit/bulk-edit-panel/BulkEditPanel.js';
+export { VirtualColSpan } from './VirtualColSpan.js';
 //# sourceMappingURL=index.js.map

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-header/HeaderProvider.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const HeaderContext = createContext({ columns: [] });
+const HeaderProvider = ({
+  children,
+  columns,
+  virtualColSpan
+}) => {
+  return /* @__PURE__ */ jsx(HeaderContext.Provider, { value: { columns, virtualColSpan }, children });
+};
+const useHeaderProps = () => useContext(HeaderContext);
+
+export { HeaderProvider, useHeaderProps };
+//# sourceMappingURL=HeaderProvider.js.map

package/esm/table-header/HeaderProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderProvider.js","sources":["../../src/table-header/HeaderProvider.tsx"],"sourcesContent":["import { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\nimport { createContext, FC, useContext } from \"react\";\n\nconst HeaderContext = createContext<BaseRowProps>({ columns: [] });\n\nexport const HeaderProvider: FC<BaseRowProps> = ({\n  children,\n  columns,\n  virtualColSpan,\n}) => {\n  return (\n    <HeaderContext.Provider value={{ columns, virtualColSpan }}>\n      {children}\n    </HeaderContext.Provider>\n  );\n};\n\nexport const useHeaderProps = () => useContext(HeaderContext);\n"],"names":[],"mappings":";;;AAGA,MAAM,gBAAgB,aAA4B,CAAA,EAAE,OAAS,EAAA,IAAI,CAAA,CAAA;AAE1D,MAAM,iBAAmC,CAAC;AAAA,EAC/C,QAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AACF,CAAM,KAAA;AACJ,EACE,uBAAA,GAAA,CAAC,cAAc,QAAd,EAAA,EAAuB,OAAO,EAAE,OAAA,EAAS,cAAe,EAAA,EACtD,QACH,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,cAAA,GAAiB,MAAM,UAAA,CAAW,aAAa;;;;"}

package/esm/table-header/TableHeader.js

@@ -1,16 +1,19 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { isNotHidden, isGroupColumn } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
-import { memo } from 'react';
+import { memo, useMemo, isValidElement } from 'react';
 import { GroupHeaderCell } from '../header-cell/GroupHeaderCell.js';
 import { HeaderCell } from '../header-cell/HeaderCell.js';
 import { useTableHeader } from './useTableHeader.js';
+import { HeaderProvider } from './HeaderProvider.js';
 
 const TableHeader = memo(
   ({
     classBase = "vuuTable",
     columns,
+    customHeader,
     headings,
+    onHeightMeasured,
     onMoveColumn,
     onMoveGroupColumn,
     onRemoveGroupColumn,
@@ -29,10 +32,36 @@ const TableHeader = memo(
       setContainerRef
     } = useTableHeader({
       columns,
+      onHeightMeasured,
       onMoveColumn,
       onSortColumn,
       tableConfig
     });
+    const customHeaders = useMemo(() => {
+      const createElement = (Component, key) => /* @__PURE__ */ jsx(
+        Component,
+        {
+          columns,
+          virtualColSpan
+        },
+        key
+      );
+      if (customHeader === void 0) {
+        return null;
+      } else if (Array.isArray(customHeader)) {
+        if (customHeader.some(isValidElement)) {
+          return /* @__PURE__ */ jsx(HeaderProvider, { columns, virtualColSpan, children: customHeader.map(
+            (header, i) => isValidElement(header) ? header : createElement(header, i)
+          ) });
+        } else {
+          return customHeader.map(createElement);
+        }
+      } else if (isValidElement(customHeader)) {
+        return /* @__PURE__ */ jsx(HeaderProvider, { columns, virtualColSpan, children: customHeader });
+      } else {
+        return createElement(customHeader);
+      }
+    }, [columns, customHeader, virtualColSpan]);
     return /* @__PURE__ */ jsxs("div", { className: `${classBase}-col-headings`, ref: setContainerRef, children: [
       headings.map((colHeaders, i) => /* @__PURE__ */ jsx("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
       /* @__PURE__ */ jsxs("div", { className: `${classBase}-col-headers`, role: "row", children: [
@@ -75,7 +104,8 @@ const TableHeader = memo(
           )
         ),
         draggableColumn
-      ] })
+      ] }),
+      customHeaders
     ] });
   }
 );

package/esm/table-header/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  ColumnDescriptor,\n  RuntimeColumnDescriptor,\n  TableColumnResizeHandler,\n  TableConfig,\n  TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { memo } from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { useTableHeader } from \"./useTableHeader\";\n\nexport type ColumnSortHandler = (\n  column: ColumnDescriptor,\n  addToExistingSort: boolean,\n  sortType?: VuuSortType\n) => void;\n\nexport interface TableHeaderProps {\n  classBase?: string;\n  columns: RuntimeColumnDescriptor[];\n  headings: TableHeadings;\n  onResizeColumn: TableColumnResizeHandler;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n  onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n  onSortColumn: ColumnSortHandler;\n  showColumnHeaderMenus: boolean;\n  tableConfig: TableConfig;\n  tableId: string;\n  virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n  ({\n    classBase = \"vuuTable\",\n    columns,\n    headings,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onSortColumn,\n    showColumnHeaderMenus,\n    tableConfig,\n    tableId,\n    virtualColSpan = 0,\n  }: TableHeaderProps) => {\n    const {\n      draggableColumn,\n      draggedColumnIndex,\n      onClick,\n      onMouseDown,\n      setContainerRef,\n    } = useTableHeader({\n      columns,\n      onMoveColumn,\n      onSortColumn,\n      tableConfig,\n    });\n\n    return (\n      <div className={`${classBase}-col-headings`} ref={setContainerRef}>\n        {headings.map((colHeaders, i) => (\n          <div className=\"vuuTable-heading\" key={i}>\n            {colHeaders.map(({ label, width }, j) => (\n              <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n                {label}\n              </div>\n            ))}\n          </div>\n        ))}\n        <div className={`${classBase}-col-headers`} role=\"row\">\n          {virtualColSpan > 0 ? (\n            <div\n              role=\"cell\"\n              className=\"vuuTableCell\"\n              style={{ width: virtualColSpan }}\n            />\n          ) : null}\n          {columns.filter(isNotHidden).map((col, i) =>\n            isGroupColumn(col) ? (\n              <GroupHeaderCell\n                aria-colindex={col.index}\n                column={col}\n                data-index={i}\n                key={col.name}\n                onMoveColumn={onMoveGroupColumn}\n                onRemoveColumn={onRemoveGroupColumn}\n                onResize={onResizeColumn}\n              />\n            ) : (\n              <HeaderCell\n                aria-colindex={col.index}\n                className={cx({\n                  \"vuuDraggable-dragAway\": i === draggedColumnIndex,\n                })}\n                column={col}\n                data-index={i}\n                id={`${tableId}-col-${i}`}\n                key={col.name}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n                onResize={onResizeColumn}\n                showMenu={showColumnHeaderMenus}\n              />\n            )\n          )}\n          {draggableColumn}\n        </div>\n      </div>\n    );\n  }\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableHeader.js","sources":["../../src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  ColumnDescriptor,\n  CustomHeader,\n  RuntimeColumnDescriptor,\n  TableColumnResizeHandler,\n  TableConfig,\n  TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { isValidElement, memo, useMemo } from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { useTableHeader } from \"./useTableHeader\";\nimport { HeaderProvider } from \"./HeaderProvider\";\n\nexport type ColumnSortHandler = (\n  column: ColumnDescriptor,\n  addToExistingSort: boolean,\n  sortType?: VuuSortType\n) => void;\n\nexport interface TableHeaderProps {\n  classBase?: string;\n  columns: RuntimeColumnDescriptor[];\n  customHeader?: CustomHeader | CustomHeader[];\n  headings: TableHeadings;\n  onHeightMeasured: (height: number) => void;\n  onResizeColumn: TableColumnResizeHandler;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n  onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n  onSortColumn: ColumnSortHandler;\n  showColumnHeaderMenus: boolean;\n  tableConfig: TableConfig;\n  tableId: string;\n  virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n  ({\n    classBase = \"vuuTable\",\n    columns,\n    customHeader,\n    headings,\n    onHeightMeasured,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onSortColumn,\n    showColumnHeaderMenus,\n    tableConfig,\n    tableId,\n    virtualColSpan = 0,\n  }: TableHeaderProps) => {\n    const {\n      draggableColumn,\n      draggedColumnIndex,\n      onClick,\n      onMouseDown,\n      setContainerRef,\n    } = useTableHeader({\n      columns,\n      onHeightMeasured,\n      onMoveColumn,\n      onSortColumn,\n      tableConfig,\n    });\n\n    const customHeaders = useMemo(() => {\n      const createElement = (Component: CustomHeader, key?: number) => (\n        <Component\n          columns={columns}\n          key={key}\n          virtualColSpan={virtualColSpan}\n        />\n      );\n      if (customHeader === undefined) {\n        return null;\n      } else if (Array.isArray(customHeader)) {\n        if (customHeader.some(isValidElement)) {\n          return (\n            <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n              {customHeader.map((header, i) =>\n                isValidElement(header) ? header : createElement(header, i)\n              )}\n            </HeaderProvider>\n          );\n        } else {\n          return customHeader.map(createElement);\n        }\n      } else if (isValidElement(customHeader)) {\n        return (\n          <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n            {customHeader}\n          </HeaderProvider>\n        );\n      } else {\n        return createElement(customHeader);\n      }\n    }, [columns, customHeader, virtualColSpan]);\n\n    return (\n      <div className={`${classBase}-col-headings`} ref={setContainerRef}>\n        {headings.map((colHeaders, i) => (\n          <div className=\"vuuTable-heading\" key={i}>\n            {colHeaders.map(({ label, width }, j) => (\n              <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n                {label}\n              </div>\n            ))}\n          </div>\n        ))}\n        <div className={`${classBase}-col-headers`} role=\"row\">\n          {virtualColSpan > 0 ? (\n            <div\n              role=\"cell\"\n              className=\"vuuTableCell\"\n              style={{ width: virtualColSpan }}\n            />\n          ) : null}\n          {columns.filter(isNotHidden).map((col, i) =>\n            isGroupColumn(col) ? (\n              <GroupHeaderCell\n                aria-colindex={col.index}\n                column={col}\n                data-index={i}\n                key={col.name}\n                onMoveColumn={onMoveGroupColumn}\n                onRemoveColumn={onRemoveGroupColumn}\n                onResize={onResizeColumn}\n              />\n            ) : (\n              <HeaderCell\n                aria-colindex={col.index}\n                className={cx({\n                  \"vuuDraggable-dragAway\": i === draggedColumnIndex,\n                })}\n                column={col}\n                data-index={i}\n                id={`${tableId}-col-${i}`}\n                key={col.name}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n                onResize={onResizeColumn}\n                showMenu={showColumnHeaderMenus}\n              />\n            )\n          )}\n          {draggableColumn}\n        </div>\n        {customHeaders}\n      </div>\n    );\n  }\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":[],"mappings":"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"}

package/esm/table-header/useTableHeader.js

@@ -1,15 +1,21 @@
 import { useDragDrop } from '@vuu-ui/vuu-ui-controls';
 import { moveColumnTo, queryClosest, visibleColumnAtIndex } from '@vuu-ui/vuu-utils';
 import { useRef, useCallback } from 'react';
+import { useMeasuredHeight } from '../useMeasuredHeight.js';
+import { useForkRef } from '@salt-ds/core';
 
 const useTableHeader = ({
   columns,
+  onHeightMeasured,
   onMoveColumn,
   onSortColumn,
   tableConfig
 }) => {
   const containerRef = useRef(null);
   const scrollingContainerRef = useRef(null);
+  const { rowRef } = useMeasuredHeight({
+    onHeightMeasured
+  });
   const setContainerRef = useCallback((el) => {
     containerRef.current = el;
     if (el) {
@@ -62,7 +68,7 @@ const useTableHeader = ({
     draggedColumnIndex: dragDropHook.draggedItemIndex,
     onClick: handleColumnHeaderClick,
     onMouseDown: columnHeaderDragMouseDown,
-    setContainerRef
+    setContainerRef: useForkRef(setContainerRef, rowRef)
   };
 };
 

package/esm/table-header/useTableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableHeader.js","sources":["../../src/table-header/useTableHeader.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  DropOptions,\n  useDragDrop as useDragDrop,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  moveColumnTo,\n  queryClosest,\n  visibleColumnAtIndex,\n} from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useRef } from \"react\";\nimport { TableHeaderProps } from \"./TableHeader\";\n\nexport interface TableHeaderHookProps\n  extends Pick<\n    TableHeaderProps,\n    \"columns\" | \"onMoveColumn\" | \"onSortColumn\" | \"tableConfig\"\n  > {\n  label?: string;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport const useTableHeader = ({\n  columns,\n  onMoveColumn,\n  onSortColumn,\n  tableConfig,\n}: TableHeaderHookProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const scrollingContainerRef = useRef<HTMLDivElement | null>(null);\n  const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      scrollingContainerRef.current = el.closest(\".vuuTable-contentContainer\");\n    } else {\n      scrollingContainerRef.current = null;\n    }\n  }, []);\n\n  const handleDropColumnHeader = useCallback(\n    ({ fromIndex: moveFrom, toIndex: moveTo }: DropOptions) => {\n      const column = columns[moveFrom];\n      // columns are what get rendered, so these are the columns that\n      // the drop operation relates to. We must translate these into\n      // columns within the table config. Grouping complicates this\n      // as the group columns are not present in columns but ARE in\n      // config.columns\n      const orderedColumns = moveColumnTo(columns, column, moveTo);\n\n      const ofColumn =\n        ({ name }: ColumnDescriptor) =>\n        (col: ColumnDescriptor) =>\n          col.name === name;\n\n      const targetIndex = orderedColumns.findIndex(ofColumn(column));\n      const nextColumn = orderedColumns[targetIndex + 1];\n      const insertPos = nextColumn\n        ? tableConfig.columns.findIndex(ofColumn(nextColumn))\n        : -1;\n\n      if (moveTo > moveFrom && insertPos !== -1) {\n        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));\n      } else {\n        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));\n      }\n    },\n    [columns, onMoveColumn, tableConfig.columns]\n  );\n\n  const handleColumnHeaderClick = useCallback(\n    (evt: React.MouseEvent | React.KeyboardEvent) => {\n      const headerCell = queryClosest(evt.target, \".vuuTableHeaderCell\");\n      const colIdx = parseInt(headerCell?.dataset.index ?? \"-1\");\n      const column = visibleColumnAtIndex(columns, colIdx);\n      const isAdditive = evt.shiftKey;\n      column && onSortColumn(column, isAdditive);\n    },\n    [columns, onSortColumn]\n  );\n\n  // Drag Drop column headers\n  const {\n    onMouseDown: columnHeaderDragMouseDown,\n    draggable: draggableColumn,\n    ...dragDropHook\n  } = useDragDrop({\n    allowDragDrop: true,\n    containerRef,\n    draggableClassName: `vuuTable`,\n    itemQuery: \".vuuTableHeaderCell\",\n    onDrop: handleDropColumnHeader,\n    orientation: \"horizontal\",\n    scrollingContainerRef,\n  });\n\n  return {\n    draggableColumn,\n    draggedColumnIndex: dragDropHook.draggedItemIndex,\n    onClick: handleColumnHeaderClick,\n    onMouseDown: columnHeaderDragMouseDown,\n    setContainerRef,\n  };\n};\n"],"names":[],"mappings":";;;;AAuBO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,OAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,YAAA,GAAe,OAA8B,IAAI,CAAA,CAAA;AACvD,EAAM,MAAA,qBAAA,GAAwB,OAA8B,IAAI,CAAA,CAAA;AAChE,EAAM,MAAA,eAAA,GAAkB,WAAyC,CAAA,CAAC,EAAO,KAAA;AACvE,IAAA,YAAA,CAAa,OAAU,GAAA,EAAA,CAAA;AACvB,IAAA,IAAI,EAAI,EAAA;AACN,MAAsB,qBAAA,CAAA,OAAA,GAAU,EAAG,CAAA,OAAA,CAAQ,4BAA4B,CAAA,CAAA;AAAA,KAClE,MAAA;AACL,MAAA,qBAAA,CAAsB,OAAU,GAAA,IAAA,CAAA;AAAA,KAClC;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,EAAE,SAAA,EAAW,QAAU,EAAA,OAAA,EAAS,QAA0B,KAAA;AACzD,MAAM,MAAA,MAAA,GAAS,QAAQ,QAAQ,CAAA,CAAA;AAM/B,MAAA,MAAM,cAAiB,GAAA,YAAA,CAAa,OAAS,EAAA,MAAA,EAAQ,MAAM,CAAA,CAAA;AAE3D,MAAM,MAAA,QAAA,GACJ,CAAC,EAAE,IAAA,OACH,CAAC,GAAA,KACC,IAAI,IAAS,KAAA,IAAA,CAAA;AAEjB,MAAA,MAAM,WAAc,GAAA,cAAA,CAAe,SAAU,CAAA,QAAA,CAAS,MAAM,CAAC,CAAA,CAAA;AAC7D,MAAM,MAAA,UAAA,GAAa,cAAe,CAAA,WAAA,GAAc,CAAC,CAAA,CAAA;AACjD,MAAM,MAAA,SAAA,GAAY,aACd,WAAY,CAAA,OAAA,CAAQ,UAAU,QAAS,CAAA,UAAU,CAAC,CAClD,GAAA,CAAA,CAAA,CAAA;AAEJ,MAAI,IAAA,MAAA,GAAS,QAAY,IAAA,SAAA,KAAc,CAAI,CAAA,EAAA;AACzC,QAAA,YAAA,CAAa,aAAa,WAAY,CAAA,OAAA,EAAS,MAAQ,EAAA,SAAA,GAAY,CAAC,CAAC,CAAA,CAAA;AAAA,OAChE,MAAA;AACL,QAAA,YAAA,CAAa,YAAa,CAAA,WAAA,CAAY,OAAS,EAAA,MAAA,EAAQ,SAAS,CAAC,CAAA,CAAA;AAAA,OACnE;AAAA,KACF;AAAA,IACA,CAAC,OAAA,EAAS,YAAc,EAAA,WAAA,CAAY,OAAO,CAAA;AAAA,GAC7C,CAAA;AAEA,EAAA,MAAM,uBAA0B,GAAA,WAAA;AAAA,IAC9B,CAAC,GAAgD,KAAA;AAC/C,MAAA,MAAM,UAAa,GAAA,YAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,qBAAqB,CAAA,CAAA;AACjE,MAAA,MAAM,MAAS,GAAA,QAAA,CAAS,UAAY,EAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AACzD,MAAM,MAAA,MAAA,GAAS,oBAAqB,CAAA,OAAA,EAAS,MAAM,CAAA,CAAA;AACnD,MAAA,MAAM,aAAa,GAAI,CAAA,QAAA,CAAA;AACvB,MAAU,MAAA,IAAA,YAAA,CAAa,QAAQ,UAAU,CAAA,CAAA;AAAA,KAC3C;AAAA,IACA,CAAC,SAAS,YAAY,CAAA;AAAA,GACxB,CAAA;AAGA,EAAM,MAAA;AAAA,IACJ,WAAa,EAAA,yBAAA;AAAA,IACb,SAAW,EAAA,eAAA;AAAA,IACX,GAAG,YAAA;AAAA,MACD,WAAY,CAAA;AAAA,IACd,aAAe,EAAA,IAAA;AAAA,IACf,YAAA;AAAA,IACA,kBAAoB,EAAA,CAAA,QAAA,CAAA;AAAA,IACpB,SAAW,EAAA,qBAAA;AAAA,IACX,MAAQ,EAAA,sBAAA;AAAA,IACR,WAAa,EAAA,YAAA;AAAA,IACb,qBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,oBAAoB,YAAa,CAAA,gBAAA;AAAA,IACjC,OAAS,EAAA,uBAAA;AAAA,IACT,WAAa,EAAA,yBAAA;AAAA,IACb,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useTableHeader.js","sources":["../../src/table-header/useTableHeader.ts"],"sourcesContent":["import { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  DropOptions,\n  useDragDrop as useDragDrop,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  moveColumnTo,\n  queryClosest,\n  visibleColumnAtIndex,\n} from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useRef } from \"react\";\nimport { TableHeaderProps } from \"./TableHeader\";\nimport { useMeasuredHeight } from \"../useMeasuredHeight\";\nimport { useForkRef } from \"@salt-ds/core\";\n\nexport interface TableHeaderHookProps\n  extends Pick<\n    TableHeaderProps,\n    \"columns\" | \"onMoveColumn\" | \"onSortColumn\" | \"tableConfig\"\n  > {\n  label?: string;\n  onHeightMeasured: (height: number) => void;\n  onMoveColumn: (columns: ColumnDescriptor[]) => void;\n  onSortColumn: (column: ColumnDescriptor, addToExistingSort: boolean) => void;\n}\n\nexport const useTableHeader = ({\n  columns,\n  onHeightMeasured,\n  onMoveColumn,\n  onSortColumn,\n  tableConfig,\n}: TableHeaderHookProps) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const scrollingContainerRef = useRef<HTMLDivElement | null>(null);\n  const { rowRef } = useMeasuredHeight({\n    onHeightMeasured,\n  });\n\n  const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      scrollingContainerRef.current = el.closest(\".vuuTable-contentContainer\");\n    } else {\n      scrollingContainerRef.current = null;\n    }\n  }, []);\n\n  const handleDropColumnHeader = useCallback(\n    ({ fromIndex: moveFrom, toIndex: moveTo }: DropOptions) => {\n      const column = columns[moveFrom];\n      // columns are what get rendered, so these are the columns that\n      // the drop operation relates to. We must translate these into\n      // columns within the table config. Grouping complicates this\n      // as the group columns are not present in columns but ARE in\n      // config.columns\n      const orderedColumns = moveColumnTo(columns, column, moveTo);\n\n      const ofColumn =\n        ({ name }: ColumnDescriptor) =>\n        (col: ColumnDescriptor) =>\n          col.name === name;\n\n      const targetIndex = orderedColumns.findIndex(ofColumn(column));\n      const nextColumn = orderedColumns[targetIndex + 1];\n      const insertPos = nextColumn\n        ? tableConfig.columns.findIndex(ofColumn(nextColumn))\n        : -1;\n\n      if (moveTo > moveFrom && insertPos !== -1) {\n        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));\n      } else {\n        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));\n      }\n    },\n    [columns, onMoveColumn, tableConfig.columns]\n  );\n\n  const handleColumnHeaderClick = useCallback(\n    (evt: React.MouseEvent | React.KeyboardEvent) => {\n      const headerCell = queryClosest(evt.target, \".vuuTableHeaderCell\");\n      const colIdx = parseInt(headerCell?.dataset.index ?? \"-1\");\n      const column = visibleColumnAtIndex(columns, colIdx);\n      const isAdditive = evt.shiftKey;\n      column && onSortColumn(column, isAdditive);\n    },\n    [columns, onSortColumn]\n  );\n\n  // Drag Drop column headers\n  const {\n    onMouseDown: columnHeaderDragMouseDown,\n    draggable: draggableColumn,\n    ...dragDropHook\n  } = useDragDrop({\n    allowDragDrop: true,\n    containerRef,\n    draggableClassName: `vuuTable`,\n    itemQuery: \".vuuTableHeaderCell\",\n    onDrop: handleDropColumnHeader,\n    orientation: \"horizontal\",\n    scrollingContainerRef,\n  });\n\n  return {\n    draggableColumn,\n    draggedColumnIndex: dragDropHook.draggedItemIndex,\n    onClick: handleColumnHeaderClick,\n    onMouseDown: columnHeaderDragMouseDown,\n    setContainerRef: useForkRef(setContainerRef, rowRef),\n  };\n};\n"],"names":[],"mappings":"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"}