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

package/demo/view-fields-autocomplete-advanced-autocomplete-stories.2657a5b3.iframe.bundle.js

@@ -0,0 +1,669 @@
+"use strict";(globalThis.webpackChunk_elliemae_pui_app_sdk=globalThis.webpackChunk_elliemae_pui_app_sdk||[]).push([[3071],{"./lib/view/fields/autocomplete/index.tsx"(x,f,e){e.d(f,{j:()=>s});var h=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(h),m=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),c=e.n(m),r=e("./node_modules/.pnpm/core-js@3.49.0/node_modules/core-js/modules/es.array.includes.js"),p=e.n(r),_=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"),l=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),u=["children"],y=function(a,o){if(!o)return a;var t=a.filter(function(C){return C.type==="section"||C.label.toLowerCase().includes(o?.toLowerCase())});return t.length===1&&t[0].type==="section"?[]:t},s=function(a){var o=a.children,t=c()(a,u),C=(0,l.xW)(),b=C.watch,A=C.setValue,v=b(t.name),V=(0,_.useCallback)(function(g){for(var I=arguments.length,T=new Array(I>1?I-1:0),d=1;d<I;d++)T[d-1]=arguments[d];t.onSelect?t.onSelect.apply(t,[g].concat(T)):A(t.name,g,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},[t,A]);return n()(i.A,{id:"",filter:v??"",onSelect:V,options:y(t.options,v)},void 0,o)};s.displayName="Autocomplete"},"./lib/view/fields/form-layout-block-item/index.tsx"(x,f,e){e.d(f,{B:()=>_});var h=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),n=e.n(h),m=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"),c=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),r=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),p=["inputID","label"],_=function(i){var l=i.inputID,u=i.label,y=n()(i,p),s=(0,c.lN)({name:l}),a=s.errors,o=(0,c.Jt)(a,l),t=!!o,C=o?.message;return(0,r.jsx)(m.U,Object.assign({inputID:l,label:u,hasError:t,validationMessage:C},y))};_.displayName="FormLayoutBlockItem"},"./lib/view/fields/input-text/index.tsx"(x,f,e){e.d(f,{S:()=>l});var h=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(h),m=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),c=e.n(m),r=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"),p=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"),i=["name","defaultValue","rules"],l=function(u){var y=u.name,s=u.defaultValue,a=s===void 0?"":s,o=u.rules,t=o===void 0?{}:o,C=c()(u,i);return n()(p.xI,{name:y,defaultValue:a,rules:t,render:function(b){var A=b.field,v=b.fieldState.error;return(0,_.jsx)(r.B,Object.assign({hasError:!!v},A,C))}})};l.displayName="InputText"},"./lib/view/fields/watch-value.tsx"(x,f,e){e.d(f,{n:()=>l});var h=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(h),m=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"),c=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/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),p,_=m.default.section.withConfig({componentId:"sc-1va6d9p-0"})(["margin-top:10px;border-top:2px blue dotted;width:100%;"]),i=m.default.div.withConfig({componentId:"sc-1va6d9p-1"})(["display:flex;flex-direction:column;padding-left:10px;align-items:flex-start;"]),l=function(u){var y=u.name,s=u.label,a=(0,r.xW)(),o=a.watch,t=o(y,!1)||"";return n()(c.Ay,{},void 0,n()(_,{},void 0,p||(p=n()("h4",{},void 0,"Form Data:")),n()(i,{},void 0,n()("div",{},void 0,s," : ",n()("strong",{},void 0,JSON.stringify(t))))))};l.displayName="WatchValue"},"./lib/view/form/index.tsx"(x,f,e){e.d(f,{l:()=>r});var h=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"),n=e("./node_modules/.pnpm/react-hook-form@7.70.0_react@18.3.1/node_modules/react-hook-form/dist/index.esm.mjs"),m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),c=h.default.form.withConfig({componentId:"sc-1pyjvv3-0"})(["width:100%;"]),r=function(p){var _=p.classname,i=p.reactHookFormProps,l=i===void 0?{mode:"onBlur"}:i,u=p.children,y=p.onSubmit,s=(0,n.mN)(l),a={};y&&(a.onSubmit=s.handleSubmit(y));var o=Object.assign(s,{formProps:l});return(0,m.jsx)(n.Op,Object.assign({},o,{children:(0,m.jsx)(c,Object.assign({className:_},a,{children:u}))}))};r.displayName="Form"},"./lib/view/fields/autocomplete/advanced-autocomplete.stories.tsx"(x,f,e){e.r(f),e.d(f,{AdvancedAutocomplete:()=>I,__namedExportsOrder:()=>T,default:()=>b});var h=e("./node_modules/.pnpm/@babel+runtime@7.29.2/node_modules/@babel/runtime/helpers/jsx.js"),n=e.n(h),m=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/index.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"),r=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"),p=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"),_=e("./lib/view/form/index.tsx"),i=e("./lib/view/fields/form-layout-block-item/index.tsx"),l=e("./lib/view/fields/autocomplete/index.tsx"),u=e("./lib/view/fields/input-text/index.tsx"),y=e("./lib/view/fields/watch-value.tsx"),s=e("./node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"),a,o,t=`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { useCallback } from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\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\\n// autocomplete \\"value\\" from dimsum officially accepts \\"strings\\",\\n//   if you need to support object,\\n//   you have to handle the map on your side\\nconst autocompleteMap = {\\n  '0': {\\n    City: 'Buffalo Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '1': {\\n    City: 'Summer Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '2': {\\n    City: 'Winter Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n} as const;\\n\\nconst Button = () => {\\n  const {\\n    formState: { isValid },\\n  } = useFormContext();\\n  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;\\n};\\nconst ZipCodeSearch = (args: AutocompleteProps) => {\\n  const { setValue } = useFormContext();\\n  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(\\n    (label) => {\\n      // find which option includes label in it's label\\n      const selectedOption = args.options.find(\\n        (option) => option.label === label,\\n      );\\n      if (selectedOption?.type === 'option' && selectedOption?.value) {\\n        const derivedData =\\n          autocompleteMap[\\n            selectedOption.value as unknown as keyof typeof autocompleteMap\\n          ];\\n        setValue('city', derivedData.City, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('county', derivedData.County, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('zipcode', derivedData.zipCode, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n      }\\n    },\\n    [args.options, setValue],\\n  );\\n  const onInputChangeHandler = useCallback<\\n    React.FormEventHandler<HTMLInputElement>\\n  >(\\n    (e) => {\\n      const { value } = e.target as HTMLInputElement;\\n      setValue('zipcode', value, {\\n        shouldValidate: true,\\n        shouldDirty: true,\\n        shouldTouch: true,\\n      });\\n    },\\n    [setValue],\\n  );\\n  return (\\n    <FormLayoutBlockItem inputID=\\"zipcode\\" label=\\"Zipcode\\" required>\\n      <Autocomplete\\n        options={args.options}\\n        onSelect={onSelectHandler}\\n        name={args.name}\\n      >\\n        <InputText\\n          autoComplete=\\"off\\"\\n          name={args.name}\\n          defaultValue=\\"12344\\"\\n          onChange={onInputChangeHandler}\\n          rules={{\\n            required: { value: true, message: 'This field is required' },\\n          }}\\n        />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Form>\\n    <Grid p=\\"m\\" gutter=\\"xs\\">\\n      <Grid></Grid>\\n      <Grid>\\n        <ZipCodeSearch {...args} />\\n      </Grid>\\n      <Grid>\\n        <FormLayoutBlockItem inputID=\\"county\\" label=\\"county\\" required>\\n          <InputText\\n            name=\\"county\\"\\n            defaultValue=\\"county\\"\\n            rules={{\\n              required: { value: true, message: 'This field is required' },\\n            }}\\n          />\\n        </FormLayoutBlockItem>\\n      </Grid>\\n      <Grid>\\n        <Button />\\n      </Grid>\\n      <WatchValue label=\\"Zipcode\\" {...args} />\\n    </Grid>\\n  </Form>\\n);\\nexport const AdvancedAutocomplete = Template.bind({});\\nAdvancedAutocomplete.args = {\\n  name: 'zipcode',\\n  options: [\\n    {\\n      dsId: '0',\\n      label: 'Buffalo Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '0',\\n    },\\n    {\\n      dsId: '1',\\n      label: 'Summer Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '1',\\n    },\\n    {\\n      dsId: '2',\\n      label: 'Winter Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '2',\\n    },\\n  ],\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"AdvancedAutocomplete":{"startLoc":{"col":43,"line":115},"endLoc":{"col":1,"line":139},"startBody":{"col":43,"line":115},"endBody":{"col":1,"line":139}}};
+    
+import { useCallback } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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 { useCallback } from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\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\\n// autocomplete \\"value\\" from dimsum officially accepts \\"strings\\",\\n//   if you need to support object,\\n//   you have to handle the map on your side\\nconst autocompleteMap = {\\n  '0': {\\n    City: 'Buffalo Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '1': {\\n    City: 'Summer Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '2': {\\n    City: 'Winter Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n} as const;\\n\\nconst Button = () => {\\n  const {\\n    formState: { isValid },\\n  } = useFormContext();\\n  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;\\n};\\nconst ZipCodeSearch = (args: AutocompleteProps) => {\\n  const { setValue } = useFormContext();\\n  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(\\n    (label) => {\\n      // find which option includes label in it's label\\n      const selectedOption = args.options.find(\\n        (option) => option.label === label,\\n      );\\n      if (selectedOption?.type === 'option' && selectedOption?.value) {\\n        const derivedData =\\n          autocompleteMap[\\n            selectedOption.value as unknown as keyof typeof autocompleteMap\\n          ];\\n        setValue('city', derivedData.City, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('county', derivedData.County, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('zipcode', derivedData.zipCode, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n      }\\n    },\\n    [args.options, setValue],\\n  );\\n  const onInputChangeHandler = useCallback<\\n    React.FormEventHandler<HTMLInputElement>\\n  >(\\n    (e) => {\\n      const { value } = e.target as HTMLInputElement;\\n      setValue('zipcode', value, {\\n        shouldValidate: true,\\n        shouldDirty: true,\\n        shouldTouch: true,\\n      });\\n    },\\n    [setValue],\\n  );\\n  return (\\n    <FormLayoutBlockItem inputID=\\"zipcode\\" label=\\"Zipcode\\" required>\\n      <Autocomplete\\n        options={args.options}\\n        onSelect={onSelectHandler}\\n        name={args.name}\\n      >\\n        <InputText\\n          autoComplete=\\"off\\"\\n          name={args.name}\\n          defaultValue=\\"12344\\"\\n          onChange={onInputChangeHandler}\\n          rules={{\\n            required: { value: true, message: 'This field is required' },\\n          }}\\n        />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Form>\\n    <Grid p=\\"m\\" gutter=\\"xs\\">\\n      <Grid></Grid>\\n      <Grid>\\n        <ZipCodeSearch {...args} />\\n      </Grid>\\n      <Grid>\\n        <FormLayoutBlockItem inputID=\\"county\\" label=\\"county\\" required>\\n          <InputText\\n            name=\\"county\\"\\n            defaultValue=\\"county\\"\\n            rules={{\\n              required: { value: true, message: 'This field is required' },\\n            }}\\n          />\\n        </FormLayoutBlockItem>\\n      </Grid>\\n      <Grid>\\n        <Button />\\n      </Grid>\\n      <WatchValue label=\\"Zipcode\\" {...args} />\\n    </Grid>\\n  </Form>\\n);\\nexport const AdvancedAutocomplete = Template.bind({});\\nAdvancedAutocomplete.args = {\\n  name: 'zipcode',\\n  options: [\\n    {\\n      dsId: '0',\\n      label: 'Buffalo Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '0',\\n    },\\n    {\\n      dsId: '1',\\n      label: 'Summer Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '1',\\n    },\\n    {\\n      dsId: '2',\\n      label: 'Winter Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '2',\\n    },\\n  ],\\n};\\n","locationsMap":{"advanced-autocomplete":{"startLoc":{"col":43,"line":115},"endLoc":{"col":1,"line":139},"startBody":{"col":43,"line":115},"endBody":{"col":1,"line":139}}}},},
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+// autocomplete "value" from dimsum officially accepts "strings",
+//   if you need to support object,
+//   you have to handle the map on your side
+const autocompleteMap = {
+  '0': {
+    City: 'Buffalo Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '1': {
+    City: 'Summer Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '2': {
+    City: 'Winter Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+} as const;
+
+const Button = () => {
+  const {
+    formState: { isValid },
+  } = useFormContext();
+  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;
+};
+const ZipCodeSearch = (args: AutocompleteProps) => {
+  const { setValue } = useFormContext();
+  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(
+    (label) => {
+      // find which option includes label in it's label
+      const selectedOption = args.options.find(
+        (option) => option.label === label,
+      );
+      if (selectedOption?.type === 'option' && selectedOption?.value) {
+        const derivedData =
+          autocompleteMap[
+            selectedOption.value as unknown as keyof typeof autocompleteMap
+          ];
+        setValue('city', derivedData.City, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('county', derivedData.County, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('zipcode', derivedData.zipCode, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+      }
+    },
+    [args.options, setValue],
+  );
+  const onInputChangeHandler = useCallback<
+    React.FormEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const { value } = e.target as HTMLInputElement;
+      setValue('zipcode', value, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    },
+    [setValue],
+  );
+  return (
+    <FormLayoutBlockItem inputID="zipcode" label="Zipcode" required>
+      <Autocomplete
+        options={args.options}
+        onSelect={onSelectHandler}
+        name={args.name}
+      >
+        <InputText
+          autoComplete="off"
+          name={args.name}
+          defaultValue="12344"
+          onChange={onInputChangeHandler}
+          rules={{
+            required: { value: true, message: 'This field is required' },
+          }}
+        />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+const Template: Story<AutocompleteProps> = (args) => (
+  <Form>
+    <Grid p="m" gutter="xs">
+      <Grid></Grid>
+      <Grid>
+        <ZipCodeSearch {...args} />
+      </Grid>
+      <Grid>
+        <FormLayoutBlockItem inputID="county" label="county" required>
+          <InputText
+            name="county"
+            defaultValue="county"
+            rules={{
+              required: { value: true, message: 'This field is required' },
+            }}
+          />
+        </FormLayoutBlockItem>
+      </Grid>
+      <Grid>
+        <Button />
+      </Grid>
+      <WatchValue label="Zipcode" {...args} />
+    </Grid>
+  </Form>
+);
+export const AdvancedAutocomplete = Template.bind({});
+AdvancedAutocomplete.args = {
+  name: 'zipcode',
+  options: [
+    {
+      dsId: '0',
+      label: 'Buffalo Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '0',
+    },
+    {
+      dsId: '1',
+      label: 'Summer Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '1',
+    },
+    {
+      dsId: '2',
+      label: 'Winter Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '2',
+    },
+  ],
+};
+`,C={AdvancedAutocomplete:{startLoc:{col:43,line:123},endLoc:{col:1,line:147},startBody:{col:43,line:123},endBody:{col:1,line:147}}},t=`import { useCallback } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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;
+
+// autocomplete "value" from dimsum officially accepts "strings",
+//   if you need to support object,
+//   you have to handle the map on your side
+const autocompleteMap = {
+  '0': {
+    City: 'Buffalo Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '1': {
+    City: 'Summer Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '2': {
+    City: 'Winter Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+} as const;
+
+const Button = () => {
+  const {
+    formState: { isValid },
+  } = useFormContext();
+  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;
+};
+const ZipCodeSearch = (args: AutocompleteProps) => {
+  const { setValue } = useFormContext();
+  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(
+    (label) => {
+      // find which option includes label in it's label
+      const selectedOption = args.options.find(
+        (option) => option.label === label,
+      );
+      if (selectedOption?.type === 'option' && selectedOption?.value) {
+        const derivedData =
+          autocompleteMap[
+            selectedOption.value as unknown as keyof typeof autocompleteMap
+          ];
+        setValue('city', derivedData.City, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('county', derivedData.County, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('zipcode', derivedData.zipCode, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+      }
+    },
+    [args.options, setValue],
+  );
+  const onInputChangeHandler = useCallback<
+    React.FormEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const { value } = e.target as HTMLInputElement;
+      setValue('zipcode', value, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    },
+    [setValue],
+  );
+  return (
+    <FormLayoutBlockItem inputID="zipcode" label="Zipcode" required>
+      <Autocomplete
+        options={args.options}
+        onSelect={onSelectHandler}
+        name={args.name}
+      >
+        <InputText
+          autoComplete="off"
+          name={args.name}
+          defaultValue="12344"
+          onChange={onInputChangeHandler}
+          rules={{
+            required: { value: true, message: 'This field is required' },
+          }}
+        />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+const Template: Story<AutocompleteProps> = (args) => (
+  <Form>
+    <Grid p="m" gutter="xs">
+      <Grid></Grid>
+      <Grid>
+        <ZipCodeSearch {...args} />
+      </Grid>
+      <Grid>
+        <FormLayoutBlockItem inputID="county" label="county" required>
+          <InputText
+            name="county"
+            defaultValue="county"
+            rules={{
+              required: { value: true, message: 'This field is required' },
+            }}
+          />
+        </FormLayoutBlockItem>
+      </Grid>
+      <Grid>
+        <Button />
+      </Grid>
+      <WatchValue label="Zipcode" {...args} />
+    </Grid>
+  </Form>
+);
+export const AdvancedAutocomplete = Template.bind({});
+AdvancedAutocomplete.args = {
+  name: 'zipcode',
+  options: [
+    {
+      dsId: '0',
+      label: 'Buffalo Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '0',
+    },
+    {
+      dsId: '1',
+      label: 'Summer Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '1',
+    },
+    {
+      dsId: '2',
+      label: 'Winter Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '2',
+    },
+  ],
+};
+`,C={AdvancedAutocomplete:{startLoc:{col:43,line:115},endLoc:{col:1,line:139},startBody:{col:43,line:115},endBody:{col:1,line:139}}};const b={parameters:{storySource:{source:`
+    
+    // @ts-nocheck
+    // @ts-ignore
+    var __STORY__ = "import { useCallback } from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\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\\n// autocomplete \\"value\\" from dimsum officially accepts \\"strings\\",\\n//   if you need to support object,\\n//   you have to handle the map on your side\\nconst autocompleteMap = {\\n  '0': {\\n    City: 'Buffalo Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '1': {\\n    City: 'Summer Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '2': {\\n    City: 'Winter Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n} as const;\\n\\nconst Button = () => {\\n  const {\\n    formState: { isValid },\\n  } = useFormContext();\\n  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;\\n};\\nconst ZipCodeSearch = (args: AutocompleteProps) => {\\n  const { setValue } = useFormContext();\\n  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(\\n    (label) => {\\n      // find which option includes label in it's label\\n      const selectedOption = args.options.find(\\n        (option) => option.label === label,\\n      );\\n      if (selectedOption?.type === 'option' && selectedOption?.value) {\\n        const derivedData =\\n          autocompleteMap[\\n            selectedOption.value as unknown as keyof typeof autocompleteMap\\n          ];\\n        setValue('city', derivedData.City, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('county', derivedData.County, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('zipcode', derivedData.zipCode, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n      }\\n    },\\n    [args.options, setValue],\\n  );\\n  const onInputChangeHandler = useCallback<\\n    React.FormEventHandler<HTMLInputElement>\\n  >(\\n    (e) => {\\n      const { value } = e.target as HTMLInputElement;\\n      setValue('zipcode', value, {\\n        shouldValidate: true,\\n        shouldDirty: true,\\n        shouldTouch: true,\\n      });\\n    },\\n    [setValue],\\n  );\\n  return (\\n    <FormLayoutBlockItem inputID=\\"zipcode\\" label=\\"Zipcode\\" required>\\n      <Autocomplete\\n        options={args.options}\\n        onSelect={onSelectHandler}\\n        name={args.name}\\n      >\\n        <InputText\\n          autoComplete=\\"off\\"\\n          name={args.name}\\n          defaultValue=\\"12344\\"\\n          onChange={onInputChangeHandler}\\n          rules={{\\n            required: { value: true, message: 'This field is required' },\\n          }}\\n        />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Form>\\n    <Grid p=\\"m\\" gutter=\\"xs\\">\\n      <Grid></Grid>\\n      <Grid>\\n        <ZipCodeSearch {...args} />\\n      </Grid>\\n      <Grid>\\n        <FormLayoutBlockItem inputID=\\"county\\" label=\\"county\\" required>\\n          <InputText\\n            name=\\"county\\"\\n            defaultValue=\\"county\\"\\n            rules={{\\n              required: { value: true, message: 'This field is required' },\\n            }}\\n          />\\n        </FormLayoutBlockItem>\\n      </Grid>\\n      <Grid>\\n        <Button />\\n      </Grid>\\n      <WatchValue label=\\"Zipcode\\" {...args} />\\n    </Grid>\\n  </Form>\\n);\\nexport const AdvancedAutocomplete = Template.bind({});\\nAdvancedAutocomplete.args = {\\n  name: 'zipcode',\\n  options: [\\n    {\\n      dsId: '0',\\n      label: 'Buffalo Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '0',\\n    },\\n    {\\n      dsId: '1',\\n      label: 'Summer Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '1',\\n    },\\n    {\\n      dsId: '2',\\n      label: 'Winter Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '2',\\n    },\\n  ],\\n};\\n";
+    // @ts-ignore
+    var __LOCATIONS_MAP__ = {"AdvancedAutocomplete":{"startLoc":{"col":43,"line":115},"endLoc":{"col":1,"line":139},"startBody":{"col":43,"line":115},"endBody":{"col":1,"line":139}}};
+    
+import { useCallback } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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 { useCallback } from 'react';\\nimport { Story, Meta } from '@storybook/react';\\nimport { useFormContext } from 'react-hook-form';\\nimport { Grid } from '@elliemae/ds-grid';\\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\\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\\n// autocomplete \\"value\\" from dimsum officially accepts \\"strings\\",\\n//   if you need to support object,\\n//   you have to handle the map on your side\\nconst autocompleteMap = {\\n  '0': {\\n    City: 'Buffalo Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '1': {\\n    City: 'Summer Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n  '2': {\\n    City: 'Winter Hill',\\n    County: 'El Dorado',\\n    IsUserDefined: 'false',\\n    State: 'CA',\\n    zipCode: '12345',\\n  },\\n} as const;\\n\\nconst Button = () => {\\n  const {\\n    formState: { isValid },\\n  } = useFormContext();\\n  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;\\n};\\nconst ZipCodeSearch = (args: AutocompleteProps) => {\\n  const { setValue } = useFormContext();\\n  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(\\n    (label) => {\\n      // find which option includes label in it's label\\n      const selectedOption = args.options.find(\\n        (option) => option.label === label,\\n      );\\n      if (selectedOption?.type === 'option' && selectedOption?.value) {\\n        const derivedData =\\n          autocompleteMap[\\n            selectedOption.value as unknown as keyof typeof autocompleteMap\\n          ];\\n        setValue('city', derivedData.City, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('county', derivedData.County, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n        setValue('zipcode', derivedData.zipCode, {\\n          shouldValidate: true,\\n          shouldDirty: true,\\n          shouldTouch: true,\\n        });\\n      }\\n    },\\n    [args.options, setValue],\\n  );\\n  const onInputChangeHandler = useCallback<\\n    React.FormEventHandler<HTMLInputElement>\\n  >(\\n    (e) => {\\n      const { value } = e.target as HTMLInputElement;\\n      setValue('zipcode', value, {\\n        shouldValidate: true,\\n        shouldDirty: true,\\n        shouldTouch: true,\\n      });\\n    },\\n    [setValue],\\n  );\\n  return (\\n    <FormLayoutBlockItem inputID=\\"zipcode\\" label=\\"Zipcode\\" required>\\n      <Autocomplete\\n        options={args.options}\\n        onSelect={onSelectHandler}\\n        name={args.name}\\n      >\\n        <InputText\\n          autoComplete=\\"off\\"\\n          name={args.name}\\n          defaultValue=\\"12344\\"\\n          onChange={onInputChangeHandler}\\n          rules={{\\n            required: { value: true, message: 'This field is required' },\\n          }}\\n        />\\n      </Autocomplete>\\n    </FormLayoutBlockItem>\\n  );\\n};\\nconst Template: Story<AutocompleteProps> = (args) => (\\n  <Form>\\n    <Grid p=\\"m\\" gutter=\\"xs\\">\\n      <Grid></Grid>\\n      <Grid>\\n        <ZipCodeSearch {...args} />\\n      </Grid>\\n      <Grid>\\n        <FormLayoutBlockItem inputID=\\"county\\" label=\\"county\\" required>\\n          <InputText\\n            name=\\"county\\"\\n            defaultValue=\\"county\\"\\n            rules={{\\n              required: { value: true, message: 'This field is required' },\\n            }}\\n          />\\n        </FormLayoutBlockItem>\\n      </Grid>\\n      <Grid>\\n        <Button />\\n      </Grid>\\n      <WatchValue label=\\"Zipcode\\" {...args} />\\n    </Grid>\\n  </Form>\\n);\\nexport const AdvancedAutocomplete = Template.bind({});\\nAdvancedAutocomplete.args = {\\n  name: 'zipcode',\\n  options: [\\n    {\\n      dsId: '0',\\n      label: 'Buffalo Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '0',\\n    },\\n    {\\n      dsId: '1',\\n      label: 'Summer Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '1',\\n    },\\n    {\\n      dsId: '2',\\n      label: 'Winter Hill, CA, El Dorado, 12345',\\n      type: 'option',\\n      value: '2',\\n    },\\n  ],\\n};\\n","locationsMap":{"advanced-autocomplete":{"startLoc":{"col":43,"line":115},"endLoc":{"col":1,"line":139},"startBody":{"col":43,"line":115},"endBody":{"col":1,"line":139}}}},},
+  title: 'Components/Form/Controls/Autocomplete',
+  component: Autocomplete,
+} as Meta;
+
+// autocomplete "value" from dimsum officially accepts "strings",
+//   if you need to support object,
+//   you have to handle the map on your side
+const autocompleteMap = {
+  '0': {
+    City: 'Buffalo Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '1': {
+    City: 'Summer Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '2': {
+    City: 'Winter Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+} as const;
+
+const Button = () => {
+  const {
+    formState: { isValid },
+  } = useFormContext();
+  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;
+};
+const ZipCodeSearch = (args: AutocompleteProps) => {
+  const { setValue } = useFormContext();
+  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(
+    (label) => {
+      // find which option includes label in it's label
+      const selectedOption = args.options.find(
+        (option) => option.label === label,
+      );
+      if (selectedOption?.type === 'option' && selectedOption?.value) {
+        const derivedData =
+          autocompleteMap[
+            selectedOption.value as unknown as keyof typeof autocompleteMap
+          ];
+        setValue('city', derivedData.City, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('county', derivedData.County, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('zipcode', derivedData.zipCode, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+      }
+    },
+    [args.options, setValue],
+  );
+  const onInputChangeHandler = useCallback<
+    React.FormEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const { value } = e.target as HTMLInputElement;
+      setValue('zipcode', value, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    },
+    [setValue],
+  );
+  return (
+    <FormLayoutBlockItem inputID="zipcode" label="Zipcode" required>
+      <Autocomplete
+        options={args.options}
+        onSelect={onSelectHandler}
+        name={args.name}
+      >
+        <InputText
+          autoComplete="off"
+          name={args.name}
+          defaultValue="12344"
+          onChange={onInputChangeHandler}
+          rules={{
+            required: { value: true, message: 'This field is required' },
+          }}
+        />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+const Template: Story<AutocompleteProps> = (args) => (
+  <Form>
+    <Grid p="m" gutter="xs">
+      <Grid></Grid>
+      <Grid>
+        <ZipCodeSearch {...args} />
+      </Grid>
+      <Grid>
+        <FormLayoutBlockItem inputID="county" label="county" required>
+          <InputText
+            name="county"
+            defaultValue="county"
+            rules={{
+              required: { value: true, message: 'This field is required' },
+            }}
+          />
+        </FormLayoutBlockItem>
+      </Grid>
+      <Grid>
+        <Button />
+      </Grid>
+      <WatchValue label="Zipcode" {...args} />
+    </Grid>
+  </Form>
+);
+export const AdvancedAutocomplete = Template.bind({});
+AdvancedAutocomplete.args = {
+  name: 'zipcode',
+  options: [
+    {
+      dsId: '0',
+      label: 'Buffalo Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '0',
+    },
+    {
+      dsId: '1',
+      label: 'Summer Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '1',
+    },
+    {
+      dsId: '2',
+      label: 'Winter Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '2',
+    },
+  ],
+};
+`,locationsMap:{"advanced-autocomplete":{startLoc:{col:43,line:123},endLoc:{col:1,line:147},startBody:{col:43,line:123},endBody:{col:1,line:147}}}},storySource:{source:`import { useCallback } from 'react';
+import { Story, Meta } from '@storybook/react';
+import { useFormContext } from 'react-hook-form';
+import { Grid } from '@elliemae/ds-grid';
+import { DSButtonV2 } from '@elliemae/ds-button-v2';
+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;
+
+// autocomplete "value" from dimsum officially accepts "strings",
+//   if you need to support object,
+//   you have to handle the map on your side
+const autocompleteMap = {
+  '0': {
+    City: 'Buffalo Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '1': {
+    City: 'Summer Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+  '2': {
+    City: 'Winter Hill',
+    County: 'El Dorado',
+    IsUserDefined: 'false',
+    State: 'CA',
+    zipCode: '12345',
+  },
+} as const;
+
+const Button = () => {
+  const {
+    formState: { isValid },
+  } = useFormContext();
+  return <DSButtonV2 disabled={!isValid}>Submit</DSButtonV2>;
+};
+const ZipCodeSearch = (args: AutocompleteProps) => {
+  const { setValue } = useFormContext();
+  const onSelectHandler = useCallback<Required<AutocompleteProps>['onSelect']>(
+    (label) => {
+      // find which option includes label in it's label
+      const selectedOption = args.options.find(
+        (option) => option.label === label,
+      );
+      if (selectedOption?.type === 'option' && selectedOption?.value) {
+        const derivedData =
+          autocompleteMap[
+            selectedOption.value as unknown as keyof typeof autocompleteMap
+          ];
+        setValue('city', derivedData.City, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('county', derivedData.County, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+        setValue('zipcode', derivedData.zipCode, {
+          shouldValidate: true,
+          shouldDirty: true,
+          shouldTouch: true,
+        });
+      }
+    },
+    [args.options, setValue],
+  );
+  const onInputChangeHandler = useCallback<
+    React.FormEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const { value } = e.target as HTMLInputElement;
+      setValue('zipcode', value, {
+        shouldValidate: true,
+        shouldDirty: true,
+        shouldTouch: true,
+      });
+    },
+    [setValue],
+  );
+  return (
+    <FormLayoutBlockItem inputID="zipcode" label="Zipcode" required>
+      <Autocomplete
+        options={args.options}
+        onSelect={onSelectHandler}
+        name={args.name}
+      >
+        <InputText
+          autoComplete="off"
+          name={args.name}
+          defaultValue="12344"
+          onChange={onInputChangeHandler}
+          rules={{
+            required: { value: true, message: 'This field is required' },
+          }}
+        />
+      </Autocomplete>
+    </FormLayoutBlockItem>
+  );
+};
+const Template: Story<AutocompleteProps> = (args) => (
+  <Form>
+    <Grid p="m" gutter="xs">
+      <Grid></Grid>
+      <Grid>
+        <ZipCodeSearch {...args} />
+      </Grid>
+      <Grid>
+        <FormLayoutBlockItem inputID="county" label="county" required>
+          <InputText
+            name="county"
+            defaultValue="county"
+            rules={{
+              required: { value: true, message: 'This field is required' },
+            }}
+          />
+        </FormLayoutBlockItem>
+      </Grid>
+      <Grid>
+        <Button />
+      </Grid>
+      <WatchValue label="Zipcode" {...args} />
+    </Grid>
+  </Form>
+);
+export const AdvancedAutocomplete = Template.bind({});
+AdvancedAutocomplete.args = {
+  name: 'zipcode',
+  options: [
+    {
+      dsId: '0',
+      label: 'Buffalo Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '0',
+    },
+    {
+      dsId: '1',
+      label: 'Summer Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '1',
+    },
+    {
+      dsId: '2',
+      label: 'Winter Hill, CA, El Dorado, 12345',
+      type: 'option',
+      value: '2',
+    },
+  ],
+};
+`,locationsMap:{"advanced-autocomplete":{startLoc:{col:43,line:115},endLoc:{col:1,line:139},startBody:{col:43,line:115},endBody:{col:1,line:139}}}}},title:"Components/Form/Controls/Autocomplete",component:l.j};var A={0:{City:"Buffalo Hill",County:"El Dorado",IsUserDefined:"false",State:"CA",zipCode:"12345"},1:{City:"Summer Hill",County:"El Dorado",IsUserDefined:"false",State:"CA",zipCode:"12345"},2:{City:"Winter Hill",County:"El Dorado",IsUserDefined:"false",State:"CA",zipCode:"12345"}},v=function(){var d=(0,c.xW)(),B=d.formState.isValid;return n()(p.e,{disabled:!B},void 0,"Submit")};v.displayName="Button";var V=function(d){var B=(0,c.xW)(),E=B.setValue,j=(0,m.useCallback)(function(M){var D=d.options.find(function(P){return P.label===M});if(D?.type==="option"&&D!==null&&D!==void 0&&D.value){var S=A[D.value];E("city",S.City,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0}),E("county",S.County,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0}),E("zipcode",S.zipCode,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})}},[d.options,E]),O=(0,m.useCallback)(function(M){var D=M.target,S=D.value;E("zipcode",S,{shouldValidate:!0,shouldDirty:!0,shouldTouch:!0})},[E]);return n()(i.B,{inputID:"zipcode",label:"Zipcode",required:!0},void 0,n()(l.j,{options:d.options,onSelect:j,name:d.name},void 0,n()(u.S,{autoComplete:"off",name:d.name,defaultValue:"12344",onChange:O,rules:{required:{value:!0,message:"This field is required"}}})))};V.displayName="ZipCodeSearch";var g=function(d){return n()(_.l,{},void 0,n()(r.Ay,{p:"m",gutter:"xs"},void 0,a||(a=n()(r.Ay,{})),n()(r.Ay,{},void 0,(0,s.jsx)(V,Object.assign({},d))),n()(r.Ay,{},void 0,n()(i.B,{inputID:"county",label:"county",required:!0},void 0,n()(u.S,{name:"county",defaultValue:"county",rules:{required:{value:!0,message:"This field is required"}}}))),o||(o=n()(r.Ay,{},void 0,n()(v,{}))),(0,s.jsx)(y.n,Object.assign({label:"Zipcode"},d))))};g.displayName="Template";var I=g.bind({});I.args={name:"zipcode",options:[{dsId:"0",label:"Buffalo Hill, CA, El Dorado, 12345",type:"option",value:"0"},{dsId:"1",label:"Summer Hill, CA, El Dorado, 12345",type:"option",value:"1"},{dsId:"2",label:"Winter Hill, CA, El Dorado, 12345",type:"option",value:"2"}]};var T=["AdvancedAutocomplete"]}}]);