@equinor/eds-core-react 0.29.2-dev09022023 → 0.30.0

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

@@ -2334,7 +2334,7 @@ var Container$3 = styled__default["default"].div.withConfig({
     readOnly = _ref.readOnly;
   var states = token.states,
     entities = token.entities;
-  return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", ""], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, edsUtils.outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
+  return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, token.typography.color, token.height, token.width, token.boxShadow, token.background, edsUtils.outlineTemplate(token.outline), (_entities$adornment = entities.adornment) === null || _entities$adornment === void 0 ? void 0 : (_entities$adornment$s = _entities$adornment.states.focus) === null || _entities$adornment$s === void 0 ? void 0 : _entities$adornment$s.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));
@@ -2872,14 +2872,16 @@ var Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion(_ref, ref) {
   });
 });
 
-var _excluded$15 = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "children", "disabled"];
+var _excluded$15 = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "onExpandedChange", "children", "disabled"];
 var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, ref) {
   var headerLevel = _ref.headerLevel,
     chevronPosition = _ref.chevronPosition,
     _ref$index = _ref.index,
     index = _ref$index === void 0 ? 0 : _ref$index,
     accordionId = _ref.accordionId,
-    isExpanded = _ref.isExpanded,
+    _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    onExpandedChange = _ref.onExpandedChange,
     children = _ref.children,
     disabled = _ref.disabled,
     props = _objectWithoutProperties__default["default"](_ref, _excluded$15);
@@ -2887,14 +2889,20 @@ var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, r
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     expanded = _useState2[0],
     setExpanded = _useState2[1];
+  var controlled = onExpandedChange != undefined;
+  var activeExpandedState = controlled ? isExpanded : expanded;
   var toggleExpanded = function toggleExpanded() {
-    setExpanded(!expanded);
+    if (controlled) {
+      onExpandedChange(!isExpanded);
+    } else {
+      setExpanded(!expanded);
+    }
   };
   var Children = react.Children.map(children, function (child, childIndex) {
     var headerId = "".concat(accordionId, "-header-").concat(index + 1);
     var panelId = "".concat(accordionId, "-panel-").concat(index + 1);
     return childIndex === 0 ? /*#__PURE__*/react.cloneElement(child, {
-      isExpanded: expanded,
+      isExpanded: activeExpandedState,
       toggleExpanded: toggleExpanded,
       id: headerId,
       panelId: panelId,
@@ -2903,14 +2911,16 @@ var AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem(_ref, r
       parentIndex: index,
       disabled: disabled
     }) : /*#__PURE__*/react.cloneElement(child, {
-      hidden: !expanded,
+      hidden: !activeExpandedState,
       id: panelId,
       headerId: headerId
     });
   });
   react.useEffect(function () {
-    setExpanded(isExpanded);
-  }, [isExpanded]);
+    if (!controlled) {
+      setExpanded(isExpanded);
+    }
+  }, [isExpanded, controlled]);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     ref: ref,
     children: Children
@@ -4144,7 +4154,7 @@ var StyledDialogHeader = styled__default["default"].div.withConfig({
   componentId: "sc-mbwcos-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return styled.css(["display:flex;justify-content:space-betweene;algin-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
+  return styled.css(["display:flex;justify-content:space-between;align-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
 });
 var StyledDivider$1 = styled__default["default"](Divider).withConfig({
   displayName: "DialogHeader__StyledDivider",
@@ -4900,17 +4910,16 @@ var _tokens$entities$2 = slider.entities,
 var StyledOutput = styled__default["default"].output.withConfig({
   displayName: "Output__StyledOutput",
   componentId: "sc-1dy945x-0"
-})(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], function (_ref) {
-  var value = _ref.value;
-  return value;
-}, edsUtils.typographyTemplate(output.typography), slider.background, track$2.spacings.top);
-var Output = /*#__PURE__*/react.forwardRef(function Output(_ref2, ref) {
-  var children = _ref2.children,
-    value = _ref2.value,
-    htmlFor = _ref2.htmlFor;
+})(["--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], edsUtils.typographyTemplate(output.typography), slider.background, track$2.spacings.top);
+var Output = /*#__PURE__*/react.forwardRef(function Output(_ref, ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    htmlFor = _ref.htmlFor;
   return /*#__PURE__*/jsxRuntime.jsx(StyledOutput, {
     ref: ref,
-    value: value,
+    style: {
+      '--val': value
+    },
     htmlFor: htmlFor,
     children: children
   });
@@ -4975,41 +4984,44 @@ var fakeTrackBgHover = styled.css({
 });
 var trackFill = styled.css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 var wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
-var RangeWrapper = styled__default["default"].div.withConfig({
+var RangeWrapper = styled__default["default"].div.attrs(function (_ref) {
+  var $min = _ref.$min,
+    $max = _ref.$max,
+    valA = _ref.valA,
+    valB = _ref.valB,
+    disabled = _ref.disabled,
+    style = _ref.style;
+  return {
+    style: _objectSpread__default["default"]({
+      '--a': valA,
+      '--b': valB,
+      '--min': $min,
+      '--max': $max,
+      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+    }, style)
+  };
+}).withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " 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));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], function (_ref) {
-  var valA = _ref.valA;
-  return valA;
-}, function (_ref2) {
-  var valB = _ref2.valB;
-  return valB;
-}, function (_ref3) {
-  var min = _ref3.min;
-  return min;
-}, function (_ref4) {
-  var max = _ref4.max;
-  return max;
-}, wrapperGrid, fakeTrackBg, trackFill, function (_ref5) {
-  var disabled = _ref5.disabled;
-  return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
-}, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
-var Wrapper = styled__default["default"].div.withConfig({
+})(["--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));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+var Wrapper = styled__default["default"].div.attrs(function (_ref2) {
+  var $min = _ref2.$min,
+    $max = _ref2.$max,
+    value = _ref2.value,
+    disabled = _ref2.disabled,
+    style = _ref2.style;
+  return {
+    style: _objectSpread__default["default"]({
+      '--min': $min,
+      '--max': $max,
+      '--value': value,
+      '--background': disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background
+    }, style)
+  };
+}).withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], function (_ref6) {
-  var min = _ref6.min;
-  return min;
-}, function (_ref7) {
-  var max = _ref7.max;
-  return max;
-}, function (_ref8) {
-  var value = _ref8.value;
-  return value;
-}, wrapperGrid, fakeTrackBg, trackFill, function (_ref9) {
-  var disabled = _ref9.disabled;
-  return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
-}, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+})(["--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;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], wrapperGrid, fakeTrackBg, trackFill, fakeTrackBgHover, track.entities.indicator.states.hover.background);
 var WrapperGroupLabel = styled__default["default"].div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
@@ -5022,26 +5034,26 @@ var SrOnlyLabel = styled__default["default"].label.withConfig({
   displayName: "Slider__SrOnlyLabel",
   componentId: "sc-n1grrg-4"
 })(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
-var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
-  var _ref10$min = _ref10.min,
-    min = _ref10$min === void 0 ? 0 : _ref10$min,
-    _ref10$max = _ref10.max,
-    max = _ref10$max === void 0 ? 100 : _ref10$max,
-    _ref10$value = _ref10.value,
-    value = _ref10$value === void 0 ? [40, 60] : _ref10$value,
-    outputFunction = _ref10.outputFunction,
-    onChange = _ref10.onChange,
-    onChangeCommitted = _ref10.onChangeCommitted,
-    _ref10$minMaxDots = _ref10.minMaxDots,
-    minMaxDots = _ref10$minMaxDots === void 0 ? true : _ref10$minMaxDots,
-    _ref10$minMaxValues = _ref10.minMaxValues,
-    minMaxValues = _ref10$minMaxValues === void 0 ? true : _ref10$minMaxValues,
-    _ref10$step = _ref10.step,
-    step = _ref10$step === void 0 ? 1 : _ref10$step,
-    disabled = _ref10.disabled,
-    ariaLabelledby = _ref10.ariaLabelledby,
-    ariaLabelledbyNative = _ref10['aria-labelledby'],
-    rest = _objectWithoutProperties__default["default"](_ref10, _excluded$A);
+var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref3, ref) {
+  var _ref3$min = _ref3.min,
+    min = _ref3$min === void 0 ? 0 : _ref3$min,
+    _ref3$max = _ref3.max,
+    max = _ref3$max === void 0 ? 100 : _ref3$max,
+    _ref3$value = _ref3.value,
+    value = _ref3$value === void 0 ? [40, 60] : _ref3$value,
+    outputFunction = _ref3.outputFunction,
+    onChange = _ref3.onChange,
+    onChangeCommitted = _ref3.onChangeCommitted,
+    _ref3$minMaxDots = _ref3.minMaxDots,
+    minMaxDots = _ref3$minMaxDots === void 0 ? true : _ref3$minMaxDots,
+    _ref3$minMaxValues = _ref3.minMaxValues,
+    minMaxValues = _ref3$minMaxValues === void 0 ? true : _ref3$minMaxValues,
+    _ref3$step = _ref3.step,
+    step = _ref3$step === void 0 ? 1 : _ref3$step,
+    disabled = _ref3.disabled,
+    ariaLabelledby = _ref3.ariaLabelledby,
+    ariaLabelledbyNative = _ref3['aria-labelledby'],
+    rest = _objectWithoutProperties__default["default"](_ref3, _excluded$A);
   var isRangeSlider = Array.isArray(value);
   var parsedValue = isRangeSlider ? value : [value];
   var _useState = react.useState(parsedValue),
@@ -5052,6 +5064,10 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
     sliderValue = _useState4[0],
     setSliderValue = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    mousePressed = _useState6[0],
+    setMousePressed = _useState6[1];
   react.useEffect(function () {
     if (isRangeSlider) {
       if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
@@ -5072,6 +5088,18 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     if (isRangeSlider) {
       var _newValue = sliderValue.slice();
       _newValue[valueArrIdx] = changedValue;
+
+      //Prevent min/max values from crossing eachother
+      if (valueArrIdx === 0 && _newValue[0] >= _newValue[1]) {
+        var _maxRange$current;
+        _newValue[0] = _newValue[1];
+        (_maxRange$current = maxRange.current) === null || _maxRange$current === void 0 ? void 0 : _maxRange$current.focus();
+      }
+      if (valueArrIdx === 1 && _newValue[1] <= _newValue[0]) {
+        var _minRange$current;
+        _newValue[1] = _newValue[0];
+        (_minRange$current = minRange.current) === null || _minRange$current === void 0 ? void 0 : _minRange$current.focus();
+      }
       setSliderValue(_newValue);
       if (onChange) {
         // Callback for provided onChange func
@@ -5100,18 +5128,18 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
   };
   var findClosestRange = function findClosestRange(event) {
     var target = event.target;
-    if (target.type === 'output') {
+    if (target.type === 'output' || mousePressed) {
       return;
     }
     var bounds = target.getBoundingClientRect();
     var x = event.clientX - bounds.left;
     var inputWidth = minRange.current.offsetWidth;
-    var minValue = minRange.current.value;
-    var maxValue = maxRange.current.value;
+    var minValue = parseFloat(minRange.current.value);
+    var maxValue = parseFloat(maxRange.current.value);
     var diff = max - min;
     var normX = x / inputWidth * diff + min;
-    var maxX = Math.abs(normX - parseFloat(maxValue));
-    var minX = Math.abs(normX - parseFloat(minValue));
+    var maxX = Math.abs(normX - maxValue);
+    var minX = Math.abs(normX - minValue);
     if (minX > maxX) {
       minRange.current.style.zIndex = '10';
       maxRange.current.style.zIndex = '20';
@@ -5119,6 +5147,22 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
       minRange.current.style.zIndex = '20';
       maxRange.current.style.zIndex = '10';
     }
+    //special cases where both thumbs are all the way to the left or right
+    if (minValue === maxValue && minValue === min) {
+      minRange.current.style.zIndex = '10';
+      maxRange.current.style.zIndex = '20';
+    }
+    if (minValue === maxValue && maxValue === max) {
+      minRange.current.style.zIndex = '20';
+      maxRange.current.style.zIndex = '10';
+    }
+  };
+  var handleDragging = function handleDragging(e) {
+    if (e.type === 'mousedown') {
+      setMousePressed(true);
+    } else {
+      setMousePressed(false);
+    }
   };
   var inputIdA = edsUtils.useId(null, 'inputA');
   var inputIdB = edsUtils.useId(null, 'inputB');
@@ -5141,10 +5185,12 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
       "aria-labelledby": getAriaLabelledby(),
       valA: sliderValue[0],
       valB: sliderValue[1],
-      max: max,
-      min: min,
+      $max: max,
+      $min: min,
       disabled: disabled,
       onMouseMove: findClosestRange,
+      onMouseDown: handleDragging,
+      onMouseUp: handleDragging,
       children: [minMaxDots && /*#__PURE__*/jsxRuntime.jsx(WrapperGroupLabelDots, {}), /*#__PURE__*/jsxRuntime.jsx(SrOnlyLabel, {
         htmlFor: inputIdA,
         children: "Value A"
@@ -5210,8 +5256,8 @@ var Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
       })]
     })) : /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
       ref: ref,
-      max: max,
-      min: min,
+      $max: max,
+      $min: min,
       value: sliderValue[0],
       disabled: disabled,
       children: [/*#__PURE__*/jsxRuntime.jsx(SliderInput, {
@@ -6278,18 +6324,21 @@ var breadcrumbs = {
   }
 };
 
-var _excluded$k = ["children", "collapse"];
+var _excluded$k = ["children", "collapse", "wrap"];
 var spacings = breadcrumbs.spacings,
   typography$5 = breadcrumbs.typography,
   states$1 = breadcrumbs.states;
 var OrderedList$1 = styled__default["default"].ol.withConfig({
   displayName: "Breadcrumbs__OrderedList",
   componentId: "sc-12awlbz-0"
-})(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;"]);
+})(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;flex-wrap:", ";"], function (_ref) {
+  var $wrap = _ref.$wrap;
+  return $wrap ? 'wrap' : 'nowrap';
+});
 var ListItem$1 = styled__default["default"].li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
-})(["display:inline-block;"]);
+})(["display:inline-block;min-width:30px;"]);
 var Separator = styled__default["default"](Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
@@ -6298,10 +6347,12 @@ var Collapsed = styled__default["default"](Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
 })(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
-var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref) {
-  var children = _ref.children,
-    collapse = _ref.collapse,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$k);
+var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref2, ref) {
+  var children = _ref2.children,
+    collapse = _ref2.collapse,
+    _ref2$wrap = _ref2.wrap,
+    wrap = _ref2$wrap === void 0 ? true : _ref2$wrap,
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded$k);
   var props = _objectSpread__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     ref: ref
   });
@@ -6312,8 +6363,8 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref
   var collapsedCrumbs = function collapsedCrumbs(allCrumbs) {
     var handleExpandClick = function handleExpandClick(e) {
       setExpanded(true);
-      var _ref2 = e,
-        key = _ref2.key;
+      var _ref3 = e,
+        key = _ref3.key;
       if (key === 'Enter') {
         setExpanded(true);
       }
@@ -6323,6 +6374,9 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref
     }
     return [allCrumbs[0], /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
+        style: {
+          minWidth: 'unset'
+        },
         children: /*#__PURE__*/jsxRuntime.jsx(Collapsed, {
           link: true,
           role: "button",
@@ -6361,6 +6415,7 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref
   return /*#__PURE__*/jsxRuntime.jsx("nav", _objectSpread__default["default"](_objectSpread__default["default"]({}, props), {}, {
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsxRuntime.jsx(OrderedList$1, {
+      $wrap: wrap,
       children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
     })
   }));
@@ -6368,13 +6423,13 @@ var Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs(_ref, ref
 
 // Breadcrumbs.displayName = 'eds-breadcrumbs'
 
-var _excluded$j = ["children", "maxWidth", "href", "as"];
+var _excluded$j = ["children", "maxWidth", "forceTooltip", "href", "as"];
 var states = breadcrumbs.states,
   typography$4 = breadcrumbs.typography;
 var StyledTypography = styled__default["default"](Typography).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   componentId: "sc-10nvwte-0"
-})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography$4.color, function (_ref) {
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography$4.color, function (_ref) {
   var $maxWidth = _ref.$maxWidth;
   return styled.css({
     maxWidth: $maxWidth
@@ -6383,6 +6438,7 @@ var StyledTypography = styled__default["default"](Typography).withConfig({
 var Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref) {
   var children = _ref2.children,
     maxWidth = _ref2.maxWidth,
+    forceTooltip = _ref2.forceTooltip,
     href = _ref2.href,
     as = _ref2.as,
     other = _objectWithoutProperties__default["default"](_ref2, _excluded$j);
@@ -6390,7 +6446,7 @@ var Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb(_ref2, ref) {
     href: href,
     ref: ref
   });
-  var showTooltip = maxWidth > 0;
+  var showTooltip = maxWidth > 0 || forceTooltip;
   var isHrefDefined = href !== undefined;
   var forwardedAs = react.useMemo(function () {
     return as ? as : isHrefDefined ? 'a' : 'span';
@@ -6775,7 +6831,7 @@ var MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
 // MenuList.displayName = 'EdsMenuList'
 
 var _excluded$g = ["children", "anchorEl", "onClose", "open"],
-  _excluded2$1 = ["anchorEl", "open", "placement", "onClose", "style", "className"];
+  _excluded2$1 = ["anchorEl", "open", "placement", "matchAnchorWidth", "onClose", "style", "className"];
 var border = menu.border;
 var MenuPaper = styled__default["default"](Paper).withConfig({
   displayName: "Menu__MenuPaper",
@@ -6864,6 +6920,8 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
     open = _ref3.open,
     _ref3$placement = _ref3.placement,
     placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement,
+    _ref3$matchAnchorWidt = _ref3.matchAnchorWidth,
+    matchAnchorWidth = _ref3$matchAnchorWidt === void 0 ? false : _ref3$matchAnchorWidt,
     onClose = _ref3.onClose,
     style = _ref3.style,
     className = _ref3.className,
@@ -6873,13 +6931,25 @@ var Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
   var token = edsUtils.useToken({
     density: density
   }, menu);
+  var floatingMiddleware = [react$1.offset(4), react$1.flip(), react$1.shift({
+    padding: 8
+  })];
+  if (matchAnchorWidth) {
+    floatingMiddleware = [].concat(_toConsumableArray__default["default"](floatingMiddleware), [react$1.size({
+      apply: function apply(_ref4) {
+        var rects = _ref4.rects,
+          elements = _ref4.elements;
+        Object.assign(elements.floating.style, {
+          width: "".concat(rects.reference.width, "px")
+        });
+      }
+    })]);
+  }
   var _useFloating = react$1.useFloating({
       placement: placement,
       open: open,
       onOpenChange: onClose,
-      middleware: [react$1.offset(4), react$1.flip(), react$1.shift({
-        padding: 8
-      })]
+      middleware: floatingMiddleware
     }),
     x = _useFloating.x,
     y = _useFloating.y,
@@ -7274,7 +7344,8 @@ var NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect(_ref2, re
   var labelProps = {
     htmlFor: id,
     label: label,
-    meta: meta
+    meta: meta,
+    disabled: disabled
   };
   var showLabel = label || meta;
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
@@ -8198,7 +8269,7 @@ var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOpti
   }));
 });
 
-var _excluded$5 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline"];
+var _excluded$5 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "loading", "hideClearButton", "onOptionsChange", "onInputChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline", "dropdownHeight"];
 var Container$1 = styled__default["default"].div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
@@ -8208,7 +8279,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;overflow-x:hidden;max-height:300px;padding:0;display:grid;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
+  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
 });
 var StyledButton = styled__default["default"](Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -8287,9 +8358,12 @@ function AutocompleteInner(props, ref) {
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$readOnly = props.readOnly,
     readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
     _props$hideClearButto = props.hideClearButton,
     hideClearButton = _props$hideClearButto === void 0 ? false : _props$hideClearButto,
     onOptionsChange = props.onOptionsChange,
+    onInputChange = props.onInputChange,
     selectedOptions = props.selectedOptions,
     multiple = props.multiple,
     _props$initialSelecte = props.initialSelectedOptions,
@@ -8307,6 +8381,8 @@ function AutocompleteInner(props, ref) {
     clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
     _props$multiline = props.multiline,
     multiline = _props$multiline === void 0 ? false : _props$multiline,
+    _props$dropdownHeight = props.dropdownHeight,
+    dropdownHeight = _props$dropdownHeight === void 0 ? 300 : _props$dropdownHeight,
     other = _objectWithoutProperties__default["default"](props, _excluded$5);
   var isControlled = Boolean(selectedOptions);
   var _useState = react.useState(options),
@@ -8410,6 +8486,7 @@ function AutocompleteInner(props, ref) {
     itemToString: getLabel,
     onInputValueChange: function onInputValueChange(_ref6) {
       var inputValue = _ref6.inputValue;
+      onInputChange && onInputChange(inputValue);
       setAvailableItems(options.filter(function (item) {
         if (optionsFilter) {
           return optionsFilter(item, inputValue);
@@ -8613,7 +8690,10 @@ function AutocompleteInner(props, ref) {
   })), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs(StyledList, _objectSpread__default["default"](_objectSpread__default["default"]({}, getMenuProps({
       'aria-multiselectable': multiple ? 'true' : null,
-      ref: scrollContainer
+      ref: scrollContainer,
+      style: {
+        maxHeight: "".concat(dropdownHeight, "px")
+      }
     }, {
       suppressRefError: true
     })), {}, {
@@ -8681,9 +8761,11 @@ function AutocompleteInner(props, ref) {
           readOnly: readOnly,
           onFocus: openSelect,
           onClick: openSelect,
-          rightAdornmentsWidth: 24 * 2 + 8 + 8,
+          rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
           rightAdornments: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
+            children: [loading && /*#__PURE__*/jsxRuntime.jsx(Progress.Circular, {
+              size: 16
+            }), showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
               variant: "ghost_icon",
               disabled: disabled || readOnly,
               "aria-label": 'clear options',

package/dist/esm/components/Accordion/AccordionItem.js

@@ -4,14 +4,16 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { forwardRef, useState, Children, cloneElement, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "children", "disabled"];
+var _excluded = ["headerLevel", "chevronPosition", "index", "accordionId", "isExpanded", "onExpandedChange", "children", "disabled"];
 var AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
   var headerLevel = _ref.headerLevel,
     chevronPosition = _ref.chevronPosition,
     _ref$index = _ref.index,
     index = _ref$index === void 0 ? 0 : _ref$index,
     accordionId = _ref.accordionId,
-    isExpanded = _ref.isExpanded,
+    _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    onExpandedChange = _ref.onExpandedChange,
     children = _ref.children,
     disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -19,14 +21,20 @@ var AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     expanded = _useState2[0],
     setExpanded = _useState2[1];
+  var controlled = onExpandedChange != undefined;
+  var activeExpandedState = controlled ? isExpanded : expanded;
   var toggleExpanded = function toggleExpanded() {
-    setExpanded(!expanded);
+    if (controlled) {
+      onExpandedChange(!isExpanded);
+    } else {
+      setExpanded(!expanded);
+    }
   };
   var Children$1 = Children.map(children, function (child, childIndex) {
     var headerId = "".concat(accordionId, "-header-").concat(index + 1);
     var panelId = "".concat(accordionId, "-panel-").concat(index + 1);
     return childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
-      isExpanded: expanded,
+      isExpanded: activeExpandedState,
       toggleExpanded: toggleExpanded,
       id: headerId,
       panelId: panelId,
@@ -35,14 +43,16 @@ var AccordionItem = /*#__PURE__*/forwardRef(function AccordionItem(_ref, ref) {
       parentIndex: index,
       disabled: disabled
     }) : /*#__PURE__*/cloneElement(child, {
-      hidden: !expanded,
+      hidden: !activeExpandedState,
       id: panelId,
       headerId: headerId
     });
   });
   useEffect(function () {
-    setExpanded(isExpanded);
-  }, [isExpanded]);
+    if (!controlled) {
+      setExpanded(isExpanded);
+    }
+  }, [isExpanded, controlled]);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     children: Children$1