@trackunit/react-form-components 0.0.151 → 0.0.152

package/index.cjs.js

@@ -14937,12 +14937,12 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-const Search = (_a) => {
+const Search = React.forwardRef((_a, ref) => {
     var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsxRuntime.jsx(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsxRuntime.jsx(TextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "MagnifyingGlass", size: "medium" }), suffix: onClear ? (jsxRuntime.jsx("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
             }, children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
-};
+});
 
 const cvaTextArea = cssClassVarianceUtilities.cvaMerge([
     cvaInputBase(),

package/index.esm.js

@@ -14911,12 +14911,12 @@ const cvaSearch = cvaMerge([
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-const Search = (_a) => {
+const Search = forwardRef((_a, ref) => {
     var { className, placeholder = "Search", value, widenInputOnFocus, showBorderWhenNotInFocus = false, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete = "on" } = _a, rest = __rest(_a, ["className", "placeholder", "value", "widenInputOnFocus", "showBorderWhenNotInFocus", "disabled", "onKeyUp", "onChange", "onFocus", "onBlur", "name", "onClear", "dataTestId", "autoComplete"]);
-    return (jsx$1(TextInput, Object.assign({}, rest, { dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsx$1(Icon, { name: "MagnifyingGlass", size: "medium" }), suffix: onClear ? (jsx$1("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
+    return (jsx$1(TextInput, Object.assign({}, rest, { ref: ref, dataTestId: dataTestId, name: name, className: cvaSearch({ className, border: showBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), placeholder: placeholder, prefix: jsx$1(Icon, { name: "MagnifyingGlass", size: "medium" }), suffix: onClear ? (jsx$1("button", { "data-testid": dataTestId && `${dataTestId}_suffix_component`, onClick: () => {
                 onClear();
             }, children: jsx$1(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value, disabled: disabled, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, autoComplete: autoComplete })));
-};
+});
 
 const cvaTextArea = cvaMerge([
     cvaInputBase(),

package/package.json

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

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

@@ -58,4 +58,4 @@ export interface SearchProps extends CommonProps, TextInputProps {
  * @param {SearchProps} props - The props for the Search component
  * @returns {JSX.Element} Search component
  */
-export declare const Search: ({ className, placeholder, value, widenInputOnFocus, showBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, ...rest }: SearchProps) => JSX.Element;
+export declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;