@availity/mui-autocomplete 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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)
+
+
+### 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,7 @@ 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>, 'renderInput' | 'slotProps'> {
     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,20 +25,47 @@ __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 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)
+    }),
+    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, {}),
+    slotProps: { popupIndicator: { component: PopupIndicatorWrapper } },
     ...props
   });
 };

package/dist/index.mjs

@@ -1,20 +1,48 @@
 // 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 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)
+    }),
+    popupIcon: /* @__PURE__ */ jsx(SelectExpandIcon, {
+      className: "MuiSelect-avExpandIcon"
     }),
-    popupIcon: /* @__PURE__ */ jsx(SelectPropOverrides.IconComponent, {}),
+    slotProps: { popupIndicator: { component: PopupIndicatorWrapper } },
     ...props
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
     "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.0",
+    "@availity/mui-textfield": "0.4.0"
   },
   "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',
@@ -41,4 +28,9 @@ export const _Variants: StoryObj<typeof Autocomplete> = {
       <Autocomplete {...args} FieldProps={{ label: 'Multi Select', margin: 'normal' }} multiple />
     </>
   ),
+  parameters: {
+    controls: {
+      exclude: ['FieldProps'],
+    },
+  },
 };

package/src/lib/Autocomplete.tsx

@@ -1,11 +1,14 @@
+import { forwardRef } from 'react';
 import {
   Autocomplete as MuiAutocomplete,
   AutocompleteProps as MuiAutocompleteProps,
   AutocompleteRenderInputParams,
+  IconButton as MuiIconButton,
+  IconButtonProps as MuiIconButtonProps,
   ChipTypeMap,
 } from '@mui/material';
 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 +16,20 @@ 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>,
+    'renderInput' | 'slotProps'
+  > {
   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,10 +40,23 @@ export const Autocomplete = <
   FieldProps,
   ...props
 }: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>): JSX.Element => {
+  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 {...FieldProps} {...params} {...resolvedProps(params)} />
+      )}
+      popupIcon={<SelectExpandIcon className="MuiSelect-avExpandIcon" />}
+      slotProps={{ popupIndicator: { component: PopupIndicatorWrapper } }}
       {...props}
     />
   );