baseui 10.4.0 → 10.7.1

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

@@ -153,6 +153,7 @@ function UserMenuComponent(props) {
         }
       }, userMenuProps));
     },
+    autoFocus: false,
     dismissOnEsc: true,
     dismissOnClickOutside: true,
     onOpen: function onOpen() {

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

@@ -120,6 +120,7 @@ export default function UserMenuComponent(props: {|
           {...userMenuProps}
         />
       )}
+      autoFocus={false}
       dismissOnEsc={true}
       dismissOnClickOutside={true}
       onOpen={() => setIsOpen(true)}

package/button/styled-components.js

@@ -48,7 +48,7 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor: $theme.colors.buttonDisabledFill,
+      backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
       color: $theme.colors.buttonDisabledText
     },
     marginLeft: 0,

package/button/styled-components.js.flow

@@ -46,7 +46,10 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor: $theme.colors.buttonDisabledFill,
+      backgroundColor:
+        $kind === KIND.minimal || $kind === KIND.tertiary
+          ? 'transparent'
+          : $theme.colors.buttonDisabledFill,
       color: $theme.colors.buttonDisabledText,
     },
     marginLeft: 0,

package/card/styled-components.js

@@ -98,7 +98,6 @@ var Title = (0, _index.styled)('h1', function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.HeadingSmall), {}, {
     color: $theme.colors.contentPrimary,
-    fontWeight: 500,
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,

package/card/styled-components.js.flow

@@ -72,7 +72,6 @@ export const Thumbnail = styled<{}>('img', ({$theme}) => ({
 export const Title = styled<{}>('h1', ({$theme}) => ({
   ...$theme.typography.HeadingSmall,
   color: $theme.colors.contentPrimary,
-  fontWeight: 500,
   marginLeft: 0,
   marginTop: 0,
   marginRight: 0,

package/combobox/combobox.js

@@ -306,7 +306,11 @@ function Combobox(props) {
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
   , _extends({
     ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+  // Select Component does the same thing
+  , _extends({
+    autoFocus: false,
     isOpen: isOpen,
     overrides: popoverOverrides,
     placement: _index2.PLACEMENT.bottomLeft,

package/combobox/combobox.js.flow

@@ -258,6 +258,10 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
       {...rootProps}
     >
       <OverriddenPopover
+        // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+        // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+        // Select Component does the same thing
+        autoFocus={false}
         isOpen={isOpen}
         overrides={popoverOverrides}
         placement={PLACEMENT.bottomLeft}

package/combobox/index.d.ts

@@ -17,11 +17,14 @@ export interface ComboboxOverrides {
   ListItem?: Override<any>;
 }
 
-export type PropsT<OptionT = unknown> = {
+export type PropsT<OptionT = any> = {
   autocomplete?: boolean;
   disabled?: boolean;
-  mapOptionToNode?: ({isSelected: boolean, option: OptionT}) => React.ReactNode;
-  mapOptionToString: (OptionT) => string;
+  mapOptionToNode?: (option: {
+    isSelected: boolean;
+    option: OptionT;
+  }) => React.ReactNode;
+  mapOptionToString: (option: OptionT) => string;
   id?: string;
   name?: string;
   inputRef?: React.Ref<HTMLInputElement>;

package/data-table/column-datetime.js

@@ -86,6 +86,7 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var DATE_FORMAT = 'MM-dd-yyyy';
+var MASK = '99-99-9999 - 99-99-9999';
 var TIME_FORMAT = 'HH:mm ss:SS';
 var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT);
 
@@ -461,6 +462,7 @@ function DatetimeFilter(props) {
       }
     },
     formatString: DATE_FORMAT,
+    mask: MASK,
     placeholder: "MM-DD-YYYY - MM-DD-YYYY",
     minDate: datesSorted[0],
     maxDate: datesSorted[datesSorted.length - 1],

package/data-table/column-datetime.js.flow

@@ -68,6 +68,7 @@ type FilterParametersT = {|
 type DatetimeColumnT = ColumnT<Date, FilterParametersT>;
 
 const DATE_FORMAT = 'MM-dd-yyyy';
+const MASK = '99-99-9999 - 99-99-9999';
 const TIME_FORMAT = 'HH:mm ss:SS';
 const FORMAT_STRING = `${DATE_FORMAT} ${TIME_FORMAT}`;
 
@@ -415,6 +416,7 @@ function DatetimeFilter(props) {
                     }
                   }}
                   formatString={DATE_FORMAT}
+                  mask={MASK}
                   placeholder="MM-DD-YYYY - MM-DD-YYYY"
                   minDate={datesSorted[0]}
                   maxDate={datesSorted[datesSorted.length - 1]}