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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha63",
+  "version": "4.0.0-alpha64",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, ReactNode, useCallback, useState } from 'react';
+import { CSSProperties, FC, ReactNode, useState } from 'react';
 import clsx from 'clsx';
 import {
   addClickHandler,
@@ -10,7 +10,7 @@ import {
   isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { useTweakStyles } from '../../hooks';
+import { useResizeRef, useTweakStyles } from '../../hooks';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
@@ -85,13 +85,9 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
     currentComponentName: 'ControlWrapper',
   });
 
-  const startControlsRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      setStartControlsWidth(node?.clientWidth);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [startIcon, size],
-  );
+  const startControlsRef = useResizeRef({
+    onTargetChange: (target) => setStartControlsWidth(target.clientWidth),
+  });
 
   const renderIconControl = (
     { key, iconComponent, onClick, shouldResetSize = false }: IControlWrapperIcon,

package/src/components/Input/InputBase.tsx

@@ -6,7 +6,6 @@ import {
   InputHTMLAttributes,
   MutableRefObject,
   ReactNode,
-  useCallback,
   useEffect,
   useRef,
   useState,
@@ -20,7 +19,7 @@ import {
   isReactNodeNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { useMergedRefs, useTweakStyles } from '../../hooks';
+import { useMergedRefs, useResizeRef, useTweakStyles } from '../../hooks';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
 import { IChangeInputEvent } from './types';
@@ -156,12 +155,9 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(function
     inputRef.current?.focus();
   };
 
-  const unitsRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      setUnitsWidth(node?.clientWidth);
-    },
-    [units],
-  );
+  const unitsRef = useResizeRef({
+    onTargetChange: (target) => setUnitsWidth(target.clientWidth),
+  });
 
   const props: InputHTMLAttributes<HTMLInputElement> = {
     className: clsx(classes.input, {

package/src/hooks/use-resize-ref.ts

@@ -5,7 +5,8 @@ import { useLatestRef } from './use-latest-ref';
 export interface IResizeRefOptions {
   /** @default false */
   isDisabled?: boolean;
-  onChange: (entry: ResizeObserverEntry) => void;
+  onChange?: (entry: ResizeObserverEntry) => void;
+  onTargetChange?: (target: Element) => void;
 }
 
 export const useResizeRef = (options: IResizeRefOptions): RefCallback<Element> => {
@@ -15,14 +16,20 @@ export const useResizeRef = (options: IResizeRefOptions): RefCallback<Element> =
     const observer = new ResizeObserver(([entry]) => {
       const { current } = optionsRef;
       if (!current.isDisabled) {
-        current?.onChange(entry);
+        current.onChange?.(entry);
+        current.onTargetChange?.(entry.target);
       }
     });
 
     const observerRef: RefCallback<Element> = (node) => {
       observer.disconnect();
-      if (isNotEmpty(node)) {
-        observer.observe(node);
+      if (!isNotEmpty(node)) {
+        return;
+      }
+
+      observer.observe(node);
+      if (!optionsRef.current.isDisabled) {
+        optionsRef.current.onTargetChange?.(node);
       }
     };