@elvia/elvis-dropdown - npm Package Compare versions

Comparing version 9.4.2 to 9.4.3

CHANGELOG.json

@@ -6,2 +6,12 @@ {
     {
+      "date": "21.06.24",
+      "version": "9.4.3",
+      "changelog": [
+        {
+          "type": "bug_fix",
+          "changes": ["Fix layout issue after migrating to <code>@emotion</code>"]
+        }
+      ]
+    },
+    {
       "date": "30.05.24",
@@ -8,0 +18,0 @@ "version": "9.4.2",

dist/react/dropdown-item/dropdownItemStyles.d.ts

@@ -35,4 +35,4 @@ /// <reference types="react" />
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const OpenOverlayButton: import("@emotion/styled").StyledComponent<Omit<any, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+export declare const OpenOverlayButton: import("@emotion/styled").StyledComponent<Pick<Omit<any, "ref"> & import("react").RefAttributes<HTMLButtonElement>, string> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

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 { FormFieldContainer, FormFieldInputContainer, 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";
@@ -82,2 +82,3 @@
 // components/elvis-dropdown/src/react/dropdown-input/dropdownInput.tsx
+import { FormFieldInput } from "@elvia/elvis-toolbox";
 import DOMPurify from "dompurify";
@@ -110,37 +111,14 @@ import React, { useEffect, useState } from "react";
 import _styled from "@emotion/styled/base";
-import { FormFieldContainer, FormFieldInputContainer } from "@elvia/elvis-toolbox";
-import { css } from "@emotion/react";
 function _EMOTION_STRINGIFIED_CSS_ERROR__() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-var _ref3 = false ? {
-  name: "980te3-DropdownContainer",
-  styles: "max-width:448px;label:DropdownContainer;"
+var _ref2 = false ? {
+  name: "1lxweje-IconRotator",
+  styles: "width:32px;height:32px;label:IconRotator;"
 } : {
-  name: "980te3-DropdownContainer",
-  styles: "max-width:448px;label:DropdownContainer;",
+  name: "1lxweje-IconRotator",
+  styles: "width:32px;height:32px;label:IconRotator;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var DropdownContainer = /* @__PURE__ */ _styled(FormFieldContainer, {
-  target: "e1o4jsy74",
-  label: "DropdownContainer"
-})("width:100%;", ({
-  isFullWidth
-}) => !isFullWidth && _ref3, " ", ({
-  isDisabled
-}) => !isDisabled && /* @__PURE__ */ css(DropdownInputContainer, "{cursor:pointer;};label:DropdownContainer;"), ";", ({
-  size
-}) => size === "small" && /* @__PURE__ */ css(IconRotator, "{width:32px;height:32px;};label:DropdownContainer;"), ";");
-var DropdownInputContainer = /* @__PURE__ */ _styled(FormFieldInputContainer, {
-  target: "e1o4jsy73",
-  label: "DropdownInputContainer"
-})(false ? {
-  name: "1d3w5wq",
-  styles: "width:100%"
-} : {
-  name: "1d3w5wq",
-  styles: "width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var _ref2 = false ? {
+var _ref3 = false ? {
   name: "1mb9j0d-IconRotator",
@@ -156,3 +134,7 @@ styles: "transform:rotate(180deg);label:IconRotator;"
   label: "IconRotator"
-})("width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:none;transform:rotate(0deg);transition:transform 150ms ease;", (props) => props.isRotated && _ref2, ";");
+})("width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex:none;transform:rotate(0deg);transition:transform 150ms ease;", ({
+  isRotated
+}) => isRotated && _ref3, " ", ({
+  size
+}) => size === "small" && _ref2, ";");
 var _ref = false ? {
@@ -173,23 +155,2 @@ name: "chnqt1-DropdownIconContainer",
 
-// components/elvis-dropdown/src/react/dropdown-input/dropdownInputStyles.tsx
-import _styled2 from "@emotion/styled/base";
-import { FormFieldInput } from "@elvia/elvis-toolbox";
-function _EMOTION_STRINGIFIED_CSS_ERROR__2() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-var _ref4 = false ? {
-  name: "1lp2jkh-Input",
-  styles: "::-moz-selection{background:transparent;}::selection{background:transparent;};label:Input;"
-} : {
-  name: "1lp2jkh-Input",
-  styles: "::-moz-selection{background:transparent;}::selection{background:transparent;};label:Input;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__2
-};
-var Input = /* @__PURE__ */ _styled2(FormFieldInput, {
-  target: "e1n35sh20",
-  label: "Input"
-})("flex:1;text-overflow:ellipsis;", ({
-  $isEditable
-}) => !$isEditable && _ref4, ";");
-
 // components/elvis-dropdown/src/react/dropdown-input/dropdownInput.tsx
@@ -269,3 +230,6 @@ var DropdownInput = ({
     __html: DOMPurify.sanitize(currentValIcon)
-  } }), /* @__PURE__ */ React.createElement(Input, { required: isRequired, "aria-activedescendant": focusedItem ? getDropdownItemId(focusedItem.value) : void 0, disabled: isDisabled, placeholder, onChange: (ev) => onInputChange(ev.target.value ?? ""), value: inputValue, onClick: () => onOpenDropdown(), onKeyDown, onKeyUp: () => onKeyPress(void 0), readOnly: !isEditable || !dropdownIsOpen, $isEditable: isEditable, role: "combobox", "aria-autocomplete": "none", "aria-haspopup": "true", "aria-expanded": dropdownIsOpen, "aria-disabled": isDisabled, "aria-controls": id, "aria-label": ariaLabel }));
+  } }), /* @__PURE__ */ React.createElement(FormFieldInput, { style: {
+    flex: 1,
+    textOverflow: "ellipsis"
+  }, required: isRequired, "aria-activedescendant": focusedItem ? getDropdownItemId(focusedItem.value) : void 0, disabled: isDisabled, placeholder, onChange: (ev) => onInputChange(ev.target.value ?? ""), value: inputValue, onClick: () => onOpenDropdown(), onKeyDown, onKeyUp: () => onKeyPress(void 0), readOnly: !isEditable || !dropdownIsOpen, role: "combobox", "aria-autocomplete": "none", "aria-haspopup": "true", "aria-expanded": dropdownIsOpen, "aria-disabled": isDisabled, "aria-controls": id, "aria-label": ariaLabel }));
 };
@@ -289,6 +253,6 @@
 // components/elvis-dropdown/src/react/checkbox/checkboxStyles.tsx
-import _styled3 from "@emotion/styled/base";
+import _styled2 from "@emotion/styled/base";
 import { getThemeColor } from "@elvia/elvis-colors";
-import { css as css2 } from "@emotion/react";
-function _EMOTION_STRINGIFIED_CSS_ERROR__3() {
+import { css } from "@emotion/react";
+function _EMOTION_STRINGIFIED_CSS_ERROR__2() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
@@ -298,3 +262,3 @@ }
 var checkMarkEnterDuration = "180ms";
-var IndeterminateLine = /* @__PURE__ */ _styled3("div", {
+var IndeterminateLine = /* @__PURE__ */ _styled2("div", {
   target: "e13uz9xr1",
@@ -307,4 +271,4 @@ label: "IndeterminateLine"
   isDisabled
-}) => /* @__PURE__ */ css2("background-color:", isDisabled ? getThemeColor("text-disabled-1") : getThemeColor("static-black"), ";border-radius:2px;content:'';height:2px;position:absolute;transform-origin:left center;;label:checkmarkLineBase;");
-var _ref5 = false ? {
+}) => /* @__PURE__ */ css("background-color:", isDisabled ? getThemeColor("text-disabled-1") : getThemeColor("static-black"), ";border-radius:2px;content:'';height:2px;position:absolute;transform-origin:left center;;label:checkmarkLineBase;");
+var _ref4 = false ? {
   name: "d3oct4-StyledCheckbox",
@@ -315,5 +279,5 @@ styles: ".e-color-background-3 &&,.e-theme-dark &&{border-color:transparent!important;};label:StyledCheckbox;"
   styles: ".e-color-background-3 &&,.e-theme-dark &&{border-color:transparent!important;};label:StyledCheckbox;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__3
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__2
 };
-var StyledCheckbox = /* @__PURE__ */ _styled3("div", {
+var StyledCheckbox = /* @__PURE__ */ _styled2("div", {
   target: "e13uz9xr0",
@@ -325,15 +289,15 @@ label: "StyledCheckbox"
   isIndeterminate
-}) => isIndeterminate && /* @__PURE__ */ css2("background-color:", getThemeColor("background-selected-1"), ";", IndeterminateLine, "::after{transform:scaleX(1);transition:transform ", checkMarkEnterDuration, " ease ", checkMarkEnterDuration, ";};label:StyledCheckbox;"), ";", ({
+}) => isIndeterminate && /* @__PURE__ */ css("background-color:", getThemeColor("background-selected-1"), ";", IndeterminateLine, "::after{transform:scaleX(1);transition:transform ", checkMarkEnterDuration, " ease ", checkMarkEnterDuration, ";};label:StyledCheckbox;"), ";", ({
   isChecked
-}) => isChecked && /* @__PURE__ */ css2("background-color:", getThemeColor("background-selected-1"), ";&::before{transform:rotate(45deg) scaleX(1);transition:transform ", checkMarkEnterDuration, " ease;}&::after{transform:rotate(-55deg) scaleX(1);transition:transform ", checkMarkEnterDuration, " ease ", checkMarkEnterDuration, ";};label:StyledCheckbox;"), ";", ({
+}) => isChecked && /* @__PURE__ */ css("background-color:", getThemeColor("background-selected-1"), ";&::before{transform:rotate(45deg) scaleX(1);transition:transform ", checkMarkEnterDuration, " ease;}&::after{transform:rotate(-55deg) scaleX(1);transition:transform ", checkMarkEnterDuration, " ease ", checkMarkEnterDuration, ";};label:StyledCheckbox;"), ";", ({
   size
-}) => size === "small" && /* @__PURE__ */ css2("width:16px;&::before,&::after,", IndeterminateLine, "{height:1px;};label:StyledCheckbox;"), ";", ({
+}) => size === "small" && /* @__PURE__ */ css("width:16px;&::before,&::after,", IndeterminateLine, "{height:1px;};label:StyledCheckbox;"), ";", ({
   isFocused,
   isDisabled
-}) => isFocused && !isDisabled && /* @__PURE__ */ css2("background-color:", getThemeColor("background-selected-1"), ";;label:StyledCheckbox;"), ";", ({
+}) => isFocused && !isDisabled && /* @__PURE__ */ css("background-color:", getThemeColor("background-selected-1"), ";;label:StyledCheckbox;"), ";", ({
   isDisabled
-}) => isDisabled && /* @__PURE__ */ css2("background-color:", getThemeColor("background-disabled-1"), ";border:1px solid ", getThemeColor("border-disabled-1"), ";cursor:not-allowed;;label:StyledCheckbox;"), ";", ({
+}) => isDisabled && /* @__PURE__ */ css("background-color:", getThemeColor("background-disabled-1"), ";border:1px solid ", getThemeColor("border-disabled-1"), ";cursor:not-allowed;;label:StyledCheckbox;"), ";", ({
   isIndeterminate,
   isChecked
-}) => (isChecked || isIndeterminate) && _ref5, ";");
+}) => (isChecked || isIndeterminate) && _ref4, ";");
 
@@ -374,11 +338,11 @@ // components/elvis-dropdown/src/react/checkbox/checkbox.tsx
 // components/elvis-dropdown/src/react/dropdown-item/dropdownItemStyles.tsx
-import _styled4 from "@emotion/styled/base";
+import _styled3 from "@emotion/styled/base";
 import { getThemeColor as getThemeColor2 } from "@elvia/elvis-colors";
 import { IconButton } from "@elvia/elvis-toolbox";
 import { getTypographyCss } from "@elvia/elvis-typography";
-import { css as css3 } from "@emotion/react";
-function _EMOTION_STRINGIFIED_CSS_ERROR__4() {
+import { css as css2 } from "@emotion/react";
+function _EMOTION_STRINGIFIED_CSS_ERROR__3() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-var _ref6 = false ? {
+var _ref5 = false ? {
   name: "1wkk8me-TooltipContainer",
@@ -389,6 +353,6 @@ styles: "padding-right:40px;max-width:300px;label:TooltipContainer;"
   styles: "padding-right:40px;max-width:300px;label:TooltipContainer;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__3
 };
-var TooltipContainer = /* @__PURE__ */ _styled4("div", {
-  target: "eoa0kf66",
+var TooltipContainer = /* @__PURE__ */ _styled3("div", {
+  target: "eoa0kf64",
   label: "TooltipContainer"
@@ -398,5 +362,5 @@ })("padding-right:16px;overflow:hidden;flex:1;", ({
   isRootOverlay
-}) => noRightContent && !isRootOverlay && _ref6, ";");
-var TooltipTextContainer = /* @__PURE__ */ _styled4("div", {
-  target: "eoa0kf65",
+}) => noRightContent && !isRootOverlay && _ref5, ";");
+var TooltipTextContainer = /* @__PURE__ */ _styled3("div", {
+  target: "eoa0kf63",
   label: "TooltipTextContainer"
@@ -409,6 +373,6 @@ })(false ? {
   styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;&::after{content:'';display:block;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__3
 });
-var DropdownItemValue = /* @__PURE__ */ _styled4("span", {
-  target: "eoa0kf64",
+var DropdownItemValue = /* @__PURE__ */ _styled3("span", {
+  target: "eoa0kf62",
   label: "DropdownItemValue"
@@ -421,14 +385,14 @@ })(false ? {
   styles: "text-align:left",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__3
 });
-var StyledIconButton = /* @__PURE__ */ _styled4(IconButton, {
-  target: "eoa0kf63",
+var StyledIconButton = /* @__PURE__ */ _styled3(IconButton, {
+  target: `${IconButton}`.replace(/\./g, ""),
   label: "StyledIconButton"
 })();
-var IconContainer = /* @__PURE__ */ _styled4("div", {
-  target: "eoa0kf62",
+var IconContainer = /* @__PURE__ */ _styled3("div", {
+  target: "eoa0kf61",
   label: "IconContainer"
 })("width:60px;display:grid;place-items:center;", StyledIconButton, "{cursor:inherit;}");
-var DropdownItemStyles = /* @__PURE__ */ _styled4("div", {
-  target: "eoa0kf61",
+var DropdownItemStyles = /* @__PURE__ */ _styled3("div", {
+  target: "eoa0kf60",
   label: "DropdownItemStyles"
@@ -438,22 +402,22 @@ })("display:flex;gap:8px;border:none;margin:0;width:100%;color:", getThemeColor2("text-1"), ";padding:0 0 0 16px;align-items:center;cursor:pointer;height:var(--item-height);user-select:none;", ({
   isMulti
-}) => isActive && !isMulti && /* @__PURE__ */ css3("background-color:", getThemeColor2("background-selected-2"), ";;label:DropdownItemStyles;"), ";", ({
+}) => isActive && !isMulti && /* @__PURE__ */ css2("background-color:", getThemeColor2("background-selected-2"), ";;label:DropdownItemStyles;"), ";", ({
   isMulti,
   isGtMobile,
   isDisabled
-}) => !isGtMobile && !isMulti && !isDisabled && /* @__PURE__ */ css3("&:hover{", OpenOverlayButton, "{background-color:", getThemeColor2("background-hover-1"), ";}};label:DropdownItemStyles;"), ";", ({
+}) => !isGtMobile && !isMulti && !isDisabled && /* @__PURE__ */ css2("&:hover{", OpenOverlayButton, "{background-color:", getThemeColor2("background-hover-1"), ";}};label:DropdownItemStyles;"), ";", ({
   size
 }) => {
   if (size === "small") {
-    return /* @__PURE__ */ css3(getTypographyCss("text-sm"), ";", IconContainer, "{width:40px;};label:DropdownItemStyles;");
+    return /* @__PURE__ */ css2(getTypographyCss("text-sm"), ";", IconContainer, "{width:40px;};label:DropdownItemStyles;");
   }
-  return /* @__PURE__ */ css3(getTypographyCss("text-md"), ";;label:DropdownItemStyles;");
+  return /* @__PURE__ */ css2(getTypographyCss("text-md"), ";;label:DropdownItemStyles;");
 }, ";", ({
   isPlaceholderItem
-}) => isPlaceholderItem && /* @__PURE__ */ css3("color:", getThemeColor2("text-placeholder-1"), ";;label:DropdownItemStyles;"), " ", ({
+}) => isPlaceholderItem && /* @__PURE__ */ css2("color:", getThemeColor2("text-placeholder-1"), ";;label:DropdownItemStyles;"), " ", ({
   isDisabled
 }) => {
   if (isDisabled) {
-    return /* @__PURE__ */ css3("cursor:not-allowed;color:", getThemeColor2("text-disabled-1"), ";;label:DropdownItemStyles;");
+    return /* @__PURE__ */ css2("cursor:not-allowed;color:", getThemeColor2("text-disabled-1"), ";;label:DropdownItemStyles;");
   }
-  return /* @__PURE__ */ css3("&:hover{background-color:", getThemeColor2("background-hover-2"), ";", StyledCheckbox, "{background-color:", getThemeColor2("background-hover-1"), ";border-color:", getThemeColor2("border-1"), ";}};label:DropdownItemStyles;");
+  return /* @__PURE__ */ css2("&:hover{background-color:", getThemeColor2("background-hover-2"), ";", StyledCheckbox, "{background-color:", getThemeColor2("background-hover-1"), ";border-color:", getThemeColor2("border-1"), ";}};label:DropdownItemStyles;");
 }, " ", ({
@@ -463,5 +427,5 @@ isFocused,
   isMulti
-}) => isFocused && (!isActive || isMulti) && /* @__PURE__ */ css3("background-color:", getThemeColor2("background-hover-2"), ";;label:DropdownItemStyles;"), ";");
-var OpenOverlayButton = /* @__PURE__ */ _styled4(IconButton, {
-  target: "eoa0kf60",
+}) => isFocused && (!isActive || isMulti) && /* @__PURE__ */ css2("background-color:", getThemeColor2("background-hover-2"), ";;label:DropdownItemStyles;"), ";");
+var OpenOverlayButton = /* @__PURE__ */ _styled3(IconButton, {
+  target: `${IconButton}`.replace(/\./g, ""),
   label: "OpenOverlayButton"
@@ -474,3 +438,3 @@ })(false ? {
   styles: "&:disabled{pointer-events:none;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__4
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__3
 });
@@ -626,11 +590,11 @@
 // components/elvis-dropdown/src/react/dropdown-overlay/dropdownOverlayStyles.tsx
-import _styled5 from "@emotion/styled/base";
+import _styled4 from "@emotion/styled/base";
 import { getShadow, getThemeColor as getThemeColor4 } from "@elvia/elvis-colors";
 import { IconButton as IconButton2, TertiaryButton } from "@elvia/elvis-toolbox";
 import { getTypographyCss as getTypographyCss2 } from "@elvia/elvis-typography";
-import { css as css4, keyframes } from "@emotion/react";
-function _EMOTION_STRINGIFIED_CSS_ERROR__5() {
+import { css as css3, keyframes } from "@emotion/react";
+function _EMOTION_STRINGIFIED_CSS_ERROR__4() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-var CursorCurve = /* @__PURE__ */ _styled5("div", {
+var CursorCurve = /* @__PURE__ */ _styled4("div", {
   target: "e14ohwey9",
@@ -644,5 +608,5 @@ label: "CursorCurve"
   styles: "position:absolute;top:calc(var(--item-height) - 1px);right:100%;width:30%;height:20%;min-height:var(--item-height);clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 80% 50%, 50% 20%)",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__4
 });
-var DropdownPopupContainer = /* @__PURE__ */ _styled5("div", {
+var DropdownPopupContainer = /* @__PURE__ */ _styled4("div", {
   target: "e14ohwey8",
@@ -652,4 +616,4 @@ label: "DropdownPopupContainer"
   size
-}) => size === "small" && /* @__PURE__ */ css4("--item-height:40px;", NoItemsMessage, "{", getTypographyCss2("text-sm"), ";}", BackButtonStyles, "{", getTypographyCss2("text-sm-strong"), ";};label:DropdownPopupContainer;"), ";");
-var _ref7 = false ? {
+}) => size === "small" && /* @__PURE__ */ css3("--item-height:40px;", NoItemsMessage, "{", getTypographyCss2("text-sm"), ";}", BackButtonStyles, "{", getTypographyCss2("text-sm-strong"), ";};label:DropdownPopupContainer;"), ";");
+var _ref6 = false ? {
   name: "1ud28jv-DropdownPopup",
@@ -660,5 +624,5 @@ styles: "visibility:hidden;label:DropdownPopup;"
   styles: "visibility:hidden;label:DropdownPopup;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__4
 };
-var DropdownPopup = /* @__PURE__ */ _styled5("div", {
+var DropdownPopup = /* @__PURE__ */ _styled4("div", {
   target: "e14ohwey7",
@@ -668,4 +632,4 @@ label: "DropdownPopup"
   isInvisible
-}) => isInvisible && _ref7, ";");
-var ItemList = /* @__PURE__ */ _styled5("div", {
+}) => isInvisible && _ref6, ";");
+var ItemList = /* @__PURE__ */ _styled4("div", {
   target: "e14ohwey6",
@@ -679,9 +643,9 @@ label: "ItemList"
   styles: "max-height:calc(var(--item-height) * 7.5);overflow-y:auto",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__5
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__4
 });
-var NoItemsMessage = /* @__PURE__ */ _styled5("div", {
+var NoItemsMessage = /* @__PURE__ */ _styled4("div", {
   target: "e14ohwey5",
   label: "NoItemsMessage"
 })(getTypographyCss2("text-md"), " text-align:center;padding:40px 16px;");
-var Divider = /* @__PURE__ */ _styled5("hr", {
+var Divider = /* @__PURE__ */ _styled4("hr", {
   target: "e14ohwey4",
@@ -694,7 +658,7 @@ label: "Divider"
 `;
-var SpinContainer = /* @__PURE__ */ _styled5("div", {
+var SpinContainer = /* @__PURE__ */ _styled4("div", {
   target: "e14ohwey3",
   label: "SpinContainer"
 })();
-var LoadMoreButtonStyles = /* @__PURE__ */ _styled5("div", {
+var LoadMoreButtonStyles = /* @__PURE__ */ _styled4("div", {
   target: "e14ohwey2",
@@ -704,8 +668,8 @@ label: "LoadMoreButtonStyles"
   isLoading
-}) => isLoading && /* @__PURE__ */ css4("cursor:progress;", SpinContainer, "{animation:", RotateAnimation, " 1s linear infinite;};label:LoadMoreButtonStyles;"), ";");
-var StyledIconButton2 = /* @__PURE__ */ _styled5(IconButton2, {
+}) => isLoading && /* @__PURE__ */ css3("cursor:progress;", SpinContainer, "{animation:", RotateAnimation, " 1s linear infinite;};label:LoadMoreButtonStyles;"), ";");
+var StyledIconButton2 = /* @__PURE__ */ _styled4(IconButton2, {
   target: "e14ohwey1",
   label: "StyledIconButton"
 })();
-var BackButtonStyles = /* @__PURE__ */ _styled5(DropdownItemStyles, {
+var BackButtonStyles = /* @__PURE__ */ _styled4(DropdownItemStyles, {
   target: "e14ohwey0",
@@ -1150,5 +1114,10 @@ label: "BackButtonStyles"
   }, [isShowing]);
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(DropdownContainer, { size, className: className ?? "", style: {
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(FormFieldContainer, { size, className: className ?? "", style: {
+    width: "100%",
+    maxWidth: isFullWidth ? "unset" : "448px",
     ...inlineStyle
-  }, isFullWidth, isDisabled, hasErrorPlaceholder: !!mergedErrorOptions.hasErrorPlaceholder || !!mergedErrorOptions.text || !!error, isActive: isShowing, isInvalid: !!mergedErrorOptions.text || !!mergedErrorOptions.isErrorState || !!error, "data-testid": "wrapper", "aria-haspopup": "true" }, !!label && /* @__PURE__ */ React10.createElement(FormFieldLabel, null, label), /* @__PURE__ */ React10.createElement(DropdownInputContainer, { ref: connectedElementRef }, /* @__PURE__ */ React10.createElement(DropdownInput, { placeholder, placeholderIcon, size, isRequired, allOptionsSelectedLabel, isEditable: isSearchable, onChange: (value2) => setFilter(value2), dropdownIsOpen: isShowing, isDisabled, items, onOpenDropdown: openDropdown, onKeyPress: setPressedKey, currentVal, focusedItem, labelTransformation, id, ariaLabel }), /* @__PURE__ */ React10.createElement(IconRotator, { isRotated: isShowing }, /* @__PURE__ */ React10.createElement(IconWrapper5, { icon: arrowDownBold, color: isDisabled ? "text-disabled-1" : "text-1", size: size === "small" ? "xs" : "sm" }))), !!(mergedErrorOptions.text || error) && /* @__PURE__ */ React10.createElement(DropdownError, { errorText: mergedErrorOptions.text ?? getInternalErrorText(error, label) })), isShowing && /* @__PURE__ */ React10.createElement(DropdownOverlay, { id, ref: popoverRef, isRootOverlay: true, isGtMobile, noItemsText: noOptionsMessage, isMulti, onItemSelect: setSelectedItem, size, onClose: () => setIsShowing(false), filteredItems, inputIsKeyboard: inputMode === "keyboard", allItems: items, pressedKey, currentVal, selectAllOption: hasSelectAllOption && isMulti ? selectAllOption : void 0, hasLoadMoreItemsButton, onLoadMoreItems: emitLoadMoreItems, isLoadingMoreItems, focusedItem, setFocusedItem: updateFocusedItem, setHoveredItem: emitHoveredItem, isSearchMode: !!filter }));
+  }, isFullWidth, isDisabled, hasErrorPlaceholder: !!mergedErrorOptions.hasErrorPlaceholder || !!mergedErrorOptions.text || !!error, isActive: isShowing, isInvalid: !!mergedErrorOptions.text || !!mergedErrorOptions.isErrorState || !!error, "data-testid": "wrapper", "aria-haspopup": "true" }, !!label && /* @__PURE__ */ React10.createElement(FormFieldLabel, null, label), /* @__PURE__ */ React10.createElement(FormFieldInputContainer, { style: {
+    width: "100%",
+    cursor: isDisabled ? "not-allowed" : "pointer"
+  }, ref: connectedElementRef }, /* @__PURE__ */ React10.createElement(DropdownInput, { placeholder, placeholderIcon, size, isRequired, allOptionsSelectedLabel, isEditable: isSearchable, onChange: (value2) => setFilter(value2), dropdownIsOpen: isShowing, isDisabled, items, onOpenDropdown: openDropdown, onKeyPress: setPressedKey, currentVal, focusedItem, labelTransformation, id, ariaLabel }), /* @__PURE__ */ React10.createElement(IconRotator, { isRotated: isShowing, size }, /* @__PURE__ */ React10.createElement(IconWrapper5, { icon: arrowDownBold, color: isDisabled ? "text-disabled-1" : "text-1", size: size === "small" ? "xs" : "sm" }))), !!(mergedErrorOptions.text || error) && /* @__PURE__ */ React10.createElement(DropdownError, { errorText: mergedErrorOptions.text ?? getInternalErrorText(error, label) })), isShowing && /* @__PURE__ */ React10.createElement(DropdownOverlay, { id, ref: popoverRef, isRootOverlay: true, isGtMobile, noItemsText: noOptionsMessage, isMulti, onItemSelect: setSelectedItem, size, onClose: () => setIsShowing(false), filteredItems, inputIsKeyboard: inputMode === "keyboard", allItems: items, pressedKey, currentVal, selectAllOption: hasSelectAllOption && isMulti ? selectAllOption : void 0, hasLoadMoreItemsButton, onLoadMoreItems: emitLoadMoreItems, isLoadingMoreItems, focusedItem, setFocusedItem: updateFocusedItem, setHoveredItem: emitHoveredItem, isSearchMode: !!filter }));
 };
@@ -1155,0 +1124,0 @@ export {

dist/react/styledComponents.d.ts

 /// <reference types="react" />
 import { FormFieldSizes } from '@elvia/elvis-toolbox';
-export declare const DropdownContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & import("@elvia/elvis-toolbox").FormFieldContainerProps & import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const DropdownInputContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const OverlayPositioner: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconRotator: import("@emotion/styled").StyledComponent<{
@@ -24,2 +8,3 @@ theme?: import("@emotion/react").Theme | undefined;
     isRotated: boolean;
+    size: FormFieldSizes;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -26,0 +11,0 @@ export declare const DropdownIconContainer: import("@emotion/styled").StyledComponent<{

package.json

 {
   "name": "@elvia/elvis-dropdown",
-  "version": "9.4.2",
+  "version": "9.4.3",
   "license": "MIT",
@@ -24,3 +24,3 @@ "homepage": "https://design.elvia.io/components/dropdown",
     "@elvia/elvis-component-wrapper": "^4.2.0",
-    "@elvia/elvis-toolbox": "^12.0.1",
+    "@elvia/elvis-toolbox": "^12.0.3",
     "@elvia/elvis-tooltip": "^1.3.6",
@@ -27,0 +27,0 @@ "@elvia/elvis-typography": "^2.7.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

102030

decreased by-2.79%

Number of package files

31

decreased by-3.12%

Lines of code

2819

decreased by-1.57%

Dependency changes

• Updated@elvia/elvis-toolbox@^12.0.3