baseui 12.1.3 → 13.0.0

package/es/button-docked/button-docked.js

@@ -0,0 +1,29 @@
+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 { StyledRoot, StyledActionContainer, StyledActionSubContainer } from './styled-components';
+import { getOverrides } from '../helpers/overrides';
+
+const ButtonDocked = props => {
+  const {
+    primaryAction,
+    secondaryActions,
+    dismissiveAction,
+    topAccessory,
+    overrides = {}
+  } = props;
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [ActionContainer, actionContainerProps] = getOverrides(overrides.ActionContainer, StyledActionContainer);
+  const [ActionSubContainer, actionSubContainerProps] = getOverrides(overrides.ActionSubContainer, StyledActionSubContainer);
+  return /*#__PURE__*/React.createElement(Root, rootProps, topAccessory, /*#__PURE__*/React.createElement(ActionContainer, actionContainerProps, /*#__PURE__*/React.createElement(ActionSubContainer, actionSubContainerProps, secondaryActions), /*#__PURE__*/React.createElement(ActionSubContainer, _extends({
+    $reverseWhenWide: true
+  }, actionSubContainerProps), primaryAction, dismissiveAction)));
+};
+
+export default ButtonDocked;

package/es/button-docked/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 ButtonDocked } from './button-docked';
+export * from './styled-components';
+export * from './types';

package/es/button-docked/styled-components.js

@@ -0,0 +1,48 @@
+/*
+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 { styled } from '../styles/index';
+export const StyledRoot = styled('div', ({
+  $theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: $theme.sizing.scale300,
+  paddingTop: $theme.sizing.scale600,
+  paddingRight: $theme.sizing.scale600,
+  paddingBottom: $theme.sizing.scale600,
+  paddingLeft: $theme.sizing.scale600,
+  backgroundColor: $theme.colors.backgroundPrimary,
+  container: 'root / inline-size'
+}));
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+export const StyledActionContainer = styled('div', ({
+  $theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: $theme.sizing.scale300,
+  '@container root (min-width: 600px)': {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  }
+}));
+StyledActionContainer.displayName = "StyledActionContainer";
+StyledActionContainer.displayName = 'StyledActionContainer';
+export const StyledActionSubContainer = styled('div', ({
+  $reverseWhenWide,
+  $theme
+}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: $theme.sizing.scale300,
+  '@container root (min-width: 600px)': {
+    flexDirection: $reverseWhenWide ? 'row-reverse' : 'row'
+  }
+}));
+StyledActionSubContainer.displayName = "StyledActionSubContainer";
+StyledActionSubContainer.displayName = 'StyledActionSubContainer';

package/es/button-docked/types.js

@@ -0,0 +1 @@
+export {};

package/es/button-group/button-group.js

@@ -15,6 +15,7 @@ import { getOverrides } from '../helpers/overrides';
 import { LocaleContext } from '../locale';
 import { StyledRoot } from './styled-components';
 
+// @ts-ignore
 function isIndexSelected(selected, index) {
   if (!Array.isArray(selected) && typeof selected !== 'number') {
     return false;
@@ -68,10 +69,12 @@ export default class ButtonGroup extends React.Component {
       }
 
       return /*#__PURE__*/React.cloneElement(child, {
+        // @ts-ignore
         disabled: disabled || child.props.disabled,
         isSelected,
         ref: isRadio ? this.childRefs[index] : undefined,
         tabIndex: !isRadio || isSelected || isRadio && (!selected || selected === -1) && index === 0 ? 0 : -1,
+        // @ts-ignore
         onKeyDown: e => {
           if (!isRadio) return;
           const value = Number(selected) ? Number(selected) : 0;
@@ -91,6 +94,7 @@ export default class ButtonGroup extends React.Component {
           }
         },
         kind,
+        // @ts-ignore
         onClick: event => {
           if (disabled) {
             return;
@@ -108,6 +112,7 @@ export default class ButtonGroup extends React.Component {
         size,
         overrides: {
           BaseButton: {
+            // @ts-ignore
             style: ({
               $theme
             }) => {

package/es/button-group/stateful-container.js

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { MODE, STATE_CHANGE_TYPE } from './constants';
 
 // handles the case where selected = 0
+// @ts-ignore
 function isSelectedDefined(selected) {
   return Array.isArray(selected) || typeof selected === 'number';
 }
@@ -68,6 +69,7 @@ export default class StatefulContainer extends React.Component {
       selected = []
     } = initialState;
     this.state = {
+      // @ts-ignore
       selected: isSelectedDefined(selected) ? [].concat(selected) : []
     };
   }
@@ -88,6 +90,7 @@ export default class StatefulContainer extends React.Component {
 }
 
 _defineProperty(StatefulContainer, "defaultProps", {
+  // @ts-ignore
   initialState: {
     selected: []
   },

package/es/button-timed/button-timed.js

@@ -0,0 +1,83 @@
+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, SIZE, KIND, SHAPE } from '../button';
+import { StyledBaseButtonTimed, StyledTimerContainer } from './styled-components';
+import { formatTime } from './utils';
+import { getOverrides, mergeOverrides } from '../helpers/overrides';
+
+const ButtonTimed = props => {
+  const {
+    initialTime,
+    // in seconds
+    paused = false,
+    onClick: onClickProp,
+    disabled,
+    children,
+    overrides = {},
+    ...restProps
+  } = props;
+  const [timeRemaining, setTimeRemaining] = React.useState(initialTime * 1000);
+  React.useEffect(() => {
+    const timerId = setTimeout(() => {
+      if (timeRemaining > 0 && !paused) {
+        setTimeRemaining(seconds => seconds - 100);
+      }
+    }, 100);
+
+    if (timeRemaining === 0) {
+      onClickProp();
+    }
+
+    return () => clearTimeout(timerId);
+  }, [timeRemaining, paused]);
+
+  const onClick = () => {
+    setTimeRemaining(0);
+    onClickProp();
+  };
+
+  const {
+    TimerContainer: TimerContainerOverride,
+    ...buttonOverrides
+  } = overrides;
+  const [TimerContainer, timerContainerProps] = getOverrides(TimerContainerOverride, StyledTimerContainer);
+  const buttonMergedOverrides = mergeOverrides({
+    BaseButton: {
+      component: StyledBaseButtonTimed,
+      props: {
+        $initialTime: initialTime,
+        $timeElapsed: (initialTime * 1000 - timeRemaining) / 1000
+      },
+      style: {
+        ':after': {
+          animationPlayState: paused ? 'paused' : 'running'
+        }
+      }
+    }
+  }, {
+    Root: buttonOverrides.Root || {},
+    // @ts-ignore
+    BaseButton: buttonOverrides.BaseButton,
+    StartEnhancer: buttonOverrides.StartEnhancer || {},
+    EndEnhancer: buttonOverrides.EndEnhancer || {},
+    LoadingSpinnerContainer: buttonOverrides.LoadingSpinnerContainer || {},
+    LoadingSpinner: buttonOverrides.LoadingSpinner || {}
+  });
+  return /*#__PURE__*/React.createElement(Button, _extends({}, restProps, {
+    overrides: buttonMergedOverrides,
+    onClick: onClick,
+    size: SIZE.large,
+    kind: KIND.primary,
+    shape: SHAPE.default,
+    disabled: disabled || timeRemaining === 0
+  }), children, /*#__PURE__*/React.createElement(TimerContainer, timerContainerProps, `(${formatTime(timeRemaining)})`));
+};
+
+export default ButtonTimed;

package/es/button-timed/index.js

@@ -0,0 +1,11 @@
+/*
+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 { StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinner, StyledLoadingSpinnerContainer } from '../button';
+import { StyledBaseButtonTimed, StyledTimerContainer } from './styled-components';
+export { StyledBaseButtonTimed, StyledTimerContainer, StyledStartEnhancer, StyledEndEnhancer, StyledLoadingSpinner, StyledLoadingSpinnerContainer };
+export * from './types';
+export { default as ButtonTimed } from './button-timed';

package/es/button-timed/styled-components.js

@@ -0,0 +1,49 @@
+/*
+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 { styled, withStyle } from '../styles/index';
+import { StyledBaseButton } from '../button';
+import { hexToRgb as hexToRgba } from '../styles/util';
+export const StyledBaseButtonTimed = withStyle(StyledBaseButton, ({
+  $theme,
+  $initialTime,
+  $timeElapsed
+}) => {
+  const completionPercentage = $timeElapsed / $initialTime * 100;
+  const timeLeft = $initialTime - $timeElapsed;
+  return {
+    position: 'relative',
+    ...($initialTime > 0 ? {
+      ':after': {
+        animationDuration: `${timeLeft}s`,
+        animationName: {
+          from: {
+            transform: `translateX(${completionPercentage}%)`
+          },
+          to: {
+            transform: 'translateX(100%)'
+          }
+        },
+        animationTimingFunction: 'linear',
+        display: 'inline-block',
+        content: '""',
+        width: '100%',
+        height: '100%',
+        zIndex: '1',
+        position: 'absolute',
+        backgroundColor: hexToRgba($theme.colors.backgroundPrimary, '0.2')
+      }
+    } : {})
+  };
+});
+StyledBaseButtonTimed.displayName = "StyledBaseButtonTimed";
+StyledBaseButtonTimed.displayName = 'StyledBaseButtonTimed';
+export const StyledTimerContainer = styled('span', {
+  // minWidth to ensure button width stays consistent as timeRemaining changes
+  minWidth: '53px'
+});
+StyledTimerContainer.displayName = "StyledTimerContainer";
+StyledTimerContainer.displayName = 'StyledTimerContainer';

package/es/button-timed/types.js

@@ -0,0 +1 @@
+export {};

package/es/button-timed/utils.js

@@ -0,0 +1,21 @@
+/*
+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.
+*/
+function roundUpToNearestInt(num) {
+  const cleanedNum = Math.trunc(num * 10) / 10;
+  return Math.ceil(cleanedNum);
+}
+
+function padTo2Digits(num) {
+  return num.toString().padStart(2, '0');
+}
+
+export const formatTime = totalMilliseconds => {
+  const totalSeconds = totalMilliseconds / 1000;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = roundUpToNearestInt(totalSeconds % 60);
+  return `${minutes}:${padTo2Digits(seconds)}`;
+};

package/es/card/card.js

@@ -12,7 +12,7 @@ import { LevelContext } from '../heading';
 import { Action as StyledAction, Body as StyledBody, Contents as StyledContents, HeaderImage as StyledHeaderImage, Root as StyledRoot, Thumbnail as StyledThumbnail, Title as StyledTitle } from './styled-components';
 export function hasThumbnail(props) {
   return !!props.thumbnail;
-}
+} // @ts-ignore
 
 const SemanticTitle = ({
   children,
@@ -56,7 +56,8 @@ function Card(props) {
   const Title = getOverride(TitleOverride) || SemanticTitle;
   const headerImageProps = typeof headerImage === 'string' ? {
     src: headerImage
-  } : headerImage;
+  } : headerImage; // @ts-ignore
+
   const $hasThumbnail = hasThumbnail(props);
   return /*#__PURE__*/React.createElement(Root, _extends({
     "data-baseweb": "card"

package/es/checkbox/checkbox.js

@@ -14,12 +14,15 @@ import { Checkmark as StyledCheckmark, Input as StyledInput, Label as StyledLabe
 import { STYLE_TYPE } from './constants';
 import { isFocusVisible } from '../utils/focusVisible';
 
+// @ts-ignore
 const stopPropagation = e => e.stopPropagation();
 
 class StatelessCheckbox extends React.Component {
   constructor(...args) {
     super(...args);
 
+    _defineProperty(this, "inputRef", this.props.inputRef || /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "state", {
       isFocused: this.props.autoFocus || false,
       isFocusVisible: false,
@@ -30,7 +33,8 @@ class StatelessCheckbox extends React.Component {
     _defineProperty(this, "onMouseEnter", e => {
       this.setState({
         isHovered: true
-      });
+      }); // @ts-ignore
+
       this.props.onMouseEnter(e);
     });
 
@@ -38,28 +42,32 @@ class StatelessCheckbox extends React.Component {
       this.setState({
         isHovered: false,
         isActive: false
-      });
+      }); // @ts-ignore
+
       this.props.onMouseLeave(e);
     });
 
     _defineProperty(this, "onMouseDown", e => {
       this.setState({
         isActive: true
-      });
+      }); // @ts-ignore
+
       this.props.onMouseDown(e);
     });
 
     _defineProperty(this, "onMouseUp", e => {
       this.setState({
         isActive: false
-      });
+      }); // @ts-ignore
+
       this.props.onMouseUp(e);
     });
 
     _defineProperty(this, "onFocus", e => {
       this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
       this.props.onFocus(e);
 
       if (isFocusVisible(e)) {
@@ -72,7 +80,8 @@ class StatelessCheckbox extends React.Component {
     _defineProperty(this, "onBlur", e => {
       this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
       this.props.onBlur(e);
 
       if (this.state.isFocusVisible !== false) {
@@ -86,11 +95,26 @@ class StatelessCheckbox extends React.Component {
   componentDidMount() {
     const {
       autoFocus,
-      inputRef
+      isIndeterminate
+    } = this.props; // @ts-ignore
+
+    if (autoFocus && this.inputRef.current) {
+      // @ts-ignore
+      this.inputRef.current.focus();
+    }
+
+    if (this.inputRef.current) {
+      this.inputRef.current.indeterminate = Boolean(isIndeterminate);
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isIndeterminate
     } = this.props;
 
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
+    if (this.inputRef.current && isIndeterminate !== prevProps.isIndeterminate) {
+      this.inputRef.current.indeterminate = Boolean(isIndeterminate);
     }
   }
 
@@ -99,13 +123,12 @@ class StatelessCheckbox extends React.Component {
       overrides = {},
       onChange,
       labelPlacement = this.props.checkmarkType === STYLE_TYPE.toggle ? 'left' : 'right',
-      inputRef,
       isIndeterminate,
       error,
       disabled,
       value,
+      id,
       name,
-      type,
       checked,
       children,
       required,
@@ -163,18 +186,18 @@ class StatelessCheckbox extends React.Component {
       $labelPlacement: labelPlacement
     }, sharedProps, mouseEvents, getOverrideProps(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.props.checkmarkType === STYLE_TYPE.toggle ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, getOverrideProps(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, getOverrideProps(ToggleOverride)))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, getOverrideProps(CheckmarkOverride))), /*#__PURE__*/React.createElement(Input, _extends({
       value: value,
+      id: id,
       name: name,
       checked: checked,
       required: required,
       "aria-label": this.props['aria-label'] || this.props.ariaLabel,
-      "aria-checked": isIndeterminate ? 'mixed' : checked,
       "aria-describedby": this.props['aria-describedby'],
       "aria-errormessage": this.props['aria-errormessage'],
       "aria-invalid": error || null,
       "aria-required": required || null,
       disabled: disabled,
-      type: type,
-      ref: inputRef // Prevent a second click event from firing when label is clicked.
+      type: "checkbox",
+      ref: this.inputRef // Prevent a second click event from firing when label is clicked.
       // See https://github.com/uber/baseweb/issues/3847
       ,
       onClick: stopPropagation
@@ -191,9 +214,7 @@ _defineProperty(StatelessCheckbox, "defaultProps", {
   disabled: false,
   autoFocus: false,
   isIndeterminate: false,
-  inputRef: /*#__PURE__*/React.createRef(),
   error: false,
-  type: 'checkbox',
   checkmarkType: STYLE_TYPE.default,
   onChange: () => {},
   onMouseEnter: () => {},

package/es/checkbox/styled-components.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles';
 
+// @ts-ignore
 function getBorderColor(props) {
   const {
     $disabled,
@@ -30,7 +31,8 @@ function getBorderColor(props) {
   } else {
     return colors.tickBorder;
   }
-}
+} // @ts-ignore
+
 
 function getLabelPadding(props) {
   const {
@@ -73,7 +75,8 @@ function getLabelPadding(props) {
   return {
     [`padding${paddingDirection}`]: scale300
   };
-}
+} // @ts-ignore
+
 
 function getBackgroundColor(props) {
   const {
@@ -128,7 +131,8 @@ function getBackgroundColor(props) {
       return colors.tickFill;
     }
   }
-}
+} // @ts-ignore
+
 
 function getLabelColor(props) {
   const {
@@ -155,7 +159,8 @@ export const Root = styled('label', props => {
   };
 });
 Root.displayName = "Root";
-Root.displayName = 'Root';
+Root.displayName = 'Root'; // @ts-ignore
+
 export const Checkmark = styled('span', props => {
   const {
     $checked,
@@ -252,7 +257,8 @@ export const Input = styled('input', {
   position: 'absolute'
 });
 Input.displayName = "Input";
-Input.displayName = 'Input';
+Input.displayName = 'Input'; // @ts-ignore
+
 export const Toggle = styled('div', props => {
   let backgroundColor = props.$theme.colors.toggleFill;
 

package/es/combobox/combobox.js

@@ -22,6 +22,7 @@ const ARROW_DOWN = 40; // aria 1.1 spec: https://www.w3.org/TR/wai-aria-practice
 function Combobox(props) {
   const {
     autocomplete = true,
+    clearable = false,
     disabled = false,
     error = false,
     onBlur,
@@ -44,7 +45,8 @@ function Combobox(props) {
   const [tempValue, setTempValue] = React.useState(value);
   const [isOpen, setIsOpen] = React.useState(false);
   const rootRef = React.useRef(null);
-  const inputRef = React.useRef(null);
+  const defaultInputRef = React.useRef(null);
+  const inputRef = forwardInputRef || defaultInputRef;
   const listboxRef = React.useRef(null);
   const selectedOptionRef = React.useRef(null);
   const seed = useUIDSeed();
@@ -82,6 +84,7 @@ function Combobox(props) {
   }, [isOpen, selectedOptionRef.current, listboxRef.current]);
   const listboxWidth = React.useMemo(() => {
     if (rootRef.current) {
+      // @ts-ignore
       return `${rootRef.current.clientWidth}px`;
     }
 
@@ -92,7 +95,8 @@ function Combobox(props) {
     if (!disabled) {
       setIsOpen(true);
     }
-  }
+  } // @ts-ignore
+
 
   function handleKeyDown(event) {
     if (event.keyCode === ARROW_DOWN) {
@@ -149,7 +153,8 @@ function Combobox(props) {
       setSelectionIndex(-1);
       setTempValue(value);
     }
-  }
+  } // @ts-ignore
+
 
   function handleFocus(event) {
     if (!isOpen && options.length) {
@@ -157,13 +162,15 @@ function Combobox(props) {
     }
 
     if (onFocus) onFocus(event);
-  }
+  } // @ts-ignore
+
 
   function handleBlur(event) {
     if (listboxRef.current && event.relatedTarget && // NOTE(chase): Contains method expects a Node type, but relatedTarget is
     // EventTarget which is a super type of Node. Passing an EventTarget seems
     // to work fine, assuming the flow type is too strict.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // @ts-ignore
     listboxRef.current.contains(event.relatedTarget)) {
       return;
     }
@@ -174,35 +181,25 @@ function Combobox(props) {
     if (onBlur) onBlur(event);
   }
 
-  function handleInputClick() {
+  function handleInputClick(event) {
     if (inputRef.current) {
+      // @ts-ignore
       inputRef.current.focus();
     }
 
     if (!isOpen && options.length) {
       handleOpen();
     }
-  }
+  } // @ts-ignore
+
 
   function handleInputChange(event) {
     handleOpen();
     setSelectionIndex(-1);
     onChange(event.target.value, null);
     setTempValue(event.target.value);
-  }
+  } // @ts-ignore
 
-  function handleInputRef(input) {
-    inputRef.current = input;
-
-    if (forwardInputRef) {
-      if (typeof forwardInputRef === 'function') {
-        forwardInputRef(input);
-      } else {
-        // @ts-expect-error todo(flow->ts)
-        forwardInputRef.current = input;
-      }
-    }
-  }
 
   function handleOptionClick(index) {
     let clickedOption = options[index];
@@ -215,6 +212,7 @@ function Combobox(props) {
       setTempValue(stringified);
 
       if (inputRef.current) {
+        // @ts-ignore
         inputRef.current.focus();
       }
     }
@@ -289,9 +287,10 @@ function Combobox(props) {
       ,
       role: "combobox"
     }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
-      inputRef: handleInputRef,
+      inputRef: inputRef,
       "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
       "aria-autocomplete": "list",
+      clearable: clearable,
       disabled: disabled,
       error: error,
       name: name,

package/es/combobox/styled-components.js

@@ -30,7 +30,9 @@ export const StyledListBox = styled('ul', ({
 StyledListBox.displayName = "StyledListBox";
 StyledListBox.displayName = 'StyledListBox';
 
-function buildStylesForSize(size, theme) {
+function buildStylesForSize( // @ts-ignore
+size, // @ts-ignore
+theme) {
   const paddingDir = theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
 
   switch (size) {