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

package/dist/components/List/components/ListItem/ListItem.styles.d.ts

@@ -1,4 +1,4 @@
 import { ITweakStyles } from '../../../../theme';
 import { IListSizes as IListItemSizes } from '../../types';
-export declare const useStyles: import('../../../../theme').IUseStyles<"content" | "root" | "default" | "destructive" | "focused" | "disabledItem" | "spacer" | "withIconGap" | "icon">;
+export declare const useStyles: import('../../../../theme').IUseStyles<"content" | "root" | "default" | "destructive" | "focused" | "disabledItem" | "spacer" | "withIconGap" | "icon" | "chevron">;
 export type IListItemStyles = ITweakStyles<typeof useStyles, IListItemSizes>;

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() };
@@ -3157,7 +3162,8 @@ const useStyles$V = createThemedStyles("ListItem", {
   },
   content: {
     flexGrow: 1
-  }
+  },
+  chevron: {}
 });
 const ListItem = ({
   icon,
@@ -3191,7 +3197,7 @@ const ListItem = ({
         children: [
           isReactNodeNotEmpty(icon) && /* @__PURE__ */ jsx("span", { className: classes.icon, children: renderIcon(icon) }),
           /* @__PURE__ */ jsx("span", { className: classes.content, children: item }),
-          isArrayNotEmpty(nestedItems) && /* @__PURE__ */ jsx("span", { className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { type: "chevron-right" }) })
+          isArrayNotEmpty(nestedItems) && /* @__PURE__ */ jsx("span", { className: clsx(classes.icon, classes.chevron), children: /* @__PURE__ */ jsx(Icon, { type: "chevron-right" }) })
         ]
       }
     ),
@@ -4147,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",
     {
@@ -4375,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,