onekijs-ui 0.18.0 → 0.18.1

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

@@ -5,15 +5,15 @@ declare class SelectService<T = any, I extends SelectItem<T> = SelectItem<T>, S
     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)[]>;
     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;
     _setDefaultValue(value: T | T[] | null | undefined): void;
     _setValidDefaultValue(value: T | T[] | null): void;

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

@@ -7,4 +7,6 @@ export interface TooltipProps extends Config {
     popperOptions?: PopperOptions;
     kind?: ColorPropertyTheme;
     delayHide?: number;
+    delayShow?: number;
+    attachToBody?: boolean;
 }

package/dist/index.d.ts

@@ -52,6 +52,7 @@ export { default as Row } from './components/grid/Row';
 export { colStyle, rowStyle } from './components/grid/style';
 export { ColProps, GridSize, RowProps } from './components/grid/typings';
 export { default as CloseAllIcon } from './components/icon/CloseAllIcon';
+export { default as HelpIcon } from './components/icon/HelpIcon';
 export { default as CrossIcon } from './components/icon/CrossIcon';
 export { default as ErrorIcon } from './components/icon/ErrorIcon';
 export { default as FileIcon } from './components/icon/FileIcon';

package/dist/index.js

@@ -1187,9 +1187,7 @@ const DropdownComponent = ({ animationTimeout = 0, attachToBody = false, classNa
         React.createElement(reactTransitionGroup.CSSTransition, { in: open, classNames: "o-dropdown", timeout: animationTimeout, mountOnEnter: true, appear: false, unmountOnExit: true, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExited: onExited, onExiting: onExiting },
             React.createElement("div", { className: "o-dropdown" }, children))));
     if (attachToBody) {
-        return React.createElement(React.Fragment, null,
-            " ",
-            ReactDOM.createPortal(element, document.body));
+        return React.createElement(React.Fragment, null, ReactDOM.createPortal(element, document.body));
     }
     else {
         return React.createElement(React.Fragment, null, element);
@@ -1246,11 +1244,12 @@ const DropdownButton = styled(DropdownButtonComponent) `
 `;
 
 const TooltipComponent = (props) => {
-    const { content, className, popperOptions, children, delayHide = 300, ...tooltipConfig } = props;
+    const { content, className, popperOptions, children, delayHide = 300, delayShow = 200, attachToBody, ...tooltipConfig } = props;
     const [show, setShow] = React.useState(true);
     const tooltipOptions = Object.assign({
         interactive: true,
         delayHide,
+        delayShow,
     }, tooltipConfig);
     const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible } = reactPopperTooltip.usePopperTooltip(tooltipOptions, popperOptions);
     const { style: containerStyle, ...containerProps } = getTooltipProps({ className: 'o-tooltip-container' });
@@ -1274,11 +1273,19 @@ const TooltipComponent = (props) => {
             document.removeEventListener('tooltipVisible', listener);
         };
     }, [uid]);
-    return (React.createElement("div", { className: classNames, ref: setTriggerRef },
-        children,
-        show && visible && content && (React.createElement("div", { ref: setTooltipRef, style: containerStyle, ...containerProps },
-            React.createElement("div", { style: arrowStyle, ...arrowProps }),
-            content))));
+    const element = (React.createElement("div", { ref: setTooltipRef, style: containerStyle, ...containerProps },
+        React.createElement("div", { style: arrowStyle, ...arrowProps }),
+        content));
+    if (attachToBody) {
+        return (React.createElement("div", { ref: setTriggerRef },
+            children,
+            show && visible && content && ReactDOM.createPortal(React.createElement("div", { className: classNames, style: { position: 'absolute', width: '100%' } }, element), document.body)));
+    }
+    else {
+        return (React.createElement("div", { className: classNames, ref: setTriggerRef },
+            children,
+            show && visible && content && element));
+    }
 };
 
 const sizeFormatter = (type, value, theme) => {
@@ -1426,7 +1433,7 @@ const tooltipStyle = ({ kind = 'secondary', theme }) => {
         }
       }
     }
-    .o-tooltip-arrow {
+    &.o-tooltip-arrow, .o-tooltip-arrow {
       ${height('1rem')}
       ${width('1rem')}
       ${position('absolute')}
@@ -1833,7 +1840,7 @@ const Row = styled(RowComponent) `
 `;
 
 const IconComponent$6 = ({ className, onClick, style }) => {
-    return (React.createElement("div", { className: className, onClick: onClick, style: style },
+    return (React.createElement("div", { className: addClassname('o-icon-help', className), onClick: onClick, style: style },
         React.createElement("svg", { className: "o-icon-help-svg", viewBox: "0 0 512 512" },
             React.createElement("path", { d: "M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" }),
             React.createElement("path", { d: "M235 339h42v42h-42zM276.8 318h-41.6c0-67 62.4-62.2 62.4-103.8 0-22.9-18.7-41.7-41.6-41.7S214.4 192 214.4 214h-41.6c0-46 37.2-83 83.2-83s83.2 37.1 83.2 83.1c0 52-62.4 57.9-62.4 103.9z" }))));
@@ -3706,7 +3713,7 @@ var SuccessIcon = styled(SuccessIconComponent) `
 `;
 
 const InputComponent = (props) => {
-    const { className, size = 'medium', status, PrefixComponent, SuffixComponent, onFocus: forwardFocus, onBlur: forwardBlur, ...inputProps } = props;
+    const { className, size = 'medium', status, PrefixComponent, SuffixComponent, onFocus: forwardFocus, onBlur: forwardBlur, onChange: forwardChange, value, ...inputProps } = props;
     const [focus, setFocus] = React.useState(false);
     const classNames = addClassname(`o-input o-input-size-${size}${focus ? ' o-input-focus' : ''}${status ? ' o-input-status-' + status.toLowerCase() : ''}`, className);
     const onFocus = (e) => {
@@ -3717,9 +3724,21 @@ const InputComponent = (props) => {
         setFocus(false);
         forwardBlur && forwardBlur(e);
     };
+    const ref = React.useRef(null);
+    const selectorRef = React.useRef();
+    const onChange = (e) => {
+        selectorRef.current = e.target.selectionStart;
+        forwardChange && forwardChange(e);
+    };
+    React.useEffect(() => {
+        if (selectorRef.current !== undefined && selectorRef.current !== null && ref.current) {
+            ref.current.setSelectionRange(selectorRef.current, selectorRef.current);
+            selectorRef.current = undefined;
+        }
+    }, [value]);
     return (React.createElement("div", { className: classNames },
         PrefixComponent && React.createElement(PrefixComponent, { ...props, className: "o-input-prefix" }),
-        React.createElement("input", { className: "o-input-field", ...inputProps, onFocus: onFocus, onBlur: onBlur }),
+        React.createElement("input", { className: "o-input-field", ...inputProps, ref: ref, onFocus: onFocus, onBlur: onBlur, onChange: value === undefined ? undefined : onChange, value: value }),
         SuffixComponent && React.createElement(SuffixComponent, { ...props, className: "o-input-suffix" })));
 };
 InputComponent.displayName = 'InputComponent';
@@ -4460,7 +4479,7 @@ const useListView = ({ controller, height, itemHeight = defaultItemHeight, overs
                         let to;
                         const first = Math.max(0, lastVirtualItemIndex - increment);
                         if (lastVirtualItemIndex > 0) {
-                            let slice = state.items.slice(Math.max(0, lastVirtualItemIndex - increment), lastVirtualItemIndex);
+                            let slice = state.items.slice(first, lastVirtualItemIndex);
                             if (slice.length < lastVirtualItemIndex - first) {
                                 const arr = new Array(lastVirtualItemIndex - first);
                                 arr.splice(arr.length - slice.length, slice.length, ...slice);
@@ -4506,6 +4525,10 @@ const useListView = ({ controller, height, itemHeight = defaultItemHeight, overs
                                 to = offset + increment;
                             }
                             if (from !== undefined && to !== undefined && to > from) {
+                                from = Math.max(0, from);
+                                if (state.total !== undefined) {
+                                    to = Math.min(state.total, to);
+                                }
                                 controller.load(to - from, from, true);
                             }
                         }
@@ -4771,26 +4794,26 @@ const ListBodyComponent = ({ autoRefresh, bodyRef, className, follow, height, it
     });
     React.useEffect(() => {
         const atBottom = () => {
-            if (bodyRef && bodyRef.current) {
-                const sh = bodyRef.current.scrollHeight;
-                const st = bodyRef.current.scrollTop;
-                const oh = bodyRef.current.offsetHeight;
+            const ref = parentRef ? parentRef : bodyRef;
+            if (ref && ref.current) {
+                const sh = ref.current.scrollHeight;
+                const st = ref.current.scrollTop;
+                const oh = ref.current.offsetHeight;
                 if (oh === 0 || st === sh - oh)
                     return true;
             }
             return false;
         };
         if (tail && scrollToIndex && totalSize && bodyRef && bodyRef.current) {
-            const lastScrollTop = tailRef.current.lastScrollTop;
             tailRef.current.lastScrollTop = bodyRef.current.scrollTop;
-            if (tailRef.current.applyTail === true &&
-                lastScrollTop > bodyRef.current.scrollTop &&
-                (mouseRef.current || wheelRef.current)) {
+            if (mouseRef.current || wheelRef.current) {
                 tailRef.current.applyTail = false;
             }
             else if (tailRef.current.applyTail === true || atBottom()) {
                 tailRef.current.applyTail = true;
-                scrollToIndex(state.total ? state.total - 1 : state.items ? state.items.length - 1 : 0);
+                scrollToIndex(state.total ? state.total - 1 : state.items ? state.items.length - 1 : 0, {
+                    align: 'start',
+                });
             }
             wheelRef.current = false;
         }
@@ -6262,7 +6285,7 @@ const SelectOptionComponent = (props) => {
     return (React.createElement(React.Fragment, null,
         displayGroup && React.createElement(OptionGroupComponent, { ...props }),
         React.createElement("div", { className: classNames, onClick: () => onItemClick(item, index), onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index) },
-            React.createElement("div", { ref: ref },
+            React.createElement("div", { style: { display: 'flex' }, ref: ref },
                 service.config?.multiple && (React.createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => onItemClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox" })),
                 React.createElement(OptionContentComponent, { ...props, onClick: () => onItemClick(item, index) })))));
 };
@@ -6380,8 +6403,13 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
     const showActiveRef = React.useRef(false);
     const proxyItem = React.useMemo(() => {
         const search = controller.getSearch();
-        if (showActiveRef.current && controller.state.active && controller.state.active.length > 0) {
-            return controller.getItem(controller.state.active[0]);
+        const active = controller.state.active;
+        const selected = controller.state.selected;
+        if (showActiveRef.current && active && active.length > 0) {
+            if (multiple && selected && selected.find((i) => i === active[0])) {
+                return undefined;
+            }
+            return controller.getItem(active[0]);
         }
         else if (focus && search) {
             const item = autoCompleteSearch ? findSelectItem(controller, search.toString()) : controller.items[0];
@@ -6390,8 +6418,11 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             }
             return item;
         }
-        else if (controller.state.active && controller.state.active.length > 0) {
-            return controller.getItem(controller.state.active[0]);
+        else if (active && active.length > 0) {
+            if (multiple && selected && selected.find((i) => i === active[0])) {
+                return undefined;
+            }
+            return controller.getItem(active[0]);
         }
         if (!multiple) {
             return controller.adapt(value);
@@ -8962,7 +8993,7 @@ const TableBodyComponent = ({ className, tableRef, contentRef }) => {
     const itemHeight = React.useCallback(() => {
         return 20;
     }, []);
-    const { items, isVirtual, totalSize, virtualItems, measure } = useListView({
+    const { items, isVirtual, totalSize, virtualItems, measure, scrollToIndex } = useListView({
         controller: service,
         height: height,
         ref: parentRef || tableRef,
@@ -8988,7 +9019,7 @@ const TableBodyComponent = ({ className, tableRef, contentRef }) => {
     if (service.status === onekijsFramework.LoadingStatus.Loaded && items.length === 0 && NotFoundComponent) {
         return React.createElement(NotFoundComponent, null);
     }
-    return (React.createElement(ListBodyComponent, { autoRefresh: autoRefresh, className: addClassname('o-table-body', className), follow: follow, height: height, ItemComponent: ItemComponentRef.current, items: items, onItemSelect: onRowClick, onItemHighlight: onRowEnter, onItemUnhighlight: onRowLeave, parentRef: parentRef || tableRef, bodyRef: contentRef, service: service, state: state, totalSize: totalSize, tail: tail, virtualItems: isVirtual ? virtualItems : undefined }));
+    return (React.createElement(ListBodyComponent, { autoRefresh: autoRefresh, className: addClassname('o-table-body', className), follow: follow, height: height, ItemComponent: ItemComponentRef.current, items: items, onItemSelect: onRowClick, onItemHighlight: onRowEnter, onItemUnhighlight: onRowLeave, parentRef: parentRef || tableRef, bodyRef: contentRef, service: service, state: state, totalSize: totalSize, tail: tail, virtualItems: isVirtual ? virtualItems : undefined, scrollToIndex: scrollToIndex }));
 };
 TableBodyComponent.displayName = 'TableBody';
 
@@ -11704,6 +11735,7 @@ exports.FormSelect = FormSelect$1;
 exports.FormStep = FormCard;
 exports.FormTable = FormTable;
 exports.FormTextarea = FormTextarea;
+exports.HelpIcon = HelpIcon;
 exports.Input = Input;
 exports.InputCellComponent = InputCellComponent;
 exports.InputComponent = InputComponent;