@laerdal/life-react-components 2.3.1-dev.9 → 3.0.0

package/dist/Switcher/MobileCustomMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileCustomMenuContent.js","names":["React","useScrollableContainer","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","MobileActionContainer","MobileCustomMenuContent","children","header","action","scrollContainerRef","scrollable","note"],"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n  header?: MenuGroupHeader;\n  action?: MenuButton;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ children, header, action }) => {\n  const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n  return (\n    <MobileMenuWrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {!!header && (\n          <MobileHeaderContainer>\n            <MobileHeaderText>{header.header}</MobileHeaderText>\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n          </MobileHeaderContainer>\n        )}\n        {children}\n      </ScrollableContainer>\n      {action && <MobileActionContainer {...action} />}\n    </MobileMenuWrapper>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,sBAAsB,QAAQ,+BAA+B;AAEtE,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAQ,4CAA4C;AAC9J,SAASC,qBAAqB,QAAQ,qDAAqD;AAAC;AAAA;AAO5F,OAAO,IAAMC,uBAA8E,GAAG,SAAjFA,uBAA8E,OAAqC;EAAA,IAA/BC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAEC,MAAM,QAANA,MAAM;EACvH,4BAAyCV,sBAAsB,CAAC,CAACQ,QAAQ,CAAC,CAAC;IAAA;IAApEG,kBAAkB;IAAEC,UAAU;EAErC,oBACE,MAAC,iBAAiB;IAAA,wBAChB,MAAC,mBAAmB;MAAC,GAAG,EAAED,kBAA0B;MAAC,SAAS,EAAEC,UAAU,GAAG,YAAY,GAAG,EAAG;MAAA,WAC5F,CAAC,CAACH,MAAM,iBACP,MAAC,qBAAqB;QAAA,wBACpB,KAAC,gBAAgB;UAAA,UAAEA,MAAM,CAACA;QAAM,EAAoB,EACnDA,MAAM,CAACI,IAAI,iBAAI,KAAC,gBAAgB;UAAA,UAAEJ,MAAM,CAACI;QAAI,EAAoB;MAAA,EAErE,EACAL,QAAQ;IAAA,EACW,EACrBE,MAAM,iBAAI,KAAC,qBAAqB,oBAAKA,MAAM,EAAI;EAAA,EAC9B;AAExB,CAAC"}
+{"version":3,"file":"MobileCustomMenuContent.js","names":["React","useScrollableContainer","MobileHeaderContainer","MobileHeaderNote","MobileHeaderText","MobileMenuWrapper","ScrollableContainer","MobileActionContainer","MobileCustomMenuContent","children","header","action","scrollContainerRef","scrollable","note"],"sources":["../../src/Switcher/MobileCustomMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollableContainer } from '../common/ScrollableContainer';\nimport { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';\nimport { MobileHeaderContainer, MobileHeaderNote, MobileHeaderText, MobileMenuWrapper, ScrollableContainer } from '../GlobalNavigationBar/mobile/CommonStyles';\nimport { MobileActionContainer } from '../GlobalNavigationBar/mobile/MobileActionContainer';\n\ninterface MobileCustomMenuContentProps {\n  header?: MenuGroupHeader;\n  action?: MenuButton;\n  children?: React.ReactNode;\n}\n\nexport const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps> = ({ children, header, action }) => {\n  const [scrollContainerRef, scrollable] = useScrollableContainer([children]);\n\n  return (\n    <MobileMenuWrapper>\n      <ScrollableContainer ref={scrollContainerRef as any} className={scrollable ? 'scrollable' : ''}>\n        {!!header && (\n          <MobileHeaderContainer>\n            <MobileHeaderText>{header.header}</MobileHeaderText>\n            {header.note && <MobileHeaderNote>{header.note}</MobileHeaderNote>}\n          </MobileHeaderContainer>\n        )}\n        {children}\n      </ScrollableContainer>\n      {action && <MobileActionContainer {...action} />}\n    </MobileMenuWrapper>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,sBAAsB,QAAQ,+BAA+B;AAEtE,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAQ,4CAA4C;AAC9J,SAASC,qBAAqB,QAAQ,qDAAqD;AAAC;AAAA;AAQ5F,OAAO,IAAMC,uBAA8E,GAAG,SAAjFA,uBAA8E,OAAqC;EAAA,IAA/BC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAEC,MAAM,QAANA,MAAM;EACvH,4BAAyCV,sBAAsB,CAAC,CAACQ,QAAQ,CAAC,CAAC;IAAA;IAApEG,kBAAkB;IAAEC,UAAU;EAErC,oBACE,MAAC,iBAAiB;IAAA,wBAChB,MAAC,mBAAmB;MAAC,GAAG,EAAED,kBAA0B;MAAC,SAAS,EAAEC,UAAU,GAAG,YAAY,GAAG,EAAG;MAAA,WAC5F,CAAC,CAACH,MAAM,iBACP,MAAC,qBAAqB;QAAA,wBACpB,KAAC,gBAAgB;UAAA,UAAEA,MAAM,CAACA;QAAM,EAAoB,EACnDA,MAAM,CAACI,IAAI,iBAAI,KAAC,gBAAgB;UAAA,UAAEJ,MAAM,CAACI;QAAI,EAAoB;MAAA,EAErE,EACAL,QAAQ;IAAA,EACW,EACrBE,MAAM,iBAAI,KAAC,qBAAqB,oBAAKA,MAAM,EAAI;EAAA,EAC9B;AAExB,CAAC;AAAC;EApBAF,QAAQ;AAAA"}

package/dist/Switcher/SwitcherMenuItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface SwitcherNavItem {
     label: string;
     url: string;

package/dist/Table/Table.cjs

@@ -23,7 +23,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var Table = function Table(props) {
   var onPreviousPageClick = props.onPreviousPageClick,
     onNextPageClick = props.onNextPageClick,

package/dist/Table/Table.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /**
  * Import React libraries.
  */

package/dist/Table/TableFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.cjs","names":["TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","defaultOnMouseDownHandler","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","COLORS","neutral_600","nextPage"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport { SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"mappings":"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"}
+{"version":3,"file":"TableFooter.cjs","names":["TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","defaultOnMouseDownHandler","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","COLORS","neutral_600","nextPage"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport { SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"mappings":"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"}

package/dist/Table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","names":["React","DropdownButton","IconButton","SystemIcons","COLORS","StyledTableFooter","StyledTableFooterCollapseButton","StyledTableFooterContent","StyledTableFooterControls","StyledTableFooterCurrentInfo","defaultOnMouseDownHandler","TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","neutral_600","nextPage"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport { SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"mappings":"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"}
+{"version":3,"file":"TableFooter.js","names":["React","DropdownButton","IconButton","SystemIcons","COLORS","StyledTableFooter","StyledTableFooterCollapseButton","StyledTableFooterContent","StyledTableFooterControls","StyledTableFooterCurrentInfo","defaultOnMouseDownHandler","TableFooter","props","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","accordion","setIsCollapsed","isCollapsed","rows","length","showMoreLabel","showFewerLabel","showLoadingIndicator","onRowsPerPageChange","total","from","to","prevPage","neutral_600","nextPage"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\nimport {TableProps} from './TableTypes';\nimport {DropdownButton, DropdownItem} from '../Dropdown';\nimport {IconButton} from '../Button';\nimport { SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {\n  StyledTableFooter, StyledTableFooterCollapseButton,\n  StyledTableFooterContent,\n  StyledTableFooterControls,\n  StyledTableFooterCurrentInfo\n} from './TableStyles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\ninterface TableFooterProps extends TableProps {\n  onRowsPerPageChange: (value: number) => void;\n  rowsPerPage: number;\n  from?: number;\n  to?: number;\n  total?: number;\n  nextPage: () => void;\n  prevPage: () => void;\n  setIsCollapsed: (isCollapsed: boolean) => void;\n  isCollapsed: boolean;\n}\n\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\n\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\n\n  return (\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\n          {\n            props.accordion &&\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\n                                             onMouseDown={defaultOnMouseDownHandler}\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\n              {\n                props.isCollapsed &&\n                <>\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\n                  <SystemIcons.ArrowDropDown/>\n                </>\n              }\n              {\n                !props.isCollapsed &&\n                <>\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\n                  <SystemIcons.ArrowDropUp/>\n                </>\n              }\n            </StyledTableFooterCollapseButton>\n          }\n          {\n            !props.accordion &&\n            <StyledTableFooterContent>\n              <DropdownButton\n                type={'text'}\n                items={rowsPerPageValues}\n                disabled={props.showLoadingIndicator}\n                value={[`${props.rowsPerPage}`]}\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\n                label={dropDownText}\n                keepLabel={true}\n              />\n              <StyledTableFooterCurrentInfo>\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\n              </StyledTableFooterCurrentInfo>\n              <StyledTableFooterControls>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronLeft size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\n                  <SystemIcons.ChevronRight size=\"24\" color={COLORS.neutral_600}/>\n                </IconButton>\n              </StyledTableFooterControls>\n            </StyledTableFooterContent>\n          }\n    </StyledTableFooter>\n  );\n};\n\n\nexport default TableFooter;\n"],"mappings":"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"}

package/dist/Table/TableTypes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * Types for the table.
  */

package/dist/Tabs/TabLink.cjs

@@ -32,12 +32,12 @@ var StyledNotification = _styledComponents.default.div(_templateObject4 || (_tem
 var EndLineIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 15px 0 0 !important;\n"])));
 var OptionalLineWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n"])));
 //replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
-var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \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      ", "\n    }\n  \n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n  \n    &.active:hover {\n      background-color: ", ";\n    }\n  \n    &:hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n  \n        border-radius: 4px;\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      background-color: ", ";\n      color: ", ";\n  \n      span {\n        color: ", ";\n      }\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
+var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\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      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-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      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\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.focusStyles, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _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.neutral_300, _styles.COLORS.neutral_300);
-var TabLink = function TabLink(_ref) {
+var TabLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var to = _ref.to,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -60,65 +60,66 @@ var TabLink = function TabLink(_ref) {
     containerOnMouseLeave = _ref.containerOnMouseLeave,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var ref = React.useRef(null);
   var _useState = (0, React.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeState = _useState2[0],
     setActiveState = _useState2[1];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
     disabled: disabled,
     className: disabled ? 'disabled' : '',
     onMouseEnter: containerOnMouseEnter,
     onMouseLeave: containerOnMouseLeave,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, _objectSpread(_objectSpread({
-      to: forceDeactivate ? 'invalid' : to.toString()
-      //disabled={disabled}
-      ,
-      className: function className(_ref2) {
-        var isActive = _ref2.isActive;
-        onActiveStateChanged && onActiveStateChanged(activeState);
-        if (forceDeactivate) {
-          if (disabled) return 'disabled';else return '';
-        }
-        if (isActive != activeState) setActiveState(isActive);
-        return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
-      },
-      onMouseDown: _common.defaultOnMouseDownHandler,
-      tabIndex: disabled ? -1 : 0,
-      role: "tab",
-      "aria-selected": activeState,
-      onClick: function onClick(e) {
-        return !disabled && onLinkClick && onLinkClick(e);
-      },
-      ref: ref,
-      "data-testid": testId
-    }, rest), {}, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TopWrapper, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: requiredLine
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, _objectSpread(_objectSpread({
+        to: forceDeactivate ? 'invalid' : to.toString()
+        //disabled={disabled}
+        ,
+        className: function className(_ref2) {
+          var isActive = _ref2.isActive;
+          onActiveStateChanged && onActiveStateChanged(activeState);
+          if (forceDeactivate) {
+            if (disabled) return 'disabled';else return '';
+          }
+          if (isActive != activeState) setActiveState(isActive);
+          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
+        },
+        onMouseDown: _common.defaultOnMouseDownHandler,
+        tabIndex: disabled ? -1 : 0,
+        role: "tab",
+        "aria-selected": activeState,
+        onClick: function onClick(e) {
+          return !disabled && onLinkClick && onLinkClick(e);
+        },
+        ref: ref,
+        "data-testid": testId
+      }, rest), {}, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TopWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: requiredLine
+            })
+          }), optionalLine && OptionalLineIcon ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionalLineWrapperWithIcon, {
+            children: [OptionalLineIcon, !!optionalLine && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: optionalLine
+            })]
+          }) : optionalLine ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionalLineWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: optionalLine
+            })
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledNotification, {
+          children: showNotificationDot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
+            testId: "NotificationDot",
+            size: size,
+            variant: variant
           })
-        }), optionalLine && OptionalLineIcon ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionalLineWrapperWithIcon, {
-          children: [OptionalLineIcon, !!optionalLine && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: optionalLine
-          })]
-        }) : optionalLine ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionalLineWrapper, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: optionalLine
-          })
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledNotification, {
-        children: showNotificationDot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
-          testId: "NotificationDot",
-          size: size,
-          variant: variant
-        })
-      }), endLineIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndLineIcon, {
-        children: endLineIcon
-      })]
-    })), children]
+        }), endLineIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndLineIcon, {
+          children: endLineIcon
+        })]
+      })), children]
+    })
   });
-};
+});
 var _default = TabLink;
 exports.default = _default;
 //# sourceMappingURL=TabLink.cjs.map

package/dist/Tabs/TabLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.cjs","names":["OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","ref","React","useRef","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\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\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{disabled: boolean}>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \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      ${focusStyles}\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    &: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      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: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n  \n        border-radius: 4px;\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      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n  \n      span {\n        color: ${COLORS.neutral_300};\n      }\n  \n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <NavLink\n        to={forceDeactivate ? 'invalid' : to.toString()}\n        //disabled={disabled}\n        className={({ isActive }) => {\n          onActiveStateChanged && onActiveStateChanged(activeState);\n          if(forceDeactivate)\n            {\n              if(disabled) \n                return 'disabled';\n              else \n                return '';\n            }\n\n          if(isActive != activeState)\n            setActiveState(isActive);\n\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}\n        {...rest}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n        {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n      </NavLink>\n      {children}\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.cjs","names":["OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","React","forwardRef","ref","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\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\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{ disabled: boolean }>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\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      ${focusStyles}\n    }\n\n    &.active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.neutral_20};\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ${COLORS.primary_20};\n    }\n\n    &:hover, &.dropdown-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      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: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-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      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n\n      span {\n        color: ${COLORS.neutral_300};\n      }\n\n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps, ref) => {\n  \n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <>\n        <NavLink\n          to={forceDeactivate ? 'invalid' : to.toString()}\n          //disabled={disabled}\n          className={({ isActive }) => {\n            onActiveStateChanged && onActiveStateChanged(activeState);\n            if (forceDeactivate) {\n              if (disabled) return 'disabled';\n              else return '';\n            }\n\n            if (isActive != activeState) setActiveState(isActive);\n\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n          }}\n          onMouseDown={defaultOnMouseDownHandler}\n          tabIndex={disabled ? -1 : 0}\n          role=\"tab\"\n          aria-selected={activeState}\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n          ref={ref}\n          data-testid={testId}\n          {...rest}>\n          <TextContainer>\n            <TopWrapper>\n              <span>{requiredLine}</span>\n            </TopWrapper>\n            {optionalLine && OptionalLineIcon ? (\n              <OptionalLineWrapperWithIcon>\n                {OptionalLineIcon}\n                {!!optionalLine && <span>{optionalLine}</span>}\n              </OptionalLineWrapperWithIcon>\n            ) : optionalLine ? (\n              <OptionalLineWrapper>\n                <span>{optionalLine}</span>\n              </OptionalLineWrapper>\n            ) : (\n              <></>\n            )}\n          </TextContainer>\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n        </NavLink>\n        {children}\n      </>\n    </Wrapper>\n  );\n});\n\nexport default TabLink;\n"],"mappings":"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"}

package/dist/Tabs/TabLink.d.ts

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import { NavLinkProps } from 'react-router-dom';
 import { Size } from '../types';
-type TabLinkProps = {
-    disabled?: boolean;
-    forceDeactivate?: boolean;
+declare const TabLink: React.ForwardRefExoticComponent<{
+    disabled?: boolean | undefined;
+    forceDeactivate?: boolean | undefined;
     requiredLine: string;
-    optionalLine?: string;
+    optionalLine?: string | undefined;
     OptionalLineIcon?: React.ReactNode;
     endLineIcon?: React.ReactNode;
-    onLinkClick?: (e: React.MouseEvent) => void;
-    testId?: string;
-    onActiveStateChanged?: (state: boolean) => void;
-    showNotificationDot?: boolean;
-    size?: Size.Small | Size.Medium | Size.Large;
-    variant?: 'positive' | 'critical';
-    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-} & NavLinkProps;
-declare const TabLink: ({ to, disabled, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, forceDeactivate, testId, showNotificationDot, size, endLineIcon, onActiveStateChanged, variant, children, containerOnMouseEnter, containerOnMouseLeave, className, ...rest }: TabLinkProps) => JSX.Element;
+    onLinkClick?: ((e: React.MouseEvent) => void) | undefined;
+    testId?: string | undefined;
+    onActiveStateChanged?: ((state: boolean) => void) | undefined;
+    showNotificationDot?: boolean | undefined;
+    size?: Size.Small | Size.Medium | Size.Large | undefined;
+    variant?: "positive" | "critical" | undefined;
+    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+} & NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
 export default TabLink;

package/dist/Tabs/TabLink.js

@@ -25,12 +25,12 @@ var StyledNotification = styled.div(_templateObject4 || (_templateObject4 = _tag
 var EndLineIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
 var OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 12px;\n"])));
 //replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
-var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \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      ", "\n    }\n  \n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n  \n    &.active:hover {\n      background-color: ", ";\n    }\n  \n    &:hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n  \n        border-radius: 4px;\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      background-color: ", ";\n      color: ", ";\n  \n      span {\n        color: ", ";\n      }\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
+var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\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      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-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      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
   return props.disabled ? COLORS.neutral_100 : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
-var TabLink = function TabLink(_ref) {
+var TabLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var to = _ref.to,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -53,64 +53,65 @@ var TabLink = function TabLink(_ref) {
     containerOnMouseLeave = _ref.containerOnMouseLeave,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var ref = React.useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     activeState = _useState2[0],
     setActiveState = _useState2[1];
-  return /*#__PURE__*/_jsxs(Wrapper, {
+  return /*#__PURE__*/_jsx(Wrapper, {
     disabled: disabled,
     className: disabled ? 'disabled' : '',
     onMouseEnter: containerOnMouseEnter,
     onMouseLeave: containerOnMouseLeave,
-    children: [/*#__PURE__*/_jsxs(NavLink, _objectSpread(_objectSpread({
-      to: forceDeactivate ? 'invalid' : to.toString()
-      //disabled={disabled}
-      ,
-      className: function className(_ref2) {
-        var isActive = _ref2.isActive;
-        onActiveStateChanged && onActiveStateChanged(activeState);
-        if (forceDeactivate) {
-          if (disabled) return 'disabled';else return '';
-        }
-        if (isActive != activeState) setActiveState(isActive);
-        return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
-      },
-      onMouseDown: defaultOnMouseDownHandler,
-      tabIndex: disabled ? -1 : 0,
-      role: "tab",
-      "aria-selected": activeState,
-      onClick: function onClick(e) {
-        return !disabled && onLinkClick && onLinkClick(e);
-      },
-      ref: ref,
-      "data-testid": testId
-    }, rest), {}, {
-      children: [/*#__PURE__*/_jsxs(TextContainer, {
-        children: [/*#__PURE__*/_jsx(TopWrapper, {
-          children: /*#__PURE__*/_jsx("span", {
-            children: requiredLine
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(NavLink, _objectSpread(_objectSpread({
+        to: forceDeactivate ? 'invalid' : to.toString()
+        //disabled={disabled}
+        ,
+        className: function className(_ref2) {
+          var isActive = _ref2.isActive;
+          onActiveStateChanged && onActiveStateChanged(activeState);
+          if (forceDeactivate) {
+            if (disabled) return 'disabled';else return '';
+          }
+          if (isActive != activeState) setActiveState(isActive);
+          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
+        },
+        onMouseDown: defaultOnMouseDownHandler,
+        tabIndex: disabled ? -1 : 0,
+        role: "tab",
+        "aria-selected": activeState,
+        onClick: function onClick(e) {
+          return !disabled && onLinkClick && onLinkClick(e);
+        },
+        ref: ref,
+        "data-testid": testId
+      }, rest), {}, {
+        children: [/*#__PURE__*/_jsxs(TextContainer, {
+          children: [/*#__PURE__*/_jsx(TopWrapper, {
+            children: /*#__PURE__*/_jsx("span", {
+              children: requiredLine
+            })
+          }), optionalLine && OptionalLineIcon ? /*#__PURE__*/_jsxs(OptionalLineWrapperWithIcon, {
+            children: [OptionalLineIcon, !!optionalLine && /*#__PURE__*/_jsx("span", {
+              children: optionalLine
+            })]
+          }) : optionalLine ? /*#__PURE__*/_jsx(OptionalLineWrapper, {
+            children: /*#__PURE__*/_jsx("span", {
+              children: optionalLine
+            })
+          }) : /*#__PURE__*/_jsx(_Fragment, {})]
+        }), /*#__PURE__*/_jsx(StyledNotification, {
+          children: showNotificationDot && /*#__PURE__*/_jsx(NotificationDot, {
+            testId: "NotificationDot",
+            size: size,
+            variant: variant
           })
-        }), optionalLine && OptionalLineIcon ? /*#__PURE__*/_jsxs(OptionalLineWrapperWithIcon, {
-          children: [OptionalLineIcon, !!optionalLine && /*#__PURE__*/_jsx("span", {
-            children: optionalLine
-          })]
-        }) : optionalLine ? /*#__PURE__*/_jsx(OptionalLineWrapper, {
-          children: /*#__PURE__*/_jsx("span", {
-            children: optionalLine
-          })
-        }) : /*#__PURE__*/_jsx(_Fragment, {})]
-      }), /*#__PURE__*/_jsx(StyledNotification, {
-        children: showNotificationDot && /*#__PURE__*/_jsx(NotificationDot, {
-          testId: "NotificationDot",
-          size: size,
-          variant: variant
-        })
-      }), endLineIcon && /*#__PURE__*/_jsx(EndLineIcon, {
-        children: endLineIcon
-      })]
-    })), children]
+        }), endLineIcon && /*#__PURE__*/_jsx(EndLineIcon, {
+          children: endLineIcon
+        })]
+      })), children]
+    })
   });
-};
+});
 export default TabLink;
 //# sourceMappingURL=TabLink.js.map

package/dist/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","ref","useRef","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\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\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{disabled: boolean}>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \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      ${focusStyles}\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    &: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      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: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n  \n        border-radius: 4px;\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      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n  \n      span {\n        color: ${COLORS.neutral_300};\n      }\n  \n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <NavLink\n        to={forceDeactivate ? 'invalid' : to.toString()}\n        //disabled={disabled}\n        className={({ isActive }) => {\n          onActiveStateChanged && onActiveStateChanged(activeState);\n          if(forceDeactivate)\n            {\n              if(disabled) \n                return 'disabled';\n              else \n                return '';\n            }\n\n          if(isActive != activeState)\n            setActiveState(isActive);\n\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}\n        {...rest}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n        {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n      </NavLink>\n      {children}\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","forwardRef","ref","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\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\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{ disabled: boolean }>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\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      ${focusStyles}\n    }\n\n    &.active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.neutral_20};\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ${COLORS.primary_20};\n    }\n\n    &:hover, &.dropdown-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      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: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-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      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n\n      span {\n        color: ${COLORS.neutral_300};\n      }\n\n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps, ref) => {\n  \n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <>\n        <NavLink\n          to={forceDeactivate ? 'invalid' : to.toString()}\n          //disabled={disabled}\n          className={({ isActive }) => {\n            onActiveStateChanged && onActiveStateChanged(activeState);\n            if (forceDeactivate) {\n              if (disabled) return 'disabled';\n              else return '';\n            }\n\n            if (isActive != activeState) setActiveState(isActive);\n\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n          }}\n          onMouseDown={defaultOnMouseDownHandler}\n          tabIndex={disabled ? -1 : 0}\n          role=\"tab\"\n          aria-selected={activeState}\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n          ref={ref}\n          data-testid={testId}\n          {...rest}>\n          <TextContainer>\n            <TopWrapper>\n              <span>{requiredLine}</span>\n            </TopWrapper>\n            {optionalLine && OptionalLineIcon ? (\n              <OptionalLineWrapperWithIcon>\n                {OptionalLineIcon}\n                {!!optionalLine && <span>{optionalLine}</span>}\n              </OptionalLineWrapperWithIcon>\n            ) : optionalLine ? (\n              <OptionalLineWrapper>\n                <span>{optionalLine}</span>\n              </OptionalLineWrapper>\n            ) : (\n              <></>\n            )}\n          </TextContainer>\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n        </NavLink>\n        {children}\n      </>\n    </Wrapper>\n  );\n});\n\nexport default TabLink;\n"],"mappings":"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"}

package/dist/Tile/TileCommonItems.cjs

@@ -102,12 +102,12 @@ var RenderTileItem = function RenderTileItem(item, size) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkWrapper, {
           className: size,
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_HyperLink.HyperLink, _objectSpread(_objectSpread({}, rest), {}, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkIcon, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkText, {
+              children: linkText
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkIcon, {
               children: /*#__PURE__*/_react.default.cloneElement(linkIcon, {
                 size: size === _types.Size.Large ? '28px' : '24px'
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TileHyperLinkText, {
-              children: linkText
             })]
           }))
         }, key);