baseui 10.3.0 → 10.7.0

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]}

package/data-table/data-table.js

@@ -445,11 +445,12 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
     viewState = EMPTY;
   }
 
+  var highlightedRow = ctx.rows[ctx.rowHighlightIndex - 1];
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-baseweb": "data-table",
     style: props.style
-  }, /*#__PURE__*/React.createElement(Headers, null), viewState === LOADING && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.loadingMessage), viewState === EMPTY && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.emptyMessage), viewState === RENDERING && props.children, ctx.rowActions && Boolean(ctx.rowActions.length) && ctx.rowHighlightIndex > 0 && Boolean(ctx.rows[ctx.rowHighlightIndex - 1]) && !ctx.isScrollingX && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Headers, null), viewState === LOADING && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.loadingMessage), viewState === EMPTY && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.emptyMessage), viewState === RENDERING && props.children, ctx.rowActions && Boolean(ctx.rowActions.length) && ctx.rowHighlightIndex > 0 && Boolean(highlightedRow) && !ctx.isScrollingX && /*#__PURE__*/React.createElement("div", {
     style: {
       alignItems: 'center',
       backgroundColor: theme.colors.backgroundTertiary,
@@ -463,7 +464,12 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: theme.direction === 'rtl' ? 0 : 'initial',
       top: (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT
     }
-  }, ctx.rowActions.map(function (rowAction) {
+  }, (typeof ctx.rowActions === 'function' ? ctx.rowActions(highlightedRow) : ctx.rowActions).map(function (rowAction) {
+    if (rowAction.renderButton) {
+      var RowActionButton = rowAction.renderButton;
+      return /*#__PURE__*/React.createElement(RowActionButton, null);
+    }
+
     var RowActionIcon = rowAction.renderIcon;
     return /*#__PURE__*/React.createElement(_index.Button, {
       alt: rowAction.label,
@@ -480,7 +486,11 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       overrides: {
         BaseButton: {
           style: {
-            marginLeft: theme.sizing.scale300
+            marginLeft: theme.sizing.scale300,
+            paddingTop: theme.sizing.scale100,
+            paddingRight: theme.sizing.scale100,
+            paddingBottom: theme.sizing.scale100,
+            paddingLeft: theme.sizing.scale100
           }
         }
       }

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

@@ -53,7 +53,7 @@ type HeaderContextT = {|
   onSelectNone: () => void,
   onSort: number => void,
   resizableColumnWidths: boolean,
-  rowActions: RowActionT[],
+  rowActions: RowActionT[] | (RowT => RowActionT[]),
   rowHeight: number,
   rowHighlightIndex: number,
   rows: RowT[],
@@ -554,6 +554,8 @@ const InnerTableElement = React.forwardRef<
     viewState = EMPTY;
   }
 
+  const highlightedRow = ctx.rows[ctx.rowHighlightIndex - 1];
+
   return (
     <div ref={ref} data-baseweb="data-table" style={props.style}>
       <Headers />
@@ -571,7 +573,7 @@ const InnerTableElement = React.forwardRef<
       {ctx.rowActions &&
         Boolean(ctx.rowActions.length) &&
         ctx.rowHighlightIndex > 0 &&
-        Boolean(ctx.rows[ctx.rowHighlightIndex - 1]) &&
+        Boolean(highlightedRow) &&
         !ctx.isScrollingX && (
           <div
             style={{
@@ -589,7 +591,15 @@ const InnerTableElement = React.forwardRef<
                 (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT,
             }}
           >
-            {ctx.rowActions.map(rowAction => {
+            {(typeof ctx.rowActions === 'function'
+              ? ctx.rowActions(highlightedRow)
+              : ctx.rowActions
+            ).map(rowAction => {
+              if (rowAction.renderButton) {
+                const RowActionButton = rowAction.renderButton;
+                return <RowActionButton />;
+              }
+
               const RowActionIcon = rowAction.renderIcon;
               return (
                 <Button
@@ -606,7 +616,13 @@ const InnerTableElement = React.forwardRef<
                   shape={BUTTON_SHAPES.round}
                   overrides={{
                     BaseButton: {
-                      style: {marginLeft: theme.sizing.scale300},
+                      style: {
+                        marginLeft: theme.sizing.scale300,
+                        paddingTop: theme.sizing.scale100,
+                        paddingRight: theme.sizing.scale100,
+                        paddingBottom: theme.sizing.scale100,
+                        paddingLeft: theme.sizing.scale100,
+                      },
                     },
                   }}
                 >

package/data-table/types.js.flow

@@ -87,6 +87,7 @@ export type RowActionT = {|
   label: string,
   onClick: ({event: SyntheticEvent<HTMLButtonElement>, row: RowT}) => mixed,
   renderIcon: React.AbstractComponent<{|size: number|}>,
+  renderButton?: React.AbstractComponent<{||}>,
 |};
 
 export type StatefulDataTablePropsT = {|
@@ -107,7 +108,7 @@ export type StatefulDataTablePropsT = {|
   onSelectionChange?: (RowT[]) => mixed,
   resizableColumnWidths?: boolean,
   rows: RowT[],
-  rowActions?: RowActionT[],
+  rowActions?: RowActionT[] | (RowT => RowActionT[]),
   rowHeight?: number,
   rowHighlightIndex?: number,
   searchable?: boolean,