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

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

@@ -56,11 +56,11 @@ var buttonTypography = edsTokens.tokens.typography.navigation.button,
   disabledBorderColor$2 = _tokens$colors$intera$l.disabled__border.rgba,
   disabledColor$3 = _tokens$colors$intera$l.disabled__fill.rgba,
   medium$7 = edsTokens.tokens.spacings.comfortable.medium,
-  _tokens$shape$2 = edsTokens.tokens.shape,
-  _tokens$shape$button = _tokens$shape$2.button,
+  _tokens$shape$1 = edsTokens.tokens.shape,
+  _tokens$shape$button = _tokens$shape$1.button,
   buttonHeight = _tokens$shape$button.minHeight,
   buttonBorderRadius$2 = _tokens$shape$button.borderRadius,
-  compactButtonHeight = _tokens$shape$2._modes.compact.button.minHeight,
+  compactButtonHeight = _tokens$shape$1._modes.compact.button.minHeight,
   outline = edsTokens.tokens.interactions.focused,
   _tokens$clickbounds$4 = edsTokens.tokens.clickbounds,
   clicboundHeight$2 = _tokens$clickbounds$4.default__base,
@@ -4008,16 +4008,16 @@ var _tokens$colors$c = edsTokens.tokens.colors,
   borderRadius$5 = edsTokens.tokens.shape.corners.borderRadius,
   _tokens$spacings$comf$b = edsTokens.tokens.spacings.comfortable,
   small$4 = _tokens$spacings$comf$b.small,
-  x_large = _tokens$spacings$comf$b.x_large,
-  xxx_large = _tokens$spacings$comf$b.xxx_large,
+  x_large$1 = _tokens$spacings$comf$b.x_large,
+  xxx_large$1 = _tokens$spacings$comf$b.xxx_large,
   typography$9 = edsTokens.tokens.typography;
 var tableOfContents = {
   typography: _objectSpread__default["default"](_objectSpread__default["default"]({}, typography$9.navigation.button), {}, {
     color: labelColor
   }),
   spacings: {
-    top: xxx_large,
-    bottom: x_large
+    top: xxx_large$1,
+    bottom: x_large$1
   },
   entities: {
     icon: {
@@ -4043,8 +4043,8 @@ var tableOfContents = {
     },
     sticky: {
       spacings: {
-        top: x_large,
-        right: x_large
+        top: x_large$1,
+        right: x_large$1
       }
     }
   },
@@ -7829,9 +7829,9 @@ var _tokens$colors$1 = edsTokens.tokens.colors,
   clickbounds = edsTokens.tokens.clickbounds,
   boxShadow$1 = edsTokens.tokens.elevation.raised,
   medium_small = edsTokens.tokens.spacings.comfortable.medium_small,
-  _tokens$shape$1 = edsTokens.tokens.shape,
-  circle = _tokens$shape$1.circle,
-  compactIconButton = _tokens$shape$1._modes.compact.icon_button,
+  _tokens$shape = edsTokens.tokens.shape,
+  circle = _tokens$shape.circle,
+  compactIconButton = _tokens$shape._modes.compact.icon_button,
   focusOutlineWidth = edsTokens.tokens.interactions.focused.width;
 var comfortable = {
   typography: labelTypography,
@@ -8005,20 +8005,18 @@ Switch.displayName = 'Switch';
 
 var typography = edsTokens.tokens.typography,
   colors = edsTokens.tokens.colors,
-  _tokens$shape = edsTokens.tokens.shape,
-  straight = _tokens$shape.straight,
-  borderRadius = _tokens$shape.corners.borderRadius,
+  borderRadius = edsTokens.tokens.shape.corners.borderRadius,
   _tokens$spacings$comf$1 = edsTokens.tokens.spacings.comfortable,
   spacingSmall = _tokens$spacings$comf$1.small,
   spacingMediumSmall = _tokens$spacings$comf$1.medium_small,
   spacingMedium = _tokens$spacings$comf$1.medium,
   spacingLarge = _tokens$spacings$comf$1.large,
-  xx_small = _tokens$spacings$comf$1.xx_small,
+  x_large = _tokens$spacings$comf$1.x_large,
+  xxx_large = _tokens$spacings$comf$1.xxx_large,
   boxShadow = edsTokens.tokens.elevation.temporary_nav;
 var selectTokens = {
   background: colors.ui.background__default.rgba,
   boxShadow: boxShadow,
-  minHeight: straight.minHeight,
   spacings: {
     top: '0',
     right: spacingLarge,
@@ -8056,6 +8054,7 @@ var selectTokens = {
       }
     },
     label: {
+      minHeight: xxx_large,
       spacings: {
         left: '0',
         right: '0',
@@ -8081,6 +8080,7 @@ var selectTokens = {
           }
         },
         label: {
+          minHeight: x_large,
           spacings: {
             left: '0',
             right: '0',
@@ -8102,7 +8102,8 @@ var multiSelect = mergeDeepRight$1(selectTokens, {
   modes: {
     compact: {
       spacings: {
-        top: xx_small,
+        top: '0',
+        //xx_small,
         bottom: '0'
       }
     }
@@ -8359,10 +8360,16 @@ function AutocompleteInner(props, ref) {
       return scrollContainer.current;
     },
     estimateSize: react.useCallback(function () {
-      return 48;
-    }, []),
+      return parseInt(token().entities.label.minHeight);
+    }, [token]),
     overscan: 25
   });
+
+  //https://github.com/TanStack/virtual/discussions/379#discussioncomment-3501037
+  edsUtils.useIsomorphicLayoutEffect(function () {
+    var _rowVirtualizer$measu;
+    rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : (_rowVirtualizer$measu = rowVirtualizer.measure) === null || _rowVirtualizer$measu === void 0 ? void 0 : _rowVirtualizer$measu.call(rowVirtualizer);
+  }, [rowVirtualizer, density]);
   var comboBoxProps = {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],

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

@@ -11,7 +11,7 @@ import { List } from '../List/index.js';
 import { Icon } from '../Icon/index.js';
 import { close, arrow_drop_up, arrow_drop_down } from '@equinor/eds-icons';
 import { multiSelect, selectTokens } from './Autocomplete.tokens.js';
-import { bordersTemplate, useToken } from '@equinor/eds-utils';
+import { bordersTemplate, useToken, useIsomorphicLayoutEffect } from '@equinor/eds-utils';
 import { AutocompleteOption } from './Option.js';
 import { useFloating, offset, flip, shift, size, useInteractions, autoUpdate, FloatingPortal } from '@floating-ui/react-dom-interactions';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -216,10 +216,16 @@ function AutocompleteInner(props, ref) {
       return scrollContainer.current;
     },
     estimateSize: useCallback(function () {
-      return 48;
-    }, []),
+      return parseInt(token().entities.label.minHeight);
+    }, [token]),
     overscan: 25
   });
+
+  //https://github.com/TanStack/virtual/discussions/379#discussioncomment-3501037
+  useIsomorphicLayoutEffect(function () {
+    var _rowVirtualizer$measu;
+    rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : (_rowVirtualizer$measu = rowVirtualizer.measure) === null || _rowVirtualizer$measu === void 0 ? void 0 : _rowVirtualizer$measu.call(rowVirtualizer);
+  }, [rowVirtualizer, density]);
   var comboBoxProps = {
     items: availableItems,
     initialSelectedItem: initialSelectedOptions[0],

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

@@ -4,20 +4,18 @@ import mergeDeepRight from '../../node_modules/.pnpm/ramda@0.28.0/node_modules/r
 
 var typography = tokens.typography,
   colors = tokens.colors,
-  _tokens$shape = tokens.shape,
-  straight = _tokens$shape.straight,
-  borderRadius = _tokens$shape.corners.borderRadius,
+  borderRadius = tokens.shape.corners.borderRadius,
   _tokens$spacings$comf = tokens.spacings.comfortable,
   spacingSmall = _tokens$spacings$comf.small,
   spacingMediumSmall = _tokens$spacings$comf.medium_small,
   spacingMedium = _tokens$spacings$comf.medium,
   spacingLarge = _tokens$spacings$comf.large,
-  xx_small = _tokens$spacings$comf.xx_small,
+  x_large = _tokens$spacings$comf.x_large,
+  xxx_large = _tokens$spacings$comf.xxx_large,
   boxShadow = tokens.elevation.temporary_nav;
 var selectTokens = {
   background: colors.ui.background__default.rgba,
   boxShadow: boxShadow,
-  minHeight: straight.minHeight,
   spacings: {
     top: '0',
     right: spacingLarge,
@@ -55,6 +53,7 @@ var selectTokens = {
       }
     },
     label: {
+      minHeight: xxx_large,
       spacings: {
         left: '0',
         right: '0',
@@ -80,6 +79,7 @@ var selectTokens = {
           }
         },
         label: {
+          minHeight: x_large,
           spacings: {
             left: '0',
             right: '0',
@@ -101,7 +101,8 @@ var multiSelect = mergeDeepRight(selectTokens, {
   modes: {
     compact: {
       spacings: {
-        top: xx_small,
+        top: '0',
+        //xx_small,
         bottom: '0'
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.28.0-dev12152022",
+  "version": "0.28.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -81,7 +81,7 @@
     "@babel/runtime": "^7.19.0",
     "@floating-ui/react-dom-interactions": "^0.10.1",
     "@tanstack/react-virtual": "3.0.0-beta.30",
-    "downshift": "^7.0.1",
+    "downshift": "^7.0.5",
     "@equinor/eds-icons": "0.17.0",
     "@equinor/eds-tokens": "0.9.0",
     "@equinor/eds-utils": "0.7.0"