onekijs-ui 0.20.7 → 0.20.9

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

@@ -80,11 +80,11 @@ export declare const getIconDivProps: (props: IconProps) => {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
-    'aria-autocomplete'?: "none" | "inline" | "both" | "list" | undefined;
+    'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
     'aria-braillelabel'?: string | undefined;
     'aria-brailleroledescription'?: string | undefined;
     'aria-busy'?: (boolean | "true" | "false") | undefined;
@@ -104,7 +104,7 @@ export declare const getIconDivProps: (props: IconProps) => {
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "true" | "false" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;

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

@@ -1,20 +1,22 @@
-import { AnonymousObject, CollectionFetcherResult, CollectionService, Query } from 'onekijs-framework';
+import { AnonymousObject, CollectionFetcherResult, CollectionService, CollectionStatus, Primitive, Query } from 'onekijs-framework';
 import { SelectConfig, SelectItem, SelectState } from './typings';
 declare class SelectService<T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>> extends CollectionService<T, I, S> {
     config: SelectConfig<T, I> | undefined;
     protected lastCheckQuery: Query | undefined;
     get defaultValue(): T | T[] | null | undefined;
     get defaultValueLoading(): boolean | undefined;
-    check(): Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>;
+    check(): Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | CollectionFetcherResult<T> | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | CollectionFetcherResult<T> | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>;
+    get status(): CollectionStatus;
     setData(data: T[], query?: Query): void;
-    setDefaultValue(value: T | T[] | null | undefined): Generator<void | Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>, void, unknown>;
+    setDefaultValue(value: T | T[] | null | undefined): Generator<void | Generator<void | import("redux-saga/effects").AllEffect<import("redux-saga/effects").CallEffect<Generator<I[] | Generator<void | CollectionFetcherResult<T> | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>>> | import("redux-saga/effects").AllEffect<Generator<I[] | Generator<void | CollectionFetcherResult<T> | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>> | import("redux-saga/effects").CallEffect<void>, void, (I | undefined)[]>, void, unknown>;
     setDefaultValueLoading(loading: boolean): void;
     setItemWidth(_item: I, value: number): void;
     setValue(value: null | T | T[]): void;
     setUrl(url: string, query?: Query): void;
     _buildItem(data: T | null | undefined, adaptee: unknown, context?: AnonymousObject): I;
-    _filterItem(item: I | undefined, query: Query, valid: boolean): Generator<I[] | Generator<void | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | CollectionFetcherResult<T> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>;
+    _filterItem(item: I | undefined, query: Query, valid: boolean): Generator<I[] | Generator<void | CollectionFetcherResult<T> | import("redux-saga/effects").CancelEffect | import("redux-saga/effects").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | Promise<CollectionFetcherResult<T> | undefined>, CollectionFetcherResult<T>, (import("redux-saga").Task<any> | null) & CollectionFetcherResult<T> & (CollectionFetcherResult<T> | undefined)>, I | undefined, I[] & CollectionFetcherResult<T>>;
     _compareItem(a: I | undefined, b: I | undefined): boolean;
+    _doSearch(search: Primitive | undefined): boolean;
     _setDefaultValue(value: T | T[] | null | undefined): void;
     _setValidDefaultValue(value: T | T[] | null): void;
     _setInvalidItems(invalidItems: I[]): void;

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

@@ -5,6 +5,7 @@ export declare class WizardService<M extends StepState = StepState, S extends Wi
     activatePrevious(): void;
     getCurrentStep(): M | undefined;
     getNextStep(): M | undefined;
+    getLastStep(): M | undefined;
     getPreviousStep(): M | undefined;
     isFirstStep(): boolean;
     isLastStep(): boolean;

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

@@ -1,5 +1,5 @@
 import { AnyFunction, FCC } from 'onekijs-framework';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { GridSize } from '../grid/typings';
 import { ModalProps } from '../modal/typings';
 import { TabProps, TabsProps, TabsState, TabState, TabTitleProps } from '../tab/typings';
@@ -25,13 +25,14 @@ export type StepTitleProps<M extends StepState = StepState> = TabTitleProps<M> &
 export type UseWizardController = (props: WizardProps) => WizardService;
 export type WizardModalProps<M extends StepState = StepState> = ModalProps & WizardProps<M>;
 export type WizardProps<M extends StepState = StepState> = Omit<TabsProps, 'controller' | 'Component' | 'TitleComponent'> & {
-    cancelLabel?: string;
+    cancelLabel?: ReactNode;
     controller?: WizardService;
     Component?: FCC<Omit<WizardProps, 'Component'>>;
-    doneLabel?: string;
+    doneLabel?: ReactNode;
+    reviewLabel?: ReactNode;
     forwardOnly?: boolean;
     inModal?: boolean;
-    nextLabel?: string;
+    nextLabel?: ReactNode;
     previousLabel?: string;
     stepSize?: GridSize;
     onCancel?: AnyFunction;
@@ -40,6 +41,7 @@ export type WizardProps<M extends StepState = StepState> = Omit<TabsProps, 'cont
     onPrevious?: (currentStep: M, previousStep: M) => boolean;
     title?: ReactNode;
     TitleComponent?: React.FC<StepTitleProps>;
+    hasSummaryStep?: boolean;
 };
 export type WizardState<M extends StepState = StepState> = TabsState<M> & Pick<WizardProps<M>, 'onCancel' | 'onDone' | 'onNext' | 'onPrevious'> & {
     forwardOnly?: boolean;

package/dist/index.d.ts

@@ -202,6 +202,10 @@ export { defaultTreeQueryEngine } from './components/tree/util';
 export { default as Wizard } from './components/wizard';
 export { default as WizardModal } from './components/wizard/WizardModal';
 export { WizardService } from './components/wizard/WizardService';
+export { default as useWizardService } from './components/wizard/hooks/useWizardService';
+export { default as useWizardController } from './components/wizard/hooks/useWizardController';
+export { default as useStep } from './components/wizard/hooks/useStep';
+export { useWizardState } from './components/wizard/hooks/useWizardState';
 export { default as WizardSummary } from './components/wizard/WizardSummary';
 export { default as ControlledWizardComponent } from './components/wizard/components/ControlledWizardComponent';
 export { default as FormStep } from './components/wizard/components/FormStep';

package/dist/index.js

@@ -937,6 +937,7 @@ const AccordionPanel = ({ title, initialActive, initialExpand, children, Compone
 
 const ButtonComponent = React.forwardRef((props, ref) => {
     const { kind, pattern, className, loading, IconComponent, onClick, type = 'button', ...buttonProps } = props;
+    const buttonRef = React.useRef(null);
     let classNames = addClassname('o-button', className);
     if (loading) {
         classNames = addClassname('o-button-loading', classNames);
@@ -944,10 +945,20 @@ const ButtonComponent = React.forwardRef((props, ref) => {
     if (props.disabled) {
         classNames = addClassname('o-button-disabled', classNames);
     }
-    return (React.createElement("span", { className: classNames, onClick: onClick, ref: ref },
+    const handleClick = (e) => {
+        if (!onClick) {
+            if (buttonRef.current) {
+                buttonRef.current.click();
+            }
+        }
+        else {
+            onClick(e);
+        }
+    };
+    return (React.createElement("span", { className: classNames, onClick: handleClick, ref: ref },
         loading && React.createElement(LoadingIcon, { onClick: undefined, color: "currentColor" }),
         !loading && IconComponent && React.createElement(IconComponent, { ...props, onClick: undefined, className: "o-button-icon" }),
-        React.createElement("button", { ...buttonProps, type: type, className: "o-button-content" })));
+        React.createElement("button", { ref: buttonRef, ...buttonProps, type: type, className: "o-button-content" })));
 });
 ButtonComponent.displayName = 'Button';
 
@@ -6430,6 +6441,12 @@ let SelectService = class SelectService extends onekijsFramework.CollectionServi
         }
         yield call(this._setInvalidItems, invalidItems);
     }
+    get status() {
+        if (!this._doSearch(this.state.search)) {
+            return onekijsFramework.LoadingStatus.NotReady;
+        }
+        return super.status;
+    }
     setData(data, query) {
         this.lastCheckQuery = undefined;
         super.setData(data, query);
@@ -6525,6 +6542,16 @@ let SelectService = class SelectService extends onekijsFramework.CollectionServi
         }
         return a.id === b.id;
     }
+    _doSearch(search) {
+        const minChars = this.config?.minChars || 0;
+        if (search === undefined) {
+            search = '';
+        }
+        if (typeof search === 'string' && search.length < minChars) {
+            return false;
+        }
+        return true;
+    }
     _setDefaultValue(value) {
         this.state.defaultValueLoading = false;
         this.state.defaultValue = value;
@@ -11290,10 +11317,11 @@ const StepTitle = ({ member, onActivate, index }) => {
             `${member.title}`)));
 };
 
-const WizardContainer = ({ cancelLabel = 'Cancel', className, children, doneLabel = 'Submit', nextLabel = 'Next', onCancel, onDone, previousLabel = 'Previous', title, stepSize = 3, TitleComponent = StepTitle, }) => {
+const WizardContainer = ({ cancelLabel = 'Cancel', className, children, doneLabel = 'Submit', nextLabel = 'Next', onCancel, onDone, previousLabel = 'Previous', title, stepSize = 3, TitleComponent = StepTitle, forwardOnly = true, hasSummaryStep = false, reviewLabel = 'Review and Submit' }) => {
     const classNames = addClassname('o-wizard', className);
     const state = useWizardState();
     const service = useWizardService();
+    const lastStepUid = service.getLastStep()?.uid;
     const activate = React.useCallback((step) => {
         if (!step || step.disabled || (!step.touched && !step.touching))
             return;
@@ -11330,7 +11358,7 @@ const WizardContainer = ({ cancelLabel = 'Cancel', className, children, doneLabe
                 onCancel && (React.createElement(Button, { kind: "primary", pattern: "flat", className: "o-wizard-control-button", type: "button", onClick: () => onCancel() }, cancelLabel)),
                 !service.isFirstStep() && (React.createElement(Button, { kind: "primary", pattern: "outline", className: "o-wizard-control-button", onClick: () => service.previous(), type: "button" }, previousLabel)),
                 !service.isLastStep() && (React.createElement(Button, { kind: service.isCurrentStepInVisibleError() ? 'danger' : 'primary', pattern: "solid", className: "o-wizard-control-button", disabled: service.isCurrentStepInVisibleError(), onClick: () => service.next(), type: "button" }, nextLabel)),
-                service.isLastStep() && (React.createElement(SubmitButton, { kind: errorRef.current.length > 0 ? 'danger' : 'success', pattern: "solid", className: "o-wizard-control-button", disabled: errorRef.current.length > 0, onClick: onDone, type: "button", showErrors: true }, doneLabel))))));
+                (service.isLastStep() || !forwardOnly) && (React.createElement(SubmitButton, { kind: errorRef.current.length > 0 ? 'danger' : 'success', pattern: "solid", className: "o-wizard-control-button", disabled: errorRef.current.length > 0, onClick: (hasSummaryStep && !service.isLastStep() && lastStepUid) ? () => service.activate(lastStepUid) : onDone, type: "button", showErrors: true }, (hasSummaryStep && !service.isLastStep()) ? reviewLabel : doneLabel))))));
 };
 
 const ControlledWizardComponent = ({ Component = WizardContainer, controller, ...props }) => {
@@ -11364,6 +11392,9 @@ exports.WizardService = class WizardService extends TabsService {
         }
         return undefined;
     }
+    getLastStep() {
+        return this.state.members.filter((m) => m.visible && !m.disabled).slice(-1)[0];
+    }
     getPreviousStep() {
         for (let i = this.getCurrentActiveIndex() - 1; i >= 0; i--) {
             const step = this.state.members[i];
@@ -11672,6 +11703,18 @@ const WizardModal = styled(WizardModalComponent) `
   ${wizardModalStyle}
 `;
 
+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 WizardSummaryComponent = ({ className }) => {
     const form = onekijsFramework.useForm();
     const tree = Object.values(form.getDisplayerTree());
@@ -11685,18 +11728,6 @@ const WizardSummary = styled(WizardSummaryComponent) `
   ${wizardSummaryStyle}
 `;
 
-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, onTouch, help, }) => {
     const { animate, forwardOnly } = useWizardState();
     const step = useStep({
@@ -12166,7 +12197,7 @@ const baseTheme = (customTheme = {}) => {
                 '4xl': '2.25rem',
                 '5xl': '3rem',
                 '6xl': '4rem',
-                default: '.0875rem',
+                default: '.875rem',
             },
             spacings: {
                 xs: '-0.05em',
@@ -13157,6 +13188,7 @@ exports.useNumberColumn = useInputColumn;
 exports.useSelectColumn = useSelectColumn;
 exports.useSelectController = useSelectController;
 exports.useSelectService = useSelectService;
+exports.useStep = useStep;
 exports.useTab = useTab;
 exports.useTableController = useTableController;
 exports.useTableService = useTableService;
@@ -13172,6 +13204,9 @@ exports.useTreeItemContext = useTreeItemContext;
 exports.useTreeSelectController = useTreeSelectController;
 exports.useTreeService = useTreeService;
 exports.useTreeState = useTreeState;
+exports.useWizardController = useWizardController;
+exports.useWizardService = useWizardService;
+exports.useWizardState = useWizardState;
 exports.userSelect = userSelect;
 exports.verticalAlign = verticalAlign;
 exports.visibility = visibility;