baseui 10.8.0 → 10.9.0

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

@@ -19,14 +19,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -39,50 +31,61 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-// https://github.com/Swizec/useDimensions
-function useDimensions() {
-  var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      dimensions = _React$useState2[0],
-      setDimensions = _React$useState2[1];
+// Measures the column header + sampled data
+function MeasureColumn(_ref) {
+  var sampleIndexes = _ref.sampleIndexes,
+      column = _ref.column,
+      columnIndex = _ref.columnIndex,
+      rows = _ref.rows,
+      isSelectable = _ref.isSelectable,
+      onLayout = _ref.onLayout;
 
-  var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      node = _React$useState4[0],
-      setNode = _React$useState4[1];
+  var _useStyletron = (0, _index.useStyletron)(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 1),
+      css = _useStyletron2[0];
 
-  var ref = React.useCallback(function (node) {
-    setNode(node);
-  }, []);
+  var ref = (0, React.useRef)();
   React.useEffect(function () {
-    if (typeof document !== 'undefined') {
-      if (node) {
-        window.requestAnimationFrame(function () {
-          setDimensions(node.getBoundingClientRect());
-        });
-      }
+    if (ref.current) {
+      onLayout(columnIndex, ref.current.getBoundingClientRect());
     }
-  }, [node]);
-  return [ref, dimensions];
-}
-
-function ElementMeasurer(props) {
-  var onDimensionsChange = props.onDimensionsChange;
-
-  var _useDimensions = useDimensions(),
-      _useDimensions2 = _slicedToArray(_useDimensions, 2),
-      ref = _useDimensions2[0],
-      dimensions = _useDimensions2[1];
-
-  React.useEffect(function () {
-    onDimensionsChange(dimensions);
-  }, [dimensions, onDimensionsChange]);
-  return /*#__PURE__*/React.cloneElement(props.item, {
-    ref: ref
-  });
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: css({
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'fit-content'
+    })
+  }, /*#__PURE__*/React.createElement(_headerCell.default, {
+    index: columnIndex,
+    isHovered: true,
+    isMeasured: true,
+    isSelectedAll: false,
+    isSelectedIndeterminate: false,
+    onMouseEnter: function onMouseEnter() {},
+    onMouseLeave: function onMouseLeave() {},
+    onSelectAll: function onSelectAll() {},
+    onSelectNone: function onSelectNone() {},
+    onSort: function onSort(i) {},
+    sortable: column.sortable,
+    sortDirection: null,
+    title: column.title,
+    isSelectable: isSelectable
+  }), sampleIndexes.map(function (rowIndex, i) {
+    var Cell = column.renderCell;
+    return /*#__PURE__*/React.createElement(Cell, {
+      key: "measure-".concat(i),
+      value: column.mapDataToValue(rows[rowIndex].data),
+      isSelectable: isSelectable,
+      isMeasured: true,
+      sortable: column.sortable,
+      x: 0,
+      y: rowIndex
+    });
+  }));
 }
 
-// sample size could likely be generated based on row count, to have higher confidence
 var MAX_SAMPLE_SIZE = 50;
 
 function generateSampleIndices(inputMin, inputMax, maxSamples) {
@@ -114,57 +117,46 @@ function generateSampleIndices(inputMin, inputMax, maxSamples) {
   return indices;
 }
 
-function MeasureColumnWidths(_ref) {
-  var columns = _ref.columns,
-      rows = _ref.rows,
-      widths = _ref.widths,
-      isSelectable = _ref.isSelectable,
-      onWidthsChange = _ref.onWidthsChange;
+function MeasureColumnWidths(_ref2) {
+  var columns = _ref2.columns,
+      rows = _ref2.rows,
+      widths = _ref2.widths,
+      isSelectable = _ref2.isSelectable,
+      onWidthsChange = _ref2.onWidthsChange;
 
-  var _useStyletron = (0, _index.useStyletron)(),
-      _useStyletron2 = _slicedToArray(_useStyletron, 1),
-      css = _useStyletron2[0];
+  var _useStyletron3 = (0, _index.useStyletron)(),
+      _useStyletron4 = _slicedToArray(_useStyletron3, 1),
+      css = _useStyletron4[0];
 
-  var measurementCount = React.useRef(0);
-  var dimensionsCache = React.useRef(widths);
+  var widthMap = React.useMemo(function () {
+    return new Map();
+  }, []);
   var sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   var finishedMeasurementCount = (sampleSize + 1) * columns.length;
-  var sampleRowIndicesByColumn = React.useMemo(function () {
-    measurementCount.current = 0;
-    dimensionsCache.current = widths;
-    var indices = generateSampleIndices(0, rows.length - 1, sampleSize);
-    return columns.map(function () {
-      return indices;
-    });
+  var sampleIndexes = React.useMemo(function () {
+    return generateSampleIndices(0, rows.length - 1, sampleSize);
   }, [columns, rows, widths, sampleSize]);
-  var handleDimensionsChange = React.useCallback(function (columnIndex, rowIndex, dimensions) {
-    if (dimensions.width === undefined) return;
+  var handleDimensionsChange = React.useCallback(function (columnIndex, dimensions) {
+    var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
 
-    if (columns[columnIndex] === undefined || dimensionsCache.current[columnIndex] === undefined) {
-      return;
+    if (nextWidth !== widthMap.get(columnIndex)) {
+      widthMap.set(columnIndex, nextWidth);
     }
 
-    measurementCount.current += 1;
-    var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, dimensionsCache.current[columnIndex], dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
-
-    if (nextWidth !== dimensionsCache.current[columnIndex]) {
-      var nextWidths = _toConsumableArray(dimensionsCache.current);
-
-      nextWidths[columnIndex] = nextWidth;
-      dimensionsCache.current = nextWidths;
-    }
-
-    if (measurementCount.current >= finishedMeasurementCount) {
-      onWidthsChange(dimensionsCache.current);
+    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()));
     }
   }, [columns, finishedMeasurementCount, onWidthsChange]);
   var hiddenStyle = css({
     position: 'absolute',
     overflow: 'hidden',
     height: 0
-  });
+  }); // Remove the measurement nodes after we are done updating our column width
 
-  if (measurementCount.current >= finishedMeasurementCount) {
+  if (widthMap.size === columns.length) {
     return null;
   }
 
@@ -175,45 +167,15 @@ function MeasureColumnWidths(_ref) {
       className: hiddenStyle,
       "aria-hidden": true,
       role: "none"
-    }, sampleRowIndicesByColumn.map(function (rowIndices, columnIndex) {
-      var Cell = columns[columnIndex].renderCell;
-      return rowIndices.map(function (rowIndex) {
-        return /*#__PURE__*/React.createElement(ElementMeasurer, {
-          key: "measure-".concat(columnIndex, "-").concat(rowIndex),
-          onDimensionsChange: function onDimensionsChange(dimensions) {
-            return handleDimensionsChange(columnIndex, rowIndex, dimensions);
-          },
-          item: /*#__PURE__*/React.createElement(Cell, {
-            value: columns[columnIndex].mapDataToValue(rows[rowIndex].data),
-            isMeasured: true,
-            onSelect: isSelectable && columnIndex === 0 ? function () {} : undefined,
-            x: columnIndex,
-            y: rowIndex
-          })
-        });
-      });
-    }), columns.map(function (column, columnIndex) {
-      return /*#__PURE__*/React.createElement(ElementMeasurer, {
-        key: "measure-column-".concat(columnIndex),
-        onDimensionsChange: function onDimensionsChange(dimensions) {
-          return handleDimensionsChange(columnIndex, -1, dimensions);
-        },
-        item: /*#__PURE__*/React.createElement(_headerCell.default, {
-          index: columnIndex,
-          isHovered: true,
-          isMeasured: true,
-          isSelectable: isSelectable && columnIndex === 0,
-          isSelectedAll: false,
-          isSelectedIndeterminate: false,
-          onMouseEnter: function onMouseEnter() {},
-          onMouseLeave: function onMouseLeave() {},
-          onSelectAll: function onSelectAll() {},
-          onSelectNone: function onSelectNone() {},
-          onSort: function onSort(i) {},
-          sortable: column.sortable,
-          sortDirection: null,
-          title: column.title
-        })
+    }, columns.map(function (column, i) {
+      return /*#__PURE__*/React.createElement(MeasureColumn, {
+        key: column.title + i,
+        column: column,
+        rows: rows,
+        isSelectable: isSelectable,
+        onLayout: handleDimensionsChange,
+        columnIndex: i,
+        sampleIndexes: sampleIndexes
       });
     }))
   );

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

@@ -12,46 +12,69 @@ import {useStyletron} from '../styles/index.js';
 
 import HeaderCell from './header-cell.js';
 import type {ColumnT, RowT} from './types.js';
+import {useRef} from 'react';
 
-// https://github.com/Swizec/useDimensions
-function useDimensions() {
-  const [dimensions, setDimensions] = React.useState({});
-  const [node, setNode] = React.useState(null);
+// Measures the column header + sampled data
+function MeasureColumn({
+  sampleIndexes,
+  column,
+  columnIndex,
+  rows,
+  isSelectable,
+  onLayout,
+}) {
+  const [css] = useStyletron();
 
-  const ref = React.useCallback(node => {
-    setNode(node);
-  }, []);
+  const ref = useRef();
 
   React.useEffect(() => {
-    if (__BROWSER__) {
-      if (node) {
-        window.requestAnimationFrame(() => {
-          setDimensions(node.getBoundingClientRect());
-        });
-      }
+    if (ref.current) {
+      onLayout(columnIndex, ref.current.getBoundingClientRect());
     }
-  }, [node]);
-
-  return [ref, dimensions];
-}
-
-type ElementMeasurerPropsT = {
-  onDimensionsChange: (dimensions: {width: number}) => void,
-  // eslint-disable-next-line flowtype/no-weak-types
-  item: React.Element<any>,
-};
-
-function ElementMeasurer(props: ElementMeasurerPropsT) {
-  const {onDimensionsChange} = props;
-  const [ref, dimensions] = useDimensions();
-
-  React.useEffect(() => {
-    onDimensionsChange(dimensions);
-  }, [dimensions, onDimensionsChange]);
+  }, []);
 
-  return React.cloneElement(props.item, {ref});
+  return (
+    <div
+      ref={ref}
+      className={css({
+        display: 'flex',
+        flexDirection: 'column',
+        width: 'fit-content',
+      })}
+    >
+      <HeaderCell
+        index={columnIndex}
+        isHovered
+        isMeasured
+        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 (
+          <Cell
+            key={`measure-${i}`}
+            value={column.mapDataToValue(rows[rowIndex].data)}
+            isSelectable={isSelectable}
+            isMeasured
+            sortable={column.sortable}
+            x={0}
+            y={rowIndex}
+          />
+        );
+      })}
+    </div>
+  );
 }
-
 type MeasureColumnWidthsPropsT = {
   columns: ColumnT<>[],
   // if selectable, measure the first column with checkbox included
@@ -61,7 +84,6 @@ type MeasureColumnWidthsPropsT = {
   widths: number[],
 };
 
-// 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,51 +118,41 @@ export default function MeasureColumnWidths({
 }: MeasureColumnWidthsPropsT) {
   const [css] = useStyletron();
 
-  const measurementCount = React.useRef(0);
-  const dimensionsCache = React.useRef(widths);
+  const widthMap = React.useMemo(() => {
+    return new Map();
+  }, []);
 
   const sampleSize =
     rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   const finishedMeasurementCount = (sampleSize + 1) * columns.length;
 
-  const sampleRowIndicesByColumn = React.useMemo<number[][]>(() => {
-    measurementCount.current = 0;
-    dimensionsCache.current = widths;
-
-    const indices = generateSampleIndices(0, rows.length - 1, sampleSize);
-    return columns.map(() => indices);
+  const sampleIndexes = React.useMemo<number[]>(() => {
+    return generateSampleIndices(0, rows.length - 1, sampleSize);
   }, [columns, rows, widths, sampleSize]);
 
   const handleDimensionsChange = React.useCallback(
-    (columnIndex, rowIndex, dimensions) => {
-      if (dimensions.width === undefined) return;
-
-      if (
-        columns[columnIndex] === undefined ||
-        dimensionsCache.current[columnIndex] === undefined
-      ) {
-        return;
-      }
-
-      measurementCount.current += 1;
-
+    (columnIndex, dimensions) => {
       const nextWidth = Math.min(
         Math.max(
           columns[columnIndex].minWidth || 0,
-          dimensionsCache.current[columnIndex],
+          widthMap.get(columnIndex) || 0,
           dimensions.width + 1,
         ),
         columns[columnIndex].maxWidth || Infinity,
       );
 
-      if (nextWidth !== dimensionsCache.current[columnIndex]) {
-        const nextWidths = [...dimensionsCache.current];
-        nextWidths[columnIndex] = nextWidth;
-        dimensionsCache.current = nextWidths;
+      if (nextWidth !== widthMap.get(columnIndex)) {
+        widthMap.set(columnIndex, nextWidth);
       }
-
-      if (measurementCount.current >= finishedMeasurementCount) {
-        onWidthsChange(dimensionsCache.current);
+      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()));
       }
     },
     [columns, finishedMeasurementCount, onWidthsChange],
@@ -152,61 +164,27 @@ export default function MeasureColumnWidths({
     height: 0,
   });
 
-  if (measurementCount.current >= finishedMeasurementCount) {
+  // Remove the measurement nodes after we are done updating our column width
+  if (widthMap.size === columns.length) {
     return null;
   }
 
   return (
     // eslint-disable-next-line jsx-a11y/role-supports-aria-props
     <div className={hiddenStyle} aria-hidden role="none">
-      {sampleRowIndicesByColumn.map((rowIndices, columnIndex) => {
-        const Cell = columns[columnIndex].renderCell;
-        return rowIndices.map(rowIndex => (
-          <ElementMeasurer
-            key={`measure-${columnIndex}-${rowIndex}`}
-            onDimensionsChange={dimensions =>
-              handleDimensionsChange(columnIndex, rowIndex, dimensions)
-            }
-            item={
-              <Cell
-                value={columns[columnIndex].mapDataToValue(rows[rowIndex].data)}
-                isMeasured
-                onSelect={
-                  isSelectable && columnIndex === 0 ? () => {} : undefined
-                }
-                x={columnIndex}
-                y={rowIndex}
-              />
-            }
+      {columns.map((column, i) => {
+        return (
+          <MeasureColumn
+            key={column.title + i}
+            column={column}
+            rows={rows}
+            isSelectable={isSelectable}
+            onLayout={handleDimensionsChange}
+            columnIndex={i}
+            sampleIndexes={sampleIndexes}
           />
-        ));
+        );
       })}
-      {columns.map((column, columnIndex) => (
-        <ElementMeasurer
-          key={`measure-column-${columnIndex}`}
-          onDimensionsChange={dimensions =>
-            handleDimensionsChange(columnIndex, -1, dimensions)
-          }
-          item={
-            <HeaderCell
-              index={columnIndex}
-              isHovered
-              isMeasured
-              isSelectable={isSelectable && columnIndex === 0}
-              isSelectedAll={false}
-              isSelectedIndeterminate={false}
-              onMouseEnter={() => {}}
-              onMouseLeave={() => {}}
-              onSelectAll={() => {}}
-              onSelectNone={() => {}}
-              onSort={i => {}}
-              sortable={column.sortable}
-              sortDirection={null}
-              title={column.title}
-            />
-          }
-        />
-      ))}
     </div>
   );
 }

package/datepicker/styled-components.js

@@ -502,7 +502,7 @@ var StyledDay = (0, _index.styled)('div', function (props) {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? "0 0 0 3px ".concat(colors.accent) : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? "0 0 0 3px ".concat(colors.accent) : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === _constants.DENSITY.high ? '42px' : '50px',
       width: '100%',

package/datepicker/styled-components.js.flow

@@ -496,7 +496,10 @@ export const StyledDay = styled<SharedStylePropsT>('div', props => {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+      boxShadow:
+        $isFocusVisible && (!$outsideMonth || $peekNextMonth)
+          ? `0 0 0 3px ${colors.accent}`
+          : 'none',
       backgroundColor: $selected
         ? colors.calendarDayBackgroundSelectedHighlighted
         : $pseudoSelected && $isHighlighted

package/drawer/drawer.js

@@ -340,7 +340,9 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
 
       var sharedProps = this.getSharedProps();
       return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
-        return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+        return /*#__PURE__*/React.createElement(_reactFocusLock.default // Allow focus to escape when UI is within an iframe
+        , {
+          crossFrame: false,
           returnFocus: true,
           autoFocus: autoFocus,
           noFocusGuards: true

package/drawer/drawer.js.flow

@@ -253,7 +253,13 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
       <LocaleContext.Consumer>
         {locale => {
           return (
-            <FocusLock returnFocus autoFocus={autoFocus} noFocusGuards={true}>
+            <FocusLock
+              // Allow focus to escape when UI is within an iframe
+              crossFrame={false}
+              returnFocus
+              autoFocus={autoFocus}
+              noFocusGuards={true}
+            >
               <Root
                 data-baseweb="drawer"
                 ref={this.getRef('Root')}

package/es/a11y/a11y.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import axe from 'axe-core';
 import { Layer, TetherBehavior, TETHER_PLACEMENT } from '../layer/index.js';
-import { Paragraph3, Caption1 } from '../typography/index.js';
+import { ParagraphSmall, ParagraphXSmall } from '../typography/index.js';
 import { styled } from '../styles/index.js';
 import { ThemeContext } from '../styles/theme-provider.js';
 
@@ -95,7 +95,7 @@ function Violation(props) {
     ref: setPopper,
     $top: `${offset.top}px` || '0px',
     $left: `${offset.left}px` || '0px'
-  }, /*#__PURE__*/React.createElement(Caption1, null, props.target), props.violations.map((violation, index) => /*#__PURE__*/React.createElement(Paragraph3, {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, props.target), props.violations.map((violation, index) => /*#__PURE__*/React.createElement(ParagraphSmall, {
     key: index
   }, violation.description)))));
 }

package/es/button/styled-components.js

@@ -39,8 +39,12 @@ export const BaseButton = styled('button', ({
   cursor: 'pointer',
   ':disabled': {
     cursor: 'not-allowed',
-    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-    color: $theme.colors.buttonDisabledText
+    ...getDisabledStyles({
+      $theme,
+      $kind,
+      $disabled,
+      $isSelected
+    })
   },
   marginLeft: 0,
   marginTop: 0,
@@ -272,6 +276,32 @@ function getFontStyles({
   }
 }
 
+function getDisabledStyles({
+  $theme,
+  $kind,
+  $isSelected,
+  $disabled
+}) {
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
 function getPaddingStyles({
   $theme,
   $size,

package/es/combobox/combobox.js

@@ -28,6 +28,7 @@ function Combobox(props) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -251,6 +252,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map((option, index) => {
       const isSelected = selectionIndex === index;
@@ -287,9 +289,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -302,7 +303,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 export default Combobox;