onekijs-ui 1.0.2 → 1.0.3

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TreeItem, VirtualTreeListProps } from '../typings';
-declare const VirtualTreeListComponent: <T = any, I extends TreeItem<T> = TreeItem<T>>({ items, onItemClick, onItemMouseEnter, onItemMouseLeave, virtualItems, }: VirtualTreeListProps<T, I>) => React.JSX.Element;
+declare const VirtualTreeListComponent: <T extends any = any, I extends TreeItem<T> = TreeItem<T>>({ items, onItemClick, onItemMouseEnter, onItemMouseLeave, virtualItems, }: VirtualTreeListProps<T, I>) => React.JSX.Element;
 export default VirtualTreeListComponent;

package/dist/index.js

@@ -5508,17 +5508,13 @@ const useListView = ({ controller, height, itemHeight = defaultItemHeight, overs
             return itemHeight(index) || defaultItemHeight;
         }
         return itemHeight;
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [itemHeight]);
+    }, [itemHeight]);
     // Trick for force recalcutate position without losing measurementCache
     // In the react-virtual code, the position are recalculate if the forceExtractor function change
     const forceKeyExtractor = React.useCallback((index) => {
         const fn = keyExtractor || defaultKeyExtractor;
         return fn(index);
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [keyExtractor, force]);
+    }, [keyExtractor, force]);
     const state = controller.state;
     const { totalSize, virtualItems, scrollToIndex, scrollToOffset } = useVirtual({
         size: state.total ? state.total : state.items?.length || 0,
@@ -5686,6 +5682,7 @@ const StandardListComponent = ({ items, ItemComponent = ListItemComponent$1, Ite
         }) }));
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 const VirtualItemWrapper = ({ virtualItem, listItem, ItemComponent = ListItemComponent$1, ItemContentComponent = ListItemContent, ItemLoadingComponent = LoadingItem$1, onItemClick, onItemMouseEnter, onItemMouseLeave, }) => {
     const { index, measureRef, start } = virtualItem;
     const ref = React.useRef(null);
@@ -5724,6 +5721,7 @@ const VirtualItemWrapper = ({ virtualItem, listItem, ItemComponent = ListItemCom
             transform: `translateY(${start}px)`,
         }, children: jsxRuntimeExports.jsxs("div", { ref: ref, children: [listItem?.loadingStatus === onekijsFramework.LoadingStatus.Loading && jsxRuntimeExports.jsx(ItemLoadingComponent, {}), listItem?.loadingStatus !== onekijsFramework.LoadingStatus.Loading && listItem && listItem.data !== undefined && (jsxRuntimeExports.jsx(ItemComponent, { index: index, item: listItem, data: listItem.data, onClick: onItemClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ItemContentComponent: ItemContentComponent }, `item-${listItem.uid || index}`))] }) }));
 };
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 const VirtualListComponent = ({ items, ItemComponent = ListItemComponent$1, ItemLoadingComponent = LoadingItem$1, ItemContentComponent = ListItemContent, onItemClick, onItemMouseEnter, onItemMouseLeave, virtualItems, }) => {
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: virtualItems.map((virtualItem) => {
             const listItem = items[virtualItem.index];
@@ -5745,6 +5743,7 @@ const findItemIndex = (items, uid) => {
         return i.uid === uid;
     });
 };
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 const ListBodyComponent = ({ autoRefresh, bodyRef, className, follow, height, items, ItemComponent = ListItemComponent$1, ItemLoadingComponent = LoadingItem$1, ItemContentComponent = ListItemContent, NotFoundComponent, keyboardNavigable, ListComponent = StandardListComponent, multiSelect, onItemActivate, onItemDeactivate, onItemSelect, onItemUnselect, onItemHighlight, onItemUnhighlight, parentRef, scrollToIndex, service, state, style, tail, totalSize, virtualItems, VirtualListComponent: VirtualListComponent$1 = VirtualListComponent, LoadingComponent = ListLoadingComponent$1, }) => {
     const scrollAlignRef = React.useRef('center');
     const lastActiveItemUid = React.useRef(undefined);
@@ -9122,12 +9121,15 @@ const TreeBodyComponent = ({ className, controller, NotFoundComponent, }) => {
 TreeBodyComponent.displayName = 'TreeBody';
 
 const timeout$1 = 500;
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 const VirtualTreeListItemComponent = ({ itemClassName, ItemComponent, virtualItem, onClick, onMouseEnter, onMouseLeave, }) => {
     const { index, measureRef, children, item } = virtualItem;
     const className = typeof itemClassName !== 'function' ? itemClassName : item ? itemClassName(item) : undefined;
     const service = useTreeService();
     const { animate } = useTreeConfig();
     const childrenRef = React.useRef(null);
+    const ref = React.useRef(null);
+    const previousHeightRef = React.useRef(undefined);
     const expand = (item, index) => {
         if (animate) {
             service.expanding(item, index);
@@ -9163,11 +9165,35 @@ const VirtualTreeListItemComponent = ({ itemClassName, ItemComponent, virtualIte
         }
     };
     const expanded = !!(item && isTreeItemExpanded(item, service));
-    return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "o-virtual-item", ref: measureRef, children: [(!item || !item.data) && jsxRuntimeExports.jsx(LoadingItem$1, {}), item && item.data && (jsxRuntimeExports.jsx(DefaultTreeItemContext.Provider, { value: {
-                            onExpand: expand,
-                            onCollapse: collapse,
-                            className,
-                        }, children: jsxRuntimeExports.jsx(ItemComponent, { index: index, item: item, data: item.data, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, `item-${item?.uid || index}`) }))] }, `virtual-item-${item?.uid || index}`), jsxRuntimeExports.jsx(reactTransitionGroup.CSSTransition, { in: expanded, nodeRef: childrenRef, classNames: "o-tree-item-children", timeout: timeout$1, mountOnEnter: true, appear: false, unmountOnExit: true, onExiting: () => {
+    const measure = React.useCallback((el) => {
+        if (el?.offsetHeight !== previousHeightRef.current && el?.offsetHeight) {
+            previousHeightRef.current = el.offsetHeight;
+            measureRef(el);
+        }
+    }, [measureRef]);
+    const measureThrottle = onekijsFramework.useThrottle(measure, 50);
+    const resizeObserver = React.useMemo(() => {
+        return new ResizeObserver(() => {
+            measureThrottle(ref.current);
+        });
+    }, [measureThrottle]);
+    React.useEffect(() => {
+        const el = ref.current;
+        if (el) {
+            previousHeightRef.current = el.offsetHeight;
+            resizeObserver.observe(el);
+        }
+        return () => {
+            if (el) {
+                resizeObserver.unobserve(el);
+            }
+        };
+    }, [resizeObserver]);
+    return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("div", { className: "o-virtual-item", ref: measureRef, children: jsxRuntimeExports.jsxs("div", { ref: ref, children: [(!item || !item.data) && jsxRuntimeExports.jsx(LoadingItem$1, {}), item && item.data && (jsxRuntimeExports.jsx(DefaultTreeItemContext.Provider, { value: {
+                                onExpand: expand,
+                                onCollapse: collapse,
+                                className,
+                            }, children: jsxRuntimeExports.jsx(ItemComponent, { index: index, item: item, data: item.data, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, `item-${item?.uid || index}`) }))] }) }, `virtual-item-${item?.uid || index}`), jsxRuntimeExports.jsx(reactTransitionGroup.CSSTransition, { in: expanded, nodeRef: childrenRef, classNames: "o-tree-item-children", timeout: timeout$1, mountOnEnter: true, appear: false, unmountOnExit: true, onExiting: () => {
                     if (childrenRef.current)
                         onExiting(childrenRef.current);
                 }, onEntering: () => {
@@ -9177,6 +9203,7 @@ const VirtualTreeListItemComponent = ({ itemClassName, ItemComponent, virtualIte
                             return (jsxRuntimeExports.jsx(VirtualTreeListItemComponent, { virtualItem: child, ItemComponent: ItemComponent, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, `virtual-item-${child.item?.uid || child.index}`));
                         }) }) }) })] }));
 };
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 const VirtualTreeListComponent = ({ items, onItemClick, onItemMouseEnter, onItemMouseLeave, virtualItems, }) => {
     const logger = onekijsFramework.useLogger();
     logger.debug('virtualItems', virtualItems);
@@ -11045,7 +11072,7 @@ const DefaultDeleteRowComponent = ({ rowIndex }) => {
     };
     const metadata = onekijsFramework.useFormMetadata(tableName);
     let disabled = false;
-    if (metadata.readOnly || (metadata.editable === false && form.config.reconfigure)) {
+    if (metadata.disabled || metadata.readOnly || (metadata.editable === false && form.config.reconfigure)) {
         disabled = true;
     }
     return (jsxRuntimeExports.jsx("div", { className: `o-form-table-remove${disabled ? ' o-form-table-remove-disabled' : ''}`, onClick: removeRow, children: jsxRuntimeExports.jsx(RemoveIcon$1, { width: "14px", height: "14px" }) }));