onekijs-ui 0.16.0 → 0.16.1

package/dist/components/list/DropdownList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     <T = any, I extends import("./typings").ListItem<T> = import("./typings").ListItem<T>>(props: import("./typings").ListProps<T, I, import("./typings").ListState<T, I>, import("./typings").ListCollection<T, I, import("./typings").ListState<T, I>>>): JSX.Element;
     displayName: string;

package/dist/components/list/components/ArrayListComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ArrayListProps, ListItem } from '../typings';
 declare const ArrayListComponent: <T = any, I extends ListItem<T> = ListItem<T>>(props: ArrayListProps<T, I>) => JSX.Element;
 export default ArrayListComponent;

package/dist/components/list/components/CollectionListComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CollectionListProps, ListItem } from '../typings';
 declare const CollectionListComponent: <T = any, I extends ListItem<T> = ListItem<T>>({ className, controller, height, ItemComponent, ItemLoadingComponent, ItemContentComponent, NotFoundComponent, itemHeight, preload, keyboardNavigable, increment, multiSelect, onItemActivate, onItemHighlight, onItemSelect, onItemDeactivate, onItemUnhighlight, onItemUnselect, paddingEnd, paddingStart, virtual, style, }: CollectionListProps<T, I, import("../typings").ListState<T, I>, import("../typings").ListCollection<T, I, import("../typings").ListState<T, I>>>) => JSX.Element;
 export default CollectionListComponent;

package/dist/components/list/components/ListBodyComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListBodyProps, ListItem } from '../typings';
 declare const ListBodyComponent: <T = any, I extends ListItem<T> = ListItem<T>>({ bodyRef, className, height, items, ItemComponent, ItemLoadingComponent, ItemContentComponent, NotFoundComponent, keyboardNavigable, ListComponent, multiSelect, onItemActivate, onItemDeactivate, onItemSelect, onItemUnselect, onItemHighlight, onItemUnhighlight, parentRef, scrollToIndex, service, state, style, totalSize, virtualItems, VirtualListComponent, LoadingComponent, }: ListBodyProps<T, I, import("../typings").ListState<T, I>, import("../typings").ListCollection<T, I, import("../typings").ListState<T, I>>>) => JSX.Element | null;
 export default ListBodyComponent;

package/dist/components/list/components/ListComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListItem, ListProps } from '../typings';
 declare const _default: {
     <T = any, I extends ListItem<T> = ListItem<T>>(props: ListProps<T, I, import("../typings").ListState<T, I>, import("../typings").ListCollection<T, I, import("../typings").ListState<T, I>>>): JSX.Element;

package/dist/components/list/components/VirtualListComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListItem, VirtualListProps } from '../typings';
 declare const VirtualListComponent: <T = any, I extends ListItem<T> = ListItem<T>>({ items, ItemComponent, ItemLoadingComponent, ItemContentComponent, onItemClick, onItemMouseEnter, onItemMouseLeave, virtualItems, }: VirtualListProps<T, I>) => JSX.Element;
 export default VirtualListComponent;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     <T = any, I extends import("./typings").ListItem<T> = import("./typings").ListItem<T>>(props: import("./typings").ListProps<T, I, import("./typings").ListState<T, I>, import("./typings").ListCollection<T, I, import("./typings").ListState<T, I>>>): JSX.Element;
     displayName: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormSelectProps, SelectItem } from './typings';
 declare const _default: {
     <T = any, I extends SelectItem<T> = SelectItem<T>>(props: FormSelectProps<T, I>): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ArraySelectProps, SelectItem } from '../typings';
 declare const ArraySelectComponent: <T = any, I extends SelectItem<T> = SelectItem<T>>(props: ArraySelectProps<T, I>) => JSX.Element;
 export default ArraySelectComponent;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ArrayTreeSelectProps, TreeSelectItem } from '../typings';
 declare const ArrayTreeSelectComponent: <T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>>(props: ArrayTreeSelectProps<T, I>) => JSX.Element;
 export default ArrayTreeSelectComponent;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControllerSelectProps, SelectController, SelectItem, SelectState } from '../typings';
 declare const ControlledSelectComponent: <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>({ attachDropdownToBody, className, placeholder, controller, InputComponent, IconComponent, OptionContentComponent, OptionComponent, OptionLoadingComponent, MultiOptionsComponent, NotFoundComponent, autoFocus, value, onChange, onBlur: forwardBlur, onFocus: forwardFocus, height, multiple, status, size, nullable, minChars, openOnFocus, searchable, dropdownWidthModifier, preload, increment, animationMs, disabled, defaultValue, required, sameWidth, overscan, clickable, ListComponent, autoCompleteSearch, }: ControllerSelectProps<T, I, S, C>) => JSX.Element;
 export default ControlledSelectComponent;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectController, SelectItem, SelectProps, SelectState } from '../typings';
 declare const _default: {
     <T = any, I extends SelectItem<T> = SelectItem<T>, S extends SelectState<T, I> = SelectState<T, I>, C extends SelectController<T, I, S> = SelectController<T, I, S>>(props: SelectProps<T, I, S, C>): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListItemProps } from '../../list/typings';
 import { SelectItem } from '../typings';
 export declare const SelectOptionContent: <T, I extends SelectItem<T> = SelectItem<T>>({ item }: ListItemProps<T, I>) => JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectItem, SelectTokenProps } from '../typings';
 declare const _default: {
     <T, I extends SelectItem<T> = SelectItem<T>>({ token, onRemove, index, }: SelectTokenProps<T, I>): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectItem, SelectTokensProps } from '../typings';
 declare const _default: {
     <T, I extends SelectItem<T> = SelectItem<T>>({ tokens, onRemove, }: SelectTokensProps<T, I>): JSX.Element | null;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TreeSelectController, TreeSelectItem, TreeSelectProps, TreeSelectState } from '../typings';
 declare const _default: {
     <T = any, I extends TreeSelectItem<T> = TreeSelectItem<T>, S extends TreeSelectState<T, I> = TreeSelectState<T, I>, C extends TreeSelectController<T, I, S> = TreeSelectController<T, I, S>>(props: TreeSelectProps<T, I, S, C>): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ListItemProps } from '../../list/typings';
 import { TreeSelectItem } from '../typings';
 export declare const TreeSelectOptionContent: <T, I extends TreeSelectItem<T> = TreeSelectItem<T>>(props: ListItemProps<T, I>) => JSX.Element;

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

@@ -5,7 +5,7 @@ import { CheckboxProps } from '../checkbox/typings';
 import { FieldLayoutProps } from '../field/typings';
 import { InputProps } from '../input/typings';
 import { ListItemProps, ListItems, ListNotFoundProps, ListState, UseListOptions } from '../list/typings';
-import { SelectBroker, SelectItem, SelectProps } from '../select/typings';
+import { FormSelectProps, SelectBroker, SelectItem, SelectProps } from '../select/typings';
 import { TextareaProps } from '../textarea/typings';
 export declare type ArrayTableProps<T = any, I extends TableItem<T> = TableItem<T>> = TableConfig<T, I> & {
     adapter?: TableItemAdapter<T>;
@@ -233,6 +233,8 @@ export declare type InputColumnOptions<T = any, I extends TableItem<T> = TableIt
 };
 export declare type SelectColumnOptions<T = any, S = any, TI extends TableItem<T> = TableItem<T>, SI extends SelectItem<S> = SelectItem<S>> = Omit<TableColumnSpec<T, TI>, 'CellComponent' | 'id'> & Omit<SelectProps<S, SI>, 'className' | 'onFocus' | 'onChange' | 'onBlur' | 'items'> & Omit<FormFieldProps, 'name'> & UseCollectionOptions<S, SI> & {
     CellComponent?: SelectCell<T, S, TI, SI>;
+} & {
+    Component?: React.FC<FormSelectProps<S, SI>>;
 };
 export declare type TableColumnOptions<T = any, I extends TableItem<T> = TableItem<T>> = Omit<TableColumnSpec<T, I>, 'id'>;
 export declare type TextareaColumnOptions<T = any, I extends TableItem<T> = TableItem<T>> = Omit<TableColumnSpec<T, I>, 'CellComponent' | 'id'> & Omit<FormFieldProps, 'name'> & Omit<TextareaProps, 'className' | 'onFocus' | 'onChange' | 'onBlur'> & {

package/dist/components/tree/components/ArrayTreeComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ArrayTreeProps, TreeItem } from '../typings';
 declare const ArrayTreeComponent: <T = any, I extends TreeItem<T> = TreeItem<T>>(props: ArrayTreeProps<T, I>) => JSX.Element;
 export default ArrayTreeComponent;

package/dist/components/tree/components/ControllerTreeComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const ControllerTreeComponent: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>({ controller, className, onActivate, onSelect, height, virtual, gap, TreeIconComponent, TreeItemComponent, TreeItemContentComponent, treeItemClassName, TreeTogglerComponent, paddingLeft, paddingRight, animate, keyboardNavigable, listRef, }: ControllerTreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

package/dist/components/tree/components/TreeBodyComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const TreeBodyComponent: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, }: ControllerTreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

package/dist/components/tree/components/TreeComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TreeItem, TreeProps } from '../typings';
 declare const _default: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>(props: TreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

package/dist/components/tree/components/VirtualTreeBodyComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ControllerTreeProps, TreeItem } from '../typings';
 declare const VirtualTreeBodyComponent: {
     <T = any, I extends TreeItem<T> = TreeItem<T>>({ className, controller, height, }: ControllerTreeProps<T, I, import("../typings").TreeState<T, I>, import("../typings").TreeController<T, I, import("../typings").TreeState<T, I>>>): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     <T = any, I extends import("./typings").TreeItem<T> = import("./typings").TreeItem<T>>(props: import("./typings").TreeProps<T, I, import("./typings").TreeState<T, I>, import("./typings").TreeController<T, I, import("./typings").TreeState<T, I>>>): JSX.Element;
     displayName: string;

package/dist/index.d.ts

@@ -104,7 +104,7 @@ export { default as TreeSelectComponent } from './components/select/components/T
 export { default as useSelectController } from './components/select/hooks/useSelectController';
 export { useSelectService } from './components/select/hooks/useSelectService';
 export { default as useTreeSelectController } from './components/select/hooks/useTreeSelectController';
-export { ArraySelectProps, ArrayTreeSelectProps, ControllerSelectProps, ControllerTreeSelectProps, FormSelectProps, SelectItemAdapter as SelectAdapter, SelectBroker, SelectConfig, SelectController, SelectGroup, SelectIconProps, SelectInputProps, SelectItem, SelectItemAdaptee, SelectListComponentProps, SelectNotFoundProps, SelectOptionHandler, SelectOptionProps, SelectOptionSelectionHandler, SelectProps, SelectState, SelectTokenProps, SelectTokensProps, TreeSelectController, TreeSelectItem, TreeSelectProps, TreeSelectState, UseSelectOptions, } from './components/select/typings';
+export { ArraySelectProps, ArrayTreeSelectProps, ControllerSelectProps, ControllerTreeSelectProps, FormSelectProps, SelectItemAdapter, SelectBroker, SelectConfig, SelectController, SelectGroup, SelectIconProps, SelectInputProps, SelectItem, SelectItemAdaptee, SelectListComponentProps, SelectNotFoundProps, SelectOptionHandler, SelectOptionProps, SelectOptionSelectionHandler, SelectProps, SelectState, SelectTokenProps, SelectTokensProps, TreeSelectController, TreeSelectItem, TreeSelectProps, TreeSelectState, UseSelectOptions, } from './components/select/typings';
 export { findSelectItem, findSelectItemIndex, shouldCheckSelect } from './components/select/util';
 export { default as Tabs } from './components/tab';
 export { default as Tab } from './components/tab/components/Tab';

package/dist/index.js

@@ -4202,7 +4202,11 @@ function useVirtual({
     measurements: [],
   });
 
-  const { outerSize, scrollOffset, scrollToFn: defaultScrollToFn } = useScroll({
+  const {
+    outerSize,
+    scrollOffset,
+    scrollToFn: defaultScrollToFn,
+  } = useScroll({
     windowRef,
     parentRef,
     horizontal,
@@ -6116,6 +6120,15 @@ const SelectOptionComponent = (props) => {
         }
         return classNames.join(' ');
     }, [item, clickable, hoverable]);
+    const fixClickRef = React.useRef({
+        mouseDown: '',
+        clicked: false,
+    });
+    const onItemClick = React.useCallback((item, index) => {
+        if (!fixClickRef.current.clicked) {
+            clickable && onClick && item && onClick(item, index);
+        }
+    }, [clickable, onClick]);
     if (onekijsFramework.isItemLoading(item)) {
         return React__default["default"].createElement(OptionLoadingComponent, null);
     }
@@ -6123,8 +6136,8 @@ const SelectOptionComponent = (props) => {
         return null;
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         displayGroup && React__default["default"].createElement(OptionGroupComponent, { ...props }),
-        React__default["default"].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__default["default"].createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => clickable && onClick && item && onClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox" })),
+        React__default["default"].createElement("div", { className: classNames, onMouseDown: () => onItemClick(item, index), onMouseEnter: () => hoverable && onMouseEnter && item && onMouseEnter(item, index), onMouseLeave: () => hoverable && onMouseLeave && item && onMouseLeave(item, index) },
+            service.config?.multiple && (React__default["default"].createElement(Checkbox, { value: item?.selected ? true : false, onChange: () => onItemClick(item, index), color: "currentColor", className: "o-select-option-multiple-checkbox" })),
             React__default["default"].createElement(OptionContentComponent, { ...props }))));
 };
 SelectOptionComponent.displayName = 'SelectOptionComponent';
@@ -9869,13 +9882,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;
         React.useEffect(() => {
             broker.addSubscriber(name, service);
             return () => {
                 broker.removeSubscriber(name);
             };
         }, [name, service]);
-        return (React__default["default"].createElement(FormSelect$1, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-select', className), controller: controller }));
+        return (React__default["default"].createElement(Component, { size: "small", layout: "table", ...options, name: name, className: addClassname('o-table-select', className), controller: controller }));
     };
     SelectCellComponent.displayName = 'SelectCellComponent';
     return SelectCellComponent;
@@ -10485,6 +10499,7 @@ const wizardStyle = ({ layout = 'vertical', theme, inModal }) => {
     .o-wizard-content {
       ${flexGrow(1)}
       ${padding('lg')}
+      ${paddingBottom(0)}
       ${paddingRight('3xl')}
     }