@true-engineering/true-react-common-ui-kit 4.0.0-alpha63 → 4.0.0-alpha64

package/dist/hooks/use-resize-ref.d.ts

@@ -2,6 +2,7 @@ import { RefCallback } from 'react';
 export interface IResizeRefOptions {
     /** @default false */
     isDisabled?: boolean;
-    onChange: (entry: ResizeObserverEntry) => void;
+    onChange?: (entry: ResizeObserverEntry) => void;
+    onTargetChange?: (target: Element) => void;
 }
 export declare const useResizeRef: (options: IResizeRefOptions) => RefCallback<Element>;

package/dist/true-react-common-ui-kit.js

@@ -2717,13 +2717,18 @@ const useResizeRef = (options) => {
     const observer = new ResizeObserver(([entry]) => {
       const { current } = optionsRef;
       if (!current.isDisabled) {
-        current?.onChange(entry);
+        current.onChange?.(entry);
+        current.onTargetChange?.(entry.target);
       }
     });
     const observerRef = (node) => {
       observer.disconnect();
-      if (isNotEmpty(node)) {
-        observer.observe(node);
+      if (!isNotEmpty(node)) {
+        return;
+      }
+      observer.observe(node);
+      if (!optionsRef.current.isDisabled) {
+        optionsRef.current.onTargetChange?.(node);
       }
     };
     return { ref: observerRef, disconnect: () => observer.disconnect() };
@@ -4148,13 +4153,9 @@ const ControlWrapper = ({
     className: "tweakPreloader",
     currentComponentName: "ControlWrapper"
   });
-  const startControlsRef = useCallback(
-    (node) => {
-      setStartControlsWidth(node?.clientWidth);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [startIcon, size2]
-  );
+  const startControlsRef = useResizeRef({
+    onTargetChange: (target) => setStartControlsWidth(target.clientWidth)
+  });
   const renderIconControl = ({ key, iconComponent, onClick, shouldResetSize = false }, iconType, index) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -4376,12 +4377,9 @@ const InputBase = forwardRef(function InputBase2({
     await onChange("", event, "clear");
     inputRef.current?.focus();
   };
-  const unitsRef = useCallback(
-    (node) => {
-      setUnitsWidth(node?.clientWidth);
-    },
-    [units]
-  );
+  const unitsRef = useResizeRef({
+    onTargetChange: (target) => setUnitsWidth(target.clientWidth)
+  });
   const props = {
     className: clsx(classes.input, {
       [classes.withUnits]: hasUnits,