baseui 10.2.1 → 10.6.0

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

@@ -0,0 +1,177 @@
+/*
+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.
+*/
+// @flow
+import {styled} from '../styles/index.js';
+import {
+  FLOATING_MARKER_ANCHOR_POSITIONS,
+  xSmallPinheadDimension,
+} from './constants.js';
+
+import type {AnchorPositionsT} from './types.js';
+
+export const getAnchorTransform = (
+  anchor: AnchorPositionsT,
+  anchorSize: number,
+) =>
+  ({
+    [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
+    [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
+    [FLOATING_MARKER_ANCHOR_POSITIONS.topRight]: `translate(-100%, ${anchorSize}px)`,
+    [FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft]: `translate(${anchorSize}px, -100%)`,
+    [FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight]: `translate(-100%, -100%)`,
+  }[anchor]);
+
+export const DragShadowContainer = styled<{
+  $height: number,
+  $width: number,
+  $dragging: boolean,
+}>('div', ({$theme, $height, $width, $dragging}) => ({
+  width: `${$width}px`,
+  height: `${$height}px`,
+  opacity: $dragging ? 1 : 0,
+  visibility: $dragging ? 'visible' : 'hidden',
+  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+  position: 'relative',
+  boxShadow: $theme.lighting.shadow600,
+}));
+
+export const DragShadow = styled<{
+  $background: string,
+  $width: number,
+}>('div', ({$theme, $background, $width}) => ({
+  background: $background,
+  borderRadius: '50%',
+  width: `${$width}px`,
+  height: `${4}px`,
+  position: 'absolute',
+  bottom: 0,
+}));
+
+export const Needle = styled<{
+  $background?: string,
+  $height: number,
+}>('div', ({$theme, $background, $height}) => ({
+  background: $background,
+  width: '4px',
+  height: `${$height}px`,
+  boxShadow: $theme.lighting.shadow600,
+}));
+
+export const FloatingMarkerRoot = styled<{}>('div', () => ({
+  position: 'relative',
+  height: `${xSmallPinheadDimension.height}px`,
+  width: `${xSmallPinheadDimension.height}px`,
+}));
+
+export const FloatingMarkerPinHeadContainer = styled<{
+  $anchor: AnchorPositionsT,
+  $anchorSize: number,
+}>('div', ({$theme, $anchor, $anchorSize}) => ({
+  position: 'absolute',
+  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+  transform: getAnchorTransform($anchor, $anchorSize),
+}));
+
+export const FloatingMarkerAnchorContainer = styled<{}>('div', () => ({
+  position: 'absolute',
+}));
+
+export const FixedMarkerRoot = styled<{}>('div', () => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+}));
+
+export const FixedMarkerDragContainer = styled<{
+  $translateAmount: number,
+  $performTranslate: boolean,
+}>('div', ({$theme, $translateAmount, $performTranslate}) => {
+  return {
+    transform: `translateY(${
+      $performTranslate ? '0px' : `${$translateAmount}px`
+    })`,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+  };
+});
+
+export const OuterXSmallAnchor = styled<{
+  $round: boolean,
+  $background: string,
+  $size: number,
+}>('div', ({$theme, $round, $background, $size}) => ({
+  background: $background,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0,
+  boxShadow: $theme.lighting.shadow600,
+}));
+
+export const InnerXSmallAnchor = styled<{
+  $round: boolean,
+  $color: string,
+  $size: number,
+}>('div', ({$round, $color, $size}) => ({
+  background: $color,
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0,
+}));
+
+export const PinHead = styled<{
+  $height: number,
+  $background: string,
+  $gridTemplateColumns: string,
+  $type: string,
+  $forceCircle: boolean,
+}>(
+  'div',
+  ({
+    $theme,
+    $height,
+    $background,
+    $gridTemplateColumns,
+    $type,
+    $forceCircle,
+  }) => {
+    const sharedStyles = {
+      fixed: {
+        padding: '0px 12px',
+        borderRadius: `${$height}px`,
+      },
+      floating: {
+        padding: '0px 8px',
+      },
+    };
+
+    return {
+      background: $background,
+      height: `${$height}px`,
+      display: 'grid',
+      gridTemplateColumns: $gridTemplateColumns,
+      gap: '8px',
+      boxShadow: $theme.lighting.shadow600,
+      whiteSpace: 'nowrap',
+      ...sharedStyles[$type],
+      ...($forceCircle && {
+        width: `${$height}px`,
+        display: 'flex',
+        justifyContent: 'center',
+        boxSizing: 'border-box',
+      }),
+    };
+  },
+);
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/map-marker/types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var React = _interopRequireWildcard(require("react"));
+
+var _constants = require("./constants.js");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/map-marker/types.js.flow

@@ -0,0 +1,114 @@
+/*
+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.
+*/
+// @flow
+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 type {OverrideT} from '../helpers/overrides.js';
+
+export type PinHeadT = $Values<typeof PINHEAD_TYPES>;
+
+export type AnchorPositionsT = $Values<typeof FLOATING_MARKER_ANCHOR_POSITIONS>;
+
+export type NeedleSizeT = $Values<typeof NEEDLE_SIZES>;
+
+export type PinHeadSizeT = $Values<typeof PINHEAD_SIZES_SHAPES>;
+
+export type FloatingMarkerSizeT = $Values<typeof FLOATING_MARKER_SIZES>;
+
+/* eslint-disable flowtype/generic-spacing*/
+export type FloatingMarkerAnchorTypeT = $Values<
+  typeof FLOATING_MARKER_ANCHOR_TYPES,
+>;
+
+export type NeedlePropsT = {
+  size: NeedleSizeT,
+  background?: string,
+  overrides: FixedMarkerOverridesT,
+};
+
+export type ItemPropsT = {
+  children?: React.Node,
+  color?: string,
+  size?: number,
+};
+
+export type FixedMarkerOverridesT = {
+  Root?: OverrideT,
+  InnerAnchor?: OverrideT,
+  OuterAnchor?: OverrideT,
+  PinHead?: OverrideT,
+  PinHeadContent?: OverrideT,
+  PinHeadContainer?: OverrideT,
+  Needle?: OverrideT,
+  DragShadow?: OverrideT,
+  DragShadowContainer?: OverrideT,
+  DragContainer?: OverrideT,
+};
+
+export type FixedMarkerPropsT = {
+  size?: PinHeadSizeT,
+  needle?: NeedleSizeT,
+  label?: string,
+  startEnhancer?: React.AbstractComponent<{|size: number|}>,
+  endEnhancer?: React.AbstractComponent<{|size: number|}>,
+  color?: string,
+  background?: string,
+  dragging?: boolean,
+  overrides?: FixedMarkerOverridesT,
+};
+
+export type FloatingMarkerOverridesT = {
+  Root?: OverrideT,
+  InnerAnchor?: OverrideT,
+  OuterAnchor?: OverrideT,
+  PinHead?: OverrideT,
+  PinHeadContent?: OverrideT,
+  PinHeadContainer?: OverrideT,
+  AnchorContainer?: OverrideT,
+};
+
+export type FloatingMarkerPropsT = {
+  color?: string,
+  background?: string,
+  label?: string,
+  anchor?: AnchorPositionsT,
+  endEnhancer?: React.AbstractComponent<{|size: number|}>,
+  startEnhancer?: React.AbstractComponent<{|size: number|}>,
+  anchorType?: FloatingMarkerAnchorTypeT,
+  size?: FloatingMarkerSizeT,
+  overrides?: FloatingMarkerOverridesT,
+};
+
+export type PinHeadPropsT = {
+  size?: PinHeadSizeT,
+  label?: string,
+  endEnhancer?: React.AbstractComponent<{|size: number|}>,
+  startEnhancer?: React.AbstractComponent<{|size: number|}>,
+  color?: string,
+  background?: string,
+  type?: PinHeadT,
+  anchorType?: FloatingMarkerAnchorTypeT,
+  overrides?: FloatingMarkerOverridesT | FixedMarkerOverridesT,
+};
+
+export type DragShadowPropsT = {
+  background: string,
+  dragging: boolean,
+  height: number,
+  overrides: FixedMarkerOverridesT,
+};
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/menu/index.d.ts

@@ -123,6 +123,7 @@ export interface OptionListProps extends BaseMenuPropsT {
   item: any;
   getItemLabel: (item: any) => React.ReactNode;
   getChildMenu?: (item: any) => React.ReactNode;
+  onMouseDown?: (event: MouseEvent) => any;
   onMouseEnter?: (event: MouseEvent) => any;
   size?: OPTION_LIST_SIZE[keyof OPTION_LIST_SIZE];
   overrides?: {
@@ -133,6 +134,12 @@ export interface OptionListProps extends BaseMenuPropsT {
   resetMenu?: () => void;
   $isHighlighted?: boolean;
   $isFocused?: boolean;
+  renderAll?: boolean;
+  $disabled?: boolean;
+  'aria-disabled'?: boolean;
+  'aria-selected'?: boolean;
+  id?: string;
+  role?: string;
 }
 export const OptionList: React.FC<OptionListProps>;
 

package/menu/types.js.flow

@@ -234,6 +234,8 @@ export type OptionListPropsT = {
   getChildMenu?: (item: ItemT) => React.Node,
   onClick?: (event: MouseEvent) => mixed,
   /** Callback used to change highlighted index in stateful menu. */
+  onMouseDown?: (event: MouseEvent) => mixed,
+  /** Callback used to change highlighted index in stateful menu. */
   onMouseEnter?: (event: MouseEvent) => mixed,
   /** Renders UI in defined scale. */
   size?: $Keys<typeof OPTION_LIST_SIZE>,
@@ -251,6 +253,16 @@ export type OptionListPropsT = {
   $isFocused?: boolean,
   /** Renders all menu content for SEO purposes regardless of menu  state */
   renderAll?: boolean,
+  /** Is the item disabled */
+  $disabled?: boolean,
+  /** Is the item disabled */
+  'aria-disabled'?: boolean,
+  /** Is the item selected */
+  'aria-selected'?: boolean,
+  /** Id of the item */
+  id?: string,
+  /** Accessibility role of the item */
+  role?: string,
 };
 
 export type OptionProfilePropsT = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.2.1",
+  "version": "10.6.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -81,7 +81,7 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
-    "@ladle/react": "^0.2.0",
+    "@ladle/react": "^0.3.0",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
     "@svgr/cli": "^4.3.2",
@@ -170,6 +170,7 @@
     "react-dom": "^16.9.0",
     "react-hook-form": "^7.9.0",
     "react-icons": "^3.8.0",
+    "react-map-gl": "^6.1.17",
     "react-markdown": "^4.0.3",
     "react-twitter-embed": "^2.0.8",
     "react-view": "^2.3.3",

package/popover/stateful-container.js

@@ -70,6 +70,10 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(e);
       }
 
+      if (_this.props.focusLock || _this.props.autoFocus) {
+        return;
+      }
+
       _this.close();
     });
 

package/popover/stateful-container.js.flow

@@ -52,6 +52,9 @@ class StatefulContainer extends React.Component<
     if (this.props.onBlur) {
       this.props.onBlur(e);
     }
+    if (this.props.focusLock || this.props.autoFocus) {
+      return;
+    }
     this.close();
   };
 

package/rating/emoticon-rating.js

@@ -222,8 +222,8 @@ var EmoticonRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "emoticon-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/rating/emoticon-rating.js.flow

@@ -135,7 +135,10 @@ class EmoticonRating extends React.Component<
       <Root
         data-baseweb="emoticon-rating"
         role="radiogroup"
-        onBlur={() => this.updatePreview(undefined)}
+        onBlur={e => {
+          if (!e.currentTarget.contains(e.relatedTarget))
+            this.updatePreview(undefined);
+        }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}
       >

package/rating/star-rating.js

@@ -225,8 +225,8 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "star-rating",
         role: "radiogroup",
-        onBlur: function onBlur() {
-          return _this2.updatePreview(undefined);
+        onBlur: function onBlur(e) {
+          if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
         },
         onMouseLeave: function onMouseLeave() {
           return _this2.updatePreview(undefined);

package/rating/star-rating.js.flow

@@ -133,7 +133,10 @@ class StarRating extends React.Component<StarRatingPropsT, RatingStateT> {
       <Root
         data-baseweb="star-rating"
         role="radiogroup"
-        onBlur={() => this.updatePreview(undefined)}
+        onBlur={e => {
+          if (!e.currentTarget.contains(e.relatedTarget))
+            this.updatePreview(undefined);
+        }}
         onMouseLeave={() => this.updatePreview(undefined)}
         {...rootProps}
       >

package/select/select-component.js

@@ -180,7 +180,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       isPseudoFocused: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+    _defineProperty(_assertThisInitialized(_this), "isItMounted", false);
 
     _defineProperty(_assertThisInitialized(_this), "handleTouchOutside", function (event) {
       if (containsNode(_this.dropdown.current, event.target)) return;
@@ -328,7 +328,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         _this.props.onBlur(event);
       }
 
-      if (_this.isMounted) {
+      if (_this.isItMounted) {
         _this.setState({
           isFocused: false,
           isOpen: false,
@@ -682,7 +682,14 @@ var Select = /*#__PURE__*/function (_React$Component) {
         this.focus();
       }
 
-      this.isMounted = true;
+      this.isItMounted = true;
+
+      if (this.props.methodsRef) {
+        var methodsRef = this.props.methodsRef;
+        methodsRef.current = {
+          setDropdownOpen: this.handleDropdownOpen.bind(this)
+        };
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -711,13 +718,20 @@ var Select = /*#__PURE__*/function (_React$Component) {
         document.removeEventListener('click', this.handleClickOutside);
       }
 
-      this.isMounted = false;
+      this.isItMounted = false;
     }
   }, {
     key: "focus",
     value: function focus() {
       if (!this.input) return;
       this.input.focus();
+    }
+  }, {
+    key: "handleDropdownOpen",
+    value: function handleDropdownOpen(nextOpenState) {
+      this.setState({
+        isOpen: nextOpenState
+      });
     } // Handle touch outside on mobile to dismiss menu, ensures that the
     // touch target is not within the anchor DOM node.
 
@@ -933,7 +947,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-        size: 16,
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,
@@ -1013,7 +1026,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
     value: function filterOptions(excludeOptions) {
       var _this5 = this;
 
-      var filterValue = this.state.inputValue; // apply filter function
+      var filterValue = this.state.inputValue.trim(); // apply filter function
 
       if (this.props.filterOptions) {
         this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {

package/select/select-component.js.flow

@@ -117,13 +117,21 @@ class Select extends React.Component<PropsT, SelectStateT> {
     isPseudoFocused: false,
   };
 
-  isMounted: boolean = false;
+  isItMounted: boolean = false;
 
   componentDidMount() {
     if (this.props.autoFocus) {
       this.focus();
     }
-    this.isMounted = true;
+    this.isItMounted = true;
+
+    if (this.props.methodsRef) {
+      const {methodsRef} = this.props;
+
+      methodsRef.current = {
+        setDropdownOpen: this.handleDropdownOpen.bind(this),
+      };
+    }
   }
 
   componentDidUpdate(prevProps: PropsT, prevState: SelectStateT) {
@@ -149,7 +157,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       document.removeEventListener('touchstart', this.handleTouchOutside);
       document.removeEventListener('click', this.handleClickOutside);
     }
-    this.isMounted = false;
+    this.isItMounted = false;
   }
 
   focus() {
@@ -157,6 +165,12 @@ class Select extends React.Component<PropsT, SelectStateT> {
     this.input.focus();
   }
 
+  handleDropdownOpen(nextOpenState: boolean) {
+    this.setState({
+      isOpen: nextOpenState,
+    });
+  }
+
   // Handle touch outside on mobile to dismiss menu, ensures that the
   // touch target is not within the anchor DOM node.
   handleTouchOutside = (event: TouchEvent) => {
@@ -305,7 +319,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       this.props.onBlur(event);
     }
 
-    if (this.isMounted) {
+    if (this.isItMounted) {
       this.setState({
         isFocused: false,
         isOpen: false,
@@ -779,7 +793,6 @@ class Select extends React.Component<PropsT, SelectStateT> {
 
     return (
       <ClearIcon
-        size={16}
         title={ariaLabel}
         aria-label={ariaLabel}
         onClick={this.clearValue}
@@ -867,7 +880,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
   }
 
   filterOptions(excludeOptions: ?ValueT) {
-    const filterValue = this.state.inputValue;
+    const filterValue = this.state.inputValue.trim();
     // apply filter function
     if (this.props.filterOptions) {
       this.options = this.props.filterOptions(

package/select/styled-components.js

@@ -342,26 +342,50 @@ function getSvgStyles(_ref4) {
 }
 
 var StyledSelectArrow = (0, _index.styled)('svg', function (props) {
+  var _sizes;
+
   var $theme = props.$theme,
-      $disabled = props.$disabled;
+      $disabled = props.$disabled,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, _constants.SIZE.mini, 16), _defineProperty(_sizes, _constants.SIZE.compact, 16), _defineProperty(_sizes, _constants.SIZE.default, 20), _defineProperty(_sizes, _constants.SIZE.large, 24), _sizes);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledSelectArrow = StyledSelectArrow;
 StyledSelectArrow.displayName = "StyledSelectArrow";
 var StyledClearIcon = (0, _index.styled)('svg', function (props) {
-  var $theme = props.$theme;
+  var _sizes2;
+
+  var $theme = props.$theme,
+      $size = props.$size;
   var colors = $theme.colors;
+  var sizes = (_sizes2 = {}, _defineProperty(_sizes2, _constants.SIZE.mini, 15), _defineProperty(_sizes2, _constants.SIZE.compact, 15), _defineProperty(_sizes2, _constants.SIZE.default, 18), _defineProperty(_sizes2, _constants.SIZE.large, 22), _sizes2);
+  var size = sizes[_constants.SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return _objectSpread(_objectSpread({}, getSvgStyles({
     $theme: $theme
   })), {}, {
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: "".concat(size, "px"),
+    width: "".concat(size, "px")
   });
 });
 exports.StyledClearIcon = StyledClearIcon;