@elliemae/pui-app-sdk 6.0.0-alpha.2 → 6.0.0-alpha.4

package/demo/view-fields-autocomplete-async-suggestions-autocomplete-stories.8fd7b479.iframe.bundle.js

@@ -0,0 +1,477 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[9825],{"./lib/view/fields/autocomplete/index.tsx"(k,p,e){e.d(p,{j:()=>m});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(v),u=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),d=e.n(u),_=e("./node_modules/.pnpm/core-js@3.49.0/node_modules/core-js/modules/es.array.includes.js"),c=e.n(_),l=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),i=e("./node_modules/.pnpm/@elliemae+ds-form-layout-autocomplete@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-autocomplete/dist/esm/Autocomplete.js"),r=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),s=["children"],f=function(a,n){if(!n)return a;var o=a.filter(function(h){return h.type==="section"||h.label.toLowerCase().includes(n?.toLowerCase())});return o.length===1&&o[0].type==="section"?[]:o},m=function(a){var n=a.children,o=d()(a,s),h=(0,r.xW)(),b=h.watch,A=h.setValue,g=b(o.name),I=(0,l.useCallback)(function(P){for(var S=arguments.length,x=new Array(S>1?S-1:0),O=1;O<S;O++)x[O-1]=arguments[O];o.onSelect?o.onSelect.apply(o,[P].concat(x)):A(o.name,P,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},[o,A]);return t()(i.A,{id:"",filter:g??"",onSelect:I,options:f(o.options,g)},void 0,n)};m.displayName="Autocomplete"},"./lib/view/fields/form-layout-block-item/index.tsx"(k,p,e){e.d(p,{B:()=>l});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),t=e.n(v),u=e("./node_modules/.pnpm/@elliemae+ds-form-layout-blocks@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-layout-blocks/dist/esm/form-layout-block-item/DSFormLayoutBlockItem.js"),d=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),_=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),c=["inputID","label"],l=function(i){var r=i.inputID,s=i.label,f=t()(i,c),m=(0,d.lN)({name:r}),a=m.errors,n=(0,d.Jt)(a,r),o=!!n,h=n?.message;return(0,_.jsx)(u.U,Object.assign({inputID:r,label:s,hasError:o,validationMessage:h},f))};l.displayName="FormLayoutBlockItem"},"./lib/view/fields/input-text/index.tsx"(k,p,e){e.d(p,{S:()=>r});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(v),u=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),d=e.n(u),_=e("./node_modules/.pnpm/@elliemae+ds-form-input-text@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-form-input-text/dist/esm/DSInputText.js"),c=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),l=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),i=["name","defaultValue","rules"],r=function(s){var f=s.name,m=s.defaultValue,a=m===void 0?"":m,n=s.rules,o=n===void 0?{}:n,h=d()(s,i);return t()(c.xI,{name:f,defaultValue:a,rules:o,render:function(b){var A=b.field,g=b.fieldState.error;return(0,l.jsx)(_.B,Object.assign({hasError:!!g},A,h))}})};r.displayName="InputText"},"./lib/view/fields/watch-value.tsx"(k,p,e){e.d(p,{n:()=>r});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(v),u=e("./node_modules/.pnpm/styled-components@5.3.11_react-dom@18.3.1_react@18.3.1/node_modules/styled-components/dist/styled-components.browser.cjs.js"),d=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),_=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),c,l=u.default.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),i=u.default.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),r=function(s){var f=s.name,m=s.label,a=(0,_.xW)(),n=a.watch,o=n(f,!1)||"";return t()(d.Ay,{},void 0,t()(l,{},void 0,c||(c=t()("h4",{},void 0,"Form Data:")),t()(i,{},void 0,t()("div",{},void 0,m," : ",t()("strong",{},void 0,JSON.stringify(o))))))};r.displayName="WatchValue"},"./lib/view/form/index.tsx"(k,p,e){e.d(p,{l:()=>_});var v=e("./node_modules/.pnpm/styled-components@5.3.11_react-dom@18.3.1_react@18.3.1/node_modules/styled-components/dist/styled-components.browser.cjs.js"),t=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),d=v.default.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),_=function(c){var l=c.classname,i=c.reactHookFormProps,r=i===void 0?{mode:"onBlur"}:i,s=c.children,f=c.onSubmit,m=(0,t.mN)(r),a={};f&&(a.onSubmit=m.handleSubmit(f));var n=Object.assign(m,{formProps:r});return(0,u.jsx)(t.Op,Object.assign({},n,{children:(0,u.jsx)(d,Object.assign({className:l},a,{children:s}))}))};_.displayName="Form"},"./lib/view/fields/autocomplete/async-suggestions-autocomplete.stories.tsx"(k,p,e){e.r(p),e.d(p,{AsyncSuggestionsAutocomplete:()=>D,__namedExportsOrder:()=>w,default:()=>I});var v=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),t=e.n(v),u=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/slicedToArray.js"),d=e.n(u),_=e("./node_modules/.pnpm/core-js@3.49.0/node_modules/core-js/modules/es.array.includes.js"),c=e.n(_),l=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),i=e("./node_modules/.pnpm/@elliemae+ds-grid@3.57.10_@elliemae+pui-theme@2.13.0/node_modules/@elliemae/ds-grid/dist/esm/Grid.js"),r=e("./node_modules/.pnpm/@elliemae+ds-button-v2@3.57.10_@elliemae+pui-theme@2.13.0_lodash-es@4.18.1/node_modules/@elliemae/ds-button-v2/dist/esm/parts/DSButtonV2/DSButtonV2.js"),s=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),f=e("./lib/view/form/index.tsx"),m=e("./lib/view/fields/form-layout-block-item/index.tsx"),a=e("./lib/view/fields/autocomplete/index.tsx"),n=e("./lib/view/fields/input-text/index.tsx"),o=e("./lib/view/fields/watch-value.tsx"),h=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),b,A=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import React from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { Autocomplete, AutocompleteProps } from './index.js';\\nimport { InputText } from '../input-text/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Autocomplete',\\n  component: Autocomplete,\\n} as Meta;\\n\\ntype FakeOption = {\\n  dsId: string;\\n  type: 'option';\\n  value: string;\\n  label: string;\\n};\\nconst fakeOptionsFromServer: FakeOption[] = [\\n  {\\n    dsId: '1',\\n    type: 'option',\\n    value: 'Luke Skywalker too long this text is super long',\\n    label: 'Luke Skywalker too long this text is super long',\\n  },\\n  {\\n    dsId: '2',\\n    type: 'option',\\n    value: 'Obi-Wan Kenobi',\\n    label: 'Obi-Wan Kenobi',\\n  },\\n  {\\n    dsId: '3',\\n    type: 'option',\\n    value: 'Padme Amidala',\\n    label: 'Padme Amidala',\\n  },\\n];\\n\\nconst getFakeAsyncFilteredOptions = (value: string): Promise<FakeOption[]> =>\\n  new Promise((resolve) => {\\n    setTimeout(() => {\\n      if (value.length < 3) return resolve([]);\\n      return resolve(\\n        fakeOptionsFromServer.filter((option) =>\\n          option.value.toLowerCase().includes(value.toLowerCase()),\\n        ),\\n      );\\n    }, 2000);\\n  });\\n\\nconst AsyncAutoComplete = (args: AutocompleteProps) => {\\n  const { watch } = useFormContext();\\n  const [options, setOptions] = React.useState<FakeOption[]>([]);\\n\\n  const asyncSetOptions = React.useCallback((value: string) => {\\n    getFakeAsyncFilteredOptions(value)\\n      .then((filteredOptions) => {\\n        setOptions(filteredOptions);\\n      })\\n      .catch((error) => {\\n        console.error(error);\\n      });\\n  }, []);\\n\\n  React.useEffect(() => {\\n    const subscription = watch((value, { name }) => {\\n      if (name === args.name) {\\n        // clear options until we get new ones from server\\n        // in a real app,\\n        //   you ideally would memoize the options in a cache\\n        //   to reduce the number of requests to the server & reduce UX latency\\n        //   checkout https://stackfull.dev/trie-in-javascript-the-data-structure-behind-autocomplete\\n        //   for a trie implementation in JS that you can use to memoize options\\n        //   dimsum offers a tree data structure that you can use for this at https://qa.dimsum.rd.elliemae.io/?path=/story/hooks--use-ds-tree\\n        setOptions([]);\\n        asyncSetOptions(value[name] as string);\\n      }\\n    });\\n    return () => subscription.unsubscribe();\\n  }, [args.name, asyncSetOptions, watch]);\\n\\n  return (\\n    <FormLayoutBlockItem\\n      inputID=\\"star_wars_character\\"\\n      label=\\"Favourite Star Wars character\\"\\n    >\\n      <Autocomplete name={args.name} options={options}>\\n        <InputText name={args.name} defaultValue={args.defaultValue} />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\n\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <AsyncAutoComplete {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Favourite Star Wars character\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const AsyncSuggestionsAutocomplete = Template.bind({});\\n\\nAsyncSuggestionsAutocomplete.args = {\\n  name: 'star_wars_character',\\n  defaultValue: 'Obi',\\n  options: [],\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"AsyncSuggestionsAutocomplete":{"startLoc":{"col":43,"line":99},"endLoc":{"col":1,"line":107},"startBody":{"col":43,"line":99},"endBody":{"col":1,"line":107}}};
+    
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { useFormContext } from 'react-hook-form';
+import { Form } from '../../form/index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { Autocomplete, AutocompleteProps } from './index.js';
+import { InputText } from '../input-text/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {parameters: {"storySource":{"source":"import React from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { Autocomplete, AutocompleteProps } from './index.js';\\nimport { InputText } from '../input-text/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Autocomplete',\\n  component: Autocomplete,\\n} as Meta;\\n\\ntype FakeOption = {\\n  dsId: string;\\n  type: 'option';\\n  value: string;\\n  label: string;\\n};\\nconst fakeOptionsFromServer: FakeOption[] = [\\n  {\\n    dsId: '1',\\n    type: 'option',\\n    value: 'Luke Skywalker too long this text is super long',\\n    label: 'Luke Skywalker too long this text is super long',\\n  },\\n  {\\n    dsId: '2',\\n    type: 'option',\\n    value: 'Obi-Wan Kenobi',\\n    label: 'Obi-Wan Kenobi',\\n  },\\n  {\\n    dsId: '3',\\n    type: 'option',\\n    value: 'Padme Amidala',\\n    label: 'Padme Amidala',\\n  },\\n];\\n\\nconst getFakeAsyncFilteredOptions = (value: string): Promise<FakeOption[]> =>\\n  new Promise((resolve) => {\\n    setTimeout(() => {\\n      if (value.length < 3) return resolve([]);\\n      return resolve(\\n        fakeOptionsFromServer.filter((option) =>\\n          option.value.toLowerCase().includes(value.toLowerCase()),\\n        ),\\n      );\\n    }, 2000);\\n  });\\n\\nconst AsyncAutoComplete = (args: AutocompleteProps) => {\\n  const { watch } = useFormContext();\\n  const [options, setOptions] = React.useState<FakeOption[]>([]);\\n\\n  const asyncSetOptions = React.useCallback((value: string) => {\\n    getFakeAsyncFilteredOptions(value)\\n      .then((filteredOptions) => {\\n        setOptions(filteredOptions);\\n      })\\n      .catch((error) => {\\n        console.error(error);\\n      });\\n  }, []);\\n\\n  React.useEffect(() => {\\n    const subscription = watch((value, { name }) => {\\n      if (name === args.name) {\\n        // clear options until we get new ones from server\\n        // in a real app,\\n        //   you ideally would memoize the options in a cache\\n        //   to reduce the number of requests to the server & reduce UX latency\\n        //   checkout https://stackfull.dev/trie-in-javascript-the-data-structure-behind-autocomplete\\n        //   for a trie implementation in JS that you can use to memoize options\\n        //   dimsum offers a tree data structure that you can use for this at https://qa.dimsum.rd.elliemae.io/?path=/story/hooks--use-ds-tree\\n        setOptions([]);\\n        asyncSetOptions(value[name] as string);\\n      }\\n    });\\n    return () => subscription.unsubscribe();\\n  }, [args.name, asyncSetOptions, watch]);\\n\\n  return (\\n    <FormLayoutBlockItem\\n      inputID=\\"star_wars_character\\"\\n      label=\\"Favourite Star Wars character\\"\\n    >\\n      <Autocomplete name={args.name} options={options}>\\n        <InputText name={args.name} defaultValue={args.defaultValue} />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\n\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <AsyncAutoComplete {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Favourite Star Wars character\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const AsyncSuggestionsAutocomplete = Template.bind({});\\n\\nAsyncSuggestionsAutocomplete.args = {\\n  name: 'star_wars_character',\\n  defaultValue: 'Obi',\\n  options: [],\\n};\\n","locationsMap":{"async-suggestions-autocomplete":{"startLoc":{"col":43,"line":99},"endLoc":{"col":1,"line":107},"startBody":{"col":43,"line":99},"endBody":{"col":1,"line":107}}}},},
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+type FakeOption = {
+  dsId: string;
+  type: 'option';
+  value: string;
+  label: string;
+};
+const fakeOptionsFromServer: FakeOption[] = [
+  {
+    dsId: '1',
+    type: 'option',
+    value: 'Luke Skywalker too long this text is super long',
+    label: 'Luke Skywalker too long this text is super long',
+  },
+  {
+    dsId: '2',
+    type: 'option',
+    value: 'Obi-Wan Kenobi',
+    label: 'Obi-Wan Kenobi',
+  },
+  {
+    dsId: '3',
+    type: 'option',
+    value: 'Padme Amidala',
+    label: 'Padme Amidala',
+  },
+];
+
+const getFakeAsyncFilteredOptions = (value: string): Promise<FakeOption[]> =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      if (value.length < 3) return resolve([]);
+      return resolve(
+        fakeOptionsFromServer.filter((option) =>
+          option.value.toLowerCase().includes(value.toLowerCase()),
+        ),
+      );
+    }, 2000);
+  });
+
+const AsyncAutoComplete = (args: AutocompleteProps) => {
+  const { watch } = useFormContext();
+  const [options, setOptions] = React.useState<FakeOption[]>([]);
+
+  const asyncSetOptions = React.useCallback((value: string) => {
+    getFakeAsyncFilteredOptions(value)
+      .then((filteredOptions) => {
+        setOptions(filteredOptions);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
+
+  React.useEffect(() => {
+    const subscription = watch((value, { name }) => {
+      if (name === args.name) {
+        // clear options until we get new ones from server
+        // in a real app,
+        //   you ideally would memoize the options in a cache
+        //   to reduce the number of requests to the server & reduce UX latency
+        //   checkout https://stackfull.dev/trie-in-javascript-the-data-structure-behind-autocomplete
+        //   for a trie implementation in JS that you can use to memoize options
+        //   dimsum offers a tree data structure that you can use for this at https://qa.dimsum.rd.elliemae.io/?path=/story/hooks--use-ds-tree
+        setOptions([]);
+        asyncSetOptions(value[name] as string);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [args.name, asyncSetOptions, watch]);
+
+  return (
+    <FormLayoutBlockItem
+      inputID="star_wars_character"
+      label="Favourite Star Wars character"
+    >
+      <Autocomplete name={args.name} options={options}>
+        <InputText name={args.name} defaultValue={args.defaultValue} />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+
+const Template: Story<AutocompleteProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <AsyncAutoComplete {...args} />
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Favourite Star Wars character" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const AsyncSuggestionsAutocomplete = Template.bind({});
+
+AsyncSuggestionsAutocomplete.args = {
+  name: 'star_wars_character',
+  defaultValue: 'Obi',
+  options: [],
+};
+`,g={AsyncSuggestionsAutocomplete:{startLoc:{col:43,line:107},endLoc:{col:1,line:115},startBody:{col:43,line:107},endBody:{col:1,line:115}}},A=`import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { useFormContext } from 'react-hook-form';
+import { Form } from '../../form/index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { Autocomplete, AutocompleteProps } from './index.js';
+import { InputText } from '../input-text/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+type FakeOption = {
+  dsId: string;
+  type: 'option';
+  value: string;
+  label: string;
+};
+const fakeOptionsFromServer: FakeOption[] = [
+  {
+    dsId: '1',
+    type: 'option',
+    value: 'Luke Skywalker too long this text is super long',
+    label: 'Luke Skywalker too long this text is super long',
+  },
+  {
+    dsId: '2',
+    type: 'option',
+    value: 'Obi-Wan Kenobi',
+    label: 'Obi-Wan Kenobi',
+  },
+  {
+    dsId: '3',
+    type: 'option',
+    value: 'Padme Amidala',
+    label: 'Padme Amidala',
+  },
+];
+
+const getFakeAsyncFilteredOptions = (value: string): Promise<FakeOption[]> =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      if (value.length < 3) return resolve([]);
+      return resolve(
+        fakeOptionsFromServer.filter((option) =>
+          option.value.toLowerCase().includes(value.toLowerCase()),
+        ),
+      );
+    }, 2000);
+  });
+
+const AsyncAutoComplete = (args: AutocompleteProps) => {
+  const { watch } = useFormContext();
+  const [options, setOptions] = React.useState<FakeOption[]>([]);
+
+  const asyncSetOptions = React.useCallback((value: string) => {
+    getFakeAsyncFilteredOptions(value)
+      .then((filteredOptions) => {
+        setOptions(filteredOptions);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
+
+  React.useEffect(() => {
+    const subscription = watch((value, { name }) => {
+      if (name === args.name) {
+        // clear options until we get new ones from server
+        // in a real app,
+        //   you ideally would memoize the options in a cache
+        //   to reduce the number of requests to the server & reduce UX latency
+        //   checkout https://stackfull.dev/trie-in-javascript-the-data-structure-behind-autocomplete
+        //   for a trie implementation in JS that you can use to memoize options
+        //   dimsum offers a tree data structure that you can use for this at https://qa.dimsum.rd.elliemae.io/?path=/story/hooks--use-ds-tree
+        setOptions([]);
+        asyncSetOptions(value[name] as string);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [args.name, asyncSetOptions, watch]);
+
+  return (
+    <FormLayoutBlockItem
+      inputID="star_wars_character"
+      label="Favourite Star Wars character"
+    >
+      <Autocomplete name={args.name} options={options}>
+        <InputText name={args.name} defaultValue={args.defaultValue} />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+
+const Template: Story<AutocompleteProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <AsyncAutoComplete {...args} />
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Favourite Star Wars character" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const AsyncSuggestionsAutocomplete = Template.bind({});
+
+AsyncSuggestionsAutocomplete.args = {
+  name: 'star_wars_character',
+  defaultValue: 'Obi',
+  options: [],
+};
+`,g={AsyncSuggestionsAutocomplete:{startLoc:{col:43,line:99},endLoc:{col:1,line:107},startBody:{col:43,line:99},endBody:{col:1,line:107}}};const I={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import React from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { Autocomplete, AutocompleteProps } from './index.js';\\nimport { InputText } from '../input-text/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Autocomplete',\\n  component: Autocomplete,\\n} as Meta;\\n\\ntype FakeOption = {\\n  dsId: string;\\n  type: 'option';\\n  value: string;\\n  label: string;\\n};\\nconst fakeOptionsFromServer: FakeOption[] = [\\n  {\\n    dsId: '1',\\n    type: 'option',\\n    value: 'Luke Skywalker too long this text is super long',\\n    label: 'Luke Skywalker too long this text is super long',\\n  },\\n  {\\n    dsId: '2',\\n    type: 'option',\\n    value: 'Obi-Wan Kenobi',\\n    label: 'Obi-Wan Kenobi',\\n  },\\n  {\\n    dsId: '3',\\n    type: 'option',\\n    value: 'Padme Amidala',\\n    label: 'Padme Amidala',\\n  },\\n];\\n\\nconst getFakeAsyncFilteredOptions = (value: string): Promise<FakeOption[]> =>\\n  new Promise((resolve) => {\\n    setTimeout(() => {\\n      if (value.length < 3) return resolve([]);\\n      return resolve(\\n        fakeOptionsFromServer.filter((option) =>\\n          option.value.toLowerCase().includes(value.toLowerCase()),\\n        ),\\n      );\\n    }, 2000);\\n  });\\n\\nconst AsyncAutoComplete = (args: AutocompleteProps) => {\\n  const { watch } = useFormContext();\\n  const [options, setOptions] = React.useState<FakeOption[]>([]);\\n\\n  const asyncSetOptions = React.useCallback((value: string) => {\\n    getFakeAsyncFilteredOptions(value)\\n      .then((filteredOptions) => {\\n        setOptions(filteredOptions);\\n      })\\n      .catch((error) => {\\n        console.error(error);\\n      });\\n  }, []);\\n\\n  React.useEffect(() => {\\n    const subscription = watch((value, { name }) => {\\n      if (name === args.name) {\\n        // clear options until we get new ones from server\\n        // in a real app,\\n        //   you ideally would memoize the options in a cache\\n        //   to reduce the number of requests to the server & reduce UX latency\\n        //   checkout https://stackfull.dev/trie-in-javascript-the-data-structure-behind-autocomplete\\n        //   for a trie implementation in JS that you can use to memoize options\\n        //   dimsum offers a tree data structure that you can use for this at https://qa.dimsum.rd.elliemae.io/?path=/story/hooks--use-ds-tree\\n        setOptions([]);\\n        asyncSetOptions(value[name] as string);\\n      }\\n    });\\n    return () => subscription.unsubscribe();\\n  }, [args.name, asyncSetOptions, watch]);\\n\\n  return (\\n    <FormLayoutBlockItem\\n      inputID=\\"star_wars_character\\"\\n      label=\\"Favourite Star Wars character\\"\\n    >\\n      <Autocomplete name={args.name} options={options}>\\n        <InputText name={args.name} defaultValue={args.defaultValue} />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\n\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <AsyncAutoComplete {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Favourite Star Wars character\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const AsyncSuggestionsAutocomplete = Template.bind({});\\n\\nAsyncSuggestionsAutocomplete.args = {\\n  name: 'star_wars_character',\\n  defaultValue: 'Obi',\\n  options: [],\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"AsyncSuggestionsAutocomplete":{"startLoc":{"col":43,"line":99},"endLoc":{"col":1,"line":107},"startBody":{"col":43,"line":99},"endBody":{"col":1,"line":107}}};
+    
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { useFormContext } from 'react-hook-form';
+import { Form } from '../../form/index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { Autocomplete, AutocompleteProps } from './index.js';
+import { InputText } from '../input-text/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {parameters: {"storySource":{"source":"import React from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Form } from '../../form/index.js';\\nimport { FormLayoutBlockItem } from '../form-layout-block-item/index.js';\\nimport { Autocomplete, AutocompleteProps } from './index.js';\\nimport { InputText } from '../input-text/index.js';\\nimport { WatchValue } from '../watch-value.js';\\n\\nexport default {\\n  title: 'Components/Form/Controls/Autocomplete',\\n  component: Autocomplete,\\n} as Meta;\\n\\ntype FakeOption = {\\n  dsId: string;\\n  type: 'option';\\n  value: string;\\n  label: string;\\n};\\nconst fakeOptionsFromServer: FakeOption[] = [\\n  {\\n    dsId: '1',\\n    type: 'option',\\n    value: 'Luke Skywalker too long this text is super long',\\n    label: 'Luke Skywalker too long this text is super long',\\n  },\\n  {\\n    dsId: '2',\\n    type: 'option',\\n    value: 'Obi-Wan Kenobi',\\n    label: 'Obi-Wan Kenobi',\\n  },\\n  {\\n    dsId: '3',\\n    type: 'option',\\n    value: 'Padme Amidala',\\n    label: 'Padme Amidala',\\n  },\\n];\\n\\nconst getFakeAsyncFilteredOptions = (value: string): Promise<FakeOption[]> =>\\n  new Promise((resolve) => {\\n    setTimeout(() => {\\n      if (value.length < 3) return resolve([]);\\n      return resolve(\\n        fakeOptionsFromServer.filter((option) =>\\n          option.value.toLowerCase().includes(value.toLowerCase()),\\n        ),\\n      );\\n    }, 2000);\\n  });\\n\\nconst AsyncAutoComplete = (args: AutocompleteProps) => {\\n  const { watch } = useFormContext();\\n  const [options, setOptions] = React.useState<FakeOption[]>([]);\\n\\n  const asyncSetOptions = React.useCallback((value: string) => {\\n    getFakeAsyncFilteredOptions(value)\\n      .then((filteredOptions) => {\\n        setOptions(filteredOptions);\\n      })\\n      .catch((error) => {\\n        console.error(error);\\n      });\\n  }, []);\\n\\n  React.useEffect(() => {\\n    const subscription = watch((value, { name }) => {\\n      if (name === args.name) {\\n        // clear options until we get new ones from server\\n        // in a real app,\\n        //   you ideally would memoize the options in a cache\\n        //   to reduce the number of requests to the server & reduce UX latency\\n        //   checkout https://stackfull.dev/trie-in-javascript-the-data-structure-behind-autocomplete\\n        //   for a trie implementation in JS that you can use to memoize options\\n        //   dimsum offers a tree data structure that you can use for this at https://qa.dimsum.rd.elliemae.io/?path=/story/hooks--use-ds-tree\\n        setOptions([]);\\n        asyncSetOptions(value[name] as string);\\n      }\\n    });\\n    return () => subscription.unsubscribe();\\n  }, [args.name, asyncSetOptions, watch]);\\n\\n  return (\\n    <FormLayoutBlockItem\\n      inputID=\\"star_wars_character\\"\\n      label=\\"Favourite Star Wars character\\"\\n    >\\n      <Autocomplete name={args.name} options={options}>\\n        <InputText name={args.name} defaultValue={args.defaultValue} />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\n\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Grid p=\\"m\\">\\n    <Form>\\n      <AsyncAutoComplete {...args} />\\n      <DSButtonV2>Submit</DSButtonV2>\\n      <WatchValue label=\\"Favourite Star Wars character\\" {...args} />\\n    </Form>\\n  </Grid>\\n);\\n\\nexport const AsyncSuggestionsAutocomplete = Template.bind({});\\n\\nAsyncSuggestionsAutocomplete.args = {\\n  name: 'star_wars_character',\\n  defaultValue: 'Obi',\\n  options: [],\\n};\\n","locationsMap":{"async-suggestions-autocomplete":{"startLoc":{"col":43,"line":99},"endLoc":{"col":1,"line":107},"startBody":{"col":43,"line":99},"endBody":{"col":1,"line":107}}}},},
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+type FakeOption = {
+  dsId: string;
+  type: 'option';
+  value: string;
+  label: string;
+};
+const fakeOptionsFromServer: FakeOption[] = [
+  {
+    dsId: '1',
+    type: 'option',
+    value: 'Luke Skywalker too long this text is super long',
+    label: 'Luke Skywalker too long this text is super long',
+  },
+  {
+    dsId: '2',
+    type: 'option',
+    value: 'Obi-Wan Kenobi',
+    label: 'Obi-Wan Kenobi',
+  },
+  {
+    dsId: '3',
+    type: 'option',
+    value: 'Padme Amidala',
+    label: 'Padme Amidala',
+  },
+];
+
+const getFakeAsyncFilteredOptions = (value: string): Promise<FakeOption[]> =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      if (value.length < 3) return resolve([]);
+      return resolve(
+        fakeOptionsFromServer.filter((option) =>
+          option.value.toLowerCase().includes(value.toLowerCase()),
+        ),
+      );
+    }, 2000);
+  });
+
+const AsyncAutoComplete = (args: AutocompleteProps) => {
+  const { watch } = useFormContext();
+  const [options, setOptions] = React.useState<FakeOption[]>([]);
+
+  const asyncSetOptions = React.useCallback((value: string) => {
+    getFakeAsyncFilteredOptions(value)
+      .then((filteredOptions) => {
+        setOptions(filteredOptions);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
+
+  React.useEffect(() => {
+    const subscription = watch((value, { name }) => {
+      if (name === args.name) {
+        // clear options until we get new ones from server
+        // in a real app,
+        //   you ideally would memoize the options in a cache
+        //   to reduce the number of requests to the server & reduce UX latency
+        //   checkout https://stackfull.dev/trie-in-javascript-the-data-structure-behind-autocomplete
+        //   for a trie implementation in JS that you can use to memoize options
+        //   dimsum offers a tree data structure that you can use for this at https://qa.dimsum.rd.elliemae.io/?path=/story/hooks--use-ds-tree
+        setOptions([]);
+        asyncSetOptions(value[name] as string);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [args.name, asyncSetOptions, watch]);
+
+  return (
+    <FormLayoutBlockItem
+      inputID="star_wars_character"
+      label="Favourite Star Wars character"
+    >
+      <Autocomplete name={args.name} options={options}>
+        <InputText name={args.name} defaultValue={args.defaultValue} />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+
+const Template: Story<AutocompleteProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <AsyncAutoComplete {...args} />
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Favourite Star Wars character" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const AsyncSuggestionsAutocomplete = Template.bind({});
+
+AsyncSuggestionsAutocomplete.args = {
+  name: 'star_wars_character',
+  defaultValue: 'Obi',
+  options: [],
+};
+`,locationsMap:{"async-suggestions-autocomplete":{startLoc:{col:43,line:107},endLoc:{col:1,line:115},startBody:{col:43,line:107},endBody:{col:1,line:115}}}},storySource:{source:`import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+import { useFormContext } from 'react-hook-form';
+import { Form } from '../../form/index.js';
+import { FormLayoutBlockItem } from '../form-layout-block-item/index.js';
+import { Autocomplete, AutocompleteProps } from './index.js';
+import { InputText } from '../input-text/index.js';
+import { WatchValue } from '../watch-value.js';
+
+export default {
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+type FakeOption = {
+  dsId: string;
+  type: 'option';
+  value: string;
+  label: string;
+};
+const fakeOptionsFromServer: FakeOption[] = [
+  {
+    dsId: '1',
+    type: 'option',
+    value: 'Luke Skywalker too long this text is super long',
+    label: 'Luke Skywalker too long this text is super long',
+  },
+  {
+    dsId: '2',
+    type: 'option',
+    value: 'Obi-Wan Kenobi',
+    label: 'Obi-Wan Kenobi',
+  },
+  {
+    dsId: '3',
+    type: 'option',
+    value: 'Padme Amidala',
+    label: 'Padme Amidala',
+  },
+];
+
+const getFakeAsyncFilteredOptions = (value: string): Promise<FakeOption[]> =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      if (value.length < 3) return resolve([]);
+      return resolve(
+        fakeOptionsFromServer.filter((option) =>
+          option.value.toLowerCase().includes(value.toLowerCase()),
+        ),
+      );
+    }, 2000);
+  });
+
+const AsyncAutoComplete = (args: AutocompleteProps) => {
+  const { watch } = useFormContext();
+  const [options, setOptions] = React.useState<FakeOption[]>([]);
+
+  const asyncSetOptions = React.useCallback((value: string) => {
+    getFakeAsyncFilteredOptions(value)
+      .then((filteredOptions) => {
+        setOptions(filteredOptions);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }, []);
+
+  React.useEffect(() => {
+    const subscription = watch((value, { name }) => {
+      if (name === args.name) {
+        // clear options until we get new ones from server
+        // in a real app,
+        //   you ideally would memoize the options in a cache
+        //   to reduce the number of requests to the server & reduce UX latency
+        //   checkout https://stackfull.dev/trie-in-javascript-the-data-structure-behind-autocomplete
+        //   for a trie implementation in JS that you can use to memoize options
+        //   dimsum offers a tree data structure that you can use for this at https://qa.dimsum.rd.elliemae.io/?path=/story/hooks--use-ds-tree
+        setOptions([]);
+        asyncSetOptions(value[name] as string);
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [args.name, asyncSetOptions, watch]);
+
+  return (
+    <FormLayoutBlockItem
+      inputID="star_wars_character"
+      label="Favourite Star Wars character"
+    >
+      <Autocomplete name={args.name} options={options}>
+        <InputText name={args.name} defaultValue={args.defaultValue} />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+
+const Template: Story<AutocompleteProps> = (args) => (
+  <Grid p="m">
+    <Form>
+      <AsyncAutoComplete {...args} />
+      <DSButtonV2>Submit</DSButtonV2>
+      <WatchValue label="Favourite Star Wars character" {...args} />
+    </Form>
+  </Grid>
+);
+
+export const AsyncSuggestionsAutocomplete = Template.bind({});
+
+AsyncSuggestionsAutocomplete.args = {
+  name: 'star_wars_character',
+  defaultValue: 'Obi',
+  options: [],
+};
+`,locationsMap:{"async-suggestions-autocomplete":{startLoc:{col:43,line:99},endLoc:{col:1,line:107},startBody:{col:43,line:99},endBody:{col:1,line:107}}}}},title:"Components/Form/Controls/Autocomplete",component:a.j};var P=[{dsId:"1",type:"option",value:"Luke Skywalker too long this text is super long",label:"Luke Skywalker too long this text is super long"},{dsId:"2",type:"option",value:"Obi-Wan Kenobi",label:"Obi-Wan Kenobi"},{dsId:"3",type:"option",value:"Padme Amidala",label:"Padme Amidala"}],S=function(y){return new Promise(function(E){setTimeout(function(){return y.length<3?E([]):E(P.filter(function(j){return j.value.toLowerCase().includes(y.toLowerCase())}))},2e3)})},x=function(y){var E=(0,s.xW)(),j=E.watch,T=l.useState([]),L=d()(T,2),R=L[0],B=L[1],M=l.useCallback(function(C){S(C).then(function(F){B(F)}).catch(function(F){console.error(F)})},[]);return l.useEffect(function(){var C=j(function(F,V){var W=V.name;W===y.name&&(B([]),M(F[W]))});return function(){return C.unsubscribe()}},[y.name,M,j]),t()(m.B,{inputID:"star_wars_character",label:"Favourite Star Wars character"},void 0,t()(a.j,{name:y.name,options:R},void 0,t()(n.S,{name:y.name,defaultValue:y.defaultValue})))};x.displayName="AsyncAutoComplete";var O=function(y){return t()(i.Ay,{p:"m"},void 0,t()(f.l,{},void 0,(0,h.jsx)(x,Object.assign({},y)),b||(b=t()(r.e,{},void 0,"Submit")),(0,h.jsx)(o.n,Object.assign({label:"Favourite Star Wars character"},y))))};O.displayName="Template";var D=O.bind({});D.args={name:"star_wars_character",defaultValue:"Obi",options:[]};var w=["AsyncSuggestionsAutocomplete"]}}]);