baseui 10.2.1 → 10.6.0

package/es/select/styled-components.js

@@ -375,31 +375,61 @@ function getSvgStyles({
 export const StyledSelectArrow = styled('svg', props => {
   const {
     $theme,
-    $disabled
+    $disabled,
+    $size
   } = props;
   const {
     colors
   } = $theme;
+  const sizes = {
+    [SIZE.mini]: 16,
+    [SIZE.compact]: 16,
+    [SIZE.default]: 20,
+    [SIZE.large]: 24
+  };
+  let size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return { ...getSvgStyles({
       $theme
     }),
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: `${size}px`,
+    width: `${size}px`
   };
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
 export const StyledClearIcon = styled('svg', props => {
   const {
-    $theme
+    $theme,
+    $size
   } = props;
   const {
     colors
   } = $theme;
+  const sizes = {
+    [SIZE.mini]: 15,
+    [SIZE.compact]: 15,
+    [SIZE.default]: 18,
+    [SIZE.large]: 22
+  };
+  let size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return { ...getSvgStyles({
       $theme
     }),
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: `${size}px`,
+    width: `${size}px`
   };
 });
 StyledClearIcon.displayName = "StyledClearIcon";

package/es/snackbar/snackbar-context.js

@@ -31,6 +31,15 @@ export function useSnackbar() {
     dequeue: context.dequeue
   };
 }
+
+function usePrevious(value) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
 export default function SnackbarProvider({
   children,
   overrides = {},
@@ -46,10 +55,6 @@ export default function SnackbarProvider({
 
   function enqueue(elementProps, duration = defaultDuration) {
     setSnackbars(prev => {
-      if (prev.length === 0) {
-        enter(duration);
-      }
-
       return [...prev, {
         elementProps,
         duration
@@ -57,6 +62,13 @@ export default function SnackbarProvider({
     });
   }
 
+  const prevSnackbars = usePrevious(snackbars) || [];
+  React.useEffect(() => {
+    if (prevSnackbars.length === 0 && snackbars.length >= 1) {
+      enter(snackbars[0].duration);
+    }
+  }, [snackbars, prevSnackbars]);
+
   function dequeue() {
     setContainerHeight(0);
     setSnackbars(prev => {

package/es/spinner/styled-components.js

@@ -44,7 +44,7 @@ export const StyledActivePath = styled('path', props => ({
 })); // TODO(v11): Replace Spinner with SpinnerNext
 
 StyledActivePath.displayName = "StyledActivePath";
-export const StyledSpinnerNext = styled('div', ({
+export const StyledSpinnerNext = styled('i', ({
   $theme,
   $size = SIZE.medium
 }) => {

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

@@ -67,7 +67,8 @@ StyledTableHeadRow.displayName = "StyledTableHeadRow";
 export const StyledTableHeadCell = styled('th', ({
   $theme,
   $size,
-  $divider
+  $divider,
+  $isNumeric
 }) => {
   const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   const borderVertical = $divider === DIVIDER.grid || $divider === DIVIDER.vertical;
@@ -81,7 +82,7 @@ export const StyledTableHeadCell = styled('th', ({
     paddingLeft: padding,
     backgroundColor: $theme.colors.tableHeadBackgroundColor,
     color: $theme.colors.contentPrimary,
-    textAlign: $theme.direction === 'rtl' ? 'right' : 'left',
+    textAlign: $theme.direction === 'rtl' || $isNumeric ? 'right' : 'left',
     verticalAlign: 'top',
     whiteSpace: 'nowrap',
     zIndex: 1,
@@ -170,7 +171,8 @@ export const StyledTableBodyCell = styled('td', ({
   $size,
   $divider,
   $isNumeric,
-  $isLastRow
+  $isLastRow,
+  $isSortable
 }) => {
   const borderDir = $theme.direction === 'rtl' ? 'Left' : 'Right';
   const borderVertical = $divider === DIVIDER.vertical || $divider === DIVIDER.grid;
@@ -178,7 +180,7 @@ export const StyledTableBodyCell = styled('td', ({
   const padding = sizeToCellPadding($theme, $size);
   return { ...$theme.typography.font200,
     paddingTop: padding,
-    paddingRight: padding,
+    paddingRight: !$isSortable ? padding : $theme.sizing.scale1000,
     paddingBottom: padding,
     paddingLeft: padding,
     color: $theme.colors.contentPrimary,

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

@@ -79,6 +79,7 @@ export default class TableBuilder extends React.Component {
           $col: col,
           $colIndex: colIndex,
           $divider: divider,
+          $isNumeric: col.numeric,
           $size: size
         }, tableHeadCellProps, colTableHeadCellProps), col.header);
       }
@@ -117,6 +118,7 @@ export default class TableBuilder extends React.Component {
         $col: col,
         $colIndex: colIndex,
         $divider: divider,
+        $isNumeric: col.numeric,
         role: "button",
         tabIndex: "0",
         "aria-label": `${col.tableHeadAriaLabel || col.header}, ${sortLabel}`,
@@ -143,6 +145,7 @@ export default class TableBuilder extends React.Component {
         $rowIndex: rowIndex,
         $isNumeric: col.numeric,
         $isLastRow: rowIndex === lastRowindex,
+        $isSortable: col.sortable,
         $size: size
       }, tableBodyCellProps, colTableBodyCellProps), col.children(row, rowIndex));
     }

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

@@ -91,7 +91,7 @@ export default ((themePrimitives = colorTokens) => ({
   linkActive: themePrimitives.primary300,
   // List
   listHeaderFill: themePrimitives.mono600,
-  listBodyFill: themePrimitives.mono700,
+  listBodyFill: themePrimitives.mono800,
   listIconFill: themePrimitives.mono100,
   listBorder: themePrimitives.mono500,
   // ProgressSteps

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'),
@@ -69,7 +69,8 @@ foundation = colorTokens) => {
     rewardsTier1: colors.blue400,
     rewardsTier2: colors.yellow400,
     rewardsTier3: colors.platinum400,
-    rewardsTier4: colors.gray200
+    rewardsTier4: colors.gray200,
+    membership: colors.yellow600
   };
   return { ...core,
     ...coreExtensions

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

@@ -20,32 +20,32 @@ export default ((themePrimitives = colorTokens) => ({
   buttonPrimaryActive: themePrimitives.primary600,
   buttonPrimarySelectedFill: themePrimitives.primary600,
   buttonPrimarySelectedText: themePrimitives.white,
-  buttonPrimarySpinnerForeground: themePrimitives.primary50,
-  buttonPrimarySpinnerBackground: themePrimitives.primary500,
+  buttonPrimarySpinnerForeground: themePrimitives.accent,
+  buttonPrimarySpinnerBackground: themePrimitives.primaryB,
   buttonSecondaryFill: themePrimitives.primary100,
   buttonSecondaryText: themePrimitives.primary,
   buttonSecondaryHover: themePrimitives.primary200,
   buttonSecondaryActive: themePrimitives.primary300,
   buttonSecondarySelectedFill: themePrimitives.primary300,
   buttonSecondarySelectedText: themePrimitives.primary,
-  buttonSecondarySpinnerForeground: themePrimitives.primary700,
-  buttonSecondarySpinnerBackground: themePrimitives.primary300,
+  buttonSecondarySpinnerForeground: themePrimitives.accent,
+  buttonSecondarySpinnerBackground: themePrimitives.primaryB,
   buttonTertiaryFill: 'transparent',
   buttonTertiaryText: themePrimitives.primary,
   buttonTertiaryHover: themePrimitives.primary50,
   buttonTertiaryActive: themePrimitives.primary100,
   buttonTertiarySelectedFill: themePrimitives.primary100,
   buttonTertiarySelectedText: themePrimitives.primary,
-  buttonTertiarySpinnerForeground: themePrimitives.primary700,
-  buttonTertiarySpinnerBackground: themePrimitives.primary300,
+  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.primary700,
-  buttonMinimalSpinnerBackground: themePrimitives.primary300,
+  buttonMinimalSpinnerForeground: themePrimitives.accent,
+  buttonMinimalSpinnerBackground: themePrimitives.primary100,
   buttonDisabledFill: themePrimitives.mono200,
   buttonDisabledText: themePrimitives.mono600,
   buttonDisabledSpinnerForeground: themePrimitives.mono600,
@@ -91,7 +91,7 @@ export default ((themePrimitives = colorTokens) => ({
   linkActive: themePrimitives.primary500,
   // List
   listHeaderFill: themePrimitives.white,
-  listBodyFill: themePrimitives.mono200,
+  listBodyFill: themePrimitives.white,
   listIconFill: themePrimitives.mono500,
   listBorder: themePrimitives.mono500,
   // ProgressSteps

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

@@ -52,7 +52,7 @@ foundation = colorTokens) => {
     contentOnColor: colors.white,
     contentOnColorInverse: colors.black,
     contentNegative: foundation.negative,
-    contentWarning: colors.yellow700,
+    contentWarning: colors.yellow600,
     contentPositive: colors.green400,
     // Border
     borderStateDisabled: colors.gray50,
@@ -69,7 +69,8 @@ foundation = colorTokens) => {
     rewardsTier1: colors.blue400,
     rewardsTier2: colors.yellow400,
     rewardsTier3: colors.platinum400,
-    rewardsTier4: colors.black
+    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,7 +48,7 @@ const colors = {
   yellow300: '#FFCF70',
   yellow400: '#FFC043',
   yellow500: '#BC8B2C',
-  yellow600: '#997328',
+  yellow600: '#996F00',
   yellow700: '#674D1B',
   green50: '#E6F2ED',
   green100: '#ADDEC9',

package/es/tooltip/styled-components.js

@@ -21,6 +21,10 @@ import { getEndPosition } from '../popover/utils.js';
  */
 export const Body = styled('div', props => ({ ...getBodyStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   boxShadow: props.$theme.lighting.shadow400,
   color: props.$theme.colors.tooltipText,
   // Reset transition property to opacity only, and static transform
@@ -30,6 +34,10 @@ export const Body = styled('div', props => ({ ...getBodyStyles(props),
 Body.displayName = "Body";
 export const Inner = styled('div', props => ({ ...getInnerStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
+  borderTopLeftRadius: props.$theme.borders.radius300,
+  borderTopRightRadius: props.$theme.borders.radius300,
+  borderBottomRightRadius: props.$theme.borders.radius300,
+  borderBottomLeftRadius: props.$theme.borders.radius300,
   paddingTop: props.$theme.sizing.scale300,
   paddingBottom: props.$theme.sizing.scale300,
   paddingLeft: props.$theme.sizing.scale600,

package/esm/button/styled-components.js

@@ -45,7 +45,7 @@ export var BaseButton = styled('button', function (_ref) {
     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/esm/data-table/data-table.js

@@ -426,11 +426,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,
@@ -444,7 +445,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(Button, {
       alt: rowAction.label,
@@ -461,7 +467,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
           }
         }
       }