@laerdal/life-react-components 1.1.2-dev.8 → 1.2.1-dev.2

package/dist/js/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","React","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","document","addEventListener","removeEventListener","customSetIsOpen","concat","stopPropagation","COLORS","neutral_600","onValueUpdate","items","Size","Medium","Small","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 { DropdownButton, 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  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\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?: 'small' | 'medium';\n  margin?: 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  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType,\n  action,\n  actionLabel,\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}: 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[]>([]);\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        \n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    \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)\n      return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\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  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\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\n          <InputField\n          type=\"search\"\n          readOnly\n          placeholder={placeholderSearch}\n          value={input}\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=\"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\n\n\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size == 'medium' ? Size.Medium : Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={selectedValues}\n            setSelectedValues={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":["MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","id","list","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","React","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","document","addEventListener","removeEventListener","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","stopPropagation","COLORS","neutral_600","onValueUpdate","items","Size","Medium","Small","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 { DropdownButton, 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  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\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?: 'small' | 'medium';\n  margin?: 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  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\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}: 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[]>([]);\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) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\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}>\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          <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=\"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              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size == 'medium' ? Size.Medium : Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={selectedValues}\n            setSelectedValues={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/js/Dropdown/CommonStyling.d.ts

@@ -20,6 +20,7 @@ export declare const DropdownContentStyling: import("styled-components").StyledC
 export declare const DropdownButton: import("styled-components").StyledComponent<"button", any, {
     size?: Size;
 }, never>;
+export declare const DropdownButtonCSS: (size?: Size) => import("styled-components").FlattenSimpleInterpolation;
 export declare const ButtonDropdownWrapper: import("styled-components").StyledComponent<"div", any, {
     locked?: boolean;
     disabled?: boolean;

package/dist/js/Dropdown/CommonStyling.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonDropdownWrapper = exports.DropdownButton = exports.DropdownContentStyling = exports.ButtonDropdownContentStyling = exports.StyledField = exports.InputField = exports.Dropdown = void 0;
+exports.ButtonDropdownWrapper = exports.DropdownButtonCSS = exports.DropdownButton = exports.DropdownContentStyling = exports.ButtonDropdownContentStyling = exports.StyledField = exports.InputField = exports.Dropdown = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -17,7 +17,7 @@ var _typography = require("../styles/typography");
 
 var _types = require("../types");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 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); }
 
@@ -67,19 +67,19 @@ var DropdownContentStyling = _styledComponents.default.div(_templateObject9 || (
 
 exports.DropdownContentStyling = DropdownContentStyling;
 
-var DropdownButton = _styledComponents.default.button(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\n  ", "\n  ", "\n  ", "\n\n  position: relative;\n  text-decoration: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: ", ";\n  background-color: ", ";\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n\n  div.divider  {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  span {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n  }\n\n  div.item-content {\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    div.item-label {\n      flex: 1 0 calc(100% - 40px);\n    }\n\n    div.item-icon {\n      margin-right: 6px;\n    }\n    div.item-icon-old {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  ", ";\n\n  &.active {\n    background: ", ";\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), function (props) {
-  return props.size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
-}, function (props) {
-  return props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
-}, function (props) {
-  return props.size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600);
-}, function (props) {
-  return props.size == _types.Size.Large ? '64px' : props.size == _types.Size.Medium ? '56px' : '48px';
-}, _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+var DropdownButton = _styledComponents.default.button(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
+  return DropdownButtonCSS(props.size);
+});
 
 exports.DropdownButton = DropdownButton;
 
-var ButtonDropdownWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _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) {
+var DropdownButtonCSS = function DropdownButtonCSS(size) {
+  return (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\n  ", "\n  ", "\n  ", "\n\n  position: relative;\n  text-decoration: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: ", ";\n  background-color: ", ";\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n\n  span {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n  }\n\n  div.item-content {\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    div.item-label {\n      flex: 1 0 calc(100% - 40px);\n    }\n\n    div.item-icon {\n      margin-right: 6px;\n    }\n    div.item-icon-old {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  ", ";\n\n  &.active {\n    background: ", ";\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &:disabled {\n    background-color: transparent;\n    cursor: not-allowed;\n    color: ", "\n  }\n\n  &.active:hover {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    svg {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px', _styles.COLORS.white, _common.CommonInteractionStyling, _styles.COLORS.neutral_20, _styles.COLORS.primary_500, _styles.COLORS.neutral_200, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+};
+
+exports.DropdownButtonCSS = DropdownButtonCSS;
+
+var ButtonDropdownWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _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/js/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","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","neutral_200","DropdownButton","button","size","Size","Small","Medium","Large","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"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';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && '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 }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: 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: 1;\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\nexport const DropdownButton = styled.button<{ size?: Size }>`\n\n  ${props => props.size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${props => props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${props => props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  position: relative;\n  text-decoration: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: ${props => props.size == Size.Large ? '64px' : props.size == Size.Medium ? '56px' : '48px'};\n  background-color: ${COLORS.white};\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n\n  div.divider  {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  span {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n  }\n\n  div.item-content {\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    div.item-label {\n      flex: 1 0 calc(100% - 40px);\n    }\n\n    div.item-icon {\n      margin-right: 6px;\n    }\n    div.item-icon-old {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  ${CommonInteractionStyling};\n\n  &.active {\n    background: ${COLORS.neutral_20};\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\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":["Dropdown","styled","div","props","isButton","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","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Size","Small","Medium","Large","primary_500","primary_20","primary_100","ButtonDropdownWrapper","primary_700"],"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';\n\nexport const Dropdown = styled.div<{ isButton: boolean; locked?: boolean; disabled?: boolean; margin?: string }>`\n  position: relative;\n  display: inline-block;\n  ${(props) => !props.isButton && '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 }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: 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: 1;\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\nexport const DropdownButton = styled.button<{size? : Size}>`\n  ${props => DropdownButtonCSS(props.size)}\n`;\n\nexport const DropdownButtonCSS = (size? : Size) => {\n  return css`\n\n  ${size == Size.Small && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  ${size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  position: relative;\n  text-decoration: none;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  min-height: ${size == Size.Large ? '64px' : size == Size.Medium ? '56px' : '48px'};\n  background-color: ${COLORS.white};\n  border: none;\n  cursor: pointer;\n  background: transparent;\n  width: 100%;\n  text-align: left;\n\n  span {\n    margin: auto 0 auto 16px;\n    line-height: 48px;\n  }\n\n  div.item-content {\n    margin: auto 0 auto 16px;\n    display: flex;\n    align-items: center;\n\n    div.item-label {\n      flex: 1 0 calc(100% - 40px);\n    }\n\n    div.item-icon {\n      margin-right: 6px;\n    }\n    div.item-icon-old {\n      flex: 1 0 40px;\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n\n  ${CommonInteractionStyling};\n\n  &.active {\n    background: ${COLORS.neutral_20};\n\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: 2px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &:disabled {\n    background-color: transparent;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_200}\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n\n    &::after {\n      background-color: ${COLORS.primary_500};\n    }\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"}

package/dist/js/Dropdown/DropdownButton.d.ts

@@ -2,5 +2,5 @@
  * Import custom types.
  */
 import { DropdownButtonProps } from './DropdownButtonTypes';
-declare const DropdownButton: ({ items, icon, disabled, onClick, itemsType, action, actionLabel, width, size, alignLeft, multiSelect, scrollable, pinTopItem, maxHeight }: DropdownButtonProps) => JSX.Element;
+declare const DropdownButton: ({ items, icon, disabled, onClick, itemsType, action, actionLabel, actionVariant, width, size, alignLeft, multiSelect, scrollable, pinTopItem, maxHeight }: DropdownButtonProps) => JSX.Element;
 export default DropdownButton;

package/dist/js/Dropdown/DropdownButton.js

@@ -49,6 +49,7 @@ var DropdownButton = function DropdownButton(_ref) {
       action = _ref.action,
       _ref$actionLabel = _ref.actionLabel,
       actionLabel = _ref$actionLabel === void 0 ? '' : _ref$actionLabel,
+      actionVariant = _ref.actionVariant,
       width = _ref.width,
       size = _ref.size,
       alignLeft = _ref.alignLeft,
@@ -83,20 +84,23 @@ var DropdownButton = function DropdownButton(_ref) {
     onClick(values);
   };
 
-  var handleKeyPress = function handleKeyPress(e) {
+  var handleKeyDown = function handleKeyDown(e) {
     if (buttonRef !== null && buttonRef !== void 0 && buttonRef.current && buttonRef.current.contains(e.target)) {
-      if (e.keyCode === 13) {
-        setDropdownOpen(!dropdownOpen);
-      } else if (e.keyCode === 40) {
-        setDropdownOpen(!dropdownOpen);
+      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();
+        }
       }
     }
   };
 
   React.useEffect(function () {
-    document.addEventListener('keypress', handleKeyPress);
+    document.addEventListener('keydown', handleKeyDown);
     return function () {
-      document.removeEventListener('keypress', handleKeyPress);
+      document.removeEventListener('keydown', handleKeyDown);
     };
   });
   /**
@@ -109,8 +113,13 @@ var DropdownButton = function DropdownButton(_ref) {
       ref: buttonRef,
       variant: "secondary",
       shape: "circular",
-      action: function action() {
-        return setDropdownOpen(!dropdownOpen);
+      action: function action(event) {
+        if (!event) {
+          //if no event details passed, then this means that user pressed 'enter'
+          if (!dropdownOpen) setFocused(0);
+        }
+
+        setDropdownOpen(!dropdownOpen);
       },
       disabled: disabled
     }, icon);
@@ -121,6 +130,7 @@ var DropdownButton = function DropdownButton(_ref) {
       itemsType: itemsType,
       action: action !== null && action !== void 0 ? action : function () {},
       actionLabel: actionLabel,
+      actionVariant: actionVariant,
       onValueUpdate: handleValueSelect,
       multiSelect: multiSelect,
       scrollable: scrollable,

package/dist/js/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","React","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","buttonRef","useRef","handleValueSelect","values","handleKeyPress","e","current","contains","target","keyCode","useEffect","document","addEventListener","removeEventListener","renderIconButton","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  \n  const handleKeyPress = (e: any) => {\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setDropdownOpen(!dropdownOpen);\n        \n      } else if (e.keyCode === 40) {\n        setDropdownOpen(!dropdownOpen);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton ref={buttonRef} variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","React","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","buttonRef","useRef","handleValueSelect","values","handleKeyDown","e","current","contains","target","keyCode","preventDefault","click","useEffect","document","addEventListener","removeEventListener","renderIconButton","event","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  actionVariant,\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  \n  const handleKeyDown = (e: any) => {\n    if (buttonRef?.current && buttonRef.current.contains(e.target)) {\n      if (e.keyCode === 13 || e.keyCode === 40 || e.keyCode === 32) {\n        if(!dropdownOpen)\n          setFocused(0);\n          \n        if(e.keyCode != 40)\n        {\n          e.preventDefault();\n          buttonRef?.current.click();\n        }\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);      \n    };\n  });\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton ref={buttonRef}  variant=\"secondary\" shape=\"circular\" action={(event: any) => \n      {\n        if(!event) { //if no event details passed, then this means that user pressed 'enter'\n          if(!dropdownOpen)\n            setFocused(0);\n        }\n        setDropdownOpen(!dropdownOpen);\n      }} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/js/Dropdown/DropdownButtonTypes.d.ts

@@ -10,6 +10,7 @@ export interface DropdownButtonProps {
     itemsType?: 'normal' | 'radio' | 'checkbox';
     action?: () => void;
     actionLabel?: string;
+    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
     multiSelect?: boolean;
     scrollable?: boolean;
     pinTopItem?: boolean;

package/dist/js/Dropdown/DropdownContent.d.ts

@@ -16,14 +16,17 @@ export interface DropdownItem {
     showDividerAbove?: boolean;
     disabled?: boolean;
     icon?: React.ReactNode;
+    customContent?: React.ReactNode;
 }
 export interface DropdownCustomizationProps {
     itemsType?: 'radio' | 'checkbox' | 'normal';
+    menuContent?: React.ReactNode;
     scrollable?: boolean;
     multiSelect?: boolean;
     maxHeight?: string;
     actionLabel?: string;
-    action: () => void;
+    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+    action: () => boolean | void | undefined;
     pinTopItem?: boolean;
     onValueUpdate: (values: string[]) => void;
     items: DropdownItem[];