@laerdal/life-react-components 1.11.0-dev.9 → 2.0.0

package/dist/Dropdown/DropdownButton.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value"];
+var _excluded = ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id"];
 
 var _templateObject;
 
@@ -51,6 +51,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       maxHeight = _ref.maxHeight,
       className = _ref.className,
       value = _ref.value,
+      id = _ref.id,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // Globally used variables within the view.
@@ -59,20 +60,25 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       dropdownOpen = _React$useState2[0],
       setDropdownOpen = _React$useState2[1];
 
-  var _React$useState3 = React.useState([]),
+  var _React$useState3 = React.useState(),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      selectedValues = _React$useState4[0],
-      setSelectedValues = _React$useState4[1];
+      activeDescendant = _React$useState4[0],
+      setActiveDescendant = _React$useState4[1];
 
-  var _React$useState5 = React.useState(null),
+  var _React$useState5 = React.useState([]),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      focused = _React$useState6[0],
-      setFocused = _React$useState6[1];
+      selectedValues = _React$useState6[0],
+      setSelectedValues = _React$useState6[1];
 
-  var _React$useState7 = React.useState(false),
+  var _React$useState7 = React.useState(null),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      keyboardNavigated = _React$useState8[0],
-      setKeyboardNavigated = _React$useState8[1];
+      focused = _React$useState8[0],
+      setFocused = _React$useState8[1];
+
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      keyboardNavigated = _React$useState10[0],
+      setKeyboardNavigated = _React$useState10[1];
 
   var dropdownRef = React.useRef(null);
   var containerRef = useFocusOutsideRef(function () {
@@ -108,6 +114,9 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           ref: ref,
           variant: "secondary",
           shape: "circular",
+          role: "button",
+          "aria-controls": "".concat(id, "_dropdowncontent"),
+          "aria-activedescendant": activeDescendant,
           action: function action(event) {
             setDropdownOpen(!dropdownOpen);
 
@@ -131,6 +140,9 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return /*#__PURE__*/_jsx(TextButtonDropdownWrapper, {
           tabIndex: !disabled ? 0 : -1,
           className: cls,
+          role: "button",
+          "aria-controls": "".concat(id, "_dropdowncontent"),
+          "aria-activedescendant": activeDescendant,
           onMouseDown: defaultOnMouseDownHandler,
           onKeyDown: function onKeyDown(e) {
             if (e.key === 'Enter' || e.key === ' ') {
@@ -165,6 +177,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: containerRef,
     children: [renderButton(), /*#__PURE__*/_jsx(DropdownContent, {
       ref: dropdownRef,
+      ariaRolesType: "menu",
       containerRef: containerRef,
       customizationProps: {
         itemsType: itemsType,
@@ -180,6 +193,9 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         maxHeight: maxHeight,
         items: items
       },
+      onActiveDescendantChanged: function onActiveDescendantChanged(e) {
+        return setActiveDescendant(e);
+      },
       focused: focused,
       setFocused: setFocused,
       size: size,
@@ -193,7 +209,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setSelectedValues: setSelectedValues,
       messageOnNoResults: "No results",
       isButton: true,
-      id: "dropdown-content"
+      id: "".concat(id, "_dropdowncontent")
     })]
   });
 });

package/dist/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","names":["React","IconButton","DropdownContent","styled","defaultOnMouseDownHandler","useClickOutsideRef","useFocusOutsideRef","TextButtonDropdownArrow","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownText","TextButtonDropdownWrapper","ArrowDropDown","ArrowDropUp","Wrapper","div","DropdownButton","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","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                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\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                      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                                          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        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        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=\"dropdown-content\"\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/DropdownButtonTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButtonTypes.cjs","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps {\n  items: DropdownItem[];\n  value?: string[];\n  onClick: (value: string[]) => void;\n  disabled?: boolean;\n  size?: Size;\n  itemsType?: 'normal' | 'radio' | 'checkbox',\n  action?: () => void,\n  actionLabel?: string,\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined,\n  multiSelect?: boolean,\n  scrollable?: boolean,\n  maxHeight?: string,\n  pinTopItem?: boolean,\n  className?: string,\n  icon?: React.ReactNode;\n  width?: string;\n  alignLeft?: boolean;\n}\n\nexport type IconDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TextDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'text';\n  label?: string;\n  keepLabel?: boolean;\n}\n\nexport  type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;\n"],"mappings":""}
+{"version":3,"file":"DropdownButtonTypes.cjs","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps {\n  id?: string;\n  items: DropdownItem[];\n  value?: string[];\n  onClick: (value: string[]) => void;\n  disabled?: boolean;\n  size?: Size;\n  itemsType?: 'normal' | 'radio' | 'checkbox',\n  action?: () => void,\n  actionLabel?: string,\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined,\n  multiSelect?: boolean,\n  scrollable?: boolean,\n  maxHeight?: string,\n  pinTopItem?: boolean,\n  className?: string,\n  icon?: React.ReactNode;\n  width?: string;\n  alignLeft?: boolean;\n}\n\nexport type IconDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TextDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'text';\n  label?: string;\n  keepLabel?: boolean;\n}\n\nexport  type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;\n"],"mappings":""}

package/dist/Dropdown/DropdownButtonTypes.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { Size } from '../types';
 import { DropdownItem } from './DropdownContent';
 export interface DropdownButtonBaseProps {
+    id?: string;
     items: DropdownItem[];
     value?: string[];
     onClick: (value: string[]) => void;

package/dist/Dropdown/DropdownButtonTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButtonTypes.js","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps {\n  items: DropdownItem[];\n  value?: string[];\n  onClick: (value: string[]) => void;\n  disabled?: boolean;\n  size?: Size;\n  itemsType?: 'normal' | 'radio' | 'checkbox',\n  action?: () => void,\n  actionLabel?: string,\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined,\n  multiSelect?: boolean,\n  scrollable?: boolean,\n  maxHeight?: string,\n  pinTopItem?: boolean,\n  className?: string,\n  icon?: React.ReactNode;\n  width?: string;\n  alignLeft?: boolean;\n}\n\nexport type IconDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TextDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'text';\n  label?: string;\n  keepLabel?: boolean;\n}\n\nexport  type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;\n"],"mappings":""}
+{"version":3,"file":"DropdownButtonTypes.js","names":[],"sources":["../../src/Dropdown/DropdownButtonTypes.ts"],"sourcesContent":["import {Size} from '../types';\nimport {DropdownItem} from './DropdownContent'\n\nexport interface DropdownButtonBaseProps {\n  id?: string;\n  items: DropdownItem[];\n  value?: string[];\n  onClick: (value: string[]) => void;\n  disabled?: boolean;\n  size?: Size;\n  itemsType?: 'normal' | 'radio' | 'checkbox',\n  action?: () => void,\n  actionLabel?: string,\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined,\n  multiSelect?: boolean,\n  scrollable?: boolean,\n  maxHeight?: string,\n  pinTopItem?: boolean,\n  className?: string,\n  icon?: React.ReactNode;\n  width?: string;\n  alignLeft?: boolean;\n}\n\nexport type IconDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TextDropdownButtonProps = DropdownButtonBaseProps & {\n  type: 'text';\n  label?: string;\n  keepLabel?: boolean;\n}\n\nexport  type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;\n"],"mappings":""}

package/dist/Dropdown/DropdownContent.cjs

@@ -49,7 +49,7 @@ var MAX_MENU_HEIGHT = 240;
 var AVG_OPTION_HEIGHT = 48;
 var OFFSET_BEFORE_SHOW = 1000000;
 
-var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.dropdown, function (props) {
+var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.dropdown, function (props) {
   return props.isButton ? '-4px' : '4px 0px';
 }, function (props) {
   return "transform: translate(".concat(props.offsetLeft, ", ").concat(props.offsetTop, ");");
@@ -81,7 +81,7 @@ var ListContainer = _styledComponents.default.div(_templateObject3 || (_template
   return props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px';
 }, (0, _styles.scrollBarStyling)(_types.Size.Small));
 
-var MenuContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  h1, h2, h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) {
+var MenuContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) {
   return props.size == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
 }, function (props) {
   return props.size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500);
@@ -133,7 +133,10 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       setSelectedValues = _ref.setSelectedValues,
       messageOnNoResults = _ref.messageOnNoResults,
       outline = _ref.outline,
-      containerRef = _ref.containerRef;
+      containerRef = _ref.containerRef,
+      onActiveDescendantChanged = _ref.onActiveDescendantChanged,
+      _ref$ariaRolesType = _ref.ariaRolesType,
+      ariaRolesType = _ref$ariaRolesType === void 0 ? 'menu' : _ref$ariaRolesType;
 
   var _React$useState = _react.default.useState(false),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -181,6 +184,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
     if (outline) (_dropdownContentRef$c = dropdownContentRef.current) === null || _dropdownContentRef$c === void 0 ? void 0 : _dropdownContentRef$c.focus();
     var newFocusedElement = elRefs[index];
+    if (onActiveDescendantChanged) onActiveDescendantChanged(index == 0 ? "".concat(id, "_topitem") : "".concat(id, "_").concat(index));
     var oldFocusedElement = focused || focused === 0 ? elRefs[focused] : null;
 
     if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
@@ -235,6 +239,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       } else if (e.key === 'Escape' || e.key === 'Esc') {
         setIsOpen(false);
         setFocused(null);
+        if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
       } else if ((e.key === 'Enter' || e.key === ' ') && focused !== null && e.target !== (actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.current)) {
         e.preventDefault();
         var focusedElement = elRefs[focused];
@@ -244,6 +249,8 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
           (_focusedElement$curre = focusedElement.current) === null || _focusedElement$curre === void 0 ? void 0 : _focusedElement$curre.click();
         }
+
+        if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
       }
     }
   };
@@ -253,7 +260,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     return function () {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  });
+  }, []);
 
   var scrollPosition = _react.default.useRef(0);
 
@@ -353,6 +360,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       }
 
       setFocused(null);
+      if (onActiveDescendantChanged) onActiveDescendantChanged(undefined);
       (_dropdownContentRef$c2 = dropdownContentRef.current) === null || _dropdownContentRef$c2 === void 0 ? void 0 : _dropdownContentRef$c2.classList.remove('outline');
       (_dropdownContentRef$c3 = dropdownContentRef.current) === null || _dropdownContentRef$c3 === void 0 ? void 0 : _dropdownContentRef$c3.blur();
     } else {
@@ -384,7 +392,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
     return function () {
       window.removeEventListener('scroll', calculateOffset);
-      window.addEventListener('resize', calculateOffset);
+      window.removeEventListener('resize', calculateOffset);
     };
   }, [isOpen]);
 
@@ -428,7 +436,11 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       size: size,
       children: [customizationProps.itemsType === 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
         ref: elRefs[0],
+        role: "menuitemradio",
         iconPointerEventsTransparent: true,
+        onFocus: function onFocus(e) {
+          return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem"));
+        },
         tabIndexVal: -1,
         className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
         select: function select() {},
@@ -438,6 +450,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         selected: true
       }), customizationProps.itemsType === 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
         ref: elRefs[0],
+        role: "menuitemcheckbox",
         tabIndexVal: -1,
         className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
         select: function select(selected) {
@@ -448,6 +461,9 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
           setSelectedValues(newValues);
           if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues)) setIsOpen(false);
         },
+        onFocus: function onFocus(e) {
+          return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem"));
+        },
         iconPointerEventsTransparent: true,
         semiSelected: customizationProps.multiSelect && !allSelected && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0,
         size: size,
@@ -457,10 +473,14 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       }), customizationProps.itemsType === 'normal' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: suggestions.map(function (x) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            role: ariaRolesType == 'input' ? 'option' : 'menu',
             item: x,
             size: size,
             active: false,
             tabIndex: -1,
+            onFocus: function onFocus(e) {
+              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem"));
+            },
             className: "".concat(focused === 0 ? 'dropdown-hover' : ''),
             ref: elRefs[0],
             id: "".concat(id, "_topitem"),
@@ -500,6 +520,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
           children: [item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.RadioButton, {
+            role: "menuitemradio",
             select: function select(selected) {
               return handleItemClick(selected, item);
             },
@@ -509,10 +530,14 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
             className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
             iconPointerEventsTransparent: true,
             disabled: item === null || item === void 0 ? void 0 : item.disabled,
+            onFocus: function onFocus(e) {
+              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1));
+            },
             id: "".concat(id, "_").concat(index + 1),
             label: (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value,
             selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
           }, "key_".concat(id, "_").concat(index + 1)), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFields.Checkbox, {
+            role: "menuitemcheckbox",
             select: function select(selected) {
               return handleItemClick(selected, item);
             },
@@ -522,15 +547,22 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
             ref: elRefs[index + 1],
             size: size,
             tabIndexVal: -1,
+            onFocus: function onFocus(e) {
+              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1));
+            },
             id: "".concat(id, "_").concat(index + 1),
             label: (_item$displayLabel2 = item.displayLabel) !== null && _item$displayLabel2 !== void 0 ? _item$displayLabel2 : item.value,
             selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
           }, "key_".concat(id, "_").concat(index + 1)), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            role: ariaRolesType == 'input' ? 'option' : 'menu',
             id: "".concat(id, "_").concat(index + 1),
             item: item,
             tabIndex: -1,
             className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''),
             size: size,
+            onFocus: function onFocus(e) {
+              return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1));
+            },
             active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value),
             ref: elRefs[index + 1],
             onClickHandler: function onClickHandler(e) {
@@ -561,9 +593,11 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? isUp ? 'up' : 'down' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(DDContainer, {
+      role: ariaRolesType == "menu" ? "menu" : "optionlist",
       ref: dropdownContentRef,
       size: size,
       offsetTop: offset.top,
+      id: id,
       offsetLeft: offset.left,
       tabIndex: -1,
       isButton: isButton,
@@ -572,6 +606,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       maxHeight: customizationProps.maxHeight,
       className: cls,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ListContainer, {
+        role: "group",
         size: size,
         itemsType: customizationProps.itemsType,
         onScroll: handleScroll,
@@ -592,6 +627,7 @@ var DropdownContent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         scrollable: customizationProps.scrollable,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           width: "100%",
+          role: "menuitem",
           icon: customizationProps.actionIcon,
           ref: actionButtonRef,
           loading: customizationProps.actionLoading,
@@ -641,12 +677,14 @@ DropdownContent.propTypes = {
   id: _propTypes.default.string.isRequired,
   filter: _propTypes.default.string.isRequired,
   width: _propTypes.default.string,
+  onActiveDescendantChanged: _propTypes.default.func,
   selectedValues: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
   setSelectedValues: _propTypes.default.func.isRequired,
   messageOnNoResults: _propTypes.default.string.isRequired,
   focused: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf([null])]),
   setFocused: _propTypes.default.func.isRequired,
-  outline: _propTypes.default.bool
+  outline: _propTypes.default.bool,
+  ariaRolesType: _propTypes.default.oneOf(['input', 'menu'])
 };
 var _default = DropdownContent;
 exports.default = _default;