baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/esm/combobox/combobox.js

@@ -41,6 +41,8 @@ var ARROW_DOWN = 40; // aria 1.1 spec: https://www.w3.org/TR/wai-aria-practices/
 function Combobox(props) {
   var _props$autocomplete = props.autocomplete,
       autocomplete = _props$autocomplete === void 0 ? true : _props$autocomplete,
+      _props$clearable = props.clearable,
+      clearable = _props$clearable === void 0 ? false : _props$clearable,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       _props$error = props.error,
@@ -80,7 +82,8 @@ function Combobox(props) {
       setIsOpen = _React$useState6[1];
 
   var rootRef = React.useRef(null);
-  var inputRef = React.useRef(null);
+  var defaultInputRef = React.useRef(null);
+  var inputRef = forwardInputRef || defaultInputRef;
   var listboxRef = React.useRef(null);
   var selectedOptionRef = React.useRef(null);
   var seed = useUIDSeed();
@@ -118,6 +121,7 @@ function Combobox(props) {
   }, [isOpen, selectedOptionRef.current, listboxRef.current]);
   var listboxWidth = React.useMemo(function () {
     if (rootRef.current) {
+      // @ts-ignore
       return "".concat(rootRef.current.clientWidth, "px");
     }
 
@@ -128,7 +132,8 @@ function Combobox(props) {
     if (!disabled) {
       setIsOpen(true);
     }
-  }
+  } // @ts-ignore
+
 
   function handleKeyDown(event) {
     if (event.keyCode === ARROW_DOWN) {
@@ -187,7 +192,8 @@ function Combobox(props) {
       setSelectionIndex(-1);
       setTempValue(value);
     }
-  }
+  } // @ts-ignore
+
 
   function handleFocus(event) {
     if (!isOpen && options.length) {
@@ -195,13 +201,15 @@ function Combobox(props) {
     }
 
     if (onFocus) onFocus(event);
-  }
+  } // @ts-ignore
+
 
   function handleBlur(event) {
     if (listboxRef.current && event.relatedTarget && // NOTE(chase): Contains method expects a Node type, but relatedTarget is
     // EventTarget which is a super type of Node. Passing an EventTarget seems
     // to work fine, assuming the flow type is too strict.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // @ts-ignore
     listboxRef.current.contains(event.relatedTarget)) {
       return;
     }
@@ -212,35 +220,25 @@ function Combobox(props) {
     if (onBlur) onBlur(event);
   }
 
-  function handleInputClick() {
+  function handleInputClick(event) {
     if (inputRef.current) {
+      // @ts-ignore
       inputRef.current.focus();
     }
 
     if (!isOpen && options.length) {
       handleOpen();
     }
-  }
+  } // @ts-ignore
+
 
   function handleInputChange(event) {
     handleOpen();
     setSelectionIndex(-1);
     onChange(event.target.value, null);
     setTempValue(event.target.value);
-  }
+  } // @ts-ignore
 
-  function handleInputRef(input) {
-    inputRef.current = input;
-
-    if (forwardInputRef) {
-      if (typeof forwardInputRef === 'function') {
-        forwardInputRef(input);
-      } else {
-        // @ts-expect-error todo(flow->ts)
-        forwardInputRef.current = input;
-      }
-    }
-  }
 
   function handleOptionClick(index) {
     var clickedOption = options[index];
@@ -253,6 +251,7 @@ function Combobox(props) {
       setTempValue(stringified);
 
       if (inputRef.current) {
+        // @ts-ignore
         inputRef.current.focus();
       }
     }
@@ -353,9 +352,10 @@ function Combobox(props) {
       ,
       role: "combobox"
     }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
-      inputRef: handleInputRef,
+      inputRef: inputRef,
       "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
       "aria-autocomplete": "list",
+      clearable: clearable,
       disabled: disabled,
       error: error,
       name: name,

package/esm/combobox/styled-components.js

@@ -35,7 +35,9 @@ export var StyledListBox = styled('ul', function (_ref) {
 StyledListBox.displayName = "StyledListBox";
 StyledListBox.displayName = 'StyledListBox';
 
-function buildStylesForSize(size, theme) {
+function buildStylesForSize( // @ts-ignore
+size, // @ts-ignore
+theme) {
   var paddingDir = theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
 
   switch (size) {

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

@@ -25,9 +25,11 @@ import Column from './column';
 import { COLUMNS } from './constants';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 function AnchorFilter(props) {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for anchor column");
-}
+} // @ts-ignore
+
 
 function AnchorCell(props) {
   var _useStyletron = useStyletron(),

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

@@ -29,7 +29,8 @@ function mapSelection(selection, transform) {
     return coercedSelection.add(transform(item));
   });
   return coercedSelection;
-}
+} // @ts-ignore
+
 
 function BooleanFilter(props) {
   var locale = React.useContext(LocaleContext);
@@ -59,7 +60,8 @@ function BooleanFilter(props) {
       });
     }
   });
-}
+} // @ts-ignore
+
 
 function BooleanCell(props) {
   var _useStyletron = useStyletron(),

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

@@ -76,11 +76,13 @@ var StyledHighlightLabel = withStyle(StyledLabel, function (props) {
   };
 
   if (!props.$isFirst) {
+    // @ts-ignore
     style.paddingLeft = null;
   }
 
   return style;
-});
+}); // @ts-ignore
+
 StyledHighlightLabel.displayName = "StyledHighlightLabel";
 
 function HighlightCheckboxLabel(props) {
@@ -158,6 +160,7 @@ export function CategoricalFilter(props) {
       props.close();
     }
   }, showQuery && /*#__PURE__*/React.createElement(Input, {
+    "aria-label": locale.datatable.categoricalFilterSearchLabel,
     size: INPUT_SIZE.compact,
     overrides: {
       Before: InputBefore
@@ -169,6 +172,7 @@ export function CategoricalFilter(props) {
     clearable: true
   }), !query && /*#__PURE__*/React.createElement("div", {
     style: {
+      // @ts-ignore
       marginTop: showQuery ? theme.sizing.scale600 : null
     }
   }, /*#__PURE__*/React.createElement(FilterQuickControls, {
@@ -203,7 +207,7 @@ export function CategoricalFilter(props) {
         setSelection(new Set(selection));
       },
       overrides: {
-        // @ts-expect-error
+        // @ts-ignore
         Label: {
           component: HighlightCheckboxLabel,
           props: {
@@ -213,7 +217,7 @@ export function CategoricalFilter(props) {
       }
     }, category));
   })));
-}
+} // @ts-ignore
 
 function CategoricalCell(props) {
   var _useStyletron5 = useStyletron(),

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

@@ -58,7 +58,7 @@ import { LocaleContext } from '../locale'; // eslint-disable-next-line @typescri
 var DATE_FORMAT = 'MM-dd-yyyy';
 var MASK = '99-99-9999 - 99-99-9999';
 var TIME_FORMAT = 'HH:mm ss:SS';
-var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT);
+var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT); // @ts-ignore
 
 function sortDates(a, b) {
   return a - b;
@@ -92,7 +92,7 @@ var CATEGORICAL_OPERATIONS = [{
 }];
 var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
 var MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-var QUARTERS = [0, 1, 2, 3];
+var QUARTERS = [0, 1, 2, 3]; // @ts-ignore
 
 function Checks(props) {
   var _useStyletron = useStyletron(),
@@ -116,12 +116,14 @@ function Checks(props) {
       checked: checked,
       onChange: function onChange() {
         if (checked) {
+          // @ts-ignore
           props.setValue(function (prev) {
             return prev.filter(function (i) {
               return i !== item.id;
             });
           });
         } else {
+          // @ts-ignore
           props.setValue(function (prev) {
             return [].concat(_toConsumableArray(prev), [item.id]);
           });
@@ -129,7 +131,8 @@ function Checks(props) {
       }
     }, item.label));
   }));
-}
+} // @ts-ignore
+
 
 function filterParamsToInitialState(input) {
   var output = {
@@ -137,11 +140,17 @@ function filterParamsToInitialState(input) {
     comparatorIndex: 0,
     rangeOperator: RANGE_OPERATIONS[0],
     categoricalOperator: CATEGORICAL_OPERATIONS[0],
+    // @ts-ignore
     rangeDates: [],
+    // @ts-ignore
     years: [],
+    // @ts-ignore
     halves: [],
+    // @ts-ignore
     quarters: [],
+    // @ts-ignore
     months: [],
+    // @ts-ignore
     weekdays: []
   };
 
@@ -186,7 +195,8 @@ function filterParamsToInitialState(input) {
   }
 
   return output;
-}
+} // @ts-ignore
+
 
 function DatetimeFilter(props) {
   var _useStyletron3 = useStyletron(),
@@ -201,8 +211,10 @@ function DatetimeFilter(props) {
     return props.data.sort(sortDates);
   }, [props.data]);
   var presentYears = React.useMemo(function () {
-    var dict = {};
+    var dict = {}; // @ts-ignore
+
     props.data.forEach(function (date) {
+      // @ts-ignore
       dict[getYear(date)] = true;
     });
     return Object.keys(dict).map(function (n) {
@@ -346,6 +358,7 @@ function DatetimeFilter(props) {
         }
 
         if (operatorLocaleLabelKey) {
+          // @ts-ignore
           _description = "".concat(locale.datatable[operatorLocaleLabelKey], " - ").concat(_description);
         }
 
@@ -406,6 +419,7 @@ function DatetimeFilter(props) {
     mountNode: mountNode.current,
     options: RANGE_OPERATIONS.map(function (op) {
       return {
+        // @ts-ignore
         label: locale.datatable[op.localeLabelKey],
         id: op.id
       };
@@ -485,6 +499,7 @@ function DatetimeFilter(props) {
     },
     options: CATEGORICAL_OPERATIONS.map(function (op) {
       return {
+        // @ts-ignore
         label: locale.datatable[op.localeLabelKey],
         id: op.id
       };
@@ -546,7 +561,8 @@ function DatetimeFilter(props) {
       };
     })
   })))));
-}
+} // @ts-ignore
+
 
 function DatetimeCell(props) {
   var _useStyletron5 = useStyletron(),

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

@@ -32,14 +32,16 @@ import { useStyletron } from '../styles';
 import Column from './column';
 import { COLUMNS, NUMERICAL_FORMATS, MAX_BIN_COUNT, HISTOGRAM_SIZE } from './constants';
 import FilterShell from './filter-shell';
-import { LocaleContext } from '../locale';
+import { LocaleContext } from '../locale'; // @ts-ignore
+
 import { bin, max as maxFunc, extent, scaleLinear, median, bisector } from 'd3';
 import { Slider } from '../slider';
 
 function roundToFixed(value, precision) {
   var k = Math.pow(10, precision);
   return Math.round(value * k) / k;
-}
+} // @ts-ignore
+
 
 function format(value, options) {
   if (typeof options.format === 'function') {
@@ -75,11 +77,13 @@ function format(value, options) {
   }
 
   return formatted;
-}
+} // @ts-ignore
+
 
 function validateInput(input) {
   return Boolean(parseFloat(input)) || input === '' || input === '-';
-}
+} // @ts-ignore
+
 
 var bisect = bisector(function (d) {
   return d.x0;
@@ -101,7 +105,8 @@ var Histogram = /*#__PURE__*/React.memo(function Histogram(_ref) {
   var _React$useMemo = React.useMemo(function () {
     var bins = bin().thresholds(Math.min(data.length, MAX_BIN_COUNT))(data);
     var xScale = scaleLinear().domain([bins[0].x0, bins[bins.length - 1].x1]).range([0, HISTOGRAM_SIZE.width]).clamp(true);
-    var yScale = scaleLinear().domain([0, maxFunc(bins, function (d) {
+    var yScale = scaleLinear() // @ts-ignore
+    .domain([0, maxFunc(bins, function (d) {
       return d.length;
     })]).nice().range([HISTOGRAM_SIZE.height, 0]);
     return {
@@ -160,7 +165,7 @@ var Histogram = /*#__PURE__*/React.memo(function Histogram(_ref) {
       height: height
     });
   })));
-});
+}); // @ts-ignore
 
 function NumericalFilter(props) {
   var _useStyletron3 = useStyletron(),
@@ -497,7 +502,8 @@ function NumericalFilter(props) {
       return setFocus(false);
     }
   })));
-}
+} // @ts-ignore
+
 
 function NumericalCell(props) {
   var _useStyletron5 = useStyletron(),
@@ -509,6 +515,7 @@ function NumericalCell(props) {
     className: css(_objectSpread(_objectSpread({}, theme.typography.MonoParagraphXSmall), {}, {
       display: 'flex',
       justifyContent: theme.direction !== 'rtl' ? 'flex-end' : 'flex-start',
+      // @ts-ignore
       color: props.highlight(props.value) ? theme.colors.contentNegative : null,
       width: '100%'
     }))

package/esm/data-table/column-row-index.js

@@ -23,7 +23,8 @@ import { COLUMNS } from './constants';
 
 function RowIndexFilter() {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for row index column");
-}
+} // @ts-ignore
+
 
 function RowIndexCell(props) {
   var _useStyletron = useStyletron(),

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

@@ -25,9 +25,11 @@ import { COLUMNS } from './constants';
 import { HighlightCellText } from './text-search';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 function StringFilter(props) {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for string column");
-}
+} // @ts-ignore
+
 
 function StringCell(props) {
   var _useStyletron = useStyletron(),

package/esm/data-table/column.js

@@ -65,12 +65,14 @@ function Column(options) {
         className: css(_objectSpread(_objectSpread({}, theme.typography.font100), {}, {
           boxSizing: 'border-box',
           color: theme.colors.contentPrimary,
+          // @ts-ignore
           display: props.isMeasured ? 'inline-block' : null,
           height: '100%',
           paddingTop: theme.sizing.scale300,
           paddingLeft: theme.sizing.scale500,
           paddingBottom: theme.sizing.scale300,
           paddingRight: theme.sizing.scale500,
+          // @ts-ignore
           width: props.isMeasured ? null : '100%'
         }))
       }, /*#__PURE__*/React.createElement("div", {

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

@@ -31,7 +31,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { VariableSizeGrid } from 'react-window';
+import { VariableSizeGrid } from 'react-window'; // @ts-ignore
+
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { Button, SHAPE as BUTTON_SHAPES, SIZE as BUTTON_SIZES, KIND as BUTTON_KINDS } from '../button';
 import { useStyletron } from '../styles';
@@ -43,6 +44,7 @@ import { LocaleContext } from '../locale'; // consider pulling this out to a pro
 
 var HEADER_ROW_HEIGHT = 48;
 
+// @ts-ignore
 var sum = function sum(ns) {
   return ns.reduce(function (s, n) {
     return s + n;
@@ -82,6 +84,7 @@ function CellPlacement(_ref) {
       borderBottom: 'none',
       borderLeft: 'none',
       // do not render a border on cells in the right-most column
+      // @ts-ignore
       borderRight: columnIndex === data.columns.length - 1 ? 'none' : null,
       boxSizing: 'border-box'
     })),
@@ -99,7 +102,8 @@ function CellPlacement(_ref) {
     x: columnIndex,
     y: rowIndex - 1
   }));
-}
+} // @ts-ignore
+
 
 function compareCellPlacement(prevProps, nextProps) {
   // header cells are not rendered through this component
@@ -158,6 +162,7 @@ var HeaderContext = /*#__PURE__*/React.createContext({
   rows: [],
   scrollLeft: 0,
   sortIndex: -1,
+  // @ts-ignore
   sortDirection: null,
   tableHeight: 0,
   widths: []
@@ -184,7 +189,7 @@ function Header(props) {
   var headerCellRef = React.useRef(null);
   var RULER_OFFSET = 2;
   var isResizingThisColumn = props.resizeIndex === props.index;
-  var isResizing = props.resizeIndex >= 0;
+  var isResizing = props.resizeIndex >= 0; // @ts-ignore
 
   function getPositionX(el) {
     if (typeof document !== 'undefined') {
@@ -267,7 +272,8 @@ function Header(props) {
     },
     onSelectAll: props.onSelectMany,
     onSelectNone: props.onSelectNone,
-    onSort: props.onSort,
+    onSort: props.onSort // @ts-ignore
+    ,
     sortDirection: props.sortIndex === props.index ? props.sortDirection : null,
     title: props.columnTitle
   }), props.resizableColumnWidths && /*#__PURE__*/React.createElement("div", {
@@ -285,6 +291,7 @@ function Header(props) {
       setEndResizePos(x);
     },
     className: css({
+      // @ts-ignore
       backgroundColor: isResizingThisColumn ? theme.colors.contentPrimary : null,
       cursor: 'ew-resize',
       position: 'absolute',
@@ -358,6 +365,7 @@ function Headers() {
         backgroundColor: theme.colors.backgroundPrimary,
         borderTop: 'none',
         borderLeft: 'none',
+        // @ts-ignore
         borderRight: columnIndex === ctx.columns.length - 1 ? 'none' : null,
         boxSizing: 'border-box',
         display: 'flex'
@@ -391,7 +399,8 @@ function Headers() {
       tableHeight: ctx.tableHeight
     }))));
   }));
-}
+} // @ts-ignore
+
 
 function LoadingOrEmptyMessage(props) {
   var _useStyletron7 = useStyletron(),
@@ -485,7 +494,7 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }));
   })));
 });
-InnerTableElement.displayName = 'InnerTableElement';
+InnerTableElement.displayName = 'InnerTableElement'; // @ts-ignore
 
 function MeasureScrollbarWidth(props) {
   var _useStyletron11 = useStyletron(),
@@ -505,7 +514,8 @@ function MeasureScrollbarWidth(props) {
       height: 0,
       visibility: 'hidden',
       overflow: 'scroll'
-    }),
+    }) // @ts-ignore
+    ,
     ref: outerRef
   }, /*#__PURE__*/React.createElement("div", {
     ref: innerRef
@@ -645,7 +655,7 @@ export function DataTable(_ref2) {
     var index = sortIndex;
 
     if (index !== null && index !== undefined && index !== -1 && columns[index]) {
-      var sortFn = columns[index].sortFn;
+      var sortFn = columns[index].sortFn; // @ts-ignore
 
       var getValue = function getValue(row) {
         return columns[index].mapDataToValue(row.data);
@@ -669,7 +679,8 @@ export function DataTable(_ref2) {
   var filteredIndices = React.useMemo(function () {
     var set = new Set(allRows.map(function (_, idx) {
       return idx;
-    }));
+    })); // @ts-ignore
+
     Array.from(filters || new Set(), function (f) {
       return f;
     }).forEach(function (_ref3) {
@@ -695,15 +706,18 @@ export function DataTable(_ref2) {
     });
 
     if (textQuery) {
+      // @ts-ignore
       var stringishColumnIndices = [];
 
       for (var i = 0; i < columns.length; i++) {
         if (columns[i].textQueryFilter) {
+          // @ts-ignore
           stringishColumnIndices.push(i);
         }
       }
 
       Array.from(set).forEach(function (idx) {
+        // @ts-ignore
         var matches = stringishColumnIndices.some(function (cdx) {
           var column = columns[cdx];
           var textQueryFilter = column.textQueryFilter;
@@ -772,11 +786,14 @@ export function DataTable(_ref2) {
 
         for (var i = 0; i < resizedWidths.length - 1; i++) {
           if (columns[i] && columns[i].fillWidth) {
+            // @ts-ignore
             result.push(resizedWidths[i] + padding);
           } else {
+            // @ts-ignore
             result.push(resizedWidths[i]);
           }
-        }
+        } // @ts-ignore
+
 
         result.push(gridProps.width - sum(result) - scrollbarWidth);
         return result;
@@ -847,7 +864,8 @@ export function DataTable(_ref2) {
   var _React$useState23 = React.useState(-1),
       _React$useState24 = _slicedToArray(_React$useState23, 2),
       rowHighlightIndex = _React$useState24[0],
-      setRowHighlightIndex = _React$useState24[1];
+      setRowHighlightIndex = _React$useState24[1]; // @ts-ignore
+
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
@@ -871,7 +889,7 @@ export function DataTable(_ref2) {
     if (nextIndex !== rowHighlightIndex) {
       handleRowHighlightIndexChange(nextIndex);
     }
-  }, [rowHighlightIndex]);
+  }, [rowHighlightIndex]); // @ts-ignore
 
   function handleColumnHeaderMouseEnter(columnIndex) {
     setColumnHighlightIndex(columnIndex);
@@ -906,7 +924,8 @@ export function DataTable(_ref2) {
     widths: measuredWidths,
     isSelectable: isSelectable,
     onWidthsChange: handleWidthsChange
-  }), /*#__PURE__*/React.createElement(MeasureScrollbarWidth, {
+  }), /*#__PURE__*/React.createElement(MeasureScrollbarWidth // @ts-ignore
+  , {
     onWidthChange: function onWidthChange(w) {
       return setBrowserScrollbarWidth(w);
     }
@@ -938,6 +957,7 @@ export function DataTable(_ref2) {
         rowHighlightIndex: rowHighlightIndex,
         rows: rows,
         scrollLeft: scrollLeft,
+        // @ts-ignore
         sortDirection: sortDirection || null,
         sortIndex: typeof sortIndex === 'number' ? sortIndex : -1,
         tableHeight: height,