@contentful/f36-autocomplete 4.48.0 → 4.48.1

package/dist/esm/index.js

@@ -14,4 +14,5 @@ import p from '@contentful/f36-tokens';
 var Pe=Object.defineProperty,Me=Object.defineProperties;var Se=Object.getOwnPropertyDescriptors;var M=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var W=(e,o,i)=>o in e?Pe(e,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[o]=i,d=(e,o)=>{for(var i in o||(o={}))q.call(o,i)&&W(e,i,o[i]);if(M)for(var i of M(o))z.call(o,i)&&W(e,i,o[i]);return e},g=(e,o)=>Me(e,Se(o));var j=(e,o)=>{var i={};for(var r in e)q.call(e,r)&&o.indexOf(r)<0&&(i[r]=e[r]);if(e!=null&&M)for(var r of M(e))o.indexOf(r)<0&&z.call(e,r)&&(i[r]=e[r]);return i};var S=e=>({autocomplete:css({position:"relative",width:"100%"}),combobox:css({position:"relative"}),inputField:css({paddingRight:p.spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:css({position:"absolute",top:"1px",right:"1px",zIndex:1,padding:p.spacing2Xs,height:"38px"}),content:css({overflow:"auto",maxHeight:`${e}px`}),list:css({listStyle:"none",padding:`${p.spacingXs} 0`,margin:0}),groupTitle:css({padding:`${p.spacingXs} ${p.spacingM}`,lineHeight:p.lineHeightM}),noMatchesTitle:css({color:p.gray500,margin:`${p.spacingM} 0 ${p.spacingM} 0`}),item:css({display:"block",padding:`${p.spacingXs} ${p.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",cursor:"pointer",hyphens:"auto","&:focus, &:hover":{backgroundColor:p.gray100},"&:active":{backgroundColor:p.gray200}}),disabled:css({opacity:.5,pointerEvents:"none"}),highlighted:css({backgroundColor:p.gray100}),hidden:css({display:"none"})});var C=e=>{let{items:o,elementStartIndex:i,highlightedIndex:r,getItemProps:I,renderItem:T,inputValue:b,listMaxHeight:H=180}=e,s=S(H);return n.createElement("ul",{className:s.list,"data-test-id":"cf-autocomplete-list"},o.map((u,E)=>{let c=i+E,L=I({item:u,index:c});return n.createElement(Text,g(d({},L),{as:"li",key:c,className:cx([s.item,r===c&&s.highlighted]),"data-test-id":`cf-autocomplete-list-item-${c}`}),T?T(u,b):typeof u=="string"?n.createElement(K,{item:u,inputValue:b}):u)}))};C.displayName="AutocompleteItems";function K({item:e,inputValue:o}){let{before:i,match:r,after:I}=getStringMatch(e,o);return n.createElement(n.Fragment,null,i,n.createElement("b",null,r),I)}K.displayName="HighlightedItem";function Re(e,o){let {id:i,className:r,clearAfterSelect:I=!1,closeAfterSelect:T=!0,defaultValue:b="",selectedItem:H,items:s,onInputValueChange:u,onSelectItem:E,onFocus:c,onBlur:L,renderItem:O,icon:Y=n.createElement(ChevronDownIcon,{variant:"muted"}),itemToString:Z=t=>t,isInvalid:ee,isDisabled:_,isRequired:te,isReadOnly:oe,showEmptyList:ne,noMatchesMessage:ie="No matches found",placeholder:se="Search",inputRef:re,toggleRef:pe,listRef:le,listWidth:ae="auto",listMaxHeight:me=180,isGrouped:x=!1,isLoading:v=!1,usePortal:ue=!1,testId:ce="cf-autocomplete"}=e,m=S(me),[h,de]=useState(b),y=useCallback(t=>{de(t),u==null||u(t);},[u]),ge=useCallback(t=>{let l=t.target.value;y(l);},[y]),he=A(x)?s.reduce((t,l)=>[...t,...l.options],[]):s,fe=A(x)?s.every(t=>t.options.length===0):s.length===0,{getComboboxProps:Ie,getInputProps:ye,getItemProps:$,getMenuProps:Te,getToggleButtonProps:be,highlightedIndex:D,isOpen:F,toggleMenu:k}=useCombobox({items:he,selectedItem:H,inputValue:h,itemToString:Z,onInputValueChange:({type:t,inputValue:l})=>{t!=="__input_change__"&&y(l);},onStateChange:({type:t,selectedItem:l})=>{switch(t){case useCombobox.stateChangeTypes.InputKeyDownEnter:case useCombobox.stateChangeTypes.ItemClick:l&&E(l),I&&y(""),T||k();break;}}}),U=ye(),w=j(U,["aria-labelledby","id"]),xe=Ie(),X=be(),P=Te(),N=0;return n.createElement("div",{"data-test-id":ce,className:cx(m.autocomplete,r),ref:o},n.createElement(Popover,{usePortal:ue,isOpen:F,isFullWidth:ae==="full",renderOnlyWhenOpen:!1,autoFocus:!1,id:P.id},n.createElement(Popover.Trigger,null,n.createElement("div",g(d({},xe),{className:m.combobox}),n.createElement(TextInput,g(d({className:m.inputField},w),{onFocus:t=>{c==null||c(t),F||k();},onBlur:L,id:i,isInvalid:ee,isDisabled:_,isRequired:te,isReadOnly:oe,ref:mergeRefs(w.ref,re),testId:"cf-autocomplete-input",placeholder:se,onChange:t=>{w.onChange(t),ge(t);}})),n.createElement(IconButton,g(d({},X),{ref:mergeRefs(X.ref,pe),"aria-label":h?"Clear":"Show list",className:m.toggleButton,variant:"transparent",icon:h?n.createElement(CloseIcon,{variant:"muted"}):Y,onClick:()=>{h?y(""):k();},isDisabled:_,size:"small"})))),s.length>0||h.length>0||ne?n.createElement(Popover.Content,g(d({},P),{ref:mergeRefs(P.ref,le),className:m.content,testId:"cf-autocomplete-container"}),v&&[...Array(3)].map((t,l)=>n.createElement("div",{key:l,className:cx(m.item,m.disabled)},n.createElement(Be,null))),!v&&fe&&n.createElement("div",{className:m.item},n.createElement(Subheading,{className:m.noMatchesTitle},ie)),!v&&A(x)&&s.map((t,l)=>{if(t.options.length<1)return;let ve=n.createElement("div",{key:l},n.createElement(SectionHeading,{key:l,"data-test-id":"cf-autocomplete-grouptitle",marginBottom:"none",className:m.groupTitle},t.groupTitle),n.createElement(C,{items:t.options,highlightedIndex:D,getItemProps:$,renderItem:O,inputValue:h,elementStartIndex:N}));return N+=t.options.length,ve}),!v&&!A(x)&&s.length>0&&n.createElement(C,{items:s,elementStartIndex:N,highlightedIndex:D,getItemProps:$,renderItem:O,inputValue:h})):n.createElement("div",g(d({},P),{className:cx(m.hidden)}))))}var Be=()=>n.createElement(Skeleton.Container,{svgHeight:16},n.createElement(Skeleton.BodyText,{numberOfLines:1}));function A(e,o){return e}var Oe=n.forwardRef(Re);
 
 export { Oe as Autocomplete };
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Autocomplete.tsx","../../src/AutocompleteItems.tsx","../../src/Autocomplete.styles.ts"],"names":["React","useCallback","useState","cx","useCombobox","mergeRefs","IconButton","TextInput","CloseIcon","ChevronDownIcon","Skeleton","Popover","Subheading","SectionHeading","getStringMatch","Text","css","tokens","getAutocompleteStyles","listMaxHeight","AutocompleteItems","props","items","elementStartIndex","highlightedIndex","getItemProps","renderItem","inputValue","styles","item","index","itemIndex","itemProps","__spreadProps","__spreadValues","HighlightedItem","before","match","after","_Autocomplete","ref","id","className","clearAfterSelect","closeAfterSelect","defaultValue","selectedItem","onInputValueChange","onSelectItem","onFocus","onBlur","icon","itemToString","isInvalid","isDisabled","isRequired","isReadOnly","showEmptyList","noMatchesMessage","placeholder","inputRef","toggleRef","listRef","listWidth","isGrouped","isLoading","usePortal","testId","setInputValue","handleInputValueChange","value","handleNativeChangeEvent","event","flattenItems","isUsingGroups","acc","group","isShowingNoMatches","getComboboxProps","getInputProps","getMenuProps","getToggleButtonProps","isOpen","toggleMenu","type","_a","_labelledby","_inputId","inputProps","__objRest","comboboxProps","toggleProps","menuProps","e","_","ListItemLoadingState","render","Autocomplete"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport {\n  mergeRefs,\n  type CommonProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput, type TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { Skeleton } from '@contentful/f36-skeleton';\nimport { Popover } from '@contentful/f36-popover';\nimport { Subheading, SectionHeading } from '@contentful/f36-typography';\n\nimport { AutocompleteItems } from './AutocompleteItems';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\nexport interface GenericGroupType<ItemType> {\n  groupTitle: string;\n  options: ItemType[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface AutocompleteProps<ItemType>\n  extends CommonProps,\n    Pick<\n      TextInputProps,\n      | 'isDisabled'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'id'\n      | 'defaultValue'\n    > {\n  /**\n   * It’s an array of data to be used as \"options\" by the autocomplete component.\n   * This can either be a plain list of items or a list of groups of items.\n   */\n  items: ItemType[] | GenericGroupType<ItemType>[];\n\n  /**\n   * Set a custom icon for the text input\n   */\n  icon?: React.ReactElement;\n\n  /**\n   * Tells if the item is a object with groups\n   */\n  isGrouped?: boolean;\n\n  /**\n   * Function called whenever the input value changes\n   */\n  onInputValueChange?: (value: string) => void;\n  /**\n   * This is the function that will be called when the user selects one of the \"options\" in the list.\n   * The component will pass the selected \"item\" as an argument to the function..\n   */\n  onSelectItem: (item: ItemType) => void;\n\n  /**\n   * Applying the selectedItem property turns autocomplete into a controlled component.\n   * Can be used to display e.g. previously selected element. If it is an object the itemToString function will apply to it.\n   */\n  selectedItem?: ItemType;\n\n  /**\n   * This is the function that will be called for each \"item\" passed in the `items` prop.\n   * It receives the \"item\" and \"inputValue\" as arguments and returns a ReactNode.\n   * The inputValue is passed in case you want to highlight the match on the render.\n   */\n  renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;\n  /**\n   * When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string\n   * from those objetcs to be used as inputValue\n   */\n  itemToString?: (item: ItemType) => string;\n  /**\n   * If this is set to `true` the text input will be cleared after an item is selected\n   * @default false\n   */\n  clearAfterSelect?: boolean;\n  /**\n   * If this is set to `false` the dropdown menu will stay open after selecting an item\n   * @default true\n   */\n  closeAfterSelect?: boolean;\n  /**\n   * This is the value will be passed to the `placeholder` prop of the input.\n   * @default \"Search\"\n   */\n  placeholder?: string;\n  /**\n   * Defines if the list should be shown even if empty, when input is focused\n   * @default false\n   */\n  showEmptyList?: boolean;\n  /**\n   * A message that will be shown when it is not possible to find any option that matches the input value\n   * @default \"No matches\"\n   */\n  noMatchesMessage?: string;\n  /**\n   * Use this prop to get a ref to the input element of the component\n   */\n  inputRef?: React.Ref<HTMLInputElement>;\n  /**\n   * Use this prop to get a ref to the toggle button of the component\n   */\n  toggleRef?: React.Ref<HTMLButtonElement>;\n  /**\n   * Use this prop to get a ref to the list of items of the component\n   */\n  listRef?: React.Ref<HTMLUListElement>;\n  /**\n   * It sets the width of the list\n   * @default \"auto\"\n   */\n  listWidth?: 'auto' | 'full';\n  /**\n   * It sets the max-height, in pixels, of the list\n   * The default value is the height of 5 single line items\n   * @default 180\n   */\n  listMaxHeight?: number;\n  /**\n   * Sets the list to show its loading state\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Boolean to control whether or not to render the suggestions box in a React Portal.\n   * Rendering content inside a Portal allows the suggestions box to escape the bounds\n   * of its parent while still being positioned correctly.\n   * Defaults to `false`\n   */\n  usePortal?: boolean;\n\n  /**\n   * Function called when the input is focused\n   *\n   * @param event\n   */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Function called when the input is blurred\n   * @param event\n   */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n}\n\nfunction _Autocomplete<ItemType>(\n  props: AutocompleteProps<ItemType>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    id,\n    className,\n    clearAfterSelect = false,\n    closeAfterSelect = true,\n    defaultValue = '',\n    selectedItem,\n    items,\n    onInputValueChange,\n    onSelectItem,\n    onFocus,\n    onBlur,\n    renderItem,\n    icon = <ChevronDownIcon variant=\"muted\" />,\n    itemToString = (item: ItemType) => item as unknown as string,\n    isInvalid,\n    isDisabled,\n    isRequired,\n    isReadOnly,\n    showEmptyList,\n    noMatchesMessage = 'No matches found',\n    placeholder = 'Search',\n    inputRef,\n    toggleRef,\n    listRef,\n    listWidth = 'auto',\n    listMaxHeight = 180,\n    isGrouped = false,\n    isLoading = false,\n    usePortal = false,\n    testId = 'cf-autocomplete',\n  } = props;\n\n  type GroupType = GenericGroupType<ItemType>;\n\n  const styles = getAutocompleteStyles(listMaxHeight);\n\n  const [inputValue, setInputValue] = useState(defaultValue);\n\n  const handleInputValueChange = useCallback(\n    (value: string) => {\n      setInputValue(value);\n\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange],\n  );\n\n  // Handle manually to avoid a jumping cursor, see https://github.com/downshift-js/downshift/issues/1108#issuecomment-842407759\n  const handleNativeChangeEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      const value = event.target.value;\n      handleInputValueChange(value);\n    },\n    [handleInputValueChange],\n  );\n\n  const flattenItems = isUsingGroups(isGrouped, items)\n    ? items.reduce(\n        (acc: ItemType[], group: GroupType) => [...acc, ...group.options],\n        [],\n      )\n    : items;\n\n  const isShowingNoMatches = isUsingGroups(isGrouped, items)\n    ? items.every((group: GroupType) => group.options.length === 0)\n    : items.length === 0;\n\n  const {\n    getComboboxProps,\n    getInputProps,\n    getItemProps,\n    getMenuProps,\n    getToggleButtonProps,\n    highlightedIndex,\n    isOpen,\n    toggleMenu,\n  } = useCombobox({\n    items: flattenItems,\n    selectedItem,\n    inputValue,\n    itemToString,\n    onInputValueChange: ({ type, inputValue }) => {\n      if (type !== '__input_change__') {\n        handleInputValueChange(inputValue);\n      }\n    },\n    onStateChange: ({ type, selectedItem }) => {\n      switch (type) {\n        case useCombobox.stateChangeTypes.InputKeyDownEnter:\n        case useCombobox.stateChangeTypes.ItemClick:\n          if (selectedItem) {\n            onSelectItem(selectedItem);\n          }\n          if (clearAfterSelect) {\n            handleInputValueChange('');\n          }\n          if (!closeAfterSelect) {\n            toggleMenu();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  const {\n    'aria-labelledby': _labelledby,\n    id: _inputId,\n    ...inputProps\n  } = getInputProps();\n  const comboboxProps = getComboboxProps();\n  const toggleProps = getToggleButtonProps();\n  const menuProps = getMenuProps();\n  let elementStartIndex = 0;\n\n  return (\n    <div\n      data-test-id={testId}\n      className={cx(styles.autocomplete, className)}\n      ref={ref}\n    >\n      <Popover\n        usePortal={usePortal}\n        isOpen={isOpen}\n        isFullWidth={listWidth === 'full'}\n        renderOnlyWhenOpen={false}\n        // This is necessary, otherwise the focus will change from the input to the Popover\n        // and the user won't be able to type in the input\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={false}\n        id={menuProps.id}\n      >\n        <Popover.Trigger>\n          <div {...comboboxProps} className={styles.combobox}>\n            <TextInput\n              className={styles.inputField}\n              {...inputProps}\n              onFocus={(e) => {\n                onFocus?.(e as React.FocusEvent<HTMLInputElement>);\n                if (!isOpen) {\n                  toggleMenu();\n                }\n              }}\n              onBlur={onBlur}\n              id={id}\n              isInvalid={isInvalid}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              isReadOnly={isReadOnly}\n              ref={mergeRefs(inputProps.ref, inputRef)}\n              testId=\"cf-autocomplete-input\"\n              placeholder={placeholder}\n              onChange={(event) => {\n                inputProps.onChange(event);\n                handleNativeChangeEvent(event);\n              }}\n            />\n            <IconButton\n              {...toggleProps}\n              ref={mergeRefs(toggleProps.ref, toggleRef)}\n              aria-label={inputValue ? 'Clear' : 'Show list'}\n              className={styles.toggleButton}\n              variant=\"transparent\"\n              icon={inputValue ? <CloseIcon variant=\"muted\" /> : icon}\n              onClick={() => {\n                if (inputValue) {\n                  handleInputValueChange('');\n                } else {\n                  toggleMenu();\n                }\n              }}\n              isDisabled={isDisabled}\n              size=\"small\"\n            />\n          </div>\n        </Popover.Trigger>\n\n        {items.length > 0 || inputValue.length > 0 || showEmptyList ? (\n          <Popover.Content\n            {...menuProps}\n            ref={mergeRefs(menuProps.ref, listRef)}\n            className={styles.content}\n            testId=\"cf-autocomplete-container\"\n          >\n            {isLoading &&\n              [...Array(3)].map((_, index) => (\n                <div key={index} className={cx(styles.item, styles.disabled)}>\n                  <ListItemLoadingState />\n                </div>\n              ))}\n\n            {!isLoading && isShowingNoMatches && (\n              <div className={styles.item}>\n                <Subheading className={styles.noMatchesTitle}>\n                  {noMatchesMessage}\n                </Subheading>\n              </div>\n            )}\n\n            {!isLoading &&\n              isUsingGroups(isGrouped, items) &&\n              items.map((group: GroupType, index: number) => {\n                if (group.options.length < 1) {\n                  return;\n                }\n                const render = (\n                  <div key={index}>\n                    <SectionHeading\n                      key={index}\n                      data-test-id=\"cf-autocomplete-grouptitle\"\n                      marginBottom=\"none\"\n                      className={styles.groupTitle}\n                    >\n                      {group.groupTitle}\n                    </SectionHeading>\n                    <AutocompleteItems<ItemType>\n                      items={group.options}\n                      highlightedIndex={highlightedIndex}\n                      getItemProps={getItemProps}\n                      renderItem={renderItem}\n                      inputValue={inputValue}\n                      elementStartIndex={elementStartIndex}\n                    />\n                  </div>\n                );\n                elementStartIndex += group.options.length;\n                return render;\n              })}\n\n            {!isLoading &&\n              !isUsingGroups(isGrouped, items) &&\n              items.length > 0 && (\n                <AutocompleteItems<ItemType>\n                  items={items}\n                  elementStartIndex={elementStartIndex}\n                  highlightedIndex={highlightedIndex}\n                  getItemProps={getItemProps}\n                  renderItem={renderItem}\n                  inputValue={inputValue}\n                />\n              )}\n          </Popover.Content>\n        ) : (\n          // We need to render an empty hidden div, so we can pass the menuProps or downshift will show a warning about it\n          // https://github.com/downshift-js/downshift/issues/1167#issuecomment-1088022842\n          <div {...menuProps} className={cx(styles.hidden)} />\n        )}\n      </Popover>\n    </div>\n  );\n}\n\nconst ListItemLoadingState = () => {\n  return (\n    <Skeleton.Container svgHeight={16}>\n      <Skeleton.BodyText numberOfLines={1} />\n    </Skeleton.Container>\n  );\n};\n\n// This is required to infer correct typings when differentiating groups and items\nfunction isUsingGroups<ItemType>(\n  isGrouped: boolean,\n  items: ItemType[] | GenericGroupType<ItemType>[],\n): items is GenericGroupType<ItemType>[] {\n  return isGrouped;\n}\n\n/**\n * The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used\n * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.\n * Once one of the options is selected, that option becomes the value of the `TextInput`.\n */\nexport const Autocomplete = React.forwardRef(_Autocomplete) as <T>(\n  props: ExpandProps<AutocompleteProps<T>> & {\n    ref?: React.Ref<HTMLDivElement>;\n  },\n) => ReturnType<typeof _Autocomplete>;\n","import React, { HTMLAttributes } from 'react';\nimport { cx } from 'emotion';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\nimport { Text } from '@contentful/f36-typography';\n\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\ninterface AutocompleteItemsProps<ItemType> {\n  items: ItemType[];\n  elementStartIndex: number;\n  highlightedIndex: number;\n  getItemProps: (\n    options: UseComboboxGetItemPropsOptions<ItemType>,\n  ) => HTMLAttributes<HTMLLIElement>;\n  renderItem: (item: ItemType, inputValue: string) => React.ReactNode;\n  inputValue: string;\n  listMaxHeight?: number;\n}\n\nexport const AutocompleteItems = <ItemType,>(\n  props: AutocompleteItemsProps<ItemType>,\n) => {\n  const {\n    items,\n    elementStartIndex,\n    highlightedIndex,\n    getItemProps,\n    renderItem,\n    inputValue,\n    listMaxHeight = 180,\n  } = props;\n\n  const styles = getAutocompleteStyles(listMaxHeight);\n\n  return (\n    <ul className={styles.list} data-test-id=\"cf-autocomplete-list\">\n      {items.map((item: ItemType, index: number) => {\n        const itemIndex = elementStartIndex + index;\n        const itemProps = getItemProps({ item, index: itemIndex });\n        return (\n          <Text\n            {...itemProps}\n            as=\"li\"\n            key={itemIndex}\n            className={cx([\n              styles.item,\n              highlightedIndex === itemIndex && styles.highlighted,\n            ])}\n            data-test-id={`cf-autocomplete-list-item-${itemIndex}`}\n          >\n            {renderItem ? (\n              renderItem(item, inputValue)\n            ) : typeof item === 'string' ? (\n              <HighlightedItem item={item} inputValue={inputValue} />\n            ) : (\n              item\n            )}\n          </Text>\n        );\n      })}\n    </ul>\n  );\n};\n\nAutocompleteItems.displayName = 'AutocompleteItems';\n\nfunction HighlightedItem({\n  item,\n  inputValue,\n}: {\n  item: string;\n  inputValue: string;\n}) {\n  const { before, match, after } = getStringMatch(item, inputValue);\n\n  return (\n    <>\n      {before}\n      <b>{match}</b>\n      {after}\n    </>\n  );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAutocompleteStyles = (listMaxHeight: number) => ({\n  autocomplete: css({\n    position: 'relative',\n    width: '100%',\n  }),\n  combobox: css({\n    position: 'relative',\n  }),\n  inputField: css({\n    paddingRight: tokens.spacingXl,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  toggleButton: css({\n    position: 'absolute',\n    top: '1px',\n    right: '1px',\n    zIndex: 1,\n    padding: tokens.spacing2Xs,\n    height: '38px',\n  }),\n  content: css({\n    overflow: 'auto',\n    maxHeight: `${listMaxHeight}px`,\n  }),\n  list: css({\n    listStyle: 'none',\n    padding: `${tokens.spacingXs} 0`,\n    margin: 0,\n  }),\n  groupTitle: css({\n    padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n    lineHeight: tokens.lineHeightM,\n  }),\n  noMatchesTitle: css({\n    color: tokens.gray500,\n    margin: `${tokens.spacingM} 0 ${tokens.spacingM} 0`,\n  }),\n  item: css({\n    display: 'block',\n    padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n    wordBreak: 'break-word',\n    whiteSpace: 'break-spaces',\n    cursor: 'pointer',\n    hyphens: 'auto',\n\n    '&:focus, &:hover': {\n      backgroundColor: tokens.gray100,\n    },\n    '&:active': {\n      backgroundColor: tokens.gray200,\n    },\n  }),\n  disabled: css({\n    opacity: 0.5,\n    pointerEvents: 'none',\n  }),\n  highlighted: css({\n    backgroundColor: tokens.gray100,\n  }),\n  hidden: css({\n    display: 'none',\n  }),\n});\n"]}
+{"version":3,"sources":["../../src/Autocomplete.tsx","../../src/AutocompleteItems.tsx","../../src/Autocomplete.styles.ts"],"names":["React","useCallback","useState","cx","useCombobox","mergeRefs","IconButton","TextInput","CloseIcon","ChevronDownIcon","Skeleton","Popover","Subheading","SectionHeading","getStringMatch","Text","css","tokens","getAutocompleteStyles","listMaxHeight","AutocompleteItems","props","items","elementStartIndex","highlightedIndex","getItemProps","renderItem","inputValue","styles","item","index","itemIndex","itemProps","__spreadProps","__spreadValues","HighlightedItem","before","match","after","_Autocomplete","ref","id","className","clearAfterSelect","closeAfterSelect","defaultValue","selectedItem","onInputValueChange","onSelectItem","onFocus","onBlur","icon","itemToString","isInvalid","isDisabled","isRequired","isReadOnly","showEmptyList","noMatchesMessage","placeholder","inputRef","toggleRef","listRef","listWidth","isGrouped","isLoading","usePortal","testId","setInputValue","handleInputValueChange","value","handleNativeChangeEvent","event","flattenItems","isUsingGroups","acc","group","isShowingNoMatches","getComboboxProps","getInputProps","getMenuProps","getToggleButtonProps","isOpen","toggleMenu","type","_a","_labelledby","_inputId","inputProps","__objRest","comboboxProps","toggleProps","menuProps","e","_","ListItemLoadingState","render","Autocomplete"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport {\n  mergeRefs,\n  type CommonProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput, type TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { Skeleton } from '@contentful/f36-skeleton';\nimport { Popover } from '@contentful/f36-popover';\nimport { Subheading, SectionHeading } from '@contentful/f36-typography';\n\nimport { AutocompleteItems } from './AutocompleteItems';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\nexport interface GenericGroupType<ItemType> {\n  groupTitle: string;\n  options: ItemType[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface AutocompleteProps<ItemType>\n  extends CommonProps,\n    Pick<\n      TextInputProps,\n      | 'isDisabled'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'id'\n      | 'defaultValue'\n    > {\n  /**\n   * It’s an array of data to be used as \"options\" by the autocomplete component.\n   * This can either be a plain list of items or a list of groups of items.\n   */\n  items: ItemType[] | GenericGroupType<ItemType>[];\n\n  /**\n   * Set a custom icon for the text input\n   */\n  icon?: React.ReactElement;\n\n  /**\n   * Tells if the item is a object with groups\n   */\n  isGrouped?: boolean;\n\n  /**\n   * Function called whenever the input value changes\n   */\n  onInputValueChange?: (value: string) => void;\n  /**\n   * This is the function that will be called when the user selects one of the \"options\" in the list.\n   * The component will pass the selected \"item\" as an argument to the function..\n   */\n  onSelectItem: (item: ItemType) => void;\n\n  /**\n   * Applying the selectedItem property turns autocomplete into a controlled component.\n   * Can be used to display e.g. previously selected element. If it is an object the itemToString function will apply to it.\n   */\n  selectedItem?: ItemType;\n\n  /**\n   * This is the function that will be called for each \"item\" passed in the `items` prop.\n   * It receives the \"item\" and \"inputValue\" as arguments and returns a ReactNode.\n   * The inputValue is passed in case you want to highlight the match on the render.\n   */\n  renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;\n  /**\n   * When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string\n   * from those objetcs to be used as inputValue\n   */\n  itemToString?: (item: ItemType) => string;\n  /**\n   * If this is set to `true` the text input will be cleared after an item is selected\n   * @default false\n   */\n  clearAfterSelect?: boolean;\n  /**\n   * If this is set to `false` the dropdown menu will stay open after selecting an item\n   * @default true\n   */\n  closeAfterSelect?: boolean;\n  /**\n   * This is the value will be passed to the `placeholder` prop of the input.\n   * @default \"Search\"\n   */\n  placeholder?: string;\n  /**\n   * Defines if the list should be shown even if empty, when input is focused\n   * @default false\n   */\n  showEmptyList?: boolean;\n  /**\n   * A message that will be shown when it is not possible to find any option that matches the input value\n   * @default \"No matches\"\n   */\n  noMatchesMessage?: string;\n  /**\n   * Use this prop to get a ref to the input element of the component\n   */\n  inputRef?: React.Ref<HTMLInputElement>;\n  /**\n   * Use this prop to get a ref to the toggle button of the component\n   */\n  toggleRef?: React.Ref<HTMLButtonElement>;\n  /**\n   * Use this prop to get a ref to the list of items of the component\n   */\n  listRef?: React.Ref<HTMLUListElement>;\n  /**\n   * It sets the width of the list\n   * @default \"auto\"\n   */\n  listWidth?: 'auto' | 'full';\n  /**\n   * It sets the max-height, in pixels, of the list\n   * The default value is the height of 5 single line items\n   * @default 180\n   */\n  listMaxHeight?: number;\n  /**\n   * Sets the list to show its loading state\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Boolean to control whether or not to render the suggestions box in a React Portal.\n   * Rendering content inside a Portal allows the suggestions box to escape the bounds\n   * of its parent while still being positioned correctly.\n   * Defaults to `false`\n   */\n  usePortal?: boolean;\n\n  /**\n   * Function called when the input is focused\n   *\n   * @param event\n   */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Function called when the input is blurred\n   * @param event\n   */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n}\n\nfunction _Autocomplete<ItemType>(\n  props: AutocompleteProps<ItemType>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    id,\n    className,\n    clearAfterSelect = false,\n    closeAfterSelect = true,\n    defaultValue = '',\n    selectedItem,\n    items,\n    onInputValueChange,\n    onSelectItem,\n    onFocus,\n    onBlur,\n    renderItem,\n    icon = <ChevronDownIcon variant=\"muted\" />,\n    itemToString = (item: ItemType) => item as unknown as string,\n    isInvalid,\n    isDisabled,\n    isRequired,\n    isReadOnly,\n    showEmptyList,\n    noMatchesMessage = 'No matches found',\n    placeholder = 'Search',\n    inputRef,\n    toggleRef,\n    listRef,\n    listWidth = 'auto',\n    listMaxHeight = 180,\n    isGrouped = false,\n    isLoading = false,\n    usePortal = false,\n    testId = 'cf-autocomplete',\n  } = props;\n\n  type GroupType = GenericGroupType<ItemType>;\n\n  const styles = getAutocompleteStyles(listMaxHeight);\n\n  const [inputValue, setInputValue] = useState(defaultValue);\n\n  const handleInputValueChange = useCallback(\n    (value: string) => {\n      setInputValue(value);\n\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange],\n  );\n\n  // Handle manually to avoid a jumping cursor, see https://github.com/downshift-js/downshift/issues/1108#issuecomment-842407759\n  const handleNativeChangeEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      const value = event.target.value;\n      handleInputValueChange(value);\n    },\n    [handleInputValueChange],\n  );\n\n  const flattenItems = isUsingGroups(isGrouped, items)\n    ? items.reduce(\n        (acc: ItemType[], group: GroupType) => [...acc, ...group.options],\n        [],\n      )\n    : items;\n\n  const isShowingNoMatches = isUsingGroups(isGrouped, items)\n    ? items.every((group: GroupType) => group.options.length === 0)\n    : items.length === 0;\n\n  const {\n    getComboboxProps,\n    getInputProps,\n    getItemProps,\n    getMenuProps,\n    getToggleButtonProps,\n    highlightedIndex,\n    isOpen,\n    toggleMenu,\n  } = useCombobox({\n    items: flattenItems,\n    selectedItem,\n    inputValue,\n    itemToString,\n    onInputValueChange: ({ type, inputValue }) => {\n      if (type !== '__input_change__') {\n        handleInputValueChange(inputValue);\n      }\n    },\n    onStateChange: ({ type, selectedItem }) => {\n      switch (type) {\n        case useCombobox.stateChangeTypes.InputKeyDownEnter:\n        case useCombobox.stateChangeTypes.ItemClick:\n          if (selectedItem) {\n            onSelectItem(selectedItem);\n          }\n          if (clearAfterSelect) {\n            handleInputValueChange('');\n          }\n          if (!closeAfterSelect) {\n            toggleMenu();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  const {\n    'aria-labelledby': _labelledby,\n    id: _inputId,\n    ...inputProps\n  } = getInputProps();\n  const comboboxProps = getComboboxProps();\n  const toggleProps = getToggleButtonProps();\n  const menuProps = getMenuProps();\n  let elementStartIndex = 0;\n\n  return (\n    <div\n      data-test-id={testId}\n      className={cx(styles.autocomplete, className)}\n      ref={ref}\n    >\n      <Popover\n        usePortal={usePortal}\n        isOpen={isOpen}\n        isFullWidth={listWidth === 'full'}\n        renderOnlyWhenOpen={false}\n        // This is necessary, otherwise the focus will change from the input to the Popover\n        // and the user won't be able to type in the input\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={false}\n        id={menuProps.id}\n      >\n        <Popover.Trigger>\n          <div {...comboboxProps} className={styles.combobox}>\n            <TextInput\n              className={styles.inputField}\n              {...inputProps}\n              onFocus={(e) => {\n                onFocus?.(e as React.FocusEvent<HTMLInputElement>);\n                if (!isOpen) {\n                  toggleMenu();\n                }\n              }}\n              onBlur={onBlur}\n              id={id}\n              isInvalid={isInvalid}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              isReadOnly={isReadOnly}\n              ref={mergeRefs(inputProps.ref, inputRef)}\n              testId=\"cf-autocomplete-input\"\n              placeholder={placeholder}\n              onChange={(event) => {\n                inputProps.onChange(event);\n                handleNativeChangeEvent(event);\n              }}\n            />\n            <IconButton\n              {...toggleProps}\n              ref={mergeRefs(toggleProps.ref, toggleRef)}\n              aria-label={inputValue ? 'Clear' : 'Show list'}\n              className={styles.toggleButton}\n              variant=\"transparent\"\n              icon={inputValue ? <CloseIcon variant=\"muted\" /> : icon}\n              onClick={() => {\n                if (inputValue) {\n                  handleInputValueChange('');\n                } else {\n                  toggleMenu();\n                }\n              }}\n              isDisabled={isDisabled}\n              size=\"small\"\n            />\n          </div>\n        </Popover.Trigger>\n\n        {items.length > 0 || inputValue.length > 0 || showEmptyList ? (\n          <Popover.Content\n            {...menuProps}\n            ref={mergeRefs(menuProps.ref, listRef)}\n            className={styles.content}\n            testId=\"cf-autocomplete-container\"\n          >\n            {isLoading &&\n              [...Array(3)].map((_, index) => (\n                <div key={index} className={cx(styles.item, styles.disabled)}>\n                  <ListItemLoadingState />\n                </div>\n              ))}\n\n            {!isLoading && isShowingNoMatches && (\n              <div className={styles.item}>\n                <Subheading className={styles.noMatchesTitle}>\n                  {noMatchesMessage}\n                </Subheading>\n              </div>\n            )}\n\n            {!isLoading &&\n              isUsingGroups(isGrouped, items) &&\n              items.map((group: GroupType, index: number) => {\n                if (group.options.length < 1) {\n                  return;\n                }\n                const render = (\n                  <div key={index}>\n                    <SectionHeading\n                      key={index}\n                      data-test-id=\"cf-autocomplete-grouptitle\"\n                      marginBottom=\"none\"\n                      className={styles.groupTitle}\n                    >\n                      {group.groupTitle}\n                    </SectionHeading>\n                    <AutocompleteItems<ItemType>\n                      items={group.options}\n                      highlightedIndex={highlightedIndex}\n                      getItemProps={getItemProps}\n                      renderItem={renderItem}\n                      inputValue={inputValue}\n                      elementStartIndex={elementStartIndex}\n                    />\n                  </div>\n                );\n                elementStartIndex += group.options.length;\n                return render;\n              })}\n\n            {!isLoading &&\n              !isUsingGroups(isGrouped, items) &&\n              items.length > 0 && (\n                <AutocompleteItems<ItemType>\n                  items={items}\n                  elementStartIndex={elementStartIndex}\n                  highlightedIndex={highlightedIndex}\n                  getItemProps={getItemProps}\n                  renderItem={renderItem}\n                  inputValue={inputValue}\n                />\n              )}\n          </Popover.Content>\n        ) : (\n          // We need to render an empty hidden div, so we can pass the menuProps or downshift will show a warning about it\n          // https://github.com/downshift-js/downshift/issues/1167#issuecomment-1088022842\n          <div {...menuProps} className={cx(styles.hidden)} />\n        )}\n      </Popover>\n    </div>\n  );\n}\n\nconst ListItemLoadingState = () => {\n  return (\n    <Skeleton.Container svgHeight={16}>\n      <Skeleton.BodyText numberOfLines={1} />\n    </Skeleton.Container>\n  );\n};\n\n// This is required to infer correct typings when differentiating groups and items\nfunction isUsingGroups<ItemType>(\n  isGrouped: boolean,\n  items: ItemType[] | GenericGroupType<ItemType>[],\n): items is GenericGroupType<ItemType>[] {\n  return isGrouped;\n}\n\n/**\n * The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used\n * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.\n * Once one of the options is selected, that option becomes the value of the `TextInput`.\n */\nexport const Autocomplete = React.forwardRef(_Autocomplete) as <T>(\n  props: ExpandProps<AutocompleteProps<T>> & {\n    ref?: React.Ref<HTMLDivElement>;\n  },\n) => ReturnType<typeof _Autocomplete>;\n","import React, { HTMLAttributes } from 'react';\nimport { cx } from 'emotion';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\nimport { Text } from '@contentful/f36-typography';\n\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\ninterface AutocompleteItemsProps<ItemType> {\n  items: ItemType[];\n  elementStartIndex: number;\n  highlightedIndex: number;\n  getItemProps: (\n    options: UseComboboxGetItemPropsOptions<ItemType>,\n  ) => HTMLAttributes<HTMLLIElement>;\n  renderItem: (item: ItemType, inputValue: string) => React.ReactNode;\n  inputValue: string;\n  listMaxHeight?: number;\n}\n\nexport const AutocompleteItems = <ItemType,>(\n  props: AutocompleteItemsProps<ItemType>,\n) => {\n  const {\n    items,\n    elementStartIndex,\n    highlightedIndex,\n    getItemProps,\n    renderItem,\n    inputValue,\n    listMaxHeight = 180,\n  } = props;\n\n  const styles = getAutocompleteStyles(listMaxHeight);\n\n  return (\n    <ul className={styles.list} data-test-id=\"cf-autocomplete-list\">\n      {items.map((item: ItemType, index: number) => {\n        const itemIndex = elementStartIndex + index;\n        const itemProps = getItemProps({ item, index: itemIndex });\n        return (\n          <Text\n            {...itemProps}\n            as=\"li\"\n            key={itemIndex}\n            className={cx([\n              styles.item,\n              highlightedIndex === itemIndex && styles.highlighted,\n            ])}\n            data-test-id={`cf-autocomplete-list-item-${itemIndex}`}\n          >\n            {renderItem ? (\n              renderItem(item, inputValue)\n            ) : typeof item === 'string' ? (\n              <HighlightedItem item={item} inputValue={inputValue} />\n            ) : (\n              item\n            )}\n          </Text>\n        );\n      })}\n    </ul>\n  );\n};\n\nAutocompleteItems.displayName = 'AutocompleteItems';\n\nfunction HighlightedItem({\n  item,\n  inputValue,\n}: {\n  item: string;\n  inputValue: string;\n}) {\n  const { before, match, after } = getStringMatch(item, inputValue);\n\n  return (\n    <>\n      {before}\n      <b>{match}</b>\n      {after}\n    </>\n  );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAutocompleteStyles = (listMaxHeight: number) => ({\n  autocomplete: css({\n    position: 'relative',\n    width: '100%',\n  }),\n  combobox: css({\n    position: 'relative',\n  }),\n  inputField: css({\n    paddingRight: tokens.spacingXl,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  toggleButton: css({\n    position: 'absolute',\n    top: '1px',\n    right: '1px',\n    zIndex: 1,\n    padding: tokens.spacing2Xs,\n    height: '38px',\n  }),\n  content: css({\n    overflow: 'auto',\n    maxHeight: `${listMaxHeight}px`,\n  }),\n  list: css({\n    listStyle: 'none',\n    padding: `${tokens.spacingXs} 0`,\n    margin: 0,\n  }),\n  groupTitle: css({\n    padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n    lineHeight: tokens.lineHeightM,\n  }),\n  noMatchesTitle: css({\n    color: tokens.gray500,\n    margin: `${tokens.spacingM} 0 ${tokens.spacingM} 0`,\n  }),\n  item: css({\n    display: 'block',\n    padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n    wordBreak: 'break-word',\n    whiteSpace: 'break-spaces',\n    cursor: 'pointer',\n    hyphens: 'auto',\n\n    '&:focus, &:hover': {\n      backgroundColor: tokens.gray100,\n    },\n    '&:active': {\n      backgroundColor: tokens.gray200,\n    },\n  }),\n  disabled: css({\n    opacity: 0.5,\n    pointerEvents: 'none',\n  }),\n  highlighted: css({\n    backgroundColor: tokens.gray100,\n  }),\n  hidden: css({\n    display: 'none',\n  }),\n});\n"]}

package/dist/index.d.mts

@@ -0,0 +1,130 @@
+import React from 'react';
+import { CommonProps } from '@contentful/f36-core';
+import { TextInputProps } from '@contentful/f36-forms';
+
+interface GenericGroupType<ItemType> {
+    groupTitle: string;
+    options: ItemType[];
+}
+interface AutocompleteProps<ItemType> extends CommonProps, Pick<TextInputProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'isRequired' | 'id' | 'defaultValue'> {
+    /**
+     * It’s an array of data to be used as "options" by the autocomplete component.
+     * This can either be a plain list of items or a list of groups of items.
+     */
+    items: ItemType[] | GenericGroupType<ItemType>[];
+    /**
+     * Set a custom icon for the text input
+     */
+    icon?: React.ReactElement;
+    /**
+     * Tells if the item is a object with groups
+     */
+    isGrouped?: boolean;
+    /**
+     * Function called whenever the input value changes
+     */
+    onInputValueChange?: (value: string) => void;
+    /**
+     * This is the function that will be called when the user selects one of the "options" in the list.
+     * The component will pass the selected "item" as an argument to the function..
+     */
+    onSelectItem: (item: ItemType) => void;
+    /**
+     * Applying the selectedItem property turns autocomplete into a controlled component.
+     * Can be used to display e.g. previously selected element. If it is an object the itemToString function will apply to it.
+     */
+    selectedItem?: ItemType;
+    /**
+     * This is the function that will be called for each "item" passed in the `items` prop.
+     * It receives the "item" and "inputValue" as arguments and returns a ReactNode.
+     * The inputValue is passed in case you want to highlight the match on the render.
+     */
+    renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;
+    /**
+     * When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string
+     * from those objetcs to be used as inputValue
+     */
+    itemToString?: (item: ItemType) => string;
+    /**
+     * If this is set to `true` the text input will be cleared after an item is selected
+     * @default false
+     */
+    clearAfterSelect?: boolean;
+    /**
+     * If this is set to `false` the dropdown menu will stay open after selecting an item
+     * @default true
+     */
+    closeAfterSelect?: boolean;
+    /**
+     * This is the value will be passed to the `placeholder` prop of the input.
+     * @default "Search"
+     */
+    placeholder?: string;
+    /**
+     * Defines if the list should be shown even if empty, when input is focused
+     * @default false
+     */
+    showEmptyList?: boolean;
+    /**
+     * A message that will be shown when it is not possible to find any option that matches the input value
+     * @default "No matches"
+     */
+    noMatchesMessage?: string;
+    /**
+     * Use this prop to get a ref to the input element of the component
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Use this prop to get a ref to the toggle button of the component
+     */
+    toggleRef?: React.Ref<HTMLButtonElement>;
+    /**
+     * Use this prop to get a ref to the list of items of the component
+     */
+    listRef?: React.Ref<HTMLUListElement>;
+    /**
+     * It sets the width of the list
+     * @default "auto"
+     */
+    listWidth?: 'auto' | 'full';
+    /**
+     * It sets the max-height, in pixels, of the list
+     * The default value is the height of 5 single line items
+     * @default 180
+     */
+    listMaxHeight?: number;
+    /**
+     * Sets the list to show its loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Boolean to control whether or not to render the suggestions box in a React Portal.
+     * Rendering content inside a Portal allows the suggestions box to escape the bounds
+     * of its parent while still being positioned correctly.
+     * Defaults to `false`
+     */
+    usePortal?: boolean;
+    /**
+     * Function called when the input is focused
+     *
+     * @param event
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Function called when the input is blurred
+     * @param event
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+declare function _Autocomplete<ItemType>(props: AutocompleteProps<ItemType>, ref: React.Ref<HTMLDivElement>): JSX.Element;
+/**
+ * The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used
+ * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.
+ * Once one of the options is selected, that option becomes the value of the `TextInput`.
+ */
+declare const Autocomplete: <T>(props: AutocompleteProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => ReturnType<typeof _Autocomplete>;
+
+export { Autocomplete, AutocompleteProps };

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var n = require('react');
 var emotion = require('emotion');
 var downshift = require('downshift');
@@ -15,12 +13,13 @@ var f36Typography = require('@contentful/f36-typography');
 var f36Utils = require('@contentful/f36-utils');
 var p = require('@contentful/f36-tokens');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var n__default = /*#__PURE__*/_interopDefaultLegacy(n);
-var p__default = /*#__PURE__*/_interopDefaultLegacy(p);
+var n__default = /*#__PURE__*/_interopDefault(n);
+var p__default = /*#__PURE__*/_interopDefault(p);
 
-var Pe=Object.defineProperty,Me=Object.defineProperties;var Se=Object.getOwnPropertyDescriptors;var M=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var W=(e,o,i)=>o in e?Pe(e,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[o]=i,d=(e,o)=>{for(var i in o||(o={}))q.call(o,i)&&W(e,i,o[i]);if(M)for(var i of M(o))z.call(o,i)&&W(e,i,o[i]);return e},g=(e,o)=>Me(e,Se(o));var j=(e,o)=>{var i={};for(var r in e)q.call(e,r)&&o.indexOf(r)<0&&(i[r]=e[r]);if(e!=null&&M)for(var r of M(e))o.indexOf(r)<0&&z.call(e,r)&&(i[r]=e[r]);return i};var S=e=>({autocomplete:emotion.css({position:"relative",width:"100%"}),combobox:emotion.css({position:"relative"}),inputField:emotion.css({paddingRight:p__default["default"].spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:emotion.css({position:"absolute",top:"1px",right:"1px",zIndex:1,padding:p__default["default"].spacing2Xs,height:"38px"}),content:emotion.css({overflow:"auto",maxHeight:`${e}px`}),list:emotion.css({listStyle:"none",padding:`${p__default["default"].spacingXs} 0`,margin:0}),groupTitle:emotion.css({padding:`${p__default["default"].spacingXs} ${p__default["default"].spacingM}`,lineHeight:p__default["default"].lineHeightM}),noMatchesTitle:emotion.css({color:p__default["default"].gray500,margin:`${p__default["default"].spacingM} 0 ${p__default["default"].spacingM} 0`}),item:emotion.css({display:"block",padding:`${p__default["default"].spacingXs} ${p__default["default"].spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",cursor:"pointer",hyphens:"auto","&:focus, &:hover":{backgroundColor:p__default["default"].gray100},"&:active":{backgroundColor:p__default["default"].gray200}}),disabled:emotion.css({opacity:.5,pointerEvents:"none"}),highlighted:emotion.css({backgroundColor:p__default["default"].gray100}),hidden:emotion.css({display:"none"})});var C=e=>{let{items:o,elementStartIndex:i,highlightedIndex:r,getItemProps:I,renderItem:T,inputValue:b,listMaxHeight:H=180}=e,s=S(H);return n__default["default"].createElement("ul",{className:s.list,"data-test-id":"cf-autocomplete-list"},o.map((u,E)=>{let c=i+E,L=I({item:u,index:c});return n__default["default"].createElement(f36Typography.Text,g(d({},L),{as:"li",key:c,className:emotion.cx([s.item,r===c&&s.highlighted]),"data-test-id":`cf-autocomplete-list-item-${c}`}),T?T(u,b):typeof u=="string"?n__default["default"].createElement(K,{item:u,inputValue:b}):u)}))};C.displayName="AutocompleteItems";function K({item:e,inputValue:o}){let{before:i,match:r,after:I}=f36Utils.getStringMatch(e,o);return n__default["default"].createElement(n__default["default"].Fragment,null,i,n__default["default"].createElement("b",null,r),I)}K.displayName="HighlightedItem";function Re(e,o){let {id:i,className:r,clearAfterSelect:I=!1,closeAfterSelect:T=!0,defaultValue:b="",selectedItem:H,items:s,onInputValueChange:u,onSelectItem:E,onFocus:c,onBlur:L,renderItem:O,icon:Y=n__default["default"].createElement(f36Icons.ChevronDownIcon,{variant:"muted"}),itemToString:Z=t=>t,isInvalid:ee,isDisabled:_,isRequired:te,isReadOnly:oe,showEmptyList:ne,noMatchesMessage:ie="No matches found",placeholder:se="Search",inputRef:re,toggleRef:pe,listRef:le,listWidth:ae="auto",listMaxHeight:me=180,isGrouped:x=!1,isLoading:v=!1,usePortal:ue=!1,testId:ce="cf-autocomplete"}=e,m=S(me),[h,de]=n.useState(b),y=n.useCallback(t=>{de(t),u==null||u(t);},[u]),ge=n.useCallback(t=>{let l=t.target.value;y(l);},[y]),he=A(x)?s.reduce((t,l)=>[...t,...l.options],[]):s,fe=A(x)?s.every(t=>t.options.length===0):s.length===0,{getComboboxProps:Ie,getInputProps:ye,getItemProps:$,getMenuProps:Te,getToggleButtonProps:be,highlightedIndex:D,isOpen:F,toggleMenu:k}=downshift.useCombobox({items:he,selectedItem:H,inputValue:h,itemToString:Z,onInputValueChange:({type:t,inputValue:l})=>{t!=="__input_change__"&&y(l);},onStateChange:({type:t,selectedItem:l})=>{switch(t){case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:case downshift.useCombobox.stateChangeTypes.ItemClick:l&&E(l),I&&y(""),T||k();break;}}}),U=ye(),w=j(U,["aria-labelledby","id"]),xe=Ie(),X=be(),P=Te(),N=0;return n__default["default"].createElement("div",{"data-test-id":ce,className:emotion.cx(m.autocomplete,r),ref:o},n__default["default"].createElement(f36Popover.Popover,{usePortal:ue,isOpen:F,isFullWidth:ae==="full",renderOnlyWhenOpen:!1,autoFocus:!1,id:P.id},n__default["default"].createElement(f36Popover.Popover.Trigger,null,n__default["default"].createElement("div",g(d({},xe),{className:m.combobox}),n__default["default"].createElement(f36Forms.TextInput,g(d({className:m.inputField},w),{onFocus:t=>{c==null||c(t),F||k();},onBlur:L,id:i,isInvalid:ee,isDisabled:_,isRequired:te,isReadOnly:oe,ref:f36Core.mergeRefs(w.ref,re),testId:"cf-autocomplete-input",placeholder:se,onChange:t=>{w.onChange(t),ge(t);}})),n__default["default"].createElement(f36Button.IconButton,g(d({},X),{ref:f36Core.mergeRefs(X.ref,pe),"aria-label":h?"Clear":"Show list",className:m.toggleButton,variant:"transparent",icon:h?n__default["default"].createElement(f36Icons.CloseIcon,{variant:"muted"}):Y,onClick:()=>{h?y(""):k();},isDisabled:_,size:"small"})))),s.length>0||h.length>0||ne?n__default["default"].createElement(f36Popover.Popover.Content,g(d({},P),{ref:f36Core.mergeRefs(P.ref,le),className:m.content,testId:"cf-autocomplete-container"}),v&&[...Array(3)].map((t,l)=>n__default["default"].createElement("div",{key:l,className:emotion.cx(m.item,m.disabled)},n__default["default"].createElement(Be,null))),!v&&fe&&n__default["default"].createElement("div",{className:m.item},n__default["default"].createElement(f36Typography.Subheading,{className:m.noMatchesTitle},ie)),!v&&A(x)&&s.map((t,l)=>{if(t.options.length<1)return;let ve=n__default["default"].createElement("div",{key:l},n__default["default"].createElement(f36Typography.SectionHeading,{key:l,"data-test-id":"cf-autocomplete-grouptitle",marginBottom:"none",className:m.groupTitle},t.groupTitle),n__default["default"].createElement(C,{items:t.options,highlightedIndex:D,getItemProps:$,renderItem:O,inputValue:h,elementStartIndex:N}));return N+=t.options.length,ve}),!v&&!A(x)&&s.length>0&&n__default["default"].createElement(C,{items:s,elementStartIndex:N,highlightedIndex:D,getItemProps:$,renderItem:O,inputValue:h})):n__default["default"].createElement("div",g(d({},P),{className:emotion.cx(m.hidden)}))))}var Be=()=>n__default["default"].createElement(f36Skeleton.Skeleton.Container,{svgHeight:16},n__default["default"].createElement(f36Skeleton.Skeleton.BodyText,{numberOfLines:1}));function A(e,o){return e}var Oe=n__default["default"].forwardRef(Re);
+var Pe=Object.defineProperty,Me=Object.defineProperties;var Se=Object.getOwnPropertyDescriptors;var M=Object.getOwnPropertySymbols;var q=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var W=(e,o,i)=>o in e?Pe(e,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[o]=i,d=(e,o)=>{for(var i in o||(o={}))q.call(o,i)&&W(e,i,o[i]);if(M)for(var i of M(o))z.call(o,i)&&W(e,i,o[i]);return e},g=(e,o)=>Me(e,Se(o));var j=(e,o)=>{var i={};for(var r in e)q.call(e,r)&&o.indexOf(r)<0&&(i[r]=e[r]);if(e!=null&&M)for(var r of M(e))o.indexOf(r)<0&&z.call(e,r)&&(i[r]=e[r]);return i};var S=e=>({autocomplete:emotion.css({position:"relative",width:"100%"}),combobox:emotion.css({position:"relative"}),inputField:emotion.css({paddingRight:p__default.default.spacingXl,textOverflow:"ellipsis",whiteSpace:"nowrap"}),toggleButton:emotion.css({position:"absolute",top:"1px",right:"1px",zIndex:1,padding:p__default.default.spacing2Xs,height:"38px"}),content:emotion.css({overflow:"auto",maxHeight:`${e}px`}),list:emotion.css({listStyle:"none",padding:`${p__default.default.spacingXs} 0`,margin:0}),groupTitle:emotion.css({padding:`${p__default.default.spacingXs} ${p__default.default.spacingM}`,lineHeight:p__default.default.lineHeightM}),noMatchesTitle:emotion.css({color:p__default.default.gray500,margin:`${p__default.default.spacingM} 0 ${p__default.default.spacingM} 0`}),item:emotion.css({display:"block",padding:`${p__default.default.spacingXs} ${p__default.default.spacingM}`,wordBreak:"break-word",whiteSpace:"break-spaces",cursor:"pointer",hyphens:"auto","&:focus, &:hover":{backgroundColor:p__default.default.gray100},"&:active":{backgroundColor:p__default.default.gray200}}),disabled:emotion.css({opacity:.5,pointerEvents:"none"}),highlighted:emotion.css({backgroundColor:p__default.default.gray100}),hidden:emotion.css({display:"none"})});var C=e=>{let{items:o,elementStartIndex:i,highlightedIndex:r,getItemProps:I,renderItem:T,inputValue:b,listMaxHeight:H=180}=e,s=S(H);return n__default.default.createElement("ul",{className:s.list,"data-test-id":"cf-autocomplete-list"},o.map((u,E)=>{let c=i+E,L=I({item:u,index:c});return n__default.default.createElement(f36Typography.Text,g(d({},L),{as:"li",key:c,className:emotion.cx([s.item,r===c&&s.highlighted]),"data-test-id":`cf-autocomplete-list-item-${c}`}),T?T(u,b):typeof u=="string"?n__default.default.createElement(K,{item:u,inputValue:b}):u)}))};C.displayName="AutocompleteItems";function K({item:e,inputValue:o}){let{before:i,match:r,after:I}=f36Utils.getStringMatch(e,o);return n__default.default.createElement(n__default.default.Fragment,null,i,n__default.default.createElement("b",null,r),I)}K.displayName="HighlightedItem";function Re(e,o){let {id:i,className:r,clearAfterSelect:I=!1,closeAfterSelect:T=!0,defaultValue:b="",selectedItem:H,items:s,onInputValueChange:u,onSelectItem:E,onFocus:c,onBlur:L,renderItem:O,icon:Y=n__default.default.createElement(f36Icons.ChevronDownIcon,{variant:"muted"}),itemToString:Z=t=>t,isInvalid:ee,isDisabled:_,isRequired:te,isReadOnly:oe,showEmptyList:ne,noMatchesMessage:ie="No matches found",placeholder:se="Search",inputRef:re,toggleRef:pe,listRef:le,listWidth:ae="auto",listMaxHeight:me=180,isGrouped:x=!1,isLoading:v=!1,usePortal:ue=!1,testId:ce="cf-autocomplete"}=e,m=S(me),[h,de]=n.useState(b),y=n.useCallback(t=>{de(t),u==null||u(t);},[u]),ge=n.useCallback(t=>{let l=t.target.value;y(l);},[y]),he=A(x)?s.reduce((t,l)=>[...t,...l.options],[]):s,fe=A(x)?s.every(t=>t.options.length===0):s.length===0,{getComboboxProps:Ie,getInputProps:ye,getItemProps:$,getMenuProps:Te,getToggleButtonProps:be,highlightedIndex:D,isOpen:F,toggleMenu:k}=downshift.useCombobox({items:he,selectedItem:H,inputValue:h,itemToString:Z,onInputValueChange:({type:t,inputValue:l})=>{t!=="__input_change__"&&y(l);},onStateChange:({type:t,selectedItem:l})=>{switch(t){case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:case downshift.useCombobox.stateChangeTypes.ItemClick:l&&E(l),I&&y(""),T||k();break;}}}),U=ye(),w=j(U,["aria-labelledby","id"]),xe=Ie(),X=be(),P=Te(),N=0;return n__default.default.createElement("div",{"data-test-id":ce,className:emotion.cx(m.autocomplete,r),ref:o},n__default.default.createElement(f36Popover.Popover,{usePortal:ue,isOpen:F,isFullWidth:ae==="full",renderOnlyWhenOpen:!1,autoFocus:!1,id:P.id},n__default.default.createElement(f36Popover.Popover.Trigger,null,n__default.default.createElement("div",g(d({},xe),{className:m.combobox}),n__default.default.createElement(f36Forms.TextInput,g(d({className:m.inputField},w),{onFocus:t=>{c==null||c(t),F||k();},onBlur:L,id:i,isInvalid:ee,isDisabled:_,isRequired:te,isReadOnly:oe,ref:f36Core.mergeRefs(w.ref,re),testId:"cf-autocomplete-input",placeholder:se,onChange:t=>{w.onChange(t),ge(t);}})),n__default.default.createElement(f36Button.IconButton,g(d({},X),{ref:f36Core.mergeRefs(X.ref,pe),"aria-label":h?"Clear":"Show list",className:m.toggleButton,variant:"transparent",icon:h?n__default.default.createElement(f36Icons.CloseIcon,{variant:"muted"}):Y,onClick:()=>{h?y(""):k();},isDisabled:_,size:"small"})))),s.length>0||h.length>0||ne?n__default.default.createElement(f36Popover.Popover.Content,g(d({},P),{ref:f36Core.mergeRefs(P.ref,le),className:m.content,testId:"cf-autocomplete-container"}),v&&[...Array(3)].map((t,l)=>n__default.default.createElement("div",{key:l,className:emotion.cx(m.item,m.disabled)},n__default.default.createElement(Be,null))),!v&&fe&&n__default.default.createElement("div",{className:m.item},n__default.default.createElement(f36Typography.Subheading,{className:m.noMatchesTitle},ie)),!v&&A(x)&&s.map((t,l)=>{if(t.options.length<1)return;let ve=n__default.default.createElement("div",{key:l},n__default.default.createElement(f36Typography.SectionHeading,{key:l,"data-test-id":"cf-autocomplete-grouptitle",marginBottom:"none",className:m.groupTitle},t.groupTitle),n__default.default.createElement(C,{items:t.options,highlightedIndex:D,getItemProps:$,renderItem:O,inputValue:h,elementStartIndex:N}));return N+=t.options.length,ve}),!v&&!A(x)&&s.length>0&&n__default.default.createElement(C,{items:s,elementStartIndex:N,highlightedIndex:D,getItemProps:$,renderItem:O,inputValue:h})):n__default.default.createElement("div",g(d({},P),{className:emotion.cx(m.hidden)}))))}var Be=()=>n__default.default.createElement(f36Skeleton.Skeleton.Container,{svgHeight:16},n__default.default.createElement(f36Skeleton.Skeleton.BodyText,{numberOfLines:1}));function A(e,o){return e}var Oe=n__default.default.forwardRef(Re);
 
 exports.Autocomplete = Oe;
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Autocomplete.tsx","../src/AutocompleteItems.tsx","../src/Autocomplete.styles.ts"],"names":["React","useCallback","useState","cx","useCombobox","mergeRefs","IconButton","TextInput","CloseIcon","ChevronDownIcon","Skeleton","Popover","Subheading","SectionHeading","getStringMatch","Text","css","tokens","getAutocompleteStyles","listMaxHeight","AutocompleteItems","props","items","elementStartIndex","highlightedIndex","getItemProps","renderItem","inputValue","styles","item","index","itemIndex","itemProps","__spreadProps","__spreadValues","HighlightedItem","before","match","after","_Autocomplete","ref","id","className","clearAfterSelect","closeAfterSelect","defaultValue","selectedItem","onInputValueChange","onSelectItem","onFocus","onBlur","icon","itemToString","isInvalid","isDisabled","isRequired","isReadOnly","showEmptyList","noMatchesMessage","placeholder","inputRef","toggleRef","listRef","listWidth","isGrouped","isLoading","usePortal","testId","setInputValue","handleInputValueChange","value","handleNativeChangeEvent","event","flattenItems","isUsingGroups","acc","group","isShowingNoMatches","getComboboxProps","getInputProps","getMenuProps","getToggleButtonProps","isOpen","toggleMenu","type","_a","_labelledby","_inputId","inputProps","__objRest","comboboxProps","toggleProps","menuProps","e","_","ListItemLoadingState","render","Autocomplete"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport {\n  mergeRefs,\n  type CommonProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput, type TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { Skeleton } from '@contentful/f36-skeleton';\nimport { Popover } from '@contentful/f36-popover';\nimport { Subheading, SectionHeading } from '@contentful/f36-typography';\n\nimport { AutocompleteItems } from './AutocompleteItems';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\nexport interface GenericGroupType<ItemType> {\n  groupTitle: string;\n  options: ItemType[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface AutocompleteProps<ItemType>\n  extends CommonProps,\n    Pick<\n      TextInputProps,\n      | 'isDisabled'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'id'\n      | 'defaultValue'\n    > {\n  /**\n   * It’s an array of data to be used as \"options\" by the autocomplete component.\n   * This can either be a plain list of items or a list of groups of items.\n   */\n  items: ItemType[] | GenericGroupType<ItemType>[];\n\n  /**\n   * Set a custom icon for the text input\n   */\n  icon?: React.ReactElement;\n\n  /**\n   * Tells if the item is a object with groups\n   */\n  isGrouped?: boolean;\n\n  /**\n   * Function called whenever the input value changes\n   */\n  onInputValueChange?: (value: string) => void;\n  /**\n   * This is the function that will be called when the user selects one of the \"options\" in the list.\n   * The component will pass the selected \"item\" as an argument to the function..\n   */\n  onSelectItem: (item: ItemType) => void;\n\n  /**\n   * Applying the selectedItem property turns autocomplete into a controlled component.\n   * Can be used to display e.g. previously selected element. If it is an object the itemToString function will apply to it.\n   */\n  selectedItem?: ItemType;\n\n  /**\n   * This is the function that will be called for each \"item\" passed in the `items` prop.\n   * It receives the \"item\" and \"inputValue\" as arguments and returns a ReactNode.\n   * The inputValue is passed in case you want to highlight the match on the render.\n   */\n  renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;\n  /**\n   * When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string\n   * from those objetcs to be used as inputValue\n   */\n  itemToString?: (item: ItemType) => string;\n  /**\n   * If this is set to `true` the text input will be cleared after an item is selected\n   * @default false\n   */\n  clearAfterSelect?: boolean;\n  /**\n   * If this is set to `false` the dropdown menu will stay open after selecting an item\n   * @default true\n   */\n  closeAfterSelect?: boolean;\n  /**\n   * This is the value will be passed to the `placeholder` prop of the input.\n   * @default \"Search\"\n   */\n  placeholder?: string;\n  /**\n   * Defines if the list should be shown even if empty, when input is focused\n   * @default false\n   */\n  showEmptyList?: boolean;\n  /**\n   * A message that will be shown when it is not possible to find any option that matches the input value\n   * @default \"No matches\"\n   */\n  noMatchesMessage?: string;\n  /**\n   * Use this prop to get a ref to the input element of the component\n   */\n  inputRef?: React.Ref<HTMLInputElement>;\n  /**\n   * Use this prop to get a ref to the toggle button of the component\n   */\n  toggleRef?: React.Ref<HTMLButtonElement>;\n  /**\n   * Use this prop to get a ref to the list of items of the component\n   */\n  listRef?: React.Ref<HTMLUListElement>;\n  /**\n   * It sets the width of the list\n   * @default \"auto\"\n   */\n  listWidth?: 'auto' | 'full';\n  /**\n   * It sets the max-height, in pixels, of the list\n   * The default value is the height of 5 single line items\n   * @default 180\n   */\n  listMaxHeight?: number;\n  /**\n   * Sets the list to show its loading state\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Boolean to control whether or not to render the suggestions box in a React Portal.\n   * Rendering content inside a Portal allows the suggestions box to escape the bounds\n   * of its parent while still being positioned correctly.\n   * Defaults to `false`\n   */\n  usePortal?: boolean;\n\n  /**\n   * Function called when the input is focused\n   *\n   * @param event\n   */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Function called when the input is blurred\n   * @param event\n   */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n}\n\nfunction _Autocomplete<ItemType>(\n  props: AutocompleteProps<ItemType>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    id,\n    className,\n    clearAfterSelect = false,\n    closeAfterSelect = true,\n    defaultValue = '',\n    selectedItem,\n    items,\n    onInputValueChange,\n    onSelectItem,\n    onFocus,\n    onBlur,\n    renderItem,\n    icon = <ChevronDownIcon variant=\"muted\" />,\n    itemToString = (item: ItemType) => item as unknown as string,\n    isInvalid,\n    isDisabled,\n    isRequired,\n    isReadOnly,\n    showEmptyList,\n    noMatchesMessage = 'No matches found',\n    placeholder = 'Search',\n    inputRef,\n    toggleRef,\n    listRef,\n    listWidth = 'auto',\n    listMaxHeight = 180,\n    isGrouped = false,\n    isLoading = false,\n    usePortal = false,\n    testId = 'cf-autocomplete',\n  } = props;\n\n  type GroupType = GenericGroupType<ItemType>;\n\n  const styles = getAutocompleteStyles(listMaxHeight);\n\n  const [inputValue, setInputValue] = useState(defaultValue);\n\n  const handleInputValueChange = useCallback(\n    (value: string) => {\n      setInputValue(value);\n\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange],\n  );\n\n  // Handle manually to avoid a jumping cursor, see https://github.com/downshift-js/downshift/issues/1108#issuecomment-842407759\n  const handleNativeChangeEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      const value = event.target.value;\n      handleInputValueChange(value);\n    },\n    [handleInputValueChange],\n  );\n\n  const flattenItems = isUsingGroups(isGrouped, items)\n    ? items.reduce(\n        (acc: ItemType[], group: GroupType) => [...acc, ...group.options],\n        [],\n      )\n    : items;\n\n  const isShowingNoMatches = isUsingGroups(isGrouped, items)\n    ? items.every((group: GroupType) => group.options.length === 0)\n    : items.length === 0;\n\n  const {\n    getComboboxProps,\n    getInputProps,\n    getItemProps,\n    getMenuProps,\n    getToggleButtonProps,\n    highlightedIndex,\n    isOpen,\n    toggleMenu,\n  } = useCombobox({\n    items: flattenItems,\n    selectedItem,\n    inputValue,\n    itemToString,\n    onInputValueChange: ({ type, inputValue }) => {\n      if (type !== '__input_change__') {\n        handleInputValueChange(inputValue);\n      }\n    },\n    onStateChange: ({ type, selectedItem }) => {\n      switch (type) {\n        case useCombobox.stateChangeTypes.InputKeyDownEnter:\n        case useCombobox.stateChangeTypes.ItemClick:\n          if (selectedItem) {\n            onSelectItem(selectedItem);\n          }\n          if (clearAfterSelect) {\n            handleInputValueChange('');\n          }\n          if (!closeAfterSelect) {\n            toggleMenu();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  const {\n    'aria-labelledby': _labelledby,\n    id: _inputId,\n    ...inputProps\n  } = getInputProps();\n  const comboboxProps = getComboboxProps();\n  const toggleProps = getToggleButtonProps();\n  const menuProps = getMenuProps();\n  let elementStartIndex = 0;\n\n  return (\n    <div\n      data-test-id={testId}\n      className={cx(styles.autocomplete, className)}\n      ref={ref}\n    >\n      <Popover\n        usePortal={usePortal}\n        isOpen={isOpen}\n        isFullWidth={listWidth === 'full'}\n        renderOnlyWhenOpen={false}\n        // This is necessary, otherwise the focus will change from the input to the Popover\n        // and the user won't be able to type in the input\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={false}\n        id={menuProps.id}\n      >\n        <Popover.Trigger>\n          <div {...comboboxProps} className={styles.combobox}>\n            <TextInput\n              className={styles.inputField}\n              {...inputProps}\n              onFocus={(e) => {\n                onFocus?.(e as React.FocusEvent<HTMLInputElement>);\n                if (!isOpen) {\n                  toggleMenu();\n                }\n              }}\n              onBlur={onBlur}\n              id={id}\n              isInvalid={isInvalid}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              isReadOnly={isReadOnly}\n              ref={mergeRefs(inputProps.ref, inputRef)}\n              testId=\"cf-autocomplete-input\"\n              placeholder={placeholder}\n              onChange={(event) => {\n                inputProps.onChange(event);\n                handleNativeChangeEvent(event);\n              }}\n            />\n            <IconButton\n              {...toggleProps}\n              ref={mergeRefs(toggleProps.ref, toggleRef)}\n              aria-label={inputValue ? 'Clear' : 'Show list'}\n              className={styles.toggleButton}\n              variant=\"transparent\"\n              icon={inputValue ? <CloseIcon variant=\"muted\" /> : icon}\n              onClick={() => {\n                if (inputValue) {\n                  handleInputValueChange('');\n                } else {\n                  toggleMenu();\n                }\n              }}\n              isDisabled={isDisabled}\n              size=\"small\"\n            />\n          </div>\n        </Popover.Trigger>\n\n        {items.length > 0 || inputValue.length > 0 || showEmptyList ? (\n          <Popover.Content\n            {...menuProps}\n            ref={mergeRefs(menuProps.ref, listRef)}\n            className={styles.content}\n            testId=\"cf-autocomplete-container\"\n          >\n            {isLoading &&\n              [...Array(3)].map((_, index) => (\n                <div key={index} className={cx(styles.item, styles.disabled)}>\n                  <ListItemLoadingState />\n                </div>\n              ))}\n\n            {!isLoading && isShowingNoMatches && (\n              <div className={styles.item}>\n                <Subheading className={styles.noMatchesTitle}>\n                  {noMatchesMessage}\n                </Subheading>\n              </div>\n            )}\n\n            {!isLoading &&\n              isUsingGroups(isGrouped, items) &&\n              items.map((group: GroupType, index: number) => {\n                if (group.options.length < 1) {\n                  return;\n                }\n                const render = (\n                  <div key={index}>\n                    <SectionHeading\n                      key={index}\n                      data-test-id=\"cf-autocomplete-grouptitle\"\n                      marginBottom=\"none\"\n                      className={styles.groupTitle}\n                    >\n                      {group.groupTitle}\n                    </SectionHeading>\n                    <AutocompleteItems<ItemType>\n                      items={group.options}\n                      highlightedIndex={highlightedIndex}\n                      getItemProps={getItemProps}\n                      renderItem={renderItem}\n                      inputValue={inputValue}\n                      elementStartIndex={elementStartIndex}\n                    />\n                  </div>\n                );\n                elementStartIndex += group.options.length;\n                return render;\n              })}\n\n            {!isLoading &&\n              !isUsingGroups(isGrouped, items) &&\n              items.length > 0 && (\n                <AutocompleteItems<ItemType>\n                  items={items}\n                  elementStartIndex={elementStartIndex}\n                  highlightedIndex={highlightedIndex}\n                  getItemProps={getItemProps}\n                  renderItem={renderItem}\n                  inputValue={inputValue}\n                />\n              )}\n          </Popover.Content>\n        ) : (\n          // We need to render an empty hidden div, so we can pass the menuProps or downshift will show a warning about it\n          // https://github.com/downshift-js/downshift/issues/1167#issuecomment-1088022842\n          <div {...menuProps} className={cx(styles.hidden)} />\n        )}\n      </Popover>\n    </div>\n  );\n}\n\nconst ListItemLoadingState = () => {\n  return (\n    <Skeleton.Container svgHeight={16}>\n      <Skeleton.BodyText numberOfLines={1} />\n    </Skeleton.Container>\n  );\n};\n\n// This is required to infer correct typings when differentiating groups and items\nfunction isUsingGroups<ItemType>(\n  isGrouped: boolean,\n  items: ItemType[] | GenericGroupType<ItemType>[],\n): items is GenericGroupType<ItemType>[] {\n  return isGrouped;\n}\n\n/**\n * The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used\n * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.\n * Once one of the options is selected, that option becomes the value of the `TextInput`.\n */\nexport const Autocomplete = React.forwardRef(_Autocomplete) as <T>(\n  props: ExpandProps<AutocompleteProps<T>> & {\n    ref?: React.Ref<HTMLDivElement>;\n  },\n) => ReturnType<typeof _Autocomplete>;\n","import React, { HTMLAttributes } from 'react';\nimport { cx } from 'emotion';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\nimport { Text } from '@contentful/f36-typography';\n\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\ninterface AutocompleteItemsProps<ItemType> {\n  items: ItemType[];\n  elementStartIndex: number;\n  highlightedIndex: number;\n  getItemProps: (\n    options: UseComboboxGetItemPropsOptions<ItemType>,\n  ) => HTMLAttributes<HTMLLIElement>;\n  renderItem: (item: ItemType, inputValue: string) => React.ReactNode;\n  inputValue: string;\n  listMaxHeight?: number;\n}\n\nexport const AutocompleteItems = <ItemType,>(\n  props: AutocompleteItemsProps<ItemType>,\n) => {\n  const {\n    items,\n    elementStartIndex,\n    highlightedIndex,\n    getItemProps,\n    renderItem,\n    inputValue,\n    listMaxHeight = 180,\n  } = props;\n\n  const styles = getAutocompleteStyles(listMaxHeight);\n\n  return (\n    <ul className={styles.list} data-test-id=\"cf-autocomplete-list\">\n      {items.map((item: ItemType, index: number) => {\n        const itemIndex = elementStartIndex + index;\n        const itemProps = getItemProps({ item, index: itemIndex });\n        return (\n          <Text\n            {...itemProps}\n            as=\"li\"\n            key={itemIndex}\n            className={cx([\n              styles.item,\n              highlightedIndex === itemIndex && styles.highlighted,\n            ])}\n            data-test-id={`cf-autocomplete-list-item-${itemIndex}`}\n          >\n            {renderItem ? (\n              renderItem(item, inputValue)\n            ) : typeof item === 'string' ? (\n              <HighlightedItem item={item} inputValue={inputValue} />\n            ) : (\n              item\n            )}\n          </Text>\n        );\n      })}\n    </ul>\n  );\n};\n\nAutocompleteItems.displayName = 'AutocompleteItems';\n\nfunction HighlightedItem({\n  item,\n  inputValue,\n}: {\n  item: string;\n  inputValue: string;\n}) {\n  const { before, match, after } = getStringMatch(item, inputValue);\n\n  return (\n    <>\n      {before}\n      <b>{match}</b>\n      {after}\n    </>\n  );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAutocompleteStyles = (listMaxHeight: number) => ({\n  autocomplete: css({\n    position: 'relative',\n    width: '100%',\n  }),\n  combobox: css({\n    position: 'relative',\n  }),\n  inputField: css({\n    paddingRight: tokens.spacingXl,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  toggleButton: css({\n    position: 'absolute',\n    top: '1px',\n    right: '1px',\n    zIndex: 1,\n    padding: tokens.spacing2Xs,\n    height: '38px',\n  }),\n  content: css({\n    overflow: 'auto',\n    maxHeight: `${listMaxHeight}px`,\n  }),\n  list: css({\n    listStyle: 'none',\n    padding: `${tokens.spacingXs} 0`,\n    margin: 0,\n  }),\n  groupTitle: css({\n    padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n    lineHeight: tokens.lineHeightM,\n  }),\n  noMatchesTitle: css({\n    color: tokens.gray500,\n    margin: `${tokens.spacingM} 0 ${tokens.spacingM} 0`,\n  }),\n  item: css({\n    display: 'block',\n    padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n    wordBreak: 'break-word',\n    whiteSpace: 'break-spaces',\n    cursor: 'pointer',\n    hyphens: 'auto',\n\n    '&:focus, &:hover': {\n      backgroundColor: tokens.gray100,\n    },\n    '&:active': {\n      backgroundColor: tokens.gray200,\n    },\n  }),\n  disabled: css({\n    opacity: 0.5,\n    pointerEvents: 'none',\n  }),\n  highlighted: css({\n    backgroundColor: tokens.gray100,\n  }),\n  hidden: css({\n    display: 'none',\n  }),\n});\n"]}
+{"version":3,"sources":["../src/Autocomplete.tsx","../src/AutocompleteItems.tsx","../src/Autocomplete.styles.ts"],"names":["React","useCallback","useState","cx","useCombobox","mergeRefs","IconButton","TextInput","CloseIcon","ChevronDownIcon","Skeleton","Popover","Subheading","SectionHeading","getStringMatch","Text","css","tokens","getAutocompleteStyles","listMaxHeight","AutocompleteItems","props","items","elementStartIndex","highlightedIndex","getItemProps","renderItem","inputValue","styles","item","index","itemIndex","itemProps","__spreadProps","__spreadValues","HighlightedItem","before","match","after","_Autocomplete","ref","id","className","clearAfterSelect","closeAfterSelect","defaultValue","selectedItem","onInputValueChange","onSelectItem","onFocus","onBlur","icon","itemToString","isInvalid","isDisabled","isRequired","isReadOnly","showEmptyList","noMatchesMessage","placeholder","inputRef","toggleRef","listRef","listWidth","isGrouped","isLoading","usePortal","testId","setInputValue","handleInputValueChange","value","handleNativeChangeEvent","event","flattenItems","isUsingGroups","acc","group","isShowingNoMatches","getComboboxProps","getInputProps","getMenuProps","getToggleButtonProps","isOpen","toggleMenu","type","_a","_labelledby","_inputId","inputProps","__objRest","comboboxProps","toggleProps","menuProps","e","_","ListItemLoadingState","render","Autocomplete"],"mappings":"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","sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport {\n  mergeRefs,\n  type CommonProps,\n  type ExpandProps,\n} from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput, type TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { Skeleton } from '@contentful/f36-skeleton';\nimport { Popover } from '@contentful/f36-popover';\nimport { Subheading, SectionHeading } from '@contentful/f36-typography';\n\nimport { AutocompleteItems } from './AutocompleteItems';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\nexport interface GenericGroupType<ItemType> {\n  groupTitle: string;\n  options: ItemType[];\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface AutocompleteProps<ItemType>\n  extends CommonProps,\n    Pick<\n      TextInputProps,\n      | 'isDisabled'\n      | 'isInvalid'\n      | 'isReadOnly'\n      | 'isRequired'\n      | 'id'\n      | 'defaultValue'\n    > {\n  /**\n   * It’s an array of data to be used as \"options\" by the autocomplete component.\n   * This can either be a plain list of items or a list of groups of items.\n   */\n  items: ItemType[] | GenericGroupType<ItemType>[];\n\n  /**\n   * Set a custom icon for the text input\n   */\n  icon?: React.ReactElement;\n\n  /**\n   * Tells if the item is a object with groups\n   */\n  isGrouped?: boolean;\n\n  /**\n   * Function called whenever the input value changes\n   */\n  onInputValueChange?: (value: string) => void;\n  /**\n   * This is the function that will be called when the user selects one of the \"options\" in the list.\n   * The component will pass the selected \"item\" as an argument to the function..\n   */\n  onSelectItem: (item: ItemType) => void;\n\n  /**\n   * Applying the selectedItem property turns autocomplete into a controlled component.\n   * Can be used to display e.g. previously selected element. If it is an object the itemToString function will apply to it.\n   */\n  selectedItem?: ItemType;\n\n  /**\n   * This is the function that will be called for each \"item\" passed in the `items` prop.\n   * It receives the \"item\" and \"inputValue\" as arguments and returns a ReactNode.\n   * The inputValue is passed in case you want to highlight the match on the render.\n   */\n  renderItem?: (item: ItemType, inputValue: string) => React.ReactNode;\n  /**\n   * When using objects as `items`, we recommend passing a function that tells Downshift how to extract a string\n   * from those objetcs to be used as inputValue\n   */\n  itemToString?: (item: ItemType) => string;\n  /**\n   * If this is set to `true` the text input will be cleared after an item is selected\n   * @default false\n   */\n  clearAfterSelect?: boolean;\n  /**\n   * If this is set to `false` the dropdown menu will stay open after selecting an item\n   * @default true\n   */\n  closeAfterSelect?: boolean;\n  /**\n   * This is the value will be passed to the `placeholder` prop of the input.\n   * @default \"Search\"\n   */\n  placeholder?: string;\n  /**\n   * Defines if the list should be shown even if empty, when input is focused\n   * @default false\n   */\n  showEmptyList?: boolean;\n  /**\n   * A message that will be shown when it is not possible to find any option that matches the input value\n   * @default \"No matches\"\n   */\n  noMatchesMessage?: string;\n  /**\n   * Use this prop to get a ref to the input element of the component\n   */\n  inputRef?: React.Ref<HTMLInputElement>;\n  /**\n   * Use this prop to get a ref to the toggle button of the component\n   */\n  toggleRef?: React.Ref<HTMLButtonElement>;\n  /**\n   * Use this prop to get a ref to the list of items of the component\n   */\n  listRef?: React.Ref<HTMLUListElement>;\n  /**\n   * It sets the width of the list\n   * @default \"auto\"\n   */\n  listWidth?: 'auto' | 'full';\n  /**\n   * It sets the max-height, in pixels, of the list\n   * The default value is the height of 5 single line items\n   * @default 180\n   */\n  listMaxHeight?: number;\n  /**\n   * Sets the list to show its loading state\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Boolean to control whether or not to render the suggestions box in a React Portal.\n   * Rendering content inside a Portal allows the suggestions box to escape the bounds\n   * of its parent while still being positioned correctly.\n   * Defaults to `false`\n   */\n  usePortal?: boolean;\n\n  /**\n   * Function called when the input is focused\n   *\n   * @param event\n   */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Function called when the input is blurred\n   * @param event\n   */\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n}\n\nfunction _Autocomplete<ItemType>(\n  props: AutocompleteProps<ItemType>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    id,\n    className,\n    clearAfterSelect = false,\n    closeAfterSelect = true,\n    defaultValue = '',\n    selectedItem,\n    items,\n    onInputValueChange,\n    onSelectItem,\n    onFocus,\n    onBlur,\n    renderItem,\n    icon = <ChevronDownIcon variant=\"muted\" />,\n    itemToString = (item: ItemType) => item as unknown as string,\n    isInvalid,\n    isDisabled,\n    isRequired,\n    isReadOnly,\n    showEmptyList,\n    noMatchesMessage = 'No matches found',\n    placeholder = 'Search',\n    inputRef,\n    toggleRef,\n    listRef,\n    listWidth = 'auto',\n    listMaxHeight = 180,\n    isGrouped = false,\n    isLoading = false,\n    usePortal = false,\n    testId = 'cf-autocomplete',\n  } = props;\n\n  type GroupType = GenericGroupType<ItemType>;\n\n  const styles = getAutocompleteStyles(listMaxHeight);\n\n  const [inputValue, setInputValue] = useState(defaultValue);\n\n  const handleInputValueChange = useCallback(\n    (value: string) => {\n      setInputValue(value);\n\n      onInputValueChange?.(value);\n    },\n    [onInputValueChange],\n  );\n\n  // Handle manually to avoid a jumping cursor, see https://github.com/downshift-js/downshift/issues/1108#issuecomment-842407759\n  const handleNativeChangeEvent = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      const value = event.target.value;\n      handleInputValueChange(value);\n    },\n    [handleInputValueChange],\n  );\n\n  const flattenItems = isUsingGroups(isGrouped, items)\n    ? items.reduce(\n        (acc: ItemType[], group: GroupType) => [...acc, ...group.options],\n        [],\n      )\n    : items;\n\n  const isShowingNoMatches = isUsingGroups(isGrouped, items)\n    ? items.every((group: GroupType) => group.options.length === 0)\n    : items.length === 0;\n\n  const {\n    getComboboxProps,\n    getInputProps,\n    getItemProps,\n    getMenuProps,\n    getToggleButtonProps,\n    highlightedIndex,\n    isOpen,\n    toggleMenu,\n  } = useCombobox({\n    items: flattenItems,\n    selectedItem,\n    inputValue,\n    itemToString,\n    onInputValueChange: ({ type, inputValue }) => {\n      if (type !== '__input_change__') {\n        handleInputValueChange(inputValue);\n      }\n    },\n    onStateChange: ({ type, selectedItem }) => {\n      switch (type) {\n        case useCombobox.stateChangeTypes.InputKeyDownEnter:\n        case useCombobox.stateChangeTypes.ItemClick:\n          if (selectedItem) {\n            onSelectItem(selectedItem);\n          }\n          if (clearAfterSelect) {\n            handleInputValueChange('');\n          }\n          if (!closeAfterSelect) {\n            toggleMenu();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n  });\n\n  const {\n    'aria-labelledby': _labelledby,\n    id: _inputId,\n    ...inputProps\n  } = getInputProps();\n  const comboboxProps = getComboboxProps();\n  const toggleProps = getToggleButtonProps();\n  const menuProps = getMenuProps();\n  let elementStartIndex = 0;\n\n  return (\n    <div\n      data-test-id={testId}\n      className={cx(styles.autocomplete, className)}\n      ref={ref}\n    >\n      <Popover\n        usePortal={usePortal}\n        isOpen={isOpen}\n        isFullWidth={listWidth === 'full'}\n        renderOnlyWhenOpen={false}\n        // This is necessary, otherwise the focus will change from the input to the Popover\n        // and the user won't be able to type in the input\n        // eslint-disable-next-line jsx-a11y/no-autofocus\n        autoFocus={false}\n        id={menuProps.id}\n      >\n        <Popover.Trigger>\n          <div {...comboboxProps} className={styles.combobox}>\n            <TextInput\n              className={styles.inputField}\n              {...inputProps}\n              onFocus={(e) => {\n                onFocus?.(e as React.FocusEvent<HTMLInputElement>);\n                if (!isOpen) {\n                  toggleMenu();\n                }\n              }}\n              onBlur={onBlur}\n              id={id}\n              isInvalid={isInvalid}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              isReadOnly={isReadOnly}\n              ref={mergeRefs(inputProps.ref, inputRef)}\n              testId=\"cf-autocomplete-input\"\n              placeholder={placeholder}\n              onChange={(event) => {\n                inputProps.onChange(event);\n                handleNativeChangeEvent(event);\n              }}\n            />\n            <IconButton\n              {...toggleProps}\n              ref={mergeRefs(toggleProps.ref, toggleRef)}\n              aria-label={inputValue ? 'Clear' : 'Show list'}\n              className={styles.toggleButton}\n              variant=\"transparent\"\n              icon={inputValue ? <CloseIcon variant=\"muted\" /> : icon}\n              onClick={() => {\n                if (inputValue) {\n                  handleInputValueChange('');\n                } else {\n                  toggleMenu();\n                }\n              }}\n              isDisabled={isDisabled}\n              size=\"small\"\n            />\n          </div>\n        </Popover.Trigger>\n\n        {items.length > 0 || inputValue.length > 0 || showEmptyList ? (\n          <Popover.Content\n            {...menuProps}\n            ref={mergeRefs(menuProps.ref, listRef)}\n            className={styles.content}\n            testId=\"cf-autocomplete-container\"\n          >\n            {isLoading &&\n              [...Array(3)].map((_, index) => (\n                <div key={index} className={cx(styles.item, styles.disabled)}>\n                  <ListItemLoadingState />\n                </div>\n              ))}\n\n            {!isLoading && isShowingNoMatches && (\n              <div className={styles.item}>\n                <Subheading className={styles.noMatchesTitle}>\n                  {noMatchesMessage}\n                </Subheading>\n              </div>\n            )}\n\n            {!isLoading &&\n              isUsingGroups(isGrouped, items) &&\n              items.map((group: GroupType, index: number) => {\n                if (group.options.length < 1) {\n                  return;\n                }\n                const render = (\n                  <div key={index}>\n                    <SectionHeading\n                      key={index}\n                      data-test-id=\"cf-autocomplete-grouptitle\"\n                      marginBottom=\"none\"\n                      className={styles.groupTitle}\n                    >\n                      {group.groupTitle}\n                    </SectionHeading>\n                    <AutocompleteItems<ItemType>\n                      items={group.options}\n                      highlightedIndex={highlightedIndex}\n                      getItemProps={getItemProps}\n                      renderItem={renderItem}\n                      inputValue={inputValue}\n                      elementStartIndex={elementStartIndex}\n                    />\n                  </div>\n                );\n                elementStartIndex += group.options.length;\n                return render;\n              })}\n\n            {!isLoading &&\n              !isUsingGroups(isGrouped, items) &&\n              items.length > 0 && (\n                <AutocompleteItems<ItemType>\n                  items={items}\n                  elementStartIndex={elementStartIndex}\n                  highlightedIndex={highlightedIndex}\n                  getItemProps={getItemProps}\n                  renderItem={renderItem}\n                  inputValue={inputValue}\n                />\n              )}\n          </Popover.Content>\n        ) : (\n          // We need to render an empty hidden div, so we can pass the menuProps or downshift will show a warning about it\n          // https://github.com/downshift-js/downshift/issues/1167#issuecomment-1088022842\n          <div {...menuProps} className={cx(styles.hidden)} />\n        )}\n      </Popover>\n    </div>\n  );\n}\n\nconst ListItemLoadingState = () => {\n  return (\n    <Skeleton.Container svgHeight={16}>\n      <Skeleton.BodyText numberOfLines={1} />\n    </Skeleton.Container>\n  );\n};\n\n// This is required to infer correct typings when differentiating groups and items\nfunction isUsingGroups<ItemType>(\n  isGrouped: boolean,\n  items: ItemType[] | GenericGroupType<ItemType>[],\n): items is GenericGroupType<ItemType>[] {\n  return isGrouped;\n}\n\n/**\n * The Autocomplete is a component that will show a `TextInput` where a user can type any word which will be used\n * to filter a list of items. That list of filtered items will be shown to the user as possible options for the input.\n * Once one of the options is selected, that option becomes the value of the `TextInput`.\n */\nexport const Autocomplete = React.forwardRef(_Autocomplete) as <T>(\n  props: ExpandProps<AutocompleteProps<T>> & {\n    ref?: React.Ref<HTMLDivElement>;\n  },\n) => ReturnType<typeof _Autocomplete>;\n","import React, { HTMLAttributes } from 'react';\nimport { cx } from 'emotion';\nimport { getStringMatch } from '@contentful/f36-utils';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\nimport { Text } from '@contentful/f36-typography';\n\nimport { getAutocompleteStyles } from './Autocomplete.styles';\n\ninterface AutocompleteItemsProps<ItemType> {\n  items: ItemType[];\n  elementStartIndex: number;\n  highlightedIndex: number;\n  getItemProps: (\n    options: UseComboboxGetItemPropsOptions<ItemType>,\n  ) => HTMLAttributes<HTMLLIElement>;\n  renderItem: (item: ItemType, inputValue: string) => React.ReactNode;\n  inputValue: string;\n  listMaxHeight?: number;\n}\n\nexport const AutocompleteItems = <ItemType,>(\n  props: AutocompleteItemsProps<ItemType>,\n) => {\n  const {\n    items,\n    elementStartIndex,\n    highlightedIndex,\n    getItemProps,\n    renderItem,\n    inputValue,\n    listMaxHeight = 180,\n  } = props;\n\n  const styles = getAutocompleteStyles(listMaxHeight);\n\n  return (\n    <ul className={styles.list} data-test-id=\"cf-autocomplete-list\">\n      {items.map((item: ItemType, index: number) => {\n        const itemIndex = elementStartIndex + index;\n        const itemProps = getItemProps({ item, index: itemIndex });\n        return (\n          <Text\n            {...itemProps}\n            as=\"li\"\n            key={itemIndex}\n            className={cx([\n              styles.item,\n              highlightedIndex === itemIndex && styles.highlighted,\n            ])}\n            data-test-id={`cf-autocomplete-list-item-${itemIndex}`}\n          >\n            {renderItem ? (\n              renderItem(item, inputValue)\n            ) : typeof item === 'string' ? (\n              <HighlightedItem item={item} inputValue={inputValue} />\n            ) : (\n              item\n            )}\n          </Text>\n        );\n      })}\n    </ul>\n  );\n};\n\nAutocompleteItems.displayName = 'AutocompleteItems';\n\nfunction HighlightedItem({\n  item,\n  inputValue,\n}: {\n  item: string;\n  inputValue: string;\n}) {\n  const { before, match, after } = getStringMatch(item, inputValue);\n\n  return (\n    <>\n      {before}\n      <b>{match}</b>\n      {after}\n    </>\n  );\n}\n\nHighlightedItem.displayName = 'HighlightedItem';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getAutocompleteStyles = (listMaxHeight: number) => ({\n  autocomplete: css({\n    position: 'relative',\n    width: '100%',\n  }),\n  combobox: css({\n    position: 'relative',\n  }),\n  inputField: css({\n    paddingRight: tokens.spacingXl,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  toggleButton: css({\n    position: 'absolute',\n    top: '1px',\n    right: '1px',\n    zIndex: 1,\n    padding: tokens.spacing2Xs,\n    height: '38px',\n  }),\n  content: css({\n    overflow: 'auto',\n    maxHeight: `${listMaxHeight}px`,\n  }),\n  list: css({\n    listStyle: 'none',\n    padding: `${tokens.spacingXs} 0`,\n    margin: 0,\n  }),\n  groupTitle: css({\n    padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n    lineHeight: tokens.lineHeightM,\n  }),\n  noMatchesTitle: css({\n    color: tokens.gray500,\n    margin: `${tokens.spacingM} 0 ${tokens.spacingM} 0`,\n  }),\n  item: css({\n    display: 'block',\n    padding: `${tokens.spacingXs} ${tokens.spacingM}`,\n    wordBreak: 'break-word',\n    whiteSpace: 'break-spaces',\n    cursor: 'pointer',\n    hyphens: 'auto',\n\n    '&:focus, &:hover': {\n      backgroundColor: tokens.gray100,\n    },\n    '&:active': {\n      backgroundColor: tokens.gray200,\n    },\n  }),\n  disabled: css({\n    opacity: 0.5,\n    pointerEvents: 'none',\n  }),\n  highlighted: css({\n    backgroundColor: tokens.gray100,\n  }),\n  hidden: css({\n    display: 'none',\n  }),\n});\n"]}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@contentful/f36-autocomplete",
-  "version": "4.48.0",
+  "version": "4.48.1",
   "description": "Forma 36: Autocomplete component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-button": "^4.48.0",
-    "@contentful/f36-core": "^4.48.0",
-    "@contentful/f36-forms": "^4.48.0",
+    "@contentful/f36-button": "^4.48.1",
+    "@contentful/f36-core": "^4.48.1",
+    "@contentful/f36-forms": "^4.48.1",
     "@contentful/f36-icons": "^4.27.0",
-    "@contentful/f36-popover": "^4.48.0",
-    "@contentful/f36-skeleton": "^4.48.0",
+    "@contentful/f36-popover": "^4.48.1",
+    "@contentful/f36-skeleton": "^4.48.1",
     "@contentful/f36-tokens": "^4.0.2",
-    "@contentful/f36-typography": "^4.48.0",
+    "@contentful/f36-typography": "^4.48.1",
     "@contentful/f36-utils": "^4.23.2",
     "downshift": "^6.1.12",
     "emotion": "^10.0.17"