onekijs-ui 0.16.0 → 0.16.2

package/dist/index.module.js

@@ -4192,7 +4192,11 @@ function useVirtual({
     measurements: [],
   });
 
-  const { outerSize, scrollOffset, scrollToFn: defaultScrollToFn } = useScroll({
+  const {
+    outerSize,
+    scrollOffset,
+    scrollToFn: defaultScrollToFn,
+  } = useScroll({
     windowRef,
     parentRef,
     horizontal,
@@ -6106,6 +6110,15 @@ const SelectOptionComponent = (props) => {
         }
         return classNames.join(' ');
     }, [item, clickable, hoverable]);
+    const fixClickRef = useRef({
+        mouseDown: '',
+        clicked: false,
+    });
+    const onItemClick = useCallback((item, index) => {
+        if (!fixClickRef.current.clicked) {
+            clickable && onClick && item && onClick(item, index);
+        }
+    }, [clickable, onClick]);
     if (isItemLoading(item)) {
         return React.createElement(OptionLoadingComponent, null);
     }
@@ -6113,9 +6126,9 @@ const SelectOptionComponent = (props) => {
         return null;
     return (React.createElement(React.Fragment, null,
         displayGroup && React.createElement(OptionGroupComponent, { ...props }),
-        React.createElement("div", { className: classNames, onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index), onClick: () => clickable && onClick && item && onClick(item, index) },
-            service.config?.multiple && (React.createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => clickable && onClick && item && onClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox" })),
-            React.createElement(OptionContentComponent, { ...props }))));
+        React.createElement("div", { className: classNames, onClick: () => onItemClick(item, index), onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index) },
+            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) }))));
 };
 SelectOptionComponent.displayName = 'SelectOptionComponent';
 var SelectOptionComponent$1 = React.memo(SelectOptionComponent);
@@ -6139,41 +6152,80 @@ const ControlledSelectComponent = ({ attachDropdownToBody = false, className = '
     const [focus, setFocus] = useState(false);
     const stateRef = useRef({});
     const service = controller.asService();
-    service.config = {
-        attachDropdownToBody,
-        className,
-        placeholder,
-        InputComponent,
-        IconComponent,
-        OptionContentComponent,
-        OptionComponent,
-        OptionLoadingComponent,
-        MultiOptionsComponent,
-        NotFoundComponent,
-        autoFocus,
-        value,
-        onChange,
-        onBlur: forwardBlur,
-        onFocus: forwardFocus,
-        height,
-        multiple,
-        status,
-        size,
-        nullable,
-        minChars,
-        openOnFocus,
-        searchable,
-        clickable,
-        dropdownWidthModifier,
-        preload,
-        increment,
-        animationMs,
-        disabled,
-        defaultValue,
-        sameWidth,
-        overscan,
-        autoCompleteSearch,
-    };
+    if (!service.config) {
+        service.config = {
+            attachDropdownToBody,
+            className,
+            placeholder,
+            InputComponent,
+            IconComponent,
+            OptionContentComponent,
+            OptionComponent,
+            OptionLoadingComponent,
+            MultiOptionsComponent,
+            NotFoundComponent,
+            autoFocus,
+            value,
+            onChange,
+            onBlur: forwardBlur,
+            onFocus: forwardFocus,
+            height,
+            multiple,
+            status,
+            size,
+            nullable,
+            minChars,
+            openOnFocus,
+            searchable,
+            clickable,
+            dropdownWidthModifier,
+            preload,
+            increment,
+            animationMs,
+            disabled,
+            defaultValue,
+            sameWidth,
+            overscan,
+            autoCompleteSearch,
+        };
+    }
+    else {
+        service.config = {
+            attachDropdownToBody,
+            className,
+            placeholder,
+            InputComponent: service.config.InputComponent,
+            IconComponent: service.config.IconComponent,
+            OptionContentComponent: service.config.OptionContentComponent,
+            OptionComponent: service.config.OptionComponent,
+            OptionLoadingComponent: service.config.OptionLoadingComponent,
+            MultiOptionsComponent: service.config.MultiOptionsComponent,
+            NotFoundComponent: service.config.NotFoundComponent,
+            autoFocus,
+            value,
+            onChange,
+            onBlur: forwardBlur,
+            onFocus: forwardFocus,
+            height,
+            multiple,
+            status,
+            size,
+            nullable,
+            minChars,
+            openOnFocus,
+            searchable,
+            clickable,
+            dropdownWidthModifier,
+            preload,
+            increment,
+            animationMs,
+            disabled,
+            defaultValue,
+            sameWidth,
+            overscan,
+            autoCompleteSearch,
+        };
+    }
     const id = useId();
     const loading = isCollectionLoading(controller);
     const fetching = isCollectionFetching(controller);
@@ -9859,13 +9911,14 @@ const SelectCellComponent = (options, broker) => {
         // if the id is empty, it's a single table column and the value is the row itself
         const name = column.id ? `${tableName}.${rowIndex}.${column.id}` : `${tableName}.${rowIndex}`;
         const className = typeof options.className === 'function' ? options.className(item, column, rowIndex) : options.className;
+        const Component = options.Component ?? FormSelect$1;
         useEffect(() => {
             broker.addSubscriber(name, service);
             return () => {
                 broker.removeSubscriber(name);
             };
         }, [name, service]);
-        return (React.createElement(FormSelect$1, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-select', className), controller: controller }));
+        return (React.createElement(Component, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-select', className), controller: controller }));
     };
     SelectCellComponent.displayName = 'SelectCellComponent';
     return SelectCellComponent;
@@ -10475,6 +10528,7 @@ const wizardStyle = ({ layout = 'vertical', theme, inModal }) => {
     .o-wizard-content {
       ${flexGrow(1)}
       ${padding('lg')}
+      ${paddingBottom(0)}
       ${paddingRight('3xl')}
     }