onekijs-ui 0.15.2 → 0.15.3

package/dist/index.js

@@ -1283,6 +1283,7 @@ const tooltipStyle = ({ kind = 'secondary', theme }) => {
     ${cursor('pointer')}
     ${display('inline-flex')}
     .o-tooltip-container {
+      ${cursor('default')}
       ${backgroundColor(bgColor)}
       ${borderRadius(t.borderRadius)}
       ${borderWidth(t.borderWidth)}
@@ -1546,7 +1547,7 @@ const CheckboxComponent = ({ label, className = '', onChange, value = false, bor
     const onChecked = (e) => {
         onChange && onChange(e.target.checked);
     };
-    return (React__default["default"].createElement("div", { className: addClassname(`o-checkbox${status ? ' o-checkbox-status-' + status.toLowerCase() : ''}`, className) },
+    return (React__default["default"].createElement("div", { className: addClassname(`o-checkbox ${checkboxProps.disabled ? 'o-checkbox-disabled' : 'o-checkbox-enabled'}${status ? ' o-checkbox-status-' + status.toLowerCase() : ''}`, className) },
         React__default["default"].createElement("label", { htmlFor: id, onClick: (e) => e.stopPropagation() },
             React__default["default"].createElement("div", { className: "o-checkbox-container" },
                 React__default["default"].createElement("svg", { className: "o-checkbox-svg", viewBox: "-281 373 48 48" },
@@ -1588,6 +1589,27 @@ const checkboxStyle = ({ height: cssHeight = '20px', width: cssWidth = '20px', t
       ${width('full')};
     }
 
+    &.o-checkbox-disabled {
+      .o-checkbox-container {
+        ${borderColor('dark')}
+      }
+      .o-checkbox-svg-stroke {
+        ${borderColor('dark')}
+      }
+      .o-checkbox-svg {
+        ${backgroundColor('lighter')}
+      }
+      .o-checkbox-input {
+        ${cursor('not-allowed')}
+      }
+      label {
+        ${cursor('not-allowed')}
+      }
+      .o-checkbox-svg-stroke {
+        ${stroke('dark')}
+      }
+    }
+
     .o-checkbox-svg-stroke {
       ${stroke(checkboxColor)}
       ${fill('none')}
@@ -1859,7 +1881,9 @@ FieldHelpComponent.displayName = 'FieldHelpComponent';
 
 const fieldStyle = () => {
     return styled.css `
-    ${display('flex')}
+    &.o-form-field {
+      ${display('flex')}
+    }
     &.o-form-field-vertical {
       ${flexDirection('column')}
     }
@@ -1875,15 +1899,25 @@ const fieldHelpStyle = ({ visible = true, theme, layout }) => {
     const t = theme.fieldLayout;
     return styled.css `
     ${fontSize('2xl')}
+    ${marginLeft(layout === 'horizontal' ? 0 : t.helperMarginLeft)}
+    ${marginRight(layout === 'horizontal' ? t.helperMarginRight : 0)}
+    ${height('100%')}
+    ${display('flex')}
+    ${alignItems('center')}
     ${color(t.helperColor)}
-      ${marginLeft(layout === 'horizontal' ? 0 : t.helperMarginLeft)}
-      ${marginRight(layout === 'horizontal' ? t.helperMarginRight : 0)}
-      ${height('100%')}
-      ${display('flex')}
-      ${alignItems('center')}
-      .o-tooltip {
+    .o-tooltip {
       ${cursor(visible ? 'pointer' : 'default')}
     }
+    &.o-helper-icon-small {
+      .o-tooltip {
+        ${width(5)}
+      }
+    }
+    &.o-helper-icon-large {
+      .o-tooltip {
+        ${width(8)}
+      }
+    }
   `;
 };
 const fieldDescriptionStyle = ({ theme, layout }) => {
@@ -1980,7 +2014,6 @@ const labelStyle = ({ theme }) => {
 
       .o-helper-icon {
         ${fontSize('xl')}
-        ${color(t.helperIconColor)}
         ${marginLeft(t.helperMarginLeft)}
       }
 
@@ -2045,7 +2078,7 @@ const FieldLayoutComponent = React__default["default"].memo(({ className, descri
                 React__default["default"].createElement(DescriptionComponent, { layout: fieldLayout, content: message ? message : description || '', className: status !== undefined ? `o-field-description-${status}` : undefined }))));
     }
     else if (fieldLayout === 'table') {
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        return (React__default["default"].createElement("div", { className: className },
             children,
             React__default["default"].createElement(DescriptionComponent, { layout: fieldLayout, content: message ? message : description || '', className: status !== undefined ? `o-field-description-${status}` : undefined })));
     }
@@ -2075,6 +2108,11 @@ const extractFieldLayoutProps = (props) => {
         'layout',
         'required',
         'size',
+        'xsLabelWidth',
+        'smLabelWidth',
+        'mdLabelWidth',
+        'lgLabelWidth',
+        'xlLabelWidth',
     ];
     const fieldOptionsKeys = ['defaultValue', 'touchedOn', 'disabled', 'visible'];
     Object.keys(nonValidatorProps).forEach((k) => {
@@ -2882,6 +2920,7 @@ function check(value, predicate, error) {
     throw new Error(error);
   }
 }
+var ALL = 'ALL';
 var CALL = 'CALL';
 var FORK = 'FORK';
 var CANCEL = 'CANCEL';
@@ -2893,6 +2932,11 @@ var makeEffect = function makeEffect(type, payload) {
 
   return _ref = {}, _ref[IO] = true, _ref.combinator = false, _ref.type = type, _ref.payload = payload, _ref;
 };
+function all(effects) {
+  var eff = makeEffect(ALL, effects);
+  eff.combinator = true;
+  return eff;
+}
 
 var validateFnDescriptor = function validateFnDescriptor(effectName, fnDescriptor) {
   check(fnDescriptor, notUndef, effectName + ": argument fn is undefined or null");
@@ -3666,7 +3710,7 @@ const FormInput = React__default["default"].memo((props) => {
     }, props));
     const Component = props.FieldComponent || Input;
     return (React__default["default"].createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
-        React__default["default"].createElement(Component, { ...fieldComponentProps })));
+        React__default["default"].createElement(Component, { ...fieldComponentProps, value: !fieldComponentProps.value ? '' : fieldComponentProps.value })));
 });
 FormInput.displayName = 'FormInput';
 
@@ -4297,20 +4341,22 @@ const useListView = ({ controller, height, itemHeight = defaultItemHeight, overs
         keyExtractor: forceKeyExtractor,
     });
     React.useEffect(() => {
-        if (isVirtual) {
-            if (state.status === onekijsFramework.LoadingStatus.NotInitialized) {
-                controller.load(preload);
-            }
-            else if (canFetchMore(controller)) {
-                const lastVirtualItem = virtualItems[virtualItems.length - 1];
-                const lastVirtualItemIndex = lastVirtualItem ? lastVirtualItem.index : 0;
-                if (lastVirtualItemIndex >= (state.items?.length || 0) - preload / 2) {
-                    controller.load(increment, (state.items || []).length);
+        if (controller.status !== onekijsFramework.LoadingStatus.NotReady) {
+            if (isVirtual) {
+                if (controller.status === onekijsFramework.LoadingStatus.NotInitialized) {
+                    controller.load(preload);
+                }
+                else if (canFetchMore(controller)) {
+                    const lastVirtualItem = virtualItems[virtualItems.length - 1];
+                    const lastVirtualItemIndex = lastVirtualItem ? lastVirtualItem.index : 0;
+                    if (lastVirtualItemIndex >= (state.items?.length || 0) - preload / 2) {
+                        controller.load(increment, (state.items || []).length);
+                    }
                 }
             }
-        }
-        else if (controller.status === onekijsFramework.LoadingStatus.NotInitialized) {
-            controller.load();
+            else if (controller.status === onekijsFramework.LoadingStatus.NotInitialized) {
+                controller.load();
+            }
         }
     }, [controller, state, preload, virtualItems, increment, isVirtual]);
     return {
@@ -4334,13 +4380,27 @@ const ListItemComponent = React__default["default"].memo((props) => {
 });
 ListItemComponent.displayName = 'ListItemComponent';
 
+const ListLoadingComponent = ({ className }) => {
+    return (React__default["default"].createElement("div", { className: addClassname('o-list-loading', className) },
+        React__default["default"].createElement(LoadingIcon, { width: "50px", height: "50px" })));
+};
+var ListLoadingComponent$1 = styled__default["default"](ListLoadingComponent) `
+  height: 100%;
+  min-height: 200px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 const LoadingItem = ({ className }) => {
     return React__default["default"].createElement("div", { className: addClassname('o-loading-item', className) });
 };
 var LoadingItem$1 = styled__default["default"](LoadingItem) `
   ${height('full')}
   ${width('full')}
-  ${minHeight('20px')}
+  ${minHeight('30px')}
+  ${marginY('1px')}
   animation: skeleton-loading 1s linear infinite alternate;
 
   @keyframes skeleton-loading {
@@ -4412,7 +4472,7 @@ const VirtualListComponent = ({ items, ItemComponent = ListItemComponent, ItemLo
     })));
 };
 
-const findItemIndex$1 = (items, uid) => {
+const findItemIndex = (items, uid) => {
     if (items === undefined) {
         return -1;
     }
@@ -4426,7 +4486,7 @@ const findItemIndex$1 = (items, uid) => {
         return i.uid === uid;
     });
 };
-const ListBodyComponent = ({ bodyRef, className, height, items, ItemComponent = ListItemComponent, ItemLoadingComponent = LoadingItem$1, ItemContentComponent = ListItemContent, NotFoundComponent, keyboardNavigable, ListComponent = StandardListComponent, multiSelect, onItemActivate, onItemDeactivate, onItemSelect, onItemUnselect, onItemHighlight, onItemUnhighlight, parentRef, scrollToIndex, service, state, style, totalSize, virtualItems, VirtualListComponent: VirtualListComponent$1 = VirtualListComponent, }) => {
+const ListBodyComponent = ({ bodyRef, className, height, items, ItemComponent = ListItemComponent, ItemLoadingComponent = LoadingItem$1, ItemContentComponent = ListItemContent, NotFoundComponent, keyboardNavigable, ListComponent = StandardListComponent, multiSelect, onItemActivate, onItemDeactivate, onItemSelect, onItemUnselect, onItemHighlight, onItemUnhighlight, parentRef, scrollToIndex, service, state, style, totalSize, virtualItems, VirtualListComponent: VirtualListComponent$1 = VirtualListComponent, LoadingComponent = ListLoadingComponent$1, }) => {
     const scrollAlignRef = React.useRef('center');
     const lastActiveItemUid = React.useRef();
     const virtualRef = React.useRef(null);
@@ -4480,7 +4540,7 @@ const ListBodyComponent = ({ bodyRef, className, height, items, ItemComponent =
         if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key)) {
             const activeUid = onekijsFramework.last(state.active);
             const activeItem = activeUid !== undefined ? service.getItem(activeUid) : undefined;
-            const activeIndex = findItemIndex$1(state.items, activeUid);
+            const activeIndex = findItemIndex(state.items, activeUid);
             switch (e.key) {
                 case 'ArrowDown':
                 case 'ArrowUp':
@@ -4531,7 +4591,7 @@ const ListBodyComponent = ({ bodyRef, className, height, items, ItemComponent =
             const activeUid = state.active === undefined ? undefined : state.active[0];
             if (activeUid !== lastActiveItemUid.current) {
                 lastActiveItemUid.current = activeUid;
-                const activeIndex = findItemIndex$1(state.items, activeUid);
+                const activeIndex = findItemIndex(state.items, activeUid);
                 if (activeIndex >= 0) {
                     scrollToIndex(activeIndex, { align: scrollAlignRef.current });
                 }
@@ -4541,9 +4601,18 @@ const ListBodyComponent = ({ bodyRef, className, height, items, ItemComponent =
     onekijsFramework.useEventListener('keydown', onKeyDown, false);
     const overflow = parentRef && parentRef !== bodyRef ? 'visible' : 'auto';
     if (virtualItems !== undefined) {
-        if (virtualItems.length === 0 && NotFoundComponent) {
-            return (React__default["default"].createElement("div", { className: className },
-                React__default["default"].createElement(NotFoundComponent, null)));
+        if (virtualItems.length === 0) {
+            if (onekijsFramework.isCollectionInitializing(service) || service.status === onekijsFramework.LoadingStatus.Fetching) {
+                return null;
+            }
+            if (service.status === onekijsFramework.LoadingStatus.Loading) {
+                return (React__default["default"].createElement("div", { className: className },
+                    React__default["default"].createElement(LoadingComponent, null)));
+            }
+            else if (NotFoundComponent) {
+                return (React__default["default"].createElement("div", { className: className },
+                    React__default["default"].createElement(NotFoundComponent, null)));
+            }
         }
         return (React__default["default"].createElement("div", { ref: bodyRef, className: className, style: addStyle({
                 maxHeight: `${typeof height === 'string' ? height : `${height}px`}`,
@@ -4557,9 +4626,18 @@ const ListBodyComponent = ({ bodyRef, className, height, items, ItemComponent =
                 React__default["default"].createElement(VirtualListComponent$1, { items: items, ItemComponent: ItemComponent, ItemLoadingComponent: ItemLoadingComponent, ItemContentComponent: ItemContentComponent, virtualItems: virtualItems, onItemMouseEnter: onItemMouseEnter, onItemMouseLeave: onItemMouseLeave, onItemClick: onItemClick }))));
     }
     else {
-        if (items.length === 0 && NotFoundComponent) {
-            return (React__default["default"].createElement("div", { className: className },
-                React__default["default"].createElement(NotFoundComponent, null)));
+        if (items.length === 0) {
+            if (onekijsFramework.isCollectionInitializing(service) || service.status === onekijsFramework.LoadingStatus.Fetching) {
+                return null;
+            }
+            if (service.status === onekijsFramework.LoadingStatus.Loading) {
+                return (React__default["default"].createElement("div", { className: className },
+                    React__default["default"].createElement(LoadingComponent, null)));
+            }
+            else if (NotFoundComponent) {
+                return (React__default["default"].createElement("div", { className: className },
+                    React__default["default"].createElement(NotFoundComponent, null)));
+            }
         }
         if (height !== undefined) {
             style = addStyle({
@@ -4625,10 +4703,12 @@ exports.ListStatus = void 0;
 })(exports.ListStatus || (exports.ListStatus = {}));
 
 const ModalComponent = ({ attachToBody = false, className, children, open, animationDuration = 150, closeIcon = true, onClose, onClosed, title, buttons = [], closeOnClickOutside, closeOnEscape = true, }) => {
+    const id = React.useId();
     const theme = React.useContext(styled.ThemeContext);
     const maskOpacity = theme.modal.maskOpacity;
     const ref = React.useRef(null);
     const onEntering = (node) => {
+        onekijsFramework.eventLocks.lock('escape', id);
         node.style.opacity = '0';
         node.style.transition = `opacity ${animationDuration}ms ease-out`;
         if (ref.current) {
@@ -4665,6 +4745,7 @@ const ModalComponent = ({ attachToBody = false, className, children, open, anima
         }
     };
     const onExited = (node) => {
+        onekijsFramework.eventLocks.unlock('escape', id);
         node.style.opacity = '';
         node.style.transition = '';
         if (ref.current) {
@@ -4677,12 +4758,12 @@ const ModalComponent = ({ attachToBody = false, className, children, open, anima
     };
     useClickOutside(ref, () => {
         if (closeOnClickOutside) {
-            onClose();
+            onClose && onClose();
         }
     });
-    onekijsFramework.useEventListener('keyup', (e) => {
-        if (closeOnEscape && e.key === 'Escape') {
-            onClose();
+    onekijsFramework.useEventListener('keydown', (e) => {
+        if (closeOnEscape && e.key === 'Escape' && onekijsFramework.eventLocks.isLockedBy('escape', id)) {
+            onClose && onClose();
         }
     });
     const element = (React__default["default"].createElement(reactTransitionGroup.CSSTransition, { in: open, classNames: "o-modal", timeout: animationDuration, unmountOnExit: true, onEntering: onEntering, onEntered: onEntered, onExiting: onExiting, onExited: onExited },
@@ -4700,13 +4781,6 @@ const ModalComponent = ({ attachToBody = false, className, children, open, anima
     }
 };
 
-const perspective = cssProperty('perspective');
-const perspectiveOrigin = cssProperty('perspective-origin');
-const rotate = cssProperty('rotate');
-const scale = cssProperty('scale');
-const transform = cssProperty('transform');
-const transformOrigin = cssProperty('transform-origin');
-
 const modalStyle = ({ width: w, height: h, size = 'medium', theme }) => {
     const t = theme.modal;
     w = w ?? size;
@@ -4753,7 +4827,6 @@ const modalStyle = ({ width: w, height: h, size = 'medium', theme }) => {
       ${color('transparent')}
       text-shadow: 0 0 0 ${themeFontColor};
       ${cursor('pointer')}
-      ${transform('rotate(45deg)')}
     }
     .o-modal-header {
       ${fontSize('4xl')}
@@ -4806,7 +4879,7 @@ const modalStyle = ({ width: w, height: h, size = 'medium', theme }) => {
       ${overflow('auto')}
       ${height('100%')}
       scrollbar-width: thin;
-      scrollbar-color: ${(props) => props.theme.palette.colors[props.theme.colors.light]}
+      scrollbar-color: ${(props) => props.theme.palette.colors[props.theme.colors.primary]}
         ${(props) => props.theme.colors[props.theme.colors.lighter]};
       &::-webkit-scrollbar {
         width: 12px;
@@ -4815,7 +4888,7 @@ const modalStyle = ({ width: w, height: h, size = 'medium', theme }) => {
         background: ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
       }
       &::-webkit-scrollbar-thumb {
-        background-color: ${(props) => props.theme.palette.colors[props.theme.colors.light]};
+        background-color: ${(props) => props.theme.palette.colors[props.theme.colors.primary]};
         border: 3px solid ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
       }
     }
@@ -4883,8 +4956,233 @@ const Properties = styled__default["default"](PropertiesComponent) `
   ${propertiesStyle}
 `;
 
+const findSelectItem = (controller, pattern) => {
+    let result = undefined;
+    if (controller.items === undefined) {
+        return undefined;
+    }
+    for (const item of controller.items) {
+        if (item === undefined || item.text === undefined) {
+            continue;
+        }
+        if (item.text.toLowerCase().startsWith(pattern.toLowerCase())) {
+            return item;
+        }
+        if (result === undefined && item.text.toLowerCase().includes(pattern.toLowerCase())) {
+            result = item;
+        }
+    }
+    return result;
+};
+const findSelectItemIndex = (controller, item) => {
+    if (controller.items === undefined) {
+        return -1;
+    }
+    return controller.items.findIndex((i) => {
+        if (i === undefined) {
+            return false;
+        }
+        if (i.id === undefined) {
+            return false;
+        }
+        return i.id === item?.id;
+    });
+};
+const shouldCheckSelect = (currentQuery, lastCheckQuery) => {
+    if (lastCheckQuery === undefined)
+        return true;
+    if (!onekijsFramework.isSameFilter(currentQuery.filter, lastCheckQuery.filter))
+        return true;
+    if (!onekijsFramework.shallowEqual(currentQuery.params || null, lastCheckQuery.params || null))
+        return true;
+    return false;
+};
+const getGroupText = (item) => {
+    if (item === undefined)
+        return undefined;
+    if (item.group === undefined)
+        return undefined;
+    if (typeof item.group === 'string')
+        return item.group;
+    return item.group.text;
+};
+
 let SelectService = class SelectService extends onekijsFramework.CollectionService {
+    config;
+    lastCheckQuery;
+    get defaultValue() {
+        return this.state.defaultValue ?? this.config?.defaultValue;
+    }
+    *check() {
+        if (this.state.local && this.status !== onekijsFramework.LoadingStatus.Loaded) {
+            return; // this validation will be done when the data will be loaded (can be delayed due to a fetchOnce)
+        }
+        let invalidItems = [];
+        const defaultItems = this.defaultValue ? onekijsFramework.toArray(this.defaultValue).map((v) => this._adapt(v)) : [];
+        const query = onekijsFramework.clone(this.getQuery());
+        this._clearSearch(query);
+        this._clearLimit(query);
+        this._clearOffset(query);
+        this.lastCheckQuery = query;
+        const filterDefaultItems = yield all(defaultItems.map((i) => call([this, this._filterItem], i, query, true)));
+        const validDefaultValue = filterDefaultItems.filter((i) => i !== undefined && i.data).map((i) => i.data);
+        if (Array.isArray(this.defaultValue)) {
+            this._setValidDefaultValue(validDefaultValue);
+        }
+        else if (validDefaultValue.length > 0) {
+            this._setValidDefaultValue(validDefaultValue[0]);
+        }
+        else {
+            this._setValidDefaultValue(this.config === undefined || this.config.nullable || !this.state.items
+                ? null
+                : this.config.defaultValue === undefined || this.state.defaultValue === null
+                    ? this.state.items[0]?.data || null
+                    : null);
+        }
+        if (this.state.selected !== undefined) {
+            const item = this.getItem(this.state.selected[0]);
+            const filterItems = yield all([this._filterItem(item, query, false)]);
+            invalidItems = filterItems.filter((i) => i !== undefined);
+        }
+        yield this._setInvalidItems(invalidItems);
+    }
+    setData(data) {
+        this.lastCheckQuery = undefined;
+        super.setData(data);
+    }
+    *setDefaultValue(value) {
+        yield this._setDefaultValue(value);
+        yield this.check(); // validate the default value
+        if (value !== undefined &&
+            this.state.validDefaultValue &&
+            (!this.config?.value || (Array.isArray(this.config.value) && this.config.value.length === 0))) {
+            yield this.setValue(value);
+        }
+    }
+    setValue(value) {
+        const onChange = this.config?.onChange;
+        if (onChange) {
+            onChange(value);
+        }
+    }
+    setUrl(url) {
+        this.lastCheckQuery = undefined;
+        super.setUrl(url);
+    }
+    _buildItem(data, adaptee, context) {
+        context = context || {};
+        const getGroup = (data) => {
+            if (onekijsFramework.isNull(data)) {
+                return undefined;
+            }
+            if (!onekijsFramework.isNull(data.group)) {
+                return data.group;
+            }
+            else {
+                return undefined;
+            }
+        };
+        const selectAdaptee = adaptee;
+        onekijsFramework.ensureFieldValue(selectAdaptee, 'group', getGroup(data));
+        return super._buildItem(data, selectAdaptee, context);
+    }
+    *_filterItem(item, query, valid) {
+        if (item === undefined)
+            return item;
+        let isValid = false;
+        if (!this.state.items || !this.state.items.find((i) => i?.uid === item.uid)) {
+            query = Object.assign({}, query, { search: item.text });
+            if (this.state.local) {
+                const queryEngine = this.state.queryEngine || this._execute.bind(this);
+                const result = queryEngine(this.db || [], query, this.state.comparator || onekijsFramework.defaultComparator, this.state.comparators || {});
+                isValid = !!result.find((i) => i.id === item.id);
+            }
+            else {
+                const oQuery = this.serializeQuery(query);
+                const sQuery = Object.keys(oQuery)
+                    .map((k) => `${k}=${oQuery[k]}`)
+                    .join('&');
+                let result;
+                if (this.cache[sQuery]) {
+                    result = this.cache[sQuery];
+                }
+                else {
+                    const options = Object.assign({}, this.state.fetchOptions, { delayLoading: 0 });
+                    result = yield super._executeFetch(query, options, false);
+                }
+                const data = Array.isArray(result) ? result : result[this.state.dataKey];
+                for (const itemData of data) {
+                    const adaptee = this.adapt(itemData);
+                    if (adaptee.id === item.id) {
+                        isValid = true;
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            isValid = true;
+        }
+        return valid === isValid ? item : undefined;
+    }
+    _setDefaultValue(value) {
+        this.state.defaultValue = value;
+    }
+    _setValidDefaultValue(value) {
+        this.state.validDefaultValue = value;
+    }
+    _setInvalidItems(invalidItems) {
+        this.state.invalidItems = invalidItems;
+    }
+    _setItems(items) {
+        super._setItems(items);
+        if (shouldCheckSelect(this.getQuery(), this.lastCheckQuery)) {
+            this.callSaga('check');
+        }
+    }
 };
+__decorate([
+    onekijsFramework.saga(onekijsFramework.SagaEffect.Serial),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], SelectService.prototype, "check", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Array]),
+    __metadata("design:returntype", void 0)
+], SelectService.prototype, "setData", null);
+__decorate([
+    onekijsFramework.saga(onekijsFramework.SagaEffect.Latest),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], SelectService.prototype, "setDefaultValue", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", void 0)
+], SelectService.prototype, "setUrl", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], SelectService.prototype, "_setDefaultValue", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], SelectService.prototype, "_setValidDefaultValue", null);
+__decorate([
+    onekijsFramework.reducer,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Array]),
+    __metadata("design:returntype", void 0)
+], SelectService.prototype, "_setInvalidItems", null);
 SelectService = __decorate([
     onekijsFramework.service
 ], SelectService);
@@ -4896,9 +5194,9 @@ const useSelectController = (dataSource, options = {}) => {
     return collection;
 };
 
-const SelectConfigContext = React__default["default"].createContext(null);
-const useSelectConfig = () => {
-    return React.useContext(SelectConfigContext);
+const SelectServiceContext = React__default["default"].createContext(null);
+const useSelectService = () => {
+    return React.useContext(SelectServiceContext);
 };
 
 const SelectIconComponent = ({ onClick, open, loading }) => {
@@ -4948,7 +5246,7 @@ const SelectTokensComponent = React__default["default"].memo(({ tokens, onRemove
 });
 SelectTokensComponent.displayName = 'SelectTokensComponent';
 
-const SelectInputComponent = React__default["default"].forwardRef(({ setOpen, open, placeholder, loading, fetching, IconComponent = SelectIconComponent, onFocus: forwardFocus, onBlur: forwardBlur, onChange, onRemove, value, focus, multiple, tokens, autoFocus, style, nullable, clickable, minChars, disabled, }, ref) => {
+const SelectInputComponent = React__default["default"].forwardRef(({ 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 inputRef = React.useRef(null);
     const autoSizeRef = React.useRef(null);
     // partialValue is the part of the selected item entered by the user
@@ -5058,14 +5356,20 @@ const SelectInputComponent = React__default["default"].forwardRef(({ setOpen, op
         return result.join(' ');
     }, [focus]);
     const onClick = React.useCallback(() => {
-        if (!open && clickable) {
+        if (!open && clickable && !disabled) {
             setOpen(true);
+            inputRef.current && inputRef.current.focus();
+        }
+        if (open && !searchable) {
+            setOpen(false);
         }
-    }, [open, setOpen, clickable]);
+    }, [open, setOpen, clickable, searchable, disabled]);
     const onFocus = React.useCallback((e) => {
-        inputRef.current && inputRef.current.select();
+        if (searchable) {
+            inputRef.current && inputRef.current.select();
+        }
         forwardFocus && forwardFocus(e);
-    }, [forwardFocus]);
+    }, [forwardFocus, searchable]);
     const onBlur = React.useCallback((e) => {
         partialValueRef.current = undefined;
         showSelectedRef.current = true;
@@ -5073,13 +5377,13 @@ const SelectInputComponent = React__default["default"].forwardRef(({ setOpen, op
     }, [forwardBlur]);
     const onIconClick = React.useCallback((e) => {
         if (!disabled) {
-            if (!open) {
+            if (!open && searchable) {
                 inputRef.current && inputRef.current.select();
             }
             forwardFocus && forwardFocus(e);
             setOpen(!open);
         }
-    }, [open, forwardFocus, setOpen, disabled]);
+    }, [open, forwardFocus, setOpen, disabled, searchable]);
     const onNullify = React.useCallback(() => {
         onChange(null);
     }, [onChange]);
@@ -5093,7 +5397,8 @@ const SelectInputComponent = React__default["default"].forwardRef(({ setOpen, op
             multiple && React__default["default"].createElement(SelectTokensComponent, { tokens: tokens, onRemove: onRemove }),
             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 }))),
+                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 || '')))),
         !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 })));
 });
@@ -5110,11 +5415,17 @@ const MultiSelectOptionComponent = React__default["default"].memo((props) => {
 });
 MultiSelectOptionComponent.displayName = 'MultiSelectOptionComponent';
 const SelectOptionContent = ({ item }) => {
-    return React__default["default"].createElement("div", { className: "o-select-option-data" }, item.text);
+    return React__default["default"].createElement("div", { className: `o-select-option-data${item.group ? ' o-select-option-group-item' : ''}` }, item.text);
+};
+const SelectOptionGroup = ({ item }) => {
+    return React__default["default"].createElement("div", { className: "o-select-option-group" }, getGroupText(item));
 };
 const SelectOptionComponent = React__default["default"].memo((props) => {
     const { item, index, onClick, onMouseEnter, onMouseLeave, multiple = false } = props;
-    const { OptionContentComponent = SelectOptionContent, OptionLoadingComponent = LoadingItem$1 } = useSelectConfig();
+    const service = useSelectService();
+    const previousItem = service.items[index - 1];
+    const displayGroup = getGroupText(item) !== getGroupText(previousItem);
+    const { OptionContentComponent = SelectOptionContent, OptionLoadingComponent = LoadingItem$1, OptionGroupComponent = SelectOptionGroup, } = service.config || {};
     let clickable = !!onClick && !item?.disabled;
     let hoverable = true;
     if (item?.data === undefined && onekijsFramework.isItemLoading(item)) {
@@ -5145,59 +5456,60 @@ const SelectOptionComponent = React__default["default"].memo((props) => {
     }
     if (!item || !item.data)
         return null;
-    return (React__default["default"].createElement("div", { className: classNames, onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index), onClick: () => clickable && onClick && item && onClick(item, index) },
-        multiple && (React__default["default"].createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => undefined, color: "currentColor", className: "o-select-option-multiple-checkbox" })),
-        React__default["default"].createElement(OptionContentComponent, { ...props })));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        displayGroup && React__default["default"].createElement(OptionGroupComponent, { ...props }),
+        React__default["default"].createElement("div", { className: classNames, onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index), onClick: () => clickable && onClick && item && onClick(item, index) },
+            multiple && (React__default["default"].createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => clickable && onClick && item && onClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox" })),
+            React__default["default"].createElement(OptionContentComponent, { ...props }))));
 });
 SelectOptionComponent.displayName = 'SelectOptionComponent';
 
-const findItem = (controller, pattern) => {
-    let result = undefined;
-    if (controller.items === undefined) {
-        return undefined;
-    }
-    for (const item of controller.items) {
-        if (item === undefined || item.text === undefined) {
-            continue;
-        }
-        if (item.text.toLowerCase().startsWith(pattern.toLowerCase())) {
-            return item;
-        }
-        if (result === undefined && item.text.toLowerCase().includes(pattern.toLowerCase())) {
-            result = item;
-        }
-    }
-    return result;
-};
-const findItemIndex = (controller, item) => {
-    if (controller.items === undefined) {
-        return -1;
+const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '', placeholder, controller, InputComponent = SelectInputComponent, IconComponent, OptionContentComponent = SelectOptionContent, OptionComponent = SelectOptionComponent, OptionLoadingComponent = LoadingItem$1, MultiOptionsComponent = MultiSelectOptionComponent, NotFoundComponent = SelectNotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height = '220px', multiple = false, status = onekijsFramework.ValidationStatus.None, size = 'medium', nullable, minChars = 0, openOnFocus = false, searchable = true, dropdownWidthModifier = 'same', preload = 50, increment = 50, animationMs = 200, disabled, defaultValue, required = false, sameWidth = true, overscan, clickable = true, }) => {
+    if (nullable === undefined) {
+        nullable = !required;
     }
-    return controller.items.findIndex((i) => {
-        if (i === undefined) {
-            return false;
-        }
-        if (i.id === undefined) {
-            return false;
-        }
-        return i.id === item?.id;
-    });
-};
-const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '', placeholder, controller, InputComponent = SelectInputComponent, IconComponent, OptionContentComponent = SelectOptionContent, OptionComponent = SelectOptionComponent, OptionLoadingComponent = LoadingItem$1, MultiOptionsComponent = MultiSelectOptionComponent, NotFoundComponent = SelectNotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height = '220px', multiple = false, status = onekijsFramework.ValidationStatus.None, size = 'medium', nullable = true, minChars = 0, openOnFocus = false, clickable = true, dropdownWidthModifier = 'same', preload = 100, increment = 100, animationMs = 200, disabled, }) => {
     const [open, setOpen] = React.useState(false);
     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,
+    };
+    const id = React.useId();
     const loading = onekijsFramework.isCollectionLoading(controller);
     const fetching = onekijsFramework.isCollectionFetching(controller);
     const containerRef = React.useRef(null);
     const previousSearchRef = React.useRef();
-    const config = React.useMemo(() => {
-        return {
-            OptionContentComponent,
-            OptionLoadingComponent,
-        };
-    }, [OptionContentComponent, OptionLoadingComponent]);
     const tokens = React.useMemo(() => {
         return (controller.state.selected || [])
             .map((uid) => service.getItem(uid))
@@ -5210,7 +5522,7 @@ const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '
             return controller.getItem(controller.state.active[0]);
         }
         else if (focus && search) {
-            const item = findItem(controller, search.toString());
+            const item = findSelectItem(controller, search.toString());
             if (item === undefined && !onekijsFramework.isCollectionFetching(controller)) {
                 return onekijsFramework.get(controller, 'items.0');
             }
@@ -5258,7 +5570,7 @@ const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '
     React.useEffect(() => {
         const search = controller.getSearch();
         if (open && focus && search && search !== previousSearchRef.current) {
-            const item = findItem(controller, search.toString());
+            const item = findSelectItem(controller, search.toString());
             const activated = onekijsFramework.get(controller.state.active, '0');
             if (item !== undefined && !onekijsFramework.isCollectionFetching(controller)) {
                 previousSearchRef.current = search;
@@ -5267,7 +5579,69 @@ const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '
                 }
             }
         }
-    }, [controller, focus, open]);
+    }, [controller, focus, open, id]);
+    React.useEffect(() => {
+        if (!multiple) {
+            if (value) {
+                service.setSelected('item', service.adapt(value));
+            }
+            else {
+                service.setSelected('item', []);
+            }
+        }
+        else {
+            if (value && Array.isArray(value)) {
+                service.setSelected('item', value.map((v) => service.adapt(v)));
+            }
+            else {
+                service.setSelected('item', []);
+            }
+        }
+        service.check();
+    }, [multiple, value, service]);
+    // Manage the result of a check after a change of the value from the outside
+    // if the selected item is invalid, do a onChange to remove the value
+    React.useEffect(() => {
+        const search = service.getSearch();
+        const invalidItems = service.state.invalidItems || [];
+        if (!search && invalidItems.length > 0) {
+            if (multiple) {
+                const validTokens = [];
+                tokens.forEach((t) => {
+                    const invalidToken = invalidItems.find((i) => t.uid === i.uid);
+                    if (!invalidToken) {
+                        validTokens.push(t);
+                    }
+                });
+                if (validTokens.length !== tokens.length && onChange) {
+                    let validData = validTokens.map((t) => t.data);
+                    if (validData.length === 0 && Array.isArray(service.state.validDefaultValue)) {
+                        validData = service.state.validDefaultValue;
+                    }
+                    onChange(validData);
+                }
+            }
+            else {
+                const currentItem = service.adapt(value);
+                if (invalidItems.find((i) => i.id === currentItem.id)) {
+                    // set the defaultValue if it's a valid value otherwise set null
+                    onChange && onChange(service.state.validDefaultValue || null);
+                }
+            }
+        }
+        else if (!search && !nullable && !value && service.state.validDefaultValue) {
+            onChange && onChange(service.state.validDefaultValue);
+        }
+    }, [
+        service,
+        multiple,
+        onChange,
+        value,
+        tokens,
+        service.state.invalidItems,
+        service.state.validDefaultValue,
+        nullable,
+    ]);
     const onInputChange = (nextValue) => {
         showActiveRef.current = false;
         if (nextValue === null) {
@@ -5301,13 +5675,14 @@ const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '
         if (service.getSearch()) {
             clearSearch();
         }
-        if (multiple && item && !item.selected) {
+        const isSelected = item?.selected;
+        if (multiple && item && !isSelected) {
             service.addSelected('item', item);
         }
-        else if (multiple && item && item.selected) {
+        else if (multiple && item && isSelected) {
             service.removeSelected('item', item);
         }
-        else if (item && !item.selected) {
+        else if (item && !isSelected) {
             service.setSelected('item', item);
         }
         else {
@@ -5315,7 +5690,7 @@ const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '
         }
         if (onChange) {
             if (multiple) {
-                if (item && item.selected) {
+                if (item && isSelected) {
                     onRemoveToken(item, index);
                 }
                 else {
@@ -5351,7 +5726,7 @@ const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '
                         const selectedUid = e.key === 'ArrowDown' ? onekijsFramework.first(service.state.selected) : onekijsFramework.last(service.state.selected);
                         if (selectedUid !== undefined) {
                             const selectedItem = service.getItem(selectedUid);
-                            const selectedIndex = findItemIndex(service, selectedItem);
+                            const selectedIndex = findSelectItemIndex(service, selectedItem);
                             if (selectedIndex !== undefined) {
                                 nextIndex =
                                     e.key === 'ArrowDown'
@@ -5378,7 +5753,7 @@ const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '
                 break;
             case 'Escape':
                 if (focus) {
-                    if (open) {
+                    if (open && onekijsFramework.eventLocks.isLockedBy('escape', id)) {
                         setOpen(false);
                     }
                     if (service.getSearch()) {
@@ -5388,7 +5763,7 @@ const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '
                 stateRef.current.keepFocus = false;
                 break;
         }
-    }, [service, open, setOpen, focus, multiple, clearSearch]);
+    }, [service, open, setOpen, focus, multiple, clearSearch, id]);
     const style = {};
     const classNames = addClassname(`o-select ${disabled ? 'o-select-disabled' : 'o-select-enabled'} o-select-size-${size} o-select-${open ? 'open' : 'close'}${status ? ' o-select-status-' + status.toLowerCase() : ''}${multiple ? ' o-select-multiple' : ''}`, className);
     const optionsRef = React.useRef(null);
@@ -5397,46 +5772,80 @@ const ControllerSelectComponent = ({ attachDropdownToBody = false, className = '
         height: height,
         ref: optionsRef,
         preload,
+        overscan,
         increment,
     });
     const onOpen = React.useCallback(() => {
+        onekijsFramework.eventLocks.lock('escape', id);
         const scrollTo = { index: 0, align: 'start' };
         const selectedUid = onekijsFramework.first(service.state.selected);
         if (selectedUid !== undefined) {
             const selectedItem = service.getItem(selectedUid);
-            const selectedIndex = findItemIndex(service, selectedItem);
-            if (selectedItem !== undefined && selectedIndex > 0) {
+            const selectedIndex = findSelectItemIndex(service, selectedItem);
+            if (selectedItem !== undefined && selectedIndex >= 0) {
                 scrollTo.index = selectedIndex;
                 scrollTo.align = 'center';
                 service.setActive('item', selectedItem);
             }
         }
         scrollToIndex(scrollTo.index, { align: scrollTo.align });
-    }, [service, scrollToIndex]);
+    }, [service, scrollToIndex, id]);
     const onClosed = React.useCallback(() => {
+        onekijsFramework.eventLocks.unlock('escape', id);
         service.setActive('item', []);
-    }, [service]);
+        service.setHighlighted('item', []);
+    }, [service, id]);
     const [Dropdown, triggerRef] = useDropdown();
     onekijsFramework.useEventListener('keydown', onKeyDownCapture, true);
     onekijsFramework.useEventListener('keydown', onKeyDown, false);
-    return (React__default["default"].createElement(SelectConfigContext.Provider, { value: config },
-        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: proxyItem ? proxyItem.text : '', focus: focus, onFocus: onFocus, onBlur: onBlur, tokens: tokens, multiple: multiple, onRemove: onRemoveToken, autoFocus: autoFocus, style: style, nullable: nullable, IconComponent: IconComponent, clickable: clickable, minChars: minChars, ref: triggerRef, disabled: disabled }),
-            React__default["default"].createElement(Dropdown, { attachToBody: attachDropdownToBody, open: open, distance: 0, animationTimeout: animationMs, onDropStart: onOpen, onCollapseDone: onClosed, placement: "bottom", widthModifier: dropdownWidthModifier, className: className, zIndex: attachDropdownToBody ? 2000 : undefined },
-                React__default["default"].createElement(ListBodyComponent, { className: "o-select-options", bodyRef: optionsRef, height: height, ItemComponent: multiple ? MultiOptionsComponent : OptionComponent, ItemLoadingComponent: OptionLoadingComponent, ItemContentComponent: OptionContentComponent, NotFoundComponent: NotFoundComponent, items: selectItems, onItemSelect: onSelect, totalSize: totalSize, virtualItems: isVirtual ? virtualItems : undefined, scrollToIndex: scrollToIndex, service: controller.asService(), state: controller.state, keyboardNavigable: true, multiSelect: multiple, onItemActivate: onActivate })))));
-};
-
-const ArraySelectComponent = (props) => {
-    const controller = useSelectController(props.dataSource, { adapter: props.adapter, fetchOnce: props.fetchOnce });
-    return React__default["default"].createElement(ControllerSelectComponent, { ...props, controller: controller });
-};
-
-const SelectComponent = React__default["default"].memo((props) => {
-    const controller = props.controller;
-    if (onekijsFramework.isCollection(controller)) {
-        return React__default["default"].createElement(ControllerSelectComponent, { ...props, controller: controller });
-    }
-    else {
+    const update = React.useCallback(() => {
+        if (optionsRef.current && !sameWidth) {
+            if (optionsRef.current.scrollWidth > optionsRef.current.offsetWidth) {
+                optionsRef.current.style.width = `${optionsRef.current.scrollWidth + optionsRef.current.offsetWidth - optionsRef.current.clientWidth + 5}px`;
+            }
+        }
+    }, [sameWidth]);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const throttleUpdate = onekijsFramework.useThrottle(update, 20);
+    const resizeObserver = React.useMemo(() => {
+        return new ResizeObserver(() => {
+            throttleUpdate();
+        });
+    }, [throttleUpdate]);
+    onekijsFramework.useIsomorphicLayoutEffect(() => {
+        const el = optionsRef;
+        if (el.current) {
+            resizeObserver.observe(el.current);
+        }
+        return () => {
+            if (el.current) {
+                resizeObserver.unobserve(el.current);
+            }
+        };
+    }, [optionsRef]);
+    onekijsFramework.useIsomorphicLayoutEffect(() => {
+        if (open) {
+            setTimeout(update, 0);
+        }
+    }, [open, update]);
+    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: proxyItem ? proxyItem.text : '', 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 }),
+            React__default["default"].createElement(Dropdown, { attachToBody: attachDropdownToBody, open: open, distance: 0, animationTimeout: animationMs, onDropStart: onOpen, onCollapseDone: onClosed, placement: "bottom", widthModifier: dropdownWidthModifier, className: className, zIndex: attachDropdownToBody ? 2000 : undefined },
+                React__default["default"].createElement(ListBodyComponent, { className: "o-select-options", bodyRef: optionsRef, height: height, ItemComponent: multiple ? MultiOptionsComponent : OptionComponent, ItemLoadingComponent: OptionLoadingComponent, ItemContentComponent: OptionContentComponent, NotFoundComponent: NotFoundComponent, items: selectItems, onItemSelect: onSelect, onItemUnselect: onSelect, totalSize: totalSize, virtualItems: isVirtual ? virtualItems : undefined, scrollToIndex: scrollToIndex, service: controller.asService(), state: controller.state, keyboardNavigable: true, multiSelect: multiple, onItemActivate: onActivate })))));
+};
+
+const ArraySelectComponent = (props) => {
+    const controller = useSelectController(props.dataSource, { adapter: props.adapter, fetchOnce: props.fetchOnce });
+    return React__default["default"].createElement(ControllerSelectComponent, { ...props, controller: controller });
+};
+
+const SelectComponent = React__default["default"].memo((props) => {
+    const controller = props.controller;
+    if (onekijsFramework.isCollection(controller)) {
+        return React__default["default"].createElement(ControllerSelectComponent, { ...props, controller: controller });
+    }
+    else {
         return React__default["default"].createElement(ArraySelectComponent, { ...props, dataSource: props.dataSource || [] });
     }
 });
@@ -5449,7 +5858,7 @@ const emptyCells = cssProperty('empty-cells');
 const tableLayout = cssProperty('table-layout');
 const verticalAlign = cssProperty('vertical-align');
 
-const selectStyle = ({ theme, clickable }) => {
+const selectStyle = ({ theme, clickable = true, searchable = true }) => {
     return styled.css `
     ${preflight()}
     ${width('100%')}
@@ -5571,12 +5980,13 @@ const selectStyle = ({ theme, clickable }) => {
         ${borderWidth('2px')}
         ${padding(0)}
       }
-      .o-select-remover {
-        ${cursor('pointer')}
-        ${color('light')}
-        ${fontFamily('Arial')}
-        ${paddingX('sm')}
-      }
+    }
+
+    .o-select-remover {
+      ${cursor('pointer')}
+      ${color('light')}
+      ${fontFamily('Arial')}
+      ${paddingX('sm')}
     }
 
     &.o-select-disabled {
@@ -5590,24 +6000,39 @@ const selectStyle = ({ theme, clickable }) => {
 
       .o-select-icon-container {
         ${cursor('not-allowed')}
-        .o-select-icon {
-          ${cursor('not-allowed')}
-        }
       }
 
-      .o-select-input-data {
-        .o-select-token {
+      .o-select-icon {
+        ${color('dark')}
+        ${cursor('not-allowed')}
+      }
+
+      .o-select-token {
+        ${cursor('not-allowed')}
+        ${backgroundColor('dark')}
+      }
+
+      .o-select-token-remove {
+        ${cursor('not-allowed')}
+      }
+      &.o-select-close {
+        .o-select-input {
           ${cursor('not-allowed')}
-          .o-select-token-remove {
-            ${cursor('not-allowed')}
-          }
         }
       }
     }
 
+    input.o-select-input {
+      ${!searchable ? width(0) : ''}
+    }
+
+    .o-select-input-text {
+      ${userSelect('none')}
+    }
+
     &.o-select-close {
       .o-select-input {
-        ${cursor('pointer')}
+        ${cursor(clickable ? 'pointer' : 'auto')}
       }
     }
     &.o-select-open {
@@ -5615,6 +6040,9 @@ const selectStyle = ({ theme, clickable }) => {
         ${borderBottomRightRadius(0)}
         ${borderBottomLeftRadius(0)}
       }
+      .o-select-input {
+        ${cursor(searchable ? 'auto' : 'pointer')}
+      }
     }
 
     .o-select-input-data {
@@ -5623,50 +6051,55 @@ const selectStyle = ({ theme, clickable }) => {
       ${flexWrap('wrap')}
       ${alignItems('center')}
       ${paddingX('sm')}
-      .o-select-input-wrapper {
-        ${flexGrow(1)}
-        ${color('gray-800')}
-        ${position('relative')}
-        ${display('inline-block')}
-        ${minWidth('50px')}
-        .o-select-input-auto-sizer {
-          ${visibility(false)}
-          ${display('inline-block')}
-          ${whiteSpace('pre')}
-        }
-        .o-select-input {
-          ${position('absolute')}
-          ${top(0)}
-          ${left(0)}
-          ${right(0)}
-          ${bottom(0)}
-          ${appearance('none')}
-          ${outline('none')}
-          ${width('full')}
-          ${color('gray-800', { placeholder: 'gray-400' })}
-        }
-      }
+      ${maxWidth('calc(100% - 32px)')}
+    }
 
-      .o-select-token {
-        ${cursor('default')}
-        ${whiteSpace('pre')}
-        ${backgroundColor('primary')}
-        ${color('white')}
-        ${marginRight('sm')}
-        ${borderRadius('md')}
-        ${fontSize('sm')}
-        ${display('flex')}
-        .o-select-token-text {
-          ${flexGrow(1)}
-          ${paddingLeft('sm')}
-        }
-        .o-select-token-remove {
-          ${cursor('pointer')}
-          ${color('white', { hover: 'danger' })}
-          ${fontFamily('Arial')}
-          ${paddingX('sm')}
-        }
-      }
+    .o-select-input-wrapper {
+      ${flexGrow(1)}
+      ${color('gray-800')}
+      ${position('relative')}
+      ${display('inline-block')}
+      ${minWidth('50px')}
+    }
+
+    .o-select-input-auto-sizer {
+      ${visibility(false)}
+      ${display('inline-block')}
+      ${whiteSpace('pre')}
+    }
+
+    .o-select-input {
+      ${position('absolute')}
+      ${top(0)}
+      ${left(0)}
+      ${right(0)}
+      ${bottom(0)}
+      ${appearance('none')}
+      ${outline('none')}
+      ${width('full')}
+      ${color('gray-800', { placeholder: 'gray-400' })}
+    }
+
+    .o-select-token {
+      ${cursor('default')}
+      ${whiteSpace('pre')}
+      ${backgroundColor('primary')}
+      ${color('white')}
+      ${marginRight('sm')}
+      ${borderRadius('md')}
+      ${fontSize('sm')}
+      ${display('flex')}
+    }
+
+    .o-select-token-text {
+      ${flexGrow(1)}
+      ${paddingLeft('sm')}
+    }
+    .o-select-token-remove {
+      ${cursor('pointer')}
+      ${color('white', { hover: 'danger' })}
+      ${fontFamily('Arial')}
+      ${paddingX('sm')}
     }
 
     .o-select-icon-container {
@@ -5678,23 +6111,23 @@ const selectStyle = ({ theme, clickable }) => {
       ${display('flex')}
       ${alignItems('center')}
       ${borderColor('gray-200')}
-      .o-select-icon {
-        ${color('primary')}
-        ${cursor('pointer')}
-        ${width(4)}
-        ${height(4)}
-        ${outline('none', { focus: 'none' })}
-        ${backgroundColor('transparent')}
-        ${padding(0)}
-      }
-      .o-select-arrow-svg {
-        ${display('block')}
-        ${verticalAlign('middle')}
-        ${margin('px')}
-        ${transitionDuration('.5s')}
-        ${transitionProperty('all')}
-        ${transitionTimingFunction('ease-in-out')}
-      }
+    }
+    .o-select-icon {
+      ${color('primary')}
+      ${cursor('pointer')}
+      ${width(4)}
+      ${height(4)}
+      ${outline('none', { focus: 'none' })}
+      ${backgroundColor('transparent')}
+      ${padding(0)}
+    }
+    .o-select-arrow-svg {
+      ${display('block')}
+      ${verticalAlign('middle')}
+      ${margin('px')}
+      ${transitionDuration('.5s')}
+      ${transitionProperty('all')}
+      ${transitionTimingFunction('ease-in-out')}
     }
 
     &.o-select-multiple {
@@ -5738,27 +6171,38 @@ const selectStyle = ({ theme, clickable }) => {
     .o-select-options {
       scrollbar-width: thin;
       scrollbar-color: ${(props) => props.theme.palette.colors[props.theme.colors.primary]}
-        ${(props) => props.theme.colors['gray-200']};
+        ${(props) => props.theme.colors[props.theme.colors.lighter]};
       &::-webkit-scrollbar {
         width: 12px;
       }
       &::-webkit-scrollbar-track {
-        background: ${(props) => props.theme.palette.colors['gray-200']};
+        background: ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
       }
       &::-webkit-scrollbar-thumb {
         background-color: ${(props) => props.theme.palette.colors[props.theme.colors.primary]};
-        border: 3px solid ${(props) => props.theme.palette.colors['gray-200']};
+        border: 3px solid ${(props) => props.theme.palette.colors[props.theme.colors.lighter]};
       }
       ${overflowY('hidden')}
 
+      .o-select-option-group {
+        ${paddingX('md')}
+        ${userSelect('none')}
+        ${fontWeight('bold')}
+        ${paddingTop('sm')}
+      }
+      .o-select-option-group-item {
+        ${paddingLeft('sm')}
+      }
+
       .o-select-option {
         ${width('full')}
         ${paddingX('lg')}
-        ${paddingY('sm')}
+        ${paddingY('xs')}
         ${display('flex')}
         ${alignItems('center')}
         ${backgroundColor('transparent', { hover: 'gray-200' })}
         ${userSelect('none')}
+        ${minHeight('32px')}
         &.o-select-option-clickable {
           ${cursor('pointer')}
         }
@@ -5767,8 +6211,9 @@ const selectStyle = ({ theme, clickable }) => {
           ${color('inherit')}
         }
         &.o-select-option-active {
-          ${backgroundColor('primary')}
-          ${color('white')}
+          ${backgroundColor(lighten(theme.colors.primary, 600))}
+          ${color('primary')}
+          ${fontWeight('bold')}
         }
 
         .o-select-option-icon {
@@ -5800,10 +6245,20 @@ const FormSelect = React__default["default"].memo((props) => {
     }, props));
     const Component = props.FieldComponent || Select;
     return (React__default["default"].createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
-        React__default["default"].createElement(Component, { ...fieldComponentProps })));
+        React__default["default"].createElement(Component, { ...fieldComponentProps, required: props.required, defaultValue: props.defaultValue })));
 });
 FormSelect.displayName = 'FormSelect';
 
+class DefaultSelectBroker extends onekijsFramework.DefaultCollectionBroker {
+    defaultValue;
+    setDefaultValue(defaultValue, subscriberId) {
+        if (subscriberId === undefined) {
+            this.defaultValue = defaultValue;
+        }
+        this._getSubscribers(subscriberId).forEach((s) => s.setDefaultValue(defaultValue));
+    }
+}
+
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const TabsServiceContext = React__default["default"].createContext(null);
 const useTabsService = () => {
@@ -5857,6 +6312,7 @@ let TabsService = class TabsService extends onekijsFramework.DefaultService {
                 t.active = false;
             });
             member.active = true;
+            member.touched = false;
             this.state.active = uid;
             this.touching(this.state.active);
         }
@@ -6197,7 +6653,7 @@ const useTab = (props) => {
     return tab;
 };
 
-const Tab = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, }) => {
+const Tab = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, className, }) => {
     const tab = useTab({
         title,
         active,
@@ -6224,7 +6680,7 @@ const Tab = ({ title, active = false, disabled = false, visible = true, closable
         return null;
     }
     return (React__default["default"].createElement(reactTransitionGroup.CSSTransition, { in: true, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering },
-        React__default["default"].createElement("div", { className: "o-tab" }, children)));
+        React__default["default"].createElement("div", { className: addClassname('o-tab', className) }, children)));
 };
 
 let TableService = class TableService extends onekijsFramework.CollectionService {
@@ -6603,6 +7059,7 @@ const DefaultTableHeaderTitleComponent = ({ column, sort }) => {
     };
     return (React__default["default"].createElement("div", { onClick: isSortable ? onSort : undefined, style: { display: 'flex', alignItems: 'center' } },
         React__default["default"].createElement("span", { className: "o-table-header-title" }, column.title),
+        column.help && React__default["default"].createElement(Help, { content: column.help, size: "small" }),
         isSortable && React__default["default"].createElement(TableSortComponent, { sort: sort, column: column })));
 };
 const TableHeaderTitleComponent = React__default["default"].memo((props) => {
@@ -6937,22 +7394,23 @@ const tableStyle = ({ theme, fit = true }) => {
       ${borderBottomStyle(t.tdBorderBottomStyle)}
       ${boxShadow('default')}
       ${backgroundColor(t.bgColor)}
+    }
 
-      .o-table-body-cell {
-        ${paddingX(t.tdPaddingX)}
-        ${paddingY(t.tdPaddingY)}
-        ${boxSizing('border-box')}
-        ${overflow('hidden')}
-        &.o-table-cell-expander {
-          ${padding(0)}
-          .o-table-cell-expander-content {
-            ${paddingX(t.tdPaddingX)}
-            ${paddingY(t.tdPaddingY)}
-            ${cursor('pointer')}
-          }
+    .o-table-body-cell {
+      ${paddingX(t.tdPaddingX)}
+      ${paddingY(t.tdPaddingY)}
+      ${boxSizing('border-box')}
+      ${overflow('hidden')}
+      &.o-table-cell-expander {
+        ${padding(0)}
+        .o-table-cell-expander-content {
+          ${paddingX(t.tdPaddingX)}
+          ${paddingY(t.tdPaddingY)}
+          ${cursor('pointer')}
         }
       }
     }
+
     .o-table-body-row-even {
       ${backgroundColor(t.tdStripBgColor)}
     }
@@ -7057,8 +7515,8 @@ const tableStyle = ({ theme, fit = true }) => {
       }
       .o-table-header-title-container {
         ${paddingY('xs')}
-        ${borderBottomWidth('1px')}
-        ${borderBottomColor('primary')}
+        ${borderBottomWidth(t.thBorderBottomWidth)}
+        ${borderBottomColor(t.thBorderBottomColor)}
       }
     }
 
@@ -7070,7 +7528,7 @@ const tableStyle = ({ theme, fit = true }) => {
       ${textTransform('uppercase')}
       ${fontSize('xs')}
       ${cursor('pointer')}
-      ${color('primary')}
+      ${color('pink')}
       .o-toggler-icon-container {
         ${marginBottom('px')}
       }
@@ -7078,15 +7536,30 @@ const tableStyle = ({ theme, fit = true }) => {
     .o-form-table-remove {
       ${display('inline-flex')}
       ${alignItems('center')}
-      ${color('primary')}
+      ${color('danger')}
       ${cursor('pointer')}
+      ${paddingTop('sm')}
+      &.o-form-table-remove-disabled {
+        ${color('light')}
+        ${cursor('not-allowed')}
+      }
     }
 
     .o-form-table-remove-cell {
       ${display('flex')}
-      ${alignItems('center')}
+      ${alignItems('start')}
       ${justifyContent('center')}
     }
+
+    .o-checkbox-cell {
+      ${display('flex')}
+      ${justifyContent('center')}
+      .o-table-checkbox {
+        ${paddingTop('xs')}
+        ${display('flex')}
+        ${alignItems('start')}
+      }
+    }
   `;
 };
 
@@ -7130,6 +7603,7 @@ const useCheckboxColumn = (options) => {
         return Object.assign({
             filterable: false,
             sortable: false,
+            className: 'o-checkbox-cell',
         }, options, {
             CellComponent: Component(options),
         });
@@ -7199,37 +7673,165 @@ const useLinkColumn = (options) => {
 const SelectCellComponent = (options, broker) => {
     const SelectCellComponent = ({ item, column, rowIndex }) => {
         const { tableName } = useFormTableContext();
-        const controller = useSelectController(options.dataSource, Object.assign({}, options, broker.getInitialQuery()));
+        const controller = useSelectController(options.dataSource, options);
+        const service = controller.asService();
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
+        const name = `${tableName}.${rowIndex}.${column.id}`;
         React.useEffect(() => {
-            broker.addSubscriber(controller);
+            broker.addSubscriber(name, service);
             return () => {
-                broker.removeSubscriber(controller);
+                broker.removeSubscriber(name);
             };
-        }, [controller]);
-        return (React__default["default"].createElement(FormSelect, { size: "small", layout: "table", ...options, name: `${tableName}.${rowIndex}.${column.id}`, className: addClassname('o-table-select', className) }));
+        }, [name, service]);
+        return (React__default["default"].createElement(FormSelect, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-select', className), controller: controller }));
     };
     SelectCellComponent.displayName = 'SelectCellComponent';
     return SelectCellComponent;
 };
 
 const useSelectColumn = (options) => {
+    const opts = Object.assign({}, options, { brokerable: true });
     const broker = onekijsFramework.useLazyRef(() => {
-        return new onekijsFramework.DefaultCollectionBroker();
+        return new DefaultSelectBroker(opts.dataSource, opts);
     });
-    const Component = options.CellComponent || SelectCellComponent;
+    const Component = opts.CellComponent || SelectCellComponent;
     const optionsRef = onekijsFramework.useLazyRef(() => {
         return Object.assign({
             filterable: false,
             sortable: false,
-        }, options, {
-            CellComponent: Component(options, broker.current),
+        }, opts, {
+            CellComponent: Component(opts, broker.current),
             broker: broker.current,
         });
     });
     return optionsRef.current;
 };
 
+const TextareaComponent = (props) => {
+    const { className, size = 'medium', status, onFocus: forwardFocus, onBlur: forwardBlur, ...textareaProps } = props;
+    const [focus, setFocus] = React.useState(false);
+    const classNames = addClassname(`o-textarea o-textarea-size-${size}${focus ? ' o-textarea-focus' : ''}${status ? ' o-textarea-status-' + status.toLowerCase() : ''}`, className);
+    const onFocus = (e) => {
+        setFocus(true);
+        forwardFocus && forwardFocus(e);
+    };
+    const onBlur = (e) => {
+        setFocus(false);
+        forwardBlur && forwardBlur(e);
+    };
+    return (React__default["default"].createElement("div", { className: classNames },
+        React__default["default"].createElement("textarea", { className: "o-textarea-field", ...textareaProps, onFocus: onFocus, onBlur: onBlur })));
+};
+TextareaComponent.displayName = 'TextareaComponent';
+
+const textareaStyle = ({ theme, disabled }) => {
+    const t = theme.textarea;
+    return styled.css `
+    ${boxSizing('border-box')}
+    ${width(t.width)}
+    ${backgroundColor(disabled ? 'lighter' : t.bgColor)}
+    ${display('flex')}
+    ${alignItems('center')}
+    ${borderWidth(t.borderWidth)}
+    ${borderColor(t.borderColor)}
+    ${borderRadius(t.borderRadius)}
+    ${borderStyle(t.borderStyle)}
+    ${padding('1px')}
+    ${cursor(disabled ? 'not-allowed' : 'auto')}
+    textarea {
+      ${cursor(disabled ? 'not-allowed' : 'auto')}
+    }
+    &.o-textarea-focus {
+      ${borderColor(t.borderFocusColor)}
+      ${borderWidth(t.borderFocusWidth)}
+      ${padding(0)}
+    }
+    .o-textarea-field {
+      ${width('full')}
+      ${flexGrow(1)}
+      ${paddingX(t.paddingX)}
+      ${paddingY(t.paddingY)}
+      ${appearance(t.appearance)}
+      ${outline(t.outline)}
+      ${borderWidth(0)}
+      ${backgroundColor('inherit')}
+      ${color(t.fontColor, { placeholder: t.placeholderColor })}
+    }
+
+    &.o-textarea-size-xsmall textarea {
+      ${paddingY(0)}
+      ${fontSize('sm')}
+    }
+    &.o-textarea-size-small textarea {
+      ${paddingY('xs')}
+      ${fontSize('sm')}
+    }
+    &.o-textarea-size-medium textarea {
+      ${paddingY('sm')}
+      ${fontSize('default')}
+    }
+
+    &.o-textarea-size-large textarea {
+      ${paddingY('md')}
+      ${fontSize('default')}
+    }
+
+    &.o-textarea-size-xlarge textarea {
+      ${paddingY('lg')}
+      ${fontSize('lg')}
+    }
+
+    &.o-textarea-status-error {
+      ${borderColor('danger')}
+    }
+
+    &.o-textarea-status-warning {
+      ${borderColor('warning')}
+    }
+
+    &.o-textarea-status-success {
+      ${borderColor('success')}
+    }
+  `;
+};
+
+const Textarea = styled__default["default"](TextareaComponent) `
+  ${textareaStyle}
+`;
+
+const FormTextarea = React__default["default"].memo((props) => {
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
+        defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
+    }, props));
+    const Component = props.FieldComponent || Textarea;
+    return (React__default["default"].createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
+        React__default["default"].createElement(Component, { ...fieldComponentProps, value: !fieldComponentProps.value ? '' : fieldComponentProps.value })));
+});
+FormTextarea.displayName = 'FormTextarea';
+
+const TextareaCellComponent = (options) => {
+    const TextareaCellComponent = ({ item, column, rowIndex }) => {
+        const { tableName } = useFormTableContext();
+        const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
+        return (React__default["default"].createElement(FormTextarea, { size: "small", layout: "table", ...options, name: `${tableName}.${rowIndex}.${column.id}`, className: addClassname('o-table-textarea', className) }));
+    };
+    TextareaCellComponent.displayName = 'TextareaCellComponent';
+    return TextareaCellComponent;
+};
+
+const useTextareaColumn = (options) => {
+    const Component = options.CellComponent || TextareaCellComponent;
+    const optionsRef = onekijsFramework.useLazyRef(() => {
+        return Object.assign({
+            filterable: false,
+            sortable: false,
+        }, options, {
+            CellComponent: Component(options),
+        });
+    });
+    return optionsRef.current;
+};
+
 const RemoveIcon = ({ className, onClick }) => {
     return (React__default["default"].createElement("div", { className: className, onClick: onClick },
         React__default["default"].createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 16 16", width: "100%", height: "100%" },
@@ -7249,12 +7851,12 @@ const DeleteRowComponent = ({ rowIndex }) => {
     const form = onekijsFramework.useForm();
     const { tableName, minLength = 0, required } = useFormTableContext();
     const removeRow = () => {
-        form.remove(tableName, rowIndex);
+        if (rowIndex >= min) {
+            form.remove(tableName, rowIndex);
+        }
     };
     const min = Math.max(minLength, required ? 1 : 0);
-    if (rowIndex < min)
-        return null;
-    return (React__default["default"].createElement("div", { className: "o-form-table-remove", onClick: removeRow },
+    return (React__default["default"].createElement("div", { className: `o-form-table-remove${rowIndex < min ? ' o-form-table-remove-disabled' : ''}`, onClick: removeRow },
         React__default["default"].createElement(RemoveIcon$1, { width: "14px", height: "14px" })));
 };
 const SelectRowComponent = ({ item }) => {
@@ -7279,6 +7881,7 @@ const FooterComponent = () => {
 };
 const FormTableComponent = React__default["default"].memo(({ addLabel = 'add', controller, value, onChange, className, name, format = 'auto', required, minLength, maxLength, ...props }) => {
     const form = onekijsFramework.useForm();
+    const id = React.useId();
     const tableService = controller.asService();
     const formatRef = onekijsFramework.useLazyRef(() => {
         if (format === 'auto') {
@@ -7286,6 +7889,7 @@ const FormTableComponent = React__default["default"].memo(({ addLabel = 'add', c
         }
         return format;
     });
+    const [mounted, setMounted] = React.useState(false);
     const formTableContext = onekijsFramework.useLazyRef(() => {
         const onSelect = (item, selected) => {
             const getId = (v) => {
@@ -7302,14 +7906,27 @@ const FormTableComponent = React__default["default"].memo(({ addLabel = 'add', c
         };
         return { tableName: name, onSelect, addLabel, required, minLength, maxLength };
     });
+    // listen on value change from the form
+    // for the initial value in the table controller
+    // delay the rendering of the table until the value has been set in the controller
     React.useEffect(() => {
-        if (tableService.dataSource) {
-            tableService.setSelected('value', value || []);
-        }
-        else if (value !== undefined) {
-            tableService.setData(value);
-        }
-    }, [tableService, value, formatRef]);
+        const watch = [name];
+        const listener = (value) => {
+            if (tableService.dataSource) {
+                tableService.setSelected('value', value || []);
+            }
+            else if (value !== undefined) {
+                tableService.setData(value);
+            }
+        };
+        form.onValueChange(id, listener, watch);
+        listener(value);
+        setMounted(true);
+        return () => {
+            form.offValueChange(id);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     React.useEffect(() => {
         if (tableService.dataSource) {
             tableService.addColumn({
@@ -7331,6 +7948,8 @@ const FormTableComponent = React__default["default"].memo(({ addLabel = 'add', c
             }, 0);
         }
     }, [tableService]);
+    if (!mounted)
+        return null;
     return (React__default["default"].createElement(DefaultFormTableContext.Provider, { value: formTableContext.current },
         React__default["default"].createElement(ControllerTableComponent, { controller: controller, className: addClassname('o-form-table', className), FooterComponent: tableService.dataSource ? undefined : FooterComponent, footer: tableService.dataSource ? false : true, NotFoundComponent: null, ...props })));
 });
@@ -7398,6 +8017,29 @@ const Tag = styled__default["default"](TagComponent) `
   ${tagStyle}
 `;
 
+const defaultTreeQueryEngine = (items, query, comparator, comparators, searcher) => {
+    let result = [];
+    if (!query.filter) {
+        // remove all children of non expanded items
+        let visible = 1;
+        items.forEach((item) => {
+            if (item.level <= visible) {
+                result.push(item);
+                if (item.expanded) {
+                    visible = item.level + 1;
+                }
+                else {
+                    visible = item.level;
+                }
+            }
+        });
+    }
+    else {
+        result = items;
+    }
+    return onekijsFramework.defaultQueryEngine(result, query, comparator, comparators, searcher);
+};
+
 let TreeService = class TreeService extends onekijsFramework.CollectionService {
     adapt(data) {
         return this._adapt(data);
@@ -7578,27 +8220,8 @@ let TreeService = class TreeService extends onekijsFramework.CollectionService {
         yield delay(delay_ms);
         yield this.setMeta('item', item, 'loadingStatus', onekijsFramework.LoadingStatus.Loading);
     }
-    _execute(items, query, comparator, comparators) {
-        let result = [];
-        if (!query.filter) {
-            // remove all children of non expanded items
-            let visible = 1;
-            items.forEach((item) => {
-                if (item.level <= visible) {
-                    result.push(item);
-                    if (item.expanded) {
-                        visible = item.level + 1;
-                    }
-                    else {
-                        visible = item.level;
-                    }
-                }
-            });
-        }
-        else {
-            result = items;
-        }
-        return super._execute(result, query, comparator, comparators);
+    _execute(items, query, comparator, comparators, searcher) {
+        return defaultTreeQueryEngine(items, query, comparator, comparators, searcher);
     }
     _expand(item) {
         this.setMeta('item', item, 'expanded', true);
@@ -8654,7 +9277,7 @@ const useStep = (props) => {
     return step;
 };
 
-const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, }) => {
+const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, }) => {
     const { animate, forwardOnly } = useWizardState();
     const service = useWizardService();
     const step = useStep({
@@ -8671,7 +9294,7 @@ const Step = ({ title, active = false, disabled = false, visible = true, closabl
         uid: uid === undefined ? title : uid,
     });
     const fieldContainer = onekijsFramework.useFieldContainer({
-        onValidationChange: (_field, _validation, touchedValidation, allValidation) => {
+        onValidationChange: (touchedValidation, allValidation) => {
             if (step) {
                 service.onValidationChange(step.uid, touchedValidation, allValidation);
             }
@@ -8698,7 +9321,7 @@ const Step = ({ title, active = false, disabled = false, visible = true, closabl
     }
     return (React__default["default"].createElement(onekijsFramework.FormContext.Provider, { value: fieldContainer.context },
         React__default["default"].createElement(reactTransitionGroup.CSSTransition, { in: true, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering },
-            React__default["default"].createElement("div", { className: "o-step-content" },
+            React__default["default"].createElement("div", { className: addClassname('o-step-content', className) },
                 showTitle && React__default["default"].createElement("div", { className: "o-step-content-title" }, title),
                 children))));
 };
@@ -8768,6 +9391,13 @@ const listStylePosition = cssProperty('list-style-position');
 // disc; circle; square; decimal; georgian; cjk-ideographic; kannada; any string
 const listStyleType = cssProperty('list-style-type');
 
+const perspective = cssProperty('perspective');
+const perspectiveOrigin = cssProperty('perspective-origin');
+const rotate = cssProperty('rotate');
+const scale = cssProperty('scale');
+const transform = cssProperty('transform');
+const transformOrigin = cssProperty('transform-origin');
+
 exports.ColorKeys = void 0;
 (function (ColorKeys) {
     ColorKeys["white"] = "white";
@@ -9158,7 +9788,7 @@ const baseTheme = (customTheme = {}) => {
             thBorderBottomColor: 'lightest',
             thBgColor: 'lightest',
             thFontWeigth: 'semibold',
-            thFontColor: 'darker',
+            thFontColor: 'primary',
             thFontCase: 'uppercase',
             thFontSize: 'xs',
             thLetterSpacing: 'xl',
@@ -9210,6 +9840,37 @@ const baseTheme = (customTheme = {}) => {
             fontColor: 'darkest',
             placeholderColor: 'light',
         },
+        textarea: {
+            bgColor: 'white',
+            width: 'full',
+            borderWidth: 1,
+            borderColor: 'light',
+            borderRadius: 'sm',
+            borderStyle: 'solid',
+            borderFocusColor: 'primary',
+            borderFocusWidth: 2,
+            paddingX: 'sm',
+            paddingY: 'xs',
+            xsPaddingX: 'sm',
+            xsPaddingY: 0,
+            xsFontSize: 'sm',
+            smPaddingX: 'sm',
+            smPaddingY: 'xs',
+            smFontSize: 'sm',
+            mdPaddingX: 'sm',
+            mdPaddingY: 'sm',
+            mdFontSize: 'default',
+            lgPaddingX: 'sm',
+            lgPaddingY: 'md',
+            lgFontSize: 'default',
+            xlPaddingX: 'sm',
+            xlPaddingY: 'lg',
+            xlFontSize: 'lg',
+            appearance: 'none',
+            outline: 'none',
+            fontColor: 'darkest',
+            placeholderColor: 'light',
+        },
         label: {
             fontWeight: 'medium',
             fontCase: 'none',
@@ -9564,6 +10225,7 @@ exports.Card = Card;
 exports.CardComponent = CardComponent;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.CheckboxCellComponent = CheckboxCellComponent;
 exports.CheckboxComponent = CheckboxComponent;
 exports.CloseAllIcon = CloseAllIcon;
 exports.Col = Col;
@@ -9582,9 +10244,12 @@ exports.DashboardRight = DashboardRight;
 exports.DashboardServiceContext = DashboardServiceContext;
 exports.DashboardStateContext = DashboardStateContext;
 exports.DashboardToggler = DashboardToggler;
+exports.DefaultCellComponent = DefaultCellComponent;
+exports.DefaultSelectBroker = DefaultSelectBroker;
 exports.Dropdown = Dropdown;
 exports.DropdownButton = DropdownButton;
 exports.DropdownComponent = DropdownComponent;
+exports.ExpandedCellComponent = ExpandedCellComponent;
 exports.FieldDescription = FieldDescription;
 exports.FieldDescriptionComponent = FieldDescriptionComponent;
 exports.FieldHelp = Help;
@@ -9598,7 +10263,9 @@ exports.FormCheckbox = FormCheckbox;
 exports.FormInput = FormInput;
 exports.FormSelect = FormSelect;
 exports.FormTable = FormTable;
+exports.FormTextarea = FormTextarea;
 exports.Input = Input;
+exports.InputCellComponent = InputCellComponent;
 exports.InputComponent = InputComponent;
 exports.Label = Label;
 exports.List = List;
@@ -9615,10 +10282,13 @@ exports.Property = Property;
 exports.Row = Row;
 exports.SearchIcon = SearchIcon;
 exports.Select = Select;
+exports.SelectCellComponent = SelectCellComponent;
 exports.SelectComponent = SelectComponent;
 exports.SelectIconComponent = SelectIconComponent;
 exports.SelectInputComponent = SelectInputComponent;
+exports.SelectNotFoundComponent = SelectNotFoundComponent;
 exports.SelectOptionComponent = SelectOptionComponent;
+exports.SelectService = SelectService$1;
 exports.SelectTokensComponent = SelectTokensComponent;
 exports.Step = Step;
 exports.StepTitle = StepTitle;
@@ -9630,6 +10300,9 @@ exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.TagComponent = TagComponent;
 exports.TailwindTheme = TailwindTheme;
+exports.Textarea = Textarea;
+exports.TextareaCellComponent = TextareaCellComponent;
+exports.TextareaComponent = TextareaComponent;
 exports.TogglerIcon = TogglerIcon;
 exports.Tooltip = Tooltip;
 exports.Tree = Tree;
@@ -9748,6 +10421,7 @@ exports.cssProperty = cssProperty;
 exports.cursor = cursor;
 exports.darken = darken;
 exports.dashboardOverlayStyle = dashboardOverlayStyle;
+exports.defaultTreeQueryEngine = defaultTreeQueryEngine;
 exports.deriveColor = deriveColor;
 exports.display = display;
 exports.dropdownButtonStyle = dropdownButtonStyle;
@@ -9755,6 +10429,8 @@ exports.dropdownStyle = dropdownStyle;
 exports.emptyCells = emptyCells;
 exports.enumFormatter = enumFormatter;
 exports.fill = fill;
+exports.findSelectItem = findSelectItem;
+exports.findSelectItemIndex = findSelectItemIndex;
 exports.flex = flex;
 exports.flexBasis = flexBasis;
 exports.flexDirection = flexDirection;
@@ -9877,6 +10553,7 @@ exports.rowGap = rowGap;
 exports.rowStyle = rowStyle;
 exports.sameWidthPopperModifier = sameWidthPopperModifier;
 exports.scale = scale;
+exports.shouldCheckSelect = shouldCheckSelect;
 exports.stroke = stroke;
 exports.strokeWidth = strokeWidth;
 exports.tableLayout = tableLayout;
@@ -9928,6 +10605,7 @@ exports.useListController = useListController;
 exports.useSelectColumn = useSelectColumn;
 exports.useSelectController = useSelectController;
 exports.useTableController = useTableController;
+exports.useTextareaColumn = useTextareaColumn;
 exports.useTreeConfig = useTreeConfig;
 exports.useTreeController = useTreeController;
 exports.useTreeInitialState = useTreeInitialState;