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

package/dist/umd/Dropdown/BasicDropdown.js

@@ -90,9 +90,10 @@
     initalValue,
     disableSorting,
     messageOnNoResults,
-    itemsType,
+    itemsType = 'normal',
     action,
     actionLabel,
+    actionVariant,
     pinTopItem,
     multiSelect,
     scrollable = true,
@@ -161,6 +162,12 @@
       setIsOpen(isOpen);
     };
 
+    const getDisplayItems = () => {
+      const values = input.split(',').map(val => val.trim());
+      const listDisplayLabels = list.filter(item => values.includes(item.value)).map(l => l.displayLabel);
+      return listDisplayLabels.join(', ');
+    };
+
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CommonStyling.Dropdown, {
       isButton: isButton || false,
       className: size ? size : '',
@@ -185,7 +192,7 @@
       type: "search",
       readOnly: true,
       placeholder: placeholderSearch,
-      value: input,
+      value: getDisplayItems(),
       className: size ? `${size} value` : 'value',
       onClick: e => {
         if (!locked && !disabled) {
@@ -212,6 +219,7 @@
         itemsType: itemsType,
         action: action ?? (() => {}),
         actionLabel: actionLabel,
+        actionVariant: actionVariant,
         scrollable: scrollable,
         onValueUpdate: handleValueSelect,
         items: list,
@@ -243,7 +251,7 @@
   BasicDropdown.propTypes = {
     id: _propTypes2.default.string.isRequired,
     list: _propTypes2.default.array.isRequired,
-    itemsType: _propTypes2.default.oneOf(['normal', 'checkbox', 'radio']).isRequired,
+    itemsType: _propTypes2.default.oneOf(['normal', 'checkbox', 'radio']),
     action: _propTypes2.default.func,
     actionLabel: _propTypes2.default.string,
     pinTopItem: _propTypes2.default.bool,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["id","list","itemsType","action","actionLabel","pinTopItem","multiSelect","scrollable","maxHeight","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","React","styledFieldRef","handleKeyPress","e","setFocused","setIsOpen","handleValueSelect","values","setRestartFilter","setInput","document","setIsLoading","customSetIsOpen","isOpen","input","isLoading","COLORS","neutral_600","onValueUpdate","items","Size","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":["id","list","itemsType","action","actionLabel","pinTopItem","multiSelect","scrollable","maxHeight","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","React","styledFieldRef","handleKeyPress","e","setFocused","setIsOpen","handleValueSelect","values","setRestartFilter","setInput","document","setIsLoading","customSetIsOpen","isOpen","getDisplayItems","input","val","listDisplayLabels","item","l","isLoading","COLORS","neutral_600","actionVariant","onValueUpdate","items","Size","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/umd/Dropdown/CommonStyling.js

@@ -16,7 +16,7 @@
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
-  exports.ButtonDropdownWrapper = exports.DropdownButton = exports.DropdownContentStyling = exports.ButtonDropdownContentStyling = exports.StyledField = exports.InputField = exports.Dropdown = undefined;
+  exports.ButtonDropdownWrapper = exports.DropdownButtonCSS = exports.DropdownButton = exports.DropdownContentStyling = exports.ButtonDropdownContentStyling = exports.StyledField = exports.InputField = exports.Dropdown = undefined;
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
@@ -271,17 +271,22 @@
   }
 `;
   const DropdownButton = exports.DropdownButton = _styledComponents2.default.button`
+  ${props => DropdownButtonCSS(props.size)}
+`;
+
+  const DropdownButtonCSS = exports.DropdownButtonCSS = size => {
+    return _styledComponents.css`
 
-  ${props => props.size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
-  ${props => props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
-  ${props => props.size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
+  ${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)}
 
   position: relative;
   text-decoration: none;
   display: flex;
   flex-direction: row;
   align-items: center;
-  min-height: ${props => props.size == _types.Size.Large ? '64px' : props.size == _types.Size.Medium ? '56px' : '48px'};
+  min-height: ${size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px'};
   background-color: ${_styles.COLORS.white};
   border: none;
   cursor: pointer;
@@ -289,15 +294,6 @@
   width: 100%;
   text-align: left;
 
-  div.divider  {
-    display: block;
-    width: calc(100% - 40px);
-    margin-left: 16px;
-    border-top: 1px solid #e5e5e5;
-    position: absolute;
-    top: 0px;
-  }
-
   span {
     margin: auto 0 auto 16px;
     line-height: 48px;
@@ -340,6 +336,12 @@
     }
   }
 
+  &:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+    color: ${_styles.COLORS.neutral_200}
+  }
+
   &.active:hover {
     background-color: ${_styles.COLORS.primary_20};
 
@@ -364,6 +366,8 @@
     }
   }
 `;
+  };
+
   const ButtonDropdownWrapper = exports.ButtonDropdownWrapper = _styledComponents2.default.div`
   box-sizing: border-box;
   min-height: 48px;

package/dist/umd/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","InputField","input","black","ComponentSStyling","BREAKPOINTS","MEDIUM","StyledField","neutral_400","ComponentXXSStyling","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","neutral_200","DropdownButton","button","Size","ComponentLStyling","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","margin","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","warning_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","InputField","input","black","ComponentSStyling","BREAKPOINTS","MEDIUM","StyledField","neutral_400","ComponentXXSStyling","ComponentXSStyling","primary_200","primary_300","neutral_800","neutral_20","CommonInteractionStyling","ButtonDropdownContentStyling","DropdownContentStyling","neutral_200","DropdownButton","button","DropdownButtonCSS","size","Size","ComponentLStyling","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/umd/Dropdown/DropdownButton.js

@@ -103,6 +103,7 @@
     itemsType = 'normal',
     action,
     actionLabel = '',
+    actionVariant,
     width,
     size,
     alignLeft,
@@ -122,20 +123,23 @@
       onClick(values);
     };
 
-    const handleKeyPress = e => {
+    const handleKeyDown = e => {
       if (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?.current.click();
+          }
         }
       }
     };
 
     React.useEffect(() => {
-      document.addEventListener('keypress', handleKeyPress);
+      document.addEventListener('keydown', handleKeyDown);
       return () => {
-        document.removeEventListener('keypress', handleKeyPress);
+        document.removeEventListener('keydown', handleKeyDown);
       };
     });
     /**
@@ -148,7 +152,14 @@
         ref: buttonRef,
         variant: "secondary",
         shape: "circular",
-        action: () => setDropdownOpen(!dropdownOpen),
+        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);
     };
@@ -158,6 +169,7 @@
         itemsType: itemsType,
         action: action ?? (() => {}),
         actionLabel: actionLabel,
+        actionVariant: actionVariant,
         onValueUpdate: handleValueSelect,
         multiSelect: multiSelect,
         scrollable: scrollable,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","itemsType","actionLabel","multiSelect","scrollable","pinTopItem","maxHeight","React","buttonRef","handleValueSelect","values","onClick","handleKeyPress","e","setDropdownOpen","document","renderIconButton","disabled","action","onValueUpdate","items"],"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","itemsType","actionLabel","multiSelect","scrollable","pinTopItem","maxHeight","React","buttonRef","handleValueSelect","values","onClick","handleKeyDown","e","setFocused","document","renderIconButton","event","setDropdownOpen","disabled","action","actionVariant","onValueUpdate","items"],"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"}