baseui 12.1.3 → 13.0.0

package/es/icon/check-indeterminate.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function CheckIndeterminate(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/check.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Check(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/chevron-down.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function ChevronDown(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/chevron-left.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function ChevronLeft(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/chevron-right.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function ChevronRight(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/chevron-up.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function ChevronUp(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/delete-alt.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function DeleteAlt(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/delete.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Delete(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/filter.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Filter(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/grab.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Grab(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/hide.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Hide(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/icon-exports.js

@@ -10,6 +10,7 @@ export { default as ArrowLeft } from './arrow-left';
 export { default as ArrowRight } from './arrow-right';
 export { default as ArrowUp } from './arrow-up';
 export { default as Blank } from './blank';
+export { default as Calendar } from './calendar';
 export { default as CheckIndeterminate } from './check-indeterminate';
 export { default as Check } from './check';
 export { default as ChevronDown } from './chevron-down';

package/es/icon/icon.js

@@ -11,6 +11,7 @@ import { getOverrides } from '../helpers/overrides';
 import { Svg as StyledSvg } from './styled-components';
 import omitDollarPrefixedKeys from './omit-dollar-prefixed-keys';
 
+// @ts-ignore
 const Icon = (props, ref) => {
   const {
     children,

package/es/icon/menu.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Menu(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/omit-dollar-prefixed-keys.js

@@ -10,6 +10,7 @@ export default function omitDollarPrefixedKeys(source) {
 
   for (const key in source) {
     if (key[0] !== '$') {
+      // @ts-ignore
       result[key] = source[key];
     }
   }

package/es/icon/overflow.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Overflow(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/plus.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Plus(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/search.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Search(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/show.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Show(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/spinner.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Spinner(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/styled-components.js

@@ -13,7 +13,9 @@ export function getSvgStyles({
   let size = $theme.sizing.scale600;
 
   if ($size) {
+    // @ts-ignore
     if ($theme.sizing[$size]) {
+      // @ts-ignore
       size = $theme.sizing[$size];
     } else if (typeof $size === 'number') {
       size = `${$size}px`;
@@ -25,7 +27,9 @@ export function getSvgStyles({
   let color = 'currentColor';
 
   if ($color) {
+    // @ts-ignore
     if ($theme.colors[$color]) {
+      // @ts-ignore
       color = $theme.colors[$color];
     } else {
       color = $color;

package/es/icon/triangle-down.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function TriangleDown(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/triangle-left.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function TriangleLeft(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/triangle-right.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function TriangleRight(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/triangle-up.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function TriangleUp(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/upload.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Upload(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/input/base-input.js

@@ -21,6 +21,7 @@ import Show from '../icon/show';
 import createEvent from '../utils/create-event';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 
+// @ts-ignore
 const NullComponent = () => null;
 
 class BaseInput extends React.Component {
@@ -54,14 +55,16 @@ class BaseInput extends React.Component {
     _defineProperty(this, "onFocus", e => {
       this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
       this.props.onFocus(e);
     });
 
     _defineProperty(this, "onBlur", e => {
       this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
       this.props.onBlur(e);
     });
 
@@ -110,6 +113,7 @@ class BaseInput extends React.Component {
       }
 
       if (clearable) {
+        // @ts-ignore
         this.inputRef.current.addEventListener('keydown', this.onInputKeyDown);
       }
     }
@@ -121,6 +125,7 @@ class BaseInput extends React.Component {
     } = this.props;
 
     if (clearable && this.inputRef.current) {
+      // @ts-ignore
       this.inputRef.current.removeEventListener('keydown', this.onInputKeyDown);
     }
   }
@@ -158,15 +163,19 @@ class BaseInput extends React.Component {
 
   renderMaskToggle() {
     if (this.props.type !== 'password') return null;
-    const [MaskToggleButton, maskToggleButtonProps] = getOverrides(this.props.overrides.MaskToggleButton, StyledMaskToggleButton);
-    const [MaskToggleShowIcon, maskToggleIconShowProps] = getOverrides(this.props.overrides.MaskToggleShowIcon, Show);
-    const [MaskToggleHideIcon, maskToggleIconHideProps] = getOverrides(this.props.overrides.MaskToggleHideIcon, Hide);
+    const [MaskToggleButton, maskToggleButtonProps] = getOverrides( // @ts-ignore
+    this.props.overrides.MaskToggleButton, StyledMaskToggleButton);
+    const [MaskToggleShowIcon, maskToggleIconShowProps] = getOverrides( // @ts-ignore
+    this.props.overrides.MaskToggleShowIcon, Show);
+    const [MaskToggleHideIcon, maskToggleIconHideProps] = getOverrides( // @ts-ignore
+    this.props.overrides.MaskToggleHideIcon, Hide);
     const label = this.state.isMasked ? 'Show password text' : 'Hide password text';
     const iconSize = {
       [SIZE.mini]: '12px',
       [SIZE.compact]: '16px',
       [SIZE.default]: '20px',
-      [SIZE.large]: '24px'
+      [SIZE.large]: '24px' // @ts-ignore
+
     }[this.props.size];
     return /*#__PURE__*/React.createElement(MaskToggleButton, _extends({
       $size: this.props.size,
@@ -210,7 +219,8 @@ class BaseInput extends React.Component {
       [SIZE.mini]: '14px',
       [SIZE.compact]: '14px',
       [SIZE.default]: '16px',
-      [SIZE.large]: '22px'
+      [SIZE.large]: '22px' // @ts-ignore
+
     }[this.props.size];
     return /*#__PURE__*/React.createElement(ClearIconContainer, _extends({
       $alignTop: this.props.type === CUSTOM_INPUT_TYPE.textarea
@@ -219,7 +229,8 @@ class BaseInput extends React.Component {
       tabIndex: 0,
       title: ariaLabel,
       "aria-label": ariaLabel,
-      onClick: this.onClearIconClick,
+      onClick: this.onClearIconClick // @ts-ignore
+      ,
       onKeyDown: event => {
         if (event.key && (event.key === 'Enter' || event.key === ' ')) {
           event.preventDefault();
@@ -236,12 +247,14 @@ class BaseInput extends React.Component {
 
   render() {
     const {
-      value,
-      type,
       overrides: {
+        // @ts-ignore
         InputContainer: InputContainerOverride,
+        // @ts-ignore
         Input: InputOverride,
+        // @ts-ignore
         Before: BeforeOverride,
+        // @ts-ignore
         After: AfterOverride
       }
     } = this.props; // more here https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password
@@ -289,19 +302,27 @@ class BaseInput extends React.Component {
       max: this.props.max,
       step: this.props.step,
       rows: this.props.type === CUSTOM_INPUT_TYPE.textarea ? this.props.rows : null
-    }, sharedProps, inputProps), type === CUSTOM_INPUT_TYPE.textarea ? value : null), this.renderClear(), this.renderMaskToggle(), /*#__PURE__*/React.createElement(After, _extends({}, sharedProps, afterProps)));
+    }, sharedProps, inputProps)), this.renderClear(), this.renderMaskToggle(), /*#__PURE__*/React.createElement(After, _extends({}, sharedProps, afterProps)));
   }
 
 }
 
 _defineProperty(BaseInput, "defaultProps", {
+  // @ts-ignore
   'aria-activedescendant': null,
+  // @ts-ignore
   'aria-autocomplete': null,
+  // @ts-ignore
   'aria-controls': null,
+  // @ts-ignore
   'aria-errormessage': null,
+  // @ts-ignore
   'aria-haspopup': null,
+  // @ts-ignore
   'aria-label': null,
+  // @ts-ignore
   'aria-labelledby': null,
+  // @ts-ignore
   'aria-describedby': null,
   adjoined: ADJOINED.none,
   autoComplete: 'on',
@@ -321,9 +342,11 @@ _defineProperty(BaseInput, "defaultProps", {
   clearable: false,
   clearOnEscape: true,
   overrides: {},
+  // @ts-ignore
   pattern: null,
   placeholder: '',
   required: false,
+  // @ts-ignore
   role: null,
   size: SIZE.default,
   type: 'text',

package/es/input/input.js

@@ -26,14 +26,16 @@ class Input extends React.Component {
     _defineProperty(this, "onFocus", e => {
       this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
       this.props.onFocus(e);
     });
 
     _defineProperty(this, "onBlur", e => {
       this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
       this.props.onBlur(e);
     });
   }
@@ -43,8 +45,11 @@ class Input extends React.Component {
       startEnhancer,
       endEnhancer,
       overrides: {
+        // @ts-ignore
         Root: RootOverride,
+        // @ts-ignore
         StartEnhancer: StartEnhancerOverride,
+        // @ts-ignore
         EndEnhancer: EndEnhancerOverride,
         ...restOverrides
       },
@@ -79,7 +84,8 @@ class Input extends React.Component {
     }), typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer));
   }
 
-}
+} // @ts-ignore
+
 
 _defineProperty(Input, "defaultProps", {
   autoComplete: 'on',
@@ -91,7 +97,9 @@ _defineProperty(Input, "defaultProps", {
   overrides: {},
   required: false,
   size: SIZE.default,
+  // @ts-ignore
   startEnhancer: null,
+  // @ts-ignore
   endEnhancer: null,
   clearable: false,
   type: 'text',
@@ -108,7 +116,8 @@ function getAdjoinedProp(startEnhancer, endEnhancer) {
   }
 
   return ADJOINED.none;
-}
+} // @ts-ignore
+
 
 function isEnhancer(enhancer) {
   return Boolean(enhancer || enhancer === 0);

package/es/input/masked-input.js

@@ -6,7 +6,8 @@ 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 * as React from 'react'; // @ts-ignore
+
 import InputMask from 'react-input-mask';
 import Input from './input';
 import { Input as StyledInput } from './styled-components';

package/es/input/stateful-container.js

@@ -24,11 +24,13 @@ class StatefulContainer extends React.Component {
       const nextState = {
         value: e.target.value
       };
-      this.internalSetState(STATE_CHANGE_TYPE.change, nextState);
+      this.internalSetState(STATE_CHANGE_TYPE.change, nextState); // @ts-ignore
+
       this.props.onChange(e);
     });
 
     _defineProperty(this, "internalSetState", (type, nextState) => {
+      // @ts-ignore
       const newState = this.props.stateReducer(type, nextState, this.state);
       this.setState(newState);
     });
@@ -47,6 +49,7 @@ class StatefulContainer extends React.Component {
     } = this;
     return children({ ...restProps,
       ...this.state,
+      // @ts-ignore
       onChange
     });
   }

package/es/input/styled-components.js

@@ -66,7 +66,10 @@ export const StyledClearIcon = styled(DeleteAlt, ({
 StyledClearIcon.displayName = "StyledClearIcon";
 StyledClearIcon.displayName = 'StyledClearIcon';
 
-function getInputPadding(size, sizing) {
+function getInputPadding( // @ts-ignore
+size, // @ts-ignore
+sizing) {
+  // @ts-ignore
   return {
     [SIZE.mini]: {
       paddingTop: sizing.scale100,
@@ -95,16 +98,23 @@ function getInputPadding(size, sizing) {
   }[size];
 }
 
-function getRootPadding(adjoined, size, sizing, direction, hasIconTrailing) {
+function getRootPadding( // @ts-ignore
+adjoined, // @ts-ignore
+size, // @ts-ignore
+sizing, // @ts-ignore
+direction, // @ts-ignore
+hasIconTrailing) {
   let ifLeftPad = adjoined === ADJOINED.both || adjoined === ADJOINED.left && direction !== 'rtl' || adjoined === ADJOINED.right && direction === 'rtl' || hasIconTrailing && direction === 'rtl';
   let ifRightPad = adjoined === ADJOINED.both || adjoined === ADJOINED.right && direction !== 'rtl' || adjoined === ADJOINED.left && direction === 'rtl' || hasIconTrailing && direction !== 'rtl';
   return {
     paddingLeft: ifLeftPad ? sizing.scale550 : '0px',
     paddingRight: ifRightPad ? sizing.scale550 : '0px'
   };
-}
+} // @ts-ignore
+
 
 function getFont(size, typography) {
+  // @ts-ignore
   return {
     [SIZE.mini]: typography.font100,
     [SIZE.compact]: typography.font200,
@@ -113,7 +123,11 @@ function getFont(size, typography) {
   }[size];
 }
 
-function getRootColors($disabled, $isFocused, $error, $positive = false, colors) {
+function getRootColors( // @ts-ignore
+$disabled, // @ts-ignore
+$isFocused, // @ts-ignore
+$error, $positive = false, // @ts-ignore
+colors) {
   if ($disabled) {
     return {
       borderLeftColor: colors.inputFillDisabled,
@@ -163,7 +177,9 @@ function getRootColors($disabled, $isFocused, $error, $positive = false, colors)
   };
 }
 
-function getRootBorderRadius(size, borders) {
+function getRootBorderRadius( // @ts-ignore
+size, // @ts-ignore
+borders) {
   let radius = borders.inputBorderRadius;
 
   if (size === SIZE.mini) {
@@ -222,7 +238,9 @@ export const Root = styled('div', getRootStyles);
 Root.displayName = "Root";
 Root.displayName = 'Root'; // InputEnhancer
 
+// @ts-ignore
 function getInputEnhancerPadding($size, sizing) {
+  // @ts-ignore
   return {
     [SIZE.mini]: {
       paddingRight: sizing.scale400,
@@ -241,7 +259,8 @@ function getInputEnhancerPadding($size, sizing) {
       paddingLeft: sizing.scale200
     }
   }[$size];
-}
+} // @ts-ignore
+
 
 function getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors) {
   if ($disabled) {
@@ -306,6 +325,7 @@ export const InputEnhancer = styled('div', props => {
 });
 InputEnhancer.displayName = "InputEnhancer";
 InputEnhancer.displayName = 'InputEnhancer'; // InputContainer
+// @ts-ignore
 
 function getInputContainerColors($disabled, $isFocused, $error, $positive, colors) {
   if ($disabled) {
@@ -367,7 +387,7 @@ export const getInputContainerStyles = props => {
 };
 export const InputContainer = styled('div', getInputContainerStyles);
 InputContainer.displayName = "InputContainer";
-InputContainer.displayName = 'InputContainer';
+InputContainer.displayName = 'InputContainer'; // @ts-ignore
 
 function getInputColors($disabled, $isFocused, $error, colors) {
   if ($disabled) {
@@ -420,9 +440,13 @@ export const getInputStyles = props => {
     maxWidth: '100%',
     cursor: $disabled ? 'not-allowed' : 'text',
     margin: '0',
+    // @ts-ignore
     paddingTop: '0',
+    // @ts-ignore
     paddingBottom: '0',
+    // @ts-ignore
     paddingLeft: '0',
+    // @ts-ignore
     paddingRight: '0',
     ...getFont($size, typography),
     ...getInputPadding($size, sizing),

package/es/input/utils.js

@@ -23,7 +23,9 @@ export function getSharedProps(props, state) {
     $disabled: disabled,
     $error: error,
     $positive: positive,
+    // @ts-ignore
     $adjoined: adjoined,
+    // @ts-ignore
     $size: size,
     $required: required,
     $resize: resize,

package/es/layer/layer.js

@@ -29,6 +29,8 @@ class LayerComponent extends React.Component {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "context", void 0);
+
     _defineProperty(this, "state", {
       container: null
     });
@@ -100,7 +102,8 @@ class LayerComponent extends React.Component {
     if (host) {
       this.addContainer(host);
     }
-  }
+  } // @ts-ignore
+
 
   componentDidUpdate(prevProps) {
     const {
@@ -146,6 +149,7 @@ class LayerComponent extends React.Component {
     }
   }
 
+  // @ts-ignore
   addContainer(host) {
     const {
       index,

package/es/layer/tether.js

@@ -83,7 +83,7 @@ class Tether extends React.Component {
             // eslint-disable-next-line no-console
             console.warn(`[baseui][TetherBehavior] ref has not been passed to the Popper's anchor element.
               See how to pass the ref to an anchor element in the Popover example
-              http://baseui.design/components/popover#anchor-ref-handling-example`);
+              https://baseweb.design/components/popover/#anchor-ref-handling-example`);
           }
         } else {
           this.initializePopper();
@@ -152,9 +152,12 @@ class Tether extends React.Component {
 }
 
 _defineProperty(Tether, "defaultProps", {
+  // @ts-ignore
   anchorRef: null,
+  // @ts-ignore
   onPopperUpdate: () => null,
   placement: TETHER_PLACEMENT.auto,
+  // @ts-ignore
   popperRef: null,
   popperOptions: {}
 });

package/es/layout-grid/grid.js

@@ -56,6 +56,7 @@ export default function Grid({
       gridColumns,
       gridGaps,
       gridGutters,
+      // @ts-ignore
       gridUnit,
       ...gridContextStyleValues
     }