@vuu-ui/vuu-datatable 0.6.10-debug → 0.6.11-debug-debug

package/index.css.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/vuu-popups/src/dialog/Dialog.css", "../../../packages/vuu-popups/src/menu/MenuList.css", "../../../packages/vuu-popups/src/popup/popup-service.css", "../../../packages/vuu-datatable/src/TableCell.css", "../../../packages/vuu-datatable/src/TableGroupCell.css", "../../../packages/vuu-datatable/src/TableRow.css", "../../../packages/vuu-datatable/src/ColumnResizer.css", "../../../packages/vuu-datatable/src/SortIndicator.css", "../../../packages/vuu-datatable/src/TableHeaderCell.css", "../../../packages/vuu-datatable/src/filter-indicator.css", "../../../packages/vuu-filters/src/filter-input/FilterInput.css", "../../../packages/vuu-filters/src/filter-toolbar/FilterToolbar.css", "../../../packages/vuu-datatable/src/TableGroupHeaderCell.css", "../../../packages/vuu-datatable/src/DataTable.css"],
   "sourcesContent": [".vuuDialog {\n  background: var(--salt-container-primary-background);\n  border: var(--vuuDialog-border, solid 1px #ccc);\n  border-radius: 5px;\n  padding: var(--vuuDialog-padding, 0);\n  box-shadow: var(--salt-overlayable-shadow, none);\n  height: var(--vuuDialog-height, fit-content);\n  width: var(--vuuDialog-width, fit-content);\n}\n\n.vuuDialog-header {\n  --saltButton-height: 28px;\n  --saltButton-width: 28px;\n\n  --saltToolbar-background: transparent;\n  --saltToolbar-height: calc(var(--salt-size-base) + 5px);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.vuuDialog-header > .Responsive-inner {\n  align-items: center;\n}\n\n.vuuDialog-header > .Responsive-inner > :last-child{\n  right: 2px;\n}\n\n\n", ".vuuMenuList {\n  --context-menu-color: #161616;\n  --context-menu-padding: var(--hw-list-item-padding, 0 6px);\n  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));\n  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));\n  --context-menu-highlight-bg: #a4d5f4;\n  --context-menu-blur-focus-bg: #e0e4e9;\n  --menu-item-height: var(--hw-list-item-height, 24px);\n  --menu-item-icon-color: black;\n  --menu-item-twisty-color: black;\n  --menu-item-twisty-content: '';\n  --menu-item-twisty-top: 50%;\n  --menu-item-twisty-left: auto;\n  --menu-item-twisty-right: 0px;\n  --menu-icon-size: 12px;\n\n  background-clip: padding-box;\n  background-color: white;\n  border-radius: 4px;\n  border: solid 1px rgba(0, 0, 0, 0.15);\n  box-shadow: var(--context-menu-shadow);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  list-style: none;\n  margin: 2px 0 0;\n  outline: 0;\n  padding: 0;\n  position: absolute;\n}\n\n.vuuMenuItem {\n  align-items: center;\n  color: var(--context-menu-color);\n  display: flex;\n  gap: 6px;\n  height: var(--menu-item-height);\n  padding: var(--context-menu-padding);\n  padding-right: 24px;\n  position: relative;\n  white-space: nowrap;\n}\n\n.vuuIconContainer {\n  display: inline-block;\n  flex: 12px 0 0;\n  height: var(--menu-icon-size);\n  mask-repeat: no-repeat;\n  width: var(--menu-icon-size);\n}\n\n.vuuMenuItem[aria-expanded='true'] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem-separator {\n  border-top: solid 1px var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem[aria-haspopup='true']:after {\n  content: var(--menu-item-twisty-content);\n  -webkit-mask: var(--svg-chevron-right) center center/12px 12px;\n  mask: var(--svg-chevron-down) center center/12px 12px;\n  mask-repeat: no-repeat;\n  background-color: var(--menu-item-twisty-color);\n  height: 16px;\n  left: var(--menu-item-twisty-left);\n  right: var(--menu-item-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--menu-item-twisty-top);\n  transition: transform 0.3s;\n  width: 16px;\n}\n\n.vuuMenuItem[data-highlighted] {\n  background-color: var(--context-menu-highlight-bg);\n}\n\n.vuuMenuItem:hover {\n  background-color: var(--context-menu-highlight-bg);\n  cursor: default;\n}\n\n.vuuMenuList-childMenuShowing .hwMenuItem[data-highlighted] {\n  background-color: var(--context-menu-blur-focus-bg);\n}\n\n.vuuMenuItem.focusVisible:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  border: dotted var(--focus-visible-border-color) 2px;\n}\n\n.vuuPopupContainer.top-bottom-right-right .popup-menu {\n  left: auto;\n  right: 0;\n}\n\n.popup-menu .menu-item.showing > button,\n.popup-menu .menu-item > button:focus,\n.popup-menu .menu-item > button:hover {\n  text-decoration: none;\n  color: rgb(0, 0, 0);\n  background-color: rgb(220, 220, 220);\n}\n.vuuMenuItem-button:active,\n.hwMenuItem-button:hover {\n  outline: 0;\n}\n\n.popup-menu .menu-item.disabled > button {\n  clear: both;\n  font-weight: normal;\n  line-height: 1.5;\n  color: rgb(120, 120, 120);\n  white-space: nowrap;\n  text-decoration: none;\n  cursor: default;\n}\n", ".vuuPopup {\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  overflow: visible;\n  z-index: 1000;\n}\n\n.vuuPopup {\n  position: absolute;\n}\n", ".vuuDataTable {\n    --cell-outline-width: 2px;\n    user-select: none;\n}\n\n.vuuDataTable-table td {\n    --saltEditableLabel-height: 17px;\n    --saltInput-height: 17px;\n    --saltInput-minHeight: 17px;\n\n    border-right: 1px solid var(--vuuTableCell-border-rightColor);\n    border-bottom: 1px solid var(--vuuTableCell-border-bottomColor);\n    color: var(--salt-text-primary-foreground);\n    cursor: default;\n    height: var(--vuuTable-rowHeight);\n    line-height: calc(var(--vuuTable-rowHeight) - 1px);\n    overflow: hidden;\n    padding: 0 5px;\n}\n\n\n.vuuDataTable th:focus,\n.vuuDataTable td:focus {\n    outline: var(--vuuTableCell-outline, dotted var(--salt-color-blue-400) var(--cell-outline-width));\n    outline-offset: calc(var(--cell-outline-width) * -1);\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.vuuDataTable th:focus .vuuTable-headerCell-inner{\n    /** This is to achieve a white background to outline dashes */\n    padding-bottom: var(--cell-outline-width);\n}\n\n.vuuDataTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{\n    --columnResizer-color: transparent;\n}\n\n\n.vuuDataTable td:focus {\n    /** This is to achieve a white background to outline dashes */\n    border-right: none;\n    padding-bottom: 1px;\n}\n\n\ntd[data-editable=\"true\"] {\n    --salt-text-fontSize: 10px;\n    --vuu-icon-size: 5px;\n    position: relative;\n}\n\ntd[data-editable=\"true\"]:after {\n    top: 0;\n    content: \"\";\n    background-color: var(--salt-text-secondary-foreground, black);\n    left: 0;\n    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));\n    -webkit-mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask: var(--svg-corner-triangle) center center/var(--vuu-icon-size) var(--vuu-icon-size);\n    mask-repeat: no-repeat;\n    -webkit-mask-repeat: no-repeat;\n    position: absolute;\n    transform: rotate(180deg);\n    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));\n  }\n  \ntd:focus[data-editable],\ntd:focus-within[data-editable],\ntd:has(.saltEditableLabel-editing) {\n    outline: solid var(--salt-color-blue-400) 1px;\n    background-color: white;\n    outline-offset: -1px;\n}\n\ntd:focus[data-editable=\"true\"]:after,\ntd:has(.saltEditableLabel):after {\n        /* background-color: black; */\n    background-color: var(--salt-color-blue-400);\n    left: 1px;\n    top: 1px;\n}\n", ".vuuTableGroupCell {\n    --spacer-width: 20px;\n    --toggle-icon-transform: var(--row-toggle-icon-transform, none);\n    --vuu-icon-width: 18px;\n    display: flex;\n    align-items: center;\n}\n\n.vuuTableGroupCell-spacer {\n    height: 100%;\n    position: relative;\n    width: var(--spacer-width);\n}\n\n.vuuTableGroupCell-spacer:after {\n    background: var(--salt-container-primary-borderColor);\n    content: '';\n    position: absolute;\n    top:0;\n    bottom: -1px;\n    /* left: calc(var(--spacer-width / 2)); */\n    left: 9px;\n    width: 1px;\n}\n\n.vuuTableGroupCell-toggle {\n    transition: transform 0.25s;\n    transform: var(--toggle-icon-transform);\n}\n\n\n/* .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n    --vuu-icon-svg: var(--svg-plus-box);\n}\n\n.vuuDataTableRow-expanded .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n    --vuu-icon-svg: var(--svg-minus-box);\n} */\n", ".vuuDataTableRow-even {\n    --row-background: var(--salt-container-secondary-background);\n  }\n  \n  .vuuDataTableRow:not(.vuuDataTableRow-even) {\n    --row-background: var(--vuuTableRow-backgroundColor-odd, var(--table-background));\n  }\n\n  .vuuDataTableRow {\n    background: var(--row-background);\n  }\n\n  .vuuDataTableRow :is(.vuuPinFloating, .vuuPinLeft, .vuuPinRight) {\n    background-color: var(--row-background);\n  }\n  \n  .vuuDataTableRow-expanded {\n    --row-toggle-icon-transform: rotate(90deg);\n  }\n  \n  .vuuDataTableRow[aria-selected] {\n    background-color: var(--vuuTableRow-selected-background, var(--salt-selectable-background-selected));\n    --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n  }\n\n  /* .vuuDataTableRow:not([aria-selected]):has(+ [aria-selected]) {\n    --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n  } */\n\n  .vuuDataTableRow-preSelected {\n    --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n  }", ".vuuColumnResizer {\n    cursor: col-resize;\n    margin-left: auto;\n    width: 4px;\n}\n\n.vuuColumnResizer:after {\n    content: '';\n    position: absolute;\n    width: var(--columnResizer-width, 1px);\n    top:0;\n    bottom:0;\n    right: 0;\n    background-color: var(--columnResizer-color, var(--salt-separable-tertiary-borderColor));\n    height: var(--columnResizer-height, 100%);\n}", ".vuuSortIndicator {\n  --menu-icon-size: 18px;\n  --menu-item-icon-color: black;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 18px;\n}\n\n.vuuSortPosition {\n  font-size: 10px;\n  line-height: 10px;\n  text-align: center;\n}\n\n", "/* We support multi level headings up to a  maximum of 4 heading levels */\n.vuuTable-heading:nth-child(2) {\n  --heading-top: calc(var(--header-height));\n}\n.vuuTable-heading:nth-child(3) {\n  --heading-top: calc(var(--header-height) * 2);\n}\n.vuuTable-heading:nth-child(3) {\n  --heading-top: calc(var(--header-height) * 3);\n}\n\n.vuuTable-headingCell {\n  background: var(--table-background);\n  border-color: var(--salt-separable-tertiary-borderColor);\n  border-style: solid solid solid none;\n  border-width: 1px;\n  color: var(--salt-text-secondary-foreground);\n  height: var(--vuuTableHeaderHeight);\n  padding: 0 !important;\n  position: sticky;\n  top: var(--heading-top, 0);\n  z-index: 1;\n}\n\n.vuuTable-heading:has(+ .vuuTable-heading) > .vuuTable-headingCell {\n  border-bottom-color: transparent;\n}\n\n.vuuTable-headerCell {\n  --cell-align: 'flex-start';\n  text-align: left;\n    background: var(--table-background);\n    /* border-right: var(--header-border-rightWidth, 1px) solid var(--header-border-rightColor, var(--salt-separable-tertiary-borderColor)); */\n    border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n    color: var(--salt-text-secondary-foreground);\n    cursor: default;\n    padding: 0 !important;\n    position: sticky;\n    top: calc(var(--total-header-height) - var(--header-height));\n    height: var(--vuuTableHeaderHeight);\n    /* ensure header row sits atop everything else when scrolling down */\n    z-index: 1;\n  }\n\n  .vuuTable-headerCell-right {\n    --cell-align: flex-end;\n  }\n \n  .vuuTable-headerCell-inner {\n    align-items: stretch;\n    display: flex;\n    height: 100%;\n    padding: 0 0 0 3px;\n  }\n\n  .vuuTable-headerCell-inner:has(.vuuFilterIndicator){\n    padding-left: 0;\n  }\n\n  .vuuTable-headerCell-label {\n    align-items: center;\n    justify-content: var(--cell-align);\n    display: flex;\n    flex: 1 1 auto;\n  }\n\n  .vuuTable-headerCell-resizing {\n    --columnResizer-color: var(--salt-color-blue-500);\n    --columnResizer-height: var(--table-height);\n    --columnResizer-width: 2px;\n  }\n\n  .vuuTable-headerCell.vuuPinLeft.vuuEndPin:after {\n    box-shadow: 2px 0px 5px rgba(0,0,0,0.4);\n    content: \"\";\n    position: absolute;\n    width: 1px;\n    background-color: transparent;\n    height: var(--table-height);\n    top:0;\n    right: 0px;\n  }\n\n  .vuuTable-headerCell.vuuPinRight.vuuEndPin:after {\n    box-shadow: -2px 0px 5px rgba(0,0,0,0.3);\n    content: \"\";\n    position: absolute;\n    width: 1px;\n    background-color: transparent;\n    height: var(--table-height);\n    top:0;\n    left: 0px;\n  }", ".vuuFilterIndicator {\n  --menu-icon-size: 12px;\n  --menu-item-icon-color: black;\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  flex: 0 0 18px;\n  flex-direction: column;\n  justify-content: center;\n  position: relative;\n}\n\n.vuuFilterIndicator + .vuuTable-headerCell-inner {\n  padding-left: 0;\n}\n", "\n.salt-theme {\n    --vuuFilterEditor-lineHeight: 28px;\n}\n\n.salt-density-high {\n    --vuuFilterEditor-buttonWidth: 20px;\n    --vuuFilterEditor-height: 22px;\n    --vuuFilterEditor-lineHeight: 20px;\n}\n\n.vuuFilterInput {\n    --vuuFilterEditor-background: var(--salt-container-primary-background);\n    --vuuFilterEditor-color: var(--salt-text-primary-foreground);\n    --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily);\n    --vuuFilterEditor-fontSize: var(--salt-text-fontSize);\n    --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground);\n    --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected);\n    --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background);\n    --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); \n    --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout);\n    --vuuFilterEditor-suggestion-selectedBackground: var(--salt-selectable-background-selected);\n    --vuuFilterEditor-suggestion-selectedColor: var(--vuuFilterEditor-color);\n    --vuuFilterEditor-suggestion-height: 24px;\n    --vuuFilterEditor-variableColor: blue;\n\n    align-items: center;\n    border-color: var(--salt-container-secondary-borderColor);\n    border-style: solid none;\n    border-width: 1px;\n    box-sizing: border-box;\n    display: flex;\n    height: var(--vuuFilterEditor-height, 30px);\n}\n\n.vuuFilterInput-Editor {\n    flex: 1 1 auto;\n    height: 100%;\n}\n\n.vuuFilterInput-FilterButton,\n.vuuFilterInput-ClearButton {\n    --vuu-icon-size: 12px;\n    --saltButton-width: var(--vuuFilterEditor-buttonWidth, 28px);\n}\n\n.vuuIllustration {\n    --vuuFilterEditor-suggestion-selectedBackground:var(--salt-container-secondary-background);\n    background: var(--salt-container-secondary-background);\n    color: var(--salt-text-secondary-foreground);\n}\n\n\n", ".vuuFilterDropdown,\n.vuuFilterSwitch {\n    --saltToolbarField-marginTop: 0;\n\n    height: 100%;\n}\n\n.vuuFilterDropdown.saltFormField-focused:before {\n    top: 2px !important;\n    bottom: 2px !important;\n}", ".vuuTable-groupHeaderCell {\n  --cell-align: 'flex-start';\n  text-align: left;\n    background: var(--table-background);\n    border-right: 1px solid var(--salt-separable-tertiary-borderColor);\n    border-bottom: 2px solid var(--salt-separable-tertiary-borderColor);\n    color: var(--salt-text-secondary-foreground);\n    cursor: default;\n    padding: 0 !important;\n    position: sticky;\n    top: 0;\n    height: var(--vuuTableHeaderHeight);\n    /* ensure header row sits atop everything else when scrolling down */\n    z-index: 1;\n  }\n\n\n  .vuuTable-groupHeaderCell-inner {\n    display: flex;\n    height: 100%;\n  }\n\n  .vuuTable-groupHeaderCell-label {\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n  }\n\n  .vuuTable-groupHeaderCell-col {\n    align-items: center;\n    background-color: inherit;\n    display: inline-flex;\n    flex: 0 1 auto;\n    height: calc(var(--vuuTableHeaderHeight) - 4px);\n    justify-content: space-between;\n    padding-right: 8px;\n    position: relative;\n  }\n\n  .vuuTable-groupHeaderCell-close {\n    --vuu-icon-height: 18px;\n    --vuu-icon-width: 18px;\n    cursor: pointer;\n    left: 3px;\n  }\n\n  .vuuTable-groupHeaderCell-col:nth-child(odd) {\n    background-color: var(--salt-color-gray-50);\n  }\n  .vuuTable-groupHeaderCell-col:nth-child(even) {\n    background-color: var(--salt-color-gray-40);\n  }\n\n  .vuuTable-groupHeaderCell-col:first-child {\n    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);\n    padding-left: 3px;\n    z-index: 1;\n  }\n  \n  .vuuTable-groupHeaderCell-col:not(:first-child) {\n    margin-left: -6px;\n    padding-left: 12px;\n    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);\n  }\n  \n    .vuuTable-groupHeaderCell-resizing {\n    --columnResizer-color: var(--salt-color-blue-500);\n    --columnResizer-height: var(--table-height);\n    --columnResizer-width: 2px;\n  }\n", "\n.vuuDataTable {\n  background-color: var(--salt-container-primary-background, inherit);\n  position: relative;\n}\n.vuuDataTable-contentContainer {\n  \n  --table-background: var(--salt-container-primary-background, inherit);\n\n  --vuuTable-contentHeight: var(--content-height, 'auto');\n  --vuuTable-contentWidth: var(--content-width, 'auto');\n  --vuuTableHeaderHeight: var(--header-height, 30px);\n  --vuuTable-height: calc(var(--table-height) - var(--scrollbar-size));\n  --vuuTable-pinnedWidthLeft: var(--pinned-width-left, 0pxs);\n  --vuuTable-scrollbarSize: var(--scrollbar-size, 15px);\n  --vuuTable-width: calc(var(--table-width) - var(--scrollbar-size));\n\n  background-color: var(--salt-container-primary-background);\n\n  height: var(--vuuTable-height);\n  position: relative;\n  overflow: auto;\n  overscroll-behavior: none;\n  width: var(--vuuTable-width);\n}\n\n.vuuDataTable-contentContainer::-webkit-scrollbar {\n  display: none;\n}\n\n.vuuDataTable-scrollbarContainer {\n  --scroll-content-width: calc(var(--content-width) - var(--pinned-width-left));\n  border-left: solid 1px var(--salt-container-primary-borderColor);\n  border-top: solid 1px var(--salt-container-primary-borderColor);\n  overflow: auto;\n  position: absolute;\n  height: calc(var(--table-height) - var(--total-header-height) + 1px);\n  width: calc(var(--table-width) - var(--pinned-width-left) + 1px);\n}\n\n.vuuDataTable-scrollContainerHeader {\n  background: #777;\n  height: var(--header-height);\n  position: fixed;\n  top:0;\n  right:0;\n  width: var(--vuuTable-scrollbarSize);\n}\n.vuuDataTable-scrollContainerFooter {\n  background-color: green;\n  height: var(--vuuTable-scrollbarSize);\n  position: fixed;\n  bottom:0;\n  left:0;\n  width: var(--pinned-width-left);\n\n}\n\n.vuuDataTable-scrollContent {\n  position: absolute;\n  height: var(--content-height);\n  width: var(--scroll-content-width, var(--content-width));\n}\n\n.vuuDataTable-tableContainer {\n  background-color: var(--table-background);\n  border-bottom: solid 1px var(--salt-container-primary-borderColor);\n  height: calc(var(--table-height) - var(--scrollbar-size));\n  left: 0px;\n  overflow: hidden;\n  position: sticky;\n  top: 0px;\n  width: calc(var(--table-width) - var(--scrollbar-size));\n  white-space: nowrap;\n\n}\n\n\n.vuuDataTable-table {\n  --vuuTable-rowHeight: var(--row-height);\n  --vuuTableCell-border-bottomColor: transparent;\n  --vuuTableCell-border-rightColor: var(--salt-separable-tertiary-borderColor);\n\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  background: repeating-linear-gradient(\n    to bottom, \n    var(--salt-container-secondary-background), \n    var(--salt-container-secondary-background) 20px, \n    var(--table-background) 20px, \n    var(--table-background) 40px);\n  border-collapse: separate;\n  border-spacing: 0;\n  border-left: 1px solid #ccc;\n  border: none;\n  font-size: var(--vuuDataTable-font-size, 10px);\n  margin: 0;\n  min-height: 100%;\n  table-layout: fixed;\n  width: var(--vuuTable-contentWidth);\n}\n\n.vuuDataTable-columnBased {\n  display: inline-table;\n  height: var(--vuuTable-height);\n  position: static;\n}\n\n/* .vuuDataTable-columnBased .vuuDataTable-headerCell{\n  background-color: darkmagenta;\n} */\n\n.vuuDataTable-filler {\n  height: var(--filler-height);\n}\n\n:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n  position: sticky;\n}\n\n.vuuAlignRight {\n  text-align: right;\n}\n\nth:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n  top:0;\n  z-index: 20;\n}\n\ntable:is(.vuuPinLeft, .vuuPinRight, .vuuPinFloating) {\n  z-index: 10;\n}\n\n/* .vuuDataTable-row {\n  transform: translate3d(0px, 25px, 0px);\n} */\n\n.vuuDataTable-settings {\n  height: var(--header-height);\n  position: absolute;\n  right: 0;\n  top:0;\n  width: 15px;\n}\n\n.vuuDataTable:has(.vuuTable-headerCell-resizing) * {\n  cursor: col-resize;\n}\n\n.saltDraggable-table-column {\n  background-color: var(--salt-container-primary-background);\n  overflow: hidden;\n}\n\n"],
-  "mappings": "AAAA,WACE,oDACA,+CAFF,kBAIE,oCACA,gDACA,4CACA,0CAGF,kBACE,0BACA,yBAEA,sCACA,wDACA,kEAGF,oCACE,mBAGF,gDACE,UCxBF,aACE,8BACA,2DACA,+EACA,uFACA,qCACA,sCACA,qDACA,8BACA,gCACA,+BACA,4BACA,8BACA,8BACA,uBAEA,4BACA,sBAjBF,kBAmBE,iCACA,sCACA,0CACA,uDACA,gBAvBF,eAyBE,UAzBF,UA2BE,kBAGF,aACE,mBACA,gCACA,aACA,QACA,+BACA,oCACA,mBACA,kBACA,mBAGF,kBACE,qBACA,cACA,6BACA,sBACA,4BAGF,iCACE,mDAGF,uBACE,uDAGF,uCACE,wCACA,8DACA,qDACA,sBACA,+CACA,YACA,kCACA,oCACA,gBACA,kBACA,gCACA,yBACA,WAGF,+BACE,kDAGF,mBACE,kDACA,eAGF,4DACE,mDAGF,iCACE,WACA,kBACA,MACA,OACA,QACA,WACA,oDAGF,sDACE,UACA,QAGF,8GAGE,qBACA,WACA,yBAEF,oDAEE,UAGF,uCACE,WACA,gBACA,gBACA,cACA,mBACA,qBACA,eCzHF,UACE,gCACA,kBACA,MACA,OACA,QACA,SACA,iBACA,aAGF,UACE,kBCZF,cACI,0BACA,iBAGJ,uBACI,iCACA,yBACA,4BAEA,6DACA,+DACA,0CACA,eACA,iCACA,kDACA,gBAhBJ,cAqBA,8CAEI,iGACA,oDAEA,sDACA,mBAGJ,kDAEI,yCAGJ,qFACI,mCAIJ,uBAEI,kBACA,mBAIJ,uBACI,2BACA,qBACA,kBAGJ,6BACI,MACA,WACA,8DACA,OACA,0DACA,gGACA,wFACA,sBACA,8BACA,kBACA,yBACA,wDAGJ,0FAGI,6CACA,sBACA,oBAGJ,oEAGI,4CACA,SACA,QCjFJ,mBACI,qBACA,gEACA,uBACA,aACA,mBAGJ,0BACI,YACA,kBACA,0BAGJ,gCACI,qDACA,WACA,kBACA,MACA,YAEA,SACA,UAGJ,0BACI,0BACA,uCC3BJ,sBACI,6DAGF,4CACE,kFAGF,iBACE,iCAGF,+DACE,uCAGF,0BACE,2CAGF,gCACE,oGACA,+EAOF,6BACE,+EC9BJ,kBACI,kBACA,iBACA,UAGJ,wBACI,WACA,kBACA,sCACA,MACA,SACA,QACA,wFACA,yCCdJ,kBACE,uBACA,8BACA,aACA,sBACA,kBACA,WAGF,iBACE,eACA,iBACA,kBCXF,+BACE,0CAEF,+BACE,8CAEF,+BACE,8CAGF,sBACE,mCACA,wDACA,oCACA,iBACA,4CACA,mCAjBF,oBAmBE,gBACA,0BACA,UAGF,iEACE,gCAGF,qBACE,2BACA,gBACE,mCAEA,mEACA,4CACA,eAnCJ,oBAqCI,gBACA,4DACA,mCAEA,UAGF,2BACE,uBAGF,2BACE,oBACA,aACA,YAnDJ,kBAuDE,oDACE,eAGF,2BACE,mBACA,kCACA,aACA,cAGF,8BACE,kDACA,4CACA,2BAGF,gDACE,2BACA,WACA,kBACA,UACA,6BACA,2BACA,MACA,UAGF,iDACE,gCACA,WACA,kBACA,UACA,6BACA,2BACA,MACA,SC3FJ,oBACE,uBACA,8BACA,mBACA,eACA,aACA,cACA,sBACA,uBACA,kBAGF,+CACE,eCZF,YACI,mCAGJ,mBACI,oCACA,+BACA,mCAGJ,gBACI,uEACA,6DACA,gEACA,sDACA,qEACA,4EACA,8EACA,uIACA,0EACA,4FACA,yEACA,0CACA,sCAEA,mBACA,yDACA,wBACA,iBACA,sBACA,aACA,2CAGJ,uBACI,cACA,YAGJ,yDAEI,sBACA,6DAGJ,iBACI,2FACA,sDACA,4CCjDJ,oCAEI,gCAEA,YAGJ,gDACI,kBACA,qBCTJ,0BACE,2BACA,gBACE,mCACA,kEACA,mEACA,4CACA,eAPJ,oBASI,gBACA,MACA,mCAEA,UAIF,gCACE,aACA,YAGF,gCACE,mBACA,aACA,cAGF,8BACE,mBACA,yBACA,oBACA,cACA,+CACA,8BACA,kBACA,kBAGF,gCACE,wBACA,uBACA,eACA,SAGF,6CACE,2CAEF,8CACE,2CAGF,0CACE,gFACA,iBACA,UAGF,gDACE,iBACA,kBACA,wFAGA,mCACA,kDACA,4CACA,2BCnEJ,cACE,mEACA,kBAEF,+BAEE,sEAEA,wDACA,sDACA,mDACA,qEACA,2DACA,sDACA,mEAEA,0DAEA,8BACA,kBACA,cACA,yBACA,4BAGF,kDACE,aAGF,iCACE,8EACA,gEACA,+DACA,cACA,kBACA,oEACA,gEAGF,oCACE,gBACA,4BACA,eACA,MACA,QACA,oCAEF,oCACE,uBACA,qCACA,eACA,SACA,OACA,+BAIF,4BACE,kBACA,6BACA,wDAGF,6BACE,yCACA,kEACA,yDACA,SACA,gBACA,gBACA,QACA,uDACA,mBAKF,oBACE,wCACA,+CACA,6EAEA,kBACA,MACA,OAEA,qMAMA,yBACA,iBACA,2BACA,YACA,8CAjGF,SAmGE,gBACA,mBACA,mCAGF,0BACE,qBACA,8BACA,gBAOF,qBACE,4BAGF,8CACE,gBAGF,eACE,iBAGF,gDACE,MACA,WAGF,mDACE,WAOF,uBACE,4BACA,kBACA,QACA,MACA,WAGF,mDACE,kBAGF,4BACE,0DACA",
+  "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAEA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;;;ACxBF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AAAA;AAAA;AAGE;AACA;AACA;AAAA;AAEF;AAAA;AAEE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACzHF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACZF;AACI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAIJ;AAAA;AAEI;AACA;AAEA;AACA;AAAA;AAGJ;AAEI;AAAA;AAGJ;AACI;AAAA;AAIJ;AAEI;AACA;AAAA;AAIJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AAAA;AAAA;AAGI;AACA;AACA;AAAA;AAGJ;AAAA;AAGI;AACA;AACA;AAAA;;;ACjFJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;;;AC3BJ;AACI;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAOF;AACE;AAAA;;;AC9BJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACdJ;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;;;ACXF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACE;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC3FJ;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;;;ACZF;AACI;AAAA;AAGJ;AACI;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AAAA;AAGJ;AAAA;AAEI;AACA;AAAA;AAGJ;AACI;AACA;AACA;AAAA;;;ACjDJ;AAAA;AAEI;AAEA;AAAA;AAGJ;AACI;AACA;AAAA;;;ACTJ;AACE;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AAIF;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGA;AACA;AACA;AACA;AAAA;;;ACnEJ;AACE;AACA;AAAA;AAEF;AAEE;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAIF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAKF;AACE;AACA;AACA;AAEA;AACA;AACA;AAEA;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAOF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAGF;AACE;AAAA;AAOF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;",
   "names": []
 }

package/package.json

@@ -6,7 +6,7 @@
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0-vuu.1",
-    "@vuu-ui/vuu-utils": "0.6.10-debug",
+    "@vuu-ui/vuu-utils": "0.6.11-debug",
     "classnames": "^2.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -16,9 +16,11 @@
     "index.css",
     "index.js.map",
     "index.css.map",
-    "/src"
+    "/src",
+    "/types"
   ],
   "module": "esm/index.js",
   "main": "cjs/index.js",
-  "version": "0.6.10-debug"
+  "version": "0.6.11-debug-debug",
+  "types": "types/index.d.ts"
 }

package/types/ColumnBasedTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TableImplementationProps } from "./dataTableTypes";
+export declare const ColumnBasedTable: ({ columns, data, headerHeight, onHeaderCellDragEnd, rowHeight, }: TableImplementationProps) => JSX.Element;

package/types/ColumnResizer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import "./ColumnResizer.css";
+export interface TableColumnResizerProps {
+    onDrag: (evt: MouseEvent, moveBy: number) => void;
+    onDragEnd: (evt: MouseEvent) => void;
+    onDragStart: (evt: React.MouseEvent) => void;
+}
+export declare const ColumnResizer: ({ onDrag, onDragEnd, onDragStart, }: TableColumnResizerProps) => JSX.Element;

package/types/DataTable.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TableProps } from "./dataTableTypes";
+import "./DataTable.css";
+export declare const DataTable: ({ allowConfigEditing: showSettings, className, config, dataSource, headerHeight, height, id: idProp, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, onShowConfigEditor: onShowSettings, renderBufferSize, rowHeight, selectionModel, style: styleProp, tableLayout: tableLayoutProp, width, ...props }: TableProps) => JSX.Element;

package/types/DragVisualizer.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+import "./DragVisualizer.css";
+export declare const useListViz: () => unknown;
+export interface DragVisualizerProps {
+    children: ReactNode;
+    orientation?: "vertical" | "horizontal";
+}
+export declare const DragVisualizer: React.FC<DragVisualizerProps>;

package/types/KeySet.d.ts

@@ -0,0 +1,12 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+export declare class KeySet {
+    private keys;
+    private free;
+    private nextKeyValue;
+    constructor(range: VuuRange);
+    next(): number;
+    reset({ from, to }: VuuRange): void;
+    keyFor(rowIndex: number): number;
+    withKeys(data: DataSourceRow[]): DataSourceRow[];
+}

package/types/RowBasedTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TableImplementationProps } from "./dataTableTypes";
+export declare const RowBasedTable: ({ columns, data, headings, onColumnResize, onHeaderCellDragStart, onContextMenu, onRemoveColumnFromGroupBy, onRowClick, onSort, onToggleGroup, rowCount, rowHeight, }: TableImplementationProps) => JSX.Element;

package/types/SortIndicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ColumnSort } from "@vuu-ui/vuu-datagrid-types";
+import "./SortIndicator.css";
+export interface SortIndicatorProps {
+    sorted?: ColumnSort;
+}
+export declare const SortIndicator: ({ sorted }: SortIndicatorProps) => JSX.Element | null;

package/types/TableCell.d.ts

@@ -0,0 +1,9 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { HTMLAttributes } from "react";
+import "./TableCell.css";
+export interface TableCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    column: KeyedColumnDescriptor;
+    row: DataSourceRow;
+}
+export declare const TableCell: import("react").MemoExoticComponent<({ className: classNameProp, column, row }: TableCellProps) => JSX.Element>;

package/types/TableGroupCell.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { TableCellProps } from "./TableCell";
+import "./TableGroupCell.css";
+export declare const getGroupValueAndOffset: (columns: KeyedColumnDescriptor[], row: DataSourceRow) => [unknown, number];
+export declare const TableGroupCell: ({ column, onClick, row, }: TableCellProps) => JSX.Element;

package/types/TableGroupHeaderCell.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+import { TableHeaderCellProps } from "./TableHeaderCell";
+import "./TableGroupHeaderCell.css";
+import { GroupColumnDescriptor, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+export interface ColHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+    column: KeyedColumnDescriptor;
+    onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
+}
+export interface TableGroupHeaderCellProps extends Omit<TableHeaderCellProps, "onDragStart" | "onDrag" | "onDragEnd"> {
+    column: GroupColumnDescriptor;
+    onRemoveColumn?: (column: KeyedColumnDescriptor) => void;
+}
+export declare const TableGroupHeaderCell: ({ column, className: classNameProp, onRemoveColumn, onResize, ...props }: TableGroupHeaderCellProps) => JSX.Element;

package/types/TableHeaderCell.d.ts

@@ -0,0 +1,11 @@
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { HTMLAttributes, MouseEvent } from "react";
+import { TableColumnResizeHandler } from "./dataTableTypes";
+import "./TableHeaderCell.css";
+export interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    column: KeyedColumnDescriptor;
+    debugString?: string;
+    onDragStart?: (evt: MouseEvent) => void;
+    onResize?: TableColumnResizeHandler;
+}
+export declare const TableHeaderCell: ({ column, className: classNameProp, onClick, onDragStart, onResize, ...props }: TableHeaderCellProps) => JSX.Element;

package/types/TableRow.d.ts

@@ -0,0 +1,14 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { HTMLAttributes } from "react";
+import { RowClickHandler } from "./dataTableTypes";
+import "./TableRow.css";
+export interface RowProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onClick"> {
+    columns: KeyedColumnDescriptor[];
+    height: number;
+    index: number;
+    onClick?: RowClickHandler;
+    onToggleGroup?: (row: DataSourceRow) => void;
+    row: DataSourceRow;
+}
+export declare const TableRow: import("react").NamedExoticComponent<RowProps>;

package/types/context-menu/buildContextMenuDescriptors.d.ts

@@ -0,0 +1,4 @@
+import { DataSource } from "@vuu-ui/vuu-data";
+import { MenuBuilder } from "@vuu-ui/vuu-popups";
+export type ContextMenuLocation = "header" | "filter" | "grid";
+export declare const buildContextMenuDescriptors: (dataSource?: DataSource) => MenuBuilder;

package/types/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./buildContextMenuDescriptors";
+export * from "./useContextMenu";

package/types/context-menu/useContextMenu.d.ts

@@ -0,0 +1,16 @@
+import { DataSource } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { MenuActionHandler } from "@vuu-ui/vuu-popups";
+import { VuuFilter } from "@vuu-ui/vuu-protocol-types";
+import { PersistentColumnAction } from "../useTableModel";
+export interface ContextMenuOptions {
+    column?: KeyedColumnDescriptor;
+    filter?: Filter;
+    sort?: VuuFilter;
+}
+export interface ContextMenuHookProps {
+    dataSource?: DataSource;
+    onPersistentColumnOperation: (action: PersistentColumnAction) => void;
+}
+export declare const useContextMenu: ({ dataSource, onPersistentColumnOperation, }: ContextMenuHookProps) => MenuActionHandler;

package/types/dataTableTypes.d.ts

@@ -0,0 +1,67 @@
+import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor, GridConfig, TableHeadings, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
+import { HTMLAttributes, MouseEvent } from "react";
+export type tableLayoutType = "row" | "column";
+export interface TableProps extends HTMLAttributes<HTMLDivElement> {
+    allowConfigEditing?: boolean;
+    config: Omit<GridConfig, "headings">;
+    dataSource: DataSource;
+    headerHeight?: number;
+    height?: number;
+    onConfigChange?: (config: Omit<GridConfig, "headings">) => void;
+    /**
+     * Features like context menu actions and visual links are enabled by the Vuu server.
+     * This callback allows us to receive a notification when such a feature is available.
+     * The options provided must then be used to configure appropriate UI affordances.
+     */
+    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
+    /**
+     * When a Vuu feature e.g. context menu action, has been invoked, the Vuu server
+     * response must be handled. This callback provides that response.
+     */
+    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
+    onShowConfigEditor?: () => void;
+    onSelectionChange?: SelectionChangeHandler;
+    renderBufferSize?: number;
+    rowHeight?: number;
+    selectionModel?: TableSelectionModel;
+    tableLayout?: tableLayoutType;
+    width?: number;
+}
+export type TableColumnResizeHandler = (phase: "begin" | "resize" | "end", columnName: string, width?: number) => void;
+export interface TableImplementationProps {
+    columns: KeyedColumnDescriptor[];
+    data: DataSourceRow[];
+    headerHeight: number;
+    headings: TableHeadings;
+    onColumnResize?: TableColumnResizeHandler;
+    onHeaderCellDragEnd?: () => void;
+    onHeaderCellDragStart?: (evt: MouseEvent) => void;
+    onContextMenu?: (evt: MouseEvent<HTMLElement>) => void;
+    onRemoveColumnFromGroupBy?: (column: KeyedColumnDescriptor) => void;
+    onRowClick?: RowClickHandler;
+    onSort: (column: KeyedColumnDescriptor, isAdditive: boolean) => void;
+    onToggleGroup?: (row: DataSourceRow) => void;
+    rowCount: number;
+    rowHeight: number;
+}
+type MeasureStatus = "unmeasured" | "measured";
+export interface TableMeasurements {
+    contentHeight: number;
+    left: number;
+    right: number;
+    scrollbarSize: number;
+    scrollContentHeight: number;
+    status: MeasureStatus;
+    top: number;
+}
+export interface Viewport {
+    fillerHeight: number;
+    maxScrollContainerScrollHorizontal: number;
+    maxScrollContainerScrollVertical: number;
+    pinnedWidthLeft: number;
+    rowCount: number;
+    scrollContentWidth: number;
+}
+export type RowClickHandler = (row: DataSourceRow, rangeSelect: boolean, keepExistingSelection: boolean) => void;
+export {};

package/types/filter-indicator.d.ts

@@ -0,0 +1,13 @@
+import { KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { Filter } from "@vuu-ui/vuu-filter-types";
+import { HTMLAttributes } from "react";
+import "./filter-indicator.css";
+export declare const Direction: {
+    ASC: string;
+    DSC: string;
+};
+export interface FilterIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    column: KeyedColumnDescriptor;
+    filter?: Filter;
+}
+export declare const FilterIndicator: ({ column, filter }: FilterIndicatorProps) => JSX.Element | null;

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./dataTableTypes";
+export * from "./DataTable";
+export * from "./useMeasuredContainer";

package/types/keyUtils.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare const ArrowUp = "ArrowUp";
+export declare const ArrowDown = "ArrowDown";
+export declare const ArrowLeft = "ArrowLeft";
+export declare const ArrowRight = "ArrowRight";
+export declare const Enter = "Enter";
+export declare const Escape = "Escape";
+export declare const Home = "Home";
+export declare const End = "End";
+export declare const PageUp = "PageUp";
+export declare const PageDown = "PageDown";
+export declare const Space = " ";
+export declare const Tab = "Tab";
+export declare const isCharacterKey: (evt: React.KeyboardEvent) => boolean;
+export type ArrowKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+export type PageKey = "Home" | "End" | "PageUp" | "PageDown";
+export type NavigationKey = PageKey | ArrowKey;
+export declare const isPagingKey: (key: string) => key is PageKey;
+export declare const isNavigationKey: (key: string) => key is NavigationKey;

package/types/useDataSource.d.ts

@@ -0,0 +1,40 @@
+import { DataSource, DataSourceConfigMessage, DataSourceRow, DataSourceSubscribedMessage, VuuFeatureMessage, VuuFeatureInvocationMessage } from "@vuu-ui/vuu-data";
+import { VuuRange, VuuSortCol } from "@vuu-ui/vuu-protocol-types";
+export type SubscriptionDetails = {
+    columnNames?: string[];
+    range: {
+        from: number;
+        to: number;
+    };
+    sort?: VuuSortCol[];
+};
+export interface DataSourceHookProps {
+    dataSource: DataSource;
+    onConfigChange?: (message: DataSourceConfigMessage) => void;
+    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
+    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
+    onSizeChange: (size: number) => void;
+    onSubscribed: (subscription: DataSourceSubscribedMessage) => void;
+    range?: VuuRange;
+    renderBufferSize?: number;
+    viewportRowCount: number;
+}
+export declare function useDataSource({ dataSource, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSizeChange, onSubscribed, range, renderBufferSize, viewportRowCount, }: DataSourceHookProps): {
+    data: DataSourceRow[];
+    getSelectedRows: () => DataSourceRow[];
+    range: VuuRange;
+    setRange: (range: VuuRange) => void;
+    dataSource: DataSource;
+};
+export declare class MovingWindow {
+    data: DataSourceRow[];
+    rowCount: number;
+    private range;
+    constructor({ from, to }: VuuRange);
+    setRowCount: (rowCount: number) => void;
+    add(data: DataSourceRow): void;
+    getAtIndex(index: number): DataSourceRow | undefined;
+    isWithinRange(index: number): boolean;
+    setRange({ from, to }: VuuRange): void;
+    getSelectedRows(): DataSourceRow[];
+}

package/types/useDataTable.d.ts

@@ -0,0 +1,63 @@
+import { DataSource, DataSourceRow, VuuFeatureInvocationMessage, VuuFeatureMessage } from "@vuu-ui/vuu-data";
+import { GridConfig, KeyedColumnDescriptor, SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
+import { VuuSortType } from "@vuu-ui/vuu-protocol-types";
+import { MouseEvent } from "react";
+import { TableColumnResizeHandler, tableLayoutType } from "./dataTableTypes";
+import { MeasuredProps } from "./useMeasuredContainer";
+export interface DataTableHookProps extends MeasuredProps {
+    config: Omit<GridConfig, "headings">;
+    dataSource: DataSource;
+    headerHeight: number;
+    onConfigChange?: (config: Omit<GridConfig, "headings">) => void;
+    onFeatureEnabled?: (message: VuuFeatureMessage) => void;
+    onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;
+    renderBufferSize?: number;
+    rowHeight: number;
+    onSelectionChange?: SelectionChangeHandler;
+    selectionModel: TableSelectionModel;
+    tableLayout: tableLayoutType;
+}
+export declare const useDataTable: ({ config, dataSource, headerHeight, onConfigChange, onFeatureEnabled, onFeatureInvocation, onSelectionChange, renderBufferSize, rowHeight, selectionModel, tableLayout, ...measuredProps }: DataTableHookProps) => {
+    draggable: JSX.Element | undefined;
+    draggedItemIndex: number | undefined;
+    tableLayout: "row" | "column";
+    onHeaderCellDragStart: ((evt: MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
+    containerMeasurements: import("./useMeasuredContainer").MeasuredContainerHookResult;
+    containerProps: {
+        onClick: (evt: MouseEvent<Element, globalThis.MouseEvent>) => void;
+        onFocus: () => void;
+        onKeyDown: (e: import("react").KeyboardEvent<Element>) => void;
+    };
+    columns: KeyedColumnDescriptor[];
+    data: DataSourceRow[];
+    dispatchColumnAction: import("react").Dispatch<import("./useTableModel").GridModelAction>;
+    handleContextMenuAction: import("@vuu-ui/vuu-popups").MenuActionHandler;
+    headings: import("@vuu-ui/vuu-datagrid-types").TableHeadings;
+    onColumnResize: TableColumnResizeHandler;
+    onContextMenu: (evt: MouseEvent<HTMLElement>) => void;
+    onRemoveColumnFromGroupBy: (column: KeyedColumnDescriptor) => void;
+    onRowClick: import("./dataTableTypes").RowClickHandler;
+    onSort: (column: KeyedColumnDescriptor, extendSort?: any, sortType?: VuuSortType) => void;
+    onToggleGroup: (row: DataSourceRow) => void;
+    scrollProps: {
+        onScrollbarContainerScroll: () => void;
+        onContentContainerScroll: () => void;
+        onTableContainerScroll: () => void;
+        contentContainerRef: import("react").RefObject<HTMLDivElement>;
+        scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
+        tableContainerRef: import("react").RefObject<HTMLDivElement>;
+    };
+    rowCount: number;
+    viewportMeasurements: {
+        fillerHeight: number;
+        maxScrollContainerScrollHorizontal: number;
+        maxScrollContainerScrollVertical: number;
+        pinnedWidthLeft: number;
+        pinnedWidthRight: number;
+        rowCount: number;
+        scrollContentHeight: number;
+        scrollbarSize: number;
+        scrollContentWidth: number;
+        totalHeaderHeight: number;
+    };
+};

package/types/useDraggableColumn.d.ts

@@ -0,0 +1,12 @@
+import { MouseEvent, RefObject } from "react";
+export interface DraggableColumnHookProps {
+    onDrop: (fromIndex: number, toIndex: number) => void;
+    tableContainerRef: RefObject<HTMLDivElement>;
+    tableLayout: "column" | "row";
+}
+export declare const useDraggableColumn: ({ onDrop, tableContainerRef, tableLayout: tableLayoutProp, }: DraggableColumnHookProps) => {
+    draggable: JSX.Element | undefined;
+    draggedItemIndex: number | undefined;
+    tableLayout: "row" | "column";
+    onHeaderCellDragStart: ((evt: MouseEvent) => void) | undefined;
+};

package/types/useKeyboardNavigation.d.ts

@@ -0,0 +1,22 @@
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { VuuRange } from "@vuu-ui/vuu-protocol-types";
+import { KeyboardEvent, MouseEvent, RefObject } from "react";
+import { ScrollRequestHandler } from "./useTableScroll";
+export type CellPos = [number, number];
+export interface NavigationHookProps {
+    containerRef: RefObject<HTMLElement>;
+    columnCount?: number;
+    data: DataSourceRow[];
+    disableHighlightOnFocus?: boolean;
+    label?: string;
+    viewportRange: VuuRange;
+    requestScroll?: ScrollRequestHandler;
+    restoreLastFocus?: boolean;
+    rowCount?: number;
+    selected?: unknown;
+}
+export declare const useKeyboardNavigation: ({ columnCount, containerRef, disableHighlightOnFocus, data, requestScroll, rowCount, viewportRange, }: NavigationHookProps) => {
+    onClick: (evt: MouseEvent) => void;
+    onFocus: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+};

package/types/useMeasuredContainer.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from "react";
+export interface ClientSize {
+    clientHeight: number;
+    clientWidth: number;
+}
+export interface MeasuredProps {
+    defaultHeight?: number;
+    defaultWidth?: number;
+    height?: number;
+    width?: number;
+}
+export interface Size {
+    height: number | "100%";
+    width: number | "100%";
+}
+export interface MeasuredSize {
+    height: number;
+    width: number;
+}
+export interface MeasuredContainerHookResult {
+    containerRef: RefObject<HTMLDivElement>;
+    outerSize: Size;
+    innerSize?: MeasuredSize;
+}
+export declare const useMeasuredContainer: ({ defaultHeight, defaultWidth, height, width, }: MeasuredProps) => MeasuredContainerHookResult;

package/types/useMeasuredSize.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from "react";
+export type Size = {
+    pixelHeight: number;
+    pixelWidth: number;
+    clientHeight?: number;
+    clientWidth?: number;
+    height: number | "100%";
+    width: number | "100%";
+};
+export type FullSize = {
+    clientHeight?: number;
+    clientWidth?: number;
+    height: "100%";
+    width: "100%";
+};
+export type ClientSize = {
+    clientHeight: number;
+    clientWidth: number;
+};
+export type MeasuredSize = ClientSize & {
+    height: number | "100%";
+    width: number | "100%";
+};
+export declare const isMeasured: (size: Size | MeasuredSize) => size is MeasuredSize;
+export declare const isFullSize: (size: Size | MeasuredSize | FullSize) => size is FullSize;
+export declare const useMeasuredSize: (containerRef: RefObject<HTMLDivElement>, height?: number | "100%", width?: number | "100%") => Size;

package/types/useResizeObserver.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+export declare const WidthHeight: string[];
+export declare const WidthOnly: string[];
+export type measurements<T = string | number> = {
+    height?: T;
+    clientHeight?: number;
+    clientWidth?: number;
+    contentHeight?: number;
+    contentWidth?: number;
+    scrollHeight?: number;
+    scrollWidth?: number;
+    width?: T;
+};
+export type ResizeHandler = (measurements: measurements<number>) => void;
+export declare function useResizeObserver(ref: RefObject<Element | HTMLElement | null>, dimensions: string[], onResize: ResizeHandler, reportInitialSize?: boolean): void;

package/types/useSelection.d.ts

@@ -0,0 +1,7 @@
+import { SelectionChangeHandler, TableSelectionModel } from "@vuu-ui/vuu-datagrid-types";
+import { RowClickHandler } from "./dataTableTypes";
+export interface SelectionHookProps {
+    selectionModel: TableSelectionModel;
+    onSelectionChange: SelectionChangeHandler;
+}
+export declare const useSelection: ({ selectionModel, onSelectionChange, }: SelectionHookProps) => RowClickHandler;

package/types/useTableColumnResize.d.ts

@@ -0,0 +1,17 @@
+import { Heading, KeyedColumnDescriptor } from "@vuu-ui/vuu-datagrid-types";
+import { RefObject } from "react";
+export type ResizeHandler = (evt: MouseEvent, moveBy: number) => void;
+export interface CellResizeHookProps {
+    column: KeyedColumnDescriptor | Heading;
+    onResize?: (phase: resizePhase, columnName: string, width?: number) => void;
+    rootRef: RefObject<HTMLDivElement>;
+}
+type resizePhase = "begin" | "resize" | "end";
+export interface CellResizeHookResult {
+    isResizing: boolean;
+    onDrag: (evt: MouseEvent, moveBy: number) => void;
+    onDragStart: (evt: React.MouseEvent) => void;
+    onDragEnd: (evt: MouseEvent) => void;
+}
+export declare const useTableColumnResize: ({ column, onResize, rootRef, }: CellResizeHookProps) => CellResizeHookResult;
+export {};