@laerdal/life-react-components 2.1.1-dev.3 → 2.1.1-dev.30

package/dist/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","onSelect","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","dropdownRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.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 {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin = '4px 0',\n    minWidth,\n    className,\n    onBlur,\n    onSelect,\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                aria-expanded={isOpen ? true : false}\n                aria-activedescendant={activeDescendant}\n                aria-controls={`${id}_dropdowncontent`}\n                role=\"listbox\"\n                aria-multiselectable={props.multiSelect}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\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          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}\n          {...rest}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!readOnly && !disabled && (\n          <DropdownContent\n            ref={dropdownRef}\n            containerRef={containerRef}\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: props.multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            ariaRolesType=\"input\"\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n            setSelectedValues={handleValueSelect}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":"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"}
+{"version":3,"file":"BasicDropdown.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","dataTestId","onSelect","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","dropdownRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.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 {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size, Testable} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin = '4px 0',\n    minWidth,\n    className,\n    onBlur,\n    dataTestId,\n    onSelect,\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                aria-expanded={isOpen ? true : false}\n                aria-activedescendant={activeDescendant}\n                aria-controls={`${id}_dropdowncontent`}\n                role=\"listbox\"\n                aria-multiselectable={props.multiSelect}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\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          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}\n          {...rest}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            id={id}\n            data-testid={dataTestId}\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!readOnly && !disabled && (\n          <DropdownContent\n            ref={dropdownRef}\n            containerRef={containerRef}\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: props.multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            ariaRolesType=\"input\"\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n            setSelectedValues={handleValueSelect}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,MAAM,QAAO,WAAW;AAChC,SAAQC,aAAa,EAAEC,WAAW,EAAEC,WAAW,EAAEC,gBAAgB,QAAO,kCAAkC;AAC1G,SAAQC,gBAAgB,QAAO,qBAAqB;AACpD,SAAQC,QAAQ,EAAEC,WAAW,EAAEC,UAAU,QAAO,iBAAiB;AACjE,OAAOC,eAAe,MAAsB,mBAAmB;AAC/D,SAAQC,iBAAiB,EAAEC,YAAY,QAAO,wBAAwB;AACtE,SAAQC,IAAI,QAAiB,UAAU;AACvC,SAAQC,yBAAyB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAO,WAAW;AAC3F,SAAQC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAAA;AAyC7C,IAAMC,aAAa,gBAAGlB,KAAK,CAACmB,UAAU,CAAC,UAACC,KAA0B,EAAEC,GAAG,EAAK;EAC1E,IACEC,EAAE,GA2BAF,KAAK,CA3BPE,EAAE;IACFC,IAAI,GA0BFH,KAAK,CA1BPG,IAAI;IACJC,WAAW,GAyBTJ,KAAK,CAzBPI,WAAW;IACXC,kBAAkB,GAwBhBL,KAAK,CAxBPK,kBAAkB;IAAA,mBAwBhBL,KAAK,CAvBPM,SAAS;IAATA,SAAS,iCAAG,QAAQ;IACpBC,MAAM,GAsBJP,KAAK,CAtBPO,MAAM;IACNC,WAAW,GAqBTR,KAAK,CArBPQ,WAAW;IACXC,aAAa,GAoBXT,KAAK,CApBPS,aAAa;IACbC,UAAU,GAmBRV,KAAK,CAnBPU,UAAU;IACVC,aAAa,GAkBXX,KAAK,CAlBPW,aAAa;IACbC,cAAc,GAiBZZ,KAAK,CAjBPY,cAAc;IACdC,UAAU,GAgBRb,KAAK,CAhBPa,UAAU;IAAA,oBAgBRb,KAAK,CAfPc,UAAU;IAAVA,UAAU,kCAAG,IAAI;IACjBC,SAAS,GAcPf,KAAK,CAdPe,SAAS;IACTC,QAAQ,GAaNhB,KAAK,CAbPgB,QAAQ;IACRC,QAAQ,GAYNjB,KAAK,CAZPiB,QAAQ;IACRC,QAAQ,GAWNlB,KAAK,CAXPkB,QAAQ;IACRC,uBAAuB,GAUrBnB,KAAK,CAVPmB,uBAAuB;IACvBC,iBAAiB,GASfpB,KAAK,CATPoB,iBAAiB;IACjBC,IAAI,GAQFrB,KAAK,CARPqB,IAAI;IAAA,gBAQFrB,KAAK,CAPPsB,MAAM;IAANA,MAAM,8BAAG,OAAO;IAChBC,QAAQ,GAMNvB,KAAK,CANPuB,QAAQ;IACRC,SAAS,GAKPxB,KAAK,CALPwB,SAAS;IACTC,MAAM,GAIJzB,KAAK,CAJPyB,MAAM;IACNC,UAAU,GAGR1B,KAAK,CAHP0B,UAAU;IACVC,QAAQ,GAEN3B,KAAK,CAFP2B,QAAQ;IACLC,IAAI,4BACL5B,KAAK;EAET,sBAA4BpB,KAAK,CAACiD,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnDC,MAAM;IAAEC,SAAS;EACxB,uBAAgDnD,KAAK,CAACiD,QAAQ,EAAU;IAAA;IAAjEG,gBAAgB;IAAEC,mBAAmB;EAC5C,uBAAkCrD,KAAK,CAACiD,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAzDK,SAAS;IAAEC,YAAY;EAC9B,uBAA0BvD,KAAK,CAACiD,QAAQ,CAAS,EAAE,CAAC;IAAA;IAA7CO,KAAK;IAAEC,QAAQ;EACtB,uBAA8BzD,KAAK,CAACiD,QAAQ,CAAgB,IAAI,CAAC;IAAA;IAA1DS,OAAO;IAAEC,UAAU;EAC1B,wBAAkD3D,KAAK,CAACiD,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAzEW,iBAAiB;IAAEC,oBAAoB;EAE9C,IAAMC,QAAQ,GAAG9D,KAAK,CAAC+D,MAAM,CAAmB,IAAI,CAAC;EACrD,IAAMC,cAAc,GAAGhD,kBAAkB,CAAC,CAAC8C,QAAQ,CAAC,CAAC;EACrD,IAAMG,WAAW,GAAGjE,KAAK,CAAC+D,MAAM,CAAiB,IAAI,CAAC;EAEtD,IAAMG,aAAa,GAAG,SAAhBA,aAAa,GAAS;IAC1Bf,SAAS,CAAC,KAAK,CAAC;IAChBQ,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED,IAAMQ,YAAY,GAAGlD,kBAAkB,CAACiD,aAAa,EAAE,CAACD,WAAW,CAAC,CAAC;EAErElD,kBAAkB,CAACmD,aAAa,EAAE,EAAE,EAAEC,YAAY,CAAC;EAEnD,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAsC,EAAK;IAChE,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;MACtCnB,SAAS,CAAC,CAACD,MAAM,CAAC;MAClBW,oBAAoB,CAAC,IAAI,CAAC;IAC5B;EACF,CAAC;EAED,IAAMU,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,MAAgB,EAAK;IAC9Cf,QAAQ,CAACe,MAAM,CAACC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3B,IAAIrD,KAAK,CAACsD,WAAW,KAAK,IAAI,EAAE;MAC9BtD,KAAK,CAAC2B,QAAQ,CAACyB,MAAM,CAAC;IACxB,CAAC,MAAM,IAAIpD,KAAK,CAACsD,WAAW,KAAK,KAAK,IAAItD,KAAK,CAACsD,WAAW,KAAKC,SAAS,EAAE;MACzEvD,KAAK,CAAC2B,QAAQ,CAACyB,MAAM,CAAC,CAAC,CAAC,CAAC;IAC3B;;IAEA;IACA,IAAI5C,WAAW,IAAIR,KAAK,CAACsD,WAAW,EAAE;IAEtC,IAAId,iBAAiB,EAAE;MAAA;MACrB,yBAAAI,cAAc,CAACY,OAAO,0DAAtB,sBAAwBC,KAAK,CAAC;QAACC,YAAY,EAAE;MAAI,CAAC,CAAQ;IAC5D;IACA3B,SAAS,CAAC,KAAK,CAAC;IAChBQ,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED3D,KAAK,CAAC+E,SAAS,CAAC,YAAM;IACpB,IAAI3D,KAAK,CAAC4D,KAAK,EAAE;MACf,IAAI5D,KAAK,CAACsD,WAAW,EAAE;QACrBjB,QAAQ,CAACrC,KAAK,CAAC4D,KAAK,CAACP,IAAI,CAAC,IAAI,CAAC,CAAC;MAClC,CAAC,MAAM,IAAIrD,KAAK,CAACsD,WAAW,KAAK,KAAK,IAAItD,KAAK,CAACsD,WAAW,KAAKC,SAAS,EAAE;QACzElB,QAAQ,CAACrC,KAAK,CAAC4D,KAAK,CAAC;MACvB;IACF,CAAC,MAAM;MACLvB,QAAQ,CAAC,EAAE,CAAC;IACd;EACF,CAAC,EAAE,CAACrC,KAAK,CAAC4D,KAAK,EAAE5D,KAAK,CAACsD,WAAW,CAAC,CAAC;EAEpC1E,KAAK,CAAC+E,SAAS,CAAC,YAAM;IACpBxB,YAAY,CAAC,KAAK,CAAC;EACrB,CAAC,EAAE,CAACC,KAAK,CAAC,CAAC;EAEXxD,KAAK,CAAC+E,SAAS,CAAC,YAAM;IACpB,CAAC7B,MAAM,IAAIW,oBAAoB,CAAC,KAAK,CAAC;EACxC,CAAC,EAAE,CAACX,MAAM,CAAC,CAAC;EAEZlD,KAAK,CAACiF,mBAAmB,CAAC5D,GAAG,EAAE;IAAA,OAAMyC,QAAQ,CAACc,OAAO;EAAA,GAAE,CAACd,QAAQ,CAAC,CAAC;EAElE,IAAMoB,eAAe,GAAG,SAAlBA,eAAe,CAAIhC,MAAe,EAAK;IAC3CC,SAAS,CAACD,MAAM,CAAC;EACnB,CAAC;EAED,IAAMiC,eAAe,GAAG,SAAlBA,eAAe,GAAS;IAC5B,IAAMX,MAAM,GAAGhB,KAAK,CAAC4B,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAC,UAACC,GAAG;MAAA,OAAKA,GAAG,CAACC,IAAI,EAAE;IAAA,EAAC;IACxD,IAAMC,iBAAiB,GAAGjE,IAAI,CAACkE,MAAM,CAAC,UAACC,IAAI;MAAA,OAAKlB,MAAM,CAACmB,QAAQ,CAACD,IAAI,CAACV,KAAK,CAAC;IAAA,EAAC,CAACK,GAAG,CAAC,UAACO,CAAC;MAAA,OAAKA,CAAC,CAACC,YAAY;IAAA,EAAC;IACvG,OAAOL,iBAAiB,CAACf,IAAI,CAAC,IAAI,CAAC;EACrC,CAAC;EAED,IAAMqB,UAAU,GAAG,SAAbA,UAAU,CAAIzB,CAAmC,EAAK;IAC1D;IACA,IAAI,CAACA,CAAC,CAAC0B,aAAa,CAACC,QAAQ,CAAC3B,CAAC,CAAC4B,aAAa,CAAC,EAAE;MAC9CpD,MAAM,IAAIA,MAAM,CAACwB,CAAC,CAAC;IACrB;EACF,CAAC;EAED,IAAM6B,GAAG,GAAG,CAAChD,MAAM,GAAG,WAAW,GAAG,EAAE,EAAEiD,MAAM,CAAC1D,IAAI,GAAGA,IAAI,GAAG,EAAE,CAAC,CAAC0D,MAAM,CAAC7D,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,CAAC6D,MAAM,CAACvD,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAC;EAE5I,oBACE;IAAA,wBACE,MAAC,QAAQ;MAAC,GAAG,EAAEuB,YAAa;MAClB,iBAAejB,MAAM,GAAG,IAAI,GAAG,KAAM;MACrC,yBAAuBE,gBAAiB;MACxC,2BAAkB9B,EAAE,qBAAmB;MACvC,IAAI,EAAC,SAAS;MACd,wBAAsBF,KAAK,CAACsD,WAAY;MACxC,QAAQ,EAAEpC,QAAQ,IAAI,KAAM;MAC5B,SAAS,EAAEG,IAAI,GAAGA,IAAI,GAAG,EAAG;MAC5B,QAAQ,EAAEJ,QAAS;MACnB,QAAQ,EAAED,QAAS;MACnB,MAAM,EAAEM,MAAO;MACf,MAAM,EAAEoD,UAAW;MACnB,QAAQ,EAAEnD,QAAS;MAAA,wBAC3B,MAAC,WAAW;QACV,GAAG,EAAEqB,cAAe;QACpB,SAAS,EAAEkC,GAAI;QACf,WAAW,EAAEpF,yBAA0B;QACvC,OAAO,EAAE,iBAACuD,CAAC,EAAK;UACd,IAAI,CAAChC,QAAQ,IAAI,CAACD,QAAQ,EAAE;YAC1BiC,CAAC,CAAC+B,eAAe,EAAE;YACnBjD,SAAS,CAAC,CAACD,MAAM,CAAC;YAClB,IAAIA,MAAM,EAAE;cAAA;cACV,qBAAAY,QAAQ,CAACc,OAAO,sDAAhB,kBAAkByB,IAAI,EAAE;YAC1B,CAAC,MAAM;cAAA;cACL,sBAAAvC,QAAQ,CAACc,OAAO,uDAAhB,mBAAkBC,KAAK,EAAE;YAC3B;UACF;QACF,CAAE;QACF,QAAQ,EAAEzC,QAAQ,IAAIC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACxC,QAAQ,EAAED,QAAQ,IAAI,KAAM;QAC5B,QAAQ,EAAEC,QAAQ,IAAI,KAAM;QAC5B,aAAa,EAAE,CAACmB,KAAM;QACtB,WAAW,EAAEhC,WAAY;QACzB,qBAAqB,EAAE,CAAC,CAACe,uBAAwB;QACjD,SAAS,EAAE6B,aAAc;QACzB,QAAQ,EAAEzB;MAAS,GACfK,IAAI;QAAA,wBACR,KAAC,UAAU;UACT,GAAG,EAAEc,QAAS;UACd,IAAI,EAAC,QAAQ;UACb,EAAE,EAAExC,EAAG;UACP,eAAawB,UAAW;UACxB,QAAQ;UACR,WAAW,EAAEtB,WAAY;UACzB,KAAK,EAAE2D,eAAe,EAAG;UACzB,SAAS,EAAE1C,IAAI,aAAMA,IAAI,cAAW,OAAQ;UAC5C,QAAQ,EAAE,CAAC,CAAE;UACb,QAAQ,EAAEL,QAAQ,IAAI;QAAM,EAC5B,EACDkB,SAAS,gBAAG,KAAC,gBAAgB;UAAC,IAAI,EAAEzC,IAAI,CAACyF,KAAM;UAAC,KAAK,EAAErG,MAAM,CAACsG;QAAY,EAAE,GAAG,IAAI,eACpF;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCrD,MAAM,gBAAG,KAAC,WAAW;YAAC,IAAI,EAAC,MAAM;YAAC,SAAS,EAAET,IAAI,GAAGA,IAAI,GAAG;UAAG,EAAE,gBAC/D,KAAC,aAAa;YAAC,IAAI,EAAC,MAAM;YAAC,SAAS,EAAEA,IAAI,GAAGA,IAAI,GAAG;UAAG;QAAE,EACvD;MAAA,GACM,EACb,CAACJ,QAAQ,IAAI,CAACD,QAAQ,iBACrB,KAAC,eAAe;QACd,GAAG,EAAE6B,WAAY;QACjB,YAAY,EAAEE,YAAa;QAC3B,yBAAyB,EAAE,mCAAC7C,EAAE;UAAA,OAAK+B,mBAAmB,CAAC/B,EAAE,CAAC;QAAA,CAAC;QAC3D,kBAAkB,EAAE;UAClBI,SAAS,EAAEA,SAAS;UACpBC,MAAM,EAAEA,MAAM,aAANA,MAAM,cAANA,MAAM,GAAK,YAAM,CACzB,CAAE;UACFC,WAAW,EAAEA,WAAW;UACxBC,aAAa,EAAEA,aAAa;UAC5BG,cAAc,EAAEA,cAAc;UAC9BE,UAAU,EAAEA,UAAU;UACtBsE,aAAa,EAAEjC,iBAAiB;UAChCkC,KAAK,EAAElF,IAAI;UACXmD,WAAW,EAAEtD,KAAK,CAACsD,WAAW;UAC9BzC,UAAU,EAAEA,UAAU;UACtBE,SAAS,EAAEA,SAAS;UACpBL,UAAU,EAAEA,UAAU;UACtBC,aAAa,EAAEA;QACjB,CAAE;QACF,aAAa,EAAC,OAAO;QACrB,OAAO,EAAE2B,OAAQ;QACjB,UAAU,EAAEC,UAAW;QACvB,IAAI,EAAElB,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI5B,IAAI,CAACyF,KAAM;QACzB,MAAM,EAAE,EAAG;QACX,MAAM,EAAEpD,MAAO;QACf,SAAS,EAAEgC,eAAgB;QAC3B,kBAAkB,EAAEzD,kBAAkB,aAAlBA,kBAAkB,cAAlBA,kBAAkB,GAAI,EAAG;QAC7C,OAAO,EAAEmC,iBAAkB;QAC3B,QAAQ,EAAEtB,QAAQ,IAAI,KAAM;QAC5B,cAAc,EAAElB,KAAK,CAACsD,WAAW,GAAGtD,KAAK,CAAC4D,KAAK,IAAI,EAAE,GAAG,CAAC5D,KAAK,CAAC4D,KAAK,IAAI,EAAE,CAAE;QAC5E,iBAAiB,EAAET,iBAAkB;QACrC,EAAE,YAAKjD,EAAE;MAAmB,EAE/B;IAAA,EACQ,EACViB,uBAAuB,iBACtB,MAAC,YAAY;MAAA,wBACX,KAAC,gBAAgB;QAAC,KAAK,EAAEtC,MAAM,CAACyG;MAAa,EAAE,eAC/C;QAAA,UAAOnE;MAAuB,EAAQ;IAAA,EAEzC,EACAC,iBAAiB,iBAChB,MAAC,iBAAiB;MAAA,wBAChB,KAAC,WAAW;QAAC,KAAK,EAAEvC,MAAM,CAACsG;MAAY,EAAE,eACzC;QAAA,UAAO/D;MAAiB,EAAQ;IAAA,EAEnC;EAAA,EACA;AAEP,CAAC,CAAC;AAAC;EAxQDjB,IAAI;EACJG,SAAS,aAAG,QAAQ,EAAG,UAAU,EAAG,OAAO;EAC3CC,MAAM;EACNC,WAAW;EAEXE,UAAU;EACVC,aAAa;EACbC,cAAc;EACdC,UAAU;EACVC,UAAU;EACVC,SAAS;EACTX,WAAW;EACXmF,cAAc;EACdlF,kBAAkB;EAClBW,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,uBAAuB;EACvBC,iBAAiB;EAEjBE,MAAM;EACNC,QAAQ;EAUR+B,WAAW,aAAG,KAAK;EACnBM,KAAK;EACLjC,QAAQ;AAAA,wIAhCI,QAAQ,EAAG,UAAU,EAAG,OAAO;AAyQ7C,eAAe7B,aAAa"}

package/dist/Dropdown/DropdownButton.cjs

@@ -17,7 +17,7 @@ var _common = require("../common");
 var _CommonStyling = require("./CommonStyling");
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id"];
+var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id", "dataTestId"];
 var _templateObject;
 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; }
@@ -48,6 +48,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     value = _ref.value,
     id = _ref.id,
+    dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Globally used variables within the view.
   var _React$useState = React.useState(false),
@@ -103,6 +104,8 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           variant: "secondary",
           shape: "circular",
           role: "button",
+          id: id,
+          "data-testId": dataTestId,
           "aria-controls": "".concat(id, "_dropdowncontent"),
           "aria-activedescendant": activeDescendant,
           action: function action(event) {
@@ -126,6 +129,8 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           tabIndex: !disabled ? 0 : -1,
           className: cls,
           role: "button",
+          id: id,
+          "data-testId": dataTestId,
           "aria-controls": "".concat(id, "_dropdowncontent"),
           "aria-activedescendant": activeDescendant,
           onMouseDown: _common.defaultOnMouseDownHandler,

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","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                          ...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                      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                                          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":";;;;;;;;;;;AAGA;AAKA;AACA;AACA;AAMA;AACA;AAOA;AAA4E;AAAA;AAAA;AAAA;AAAA;AAE5E,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,+GAEzB;AAED,IAAMC,cAAc,gBAAGC,KAAK,CAACC,UAAU,CAAE,gBAuBOC,GAAiC,EAAK;EAAA,IAtB5DC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,sBACPC,SAAS;IAATA,SAAS,+BAAG,QAAQ;IACpBC,MAAM,QAANA,MAAM;IAAA,wBACNC,WAAW;IAAXA,WAAW,iCAAG,EAAE;IAChBC,aAAa,QAAbA,aAAa;IACbC,UAAU,QAAVA,UAAU;IACVC,aAAa,QAAbA,aAAa;IACbC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IAAA,wBACTC,WAAW;IAAXA,WAAW,iCAAG,KAAK;IAAA,uBACnBC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAAA,uBAClBC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAClBC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,EAAE,QAAFA,EAAE;IACFC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAE/B;EACA,sBAAwCxB,KAAK,CAACyB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EACpC,uBAAgD3B,KAAK,CAACyB,QAAQ,EAAU;IAAA;IAAjEG,gBAAgB;IAAEC,mBAAmB;EAC5C,uBAA4C7B,KAAK,CAACyB,QAAQ,CAAW,EAAE,CAAC;IAAA;IAAjEK,cAAc;IAAEC,iBAAiB;EACxC,uBAA8B/B,KAAK,CAACyB,QAAQ,CAAgB,IAAI,CAAC;IAAA;IAA1DO,OAAO;IAAEC,UAAU;EAC1B,uBAAkDjC,KAAK,CAACyB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAzES,iBAAiB;IAAEC,oBAAoB;EAC9C,IAAMC,WAAW,GAAGpC,KAAK,CAACqC,MAAM,CAAiB,IAAI,CAAC;EAEtD,IAAMC,YAAY,GAAG,IAAAC,0BAAkB,EAAC;IAAA,OAAMZ,eAAe,CAAC,KAAK,CAAC;EAAA,GAAE,CAACS,WAAW,CAAC,CAAC;EACpF,IAAAI,0BAAkB,EAAC;IAAA,OAAMb,eAAe,CAAC,KAAK,CAAC;EAAA,GAAE,EAAE,EAAEW,YAAY,CAAC;EAElEtC,KAAK,CAACyC,SAAS,CAAC,YAAM;IACpB,CAACf,YAAY,IAAIS,oBAAoB,CAAC,KAAK,CAAC;EAC9C,CAAC,EAAE,CAACT,YAAY,CAAC,CAAC;EAElB1B,KAAK,CAACyC,SAAS,CAAC,YAAM;IACpBpC,QAAQ,IAAIsB,eAAe,CAAC,KAAK,CAAC;EACpC,CAAC,EAAE,CAACtB,QAAQ,CAAC,CAAC;EAEdL,KAAK,CAACyC,SAAS,CAAC,YAAM;IACpBV,iBAAiB,CAACV,KAAK,IAAI,EAAE,CAAC;EAChC,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAMqB,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,MAAgB,EAAK;IAC9C;IACArC,OAAO,CAACqC,MAAM,CAAC;EACjB,CAAC;;EAED;AACF;AACA;AACA;EACE,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzB,QAAQpB,IAAI,CAACqB,IAAI;MACf,KAAK,MAAM;QACT,oBACE,qBAAC,kBAAU;UAAC,GAAG,EAAE3C,GAAI;UACT,OAAO,EAAC,WAAW;UACnB,KAAK,EAAC,UAAU;UAChB,IAAI,EAAC,QAAQ;UACb,EAAE,EAAEoB,EAAG;UACP,eAAaC,UAAW;UACxB,2BAAkBD,EAAE,qBAAmB;UACvC,yBAAuBM,gBAAiB;UAExC,MAAM,EAAE,gBAACkB,KAAU,EAAK;YACtBnB,eAAe,CAAC,CAACD,YAAY,CAAC;YAC9B,IAAI,CAAAoB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,MAAM,MAAK,CAAC,EAAE;cACvBZ,oBAAoB,CAAC,IAAI,CAAC;YAC5B;UACF,CAAE;UACF,QAAQ,EAAE9B,QAAS;UAAA,UAC5BD;QAAI,EACM;MAEjB,KAAK,MAAM;QACT,IAAM4C,KAAK,GAAGxB,IAAI,CAACyB,SAAS,IAAI,EAACnB,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEoB,MAAM,IACnD1B,IAAI,CAACwB,KAAK,GACV7C,KAAK,CAACgD,MAAM,CAAC,UAAAC,CAAC;UAAA,OAAItB,cAAc,CAACuB,QAAQ,CAACD,CAAC,CAAC/B,KAAK,CAAC;QAAA,EAAC,CAACiC,GAAG,CAAC,UAAAF,CAAC;UAAA;UAAA,0BAAIA,CAAC,CAACG,YAAY,6DAAIH,CAAC,CAAC/B,KAAK;QAAA,EAAC,CAACmC,IAAI,CAAC,IAAI,CAAC;QACtG,IAAMC,GAAG,aAAMpD,QAAQ,IAAI,UAAU,cAAIqB,YAAY,IAAI,UAAU,cAAIN,SAAS,CAAE;QAClF,oBAAO,qBAAC,wCAAyB;UAAC,QAAQ,EAAE,CAACf,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;UAC7B,SAAS,EAAEoD,GAAI;UACf,IAAI,EAAC,QAAQ;UACb,EAAE,EAAEnC,EAAG;UACP,eAAaC,UAAW;UACxB,2BAAkBD,EAAE,qBAAmB;UACvC,yBAAuBM,gBAAiB;UACxC,WAAW,EAAE8B,iCAA0B;UACvC,SAAS,EAAE,mBAAAC,CAAC,EAAI;YACd,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,EAAE;cACtCD,CAAC,CAACE,cAAc,EAAE;cAClBF,CAAC,CAACG,eAAe,EAAE;cACnBnC,eAAe,CAAC,CAACD,YAAY,CAAC;cAC9BS,oBAAoB,CAAC,IAAI,CAAC;YAC5B;UACF,CAAE;UACF,OAAO,EAAE;YAAA,OAAM,CAAC9B,QAAQ,IAAIsB,eAAe,CAAC,CAACD,YAAY,CAAC;UAAA,CAAC;UAAA,uBAC3F,sBAAC,wCAAyB;YAAA,WACvBtB,IAAI,iBAAI,qBAAC,qCAAsB;cAAA,UAAEA;YAAI,EAA0B,eAChE,qBAAC,qCAAsB;cAAA,UAAE4C;YAAK,EAA0B,eACxD,qBAAC,sCAAuB;cAAA,UAEpBtB,YAAY,gBACR,qBAAC,wBAAW;gBAAC,IAAI,EAAC;cAAM,EAAE,gBAC1B,qBAAC,0BAAa;gBAAC,IAAI,EAAC;cAAM;YAAE,EAEV;UAAA;QACA,EACF;IAAA;EAElC,CAAC;EAED,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEN,SAAU;IAAC,GAAG,EAAEkB,YAAa;IAAA,WAC9CM,YAAY,EAAE,eACf,qBAAC,wBAAe;MACd,GAAG,EAAER,WAAY;MACjB,aAAa,EAAC,MAAM;MACpB,YAAY,EAAEE,YAAa;MAC3B,kBAAkB,EAAE;QAClB/B,SAAS,EAAEA,SAAS;QACpBC,MAAM,EAAEA,MAAM,aAANA,MAAM,cAANA,MAAM,GAAK,YAAM,CACzB,CAAE;QACFC,WAAW,EAAEA,WAAW;QACxBC,aAAa,EAAEA,aAAa;QAC5BqD,aAAa,EAAErB,iBAAiB;QAChC1B,WAAW,EAAEA,WAAW;QACxBL,UAAU,EAAEA,UAAU;QACtBC,aAAa,EAAEA,aAAa;QAC5BK,UAAU,EAAEA,UAAU;QACtBC,UAAU,EAAEA,UAAU;QACtBC,SAAS,EAAEA,SAAS;QACpBhB,KAAK,EAAEA;MACT,CAAE;MACF,yBAAyB,EAAE,mCAACwD,CAAC;QAAA,OAAK9B,mBAAmB,CAAC8B,CAAC,CAAC;MAAA,CAAC;MACzD,OAAO,EAAE3B,OAAQ;MACjB,UAAU,EAAEC,UAAW;MACvB,IAAI,EAAEpB,IAAK;MACX,KAAK,EAAEC,KAAM;MACb,SAAS,EAAEC,SAAU;MACrB,MAAM,EAAEW,YAAa;MACrB,SAAS,EAAEC,eAAgB;MAC3B,OAAO,EAAEO,iBAAkB;MAC3B,MAAM,EAAC,EAAE;MACT,cAAc,EAAEV,IAAI,CAACqB,IAAI,KAAK,MAAM,IAAItC,SAAS,KAAK,QAAQ,GAAG,EAAE,GAAGuB,cAAe;MACrF,iBAAiB,EAAEC,iBAAkB;MACrC,kBAAkB,EAAC,YAAY;MAC/B,QAAQ,EAAE,IAAK;MACf,EAAE,YAAKT,EAAE;IAAmB,EAC5B;EAAA,EACM;AAEd,CAAC,CAAC;AAAC,eAEYvB,cAAc;AAAA"}

package/dist/Dropdown/DropdownButton.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id"];
+var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id", "dataTestId"];
 var _templateObject;
 /**
  * Import React libraries.
@@ -51,6 +51,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     value = _ref.value,
     id = _ref.id,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Globally used variables within the view.
   var _React$useState = React.useState(false),
@@ -106,6 +107,8 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           variant: "secondary",
           shape: "circular",
           role: "button",
+          id: id,
+          "data-testId": dataTestId,
           "aria-controls": "".concat(id, "_dropdowncontent"),
           "aria-activedescendant": activeDescendant,
           action: function action(event) {
@@ -129,6 +132,8 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           tabIndex: !disabled ? 0 : -1,
           className: cls,
           role: "button",
+          id: id,
+          "data-testId": dataTestId,
           "aria-controls": "".concat(id, "_dropdowncontent"),
           "aria-activedescendant": activeDescendant,
           onMouseDown: defaultOnMouseDownHandler,

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","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                          ...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                      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                                          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} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps {\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":""}
+{"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,6 @@
-import { Size } from '../types';
+import { Size, Testable } from '../types';
 import { DropdownItem } from './DropdownContent';
-export interface DropdownButtonBaseProps {
+export interface DropdownButtonBaseProps extends Testable {
     id?: string;
     items: DropdownItem[];
     value?: string[];

package/dist/Dropdown/DropdownButtonTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButtonTypes.js","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps {\n  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":""}
+{"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;
@@ -306,14 +306,28 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   }, [isOpen]);
   _react.default.useEffect(function () {
     if (isOpen) {
+      var observer = new IntersectionObserver(function (entries) {
+        if (!entries[0].isIntersecting) {
+          var _document, _document$activeEleme;
+          setIsOpen(false);
+          //@ts-ignore
+          (_document = document) === null || _document === void 0 ? void 0 : (_document$activeEleme = _document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.blur();
+        }
+      }, {
+        threshold: [0],
+        rootMargin: '8px'
+      });
+      observer.observe(containerRef.current);
       calculateOffset();
-      window.addEventListener('scroll', calculateOffset);
+      window.addEventListener('scroll', calculateOffset, true);
       window.addEventListener('resize', calculateOffset);
+      return function () {
+        observer.disconnect();
+        window.removeEventListener('scroll', calculateOffset, true);
+        window.removeEventListener('resize', calculateOffset);
+      };
     }
-    return function () {
-      window.removeEventListener('scroll', calculateOffset);
-      window.removeEventListener('resize', calculateOffset);
-    };
+    return function () {};
   }, [isOpen]);
   var handleItemClick = function handleItemClick(selected, item) {
     var newValue = [];
@@ -496,6 +510,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       dropdownContentRef.current.style.top = "".concat(rect.y + rect.height, "px");
       dropdownContentRef.current.style.width = width !== null && width !== void 0 ? width : "".concat(rect.width, "px");
     }
+    determineDropUp();
   };
   var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? isUp ? 'up' : 'down' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {