@trackunit/react-form-components 1.8.44 → 1.8.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/index.cjs.js +26 -5
  2. package/index.esm.js +28 -7
  3. package/package.json +1 -1
package/index.cjs.js CHANGED
@@ -434,9 +434,30 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
434
434
  const renderAsDisabled = Boolean(rest.disabled);
435
435
  const renderAsReadonly = Boolean(rest.readOnly);
436
436
  const beforeContainerRef = react.useRef(null);
437
- const { width: beforeContainerWidth } = reactComponents.useGeometry(beforeContainerRef);
438
437
  const afterContainerRef = react.useRef(null);
439
- const { width: afterContainerWidth } = reactComponents.useGeometry(afterContainerRef);
438
+ react.useEffect(() => {
439
+ const setVars = () => {
440
+ const beforeEl = beforeContainerRef.current || null;
441
+ const afterEl = afterContainerRef.current || null;
442
+ if (beforeEl) {
443
+ beforeEl.parentElement?.style.setProperty("--before-width", `${Math.ceil(beforeEl.offsetWidth)}px`);
444
+ }
445
+ if (afterEl) {
446
+ afterEl.parentElement?.style.setProperty("--after-width", `${Math.ceil(afterEl.offsetWidth)}px`);
447
+ }
448
+ };
449
+ const ro = new ResizeObserver(setVars);
450
+ const beforeElement = beforeContainerRef.current || null;
451
+ const afterElement = afterContainerRef.current || null;
452
+ if (beforeElement) {
453
+ ro.observe(beforeElement);
454
+ }
455
+ if (afterElement) {
456
+ ro.observe(afterElement);
457
+ }
458
+ requestAnimationFrame(setVars);
459
+ return () => ro.disconnect();
460
+ }, []);
440
461
  // Keep a reference to the input element
441
462
  const innerRef = react.useRef(null);
442
463
  react.useImperativeHandle(ref, () => innerRef.current, []);
@@ -452,8 +473,8 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
452
473
  disabled: renderAsDisabled,
453
474
  className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
454
475
  }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, style: {
455
- paddingLeft: beforeContainerWidth ? `calc(${beforeContainerWidth}px + ${uiDesignTokens.themeSpacing[2]})` : undefined,
456
- paddingRight: afterContainerWidth ? `calc(${afterContainerWidth}px + ${uiDesignTokens.themeSpacing[2]})` : undefined,
476
+ paddingLeft: `calc(var(--before-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
477
+ paddingRight: `calc(var(--after-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
457
478
  }, 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" })] })] }));
458
479
  };
459
480
  BaseInput.displayName = "BaseInput";
@@ -1257,7 +1278,7 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, dataTestId, is
1257
1278
  setEmail(newValue);
1258
1279
  }, [onChange]);
1259
1280
  const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
1260
- 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 }));
1281
+ 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 }));
1261
1282
  };
1262
1283
 
1263
1284
  /**
package/index.esm.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
3
3
  import { Temporal } from '@js-temporal/polyfill';
4
- import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Text, Heading, Tag, Spinner, MenuItem, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
4
+ import { IconButton, Icon, Tooltip, useIsTextTruncated, Text, Heading, Tag, Spinner, MenuItem, useResize, useDebounce, useIsFirstRender } from '@trackunit/react-components';
5
5
  import { themeSpacing } from '@trackunit/ui-design-tokens';
6
- import { forwardRef, useRef, useImperativeHandle, useCallback, useEffect, useState, useMemo, cloneElement, createContext, useContext, isValidElement, useLayoutEffect } from 'react';
6
+ import { forwardRef, useRef, useEffect, useImperativeHandle, useCallback, useState, useMemo, cloneElement, createContext, useContext, isValidElement, useLayoutEffect } from 'react';
7
7
  import { cvaMerge } from '@trackunit/css-class-variance-utilities';
8
8
  import { titleCase } from 'string-ts';
9
9
  import { useCopyToClipboard } from 'usehooks-ts';
@@ -433,9 +433,30 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
433
433
  const renderAsDisabled = Boolean(rest.disabled);
434
434
  const renderAsReadonly = Boolean(rest.readOnly);
435
435
  const beforeContainerRef = useRef(null);
436
- const { width: beforeContainerWidth } = useGeometry(beforeContainerRef);
437
436
  const afterContainerRef = useRef(null);
438
- const { width: afterContainerWidth } = useGeometry(afterContainerRef);
437
+ useEffect(() => {
438
+ const setVars = () => {
439
+ const beforeEl = beforeContainerRef.current || null;
440
+ const afterEl = afterContainerRef.current || null;
441
+ if (beforeEl) {
442
+ beforeEl.parentElement?.style.setProperty("--before-width", `${Math.ceil(beforeEl.offsetWidth)}px`);
443
+ }
444
+ if (afterEl) {
445
+ afterEl.parentElement?.style.setProperty("--after-width", `${Math.ceil(afterEl.offsetWidth)}px`);
446
+ }
447
+ };
448
+ const ro = new ResizeObserver(setVars);
449
+ const beforeElement = beforeContainerRef.current || null;
450
+ const afterElement = afterContainerRef.current || null;
451
+ if (beforeElement) {
452
+ ro.observe(beforeElement);
453
+ }
454
+ if (afterElement) {
455
+ ro.observe(afterElement);
456
+ }
457
+ requestAnimationFrame(setVars);
458
+ return () => ro.disconnect();
459
+ }, []);
439
460
  // Keep a reference to the input element
440
461
  const innerRef = useRef(null);
441
462
  useImperativeHandle(ref, () => innerRef.current, []);
@@ -451,8 +472,8 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
451
472
  disabled: renderAsDisabled,
452
473
  className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
453
474
  }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, style: {
454
- paddingLeft: beforeContainerWidth ? `calc(${beforeContainerWidth}px + ${themeSpacing[2]})` : undefined,
455
- paddingRight: afterContainerWidth ? `calc(${afterContainerWidth}px + ${themeSpacing[2]})` : undefined,
475
+ paddingLeft: `calc(var(--before-width, 0px) + ${themeSpacing[2]})`,
476
+ paddingRight: `calc(var(--after-width, 0px) + ${themeSpacing[2]})`,
456
477
  }, 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" })] })] }));
457
478
  };
458
479
  BaseInput.displayName = "BaseInput";
@@ -1256,7 +1277,7 @@ const EmailBaseInput = ({ fieldSize = "medium", disabled = false, dataTestId, is
1256
1277
  setEmail(newValue);
1257
1278
  }, [onChange]);
1258
1279
  const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
1259
- 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 }));
1280
+ 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 }));
1260
1281
  };
1261
1282
 
1262
1283
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-form-components",
3
- "version": "1.8.44",
3
+ "version": "1.8.45",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {