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

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

@@ -8109,7 +8109,7 @@ var multiSelect = mergeDeepRight$1(selectTokens, {
   }
 });
 
-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 +8119,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 +8156,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 +8269,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);
@@ -8356,7 +8361,7 @@ function AutocompleteInner(props, ref) {
     estimateSize: react.useCallback(function () {
       return 48;
     }, []),
-    overscan: 10
+    overscan: 25
   });
   var comboBoxProps = {
     items: availableItems,
@@ -8597,16 +8602,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

@@ -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);
@@ -216,7 +218,7 @@ function AutocompleteInner(props, ref) {
     estimateSize: useCallback(function () {
       return 48;
     }, []),
-    overscan: 10
+    overscan: 25
   });
   var comboBoxProps = {
     items: availableItems,
@@ -457,16 +459,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/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-dev12152022",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"