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

package/dist/Accordion/AccordionItem.cjs

@@ -49,7 +49,9 @@ var AccordionItem = function AccordionItem(props) {
     displaySeparator: !isActive && !isLast,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ItemHeaderContainer, _objectSpread(_objectSpread({
       role: "button",
+      "aria-expanded": isActive,
       id: "itemHeaderFor_".concat(id),
+      "aria-controls": "itemContentFor_".concat(id),
       tabIndex: !disabled ? 0 : undefined,
       onClick: function onClick() {
         if (!disabled) {
@@ -74,7 +76,7 @@ var AccordionItem = function AccordionItem(props) {
         size: "20px"
       })]
     })), isActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ItemBodyContainer, {
-      "aria-describedby": "itemHeaderFor_".concat(id),
+      id: "itemContentFor_".concat(id),
       padding: padding,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
         children: children

package/dist/Accordion/AccordionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        id={`itemHeaderFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={cls}\n        {...rest}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer aria-describedby={`itemHeaderFor_${id}`} padding={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AASA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;EAC1G,IAAQC,EAAR,GAAyGD,KAAzG,CAAQC,EAAR;EAAA,IAAYC,QAAZ,GAAyGF,KAAzG,CAAYE,QAAZ;EAAA,IAAsBC,QAAtB,GAAyGH,KAAzG,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyGJ,KAAzG,CAAgCI,KAAhC;EAAA,IAAuCC,IAAvC,GAAyGL,KAAzG,CAAuCK,IAAvC;EAAA,IAA6CC,QAA7C,GAAyGN,KAAzG,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAyGP,KAAzG,CAAuDO,MAAvD;EAAA,IAA+DC,OAA/D,GAAyGR,KAAzG,CAA+DQ,OAA/D;EAAA,IAAwEC,QAAxE,GAAyGT,KAAzG,CAAwES,QAAxE;EAAA,IAAkFC,SAAlF,GAAyGV,KAAzG,CAAkFU,SAAlF;EAAA,IAAgGC,IAAhG,0CAAyGX,KAAzG;EAEA,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,KAA8DI,SAAS,cAAOA,SAAP,IAAqB,EAA5F,CAAZ;EAEA,oBACE,sBAAC,8BAAD;IAAwB,EAAE,EAAET,EAA5B;IAAgC,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;IAAA,wBACE,sBAAC,2BAAD;MACE,IAAI,EAAC,QADP;MAEE,EAAE,0BAAmBN,EAAnB,CAFJ;MAGE,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBO,SAH5B;MAIE,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAL,EAAe;UACbJ,QAAQ,CAACD,EAAD,CAAR;QACD;MACF,CARH;MASE,SAAS,EAAE,mBAACa,CAAD,EAAY;QACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBb,QAAQ,CAACD,EAAD,CAAR;MACxB,CAXH;MAYE,WAAW,EAAEe,iCAZf;MAaE,SAAS,EAAEJ;IAbb,GAcMD,IAdN;MAAA,WAeGN,IAAI,iBAAIY,cAAA,CAAMC,YAAN,CAAmBb,IAAnB,EAA+C;QAAEc,IAAI,EAAE;MAAR,CAA/C,CAfX,eAgBE;QAAA,UAAOf;MAAP,EAhBF,EAiBGD,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,SAAb;QAAuB,KAAK,EAAEiB,QAAA,CAAOC,WAArC;QAAkD,IAAI,EAAC;MAAvD,EAAH,gBAAsE,qBAAC,kBAAD,CAAa,WAAb;QAAyB,KAAK,EAAED,QAAA,CAAOE,WAAvC;QAAoD,IAAI,EAAC;MAAzD,EAjBjF;IAAA,GADF,EAoBGnB,QAAQ,iBACP,qBAAC,yBAAD;MAAmB,4CAAmCF,EAAnC,CAAnB;MAA4D,OAAO,EAAEO,OAArE;MAAA,uBACE,qBAAC,YAAD;QAAA,UAAaC;MAAb;IADF,EArBJ;EAAA,EADF;AA4BD,CAjCD;;;EANEP,Q;EACAC,Q;EACAI,M;EACAC,O;;eAsCaT,a"}
+{"version":3,"file":"AccordionItem.cjs","names":["AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","defaultOnMouseDownHandler","React","cloneElement","size","COLORS","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        aria-expanded={isActive}\n        id={`itemHeaderFor_${id}`}\n        aria-controls={`itemContentFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={cls}\n        {...rest}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AASA,IAAMA,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;EAC1G,IAAQC,EAAR,GAAyGD,KAAzG,CAAQC,EAAR;EAAA,IAAYC,QAAZ,GAAyGF,KAAzG,CAAYE,QAAZ;EAAA,IAAsBC,QAAtB,GAAyGH,KAAzG,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyGJ,KAAzG,CAAgCI,KAAhC;EAAA,IAAuCC,IAAvC,GAAyGL,KAAzG,CAAuCK,IAAvC;EAAA,IAA6CC,QAA7C,GAAyGN,KAAzG,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAyGP,KAAzG,CAAuDO,MAAvD;EAAA,IAA+DC,OAA/D,GAAyGR,KAAzG,CAA+DQ,OAA/D;EAAA,IAAwEC,QAAxE,GAAyGT,KAAzG,CAAwES,QAAxE;EAAA,IAAkFC,SAAlF,GAAyGV,KAAzG,CAAkFU,SAAlF;EAAA,IAAgGC,IAAhG,0CAAyGX,KAAzG;EAEA,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,KAA8DI,SAAS,cAAOA,SAAP,IAAqB,EAA5F,CAAZ;EAEA,oBACE,sBAAC,8BAAD;IAAwB,EAAE,EAAET,EAA5B;IAAgC,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;IAAA,wBACE,sBAAC,2BAAD;MACE,IAAI,EAAC,QADP;MAEE,iBAAeJ,QAFjB;MAGE,EAAE,0BAAmBF,EAAnB,CAHJ;MAIE,0CAAiCA,EAAjC,CAJF;MAKE,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBO,SAL5B;MAME,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAL,EAAe;UACbJ,QAAQ,CAACD,EAAD,CAAR;QACD;MACF,CAVH;MAWE,SAAS,EAAE,mBAACa,CAAD,EAAY;QACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBb,QAAQ,CAACD,EAAD,CAAR;MACxB,CAbH;MAcE,WAAW,EAAEe,iCAdf;MAeE,SAAS,EAAEJ;IAfb,GAgBMD,IAhBN;MAAA,WAiBGN,IAAI,iBAAIY,cAAA,CAAMC,YAAN,CAAmBb,IAAnB,EAA+C;QAAEc,IAAI,EAAE;MAAR,CAA/C,CAjBX,eAkBE;QAAA,UAAOf;MAAP,EAlBF,EAmBGD,QAAQ,gBAAG,qBAAC,kBAAD,CAAa,SAAb;QAAuB,KAAK,EAAEiB,QAAA,CAAOC,WAArC;QAAkD,IAAI,EAAC;MAAvD,EAAH,gBAAsE,qBAAC,kBAAD,CAAa,WAAb;QAAyB,KAAK,EAAED,QAAA,CAAOE,WAAvC;QAAoD,IAAI,EAAC;MAAzD,EAnBjF;IAAA,GADF,EAsBGnB,QAAQ,iBACP,qBAAC,yBAAD;MAAmB,EAAE,2BAAoBF,EAApB,CAArB;MAA+C,OAAO,EAAEO,OAAxD;MAAA,uBACE,qBAAC,YAAD;QAAA,UAAaC;MAAb;IADF,EAvBJ;EAAA,EADF;AA8BD,CAnCD;;;EANEP,Q;EACAC,Q;EACAI,M;EACAC,O;;eAwCaT,a"}

package/dist/Accordion/AccordionItem.js

@@ -34,7 +34,9 @@ var AccordionItem = function AccordionItem(props) {
     displaySeparator: !isActive && !isLast,
     children: [/*#__PURE__*/_jsxs(ItemHeaderContainer, _objectSpread(_objectSpread({
       role: "button",
+      "aria-expanded": isActive,
       id: "itemHeaderFor_".concat(id),
+      "aria-controls": "itemContentFor_".concat(id),
       tabIndex: !disabled ? 0 : undefined,
       onClick: function onClick() {
         if (!disabled) {
@@ -59,7 +61,7 @@ var AccordionItem = function AccordionItem(props) {
         size: "20px"
       })]
     })), isActive && /*#__PURE__*/_jsx(ItemBodyContainer, {
-      "aria-describedby": "itemHeaderFor_".concat(id),
+      id: "itemContentFor_".concat(id),
       padding: padding,
       children: /*#__PURE__*/_jsx(ComponentS, {
         children: children

package/dist/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","cloneElement","size","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        id={`itemHeaderFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={cls}\n        {...rest}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer aria-describedby={`itemHeaderFor_${id}`} padding={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,IAAnC;AACA,SAASC,WAAT,QAA4B,UAA5B;AAEA,SAASC,sBAAT,EAAiCC,iBAAjC,EAAoDC,mBAApD,QAA+E,UAA/E;AACA,SAASC,yBAAT,QAA0C,WAA1C;;;;AASA,IAAMC,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;EAC1G,IAAQC,EAAR,GAAyGD,KAAzG,CAAQC,EAAR;EAAA,IAAYC,QAAZ,GAAyGF,KAAzG,CAAYE,QAAZ;EAAA,IAAsBC,QAAtB,GAAyGH,KAAzG,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyGJ,KAAzG,CAAgCI,KAAhC;EAAA,IAAuCC,IAAvC,GAAyGL,KAAzG,CAAuCK,IAAvC;EAAA,IAA6CC,QAA7C,GAAyGN,KAAzG,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAyGP,KAAzG,CAAuDO,MAAvD;EAAA,IAA+DC,OAA/D,GAAyGR,KAAzG,CAA+DQ,OAA/D;EAAA,IAAwEC,QAAxE,GAAyGT,KAAzG,CAAwES,QAAxE;EAAA,IAAkFC,SAAlF,GAAyGV,KAAzG,CAAkFU,SAAlF;EAAA,IAAgGC,IAAhG,4BAAyGX,KAAzG;;EAEA,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,KAA8DI,SAAS,cAAOA,SAAP,IAAqB,EAA5F,CAAZ;EAEA,oBACE,MAAC,sBAAD;IAAwB,EAAE,EAAET,EAA5B;IAAgC,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;IAAA,wBACE,MAAC,mBAAD;MACE,IAAI,EAAC,QADP;MAEE,EAAE,0BAAmBN,EAAnB,CAFJ;MAGE,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBO,SAH5B;MAIE,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAL,EAAe;UACbJ,QAAQ,CAACD,EAAD,CAAR;QACD;MACF,CARH;MASE,SAAS,EAAE,mBAACa,CAAD,EAAY;QACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBb,QAAQ,CAACD,EAAD,CAAR;MACxB,CAXH;MAYE,WAAW,EAAEH,yBAZf;MAaE,SAAS,EAAEc;IAbb,GAcMD,IAdN;MAAA,WAeGN,IAAI,iBAAId,KAAK,CAACyB,YAAN,CAAmBX,IAAnB,EAA+C;QAAEY,IAAI,EAAE;MAAR,CAA/C,CAfX,eAgBE;QAAA,UAAOb;MAAP,EAhBF,EAiBGD,QAAQ,gBAAG,KAAC,WAAD,CAAa,SAAb;QAAuB,KAAK,EAAEX,MAAM,CAAC0B,WAArC;QAAkD,IAAI,EAAC;MAAvD,EAAH,gBAAsE,KAAC,WAAD,CAAa,WAAb;QAAyB,KAAK,EAAE1B,MAAM,CAAC2B,WAAvC;QAAoD,IAAI,EAAC;MAAzD,EAjBjF;IAAA,GADF,EAoBGhB,QAAQ,iBACP,KAAC,iBAAD;MAAmB,4CAAmCF,EAAnC,CAAnB;MAA4D,OAAO,EAAEO,OAArE;MAAA,uBACE,KAAC,UAAD;QAAA,UAAaC;MAAb;IADF,EArBJ;EAAA,EADF;AA4BD,CAjCD;;;EANEP,Q;EACAC,Q;EACAI,M;EACAC,O;;AAsCF,eAAeT,aAAf"}
+{"version":3,"file":"AccordionItem.js","names":["React","COLORS","ComponentS","SystemIcons","AccordionItemContainer","ItemBodyContainer","ItemHeaderContainer","defaultOnMouseDownHandler","AccordionItem","props","id","onSelect","isActive","title","icon","disabled","isLast","padding","children","className","rest","cls","undefined","e","key","cloneElement","size","neutral_800","neutral_600"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS, ComponentS } from '..';\nimport { SystemIcons } from '../icons';\nimport { AccordionItemProps } from './AccordionMenu';\nimport { AccordionItemContainer, ItemBodyContainer, ItemHeaderContainer } from './styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface AccordionItemPropsInner extends AccordionItemProps {\n  onSelect: (id: string) => void;\n  isActive: boolean;\n  isLast: boolean;\n  padding?: string;\n}\n\nconst AccordionItem: React.FunctionComponent<AccordionItemPropsInner> = (props: AccordionItemPropsInner) => {\n  const { id, onSelect, isActive, title, icon, disabled, isLast, padding, children, className, ...rest } = props;\n\n  const cls = (isActive ? 'active' : '') + (disabled ? ' disabled' : '') + (className ? ` ${className}` : '');\n\n  return (\n    <AccordionItemContainer id={id} displaySeparator={!isActive && !isLast}>\n      <ItemHeaderContainer\n        role=\"button\"\n        aria-expanded={isActive}\n        id={`itemHeaderFor_${id}`}\n        aria-controls={`itemContentFor_${id}`}\n        tabIndex={!disabled ? 0 : undefined}\n        onClick={() => {\n          if (!disabled) {\n            onSelect(id);\n          }\n        }}\n        onKeyDown={(e: any) => {\n          if (e.key === 'Enter') onSelect(id);\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        className={cls}\n        {...rest}>\n        {icon && React.cloneElement(icon as React.ReactElement, { size: '24px' })}\n        <span>{title}</span>\n        {isActive ? <SystemIcons.ChevronUp color={COLORS.neutral_800} size=\"20px\" /> : <SystemIcons.ChevronDown color={COLORS.neutral_600} size=\"20px\" />}\n      </ItemHeaderContainer>\n      {isActive && (\n        <ItemBodyContainer id={`itemContentFor_${id}`} padding={padding}>\n          <ComponentS>{children}</ComponentS>\n        </ItemBodyContainer>\n      )}\n    </AccordionItemContainer>\n  );\n};\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,EAAiBC,UAAjB,QAAmC,IAAnC;AACA,SAASC,WAAT,QAA4B,UAA5B;AAEA,SAASC,sBAAT,EAAiCC,iBAAjC,EAAoDC,mBAApD,QAA+E,UAA/E;AACA,SAASC,yBAAT,QAA0C,WAA1C;;;;AASA,IAAMC,aAA+D,GAAG,SAAlEA,aAAkE,CAACC,KAAD,EAAoC;EAC1G,IAAQC,EAAR,GAAyGD,KAAzG,CAAQC,EAAR;EAAA,IAAYC,QAAZ,GAAyGF,KAAzG,CAAYE,QAAZ;EAAA,IAAsBC,QAAtB,GAAyGH,KAAzG,CAAsBG,QAAtB;EAAA,IAAgCC,KAAhC,GAAyGJ,KAAzG,CAAgCI,KAAhC;EAAA,IAAuCC,IAAvC,GAAyGL,KAAzG,CAAuCK,IAAvC;EAAA,IAA6CC,QAA7C,GAAyGN,KAAzG,CAA6CM,QAA7C;EAAA,IAAuDC,MAAvD,GAAyGP,KAAzG,CAAuDO,MAAvD;EAAA,IAA+DC,OAA/D,GAAyGR,KAAzG,CAA+DQ,OAA/D;EAAA,IAAwEC,QAAxE,GAAyGT,KAAzG,CAAwES,QAAxE;EAAA,IAAkFC,SAAlF,GAAyGV,KAAzG,CAAkFU,SAAlF;EAAA,IAAgGC,IAAhG,4BAAyGX,KAAzG;;EAEA,IAAMY,GAAG,GAAG,CAACT,QAAQ,GAAG,QAAH,GAAc,EAAvB,KAA8BG,QAAQ,GAAG,WAAH,GAAiB,EAAvD,KAA8DI,SAAS,cAAOA,SAAP,IAAqB,EAA5F,CAAZ;EAEA,oBACE,MAAC,sBAAD;IAAwB,EAAE,EAAET,EAA5B;IAAgC,gBAAgB,EAAE,CAACE,QAAD,IAAa,CAACI,MAAhE;IAAA,wBACE,MAAC,mBAAD;MACE,IAAI,EAAC,QADP;MAEE,iBAAeJ,QAFjB;MAGE,EAAE,0BAAmBF,EAAnB,CAHJ;MAIE,0CAAiCA,EAAjC,CAJF;MAKE,QAAQ,EAAE,CAACK,QAAD,GAAY,CAAZ,GAAgBO,SAL5B;MAME,OAAO,EAAE,mBAAM;QACb,IAAI,CAACP,QAAL,EAAe;UACbJ,QAAQ,CAACD,EAAD,CAAR;QACD;MACF,CAVH;MAWE,SAAS,EAAE,mBAACa,CAAD,EAAY;QACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuBb,QAAQ,CAACD,EAAD,CAAR;MACxB,CAbH;MAcE,WAAW,EAAEH,yBAdf;MAeE,SAAS,EAAEc;IAfb,GAgBMD,IAhBN;MAAA,WAiBGN,IAAI,iBAAId,KAAK,CAACyB,YAAN,CAAmBX,IAAnB,EAA+C;QAAEY,IAAI,EAAE;MAAR,CAA/C,CAjBX,eAkBE;QAAA,UAAOb;MAAP,EAlBF,EAmBGD,QAAQ,gBAAG,KAAC,WAAD,CAAa,SAAb;QAAuB,KAAK,EAAEX,MAAM,CAAC0B,WAArC;QAAkD,IAAI,EAAC;MAAvD,EAAH,gBAAsE,KAAC,WAAD,CAAa,WAAb;QAAyB,KAAK,EAAE1B,MAAM,CAAC2B,WAAvC;QAAoD,IAAI,EAAC;MAAzD,EAnBjF;IAAA,GADF,EAsBGhB,QAAQ,iBACP,KAAC,iBAAD;MAAmB,EAAE,2BAAoBF,EAApB,CAArB;MAA+C,OAAO,EAAEO,OAAxD;MAAA,uBACE,KAAC,UAAD;QAAA,UAAaC;MAAb;IADF,EAvBJ;EAAA,EADF;AA8BD,CAnCD;;;EANEP,Q;EACAC,Q;EACAI,M;EACAC,O;;AAwCF,eAAeT,aAAf"}

package/dist/Accordion/ContentAccordion.cjs

@@ -148,6 +148,8 @@ var ContentAccordion = function ContentAccordion(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemHeader, _objectSpread(_objectSpread({
         role: "button",
         id: "headerFor_".concat(id),
+        "aria-expanded": isActive,
+        "aria-controls": "itemContentFor_".concat(id),
         tabIndex: !disabled ? 0 : undefined,
         onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
@@ -163,7 +165,7 @@ var ContentAccordion = function ContentAccordion(_ref) {
           children: title
         })]
       })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentAccordionItemContent, {
-        "aria-describedby": "headerFor_".concat(id),
+        id: "itemContentFor_".concat(id),
         children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentHeader, {
           children: header
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentAccordionItemContentBody, {

package/dist/Accordion/ContentAccordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.cjs","names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ParagraphSStyling","ParagraphTextStyle","ComponentMStyling","ParagraphMStyling","ComponentLStyling","ParagraphLStyling","ContentAccordion","items","multi","size","Size","Medium","className","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ParagraphLStyling,\n  ParagraphMStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent aria-describedby={`headerFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
+{"version":3,"file":"ContentAccordion.cjs","names":["ContentAccordionItemHeader","styled","div","COLORS","neutral_600","primary_700","primary_20","Z_INDEXES","hover","focusStyles","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","ComponentSStyling","ComponentTextStyle","Regular","Bold","black","ParagraphSStyling","ParagraphTextStyle","ComponentMStyling","ParagraphMStyling","ComponentLStyling","ParagraphLStyling","ContentAccordion","items","multi","size","Size","Medium","className","rest","React","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","defaultOnMouseDownHandler","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ParagraphLStyling,\n  ParagraphMStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}

package/dist/Accordion/ContentAccordion.js

@@ -99,6 +99,8 @@ export var ContentAccordion = function ContentAccordion(_ref) {
       children: [/*#__PURE__*/_jsxs(ContentAccordionItemHeader, _objectSpread(_objectSpread({
         role: "button",
         id: "headerFor_".concat(id),
+        "aria-expanded": isActive,
+        "aria-controls": "itemContentFor_".concat(id),
         tabIndex: !disabled ? 0 : undefined,
         onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
@@ -114,7 +116,7 @@ export var ContentAccordion = function ContentAccordion(_ref) {
           children: title
         })]
       })), /*#__PURE__*/_jsxs(ContentAccordionItemContent, {
-        "aria-describedby": "headerFor_".concat(id),
+        id: "itemContentFor_".concat(id),
         children: [header && /*#__PURE__*/_jsx(ContentAccordionItemContentHeader, {
           children: header
         }), /*#__PURE__*/_jsx(ContentAccordionItemContentBody, {

package/dist/Accordion/ContentAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","items","multi","size","Medium","className","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ParagraphLStyling,\n  ParagraphMStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent aria-describedby={`headerFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}
+{"version":3,"file":"ContentAccordion.js","names":["React","styled","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ParagraphLStyling","ParagraphMStyling","ParagraphSStyling","ParagraphTextStyle","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","ContentAccordionItemHeader","div","neutral_600","primary_700","primary_20","hover","primary_800","primary_100","active","ContentAccordionItemHeaderIcon","ContentAccordionItemHeaderText","ContentAccordionItemContent","ContentAccordionItemContentHeader","ContentAccordionItemContentBody","ContentAccordionItemContentFooter","ContentAccordionItem","neutral_100","neutral_300","ContentAccordionWrapper","Regular","Bold","black","ContentAccordion","items","multi","size","Medium","className","rest","useState","opened","setOpened","useEffect","filter","item","map","id","find","onItemClick","disabled","includes","key","renderItem","title","header","body","footer","isActive","concat","undefined","event","cls","trim"],"sources":["../../src/Accordion/ContentAccordion.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {Size} from '../types';\nimport {SystemIcons} from '../icons';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ParagraphLStyling,\n  ParagraphMStyling,\n  ParagraphSStyling,\n  ParagraphTextStyle,\n} from '../styles/typography';\nimport {COLORS, focusStyles} from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nexport const ContentAccordionItemHeader = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 48px;\n  color: ${COLORS.neutral_600};\n  cursor: pointer;\n\n  &:hover {\n    color: ${COLORS.primary_700};\n    background-color: ${COLORS.primary_20};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    z-index: ${Z_INDEXES.active};\n  }\n`;\n\nexport const ContentAccordionItemHeaderIcon = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const ContentAccordionItemHeaderText = styled.div``;\n\nexport const ContentAccordionItemContent = styled.div`\n  display: none;\n  flex-direction: column;\n`;\n\nexport const ContentAccordionItemContentHeader = styled.div``;\n\nexport const ContentAccordionItemContentBody = styled.div``;\n\nexport const ContentAccordionItemContentFooter = styled.div``;\n\nexport const ContentAccordionItem = styled.div`\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid ${COLORS.neutral_100};\n\n  &.active {\n    ${ContentAccordionItemContent} {\n      display: flex;\n    }\n  }\n\n  &.disabled {\n    ${ContentAccordionItemHeader} {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  }\n`;\n\nexport const ContentAccordionWrapper = styled.div`\n  width: 100%;\n  position: relative;\n\n  ${ContentAccordionItem}:last-child {\n    border-bottom: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.small {\n    min-width: 320px;\n    max-width: 528px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 8px;\n      padding: 0 8px;\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 0 8px 16px 40px;\n      gap: 8px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphSStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.medium {\n    min-width: 344px;\n    max-width: 584px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 12px;\n      padding: 0 12px;\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 8px 12px 24px 48px;\n      gap: 12px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphMStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n\n  &.large {\n    min-width: 384px;\n    max-width: 656px;\n\n    ${ContentAccordionItemHeader} {\n      gap: 16px;\n      padding: 0 16px;\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${ContentAccordionItemContent} {\n      padding: 16px 16px 32px 56px;\n      gap: 16px;\n\n      ${ContentAccordionItemContentHeader} {\n        ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n      }\n\n      ${ContentAccordionItemContentBody} {\n        ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.black)}\n      }\n    }\n  }\n`;\n\nexport interface ContentAccordionItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {\n  id: string;\n  title: string;\n  header?: string;\n  body: any;\n  footer?: any;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nexport interface ContentAccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ContentAccordionItem[];\n  multi?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n}\n\nexport const ContentAccordion: React.FunctionComponent<ContentAccordionProps> = ({\n                                                                                   items,\n                                                                                   multi = false,\n                                                                                   size = Size.Medium,\n                                                                                   className,\n                                                                                   ...rest\n                                                                                 }) => {\n  const [opened, setOpened] = React.useState<string[]>([]);\n\n  React.useEffect(() => {\n    if (multi) {\n      setOpened(items.filter((item) => item.active).map((item) => item.id));\n    } else {\n      let active = items.find((item) => !!item.active)?.id;\n      if (active) {\n        setOpened([active]);\n      }\n    }\n  }, [items, multi]);\n\n  const onItemClick = (item: ContentAccordionItem) => {\n    if (item.disabled) return;\n    if (opened.includes(item.id)) {\n      setOpened(opened.filter((key) => key !== item.id));\n    } else {\n      if (multi) {\n        setOpened([...opened, item.id]);\n      } else {\n        setOpened([item.id]);\n      }\n    }\n  };\n\n  const renderItem = (item: ContentAccordionItem) => {\n    const {id, title, header, body, footer, disabled, active, ...rest} = item;\n    const isActive = opened.includes(id);\n\n    return (\n      <ContentAccordionItem key={id} id={`item_${id}`}\n                            className={''.concat(isActive ? ' active' : '').concat(item.disabled ? ' disabled' : '')}>\n        <ContentAccordionItemHeader\n          role=\"button\"\n          id={`headerFor_${id}`}\n          aria-expanded={isActive}\n          aria-controls={`itemContentFor_${id}`}\n          tabIndex={!disabled ? 0 : undefined}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onItemClick(item)}\n          onKeyDown={(event) => event.key === 'Enter' && onItemClick(item)}\n          {...rest}>\n          <ContentAccordionItemHeaderIcon>\n            {multi ? isActive ? <SystemIcons.Minus/> : <SystemIcons.Plus/> : isActive ?\n              <SystemIcons.ChevronDown/> : <SystemIcons.ChevronRight/>}\n          </ContentAccordionItemHeaderIcon>\n          <ContentAccordionItemHeaderText>{title}</ContentAccordionItemHeaderText>\n        </ContentAccordionItemHeader>\n        <ContentAccordionItemContent id={`itemContentFor_${id}`}>\n          {header && <ContentAccordionItemContentHeader>{header}</ContentAccordionItemContentHeader>}\n          <ContentAccordionItemContentBody>{body}</ContentAccordionItemContentBody>\n          {footer && <ContentAccordionItemContentFooter>{footer}</ContentAccordionItemContentFooter>}\n        </ContentAccordionItemContent>\n      </ContentAccordionItem>\n    );\n  };\n\n  const cls = `${size} ${className ?? ''}`.trim();\n\n  return <ContentAccordionWrapper className={cls}>\n    {items.map((item) => renderItem(item))}\n  </ContentAccordionWrapper>;\n};\n\nexport default ContentAccordion;\n"],"mappings":"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"}

package/dist/Dropdown/BasicDropdown.cjs

@@ -201,6 +201,11 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.Dropdown, {
       ref: containerRef,
+      "aria-expanded": isOpen ? true : false,
+      "aria-activedescendant": activeDescendant,
+      "aria-controls": "".concat(id, "_dropdowncontent"),
+      role: "listbox",
+      "aria-multiselectable": props.multiSelect,
       isButton: isButton || false,
       className: size ? size : '',
       readOnly: readOnly,
@@ -235,11 +240,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
         onKeyDown: handleKeyDown,
-        minWidth: minWidth,
-        "aria-activedescendant": activeDescendant,
-        "aria-owns": "".concat(id, "_dropdowncontent"),
-        role: "listbox",
-        "aria-multiselectable": props.multiSelect
+        minWidth: minWidth
       }, rest), {}, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, {
           ref: inputRef,

package/dist/Dropdown/BasicDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.cjs","names":["BasicDropdown","React","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","onSelect","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","useFocusVisibleRef","dropdownRef","resetDropdown","containerRef","useFocusOutsideRef","useClickOutsideRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\nimport numberField from '../InputFields/NumberField';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin = '4px 0',\n    minWidth,\n    className,\n    onBlur,\n    onSelect,\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!readOnly && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}\n          aria-activedescendant={activeDescendant}\n          aria-owns={`${id}_dropdowncontent`}\n          role=\"listbox\"\n          aria-multiselectable={props.multiSelect}\n          {...rest}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!readOnly && !disabled && (\n          <DropdownContent\n            ref={dropdownRef}\n            containerRef={containerRef}\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: props.multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            ariaRolesType=\"input\"\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n            setSelectedValues={handleValueSelect}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":"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"}
+{"version":3,"file":"BasicDropdown.cjs","names":["BasicDropdown","React","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","onSelect","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","useFocusVisibleRef","dropdownRef","resetDropdown","containerRef","useFocusOutsideRef","useClickOutsideRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\nimport numberField from '../InputFields/NumberField';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin = '4px 0',\n    minWidth,\n    className,\n    onBlur,\n    onSelect,\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                aria-expanded={isOpen ? true : false}\n                aria-activedescendant={activeDescendant}\n                aria-controls={`${id}_dropdowncontent`}\n                role=\"listbox\"\n                aria-multiselectable={props.multiSelect}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!readOnly && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}\n          {...rest}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!readOnly && !disabled && (\n          <DropdownContent\n            ref={dropdownRef}\n            containerRef={containerRef}\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: props.multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            ariaRolesType=\"input\"\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n            setSelectedValues={handleValueSelect}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":"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"}

package/dist/Dropdown/BasicDropdown.js

@@ -176,6 +176,11 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(Dropdown, {
       ref: containerRef,
+      "aria-expanded": isOpen ? true : false,
+      "aria-activedescendant": activeDescendant,
+      "aria-controls": "".concat(id, "_dropdowncontent"),
+      role: "listbox",
+      "aria-multiselectable": props.multiSelect,
       isButton: isButton || false,
       className: size ? size : '',
       readOnly: readOnly,
@@ -210,11 +215,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
         onKeyDown: handleKeyDown,
-        minWidth: minWidth,
-        "aria-activedescendant": activeDescendant,
-        "aria-owns": "".concat(id, "_dropdowncontent"),
-        role: "listbox",
-        "aria-multiselectable": props.multiSelect
+        minWidth: minWidth
       }, rest), {}, {
         children: [/*#__PURE__*/_jsx(InputField, {
           ref: inputRef,

package/dist/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicDropdown.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","onSelect","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","dropdownRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\nimport numberField from '../InputFields/NumberField';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin = '4px 0',\n    minWidth,\n    className,\n    onBlur,\n    onSelect,\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!readOnly && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}\n          aria-activedescendant={activeDescendant}\n          aria-owns={`${id}_dropdowncontent`}\n          role=\"listbox\"\n          aria-multiselectable={props.multiSelect}\n          {...rest}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!readOnly && !disabled && (\n          <DropdownContent\n            ref={dropdownRef}\n            containerRef={containerRef}\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: props.multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            ariaRolesType=\"input\"\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n            setSelectedValues={handleValueSelect}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":"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"}
+{"version":3,"file":"BasicDropdown.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","Dropdown","StyledField","InputField","DropdownContent","AutofilledMessage","ErrorMessage","Size","defaultOnMouseDownHandler","useClickOutsideRef","useFocusVisibleRef","useFocusOutsideRef","BasicDropdown","forwardRef","props","ref","id","list","placeholder","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","minWidth","className","onBlur","onSelect","rest","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","isLoading","setIsLoading","input","setInput","focused","setFocused","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","dropdownRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","multiSelect","undefined","current","focus","focusVisible","useEffect","value","useImperativeHandle","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","l","displayLabel","handleBlur","currentTarget","contains","relatedTarget","cls","concat","stopPropagation","blur","Small","neutral_600","onValueUpdate","items","critical_400","disableSorting"],"sources":["../../src/Dropdown/BasicDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\nimport numberField from '../InputFields/NumberField';\n\ninterface BasicDropdownCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'>{\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  minWidth?: string;\n}\n\ntype DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {\n  multiSelect: true;\n  value?: string[];\n  onSelect: (value: string[]) => void;\n}\n\ntype DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {\n  multiSelect?: false;\n  value?: string;\n  onSelect: (value: string) => void;\n}\n\ntype DropdownFilterProps = DropdownFilterSingleSelectProps | DropdownFilterMultiSelectProps;\n\nconst BasicDropdown = React.forwardRef((props: DropdownFilterProps, ref) => {\n  const {\n    id,\n    list,\n    placeholder,\n    messageOnNoResults,\n    itemsType = 'normal',\n    action,\n    actionLabel,\n    actionVariant,\n    actionIcon,\n    actionLoading,\n    actionDisabled,\n    pinTopItem,\n    scrollable = true,\n    maxHeight,\n    disabled,\n    readOnly,\n    isButton,\n    activeValidationMessage,\n    autofilledMessage,\n    size,\n    margin = '4px 0',\n    minWidth,\n    className,\n    onBlur,\n    onSelect,\n    ...rest\n  } = props;\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);\n\n  useClickOutsideRef(resetDropdown, [], containerRef);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n\n    if (props.multiSelect === true) {\n      props.onSelect(values);\n    } else if (props.multiSelect === false || props.multiSelect === undefined) {\n      props.onSelect(values[0]);\n    }\n\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || props.multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (props.value) {\n      if (props.multiSelect) {\n        setInput(props.value.join(', '));\n      } else if (props.multiSelect === false || props.multiSelect === undefined) {\n        setInput(props.value);\n      }\n    } else {\n      setInput('');\n    }\n  }, [props.value, props.multiSelect]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');\n  \n  return (\n    <>\n      <Dropdown ref={containerRef}\n                aria-expanded={isOpen ? true : false}\n                aria-activedescendant={activeDescendant}\n                aria-controls={`${id}_dropdowncontent`}\n                role=\"listbox\"\n                aria-multiselectable={props.multiSelect}\n                isButton={isButton || false}\n                className={size ? size : ''}\n                readOnly={readOnly}\n                disabled={disabled}\n                margin={margin}\n                onBlur={handleBlur}\n                minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={cls}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!readOnly && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}\n          {...rest}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!readOnly && !disabled && (\n          <DropdownContent\n            ref={dropdownRef}\n            containerRef={containerRef}\n            onActiveDescendantChanged={(id) => setActiveDescendant(id)}\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: props.multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            ariaRolesType=\"input\"\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={props.multiSelect ? props.value || [] : [props.value || '']}\n            setSelectedValues={handleValueSelect}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default BasicDropdown;\n"],"mappings":"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"}

package/dist/Dropdown/DropdownButton.cjs

@@ -129,7 +129,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) {
@@ -155,7 +155,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.TextButtonDropdownWrapper, {
           tabIndex: !disabled ? 0 : -1,
           className: cls,
-          role: "menu",
+          role: "button",
           "aria-controls": "".concat(id, "_dropdowncontent"),
           "aria-activedescendant": activeDescendant,
           onMouseDown: _common.defaultOnMouseDownHandler,