baseui 0.0.0-alpha-c54ce6f → 0.0.0-alpha-80026d1

package/data-table/data-table.js

@@ -568,27 +568,24 @@ function DataTable(_ref2) {
     }
 
     return rowHeight;
-  }, [rowHeight]); // We use state for our ref, to allow hooks to  update when the ref changes.
-  // eslint-disable-next-line flowtype/no-weak-types
+  }, [rowHeight]);
+  var gridRef = React.useRef(null); // // We use state for our ref, to allow hooks to  update when the ref changes.
+  // // eslint-disable-next-line flowtype/no-weak-types
+  // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
 
-  var _React$useState7 = React.useState(null),
+  var _React$useState7 = React.useState(columns.map(function () {
+    return 0;
+  })),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      gridRef = _React$useState8[0],
-      setGridRef = _React$useState8[1];
+      measuredWidths = _React$useState8[0],
+      setMeasuredWidths = _React$useState8[1];
 
   var _React$useState9 = React.useState(columns.map(function () {
     return 0;
   })),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      measuredWidths = _React$useState10[0],
-      setMeasuredWidths = _React$useState10[1];
-
-  var _React$useState11 = React.useState(columns.map(function () {
-    return 0;
-  })),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      resizeDeltas = _React$useState12[0],
-      setResizeDeltas = _React$useState12[1];
+      resizeDeltas = _React$useState10[0],
+      setResizeDeltas = _React$useState10[1];
 
   React.useEffect(function () {
     setMeasuredWidths(function (prev) {
@@ -603,11 +600,11 @@ function DataTable(_ref2) {
     });
   }, [columns]);
   var resetAfterColumnIndex = React.useCallback(function (columnIndex) {
-    if (gridRef) {
+    if (gridRef.current) {
       // $FlowFixMe trigger react-window to layout the elements again
-      gridRef.resetAfterColumnIndex(columnIndex, true);
+      gridRef.current.resetAfterColumnIndex(columnIndex, true);
     }
-  }, [gridRef]);
+  }, [gridRef.current]);
   var handleWidthsChange = React.useCallback(function (nextWidths) {
     setMeasuredWidths(nextWidths);
     resetAfterColumnIndex(0);
@@ -620,20 +617,20 @@ function DataTable(_ref2) {
     resetAfterColumnIndex(columnIndex);
   }, [setResizeDeltas, resetAfterColumnIndex]);
 
-  var _React$useState13 = React.useState(0),
+  var _React$useState11 = React.useState(0),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      scrollLeft = _React$useState12[0],
+      setScrollLeft = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      scrollLeft = _React$useState14[0],
-      setScrollLeft = _React$useState14[1];
+      isScrollingX = _React$useState14[0],
+      setIsScrollingX = _React$useState14[1];
 
   var _React$useState15 = React.useState(false),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      isScrollingX = _React$useState16[0],
-      setIsScrollingX = _React$useState16[1];
-
-  var _React$useState17 = React.useState(false),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      recentlyScrolledX = _React$useState18[0],
-      setRecentlyScrolledX = _React$useState18[1];
+      recentlyScrolledX = _React$useState16[0],
+      setRecentlyScrolledX = _React$useState16[1];
 
   React.useLayoutEffect(function () {
     if (recentlyScrolledX !== isScrollingX) {
@@ -755,18 +752,19 @@ function DataTable(_ref2) {
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
 
-  var _React$useState19 = React.useState(0),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      browserScrollbarWidth = _React$useState20[0],
-      setBrowserScrollbarWidth = _React$useState20[1];
+  var _React$useState17 = React.useState(0),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      browserScrollbarWidth = _React$useState18[0],
+      setBrowserScrollbarWidth = _React$useState18[1];
 
   var normalizedWidths = React.useMemo(function () {
     var resizedWidths = measuredWidths.map(function (w, i) {
       return Math.floor(w) + Math.floor(resizeDeltas[i]);
     });
 
-    if (gridRef) {
-      var gridProps = gridRef.props;
+    if (gridRef.current) {
+      // $FlowFixMe
+      var gridProps = gridRef.current.props;
       var isContentTallerThanContainer = false;
       var visibleRowHeight = 0;
 
@@ -803,7 +801,8 @@ function DataTable(_ref2) {
     }
 
     return resizedWidths;
-  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [// gridRef,
+  measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   var isSelectable = batchActions ? !!batchActions.length : false;
   var isSelectedAll = React.useMemo(function () {
     if (!selectedRowIds) {
@@ -847,23 +846,23 @@ function DataTable(_ref2) {
     }
   }, [onSort]);
 
+  var _React$useState19 = React.useState(-1),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      columnHighlightIndex = _React$useState20[0],
+      setColumnHighlightIndex = _React$useState20[1];
+
   var _React$useState21 = React.useState(-1),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      columnHighlightIndex = _React$useState22[0],
-      setColumnHighlightIndex = _React$useState22[1];
-
-  var _React$useState23 = React.useState(-1),
-      _React$useState24 = _slicedToArray(_React$useState23, 2),
-      rowHighlightIndex = _React$useState24[0],
-      setRowHighlightIndex = _React$useState24[1];
+      rowHighlightIndex = _React$useState22[0],
+      setRowHighlightIndex = _React$useState22[1];
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
 
-    if (gridRef) {
+    if (gridRef.current) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.scrollToItem({
+        gridRef.current.scrollToItem({
           rowIndex: nextIndex
         });
       }
@@ -954,7 +953,7 @@ function DataTable(_ref2) {
       }
     }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
     , {
-      ref: setGridRef,
+      ref: gridRef,
       overscanRowCount: 10,
       overscanColumnCount: 5,
       innerElementType: InnerTableElement,

package/data-table/data-table.js.flow

@@ -699,9 +699,12 @@ export function DataTable({
     [rowHeight],
   );
 
-  // We use state for our ref, to allow hooks to  update when the ref changes.
-  // eslint-disable-next-line flowtype/no-weak-types
-  const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
+  const gridRef = React.useRef<typeof VariableSizeGrid | null>(null);
+
+  // // We use state for our ref, to allow hooks to  update when the ref changes.
+  // // eslint-disable-next-line flowtype/no-weak-types
+  // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
+
   const [measuredWidths, setMeasuredWidths] = React.useState(
     columns.map(() => 0),
   );
@@ -717,12 +720,12 @@ export function DataTable({
 
   const resetAfterColumnIndex = React.useCallback(
     columnIndex => {
-      if (gridRef) {
+      if (gridRef.current) {
         // $FlowFixMe trigger react-window to layout the elements again
-        gridRef.resetAfterColumnIndex(columnIndex, true);
+        gridRef.current.resetAfterColumnIndex(columnIndex, true);
       }
     },
-    [gridRef],
+    [gridRef.current],
   );
   const handleWidthsChange = React.useCallback(
     nextWidths => {
@@ -851,8 +854,9 @@ export function DataTable({
     const resizedWidths = measuredWidths.map(
       (w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]),
     );
-    if (gridRef) {
-      const gridProps = gridRef.props;
+    if (gridRef.current) {
+      // $FlowFixMe
+      const gridProps = gridRef.current.props;
 
       let isContentTallerThanContainer = false;
       let visibleRowHeight = 0;
@@ -889,7 +893,7 @@ export function DataTable({
     }
     return resizedWidths;
   }, [
-    gridRef,
+    // gridRef,
     measuredWidths,
     resizeDeltas,
     browserScrollbarWidth,
@@ -952,10 +956,10 @@ export function DataTable({
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
-    if (gridRef) {
+    if (gridRef.current) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.scrollToItem({rowIndex: nextIndex});
+        gridRef.current.scrollToItem({rowIndex: nextIndex});
       }
       if (onRowHighlightChange) {
         onRowHighlightChange(nextIndex, rows[nextIndex - 1]);
@@ -1055,7 +1059,7 @@ export function DataTable({
           >
             <VariableSizeGrid
               // eslint-disable-next-line flowtype/no-weak-types
-              ref={(setGridRef: any)}
+              ref={(gridRef: any)}
               overscanRowCount={10}
               overscanColumnCount={5}
               innerElementType={InnerTableElement}

package/data-table/measure-column-widths.js

@@ -44,8 +44,7 @@ function MeasureColumn(_ref) {
       _useStyletron2 = _slicedToArray(_useStyletron, 1),
       css = _useStyletron2[0];
 
-  var ref = (0, React.useRef)();
-  console.log('measure column', columnIndex);
+  var ref = React.useRef();
   React.useEffect(function () {
     if (typeof document !== 'undefined') {
       if (ref.current) {
@@ -140,7 +139,6 @@ function MeasureColumnWidths(_ref2) {
     return generateSampleIndices(0, rows.length - 1, sampleSize);
   }, [columns, rows, widths, sampleSize]);
   var handleDimensionsChange = React.useCallback(function (columnIndex, dimensions) {
-    console.log('handle dimensions change', columnIndex, dimensions);
     var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
 
     if (nextWidth !== widthMap.get(columnIndex)) {

package/data-table/measure-column-widths.js.flow

@@ -25,10 +25,7 @@ function MeasureColumn({
 }) {
   const [css] = useStyletron();
 
-  const ref = useRef();
-
-  console.log('measure column', columnIndex);
-
+  const ref = React.useRef();
   React.useEffect(() => {
     if (__BROWSER__) {
       if (ref.current) {
@@ -136,7 +133,6 @@ export default function MeasureColumnWidths({
 
   const handleDimensionsChange = React.useCallback(
     (columnIndex, dimensions) => {
-      console.log('handle dimensions change', columnIndex, dimensions);
       const nextWidth = Math.min(
         Math.max(
           columns[columnIndex].minWidth || 0,
@@ -149,6 +145,7 @@ export default function MeasureColumnWidths({
       if (nextWidth !== widthMap.get(columnIndex)) {
         widthMap.set(columnIndex, nextWidth);
       }
+
       if (
         // Refresh at 100% of done
         widthMap.size === columns.length ||

package/es/data-table/data-table.js

@@ -469,10 +469,11 @@ export function DataTable({
     }
 
     return rowHeight;
-  }, [rowHeight]); // We use state for our ref, to allow hooks to  update when the ref changes.
-  // eslint-disable-next-line flowtype/no-weak-types
+  }, [rowHeight]);
+  const gridRef = React.useRef(null); // // We use state for our ref, to allow hooks to  update when the ref changes.
+  // // eslint-disable-next-line flowtype/no-weak-types
+  // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
 
-  const [gridRef, setGridRef] = React.useState(null);
   const [measuredWidths, setMeasuredWidths] = React.useState(columns.map(() => 0));
   const [resizeDeltas, setResizeDeltas] = React.useState(columns.map(() => 0));
   React.useEffect(() => {
@@ -484,11 +485,11 @@ export function DataTable({
     });
   }, [columns]);
   const resetAfterColumnIndex = React.useCallback(columnIndex => {
-    if (gridRef) {
+    if (gridRef.current) {
       // $FlowFixMe trigger react-window to layout the elements again
-      gridRef.resetAfterColumnIndex(columnIndex, true);
+      gridRef.current.resetAfterColumnIndex(columnIndex, true);
     }
-  }, [gridRef]);
+  }, [gridRef.current]);
   const handleWidthsChange = React.useCallback(nextWidths => {
     setMeasuredWidths(nextWidths);
     resetAfterColumnIndex(0);
@@ -600,8 +601,9 @@ export function DataTable({
   const normalizedWidths = React.useMemo(() => {
     const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));
 
-    if (gridRef) {
-      const gridProps = gridRef.props;
+    if (gridRef.current) {
+      // $FlowFixMe
+      const gridProps = gridRef.current.props;
       let isContentTallerThanContainer = false;
       let visibleRowHeight = 0;
 
@@ -636,7 +638,8 @@ export function DataTable({
     }
 
     return resizedWidths;
-  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [// gridRef,
+  measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   const isSelectable = batchActions ? !!batchActions.length : false;
   const isSelectedAll = React.useMemo(() => {
     if (!selectedRowIds) {
@@ -685,10 +688,10 @@ export function DataTable({
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
 
-    if (gridRef) {
+    if (gridRef.current) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.scrollToItem({
+        gridRef.current.scrollToItem({
           rowIndex: nextIndex
         });
       }
@@ -777,7 +780,7 @@ export function DataTable({
     }
   }, /*#__PURE__*/React.createElement(VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
   , {
-    ref: setGridRef,
+    ref: gridRef,
     overscanRowCount: 10,
     overscanColumnCount: 5,
     innerElementType: InnerTableElement,

package/es/data-table/measure-column-widths.js

@@ -18,8 +18,7 @@ function MeasureColumn({
   onLayout
 }) {
   const [css] = useStyletron();
-  const ref = useRef();
-  console.log('measure column', columnIndex);
+  const ref = React.useRef();
   React.useEffect(() => {
     if (typeof document !== 'undefined') {
       if (ref.current) {
@@ -108,7 +107,6 @@ export default function MeasureColumnWidths({
     return generateSampleIndices(0, rows.length - 1, sampleSize);
   }, [columns, rows, widths, sampleSize]);
   const handleDimensionsChange = React.useCallback((columnIndex, dimensions) => {
-    console.log('handle dimensions change', columnIndex, dimensions);
     const nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
 
     if (nextWidth !== widthMap.get(columnIndex)) {

package/esm/data-table/data-table.js

@@ -549,27 +549,24 @@ export function DataTable(_ref2) {
     }
 
     return rowHeight;
-  }, [rowHeight]); // We use state for our ref, to allow hooks to  update when the ref changes.
-  // eslint-disable-next-line flowtype/no-weak-types
+  }, [rowHeight]);
+  var gridRef = React.useRef(null); // // We use state for our ref, to allow hooks to  update when the ref changes.
+  // // eslint-disable-next-line flowtype/no-weak-types
+  // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
 
-  var _React$useState7 = React.useState(null),
+  var _React$useState7 = React.useState(columns.map(function () {
+    return 0;
+  })),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      gridRef = _React$useState8[0],
-      setGridRef = _React$useState8[1];
+      measuredWidths = _React$useState8[0],
+      setMeasuredWidths = _React$useState8[1];
 
   var _React$useState9 = React.useState(columns.map(function () {
     return 0;
   })),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      measuredWidths = _React$useState10[0],
-      setMeasuredWidths = _React$useState10[1];
-
-  var _React$useState11 = React.useState(columns.map(function () {
-    return 0;
-  })),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      resizeDeltas = _React$useState12[0],
-      setResizeDeltas = _React$useState12[1];
+      resizeDeltas = _React$useState10[0],
+      setResizeDeltas = _React$useState10[1];
 
   React.useEffect(function () {
     setMeasuredWidths(function (prev) {
@@ -584,11 +581,11 @@ export function DataTable(_ref2) {
     });
   }, [columns]);
   var resetAfterColumnIndex = React.useCallback(function (columnIndex) {
-    if (gridRef) {
+    if (gridRef.current) {
       // $FlowFixMe trigger react-window to layout the elements again
-      gridRef.resetAfterColumnIndex(columnIndex, true);
+      gridRef.current.resetAfterColumnIndex(columnIndex, true);
     }
-  }, [gridRef]);
+  }, [gridRef.current]);
   var handleWidthsChange = React.useCallback(function (nextWidths) {
     setMeasuredWidths(nextWidths);
     resetAfterColumnIndex(0);
@@ -601,20 +598,20 @@ export function DataTable(_ref2) {
     resetAfterColumnIndex(columnIndex);
   }, [setResizeDeltas, resetAfterColumnIndex]);
 
-  var _React$useState13 = React.useState(0),
+  var _React$useState11 = React.useState(0),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      scrollLeft = _React$useState12[0],
+      setScrollLeft = _React$useState12[1];
+
+  var _React$useState13 = React.useState(false),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      scrollLeft = _React$useState14[0],
-      setScrollLeft = _React$useState14[1];
+      isScrollingX = _React$useState14[0],
+      setIsScrollingX = _React$useState14[1];
 
   var _React$useState15 = React.useState(false),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      isScrollingX = _React$useState16[0],
-      setIsScrollingX = _React$useState16[1];
-
-  var _React$useState17 = React.useState(false),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      recentlyScrolledX = _React$useState18[0],
-      setRecentlyScrolledX = _React$useState18[1];
+      recentlyScrolledX = _React$useState16[0],
+      setRecentlyScrolledX = _React$useState16[1];
 
   React.useLayoutEffect(function () {
     if (recentlyScrolledX !== isScrollingX) {
@@ -736,18 +733,19 @@ export function DataTable(_ref2) {
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
 
-  var _React$useState19 = React.useState(0),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      browserScrollbarWidth = _React$useState20[0],
-      setBrowserScrollbarWidth = _React$useState20[1];
+  var _React$useState17 = React.useState(0),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      browserScrollbarWidth = _React$useState18[0],
+      setBrowserScrollbarWidth = _React$useState18[1];
 
   var normalizedWidths = React.useMemo(function () {
     var resizedWidths = measuredWidths.map(function (w, i) {
       return Math.floor(w) + Math.floor(resizeDeltas[i]);
     });
 
-    if (gridRef) {
-      var gridProps = gridRef.props;
+    if (gridRef.current) {
+      // $FlowFixMe
+      var gridProps = gridRef.current.props;
       var isContentTallerThanContainer = false;
       var visibleRowHeight = 0;
 
@@ -784,7 +782,8 @@ export function DataTable(_ref2) {
     }
 
     return resizedWidths;
-  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [// gridRef,
+  measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   var isSelectable = batchActions ? !!batchActions.length : false;
   var isSelectedAll = React.useMemo(function () {
     if (!selectedRowIds) {
@@ -828,23 +827,23 @@ export function DataTable(_ref2) {
     }
   }, [onSort]);
 
+  var _React$useState19 = React.useState(-1),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      columnHighlightIndex = _React$useState20[0],
+      setColumnHighlightIndex = _React$useState20[1];
+
   var _React$useState21 = React.useState(-1),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      columnHighlightIndex = _React$useState22[0],
-      setColumnHighlightIndex = _React$useState22[1];
-
-  var _React$useState23 = React.useState(-1),
-      _React$useState24 = _slicedToArray(_React$useState23, 2),
-      rowHighlightIndex = _React$useState24[0],
-      setRowHighlightIndex = _React$useState24[1];
+      rowHighlightIndex = _React$useState22[0],
+      setRowHighlightIndex = _React$useState22[1];
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
 
-    if (gridRef) {
+    if (gridRef.current) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.scrollToItem({
+        gridRef.current.scrollToItem({
           rowIndex: nextIndex
         });
       }
@@ -935,7 +934,7 @@ export function DataTable(_ref2) {
       }
     }, /*#__PURE__*/React.createElement(VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
     , {
-      ref: setGridRef,
+      ref: gridRef,
       overscanRowCount: 10,
       overscanColumnCount: 5,
       innerElementType: InnerTableElement,

package/esm/data-table/measure-column-widths.js

@@ -33,8 +33,7 @@ function MeasureColumn(_ref) {
       _useStyletron2 = _slicedToArray(_useStyletron, 1),
       css = _useStyletron2[0];
 
-  var ref = useRef();
-  console.log('measure column', columnIndex);
+  var ref = React.useRef();
   React.useEffect(function () {
     if (typeof document !== 'undefined') {
       if (ref.current) {
@@ -129,7 +128,6 @@ export default function MeasureColumnWidths(_ref2) {
     return generateSampleIndices(0, rows.length - 1, sampleSize);
   }, [columns, rows, widths, sampleSize]);
   var handleDimensionsChange = React.useCallback(function (columnIndex, dimensions) {
-    console.log('handle dimensions change', columnIndex, dimensions);
     var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
 
     if (nextWidth !== widthMap.get(columnIndex)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-alpha-c54ce6f",
+  "version": "0.0.0-alpha-80026d1",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",