@availity/mui-textfield 1.1.6 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.2.0](https://github.com/Availity/element/compare/@availity/mui-textfield@1.1.6...@availity/mui-textfield@1.2.0) (2025-04-14)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `1.1.6`
+
+### Features
+
+* **mui-form-utils:** add searchbyformgroup ([4207b27](https://github.com/Availity/element/commit/4207b2768f86036df0d3443e452de867d6ceb491))
+
 ## [1.1.6](https://github.com/Availity/element/compare/@availity/mui-textfield@1.1.5...@availity/mui-textfield@1.1.6) (2025-04-14)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-textfield",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "description": "Availity MUI Textfield Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,7 +40,7 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-form-utils": "1.1.4",
+    "@availity/mui-form-utils": "1.2.0",
     "@availity/mui-icon": "1.0.2"
   },
   "devDependencies": {

package/src/lib/TextField.stories.tsx

@@ -6,7 +6,7 @@ import { IMaskInput } from 'react-imask';
 import { NumericFormat, NumericFormatProps } from 'react-number-format';
 import { IconButton } from '@availity/mui-button';
 import { Chip } from '@availity/mui-chip';
-import { FormControl, FormLabel, Input, InputAdornment, SelectChangeEvent } from '@availity/mui-form-utils';
+import { FormControl, FormLabel, Input, InputAdornment, SearchByFormGroup, SelectChangeEvent } from '@availity/mui-form-utils';
 import { EyeIcon, EyeSlashIcon, SearchIcon } from '@availity/mui-icon';
 import { Box, Grid, Stack } from '@availity/mui-layout';
 import { MenuItem } from '@availity/mui-menu';
@@ -380,3 +380,40 @@ export const _MultiSelect: StoryObj<typeof TextField> = {
   },
   args: { label: 'MultiSelect' },
 };
+
+/** Wrap the fields in a `SearchByFormGroup` from the [@availity/mui-form-utils](./?path=/docs/form-components-formutils-introduction--docs) package for our combined search by styles.
+ *
+ * It is recommended to use `Autocomplete` for the "Search By" selection, however a `select` `TextField` can be used with `slotProps.select.labelId = {searchById passed to form group}-label`.
+ */
+export const _SearchBy: StoryObj<typeof TextField> = {
+  render: () => {
+    const [searchBy, setSearchBy] = useState('');
+
+    const handleChange = (event: SelectChangeEvent) => {
+      setSearchBy(event.target.value as string);
+    };
+
+    return (
+      <SearchByFormGroup searchById="searchby">
+        <TextField id="searchby" value={searchBy} fullWidth={false} select slotProps={{select:{ onChange: handleChange, labelId: "searchby-label"}}}>
+          <MenuItem value="Parameter 1">Parameter 1</MenuItem>
+          <MenuItem value="Parameter 2">Parameter 2</MenuItem>
+          <MenuItem value="Parameter 3">Parameter 3</MenuItem>
+        </TextField>
+        <TextField
+          id="search"
+          placeholder="search"
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon aria-hidden={false} aria-label="search"/>
+                </InputAdornment>
+              ),
+            }
+          }}
+        />
+      </SearchByFormGroup>
+    );
+  },
+};