@laerdal/life-react-components 1.10.3-dev.9.full → 1.11.0-dev.10

package/dist/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","Dropdown","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","InputField","input","black","StyledField","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\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\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\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\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`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\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\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\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}
+{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","Dropdown","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","InputField","input","black","StyledField","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\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\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\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\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`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\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\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\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"mappings":"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"}

package/dist/Dropdown/DropdownButton.cjs

@@ -39,7 +39,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: inline-block;\n"])));
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n"])));
 
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var items = _ref.items,
@@ -89,11 +89,13 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       keyboardNavigated = _React$useState8[0],
       setKeyboardNavigated = _React$useState8[1];
 
-  var containerRef = (0, _common.useClickOutsideRef)(function () {
+  var dropdownRef = React.useRef(null);
+  var containerRef = (0, _common.useFocusOutsideRef)(function () {
     return setDropdownOpen(false);
-  }, [], (0, _common.useFocusOutsideRef)(function () {
+  }, [dropdownRef]);
+  (0, _common.useClickOutsideRef)(function () {
     return setDropdownOpen(false);
-  }));
+  }, [], containerRef);
   React.useEffect(function () {
     !dropdownOpen && setKeyboardNavigated(false);
   }, [dropdownOpen]);
@@ -177,6 +179,8 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: className,
     ref: containerRef,
     children: [renderButton(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+      ref: dropdownRef,
+      containerRef: containerRef,
       customizationProps: {
         itemsType: itemsType,
         action: action !== null && action !== void 0 ? action : function () {},

package/dist/Dropdown/DropdownButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","React","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","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';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\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 [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\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        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && 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.cjs"}
+{"version":3,"file":"DropdownButton.cjs","names":["Wrapper","styled","div","DropdownButton","React","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useFocusOutsideRef","useClickOutsideRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"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';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\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 [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n  useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderButton()}\n      <DropdownContent\n        ref={dropdownRef}\n        containerRef={containerRef}\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\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        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && 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"],"mappings":"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"}

package/dist/Dropdown/DropdownButton.js

@@ -25,7 +25,7 @@ import { TextButtonDropdownArrow, TextButtonDropdownContent, TextButtonDropdownI
 import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n"])));
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var items = _ref.items,
       icon = _ref.icon,
@@ -74,11 +74,13 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       keyboardNavigated = _React$useState8[0],
       setKeyboardNavigated = _React$useState8[1];
 
-  var containerRef = useClickOutsideRef(function () {
+  var dropdownRef = React.useRef(null);
+  var containerRef = useFocusOutsideRef(function () {
     return setDropdownOpen(false);
-  }, [], useFocusOutsideRef(function () {
+  }, [dropdownRef]);
+  useClickOutsideRef(function () {
     return setDropdownOpen(false);
-  }));
+  }, [], containerRef);
   React.useEffect(function () {
     !dropdownOpen && setKeyboardNavigated(false);
   }, [dropdownOpen]);
@@ -162,6 +164,8 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: className,
     ref: containerRef,
     children: [renderButton(), /*#__PURE__*/_jsx(DropdownContent, {
+      ref: dropdownRef,
+      containerRef: containerRef,
       customizationProps: {
         itemsType: itemsType,
         action: action !== null && action !== void 0 ? action : function () {},

package/dist/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["React","IconButton","DropdownContent","styled","defaultOnMouseDownHandler","useClickOutsideRef","useFocusOutsideRef","TextButtonDropdownArrow","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownText","TextButtonDropdownWrapper","ArrowDropDown","ArrowDropUp","Wrapper","div","DropdownButton","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","e","key","preventDefault","stopPropagation","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';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\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 [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\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        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && 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,"file":"DropdownButton.js","names":["React","IconButton","DropdownContent","styled","defaultOnMouseDownHandler","useClickOutsideRef","useFocusOutsideRef","TextButtonDropdownArrow","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownText","TextButtonDropdownWrapper","ArrowDropDown","ArrowDropUp","Wrapper","div","DropdownButton","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","e","key","preventDefault","stopPropagation","onValueUpdate"],"sources":["../../src/Dropdown/DropdownButton.tsx"],"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';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\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 [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const containerRef = useFocusOutsideRef(() => setDropdownOpen(false), [dropdownRef]);\n  useClickOutsideRef(() => setDropdownOpen(false), [], containerRef);\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderButton()}\n      <DropdownContent\n        ref={dropdownRef}\n        containerRef={containerRef}\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\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        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && 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"],"mappings":"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"}

package/dist/Dropdown/DropdownButtonTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"DropdownButtonTypes.cjs"}
+{"version":3,"file":"DropdownButtonTypes.cjs","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps {\n  items: DropdownItem[];\n  value?: string[];\n  onClick: (value: string[]) => void;\n  disabled?: boolean;\n  size?: Size;\n  itemsType?: 'normal' | 'radio' | 'checkbox',\n  action?: () => void,\n  actionLabel?: string,\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined,\n  multiSelect?: boolean,\n  scrollable?: boolean,\n  maxHeight?: string,\n  pinTopItem?: boolean,\n  className?: string,\n  icon?: React.ReactNode;\n  width?: string;\n  alignLeft?: boolean;\n}\n\nexport type IconDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TextDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'text';\n  label?: string;\n  keepLabel?: boolean;\n}\n\nexport  type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;\n"],"mappings":""}

package/dist/Dropdown/DropdownButtonTypes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '../types';
 import { DropdownItem } from './DropdownContent';
 export interface DropdownButtonBaseProps {

package/dist/Dropdown/DropdownButtonTypes.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"DropdownButtonTypes.js"}
+{"version":3,"file":"DropdownButtonTypes.js","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps {\n  items: DropdownItem[];\n  value?: string[];\n  onClick: (value: string[]) => void;\n  disabled?: boolean;\n  size?: Size;\n  itemsType?: 'normal' | 'radio' | 'checkbox',\n  action?: () => void,\n  actionLabel?: string,\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined,\n  multiSelect?: boolean,\n  scrollable?: boolean,\n  maxHeight?: string,\n  pinTopItem?: boolean,\n  className?: string,\n  icon?: React.ReactNode;\n  width?: string;\n  alignLeft?: boolean;\n}\n\nexport type IconDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TextDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'text';\n  label?: string;\n  keepLabel?: boolean;\n}\n\nexport  type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;\n"],"mappings":""}

package/dist/Dropdown/DropdownContent.cjs

@@ -37,7 +37,7 @@ var _MenuItem = _interopRequireDefault(require("../MenuItem/MenuItem"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
@@ -49,13 +49,11 @@ var MAX_MENU_HEIGHT = 240;
 var AVG_OPTION_HEIGHT = 48;
 var OFFSET_BEFORE_SHOW = 1000000;
 
-var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n\n  width: ", ";\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.up,\n  &.down {\n    transform: translate(0, 0);\n  }\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n\n"])), _styles.COLORS.white, function (props) {
-  return props.width ? props.width : '100%';
-}, _zIndexes.Z_INDEXES.dropdown, function (props) {
+var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.dropdown, function (props) {
   return props.isButton ? '-4px' : '4px 0px';
-}, OFFSET_BEFORE_SHOW, OFFSET_BEFORE_SHOW, function (props) {
-  return props.alignLeft ? 'left: 0px;' : '';
 }, function (props) {
+  return "transform: translate(".concat(props.offsetLeft, ", ").concat(props.offsetTop, ");");
+}, OFFSET_BEFORE_SHOW, OFFSET_BEFORE_SHOW, function (props) {
   return props.isButton ? _CommonStyling.ButtonDropdownContentStyling : '';
 }, _styles.COLORS.neutral_100, function (props) {
   return props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px';
@@ -115,6 +113,8 @@ var ActionButtonContainer = _styledComponents.default.div(_templateObject7 || (_
   return props.size === _types.Size.Small || !props.size ? '4px 16px 0px' : props.size === _types.Size.Medium ? '12px 16px 8px' : '16px 16px 12px';
 });
 
+var Overlay = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), _zIndexes.Z_INDEXES.modal);
+
 var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref2, _customizationProps$a;
 
@@ -132,7 +132,8 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       selectedValues = _ref.selectedValues,
       setSelectedValues = _ref.setSelectedValues,
       messageOnNoResults = _ref.messageOnNoResults,
-      outline = _ref.outline;
+      outline = _ref.outline,
+      containerRef = _ref.containerRef;
 
   var _React$useState = _react.default.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -144,6 +145,14 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       locationDefined = _React$useState4[0],
       setLocationDefined = _React$useState4[1];
 
+  var _React$useState5 = _react.default.useState({
+    top: '0',
+    left: '0'
+  }),
+      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+      offset = _React$useState6[0],
+      setOffset = _React$useState6[1];
+
   var dropdownContentRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : _react.default.useRef(null);
   if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
   if (!size) size = _types.Size.Small;
@@ -154,12 +163,16 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
   var determineDropUp = function determineDropUp() {
     var options = customizationProps.items;
-    var node = dropdownContentRef.current;
-    if (!node) return;
+    var rect = containerRef.current.getBoundingClientRect();
     var windowHeight = window.innerHeight;
     var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
-    var instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight + OFFSET_BEFORE_SHOW;
-    setIsUp(instOffsetWithMenu >= windowHeight);
+    var instOffsetWithMenu = rect.top + rect.height + menuHeight;
+    var up = instOffsetWithMenu >= windowHeight;
+    setOffset({
+      top: up ? "calc(-100% - ".concat(rect.height, "px ").concat(isButton ? '' : '- 8px', ")") : '0',
+      left: alignLeft ? "calc(-".concat(rect.width, "px)") : "calc(-100%)"
+    });
+    setIsUp(up);
     setLocationDefined(true);
   };
 
@@ -268,10 +281,10 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
   var arrLength = getFilteredItems().length;
 
-  var _React$useState5 = _react.default.useState([]),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      elRefs = _React$useState6[0],
-      setElRefs = _React$useState6[1];
+  var _React$useState7 = _react.default.useState([]),
+      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+      elRefs = _React$useState8[0],
+      setElRefs = _React$useState8[1];
 
   _react.default.useEffect(function () {
     if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
@@ -362,6 +375,19 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     }
   }, [isOpen]);
 
+  _react.default.useEffect(function () {
+    if (isOpen) {
+      calculateOffset();
+      window.addEventListener('scroll', calculateOffset);
+      window.addEventListener('resize', calculateOffset);
+    }
+
+    return function () {
+      window.removeEventListener('scroll', calculateOffset);
+      window.addEventListener('resize', calculateOffset);
+    };
+  }, [isOpen]);
+
   var handleItemClick = function handleItemClick(selected, item) {
     var newValue = [];
 
@@ -520,50 +546,65 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     });
   };
 
+  var calculateOffset = function calculateOffset() {
+    var _containerRef$current;
+
+    var rect = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect();
+
+    if (rect) {
+      dropdownContentRef.current.style.left = "".concat(rect.x + rect.width, "px");
+      dropdownContentRef.current.style.top = "".concat(rect.y + rect.height, "px");
+      dropdownContentRef.current.style.width = width !== null && width !== void 0 ? width : "".concat(rect.width, "px");
+    }
+  };
+
   var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? isUp ? 'up' : 'down' : '');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DDContainer, {
-    ref: dropdownContentRef,
-    size: size,
-    width: width,
-    tabIndex: -1,
-    isButton: isButton,
-    alignLeft: alignLeft,
-    scrollable: customizationProps.scrollable,
-    maxHeight: customizationProps.maxHeight,
-    className: cls,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ListContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DDContainer, {
+      ref: dropdownContentRef,
       size: size,
-      itemsType: customizationProps.itemsType,
-      onScroll: handleScroll,
-      ref: itemsListRef,
-      outline: outline,
+      offsetTop: offset.top,
+      offsetLeft: offset.left,
+      tabIndex: -1,
+      isButton: isButton,
+      alignLeft: alignLeft,
       scrollable: customizationProps.scrollable,
-      children: [customizationProps.menuContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuContentContainer, {
+      maxHeight: customizationProps.maxHeight,
+      className: cls,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ListContainer, {
         size: size,
-        children: [customizationProps.menuContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(DividerContainer, {
+        itemsType: customizationProps.itemsType,
+        onScroll: handleScroll,
+        ref: itemsListRef,
+        outline: outline,
+        scrollable: customizationProps.scrollable,
+        children: [customizationProps.menuContent && /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuContentContainer, {
           size: size,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "divider"
-          })
-        })]
-      }), customizationProps.pinTopItem && getTopItem(), getElements(messageOnNoResults, size)]
-    }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButtonContainer, {
-      size: size,
-      scrollable: customizationProps.scrollable,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        width: "100%",
-        icon: customizationProps.actionIcon,
-        ref: actionButtonRef,
-        loading: customizationProps.actionLoading,
-        disabled: customizationProps.actionDisabled,
-        variant: (_customizationProps$a = customizationProps.actionVariant) !== null && _customizationProps$a !== void 0 ? _customizationProps$a : 'primary',
+          children: [customizationProps.menuContent, /*#__PURE__*/(0, _jsxRuntime.jsx)(DividerContainer, {
+            size: size,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "divider"
+            })
+          })]
+        }), customizationProps.pinTopItem && getTopItem(), getElements(messageOnNoResults, size)]
+      }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButtonContainer, {
         size: size,
-        onClick: function onClick() {
-          return customizationProps.action() && setIsOpen(false);
-        },
-        children: customizationProps.actionLabel
-      })
-    })]
+        scrollable: customizationProps.scrollable,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+          width: "100%",
+          icon: customizationProps.actionIcon,
+          ref: actionButtonRef,
+          loading: customizationProps.actionLoading,
+          disabled: customizationProps.actionDisabled,
+          variant: (_customizationProps$a = customizationProps.actionVariant) !== null && _customizationProps$a !== void 0 ? _customizationProps$a : 'primary',
+          size: size,
+          onClick: function onClick() {
+            return customizationProps.action() && setIsOpen(false);
+          },
+          children: customizationProps.actionLabel
+        })
+      })]
+    })
   });
 });