baseui 10.0.0 → 10.3.0

package/app-nav-bar/index.d.ts

@@ -1,4 +1,27 @@
 import * as React from 'react';
+import {Override} from '../overrides';
+
+export interface AppNavBarOverridesT {
+  Root?: Override<any>;
+  AppName?: Override<any>;
+  MainMenuItem?: Override<any>;
+  PrimaryMenuContainer?: Override<any>;
+  ProfileTileContainer?: Override<any>;
+  SecondaryMenuContainer?: Override<any>;
+  Spacing?: Override<any>;
+  SubnavContainer?: Override<any>;
+  UserMenuProfileListItem?: Override<any>;
+  UserProfileInfoContainer?: Override<any>;
+  UserProfilePictureContainer?: Override<any>;
+  UserProfileTileContainer?: Override<any>;
+
+  // nested overrides
+  MobileDrawer?: Override<any>;
+  MobileMenu?: Override<any>;
+  SideMenuButton?: Override<any>;
+  UserMenuButton?: Override<any>;
+  UserMenu?: Override<any>;
+}
 
 export type NavItemT = {
   active?: boolean;
@@ -26,6 +49,7 @@ export type AppNavBarPropsT = UserMenuPropsT & {
   mainItems?: NavItemT[];
   mapItemToNode?: (item: NavItemT) => React.ReactNode;
   onMainItemSelect?: (item: NavItemT) => any;
+  overrides?: AppNavBarOverridesT;
   title?: React.ReactNode;
 };
 

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

@@ -200,12 +200,14 @@ 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/app-nav-bar/mobile-menu.js.flow

@@ -164,15 +164,16 @@ export default function MobileMenu(props: AppNavBarPropsT) {
           boxShadow: 'none',
         },
       },
-      ListItem(listItemProps) {
+      ListItem: React.forwardRef((listItemProps, ref) => {
         return (
           <MobileNavMenuItem
+            ref={ref}
             {...listItemProps}
             mapItemToNode={mapItemToNode}
             overrides={overrides}
           />
         );
-      },
+      }),
     },
     // $FlowFixMe
     menuProps.overrides,

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

@@ -132,11 +132,13 @@ 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(_index5.StatefulPopover, {

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

@@ -94,14 +94,15 @@ export default function UserMenuComponent(props: {|
         )),
         style: {width: MENU_ITEM_WIDTH},
       },
-      ListItem(listItemProps) {
+      ListItem: React.forwardRef((listItemProps, ref) => {
         return (
           <UserMenuListItem
+            ref={ref}
             {...listItemProps}
             mapItemToNode={props.mapItemToNode}
           />
         );
-      },
+      }),
     },
     // $FlowFixMe
     userMenuProps.overrides,

package/block/index.d.ts

@@ -219,7 +219,14 @@ export interface BlockProps {
   $style?: $StyleProp<BlockProps>;
   overrides?: BlockOverrides;
   color?: Responsive<string>;
+  backgroundAttachment?: Responsive<string>;
+  backgroundClip?: Responsive<string>;
   backgroundColor?: Responsive<string>;
+  backgroundImage?: Responsive<string>;
+  backgroundOrigin?: Responsive<string>;
+  backgroundPosition?: Responsive<string>;
+  backgroundRepeat?: Responsive<string>;
+  backgroundSize?: Responsive<string>;
   font?: string | string[];
   src?: string;
   ref?: React.Ref<any>;

package/combobox/combobox.js

@@ -17,12 +17,10 @@ var _overrides = require("../helpers/overrides.js");
 
 var _index2 = require("../popover/index.js");
 
-var _getBuiId = _interopRequireDefault(require("../utils/get-bui-id.js"));
+var _reactUid = require("react-uid");
 
 var _styledComponents = require("./styled-components.js");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 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; }
@@ -95,12 +93,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 (0, _getBuiId.default)();
-  }, []);
-  var listboxId = React.useMemo(function () {
-    return (0, _getBuiId.default)();
-  }, []); // Handles case where an application wants to update the value in the input element
+  var seed = (0, _reactUid.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/combobox/combobox.js.flow

@@ -12,7 +12,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,
@@ -59,8 +59,9 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
   const listboxRef = React.useRef(null);
   const selectedOptionRef = React.useRef(null);
 
-  const activeDescendantId = React.useMemo(() => getBuiId(), []);
-  const listboxId = React.useMemo(() => getBuiId(), []);
+  const seed = useUIDSeed();
+  const activeDescendantId = seed('descendant');
+  const listboxId = seed('listbox');
 
   // Handles case where an application wants to update the value in the input element
   // from outside of the combobox component.

package/combobox/index.d.ts

@@ -29,7 +29,7 @@ export type PropsT<OptionT = unknown> = {
   onChange?: (value: string, option: OptionT | null) => any;
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => any;
   onSubmit?: (params: {closeListbox: () => void; value: string}) => any;
-  options: OptionT;
+  options: OptionT[];
   overrides?: ComboboxOverrides;
   size?: SIZE[keyof SIZE];
   value: string;

package/data-table/filter-menu.js

@@ -17,7 +17,7 @@ var _index4 = require("../popover/index.js");
 
 var _index5 = require("../styles/index.js");
 
-var _getBuiId = _interopRequireDefault(require("../utils/get-bui-id.js"));
+var _reactUid = require("react-uid");
 
 var _constants = require("./constants.js");
 
@@ -88,8 +88,10 @@ function Options(props) {
       focusVisible = _React$useState2[0],
       setFocusVisible = _React$useState2[1];
 
-  var buiRef = _react.default.useRef(props.columns.map(function (_, index) {
-    return (0, _getBuiId.default)();
+  var seed = (0, _reactUid.useUIDSeed)();
+
+  var buiRef = _react.default.useRef(props.columns.map(function (col) {
+    return seed(col);
   }));
 
   var handleFocus = function handleFocus(event) {

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

@@ -12,7 +12,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';
@@ -63,7 +63,8 @@ function Options(props: OptionsPropsT) {
   }, [inputRef.current]);
 
   const [focusVisible, setFocusVisible] = React.useState(false);
-  const buiRef = React.useRef(props.columns.map((_, index) => getBuiId()));
+  const seed = useUIDSeed();
+  const buiRef = React.useRef(props.columns.map(col => seed(col)));
 
   const handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {

package/data-table/header-cell.js

@@ -75,7 +75,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/data-table/header-cell.js.flow

@@ -62,7 +62,7 @@ const HeaderCell = React.forwardRef<HeaderCellPropsT, HTMLDivElement>(
         role="button"
         tabIndex="0"
         className={css({
-          ...theme.typography.font150,
+          ...theme.typography.font350,
           alignItems: 'center',
           backgroundColor,
           boxSizing: 'border-box',

package/datepicker/calendar.js

@@ -448,7 +448,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)
@@ -552,6 +553,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/datepicker/calendar.js.flow

@@ -466,6 +466,7 @@ export default class Calendar<T = Date> extends React.Component<
             overrides={overrides}
             value={this.props.value}
             peekNextMonth={this.props.peekNextMonth}
+            fixedHeight={this.props.fixedHeight}
           />
         </CalendarContainer>,
       );
@@ -578,6 +579,9 @@ export default class Calendar<T = Date> extends React.Component<
                       }
                     }
                   }
+                  if (this.props.onQuickSelectChange) {
+                    this.props.onQuickSelectChange(params.option);
+                  }
                 }}
                 options={
                   this.props.quickSelectOptions || [

package/datepicker/datepicker.js

@@ -510,7 +510,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(_index3.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
           focusLock: false,

package/datepicker/datepicker.js.flow

@@ -407,8 +407,11 @@ export default class Datepicker<T = Date> extends React.Component<
     );
 
     const placeholder =
-      this.props.placeholder ||
-      (this.props.range ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD');
+      this.props.placeholder || this.props.placeholder === ''
+        ? this.props.placeholder
+        : this.props.range
+        ? 'YYYY/MM/DD – YYYY/MM/DD'
+        : 'YYYY/MM/DD';
 
     return (
       <LocaleContext.Consumer>

package/datepicker/index.d.ts

@@ -49,12 +49,18 @@ export class StatefulContainer extends React.Component<
   ): void;
 }
 
+export interface QuickSelectOption {
+  id: string;
+  beginDate: Date;
+  endDate?: Date;
+}
+
 export interface CalendarProps {
   autoFocusCalendar?: boolean;
   dateLabel?: (day: Date) => React.ReactNode;
   excludeDates?: Date[];
   quickSelect?: boolean;
-  quickSelectOptions?: Array<{id: string; beginDate: Date; endDate?: Date}>;
+  quickSelectOptions?: Array<QuickSelectOption>;
   filterDate?: (day: Date) => boolean;
   highlightedDate?: Date;
   includeDates?: Date[];
@@ -70,6 +76,7 @@ export interface CalendarProps {
   onMonthChange?: (args: {date: Date}) => any;
   onYearChange?: (args: {date: Date}) => any;
   onChange?: onChange;
+  onQuickSelectChange?: (option?: QuickSelectOption) => any;
   orientation?: ORIENTATION[keyof ORIENTATION];
   overrides?: DatepickerOverrides<SharedStylePropsT>;
   peekNextMonth?: boolean;
@@ -77,6 +84,7 @@ export interface CalendarProps {
   timeSelectEnd?: boolean;
   trapTabbing?: boolean;
   value?: Date | Date[] | null;
+  fixedHeight?: boolean;
 }
 export interface CalendarState {
   highlightedDate: Date;

package/datepicker/month.js

@@ -79,6 +79,7 @@ var defaultProps = {
   peekNextMonth: false,
   value: null
 };
+var CALENDAR_MAX_ROWS = 6;
 
 var CalendarMonth = /*#__PURE__*/function (_React$Component) {
   _inherits(CalendarMonth, _React$Component);
@@ -114,7 +115,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.default, {
           adapter: _this.props.adapter,
           date: currentWeekStart,

package/datepicker/month.js.flow

@@ -34,6 +34,8 @@ const defaultProps = {
   value: null,
 };
 
+const CALENDAR_MAX_ROWS = 6;
+
 export default class CalendarMonth<T = Date> extends React.Component<
   MonthPropsT<T>,
 > {
@@ -68,7 +70,12 @@ export default class CalendarMonth<T = Date> extends React.Component<
     let i = 0;
     let isWithinMonth = true;
 
-    while (isWithinMonth) {
+    while (
+      isWithinMonth ||
+      (this.props.fixedHeight &&
+        this.props.peekNextMonth &&
+        i < CALENDAR_MAX_ROWS)
+    ) {
       weeks.push(
         <Week
           adapter={this.props.adapter}

package/datepicker/types.js.flow

@@ -116,7 +116,9 @@ export type WeekPropsT<T = Date> = {
   value: ?T | Array<T>,
 };
 
-export type MonthPropsT<T = Date> = WeekPropsT<T>;
+export type MonthPropsT<T = Date> = WeekPropsT<T> & {
+  fixedHeight?: boolean,
+};
 
 export type CalendarInternalState<T = Date> = {
   highlightedDate: T,
@@ -135,11 +137,7 @@ export type CalendarPropsT<T = Date> = {
   /** Display select for quickly choosing date ranges. `range` must be true as well. */
   quickSelect?: boolean,
   /** Array of custom options displayed in the quick select. Overrides default options if provided. */
-  quickSelectOptions?: Array<{
-    id: string,
-    beginDate: T,
-    endDate?: T,
-  }>,
+  quickSelectOptions?: Array<QuickSelectOption<T>>,
   /** A filter function that is called to check the disabled state of a day. If `false` is returned the day is considered to be disabled. */
   filterDate?: ?(day: T) => boolean,
   /** A function that is called with the current date to render the label text under that day on the calendar. */
@@ -173,6 +171,8 @@ export type CalendarPropsT<T = Date> = {
   onYearChange?: ({date: T}) => mixed,
   /** Event handler that is called when a new date is selected. */
   onChange?: onChangeT<T>,
+  /** Event handler that is called when a selection is made using the quick select menu. */
+  onQuickSelectChange?: (option?: QuickSelectOption<T>) => mixed,
   /** Sets the orientation of the calendar when multiple months are displayed */
   orientation?: $Values<typeof ORIENTATION>,
   overrides?: DatepickerOverridesT,
@@ -186,6 +186,7 @@ export type CalendarPropsT<T = Date> = {
   trapTabbing?: boolean,
   /** Currently selected date. */
   value?: ?T | Array<T>,
+  fixedHeight?: boolean,
 };
 
 export type HeaderPropsT<T = Date> = CalendarPropsT<T> & {
@@ -193,6 +194,12 @@ export type HeaderPropsT<T = Date> = CalendarPropsT<T> & {
   order: number,
 };
 
+export type QuickSelectOption<T> = {
+  id: string,
+  beginDate: T,
+  endDate?: T,
+};
+
 export type DatepickerPropsT<T = Date> = CalendarPropsT<T> & {
   'aria-label'?: string,
   'aria-labelledby'?: string,

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

@@ -119,14 +119,14 @@ export default function MobileMenu(props) {
         boxShadow: 'none'
       }
     },
-
-    ListItem(listItemProps) {
-      return /*#__PURE__*/React.createElement(MobileNavMenuItem, _extends({}, listItemProps, {
+    ListItem: /*#__PURE__*/React.forwardRef((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/es/app-nav-bar/user-menu.js

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

package/es/combobox/combobox.js

@@ -11,7 +11,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';
 const ENTER = 13;
 const ESCAPE = 27;
@@ -46,8 +46,9 @@ function Combobox(props) {
   const inputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
   const selectedOptionRef = React.useRef(null);
-  const activeDescendantId = React.useMemo(() => getBuiId(), []);
-  const listboxId = React.useMemo(() => getBuiId(), []); // Handles case where an application wants to update the value in the input element
+  const seed = useUIDSeed();
+  const activeDescendantId = seed('descendant');
+  const 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(() => {

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

@@ -10,7 +10,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';
@@ -46,7 +46,8 @@ function Options(props) {
     }
   }, [inputRef.current]);
   const [focusVisible, setFocusVisible] = React.useState(false);
-  const buiRef = React.useRef(props.columns.map((_, index) => getBuiId()));
+  const seed = useUIDSeed();
+  const buiRef = React.useRef(props.columns.map(col => seed(col)));
 
   const handleFocus = event => {
     if (isFocusVisible(event)) {

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

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

package/es/datepicker/calendar.js

@@ -351,7 +351,8 @@ export default class Calendar extends 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-${i}`
@@ -431,6 +432,10 @@ export default class Calendar extends React.Component {
               }
             }
           }
+
+          if (this.props.onQuickSelectChange) {
+            this.props.onQuickSelectChange(params.option);
+          }
         },
         options: this.props.quickSelectOptions || [{
           id: locale.datepicker.pastWeek,

package/es/datepicker/datepicker.js

@@ -393,7 +393,7 @@ export default class Datepicker extends React.Component {
     const [InputComponent, inputProps] = getOverrides(overrides.Input, MaskedInput);
     const [PopoverComponent, popoverProps] = getOverrides(overrides.Popover, Popover);
     const [InputWrapper, inputWrapperProps] = getOverrides(overrides.InputWrapper, StyledInputWrapper);
-    const placeholder = this.props.placeholder || (this.props.range ? 'YYYY/MM/DD – YYYY/MM/DD' : 'YYYY/MM/DD');
+    const 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, locale => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverComponent, _extends({
       focusLock: false,
       mountNode: this.props.mountNode,

package/es/datepicker/month.js

@@ -32,6 +32,7 @@ const defaultProps = {
   peekNextMonth: false,
   value: null
 };
+const CALENDAR_MAX_ROWS = 6;
 export default class CalendarMonth extends React.Component {
   constructor(props) {
     super(props);
@@ -54,7 +55,7 @@ export default class CalendarMonth extends React.Component {
       let i = 0;
       let 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,

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

@@ -10,7 +10,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverride, getOverrideProps } from '../helpers/overrides.js';
-import getBuiId from '../utils/get-bui-id.js';
+import { UIDConsumer } from 'react-uid';
 import { Label as StyledLabel, Caption as StyledCaption, ControlContainer as StyledControlContainer } from './styled-components.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
@@ -30,14 +30,6 @@ function chooseRenderedHint(caption, error, positive, sharedProps) {
 }
 
 export default class FormControl extends React.Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      captionId: getBuiId()
-    });
-  }
-
   render() {
     const {
       overrides: {
@@ -74,23 +66,23 @@ export default class FormControl extends React.Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__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(ControlContainer, _extends({
+    }, sharedProps, getOverrideProps(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), /*#__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;
       const key = child.key || String(index);
       return /*#__PURE__*/React.cloneElement(child, {
         key,
-        'aria-errormessage': error ? this.state.captionId : null,
-        'aria-describedby': caption || positive ? this.state.captionId : null,
+        '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
       });
     }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
       "data-baseweb": "form-control-caption",
-      id: this.state.captionId
-    }, sharedProps, getOverrideProps(CaptionOverride)), hint)));
+      id: captionId
+    }, sharedProps, getOverrideProps(CaptionOverride)), hint))));
   }
 
 }