@laerdal/life-react-components 1.11.0-dev.20.full → 1.11.0-dev.22

package/dist/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","rest","useState","isOpen","setIsOpen","input","setInput","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,aAAT,EAAwBC,WAAxB,EAAqCC,WAArC,EAAkDC,gBAAlD,QAA0E,kCAA1E;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,WAAT,EAAsBC,QAAtB,EAAgCC,UAAhC,QAAkD,iBAAlD;AACA,OAAOC,eAAP,MAA8C,mBAA9C;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,iBAAT,EAA4BC,YAA5B,QAAgD,gBAAhD;AACA,SAASC,yBAAT,EAAoCC,eAApC,EAAqDC,kBAArD,EAAyEC,kBAAzE,EAA6FC,kBAA7F,QAAuH,WAAvH;AACA,SAASC,UAAT,QAA2B,WAA3B;AACA,SAASC,WAAT,QAA4B,UAA5B;;;;AA2BA,IAAMC,cAAc,gBAAGrB,KAAK,CAACsB,UAAN,CAAkB,gBAsByBC,GAtBzB,EAsBiC;AAAA,MArB9BC,EAqB8B,QArB9BA,EAqB8B;AAAA,MApB9BC,IAoB8B,QApB9BA,IAoB8B;AAAA,MAnB9BC,WAmB8B,QAnB9BA,WAmB8B;AAAA,MAlB9BC,QAkB8B,QAlB9BA,QAkB8B;AAAA,MAjB9BC,aAiB8B,QAjB9BA,aAiB8B;AAAA,MAhB9BC,KAgB8B,QAhB9BA,KAgB8B;AAAA,MAf9BC,QAe8B,QAf9BA,QAe8B;AAAA,MAd9BC,kBAc8B,QAd9BA,kBAc8B;AAAA,MAb9BC,QAa8B,QAb9BA,QAa8B;AAAA,MAZ9BC,QAY8B,QAZ9BA,QAY8B;AAAA,MAX9BC,UAW8B,QAX9BA,UAW8B;AAAA,MAV9BC,uBAU8B,QAV9BA,uBAU8B;AAAA,MAT9BC,iBAS8B,QAT9BA,iBAS8B;AAAA,MAR9BC,IAQ8B,QAR9BA,IAQ8B;AAAA,MAP9BC,gBAO8B,QAP9BA,gBAO8B;AAAA,MAN9BC,cAM8B,QAN9BA,cAM8B;AAAA,yBAL9BC,MAK8B;AAAA,MAL9BA,MAK8B,4BALrB,OAKqB;AAAA,MAJ9BC,OAI8B,QAJ9BA,OAI8B;AAAA,MAH9BC,QAG8B,QAH9BA,OAG8B;AAAA,MAF9BC,OAE8B,QAF9BA,MAE8B;AAAA,MAD3BC,IAC2B;;AACxE,wBAA4B5C,KAAK,CAAC6C,QAAN,CAAwB,KAAxB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,yBAA0B/C,KAAK,CAAC6C,QAAN,EAA1B;AAAA;AAAA,MAAOG,KAAP;AAAA,MAAcC,QAAd;;AACA,yBAA0CjD,KAAK,CAAC6C,QAAN,CAAwB,KAAxB,CAA1C;AAAA;AAAA,MAAOK,aAAP;AAAA,MAAsBC,gBAAtB;;AACA,yBAAwCnD,KAAK,CAAC6C,QAAN,EAAxC;AAAA;AAAA,MAAOO,YAAP;AAAA,MAAqBC,eAArB;;AACA,yBAA4CrD,KAAK,CAAC6C,QAAN,CAAyB,EAAzB,CAA5C;AAAA;AAAA,MAAOS,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,0BAA8BvD,KAAK,CAAC6C,QAAN,CAA8B,IAA9B,CAA9B;AAAA;AAAA,MAAOW,OAAP;AAAA,MAAgBC,UAAhB;;AACA,0BAAwCzD,KAAK,CAAC6C,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOa,YAAP;AAAA,MAAqBC,eAArB;;AACA,0BAAwB3D,KAAK,CAAC6C,QAAN,CAAwB,IAAxB,CAAxB;AAAA;AAAA,MAAOe,IAAP;AAAA,MAAaC,OAAb;;AAEA,MAAMC,cAAc,GAAG5C,kBAAkB,EAAzC;AACA,MAAM6C,QAAQ,GAAG7C,kBAAkB,CAAC,CAAC4C,cAAD,CAAD,CAAnC;AACA,MAAME,cAAc,GAAGhE,KAAK,CAACiE,MAAN,CAAgC,IAAhC,CAAvB;AAEAlD,EAAAA,eAAe,CAAC+C,cAAD,EAAiBd,KAAK,IAAI,CAACf,QAAV,IAAsB,CAACD,QAAvB,GAAkC,CAACgC,cAAD,CAAlC,GAAqD,EAAtE,CAAf;AAEAhE,EAAAA,KAAK,CAACkE,mBAAN,CAA0B3C,GAA1B,EAA+B;AAAA,WAAMwC,QAAQ,CAACI,OAAf;AAAA,GAA/B,EAAuD,CAACJ,QAAD,CAAvD;AAEA,MAAMK,YAAY,GAAGpD,kBAAkB,CACrC;AAAA,WAAM+B,SAAS,CAAC,KAAD,CAAf;AAAA,GADqC,EAErC,EAFqC,EAGrC9B,kBAAkB,CAAC;AAAA,WAAM8B,SAAS,CAAC,KAAD,CAAf;AAAA,GAAD,CAHmB,CAAvC;;AAMA,MAAMsB,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAA8C;AACvE,QAAIA,CAAC,CAACC,GAAF,KAAU,KAAV,IAAmBD,CAAC,CAACC,GAAF,KAAU,QAAjC,EAA2C;AACzCD,MAAAA,CAAC,CAACE,cAAF;AACD;;AACD,QAAIF,CAAC,CAACC,GAAF,KAAU,WAAV,IAAyBD,CAAC,CAACC,GAAF,KAAU,MAAnC,IAA6CD,CAAC,CAACC,GAAF,KAAU,SAAvD,IAAoED,CAAC,CAACC,GAAF,KAAU,IAAlF,EAAwF;AACtFD,MAAAA,CAAC,CAACE,cAAF;;AACA,UAAI,CAAC1B,MAAL,EAAa;AACXC,QAAAA,SAAS,CAAC,IAAD,CAAT;AACD;AACF;AACF,GAVD;;AAYA/C,EAAAA,KAAK,CAACyE,SAAN,CAAgB,YAAM;AACpBZ,IAAAA,OAAO,CAAC,IAAD,CAAP;AACAN,IAAAA,iBAAiB,CAAC,CAAC,CAAC1B,KAAF,GAAU,CAACA,KAAD,CAAV,GAAoB,EAArB,CAAjB;AACD,GAHD,EAGG,CAACA,KAAD,CAHH;AAKA7B,EAAAA,KAAK,CAACyE,SAAN,CAAgB,YAAM;AACpB,QAAInB,cAAJ,aAAIA,cAAJ,eAAIA,cAAc,CAAEoB,MAApB,EAA4B;AAAA;;AAC1B,UAAMC,GAAG,GAAGrB,cAAc,CAAC,CAAD,CAA1B;AACA,UAAMsB,IAAI,GAAGnD,IAAI,CAACoD,IAAL,CAAU,UAACC,CAAD;AAAA,eAAOA,CAAC,CAACjD,KAAF,KAAY8C,GAAnB;AAAA,OAAV,CAAb;AACAtB,MAAAA,eAAe,CAACuB,IAAD,CAAf;AACA3B,MAAAA,QAAQ,gCAAC2B,IAAD,aAACA,IAAD,uBAACA,IAAI,CAAEG,YAAP,mEAAuBH,IAAvB,aAAuBA,IAAvB,uBAAuBA,IAAI,CAAE/C,KAA7B,yCAAsC,EAAtC,CAAR;AACAF,MAAAA,QAAQ,IAAI,CAACiC,IAAb,IAAqBjC,QAAQ,CAACgD,GAAD,CAA7B;AACD,KAND,MAMO;AACLtB,MAAAA,eAAe,CAAC2B,SAAD,CAAf;AACArD,MAAAA,QAAQ,IAAI,CAACiC,IAAb,IAAqBjC,QAAQ,CAAC,EAAD,CAA7B;AACAsB,MAAAA,QAAQ,CAAC,EAAD,CAAR;AACD;AACF,GAZD,EAYG,CAACK,cAAD,CAZH;AAcAtD,EAAAA,KAAK,CAACyE,SAAN,CAAgB,YAAM;AACpB,QAAI,CAAC3B,MAAL,EAAa;AACX,UAAI,CAAC,CAACM,YAAN,EAAoB;AAAA;;AAClBH,QAAAA,QAAQ,mCAACG,YAAD,aAACA,YAAD,uBAACA,YAAY,CAAE2B,YAAf,yEAA+B3B,YAA/B,aAA+BA,YAA/B,uBAA+BA,YAAY,CAAEvB,KAA7C,yCAAsD,EAAtD,CAAR;AACD,OAFD,MAEO;AACLoB,QAAAA,QAAQ,CAAC,EAAD,CAAR;AACD;AACF;;AAEDE,IAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACD,GAVD,EAUG,CAACL,MAAD,EAASM,YAAT,CAVH;;AAYA,MAAM6B,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACX,CAAD,EAAY;AAAA;;AACnCrB,IAAAA,QAAQ,CAAC,EAAD,CAAR;AACAM,IAAAA,iBAAiB,CAAC,EAAD,CAAjB;AACA5B,IAAAA,QAAQ,IAAIA,QAAQ,CAAC,EAAD,CAApB;AACA,yBAAAoC,QAAQ,CAACI,OAAT,wEAAkBe,KAAlB,CAAwB;AAAEC,MAAAA,YAAY,EAAE,CAAAb,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEc,MAAH,MAAc;AAA9B,KAAxB;AACD,GALD;;AAOA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,wBACE,MAAC,WAAD;AACE,MAAA,GAAG,EAAEvB,cADP;AAEE,MAAA,SAAS,EAAEzB,IAAI,GAAGA,IAAH,GAAU,EAF3B;AAGE,MAAA,OAAO,EAAE,iBAACiC,CAAD,EAAY;AACnB,YAAI,CAACrC,QAAD,IAAa,CAACD,QAAlB,EAA4B;AAC1BsC,UAAAA,CAAC,CAACgB,eAAF;AACAvC,UAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,cAAIA,MAAJ,EAAY;AAAA;;AACV,kCAAAiB,QAAQ,CAACI,OAAT,0EAAkBoB,IAAlB;AACD,WAFD,MAEO;AAAA;;AACL,kCAAAxB,QAAQ,CAACI,OAAT,0EAAkBe,KAAlB;AACD;AACF;AACF,OAbH;AAcE,MAAA,QAAQ,EAAElD,QAAQ,IAAI,KAdxB;AAeE,MAAA,QAAQ,EAAEC,QAAQ,IAAI,KAfxB;AAgBE,MAAA,aAAa,EAAE,CAACe,KAhBlB;AAiBE,MAAA,QAAQ,EAAET,cAjBZ;AAkBE,MAAA,qBAAqB,EAAE,CAAC,CAACJ,uBAlB3B;AAmBE,MAAA,WAAW,EAAErB,yBAnBf;AAoBE,wCAAyBU,EAAzB,CApBF;AAAA,8BAqBE,KAAC,UAAD;AACE,QAAA,EAAE,EAAEA,EADN;AAEE,QAAA,GAAG,EAAEuC,QAFP;AAGE,QAAA,YAAY,EAAE,SAASyB,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAHzB;AAIE,QAAA,IAAI,EAAC,QAJP;AAKE,QAAA,WAAW,EAAEhC,YAAY,GAAG,EAAH,GAAQhC,WALnC;AAME,QAAA,SAAS,EAAE2C,kBANb;AAOE,QAAA,KAAK,EAAErB,KAAK,IAAI,EAPlB;AAQE,QAAA,QAAQ,EAAE,kBAACsB,CAAD,EAAY;AACpB,cAAI,CAACA,CAAC,CAACqB,MAAF,CAAS9D,KAAd,EAAqB;AACnB0B,YAAAA,iBAAiB,CAAC,EAAD,CAAjB;AACD;;AACD,cAAI,CAACtB,QAAD,IAAa,CAACD,QAAd,IAA0BsC,CAAC,CAACqB,MAAF,CAAS9D,KAAT,KAAmBmB,KAAjD,EAAwD;AACtDG,YAAAA,gBAAgB,CAAC,KAAD,CAAhB;AACAJ,YAAAA,SAAS,CAAC,IAAD,CAAT;AACAE,YAAAA,QAAQ,CAACqB,CAAC,CAACqB,MAAF,CAAS9D,KAAV,CAAR;;AACA,gBAAID,aAAJ,EAAmB;AACjBA,cAAAA,aAAa,CAAC0C,CAAC,CAACqB,MAAF,CAAS9D,KAAT,IAAkB,EAAnB,CAAb;AACD;AACF;AACF,SApBH;AAqBE,QAAA,OAAO,EAAE,iBAACyC,CAAD,EAAO;AACdX,UAAAA,eAAe,CAAC,IAAD,CAAf;AACAjB,UAAAA,QAAO,IAAIA,QAAO,CAAC4B,CAAD,CAAlB;AACD,SAxBH;AAyBE,QAAA,MAAM,EAAE,gBAACA,CAAD,EAAO;AACbX,UAAAA,eAAe,CAAC,KAAD,CAAf;AACAhB,UAAAA,OAAM,IAAIA,OAAM,CAAC2B,CAAD,CAAhB;AACD,SA5BH;AA6BE,QAAA,QAAQ,EAAExC,QA7BZ;AA8BE,QAAA,QAAQ,EAAEE,QAAQ,IAAIC,QAAZ,GAAuB,CAAC,CAAxB,GAA4B,CA9BxC;AA+BE,QAAA,QAAQ,EAAED,QAAQ,IAAI;AA/BxB,SAgCMY,IAhCN,EArBF,EAuDGI,KAAK,IAAI,CAACf,QAAV,IAAsB,CAACD,QAAvB,IAAmC,CAACS,OAApC,iBACC,KAAC,UAAD;AAAY,QAAA,MAAM,EAAEwC,gBAApB;AAAsC,QAAA,GAAG,EAAEjB,cAA3C;AAA2D,QAAA,wBAAwB,EAAE,IAArF;AAA2F,QAAA,KAAK,EAAE,UAAlG;AAA8G,QAAA,KAAK,EAAE;AAAE4B,UAAAA,UAAU,EAAE;AAAd,SAArH;AAA6I,QAAA,OAAO,EAAE,WAAtJ;AAAA,+BACE,KAAC,WAAD,CAAa,KAAb;AADF,QAxDJ,EA6DG,CAAC5D,QAAD,IAAa,CAACC,QAAd,IAA0BQ,OAA1B,iBACC;AAAK,QAAA,KAAK,EAAE;AAAEmD,UAAAA,UAAU,EAAE;AAAd,SAAZ;AAAA,+BACE,KAAC,gBAAD;AAAkB,UAAA,IAAI,EAAEjF,IAAI,CAACkF,KAA7B;AAAoC,UAAA,KAAK,EAAE5F,MAAM,CAAC6F;AAAlD;AADF,QA9DJ,eAmEE;AAAK,QAAA,SAAS,EAAE,gBAAhB;AAAA,kBACGhD,MAAM,IAAI,CAACb,QAAX,IAAuB,CAACD,QAAxB,gBAAmC,KAAC,WAAD;AAAa,UAAA,IAAI,EAAC,MAAlB;AAAyB,UAAA,SAAS,EAAEK,IAAI,GAAGA,IAAH,GAAU;AAAlD,UAAnC,gBAA8F,KAAC,aAAD;AAAe,UAAA,IAAI,EAAC,MAApB;AAA2B,UAAA,SAAS,EAAEA,IAAI,GAAGA,IAAH,GAAU;AAApD;AADjG,QAnEF;AAAA,MADF;AAyED,GA1ED;;AA4EA,sBACE;AAAA,4BACE,MAAC,QAAD;AAAU,MAAA,GAAG,EAAE+B,YAAf;AAA6B,MAAA,QAAQ,EAAEpC,QAAvC;AAAiD,MAAA,QAAQ,EAAE,KAA3D;AAAkE,MAAA,QAAQ,EAAEC,QAA5E;AAAsF,MAAA,SAAS,EAAEI,IAAI,GAAGA,IAAH,GAAU,EAA/G;AAAmH,MAAA,MAAM,EAAEG,MAA3H;AAAA,iBACG6C,WAAW,EADd,EAEG,CAACpD,QAAD,IAAa,CAACD,QAAd,iBACC,KAAC,eAAD;AACE,QAAA,YAAY,EAAEoC,YADhB;AAEE,QAAA,MAAM,EAAEtB,MAAM,IAAI,CAACL,OAFrB;AAGE,QAAA,kBAAkB,EAAEV,kBAAF,aAAEA,kBAAF,cAAEA,kBAAF,GAAwB,EAH5C;AAIE,QAAA,cAAc,EAAEuB,cAJlB;AAKE,QAAA,iBAAiB,EAAEC,iBALrB;AAME,QAAA,IAAI,EAAElB,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU1B,IAAI,CAACkF,KANrB;AAOE,QAAA,OAAO,EAAErC,OAPX;AAQE,QAAA,UAAU,EAAEC,UARd;AASE,QAAA,OAAO,EAAE,KATX;AAUE,QAAA,kBAAkB,EAAE;AAClBsC,UAAAA,SAAS,EAAE,QADO;AAElB7D,UAAAA,UAAU,EAAEA,UAFM;AAGlB8D,UAAAA,WAAW,EAAE,KAHK;AAIlBC,UAAAA,MAAM,EAAE,kBAAM,CAAE,CAJE;AAKlBC,UAAAA,aAAa,EAAE,uBAACC,MAAD,EAAsB;AACnChD,YAAAA,gBAAgB,CAAC,IAAD,CAAhB;AACAU,YAAAA,OAAO,CAAC,KAAD,CAAP;AACD,WARiB;AASlBuC,UAAAA,KAAK,EAAE3E;AATW,SAVtB;AAqBE,QAAA,MAAM,EAAE,CAACa,gBAAD,IAAqB,CAACY,aAAtB,GAAsCF,KAAK,IAAI,EAA/C,GAAoD,EArB9D;AAsBE,QAAA,SAAS,EAAED,SAtBb;AAuBE,QAAA,QAAQ,EAAE,KAvBZ;AAwBE,QAAA,EAAE,YAAKvB,EAAL;AAxBJ,QAHJ;AAAA,MADF,EAgCGW,uBAAuB,iBACtB,MAAC,YAAD;AAAc,MAAA,SAAS,EAAEE,IAAI,IAAI,EAAjC;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,KAAK,EAAEpC,MAAM,CAACoG;AAAhC,QADF,eAEE;AAAA,kBAAOlE;AAAP,QAFF;AAAA,MAjCJ,EAsCGC,iBAAiB,iBAChB,MAAC,iBAAD;AAAmB,MAAA,SAAS,EAAEC,IAAI,IAAI,EAAtC;AAAA,8BACE,KAAC,WAAD;AAAa,QAAA,KAAK,EAAEpC,MAAM,CAAC6F;AAA3B,QADF,eAEE;AAAA,kBAAO1D;AAAP,QAFF;AAAA,MAvCJ;AAAA,IADF;AA+CD,CA3NsB,CAAvB;;AAxBEX,EAAAA,I;AACAC,EAAAA,W;AAEAG,EAAAA,K;AACAF,EAAAA,Q;AACAC,EAAAA,a;AAEAE,EAAAA,Q;AACAE,EAAAA,Q;AACAC,EAAAA,Q;AACAQ,EAAAA,O;AAEAH,EAAAA,gB;AAEAP,EAAAA,kB;AACAI,EAAAA,uB;AACAC,EAAAA,iB;AAGAG,EAAAA,c;AACAC,EAAAA,M;AACAN,EAAAA,U;;AAgOF,eAAeb,cAAf","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n\n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef} disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
+{"version":3,"sources":["../../src/Dropdown/DropdownFilter.tsx"],"names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n\n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef} role=\"combobox\"\n      aria-activedescendant={activeDescendant}\n      aria-multiselectable={true} disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}

package/dist/QuizButton/QuizButton.cjs

@@ -108,7 +108,9 @@ var QuizButton = function QuizButton(_ref) {
     onMouseDown: _.defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
-    "data-testid": 'container'
+    "data-testid": 'container',
+    "aria-checked": selected,
+    role: type === 'radio' ? 'radio' : 'checkbox'
   }, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContainer, {
       "data-testid": 'btnContainer',

package/dist/QuizButton/QuizButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["TextContainer","styled","div","COLORS","accent1_20","props","size","Size","Small","Large","ComponentTextStyle","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focusStyles","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","defaultOnMouseDownHandler","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"file":"QuizButton.cjs"}
+{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["TextContainer","styled","div","COLORS","accent1_20","props","size","Size","Small","Large","ComponentTextStyle","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","focusStyles","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","defaultOnMouseDownHandler","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      aria-checked={selected}\n      role={type === 'radio'? 'radio' : 'checkbox'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"file":"QuizButton.cjs"}

package/dist/QuizButton/QuizButton.js

@@ -83,7 +83,9 @@ var QuizButton = function QuizButton(_ref) {
     onMouseDown: defaultOnMouseDownHandler,
     size: size,
     className: 'quiz-button '.concat(selected ? ' selected' : '').concat(disabled ? ' disabled' : '').concat(resultType ? ' result ' + resultType : '').concat(className ? ' ' + className : ''),
-    "data-testid": 'container'
+    "data-testid": 'container',
+    "aria-checked": selected,
+    role: type === 'radio' ? 'radio' : 'checkbox'
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx(ButtonContainer, {
       "data-testid": 'btnContainer',

package/dist/QuizButton/QuizButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"file":"QuizButton.js"}
+{"version":3,"sources":["../../src/QuizButton/QuizButton.tsx"],"names":["React","styled","Checkbox","COLORS","defaultOnMouseDownHandler","focusStyles","RadioButton","Size","SystemIcons","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","TextContainer","div","accent1_20","props","size","Small","Large","Regular","TextWrapper","ButtonContainer","accent1_100","accent1_600","OptionContainer","accent1_200","neutral_100","neutral_20","neutral_300","correct_20","correct_400","critical_20","critical_500","warning_20","warning_400","accent1_300","isSelected","accent1_700","accent1_400","accent1_800","renderResultContent","resultType","white","QuizButton","text","type","onClick","id","className","selected","disabled","Medium","rest","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nconst TextContainer = styled.div<{size: Size}>`\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ${COLORS.accent1_20};\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ${props=>props.size===Size.Small?'6px 8px':(props.size===Size.Large?'20px 16px':'12px 16px')};\n  ${props=>props.size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\n`;\n\nconst TextWrapper = styled.div<{size:Size}>``;\n\nconst ButtonContainer = styled.div<{size: Size}>`\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ${COLORS.accent1_100};\n\n  width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n    width: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ${COLORS.accent1_600};\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n`;\n\nconst OptionContainer = styled.div<{isSelected:boolean, size:Size}>`\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ${props=>props.size===Size.Small?'32px':(props.size===Size.Large?'64px':'48px')};\n  margin-bottom: ${props=>props.size===Size.Small?'16px':(props.size===Size.Large?'32px':'24px')};\n\n  &.selected {\n    ${TextContainer} {\n      background: ${COLORS.accent1_100};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_200};\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ${ButtonContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_100};\n    }\n    ${TextContainer} {\n      pointer-events: none;\n      background: ${COLORS.neutral_20};\n      color: ${COLORS.neutral_300};\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ${TextContainer} {    \n      background: ${COLORS.correct_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.correct_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ${TextContainer} {    \n      background: ${COLORS.critical_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.critical_500};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ${TextContainer} {    \n      background: ${COLORS.warning_20};\n    }\n    ${ButtonContainer} {\n      background: ${COLORS.warning_400};\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ${focusStyles}\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_300};\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_200  : COLORS.accent1_100};\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_700};\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ${ButtonContainer} {\n      background: ${COLORS.accent1_400};\n      transition: none;\n    }\n    ${TextContainer} {\n      background: ${props=>props.isSelected ? COLORS.accent1_300 : COLORS.accent1_200};\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ${COLORS.accent1_800};\n      }\n    }\n  }\n`;\n\nconst renderResultContent = (resultType: string) => {\n  switch(resultType){\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n\n    default : return <SystemIcons.Close color={COLORS.white} className={'quiz-button-result-icon'}/>;\n  }\n};\n\ntype QuizButtonProps = {\n  resultType?: 'correct' | 'incorrect' | 'partial';\n  text: string;\n  onClick?: (arg:any)=>void;\n  id: string;\n  selected?: boolean;\n  disabled?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  type: 'radio' | 'checkbox';\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\n\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\n                                                                text,\n                                                                type,\n                                                                onClick,\n                                                                resultType,\n                                                                id,\n                                                                className,\n                                                                selected = false,\n                                                                disabled = false,\n                                                                size = Size.Medium,\n                                                                ...rest\n                                                              }) => {\n  return (   \n    <OptionContainer\n      onClick={onClick}\n      isSelected={selected}\n      tabIndex={(disabled || resultType) ? -1 : 0}\n      onMouseDown={defaultOnMouseDownHandler}\n      size={size}\n      className={'quiz-button '.concat(selected ? ' selected' : '')\n        .concat(disabled ? ' disabled' : '')\n        .concat(resultType ? ' result ' + resultType : '')\n        .concat(className ? ' ' + className : '')}\n      data-testid={'container'}\n      aria-checked={selected}\n      role={type === 'radio'? 'radio' : 'checkbox'}\n      {...rest}>\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} size={size}>\n          {\n            resultType ? renderResultContent(resultType) : (\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\n                                select={()=>{}} id={id}/>\n                              )\n          }\n        </ButtonContainer>\n\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} size={size}>\n          <TextWrapper size={size}>\n            {text}\n          </TextWrapper>\n        </TextContainer>\n    </OptionContainer>\n  );\n};\n\nexport default QuizButton;\n"],"file":"QuizButton.js"}

package/dist/Table/TableBody.cjs

@@ -196,7 +196,7 @@ var TableBody = function TableBody(props) {
                 width: column.width
               },
               tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
-              className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === props.sortedColumn && !!props.sortedDirection ? 'sorted' : ''),
+              className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === props.sortedColumn && !!props.sortedDirection ? 'sorted' : '', " ").concat(column.justify || ''),
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableStyles.StyledTableHeaderColumnContent, {
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   children: column.name

package/dist/Table/TableBody.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableBody.tsx"],"names":["TableBody","props","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","width","sortedColumn","sortedDirection","name","currentPageRows","length","index","selectable","onRowClick","undefined","maxWidth","shortenText","justify","noRowsLabel"],"mappings":"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","sourcesContent":["import {TableColumn, TableProps, TableSortingDirection} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n  StyledTableBody,\n  StyledTableBodyRow,\n  StyledTableCell,\n  StyledTableCellContent,\n  StyledTableCellIcon,\n  StyledTableCellText,\n  StyledTableHeaderColumn,\n  StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableNoRowsLabelRow,\n  StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {ArrowLineDown, ArrowLineUp} from \"../icons/systemicons/SystemIcons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n  currentPageRows: any[];\n  onRowClick?: (row: any) => void;\n  selected?: any | any[];\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n  sortedColumn?: string;\n  sortedDirection?: TableSortingDirection;\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n  const [scrollable, setScrollable] = React.useState(false);\n\n  React.useEffect(() => {\n    const clientWidth = node?.clientWidth ?? 0;\n    const scrollWidth = node?.scrollWidth ?? 0;\n    setScrollable(scrollWidth > clientWidth);\n  }, [dimensions, node, props.columns, props.rows]);\n\n\n  const renderCellBody = (column: TableColumn, row: any) => {\n      switch (column.type) {\n        case 'link': {\n          const tmp = ({\n            variant: 'default',\n            href: '#',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as HyperlinkProps;\n          return (\n            <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                       {...tmp}\n                       onClick={(e) => {\n                         e.preventDefault();\n                         e.stopPropagation();\n                         column.action && column.action(row, e);\n                       }}>\n              {row[column.key]}\n            </HyperLink>\n          );\n        }\n        case 'icon': {\n          const tmp = ({\n            iconColor: column.colorFn && column.colorFn(row, column.key),\n            variant: 'secondary',\n            shape: 'circular',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            useTransparentBackground: true,\n            ...column.additionalProps\n          }) as IconButtonProps;\n          return <IconButton  {...tmp}\n                              action={(e) => {\n                                e?.stopPropagation();\n                                column.action && column.action(row, e);\n                              }}>\n            {column.icon}\n          </IconButton>\n        }\n        case 'button': {\n          const tmp = ({\n            variant: 'tertiary',\n            size: Size.Small,\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as ButtonProps;\n          return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                         {...tmp}\n                         onClick={(e) => {\n                           e?.stopPropagation();\n                           column.action && column.action(row, e);\n                         }}>\n            {row[column.key]}\n          </Button>\n        }\n        case 'boolean':\n          return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n        case 'custom':\n          return column.customContent && column.customContent(row, column.key);\n        case 'number':\n        case 'text':\n        default:\n          return (\n            <>\n              {\n                column.icon &&\n                  <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n              }\n              <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n            </>\n          );\n      }\n    }\n\n  const isSelected = (row: any) => {\n    return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n      (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n  }\n\n  return (\n      <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n          <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n          <StyledTableHeaderRow>\n            <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n            {\n              props.multiSelect &&\n                <StyledTableHeaderColumn>\n                    <StyledTableHeaderColumnContent>\n                        <Checkbox selected={props.selectAllState === 'all'}\n                                  disabled={props.showLoadingIndicator}\n                                  semiSelected={props.selectAllState === 'some'}\n                                  select={props.onSelectAllClick}/>\n                    </StyledTableHeaderColumnContent>\n                </StyledTableHeaderColumn>\n            }\n            {props.columns.map((column: TableColumn) => (\n              <StyledTableHeaderColumn key={column.key}\n                                       onMouseDown={defaultOnMouseDownHandler}\n                                       onClick={(e) => column.sortable && props.sortByColumn(column)}\n                                       onKeyPress={(e) => {\n                                         if (e.key === 'Enter' || e.key === ' ') {\n                                           column.sortable && props.sortByColumn(column)\n                                         }\n                                       }}\n                                       style={{width: column.width}}\n                                       tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n                                       className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortedColumn && !!props.sortedDirection ? 'sorted' : ''}`}>\n                <StyledTableHeaderColumnContent>\n                <span>\n                  {column.name}\n                </span>\n                  {\n                    column.key === props.sortedColumn &&\n                    (\n                      <StyledTableHeaderColumnSortDirection>\n                        {\n                          props.sortedDirection === 'asc'\n                            ?  <ArrowLineUp size={'24px'}/>\n                            : <ArrowLineDown size={'24px'}/>\n                        }\n                      </StyledTableHeaderColumnSortDirection>\n                    )\n                  }\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            ))}\n          </StyledTableHeaderColumns>\n          </StyledTableHeaderRow>\n          <StyledTableBody>\n            {props.currentPageRows.length > 0 ? (\n              props.currentPageRows.map((row: any, index: number) => (\n                <StyledTableBodyRow key={`row_${index}`}\n                                    className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n                                    onClick={() => props.onRowClick && props.onRowClick(row)}\n                                    onMouseDown={defaultOnMouseDownHandler}\n                                    onKeyPress={(e) => {\n                                      if (e.key === 'Enter') {\n                                        props.onRowClick && props.onRowClick(row);\n                                      }\n                                    }}\n                                    tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n                                    data-testid=\"TestTableDataRow\">\n                  {\n                    props.multiSelect &&\n                      <StyledTableCell>\n                          <StyledTableCellContent>\n                              <Checkbox selected={isSelected(row)}/>\n                          </StyledTableCellContent>\n                      </StyledTableCell>\n                  }\n                  {props.columns.map((column: TableColumn) => (\n                    <StyledTableCell key={`row_${index}_${column.key}`}\n                                     style={{maxWidth: column.width}}\n                                     title={column.shortenText && row[column.key]}>\n                      <StyledTableCellContent\n                        className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n                        style={{\n                          color: column.colorFn && column.colorFn(row, column.key),\n                        }}>\n                        {renderCellBody(column, row)}\n                      </StyledTableCellContent>\n                    </StyledTableCell>\n                  ))}\n                </StyledTableBodyRow>\n              ))\n            ) : (\n              <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n                <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n                  <StyledTableCellContent className={'center'}>\n                    {props.noRowsLabel ?? 'There are no rows to display'}\n                  </StyledTableCellContent>\n                </StyledTableCell>\n              </StyledTableNoRowsLabelRow>\n            )}\n\n          </StyledTableBody>\n        </StyledTable>\n      </StyledTableBodyWrapper>\n    );\n  }\n;\n\nexport default TableBody;\n"],"file":"TableBody.cjs"}
+{"version":3,"sources":["../../src/Table/TableBody.tsx"],"names":["TableBody","props","updateOnResize","scrollContainerRef","dimensions","node","React","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","defaultOnMouseDownHandler","sortable","sortByColumn","width","sortedColumn","sortedDirection","justify","name","currentPageRows","length","index","selectable","onRowClick","undefined","maxWidth","shortenText","noRowsLabel"],"mappings":"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","sourcesContent":["import {TableColumn, TableProps, TableSortingDirection} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n  StyledTableBody,\n  StyledTableBodyRow,\n  StyledTableCell,\n  StyledTableCellContent,\n  StyledTableCellIcon,\n  StyledTableCellText,\n  StyledTableHeaderColumn,\n  StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableNoRowsLabelRow,\n  StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {ArrowLineDown, ArrowLineUp} from \"../icons/systemicons/SystemIcons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n  currentPageRows: any[];\n  onRowClick?: (row: any) => void;\n  selected?: any | any[];\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n  sortedColumn?: string;\n  sortedDirection?: TableSortingDirection;\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n  const [scrollable, setScrollable] = React.useState(false);\n\n  React.useEffect(() => {\n    const clientWidth = node?.clientWidth ?? 0;\n    const scrollWidth = node?.scrollWidth ?? 0;\n    setScrollable(scrollWidth > clientWidth);\n  }, [dimensions, node, props.columns, props.rows]);\n\n\n  const renderCellBody = (column: TableColumn, row: any) => {\n      switch (column.type) {\n        case 'link': {\n          const tmp = ({\n            variant: 'default',\n            href: '#',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as HyperlinkProps;\n          return (\n            <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                       {...tmp}\n                       onClick={(e) => {\n                         e.preventDefault();\n                         e.stopPropagation();\n                         column.action && column.action(row, e);\n                       }}>\n              {row[column.key]}\n            </HyperLink>\n          );\n        }\n        case 'icon': {\n          const tmp = ({\n            iconColor: column.colorFn && column.colorFn(row, column.key),\n            variant: 'secondary',\n            shape: 'circular',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            useTransparentBackground: true,\n            ...column.additionalProps\n          }) as IconButtonProps;\n          return <IconButton  {...tmp}\n                              action={(e) => {\n                                e?.stopPropagation();\n                                column.action && column.action(row, e);\n                              }}>\n            {column.icon}\n          </IconButton>\n        }\n        case 'button': {\n          const tmp = ({\n            variant: 'tertiary',\n            size: Size.Small,\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as ButtonProps;\n          return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                         {...tmp}\n                         onClick={(e) => {\n                           e?.stopPropagation();\n                           column.action && column.action(row, e);\n                         }}>\n            {row[column.key]}\n          </Button>\n        }\n        case 'boolean':\n          return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n        case 'custom':\n          return column.customContent && column.customContent(row, column.key);\n        case 'number':\n        case 'text':\n        default:\n          return (\n            <>\n              {\n                column.icon &&\n                  <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n              }\n              <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n            </>\n          );\n      }\n    }\n\n  const isSelected = (row: any) => {\n    return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n      (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n  }\n\n  return (\n      <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n          <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n          <StyledTableHeaderRow>\n            <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n            {\n              props.multiSelect &&\n                <StyledTableHeaderColumn>\n                    <StyledTableHeaderColumnContent>\n                        <Checkbox selected={props.selectAllState === 'all'}\n                                  disabled={props.showLoadingIndicator}\n                                  semiSelected={props.selectAllState === 'some'}\n                                  select={props.onSelectAllClick}/>\n                    </StyledTableHeaderColumnContent>\n                </StyledTableHeaderColumn>\n            }\n            {props.columns.map((column: TableColumn) => (\n              <StyledTableHeaderColumn key={column.key}\n                                       onMouseDown={defaultOnMouseDownHandler}\n                                       onClick={(e) => column.sortable && props.sortByColumn(column)}\n                                       onKeyPress={(e) => {\n                                         if (e.key === 'Enter' || e.key === ' ') {\n                                           column.sortable && props.sortByColumn(column)\n                                         }\n                                       }}\n                                       style={{width: column.width}}\n                                       tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n                                       className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortedColumn && !!props.sortedDirection ? 'sorted' : ''} ${column.justify || ''}`}>\n                <StyledTableHeaderColumnContent>\n                <span>\n                  {column.name}\n                </span>\n                  {\n                    column.key === props.sortedColumn &&\n                    (\n                      <StyledTableHeaderColumnSortDirection>\n                        {\n                          props.sortedDirection === 'asc'\n                            ?  <ArrowLineUp size={'24px'}/>\n                            : <ArrowLineDown size={'24px'}/>\n                        }\n                      </StyledTableHeaderColumnSortDirection>\n                    )\n                  }\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            ))}\n          </StyledTableHeaderColumns>\n          </StyledTableHeaderRow>\n          <StyledTableBody>\n            {props.currentPageRows.length > 0 ? (\n              props.currentPageRows.map((row: any, index: number) => (\n                <StyledTableBodyRow key={`row_${index}`}\n                                    className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n                                    onClick={() => props.onRowClick && props.onRowClick(row)}\n                                    onMouseDown={defaultOnMouseDownHandler}\n                                    onKeyPress={(e) => {\n                                      if (e.key === 'Enter') {\n                                        props.onRowClick && props.onRowClick(row);\n                                      }\n                                    }}\n                                    tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n                                    data-testid=\"TestTableDataRow\">\n                  {\n                    props.multiSelect &&\n                      <StyledTableCell>\n                          <StyledTableCellContent>\n                              <Checkbox selected={isSelected(row)}/>\n                          </StyledTableCellContent>\n                      </StyledTableCell>\n                  }\n                  {props.columns.map((column: TableColumn) => (\n                    <StyledTableCell key={`row_${index}_${column.key}`}\n                                     style={{maxWidth: column.width}}\n                                     title={column.shortenText && row[column.key]}>\n                      <StyledTableCellContent\n                        className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n                        style={{\n                          color: column.colorFn && column.colorFn(row, column.key),\n                        }}>\n                        {renderCellBody(column, row)}\n                      </StyledTableCellContent>\n                    </StyledTableCell>\n                  ))}\n                </StyledTableBodyRow>\n              ))\n            ) : (\n              <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n                <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n                  <StyledTableCellContent className={'center'}>\n                    {props.noRowsLabel ?? 'There are no rows to display'}\n                  </StyledTableCellContent>\n                </StyledTableCell>\n              </StyledTableNoRowsLabelRow>\n            )}\n\n          </StyledTableBody>\n        </StyledTable>\n      </StyledTableBodyWrapper>\n    );\n  }\n;\n\nexport default TableBody;\n"],"file":"TableBody.cjs"}

package/dist/Table/TableBody.js

@@ -171,7 +171,7 @@ var TableBody = function TableBody(props) {
                 width: column.width
               },
               tabIndex: column.sortable && !props.showLoadingIndicator ? 0 : -1,
-              className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === props.sortedColumn && !!props.sortedDirection ? 'sorted' : ''),
+              className: "".concat(!!column.sortable ? 'sortable' : '', " ").concat(column.key === props.sortedColumn && !!props.sortedDirection ? 'sorted' : '', " ").concat(column.justify || ''),
               children: /*#__PURE__*/_jsxs(StyledTableHeaderColumnContent, {
                 children: [/*#__PURE__*/_jsx("span", {
                   children: column.name

package/dist/Table/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableBody.tsx"],"names":["Button","Size","React","Checkbox","IconButton","HyperLink","StyledTableBody","StyledTableBodyRow","StyledTableCell","StyledTableCellContent","StyledTableCellIcon","StyledTableCellText","StyledTableHeaderColumn","StyledTableHeaderColumnContent","StyledTableHeaderColumns","StyledTableNoRowsLabelRow","StyledTable","StyledTableBodyWrapper","StyledTableHeaderRow","StyledTableHeaderColumnSortDirection","defaultOnMouseDownHandler","ArrowLineDown","ArrowLineUp","useDimensionsRef","TableBody","props","updateOnResize","scrollContainerRef","dimensions","node","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","sortable","sortByColumn","width","sortedColumn","sortedDirection","name","currentPageRows","length","index","selectable","onRowClick","undefined","maxWidth","shortenText","justify","noRowsLabel"],"mappings":"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","sourcesContent":["import {TableColumn, TableProps, TableSortingDirection} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n  StyledTableBody,\n  StyledTableBodyRow,\n  StyledTableCell,\n  StyledTableCellContent,\n  StyledTableCellIcon,\n  StyledTableCellText,\n  StyledTableHeaderColumn,\n  StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableNoRowsLabelRow,\n  StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {ArrowLineDown, ArrowLineUp} from \"../icons/systemicons/SystemIcons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n  currentPageRows: any[];\n  onRowClick?: (row: any) => void;\n  selected?: any | any[];\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n  sortedColumn?: string;\n  sortedDirection?: TableSortingDirection;\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n  const [scrollable, setScrollable] = React.useState(false);\n\n  React.useEffect(() => {\n    const clientWidth = node?.clientWidth ?? 0;\n    const scrollWidth = node?.scrollWidth ?? 0;\n    setScrollable(scrollWidth > clientWidth);\n  }, [dimensions, node, props.columns, props.rows]);\n\n\n  const renderCellBody = (column: TableColumn, row: any) => {\n      switch (column.type) {\n        case 'link': {\n          const tmp = ({\n            variant: 'default',\n            href: '#',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as HyperlinkProps;\n          return (\n            <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                       {...tmp}\n                       onClick={(e) => {\n                         e.preventDefault();\n                         e.stopPropagation();\n                         column.action && column.action(row, e);\n                       }}>\n              {row[column.key]}\n            </HyperLink>\n          );\n        }\n        case 'icon': {\n          const tmp = ({\n            iconColor: column.colorFn && column.colorFn(row, column.key),\n            variant: 'secondary',\n            shape: 'circular',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            useTransparentBackground: true,\n            ...column.additionalProps\n          }) as IconButtonProps;\n          return <IconButton  {...tmp}\n                              action={(e) => {\n                                e?.stopPropagation();\n                                column.action && column.action(row, e);\n                              }}>\n            {column.icon}\n          </IconButton>\n        }\n        case 'button': {\n          const tmp = ({\n            variant: 'tertiary',\n            size: Size.Small,\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as ButtonProps;\n          return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                         {...tmp}\n                         onClick={(e) => {\n                           e?.stopPropagation();\n                           column.action && column.action(row, e);\n                         }}>\n            {row[column.key]}\n          </Button>\n        }\n        case 'boolean':\n          return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n        case 'custom':\n          return column.customContent && column.customContent(row, column.key);\n        case 'number':\n        case 'text':\n        default:\n          return (\n            <>\n              {\n                column.icon &&\n                  <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n              }\n              <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n            </>\n          );\n      }\n    }\n\n  const isSelected = (row: any) => {\n    return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n      (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n  }\n\n  return (\n      <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n          <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n          <StyledTableHeaderRow>\n            <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n            {\n              props.multiSelect &&\n                <StyledTableHeaderColumn>\n                    <StyledTableHeaderColumnContent>\n                        <Checkbox selected={props.selectAllState === 'all'}\n                                  disabled={props.showLoadingIndicator}\n                                  semiSelected={props.selectAllState === 'some'}\n                                  select={props.onSelectAllClick}/>\n                    </StyledTableHeaderColumnContent>\n                </StyledTableHeaderColumn>\n            }\n            {props.columns.map((column: TableColumn) => (\n              <StyledTableHeaderColumn key={column.key}\n                                       onMouseDown={defaultOnMouseDownHandler}\n                                       onClick={(e) => column.sortable && props.sortByColumn(column)}\n                                       onKeyPress={(e) => {\n                                         if (e.key === 'Enter' || e.key === ' ') {\n                                           column.sortable && props.sortByColumn(column)\n                                         }\n                                       }}\n                                       style={{width: column.width}}\n                                       tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n                                       className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortedColumn && !!props.sortedDirection ? 'sorted' : ''}`}>\n                <StyledTableHeaderColumnContent>\n                <span>\n                  {column.name}\n                </span>\n                  {\n                    column.key === props.sortedColumn &&\n                    (\n                      <StyledTableHeaderColumnSortDirection>\n                        {\n                          props.sortedDirection === 'asc'\n                            ?  <ArrowLineUp size={'24px'}/>\n                            : <ArrowLineDown size={'24px'}/>\n                        }\n                      </StyledTableHeaderColumnSortDirection>\n                    )\n                  }\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            ))}\n          </StyledTableHeaderColumns>\n          </StyledTableHeaderRow>\n          <StyledTableBody>\n            {props.currentPageRows.length > 0 ? (\n              props.currentPageRows.map((row: any, index: number) => (\n                <StyledTableBodyRow key={`row_${index}`}\n                                    className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n                                    onClick={() => props.onRowClick && props.onRowClick(row)}\n                                    onMouseDown={defaultOnMouseDownHandler}\n                                    onKeyPress={(e) => {\n                                      if (e.key === 'Enter') {\n                                        props.onRowClick && props.onRowClick(row);\n                                      }\n                                    }}\n                                    tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n                                    data-testid=\"TestTableDataRow\">\n                  {\n                    props.multiSelect &&\n                      <StyledTableCell>\n                          <StyledTableCellContent>\n                              <Checkbox selected={isSelected(row)}/>\n                          </StyledTableCellContent>\n                      </StyledTableCell>\n                  }\n                  {props.columns.map((column: TableColumn) => (\n                    <StyledTableCell key={`row_${index}_${column.key}`}\n                                     style={{maxWidth: column.width}}\n                                     title={column.shortenText && row[column.key]}>\n                      <StyledTableCellContent\n                        className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n                        style={{\n                          color: column.colorFn && column.colorFn(row, column.key),\n                        }}>\n                        {renderCellBody(column, row)}\n                      </StyledTableCellContent>\n                    </StyledTableCell>\n                  ))}\n                </StyledTableBodyRow>\n              ))\n            ) : (\n              <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n                <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n                  <StyledTableCellContent className={'center'}>\n                    {props.noRowsLabel ?? 'There are no rows to display'}\n                  </StyledTableCellContent>\n                </StyledTableCell>\n              </StyledTableNoRowsLabelRow>\n            )}\n\n          </StyledTableBody>\n        </StyledTable>\n      </StyledTableBodyWrapper>\n    );\n  }\n;\n\nexport default TableBody;\n"],"file":"TableBody.js"}
+{"version":3,"sources":["../../src/Table/TableBody.tsx"],"names":["Button","Size","React","Checkbox","IconButton","HyperLink","StyledTableBody","StyledTableBodyRow","StyledTableCell","StyledTableCellContent","StyledTableCellIcon","StyledTableCellText","StyledTableHeaderColumn","StyledTableHeaderColumnContent","StyledTableHeaderColumns","StyledTableNoRowsLabelRow","StyledTable","StyledTableBodyWrapper","StyledTableHeaderRow","StyledTableHeaderColumnSortDirection","defaultOnMouseDownHandler","ArrowLineDown","ArrowLineUp","useDimensionsRef","TableBody","props","updateOnResize","scrollContainerRef","dimensions","node","useState","scrollable","setScrollable","useEffect","clientWidth","scrollWidth","columns","rows","renderCellBody","column","row","type","tmp","variant","href","tabIndex","showLoadingIndicator","additionalProps","colorFn","color","key","e","preventDefault","stopPropagation","action","iconColor","shape","useTransparentBackground","icon","size","Small","customContent","isSelected","multiSelect","selected","indexOf","keyExpr","layout","selectAllState","onSelectAllClick","map","sortable","sortByColumn","width","sortedColumn","sortedDirection","justify","name","currentPageRows","length","index","selectable","onRowClick","undefined","maxWidth","shortenText","noRowsLabel"],"mappings":"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","sourcesContent":["import {TableColumn, TableProps, TableSortingDirection} from './TableTypes';\nimport {Button} from '../Button';\nimport {Size} from '../types';\nimport * as React from 'react';\nimport {Checkbox} from '../InputFields';\nimport {ButtonProps} from '../Button/Button';\nimport IconButton, {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {HyperLink} from '../HyperLink';\nimport {\n  StyledTableBody,\n  StyledTableBodyRow,\n  StyledTableCell,\n  StyledTableCellContent,\n  StyledTableCellIcon,\n  StyledTableCellText,\n  StyledTableHeaderColumn,\n  StyledTableHeaderColumnContent,\n  StyledTableHeaderColumns,\n  StyledTableNoRowsLabelRow,\n  StyledTable, StyledTableBodyWrapper, StyledTableHeaderRow, StyledTableHeaderColumnSortDirection,\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {ArrowLineDown, ArrowLineUp} from \"../icons/systemicons/SystemIcons\";\nimport {useDimensionsRef} from \"rooks\";\n\n\ninterface TableBodyProps extends TableProps {\n  currentPageRows: any[];\n  onRowClick?: (row: any) => void;\n  selected?: any | any[];\n  sortByColumn: (column: TableColumn) => void;\n  onSelectAllClick: () => void;\n  selectAllState: 'all' | 'some' | 'none';\n  sortedColumn?: string;\n  sortedDirection?: TableSortingDirection;\n}\n\nconst TableBody: React.FC<TableBodyProps> = (props) => {\n\n  const [scrollContainerRef, dimensions, node] = useDimensionsRef({updateOnResize: true});\n  const [scrollable, setScrollable] = React.useState(false);\n\n  React.useEffect(() => {\n    const clientWidth = node?.clientWidth ?? 0;\n    const scrollWidth = node?.scrollWidth ?? 0;\n    setScrollable(scrollWidth > clientWidth);\n  }, [dimensions, node, props.columns, props.rows]);\n\n\n  const renderCellBody = (column: TableColumn, row: any) => {\n      switch (column.type) {\n        case 'link': {\n          const tmp = ({\n            variant: 'default',\n            href: '#',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as HyperlinkProps;\n          return (\n            <HyperLink style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                       {...tmp}\n                       onClick={(e) => {\n                         e.preventDefault();\n                         e.stopPropagation();\n                         column.action && column.action(row, e);\n                       }}>\n              {row[column.key]}\n            </HyperLink>\n          );\n        }\n        case 'icon': {\n          const tmp = ({\n            iconColor: column.colorFn && column.colorFn(row, column.key),\n            variant: 'secondary',\n            shape: 'circular',\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            useTransparentBackground: true,\n            ...column.additionalProps\n          }) as IconButtonProps;\n          return <IconButton  {...tmp}\n                              action={(e) => {\n                                e?.stopPropagation();\n                                column.action && column.action(row, e);\n                              }}>\n            {column.icon}\n          </IconButton>\n        }\n        case 'button': {\n          const tmp = ({\n            variant: 'tertiary',\n            size: Size.Small,\n            tabIndex: props.showLoadingIndicator ? -1 : 0,\n            ...column.additionalProps\n          }) as ButtonProps;\n          return <Button style={column.colorFn && {color: column.colorFn(row, column.key)}}\n                         {...tmp}\n                         onClick={(e) => {\n                           e?.stopPropagation();\n                           column.action && column.action(row, e);\n                         }}>\n            {row[column.key]}\n          </Button>\n        }\n        case 'boolean':\n          return <Checkbox selected={!!row[column.key]} readOnly={true}/>;\n        case 'custom':\n          return column.customContent && column.customContent(row, column.key);\n        case 'number':\n        case 'text':\n        default:\n          return (\n            <>\n              {\n                column.icon &&\n                  <StyledTableCellIcon>{column.icon}</StyledTableCellIcon>\n              }\n              <StyledTableCellText>{row[column.key]}</StyledTableCellText>\n            </>\n          );\n      }\n    }\n\n  const isSelected = (row: any) => {\n    return (props.multiSelect && props.selected?.indexOf(props.keyExpr ? row[props.keyExpr] : row) > -1) ||\n      (!props.multiSelect && props.selected === (props.keyExpr ? row[props.keyExpr] : row));\n  }\n\n  return (\n      <StyledTableBodyWrapper ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n          <StyledTable cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\" className={`table ${props.layout || ''}`}>\n          <StyledTableHeaderRow>\n            <StyledTableHeaderColumns data-testid=\"TestTableColumnHeaderRow\">\n            {\n              props.multiSelect &&\n                <StyledTableHeaderColumn>\n                    <StyledTableHeaderColumnContent>\n                        <Checkbox selected={props.selectAllState === 'all'}\n                                  disabled={props.showLoadingIndicator}\n                                  semiSelected={props.selectAllState === 'some'}\n                                  select={props.onSelectAllClick}/>\n                    </StyledTableHeaderColumnContent>\n                </StyledTableHeaderColumn>\n            }\n            {props.columns.map((column: TableColumn) => (\n              <StyledTableHeaderColumn key={column.key}\n                                       onMouseDown={defaultOnMouseDownHandler}\n                                       onClick={(e) => column.sortable && props.sortByColumn(column)}\n                                       onKeyPress={(e) => {\n                                         if (e.key === 'Enter' || e.key === ' ') {\n                                           column.sortable && props.sortByColumn(column)\n                                         }\n                                       }}\n                                       style={{width: column.width}}\n                                       tabIndex={column.sortable && !props.showLoadingIndicator ? 0 : -1}\n                                       className={`${!!column.sortable ? 'sortable' : ''} ${column.key === props.sortedColumn && !!props.sortedDirection ? 'sorted' : ''} ${column.justify || ''}`}>\n                <StyledTableHeaderColumnContent>\n                <span>\n                  {column.name}\n                </span>\n                  {\n                    column.key === props.sortedColumn &&\n                    (\n                      <StyledTableHeaderColumnSortDirection>\n                        {\n                          props.sortedDirection === 'asc'\n                            ?  <ArrowLineUp size={'24px'}/>\n                            : <ArrowLineDown size={'24px'}/>\n                        }\n                      </StyledTableHeaderColumnSortDirection>\n                    )\n                  }\n                </StyledTableHeaderColumnContent>\n              </StyledTableHeaderColumn>\n            ))}\n          </StyledTableHeaderColumns>\n          </StyledTableHeaderRow>\n          <StyledTableBody>\n            {props.currentPageRows.length > 0 ? (\n              props.currentPageRows.map((row: any, index: number) => (\n                <StyledTableBodyRow key={`row_${index}`}\n                                    className={`${props.selectable ? 'selectable' : ''} ${isSelected(row) ? 'selected' : ''}`}\n                                    onClick={() => props.onRowClick && props.onRowClick(row)}\n                                    onMouseDown={defaultOnMouseDownHandler}\n                                    onKeyPress={(e) => {\n                                      if (e.key === 'Enter') {\n                                        props.onRowClick && props.onRowClick(row);\n                                      }\n                                    }}\n                                    tabIndex={props.selectable && !props.showLoadingIndicator ? 0 : undefined}\n                                    data-testid=\"TestTableDataRow\">\n                  {\n                    props.multiSelect &&\n                      <StyledTableCell>\n                          <StyledTableCellContent>\n                              <Checkbox selected={isSelected(row)}/>\n                          </StyledTableCellContent>\n                      </StyledTableCell>\n                  }\n                  {props.columns.map((column: TableColumn) => (\n                    <StyledTableCell key={`row_${index}_${column.key}`}\n                                     style={{maxWidth: column.width}}\n                                     title={column.shortenText && row[column.key]}>\n                      <StyledTableCellContent\n                        className={`${column.shortenText ? `truncate-text` : ''} ${column.justify || ''}`}\n                        style={{\n                          color: column.colorFn && column.colorFn(row, column.key),\n                        }}>\n                        {renderCellBody(column, row)}\n                      </StyledTableCellContent>\n                    </StyledTableCell>\n                  ))}\n                </StyledTableBodyRow>\n              ))\n            ) : (\n              <StyledTableNoRowsLabelRow data-testid=\"TestTableNoDataRow\">\n                <StyledTableCell colSpan={props.columns.length + (props.multiSelect ? 1 : 0)}>\n                  <StyledTableCellContent className={'center'}>\n                    {props.noRowsLabel ?? 'There are no rows to display'}\n                  </StyledTableCellContent>\n                </StyledTableCell>\n              </StyledTableNoRowsLabelRow>\n            )}\n\n          </StyledTableBody>\n        </StyledTable>\n      </StyledTableBodyWrapper>\n    );\n  }\n;\n\nexport default TableBody;\n"],"file":"TableBody.js"}

package/dist/Table/TableStyles.cjs

@@ -62,7 +62,7 @@ var StyledTableHeaderColumnSortDirection = _styledComponents.default.span(_templ
 
 exports.StyledTableHeaderColumnSortDirection = StyledTableHeaderColumnSortDirection;
 
-var StyledTableHeaderColumn = _styledComponents.default.th(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _styles.focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, _styles.COLORS.neutral_20);
+var StyledTableHeaderColumn = _styledComponents.default.th(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _styles.focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, _styles.COLORS.neutral_20);
 
 exports.StyledTableHeaderColumn = StyledTableHeaderColumn;
 

package/dist/Table/TableStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Size","Small"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"file":"TableStyles.cjs"}
+{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Size","Small"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n  position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n  background: transparent;\n  width: 100%;\n\n  &.fixed {\n    table-layout: fixed;\n  }\n\n  &.auto {\n    table-layout: auto;\n  }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  box-sizing: border-box;\n  min-height: 56px;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 2px solid ${COLORS.neutral_200};\n  padding: 0 16px;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n  .title-menu {\n    margin-right: -16px;\n  }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  position: relative;\n  text-align: unset;\n  background-color: ${COLORS.white};\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n      z-index: ${Z_INDEXES.hover};\n    }\n\n    &:active {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      z-index: ${Z_INDEXES.active};\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ${StyledTableHeaderColumnContent} > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ${COLORS.primary_100};\n  }\n  \n  &:hover {\n    background-color: ${COLORS.primary_200};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n  }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n  min-height: 48px;\n\n  padding: 0 16px;\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  gap: 8px;\n\n  &.truncate-text,\n  &.truncate-text span {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &.left {\n    justify-content: left;\n  }\n\n  &.right {\n    justify-content: right;\n  }\n\n  &.center {\n    justify-content: center;\n  }\n\n  a:first-letter,\n  span:first-letter {\n    text-transform: uppercase;\n  }\n  \n  ${StyledCheckBox}{\n    width: fit-content;\n  }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n  color: ${COLORS.neutral_700};\n  width: 24px;\n  height: 24px;\n\n  svg {\n    color: ${COLORS.neutral_700};\n    width: 24px;\n    height: 24px;\n  }\n`;\n\nexport const StyledTableCellText = styled.span`\n  padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n  border-top: 2px solid ${COLORS.neutral_200};\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  box-sizing: border-box;\n  min-height: 56px;\n\n  display: flex;\n  align-items: center;\n  justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n  padding: 0 16px;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n  display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  background-color: rgba(255, 255, 255, 0.75);\n  top: 0;\n  z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n  position: relative;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  border-top: 1px solid ${COLORS.neutral_200};\n  border-left: none;\n  border-right: none;\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: ${COLORS.white};\n\n  cursor: pointer;\n\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  \n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    display: none;\n  }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"file":"TableStyles.cjs"}

package/dist/Table/TableStyles.js

@@ -28,7 +28,7 @@ export var StyledTableHeaderRow = styled.thead(_templateObject6 || (_templateObj
 export var StyledTableHeaderColumns = styled.tr(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
 export var StyledTableHeaderColumnContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 56px;\n  padding: 0 16px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), COLORS.neutral_200, COLORS.neutral_200);
 export var StyledTableHeaderColumnSortDirection = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
-export var StyledTableHeaderColumn = styled.th(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
+export var StyledTableHeaderColumn = styled.th(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  position: relative;\n  text-align: unset;\n  background-color: ", ";\n\n  //fixes header heights no idea why\n  height: 1px;\n\n  &.sortable {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      z-index: ", ";\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.left {\n    & > div {\n      justify-content: left;\n    }\n  }\n\n  &.right {\n    & > div {\n      justify-content: right;\n    }\n  }\n\n  &.center {\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  &.sortable ", " > svg {\n    opacity: 0;\n  }\n\n  &.sortable.sorted ", " > svg {\n    opacity: 1;\n  }\n\n  &.sorted {\n    background-color: ", ";\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
 export var StyledTableBodyRow = styled.tr(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  position: relative;\n  outline: none;\n\n  &.selected{\n    background-color: ", ";\n  }\n  \n  &:hover {\n    background-color: ", ";\n    z-index: ", ";\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:active {\n    z-index: ", ";\n  }\n\n"])), COLORS.primary_100, COLORS.primary_200, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
 export var StyledTableNoRowsLabelRow = styled.tr(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: relative;\n  outline: none;\n  background-color: ", ";\n"])), COLORS.neutral_50);
 export var StyledTableBody = styled.tbody(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n\n  ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ", ";\n  }\n"])), StyledTableBodyRow, COLORS.neutral_50, StyledTableBodyRow, COLORS.neutral_20);