@laerdal/life-react-components 2.1.0 → 2.1.1-dev.15.full

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","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 } 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 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 = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\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          {...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","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 = '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          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":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BvC,IAAMA,cAAc,gBAAGC,KAAK,CAACC,UAAU,CAAE,gBAuByBC,GAAG,EAAK;EAAA,IAtB9BC,EAAE,QAAFA,EAAE;IACFC,IAAI,QAAJA,IAAI;IACJC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,kBAAkB,QAAlBA,kBAAkB;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,uBAAuB,QAAvBA,uBAAuB;IACvBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,IAAI,QAAJA,IAAI;IACJC,gBAAgB,QAAhBA,gBAAgB;IAChBC,cAAc,QAAdA,cAAc;IAAA,mBACdC,MAAM;IAANA,MAAM,4BAAG,OAAO;IAChBC,OAAO,QAAPA,OAAO;IACPC,QAAO,QAAPA,OAAO;IACPC,OAAM,QAANA,MAAM;IACNC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAEjD,sBAA4BxB,KAAK,CAACyB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnDC,MAAM;IAAEC,SAAS;EACxB,uBAA0B3B,KAAK,CAACyB,QAAQ,EAAU;IAAA;IAA3CG,KAAK;IAAEC,QAAQ;EACtB,uBAAgD7B,KAAK,CAACyB,QAAQ,EAAU;IAAA;IAAjEK,gBAAgB;IAAEC,mBAAmB;EAC5C,uBAA0C/B,KAAK,CAACyB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAjEO,aAAa;IAAEC,gBAAgB;EACtC,uBAAwCjC,KAAK,CAACyB,QAAQ,EAAgB;IAAA;IAA/DS,YAAY;IAAEC,eAAe;EACpC,wBAA4CnC,KAAK,CAACyB,QAAQ,CAAW,EAAE,CAAC;IAAA;IAAjEW,cAAc;IAAEC,iBAAiB;EACxC,wBAA8BrC,KAAK,CAACyB,QAAQ,CAAgB,IAAI,CAAC;IAAA;IAA1Da,OAAO;IAAEC,UAAU;EAC1B,wBAAwCvC,KAAK,CAACyB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/De,YAAY;IAAEC,eAAe;EACpC,wBAAwBzC,KAAK,CAACyB,QAAQ,CAAU,IAAI,CAAC;IAAA;IAA9CiB,IAAI;IAAEC,OAAO;EAEpB,IAAMC,cAAc,GAAG,IAAAC,0BAAkB,GAAE;EAC3C,IAAMC,QAAQ,GAAG,IAAAD,0BAAkB,EAAC,CAACD,cAAc,CAAC,CAAC;EACrD,IAAMG,cAAc,GAAG/C,KAAK,CAACgD,MAAM,CAAoB,IAAI,CAAC;EAE5D,IAAAC,uBAAe,EAACL,cAAc,EAAEhB,KAAK,IAAI,CAAChB,QAAQ,IAAI,CAACD,QAAQ,GAAG,CAACoC,cAAc,CAAC,GAAG,EAAE,CAAC;EAExF/C,KAAK,CAACkD,mBAAmB,CAAChD,GAAG,EAAE;IAAA,OAAM4C,QAAQ,CAACK,OAAO;EAAA,GAAE,CAACL,QAAQ,CAAC,CAAC;EAElE,IAAMM,YAAY,GAAG,IAAAC,0BAAkB,EACrC;IAAA,OAAM1B,SAAS,CAAC,KAAK,CAAC;EAAA,GACtB,EAAE,EACF,IAAA2B,0BAAkB,EAAC;IAAA,OAAM3B,SAAS,CAAC,KAAK,CAAC;EAAA,EAAC,CAC3C;EAED,IAAM4B,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,CAAwC,EAAK;IACvE,IAAIA,CAAC,CAACC,GAAG,KAAK,KAAK,IAAID,CAAC,CAACC,GAAG,KAAK,QAAQ,EAAE;MACzCD,CAAC,CAACE,cAAc,EAAE;IACpB;IACA,IAAIF,CAAC,CAACC,GAAG,KAAK,WAAW,IAAID,CAAC,CAACC,GAAG,KAAK,MAAM,IAAID,CAAC,CAACC,GAAG,KAAK,SAAS,IAAID,CAAC,CAACC,GAAG,KAAK,IAAI,EAAE;MACtFD,CAAC,CAACE,cAAc,EAAE;MAClB,IAAI,CAAChC,MAAM,EAAE;QACXC,SAAS,CAAC,IAAI,CAAC;MACjB;IACF;EACF,CAAC;EAED3B,KAAK,CAAC2D,SAAS,CAAC,YAAM;IACpBhB,OAAO,CAAC,IAAI,CAAC;IACbN,iBAAiB,CAAC,CAAC,CAAC7B,KAAK,GAAG,CAACA,KAAK,CAAC,GAAG,EAAE,CAAC;EAC3C,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEXR,KAAK,CAAC2D,SAAS,CAAC,YAAM;IACpB,IAAIvB,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEwB,MAAM,EAAE;MAAA;MAC1B,IAAMC,GAAG,GAAGzB,cAAc,CAAC,CAAC,CAAC;MAC7B,IAAM0B,IAAI,GAAG1D,IAAI,CAAC2D,IAAI,CAAC,UAACC,CAAC;QAAA,OAAKA,CAAC,CAACxD,KAAK,KAAKqD,GAAG;MAAA,EAAC;MAC9C1B,eAAe,CAAC2B,IAAI,CAAC;MACrBjC,QAAQ,gCAACiC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,YAAY,mEAAIH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEtD,KAAK,yCAAI,EAAE,CAAC;MACjDF,QAAQ,IAAI,CAACoC,IAAI,IAAIpC,QAAQ,CAACuD,GAAG,CAAC;IACpC,CAAC,MAAM;MACL1B,eAAe,CAAC+B,SAAS,CAAC;MAC1B5D,QAAQ,IAAI,CAACoC,IAAI,IAAIpC,QAAQ,CAAC,EAAE,CAAC;MACjCuB,QAAQ,CAAC,EAAE,CAAC;IACd;EACF,CAAC,EAAE,CAACO,cAAc,CAAC,CAAC;EAEpBpC,KAAK,CAAC2D,SAAS,CAAC,YAAM;IACpB,IAAI,CAACjC,MAAM,EAAE;MACX,IAAI,CAAC,CAACQ,YAAY,EAAE;QAAA;QAClBL,QAAQ,mCAACK,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAE+B,YAAY,yEAAI/B,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAE1B,KAAK,yCAAI,EAAE,CAAC;MACnE,CAAC,MAAM;QACLqB,QAAQ,CAAC,EAAE,CAAC;MACd;IACF;IAEAI,gBAAgB,CAAC,IAAI,CAAC;EACxB,CAAC,EAAE,CAACP,MAAM,EAAEQ,YAAY,CAAC,CAAC;EAE1B,IAAMiC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIX,CAAM,EAAK;IAAA;IACnC3B,QAAQ,CAAC,EAAE,CAAC;IACZQ,iBAAiB,CAAC,EAAE,CAAC;IACrB/B,QAAQ,IAAIA,QAAQ,CAAC,EAAE,CAAC;IACxB,qBAAAwC,QAAQ,CAACK,OAAO,sDAAhB,kBAAkBiB,KAAK,CAAC;MAAEC,YAAY,EAAE,CAAAb,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEc,MAAM,MAAK;IAAE,CAAC,CAAQ;EACnE,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxB,oBACE,sBAAC,0BAAW;MACV,GAAG,EAAE3B,cAAe;MACpB,SAAS,EAAE5B,IAAI,GAAGA,IAAI,GAAG,EAAG;MAC5B,OAAO,EAAE,iBAACwC,CAAM,EAAK;QACnB,IAAI,CAAC5C,QAAQ,IAAI,CAACD,QAAQ,EAAE;UAC1B6C,CAAC,CAACgB,eAAe,EAAE;UACnB7C,SAAS,CAAC,CAACD,MAAM,CAAC;UAClB,IAAIA,MAAM,EAAE;YAAA;YACV,sBAAAoB,QAAQ,CAACK,OAAO,uDAAhB,mBAAkBsB,IAAI,EAAE;UAC1B,CAAC,MAAM;YAAA;YACL,sBAAA3B,QAAQ,CAACK,OAAO,uDAAhB,mBAAkBiB,KAAK,EAAE;UAC3B;QACF;MACF,CAAE;MACF,QAAQ,EAAEzD,QAAQ,IAAI,KAAM;MAC5B,QAAQ,EAAEC,QAAQ,IAAI,KAAM;MAC5B,aAAa,EAAE,CAACgB,KAAM;MACtB,QAAQ,EAAEV,cAAe;MACzB,qBAAqB,EAAE,CAAC,CAACJ,uBAAwB;MACjD,WAAW,EAAE4D,iCAA0B;MACvC,kCAAyBvE,EAAE,CAAG;MAAA,wBAC9B,qBAAC,yBAAU;QACT,EAAE,EAAEA,EAAG;QACP,GAAG,EAAE2C,QAAS;QACd,YAAY,EAAE,MAAM,GAAG6B,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,EAAE,GAAG,YAAY,CAAE;QAChE,IAAI,EAAC,QAAQ;QACb,WAAW,EAAErC,YAAY,GAAG,EAAE,GAAGnC,WAAY;QAC7C,SAAS,EAAEkD,kBAAmB;QAC9B,KAAK,EAAE3B,KAAK,IAAI,EAAG;QACnB,QAAQ,EAAE,kBAAC4B,CAAM,EAAK;UACpB,IAAI,CAACA,CAAC,CAACsB,MAAM,CAACtE,KAAK,EAAE;YACnB6B,iBAAiB,CAAC,EAAE,CAAC;UACvB;UACA,IAAI,CAACzB,QAAQ,IAAI,CAACD,QAAQ,IAAI6C,CAAC,CAACsB,MAAM,CAACtE,KAAK,KAAKoB,KAAK,EAAE;YACtDK,gBAAgB,CAAC,KAAK,CAAC;YACvBN,SAAS,CAAC,IAAI,CAAC;YACfE,QAAQ,CAAC2B,CAAC,CAACsB,MAAM,CAACtE,KAAK,CAAC;YACxB,IAAID,aAAa,EAAE;cACjBA,aAAa,CAACiD,CAAC,CAACsB,MAAM,CAACtE,KAAK,IAAI,EAAE,CAAC;YACrC;UACF;QACF,CAAE;QACF,OAAO,EAAE,iBAACgD,CAAC,EAAK;UACdf,eAAe,CAAC,IAAI,CAAC;UACrBpB,QAAO,IAAIA,QAAO,CAACmC,CAAC,CAAC;QACvB,CAAE;QACF,MAAM,EAAE,gBAACA,CAAC,EAAK;UACbf,eAAe,CAAC,KAAK,CAAC;UACtBnB,OAAM,IAAIA,OAAM,CAACkC,CAAC,CAAC;QACrB,CAAE;QACF,QAAQ,EAAE/C,QAAS;QACnB,QAAQ,EAAEE,QAAQ,IAAIC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACxC,QAAQ,EAAED,QAAQ,IAAI,KAAM;QAC5B,eAAaY;MAAW,GACpBC,IAAI,EACR,EACDI,KAAK,IAAI,CAAChB,QAAQ,IAAI,CAACD,QAAQ,IAAI,CAACS,OAAO,iBAC1C,qBAAC,kBAAU;QAAC,MAAM,EAAE+C,gBAAiB;QAAC,GAAG,EAAEpB,cAAe;QAAC,wBAAwB,EAAE,IAAK;QAAC,KAAK,EAAE,UAAW;QAAC,KAAK,EAAE;UAAEgC,UAAU,EAAE;QAAO,CAAE;QAAC,OAAO,EAAE,WAAY;QAAA,uBAChK,qBAAC,kBAAW,CAAC,KAAK;MAAG,EAExB,EAEA,CAACpE,QAAQ,IAAI,CAACC,QAAQ,IAAIQ,OAAO,iBAChC;QAAK,KAAK,EAAE;UAAE2D,UAAU,EAAE;QAAO,CAAE;QAAA,uBACjC,qBAAC,kCAAgB;UAAC,IAAI,EAAEC,WAAI,CAACC,KAAM;UAAC,KAAK,EAAEC,cAAM,CAACC;QAAY;MAAG,EAEpE,eAED;QAAK,SAAS,EAAE,gBAAiB;QAAA,UAC9BzD,MAAM,IAAI,CAACd,QAAQ,IAAI,CAACD,QAAQ,gBAAG,qBAAC,wBAAW;UAAC,IAAI,EAAC,MAAM;UAAC,SAAS,EAAEK,IAAI,GAAGA,IAAI,GAAG;QAAG,EAAG,gBAAG,qBAAC,0BAAa;UAAC,IAAI,EAAC,MAAM;UAAC,SAAS,EAAEA,IAAI,GAAGA,IAAI,GAAG;QAAG;MAAG,EACrJ;IAAA,EACM;EAElB,CAAC;EAED,oBACE;IAAA,wBACE,sBAAC,uBAAQ;MAAC,GAAG,EAAEoC,YAAa;MAC5B,IAAI,EAAC,UAAU;MACf,wBAAsB,IAAK;MAC3B,2BAAkBjD,EAAE,qBAAmB;MACvC,yBAAuB2B,gBAAiB;MACxC,iBAAeJ,MAAM,GAAG,IAAI,GAAG,KAAM;MACrC,QAAQ,EAAEf,QAAS;MAAC,QAAQ,EAAE,KAAM;MAAC,QAAQ,EAAEC,QAAS;MAAC,SAAS,EAAEI,IAAI,GAAGA,IAAI,GAAG,EAAG;MAAC,MAAM,EAAEG,MAAO;MAAA,WAClGoD,WAAW,EAAE,EACb,CAAC3D,QAAQ,IAAI,CAACD,QAAQ,iBACrB,qBAAC,wBAAe;QACd,YAAY,EAAEyC,YAAa;QAC3B,MAAM,EAAE1B,MAAM,IAAI,CAACN,OAAQ;QAC3B,kBAAkB,EAAEV,kBAAkB,aAAlBA,kBAAkB,cAAlBA,kBAAkB,GAAI,EAAG;QAC7C,cAAc,EAAE0B,cAAe;QAC/B,iBAAiB,EAAEC,iBAAkB;QACrC,IAAI,EAAErB,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIgE,WAAI,CAACC,KAAM;QACzB,yBAAyB,EAAE,mCAACzB,CAAC;UAAA,OAAKzB,mBAAmB,CAACyB,CAAC,CAAC;QAAA,CAAC;QACzD,OAAO,EAAElB,OAAQ;QACjB,aAAa,EAAC,OAAO;QACrB,UAAU,EAAEC,UAAW;QACvB,OAAO,EAAE,KAAM;QACf,kBAAkB,EAAE;UAClB6C,SAAS,EAAE,QAAQ;UACnBvE,UAAU,EAAEA,UAAU;UACtBwE,WAAW,EAAE,KAAK;UAClBC,MAAM,EAAE,kBAAM,CAAC,CAAC;UAChBC,aAAa,EAAE,uBAACC,MAAgB,EAAK;YACnCvD,gBAAgB,CAAC,IAAI,CAAC;YACtBU,OAAO,CAAC,KAAK,CAAC;UAChB,CAAC;UACD8C,KAAK,EAAErF;QACT,CAAE;QACF,MAAM,EAAE,CAACa,gBAAgB,IAAI,CAACe,aAAa,GAAGJ,KAAK,IAAI,EAAE,GAAG,EAAG;QAC/D,SAAS,EAAED,SAAU;QACrB,QAAQ,EAAE,KAAM;QAChB,EAAE,YAAKxB,EAAE;MAAmB,EAE/B;IAAA,EACQ,EACVW,uBAAuB,iBACtB,sBAAC,yBAAY;MAAC,SAAS,EAAEE,IAAI,IAAI,EAAG;MAAA,wBAClC,qBAAC,6BAAgB;QAAC,KAAK,EAAEkE,cAAM,CAACQ;MAAa,EAAG,eAChD;QAAA,UAAO5E;MAAuB,EAAQ;IAAA,EAEzC,EACAC,iBAAiB,iBAChB,sBAAC,8BAAiB;MAAC,SAAS,EAAEC,IAAI,IAAI,EAAG;MAAA,wBACvC,qBAAC,wBAAW;QAAC,KAAK,EAAEkE,cAAM,CAACC;MAAY,EAAG,eAC1C;QAAA,UAAOpE;MAAiB,EAAQ;IAAA,EAEnC;EAAA,EACA;AAEP,CAAC,CAAC;AAAC;EA9PDX,IAAI;EACJC,WAAW;EAEXG,KAAK;EACLF,QAAQ;EACRC,aAAa;EAEbE,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRQ,OAAO;EAEPH,gBAAgB;EAEhBP,kBAAkB;EAClBI,uBAAuB;EACvBC,iBAAiB;EAGjBG,cAAc;EACdC,MAAM;EACNN,UAAU;AAAA;AAAA,eA2OGd,cAAc;AAAA"}

package/dist/Dropdown/DropdownFilter.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DropdownItem } from './DropdownContent';
-import { Size } from '../types';
-interface DropdownFilterProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {
+import { Size, Testable } from '../types';
+interface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {
     list: DropdownItem[];
     placeholder?: string;
     value?: string;

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"];
+var _excluded = ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "buttonFontSize", "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';
@@ -41,6 +41,7 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     loading = _ref.loading,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -196,7 +197,8 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         },
         required: required,
         tabIndex: disabled || readOnly ? -1 : 0,
-        disabled: disabled || false
+        disabled: disabled || false,
+        "data-testid": dataTestId
       }, rest)), input && !readOnly && !disabled && !loading && /*#__PURE__*/_jsx(IconButton, {
         action: handleInputClear,
         ref: clearButtonRef,

package/dist/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFilter.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","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 } 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 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 = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\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          {...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.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","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","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","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 = '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          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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"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs

@@ -27,7 +27,7 @@ var _rooks = require("rooks");
 var _common = require("../common");
 var _utils = require("../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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; }
@@ -36,8 +36,9 @@ var HeaderWrapper = _styledComponents.default.header(_templateObject || (_templa
 var RowLayout = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
 var HamburgerButton = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " button {\n    height: 56px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), _styles.BREAKPOINTS.SMALL, _styles.BREAKPOINTS.LARGE);
 var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  ", " {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), _styles.BREAKPOINTS.XSMALL, HamburgerButton);
-var MobileMenuBackdrop = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.LARGE);
-var UserMenuWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.LARGE, function (props) {
+var MobileMenuBackdrop = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.LARGE);
+var MobileWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    display: none !important;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
+var UserMenuWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.LARGE, function (props) {
   return props.offsetRight && (0, _utils.hasWindow)() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
 /**
@@ -56,7 +57,8 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
     testId = _ref.testId,
     _ref$useMaxWidth = _ref.useMaxWidth,
     useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
-    maxWidth = _ref.maxWidth;
+    maxWidth = _ref.maxWidth,
+    profileComponent = _ref.profileComponent;
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     showMobileMenu = _React$useState2[0],
@@ -121,13 +123,16 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
                 return a.pinned;
               }),
               action: desktop === null || desktop === void 0 ? void 0 : desktop.action
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileWrapper, {
+              children: !!profileComponent && profileComponent
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DesktopActions.default, {
               ref: actionsRef,
               buttons: desktop === null || desktop === void 0 ? void 0 : desktop.buttons,
               onShowUserMenu: function onShowUserMenu() {
                 return setShowUserMenu(!showUserMenu);
               },
-              user: profile === null || profile === void 0 ? void 0 : profile.user
+              user: profile === null || profile === void 0 ? void 0 : profile.user,
+              profileComponent: profileComponent
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(HamburgerButton, {
               hidden: !isAuthenticated,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
@@ -156,7 +161,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
           onClose: function onClose() {
             return setShowMobileMenu(false);
           },
-          profile: profile
+          profile: !profileComponent ? profile : undefined
         }))
       })
     }), (desktop === null || desktop === void 0 ? void 0 : (_desktop$buttons = desktop.buttons) === null || _desktop$buttons === void 0 ? void 0 : _desktop$buttons.some(function (a) {
@@ -184,7 +189,8 @@ GlobalNavigationBar.propTypes = {
     to: _propTypes.default.string,
     showBetaTag: _propTypes.default.bool
   }),
-  testId: _propTypes.default.string
+  testId: _propTypes.default.string,
+  profileComponent: _propTypes.default.node
 };
 var _default = GlobalNavigationBar;
 exports.default = _default;

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
+{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","MobileWrapper","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.LARGE} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DesktopNavigationMenuProps, MobileNavigationMenuProps, ProfileMenu } from './types';
-declare type GlobalNavigationBarProps = {
+type GlobalNavigationBarProps = {
     isAuthenticated?: boolean;
     useMaxWidth?: boolean;
     maxWidth?: number;
@@ -14,11 +14,12 @@ declare type GlobalNavigationBarProps = {
     mobile?: MobileNavigationMenuProps;
     desktop?: DesktopNavigationMenuProps;
     testId?: string;
+    profileComponent?: React.ReactNode;
 };
 /**
  * @param props
  * @constructor
  * @description This component is a global navigation header bar
  */
-declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth, }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
+declare const GlobalNavigationBar: ({ name, isAuthenticated, logo, profile, mobile, desktop, testId, useMaxWidth, maxWidth, profileComponent }: GlobalNavigationBarProps) => React.ReactElement<GlobalNavigationBarProps>;
 export default GlobalNavigationBar;

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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';
@@ -29,8 +29,9 @@ var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedT
 var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " button {\n    height: 56px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
 var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  ", " {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.XSMALL, HamburgerButton);
-var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
-var UserMenuWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
+var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
+var MobileWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    display: none !important;\n  }\n"])), BREAKPOINTS.LARGE);
+var UserMenuWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
   return props.offsetRight && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
 /**
@@ -49,7 +50,8 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
     testId = _ref.testId,
     _ref$useMaxWidth = _ref.useMaxWidth,
     useMaxWidth = _ref$useMaxWidth === void 0 ? true : _ref$useMaxWidth,
-    maxWidth = _ref.maxWidth;
+    maxWidth = _ref.maxWidth,
+    profileComponent = _ref.profileComponent;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     showMobileMenu = _React$useState2[0],
@@ -114,13 +116,16 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
                 return a.pinned;
               }),
               action: desktop === null || desktop === void 0 ? void 0 : desktop.action
+            }), /*#__PURE__*/_jsx(MobileWrapper, {
+              children: !!profileComponent && profileComponent
             }), /*#__PURE__*/_jsx(DesktopActions, {
               ref: actionsRef,
               buttons: desktop === null || desktop === void 0 ? void 0 : desktop.buttons,
               onShowUserMenu: function onShowUserMenu() {
                 return setShowUserMenu(!showUserMenu);
               },
-              user: profile === null || profile === void 0 ? void 0 : profile.user
+              user: profile === null || profile === void 0 ? void 0 : profile.user,
+              profileComponent: profileComponent
             }), /*#__PURE__*/_jsx(HamburgerButton, {
               hidden: !isAuthenticated,
               children: /*#__PURE__*/_jsx(IconButton, {
@@ -149,7 +154,7 @@ var GlobalNavigationBar = function GlobalNavigationBar(_ref) {
           onClose: function onClose() {
             return setShowMobileMenu(false);
           },
-          profile: profile
+          profile: !profileComponent ? profile : undefined
         }))
       })
     }), (desktop === null || desktop === void 0 ? void 0 : (_desktop$buttons = desktop.buttons) === null || _desktop$buttons === void 0 ? void 0 : _desktop$buttons.some(function (a) {
@@ -177,7 +182,8 @@ GlobalNavigationBar.propTypes = {
     to: _pt.string,
     showBetaTag: _pt.bool
   }),
-  testId: _pt.string
+  testId: _pt.string,
+  profileComponent: _pt.node
 };
 export default GlobalNavigationBar;
 //# sourceMappingURL=GlobalNavigationBar.js.map

package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
+{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","MobileWrapper","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","profileComponent","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","undefined","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst MobileWrapper = styled.div`\n  ${BREAKPOINTS.LARGE} {\n    display: none !important;\n  }\n`;\n\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n\n  profileComponent?: React.ReactNode\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                               profileComponent\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <MobileWrapper>\n                {!!profileComponent && profileComponent }\n              </MobileWrapper>\n\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}\n                              profileComponent= {profileComponent}\n                              />\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={!profileComponent ? profile : undefined}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/Logo.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type LogoProps = {
+type LogoProps = {
     name: string;
     showBetaTag?: boolean;
     onClick?: () => void;

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs

@@ -28,6 +28,7 @@ var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject
 var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var buttons = _ref.buttons,
     user = _ref.user,
+    profileComponent = _ref.profileComponent,
     onShowUserMenu = _ref.onShowUserMenu;
   var _React$useState = _react.default.useState([]),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -59,7 +60,7 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
             type = item.type,
             action = item.action,
             rest = (0, _objectWithoutProperties2.default)(item, _excluded);
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
+          if (!!profileComponent) return profileComponent;else return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
             ref: elRefs[index],
             hideOnLowWidth: true,
             onClick: function onClick(e) {
@@ -119,6 +120,7 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
 });
 DesktopActions.propTypes = {
   buttons: _propTypes.default.array,
+  profileComponent: _propTypes.default.node,
   onShowUserMenu: _propTypes.default.func.isRequired
 };
 var _default = DesktopActions;