be more careful with clientWidth/clientHeight

packages-premium

@@ -1 +1 @@
-Subproject commit 6f7cfe3e6c09a4fd5d0a6acfaf6dfad7b3c8153a
+Subproject commit eb094505e113d546b74f5da0d3c668d2a790bb19

packages/core/src/scrollgrid/SimpleScrollGrid.tsx

@@ -87,21 +87,21 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
       return chunkConfig.outerContent
     }
 
-    let { state } = this
+    let { forceYScrollbars, scrollerClientWidths, scrollerClientHeights } = this.state
 
     let needsYScrolling = getAllowYScrolling(this.props, sectionConfig) // TODO: do lazily. do in section config?
     let isLiquid = getSectionHasLiquidHeight(this.props, sectionConfig)
 
     let overflowY: OverflowValue =
-      state.forceYScrollbars ? 'scroll' :
+      forceYScrollbars ? 'scroll' :
       !needsYScrolling ? 'hidden' :
       'auto'
 
     let content = renderChunkContent(sectionConfig, chunkConfig, {
       tableColGroupNode: microColGroupNode,
       tableMinWidth: '',
-      clientWidth: state.scrollerClientWidths[sectionI] || '',
-      clientHeight: state.scrollerClientHeights[sectionI] || '',
+      clientWidth: scrollerClientWidths[sectionI] !== undefined ? scrollerClientWidths[sectionI] : null,
+      clientHeight: scrollerClientHeights[sectionI] !== undefined ? scrollerClientHeights[sectionI] : null,
       expandRows: sectionConfig.expandRows,
       syncRowHeights: false,
       rowSyncHeights: [],

packages/core/src/scrollgrid/util.tsx

@@ -40,8 +40,8 @@ export interface ChunkConfig {
 export interface ChunkContentCallbackArgs { // TODO: util for wrapping tables!?
   tableColGroupNode: VNode
   tableMinWidth: CssDimValue
-  clientWidth: CssDimValue
-  clientHeight: CssDimValue
+  clientWidth: number | null // important to know whether 0 or not-yet-determined. for headless testing
+  clientHeight: number| null //
   expandRows: boolean
   syncRowHeights: boolean
   rowSyncHeights: number[]

packages/daygrid/src/DayTable.tsx

@@ -37,8 +37,8 @@ export interface DayTableProps {
   dayMaxEventRows: boolean | number
   expandRows: boolean
   headerAlignElRef?: RefObject<HTMLElement> // for more popover alignment
-  clientWidth: CssDimValue
-  clientHeight: CssDimValue
+  clientWidth: number | null
+  clientHeight: number | null
 }
 
 export default class DayTable extends DateComponent<DayTableProps, ComponentContext> {

packages/daygrid/src/Table.tsx

@@ -31,8 +31,8 @@ export interface TableProps {
   colGroupNode: VNode
   tableMinWidth: CssDimValue
   expandRows: boolean
-  clientWidth: CssDimValue
-  clientHeight: CssDimValue
+  clientWidth: number | null
+  clientHeight: number | null
   businessHourSegs: TableSeg[]
   bgEventSegs: TableSeg[]
   fgEventSegs: TableSeg[]

packages/daygrid/src/TableRow.tsx

@@ -37,7 +37,7 @@ export interface TableRowProps {
   eventResize: EventSegUiInteractionState | null
   dayMaxEvents: boolean | number
   dayMaxEventRows: boolean | number
-  clientWidth: CssDimValue
+  clientWidth: number | null
   onMoreClick?: (arg: MoreLinkArg) => void
   dateProfile: DateProfile
   todayRange: DateRange
@@ -312,7 +312,7 @@ export default class TableRow extends DateComponent<TableRowProps, TableRowState
   updateSizing(isExternalChange, isHorizontalChange) {
     if (
       isExternalChange &&
-      this.props.clientWidth // positioning ready?
+      this.props.clientWidth !== null // positioning ready?
     ) {
       let cellInnerEls = this.cellInnerElRefs.collect()
       let cellContentEls = this.cellContentElRefs.collect()

packages/timegrid/src/DayTimeCols.tsx

@@ -38,8 +38,8 @@ export interface DayTimeColsProps {
   eventResize: EventInteractionState | null
   tableColGroupNode: VNode
   tableMinWidth: CssDimValue
-  clientWidth: CssDimValue
-  clientHeight: CssDimValue
+  clientWidth: number | null
+  clientHeight: number | null
   expandRows: boolean
   onScrollTopRequest?: (scrollTop: number) => void
   forPrint: boolean

packages/timegrid/src/TimeCols.tsx

@@ -40,8 +40,8 @@ export interface TimeColsProps {
   rootElRef?: Ref<HTMLDivElement>
   tableColGroupNode: VNode
   tableMinWidth: CssDimValue
-  clientWidth: CssDimValue
-  clientHeight: CssDimValue
+  clientWidth: number | null
+  clientHeight: number | null
   expandRows: boolean
   nowIndicatorSegs: TimeColsSeg[]
   onScrollTopRequest?: (scrollTop: number) => void

packages/timegrid/src/TimeColsContent.tsx

@@ -34,7 +34,7 @@ export interface TimeColsContentProps {
   eventResize: EventSegUiInteractionState | null
   nowIndicatorSegs: TimeColsSeg[]
   forPrint: boolean
-  clientWidth: CssDimValue
+  clientWidth: number | null
   tableMinWidth: CssDimValue
   tableColGroupNode: VNode
   slatCoords: TimeColsSlatsCoords
@@ -136,7 +136,7 @@ export default class TimeColsContent extends BaseComponent<TimeColsContentProps>
   updateCoords() {
     let { props } = this
 
-    if (props.onColCoords && props.clientWidth) { // clientWidth means sizing has stabilized
+    if (props.onColCoords && props.clientWidth !== null) { // means sizing has stabilized
       props.onColCoords(
         new PositionCache(
           this.rootElRef.current,

packages/timegrid/src/TimeColsSlats.tsx

@@ -23,7 +23,7 @@ import TimeColsSlatsCoords from './TimeColsSlatsCoords'
 
 
 export interface TimeColsSlatsProps extends TimeColsSlatsContentProps {
-  clientWidth: CssDimValue
+  clientWidth: number | null
   minHeight: CssDimValue
   tableMinWidth: CssDimValue
   tableColGroupNode: VNode
@@ -103,7 +103,7 @@ export default class TimeColsSlats extends BaseComponent<TimeColsSlatsProps> {
   updateSizing() {
     let { props } = this
 
-    if (props.onCoords && props.clientWidth) { // clientWidth means sizing has stabilized
+    if (props.onCoords && props.clientWidth !== null) { // means sizing has stabilized
       props.onCoords(
         new TimeColsSlatsCoords(
           new PositionCache(