baseui 10.9.1 → 10.11.0

package/skeleton/styled-components.js.flow

@@ -6,10 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled} from '../styles/index.js';
+import { styled } from '../styles/index.js';
 
 function getAnimationColor(props) {
-  const {$theme} = props;
+  const { $theme } = props;
   return `linear-gradient(135deg,
     ${$theme.colors.backgroundTertiary},
     ${$theme.colors.backgroundTertiary},
@@ -46,7 +46,7 @@ export const StyledRoot = styled<{
   $animation?: boolean,
   $height?: string,
   $width?: string,
-}>('div', props => {
+}>('div', (props) => {
   if (typeof props.$rows === 'number' && props.$rows !== 0) {
     return {
       display: 'flex',
@@ -58,26 +58,23 @@ export const StyledRoot = styled<{
 
   return {
     ...(props.$animation
-      ? {...animationStyle, backgroundImage: getAnimationColor(props)}
-      : {backgroundColor: props.$theme.colors.backgroundTertiary}),
+      ? { ...animationStyle, backgroundImage: getAnimationColor(props) }
+      : { backgroundColor: props.$theme.colors.backgroundTertiary }),
     height: props.$height,
     width: props.$width,
   };
 });
 
-export const StyledRow = styled<{$animation?: boolean, $isLastRow: boolean}>(
-  'div',
-  props => {
-    return {
-      ...(props.$animation
-        ? {...animationStyle, backgroundImage: getAnimationColor(props)}
-        : {backgroundColor: props.$theme.colors.backgroundTertiary}),
-      width: '100%',
-      height: '15px',
-      marginBottom: props.$isLastRow ? '0px' : '10px',
-    };
-  },
-);
+export const StyledRow = styled<{ $animation?: boolean, $isLastRow: boolean }>('div', (props) => {
+  return {
+    ...(props.$animation
+      ? { ...animationStyle, backgroundImage: getAnimationColor(props) }
+      : { backgroundColor: props.$theme.colors.backgroundTertiary }),
+    width: '100%',
+    height: '15px',
+    marginBottom: props.$isLastRow ? '0px' : '10px',
+  };
+});
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/skeleton/types.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type OverridesT = {
   Row?: OverrideT,

package/slider/index.js.flow

@@ -5,9 +5,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as Slider} from './slider.js';
-export {default as StatefulSlider} from './stateful-slider.js';
-export {default as StatefulContainer} from './stateful-slider-container.js';
+export { default as Slider } from './slider.js';
+export { default as StatefulSlider } from './stateful-slider.js';
+export { default as StatefulContainer } from './stateful-slider-container.js';
 // Styled elements
 export {
   Root as StyledRoot,
@@ -20,6 +20,7 @@ export {
   ThumbValue as StyledThumbValue,
   Mark as StyledMark,
 } from './styled-components.js';
+
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/slider/slider.js

@@ -106,7 +106,7 @@ function Slider(_ref) {
       setIsFocusVisible(true);
     }
 
-    var index = // eslint-disable-next-line flowtype/no-weak-types
+    var index = // flowlint-next-line unclear-type:off
     event.target.parentNode.firstChild === event.target ? 0 : 1;
     setFocusedThumbIndex(index);
   }, []);
@@ -212,7 +212,7 @@ function Slider(_ref) {
       var props = _ref3.props,
           index = _ref3.index,
           isDragged = _ref3.isDragged;
-      var displayLabel = persistentThumb ? persistentThumb : (index && isHovered1 || !index && isHovered0 || isDragged) && !disabled;
+      var displayLabel = persistentThumb ? persistentThumb : (!!index && isHovered1 || !index && isHovered0 || isDragged) && !disabled;
       return /*#__PURE__*/React.createElement(Thumb, _extends({}, props, {
         onMouseEnter: function onMouseEnter() {
           if (index === 0) {

package/slider/slider.js.flow

@@ -7,13 +7,9 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {Range} from 'react-range';
-import type {PropsT} from './types.js';
-import {
-  isFocusVisible as focusVisible,
-  forkFocus,
-  forkBlur,
-} from '../utils/focusVisible.js';
+import { Range } from 'react-range';
+import type { PropsT } from './types.js';
+import { isFocusVisible as focusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 import {
   Root as StyledRoot,
   Track as StyledTrack,
@@ -25,8 +21,8 @@ import {
   ThumbValue as StyledThumbValue,
   Mark as StyledMark,
 } from './styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {ThemeContext} from '../styles/theme-provider.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { ThemeContext } from '../styles/theme-provider.js';
 
 // value.length should not be bigger than two
 // because our design doesn't support more than
@@ -34,7 +30,7 @@ import {ThemeContext} from '../styles/theme-provider.js';
 const limitValue = (value: number[]) => {
   if (value.length > 2 || value.length === 0) {
     throw new Error(
-      'the value prop represents positions of thumbs, so its length can be only one or two',
+      'the value prop represents positions of thumbs, so its length can be only one or two'
     );
   }
   return value;
@@ -50,7 +46,7 @@ function Slider({
   max = 100,
   step = 1,
   persistentThumb = false,
-  valueToLabel = label => label,
+  valueToLabel = (label) => label,
   value: providedValue,
 }: PropsT) {
   const theme = React.useContext(ThemeContext);
@@ -65,7 +61,7 @@ function Slider({
       setIsFocusVisible(true);
     }
     const index =
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       (event.target: any).parentNode.firstChild === event.target ? 0 : 1;
     setFocusedThumbIndex(index);
   }, []);
@@ -89,24 +85,12 @@ function Slider({
 
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
   const [Track, trackProps] = getOverrides(overrides.Track, StyledTrack);
-  const [InnerTrack, innerTrackProps] = getOverrides(
-    overrides.InnerTrack,
-    StyledInnerTrack,
-  );
+  const [InnerTrack, innerTrackProps] = getOverrides(overrides.InnerTrack, StyledInnerTrack);
   const [Thumb, thumbProps] = getOverrides(overrides.Thumb, StyledThumb);
-  const [InnerThumb, innerThumbProps] = getOverrides(
-    overrides.InnerThumb,
-    StyledInnerThumb,
-  );
-  const [ThumbValue, thumbValueProps] = getOverrides(
-    overrides.ThumbValue,
-    StyledThumbValue,
-  );
+  const [InnerThumb, innerThumbProps] = getOverrides(overrides.InnerThumb, StyledInnerThumb);
+  const [ThumbValue, thumbValueProps] = getOverrides(overrides.ThumbValue, StyledThumbValue);
   const [Tick, tickProps] = getOverrides(overrides.Tick, StyledTick);
-  const [TickBar, tickBarProps] = getOverrides(
-    overrides.TickBar,
-    StyledTickBar,
-  );
+  const [TickBar, tickBarProps] = getOverrides(overrides.TickBar, StyledTickBar);
   const [Mark, markProps] = getOverrides(overrides.Mark, StyledMark);
 
   return (
@@ -123,10 +107,10 @@ function Slider({
         max={max}
         values={value}
         disabled={disabled}
-        onChange={value => onChange({value})}
-        onFinalChange={value => onFinalChange({value})}
+        onChange={(value) => onChange({ value })}
+        onFinalChange={(value) => onFinalChange({ value })}
         rtl={theme.direction === 'rtl'}
-        renderTrack={({props, children, isDragged}) => (
+        renderTrack={({ props, children, isDragged }) => (
           <Track
             onMouseDown={props.onMouseDown}
             onTouchStart={props.onTouchStart}
@@ -144,11 +128,10 @@ function Slider({
             </InnerTrack>
           </Track>
         )}
-        renderThumb={({props, index, isDragged}) => {
+        renderThumb={({ props, index, isDragged }) => {
           const displayLabel = persistentThumb
             ? persistentThumb
-            : ((index && isHovered1) || (!index && isHovered0) || isDragged) &&
-              !disabled;
+            : ((!!index && isHovered1) || (!index && isHovered0) || isDragged) && !disabled;
           return (
             <Thumb
               {...props}
@@ -199,13 +182,8 @@ function Slider({
         {...(marks
           ? {
               // eslint-disable-next-line react/display-name
-              renderMark: ({props, index}) => (
-                <Mark
-                  $markIndex={index}
-                  {...props}
-                  {...sharedProps}
-                  {...markProps}
-                />
+              renderMark: ({ props, index }) => (
+                <Mark $markIndex={index} {...props} {...sharedProps} {...markProps} />
               ),
             }
           : {})}

package/slider/stateful-slider-container.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {STATE_CHANGE_TYPE} from './constants.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
 import type {
   StatefulContainerPropsT,
   StateReducerT,
@@ -17,10 +17,7 @@ import type {
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
-class StatefulSliderContainer extends React.Component<
-  StatefulContainerPropsT,
-  StateT,
-> {
+class StatefulSliderContainer extends React.Component<StatefulContainerPropsT, StateT> {
   constructor(props: StatefulContainerPropsT) {
     super(props);
     this.state = {
@@ -40,19 +37,19 @@ class StatefulSliderContainer extends React.Component<
     onFinalChange: () => {},
   };
 
-  onChange = (params: {value: Array<number>}) => {
+  onChange = (params: { value: Array<number> }) => {
     this.internalSetState(STATE_CHANGE_TYPE.change, params);
-    return this.props.onChange({...params});
+    return this.props.onChange({ ...params });
   };
 
-  onFinalChange = (params: {value: Array<number>}) => {
+  onFinalChange = (params: { value: Array<number> }) => {
     this.internalSetState(STATE_CHANGE_TYPE.finalChange, params);
-    return this.props.onFinalChange({...params});
+    return this.props.onFinalChange({ ...params });
   };
 
-  internalSetState = (type: ChangeActionT, {value}: ParamsT) => {
-    const nextState = {value};
-    const {stateReducer} = this.props;
+  internalSetState = (type: ChangeActionT, { value }: ParamsT) => {
+    const nextState = { value };
+    const { stateReducer } = this.props;
     const newState = stateReducer(type, nextState, this.state);
     this.setState(newState);
   };

package/slider/stateful-slider.js.flow

@@ -8,12 +8,12 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulSliderContainer from './stateful-slider-container.js';
 import Slider from './slider.js';
-import type {StatefulSliderPropsT} from './types.js';
+import type { StatefulSliderPropsT } from './types.js';
 
 export default function StatefulSlider(props: StatefulSliderPropsT) {
   return (
     <StatefulSliderContainer {...props}>
-      {childrenProps => <Slider {...childrenProps} />}
+      {(childrenProps) => <Slider {...childrenProps} />}
     </StatefulSliderContainer>
   );
 }

package/slider/styled-components.js.flow

@@ -5,17 +5,17 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {getTrackBackground} from 'react-range';
+import { getTrackBackground } from 'react-range';
 
-import {styled} from '../styles/index.js';
-import type {StylePropsT} from './types.js';
+import { styled } from '../styles/index.js';
+import type { StylePropsT } from './types.js';
 
-export const Root = styled('div', {position: 'relative', width: '100%'});
+export const Root = styled('div', { position: 'relative', width: '100%' });
 Root.displayName = 'StyledRoot';
 
-export const Track = styled<StylePropsT>('div', props => {
-  const {$theme, $value = [], $disabled, $isDragged} = props;
-  const {sizing} = $theme;
+export const Track = styled<StylePropsT>('div', (props) => {
+  const { $theme, $value = [], $disabled, $isDragged } = props;
+  const { sizing } = $theme;
   let cursor = 'inherit';
   if ($disabled) {
     cursor = 'not-allowed';
@@ -36,9 +36,9 @@ export const Track = styled<StylePropsT>('div', props => {
 });
 Track.displayName = 'StyledTrack';
 
-export const InnerTrack = styled<StylePropsT>('div', props => {
-  const {$theme, $value = [], $min, $max, $disabled} = props;
-  const {colors, borders, direction} = $theme;
+export const InnerTrack = styled<StylePropsT>('div', (props) => {
+  const { $theme, $value = [], $min, $max, $disabled } = props;
+  const { colors, borders, direction } = $theme;
   const borderRadius = $theme.borders.useRoundedCorners ? borders.radius100 : 0;
   return {
     borderTopLeftRadius: borderRadius,
@@ -70,7 +70,7 @@ export const InnerTrack = styled<StylePropsT>('div', props => {
 });
 InnerTrack.displayName = 'StyledInnerTrack';
 
-export const Mark = styled<StylePropsT>('div', props => {
+export const Mark = styled<StylePropsT>('div', (props) => {
   return {
     width: '4px',
     height: '2px',
@@ -80,7 +80,7 @@ export const Mark = styled<StylePropsT>('div', props => {
 });
 Mark.displayName = 'StyledMark';
 
-export const Tick = styled<StylePropsT>('div', props => {
+export const Tick = styled<StylePropsT>('div', (props) => {
   return {
     ...props.$theme.typography.font200,
     color: props.$theme.colors.contentPrimary,
@@ -88,9 +88,9 @@ export const Tick = styled<StylePropsT>('div', props => {
 });
 Tick.displayName = 'StyledTick';
 
-export const TickBar = styled<StylePropsT>('div', props => {
-  const {$theme} = props;
-  const {sizing} = $theme;
+export const TickBar = styled<StylePropsT>('div', (props) => {
+  const { $theme } = props;
+  const { sizing } = $theme;
   return {
     display: 'flex',
     justifyContent: 'space-between',
@@ -102,8 +102,8 @@ export const TickBar = styled<StylePropsT>('div', props => {
 });
 TickBar.displayName = 'StyledTickBar';
 
-export const Thumb = styled<StylePropsT>('div', props => {
-  const {$theme, $value = [], $thumbIndex, $disabled} = props;
+export const Thumb = styled<StylePropsT>('div', (props) => {
+  const { $theme, $value = [], $thumbIndex, $disabled } = props;
   let isLeft = $value.length === 2 && $thumbIndex === 0;
   let isRight = $value.length === 2 && $thumbIndex === 1;
 
@@ -134,8 +134,8 @@ export const Thumb = styled<StylePropsT>('div', props => {
 });
 Thumb.displayName = 'StyledThumb';
 
-export const InnerThumb = styled<StylePropsT>('div', props => {
-  const {$disabled, $theme} = props;
+export const InnerThumb = styled<StylePropsT>('div', (props) => {
+  const { $disabled, $theme } = props;
   return {
     position: 'absolute',
     top: '-16px',
@@ -148,8 +148,8 @@ export const InnerThumb = styled<StylePropsT>('div', props => {
 });
 InnerThumb.displayName = 'StyledInnerThumb';
 
-export const ThumbValue = styled<StylePropsT>('div', props => {
-  const {$disabled, $theme} = props;
+export const ThumbValue = styled<StylePropsT>('div', (props) => {
+  const { $disabled, $theme } = props;
   return {
     position: 'absolute',
     top: `-${$theme.sizing.scale1400}`,

package/slider/types.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {STATE_CHANGE_TYPE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
 
 export type ChangeActionT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type ParamsT = {
@@ -57,26 +57,22 @@ export type StateT = {|
   value: Array<number>,
 |};
 
-export type StateReducerT = (
-  stateType: string,
-  nextState: StateT,
-  currentState: StateT,
-) => StateT;
+export type StateReducerT = (stateType: string, nextState: StateT, currentState: StateT) => StateT;
 
 export type StatefulContainerPropsT = {
   overrides?: OverridesT,
-  children: (*) => React$Node,
+  children: (PropsT) => React$Node,
   min: number,
   max: number,
   step: number,
   /** Initial state populated into the component */
-  initialState: StateT,
+  initialState?: StateT,
   /** Reducer function to manipulate internal state updates. */
   stateReducer: StateReducerT,
   /** Handler for events on trigger element, each time thumbs change selection, which is passed in `value`. */
-  onChange: ({...ParamsT}) => mixed,
+  onChange: ({ ...ParamsT }) => mixed,
   /** Handler for events on trigger element, each time thumbs finish changing selection, which is passed in `value`. */
-  onFinalChange: ({...ParamsT}) => mixed,
+  onFinalChange: ({ ...ParamsT }) => mixed,
 };
 
 export type StatefulSliderPropsT = {
@@ -92,9 +88,9 @@ export type StatefulSliderPropsT = {
   /** Function to change the numeric value to a user friendly value. Also applied to min/max labels. */
   valueToLabel?: (value: number) => React$Node,
   /** Handler for events on trigger element, each time thumbs change selection, which is passed in `value`. */
-  onChange?: ({...ParamsT}) => mixed,
+  onChange?: ({ ...ParamsT }) => mixed,
   /** Handler for events on trigger element, each time thumbs finish changing selection, which is passed in `value`. */
-  onFinalChange?: ({...ParamsT}) => mixed,
+  onFinalChange?: ({ ...ParamsT }) => mixed,
 };
 
 export type StylePropsT = {

package/snackbar/index.js.flow

@@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-export {DURATION, PLACEMENT} from './constants.js';
-export {default as SnackbarElement} from './snackbar-element.js';
-export {default as SnackbarProvider, useSnackbar} from './snackbar-context.js';
+export { DURATION, PLACEMENT } from './constants.js';
+export { default as SnackbarElement } from './snackbar-element.js';
+export { default as SnackbarProvider, useSnackbar } from './snackbar-context.js';
 export {
   StyledRoot,
   StyledContent,

package/snackbar/snackbar-context.js.flow

@@ -9,18 +9,14 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Layer} from '../layer/index.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {useStyletron} from '../styles/index.js';
+import { Layer } from '../layer/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { useStyletron } from '../styles/index.js';
 
-import {DURATION, PLACEMENT} from './constants.js';
+import { DURATION, PLACEMENT } from './constants.js';
 import SnackbarElement from './snackbar-element.js';
-import {StyledPlacementContainer} from './styled-components.js';
-import type {
-  SnackbarElementPropsT,
-  SnackbarProviderPropsT,
-  DurationT,
-} from './types.js';
+import { StyledPlacementContainer } from './styled-components.js';
+import type { SnackbarElementPropsT, SnackbarProviderPropsT, DurationT } from './types.js';
 
 type ContextT = {|
   enqueue: (elementProps: SnackbarElementPropsT, duration?: DurationT) => void,
@@ -40,7 +36,7 @@ export const SnackbarContext: React.Context<ContextT> = React.createContext({
 
 export function useSnackbar() {
   const context = React.useContext(SnackbarContext);
-  return {enqueue: context.enqueue, dequeue: context.dequeue};
+  return { enqueue: context.enqueue, dequeue: context.dequeue };
 }
 
 function usePrevious(value) {
@@ -68,8 +64,8 @@ export default function SnackbarProvider({
   const containerRef = React.useRef(null);
 
   function enqueue(elementProps, duration = defaultDuration) {
-    setSnackbars(prev => {
-      return [...prev, {elementProps, duration}];
+    setSnackbars((prev) => {
+      return [...prev, { elementProps, duration }];
     });
   }
 
@@ -83,7 +79,7 @@ export default function SnackbarProvider({
   function dequeue() {
     setContainerHeight(0);
 
-    setSnackbars(prev => {
+    setSnackbars((prev) => {
       const next = prev.slice(1);
       if (next.length > 0) {
         enter(next[0].duration);
@@ -135,7 +131,7 @@ export default function SnackbarProvider({
     if (__BROWSER__) {
       if (window.ResizeObserver) {
         const observer = new window.ResizeObserver(([entry]) =>
-          setContainerHeight(entry.contentRect.height),
+          setContainerHeight(entry.contentRect.height)
         );
         if (containerRef.current) {
           observer.observe(containerRef.current);
@@ -158,17 +154,14 @@ export default function SnackbarProvider({
     return value;
   }, [placement, containerHeight]);
 
-  const {
-    PlacementContainer: PlacementContainerOverrides,
-    ...snackbarOverrides
-  } = overrides;
+  const { PlacementContainer: PlacementContainerOverrides, ...snackbarOverrides } = overrides;
   const [PlacementContainer, placementContainerProps] = getOverrides(
     PlacementContainerOverrides,
-    StyledPlacementContainer,
+    StyledPlacementContainer
   );
 
   return (
-    <SnackbarContext.Provider value={{enqueue, dequeue: exit}}>
+    <SnackbarContext.Provider value={{ enqueue, dequeue: exit }}>
       <div
         className={css({
           boxSizing: 'border-box',
@@ -202,11 +195,11 @@ export default function SnackbarProvider({
               role="alert"
               onMouseEnter={handleMouseEnter}
               onMouseLeave={() => handleMouseLeave(snackbars[0].duration)}
-              className={css({display: 'inline', pointerEvents: 'all'})}
+              className={css({ display: 'inline', pointerEvents: 'all' })}
             >
               <SnackbarElement
                 {...snackbars[0].elementProps}
-                actionOnClick={event => {
+                actionOnClick={(event) => {
                   if (snackbars[0].elementProps.actionOnClick) {
                     snackbars[0].elementProps.actionOnClick(event);
                   }

package/snackbar/snackbar-element.js

@@ -35,7 +35,8 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var ActionButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var ActionButton = /*#__PURE__*/React.forwardRef( // flowlint-next-line unclear-type:off
+function (_ref, ref) {
   var onClick = _ref.onClick,
       message = _ref.message,
       _ref$overrides = _ref.overrides,
@@ -74,6 +75,7 @@ var ActionButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     shape: _index.SHAPE.pill
   }, message));
 });
+ActionButton.displayName = 'ActionButton';
 
 function SnackbarElement(_ref2) {
   var actionMessage = _ref2.actionMessage,
@@ -181,8 +183,7 @@ function SnackbarElement(_ref2) {
   React.useEffect(function () {
     if (typeof document !== 'undefined') {
       if (focus && actionButtonRef.current) {
-        prevFocusRef.current = document.activeElement; // $FlowFixMe
-
+        prevFocusRef.current = document.activeElement;
         actionButtonRef.current.focus();
       }