@elvia/elvis-dropdown - npm Package Compare versions

Comparing version 9.3.4 to 9.4.0

CHANGELOG.json

@@ -5,2 +5,18 @@ {
     {
+      "date": "07.03.24",
+      "version": "9.4.0",
+      "changelog": [
+        {
+          "type": "new_feature",
+          "changes": [
+            "The dropdown overlay will now grow to the right if an option is too long to fit in the overlay."
+          ]
+        },
+        {
+          "type": "patch",
+          "changes": ["Updated internal dependencies."]
+        }
+      ]
+    },
+    {
       "date": "15.02.24",
@@ -7,0 +23,0 @@ "version": "9.3.4",

dist/react/checkbox/checkbox.d.ts

@@ -0,3 +1,3 @@
+import { FormFieldSizes } from '@elvia/elvis-toolbox';
 import React from 'react';
-import { FormFieldSizes } from '@elvia/elvis-toolbox';
 export interface CheckboxProps {
@@ -4,0 +4,0 @@ isChecked?: boolean;

dist/react/dropdown-input/dropdownInput.d.ts

@@ -0,5 +1,5 @@
+import { FormFieldSizes } from '@elvia/elvis-toolbox';
 import React, { KeyboardEvent } from 'react';
+import { DropdownProps } from '../elviaDropdown.types';
 import { DropdownItem, DropdownValue } from '.../public-api/publicApi.public';
-import { DropdownProps } from '../elviaDropdown.types';
-import { FormFieldSizes } from '@elvia/elvis-toolbox';
 interface Props {
@@ -6,0 +6,0 @@ placeholder?: string;

dist/react/dropdown-overlay/loadMoreButton.d.ts

@@ -0,3 +1,3 @@
+import { FormFieldSizes } from '@elvia/elvis-toolbox';
 import React from 'react';
-import { FormFieldSizes } from '@elvia/elvis-toolbox';
 import { DropdownItem, DropdownValueType } from '.../public-api/publicApi.public';
@@ -4,0 +4,0 @@ interface LoadMoreProps {

dist/react/dropdown-overlay/selectAllOption.d.ts

@@ -0,4 +1,4 @@
+import { FormFieldSizes } from '@elvia/elvis-toolbox';
 import React from 'react';
 import { DropdownItem, DropdownValue, DropdownValueType } from '.../public-api/publicApi.public';
-import { FormFieldSizes } from '@elvia/elvis-toolbox';
 interface SelectAllOptionProps {
@@ -5,0 +5,0 @@ item: DropdownItem;

dist/react/elvia-dropdown.js

 // components/elvis-dropdown/src/react/elvia-dropdown.tsx
+import arrowDownBold from "@elvia/elvis-assets-icons/dist/icons/arrowDownBold";
+import { FormFieldLabel, IconWrapper as IconWrapper5, useBreakpoint, useConnectedOverlay as useConnectedOverlay2, useInputModeDetection, useWebComponentState, warnDeprecatedProps } from "@elvia/elvis-toolbox";
 import React10, { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
@@ -79,7 +81,4 @@
 
-// components/elvis-dropdown/src/react/elvia-dropdown.tsx
-import { warnDeprecatedProps, FormFieldLabel, useConnectedOverlay as useConnectedOverlay2, useInputModeDetection, useBreakpoint, useWebComponentState, IconWrapper as IconWrapper5 } from "@elvia/elvis-toolbox";
-import arrowDownBold from "@elvia/elvis-assets-icons/dist/icons/arrowDownBold";
-
 // components/elvis-dropdown/src/react/dropdown-input/dropdownInput.tsx
+import DOMPurify from "dompurify";
 import React, { useEffect, useState } from "react";
@@ -109,19 +108,6 @@
 
-// components/elvis-dropdown/src/react/dropdown-input/dropdownInput.tsx
-import DOMPurify from "dompurify";
-
-// components/elvis-dropdown/src/react/dropdown-input/dropdownInputStyles.tsx
-import { FormFieldInput } from "@elvia/elvis-toolbox";
-import styled, { css } from "styled-components";
-var Input = styled(FormFieldInput).withConfig({
-  displayName: "Input",
-  componentId: "sc-nenx3b-0"
-})`flex:1;text-overflow:ellipsis;${({
-  $isEditable
-}) => !$isEditable && css`::-moz-selection{background:transparent;}::selection{background:transparent;}`};`;
-
 // components/elvis-dropdown/src/react/styledComponents.tsx
-import styled2, { css as css2 } from "styled-components";
 import { FormFieldContainer, FormFieldInputContainer } from "@elvia/elvis-toolbox";
-var DropdownContainer = styled2(FormFieldContainer).withConfig({
+import styled, { css } from "styled-components";
+var DropdownContainer = styled(FormFieldContainer).withConfig({
   displayName: "DropdownContainer",
@@ -131,20 +117,20 @@ componentId: "sc-1u4m1mo-0"
   isFullWidth
-}) => !isFullWidth && css2`max-width:448px;`} ${({
+}) => !isFullWidth && css`max-width:448px;`} ${({
   isDisabled
-}) => !isDisabled && css2`${DropdownInputContainer}{cursor:pointer;}`};${({
+}) => !isDisabled && css`${DropdownInputContainer}{cursor:pointer;}`};${({
   size
-}) => size === "small" && css2`${IconRotator}{width:32px;height:32px;}`};`;
-var DropdownInputContainer = styled2(FormFieldInputContainer).withConfig({
+}) => size === "small" && css`${IconRotator}{width:32px;height:32px;}`};`;
+var DropdownInputContainer = styled(FormFieldInputContainer).withConfig({
   displayName: "DropdownInputContainer",
   componentId: "sc-1u4m1mo-1"
 })`width:100%;`;
-var OverlayPositioner = styled2.div.withConfig({
+var OverlayPositioner = styled.div.withConfig({
   displayName: "OverlayPositioner",
   componentId: "sc-1u4m1mo-2"
 })`position:absolute;z-index:99999;`;
-var IconRotator = styled2.div.withConfig({
+var IconRotator = styled.div.withConfig({
   displayName: "IconRotator",
   componentId: "sc-1u4m1mo-3"
-})`width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:none;transform:rotate(0deg);transition:transform 150ms ease;${(props) => props.isRotated && css2`transform:rotate(180deg);`}`;
-var DropdownIconContainer = styled2.div.withConfig({
+})`width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:none;transform:rotate(0deg);transition:transform 150ms ease;${(props) => props.isRotated && css`transform:rotate(180deg);`}`;
+var DropdownIconContainer = styled.div.withConfig({
   displayName: "DropdownIconContainer",
@@ -154,4 +140,14 @@ componentId: "sc-1u4m1mo-4"
   size
-}) => size === "small" && css2`width:24px;height:24px;`};}`;
+}) => size === "small" && css`width:24px;height:24px;`};}`;
 
+// components/elvis-dropdown/src/react/dropdown-input/dropdownInputStyles.tsx
+import { FormFieldInput } from "@elvia/elvis-toolbox";
+import styled2, { css as css2 } from "styled-components";
+var Input = styled2(FormFieldInput).withConfig({
+  displayName: "Input",
+  componentId: "sc-nenx3b-0"
+})`flex:1;text-overflow:ellipsis;${({
+  $isEditable
+}) => !$isEditable && css2`::-moz-selection{background:transparent;}::selection{background:transparent;}`};`;
+
 // components/elvis-dropdown/src/react/dropdown-input/dropdownInput.tsx
@@ -234,24 +230,16 @@ var DropdownInput = ({
 
-// components/elvis-dropdown/src/react/error/dropdownError.tsx
-import React2 from "react";
-import { FormFieldErrorContainer, FormFieldError, IconWrapper } from "@elvia/elvis-toolbox";
-import removeCircle from "@elvia/elvis-assets-icons/dist/icons/removeCircle";
-var DropdownError = ({
-  errorText
-}) => {
-  return /* @__PURE__ */ React2.createElement(FormFieldErrorContainer, null, /* @__PURE__ */ React2.createElement(IconWrapper, { icon: removeCircle, color: "icon-danger", size: "xs" }), /* @__PURE__ */ React2.createElement(FormFieldError, { "data-testid": "error" }, errorText));
-};
-
 // components/elvis-dropdown/src/react/dropdown-overlay/dropdownOverlay.tsx
-import React9, { useEffect as useEffect4, useState as useState4, useRef as useRef3, useMemo as useMemo3 } from "react";
+import { Overlay } from "@elvia/elvis-toolbox";
+import DOMPurify2 from "dompurify";
+import React8, { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 
 // components/elvis-dropdown/src/react/dropdown-item/dropdownItem.tsx
-import { isSsr, useConnectedOverlay, IconWrapper as IconWrapper2 } from "@elvia/elvis-toolbox";
-import React4, { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import arrowRight from "@elvia/elvis-assets-icons/dist/icons/arrowRight";
+import { getThemeColor as getThemeColor3 } from "@elvia/elvis-colors";
+import { IconWrapper, isSsr, useConnectedOverlay } from "@elvia/elvis-toolbox";
+import { Tooltip } from "@elvia/elvis-tooltip/react";
+import React3, { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
 
-// components/elvis-dropdown/src/react/dropdown-item/dropdownItemStyles.tsx
-import { getThemeColor as getThemeColor2 } from "@elvia/elvis-colors";
-import { IconButton } from "@elvia/elvis-toolbox";
-import { getTypographyCss } from "@elvia/elvis-typography";
-import styled4, { css as css4 } from "styled-components";
+// components/elvis-dropdown/src/react/checkbox/checkbox.tsx
+import React2 from "react";
 
@@ -293,3 +281,40 @@ // components/elvis-dropdown/src/react/checkbox/checkboxStyles.tsx
 
+// components/elvis-dropdown/src/react/checkbox/checkbox.tsx
+var Checkbox = ({
+  isIndeterminate,
+  isChecked,
+  isDisabled,
+  size,
+  isFocused
+}) => {
+  return /* @__PURE__ */ React2.createElement(StyledCheckbox, { isIndeterminate: isIndeterminate && !isChecked, isChecked, isDisabled, size, isFocused }, /* @__PURE__ */ React2.createElement(IndeterminateLine, { size }));
+};
+
+// components/elvis-dropdown/src/react/statusToIconMap.ts
+import informationCircle from "@elvia/elvis-assets-icons/dist/icons/informationCircle";
+import removeCircle from "@elvia/elvis-assets-icons/dist/icons/removeCircle";
+import warningCircle from "@elvia/elvis-assets-icons/dist/icons/warningCircle";
+var statusToIconMap = {
+  error: {
+    icon: removeCircle,
+    color: "icon-danger"
+  },
+  warning: {
+    icon: warningCircle,
+    color: "icon-warning"
+  },
+  info: {
+    icon: informationCircle
+  },
+  informative: {
+    icon: informationCircle
+  }
+  // Make it possible to set status as either 'info' or 'informative'
+};
+
 // components/elvis-dropdown/src/react/dropdown-item/dropdownItemStyles.tsx
+import { getThemeColor as getThemeColor2 } from "@elvia/elvis-colors";
+import { IconButton } from "@elvia/elvis-toolbox";
+import { getTypographyCss } from "@elvia/elvis-typography";
+import styled4, { css as css4 } from "styled-components";
 var TooltipContainer = styled4.div.withConfig({
@@ -352,42 +377,3 @@ displayName: "TooltipContainer",
 
-// components/elvis-dropdown/src/react/checkbox/checkbox.tsx
-import React3 from "react";
-var Checkbox = ({
-  isIndeterminate,
-  isChecked,
-  isDisabled,
-  size,
-  isFocused
-}) => {
-  return /* @__PURE__ */ React3.createElement(StyledCheckbox, { isIndeterminate: isIndeterminate && !isChecked, isChecked, isDisabled, size, isFocused }, /* @__PURE__ */ React3.createElement(IndeterminateLine, { size }));
-};
-
 // components/elvis-dropdown/src/react/dropdown-item/dropdownItem.tsx
-import { Tooltip } from "@elvia/elvis-tooltip/react";
-
-// components/elvis-dropdown/src/react/statusToIconMap.ts
-import removeCircle2 from "@elvia/elvis-assets-icons/dist/icons/removeCircle";
-import warningCircle from "@elvia/elvis-assets-icons/dist/icons/warningCircle";
-import informationCircle from "@elvia/elvis-assets-icons/dist/icons/informationCircle";
-var statusToIconMap = {
-  error: {
-    icon: removeCircle2,
-    color: "icon-danger"
-  },
-  warning: {
-    icon: warningCircle,
-    color: "icon-warning"
-  },
-  info: {
-    icon: informationCircle
-  },
-  informative: {
-    icon: informationCircle
-  }
-  // Make it possible to set status as either 'info' or 'informative'
-};
-
-// components/elvis-dropdown/src/react/dropdown-item/dropdownItem.tsx
-import { getThemeColor as getThemeColor3 } from "@elvia/elvis-colors";
-import arrowRight from "@elvia/elvis-assets-icons/dist/icons/arrowRight";
 var DropdownItem = ({
@@ -507,10 +493,32 @@ item,
   }, []);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(DropdownItemStyles, { ref: itemRef, isFocused: focusedItem?.value === item.value && inputIsKeyboard || isShowing || childIsSelected && !isMulti, isActive: selfOrAllChildrenAreSelected, size, isDisabled: item.isDisabled, isGtMobile, isMulti, isPlaceholderItem: item.value === null, onClick: () => onItemClick(), onMouseEnter: () => onMouseOver(), onMouseDown: (ev) => ev.preventDefault(), id: getDropdownItemId(item.value), "aria-disabled": item.isDisabled, "aria-haspopup": item.children ? "listbox" : "false", "aria-expanded": isShowing, "aria-selected": selfOrAllChildrenAreSelected, "aria-label": `${item.label}${item.children ? " , undermeny" : ""}${item.tooltip ? " , Merknad: " + item.tooltip : ""}`, "data-testid": "dropdown-item" }, isMulti && /* @__PURE__ */ React4.createElement(Checkbox, { isFocused: focusedItem?.value === item.value && inputIsKeyboard || isShowing, isIndeterminate: isPartiallyChecked, isChecked: selfOrAllChildrenAreSelected, size, isDisabled: item.isDisabled }), children, item.status && /* @__PURE__ */ React4.createElement(IconContainer, null, /* @__PURE__ */ React4.createElement(Tooltip, { trigger: /* @__PURE__ */ React4.createElement(IconWrapper2, { icon: statusToIconMap[item.status].icon, color: statusToIconMap[item.status].color, size: "xs" }), content: item.tooltip ?? "", showDelay: 100, position: "right", isDisabled: !item.tooltip, triggerAreaRef: itemRef })), item.children && /* @__PURE__ */ React4.createElement(IconContainer, null, /* @__PURE__ */ React4.createElement(OpenOverlayButton, { size: size === "small" ? "sm" : "md", disabled: isGtMobile || !isMulti ? true : false, onClick: (ev) => {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(DropdownItemStyles, { ref: itemRef, isFocused: focusedItem?.value === item.value && inputIsKeyboard || isShowing || childIsSelected && !isMulti, isActive: selfOrAllChildrenAreSelected, size, isDisabled: item.isDisabled, isGtMobile, isMulti, isPlaceholderItem: item.value === null, onClick: () => onItemClick(), onMouseEnter: () => onMouseOver(), onMouseDown: (ev) => ev.preventDefault(), id: getDropdownItemId(item.value), "aria-disabled": item.isDisabled, "aria-haspopup": item.children ? "listbox" : "false", "aria-expanded": isShowing, "aria-selected": selfOrAllChildrenAreSelected, "aria-label": `${item.label}${item.children ? " , undermeny" : ""}${item.tooltip ? " , Merknad: " + item.tooltip : ""}`, "data-testid": "dropdown-item" }, isMulti && /* @__PURE__ */ React3.createElement(Checkbox, { isFocused: focusedItem?.value === item.value && inputIsKeyboard || isShowing, isIndeterminate: isPartiallyChecked, isChecked: selfOrAllChildrenAreSelected, size, isDisabled: item.isDisabled }), children, item.status && /* @__PURE__ */ React3.createElement(IconContainer, null, /* @__PURE__ */ React3.createElement(Tooltip, { trigger: /* @__PURE__ */ React3.createElement(IconWrapper, { icon: statusToIconMap[item.status].icon, color: statusToIconMap[item.status].color, size: "xs" }), content: item.tooltip ?? "", showDelay: 100, position: "right", isDisabled: !item.tooltip, triggerAreaRef: itemRef })), item.children && /* @__PURE__ */ React3.createElement(IconContainer, null, /* @__PURE__ */ React3.createElement(OpenOverlayButton, { size: size === "small" ? "sm" : "md", disabled: isGtMobile || !isMulti ? true : false, onClick: (ev) => {
     ev.stopPropagation();
     showChildList(true);
-  } }, /* @__PURE__ */ React4.createElement(IconWrapper2, { icon: arrowRight, size: size === "small" ? "xs" : "sm", color: item.isDisabled ? getThemeColor3("text-disabled-1") : "" })))), isShowing && /* @__PURE__ */ React4.createElement(DropdownOverlay, { ref: popoverRef, isGtMobile, filteredItems: item.children ?? [], size, onClose: () => showChildList(false), isMulti, onItemSelect: (value) => onItemSelect(value), currentVal, pressedKey, inputIsKeyboard, focusedItem, setFocusedItem, setHoveredItem, parentItem: item }));
+  } }, /* @__PURE__ */ React3.createElement(IconWrapper, { icon: arrowRight, size: size === "small" ? "xs" : "sm", color: item.isDisabled ? getThemeColor3("text-disabled-1") : "" })))), isShowing && /* @__PURE__ */ React3.createElement(DropdownOverlay, { ref: popoverRef, isGtMobile, filteredItems: item.children ?? [], size, onClose: () => showChildList(false), isMulti, onItemSelect: (value) => onItemSelect(value), currentVal, pressedKey, inputIsKeyboard, focusedItem, setFocusedItem, setHoveredItem, parentItem: item }));
 };
 
+// components/elvis-dropdown/src/react/dropdown-item/itemValue.tsx
+import { Tooltip as Tooltip2 } from "@elvia/elvis-tooltip/react";
+import React4, { useMemo as useMemo2, useRef as useRef2 } from "react";
+var ItemValue = ({
+  item,
+  focusedValue,
+  isRootOverlay
+}) => {
+  const containerRef = useRef2(null);
+  const isOverflowing = useMemo2(() => {
+    const {
+      current
+    } = containerRef;
+    if (current) {
+      return current.scrollWidth > current.offsetWidth;
+    }
+    return false;
+  }, [item.label, containerRef?.current]);
+  return /* @__PURE__ */ React4.createElement(TooltipContainer, { noRightContent: !item.status && !item.children, isRootOverlay }, isOverflowing && !item.isDisabled && focusedValue?.value === item.value ? /* @__PURE__ */ React4.createElement(Tooltip2, { trigger: /* @__PURE__ */ React4.createElement(TooltipTextContainer, { ref: containerRef }, /* @__PURE__ */ React4.createElement(DropdownItemValue, null, item.label)), content: item.label, display: "inline" }) : /* @__PURE__ */ React4.createElement(TooltipTextContainer, { ref: containerRef }, /* @__PURE__ */ React4.createElement(DropdownItemValue, null, item.label)));
+};
+
 // components/elvis-dropdown/src/react/dropdown-overlay/backButton.tsx
-import { IconButton as IconButton3, IconWrapper as IconWrapper3 } from "@elvia/elvis-toolbox";
+import arrowLeft from "@elvia/elvis-assets-icons/dist/icons/arrowLeft";
+import { IconButton as IconButton3, IconWrapper as IconWrapper2 } from "@elvia/elvis-toolbox";
 import React5 from "react";
@@ -570,3 +578,2 @@
 // components/elvis-dropdown/src/react/dropdown-overlay/backButton.tsx
-import arrowLeft from "@elvia/elvis-assets-icons/dist/icons/arrowLeft";
 var BackButton = ({
@@ -583,9 +590,9 @@ item,
   };
-  return /* @__PURE__ */ React5.createElement(BackButtonStyles, { id: getDropdownItemId(item.value), onClick: () => onClick(), onMouseEnter: () => onHover(item), onMouseDown: preventInputElementBlur, isFocused: inputIsKeyboard && focusedValue === item.value, size }, /* @__PURE__ */ React5.createElement(IconButton3, { size: size === "small" ? "sm" : "md", disabled: true }, /* @__PURE__ */ React5.createElement(IconWrapper3, { icon: arrowLeft, size: size === "small" ? "xs" : "sm" })), item.label);
+  return /* @__PURE__ */ React5.createElement(BackButtonStyles, { id: getDropdownItemId(item.value), onClick: () => onClick(), onMouseEnter: () => onHover(item), onMouseDown: preventInputElementBlur, isFocused: inputIsKeyboard && focusedValue === item.value, size }, /* @__PURE__ */ React5.createElement(IconButton3, { size: size === "small" ? "sm" : "md", disabled: true }, /* @__PURE__ */ React5.createElement(IconWrapper2, { icon: arrowLeft, size: size === "small" ? "xs" : "sm" })), item.label);
 };
 
 // components/elvis-dropdown/src/react/dropdown-overlay/loadMoreButton.tsx
+import sync from "@elvia/elvis-assets-icons/dist/icons/sync";
+import { IconWrapper as IconWrapper3, TertiaryButton as TertiaryButton2 } from "@elvia/elvis-toolbox";
 import React6 from "react";
-import { TertiaryButton as TertiaryButton2, IconWrapper as IconWrapper4 } from "@elvia/elvis-toolbox";
-import sync from "@elvia/elvis-assets-icons/dist/icons/sync";
 var LoadMoreButton = ({
@@ -602,3 +609,3 @@ item,
   };
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(LoadMoreButtonStyles, { onClick: () => !isLoadingMoreItems && onLoadMoreItems && onLoadMoreItems(), onMouseEnter: () => onHover(item), onMouseDown: preventInputElementBlur, isLoading: isLoadingMoreItems, id: getDropdownItemId(item.value) }, /* @__PURE__ */ React6.createElement(TertiaryButton2, { tabIndex: -1, isActive: focusedValue === item.value, size: size === "small" ? "sm" : "md" }, /* @__PURE__ */ React6.createElement(SpinContainer, null, /* @__PURE__ */ React6.createElement(IconWrapper4, { icon: sync, size: "xs" })), item.label)));
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(LoadMoreButtonStyles, { onClick: () => !isLoadingMoreItems && onLoadMoreItems && onLoadMoreItems(), onMouseEnter: () => onHover(item), onMouseDown: preventInputElementBlur, isLoading: isLoadingMoreItems, id: getDropdownItemId(item.value) }, /* @__PURE__ */ React6.createElement(TertiaryButton2, { tabIndex: -1, isActive: focusedValue === item.value, size: size === "small" ? "sm" : "md" }, /* @__PURE__ */ React6.createElement(SpinContainer, null, /* @__PURE__ */ React6.createElement(IconWrapper3, { icon: sync, size: "xs" })), item.label)));
 };
@@ -637,28 +644,5 @@
 
-// components/elvis-dropdown/src/react/dropdown-item/itemValue.tsx
-import { Tooltip as Tooltip2 } from "@elvia/elvis-tooltip/react";
-import React8, { useMemo as useMemo2, useRef as useRef2 } from "react";
-var ItemValue = ({
-  item,
-  focusedValue,
-  isRootOverlay
-}) => {
-  const containerRef = useRef2(null);
-  const isOverflowing = useMemo2(() => {
-    const {
-      current
-    } = containerRef;
-    if (current) {
-      return current.scrollWidth > current.offsetWidth;
-    }
-    return false;
-  }, [item.label, containerRef?.current]);
-  return /* @__PURE__ */ React8.createElement(TooltipContainer, { noRightContent: !item.status && !item.children, isRootOverlay }, isOverflowing && !item.isDisabled && focusedValue?.value === item.value ? /* @__PURE__ */ React8.createElement(Tooltip2, { trigger: /* @__PURE__ */ React8.createElement(TooltipTextContainer, { ref: containerRef }, /* @__PURE__ */ React8.createElement(DropdownItemValue, null, item.label)), content: item.label, display: "inline" }) : /* @__PURE__ */ React8.createElement(TooltipTextContainer, { ref: containerRef }, /* @__PURE__ */ React8.createElement(DropdownItemValue, null, item.label)));
-};
-
 // components/elvis-dropdown/src/react/dropdown-overlay/dropdownOverlay.tsx
-import { Overlay } from "@elvia/elvis-toolbox";
-import DOMPurify2 from "dompurify";
 var uniqueId = 0;
-var DropdownOverlay = React9.forwardRef(({
+var DropdownOverlay = React8.forwardRef(({
   isRootOverlay,
@@ -817,3 +801,3 @@ isGtMobile,
   }, []);
-  return /* @__PURE__ */ React9.createElement(Overlay, { ref, hasBackdrop: !!isRootOverlay, onClose, startFade: fadeOut, hasAnimation: !!isRootOverlay || isGtMobile }, /* @__PURE__ */ React9.createElement(DropdownPopupContainer, { "data-testid": "popover", id, onMouseLeave: () => setHoveredItem?.(void 0), size }, !isRootOverlay && isGtMobile && /* @__PURE__ */ React9.createElement(CursorCurve, null), /* @__PURE__ */ React9.createElement(DropdownPopup, { isInvisible: !isGtMobile && !focusIsOnDirectDescendant }, /* @__PURE__ */ React9.createElement(ItemList, { ref: listRef }, !filteredItems?.length && /* @__PURE__ */ React9.createElement(NoItemsMessage, null, noItemsText), !isGtMobile && !isRootOverlay && /* @__PURE__ */ React9.createElement(BackButton, { item: backItem, onClick: () => closeOpenOverlay(), onHover: (item) => setFocusedItem(item), focusedValue: focusedItem?.value, size, inputIsKeyboard }), selectAllOption && isRootOverlay && !!filteredItems.length && /* @__PURE__ */ React9.createElement(SelectAllOption, { focusedValue: focusedItem?.value, size, item: selectAllItem, items: allItems ?? [], selectedItems: currentVal, onClick: toggleAllSelection, onHover: (item) => setFocusedItem(item) }), filteredItems.map((item) => /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React8.createElement(Overlay, { ref, hasBackdrop: !!isRootOverlay, onClose, startFade: fadeOut, hasAnimation: !!isRootOverlay || isGtMobile }, /* @__PURE__ */ React8.createElement(DropdownPopupContainer, { "data-testid": "popover", id, onMouseLeave: () => setHoveredItem?.(void 0), size }, !isRootOverlay && isGtMobile && /* @__PURE__ */ React8.createElement(CursorCurve, null), /* @__PURE__ */ React8.createElement(DropdownPopup, { isInvisible: !isGtMobile && !focusIsOnDirectDescendant }, /* @__PURE__ */ React8.createElement(ItemList, { ref: listRef }, !filteredItems?.length && /* @__PURE__ */ React8.createElement(NoItemsMessage, null, noItemsText), !isGtMobile && !isRootOverlay && /* @__PURE__ */ React8.createElement(BackButton, { item: backItem, onClick: () => closeOpenOverlay(), onHover: (item) => setFocusedItem(item), focusedValue: focusedItem?.value, size, inputIsKeyboard }), selectAllOption && isRootOverlay && !!filteredItems.length && /* @__PURE__ */ React8.createElement(SelectAllOption, { focusedValue: focusedItem?.value, size, item: selectAllItem, items: allItems ?? [], selectedItems: currentVal, onClick: toggleAllSelection, onHover: (item) => setFocusedItem(item) }), filteredItems.map((item) => /* @__PURE__ */ React8.createElement(
     DropdownItem,
@@ -848,10 +832,20 @@ {
     },
-    item.icon && !isMulti && /* @__PURE__ */ React9.createElement(DropdownIconContainer, { dangerouslySetInnerHTML: {
+    item.icon && !isMulti && /* @__PURE__ */ React8.createElement(DropdownIconContainer, { dangerouslySetInnerHTML: {
       __html: DOMPurify2.sanitize(item.icon)
     } }),
-    /* @__PURE__ */ React9.createElement(ItemValue, { item, focusedValue: focusedItem, isRootOverlay })
-  )), hasLoadMoreItemsButton && isRootOverlay && /* @__PURE__ */ React9.createElement(LoadMoreButton, { focusedValue: focusedItem?.value, item: loadMoreItem, isLoadingMoreItems, onLoadMoreItems, size, onHover: (item) => setFocusedItem(item) })))));
+    /* @__PURE__ */ React8.createElement(ItemValue, { item, focusedValue: focusedItem, isRootOverlay })
+  )), hasLoadMoreItemsButton && isRootOverlay && /* @__PURE__ */ React8.createElement(LoadMoreButton, { focusedValue: focusedItem?.value, item: loadMoreItem, isLoadingMoreItems, onLoadMoreItems, size, onHover: (item) => setFocusedItem(item) })))));
 });
 DropdownOverlay.displayName = "DropdownOverlayComponent";
 
+// components/elvis-dropdown/src/react/error/dropdownError.tsx
+import removeCircle2 from "@elvia/elvis-assets-icons/dist/icons/removeCircle";
+import { FormFieldError, FormFieldErrorContainer, IconWrapper as IconWrapper4 } from "@elvia/elvis-toolbox";
+import React9 from "react";
+var DropdownError = ({
+  errorText
+}) => {
+  return /* @__PURE__ */ React9.createElement(FormFieldErrorContainer, null, /* @__PURE__ */ React9.createElement(IconWrapper4, { icon: removeCircle2, color: "icon-danger", size: "xs" }), /* @__PURE__ */ React9.createElement(FormFieldError, { "data-testid": "error" }, errorText));
+};
+
 // components/elvis-dropdown/src/react/getInternalErrorText.tsx
@@ -936,3 +930,4 @@ var getInternalErrorText = (error, label) => {
     verticalPosition: menuPosition === "top" ? "top" : "bottom",
-    alignWidths: true
+    alignWidths: true,
+    allowHorizontalGrowth: true
   });
@@ -939,0 +934,0 @@ const mergedErrorOptions = {

dist/react/elviaDropdown.types.d.ts

@@ -1,2 +0,2 @@
-import { FormFieldSizes, BaseProps, HasValue, HasError } from '@elvia/elvis-toolbox';
+import { BaseProps, FormFieldSizes, HasError, HasValue } from '@elvia/elvis-toolbox';
 import { DropdownItem, DropdownValue, DropdownValueType } from '../public-api/publicApi.public';
@@ -3,0 +3,0 @@ export type DropdownMenuPosition = 'top' | 'bottom' | 'auto';

package.json

 {
   "name": "@elvia/elvis-dropdown",
-  "version": "9.3.4",
+  "version": "9.4.0",
   "license": "MIT",
@@ -16,7 +16,7 @@ "homepage": "https://design.elvia.io/components/dropdown",
   "dependencies": {
-    "@elvia/elvis-assets-icons": "^3.9.0",
-    "@elvia/elvis-colors": "^4.1.0",
+    "@elvia/elvis-assets-icons": "^3.10.0",
+    "@elvia/elvis-colors": "^4.4.1",
     "@elvia/elvis-component-wrapper": "^4.2.0",
-    "@elvia/elvis-toolbox": "^11.3.1",
-    "@elvia/elvis-tooltip": "^1.3.2",
+    "@elvia/elvis-toolbox": "^11.4.0",
+    "@elvia/elvis-tooltip": "^1.3.3",
     "@elvia/elvis-typography": "^2.7.0",
@@ -23,0 +23,0 @@ "dompurify": "^3.0.3",

No alert changes

Improved metrics

Total package byte prevSize

92598

increased by0.22%

Lines of code

2638

increased by0.53%

Dependency changes

• Updated@elvia/elvis-assets-icons@^3.10.0

• Updated@elvia/elvis-colors@^4.4.1

• Updated@elvia/elvis-toolbox@^11.4.0

• Updated@elvia/elvis-tooltip@^1.3.3