@availity/mui-autocomplete 1.0.13 → 1.1.0

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -45,8 +45,9 @@
   },
   "devDependencies": {
     "@availity/api-axios": "^10.0.3",
-    "@availity/mui-form-utils": "^1.1.3",
-    "@availity/mui-textfield": "^1.1.5",
+    "@availity/mui-form-utils": "^1.2.0",
+    "@availity/mui-icon": "^1.0.2",
+    "@availity/mui-textfield": "^1.2.0",
     "@mui/material": "^6.4.5",
     "@tanstack/react-query": "^4.36.1",
     "react": "18.2.0",
@@ -56,8 +57,8 @@
   },
   "peerDependencies": {
     "@availity/api-axios": "^8.0.7",
-    "@availity/mui-form-utils": "^1.1.3",
-    "@availity/mui-textfield": "^1.1.5",
+    "@availity/mui-form-utils": "^1.2.0",
+    "@availity/mui-textfield": "^1.2.0",
     "@mui/material": "^6.4.5",
     "@tanstack/react-query": "^4.36.1",
     "react": ">=16.3.0"

package/src/lib/Autocomplete.stories.tsx

@@ -3,6 +3,9 @@ import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Autocomplete, createFilterOptions } from './Autocomplete';
 import { FilterOptionsState } from '@mui/material';
+import { InputAdornment, SearchByFormGroup } from '@availity/mui-form-utils';
+import { TextField } from '@availity/mui-textfield';
+import { SearchIcon } from '@availity/mui-icon';
 
 const languages = [
   'Python',
@@ -168,3 +171,34 @@ export const _Grouped: StoryObj<typeof Autocomplete> = {
     );
   },
 };
+
+/** 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.
+ *
+ * The "Search By" field id must be passed as the FormGroup supplies the label.
+ */
+export const _SearchBy: StoryObj<typeof Autocomplete> = {
+  render: () => {
+    const searchByOptions = ['Parameter 1', 'Parameter 2', 'Parameter 3']
+
+    return (
+      <SearchByFormGroup searchById="searchby">
+        <Autocomplete
+          id="searchby"
+          options={searchByOptions}
+          FieldProps= {{ fullWidth: false }}
+        />
+        <TextField
+          id="search"
+          placeholder="search"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <SearchIcon aria-hidden={false} aria-label="search"/>
+              </InputAdornment>
+            ),
+          }}
+        />
+      </SearchByFormGroup>
+    );
+  },
+};