Fix input label bug size

Author: Kubit

src/components/inputCurrency/inputCurrencyStandAlone.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ScreenReaderOnly } from '@/components/screenReaderOnly';
 import { Text, TextComponentType } from '@/components/text';
 import { useId } from '@/hooks';
+import { useElementBoundingClientRect } from '@/hooks/useElementBoundingClientRect/useElementBoundingClientRect';
 import { POSITIONS } from '@/types/positions';
 import { pxToRem } from '@/utils';
 
@@ -18,6 +19,11 @@ export const InputCurrencyStandAloneComponent = (
   ref: React.ForwardedRef<HTMLInputElement | undefined>
 ): JSX.Element => {
   const [width, setWidth] = React.useState(0);
+
+  const { measures } = useElementBoundingClientRect({
+    ref: ref as React.MutableRefObject<HTMLInputElement>,
+  });
+
   const measuredRef = React.useCallback(node => {
     if (node !== null) {
       const widthWithMargin =
@@ -127,7 +133,8 @@ export const InputCurrencyStandAloneComponent = (
           width,
           props.currencyNameContainerPosition === InputContentPosition.OUT ||
             props.styles?.[props.state]?.currencyNameContainerPosition === InputContentPosition.OUT,
-          props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position
+          props.helpMessagePosition ?? props.styles?.[props.state]?.helpMessage?.position,
+          measures?.width
         )
       }
       truncate={true}

src/components/inputPhone/inputPhoneStandAlone.tsx

@@ -3,6 +3,7 @@ import React, { ForwardedRef, forwardRef, useCallback, useState } from 'react';
 import { ElementOrIcon } from '@/components/elementOrIcon';
 import { Text } from '@/components/text';
 import { useId } from '@/hooks';
+import { useElementBoundingClientRect } from '@/hooks/useElementBoundingClientRect/useElementBoundingClientRect';
 import { POSITIONS } from '@/types';
 import { pxToRem } from '@/utils';
 
@@ -18,6 +19,11 @@ export const InputPhoneStandAloneComponent = (
   ref: ForwardedRef<HTMLInputElement | undefined>
 ): JSX.Element => {
   const [width, setWidth] = useState(0);
+
+  const { measures } = useElementBoundingClientRect({
+    ref: ref as React.MutableRefObject<HTMLInputElement>,
+  });
+
   const measuredRef = useCallback(node => {
     if (node !== null) {
       const widthWithMargin =
@@ -39,6 +45,7 @@ export const InputPhoneStandAloneComponent = (
   const flagVariant =
     props.flag?.variant ?? props.styles?.[props.state]?.affixIconHighlighted?.variant;
   const flagSize = props.flag?.size ?? props.styles?.[props.state]?.affixIconHighlighted?.size;
+
   const renderAffix = () => (
     <AffixStyled ref={measuredRef} id={extraAriaLabelledBy} styles={props.styles?.[props.state]}>
       {props.prefixNode ? (
@@ -123,7 +130,8 @@ export const InputPhoneStandAloneComponent = (
             POSITIONS.LEFT,
             width,
             props.styles?.[props.state]?.affixContainerPosition === InputContentPosition.OUT,
-            props.styles?.[props.state]?.helpMessage?.position
+            props.styles?.[props.state]?.helpMessage?.position,
+            measures?.width
           )
         }
         variant={props.inputVariant ?? props.styles?.[props.state]?.inputVariant}

src/hooks/index.ts

@@ -17,3 +17,4 @@ export { useScrollEffect } from './useScrollEffect/useScrollEffect';
 export * from './useScrollPosition/useScrollPosition';
 export { useZoomEffect } from './useZoomEffect/useZoomEffect';
 export { useDeviceHeight } from './useDeviceHeight/useDeviceHeight';
+export { useElementBoundingClientRect } from './useElementBoundingClientRect/useElementBoundingClientRect';

src/hooks/useElementBoundingClientRect/__tests__/useElementBoundingClientRect.test.ts

@@ -0,0 +1,24 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+
+import { useElementBoundingClientRect } from '../useElementBoundingClientRect';
+
+describe('useElementBoundingClientRect Hook', () => {
+  it('should return the correct bounding client rect', () => {
+    const ref = { current: document.createElement('div') };
+    const { result } = renderHook(() => useElementBoundingClientRect({ ref }));
+
+    act(() => {
+      // Simulate a resize event
+      window.dispatchEvent(new Event('resize'));
+    });
+
+    expect(result.current.measures).toEqual(ref.current.getBoundingClientRect());
+  });
+
+  it('should return undefined if the element reference is null', () => {
+    const ref = { current: null };
+    const { result } = renderHook(() => useElementBoundingClientRect({ ref }));
+
+    expect(result.current.measures).toBeUndefined();
+  });
+});

src/hooks/useElementBoundingClientRect/useElementBoundingClientRect.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+interface Params {
+  ref?: React.MutableRefObject<HTMLElement | null>;
+}
+
+interface ReturnValue {
+  measures?: DOMRect;
+}
+
+/**
+ * Custom hook that returns the bounding client rect of a specified element.
+ *
+ * @param {Params} props - The hook parameters.
+ * @param {React.MutableRefObject<HTMLElement | null>} props.ref - The reference to the element.
+ *
+ * @returns {ReturnValue} - The hook return value.
+ * @returns {DOMRect | undefined} ReturnValue.measures - The bounding client rect of the element.
+ */
+export const useElementBoundingClientRect = (props: Params): ReturnValue => {
+  const [measures, setMeasures] = React.useState<DOMRect | undefined>(undefined);
+
+  React.useEffect(() => {
+    const element = props.ref?.current;
+    if (!element) {
+      return () => null;
+    }
+
+    const getMeasures = () => {
+      if (element) {
+        const measure = element?.getBoundingClientRect();
+        setMeasures(measure);
+      }
+    };
+
+    getMeasures();
+
+    window.addEventListener('resize', getMeasures);
+    return () => window.removeEventListener('resize', getMeasures);
+  }, [props.ref]);
+
+  return { measures };
+};

src/styles/mixins/input.mixin.ts

@@ -73,7 +73,7 @@ export const mapLabelTypeStyles = (props: LabelStyledProps): CSSProp => {
         `
       : css`
           display: inline-block;
-          width: 100%;
+          /* width: 100%; */
         `;
 
   const isFilledLabel = ({ styles, leftExtraStyles }: LabelStyledProps): CSSProp =>
@@ -256,17 +256,17 @@ export const helpMessageMargin = (marginLeft: number): CSSProp => css`
 `;
 
 // label is not STANDARD (absolute position) and input has inner left content
-export const labelInTopStyles = (marginLeft: number): CSSProp => css`
+export const labelInTopStyles = (marginLeft: number, affixWidth: number): CSSProp => css`
   > div {
     margin-left: ${marginLeft}rem;
-    width: calc(100% - ${marginLeft}rem);
+    width: ${affixWidth}px;
   }
   /* We need to write the CSS code inside this CSS extension, which will only be applied to the web page when opening the Firefox browser. */
   /* Firefox need a explicit position when you use position:absolute; */
   @-moz-document url-prefix() {
     label {
       left: calc(${marginLeft}rem);
-      width: calc(100% - ${marginLeft}rem);
+      width: ${affixWidth}px;
     }
   }
 `;