@trackunit/react-form-components 0.1.61 → 0.1.63

package/index.cjs.js

@@ -147,7 +147,7 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
                 return "ClipboardDocument";
         }
     };
-    const ButtonAction = () => {
+    const buttonAction = () => {
         var _a, _b;
         switch (type) {
             case "EMAIL":
@@ -168,7 +168,7 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
                 return null;
         }
     };
-    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: iconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: "small" }), onClick: ButtonAction, size: "small", variant: "secondary" }) }));
+    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: iconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: "small" }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
 };
 
 /**
@@ -237,7 +237,16 @@ const cvaInput = cssClassVarianceUtilities.cvaMerge(["relative", "flex", "h-10",
         },
     },
 });
-const cvaInputField = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-base", "text-slate-900", "placeholder-slate-400", "component-baseInput-border"], {
+const cvaInputField = cssClassVarianceUtilities.cvaMerge([
+    "w-full",
+    "px-3",
+    "border-0",
+    "bg-transparent",
+    "text-base",
+    "text-slate-900",
+    "placeholder-slate-400",
+    "component-baseInput-border",
+], {
     variants: {
         size: {
             small: ["py-1"],
@@ -1712,7 +1721,9 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  * @returns {JSX.Element} Search component
  */
 const Search = React.forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ...rest }, ref) => {
-    return (jsxRuntime.jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
+    return (jsxRuntime.jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: 
+        //only show the clear button if there is a value and the onClear function is provided
+        onClear && value ? (jsxRuntime.jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
             }, type: "button", children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
 });

package/index.esm.js

@@ -128,7 +128,7 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
                 return "ClipboardDocument";
         }
     };
-    const ButtonAction = () => {
+    const buttonAction = () => {
         var _a, _b;
         switch (type) {
             case "EMAIL":
@@ -149,7 +149,7 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled, className }
                 return null;
         }
     };
-    return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { className: cvaActionButton({ size: iconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: "small" }), onClick: ButtonAction, size: "small", variant: "secondary" }) }));
+    return (jsx("div", { className: cvaActionContainer({ className }), children: jsx(IconButton, { className: cvaActionButton({ size: iconSize }), dataTestId: dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: "small" }), onClick: buttonAction, size: "small", variant: "secondary" }) }));
 };
 
 /**
@@ -218,7 +218,16 @@ const cvaInput = cvaMerge(["relative", "flex", "h-10", cvaInputBase()], {
         },
     },
 });
-const cvaInputField = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "text-base", "text-slate-900", "placeholder-slate-400", "component-baseInput-border"], {
+const cvaInputField = cvaMerge([
+    "w-full",
+    "px-3",
+    "border-0",
+    "bg-transparent",
+    "text-base",
+    "text-slate-900",
+    "placeholder-slate-400",
+    "component-baseInput-border",
+], {
     variants: {
         size: {
             small: ["py-1"],
@@ -1693,7 +1702,9 @@ const cvaSearch = cvaMerge([
  * @returns {JSX.Element} Search component
  */
 const Search = forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", ...rest }, ref) => {
-    return (jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: onClear ? (jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
+    return (jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: 
+        //only show the clear button if there is a value and the onClear function is provided
+        onClear && value ? (jsx("button", { className: "flex", "data-testid": dataTestId ? `${dataTestId}_suffix_component` : null, onClick: () => {
                 onClear();
             }, type: "button", children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,6 +1,7 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { ButtonCommonProps, CommonProps } from "@trackunit/react-components";
+import { cvaActionButton } from "./ActionButton.variants";
 type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL" | "COPY";
-type FieldSize = "small" | "medium";
 interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps {
     /**
      * The type of action performed when clicking the button.
@@ -13,7 +14,7 @@ interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps {
     /**
      *  The size of the icon.
      */
-    iconSize?: FieldSize;
+    iconSize?: VariantProps<typeof cvaActionButton>["size"];
 }
 interface GenericActionButtonProps extends AbstractActionButtonProps {
     /**

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

@@ -1,9 +1,10 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
 import * as React from "react";
+import { cvaInputField } from "./BaseInput.variants";
 import { DisabledForReasons } from "./DisabledForReasonsTip";
 type FilteredInputProps = MappedOmit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "disabled">;
-type FieldSize = "small" | "medium";
 export interface BaseInputProps extends FilteredInputProps, CommonProps {
     /**
      * A React element to render before the text in the input.
@@ -38,7 +39,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      *  The size of the input.
      *  Default == 40px, Small == 32px.
      */
-    fieldSize?: FieldSize;
+    fieldSize?: VariantProps<typeof cvaInputField>["size"];
     /**
      * If true the field is rendered in its invalid state.
      */