baseui 0.0.0-alpha-d3f908b → 0.0.0-alpha-80026d1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/data-table/data-table.js +43 -45
  2. package/data-table/data-table.js.flow +16 -13
  3. package/data-table/measure-column-widths.js +1 -6
  4. package/data-table/measure-column-widths.js.flow +1 -4
  5. package/es/data-table/data-table.js +15 -13
  6. package/es/data-table/measure-column-widths.js +1 -6
  7. package/esm/data-table/data-table.js +43 -45
  8. package/esm/data-table/measure-column-widths.js +1 -6
  9. package/package.json +1 -1
package/data-table/data-table.js CHANGED
@@ -568,27 +568,24 @@ function DataTable(_ref2) {
568
568
  }
569
569
 
570
570
  return rowHeight;
571
- }, [rowHeight]); // We use state for our ref, to allow hooks to update when the ref changes.
572
- // eslint-disable-next-line flowtype/no-weak-types
571
+ }, [rowHeight]);
572
+ var gridRef = React.useRef(null); // // We use state for our ref, to allow hooks to update when the ref changes.
573
+ // // eslint-disable-next-line flowtype/no-weak-types
574
+ // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
573
575
 
574
- var _React$useState7 = React.useState(null),
576
+ var _React$useState7 = React.useState(columns.map(function () {
577
+ return 0;
578
+ })),
575
579
  _React$useState8 = _slicedToArray(_React$useState7, 2),
576
- gridRef = _React$useState8[0],
577
- setGridRef = _React$useState8[1];
580
+ measuredWidths = _React$useState8[0],
581
+ setMeasuredWidths = _React$useState8[1];
578
582
 
579
583
  var _React$useState9 = React.useState(columns.map(function () {
580
584
  return 0;
581
585
  })),
582
586
  _React$useState10 = _slicedToArray(_React$useState9, 2),
583
- measuredWidths = _React$useState10[0],
584
- setMeasuredWidths = _React$useState10[1];
585
-
586
- var _React$useState11 = React.useState(columns.map(function () {
587
- return 0;
588
- })),
589
- _React$useState12 = _slicedToArray(_React$useState11, 2),
590
- resizeDeltas = _React$useState12[0],
591
- setResizeDeltas = _React$useState12[1];
587
+ resizeDeltas = _React$useState10[0],
588
+ setResizeDeltas = _React$useState10[1];
592
589
 
593
590
  React.useEffect(function () {
594
591
  setMeasuredWidths(function (prev) {
@@ -603,13 +600,12 @@ function DataTable(_ref2) {
603
600
  });
604
601
  }, [columns]);
605
602
  var resetAfterColumnIndex = React.useCallback(function (columnIndex) {
606
- if (gridRef) {
603
+ if (gridRef.current) {
607
604
  // $FlowFixMe trigger react-window to layout the elements again
608
- gridRef.resetAfterColumnIndex(columnIndex, true);
605
+ gridRef.current.resetAfterColumnIndex(columnIndex, true);
609
606
  }
610
- }, [gridRef]);
607
+ }, [gridRef.current]);
611
608
  var handleWidthsChange = React.useCallback(function (nextWidths) {
612
- console.log('next widths', nextWidths);
613
609
  setMeasuredWidths(nextWidths);
614
610
  resetAfterColumnIndex(0);
615
611
  }, [setMeasuredWidths, resetAfterColumnIndex]);
@@ -621,20 +617,20 @@ function DataTable(_ref2) {
621
617
  resetAfterColumnIndex(columnIndex);
622
618
  }, [setResizeDeltas, resetAfterColumnIndex]);
623
619
 
624
- var _React$useState13 = React.useState(0),
620
+ var _React$useState11 = React.useState(0),
621
+ _React$useState12 = _slicedToArray(_React$useState11, 2),
622
+ scrollLeft = _React$useState12[0],
623
+ setScrollLeft = _React$useState12[1];
624
+
625
+ var _React$useState13 = React.useState(false),
625
626
  _React$useState14 = _slicedToArray(_React$useState13, 2),
626
- scrollLeft = _React$useState14[0],
627
- setScrollLeft = _React$useState14[1];
627
+ isScrollingX = _React$useState14[0],
628
+ setIsScrollingX = _React$useState14[1];
628
629
 
629
630
  var _React$useState15 = React.useState(false),
630
631
  _React$useState16 = _slicedToArray(_React$useState15, 2),
631
- isScrollingX = _React$useState16[0],
632
- setIsScrollingX = _React$useState16[1];
633
-
634
- var _React$useState17 = React.useState(false),
635
- _React$useState18 = _slicedToArray(_React$useState17, 2),
636
- recentlyScrolledX = _React$useState18[0],
637
- setRecentlyScrolledX = _React$useState18[1];
632
+ recentlyScrolledX = _React$useState16[0],
633
+ setRecentlyScrolledX = _React$useState16[1];
638
634
 
639
635
  React.useLayoutEffect(function () {
640
636
  if (recentlyScrolledX !== isScrollingX) {
@@ -756,18 +752,19 @@ function DataTable(_ref2) {
756
752
  return result;
757
753
  }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
758
754
 
759
- var _React$useState19 = React.useState(0),
760
- _React$useState20 = _slicedToArray(_React$useState19, 2),
761
- browserScrollbarWidth = _React$useState20[0],
762
- setBrowserScrollbarWidth = _React$useState20[1];
755
+ var _React$useState17 = React.useState(0),
756
+ _React$useState18 = _slicedToArray(_React$useState17, 2),
757
+ browserScrollbarWidth = _React$useState18[0],
758
+ setBrowserScrollbarWidth = _React$useState18[1];
763
759
 
764
760
  var normalizedWidths = React.useMemo(function () {
765
761
  var resizedWidths = measuredWidths.map(function (w, i) {
766
762
  return Math.floor(w) + Math.floor(resizeDeltas[i]);
767
763
  });
768
764
 
769
- if (gridRef) {
770
- var gridProps = gridRef.props;
765
+ if (gridRef.current) {
766
+ // $FlowFixMe
767
+ var gridProps = gridRef.current.props;
771
768
  var isContentTallerThanContainer = false;
772
769
  var visibleRowHeight = 0;
773
770
 
@@ -804,7 +801,8 @@ function DataTable(_ref2) {
804
801
  }
805
802
 
806
803
  return resizedWidths;
807
- }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
804
+ }, [// gridRef,
805
+ measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
808
806
  var isSelectable = batchActions ? !!batchActions.length : false;
809
807
  var isSelectedAll = React.useMemo(function () {
810
808
  if (!selectedRowIds) {
@@ -848,23 +846,23 @@ function DataTable(_ref2) {
848
846
  }
849
847
  }, [onSort]);
850
848
 
849
+ var _React$useState19 = React.useState(-1),
850
+ _React$useState20 = _slicedToArray(_React$useState19, 2),
851
+ columnHighlightIndex = _React$useState20[0],
852
+ setColumnHighlightIndex = _React$useState20[1];
853
+
851
854
  var _React$useState21 = React.useState(-1),
852
855
  _React$useState22 = _slicedToArray(_React$useState21, 2),
853
- columnHighlightIndex = _React$useState22[0],
854
- setColumnHighlightIndex = _React$useState22[1];
855
-
856
- var _React$useState23 = React.useState(-1),
857
- _React$useState24 = _slicedToArray(_React$useState23, 2),
858
- rowHighlightIndex = _React$useState24[0],
859
- setRowHighlightIndex = _React$useState24[1];
856
+ rowHighlightIndex = _React$useState22[0],
857
+ setRowHighlightIndex = _React$useState22[1];
860
858
 
861
859
  function handleRowHighlightIndexChange(nextIndex) {
862
860
  setRowHighlightIndex(nextIndex);
863
861
 
864
- if (gridRef) {
862
+ if (gridRef.current) {
865
863
  if (nextIndex >= 0) {
866
864
  // $FlowFixMe - unable to get react-window types
867
- gridRef.scrollToItem({
865
+ gridRef.current.scrollToItem({
868
866
  rowIndex: nextIndex
869
867
  });
870
868
  }
@@ -955,7 +953,7 @@ function DataTable(_ref2) {
955
953
  }
956
954
  }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
957
955
  , {
958
- ref: setGridRef,
956
+ ref: gridRef,
959
957
  overscanRowCount: 10,
960
958
  overscanColumnCount: 5,
961
959
  innerElementType: InnerTableElement,
package/data-table/data-table.js.flow CHANGED
@@ -699,9 +699,12 @@ export function DataTable({
699
699
  [rowHeight],
700
700
  );
701
701
 
702
- // We use state for our ref, to allow hooks to update when the ref changes.
703
- // eslint-disable-next-line flowtype/no-weak-types
704
- const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
702
+ const gridRef = React.useRef<typeof VariableSizeGrid | null>(null);
703
+
704
+ // // We use state for our ref, to allow hooks to update when the ref changes.
705
+ // // eslint-disable-next-line flowtype/no-weak-types
706
+ // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
707
+
705
708
  const [measuredWidths, setMeasuredWidths] = React.useState(
706
709
  columns.map(() => 0),
707
710
  );
@@ -717,16 +720,15 @@ export function DataTable({
717
720
 
718
721
  const resetAfterColumnIndex = React.useCallback(
719
722
  columnIndex => {
720
- if (gridRef) {
723
+ if (gridRef.current) {
721
724
  // $FlowFixMe trigger react-window to layout the elements again
722
- gridRef.resetAfterColumnIndex(columnIndex, true);
725
+ gridRef.current.resetAfterColumnIndex(columnIndex, true);
723
726
  }
724
727
  },
725
- [gridRef],
728
+ [gridRef.current],
726
729
  );
727
730
  const handleWidthsChange = React.useCallback(
728
731
  nextWidths => {
729
- console.log('next widths', nextWidths);
730
732
  setMeasuredWidths(nextWidths);
731
733
  resetAfterColumnIndex(0);
732
734
  },
@@ -852,8 +854,9 @@ export function DataTable({
852
854
  const resizedWidths = measuredWidths.map(
853
855
  (w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]),
854
856
  );
855
- if (gridRef) {
856
- const gridProps = gridRef.props;
857
+ if (gridRef.current) {
858
+ // $FlowFixMe
859
+ const gridProps = gridRef.current.props;
857
860
 
858
861
  let isContentTallerThanContainer = false;
859
862
  let visibleRowHeight = 0;
@@ -890,7 +893,7 @@ export function DataTable({
890
893
  }
891
894
  return resizedWidths;
892
895
  }, [
893
- gridRef,
896
+ // gridRef,
894
897
  measuredWidths,
895
898
  resizeDeltas,
896
899
  browserScrollbarWidth,
@@ -953,10 +956,10 @@ export function DataTable({
953
956
 
954
957
  function handleRowHighlightIndexChange(nextIndex) {
955
958
  setRowHighlightIndex(nextIndex);
956
- if (gridRef) {
959
+ if (gridRef.current) {
957
960
  if (nextIndex >= 0) {
958
961
  // $FlowFixMe - unable to get react-window types
959
- gridRef.scrollToItem({rowIndex: nextIndex});
962
+ gridRef.current.scrollToItem({rowIndex: nextIndex});
960
963
  }
961
964
  if (onRowHighlightChange) {
962
965
  onRowHighlightChange(nextIndex, rows[nextIndex - 1]);
@@ -1056,7 +1059,7 @@ export function DataTable({
1056
1059
  >
1057
1060
  <VariableSizeGrid
1058
1061
  // eslint-disable-next-line flowtype/no-weak-types
1059
- ref={(setGridRef: any)}
1062
+ ref={(gridRef: any)}
1060
1063
  overscanRowCount={10}
1061
1064
  overscanColumnCount={5}
1062
1065
  innerElementType={InnerTableElement}
package/data-table/measure-column-widths.js CHANGED
@@ -48,10 +48,7 @@ function MeasureColumn(_ref) {
48
48
  React.useEffect(function () {
49
49
  if (typeof document !== 'undefined') {
50
50
  if (ref.current) {
51
- // onLayout(columnIndex, ref.current.getBoundingClientRect());
52
- onLayout(columnIndex, {
53
- width: 0
54
- });
51
+ onLayout(columnIndex, ref.current.getBoundingClientRect());
55
52
  }
56
53
  }
57
54
  }, []);
@@ -142,9 +139,7 @@ function MeasureColumnWidths(_ref2) {
142
139
  return generateSampleIndices(0, rows.length - 1, sampleSize);
143
140
  }, [columns, rows, widths, sampleSize]);
144
141
  var handleDimensionsChange = React.useCallback(function (columnIndex, dimensions) {
145
- console.log('handle dimensions change', columnIndex, dimensions);
146
142
  var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
147
- console.log('next width', columnIndex, nextWidth);
148
143
 
149
144
  if (nextWidth !== widthMap.get(columnIndex)) {
150
145
  widthMap.set(columnIndex, nextWidth);
package/data-table/measure-column-widths.js.flow CHANGED
@@ -29,8 +29,7 @@ function MeasureColumn({
29
29
  React.useEffect(() => {
30
30
  if (__BROWSER__) {
31
31
  if (ref.current) {
32
- // onLayout(columnIndex, ref.current.getBoundingClientRect());
33
- onLayout(columnIndex, {width: 0});
32
+ onLayout(columnIndex, ref.current.getBoundingClientRect());
34
33
  }
35
34
  }
36
35
  }, []);
@@ -134,7 +133,6 @@ export default function MeasureColumnWidths({
134
133
 
135
134
  const handleDimensionsChange = React.useCallback(
136
135
  (columnIndex, dimensions) => {
137
- console.log('handle dimensions change', columnIndex, dimensions);
138
136
  const nextWidth = Math.min(
139
137
  Math.max(
140
138
  columns[columnIndex].minWidth || 0,
@@ -143,7 +141,6 @@ export default function MeasureColumnWidths({
143
141
  ),
144
142
  columns[columnIndex].maxWidth || Infinity,
145
143
  );
146
- console.log('next width', columnIndex, nextWidth);
147
144
 
148
145
  if (nextWidth !== widthMap.get(columnIndex)) {
149
146
  widthMap.set(columnIndex, nextWidth);
package/es/data-table/data-table.js CHANGED
@@ -469,10 +469,11 @@ export function DataTable({
469
469
  }
470
470
 
471
471
  return rowHeight;
472
- }, [rowHeight]); // We use state for our ref, to allow hooks to update when the ref changes.
473
- // eslint-disable-next-line flowtype/no-weak-types
472
+ }, [rowHeight]);
473
+ const gridRef = React.useRef(null); // // We use state for our ref, to allow hooks to update when the ref changes.
474
+ // // eslint-disable-next-line flowtype/no-weak-types
475
+ // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
474
476
 
475
- const [gridRef, setGridRef] = React.useState(null);
476
477
  const [measuredWidths, setMeasuredWidths] = React.useState(columns.map(() => 0));
477
478
  const [resizeDeltas, setResizeDeltas] = React.useState(columns.map(() => 0));
478
479
  React.useEffect(() => {
@@ -484,13 +485,12 @@ export function DataTable({
484
485
  });
485
486
  }, [columns]);
486
487
  const resetAfterColumnIndex = React.useCallback(columnIndex => {
487
- if (gridRef) {
488
+ if (gridRef.current) {
488
489
  // $FlowFixMe trigger react-window to layout the elements again
489
- gridRef.resetAfterColumnIndex(columnIndex, true);
490
+ gridRef.current.resetAfterColumnIndex(columnIndex, true);
490
491
  }
491
- }, [gridRef]);
492
+ }, [gridRef.current]);
492
493
  const handleWidthsChange = React.useCallback(nextWidths => {
493
- console.log('next widths', nextWidths);
494
494
  setMeasuredWidths(nextWidths);
495
495
  resetAfterColumnIndex(0);
496
496
  }, [setMeasuredWidths, resetAfterColumnIndex]);
@@ -601,8 +601,9 @@ export function DataTable({
601
601
  const normalizedWidths = React.useMemo(() => {
602
602
  const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));
603
603
 
604
- if (gridRef) {
605
- const gridProps = gridRef.props;
604
+ if (gridRef.current) {
605
+ // $FlowFixMe
606
+ const gridProps = gridRef.current.props;
606
607
  let isContentTallerThanContainer = false;
607
608
  let visibleRowHeight = 0;
608
609
 
@@ -637,7 +638,8 @@ export function DataTable({
637
638
  }
638
639
 
639
640
  return resizedWidths;
640
- }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
641
+ }, [// gridRef,
642
+ measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
641
643
  const isSelectable = batchActions ? !!batchActions.length : false;
642
644
  const isSelectedAll = React.useMemo(() => {
643
645
  if (!selectedRowIds) {
@@ -686,10 +688,10 @@ export function DataTable({
686
688
  function handleRowHighlightIndexChange(nextIndex) {
687
689
  setRowHighlightIndex(nextIndex);
688
690
 
689
- if (gridRef) {
691
+ if (gridRef.current) {
690
692
  if (nextIndex >= 0) {
691
693
  // $FlowFixMe - unable to get react-window types
692
- gridRef.scrollToItem({
694
+ gridRef.current.scrollToItem({
693
695
  rowIndex: nextIndex
694
696
  });
695
697
  }
@@ -778,7 +780,7 @@ export function DataTable({
778
780
  }
779
781
  }, /*#__PURE__*/React.createElement(VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
780
782
  , {
781
- ref: setGridRef,
783
+ ref: gridRef,
782
784
  overscanRowCount: 10,
783
785
  overscanColumnCount: 5,
784
786
  innerElementType: InnerTableElement,
package/es/data-table/measure-column-widths.js CHANGED
@@ -22,10 +22,7 @@ function MeasureColumn({
22
22
  React.useEffect(() => {
23
23
  if (typeof document !== 'undefined') {
24
24
  if (ref.current) {
25
- // onLayout(columnIndex, ref.current.getBoundingClientRect());
26
- onLayout(columnIndex, {
27
- width: 0
28
- });
25
+ onLayout(columnIndex, ref.current.getBoundingClientRect());
29
26
  }
30
27
  }
31
28
  }, []);
@@ -110,9 +107,7 @@ export default function MeasureColumnWidths({
110
107
  return generateSampleIndices(0, rows.length - 1, sampleSize);
111
108
  }, [columns, rows, widths, sampleSize]);
112
109
  const handleDimensionsChange = React.useCallback((columnIndex, dimensions) => {
113
- console.log('handle dimensions change', columnIndex, dimensions);
114
110
  const nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
115
- console.log('next width', columnIndex, nextWidth);
116
111
 
117
112
  if (nextWidth !== widthMap.get(columnIndex)) {
118
113
  widthMap.set(columnIndex, nextWidth);
package/esm/data-table/data-table.js CHANGED
@@ -549,27 +549,24 @@ export function DataTable(_ref2) {
549
549
  }
550
550
 
551
551
  return rowHeight;
552
- }, [rowHeight]); // We use state for our ref, to allow hooks to update when the ref changes.
553
- // eslint-disable-next-line flowtype/no-weak-types
552
+ }, [rowHeight]);
553
+ var gridRef = React.useRef(null); // // We use state for our ref, to allow hooks to update when the ref changes.
554
+ // // eslint-disable-next-line flowtype/no-weak-types
555
+ // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
554
556
 
555
- var _React$useState7 = React.useState(null),
557
+ var _React$useState7 = React.useState(columns.map(function () {
558
+ return 0;
559
+ })),
556
560
  _React$useState8 = _slicedToArray(_React$useState7, 2),
557
- gridRef = _React$useState8[0],
558
- setGridRef = _React$useState8[1];
561
+ measuredWidths = _React$useState8[0],
562
+ setMeasuredWidths = _React$useState8[1];
559
563
 
560
564
  var _React$useState9 = React.useState(columns.map(function () {
561
565
  return 0;
562
566
  })),
563
567
  _React$useState10 = _slicedToArray(_React$useState9, 2),
564
- measuredWidths = _React$useState10[0],
565
- setMeasuredWidths = _React$useState10[1];
566
-
567
- var _React$useState11 = React.useState(columns.map(function () {
568
- return 0;
569
- })),
570
- _React$useState12 = _slicedToArray(_React$useState11, 2),
571
- resizeDeltas = _React$useState12[0],
572
- setResizeDeltas = _React$useState12[1];
568
+ resizeDeltas = _React$useState10[0],
569
+ setResizeDeltas = _React$useState10[1];
573
570
 
574
571
  React.useEffect(function () {
575
572
  setMeasuredWidths(function (prev) {
@@ -584,13 +581,12 @@ export function DataTable(_ref2) {
584
581
  });
585
582
  }, [columns]);
586
583
  var resetAfterColumnIndex = React.useCallback(function (columnIndex) {
587
- if (gridRef) {
584
+ if (gridRef.current) {
588
585
  // $FlowFixMe trigger react-window to layout the elements again
589
- gridRef.resetAfterColumnIndex(columnIndex, true);
586
+ gridRef.current.resetAfterColumnIndex(columnIndex, true);
590
587
  }
591
- }, [gridRef]);
588
+ }, [gridRef.current]);
592
589
  var handleWidthsChange = React.useCallback(function (nextWidths) {
593
- console.log('next widths', nextWidths);
594
590
  setMeasuredWidths(nextWidths);
595
591
  resetAfterColumnIndex(0);
596
592
  }, [setMeasuredWidths, resetAfterColumnIndex]);
@@ -602,20 +598,20 @@ export function DataTable(_ref2) {
602
598
  resetAfterColumnIndex(columnIndex);
603
599
  }, [setResizeDeltas, resetAfterColumnIndex]);
604
600
 
605
- var _React$useState13 = React.useState(0),
601
+ var _React$useState11 = React.useState(0),
602
+ _React$useState12 = _slicedToArray(_React$useState11, 2),
603
+ scrollLeft = _React$useState12[0],
604
+ setScrollLeft = _React$useState12[1];
605
+
606
+ var _React$useState13 = React.useState(false),
606
607
  _React$useState14 = _slicedToArray(_React$useState13, 2),
607
- scrollLeft = _React$useState14[0],
608
- setScrollLeft = _React$useState14[1];
608
+ isScrollingX = _React$useState14[0],
609
+ setIsScrollingX = _React$useState14[1];
609
610
 
610
611
  var _React$useState15 = React.useState(false),
611
612
  _React$useState16 = _slicedToArray(_React$useState15, 2),
612
- isScrollingX = _React$useState16[0],
613
- setIsScrollingX = _React$useState16[1];
614
-
615
- var _React$useState17 = React.useState(false),
616
- _React$useState18 = _slicedToArray(_React$useState17, 2),
617
- recentlyScrolledX = _React$useState18[0],
618
- setRecentlyScrolledX = _React$useState18[1];
613
+ recentlyScrolledX = _React$useState16[0],
614
+ setRecentlyScrolledX = _React$useState16[1];
619
615
 
620
616
  React.useLayoutEffect(function () {
621
617
  if (recentlyScrolledX !== isScrollingX) {
@@ -737,18 +733,19 @@ export function DataTable(_ref2) {
737
733
  return result;
738
734
  }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
739
735
 
740
- var _React$useState19 = React.useState(0),
741
- _React$useState20 = _slicedToArray(_React$useState19, 2),
742
- browserScrollbarWidth = _React$useState20[0],
743
- setBrowserScrollbarWidth = _React$useState20[1];
736
+ var _React$useState17 = React.useState(0),
737
+ _React$useState18 = _slicedToArray(_React$useState17, 2),
738
+ browserScrollbarWidth = _React$useState18[0],
739
+ setBrowserScrollbarWidth = _React$useState18[1];
744
740
 
745
741
  var normalizedWidths = React.useMemo(function () {
746
742
  var resizedWidths = measuredWidths.map(function (w, i) {
747
743
  return Math.floor(w) + Math.floor(resizeDeltas[i]);
748
744
  });
749
745
 
750
- if (gridRef) {
751
- var gridProps = gridRef.props;
746
+ if (gridRef.current) {
747
+ // $FlowFixMe
748
+ var gridProps = gridRef.current.props;
752
749
  var isContentTallerThanContainer = false;
753
750
  var visibleRowHeight = 0;
754
751
 
@@ -785,7 +782,8 @@ export function DataTable(_ref2) {
785
782
  }
786
783
 
787
784
  return resizedWidths;
788
- }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
785
+ }, [// gridRef,
786
+ measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
789
787
  var isSelectable = batchActions ? !!batchActions.length : false;
790
788
  var isSelectedAll = React.useMemo(function () {
791
789
  if (!selectedRowIds) {
@@ -829,23 +827,23 @@ export function DataTable(_ref2) {
829
827
  }
830
828
  }, [onSort]);
831
829
 
830
+ var _React$useState19 = React.useState(-1),
831
+ _React$useState20 = _slicedToArray(_React$useState19, 2),
832
+ columnHighlightIndex = _React$useState20[0],
833
+ setColumnHighlightIndex = _React$useState20[1];
834
+
832
835
  var _React$useState21 = React.useState(-1),
833
836
  _React$useState22 = _slicedToArray(_React$useState21, 2),
834
- columnHighlightIndex = _React$useState22[0],
835
- setColumnHighlightIndex = _React$useState22[1];
836
-
837
- var _React$useState23 = React.useState(-1),
838
- _React$useState24 = _slicedToArray(_React$useState23, 2),
839
- rowHighlightIndex = _React$useState24[0],
840
- setRowHighlightIndex = _React$useState24[1];
837
+ rowHighlightIndex = _React$useState22[0],
838
+ setRowHighlightIndex = _React$useState22[1];
841
839
 
842
840
  function handleRowHighlightIndexChange(nextIndex) {
843
841
  setRowHighlightIndex(nextIndex);
844
842
 
845
- if (gridRef) {
843
+ if (gridRef.current) {
846
844
  if (nextIndex >= 0) {
847
845
  // $FlowFixMe - unable to get react-window types
848
- gridRef.scrollToItem({
846
+ gridRef.current.scrollToItem({
849
847
  rowIndex: nextIndex
850
848
  });
851
849
  }
@@ -936,7 +934,7 @@ export function DataTable(_ref2) {
936
934
  }
937
935
  }, /*#__PURE__*/React.createElement(VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
938
936
  , {
939
- ref: setGridRef,
937
+ ref: gridRef,
940
938
  overscanRowCount: 10,
941
939
  overscanColumnCount: 5,
942
940
  innerElementType: InnerTableElement,
package/esm/data-table/measure-column-widths.js CHANGED
@@ -37,10 +37,7 @@ function MeasureColumn(_ref) {
37
37
  React.useEffect(function () {
38
38
  if (typeof document !== 'undefined') {
39
39
  if (ref.current) {
40
- // onLayout(columnIndex, ref.current.getBoundingClientRect());
41
- onLayout(columnIndex, {
42
- width: 0
43
- });
40
+ onLayout(columnIndex, ref.current.getBoundingClientRect());
44
41
  }
45
42
  }
46
43
  }, []);
@@ -131,9 +128,7 @@ export default function MeasureColumnWidths(_ref2) {
131
128
  return generateSampleIndices(0, rows.length - 1, sampleSize);
132
129
  }, [columns, rows, widths, sampleSize]);
133
130
  var handleDimensionsChange = React.useCallback(function (columnIndex, dimensions) {
134
- console.log('handle dimensions change', columnIndex, dimensions);
135
131
  var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
136
- console.log('next width', columnIndex, nextWidth);
137
132
 
138
133
  if (nextWidth !== widthMap.get(columnIndex)) {
139
134
  widthMap.set(columnIndex, nextWidth);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baseui",
3
- "version": "0.0.0-alpha-d3f908b",
3
+ "version": "0.0.0-alpha-80026d1",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",