@trackunit/react-form-components 1.8.44 → 1.8.46

package/index.cjs.js

@@ -434,9 +434,30 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
     const beforeContainerRef = react.useRef(null);
-    const { width: beforeContainerWidth } = reactComponents.useGeometry(beforeContainerRef);
     const afterContainerRef = react.useRef(null);
-    const { width: afterContainerWidth } = reactComponents.useGeometry(afterContainerRef);
+    react.useEffect(() => {
+        const setVars = () => {
+            const beforeEl = beforeContainerRef.current || null;
+            const afterEl = afterContainerRef.current || null;
+            if (beforeEl) {
+                beforeEl.parentElement?.style.setProperty("--before-width", `${Math.ceil(beforeEl.offsetWidth)}px`);
+            }
+            if (afterEl) {
+                afterEl.parentElement?.style.setProperty("--after-width", `${Math.ceil(afterEl.offsetWidth)}px`);
+            }
+        };
+        const ro = new ResizeObserver(setVars);
+        const beforeElement = beforeContainerRef.current || null;
+        const afterElement = afterContainerRef.current || null;
+        if (beforeElement) {
+            ro.observe(beforeElement);
+        }
+        if (afterElement) {
+            ro.observe(afterElement);
+        }
+        requestAnimationFrame(setVars);
+        return () => ro.disconnect();
+    }, []);
     // Keep a reference to the input element
     const innerRef = react.useRef(null);
     react.useImperativeHandle(ref, () => innerRef.current, []);
@@ -452,8 +473,8 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
                     disabled: renderAsDisabled,
                     className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
                 }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, style: {
-                    paddingLeft: beforeContainerWidth ? `calc(${beforeContainerWidth}px + ${uiDesignTokens.themeSpacing[2]})` : undefined,
-                    paddingRight: afterContainerWidth ? `calc(${afterContainerWidth}px + ${uiDesignTokens.themeSpacing[2]})` : undefined,
+                    paddingLeft: `calc(var(--before-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
+                    paddingRight: `calc(var(--after-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
                 }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: rest.readOnly && !rest.disabled ? rest.readOnly : undefined }), jsxRuntime.jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsxRuntime.jsx(SuffixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsxRuntime.jsx(AddonRenderer, { addon: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
 };
 BaseInput.displayName = "BaseInput";
@@ -1026,7 +1047,7 @@ const cvaInputColorField = cssClassVarianceUtilities.cvaMerge([
  * Validates if the given value is a valid hex color.
  *
  * @param value - The string value to be validated.
- * @returns True if the value is a valid hex color, otherwise false.
+ * @returns {boolean} True if the value is a valid hex color, otherwise false.
  */
 const isValidHEXColor = (value) => {
     const hexRegex = /^#([0-9A-F]{6})$/i;
@@ -1257,7 +1278,7 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, dataTestId, is
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsxRuntime.jsx(BaseInput, { actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
+    return (jsxRuntime.jsx(BaseInput, { actions: email && email.length > 0 ? (jsxRuntime.jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
 };
 
 /**

package/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
 import { Temporal } from '@js-temporal/polyfill';
-import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Text, Heading, Tag, Spinner, MenuItem, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, useIsTextTruncated, Text, Heading, Tag, Spinner, MenuItem, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
-import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect, useState, useMemo, cloneElement, createContext, useContext, isValidElement, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useEffect, useImperativeHandle, useCallback, useState, useMemo, cloneElement, createContext, useContext, isValidElement, useLayoutEffect } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { titleCase } from 'string-ts';
 import { useCopyToClipboard } from 'usehooks-ts';
@@ -433,9 +433,30 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
     const beforeContainerRef = useRef(null);
-    const { width: beforeContainerWidth } = useGeometry(beforeContainerRef);
     const afterContainerRef = useRef(null);
-    const { width: afterContainerWidth } = useGeometry(afterContainerRef);
+    useEffect(() => {
+        const setVars = () => {
+            const beforeEl = beforeContainerRef.current || null;
+            const afterEl = afterContainerRef.current || null;
+            if (beforeEl) {
+                beforeEl.parentElement?.style.setProperty("--before-width", `${Math.ceil(beforeEl.offsetWidth)}px`);
+            }
+            if (afterEl) {
+                afterEl.parentElement?.style.setProperty("--after-width", `${Math.ceil(afterEl.offsetWidth)}px`);
+            }
+        };
+        const ro = new ResizeObserver(setVars);
+        const beforeElement = beforeContainerRef.current || null;
+        const afterElement = afterContainerRef.current || null;
+        if (beforeElement) {
+            ro.observe(beforeElement);
+        }
+        if (afterElement) {
+            ro.observe(afterElement);
+        }
+        requestAnimationFrame(setVars);
+        return () => ro.disconnect();
+    }, []);
     // Keep a reference to the input element
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current, []);
@@ -451,8 +472,8 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
                     disabled: renderAsDisabled,
                     className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
                 }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, style: {
-                    paddingLeft: beforeContainerWidth ? `calc(${beforeContainerWidth}px + ${themeSpacing[2]})` : undefined,
-                    paddingRight: afterContainerWidth ? `calc(${afterContainerWidth}px + ${themeSpacing[2]})` : undefined,
+                    paddingLeft: `calc(var(--before-width, 0px) + ${themeSpacing[2]})`,
+                    paddingRight: `calc(var(--after-width, 0px) + ${themeSpacing[2]})`,
                 }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: rest.readOnly && !rest.disabled ? rest.readOnly : undefined }), jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsx(SuffixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsx(AddonRenderer, { addon: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
 };
 BaseInput.displayName = "BaseInput";
@@ -1025,7 +1046,7 @@ const cvaInputColorField = cvaMerge([
  * Validates if the given value is a valid hex color.
  *
  * @param value - The string value to be validated.
- * @returns True if the value is a valid hex color, otherwise false.
+ * @returns {boolean} True if the value is a valid hex color, otherwise false.
  */
 const isValidHEXColor = (value) => {
     const hexRegex = /^#([0-9A-F]{6})$/i;
@@ -1256,7 +1277,7 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, dataTestId, is
         setEmail(newValue);
     }, [onChange]);
     const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
-    return (jsx(BaseInput, { actions: email && email.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
+    return (jsx(BaseInput, { actions: email && email.length > 0 ? (jsx(ActionButton, { dataTestId: dataTestId ? `${dataTestId}-emailIcon` : undefined, disabled: disableAction || isInvalid, onClick: sendEmail, size: fieldSize ?? undefined, type: "EMAIL", value: email })) : null, dataTestId: dataTestId, disabled: disabled, fieldSize: fieldSize, isInvalid: renderAsInvalid, onChange: handleChange, placeholder: rest.placeholder || "mail@example.com", ref: ref, type: "email", ...rest }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.8.44",
+  "version": "1.8.46",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,14 +16,14 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.7.29",
-    "@trackunit/react-components": "1.9.43",
-    "@trackunit/ui-icons": "1.7.31",
-    "@trackunit/shared-utils": "1.9.29",
-    "@trackunit/ui-design-tokens": "1.7.30",
-    "@trackunit/i18n-library-translation": "1.7.35",
+    "@trackunit/css-class-variance-utilities": "1.7.30",
+    "@trackunit/react-components": "1.9.44",
+    "@trackunit/ui-icons": "1.7.32",
+    "@trackunit/shared-utils": "1.9.30",
+    "@trackunit/ui-design-tokens": "1.7.31",
+    "@trackunit/i18n-library-translation": "1.7.36",
     "string-ts": "^2.0.0",
-    "@trackunit/react-test-setup": "1.4.29",
+    "@trackunit/react-test-setup": "1.4.30",
     "@js-temporal/polyfill": "^0.5.1"
   },
   "module": "./index.esm.js",

package/src/components/ColorField/ColorField.d.ts

@@ -5,7 +5,7 @@ type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" |
  * Validates if the given value is a valid hex color.
  *
  * @param value - The string value to be validated.
- * @returns True if the value is a valid hex color, otherwise false.
+ * @returns {boolean} True if the value is a valid hex color, otherwise false.
  */
 export declare const isValidHEXColor: (value: string) => boolean;
 export interface ColorFieldProps extends FormGroupExposedProps, BaseInputProps {