onekijs-ui 0.18.0 → 0.18.2

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

@@ -29,6 +29,7 @@ export type FormTableProps<T = any, I extends TableItem<T> = TableItem<T>, S ext
     onChange?: (value: T[]) => void;
     status?: ValidationStatus;
     size?: TshirtSize;
+    showAddButton?: boolean;
 };
 export type FormTableContext<T = any> = {
     tableName: string;

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" }))));
@@ -2834,7 +2841,8 @@ const style$3 = (props) => {
     grid-area: body;
     width: ${() => getBodyLength('width', 'small', props)};
     height: ${() => getBodyLength('height', 'small', props)};
-    overflow: auto;
+    overflow-x: auto;
+    overflow-y: scroll;
     transition: ${() => (props.panel ? 'transform 0.3s, width 0.3s, height 0.3s' : 'none')};
     transform: translate(${() => getTranslateX$2('small', props)}, ${() => getTranslateY$2('small', props)});
     @media only screen and (min-width: 768px) {
@@ -3706,7 +3714,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 +3725,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 +4480,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 +4526,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);
                             }
                         }
@@ -4746,6 +4770,7 @@ const ListBodyComponent = ({ autoRefresh, bodyRef, className, follow, height, it
                         nextItem = onekijsFramework.get(state.items, activeIndex.toString());
                         onItemClick(nextItem, activeIndex);
                     }
+                    e.preventDefault();
                     break;
                 case 'Escape':
                     if (onItemDeactivate && activeItem !== undefined) {
@@ -4771,26 +4796,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 +6287,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 +6405,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 +6420,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);
@@ -7112,6 +7145,7 @@ const selectStyle = ({ theme, clickable = true, searchable = true }) => {
 
         .o-select-option-data {
           ${flexGrow(1)}
+          ${whiteSpace('nowrap')}
         }
 
         .o-select-option-multiple-checkbox {
@@ -8962,7 +8996,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 +9022,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';
 
@@ -9756,7 +9790,7 @@ const FooterComponent = () => {
         React.createElement(TogglerIcon, { open: false, model: "plus", color: "currentColor" }),
         React.createElement("span", null, addLabel)));
 };
-const FormTableComponent = React.memo(({ addLabel = 'add', controller, value, onChange, className, name, format = 'auto', required, minLength, maxLength, ...props }) => {
+const FormTableComponent = React.memo(({ addLabel = 'add', controller, value, onChange, className, name, format = 'auto', required, minLength, maxLength, showAddButton = true, ...props }) => {
     const form = onekijsFramework.useForm();
     const field = form.fields[name];
     if (field) {
@@ -9840,7 +9874,7 @@ const FormTableComponent = React.memo(({ addLabel = 'add', controller, value, on
     if (!mounted)
         return null;
     return (React.createElement(DefaultFormTableContext.Provider, { value: formTableContext.current },
-        React.createElement(ControllerTableComponent, { controller: controller, className: addClassname('o-form-table', className), FooterComponent: tableService.dataSource ? undefined : FooterComponent, footer: tableService.dataSource ? false : true, NotFoundComponent: null, ...props })));
+        React.createElement(ControllerTableComponent, { controller: controller, className: addClassname('o-form-table', className), FooterComponent: tableService.dataSource ? undefined : FooterComponent, footer: tableService.dataSource || !showAddButton ? false : true, NotFoundComponent: null, ...props })));
 });
 FormTableComponent.displayName = 'FormTable';
 
@@ -10048,12 +10082,10 @@ const selectColumn = (id, options) => {
     if (Array.isArray(opts.dataSource) && Array.isArray(opts.dataSource[0])) {
         dataSource = opts.dataSource.map((entry) => entry[0]);
         const adapter = (data) => {
-            const item = opts.adapter ? opts.adapter(data) : {};
-            if (!item.text) {
-                const entry = opts.dataSource.find((entry) => entry[0] === data);
-                item.text = entry ? entry[1] : '';
-            }
-            return item;
+            const entry = opts.dataSource.find((entry) => entry[0] === data);
+            return {
+                text: entry ? entry[1] : ''
+            };
         };
         opts.adapter = adapter;
     }
@@ -11704,6 +11736,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;