@equinor/eds-core-react 0.27.0 → 0.28.0-dev12152022

package/dist/eds-core-react.cjs.js

@@ -18,6 +18,7 @@ var reactDomInteractions = require('@floating-ui/react-dom-interactions');
 var ReactDom = require('react-dom');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var downshift = require('downshift');
+var reactVirtual = require('@tanstack/react-virtual');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1653,7 +1654,7 @@ var Text$2 = styled__default["default"].span.withConfig({
   displayName: "Label__Text",
   componentId: "sc-1gi2bcn-1"
 })(["margin:0;"]);
-var Label$2 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
+var Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
   var _props$label = props.label,
     label = _props$label === void 0 ? '' : _props$label,
     meta = props.meta,
@@ -1908,7 +1909,7 @@ var HelperText = styled__default["default"](TextfieldHelperText).withConfig({
   displayName: "InputWrapper__HelperText",
   componentId: "sc-v6o9z1-1"
 })(["margin-top:8px;margin-left:8px;"]);
-var Label$1 = styled__default["default"](Label$2).withConfig({
+var Label$2 = styled__default["default"](Label$3).withConfig({
   displayName: "InputWrapper__Label",
   componentId: "sc-v6o9z1-2"
 })(["margin-left:8px;margin-right:8px;"]);
@@ -1940,7 +1941,7 @@ var InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper(_ref, r
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$4, _objectSpread__default["default"](_objectSpread__default["default"]({}, other), {}, {
       ref: ref,
-      children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, _objectSpread__default["default"]({}, _objectSpread__default["default"]({
+      children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"]({}, _objectSpread__default["default"]({
         label: label
       }, labelProps))), children, hasHelperText && /*#__PURE__*/jsxRuntime.jsx(HelperText, _objectSpread__default["default"]({
         color: helperTextColor
@@ -7244,7 +7245,7 @@ var NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2, re
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, containerProps), {}, {
-      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"]({}, labelProps)), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, _objectSpread__default["default"](_objectSpread__default["default"]({}, selectProps), {}, {
+      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$3, _objectSpread__default["default"]({}, labelProps)), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, _objectSpread__default["default"](_objectSpread__default["default"]({}, selectProps), {}, {
         children: children
       }))]
     }))
@@ -7946,7 +7947,7 @@ var StyledLabel = styled__default["default"].label.withConfig({
   var isDisabled = _ref.isDisabled;
   return isDisabled ? 'not-allowed' : 'pointer';
 });
-var Label = styled__default["default"].span.withConfig({
+var Label$1 = styled__default["default"].span.withConfig({
   displayName: "Switch__Label",
   componentId: "sc-sdaahx-1"
 })(function (_ref2) {
@@ -7982,7 +7983,7 @@ var Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref3, ref) {
         disabled: disabled
       }, rest), {}, {
         ref: ref
-      })), label && /*#__PURE__*/jsxRuntime.jsx(Label, {
+      })), label && /*#__PURE__*/jsxRuntime.jsx(Label$1, {
         children: label
       })]
     }) : size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, _objectSpread__default["default"](_objectSpread__default["default"]({
@@ -8019,9 +8020,9 @@ var selectTokens = {
   boxShadow: boxShadow,
   minHeight: straight.minHeight,
   spacings: {
-    top: spacingMedium,
+    top: '0',
     right: spacingLarge,
-    bottom: spacingMedium,
+    bottom: '0',
     left: spacingLarge
   },
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography.navigation.menu_title), {}, {
@@ -8053,6 +8054,14 @@ var selectTokens = {
         right: spacingSmall,
         top: '6px'
       }
+    },
+    label: {
+      spacings: {
+        left: '0',
+        right: '0',
+        top: spacingMedium,
+        bottom: spacingMedium
+      }
     }
   },
   modes: {
@@ -8060,8 +8069,8 @@ var selectTokens = {
       spacings: {
         left: spacingSmall,
         right: spacingSmall,
-        top: spacingSmall,
-        bottom: spacingSmall
+        top: '0',
+        bottom: '0'
       },
       entities: {
         button: {
@@ -8070,6 +8079,14 @@ var selectTokens = {
             right: spacingSmall,
             top: '0'
           }
+        },
+        label: {
+          spacings: {
+            left: '0',
+            right: '0',
+            top: spacingSmall,
+            bottom: spacingSmall
+          }
         }
       }
     }
@@ -8092,8 +8109,8 @@ var multiSelect = mergeDeepRight$1(selectTokens, {
   }
 });
 
-var _excluded$6 = ["value", "multiple", "isSelected", "isDisabled", "onClick", "aria-selected"];
-var StyledListItem = styled__default["default"](List$1.Item).withConfig({
+var _excluded$6 = ["value", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
+var StyledListItem = styled__default["default"].li.withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
 })(function (_ref) {
@@ -8102,16 +8119,25 @@ var StyledListItem = styled__default["default"](List$1.Item).withConfig({
     active = _ref.active,
     isdisabled = _ref.isdisabled;
   var backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
-  return styled.css(["display:flex;align-items:center;margin:0;list-style:none;background-color:", ";user-select:none;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
-});
-var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOption(_ref2, ref) {
-  var value = _ref2.value,
-    multiple = _ref2.multiple,
-    isSelected = _ref2.isSelected,
-    isDisabled = _ref2.isDisabled,
-    _onClick = _ref2.onClick,
-    ariaSelected = _ref2['aria-selected'],
-    other = _objectWithoutProperties__default["default"](_ref2, _excluded$6);
+  return styled.css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
+});
+var Label = styled__default["default"].span.withConfig({
+  displayName: "Option__Label",
+  componentId: "sc-1ly11zu-1"
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    multiline = _ref2.multiline;
+  return styled.css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], edsUtils.spacingsTemplate(theme.entities.label.spacings), multiline ? 'normal' : 'nowrap', multiline ? 'initial' : 'hidden');
+});
+var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOption(_ref3, ref) {
+  var value = _ref3.value,
+    multiple = _ref3.multiple,
+    isSelected = _ref3.isSelected,
+    isDisabled = _ref3.isDisabled,
+    multiline = _ref3.multiline,
+    _onClick = _ref3.onClick,
+    ariaSelected = _ref3['aria-selected'],
+    other = _objectWithoutProperties__default["default"](_ref3, _excluded$6);
   return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, _objectSpread__default["default"](_objectSpread__default["default"]({
     ref: ref,
     isdisabled: isDisabled ? 'true' : 'false',
@@ -8129,13 +8155,14 @@ var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOpti
       onChange: function onChange() {
         return null;
       }
-    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+    }), /*#__PURE__*/jsxRuntime.jsx(Label, {
+      multiline: multiline,
       children: value
     })]
   }));
 });
 
-var _excluded$5 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange"];
+var _excluded$5 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline"];
 var Container$1 = styled__default["default"].div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
@@ -8145,7 +8172,7 @@ var StyledList = styled__default["default"](List$1).withConfig({
   componentId: "sc-yvif0e-1"
 })(function (_ref) {
   var theme = _ref.theme;
-  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
+  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;max-height:300px;padding:0;display:grid;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
 });
 var StyledButton = styled__default["default"](Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -8242,6 +8269,8 @@ function AutocompleteInner(props, ref) {
     optionLabel = props.optionLabel,
     _props$clearSearchOnC = props.clearSearchOnChange,
     clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
+    _props$multiline = props.multiline,
+    multiline = _props$multiline === void 0 ? false : _props$multiline,
     other = _objectWithoutProperties__default["default"](props, _excluded$5);
   var anchorRef = react.useRef(null);
   var isControlled = Boolean(selectedOptions);
@@ -8323,6 +8352,17 @@ function AutocompleteInner(props, ref) {
       throw new Error('Unable to find label, make sure your are using options as documented');
     }
   }, [optionLabel]);
+  var scrollContainer = react.useRef(null);
+  var rowVirtualizer = reactVirtual.useVirtualizer({
+    count: availableItems.length,
+    getScrollElement: function getScrollElement() {
+      return scrollContainer.current;
+    },
+    estimateSize: react.useCallback(function () {
+      return 48;
+    }, []),
+    overscan: 25
+  });
   var comboBoxProps = {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],
@@ -8336,21 +8376,28 @@ function AutocompleteInner(props, ref) {
         return getLabel(item).toLowerCase().includes(inputValue.toLowerCase());
       }));
     },
-    onIsOpenChange: function onIsOpenChange(_ref7) {
-      var selectedItem = _ref7.selectedItem;
+    onHighlightedIndexChange: function onHighlightedIndexChange(_ref7) {
+      var highlightedIndex = _ref7.highlightedIndex,
+        type = _ref7.type;
+      if (type !== downshift.useCombobox.stateChangeTypes.ItemMouseMove && type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
+        rowVirtualizer.scrollToIndex(highlightedIndex);
+      }
+    },
+    onIsOpenChange: function onIsOpenChange(_ref8) {
+      var selectedItem = _ref8.selectedItem;
       if (!multiple && selectedItem !== null) {
         setAvailableItems(options);
       }
     },
-    onStateChange: function onStateChange(_ref8) {
-      var type = _ref8.type,
-        selectedItem = _ref8.selectedItem;
+    onStateChange: function onStateChange(_ref9) {
+      var type = _ref9.type,
+        selectedItem = _ref9.selectedItem;
       switch (type) {
         case downshift.useCombobox.stateChangeTypes.InputChange:
+        case downshift.useCombobox.stateChangeTypes.InputBlur:
           break;
         case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
         case downshift.useCombobox.stateChangeTypes.ItemClick:
-        case downshift.useCombobox.stateChangeTypes.InputBlur:
           if (selectedItem && !optionDisabled(selectedItem)) {
             if (multiple) {
               selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
@@ -8480,10 +8527,10 @@ function AutocompleteInner(props, ref) {
       middleware: [reactDomInteractions.offset(4), reactDomInteractions.flip(), reactDomInteractions.shift({
         padding: 8
       }), reactDomInteractions.size({
-        apply: function apply(_ref9) {
-          var rects = _ref9.rects,
-            availableHeight = _ref9.availableHeight,
-            elements = _ref9.elements;
+        apply: function apply(_ref10) {
+          var rects = _ref10.rects,
+            availableHeight = _ref10.availableHeight,
+            elements = _ref10.elements;
           var anchorWidth = "".concat(rects.reference.width, "px");
           Object.assign(elements.floating.style, {
             width: "".concat(autoWidth ? anchorWidth : 'auto'),
@@ -8528,27 +8575,48 @@ function AutocompleteInner(props, ref) {
       zIndex: 1500
     }
   })), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledList, _objectSpread__default["default"](_objectSpread__default["default"]({}, getMenuProps({
-      'aria-multiselectable': multiple ? 'true' : null
+    children: /*#__PURE__*/jsxRuntime.jsxs(StyledList, _objectSpread__default["default"](_objectSpread__default["default"]({}, getMenuProps({
+      'aria-multiselectable': multiple ? 'true' : null,
+      ref: scrollContainer
     }, {
       suppressRefError: true
     })), {}, {
-      children: !isOpen ? null : availableItems.map(function (item, index) {
+      children: [isOpen && /*#__PURE__*/jsxRuntime.jsx("li", {
+        role: "presentation",
+        style: {
+          height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+          margin: '0',
+          gridArea: '1 / -1'
+        }
+      }, "total-size"), !isOpen ? null : rowVirtualizer.getVirtualItems().map(function (virtualItem) {
+        var index = virtualItem.index;
+        var item = availableItems[index];
         var label = getLabel(item);
         var isDisabled = optionDisabled(item);
         var isSelected = selectedItemsLabels.includes(label);
         return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, _objectSpread__default["default"]({
+          "data-index": virtualItem.index,
+          "aria-setsize": availableItems.length,
+          "aria-posinset": index + 1,
           value: label,
           multiple: multiple,
           highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
           isSelected: isSelected,
-          isDisabled: isDisabled
-        }, getItemProps({
+          isDisabled: isDisabled,
+          multiline: multiline
+        }, getItemProps(_objectSpread__default["default"](_objectSpread__default["default"]({}, multiline && {
+          ref: rowVirtualizer.measureElement
+        }), {}, {
           item: item,
           index: index,
-          disabled: disabled
-        })), label);
-      })
+          disabled: disabled,
+          style: _objectSpread__default["default"]({
+            transform: "translateY(".concat(virtualItem.start, "px)")
+          }, !multiline && {
+            height: "".concat(virtualItem.size, "px")
+          })
+        }))), virtualItem.key);
+      })]
     }))
   }));
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
@@ -8557,7 +8625,7 @@ function AutocompleteInner(props, ref) {
       className: className,
       style: style,
       ref: ref,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$3, _objectSpread__default["default"](_objectSpread__default["default"]({}, getLabelProps()), {}, {
         label: label,
         meta: meta,
         disabled: disabled
@@ -9088,7 +9156,7 @@ exports.EdsProvider = EdsProvider;
 exports.Icon = Icon$1;
 exports.Input = Input$4;
 exports.InputWrapper = InputWrapper$2;
-exports.Label = Label$2;
+exports.Label = Label$3;
 exports.LinearProgress = LinearProgress;
 exports.List = List$1;
 exports.Menu = Menu;

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -4,6 +4,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { Button } from '../Button/index.js';
 import { List } from '../List/index.js';
@@ -18,7 +19,7 @@ import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';
 
-var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange"];
+var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline"];
 var Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
@@ -28,7 +29,7 @@ var StyledList = styled(List).withConfig({
   componentId: "sc-yvif0e-1"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
+  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;max-height:300px;padding:0;display:grid;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
 });
 var StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -125,6 +126,8 @@ function AutocompleteInner(props, ref) {
     optionLabel = props.optionLabel,
     _props$clearSearchOnC = props.clearSearchOnChange,
     clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
+    _props$multiline = props.multiline,
+    multiline = _props$multiline === void 0 ? false : _props$multiline,
     other = _objectWithoutProperties(props, _excluded);
   var anchorRef = useRef(null);
   var isControlled = Boolean(selectedOptions);
@@ -206,6 +209,17 @@ function AutocompleteInner(props, ref) {
       throw new Error('Unable to find label, make sure your are using options as documented');
     }
   }, [optionLabel]);
+  var scrollContainer = useRef(null);
+  var rowVirtualizer = useVirtualizer({
+    count: availableItems.length,
+    getScrollElement: function getScrollElement() {
+      return scrollContainer.current;
+    },
+    estimateSize: useCallback(function () {
+      return 48;
+    }, []),
+    overscan: 25
+  });
   var comboBoxProps = {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],
@@ -219,21 +233,28 @@ function AutocompleteInner(props, ref) {
         return getLabel(item).toLowerCase().includes(inputValue.toLowerCase());
       }));
     },
-    onIsOpenChange: function onIsOpenChange(_ref7) {
-      var selectedItem = _ref7.selectedItem;
+    onHighlightedIndexChange: function onHighlightedIndexChange(_ref7) {
+      var highlightedIndex = _ref7.highlightedIndex,
+        type = _ref7.type;
+      if (type !== useCombobox.stateChangeTypes.ItemMouseMove && type !== useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
+        rowVirtualizer.scrollToIndex(highlightedIndex);
+      }
+    },
+    onIsOpenChange: function onIsOpenChange(_ref8) {
+      var selectedItem = _ref8.selectedItem;
       if (!multiple && selectedItem !== null) {
         setAvailableItems(options);
       }
     },
-    onStateChange: function onStateChange(_ref8) {
-      var type = _ref8.type,
-        selectedItem = _ref8.selectedItem;
+    onStateChange: function onStateChange(_ref9) {
+      var type = _ref9.type,
+        selectedItem = _ref9.selectedItem;
       switch (type) {
         case useCombobox.stateChangeTypes.InputChange:
+        case useCombobox.stateChangeTypes.InputBlur:
           break;
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
-        case useCombobox.stateChangeTypes.InputBlur:
           if (selectedItem && !optionDisabled(selectedItem)) {
             if (multiple) {
               selectedItems.includes(selectedItem) ? removeSelectedItem(selectedItem) : addSelectedItem(selectedItem);
@@ -363,10 +384,10 @@ function AutocompleteInner(props, ref) {
       middleware: [offset(4), flip(), shift({
         padding: 8
       }), size({
-        apply: function apply(_ref9) {
-          var rects = _ref9.rects,
-            availableHeight = _ref9.availableHeight,
-            elements = _ref9.elements;
+        apply: function apply(_ref10) {
+          var rects = _ref10.rects,
+            availableHeight = _ref10.availableHeight,
+            elements = _ref10.elements;
           var anchorWidth = "".concat(rects.reference.width, "px");
           Object.assign(elements.floating.style, {
             width: "".concat(autoWidth ? anchorWidth : 'auto'),
@@ -411,27 +432,48 @@ function AutocompleteInner(props, ref) {
       zIndex: 1500
     }
   })), {}, {
-    children: /*#__PURE__*/jsx(StyledList, _objectSpread(_objectSpread({}, getMenuProps({
-      'aria-multiselectable': multiple ? 'true' : null
+    children: /*#__PURE__*/jsxs(StyledList, _objectSpread(_objectSpread({}, getMenuProps({
+      'aria-multiselectable': multiple ? 'true' : null,
+      ref: scrollContainer
     }, {
       suppressRefError: true
     })), {}, {
-      children: !isOpen ? null : availableItems.map(function (item, index) {
+      children: [isOpen && /*#__PURE__*/jsx("li", {
+        role: "presentation",
+        style: {
+          height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+          margin: '0',
+          gridArea: '1 / -1'
+        }
+      }, "total-size"), !isOpen ? null : rowVirtualizer.getVirtualItems().map(function (virtualItem) {
+        var index = virtualItem.index;
+        var item = availableItems[index];
         var label = getLabel(item);
         var isDisabled = optionDisabled(item);
         var isSelected = selectedItemsLabels.includes(label);
         return /*#__PURE__*/jsx(AutocompleteOption, _objectSpread({
+          "data-index": virtualItem.index,
+          "aria-setsize": availableItems.length,
+          "aria-posinset": index + 1,
           value: label,
           multiple: multiple,
           highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
           isSelected: isSelected,
-          isDisabled: isDisabled
-        }, getItemProps({
+          isDisabled: isDisabled,
+          multiline: multiline
+        }, getItemProps(_objectSpread(_objectSpread({}, multiline && {
+          ref: rowVirtualizer.measureElement
+        }), {}, {
           item: item,
           index: index,
-          disabled: disabled
-        })), label);
-      })
+          disabled: disabled,
+          style: _objectSpread({
+            transform: "translateY(".concat(virtualItem.start, "px)")
+          }, !multiline && {
+            height: "".concat(virtualItem.size, "px")
+          })
+        }))), virtualItem.key);
+      })]
     }))
   }));
   return /*#__PURE__*/jsx(ThemeProvider, {

package/dist/esm/components/Autocomplete/Autocomplete.tokens.js

@@ -19,9 +19,9 @@ var selectTokens = {
   boxShadow: boxShadow,
   minHeight: straight.minHeight,
   spacings: {
-    top: spacingMedium,
+    top: '0',
     right: spacingLarge,
-    bottom: spacingMedium,
+    bottom: '0',
     left: spacingLarge
   },
   typography: _objectSpread(_objectSpread({}, typography.navigation.menu_title), {}, {
@@ -53,6 +53,14 @@ var selectTokens = {
         right: spacingSmall,
         top: '6px'
       }
+    },
+    label: {
+      spacings: {
+        left: '0',
+        right: '0',
+        top: spacingMedium,
+        bottom: spacingMedium
+      }
     }
   },
   modes: {
@@ -60,8 +68,8 @@ var selectTokens = {
       spacings: {
         left: spacingSmall,
         right: spacingSmall,
-        top: spacingSmall,
-        bottom: spacingSmall
+        top: '0',
+        bottom: '0'
       },
       entities: {
         button: {
@@ -70,6 +78,14 @@ var selectTokens = {
             right: spacingSmall,
             top: '0'
           }
+        },
+        label: {
+          spacings: {
+            left: '0',
+            right: '0',
+            top: spacingSmall,
+            bottom: spacingSmall
+          }
         }
       }
     }

package/dist/esm/components/Autocomplete/Option.js

@@ -2,13 +2,12 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { List } from '../List/index.js';
 import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 
-var _excluded = ["value", "multiple", "isSelected", "isDisabled", "onClick", "aria-selected"];
-var StyledListItem = styled(List.Item).withConfig({
+var _excluded = ["value", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
+var StyledListItem = styled.li.withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
 })(function (_ref) {
@@ -17,16 +16,25 @@ var StyledListItem = styled(List.Item).withConfig({
     active = _ref.active,
     isdisabled = _ref.isdisabled;
   var backgroundColor = highlighted === 'true' ? theme.states.hover.background : active === 'true' ? theme.states.active.background : theme.background;
-  return css(["display:flex;align-items:center;margin:0;list-style:none;background-color:", ";user-select:none;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
+  return css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
-var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_ref2, ref) {
-  var value = _ref2.value,
-    multiple = _ref2.multiple,
-    isSelected = _ref2.isSelected,
-    isDisabled = _ref2.isDisabled,
-    _onClick = _ref2.onClick,
-    ariaSelected = _ref2['aria-selected'],
-    other = _objectWithoutProperties(_ref2, _excluded);
+var Label = styled.span.withConfig({
+  displayName: "Option__Label",
+  componentId: "sc-1ly11zu-1"
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    multiline = _ref2.multiline;
+  return css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], spacingsTemplate(theme.entities.label.spacings), multiline ? 'normal' : 'nowrap', multiline ? 'initial' : 'hidden');
+});
+var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_ref3, ref) {
+  var value = _ref3.value,
+    multiple = _ref3.multiple,
+    isSelected = _ref3.isSelected,
+    isDisabled = _ref3.isDisabled,
+    multiline = _ref3.multiline,
+    _onClick = _ref3.onClick,
+    ariaSelected = _ref3['aria-selected'],
+    other = _objectWithoutProperties(_ref3, _excluded);
   return /*#__PURE__*/jsxs(StyledListItem, _objectSpread(_objectSpread({
     ref: ref,
     isdisabled: isDisabled ? 'true' : 'false',
@@ -44,7 +52,8 @@ var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_re
       onChange: function onChange() {
         return null;
       }
-    }), /*#__PURE__*/jsx("span", {
+    }), /*#__PURE__*/jsx(Label, {
+      multiline: multiline,
       children: value
     })]
   }));

package/dist/types/components/Autocomplete/Autocomplete.d.ts

@@ -42,6 +42,8 @@ export declare type AutocompleteProps<T> = {
     placeholder?: string;
     /** Toggle if input is cleared when an options is selected when `multiple` is `true`*/
     clearSearchOnChange?: boolean;
+    /** Will wrap overflowing text at the expence of some performance overhead to calculate item heigths. Mostly relevant in combination with autoWidth */
+    multiline?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 declare function AutocompleteInner<T>(props: AutocompleteProps<T>, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element;
 export declare const Autocomplete: <T>(props: {
@@ -84,6 +86,8 @@ export declare const Autocomplete: <T>(props: {
     placeholder?: string;
     /** Toggle if input is cleared when an options is selected when `multiple` is `true`*/
     clearSearchOnChange?: boolean;
+    /** Will wrap overflowing text at the expence of some performance overhead to calculate item heigths. Mostly relevant in combination with autoWidth */
+    multiline?: boolean;
 } & HTMLAttributes<HTMLDivElement> & {
     ref?: React.ForwardedRef<HTMLDivElement>;
     displayName?: string | undefined;

package/dist/types/components/Autocomplete/Option.d.ts

@@ -5,6 +5,7 @@ export declare type AutocompleteOptionProps = {
     highlighted: string;
     isSelected: boolean;
     isDisabled?: boolean;
+    multiline: boolean;
 } & LiHTMLAttributes<HTMLLIElement>;
 export declare const AutocompleteOption: import("react").ForwardRefExoticComponent<{
     value: string;
@@ -12,4 +13,5 @@ export declare const AutocompleteOption: import("react").ForwardRefExoticCompone
     highlighted: string;
     isSelected: boolean;
     isDisabled?: boolean;
+    multiline: boolean;
 } & LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/types/components/Slider/Slider.d.ts

@@ -11,8 +11,8 @@ export declare type SliderProps = {
     onChange?: (event: ChangeEvent<HTMLInputElement>, newValue: number[] | number) => void;
     /** Function to be called when value is committed by mouseup event */
     onChangeCommitted?: (event: MouseEvent | KeyboardEvent, newValue: number[] | number) => void;
-    /** Function for formatting the output, e.g. with dates */
-    outputFunction?: (text: number) => string;
+    /** Function for formatting the displayed value. E.g. formatting dates, or adding a unit suffix */
+    outputFunction?: (value: number) => string;
     /** Max value */
     max?: number;
     /**  Min value */
@@ -38,8 +38,8 @@ export declare const Slider: import("react").ForwardRefExoticComponent<{
     onChange?: (event: ChangeEvent<HTMLInputElement>, newValue: number[] | number) => void;
     /** Function to be called when value is committed by mouseup event */
     onChangeCommitted?: (event: MouseEvent | KeyboardEvent, newValue: number[] | number) => void;
-    /** Function for formatting the output, e.g. with dates */
-    outputFunction?: (text: number) => string;
+    /** Function for formatting the displayed value. E.g. formatting dates, or adding a unit suffix */
+    outputFunction?: (value: number) => string;
     /** Max value */
     max?: number;
     /**  Min value */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.27.0",
+  "version": "0.28.0-dev12152022",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -79,11 +79,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.19.0",
-    "@equinor/eds-icons": "0.16.0",
-    "@equinor/eds-tokens": "0.9.0",
-    "@equinor/eds-utils": "0.7.0",
     "@floating-ui/react-dom-interactions": "^0.10.1",
-    "downshift": "^7.0.1"
+    "@tanstack/react-virtual": "3.0.0-beta.30",
+    "downshift": "^7.0.1",
+    "@equinor/eds-icons": "0.17.0",
+    "@equinor/eds-tokens": "0.9.0",
+    "@equinor/eds-utils": "0.7.0"
   },
   "engines": {
     "pnpm": ">=4",