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

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/InputFields/Checkbox.cjs

@@ -91,6 +91,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     disabled: disabled,
     className: cls,
+    "aria-checked": selected,
     selected: selected,
     tabIndex: disabled || readOnly ? -1 : tabIndexVal ? tabIndexVal : 0,
     invalid: invalid,

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/InputFields/Checkbox.js

@@ -63,6 +63,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     disabled: disabled,
     className: cls,
+    "aria-checked": selected,
     selected: selected,
     tabIndex: disabled || readOnly ? -1 : tabIndexVal ? tabIndexVal : 0,
     invalid: invalid,

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/icons/index.cjs

@@ -52,9 +52,10 @@ exports.getSize = getSize;
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  ", "\n"])), (0, _TooltipStyles.TooltipTrigger)());
 
-var renderIcon = function renderIcon(children, tooltip) {
+var renderIcon = function renderIcon(children, tooltip, tooltipId) {
   return tooltip ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, {
+      id: tooltipId,
       children: tooltip
     })]
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -75,26 +76,32 @@ exports.formatSvgString = formatSvgString;
 var SystemIcon = function SystemIcon(_ref) {
   var children = _ref.children,
       _ref$tooltip = _ref.tooltip,
-      tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip;
-  return renderIcon(children, tooltip);
+      tooltip = _ref$tooltip === void 0 ? '' : _ref$tooltip,
+      _ref$tooltipId = _ref.tooltipId,
+      tooltipId = _ref$tooltipId === void 0 ? '' : _ref$tooltipId;
+  return renderIcon(children, tooltip, tooltipId);
 };
 
 exports.SystemIcon = SystemIcon;
 SystemIcon.propTypes = {
   children: _propTypes.default.any,
-  tooltip: _propTypes.default.string
+  tooltip: _propTypes.default.string,
+  tooltipId: _propTypes.default.string
 };
 
 var ContentIcon = function ContentIcon(_ref2) {
   var children = _ref2.children,
       _ref2$tooltip = _ref2.tooltip,
-      tooltip = _ref2$tooltip === void 0 ? '' : _ref2$tooltip;
-  return renderIcon(children, tooltip);
+      tooltip = _ref2$tooltip === void 0 ? '' : _ref2$tooltip,
+      _ref2$tooltipId = _ref2.tooltipId,
+      tooltipId = _ref2$tooltipId === void 0 ? '' : _ref2$tooltipId;
+  return renderIcon(children, tooltip, tooltipId);
 };
 
 exports.ContentIcon = ContentIcon;
 ContentIcon.propTypes = {
   children: _propTypes.default.any,
-  tooltip: _propTypes.default.string
+  tooltip: _propTypes.default.string,
+  tooltipId: _propTypes.default.string
 };
 //# sourceMappingURL=index.cjs.map