baseui 11.1.2 → 12.0.0

package/select/index.d.ts

@@ -1,326 +1,19 @@
-import * as React from 'react';
-import { StyletronComponent } from 'styletron-react';
-import { SIZE } from '../input';
-import { OnItemSelect } from '../menu';
-import { Override } from '../overrides';
-import { Locale } from '../locale';
-
-export { SIZE } from '../input';
-
-export declare const TYPE: {
-  select: 'select';
-  search: 'search';
-};
-export declare const STATE_CHANGE_TYPE: {
-  select: 'select';
-  remove: 'remove';
-  clear: 'clear';
-};
-
-export interface Option {
-  readonly id?: string | number;
-  readonly label?: React.ReactNode;
-  readonly disabled?: boolean;
-  readonly clearableValue?: boolean;
-  readonly isCreatable?: boolean;
-  readonly __optgroup?: string;
-  [others: string]: any;
-}
-export type Value = ReadonlyArray<Option>;
-export type OptgroupsT = { __ungrouped: Value; [key: string]: Value };
-export type OptionsT = Value | OptgroupsT;
-
-export type ChangeAction = () => any;
-
-export type filterOptions = (
-  options: Value,
-  filterValue: string,
-  excludeOptions?: Value,
-  newProps?: {
-    filterOption?: (option: Option, filterValue: string) => boolean;
-    ignoreCase?: boolean;
-    labelKey?: string;
-    matchPos?: 'any' | 'start';
-    matchProp?: 'any' | 'label' | 'value';
-    trimFilter?: boolean;
-    valueKey?: string;
-  }
-) => Value;
-
-export interface ImperativeMethods {
-  setInputFocus: () => void;
-  setInputBlur: () => void;
-  setDropdownOpen: (d: boolean) => void;
-  setInputValue: (s: string) => void;
-}
-
-export interface SelectOverrides {
-  Root?: Override<any>;
-  ControlContainer?: Override<any>;
-  Placeholder?: Override<any>;
-  ValueContainer?: Override<any>;
-  SingleValue?: Override<any>;
-  MultiValue?: Override<any>;
-  Tag?: Override<any>;
-  InputContainer?: Override<any>;
-  Input?: Override<any>;
-  IconsContainer?: Override<any>;
-  SelectArrow?: Override<any>;
-  ClearIcon?: Override<any>;
-  LoadingIndicator?: Override<any>;
-  SearchIconContainer?: Override<any>;
-  SearchIcon?: Override<any>;
-  Popover?: Override<any>;
-  DropdownContainer?: Override<any>;
-  Dropdown?: Override<any>;
-  DropdownOption?: Override<any>;
-  DropdownListItem?: Override<any>;
-  OptionContent?: Override<any>;
-  StatefulMenu?: Override<any>;
-}
-export interface SelectProps {
-  'aria-label'?: string;
-  'aria-errormessage'?: string;
-  'aria-describedby'?: string;
-  'aria-labelledby'?: string;
-  autoFocus?: boolean;
-  backspaceRemoves?: boolean;
-  backspaceClearsInputValue?: boolean;
-  clearable?: boolean;
-  closeOnSelect?: boolean;
-  creatable?: boolean;
-  deleteRemoves?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  positive?: boolean;
-  escapeClearsValue?: boolean;
-  filterOptions?: (
-    options: Value,
-    filterValue: string,
-    excludeOptions?: Value,
-    newProps?: { valueKey: string; labelKey: string }
-  ) => Value;
-  filterOutSelected?: boolean;
-  getOptionLabel?: (args: {
-    option?: Option;
-    optionState: {
-      $selected?: boolean;
-      $disabled?: boolean;
-      $isHighlighted?: boolean;
-    };
-  }) => React.ReactNode;
-  getValueLabel?: (args: { option: Option }) => React.ReactNode;
-  id?: string;
-  inputRef?: React.Ref<any>;
-  controlRef?: React.Ref<ImperativeMethods>;
-  isLoading?: boolean;
-  labelKey?: string;
-  startOpen?: boolean;
-  maxDropdownHeight?: string;
-  multi?: boolean;
-  noResultsMsg?: React.ReactNode;
-  onBlur?: (e: Event) => any;
-  onBlurResetsInput?: boolean;
-  onChange?: (params: OnChangeParams) => any;
-  onFocus?: React.FocusEventHandler<HTMLElement>;
-  onInputChange?: React.FormEventHandler<HTMLInputElement>;
-  onCloseResetsInput?: boolean;
-  onSelectResetsInput?: boolean;
-  onOpen?: () => any;
-  onClose?: () => any;
-  openOnClick?: boolean;
-  options?: OptionsT;
-  overrides?: SelectOverrides;
-  placeholder?: React.ReactNode;
-  required?: boolean;
-  searchable?: boolean;
-  size?: typeof SIZE[keyof typeof SIZE];
-  type?: typeof TYPE[keyof typeof TYPE];
-  value?: Value;
-  valueKey?: string;
-  mountNode?: HTMLElement;
-}
-export interface SelectState {
-  activeDescendant: string | null;
-  inputValue: string;
-  isFocused: boolean;
-  isOpen: boolean;
-  isPseudoFocused: boolean;
-}
-export class Select extends React.Component<SelectProps, SelectState> {
-  focus(): void;
-  handleTouchOutside(event: TouchEvent): void;
-  handleTouchMove(): void;
-  handleTouchStart(): void;
-  handleTouchEnd(event: TouchEvent): void;
-  handleTouchEndClearValue(event: TouchEvent): void;
-  handleClick(event: MouseEvent | TouchEvent): void;
-  closeMenu(): void;
-  handleInputFocus(event: React.FocusEvent<HTMLElement>): void;
-  handleBlur(event: Event): void;
-  handleClickOutside(event: MouseEvent): void;
-  handleInputChange(event: React.FormEvent<HTMLInputElement>): void;
-  handleKeyDown(event: KeyboardEvent): void;
-  getOptionLabel(
-    locale: Locale,
-    {
-      option,
-    }: {
-      option: Option;
-      optionState: {
-        $selected: boolean;
-        $disabled: boolean;
-        $isHighlighted: boolean;
-      };
-    }
-  ): React.ReactNode;
-  getValueLabel({ option }: { option: Option }): React.ReactNode;
-  getValueArray(value: Value): Option[];
-  setValue(value: Value, option: Option, type: ChangeAction): void;
-  selectValue({ item }: { item: Option }): void;
-  addValue(item: Option): void;
-  popValue(): void;
-  removeValue(item: Option): void;
-  clearValue(event: KeyboardEvent | MouseEvent | TouchEvent): void;
-  renderLoading(): React.ReactNode;
-  renderValue(valueArray: Value, isOpen: boolean, locale: Locale): React.ReactNode;
-  renderInput(): React.ReactNode;
-  renderClear(): React.ReactNode;
-  renderArrow(): React.ReactNode;
-  renderSearch(): React.ReactNode;
-  filterOption(excludeOptions?: Value): Value;
-  getSharedProps(): {
-    $clearable: boolean;
-    $creatable: boolean;
-    $disabled: boolean;
-    $error: boolean;
-    $positive: boolean;
-    $isFocused: boolean;
-    $isLoading: boolean;
-    $isOpen: boolean;
-    $isPseudoFocused: boolean;
-    $multi: boolean;
-    $required: boolean;
-    $searchable: boolean;
-    $size: typeof SIZE[keyof typeof SIZE];
-    $type: typeof TYPE[keyof typeof TYPE];
-  };
-}
-
-export declare const SingleValue: React.FC<any>;
-export declare const MultiValue: React.FC<any>;
-
-export interface AutosizeInputOverrides {
-  Input?: Override<any>;
-}
-export interface AutosizeInputProps {
-  value?: string;
-  defaultValue?: string;
-  inputRef?: React.Ref<any>;
-  overrides?: AutosizeInputOverrides;
-  $size?: typeof SIZE[keyof typeof SIZE];
-}
-export interface AutosizeInputState {
-  inputWidth: number;
-}
-export class AutosizeInput extends React.Component<AutosizeInputProps, AutosizeInputState> {
-  sizerRef(el?: HTMLElement): void;
-  updateInputWidth(): void;
-}
-
-export interface DropdownOverrides {
-  DropdownContainer?: Override<any>;
-  Dropdown?: Override<any>;
-  DropdownOption?: Override<any>;
-  DropdownListItem?: Override<any>;
-  OptionContent?: Override<any>;
-  StatefulMenu?: Override<any>;
-}
-export interface DropdownProps {
-  error?: boolean;
-  getOptionLabel?: (args: {
-    option: Option;
-    optionState: {
-      $selected: boolean;
-      $disabled: boolean;
-      $isHighlighted: boolean;
-    };
-  }) => React.ReactNode;
-  id?: string;
-  innerRef?: React.Ref<any>;
-  isLoading?: boolean;
-  labelKey?: string;
-  maxDropdownHeight?: string;
-  multi?: boolean;
-  onActiveDescendantChange?: (id?: string) => void;
-  noResultsMsg?: React.ReactNode;
-  onItemSelect?: OnItemSelect;
-  options?: Value;
-  overrides?: DropdownOverrides;
-  required?: boolean;
-  searchable?: boolean;
-  size?: typeof SIZE[keyof typeof SIZE];
-  type?: typeof TYPE[keyof typeof TYPE];
-  value?: Value;
-  valueKey?: string;
-  width?: number;
-  keyboardControlNode?: React.Ref<any>;
-}
-export class SelectDropdown extends React.Component<DropdownProps> {
-  getSharedProps(): {
-    $error: boolean;
-    $isLoading: boolean;
-    $multi: boolean;
-    $required: boolean;
-    $searchable: boolean;
-    $size: typeof SIZE[keyof typeof SIZE];
-    $type: typeof TYPE[keyof typeof TYPE];
-    $width: number;
-  };
-  getItemLabel(option: { [key: string]: any }): React.ReactNode;
-  onMouseDown(e: Event): void;
-}
-
-export interface State {
-  value: Value;
-}
-export type StateReducer = (stateType: string, nextState: State, currentState: State) => State;
-export interface OnChangeParams {
-  value: Value;
-  option?: Option;
-  type?: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE];
-}
-export type StatefulSelectProps = SelectProps & {
-  initialState?: State;
-  stateReducer?: StateReducer;
-};
-export declare const StatefulSelect: React.FC<StatefulSelectProps>;
-
-export interface StatefulContainerProps {
-  overrides?: SelectOverrides;
-  children?: React.ReactNode;
-  initialState?: State;
-  stateReducer?: StateReducer;
-  onChange?: (params: OnChangeParams) => any;
-}
-export class StatefulSelectContainer extends React.Component<StatefulContainerProps, State> {
-  onChange(params: OnChangeParams): void;
-  internalSetState(params: OnChangeParams): void;
-}
-
-export declare const StyledRoot: StyletronComponent<any>;
-export declare const StyledControlContainer: StyletronComponent<any>;
-export declare const StyledValueContainer: StyletronComponent<any>;
-export declare const StyledPlaceholder: StyletronComponent<any>;
-export declare const StyledSingleValue: StyletronComponent<any>;
-export declare const StyledInputContainer: StyletronComponent<any>;
-export declare const StyledInput: StyletronComponent<any>;
-export declare const StyledInputSizer: StyletronComponent<any>;
-export declare const StyledIconsContainer: StyletronComponent<any>;
-export declare const StyledSelectArrow: StyletronComponent<any>;
-export declare const StyledClearIcon: StyletronComponent<any>;
-export declare const StyledSearchIconContainer: StyletronComponent<any>;
-export declare const StyledDropdownContainer: StyletronComponent<any>;
-export declare const StyledDropdown: StyletronComponent<any>;
-export declare const StyledDropdownListItem: StyletronComponent<any>;
-export declare const StyledOptionContent: StyletronComponent<any>;
+import type { Optgroups, Options } from './types';
+export { default as Select } from './select';
+export { default as SingleSelect } from './single-select';
+export { default as MultiSelect } from './multi-select';
+export { default as SingleValue } from './value';
+export { default as MultiValue } from './multi-value';
+export { default as AutosizeInput } from './autosize-input';
+export { default as SelectDropdown } from './dropdown';
+export { default as StatefulSelect } from './stateful-select';
+export { default as StatefulSelectContainer } from './stateful-select-container';
+export { StyledRoot, StyledControlContainer, StyledValueContainer, StyledPlaceholder, StyledSingleValue, StyledInputContainer, StyledInput, StyledInputSizer, StyledIconsContainer, StyledSelectArrow, StyledClearIcon, StyledSearchIconContainer, StyledDropdownContainer, StyledDropdown, StyledDropdownListItem, StyledOptionContent, } from './styled-components';
+export { default as filterOptions } from './utils/default-filter-options';
+export { SIZE, TYPE, STATE_CHANGE_TYPE } from './constants';
+export * from './types';
+export type { SelectLocale } from './locale';
+/** @deprecated use Optgroups instead. To be removed in future versions.*/
+export declare type OptgroupsT = Optgroups;
+/** @deprecated use Options instead. To be removed in future versions.*/
+export declare type OptionsT = Options;

package/select/index.js

@@ -3,40 +3,71 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Select", {
+var _exportNames = {
+  Select: true,
+  SingleSelect: true,
+  MultiSelect: true,
+  SingleValue: true,
+  MultiValue: true,
+  AutosizeInput: true,
+  SelectDropdown: true,
+  StatefulSelect: true,
+  StatefulSelectContainer: true,
+  StyledRoot: true,
+  StyledControlContainer: true,
+  StyledValueContainer: true,
+  StyledPlaceholder: true,
+  StyledSingleValue: true,
+  StyledInputContainer: true,
+  StyledInput: true,
+  StyledInputSizer: true,
+  StyledIconsContainer: true,
+  StyledSelectArrow: true,
+  StyledClearIcon: true,
+  StyledSearchIconContainer: true,
+  StyledDropdownContainer: true,
+  StyledDropdown: true,
+  StyledDropdownListItem: true,
+  StyledOptionContent: true,
+  filterOptions: true,
+  SIZE: true,
+  TYPE: true,
+  STATE_CHANGE_TYPE: true
+};
+Object.defineProperty(exports, "AutosizeInput", {
   enumerable: true,
   get: function get() {
-    return _select.default;
+    return _autosizeInput.default;
   }
 });
-Object.defineProperty(exports, "SingleSelect", {
+Object.defineProperty(exports, "MultiSelect", {
   enumerable: true,
   get: function get() {
-    return _singleSelect.default;
+    return _multiSelect.default;
   }
 });
-Object.defineProperty(exports, "MultiSelect", {
+Object.defineProperty(exports, "MultiValue", {
   enumerable: true,
   get: function get() {
-    return _multiSelect.default;
+    return _multiValue.default;
   }
 });
-Object.defineProperty(exports, "SingleValue", {
+Object.defineProperty(exports, "SIZE", {
   enumerable: true,
   get: function get() {
-    return _value.default;
+    return _constants.SIZE;
   }
 });
-Object.defineProperty(exports, "MultiValue", {
+Object.defineProperty(exports, "STATE_CHANGE_TYPE", {
   enumerable: true,
   get: function get() {
-    return _multiValue.default;
+    return _constants.STATE_CHANGE_TYPE;
   }
 });
-Object.defineProperty(exports, "AutosizeInput", {
+Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function get() {
-    return _autosizeInput.default;
+    return _select.default;
   }
 });
 Object.defineProperty(exports, "SelectDropdown", {
@@ -45,124 +76,124 @@ Object.defineProperty(exports, "SelectDropdown", {
     return _dropdown.default;
   }
 });
-Object.defineProperty(exports, "StatefulSelect", {
+Object.defineProperty(exports, "SingleSelect", {
   enumerable: true,
   get: function get() {
-    return _statefulSelect.default;
+    return _singleSelect.default;
   }
 });
-Object.defineProperty(exports, "StatefulSelectContainer", {
+Object.defineProperty(exports, "SingleValue", {
   enumerable: true,
   get: function get() {
-    return _statefulSelectContainer.default;
+    return _value.default;
   }
 });
-Object.defineProperty(exports, "StyledRoot", {
+Object.defineProperty(exports, "StatefulSelect", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledRoot;
+    return _statefulSelect.default;
   }
 });
-Object.defineProperty(exports, "StyledControlContainer", {
+Object.defineProperty(exports, "StatefulSelectContainer", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledControlContainer;
+    return _statefulSelectContainer.default;
   }
 });
-Object.defineProperty(exports, "StyledValueContainer", {
+Object.defineProperty(exports, "StyledClearIcon", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledValueContainer;
+    return _styledComponents.StyledClearIcon;
   }
 });
-Object.defineProperty(exports, "StyledPlaceholder", {
+Object.defineProperty(exports, "StyledControlContainer", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledPlaceholder;
+    return _styledComponents.StyledControlContainer;
   }
 });
-Object.defineProperty(exports, "StyledSingleValue", {
+Object.defineProperty(exports, "StyledDropdown", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledSingleValue;
+    return _styledComponents.StyledDropdown;
   }
 });
-Object.defineProperty(exports, "StyledInputContainer", {
+Object.defineProperty(exports, "StyledDropdownContainer", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledInputContainer;
+    return _styledComponents.StyledDropdownContainer;
   }
 });
-Object.defineProperty(exports, "StyledInput", {
+Object.defineProperty(exports, "StyledDropdownListItem", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledInput;
+    return _styledComponents.StyledDropdownListItem;
   }
 });
-Object.defineProperty(exports, "StyledInputSizer", {
+Object.defineProperty(exports, "StyledIconsContainer", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledInputSizer;
+    return _styledComponents.StyledIconsContainer;
   }
 });
-Object.defineProperty(exports, "StyledIconsContainer", {
+Object.defineProperty(exports, "StyledInput", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledIconsContainer;
+    return _styledComponents.StyledInput;
   }
 });
-Object.defineProperty(exports, "StyledSelectArrow", {
+Object.defineProperty(exports, "StyledInputContainer", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledSelectArrow;
+    return _styledComponents.StyledInputContainer;
   }
 });
-Object.defineProperty(exports, "StyledClearIcon", {
+Object.defineProperty(exports, "StyledInputSizer", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledClearIcon;
+    return _styledComponents.StyledInputSizer;
   }
 });
-Object.defineProperty(exports, "StyledSearchIconContainer", {
+Object.defineProperty(exports, "StyledOptionContent", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledSearchIconContainer;
+    return _styledComponents.StyledOptionContent;
   }
 });
-Object.defineProperty(exports, "StyledDropdownContainer", {
+Object.defineProperty(exports, "StyledPlaceholder", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledDropdownContainer;
+    return _styledComponents.StyledPlaceholder;
   }
 });
-Object.defineProperty(exports, "StyledDropdown", {
+Object.defineProperty(exports, "StyledRoot", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledDropdown;
+    return _styledComponents.StyledRoot;
   }
 });
-Object.defineProperty(exports, "StyledDropdownListItem", {
+Object.defineProperty(exports, "StyledSearchIconContainer", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledDropdownListItem;
+    return _styledComponents.StyledSearchIconContainer;
   }
 });
-Object.defineProperty(exports, "StyledOptionContent", {
+Object.defineProperty(exports, "StyledSelectArrow", {
   enumerable: true,
   get: function get() {
-    return _styledComponents.StyledOptionContent;
+    return _styledComponents.StyledSelectArrow;
   }
 });
-Object.defineProperty(exports, "filterOptions", {
+Object.defineProperty(exports, "StyledSingleValue", {
   enumerable: true,
   get: function get() {
-    return _defaultFilterOptions.default;
+    return _styledComponents.StyledSingleValue;
   }
 });
-Object.defineProperty(exports, "SIZE", {
+Object.defineProperty(exports, "StyledValueContainer", {
   enumerable: true,
   get: function get() {
-    return _constants.SIZE;
+    return _styledComponents.StyledValueContainer;
   }
 });
 Object.defineProperty(exports, "TYPE", {
@@ -171,35 +202,49 @@ Object.defineProperty(exports, "TYPE", {
     return _constants.TYPE;
   }
 });
-Object.defineProperty(exports, "STATE_CHANGE_TYPE", {
+Object.defineProperty(exports, "filterOptions", {
   enumerable: true,
   get: function get() {
-    return _constants.STATE_CHANGE_TYPE;
+    return _defaultFilterOptions.default;
   }
 });
 
-var _select = _interopRequireDefault(require("./select.js"));
+var _select = _interopRequireDefault(require("./select"));
 
-var _singleSelect = _interopRequireDefault(require("./single-select.js"));
+var _singleSelect = _interopRequireDefault(require("./single-select"));
 
-var _multiSelect = _interopRequireDefault(require("./multi-select.js"));
+var _multiSelect = _interopRequireDefault(require("./multi-select"));
 
-var _value = _interopRequireDefault(require("./value.js"));
+var _value = _interopRequireDefault(require("./value"));
 
-var _multiValue = _interopRequireDefault(require("./multi-value.js"));
+var _multiValue = _interopRequireDefault(require("./multi-value"));
 
-var _autosizeInput = _interopRequireDefault(require("./autosize-input.js"));
+var _autosizeInput = _interopRequireDefault(require("./autosize-input"));
 
-var _dropdown = _interopRequireDefault(require("./dropdown.js"));
+var _dropdown = _interopRequireDefault(require("./dropdown"));
 
-var _statefulSelect = _interopRequireDefault(require("./stateful-select.js"));
+var _statefulSelect = _interopRequireDefault(require("./stateful-select"));
 
-var _statefulSelectContainer = _interopRequireDefault(require("./stateful-select-container.js"));
+var _statefulSelectContainer = _interopRequireDefault(require("./stateful-select-container"));
 
-var _styledComponents = require("./styled-components.js");
+var _styledComponents = require("./styled-components");
 
-var _defaultFilterOptions = _interopRequireDefault(require("./utils/default-filter-options.js"));
+var _defaultFilterOptions = _interopRequireDefault(require("./utils/default-filter-options"));
 
-var _constants = require("./constants.js");
+var _constants = require("./constants");
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/select/locale.d.ts

@@ -0,0 +1,11 @@
+export declare type SelectLocale = {
+    noResultsMsg: string;
+    placeholder: string;
+    create: string;
+};
+declare const locale: {
+    noResultsMsg: string;
+    placeholder: string;
+    create: string;
+};
+export default locale;

package/select/multi-select.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { SelectProps } from './types';
+declare function MultiSelect(props: Partial<SelectProps>): JSX.Element;
+export default MultiSelect;