npm - @laerdal/life-react-components - Versions diffs - 1.2.2-dev.1.full → 1.2.2-dev.11.full - Mend

@laerdal/life-react-components 1.2.2-dev.1.full → 1.2.2-dev.11.full

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js CHANGED Viewed

@@ -27,6 +27,8 @@ var _CommonStyles = require("../mobile/CommonStyles");
 var _typography = require("../../styles/typography");
+var _zIndexes = require("../../styles/z-indexes");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,7 +39,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ", ";\n  z-index: 100;\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _styles.COLORS.neutral_200);
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  min-width: 312px;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  border-radius: 4px;\n  border: 1px solid ", ";\n  z-index: ", ";\n\n  .open & {\n    display: block;\n  }\n  \n  .sign-out{\n    width: 90%;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 8px auto 12px auto;\n  }\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _styles.COLORS.neutral_200, _zIndexes.Z_INDEXES.fixed_menu);
 var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  &:not(:first-of-type)::before {\n    content: '';\n    position: absolute;\n    background: ", ";\n    height: 1px;\n    top: 0;\n    left: 16px;\n    right: 16px;\n  }\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])), _styles.COLORS.neutral_100);

package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","neutral_200","MenuSection","li","neutral_100","MenuSectionList","UserMenuSectionListStyling","StyledAvatarContainer","AvatarContainer","AvatarAndName","div","neutral_600","ComponentTextStyle","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Size","Large","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAGC,0BAAOC,EAAV,6oBAIYC,eAAOC,KAJnB,EAQaC,sBARb,EASKA,sBATL,EAaYF,eAAOG,WAbnB,CAAV;;AA8BA,IAAMC,WAAW,GAAGN,0BAAOO,EAAV,sYAOCL,eAAOM,WAPR,CAAjB;;AAqBA,IAAMC,eAAe,GAAGT,0BAAOC,EAAV,uIAKjBS,wCALiB,CAArB;;AAQA,IAAMC,qBAAqB,GAAG,+BAAOC,uBAAP,CAAH,4HAA3B;;AAKA,IAAMC,aAAa,GAAGb,0BAAOc,GAAV,2NAMb,oCAAmBZ,eAAOa,WAA1B,CANa,EAUb,oCAAmBC,2BAAmBC,OAAtC,EAA+Cf,eAAOa,WAAtD,CAVa,CAAnB;;AAcA,IAAMG,YAAY,GAAGlB,0BAAOc,GAAV,sHAAlB;;AAKA,IAAMK,gBAAgB,GAAGnB,0BAAOoB,IAAV,wGAElB,oCAAmBJ,2BAAmBK,IAAtC,EAA4CnB,eAAOa,WAAnD,CAFkB,CAAtB;;AAkBA,IAAMO,QAAQ,GAAG,SAAXA,QAAW,OAA0J;AAAA,MAAvJC,SAAuJ,QAAvJA,SAAuJ;AAAA,MAA5IC,QAA4I,QAA5IA,QAA4I;AAAA,MAAlIC,KAAkI,QAAlIA,KAAkI;AAAA,MAA3HC,gBAA2H,QAA3HA,gBAA2H;AAAA,MAAzGC,eAAyG,QAAzGA,eAAyG;AAAA,MAAxFC,cAAwF,QAAxFA,cAAwF;AAAA,MAAxEC,mBAAwE,QAAxEA,mBAAwE;AAAA,MAAnDC,cAAmD,QAAnDA,cAAmD;AAAA,MAAnCC,OAAmC,QAAnCA,OAAmC;AAAA,MAA1BC,YAA0B,QAA1BA,YAA0B;AACzKC,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpB,aAASC,cAAT,CAAwBC,CAAxB,EAAgC;AAC9B,UAAIA,CAAC,CAACC,OAAF,KAAc,EAAlB,EAAsB;AACpBV,QAAAA,eAAe;AAChB;AACF;;AAEDW,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCJ,cAArC,EAAqD,KAArD;AACA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCL,cAAxC,EAAwD,KAAxD;AACD,KAFD;AAGD,GAXD,EAWG,CAACR,eAAD,CAXH;AAaA,sBACE,oBAAC,IAAD;AAAM,IAAA,OAAO,EAAEA,eAAf;AAAgC,IAAA,IAAI,EAAC,MAArC;AAA4C,uBAAgB;AAA5D,kBACE,oBAAC,aAAD;AAAe,IAAA,GAAG,EAAC;AAAnB,kBACE,oBAAC,qBAAD;AAAuB,IAAA,WAAW,EAAE;AAApC,kBACE,oBAAC,eAAD;AAAQ,IAAA,IAAI,EAAE,EAAd;AAAkB,IAAA,SAAS,EAAEJ,SAA7B;AAAwC,IAAA,QAAQ,EAAEC,QAAlD;AAA4D,IAAA,KAAK,EAAEtB,eAAOuC,WAA1E;AAAuF,IAAA,eAAe,EAAC;AAAvG,IADF,CADF,eAIE,oBAAC,YAAD,qBACE;AAAI;AAAJ,eAAyBlB,SAAzB,cAAsCC,QAAtC,EADF,eAEE;AAAM;AAAN,KAAwBC,KAAxB,CAFF,CAJF,CADF,EAUGG,cAAc,IAAI,CAAAA,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEc,MAAhB,IAAyB,CAA3C,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,eAAD,QACGd,cADH,aACGA,cADH,uBACGA,cAAc,CAAEe,GAAhB,CAAoB,UAAAC,OAAO;AAAA,wBAC1B,oBAAC,iBAAD;AAAU,MAAA,GAAG,EAAEA,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAAxB;AAA4B,MAAA,EAAE,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAAzC;AAA6C,MAAA,QAAQ,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,KAAhE;AAAuE,MAAA,IAAI,EAAEF,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEG,IAAtF;AAA4F,MAAA,OAAO,EAAEH,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI;AAA9G,MAD0B;AAAA,GAA3B,CADH,CADF,CAXJ,EAoBGnB,mBAAmB,IAAI,CAAAA,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEa,MAArB,IAA8B,CAArD,iBACC,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,gBAAD,QAAmBhB,gBAAgB,IAAI,EAAvC,CADF,eAEE,oBAAC,eAAD,QACGG,mBADH,aACGA,mBADH,uBACGA,mBAAmB,CAAEc,GAArB,CAAyB,UAAAC,OAAO;AAAA,wBAC/B,oBAAC,iBAAD;AAAU,MAAA,GAAG,EAAEA,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAAxB;AAA4B,MAAA,EAAE,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAAzC;AAA6C,MAAA,QAAQ,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,KAAhE;AAAuE,MAAA,IAAI,EAAEF,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEG,IAAtF;AAA4F,MAAA,OAAO,EAAEH,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI;AAA9G,MAD+B;AAAA,GAAhC,CADH,CAFF,CArBJ,eA+BE,oBAAC,WAAD;AAAa,IAAA,GAAG,EAAC;AAAjB,kBACE,oBAAC,eAAD,QACGlB,cADH,aACGA,cADH,uBACGA,cAAc,CAAEa,GAAhB,CAAoB,UAAAC,OAAO;AAAA,wBAC1B,oBAAC,iBAAD;AAAU,MAAA,GAAG,EAAEA,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAAxB;AAA4B,MAAA,UAAU,EAAED,OAAO,CAACK,UAAhD;AAA4D,MAAA,EAAE,EAAEL,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEC,EAAzE;AAA6E,MAAA,QAAQ,EAAED,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEE,KAAhG;AAAuG,MAAA,IAAI,EAAEF,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEG,IAAtH;AAA4H,MAAA,OAAO,EAAEH,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEI;AAA9I,MAD0B;AAAA,GAA3B,CADH,EAIGjB,OAAO,iBACN,oBAAC,cAAD;AACE,IAAA,KAAK,EAAC,KADR;AAEE,IAAA,SAAS,EAAC,uBAFZ;AAGE,IAAA,OAAO,EAAC,WAHV;AAIE,IAAA,IAAI,EAAEmB,YAAKC,KAJb;AAKE,IAAA,OAAO,EAAE,iBAAAf,CAAC,EAAI;AACZA,MAAAA,CAAC,CAACgB,cAAF;AACArB,MAAAA,OAAO,CAACK,CAAD,CAAP;AACD;AARH,KASGJ,YATH,CALJ,CADF,CA/BF,CADF;AAsDD,CApED;;;AAZET,EAAAA,S;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,gB;AACAC,EAAAA,e;AACAC,EAAAA,c;AACAC,EAAAA,mB;AACAC,EAAAA,c;AACAC,EAAAA,O;AACAC,EAAAA,Y;;eAyEaV,Q","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem, Size } from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n min-width: 312px;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: 100;\n\n .open & {\n display: block;\n }\n \n .sign-out{\n width: 90%;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 8px auto 12px auto;\n }\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ${COLORS.neutral_100};\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nconst MenuSectionList = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n margin: 25px 0 0 25px;\n pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n display: flex;\n flex-direction: row;\n\n h5 {\n margin: 28px 0 0 20px;\n ${HeadlineXXSStyling(COLORS.neutral_600)}\n }\n span {\n margin: 0 0 0 20px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\n\nconst NameAndEmail = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n margin-left: 25px;\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n firstName: string;\n lastName: string;\n email: string;\n organizationName: string;\n clickMenuAction: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n signOut?: (e: any) => void;\n signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n React.useEffect(() => {\n function handleKeyPress(e: any) {\n if (e.keyCode === 27) {\n clickMenuAction();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [clickMenuAction]);\n\n return (\n <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <AvatarAndName key=\"AvatarAndNameSection\">\n <StyledAvatarContainer hidePadding={true}>\n <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </StyledAvatarContainer>\n <NameAndEmail>\n <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n <span data-hj-suppress>{email}</span>\n </NameAndEmail>\n </AvatarAndName>\n {accountSection && accountSection?.length > 0 && (\n <MenuSection key=\"MobileAccountSection\">\n <MenuSectionList>\n {accountSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n {organizationSection && organizationSection?.length > 0 && (\n <MenuSection key=\"MobileOrganizationSection\">\n <OrganizationName>{organizationName \|\| ''}</OrganizationName>\n <MenuSectionList>\n {organizationSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n <MenuSection key=\"MobileSupportSection\">\n <MenuSectionList>\n {supportSection?.map(element => (\n <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n {signOut && (\n <Button\n width=\"90%\"\n className=\"UserMenuLink sign-out\"\n variant=\"secondary\"\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut(e);\n }}>\n {signOutLabel}\n </Button>\n )}\n </MenuSectionList>\n </MenuSection>\n </Menu>\n );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","neutral_200","Z_INDEXES","fixed_menu","MenuSection","li","neutral_100","MenuSectionList","UserMenuSectionListStyling","StyledAvatarContainer","AvatarContainer","AvatarAndName","div","neutral_600","ComponentTextStyle","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","Size","Large","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem, Size } from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n min-width: 312px;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: ${Z_INDEXES.fixed_menu};\n\n .open & {\n display: block;\n }\n \n .sign-out{\n width: 90%;\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 8px auto 12px auto;\n }\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ${COLORS.neutral_100};\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nconst MenuSectionList = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n margin: 25px 0 0 25px;\n pointer-events: none;\n`;\n\nconst AvatarAndName = styled.div`\n display: flex;\n flex-direction: row;\n\n h5 {\n margin: 28px 0 0 20px;\n ${HeadlineXXSStyling(COLORS.neutral_600)}\n }\n span {\n margin: 0 0 0 20px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n`;\n\nconst NameAndEmail = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n margin-left: 25px;\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n firstName: string;\n lastName: string;\n email: string;\n organizationName: string;\n clickMenuAction: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n signOut?: (e: any) => void;\n signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n React.useEffect(() => {\n function handleKeyPress(e: any) {\n if (e.keyCode === 27) {\n clickMenuAction();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [clickMenuAction]);\n\n return (\n <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <AvatarAndName key=\"AvatarAndNameSection\">\n <StyledAvatarContainer hidePadding={true}>\n <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </StyledAvatarContainer>\n <NameAndEmail>\n <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n <span data-hj-suppress>{email}</span>\n </NameAndEmail>\n </AvatarAndName>\n {accountSection && accountSection?.length > 0 && (\n <MenuSection key=\"MobileAccountSection\">\n <MenuSectionList>\n {accountSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n {organizationSection && organizationSection?.length > 0 && (\n <MenuSection key=\"MobileOrganizationSection\">\n <OrganizationName>{organizationName \|\| ''}</OrganizationName>\n <MenuSectionList>\n {organizationSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n <MenuSection key=\"MobileSupportSection\">\n <MenuSectionList>\n {supportSection?.map(element => (\n <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n {signOut && (\n <Button\n width=\"90%\"\n className=\"UserMenuLink sign-out\"\n variant=\"secondary\"\n size={Size.Large}\n onClick={e => {\n e.preventDefault();\n signOut(e);\n }}>\n {signOutLabel}\n </Button>\n )}\n </MenuSectionList>\n </MenuSection>\n </Menu>\n );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}

package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js CHANGED Viewed

@@ -15,6 +15,8 @@ var _reactRouterDom = require("react-router-dom");
 var _typography = require("../../styles/typography");
+var _zIndexes = require("../../styles/z-indexes");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -33,7 +35,7 @@ exports.Button = Button;
 var flowLeft = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
 var flowRight = (0, _styledComponents.keyframes)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n"])));
-var Menu = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: 100;\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.SMALL, flowLeft, flowLeft, flowRight, flowRight);
+var Menu = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  list-style: none;\n  margin: 0 auto 0 auto;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  right: 0;\n  top: 0;\n  min-width: 300px;\n  position: absolute;\n  z-index: ", ";\n  align-items: center;\n  width: 320px;\n  padding-inline-start: 0;\n\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  .closed & {\n    display: block;\n    -webkit-animation: ", " 0.3s ease-in-out;\n    animation: ", " 0.3s ease-in-out;\n  }\n"])), _styles.COLORS.white, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, flowLeft, flowLeft, flowRight, flowRight);
 exports.Menu = Menu;
@@ -52,7 +54,7 @@ exports.MenuSection = MenuSection;
 var MenuSectionList = _styledComponents.default.ul(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n    \n    a {\n      height: 100%;\n    }\n  }\n"])));
 exports.MenuSectionList = MenuSectionList;
-var UserMenuSectionListStyling = (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  li:hover:not(.disabled) {\n    background-color: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    background: ", ";\n    box-shadow: none;\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n    background-color: ", ";\n  }\n"])), _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_500, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
+var UserMenuSectionListStyling = (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  li {\n    position: relative;\n  }\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n    box-shadow: none;\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n    svg {\n      color: ", ";\n    }\n    background-color: ", ";\n  }\n"])), _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
 exports.UserMenuSectionListStyling = UserMenuSectionListStyling;
 var MenuLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ", "\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n"])), (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
 exports.MenuLink = MenuLink;

package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","Menu","ul","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","css","primary_20","primary_600","primary_500","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,iHAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,yIACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,uMAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,uMAAf;;AAWO,IAAME,IAAI,GAAGT,0BAAOU,EAAV,~~opBAIKN~~,eAAOC,KAJZ,~~EAgBbM~~,oBAAYC,KAhBC,~~EAsBQN~~,QAtBR,EAuBAA,QAvBA,EA4BQE,SA5BR,EA6BAA,SA7BA,CAAV;;;;AAiCA,~~IAAMK~~,KAAK,~~GAAGb~~,0BAAOC,GAAV,iHAAX;;;;AAKA,~~IAAMa~~,QAAQ,~~GAAGd~~,~~0BAAOe~~,IAAV,~~yJACVX~~,~~eAAOY~~,WADG,CAAd;;;;AAOA,IAAMC,WAAW,~~GAAGjB~~,~~0BAAOkB~~,EAAV,gMAAjB;;;;AASA,IAAMC,eAAe,~~GAAGnB~~,0BAAOU,EAAV,uOAArB;;;AAeA,~~IAAMU~~,0BAA0B,OAAGC,qBAAH,~~2oBAEfjB~~,~~eAAOkB~~,~~UAFQ~~,~~EAIxBlB~~,~~eAAOmB~~,~~WAJiB~~,~~EAOxBnB~~,~~eAAOmB~~,~~WAPiB~~,~~EAYTnB~~,~~eAAOoB~~,~~WAZE~~,~~EAmBrBpB~~,~~eAAOqB~~,~~WAnBc~~,~~EAsBxBrB~~,~~eAAOsB~~,~~WAtBiB~~,~~EAyBxBtB~~,~~eAAOsB~~,~~WAzBiB~~,EA+~~BxBtB~~,~~eAAOuB~~,WA/BiB,~~EAkCxBvB~~,~~eAAOuB~~,~~WAlCiB~~,~~EAoCfvB~~,~~eAAOwB~~,~~WApCQ~~,CAAhC;;~~AAwCA~~,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,8QAOjB,mCAAkBC,+BAAmBC,OAArC,~~EAA8C5B~~,~~eAAO6B~~,KAArD,CAPiB,CAAd;;;AAeA,IAAMC,WAAW,~~GAAGlC~~,0BAAOC,GAAV,iRACFG,eAAOC,KADL,EAEX,~~UAAC8B~~,KAAD;AAAA,SAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAvC;AAAA,CAFW,~~EAYNhC~~,eAAOC,KAZD,CAAjB;;;AAoBA,~~IAAMgC~~,QAAQ,~~OAAG9B~~,2BAAH,0MAAd","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n }\n`;\n\nexport const Menu = styled.ul`\n height: 100%;\n list-style: none;\n margin: 0 auto 0 auto;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n right: 0;\n top: 0;\n min-width: 300px;\n position: absolute;\n z-index: ~~100~~;\n align-items: center;\n width: 320px;\n padding-inline-start: 0;\n\n ${BREAKPOINTS.SMALL} {\n min-width: 360px;\n }\n\n .open & {\n display: block;\n -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n display: block;\n -webkit-animation: ${flowRight} 0.3s ease-in-out;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n \n a {\n height: 100%;\n }\n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li:hover:not(.disabled) {\n background-color: ${COLORS.primary_20};\n a {\n color: ${COLORS.primary_600};\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n background: ${COLORS.primary_100};\n box-shadow: none;\n a {\n color: ${COLORS.primary_800};\n }\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n svg {\n color: ${COLORS.neutral_300};\n }\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n background-color: ${COLORS.white};\n display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\ninterface MenuWrapperProps {\n isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n"],"file":"CommonStyles.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","Menu","ul","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","primary_500","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentTextStyle","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,iHAAf;;;;AAKA,IAAMC,MAAM,GAAGF,0BAAOG,MAAV,yIACGC,eAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,uMAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,uMAAf;;AAWO,IAAME,IAAI,GAAGT,0BAAOU,EAAV,qpBAIKN,eAAOC,KAJZ,EAWJM,oBAAUC,UAXN,EAgBbC,oBAAYC,KAhBC,EAsBQR,QAtBR,EAuBAA,QAvBA,EA4BQE,SA5BR,EA6BAA,SA7BA,CAAV;;;;AAiCA,IAAMO,KAAK,GAAGf,0BAAOC,GAAV,iHAAX;;;;AAKA,IAAMe,QAAQ,GAAGhB,0BAAOiB,IAAV,yJACVb,eAAOc,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGnB,0BAAOoB,EAAV,gMAAjB;;;;AASA,IAAMC,eAAe,GAAGrB,0BAAOU,EAAV,uOAArB;;;AAeA,IAAMY,0BAA0B,OAAGC,qBAAH,6uBAKxBZ,oBAAUa,KALc,EAMfpB,eAAOqB,UANQ,EAQxBrB,eAAOsB,WARiB,EAWxBtB,eAAOsB,WAXiB,EAgBxBf,oBAAUgB,KAhBc,EAiBTvB,eAAOwB,WAjBE,EAwBxBjB,oBAAUkB,MAxBc,EAyBrBzB,eAAO0B,WAzBc,EA4BxB1B,eAAO2B,WA5BiB,EA+BxB3B,eAAO2B,WA/BiB,EAqCxB3B,eAAO4B,WArCiB,EAwCxB5B,eAAO4B,WAxCiB,EA0Cf5B,eAAO6B,WA1CQ,CAAhC;;AA8CA,IAAMC,QAAQ,GAAG,+BAAOC,uBAAP,CAAH,8QAOjB,mCAAkBC,+BAAmBC,OAArC,EAA8CjC,eAAOkC,KAArD,CAPiB,CAAd;;;AAeA,IAAMC,WAAW,GAAGvC,0BAAOC,GAAV,iRACFG,eAAOC,KADL,EAEX,UAACmC,KAAD;AAAA,SAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAvC;AAAA,CAFW,EAYNrC,eAAOC,KAZD,CAAjB;;;AAoBA,IAAMqC,QAAQ,OAAGnC,2BAAH,0MAAd","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n }\n`;\n\nexport const Menu = styled.ul`\n height: 100%;\n list-style: none;\n margin: 0 auto 0 auto;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n right: 0;\n top: 0;\n min-width: 300px;\n position: absolute;\n z-index: ${Z_INDEXES.off_canvas};\n align-items: center;\n width: 320px;\n padding-inline-start: 0;\n\n ${BREAKPOINTS.SMALL} {\n min-width: 360px;\n }\n\n .open & {\n display: block;\n -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n display: block;\n -webkit-animation: ${flowRight} 0.3s ease-in-out;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n \n a {\n height: 100%;\n }\n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li {\n position: relative;\n }\n li:hover:not(.disabled) {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n a {\n color: ${COLORS.primary_600};\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n box-shadow: none;\n a {\n color: ${COLORS.primary_800};\n }\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n svg {\n color: ${COLORS.neutral_300};\n }\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n background-color: ${COLORS.white};\n display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\ninterface MenuWrapperProps {\n isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n"],"file":"CommonStyles.js"}

package/dist/js/InputFields/Checkbox.js CHANGED Viewed

@@ -66,7 +66,6 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
-  console.log('size prop', size.toString().toLowerCase());
   return /*#__PURE__*/React.createElement(StyledCheckBox, {
     key: id,
     ref: ref,

package/dist/js/InputFields/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","onKeyPress","e","keyCode","handleClick","Size","Medium","~~console","log","~~toString","toLowerCase","concat","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,y7CAQhB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CARW,EAWTC,eAAOC,KAXE,EA4BL,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACI,QAAN,GAAiBF,eAAOG,WAAxB,GAAsCL,KAAK,CAACM,WAAN,GAAoBJ,eAAOK,WAA3B,GAAyCL,eAAOM,WAA3F;AAAA,CA5BA,EAsCd,mCAAkBC,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CAtCc,EA0Cd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA1Cc,EA8Cd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA9Cc,EAqDMD,eAAOS,KArDb,EAsDQT,eAAOG,WAtDf,EAyDHH,eAAOM,WAzDJ,EAgEMN,eAAOU,UAhEb,EAmEHV,eAAOW,WAnEJ,EA0EAX,eAAOY,WA1EP,EA8EHZ,eAAOa,WA9EJ,EAuFPb,eAAOc,WAvFA,EA+FMd,eAAOS,KA/Fb,EAmGLT,eAAOc,WAnGF,CAApB;;AAqHA,IAAMC,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAwC,gBAWMC,GAXN,EAWc;AAAA;;AAAA,MAVhBC,EAUgB,QAVhBA,EAUgB;AAAA,MAThBjB,QASgB,QAThBA,QASgB;AAAA,MARhBkB,MAQgB,QARhBA,MAQgB;AAAA,MAPhBC,KAOgB,QAPhBA,KAOgB;AAAA,MANhBjB,WAMgB,QANhBA,WAMgB;AAAA,MALhBkB,4BAKgB,QALhBA,4BAKgB;AAAA,MAJhBC,QAIgB,QAJhBA,QAIgB;AAAA,MAHhBxB,MAGgB,QAHhBA,MAGgB;AAAA,MAFhByB,IAEgB,QAFhBA,IAEgB;AAAA,MADhBC,YACgB,QADhBA,YACgB;;AACrE,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACL,QAAzB,EAAmC;AACjCH,MAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD;AACF,GAJD;;AAMA,MAAM2B,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIN,QAAJ,EAAc;AACZ;AACD;;AACDH,IAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD,GALD;;AAOAsB,EAAAA,IAAI,YAAGA,IAAH,yCAAWM,YAAKC,MAApB;~~AAEAC~~,~~EAAAA,OAAO,CAACC,GAAR,CAAY,WAAZ,EAAyBT,IAAI,CAACU,QAAL,GAAgBC,WAAhB,EAAzB;AACA,~~sBACE,oBAAC,cAAD;AAAgB,IAAA,GAAG,~~EAAEhB~~,EAArB;AACgB,IAAA,GAAG,EAAED,GADrB;AAEgB,IAAA,QAAQ,EAAEK,QAF1B;AAGgB,IAAA,SAAS,EAAEC,IAAI,~~CAACU~~,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,~~CAAqCb~~,QAAQ,GAAG,WAAH,GAAiB,EAA9D,CAH3B;AAIgB,IAAA,QAAQ,EAAErB,QAJ1B;AAKgB,IAAA,QAAQ,EAAEqB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAL1C;AAMgB,IAAA,WAAW,EAAEnB,WAN7B;AAOgB,IAAA,MAAM,EAAEL,MAPxB;AAQgB,IAAA,OAAO,EAAE8B,WARzB;AASgB,IAAA,SAAS,EAAEH,UAT3B;AAUgB,IAAA,WAAW,EAAE,qBAAAC,CAAC;AAAA,aAAIA,CAAC,~~CAACU~~,cAAF,EAAJ;AAAA;AAV9B,kBAWE;AAAK,IAAA,EAAE,~~EAAElB~~,EAAT;AAAa,IAAA,SAAS,EAAE;AAAxB,KAEIjB,QAAQ,gBACJ,oBAAC,uBAAD;AAAY,IAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAA7E;AAAiF,IAAA,IAAI,EAAC;AAAtF,IADI,GAEJG,YAAY,gBACV,oBAAC,yBAAD;AAAc,IAAA,SAAS,EAAEH,4BAA4B,GAAG,oBAAH,GAA0B,EAA/E;AAAmF,IAAA,IAAI,EAAC;AAAxF,IADU,gBAEV,oBAAC,wBAAD;AAAa,IAAA,SAAS,EAAEA,4BAA4B,GAAG,oBAAH,GAA0B,EAA9E;AAAkF,IAAA,IAAI,EAAC;AAAvF,IANV,CAXF,EAqBID,KAAK,iBAEH;AAAO,IAAA,SAAS,EAAE,OAAlB;AACO,IAAA,OAAO,EAAEF;AADhB,KAEGE,KAFH,CAvBN,CADF;AAgCD,~~CA5DgB~~,CAAjB;;AAZEF,EAAAA,E;AACAjB,EAAAA,Q;AACAkB,EAAAA,M;AACAC,EAAAA,K;AACAjB,EAAAA,W;AACAmB,EAAAA,Q;AACAxB,EAAAA,M;AAEAuB,EAAAA,4B;AACAG,EAAAA,Y;;~~eAiEaV~~,Q","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n flex-direction: row;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n }\n }\n\n .label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &:not(.disabled):focus {\n outline: none;\n\n .icon {\n background-color: ${COLORS.white};\n box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ${COLORS.neutral_600};\n }\n }\n }\n\n &:not(.disabled):hover {\n .icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):active {\n .icon {\n background: ${COLORS.primary_100};\n box-shadow: none;\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.disabled {\n box-shadow: none;\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .icon,\n .label {\n pointer-events: none;\n }\n\n .icon{\n background-color: ${COLORS.white};\n }\n\n .icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\ninterface Props {\n id: string;\n selected: boolean;\n select: (selected: boolean) => void;\n label?: string;\n showWarning?: boolean;\n disabled?: boolean;\n margin?: string;\n size?: Size;\n iconPointerEventsTransparent?: boolean;\n semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n id,\n selected,\n select,\n label,\n showWarning,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected\n }: Props, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled) {\n select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled) {\n return;\n }\n select(!selected);\n };\n\n size = size ?? Size.Medium;\n\n ~~console.log('size prop', size.toString().toLowerCase());\n~~ return (\n <StyledCheckBox key={id}\n ref={ref}\n disabled={disabled}\n className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n showWarning={showWarning}\n margin={margin}\n onClick={handleClick}\n onKeyDown={onKeyPress}\n onMouseDown={e => e.preventDefault()}>\n <div id={id} className={'icon'}>\n {\n selected\n ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : semiSelected\n ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n }\n </div>\n {\n label &&\n (\n <label className={'label'}\n htmlFor={id}>\n {label}\n </label>\n )\n }\n </StyledCheckBox>\n );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
1	+ {"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n display: flex;\n flex-direction: row;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n align-items: center;\n\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\n cursor: pointer;\n\n color: ${COLORS.black};\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n\n svg {\n color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n }\n }\n\n .label {\n user-select: none;\n cursor: inherit;\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &.large {\n ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n }\n\n &:not(.disabled):focus {\n outline: none;\n\n .icon {\n background-color: ${COLORS.white};\n box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n svg {\n color: ${COLORS.neutral_600};\n }\n }\n }\n\n &:not(.disabled):hover {\n .icon {\n background-color: ${COLORS.primary_20};\n\n svg {\n color: ${COLORS.primary_700};\n }\n }\n }\n\n &:not(.disabled):active {\n .icon {\n background: ${COLORS.primary_100};\n box-shadow: none;\n\n svg {\n color: ${COLORS.primary_800};\n }\n }\n }\n\n &.disabled {\n box-shadow: none;\n cursor: not-allowed;\n\n color: ${COLORS.neutral_300};\n\n .icon,\n .label {\n pointer-events: none;\n }\n\n .icon{\n background-color: ${COLORS.white};\n }\n\n .icon svg {\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\ninterface Props {\n id: string;\n selected: boolean;\n select: (selected: boolean) => void;\n label?: string;\n showWarning?: boolean;\n disabled?: boolean;\n margin?: string;\n size?: Size;\n iconPointerEventsTransparent?: boolean;\n semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n id,\n selected,\n select,\n label,\n showWarning,\n iconPointerEventsTransparent,\n disabled,\n margin,\n size,\n semiSelected\n }: Props, ref) => {\n const onKeyPress = (e: any) => {\n if (e.keyCode === 13 && !disabled) {\n select(!selected);\n }\n };\n\n const handleClick = () => {\n if (disabled) {\n return;\n }\n select(!selected);\n };\n\n size = size ?? Size.Medium;\n\n return (\n <StyledCheckBox key={id}\n ref={ref}\n disabled={disabled}\n className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n showWarning={showWarning}\n margin={margin}\n onClick={handleClick}\n onKeyDown={onKeyPress}\n onMouseDown={e => e.preventDefault()}>\n <div id={id} className={'icon'}>\n {\n selected\n ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : semiSelected\n ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n }\n </div>\n {\n label &&\n (\n <label className={'label'}\n htmlFor={id}>\n {label}\n </label>\n )\n }\n </StyledCheckBox>\n );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/js/InputFields/DatepickerField.js CHANGED Viewed

@@ -35,6 +35,8 @@ require("react-datepicker/dist/react-datepicker.css");
 var _typography = require("../styles/typography");
+var _zIndexes = require("../styles/z-indexes");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -66,7 +68,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 /**
  * Add custom styles.
  */
-var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    display: block;\n    ", "\n\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        background: ", ";\n        box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n        background: ", ";\n        box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n        outline: none;\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n        background: ", ";\n        box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n        outline: none;\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          color: ", ";\n          background: ", ";\n          box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n          outline: none;\n        }\n      }\n    }\n  }\n"])), function (props) {
+var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  \n  .react-datepicker-popper{\n    z-index: ", ";  \n  }\n\n  > div {\n    display: block;\n    ", "\n\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        background: ", ";\n        box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n        background: ", ";\n        box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n        outline: none;\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n        background: ", ";\n        box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n        outline: none;\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          color: ", ";\n          background: ", ";\n          box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n          outline: none;\n        }\n      }\n    }\n  }\n"])), _zIndexes.Z_INDEXES.dropdown, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _colors.default.primary_20, _colors.default.primary_100, _colors.default.focus_25, _colors.default.focus, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
   return !props.yearPicker ? '96px' : '54px';

package/dist/js/InputFields/DatepickerField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","props","margin","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","disabled","locked","css","primary_600","StyledInputFieldStyling","InputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","id","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","React","useRef","datepickerRef","useState","tabbedHere","setTabbedHere","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","supressFocusRef","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","critical_400"],"mappings":"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","sourcesContent":["/*\n Import react libraries.\n /\nimport as React from 'react';\n\n/*\n Import third-party libraries.\n /\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/\n Import custom components.\n /\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\n\n/\n Import custom styles.\n /\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\n/\n Add custom types.\n /\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (date: Date) => void;\n hasError?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/\n Add custom styles.\n /\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n > div {\n display: block;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n }\n }\n }\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n display: flex;\n flex-direction: row;\n position: relative;\n\n > button {\n position: absolute;\n right: 4px;\n top: 4px;\n\n svg {\n }\n }\n\n ${(props) =>\n props?.disabled \|\| props?.locked\n ? ''\n : css`\n &:hover {\n svg,\n svg path {\n fill: ${COLORS.primary_600} !important;\n }\n }\n `}\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n span {\n color: ${COLORS.neutral_300};\n }\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n locked,\n onChange,\n hasError,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = React.useRef<any>(null);\n const datepickerRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date \| null>(null);\n const supressFocusRef = React.useRef<any>(null);\n\n /\n Format the date in a specific way.\n /\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n return (\n <>\n {/* Let's render the input itself /}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin \|\| ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled \|\| locked}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\n <div style={{ display: 'block' }}>\n <DatepickerRow locked={locked} disabled={disabled}>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n readOnly={true}\n className={hasError ? 'error' : ''}\n tabIndex={0}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n onMouseDown={(e: any) => {\n if (!(locked \|\| disabled) && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!(locked \|\| disabled)) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n />\n <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled \|\| locked}>\n <Calendar size=\"24\" />\n </IconButton>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/ If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
1	+ {"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","disabled","locked","css","primary_600","StyledInputFieldStyling","InputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","id","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","React","useRef","datepickerRef","useState","tabbedHere","setTabbedHere","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","supressFocusRef","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","critical_400"],"mappings":"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","sourcesContent":["/*\n Import react libraries.\n /\nimport as React from 'react';\n\n/*\n Import third-party libraries.\n /\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/\n Import custom components.\n /\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\n\n/\n Import custom styles.\n /\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n/\n Add custom types.\n /\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (date: Date) => void;\n hasError?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/\n Add custom styles.\n /\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n \n .react-datepicker-popper{\n z-index: ${Z_INDEXES.dropdown}; \n }\n\n > div {\n display: block;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n }\n }\n }\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n display: flex;\n flex-direction: row;\n position: relative;\n\n > button {\n position: absolute;\n right: 4px;\n top: 4px;\n\n svg {\n }\n }\n\n ${(props) =>\n props?.disabled \|\| props?.locked\n ? ''\n : css`\n &:hover {\n svg,\n svg path {\n fill: ${COLORS.primary_600} !important;\n }\n }\n `}\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n span {\n color: ${COLORS.neutral_300};\n }\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n locked,\n onChange,\n hasError,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = React.useRef<any>(null);\n const datepickerRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date \| null>(null);\n const supressFocusRef = React.useRef<any>(null);\n\n /\n Format the date in a specific way.\n /\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n return (\n <>\n {/* Let's render the input itself /}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin \|\| ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled \|\| locked}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\n <div style={{ display: 'block' }}>\n <DatepickerRow locked={locked} disabled={disabled}>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n readOnly={true}\n className={hasError ? 'error' : ''}\n tabIndex={0}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n onMouseDown={(e: any) => {\n if (!(locked \|\| disabled) && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!(locked \|\| disabled)) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n />\n <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled \|\| locked}>\n <Calendar size=\"24\" />\n </IconButton>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/ If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}

package/dist/js/InputFields/PasswordField.js CHANGED Viewed

@@ -39,7 +39,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var StyledPassSwitch = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 2;\n  height: 30px;\n  width: 30px;\n\n  ", " {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+var StyledPassSwitch = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ", " {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 var PasswordRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));

package/dist/js/InputFields/PasswordField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","React","useState","passwordHidden","setPasswordHidden","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\n\ntype PasswordFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (text: string) => void;\n hasError?: boolean;\n value?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n readOnly?: boolean;\n size?: 'small' \| 'medium';\n margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n float: right;\n margin-left: -40px;\n margin-top: 8px;\n position: relative;\n z-index: 2;\n height: 30px;\n width: 30px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 12px;\n }\n\n &.small {\n margin-top: 8px;\n }\n\n &.medium {\n margin-top: 12px;\n }\n\n svg {\n cursor: pointer;\n }\n div {\n &:focus {\n outline: none;\n svg {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n border-radius: 4px;\n }\n }\n }\n`;\n\nconst PasswordRow = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n const inputRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.keyCode === 13) {\n setPasswordHidden(!passwordHidden);\n }\n };\n return (\n <>\n <InputWrapper\n disabled={disabled}\n locked={locked}\n margin={margin}\n tabIndex={disabled ? -1 : 0}\n onFocus={(e: any) => {\n if (!e?.target?.id.includes(id) && !disabled && !locked) {\n setTabbedHere(true);\n inputRef.current.focus();\n }\n }}>\n <div style={{ display: 'block' }}>\n <PasswordRow>\n <InputFieldStyling\n id={id}\n ref={inputRef}\n type={passwordHidden ? 'password' : 'text'}\n name=\"password\"\n value={value}\n className={(hasError ? 'error' : '').concat(size ? size : '')}\n tabIndex={-1}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n />\n <StyledPassSwitch className={size ? size : ''}>\n {!disabled && !locked ? (\n passwordHidden ? (\n <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n fill=\"#666666\"></path>\n </svg>\n </div>\n ) : (\n <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n fill=\"#666666\"\n />\n <path\n d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n fill=\"#666666\"\n />\n </svg>\n </div>\n )\n ) : null}\n </StyledPassSwitch>\n </PasswordRow>\n </div>\n </InputWrapper>\n {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n </>\n );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
1	+ {"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","React","useState","passwordHidden","setPasswordHidden","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (text: string) => void;\n hasError?: boolean;\n value?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n readOnly?: boolean;\n size?: 'small' \| 'medium';\n margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n float: right;\n margin-left: -40px;\n margin-top: 8px;\n position: relative;\n z-index: 1;\n height: 30px;\n width: 30px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 12px;\n }\n\n &.small {\n margin-top: 8px;\n }\n\n &.medium {\n margin-top: 12px;\n }\n\n svg {\n cursor: pointer;\n }\n div {\n &:focus {\n outline: none;\n svg {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n border-radius: 4px;\n }\n }\n }\n`;\n\nconst PasswordRow = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n const inputRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.keyCode === 13) {\n setPasswordHidden(!passwordHidden);\n }\n };\n return (\n <>\n <InputWrapper\n disabled={disabled}\n locked={locked}\n margin={margin}\n tabIndex={disabled ? -1 : 0}\n onFocus={(e: any) => {\n if (!e?.target?.id.includes(id) && !disabled && !locked) {\n setTabbedHere(true);\n inputRef.current.focus();\n }\n }}>\n <div style={{ display: 'block' }}>\n <PasswordRow>\n <InputFieldStyling\n id={id}\n ref={inputRef}\n type={passwordHidden ? 'password' : 'text'}\n name=\"password\"\n value={value}\n className={(hasError ? 'error' : '').concat(size ? size : '')}\n tabIndex={-1}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n />\n <StyledPassSwitch className={size ? size : ''}>\n {!disabled && !locked ? (\n passwordHidden ? (\n <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n fill=\"#666666\"></path>\n </svg>\n </div>\n ) : (\n <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n fill=\"#666666\"\n />\n <path\n d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n fill=\"#666666\"\n />\n </svg>\n </div>\n )\n ) : null}\n </StyledPassSwitch>\n </PasswordRow>\n </div>\n </InputWrapper>\n {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n </>\n );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/js/InputFields/SearchBar.js CHANGED Viewed

@@ -21,6 +21,10 @@ var _SearchBarInput = _interopRequireDefault(require("./components/SearchBarInpu
 var _SearchField = _interopRequireDefault(require("./components/SearchField"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -35,6 +39,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var ClearIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  &.hidden{\n    display: none !important;\n  }\n"])));
 var SearchBar = function SearchBar(_ref) {
   var id = _ref.id,
       searchTerm = _ref.searchTerm,
@@ -69,16 +77,7 @@ var SearchBar = function SearchBar(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styling.InputWrapper, {
     disabled: disabled,
-    tabIndex: disabled ? -1 : 0,
-    margin: margin,
-    onFocus: function onFocus(e) {
-      var _e$target;
-      if (!(e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.id.includes(id)) && !disabled) {
-        setTabbedHere(true);
-        inputRef.current.focus();
-      }
-    }
+    margin: margin
   }, /*#__PURE__*/_react.default.createElement(_SearchField.default, {
     id: "".concat(id, "_main"),
     size: size || '',
@@ -86,7 +85,21 @@ var SearchBar = function SearchBar(_ref) {
     disabled: disabled,
     tabbedHere: tabbedHere,
     validationMessage: validationMessage
-  }, /*#__PURE__*/_react.default.createElement(_SearchBarInput.default, {
+  }, /*#__PURE__*/_react.default.createElement(_styling.SearchIconWrapper, {
+    className: size ? size : '',
+    "aria-label": performSearchLabel
+  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+    id: "".concat(id, "_Search"),
+    variant: "secondary",
+    shape: "circular",
+    action: enterSearch,
+    disabled: disabled,
+    onKeyPress: function onKeyPress(e) {
+      return isPressingEnter(e) ? enterSearch(e) : null;
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SystemIcons.Search, {
+    size: "24px"
+  }))), /*#__PURE__*/_react.default.createElement(_SearchBarInput.default, {
     placeholder: disabled ? '' : placeholder,
     ref: inputRef,
     id: id,
@@ -99,38 +112,19 @@ var SearchBar = function SearchBar(_ref) {
     searchTerm: searchTerm,
     onKeyDown: onKeyDown,
     enterSearch: enterSearch
-  }), /*#__PURE__*/_react.default.createElement(_styling.SearchIconWrapper, {
-    className: size ? size : '',
-    role: "button",
-    "aria-label": performSearchLabel,
-    tabIndex: disabled ? -1 : 0
-  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    id: "".concat(id, "_Search"),
-    variant: "secondary",
-    shape: "circular",
-    action: enterSearch,
-    onKeyPress: function onKeyPress(e) {
-      return isPressingEnter(e) ? enterSearch(e) : null;
-    }
-  }, /*#__PURE__*/_react.default.createElement(_SystemIcons.Search, {
-    size: "24px",
-    color: disabled ? _index.COLORS.neutral_300 : _index.COLORS.neutral_600
-  }))), /*#__PURE__*/_react.default.createElement(_styling.StyledIcon, {
-    className: size ? size : '',
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    hidden: searchTerm === '' || searchTerm === undefined
+  }), /*#__PURE__*/_react.default.createElement(ClearIconWrapper, {
+    className: (size ? size : '').concat(!searchTerm ? ' hidden' : '')
   }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     id: "".concat(id, "_Clear"),
     variant: "secondary",
     shape: "circular",
     action: removeSearch,
+    disabled: disabled,
     onKeyPress: function onKeyPress(e) {
       return isPressingEnter(e) ? removeSearch(e) : null;
     }
   }, /*#__PURE__*/_react.default.createElement(_SystemIcons.Clear, {
-    size: "24px",
-    color: disabled ? _index.COLORS.neutral_300 : _index.COLORS.neutral_600
+    size: "24px"
   }))))), validationMessage && /*#__PURE__*/_react.default.createElement(_styling.WarningMessage, {
     className: size || ''
   }, /*#__PURE__*/_react.default.createElement(_SystemIcons.TechnicalWarning, {