baseui 12.1.3 → 13.0.0

package/card/types.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { Override } from '../helpers/overrides';
-export declare type CardOverrides = {
+export type CardOverrides = {
     Action?: Override;
     Body?: Override;
     Contents?: Override;
@@ -9,7 +9,7 @@ export declare type CardOverrides = {
     Thumbnail?: Override;
     Title?: Override;
 };
-export declare type ImageProps = {
+export type ImageProps = {
     alt?: string;
     complete?: boolean;
     crossOrigin?: string;
@@ -25,13 +25,13 @@ export declare type ImageProps = {
     useMap?: string;
     width?: number;
 };
-export declare type CardProps = {
+export type CardProps = {
     /** Contents to be rendered at the bottom of the Card. Used to organize UI which enables user action. */
     readonly action?: ReactNode;
     /** Content to be rendered within the Card body. */
     readonly children?: ReactNode;
     /** Function that takes Card props and returns a boolean that represents if a thumbnail will be rendered. */
-    readonly hasThumbnail: (a: {
+    readonly hasThumbnail?: (a: {
         readonly thumbnail?: string;
     }) => boolean;
     /** Image to be positioned at the top of the Card. Can be a string representing the img src or an object with img attrs */

package/card/types.js.flow

@@ -41,7 +41,7 @@ export type CardsPropsT = {
   /** Content to be rendered within the Card body. */
   +children?: Node,
   /** Function that takes Card props and returns a boolean that represents if a thumbnail will be rendered. */
-  +hasThumbnail: ({ +thumbnail?: string }) => boolean,
+  +hasThumbnail?: ({ +thumbnail?: string }) => boolean,
   /** Image to be positioned at the top of the Card. Can be a string representing the img src or an object with img attrs */
   +headerImage?: string | ImagePropsT,
   +overrides: CardComponentsT,

package/checkbox/checkbox.d.ts

@@ -3,6 +3,7 @@ import type { CheckboxProps, DefaultProps, CheckboxState } from './types';
 import type { ChangeEvent } from 'react';
 declare class StatelessCheckbox extends React.Component<CheckboxProps, CheckboxState> {
     static defaultProps: DefaultProps;
+    inputRef: React.RefObject<HTMLInputElement>;
     state: {
         isFocused: boolean;
         isFocusVisible: boolean;
@@ -10,6 +11,7 @@ declare class StatelessCheckbox extends React.Component<CheckboxProps, CheckboxS
         isActive: boolean;
     };
     componentDidMount(): void;
+    componentDidUpdate(prevProps: CheckboxProps): void;
     onMouseEnter: (e: ChangeEvent<HTMLInputElement>) => void;
     onMouseLeave: (e: ChangeEvent<HTMLInputElement>) => void;
     onMouseDown: (e: ChangeEvent<HTMLInputElement>) => void;

package/checkbox/checkbox.js

@@ -45,6 +45,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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; }
 
+// @ts-ignore
 var stopPropagation = function stopPropagation(e) {
   return e.stopPropagation();
 };
@@ -65,6 +66,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,
@@ -75,7 +78,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (e) {
       _this.setState({
         isHovered: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseEnter(e);
     });
@@ -84,7 +88,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         isHovered: false,
         isActive: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseLeave(e);
     });
@@ -92,7 +97,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) {
       _this.setState({
         isActive: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseDown(e);
     });
@@ -100,7 +106,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onMouseUp", function (e) {
       _this.setState({
         isActive: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onMouseUp(e);
     });
@@ -108,7 +115,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
       _this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onFocus(e);
 
@@ -122,7 +130,8 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
       _this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onBlur(e);
 
@@ -141,10 +150,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);
       }
     }
   }, {
@@ -156,13 +179,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 === _constants.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,
@@ -226,18 +248,18 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         $labelPlacement: labelPlacement
       }, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), (labelPlacement === 'top' || labelPlacement === 'left') && labelComp, this.props.checkmarkType === _constants.STYLE_TYPE.toggle ? /*#__PURE__*/React.createElement(ToggleTrack, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleTrackOverride)), /*#__PURE__*/React.createElement(Toggle, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(ToggleOverride)))) : /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, (0, _overrides.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
@@ -256,9 +278,7 @@ _defineProperty(StatelessCheckbox, "defaultProps", {
   disabled: false,
   autoFocus: false,
   isIndeterminate: false,
-  inputRef: /*#__PURE__*/React.createRef(),
   error: false,
-  type: 'checkbox',
   checkmarkType: _constants.STYLE_TYPE.default,
   onChange: function onChange() {},
   onMouseEnter: function onMouseEnter() {},

package/checkbox/checkbox.js.flow

@@ -31,7 +31,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
     isIndeterminate: false,
     inputRef: React.createRef(),
     error: false,
-    type: 'checkbox',
     checkmarkType: STYLE_TYPE.default,
     onChange: () => {},
     onMouseEnter: () => {},
@@ -103,7 +102,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       disabled,
       value,
       name,
-      type,
       checked,
       children,
       required,
@@ -185,13 +183,12 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
           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}
+          type="checkbox"
           ref={inputRef}
           // Prevent a second click event from firing when label is clicked.
           // See https://github.com/uber/baseweb/issues/3847

package/checkbox/styled-components.js

@@ -13,6 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+// @ts-ignore
 function getBorderColor(props) {
   var $disabled = props.$disabled,
       $checked = props.$checked,
@@ -33,7 +34,8 @@ function getBorderColor(props) {
   } else {
     return colors.tickBorder;
   }
-}
+} // @ts-ignore
+
 
 function getLabelPadding(props) {
   var _props$$labelPlacemen = props.$labelPlacement,
@@ -69,7 +71,8 @@ function getLabelPadding(props) {
   }
 
   return _defineProperty({}, "padding".concat(paddingDirection), scale300);
-}
+} // @ts-ignore
+
 
 function getBackgroundColor(props) {
   var $disabled = props.$disabled,
@@ -120,7 +123,8 @@ function getBackgroundColor(props) {
       return colors.tickFill;
     }
   }
-}
+} // @ts-ignore
+
 
 function getLabelColor(props) {
   var $disabled = props.$disabled,
@@ -142,7 +146,8 @@ var Root = (0, _styles.styled)('label', function (props) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
-Root.displayName = 'Root';
+Root.displayName = 'Root'; // @ts-ignore
+
 var Checkmark = (0, _styles.styled)('span', function (props) {
   var $checked = props.$checked,
       $disabled = props.$disabled,
@@ -226,7 +231,8 @@ var Input = (0, _styles.styled)('input', {
 });
 exports.Input = Input;
 Input.displayName = "Input";
-Input.displayName = 'Input';
+Input.displayName = 'Input'; // @ts-ignore
+
 var Toggle = (0, _styles.styled)('div', function (props) {
   var backgroundColor = props.$theme.colors.toggleFill;
 

package/checkbox/types.d.ts

@@ -1,9 +1,9 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { STYLE_TYPE } from './constants';
-export declare type LabelPlacement = 'top' | 'right' | 'bottom' | 'left';
-export declare type StyleType = keyof typeof STYLE_TYPE;
-export declare type CheckboxOverrides = {
+export type LabelPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type StyleType = keyof typeof STYLE_TYPE;
+export type CheckboxOverrides = {
     Checkmark?: Override;
     Label?: Override;
     Root?: Override;
@@ -12,16 +12,14 @@ export declare type CheckboxOverrides = {
     ToggleInner?: Override;
     ToggleTrack?: Override;
 };
-export declare type DefaultProps = {
+export type DefaultProps = {
     overrides?: any;
     children?: React.ReactNode;
     checked: boolean;
     disabled: boolean;
     error: boolean;
-    type: string;
     autoFocus: boolean;
     isIndeterminate: boolean;
-    inputRef: React.RefObject<HTMLInputElement>;
     checkmarkType: StyleType;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     onMouseEnter: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
@@ -32,7 +30,7 @@ export declare type DefaultProps = {
     onBlur: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     containsInteractiveElement?: boolean;
 };
-export declare type CheckboxProps = {
+export type CheckboxProps = {
     /** Id of element which contains a related caption */
     'aria-describedby'?: string;
     /** Id of element which contains a related error message */
@@ -57,8 +55,8 @@ export declare type CheckboxProps = {
     inputRef?: React.RefObject<HTMLInputElement>;
     /** Focus the checkbox on initial render. */
     autoFocus?: boolean;
-    /** Passed to the input element type attribute */
-    type?: string;
+    /** Passed to the input element id attribute */
+    id?: string;
     /** Passed to the input element name attribute */
     name?: string;
     /** Passed to the input element value attribute */
@@ -86,18 +84,18 @@ export declare type CheckboxProps = {
     /** handler for blur events on trigger element. */
     onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
 };
-export declare type CheckboxState = {
+export type CheckboxState = {
     isFocused: boolean;
     isFocusVisible: boolean;
     isHovered: boolean;
     isActive: boolean;
 };
-export declare type CheckboxReducerState = {
+export type CheckboxReducerState = {
     checked?: boolean;
     isIndeterminate?: boolean;
 };
-export declare type StateReducer = (stateType: string, nextState: CheckboxReducerState, currentState: CheckboxReducerState, event: React.ChangeEvent<HTMLInputElement>) => CheckboxReducerState;
-export declare type StatefulContainerChildProps = {
+export type StateReducer = (stateType: string, nextState: CheckboxReducerState, currentState: CheckboxReducerState, event: React.ChangeEvent<HTMLInputElement>) => CheckboxReducerState;
+export type StatefulContainerChildProps = {
     overrides?: CheckboxOverrides;
     /** Handler for change events on trigger element. */
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
@@ -112,7 +110,7 @@ export declare type StatefulContainerChildProps = {
     /** Focus the checkbox on initial render. */
     autoFocus?: boolean;
 } & CheckboxReducerState;
-export declare type DefaultStatefulProps = {
+export type DefaultStatefulProps = {
     initialState: CheckboxReducerState;
     children?: (a: StatefulContainerChildProps) => React.ReactNode;
     stateReducer: StateReducer;
@@ -122,7 +120,7 @@ export declare type DefaultStatefulProps = {
     onFocus: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
     onBlur: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
 };
-export declare type StatefulContainerProps = {
+export type StatefulContainerProps = {
     overrides?: CheckboxOverrides;
     /** Component or String value for label of checkbox. */
     children?: (a: StatefulContainerChildProps) => React.ReactNode;
@@ -143,11 +141,11 @@ export declare type StatefulContainerProps = {
     /** Focus the checkbox on initial render. */
     autoFocus?: boolean;
 };
-export declare type StatefulCheckboxProps = {
+export type StatefulCheckboxProps = {
     /** Defines the components initial state value */
     initialState?: CheckboxReducerState;
 } & Omit<CheckboxProps, 'value' | keyof DefaultProps> & Partial<DefaultProps>;
-export declare type SharedStyleProps = {
+export type SharedStyleProps = {
     $isFocused: boolean;
     $isFocusVisible: boolean;
     $isHovered: boolean;

package/checkbox/types.js.flow

@@ -66,8 +66,8 @@ export type PropsT = {
   inputRef: ReactRefT<HTMLInputElement>,
   /** Focus the checkbox on initial render. */
   autoFocus?: boolean,
-  /** Passed to the input element type attribute */
-  type?: string,
+  /** Passed to the input element id attribute */
+  id?: string,
   /** Passed to the input element name attribute */
   name?: string,
   /** Passed to the input element value attribute */

package/combobox/combobox.js

@@ -55,6 +55,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,
@@ -94,7 +96,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 = (0, _reactUid.useUIDSeed)();
@@ -132,6 +135,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");
     }
 
@@ -142,7 +146,8 @@ function Combobox(props) {
     if (!disabled) {
       setIsOpen(true);
     }
-  }
+  } // @ts-ignore
+
 
   function handleKeyDown(event) {
     if (event.keyCode === ARROW_DOWN) {
@@ -201,7 +206,8 @@ function Combobox(props) {
       setSelectionIndex(-1);
       setTempValue(value);
     }
-  }
+  } // @ts-ignore
+
 
   function handleFocus(event) {
     if (!isOpen && options.length) {
@@ -209,13 +215,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;
     }
@@ -226,35 +234,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];
@@ -267,6 +265,7 @@ function Combobox(props) {
       setTempValue(stringified);
 
       if (inputRef.current) {
+        // @ts-ignore
         inputRef.current.focus();
       }
     }
@@ -367,9 +366,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/combobox/combobox.js.flow

@@ -32,6 +32,7 @@ const ARROW_DOWN = 40;
 function Combobox<OptionT>(props: PropsT<OptionT>) {
   const {
     autocomplete = true,
+    clearable = false,
     disabled = false,
     error = false,
     onBlur,
@@ -56,7 +57,10 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const rootRef = React.useRef(null);
-  const inputRef = React.useRef(null);
+  let inputRef = React.useRef(null);
+  if (forwardInputRef) {
+    inputRef = forwardInputRef;
+  }
   const listboxRef = React.useRef(null);
   const selectedOptionRef = React.useRef(null);
 
@@ -185,7 +189,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
     if (onBlur) onBlur(event);
   }
 
-  function handleInputClick() {
+  function handleInputClick(event) {
     if (inputRef.current) {
       inputRef.current.focus();
     }
@@ -312,9 +316,10 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
           {...inputContainerProps}
         >
           <OverriddenInput
-            inputRef={handleInputRef}
+            inputRef={inputRef}
             aria-activedescendant={isOpen && selectionIndex >= 0 ? activeDescendantId : undefined}
             aria-autocomplete="list"
+            clearable={clearable}
             disabled={disabled}
             error={error}
             name={name}

package/combobox/index.d.ts

@@ -4,4 +4,4 @@ export { default as Combobox } from './combobox';
 export { StyledRoot, StyledInputContainer, StyledListBox, StyledListItem, } from './styled-components';
 export * from './types';
 /** @deprecated use ComboboxProps instead. To be removed in future versions.*/
-export declare type PropsT = ComboboxProps;
+export type PropsT = ComboboxProps;

package/combobox/styled-components.js

@@ -41,7 +41,9 @@ exports.StyledListBox = StyledListBox;
 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/combobox/types.d.ts

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { SIZE } from '../input';
-export declare type ComboboxOverrides = {
+export type ComboboxOverrides = {
     Root?: Override;
     InputContainer?: Override;
     Input?: Override;
@@ -9,8 +9,10 @@ export declare type ComboboxOverrides = {
     ListBox?: Override;
     ListItem?: Override;
 };
-export declare type ComboboxProps<Option = unknown> = {
+export type ComboboxProps<Option = unknown> = {
     autocomplete?: boolean;
+    /** If true, adds a clear value icon button to the end of the input container. */
+    clearable?: boolean;
     disabled?: boolean;
     error?: boolean;
     listBoxLabel?: string;
@@ -21,7 +23,7 @@ export declare type ComboboxProps<Option = unknown> = {
     mapOptionToString: (a: Option) => string;
     id?: string;
     name?: string;
-    inputRef?: React.Ref<HTMLElement>;
+    inputRef?: React.RefObject<HTMLElement>;
     onBlur?: (a: React.ChangeEvent<HTMLInputElement>) => unknown;
     onChange: (b: string, a: Option | null) => unknown;
     onFocus?: (a: React.ChangeEvent<HTMLInputElement>) => unknown;

package/combobox/types.js.flow

@@ -16,6 +16,8 @@ export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 export type PropsT<OptionT = mixed> = {|
   // Controls if the input value will be updated while keyboard navigating. Defaults to true.
   autocomplete?: boolean,
+  /** If true, adds a clear value icon button to the end of the input container. */
+  clearable?: boolean,
   // Disallows text input and listbox opening.
   disabled?: boolean,
   // Proxies value through to Input component.

package/data-table/column-anchor.d.ts

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import type { ColumnOptions, SharedColumnOptions } from './types';
-declare type Value = {
+type Value = {
     content: string;
     href: string;
 };
-declare type ReplacementElementAs = React.ComponentType<{
+type ReplacementElementAs = React.ComponentType<{
     href: string;
     children: string;
 }>;
-declare type Options = {
+type Options = {
     elementAs?: ReplacementElementAs | string;
 } & SharedColumnOptions<Value>;
-declare type FilterParameters = {};
-declare type AnchorColumn = ColumnOptions<Value, FilterParameters>;
+type FilterParameters = {};
+type AnchorColumn = ColumnOptions<Value, FilterParameters>;
 declare function AnchorColumn(options: Options): AnchorColumn;
 export default AnchorColumn;

package/data-table/column-anchor.js

@@ -38,9 +38,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 // 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 = (0, _styles.useStyletron)(),