onekijs-ui 0.15.5 → 0.15.7

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

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

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

@@ -9,7 +9,7 @@ declare class SelectService<T = any, I extends SelectItem<T> = SelectItem<T>, S
     setDefaultValue(value: T | T[] | null | undefined): Generator<void | Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | AnonymousObject<any>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | AnonymousObject<any>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>, void, unknown>;
     setValue(value: null | T | T[]): void;
     setUrl(url: string, query?: Query): void;
-    _buildItem(data: T | undefined, adaptee: unknown, context?: AnonymousObject): I;
+    _buildItem(data: T | null | undefined, adaptee: unknown, context?: AnonymousObject): I;
     _filterItem(item: I | undefined, query: Query, valid: boolean): Generator<I[] | Generator<void | AnonymousObject<any>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>;
     _setDefaultValue(value: T | T[] | null | undefined): void;
     _setValidDefaultValue(value: T | T[] | null): void;

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

@@ -1,8 +1,9 @@
+import { CollectionService } from 'onekijs-framework';
 import TreeService from '../tree/TreeService';
 import SelectService from './SelectService';
 import { TreeSelectItem, TreeSelectState } from './typings';
-declare class TreeSelectService<T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>, S extends TreeSelectState<T, I> = TreeSelectState<T, I>> extends SelectService<T, I, S> {
+declare class TreeSelectService<T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>, S extends TreeSelectState<T, I> = TreeSelectState<T, I>> extends CollectionService<T, I, S> {
 }
-interface TreeSelectService<T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>, S extends TreeSelectState<T, I> = TreeSelectState<T, I>> extends TreeService<T, I, S> {
+interface TreeSelectService<T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>, S extends TreeSelectState<T, I> = TreeSelectState<T, I>> extends SelectService<T, I, S>, TreeService<T, I, S> {
 }
 export default TreeSelectService;

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

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

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

@@ -21,7 +21,7 @@ export declare type FormSelectProps<T = any, I extends SelectItem<T> = SelectIte
     defaultValue?: T | T[] | null;
     FieldComponent?: React.FC<SelectProps<T, I>>;
 };
-export declare type SelectController<T, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>> = Collection<T, I, S> & {
+export declare type SelectController<T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>> = Collection<T, I, S> & {
     config?: SelectConfig<T, I>;
     check: () => void;
     defaultValue: T | T[] | null | undefined;
@@ -50,6 +50,7 @@ export interface SelectInputProps<T = any, I extends SelectItem<T> = SelectItem<
     searchable: boolean;
     clickable: boolean;
     minChars: number;
+    autoCompleteSearch: boolean;
 }
 export declare type SelectGroup = string | {
     text: string;
@@ -110,6 +111,7 @@ export declare type SelectConfig<T = any, I extends SelectItem<T> = SelectItem<T
     required?: boolean;
     sameWidth?: boolean;
     ListComponent?: React.FC<SelectListComponentProps<T, I>>;
+    autoCompleteSearch?: boolean;
 };
 export declare type SelectListComponentProps<T = any, I extends SelectItem<T> = SelectItem<T>> = CollectionListProps<T, I> & {
     optionsRef: React.RefObject<HTMLDivElement>;

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

@@ -12,7 +12,7 @@ declare class TreeService<T = any, I extends TreeItem<T> = TreeItem<T>, S extend
     initDb(dataSource: T[] | string | undefined): void;
     _adapt(data: T | null | undefined, context?: AnonymousObject): I;
     _addFilterExpanded(item: I): void;
-    _buildItem(data: T | undefined, adaptee: unknown, context?: AnonymousObject): I;
+    _buildItem(data: T | null | undefined, adaptee: unknown, context?: AnonymousObject): I;
     _clearFilterExpanded(): void;
     _delayChildrenLoading(delay_ms: number, item: I): Generator<I[] | import("redux-saga/effects").CallEffect<true>, void, unknown>;
     _execute(items: I[], query: LocalQuery, comparator: QuerySortComparator, comparators: AnonymousObject<QuerySortComparator>, searcher?: QuerySearcher<T>): I[];

package/dist/components/wizard/components/FormStep.d.ts

@@ -0,0 +1,4 @@
+import { FCC } from 'onekijs-framework';
+import { FormStepProps } from '../typings';
+declare const FormCard: FCC<FormStepProps>;
+export default FormCard;

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

@@ -11,6 +11,9 @@ export declare type StepProps = TabProps & {
     optional?: boolean;
     showTitle?: boolean;
 };
+export declare type FormStepProps = StepProps & {
+    name: string;
+};
 export declare type StepState = TabState & {
     optional: boolean;
 };

package/dist/index.d.ts

@@ -31,6 +31,7 @@ export { default as DashboardRight } from './components/dashboard/components/Das
 export { default as DashboardToggler } from './components/dashboard/components/DashboardToggler';
 export { DashboardService } from './components/dashboard/DashboardService';
 export { default as useDashboard } from './components/dashboard/hooks/useDashboard';
+export { default as FormStep } from './components/wizard/components/FormStep';
 export { useDashboardHorizontalPanel, useDashboardVerticalPanel, useDashoardBodyPanel, } from './components/dashboard/hooks/useDashboardPanel';
 export { DashboardServiceContext, default as useDashboardService, } from './components/dashboard/hooks/useDashboardService';
 export { DashboardStateContext, default as useDashboardState } from './components/dashboard/hooks/useDashboardState';

package/dist/index.js

@@ -1557,7 +1557,7 @@ const Card = styled__default["default"](CardComponent) `
   ${cardStyle}
 `;
 
-const FormCard = ({ name, disabled, visible, ...cardProps }) => {
+const FormCard$1 = ({ name, disabled, visible, ...cardProps }) => {
     const decorator = onekijsFramework.useFormDecorator(name);
     const form = onekijsFramework.useForm();
     const metadata = onekijsFramework.useFormMetadata(decorator.name);
@@ -2139,7 +2139,7 @@ const extractFieldLayoutProps = (props) => {
         'lgLabelWidth',
         'xlLabelWidth',
     ];
-    const fieldOptionsKeys = ['defaultValue', 'touchedOn', 'disabled', 'visible'];
+    const fieldOptionsKeys = ['defaultValue', 'touchedOn', 'disabled', 'visible', 'editable'];
     Object.keys(nonValidatorProps).forEach((k) => {
         if (fieldLayoutKeys.includes(k)) {
             fieldLayoutProps[k] = props[k];
@@ -3594,6 +3594,94 @@ const useDashboard = () => {
     return [DashboardRef.current, service];
 };
 
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const WizardServiceContext = React__default["default"].createContext(null);
+const useWizardService = () => {
+    return React.useContext(WizardServiceContext);
+};
+
+const WizardStateContext = React__default["default"].createContext(null);
+const useWizardState = () => {
+    return React.useContext(WizardStateContext);
+};
+
+const useStep = (props) => {
+    const service = useWizardService();
+    const state = useWizardState();
+    const step = state.members[state.membersIndex[props.uid]];
+    React.useEffect(() => {
+        if (step === undefined) {
+            service.initMember(Object.assign({ uid: props.uid }, props));
+        }
+    }, [props, service, step]);
+    return step;
+};
+
+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({
+        title,
+        active,
+        disabled,
+        visible,
+        closable,
+        icon,
+        loading: false,
+        optional,
+        touched: !forwardOnly,
+        touching: !forwardOnly,
+        uid: uid === undefined ? title : uid,
+    });
+    const fieldContainer = onekijsFramework.useFieldContainer({
+        onValidationChange: (touchedValidation, allValidation) => {
+            if (step) {
+                service.onValidationChange(step.uid, touchedValidation, allValidation);
+            }
+        },
+    });
+    const touched = step?.touched;
+    const touchAllFields = fieldContainer.touchAllFields;
+    const onEnter = (node) => {
+        node.style.opacity = '0';
+    };
+    const onEntering = (node) => {
+        setTimeout(() => {
+            node.style.opacity = '1';
+            node.style.transition = `opacity ${animate}ms ease-in-out`;
+        }, 0);
+    };
+    React.useEffect(() => {
+        if (touched) {
+            touchAllFields();
+        }
+    }, [touched, touchAllFields]);
+    if (!step || !step.active) {
+        return null;
+    }
+    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: addClassname('o-step-content', className) },
+                showTitle && React__default["default"].createElement("div", { className: "o-step-content-title" }, title),
+                children))));
+};
+
+const FormCard = ({ name, disabled, visible, ...stepProps }) => {
+    const decorator = onekijsFramework.useFormDecorator(name);
+    const metadata = onekijsFramework.useFormMetadata(decorator.name);
+    const service = useWizardService();
+    React.useEffect(() => {
+        const step = service.getMember(name);
+        if (step && metadata.visible !== undefined && step.visible !== metadata.visible) {
+            metadata.visible ? service.show(name) : service.hide(name);
+        }
+        if (step && metadata.disabled !== undefined && step.disabled !== metadata.disabled) {
+            metadata.disabled ? service.disable(name) : service.enable(name);
+        }
+    });
+    return React__default["default"].createElement(Step, { ...stepProps, uid: name });
+};
+
 const useDashboardHorizontalPanel = (area) => {
     const state = React.useContext(DashboardStateContext);
     return area === 'header' ? state.header : state.footer;
@@ -4557,7 +4645,7 @@ const StandardListComponent = ({ items, ItemComponent = ListItemComponent$1, Ite
         if (item?.loadingStatus === onekijsFramework.LoadingStatus.Loading) {
             return React__default["default"].createElement(ItemLoadingComponent, { key: `item-${index}` });
         }
-        if (!item || !item.data) {
+        if (!item || onekijsFramework.isItemFetching(item)) {
             return null;
         }
         return (React__default["default"].createElement(ItemComponent, { key: `item-${index}`, index: index, item: item, data: item.data, onClick: onItemClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ItemContentComponent: ItemContentComponent }));
@@ -6130,7 +6218,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, }) => {
+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, }) => {
     if (nullable === undefined) {
         nullable = !required;
     }
@@ -6171,6 +6259,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
         defaultValue,
         sameWidth,
         overscan,
+        autoCompleteSearch,
     };
     const id = React.useId();
     const loading = onekijsFramework.isCollectionLoading(controller);
@@ -6190,7 +6279,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             return controller.getItem(controller.state.active[0]);
         }
         else if (focus && search) {
-            const item = findSelectItem(controller, search.toString());
+            const item = autoCompleteSearch ? findSelectItem(controller, search.toString()) : controller.items[0];
             if (item === undefined && !onekijsFramework.isCollectionFetching(controller)) {
                 return onekijsFramework.get(controller, 'items.0');
             }
@@ -6202,7 +6291,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
         if (!multiple) {
             return controller.adapt(value);
         }
-    }, [focus, controller, value, multiple]);
+    }, [focus, controller, value, multiple, autoCompleteSearch]);
     const optionsRef = React.useRef(null);
     const update = React.useCallback(() => {
         if (optionsRef.current && onekijsFramework.get(service, 'config.sameWidth')) {
@@ -6288,7 +6377,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
     React.useEffect(() => {
         const search = controller.getSearch();
         if (open && focus && search && search !== previousSearchRef.current) {
-            const item = findSelectItem(controller, search.toString());
+            const item = autoCompleteSearch ? findSelectItem(controller, search.toString()) : controller.items[0];
             const activated = onekijsFramework.get(controller.state.active, '0');
             if (item !== undefined && !onekijsFramework.isCollectionFetching(controller)) {
                 previousSearchRef.current = search;
@@ -6297,7 +6386,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
                 }
             }
         }
-    }, [controller, focus, open, id]);
+    }, [controller, focus, open, id, autoCompleteSearch]);
     React.useEffect(() => {
         if (!multiple) {
             if (value) {
@@ -6511,7 +6600,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: 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(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(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 })))));
 };
@@ -7159,8 +7248,8 @@ let TreeService = class TreeService extends onekijsFramework.CollectionService {
             : treeAdaptee.children.map((child) => {
                 if (context !== undefined) {
                     context.level = level + 1;
-                    context.position = context.nextPosition;
-                    context.nextPosition = context.position + 1;
+                    context.position = context.nextPosition !== undefined ? context.nextPosition : undefined;
+                    context.nextPosition = context.position !== undefined ? context.position + 1 : undefined;
                 }
                 else {
                     context = {
@@ -7458,12 +7547,12 @@ TreeService = __decorate([
 ], TreeService);
 var TreeService$1 = TreeService;
 
-let TreeSelectService = class TreeSelectService extends SelectService$1 {
+let TreeSelectService = class TreeSelectService extends onekijsFramework.CollectionService {
 };
 TreeSelectService = __decorate([
     onekijsFramework.service
 ], TreeSelectService);
-onekijsFramework.applyMixins(TreeSelectService, [TreeService$1]);
+onekijsFramework.applyMixins(TreeSelectService, [SelectService$1, TreeService$1]);
 var TreeSelectService$1 = TreeSelectService;
 
 const useTreeSelectController = (dataSource, options = {}) => {
@@ -8708,7 +8797,7 @@ const TableBodyCellComponent = React__default["default"].memo((props) => {
             service.initCell(rowIndex, column.id, ref);
         }
     });
-    return (React__default["default"].createElement("div", { ref: ref, className: addClassname('o-table-body-cell', className), style: getCellWidth(column, fit, grow) }, props.item.data && React__default["default"].createElement(Component, { ...props, data: props.item.data })));
+    return (React__default["default"].createElement("div", { ref: ref, className: addClassname('o-table-body-cell', className), style: getCellWidth(column, fit, grow) }, props.item && React__default["default"].createElement(Component, { ...props, data: props.item.data })));
 });
 TableBodyCellComponent.displayName = 'TableCell';
 
@@ -9539,22 +9628,11 @@ const useFormTableContext = () => {
 const CheckboxCellComponent = (options) => {
     const CheckboxCellComponent = ({ item, column, rowIndex }) => {
         const { tableName } = useFormTableContext();
-        // const [validators] = extractValidators(options);
-        // const field = useField(`${tableName}.${rowIndex}.${column.id}`, validators, {
-        //   defaultValue: options.defaultValue ? options.defaultValue : false,
-        // });
-        // const validation = useValidation(`${tableName}.${rowIndex}.${column.id}`);
-        // const status = validation?.status;
-        // const message = validation?.message;
-        // return (
-        //   <>
-        //     <Checkbox {...options} {...field} className="o-table-checkbox" status={validation.status} />
-        //     {message && <FieldDescription content={message} className={`o-field-description-${status.toLowerCase()}`} />}
-        //   </>
-        // );
         const { size, ...checkboxOptions } = options;
+        // if the id is empty, it's a single table column and the value is the row itself
+        const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
-        return (React__default["default"].createElement(FormCheckbox, { layout: "table", ...checkboxOptions, name: `${tableName}.${rowIndex}.${column.id}`, className: addClassname('o-table-checkbox', className) }));
+        return (React__default["default"].createElement(FormCheckbox, { layout: "table", ...checkboxOptions, name: name, className: addClassname('o-table-checkbox', className) }));
     };
     CheckboxCellComponent.displayName = 'CheckboxCellComponent';
     return CheckboxCellComponent;
@@ -9576,7 +9654,9 @@ const InputCellComponent = (options) => {
     const InputCellComponent = ({ item, column, rowIndex }) => {
         const { tableName } = useFormTableContext();
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
-        return (React__default["default"].createElement(FormInput, { size: "small", layout: "table", ...options, name: `${tableName}.${rowIndex}.${column.id}`, className: addClassname('o-table-input', className) }));
+        // if the id is empty, it's a single table column and the value is the row itself
+        const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
+        return (React__default["default"].createElement(FormInput, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-input', className) }));
     };
     InputCellComponent.displayName = 'InputCellComponent';
     return InputCellComponent;
@@ -9648,8 +9728,9 @@ const SelectCellComponent = (options, broker) => {
         const { tableName } = useFormTableContext();
         const controller = useSelectController(options.dataSource, options);
         const service = controller.asService();
+        // if the id is empty, it's a single table column and the value is the row itself
+        const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
-        const name = `${tableName}.${rowIndex}.${column.id}`;
         React.useEffect(() => {
             broker.addSubscriber(name, service);
             return () => {
@@ -9794,8 +9875,10 @@ FormTextarea.displayName = 'FormTextarea';
 const TextareaCellComponent = (options) => {
     const TextareaCellComponent = ({ item, column, rowIndex }) => {
         const { tableName } = useFormTableContext();
+        // if the id is empty, it's a single table column and the value is the row itself
+        const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
         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) }));
+        return (React__default["default"].createElement(FormTextarea, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-textarea', className) }));
     };
     TextareaCellComponent.displayName = 'TextareaCellComponent';
     return TextareaCellComponent;
@@ -9900,8 +9983,9 @@ const SelectRowComponent = ({ item }) => {
 const FooterComponent = () => {
     const form = onekijsFramework.useForm();
     const { tableName, addLabel, maxLength } = useFormTableContext();
+    const isSingleColumnTable = useTableColumns().find((c) => c.id === '');
     const addRow = (e) => {
-        form.add(tableName);
+        form.add(tableName, isSingleColumnTable ? undefined : {});
         e.preventDefault();
     };
     const currentSize = (form.getValue(tableName) || []).length;
@@ -9991,8 +10075,17 @@ const StyledFormTableComponent = styled__default["default"](FormTableComponent)
   ${tableStyle}
 `;
 const FormTable = React__default["default"].memo((props) => {
+    let defaultValue = props.defaultValue;
+    if (defaultValue === undefined) {
+        let minLength = (props.minLength ?? props.min) || 0;
+        if (props.required && minLength < 1) {
+            minLength = 1;
+        }
+        const isSingleColumnTable = props.controller.columns.find((c) => c.id === '');
+        defaultValue = minLength > 0 ? Array(minLength).fill(isSingleColumnTable ? undefined : {}) : [];
+    }
     const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
-        defaultValue: props.defaultValue === undefined ? [] : props.defaultValue,
+        defaultValue,
     }, props));
     const Component = props.FieldComponent || StyledFormTableComponent;
     return (React__default["default"].createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -10054,17 +10147,6 @@ const Tag = styled__default["default"](TagComponent) `
   ${tagStyle}
 `;
 
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const WizardServiceContext = React__default["default"].createContext(null);
-const useWizardService = () => {
-    return React.useContext(WizardServiceContext);
-};
-
-const WizardStateContext = React__default["default"].createContext(null);
-const useWizardState = () => {
-    return React.useContext(WizardStateContext);
-};
-
 const StepTitle = ({ member, onActivate, index }) => {
     return (React__default["default"].createElement("div", { className: `o-step${member.active ? ' o-step-active' : ' o-step-inactive'}${member.disabled ? ' o-step-disabled' : ' o-step-enabled'}${member.visible ? ' o-step-visible' : ' o-step-hidden'}${member.touched || member.touching ? ' o-step-touched' : ' o-step-untouched'}${member.success ? ' o-step-success' : ''}${member.touchingWarning || (member.touched && member.warning) ? ' o-step-warning' : ''}${member.touchingError || (member.touched && member.error) ? ' o-step-error' : ''}${member.loading ? ' o-step-loading' : ''}`, onClick: () => onActivate(member) },
         member.icon,
@@ -10096,6 +10178,9 @@ const WizardContainer = ({ cancelLabel = 'Cancel', className, children, doneLabe
                 if (step.visible) {
                     indexRef.current++;
                 }
+                else {
+                    return null;
+                }
                 if (step.error !== undefined) {
                     errorRef.current.push({
                         stepIndex: indexRef.current,
@@ -10429,67 +10514,6 @@ const Wizard = styled__default["default"](WizardComponent) `
   ${wizardStyle}
 `;
 
-const useStep = (props) => {
-    const service = useWizardService();
-    const state = useWizardState();
-    const step = state.members[state.membersIndex[props.uid]];
-    React.useEffect(() => {
-        if (step === undefined) {
-            service.initMember(Object.assign({ uid: props.uid }, props));
-        }
-    }, [props, service, step]);
-    return step;
-};
-
-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({
-        title,
-        active,
-        disabled,
-        visible,
-        closable,
-        icon,
-        loading: false,
-        optional,
-        touched: !forwardOnly,
-        touching: !forwardOnly,
-        uid: uid === undefined ? title : uid,
-    });
-    const fieldContainer = onekijsFramework.useFieldContainer({
-        onValidationChange: (touchedValidation, allValidation) => {
-            if (step) {
-                service.onValidationChange(step.uid, touchedValidation, allValidation);
-            }
-        },
-    });
-    const touched = step?.touched;
-    const touchAllFields = fieldContainer.touchAllFields;
-    const onEnter = (node) => {
-        node.style.opacity = '0';
-    };
-    const onEntering = (node) => {
-        setTimeout(() => {
-            node.style.opacity = '1';
-            node.style.transition = `opacity ${animate}ms ease-in-out`;
-        }, 0);
-    };
-    React.useEffect(() => {
-        if (touched) {
-            touchAllFields();
-        }
-    }, [touched, touchAllFields]);
-    if (!step || !step.active) {
-        return null;
-    }
-    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: addClassname('o-step-content', className) },
-                showTitle && React__default["default"].createElement("div", { className: "o-step-content-title" }, title),
-                children))));
-};
-
 const WizardModalComponent = ({ title, doneLabel = 'Submit', ...props }) => {
     return (React__default["default"].createElement(Modal, { ...props },
         React__default["default"].createElement(Wizard, { ...props, title: title, doneLabel: doneLabel, inModal: true })));
@@ -11424,10 +11448,11 @@ exports.FieldLayout = FieldLayout;
 exports.FieldLayoutComponent = FieldLayoutComponent;
 exports.FileIcon = FileIcon;
 exports.FolderIcon = FolderIcon;
-exports.FormCard = FormCard;
+exports.FormCard = FormCard$1;
 exports.FormCheckbox = FormCheckbox;
 exports.FormInput = FormInput;
 exports.FormSelect = FormSelect$1;
+exports.FormStep = FormCard;
 exports.FormTable = FormTable;
 exports.FormTextarea = FormTextarea;
 exports.Input = Input;