onekijs-ui 0.20.8 → 0.21.0

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

@@ -80,7 +80,7 @@ export declare const getIconDivProps: (props: IconProps) => {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "url" | "text" | "none" | "email" | "tel" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -94,7 +94,7 @@ export declare const getIconDivProps: (props: IconProps) => {
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
+    'aria-current'?: boolean | "step" | "time" | "date" | "true" | "false" | "page" | "location" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | 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" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "listbox" | "grid" | "true" | "false" | "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").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | 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").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | 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 | 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)[]>;
+    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").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | 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").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | 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 | 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>;
     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").ForkEffect<Generator<void | import("redux-saga/effects").CallEffect<true>, void, unknown>> | import("redux-saga/effects").CancelEffect | 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 | 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>>;
     _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/slider/components/SliderComponent.d.ts

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

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

@@ -0,0 +1,2 @@
+declare const Resizer: import("styled-components").StyledComponent<import("onekijs-framework").FCC<import("./typings").SliderProps>, import("styled-components").DefaultTheme, {}, never>;
+export default Resizer;

package/dist/components/slider/style.d.ts

@@ -0,0 +1,3 @@
+import { ComponentStyle } from '../../styles/typings';
+import { SliderProps } from './typings';
+export declare const sliderStyle: ComponentStyle<SliderProps>;

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

@@ -0,0 +1,9 @@
+import { ColorPropertyTheme, SizePropertyTheme, TLength } from '../../styles/typings';
+import { Property } from 'csstype';
+export type SliderProps = {
+    anchorColor: ColorPropertyTheme | Property.BackgroundColor;
+    backgroundColor: ColorPropertyTheme | Property.BackgroundColor;
+    fillColor: ColorPropertyTheme | Property.BackgroundColor;
+    size: 'small' | 'medium' | 'large' | 'extra_large';
+    width: SizePropertyTheme | Property.Width<TLength>;
+};

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

@@ -5227,10 +5227,10 @@ var LoadingItem$1 = styled(LoadingItem) `
 
   @keyframes skeleton-loading {
     0% {
-      background-color: hsl(200, 20%, 95%);
+      ${backgroundColor('lightest')};
     }
     100% {
-      background-color: hsl(200, 20%, 80%);
+      ${backgroundColor('light')};
     }
   }
 `;
@@ -6194,6 +6194,7 @@ const notifcationsStyle = ({ position: pos = 'bottom-right' }) => {
       &.o-notification-error {
         ${backgroundColor('red-100')}
         ${borderColor('red-200')}
+        ${color('danger')}
         .o-notification-timer {
           ${color('danger')}
         }
@@ -6201,6 +6202,7 @@ const notifcationsStyle = ({ position: pos = 'bottom-right' }) => {
       &.o-notification-success {
         ${backgroundColor('green-0')}
         ${borderColor('green-100')}
+        ${color('green-500')}
         .o-notification-timer {
           ${color('green-500')}
         }
@@ -6208,6 +6210,7 @@ const notifcationsStyle = ({ position: pos = 'bottom-right' }) => {
       &.o-notification-info {
         ${backgroundColor('blue-0')}
         ${borderColor('blue-200')}
+        ${color('blue-500')}
         .o-notification-timer {
           ${color('blue-500')}
         }
@@ -6215,6 +6218,7 @@ const notifcationsStyle = ({ position: pos = 'bottom-right' }) => {
       &.o-notification-warning {
         ${backgroundColor('yellow-100')}
         ${borderColor('yellow-200')}
+         ${color('warning')}
         .o-notification-timer {
           ${color('warning')}
         }
@@ -6441,6 +6445,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);
@@ -6536,6 +6546,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;
@@ -11301,10 +11321,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;
@@ -11341,7 +11362,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 }) => {
@@ -11375,6 +11396,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];
@@ -11683,6 +11707,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());
@@ -11696,18 +11732,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({
@@ -13168,6 +13192,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;
@@ -13183,6 +13208,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;