onekijs-ui 1.0.2 → 1.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onekijs-ui",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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": "5445ab48458ab994b8e76660fa897af57e34f51a"
 }

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/list/typings.ts

@@ -125,7 +125,7 @@ export type ListConfig<T = any, I extends ListItem<T> = ListItem<T>> = {
   onItemUnselect?: ListItemHandler<T, I>;
   paddingEnd?: number;
   paddingStart?: number;
-  parentRef?: React.RefObject<HTMLDivElement>;
+  parentRef?: React.RefObject<HTMLDivElement | null>;
   overscan?: number;
   preload?: number;
   style?: React.CSSProperties;

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/tooltip/components/TooltipComponent.tsx

@@ -22,7 +22,7 @@ const TooltipComponent: FCC<TooltipProps> = (props) => {
   const [show, setShow] = useState<boolean>(true);
   const [open, setOpen] = useState(false);
   const arrowRef = useRef<HTMLDivElement | null>(null);
-  const { context, floatingStyles, middlewareData, refs } = useFloating({
+  const { context, floatingStyles, middlewareData, placement: resolvedPlacement, refs } = useFloating({
     open,
     onOpenChange: setOpen,
     placement,
@@ -59,7 +59,12 @@ const TooltipComponent: FCC<TooltipProps> = (props) => {
   }, [uid]);
 
   const element = (
-    <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps({ className: 'o-tooltip-container' })}>
+    <div
+      ref={refs.setFloating}
+      style={floatingStyles}
+      data-popper-placement={resolvedPlacement}
+      {...getFloatingProps({ className: 'o-tooltip-container' })}
+    >
       <div
         ref={arrowRef}
         className="o-tooltip-arrow"

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,

package/src/vendor/reactVirtual.js

@@ -31,7 +31,10 @@ export const useElementScroll = ({ parentRef, horizontal, useObserver, initialRe
   const [element, setElement] = React.useState(parentRef.current);
 
   useIsomorphicLayoutEffect(() => {
-    setElement(parentRef.current);
+    const currentElement = parentRef.current;
+    if (currentElement !== element) {
+      setElement(currentElement);
+    }
   });
 
   useIsomorphicLayoutEffect(() => {
@@ -84,7 +87,10 @@ const useWindowRect = (windowRef, initialRect = { width: 0, height: 0 }) => {
   const [element, setElement] = React.useState(windowRef.current);
 
   useIsomorphicLayoutEffect(() => {
-    setElement(windowRef.current);
+    const currentElement = windowRef.current;
+    if (currentElement !== element) {
+      setElement(currentElement);
+    }
   });
 
   useIsomorphicLayoutEffect(() => {
@@ -122,7 +128,10 @@ export const useWindowScroll = ({ windowRef, parentRef, horizontal, useWindowObs
   const scrollKey = horizontal ? 'scrollX' : 'scrollY';
 
   useIsomorphicLayoutEffect(() => {
-    setElement(windowRef.current);
+    const currentElement = windowRef.current;
+    if (currentElement !== element) {
+      setElement(currentElement);
+    }
   });
 
   useIsomorphicLayoutEffect(() => {