baseui 12.2.0 → 13.0.0

package/es/popover/popover.js

@@ -58,6 +58,7 @@ class PopoverInner extends React.Component {
           this.setState({
             isAnimating: false,
             // Reset to ideal placement specified in props
+            // @ts-ignore
             placement: this.props.placement
           });
         }, this.props.animateOutTime || ANIMATE_OUT_TIME);
@@ -102,6 +103,7 @@ class PopoverInner extends React.Component {
     _defineProperty(this, "onPopperUpdate", (normalizedOffsets, data) => {
       const placement = fromPopperPlacement(data.placement) || PLACEMENT.top;
       this.setState({
+        // @ts-ignore
         arrowOffset: normalizedOffsets.arrow,
         popoverOffset: normalizedOffsets.popper,
         placement
@@ -291,7 +293,15 @@ class PopoverInner extends React.Component {
       anchorProps.onBlur = this.props.onBlur;
       anchorProps.onFocus = this.props.onFocus;
     } else {
-      anchorProps.onClick = this.onAnchorClick;
+      anchorProps.onClick = this.onAnchorClick; // Make it focusable too
+
+      if (this.props.onBlur) {
+        anchorProps.onBlur = this.props.onBlur;
+      }
+
+      if (this.props.onFocus) {
+        anchorProps.onFocus = this.props.onFocus;
+      }
     }
 
     return anchorProps;
@@ -302,8 +312,10 @@ class PopoverInner extends React.Component {
     const popoverId = this.getPopoverIdAttr();
 
     if (this.isAccessibilityTypeMenu()) {
+      // @ts-ignore
       bodyProps.id = popoverId;
     } else if (this.isAccessibilityTypeTooltip()) {
+      // @ts-ignore
       bodyProps.id = popoverId;
       bodyProps.role = 'tooltip';
     }
@@ -332,6 +344,7 @@ class PopoverInner extends React.Component {
       $showArrow: !!showArrow,
       $arrowOffset: arrowOffset,
       $popoverOffset: popoverOffset,
+      // @ts-ignore
       $placement: placement,
       $isAnimating: isAnimating,
       $animationDuration: this.props.animateOutTime || ANIMATE_OUT_TIME,
@@ -369,9 +382,13 @@ class PopoverInner extends React.Component {
       return /*#__PURE__*/React.cloneElement(anchor, anchorProps);
     }
 
-    return /*#__PURE__*/React.createElement("span", _extends({
-      key: "popover-anchor"
-    }, anchorProps), anchor);
+    return (
+      /*#__PURE__*/
+      // @ts-ignore
+      React.createElement("span", _extends({
+        key: "popover-anchor"
+      }, anchorProps), anchor)
+    );
   }
 
   renderPopover(renderedContent) {

package/es/popover/stateful-popover.js

@@ -28,6 +28,7 @@ StatefulPopover.defaultProps = {
   triggerType: TRIGGER_TYPE.click,
   dismissOnClickOutside: true,
   dismissOnEsc: true,
+  // @ts-ignore
   stateReducer: (_, nextState) => nextState,
   popoverMargin: POPOVER_MARGIN
 };

package/es/popover/utils.js

@@ -22,6 +22,7 @@ const OPPOSITE_POSITIONS = {
  */
 
 export function getOppositePosition(position) {
+  // @ts-ignore
   return OPPOSITE_POSITIONS[position];
 }
 /**
@@ -44,7 +45,8 @@ export function capitalize(str) {
  */
 
 export function fromPopperPlacement(placement) {
-  const popoverPlacement = placement.replace(/(top|bottom)-start$/, '$1Left').replace(/(top|bottom)-end$/, '$1Right').replace(/(left|right)-start$/, '$1Top').replace(/(left|right)-end$/, '$1Bottom');
+  const popoverPlacement = placement.replace(/(top|bottom)-start$/, '$1Left').replace(/(top|bottom)-end$/, '$1Right').replace(/(left|right)-start$/, '$1Top').replace(/(left|right)-end$/, '$1Bottom'); // @ts-ignore
+
   return PLACEMENT[popoverPlacement] || null;
 }
 /**
@@ -112,6 +114,7 @@ export function getArrowPositionStyles(offsets, placement) {
 
   const alignmentProperty = isVerticalPosition(position) ? 'left' : 'top';
   return {
+    // @ts-ignore
     [alignmentProperty]: `${offsets[alignmentProperty]}px`,
     [oppositePosition]: `-${ARROW_SIZE - 2}px`
   };

package/es/progress-bar/progressbar-rounded.js

@@ -18,7 +18,7 @@ const defaults = {
   TrackBackground: StyledProgressBarRoundedTrackBackground,
   TrackForeground: StyledProgressBarRoundedTrackForeground,
   Text: StyledProgressBarRoundedText
-};
+}; // @ts-ignore
 
 function roundTo(n, digits) {
   if (digits === undefined) {
@@ -68,13 +68,16 @@ function ProgressBarRounded({
       window.cancelAnimationFrame(animationFrameRef.current);
     }
 
-    let animationDuration = Math.max(1000 * (progress - pathProgress), 250);
+    let animationDuration = Math.max(1000 * (progress - pathProgress), 250); // @ts-ignore
+
     let animationTimeStarted;
 
     function loop(now = 0) {
+      // @ts-ignore
       if (!animationTimeStarted) {
         animationTimeStarted = now;
-      }
+      } // @ts-ignore
+
 
       let animationTimeElapsed = now - animationTimeStarted; // Move out of state - might need to reverse calculate the path progress for interruped animations
 
@@ -90,31 +93,27 @@ function ProgressBarRounded({
     loop();
   }, [progress]); // We want *only* `progress` to trigger this effect
 
-  return (
-    /*#__PURE__*/
-    // $FlowExpectedError[cannot-spread-inexact]
-    React.createElement(Root, _extends({
-      "data-baseweb": "progressbar-rounded",
-      role: "progressbar",
-      "aria-valuenow": progress,
-      "aria-valuemin": 0,
-      "aria-valuemax": 1,
-      $size: size,
-      $inline: inline
-    }, restProps, rootProps), /*#__PURE__*/React.createElement(Svg, _extends({
-      $size: size
-    }, restProps, svgProps), /*#__PURE__*/React.createElement(TrackBackground, _extends({
-      $size: size
-    }, trackBackgroundProps)), /*#__PURE__*/React.createElement(TrackForeground, _extends({
-      ref: pathRef,
-      $size: size,
-      $visible: !!pathRef.current,
-      $pathLength: pathLength,
-      $pathProgress: pathProgress
-    }, trackForegroundProps))), /*#__PURE__*/React.createElement(Text, _extends({
-      $size: size
-    }, textProps), roundTo(Math.min(progress * 100, 100)), "%"))
-  );
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    "data-baseweb": "progressbar-rounded",
+    role: "progressbar",
+    "aria-valuenow": progress,
+    "aria-valuemin": 0,
+    "aria-valuemax": 1,
+    $size: size,
+    $inline: inline
+  }, restProps, rootProps), /*#__PURE__*/React.createElement(Svg, _extends({
+    $size: size
+  }, restProps, svgProps), /*#__PURE__*/React.createElement(TrackBackground, _extends({
+    $size: size
+  }, trackBackgroundProps)), /*#__PURE__*/React.createElement(TrackForeground, _extends({
+    ref: pathRef,
+    $size: size,
+    $visible: !!pathRef.current,
+    $pathLength: pathLength,
+    $pathProgress: pathProgress
+  }, trackForegroundProps))), /*#__PURE__*/React.createElement(Text, _extends({
+    $size: size
+  }, textProps), roundTo(Math.min(progress * 100, 100)), "%"));
 }
 
 export default ProgressBarRounded;

package/es/progress-bar/progressbar.js

@@ -62,7 +62,10 @@ class ProgressBar extends React.Component {
       const children = [];
 
       for (let i = 0; i < steps; i++) {
-        children.push( /*#__PURE__*/React.createElement(Bar, _extends({
+        children.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(Bar, _extends({
           key: i
         }, sharedProps, barProps), /*#__PURE__*/React.createElement(BarProgress, _extends({
           $index: i
@@ -74,7 +77,8 @@ class ProgressBar extends React.Component {
 
     return (
       /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+
+      /* eslint-disable jsx-a11y/role-supports-aria-props */
       React.createElement(Root, _extends({
         ref: forwardedRef,
         "data-baseweb": "progress-bar",
@@ -92,6 +96,7 @@ class ProgressBar extends React.Component {
         $size: sharedProps.$size
       }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, maximumValue, minValue)))
     );
+    /* eslint-enable jsx-a11y/role-supports-aria-props */
   }
 
 }
@@ -109,7 +114,8 @@ _defineProperty(ProgressBar, "defaultProps", {
   value: 0
 });
 
-const ForwardedProgressBar = /*#__PURE__*/React.forwardRef((props, ref) =>
+const ForwardedProgressBar = /*#__PURE__*/React.forwardRef( // @ts-ignore
+(props, ref) =>
 /*#__PURE__*/
 //$FlowExpectedError[cannot-spread-inexact]
 React.createElement(ProgressBar, _extends({

package/es/progress-bar/styled-components.js

@@ -10,7 +10,9 @@ import { styled, hexToRgb, withWrapper } from '../styles';
 import { SIZE } from './constants';
 import React from 'react';
 
+// @ts-ignore
 function getBarHeight(size) {
+  // @ts-ignore
   return {
     [SIZE.small]: '2px',
     [SIZE.medium]: '4px',
@@ -64,6 +66,7 @@ export const StyledBar = styled('div', props => {
     height: getBarHeight($size),
     flex: 1,
     overflow: 'hidden',
+    // @ts-ignore
     ...($steps < 2 ? {} : {
       marginLeft: sizing.scale300,
       ':first-child': {
@@ -338,6 +341,7 @@ export const StyledProgressBarRoundedText = styled('div', ({
 }) => {
   return {
     color: $theme.colors.contentPrimary,
+    // @ts-ignore
     ...$theme.typography[PROGRESS_BAR_ROUNDED_SIZES[$size].typography]
   };
 });

package/es/progress-steps/progress-steps.js

@@ -24,6 +24,7 @@ function ProgressSteps({
     const isActive = child.props.isActive !== undefined ? child.props.isActive : index === current;
     return /*#__PURE__*/React.cloneElement(child, {
       isLast: index === numChildren - 1,
+      // @ts-ignore
       isCompleted: index < current,
       isActive,
       step: index + 1,

package/es/radio/radio.js

@@ -12,13 +12,16 @@ import * as React from 'react';
 import { getOverrides } from '../helpers/overrides';
 import { Root as StyledRoot, Label as StyledLabel, Input as StyledInput, RadioMarkInner as StyledRadioMarkInner, RadioMarkOuter as StyledRadioMarkOuter, Description as StyledDescription } from './styled-components';
 
+// @ts-ignore
 function isLabelTopLeft(labelPlacement) {
   return labelPlacement === 'top' || labelPlacement === 'left';
-}
+} // @ts-ignore
+
 
 function isLabelBottomRight(labelPlacement) {
   return labelPlacement === 'bottom' || labelPlacement === 'right';
-}
+} // @ts-ignore
+
 
 const stopPropagation = e => e.stopPropagation();
 

package/es/radio/radiogroup.js

@@ -73,6 +73,7 @@ class StatelessRadioGroup extends React.Component {
 
       const checked = this.props.value === child.props.value;
       return /*#__PURE__*/React.cloneElement(child, {
+        //@ts-ignore
         align: this.props.align,
         autoFocus: this.props.autoFocus,
         checked,

package/es/radio/styled-components.js

@@ -9,11 +9,13 @@ const DEFAULT = 0;
 const HOVERED = 1;
 const ACTIVE = 2;
 
+// @ts-ignore
 function getState(props) {
   if (props.$isActive) return ACTIVE;
   if (props.$isHovered) return HOVERED;
   return DEFAULT;
-}
+} // @ts-ignore
+
 
 function getOuterColor(props) {
   const {
@@ -58,7 +60,8 @@ function getOuterColor(props) {
   }
 
   return null;
-}
+} // @ts-ignore
+
 
 function getInnerColor(props) {
   const {
@@ -96,7 +99,8 @@ function getInnerColor(props) {
   } else {
     return colors.tickMarkFill;
   }
-}
+} // @ts-ignore
+
 
 function getLabelPadding(props) {
   const {
@@ -133,7 +137,8 @@ function getLabelPadding(props) {
   return {
     [`padding${paddingDirection}`]: scale300
   };
-}
+} // @ts-ignore
+
 
 function getLabelColor(props) {
   const {
@@ -161,7 +166,8 @@ export const RadioGroupRoot = styled('div', props => {
   };
 });
 RadioGroupRoot.displayName = "RadioGroupRoot";
-RadioGroupRoot.displayName = 'RadioGroupRoot';
+RadioGroupRoot.displayName = 'RadioGroupRoot'; // @ts-ignore
+
 export const Root = styled('label', props => {
   const {
     $disabled,

package/es/rating/emoticon-rating.js

@@ -68,16 +68,21 @@ class EmoticonRating extends React.Component {
         previewIndex
       } = this.state;
       const [Emoticon, emoticonProps] = getOverrides(overrides.Item, StyledEmoticon);
-      const ratings = [];
+      const ratings = []; // @ts-ignore
+
       const refs = [{
         current: null
       }];
 
       for (let x = 1; x <= 5; x++) {
         const isFocusable = x === value || value < 1 && x === 1;
-        const starRef = /*#__PURE__*/React.createRef();
+        const starRef = /*#__PURE__*/React.createRef(); // @ts-ignore
+
         refs.push(starRef);
-        ratings.push( /*#__PURE__*/React.createElement(Emoticon, _extends({
+        ratings.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(Emoticon, _extends({
           key: x,
           role: "radio" // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ,
@@ -99,7 +104,8 @@ class EmoticonRating extends React.Component {
             }
 
             this.selectItem(x);
-          },
+          } // @ts-ignore
+          ,
           onKeyDown: e => {
             if (readOnly) {
               return;
@@ -109,14 +115,16 @@ class EmoticonRating extends React.Component {
               e.preventDefault && e.preventDefault(); // 5 value comes from non-configurable number of icons
 
               const prevIndex = value - 1 < 1 ? 5 : value - 1;
-              this.selectItem(prevIndex);
+              this.selectItem(prevIndex); // @ts-ignore
+
               refs[prevIndex].current && refs[prevIndex].current.focus();
             }
 
             if (e.keyCode === ARROW_DOWN || e.keyCode === ARROW_RIGHT) {
               e.preventDefault && e.preventDefault();
               const nextIndex = value + 1 > 5 ? 1 : value + 1;
-              this.selectItem(nextIndex);
+              this.selectItem(nextIndex); // @ts-ignore
+
               refs[nextIndex].current && refs[nextIndex].current.focus();
             }
           },
@@ -143,7 +151,8 @@ class EmoticonRating extends React.Component {
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "emoticon-rating",
-      role: "radiogroup",
+      role: "radiogroup" // @ts-ignore
+      ,
       onBlur: e => {
         if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
       },

package/es/rating/star-rating.js

@@ -69,16 +69,21 @@ class StarRating extends React.Component {
         previewIndex
       } = this.state;
       const [Star, starProps] = getOverrides(overrides.Item, StyledStar);
-      const ratings = [];
+      const ratings = []; // @ts-ignore
+
       const refs = [{
         current: null
       }];
 
       for (let x = 1; x <= numItems; x++) {
         const isFocusable = x === value || value < 1 && x === 1;
-        const starRef = /*#__PURE__*/React.createRef();
+        const starRef = /*#__PURE__*/React.createRef(); // @ts-ignore
+
         refs.push(starRef);
-        ratings.push( /*#__PURE__*/React.createElement(Star, _extends({
+        ratings.push(
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement(Star, _extends({
           key: x,
           role: "radio",
           title: "rating" // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -102,7 +107,8 @@ class StarRating extends React.Component {
             }
 
             this.selectItem(x);
-          },
+          } // @ts-ignore
+          ,
           onKeyDown: e => {
             if (readOnly) {
               return;
@@ -111,14 +117,16 @@ class StarRating extends React.Component {
             if (e.keyCode === ARROW_UP || e.keyCode === ARROW_LEFT) {
               e.preventDefault && e.preventDefault();
               const prevIndex = value - 1 < 1 ? numItems : value - 1;
-              this.selectItem(prevIndex);
+              this.selectItem(prevIndex); // @ts-ignore
+
               refs[prevIndex].current && refs[prevIndex].current.focus();
             }
 
             if (e.keyCode === ARROW_DOWN || e.keyCode === ARROW_RIGHT) {
               e.preventDefault && e.preventDefault();
               const nextIndex = value + 1 > numItems ? 1 : value + 1;
-              this.selectItem(nextIndex);
+              this.selectItem(nextIndex); // @ts-ignore
+
               refs[nextIndex].current && refs[nextIndex].current.focus();
             }
           },
@@ -146,7 +154,8 @@ class StarRating extends React.Component {
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "star-rating",
-      role: "radiogroup",
+      role: "radiogroup" // @ts-ignore
+      ,
       onBlur: e => {
         if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
       },

package/es/rating/styled-components.js

@@ -64,6 +64,7 @@ export const StyledStar = styled('li', ({
     width: `${$size}px`,
     height: `${$size}px`,
     lineHeight: 1,
+    // @ts-ignore
     transform: $isSelected ? 'scale(1.35)' : null,
     outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
     outlineOffset: '2px',
@@ -122,6 +123,7 @@ export const StyledEmoticon = styled('li', ({
     marginRight: $theme.sizing.scale300,
     width: `${$size}px`,
     height: `${$size}px`,
+    // @ts-ignore
     transform: $isSelected ? 'scale(1.1)' : null,
     outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
     outlineOffset: '2px',

package/es/select/default-props.js

@@ -7,9 +7,13 @@ LICENSE file in the root directory of this source tree.
 import defaultFilterOptions from './utils/default-filter-options';
 import { TYPE, SIZE } from './constants';
 const defaultProps = {
+  // @ts-ignore
   'aria-label': null,
+  // @ts-ignore
   'aria-describedby': null,
+  // @ts-ignore
   'aria-errormessage': null,
+  // @ts-ignore
   'aria-labelledby': null,
   autoFocus: false,
   backspaceRemoves: true,
@@ -23,7 +27,9 @@ const defaultProps = {
   escapeClearsValue: true,
   filterOptions: defaultFilterOptions,
   filterOutSelected: true,
+  // @ts-ignore
   getOptionLabel: null,
+  // @ts-ignore
   getValueLabel: null,
   ignoreCase: true,
   isLoading: false,
@@ -37,16 +43,20 @@ const defaultProps = {
   onInputChange: () => {},
   onCloseResetsInput: true,
   onSelectResetsInput: true,
+  // @ts-ignore
   onOpen: null,
+  // @ts-ignore
   onClose: null,
   openOnClick: true,
   startOpen: false,
+  // @ts-ignore
   options: [],
   overrides: {},
   required: false,
   searchable: true,
   size: SIZE.default,
   type: TYPE.select,
+  // @ts-ignore
   value: [],
   valueKey: 'id'
 };

package/es/select/dropdown.js

@@ -49,6 +49,7 @@ export default class SelectDropdown extends React.Component {
       if (Array.isArray(value)) {
         $selected = !!value.find(selected => selected && selected[valueKey] === option[valueKey]);
       } else {
+        // @ts-ignore
         $selected = value[valueKey] === option[valueKey];
       }
 
@@ -142,7 +143,8 @@ export default class SelectDropdown extends React.Component {
       "data-no-focus-lock": true,
       ref: this.props.innerRef
     }, this.getSharedProps(), dropdownContainerProps), /*#__PURE__*/React.createElement(OverriddenStatefulMenu, _extends({
-      noResultsMsg: noResultsMsg,
+      noResultsMsg: noResultsMsg // @ts-ignore
+      ,
       onActiveDescendantChange: id => {
         if (this.props.onActiveDescendantChange) {
           this.props.onActiveDescendantChange(id);

package/es/select/multi-value.js

@@ -22,6 +22,7 @@ export default function MultiValue(props) {
     variant: TAG_VARIANT.solid,
     overrides: {
       Root: {
+        // @ts-ignore
         style: ({
           $theme: {
             sizing