@laerdal/life-react-components 2.2.1-dev.23.full → 2.2.1-dev.24

package/dist/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"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};` : 'margin-bottom: 4px;')}\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  ::placeholder {\n    color: ${COLORS.neutral_600};\n    font-style: italic;\n  }\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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"}
+{"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","TooltipTrigger","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","ellipsis","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';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\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<{ellipsis?: boolean}>`\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  ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n  \n  ::placeholder {\n    color: ${COLORS.neutral_600};\n    font-style: italic;\n  }\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  ${TooltipTrigger('hover')}\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

@@ -104,7 +104,6 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           variant: "secondary",
           shape: "circular",
           role: "button",
-          tooltip: rest.tooltip,
           id: id,
           "data-testId": dataTestId,
           "aria-controls": "".concat(id, "_dropdowncontent"),

package/dist/Dropdown/DropdownButton.cjs.map

@@ -1 +1 @@
-{"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","id","dataTestId","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useFocusOutsideRef","useClickOutsideRef","useEffect","handleValueSelect","values","renderButton","type","tooltip","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                          id,\n                          dataTestId,\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 [activeDescendant, setActiveDescendant] = React.useState<string>();\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                      role=\"button\"\n                      tooltip={rest.tooltip}\n                      id={id}\n                      data-testId={dataTestId}\n                      aria-controls={`${id}_dropdowncontent`}\n                      aria-activedescendant={activeDescendant}\n                      \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                                          role=\"button\"\n                                          id={id}\n                                          data-testId={dataTestId}\n                                          aria-controls={`${id}_dropdowncontent`}\n                                          aria-activedescendant={activeDescendant}\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        ariaRolesType=\"menu\"\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        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\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={`${id}_dropdowncontent`}\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}
+{"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","id","dataTestId","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","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                          id,\n                          dataTestId,\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 [activeDescendant, setActiveDescendant] = React.useState<string>();\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                      role=\"button\"\n                      id={id}\n                      data-testId={dataTestId}\n                      aria-controls={`${id}_dropdowncontent`}\n                      aria-activedescendant={activeDescendant}\n                      \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                                          role=\"button\"\n                                          id={id}\n                                          data-testId={dataTestId}\n                                          aria-controls={`${id}_dropdowncontent`}\n                                          aria-activedescendant={activeDescendant}\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        ariaRolesType=\"menu\"\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        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\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={`${id}_dropdowncontent`}\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}

package/dist/Dropdown/DropdownButton.js

@@ -107,7 +107,6 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           variant: "secondary",
           shape: "circular",
           role: "button",
-          tooltip: rest.tooltip,
           id: id,
           "data-testId": dataTestId,
           "aria-controls": "".concat(id, "_dropdowncontent"),

package/dist/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"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","id","dataTestId","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownRef","useRef","containerRef","useEffect","handleValueSelect","values","renderButton","type","tooltip","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                          id,\n                          dataTestId,\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 [activeDescendant, setActiveDescendant] = React.useState<string>();\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                      role=\"button\"\n                      tooltip={rest.tooltip}\n                      id={id}\n                      data-testId={dataTestId}\n                      aria-controls={`${id}_dropdowncontent`}\n                      aria-activedescendant={activeDescendant}\n                      \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                                          role=\"button\"\n                                          id={id}\n                                          data-testId={dataTestId}\n                                          aria-controls={`${id}_dropdowncontent`}\n                                          aria-activedescendant={activeDescendant}\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        ariaRolesType=\"menu\"\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        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\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={`${id}_dropdowncontent`}\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"mappings":"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"}
+{"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","id","dataTestId","rest","useState","dropdownOpen","setDropdownOpen","activeDescendant","setActiveDescendant","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                          id,\n                          dataTestId,\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 [activeDescendant, setActiveDescendant] = React.useState<string>();\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                      role=\"button\"\n                      id={id}\n                      data-testId={dataTestId}\n                      aria-controls={`${id}_dropdowncontent`}\n                      aria-activedescendant={activeDescendant}\n                      \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                                          role=\"button\"\n                                          id={id}\n                                          data-testId={dataTestId}\n                                          aria-controls={`${id}_dropdowncontent`}\n                                          aria-activedescendant={activeDescendant}\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        ariaRolesType=\"menu\"\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        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\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={`${id}_dropdowncontent`}\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,"file":"DropdownButtonTypes.cjs","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size, Testable} from '../types';\nimport {DropdownItem} from './DropdownContent'\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\nexport interface DropdownButtonBaseProps extends Testable {\n  id?: string;\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  tooltip?: TooltipProps;\n}\n\nexport type TextDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'text';\n  label?: string;\n  keepLabel?: boolean;\n}\n\nexport  type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;\n"],"mappings":""}
+{"version":3,"file":"DropdownButtonTypes.cjs","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size, Testable} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps extends Testable {\n  id?: string;\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,6 +1,5 @@
 import { Size, Testable } from '../types';
 import { DropdownItem } from './DropdownContent';
-import { TooltipProps } from "../Tooltips/TooltipTypes";
 export interface DropdownButtonBaseProps extends Testable {
     id?: string;
     items: DropdownItem[];
@@ -26,7 +25,6 @@ export interface DropdownButtonBaseProps extends Testable {
 export type IconDropdownButtonProps = DropdownButtonBaseProps & {
     type: 'icon';
     icon: React.ReactNode;
-    tooltip?: TooltipProps;
 };
 export type TextDropdownButtonProps = DropdownButtonBaseProps & {
     type: 'text';

package/dist/Dropdown/DropdownButtonTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButtonTypes.js","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size, Testable} from '../types';\nimport {DropdownItem} from './DropdownContent'\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\nexport interface DropdownButtonBaseProps extends Testable {\n  id?: string;\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  tooltip?: TooltipProps;\n}\n\nexport type TextDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'text';\n  label?: string;\n  keepLabel?: boolean;\n}\n\nexport  type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;\n"],"mappings":""}
+{"version":3,"file":"DropdownButtonTypes.js","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size, Testable} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps extends Testable {\n  id?: string;\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

@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 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; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 var MAX_MENU_HEIGHT = 240;
 var AVG_OPTION_HEIGHT = 48;
 var OFFSET_BEFORE_SHOW = 1000000;

package/dist/Dropdown/DropdownContent.js

@@ -5,7 +5,7 @@ import _pt from "prop-types";
 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; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 import React from 'react';
 import styled from 'styled-components';
 import Button from '../Button/Button';

package/dist/Dropdown/DropdownFilter.cjs

@@ -18,11 +18,12 @@ var _CommonStyling = require("./CommonStyling");
 var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
 var _types = require("../types");
 var _InputFields = require("../InputFields");
+var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverflow"));
 var _common = require("../common");
 var _Button = require("../Button");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "buttonFontSize", "margin", "loading", "onFocus", "onBlur", "dataTestId"];
+var _excluded = ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "buttonFontSize", "overflowTooltipPosition", "margin", "loading", "onFocus", "onBlur", "dataTestId"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -44,7 +45,9 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     disableFiltering = _ref.disableFiltering,
     buttonFontSize = _ref.buttonFontSize,
-    margin = _ref.margin,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
     loading = _ref.loading,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
@@ -180,6 +183,7 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         type: "search",
         placeholder: inputFocused ? '' : placeholder,
         onKeyDown: handleInputKeyDown,
+        ellipsis: true,
         value: input || '',
         onChange: function onChange(e) {
           if (!e.target.value) {
@@ -206,7 +210,15 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         tabIndex: disabled || readOnly ? -1 : 0,
         disabled: disabled || false,
         "data-testid": dataTestId
-      }, rest)), input && !readOnly && !disabled && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+      }, rest)), !isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+        position: overflowTooltipPosition,
+        input: inputRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        children: input
+      }) : null, input && !readOnly && !disabled && !loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
         action: handleInputClear,
         ref: clearButtonRef,
         useTransparentBackground: true,
@@ -310,6 +322,7 @@ DropdownFilter.propTypes = {
   messageOnNoResults: _propTypes.default.string,
   activeValidationMessage: _propTypes.default.string,
   autofilledMessage: _propTypes.default.string,
+  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
   buttonFontSize: _propTypes.default.string,
   margin: _propTypes.default.string,
   scrollable: _propTypes.default.bool

package/dist/Dropdown/DropdownFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFilter.cjs","names":["DropdownFilter","React","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","useFocusVisibleRef","inputRef","clearButtonRef","useRef","useActionWithin","useImperativeHandle","current","containerRef","useClickOutsideRef","useFocusOutsideRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","defaultOnMouseDownHandler","Math","floor","random","target","marginLeft","Size","Small","COLORS","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin,\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen ? true : false}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}
+{"version":3,"file":"DropdownFilter.cjs","names":["DropdownFilter","React","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","overflowTooltipPosition","margin","loading","onFocus","onBlur","dataTestId","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","useFocusVisibleRef","inputRef","clearButtonRef","useRef","useActionWithin","useImperativeHandle","current","containerRef","useClickOutsideRef","useFocusOutsideRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","defaultOnMouseDownHandler","Math","floor","random","target","marginLeft","Size","Small","COLORS","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size, Testable } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n  \n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  overflowTooltipPosition?: 'top' | 'bottom';\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            overflowTooltipPosition,\n                                            margin = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            dataTestId,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          ellipsis\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          data-testid={dataTestId}\n          {...rest}\n        />\n        {!isOpen ? <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\n            {input}\n          </TooltipOverflow> : null}\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen ? true : false}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}

package/dist/Dropdown/DropdownFilter.d.ts

@@ -16,6 +16,7 @@ interface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<H
     activeValidationMessage?: string;
     autofilledMessage?: string;
     size?: Size.Small | Size.Medium;
+    overflowTooltipPosition?: 'top' | 'bottom';
     buttonFontSize?: string;
     margin?: string;
     scrollable?: boolean;

package/dist/Dropdown/DropdownFilter.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-var _excluded = ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "buttonFontSize", "margin", "loading", "onFocus", "onBlur", "dataTestId"];
+var _excluded = ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "buttonFontSize", "overflowTooltipPosition", "margin", "loading", "onFocus", "onBlur", "dataTestId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
@@ -13,6 +13,7 @@ import { StyledField, Dropdown, InputField } from './CommonStyling';
 import DropdownContent from './DropdownContent';
 import { Size } from '../types';
 import { AutofilledMessage, ErrorMessage } from '../InputFields';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
 import { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';
 import { IconButton } from '../Button';
 import { SystemIcons } from '../icons';
@@ -36,7 +37,9 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     disableFiltering = _ref.disableFiltering,
     buttonFontSize = _ref.buttonFontSize,
-    margin = _ref.margin,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
     loading = _ref.loading,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
@@ -172,6 +175,7 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         type: "search",
         placeholder: inputFocused ? '' : placeholder,
         onKeyDown: handleInputKeyDown,
+        ellipsis: true,
         value: input || '',
         onChange: function onChange(e) {
           if (!e.target.value) {
@@ -198,7 +202,15 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         tabIndex: disabled || readOnly ? -1 : 0,
         disabled: disabled || false,
         "data-testid": dataTestId
-      }, rest)), input && !readOnly && !disabled && !loading && /*#__PURE__*/_jsx(IconButton, {
+      }, rest)), !isOpen ? /*#__PURE__*/_jsx(TooltipOverflow, {
+        position: overflowTooltipPosition,
+        input: inputRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        children: input
+      }) : null, input && !readOnly && !disabled && !loading && /*#__PURE__*/_jsx(IconButton, {
         action: handleInputClear,
         ref: clearButtonRef,
         useTransparentBackground: true,
@@ -302,6 +314,7 @@ DropdownFilter.propTypes = {
   messageOnNoResults: _pt.string,
   activeValidationMessage: _pt.string,
   autofilledMessage: _pt.string,
+  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
   buttonFontSize: _pt.string,
   margin: _pt.string,
   scrollable: _pt.bool