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

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

@@ -9,6 +9,7 @@ import styled, { css, ThemeProvider } from 'styled-components';
 import { Button } from '../Button/index.js';
 import { List } from '../List/index.js';
 import { Icon } from '../Icon/index.js';
+import { Progress } from '../Progress/index.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
 import { bordersTemplate, useToken, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
@@ -19,7 +20,7 @@ import { useEds } from '../EdsProvider/eds.context.js';
 import { Label } from '../Label/Label.js';
 import { Input } from '../Input/Input.js';
 
-var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline"];
+var _excluded = ["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 = styled.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
@@ -29,7 +30,7 @@ var StyledList = styled(List).withConfig({
   componentId: "sc-yvif0e-1"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;max-height:300px;padding:0;display:grid;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
+  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
 });
 var StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -108,9 +109,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,
@@ -128,6 +132,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(props, _excluded);
   var isControlled = Boolean(selectedOptions);
   var _useState = useState(options),
@@ -231,6 +237,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);
@@ -434,7 +441,10 @@ function AutocompleteInner(props, ref) {
   })), {}, {
     children: /*#__PURE__*/jsxs(StyledList, _objectSpread(_objectSpread({}, getMenuProps({
       'aria-multiselectable': multiple ? 'true' : null,
-      ref: scrollContainer
+      ref: scrollContainer,
+      style: {
+        maxHeight: "".concat(dropdownHeight, "px")
+      }
     }, {
       suppressRefError: true
     })), {}, {
@@ -502,9 +512,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__*/jsxs(Fragment, {
-            children: [showClearButton && /*#__PURE__*/jsx(StyledButton, {
+            children: [loading && /*#__PURE__*/jsx(Progress.Circular, {
+              size: 16
+            }), showClearButton && /*#__PURE__*/jsx(StyledButton, {
               variant: "ghost_icon",
               disabled: disabled || readOnly,
               "aria-label": 'clear options',
@@ -528,6 +540,7 @@ function AutocompleteInner(props, ref) {
           })
         }, other))
       }), disablePortal ? optionsList : /*#__PURE__*/jsx(FloatingPortal, {
+        id: "eds-autocomplete-container",
         children: optionsList
       })]
     })

package/dist/esm/components/Breadcrumbs/Breadcrumb.js

@@ -7,13 +7,13 @@ import { jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
-var _excluded = ["children", "maxWidth", "href", "as"];
+var _excluded = ["children", "maxWidth", "forceTooltip", "href", "as"];
 var states = breadcrumbs.states,
   typography = breadcrumbs.typography;
 var StyledTypography = styled(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.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.color, function (_ref) {
   var $maxWidth = _ref.$maxWidth;
   return css({
     maxWidth: $maxWidth
@@ -22,6 +22,7 @@ var StyledTypography = styled(Typography).withConfig({
 var Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
   var children = _ref2.children,
     maxWidth = _ref2.maxWidth,
+    forceTooltip = _ref2.forceTooltip,
     href = _ref2.href,
     as = _ref2.as,
     other = _objectWithoutProperties(_ref2, _excluded);
@@ -29,7 +30,7 @@ var Breadcrumb = /*#__PURE__*/forwardRef(function Breadcrumb(_ref2, ref) {
     href: href,
     ref: ref
   });
-  var showTooltip = maxWidth > 0;
+  var showTooltip = maxWidth > 0 || forceTooltip;
   var isHrefDefined = href !== undefined;
   var forwardedAs = useMemo(function () {
     return as ? as : isHrefDefined ? 'a' : 'span';

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -8,18 +8,21 @@ import { spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Typography } from '../Typography/Typography.js';
 
-var _excluded = ["children", "collapse"];
+var _excluded = ["children", "collapse", "wrap"];
 var spacings = breadcrumbs.spacings,
   typography = breadcrumbs.typography,
   states = breadcrumbs.states;
 var OrderedList = styled.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 = styled.li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
-})(["display:inline-block;"]);
+})(["display:inline-block;min-width:30px;"]);
 var Separator = styled(Typography).withConfig({
   displayName: "Breadcrumbs__Separator",
   componentId: "sc-12awlbz-2"
@@ -28,10 +31,12 @@ var Collapsed = styled(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.hover.typography.color, typography.color);
-var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
-  var children = _ref.children,
-    collapse = _ref.collapse,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var Breadcrumbs = /*#__PURE__*/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(_ref2, _excluded);
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref
   });
@@ -42,8 +47,8 @@ var Breadcrumbs = /*#__PURE__*/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);
       }
@@ -53,6 +58,9 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
     }
     return [allCrumbs[0], /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(ListItem, {
+        style: {
+          minWidth: 'unset'
+        },
         children: /*#__PURE__*/jsx(Collapsed, {
           link: true,
           role: "button",
@@ -91,6 +99,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(_ref, ref) {
   return /*#__PURE__*/jsx("nav", _objectSpread(_objectSpread({}, props), {}, {
     "aria-label": "breadcrumbs",
     children: /*#__PURE__*/jsx(OrderedList, {
+      $wrap: wrap,
       children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
     })
   }));

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

@@ -11,7 +11,7 @@ var StyledDialogHeader = styled.div.withConfig({
   componentId: "sc-mbwcos-0"
 })(function (_ref) {
   var theme = _ref.theme;
-  return 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 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 = styled(Divider).withConfig({
   displayName: "DialogHeader__StyledDivider",

package/dist/esm/components/Input/Input.js

@@ -19,7 +19,7 @@ var Container = styled.div.withConfig({
     readOnly = _ref.readOnly;
   var states = token.states,
     entities = token.entities;
-  return 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, 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, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
+  return 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, 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, outlineTemplate(states.focus.outline), disabled && css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && css({
     background: states.readOnly.background,
     boxShadow: states.readOnly.boxShadow
   }));

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

@@ -1,3 +1,4 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { forwardRef, useEffect, useMemo } from 'react';
@@ -6,13 +7,13 @@ import { MenuProvider, useMenu } from './Menu.context.js';
 import { MenuList } from './MenuList.js';
 import { bordersTemplate, useToken, mergeRefs, useIsomorphicLayoutEffect, useGlobalKeyPress } from '@equinor/eds-utils';
 import { menu } from './Menu.tokens.js';
-import { useFloating, offset, flip, shift, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react';
+import { offset, flip, shift, size, useFloating, autoUpdate, useInteractions, useDismiss, FloatingPortal } from '@floating-ui/react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { Paper } from '../Paper/Paper.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 
 var _excluded = ["children", "anchorEl", "onClose", "open"],
-  _excluded2 = ["anchorEl", "open", "placement", "onClose", "style", "className"];
+  _excluded2 = ["anchorEl", "open", "placement", "matchAnchorWidth", "onClose", "style", "className"];
 var border = menu.border;
 var MenuPaper = styled(Paper).withConfig({
   displayName: "Menu__MenuPaper",
@@ -101,6 +102,8 @@ var Menu = /*#__PURE__*/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,
@@ -110,13 +113,25 @@ var Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
   var token = useToken({
     density: density
   }, menu);
+  var floatingMiddleware = [offset(4), flip(), shift({
+    padding: 8
+  })];
+  if (matchAnchorWidth) {
+    floatingMiddleware = [].concat(_toConsumableArray(floatingMiddleware), [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 = useFloating({
       placement: placement,
       open: open,
       onOpenChange: onClose,
-      middleware: [offset(4), flip(), shift({
-        padding: 8
-      })]
+      middleware: floatingMiddleware
     }),
     x = _useFloating.x,
     y = _useFloating.y,

package/dist/esm/components/Select/NativeSelect/NativeSelect.js

@@ -52,7 +52,8 @@ var NativeSelect = /*#__PURE__*/forwardRef(function NativeSelect(_ref2, ref) {
   var labelProps = {
     htmlFor: id,
     label: label,
-    meta: meta
+    meta: meta,
+    disabled: disabled
   };
   var showLabel = label || meta;
   return /*#__PURE__*/jsx(ThemeProvider, {

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

@@ -10,17 +10,16 @@ var _tokens$entities = slider.entities,
 var StyledOutput = styled.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;
-}, typographyTemplate(output.typography), slider.background, track.spacings.top);
-var Output = /*#__PURE__*/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;"], typographyTemplate(output.typography), slider.background, track.spacings.top);
+var Output = /*#__PURE__*/forwardRef(function Output(_ref, ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    htmlFor = _ref.htmlFor;
   return /*#__PURE__*/jsx(StyledOutput, {
     ref: ref,
-    value: value,
+    style: {
+      '--val': value
+    },
     htmlFor: htmlFor,
     children: children
   });

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

@@ -1,6 +1,6 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { slider } from './Slider.tokens.js';
@@ -21,41 +21,44 @@ var fakeTrackBgHover = css({
 });
 var trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
 var wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
-var RangeWrapper = styled.div.withConfig({
+var RangeWrapper = styled.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({
+      '--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.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.div.attrs(function (_ref2) {
+  var $min = _ref2.$min,
+    $max = _ref2.$max,
+    value = _ref2.value,
+    disabled = _ref2.disabled,
+    style = _ref2.style;
+  return {
+    style: _objectSpread({
+      '--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.div.withConfig({
   displayName: "Slider__WrapperGroupLabel",
   componentId: "sc-n1grrg-2"
@@ -68,26 +71,26 @@ var SrOnlyLabel = styled.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__*/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(_ref10, _excluded);
+var Slider = /*#__PURE__*/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(_ref3, _excluded);
   var isRangeSlider = Array.isArray(value);
   var parsedValue = isRangeSlider ? value : [value];
   var _useState = useState(parsedValue),
@@ -98,6 +101,10 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     sliderValue = _useState4[0],
     setSliderValue = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mousePressed = _useState6[0],
+    setMousePressed = _useState6[1];
   useEffect(function () {
     if (isRangeSlider) {
       if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
@@ -118,6 +125,18 @@ var Slider = /*#__PURE__*/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
@@ -146,18 +165,18 @@ var Slider = /*#__PURE__*/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';
@@ -165,6 +184,22 @@ var Slider = /*#__PURE__*/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 = useId(null, 'inputA');
   var inputIdB = useId(null, 'inputB');
@@ -187,10 +222,12 @@ var Slider = /*#__PURE__*/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__*/jsx(WrapperGroupLabelDots, {}), /*#__PURE__*/jsx(SrOnlyLabel, {
         htmlFor: inputIdA,
         children: "Value A"
@@ -256,8 +293,8 @@ var Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
       })]
     })) : /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
-      max: max,
-      min: min,
+      $max: max,
+      $min: min,
       value: sliderValue[0],
       disabled: disabled,
       children: [/*#__PURE__*/jsx(SliderInput, {

package/dist/types/components/Accordion/AccordionItem.d.ts

@@ -5,7 +5,12 @@ export type AccordionItemProps = {
     accordionId?: string;
     /** Is AccordionItem expanded */
     isExpanded?: boolean;
-    /** accordion item is disabled */
+    /**
+     * Callback fired with expanded state change.
+     * When this prop is present, the accordion is in controlled state
+     */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /** Accordion item is disabled */
     disabled?: boolean;
 } & HTMLAttributes<HTMLDivElement> & AccordionProps;
 declare const AccordionItem: import("react").ForwardRefExoticComponent<{
@@ -13,7 +18,12 @@ declare const AccordionItem: import("react").ForwardRefExoticComponent<{
     accordionId?: string;
     /** Is AccordionItem expanded */
     isExpanded?: boolean;
-    /** accordion item is disabled */
+    /**
+     * Callback fired with expanded state change.
+     * When this prop is present, the accordion is in controlled state
+     */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /** Accordion item is disabled */
     disabled?: boolean;
 } & HTMLAttributes<HTMLDivElement> & AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
 export { AccordionItem };