@laerdal/life-react-components 1.2.2-dev.9.full → 1.3.1-dev.2.full

package/dist/js/Paginator/__tests__/Paginator.test.js

@@ -35,9 +35,9 @@ jest.mock('react-router-dom', function () {
 });
 describe('<Paginator />', function () {
   it('Renders Paginator', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var _queryByText;
+    var _container$querySelec, _queryByText;
 
-    var history, route, _render, queryByText, getByTestId;
+    var history, route, _render, queryByText, container;
 
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -53,13 +53,13 @@ describe('<Paginator />', function () {
               currentPage: 1,
               baseUrl: "",
               onPageChange: function onPageChange() {}
-            }))), queryByText = _render.queryByText, getByTestId = _render.getByTestId;
+            }))), queryByText = _render.queryByText, container = _render.container;
             expect(queryByText('1')).toBeDefined();
-            expect(getByTestId('Test-StepLeft_Disabled')).toBeDefined();
-            expect(getByTestId('Test-StepRight_Enabled')).toBeDefined();
+            expect(container.querySelector('#paginator-left')).toBeDefined();
+            expect(container.querySelector('#paginator-right')).toBeDefined();
             expect(queryByText('6')).toBeDefined(); // Click on stepper to the right. Expect to be taken from 1 to 2
 
-            getByTestId('Test-StepRight_Enabled').children[0].click();
+            (_container$querySelec = container.querySelector('#paginator-right')) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.click();
             expect(history.location.pathname).toBe('/2'); // Click directly on 6. Expect to be taken to /6
 
             (_queryByText = queryByText('6')) === null || _queryByText === void 0 ? void 0 : _queryByText.click();

package/dist/js/Paginator/__tests__/Paginator.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Paginator/__tests__/Paginator.test.tsx"],"names":["jest","mock","requireActual","useLocation","pathname","describe","it","history","route","push","queryByText","getByTestId","expect","toBeDefined","children","click","location","toBe"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEAA,IAAI,CAACC,IAAL,CAAU,kBAAV,EAA8B;AAAA,yCACzBD,IAAI,CAACE,aAAL,CAAmB,kBAAnB,CADyB;AAE5BC,IAAAA,WAAW,EAAE;AAAA,aAAO;AAClBC,QAAAA,QAAQ,EAAE;AADQ,OAAP;AAAA;AAFe;AAAA,CAA9B;AAOAC,QAAQ,CAAC,eAAD,EAAkB,YAAM;AAC9BC,EAAAA,EAAE,CAAC,mBAAD,uEAAsB;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAChBC,YAAAA,OADgB,GACN,mCADM;AAEhBC,YAAAA,KAFgB,GAER,IAFQ;AAGtBD,YAAAA,OAAO,CAACE,IAAR,CAAaD,KAAb;AAHsB,sBAIe,kCACnC,6BAAC,mBAAD;AAAQ,cAAA,OAAO,EAAED;AAAjB,4BACE,6BAAC,gBAAD;AAAW,cAAA,SAAS,EAAE,CAAtB;AAAyB,cAAA,WAAW,EAAE,CAAtC;AAAyC,cAAA,OAAO,EAAC,EAAjD;AAAoD,cAAA,YAAY,EAAE,wBAAM,CAAE;AAA1E,cADF,CADmC,CAJf,EAIdG,WAJc,WAIdA,WAJc,EAIDC,WAJC,WAIDA,WAJC;AAStBC,YAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACD,WAAW,CAAC,wBAAD,CAAZ,CAAN,CAA8CE,WAA9C;AACAD,YAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB,GAZsB,CActB;;AACCF,YAAAA,WAAW,CAAC,wBAAD,CAAX,CAAsCG,QAAtC,CAA+C,CAA/C,CAAD,CAAmEC,KAAnE;AACAH,YAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC,EAhBsB,CAkBtB;;AACA,4BAAAP,WAAW,CAAC,GAAD,CAAX,8DAAkBK,KAAlB;AACAH,YAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC;;AApBsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAtB,GAAF;AAsBD,CAvBO,CAAR","sourcesContent":["import React, { useState } from 'react';\nimport { render } from '@testing-library/react';\nimport { Paginator } from '../index';\nimport { Router } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport 'jest-styled-components';\n\njest.mock('react-router-dom', () => ({\n  ...jest.requireActual('react-router-dom'),\n  useLocation: () => ({\n    pathname: 'localhost:3000/test',\n  }),\n}));\n\ndescribe('<Paginator />', () => {\n  it('Renders Paginator', async () => {\n    const history = createMemoryHistory();\n    const route = '/1';\n    history.push(route);\n    const { queryByText, getByTestId } = render(\n      <Router history={history}>\n        <Paginator pageCount={6} currentPage={1} baseUrl=\"\" onPageChange={() => {}} />\n      </Router>,\n    );\n    expect(queryByText('1')).toBeDefined();\n    expect(getByTestId('Test-StepLeft_Disabled')).toBeDefined();\n    expect(getByTestId('Test-StepRight_Enabled')).toBeDefined();\n    expect(queryByText('6')).toBeDefined();\n\n    // Click on stepper to the right. Expect to be taken from 1 to 2\n    (getByTestId('Test-StepRight_Enabled').children[0] as HTMLElement).click();\n    expect(history.location.pathname).toBe('/2');\n\n    // Click directly on 6. Expect to be taken to /6\n    queryByText('6')?.click();\n    expect(history.location.pathname).toBe('/6');\n  });\n});\n"],"file":"Paginator.test.js"}
+{"version":3,"sources":["../../../../src/Paginator/__tests__/Paginator.test.tsx"],"names":["jest","mock","requireActual","useLocation","pathname","describe","it","history","route","push","queryByText","container","expect","toBeDefined","querySelector","click","location","toBe"],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEAA,IAAI,CAACC,IAAL,CAAU,kBAAV,EAA8B;AAAA,yCACzBD,IAAI,CAACE,aAAL,CAAmB,kBAAnB,CADyB;AAE5BC,IAAAA,WAAW,EAAE;AAAA,aAAO;AAClBC,QAAAA,QAAQ,EAAE;AADQ,OAAP;AAAA;AAFe;AAAA,CAA9B;AAOAC,QAAQ,CAAC,eAAD,EAAkB,YAAM;AAC9BC,EAAAA,EAAE,CAAC,mBAAD,uEAAsB;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAChBC,YAAAA,OADgB,GACN,mCADM;AAEhBC,YAAAA,KAFgB,GAER,IAFQ;AAGtBD,YAAAA,OAAO,CAACE,IAAR,CAAaD,KAAb;AAHsB,sBAIa,kCACjC,6BAAC,mBAAD;AAAQ,cAAA,OAAO,EAAED;AAAjB,4BACE,6BAAC,gBAAD;AAAW,cAAA,SAAS,EAAE,CAAtB;AAAyB,cAAA,WAAW,EAAE,CAAtC;AAAyC,cAAA,OAAO,EAAC,EAAjD;AAAoD,cAAA,YAAY,EAAE,wBAAM,CAAE;AAA1E,cADF,CADiC,CAJb,EAIdG,WAJc,WAIdA,WAJc,EAIDC,SAJC,WAIDA,SAJC;AAUtBC,YAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB;AACAD,YAAAA,MAAM,CAACD,SAAS,CAACG,aAAV,CAAwB,iBAAxB,CAAD,CAAN,CAAmDD,WAAnD;AACAD,YAAAA,MAAM,CAACD,SAAS,CAACG,aAAV,CAAwB,kBAAxB,CAAD,CAAN,CAAoDD,WAApD;AACAD,YAAAA,MAAM,CAACF,WAAW,CAAC,GAAD,CAAZ,CAAN,CAAyBG,WAAzB,GAbsB,CAetB;;AACA,qCAACF,SAAS,CAACG,aAAV,CAAwB,kBAAxB,CAAD,gFAA8DC,KAA9D;AACAH,YAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC,EAjBsB,CAmBtB;;AACA,4BAAAP,WAAW,CAAC,GAAD,CAAX,8DAAkBK,KAAlB;AACAH,YAAAA,MAAM,CAACL,OAAO,CAACS,QAAR,CAAiBZ,QAAlB,CAAN,CAAkCa,IAAlC,CAAuC,IAAvC;;AArBsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAtB,GAAF;AAuBD,CAxBO,CAAR","sourcesContent":["import React, { useState } from 'react';\nimport { render } from '@testing-library/react';\nimport { Paginator } from '../index';\nimport { Router } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport 'jest-styled-components';\n\njest.mock('react-router-dom', () => ({\n  ...jest.requireActual('react-router-dom'),\n  useLocation: () => ({\n    pathname: 'localhost:3000/test',\n  }),\n}));\n\ndescribe('<Paginator />', () => {\n  it('Renders Paginator', async () => {\n    const history = createMemoryHistory();\n    const route = '/1';\n    history.push(route);\n    const { queryByText, container } = render(\n      <Router history={history}>\n        <Paginator pageCount={6} currentPage={1} baseUrl=\"\" onPageChange={() => {}} />\n      </Router>,\n    );\n\n    expect(queryByText('1')).toBeDefined();\n    expect(container.querySelector('#paginator-left')).toBeDefined();\n    expect(container.querySelector('#paginator-right')).toBeDefined();\n    expect(queryByText('6')).toBeDefined();\n\n    // Click on stepper to the right. Expect to be taken from 1 to 2\n    (container.querySelector('#paginator-right') as HTMLElement)?.click();\n    expect(history.location.pathname).toBe('/2');\n\n    // Click directly on 6. Expect to be taken to /6\n    queryByText('6')?.click();\n    expect(history.location.pathname).toBe('/6');\n  });\n});\n"],"file":"Paginator.test.js"}

package/dist/js/Switcher/MobileSwitcherMenu.js

@@ -25,6 +25,8 @@ var _SwitcherMenuItem = _interopRequireDefault(require("./SwitcherMenuItem"));
 
 var _typography = require("../styles/typography");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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); }
@@ -35,7 +37,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  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
+var Menu = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  background-color: ", ";\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ", " 0.2s ease-in-out;\n  animation: ", " 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ", ";\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ", " {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ", ";\n"])), _styles.COLORS.white, _CommonStyles.flowDown, _CommonStyles.flowDown, _zIndexes.Z_INDEXES.off_canvas, _styles.BREAKPOINTS.SMALL, _styles.scrollBarStyling);
 
 var MenuSection = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n"])));
 

package/dist/js/Switcher/MobileSwitcherMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: 100;\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\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  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: 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={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
+{"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentTextStyle","Regular","LabelLine","span","neutral_20","MobileSwitcherMenu","header","elementsHeader","clickMenuAction","elements","React","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","length","map","element","to","label","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\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  overflow-y: unset !important;\n  padding-inline-start: 0;\n\n  ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\ninterface Props {\n  header: string;\n  elementsHeader: string;\n  clickMenuAction: () => void;\n  elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: 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={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top>\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{header}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {elements && elements?.length > 0 && (\n        <MenuSection>\n          <LabelLine>{elementsHeader}</LabelLine>\n          <MenuSectionList>\n            {elements?.map((element) => (\n              <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}

package/dist/js/Switcher/SwitcherMenuItem.js

@@ -15,6 +15,8 @@ var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var StyledSwitcherItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ", "\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:hover:not(.disabled) {\n    color: ", ";\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.primary_600, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.primary_500, _styles.COLORS.primary_800, _styles.COLORS.primary_500);
+var StyledSwitcherItem = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ", "\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ", ";\n    font-weight: bold;\n    color: ", ";\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &.disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ", ";\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n\n    &:after {\n      background-color: ", ";\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(.disabled) {\n    z-index: ", ";\n    box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600), _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_800, _styles.COLORS.primary_500, _styles.COLORS.neutral_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_600, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.primary_500, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_500);
 
 var A = _styledComponents.default.a(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 

package/dist/js/Switcher/SwitcherMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["StyledSwitcherItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","neutral_800","primary_500","neutral_300","neutral_100","primary_600","primary_20","primary_800","primary_100","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,grCASpB,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAToB,EA+BXD,eAAOE,WA/BI,EAkCEF,eAAOG,WAlCT,EAsCVH,eAAOE,WAtCG,EA2CXF,eAAOI,WA3CI,EA4CAJ,eAAOK,WA5CP,EAgDXL,eAAOM,WAhDI,EAiDAN,eAAOO,UAjDP,EAoDVP,eAAOM,WApDG,EAyDXN,eAAOQ,WAzDI,EA0DAR,eAAOS,WA1DP,EA8DET,eAAOG,WA9DT,EAkEVH,eAAOQ,WAlEG,EAuEMR,eAAOG,WAvEb,CAAxB;;AA4EA,IAAMO,CAAC,GAAGd,0BAAOe,CAAV,uEAAP;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,GAAV,QAAUA,GAAV;AAAA,MAAeC,QAAf,QAAeA,QAAf;AAAA,MAAyBC,IAAzB,QAAyBA,IAAzB;AAAA,qBAA+BC,EAA/B;AAAA,MAA+BA,EAA/B,wBAAoCP,CAApC;AAAA,MAAuCQ,MAAvC,QAAuCA,MAAvC;AAAA,sBACvB,oBAAC,kBAAD;AACE,IAAA,OAAO,EAAE;AAAA,aAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EAArC;AAAA,KADX;AAEE,IAAA,EAAE,EAAEG,EAFN;AAGE,IAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,IAAA,MAAM,EAAC,SAJT;AAKE,IAAA,GAAG,EAAED,KALP;AAME,IAAA,SAAS,EAAEE,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,mBAAaG;AAPf,KAQGF,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,KAAK,EAAC;AAAxB,IARX,EASGH,KATH,CADuB;AAAA,CAAzB;;eAceD,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus:not(.disabled) {\n    box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}
+{"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["StyledSwitcherItem","styled","div","ComponentTextStyle","Regular","COLORS","neutral_600","Z_INDEXES","active","neutral_800","primary_500","neutral_300","neutral_100","hover","primary_600","primary_20","primary_800","primary_100","focus","A","a","SwitcherMenuItem","label","url","disabled","Icon","as","testId","window","location","href"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,gwCASpB,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAToB,EA8BTC,oBAAUC,MA9BD,EAgCXH,eAAOI,WAhCI,EAmCEJ,eAAOK,WAnCT,EAuCVL,eAAOI,WAvCG,EA4CXJ,eAAOM,WA5CI,EA6CAN,eAAOO,WA7CP,EAiDTL,oBAAUM,KAjDD,EAkDXR,eAAOS,WAlDI,EAmDAT,eAAOU,UAnDP,EAsDVV,eAAOS,WAtDG,EA2DTP,oBAAUC,MA3DD,EA4DXH,eAAOW,WA5DI,EA6DAX,eAAOY,WA7DP,EAiEEZ,eAAOK,WAjET,EAqEVL,eAAOW,WArEG,EA0ETT,oBAAUW,KA1ED,EA2EMb,eAAOK,WA3Eb,CAAxB;;AAgFA,IAAMS,CAAC,GAAGlB,0BAAOmB,CAAV,uEAAP;;AAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,MAAUC,GAAV,QAAUA,GAAV;AAAA,MAAeC,QAAf,QAAeA,QAAf;AAAA,MAAyBC,IAAzB,QAAyBA,IAAzB;AAAA,qBAA+BC,EAA/B;AAAA,MAA+BA,EAA/B,wBAAoCP,CAApC;AAAA,MAAuCQ,MAAvC,QAAuCA,MAAvC;AAAA,sBACvB,oBAAC,kBAAD;AACE,IAAA,OAAO,EAAE;AAAA,aAAOC,MAAM,CAACC,QAAP,CAAgBC,IAAhB,GAAuBP,GAAG,IAAI,EAArC;AAAA,KADX;AAEE,IAAA,EAAE,EAAEG,EAFN;AAGE,IAAA,IAAI,EAAEH,GAAG,IAAI,EAHf;AAIE,IAAA,MAAM,EAAC,SAJT;AAKE,IAAA,GAAG,EAAED,KALP;AAME,IAAA,SAAS,EAAEE,QAAQ,GAAG,UAAH,GAAgB,EANrC;AAOE,mBAAaG;AAPf,KAQGF,IAAI,iBAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,KAAK,EAAC;AAAxB,IARX,EASGH,KATH,CADuB;AAAA,CAAzB;;eAceD,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst StyledSwitcherItem = styled.div`\n  padding: 16px 25px;\n  margin: 0 2px;\n\n  display: flex;\n  align-items: center;\n  text-align: center;\n  position: relative;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n  text-decoration: none;\n\n  svg {\n    margin-right: 16px;\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 4px;\n    top: 4px;\n    bottom: 4px;\n    width: 4px;\n    background-color: transparent;\n    border-radius: 2px;\n  }\n\n  &.active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    font-weight: bold;\n    color: ${COLORS.neutral_800};\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.neutral_800};\n    }\n  }\n\n  &.disabled {\n    color: ${COLORS.neutral_300};\n    background-color: ${COLORS.neutral_100};\n  }\n\n  &:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    color: ${COLORS.primary_600};\n    background-color: ${COLORS.primary_20};\n\n    svg path {\n      fill: ${COLORS.primary_600};\n    }\n  }\n\n  &:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    color: ${COLORS.primary_800};\n    background-color: ${COLORS.primary_100};\n    box-shadow: none;\n\n    &:after {\n      background-color: ${COLORS.primary_500};\n    }\n\n    svg path {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:focus: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    outline: none;\n  }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n  <StyledSwitcherItem\n    onClick={() => (window.location.href = url || '')}\n    as={as}\n    href={url || ''}\n    target=\"_parent\"\n    key={label}\n    className={disabled ? 'disabled' : ''}\n    data-testid={testId}>\n    {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n    {label}\n  </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}

package/dist/js/Table/Table.js

@@ -497,7 +497,7 @@ var Table = function Table(_ref) {
     cellSpacing: "0",
     "data-testid": "TestTable"
   }, renderHeader(), renderBody(), renderFooter()), showLoadingIndicator && /*#__PURE__*/React.createElement(_TableStyles.TableLoadingIndicator, null, /*#__PURE__*/React.createElement(_LoadingIndicator.LoadingIndicator, {
-    size: "medium",
+    size: _types.Size.Medium,
     color: "#ffffff"
   })));
 };

package/dist/js/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","rowClick","linkClick","iconClick","previousPageClick","nextPageClick","rowsPerPageChange","triggerSortingChange","title","columns","rows","remotePagination","pagination","showLoadingIndicator","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sortedColumn","setSortedColumn","sortedDirection","setSortedDirection","from","setFrom","to","setTo","total","setTotal","useEffect","tmpFilteredRows","filterAndSortRows","length","rowsFrom","rowsTo","slice","filter","row","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","some","sortingDirection","sortingColumn","find","sort","a","b","sortTableColumn","map","tmpColumn","sortable","undefined","previousPage","nextPage","changeRowsPerPage","value","parseInt","renderHeader","COLORS","neutral_600","width","justify","name","onLinkClick","event","stopPropagation","onIconClick","onRowClick","selectedText","window","getSelection","toString","renderBody","index","colorFn","color","maxWidth","shortenText","isLink","Size","Small","isIcon","icon","icons","size","className","customContent","renderFooter","rowsPerPageValues","x","label"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';\nimport { SystemIcons as icons } from '../icons/index';\nimport { DropdownFilter } from '../Dropdown/index';\nimport { IconButton, Button } from '../Button/index';\nimport { Size } from '../types'\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport { TableProps, TableColumn, TableSortingDirection } from './TableTypes';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst Table: React.FunctionComponent<TableProps> = ({\n  rowClick,\n  linkClick,\n  iconClick,\n  previousPageClick,\n  nextPageClick,\n  rowsPerPageChange,\n  triggerSortingChange,\n  title,\n  columns,\n  rows,\n  remotePagination,\n  pagination,\n  showLoadingIndicator,\n}: TableProps) => {\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sortedColumn, setSortedColumn] = React.useState<string>('');\n  const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remotePagination) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remotePagination) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remotePagination, pagination, rows]);\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (columns.some((column) => column.sortingDirection)) {\n      // Let's find the sorting column\n      const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n      // Update sorted column data\n      setSortedDirection(sortingColumn.sortingDirection!);\n      setSortedColumn(sortingColumn.key!);\n\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sortingColumn.key] > b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n        } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    // Let's remove any active sorting\n    columns = columns.map((tmpColumn: TableColumn) => {\n      // Let's apply new sorting\n      // Let's check if it is the column for which we have to apply sorting\n      if (column.key === tmpColumn.key && tmpColumn.sortable) {\n        // Let's check if sorting is not defined\n        // If so, let's toggle the sorting direction\n        if (tmpColumn.sortingDirection !== undefined) {\n          if (tmpColumn.sortingDirection === 'asc') {\n            tmpColumn.sortingDirection = 'desc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('desc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'desc');\n            }\n          } else {\n            tmpColumn.sortingDirection = 'asc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('asc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'asc');\n            }\n          }\n        } else {\n          // Let's apply the initial sorting\n          tmpColumn.sortingDirection = 'asc';\n\n          // Update sorted column and direction\n          setSortedColumn(column.key);\n          setSortedDirection('asc');\n\n          // Let's trigger remote sorting trigger function\n          if (remotePagination && triggerSortingChange) {\n            triggerSortingChange(column.key, 'asc');\n          }\n        }\n      } else if (tmpColumn.sortingDirection !== undefined) {\n        // Let's remove sorting\n        tmpColumn.sortingDirection = undefined;\n      }\n\n      return tmpColumn;\n    });\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (previousPageClick) {\n        previousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (nextPageClick) {\n        nextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: string) => {\n    // Let's check if we are using remote pagination\n    if (remotePagination) {\n      // Inform parent component about rows per page change\n      if (rowsPerPageChange) {\n        rowsPerPageChange(parseInt(value));\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(parseInt(value));\n  };\n\n  /**\n   * Renders the table header.\n   */\n  const renderHeader = () => {\n    return (\n      <thead>\n        {title && (\n          <tr data-testid=\"TestTableHeaderRow\">\n            <TableHeaderRowCol colSpan={columns.length}>\n              <div>\n                {title}\n                <MoreVertical size=\"18px\" color={COLORS.neutral_600} />\n              </div>\n            </TableHeaderRowCol>\n          </tr>\n        )}\n        <tr data-testid=\"TestTableColumnHeaderRow\">\n          {columns.map((column: TableColumn) => (\n            <TableColumnHeaderCol\n              onClick={() => sortTableColumn(column)}\n              key={column.key}\n              style={{ width: column.width }}\n              className={`${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`}>\n              {column.name}\n\n              {column.sortingDirection === 'asc' ? <ArrowLineUp size=\"20px\" /> : column.sortingDirection === 'desc' ? <ArrowLineDown size=\"20px\" /> : ''}\n            </TableColumnHeaderCol>\n          ))}\n        </tr>\n      </thead>\n    );\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a link to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   * @param key - Key of the column for which the link is set.\n   * @param event - Click event handler.\n   */\n  const onLinkClick = (row: any, key: string, event: React.MouseEvent) => {\n    if (linkClick) {\n      event.stopPropagation();\n\n      linkClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on an icon to pass data to the parent component.\n   * @param row - Row in which the icon is located.\n   * @param key - Key of the column for which the icon is set.\n   * @param event - Click event handler.\n   */\n  const onIconClick = (row: any, key: string, event: React.MouseEvent<HTMLButtonElement>) => {\n    if (iconClick) {\n      event.stopPropagation();\n\n      iconClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    // Let's trigger row click only if we haven't selected any text and action exists\n    if (selectedText?.length === 0 && rowClick) {\n      rowClick(row);\n    }\n  };\n\n  /**\n   * Renders the table body.\n   */\n  const renderBody = () => {\n    return (\n      <tbody>\n        {currentPageRows.length > 0 ? (\n          currentPageRows.map((row: any, index: number) => (\n            <TableDataRow key={`row_${index}`} onClick={() => onRowClick(row)} data-testid=\"TestTableDataRow\">\n              {columns.map((column: TableColumn) => (\n                <TableDataCol\n                  key={`row_${index}_${column.key}`}\n                  style={column.colorFn ? { color: column.colorFn(row, column.key), maxWidth: column.width } : { maxWidth: column.width }}\n                  className={`${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `}\n                  title={column.shortenText && row[column.key]}>\n                  {column.isLink && row[column.key] ? (\n                    <Button\n                      size={Size.Small}\n                      variant=\"tertiary\"\n                      onClick={(event) => onLinkClick(row, column.key, event)}\n                      style={column.colorFn && { color: column.colorFn(row, column.key) }}>\n                      {row[column.key]}\n                    </Button>\n                  ) : column.isIcon && column.icon ? (\n                    <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground={true} action={(event) => onIconClick(row, column.key, event!)}>\n                      {icons[column.icon!]({ size: '24', className: 'icon' })}\n                    </IconButton>\n                  ) : column.customContent ? (\n                    column.customContent(row, column.key)\n                  ) : (\n                    row[column.key]\n                  )}\n                </TableDataCol>\n              ))}\n            </TableDataRow>\n          ))\n        ) : (\n          <TableDataRow className=\"no-rows\" data-testid=\"TestTableNoDataRow\">\n            <TableDataCol colSpan={columns.length} className=\"center\">\n              There are no rows to display\n            </TableDataCol>\n          </TableDataRow>\n        )}\n      </tbody>\n    );\n  };\n\n  /**\n   * Renders the table footer.\n   */\n  const renderFooter = () => {\n    // Define local values used within the footer\n    const rowsPerPageValues = ['10', '20', '50', '100'];\n\n    return (\n      <tfoot>\n        <tr>\n          <TableFooterCol colSpan={columns.length} data-testid=\"TestTableFooterRow\">\n            <div>\n              <span>Rows per page: </span>\n              <DropdownFilter\n                id=\"rows-per-page\"\n                list={rowsPerPageValues.map(x => ({ label: x }))}\n                disableSorting={true}\n                onSelect={(value) => changeRowsPerPage(value)}\n                initalValue={rowsPerPage.toString()}\n                isButton={true}\n              />\n              <span className=\"current-page-info\">\n                {total === 0 ? 0 : from}-{to} of {total}\n              </span>\n              <div className=\"controls\">\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => previousPage()} disabled={from === 1}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => nextPage()} disabled={to === total}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n              </div>\n            </div>\n          </TableFooterCol>\n        </tr>\n      </tfoot>\n    );\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableContainer cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\">\n        {renderHeader()}\n        {renderBody()}\n        {renderFooter()}\n      </TableContainer>\n      {showLoadingIndicator && (\n        <TableLoadingIndicator>\n          <LoadingIndicator size=\"medium\" color=\"#ffffff\"></LoadingIndicator>\n        </TableLoadingIndicator>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"file":"Table.js"}
+{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","rowClick","linkClick","iconClick","previousPageClick","nextPageClick","rowsPerPageChange","triggerSortingChange","title","columns","rows","remotePagination","pagination","showLoadingIndicator","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sortedColumn","setSortedColumn","sortedDirection","setSortedDirection","from","setFrom","to","setTo","total","setTotal","useEffect","tmpFilteredRows","filterAndSortRows","length","rowsFrom","rowsTo","slice","filter","row","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","some","sortingDirection","sortingColumn","find","sort","a","b","sortTableColumn","map","tmpColumn","sortable","undefined","previousPage","nextPage","changeRowsPerPage","value","parseInt","renderHeader","COLORS","neutral_600","width","justify","name","onLinkClick","event","stopPropagation","onIconClick","onRowClick","selectedText","window","getSelection","toString","renderBody","index","colorFn","color","maxWidth","shortenText","isLink","Size","Small","isIcon","icon","icons","size","className","customContent","renderFooter","rowsPerPageValues","x","label","Medium"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { MoreVertical, ChevronRight, ChevronLeft, ArrowLineDown, ArrowLineUp } from '../icons/systemicons/SystemIcons';\nimport { SystemIcons as icons } from '../icons/index';\nimport { DropdownFilter } from '../Dropdown/index';\nimport { IconButton, Button } from '../Button/index';\nimport { Size } from '../types'\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { TableHeaderRowCol, TableColumnHeaderCol, TableContainer, TableDataCol, TableDataRow, TableFooterCol, TableWrapper, TableLoadingIndicator } from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport { TableProps, TableColumn, TableSortingDirection } from './TableTypes';\nimport { LoadingIndicator } from '../LoadingIndicator';\n\nconst Table: React.FunctionComponent<TableProps> = ({\n  rowClick,\n  linkClick,\n  iconClick,\n  previousPageClick,\n  nextPageClick,\n  rowsPerPageChange,\n  triggerSortingChange,\n  title,\n  columns,\n  rows,\n  remotePagination,\n  pagination,\n  showLoadingIndicator,\n}: TableProps) => {\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sortedColumn, setSortedColumn] = React.useState<string>('');\n  const [sortedDirection, setSortedDirection] = React.useState<TableSortingDirection>('asc');\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remotePagination) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sortedColumn, sortedDirection, remotePagination]);\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remotePagination) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remotePagination, pagination, rows]);\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (columns.some((column) => column.sortingDirection)) {\n      // Let's find the sorting column\n      const sortingColumn = columns.find((column) => column.sortingDirection)!;\n\n      // Update sorted column data\n      setSortedDirection(sortingColumn.sortingDirection!);\n      setSortedColumn(sortingColumn.key!);\n\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sortingColumn.key] > b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? 1 : -1;\n        } else if (a[sortingColumn.key] < b[sortingColumn.key]) {\n          return sortingColumn.sortingDirection === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    // Let's remove any active sorting\n    columns = columns.map((tmpColumn: TableColumn) => {\n      // Let's apply new sorting\n      // Let's check if it is the column for which we have to apply sorting\n      if (column.key === tmpColumn.key && tmpColumn.sortable) {\n        // Let's check if sorting is not defined\n        // If so, let's toggle the sorting direction\n        if (tmpColumn.sortingDirection !== undefined) {\n          if (tmpColumn.sortingDirection === 'asc') {\n            tmpColumn.sortingDirection = 'desc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('desc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'desc');\n            }\n          } else {\n            tmpColumn.sortingDirection = 'asc';\n\n            // Update sorted column and direction\n            setSortedColumn(column.key);\n            setSortedDirection('asc');\n\n            // Let's trigger remote sorting trigger function\n            if (remotePagination && triggerSortingChange) {\n              triggerSortingChange(column.key, 'asc');\n            }\n          }\n        } else {\n          // Let's apply the initial sorting\n          tmpColumn.sortingDirection = 'asc';\n\n          // Update sorted column and direction\n          setSortedColumn(column.key);\n          setSortedDirection('asc');\n\n          // Let's trigger remote sorting trigger function\n          if (remotePagination && triggerSortingChange) {\n            triggerSortingChange(column.key, 'asc');\n          }\n        }\n      } else if (tmpColumn.sortingDirection !== undefined) {\n        // Let's remove sorting\n        tmpColumn.sortingDirection = undefined;\n      }\n\n      return tmpColumn;\n    });\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (previousPageClick) {\n        previousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remotePagination) {\n      // Let's inform parent component about page change\n      if (nextPageClick) {\n        nextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: string) => {\n    // Let's check if we are using remote pagination\n    if (remotePagination) {\n      // Inform parent component about rows per page change\n      if (rowsPerPageChange) {\n        rowsPerPageChange(parseInt(value));\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(parseInt(value));\n  };\n\n  /**\n   * Renders the table header.\n   */\n  const renderHeader = () => {\n    return (\n      <thead>\n        {title && (\n          <tr data-testid=\"TestTableHeaderRow\">\n            <TableHeaderRowCol colSpan={columns.length}>\n              <div>\n                {title}\n                <MoreVertical size=\"18px\" color={COLORS.neutral_600} />\n              </div>\n            </TableHeaderRowCol>\n          </tr>\n        )}\n        <tr data-testid=\"TestTableColumnHeaderRow\">\n          {columns.map((column: TableColumn) => (\n            <TableColumnHeaderCol\n              onClick={() => sortTableColumn(column)}\n              key={column.key}\n              style={{ width: column.width }}\n              className={`${column.sortable ? 'sortable' : ''} ${!title ? 'no-border' : ''} ${column.justify ? `justify-${column.justify}` : ''}`}>\n              {column.name}\n\n              {column.sortingDirection === 'asc' ? <ArrowLineUp size=\"20px\" /> : column.sortingDirection === 'desc' ? <ArrowLineDown size=\"20px\" /> : ''}\n            </TableColumnHeaderCol>\n          ))}\n        </tr>\n      </thead>\n    );\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a link to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   * @param key - Key of the column for which the link is set.\n   * @param event - Click event handler.\n   */\n  const onLinkClick = (row: any, key: string, event: React.MouseEvent) => {\n    if (linkClick) {\n      event.stopPropagation();\n\n      linkClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on an icon to pass data to the parent component.\n   * @param row - Row in which the icon is located.\n   * @param key - Key of the column for which the icon is set.\n   * @param event - Click event handler.\n   */\n  const onIconClick = (row: any, key: string, event: React.MouseEvent<HTMLButtonElement>) => {\n    if (iconClick) {\n      event.stopPropagation();\n\n      iconClick(row, key);\n    }\n  };\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    // Let's trigger row click only if we haven't selected any text and action exists\n    if (selectedText?.length === 0 && rowClick) {\n      rowClick(row);\n    }\n  };\n\n  /**\n   * Renders the table body.\n   */\n  const renderBody = () => {\n    return (\n      <tbody>\n        {currentPageRows.length > 0 ? (\n          currentPageRows.map((row: any, index: number) => (\n            <TableDataRow key={`row_${index}`} onClick={() => onRowClick(row)} data-testid=\"TestTableDataRow\">\n              {columns.map((column: TableColumn) => (\n                <TableDataCol\n                  key={`row_${index}_${column.key}`}\n                  style={column.colorFn ? { color: column.colorFn(row, column.key), maxWidth: column.width } : { maxWidth: column.width }}\n                  className={`${column.shortenText && `truncate-text`} ${column.justify ? `justify-${column.justify}` : ''} `}\n                  title={column.shortenText && row[column.key]}>\n                  {column.isLink && row[column.key] ? (\n                    <Button\n                      size={Size.Small}\n                      variant=\"tertiary\"\n                      onClick={(event) => onLinkClick(row, column.key, event)}\n                      style={column.colorFn && { color: column.colorFn(row, column.key) }}>\n                      {row[column.key]}\n                    </Button>\n                  ) : column.isIcon && column.icon ? (\n                    <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground={true} action={(event) => onIconClick(row, column.key, event!)}>\n                      {icons[column.icon!]({ size: '24', className: 'icon' })}\n                    </IconButton>\n                  ) : column.customContent ? (\n                    column.customContent(row, column.key)\n                  ) : (\n                    row[column.key]\n                  )}\n                </TableDataCol>\n              ))}\n            </TableDataRow>\n          ))\n        ) : (\n          <TableDataRow className=\"no-rows\" data-testid=\"TestTableNoDataRow\">\n            <TableDataCol colSpan={columns.length} className=\"center\">\n              There are no rows to display\n            </TableDataCol>\n          </TableDataRow>\n        )}\n      </tbody>\n    );\n  };\n\n  /**\n   * Renders the table footer.\n   */\n  const renderFooter = () => {\n    // Define local values used within the footer\n    const rowsPerPageValues = ['10', '20', '50', '100'];\n\n    return (\n      <tfoot>\n        <tr>\n          <TableFooterCol colSpan={columns.length} data-testid=\"TestTableFooterRow\">\n            <div>\n              <span>Rows per page: </span>\n              <DropdownFilter\n                id=\"rows-per-page\"\n                list={rowsPerPageValues.map(x => ({ label: x }))}\n                disableSorting={true}\n                onSelect={(value) => changeRowsPerPage(value)}\n                initalValue={rowsPerPage.toString()}\n                isButton={true}\n              />\n              <span className=\"current-page-info\">\n                {total === 0 ? 0 : from}-{to} of {total}\n              </span>\n              <div className=\"controls\">\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => previousPage()} disabled={from === 1}>\n                  <ChevronLeft size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => nextPage()} disabled={to === total}>\n                  <ChevronRight size=\"24\" color={COLORS.neutral_600} />\n                </IconButton>\n              </div>\n            </div>\n          </TableFooterCol>\n        </tr>\n      </tfoot>\n    );\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper>\n      <TableContainer cellPadding=\"0\" cellSpacing=\"0\" data-testid=\"TestTable\">\n        {renderHeader()}\n        {renderBody()}\n        {renderFooter()}\n      </TableContainer>\n      {showLoadingIndicator && (\n        <TableLoadingIndicator>\n          <LoadingIndicator size={Size.Medium} color=\"#ffffff\"></LoadingIndicator>\n        </TableLoadingIndicator>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"file":"Table.js"}

package/dist/js/Tabs/HorizontalTabs.d.ts

@@ -1,5 +1,6 @@
+import { Size } from '../types';
 interface HorizontalTabProps {
-    size: HorizontalTabSizes;
+    size: Size;
     tabs: HorizontalTab[];
     sideFill?: boolean;
     fullWidth?: boolean;
@@ -11,6 +12,5 @@ interface HorizontalTab {
     to: string;
     disabled?: boolean;
 }
-declare type HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';
 declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => JSX.Element;
 export default HorizontalTabs;

package/dist/js/Tabs/HorizontalTabs.js

@@ -11,12 +11,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
 
+var _types = require("../types");
+
 var _styles = require("../styles");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _typography = require("../styles/typography");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3;
 
 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); }
@@ -30,9 +34,9 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 // Add custom styles
 var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n"])));
 
-var TabSideFill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  height: Calc(100% - 1px);\n  z-index: 1;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
+var TabSideFill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
 
-var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  z-index: 2;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ", ";\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n  }\n\n  &:hover {\n    div {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  \n  &:focus {\n    div {\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  \n    &:focus {\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-XS {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
+var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ", ";\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n  }\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &.selected{\n    z-index: ", ";\n  }\n  \n  &:focus {\n    z-index: ", ";\n    outline: none;\n    \n    div {\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n  \n    &:focus {\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  \n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
 
 
 var HorizontalTabs = function HorizontalTabs(_ref) {
@@ -74,7 +78,6 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
 };
 
 HorizontalTabs.propTypes = {
-  size: _propTypes.default.oneOf(['XS', 'S', 'M', 'L']).isRequired,
   tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
     value: _propTypes.default.string.isRequired,
     selected: _propTypes.default.bool.isRequired,

package/dist/js/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","neutral_300","primary_20","primary_700","primary_800","focus_25","focus","primary_500","primary_100","ComponentTextStyle","Regular","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;;;;;;;;;;;AAEA;AACA,IAAMA,sBAAsB,GAAGC,0BAAOC,GAAV,wJAA5B;;AAOA,IAAMC,WAAW,GAAGF,0BAAOC,GAAV,yOAEYE,eAAOC,WAFnB,EAQCD,eAAOE,KARR,CAAjB;;AAYA,IAAMC,SAAS,GAAGN,0BAAOO,MAAV,yxFACJJ,eAAOK,WADH,EAaEL,eAAOM,WAbT,EAgBEN,eAAOM,WAhBT,EAuBKN,eAAOO,UAvBZ,EAwBAP,eAAOQ,WAxBP,EA2BiBR,eAAOQ,WA3BxB,EA6BkBR,eAAOC,WA7BzB,EA8BmBD,eAAOC,WA9B1B,EAqCAD,eAAOS,WArCP,EAsCkBT,eAAOU,QAtCzB,EAsCkDV,eAAOW,KAtCzD,EA0CiBX,eAAOS,WA1CxB,EA4CkBT,eAAOC,WA5CzB,EA6CmBD,eAAOC,WA7C1B,EAwDKD,eAAOO,UAxDZ,EAyDAP,eAAOQ,WAzDP,EA4DiBR,eAAOQ,WA5DxB,EA8DkBR,eAAOC,WA9DzB,EA+DmBD,eAAOC,WA/D1B,EAoEWD,eAAOE,KApElB,EAqEeF,eAAOY,WArEtB,EAuEgBZ,eAAOC,WAvEvB,EAwEiBD,eAAOC,WAxExB,EA4EAD,eAAOS,WA5EP,EA6EkBT,eAAOU,QA7EzB,EA6EkDV,eAAOW,KA7EzD,EAiFiBX,eAAOS,WAjFxB,EAmFkBT,eAAOC,WAnFzB,EAoFmBD,eAAOC,WApF1B,EAyFKD,eAAOa,WAzFZ,EA0FAb,eAAOS,WA1FP,EA2FkBT,eAAOU,QA3FzB,EA2FkDV,eAAOW,KA3FzD,EA+FiBX,eAAOS,WA/FxB,EAiGkBT,eAAOC,WAjGzB,EAkGmBD,eAAOC,WAlG1B,EAuGAD,eAAOM,WAvGP,EA6GEN,eAAOM,WA7GT,EAkHP,oCAAmBQ,2BAAmBC,OAAtC,EAA+C,IAA/C,CAlHO,EAyHP,mCAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAzHO,EAgIP,mCAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAhIO,EAuIP,mCAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAvIO,CAAf,C,CA+IA;;;AAkBA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,OAA0E;AAAA,MAAvEC,IAAuE,QAAvEA,IAAuE;AAAA,MAAjEC,IAAiE,QAAjEA,IAAiE;AAAA,MAA3DC,QAA2D,QAA3DA,QAA2D;AAAA,MAAjDC,SAAiD,QAAjDA,SAAiD;AAAA,MAAtCC,WAAsC,QAAtCA,WAAsC;;AAC/F;AACF;AACA;AACA;AACE,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,EAAD,EAAsB;AACxC;AACAF,IAAAA,WAAW,CAACE,EAAD,CAAX,CAFwC,CAIxC;;AACA,QAAIC,QAAQ,CAACC,aAAT,YAAkCC,WAAtC,EAAmD;AACjDF,MAAAA,QAAQ,CAACC,aAAT,CAAwBE,IAAxB;AACD;AACF,GARD;;AAUA,sBACE,oBAAC,sBAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,SAAS,YAAKR,QAAQ,GAAG,MAAH,GAAY,EAAzB;AAAtB,IADF,EAEGD,IAAI,CAACU,GAAL,CAAS,UAACC,GAAD,EAAqBC,KAArB;AAAA,wBACR,oBAAC,SAAD;AACE,MAAA,GAAG,YAAKD,GAAL,cAAYC,KAAZ,CADL;AAEE,MAAA,KAAK,EAAEV,SAAS,GAAG;AAAEW,QAAAA,KAAK,YAAK,MAAMb,IAAI,CAACc,MAAhB;AAAP,OAAH,GAAwC,EAF1D;AAGE,MAAA,SAAS,iBAAUf,IAAV,cAAkBY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAA9C,cAAoDJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAhF,CAHX;AAIE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACL,GAAG,CAACK,QAAL,IAAiBZ,WAAW,CAACO,GAAG,CAACN,EAAL,CAAlC;AAAA;AAJX,oBAKE;AAAK,MAAA,SAAS,iBAAUN,IAAV,cAAkBY,GAAG,CAACI,QAAJ,GAAe,UAAf,GAA4B,EAA9C,cAAoDJ,GAAG,CAACK,QAAJ,GAAe,UAAf,GAA4B,EAAhF;AAAd,OACGL,GAAG,CAACM,KADP,CALF,CADQ;AAAA,GAAT,CAFH,CADF;AAgBD,CA/BD;;;AAhBElB,EAAAA,I,4BAcwB,I,EAAO,G,EAAM,G,EAAM,G;AAb3CC,EAAAA,I;AAOAiB,IAAAA,K;AACAF,IAAAA,Q;AACAV,IAAAA,E;AACAW,IAAAA,Q;;AATAf,EAAAA,Q;AACAC,EAAAA,S;AACAC,EAAAA,W;;eA6CaL,c","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  height: Calc(100% - 1px);\n  z-index: 1;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  z-index: 2;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  \n  &:focus {\n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-XS {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-S {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-M {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-L {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: HorizontalTabSizes;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\ntype HorizontalTabSizes = 'XS' | 'S' | 'M' | 'L';\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}
+{"version":3,"sources":["../../../src/Tabs/HorizontalTabs.tsx"],"names":["HorizontalTabContainer","styled","div","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","neutral_300","Z_INDEXES","hover","primary_20","primary_700","active","focus","primary_800","focus_25","primary_500","primary_100","Size","XSmall","ComponentTextStyle","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","doTabChange","to","document","activeElement","HTMLElement","blur","map","tab","index","width","length","selected","disabled","value"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &.disabled {\n    &:hover, &:focus {\n      cursor: not-allowed;\n      \n      div {\n        color: ${COLORS.neutral_300};\n        box-shadow: none !important;\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &.selected{\n    z-index: ${Z_INDEXES.active};\n  }\n  \n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    outline: none;\n    \n    div {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n  \n    &:focus {\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n  \n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  \n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n  \n      &:hover, &:focus {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\ninterface HorizontalTab {\n  value: string;\n  selected: boolean;\n  to: string;\n  disabled?: boolean;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  return (\n    <HorizontalTabContainer>\n      <TabSideFill className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => (\n        <TabButton\n          key={`${tab}_${index}`}\n          style={fullWidth ? { width: `${100 / tabs.length}%` } : {}}\n          className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}\n          onClick={() => !tab.disabled && doTabChange(tab.to)}>\n          <div className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>\n            {tab.value}\n          </div>\n        </TabButton>\n      ))}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"file":"HorizontalTabs.js"}

package/dist/js/Tabs/TabLink.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NavLinkProps } from 'react-router-dom';
 import { BaseProps } from '../icons';
+import { Size } from '../types';
 declare type TabLinkProps = {
     disabled?: boolean;
     requiredLine: string;
@@ -9,7 +10,7 @@ declare type TabLinkProps = {
     onLinkClick?: () => void;
     testId?: string;
     showNotificationDot?: boolean;
-    size?: string;
+    size?: Size.Small | Size.Medium | Size.Large;
     variant?: 'positive' | 'critical';
 } & NavLinkProps;
 declare const TabLink: ({ to, disabled, exact, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot, size, variant }: TabLinkProps) => JSX.Element;

package/dist/js/Tabs/TabLink.js

@@ -17,8 +17,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _NotificationDot = require("../NotificationDot");
 
+var _types = require("../types");
+
 var _styles = require("../styles");
 
+var _zIndexes = require("../styles/z-indexes");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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); }
@@ -29,11 +33,11 @@ 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 StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    background-color: ", ";\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active {\n    background-color: ", ";\n  }\n  &.active:hover {\n    background-color: ", ";\n  }\n  &.active:focus {\n    background-color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ", ";\n\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n  &:disabled {\n    box-shadow: none;\n    background-color: ", ";\n    span {\n      color: ", ";\n    }\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
+var StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    z-index: ", ";\n    background-color: ", ";\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active {\n    z-index: ", ";\n    background-color: ", ";\n  }\n\n  &.active:hover {\n    background-color: ", ";\n  }\n\n  &.active:focus {\n    background-color: ", ";\n  }\n\n  &:hover {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    box-shadow: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
   return props.disabled ? _styles.COLORS.neutral_100 : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
-}, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.white);
+}, _zIndexes.Z_INDEXES.focus, _styles.COLORS.white, _styles.COLORS.white, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _styles.COLORS.white, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.white);
 
 var OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
 
@@ -59,7 +63,7 @@ var TabLink = function TabLink(_ref) {
       _ref$showNotification = _ref.showNotificationDot,
       showNotificationDot = _ref$showNotification === void 0 ? false : _ref$showNotification,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'small' : _ref$size,
+      size = _ref$size === void 0 ? _types.Size.Small : _ref$size,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
   var location = (0, _reactRouterDom.useLocation)();
@@ -98,7 +102,6 @@ TabLink.propTypes = {
   onLinkClick: _propTypes.default.func,
   testId: _propTypes.default.string,
   showNotificationDot: _propTypes.default.bool,
-  size: _propTypes.default.string,
   variant: _propTypes.default.oneOf(['positive', 'critical'])
 };
 var _default = TabLink;

package/dist/js/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["StyledTabLink","NavLink","COLORS","neutral_600","props","disabled","neutral_100","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","variant","location","ref","React","useRef","toString","pathname","current","blur","undefined"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;;;AAmBA,IAAMA,aAAa,GAAG,+BAAOC,uBAAP,CAAH,6lDAORC,eAAOC,WAPC,EASG,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBH,eAAOI,WAAxB,GAAsC,aAAlD;AAAA,CATH,EAUP,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,SAA7C;AAAA,CAVO,EAqBKH,eAAOK,KArBZ,EA0BOL,eAAOK,KA1Bd,EA+BKL,eAAOM,UA/BZ,EAkCKN,eAAOO,UAlCZ,EAqCKP,eAAOK,KArCZ,EAyCKL,eAAOO,UAzCZ,EA0CNP,eAAOQ,WA1CD,EA8CKR,eAAOS,WA9CZ,EA+CNT,eAAOU,WA/CD,EAyDOV,eAAOW,WAzDd,EAmEOX,eAAOQ,WAnEd,EAuEKR,eAAOS,WAvEZ,EA0EOT,eAAOU,WA1Ed,EA+EKV,eAAOK,KA/EZ,EAiFJL,eAAOY,WAjFH,EAoFOZ,eAAOK,KApFd,CAAnB;;AAyFA,IAAMQ,2BAA2B,GAAGC,0BAAOC,GAAV,mNAAjC;;AAUA,IAAMC,UAAU,GAAGF,0BAAOC,GAAV,kLAAhB;;AAQA,IAAME,aAAa,GAAGH,0BAAOC,GAAV,yFAAnB;;AAIA,IAAMG,kBAAkB,GAAGJ,0BAAOC,GAAV,2GAAxB;;AAIA,IAAMI,mBAAmB,GAAGL,0BAAOC,GAAV,6FAAzB;;AAIA,IAAMK,OAAO,GAAG,SAAVA,OAAU,OAAiM;AAAA,MAA9LC,EAA8L,QAA9LA,EAA8L;AAAA,2BAA1LlB,QAA0L;AAAA,MAA1LA,QAA0L,8BAA/K,KAA+K;AAAA,wBAAxKmB,KAAwK;AAAA,MAAxKA,KAAwK,2BAAhK,KAAgK;AAAA,MAAzJC,YAAyJ,QAAzJA,YAAyJ;AAAA,MAA3IC,YAA2I,QAA3IA,YAA2I;AAAA,MAA7HC,gBAA6H,QAA7HA,gBAA6H;AAAA,MAA3GC,WAA2G,QAA3GA,WAA2G;AAAA,MAA9FC,MAA8F,QAA9FA,MAA8F;AAAA,mCAAtFC,mBAAsF;AAAA,MAAtFA,mBAAsF,sCAAhE,KAAgE;AAAA,uBAAzDC,IAAyD;AAAA,MAAzDA,IAAyD,0BAAlD,OAAkD;AAAA,0BAAzCC,OAAyC;AAAA,MAAzCA,OAAyC,6BAA/B,UAA+B;AAC/M,MAAMC,QAAQ,GAAG,kCAAjB;AACA,MAAMC,GAAG,GAAGC,KAAK,CAACC,MAAN,CAAkB,IAAlB,CAAZ;AAEA,sBACE,oBAAC,aAAD;AACE,IAAA,EAAE,EAAEb,EAAE,CAACc,QAAH,EADN;AAEE,IAAA,eAAe,EAAC,QAFlB;AAGE,IAAA,QAAQ,EAAEhC,QAHZ;AAIE,IAAA,KAAK,EAAEmB,KAJT;AAKE,IAAA,IAAI,EAAC,KALP;AAME,qBAAeD,EAAE,KAAKU,QAAQ,CAACK,QANjC;AAOE,IAAA,OAAO,EAAE,mBAAM;AAAA;;AACbJ,MAAAA,GAAG,SAAH,IAAAA,GAAG,WAAH,4BAAAA,GAAG,CAAEK,OAAL,8DAAcC,IAAd;;AACA,UAAIZ,WAAJ,EAAiB;AACfA,QAAAA,WAAW;AACZ;AACF,KAZH;AAaE,IAAA,GAAG,EAAEM,GAbP;AAcE,mBAAaL;AAdf,kBAeE,oBAAC,aAAD,qBACA,oBAAC,UAAD,qBACE,kCAAOJ,YAAP,CADF,CADA,EAICC,YAAY,IAAIC,gBAAhB,gBACC,oBAAC,2BAAD,QACGA,gBAAgB,iBAAI,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC;AAAvB,IADvB,EAEGD,YAAY,KAAKe,SAAjB,iBAA8B,kCAAOf,YAAP,CAFjC,CADD,GAKGA,YAAY,gBACd,oBAAC,mBAAD,qBACE,kCAAOA,YAAP,CADF,CADc,gBAKd,yCAdF,CAfF,eAgCE,oBAAC,kBAAD,QACGI,mBAAmB,iBAAI,oBAAC,gCAAD;AAAiB,IAAA,MAAM,EAAC,iBAAxB;AAA0C,IAAA,IAAI,EAAEC,IAAhD;AAAsD,IAAA,OAAO,EAAEC;AAA/D,IAD1B,CAhCF,CADF;AAsCD,CA1CD;;;AAvIE3B,EAAAA,Q;AACAoB,EAAAA,Y;AACAC,EAAAA,Y;AAEAE,EAAAA,W;AACAC,EAAAA,M;AACAC,EAAAA,mB;AACAC,EAAAA,I;AACAC,EAAAA,O,4BAAU,U,EAAa,U;;eA2KVV,O","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { COLORS } from '../styles';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: string;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    background-color: ${COLORS.neutral_20};\n  }\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n  &:active {\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-top-left-radius: 2px;\n      border-top-right-radius: 2px;\n      border-bottom-left-radius: 2px;\n      border-bottom-right-radius: 2px;\n    }\n  }\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-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 OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = 'small', variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}
+{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["StyledTabLink","NavLink","COLORS","neutral_600","props","disabled","neutral_100","Z_INDEXES","focus","white","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","to","exact","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","location","ref","React","useRef","toString","pathname","current","blur","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps, useLocation } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.FunctionComponent<BaseProps>;\n  onLinkClick?: () => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n  exact: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    z-index: ${Z_INDEXES.focus};\n    background-color: ${COLORS.white};\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    outline: none;\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &.active:focus {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    box-shadow: none;\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    box-shadow: none;\n    background-color: ${COLORS.white};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.white};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst TabLink = ({ to, disabled = false, exact = false, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot = false, size = Size.Small, variant = 'critical' }: TabLinkProps) => {\n  const location = useLocation();\n  const ref = React.useRef<any>(null);\n\n  return (\n    <StyledTabLink\n      to={to.toString()}\n      activeClassName=\"active\"\n      disabled={disabled}\n      exact={exact}\n      role=\"tab\"\n      aria-selected={to === location.pathname}\n      onClick={() => {\n        ref?.current?.blur();\n        if (onLinkClick) {\n          onLinkClick();\n        }\n      }}\n      ref={ref}\n      data-testid={testId}>\n      <TextContainer>  \n      <TopWrapper>\n        <span>{requiredLine}</span>        \n      </TopWrapper>\n      {optionalLine && OptionalLineIcon ? (\n        <OptionalLineWrapperWithIcon>\n          {OptionalLineIcon && <OptionalLineIcon size=\"16px\" />}\n          {optionalLine !== undefined && <span>{optionalLine}</span>}\n        </OptionalLineWrapperWithIcon>\n      ) : optionalLine ? (\n        <OptionalLineWrapper>\n          <span>{optionalLine}</span>\n        </OptionalLineWrapper>\n      ) : (\n        <></>\n      )}\n      </TextContainer>\n      <StyledNotification>\n        {showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}\n      </StyledNotification>\n    </StyledTabLink>\n  );\n};\n\nexport default TabLink;\n"],"file":"TabLink.js"}

package/dist/js/Tabs/Tabs.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { Size } from '../types';
 declare type TabsProps = {
     children?: any;
-    size: string;
+    size: Size;
 };
 declare const Tabs: React.FunctionComponent<TabsProps>;
 export default Tabs;