@trackunit/react-form-components 1.0.50 → 1.0.57

package/index.cjs.js

@@ -5,7 +5,9 @@ var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
 var usehooksTs = require('usehooks-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var React = require('react');
+var stringTs = require('string-ts');
 var sharedUtils = require('@trackunit/shared-utils');
 var polyfill = require('@js-temporal/polyfill');
 var parsePhoneNumberFromString = require('libphonenumber-js');
@@ -134,7 +136,7 @@ const cvaActionContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-ce
             //might need tweaking in the future
             small: ["m-[1px]"],
             medium: ["m-[3px]"],
-            large: ["m-[3px]"],
+            large: ["m-[7px]"],
         },
     },
     defaultVariants: {
@@ -182,7 +184,8 @@ const ActionButton = ({ type, value, dataTestId, size, disabled, className }) =>
                 return null;
         }
     };
-    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className, size }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: size }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
+    const adjustedIconSize = size === "large" ? "medium" : size;
+    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className, size }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: adjustedIconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
 };
 
 const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
@@ -196,7 +199,17 @@ const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
 ]);
 const cvaInputBaseDisabled = cssClassVarianceUtilities.cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
 const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600"]);
-const cvaInput = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
+const cvaInput = cssClassVarianceUtilities.cvaMerge([
+    "overflow-hidden",
+    "grid",
+    // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
+    // The min restriction of the middle column (--spacing-20) is
+    // effectively the minimum width available for the text input
+    "grid-cols-[min-content,minmax(var(--spacing-20),1fr),min-content]",
+    "grid-rows-1",
+    cvaInputBase(),
+    "focus-within:outline-native",
+], {
     variants: {
         size: {
             small: ["h-7"],
@@ -225,19 +238,30 @@ const cvaInput = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-10",
     ],
     defaultVariants: {
         size: "medium",
+        disabled: false,
+        invalid: false,
+        isWarning: false,
     },
 });
-const cvaInputField = cssClassVarianceUtilities.cvaMerge([
-    "w-full",
-    "px-3",
-    "border-0",
-    "bg-transparent",
-    "text-slate-900",
-    "placeholder-slate-400",
-    "component-baseInput-border",
-    "text-sm",
-    "truncate",
-], {
+/**
+ * Used for placing items in the grid, using a grid z-stack trick.
+ * The span position is used for the input field, which spans the entire grid.
+ *! Relies on the specific grid layout of cvaInput ☝️
+ */
+const cvaInputItemPlacementManager = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        position: {
+            before: ["col-start-1", "col-end-2", "row-start-1", "row-end-1"],
+            after: ["col-start-3", "col-end-4", "row-start-1", "row-end-1"],
+            span: ["col-start-1", "col-end-4", "row-start-1", "row-end-1"],
+        },
+    },
+    defaultVariants: {
+        position: "span",
+    },
+});
+const cvaAccessoriesContainer = cssClassVarianceUtilities.cvaMerge(["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"]);
+const cvaInputField = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-slate-900", "placeholder-slate-400", "text-sm", "truncate"], {
     variants: {
         size: {
             small: ["py-0.5", "text-xs"],
@@ -252,31 +276,19 @@ const cvaInputField = cssClassVarianceUtilities.cvaMerge([
             true: ["text-slate-500"],
             false: [""],
         },
-        autoFocus: {
-            true: [""],
-            false: ["focus-visible:outline-none"],
-        },
-        addonBefore: {
-            true: [""],
-            false: [""],
-        },
-        prefix: {
-            true: ["ps-10"],
-            false: [""],
-        },
     },
     compoundVariants: [
-        {
-            addonBefore: true,
-            prefix: true,
-            className: ["ps-4"],
-        },
         {
             disabled: true,
             readOnly: true,
             className: "text-slate-400",
         },
     ],
+    defaultVariants: {
+        size: "medium",
+        disabled: false,
+        readOnly: false,
+    },
 });
 const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
     "flex",
@@ -286,14 +298,21 @@ const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
     "border-slate-300",
     "text-slate-500",
     "bg-slate-50",
-]);
-const cvaInputAddonBefore = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"], {
+    "text-nowrap",
+], {
     variants: {
         size: {
             small: ["text-xs"],
             medium: ["text-sm"],
             large: ["text-sm"],
         },
+        position: {
+            before: ["border-e", "rounded-s-lg"],
+            after: ["border-s", "rounded-e-lg"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
     },
 });
 const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
@@ -304,68 +323,38 @@ const cvaInputPrefix = cssClassVarianceUtilities.cvaMerge([
     "hover:component-search-prefix",
     "component-baseInput-prefix",
     "component-search-borderless",
-    "pl-3",
-    "absolute",
-    "inset-y-0",
+    "pl-2",
 ], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
             false: [""],
         },
-        addonBefore: {
-            true: ["relative", "mr-1"],
-            false: [""],
-        },
+    },
+    defaultVariants: {
+        disabled: false,
     },
 });
-const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3", "absolute", "inset-y-0", "right-0"], {
+const cvaInputSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pr-2"], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
             false: [""],
         },
-        addonAfter: {
-            true: ["relative"],
-            false: [""],
-        },
-        actions: {
-            true: ["right-6"],
-            false: [""],
-        },
     },
-    compoundVariants: [
-        {
-            addonAfter: true,
-            actions: true,
-            className: ["right-0"],
-        },
-    ],
-});
-const cvaInputAddonAfter = cssClassVarianceUtilities.cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg", "ml-[1px]"], {
-    variants: {
-        size: {
-            small: ["text-xs"],
-            medium: ["text-sm"],
-            large: ["text-sm"],
-        },
+    defaultVariants: {
+        disabled: false,
     },
 });
 
-// Renders the "addonAfter" element if provided
-const AddonAfterRenderer = ({ addonAfter, dataTestId, fieldSize, }) => {
-    if (!addonAfter) {
-        return null;
-    }
-    return (jsxRuntime.jsx("div", { className: cvaInputAddonAfter({ size: fieldSize }), "data-testid": dataTestId ? `${dataTestId}-addonAfter` : null, children: addonAfter }));
-};
-
-// Renders the "addonBefore" element if provided
-const AddonBeforeRenderer = ({ addonBefore, addonBeforeClassName, dataTestId, fieldSize, }) => {
-    if (!addonBefore) {
+/**
+ * Renders the addon element if provided
+ */
+const AddonRenderer = ({ addon, dataTestId, className, fieldSize, position }) => {
+    if (!addon) {
         return null;
     }
-    return (jsxRuntime.jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName, size: fieldSize }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore }));
+    return (jsxRuntime.jsx("div", { className: cvaInputAddon({ size: fieldSize, position, className }), "data-testid": dataTestId ? `${dataTestId}-addon${stringTs.titleCase(position)}` : null, children: addon }));
 };
 
 // Renders generic actions like "copy" if specified
@@ -404,7 +393,7 @@ const LockReasonRenderer = ({ lockReason, dataTestId, }) => {
 };
 
 // Renders the prefix element or falls back to a default prefix for certain types
-const PrefixRenderer = ({ prefix, type, addonBefore, dataTestId, disabled, }) => {
+const PrefixRenderer = React.forwardRef(({ prefix, type, dataTestId, disabled }, ref) => {
     // Default icons for specific input types
     const defaultPrefixMap = {
         email: jsxRuntime.jsx(reactComponents.Icon, { name: "AtSymbol", size: "small" }),
@@ -416,25 +405,21 @@ const PrefixRenderer = ({ prefix, type, addonBefore, dataTestId, disabled, }) =>
     if (!resolvedPrefix) {
         return null;
     }
-    return (jsxRuntime.jsx("div", { className: cvaInputPrefix({ disabled, addonBefore: addonBefore !== undefined }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: resolvedPrefix }));
-};
+    return (jsxRuntime.jsx("div", { className: cvaInputPrefix({ disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: ref, children: resolvedPrefix }));
+});
 
 // Renders the suffix element or shows an icon if invalid/warning
-const SuffixRenderer = ({ suffix, addonAfter, actions, isInvalid, isWarning, dataTestId, disabled, }) => {
+const SuffixRenderer = ({ suffix, isInvalid, isWarning, dataTestId, disabled, }) => {
     // If user provided suffix that's not identical to addonBefore, render it
     if (suffix) {
         return (jsxRuntime.jsx("div", { className: cvaInputSuffix({
                 disabled,
-                addonAfter: addonAfter !== undefined,
-                actions: Boolean(actions),
             }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix }));
     }
     // If invalid or warning, render an icon (unless within FormGroup)
     if (isInvalid || isWarning) {
         return (jsxRuntime.jsx("div", { className: cvaInputSuffix({
                 disabled,
-                addonAfter: addonAfter !== undefined,
-                actions: Boolean(actions),
                 // Hides the icon if inside a FormGroup
                 className: "group-[.form-group]:hidden",
             }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: jsxRuntime.jsx(reactComponents.Icon, { color: isInvalid ? "danger" : "warning", name: "ExclamationTriangle", size: "small" }) }));
@@ -450,10 +435,14 @@ const SuffixRenderer = ({ suffix, addonAfter, actions, isInvalid, isWarning, dat
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
-const BaseInput = React.forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, addonBeforeClassName, isWarning, type, genericAction, style, ...rest }, ref) => {
+const BaseInput = React.forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning, type, genericAction, style, ...rest }, ref) => {
     // Derive final flags
     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);
     // Keep a reference to the input element
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current, []);
@@ -463,15 +452,15 @@ const BaseInput = React.forwardRef(({ className, isInvalid, dataTestId, prefix,
             isWarning,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, style: style, children: [jsxRuntime.jsx(AddonBeforeRenderer, { addonBefore: addonBefore, addonBeforeClassName: addonBeforeClassName, dataTestId: dataTestId, fieldSize: fieldSize }), jsxRuntime.jsx(PrefixRenderer, { addonBefore: addonBefore, dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type }), jsxRuntime.jsx("input", { "aria-required": rest.required, className: cvaInputField({
-                    autoFocus: rest.autoFocus,
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsxRuntime.jsx(AddonRenderer, { addon: addonBefore, dataTestId: dataTestId, fieldSize: fieldSize, position: "before" }), jsxRuntime.jsx(PrefixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsxRuntime.jsx("input", { "aria-required": rest.required, className: cvaInputField({
                     readOnly: renderAsReadonly,
                     size: fieldSize,
                     disabled: renderAsDisabled,
-                    className: inputClassName,
-                    addonBefore: addonBefore !== undefined,
-                    prefix: !!prefix || (type && type !== "text"),
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), 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, { actions: actions, addonAfter: addonAfter, dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsxRuntime.jsx(AddonAfterRenderer, { addonAfter: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize })] }));
+                    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,
+                }, 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";
 
@@ -2980,16 +2969,16 @@ exports.UrlField = UrlField;
 exports.UrlInput = UrlInput;
 exports.checkIfPhoneNumberHasPlus = checkIfPhoneNumberHasPlus;
 exports.countryCodeToFlagEmoji = countryCodeToFlagEmoji;
+exports.cvaAccessoriesContainer = cvaAccessoriesContainer;
 exports.cvaActionButton = cvaActionButton;
 exports.cvaActionContainer = cvaActionContainer;
 exports.cvaInput = cvaInput;
 exports.cvaInputAddon = cvaInputAddon;
-exports.cvaInputAddonAfter = cvaInputAddonAfter;
-exports.cvaInputAddonBefore = cvaInputAddonBefore;
 exports.cvaInputBase = cvaInputBase;
 exports.cvaInputBaseDisabled = cvaInputBaseDisabled;
 exports.cvaInputBaseInvalid = cvaInputBaseInvalid;
 exports.cvaInputField = cvaInputField;
+exports.cvaInputItemPlacementManager = cvaInputItemPlacementManager;
 exports.cvaInputPrefix = cvaInputPrefix;
 exports.cvaInputSuffix = cvaInputSuffix;
 exports.cvaSelect = cvaSelect;

package/index.esm.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
-import { IconButton, Icon, Tooltip, useIsTextTruncated, Heading, Text, Spinner, MenuItem, Tag, useIsFirstRender } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, useGeometry, useIsTextTruncated, Heading, Text, Spinner, MenuItem, Tag, useIsFirstRender } from '@trackunit/react-components';
 import { useCopyToClipboard } from 'usehooks-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { themeSpacing } from '@trackunit/ui-design-tokens';
 import * as React from 'react';
 import React__default, { forwardRef, useRef, useImperativeHandle, useMemo, useState, useCallback, cloneElement, useEffect, useContext } from 'react';
+import { titleCase } from 'string-ts';
 import { uuidv4, nonNullable } from '@trackunit/shared-utils';
 import { Temporal } from '@js-temporal/polyfill';
 import parsePhoneNumberFromString, { isSupportedCountry, getCountries, getCountryCallingCode, AsYouType, parseIncompletePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
@@ -115,7 +117,7 @@ const cvaActionContainer = cvaMerge(["flex", "items-center"], {
             //might need tweaking in the future
             small: ["m-[1px]"],
             medium: ["m-[3px]"],
-            large: ["m-[3px]"],
+            large: ["m-[7px]"],
         },
     },
     defaultVariants: {
@@ -163,7 +165,8 @@ const ActionButton = ({ type, value, dataTestId, size, disabled, className }) =>
                 return null;
         }
     };
-    return (jsx("div", { className: cvaActionContainer({ className, size }), children: jsx(IconButton, { className: cvaActionButton({ size }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: size }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
+    const adjustedIconSize = size === "large" ? "medium" : size;
+    return (jsx("div", { className: cvaActionContainer({ className, size }), children: jsx(IconButton, { className: cvaActionButton({ size: adjustedIconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
 };
 
 const cvaInputBase = cvaMerge([
@@ -177,7 +180,17 @@ const cvaInputBase = cvaMerge([
 ]);
 const cvaInputBaseDisabled = cvaMerge(["bg-slate-100", "hover:bg-slate-100", "hover:border-slate-300"]);
 const cvaInputBaseInvalid = cvaMerge(["border-danger-600"]);
-const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
+const cvaInput = cvaMerge([
+    "overflow-hidden",
+    "grid",
+    // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
+    // The min restriction of the middle column (--spacing-20) is
+    // effectively the minimum width available for the text input
+    "grid-cols-[min-content,minmax(var(--spacing-20),1fr),min-content]",
+    "grid-rows-1",
+    cvaInputBase(),
+    "focus-within:outline-native",
+], {
     variants: {
         size: {
             small: ["h-7"],
@@ -206,19 +219,30 @@ const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
     ],
     defaultVariants: {
         size: "medium",
+        disabled: false,
+        invalid: false,
+        isWarning: false,
     },
 });
-const cvaInputField = cvaMerge([
-    "w-full",
-    "px-3",
-    "border-0",
-    "bg-transparent",
-    "text-slate-900",
-    "placeholder-slate-400",
-    "component-baseInput-border",
-    "text-sm",
-    "truncate",
-], {
+/**
+ * Used for placing items in the grid, using a grid z-stack trick.
+ * The span position is used for the input field, which spans the entire grid.
+ *! Relies on the specific grid layout of cvaInput ☝️
+ */
+const cvaInputItemPlacementManager = cvaMerge([], {
+    variants: {
+        position: {
+            before: ["col-start-1", "col-end-2", "row-start-1", "row-end-1"],
+            after: ["col-start-3", "col-end-4", "row-start-1", "row-end-1"],
+            span: ["col-start-1", "col-end-4", "row-start-1", "row-end-1"],
+        },
+    },
+    defaultVariants: {
+        position: "span",
+    },
+});
+const cvaAccessoriesContainer = cvaMerge(["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"]);
+const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-slate-900", "placeholder-slate-400", "text-sm", "truncate"], {
     variants: {
         size: {
             small: ["py-0.5", "text-xs"],
@@ -233,31 +257,19 @@ const cvaInputField = cvaMerge([
             true: ["text-slate-500"],
             false: [""],
         },
-        autoFocus: {
-            true: [""],
-            false: ["focus-visible:outline-none"],
-        },
-        addonBefore: {
-            true: [""],
-            false: [""],
-        },
-        prefix: {
-            true: ["ps-10"],
-            false: [""],
-        },
     },
     compoundVariants: [
-        {
-            addonBefore: true,
-            prefix: true,
-            className: ["ps-4"],
-        },
         {
             disabled: true,
             readOnly: true,
             className: "text-slate-400",
         },
     ],
+    defaultVariants: {
+        size: "medium",
+        disabled: false,
+        readOnly: false,
+    },
 });
 const cvaInputAddon = cvaMerge([
     "flex",
@@ -267,14 +279,21 @@ const cvaInputAddon = cvaMerge([
     "border-slate-300",
     "text-slate-500",
     "bg-slate-50",
-]);
-const cvaInputAddonBefore = cvaMerge([cvaInputAddon(), "border-r", "rounded-l-lg"], {
+    "text-nowrap",
+], {
     variants: {
         size: {
             small: ["text-xs"],
             medium: ["text-sm"],
             large: ["text-sm"],
         },
+        position: {
+            before: ["border-e", "rounded-s-lg"],
+            after: ["border-s", "rounded-e-lg"],
+        },
+    },
+    defaultVariants: {
+        size: "medium",
     },
 });
 const cvaInputPrefix = cvaMerge([
@@ -285,68 +304,38 @@ const cvaInputPrefix = cvaMerge([
     "hover:component-search-prefix",
     "component-baseInput-prefix",
     "component-search-borderless",
-    "pl-3",
-    "absolute",
-    "inset-y-0",
+    "pl-2",
 ], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
             false: [""],
         },
-        addonBefore: {
-            true: ["relative", "mr-1"],
-            false: [""],
-        },
+    },
+    defaultVariants: {
+        disabled: false,
     },
 });
-const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "px-3", "absolute", "inset-y-0", "right-0"], {
+const cvaInputSuffix = cvaMerge(["flex", "justify-center", "items-center", "text-slate-400", "pr-2"], {
     variants: {
         disabled: {
             true: ["text-slate-500"],
             false: [""],
         },
-        addonAfter: {
-            true: ["relative"],
-            false: [""],
-        },
-        actions: {
-            true: ["right-6"],
-            false: [""],
-        },
     },
-    compoundVariants: [
-        {
-            addonAfter: true,
-            actions: true,
-            className: ["right-0"],
-        },
-    ],
-});
-const cvaInputAddonAfter = cvaMerge([cvaInputAddon(), "border-l", "rounded-r-lg", "ml-[1px]"], {
-    variants: {
-        size: {
-            small: ["text-xs"],
-            medium: ["text-sm"],
-            large: ["text-sm"],
-        },
+    defaultVariants: {
+        disabled: false,
     },
 });
 
-// Renders the "addonAfter" element if provided
-const AddonAfterRenderer = ({ addonAfter, dataTestId, fieldSize, }) => {
-    if (!addonAfter) {
-        return null;
-    }
-    return (jsx("div", { className: cvaInputAddonAfter({ size: fieldSize }), "data-testid": dataTestId ? `${dataTestId}-addonAfter` : null, children: addonAfter }));
-};
-
-// Renders the "addonBefore" element if provided
-const AddonBeforeRenderer = ({ addonBefore, addonBeforeClassName, dataTestId, fieldSize, }) => {
-    if (!addonBefore) {
+/**
+ * Renders the addon element if provided
+ */
+const AddonRenderer = ({ addon, dataTestId, className, fieldSize, position }) => {
+    if (!addon) {
         return null;
     }
-    return (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName, size: fieldSize }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore }));
+    return (jsx("div", { className: cvaInputAddon({ size: fieldSize, position, className }), "data-testid": dataTestId ? `${dataTestId}-addon${titleCase(position)}` : null, children: addon }));
 };
 
 // Renders generic actions like "copy" if specified
@@ -385,7 +374,7 @@ const LockReasonRenderer = ({ lockReason, dataTestId, }) => {
 };
 
 // Renders the prefix element or falls back to a default prefix for certain types
-const PrefixRenderer = ({ prefix, type, addonBefore, dataTestId, disabled, }) => {
+const PrefixRenderer = forwardRef(({ prefix, type, dataTestId, disabled }, ref) => {
     // Default icons for specific input types
     const defaultPrefixMap = {
         email: jsx(Icon, { name: "AtSymbol", size: "small" }),
@@ -397,25 +386,21 @@ const PrefixRenderer = ({ prefix, type, addonBefore, dataTestId, disabled, }) =>
     if (!resolvedPrefix) {
         return null;
     }
-    return (jsx("div", { className: cvaInputPrefix({ disabled, addonBefore: addonBefore !== undefined }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: resolvedPrefix }));
-};
+    return (jsx("div", { className: cvaInputPrefix({ disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: ref, children: resolvedPrefix }));
+});
 
 // Renders the suffix element or shows an icon if invalid/warning
-const SuffixRenderer = ({ suffix, addonAfter, actions, isInvalid, isWarning, dataTestId, disabled, }) => {
+const SuffixRenderer = ({ suffix, isInvalid, isWarning, dataTestId, disabled, }) => {
     // If user provided suffix that's not identical to addonBefore, render it
     if (suffix) {
         return (jsx("div", { className: cvaInputSuffix({
                 disabled,
-                addonAfter: addonAfter !== undefined,
-                actions: Boolean(actions),
             }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix }));
     }
     // If invalid or warning, render an icon (unless within FormGroup)
     if (isInvalid || isWarning) {
         return (jsx("div", { className: cvaInputSuffix({
                 disabled,
-                addonAfter: addonAfter !== undefined,
-                actions: Boolean(actions),
                 // Hides the icon if inside a FormGroup
                 className: "group-[.form-group]:hidden",
             }), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: jsx(Icon, { color: isInvalid ? "danger" : "warning", name: "ExclamationTriangle", size: "small" }) }));
@@ -431,10 +416,14 @@ const SuffixRenderer = ({ suffix, addonAfter, actions, isInvalid, isWarning, dat
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextInput, NumberInput, PasswordInput, etc.
  */
-const BaseInput = forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, addonBeforeClassName, isWarning, type, genericAction, style, ...rest }, ref) => {
+const BaseInput = forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning, type, genericAction, style, ...rest }, ref) => {
     // Derive final flags
     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);
     // Keep a reference to the input element
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current, []);
@@ -444,15 +433,15 @@ const BaseInput = forwardRef(({ className, isInvalid, dataTestId, prefix, suffix
             isWarning,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, style: style, children: [jsx(AddonBeforeRenderer, { addonBefore: addonBefore, addonBeforeClassName: addonBeforeClassName, dataTestId: dataTestId, fieldSize: fieldSize }), jsx(PrefixRenderer, { addonBefore: addonBefore, dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type }), jsx("input", { "aria-required": rest.required, className: cvaInputField({
-                    autoFocus: rest.autoFocus,
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsx(AddonRenderer, { addon: addonBefore, dataTestId: dataTestId, fieldSize: fieldSize, position: "before" }), jsx(PrefixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsx("input", { "aria-required": rest.required, className: cvaInputField({
                     readOnly: renderAsReadonly,
                     size: fieldSize,
                     disabled: renderAsDisabled,
-                    className: inputClassName,
-                    addonBefore: addonBefore !== undefined,
-                    prefix: !!prefix || (type && type !== "text"),
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), 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, { actions: actions, addonAfter: addonAfter, dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsx(AddonAfterRenderer, { addonAfter: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize })] }));
+                    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,
+                }, 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";
 
@@ -2914,4 +2903,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.0.50",
+  "version": "1.0.57",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,11 +17,13 @@
     "zod": "3.22.4",
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.0.25",
-    "@trackunit/react-components": "1.1.31",
-    "@trackunit/ui-icons": "1.0.28",
-    "@trackunit/shared-utils": "1.2.22",
-    "@trackunit/i18n-library-translation": "1.0.34"
+    "@trackunit/css-class-variance-utilities": "1.0.32",
+    "@trackunit/react-components": "1.1.38",
+    "@trackunit/ui-icons": "1.0.35",
+    "@trackunit/shared-utils": "1.2.29",
+    "@trackunit/ui-design-tokens": "1.0.33",
+    "@trackunit/i18n-library-translation": "1.0.41",
+    "string-ts": "^2.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/BaseInput/BaseInput.d.ts

@@ -46,10 +46,6 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * Custom css classes for the inner Input element.
      */
     inputClassName?: string;
-    /**
-     * Custom css classes for the addon before element.
-     */
-    addonBeforeClassName?: string;
     /**
      * If true, shows the input in warning state.
      */

package/src/components/BaseInput/BaseInput.variants.d.ts

@@ -7,27 +7,27 @@ export declare const cvaInput: (props?: ({
     invalid?: boolean | null | undefined;
     isWarning?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+/**
+ * Used for placing items in the grid, using a grid z-stack trick.
+ * The span position is used for the input field, which spans the entire grid.
+ *! Relies on the specific grid layout of cvaInput ☝️
+ */
+export declare const cvaInputItemPlacementManager: (props?: ({
+    position?: "before" | "after" | "span" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaAccessoriesContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaInputField: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     disabled?: boolean | null | undefined;
     readOnly?: boolean | null | undefined;
-    autoFocus?: boolean | null | undefined;
-    addonBefore?: boolean | null | undefined;
-    prefix?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaInputAddon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaInputAddonBefore: (props?: ({
+export declare const cvaInputAddon: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
+    position?: "before" | "after" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaInputPrefix: (props?: ({
     disabled?: boolean | null | undefined;
-    addonBefore?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaInputSuffix: (props?: ({
     disabled?: boolean | null | undefined;
-    addonAfter?: boolean | null | undefined;
-    actions?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaInputAddonAfter: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/BaseInput/components/AddonRenderer.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import { CommonProps } from "@trackunit/react-components";
+import { ReactNode } from "react";
+import { FormComponentSizes } from "../../../types";
+import { cvaInputAddon } from "../BaseInput.variants";
+type Position = NonNullable<VariantProps<typeof cvaInputAddon>["position"]>;
+type AddonRendererProps = {
+    addon?: ReactNode;
+    fieldSize: FormComponentSizes;
+    position: Position;
+} & CommonProps;
+/**
+ * Renders the addon element if provided
+ */
+export declare const AddonRenderer: ({ addon, dataTestId, className, fieldSize, position }: AddonRendererProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/src/components/BaseInput/components/PrefixRenderer.d.ts

@@ -1,8 +1,9 @@
 import { HTMLInputTypeAttribute, ReactNode } from "react";
-export declare const PrefixRenderer: ({ prefix, type, addonBefore, dataTestId, disabled, }: {
+type PrefixRendererProps = {
     prefix?: ReactNode;
     type?: HTMLInputTypeAttribute;
-    addonBefore?: ReactNode;
     dataTestId?: string;
     disabled: boolean;
-}) => import("react/jsx-runtime").JSX.Element | null;
+};
+export declare const PrefixRenderer: import("react").ForwardRefExoticComponent<PrefixRendererProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/src/components/BaseInput/components/SuffixRenderer.d.ts

@@ -1,8 +1,6 @@
 import { ReactNode } from "react";
-export declare const SuffixRenderer: ({ suffix, addonAfter, actions, isInvalid, isWarning, dataTestId, disabled, }: {
+export declare const SuffixRenderer: ({ suffix, isInvalid, isWarning, dataTestId, disabled, }: {
     suffix?: ReactNode;
-    addonAfter?: ReactNode;
-    actions?: ReactNode;
     isInvalid?: boolean;
     isWarning?: boolean;
     dataTestId?: string;

package/src/components/BaseInput/components/index.d.ts

@@ -1,5 +1,4 @@
-export * from "./AddonAfterRenderer";
-export * from "./AddonBeforeRenderer";
+export * from "./AddonRenderer";
 export * from "./GenericActionsRenderer";
 export * from "./LockReasonRenderer";
 export * from "./PrefixRenderer";

package/src/components/BaseInput/components/AddonAfterRenderer.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from "react";
-import { FormComponentSizes } from "../../../types";
-export declare const AddonAfterRenderer: ({ addonAfter, dataTestId, fieldSize, }: {
-    addonAfter?: ReactNode;
-    dataTestId?: string;
-    fieldSize: FormComponentSizes;
-}) => import("react/jsx-runtime").JSX.Element | null;

package/src/components/BaseInput/components/AddonBeforeRenderer.d.ts

@@ -1,7 +0,0 @@
-import { FormComponentSizes } from "../../../types";
-export declare const AddonBeforeRenderer: ({ addonBefore, addonBeforeClassName, dataTestId, fieldSize, }: {
-    addonBefore?: React.ReactNode;
-    addonBeforeClassName?: string;
-    dataTestId?: string;
-    fieldSize: FormComponentSizes;
-}) => import("react/jsx-runtime").JSX.Element | null;