onekijs-ui 0.16.1 → 0.16.3

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     <T = any, I extends import("./typings").ListItem<T> = import("./typings").ListItem<T>>(props: import("./typings").ListProps<T, I, import("./typings").ListState<T, I>, import("./typings").ListCollection<T, I, import("./typings").ListState<T, I>>>): JSX.Element;
     displayName: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ArrayListProps, ListItem } from '../typings';
 declare const ArrayListComponent: <T = any, I extends ListItem<T> = ListItem<T>>(props: ArrayListProps<T, I>) => JSX.Element;
 export default ArrayListComponent;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CollectionListProps, ListItem } from '../typings';
 declare const CollectionListComponent: <T = any, I extends ListItem<T> = ListItem<T>>({ className, controller, height, ItemComponent, ItemLoadingComponent, ItemContentComponent, NotFoundComponent, itemHeight, preload, keyboardNavigable, increment, multiSelect, onItemActivate, onItemHighlight, onItemSelect, onItemDeactivate, onItemUnhighlight, onItemUnselect, paddingEnd, paddingStart, virtual, style, }: CollectionListProps<T, I, import("../typings").ListState<T, I>, import("../typings").ListCollection<T, I, import("../typings").ListState<T, I>>>) => JSX.Element;
 export default CollectionListComponent;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ListBodyProps, ListItem } from '../typings';
 declare const ListBodyComponent: <T = any, I extends ListItem<T> = ListItem<T>>({ bodyRef, className, height, items, ItemComponent, ItemLoadingComponent, ItemContentComponent, NotFoundComponent, keyboardNavigable, ListComponent, multiSelect, onItemActivate, onItemDeactivate, onItemSelect, onItemUnselect, onItemHighlight, onItemUnhighlight, parentRef, scrollToIndex, service, state, style, totalSize, virtualItems, VirtualListComponent, LoadingComponent, }: ListBodyProps<T, I, import("../typings").ListState<T, I>, import("../typings").ListCollection<T, I, import("../typings").ListState<T, I>>>) => JSX.Element | null;
 export default ListBodyComponent;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ListItem, ListProps } from '../typings';
 declare const _default: {
     <T = any, I extends ListItem<T> = ListItem<T>>(props: ListProps<T, I, import("../typings").ListState<T, I>, import("../typings").ListCollection<T, I, import("../typings").ListState<T, I>>>): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ListItem, VirtualListProps } from '../typings';
 declare const VirtualListComponent: <T = any, I extends ListItem<T> = ListItem<T>>({ items, ItemComponent, ItemLoadingComponent, ItemContentComponent, onItemClick, onItemMouseEnter, onItemMouseLeave, virtualItems, }: VirtualListProps<T, I>) => JSX.Element;
 export default VirtualListComponent;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     <T = any, I extends import("./typings").ListItem<T> = import("./typings").ListItem<T>>(props: import("./typings").ListProps<T, I, import("./typings").ListState<T, I>, import("./typings").ListCollection<T, I, import("./typings").ListState<T, I>>>): JSX.Element;
     displayName: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     <T = any, I extends import("./typings").TreeSelectItem<T> = import("./typings").TreeSelectItem<T>, S extends import("./typings").TreeSelectState<T, I> = import("./typings").TreeSelectState<T, I>, C extends import("./typings").TreeSelectController<T, I, S> = import("./typings").TreeSelectController<T, I, S>>(props: import("./typings").TreeSelectProps<T, I, S, C>): JSX.Element;
     displayName: string;

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

@@ -1,3 +1,3 @@
 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, required, sameWidth, overscan, clickable, ListComponent, autoCompleteSearch, }: ControllerSelectProps<T, I, S, C>) => 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, required, sameWidth, overscan, clickable, ListComponent, autoCompleteSearch, maxDisplayTokens, }: ControllerSelectProps<T, I, S, C>) => JSX.Element;
 export default ControlledSelectComponent;

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

@@ -1,6 +1,6 @@
 import { SelectItem, SelectTokensProps } from '../typings';
 declare const _default: {
-    <T, I extends SelectItem<T> = SelectItem<T>>({ tokens, onRemove, }: SelectTokensProps<T, I>): JSX.Element | null;
+    <T, I extends SelectItem<T> = SelectItem<T>>({ tokens, onRemove, maxDisplayTokens, }: SelectTokensProps<T, I>): JSX.Element | null;
     displayName: string;
 };
 export default _default;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     <T = any, I extends import("./typings").SelectItem<T> = import("./typings").SelectItem<T>, S extends import("./typings").SelectState<T, I> = import("./typings").SelectState<T, I>, C extends import("./typings").SelectController<T, I, S> = import("./typings").SelectController<T, I, S>>(props: import("./typings").SelectProps<T, I, S, C>): JSX.Element;
     displayName: string;

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

@@ -5,6 +5,7 @@ import { DropdownWidthModifier } from '../dropdown/typings';
 import { FieldLayoutProps } from '../field/typings';
 import { CollectionListProps, ListConfig, ListItem, ListItemAdaptee, ListItemHandler, ListItemProps, ListNotFoundProps, ListState, UseListOptions } from '../list/typings';
 import { TreeController, TreeItem, TreeProps, TreeState } from '../tree/typings';
+import SelectService from './SelectService';
 export declare type ArraySelectProps<T = any, I extends SelectItem<T> = SelectItem<T>> = SelectConfig<T, I> & {
     adapter?: SelectItemAdapter<T>;
     dataSource: T[] | [T, string][] | string;
@@ -51,6 +52,7 @@ export interface SelectInputProps<T = any, I extends SelectItem<T> = SelectItem<
     clickable: boolean;
     minChars: number;
     autoCompleteSearch: boolean;
+    maxDisplayTokens?: number;
 }
 export declare type SelectGroup = string | {
     text: string;
@@ -75,7 +77,7 @@ export declare type SelectProps<T = any, I extends SelectItem<T> = SelectItem<T>
     dataSource?: T[] | [T, string][] | string;
     fetchOnce?: boolean;
 };
-export declare type SelectBroker<T, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>> = CollectionBroker<T, I, S, C> & {
+export declare type SelectBroker<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>> = CollectionBroker<T, I, S, C> & {
     setDefaultValue: (defaultValue: T | T[] | null | undefined, subscriberId?: string) => void;
 };
 export declare type SelectConfig<T = any, I extends SelectItem<T> = SelectItem<T>> = Omit<ListConfig<T, I>, 'ItemComponent'> & {
@@ -112,6 +114,7 @@ export declare type SelectConfig<T = any, I extends SelectItem<T> = SelectItem<T
     sameWidth?: boolean;
     ListComponent?: React.FC<SelectListComponentProps<T, I>>;
     autoCompleteSearch?: boolean;
+    maxDisplayTokens?: number;
 };
 export declare type SelectListComponentProps<T = any, I extends SelectItem<T> = SelectItem<T>> = CollectionListProps<T, I> & {
     optionsRef: React.RefObject<HTMLDivElement>;
@@ -124,6 +127,7 @@ export declare type SelectState<T = any, I extends SelectItem<T> = SelectItem<T>
 export interface SelectTokensProps<T = any, I extends SelectItem<T> = SelectItem<T>> {
     tokens?: I[];
     onRemove: SelectOptionHandler<T, I>;
+    maxDisplayTokens?: number;
 }
 export interface SelectTokenProps<T = any, I extends SelectItem<T> = SelectItem<T>> {
     token: I;
@@ -135,3 +139,4 @@ export declare type TreeSelectItem<T = any> = SelectItem<T> & TreeItem<T>;
 export declare type TreeSelectProps<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>> = SelectProps<T, I, S, C> & TreeProps<T, I, S, C>;
 export declare type TreeSelectState<T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>> = SelectState<T, I> & TreeState<T, I>;
 export declare type UseSelectOptions<T, I extends SelectItem<T> = SelectItem<T>> = UseListOptions<T, I>;
+export declare type UseSelectController<T = any, I extends SelectItem<T> = SelectItem<T>> = (dataSource: T[] | [T, string][] | string | undefined, options?: UseSelectOptions<T, I>) => CollectionProxy<T, I, SelectState<T, I>, SelectService<T, I, SelectState<T, I>>>;

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

@@ -7,6 +7,7 @@ import { InputProps } from '../input/typings';
 import { ListItemProps, ListItems, ListNotFoundProps, ListState, UseListOptions } from '../list/typings';
 import { FormSelectProps, SelectBroker, SelectItem, SelectProps } from '../select/typings';
 import { TextareaProps } from '../textarea/typings';
+import TableService from './TableService';
 export declare type ArrayTableProps<T = any, I extends TableItem<T> = TableItem<T>> = TableConfig<T, I> & {
     adapter?: TableItemAdapter<T>;
     columns?: TableColumn<T, I>[];
@@ -245,3 +246,4 @@ export declare type UseTableOptions<T = any, I extends TableItem<T> = TableItem<
     adapter?: TableItemAdapter<T>;
     selected?: T[];
 };
+export declare type UseTableController<T = any> = (dataSource: T[] | string | undefined, initialColumns: TableColumn<T, TableItem<T>>[] | undefined, options: UseTableOptions<T, TableItem<T>>) => CollectionProxy<T, TableItem<T>, TableState<T, TableItem<T>>, TableService<T, TableItem<T>, TableState<T, TableItem<T>>>>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ArrayTreeProps, TreeItem } from '../typings';
 declare const ArrayTreeComponent: <T = any, I extends TreeItem<T> = TreeItem<T>>(props: ArrayTreeProps<T, I>) => JSX.Element;
 export default ArrayTreeComponent;

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

@@ -1,3 +1,4 @@
+/// <reference types="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, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const TreeBodyComponent: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, }: ControllerTreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TreeItem, TreeProps } from '../typings';
 declare const _default: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>(props: TreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const VirtualTreeBodyComponent: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, height, }: ControllerTreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const _default: {
     <T = any, I extends import("./typings").TreeItem<T> = import("./typings").TreeItem<T>>(props: import("./typings").TreeProps<T, I, import("./typings").TreeState<T, I>, import("./typings").TreeController<T, I, import("./typings").TreeState<T, I>>>): JSX.Element;
     displayName: string;

package/dist/index.d.ts

@@ -104,7 +104,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, SelectItemAdapter, SelectBroker, SelectConfig, SelectController, SelectGroup, SelectIconProps, SelectInputProps, SelectItem, SelectItemAdaptee, SelectListComponentProps, SelectNotFoundProps, SelectOptionHandler, SelectOptionProps, SelectOptionSelectionHandler, SelectProps, SelectState, SelectTokenProps, SelectTokensProps, TreeSelectController, TreeSelectItem, TreeSelectProps, TreeSelectState, UseSelectOptions, } from './components/select/typings';
+export { ArraySelectProps, ArrayTreeSelectProps, ControllerSelectProps, ControllerTreeSelectProps, FormSelectProps, SelectItemAdapter, SelectBroker, SelectConfig, SelectController, SelectGroup, SelectIconProps, SelectInputProps, SelectItem, SelectItemAdaptee, SelectListComponentProps, SelectNotFoundProps, SelectOptionHandler, SelectOptionProps, SelectOptionSelectionHandler, SelectProps, SelectState, SelectTokenProps, SelectTokensProps, TreeSelectController, TreeSelectItem, TreeSelectProps, TreeSelectState, UseSelectOptions, UseSelectController, } 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';
@@ -141,7 +141,7 @@ export { default as useSelectColumn } from './components/table/hooks/useSelectCo
 export { default as useTableController } from './components/table/hooks/useTableController';
 export { default as useTextColumn } from './components/table/hooks/useTextColumn';
 export { default as useTextareaColumn } from './components/table/hooks/useTextareaColumn';
-export { ArrayTableProps, Cell, CheckboxColumn, CheckboxColumnOptions, ControllerTableProps, EnumColumnOptions, FormTableContext, FormTableProps, InputColumn, InputColumnOptions, LinkColumnOptions, SelectCell, SelectColumn, SelectColumnOptions, TableBodyCellProps, TableBodyProps, TableBodyRowProps, TableColumn, TableColumnComputedWidth, TableColumnOptions, TableColumnSpec, TableColumnWidth, TableColumnsState, TableConfig, TableController, TableExpandedProps, TableFilterOperator, TableFilterOperatorProps, TableFooterCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableItem, TableItemAdaptee, TableItemAdapter, TableItems, TableNotFoundProps, TableProps, TableRowHandler, TableSortProps, TableState, TextareaColumn, TextareaColumnOptions, UseTableOptions, } from './components/table/typings';
+export { ArrayTableProps, Cell, CheckboxColumn, CheckboxColumnOptions, ControllerTableProps, EnumColumnOptions, FormTableContext, FormTableProps, InputColumn, InputColumnOptions, LinkColumnOptions, SelectCell, SelectColumn, SelectColumnOptions, TableBodyCellProps, TableBodyProps, TableBodyRowProps, TableColumn, TableColumnComputedWidth, TableColumnOptions, TableColumnSpec, TableColumnWidth, TableColumnsState, TableConfig, TableController, TableExpandedProps, TableFilterOperator, TableFilterOperatorProps, TableFooterCellProps, TableFooterProps, TableHeaderCellProps, TableHeaderProps, TableItem, TableItemAdaptee, TableItemAdapter, TableItems, TableNotFoundProps, TableProps, TableRowHandler, TableSortProps, TableState, TextareaColumn, TextareaColumnOptions, UseTableOptions, UseTableController, } from './components/table/typings';
 export { default as Tag } from './components/tag';
 export { default as TagComponent } from './components/tag/components/TagComponent';
 export { tagStyle } from './components/tag/style';

package/dist/index.js

@@ -729,8 +729,8 @@ const iconCircleKeyFrame = styled.keyframes `
     transform: rotate(360deg);
   }
 `;
-var LoadingIcon = styled__default["default"](IconComponent$7) `
-  ${({ width: cssWidth = '16px', height: cssHeight = '16px', color: cssColor = 'primary' }) => styled.css `
+const iconStyle = ({ width: cssWidth = '16px', height: cssHeight = '16px', color: cssColor = 'primary', }) => {
+    return styled.css `
     height: ${cssHeight};
     width: ${cssWidth};
     display: inline-flex;
@@ -749,7 +749,10 @@ var LoadingIcon = styled__default["default"](IconComponent$7) `
       stroke-width: 10px;
       transform-origin: 50% 50%;
     }
-  `}
+  `;
+};
+var LoadingIcon = styled__default["default"](IconComponent$7) `
+  ${iconStyle}
 `;
 
 const toDegree = (position) => {
@@ -1245,6 +1248,7 @@ const DropdownButton = styled__default["default"](DropdownButtonComponent) `
 
 const TooltipComponent = (props) => {
     const { content, className, popperOptions, children, delayHide = 300, ...tooltipConfig } = props;
+    const [show, setShow] = React.useState(true);
     const tooltipOptions = Object.assign({
         interactive: true,
         delayHide,
@@ -1253,9 +1257,27 @@ const TooltipComponent = (props) => {
     const { style: containerStyle, ...containerProps } = getTooltipProps({ className: 'o-tooltip-container' });
     const { style: arrowStyle, ...arrowProps } = getArrowProps({ className: 'o-tooltip-arrow' });
     const classNames = addClassname('o-tooltip', className);
+    const uid = React.useId();
+    React.useEffect(() => {
+        if (visible) {
+            const event = new CustomEvent('tooltipVisible', {
+                detail: uid,
+            });
+            document.dispatchEvent(event);
+        }
+    }, [visible, uid]);
+    React.useEffect(() => {
+        const listener = (e) => {
+            setShow(e.detail === uid);
+        };
+        document.addEventListener('tooltipVisible', listener);
+        return () => {
+            document.removeEventListener('tooltipVisible', listener);
+        };
+    }, [uid]);
     return (React__default["default"].createElement("div", { className: classNames, ref: setTriggerRef },
         children,
-        visible && content && (React__default["default"].createElement("div", { ref: setTooltipRef, style: containerStyle, ...containerProps },
+        show && visible && content && (React__default["default"].createElement("div", { ref: setTooltipRef, style: containerStyle, ...containerProps },
             React__default["default"].createElement("div", { style: arrowStyle, ...arrowProps }),
             content))));
 };
@@ -5686,7 +5708,9 @@ let SelectService = class SelectService extends onekijsFramework.CollectionServi
         else {
             yield this._setValidDefaultValue(this.config === undefined || this.config.nullable || !this.state.items
                 ? null
-                : this.config.defaultValue === undefined || this.state.defaultValue === null
+                : this.config.defaultValue === undefined ||
+                    this.config.defaultValue === null ||
+                    this.state.defaultValue === null
                     ? this.state.items[0]?.data || null
                     : null);
         }
@@ -5887,14 +5911,15 @@ const SelectIconComponent = ({ onClick, open, loading }) => {
 const SelectTokenComponent = ({ token, onRemove, index, }) => {
     return (React__default["default"].createElement("div", { className: "o-select-token" },
         React__default["default"].createElement("div", { className: "o-select-token-text", key: "o-select-token-text" }, token.text),
-        React__default["default"].createElement("div", { className: "o-select-token-remove", key: "o-select-token-remove", onClick: () => {
+        React__default["default"].createElement("div", { className: "o-select-token-remove", key: "o-select-token-remove", onClick: (e) => {
                 onRemove(token, index);
+                e.stopPropagation();
             } }, "\u2716")));
 };
 SelectTokenComponent.displayName = 'SelectTokenComponent';
 var SelectTokenComponent$1 = React__default["default"].memo(SelectTokenComponent);
 
-const SelectTokensComponent = ({ tokens, onRemove, }) => {
+const SelectTokensComponent = ({ tokens, onRemove, maxDisplayTokens, }) => {
     const widthRef = React.useRef();
     const onExiting = (node) => {
         node.style.width = '0';
@@ -5911,15 +5936,23 @@ const SelectTokensComponent = ({ tokens, onRemove, }) => {
         }, 0);
     };
     if (tokens !== undefined) {
-        return (React__default["default"].createElement(reactTransitionGroup.TransitionGroup, { component: null }, tokens.map((token, index) => (React__default["default"].createElement(reactTransitionGroup.CSSTransition, { timeout: 150, classNames: "o-select-token-animation", mountOnEnter: true, appear: true, unmountOnExit: true, key: `o-select-token-${token.id}`, onEntering: onEntering, onExiting: onExiting },
-            React__default["default"].createElement(SelectTokenComponent$1, { token: token, onRemove: onRemove, index: index }))))));
+        if (!maxDisplayTokens || tokens.length <= maxDisplayTokens) {
+            return (React__default["default"].createElement(reactTransitionGroup.TransitionGroup, { component: null }, tokens.map((token, index) => (React__default["default"].createElement(reactTransitionGroup.CSSTransition, { timeout: 150, classNames: "o-select-token-animation", mountOnEnter: true, appear: true, unmountOnExit: true, key: `o-select-token-${token.id}`, onEntering: onEntering, onExiting: onExiting },
+                React__default["default"].createElement(SelectTokenComponent$1, { token: token, onRemove: onRemove, index: index }))))));
+        }
+        else {
+            return (React__default["default"].createElement("div", { className: "o-select-token o-select-token-disabled" },
+                React__default["default"].createElement("div", { className: "o-select-token-text", key: "o-select-token-text" },
+                    tokens.length,
+                    " selected")));
+        }
     }
     return null;
 };
 SelectTokensComponent.displayName = 'SelectTokensComponent';
 var SelectTokensComponent$1 = React__default["default"].memo(SelectTokensComponent);
 
-const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, IconComponent = SelectIconComponent, onFocus: forwardFocus, onBlur: forwardBlur, onChange, onRemove, value, focus, multiple, tokens, autoFocus, style, nullable, clickable, searchable, minChars, disabled, }, ref) => {
+const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, IconComponent = SelectIconComponent, onFocus: forwardFocus, onBlur: forwardBlur, onChange, onRemove, value, focus, multiple, tokens, autoFocus, style, nullable, clickable, searchable, minChars, disabled, maxDisplayTokens, }, ref) => {
     const inputRef = React.useRef(null);
     const autoSizeRef = React.useRef(null);
     // partialValue is the part of the selected item entered by the user
@@ -6064,12 +6097,12 @@ const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, I
         }
     }, [autoFocus]);
     return (React__default["default"].createElement("div", { className: className, style: style, ref: ref },
-        React__default["default"].createElement("div", { className: "o-select-input-data" },
-            multiple && React__default["default"].createElement(SelectTokensComponent$1, { tokens: tokens, onRemove: onRemove }),
+        React__default["default"].createElement("div", { className: "o-select-input-data", onClick: searchable ? undefined : onClick },
+            multiple && React__default["default"].createElement(SelectTokensComponent$1, { tokens: tokens, onRemove: onRemove, maxDisplayTokens: maxDisplayTokens }),
             React__default["default"].createElement("div", { className: "o-select-input-wrapper" },
                 React__default["default"].createElement("span", { ref: autoSizeRef, className: "o-select-input-auto-sizer" }),
-                React__default["default"].createElement("input", { ref: inputRef, placeholder: placeholder, className: "o-select-input", onFocus: onFocus, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, value: proxyValue, onClick: onClick, autoCapitalize: "none", autoComplete: "off", autoCorrect: "off", spellCheck: "false", disabled: disabled }),
-                !searchable && (React__default["default"].createElement("span", { className: "o-select-input o-select-input-text", onClick: onClick }, proxyValue || '')))),
+                React__default["default"].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__default["default"].createElement("span", { className: "o-select-input o-select-input-text", onClick: onClick }, multiple ? '' : proxyValue || '')))),
         !multiple && nullable && value && !disabled && (React__default["default"].createElement("div", { className: "o-select-remover", onClick: onNullify }, "\u2716")),
         React__default["default"].createElement(IconComponent, { onClick: onIconClick, open: open, loading: loading, fetching: fetching })));
 };
@@ -6136,9 +6169,9 @@ const SelectOptionComponent = (props) => {
         return null;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         displayGroup && React__default["default"].createElement(OptionGroupComponent, { ...props }),
-        React__default["default"].createElement("div", { className: classNames, onMouseDown: () => onItemClick(item, index), onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index) },
+        React__default["default"].createElement("div", { className: classNames, onClick: () => onItemClick(item, index), onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index) },
             service.config?.multiple && (React__default["default"].createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => onItemClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox" })),
-            React__default["default"].createElement(OptionContentComponent, { ...props }))));
+            React__default["default"].createElement(OptionContentComponent, { ...props, onClick: () => onItemClick(item, index) }))));
 };
 SelectOptionComponent.displayName = 'SelectOptionComponent';
 var SelectOptionComponent$1 = React__default["default"].memo(SelectOptionComponent);
@@ -6154,7 +6187,7 @@ const DefaultSelectListComponent = (props) => {
     });
     return (React__default["default"].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, required = false, sameWidth = true, overscan, clickable = true, ListComponent = DefaultSelectListComponent, autoCompleteSearch = 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, required = false, sameWidth = true, overscan, clickable = true, ListComponent = DefaultSelectListComponent, autoCompleteSearch = true, maxDisplayTokens, }) => {
     if (nullable === undefined) {
         nullable = !required;
     }
@@ -6162,41 +6195,82 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
     const [focus, setFocus] = React.useState(false);
     const stateRef = React.useRef({});
     const service = controller.asService();
-    service.config = {
-        attachDropdownToBody,
-        className,
-        placeholder,
-        InputComponent,
-        IconComponent,
-        OptionContentComponent,
-        OptionComponent,
-        OptionLoadingComponent,
-        MultiOptionsComponent,
-        NotFoundComponent,
-        autoFocus,
-        value,
-        onChange,
-        onBlur: forwardBlur,
-        onFocus: forwardFocus,
-        height,
-        multiple,
-        status,
-        size,
-        nullable,
-        minChars,
-        openOnFocus,
-        searchable,
-        clickable,
-        dropdownWidthModifier,
-        preload,
-        increment,
-        animationMs,
-        disabled,
-        defaultValue,
-        sameWidth,
-        overscan,
-        autoCompleteSearch,
-    };
+    if (!service.config) {
+        service.config = {
+            attachDropdownToBody,
+            className,
+            placeholder,
+            InputComponent,
+            IconComponent,
+            OptionContentComponent,
+            OptionComponent,
+            OptionLoadingComponent,
+            MultiOptionsComponent,
+            NotFoundComponent,
+            autoFocus,
+            value,
+            onChange,
+            onBlur: forwardBlur,
+            onFocus: forwardFocus,
+            height,
+            multiple,
+            status,
+            size,
+            nullable,
+            minChars,
+            openOnFocus,
+            searchable,
+            clickable,
+            dropdownWidthModifier,
+            preload,
+            increment,
+            animationMs,
+            disabled,
+            defaultValue,
+            sameWidth,
+            overscan,
+            autoCompleteSearch,
+            maxDisplayTokens,
+        };
+    }
+    else {
+        service.config = {
+            attachDropdownToBody,
+            className,
+            placeholder,
+            InputComponent: service.config.InputComponent,
+            IconComponent: service.config.IconComponent,
+            OptionContentComponent: service.config.OptionContentComponent,
+            OptionComponent: service.config.OptionComponent,
+            OptionLoadingComponent: service.config.OptionLoadingComponent,
+            MultiOptionsComponent: service.config.MultiOptionsComponent,
+            NotFoundComponent: service.config.NotFoundComponent,
+            autoFocus,
+            value,
+            onChange,
+            onBlur: forwardBlur,
+            onFocus: forwardFocus,
+            height,
+            multiple,
+            status,
+            size,
+            nullable,
+            minChars,
+            openOnFocus,
+            searchable,
+            clickable,
+            dropdownWidthModifier,
+            preload,
+            increment,
+            animationMs,
+            disabled,
+            defaultValue,
+            sameWidth,
+            overscan,
+            autoCompleteSearch,
+            maxDisplayTokens,
+        };
+    }
     const id = React.useId();
     const loading = onekijsFramework.isCollectionLoading(controller);
     const fetching = onekijsFramework.isCollectionFetching(controller);
@@ -6536,7 +6610,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
     onekijsFramework.useEventListener('keydown', onKeyDown, false);
     return (React__default["default"].createElement(SelectServiceContext.Provider, { value: service },
         React__default["default"].createElement("div", { className: classNames, ref: containerRef, onMouseDown: () => (stateRef.current.keepFocus = true), onMouseUp: () => (stateRef.current.keepFocus = false) },
-            React__default["default"].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 }),
+            React__default["default"].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__default["default"].createElement(Dropdown, { attachToBody: attachDropdownToBody, open: open, distance: 0, animationTimeout: animationMs, onDropStart: onOpen, onCollapseDone: onClosed, placement: "bottom-start", widthModifier: dropdownWidthModifier, className: className, zIndex: attachDropdownToBody ? 2000 : undefined },
                 React__default["default"].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 })))));
 };
@@ -6759,7 +6833,8 @@ const selectStyle = ({ theme, clickable = true, searchable = true }) => {
       ${flexGrow(1)}
       ${flexWrap('wrap')}
       ${alignItems('center')}
-      ${paddingX('sm')}
+      ${paddingLeft('sm')}
+      ${paddingRight(searchable ? 'sm' : 0)}
       ${maxWidth('calc(100% - 32px)')}
     }
 
@@ -6804,6 +6879,13 @@ const selectStyle = ({ theme, clickable = true, searchable = true }) => {
       ${flexGrow(1)}
       ${paddingLeft('sm')}
     }
+
+    .o-select-token-disabled {
+      ${paddingRight('sm')}
+      ${backgroundColor('dark')}
+      ${color('lightest')}
+    }
+
     .o-select-token-remove {
       ${cursor('pointer')}
       ${color('white', { hover: 'danger' })}
@@ -6949,12 +7031,13 @@ const Select = styled__default["default"](SelectComponent$1) `
 `;
 
 const FormSelect = (props) => {
-    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
-        defaultValue: props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue,
-    }, props));
+    const defaultValue = props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue;
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
+        defaultValue,
+    }));
     const Component = props.FieldComponent || Select;
     return (React__default["default"].createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
-        React__default["default"].createElement(Component, { ...fieldComponentProps, required: props.required, defaultValue: props.defaultValue })));
+        React__default["default"].createElement(Component, { ...fieldComponentProps, required: props.required, defaultValue: defaultValue })));
 };
 FormSelect.displayName = 'FormSelect';
 var FormSelect$1 = React__default["default"].memo(FormSelect);
@@ -8646,12 +8729,6 @@ const useTableState = () => {
     return React.useContext(TableStateContext);
 };
 
-const ExpandedCellComponent = ({ item, className }) => {
-    const service = useTableService();
-    return (React__default["default"].createElement("div", { className: addClassname('o-table-cell-expander-content', className), onClick: () => service.toggle(item) },
-        React__default["default"].createElement(TogglerIcon, { open: item.expanded, model: "plus", color: "primary" })));
-};
-
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const useTableColumns = () => {
     return useTableState().columns;
@@ -9417,6 +9494,12 @@ const TableHeaderComponent = ({ columns, className }) => {
 };
 TableHeaderComponent.displayName = 'TableHeader';
 
+const ExpandedCellComponent = ({ item, className }) => {
+    const service = useTableService();
+    return (React__default["default"].createElement("div", { className: addClassname('o-table-cell-expander-content', className), onClick: () => service.toggle(item) },
+        React__default["default"].createElement(TogglerIcon, { open: item.expanded, model: "plus", color: "primary" })));
+};
+
 const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClassName, BodyComponent = TableBodyComponent, ExpandedComponent, filterable, fit, fixHeader = true, grow, FooterComponent = TableFooterComponent, footerClassName, header = true, headerClassName, HeaderComponent = TableHeaderComponent, increment, LoadingComponent, LoadingRowComponent, NotFoundComponent, footer = false, height, highlightRow, onRowClick, onRowEnter, onRowLeave, onRowOver, onRowOut, paddingEnd, paddingStart, parentRef, preload, rowClassName, RowComponent, sortable, stripRows, }) => {
     const classNames = addClassname('o-table', className);
     const { columns, items } = controller.state;
@@ -9766,7 +9849,7 @@ const addFilter = (controller, value, column, operator) => {
         controller.removeFilter(column.id);
     }
 };
-const operators$1 = [{ text: 'equals', operator: 'eq', not: false }];
+const operators$1 = [{ text: 'any of', operator: 'in', not: false }];
 const TableSelectFilterComponent = ({ column, dataSource, }) => {
     const controller = useTableService();
     const filter = controller.getFilterById(column.id);
@@ -9785,7 +9868,7 @@ const TableSelectFilterComponent = ({ column, dataSource, }) => {
     const scClassName = className ? className.split(' ').slice(0, 2).join(' ') : '';
     return (React__default["default"].createElement("div", { className: "o-table-filter-select-container" },
         React__default["default"].createElement(TableFilterOperatorComponent, { operators: operators$1, onChange: onOperatorChange, selected: currentOperator, className: filterValue && filterValue.length > 0 ? 'o-table-filter-active' : '' }),
-        React__default["default"].createElement(Select, { className: addClassname('o-table-filter-select', scClassName), multiple: true, dataSource: dataSource, value: filterValue, nullable: true, searchable: false, onChange: onValueChange, size: "xsmall", attachDropdownToBody: true })));
+        React__default["default"].createElement(Select, { className: addClassname('o-table-filter-select', scClassName), multiple: true, dataSource: dataSource, value: filterValue, nullable: true, searchable: false, onChange: onValueChange, size: "xsmall", attachDropdownToBody: true, maxDisplayTokens: 1 })));
 };
 TableSelectFilterComponent.displayName = 'TableInputFilterComponent';