@trackunit/react-form-components 1.0.12 → 1.0.14

package/index.cjs.js

@@ -378,7 +378,7 @@ const DisabledForReasonsTip = ({ reasons, kind }) => {
  * 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__namespace.forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName, ...rest }, ref) => {
+const BaseInput = React__namespace.forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName, style, ...rest }, ref) => {
     var _a;
     const renderAsDisabled = Boolean(rest.disabled) || rest.readOnly;
     const innerRef = React__namespace.useRef(null);
@@ -389,7 +389,7 @@ const BaseInput = React__namespace.forwardRef(({ className, isInvalid, dataTestI
             invalid: isInvalid,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [addonBefore ? (jsxRuntime.jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && !compareReactNodes(addonBefore, prefix) ? (jsxRuntime.jsx("div", { className: cvaInputPrefix({
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, style: style, children: [addonBefore ? (jsxRuntime.jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && !compareReactNodes(addonBefore, prefix) ? (jsxRuntime.jsx("div", { className: cvaInputPrefix({
                     disabled: renderAsDisabled,
                     addonBefore: addonBefore !== undefined,
                 }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, jsxRuntime.jsx("input", { "aria-required": rest.required, className: cvaInputField({
@@ -1716,7 +1716,13 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
     variants: {
         border: { true: ["!component-search-borderless"], false: "" },
         widenOnFocus: {
-            true: ["component-search-width", "component-search-widen", "hover:component-search-widen"],
+            true: [
+                "component-search-width",
+                "component-search-widen",
+                "hover:component-search-widen",
+                "focus-within:w-full",
+                "max-w-sm",
+            ],
             false: "w-full",
         },
     },
@@ -1728,8 +1734,9 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  * @param {SearchProps} props - The props for the Search component
  * @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", loading, inputClassName, ...rest }, ref) => {
-    return (jsxRuntime.jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: loading ? jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", size: "small" }) : jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: 
+const Search = React.forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading, inputClassName, iconName = "MagnifyingGlass", ...rest }, ref) => {
+    var _a, _b;
+    return (jsxRuntime.jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", size: (_a = rest.fieldSize) !== null && _a !== void 0 ? _a : undefined })) : (jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: (_b = rest.fieldSize) !== null && _b !== void 0 ? _b : undefined })), 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();

package/index.esm.js

@@ -359,7 +359,7 @@ const DisabledForReasonsTip = ({ reasons, kind }) => {
  * 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, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName, ...rest }, ref) => {
+const BaseInput = React.forwardRef(({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, showDefaultActions = false, inputClassName, placeholder, addonBeforeClassName, style, ...rest }, ref) => {
     var _a;
     const renderAsDisabled = Boolean(rest.disabled) || rest.readOnly;
     const innerRef = React.useRef(null);
@@ -370,7 +370,7 @@ const BaseInput = React.forwardRef(({ className, isInvalid, dataTestId, prefix,
             invalid: isInvalid,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [addonBefore ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && !compareReactNodes(addonBefore, prefix) ? (jsx("div", { className: cvaInputPrefix({
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : null, style: style, children: [addonBefore ? (jsx("div", { className: cvaInputAddonBefore({ className: addonBeforeClassName }), "data-testid": dataTestId ? `${dataTestId}-addonBefore` : null, children: addonBefore })) : null, prefix && !compareReactNodes(addonBefore, prefix) ? (jsx("div", { className: cvaInputPrefix({
                     disabled: renderAsDisabled,
                     addonBefore: addonBefore !== undefined,
                 }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, children: prefix })) : null, jsx("input", { "aria-required": rest.required, className: cvaInputField({
@@ -1697,7 +1697,13 @@ const cvaSearch = cvaMerge([
     variants: {
         border: { true: ["!component-search-borderless"], false: "" },
         widenOnFocus: {
-            true: ["component-search-width", "component-search-widen", "hover:component-search-widen"],
+            true: [
+                "component-search-width",
+                "component-search-widen",
+                "hover:component-search-widen",
+                "focus-within:w-full",
+                "max-w-sm",
+            ],
             false: "w-full",
         },
     },
@@ -1709,8 +1715,9 @@ const cvaSearch = cvaMerge([
  * @param {SearchProps} props - The props for the Search component
  * @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", loading, inputClassName, ...rest }, ref) => {
-    return (jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: loading ? jsx(Spinner, { centering: "centered", size: "small" }) : jsx(Icon, { name: "MagnifyingGlass", size: "medium" }), ref: ref, suffix: 
+const Search = forwardRef(({ className, placeholder = "Search", value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on", loading, inputClassName, iconName = "MagnifyingGlass", ...rest }, ref) => {
+    var _a, _b;
+    return (jsx(TextInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), dataTestId: dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder, prefix: loading ? (jsx(Spinner, { centering: "centered", size: (_a = rest.fieldSize) !== null && _a !== void 0 ? _a : undefined })) : (jsx(Icon, { name: iconName, size: (_b = rest.fieldSize) !== null && _b !== void 0 ? _b : undefined })), 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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,10 +18,10 @@
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "^1.0.1",
-    "@trackunit/react-components": "^1.0.11",
-    "@trackunit/ui-icons": "^1.0.2",
+    "@trackunit/react-components": "^1.0.13",
+    "@trackunit/ui-icons": "^1.0.3",
     "@trackunit/shared-utils": "^1.0.3",
-    "@trackunit/i18n-library-translation": "^1.0.4"
+    "@trackunit/i18n-library-translation": "^1.0.5"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

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

@@ -69,6 +69,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      */
     readonly?: boolean;
     disabled?: boolean | DisabledForReasons;
+    style?: React.CSSProperties;
 }
 /**
  * A base input component that can be used for text inputs, password inputs, etc.

package/src/components/Search/Search.d.ts

@@ -1,4 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
+import { IconName } from "@trackunit/ui-icons";
 import * as React from "react";
 import { TextInputProps } from "../TextInput/TextInput";
 export interface SearchProps extends CommonProps, TextInputProps {
@@ -59,6 +60,11 @@ export interface SearchProps extends CommonProps, TextInputProps {
      * Indicates whether a loading spinner should be displayed in the search box.
      */
     loading?: boolean;
+    /**
+     * A custom icon to be displayed in the search box.
+     */
+    iconName?: IconName;
+    style?: React.CSSProperties;
 }
 /**
  * The Search component is used to render a search input field.