baseui 10.5.0 → 10.6.0

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/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/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/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,