@availity/mui-autocomplete 0.4.6 → 0.5.0

package/CHANGELOG.md

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

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-autocomplete",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "Availity MUI Autocomplete Component - part of the @availity/element design system",
   "keywords": [
     "react",

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 type OrgAutocompleteProps<
+  Option = Organization,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> = {
+  apiConfig?: ApiConfig;
+} & Omit<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'loadOptions'>;
+
+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} />;
+};