@equinor/eds-core-react 0.32.3 → 0.32.4

package/dist/eds-core-react.cjs

@@ -369,6 +369,71 @@ _curry2(function mergeDeepRight(lObj, rObj) {
 });
 var mergeDeepRight$1 = mergeDeepRight;
 
+/**
+ * Creates a new object with the own properties of the two provided objects. If
+ * a key exists in both objects, the provided function is applied to the values
+ * associated with the key in each object, with the result being used as the
+ * value associated with the key in the returned object.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.19.0
+ * @category Object
+ * @sig ((a, a) -> a) -> {a} -> {a} -> {a}
+ * @param {Function} fn
+ * @param {Object} l
+ * @param {Object} r
+ * @return {Object}
+ * @see R.mergeDeepWith, R.merge, R.mergeWithKey
+ * @example
+ *
+ *      R.mergeWith(R.concat,
+ *                  { a: true, values: [10, 20] },
+ *                  { b: true, values: [15, 35] });
+ *      //=> { a: true, b: true, values: [10, 20, 15, 35] }
+ */
+
+var mergeWith = /*#__PURE__*/
+_curry3(function mergeWith(fn, l, r) {
+  return mergeWithKey(function (_, _l, _r) {
+    return fn(_l, _r);
+  }, l, r);
+});
+var mergeWith$1 = mergeWith;
+
+/**
+ * Returns a partial copy of an object containing only the keys that satisfy
+ * the supplied predicate.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.8.0
+ * @category Object
+ * @sig ((v, k) -> Boolean) -> {k: v} -> {k: v}
+ * @param {Function} pred A predicate to determine whether or not a key
+ *        should be included on the output object.
+ * @param {Object} obj The object to copy from
+ * @return {Object} A new object with only properties that satisfy `pred`
+ *         on it.
+ * @see R.pick, R.filter
+ * @example
+ *
+ *      const isUpperCase = (val, key) => key.toUpperCase() === key;
+ *      R.pickBy(isUpperCase, {a: 1, b: 2, A: 3, B: 4}); //=> {A: 3, B: 4}
+ */
+
+var pickBy = /*#__PURE__*/
+_curry2(function pickBy(test, obj) {
+  var result = {};
+  for (var prop in obj) {
+    if (test(obj[prop], prop, obj)) {
+      result[prop] = obj[prop];
+    }
+  }
+  return result;
+});
+var pickBy$1 = pickBy;
+
 var _tokens$colors$k = edsTokens.tokens.colors,
   primaryWhite$2 = _tokens$colors$k.text.static_icons__primary_white.rgba,
   _tokens$colors$intera$k = _tokens$colors$k.interactive,
@@ -2627,13 +2692,13 @@ var StyledSvg = styled__default.default.svg.attrs(function (_ref2) {
   componentId: "sc-6evbi1-0"
 })(["", ""], transform);
 var StyledPath$2 = styled__default.default.path.attrs(function (_ref3) {
-  var height = _ref3.height,
+  var $height = _ref3.$height,
     size = _ref3.size;
   return {
     size: null,
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+    transform: size / $height !== 1 ? "scale(".concat(size / $height, ")") : null
   };
 }).withConfig({
   displayName: "Icon__StyledPath",
@@ -2689,7 +2754,7 @@ var Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref5, ref) {
   };
   var pathProps = {
     d: icon.svgPathData,
-    height: icon.height ? icon.height : size,
+    $height: icon.height ? icon.height : size,
     size: size || icon.height
   };
 
@@ -4003,13 +4068,12 @@ var Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref3, ref) {
     return edsUtils.mergeRefs(localRef, dialogRef);
   }, [localRef, dialogRef]);
   react.useEffect(function () {
-    var _localRef$current;
-    if (open && !(localRef !== null && localRef !== void 0 && (_localRef$current = localRef.current) !== null && _localRef$current !== void 0 && _localRef$current.hasAttribute('open'))) {
-      var _localRef$current2;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.showModal();
+    if (open) {
+      var _localRef$current;
+      localRef === null || localRef === void 0 ? void 0 : (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.showModal();
     } else {
-      var _localRef$current3;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current3 = localRef.current) === null || _localRef$current3 === void 0 ? void 0 : _localRef$current3.close();
+      var _localRef$current2;
+      localRef === null || localRef === void 0 ? void 0 : (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.close();
     }
   }, [open]);
 
@@ -4562,7 +4626,7 @@ var enabled$2 = enabled$3,
 var Icon = styled__default.default(Icon$1).withConfig({
   displayName: "Icon",
   componentId: "sc-50ffvg-0"
-})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], edsUtils.bordersTemplate(enabled$2.entities.icon.border), function (_ref) {
+})(["cursor:pointer;padding:1px;", " &:hover{", ";}", ""], edsUtils.bordersTemplate(enabled$2.entities.icon.border), function (_ref) {
   var variant = _ref.variant;
   switch (variant) {
     case 'error':
@@ -4594,9 +4658,9 @@ var StyledChips = styled__default.default.div.attrs(function (_ref) {
 }).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$4, height, typography$7.color, states$2.hover.typography.color, states$2.hover.typography.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$7), function (_ref2) {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$4, height, typography$7.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$7), function (_ref2) {
   var clickable = _ref2.clickable;
-  return clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
+  return clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;color:", ";svg{fill:", ";}}}"], states$2.hover.typography.color, states$2.hover.typography.color);
 }, function (_ref3) {
   var variant = _ref3.variant;
   switch (variant) {
@@ -8268,7 +8332,7 @@ var StyledListItem = styled__default.default.li.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;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) : '');
+  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;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",
@@ -8294,7 +8358,10 @@ function AutocompleteOptionInner(props, ref) {
     "aria-hidden": isDisabled,
     active: !multiple && isSelected ? 'true' : 'false',
     onClick: function onClick(e) {
-      return !isDisabled && _onClick(e);
+      //timeout: workaround for "Maximum update depth exceeded" error that happens when touch input
+      setTimeout(function () {
+        !isDisabled && _onClick(e);
+      }, 0);
     },
     "aria-selected": multiple ? isSelected : ariaSelected
   }, other), {}, {
@@ -8351,6 +8418,19 @@ var findIndex = function findIndex(_ref3) {
   }
   return index;
 };
+var isEvent = function isEvent(val, key) {
+  return /^on[A-Z](.*)/.test(key) && typeof val === 'function';
+};
+function mergeEventsFromRight(props1, props2) {
+  var events1 = pickBy$1(isEvent, props1);
+  var events2 = pickBy$1(isEvent, props2);
+  return mergeWith$1(function (event1, event2) {
+    return function () {
+      event1.apply(void 0, arguments);
+      event2.apply(void 0, arguments);
+    };
+  }, events1, events2);
+}
 var findNextIndex = function findNextIndex(_ref4) {
   var index = _ref4.index,
     optionDisabled = _ref4.optionDisabled,
@@ -8531,6 +8611,9 @@ function AutocompleteInner(props, ref) {
   var comboBoxProps = {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],
+    isItemDisabled: function isItemDisabled(item) {
+      return optionDisabled(item);
+    },
     itemToString: getLabel,
     onInputValueChange: function onInputValueChange(_ref6) {
       var inputValue = _ref6.inputValue;
@@ -8579,6 +8662,10 @@ function AutocompleteInner(props, ref) {
       var changes = actionAndChanges.changes,
         type = actionAndChanges.type;
       switch (type) {
+        case downshift.useCombobox.stateChangeTypes.InputClick:
+          return _objectSpread__default.default(_objectSpread__default.default({}, changes), {}, {
+            isOpen: !(disabled || readOnly)
+          });
         case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
         case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
           return _objectSpread__default.default(_objectSpread__default.default({}, changes), {}, {
@@ -8676,7 +8763,6 @@ function AutocompleteInner(props, ref) {
     getInputProps = _useCombobox.getInputProps,
     highlightedIndex = _useCombobox.highlightedIndex,
     getItemProps = _useCombobox.getItemProps,
-    openMenu = _useCombobox.openMenu,
     inputValue = _useCombobox.inputValue,
     resetCombobox = _useCombobox.reset;
   react.useEffect(function () {
@@ -8684,11 +8770,6 @@ function AutocompleteInner(props, ref) {
       setSelectedItems(selectedOptions);
     }
   }, [isControlled, selectedOptions, setSelectedItems]);
-  var openSelect = function openSelect() {
-    if (!isOpen && !(disabled || readOnly)) {
-      openMenu();
-    }
-  };
   var _useFloating = react$1.useFloating({
       placement: 'bottom-start',
       middleware: [react$1.offset(4), react$1.flip(), react$1.shift({
@@ -8776,7 +8857,6 @@ function AutocompleteInner(props, ref) {
         }), {}, {
           item: item,
           index: index,
-          disabled: disabled,
           style: _objectSpread__default.default({
             transform: "translateY(".concat(virtualItem.start, "px)")
           }, !multiline && {
@@ -8786,6 +8866,18 @@ function AutocompleteInner(props, ref) {
       })]
     }))
   }));
+  var inputProps = getInputProps(
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  getDropdownProps({
+    preventKeyAction: multiple ? isOpen : undefined,
+    disabled: disabled,
+    ref: refs.setReference,
+    onChange: function onChange(e) {
+      var _e$currentTarget;
+      return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
+    }
+  }));
+  var consolidatedEvents = mergeEventsFromRight(other, inputProps);
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
@@ -8797,21 +8889,9 @@ function AutocompleteInner(props, ref) {
         meta: meta,
         disabled: disabled
       })), /*#__PURE__*/jsxRuntime.jsx(Container$2, {
-        children: /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default.default(_objectSpread__default.default({}, getInputProps(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        getDropdownProps({
-          preventKeyAction: multiple ? isOpen : undefined,
-          disabled: disabled,
-          ref: refs.setReference,
-          onChange: function onChange(e) {
-            var _e$currentTarget;
-            return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
-          }
-        }))), {}, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Input$4, _objectSpread__default.default(_objectSpread__default.default(_objectSpread__default.default({}, inputProps), {}, {
           placeholder: placeholderText,
           readOnly: readOnly,
-          onFocus: openSelect,
-          onClick: openSelect,
           rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
           rightAdornments: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [loading && /*#__PURE__*/jsxRuntime.jsx(Progress.Circular, {
@@ -8838,7 +8918,7 @@ function AutocompleteInner(props, ref) {
               })
             }))]
           })
-        }, other))
+        }, other), consolidatedEvents))
       }), disablePortal || inDialog ? optionsList : /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList

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

@@ -16,6 +16,8 @@ import { bordersTemplate, useToken, useIsomorphicLayoutEffect, useIsInDialog } f
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import pickBy from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/pickBy.js';
+import mergeWith from '../../node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeWith.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';
@@ -56,6 +58,19 @@ var findIndex = function findIndex(_ref3) {
   }
   return index;
 };
+var isEvent = function isEvent(val, key) {
+  return /^on[A-Z](.*)/.test(key) && typeof val === 'function';
+};
+function mergeEventsFromRight(props1, props2) {
+  var events1 = pickBy(isEvent, props1);
+  var events2 = pickBy(isEvent, props2);
+  return mergeWith(function (event1, event2) {
+    return function () {
+      event1.apply(void 0, arguments);
+      event2.apply(void 0, arguments);
+    };
+  }, events1, events2);
+}
 var findNextIndex = function findNextIndex(_ref4) {
   var index = _ref4.index,
     optionDisabled = _ref4.optionDisabled,
@@ -236,6 +251,9 @@ function AutocompleteInner(props, ref) {
   var comboBoxProps = {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],
+    isItemDisabled: function isItemDisabled(item) {
+      return optionDisabled(item);
+    },
     itemToString: getLabel,
     onInputValueChange: function onInputValueChange(_ref6) {
       var inputValue = _ref6.inputValue;
@@ -284,6 +302,10 @@ function AutocompleteInner(props, ref) {
       var changes = actionAndChanges.changes,
         type = actionAndChanges.type;
       switch (type) {
+        case useCombobox.stateChangeTypes.InputClick:
+          return _objectSpread(_objectSpread({}, changes), {}, {
+            isOpen: !(disabled || readOnly)
+          });
         case useCombobox.stateChangeTypes.InputKeyDownArrowDown:
         case useCombobox.stateChangeTypes.InputKeyDownHome:
           return _objectSpread(_objectSpread({}, changes), {}, {
@@ -381,7 +403,6 @@ function AutocompleteInner(props, ref) {
     getInputProps = _useCombobox.getInputProps,
     highlightedIndex = _useCombobox.highlightedIndex,
     getItemProps = _useCombobox.getItemProps,
-    openMenu = _useCombobox.openMenu,
     inputValue = _useCombobox.inputValue,
     resetCombobox = _useCombobox.reset;
   useEffect(function () {
@@ -389,11 +410,6 @@ function AutocompleteInner(props, ref) {
       setSelectedItems(selectedOptions);
     }
   }, [isControlled, selectedOptions, setSelectedItems]);
-  var openSelect = function openSelect() {
-    if (!isOpen && !(disabled || readOnly)) {
-      openMenu();
-    }
-  };
   var _useFloating = useFloating({
       placement: 'bottom-start',
       middleware: [offset(4), flip(), shift({
@@ -481,7 +497,6 @@ function AutocompleteInner(props, ref) {
         }), {}, {
           item: item,
           index: index,
-          disabled: disabled,
           style: _objectSpread({
             transform: "translateY(".concat(virtualItem.start, "px)")
           }, !multiline && {
@@ -491,6 +506,18 @@ function AutocompleteInner(props, ref) {
       })]
     }))
   }));
+  var inputProps = getInputProps(
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  getDropdownProps({
+    preventKeyAction: multiple ? isOpen : undefined,
+    disabled: disabled,
+    ref: refs.setReference,
+    onChange: function onChange(e) {
+      var _e$currentTarget;
+      return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
+    }
+  }));
+  var consolidatedEvents = mergeEventsFromRight(other, inputProps);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
     children: /*#__PURE__*/jsxs(Container, {
@@ -502,21 +529,9 @@ function AutocompleteInner(props, ref) {
         meta: meta,
         disabled: disabled
       })), /*#__PURE__*/jsx(Container, {
-        children: /*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, getInputProps(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        getDropdownProps({
-          preventKeyAction: multiple ? isOpen : undefined,
-          disabled: disabled,
-          ref: refs.setReference,
-          onChange: function onChange(e) {
-            var _e$currentTarget;
-            return setTypedInputValue(e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value);
-          }
-        }))), {}, {
+        children: /*#__PURE__*/jsx(Input, _objectSpread(_objectSpread(_objectSpread({}, inputProps), {}, {
           placeholder: placeholderText,
           readOnly: readOnly,
-          onFocus: openSelect,
-          onClick: openSelect,
           rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
           rightAdornments: /*#__PURE__*/jsxs(Fragment, {
             children: [loading && /*#__PURE__*/jsx(Progress.Circular, {
@@ -543,7 +558,7 @@ function AutocompleteInner(props, ref) {
               })
             }))]
           })
-        }, other))
+        }, other), consolidatedEvents))
       }), disablePortal || inDialog ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
         id: "eds-autocomplete-container",
         children: optionsList

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

@@ -16,7 +16,7 @@ var StyledListItem = styled.li.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;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) : '');
+  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;cursor:", ";", " ", " ", ""], backgroundColor, highlighted === 'true' ? 'pointer' : 'default', typographyTemplate(theme.typography), spacingsTemplate(theme.spacings), isdisabled === 'true' ? css(["color:", ";"], theme.states.disabled.typography.color) : '');
 });
 var Label = styled.span.withConfig({
   displayName: "Option__Label",
@@ -42,7 +42,10 @@ function AutocompleteOptionInner(props, ref) {
     "aria-hidden": isDisabled,
     active: !multiple && isSelected ? 'true' : 'false',
     onClick: function onClick(e) {
-      return !isDisabled && _onClick(e);
+      //timeout: workaround for "Maximum update depth exceeded" error that happens when touch input
+      setTimeout(function () {
+        !isDisabled && _onClick(e);
+      }, 0);
     },
     "aria-selected": multiple ? isSelected : ariaSelected
   }, other), {}, {

package/dist/esm/components/Chip/Chip.js

@@ -26,9 +26,9 @@ var StyledChips = styled.div.attrs(function (_ref) {
 }).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, states.hover.typography.color, states.hover.typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), function (_ref2) {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), function (_ref2) {
   var clickable = _ref2.clickable;
-  return clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
+  return clickable && css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;color:", ";svg{fill:", ";}}}"], states.hover.typography.color, states.hover.typography.color);
 }, function (_ref3) {
   var variant = _ref3.variant;
   switch (variant) {

package/dist/esm/components/Chip/Icon.js

@@ -12,7 +12,7 @@ var enabled = enabled$1,
 var Icon = styled(Icon$1).withConfig({
   displayName: "Icon",
   componentId: "sc-50ffvg-0"
-})(["cursor:pointer;padding:1px;", " z-index:11;&:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), function (_ref) {
+})(["cursor:pointer;padding:1px;", " &:hover{", ";}", ""], bordersTemplate(enabled.entities.icon.border), function (_ref) {
   var variant = _ref.variant;
   switch (variant) {
     case 'error':

package/dist/esm/components/Dialog/Dialog.js

@@ -44,13 +44,12 @@ var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref3, ref) {
     return mergeRefs(localRef, dialogRef);
   }, [localRef, dialogRef]);
   useEffect(function () {
-    var _localRef$current;
-    if (open && !(localRef !== null && localRef !== void 0 && (_localRef$current = localRef.current) !== null && _localRef$current !== void 0 && _localRef$current.hasAttribute('open'))) {
-      var _localRef$current2;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.showModal();
+    if (open) {
+      var _localRef$current;
+      localRef === null || localRef === void 0 ? void 0 : (_localRef$current = localRef.current) === null || _localRef$current === void 0 ? void 0 : _localRef$current.showModal();
     } else {
-      var _localRef$current3;
-      localRef === null || localRef === void 0 ? void 0 : (_localRef$current3 = localRef.current) === null || _localRef$current3 === void 0 ? void 0 : _localRef$current3.close();
+      var _localRef$current2;
+      localRef === null || localRef === void 0 ? void 0 : (_localRef$current2 = localRef.current) === null || _localRef$current2 === void 0 ? void 0 : _localRef$current2.close();
     }
   }, [open]);
 

package/dist/esm/components/Icon/Icon.js

@@ -26,13 +26,13 @@ var StyledSvg = styled.svg.attrs(function (_ref2) {
   componentId: "sc-6evbi1-0"
 })(["", ""], transform);
 var StyledPath = styled.path.attrs(function (_ref3) {
-  var height = _ref3.height,
+  var $height = _ref3.$height,
     size = _ref3.size;
   return {
     size: null,
     fillRule: 'evenodd',
     clipRule: 'evenodd',
-    transform: size / height !== 1 ? "scale(".concat(size / height, ")") : null
+    transform: size / $height !== 1 ? "scale(".concat(size / $height, ")") : null
   };
 }).withConfig({
   displayName: "Icon__StyledPath",
@@ -88,7 +88,7 @@ var Icon = /*#__PURE__*/forwardRef(function Icon(_ref5, ref) {
   };
   var pathProps = {
     d: icon.svgPathData,
-    height: icon.height ? icon.height : size,
+    $height: icon.height ? icon.height : size,
     size: size || icon.height
   };
 

package/dist/esm/node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/mergeWith.js

@@ -0,0 +1,36 @@
+import _curry3 from './internal/_curry3.js';
+import mergeWithKey from './mergeWithKey.js';
+
+/**
+ * Creates a new object with the own properties of the two provided objects. If
+ * a key exists in both objects, the provided function is applied to the values
+ * associated with the key in each object, with the result being used as the
+ * value associated with the key in the returned object.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.19.0
+ * @category Object
+ * @sig ((a, a) -> a) -> {a} -> {a} -> {a}
+ * @param {Function} fn
+ * @param {Object} l
+ * @param {Object} r
+ * @return {Object}
+ * @see R.mergeDeepWith, R.merge, R.mergeWithKey
+ * @example
+ *
+ *      R.mergeWith(R.concat,
+ *                  { a: true, values: [10, 20] },
+ *                  { b: true, values: [15, 35] });
+ *      //=> { a: true, b: true, values: [10, 20, 15, 35] }
+ */
+
+var mergeWith = /*#__PURE__*/
+_curry3(function mergeWith(fn, l, r) {
+  return mergeWithKey(function (_, _l, _r) {
+    return fn(_l, _r);
+  }, l, r);
+});
+var mergeWith$1 = mergeWith;
+
+export { mergeWith$1 as default };

package/dist/esm/node_modules/.pnpm/ramda@0.29.0/node_modules/ramda/es/pickBy.js

@@ -0,0 +1,36 @@
+import _curry2 from './internal/_curry2.js';
+
+/**
+ * Returns a partial copy of an object containing only the keys that satisfy
+ * the supplied predicate.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.8.0
+ * @category Object
+ * @sig ((v, k) -> Boolean) -> {k: v} -> {k: v}
+ * @param {Function} pred A predicate to determine whether or not a key
+ *        should be included on the output object.
+ * @param {Object} obj The object to copy from
+ * @return {Object} A new object with only properties that satisfy `pred`
+ *         on it.
+ * @see R.pick, R.filter
+ * @example
+ *
+ *      const isUpperCase = (val, key) => key.toUpperCase() === key;
+ *      R.pickBy(isUpperCase, {a: 1, b: 2, A: 3, B: 4}); //=> {A: 3, B: 4}
+ */
+
+var pickBy = /*#__PURE__*/
+_curry2(function pickBy(test, obj) {
+  var result = {};
+  for (var prop in obj) {
+    if (test(obj[prop], prop, obj)) {
+      result[prop] = obj[prop];
+    }
+  }
+  return result;
+});
+var pickBy$1 = pickBy;
+
+export { pickBy$1 as default };

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

@@ -44,7 +44,7 @@ export type AutocompleteProps<T> = {
     onInputChange?: (text: string) => void;
     /** Enable multiselect */
     multiple?: boolean;
-    /**  Custom option label */
+    /**  Custom option label. NOTE: This is required when option is an object */
     optionLabel?: (option: T) => string;
     /**  Custom option template */
     optionComponent?: (option: T, isSelected: boolean) => ReactNode;
@@ -116,7 +116,7 @@ export declare const Autocomplete: <T>(props: {
     onInputChange?: (text: string) => void;
     /** Enable multiselect */
     multiple?: boolean;
-    /**  Custom option label */
+    /**  Custom option label. NOTE: This is required when option is an object */
     optionLabel?: (option: T) => string;
     /**  Custom option template */
     optionComponent?: (option: T, isSelected: boolean) => ReactNode;

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

@@ -6,7 +6,7 @@ export type AutocompleteOptionProps<T> = {
     isSelected: boolean;
     isDisabled?: boolean;
     multiline: boolean;
-    optionComponent?: (option: T, isSelected: boolean) => ReactNode;
+    optionComponent?: ReactNode;
 } & LiHTMLAttributes<HTMLLIElement>;
 declare function AutocompleteOptionInner<T>(props: AutocompleteOptionProps<T>, ref: React.ForwardedRef<HTMLLIElement>): JSX.Element;
 export declare const AutocompleteOption: <T>(props: {
@@ -16,7 +16,7 @@ export declare const AutocompleteOption: <T>(props: {
     isSelected: boolean;
     isDisabled?: boolean;
     multiline: boolean;
-    optionComponent?: (option: T, isSelected: boolean) => ReactNode;
+    optionComponent?: ReactNode;
 } & LiHTMLAttributes<HTMLLIElement> & {
     ref?: React.ForwardedRef<HTMLLIElement>;
     displayName?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.32.3",
+  "version": "0.32.4",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -83,9 +83,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.5",
-    "@floating-ui/react": "^0.24.3",
+    "@floating-ui/react": "^0.25.1",
     "@tanstack/react-virtual": "3.0.0-beta.54",
-    "downshift": "^7.6.0",
+    "downshift": "^8.1.0",
     "@equinor/eds-icons": "^0.19.3",
     "@equinor/eds-tokens": "0.9.2",
     "@equinor/eds-utils": "0.8.1"