@vuu-ui/vuu-table 0.13.111-alpha.2 → 0.13.111

package/esm/cell-renderers/toggle-cell/ToggleCell.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { isRpcSuccess, dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent, isTypeDescriptor, isValueListRenderer } from '@vuu-ui/vuu-utils';
+import { dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent, isTypeDescriptor, isValueListRenderer } from '@vuu-ui/vuu-utils';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
@@ -38,7 +38,7 @@ const ToggleCell = memo(function ToggleCell2({
         { previousValue: value, value: newValue },
         "commit"
       );
-      if (isRpcSuccess(res)) {
+      if (res === true) {
         dispatchCustomEvent(evt.target, "vuu-commit");
       }
       return res;

package/esm/cell-renderers/toggle-cell/ToggleCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  CommitHandler,\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  isRpcSuccess,\n  isTypeDescriptor,\n  isValueListRenderer,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n    return type.renderer.values;\n  } else {\n    throw Error(\n      `useLookupValues column ${name} has not been configured with a values list`,\n    );\n  }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n  column,\n  columnMap,\n  onEdit,\n  row,\n}: TableCellRendererProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-cell\",\n    css: toggleCellCss,\n    window: targetWindow,\n  });\n\n  const values = getValueList(column);\n  const dataIdx = columnMap[column.name];\n  const value = row[dataIdx] as string;\n\n  const handleCommit = useCallback<CommitHandler<HTMLButtonElement>>(\n    async (evt, newValue) => {\n      const res = await onEdit?.(\n        { previousValue: value, value: newValue },\n        \"commit\",\n      );\n      if (isRpcSuccess(res)) {\n        dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n      }\n      return res;\n    },\n    [onEdit, value],\n  );\n\n  return (\n    <CycleStateButton\n      className={cx(classBase, `${classBase}-${column.name}`)}\n      onCommit={handleCommit}\n      value={value}\n      values={values}\n      variant=\"cta\"\n    >\n      {value}\n    </CycleStateButton>\n  );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["ToggleCell"],"mappings":";;;;;;;;;AAsBA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAI,iBAAiB,IAAI,CAAA,IAAK,mBAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA;AAAA,KAChC;AAAA;AAEJ,CAAA;AAEa,MAAA,UAAA,GAAa,IAAK,CAAA,SAASA,WAAW,CAAA;AAAA,EACjD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA;AAClC,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA;AAEzB,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,OAAO,KAAK,QAAa,KAAA;AACvB,MAAA,MAAM,MAAM,MAAM,MAAA;AAAA,QAChB,EAAE,aAAA,EAAe,KAAO,EAAA,KAAA,EAAO,QAAS,EAAA;AAAA,QACxC;AAAA,OACF;AACA,MAAI,IAAA,YAAA,CAAa,GAAG,CAAG,EAAA;AACrB,QAAoB,mBAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAE7D,MAAO,OAAA,GAAA;AAAA,KACT;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,GAChB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,MACtD,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAQ,EAAA,KAAA;AAAA,MAEP,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA,EAAG,yBAAyB;AAE5B,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
+{"version":3,"file":"ToggleCell.js","sources":["../../../../../packages/vuu-table/src/cell-renderers/toggle-cell/ToggleCell.tsx"],"sourcesContent":["import {\n  ColumnDescriptor,\n  TableCellRendererProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n  CommitHandler,\n  dataColumnAndKeyUnchanged,\n  dispatchCustomEvent,\n  isTypeDescriptor,\n  isValueListRenderer,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport { memo, useCallback } from \"react\";\nimport { CycleStateButton } from \"@vuu-ui/vuu-ui-controls\";\n\nimport toggleCellCss from \"./ToggleCell.css\";\n\nconst classBase = \"vuuTableToggleCell\";\n\nconst getValueList = ({ name, type }: ColumnDescriptor) => {\n  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {\n    return type.renderer.values;\n  } else {\n    throw Error(\n      `useLookupValues column ${name} has not been configured with a values list`,\n    );\n  }\n};\n\nexport const ToggleCell = memo(function ToggleCell({\n  column,\n  columnMap,\n  onEdit,\n  row,\n}: TableCellRendererProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-cell\",\n    css: toggleCellCss,\n    window: targetWindow,\n  });\n\n  const values = getValueList(column);\n  const dataIdx = columnMap[column.name];\n  const value = row[dataIdx] as string;\n\n  const handleCommit = useCallback<CommitHandler<HTMLButtonElement>>(\n    async (evt, newValue) => {\n      const res = await onEdit?.(\n        { previousValue: value, value: newValue },\n        \"commit\",\n      );\n      if (res === true) {\n        dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n      }\n      return res;\n    },\n    [onEdit, value],\n  );\n\n  return (\n    <CycleStateButton\n      className={cx(classBase, `${classBase}-${column.name}`)}\n      onCommit={handleCommit}\n      value={value}\n      values={values}\n      variant=\"cta\"\n    >\n      {value}\n    </CycleStateButton>\n  );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"toggle-cell\", ToggleCell, \"cell-renderer\", {\n  userCanAssign: false,\n});\n"],"names":["ToggleCell"],"mappings":";;;;;;;;;AAqBA,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,YAAe,GAAA,CAAC,EAAE,IAAA,EAAM,MAA6B,KAAA;AACzD,EAAA,IAAI,iBAAiB,IAAI,CAAA,IAAK,mBAAoB,CAAA,IAAA,CAAK,QAAQ,CAAG,EAAA;AAChE,IAAA,OAAO,KAAK,QAAS,CAAA,MAAA;AAAA,GAChB,MAAA;AACL,IAAM,MAAA,KAAA;AAAA,MACJ,0BAA0B,IAAI,CAAA,2CAAA;AAAA,KAChC;AAAA;AAEJ,CAAA;AAEa,MAAA,UAAA,GAAa,IAAK,CAAA,SAASA,WAAW,CAAA;AAAA,EACjD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,MAAA,GAAS,aAAa,MAAM,CAAA;AAClC,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,IAAI,OAAO,CAAA;AAEzB,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,OAAO,KAAK,QAAa,KAAA;AACvB,MAAA,MAAM,MAAM,MAAM,MAAA;AAAA,QAChB,EAAE,aAAA,EAAe,KAAO,EAAA,KAAA,EAAO,QAAS,EAAA;AAAA,QACxC;AAAA,OACF;AACA,MAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,QAAoB,mBAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAE7D,MAAO,OAAA,GAAA;AAAA,KACT;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,GAChB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,MAAA,CAAO,IAAI,CAAE,CAAA,CAAA;AAAA,MACtD,QAAU,EAAA,YAAA;AAAA,MACV,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAQ,EAAA,KAAA;AAAA,MAEP,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAA,EAAG,yBAAyB;AAE5B,iBAAkB,CAAA,aAAA,EAAe,YAAY,eAAiB,EAAA;AAAA,EAC5D,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}

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

@@ -1,4 +1,4 @@
-var columnResizerCss = ".vuuColumnResizer {\n  cursor: col-resize;\n  height: var(--vuu-table-col-header-row-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";
+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/GroupHeaderCell.css.js

@@ -1,4 +1,4 @@
-var headerCellCss = ".vuu-theme-deprecated {\n  --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"rgb(38, 112, 169)\" d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\"><animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" dur=\"1s\" from=\"0 50 50\" to=\"360 50 50\" repeatCount=\"indefinite\" /></path></svg>');\n}\n\n.vuuTableGroupHeaderCell {\n  --vuuColumnHeaderPill-margin: 0;\n  --cell-align: \"flex-start\";\n  text-align: left;\n  cursor: default;\n  /* ensure header row sits atop everything else when scrolling down */\n\n  --vuuColumnHeaderPill-margin: 0;\n  --vuuColumnHeaderPill-flex: 0 0 24px;\n\n  align-items: center;\n  background-color: var(\n    --vuuTableHeaderCell-background,\n    var(--table-background)\n  );\n  border-bottom: none;\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: 4px;\n  height: 100%;\n  padding: 0 12px 0 4px;\n  position: relative;\n  vertical-align: top;\n\n  &.vuuPinLeft,\n  &.vuuPinRight {\n    background-color: var(\n      --vuuTableHeaderCell-background,\n      var(--table-background)\n    );\n  }\n}\n\n.vuuTableGroupHeaderCell-inner {\n  align-items: center;\n  display: flex;\n  gap: 4px;\n  height: 100%;\n  padding-left: 1px;\n}\n\n.vuuTableGroupHeaderCell-col {\n  align-items: center;\n  background-color: inherit;\n  display: inline-flex;\n  flex: 0 1 auto;\n  height: calc(var(--vuuTableHeaderHeight) - 2px);\n  justify-content: space-between;\n  padding-right: 8px;\n  position: relative;\n}\n\n.vuuTableGroupHeaderCell-label {\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n}\n\n.vuuTableGroupHeaderCell-close {\n  --vuu-icon-height: 18px;\n  --vuu-icon-width: 18px;\n  cursor: pointer;\n  left: 3px;\n}\n\n.vuuTableGroupHeaderCell-resizing {\n  --columnResizer-color: var(--salt-color-blue-500);\n  --columnResizer-height: var(--table-height);\n  --columnResizer-width: 2px;\n}\n.vuuTableGroupHeaderCell-pending {\n  --pending-content: \"\";\n}\n\n.vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after {\n  content: var(--pending-content);\n  width: 24px;\n  height: 24px;\n  background-image: var(--svg-spinner);\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.vuuTableGroupHeaderCell:focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n  outline-offset: -2px;\n  /** This is to achieve a white background to outline dashes */\n  box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n  border-bottom: none;\n}\n";
+var headerCellCss = ".vuu-theme {\n  --svg-spinner: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path fill=\"rgb(38, 112, 169)\" d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\"><animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" dur=\"1s\" from=\"0 50 50\" to=\"360 50 50\" repeatCount=\"indefinite\" /></path></svg>');\n}\n\n.vuuTableGroupHeaderCell {\n  --vuuColumnHeaderPill-margin: 0;\n  --cell-align: \"flex-start\";\n  text-align: left;\n  cursor: default;\n  /* ensure header row sits atop everything else when scrolling down */\n\n  --vuuColumnHeaderPill-margin: 0;\n  --vuuColumnHeaderPill-flex: 0 0 24px;\n\n  align-items: center;\n  background-color: var(\n    --vuuTableHeaderCell-background,\n    var(--table-background)\n  );\n  border-bottom: none;\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: 4px;\n  height: 100%;\n  padding: 0 12px 0 4px;\n  position: relative;\n  vertical-align: top;\n\n  &.vuuPinLeft,\n  &.vuuPinRight {\n    background-color: var(\n      --vuuTableHeaderCell-background,\n      var(--table-background)\n    );\n  }\n}\n\n.vuuTableGroupHeaderCell-inner {\n  align-items: center;\n  display: flex;\n  gap: 4px;\n  height: 100%;\n  padding-left: 1px;\n}\n\n.vuuTableGroupHeaderCell-col {\n  align-items: center;\n  background-color: inherit;\n  display: inline-flex;\n  flex: 0 1 auto;\n  height: calc(var(--vuuTableHeaderHeight) - 2px);\n  justify-content: space-between;\n  padding-right: 8px;\n  position: relative;\n}\n\n.vuuTableGroupHeaderCell-label {\n  align-items: center;\n  display: flex;\n  flex: 0 0 auto;\n}\n\n.vuuTableGroupHeaderCell-close {\n  --vuu-icon-height: 18px;\n  --vuu-icon-width: 18px;\n  cursor: pointer;\n  left: 3px;\n}\n\n.vuuTableGroupHeaderCell-resizing {\n  --columnResizer-color: var(--salt-color-blue-500);\n  --columnResizer-height: var(--table-height);\n  --columnResizer-width: 2px;\n}\n.vuuTableGroupHeaderCell-pending {\n  --pending-content: \"\";\n}\n\n.vuuTableGroupHeaderCell-col:has(+ .vuuColumnResizer):after {\n  content: var(--pending-content);\n  width: 24px;\n  height: 24px;\n  background-image: var(--svg-spinner);\n  background-repeat: no-repeat;\n  background-size: cover;\n}\n\n.vuuTableGroupHeaderCell:focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n  outline-offset: -2px;\n  /** This is to achieve a white background to outline dashes */\n  box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n  border-bottom: none;\n}\n";
 
 export { headerCellCss as default };
 //# sourceMappingURL=GroupHeaderCell.css.js.map

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

@@ -1,4 +1,4 @@
-var headerCellCss = ".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(\n    --vuuTableHeaderCell-background,\n    var(--table-background)\n  );\n  border-bottom: none;\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: 2px;\n  height: 100%;\n  padding: 0 4px 0 8px;\n  position: relative;\n  vertical-align: top;\n\n  &.vuuPinLeft,\n  &.vuuPinRight {\n    background-color: var(\n      --vuuTableHeaderCell-background,\n      var(--table-background)\n    );\n  }\n}\n\n.vuuTableHeaderCell.vuuDragging,\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.vuuDragging {\n  height: var(--vuu-table-col-header-row-height);\n}\n\n.vuuTableHeaderCell-right {\n  --columnResizer-left: 0;\n  --vuuTable-columnMenu-margin: 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: 1 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\n.vuuTableHeaderCell:has(.saltCheckbox){\n  padding-left: 6px;\n}";
+var headerCellCss = ".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(\n    --vuuTableHeaderCell-background,\n    var(--table-background)\n  );\n  border-bottom: none;\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: 2px;\n  height: 100%;\n  padding: 0 4px 0 8px;\n  position: relative;\n  vertical-align: top;\n\n  &.vuuPinLeft,\n  &.vuuPinRight {\n    background-color: var(\n      --vuuTableHeaderCell-background,\n      var(--table-background)\n    );\n  }\n}\n\n.vuuTableHeaderCell.vuuDragging,\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.vuuDragging {\n  height: var(--vuu-table-col-header-height);\n}\n\n.vuuTableHeaderCell-right {\n  --columnResizer-left: 0;\n  --vuuTable-columnMenu-margin: 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: 1 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\n.vuuTableHeaderCell:has(.saltCheckbox){\n  padding-left: 6px;\n}";
 
 export { headerCellCss as default };
 //# sourceMappingURL=HeaderCell.css.js.map

package/esm/table-cell/TableCell.css.js

@@ -1,4 +1,4 @@
-var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  padding: 0px 1px 0 2px;\n}\n\n.vuuTableCell-editable:focus-within,\n.vuuTableCell:focus {\n  /** This is to achieve a white background to outline dashes */\n  /* box-shadow: inset 0 0 0 var(--cell-outline-width) white; */\n  border-bottom: none;\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n}\n\n.vuuTableCell-editable.vuuEditing {\n  outline: var(\n    --vuuTableCell-outline,\n    dotted var(--salt-focused-outlineColor) 2px\n  );\n\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n/* .vuuTableCell-editable:focus {\n  outline: none;\n} */\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
+var tableCellCss = ".vuuTableCell {\n  border-right-color: var(--cell-borderColor);\n  border-right-style: solid;\n  border-right-width: 1px;\n  /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */\n  display: inline-block;\n  white-space: nowrap;\n  height: 100%;\n  outline-offset: -2px;\n  overflow: hidden;\n  padding: var(--vuuTableCell-padding, 0 11px 0 8px);\n  text-overflow: ellipsis;\n  vertical-align: top;\n}\n\n.vuuTableCell-right {\n  text-align: right;\n}\n\n.vuuTableCell-editable {\n  align-items: center;\n  display: inline-flex;\n  text-overflow: unset;\n}\n\n.vuuTableCell:focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n  /** This is to achieve a white background to outline dashes */\n  box-shadow: inset 0 0 0 var(--cell-outline-width) white;\n  border-bottom: none;\n}\n\n.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--salt-focused-outlineColor) 2px\n  );\n\n  &:has(.vuuCheckboxRowSelector) {\n    outline: none;\n  }\n}\n.vuuTableCell-editable:focus {\n  outline: none;\n}\n\n.vuuTableCell.ContextOpen {\n  outline: var(\n    --vuuTableCell-outline,\n    solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px\n  );\n}\n";
 
 export { tableCellCss as default };
 //# sourceMappingURL=TableCell.css.js.map

package/esm/table-cell/TableCell.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
+import { getTypedValue } from '@vuu-ui/vuu-utils';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { getTypedValue } from '@vuu-ui/vuu-utils';
 import { useState, useCallback } from 'react';
 import { useCell } from '../useCell.js';
 import { useHighlighting } from '../useHighlighting.js';
@@ -30,30 +30,30 @@ const TableCell = ({
     (editState, editPhase) => {
       if (editPhase === "commit") {
         const { serverDataType = "string" } = column;
-        const typedValue = getTypedValue(
-          String(editState.value),
-          serverDataType,
-          true
-        );
-        return onDataEdited?.(
-          {
+        if (onDataEdited) {
+          const typedValue = getTypedValue(
+            String(editState.value),
+            serverDataType,
+            true
+          );
+          return onDataEdited({
             ...editState,
             row,
             columnName: column.name,
             value: typedValue
-          },
-          editPhase
-        );
+          });
+        } else {
+          throw Error(
+            "TableCell onDataEdited prop not supplied for an editable cell"
+          );
+        }
       } else {
         setHasError(editState.isValid === false);
-        onDataEdited?.(
-          {
-            ...editState,
-            row,
-            columnName: column.name
-          },
-          editPhase
-        );
+        onDataEdited({
+          ...editState,
+          row,
+          columnName: column.name
+        });
         return void 0;
       }
     },

package/esm/table-cell/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../packages/vuu-table/src/table-cell/TableCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type {\n  TableCellEditHandler,\n  TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { useCell } from \"../useCell\";\nimport { useHighlighting } from \"../useHighlighting\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n  column,\n  columnMap,\n  onClick,\n  onDataEdited,\n  row,\n  searchPattern = \"\",\n}: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-cell\",\n    css: tableCellCss,\n    window: targetWindow,\n  });\n\n  const [hasError, setHasError] = useState(false);\n\n  const { className, style } = useCell(column, classBase, false, hasError);\n  const { ariaColIndex, CellRenderer, valueFormatter } = column;\n  const dataIdx = columnMap[column.name];\n\n  const handleDataItemEdited = useCallback<TableCellEditHandler>(\n    (editState, editPhase) => {\n      if (editPhase === \"commit\") {\n        const { serverDataType = \"string\" } = column;\n        const typedValue = getTypedValue(\n          String(editState.value),\n          serverDataType,\n          true,\n        );\n        return onDataEdited?.(\n          {\n            ...editState,\n            row,\n            columnName: column.name,\n            value: typedValue,\n          },\n          editPhase,\n        );\n      } else {\n        setHasError(editState.isValid === false);\n        onDataEdited?.(\n          {\n            ...editState,\n            row,\n            columnName: column.name,\n          },\n          editPhase,\n        );\n        return undefined;\n      }\n    },\n    [column, onDataEdited, row],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick],\n  );\n\n  const value = valueFormatter(row[dataIdx]);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <div\n      aria-colindex={ariaColIndex}\n      className={className}\n      onClick={onClick ? handleClick : undefined}\n      role=\"cell\"\n      style={style}\n    >\n      {CellRenderer ? (\n        <CellRenderer\n          column={column}\n          columnMap={columnMap}\n          onEdit={handleDataItemEdited}\n          row={row}\n          searchPattern={searchPattern}\n        />\n      ) : (\n        valueWithHighlighting\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,EAAE,WAAW,KAAM,EAAA,GAAI,QAAQ,MAAQ,EAAA,SAAA,EAAW,OAAO,QAAQ,CAAA;AACvE,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,cAAA,EAAmB,GAAA,MAAA;AACvD,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AAErC,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,WAAW,SAAc,KAAA;AACxB,MAAA,IAAI,cAAc,QAAU,EAAA;AAC1B,QAAM,MAAA,EAAE,cAAiB,GAAA,QAAA,EAAa,GAAA,MAAA;AACtC,QAAA,MAAM,UAAa,GAAA,aAAA;AAAA,UACjB,MAAA,CAAO,UAAU,KAAK,CAAA;AAAA,UACtB,cAAA;AAAA,UACA;AAAA,SACF;AACA,QAAO,OAAA,YAAA;AAAA,UACL;AAAA,YACE,GAAG,SAAA;AAAA,YACH,GAAA;AAAA,YACA,YAAY,MAAO,CAAA,IAAA;AAAA,YACnB,KAAO,EAAA;AAAA,WACT;AAAA,UACA;AAAA,SACF;AAAA,OACK,MAAA;AACL,QAAY,WAAA,CAAA,SAAA,CAAU,YAAY,KAAK,CAAA;AACvC,QAAA,YAAA;AAAA,UACE;AAAA,YACE,GAAG,SAAA;AAAA,YACH,GAAA;AAAA,YACA,YAAY,MAAO,CAAA;AAAA,WACrB;AAAA,UACA;AAAA,SACF;AACA,QAAO,OAAA,KAAA,CAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,YAAA,EAAc,GAAG;AAAA,GAC5B;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EAAA,MAAM,KAAQ,GAAA,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC,CAAA;AACzC,EAAM,MAAA,qBAAA,GAAwB,eAAgB,CAAA,KAAA,EAAO,aAAa,CAAA;AAElE,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAQ,EAAA,oBAAA;AAAA,UACR,GAAA;AAAA,UACA;AAAA;AAAA,OAGF,GAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"TableCell.js","sources":["../../../../packages/vuu-table/src/table-cell/TableCell.tsx"],"sourcesContent":["import type {\n  DataItemEditHandler,\n  TableCellProps,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { MouseEventHandler, useCallback, useState } from \"react\";\nimport { useCell } from \"../useCell\";\nimport { useHighlighting } from \"../useHighlighting\";\n\nimport tableCellCss from \"./TableCell.css\";\n\nconst classBase = \"vuuTableCell\";\n\nexport const TableCell = ({\n  column,\n  columnMap,\n  onClick,\n  onDataEdited,\n  row,\n  searchPattern = \"\",\n}: TableCellProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-cell\",\n    css: tableCellCss,\n    window: targetWindow,\n  });\n\n  const [hasError, setHasError] = useState(false);\n\n  const { className, style } = useCell(column, classBase, false, hasError);\n  const { ariaColIndex, CellRenderer, valueFormatter } = column;\n  const dataIdx = columnMap[column.name];\n\n  const handleDataItemEdited = useCallback<DataItemEditHandler>(\n    (editState, editPhase) => {\n      if (editPhase === \"commit\") {\n        const { serverDataType = \"string\" } = column;\n        if (onDataEdited) {\n          const typedValue = getTypedValue(\n            String(editState.value),\n            serverDataType,\n            true,\n          );\n          return onDataEdited({\n            ...editState,\n            row,\n            columnName: column.name,\n            value: typedValue,\n          });\n        } else {\n          throw Error(\n            \"TableCell onDataEdited prop not supplied for an editable cell\",\n          );\n        }\n      } else {\n        setHasError(editState.isValid === false);\n        onDataEdited({\n          ...editState,\n          row,\n          columnName: column.name,\n        });\n        return undefined;\n      }\n    },\n    [column, onDataEdited, row],\n  );\n\n  const handleClick = useCallback<MouseEventHandler>(\n    (evt) => {\n      onClick?.(evt, column);\n    },\n    [column, onClick],\n  );\n\n  const value = valueFormatter(row[dataIdx]);\n  const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n  return (\n    <div\n      aria-colindex={ariaColIndex}\n      className={className}\n      onClick={onClick ? handleClick : undefined}\n      role=\"cell\"\n      style={style}\n    >\n      {CellRenderer ? (\n        <CellRenderer\n          column={column}\n          columnMap={columnMap}\n          onEdit={handleDataItemEdited}\n          row={row}\n          searchPattern={searchPattern}\n        />\n      ) : (\n        valueWithHighlighting\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA;AAEX,MAAM,YAAY,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,EAAM,MAAA,EAAE,WAAW,KAAM,EAAA,GAAI,QAAQ,MAAQ,EAAA,SAAA,EAAW,OAAO,QAAQ,CAAA;AACvE,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,cAAA,EAAmB,GAAA,MAAA;AACvD,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AAErC,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,WAAW,SAAc,KAAA;AACxB,MAAA,IAAI,cAAc,QAAU,EAAA;AAC1B,QAAM,MAAA,EAAE,cAAiB,GAAA,QAAA,EAAa,GAAA,MAAA;AACtC,QAAA,IAAI,YAAc,EAAA;AAChB,UAAA,MAAM,UAAa,GAAA,aAAA;AAAA,YACjB,MAAA,CAAO,UAAU,KAAK,CAAA;AAAA,YACtB,cAAA;AAAA,YACA;AAAA,WACF;AACA,UAAA,OAAO,YAAa,CAAA;AAAA,YAClB,GAAG,SAAA;AAAA,YACH,GAAA;AAAA,YACA,YAAY,MAAO,CAAA,IAAA;AAAA,YACnB,KAAO,EAAA;AAAA,WACR,CAAA;AAAA,SACI,MAAA;AACL,UAAM,MAAA,KAAA;AAAA,YACJ;AAAA,WACF;AAAA;AACF,OACK,MAAA;AACL,QAAY,WAAA,CAAA,SAAA,CAAU,YAAY,KAAK,CAAA;AACvC,QAAa,YAAA,CAAA;AAAA,UACX,GAAG,SAAA;AAAA,UACH,GAAA;AAAA,UACA,YAAY,MAAO,CAAA;AAAA,SACpB,CAAA;AACD,QAAO,OAAA,KAAA,CAAA;AAAA;AACT,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,YAAA,EAAc,GAAG;AAAA,GAC5B;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAQ,KAAA;AACP,MAAA,OAAA,GAAU,KAAK,MAAM,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,QAAQ,OAAO;AAAA,GAClB;AAEA,EAAA,MAAM,KAAQ,GAAA,cAAA,CAAe,GAAI,CAAA,OAAO,CAAC,CAAA;AACzC,EAAM,MAAA,qBAAA,GAAwB,eAAgB,CAAA,KAAA,EAAO,aAAa,CAAA;AAElE,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,YAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAA,EAAS,UAAU,WAAc,GAAA,KAAA,CAAA;AAAA,MACjC,IAAK,EAAA,MAAA;AAAA,MACL,KAAA;AAAA,MAEC,QACC,EAAA,YAAA,mBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,MAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAQ,EAAA,oBAAA;AAAA,UACR,GAAA;AAAA,UACA;AAAA;AAAA,OAGF,GAAA;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/esm/table-dom-utils.js

@@ -1,5 +1,3 @@
-import { getAriaRowIndex, getAriaColIndex } from '@vuu-ui/vuu-utils';
-
 const headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;
 const dataCellQuery = (ariaRowIdx, ariaColIdx) => `.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;
 const getLevelUp = (containerRef, cellPos) => {
@@ -63,6 +61,26 @@ const rowIsExpanded = (cell) => {
   }
 };
 const cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
+const getAriaRowIndex = (rowElement) => {
+  const rowIndex = rowElement?.ariaRowIndex;
+  if (rowIndex != null) {
+    const index = parseInt(rowIndex);
+    if (!isNaN(index)) {
+      return index;
+    }
+  }
+  return -1;
+};
+const getAriaColIndex = (cellElement) => {
+  const colIndex = cellElement?.ariaColIndex;
+  if (colIndex != null) {
+    const index = parseInt(colIndex);
+    if (!isNaN(index)) {
+      return index;
+    }
+  }
+  return -1;
+};
 const getRowElementByAriaIndex = (container, rowIndex) => {
   if (rowIndex === -1) {
     return null;
@@ -162,5 +180,5 @@ const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer =
   }
 };
 
-export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getAriaCellPos, getFocusedCell, getHeaderCell, getLevelUp, getNextCellPos, getRowElementByAriaIndex, getTableCell, getTreeNodeOperation, headerCellQuery, howFarIsRowOutsideViewport };
+export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getAriaCellPos, getAriaColIndex, getAriaRowIndex, getFocusedCell, getHeaderCell, getLevelUp, getNextCellPos, getRowElementByAriaIndex, getTableCell, getTreeNodeOperation, headerCellQuery, howFarIsRowOutsideViewport };
 //# sourceMappingURL=table-dom-utils.js.map

package/esm/table-dom-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-dom-utils.js","sources":["../../../packages/vuu-table/src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport {\n  getAriaColIndex,\n  getAriaRowIndex,\n  type ArrowKey,\n  type PageKey,\n} from \"@vuu-ui/vuu-utils\";\nimport type { CellPos } from \"@vuu-ui/vuu-table-types\";\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n  `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;\n\nexport const dataCellQuery = (ariaRowIdx: number, ariaColIdx: number) =>\n  `.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;\n\nexport const getLevelUp = (\n  containerRef: RefObject<HTMLElement | null>,\n  cellPos: CellPos,\n): CellPos => {\n  const cell = getTableCell(containerRef, cellPos);\n  let row = cell?.parentElement;\n  const level = parseInt(row?.ariaLevel ?? \"1\");\n  if (level > 1) {\n    const targetLevel = `${level - 1}`;\n    while (row !== null && row.ariaLevel !== targetLevel) {\n      row = row.previousElementSibling as HTMLElement;\n    }\n    if (row) {\n      const nextRowIndex = parseInt(row.ariaRowIndex ?? \"- 1\");\n      if (nextRowIndex !== -1) {\n        return [nextRowIndex, 1];\n      }\n    }\n  }\n  return cellPos;\n};\nexport const getTableCell = (\n  containerRef: RefObject<HTMLElement | null>,\n  [rowIdx, colIdx]: CellPos,\n) => {\n  const cssQuery = dataCellQuery(rowIdx, colIdx);\n  const cell = containerRef.current?.querySelector(cssQuery) as HTMLDivElement;\n\n  if (cellIsEditable(cell)) {\n    // Dropdown gets focus, Input does not\n    const focusableContent = cell.querySelector(\n      `button,input[type=\"checkbox\"]`,\n    ) as HTMLElement;\n    return focusableContent || cell;\n  } else {\n    return cell;\n  }\n};\n\nexport const getHeaderCell = (\n  containerRef: RefObject<HTMLElement | null>,\n  columnName: string,\n) =>\n  containerRef.current?.querySelector(\n    `.vuuTableHeaderCell[data-column-name=\"${columnName}\"]`,\n  ) as HTMLDivElement | null;\n\nexport const getFocusedCell = (el: HTMLElement | Element | null) => {\n  if (el?.role == \"cell\" || el?.role === \"columnheader\") {\n    return el as HTMLDivElement;\n  } else {\n    return el?.closest(\n      \"[role='columnHeader'],[role='cell']\",\n    ) as HTMLDivElement | null;\n  }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n  cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellDropdownShowing = (cell: HTMLDivElement | null) => {\n  if (cellIsEditable(cell)) {\n    return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n  }\n  return false;\n};\n\nconst cellIsGroupCell = (cell: HTMLElement | null) =>\n  cell?.classList.contains(\"vuuTableGroupCell\");\n\nconst rowIsExpanded = (cell: HTMLElement) => {\n  switch (cell.parentElement?.ariaExpanded) {\n    case \"true\":\n      return true;\n    case \"false\":\n      return false;\n    default:\n      return undefined;\n  }\n};\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n  cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getRowElementByAriaIndex = (\n  container: HTMLDivElement | EventTarget,\n  rowIndex: number,\n) => {\n  if (rowIndex === -1) {\n    return null;\n  } else {\n    const activeRow = (container as HTMLElement).querySelector(\n      `[aria-rowindex=\"${rowIndex}\"]`,\n    ) as HTMLElement;\n\n    if (activeRow) {\n      return activeRow;\n    } else {\n      throw Error(\n        `getRowElementAtIndex no row found for index index ${rowIndex}`,\n      );\n    }\n  }\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) =>\n  getAriaColIndex(cellElement);\n\nexport const getAriaCellPos = (tableCell: HTMLDivElement): CellPos => {\n  const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n  return [getAriaRowIndex(focusedRow), getAriaColIndex(tableCell)];\n};\n\nconst closestRow = (el: HTMLElement) =>\n  el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n  getAriaRowIndex(closestRow(el));\n\nexport function getNextCellPos(\n  key: ArrowKey,\n  [rowIdx, colIdx]: CellPos,\n  columnCount: number,\n  maxRowIndex: number,\n): CellPos {\n  if (key === \"ArrowUp\") {\n    if (rowIdx > -1) {\n      return [rowIdx - 1, colIdx];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowDown\") {\n    if (rowIdx === -1) {\n      return [1, colIdx];\n    } else if (rowIdx === maxRowIndex) {\n      return [rowIdx, colIdx];\n    } else {\n      return [rowIdx + 1, colIdx];\n    }\n  } else if (key === \"ArrowRight\") {\n    if (colIdx < columnCount) {\n      return [rowIdx, colIdx + 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowLeft\") {\n    if (colIdx > 1) {\n      return [rowIdx, colIdx - 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  }\n  return [rowIdx, colIdx];\n}\n\nexport type TreeNodeOperation = \"expand\" | \"collapse\" | \"level-up\";\n\nexport const getTreeNodeOperation = (\n  containerRef: RefObject<HTMLElement | null>,\n  navigationStyle: \"cell\" | \"tree\",\n  cellPos: CellPos,\n  key: NavigationKey,\n  shiftKey: boolean,\n): TreeNodeOperation | undefined => {\n  const cell = getTableCell(containerRef, cellPos);\n  if (navigationStyle === \"cell\" && !cellIsGroupCell(cell)) {\n    return undefined;\n  }\n  if (navigationStyle == \"cell\" && !shiftKey) {\n    return undefined;\n  }\n  if (cellIsGroupCell(cell)) {\n    const isExpanded = rowIsExpanded(cell);\n    if (isExpanded === true) {\n      if (key === \"ArrowLeft\") {\n        return \"collapse\";\n      }\n    } else if (isExpanded === false) {\n      if (key === \"ArrowRight\") {\n        return \"expand\";\n      } else if (key === \"ArrowLeft\") {\n        return \"level-up\";\n      }\n    } else if (key === \"ArrowLeft\") {\n      return \"level-up\";\n    }\n  }\n};\n\nconst NO_SCROLL_NECESSARY = [undefined, undefined] as const;\n\nexport const howFarIsRowOutsideViewport = (\n  rowEl: HTMLElement,\n  totalHeaderHeight: number,\n  contentContainer = rowEl.closest(\".vuuTable-contentContainer\"),\n): readonly [ScrollDirection | undefined, number | undefined] => {\n  //TODO lots of scope for optimisation here\n  if (contentContainer) {\n    // TODO take totalHeaderHeight into consideration\n    const viewport = contentContainer?.getBoundingClientRect();\n    const upperBoundary = viewport.top + totalHeaderHeight;\n    const row = rowEl.getBoundingClientRect();\n    if (row) {\n      if (row.bottom > viewport.bottom) {\n        return [\"down\", row.bottom - viewport.bottom];\n      } else if (row.top < upperBoundary) {\n        return [\"up\", row.top - upperBoundary];\n      } else {\n        return NO_SCROLL_NECESSARY;\n      }\n    } else {\n      throw Error(\"Whats going on, row not found\");\n    }\n  } else {\n    throw Error(\"Whats going on, scrollbar container not found\");\n  }\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"table-dom-utils.js","sources":["../../../packages/vuu-table/src/table-dom-utils.ts"],"sourcesContent":["import { RefObject } from \"react\";\nimport { ScrollDirection } from \"./useTableScroll\";\nimport type { ArrowKey, PageKey } from \"@vuu-ui/vuu-utils\";\nimport type { CellPos } from \"@vuu-ui/vuu-table-types\";\n\nexport type NavigationKey = PageKey | ArrowKey;\n\nexport const headerCellQuery = (colIdx: number) =>\n  `.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;\n\nexport const dataCellQuery = (ariaRowIdx: number, ariaColIdx: number) =>\n  `.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;\n\nexport const getLevelUp = (\n  containerRef: RefObject<HTMLElement | null>,\n  cellPos: CellPos,\n): CellPos => {\n  const cell = getTableCell(containerRef, cellPos);\n  let row = cell?.parentElement;\n  const level = parseInt(row?.ariaLevel ?? \"1\");\n  if (level > 1) {\n    const targetLevel = `${level - 1}`;\n    while (row !== null && row.ariaLevel !== targetLevel) {\n      row = row.previousElementSibling as HTMLElement;\n    }\n    if (row) {\n      const nextRowIndex = parseInt(row.ariaRowIndex ?? \"- 1\");\n      if (nextRowIndex !== -1) {\n        return [nextRowIndex, 1];\n      }\n    }\n  }\n  return cellPos;\n};\nexport const getTableCell = (\n  containerRef: RefObject<HTMLElement | null>,\n  [rowIdx, colIdx]: CellPos,\n) => {\n  const cssQuery = dataCellQuery(rowIdx, colIdx);\n  const cell = containerRef.current?.querySelector(cssQuery) as HTMLDivElement;\n\n  if (cellIsEditable(cell)) {\n    // Dropdown gets focus, Input does not\n    const focusableContent = cell.querySelector(\n      `button,input[type=\"checkbox\"]`,\n    ) as HTMLElement;\n    return focusableContent || cell;\n  } else {\n    return cell;\n  }\n};\n\nexport const getHeaderCell = (\n  containerRef: RefObject<HTMLElement | null>,\n  columnName: string,\n) =>\n  containerRef.current?.querySelector(\n    `.vuuTableHeaderCell[data-column-name=\"${columnName}\"]`,\n  ) as HTMLDivElement | null;\n\nexport const getFocusedCell = (el: HTMLElement | Element | null) => {\n  if (el?.role == \"cell\" || el?.role === \"columnheader\") {\n    return el as HTMLDivElement;\n  } else {\n    return el?.closest(\n      \"[role='columnHeader'],[role='cell']\",\n    ) as HTMLDivElement | null;\n  }\n};\n\nexport const cellIsEditable = (cell: HTMLDivElement | null) =>\n  cell?.classList.contains(\"vuuTableCell-editable\");\n\nexport const cellDropdownShowing = (cell: HTMLDivElement | null) => {\n  if (cellIsEditable(cell)) {\n    return cell?.querySelector('.saltDropdown[aria-expanded=\"true\"]') !== null;\n  }\n  return false;\n};\n\nconst cellIsGroupCell = (cell: HTMLElement | null) =>\n  cell?.classList.contains(\"vuuTableGroupCell\");\n\nconst rowIsExpanded = (cell: HTMLElement) => {\n  switch (cell.parentElement?.ariaExpanded) {\n    case \"true\":\n      return true;\n    case \"false\":\n      return false;\n    default:\n      return undefined;\n  }\n};\n\nexport const cellIsTextInput = (cell: HTMLElement) =>\n  cell.querySelector(\".vuuTableInputCell\") !== null;\n\nexport const getAriaRowIndex = (rowElement: HTMLElement | null) => {\n  const rowIndex = rowElement?.ariaRowIndex;\n  if (rowIndex != null) {\n    const index = parseInt(rowIndex);\n    if (!isNaN(index)) {\n      return index;\n    }\n  }\n  return -1;\n};\n\nexport const getAriaColIndex = (cellElement: HTMLElement | null) => {\n  const colIndex = cellElement?.ariaColIndex;\n  if (colIndex != null) {\n    const index = parseInt(colIndex);\n    if (!isNaN(index)) {\n      return index;\n    }\n  }\n  return -1;\n};\n\nexport const getRowElementByAriaIndex = (\n  container: HTMLDivElement | EventTarget,\n  rowIndex: number,\n) => {\n  if (rowIndex === -1) {\n    return null;\n  } else {\n    const activeRow = (container as HTMLElement).querySelector(\n      `[aria-rowindex=\"${rowIndex}\"]`,\n    ) as HTMLElement;\n\n    if (activeRow) {\n      return activeRow;\n    } else {\n      throw Error(\n        `getRowElementAtIndex no row found for index index ${rowIndex}`,\n      );\n    }\n  }\n};\n\nexport const getIndexFromCellElement = (cellElement: HTMLElement | null) =>\n  getAriaColIndex(cellElement);\n\nexport const getAriaCellPos = (tableCell: HTMLDivElement): CellPos => {\n  const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n  return [getAriaRowIndex(focusedRow), getAriaColIndex(tableCell)];\n};\n\nconst closestRow = (el: HTMLElement) =>\n  el.closest('[role=\"row\"]') as HTMLElement;\n\nexport const closestRowIndex = (el: HTMLElement) =>\n  getAriaRowIndex(closestRow(el));\n\nexport function getNextCellPos(\n  key: ArrowKey,\n  [rowIdx, colIdx]: CellPos,\n  columnCount: number,\n  maxRowIndex: number,\n): CellPos {\n  if (key === \"ArrowUp\") {\n    if (rowIdx > -1) {\n      return [rowIdx - 1, colIdx];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowDown\") {\n    if (rowIdx === -1) {\n      return [1, colIdx];\n    } else if (rowIdx === maxRowIndex) {\n      return [rowIdx, colIdx];\n    } else {\n      return [rowIdx + 1, colIdx];\n    }\n  } else if (key === \"ArrowRight\") {\n    if (colIdx < columnCount) {\n      return [rowIdx, colIdx + 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowLeft\") {\n    if (colIdx > 1) {\n      return [rowIdx, colIdx - 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  }\n  return [rowIdx, colIdx];\n}\n\nexport type TreeNodeOperation = \"expand\" | \"collapse\" | \"level-up\";\n\nexport const getTreeNodeOperation = (\n  containerRef: RefObject<HTMLElement | null>,\n  navigationStyle: \"cell\" | \"tree\",\n  cellPos: CellPos,\n  key: NavigationKey,\n  shiftKey: boolean,\n): TreeNodeOperation | undefined => {\n  const cell = getTableCell(containerRef, cellPos);\n  if (navigationStyle === \"cell\" && !cellIsGroupCell(cell)) {\n    return undefined;\n  }\n  if (navigationStyle == \"cell\" && !shiftKey) {\n    return undefined;\n  }\n  if (cellIsGroupCell(cell)) {\n    const isExpanded = rowIsExpanded(cell);\n    if (isExpanded === true) {\n      if (key === \"ArrowLeft\") {\n        return \"collapse\";\n      }\n    } else if (isExpanded === false) {\n      if (key === \"ArrowRight\") {\n        return \"expand\";\n      } else if (key === \"ArrowLeft\") {\n        return \"level-up\";\n      }\n    } else if (key === \"ArrowLeft\") {\n      return \"level-up\";\n    }\n  }\n};\n\nconst NO_SCROLL_NECESSARY = [undefined, undefined] as const;\n\nexport const howFarIsRowOutsideViewport = (\n  rowEl: HTMLElement,\n  totalHeaderHeight: number,\n  contentContainer = rowEl.closest(\".vuuTable-contentContainer\"),\n): readonly [ScrollDirection | undefined, number | undefined] => {\n  //TODO lots of scope for optimisation here\n  if (contentContainer) {\n    // TODO take totalHeaderHeight into consideration\n    const viewport = contentContainer?.getBoundingClientRect();\n    const upperBoundary = viewport.top + totalHeaderHeight;\n    const row = rowEl.getBoundingClientRect();\n    if (row) {\n      if (row.bottom > viewport.bottom) {\n        return [\"down\", row.bottom - viewport.bottom];\n      } else if (row.top < upperBoundary) {\n        return [\"up\", row.top - upperBoundary];\n      } else {\n        return NO_SCROLL_NECESSARY;\n      }\n    } else {\n      throw Error(\"Whats going on, row not found\");\n    }\n  } else {\n    throw Error(\"Whats going on, scrollbar container not found\");\n  }\n};\n"],"names":[],"mappings":"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"}

package/esm/table-header/TableHeader.js

@@ -7,12 +7,12 @@ import { HeaderProvider } from './HeaderProvider.js';
 import { useTableHeader } from './useTableHeader.js';
 
 const isHeaderElement = (h) => isValidElement(h);
-const classBase = "vuuTableHeader";
 const TableHeader = memo(
   ({
     allowDragColumnHeader,
     allowSelectAll,
     allRowsSelected,
+    classBase = "vuuTable",
     columns,
     customHeader,
     headings,
@@ -23,7 +23,6 @@ const TableHeader = memo(
     onRemoveGroupColumn,
     onResizeColumn,
     onSortColumn,
-    showBookends,
     showColumnHeaderMenus,
     tableConfig,
     tableId,
@@ -73,93 +72,96 @@ const TableHeader = memo(
       tableConfig
     });
     const visibleColumns = columns.filter(isNotHidden);
-    return /* @__PURE__ */ jsxs("div", { className: classBase, ref: setContainerRef, role: "rowgroup", children: [
-      headings.map((colHeaders, i) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "vuuTable-heading",
-          role: "row",
-          "aria-rowindex": i + 1,
-          children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j))
-        },
-        i
-      )),
-      /* @__PURE__ */ jsxs(
-        DragDropProvider,
-        {
-          onDragEnd,
-          onDragStart,
-          modifiers: [RestrictToHorizontalAxis],
-          sensors: [
-            KeyboardSensor.configure({
-              keyboardCodes: {
-                start: ["Space"],
-                cancel: ["Escape"],
-                end: ["Space", "Enter"],
-                left: ["ArrowLeft"],
-                right: ["ArrowRight"],
-                up: [],
-                down: []
-              }
-            }),
-            PointerSensor
-          ],
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "vuuTableColHeaderRow",
-                role: "row",
-                "aria-rowindex": headings.length + 1,
-                children: [
-                  showBookends ? /* @__PURE__ */ jsx("div", { className: "vuuSelectionDecorator vuuStickyLeft" }) : null,
-                  visibleColumns.map((col, i) => {
-                    const allowDragDrop = allowDragColumnHeader && !col.pin ? true : false;
-                    return isGroupColumn(col) ? /* @__PURE__ */ jsx(
-                      GroupHeaderCell,
-                      {
-                        column: col,
-                        id: `${tableId}-${col.name}`,
-                        onMoveColumn: onMoveGroupColumn,
-                        onRemoveColumn: onRemoveGroupColumn,
-                        onResize: onResizeColumn
-                      },
-                      col.name
-                    ) : /* @__PURE__ */ jsx(
-                      HeaderCell,
-                      {
-                        allowDragColumnHeader: allowDragDrop,
-                        allowSelectAll,
-                        allRowsSelected,
-                        column: col,
-                        index: i,
-                        id: `${tableId}-${col.name}`,
-                        onCheckBoxColumnHeaderClick,
-                        onClick,
-                        onResize: onResizeColumn,
-                        showColumnHeaderMenus
-                      },
-                      `${col.name}-${allowDragDrop}`
-                    );
-                  }),
-                  showBookends ? /* @__PURE__ */ jsx("div", { className: "vuuSelectionDecorator vuuStickyRight" }) : null
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(DragOverlay, { children: dragColumn ? /* @__PURE__ */ jsx("div", { id: dragColumn.id, className: "DragColumn", children: /* @__PURE__ */ jsx(
-              HeaderCell,
-              {
-                column: dragColumn.column,
-                className: "vuuDragging",
-                id: `${tableId}-${dragColumn.id}-dragging`,
-                index: -1
-              }
-            ) }) : null })
-          ]
-        }
-      ),
-      customHeaders
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${classBase}-col-headings`,
+        ref: setContainerRef,
+        role: "rowgroup",
+        children: [
+          headings.map((colHeaders, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "vuuTable-heading",
+              role: "row",
+              "aria-rowindex": i + 1,
+              children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j))
+            },
+            i
+          )),
+          /* @__PURE__ */ jsxs(
+            DragDropProvider,
+            {
+              onDragEnd,
+              onDragStart,
+              modifiers: [RestrictToHorizontalAxis],
+              sensors: [
+                KeyboardSensor.configure({
+                  keyboardCodes: {
+                    start: ["Space"],
+                    cancel: ["Escape"],
+                    end: ["Space", "Enter"],
+                    left: ["ArrowLeft"],
+                    right: ["ArrowRight"],
+                    up: [],
+                    down: []
+                  }
+                }),
+                PointerSensor
+              ],
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `${classBase}-col-headers`,
+                    role: "row",
+                    "aria-rowindex": headings.length + 1,
+                    children: visibleColumns.map(
+                      (col, i) => isGroupColumn(col) ? /* @__PURE__ */ jsx(
+                        GroupHeaderCell,
+                        {
+                          column: col,
+                          id: `${tableId}-${col.name}`,
+                          onMoveColumn: onMoveGroupColumn,
+                          onRemoveColumn: onRemoveGroupColumn,
+                          onResize: onResizeColumn
+                        },
+                        col.name
+                      ) : /* @__PURE__ */ jsx(
+                        HeaderCell,
+                        {
+                          allowDragColumnHeader,
+                          allowSelectAll,
+                          allRowsSelected,
+                          column: col,
+                          index: i,
+                          id: `${tableId}-${col.name}`,
+                          onCheckBoxColumnHeaderClick,
+                          onClick,
+                          onResize: onResizeColumn,
+                          showColumnHeaderMenus
+                        },
+                        col.name
+                      )
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(DragOverlay, { children: dragColumn ? /* @__PURE__ */ jsx("div", { id: dragColumn.id, className: "DragColumn", children: /* @__PURE__ */ jsx(
+                  HeaderCell,
+                  {
+                    column: dragColumn.column,
+                    className: "vuuDragging",
+                    id: `${tableId}-${dragColumn.id}-dragging`,
+                    index: -1
+                  }
+                ) }) : null })
+              ]
+            }
+          ),
+          customHeaders
+        ]
+      }
+    );
   }
 );
 TableHeader.displayName = "TableHeader";

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../packages/vuu-table/src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  DragDropProvider,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  RestrictToHorizontalAxis,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ColumnDescriptor,\n  ColumnMoveHandler,\n  CustomHeader,\n  CustomHeaderComponent,\n  CustomHeaderElement,\n  HeaderCellProps,\n  RuntimeColumnDescriptor,\n  TableColumnResizeHandler,\n  TableConfig,\n  TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport {\n  cloneElement,\n  isValidElement,\n  memo,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { HeaderProvider } from \"./HeaderProvider\";\nimport { useTableHeader } from \"./useTableHeader\";\n\nexport type ColumnSortHandler = (\n  column: ColumnDescriptor,\n  addToExistingSort: boolean,\n  sortType?: VuuSortType,\n) => void;\n\nconst isHeaderElement = (h: CustomHeader): h is CustomHeaderElement =>\n  isValidElement(h);\n\nconst classBase = \"vuuTableHeader\";\n\nexport interface TableHeaderProps\n  extends Pick<\n    HeaderCellProps,\n    | \"allRowsSelected\"\n    | \"allowDragColumnHeader\"\n    | \"allowSelectAll\"\n    | \"onCheckBoxColumnHeaderClick\"\n    | \"showColumnHeaderMenus\"\n  > {\n  columns: RuntimeColumnDescriptor[];\n  customHeader?: CustomHeader | CustomHeader[];\n  headings: TableHeadings;\n  onHeightMeasured: (height: number, count: number) => void;\n  onResizeColumn: TableColumnResizeHandler;\n  onMoveColumn: ColumnMoveHandler;\n  onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n  onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n  onSortColumn: ColumnSortHandler;\n  showBookends?: boolean;\n  tableConfig: TableConfig;\n  tableId: string;\n  virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n  ({\n    allowDragColumnHeader,\n    allowSelectAll,\n    allRowsSelected,\n    columns,\n    customHeader,\n    headings,\n    onCheckBoxColumnHeaderClick,\n    onHeightMeasured,\n    onMoveColumn,\n    onMoveGroupColumn,\n    onRemoveGroupColumn,\n    onResizeColumn,\n    onSortColumn,\n    showBookends,\n    showColumnHeaderMenus,\n    tableConfig,\n    tableId,\n    virtualColSpan = 0,\n  }: TableHeaderProps) => {\n    const [customHeaders, customHeaderCount] = useMemo<\n      [ReactElement | ReactElement[] | null, number]\n    >(() => {\n      const offset = headings.length;\n      const createElement = (\n        Component: CustomHeaderComponent,\n        index: number,\n      ) => (\n        <Component\n          ariaRowIndex={offset + index + 2}\n          ariaRole=\"row\"\n          columns={columns}\n          key={index}\n          virtualColSpan={virtualColSpan}\n        />\n      );\n\n      const enrichElementWithAria = (el: ReactElement, rowIndex: number) => {\n        const offset = headings.length;\n        return cloneElement(el, {\n          \"aria-rowindex\": rowIndex + offset + 2,\n          ariaRole: \"row\",\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        } as any);\n      };\n\n      if (customHeader === undefined) {\n        return [null, 0];\n      } else if (Array.isArray(customHeader)) {\n        const header = (\n          <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n            {customHeader.map((header, i) =>\n              isHeaderElement(header)\n                ? enrichElementWithAria(header, i)\n                : createElement(header, i),\n            )}\n          </HeaderProvider>\n        );\n        return [header, customHeader.length];\n      } else if (isHeaderElement(customHeader)) {\n        // TODO rowIndex and role\n        const header = (\n          <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n            {enrichElementWithAria(customHeader, 0)}\n          </HeaderProvider>\n        );\n        return [header, 1];\n      } else {\n        return [createElement(customHeader, 0), 1];\n      }\n    }, [columns, customHeader, headings.length, virtualColSpan]);\n\n    const { dragColumn, onClick, onDragEnd, onDragStart, setContainerRef } =\n      useTableHeader({\n        columns,\n        customHeaderCount,\n        headings,\n        onHeightMeasured,\n        onMoveColumn,\n        onSortColumn,\n        tableConfig,\n      });\n\n    const visibleColumns = columns.filter(isNotHidden);\n\n    return (\n      <div className={classBase} ref={setContainerRef} role=\"rowgroup\">\n        {headings.map((colHeaders, i) => (\n          <div\n            className=\"vuuTable-heading\"\n            key={i}\n            role=\"row\"\n            aria-rowindex={i + 1}\n          >\n            {colHeaders.map(({ label, width }, j) => (\n              <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n                {label}\n              </div>\n            ))}\n          </div>\n        ))}\n        <DragDropProvider // whats the difference between this and DnDContext\n          onDragEnd={onDragEnd}\n          onDragStart={onDragStart}\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          //@ts-ignore typing error from dnd-kit\n          modifiers={[RestrictToHorizontalAxis]}\n          sensors={[\n            KeyboardSensor.configure({\n              keyboardCodes: {\n                start: [\"Space\"],\n                cancel: [\"Escape\"],\n                end: [\"Space\", \"Enter\"],\n                left: [\"ArrowLeft\"],\n                right: [\"ArrowRight\"],\n                up: [],\n                down: [],\n              },\n            }),\n            PointerSensor,\n          ]}\n        >\n          <div\n            className=\"vuuTableColHeaderRow\"\n            role=\"row\"\n            aria-rowindex={headings.length + 1}\n          >\n            {showBookends ? (\n              <div className=\"vuuSelectionDecorator vuuStickyLeft\" />\n            ) : null}\n\n            {visibleColumns.map((col, i) => {\n              const allowDragDrop =\n                allowDragColumnHeader && !col.pin ? true : false;\n              return isGroupColumn(col) ? (\n                <GroupHeaderCell\n                  column={col}\n                  id={`${tableId}-${col.name}`}\n                  key={col.name}\n                  onMoveColumn={onMoveGroupColumn}\n                  onRemoveColumn={onRemoveGroupColumn}\n                  onResize={onResizeColumn}\n                />\n              ) : (\n                <HeaderCell\n                  allowDragColumnHeader={allowDragDrop}\n                  allowSelectAll={allowSelectAll}\n                  allRowsSelected={allRowsSelected}\n                  column={col}\n                  index={i}\n                  id={`${tableId}-${col.name}`}\n                  key={`${col.name}-${allowDragDrop}`}\n                  onCheckBoxColumnHeaderClick={onCheckBoxColumnHeaderClick}\n                  onClick={onClick}\n                  onResize={onResizeColumn}\n                  showColumnHeaderMenus={showColumnHeaderMenus}\n                />\n              );\n            })}\n            {showBookends ? (\n              <div className=\"vuuSelectionDecorator vuuStickyRight\" />\n            ) : null}\n          </div>\n\n          <DragOverlay>\n            {dragColumn ? (\n              <div id={dragColumn.id} className=\"DragColumn\">\n                <HeaderCell\n                  column={dragColumn.column}\n                  className=\"vuuDragging\"\n                  id={`${tableId}-${dragColumn.id}-dragging`}\n                  index={-1}\n                />\n              </div>\n            ) : null}\n          </DragOverlay>\n        </DragDropProvider>\n        {customHeaders}\n      </div>\n    );\n  },\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":["offset","header"],"mappings":"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"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../packages/vuu-table/src/table-header/TableHeader.tsx"],"sourcesContent":["import { VuuSortType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  DragDropProvider,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  RestrictToHorizontalAxis,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  ColumnDescriptor,\n  ColumnMoveHandler,\n  CustomHeader,\n  CustomHeaderComponent,\n  CustomHeaderElement,\n  HeaderCellProps,\n  RuntimeColumnDescriptor,\n  TableColumnResizeHandler,\n  TableConfig,\n  TableHeadings,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isGroupColumn, isNotHidden } from \"@vuu-ui/vuu-utils\";\nimport {\n  cloneElement,\n  isValidElement,\n  memo,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport { GroupHeaderCell, HeaderCell } from \"../header-cell\";\nimport { HeaderProvider } from \"./HeaderProvider\";\nimport { useTableHeader } from \"./useTableHeader\";\n\nexport type ColumnSortHandler = (\n  column: ColumnDescriptor,\n  addToExistingSort: boolean,\n  sortType?: VuuSortType,\n) => void;\n\nconst isHeaderElement = (h: CustomHeader): h is CustomHeaderElement =>\n  isValidElement(h);\n\nexport interface TableHeaderProps\n  extends Pick<\n    HeaderCellProps,\n    | \"allRowsSelected\"\n    | \"allowDragColumnHeader\"\n    | \"allowSelectAll\"\n    | \"onCheckBoxColumnHeaderClick\"\n    | \"showColumnHeaderMenus\"\n  > {\n  classBase?: string;\n  columns: RuntimeColumnDescriptor[];\n  customHeader?: CustomHeader | CustomHeader[];\n  headings: TableHeadings;\n  onHeightMeasured: (height: number, count: number) => void;\n  onResizeColumn: TableColumnResizeHandler;\n  onMoveColumn: ColumnMoveHandler;\n  onMoveGroupColumn: (columns: ColumnDescriptor[]) => void;\n  onRemoveGroupColumn: (column: RuntimeColumnDescriptor) => void;\n  onSortColumn: ColumnSortHandler;\n  tableConfig: TableConfig;\n  tableId: string;\n  virtualColSpan?: number;\n}\n\nexport const TableHeader = memo(\n  ({\n    allowDragColumnHeader,\n    allowSelectAll,\n    allRowsSelected,\n    classBase = \"vuuTable\",\n    columns,\n    customHeader,\n    headings,\n    onCheckBoxColumnHeaderClick,\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 [customHeaders, customHeaderCount] = useMemo<\n      [ReactElement | ReactElement[] | null, number]\n    >(() => {\n      const offset = headings.length;\n      const createElement = (\n        Component: CustomHeaderComponent,\n        index: number,\n      ) => (\n        <Component\n          ariaRowIndex={offset + index + 2}\n          ariaRole=\"row\"\n          columns={columns}\n          key={index}\n          virtualColSpan={virtualColSpan}\n        />\n      );\n\n      const enrichElementWithAria = (el: ReactElement, rowIndex: number) => {\n        const offset = headings.length;\n        return cloneElement(el, {\n          \"aria-rowindex\": rowIndex + offset + 2,\n          ariaRole: \"row\",\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        } as any);\n      };\n\n      if (customHeader === undefined) {\n        return [null, 0];\n      } else if (Array.isArray(customHeader)) {\n        const header = (\n          <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n            {customHeader.map((header, i) =>\n              isHeaderElement(header)\n                ? enrichElementWithAria(header, i)\n                : createElement(header, i),\n            )}\n          </HeaderProvider>\n        );\n        return [header, customHeader.length];\n      } else if (isHeaderElement(customHeader)) {\n        // TODO rowIndex and role\n        const header = (\n          <HeaderProvider columns={columns} virtualColSpan={virtualColSpan}>\n            {enrichElementWithAria(customHeader, 0)}\n          </HeaderProvider>\n        );\n        return [header, 1];\n      } else {\n        return [createElement(customHeader, 0), 1];\n      }\n    }, [columns, customHeader, headings.length, virtualColSpan]);\n\n    const { dragColumn, onClick, onDragEnd, onDragStart, setContainerRef } =\n      useTableHeader({\n        columns,\n        customHeaderCount,\n        headings,\n        onHeightMeasured,\n        onMoveColumn,\n        onSortColumn,\n        tableConfig,\n      });\n\n    const visibleColumns = columns.filter(isNotHidden);\n\n    return (\n      <div\n        className={`${classBase}-col-headings`}\n        ref={setContainerRef}\n        role=\"rowgroup\"\n      >\n        {headings.map((colHeaders, i) => (\n          <div\n            className=\"vuuTable-heading\"\n            key={i}\n            role=\"row\"\n            aria-rowindex={i + 1}\n          >\n            {colHeaders.map(({ label, width }, j) => (\n              <div key={j} className=\"vuuTable-headingCell\" style={{ width }}>\n                {label}\n              </div>\n            ))}\n          </div>\n        ))}\n        <DragDropProvider // whats the difference between this and DnDContext\n          onDragEnd={onDragEnd}\n          onDragStart={onDragStart}\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          //@ts-ignore typing error from dnd-kit\n          modifiers={[RestrictToHorizontalAxis]}\n          sensors={[\n            KeyboardSensor.configure({\n              keyboardCodes: {\n                start: [\"Space\"],\n                cancel: [\"Escape\"],\n                end: [\"Space\", \"Enter\"],\n                left: [\"ArrowLeft\"],\n                right: [\"ArrowRight\"],\n                up: [],\n                down: [],\n              },\n            }),\n            PointerSensor,\n          ]}\n        >\n          <div\n            className={`${classBase}-col-headers`}\n            role=\"row\"\n            aria-rowindex={headings.length + 1}\n          >\n            {visibleColumns.map((col, i) =>\n              isGroupColumn(col) ? (\n                <GroupHeaderCell\n                  column={col}\n                  id={`${tableId}-${col.name}`}\n                  key={col.name}\n                  onMoveColumn={onMoveGroupColumn}\n                  onRemoveColumn={onRemoveGroupColumn}\n                  onResize={onResizeColumn}\n                />\n              ) : (\n                <HeaderCell\n                  allowDragColumnHeader={allowDragColumnHeader}\n                  allowSelectAll={allowSelectAll}\n                  allRowsSelected={allRowsSelected}\n                  column={col}\n                  index={i}\n                  id={`${tableId}-${col.name}`}\n                  key={col.name}\n                  onCheckBoxColumnHeaderClick={onCheckBoxColumnHeaderClick}\n                  onClick={onClick}\n                  onResize={onResizeColumn}\n                  showColumnHeaderMenus={showColumnHeaderMenus}\n                />\n              ),\n            )}\n          </div>\n          <DragOverlay>\n            {dragColumn ? (\n              <div id={dragColumn.id} className=\"DragColumn\">\n                <HeaderCell\n                  column={dragColumn.column}\n                  className=\"vuuDragging\"\n                  id={`${tableId}-${dragColumn.id}-dragging`}\n                  index={-1}\n                />\n              </div>\n            ) : null}\n          </DragOverlay>\n        </DragDropProvider>\n        {customHeaders}\n      </div>\n    );\n  },\n);\nTableHeader.displayName = \"TableHeader\";\n"],"names":["offset","header"],"mappings":"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"}

package/esm/useCell.js

@@ -6,9 +6,10 @@ const useCell = (column, classBase, isHeader, hasError) => (
   // TODO measure perf without the memo, might not be worth the cost
   useMemo(() => {
     const className = cx(classBase, column.className, {
+      vuuPinFloating: column.pin === "floating",
       vuuPinLeft: column.pin === "left",
       vuuPinRight: column.pin === "right",
-      vuuEndPin: isHeader && column.pinnedWidth,
+      vuuEndPin: isHeader && column.endPin,
       [`${classBase}-editable`]: column.editable,
       [`${classBase}-right`]: column.align === "right",
       [`${classBase}-error`]: hasError

package/esm/useCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCell.js","sources":["../../../packages/vuu-table/src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n  column: RuntimeColumnDescriptor,\n  classBase: string,\n  isHeader?: boolean,\n  hasError?: boolean,\n) =>\n  // TODO measure perf without the memo, might not be worth the cost\n  useMemo(() => {\n    const className = cx(classBase, column.className, {\n      vuuPinLeft: column.pin === \"left\",\n      vuuPinRight: column.pin === \"right\",\n      vuuEndPin: isHeader && column.pinnedWidth,\n      [`${classBase}-editable`]: column.editable,\n      [`${classBase}-right`]: column.align === \"right\",\n      [`${classBase}-error`]: hasError,\n    });\n\n    const style = getColumnStyle(column);\n    return {\n      className,\n      style,\n    };\n  }, [classBase, column, isHeader, hasError]);\n"],"names":[],"mappings":";;;;AAKO,MAAM,OAAU,GAAA,CACrB,MACA,EAAA,SAAA,EACA,QACA,EAAA,QAAA;AAAA;AAAA,EAGA,QAAQ,MAAM;AACZ,IAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,MAChD,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,WAAA;AAAA,MAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA,OAAA;AAAA,MACzC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG;AAAA,KACzB,CAAA;AAED,IAAM,MAAA,KAAA,GAAQ,eAAe,MAAM,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA;AAAA,KACF;AAAA,KACC,CAAC,SAAA,EAAW,MAAQ,EAAA,QAAA,EAAU,QAAQ,CAAC;AAAA;;;;"}
+{"version":3,"file":"useCell.js","sources":["../../../packages/vuu-table/src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n  column: RuntimeColumnDescriptor,\n  classBase: string,\n  isHeader?: boolean,\n  hasError?: boolean,\n) =>\n  // TODO measure perf without the memo, might not be worth the cost\n  useMemo(() => {\n    const className = cx(classBase, column.className, {\n      vuuPinFloating: column.pin === \"floating\",\n      vuuPinLeft: column.pin === \"left\",\n      vuuPinRight: column.pin === \"right\",\n      vuuEndPin: isHeader && column.endPin,\n      [`${classBase}-editable`]: column.editable,\n      [`${classBase}-right`]: column.align === \"right\",\n      [`${classBase}-error`]: hasError,\n    });\n\n    const style = getColumnStyle(column);\n    return {\n      className,\n      style,\n    };\n  }, [classBase, column, isHeader, hasError]);\n"],"names":[],"mappings":";;;;AAKO,MAAM,OAAU,GAAA,CACrB,MACA,EAAA,SAAA,EACA,QACA,EAAA,QAAA;AAAA;AAAA,EAGA,QAAQ,MAAM;AACZ,IAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,MAChD,cAAA,EAAgB,OAAO,GAAQ,KAAA,UAAA;AAAA,MAC/B,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,MAAA;AAAA,MAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA,OAAA;AAAA,MACzC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG;AAAA,KACzB,CAAA;AAED,IAAM,MAAA,KAAA,GAAQ,eAAe,MAAM,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA;AAAA,KACF;AAAA,KACC,CAAC,SAAA,EAAW,MAAQ,EAAA,QAAA,EAAU,QAAQ,CAAC;AAAA;;;;"}