@availity/mui-autocomplete 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -2,17 +2,28 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
-## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.1.0...@availity/mui-autocomplete@0.2.0) (2023-11-22)
+## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.2.1...@availity/mui-autocomplete@0.3.0) (2023-12-14)
 
 
 ### Features
 
-* **mui-autocomplete:** use new select slots and styling ([37cac37](https://github.com/Availity/element/commit/37cac37f2670d669b7b6c38cbc52fd1453e3e4e4))
+* add form story ([11d1f6c](https://github.com/Availity/element/commit/11d1f6c6191540bf02ff42d4056ac553eecc8c73))
 
-## 0.1.0 (2023-11-15)
+## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.2.0...@availity/mui-autocomplete@0.2.1) (2023-11-28)
+
+### Bug Fixes
+
+- **mui-autocomplete:** move default props from theme to component ([fa6a02d](https://github.com/Availity/element/commit/fa6a02d44114444ac2c5a15ff1f647c5dcd3d025))
+
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.1.0...@availity/mui-autocomplete@0.2.0) (2023-11-22)
+
+### Features
 
+- **mui-autocomplete:** use new select slots and styling ([37cac37](https://github.com/Availity/element/commit/37cac37f2670d669b7b6c38cbc52fd1453e3e4e4))
+
+## 0.1.0 (2023-11-15)
 
 ### Features
 
-* **mui-autocomplete:** add autocomplete package ([3217d31](https://github.com/Availity/element/commit/3217d31d041c6a2e9ad616ed0a00e8362976adfc))
-* **mui-autocomplete:** add autocomplete package ([772c989](https://github.com/Availity/element/commit/772c98978f2c8e3edc01d8deb38dfc5cc2339298))
+- **mui-autocomplete:** add autocomplete package ([3217d31](https://github.com/Availity/element/commit/3217d31d041c6a2e9ad616ed0a00e8362976adfc))
+- **mui-autocomplete:** add autocomplete package ([772c989](https://github.com/Availity/element/commit/772c98978f2c8e3edc01d8deb38dfc5cc2339298))

package/dist/index.d.ts

@@ -2,8 +2,10 @@ import * as react from 'react';
 import { ChipTypeMap, AutocompleteProps as AutocompleteProps$1 } from '@mui/material';
 import { TextFieldProps } from '@availity/mui-textfield';
 
-interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'renderInput' | 'slotProps'> {
+interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'clearIcon' | 'clearText' | 'closeText' | 'componentsProps' | 'disabledItemsFocusable' | 'forcePopupIcon' | 'fullWidth' | 'handleHomeEndKeys' | 'includeInputInList' | 'openOnFocus' | 'openText' | 'PaperComponent' | 'PopperComponent' | 'popupIcon' | 'selectOnFocus' | 'size' | 'renderInput' | 'slotProps'> {
+    /** Props applied to the `TextField` component */
     FieldProps?: TextFieldProps;
+    name?: string;
 }
 declare const Autocomplete: <T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any> = "div">({ FieldProps, ...props }: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
 

package/dist/index.js

@@ -46,6 +46,10 @@ var Autocomplete = ({
   FieldProps,
   ...props
 }) => {
+  const defaultProps = {
+    fullWidth: true,
+    size: "small"
+  };
   const resolvedProps = (params) => ({
     InputProps: {
       ...FieldProps == null ? void 0 : FieldProps.InputProps,
@@ -58,15 +62,16 @@ var Autocomplete = ({
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Autocomplete, {
     renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, {
-      ...FieldProps,
       ...params,
-      ...resolvedProps(params)
+      ...resolvedProps(params),
+      ...FieldProps
     }),
     popupIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectExpandIcon, {
       className: "MuiSelect-avExpandIcon"
     }),
     slotProps: { popupIndicator: { component: PopupIndicatorWrapper } },
-    ...props
+    ...props,
+    ...defaultProps
   });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -23,6 +23,10 @@ var Autocomplete = ({
   FieldProps,
   ...props
 }) => {
+  const defaultProps = {
+    fullWidth: true,
+    size: "small"
+  };
   const resolvedProps = (params) => ({
     InputProps: {
       ...FieldProps == null ? void 0 : FieldProps.InputProps,
@@ -35,15 +39,16 @@ var Autocomplete = ({
   });
   return /* @__PURE__ */ jsx(MuiAutocomplete, {
     renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
-      ...FieldProps,
       ...params,
-      ...resolvedProps(params)
+      ...resolvedProps(params),
+      ...FieldProps
     }),
     popupIcon: /* @__PURE__ */ jsx(SelectExpandIcon, {
       className: "MuiSelect-avExpandIcon"
     }),
     slotProps: { popupIndicator: { component: PopupIndicatorWrapper } },
-    ...props
+    ...props,
+    ...defaultProps
   });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,8 +33,9 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-form-utils": "0.6.0",
-    "@availity/mui-textfield": "0.4.0"
+    "@availity/mui-form-utils": "0.7.0",
+    "@availity/mui-textfield": "0.5.0",
+    "@mui/types": "^7.2.5"
   },
   "devDependencies": {
     "@mui/material": "^5.11.9",

package/src/lib/Autocomplete.stories.tsx

@@ -10,6 +10,13 @@ const meta: Meta<typeof Autocomplete> = {
   args: {
     options: ['1', '2', '3', '4', '5'],
   },
+  argTypes: {
+    multiple: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 export default meta;
@@ -17,20 +24,21 @@ export default meta;
 export const _Autocomplete: StoryObj<typeof Autocomplete> = {
   render: (args) => <Autocomplete {...args} />,
   args: {
-    FieldProps: { label: 'AvTextField' },
+    FieldProps: { label: 'Autocomplete', helperText: 'Helper Text', fullWidth: false },
   },
 };
 
-export const _Variants: StoryObj<typeof Autocomplete> = {
-  render: (args) => (
-    <>
-      <Autocomplete {...args} FieldProps={{ label: 'Single Select', margin: 'normal' }} />
-      <Autocomplete {...args} FieldProps={{ label: 'Multi Select', margin: 'normal' }} multiple />
-    </>
-  ),
-  parameters: {
-    controls: {
-      exclude: ['FieldProps'],
-    },
+export const _Single: StoryObj<typeof Autocomplete> = {
+  render: (args) => <Autocomplete {...args} />,
+  args: {
+    FieldProps: { label: 'Single Select', helperText: 'Helper Text', fullWidth: false },
+  },
+};
+
+export const _Multi: StoryObj<typeof Autocomplete> = {
+  render: (args) => <Autocomplete {...args} />,
+  args: {
+    FieldProps: { label: 'Multi Select', helperText: 'Helper Text', fullWidth: false },
+    multiple: true,
   },
 };

package/src/lib/Autocomplete.tsx

@@ -3,10 +3,12 @@ import {
   Autocomplete as MuiAutocomplete,
   AutocompleteProps as MuiAutocompleteProps,
   AutocompleteRenderInputParams,
+  AutocompletePropsSizeOverrides,
   IconButton as MuiIconButton,
   IconButtonProps as MuiIconButtonProps,
   ChipTypeMap,
 } from '@mui/material';
+import { OverridableStringUnion } from '@mui/types';
 import { TextField, TextFieldProps } from '@availity/mui-textfield';
 import { SelectDivider, SelectExpandIcon } from '@availity/mui-form-utils';
 
@@ -18,9 +20,28 @@ export interface AutocompleteProps<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']
 > extends Omit<
     MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>,
-    'renderInput' | 'slotProps'
+    | 'clearIcon'
+    | 'clearText'
+    | 'closeText'
+    | 'componentsProps'
+    | 'disabledItemsFocusable'
+    | 'forcePopupIcon'
+    | 'fullWidth'
+    | 'handleHomeEndKeys'
+    | 'includeInputInList'
+    | 'openOnFocus'
+    | 'openText'
+    | 'PaperComponent'
+    | 'PopperComponent'
+    | 'popupIcon'
+    | 'selectOnFocus'
+    | 'size'
+    | 'renderInput'
+    | 'slotProps'
   > {
+  /** Props applied to the `TextField` component */
   FieldProps?: TextFieldProps;
+  name?: string;
 }
 
 const PopupIndicatorWrapper = forwardRef<HTMLButtonElement, MuiIconButtonProps>((props, ref) => (
@@ -40,6 +61,13 @@ export const Autocomplete = <
   FieldProps,
   ...props
 }: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>): JSX.Element => {
+  // Availity desired default props are not making it into component context through theme defaultProps.
+  // Can be overridden by props passed to TextField through `FieldProps`.
+  const defaultProps = {
+    fullWidth: true,
+    size: 'small' as OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>,
+  };
+
   const resolvedProps = (params: AutocompleteRenderInputParams) => ({
     InputProps: {
       ...FieldProps?.InputProps,
@@ -50,14 +78,16 @@ export const Autocomplete = <
       ...params?.inputProps,
     },
   });
+
   return (
     <MuiAutocomplete
       renderInput={(params: AutocompleteRenderInputParams) => (
-        <TextField {...FieldProps} {...params} {...resolvedProps(params)} />
+        <TextField {...params} {...resolvedProps(params)} {...FieldProps} />
       )}
       popupIcon={<SelectExpandIcon className="MuiSelect-avExpandIcon" />}
       slotProps={{ popupIndicator: { component: PopupIndicatorWrapper } }}
       {...props}
+      {...defaultProps}
     />
   );
 };