@laerdal/life-react-components 1.11.0-dev.31 → 1.11.0-dev.35

package/dist/Dropdown/DropdownButton.cjs.map

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

package/dist/Dropdown/DropdownButton.js

@@ -114,7 +114,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           ref: ref,
           variant: "secondary",
           shape: "circular",
-          role: "menu",
+          role: "button",
           "aria-controls": "".concat(id, "_dropdowncontent"),
           "aria-activedescendant": activeDescendant,
           action: function action(event) {
@@ -140,7 +140,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return /*#__PURE__*/_jsx(TextButtonDropdownWrapper, {
           tabIndex: !disabled ? 0 : -1,
           className: cls,
-          role: "menu",
+          role: "button",
           "aria-controls": "".concat(id, "_dropdowncontent"),
           "aria-activedescendant": activeDescendant,
           onMouseDown: defaultOnMouseDownHandler,

package/dist/Dropdown/DropdownButton.js.map

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

package/dist/Dropdown/DropdownFilter.cjs

@@ -223,9 +223,6 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, _objectSpread({
         id: id,
         ref: inputRef,
-        role: "combobox",
-        "aria-owns": "".concat(id, "_dropdowncontent"),
-        "aria-activedescendant": activeDescendant,
         autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
         type: "search",
         placeholder: inputFocused ? '' : placeholder,
@@ -291,7 +288,11 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.Dropdown, {
       ref: containerRef,
+      role: "combobox",
       "aria-multiselectable": true,
+      "aria-controls": "".concat(id, "_dropdowncontent"),
+      "aria-activedescendant": activeDescendant,
+      "aria-expanded": isOpen ? true : false,
       disabled: disabled,
       isButton: false,
       readOnly: readOnly,

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          role=\"combobox\"\n          aria-owns={`${id}_dropdowncontent`}\n          aria-activedescendant={activeDescendant}\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      aria-multiselectable={true} 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","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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"}

package/dist/Dropdown/DropdownFilter.js

@@ -194,9 +194,6 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children: [/*#__PURE__*/_jsx(InputField, _objectSpread({
         id: id,
         ref: inputRef,
-        role: "combobox",
-        "aria-owns": "".concat(id, "_dropdowncontent"),
-        "aria-activedescendant": activeDescendant,
         autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
         type: "search",
         placeholder: inputFocused ? '' : placeholder,
@@ -262,7 +259,11 @@ var DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Dropdown, {
       ref: containerRef,
+      role: "combobox",
       "aria-multiselectable": true,
+      "aria-controls": "".concat(id, "_dropdowncontent"),
+      "aria-activedescendant": activeDescendant,
+      "aria-expanded": isOpen ? true : false,
       disabled: disabled,
       isButton: false,
       readOnly: readOnly,

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          role=\"combobox\"\n          aria-owns={`${id}_dropdowncontent`}\n          aria-activedescendant={activeDescendant}\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      aria-multiselectable={true} 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","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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"}

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs

@@ -11,8 +11,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactResponsive = require("react-responsive");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Button = require("../../Button");
@@ -21,6 +19,8 @@ var _styles = require("../../styles");
 
 var _types = require("../../types");
 
+var _rooks = require("rooks");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
@@ -35,9 +35,7 @@ var MobileActionContainer = function MobileActionContainer(_ref) {
       label = _ref.label,
       isLoading = _ref.isLoading,
       action = _ref.action;
-  var isSmallScreen = (0, _reactResponsive.useMediaQuery)({
-    query: _styles.BREAKPOINTS.SMALL.replace('@media ', '')
-  });
+  var isSmallScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.SMALL.replace('@media ', ''));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionContainer, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
       variant: variant,

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileActionContainer.cjs","names":["ActionContainer","styled","div","COLORS","neutral_200","BREAKPOINTS","SMALL","MobileActionContainer","disabled","variant","icon","label","isLoading","action","isSmallScreen","useMediaQuery","query","replace","Size","Medium","Small"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, isLoading, action }) => {\n  const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n  return (\n    <ActionContainer>\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n        {label}\n      </Button>\n    </ActionContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAGA,IAAMA,eAAe,GAAGC,yBAAA,CAAOC,GAAV,wPAGKC,cAAA,CAAOC,WAHZ,EAOjBC,mBAAA,CAAYC,KAPK,CAArB;;AAcO,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA6E,OAAyE;EAAA,IAAtEC,QAAsE,QAAtEA,QAAsE;EAAA,wBAA5DC,OAA4D;EAAA,IAA5DA,OAA4D,6BAAlD,WAAkD;EAAA,IAArCC,IAAqC,QAArCA,IAAqC;EAAA,IAA/BC,KAA+B,QAA/BA,KAA+B;EAAA,IAAxBC,SAAwB,QAAxBA,SAAwB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACjK,IAAMC,aAAa,GAAG,IAAAC,8BAAA,EAAc;IAAEC,KAAK,EAAEX,mBAAA,CAAYC,KAAZ,CAAkBW,OAAlB,CAA0B,SAA1B,EAAqC,EAArC;EAAT,CAAd,CAAtB;EAEA,oBACE,qBAAC,eAAD;IAAA,uBACE,qBAAC,cAAD;MAAQ,OAAO,EAAER,OAAjB;MAA0B,IAAI,EAAEK,aAAa,GAAGI,WAAA,CAAKC,MAAR,GAAiBD,WAAA,CAAKE,KAAnE;MAA0E,QAAQ,EAAEZ,QAApF;MAA8F,IAAI,EAAEE,IAApG;MAA0G,OAAO,EAAEE,SAAnH;MAA8H,OAAO,EAAEC,MAAvI;MAAA,UACGF;IADH;EADF,EADF;AAOD,CAVM"}
+{"version":3,"file":"MobileActionContainer.cjs","names":["ActionContainer","styled","div","COLORS","neutral_200","BREAKPOINTS","SMALL","MobileActionContainer","disabled","variant","icon","label","isLoading","action","isSmallScreen","useMediaMatch","replace","Size","Medium","Small"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\nimport {useMediaMatch} from \"rooks\";\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, isLoading, action }) => {\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\n\n  return (\n    <ActionContainer>\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n        {label}\n      </Button>\n    </ActionContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,IAAMA,eAAe,GAAGC,yBAAA,CAAOC,GAAV,wPAGKC,cAAA,CAAOC,WAHZ,EAOjBC,mBAAA,CAAYC,KAPK,CAArB;;AAcO,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA6E,OAAyE;EAAA,IAAtEC,QAAsE,QAAtEA,QAAsE;EAAA,wBAA5DC,OAA4D;EAAA,IAA5DA,OAA4D,6BAAlD,WAAkD;EAAA,IAArCC,IAAqC,QAArCA,IAAqC;EAAA,IAA/BC,KAA+B,QAA/BA,KAA+B;EAAA,IAAxBC,SAAwB,QAAxBA,SAAwB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACjK,IAAMC,aAAa,GAAG,IAAAC,oBAAA,EAAcV,mBAAA,CAAYC,KAAZ,CAAkBU,OAAlB,CAA0B,SAA1B,EAAqC,EAArC,CAAd,CAAtB;EAEA,oBACE,qBAAC,eAAD;IAAA,uBACE,qBAAC,cAAD;MAAQ,OAAO,EAAEP,OAAjB;MAA0B,IAAI,EAAEK,aAAa,GAAGG,WAAA,CAAKC,MAAR,GAAiBD,WAAA,CAAKE,KAAnE;MAA0E,QAAQ,EAAEX,QAApF;MAA8F,IAAI,EAAEE,IAApG;MAA0G,OAAO,EAAEE,SAAnH;MAA8H,OAAO,EAAEC,MAAvI;MAAA,UACGF;IADH;EADF,EADF;AAOD,CAVM"}

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js

@@ -3,11 +3,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject;
 
 import React from 'react';
-import { useMediaQuery } from 'react-responsive';
 import styled from 'styled-components';
 import { Button } from '../../Button';
 import { BREAKPOINTS, COLORS } from '../../styles';
 import { Size } from '../../types';
+import { useMediaMatch } from "rooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ActionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n\n  ", " {\n    padding: 16px;\n  }\n"])), COLORS.neutral_200, BREAKPOINTS.SMALL);
 export var MobileActionContainer = function MobileActionContainer(_ref) {
@@ -18,9 +18,7 @@ export var MobileActionContainer = function MobileActionContainer(_ref) {
       label = _ref.label,
       isLoading = _ref.isLoading,
       action = _ref.action;
-  var isSmallScreen = useMediaQuery({
-    query: BREAKPOINTS.SMALL.replace('@media ', '')
-  });
+  var isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));
   return /*#__PURE__*/_jsx(ActionContainer, {
     children: /*#__PURE__*/_jsx(Button, {
       variant: variant,

package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileActionContainer.js","names":["React","useMediaQuery","styled","Button","BREAKPOINTS","COLORS","Size","ActionContainer","div","neutral_200","SMALL","MobileActionContainer","disabled","variant","icon","label","isLoading","action","isSmallScreen","query","replace","Medium","Small"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, isLoading, action }) => {\n  const isSmallScreen = useMediaQuery({ query: BREAKPOINTS.SMALL.replace('@media ', '') });\n\n  return (\n    <ActionContainer>\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n        {label}\n      </Button>\n    </ActionContainer>\n  );\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,aAAT,QAA8B,kBAA9B;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,IAAT,QAAqB,aAArB;;AAGA,IAAMC,eAAe,GAAGL,MAAM,CAACM,GAAV,0OAGKH,MAAM,CAACI,WAHZ,EAOjBL,WAAW,CAACM,KAPK,CAArB;AAcA,OAAO,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA6E,OAAyE;EAAA,IAAtEC,QAAsE,QAAtEA,QAAsE;EAAA,wBAA5DC,OAA4D;EAAA,IAA5DA,OAA4D,6BAAlD,WAAkD;EAAA,IAArCC,IAAqC,QAArCA,IAAqC;EAAA,IAA/BC,KAA+B,QAA/BA,KAA+B;EAAA,IAAxBC,SAAwB,QAAxBA,SAAwB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACjK,IAAMC,aAAa,GAAGjB,aAAa,CAAC;IAAEkB,KAAK,EAAEf,WAAW,CAACM,KAAZ,CAAkBU,OAAlB,CAA0B,SAA1B,EAAqC,EAArC;EAAT,CAAD,CAAnC;EAEA,oBACE,KAAC,eAAD;IAAA,uBACE,KAAC,MAAD;MAAQ,OAAO,EAAEP,OAAjB;MAA0B,IAAI,EAAEK,aAAa,GAAGZ,IAAI,CAACe,MAAR,GAAiBf,IAAI,CAACgB,KAAnE;MAA0E,QAAQ,EAAEV,QAApF;MAA8F,IAAI,EAAEE,IAApG;MAA0G,OAAO,EAAEE,SAAnH;MAA8H,OAAO,EAAEC,MAAvI;MAAA,UACGF;IADH;EADF,EADF;AAOD,CAVM"}
+{"version":3,"file":"MobileActionContainer.js","names":["React","styled","Button","BREAKPOINTS","COLORS","Size","useMediaMatch","ActionContainer","div","neutral_200","SMALL","MobileActionContainer","disabled","variant","icon","label","isLoading","action","isSmallScreen","replace","Medium","Small"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileActionContainer.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { Size } from '../../types';\nimport { MenuButton } from '../types';\nimport {useMediaMatch} from \"rooks\";\n\nconst ActionContainer = styled.div`\n  padding: 8px 16px;\n  box-sizing: border-box;\n  border-top: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n\n  ${BREAKPOINTS.SMALL} {\n    padding: 16px;\n  }\n`;\n\ninterface MobileActionContainerProps extends MenuButton {}\n\nexport const MobileActionContainer: React.FunctionComponent<MobileActionContainerProps> = ({ disabled, variant = 'secondary', icon, label, isLoading, action }) => {\n  const isSmallScreen = useMediaMatch(BREAKPOINTS.SMALL.replace('@media ', ''));\n\n  return (\n    <ActionContainer>\n      <Button variant={variant} size={isSmallScreen ? Size.Medium : Size.Small} disabled={disabled} icon={icon} loading={isLoading} onClick={action}>\n        {label}\n      </Button>\n    </ActionContainer>\n  );\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,IAAT,QAAqB,aAArB;AAEA,SAAQC,aAAR,QAA4B,OAA5B;;AAEA,IAAMC,eAAe,GAAGN,MAAM,CAACO,GAAV,0OAGKJ,MAAM,CAACK,WAHZ,EAOjBN,WAAW,CAACO,KAPK,CAArB;AAcA,OAAO,IAAMC,qBAA0E,GAAG,SAA7EA,qBAA6E,OAAyE;EAAA,IAAtEC,QAAsE,QAAtEA,QAAsE;EAAA,wBAA5DC,OAA4D;EAAA,IAA5DA,OAA4D,6BAAlD,WAAkD;EAAA,IAArCC,IAAqC,QAArCA,IAAqC;EAAA,IAA/BC,KAA+B,QAA/BA,KAA+B;EAAA,IAAxBC,SAAwB,QAAxBA,SAAwB;EAAA,IAAbC,MAAa,QAAbA,MAAa;EACjK,IAAMC,aAAa,GAAGZ,aAAa,CAACH,WAAW,CAACO,KAAZ,CAAkBS,OAAlB,CAA0B,SAA1B,EAAqC,EAArC,CAAD,CAAnC;EAEA,oBACE,KAAC,eAAD;IAAA,uBACE,KAAC,MAAD;MAAQ,OAAO,EAAEN,OAAjB;MAA0B,IAAI,EAAEK,aAAa,GAAGb,IAAI,CAACe,MAAR,GAAiBf,IAAI,CAACgB,KAAnE;MAA0E,QAAQ,EAAET,QAApF;MAA8F,IAAI,EAAEE,IAApG;MAA0G,OAAO,EAAEE,SAAnH;MAA8H,OAAO,EAAEC,MAAvI;MAAA,UACGF;IADH;EADF,EADF;AAOD,CAVM"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs

@@ -31,10 +31,10 @@ var _MobileMenuHeader = _interopRequireDefault(require("./MobileMenuHeader"));
 
 var _MobileMenuContent = _interopRequireDefault(require("./MobileMenuContent"));
 
-var _reactResponsive = require("react-responsive");
-
 var _StackState = require("../../common/StackState");
 
+var _rooks = require("rooks");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -71,9 +71,7 @@ var MobileMenu = function MobileMenu(_ref) {
       pop = _useStackState.pop,
       peek = _useStackState.peek;
 
-  var isMediumScreen = (0, _reactResponsive.useMediaQuery)({
-    query: _styles.BREAKPOINTS.LARGE.replace('@media ', '')
-  });
+  var isMediumScreen = (0, _rooks.useMediaMatch)(_styles.BREAKPOINTS.LARGE.replace('@media ', ''));
   var location = (0, _reactRouterDom.useLocation)();
 
   var onSubMenuOpen = function onSubMenuOpen(menu) {

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaQuery","query","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MenuIconSubMenuButton,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useMediaQuery} from 'react-responsive';\nimport {useStackState} from '../../common/StackState';\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaQuery({query: BREAKPOINTS.LARGE.replace('@media ', '')});\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAiBA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,yBAAA,CAAOC,GAAV,qQAEAC,iBAAA,CAAUC,UAFV,EAUTC,mBAAA,CAAYC,KAVH,CAAb;;AAeA,IAAMC,aAAa,GAAGN,yBAAA,CAAOC,GAAV,6GAAnB;;AAIA,IAAMM,YAAY,GAAGP,yBAAA,CAAOC,GAAV,+TAOQO,cAAA,CAAOC,WAPf,EASd,IAAAC,0BAAA,EAAmBC,0BAAA,CAAmBC,IAAtC,EAA4CJ,cAAA,CAAOK,WAAnD,CATc,EAUdT,mBAAA,CAAYC,KAVE,EAaZ,IAAAS,yBAAA,EAAkBH,0BAAA,CAAmBC,IAArC,EAA2CJ,cAAA,CAAOK,WAAlD,CAbY,CAAlB;;AAiBA,IAAME,aAAa,GAAGf,yBAAA,CAAOC,GAAV,2MAAnB;;AA8BA,IAAMe,UAAU,GAAG,SAAbA,UAAa,OAUc;EAAA;;EAAA,IATXC,IASW,QATXA,IASW;EAAA,IARXC,OAQW,QARXA,OAQW;EAAA,IAPXC,OAOW,QAPXA,OAOW;EAAA,IANXC,KAMW,QANXA,KAMW;EAAA,IALXC,MAKW,QALXA,MAKW;EAAA,IAJXC,KAIW,QAJXA,KAIW;EAAA,IAHXC,MAGW,QAHXA,MAGW;EAAA,IAFXC,MAEW,QAFXA,MAEW;EAAA,IADXC,OACW,QADXA,OACW;;EAE/B,qBAAyC,IAAAC,yBAAA,GAAzC;EAAA,IAAOC,KAAP,kBAAOA,KAAP;EAAA,IAAcC,MAAd,kBAAcA,MAAd;EAAA,IAAsBC,IAAtB,kBAAsBA,IAAtB;EAAA,IAA4BC,GAA5B,kBAA4BA,GAA5B;EAAA,IAAiCC,IAAjC,kBAAiCA,IAAjC;;EAEA,IAAMC,cAAc,GAAG,IAAAC,8BAAA,EAAc;IAACC,KAAK,EAAE9B,mBAAA,CAAY+B,KAAZ,CAAkBC,OAAlB,CAA0B,SAA1B,EAAqC,EAArC;EAAR,CAAd,CAAvB;EAEA,IAAMC,QAAQ,GAAG,IAAAC,2BAAA,GAAjB;;EAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,IAAD,EAAsE;IAE1F,QAAQA,IAAR,aAAQA,IAAR,uBAAQA,IAAI,CAAEC,IAAd;MACE,KAAK,OAAL;QACEZ,IAAI,CAAC;UACHR,MAAM,EAAE;YACND,KAAK,EAAEoB,IAAI,CAACpB,KADN;YAEND,OAAO,EAAEqB,IAAI,CAACrB;UAFR,CADL;UAKHuB,OAAO,EAAE;YACPrB,MAAM,EAAEmB,IAAI,CAACnB,MADN;YAEPC,KAAK,EAAEkB,IAAI,CAAClB,KAFL;YAGPC,MAAM,EAAEiB,IAAI,CAACjB,MAHN;YAIPC,MAAM,EAAEgB,IAAI,CAAChB;UAJN,CALN;UAWHD,MAAM,EAAE;QAXL,CAAD,CAAJ;QAaA;;MACF,KAAK,QAAL;QACEM,IAAI,CAAC;UACHR,MAAM,EAAE;YACND,KAAK,EAAEoB,IAAI,CAACpB,KADN;YAEND,OAAO,EAAEqB,IAAI,CAACrB;UAFR,CADL;UAKHwB,aAAa,EAAEH,IAAI,CAACI,MALjB;UAMHrB,MAAM,EAAE;QANL,CAAD,CAAJ;QAQA;;MACF;QACE;IA3BJ;EA8BD,CAhCD;;EAkCAsB,KAAK,CAACC,SAAN,CAAgB,YAAM;IACpBrB,OAAO;EACR,CAFD,EAEG,CAACY,QAAD,CAFH;EAIAQ,KAAK,CAACC,SAAN,CAAgB,YAAM;IACpBd,cAAc,IAAIP,OAAO,EAAzB;EACD,CAFD,EAEG,CAACO,cAAD,CAFH;EAIAa,KAAK,CAACC,SAAN,CAAgB,YAAM;IACpBC,UAAU,CAAC,YAAM;MACfpB,KAAK,CAAC;QACJJ,MAAM,EAAE,IADJ;QAEJF,MAAM,EAAE;UACND,KAAK,EAAEA,KADD;UAEND,OAAO,EAAEA;QAFH,CAFJ;QAMJuB,OAAO,EAAE;UACPrB,MAAM,EAAEA,MADD;UAEPC,KAAK,EAAEA,KAFA;UAGPC,MAAM,EAAEA,MAHD;UAIPC,MAAM,EAAEA;QAJD;MANL,CAAD,CAAL;IAaD,CAdS,EAcP,GAdO,CAAV;EAeD,CAhBD,EAgBG,CAACP,IAAD,CAhBH;EAmBA,IAAM+B,OAAO,GAAGjB,IAAI,EAApB;EAEA,IAAMkB,QAAQ,GAAGD,OAAH,aAAGA,OAAH,0CAAGA,OAAO,CAAE3B,MAAZ,6EAAG,gBAAiBF,OAApB,0DAAG,sBAA0B+B,IAA1B,CAA+B,UAAAC,CAAC;IAAA,OAAIA,CAAC,CAACV,IAAF,KAAW,UAAf;EAAA,CAAhC,CAAjB;EAEA,oBACE,sBAAC,OAAD;IAAA,wBACE,qBAAC,yBAAD;MAAkB,OAAO,EAAEO,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAE3B,MAAT,CAAgBF,OAA3C;MACkB,QAAQ,EAAES,MAAM,GAAG,CAAT,GAAaE,GAAb,GAAmBsB,SAD/C;MAEkB,aAAa,EAAEb,aAFjC;MAGkB,OAAO,EAAErB,OAH3B;MAIkB,KAAK,EAAE8B,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAE3B,MAAT,CAAgBD,KAJzC;MAKkB,OAAO,EAAEK;IAL3B,EADF,EAOG,CAAAuB,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEL,aAAT,kBAA0B,qBAAC,aAAD;MAAA,UAAgBK,OAAhB,aAAgBA,OAAhB,uBAAgBA,OAAO,CAAEL,aAAT;IAAhB,EAP7B,EAQG,CAAAK,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEN,OAAT,kBAAoB,qBAAC,0BAAD;MAAmB,MAAM,EAAEM,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEN,OAAT,CAAiBrB,MAA5C;MACmB,KAAK,EAAE2B,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEN,OAAT,CAAiBpB,KAD3C;MAEmB,MAAM,EAAE0B,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEN,OAAT,CAAiBnB,MAF5C;MAGmB,MAAM,EAAEyB,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEN,OAAT,CAAiBlB,MAH5C;MAImB,aAAa,EAAEe;IAJlC,EARvB,EAeI,CAAAS,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEzB,MAAT,kBACA,sBAAC,YAAD;MAAA,wBACE,qBAAC,mBAAD;QAAa,MAAM,EAAE,MAArB;QAA6B,KAAK,EAAE;MAApC,EADF,EAEG0B,QAAQ,iBACP;QAAA,wBACE,qBAAC,aAAD;UAAe,SAAS,EAAE,mBAA1B;UAAA;QAAA,EADF,eAEE,qBAAC,kBAAD;UACE,OAAO,EAAE,WADX;UAEE,KAAK,EAAE,UAFT;UAGE,EAAE,EAAC,qBAHL;UAIE,MAAM,EAAE;YAAA,OAAMA,QAAQ,CAACzB,MAAT,IAAmByB,QAAQ,CAACzB,MAAT,EAAnB,IAAwCC,OAAO,EAArD;UAAA,CAJV;UAAA,uBAKE,qBAAC,sBAAD;YAAW,IAAI,EAAC;UAAhB;QALF,EAFF;MAAA,EAHJ;IAAA,EAhBJ;EAAA,EADF;AAoCD,CAvHD;;;EAnBER,I;EACAQ,O;;eA2IaT,U"}
+{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaMatch","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.js

@@ -12,8 +12,8 @@ import { IconButton } from '../../Button';
 import { LaerdalLogo } from '../../assets';
 import MobileMenuHeader from './MobileMenuHeader';
 import MobileMenuContent from './MobileMenuContent';
-import { useMediaQuery } from 'react-responsive';
 import { useStackState } from '../../common/StackState';
+import { useMediaMatch } from "rooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,9 +42,7 @@ var MobileMenu = function MobileMenu(_ref) {
       pop = _useStackState.pop,
       peek = _useStackState.peek;
 
-  var isMediumScreen = useMediaQuery({
-    query: BREAKPOINTS.LARGE.replace('@media ', '')
-  });
+  var isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));
   var location = useLocation();
 
   var onSubMenuOpen = function onSubMenuOpen(menu) {