baseui 10.9.0 → 10.9.1

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

@@ -17,8 +17,6 @@ import { LocaleContext } from '../locale/index.js'; // consider pulling this out
 
 const HEADER_ROW_HEIGHT = 48;
 
-const sum = ns => ns.reduce((s, n) => s + n, 0);
-
 function CellPlacement({
   columnIndex,
   rowIndex,
@@ -257,7 +255,7 @@ function Header(props) {
   }))));
 }
 
-function Headers() {
+function Headers(props) {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
   const ctx = React.useContext(HeaderContext);
@@ -267,7 +265,7 @@ function Headers() {
       position: 'sticky',
       top: 0,
       left: 0,
-      width: `${sum(ctx.widths)}px`,
+      width: `${ctx.widths.reduce((sum, w) => sum + w, 0)}px`,
       height: `${HEADER_ROW_HEIGHT}px`,
       display: 'flex',
       // this feels bad.. the absolutely positioned children elements
@@ -469,10 +467,8 @@ 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
-
-  const [gridRef, setGridRef] = React.useState(null);
+  }, [rowHeight]);
+  const gridRef = React.useRef(null);
   const [measuredWidths, setMeasuredWidths] = React.useState(columns.map(() => 0));
   const [resizeDeltas, setResizeDeltas] = React.useState(columns.map(() => 0));
   React.useEffect(() => {
@@ -484,11 +480,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);
@@ -598,10 +594,13 @@ export function DataTable({
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
   const [browserScrollbarWidth, setBrowserScrollbarWidth] = React.useState(0);
   const normalizedWidths = React.useMemo(() => {
+    const sum = ns => ns.reduce((s, n) => s + n, 0);
+
     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 +635,7 @@ export function DataTable({
     }
 
     return resizedWidths;
-  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   const isSelectable = batchActions ? !!batchActions.length : false;
   const isSelectedAll = React.useMemo(() => {
     if (!selectedRowIds) {
@@ -685,10 +684,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,9 +776,8 @@ 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,
     columnCount: columns.length,
     columnWidth: columnIndex => normalizedWidths[columnIndex],

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

@@ -9,26 +9,10 @@ import { Button, SIZE as BUTTON_SIZE } from '../button/index.js';
 import { Checkbox, STYLE_TYPE } from '../checkbox/index.js';
 import { useStyletron } from '../styles/index.js';
 import { LocaleContext } from '../locale/index.js';
-import { FILTER_SHELL_WIDTH } from './constants.js';
 
 function FilterShell(props) {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
-  let excludeText;
-
-  switch (props.excludeKind) {
-    case 'value':
-      excludeText = locale.datatable.filterExcludeValue;
-      break;
-
-    case 'range':
-      excludeText = locale.datatable.filterExcludeRange;
-      break;
-
-    default:
-      excludeText = locale.datatable.filterExclude;
-  }
-
   return /*#__PURE__*/React.createElement("form", {
     className: css({
       backgroundColor: theme.colors.backgroundPrimary,
@@ -36,7 +20,7 @@ function FilterShell(props) {
       paddingRight: theme.sizing.scale600,
       paddingBottom: theme.sizing.scale600,
       paddingLeft: theme.sizing.scale600,
-      width: FILTER_SHELL_WIDTH
+      width: '320px'
     }),
     onSubmit: event => {
       event.preventDefault();
@@ -44,23 +28,17 @@ function FilterShell(props) {
     }
   }, props.children, /*#__PURE__*/React.createElement("div", {
     className: css({
+      alignItems: 'center',
       display: 'flex',
-      flexDirection: 'column',
       justifyContent: 'space-between',
-      alignItems: 'flex-end',
-      marginTop: theme.sizing.scale600,
-      gap: theme.sizing.scale200
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: css({
-      alignSelf: 'flex-start'
+      marginTop: theme.sizing.scale600
     })
   }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: props.exclude,
     onChange: props.onExcludeChange,
     checkmarkType: STYLE_TYPE.toggle_round,
     labelPlacement: "right"
-  }, excludeText)), /*#__PURE__*/React.createElement(Button, {
+  }, locale.datatable.filterExclude), /*#__PURE__*/React.createElement(Button, {
     size: BUTTON_SIZE.compact,
     type: "submit"
   }, locale.datatable.filterApply)));

package/es/data-table/locale.js

@@ -6,20 +6,18 @@ LICENSE file in the root directory of this source tree.
 */
 const locale = {
   emptyState: 'No rows match the filter criteria defined. Please remove one or more filters to view more data.',
-  loadingState: 'Loading rows.',
+  loadingState: 'Loading Rows.',
   searchAriaLabel: 'Search by text',
   filterAdd: 'Add Filter',
   filterExclude: 'Exclude',
   filterApply: 'Apply',
-  filterExcludeRange: 'Exclude range',
-  filterExcludeValue: 'Exclude value',
   filterAppliedTo: 'filter applied to',
   optionsLabel: 'Select column to filter by',
   optionsSearch: 'Search for a column to filter by...',
   optionsEmpty: 'No columns available.',
   categoricalFilterSelectAll: 'Select All',
   categoricalFilterSelectClear: 'Clear',
-  categoricalFilterEmpty: 'No categories found',
+  categoricalFilterEmpty: 'No Categories Found',
   datetimeFilterRange: 'Range',
   datetimeFilterRangeDatetime: 'Date, Time',
   datetimeFilterRangeDate: 'Date',

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

@@ -7,59 +7,40 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { useStyletron } from '../styles/index.js';
 import HeaderCell from './header-cell.js';
-import { useRef } from 'react'; // Measures the column header + sampled data
 
-function MeasureColumn({
-  sampleIndexes,
-  column,
-  columnIndex,
-  rows,
-  isSelectable,
-  onLayout
-}) {
-  const [css] = useStyletron();
-  const ref = useRef();
+// https://github.com/Swizec/useDimensions
+function useDimensions() {
+  const [dimensions, setDimensions] = React.useState({});
+  const [node, setNode] = React.useState(null);
+  const ref = React.useCallback(node => {
+    setNode(node);
+  }, []);
   React.useEffect(() => {
-    if (ref.current) {
-      onLayout(columnIndex, ref.current.getBoundingClientRect());
+    if (typeof document !== 'undefined') {
+      if (node) {
+        window.requestAnimationFrame(() => {
+          setDimensions(node.getBoundingClientRect());
+        });
+      }
     }
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: css({
-      display: 'flex',
-      flexDirection: 'column',
-      width: 'fit-content'
-    })
-  }, /*#__PURE__*/React.createElement(HeaderCell, {
-    index: columnIndex,
-    isHovered: true,
-    isMeasured: true,
-    isSelectedAll: false,
-    isSelectedIndeterminate: false,
-    onMouseEnter: () => {},
-    onMouseLeave: () => {},
-    onSelectAll: () => {},
-    onSelectNone: () => {},
-    onSort: i => {},
-    sortable: column.sortable,
-    sortDirection: null,
-    title: column.title,
-    isSelectable: isSelectable
-  }), sampleIndexes.map((rowIndex, i) => {
-    const Cell = column.renderCell;
-    return /*#__PURE__*/React.createElement(Cell, {
-      key: `measure-${i}`,
-      value: column.mapDataToValue(rows[rowIndex].data),
-      isSelectable: isSelectable,
-      isMeasured: true,
-      sortable: column.sortable,
-      x: 0,
-      y: rowIndex
-    });
-  }));
+  }, [node]);
+  return [ref, dimensions];
 }
 
+function ElementMeasurer(props) {
+  const {
+    onDimensionsChange
+  } = props;
+  const [ref, dimensions] = useDimensions();
+  React.useEffect(() => {
+    onDimensionsChange(dimensions);
+  }, [dimensions, onDimensionsChange]);
+  return /*#__PURE__*/React.cloneElement(props.item, {
+    ref
+  });
+}
+
+// sample size could likely be generated based on row count, to have higher confidence
 const MAX_SAMPLE_SIZE = 50;
 
 function generateSampleIndices(inputMin, inputMax, maxSamples) {
@@ -96,35 +77,43 @@ export default function MeasureColumnWidths({
   onWidthsChange
 }) {
   const [css] = useStyletron();
-  const widthMap = React.useMemo(() => {
-    return new Map();
-  }, []);
+  const measurementCount = React.useRef(0);
+  const dimensionsCache = React.useRef(widths);
   const sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   const finishedMeasurementCount = (sampleSize + 1) * columns.length;
-  const sampleIndexes = React.useMemo(() => {
-    return generateSampleIndices(0, rows.length - 1, sampleSize);
+  const sampleRowIndicesByColumn = React.useMemo(() => {
+    measurementCount.current = 0;
+    dimensionsCache.current = widths;
+    const indices = generateSampleIndices(0, rows.length - 1, sampleSize);
+    return columns.map(() => indices);
   }, [columns, rows, widths, sampleSize]);
-  const handleDimensionsChange = React.useCallback((columnIndex, dimensions) => {
-    const nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
+  const handleDimensionsChange = React.useCallback((columnIndex, rowIndex, dimensions) => {
+    if (dimensions.width === undefined) return;
+
+    if (columns[columnIndex] === undefined || dimensionsCache.current[columnIndex] === undefined) {
+      return;
+    }
+
+    measurementCount.current += 1;
+    const nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, dimensionsCache.current[columnIndex], dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
 
-    if (nextWidth !== widthMap.get(columnIndex)) {
-      widthMap.set(columnIndex, nextWidth);
+    if (nextWidth !== dimensionsCache.current[columnIndex]) {
+      const nextWidths = [...dimensionsCache.current];
+      nextWidths[columnIndex] = nextWidth;
+      dimensionsCache.current = nextWidths;
     }
 
-    if ( // Refresh at 100% of done
-    widthMap.size === columns.length || // ...50%
-    widthMap.size === Math.floor(columns.length / 2) || // ...25%
-    widthMap.size === Math.floor(columns.length / 4)) {
-      onWidthsChange(Array.from(widthMap.values()));
+    if (measurementCount.current >= finishedMeasurementCount) {
+      onWidthsChange(dimensionsCache.current);
     }
   }, [columns, finishedMeasurementCount, onWidthsChange]);
   const hiddenStyle = css({
     position: 'absolute',
     overflow: 'hidden',
     height: 0
-  }); // Remove the measurement nodes after we are done updating our column width
+  });
 
-  if (widthMap.size === columns.length) {
+  if (measurementCount.current >= finishedMeasurementCount) {
     return null;
   }
 
@@ -135,16 +124,38 @@ export default function MeasureColumnWidths({
       className: hiddenStyle,
       "aria-hidden": true,
       role: "none"
-    }, columns.map((column, i) => {
-      return /*#__PURE__*/React.createElement(MeasureColumn, {
-        key: column.title + i,
-        column: column,
-        rows: rows,
-        isSelectable: isSelectable,
-        onLayout: handleDimensionsChange,
-        columnIndex: i,
-        sampleIndexes: sampleIndexes
-      });
-    }))
+    }, sampleRowIndicesByColumn.map((rowIndices, columnIndex) => {
+      const Cell = columns[columnIndex].renderCell;
+      return rowIndices.map(rowIndex => /*#__PURE__*/React.createElement(ElementMeasurer, {
+        key: `measure-${columnIndex}-${rowIndex}`,
+        onDimensionsChange: dimensions => handleDimensionsChange(columnIndex, rowIndex, dimensions),
+        item: /*#__PURE__*/React.createElement(Cell, {
+          value: columns[columnIndex].mapDataToValue(rows[rowIndex].data),
+          isMeasured: true,
+          onSelect: isSelectable && columnIndex === 0 ? () => {} : undefined,
+          x: columnIndex,
+          y: rowIndex
+        })
+      }));
+    }), columns.map((column, columnIndex) => /*#__PURE__*/React.createElement(ElementMeasurer, {
+      key: `measure-column-${columnIndex}`,
+      onDimensionsChange: dimensions => handleDimensionsChange(columnIndex, -1, dimensions),
+      item: /*#__PURE__*/React.createElement(HeaderCell, {
+        index: columnIndex,
+        isHovered: true,
+        isMeasured: true,
+        isSelectable: isSelectable && columnIndex === 0,
+        isSelectedAll: false,
+        isSelectedIndeterminate: false,
+        onMouseEnter: () => {},
+        onMouseLeave: () => {},
+        onSelectAll: () => {},
+        onSelectNone: () => {},
+        onSort: i => {},
+        sortable: column.sortable,
+        sortDirection: null,
+        title: column.title
+      })
+    })))
   );
 }

package/es/form-control/form-control.js

@@ -11,7 +11,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
 import { UIDConsumer } from 'react-uid';
-import { Label as StyledLabel, Caption as StyledCaption, ControlContainer as StyledControlContainer } from './styled-components.js';
+import { Label as StyledLabel, LabelEndEnhancer as StyledLabelEndEnhancer, LabelContainer as StyledLabelContainer, Caption as StyledCaption, ControlContainer as StyledControlContainer } from './styled-components.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (error && typeof error !== 'boolean') {
@@ -34,6 +34,8 @@ export default class FormControl extends React.Component {
     const {
       overrides: {
         Label: LabelOverride,
+        LabelEndEnhancer: LabelEndEnhancerOverride,
+        LabelContainer: LabelContainerOverride,
         Caption: CaptionOverride,
         ControlContainer: ControlContainerOverride
       },
@@ -43,7 +45,8 @@ export default class FormControl extends React.Component {
       error,
       positive,
       htmlFor,
-      children
+      children,
+      counter
     } = this.props;
     const onlyChildProps = React.Children.only(children).props;
     const sharedProps = {
@@ -52,6 +55,8 @@ export default class FormControl extends React.Component {
       $positive: !!positive
     };
     const Label = getOverride(LabelOverride) || StyledLabel;
+    const LabelEndEnhancer = getOverride(LabelEndEnhancerOverride) || StyledLabelEndEnhancer;
+    const LabelContainer = getOverride(LabelContainerOverride) || StyledLabelContainer;
     const Caption = getOverride(CaptionOverride) || StyledCaption;
     const ControlContainer = getOverride(ControlContainerOverride) || StyledControlContainer;
     const hint = chooseRenderedHint(caption, error, positive, sharedProps);
@@ -63,10 +68,55 @@ export default class FormControl extends React.Component {
       }
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(Label, _extends({
+    let labelEndEnhancer = this.props.labelEndEnhancer;
+
+    if (counter) {
+      // inferred values are preferred but if the user specifies the value
+      // that is then used as the default.
+      let maxLength = null;
+      let length = null;
+      let counterError = null;
+
+      if (typeof counter === 'object') {
+        length = counter.length;
+        maxLength = counter.maxLength;
+        counterError = counter.error;
+      }
+
+      maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
+
+      if (length == null && typeof onlyChildProps.value === 'string') {
+        length = onlyChildProps.value.length;
+      }
+
+      if (length == null) {
+        length = 0;
+
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(`[FromControl] \`length\` must either be explicitly set via \`counter\` object property, or \`value\` string property on the child component.`);
+        }
+      }
+
+      sharedProps.$length = length;
+
+      if (maxLength == null) {
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}`;
+      } else {
+        sharedProps.$maxLength = length;
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}/${maxLength}`;
+        if (length > maxLength && counterError == null) counterError = true;
+      }
+
+      if (counterError) {
+        sharedProps.$error = true;
+        sharedProps.$counterError = true;
+      }
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelContainer, _extends({}, sharedProps, getOverrideProps(LabelContainerOverride)), /*#__PURE__*/React.createElement(Label, _extends({
       "data-baseweb": "form-control-label",
       htmlFor: htmlFor || onlyChildProps.id
-    }, sharedProps, getOverrideProps(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), /*#__PURE__*/React.createElement(UIDConsumer, null, captionId => /*#__PURE__*/React.createElement(ControlContainer, _extends({
+    }, sharedProps, getOverrideProps(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, getOverrideProps(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(UIDConsumer, null, captionId => /*#__PURE__*/React.createElement(ControlContainer, _extends({
       "data-baseweb": "form-control-container"
     }, sharedProps, getOverrideProps(ControlContainerOverride)), React.Children.map(children, (child, index) => {
       if (!child) return;
@@ -76,8 +126,8 @@ export default class FormControl extends React.Component {
         'aria-errormessage': error ? captionId : null,
         'aria-describedby': caption || positive ? captionId : null,
         disabled: onlyChildProps.disabled || disabled,
-        error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
-        positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive
+        error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error,
+        positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive
       });
     }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
       "data-baseweb": "form-control-caption",
@@ -91,5 +141,6 @@ _defineProperty(FormControl, "defaultProps", {
   overrides: {},
   label: null,
   caption: null,
-  disabled: false
+  disabled: false,
+  counter: false
 });

package/es/form-control/styled-components.js

@@ -10,7 +10,6 @@ export const Label = styled('label', props => {
     $disabled,
     $theme: {
       colors,
-      sizing,
       typography
     }
   } = props;
@@ -22,14 +21,36 @@ export const Label = styled('label', props => {
     paddingTop: 0,
     paddingRight: 0,
     paddingBottom: 0,
-    paddingLeft: 0,
-    marginTop: sizing.scale300,
-    marginRight: 0,
-    marginBottom: sizing.scale300,
-    marginLeft: 0
+    paddingLeft: 0
   };
 });
 Label.displayName = "Label";
+export const LabelContainer = styled('span', ({
+  $theme: {
+    sizing
+  }
+}) => ({
+  display: 'flex',
+  width: '100%',
+  marginTop: sizing.scale300,
+  marginRight: 0,
+  marginBottom: sizing.scale300,
+  marginLeft: 0
+}));
+LabelContainer.displayName = "LabelContainer";
+export const LabelEndEnhancer = styled('span', ({
+  $disabled,
+  $counterError,
+  $theme: {
+    colors,
+    typography
+  }
+}) => ({ ...typography.font100,
+  flex: 0,
+  width: '100%',
+  color: $counterError ? colors.negative400 : $disabled ? colors.contentSecondary : colors.contentPrimary
+}));
+LabelEndEnhancer.displayName = "LabelEndEnhancer";
 export const Caption = styled('div', props => {
   const {
     $error,

package/es/popover/popover.js

@@ -457,7 +457,7 @@ class PopoverInner extends React.Component {
           crossFrame: false,
           focusOptions: this.props.focusOptions
         }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
-          disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
+          disabled: !this.props.autoFocus || !this.state.autoFocusAfterPositioning
         }, this.renderPopover(renderedContent)))));
       } else {
         rendered.push( /*#__PURE__*/React.createElement(Hidden, {