baseui 10.12.0 → 11.0.1

package/esm/themes/light-theme/color-component-tokens.js

@@ -42,14 +42,6 @@ export default (function () {
     buttonTertiaryDisabledActiveText: themePrimitives.mono600,
     buttonTertiarySpinnerForeground: themePrimitives.accent,
     buttonTertiarySpinnerBackground: themePrimitives.primary100,
-    buttonMinimalFill: 'transparent',
-    buttonMinimalText: themePrimitives.primary,
-    buttonMinimalHover: themePrimitives.primary50,
-    buttonMinimalActive: themePrimitives.primary100,
-    buttonMinimalSelectedFill: themePrimitives.primary100,
-    buttonMinimalSelectedText: themePrimitives.primary,
-    buttonMinimalSpinnerForeground: themePrimitives.accent,
-    buttonMinimalSpinnerBackground: themePrimitives.primary100,
     buttonDisabledFill: themePrimitives.mono200,
     buttonDisabledText: themePrimitives.mono600,
     buttonDisabledActiveFill: themePrimitives.mono700,
@@ -60,12 +52,6 @@ export default (function () {
     breadcrumbsText: themePrimitives.mono900,
     breadcrumbsSeparatorFill: themePrimitives.mono700,
     // Datepicker
-    datepickerBackground: themePrimitives.mono100,
-    datepickerDayFont: themePrimitives.mono1000,
-    datepickerDayFontDisabled: themePrimitives.mono500,
-    datepickerDayPseudoSelected: themePrimitives.primary100,
-    datepickerDayPseudoHighlighted: themePrimitives.primary200,
-    // Calendar
     calendarBackground: themePrimitives.mono100,
     calendarForeground: themePrimitives.mono1000,
     calendarForegroundDisabled: themePrimitives.mono500,
@@ -73,7 +59,6 @@ export default (function () {
     calendarHeaderForeground: themePrimitives.primary,
     calendarHeaderBackgroundActive: themePrimitives.primary700,
     calendarHeaderForegroundDisabled: themePrimitives.primary500,
-    calendarDayBackgroundPseudoSelected: themePrimitives.primary100,
     calendarDayForegroundPseudoSelected: themePrimitives.mono1000,
     calendarDayBackgroundPseudoSelectedHighlighted: themePrimitives.primary200,
     calendarDayForegroundPseudoSelectedHighlighted: themePrimitives.mono1000,
@@ -98,14 +83,11 @@ export default (function () {
     // List
     listHeaderFill: themePrimitives.white,
     listBodyFill: themePrimitives.white,
-    listIconFill: themePrimitives.mono500,
-    listBorder: themePrimitives.mono500,
     // ProgressSteps
     progressStepsCompletedText: themePrimitives.white,
     progressStepsCompletedFill: themePrimitives.primary,
     progressStepsActiveText: themePrimitives.white,
     progressStepsActiveFill: themePrimitives.primary,
-    progressStepsIconActiveFill: themePrimitives.primary,
     // Toggle
     toggleFill: themePrimitives.white,
     toggleFillChecked: themePrimitives.primary,
@@ -138,21 +120,10 @@ export default (function () {
     sliderHandleInnerFill: themePrimitives.primaryA,
     sliderTrackFillHover: themePrimitives.mono500,
     sliderTrackFillActive: themePrimitives.mono600,
-    sliderTrackFillSelected: themePrimitives.primary,
-    sliderTrackFillSelectedHover: themePrimitives.primary,
-    sliderTrackFillSelectedActive: themePrimitives.primary500,
     sliderTrackFillDisabled: themePrimitives.mono300,
-    sliderHandleFillHover: themePrimitives.white,
-    sliderHandleFillActive: themePrimitives.white,
-    sliderHandleFillSelected: themePrimitives.white,
-    sliderHandleFillSelectedHover: themePrimitives.white,
-    sliderHandleFillSelectedActive: themePrimitives.white,
     sliderHandleInnerFillDisabled: themePrimitives.mono400,
     sliderHandleInnerFillSelectedHover: themePrimitives.primary,
     sliderHandleInnerFillSelectedActive: themePrimitives.primary500,
-    sliderBorder: themePrimitives.mono500,
-    sliderBorderHover: themePrimitives.primary,
-    sliderBorderDisabled: themePrimitives.mono600,
     // Inputs
     inputBorder: themePrimitives.mono300,
     inputFill: themePrimitives.mono300,
@@ -179,16 +150,10 @@ export default (function () {
     modalCloseColor: themePrimitives.mono1000,
     modalCloseColorHover: themePrimitives.mono800,
     modalCloseColorFocus: themePrimitives.mono800,
-    // Pagination
-    paginationTriangleDown: themePrimitives.mono800,
-    // Header navigation
-    headerNavigationFill: 'transparent',
     // Tab
     tabBarFill: themePrimitives.mono200,
     tabColor: themePrimitives.mono800,
     // Notification
-    notificationPrimaryBackground: themePrimitives.primary50,
-    notificationPrimaryText: themePrimitives.primaryA,
     notificationInfoBackground: themePrimitives.accent50,
     notificationInfoText: themePrimitives.primaryA,
     notificationPositiveBackground: themePrimitives.positive50,
@@ -200,7 +165,6 @@ export default (function () {
     // Tag
     // Custom ramps
     tagFontDisabledRampUnit: '100',
-    tagOutlinedDisabledRampUnit: '200',
     tagSolidFontRampUnit: '0',
     tagSolidRampUnit: '400',
     tagOutlinedFontRampUnit: '400',
@@ -213,7 +177,6 @@ export default (function () {
     tagLightRampUnit: '50',
     tagLightHoverRampUnit: '100',
     tagLightActiveRampUnit: '100',
-    tagLightDisabledRampUnit: '50',
     tagLightFontRampUnit: '500',
     tagLightFontHoverRampUnit: '500',
     tagOutlinedHoverRampUnit: '50',
@@ -355,7 +318,6 @@ export default (function () {
     tableFilterFooterBackground: themePrimitives.mono200,
     // Toast
     toastText: themePrimitives.white,
-    toastPrimaryBackground: themePrimitives.primary400,
     toastPrimaryText: themePrimitives.white,
     toastInfoBackground: themePrimitives.accent400,
     toastInfoText: themePrimitives.white,

package/esm/themes/light-theme/color-tokens.js

@@ -73,8 +73,6 @@ var lightColorTokens = {
   mono900: colors.gray700,
   mono1000: colors.black,
   // Rating Palette,
-  rating200: colors.yellow200,
-  rating400: colors.yellow400,
   ratingInactiveFill: colors.gray100,
   ratingStroke: colors.gray300
 };

package/esm/themes/light-theme/create-light-theme.js

@@ -20,7 +20,6 @@ import breakpoints from '../shared/breakpoints.js';
 import deepMerge from '../../utils/deep-merge.js';
 import defaultColorTokens from './color-tokens.js';
 import getComponentColorTokens from './color-component-tokens.js';
-import getDeprecatedSemanticColorTokens from './color-deprecated-semantic-tokens.js';
 import getSemanticColorTokens from './color-semantic-tokens.js';
 import getTypography from '../shared/typography.js';
 import grid from '../shared/grid.js';
@@ -43,7 +42,7 @@ export default function createLightTheme() {
     animation: animation,
     borders: borders,
     breakpoints: breakpoints,
-    colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorTokens), getComponentColorTokens(colorTokens)), getDeprecatedSemanticColorTokens(colorTokens)), getSemanticColorTokens(colorTokens)),
+    colors: _objectSpread(_objectSpread(_objectSpread({}, colorTokens), getComponentColorTokens(colorTokens)), getSemanticColorTokens(colorTokens)),
     direction: 'auto',
     grid: grid,
     lighting: lighting,

package/esm/themes/light-theme/light-theme.js

@@ -13,7 +13,6 @@ LICENSE file in the root directory of this source tree.
 import colorTokens from './color-tokens.js';
 import getSemanticColorTokens from './color-semantic-tokens.js';
 import getComponentColorTokens from './color-component-tokens.js';
-import getDeprecatedSemanticColorTokens from './color-deprecated-semantic-tokens.js';
 import borders from '../shared/borders.js';
 import lighting from '../shared/lighting.js';
 import getTypography from '../shared/typography.js';
@@ -24,7 +23,7 @@ import mediaQuery from '../shared/media-query.js';
 import sizing from '../shared/sizing.js';
 export var LightTheme = {
   name: 'light-theme',
-  colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorTokens), getComponentColorTokens()), getDeprecatedSemanticColorTokens()), getSemanticColorTokens()),
+  colors: _objectSpread(_objectSpread(_objectSpread({}, colorTokens), getComponentColorTokens()), getSemanticColorTokens()),
   animation: animation,
   breakpoints: breakpoints,
   borders: borders,

package/esm/timepicker/timepicker.js

@@ -377,14 +377,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       }, selectProps.overrides);
       var value = this.props.value && adapter.isValid(this.props.value) ? this.buildSelectedOption(this.props.value, this.props.format) : this.state.value;
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
-        var ariaLabel;
-
-        if (locale.datepicker.timePickerAriaLabel) {
-          ariaLabel = locale.datepicker.timePickerAriaLabel;
-        } else {
-          ariaLabel = format === '12' ? locale.datepicker.timePickerAriaLabel12Hour : locale.datepicker.timePickerAriaLabel24Hour;
-        }
-
+        var ariaLabel = format === '12' ? locale.datepicker.timePickerAriaLabel12Hour : locale.datepicker.timePickerAriaLabel24Hour;
         return /*#__PURE__*/React.createElement(OverriddenSelect, _extends({
           "aria-label": ariaLabel,
           disabled: _this2.props.disabled,

package/esm/typography/index.js

@@ -531,38 +531,4 @@ export var MonoParagraphXSmall = /*#__PURE__*/React.forwardRef(function (props,
     }))
   );
 });
-MonoParagraphXSmall.displayName = 'MonoParagraphXSmall'; // TODO(v11): remove
-// Aliases for backwards compatibility
-
-export var Display = DisplayLarge;
-export var Display1 = DisplayLarge;
-export var Display2 = DisplayMedium;
-export var Display3 = DisplaySmall;
-export var Display4 = DisplayXSmall;
-export var H1 = HeadingXXLarge;
-export var H2 = HeadingXLarge;
-export var H3 = HeadingLarge;
-export var H4 = HeadingMedium;
-export var H5 = HeadingSmall;
-export var H6 = HeadingXSmall;
-export var Paragraph1 = ParagraphLarge;
-export var Paragraph2 = ParagraphMedium;
-export var Paragraph3 = ParagraphSmall;
-export var Paragraph4 = ParagraphXSmall;
-export var Label1 = LabelLarge;
-export var Label2 = LabelMedium;
-export var Label3 = LabelSmall;
-export var Label4 = LabelXSmall;
-export var Caption1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(Paragraph4, _extends({}, props, {
-    color: props.color || 'contentSecondary',
-    ref: ref
-  }));
-});
-Caption1.displayName = 'Caption1';
-export var Caption2 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(Label4, _extends({}, props, {
-    color: props.color || 'contentSecondary'
-  }));
-});
-Caption2.displayName = 'Caption2';
+MonoParagraphXSmall.displayName = 'MonoParagraphXSmall';

package/file-uploader/file-uploader.js

@@ -105,7 +105,7 @@ function FileUploader(props) {
       ButtonComponent = _getOverrides14[0],
       buttonProps = _getOverrides14[1];
 
-  var _getOverrides15 = (0, _overrides.getOverrides)(overrides.Spinner, _index5.StyledSpinnerNext),
+  var _getOverrides15 = (0, _overrides.getOverrides)(overrides.Spinner, _index5.Spinner),
       _getOverrides16 = _slicedToArray(_getOverrides15, 2),
       SpinnerComponent = _getOverrides16[0],
       spinnerProps = _getOverrides16[1];
@@ -170,7 +170,7 @@ function FileUploader(props) {
           marginBottom: theme.sizing.scale300
         }
       }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(ButtonComponent, {
-        kind: _index3.KIND.minimal,
+        kind: _index3.KIND.tertiary,
         onClick: function onClick() {
           props.onRetry && props.onRetry();
         },
@@ -178,7 +178,7 @@ function FileUploader(props) {
         "aria-describedby": props['aria-describedby'],
         "aria-errormessage": props.errorMessage
       }, locale.fileuploader.retry) : /*#__PURE__*/React.createElement(ButtonComponent, {
-        kind: _index3.KIND.minimal,
+        kind: _index3.KIND.tertiary,
         onClick: function onClick() {
           props.onCancel && props.onCancel();
         },

package/file-uploader/file-uploader.js.flow

@@ -14,7 +14,7 @@ import { useStyletron } from '../styles/index.js';
 import { Button, KIND, SHAPE, SIZE as BUTTON_SIZE } from '../button/index.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { ProgressBar } from '../progress-bar/index.js';
-import { StyledSpinnerNext, SIZE as SPINNER_SIZE } from '../spinner/index.js';
+import { Spinner, SIZE as SPINNER_SIZE } from '../spinner/index.js';
 
 import {
   StyledRoot,
@@ -58,7 +58,7 @@ function FileUploader(props: PropsT) {
   const [HiddenInput, hiddenInputProps] = getOverrides(overrides.HiddenInput, StyledHiddenInput);
   const [ButtonComponent, buttonProps] = getOverrides(overrides.ButtonComponent, Button);
 
-  const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, StyledSpinnerNext);
+  const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, Spinner);
 
   const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
 
@@ -160,7 +160,7 @@ function FileUploader(props: PropsT) {
                       )}
                       {props.errorMessage ? (
                         <ButtonComponent
-                          kind={KIND.minimal}
+                          kind={KIND.tertiary}
                           onClick={() => {
                             props.onRetry && props.onRetry();
                           }}
@@ -172,7 +172,7 @@ function FileUploader(props: PropsT) {
                         </ButtonComponent>
                       ) : (
                         <ButtonComponent
-                          kind={KIND.minimal}
+                          kind={KIND.tertiary}
                           onClick={() => {
                             props.onCancel && props.onCancel();
                           }}

package/form-control/index.d.ts

@@ -32,3 +32,12 @@ export class FormControl extends React.Component<
   FormControlProps,
   FormControlState
 > {}
+
+export interface FormControlChildProps {
+  'aria-describedby': string | null,
+  'aria-errormessage': string | null,
+  key: React.Key,
+  disabled: boolean,
+  error: boolean,
+  positive: boolean
+}

package/form-control/styled-components.js

@@ -19,7 +19,6 @@ var Label = (0, _index.styled)('label', function (props) {
       colors = _props$$theme.colors,
       typography = _props$$theme.typography;
   return _objectSpread(_objectSpread({}, typography.font250), {}, {
-    fontWeight: 500,
     width: '100%',
     color: $disabled ? colors.contentSecondary : colors.contentPrimary,
     display: 'block',

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

@@ -16,7 +16,6 @@ export const Label = styled<StylePropsT>('label', (props) => {
   } = props;
   return {
     ...typography.font250,
-    fontWeight: 500,
     width: '100%',
     color: $disabled ? colors.contentSecondary : colors.contentPrimary,
     display: 'block',

package/header-navigation/styled-components.js

@@ -19,15 +19,15 @@ var Root = (0, _index.styled)('nav', function (props) {
   var $theme = props.$theme;
   var scale500 = $theme.sizing.scale500,
       font300 = $theme.typography.font300,
-      border = $theme.colors.border;
+      borderOpaque = $theme.colors.borderOpaque;
   return _objectSpread(_objectSpread({}, font300), {}, {
     display: 'flex',
     paddingBottom: scale500,
     paddingTop: scale500,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: "".concat(border),
-    backgroundColor: $theme.colors.headerNavigationFill
+    borderBottomColor: "".concat(borderOpaque),
+    backgroundColor: $theme.colors.backgroundPrimary
   });
 });
 exports.Root = Root;

package/header-navigation/styled-components.js.flow

@@ -13,7 +13,7 @@ export const Root = styled<{}>('nav', (props) => {
   const {
     sizing: { scale500 },
     typography: { font300 },
-    colors: { border },
+    colors: { borderOpaque },
   } = $theme;
   return {
     ...font300,
@@ -22,8 +22,8 @@ export const Root = styled<{}>('nav', (props) => {
     paddingTop: scale500,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: `${border}`,
-    backgroundColor: $theme.colors.headerNavigationFill,
+    borderBottomColor: `${borderOpaque}`,
+    backgroundColor: $theme.colors.backgroundPrimary,
   };
 });
 

package/helpers/overrides.js

@@ -101,8 +101,7 @@ function toObjectOverride(override) {
 /**
  * Get a convenient override array that will always have [component, props]
  */
-
-/* flowlint unclear-type:off */
+// flowlint unclear-type:off
 
 
 function getOverrides(override, defaultComponent) {

package/helpers/overrides.js.flow

@@ -97,7 +97,7 @@ export function toObjectOverride<T>(override: OverrideT): OverrideObjectT {
 /**
  * Get a convenient override array that will always have [component, props]
  */
-/* flowlint unclear-type:off */
+// flowlint unclear-type:off
 export function getOverrides<T>(
   override: Object,
   defaultComponent: React.ComponentType<any>

package/input/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface STATE_CHANGE_TYPE {
   change: 'change';
@@ -123,10 +123,7 @@ export class Input extends React.Component<InputProps, InternalState> {
   onBlur(e: React.FocusEvent<HTMLInputElement>): void;
 }
 
-export class BaseInput extends React.Component<
-  BaseInputProps<HTMLInputElement>,
-  InternalState
-> {
+export class BaseInput extends React.Component<BaseInputProps<HTMLInputElement>, InternalState> {
   onFocus(e: React.FocusEvent<HTMLInputElement>): void;
   onBlur(e: React.FocusEvent<HTMLInputElement>): void;
 }
@@ -144,13 +141,12 @@ export interface StatefulContainerProps {
   stateReducer?: (
     stateType: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE],
     nextState: State,
-    currentState: State,
+    currentState: State
   ) => State;
   onChange?: React.FormEventHandler<HTMLInputElement>;
 }
 
-export type StatefulInputProps = InputProps &
-  StatefulContainerProps & {children?: never};
+export type StatefulInputProps = InputProps & StatefulContainerProps & { children?: never };
 
 export const StatefulInput: React.FC<StatefulInputProps>;
 export const StatefulContainer: React.FC<StatefulContainerProps>;

package/input/styled-components.js

@@ -129,10 +129,10 @@ function getRootColors($disabled, $isFocused, $error) {
 
   if ($isFocused) {
     return {
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive
     };
   }

package/input/styled-components.js.flow

@@ -164,10 +164,10 @@ function getRootColors(
 
   if ($isFocused) {
     return {
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive,
     };
   }

package/layer/layer.js

@@ -207,10 +207,10 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
       }, children) : children;
 
       if (typeof document !== 'undefined') {
-        var portalContainer = mountNode || container;
-
-        if (portalContainer) {
-          return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, portalContainer);
+        if (mountNode) {
+          return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, mountNode);
+        } else if (container) {
+          return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, container);
         }
 
         return null;

package/layer/layer.js.flow

@@ -124,9 +124,10 @@ class LayerComponent extends React.Component<LayerComponentPropsT, LayerStateT>
     // Only adding an additional wrapper when a layer has z-index to be set
     const childrenToRender = zIndex ? <Container $zIndex={zIndex}>{children}</Container> : children;
     if (__BROWSER__) {
-      const portalContainer = mountNode || container;
-      if (portalContainer) {
-        return ReactDOM.createPortal(childrenToRender, portalContainer);
+      if (mountNode) {
+        return ReactDOM.createPortal(childrenToRender, mountNode);
+      } else if (container) {
+        return ReactDOM.createPortal(childrenToRender, container);
       }
       return null;
     }

package/list/list-item.js

@@ -78,7 +78,11 @@ var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: ref,
-    $shape: props.shape || _constants.SHAPE.DEFAULT
+    $shape: props.shape || _constants.SHAPE.DEFAULT,
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
+    id: props.id,
+    role: props.role
   }, rootProps), Artwork && /*#__PURE__*/_react.default.createElement(ArtworkContainer, _extends({
     $artworkSize: artworkSize,
     $sublist: Boolean(props.sublist)

package/list/list-item.js.flow

@@ -58,6 +58,10 @@ const ListItem = React.forwardRef<PropsT, HTMLLIElement>((props: PropsT, ref) =>
       // flowlint-next-line unclear-type:off
       ref={(ref: any)}
       $shape={props.shape || SHAPE.DEFAULT}
+      aria-label={props['aria-label']}
+      aria-selected={props['aria-selected']}
+      id={props.id}
+      role={props.role}
       {...rootProps}
     >
       {Artwork && (

package/list/menu-adapter.js

@@ -29,9 +29,13 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(_listItem.default, {
     ref: ref,
     sublist: props.sublist || props.$size === 'compact',
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
+    id: props.id,
+    role: props.role,
     overrides: (0, _overrides.mergeOverrides)({
       Root: {
         props: {

package/list/menu-adapter.js.flow

@@ -17,9 +17,13 @@ const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>((props, r
     <ListItem
       ref={ref}
       sublist={props.sublist || props.$size === 'compact'}
+      aria-label={props['aria-label']}
+      aria-selected={props['aria-selected']}
       artwork={props.artwork}
       artworkSize={props.artworkSize}
       endEnhancer={props.endEnhancer}
+      id={props.id}
+      role={props.role}
       overrides={mergeOverrides(
         {
           Root: {

package/list/types.js.flow

@@ -44,7 +44,11 @@ export type PropsT = {|
   shape?: ShapeT,
   children: React.Node,
   endEnhancer?: React.AbstractComponent<{}>,
+  'aria-label'?: string,
+  'aria-selected'?: boolean,
+  id?: String,
   overrides?: OverridesT,
+  role?: string,
   sublist?: boolean,
 |};
 

package/locale/index.js

@@ -31,13 +31,6 @@ exports.LocaleContext = LocaleContext;
 var LocaleProvider = function LocaleProvider(props) {
   var locale = props.locale,
       children = props.children;
-
-  if (process.env.NODE_ENV !== "production") {
-    if (locale.datepicker && locale.datepicker.timePickerAriaLabel) {
-      console.warn('`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead');
-    }
-  }
-
   return /*#__PURE__*/React.createElement(LocaleContext.Provider, {
     value: (0, _justExtend.default)({}, _en_US.default, locale)
   }, children);

package/locale/index.js.flow

@@ -15,13 +15,6 @@ export const LocaleContext: React.Context<LocaleT> = React.createContext(en_US);
 
 const LocaleProvider = (props: { locale: $Shape<LocaleT>, children: ?React.Node }) => {
   const { locale, children } = props;
-  if (__DEV__) {
-    if (locale.datepicker && locale.datepicker.timePickerAriaLabel) {
-      console.warn(
-        '`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead'
-      );
-    }
-  }
   return (
     <LocaleContext.Provider value={extend({}, en_US, locale)}>{children}</LocaleContext.Provider>
   );

package/locale.ts

@@ -29,7 +29,6 @@ interface DatepickerLocale {
   quickSelectPlaceholder: string;
   timeSelectEndLabel: string;
   timeSelectStartLabel: string;
-  timePickerAriaLabel?: string;
   timePickerAriaLabel12Hour: string;
   timePickerAriaLabel24Hour: string;
   timezonePickerAriaLabel: string;

package/menu/index.d.ts

@@ -146,9 +146,7 @@ export const OptionList: React.FC<OptionListProps>;
 export interface OptionProfileProps extends BaseMenuPropsT {
   item: any;
   getChildMenu?: (item: any) => React.ReactNode;
-  getProfileItemLabels: (
-    item: any,
-  ) => {
+  getProfileItemLabels: (item: any) => {
     title?: string;
     subtitle?: string;
     body?: string;

package/menu/stateful-container.js

@@ -156,7 +156,6 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         _this.typeAheadChars = '';
       }, 500);
       var nextIndex = prevIndex;
-      event.preventDefault();
 
       var list = _this.getItems();
 

package/menu/stateful-container.js.flow

@@ -210,7 +210,6 @@ class MenuStatefulContainerInner extends React.Component<
     }, 500);
 
     var nextIndex = prevIndex;
-    event.preventDefault();
     var list = this.getItems();
     if (list.length === 0 || !('label' in list[0])) return;
 

package/menu/styled-components.js

@@ -106,7 +106,7 @@ var StyledOptgroupHeader = (0, _index.styled)('li', function (props) {
   var paddingX = props.$theme.sizing.scale300;
   var paddingY = props.$theme.sizing.scale200;
   return _objectSpread(_objectSpread({}, props.$theme.typography.font250), {}, {
-    color: props.$theme.colors.colorPrimary,
+    color: props.$theme.colors.contentPrimary,
     paddingTop: paddingY,
     paddingBottom: paddingY,
     paddingRight: paddingX,

package/menu/styled-components.js.flow

@@ -92,7 +92,7 @@ export const StyledOptgroupHeader = styled<{}>('li', (props) => {
   const paddingY = props.$theme.sizing.scale200;
   return {
     ...props.$theme.typography.font250,
-    color: props.$theme.colors.colorPrimary,
+    color: props.$theme.colors.contentPrimary,
     paddingTop: paddingY,
     paddingBottom: paddingY,
     paddingRight: paddingX,