@availity/mui-autocomplete 0.4.6 → 0.5.1

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.5.1](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.5.0...@availity/mui-autocomplete@0.5.1) (2024-06-21)
+
+
+### Bug Fixes
+
+* add deps ([520c3c2](https://github.com/Availity/element/commit/520c3c2549af82006fc563bc453b010ed6aadb73))
+* add export and delay ([20d6792](https://github.com/Availity/element/commit/20d6792e7a995afa0f12e597fbd9fc4c16c92df2))
+
+## [0.5.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.4.6...@availity/mui-autocomplete@0.5.0) (2024-06-20)
+
+
+### Features
+
+* **mui-autocomplete:** add OrganizationAutocomplete component ([9f3ea07](https://github.com/Availity/element/commit/9f3ea0753e0147d7e1aeaf73230716046caba01e))
+
 ## [0.4.6](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.4.5...@availity/mui-autocomplete@0.4.6) (2024-06-14)
 
 ### Dependency Updates

package/README.md

@@ -54,7 +54,7 @@ The `Autcomplete` component can be used standalone or with a form state library
 
 `Autocomplete` uses the `TextField` component to render the input. You must pass your field related props: `label`, `helperText`, `error`, etc. to the the `FieldProps` prop.
 
-```tsx
+```jsx
 import { Autocomplete } from '@availity/element';
 
 const MyAutocomplete = () => {
@@ -74,13 +74,13 @@ const MyAutocomplete = () => {
 
 #### Direct import
 
-```tsx
+```jsx
 import { Autocomplete } from '@availity/mui-autocomplete';
 ```
 
 #### Usage with `react-hook-form`
 
-```tsx
+```jsx
 import { useForm, Controller } from 'react-hook-form';
 import { Autocomplete, Button } from '@availity/element';
 
@@ -123,7 +123,7 @@ const Form = () => {
 
 An `AsyncAutocomplete` component is exported for use cases that require fetching paginated results from an api. You will need to use the `loadOptions` prop. The `loadOptions` function will be called when the user scrolls to the bottom of the dropdown. It will be passed the current page and limit. The `limit` prop controls what is passed to `loadOptions` and is defaulted to `50`. The `loadOptions` function must return an object that has an array of `options` and a `hasMore` property. `hasMore` tells the `AsyncAutocomplete` component whether or not it should call `loadOptions` again. The returned `options` will be concatenated to the existing options array.
 
-```tsx
+```jsx
 import { Autocomplete } from '@availity/element';
 
 const Example = () => {
@@ -139,3 +139,17 @@ const Example = () => {
   return <Autocomplete FieldProps={{ label: 'Async Dropdown' }} loadOptions={loadOptions} />;
 };
 ```
+
+#### `OrganizationAutocomplete` Usage
+
+The `OrganizationAutocomplete` component is an extension of the `AsyncAutocomplete` component which calls our Organizations endpoint. The props are the same as `AsyncAutocomplete` except you do not need to pass a function to `loadOptions`. This has already been done for you. The component uses the `name` from the returned organizations as the label for the option. Pass in your own `getOptionLabel` function if you would like to change the label.
+
+If you need to add params, headers, or other data to the api call then the `apiConfig` prop is available. This allows for passing in the same options you would to the `getOrganizations`. For example, `permissionIds` or `resourceIds`.
+
+```jsx
+import { OrganizationAutocomplete } from '@availity/element';
+
+const Example = () => {
+  return <OrganizationAutocomplete FieldProps={{ label: 'Organization Select', placeholder: 'Select...' }} />;
+};
+```

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import { AutocompleteProps as AutocompleteProps$1 } from '@mui/material/Autocomp
 import { ChipTypeMap } from '@mui/material/Chip';
 import { TextFieldProps } from '@availity/mui-textfield';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiConfig } from '@availity/api-axios';
 
 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 */
@@ -23,4 +24,16 @@ interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, D
 }
 declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any> = "div">({ loadOptions, limit, ListboxProps, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
-export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps };
+type Organization = {
+    customerId: string;
+    name: string;
+    id: string;
+    createDate: string;
+    links: Record<string, Record<string, string>>;
+};
+interface OrgAutocompleteProps<Option = Organization, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'loadOptions'> {
+    apiConfig?: ApiConfig;
+}
+declare const OrganizationAutocomplete: ({ apiConfig, ...rest }: OrgAutocompleteProps) => react_jsx_runtime.JSX.Element;
+
+export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps, type OrgAutocompleteProps, type Organization, OrganizationAutocomplete };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { AutocompleteProps as AutocompleteProps$1 } from '@mui/material/Autocomp
 import { ChipTypeMap } from '@mui/material/Chip';
 import { TextFieldProps } from '@availity/mui-textfield';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiConfig } from '@availity/api-axios';
 
 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 */
@@ -23,4 +24,16 @@ interface AsyncAutocompleteProps<Option, Multiple extends boolean | undefined, D
 }
 declare const AsyncAutocomplete: <Option, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends react.ElementType<any> = "div">({ loadOptions, limit, ListboxProps, ...rest }: AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>) => react_jsx_runtime.JSX.Element;
 
-export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps };
+type Organization = {
+    customerId: string;
+    name: string;
+    id: string;
+    createDate: string;
+    links: Record<string, Record<string, string>>;
+};
+interface OrgAutocompleteProps<Option = Organization, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends Omit<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'loadOptions'> {
+    apiConfig?: ApiConfig;
+}
+declare const OrganizationAutocomplete: ({ apiConfig, ...rest }: OrgAutocompleteProps) => react_jsx_runtime.JSX.Element;
+
+export { AsyncAutocomplete, type AsyncAutocompleteProps, Autocomplete, type AutocompleteProps, type OrgAutocompleteProps, type Organization, OrganizationAutocomplete };

package/dist/index.js

@@ -80,7 +80,8 @@ var __async = (__this, __arguments, generator) => {
 var src_exports = {};
 __export(src_exports, {
   AsyncAutocomplete: () => AsyncAutocomplete,
-  Autocomplete: () => Autocomplete
+  Autocomplete: () => Autocomplete,
+  OrganizationAutocomplete: () => OrganizationAutocomplete
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -179,8 +180,37 @@ var AsyncAutocomplete = (_a) => {
     })
   );
 };
+
+// src/lib/OrganizationAutocomplete.tsx
+var import_api_axios = require("@availity/api-axios");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var fetchOrgs = (config) => __async(void 0, null, function* () {
+  try {
+    const resp = yield import_api_axios.avOrganizationsApi.getOrganizations(config);
+    return {
+      options: resp.data.organizations,
+      hasMore: config.params.offset + config.params.limit < resp.data.totalCount
+    };
+  } catch (e) {
+    return {
+      options: [],
+      hasMore: false
+    };
+  }
+});
+var OrganizationAutocomplete = (_a) => {
+  var _b = _a, { apiConfig = {} } = _b, rest = __objRest(_b, ["apiConfig"]);
+  const handleLoadOptions = (page, limit) => __async(void 0, null, function* () {
+    const offset = page * limit;
+    const resp = yield fetchOrgs(__spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({ dropdown: true }, apiConfig.params), { offset, limit }) }));
+    return resp;
+  });
+  const handleGetOptionLabel = (org) => org.name;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AsyncAutocomplete, __spreadProps(__spreadValues({ getOptionLabel: handleGetOptionLabel }, rest), { loadOptions: handleLoadOptions }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AsyncAutocomplete,
-  Autocomplete
+  Autocomplete,
+  OrganizationAutocomplete
 });

package/dist/index.mjs

@@ -147,7 +147,36 @@ var AsyncAutocomplete = (_a) => {
     })
   );
 };
+
+// src/lib/OrganizationAutocomplete.tsx
+import { avOrganizationsApi } from "@availity/api-axios";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var fetchOrgs = (config) => __async(void 0, null, function* () {
+  try {
+    const resp = yield avOrganizationsApi.getOrganizations(config);
+    return {
+      options: resp.data.organizations,
+      hasMore: config.params.offset + config.params.limit < resp.data.totalCount
+    };
+  } catch (e) {
+    return {
+      options: [],
+      hasMore: false
+    };
+  }
+});
+var OrganizationAutocomplete = (_a) => {
+  var _b = _a, { apiConfig = {} } = _b, rest = __objRest(_b, ["apiConfig"]);
+  const handleLoadOptions = (page, limit) => __async(void 0, null, function* () {
+    const offset = page * limit;
+    const resp = yield fetchOrgs(__spreadProps(__spreadValues({}, apiConfig), { params: __spreadProps(__spreadValues({ dropdown: true }, apiConfig.params), { offset, limit }) }));
+    return resp;
+  });
+  const handleGetOptionLabel = (org) => org.name;
+  return /* @__PURE__ */ jsx3(AsyncAutocomplete, __spreadProps(__spreadValues({ getOptionLabel: handleGetOptionLabel }, rest), { loadOptions: handleLoadOptions }));
+};
 export {
   AsyncAutocomplete,
-  Autocomplete
+  Autocomplete,
+  OrganizationAutocomplete
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "0.4.6",
+  "version": "0.5.1",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -36,6 +36,9 @@
     "@mui/types": "^7.2.14"
   },
   "devDependencies": {
+    "@availity/api-axios": "^8.0.7",
+    "@availity/mui-form-utils": "^0.11.2",
+    "@availity/mui-textfield": "^0.5.20",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -43,6 +46,7 @@
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
+    "@availity/api-axios": "^8.0.7",
     "@availity/mui-form-utils": "^0.11.2",
     "@availity/mui-textfield": "^0.5.20",
     "@mui/material": "^5.11.9",

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './lib/Autocomplete';
 export * from './lib/AsyncAutocomplete';
+export * from './lib/OrganizationAutocomplete';

package/src/lib/AsyncAutocomplete.stories.tsx

@@ -0,0 +1,85 @@
+// Each exported component in the package should have its own stories file
+import type { Meta, StoryObj } from '@storybook/react';
+import AvApi, { ApiConfig } from '@availity/api-axios';
+
+import { AsyncAutocomplete } from './AsyncAutocomplete';
+
+const meta: Meta<typeof AsyncAutocomplete> = {
+  title: 'Form Components/Autocomplete/AsyncAutocomplete',
+  component: AsyncAutocomplete,
+  tags: ['autodocs'],
+  args: {
+    id: 'example',
+  },
+  argTypes: {
+    multiple: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const api = new AvApi({ name: 'example' } as ApiConfig);
+
+type Option = {
+  label: string;
+  value: number;
+};
+
+type ExampleResponse = {
+  totalCount: number;
+  options: Option[];
+  count: number;
+};
+
+const getResults = async (page: number, limit: number) => {
+  const offset = page * limit;
+  try {
+    const resp = await api.post<ExampleResponse>({ offset, limit }, { params: {} });
+
+    return {
+      totalCount: resp.data.totalCount,
+      offset,
+      limit,
+      options: resp.data.options,
+      count: resp.data.count,
+    };
+  } catch {
+    return {
+      totalCount: 0,
+      offset,
+      limit,
+      options: [],
+      count: 0,
+    };
+  }
+};
+
+const loadOptions = async (page: number, limit: number) => {
+  const { options, totalCount, offset } = await getResults(page, limit);
+
+  return {
+    options,
+    hasMore: offset + limit < totalCount,
+  };
+};
+
+export const _Async: StoryObj<typeof AsyncAutocomplete> = {
+  render: (args) => {
+    return <AsyncAutocomplete {...args} />;
+  },
+  parameters: {
+    controls: {
+      exclude: /loading(?!Text)|options/,
+    },
+  },
+  args: {
+    FieldProps: { label: 'Async Select', helperText: 'Helper Text', fullWidth: false },
+    getOptionLabel: (val: Option) => val.label,
+    loadOptions,
+    limit: 10,
+  },
+};

package/src/lib/AsyncAutocomplete.test.tsx

@@ -1,28 +1,75 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import AvApi, { ApiConfig } from '@availity/api-axios';
+/* eslint-disable @nx/enforce-module-boundaries */
+import { server } from '@availity/mock/src/lib/server';
+
 import { AsyncAutocomplete } from './AsyncAutocomplete';
 
+const api = new AvApi({ name: 'example' } as ApiConfig);
+
+type Option = {
+  label: string;
+  value: number;
+};
+
+type ExampleResponse = {
+  totalCount: number;
+  options: Option[];
+  count: number;
+};
+
+const getResults = async (page: number, limit: number) => {
+  const offset = page * limit;
+  try {
+    const resp = await api.post<ExampleResponse>({ offset, limit }, { params: {} });
+
+    return {
+      totalCount: resp.data.totalCount,
+      offset,
+      limit,
+      options: resp.data.options,
+      count: resp.data.count,
+    };
+  } catch {
+    return {
+      totalCount: 0,
+      offset,
+      limit,
+      options: [],
+      count: 0,
+    };
+  }
+};
+
+const loadOptions = async (page: number, limit: number) => {
+  const { options, totalCount, offset } = await getResults(page, limit);
+
+  return {
+    options,
+    hasMore: offset + limit < totalCount,
+  };
+};
+
 describe('AsyncAutocomplete', () => {
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+
+  afterEach(() => {
+    // Remove any handlers you may have added
+    // in individual tests (runtime handlers).
+    server.resetHandlers();
+    jest.restoreAllMocks();
+  });
+
   test('should render successfully', () => {
-    const { getByLabelText } = render(
-      <AsyncAutocomplete
-        FieldProps={{ label: 'Test' }}
-        loadOptions={async () => ({
-          options: ['1', '2', '3'],
-          hasMore: false,
-        })}
-      />
-    );
+    const { getByLabelText } = render(<AsyncAutocomplete FieldProps={{ label: 'Test' }} loadOptions={loadOptions} />);
+
     expect(getByLabelText('Test')).toBeTruthy();
   });
 
   test('options should be available', async () => {
-    const loadOptions = () =>
-      Promise.resolve({
-        options: [{ label: 'Option 1' }],
-        getOptionLabel: (option: { label: string }) => option.label,
-        hasMore: false,
-      });
-
     render(<AsyncAutocomplete loadOptions={loadOptions} FieldProps={{ label: 'Test' }} />);
 
     const input = screen.getByRole('combobox');
@@ -41,19 +88,7 @@ describe('AsyncAutocomplete', () => {
   });
 
   test('should call loadOptions when scroll to the bottom', async () => {
-    const loadOptions = jest.fn();
-    loadOptions.mockResolvedValueOnce({
-      options: [
-        { label: 'Option 1' },
-        { label: 'Option 2' },
-        { label: 'Option 3' },
-        { label: 'Option 4' },
-        { label: 'Option 5' },
-        { label: 'Option 6' },
-      ],
-      hasMore: true,
-    });
-    render(<AsyncAutocomplete loadOptions={loadOptions} FieldProps={{ label: 'Test' }} />);
+    render(<AsyncAutocomplete loadOptions={loadOptions} limit={10} FieldProps={{ label: 'Test' }} />);
 
     const input = screen.getByRole('combobox');
     fireEvent.click(input);
@@ -63,24 +98,14 @@ describe('AsyncAutocomplete', () => {
       expect(screen.getByText('Option 1')).toBeDefined();
     });
 
-    expect(loadOptions).toHaveBeenCalled();
-    expect(loadOptions).toHaveBeenCalledTimes(1);
-    expect(loadOptions).toHaveBeenCalledWith(0, 50);
-
-    loadOptions.mockResolvedValueOnce({
-      options: [{ label: 'Option 7' }],
-      hasMore: false,
-    });
-
     await act(async () => {
       const options = await screen.findByRole('listbox');
       fireEvent.scroll(options, { target: { scrollTop: options.scrollHeight } });
     });
 
     await waitFor(() => {
-      expect(loadOptions).toHaveBeenCalled();
-      expect(loadOptions).toHaveBeenCalledTimes(2);
-      expect(loadOptions).toHaveBeenLastCalledWith(1, 50);
+      expect(screen.getByText('Option 10')).toBeDefined();
+      expect(() => screen.getByText('Option 20')).toThrowError();
     });
   });
 });

package/src/lib/Autocomplete.stories.tsx

@@ -1,7 +1,6 @@
 // Each exported component in the package should have its own stories file
 import type { Meta, StoryObj } from '@storybook/react';
 import { Autocomplete } from './Autocomplete';
-import { AsyncAutocomplete } from './AsyncAutocomplete';
 
 const meta: Meta<typeof Autocomplete> = {
   title: 'Form Components/Autocomplete/Autocomplete',
@@ -43,116 +42,3 @@ export const _Multi: StoryObj<typeof Autocomplete> = {
     multiple: true,
   },
 };
-
-type Org = {
-  id: string;
-  name: string;
-};
-
-const organizations: Org[] = [
-  {
-    id: '1',
-    name: 'Org 1',
-  },
-  {
-    id: '2',
-    name: 'Org 2',
-  },
-  {
-    id: '3',
-    name: 'Org 3',
-  },
-  {
-    id: '4',
-    name: 'Org 4',
-  },
-  {
-    id: '5',
-    name: 'Org 5',
-  },
-  {
-    id: '6',
-    name: 'Org 6',
-  },
-  {
-    id: '7',
-    name: 'Org 7',
-  },
-  {
-    id: '8',
-    name: 'Org 8',
-  },
-  {
-    id: '9',
-    name: 'Org 9',
-  },
-  {
-    id: '10',
-    name: 'Org 10',
-  },
-  {
-    id: '11',
-    name: 'Org 11',
-  },
-  {
-    id: '12',
-    name: 'Org 12',
-  },
-  {
-    id: '13',
-    name: 'Org 13',
-  },
-  {
-    id: '14',
-    name: 'Org 14',
-  },
-  {
-    id: '15',
-    name: 'Org 15',
-  },
-];
-
-async function sleep(duration = 2500) {
-  await new Promise((resolve) => setTimeout(resolve, duration));
-}
-
-const getResults = (page: number, limit: number) => {
-  const offset = page * limit;
-  const orgs = organizations.slice(page * offset, page * offset + limit);
-
-  return {
-    totalCount: organizations.length,
-    offset,
-    limit,
-    orgs,
-    count: orgs.length,
-  };
-};
-
-const loadOptions = async (page: number, limit: number) => {
-  await sleep(1000);
-
-  const { orgs, totalCount, offset } = getResults(page, limit);
-
-  return {
-    options: orgs,
-    hasMore: offset + limit < totalCount,
-  };
-};
-
-export const _Async: StoryObj<typeof AsyncAutocomplete> = {
-  render: (args) => {
-    return <AsyncAutocomplete {...args} />;
-  },
-  parameters: {
-    controls: {
-      exclude: /loading(?!Text)|options/,
-    },
-  },
-  args: {
-    FieldProps: { label: 'Async Select', helperText: 'Helper Text', fullWidth: false },
-    getOptionLabel: (val: Org) => val.name,
-    loadOptions,
-    limit: 10,
-  },
-};

package/src/lib/OrganizationAutocomplete.stories.tsx

@@ -0,0 +1,37 @@
+// Each exported component in the package should have its own stories file
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { OrganizationAutocomplete } from './OrganizationAutocomplete';
+
+const meta: Meta<typeof OrganizationAutocomplete> = {
+  title: 'Form Components/Autocomplete/OrganizationAutocomplete',
+  component: OrganizationAutocomplete,
+  tags: ['autodocs'],
+  args: {
+    id: 'example',
+  },
+  argTypes: {
+    multiple: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const _OrganizationAutocomplete: StoryObj<typeof OrganizationAutocomplete> = {
+  render: (args) => {
+    return <OrganizationAutocomplete {...args} />;
+  },
+  args: {
+    FieldProps: {
+      label: 'Organization Select',
+      helperText: 'Select an Organization from the list',
+      placeholder: 'Select...',
+      fullWidth: false,
+    },
+    limit: 15,
+  },
+};

package/src/lib/OrganizationAutocomplete.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+/* eslint-disable @nx/enforce-module-boundaries */
+import { server } from '@availity/mock/src/lib/server';
+
+import { OrganizationAutocomplete } from './OrganizationAutocomplete';
+
+describe('OrganizationAutocomplete', () => {
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+
+  afterEach(() => {
+    // Remove any handlers you may have added
+    // in individual tests (runtime handlers).
+    server.resetHandlers();
+    jest.restoreAllMocks();
+  });
+
+  test('organizations are fetched and displayed by name', async () => {
+    render(<OrganizationAutocomplete FieldProps={{ label: 'Test' }} />);
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('Organization 1')).toBeDefined();
+    });
+  });
+});

package/src/lib/OrganizationAutocomplete.tsx

@@ -0,0 +1,52 @@
+import { avOrganizationsApi, ApiConfig } from '@availity/api-axios';
+import type { ChipTypeMap } from '@mui/material/Chip';
+
+import { AsyncAutocomplete, AsyncAutocompleteProps } from './AsyncAutocomplete';
+
+export type Organization = {
+  customerId: string;
+  name: string;
+  id: string;
+  createDate: string;
+  links: Record<string, Record<string, string>>;
+};
+
+const fetchOrgs = async (config: ApiConfig): Promise<{ options: Organization[]; hasMore: boolean }> => {
+  try {
+    const resp = await avOrganizationsApi.getOrganizations(config);
+
+    return {
+      options: resp.data.organizations as Organization[],
+      hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
+    };
+  } catch {
+    return {
+      options: [],
+      hasMore: false,
+    };
+  }
+};
+
+export interface OrgAutocompleteProps<
+  Option = Organization,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> extends Omit<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'loadOptions'> {
+  apiConfig?: ApiConfig;
+}
+
+export const OrganizationAutocomplete = ({ apiConfig = {}, ...rest }: OrgAutocompleteProps) => {
+  const handleLoadOptions = async (page: number, limit: number) => {
+    const offset = page * limit;
+
+    const resp = await fetchOrgs({ ...apiConfig, params: { dropdown: true, ...apiConfig.params, offset, limit } });
+
+    return resp;
+  };
+
+  const handleGetOptionLabel = (org: Organization) => org.name;
+
+  return <AsyncAutocomplete getOptionLabel={handleGetOptionLabel} {...rest} loadOptions={handleLoadOptions} />;
+};