@laerdal/life-react-components 1.11.0-dev.28 → 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/AuthPage/AuthPage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type AuthPageProps = {
     /** set this to 'false' to hide the left side illustration/information section */
     showInformationSection: boolean;

package/dist/Button/DualFunctionButton.cjs

@@ -27,6 +27,8 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _CommonStyling = require("../Dropdown/CommonStyling");
 
+var _nanoid = require("nanoid");
+
 var _types = require("../types");
 
 var _DropdownContent = _interopRequireDefault(require("../Dropdown/DropdownContent"));
@@ -111,6 +113,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
   }, [dropdownContainerRef], (0, _common.useFocusOutsideRef)(function () {
     return setIsOpen(false);
   }, [dropdownContentRef]));
+  var dropdownContentId = id ? id + '_dropdownContent' : (0, _nanoid.nanoid)();
   React.useEffect(function () {
     !isOpen && setKeyboardNavigated(false);
   }, [isOpen]);
@@ -150,7 +153,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
         size: size,
         outline: keyboardNavigated,
         isOpen: isOpen,
-        id: id !== null && id !== void 0 ? id : 'dropdownId',
+        id: dropdownContentId,
         messageOnNoResults: "",
         alignLeft: true,
         ariaRolesType: "menu"
@@ -168,8 +171,9 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       },
       testId: 'options_toggleBtn',
       ref: dropdownButtonRef,
-      "aria-activeDescendant": activeDescendant,
-      role: "menu",
+      "aria-activedescendant": activeDescendant,
+      role: "button",
+      "aria-controls": dropdownContentId,
       disabled: disabled,
       type: type,
       size: size,

package/dist/Button/DualFunctionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.cjs","names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={id ?? 'dropdownId'}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activeDescendant={activeDescendant}\n        role=\"menu\"\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
+{"version":3,"file":"DualFunctionButton.cjs","names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}

package/dist/Button/DualFunctionButton.js

@@ -16,6 +16,7 @@ import * as React from 'react';
 import Button from './Button';
 import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
 import { Dropdown } from '../Dropdown/CommonStyling';
+import { nanoid } from 'nanoid';
 import { Size } from '../types';
 import DropdownContent from '../Dropdown/DropdownContent';
 import styled from 'styled-components';
@@ -84,6 +85,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
   }, [dropdownContainerRef], useFocusOutsideRef(function () {
     return setIsOpen(false);
   }, [dropdownContentRef]));
+  var dropdownContentId = id ? id + '_dropdownContent' : nanoid();
   React.useEffect(function () {
     !isOpen && setKeyboardNavigated(false);
   }, [isOpen]);
@@ -123,7 +125,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
         size: size,
         outline: keyboardNavigated,
         isOpen: isOpen,
-        id: id !== null && id !== void 0 ? id : 'dropdownId',
+        id: dropdownContentId,
         messageOnNoResults: "",
         alignLeft: true,
         ariaRolesType: "menu"
@@ -141,8 +143,9 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       },
       testId: 'options_toggleBtn',
       ref: dropdownButtonRef,
-      "aria-activeDescendant": activeDescendant,
-      role: "menu",
+      "aria-activedescendant": activeDescendant,
+      role: "button",
+      "aria-controls": dropdownContentId,
       disabled: disabled,
       type: type,
       size: size,

package/dist/Button/DualFunctionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={id ?? 'dropdownId'}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activeDescendant={activeDescendant}\n        role=\"menu\"\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAoC,UAApC;AACA,SAASC,aAAT,EAAwBC,WAAxB,QAA2C,kCAA3C;AACA,SAASC,QAAT,QAAyB,2BAAzB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,OAAOC,eAAP,MAA4D,6BAA5D;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,EAA6BC,kBAA7B,QAAuD,WAAvD;;;AAEA,IAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAV,2OAUP,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,IAAN,IAAcR,IAAI,CAACS,KAAnB,GAA2B,UAA3B,GAAwCF,KAAK,CAACC,IAAN,IAAcR,IAAI,CAACU,MAAnB,GAA4B,UAA5B,GAAyC,UAA7F;AAAA,CAVO,CAAtB;;AAwBA,IAAMC,kBAA4D,GAAG,SAA/DA,kBAA+D,OAa/D;EAAA,yBAZJC,QAYI;EAAA,IAZJA,QAYI,8BAZO,gBAYP;EAAA,wBAXJC,OAWI;EAAA,IAXJA,OAWI,6BAXM,SAWN;EAAA,qBAVJC,IAUI;EAAA,IAVJA,IAUI,0BAVG,QAUH;EAAA,qBATJN,IASI;EAAA,IATJA,IASI,0BATGR,IAAI,CAACU,MASR;EAAA,sBARJK,KAQI;EAAA,IARJA,KAQI,2BARI,MAQJ;EAAA,IAPJC,MAOI,QAPJA,MAOI;EAAA,IANJC,QAMI,QANJA,QAMI;EAAA,IALJC,EAKI,QALJA,EAKI;EAAA,IAJJC,kBAII,QAJJA,kBAII;EAAA,IAHJC,qBAGI,QAHJA,qBAGI;EAAA,IAFJC,0BAEI,QAFJA,0BAEI;EAAA,IADDd,KACC;;EACJ;EACA,IAAQe,OAAR,GAAmDf,KAAnD,CAAQe,OAAR;EAAA,IAAiBC,IAAjB,GAAmDhB,KAAnD,CAAiBgB,IAAjB;EAAA,IAAuBC,OAAvB,GAAmDjB,KAAnD,CAAuBiB,OAAvB;EAAA,IAAmCC,WAAnC,4BAAmDlB,KAAnD;;EACA,sBAA4BZ,KAAK,CAAC+B,QAAN,CAAwB,KAAxB,CAA5B;EAAA;EAAA,IAAOC,MAAP;EAAA,IAAeC,SAAf;;EACA,uBAAgDjC,KAAK,CAAC+B,QAAN,EAAhD;EAAA;EAAA,IAAOG,gBAAP;EAAA,IAAyBC,mBAAzB;;EACA,uBAA8BnC,KAAK,CAAC+B,QAAN,CAA8B,IAA9B,CAA9B;EAAA;EAAA,IAAOK,OAAP;EAAA,IAAgBC,UAAhB;;EACA,uBAAkDrC,KAAK,CAAC+B,QAAN,CAAwB,KAAxB,CAAlD;EAAA;EAAA,IAAOO,iBAAP;EAAA,IAA0BC,oBAA1B;;EACA,IAAMC,oBAAoB,GAAGxC,KAAK,CAACyC,MAAN,CAA6B,IAA7B,CAA7B;;EACA,uBAA4CzC,KAAK,CAAC+B,QAAN,CAAyB,EAAzB,CAA5C;EAAA;EAAA,IAAOW,cAAP;EAAA,IAAuBC,iBAAvB;;EAEA,IAAMC,kBAAkB,GAAG5C,KAAK,CAACyC,MAAN,CAA6B,IAA7B,CAA3B;EACA,IAAMI,iBAAiB,GAAGrC,kBAAkB,CAC1C;IAAA,OAAMyB,SAAS,CAAC,KAAD,CAAf;EAAA,CAD0C,EAE1C,CAACO,oBAAD,CAF0C,EAG1C/B,kBAAkB,CAAC;IAAA,OAAMwB,SAAS,CAAC,KAAD,CAAf;EAAA,CAAD,EAAyB,CAACW,kBAAD,CAAzB,CAHwB,CAA5C;EAMA5C,KAAK,CAAC8C,SAAN,CAAgB,YAAM;IACpB,CAACd,MAAD,IAAWO,oBAAoB,CAAC,KAAD,CAA/B;EACD,CAFD,EAEG,CAACP,MAAD,CAFH;EAIA,oBACE,MAAC,gBAAD;IAAkB,GAAG,EAAEQ,oBAAvB;IAA6C,IAAI,EAAE3B,IAAnD;IAAA,wBACE,MAAC,QAAD;MAAU,QAAQ,EAAE,IAApB;MAA0B,QAAQ,EAAE,KAApC;MAA2C,QAAQ,EAAE,KAArD;MAA4D,MAAM,EAAC,EAAnE;MAAA,wBACE,KAAC,MAAD,kCAAYiB,WAAZ;QAAyB,OAAO,EAAED,OAAlC;QAA2C,QAAQ,EAAEP,QAArD;QAA+D,IAAI,EAAEH,IAArE;QAA2E,OAAO,EAAEQ,OAApF;QAA6F,IAAI,EAAEC,IAAnG;QAAyG,IAAI,EAAEf,IAA/G;QAAqH,KAAK,EAAEO,KAA5H;QAAmI,OAAO,EAAEF,OAA5I;QAAqJ,QAAQ,EAAC,OAA9J;QAAA,UACGD;MADH,GADF,eAIE,KAAC,eAAD;QACE,YAAY,EAAEuB,oBADhB;QAEE,kBAAkB,EAAEd,0BAFtB;QAGE,MAAM,EAAC,EAHT;QAIE,GAAG,EAAEkB,kBAJP;QAKE,cAAc,EAAElB,0BAA0B,CAACqB,SAA3B,IAAwC,QAAxC,GAAmD,EAAnD,GAAwDvB,kBAAxD,aAAwDA,kBAAxD,cAAwDA,kBAAxD,GAA8EkB,cALhG;QAME,iBAAiB,EAAEjB,qBAAqB,GAAGA,qBAAH,GAA2BkB,iBANrE;QAOE,QAAQ,EAAE,IAPZ;QAQE,SAAS,EAAEV,SARb;QASE,OAAO,EAAEG,OATX;QAUE,yBAAyB,EAAE,mCAACY,CAAD;UAAA,OAAOb,mBAAmB,CAACa,CAAD,CAA1B;QAAA,CAV7B;QAWE,UAAU,EAAEX,UAXd;QAYE,IAAI,EAAExB,IAZR;QAaE,OAAO,EAAEyB,iBAbX;QAcE,MAAM,EAAEN,MAdV;QAeE,EAAE,EAAET,EAAF,aAAEA,EAAF,cAAEA,EAAF,GAAQ,YAfZ;QAgBE,kBAAkB,EAAC,EAhBrB;QAiBE,SAAS,EAAE,IAjBb;QAkBE,aAAa,EAAC;MAlBhB,EAJF;IAAA,EADF,eA0BE,KAAC,MAAD;MACE,OAAO,EAAEL;IADX,GAEMY,WAFN;MAGE,UAAU,EAAE,oBAACkB,CAAD,EAAY;QACtB,IAAIhB,MAAJ,EAAY;;QAEZ,IAAIgB,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;UACtCZ,UAAU,CAAC,CAAD,CAAV;UACAE,oBAAoB,CAAC,IAAD,CAApB;QACD;MACF,CAVH;MAWE,MAAM,EAAE,mBAXV;MAYE,GAAG,EAAEM,iBAZP;MAaE,yBAAuBX,gBAbzB;MAcE,IAAI,EAAC,MAdP;MAeE,QAAQ,EAAEZ,QAfZ;MAgBE,IAAI,EAAEH,IAhBR;MAiBE,IAAI,EAAEN,IAjBR;MAkBE,QAAQ,EAAE,OAlBZ;MAmBE,OAAO,EAAE,iBAACmC,CAAD,EAAO;QACdA,CAAC,CAACE,eAAF;QACAjB,SAAS,CAAC,CAACD,MAAF,CAAT;MACD,CAtBH;MAuBE,IAAI,EAAEA,MAAM,gBAAG,KAAC,WAAD;QAAa,IAAI,EAAC;MAAlB,EAAH,gBAAiC,KAAC,aAAD;QAAe,IAAI,EAAC;MAApB,EAvB/C;MAwBE,QAAQ,EAAC;IAxBX,GA1BF;EAAA,EADF;AAuDD,CAzFD;;;EAJER,kB;EACAC,qB;;AA8FF,eAAeT,kBAAf"}
+{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\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,10 +240,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
         onKeyDown: handleKeyDown,
-        minWidth: minWidth,
-        "aria-activedescendant": activeDescendant,
-        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          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":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AA2CA,IAAMA,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAiB,UAACC,KAAD,EAA6BC,GAA7B,EAAqC;EAC1E,IACEC,EADF,GA2BIF,KA3BJ,CACEE,EADF;EAAA,IAEEC,IAFF,GA2BIH,KA3BJ,CAEEG,IAFF;EAAA,IAGEC,WAHF,GA2BIJ,KA3BJ,CAGEI,WAHF;EAAA,IAIEC,kBAJF,GA2BIL,KA3BJ,CAIEK,kBAJF;EAAA,uBA2BIL,KA3BJ,CAKEM,SALF;EAAA,IAKEA,SALF,iCAKc,QALd;EAAA,IAMEC,MANF,GA2BIP,KA3BJ,CAMEO,MANF;EAAA,IAOEC,WAPF,GA2BIR,KA3BJ,CAOEQ,WAPF;EAAA,IAQEC,aARF,GA2BIT,KA3BJ,CAQES,aARF;EAAA,IASEC,UATF,GA2BIV,KA3BJ,CASEU,UATF;EAAA,IAUEC,aAVF,GA2BIX,KA3BJ,CAUEW,aAVF;EAAA,IAWEC,cAXF,GA2BIZ,KA3BJ,CAWEY,cAXF;EAAA,IAYEC,UAZF,GA2BIb,KA3BJ,CAYEa,UAZF;EAAA,wBA2BIb,KA3BJ,CAaEc,UAbF;EAAA,IAaEA,UAbF,kCAae,IAbf;EAAA,IAcEC,SAdF,GA2BIf,KA3BJ,CAcEe,SAdF;EAAA,IAeEC,QAfF,GA2BIhB,KA3BJ,CAeEgB,QAfF;EAAA,IAgBEC,QAhBF,GA2BIjB,KA3BJ,CAgBEiB,QAhBF;EAAA,IAiBEC,QAjBF,GA2BIlB,KA3BJ,CAiBEkB,QAjBF;EAAA,IAkBEC,uBAlBF,GA2BInB,KA3BJ,CAkBEmB,uBAlBF;EAAA,IAmBEC,iBAnBF,GA2BIpB,KA3BJ,CAmBEoB,iBAnBF;EAAA,IAoBEC,IApBF,GA2BIrB,KA3BJ,CAoBEqB,IApBF;EAAA,oBA2BIrB,KA3BJ,CAqBEsB,MArBF;EAAA,IAqBEA,MArBF,8BAqBW,OArBX;EAAA,IAsBEC,QAtBF,GA2BIvB,KA3BJ,CAsBEuB,QAtBF;EAAA,IAuBEC,SAvBF,GA2BIxB,KA3BJ,CAuBEwB,SAvBF;EAAA,IAwBEC,MAxBF,GA2BIzB,KA3BJ,CAwBEyB,MAxBF;EAAA,IAyBEC,QAzBF,GA2BI1B,KA3BJ,CAyBE0B,QAzBF;EAAA,IA0BKC,IA1BL,0CA2BI3B,KA3BJ;;EA6BA,sBAA4BF,KAAK,CAAC8B,QAAN,CAAwB,KAAxB,CAA5B;EAAA;EAAA,IAAOC,MAAP;EAAA,IAAeC,SAAf;;EACA,uBAAgDhC,KAAK,CAAC8B,QAAN,EAAhD;EAAA;EAAA,IAAOG,gBAAP;EAAA,IAAyBC,mBAAzB;;EACA,uBAAkClC,KAAK,CAAC8B,QAAN,CAAwB,KAAxB,CAAlC;EAAA;EAAA,IAAOK,SAAP;EAAA,IAAkBC,YAAlB;;EACA,uBAA0BpC,KAAK,CAAC8B,QAAN,CAAuB,EAAvB,CAA1B;EAAA;EAAA,IAAOO,KAAP;EAAA,IAAcC,QAAd;;EACA,uBAA8BtC,KAAK,CAAC8B,QAAN,CAA8B,IAA9B,CAA9B;EAAA;EAAA,IAAOS,OAAP;EAAA,IAAgBC,UAAhB;;EACA,wBAAkDxC,KAAK,CAAC8B,QAAN,CAAwB,KAAxB,CAAlD;EAAA;EAAA,IAAOW,iBAAP;EAAA,IAA0BC,oBAA1B;;EAEA,IAAMC,QAAQ,GAAG3C,KAAK,CAAC4C,MAAN,CAA+B,IAA/B,CAAjB;EACA,IAAMC,cAAc,GAAG,IAAAC,0BAAA,EAAmB,CAACH,QAAD,CAAnB,CAAvB;EACA,IAAMI,WAAW,GAAG/C,KAAK,CAAC4C,MAAN,CAA6B,IAA7B,CAApB;;EAEA,IAAMI,aAAa,GAAG,SAAhBA,aAAgB,GAAM;IAC1BhB,SAAS,CAAC,KAAD,CAAT;IACAQ,UAAU,CAAC,IAAD,CAAV;EACD,CAHD;;EAKA,IAAMS,YAAY,GAAG,IAAAC,0BAAA,EAAmBF,aAAnB,EAAkC,CAACD,WAAD,CAAlC,CAArB;EAEA,IAAAI,0BAAA,EAAmBH,aAAnB,EAAkC,EAAlC,EAAsCC,YAAtC;;EAEA,IAAMG,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAA4C;IAChE,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;MACtCtB,SAAS,CAAC,CAACD,MAAF,CAAT;MACAW,oBAAoB,CAAC,IAAD,CAApB;IACD;EACF,CALD;;EAOA,IAAMa,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,MAAD,EAAsB;IAC9ClB,QAAQ,CAACkB,MAAM,CAACC,IAAP,CAAY,IAAZ,CAAD,CAAR;;IAEA,IAAIvD,KAAK,CAACwD,WAAN,KAAsB,IAA1B,EAAgC;MAC9BxD,KAAK,CAAC0B,QAAN,CAAe4B,MAAf;IACD,CAFD,MAEO,IAAItD,KAAK,CAACwD,WAAN,KAAsB,KAAtB,IAA+BxD,KAAK,CAACwD,WAAN,KAAsBC,SAAzD,EAAoE;MACzEzD,KAAK,CAAC0B,QAAN,CAAe4B,MAAM,CAAC,CAAD,CAArB;IACD,CAP6C,CAS9C;;;IACA,IAAI9C,WAAW,IAAIR,KAAK,CAACwD,WAAzB,EAAsC;;IAEtC,IAAIjB,iBAAJ,EAAuB;MAAA;;MACrB,yBAAAI,cAAc,CAACe,OAAf,gFAAwBC,KAAxB,CAA8B;QAACC,YAAY,EAAE;MAAf,CAA9B;IACD;;IACD9B,SAAS,CAAC,KAAD,CAAT;IACAQ,UAAU,CAAC,IAAD,CAAV;EACD,CAjBD;;EAmBAxC,KAAK,CAAC+D,SAAN,CAAgB,YAAM;IACpB,IAAI7D,KAAK,CAAC8D,KAAV,EAAiB;MACf,IAAI9D,KAAK,CAACwD,WAAV,EAAuB;QACrBpB,QAAQ,CAACpC,KAAK,CAAC8D,KAAN,CAAYP,IAAZ,CAAiB,IAAjB,CAAD,CAAR;MACD,CAFD,MAEO,IAAIvD,KAAK,CAACwD,WAAN,KAAsB,KAAtB,IAA+BxD,KAAK,CAACwD,WAAN,KAAsBC,SAAzD,EAAoE;QACzErB,QAAQ,CAACpC,KAAK,CAAC8D,KAAP,CAAR;MACD;IACF,CAND,MAMO;MACL1B,QAAQ,CAAC,EAAD,CAAR;IACD;EACF,CAVD,EAUG,CAACpC,KAAK,CAAC8D,KAAP,EAAc9D,KAAK,CAACwD,WAApB,CAVH;EAYA1D,KAAK,CAAC+D,SAAN,CAAgB,YAAM;IACpB3B,YAAY,CAAC,KAAD,CAAZ;EACD,CAFD,EAEG,CAACC,KAAD,CAFH;EAIArC,KAAK,CAAC+D,SAAN,CAAgB,YAAM;IACpB,CAAChC,MAAD,IAAWW,oBAAoB,CAAC,KAAD,CAA/B;EACD,CAFD,EAEG,CAACX,MAAD,CAFH;EAIA/B,KAAK,CAACiE,mBAAN,CAA0B9D,GAA1B,EAA+B;IAAA,OAAMwC,QAAQ,CAACiB,OAAf;EAAA,CAA/B,EAAuD,CAACjB,QAAD,CAAvD;;EAEA,IAAMuB,eAAe,GAAG,SAAlBA,eAAkB,CAACnC,MAAD,EAAqB;IAC3CC,SAAS,CAACD,MAAD,CAAT;EACD,CAFD;;EAIA,IAAMoC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;IAC5B,IAAMX,MAAM,GAAGnB,KAAK,CAAC+B,KAAN,CAAY,GAAZ,EAAiBC,GAAjB,CAAqB,UAACC,GAAD;MAAA,OAASA,GAAG,CAACC,IAAJ,EAAT;IAAA,CAArB,CAAf;IACA,IAAMC,iBAAiB,GAAGnE,IAAI,CAACoE,MAAL,CAAY,UAACC,IAAD;MAAA,OAAUlB,MAAM,CAACmB,QAAP,CAAgBD,IAAI,CAACV,KAArB,CAAV;IAAA,CAAZ,EAAmDK,GAAnD,CAAuD,UAACO,CAAD;MAAA,OAAOA,CAAC,CAACC,YAAT;IAAA,CAAvD,CAA1B;IACA,OAAOL,iBAAiB,CAACf,IAAlB,CAAuB,IAAvB,CAAP;EACD,CAJD;;EAMA,IAAMqB,UAAU,GAAG,SAAbA,UAAa,CAACzB,CAAD,EAAyC;IAC1D;IACA,IAAI,CAACA,CAAC,CAAC0B,aAAF,CAAgBC,QAAhB,CAAyB3B,CAAC,CAAC4B,aAA3B,CAAL,EAAgD;MAC9CtD,MAAM,IAAIA,MAAM,CAAC0B,CAAD,CAAhB;IACD;EACF,CALD;;EAOA,IAAM6B,GAAG,GAAG,CAACnD,MAAM,GAAG,WAAH,GAAiB,EAAxB,EAA4BoD,MAA5B,CAAmC5D,IAAI,GAAGA,IAAH,GAAU,EAAjD,EAAqD4D,MAArD,CAA4D/D,QAAQ,GAAG,UAAH,GAAgB,EAApF,EAAwF+D,MAAxF,CAA+FzD,SAAS,cAAOA,SAAP,IAAqB,EAA7H,CAAZ;EAEA,oBACE;IAAA,wBACE,sBAAC,uBAAD;MAAU,GAAG,EAAEuB,YAAf;MACU,iBAAelB,MAAM,GAAG,IAAH,GAAU,KADzC;MAEU,yBAAuBE,gBAFjC;MAGU,2BAAkB7B,EAAlB,qBAHV;MAIU,IAAI,EAAC,SAJf;MAKU,wBAAsBF,KAAK,CAACwD,WALtC;MAMU,QAAQ,EAAEtC,QAAQ,IAAI,KANhC;MAOU,SAAS,EAAEG,IAAI,GAAGA,IAAH,GAAU,EAPnC;MAQU,QAAQ,EAAEJ,QARpB;MASU,QAAQ,EAAED,QATpB;MAUU,MAAM,EAAEM,MAVlB;MAWU,MAAM,EAAEsD,UAXlB;MAYU,QAAQ,EAAErD,QAZpB;MAAA,wBAaE,sBAAC,0BAAD;QACE,GAAG,EAAEoB,cADP;QAEE,SAAS,EAAEqC,GAFb;QAGE,WAAW,EAAEE,iCAHf;QAIE,OAAO,EAAE,iBAAC/B,CAAD,EAAO;UACd,IAAI,CAAClC,QAAD,IAAa,CAACD,QAAlB,EAA4B;YAC1BmC,CAAC,CAACgC,eAAF;YACArD,SAAS,CAAC,CAACD,MAAF,CAAT;;YACA,IAAIA,MAAJ,EAAY;cAAA;;cACV,qBAAAY,QAAQ,CAACiB,OAAT,wEAAkB0B,IAAlB;YACD,CAFD,MAEO;cAAA;;cACL,sBAAA3C,QAAQ,CAACiB,OAAT,0EAAkBC,KAAlB;YACD;UACF;QACF,CAdH;QAeE,QAAQ,EAAE3C,QAAQ,IAAIC,QAAZ,GAAuB,CAAC,CAAxB,GAA4B,CAfxC;QAgBE,QAAQ,EAAED,QAAQ,IAAI,KAhBxB;QAiBE,QAAQ,EAAEC,QAAQ,IAAI,KAjBxB;QAkBE,aAAa,EAAE,CAACkB,KAlBlB;QAmBE,WAAW,EAAE/B,WAnBf;QAoBE,qBAAqB,EAAE,CAAC,CAACe,uBApB3B;QAqBE,SAAS,EAAE+B,aArBb;QAsBE,QAAQ,EAAE3B;MAtBZ,GAuBMI,IAvBN;QAAA,wBAwBE,qBAAC,yBAAD;UACE,GAAG,EAAEc,QADP;UAEE,IAAI,EAAC,QAFP;UAGE,QAAQ,MAHV;UAIE,WAAW,EAAErC,WAJf;UAKE,KAAK,EAAE6D,eAAe,EALxB;UAME,SAAS,EAAE5C,IAAI,aAAMA,IAAN,cAAqB,OANtC;UAOE,QAAQ,EAAE,CAAC,CAPb;UAQE,QAAQ,EAAEL,QAAQ,IAAI;QARxB,EAxBF,EAkCGiB,SAAS,gBAAG,qBAAC,kCAAD;UAAkB,IAAI,EAAEoD,WAAA,CAAKC,KAA7B;UAAoC,KAAK,EAAEC,cAAA,CAAOC;QAAlD,EAAH,GAAsE,IAlClF,eAmCE;UAAK,SAAS,EAAE,qBAAhB;UAAA,UACG3D,MAAM,gBAAG,qBAAC,wBAAD;YAAa,IAAI,EAAC,MAAlB;YAAyB,SAAS,EAAER,IAAI,GAAGA,IAAH,GAAU;UAAlD,EAAH,gBACL,qBAAC,0BAAD;YAAe,IAAI,EAAC,MAApB;YAA2B,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;UAApD;QAFJ,EAnCF;MAAA,GAbF,EAqDG,CAACJ,QAAD,IAAa,CAACD,QAAd,iBACC,qBAAC,wBAAD;QACE,GAAG,EAAE6B,WADP;QAEE,YAAY,EAAEE,YAFhB;QAGE,yBAAyB,EAAE,mCAAC7C,EAAD;UAAA,OAAQ8B,mBAAmB,CAAC9B,EAAD,CAA3B;QAAA,CAH7B;QAIE,kBAAkB,EAAE;UAClBI,SAAS,EAAEA,SADO;UAElBC,MAAM,EAAEA,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAa,YAAM,CACxB,CAHiB;UAIlBC,WAAW,EAAEA,WAJK;UAKlBC,aAAa,EAAEA,aALG;UAMlBG,cAAc,EAAEA,cANE;UAOlBE,UAAU,EAAEA,UAPM;UAQlB2E,aAAa,EAAEpC,iBARG;UASlBqC,KAAK,EAAEvF,IATW;UAUlBqD,WAAW,EAAExD,KAAK,CAACwD,WAVD;UAWlB3C,UAAU,EAAEA,UAXM;UAYlBE,SAAS,EAAEA,SAZO;UAalBL,UAAU,EAAEA,UAbM;UAclBC,aAAa,EAAEA;QAdG,CAJtB;QAoBE,aAAa,EAAC,OApBhB;QAqBE,OAAO,EAAE0B,OArBX;QAsBE,UAAU,EAAEC,UAtBd;QAuBE,IAAI,EAAEjB,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAUgE,WAAA,CAAKC,KAvBrB;QAwBE,MAAM,EAAE,EAxBV;QAyBE,MAAM,EAAEzD,MAzBV;QA0BE,SAAS,EAAEmC,eA1Bb;QA2BE,kBAAkB,EAAE3D,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwB,EA3B5C;QA4BE,OAAO,EAAEkC,iBA5BX;QA6BE,QAAQ,EAAErB,QAAQ,IAAI,KA7BxB;QA8BE,cAAc,EAAElB,KAAK,CAACwD,WAAN,GAAoBxD,KAAK,CAAC8D,KAAN,IAAe,EAAnC,GAAwC,CAAC9D,KAAK,CAAC8D,KAAN,IAAe,EAAhB,CA9B1D;QA+BE,iBAAiB,EAAET,iBA/BrB;QAgCE,EAAE,YAAKnD,EAAL;MAhCJ,EAtDJ;IAAA,EADF,EA2FGiB,uBAAuB,iBACtB,sBAAC,qBAAD;MAAA,wBACE,qBAAC,6BAAD;QAAkB,KAAK,EAAEoE,cAAA,CAAOI;MAAhC,EADF,eAEE;QAAA,UAAOxE;MAAP,EAFF;IAAA,EA5FJ,EAiGGC,iBAAiB,iBAChB,sBAAC,0BAAD;MAAA,wBACE,qBAAC,wBAAD;QAAa,KAAK,EAAEmE,cAAA,CAAOC;MAA3B,EADF,eAEE;QAAA,UAAOpE;MAAP,EAFF;IAAA,EAlGJ;EAAA,EADF;AA0GD,CA/NqB,CAAtB;;EAtCEjB,I;EACAG,S,4BAAY,Q,EAAW,U,EAAa,O;EACpCC,M;EACAC,W;EAEAE,U;EACAC,a;EACAC,c;EACAC,U;EACAC,U;EACAC,S;EACAX,W;EACAwF,c;EACAvF,kB;EACAW,Q;EACAC,Q;EACAC,Q;EACAC,uB;EACAC,iB;EAEAE,M;EACAC,Q;EAUAiC,W,4BAAc,K;EACdM,K;EACApC,Q;kMAhCY,Q,EAAW,U,EAAa,O;eAsQvB7B,a"}

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,10 +215,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
         onKeyDown: handleKeyDown,
-        minWidth: minWidth,
-        "aria-activedescendant": activeDescendant,
-        role: "listbox",
-        "aria-multiselectable": props.multiSelect
+        minWidth: minWidth
       }, rest), {}, {
         children: [/*#__PURE__*/_jsx(InputField, {
           ref: inputRef,