@availity/mui-autocomplete 0.9.0 → 0.9.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.9.2](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.9.1...@availity/mui-autocomplete@0.9.2) (2024-11-20)
+
+## [0.9.1](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.9.0...@availity/mui-autocomplete@0.9.1) (2024-11-20)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.9.0`
+* `mui-textfield` updated to version `0.9.0`
 ## [0.9.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.8.6...@availity/mui-autocomplete@0.9.0) (2024-10-31)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { AutocompleteProps as AutocompleteProps$1 } from '@mui/material/Autocomplete';
+export { createFilterOptions } from '@mui/material/Autocomplete';
 import { ChipTypeMap } from '@mui/material/Chip';
 import { TextFieldProps } from '@availity/mui-textfield';
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { AutocompleteProps as AutocompleteProps$1 } from '@mui/material/Autocomplete';
+export { createFilterOptions } from '@mui/material/Autocomplete';
 import { ChipTypeMap } from '@mui/material/Chip';
 import { TextFieldProps } from '@availity/mui-textfield';
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/index.js

@@ -82,7 +82,8 @@ __export(src_exports, {
   AsyncAutocomplete: () => AsyncAutocomplete,
   Autocomplete: () => Autocomplete,
   OrganizationAutocomplete: () => OrganizationAutocomplete,
-  ProviderAutocomplete: () => ProviderAutocomplete
+  ProviderAutocomplete: () => ProviderAutocomplete,
+  createFilterOptions: () => import_Autocomplete2.createFilterOptions
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -93,6 +94,7 @@ var import_CircularProgress = __toESM(require("@mui/material/CircularProgress"))
 var import_IconButton = __toESM(require("@mui/material/IconButton"));
 var import_mui_textfield = require("@availity/mui-textfield");
 var import_mui_form_utils = require("@availity/mui-form-utils");
+var import_Autocomplete2 = require("@mui/material/Autocomplete");
 var import_jsx_runtime = require("react/jsx-runtime");
 var PopupIndicatorWrapper = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectDivider, { orientation: "vertical", className: "MuiSelect-avEndAdornmentDivider" }),
@@ -295,5 +297,6 @@ var ProviderAutocomplete = (_a) => {
   AsyncAutocomplete,
   Autocomplete,
   OrganizationAutocomplete,
-  ProviderAutocomplete
+  ProviderAutocomplete,
+  createFilterOptions
 });

package/dist/index.mjs

@@ -59,6 +59,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import { default as MuiIconButton } from "@mui/material/IconButton";
 import { TextField } from "@availity/mui-textfield";
 import { SelectDivider, SelectExpandIcon } from "@availity/mui-form-utils";
+import { createFilterOptions } from "@mui/material/Autocomplete";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var PopupIndicatorWrapper = forwardRef((props, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(SelectDivider, { orientation: "vertical", className: "MuiSelect-avEndAdornmentDivider" }),
@@ -260,5 +261,6 @@ export {
   AsyncAutocomplete,
   Autocomplete,
   OrganizationAutocomplete,
-  ProviderAutocomplete
+  ProviderAutocomplete,
+  createFilterOptions
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -37,8 +37,8 @@
   },
   "devDependencies": {
     "@availity/api-axios": "^9.0.4",
-    "@availity/mui-form-utils": "^0.14.0",
-    "@availity/mui-textfield": "^0.6.11",
+    "@availity/mui-form-utils": "^0.15.0",
+    "@availity/mui-textfield": "^0.6.12",
     "@mui/material": "^5.15.15",
     "@tanstack/react-query": "^4.36.1",
     "react": "18.2.0",
@@ -48,8 +48,8 @@
   },
   "peerDependencies": {
     "@availity/api-axios": "^8.0.7",
-    "@availity/mui-form-utils": "^0.14.0",
-    "@availity/mui-textfield": "^0.6.11",
+    "@availity/mui-form-utils": "^0.15.0",
+    "@availity/mui-textfield": "^0.6.12",
     "@mui/material": "^5.11.9",
     "@tanstack/react-query": "^4.36.1",
     "react": ">=16.3.0"

package/src/lib/Autocomplete.stories.tsx

@@ -1,6 +1,30 @@
 // Each exported component in the package should have its own stories file
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Autocomplete } from './Autocomplete';
+import { Autocomplete, createFilterOptions } from './Autocomplete';
+import { FilterOptionsState } from '@mui/material';
+
+const languages = [
+  'Python',
+  'JavaScript',
+  'C#',
+  'Java',
+  'Go',
+  'SQL',
+  'PHP',
+  'Swift',
+  'Ruby',
+  'R',
+  'Rust',
+  'TypeScript',
+  'C++',
+  'MATLAB',
+  'Objective-C',
+  'CSS',
+  'HTML',
+  'Kotlin',
+  'Perl',
+];
 
 const meta: Meta<typeof Autocomplete> = {
   title: 'Form Components/Autocomplete/Autocomplete',
@@ -42,3 +66,105 @@ export const _Multi: StoryObj<typeof Autocomplete> = {
     multiple: true,
   },
 };
+
+type Option = { inputValue?: string; title: string };
+
+const filter = createFilterOptions<Option>();
+
+export const _FreeSolo: StoryObj<typeof Autocomplete> = {
+  render: () => {
+    const [value, setValue] = useState<Option | null>(null);
+
+    const options: Option[] = [
+      { inputValue: 'option1', title: 'Option 1' },
+      { inputValue: 'option2', title: 'Option 2' },
+    ];
+
+    const onChange = (_event: any, newValue: Option) => {
+      if (typeof newValue === 'string') {
+        setValue({
+          title: newValue,
+        });
+      } else if (newValue && newValue.inputValue) {
+        // Create a new value from the user input
+        setValue({
+          title: newValue.inputValue,
+        });
+      } else {
+        setValue(newValue);
+      }
+    };
+
+    const getOptionLabel = (option: Option) => {
+      // Value selected with enter, right from the input
+      if (typeof option === 'string') {
+        return option;
+      }
+      // Add "xxx" option created dynamically
+      if (option.inputValue) {
+        return option.inputValue;
+      }
+      // Regular option
+      return option.title;
+    };
+
+    const filterOptions = (options: Option[], params: FilterOptionsState<Option>) => {
+      const filtered = filter(options, params);
+
+      const { inputValue } = params;
+      // Suggest the creation of a new value
+      const isExisting = options.some((option) => inputValue === option.title);
+      if (inputValue !== '' && !isExisting) {
+        filtered.push({
+          inputValue,
+          title: `Add "${inputValue}"`,
+        });
+      }
+
+      return filtered;
+    };
+
+    const renderOption = (props: React.HTMLAttributes<HTMLLIElement>, option: Option) => {
+      const { key, ...optionProps } = props;
+      return (
+        <li key={key} {...optionProps}>
+          {option.title}
+        </li>
+      );
+    };
+
+    return (
+      <Autocomplete
+        freeSolo
+        value={value}
+        options={options}
+        getOptionLabel={getOptionLabel}
+        onChange={onChange}
+        FieldProps={{ label: 'FreeSolo Select', helperText: 'Helper Text', fullWidth: false }}
+        filterOptions={filterOptions}
+        renderOption={renderOption}
+      />
+    );
+  },
+};
+
+export const _Grouped: StoryObj<typeof Autocomplete> = {
+  render: () => {
+    const options = languages.map((option) => {
+      const firstLetter = option[0].toUpperCase();
+
+      return {
+        firstLetter,
+        title: option,
+      };
+    });
+    return (
+      <Autocomplete
+        options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
+        groupBy={(option) => option.firstLetter}
+        getOptionLabel={(option) => option.title}
+        FieldProps={{ label: 'FreeSolo Select', helperText: 'Helper Text', fullWidth: false }}
+      />
+    );
+  },
+};

package/src/lib/Autocomplete.tsx

@@ -12,6 +12,8 @@ import { OverridableStringUnion } from '@mui/types';
 import { TextField, TextFieldProps } from '@availity/mui-textfield';
 import { SelectDivider, SelectExpandIcon } from '@availity/mui-form-utils';
 
+export { createFilterOptions } from '@mui/material/Autocomplete';
+
 export interface AutocompleteProps<
   T,
   Multiple extends boolean | undefined,