@contentful/f36-autocomplete - npm Package Compare versions

Comparing version 4.0.1-next-v4-10330.2454 to 4.0.1-next-v4-10345.2455

dist/main.js

@@ -10,2 +10,3 @@ var $hVoOH$emotion = require("emotion");
 var $hVoOH$contentfulf36popover = require("@contentful/f36-popover");
+var $hVoOH$contentfulf36typography = require("@contentful/f36-typography");
 var $hVoOH$contentfulf36utils = require("@contentful/f36-utils");
@@ -34,2 +35,5 @@ var $hVoOH$contentfulf36tokens = require("@contentful/f36-tokens");
 
+
+
+
 const $e938248654439d1d$export$71b73d9f7d678746 = (listMaxHeight)=>({
@@ -48,9 +52,15 @@ autocomplete: /*#__PURE__*/ $hVoOH$emotion.css({
         }),
+        content: /*#__PURE__*/ $hVoOH$emotion.css({
+            overflow: 'auto',
+            maxHeight: `${listMaxHeight}px`
+        }),
         list: /*#__PURE__*/ $hVoOH$emotion.css({
-            overflowY: 'auto',
             listStyle: 'none',
             padding: `${$parcel$interopDefault($hVoOH$contentfulf36tokens).spacingXs} 0`,
-            margin: 0,
-            maxHeight: `${listMaxHeight}px`
+            margin: 0
         }),
+        groupTitle: /*#__PURE__*/ $hVoOH$emotion.css({
+            padding: `${$parcel$interopDefault($hVoOH$contentfulf36tokens).spacingXs} ${$parcel$interopDefault($hVoOH$contentfulf36tokens).spacingM}`,
+            lineHeight: $parcel$interopDefault($hVoOH$contentfulf36tokens).lineHeightM
+        }),
         item: /*#__PURE__*/ $hVoOH$emotion.css({
@@ -81,5 +91,38 @@ display: 'block',
 
+function $26b30f0765231b47$export$4db5c29873bb228f(props) {
+    const { items: items , elementStartIndex: elementStartIndex , highlightedIndex: highlightedIndex , getItemProps: getItemProps , renderItem: renderItem , inputValue: inputValue , listMaxHeight: listMaxHeight = 180  } = props;
+    const styles = $e938248654439d1d$export$71b73d9f7d678746(listMaxHeight);
+    return(/*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("ul", {
+        className: styles.list,
+        "data-test-id": "cf-autocomplete-list"
+    }, items.map((item, index)=>{
+        const itemIndex = elementStartIndex + index;
+        const itemProps = getItemProps({
+            item: item,
+            index: itemIndex
+        });
+        return(/*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("li", {
+            ...itemProps,
+            key: itemIndex,
+            className: $hVoOH$emotion.cx([
+                styles.item,
+                highlightedIndex === itemIndex && styles.highlighted
+            ]),
+            "data-test-id": `cf-autocomplete-list-item-${itemIndex}`
+        }, renderItem ? renderItem(item, inputValue) : typeof item === 'string' ? /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($26b30f0765231b47$var$HighlightedItem, {
+            item: item,
+            inputValue: inputValue
+        }) : item));
+    })));
+}
+function $26b30f0765231b47$var$HighlightedItem({ item: item , inputValue: inputValue  }) {
+    const { before: before , match: match , after: after  } = $hVoOH$contentfulf36utils.getStringMatch(item, inputValue);
+    return(/*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($parcel$interopDefault($hVoOH$react).Fragment, null, before, /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("b", null, match), after));
+}
+
+
+
 function $56e6e764f18116b7$var$_Autocomplete(props, ref) {
     const { id: id , className: className , clearAfterSelect: clearAfterSelect = false , defaultValue: defaultValue = '' , items: items , onInputValueChange: onInputValueChange , onSelectItem: onSelectItem , renderItem: renderItem , itemToString: itemToString = (item)=>item
-     , isInvalid: isInvalid , isDisabled: isDisabled , isRequired: isRequired , isReadOnly: isReadOnly , noMatchesMessage: noMatchesMessage = 'No matches' , placeholder: placeholder = 'Search' , inputRef: inputRef , toggleRef: toggleRef , listRef: listRef , listWidth: listWidth = 'auto' , listMaxHeight: listMaxHeight = 180 , isLoading: isLoading = false , testId: testId = 'cf-autocomplete'  } = props;
+     , isInvalid: isInvalid , isDisabled: isDisabled , isRequired: isRequired , isReadOnly: isReadOnly , noMatchesMessage: noMatchesMessage = 'No matches' , placeholder: placeholder = 'Search' , inputRef: inputRef , toggleRef: toggleRef , listRef: listRef , listWidth: listWidth = 'auto' , listMaxHeight: listMaxHeight = 180 , isGrouped: isGrouped = false , isLoading: isLoading = false , testId: testId = 'cf-autocomplete'  } = props;
     const styles = $e938248654439d1d$export$71b73d9f7d678746(listMaxHeight);
@@ -93,4 +136,9 @@ const [inputValue, setInputValue] = $hVoOH$react.useState(defaultValue);
     ]);
+    const flattenItems = $56e6e764f18116b7$var$isUsingGroups(isGrouped, items) ? items.reduce((acc, group)=>[
+            ...acc,
+            ...group.options
+        ]
+    , []) : items;
     const { getComboboxProps: getComboboxProps , getInputProps: getInputProps , getItemProps: getItemProps , getMenuProps: getMenuProps , getToggleButtonProps: getToggleButtonProps , highlightedIndex: highlightedIndex , isOpen: isOpen , toggleMenu: toggleMenu  } = $hVoOH$downshift.useCombobox({
-        items: items,
+        items: flattenItems,
         inputValue: inputValue,
@@ -117,2 +165,3 @@ itemToString: itemToString,
     const menuProps = getMenuProps();
+    let elementStartIndex = 0;
     return(/*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("div", {
@@ -122,5 +171,3 @@ "data-test-id": testId,
         ref: ref
-    }, /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($hVoOH$contentfulf36popover.Popover // eslint-disable-next-line jsx-a11y/no-autofocus
-    , {
-        autoFocus: false,
+    }, /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($hVoOH$contentfulf36popover.Popover, {
         usePortal: false,
@@ -134,2 +181,5 @@ isOpen: isOpen,
         ...inputProps,
+        onFocus: ()=>{
+            if (!isOpen) toggleMenu();
+        },
         id: id,
@@ -160,39 +210,43 @@ isInvalid: isInvalid,
         size: "small"
-    }))), /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($hVoOH$contentfulf36popover.Popover.Content, null, /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("ul", {
+    }))), /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($hVoOH$contentfulf36popover.Popover.Content, {
         ...menuProps,
         ref: $hVoOH$contentfulf36core.mergeRefs(menuProps.ref, listRef),
-        className: styles.list,
-        "data-test-id": "cf-autocomplete-list"
+        className: styles.content,
+        testId: "cf-autocomplete-container"
     }, isLoading && [
         ...Array(3)
-    ].map((_, index)=>/*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("li", {
+    ].map((_, index)=>/*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("div", {
             key: index,
             className: $hVoOH$emotion.cx(styles.item, styles.disabled)
         }, /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($56e6e764f18116b7$var$ListItemLoadingState, null))
-    ), !isLoading && items.length === 0 && /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("li", {
+    ), !isLoading && items.length === 0 && /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("div", {
         className: $hVoOH$emotion.cx(styles.item, styles.disabled)
-    }, noMatchesMessage), !isLoading && items.map((item, index)=>{
-        const itemProps = getItemProps({
-            item: item,
-            index: index
-        });
-        return(/*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("li", {
-            ...itemProps,
+    }, noMatchesMessage), !isLoading && $56e6e764f18116b7$var$isUsingGroups(isGrouped, items) && items.map((group, index)=>{
+        const render = /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("div", {
+            key: index
+        }, /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($hVoOH$contentfulf36typography.SectionHeading, {
             key: index,
-            className: $hVoOH$emotion.cx([
-                styles.item,
-                highlightedIndex === index && styles.highlighted
-            ]),
-            "data-test-id": `cf-autocomplete-list-item-${index}`
-        }, renderItem ? renderItem(item, inputValue) : typeof item === 'string' ? /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($56e6e764f18116b7$var$HighlightedItem, {
-            item: item,
-            inputValue: inputValue
-        }) : item));
-    }))))));
+            "data-test-id": "cf-autocomplete-grouptitle",
+            marginBottom: "none",
+            className: styles.groupTitle
+        }, group.groupTitle), /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($26b30f0765231b47$export$4db5c29873bb228f, {
+            items: group.options,
+            highlightedIndex: highlightedIndex,
+            getItemProps: getItemProps,
+            renderItem: renderItem,
+            inputValue: inputValue,
+            elementStartIndex: elementStartIndex
+        }));
+        elementStartIndex += group.options.length;
+        return render;
+    }), !isLoading && !$56e6e764f18116b7$var$isUsingGroups(isGrouped, items) && /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($26b30f0765231b47$export$4db5c29873bb228f, {
+        items: items,
+        elementStartIndex: elementStartIndex,
+        highlightedIndex: highlightedIndex,
+        getItemProps: getItemProps,
+        renderItem: renderItem,
+        inputValue: inputValue
+    })))));
 }
-function $56e6e764f18116b7$var$HighlightedItem({ item: item , inputValue: inputValue  }) {
-    const { before: before , match: match , after: after  } = $hVoOH$contentfulf36utils.getStringMatch(item, inputValue);
-    return(/*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($parcel$interopDefault($hVoOH$react).Fragment, null, before, /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement("b", null, match), after));
-}
-function $56e6e764f18116b7$var$ListItemLoadingState() {
+const $56e6e764f18116b7$var$ListItemLoadingState = ()=>{
     return(/*#__PURE__*/ $parcel$interopDefault($hVoOH$react).createElement($hVoOH$contentfulf36skeleton.SkeletonContainer, {
@@ -203,2 +257,5 @@ svgHeight: 16
     })));
+}; // This is required to infer correct typings when differentiating groups and items
+function $56e6e764f18116b7$var$isUsingGroups(isGrouped, items) {
+    return isGrouped;
 }
@@ -205,0 +262,0 @@ const $56e6e764f18116b7$export$2f2b9559550c7bbc = /*#__PURE__*/ $parcel$interopDefault($hVoOH$react).forwardRef($56e6e764f18116b7$var$_Autocomplete);

dist/module.js

@@ -10,2 +10,3 @@ import {cx as $7oe8x$cx, css as $7oe8x$css} from "emotion";
 import {Popover as $7oe8x$Popover} from "@contentful/f36-popover";
+import {SectionHeading as $7oe8x$SectionHeading} from "@contentful/f36-typography";
 import {getStringMatch as $7oe8x$getStringMatch} from "@contentful/f36-utils";
@@ -26,2 +27,5 @@ import $7oe8x$contentfulf36tokens from "@contentful/f36-tokens";
 
+
+
+
 const $b76be67e84921f58$export$71b73d9f7d678746 = (listMaxHeight)=>({
@@ -40,9 +44,15 @@ autocomplete: /*#__PURE__*/ $7oe8x$css({
         }),
+        content: /*#__PURE__*/ $7oe8x$css({
+            overflow: 'auto',
+            maxHeight: `${listMaxHeight}px`
+        }),
         list: /*#__PURE__*/ $7oe8x$css({
-            overflowY: 'auto',
             listStyle: 'none',
             padding: `${$7oe8x$contentfulf36tokens.spacingXs} 0`,
-            margin: 0,
-            maxHeight: `${listMaxHeight}px`
+            margin: 0
         }),
+        groupTitle: /*#__PURE__*/ $7oe8x$css({
+            padding: `${$7oe8x$contentfulf36tokens.spacingXs} ${$7oe8x$contentfulf36tokens.spacingM}`,
+            lineHeight: $7oe8x$contentfulf36tokens.lineHeightM
+        }),
         item: /*#__PURE__*/ $7oe8x$css({
@@ -73,5 +83,38 @@ display: 'block',
 
+function $641c6dc49f14cfd8$export$4db5c29873bb228f(props) {
+    const { items: items , elementStartIndex: elementStartIndex , highlightedIndex: highlightedIndex , getItemProps: getItemProps , renderItem: renderItem , inputValue: inputValue , listMaxHeight: listMaxHeight = 180  } = props;
+    const styles = $b76be67e84921f58$export$71b73d9f7d678746(listMaxHeight);
+    return(/*#__PURE__*/ $7oe8x$react.createElement("ul", {
+        className: styles.list,
+        "data-test-id": "cf-autocomplete-list"
+    }, items.map((item, index)=>{
+        const itemIndex = elementStartIndex + index;
+        const itemProps = getItemProps({
+            item: item,
+            index: itemIndex
+        });
+        return(/*#__PURE__*/ $7oe8x$react.createElement("li", {
+            ...itemProps,
+            key: itemIndex,
+            className: $7oe8x$cx([
+                styles.item,
+                highlightedIndex === itemIndex && styles.highlighted
+            ]),
+            "data-test-id": `cf-autocomplete-list-item-${itemIndex}`
+        }, renderItem ? renderItem(item, inputValue) : typeof item === 'string' ? /*#__PURE__*/ $7oe8x$react.createElement($641c6dc49f14cfd8$var$HighlightedItem, {
+            item: item,
+            inputValue: inputValue
+        }) : item));
+    })));
+}
+function $641c6dc49f14cfd8$var$HighlightedItem({ item: item , inputValue: inputValue  }) {
+    const { before: before , match: match , after: after  } = $7oe8x$getStringMatch(item, inputValue);
+    return(/*#__PURE__*/ $7oe8x$react.createElement($7oe8x$react.Fragment, null, before, /*#__PURE__*/ $7oe8x$react.createElement("b", null, match), after));
+}
+
+
+
 function $7cd5ba9838c72bf9$var$_Autocomplete(props, ref) {
     const { id: id , className: className , clearAfterSelect: clearAfterSelect = false , defaultValue: defaultValue = '' , items: items , onInputValueChange: onInputValueChange , onSelectItem: onSelectItem , renderItem: renderItem , itemToString: itemToString = (item)=>item
-     , isInvalid: isInvalid , isDisabled: isDisabled , isRequired: isRequired , isReadOnly: isReadOnly , noMatchesMessage: noMatchesMessage = 'No matches' , placeholder: placeholder = 'Search' , inputRef: inputRef , toggleRef: toggleRef , listRef: listRef , listWidth: listWidth = 'auto' , listMaxHeight: listMaxHeight = 180 , isLoading: isLoading = false , testId: testId = 'cf-autocomplete'  } = props;
+     , isInvalid: isInvalid , isDisabled: isDisabled , isRequired: isRequired , isReadOnly: isReadOnly , noMatchesMessage: noMatchesMessage = 'No matches' , placeholder: placeholder = 'Search' , inputRef: inputRef , toggleRef: toggleRef , listRef: listRef , listWidth: listWidth = 'auto' , listMaxHeight: listMaxHeight = 180 , isGrouped: isGrouped = false , isLoading: isLoading = false , testId: testId = 'cf-autocomplete'  } = props;
     const styles = $b76be67e84921f58$export$71b73d9f7d678746(listMaxHeight);
@@ -85,4 +128,9 @@ const [inputValue, setInputValue] = $7oe8x$useState(defaultValue);
     ]);
+    const flattenItems = $7cd5ba9838c72bf9$var$isUsingGroups(isGrouped, items) ? items.reduce((acc, group)=>[
+            ...acc,
+            ...group.options
+        ]
+    , []) : items;
     const { getComboboxProps: getComboboxProps , getInputProps: getInputProps , getItemProps: getItemProps , getMenuProps: getMenuProps , getToggleButtonProps: getToggleButtonProps , highlightedIndex: highlightedIndex , isOpen: isOpen , toggleMenu: toggleMenu  } = $7oe8x$useCombobox({
-        items: items,
+        items: flattenItems,
         inputValue: inputValue,
@@ -109,2 +157,3 @@ itemToString: itemToString,
     const menuProps = getMenuProps();
+    let elementStartIndex = 0;
     return(/*#__PURE__*/ $7oe8x$react.createElement("div", {
@@ -114,5 +163,3 @@ "data-test-id": testId,
         ref: ref
-    }, /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$Popover // eslint-disable-next-line jsx-a11y/no-autofocus
-    , {
-        autoFocus: false,
+    }, /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$Popover, {
         usePortal: false,
@@ -126,2 +173,5 @@ isOpen: isOpen,
         ...inputProps,
+        onFocus: ()=>{
+            if (!isOpen) toggleMenu();
+        },
         id: id,
@@ -152,39 +202,43 @@ isInvalid: isInvalid,
         size: "small"
-    }))), /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$Popover.Content, null, /*#__PURE__*/ $7oe8x$react.createElement("ul", {
+    }))), /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$Popover.Content, {
         ...menuProps,
         ref: $7oe8x$mergeRefs(menuProps.ref, listRef),
-        className: styles.list,
-        "data-test-id": "cf-autocomplete-list"
+        className: styles.content,
+        testId: "cf-autocomplete-container"
     }, isLoading && [
         ...Array(3)
-    ].map((_, index)=>/*#__PURE__*/ $7oe8x$react.createElement("li", {
+    ].map((_, index)=>/*#__PURE__*/ $7oe8x$react.createElement("div", {
             key: index,
             className: $7oe8x$cx(styles.item, styles.disabled)
         }, /*#__PURE__*/ $7oe8x$react.createElement($7cd5ba9838c72bf9$var$ListItemLoadingState, null))
-    ), !isLoading && items.length === 0 && /*#__PURE__*/ $7oe8x$react.createElement("li", {
+    ), !isLoading && items.length === 0 && /*#__PURE__*/ $7oe8x$react.createElement("div", {
         className: $7oe8x$cx(styles.item, styles.disabled)
-    }, noMatchesMessage), !isLoading && items.map((item, index)=>{
-        const itemProps = getItemProps({
-            item: item,
-            index: index
-        });
-        return(/*#__PURE__*/ $7oe8x$react.createElement("li", {
-            ...itemProps,
+    }, noMatchesMessage), !isLoading && $7cd5ba9838c72bf9$var$isUsingGroups(isGrouped, items) && items.map((group, index)=>{
+        const render = /*#__PURE__*/ $7oe8x$react.createElement("div", {
+            key: index
+        }, /*#__PURE__*/ $7oe8x$react.createElement($7oe8x$SectionHeading, {
             key: index,
-            className: $7oe8x$cx([
-                styles.item,
-                highlightedIndex === index && styles.highlighted
-            ]),
-            "data-test-id": `cf-autocomplete-list-item-${index}`
-        }, renderItem ? renderItem(item, inputValue) : typeof item === 'string' ? /*#__PURE__*/ $7oe8x$react.createElement($7cd5ba9838c72bf9$var$HighlightedItem, {
-            item: item,
-            inputValue: inputValue
-        }) : item));
-    }))))));
+            "data-test-id": "cf-autocomplete-grouptitle",
+            marginBottom: "none",
+            className: styles.groupTitle
+        }, group.groupTitle), /*#__PURE__*/ $7oe8x$react.createElement($641c6dc49f14cfd8$export$4db5c29873bb228f, {
+            items: group.options,
+            highlightedIndex: highlightedIndex,
+            getItemProps: getItemProps,
+            renderItem: renderItem,
+            inputValue: inputValue,
+            elementStartIndex: elementStartIndex
+        }));
+        elementStartIndex += group.options.length;
+        return render;
+    }), !isLoading && !$7cd5ba9838c72bf9$var$isUsingGroups(isGrouped, items) && /*#__PURE__*/ $7oe8x$react.createElement($641c6dc49f14cfd8$export$4db5c29873bb228f, {
+        items: items,
+        elementStartIndex: elementStartIndex,
+        highlightedIndex: highlightedIndex,
+        getItemProps: getItemProps,
+        renderItem: renderItem,
+        inputValue: inputValue
+    })))));
 }
-function $7cd5ba9838c72bf9$var$HighlightedItem({ item: item , inputValue: inputValue  }) {
-    const { before: before , match: match , after: after  } = $7oe8x$getStringMatch(item, inputValue);
-    return(/*#__PURE__*/ $7oe8x$react.createElement($7oe8x$react.Fragment, null, before, /*#__PURE__*/ $7oe8x$react.createElement("b", null, match), after));
-}
-function $7cd5ba9838c72bf9$var$ListItemLoadingState() {
+const $7cd5ba9838c72bf9$var$ListItemLoadingState = ()=>{
     return(/*#__PURE__*/ $7oe8x$react.createElement($7oe8x$SkeletonContainer, {
@@ -195,2 +249,5 @@ svgHeight: 16
     })));
+}; // This is required to infer correct typings when differentiating groups and items
+function $7cd5ba9838c72bf9$var$isUsingGroups(isGrouped, items) {
+    return isGrouped;
 }
@@ -197,0 +254,0 @@ const $7cd5ba9838c72bf9$export$2f2b9559550c7bbc = /*#__PURE__*/ $7oe8x$react.forwardRef($7cd5ba9838c72bf9$var$_Autocomplete);

dist/types.d.ts

 import React from "react";
 import { CommonProps } from "@contentful/f36-core";
 import { TextInputProps } from "@contentful/f36-forms";
-export interface AutocompleteProps<ItemType = any> extends CommonProps, Pick<TextInputProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'isRequired' | 'id' | 'defaultValue'> {
+interface GenericGroupType<ItemType> {
+    groupTitle: string;
+    options: ItemType[];
+}
+export 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.
+     * defined as any, because in this moment we do not know if items is a group
      */
-    items: ItemType[];
+    items: ItemType[] | GenericGroupType<ItemType>[];
     /**
+     * Tells if the item is a object with groups
+     */
+    isGrouped?: boolean;
+    /**
      * Function called whenever the input value changes
@@ -11,0 +20,0 @@ */

package.json

 {
   "name": "@contentful/f36-autocomplete",
-  "version": "4.0.1-next-v4-10330.2454+da8cf2c3",
+  "version": "4.0.1-next-v4-10345.2455+72599bd0",
   "description": "Forma 36: Autocomplete component",
@@ -10,10 +10,11 @@ "scripts": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-button": "4.0.1-next-v4-10330.2454+da8cf2c3",
-    "@contentful/f36-core": "4.0.1-next-v4-10330.2454+da8cf2c3",
-    "@contentful/f36-forms": "4.0.1-next-v4-10330.2454+da8cf2c3",
-    "@contentful/f36-icons": "4.0.1-next-v4-10330.2454+da8cf2c3",
-    "@contentful/f36-popover": "4.0.1-next-v4-10330.2454+da8cf2c3",
-    "@contentful/f36-skeleton": "4.0.1-next-v4-10330.2454+da8cf2c3",
-    "@contentful/f36-tokens": "4.0.1-next-v4-10330.2454+da8cf2c3",
-    "@contentful/f36-utils": "4.0.1-next-v4-10330.2454+da8cf2c3",
+    "@contentful/f36-button": "4.0.1-next-v4-10345.2455+72599bd0",
+    "@contentful/f36-core": "4.0.1-next-v4-10345.2455+72599bd0",
+    "@contentful/f36-forms": "4.0.1-next-v4-10345.2455+72599bd0",
+    "@contentful/f36-icons": "4.0.1-next-v4-10345.2455+72599bd0",
+    "@contentful/f36-popover": "4.0.1-next-v4-10345.2455+72599bd0",
+    "@contentful/f36-skeleton": "4.0.1-next-v4-10345.2455+72599bd0",
+    "@contentful/f36-tokens": "4.0.1-next-v4-10345.2455+72599bd0",
+    "@contentful/f36-typography": "4.0.1-next-v4-10345.2455+72599bd0",
+    "@contentful/f36-utils": "4.0.1-next-v4-10345.2455+72599bd0",
     "downshift": "^6.1.7",
@@ -43,3 +44,3 @@ "emotion": "^10.0.17"
   },
-  "gitHead": "da8cf2c324c0fd06bd9fa5fedfb84b5e39eb3f55"
+  "gitHead": "72599bd0a4bc598200b9e0e5eaaeb624715a7b41"
 }

src/Autocomplete.styles.ts

@@ -18,9 +18,15 @@ import { css } from 'emotion';
   }),
+  content: css({
+    overflow: 'auto',
+    maxHeight: `${listMaxHeight}px`,
+  }),
   list: css({
-    overflowY: 'auto',
     listStyle: 'none',
     padding: `${tokens.spacingXs} 0`,
     margin: 0,
-    maxHeight: `${listMaxHeight}px`,
   }),
+  groupTitle: css({
+    padding: `${tokens.spacingXs} ${tokens.spacingM}`,
+    lineHeight: tokens.lineHeightM,
+  }),
   item: css({
@@ -27,0 +33,0 @@ display: 'block',

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

92428

increased by28.22%

Number of package files

13

increased by8.33%

Lines of code

997

increased by27.33%

Worsened metrics

Dependency count

13

increased by8.33%

Dependency changes

• + Added@contentful/f36-typography@4.0.1-next-v4-10345.2455+72599bd0

• Updated@contentful/f36-button@4.0.1-next-v4-10345.2455+72599bd0

• Updated@contentful/f36-core@4.0.1-next-v4-10345.2455+72599bd0

• Updated@contentful/f36-forms@4.0.1-next-v4-10345.2455+72599bd0

• Updated@contentful/f36-icons@4.0.1-next-v4-10345.2455+72599bd0

• Updated@contentful/f36-popover@4.0.1-next-v4-10345.2455+72599bd0

• Updated@contentful/f36-skeleton@4.0.1-next-v4-10345.2455+72599bd0

• Updated@contentful/f36-tokens@4.0.1-next-v4-10345.2455+72599bd0

• Updated@contentful/f36-utils@4.0.1-next-v4-10345.2455+72599bd0