@vuu-ui/vuu-table 0.6.14-debug

package/index.css.map

@@ -0,0 +1,7 @@
+{
+  "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-table/src/TableCell.css", "../../../packages/vuu-table/src/TableGroupCell.css", "../../../packages/vuu-table/src/TableRow.css", "../../../packages/vuu-table/src/ColumnResizer.css", "../../../packages/vuu-table/src/SortIndicator.css", "../../../packages/vuu-table/src/TableHeaderCell.css", "../../../packages/vuu-table/src/filter-indicator.css", "../../../packages/vuu-filters/src/filter-input/FilterInput.css", "../../../packages/vuu-filters/src/filter-toolbar/FilterToolbar.css", "../../../packages/vuu-table/src/TableGroupHeaderCell.css", "../../../packages/vuu-table/src/Table.css", "../../../packages/vuu-table/src/cell-renderers/json-cell/JsonCell.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", ".vuuTable {\n    --cell-outline-width: 2px;\n    user-select: none;\n}\n\n.vuuTable-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.vuuTable th:focus,\n.vuuTable 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.vuuTable 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.vuuTable th:not(.vuuTable-headerCell-resizing):focus .vuuTable-headerCell-inner{\n    --columnResizer-color: transparent;\n}\n\n\n.vuuTable 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.vuuTableRow-expanded .vuuTableGroupCell-toggle[data-icon='triangle-right']{\n    --vuu-icon-svg: var(--svg-minus-box);\n} */\n", "  .vuuTableRow {\n    background: transparent;\n    /* background: var(--row-background); */\n  }\n\n  .vuuTableRow-even {\n    --row-background: var(--row-background-even);\n  }\n\n  .vuuTableRow :is(.vuuPinFloating, .vuuPinLeft, .vuuPinRight) {\n    background-color: var(--row-background);\n  }\n  \n  .vuuTableRow-expanded {\n    --row-toggle-icon-transform: rotate(90deg);\n  }\n  \n  .vuuTableRow[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  /* .vuuTableRow:not([aria-selected]):has(+ [aria-selected]) {\n    --vuuTableCell-border-bottomColor: var(--salt-selectable-borderColor-selected);\n  } */\n\n  .vuuTableRow-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(--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-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(--dataTable-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}", "\n.salt-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.vuuTable-groupHeaderCell {\n  --cell-align: 'flex-start';\n  text-align: left;\n    background: var(--dataTable-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  .vuuTable-groupHeaderCell-pending {\n    --pending-content: '';\n  }\n\n  .vuuTable-groupHeaderCell-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.vuuTable {\n  --dataTable-background: var(--salt-container-primary-background, inherit);\n  --row-background-even: var(--dataTable-background);\n  --row-background-odd: var(--dataTable-background);\n  --table-background: var(--dataTable-background);\n  background-color: var(--dataTable-background);\n  position: relative;\n}\n\n.vuuTable-zebra {\n  --row-background-even: var(--salt-container-secondary-background);\n  --table-background: 0 var(--header-height) repeating-linear-gradient(\n    to bottom, \n    var(--salt-container-secondary-background), \n    var(--salt-container-secondary-background) var(--row-height), \n    var(--dataTable-background) var(--row-height), \n    var(--dataTable-background) calc(var(--row-height) *2));\n}\n\n.vuuTable-loading .vuuTable-table {\n  --skeleton-height: 20px;\n  --skeleton-width: calc(var(--content-width) - 8px);\n  --skeleton-left: 4px;\n  --skeleton-row-height: 16px;\n  --skeleton-size: var(--skeleton-width) var(--skeleton-height);\n  --skeleton-row: linear-gradient(\n    var(--salt-color-gray-20-fade-background) var(--skeleton-row-height),\n    transparent 0\n  );\n  --skeleton-background-image: var(--skeleton-row);\n\n\n  background-image: var(--skeleton-background-image);\n  background-repeat: repeat-y;\n  background-size: var(--skeleton-size);\n  background-position-x: var(--skeleton-left);\n  background-position-y: 27px;\n}\n\n.vuuTable-contentContainer {\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.vuuTable-contentContainer::-webkit-scrollbar {\n  display: none;\n}\n\n.vuuTable-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.vuuTable-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.vuuTable-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.vuuTable-scrollContent {\n  position: absolute;\n  height: var(--content-height);\n  width: var(--scroll-content-width, var(--content-width));\n}\n\n.vuuTable-tableContainer {\n  background-color: var(--dataTable-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.vuuTable-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: var(--table-background);\n  /* background-position: 0 25px; */\n\n  border-collapse: separate;\n  border-spacing: 0;\n  border-left: 1px solid #ccc;\n  border: none;\n  font-size: var(--vuuTable-font-size, 10px);\n  margin: 0;\n  min-height: 100%;\n  table-layout: fixed;\n  width: var(--vuuTable-contentWidth);\n}\n\n.vuuTable-columnBased {\n  display: inline-table;\n  height: var(--vuuTable-height);\n  position: static;\n}\n\n/* .vuuTable-columnBased .vuuTable-headerCell{\n  background-color: darkmagenta;\n} */\n\n.vuuTable-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/* .vuuTable-row {\n  transform: translate3d(0px, 25px, 0px);\n} */\n\n.vuuTable-settings {\n  --saltButton-height: var(--header-height);\n  --saltButton-width: 15px;\n  position: absolute !important;\n  right: 0;\n  top: 0;\n}\n\n.vuuTable: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.vuuTable-loading .vuuTable-table {\n  --skeleton-height: 20px;\n  --skeleton-width: calc(var(--content-width) - 8px);\n  --skeleton-left: 4px;\n  --skeleton-row-height: 16px;\n  --skeleton-size: var(--skeleton-width) var(--skeleton-height);\n  --skeleton-row: linear-gradient(\n    var(--salt-color-gray-20-fade-background) var(--skeleton-row-height),\n    transparent 0\n  );\n  --skeleton-background-image: var(--skeleton-row);\n\n  background-image: var(--skeleton-background-image);\n  background-repeat: repeat-y;\n  background-size: var(--skeleton-size);\n  background-position-x: var(--skeleton-left);\n  background-position-y: 27px;\n\n  /* animation:linearAnim 2s infinite linear */\n}\n\n.vuuTable-loading .vuuTable-table:after {\n  animation: shimmer 2s infinite;\n  background: linear-gradient(\n    90deg, \n    rgba(255,255,255, 0) 0, \n    rgba(255,255,255, .2) 20%, \n    rgba(255,255,255, .6) 60%, \n    rgba(255,255,255, 0)\n    );\n  content: '';\n  height: var(--table-height);\n  left: 0px;\n  position: absolute;\n  transform: translateX(-100%);\n  top: var(--header-height);\n  width: var(--content-width);\n}\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}", ".vuuJsonCell-group {\n    align-items: center;\n    display: inline-flex;\n    height: calc(var(--vuuTable-rowHeight) - 1px);\n    width: 100%;\n}\n\n.vuuJsonCell-toggle {\n    --vuu-icon-color: var(--salt-text-primary-foreground);\n    --vuu-icon-height: calc(var(--vuuTable-rowHeight) - 1px);\n    --vuu-icon-width: 18px;\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.vuuJsonCell-name {\n      font-weight: var(--salt-typography-fontWeight-semiBold);  \n}\n\n.vuuJsonCell-value {\n    overflow: hidden;\n    text-overflow: ellipsis;\n}"],
+  "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;;;AC3BF;AACE;AAAA;AAIF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAOF;AACE;AAAA;;;AC3BJ;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;;;ACRJ;AACC;AAAA;AAGD;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;AAGF;AACE;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;;;ACpFJ;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AAAA;AAQF;AACE;AACA;AACA;AACA;AACA;AACA;AAIA;AAGA;AACA;AACA;AACA;AACA;AAAA;AAGF;AAEE;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;AAGA;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;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;AACA;AACA;AACA;AAAA;AAKF;AACE;AACA;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AAAA;AAEI;AAAA;AAAA;;;ACnOJ;AACI;AACA;AACA;AACA;AAAA;AAGJ;AACI;AACA;AACA;AACA;AACA;AAAA;AAGJ;AACM;AAAA;AAGN;AACI;AACA;AAAA;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@vuu-ui/vuu-table",
+  "version": "0.6.14-debug",
+  "author": "heswell",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@salt-ds/core": "1.2.0",
+    "@salt-ds/icons": "1.1.0",
+    "@heswell/salt-lab": "1.0.0-alpha.2",
+    "@vuu-ui/vuu-utils": "0.6.14-debug",
+    "classnames": "^2.2.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "files": [
+    "index.js",
+    "index.css",
+    "index.js.map",
+    "index.css.map",
+    "/src",
+    "/types"
+  ],
+  "module": "esm/index.js",
+  "main": "cjs/index.js",
+  "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/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/RowBasedTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TableImplementationProps } from "./dataTableTypes";
+export declare const RowBasedTable: ({ columns, columnsWithinViewport, data, headings, onColumnResize, onHeaderCellDragStart, onContextMenu, onRemoveColumnFromGroupBy, onRowClick, onSort, onToggleGroup, virtualColSpan, 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/Table.d.ts

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

package/types/TableCell.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TableCellProps } from "@vuu-ui/vuu-datagrid-types";
+import "./TableCell.css";
+export declare const TableCell: import("react").MemoExoticComponent<({ className: classNameProp, column, onClick, row }: TableCellProps) => JSX.Element>;

package/types/TableGroupCell.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DataSourceRow } from "@vuu-ui/vuu-data";
+import { KeyedColumnDescriptor, TableCellProps } from "@vuu-ui/vuu-datagrid-types";
+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: groupColumn, 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,15 @@
+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, column: KeyedColumnDescriptor) => void;
+    row: DataSourceRow;
+    virtualColSpan?: number;
+}
+export declare const TableRow: import("react").NamedExoticComponent<RowProps>;

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

@@ -0,0 +1 @@
+export * from "./json-cell";

package/types/cell-renderers/json-cell/JsonCell.d.ts

@@ -0,0 +1 @@
+import "./JsonCell.css";

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

@@ -0,0 +1 @@
+export * from "./JsonCell";

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,70 @@
+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;
+    zebraStripes?: boolean;
+}
+export type TableColumnResizeHandler = (phase: "begin" | "resize" | "end", columnName: string, width?: number) => void;
+export interface TableImplementationProps {
+    columns: KeyedColumnDescriptor[];
+    columnsWithinViewport: 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, column: KeyedColumnDescriptor) => void;
+    virtualColSpan?: number;
+    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,4 @@
+export * from "./dataTableTypes";
+export * from "./Table";
+export * from "./useMeasuredContainer";
+export * from "./cell-renderers";

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,54 @@
+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[];
+    columnsWithinViewport: 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, column: KeyedColumnDescriptor) => void;
+    virtualColSpan: number;
+    scrollProps: {
+        scrollbarContainerRef: import("react").RefObject<HTMLDivElement>;
+        onScrollbarContainerScroll: () => void;
+        contentContainerRef: import("react").RefObject<HTMLDivElement>;
+        onContentContainerScroll: () => void;
+        tableContainerRef: import("react").RefObject<HTMLDivElement>;
+        onTableContainerScroll: () => void;
+    };
+    rowCount: number;
+    viewportMeasurements: import("./useTableViewport").ViewportMeasurements;
+};

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 {};