@trackunit/react-form-components 1.13.7 → 1.13.8

package/index.cjs.js

@@ -3602,13 +3602,15 @@ const cvaSearch = cssClassVarianceUtilities.cvaMerge([
  *
  * @param {SearchProps} props - The props for the Search component
  */
-const Search = ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled = false, onKeyUp, onChange, onFocus, onBlur, name, onClear, "data-testid": dataTestId, autoComplete = "on", loading = false, inputClassName, iconName = "MagnifyingGlass", style, xMarkRef, ref, ...rest }) => {
+const Search = ({ className, placeholder, value, widenInputOnFocus = false, hideBorderWhenNotInFocus = false, disabled = false, onKeyUp, onChange, onFocus, onBlur, name, onClear, "data-testid": dataTestId, autoComplete = "on", loading = false, inputClassName, iconName = "MagnifyingGlass", style, ref, fieldSize = "medium", id, ...rest }) => {
     const { t } = useTranslation();
-    return (jsxRuntime.jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), "data-testid": dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", size: rest.fieldSize ?? undefined })) : (jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: rest.fieldSize ?? undefined })), ref: ref, suffix: 
+    const generatedId = react.useId();
+    const inputId = id ?? `search-${generatedId}`;
+    return (jsxRuntime.jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, id: inputId, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "!p-0", size: fieldSize })) : (jsxRuntime.jsx(reactComponents.Icon, { name: iconName, size: fieldSize })), 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();
-            }, ref: xMarkRef, type: "button", children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
+            }, type: "button", children: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
 };
 Search.displayName = "Search";
 

package/index.esm.js

@@ -3,7 +3,7 @@ import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@
 import { Temporal } from '@js-temporal/polyfill';
 import { IconButton, Icon, Tooltip, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
-import { forwardRef, useRef, useEffect, useImperativeHandle, useCallback, useState, cloneElement, isValidElement, useLayoutEffect, useReducer, useMemo, createContext, useContext } from 'react';
+import { forwardRef, useRef, useEffect, useImperativeHandle, useCallback, useState, cloneElement, isValidElement, useLayoutEffect, useReducer, useMemo, createContext, useContext, useId } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { titleCase } from 'string-ts';
 import { useCopyToClipboard } from 'usehooks-ts';
@@ -3601,13 +3601,15 @@ const cvaSearch = cvaMerge([
  *
  * @param {SearchProps} props - The props for the Search component
  */
-const Search = ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus = false, disabled = false, onKeyUp, onChange, onFocus, onBlur, name, onClear, "data-testid": dataTestId, autoComplete = "on", loading = false, inputClassName, iconName = "MagnifyingGlass", style, xMarkRef, ref, ...rest }) => {
+const Search = ({ className, placeholder, value, widenInputOnFocus = false, hideBorderWhenNotInFocus = false, disabled = false, onKeyUp, onChange, onFocus, onBlur, name, onClear, "data-testid": dataTestId, autoComplete = "on", loading = false, inputClassName, iconName = "MagnifyingGlass", style, ref, fieldSize = "medium", id, ...rest }) => {
     const { t } = useTranslation();
-    return (jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), "data-testid": dataTestId, disabled: disabled, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsx(Spinner, { centering: "centered", size: rest.fieldSize ?? undefined })) : (jsx(Icon, { name: iconName, size: rest.fieldSize ?? undefined })), ref: ref, suffix: 
+    const generatedId = useId();
+    const inputId = id ?? `search-${generatedId}`;
+    return (jsx(TextBaseInput, { ...rest, autoComplete: autoComplete, className: cvaSearch({ className, border: hideBorderWhenNotInFocus, widenOnFocus: widenInputOnFocus }), "data-testid": dataTestId, disabled: disabled, fieldSize: fieldSize, id: inputId, inputClassName: inputClassName, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyUp: onKeyUp, placeholder: placeholder ?? t("search.placeholder"), prefix: loading ? (jsx(Spinner, { centering: "centered", containerClassName: "!p-0", size: fieldSize })) : (jsx(Icon, { name: iconName, size: fieldSize })), 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();
-            }, ref: xMarkRef, type: "button", children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
+            }, type: "button", children: jsx(Icon, { name: "XMark", size: "small" }) })) : undefined, value: value }));
 };
 Search.displayName = "Search";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.13.7",
+  "version": "1.13.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -15,7 +15,7 @@
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
     "@trackunit/css-class-variance-utilities": "1.11.26",
-    "@trackunit/react-components": "1.16.7",
+    "@trackunit/react-components": "1.16.8",
     "@trackunit/ui-icons": "1.11.25",
     "@trackunit/shared-utils": "1.13.26",
     "@trackunit/ui-design-tokens": "1.11.26",

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

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
-import { CSSProperties, ChangeEvent, FocusEvent, KeyboardEvent, Ref } from "react";
+import { CSSProperties, ChangeEvent, FocusEvent, KeyboardEvent, ReactElement, Ref } from "react";
 import { TextBaseInputProps } from "../TextField/TextBaseInput/TextBaseInput";
 export interface SearchProps extends CommonProps, TextBaseInputProps {
     /**
@@ -69,10 +69,6 @@ export interface SearchProps extends CommonProps, TextBaseInputProps {
      */
     iconName?: IconName;
     style?: CSSProperties;
-    /**
-     * Ref object for the "Clear" button (with the XMark icon), allowing external control of the button.
-     */
-    xMarkRef?: Ref<HTMLButtonElement>;
 }
 /**
  * The Search component is used to render a search input field.
@@ -80,6 +76,6 @@ export interface SearchProps extends CommonProps, TextBaseInputProps {
  * @param {SearchProps} props - The props for the Search component
  */
 export declare const Search: {
-    ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, "data-testid": dataTestId, autoComplete, loading, inputClassName, iconName, style, xMarkRef, ref, ...rest }: SearchProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, "data-testid": dataTestId, autoComplete, loading, inputClassName, iconName, style, ref, fieldSize, id, ...rest }: SearchProps): ReactElement;
     displayName: string;
 };