import { AutocompleteSubmitEvent } from './types';
export declare const apiKey = "key_M57QS8SMPdLdLx4x";
export declare const componentDescription = "- import `CioAutocomplete` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed. All other values are optional.\n- Use different props to configure the behavior of this component.\n- The following stories shows how different props affect the component's behavior\n\n> Note: when we say `cioJsClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n";
export declare const hookDescription = "- import `useCioAutocomplete` and call this custom hook in a functional component.\n- This hook leaves rendering logic up to you, while handling:\n  - state management\n  - data fetching\n  - keyboard navigation\n  - mouse interactions\n  - focus and submit event handling\n  - accessibility\n- To use this hook, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed to the `useCioAutocomplete` hook to configure behavior. All other values are optional.\n- use the <a href=\"https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters\" target=\"__blank\">prop getters</a> and other variables returned by this hook (below) to leverage the functionality described above with jsx elements in your react component definitions\n\n> **Important: Please note that all of the select or submit events should go through the `onSubmit` callback. The `getItemProps` hook returns click and keyboard handlers which should be applied to the elements using the spread operator (see code examples below). Adding an `onClick` event manually to the elements would override the default behavior of the library preventing it from sending tracking events and would cause different behavior between click and keyboard events. Selecting an item or submitting the search would both cause `onSubmit` to be called. **\n\nCalling the `useCioAutocomplete` hook returns an object with the following keys:\n\n```jsx\nconst {\n  // must be used for a hooks integrations\n  query: string, // current input field value\n  sections: [{...}], // array of sections data to render in menu list\n  totalNumResultsPerSection: {\n    \"Products\": number,\n    \"Search Suggestions\": number,\n    ...\n  }, // total number of product and search suggestion results (and other sections)\n  getFormProps: () => ({...})), // prop getter for jsx form element\n  getInputProps: () => ({...})), // prop getter for jsx input element\n  getMenuProps: () => ({...})), // prop getter for jsx element rendering the results container\n  getItemProps: (item) => ({...})), // prop getter for jsx element rendering each result\n  getSectionProps: (section: Section) => ({...})), // prop getter for jsx element rendering each section.\n\n  // available for use, but not required for all use cases\n  selectedItem: item, // undefined or current selected item (via hover or arrow keys)\n  isOpen: boolean, // current state of the menu list\n  openMenu: () => void, // open menu\n  closeMenu: () => void, // close menu\n  setQuery: () => void, // update the current input field value\n  getLabelProps: () => ({...})), // prop getter for a jsx label element\n  cioJsClient, // instance of constructorio-client-javascript\n } = useCioAutocomplete(args);\n```\n\n> Note: when we say `cioJsClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)\n\nThe following stories show how different options affect the hook's behavior!\n";
export declare const sectionsDescription = "- by default, typing a query will fetch data for Search Suggestions and Products\n- to override this, pass an array of sections objects\n- the order of the objects in the `sections` array determines the order of the results\n- each autocomplete section object must have a `indexSectionName`\n- each recommendation section object must have a `podId`\n- passing displayName in the sectionConfiguration will override the displayName set by Merchandisers on the Customer Dashboard for the recommendation section\n- each custom section object must have a `displayName`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8\n\n`indexSectionName` refers to a section under an index. The default sections are \"Products\" and \"Search Suggestions\". You can find all the sections that exist in your index under the \"Indexes\" tab of Constructor dashboard.\n\nWhen no values are passed for the `sections` argument, the following defaults are used:\n\n```jsx\n[\n  {\n    indexSectionName: 'Search Suggestions',\n    type: 'autocomplete',\n    numResults: 8\n  },\n  {\n    indexSectionName: 'Products',\n    type: 'autocomplete',\n    numResults: 8\n  }\n]\n```\n";
export declare const userEventsDescription = "- pass callback functions to respond to user events\n- if provided, the onFocus callback function will be called each time the user focuses on the text input field\n- if provided, the onChange callback function will be called each time the user changes the value in the text input field\n- the onSubmit callback function will be called each time the user submits the form\n- the user can submit the form by pressing the enter key in the text input field, clicking a submit button within the form, clicking on a result, or pressing enter while a result is selected\n\n> \u26A0\uFE0F NOTE \u26A0\uFE0F Use the Storybook Canvas Actions tab to explore the behavior of all of these `OnEvent` callback functions as you interact with our Default User Events example rendered in the Canvas. In the stories below, Storybook Canvas Actions have been disabled to focus on each of these callback functions in isolation. Each of the example callback functions in the stories below log output to the console tab of the browser's developer tools.";
export declare const zeroStateDescription = "- when the text input field has no text, we call this zero state\n- by default, the autocomplete shows nothing in the menu it's for zero state\n- to show zero state results, pass an array of section objects for `zeroStateSections`\n- when `zeroStateSections` has sections, the menu will open on user focus by default\n- set `openOnFocus` to false, to only show `zeroStateSections` after user has typed and then cleared the text input, instead of as soon as the user focuses on the text input\n- the order of the objects in the `zeroStateSections` array determines the order of the results\n- each autocomplete section object must have a `indexSectionName`\n- each recommendation section object must have a `podId`\n- passing displayName in the sectionConfiguration will override the displayName set by Merchandisers on the Customer Dashboard for the recommendation section\n- each custom section object must have a `displayName`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8";
export declare const fullFeaturedAndStyledExampleDescription = "Using the default options, the library displays clean and minimal visual elements, with the intent of making it easy for consumers to easily extend and customize the styles to suit unique needs. The example below shows a full featured and styled example to demonstrate what is possible using Constructor.io's advanced Autocomplete UI library.";
export declare const apiKeyDescription = "Pass an `apiKey` to request results from constructor's servers";
export declare const cioJsClientDescription = "If you are already using an instance of the `ConstructorIOClient`, you can pass a `cioJsClient` instead of an `apiKey` to request results from constructor's servers\n\n> Note: when we say `cioJsClient`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)";
export declare const cioClientOptionsDescription = "If you don't want to create an instance of the `ConstructorIOClient` but still want to customize some of the options, you can pass a `cioClientOptions` object. You can learn more about the possible values [here under the parameters section](https://constructor-io.github.io/constructorio-client-javascript/ConstructorIO.html).\n\n> Note: The legacy `cioJsClientOptions` prop is still supported for backwards compatibility, but `cioClientOptions` is now the preferred name.";
export declare const placeholderDescription = "Pass a `placeholder` to override the default input field placeholder text shown to users before they start typing their query";
export declare const searchSuggestionsDescription = "Override default `sections` to only suggest search terms";
export declare const productsDescription = "Override default `sections` to only suggested products";
export declare const contentDescription = "Override default `sections` to only suggest content";
export declare const numResultsDescription = "Override default `numResults` to only suggest 2 products per query";
export declare const sectionOrderDescription = "Override default `numResults` to suggest products, then terms";
export declare const recommendationsDescription = "Use constructor's recommendations service, with `\"type\": \"recommendations\"`";
export declare const displaySearchTermHighlightsDescription = "Use constructor's auto highlighting of words that match the search keyword, with `\"displaySearchTermHighlights\": true`";
export declare const displayNoResultsMessageDescription = "Display a no results message for this section, with `\"displayNoResultsMessage\": true`";
export declare const customSectionDescription = "Use a custom section, by managing and passing your own data, with `\"type\": \"custom\"` and `\"data\":[{...}]`";
export declare const onFocusDescription = "Pass an `onFocus` callback function to execute some code each time the user applies focus to the text input field";
export declare const onChangeDescription = "Pass an `onChange` callback function to execute some code each time the user changes the value of the text input field";
export declare const onIsOpenChangeDescription = "Pass an `onIsOpenChange` callback function to execute some code each time the dropdown state changes ie: close/open";
export declare const onSubmitDescription = "Pass an `onSubmit` callback function to execute some code after a user submits the search form.\n\n  Your callback function will be invoked with a submit event containing useful metadata about the submit event:\n  - if the user submits the text input:\n    - the `query` field will provide the value of that input field\n  - if the user selects a suggested item from the dropdown list:\n    - the `originalQuery` field will provide the value of the input field that generated the selected item\n    - an `item` object with information about the suggestion that the user selected";
export declare const onSubmitDefault: (submitEvent: AutocompleteSubmitEvent) => void;
export declare const zeroStateSectionsDescription = "Use `zeroStateSections` to show suggestions after a user applies focus to the search input field and before they start typing a query";
export declare const openOnFocusDescription = "Use `openOnFocus: false` to show suggestions after a user clears their query, but not when they initially apply focus to the search input field";
export declare const multipleSectionsDescription = "Use as many different `recommendations` and `custom` sections as you'd like and in whatever order you would like!";
export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport '@constructor-io/constructorio-ui-autocomplete/styles.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `styles.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n  height: 44px;\n  width: 600px;\n  border-radius: 8px;\n  background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n  font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n  width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n  right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-section-name {\n  margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n  width: 620px;\n  max-height: 334px;\n  overflow: hidden;\n  border-radius: 0px 0px 8px 8px;\n  color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .products p {\n  padding: 5px 5px 0;\n}\n```\n";
export declare const advancedParametersDescription = "The stories below show how optional fields within this `advancedParameters` object that can be used to fine-tune the autosuggest data returned from constructor's servers.";
export declare const advancedParametersDefaultDescription = "Passing an `advancedParameters` object is optional. Passing an empty object for the `advancedParameters` field behaves the same as not passing an `advancedParameters` object at all.";
export declare const termsWithGroupSuggestionsDescription = "Pass integers for the `numTermsWithGroupSuggestions` and `numGroupsSuggestedPerTerm` fields to add suggested group filters to search term suggestions. Not all suggested search terms will have group filters, so these integers are upper limits, used to specify the maximum number of terms with group filters and the maximum number of suggested group filters per term.\n\nTo see this in action:\n1. Type \"pan\" in the example below.\n  - Notice how the user is presented with a search term of \"all week flex pant\" as well as \"all week flex pant in Chinos\" and \"all week flex pant baby in Athleisure Pants & Joggers\"\n2. Navigate to the \"Terms With Group Suggestions\" story (using the navigation menu to the left)\n3. Then use the Controls to adjust the values of `numTermsWithGroupSuggestions` to `3` and `numGroupsSuggestedPerTerm` to `1`\n4. Next, type \"pan\" in the example autocomplete input field.\n  - Notice how the user is presented with three different search terms that have a maximum of one \"in {group}\" suggestion each";
export declare const filteredSuggestionsDescription = "Pass a `filters` object under `advancedParameters` to apply filters to the suggestions. Any parameter supported by <a href=\"https://docs.constructor.com/reference/autocomplete-autocomplete-results\" target=\"__blank\">our autocomplete endpoint</a> can be passed under `advancedParameters`.\n\nTo see this in action:\n1. Type \"short\" in the example below.\n  - Notice how the user is presented with only short pants as results.\n  - This is because the results are currently filtered to belong to the \"Shorts\" group.\n2. Navigate to the \"Filtered Suggestions\" story (using the navigation menu to the left)\n3. Then use the Controls to adjust the values of `\"group_id\"` to `\"1030\"`.\n4. Next, type \"short\" in the example autocomplete input field.\n  - Notice how the user is presented with only short sleeved items as results.\n  - This is because we are filtering to the \"Shirts\" group";
export declare const termsWithImagesAndCountsDescription = "Pass boolean flags for `displaySearchSuggestionImages` and `displaySearchSuggestionResultCounts` fields to display images and counts for search suggestions. These fields need to be made displayable before they can be used. Please contact your Constructor Integration Engineer for details.";
export declare const debounceDescription = "Pass an integer to `debounce` to override the recommended, default delay employed for debouncing autocomplete network requests between keystrokes as your users type into the text input field. The default value is 250, which results in a debounce delay of 250 milliseconds.";
export declare const fetchZeroStateOnFocusDescription = "Pass a boolean to `fetchZeroStateOnFocus` to override the zero state fetching behavior from initial render to input focus.";
export declare const translationsDescription = "Pass a `translations` object to display translatable words in your preferred language.\n\n- Current translatable keys:\n```\n  {\n    \"in\": \"...\",\n    \"show all results\": \"...\"\n  }\n```\n";
export declare const customRenderItemDescription = "Customize the rendering of individual items within a Section by providing a `renderItem` function. This function allows you to define how each item should be rendered.\n- Make sure to call `getItemProps(item)` and spread like this `<div {...getItemProps(item)}/>` on the container of each custom rendered item or else tracking will not work.\n- Supports both ReactNode and HTMLElement as a return type\n";
export declare const displayShowAllResultsButtonDescription = "Pass a boolean to `displayShowAllResultsButton` to display a button at the bottom of the Products section to show all results. This button will submit the form and trigger the `onSubmit` callback.";