onekijs-ui 0.16.2 → 0.16.3

package/dist/index.module.js

@@ -719,8 +719,8 @@ const iconCircleKeyFrame = keyframes `
     transform: rotate(360deg);
   }
 `;
-var LoadingIcon = styled(IconComponent$7) `
-  ${({ width: cssWidth = '16px', height: cssHeight = '16px', color: cssColor = 'primary' }) => css `
+const iconStyle = ({ width: cssWidth = '16px', height: cssHeight = '16px', color: cssColor = 'primary', }) => {
+    return css `
     height: ${cssHeight};
     width: ${cssWidth};
     display: inline-flex;
@@ -739,7 +739,10 @@ var LoadingIcon = styled(IconComponent$7) `
       stroke-width: 10px;
       transform-origin: 50% 50%;
     }
-  `}
+  `;
+};
+var LoadingIcon = styled(IconComponent$7) `
+  ${iconStyle}
 `;
 
 const toDegree = (position) => {
@@ -1235,6 +1238,7 @@ const DropdownButton = styled(DropdownButtonComponent) `
 
 const TooltipComponent = (props) => {
     const { content, className, popperOptions, children, delayHide = 300, ...tooltipConfig } = props;
+    const [show, setShow] = useState(true);
     const tooltipOptions = Object.assign({
         interactive: true,
         delayHide,
@@ -1243,9 +1247,27 @@ const TooltipComponent = (props) => {
     const { style: containerStyle, ...containerProps } = getTooltipProps({ className: 'o-tooltip-container' });
     const { style: arrowStyle, ...arrowProps } = getArrowProps({ className: 'o-tooltip-arrow' });
     const classNames = addClassname('o-tooltip', className);
+    const uid = useId();
+    useEffect(() => {
+        if (visible) {
+            const event = new CustomEvent('tooltipVisible', {
+                detail: uid,
+            });
+            document.dispatchEvent(event);
+        }
+    }, [visible, uid]);
+    useEffect(() => {
+        const listener = (e) => {
+            setShow(e.detail === uid);
+        };
+        document.addEventListener('tooltipVisible', listener);
+        return () => {
+            document.removeEventListener('tooltipVisible', listener);
+        };
+    }, [uid]);
     return (React.createElement("div", { className: classNames, ref: setTriggerRef },
         children,
-        visible && content && (React.createElement("div", { ref: setTooltipRef, style: containerStyle, ...containerProps },
+        show && visible && content && (React.createElement("div", { ref: setTooltipRef, style: containerStyle, ...containerProps },
             React.createElement("div", { style: arrowStyle, ...arrowProps }),
             content))));
 };
@@ -5676,7 +5698,9 @@ let SelectService = class SelectService extends CollectionService {
         else {
             yield this._setValidDefaultValue(this.config === undefined || this.config.nullable || !this.state.items
                 ? null
-                : this.config.defaultValue === undefined || this.state.defaultValue === null
+                : this.config.defaultValue === undefined ||
+                    this.config.defaultValue === null ||
+                    this.state.defaultValue === null
                     ? this.state.items[0]?.data || null
                     : null);
         }
@@ -5877,14 +5901,15 @@ const SelectIconComponent = ({ onClick, open, loading }) => {
 const SelectTokenComponent = ({ token, onRemove, index, }) => {
     return (React.createElement("div", { className: "o-select-token" },
         React.createElement("div", { className: "o-select-token-text", key: "o-select-token-text" }, token.text),
-        React.createElement("div", { className: "o-select-token-remove", key: "o-select-token-remove", onClick: () => {
+        React.createElement("div", { className: "o-select-token-remove", key: "o-select-token-remove", onClick: (e) => {
                 onRemove(token, index);
+                e.stopPropagation();
             } }, "\u2716")));
 };
 SelectTokenComponent.displayName = 'SelectTokenComponent';
 var SelectTokenComponent$1 = React.memo(SelectTokenComponent);
 
-const SelectTokensComponent = ({ tokens, onRemove, }) => {
+const SelectTokensComponent = ({ tokens, onRemove, maxDisplayTokens, }) => {
     const widthRef = useRef();
     const onExiting = (node) => {
         node.style.width = '0';
@@ -5901,15 +5926,23 @@ const SelectTokensComponent = ({ tokens, onRemove, }) => {
         }, 0);
     };
     if (tokens !== undefined) {
-        return (React.createElement(TransitionGroup, { component: null }, tokens.map((token, index) => (React.createElement(CSSTransition, { timeout: 150, classNames: "o-select-token-animation", mountOnEnter: true, appear: true, unmountOnExit: true, key: `o-select-token-${token.id}`, onEntering: onEntering, onExiting: onExiting },
-            React.createElement(SelectTokenComponent$1, { token: token, onRemove: onRemove, index: index }))))));
+        if (!maxDisplayTokens || tokens.length <= maxDisplayTokens) {
+            return (React.createElement(TransitionGroup, { component: null }, tokens.map((token, index) => (React.createElement(CSSTransition, { timeout: 150, classNames: "o-select-token-animation", mountOnEnter: true, appear: true, unmountOnExit: true, key: `o-select-token-${token.id}`, onEntering: onEntering, onExiting: onExiting },
+                React.createElement(SelectTokenComponent$1, { token: token, onRemove: onRemove, index: index }))))));
+        }
+        else {
+            return (React.createElement("div", { className: "o-select-token o-select-token-disabled" },
+                React.createElement("div", { className: "o-select-token-text", key: "o-select-token-text" },
+                    tokens.length,
+                    " selected")));
+        }
     }
     return null;
 };
 SelectTokensComponent.displayName = 'SelectTokensComponent';
 var SelectTokensComponent$1 = React.memo(SelectTokensComponent);
 
-const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, IconComponent = SelectIconComponent, onFocus: forwardFocus, onBlur: forwardBlur, onChange, onRemove, value, focus, multiple, tokens, autoFocus, style, nullable, clickable, searchable, minChars, disabled, }, ref) => {
+const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, IconComponent = SelectIconComponent, onFocus: forwardFocus, onBlur: forwardBlur, onChange, onRemove, value, focus, multiple, tokens, autoFocus, style, nullable, clickable, searchable, minChars, disabled, maxDisplayTokens, }, ref) => {
     const inputRef = useRef(null);
     const autoSizeRef = useRef(null);
     // partialValue is the part of the selected item entered by the user
@@ -6054,12 +6087,12 @@ const SelectInputComponent = ({ setOpen, open, placeholder, loading, fetching, I
         }
     }, [autoFocus]);
     return (React.createElement("div", { className: className, style: style, ref: ref },
-        React.createElement("div", { className: "o-select-input-data" },
-            multiple && React.createElement(SelectTokensComponent$1, { tokens: tokens, onRemove: onRemove }),
+        React.createElement("div", { className: "o-select-input-data", onClick: searchable ? undefined : onClick },
+            multiple && React.createElement(SelectTokensComponent$1, { tokens: tokens, onRemove: onRemove, maxDisplayTokens: maxDisplayTokens }),
             React.createElement("div", { className: "o-select-input-wrapper" },
                 React.createElement("span", { ref: autoSizeRef, className: "o-select-input-auto-sizer" }),
-                React.createElement("input", { ref: inputRef, placeholder: placeholder, className: "o-select-input", onFocus: onFocus, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, value: proxyValue, onClick: onClick, autoCapitalize: "none", autoComplete: "off", autoCorrect: "off", spellCheck: "false", disabled: disabled }),
-                !searchable && (React.createElement("span", { className: "o-select-input o-select-input-text", onClick: onClick }, proxyValue || '')))),
+                React.createElement("input", { ref: inputRef, placeholder: placeholder, className: "o-select-input", onFocus: onFocus, onBlur: onBlur, onChange: handleChange, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, value: searchable ? proxyValue : '', onClick: onClick, autoCapitalize: "none", autoComplete: "off", autoCorrect: "off", spellCheck: "false", disabled: disabled }),
+                !searchable && (React.createElement("span", { className: "o-select-input o-select-input-text", onClick: onClick }, multiple ? '' : proxyValue || '')))),
         !multiple && nullable && value && !disabled && (React.createElement("div", { className: "o-select-remover", onClick: onNullify }, "\u2716")),
         React.createElement(IconComponent, { onClick: onIconClick, open: open, loading: loading, fetching: fetching })));
 };
@@ -6144,7 +6177,7 @@ const DefaultSelectListComponent = (props) => {
     });
     return (React.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 = 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, }) => {
+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 = 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, maxDisplayTokens, }) => {
     if (nullable === undefined) {
         nullable = !required;
     }
@@ -6187,6 +6220,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             sameWidth,
             overscan,
             autoCompleteSearch,
+            maxDisplayTokens,
         };
     }
     else {
@@ -6224,6 +6258,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
             sameWidth,
             overscan,
             autoCompleteSearch,
+            maxDisplayTokens,
         };
     }
     const id = useId();
@@ -6565,7 +6600,7 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
     useEventListener('keydown', onKeyDown, false);
     return (React.createElement(SelectServiceContext.Provider, { value: service },
         React.createElement("div", { className: classNames, ref: containerRef, onMouseDown: () => (stateRef.current.keepFocus = true), onMouseUp: () => (stateRef.current.keepFocus = false) },
-            React.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.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, maxDisplayTokens: maxDisplayTokens }),
             React.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.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 })))));
 };
@@ -6788,7 +6823,8 @@ const selectStyle = ({ theme, clickable = true, searchable = true }) => {
       ${flexGrow(1)}
       ${flexWrap('wrap')}
       ${alignItems('center')}
-      ${paddingX('sm')}
+      ${paddingLeft('sm')}
+      ${paddingRight(searchable ? 'sm' : 0)}
       ${maxWidth('calc(100% - 32px)')}
     }
 
@@ -6833,6 +6869,13 @@ const selectStyle = ({ theme, clickable = true, searchable = true }) => {
       ${flexGrow(1)}
       ${paddingLeft('sm')}
     }
+
+    .o-select-token-disabled {
+      ${paddingRight('sm')}
+      ${backgroundColor('dark')}
+      ${color('lightest')}
+    }
+
     .o-select-token-remove {
       ${cursor('pointer')}
       ${color('white', { hover: 'danger' })}
@@ -6978,12 +7021,13 @@ const Select = styled(SelectComponent$1) `
 `;
 
 const FormSelect = (props) => {
-    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
-        defaultValue: props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue,
-    }, props));
+    const defaultValue = props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue;
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
+        defaultValue,
+    }));
     const Component = props.FieldComponent || Select;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
-        React.createElement(Component, { ...fieldComponentProps, required: props.required, defaultValue: props.defaultValue })));
+        React.createElement(Component, { ...fieldComponentProps, required: props.required, defaultValue: defaultValue })));
 };
 FormSelect.displayName = 'FormSelect';
 var FormSelect$1 = React.memo(FormSelect);
@@ -8675,12 +8719,6 @@ const useTableState = () => {
     return useContext(TableStateContext);
 };
 
-const ExpandedCellComponent = ({ item, className }) => {
-    const service = useTableService();
-    return (React.createElement("div", { className: addClassname('o-table-cell-expander-content', className), onClick: () => service.toggle(item) },
-        React.createElement(TogglerIcon, { open: item.expanded, model: "plus", color: "primary" })));
-};
-
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const useTableColumns = () => {
     return useTableState().columns;
@@ -9446,6 +9484,12 @@ const TableHeaderComponent = ({ columns, className }) => {
 };
 TableHeaderComponent.displayName = 'TableHeader';
 
+const ExpandedCellComponent = ({ item, className }) => {
+    const service = useTableService();
+    return (React.createElement("div", { className: addClassname('o-table-cell-expander-content', className), onClick: () => service.toggle(item) },
+        React.createElement(TogglerIcon, { open: item.expanded, model: "plus", color: "primary" })));
+};
+
 const ControllerTableComponent = ({ autoRefresh, controller, className, bodyClassName, BodyComponent = TableBodyComponent, ExpandedComponent, filterable, fit, fixHeader = true, grow, FooterComponent = TableFooterComponent, footerClassName, header = true, headerClassName, HeaderComponent = TableHeaderComponent, increment, LoadingComponent, LoadingRowComponent, NotFoundComponent, footer = false, height, highlightRow, onRowClick, onRowEnter, onRowLeave, onRowOver, onRowOut, paddingEnd, paddingStart, parentRef, preload, rowClassName, RowComponent, sortable, stripRows, }) => {
     const classNames = addClassname('o-table', className);
     const { columns, items } = controller.state;
@@ -9795,7 +9839,7 @@ const addFilter = (controller, value, column, operator) => {
         controller.removeFilter(column.id);
     }
 };
-const operators$1 = [{ text: 'equals', operator: 'eq', not: false }];
+const operators$1 = [{ text: 'any of', operator: 'in', not: false }];
 const TableSelectFilterComponent = ({ column, dataSource, }) => {
     const controller = useTableService();
     const filter = controller.getFilterById(column.id);
@@ -9814,7 +9858,7 @@ const TableSelectFilterComponent = ({ column, dataSource, }) => {
     const scClassName = className ? className.split(' ').slice(0, 2).join(' ') : '';
     return (React.createElement("div", { className: "o-table-filter-select-container" },
         React.createElement(TableFilterOperatorComponent, { operators: operators$1, onChange: onOperatorChange, selected: currentOperator, className: filterValue && filterValue.length > 0 ? 'o-table-filter-active' : '' }),
-        React.createElement(Select, { className: addClassname('o-table-filter-select', scClassName), multiple: true, dataSource: dataSource, value: filterValue, nullable: true, searchable: false, onChange: onValueChange, size: "xsmall", attachDropdownToBody: true })));
+        React.createElement(Select, { className: addClassname('o-table-filter-select', scClassName), multiple: true, dataSource: dataSource, value: filterValue, nullable: true, searchable: false, onChange: onValueChange, size: "xsmall", attachDropdownToBody: true, maxDisplayTokens: 1 })));
 };
 TableSelectFilterComponent.displayName = 'TableInputFilterComponent';