baseui 12.1.3 → 13.0.0

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

@@ -0,0 +1,53 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*
+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 var StyledBaseButtonTimed = withStyle(StyledBaseButton, function (_ref) {
+  var $theme = _ref.$theme,
+      $initialTime = _ref.$initialTime,
+      $timeElapsed = _ref.$timeElapsed;
+  var completionPercentage = $timeElapsed / $initialTime * 100;
+  var timeLeft = $initialTime - $timeElapsed;
+  return _objectSpread({
+    position: 'relative'
+  }, $initialTime > 0 ? {
+    ':after': {
+      animationDuration: "".concat(timeLeft, "s"),
+      animationName: {
+        from: {
+          transform: "translateX(".concat(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 var StyledTimerContainer = styled('span', {
+  // minWidth to ensure button width stays consistent as timeRemaining changes
+  minWidth: '53px'
+});
+StyledTimerContainer.displayName = "StyledTimerContainer";
+StyledTimerContainer.displayName = 'StyledTimerContainer';

package/esm/button-timed/types.js

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

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

package/esm/card/card.js

@@ -19,7 +19,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
 
 var SemanticTitle = function SemanticTitle(_ref) {
   var children = _ref.children,
@@ -63,7 +63,8 @@ function Card(props) {
   var Title = getOverride(TitleOverride) || SemanticTitle;
   var headerImageProps = typeof headerImage === 'string' ? {
     src: headerImage
-  } : headerImage;
+  } : headerImage; // @ts-ignore
+
   var $hasThumbnail = hasThumbnail(props);
   return /*#__PURE__*/React.createElement(Root, _extends({
     "data-baseweb": "card"

package/esm/checkbox/checkbox.js

@@ -36,6 +36,7 @@ import { Checkmark as StyledCheckmark, Input as StyledInput, Label as StyledLabe
 import { STYLE_TYPE } from './constants';
 import { isFocusVisible } from '../utils/focusVisible';
 
+// @ts-ignore
 var stopPropagation = function stopPropagation(e) {
   return e.stopPropagation();
 };
@@ -56,6 +57,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _defineProperty(_assertThisInitialized(_this), "inputRef", _this.props.inputRef || /*#__PURE__*/React.createRef());
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       isFocused: _this.props.autoFocus || false,
       isFocusVisible: false,
@@ -66,7 +69,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (e) {
       _this.setState({
         isHovered: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseEnter(e);
     });
@@ -75,7 +79,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         isHovered: false,
         isActive: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseLeave(e);
     });
@@ -83,7 +88,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) {
       _this.setState({
         isActive: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseDown(e);
     });
@@ -91,7 +97,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseUp", function (e) {
       _this.setState({
         isActive: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseUp(e);
     });
@@ -99,7 +106,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
       _this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onFocus(e);
 
@@ -113,7 +121,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
       _this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onBlur(e);
 
@@ -132,10 +141,24 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       var _this$props = this.props,
           autoFocus = _this$props.autoFocus,
-          inputRef = _this$props.inputRef;
+          isIndeterminate = _this$props.isIndeterminate; // @ts-ignore
+
+      if (autoFocus && this.inputRef.current) {
+        // @ts-ignore
+        this.inputRef.current.focus();
+      }
+
+      if (this.inputRef.current) {
+        this.inputRef.current.indeterminate = Boolean(isIndeterminate);
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var isIndeterminate = this.props.isIndeterminate;
 
-      if (autoFocus && inputRef.current) {
-        inputRef.current.focus();
+      if (this.inputRef.current && isIndeterminate !== prevProps.isIndeterminate) {
+        this.inputRef.current.indeterminate = Boolean(isIndeterminate);
       }
     }
   }, {
@@ -147,13 +170,12 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           onChange = _this$props2.onChange,
           _this$props2$labelPla = _this$props2.labelPlacement,
           labelPlacement = _this$props2$labelPla === void 0 ? this.props.checkmarkType === STYLE_TYPE.toggle ? 'left' : 'right' : _this$props2$labelPla,
-          inputRef = _this$props2.inputRef,
           isIndeterminate = _this$props2.isIndeterminate,
           error = _this$props2.error,
           disabled = _this$props2.disabled,
           value = _this$props2.value,
+          id = _this$props2.id,
           name = _this$props2.name,
-          type = _this$props2.type,
           checked = _this$props2.checked,
           children = _this$props2.children,
           required = _this$props2.required,
@@ -210,18 +232,18 @@ var StatelessCheckbox = /*#__PURE__*/function (_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
@@ -240,9 +262,7 @@ _defineProperty(StatelessCheckbox, "defaultProps", {
   disabled: false,
   autoFocus: false,
   isIndeterminate: false,
-  inputRef: /*#__PURE__*/React.createRef(),
   error: false,
-  type: 'checkbox',
   checkmarkType: STYLE_TYPE.default,
   onChange: function onChange() {},
   onMouseEnter: function onMouseEnter() {},

package/esm/checkbox/styled-components.js

@@ -12,6 +12,7 @@ LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles';
 
+// @ts-ignore
 function getBorderColor(props) {
   var $disabled = props.$disabled,
       $checked = props.$checked,
@@ -32,7 +33,8 @@ function getBorderColor(props) {
   } else {
     return colors.tickBorder;
   }
-}
+} // @ts-ignore
+
 
 function getLabelPadding(props) {
   var _props$$labelPlacemen = props.$labelPlacement,
@@ -68,7 +70,8 @@ function getLabelPadding(props) {
   }
 
   return _defineProperty({}, "padding".concat(paddingDirection), scale300);
-}
+} // @ts-ignore
+
 
 function getBackgroundColor(props) {
   var $disabled = props.$disabled,
@@ -119,7 +122,8 @@ function getBackgroundColor(props) {
       return colors.tickFill;
     }
   }
-}
+} // @ts-ignore
+
 
 function getLabelColor(props) {
   var $disabled = props.$disabled,
@@ -140,7 +144,8 @@ export var Root = styled('label', function (props) {
   };
 });
 Root.displayName = "Root";
-Root.displayName = 'Root';
+Root.displayName = 'Root'; // @ts-ignore
+
 export var Checkmark = styled('span', function (props) {
   var $checked = props.$checked,
       $disabled = props.$disabled,
@@ -221,7 +226,8 @@ export var Input = styled('input', {
   position: 'absolute'
 });
 Input.displayName = "Input";
-Input.displayName = 'Input';
+Input.displayName = 'Input'; // @ts-ignore
+
 export var Toggle = styled('div', function (props) {
   var backgroundColor = props.$theme.colors.toggleFill;
 

package/esm/combobox/combobox.js

@@ -41,6 +41,8 @@ var ARROW_DOWN = 40; // aria 1.1 spec: https://www.w3.org/TR/wai-aria-practices/
 function Combobox(props) {
   var _props$autocomplete = props.autocomplete,
       autocomplete = _props$autocomplete === void 0 ? true : _props$autocomplete,
+      _props$clearable = props.clearable,
+      clearable = _props$clearable === void 0 ? false : _props$clearable,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       _props$error = props.error,
@@ -80,7 +82,8 @@ function Combobox(props) {
       setIsOpen = _React$useState6[1];
 
   var rootRef = React.useRef(null);
-  var inputRef = React.useRef(null);
+  var defaultInputRef = React.useRef(null);
+  var inputRef = forwardInputRef || defaultInputRef;
   var listboxRef = React.useRef(null);
   var selectedOptionRef = React.useRef(null);
   var seed = useUIDSeed();
@@ -118,6 +121,7 @@ function Combobox(props) {
   }, [isOpen, selectedOptionRef.current, listboxRef.current]);
   var listboxWidth = React.useMemo(function () {
     if (rootRef.current) {
+      // @ts-ignore
       return "".concat(rootRef.current.clientWidth, "px");
     }
 
@@ -128,7 +132,8 @@ function Combobox(props) {
     if (!disabled) {
       setIsOpen(true);
     }
-  }
+  } // @ts-ignore
+
 
   function handleKeyDown(event) {
     if (event.keyCode === ARROW_DOWN) {
@@ -187,7 +192,8 @@ function Combobox(props) {
       setSelectionIndex(-1);
       setTempValue(value);
     }
-  }
+  } // @ts-ignore
+
 
   function handleFocus(event) {
     if (!isOpen && options.length) {
@@ -195,13 +201,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;
     }
@@ -212,35 +220,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) {
     var clickedOption = options[index];
@@ -253,6 +251,7 @@ function Combobox(props) {
       setTempValue(stringified);
 
       if (inputRef.current) {
+        // @ts-ignore
         inputRef.current.focus();
       }
     }
@@ -353,9 +352,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/esm/combobox/styled-components.js

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

package/esm/data-table/column-anchor.js

@@ -25,9 +25,11 @@ import Column from './column';
 import { COLUMNS } from './constants';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
 function AnchorFilter(props) {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for anchor column");
-}
+} // @ts-ignore
+
 
 function AnchorCell(props) {
   var _useStyletron = useStyletron(),

package/esm/data-table/column-boolean.js

@@ -29,7 +29,8 @@ function mapSelection(selection, transform) {
     return coercedSelection.add(transform(item));
   });
   return coercedSelection;
-}
+} // @ts-ignore
+
 
 function BooleanFilter(props) {
   var locale = React.useContext(LocaleContext);
@@ -59,7 +60,8 @@ function BooleanFilter(props) {
       });
     }
   });
-}
+} // @ts-ignore
+
 
 function BooleanCell(props) {
   var _useStyletron = useStyletron(),

package/esm/data-table/column-categorical.js

@@ -76,11 +76,13 @@ var StyledHighlightLabel = withStyle(StyledLabel, function (props) {
   };
 
   if (!props.$isFirst) {
+    // @ts-ignore
     style.paddingLeft = null;
   }
 
   return style;
-});
+}); // @ts-ignore
+
 StyledHighlightLabel.displayName = "StyledHighlightLabel";
 
 function HighlightCheckboxLabel(props) {
@@ -158,6 +160,7 @@ export function CategoricalFilter(props) {
       props.close();
     }
   }, showQuery && /*#__PURE__*/React.createElement(Input, {
+    "aria-label": locale.datatable.categoricalFilterSearchLabel,
     size: INPUT_SIZE.compact,
     overrides: {
       Before: InputBefore
@@ -169,6 +172,7 @@ export function CategoricalFilter(props) {
     clearable: true
   }), !query && /*#__PURE__*/React.createElement("div", {
     style: {
+      // @ts-ignore
       marginTop: showQuery ? theme.sizing.scale600 : null
     }
   }, /*#__PURE__*/React.createElement(FilterQuickControls, {
@@ -203,7 +207,7 @@ export function CategoricalFilter(props) {
         setSelection(new Set(selection));
       },
       overrides: {
-        // @ts-expect-error
+        // @ts-ignore
         Label: {
           component: HighlightCheckboxLabel,
           props: {
@@ -213,7 +217,7 @@ export function CategoricalFilter(props) {
       }
     }, category));
   })));
-}
+} // @ts-ignore
 
 function CategoricalCell(props) {
   var _useStyletron5 = useStyletron(),

package/esm/data-table/column-datetime.js

@@ -58,7 +58,7 @@ import { LocaleContext } from '../locale'; // eslint-disable-next-line @typescri
 var DATE_FORMAT = 'MM-dd-yyyy';
 var MASK = '99-99-9999 - 99-99-9999';
 var TIME_FORMAT = 'HH:mm ss:SS';
-var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT);
+var FORMAT_STRING = "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT); // @ts-ignore
 
 function sortDates(a, b) {
   return a - b;
@@ -92,7 +92,7 @@ var CATEGORICAL_OPERATIONS = [{
 }];
 var WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
 var MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-var QUARTERS = [0, 1, 2, 3];
+var QUARTERS = [0, 1, 2, 3]; // @ts-ignore
 
 function Checks(props) {
   var _useStyletron = useStyletron(),
@@ -116,12 +116,14 @@ function Checks(props) {
       checked: checked,
       onChange: function onChange() {
         if (checked) {
+          // @ts-ignore
           props.setValue(function (prev) {
             return prev.filter(function (i) {
               return i !== item.id;
             });
           });
         } else {
+          // @ts-ignore
           props.setValue(function (prev) {
             return [].concat(_toConsumableArray(prev), [item.id]);
           });
@@ -129,7 +131,8 @@ function Checks(props) {
       }
     }, item.label));
   }));
-}
+} // @ts-ignore
+
 
 function filterParamsToInitialState(input) {
   var output = {
@@ -137,11 +140,17 @@ function filterParamsToInitialState(input) {
     comparatorIndex: 0,
     rangeOperator: RANGE_OPERATIONS[0],
     categoricalOperator: CATEGORICAL_OPERATIONS[0],
+    // @ts-ignore
     rangeDates: [],
+    // @ts-ignore
     years: [],
+    // @ts-ignore
     halves: [],
+    // @ts-ignore
     quarters: [],
+    // @ts-ignore
     months: [],
+    // @ts-ignore
     weekdays: []
   };
 
@@ -186,7 +195,8 @@ function filterParamsToInitialState(input) {
   }
 
   return output;
-}
+} // @ts-ignore
+
 
 function DatetimeFilter(props) {
   var _useStyletron3 = useStyletron(),
@@ -201,8 +211,10 @@ function DatetimeFilter(props) {
     return props.data.sort(sortDates);
   }, [props.data]);
   var presentYears = React.useMemo(function () {
-    var dict = {};
+    var dict = {}; // @ts-ignore
+
     props.data.forEach(function (date) {
+      // @ts-ignore
       dict[getYear(date)] = true;
     });
     return Object.keys(dict).map(function (n) {
@@ -346,6 +358,7 @@ function DatetimeFilter(props) {
         }
 
         if (operatorLocaleLabelKey) {
+          // @ts-ignore
           _description = "".concat(locale.datatable[operatorLocaleLabelKey], " - ").concat(_description);
         }
 
@@ -406,6 +419,7 @@ function DatetimeFilter(props) {
     mountNode: mountNode.current,
     options: RANGE_OPERATIONS.map(function (op) {
       return {
+        // @ts-ignore
         label: locale.datatable[op.localeLabelKey],
         id: op.id
       };
@@ -485,6 +499,7 @@ function DatetimeFilter(props) {
     },
     options: CATEGORICAL_OPERATIONS.map(function (op) {
       return {
+        // @ts-ignore
         label: locale.datatable[op.localeLabelKey],
         id: op.id
       };
@@ -546,7 +561,8 @@ function DatetimeFilter(props) {
       };
     })
   })))));
-}
+} // @ts-ignore
+
 
 function DatetimeCell(props) {
   var _useStyletron5 = useStyletron(),