baseui 10.7.2 → 10.9.0

package/es/map-marker/styled-components.js

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles/index.js';
-import { FLOATING_MARKER_ANCHOR_POSITIONS, xSmallPinheadDimension } from './constants.js';
+import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES } from './constants.js';
 export const getAnchorTransform = (anchor, anchorSize) => ({
   [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
   [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
@@ -13,7 +13,7 @@ export const getAnchorTransform = (anchor, anchorSize) => ({
   [FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft]: `translate(${anchorSize}px, -100%)`,
   [FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight]: `translate(-100%, -100%)`
 })[anchor];
-export const DragShadowContainer = styled('div', ({
+export const StyledDragShadowContainer = styled('div', ({
   $theme,
   $height,
   $width,
@@ -27,38 +27,40 @@ export const DragShadowContainer = styled('div', ({
   position: 'relative',
   boxShadow: $theme.lighting.shadow600
 }));
-DragShadowContainer.displayName = "DragShadowContainer";
-export const DragShadow = styled('div', ({
+StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
+export const StyledDragShadow = styled('div', ({
   $theme,
   $background,
   $width
 }) => ({
-  background: $background,
+  backgroundColor: $background,
   borderRadius: '50%',
   width: `${$width}px`,
-  height: `${4}px`,
+  height: '4px',
   position: 'absolute',
   bottom: 0
 }));
-DragShadow.displayName = "DragShadow";
-export const Needle = styled('div', ({
+StyledDragShadow.displayName = "StyledDragShadow";
+export const StyledNeedle = styled('div', ({
   $theme,
   $background,
   $height
 }) => ({
-  background: $background,
+  backgroundColor: $background,
   width: '4px',
   height: `${$height}px`,
   boxShadow: $theme.lighting.shadow600
 }));
-Needle.displayName = "Needle";
-export const FloatingMarkerRoot = styled('div', () => ({
+StyledNeedle.displayName = "StyledNeedle";
+export const StyledFloatingMarkerRoot = styled('div', ({
+  $size
+}) => ({
   position: 'relative',
-  height: `${xSmallPinheadDimension.height}px`,
-  width: `${xSmallPinheadDimension.height}px`
+  height: `${$size}px`,
+  width: `${$size}px`
 }));
-FloatingMarkerRoot.displayName = "FloatingMarkerRoot";
-export const FloatingMarkerPinHeadContainer = styled('div', ({
+StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
+export const StyledFloatingMarkerPinHeadContainer = styled('div', ({
   $theme,
   $anchor,
   $anchorSize
@@ -67,38 +69,65 @@ export const FloatingMarkerPinHeadContainer = styled('div', ({
   transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
   transform: getAnchorTransform($anchor, $anchorSize)
 }));
-FloatingMarkerPinHeadContainer.displayName = "FloatingMarkerPinHeadContainer";
-export const FloatingMarkerAnchorContainer = styled('div', () => ({
+StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
+export const StyledFloatingMarkerAnchorContainer = styled('div', () => ({
   position: 'absolute'
 }));
-FloatingMarkerAnchorContainer.displayName = "FloatingMarkerAnchorContainer";
-export const FixedMarkerRoot = styled('div', () => ({
+StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
+export const StyledFixedMarkerRoot = styled('div', () => ({
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column'
 }));
-FixedMarkerRoot.displayName = "FixedMarkerRoot";
-export const FixedMarkerDragContainer = styled('div', ({
+StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
+export const StyledFixedMarkerDragContainer = styled('div', ({
   $theme,
   $translateAmount,
   $performTranslate
 }) => {
   return {
-    transform: `translateY(${$performTranslate ? '0px' : `${$translateAmount}px`})`,
+    transform: `translateY(${$performTranslate ? `${$translateAmount}px` : '0px'})`,
     transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'column'
   };
 });
-FixedMarkerDragContainer.displayName = "FixedMarkerDragContainer";
-export const OuterXSmallAnchor = styled('div', ({
+StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
+export const StyledOuterXXSmallAnchor = styled('div', ({
+  $theme,
+  $round,
+  $background,
+  $size
+}) => ({
+  backgroundColor: $background,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0,
+  boxShadow: $theme.lighting.shadow600
+}));
+StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
+export const StyledInnerXXSmallAnchor = styled('div', ({
+  $round,
+  $color,
+  $size
+}) => ({
+  backgroundColor: $color,
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0
+}));
+StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
+export const StyledOuterXSmallAnchor = styled('div', ({
   $theme,
   $round,
   $background,
   $size
 }) => ({
-  background: $background,
+  backgroundColor: $background,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -107,19 +136,19 @@ export const OuterXSmallAnchor = styled('div', ({
   borderRadius: $round ? '50%' : 0,
   boxShadow: $theme.lighting.shadow600
 }));
-OuterXSmallAnchor.displayName = "OuterXSmallAnchor";
-export const InnerXSmallAnchor = styled('div', ({
+StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
+export const StyledInnerXSmallAnchor = styled('div', ({
   $round,
   $color,
   $size
 }) => ({
-  background: $color,
+  backgroundColor: $color,
   height: `${$size}px`,
   width: `${$size}px`,
   borderRadius: $round ? '50%' : 0
 }));
-InnerXSmallAnchor.displayName = "InnerXSmallAnchor";
-export const PinHead = styled('div', ({
+StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
+export const StyledPinHead = styled('div', ({
   $theme,
   $height,
   $background,
@@ -137,7 +166,7 @@ export const PinHead = styled('div', ({
     }
   };
   return {
-    background: $background,
+    backgroundColor: $background,
     height: `${$height}px`,
     display: 'grid',
     gridTemplateColumns: $gridTemplateColumns,
@@ -153,4 +182,120 @@ export const PinHead = styled('div', ({
     })
   };
 });
-PinHead.displayName = "PinHead";
+StyledPinHead.displayName = "StyledPinHead";
+export const StyledStrokedLabelContainer = styled('div', ({
+  $position,
+  $theme,
+  $labelOffset
+}) => {
+  const staticLabelOffset = 4;
+  const positions = {
+    top: {
+      left: `calc(50% + ${staticLabelOffset}px)`,
+      bottom: '100%',
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    bottom: {
+      left: '50%',
+      top: `calc(100% + ${staticLabelOffset}px + ${$labelOffset}px)`,
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    right: {
+      left: `calc(100% + ${staticLabelOffset}px)`,
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-start'
+    },
+    left: {
+      right: `calc(100% + ${staticLabelOffset}px)`,
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      textAlign: 'right'
+    },
+    none: {}
+  };
+  return {
+    position: 'absolute',
+    width: '0px',
+    height: '0px',
+    pointerEvents: 'none',
+    display: 'flex',
+    ...positions[$position]
+  };
+});
+StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
+export const StyledStrokedLabel = styled('div', ({
+  $theme,
+  $size
+}) => {
+  const strokeWidth = 1.5;
+  const strokeColor = $theme.colors.backgroundPrimary;
+  const textShadow = `-${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+    0 -${strokeWidth}px 0 ${strokeColor},
+    ${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+    ${strokeWidth}px 0 0 ${strokeColor},
+    ${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+    0 ${strokeWidth}px 0 ${strokeColor},
+   -${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+   -${strokeWidth}px 0 0 ${strokeColor}`;
+  return {
+    display: 'flex',
+    ...$theme.typography[LABEL_SIZES[$size]],
+    color: $theme.colors.primaryA,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    textShadow,
+    pointerEvents: 'auto',
+    width: 'max-content',
+    maxWidth: '200px'
+  };
+});
+StyledStrokedLabel.displayName = "StyledStrokedLabel";
+export const StyledBadgeEnhancerRoot = styled('div', ({
+  $theme,
+  $size,
+  $position
+}) => {
+  const {
+    x,
+    y
+  } = $position;
+  return {
+    position: 'absolute',
+    ...$theme.typography.LabelSmall,
+    backgroundColor: $theme.colors.backgroundAccent,
+    color: $theme.colors.primaryB,
+    boxSizing: 'border-box',
+    right: 0,
+    transform: `translate(calc(100% + ${x}px), ${y}px)`,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    ...BADGE_ENHANCER_STYLES[$size]
+  };
+});
+StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
+export const RelativeContainer = styled('div', () => {
+  return {
+    position: 'relative'
+  };
+});
+RelativeContainer.displayName = "RelativeContainer";
+export const StyledContentItem = styled('div', ({
+  $theme,
+  $color,
+  $height,
+  $size
+}) => {
+  return { ...$theme.typography[LABEL_SIZES[$size]],
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    lineHeight: `${$height}px`,
+    height: `${$height}px`,
+    color: $color
+  };
+});
+StyledContentItem.displayName = "StyledContentItem";

package/es/map-marker/types.js

@@ -5,4 +5,4 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import { FLOATING_MARKER_ANCHOR_POSITIONS, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, FLOATING_MARKER_SIZES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES } from './constants.js';
+import { FLOATING_MARKER_ANCHOR_POSITIONS, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, FLOATING_MARKER_SIZES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND } from './constants.js';

package/es/menu/maybe-child-menu.js

@@ -43,8 +43,6 @@ export default function MaybeChildMenu(props) {
       overrides: mergeOverrides({
         Body: {
           props: {
-            // Adds mouseleave to popover body so that child menu closes when user mouses out.
-            onMouseLeave: props.resetParentMenu,
             // Trap tabbing when focused on a child menu. Popover mounts the element at the end of
             // the html body by default. If a user was to tab to the next element it would navigate
             // to elements not within the immediate area surrounding the menu.

package/es/menu/nested-menus.js

@@ -12,6 +12,8 @@ export const NestedMenuContext = /*#__PURE__*/React.createContext({
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   mountRef: {
     current: null
   }
@@ -30,16 +32,43 @@ export default class NestedMenus extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      menus: []
+      menus: [],
+      nestedMenuHoverIndex: -1
     });
 
     _defineProperty(this, "mountRef", /*#__PURE__*/React.createRef());
 
+    _defineProperty(this, "mouseLeaveTimeoueId", null);
+
+    _defineProperty(this, "handleMenuMouseLeave", event => {
+      this.mouseLeaveTimeoueId = setTimeout(() => {
+        this.setState({
+          nestedMenuHoverIndex: -1
+        });
+      }, 200);
+    });
+
+    _defineProperty(this, "handleMenuMouseEnter", event => {
+      if (typeof document !== 'undefined') {
+        clearTimeout(this.mouseLeaveTimeoueId);
+        const index = this.state.menus.findIndex(m => {
+          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+        });
+        this.setState({
+          nestedMenuHoverIndex: index
+        });
+      }
+    });
+
     _defineProperty(this, "addMenuToNesting", ref => {
       // check offsetHeight to determine if component is visible in the dom (0 means hidden)
       // we need to do this so that when we renderAll, the hidden seo-only child-menus don't
       // register themselves which would break the nesting logic
-      if (ref.current && ref.current.offsetHeight) {
+      const element = ref.current;
+
+      if (element && element.offsetHeight) {
+        element.addEventListener('mouseenter', this.handleMenuMouseEnter);
+        element.addEventListener('mouseleave', this.handleMenuMouseLeave);
         this.setState(state => {
           return {
             menus: [...state.menus, ref]
@@ -50,7 +79,17 @@ export default class NestedMenus extends React.Component {
 
     _defineProperty(this, "removeMenuFromNesting", ref => {
       this.setState(state => {
-        const nextMenus = state.menus.filter(r => r.current).filter(r => !isSame(r.current, ref.current));
+        for (const r of this.state.menus) {
+          if (r.current && isSame(r.current, ref.current)) {
+            const element = r.current;
+            element.removeEventListener('mouseenter', this.handleMenuMouseEnter);
+            element.removeEventListener('mouseleave', this.handleMenuMouseLeave);
+          }
+        }
+
+        const nextMenus = state.menus.filter(r => {
+          return r.current && !isSame(r.current, ref.current);
+        });
         return {
           menus: nextMenus
         };
@@ -70,6 +109,11 @@ export default class NestedMenus extends React.Component {
       const index = this.findMenuIndexByRef(ref) + 1;
       return this.state.menus[index];
     });
+
+    _defineProperty(this, "isNestedMenuVisible", ref => {
+      const index = this.findMenuIndexByRef(ref);
+      return index <= this.state.nestedMenuHoverIndex;
+    });
   }
 
   render() {
@@ -79,6 +123,8 @@ export default class NestedMenus extends React.Component {
         removeMenuFromNesting: this.removeMenuFromNesting,
         getParentMenu: this.getParentMenu,
         getChildMenu: this.getChildMenu,
+        isNestedMenuVisible: this.isNestedMenuVisible,
+        nestedMenuHoverIndex: this.state.nestedMenuHoverIndex,
         mountRef: this.mountRef
       }
     }, /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children, /*#__PURE__*/React.createElement("span", {

package/es/menu/stateful-container.js

@@ -34,6 +34,8 @@ const DEFAULT_PROPS = {
   removeMenuFromNesting: () => {},
   getParentMenu: () => {},
   getChildMenu: () => {},
+  nestedMenuHoverIndex: -1,
+  isNestedMenuVisible: () => false,
   forceHighlight: false
 };
 
@@ -223,16 +225,7 @@ class MenuStatefulContainerInner extends React.Component {
       });
     });
 
-    _defineProperty(this, "handleMouseLeave", () => {
-      const rootRef = this.props.rootRef ? this.props.rootRef : this.rootRef;
-      const childMenu = this.props.getChildMenu && this.props.getChildMenu(rootRef);
-
-      if (!this.props.forceHighlight && !childMenu) {
-        this.internalSetState(STATE_CHANGE_TYPES.mouseLeave, {
-          highlightedIndex: -1
-        });
-      }
-    });
+    _defineProperty(this, "handleMouseLeave", event => {});
 
     _defineProperty(this, "getRequiredItemProps", (item, index) => {
       let itemRef = this.refList[index];
@@ -339,10 +332,12 @@ class MenuStatefulContainerInner extends React.Component {
       if (this.keyboardControlNode) this.keyboardControlNode.removeEventListener('keydown', this.onKeyDown);
     }
 
-    this.props.removeMenuFromNesting && this.props.removeMenuFromNesting(rootRef);
+    if (this.props.removeMenuFromNesting) {
+      this.props.removeMenuFromNesting(rootRef);
+    }
   }
 
-  componentDidUpdate(_, prevState) {
+  componentDidUpdate(prevProps, prevState) {
     if (typeof document !== 'undefined') {
       if (!prevState.isFocused && this.state.isFocused) {
         if (this.keyboardControlNode) this.keyboardControlNode.addEventListener('keydown', this.onKeyDown);
@@ -368,6 +363,12 @@ class MenuStatefulContainerInner extends React.Component {
         highlightedIndex: 0
       });
     }
+
+    if (this.props.isNestedMenuVisible && this.props.nestedMenuHoverIndex !== prevProps.nestedMenuHoverIndex && !this.props.isNestedMenuVisible(this.rootRef) && !this.props.forceHighlight) {
+      this.setState({
+        highlightedIndex: -1
+      });
+    }
   } // One array to hold all of list item refs
 
 

package/es/modal/modal.js

@@ -300,7 +300,9 @@ class Modal extends React.Component {
       ref: this.getRef('DialogContainer')
     } : {};
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(FocusLock, {
-      disabled: !focusLock,
+      disabled: !focusLock // Allow focus to escape when UI is within an iframe
+      ,
+      crossFrame: false,
       returnFocus: returnFocus,
       autoFocus: autofocus !== null ? autofocus : autoFocus
     }, /*#__PURE__*/React.createElement(Root, _extends({

package/es/popover/popover.js

@@ -447,14 +447,18 @@ class PopoverInner extends React.Component {
           },
           onPopperUpdate: this.onPopperUpdate,
           placement: this.state.placement
-        }, /*#__PURE__*/React.createElement(FocusLock, {
+        }, this.props.focusLock ? /*#__PURE__*/React.createElement(FocusLock, {
           disabled: !this.props.focusLock,
           noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
           ,
           returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
-          autoFocus: this.state.autoFocusAfterPositioning,
+          autoFocus: this.state.autoFocusAfterPositioning // Allow focus to escape when UI is within an iframe
+          ,
+          crossFrame: false,
           focusOptions: this.props.focusOptions
-        }, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
+        }, this.renderPopover(renderedContent)) : /*#__PURE__*/React.createElement(MoveFocusInside, {
+          disabled: !this.props.autoFocus && !this.state.autoFocusAfterPositioning
+        }, this.renderPopover(renderedContent)))));
       } else {
         rendered.push( /*#__PURE__*/React.createElement(Hidden, {
           key: "hidden-layer"

package/es/progress-bar/index.js

@@ -8,4 +8,4 @@ export { default as ProgressBar } from './progressbar.js';
 export { default as ProgressBarRounded } from './progressbar-rounded.js';
 export { SIZE } from './constants.js'; // Styled elements
 
-export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow
+export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledInfiniteBar, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow

package/es/progress-bar/progressbar.js

@@ -32,10 +32,16 @@ class ProgressBar extends React.Component {
       size,
       steps,
       successValue,
+      minValue,
+      maxValue,
       showLabel,
       infinite,
-      errorMessage
-    } = this.props;
+      errorMessage,
+      forwardedRef,
+      ...restProps
+    } = this.props; // fallback on successValue (and it's default) if maxValue is not set by user
+
+    const maximumValue = maxValue !== 100 ? maxValue : successValue;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [BarContainer, barContainerProps] = getOverrides(overrides.BarContainer, StyledBarContainer);
     const [Bar, barProps] = getOverrides(overrides.Bar, StyledBar);
@@ -46,7 +52,9 @@ class ProgressBar extends React.Component {
       $infinite: infinite,
       $size: size,
       $steps: steps,
-      $successValue: successValue,
+      $successValue: maximumValue,
+      $minValue: minValue,
+      $maxValue: maximumValue,
       $value: value
     };
 
@@ -68,34 +76,41 @@ class ProgressBar extends React.Component {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/role-supports-aria-props
       React.createElement(Root, _extends({
+        ref: forwardedRef,
         "data-baseweb": "progress-bar",
         role: "progressbar",
-        "aria-label": ariaLabel || getProgressLabel(value, successValue),
+        "aria-label": ariaLabel || getProgressLabel(value, maximumValue, minValue),
         "aria-valuenow": infinite ? null : value,
-        "aria-valuemin": infinite ? null : 0,
-        "aria-valuemax": infinite ? null : successValue,
+        "aria-valuemin": infinite ? null : minValue,
+        "aria-valuemax": infinite ? null : maximumValue,
         "aria-invalid": errorMessage ? true : null,
         "aria-errormessage": errorMessage
-      }, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
+      }, restProps, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
         $isLeft: true,
         $size: sharedProps.$size
       }, infiniteBarProps)), /*#__PURE__*/React.createElement(InfiniteBar, _extends({
         $size: sharedProps.$size
-      }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, successValue)))
+      }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, maximumValue, minValue)))
     );
   }
 
 }
 
 _defineProperty(ProgressBar, "defaultProps", {
-  getProgressLabel: (value, successValue) => `${Math.round(value / successValue * 100)}% Loaded`,
+  getProgressLabel: (value, maxValue, minValue) => `${Math.round((value - minValue) / (maxValue - minValue) * 100)}% Loaded`,
   infinite: false,
   overrides: {},
   showLabel: false,
   size: SIZE.medium,
   steps: 1,
   successValue: 100,
+  minValue: 0,
+  maxValue: 100,
   value: 0
 });
 
-export default ProgressBar;
+const ForwardedProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ProgressBar, _extends({
+  forwardedRef: ref
+}, props)));
+ForwardedProgressBar.displayName = 'ProgressBar';
+export default ForwardedProgressBar;

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

@@ -76,14 +76,18 @@ export const StyledBarProgress = styled('div', props => {
     $value,
     $successValue,
     $steps,
-    $index
-  } = props;
+    $index,
+    $maxValue,
+    $minValue = 0
+  } = props; // making sure this doesn't break existing use that use StyledBarProgress directly
+
+  const maxValue = $maxValue ? $maxValue : $successValue;
   const {
     colors,
     sizing,
     borders
   } = $theme;
-  const width = `${100 - $value / $successValue * 100}%`;
+  const width = `${100 - ($value - $minValue) * 100 / (maxValue - $minValue)}%`;
   const stepStates = {
     default: 'default',
     awaits: 'awaits',
@@ -93,8 +97,8 @@ export const StyledBarProgress = styled('div', props => {
   let stepState = stepStates.default;
 
   if ($steps > 1) {
-    const stepValue = $successValue / $steps;
-    const currentValue = $value / $successValue * 100;
+    const stepValue = (maxValue - $minValue) / $steps;
+    const currentValue = ($value - $minValue) / (maxValue - $minValue) * 100;
     const completedSteps = Math.floor(currentValue / stepValue);
 
     if ($index < completedSteps) {

package/es/select/select-component.js

@@ -124,11 +124,6 @@ class Select extends React.Component {
       this.handleClick(event);
     });
 
-    _defineProperty(this, "handleTouchEndClearValue", event => {
-      if (this.dragging) return;
-      this.clearValue(event);
-    });
-
     _defineProperty(this, "handleClick", event => {
       if (this.props.disabled || !isClick(event) && !isLeftClick(event)) {
         return;
@@ -741,7 +736,7 @@ class Select extends React.Component {
         "aria-required": this.props.required || null,
         onFocus: this.handleInputFocus,
         tabIndex: 0
-      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
+      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
         "aria-hidden": true,
         id: this.props.id || null,
         ref: this.handleInputRef,
@@ -753,7 +748,7 @@ class Select extends React.Component {
           padding: 0
         },
         tabIndex: -1
-      }));
+      }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
     }
 
     return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
@@ -800,9 +795,6 @@ class Select extends React.Component {
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,
-      onTouchEnd: this.handleTouchEndClearValue,
-      onTouchMove: this.handleTouchMove,
-      onTouchStart: this.handleTouchStart,
       role: "button",
       overrides: {
         Svg: {