@equinor/eds-core-react 0.28.0-dev12052022 → 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,14 +8102,15 @@ var multiSelect = mergeDeepRight$1(selectTokens, {
   modes: {
     compact: {
       spacings: {
-        top: xx_small,
+        top: '0',
+        //xx_small,
         bottom: '0'
       }
     }
   }
 });
 
-var _excluded$6 = ["value", "multiple", "isSelected", "isDisabled", "onClick", "aria-selected"];
+var _excluded$6 = ["value", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
 var StyledListItem = styled__default["default"].li.withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
@@ -8119,20 +8120,22 @@ 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;word-break:break-word;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;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",
   componentId: "sc-1ly11zu-1"
 })(function (_ref2) {
-  var theme = _ref2.theme;
-  return styled.css(["", ""], edsUtils.spacingsTemplate(theme.entities.label.spacings));
+  var theme = _ref2.theme,
+    multiline = _ref2.multiline;
+  return styled.css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], edsUtils.spacingsTemplate(theme.entities.label.spacings), multiline ? 'normal' : 'nowrap', multiline ? 'initial' : 'hidden');
 });
 var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOption(_ref3, ref) {
   var value = _ref3.value,
     multiple = _ref3.multiple,
     isSelected = _ref3.isSelected,
     isDisabled = _ref3.isDisabled,
+    multiline = _ref3.multiline,
     _onClick = _ref3.onClick,
     ariaSelected = _ref3['aria-selected'],
     other = _objectWithoutProperties__default["default"](_ref3, _excluded$6);
@@ -8154,12 +8157,13 @@ var AutocompleteOption = /*#__PURE__*/react.forwardRef(function AutocompleteOpti
         return null;
       }
     }), /*#__PURE__*/jsxRuntime.jsx(Label, {
+      multiline: multiline,
       children: value
     })]
   }));
 });
 
-var _excluded$5 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange"];
+var _excluded$5 = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline"];
 var Container$1 = styled__default["default"].div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
@@ -8266,6 +8270,8 @@ function AutocompleteInner(props, ref) {
     optionLabel = props.optionLabel,
     _props$clearSearchOnC = props.clearSearchOnChange,
     clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
+    _props$multiline = props.multiline,
+    multiline = _props$multiline === void 0 ? false : _props$multiline,
     other = _objectWithoutProperties__default["default"](props, _excluded$5);
   var anchorRef = react.useRef(null);
   var isControlled = Boolean(selectedOptions);
@@ -8354,10 +8360,16 @@ function AutocompleteInner(props, ref) {
       return scrollContainer.current;
     },
     estimateSize: react.useCallback(function () {
-      return 48;
-    }, []),
-    overscan: 10
+      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],
@@ -8597,16 +8609,20 @@ function AutocompleteInner(props, ref) {
           multiple: multiple,
           highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
           isSelected: isSelected,
-          isDisabled: isDisabled
-        }, getItemProps({
-          ref: rowVirtualizer.measureElement,
+          isDisabled: isDisabled,
+          multiline: multiline
+        }, getItemProps(_objectSpread__default["default"](_objectSpread__default["default"]({}, multiline && {
+          ref: rowVirtualizer.measureElement
+        }), {}, {
           item: item,
           index: index,
           disabled: disabled,
-          style: {
+          style: _objectSpread__default["default"]({
             transform: "translateY(".concat(virtualItem.start, "px)")
-          }
-        })), virtualItem.key);
+          }, !multiline && {
+            height: "".concat(virtualItem.size, "px")
+          })
+        }))), virtualItem.key);
       })]
     }))
   }));

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';
@@ -19,7 +19,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"];
+var _excluded = ["options", "label", "meta", "className", "style", "disabled", "readOnly", "hideClearButton", "onOptionsChange", "selectedOptions", "multiple", "initialSelectedOptions", "disablePortal", "optionDisabled", "optionsFilter", "autoWidth", "placeholder", "optionLabel", "clearSearchOnChange", "multiline"];
 var Container = styled.div.withConfig({
   displayName: "Autocomplete__Container",
   componentId: "sc-yvif0e-0"
@@ -126,6 +126,8 @@ function AutocompleteInner(props, ref) {
     optionLabel = props.optionLabel,
     _props$clearSearchOnC = props.clearSearchOnChange,
     clearSearchOnChange = _props$clearSearchOnC === void 0 ? true : _props$clearSearchOnC,
+    _props$multiline = props.multiline,
+    multiline = _props$multiline === void 0 ? false : _props$multiline,
     other = _objectWithoutProperties(props, _excluded);
   var anchorRef = useRef(null);
   var isControlled = Boolean(selectedOptions);
@@ -214,10 +216,16 @@ function AutocompleteInner(props, ref) {
       return scrollContainer.current;
     },
     estimateSize: useCallback(function () {
-      return 48;
-    }, []),
-    overscan: 10
+      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],
@@ -457,16 +465,20 @@ function AutocompleteInner(props, ref) {
           multiple: multiple,
           highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
           isSelected: isSelected,
-          isDisabled: isDisabled
-        }, getItemProps({
-          ref: rowVirtualizer.measureElement,
+          isDisabled: isDisabled,
+          multiline: multiline
+        }, getItemProps(_objectSpread(_objectSpread({}, multiline && {
+          ref: rowVirtualizer.measureElement
+        }), {}, {
           item: item,
           index: index,
           disabled: disabled,
-          style: {
+          style: _objectSpread({
             transform: "translateY(".concat(virtualItem.start, "px)")
-          }
-        })), virtualItem.key);
+          }, !multiline && {
+            height: "".concat(virtualItem.size, "px")
+          })
+        }))), virtualItem.key);
       })]
     }))
   }));

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/dist/esm/components/Autocomplete/Option.js

@@ -6,7 +6,7 @@ import { typographyTemplate, spacingsTemplate } from '@equinor/eds-utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 
-var _excluded = ["value", "multiple", "isSelected", "isDisabled", "onClick", "aria-selected"];
+var _excluded = ["value", "multiple", "isSelected", "isDisabled", "multiline", "onClick", "aria-selected"];
 var StyledListItem = styled.li.withConfig({
   displayName: "Option__StyledListItem",
   componentId: "sc-1ly11zu-0"
@@ -16,20 +16,22 @@ 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;word-break:break-word;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;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",
   componentId: "sc-1ly11zu-1"
 })(function (_ref2) {
-  var theme = _ref2.theme;
-  return css(["", ""], spacingsTemplate(theme.entities.label.spacings));
+  var theme = _ref2.theme,
+    multiline = _ref2.multiline;
+  return css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;"], spacingsTemplate(theme.entities.label.spacings), multiline ? 'normal' : 'nowrap', multiline ? 'initial' : 'hidden');
 });
 var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_ref3, ref) {
   var value = _ref3.value,
     multiple = _ref3.multiple,
     isSelected = _ref3.isSelected,
     isDisabled = _ref3.isDisabled,
+    multiline = _ref3.multiline,
     _onClick = _ref3.onClick,
     ariaSelected = _ref3['aria-selected'],
     other = _objectWithoutProperties(_ref3, _excluded);
@@ -51,6 +53,7 @@ var AutocompleteOption = /*#__PURE__*/forwardRef(function AutocompleteOption(_re
         return null;
       }
     }), /*#__PURE__*/jsx(Label, {
+      multiline: multiline,
       children: value
     })]
   }));

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

@@ -42,6 +42,8 @@ export declare type AutocompleteProps<T> = {
     placeholder?: string;
     /** Toggle if input is cleared when an options is selected when `multiple` is `true`*/
     clearSearchOnChange?: boolean;
+    /** Will wrap overflowing text at the expence of some performance overhead to calculate item heigths. Mostly relevant in combination with autoWidth */
+    multiline?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 declare function AutocompleteInner<T>(props: AutocompleteProps<T>, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element;
 export declare const Autocomplete: <T>(props: {
@@ -84,6 +86,8 @@ export declare const Autocomplete: <T>(props: {
     placeholder?: string;
     /** Toggle if input is cleared when an options is selected when `multiple` is `true`*/
     clearSearchOnChange?: boolean;
+    /** Will wrap overflowing text at the expence of some performance overhead to calculate item heigths. Mostly relevant in combination with autoWidth */
+    multiline?: boolean;
 } & HTMLAttributes<HTMLDivElement> & {
     ref?: React.ForwardedRef<HTMLDivElement>;
     displayName?: string | undefined;

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

@@ -5,6 +5,7 @@ export declare type AutocompleteOptionProps = {
     highlighted: string;
     isSelected: boolean;
     isDisabled?: boolean;
+    multiline: boolean;
 } & LiHTMLAttributes<HTMLLIElement>;
 export declare const AutocompleteOption: import("react").ForwardRefExoticComponent<{
     value: string;
@@ -12,4 +13,5 @@ export declare const AutocompleteOption: import("react").ForwardRefExoticCompone
     highlighted: string;
     isSelected: boolean;
     isDisabled?: boolean;
+    multiline: boolean;
 } & LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.28.0-dev12052022",
+  "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"