onekijs-ui 0.16.2 → 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

@@ -52,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;
@@ -113,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>;
@@ -125,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;

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/TreeItemComponent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ListItemProps } from '../../list/typings';
 import { TreeItem, TreeItemProps, TreeItemToggleProps } from '../typings';
 export declare const TreeItemToggler: <T = any, I extends TreeItem<T> = TreeItem<T>>({ item, onExpand, onCollapse, index, }: TreeItemToggleProps<T, I>) => JSX.Element | null;

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

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

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/components/VirtualTreeListComponent.d.ts

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

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.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 })));
 };
@@ -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;
     }
@@ -6197,6 +6230,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             sameWidth,
             overscan,
             autoCompleteSearch,
+            maxDisplayTokens,
         };
     }
     else {
@@ -6234,6 +6268,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             sameWidth,
             overscan,
             autoCompleteSearch,
+            maxDisplayTokens,
         };
     }
     const id = React.useId();
@@ -6575,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 })))));
 };
@@ -6798,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)')}
     }
 
@@ -6843,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' })}
@@ -6988,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);
@@ -8685,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;
@@ -9456,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;
@@ -9805,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);
@@ -9824,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';