@availity/mui-autocomplete 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.8.0](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.7.2...@availity/mui-autocomplete@0.8.0) (2024-08-14)
+
+
+### Features
+
+* **mui-autocomplete:** add CodesAutocomplete component ([b7da2bc](https://github.com/Availity/element/commit/b7da2bc716920a64c31b09482d8c9e8668b338e4))
+
+
+### Bug Fixes
+
+* **mui-autocomplete:** remove console.log and add paging logic ([a0bd9dd](https://github.com/Availity/element/commit/a0bd9dd0a4191d29bb004edcf3958f183e71a188))
+
 ## [0.7.2](https://github.com/Availity/element/compare/@availity/mui-autocomplete@0.7.1...@availity/mui-autocomplete@0.7.2) (2024-08-08)
 
 ### Dependency Updates

package/README.md

@@ -123,8 +123,6 @@ An `AsyncAutocomplete` component is exported for use cases that require fetching
 
 The `loadOptions` function will be called when the user scrolls to the bottom of the dropdown. It will be passed the current offset 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`, a boolean `hasMore` property, and the `offset`. The returned `options` will be concatenated to the existing options array. `hasMore` tells the `AsyncAutocomplete` component whether or not it should call `loadOptions` again. Finally, the returned `offset` will be passed in the subsequent call to get the next set of options.
 
-The `queryOptions` prop is available for passing in options to the `useInfiniteQuery` hook. One example of how this can be used is by using the `enabled` property. This can be used in cases where you would like to render the autocomplete, but are waiting on fetching the options. For example, if you need the user to fill out a section of the form before fetching the options for the autocomplete.
-
 ```jsx
 import { Autocomplete } from '@availity/element';
 import { callApi } from '../api';
@@ -139,8 +137,44 @@ const Example = () => {
       offset,
     };
   };
+    return <Autocomplete FieldProps={{ label: 'Async Dropdown' }} loadOptions={loadOptions} />;
+};
+```
+
+The `queryOptions` prop is available for passing in options to the `useInfiniteQuery` hook. One example of how this can be used is by using the `enabled` property. This can be used in cases where you would like to render the autocomplete, but are waiting on fetching the options. For example, if you need the user to fill out a section of the form before fetching the options for the autocomplete.
+
+`AsyncAutocomplete` uses `react-query` which means we can take advantage of the `queryKey` to fetch new options as needed. This functionality is exposed via the `watchParams` prop. This prop accepts an object. Whenever a value in the object is changed then page is reset to 0 and the api is called again.
+
+```jsx
+import { useState } from 'react';
+import { Autocomplete, Button } from '@availity/element';
+
+import { callApi } from '../api';
+
+const Example = () => {
+  const [id, setId] = useState('');
+
+  const loadOptions = async (offset: number, limit: number) => {
+    const response = await callApi(id, offset, limit);
+
+    return {
+      options: repsonse.data,
+      hasMore: response.data.totalCount > response.data.count,
+      offset,
+    };
+  };
 
-  return <Autocomplete FieldProps={{ label: 'Async Dropdown' }} loadOptions={loadOptions} />;
+  return (
+    <>
+      <Button onClick={() => setId('123')}>Set ID</Button>
+      <Autocomplete
+        FieldProps={{ label: 'Async Dropdown' }}
+        loadOptions={loadOptions}
+        queryOptions={{ enabled: !!id }}
+        watchParams={{ id }}
+      />
+    </>
+  );
 };
 ```
 
@@ -171,7 +205,13 @@ The `queryKey` by default is `prov-autocomplete`.
 ```jsx
 import { ProviderAutocomplete } from '@availity/element';
 
-const Example = () => {
-  return <ProviderAutocomplete customerId="1234" FieldProps={{ label: 'Provider Select', placeholder: 'Select...' }} />;
+const Example = ({ customerId }: { customerId: string }) => {
+  return (
+    <ProviderAutocomplete
+      customerId={customerId}
+      FieldProps={{ label: 'Provider Select', placeholder: 'Select...' }}
+      watchParams={{ customerId }}
+    />
+  );
 };
 ```

package/package.json

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

package/src/lib/CodesAutocomplete.stories.tsx

@@ -0,0 +1,51 @@
+// Each exported component in the package should have its own stories file
+import type { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { CodesAutocomplete } from './CodesAutocomplete';
+
+const meta: Meta<typeof CodesAutocomplete> = {
+  title: 'Form Components/Autocomplete/CodesAutocomplete',
+  component: CodesAutocomplete,
+  tags: ['autodocs'],
+  args: {
+    id: 'example',
+  },
+  argTypes: {
+    multiple: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+export const _CodesAutocomplete: StoryObj<typeof CodesAutocomplete> = {
+  render: (args) => {
+    return (
+      <QueryClientProvider client={client}>
+        <CodesAutocomplete {...args} />
+      </QueryClientProvider>
+    );
+  },
+  args: {
+    list: 'ABC',
+    FieldProps: {
+      label: 'Code Select',
+      helperText: 'Select a code from the list',
+      placeholder: 'Select...',
+      fullWidth: false,
+    },
+    limit: 15,
+  },
+};

package/src/lib/CodesAutocomplete.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+/* eslint-disable @nx/enforce-module-boundaries */
+import { server } from '@availity/mock/src/lib/server';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { CodesAutocomplete } from './CodesAutocomplete';
+
+const client = new QueryClient();
+
+describe('CodesAutocomplete', () => {
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+
+  afterEach(() => {
+    // Remove any handlers you may have added
+    // in individual tests (runtime handlers).
+    server.resetHandlers();
+    jest.restoreAllMocks();
+    client.clear();
+  });
+
+  test('providers are fetched and displayed by name', async () => {
+    render(
+      <QueryClientProvider client={client}>
+        <CodesAutocomplete list="123" FieldProps={{ label: 'Test' }} />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('171100000X - Acupuncturist')).toBeDefined();
+    });
+  });
+
+  test('codes are not fetched when list is not present', async () => {
+    render(
+      <QueryClientProvider client={client}>
+        <CodesAutocomplete list="" FieldProps={{ label: 'Test' }} />
+      </QueryClientProvider>
+    );
+
+    const input = screen.getByRole('combobox');
+    fireEvent.click(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+
+    await waitFor(() => {
+      expect(screen.getByText('No options')).toBeDefined();
+    });
+  });
+});

package/src/lib/CodesAutocomplete.tsx

@@ -0,0 +1,66 @@
+import { avCodesApi, ApiConfig } from '@availity/api-axios';
+import type { ChipTypeMap } from '@mui/material/Chip';
+
+import { AsyncAutocomplete, AsyncAutocompleteProps } from './AsyncAutocomplete';
+import type { Optional } from './util';
+
+type Code = {
+  code: string;
+  value: string;
+};
+
+const fetchCodes = async (config: ApiConfig) => {
+  const resp = await avCodesApi.query(config);
+
+  return {
+    options: resp.data.codes as Code[],
+    hasMore: config.params.offset + config.params.limit < resp.data.totalCount,
+    offset: config.params.offset,
+  };
+};
+
+export interface CodesAutocompleteProps<
+  Option = Code,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> extends Omit<
+    Optional<AsyncAutocompleteProps<Option, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'queryKey'>,
+    'loadOptions'
+  > {
+  list: string;
+  /** Config passed to the AvCodesApi.query function */
+  apiConfig?: ApiConfig;
+}
+
+export const CodesAutocomplete = ({
+  apiConfig = {},
+  queryOptions,
+  queryKey = 'codes-autocomplete',
+  list,
+  watchParams,
+  ...rest
+}: CodesAutocompleteProps) => {
+  const handleLoadOptions = async (offset: number, limit: number, inputValue: string) => {
+    const resp = await fetchCodes({
+      ...apiConfig,
+      params: { ...apiConfig.params, list, offset, limit, q: inputValue },
+    });
+
+    return resp;
+  };
+
+  const handleGetOptionLabel = (option: Code) => [option.code, option.value].filter(Boolean).join(' - ');
+
+  return (
+    <AsyncAutocomplete
+      getOptionLabel={handleGetOptionLabel}
+      queryKey={queryKey}
+      queryOptions={{ enabled: !!list, ...queryOptions }}
+      watchParams={{ list, ...watchParams }}
+      {...rest}
+      loadOptions={handleLoadOptions}
+    />
+  );
+};