baseui 10.12.1 → 11.0.2

package/select/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchIconContainer = exports.getLoadingIconStyles = exports.StyledClearIcon = exports.StyledSelectArrow = exports.StyledIconsContainer = exports.StyledInputSizer = exports.StyledInput = exports.StyledInputContainer = exports.StyledSingleValue = exports.StyledPlaceholder = exports.StyledValueContainer = exports.StyledControlContainer = exports.StyledRoot = exports.StyledOptionContent = exports.StyledDropdownListItem = exports.StyledDropdown = exports.StyledDropdownContainer = void 0;
+exports.StyledSearchIconContainer = exports.StyledLoadingIndicator = exports.StyledClearIcon = exports.StyledSelectArrow = exports.StyledIconsContainer = exports.StyledInputSizer = exports.StyledInput = exports.StyledInputContainer = exports.StyledSingleValue = exports.StyledPlaceholder = exports.StyledValueContainer = exports.StyledControlContainer = exports.StyledRoot = exports.StyledOptionContent = exports.StyledDropdownListItem = exports.StyledDropdown = exports.StyledDropdownContainer = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -11,6 +11,8 @@ var _constants = require("./constants.js");
 
 var _index2 = require("../menu/index.js");
 
+var _index3 = require("../spinner/index.js");
+
 var _util = require("../styles/util.js");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -111,10 +113,10 @@ function getControlContainerColors($disabled, $isFocused, $isPseudoFocused, $pos
   if ($isFocused || $isPseudoFocused) {
     return {
       color: colors.contentPrimary,
-      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
     };
   }
@@ -390,18 +392,22 @@ var StyledClearIcon = (0, _index.styled)('svg', function (props) {
 });
 exports.StyledClearIcon = StyledClearIcon;
 StyledClearIcon.displayName = "StyledClearIcon";
-
-var getLoadingIconStyles = function getLoadingIconStyles(props) {
-  var $theme = props.$theme;
-  var colors = $theme.colors;
-  return _objectSpread(_objectSpread({}, getSvgStyles({
-    $theme: $theme
-  })), {}, {
-    color: colors.contentPrimary
-  });
-};
-
-exports.getLoadingIconStyles = getLoadingIconStyles;
+var StyledLoadingIndicator = (0, _index.withStyle)(_index3.Spinner, function (_ref5) {
+  var $theme = _ref5.$theme;
+  return {
+    borderTopWidth: '2px',
+    borderRightWidth: '2px',
+    borderBottomWidth: '2px',
+    borderLeftWidth: '2px',
+    borderRightColor: $theme.colors.borderOpaque,
+    borderBottomColor: $theme.colors.borderOpaque,
+    borderLeftColor: $theme.colors.borderOpaque,
+    width: '16px',
+    height: '16px'
+  };
+});
+exports.StyledLoadingIndicator = StyledLoadingIndicator;
+StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
 var StyledSearchIconContainer = (0, _index.styled)('div', function (props) {
   var _objectSpread4;
 

package/select/styled-components.js.flow

@@ -6,13 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import { styled } from '../styles/index.js';
+import { styled, withStyle } from '../styles/index.js';
 import { TYPE, SIZE } from './constants.js';
 import { StyledList, StyledListItem } from '../menu/index.js';
+import { Spinner } from '../spinner/index.js';
 
 import type { SharedStylePropsArgT } from './types.js';
 import { ellipsisText } from '../styles/util.js';
-import type { ThemeT } from '../styles/types.js';
 
 function getFont(size = SIZE.default, typography) {
   return {
@@ -135,10 +135,10 @@ function getControlContainerColors(
   if ($isFocused || $isPseudoFocused) {
     return {
       color: colors.contentPrimary,
-      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,
     };
   }
@@ -424,14 +424,19 @@ export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', (props) => {
   };
 });
 
-export const getLoadingIconStyles = (props: { $theme: ThemeT }) => {
-  const { $theme } = props;
-  const { colors } = $theme;
+export const StyledLoadingIndicator = withStyle<typeof Spinner, {}>(Spinner, ({ $theme }) => {
   return {
-    ...getSvgStyles({ $theme }),
-    color: colors.contentPrimary,
+    borderTopWidth: '2px',
+    borderRightWidth: '2px',
+    borderBottomWidth: '2px',
+    borderLeftWidth: '2px',
+    borderRightColor: $theme.colors.borderOpaque,
+    borderBottomColor: $theme.colors.borderOpaque,
+    borderLeftColor: $theme.colors.borderOpaque,
+    width: '16px',
+    height: '16px',
   };
-};
+});
 
 export const StyledSearchIconContainer = styled<SharedStylePropsArgT>('div', (props) => {
   const { $disabled, $theme } = props;

package/snackbar/snackbar-context.js

@@ -155,7 +155,7 @@ function SnackbarProvider(_ref) {
     setTimeout(function () {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

package/snackbar/snackbar-context.js.flow

@@ -93,7 +93,7 @@ export default function SnackbarProvider({
     setTimeout(() => {
       setAnimating(false);
       display(duration);
-    }, 1000);
+    }, 0);
   }
 
   function exit() {

package/snackbar/styled-components.js

@@ -51,7 +51,7 @@ var StyledStartEnhancerContainer = (0, _index2.styled)('span', function (_ref2)
 });
 exports.StyledStartEnhancerContainer = StyledStartEnhancerContainer;
 StyledStartEnhancerContainer.displayName = "StyledStartEnhancerContainer";
-var StyledSpinner = (0, _index2.withStyle)(_index.StyledSpinnerNext, function (_ref4) {
+var StyledSpinner = (0, _index2.withStyle)(_index.Spinner, function (_ref4) {
   var $height = _ref4.$height,
       $width = _ref4.$width;
   return {

package/snackbar/styled-components.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import { StyledSpinnerNext } from '../spinner/index.js';
+import { Spinner } from '../spinner/index.js';
 import { styled, withStyle } from '../styles/index.js';
 
 import { PLACEMENT } from './constants.js';
@@ -43,16 +43,16 @@ export const StyledStartEnhancerContainer = styled<{}>('span', ({ $theme }) => {
   };
 });
 
-export const StyledSpinner = withStyle<
-  typeof StyledSpinnerNext,
-  { $height: number, $width: number }
->(StyledSpinnerNext, ({ $height, $width }) => {
-  return {
-    boxSizing: 'border-box',
-    height: `${$height}px`,
-    width: `${$width}px`,
-  };
-});
+export const StyledSpinner = withStyle<typeof Spinner, { $height: number, $width: number }>(
+  Spinner,
+  ({ $height, $width }) => {
+    return {
+      boxSizing: 'border-box',
+      height: `${$height}px`,
+      width: `${$width}px`,
+    };
+  }
+);
 
 export const StyledMessage = styled<{ $hasSuffix: boolean }>(
   'p',

package/spinner/index.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import {Sizing} from '../theme.ts';
 
 export enum SIZE {
   small = 'small',
@@ -8,22 +7,10 @@ export enum SIZE {
   large = 'large',
 }
 
-export interface SpinnerOverrides {
-  Svg?: Override<any>;
-  ActivePath?: Override<any>;
-  TrackPath?: Override<any>;
-}
-
 export interface SpinnerProps {
-  'aria-label'?: string;
-  size?: number | string;
-  color?: string;
-  title?: string;
-  overrides?: SpinnerOverrides;
+  $color?: string;
+  $borderWidth?: number | string | SIZE | Sizing;
+  $size?: number | string | SIZE | Sizing;
 }
-export class Spinner extends React.Component<SpinnerProps> {}
 
-export const StyledSvg: StyletronComponent<any>;
-export const StyledTrackPath: StyletronComponent<any>;
-export const StyledActivePath: StyletronComponent<any>;
-export const StyledSpinnerNext: StyletronComponent<any>;
+export const Spinner: StyletronComponent<SpinnerProps>;

package/spinner/index.js

@@ -3,70 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SpinnerDeterminate", {
-  enumerable: true,
-  get: function get() {
-    return _index.ProgressBarRounded;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateRoot", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedRoot;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateSvg", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedSvg;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateText", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedText;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateTrackBackground", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedTrackBackground;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateTrackForeground", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedTrackForeground;
-  }
-});
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
   get: function get() {
-    return _spinner.default;
-  }
-});
-Object.defineProperty(exports, "StyledSvg", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.Svg;
-  }
-});
-Object.defineProperty(exports, "StyledTrackPath", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.StyledTrackPath;
-  }
-});
-Object.defineProperty(exports, "StyledActivePath", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.StyledActivePath;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerNext", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.StyledSpinnerNext;
+    return _styledComponents.StyledSpinner;
   }
 });
 Object.defineProperty(exports, "SIZE", {
@@ -76,12 +16,6 @@ Object.defineProperty(exports, "SIZE", {
   }
 });
 
-var _index = require("../progress-bar/index.js");
-
-var _spinner = _interopRequireDefault(require("./spinner.js"));
-
 var _styledComponents = require("./styled-components.js");
 
-var _constants = require("./constants.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _constants = require("./constants.js");

package/spinner/index.js.flow

@@ -5,38 +5,13 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {
-  ProgressBarRounded,
-  StyledProgressBarRoundedRoot,
-  StyledProgressBarRoundedSvg,
-  StyledProgressBarRoundedText,
-  StyledProgressBarRoundedTrackBackground,
-  StyledProgressBarRoundedTrackForeground,
-} from '../progress-bar/index.js';
+import { StyledSpinner } from './styled-components.js';
 
-export { default as Spinner } from './spinner.js';
-// Styled elements
-export {
-  Svg as StyledSvg,
-  StyledTrackPath,
-  StyledActivePath,
-  StyledSpinnerNext,
-} from './styled-components.js';
+export { StyledSpinner as Spinner };
 export { SIZE } from './constants.js';
 // Flow
 export type * from './types.js';
 
-// Backward compatibility with SpinnerDeterminate
-// Deprecated
-export {
-  ProgressBarRounded as SpinnerDeterminate,
-  StyledProgressBarRoundedRoot as StyledSpinnerDeterminateRoot,
-  StyledProgressBarRoundedSvg as StyledSpinnerDeterminateSvg,
-  StyledProgressBarRoundedTrackBackground as StyledSpinnerDeterminateTrackBackground,
-  StyledProgressBarRoundedTrackForeground as StyledSpinnerDeterminateTrackForeground,
-  StyledProgressBarRoundedText as StyledSpinnerDeterminateText,
-};
-
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/spinner/styled-components.js

@@ -3,20 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSpinnerNext = exports.StyledActivePath = exports.StyledTrackPath = exports.Svg = void 0;
+exports.StyledSpinner = void 0;
 
 var _index = require("../styles/index.js");
 
-var _styledComponents = require("../icon/styled-components.js");
-
 var _constants = require("./constants.js");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/*
+Copyright (c) Uber Technologies, Inc.
 
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
 var spin = {
   from: {
     transform: 'rotate(0deg)'
@@ -25,41 +23,7 @@ var spin = {
     transform: 'rotate(360deg)'
   }
 };
-/**
- * Spinner icon overrides
- */
-
-var Svg = (0, _index.styled)('svg', function (props) {
-  var $theme = props.$theme,
-      $color = props.$color;
-  return _objectSpread(_objectSpread({}, (0, _styledComponents.getSvgStyles)(props)), {}, {
-    fill: $color || $theme.colors.accent,
-    cursor: 'wait',
-    animationName: spin,
-    animationDuration: $theme.animation.timing1000,
-    animationIterationCount: 'infinite',
-    animationTimingFunction: 'linear'
-  });
-});
-exports.Svg = Svg;
-Svg.displayName = "Svg";
-var StyledTrackPath = (0, _index.styled)('path', function (props) {
-  return {
-    fill: props.$theme.colors.spinnerTrackFill,
-    opacity: 0.16
-  };
-});
-exports.StyledTrackPath = StyledTrackPath;
-StyledTrackPath.displayName = "StyledTrackPath";
-var StyledActivePath = (0, _index.styled)('path', function (props) {
-  return {
-    fill: props.$color || props.$theme.colors.accent
-  };
-}); // TODO(v11): Replace Spinner with SpinnerNext
-
-exports.StyledActivePath = StyledActivePath;
-StyledActivePath.displayName = "StyledActivePath";
-var StyledSpinnerNext = (0, _index.styled)('i', function (_ref) {
+var StyledSpinner = (0, _index.styled)('i', function (_ref) {
   var $theme = _ref.$theme,
       _ref$$color = _ref.$color,
       $color = _ref$$color === void 0 ? $theme.colors.contentAccent : _ref$$color,
@@ -117,5 +81,5 @@ var StyledSpinnerNext = (0, _index.styled)('i', function (_ref) {
     cursor: 'wait'
   };
 });
-exports.StyledSpinnerNext = StyledSpinnerNext;
-StyledSpinnerNext.displayName = "StyledSpinnerNext";
+exports.StyledSpinner = StyledSpinner;
+StyledSpinner.displayName = "StyledSpinner";

package/spinner/styled-components.js.flow

@@ -6,14 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import { styled } from '../styles/index.js';
-import { getSvgStyles } from '../icon/styled-components.js';
 import { SIZE } from './constants.js';
-import type { StyledSpinnerNextPropsT } from './types.js';
-
-type StylePropsT = {
-  $size?: number | string,
-  $color?: string,
-};
+import type { SpinnerPropsT } from './types.js';
 
 const spin = {
   from: {
@@ -24,33 +18,7 @@ const spin = {
   },
 };
 
-/**
- * Spinner icon overrides
- */
-export const Svg = styled<StylePropsT>('svg', (props) => {
-  const { $theme, $color } = props;
-  return {
-    ...getSvgStyles(props),
-    fill: $color || $theme.colors.accent,
-    cursor: 'wait',
-    animationName: spin,
-    animationDuration: $theme.animation.timing1000,
-    animationIterationCount: 'infinite',
-    animationTimingFunction: 'linear',
-  };
-});
-
-export const StyledTrackPath = styled<StylePropsT>('path', (props) => ({
-  fill: props.$theme.colors.spinnerTrackFill,
-  opacity: 0.16,
-}));
-
-export const StyledActivePath = styled<StylePropsT>('path', (props) => ({
-  fill: props.$color || props.$theme.colors.accent,
-}));
-
-// TODO(v11): Replace Spinner with SpinnerNext
-export const StyledSpinnerNext = styled<StyledSpinnerNextPropsT>(
+export const StyledSpinner = styled<SpinnerPropsT>(
   'i',
   ({
     //$FlowFixMe

package/spinner/types.js.flow

@@ -7,29 +7,11 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import { SIZE } from './constants.js';
-import type { OverrideT } from '../helpers/overrides.js';
 import type { SizingT } from '../themes/types.js';
 
 export type SizeT = $Keys<typeof SIZE>;
-export type SpinnerPropsT = {
-  /** Sets aria-label attribute. */
-  'aria-label'?: string,
-  /** Size of element, will be passed to the svg width/height style. Can also be a value included in */
-  size?: number | string,
-  /** Color of icon, will be used as svg fill */
-  color?: string,
-  /** Silence should only be used in baseui. Used to not spam console on composed components like Select */
-  $silenceV11DeprecationWarning?: boolean,
-  /** Allows you to set the SVG `<title>` label, which is used for accessibility */
-  title?: string,
-  overrides?: {
-    Svg?: OverrideT,
-    ActivePath?: OverrideT,
-    TrackPath?: OverrideT,
-  },
-};
 
-export type StyledSpinnerNextPropsT = {
+export type SpinnerPropsT = {
   /** Color of progress indicator */
   $color?: string,
   /** Width of the progress indicator "stroke".  */

package/styles/types.js.flow

@@ -12,7 +12,6 @@ import type {
   ColorTokensT,
   ComponentColorTokensT,
   SemanticColorTokensT,
-  DeprecatedSemanticColorTokensT,
   AnimationT,
   BreakpointsT,
   BorderT,
@@ -44,7 +43,6 @@ export type ColorsT = {
   ...ColorTokensT,
   ...ComponentColorTokensT,
   ...SemanticColorTokensT,
-  ...DeprecatedSemanticColorTokensT,
 };
 
 export type ThemeT = {|

package/table/filter.js

@@ -95,19 +95,19 @@ function Filter(props) {
         ,
         crossFrame: false
       }, /*#__PURE__*/React.createElement(Heading, headingProps, "Filter Column"), /*#__PURE__*/React.createElement(Content, contentProps, props.children), /*#__PURE__*/React.createElement(Footer, footerProps, /*#__PURE__*/React.createElement(_index.Button, {
-        kind: _index.KIND.minimal,
+        kind: _index.KIND.tertiary,
         size: _index.SIZE.compact,
         onClick: function onClick() {
           onSelectAll();
         }
       }, "Select All"), /*#__PURE__*/React.createElement(_index.Button, {
-        kind: _index.KIND.minimal,
+        kind: _index.KIND.tertiary,
         size: _index.SIZE.compact,
         onClick: function onClick() {
           onReset();
         }
       }, "Reset"), props.hasCloseButton && /*#__PURE__*/React.createElement(_index.Button, {
-        kind: _index.KIND.minimal,
+        kind: _index.KIND.tertiary,
         size: _index.SIZE.compact,
         onClick: close
       }, "Close")));

package/table/filter.js.flow

@@ -54,7 +54,7 @@ export default function Filter(props: FilterProps) {
           <Content {...contentProps}>{props.children}</Content>
           <Footer {...footerProps}>
             <Button
-              kind={KIND.minimal}
+              kind={KIND.tertiary}
               size={SIZE.compact}
               onClick={() => {
                 onSelectAll();
@@ -64,7 +64,7 @@ export default function Filter(props: FilterProps) {
             </Button>
 
             <Button
-              kind={KIND.minimal}
+              kind={KIND.tertiary}
               size={SIZE.compact}
               onClick={() => {
                 onReset();
@@ -74,7 +74,7 @@ export default function Filter(props: FilterProps) {
             </Button>
 
             {props.hasCloseButton && (
-              <Button kind={KIND.minimal} size={SIZE.compact} onClick={close}>
+              <Button kind={KIND.tertiary} size={SIZE.compact} onClick={close}>
                 Close
               </Button>
             )}

package/tag/styled-components.js

@@ -251,7 +251,7 @@ var customColorStates = (_customColorStates = {}, _defineProperty(_customColorSt
   return {
     color: customOnRamp(color, theme.colors.tagFontDisabledRampUnit),
     backgroundColor: null,
-    borderColor: customOnRamp(color, theme.colors.tagOutlinedDisabledRampUnit)
+    borderColor: customOnRamp(color, theme.colors.tagSolidDisabledRampUnit)
   };
 }), _defineProperty(_customColorStates, COLOR_STATE.solid, function (theme, color) {
   return {

package/tag/styled-components.js.flow

@@ -217,7 +217,7 @@ const customColorStates = {
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagFontDisabledRampUnit),
     backgroundColor: null,
-    borderColor: customOnRamp(color, theme.colors.tagOutlinedDisabledRampUnit),
+    borderColor: customOnRamp(color, theme.colors.tagSolidDisabledRampUnit),
   }),
   [COLOR_STATE.solid]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagSolidFontRampUnit),

package/tag/types.js.flow

@@ -70,7 +70,7 @@ export type SharedPropsArgT = {
   $isHovered?: boolean,
   $kind?: string,
   $variant?: string,
-  $isFocusVisible: boolean,
+  $isFocusVisible?: boolean,
   $size?: string,
 };