@contentful/f36-autocomplete 4.10.3 → 4.11.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.mdx +18 -0
  3. package/dist/main.js +6 -7
  4. package/dist/main.js.map +1 -1
  5. package/dist/module.js +7 -8
  6. package/dist/module.js.map +1 -1
  7. package/dist/types.d.ts +9 -0
  8. package/dist/types.d.ts.map +1 -1
  9. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,53 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.11.0-beta.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#2116](https://github.com/contentful/forma-36/pull/2116) [`7efcc111`](https://github.com/contentful/forma-36/commit/7efcc111878fd22085f9717dc4d708b721fc20f3) Thanks [@mshaaban0](https://github.com/mshaaban0)! - feat: allow passing custom icons to autocomplete
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies []:
12
+ - @contentful/f36-button@4.11.0-beta.0
13
+ - @contentful/f36-forms@4.11.0-beta.0
14
+ - @contentful/f36-icons@4.11.0-beta.0
15
+ - @contentful/f36-popover@4.11.0-beta.0
16
+ - @contentful/f36-skeleton@4.11.0-beta.0
17
+ - @contentful/f36-typography@4.11.0-beta.0
18
+ - @contentful/f36-utils@4.11.0-beta.0
19
+ - @contentful/f36-core@4.11.0-beta.0
20
+
21
+ ## 4.10.5
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies [[`32cac8e8`](https://github.com/contentful/forma-36/commit/32cac8e8bdeedfe29b36bc6025eec11607c93da8)]:
26
+ - @contentful/f36-icons@4.10.5
27
+ - @contentful/f36-popover@4.10.5
28
+ - @contentful/f36-button@4.10.5
29
+ - @contentful/f36-forms@4.10.5
30
+ - @contentful/f36-skeleton@4.10.5
31
+ - @contentful/f36-typography@4.10.5
32
+ - @contentful/f36-utils@4.10.5
33
+ - @contentful/f36-core@4.10.5
34
+
35
+ ## 4.10.4
36
+
37
+ ### Patch Changes
38
+
39
+ - [#2093](https://github.com/contentful/forma-36/pull/2093) [`52cce145`](https://github.com/contentful/forma-36/commit/52cce145fa2d7d2a4d9a7ff9591beca862317799) Thanks [@Lelith](https://github.com/Lelith)! - Enable controlling the dropdown menu open and close state after select with new property "closeAfterSelect"
40
+
41
+ - Updated dependencies []:
42
+ - @contentful/f36-button@4.10.4
43
+ - @contentful/f36-forms@4.10.4
44
+ - @contentful/f36-icons@4.10.4
45
+ - @contentful/f36-popover@4.10.4
46
+ - @contentful/f36-skeleton@4.10.4
47
+ - @contentful/f36-typography@4.10.4
48
+ - @contentful/f36-utils@4.10.4
49
+ - @contentful/f36-core@4.10.4
50
+
3
51
  ## 4.10.3
4
52
 
5
53
  ### Patch Changes
package/README.mdx CHANGED
@@ -59,6 +59,8 @@ This is possible by using the `renderItem` prop and the `getStringMatch` utility
59
59
 
60
60
  ### Selecting multiple items
61
61
 
62
+ It is also possible to use the Autocomplete as multiselect. To improve the user experience, you can keep the dropdown open after selection by setting the "closeAfterSelect" property to false.
63
+
62
64
  ```jsx file=./examples/AutocompleteMultiSelectionExample.tsx
63
65
 
64
66
  ```
@@ -74,6 +76,14 @@ Besides the correct shape of the object the Autocomplete component needs to rece
74
76
 
75
77
  ```
76
78
 
79
+ ### Fully controlled selection from outside
80
+
81
+ In order to use proper form validation you need to be able to control the actual input field from the autocomplete, because the search query value is not the actual selection. This is done via the selectedItem property.
82
+
83
+ ```jsx file=./examples/ControlledAutocomplete.tsx
84
+
85
+ ```
86
+
77
87
  ### Error validation with FormControl
78
88
 
79
89
  ```jsx file=./examples/AutocompleteWithErrorValidationExample.tsx
@@ -86,6 +96,14 @@ Besides the correct shape of the object the Autocomplete component needs to rece
86
96
 
87
97
  ```
88
98
 
99
+ ### Custom icon
100
+
101
+ Pass a custom icon to the text input, example: to indicate a search input
102
+
103
+ ```jsx file=./examples/CustomIcon.tsx
104
+
105
+ ```
106
+
89
107
  ## Props (API reference)
90
108
 
91
109
  <PropsTable of="Autocomplete" />
package/dist/main.js CHANGED
@@ -136,7 +136,9 @@ $26b30f0765231b47$var$HighlightedItem.displayName = 'HighlightedItem';
136
136
 
137
137
 
138
138
  function $56e6e764f18116b7$var$_Autocomplete(props, ref) {
139
- const { id: id , className: className , clearAfterSelect: clearAfterSelect = false , defaultValue: defaultValue = '' , selectedItem: selectedItem1 , items: items , onInputValueChange: onInputValueChange , onSelectItem: onSelectItem , renderItem: renderItem , itemToString: itemToString = (item)=>item
139
+ const { id: id , className: className , clearAfterSelect: clearAfterSelect = false , closeAfterSelect: closeAfterSelect = true , defaultValue: defaultValue = '' , selectedItem: selectedItem1 , items: items , onInputValueChange: onInputValueChange , onSelectItem: onSelectItem , renderItem: renderItem , icon: icon = /*#__PURE__*/ ($parcel$interopDefault($hVoOH$react)).createElement($hVoOH$contentfulf36icons.ChevronDownIcon, {
140
+ variant: "muted"
141
+ }) , itemToString: itemToString = (item)=>item
140
142
  , isInvalid: isInvalid , isDisabled: isDisabled , isRequired: isRequired , isReadOnly: isReadOnly , noMatchesMessage: noMatchesMessage = 'No matches found' , placeholder: placeholder = 'Search' , inputRef: inputRef , toggleRef: toggleRef , listRef: listRef , listWidth: listWidth = 'auto' , listMaxHeight: listMaxHeight = 180 , isGrouped: isGrouped = false , isLoading: isLoading = false , usePortal: usePortal = false , testId: testId = 'cf-autocomplete' } = props;
141
143
  const styles = $e938248654439d1d$export$71b73d9f7d678746(listMaxHeight);
142
144
  const [inputValue1, setInputValue] = $hVoOH$react.useState(defaultValue);
@@ -173,6 +175,7 @@ function $56e6e764f18116b7$var$_Autocomplete(props, ref) {
173
175
  case $hVoOH$downshift.useCombobox.stateChangeTypes.ItemClick:
174
176
  if (selectedItem) onSelectItem(selectedItem);
175
177
  if (clearAfterSelect) handleInputValueChange('');
178
+ if (!closeAfterSelect) toggleMenu();
176
179
  break;
177
180
  default:
178
181
  break;
@@ -221,16 +224,12 @@ function $56e6e764f18116b7$var$_Autocomplete(props, ref) {
221
224
  }), /*#__PURE__*/ ($parcel$interopDefault($hVoOH$react)).createElement($hVoOH$contentfulf36button.IconButton, {
222
225
  ...toggleProps,
223
226
  ref: $hVoOH$contentfulf36core.mergeRefs(toggleProps.ref, toggleRef),
224
- "aria-label": "toggle menu",
227
+ "aria-label": inputValue1 ? 'Clear' : 'Show list',
225
228
  className: styles.toggleButton,
226
229
  variant: "transparent",
227
230
  icon: inputValue1 ? /*#__PURE__*/ ($parcel$interopDefault($hVoOH$react)).createElement($hVoOH$contentfulf36icons.CloseIcon, {
228
- "aria-label": "Clear",
229
231
  variant: "muted"
230
- }) : /*#__PURE__*/ ($parcel$interopDefault($hVoOH$react)).createElement($hVoOH$contentfulf36icons.ChevronDownIcon, {
231
- "aria-label": "Show list",
232
- variant: "muted"
233
- }),
232
+ }) : icon,
234
233
  onClick: ()=>{
235
234
  if (inputValue1) handleInputValueChange('');
236
235
  else toggleMenu();
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/autocomplete/src/index.ts","packages/components/autocomplete/src/Autocomplete.tsx","packages/components/autocomplete/src/AutocompleteItems.tsx","packages/components/autocomplete/src/Autocomplete.styles.ts"],"sourcesContent":["export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n","import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport { mergeRefs } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport type { TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } 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 * 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 * This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n */\n placeholder?: string;\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\nfunction _Autocomplete<ItemType>(\n props: AutocompleteProps<ItemType>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n id,\n className,\n clearAfterSelect = false,\n defaultValue = '',\n selectedItem,\n items,\n onInputValueChange,\n onSelectItem,\n renderItem,\n itemToString = (item: ItemType) => (item as unknown) as string,\n isInvalid,\n isDisabled,\n isRequired,\n isReadOnly,\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 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={() => {\n if (!isOpen) {\n toggleMenu();\n }\n }}\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=\"toggle menu\"\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n inputValue ? (\n <CloseIcon aria-label=\"Clear\" variant=\"muted\" />\n ) : (\n <ChevronDownIcon aria-label=\"Show list\" variant=\"muted\" />\n )\n }\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 <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 </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\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';\n\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { Text } from '@contentful/f36-typography';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\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});\n"],"names":["Autocomplete","AutocompleteProps","React","useCallback","useState","useCombobox","mergeRefs","CommonProps","ExpandProps","IconButton","TextInput","TextInputProps","CloseIcon","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","SectionHeading","AutocompleteItems","getAutocompleteStyles","GenericGroupType","groupTitle","options","ItemType","Pick","items","isGrouped","onInputValueChange","value","onSelectItem","item","selectedItem","renderItem","inputValue","ReactNode","itemToString","clearAfterSelect","placeholder","noMatchesMessage","inputRef","Ref","HTMLInputElement","toggleRef","HTMLButtonElement","listRef","HTMLUListElement","listWidth","listMaxHeight","isLoading","usePortal","_Autocomplete","props","ref","HTMLDivElement","id","className","defaultValue","isInvalid","isDisabled","isRequired","isReadOnly","testId","GroupType","styles","setInputValue","handleInputValueChange","handleNativeChangeEvent","event","ChangeEvent","HTMLTextAreaElement","target","flattenItems","isUsingGroups","reduce","acc","group","isShowingNoMatches","every","length","getComboboxProps","getInputProps","getItemProps","getMenuProps","getToggleButtonProps","highlightedIndex","isOpen","toggleMenu","type","onStateChange","stateChangeTypes","InputKeyDownEnter","ItemClick","_labelledby","_inputId","inputProps","comboboxProps","toggleProps","menuProps","elementStartIndex","autocomplete","combobox","inputField","onChange","toggleButton","content","Array","map","_","index","disabled","noMatchesTitle","render","ListItemLoadingState","forwardRef","T","ReturnType","HTMLAttributes","getStringMatch","Text","UseComboboxGetItemPropsOptions","AutocompleteItemsProps","HTMLLIElement","list","itemIndex","itemProps","highlighted","displayName","HighlightedItem","before","match","after","tokens","paddingRight","spacingXl","textOverflow","whiteSpace","position","top","right","zIndex","padding","spacing2Xs","height","overflow","maxHeight","listStyle","spacingXs","margin","spacingM","lineHeight","lineHeightM","color","gray500","display","wordBreak","cursor","hyphens","backgroundColor","gray100","gray200"],"version":3,"file":"main.js.map"}
1
+ {"mappings":"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","sources":["packages/components/autocomplete/src/index.ts","packages/components/autocomplete/src/Autocomplete.tsx","packages/components/autocomplete/src/AutocompleteItems.tsx","packages/components/autocomplete/src/Autocomplete.styles.ts"],"sourcesContent":["export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n","import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport { mergeRefs } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport type { TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } 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 * 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\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 renderItem,\n icon = <ChevronDownIcon variant=\"muted\" />,\n itemToString = (item: ItemType) => (item as unknown) as string,\n isInvalid,\n isDisabled,\n isRequired,\n isReadOnly,\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={() => {\n if (!isOpen) {\n toggleMenu();\n }\n }}\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 <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 </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\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';\n\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { Text } from '@contentful/f36-typography';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\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});\n"],"names":["Autocomplete","AutocompleteProps","React","useCallback","useState","useCombobox","mergeRefs","CommonProps","ExpandProps","IconButton","TextInput","TextInputProps","CloseIcon","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","SectionHeading","AutocompleteItems","getAutocompleteStyles","GenericGroupType","groupTitle","options","ItemType","Pick","items","icon","ReactElement","isGrouped","onInputValueChange","value","onSelectItem","item","selectedItem","renderItem","inputValue","ReactNode","itemToString","clearAfterSelect","closeAfterSelect","placeholder","noMatchesMessage","inputRef","Ref","HTMLInputElement","toggleRef","HTMLButtonElement","listRef","HTMLUListElement","listWidth","listMaxHeight","isLoading","usePortal","_Autocomplete","props","ref","HTMLDivElement","id","className","defaultValue","isInvalid","isDisabled","isRequired","isReadOnly","testId","GroupType","styles","setInputValue","handleInputValueChange","handleNativeChangeEvent","event","ChangeEvent","HTMLTextAreaElement","target","flattenItems","isUsingGroups","reduce","acc","group","isShowingNoMatches","every","length","getComboboxProps","getInputProps","getItemProps","getMenuProps","getToggleButtonProps","highlightedIndex","isOpen","toggleMenu","type","onStateChange","stateChangeTypes","InputKeyDownEnter","ItemClick","_labelledby","_inputId","inputProps","comboboxProps","toggleProps","menuProps","elementStartIndex","autocomplete","combobox","inputField","onChange","toggleButton","content","Array","map","_","index","disabled","noMatchesTitle","render","ListItemLoadingState","forwardRef","T","ReturnType","HTMLAttributes","getStringMatch","Text","UseComboboxGetItemPropsOptions","AutocompleteItemsProps","HTMLLIElement","list","itemIndex","itemProps","highlighted","displayName","HighlightedItem","before","match","after","tokens","paddingRight","spacingXl","textOverflow","whiteSpace","position","top","right","zIndex","padding","spacing2Xs","height","overflow","maxHeight","listStyle","spacingXs","margin","spacingM","lineHeight","lineHeightM","color","gray500","display","wordBreak","cursor","hyphens","backgroundColor","gray100","gray200"],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -4,7 +4,7 @@ import {useCombobox as $7oe8x$useCombobox} from "downshift";
4
4
  import {mergeRefs as $7oe8x$mergeRefs} from "@contentful/f36-core";
5
5
  import {IconButton as $7oe8x$IconButton} from "@contentful/f36-button";
6
6
  import {TextInput as $7oe8x$TextInput} from "@contentful/f36-forms";
7
- import {CloseIcon as $7oe8x$CloseIcon, ChevronDownIcon as $7oe8x$ChevronDownIcon} from "@contentful/f36-icons";
7
+ import {ChevronDownIcon as $7oe8x$ChevronDownIcon, CloseIcon as $7oe8x$CloseIcon} from "@contentful/f36-icons";
8
8
  import {SkeletonContainer as $7oe8x$SkeletonContainer, SkeletonBodyText as $7oe8x$SkeletonBodyText} from "@contentful/f36-skeleton";
9
9
  import {Popover as $7oe8x$Popover} from "@contentful/f36-popover";
10
10
  import {Subheading as $7oe8x$Subheading, SectionHeading as $7oe8x$SectionHeading, Text as $7oe8x$Text} from "@contentful/f36-typography";
@@ -128,7 +128,9 @@ $641c6dc49f14cfd8$var$HighlightedItem.displayName = 'HighlightedItem';
128
128
 
129
129
 
130
130
  function $7cd5ba9838c72bf9$var$_Autocomplete(props, ref) {
131
- const { id: id , className: className , clearAfterSelect: clearAfterSelect = false , defaultValue: defaultValue = '' , selectedItem: selectedItem1 , items: items , onInputValueChange: onInputValueChange , onSelectItem: onSelectItem , renderItem: renderItem , itemToString: itemToString = (item)=>item
131
+ const { id: id , className: className , clearAfterSelect: clearAfterSelect = false , closeAfterSelect: closeAfterSelect = true , defaultValue: defaultValue = '' , selectedItem: selectedItem1 , items: items , onInputValueChange: onInputValueChange , onSelectItem: onSelectItem , renderItem: renderItem , icon: icon = /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$ChevronDownIcon, {
132
+ variant: "muted"
133
+ }) , itemToString: itemToString = (item)=>item
132
134
  , isInvalid: isInvalid , isDisabled: isDisabled , isRequired: isRequired , isReadOnly: isReadOnly , noMatchesMessage: noMatchesMessage = 'No matches found' , placeholder: placeholder = 'Search' , inputRef: inputRef , toggleRef: toggleRef , listRef: listRef , listWidth: listWidth = 'auto' , listMaxHeight: listMaxHeight = 180 , isGrouped: isGrouped = false , isLoading: isLoading = false , usePortal: usePortal = false , testId: testId = 'cf-autocomplete' } = props;
133
135
  const styles = $b76be67e84921f58$export$71b73d9f7d678746(listMaxHeight);
134
136
  const [inputValue1, setInputValue] = $7oe8x$useState(defaultValue);
@@ -165,6 +167,7 @@ function $7cd5ba9838c72bf9$var$_Autocomplete(props, ref) {
165
167
  case $7oe8x$useCombobox.stateChangeTypes.ItemClick:
166
168
  if (selectedItem) onSelectItem(selectedItem);
167
169
  if (clearAfterSelect) handleInputValueChange('');
170
+ if (!closeAfterSelect) toggleMenu();
168
171
  break;
169
172
  default:
170
173
  break;
@@ -213,16 +216,12 @@ function $7cd5ba9838c72bf9$var$_Autocomplete(props, ref) {
213
216
  }), /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$IconButton, {
214
217
  ...toggleProps,
215
218
  ref: $7oe8x$mergeRefs(toggleProps.ref, toggleRef),
216
- "aria-label": "toggle menu",
219
+ "aria-label": inputValue1 ? 'Clear' : 'Show list',
217
220
  className: styles.toggleButton,
218
221
  variant: "transparent",
219
222
  icon: inputValue1 ? /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$CloseIcon, {
220
- "aria-label": "Clear",
221
223
  variant: "muted"
222
- }) : /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$ChevronDownIcon, {
223
- "aria-label": "Show list",
224
- variant: "muted"
225
- }),
224
+ }) : icon,
226
225
  onClick: ()=>{
227
226
  if (inputValue1) handleInputValueChange('');
228
227
  else toggleMenu();
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/autocomplete/src/index.ts","packages/components/autocomplete/src/Autocomplete.tsx","packages/components/autocomplete/src/AutocompleteItems.tsx","packages/components/autocomplete/src/Autocomplete.styles.ts"],"sourcesContent":["export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n","import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport { mergeRefs } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport type { TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } 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 * 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 * This is the value will be passed to the `placeholder` prop of the input.\n * @default \"Search\"\n */\n placeholder?: string;\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\nfunction _Autocomplete<ItemType>(\n props: AutocompleteProps<ItemType>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n id,\n className,\n clearAfterSelect = false,\n defaultValue = '',\n selectedItem,\n items,\n onInputValueChange,\n onSelectItem,\n renderItem,\n itemToString = (item: ItemType) => (item as unknown) as string,\n isInvalid,\n isDisabled,\n isRequired,\n isReadOnly,\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 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={() => {\n if (!isOpen) {\n toggleMenu();\n }\n }}\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=\"toggle menu\"\n className={styles.toggleButton}\n variant=\"transparent\"\n icon={\n inputValue ? (\n <CloseIcon aria-label=\"Clear\" variant=\"muted\" />\n ) : (\n <ChevronDownIcon aria-label=\"Show list\" variant=\"muted\" />\n )\n }\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 <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 </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\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';\n\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { Text } from '@contentful/f36-typography';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\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});\n"],"names":["Autocomplete","AutocompleteProps","React","useCallback","useState","useCombobox","mergeRefs","CommonProps","ExpandProps","IconButton","TextInput","TextInputProps","CloseIcon","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","SectionHeading","AutocompleteItems","getAutocompleteStyles","GenericGroupType","groupTitle","options","ItemType","Pick","items","isGrouped","onInputValueChange","value","onSelectItem","item","selectedItem","renderItem","inputValue","ReactNode","itemToString","clearAfterSelect","placeholder","noMatchesMessage","inputRef","Ref","HTMLInputElement","toggleRef","HTMLButtonElement","listRef","HTMLUListElement","listWidth","listMaxHeight","isLoading","usePortal","_Autocomplete","props","ref","HTMLDivElement","id","className","defaultValue","isInvalid","isDisabled","isRequired","isReadOnly","testId","GroupType","styles","setInputValue","handleInputValueChange","handleNativeChangeEvent","event","ChangeEvent","HTMLTextAreaElement","target","flattenItems","isUsingGroups","reduce","acc","group","isShowingNoMatches","every","length","getComboboxProps","getInputProps","getItemProps","getMenuProps","getToggleButtonProps","highlightedIndex","isOpen","toggleMenu","type","onStateChange","stateChangeTypes","InputKeyDownEnter","ItemClick","_labelledby","_inputId","inputProps","comboboxProps","toggleProps","menuProps","elementStartIndex","autocomplete","combobox","inputField","onChange","toggleButton","content","Array","map","_","index","disabled","noMatchesTitle","render","ListItemLoadingState","forwardRef","T","ReturnType","HTMLAttributes","getStringMatch","Text","UseComboboxGetItemPropsOptions","AutocompleteItemsProps","HTMLLIElement","list","itemIndex","itemProps","highlighted","displayName","HighlightedItem","before","match","after","tokens","paddingRight","spacingXl","textOverflow","whiteSpace","position","top","right","zIndex","padding","spacing2Xs","height","overflow","maxHeight","listStyle","spacingXs","margin","spacingM","lineHeight","lineHeightM","color","gray500","display","wordBreak","cursor","hyphens","backgroundColor","gray100","gray200"],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/components/autocomplete/src/index.ts","packages/components/autocomplete/src/Autocomplete.tsx","packages/components/autocomplete/src/AutocompleteItems.tsx","packages/components/autocomplete/src/Autocomplete.styles.ts"],"sourcesContent":["export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n","import React, { useCallback, useState } from 'react';\nimport { cx } from 'emotion';\nimport { useCombobox } from 'downshift';\n\nimport { mergeRefs } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { IconButton } from '@contentful/f36-button';\nimport { TextInput } from '@contentful/f36-forms';\nimport type { TextInputProps } from '@contentful/f36-forms';\nimport { CloseIcon, ChevronDownIcon } from '@contentful/f36-icons';\nimport { SkeletonContainer, SkeletonBodyText } 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 * 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\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 renderItem,\n icon = <ChevronDownIcon variant=\"muted\" />,\n itemToString = (item: ItemType) => (item as unknown) as string,\n isInvalid,\n isDisabled,\n isRequired,\n isReadOnly,\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={() => {\n if (!isOpen) {\n toggleMenu();\n }\n }}\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 <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 </Popover>\n </div>\n );\n}\n\nconst ListItemLoadingState = () => {\n return (\n <SkeletonContainer svgHeight={16}>\n <SkeletonBodyText numberOfLines={1} />\n </SkeletonContainer>\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';\n\nimport { getStringMatch } from '@contentful/f36-utils';\nimport { Text } from '@contentful/f36-typography';\nimport { getAutocompleteStyles } from './Autocomplete.styles';\nimport type { UseComboboxGetItemPropsOptions } from 'downshift';\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});\n"],"names":["Autocomplete","AutocompleteProps","React","useCallback","useState","useCombobox","mergeRefs","CommonProps","ExpandProps","IconButton","TextInput","TextInputProps","CloseIcon","ChevronDownIcon","SkeletonContainer","SkeletonBodyText","Popover","Subheading","SectionHeading","AutocompleteItems","getAutocompleteStyles","GenericGroupType","groupTitle","options","ItemType","Pick","items","icon","ReactElement","isGrouped","onInputValueChange","value","onSelectItem","item","selectedItem","renderItem","inputValue","ReactNode","itemToString","clearAfterSelect","closeAfterSelect","placeholder","noMatchesMessage","inputRef","Ref","HTMLInputElement","toggleRef","HTMLButtonElement","listRef","HTMLUListElement","listWidth","listMaxHeight","isLoading","usePortal","_Autocomplete","props","ref","HTMLDivElement","id","className","defaultValue","isInvalid","isDisabled","isRequired","isReadOnly","testId","GroupType","styles","setInputValue","handleInputValueChange","handleNativeChangeEvent","event","ChangeEvent","HTMLTextAreaElement","target","flattenItems","isUsingGroups","reduce","acc","group","isShowingNoMatches","every","length","getComboboxProps","getInputProps","getItemProps","getMenuProps","getToggleButtonProps","highlightedIndex","isOpen","toggleMenu","type","onStateChange","stateChangeTypes","InputKeyDownEnter","ItemClick","_labelledby","_inputId","inputProps","comboboxProps","toggleProps","menuProps","elementStartIndex","autocomplete","combobox","inputField","onChange","toggleButton","content","Array","map","_","index","disabled","noMatchesTitle","render","ListItemLoadingState","forwardRef","T","ReturnType","HTMLAttributes","getStringMatch","Text","UseComboboxGetItemPropsOptions","AutocompleteItemsProps","HTMLLIElement","list","itemIndex","itemProps","highlighted","displayName","HighlightedItem","before","match","after","tokens","paddingRight","spacingXl","textOverflow","whiteSpace","position","top","right","zIndex","padding","spacing2Xs","height","overflow","maxHeight","listStyle","spacingXs","margin","spacingM","lineHeight","lineHeightM","color","gray500","display","wordBreak","cursor","hyphens","backgroundColor","gray100","gray200"],"version":3,"file":"module.js.map"}
package/dist/types.d.ts CHANGED
@@ -11,6 +11,10 @@ export interface AutocompleteProps<ItemType> extends CommonProps, Pick<TextInput
11
11
  * This can either be a plain list of items or a list of groups of items.
12
12
  */
13
13
  items: ItemType[] | GenericGroupType<ItemType>[];
14
+ /**
15
+ * Set a custom icon for the text input
16
+ */
17
+ icon?: React.ReactElement;
14
18
  /**
15
19
  * Tells if the item is a object with groups
16
20
  */
@@ -45,6 +49,11 @@ export interface AutocompleteProps<ItemType> extends CommonProps, Pick<TextInput
45
49
  * @default false
46
50
  */
47
51
  clearAfterSelect?: boolean;
52
+ /**
53
+ * If this is set to `false` the dropdown menu will stay open after selecting an item
54
+ * @default true
55
+ */
56
+ closeAfterSelect?: boolean;
48
57
  /**
49
58
  * This is the value will be passed to the `placeholder` prop of the input.
50
59
  * @default "Search"
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;AEiBA,2BAAkC,QAAQ;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB;AAGD,mCAAmC,QAAQ,CACzC,SAAQ,WAAW,EACjB,IAAI,CACF,cAAc,EACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,IAAI,GACJ,cAAc,CACjB;IACH;;;OAGG;IACH,KAAK,EAAE,QAAQ,EAAE,GAAG,iBAAiB,QAAQ,CAAC,EAAE,CAAC;IAEjD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC;IAExB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,SAAS,CAAC;IACrE;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,+BAAuB,QAAQ,EAC7B,KAAK,EAAE,kBAAkB,QAAQ,CAAC,EAClC,GAAG,EAAE,MAAM,GAAG,CAAC,cAAc,CAAC,eAoP/B;AAkBD;;;;GAIG;AACH,OAAO,MAAM;UAEH,MAAM,GAAG,CAAC,cAAc,CAAC;MAE9B,WAAW,oBAAoB,CAAC,CAAC","sources":["packages/components/autocomplete/src/src/Autocomplete.styles.ts","packages/components/autocomplete/src/src/AutocompleteItems.tsx","packages/components/autocomplete/src/src/Autocomplete.tsx","packages/components/autocomplete/src/src/index.ts","packages/components/autocomplete/src/index.ts"],"sourcesContent":[null,null,null,null,"export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;AEiBA,2BAAkC,QAAQ;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB;AAGD,mCAAmC,QAAQ,CACzC,SAAQ,WAAW,EACjB,IAAI,CACF,cAAc,EACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,IAAI,GACJ,cAAc,CACjB;IACH;;;OAGG;IACH,KAAK,EAAE,QAAQ,EAAE,GAAG,iBAAiB,QAAQ,CAAC,EAAE,CAAC;IAEjD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,YAAY,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC;IAExB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,KAAK,MAAM,SAAS,CAAC;IACrE;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM,CAAC;IAC1C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,+BAAuB,QAAQ,EAC7B,KAAK,EAAE,kBAAkB,QAAQ,CAAC,EAClC,GAAG,EAAE,MAAM,GAAG,CAAC,cAAc,CAAC,eAmP/B;AAkBD;;;;GAIG;AACH,OAAO,MAAM;UAEH,MAAM,GAAG,CAAC,cAAc,CAAC;MAE9B,WAAW,oBAAoB,CAAC,CAAC","sources":["packages/components/autocomplete/src/src/Autocomplete.styles.ts","packages/components/autocomplete/src/src/AutocompleteItems.tsx","packages/components/autocomplete/src/src/Autocomplete.tsx","packages/components/autocomplete/src/src/index.ts","packages/components/autocomplete/src/index.ts"],"sourcesContent":[null,null,null,null,"export { Autocomplete } from './Autocomplete';\nexport type { AutocompleteProps } from './Autocomplete';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
1
  {
2
2
  "name": "@contentful/f36-autocomplete",
3
- "version": "4.10.3",
3
+ "version": "4.11.0-beta.0",
4
4
  "description": "Forma 36: Autocomplete component",
5
5
  "scripts": {
6
6
  "build": "parcel build"
7
7
  },
8
8
  "dependencies": {
9
9
  "@babel/runtime": "^7.6.2",
10
- "@contentful/f36-button": "^4.10.3",
11
- "@contentful/f36-core": "^4.10.3",
12
- "@contentful/f36-forms": "^4.10.3",
13
- "@contentful/f36-icons": "^4.10.3",
14
- "@contentful/f36-popover": "^4.10.3",
15
- "@contentful/f36-skeleton": "^4.10.3",
10
+ "@contentful/f36-button": "^4.11.0-beta.0",
11
+ "@contentful/f36-core": "^4.11.0-beta.0",
12
+ "@contentful/f36-forms": "^4.11.0-beta.0",
13
+ "@contentful/f36-icons": "^4.11.0-beta.0",
14
+ "@contentful/f36-popover": "^4.11.0-beta.0",
15
+ "@contentful/f36-skeleton": "^4.11.0-beta.0",
16
16
  "@contentful/f36-tokens": "^4.0.1",
17
- "@contentful/f36-typography": "^4.10.3",
18
- "@contentful/f36-utils": "^4.10.3",
17
+ "@contentful/f36-typography": "^4.11.0-beta.0",
18
+ "@contentful/f36-utils": "^4.11.0-beta.0",
19
19
  "downshift": "^6.1.7",
20
20
  "emotion": "^10.0.17"
21
21
  },