baseui 11.0.2 → 11.0.3

package/datepicker/types.js.flow

@@ -241,7 +241,7 @@ export type DatepickerPropsT<T = Date> = {
   /** Where to mount the popover */
   mountNode?: HTMLElement,
   /** When single picker, fn is always called. When range picker, fn is called when start and end date are selected. */
-  onChange?: ({ +date: ?T | Array<T> }) => mixed,
+  onChange?: ({ date: ?T | Array<T> }) => mixed,
   /** Called when calendar is closed */
   onClose?: () => mixed,
   /** Called when calendar is opened */
@@ -320,7 +320,7 @@ export type StatefulContainerPropsT<PropsT, T = Date> = {
   /** A state change handler. */
   stateReducer: StateReducerT<T>,
   /** When single picker, fn is called when date/time is selected. When range picker, fn is called when both start and end are selected. */
-  onChange?: ({ +date: ?T | Array<T> }) => mixed,
+  onChange?: ({ date: ?T | Array<T> }) => mixed,
   /** When single picker, fn is called when date/time is selected. When range picker, fn is called when either start or end date changes. */
   onRangeChange?: ({ +date: ?T | Array<?T> }) => mixed,
   adapter?: DateIOAdapter<T>,

package/es/select/select-component.js

@@ -436,6 +436,12 @@ class Select extends React.Component {
     _defineProperty(this, "handleInputRef", input => {
       this.input = input;
 
+      if (typeof this.props.inputRef === 'function') {
+        this.props.inputRef(input);
+      } else if (this.props.inputRef) {
+        this.props.inputRef.current = input;
+      }
+
       if (this.props.controlRef && typeof this.props.controlRef === 'function') {
         this.props.controlRef(input);
       }

package/es/select/utils/default-filter-options.js

@@ -37,7 +37,7 @@ const filterOptions = (options, filterValue, excludeOptions, newProps) => {
     acc.add(option[props.valueKey]);
     return acc;
   }, new Set());
-  const re = new RegExp(`${props.matchPos === 'start' ? '$' : ''}${escapeRegExp(filterValue)}`, props.ignoreCase ? 'i' : ''); // $FlowFixMe
+  const re = new RegExp(`${props.matchPos === 'start' ? '^' : ''}${escapeRegExp(filterValue)}`, props.ignoreCase ? 'i' : ''); // $FlowFixMe
 
   return options.filter(option => {
     if (excludeValues.has(option[props.valueKey])) return false;

package/esm/select/select-component.js

@@ -511,6 +511,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
       _this.input = input;
 
+      if (typeof _this.props.inputRef === 'function') {
+        _this.props.inputRef(input);
+      } else if (_this.props.inputRef) {
+        _this.props.inputRef.current = input;
+      }
+
       if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
         _this.props.controlRef(input);
       }

package/esm/select/utils/default-filter-options.js

@@ -43,7 +43,7 @@ var filterOptions = function filterOptions(options, filterValue, excludeOptions,
     acc.add(option[props.valueKey]);
     return acc;
   }, new Set());
-  var re = new RegExp("".concat(props.matchPos === 'start' ? '$' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
+  var re = new RegExp("".concat(props.matchPos === 'start' ? '^' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
 
   return options.filter(function (option) {
     if (excludeValues.has(option[props.valueKey])) return false;

package/index.d.ts

@@ -5,53 +5,47 @@ import {
   WithStyleFn as StyletronWithStyleFn,
   StyledFn as StyletronStyledFn,
 } from 'styletron-react';
-import {Override, Overrides} from './overrides';
-import {Locale} from './locale';
-import {Theme, ThemePrimitives} from './theme';
+import { Override, Overrides } from './overrides';
+import { Locale } from './locale';
+import { Theme, ThemePrimitives } from './theme';
 
 type UseStyletronFn<Theme> = () => [(arg: StyleObject) => string, Theme];
 export function createThemedUseStyletron<Theme>(): UseStyletronFn<Theme>;
 export const useStyletron: UseStyletronFn<Theme>;
-export function withWrapper<
-  C extends StyletronComponent<any>,
-  P extends object
->(
+export function withWrapper<C extends StyletronComponent<any>, P extends object>(
   component: C,
-  wrapper: (component: C) => React.ComponentType<P>,
+  wrapper: (component: C) => React.ComponentType<P>
 ): StyletronComponent<React.ComponentProps<C> & P>;
 
 export function createTheme<P extends object>(
   primitives: Partial<ThemePrimitives>,
-  overrides?: P,
+  overrides?: P
 ): Theme & P;
 export function createLightTheme<P extends object>(
   primitives: Partial<ThemePrimitives>,
-  overrides?: P,
+  overrides?: P
 ): Theme & P;
 export function createDarkTheme<P extends object>(
   primitives: Partial<ThemePrimitives>,
-  overrides?: P,
+  overrides?: P
 ): Theme & P;
-export function mergeOverrides<T>(
-  target?: Overrides<T>,
-  source?: Overrides<T>,
-): Overrides<T>;
+export function mergeOverrides<T>(target?: Overrides<T>, source?: Overrides<T>): Overrides<T>;
 export function styled<
   P extends object,
   C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
   T = Theme
 >(
   component: C,
-  styledFn: StyleObject | ((props: {$theme: T} & P) => StyleObject),
+  styledFn: StyleObject | ((props: { $theme: T } & P) => StyleObject)
 ): StyletronComponent<
-  Pick<
-    React.ComponentProps<C>,
-    Exclude<keyof React.ComponentProps<C>, {className: string}>
-  > &
-    P
+  Pick<React.ComponentProps<C>, Exclude<keyof React.ComponentProps<C>, { className: string }>> & P
 >;
+export function withStyle<C extends StyletronComponent<any>, P extends object, T = Theme>(
+  component: C,
+  styledFn: StyleObject | ((props: { $theme: T } & P) => StyleObject)
+): StyletronComponent<React.ComponentProps<C> & P>;
 
-export {Theme} from 'baseui/theme';
+export { Theme } from 'baseui/theme';
 export const LightTheme: Theme;
 export const LightThemeMove: Theme;
 export const lightThemePrimitives: ThemePrimitives;
@@ -85,18 +79,11 @@ export interface ThemeProviderProps {
 export const ThemeProvider: React.FC<ThemeProviderProps>;
 
 export interface StyledFn<T> extends StyletronStyledFn {
-  <
-    C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
-    P extends object
-  >(
+  <C extends keyof JSX.IntrinsicElements | React.ComponentType<any>, P extends object>(
     component: C,
-    style: (props: {$theme: T} & P) => StyleObject,
+    style: (props: { $theme: T } & P) => StyleObject
   ): StyletronComponent<
-    Pick<
-      React.ComponentProps<C>,
-      Exclude<keyof React.ComponentProps<C>, {className: string}>
-    > &
-      P
+    Pick<React.ComponentProps<C>, Exclude<keyof React.ComponentProps<C>, { className: string }>> & P
   >;
 }
 
@@ -105,10 +92,8 @@ export function createThemedStyled<Theme>(): StyledFn<Theme>;
 export interface WithStyleFn<T = Theme> extends StyletronWithStyleFn {
   <C extends StyletronComponent<any>, P extends object, T1 = T>(
     component: C,
-    style: (props: P & {$theme: T1}) => StyleObject,
+    style: (props: P & { $theme: T1 }) => StyleObject
   ): StyletronComponent<React.ComponentProps<C> & P>;
 }
 
-export const withStyle: WithStyleFn;
-
 export function createThemedWithStyle<Theme>(): WithStyleFn<Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "11.0.2",
+  "version": "11.0.3",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/select/index.d.ts

@@ -111,6 +111,7 @@ export interface SelectProps {
   }) => React.ReactNode;
   getValueLabel?: (args: { option: Option }) => React.ReactNode;
   id?: string;
+  inputRef?: React.Ref<any>;
   controlRef?: React.Ref<ImperativeMethods>;
   isLoading?: boolean;
   labelKey?: string;

package/select/select-component.js

@@ -530,6 +530,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
       _this.input = input;
 
+      if (typeof _this.props.inputRef === 'function') {
+        _this.props.inputRef(input);
+      } else if (_this.props.inputRef) {
+        _this.props.inputRef.current = input;
+      }
+
       if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
         _this.props.controlRef(input);
       }

package/select/select-component.js.flow

@@ -497,11 +497,16 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
   };
 
-  // This method is to preserve backwards compatibility for users using controlRef to directly
-  // access the input element. This capability is not documented, and may be removed in the future.
   //flowlint-next-line unclear-type:off
   handleInputRef = (input: React.ElementRef<any>) => {
     this.input = input;
+
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(input);
+    } else if (this.props.inputRef) {
+      this.props.inputRef.current = input;
+    }
+
     if (this.props.controlRef && typeof this.props.controlRef === 'function') {
       this.props.controlRef(input);
     }

package/select/types.js.flow

@@ -138,6 +138,7 @@ export type PropsT = {
   id?: string,
   /** Defines if the comparison for a new creatable value should be case-insensitive. */
   ignoreCase?: boolean,
+  inputRef?: ReactRefT<HTMLInputElement>,
   /** An imperative handle exposing internal methods. */
   controlRef?: ControlRefT,
   /** Defines if the select is in a loading (async) state. */

package/select/utils/default-filter-options.js

@@ -50,7 +50,7 @@ var filterOptions = function filterOptions(options, filterValue, excludeOptions,
     acc.add(option[props.valueKey]);
     return acc;
   }, new Set());
-  var re = new RegExp("".concat(props.matchPos === 'start' ? '$' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
+  var re = new RegExp("".concat(props.matchPos === 'start' ? '^' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
 
   return options.filter(function (option) {
     if (excludeValues.has(option[props.valueKey])) return false;

package/select/utils/default-filter-options.js.flow

@@ -58,7 +58,7 @@ const filterOptions = (
   }, new Set());
 
   const re = new RegExp(
-    `${props.matchPos === 'start' ? '$' : ''}${escapeRegExp(filterValue)}`,
+    `${props.matchPos === 'start' ? '^' : ''}${escapeRegExp(filterValue)}`,
     props.ignoreCase ? 'i' : ''
   );
 

package/spinner/index.d.ts

@@ -1,5 +1,5 @@
-import {StyletronComponent} from 'styletron-react';
-import {Sizing} from '../theme.ts';
+import { StyletronComponent } from 'styletron-react';
+import { Sizing } from '../theme.ts';
 
 export enum SIZE {
   small = 'small',
@@ -8,6 +8,7 @@ export enum SIZE {
 }
 
 export interface SpinnerProps {
+  [key: string]: any;
   $color?: string;
   $borderWidth?: number | string | SIZE | Sizing;
   $size?: number | string | SIZE | Sizing;