baseui 12.2.0 → 13.0.0

package/es/select/select-component.js

@@ -23,13 +23,17 @@ import SelectDropdown from './dropdown';
 import { StyledRoot, StyledControlContainer, StyledPlaceholder, StyledValueContainer, StyledInputContainer, StyledIconsContainer, StyledSearchIconContainer, StyledLoadingIndicator } from './styled-components';
 import { expandValue, normalizeOptions } from './utils';
 
+// @ts-ignore
 function Noop() {
   return null;
-}
+} // @ts-ignore
+
+
+const isClick = event => event.type === 'click'; // @ts-ignore
 
-const isClick = event => event.type === 'click';
 
-const isLeftClick = event => event.button !== null && event.button !== undefined && event.button === 0;
+const isLeftClick = event => event.button !== null && event.button !== undefined && event.button === 0; // @ts-ignore
+
 
 const containsNode = (parent, child) => {
   if (typeof document !== 'undefined') {
@@ -62,16 +66,20 @@ class Select extends React.Component {
   // dropdown is a ref that refers to the popover element. This is required so that we can check if
   // clicks are on/off the dropdown element.
   // dragging is a flag to track whether a mobile device is currently scrolling versus clicking.
+  // @ts-ignore
   // focusAfterClear is a flag to indicate that the dropdowm menu should open after a selected
   // option has been cleared.
+  // @ts-ignore
   // openAfterFocus is a flag to indicate that the dropdown menu should open when the component is
   // focused. Developers have the option to disable initial clicks opening the dropdown menu. If not
   // disabled, clicks will set this flag to true. Upon focusing, look to this to see if the menu should
   // be opened, or only focus.
+  // @ts-ignore
   // When an item is selected, it also triggers handleClickOutside and since the selected item is
   // already out of the menu (DOM), it will not recognize it as a subnode and triggers handleBlur
   // that sets isOpen to false. That's a faulty logic causing visible problems when
   // closeOnSelect is false. This flag helps to detect that selection was just made.
+  // @ts-ignore
   // the select components can accept an array of options or an object where properties are optgroups
   // and values are arrays of options. this class property is constructed and updated in a normalized
   // shape where optgroup titles are stored on the option in the __optgroup field.
@@ -95,6 +103,7 @@ class Select extends React.Component {
     _defineProperty(this, "options", []);
 
     _defineProperty(this, "state", {
+      // @ts-ignore
       activeDescendant: null,
       inputValue: '',
       isFocused: false,
@@ -135,6 +144,7 @@ class Select extends React.Component {
         // CHASE: not sure why this condition is here. I cannot replicate a situation where clicks
         // on provided text break into here.
         if (!this.state.isFocused) {
+          // @ts-ignore
           this.openAfterFocus = this.props.openOnClick;
           this.focus();
         }
@@ -152,6 +162,7 @@ class Select extends React.Component {
       // handler. For example, after an option is selected clicks on the 'clear' icon call here. We
       // should ignore those events. This comes after case where click is on input element, so that
       // those are handled on their own.
+      // @ts-ignore
 
 
       if (this.input && isInteractive(event.target, this.input)) {
@@ -197,7 +208,8 @@ class Select extends React.Component {
       } else {
         // When clear button is clicked, need to click twice to open control container - https://github.com/uber/baseweb/issues/4285
         // Setting focusAfterClear to false, resolves the issue
-        this.focusAfterClear = false;
+        this.focusAfterClear = false; // @ts-ignore
+
         this.openAfterFocus = this.props.openOnClick;
         this.focus();
       }
@@ -411,11 +423,14 @@ class Select extends React.Component {
 
     _defineProperty(this, "getOptionLabel", (locale, {
       option
-    }) => option.isCreatable ? `${locale.select.create} “${option[this.props.labelKey]}”` : option[this.props.labelKey]);
+    }) => option.isCreatable ? // @ts-ignore
+    `${locale.select.create} “${option[this.props.labelKey]}”` : // @ts-ignore
+    option[this.props.labelKey]);
 
     _defineProperty(this, "getValueLabel", ({
       option
     }) => {
+      // @ts-ignore
       return option[this.props.labelKey];
     });
 
@@ -464,7 +479,7 @@ class Select extends React.Component {
           inputValue: updatedValue,
           isOpen: !this.props.closeOnSelect
         }, () => {
-          const valueArray = this.props.value;
+          const valueArray = this.props.value; // @ts-ignore
 
           if (valueArray.some(i => i[this.props.valueKey] === item[this.props.valueKey])) {
             this.removeValue(item);
@@ -495,7 +510,8 @@ class Select extends React.Component {
 
       if (!item) {
         return;
-      }
+      } // @ts-ignore
+
 
       const valueLength = this.props.value.length;
       const renderLabel = this.props.getValueLabel || this.getValueLabel;
@@ -514,6 +530,7 @@ class Select extends React.Component {
     });
 
     _defineProperty(this, "popValue", () => {
+      // @ts-ignore
       const valueArray = [...this.props.value];
       const valueLength = valueArray.length;
       if (!valueLength) return;
@@ -525,7 +542,8 @@ class Select extends React.Component {
 
     _defineProperty(this, "removeValue", item => {
       const valueArray = [...this.props.value];
-      this.setValue(valueArray.filter(i => i[this.props.valueKey] !== item[this.props.valueKey]), item, STATE_CHANGE_TYPE.remove);
+      this.setValue( // @ts-ignore
+      valueArray.filter(i => i[this.props.valueKey] !== item[this.props.valueKey]), item, STATE_CHANGE_TYPE.remove);
       this.focus();
     });
 
@@ -554,7 +572,8 @@ class Select extends React.Component {
     });
 
     this.options = normalizeOptions(props.options);
-  }
+  } // @ts-ignore
+
 
   componentDidMount() {
     if (this.props.autoFocus) {
@@ -624,10 +643,12 @@ class Select extends React.Component {
   }
 
   handleSetInputFocus() {
+    // @ts-ignore
     this.input.focus();
   }
 
   handleSetInputBlur() {
+    // @ts-ignore
     this.input.blur();
   } // Handle touch outside on mobile to dismiss menu, ensures that the
   // touch target is not within the anchor DOM node.
@@ -709,7 +730,8 @@ class Select extends React.Component {
       return valueArray.map((value, i) => {
         const disabled = sharedProps.$disabled || value.clearableValue === false;
         return /*#__PURE__*/React.createElement(Value, _extends({
-          value: value,
+          value: value // @ts-ignore
+          ,
           key: `value-${i}-${value[this.props.valueKey]}`,
           removeValue: () => this.removeValue(value),
           disabled: disabled,
@@ -725,7 +747,8 @@ class Select extends React.Component {
         }));
       });
     } else if (this.shouldShowValue()) {
-      return /*#__PURE__*/React.createElement(Value, _extends({
+      return /*#__PURE__*/React.createElement(Value // @ts-ignore
+      , _extends({
         value: valueArray[0][this.props.valueKey],
         disabled: this.props.disabled,
         overrides: {
@@ -743,8 +766,10 @@ class Select extends React.Component {
     } = this.props;
     const [InputContainer, inputContainerProps] = getOverrides(overrides.InputContainer, StyledInputContainer);
     const sharedProps = this.getSharedProps();
-    const isOpen = this.state.isOpen;
-    const selected = this.getValueArray(this.props.value).map(v => v[this.props.labelKey]).join(', ');
+    const isOpen = this.state.isOpen; // @ts-ignore
+
+    const selected = this.getValueArray(this.props.value) // @ts-ignore
+    .map(v => v[this.props.labelKey]).join(', ');
     const selectedLabel = selected.length ? `Selected ${selected}. ` : '';
     const label = `${selectedLabel}${this.props['aria-label'] || ''}`;
 
@@ -760,7 +785,8 @@ class Select extends React.Component {
         onFocus: this.handleInputFocus,
         tabIndex: 0
       }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
-        "aria-hidden": true,
+        "aria-hidden": true // @ts-ignore
+        ,
         id: this.props.id || null,
         ref: this.handleInputRef,
         style: {
@@ -794,7 +820,8 @@ class Select extends React.Component {
       onFocus: this.handleInputFocus,
       overrides: {
         Input: overrides.Input
-      },
+      } // @ts-ignore
+      ,
       required: this.props.required && !this.props.value.length || null,
       role: "combobox",
       value: this.state.inputValue,
@@ -829,7 +856,8 @@ class Select extends React.Component {
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,
-      role: "button",
+      role: "button" // @ts-ignore
+      ,
       size: sizes[this.props.size] || sizes[SIZE.default]
     }, sharedProps, clearIconProps));
   }
@@ -866,7 +894,8 @@ class Select extends React.Component {
       [SIZE.default]: 20,
       [SIZE.large]: 24
     };
-    return /*#__PURE__*/React.createElement(SelectArrow, _extends({
+    return /*#__PURE__*/React.createElement(SelectArrow // @ts-ignore
+    , _extends({
       size: sizes[this.props.size] || sizes[SIZE.default],
       title: 'open'
     }, sharedProps, selectArrowProps));
@@ -894,19 +923,26 @@ class Select extends React.Component {
 
     if (this.props.filterOptions) {
       this.options = this.props.filterOptions(this.options, filterValue, excludeOptions, {
+        // @ts-ignore
         valueKey: this.props.valueKey,
+        // @ts-ignore
         labelKey: this.props.labelKey
       });
     } // can user create a new option + there's no exact match already
 
 
-    const filterDoesNotMatchOption = this.props.ignoreCase ? opt => opt[this.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim() : opt => opt[this.props.labelKey] !== filterValue.trim();
+    const filterDoesNotMatchOption = this.props.ignoreCase ? // @ts-ignore
+    opt => opt[this.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim() : // @ts-ignore
+    opt => opt[this.props.labelKey] !== filterValue.trim();
 
-    if (filterValue && this.props.creatable && this.options.concat(this.props.value).every(filterDoesNotMatchOption)) {
+    if (filterValue && this.props.creatable && // @ts-ignore
+    this.options.concat(this.props.value).every(filterDoesNotMatchOption)) {
       // @ts-expect-error todo(flow->ts) this.options is typed as a read-only array
       this.options.push({
         id: filterValue,
+        // @ts-ignore
         [this.props.labelKey]: filterValue,
+        // @ts-ignore
         [this.props.valueKey]: filterValue,
         isCreatable: true
       });
@@ -950,6 +986,7 @@ class Select extends React.Component {
       $searchable: searchable,
       $size: size,
       $type: type,
+      // @ts-ignore
       $isEmpty: !this.getValueArray(value).length
     };
   }
@@ -978,7 +1015,8 @@ class Select extends React.Component {
     const [IconsContainer, iconsContainerProps] = getOverrides(overrides.IconsContainer, StyledIconsContainer);
     const [PopoverOverride, popoverProps] = getOverrides(overrides.Popover, Popover);
     const [Placeholder, placeholderProps] = getOverrides(overrides.Placeholder, StyledPlaceholder);
-    const sharedProps = this.getSharedProps();
+    const sharedProps = this.getSharedProps(); // @ts-ignore
+
     const valueArray = this.getValueArray(value);
     const options = this.filterOptions(multi && filterOutSelected ? valueArray : null);
     const isOpen = this.state.isOpen;
@@ -1031,7 +1069,8 @@ class Select extends React.Component {
           valueKey: this.props.valueKey,
           width: this.anchor.current ? this.anchor.current.clientWidth : null,
           keyboardControlNode: this.anchor
-        };
+        }; // @ts-ignore
+
         return /*#__PURE__*/React.createElement(SelectDropdown, _extends({
           innerRef: this.dropdown
         }, dropdownProps));

package/es/select/stateful-select-container.js

@@ -54,6 +54,7 @@ class StatefulSelectContainer extends React.Component {
 
 _defineProperty(StatefulSelectContainer, "defaultProps", {
   initialState: {
+    // @ts-ignore
     value: []
   },
   onChange: () => {},

package/es/select/styled-components.js

@@ -8,7 +8,7 @@ import { styled, withStyle } from '../styles';
 import { TYPE, SIZE } from './constants';
 import { StyledList, StyledListItem } from '../menu';
 import { Spinner } from '../spinner';
-import { ellipsisText } from '../styles/util';
+import { ellipsisText } from '../styles/util'; // @ts-ignore
 
 function getFont(size = SIZE.default, typography) {
   return {
@@ -19,7 +19,9 @@ function getFont(size = SIZE.default, typography) {
   }[size];
 }
 
-function getBorderRadius(size, borders) {
+function getBorderRadius( // @ts-ignore
+size, // @ts-ignore
+borders) {
   let radius = borders.inputBorderRadius;
 
   if (size === SIZE.mini) {
@@ -32,7 +34,8 @@ function getBorderRadius(size, borders) {
     borderTopRightRadius: radius,
     borderBottomRightRadius: radius
   };
-}
+} // @ts-ignore
+
 
 function getControlPadding(props) {
   const {
@@ -48,7 +51,8 @@ function getControlPadding(props) {
   const isSearch = $type === TYPE.search;
   const paddingLeft = isSearch ? `calc(${sizing.scale1000} - ${sizing.scale0})` : sizing.scale400;
   const paddingStartDir = $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
-  const paddingEndDir = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+  const paddingEndDir = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'; // @ts-ignore
+
   return {
     [SIZE.mini]: {
       // `sizing.scale0` based on the multi value component (Tag) top and bottom margin
@@ -89,7 +93,8 @@ export const StyledDropdownContainer = styled('div', props => {
 StyledDropdownContainer.displayName = "StyledDropdownContainer";
 StyledDropdownContainer.displayName = 'StyledDropdownContainer';
 export const StyledDropdown = StyledList;
-export const StyledDropdownListItem = StyledListItem;
+export const StyledDropdownListItem = StyledListItem; // @ts-ignore
+
 export const StyledOptionContent = styled('div', props => {
   const {
     $isHighlighted,
@@ -121,7 +126,13 @@ export const StyledRoot = styled('div', props => {
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
 
-function getControlContainerColors($disabled, $isFocused, $isPseudoFocused, $positive, $error, colors) {
+function getControlContainerColors( // @ts-ignore
+$disabled, // @ts-ignore
+$isFocused, // @ts-ignore
+$isPseudoFocused, // @ts-ignore
+$positive, // @ts-ignore
+$error, // @ts-ignore
+colors) {
   if ($disabled) {
     return {
       color: colors.inputTextDisabled,
@@ -381,7 +392,7 @@ export const StyledIconsContainer = styled('div', ({
   };
 });
 StyledIconsContainer.displayName = "StyledIconsContainer";
-StyledIconsContainer.displayName = 'StyledIconsContainer';
+StyledIconsContainer.displayName = 'StyledIconsContainer'; // @ts-ignore
 
 function getSvgStyles({
   $theme

package/es/select/utils/default-filter-options.js

@@ -4,7 +4,9 @@ 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.
 */
-const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+// @ts-ignore
+const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // @ts-ignore
+
 
 const isValid = value => {
   return typeof value !== 'undefined' && value !== null && value !== '';

package/es/select/utils/index.js

@@ -7,7 +7,8 @@ LICENSE file in the root directory of this source tree.
 function groupedOptionsToArray(groupedOptions) {
   return Object.keys(groupedOptions).reduce((arr, optgroup) => {
     const optgroupOptions = groupedOptions[optgroup];
-    return arr.concat(optgroupOptions.map(option => {
+    return arr.concat( // @ts-ignore
+    optgroupOptions.map(option => {
       return { ...option,
         __optgroup: optgroup
       };
@@ -31,6 +32,7 @@ export const expandValue = (value, props) => {
   const normalizedOptions = normalizeOptions(props.options);
 
   for (let i = 0; i < normalizedOptions.length; i++) {
+    // @ts-ignore
     if (String(normalizedOptions[i][props.valueKey]) === String(value[props.valueKey])) {
       return normalizedOptions[i];
     }

package/es/sheet/action-button.js

@@ -0,0 +1,44 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { Button, KIND, SHAPE, SIZE } from '../button';
+export function ActionButton({
+  children,
+  size,
+  ...restProps
+}) {
+  const iconButtonStyle = {
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0
+  }; // compact buttons need a pseudo-element to acheive a 48px tap target
+
+  const compactButtonStyle = {
+    position: 'relative',
+    ':after': {
+      content: '""',
+      position: 'absolute',
+      height: '48px',
+      width: '48px'
+    }
+  };
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    kind: KIND.tertiary,
+    shape: SHAPE.square,
+    size: size,
+    overrides: {
+      BaseButton: {
+        style: { ...(size === SIZE.compact ? compactButtonStyle : {}),
+          ...(typeof children !== 'string' ? iconButtonStyle : {})
+        }
+      }
+    }
+  }, restProps), children);
+}

package/es/sheet/index.js

@@ -0,0 +1,9 @@
+/*
+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.
+*/
+export { default as Sheet } from './sheet';
+export * from './styled-components';
+export * from './types';

package/es/sheet/sheet.js

@@ -0,0 +1,100 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides';
+import { ProgressBar, SIZE } from '../progress-bar';
+import { SIZE as BTN_SIZE } from '../button';
+import { SIZE as DIVIDER_SIZE } from '../divider';
+import { ActionButton as DefaultActionButton } from './action-button';
+import { StyledBottomContainer, StyledBody, StyledDescription, StyledDivider, StyledEmptyDiv, StyledGrabber, StyledHeader, StyledHeaderGrid, StyledHeaderTextContainer, StyledRoot, StyledTitle, StyledTopContainer } from './styled-components';
+
+function renderBodyContent(content) {
+  return typeof content === 'function' ? content() : content;
+}
+
+function renderActionButtonContent(content, buttonSize) {
+  if (typeof content === 'string') {
+    return content;
+  }
+
+  const Icon = content;
+  return /*#__PURE__*/React.createElement(Icon, {
+    size: buttonSize === BTN_SIZE.compact ? 22 : 26
+  });
+}
+
+export const Sheet = ({
+  children,
+  content,
+  description,
+  draggable = false,
+  leadingAction,
+  overrides = {},
+  progressBar,
+  title,
+  topPosition,
+  trailingAction
+}) => {
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [TopContainer, topContainerProps] = getOverrides(overrides.TopContainer, StyledTopContainer);
+  const [BottomContainer, bottomContainerProps] = getOverrides(overrides.BottomContainer, StyledBottomContainer);
+  const [Header, headerProps] = getOverrides(overrides.Header, StyledHeader);
+  const [Grabber, grabberProps] = getOverrides(overrides.Grabber, StyledGrabber);
+  const [HeaderGrid, headerGridProps] = getOverrides(overrides.HeaderGrid, StyledHeaderGrid);
+  const [ActionButton, actionButtonProps] = getOverrides(overrides.ActionButton, DefaultActionButton);
+  const [EmptyDiv, emptyDivProps] = getOverrides(overrides.EmptyDiv, StyledEmptyDiv);
+  const [HeaderTextContainer, HeaderTextContainerProps] = getOverrides(overrides.HeaderTextContainer, StyledHeaderTextContainer);
+  const [Title, titleProps] = getOverrides(overrides.Title, StyledTitle);
+  const [Description, descriptionProps] = getOverrides(overrides.Description, StyledDescription);
+  const [Divider, dividerProps] = getOverrides(overrides.Divider, StyledDivider);
+  const [Body, bodyProps] = getOverrides(overrides.Body, StyledBody);
+  const hasTitle = Boolean(title);
+  const hasDescription = Boolean(description);
+  const hasLeadingAction = Boolean(leadingAction);
+  const hasTrailingAction = Boolean(trailingAction);
+  const buttonSize = hasTitle ? BTN_SIZE.default : BTN_SIZE.compact;
+  const shouldDisplayHeader = draggable || hasTitle || hasDescription || hasLeadingAction || hasTrailingAction;
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    $draggable: draggable
+  }, rootProps), /*#__PURE__*/React.createElement(TopContainer, _extends({
+    $draggable: draggable,
+    $topPosition: topPosition
+  }, topContainerProps), children), /*#__PURE__*/React.createElement(BottomContainer, _extends({
+    $draggable: draggable,
+    $topPosition: topPosition
+  }, bottomContainerProps), shouldDisplayHeader && /*#__PURE__*/React.createElement(Header, headerProps, draggable && /*#__PURE__*/React.createElement(Grabber, grabberProps), /*#__PURE__*/React.createElement(HeaderGrid, _extends({
+    $hasLeadingAction: hasLeadingAction,
+    $hasTrailingAction: hasTrailingAction
+  }, headerGridProps), leadingAction && /*#__PURE__*/React.createElement(ActionButton, _extends({
+    onClick: leadingAction.onClick,
+    "aria-label": leadingAction.label,
+    size: buttonSize
+  }, actionButtonProps), renderActionButtonContent(leadingAction.renderIcon || leadingAction.label, buttonSize)), trailingAction && !leadingAction && /*#__PURE__*/React.createElement(EmptyDiv, emptyDivProps), (hasTitle || hasDescription) && /*#__PURE__*/React.createElement(HeaderTextContainer, _extends({
+    $draggable: draggable,
+    $hasTitle: hasTitle,
+    $hasDescription: hasDescription
+  }, HeaderTextContainerProps), title && /*#__PURE__*/React.createElement(Title, titleProps, title), description && /*#__PURE__*/React.createElement(Description, descriptionProps, description)), trailingAction && /*#__PURE__*/React.createElement(ActionButton, _extends({
+    onClick: trailingAction.onClick,
+    "aria-label": trailingAction.label,
+    size: buttonSize
+  }, actionButtonProps), renderActionButtonContent(trailingAction.renderIcon || trailingAction.label, buttonSize)), !trailingAction && leadingAction && /*#__PURE__*/React.createElement(EmptyDiv, emptyDivProps)), progressBar ? /*#__PURE__*/React.createElement(ProgressBar, _extends({
+    size: SIZE.small,
+    overrides: {
+      BarContainer: {
+        style: {
+          marginTop: 0,
+          marginBottom: 0
+        }
+      }
+    }
+  }, progressBar)) : /*#__PURE__*/React.createElement(Divider, _extends({
+    $size: DIVIDER_SIZE.section
+  }, dividerProps))), /*#__PURE__*/React.createElement(Body, bodyProps, renderBodyContent(content))));
+};
+export default Sheet;