@availity/mui-autocomplete 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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)
 
 

package/dist/index.d.ts

@@ -2,7 +2,8 @@ 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'> {
+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;
 }
 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

@@ -25,21 +25,53 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/lib/Autocomplete.tsx
+var import_react = require("react");
 var import_material = require("@mui/material");
 var import_mui_textfield = require("@availity/mui-textfield");
 var import_mui_form_utils = require("@availity/mui-form-utils");
 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"
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.IconButton, {
+      ...props,
+      ref
+    })
+  ]
+}));
 var Autocomplete = ({
   FieldProps,
   ...props
 }) => {
+  const defaultProps = {
+    fullWidth: true,
+    size: "small"
+  };
+  const resolvedProps = (params) => ({
+    InputProps: {
+      ...FieldProps == null ? void 0 : FieldProps.InputProps,
+      ...params == null ? void 0 : params.InputProps
+    },
+    inputProps: {
+      ...FieldProps == null ? void 0 : FieldProps.inputProps,
+      ...params == null ? void 0 : params.inputProps
+    }
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Autocomplete, {
     renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_textfield.TextField, {
-      ...FieldProps,
-      ...params
+      ...params,
+      ...resolvedProps(params),
+      ...FieldProps
+    }),
+    popupIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectExpandIcon, {
+      className: "MuiSelect-avExpandIcon"
     }),
-    popupIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_form_utils.SelectPropOverrides.IconComponent, {}),
-    ...props
+    slotProps: { popupIndicator: { component: PopupIndicatorWrapper } },
+    ...props,
+    ...defaultProps
   });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -1,21 +1,54 @@
 // src/lib/Autocomplete.tsx
+import { forwardRef } from "react";
 import {
-  Autocomplete as MuiAutocomplete
+  Autocomplete as MuiAutocomplete,
+  IconButton as MuiIconButton
 } from "@mui/material";
 import { TextField } from "@availity/mui-textfield";
-import { SelectPropOverrides } from "@availity/mui-form-utils";
-import { jsx } from "react/jsx-runtime";
+import { SelectDivider, SelectExpandIcon } from "@availity/mui-form-utils";
+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"
+    }),
+    /* @__PURE__ */ jsx(MuiIconButton, {
+      ...props,
+      ref
+    })
+  ]
+}));
 var Autocomplete = ({
   FieldProps,
   ...props
 }) => {
+  const defaultProps = {
+    fullWidth: true,
+    size: "small"
+  };
+  const resolvedProps = (params) => ({
+    InputProps: {
+      ...FieldProps == null ? void 0 : FieldProps.InputProps,
+      ...params == null ? void 0 : params.InputProps
+    },
+    inputProps: {
+      ...FieldProps == null ? void 0 : FieldProps.inputProps,
+      ...params == null ? void 0 : params.inputProps
+    }
+  });
   return /* @__PURE__ */ jsx(MuiAutocomplete, {
     renderInput: (params) => /* @__PURE__ */ jsx(TextField, {
-      ...FieldProps,
-      ...params
+      ...params,
+      ...resolvedProps(params),
+      ...FieldProps
+    }),
+    popupIcon: /* @__PURE__ */ jsx(SelectExpandIcon, {
+      className: "MuiSelect-avExpandIcon"
     }),
-    popupIcon: /* @__PURE__ */ jsx(SelectPropOverrides.IconComponent, {}),
-    ...props
+    slotProps: { popupIndicator: { component: PopupIndicatorWrapper } },
+    ...props,
+    ...defaultProps
   });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "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.5.3",
-    "@availity/mui-textfield": "0.3.2"
+    "@availity/mui-form-utils": "0.6.1",
+    "@availity/mui-textfield": "0.4.2",
+    "@mui/types": "^7.2.5"
   },
   "devDependencies": {
     "@mui/material": "^5.11.9",

package/src/lib/Autocomplete.stories.tsx

@@ -1,20 +1,7 @@
 // Each exported component in the package should have its own stories file
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { Autocomplete, AutocompleteProps } from './Autocomplete';
-import {
-  Box,
-  Chip,
-  MenuItem,
-  Autocomplete as MuiAutocomplete,
-  AutocompleteProps as MuiAutocompleteProps,
-  TextField as MuiTextField,
-  SelectChangeEvent,
-  Typography,
-} from '@mui/material';
-import { TextField } from '@availity/mui-textfield';
-import { Select, SelectPropOverrides } from '@availity/mui-form-utils';
-import { useState } from 'react';
+import { Autocomplete } from './Autocomplete';
 
 const meta: Meta<typeof Autocomplete> = {
   title: 'Components/Autocomplete/Autocomplete',
@@ -23,6 +10,13 @@ const meta: Meta<typeof Autocomplete> = {
   args: {
     options: ['1', '2', '3', '4', '5'],
   },
+  argTypes: {
+    multiple: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
 export default meta;
@@ -30,15 +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 />
-    </>
-  ),
+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

@@ -1,11 +1,16 @@
+import { forwardRef } from 'react';
 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 { SelectPropOverrides } from '@availity/mui-form-utils';
+import { SelectDivider, SelectExpandIcon } from '@availity/mui-form-utils';
 
 export interface AutocompleteProps<
   T,
@@ -13,10 +18,38 @@ export interface AutocompleteProps<
   DisableClearable extends boolean | undefined,
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']
-> extends Omit<MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'renderInput'> {
+> extends Omit<
+    MuiAutocompleteProps<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;
 }
 
+const PopupIndicatorWrapper = forwardRef<HTMLButtonElement, MuiIconButtonProps>((props, ref) => (
+  <>
+    <SelectDivider orientation="vertical" className="MuiSelect-avEndAdornmentDivider" />
+    <MuiIconButton {...props} ref={ref} />
+  </>
+));
+
 export const Autocomplete = <
   T,
   Multiple extends boolean | undefined = false,
@@ -27,11 +60,33 @@ 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,
+      ...params?.InputProps,
+    },
+    inputProps: {
+      ...FieldProps?.inputProps,
+      ...params?.inputProps,
+    },
+  });
+
   return (
     <MuiAutocomplete
-      renderInput={(params: AutocompleteRenderInputParams) => <TextField {...FieldProps} {...params} />}
-      popupIcon={<SelectPropOverrides.IconComponent />}
+      renderInput={(params: AutocompleteRenderInputParams) => (
+        <TextField {...params} {...resolvedProps(params)} {...FieldProps} />
+      )}
+      popupIcon={<SelectExpandIcon className="MuiSelect-avExpandIcon" />}
+      slotProps={{ popupIndicator: { component: PopupIndicatorWrapper } }}
       {...props}
+      {...defaultProps}
     />
   );
 };