@equinor/eds-core-react 0.45.1 → 0.47.0

package/dist/eds-core-react.cjs

@@ -2279,7 +2279,7 @@ const Text$3 = styled__default.default.span.withConfig({
   displayName: "Label__Text",
   componentId: "sc-1gi2bcn-1"
 })(["margin:0;"]);
-const Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
+const Label$2 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
   const {
     label = '',
     meta,
@@ -2545,7 +2545,7 @@ const HelperText$1 = styled__default.default(TextfieldHelperText).withConfig({
   displayName: "InputWrapper__HelperText",
   componentId: "sc-v6o9z1-1"
 })(["margin-top:8px;margin-left:8px;"]);
-const Label$2 = styled__default.default(Label$3).withConfig({
+const Label$1 = styled__default.default(Label$2).withConfig({
   displayName: "InputWrapper__Label",
   componentId: "sc-v6o9z1-2"
 })(["margin-left:8px;margin-right:8px;"]);
@@ -2580,7 +2580,7 @@ const InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper({
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$5, {
       ...other,
       ref: ref,
-      children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, {
+      children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$1, {
         label,
         ...labelProps
       }), children, hasHelperText && /*#__PURE__*/jsxRuntime.jsx(HelperText$1, {
@@ -5791,10 +5791,9 @@ const {
     output
   }
 } = slider;
-const fakeTrackBg = styled.css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
-const fakeTrackBgHover = styled.css({
-  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
-});
+const encodedTrackColor = encodeURIComponent(track.background);
+const encodedHoverColor = encodeURIComponent(track.states.hover.background);
+const fakeTrackBg = styled.css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], encodedTrackColor);
 const trackFill = styled.css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 const wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
 const RangeWrapper = styled__default.default.div.attrs(({
@@ -5815,13 +5814,14 @@ const RangeWrapper = styled__default.default.div.attrs(({
     '--max': $max,
     '--showTooltip': $labelAlwaysOn ? 1 : 0,
     '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
     ...style
   }
 })).withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, fakeTrackBgHover, ({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");&::before,&::after{background:", ";}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, encodedHoverColor, ({
+  $hideActiveTrack
+}) => $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background, ({
   $touchNavigation
 }) => $touchNavigation && styled.css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]), ({
   $labelBelow
@@ -5842,13 +5842,14 @@ const Wrapper = styled__default.default.div.attrs(({
     '--value': value,
     '--showTooltip': $labelAlwaysOn ? 1 : 0,
     '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
     ...style
   }
 })).withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::after{background:var(--background-hover);}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, fakeTrackBgHover, ({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");&::after{background:", ";}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, encodedHoverColor, ({
+  $hideActiveTrack
+}) => $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background, ({
   $labelBelow
 }) => $labelBelow && styled.css(["& > output{top:calc(100% + 1px);bottom:unset;}"]));
 const WrapperGroupLabel = styled__default.default.div.withConfig({
@@ -7759,9 +7760,9 @@ const MenuItem$1 = /*#__PURE__*/react.forwardRef(function MenuItem({
     onClick: e => {
       if (onClick) {
         onClick(e);
-        if (onClose !== null && closeMenuOnClick) {
-          onClose(e);
-        }
+      }
+      if (onClose !== null && closeMenuOnClick) {
+        onClose(e);
       }
     },
     children: /*#__PURE__*/jsxRuntime.jsx(Content, {
@@ -8440,7 +8441,7 @@ const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect({
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$3, {
       ...containerProps,
-      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$3, {
+      children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, {
         ...labelProps
       }), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, {
         ...selectProps,
@@ -9237,7 +9238,7 @@ const StyledLabel = styled__default.default.label.withConfig({
 }) => $isDisabled ? 'not-allowed' : 'pointer', ({
   $size
 }) => $size === 'small' ? '12px' : '8px');
-const Label$1 = styled__default.default.span.withConfig({
+const Label = styled__default.default.span.withConfig({
   displayName: "Switch__Label",
   componentId: "sc-sdaahx-1"
 })(({
@@ -9274,7 +9275,7 @@ const Switch = /*#__PURE__*/react.forwardRef(function Switch({
         disabled: disabled,
         ...rest,
         ref: ref
-      }), label && /*#__PURE__*/jsxRuntime.jsx(Label$1, {
+      }), label && /*#__PURE__*/jsxRuntime.jsx(Label, {
         children: label
       })]
     }) : size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, {
@@ -9447,8 +9448,8 @@ const StyledListItem = styled__default.default.li.withConfig({
   const backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
   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;touch-action:manipulation;z-index:3;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), $isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
-const Label = styled__default.default.span.withConfig({
-  displayName: "Option__Label",
+const AutocompleteOptionLabel = styled__default.default.span.withConfig({
+  displayName: "Option__AutocompleteOptionLabel",
   componentId: "sc-1ly11zu-1"
 })(({
   theme,
@@ -9491,7 +9492,7 @@ function AutocompleteOptionInner(props, ref) {
       }
     }), optionComponent ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
       children: optionComponent
-    }) : /*#__PURE__*/jsxRuntime.jsx(Label, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(AutocompleteOptionLabel, {
       $multiline: multiline,
       children: value
     })]
@@ -9499,11 +9500,49 @@ function AutocompleteOptionInner(props, ref) {
 }
 const AutocompleteOption = /*#__PURE__*/react.forwardRef(AutocompleteOptionInner);
 
+const StyledAddItemIcon = styled__default.default(Icon$1).withConfig({
+  displayName: "AddNewOption__StyledAddItemIcon",
+  componentId: "sc-8xtrxx-0"
+})(({
+  multiple
+}) => {
+  return styled.css(["padding:", ";color:", ";"], multiple ? '0.75rem' : '0 0.75rem 0 0', edsTokens.tokens.colors.interactive.primary__resting.hex);
+});
+function AddNewOptionInner(props, ref) {
+  const {
+    value,
+    multiline,
+    multiple,
+    highlighted,
+    onClick,
+    ...other
+  } = props;
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
+    ref: ref,
+    $highlighted: highlighted,
+    "aria-label": `Add new option: ${value}`,
+    onClick: e => {
+      onClick(e);
+    },
+    ...other,
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledAddItemIcon, {
+      multiple: multiple,
+      data: edsIcons.add_box
+    }), /*#__PURE__*/jsxRuntime.jsx(AutocompleteOptionLabel, {
+      $multiline: multiline,
+      children: value
+    })]
+  });
+}
+const AddNewOption = /*#__PURE__*/react.forwardRef(AddNewOptionInner);
+
 const Container$2 = styled__default.default.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
 const AllSymbol = Symbol('Select all');
+const AddSymbol = Symbol('Add new');
+
 // MARK: styled components
 const StyledList = styled__default.default(List$1).withConfig({
   displayName: "Autocomplete__StyledList",
@@ -9637,6 +9676,7 @@ const defaultOptionDisabled = () => false;
 function AutocompleteInner(props, ref) {
   const {
     options = [],
+    totalOptions,
     label,
     meta,
     className,
@@ -9646,6 +9686,7 @@ function AutocompleteInner(props, ref) {
     loading = false,
     hideClearButton = false,
     onOptionsChange,
+    onAddNewOption,
     onInputChange,
     selectedOptions: _selectedOptions,
     multiple,
@@ -9700,8 +9741,9 @@ function AutocompleteInner(props, ref) {
   }, [allowSelectAll, multiple, typedInputValue]);
   const availableItems = react.useMemo(() => {
     if (showSelectAll) return [AllSymbol, ..._availableItems];
+    if (_availableItems.length === 0 && onAddNewOption) return [AddSymbol];
     return _availableItems;
-  }, [_availableItems, showSelectAll]);
+  }, [_availableItems, showSelectAll, onAddNewOption]);
 
   //issue 2304, update dataset when options are added dynamically
   react.useEffect(() => {
@@ -9731,7 +9773,7 @@ function AutocompleteInner(props, ref) {
       ...multipleSelectionProps,
       onSelectedItemsChange: changes => {
         if (onOptionsChange) {
-          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
+          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol || item !== AddSymbol);
           if (itemCompare) {
             selectedItems = inputOptions.filter(item => selectedItems.some(compare => itemCompare(item, compare)));
           }
@@ -9877,6 +9919,8 @@ function AutocompleteInner(props, ref) {
           if (selectedItem != null && !optionDisabled(selectedItem)) {
             if (selectedItem === AllSymbol) {
               toggleAllSelected();
+            } else if (selectedItem === AddSymbol) {
+              onAddNewOption?.(typedInputValue);
             } else if (multiple) {
               const shouldRemove = itemCompare ? selectedItems.some(i => itemCompare(selectedItem, i)) : selectedItems.includes(selectedItem);
               if (shouldRemove) {
@@ -9920,11 +9964,29 @@ function AutocompleteInner(props, ref) {
               ...changes,
               isOpen: !(disabled || readOnly)
             };
+          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case downshift.useCombobox.stateChangeTypes.ItemClick:
+            if (changes.selectedItem === AddSymbol) {
+              onAddNewOption(typedInputValue);
+              return {
+                ...changes,
+                inputValue: '',
+                selectedItem: null
+              };
+            }
+            return {
+              ...changes
+            };
           case downshift.useCombobox.stateChangeTypes.InputBlur:
             return {
               ...changes,
               inputValue: changes.selectedItem ? getLabel(changes.selectedItem) : ''
             };
+          case downshift.useCombobox.stateChangeTypes.InputChange:
+            setTypedInputValue(changes.inputValue);
+            return {
+              ...changes
+            };
           case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
           case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
             if (readOnly) {
@@ -9978,7 +10040,9 @@ function AutocompleteInner(props, ref) {
   }
   // MARK: multiselect specific
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
+    const showPlaceholder = placeholderText && selectedItems.length === 0;
+    const optionCount = totalOptions || inputOptions.length;
+    placeholderText = showPlaceholder ? placeholderText : `${selectedItems.length}/${optionCount} selected`;
     comboBoxProps = {
       ...comboBoxProps,
       selectedItem: null,
@@ -10195,6 +10259,29 @@ function AutocompleteInner(props, ref) {
             })
           }, 'select-all');
         }
+        if (item === AddSymbol && onAddNewOption) {
+          return /*#__PURE__*/jsxRuntime.jsx(AddNewOption, {
+            "data-index": 0,
+            "data-testid": 'add-item',
+            "aria-setsize": availableItems.length,
+            multiple: multiple,
+            highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
+            multiline: multiline,
+            style: {
+              position: 'sticky',
+              top: 0,
+              zIndex: 99
+            },
+            ...getItemProps({
+              ...(multiline && {
+                ref: rowVirtualizer.measureElement
+              }),
+              item,
+              index: index
+            }),
+            value: `${typedInputValue}`
+          }, 'add-item');
+        }
         return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, {
           "data-index": index,
           "aria-setsize": availableItems.length,
@@ -10236,7 +10323,7 @@ function AutocompleteInner(props, ref) {
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
       className: className,
       style: style,
-      children: [/*#__PURE__*/jsxRuntime.jsx(Label$3, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label$2, {
         ...getLabelProps(),
         label: label,
         meta: meta,
@@ -12478,7 +12565,7 @@ exports.EdsProvider = EdsProvider;
 exports.Icon = Icon$1;
 exports.Input = Input$4;
 exports.InputWrapper = InputWrapper$2;
-exports.Label = Label$3;
+exports.Label = Label$2;
 exports.LinearProgress = LinearProgress;
 exports.List = List$1;
 exports.ListItem = ListItem$2;

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

@@ -0,0 +1,45 @@
+import { add_box } from '@equinor/eds-icons';
+import { tokens } from '@equinor/eds-tokens';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Icon } from '../Icon/index.js';
+import { StyledListItem, AutocompleteOptionLabel } from './Option.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const StyledAddItemIcon = styled(Icon).withConfig({
+  displayName: "AddNewOption__StyledAddItemIcon",
+  componentId: "sc-8xtrxx-0"
+})(({
+  multiple
+}) => {
+  return css(["padding:", ";color:", ";"], multiple ? '0.75rem' : '0 0.75rem 0 0', tokens.colors.interactive.primary__resting.hex);
+});
+function AddNewOptionInner(props, ref) {
+  const {
+    value,
+    multiline,
+    multiple,
+    highlighted,
+    onClick,
+    ...other
+  } = props;
+  return /*#__PURE__*/jsxs(StyledListItem, {
+    ref: ref,
+    $highlighted: highlighted,
+    "aria-label": `Add new option: ${value}`,
+    onClick: e => {
+      onClick(e);
+    },
+    ...other,
+    children: [/*#__PURE__*/jsx(StyledAddItemIcon, {
+      multiple: multiple,
+      data: add_box
+    }), /*#__PURE__*/jsx(AutocompleteOptionLabel, {
+      $multiline: multiline,
+      children: value
+    })]
+  });
+}
+const AddNewOption = /*#__PURE__*/forwardRef(AddNewOptionInner);
+
+export { AddNewOption };

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

@@ -11,6 +11,7 @@ import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
 import { useToken, useIsomorphicLayoutEffect, bordersTemplate } from '@equinor/eds-utils';
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, size, useInteractions, autoUpdate } from '@floating-ui/react';
+import { AddNewOption } from './AddNewOption.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import pickBy from '../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/pickBy.js';
 import mergeWith from '../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeWith.js';
@@ -24,6 +25,8 @@ const Container = styled.div.withConfig({
   componentId: "sc-yvif0e-0"
 })(["position:relative;"]);
 const AllSymbol = Symbol('Select all');
+const AddSymbol = Symbol('Add new');
+
 // MARK: styled components
 const StyledList = styled(List).withConfig({
   displayName: "Autocomplete__StyledList",
@@ -157,6 +160,7 @@ const defaultOptionDisabled = () => false;
 function AutocompleteInner(props, ref) {
   const {
     options = [],
+    totalOptions,
     label,
     meta,
     className,
@@ -166,6 +170,7 @@ function AutocompleteInner(props, ref) {
     loading = false,
     hideClearButton = false,
     onOptionsChange,
+    onAddNewOption,
     onInputChange,
     selectedOptions: _selectedOptions,
     multiple,
@@ -220,8 +225,9 @@ function AutocompleteInner(props, ref) {
   }, [allowSelectAll, multiple, typedInputValue]);
   const availableItems = useMemo(() => {
     if (showSelectAll) return [AllSymbol, ..._availableItems];
+    if (_availableItems.length === 0 && onAddNewOption) return [AddSymbol];
     return _availableItems;
-  }, [_availableItems, showSelectAll]);
+  }, [_availableItems, showSelectAll, onAddNewOption]);
 
   //issue 2304, update dataset when options are added dynamically
   useEffect(() => {
@@ -251,7 +257,7 @@ function AutocompleteInner(props, ref) {
       ...multipleSelectionProps,
       onSelectedItemsChange: changes => {
         if (onOptionsChange) {
-          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
+          let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol || item !== AddSymbol);
           if (itemCompare) {
             selectedItems = inputOptions.filter(item => selectedItems.some(compare => itemCompare(item, compare)));
           }
@@ -397,6 +403,8 @@ function AutocompleteInner(props, ref) {
           if (selectedItem != null && !optionDisabled(selectedItem)) {
             if (selectedItem === AllSymbol) {
               toggleAllSelected();
+            } else if (selectedItem === AddSymbol) {
+              onAddNewOption?.(typedInputValue);
             } else if (multiple) {
               const shouldRemove = itemCompare ? selectedItems.some(i => itemCompare(selectedItem, i)) : selectedItems.includes(selectedItem);
               if (shouldRemove) {
@@ -440,11 +448,29 @@ function AutocompleteInner(props, ref) {
               ...changes,
               isOpen: !(disabled || readOnly)
             };
+          case useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case useCombobox.stateChangeTypes.ItemClick:
+            if (changes.selectedItem === AddSymbol) {
+              onAddNewOption(typedInputValue);
+              return {
+                ...changes,
+                inputValue: '',
+                selectedItem: null
+              };
+            }
+            return {
+              ...changes
+            };
           case useCombobox.stateChangeTypes.InputBlur:
             return {
               ...changes,
               inputValue: changes.selectedItem ? getLabel(changes.selectedItem) : ''
             };
+          case useCombobox.stateChangeTypes.InputChange:
+            setTypedInputValue(changes.inputValue);
+            return {
+              ...changes
+            };
           case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
           case useCombobox.stateChangeTypes.InputKeyDownHome:
             if (readOnly) {
@@ -498,7 +524,9 @@ function AutocompleteInner(props, ref) {
   }
   // MARK: multiselect specific
   if (multiple) {
-    placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
+    const showPlaceholder = placeholderText && selectedItems.length === 0;
+    const optionCount = totalOptions || inputOptions.length;
+    placeholderText = showPlaceholder ? placeholderText : `${selectedItems.length}/${optionCount} selected`;
     comboBoxProps = {
       ...comboBoxProps,
       selectedItem: null,
@@ -715,6 +743,29 @@ function AutocompleteInner(props, ref) {
             })
           }, 'select-all');
         }
+        if (item === AddSymbol && onAddNewOption) {
+          return /*#__PURE__*/jsx(AddNewOption, {
+            "data-index": 0,
+            "data-testid": 'add-item',
+            "aria-setsize": availableItems.length,
+            multiple: multiple,
+            highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
+            multiline: multiline,
+            style: {
+              position: 'sticky',
+              top: 0,
+              zIndex: 99
+            },
+            ...getItemProps({
+              ...(multiline && {
+                ref: rowVirtualizer.measureElement
+              }),
+              item,
+              index: index
+            }),
+            value: `${typedInputValue}`
+          }, 'add-item');
+        }
         return /*#__PURE__*/jsx(AutocompleteOption, {
           "data-index": index,
           "aria-setsize": availableItems.length,

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

@@ -16,8 +16,8 @@ const StyledListItem = styled.li.withConfig({
   const backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
   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;touch-action:manipulation;z-index:3;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), $isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
-const Label = styled.span.withConfig({
-  displayName: "Option__Label",
+const AutocompleteOptionLabel = styled.span.withConfig({
+  displayName: "Option__AutocompleteOptionLabel",
   componentId: "sc-1ly11zu-1"
 })(({
   theme,
@@ -60,7 +60,7 @@ function AutocompleteOptionInner(props, ref) {
       }
     }), optionComponent ? /*#__PURE__*/jsx(Fragment, {
       children: optionComponent
-    }) : /*#__PURE__*/jsx(Label, {
+    }) : /*#__PURE__*/jsx(AutocompleteOptionLabel, {
       $multiline: multiline,
       children: value
     })]
@@ -68,4 +68,4 @@ function AutocompleteOptionInner(props, ref) {
 }
 const AutocompleteOption = /*#__PURE__*/forwardRef(AutocompleteOptionInner);
 
-export { AutocompleteOption };
+export { AutocompleteOption, AutocompleteOptionLabel, StyledListItem };

package/dist/esm/components/Menu/MenuItem.js

@@ -80,9 +80,9 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem({
     onClick: e => {
       if (onClick) {
         onClick(e);
-        if (onClose !== null && closeMenuOnClick) {
-          onClose(e);
-        }
+      }
+      if (onClose !== null && closeMenuOnClick) {
+        onClose(e);
       }
     },
     children: /*#__PURE__*/jsx(Content, {

package/dist/esm/components/Slider/Slider.js

@@ -15,10 +15,9 @@ const {
     output
   }
 } = slider;
-const fakeTrackBg = css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
-const fakeTrackBgHover = css({
-  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
-});
+const encodedTrackColor = encodeURIComponent(track.background);
+const encodedHoverColor = encodeURIComponent(track.states.hover.background);
+const fakeTrackBg = css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], encodedTrackColor);
 const trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 const wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
 const RangeWrapper = styled.div.attrs(({
@@ -39,13 +38,14 @@ const RangeWrapper = styled.div.attrs(({
     '--max': $max,
     '--showTooltip': $labelAlwaysOn ? 1 : 0,
     '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
     ...style
   }
 })).withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, fakeTrackBgHover, ({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");&::before,&::after{background:", ";}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, encodedHoverColor, ({
+  $hideActiveTrack
+}) => $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background, ({
   $touchNavigation
 }) => $touchNavigation && css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]), ({
   $labelBelow
@@ -66,13 +66,14 @@ const Wrapper = styled.div.attrs(({
     '--value': value,
     '--showTooltip': $labelAlwaysOn ? 1 : 0,
     '--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
-    '--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
     ...style
   }
 })).withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::after{background:var(--background-hover);}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, fakeTrackBgHover, ({
+})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");&::after{background:", ";}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, encodedHoverColor, ({
+  $hideActiveTrack
+}) => $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background, ({
   $labelBelow
 }) => $labelBelow && css(["& > output{top:calc(100% + 1px);bottom:unset;}"]));
 const WrapperGroupLabel = styled.div.withConfig({

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

@@ -0,0 +1,13 @@
+import { LiHTMLAttributes } from 'react';
+export type AutocompleteOptionProps = {
+    value: string;
+    multiple: boolean;
+    highlighted: string;
+    multiline: boolean;
+} & LiHTMLAttributes<HTMLLIElement>;
+declare function AddNewOptionInner(props: AutocompleteOptionProps, ref: React.ForwardedRef<HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
+export declare const AddNewOption: (props: AutocompleteOptionProps & {
+    ref?: React.ForwardedRef<HTMLLIElement>;
+    displayName?: string | undefined;
+}) => ReturnType<typeof AddNewOptionInner>;
+export {};

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

@@ -6,6 +6,8 @@ export type AutocompleteChanges<T> = {
 export type AutocompleteProps<T> = {
     /** List of options in dropdown */
     options: readonly T[];
+    /** Total number of options */
+    totalOptions?: number;
     /** Label for the select element */
     label: ReactNode;
     /** Array of initial selected items
@@ -53,6 +55,8 @@ export type AutocompleteProps<T> = {
      * Returns input value
      */
     onInputChange?: (text: string) => void;
+    /** Callback for clicking the add new option button */
+    onAddNewOption?: (text: string) => void;
     /** Enable multiselect */
     multiple?: boolean;
     /** Add select-all option. Throws an error if true while multiple = false */

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

@@ -1,4 +1,13 @@
 import { LiHTMLAttributes, ReactNode } from 'react';
+type StyledListItemType = {
+    $highlighted?: string;
+    $active?: string;
+    $isdisabled?: string;
+};
+export declare const StyledListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, StyledListItemType>> & string;
+export declare const AutocompleteOptionLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $multiline: boolean;
+}>> & string;
 export type AutocompleteOptionProps = {
     value: string;
     multiple: boolean;

package/dist/types/components/Banner/BannerMessage.d.ts

@@ -1,9 +1,10 @@
+import { ReactNode } from 'react';
 import { TypographyProps } from '../Typography/Typography';
 export type BannerMessageProps = {
-    /** Text content */
-    children: string;
+    /** Content */
+    children: ReactNode;
 } & Omit<TypographyProps, 'children'>;
 export declare const BannerMessage: import("react").ForwardRefExoticComponent<{
-    /** Text content */
-    children: string;
+    /** Content */
+    children: ReactNode;
 } & Omit<TypographyProps, "children"> & import("react").RefAttributes<HTMLElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.45.1",
+  "version": "0.47.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -67,8 +67,8 @@
     "rollup-plugin-delete": "^2.2.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^8.6.12",
-    "styled-components": "6.1.17",
+    "storybook": "^8.6.14",
+    "styled-components": "6.1.18",
     "tsc-watch": "^6.2.1",
     "typescript": "^5.8.3"
   },
@@ -78,19 +78,19 @@
     "styled-components": ">=5.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.0",
+    "@babel/runtime": "^7.27.4",
     "@floating-ui/react": "^0.27.8",
     "@internationalized/date": "^3.8.0",
     "@react-aria/utils": "^3.28.2",
     "@react-stately/calendar": "^3.8.0",
     "@react-stately/datepicker": "^3.14.0",
     "@react-types/shared": "^3.29.0",
-    "@tanstack/react-virtual": "3.13.2",
+    "@tanstack/react-virtual": "3.13.8",
     "downshift": "9.0.8",
     "react-aria": "^3.39.0",
     "@equinor/eds-tokens": "0.9.2",
-    "@equinor/eds-icons": "^0.22.0",
-    "@equinor/eds-utils": "0.8.7"
+    "@equinor/eds-utils": "0.8.7",
+    "@equinor/eds-icons": "^0.22.0"
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs && tsc -p tsconfig.build.json",