baseui 10.0.0 → 10.3.0

package/es/select/select-component.js

@@ -18,7 +18,7 @@ import SearchIconComponent from '../icon/search.js';
 import { LocaleContext } from '../locale/index.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
 import { Spinner } from '../spinner/index.js';
-import getBuiId from '../utils/get-bui-id.js';
+import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input.js';
 import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
 import defaultProps from './default-props.js';
@@ -78,7 +78,6 @@ class Select extends React.Component {
   // the select components can accept an array of options or an object where properties are optgroups
   // and values are arrays of options. this class property is constructed and updated in a normalized
   // shape where optgroup titles are stored on the option in the __optgroup field.
-  // id generated for the listbox. used by screenreaders to associate the input with the menu it controls
   constructor(props) {
     super(props);
 
@@ -98,8 +97,6 @@ class Select extends React.Component {
 
     _defineProperty(this, "options", []);
 
-    _defineProperty(this, "listboxId", getBuiId());
-
     _defineProperty(this, "state", {
       activeDescendant: null,
       inputValue: '',
@@ -148,16 +145,17 @@ class Select extends React.Component {
         if (!this.state.isFocused) {
           this.openAfterFocus = this.props.openOnClick;
           this.focus();
-          return;
         }
 
         if (!this.state.isOpen) {
           this.setState({
             isOpen: true,
+            isFocused: true,
             isPseudoFocused: false
           });
-          return;
         }
+
+        return;
       } // Ensures that interactive elements within the Select component do not trigger the outer click
       // handler. For example, after an option is selected clicks on the 'clear' icon call here. We
       // should ignore those events. This comes after case where click is on input element, so that
@@ -172,9 +170,19 @@ class Select extends React.Component {
 
       if (!this.props.searchable) {
         this.focus();
-        this.setState(prev => ({
-          isOpen: !prev.isOpen
-        }));
+
+        if (this.state.isOpen) {
+          this.setState({
+            isOpen: false,
+            isFocused: false
+          });
+        } else {
+          this.setState({
+            isOpen: true,
+            isFocused: true
+          });
+        }
+
         return;
       } // Cases below only apply to searchable Select component.
 
@@ -693,7 +701,7 @@ class Select extends React.Component {
     }
   }
 
-  renderInput() {
+  renderInput(listboxId) {
     const {
       overrides = {}
     } = this.props;
@@ -714,25 +722,29 @@ class Select extends React.Component {
         "aria-disabled": this.props.disabled,
         "aria-label": label,
         "aria-labelledby": this.props['aria-labelledby'],
-        "aria-owns": this.state.isOpen ? this.listboxId : null,
+        "aria-owns": this.state.isOpen ? listboxId : null,
         "aria-required": this.props.required || null,
         onFocus: this.handleInputFocus,
-        ref: this.handleInputRef,
         tabIndex: 0
       }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
-        "aria-hidden": "true",
+        "aria-hidden": true,
         id: this.props.id || null,
-        onFocus: this.handleInputFocus,
+        ref: this.handleInputRef,
         style: {
-          display: 'none'
-        }
+          opacity: 0,
+          width: 0,
+          overflow: 'hidden',
+          border: 'none',
+          padding: 0
+        },
+        tabIndex: -1
       }));
     }
 
     return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
       "aria-activedescendant": this.state.activeDescendant,
       "aria-autocomplete": "list",
-      "aria-controls": this.state.isOpen ? this.listboxId : null,
+      "aria-controls": this.state.isOpen ? listboxId : null,
       "aria-describedby": this.props['aria-describedby'],
       "aria-errormessage": this.props['aria-errormessage'],
       "aria-disabled": this.props.disabled || null,
@@ -833,7 +845,7 @@ class Select extends React.Component {
   }
 
   filterOptions(excludeOptions) {
-    const filterValue = this.state.inputValue; // apply filter function
+    const filterValue = this.state.inputValue.trim(); // apply filter function
 
     if (this.props.filterOptions) {
       this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
@@ -934,13 +946,13 @@ class Select extends React.Component {
       }
     }
 
-    return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(PopoverOverride // Popover does not provide ability to forward refs through, and if we were to simply
+    return /*#__PURE__*/React.createElement(UIDConsumer, null, listboxId => /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(PopoverOverride // Popover does not provide ability to forward refs through, and if we were to simply
     // apply the ref to the Root component below it would be overwritten before the popover
     // renders it. Using this strategy, we will get a ref to the popover, then reuse its
     // anchorRef so we can check if clicks are on the select component or not.
     // eslint-disable-next-line flowtype/no-weak-types
     , _extends({
-      ref: ref => {
+      innerRef: ref => {
         if (!ref) return;
         this.anchor = ref.anchorRef;
       },
@@ -954,7 +966,7 @@ class Select extends React.Component {
           error: this.props.error,
           positive: this.props.positive,
           getOptionLabel: this.props.getOptionLabel || this.getOptionLabel.bind(this, locale),
-          id: this.listboxId,
+          id: listboxId,
           isLoading: this.props.isLoading,
           labelKey: this.props.labelKey,
           maxDropdownHeight: this.props.maxDropdownHeight,
@@ -987,7 +999,7 @@ class Select extends React.Component {
       onTouchEnd: this.handleTouchEnd,
       onTouchMove: this.handleTouchMove,
       onTouchStart: this.handleTouchStart
-    }, sharedProps, controlContainerProps), type === TYPE.search ? this.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), this.renderValue(valueArray, isOpen, locale), this.renderInput(), this.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof this.props.placeholder !== 'undefined' ? this.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), this.renderLoading(), this.renderClear(), type === TYPE.select ? this.renderArrow() : null)))));
+    }, sharedProps, controlContainerProps), type === TYPE.search ? this.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), this.renderValue(valueArray, isOpen, locale), this.renderInput(listboxId), this.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof this.props.placeholder !== 'undefined' ? this.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), this.renderLoading(), this.renderClear(), type === TYPE.select ? this.renderArrow() : null))))));
   }
 
 }

package/es/table-semantic/styled-components.js

@@ -45,7 +45,7 @@ export const StyledTable = styled('table', ({
   $width
 }) => {
   return {
-    borderCollapse: 'collapse',
+    borderSpacing: '0',
     boxSizing: 'border-box',
     minWidth: '100%',
     width: $width || null
@@ -156,16 +156,9 @@ export const StyledTableBody = styled('tbody', ({
 });
 StyledTableBody.displayName = "StyledTableBody";
 export const StyledTableBodyRow = styled('tr', ({
-  $theme,
-  $divider
+  $theme
 }) => {
-  const borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
   return {
-    ':not(:last-child)': {
-      borderBottomColor: borderHorizontal ? $theme.borders.border300.borderColor : null,
-      borderBottomStyle: borderHorizontal ? $theme.borders.border300.borderStyle : null,
-      borderBottomWidth: borderHorizontal ? $theme.borders.border300.borderWidth : null
-    },
     ':hover': {
       backgroundColor: $theme.colors.tableStripedBackground
     }
@@ -176,10 +169,12 @@ export const StyledTableBodyCell = styled('td', ({
   $theme,
   $size,
   $divider,
-  $isNumeric
+  $isNumeric,
+  $isLastRow
 }) => {
   const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   const borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
+  const borderHorizontal = $divider === undefined || $divider === DIVIDER.horizontal || $divider === DIVIDER.grid;
   const padding = sizeToCellPadding($theme, $size);
   return { ...$theme.typography.font200,
     paddingTop: padding,
@@ -189,6 +184,9 @@ export const StyledTableBodyCell = styled('td', ({
     color: $theme.colors.contentPrimary,
     textAlign: $isNumeric ? 'right' : null,
     verticalAlign: 'top',
+    borderBottomColor: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderColor : null,
+    borderBottomStyle: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderStyle : null,
+    borderBottomWidth: !$isLastRow && borderHorizontal ? $theme.borders.border300.borderWidth : null,
     ':not(:last-child)': {
       [`border${borderDir}Color`]: borderVertical ? $theme.borders.border300.borderColor : null,
       [`border${borderDir}Style`]: borderVertical ? $theme.borders.border300.borderStyle : null,

package/es/table-semantic/table-builder.js

@@ -131,7 +131,7 @@ export default class TableBuilder extends React.Component {
       }, tableHeadCellSortableProps, colTableHeadCellSortableProps), col.header, sortIcon);
     }
 
-    function renderCell(col, colIndex, row, rowIndex) {
+    function renderCell(col, colIndex, row, rowIndex, lastRowindex) {
       const colOverrides = col.overrides || {};
       const [ColTableBodyCell, colTableBodyCellProps] = getOverrides(colOverrides.TableBodyCell, TableBodyCell);
       return /*#__PURE__*/React.createElement(ColTableBodyCell, _extends({
@@ -142,6 +142,7 @@ export default class TableBuilder extends React.Component {
         $row: row,
         $rowIndex: rowIndex,
         $isNumeric: col.numeric,
+        $isLastRow: rowIndex === lastRowindex,
         $size: size
       }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
     }
@@ -165,7 +166,7 @@ export default class TableBuilder extends React.Component {
       $divider: divider,
       $row: row,
       $rowIndex: rowIndex
-    }, tableBodyRowProps), columns.map((col, colIndex) => renderCell(col, colIndex, row, rowIndex)))))));
+    }, tableBodyRowProps), columns.map((col, colIndex) => renderCell(col, colIndex, row, rowIndex, data.length - 1)))))));
   }
 
 }

package/es/table-semantic/table.js

@@ -64,6 +64,7 @@ export default class Table extends React.Component {
       $divider: divider,
       $row: row,
       $rowIndex: rowIndex,
+      $isLastRow: rowIndex === data.length - 1,
       $size: size
     }, tableBodyCellProps), row[colIndex])))))));
   }

package/es/tag/index.js

@@ -6,5 +6,5 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as Tag } from './tag.js'; // Styled elements
 
-export { Root as StyledRoot, Action as StyledAction, ActionIcon as StyledActionIcon, Text as StyledText } from './styled-components.js';
+export { Root as StyledRoot, Action as StyledAction, Text as StyledText } from './styled-components.js';
 export { KIND, VARIANT, SIZE } from './constants.js';

package/es/tag/styled-components.js

@@ -276,11 +276,9 @@ export const Action = styled('span', props => {
     transitionDuration: 'background-color',
     transitionTimingFunction: $theme.animation.easeOutCurve
   };
-});
-Action.displayName = "Action";
-export const ActionIcon = styled('svg', {}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
+}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
 
-ActionIcon.displayName = "ActionIcon";
+Action.displayName = "Action";
 export const StartEnhancerContainer = styled('div', ({
   $theme,
   $size = SIZE.small

package/es/tag/tag.js

@@ -8,10 +8,17 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides.js';
-import { Action as StyledAction, Root as StyledRoot, ActionIcon as StyledActionIcon, StartEnhancerContainer as StyledStartEnhancerContainer, Text as StyledText } from './styled-components.js';
+import { Action as StyledAction, Root as StyledRoot, StartEnhancerContainer as StyledStartEnhancerContainer, Text as StyledText } from './styled-components.js';
 import { KIND, VARIANT, SIZE } from './constants.js';
 import { getTextFromChildren } from './utils.js';
-import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
+import DeleteIcon from '../icon/delete.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js'; // Previously, Tag used a hardcoded SVG as its 'close' icon. Replacing it with
+// Delete requires modifying Delete's viewbox to prevent visual regressions.
+
+const ModifiedViewBoxDeleteIcon = props => /*#__PURE__*/React.createElement(DeleteIcon, _extends({
+  viewBox: "5 5 13.186 13.186"
+}, props));
+
 const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
@@ -68,7 +75,7 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
   const [Action, actionProps] = getOverrides(overrides.Action, StyledAction);
-  const [ActionIcon, actionIconProps] = getOverrides(overrides.ActionIcon, StyledActionIcon);
+  const [ActionIcon, actionIconProps] = getOverrides(overrides.ActionIcon, ModifiedViewBoxDeleteIcon);
   const [StartEnhancerContainer, startEnhancerContainerProps] = getOverrides(overrides.StartEnhancerContainer, StyledStartEnhancerContainer);
   const [Text, textProps] = getOverrides(overrides.Text, StyledText);
   const clickable = typeof onClick === 'function';
@@ -98,9 +105,9 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
   const titleText = title || getTextFromChildren(children);
   const isButton = (clickable || closeable) && !disabled;
   const actionSize = {
-    [SIZE.small]: '12',
-    [SIZE.medium]: '16',
-    [SIZE.large]: '20'
+    [SIZE.small]: 12,
+    [SIZE.medium]: 16,
+    [SIZE.large]: 20
   }[size]; // Capitalize for JSX
 
   const StartEnhancer = startEnhancer;
@@ -115,21 +122,14 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, rootHandlers, sharedProps, rootProps, {
     onFocus: forkFocus(rootProps, handleFocus),
     onBlur: forkBlur(rootProps, handleBlur)
-  }), StartEnhancer && /*#__PURE__*/React.createElement(StartEnhancerContainer, startEnhancerContainerProps, /*#__PURE__*/React.createElement(StartEnhancer, null)), /*#__PURE__*/React.createElement(Text, _extends({
+  }), StartEnhancer && StartEnhancer !== 0 && /*#__PURE__*/React.createElement(StartEnhancerContainer, startEnhancerContainerProps, /*#__PURE__*/React.createElement(StartEnhancer, null)), /*#__PURE__*/React.createElement(Text, _extends({
     title: titleText
   }, textProps), children), closeable ? /*#__PURE__*/React.createElement(Action, _extends({
     "aria-hidden": true,
     role: "presentation"
   }, actionHandlers, sharedProps, actionProps), /*#__PURE__*/React.createElement(ActionIcon, _extends({
-    width: actionSize,
-    height: actionSize,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, actionIconProps), /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M21.0999 5.09998L18.8999 2.90002L11.9999 9.90002L5.09985 2.90002L2.8999 5.09998L9.8999 12L2.8999 18.9L5.09985 21.1L11.9999 14.1L18.8999 21.1L21.0999 18.9L14.0999 12L21.0999 5.09998Z"
-  }))) : null);
+    size: actionSize
+  }, actionIconProps))) : null);
 });
 Tag.displayName = 'Tag';
 export default Tag;

package/es/textarea/textarea.js

@@ -81,8 +81,7 @@ _defineProperty(Textarea, "defaultProps", {
   placeholder: '',
   required: false,
   rows: 3,
-  size: SIZE.default,
-  value: ''
+  size: SIZE.default
 });
 
 export default Textarea;

package/es/themes/dark-theme/color-semantic-tokens.js

@@ -17,12 +17,12 @@ foundation = colorTokens) => {
     backgroundInversePrimary: foundation.primaryA,
     backgroundInverseSecondary: colors.gray300,
     // Content
-    contentPrimary: foundation.primaryA,
-    contentSecondary: colors.gray400,
-    contentTertiary: colors.gray500,
-    contentInversePrimary: foundation.primaryB,
-    contentInverseSecondary: colors.gray600,
-    contentInverseTertiary: colors.gray500,
+    contentPrimary: colors.white,
+    contentSecondary: colors.gray300,
+    contentTertiary: colors.gray400,
+    contentInversePrimary: colors.black,
+    contentInverseSecondary: colors.gray700,
+    contentInverseTertiary: colors.gray600,
     // Border
     borderOpaque: colors.gray700,
     borderTransparent: hexToRgba(foundation.primaryA, '0.08'),
@@ -39,7 +39,7 @@ foundation = colorTokens) => {
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: colors.green500,
     backgroundLightAccent: colors.blue700,
     backgroundLightPositive: colors.green700,
     backgroundLightNegative: colors.red700,
@@ -60,7 +60,17 @@ foundation = colorTokens) => {
     borderAccentLight: colors.blue500,
     borderNegative: colors.red500,
     borderWarning: colors.yellow500,
-    borderPositive: colors.green500
+    borderPositive: colors.green500,
+    // Programs
+    safety: colors.blue400,
+    eatsGreen400: colors.green400,
+    freightBlue400: colors.cobalt400,
+    jumpRed400: colors.red400,
+    rewardsTier1: colors.blue400,
+    rewardsTier2: colors.yellow400,
+    rewardsTier3: colors.platinum400,
+    rewardsTier4: colors.gray200,
+    membership: colors.yellow600
   };
   return { ...core,
     ...coreExtensions

package/es/themes/light-theme/color-semantic-tokens.js

@@ -39,7 +39,7 @@ foundation = colorTokens) => {
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
-    backgroundPositive: foundation.positive,
+    backgroundPositive: colors.green400,
     backgroundLightAccent: colors.blue50,
     backgroundLightNegative: colors.red50,
     backgroundLightWarning: colors.yellow50,
@@ -52,15 +52,25 @@ foundation = colorTokens) => {
     contentOnColor: colors.white,
     contentOnColorInverse: colors.black,
     contentNegative: foundation.negative,
-    contentWarning: colors.yellow700,
-    contentPositive: foundation.positive,
+    contentWarning: colors.yellow600,
+    contentPositive: colors.green400,
     // Border
     borderStateDisabled: colors.gray50,
     borderAccent: colors.blue400,
     borderAccentLight: colors.blue200,
     borderNegative: colors.red200,
     borderWarning: colors.yellow200,
-    borderPositive: colors.green200
+    borderPositive: colors.green200,
+    // Programs
+    safety: colors.blue400,
+    eatsGreen400: colors.green400,
+    freightBlue400: colors.cobalt400,
+    jumpRed400: colors.red400,
+    rewardsTier1: colors.blue400,
+    rewardsTier2: colors.yellow400,
+    rewardsTier3: colors.platinum400,
+    rewardsTier4: colors.black,
+    membership: colors.yellow600
   };
   return { ...core,
     ...coreExtensions

package/es/tokens/colors.js

@@ -11,7 +11,7 @@ const colors = {
   gray200: '#E2E2E2',
   gray300: '#CBCBCB',
   gray400: '#AFAFAF',
-  gray500: '#757575',
+  gray500: '#6B6B6B',
   gray600: '#545454',
   gray700: '#333333',
   gray800: '#1F1F1F',
@@ -48,13 +48,13 @@ const colors = {
   yellow300: '#FFCF70',
   yellow400: '#FFC043',
   yellow500: '#BC8B2C',
-  yellow600: '#997328',
+  yellow600: '#996F00',
   yellow700: '#674D1B',
   green50: '#E6F2ED',
   green100: '#ADDEC9',
   green200: '#66D19E',
   green300: '#06C167',
-  green400: '#05944F',
+  green400: '#048848',
   green500: '#03703C',
   green600: '#03582F',
   green700: '#10462D',

package/es/tree-view/tree-view.js

@@ -107,8 +107,6 @@ export default function TreeView(props) {
         break;
 
       default:
-        e.preventDefault();
-
         if (timeOutRef.current !== null) {
           clearTimeout(timeOutRef.current);
         }

package/esm/app-nav-bar/mobile-menu.js

@@ -179,12 +179,14 @@ export default function MobileMenu(props) {
         boxShadow: 'none'
       }
     },
-    ListItem: function ListItem(listItemProps) {
-      return /*#__PURE__*/React.createElement(MobileNavMenuItem, _extends({}, listItemProps, {
+    ListItem: /*#__PURE__*/React.forwardRef(function (listItemProps, ref) {
+      return /*#__PURE__*/React.createElement(MobileNavMenuItem, _extends({
+        ref: ref
+      }, listItemProps, {
         mapItemToNode: mapItemToNode,
         overrides: overrides
       }));
-    }
+    })
   }, // $FlowFixMe
   menuProps.overrides);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SideMenuButton, _extends({

package/esm/app-nav-bar/user-menu.js

@@ -111,11 +111,13 @@ export default function UserMenuComponent(props) {
         width: MENU_ITEM_WIDTH
       }
     },
-    ListItem: function ListItem(listItemProps) {
-      return /*#__PURE__*/React.createElement(UserMenuListItem, _extends({}, listItemProps, {
+    ListItem: /*#__PURE__*/React.forwardRef(function (listItemProps, ref) {
+      return /*#__PURE__*/React.createElement(UserMenuListItem, _extends({
+        ref: ref
+      }, listItemProps, {
         mapItemToNode: props.mapItemToNode
       }));
-    }
+    })
   }, // $FlowFixMe
   userMenuProps.overrides);
   return /*#__PURE__*/React.createElement(StatefulPopover, {

package/esm/combobox/combobox.js

@@ -27,7 +27,7 @@ import { Input, SIZE } from '../input/index.js';
 import { scrollItemIntoView } from '../menu/utils.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
-import getBuiId from '../utils/get-bui-id.js';
+import { useUIDSeed } from 'react-uid';
 import { StyledRoot, StyledInputContainer, StyledListBox, StyledListItem } from './styled-components.js';
 var ENTER = 13;
 var ESCAPE = 27;
@@ -79,12 +79,9 @@ function Combobox(props) {
   var inputRef = React.useRef(null);
   var listboxRef = React.useRef(null);
   var selectedOptionRef = React.useRef(null);
-  var activeDescendantId = React.useMemo(function () {
-    return getBuiId();
-  }, []);
-  var listboxId = React.useMemo(function () {
-    return getBuiId();
-  }, []); // Handles case where an application wants to update the value in the input element
+  var seed = useUIDSeed();
+  var activeDescendantId = seed('descendant');
+  var listboxId = seed('listbox'); // Handles case where an application wants to update the value in the input element
   // from outside of the combobox component.
 
   React.useEffect(function () {

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

@@ -28,7 +28,7 @@ import { Filter as FilterIcon } from '../icon/index.js';
 import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
 import { Popover, PLACEMENT } from '../popover/index.js';
 import { useStyletron } from '../styles/index.js';
-import getBuiId from '../utils/get-bui-id.js';
+import { useUIDSeed } from 'react-uid';
 import { COLUMNS } from './constants.js';
 import { matchesQuery } from './text-search.js';
 import { LocaleContext } from '../locale/index.js';
@@ -73,8 +73,9 @@ function Options(props) {
       focusVisible = _React$useState2[0],
       setFocusVisible = _React$useState2[1];
 
-  var buiRef = React.useRef(props.columns.map(function (_, index) {
-    return getBuiId();
+  var seed = useUIDSeed();
+  var buiRef = React.useRef(props.columns.map(function (col) {
+    return seed(col);
   }));
 
   var handleFocus = function handleFocus(event) {

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

@@ -59,7 +59,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     role: "button",
     tabIndex: "0",
-    className: css(_objectSpread(_objectSpread({}, theme.typography.font150), {}, {
+    className: css(_objectSpread(_objectSpread({}, theme.typography.font350), {}, {
       alignItems: 'center',
       backgroundColor: backgroundColor,
       boxSizing: 'border-box',

package/esm/datepicker/calendar.js

@@ -430,7 +430,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           onChange: _this.handleDateChange,
           overrides: overrides,
           value: _this.props.value,
-          peekNextMonth: _this.props.peekNextMonth
+          peekNextMonth: _this.props.peekNextMonth,
+          fixedHeight: _this.props.fixedHeight
         })));
         monthList.push( /*#__PURE__*/React.createElement("div", {
           key: "month-component-".concat(i)
@@ -534,6 +535,10 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
                 }
               }
             }
+
+            if (_this.props.onQuickSelectChange) {
+              _this.props.onQuickSelectChange(params.option);
+            }
           },
           options: _this.props.quickSelectOptions || [{
             id: locale.datepicker.pastWeek,

package/esm/datepicker/datepicker.js

@@ -492,7 +492,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           InputWrapper = _getOverrides6[0],
           inputWrapperProps = _getOverrides6[1];
 
-      var placeholder = this.props.placeholder || (this.props.range ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD');
+      var placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD';
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
           focusLock: false,

package/esm/datepicker/month.js

@@ -66,6 +66,7 @@ var defaultProps = {
   peekNextMonth: false,
   value: null
 };
+var CALENDAR_MAX_ROWS = 6;
 
 var CalendarMonth = /*#__PURE__*/function (_React$Component) {
   _inherits(CalendarMonth, _React$Component);
@@ -101,7 +102,7 @@ var CalendarMonth = /*#__PURE__*/function (_React$Component) {
       var i = 0;
       var isWithinMonth = true;
 
-      while (isWithinMonth) {
+      while (isWithinMonth || _this.props.fixedHeight && _this.props.peekNextMonth && i < CALENDAR_MAX_ROWS) {
         weeks.push( /*#__PURE__*/React.createElement(Week, {
           adapter: _this.props.adapter,
           date: currentWeekStart,