onekijs-ui 1.0.2 → 1.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onekijs-ui",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Advanced React Web Components",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -35,7 +35,7 @@
     "@floating-ui/react": "^0.27.20",
     "@popperjs/core": "^2.11.8",
     "@reach/observe-rect": "^1.2.0",
-    "onekijs-framework": "^1.0.1",
+    "onekijs-framework": "^1.0.3",
     "react-virtualized-auto-sizer": "^2.0.3",
     "react-window": "^2.2.7",
     "react-window-infinite-loader": "^2.0.1",
@@ -50,5 +50,5 @@
     "react-dom": "^19.2.7"
   },
   "sideEffects": false,
-  "gitHead": "41c607ce7e141ab8df632682b71560486eb5e95c"
+  "gitHead": "58f5cbd9afb558e3a4a92941332d71672047c4ea"
 }

package/src/components/list/components/ListBodyComponent.tsx

@@ -23,6 +23,7 @@ const findItemIndex = (items?: (Item<unknown> | undefined)[], uid?: string): num
   });
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 const ListBodyComponent = <T extends any = any, I extends ListItem<T> = ListItem<T>>({
   autoRefresh,
   bodyRef,

package/src/components/list/components/VirtualListComponent.tsx

@@ -4,6 +4,7 @@ import { ListItem, VirtualItemWrapperProps, VirtualListProps } from '../typings'
 import ListItemComponent, { ListItemContent } from './ListItemComponent';
 import LoadingItem from './LoadingItem';
 
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 const VirtualItemWrapper = <T extends any = any, I extends ListItem<T> = ListItem<T>>({
   virtualItem,
   listItem,
@@ -83,6 +84,7 @@ const VirtualItemWrapper = <T extends any = any, I extends ListItem<T> = ListIte
   );
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 const VirtualListComponent = <T extends any = any, I extends ListItem<T> = ListItem<T>>({
   items,
   ItemComponent = ListItemComponent,

package/src/components/list/hooks/useListView.tsx

@@ -50,7 +50,6 @@ const useListView: <T = any, I extends Item<T> = Item<T>>(
       }
       return itemHeight;
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [itemHeight],
   );
 
@@ -61,7 +60,6 @@ const useListView: <T = any, I extends Item<T> = Item<T>>(
       const fn = keyExtractor || defaultKeyExtractor;
       return fn(index);
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [keyExtractor, force],
   );
 

package/src/components/table/components/FormTableComponent.tsx

@@ -24,7 +24,7 @@ const DefaultDeleteRowComponent: React.FC<TableBodyCellProps> = ({ rowIndex }) =
 
   const metadata = 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;
   }
 

package/src/components/tree/components/VirtualTreeListComponent.tsx

@@ -1,5 +1,5 @@
-import { AnonymousObject, useLogger } from 'onekijs-framework';
-import React, { useRef } from 'react';
+import { AnonymousObject, useLogger, useThrottle } from 'onekijs-framework';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import LoadingItem from '../../list/components/LoadingItem';
 import { ListItemProps, VirtualItem } from '../../list/typings';
@@ -27,7 +27,8 @@ type VirtualTreeListItemProps<T = any, I extends TreeItem<T> = TreeItem<T>> = {
   defer?: () => void;
 };
 
-const VirtualTreeListItemComponent = <T = any, I extends TreeItem<T> = TreeItem<T>>({
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+const VirtualTreeListItemComponent = <T extends any = any, I extends TreeItem<T> = TreeItem<T>>({
   itemClassName,
   ItemComponent,
   virtualItem,
@@ -40,6 +41,8 @@ const VirtualTreeListItemComponent = <T = any, I extends TreeItem<T> = TreeItem<
   const service = useTreeService();
   const { animate } = useTreeConfig();
   const childrenRef = useRef<HTMLDivElement | null>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const previousHeightRef = useRef<number | undefined>(undefined);
 
   const expand: TreeItemHandler<T, I> = (item, index) => {
     if (animate) {
@@ -81,29 +84,62 @@ const VirtualTreeListItemComponent = <T = any, I extends TreeItem<T> = TreeItem<
 
   const expanded = !!(item && isTreeItemExpanded(item, service));
 
+  const measure = useCallback(
+    (el: HTMLElement | null) => {
+      if (el?.offsetHeight !== previousHeightRef.current && el?.offsetHeight) {
+        previousHeightRef.current = el.offsetHeight;
+        measureRef(el);
+      }
+    },
+    [measureRef],
+  );
+
+  const measureThrottle = useThrottle(measure, 50);
+
+  const resizeObserver = useMemo(() => {
+    return new ResizeObserver(() => {
+      measureThrottle(ref.current);
+    });
+  }, [measureThrottle]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (el) {
+      previousHeightRef.current = el.offsetHeight;
+      resizeObserver.observe(el);
+    }
+    return () => {
+      if (el) {
+        resizeObserver.unobserve(el);
+      }
+    };
+  }, [resizeObserver]);
+
   return (
     <div>
       <div className="o-virtual-item" key={`virtual-item-${item?.uid || index}`} ref={measureRef}>
-        {(!item || !item.data) && <LoadingItem />}
-        {item && item.data && (
-          <DefaultTreeItemContext.Provider
-            value={{
-              onExpand: expand,
-              onCollapse: collapse,
-              className,
-            }}
-          >
-            <ItemComponent
-              key={`item-${item?.uid || index}`}
-              index={index}
-              item={item}
-              data={item.data}
-              onClick={onClick}
-              onMouseEnter={onMouseEnter}
-              onMouseLeave={onMouseLeave}
-            />
-          </DefaultTreeItemContext.Provider>
-        )}
+        <div ref={ref}>
+          {(!item || !item.data) && <LoadingItem />}
+          {item && item.data && (
+            <DefaultTreeItemContext.Provider
+              value={{
+                onExpand: expand,
+                onCollapse: collapse,
+                className,
+              }}
+            >
+              <ItemComponent
+                key={`item-${item?.uid || index}`}
+                index={index}
+                item={item}
+                data={item.data}
+                onClick={onClick}
+                onMouseEnter={onMouseEnter}
+                onMouseLeave={onMouseLeave}
+              />
+            </DefaultTreeItemContext.Provider>
+          )}
+        </div>
       </div>
       <CSSTransition
         in={expanded}
@@ -153,7 +189,8 @@ type NodeItem = {
   level: number;
 };
 
-const VirtualTreeListComponent = <T = any, I extends TreeItem<T> = TreeItem<T>>({
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+const VirtualTreeListComponent = <T extends any = any, I extends TreeItem<T> = TreeItem<T>>({
   items,
   onItemClick,
   onItemMouseEnter,