@laerdal/life-react-components 1.5.1 → 1.6.0

package/dist/Dropdown/BasicDropdown.js

@@ -8,11 +8,10 @@ import { Dropdown, StyledField, InputField } from './CommonStyling';
 import DropdownContent from './DropdownContent';
 import { AutofilledMessage, WarningMessage } from '../InputFields/styling';
 import { Size } from '../types';
+import { useFocusVisibleRef } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var MAX_MENU_HEIGHT = 240;
-var AVG_OPTION_HEIGHT = 48;
 
 var BasicDropdown = function BasicDropdown(_ref) {
   var id = _ref.id,
@@ -62,47 +61,30 @@ var BasicDropdown = function BasicDropdown(_ref) {
       input = _React$useState6[0],
       setInput = _React$useState6[1];
 
-  var _React$useState7 = React.useState(placeholder || ''),
+  var _React$useState7 = React.useState(null),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      placeholderSearch = _React$useState8[0],
-      setPlaceholderSearch = _React$useState8[1];
+      focused = _React$useState8[0],
+      setFocused = _React$useState8[1];
 
-  var _React$useState9 = React.useState(false),
+  var _React$useState9 = React.useState(initalValue ? [initalValue] : []),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      restartFilter = _React$useState10[0],
-      setRestartFilter = _React$useState10[1];
+      selectedValues = _React$useState10[0],
+      setSelectedValues = _React$useState10[1];
 
-  var _React$useState11 = React.useState(null),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      focused = _React$useState12[0],
-      setFocused = _React$useState12[1];
-
-  var _React$useState13 = React.useState(initalValue ? [initalValue] : []),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      selectedValues = _React$useState14[0],
-      setSelectedValues = _React$useState14[1];
-
-  var styledFieldRef = React.useRef(null);
-  /*
-  if (!items.includes(input)) {
-    setInput('');
-    setPlaceholderSearch(placeholder || '');
-  } */
+  var inputRef = React.useRef(null);
+  var styledFieldRef = useFocusVisibleRef([inputRef]);
 
   var handleKeyPress = function handleKeyPress(e) {
-    if (styledFieldRef !== null && styledFieldRef !== void 0 && styledFieldRef.current && styledFieldRef.current.contains(e.target)) {
-      if (e.keyCode === 13) {
-        setFocused(0);
-        setIsOpen(!isOpen);
-      } else if (e.keyCode === 40) {
-        setFocused(0);
-        setIsOpen(!isOpen);
-      }
+    if (e.key === 'Enter') {
+      setFocused(0);
+      setIsOpen(!isOpen);
+    } else if (e.key === 'ArrowDown' || e.key === 'Down') {
+      setFocused(0);
+      setIsOpen(!isOpen);
     }
   };
 
   var handleValueSelect = function handleValueSelect(values) {
-    setRestartFilter(true);
     setInput(values.join(', '));
     onSelect && onSelect(values); //don't close dropdown on item select if have custom action or multiselect
 
@@ -115,15 +97,9 @@ var BasicDropdown = function BasicDropdown(_ref) {
     if (initalValue || dropdownMenuValues) {
       var initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
       setInput(initValue);
-      setRestartFilter(true);
+      setSelectedValues([initValue]);
     }
   }, [initalValue, dropdownMenuValues]);
-  React.useEffect(function () {
-    document.addEventListener('keypress', handleKeyPress);
-    return function () {
-      document.removeEventListener('keypress', handleKeyPress);
-    };
-  });
   React.useEffect(function () {
     setIsLoading(false);
   }, [input]);
@@ -155,31 +131,38 @@ var BasicDropdown = function BasicDropdown(_ref) {
       children: [/*#__PURE__*/_jsxs(StyledField, {
         ref: styledFieldRef,
         className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
-        onClick: function onClick() {
-          if (!locked || !disabled) {
+        onClick: function onClick(e) {
+          if (!locked && !disabled) {
+            e.stopPropagation();
             setIsOpen(!isOpen);
+
+            if (isOpen) {
+              var _inputRef$current;
+
+              (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+            } else {
+              var _inputRef$current2;
+
+              (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+            }
           }
         },
         tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false,
         locked: locked || false,
-        showValidationMessage: !!activeValidationMessage,
-        placeholder: placeholderSearch,
         isPlaceholder: !input,
+        placeholder: placeholder,
+        showValidationMessage: !!activeValidationMessage,
+        onKeyPress: handleKeyPress,
         minWidth: minWidth,
         children: [/*#__PURE__*/_jsx(InputField, {
+          ref: inputRef,
           type: "search",
           readOnly: true,
-          placeholder: placeholderSearch,
+          placeholder: placeholder,
           value: getDisplayItems(),
           className: size ? "".concat(size, " value") : 'value',
-          onClick: function onClick(e) {
-            if (!locked && !disabled) {
-              e.stopPropagation();
-              setIsOpen(!isOpen);
-            }
-          },
-          tabIndex: disabled || locked ? -1 : 0,
+          tabIndex: -1,
           disabled: disabled || false
         }), isLoading ? /*#__PURE__*/_jsx(LoadingIndicator, {
           size: Size.Small,
@@ -188,7 +171,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
           onClick: function onClick() {
             return setIsOpen(!isOpen);
           },
-          className: 'icon',
+          className: 'icon dropdown-arrow',
           children: isOpen ? /*#__PURE__*/_jsx(ArrowDropUp, {
             size: "24px",
             className: size ? size : ''

package/dist/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","WarningMessage","Size","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","selectedValues","setSelectedValues","styledFieldRef","useRef","handleKeyPress","e","current","contains","target","keyCode","handleValueSelect","values","join","useEffect","initValue","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","Small","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}\n          minWidth={minWidth}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
+{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","WarningMessage","Size","useFocusVisibleRef","BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","selectedValues","setSelectedValues","inputRef","useRef","styledFieldRef","handleKeyPress","e","key","handleValueSelect","values","join","useEffect","initValue","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","current","blur","focus","Small","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler, useFocusVisibleRef} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n\n\n  const handleKeyPress = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      setFocused(0);\n      setIsOpen(!isOpen);\n    } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n      setFocused(0);\n      setIsOpen(!isOpen);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setSelectedValues([initValue]);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={(e) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyPress={handleKeyPress}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}

package/dist/Dropdown/CommonStyling.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledField = exports.InputField = exports.DropdownContentStyling = exports.Dropdown = exports.ButtonDropdownWrapper = exports.ButtonDropdownContentStyling = void 0;
+exports.StyledField = exports.InputField = exports.Dropdown = exports.ButtonDropdownWrapper = exports.ButtonDropdownContentStyling = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,9 +19,7 @@ var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
-var _zIndexes = require("../styles/z-indexes");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -36,8 +34,8 @@ var Dropdown = _styledComponents.default.div(_templateObject || (_templateObject
 }, _styles.COLORS.primary_600, _styles.COLORS.primary_800);
 
 exports.Dropdown = Dropdown;
-var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ", " !important;\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600, _styles.COLORS.neutral_600);
-var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ", " !important;\n  }\n  input {\n    color: ", " !important;\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
+var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow{\n    color: ", " !important;\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600, _styles.COLORS.neutral_600, _styles.COLORS.neutral_300);
+var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
 var activeValidationMessage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.warning_400, _styles.COLORS.warning_400, _styles.COLORS.warning_400);
 var placeholderStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
 
@@ -45,9 +43,11 @@ var InputField = _styledComponents.default.input(_templateObject6 || (_templateO
 
 exports.InputField = InputField;
 
-var StyledField = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), function (props) {
+var StyledField = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  .dropdown-arrow{\n    width: 24px;\n    height: 24px;\n    color: ", ";\n  }\n  \n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  \n  &:focus-within,\n  &.focus-visible-within{\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  \n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n    .dropdown-arrow{\n      color: ", ";\n    }\n    cursor: pointer;\n  }\n  \n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n    .dropdown-arrow{\n      color: ", ";\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n"])), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), function (props) {
   return props.minWidth ? "".concat(props.minWidth) : '344px';
-}, _styles.COLORS.white, _styles.COLORS.neutral_400, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_200, _styles.COLORS.primary_600, _styles.COLORS.primary_300, _styles.COLORS.primary_800, function (props) {
+}, _styles.COLORS.white, _styles.COLORS.neutral_400, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, 'inherit'), (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), function (props) {
+  return props.isPlaceholder ? _styles.COLORS.neutral_600 : undefined;
+}, _styles.COLORS.primary_800, _styles.COLORS.primary_200, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_300, _styles.COLORS.primary_800, _styles.COLORS.primary_800, function (props) {
   return (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Bold, props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_600);
 }, _styles.COLORS.neutral_800, _styles.COLORS.neutral_20, function (props) {
   return props.disabled ? disabledState : '';
@@ -63,15 +63,7 @@ exports.StyledField = StyledField;
 var ButtonDropdownContentStyling = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 344px;\n  right: 0;\n"])));
 exports.ButtonDropdownContentStyling = ButtonDropdownContentStyling;
 
-var DropdownContentStyling = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  z-index: ", ";\n  margin-top: ", ";\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.dropdown, function (props) {
-  return props.isButton ? '-4px' : '2px';
-}, function (props) {
-  return props.isButton ? ButtonDropdownContentStyling : '';
-}, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.neutral_200, _styles.COLORS.neutral_400);
-
-exports.DropdownContentStyling = DropdownContentStyling;
-
-var ButtonDropdownWrapper = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ", "\n  ", "\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n}"])), function (props) {
+var ButtonDropdownWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ", "\n  ", "\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n}"])), function (props) {
   return props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;';
 }, function (props) {
   return props.disabled ? 'pointer-events: none;' : '';

package/dist/Dropdown/CommonStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","minWidth","locked","disabled","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentTextStyle","Italic","InputField","input","Regular","black","BREAKPOINTS","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","Z_INDEXES","dropdown","neutral_200","ButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ${COLORS.neutral_300} !important;\n  }\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: ${Z_INDEXES.dropdown};\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.cjs"}
+{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","minWidth","locked","disabled","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentTextStyle","Italic","InputField","input","Regular","black","BREAKPOINTS","MEDIUM","StyledField","neutral_400","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","ButtonDropdownContentStyling","ButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow{\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow{\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n  \n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  \n  &:focus-within,\n  &.focus-visible-within{\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  \n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    .dropdown-arrow{\n      color: ${COLORS.primary_600};\n    }\n    cursor: pointer;\n  }\n  \n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n    .dropdown-arrow{\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.cjs"}

package/dist/Dropdown/CommonStyling.d.ts

@@ -15,9 +15,6 @@ export declare const StyledField: import("styled-components").StyledComponent<"d
     minWidth?: string | undefined;
 }, never>;
 export declare const ButtonDropdownContentStyling: import("styled-components").FlattenSimpleInterpolation;
-export declare const DropdownContentStyling: import("styled-components").StyledComponent<"div", any, {
-    isButton: boolean;
-}, never>;
 export declare const ButtonDropdownWrapper: import("styled-components").StyledComponent<"div", any, {
     locked?: boolean | undefined;
     disabled?: boolean | undefined;

package/dist/Dropdown/CommonStyling.js

@@ -1,12 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 import styled, { css } from 'styled-components';
 import { CommonInteractionStyling } from '../common';
 import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';
 import { ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';
-import { Z_INDEXES } from '../styles/z-indexes';
 export var Dropdown = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  ", "\n  ", "\n  ", "\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ", ";\n  }\n\n  input:active + div {\n    color: ", ";\n  }\n"])), function (props) {
   return !props.isButton && (props !== null && props !== void 0 && props.minWidth ? "width: 100%; min-width: ".concat(props.minWidth, ";") : 'width: 100%; min-width: 344px;');
 }, function (props) {
@@ -14,14 +13,16 @@ export var Dropdown = styled.div(_templateObject || (_templateObject = _taggedTe
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, COLORS.primary_600, COLORS.primary_800);
-var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ", " !important;\n  }\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600, COLORS.neutral_600);
-var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ", " !important;\n  }\n  input {\n    color: ", " !important;\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
+var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ", " !important;\n  }\n\n  .dropdown-arrow{\n    color: ", " !important;\n  }\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600, COLORS.neutral_600, COLORS.neutral_300);
+var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  color: ", ";\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ", " !important;\n  }\n\n  input {\n    color: ", " !important;\n    ::placeholder {\n      color: ", " !important;\n    }\n  }\n"])), COLORS.white, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
 var activeValidationMessage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.warning_400, COLORS.warning_400, COLORS.warning_400);
 var placeholderStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
 export var InputField = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ", " !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ", "\n\n    ", " {\n      ", "\n    }\n    &.small {\n      ", "\n    }\n    &.medium {\n      ", "\n    }\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.black, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
-export var StyledField = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n"])), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
+export var StyledField = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ", ";\n  width: 100%;\n\n  background: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.medium {\n    ", "\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  .dropdown-arrow{\n    width: 24px;\n    height: 24px;\n    color: ", ";\n  }\n  \n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  \n  &:focus-within,\n  &.focus-visible-within{\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  \n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n    .dropdown-arrow{\n      color: ", ";\n    }\n    cursor: pointer;\n  }\n  \n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    input {\n      ::placeholder {\n        color: ", ";\n      }\n    }\n    .dropdown-arrow{\n      color: ", ";\n    }\n  }\n\n  &.button {\n    ", "\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ", ";\n      background: ", ";\n    }\n  }\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  ", ";\n"])), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
   return props.minWidth ? "".concat(props.minWidth) : '344px';
-}, COLORS.white, COLORS.neutral_400, ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), COLORS.primary_800, COLORS.primary_800, COLORS.primary_800, COLORS.primary_200, COLORS.primary_600, COLORS.primary_300, COLORS.primary_800, function (props) {
+}, COLORS.white, COLORS.neutral_400, ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, 'inherit'), ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), function (props) {
+  return props.isPlaceholder ? COLORS.neutral_600 : undefined;
+}, COLORS.primary_800, COLORS.primary_200, COLORS.primary_600, COLORS.primary_600, COLORS.primary_300, COLORS.primary_800, COLORS.primary_800, function (props) {
   return ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600);
 }, COLORS.neutral_800, COLORS.neutral_20, function (props) {
   return props.disabled ? disabledState : '';
@@ -33,12 +34,7 @@ export var StyledField = styled.div(_templateObject7 || (_templateObject7 = _tag
   return props.isPlaceholder ? placeholderStyling : '';
 }, CommonInteractionStyling);
 export var ButtonDropdownContentStyling = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 344px;\n  right: 0;\n"])));
-export var DropdownContentStyling = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  z-index: ", ";\n  margin-top: ", ";\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), COLORS.white, Z_INDEXES.dropdown, function (props) {
-  return props.isButton ? '-4px' : '2px';
-}, function (props) {
-  return props.isButton ? ButtonDropdownContentStyling : '';
-}, COLORS.neutral_100, COLORS.white, COLORS.neutral_200, COLORS.neutral_400);
-export var ButtonDropdownWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ", "\n  ", "\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n}"])), function (props) {
+export var ButtonDropdownWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ", "\n  ", "\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n}"])), function (props) {
   return props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;';
 }, function (props) {
   return props.disabled ? 'pointer-events: none;' : '';

package/dist/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","Dropdown","div","props","isButton","minWidth","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","InputField","input","Regular","black","MEDIUM","StyledField","neutral_400","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","isPlaceholder","ButtonDropdownContentStyling","DropdownContentStyling","dropdown","neutral_200","ButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n  svg {\n    color: ${COLORS.neutral_300} !important;\n  }\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const DropdownContentStyling = styled.div<{ isButton: boolean }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: ${Z_INDEXES.dropdown};\n  margin-top: ${(props) => (props.isButton ? '-4px' : '2px')};\n\n  &.show {\n    display: block;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ${(props) => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  padding: 4px 0;\n\n  max-height: 240px;\n  overflow-y: auto;\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.white};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_200};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_400};\n  }\n`;\n\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}
+{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Dropdown","div","props","isButton","minWidth","locked","disabled","margin","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","Italic","InputField","input","Regular","black","MEDIUM","StyledField","neutral_400","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","ButtonDropdownContentStyling","ButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentLStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\nimport { Z_INDEXES } from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow{\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n\n    ${BREAKPOINTS.MEDIUM} {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.small {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n    &.medium {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; locked: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow{\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n  \n  &:focus {\n    outline: 3px solid #ddd;\n  }\n  \n  &:focus-within,\n  &.focus-visible-within{\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  \n  &:hover {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n    .dropdown-arrow{\n      color: ${COLORS.primary_600};\n    }\n    cursor: pointer;\n  }\n  \n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n    .dropdown-arrow{\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\nexport const ButtonDropdownWrapper = styled.div<{ locked?: boolean; disabled?: boolean }>`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n\n  .button {\n    min-width: 64px;\n  }\n\n  .value {\n    flex-grow: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .dropdown-arrow {\n    width: 24px;\n    height: 24px;\n  }\n\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : 'cursor: pointer;')}\n  ${(props) => (props.disabled ? 'pointer-events: none;' : '')}\n  \n  &:hover .button,\n  & > .button:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:focus .button,\n  & > .button:focus {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n    outline: none;\n  }\n\n  &:active .button,\n  & > .button:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}

package/dist/Dropdown/DropdownButton.cjs

@@ -72,49 +72,36 @@ var DropdownButton = function DropdownButton(_ref) {
       focused = _React$useState6[0],
       setFocused = _React$useState6[1];
 
-  var buttonRef = React.useRef(null);
-
   var handleValueSelect = function handleValueSelect(values) {
     // Do all required actions
     onClick(values);
   };
 
-  var handleKeyDown = function handleKeyDown(e) {
-    if (buttonRef !== null && buttonRef !== void 0 && buttonRef.current && buttonRef.current.contains(e.target)) {
-      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {
-        if (!dropdownOpen) setFocused(0);
-
-        if (e.keyCode != 40) {
-          e.preventDefault();
-          buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current.click();
-        }
+  var handeKeyPress = function handeKeyPress(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (!dropdownOpen) {
+        setFocused(0);
       }
+
+      setDropdownOpen(!dropdownOpen);
     }
   };
-
-  React.useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  });
   /**
    * Renders Icon Button dropdown menu.
    * @returns HTML View for the Icon button dropdown menu.
    */
 
+
   var renderIconButton = function renderIconButton() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-      ref: buttonRef,
       variant: "secondary",
       shape: "circular",
+      onKeyPress: handeKeyPress,
       action: function action(event) {
-        if (!event) {
-          //if no event details passed, then this means that user pressed 'enter'
-          if (!dropdownOpen) setFocused(0);
+        if ((event === null || event === void 0 ? void 0 : event.detail) === 1) {
+          // Only if the click is triggered by a mouse click this will be one
+          setDropdownOpen(!dropdownOpen);
         }
-
-        setDropdownOpen(!dropdownOpen);
       },
       disabled: disabled,
       children: icon