baseui 11.0.3 → 11.1.2

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

@@ -25,6 +25,14 @@ var tagHoverBackground = "rgba(0, 0, 0, 0.08)";
 var _default = function _default() {
   var themePrimitives = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _colorTokens.default;
   return {
+    bannerActionLowInfo: themePrimitives.accent100,
+    bannerActionLowNegative: themePrimitives.negative100,
+    bannerActionLowPositive: themePrimitives.positive100,
+    bannerActionLowWarning: themePrimitives.warning200,
+    bannerActionHighInfo: themePrimitives.accent500,
+    bannerActionHighNegative: themePrimitives.negative500,
+    bannerActionHighPositive: themePrimitives.positive500,
+    bannerActionHighWarning: themePrimitives.warning200,
     // Buttons
     buttonPrimaryFill: themePrimitives.primary,
     buttonPrimaryText: themePrimitives.white,

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

@@ -16,6 +16,15 @@ const tagHoverBackground = `rgba(0, 0, 0, 0.08)`;
 // Due to the legacy `createTheme` type the value need to be
 // overrideable through primitives (`foundation` )
 export default (themePrimitives: ColorTokensT = colorTokens): ComponentColorTokensT => ({
+  bannerActionLowInfo: themePrimitives.accent100,
+  bannerActionLowNegative: themePrimitives.negative100,
+  bannerActionLowPositive: themePrimitives.positive100,
+  bannerActionLowWarning: themePrimitives.warning200,
+  bannerActionHighInfo: themePrimitives.accent500,
+  bannerActionHighNegative: themePrimitives.negative500,
+  bannerActionHighPositive: themePrimitives.positive500,
+  bannerActionHighWarning: themePrimitives.warning200,
+
   // Buttons
   buttonPrimaryFill: themePrimitives.primary,
   buttonPrimaryText: themePrimitives.white,

package/themes/types.js.flow

@@ -173,6 +173,15 @@ export type SemanticColorTokensT = {|
 |};
 
 export type ComponentColorTokensT = {|
+  bannerActionLowInfo: string,
+  bannerActionLowNegative: string,
+  bannerActionLowPositive: string,
+  bannerActionLowWarning: string,
+  bannerActionHighInfo: string,
+  bannerActionHighNegative: string,
+  bannerActionHighPositive: string,
+  bannerActionHighWarning: string,
+
   // Buttons
   buttonPrimaryFill: string,
   buttonPrimaryText: string,

package/timepicker/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {Option} from '../select';
-import {SIZE} from '../input';
-import {Override} from '../overrides';
+import { Option } from '../select';
+import { SIZE } from '../input';
+import { Override } from '../overrides';
 
 export interface TimePickerOverrides {
   Select?: Override<any>;
@@ -19,7 +19,7 @@ export interface TimePickerProps {
   placeholder?: string;
   step?: number;
   value?: Date | null;
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
   minTime?: Date;
   maxTime?: Date;
   ignoreMinMaxDateComponent?: boolean;
@@ -28,10 +28,7 @@ export interface TimePickerState {
   steps: number[];
   value?: Option;
 }
-export class TimePicker extends React.Component<
-  TimePickerProps,
-  TimePickerState
-> {
+export class TimePicker extends React.Component<TimePickerProps, TimePickerState> {
   handleChange(steps: number): void;
   buildSteps(): number[];
   buildSelectedOption(value: Date, format: string): object;

package/timezonepicker/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import {Option} from '../select';
-import {SIZE} from '../input';
-import {Override} from '../overrides';
+import { Option } from '../select';
+import { SIZE } from '../input';
+import { Override } from '../overrides';
 
 export interface Timezone {
   id: string;
@@ -22,16 +22,13 @@ export interface TimezonePickerProps {
   onChange?: (value: Timezone) => any;
   overrides?: TimezoneOverrides;
   value?: string;
-  size?: SIZE[keyof SIZE];
+  size?: typeof SIZE[keyof typeof SIZE];
   includeAbbreviations?: boolean;
 }
 export interface TimezonePickerState {
   timezones: Option[];
   value?: string;
 }
-export class TimezonePicker extends React.Component<
-  TimezonePickerProps,
-  TimezonePickerState
-> {
+export class TimezonePicker extends React.Component<TimezonePickerProps, TimezonePickerState> {
   buildTimezones(compareDate: Date): string[];
 }

package/toast/index.d.ts

@@ -1,54 +1,46 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
-export interface KIND {
+export declare const KIND: {
   info: 'info';
   positive: 'positive';
   warning: 'warning';
   negative: 'negative';
-}
-export interface PLACEMENT {
+};
+
+export declare const PLACEMENT: {
   topLeft: 'topLeft';
   top: 'top';
   topRight: 'topRight';
   bottomRight: 'bottomRight';
   bottom: 'bottom';
   bottomLeft: 'bottomLeft';
-}
-export interface TYPE {
+};
+export declare const TYPE: {
   inline: 'inline';
   toast: 'toast';
-}
+};
 
 export interface IToaster {
   getRef: () => React.Ref<typeof ToasterContainer>;
   show: (children: React.ReactNode, props: Readonly<ToastProps>) => React.Key;
   info: (children: React.ReactNode, props: Readonly<ToastProps>) => React.Key;
-  positive: (
-    children: React.ReactNode,
-    props: Readonly<ToastProps>,
-  ) => React.Key;
-  warning: (
-    children: React.ReactNode,
-    props: Readonly<ToastProps>,
-  ) => React.Key;
-  negative: (
-    children: React.ReactNode,
-    props: Readonly<ToastProps>,
-  ) => React.Key;
+  positive: (children: React.ReactNode, props: Readonly<ToastProps>) => React.Key;
+  warning: (children: React.ReactNode, props: Readonly<ToastProps>) => React.Key;
+  negative: (children: React.ReactNode, props: Readonly<ToastProps>) => React.Key;
   update: (key: React.Key, props: Readonly<ToastProps>) => void;
   clear: (key?: React.Key) => void;
 }
 
-export const toaster: IToaster;
+export declare const toaster: IToaster;
 
 export interface ToasterContainerState {
   isMounted: boolean;
   toasts: Readonly<ToastProps>;
 }
 export interface ToasterSharedStylePropsArg {
-  $placement?: PLACEMENT[keyof PLACEMENT];
+  $placement?: typeof PLACEMENT[keyof typeof PLACEMENT];
 }
 export interface ToasterOverrides {
   Root?: Override<ToasterSharedStylePropsArg>;
@@ -58,7 +50,7 @@ export interface ToasterOverrides {
 }
 export interface ToasterProps {
   overrides?: ToasterOverrides;
-  placement?: PLACEMENT[keyof PLACEMENT];
+  placement?: typeof PLACEMENT[keyof typeof PLACEMENT];
   usePortal?: boolean;
   autoHideDuration?: number;
 }
@@ -66,7 +58,7 @@ export class ToasterContainer extends React.Component<
   Readonly<ToasterProps>,
   ToasterContainerState
 > {
-  getToastProps(props: ToastProps): Readonly<ToastProps> & {key: React.Key};
+  getToastProps(props: ToastProps): Readonly<ToastProps> & { key: React.Key };
   show(props: ToastProps): React.Key;
   update(key: React.Key, props: ToastProps): void;
   dismiss(key: React.Key): void;
@@ -74,13 +66,13 @@ export class ToasterContainer extends React.Component<
   clear(key: React.Key): void;
   internalOnClose(key: React.Key): void;
   getOnCloseHandler(key: React.Key, onClose?: () => any): () => any;
-  renderToast(toastProps: ToastProps & {key: React.Key}): React.ReactNode;
-  getSharedProps(): {$placement: PLACEMENT[keyof PLACEMENT]};
+  renderToast(toastProps: ToastProps & { key: React.Key }): React.ReactNode;
+  getSharedProps(): { $placement: typeof PLACEMENT[keyof typeof PLACEMENT] };
 }
 
 export interface SharedStylePropsArg {
-  $kind?: KIND[keyof KIND];
-  $type?: TYPE[keyof TYPE];
+  $kind?: typeof KIND[keyof typeof KIND];
+  $type?: typeof TYPE[keyof typeof TYPE];
   $closeable?: boolean;
   $isRendered?: boolean;
   $isVisible?: boolean;
@@ -99,12 +91,10 @@ export interface ToastOverrides {
 export interface ToastProps {
   autoHideDuration?: number;
   autoFocus?: Boolean;
-  children?:
-    | ((args: {dismiss: () => void}) => React.ReactNode)
-    | React.ReactNode;
+  children?: ((args: { dismiss: () => void }) => React.ReactNode) | React.ReactNode;
   closeable?: boolean;
-  kind?: KIND[keyof KIND];
-  notificationType?: TYPE[keyof TYPE];
+  kind?: typeof KIND[keyof typeof KIND];
+  notificationType?: typeof TYPE[keyof typeof TYPE];
   onClose?: () => any;
   onBlur?: (e: Event) => any;
   onFocus?: (e: Event) => any;
@@ -128,10 +118,6 @@ export class Toast extends React.Component<ToastProps, ToastPrivateState> {
   getSharedProps(): Readonly<SharedStylePropsArg>;
 }
 
-export const Root: StyletronComponent<any>;
-export const Body: StyletronComponent<any>;
-export const CloseIconSvg: StyletronComponent<any>;
-
-export const KIND: KIND;
-export const PLACEMENT: PLACEMENT;
-export const TYPE: TYPE;
+export declare const Root: StyletronComponent<any>;
+export declare const Body: StyletronComponent<any>;
+export declare const CloseIconSvg: StyletronComponent<any>;

package/tokens/index.d.ts

@@ -96,4 +96,4 @@ export interface TokenColors {
   cobalt700: string;
 }
 
-export const colors: TokenColors;
+export declare const colors: TokenColors;

package/tooltip/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
+import { StyletronComponent } from 'styletron-react';
 import {
   ACCESSIBILITY_TYPE,
   PLACEMENT,
@@ -11,18 +11,16 @@ import {
 } from '../popover';
 
 export type StatefulTooltipProps = StatefulPopoverProps;
-export const StatefulTooltip: React.FC<StatefulTooltipProps>;
+export declare const StatefulTooltip: React.FC<StatefulTooltipProps>;
 
 export type StatefulTooltipContainerProps = StatefulPopoverContainerProps;
-export class StatefulContainer extends React.Component<
-  StatefulTooltipContainerProps
-> {}
+export class StatefulContainer extends React.Component<StatefulTooltipContainerProps> {}
 
-export {ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE};
+export { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE };
 
 export type TooltipProps = PopoverProps;
 export class Tooltip extends React.Component<TooltipProps> {}
 
-export const StyledArrow: StyletronComponent<any>;
-export const StyledBody: StyletronComponent<any>;
-export const StyledInner: StyletronComponent<any>;
+export declare const StyledArrow: StyletronComponent<any>;
+export declare const StyledBody: StyletronComponent<any>;
+export declare const StyledInner: StyletronComponent<any>;

package/tree-view/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface TreeViewOverrides extends TreeLabelOverrides {
   Root?: Override<{}>;
-  TreeItemList?: Override<{$isChildNode?: boolean}>;
-  TreeItem?: Override<{$isLeafNode?: boolean}>;
+  TreeItemList?: Override<{ $isChildNode?: boolean }>;
+  TreeItem?: Override<{ $isLeafNode?: boolean }>;
   TreeLabel?: Override<TreeLabelProps>;
 }
 
@@ -56,26 +56,22 @@ export interface TreeViewProps {
   singleExpanded?: boolean;
 }
 
-export const TreeView: React.FC<TreeViewProps>;
+export declare const TreeView: React.FC<TreeViewProps>;
 
-export const StatefulTreeView: React.FC<TreeViewProps>;
+export declare const StatefulTreeView: React.FC<TreeViewProps>;
 
-export const TreeLabel: React.FC<TreeLabelProps>;
+export declare const TreeLabel: React.FC<TreeLabelProps>;
 
-export const StyledTreeItemList: StyletronComponent<any>;
-export const StyledTreeItem: StyletronComponent<any>;
-export const StyledItemContent: StyletronComponent<any>;
-export const StyledIconContainer: StyletronComponent<any>;
+export declare const StyledTreeItemList: StyletronComponent<any>;
+export declare const StyledTreeItem: StyletronComponent<any>;
+export declare const StyledItemContent: StyletronComponent<any>;
+export declare const StyledIconContainer: StyletronComponent<any>;
 
 type TGetId = (node: TreeNode) => string | number;
-type toggleIsExpandedT = (
-  data: TreeNode[],
-  toggledNode: TreeNode,
-  getId?: TGetId,
-) => TreeNode[];
+type toggleIsExpandedT = (data: TreeNode[], toggledNode: TreeNode, getId?: TGetId) => TreeNode[];
 
-export const toggleIsExpanded: toggleIsExpandedT;
-export const TreeLabelInteractable: React.FC<{
-  overrides?: {LabelInteractable: Override<any>};
+export declare const toggleIsExpanded: toggleIsExpandedT;
+export declare const TreeLabelInteractable: React.FC<{
+  overrides?: { LabelInteractable: Override<any> };
   children?: React.ReactNode;
 }>;

package/tree-view/tree-label.js

@@ -89,8 +89,16 @@ var TreeLabel = function TreeLabel(_ref) {
     /*#__PURE__*/
     // $FlowExpectedError[cannot-spread-inexact]
     _react.default.createElement(TreeItemContent, _extends({}, sharedProps, props), hasChildren && /*#__PURE__*/_react.default.createElement(IconContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(IconContainerOverride)), !isExpanded ? /*#__PURE__*/_react.default.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
-      return theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(Left, _extends({}, sharedProps, LeftProps)) : /*#__PURE__*/_react.default.createElement(Right, _extends({}, sharedProps, RightProps));
-    }) : /*#__PURE__*/_react.default.createElement(CollapseIcon, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CollapseIconOverride)))), !hasChildren && LeafIcon && /*#__PURE__*/_react.default.createElement(LeafIconContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LeafIconContainerOverride)), /*#__PURE__*/_react.default.createElement(LeafIcon, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LeafIconOverride)))), typeof label === 'function' ? label(node) : label)
+      return theme.direction === 'rtl' ? /*#__PURE__*/_react.default.createElement(Left, _extends({
+        size: 16
+      }, sharedProps, LeftProps)) : /*#__PURE__*/_react.default.createElement(Right, _extends({
+        size: 16
+      }, sharedProps, RightProps));
+    }) : /*#__PURE__*/_react.default.createElement(CollapseIcon, _extends({
+      size: 16
+    }, sharedProps, (0, _overrides.getOverrideProps)(CollapseIconOverride)))), !hasChildren && LeafIcon && /*#__PURE__*/_react.default.createElement(LeafIconContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LeafIconContainerOverride)), /*#__PURE__*/_react.default.createElement(LeafIcon, _extends({
+      size: 16
+    }, sharedProps, (0, _overrides.getOverrideProps)(LeafIconOverride)))), typeof label === 'function' ? label(node) : label)
   );
 };
 

package/tree-view/tree-label.js.flow

@@ -55,20 +55,20 @@ const TreeLabel: React$ComponentType<TreeLabelT> = ({
             <ThemeContext.Consumer>
               {(theme) =>
                 theme.direction === 'rtl' ? (
-                  <Left {...sharedProps} {...LeftProps} />
+                  <Left size={16} {...sharedProps} {...LeftProps} />
                 ) : (
-                  <Right {...sharedProps} {...RightProps} />
+                  <Right size={16} {...sharedProps} {...RightProps} />
                 )
               }
             </ThemeContext.Consumer>
           ) : (
-            <CollapseIcon {...sharedProps} {...getOverrideProps(CollapseIconOverride)} />
+            <CollapseIcon size={16} {...sharedProps} {...getOverrideProps(CollapseIconOverride)} />
           )}
         </IconContainer>
       )}
       {!hasChildren && LeafIcon && (
         <LeafIconContainer {...sharedProps} {...getOverrideProps(LeafIconContainerOverride)}>
-          <LeafIcon {...sharedProps} {...getOverrideProps(LeafIconOverride)} />
+          <LeafIcon size={16} {...sharedProps} {...getOverrideProps(LeafIconOverride)} />
         </LeafIconContainer>
       )}
       {typeof label === 'function' ? label(node) : label}

package/typography/index.d.ts

@@ -1,39 +1,39 @@
 import * as React from 'react';
-import {BlockProps} from '../block';
+import { BlockProps } from '../block';
 
-export const DisplayLarge: React.FC<BlockProps>;
-export const DisplayMedium: React.FC<BlockProps>;
-export const DisplaySmall: React.FC<BlockProps>;
-export const DisplayXSmall: React.FC<BlockProps>;
-export const HeadingXXLarge: React.FC<BlockProps>;
-export const HeadingXLarge: React.FC<BlockProps>;
-export const HeadingLarge: React.FC<BlockProps>;
-export const HeadingMedium: React.FC<BlockProps>;
-export const HeadingSmall: React.FC<BlockProps>;
-export const HeadingXSmall: React.FC<BlockProps>;
-export const LabelLarge: React.FC<BlockProps>;
-export const LabelMedium: React.FC<BlockProps>;
-export const LabelSmall: React.FC<BlockProps>;
-export const LabelXSmall: React.FC<BlockProps>;
-export const ParagraphLarge: React.FC<BlockProps>;
-export const ParagraphMedium: React.FC<BlockProps>;
-export const ParagraphSmall: React.FC<BlockProps>;
-export const ParagraphXSmall: React.FC<BlockProps>;
-export const MonoDisplayLarge: React.FC<BlockProps>;
-export const MonoDisplayMedium: React.FC<BlockProps>;
-export const MonoDisplaySmall: React.FC<BlockProps>;
-export const MonoDisplayXSmall: React.FC<BlockProps>;
-export const MonoHeadingXXLarge: React.FC<BlockProps>;
-export const MonoHeadingXLarge: React.FC<BlockProps>;
-export const MonoHeadingLarge: React.FC<BlockProps>;
-export const MonoHeadingMedium: React.FC<BlockProps>;
-export const MonoHeadingSmall: React.FC<BlockProps>;
-export const MonoHeadingXSmall: React.FC<BlockProps>;
-export const MonoLabelLarge: React.FC<BlockProps>;
-export const MonoLabelMedium: React.FC<BlockProps>;
-export const MonoLabelSmall: React.FC<BlockProps>;
-export const MonoLabelXSmall: React.FC<BlockProps>;
-export const MonoParagraphLarge: React.FC<BlockProps>;
-export const MonoParagraphMedium: React.FC<BlockProps>;
-export const MonoParagraphSmall: React.FC<BlockProps>;
-export const MonoParagraphXSmall: React.FC<BlockProps>;
+export declare const DisplayLarge: React.FC<BlockProps>;
+export declare const DisplayMedium: React.FC<BlockProps>;
+export declare const DisplaySmall: React.FC<BlockProps>;
+export declare const DisplayXSmall: React.FC<BlockProps>;
+export declare const HeadingXXLarge: React.FC<BlockProps>;
+export declare const HeadingXLarge: React.FC<BlockProps>;
+export declare const HeadingLarge: React.FC<BlockProps>;
+export declare const HeadingMedium: React.FC<BlockProps>;
+export declare const HeadingSmall: React.FC<BlockProps>;
+export declare const HeadingXSmall: React.FC<BlockProps>;
+export declare const LabelLarge: React.FC<BlockProps>;
+export declare const LabelMedium: React.FC<BlockProps>;
+export declare const LabelSmall: React.FC<BlockProps>;
+export declare const LabelXSmall: React.FC<BlockProps>;
+export declare const ParagraphLarge: React.FC<BlockProps>;
+export declare const ParagraphMedium: React.FC<BlockProps>;
+export declare const ParagraphSmall: React.FC<BlockProps>;
+export declare const ParagraphXSmall: React.FC<BlockProps>;
+export declare const MonoDisplayLarge: React.FC<BlockProps>;
+export declare const MonoDisplayMedium: React.FC<BlockProps>;
+export declare const MonoDisplaySmall: React.FC<BlockProps>;
+export declare const MonoDisplayXSmall: React.FC<BlockProps>;
+export declare const MonoHeadingXXLarge: React.FC<BlockProps>;
+export declare const MonoHeadingXLarge: React.FC<BlockProps>;
+export declare const MonoHeadingLarge: React.FC<BlockProps>;
+export declare const MonoHeadingMedium: React.FC<BlockProps>;
+export declare const MonoHeadingSmall: React.FC<BlockProps>;
+export declare const MonoHeadingXSmall: React.FC<BlockProps>;
+export declare const MonoLabelLarge: React.FC<BlockProps>;
+export declare const MonoLabelMedium: React.FC<BlockProps>;
+export declare const MonoLabelSmall: React.FC<BlockProps>;
+export declare const MonoLabelXSmall: React.FC<BlockProps>;
+export declare const MonoParagraphLarge: React.FC<BlockProps>;
+export declare const MonoParagraphMedium: React.FC<BlockProps>;
+export declare const MonoParagraphSmall: React.FC<BlockProps>;
+export declare const MonoParagraphXSmall: React.FC<BlockProps>;