onekijs-ui 0.21.9 → 0.22.0

package/dist/components/icon/util.d.ts

@@ -42,16 +42,16 @@ export declare const getIconDivProps: (props: IconProps) => {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
-    draggable?: (boolean | "false" | "true") | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
     slot?: string | undefined;
-    spellCheck?: (boolean | "false" | "true") | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     style?: import("react").CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
@@ -80,55 +80,55 @@ export declare const getIconDivProps: (props: IconProps) => {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: (boolean | "false" | "true") | undefined;
-    'aria-autocomplete'?: "both" | "none" | "inline" | "list" | undefined;
+    'aria-atomic'?: (boolean | "true" | "false") | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
     'aria-braillelabel'?: string | undefined;
     'aria-brailleroledescription'?: string | undefined;
-    'aria-busy'?: (boolean | "false" | "true") | undefined;
-    'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
+    'aria-busy'?: (boolean | "true" | "false") | undefined;
+    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "date" | "location" | undefined;
+    'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
-    'aria-disabled'?: (boolean | "false" | "true") | undefined;
+    'aria-disabled'?: (boolean | "true" | "false") | undefined;
     'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: (boolean | "false" | "true") | undefined;
+    'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: (boolean | "false" | "true") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree" | undefined;
-    'aria-hidden'?: (boolean | "false" | "true") | undefined;
-    'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-hidden'?: (boolean | "true" | "false") | undefined;
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
     'aria-label'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     'aria-level'?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: (boolean | "false" | "true") | undefined;
-    'aria-multiline'?: (boolean | "false" | "true") | undefined;
-    'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
+    'aria-modal'?: (boolean | "true" | "false") | undefined;
+    'aria-multiline'?: (boolean | "true" | "false") | undefined;
+    'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
     'aria-orientation'?: "horizontal" | "vertical" | undefined;
     'aria-owns'?: string | undefined;
     'aria-placeholder'?: string | undefined;
     'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "mixed" | "false" | "true" | undefined;
-    'aria-readonly'?: (boolean | "false" | "true") | undefined;
-    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: (boolean | "false" | "true") | undefined;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
+    'aria-readonly'?: (boolean | "true" | "false") | undefined;
+    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-required'?: (boolean | "true" | "false") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
     'aria-rowindextext'?: string | undefined;
     'aria-rowspan'?: number | undefined;
-    'aria-selected'?: (boolean | "false" | "true") | undefined;
+    'aria-selected'?: (boolean | "true" | "false") | undefined;
     'aria-setsize'?: number | undefined;
     'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
     'aria-valuemax'?: number | undefined;

package/dist/components/list/typings.d.ts

@@ -64,7 +64,7 @@ export type ListConfig<T = any, I extends ListItem<T> = ListItem<T>> = {
     ItemLoadingComponent?: FC;
     ItemComponent?: FC<ListItemProps<T, I>>;
     ItemContentComponent?: FC<ListItemProps<T, I>>;
-    NotFoundComponent?: FC<ListNotFoundProps>;
+    NotFoundComponent?: FC<ListNotFoundProps> | null;
     LoadingComponent?: FC<StylableProps>;
     itemHeight?: number | ((index: number) => number);
     keyboardNavigable?: boolean;

package/dist/components/select/AutoComplete.d.ts

@@ -0,0 +1,6 @@
+import { Primitive } from 'onekijs-framework';
+import React from 'react';
+import { AutoCompleteProps, FormAutoCompleteProps, SelectController, SelectItem, SelectState } from './typings';
+declare const AutoComplete: <T = Primitive, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>(props: AutoCompleteProps<T, I, S, C>) => React.JSX.Element;
+export declare const FormAutoComplete: <T extends Primitive = Primitive, I extends SelectItem<T> = SelectItem<T>>(props: FormAutoCompleteProps<T, I>) => React.JSX.Element;
+export default AutoComplete;

package/dist/components/select/SelectService.d.ts

@@ -5,16 +5,17 @@ declare class SelectService<T = any, I extends SelectItem<T> = SelectItem<T>, S
     protected lastCheckQuery: Query | undefined;
     get defaultValue(): T | T[] | null | undefined;
     get defaultValueLoading(): boolean | undefined;
-    check(): Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>;
+    check(): Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>;
     get status(): CollectionStatus;
     setData(data: T[], query?: Query): void;
-    setDefaultValue(value: T | T[] | null | undefined): Generator<void | Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>, void, unknown>;
+    setDefaultValue(value: T | T[] | null | undefined): Generator<void | Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>, void, unknown>;
     setDefaultValueLoading(loading: boolean): void;
+    setInputValue(value: string | null): Generator<void | T | Promise<T | null> | null, void, T>;
     setItemWidth(_item: I, value: number): void;
     setValue(value: null | T | T[]): void;
     setUrl(url: string, query?: Query): void;
     _buildItem(data: T | null | undefined, adaptee: unknown, context?: AnonymousObject): I;
-    _filterItem(item: I | undefined, query: Query, valid: boolean): Generator<I[] | Generator<void | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>;
+    _filterItem(item: I | undefined, query: Query, valid: boolean): Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>;
     _compareItem(a: I | undefined, b: I | undefined): boolean;
     _doSearch(search: Primitive | undefined): boolean;
     _setDefaultValue(value: T | T[] | null | undefined): void;

package/dist/components/select/components/ControlledSelectComponent.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ControllerSelectProps, SelectController, SelectItem, SelectState } from '../typings';
-declare const ControlledSelectComponent: <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>({ attachDropdownToBody, className, placeholder, controller, InputComponent, IconComponent, OptionContentComponent, OptionComponent, OptionLoadingComponent, MultiOptionsComponent, NotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height, multiple, status, size, nullable, minChars, openOnFocus, searchable, dropdownWidthModifier, preload, increment, animationMs, disabled, defaultValue, defaultValueLoading, required, sameWidth, overscan, clickable, ListComponent, autoCompleteSearch, maxDisplayTokens, validateValue, }: ControllerSelectProps<T, I, S, C>) => React.JSX.Element;
+declare const ControlledSelectComponent: <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>({ attachDropdownToBody, className, placeholder, controller, InputComponent, IconComponent, OptionContentComponent, OptionComponent, OptionLoadingComponent, MultiOptionsComponent, NotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height, multiple, status, size, nullable, minChars, openOnFocus, searchable, dropdownWidthModifier, preload, increment, animationMs, disabled, defaultValue, defaultValueLoading, required, sameWidth, overscan, clickable, ListComponent, autoCompleteSearch, autoCompleteAdapter, mode, maxDisplayTokens, validateValue, }: ControllerSelectProps<T, I, S, C>) => React.JSX.Element;
 export default ControlledSelectComponent;

package/dist/components/select/typings.d.ts

@@ -1,4 +1,4 @@
-import { AnyFunction, ChangeHandler, Collection, CollectionBroker, CollectionProxy, FormFieldProps, ValidationStatus } from 'onekijs-framework';
+import { AnyFunction, ChangeHandler, Collection, CollectionBroker, CollectionProxy, FormFieldProps, Primitive, ValidationStatus } from 'onekijs-framework';
 import React, { FC } from 'react';
 import { TshirtSize } from '../../styles/typings';
 import { DropdownWidthModifier } from '../dropdown/typings';
@@ -14,10 +14,18 @@ export type ArraySelectProps<T = any, I extends SelectItem<T> = SelectItem<T>> =
 export type ArrayTreeSelectProps<T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>> = Omit<ArraySelectProps<T, I>, 'dataSource'> & {
     dataSource: T[] | string;
 };
+export type AutoCompleteAdapter<T = any> = (value: string | null) => T | null | Promise<T | null>;
+export type AutoCompleteProps<T = Primitive, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>> = Omit<SelectProps<T, I, S, C>, 'mode' | 'autoCompleteSearch' | 'validateValue' | 'clickable' | 'searchable'> & {
+    type?: 'text' | 'number';
+};
 export type ControllerSelectProps<T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>> = SelectConfig<T, I> & {
     controller: CollectionProxy<T, I, S, C>;
 };
 export type ControllerTreeSelectProps<T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>, S extends TreeSelectState<T, I> = TreeSelectState<T, I>, C extends TreeSelectController<T, I, S> = TreeSelectController<T, I, S>> = ControllerSelectProps<T, I, S, C> & TreeProps<T, I, S, C>;
+export type FormAutoCompleteProps<T = Primitive, I extends SelectItem<T> = SelectItem<T>> = AutoCompleteProps<T, I> & FormFieldProps<T> & FieldLayoutProps & {
+    defaultValue?: T | T[] | null;
+    FieldComponent?: React.FC<AutoCompleteProps<T, I>>;
+};
 export type FormSelectProps<T = any, I extends SelectItem<T> = SelectItem<T>> = SelectProps<T, I> & FormFieldProps<T> & FieldLayoutProps & {
     defaultValue?: T | T[] | null;
     FieldComponent?: React.FC<SelectProps<T, I>>;
@@ -29,6 +37,7 @@ export type SelectController<T = any, I extends SelectItem<T> = SelectItem<T>, S
     setDefaultValue: (defaultValue: T | T[] | null | undefined) => void;
     setDefaultValueLoading: (loading: boolean) => void;
     setItemWidth: (item: I, width: number) => void;
+    setInputValue: (value: string | null) => void;
 };
 export interface SelectIconProps {
     open: boolean;
@@ -37,7 +46,7 @@ export interface SelectIconProps {
     onClick: AnyFunction<void>;
 }
 export interface SelectInputProps<T = any, I extends SelectItem<T> = SelectItem<T>> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
-    IconComponent?: FC<SelectIconProps>;
+    IconComponent?: FC<SelectIconProps> | null;
     focus: boolean;
     value?: string;
     tokens?: I[];
@@ -75,6 +84,7 @@ export type SelectOptionProps<T = any, I extends SelectItem<T> = SelectItem<T>>
 };
 export type SelectProps<T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>> = SelectConfig<T, I> & {
     adapter?: SelectItemAdapter<T>;
+    autoCompleteAdapter?: AutoCompleteAdapter<T>;
     controller?: CollectionProxy<T, I, S, C>;
     dataSource?: T[] | [T, string][] | string;
     fetchOnce?: boolean;
@@ -85,8 +95,8 @@ export type SelectBroker<T = any, I extends SelectItem<T> = SelectItem<T>, S ext
 export type SelectConfig<T = any, I extends SelectItem<T> = SelectItem<T>> = Omit<ListConfig<T, I>, 'ItemComponent'> & {
     attachDropdownToBody?: boolean;
     InputComponent?: React.ForwardRefExoticComponent<React.PropsWithoutRef<SelectInputProps<T, I>> & React.RefAttributes<HTMLDivElement>>;
-    IconComponent?: FC<SelectIconProps>;
-    NotFoundComponent?: FC<SelectNotFoundProps>;
+    IconComponent?: FC<SelectIconProps> | null;
+    NotFoundComponent?: FC<SelectNotFoundProps> | null;
     placeholder?: string;
     value?: T | T[] | null;
     onChange?: ChangeHandler<T | T[] | null>;
@@ -117,8 +127,10 @@ export type SelectConfig<T = any, I extends SelectItem<T> = SelectItem<T>> = Omi
     sameWidth?: boolean;
     ListComponent?: React.FC<SelectListComponentProps<T, I>>;
     autoCompleteSearch?: boolean;
+    autoCompleteAdapter?: AutoCompleteAdapter<T>;
     maxDisplayTokens?: number;
     validateValue?: boolean;
+    mode?: 'default' | 'autocomplete';
 };
 export type SelectListComponentProps<T = any, I extends SelectItem<T> = SelectItem<T>> = CollectionListProps<T, I> & {
     optionsRef: React.RefObject<HTMLDivElement>;

package/dist/components/select/util.d.ts

@@ -1,5 +1,7 @@
 import { CollectionProxy, Query } from 'onekijs-framework';
 import { SelectController, SelectItem, SelectState } from './typings';
+export declare const defaultAutocompleteAdapter: <T>(value: string | null) => T | null;
+export declare const numberAutocompleteAdapter: <T>(value: string | null) => T | null;
 export declare const findSelectItem: <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>(controller: C | CollectionProxy<T, I, S, C>, pattern: string) => I | undefined;
 export declare const findSelectItemIndex: <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>(controller: C | CollectionProxy<T, I, S, C>, item?: I | undefined) => number;
 export declare const shouldCheckSelect: (currentQuery: Query, lastCheckQuery?: Query) => boolean;

package/dist/components/tree/components/ControllerTreeComponent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const ControllerTreeComponent: {
-    <T = any, I extends TreeItem<T> = TreeItem<T>>({ controller, className, onActivate, onSelect, height, virtual, gap, TreeIconComponent, TreeItemComponent, TreeItemContentComponent, treeItemClassName, TreeTogglerComponent, paddingLeft, paddingRight, animate, keyboardNavigable, listRef, }: ControllerTreeProps<T, I>): React.JSX.Element;
+    <T extends unknown = any, I extends TreeItem<T> = TreeItem<T>>({ controller, className, onActivate, onDeactivate, onSelect, onUnselect, onHighlight, onUnhighlight, height, virtual, gap, TreeIconComponent, TreeItemComponent, TreeItemContentComponent, treeItemClassName, TreeTogglerComponent, paddingLeft, paddingRight, animate, keyboardNavigable, listRef, }: ControllerTreeProps<T, I>): React.JSX.Element;
     displayName: string;
 };
 export default ControllerTreeComponent;

package/dist/components/tree/typings.d.ts

@@ -19,7 +19,11 @@ export type TreeConfig<T = any, I extends TreeItem<T> = TreeItem<T>> = {
     TreeIconComponent?: React.FC<TreeItemProps<T, I>>;
     TreeTogglerComponent?: React.FC<TreeItemToggleProps<T, I>>;
     onActivate?: TreeItemHandler<T, I>;
+    onDeactivate?: TreeItemHandler<T, I>;
+    onHighlight?: TreeItemHandler<T, I>;
+    onUnhighlight?: TreeItemHandler<T, I>;
     onSelect?: TreeItemHandler<T, I>;
+    onUnselect?: TreeItemHandler<T, I>;
     virtual?: boolean;
     gap?: number;
     paddingLeft?: number;

package/dist/index.d.ts

@@ -99,6 +99,8 @@ export { default as PropertiesComponent } from './components/properties/componen
 export { default as Property } from './components/properties/components/Property';
 export { propertiesStyle } from './components/properties/style';
 export { PropertiesContext, PropertiesList, PropertiesProps, PropertyProps } from './components/properties/typings';
+export { default as AutoComplete } from './components/select/AutoComplete';
+export { FormAutoComplete } from './components/select/AutoComplete';
 export { default as Select } from './components/select';
 export { default as FormSelect } from './components/select/FormSelect';
 export { default as DefaultSelectBroker } from './components/select/SelectBroker';
@@ -117,7 +119,7 @@ export { default as TreeSelectComponent } from './components/select/components/T
 export { default as useSelectController } from './components/select/hooks/useSelectController';
 export { useSelectService } from './components/select/hooks/useSelectService';
 export { default as useTreeSelectController } from './components/select/hooks/useTreeSelectController';
-export { ArraySelectProps, ArrayTreeSelectProps, ControllerSelectProps, ControllerTreeSelectProps, FormSelectProps, SelectBroker, SelectConfig, SelectController, SelectGroup, SelectIconProps, SelectInputProps, SelectItem, SelectItemAdaptee, SelectItemAdapter, SelectListComponentProps, SelectNotFoundProps, SelectOptionHandler, SelectOptionProps, SelectOptionSelectionHandler, SelectProps, SelectState, SelectTokenProps, SelectTokensProps, TreeSelectController, TreeSelectItem, TreeSelectProps, TreeSelectState, UseSelectController, UseSelectOptions, } from './components/select/typings';
+export { ArraySelectProps, ArrayTreeSelectProps, ControllerSelectProps, ControllerTreeSelectProps, FormSelectProps, SelectBroker, SelectConfig, SelectController, SelectGroup, SelectIconProps, SelectInputProps, SelectItem, SelectItemAdaptee, SelectItemAdapter, SelectListComponentProps, SelectNotFoundProps, SelectOptionHandler, SelectOptionProps, SelectOptionSelectionHandler, SelectProps, SelectState, SelectTokenProps, SelectTokensProps, TreeSelectController, TreeSelectItem, TreeSelectProps, TreeSelectState, UseSelectController, UseSelectOptions, AutoCompleteAdapter, AutoCompleteProps, FormAutoCompleteProps, } from './components/select/typings';
 export { findSelectItem, findSelectItemIndex, shouldCheckSelect } from './components/select/util';
 export { default as Tabs } from './components/tab';
 export { default as Tab } from './components/tab/components/Tab';

package/dist/index.js

@@ -6428,6 +6428,22 @@ const Properties = styled(PropertiesComponent) `
   ${propertiesStyle}
 `;
 
+const defaultAutocompleteAdapter = (value) => {
+    if (value === '' || value === null) {
+        return null;
+    }
+    return value;
+};
+const numberAutocompleteAdapter = (value) => {
+    if (value === null) {
+        return null;
+    }
+    const parsed = Number(value);
+    if (isNaN(parsed)) {
+        return null;
+    }
+    return parsed;
+};
 const findSelectItem = (controller, pattern) => {
     let result = undefined;
     if (controller.items === undefined) {
@@ -6550,6 +6566,14 @@ let SelectService = class SelectService extends onekijsFramework.CollectionServi
     setDefaultValueLoading(loading) {
         this.state.defaultValueLoading = loading;
     }
+    // For autocomplete, get the direct value for the input field and send it to the requester
+    // We must first use the autocompleteAdapter to convert it to a T
+    *setInputValue(value) {
+        if (this.config?.autoCompleteAdapter) {
+            const adaptedValue = yield this.config.autoCompleteAdapter(value);
+            yield this.setValue(adaptedValue);
+        }
+    }
     setItemWidth(_item, value) {
         if (this.config?.dropdownWidthModifier === 'min' &&
             (this.state.width === undefined || value + 30 > this.state.width)) {
@@ -6680,6 +6704,12 @@ __decorate([
     __metadata("design:paramtypes", [Boolean]),
     __metadata("design:returntype", void 0)
 ], SelectService.prototype, "setDefaultValueLoading", null);
+__decorate([
+    onekijsFramework.saga(onekijsFramework.SagaEffect.Latest),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], SelectService.prototype, "setInputValue", null);
 __decorate([
     onekijsFramework.reducer,
     __metadata("design:type", Function),
@@ -6813,14 +6843,14 @@ const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, I
     const [_, refresh] = React.useReducer((x) => x + 1, 0);
     // value that is actually shown in the input.
     // This value is set to the partial value (that is the unselected part of the value) if the value is pending loading or we don't
-    const showPartialValue = value === undefined ||
+    const showPartialValue = value === undefined || value === null ||
         fetching ||
         loading ||
         !showSelectedRef.current ||
         !value.toString().toLowerCase().startsWith(partialValue.toLowerCase());
     const proxyValue = showPartialValue
         ? focus || loading || fetching
-            ? value !== undefined &&
+            ? value !== undefined && value !== null &&
                 showSelectedRef.current &&
                 value.toString().toLowerCase().startsWith(partialValue.toLowerCase())
                 ? value
@@ -6891,7 +6921,7 @@ const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, I
         const input = inputRef.current;
         const autoSizer = autoSizeRef.current;
         if (input && focus) {
-            if (value !== undefined &&
+            if (value !== undefined && value !== null &&
                 value !== partialValueRef.current &&
                 value.toLowerCase().startsWith((partialValueRef.current || '').toLowerCase()) &&
                 showSelectedRef.current) {
@@ -6954,7 +6984,7 @@ const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, I
                 React.createElement("input", { ref: inputRef, placeholder: placeholder, className: "o-select-input", onFocus: onFocus, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, value: searchable ? proxyValue : '', onClick: onClick, autoCapitalize: "none", autoComplete: "off", autoCorrect: "off", spellCheck: "false", disabled: disabled }),
                 !searchable && (React.createElement("span", { className: "o-select-input o-select-input-text", onClick: onClick }, multiple ? '' : proxyValue || '')))),
         !multiple && nullable && value && !disabled && (React.createElement("div", { className: "o-select-remover", onClick: onNullify }, "\u2716")),
-        React.createElement(IconComponent, { onClick: onIconClick, open: open, loading: loading, fetching: fetching })));
+        IconComponent && React.createElement(IconComponent, { onClick: onIconClick, open: open, loading: loading, fetching: fetching })));
 };
 SelectInputComponent.displayName = 'SelectInput';
 // export default SelectInputComponent;
@@ -7044,7 +7074,7 @@ const DefaultSelectListComponent = (props) => {
     });
     return (React.createElement(ListBodyComponent, { ...props, className: "o-select-options", bodyRef: props.optionsRef, items: selectItems, totalSize: totalSize, virtualItems: isVirtual ? virtualItems : undefined, scrollToIndex: scrollToIndex, keyboardNavigable: true, service: props.controller?.asService(), state: props.controller.state }));
 };
-const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '', placeholder, controller, InputComponent = SelectInputComponent$1, IconComponent, OptionContentComponent = SelectOptionContent, OptionComponent = SelectOptionComponent$1, OptionLoadingComponent = LoadingItem$1, MultiOptionsComponent = SelectOptionComponent$1, NotFoundComponent = SelectNotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height = 220, multiple = false, status = onekijsFramework.ValidationStatus.None, size = 'medium', nullable, minChars = 0, openOnFocus = false, searchable = true, dropdownWidthModifier = 'min', preload = 50, increment = 50, animationMs = 200, disabled, defaultValue, defaultValueLoading, required = false, sameWidth = true, overscan, clickable = true, ListComponent = DefaultSelectListComponent, autoCompleteSearch = true, maxDisplayTokens, validateValue = true, }) => {
+const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '', placeholder, controller, InputComponent = SelectInputComponent$1, IconComponent, OptionContentComponent = SelectOptionContent, OptionComponent = SelectOptionComponent$1, OptionLoadingComponent = LoadingItem$1, MultiOptionsComponent = SelectOptionComponent$1, NotFoundComponent = SelectNotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height = 220, multiple = false, status = onekijsFramework.ValidationStatus.None, size = 'medium', nullable, minChars = 0, openOnFocus = false, searchable = true, dropdownWidthModifier = 'min', preload = 50, increment = 50, animationMs = 200, disabled, defaultValue, defaultValueLoading, required = false, sameWidth = true, overscan, clickable = true, ListComponent = DefaultSelectListComponent, autoCompleteSearch = true, autoCompleteAdapter = defaultAutocompleteAdapter, mode, maxDisplayTokens, validateValue = true, }) => {
     if (nullable === undefined) {
         nullable = !required;
     }
@@ -7088,6 +7118,8 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             sameWidth,
             overscan,
             autoCompleteSearch,
+            autoCompleteAdapter,
+            mode,
             maxDisplayTokens,
             validateValue,
         };
@@ -7128,6 +7160,8 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             sameWidth,
             overscan,
             autoCompleteSearch,
+            autoCompleteAdapter,
+            mode,
             maxDisplayTokens,
             validateValue,
         };
@@ -7145,6 +7179,9 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
     }, [controller.state.selected, service]);
     const showActiveRef = React.useRef(false);
     const proxyItem = React.useMemo(() => {
+        if (mode === 'autocomplete') {
+            return undefined;
+        }
         const search = controller.getSearch();
         const active = controller.state.active;
         const selected = controller.state.selected;
@@ -7170,7 +7207,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
         if (!multiple) {
             return controller.adapt(value);
         }
-    }, [focus, controller, value, multiple, autoCompleteSearch]);
+    }, [focus, controller, value, multiple, autoCompleteSearch, mode]);
     const optionsRef = React.useRef(null);
     const update = React.useCallback(() => {
         if (optionsRef.current && onekijsFramework.get(service, 'config.sameWidth')) {
@@ -7340,6 +7377,9 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             onSelect(null);
         }
         else {
+            if (mode === 'autocomplete') {
+                service.setInputValue(nextValue);
+            }
             service.search(nextValue);
             if (!open) {
                 setOpen(true);
@@ -7485,7 +7525,15 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
     onekijsFramework.useEventListener('keydown', onKeyDown, false);
     return (React.createElement(SelectServiceContext.Provider, { value: service },
         React.createElement("div", { className: classNames, ref: containerRef, onMouseDown: () => (stateRef.current.keepFocus = true), onMouseUp: () => (stateRef.current.keepFocus = false) },
-            React.createElement(InputComponent, { placeholder: placeholder, setOpen: setOpen, open: open, loading: loading, fetching: fetching, onChange: onInputChange, value: autoCompleteSearch ? (proxyItem ? proxyItem.text : '') : controller.getSearch() || '', focus: focus, onFocus: onFocus, onBlur: onBlur, tokens: tokens, multiple: multiple, onRemove: onRemoveToken, autoFocus: autoFocus, style: style, nullable: nullable, IconComponent: IconComponent, searchable: searchable, clickable: clickable, minChars: minChars, ref: triggerRef, disabled: disabled, autoCompleteSearch: autoCompleteSearch, maxDisplayTokens: maxDisplayTokens }),
+            React.createElement(InputComponent, { placeholder: placeholder, setOpen: setOpen, open: open, loading: loading, fetching: fetching, onChange: onInputChange, value: mode === 'autocomplete'
+                    ? value === null || value === undefined
+                        ? value
+                        : `${value}`
+                    : autoCompleteSearch
+                        ? proxyItem
+                            ? proxyItem.text
+                            : ''
+                        : controller.getSearch() || '', focus: focus, onFocus: onFocus, onBlur: onBlur, tokens: tokens, multiple: multiple, onRemove: onRemoveToken, autoFocus: autoFocus, style: style, nullable: nullable, IconComponent: IconComponent, searchable: searchable, clickable: clickable, minChars: minChars, ref: triggerRef, disabled: disabled, autoCompleteSearch: autoCompleteSearch, maxDisplayTokens: maxDisplayTokens }),
             React.createElement(Dropdown, { attachToBody: attachDropdownToBody, open: open, distance: 0, animationTimeout: animationMs, onDropStart: onOpen, onCollapseDone: onClosed, placement: "bottom-start", widthModifier: dropdownWidthModifier, width: service.state.width ? `${service.state.width}px` : undefined, className: className, zIndex: attachDropdownToBody ? 2000 : undefined },
                 React.createElement(ListComponent, { className: "o-select-options", height: height, ItemComponent: multiple ? MultiOptionsComponent : OptionComponent, ItemLoadingComponent: OptionLoadingComponent, ItemContentComponent: OptionContentComponent, NotFoundComponent: NotFoundComponent, onItemSelect: onSelect, onItemUnselect: onSelect, controller: controller, keyboardNavigable: true, multiSelect: multiple, onItemActivate: onActivate, optionsRef: optionsRef, preload: preload, increment: increment })))));
 };
@@ -7961,6 +8009,15 @@ const FormSelect = (props) => {
 FormSelect.displayName = 'FormSelect';
 var FormSelect$1 = React.memo(FormSelect);
 
+const AutoComplete = (props) => {
+    const adapter = props.type === 'number' ? numberAutocompleteAdapter : defaultAutocompleteAdapter;
+    return (React.createElement(Select, { NotFoundComponent: null, IconComponent: null, autoCompleteAdapter: adapter, openOnFocus: true, ...props, mode: "autocomplete", autoCompleteSearch: false, validateValue: false, searchable: true, clickable: false }));
+};
+const FormAutoComplete = (props) => {
+    const adapter = props.type === 'number' ? numberAutocompleteAdapter : defaultAutocompleteAdapter;
+    return (React.createElement(FormSelect$1, { NotFoundComponent: null, IconComponent: null, autoCompleteAdapter: adapter, openOnFocus: true, ...props, mode: "autocomplete", autoCompleteSearch: false, validateValue: false, searchable: true, clickable: false }));
+};
+
 class DefaultSelectBroker extends onekijsFramework.DefaultCollectionBroker {
     defaultValue;
     setDefaultValue(defaultValue, subscriberId) {
@@ -8730,7 +8787,7 @@ const TreeBodyComponent = ({ className, controller, }) => {
     const service = useTreeService();
     const ref = React.useRef(null);
     const config = useTreeConfig();
-    return (React.createElement(ListBodyComponent, { className: addClassname('o-tree-body', className), items: controller.items, ListComponent: TreeListComponent, parentRef: ref, bodyRef: config.listRef || ref, service: service, state: service.state, onItemSelect: config.onSelect, onItemActivate: config.onActivate, keyboardNavigable: config.keyboardNavigable }));
+    return (React.createElement(ListBodyComponent, { className: addClassname('o-tree-body', className), items: controller.items, ListComponent: TreeListComponent, parentRef: ref, bodyRef: config.listRef || ref, service: service, state: service.state, onItemSelect: config.onSelect, onItemUnselect: config.onUnselect, onItemActivate: config.onActivate, onItemDeactivate: config.onDeactivate, onItemHighlight: config.onHighlight, onItemUnhighlight: config.onUnhighlight, keyboardNavigable: config.keyboardNavigable }));
 };
 TreeBodyComponent.displayName = 'TreeBody';
 
@@ -8884,17 +8941,21 @@ const VirtualTreeBodyComponent = ({ className, controller, height, }) => {
         ref: config.listRef || ref,
         overscan: 20,
     });
-    return (React.createElement(ListBodyComponent, { className: addClassname('o-tree-body', className), items: items, parentRef: config.listRef || ref, bodyRef: config.listRef || ref, totalSize: totalSize, virtualItems: virtualItems, service: service, state: service.state, VirtualListComponent: VirtualTreeListComponent, height: height, onItemSelect: config.onSelect, onItemActivate: config.onActivate, keyboardNavigable: config.keyboardNavigable, scrollToIndex: scrollToIndex }));
+    return (React.createElement(ListBodyComponent, { className: addClassname('o-tree-body', className), items: items, parentRef: config.listRef || ref, bodyRef: config.listRef || ref, totalSize: totalSize, virtualItems: virtualItems, service: service, state: service.state, VirtualListComponent: VirtualTreeListComponent, height: height, onItemSelect: config.onSelect, onItemUnselect: config.onUnselect, onItemActivate: config.onActivate, onItemDeactivate: config.onDeactivate, onItemHighlight: config.onHighlight, onItemUnhighlight: config.onUnhighlight, keyboardNavigable: config.keyboardNavigable, scrollToIndex: scrollToIndex }));
 };
 VirtualTreeBodyComponent.displayName = 'VirtualTreeBody';
 
-const ControllerTreeComponent = ({ controller, className, onActivate, onSelect, height, virtual, gap, TreeIconComponent, TreeItemComponent, TreeItemContentComponent, treeItemClassName, TreeTogglerComponent, paddingLeft, paddingRight, animate = true, keyboardNavigable, listRef, }) => {
+const ControllerTreeComponent = ({ controller, className, onActivate, onDeactivate, onSelect, onUnselect, onHighlight, onUnhighlight, height, virtual, gap, TreeIconComponent, TreeItemComponent, TreeItemContentComponent, treeItemClassName, TreeTogglerComponent, paddingLeft, paddingRight, animate = true, keyboardNavigable, listRef, }) => {
     const config = React.useMemo(() => {
         return {
             className,
             onActivate,
+            onDeactivate,
             animate,
             onSelect,
+            onUnselect,
+            onHighlight,
+            onUnhighlight,
             height,
             virtual,
             gap,
@@ -8911,8 +8972,12 @@ const ControllerTreeComponent = ({ controller, className, onActivate, onSelect,
     }, [
         className,
         onActivate,
+        onDeactivate,
         animate,
         onSelect,
+        onUnselect,
+        onHighlight,
+        onUnhighlight,
         height,
         virtual,
         gap,
@@ -9025,7 +9090,19 @@ const TreeSelectListComponent = (props) => {
             return false;
         }
     };
-    return (React.createElement(Tree, { ...props, ...treeProps, TreeItemComponent: SelectOptionComponent$1, className: addClassname('o-select-options', treeProps.className), onSelect: onSelect, onActivate: props.onItemActivate, keyboardNavigable: true, listRef: props.optionsRef }));
+    const onUnselect = (item, index) => {
+        if (item.selectable !== false && props.onItemUnselect) {
+            props.onItemUnselect(item, index);
+            return true;
+        }
+        else {
+            isTreeItemExpanded(item, treeProps.controller)
+                ? treeProps.controller.collapse(item, index)
+                : treeProps.controller.expand(item, index);
+            return false;
+        }
+    };
+    return (React.createElement(Tree, { ...props, ...treeProps, TreeItemComponent: SelectOptionComponent$1, className: addClassname('o-select-options', treeProps.className), onSelect: onSelect, onUnselect: onUnselect, onActivate: props.onItemActivate, onDeactivate: props.onItemDeactivate, keyboardNavigable: true, listRef: props.optionsRef }));
 };
 const ControlledTreeSelectComponent = (props) => {
     return (React.createElement(TreeSelectPropsContext.Provider, { value: props },
@@ -14152,6 +14229,7 @@ exports.AlertComponent = AlertComponent;
 exports.ArraySelectComponent = ArraySelectComponent;
 exports.ArrayTreeComponent = ArrayTreeComponent;
 exports.ArrayTreeSelectComponent = ArrayTreeSelectComponent;
+exports.AutoComplete = AutoComplete;
 exports.BaseTheme = BaseTheme;
 exports.Button = Button;
 exports.CalendarComponent = CalendarComponent;
@@ -14208,6 +14286,7 @@ exports.FieldLayout = FieldLayout;
 exports.FieldLayoutComponent = FieldLayoutComponent;
 exports.FileIcon = FileIcon;
 exports.FolderIcon = FolderIcon;
+exports.FormAutoComplete = FormAutoComplete;
 exports.FormCard = FormCard;
 exports.FormCardDisplayer = FormCardDisplayer;
 exports.FormCheckbox = FormCheckbox;