@laerdal/life-react-components 1.2.2-dev.6 → 1.2.2-dev.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/Banners/Banner.js +1 -0
- package/dist/esm/Banners/Banner.js.map +1 -1
- package/dist/esm/Button/BackButton.js +4 -4
- package/dist/esm/Button/BackButton.js.map +1 -1
- package/dist/esm/Button/Iconbutton.js +6 -2
- package/dist/esm/Button/Iconbutton.js.map +1 -1
- package/dist/esm/Button/__tests__/BackButton.test.js +3 -4
- package/dist/esm/Button/__tests__/BackButton.test.js.map +1 -1
- package/dist/esm/Chips/ActionChip.js +2 -3
- package/dist/esm/Chips/ActionChip.js.map +1 -1
- package/dist/esm/Chips/ChipInput.js +1 -2
- package/dist/esm/Chips/ChipInput.js.map +1 -1
- package/dist/esm/Chips/FilterChip.js +2 -3
- package/dist/esm/Chips/FilterChip.js.map +1 -1
- package/dist/esm/Chips/InputChip.js +2 -3
- package/dist/esm/Chips/InputChip.js.map +1 -1
- package/dist/esm/Dropdown/BasicDropdown.js +3 -2
- package/dist/esm/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/esm/Dropdown/ChipDropdownInput.js +2 -3
- package/dist/esm/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/esm/Dropdown/DropdownFilter.js +4 -3
- package/dist/esm/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/esm/GlobalNavigationBar/ExtendedMainMenu.js +1 -2
- package/dist/esm/GlobalNavigationBar/ExtendedMainMenu.js.map +1 -1
- package/dist/esm/InputFields/Label.js +2 -1
- package/dist/esm/InputFields/Label.js.map +1 -1
- package/dist/esm/InputFields/PasswordField.js +1 -0
- package/dist/esm/InputFields/PasswordField.js.map +1 -1
- package/dist/esm/InputFields/QuickSearch.js +2 -2
- package/dist/esm/InputFields/QuickSearch.js.map +1 -1
- package/dist/esm/InputFields/ResponsiveComponentWrapper.js +2 -2
- package/dist/esm/InputFields/ResponsiveComponentWrapper.js.map +1 -1
- package/dist/esm/InputFields/SearchBar.js +29 -31
- package/dist/esm/InputFields/SearchBar.js.map +1 -1
- package/dist/esm/InputFields/TextField.js +1 -0
- package/dist/esm/InputFields/TextField.js.map +1 -1
- package/dist/esm/InputFields/Textarea.js +2 -1
- package/dist/esm/InputFields/Textarea.js.map +1 -1
- package/dist/esm/InputFields/__tests__/QuickSearch.test.js +1 -2
- package/dist/esm/InputFields/__tests__/QuickSearch.test.js.map +1 -1
- package/dist/esm/InputFields/components/SearchBarInput.js +1 -0
- package/dist/esm/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/esm/LoadingIndicator/LoadingIndicator.js +4 -4
- package/dist/esm/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/esm/NotificationDot/NotificationDot.js +9 -9
- package/dist/esm/NotificationDot/NotificationDot.js.map +1 -1
- package/dist/esm/NotificationDot/__tests__/NotificationDot.test.js +2 -3
- package/dist/esm/NotificationDot/__tests__/NotificationDot.test.js.map +1 -1
- package/dist/esm/Table/Table.js +1 -1
- package/dist/esm/Table/Table.js.map +1 -1
- package/dist/esm/Tabs/HorizontalTabs.js +5 -5
- package/dist/esm/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/esm/Tabs/TabLink.js +2 -2
- package/dist/esm/Tabs/TabLink.js.map +1 -1
- package/dist/esm/Tabs/Tabs.js +14 -14
- package/dist/esm/Tabs/Tabs.js.map +1 -1
- package/dist/esm/Tabs/VerticalTabs.js +2 -2
- package/dist/esm/Tabs/VerticalTabs.js.map +1 -1
- package/dist/esm/Toasters/Toast.js +5 -1
- package/dist/esm/Toasters/Toast.js.map +1 -1
- package/dist/esm/styles/typography.js +8 -9
- package/dist/esm/styles/typography.js.map +1 -1
- package/dist/esm/types.js +0 -1
- package/dist/esm/types.js.map +1 -1
- package/dist/js/Banners/Banner.d.ts +1 -2
- package/dist/js/Banners/Banner.js +1 -0
- package/dist/js/Banners/Banner.js.map +1 -1
- package/dist/js/Button/BackButton.d.ts +1 -2
- package/dist/js/Button/BackButton.js +4 -5
- package/dist/js/Button/BackButton.js.map +1 -1
- package/dist/js/Button/Iconbutton.d.ts +1 -0
- package/dist/js/Button/Iconbutton.js +6 -2
- package/dist/js/Button/Iconbutton.js.map +1 -1
- package/dist/js/Button/__tests__/BackButton.test.js +3 -5
- package/dist/js/Button/__tests__/BackButton.test.js.map +1 -1
- package/dist/js/Chips/ActionChip.js +2 -4
- package/dist/js/Chips/ActionChip.js.map +1 -1
- package/dist/js/Chips/ChipInput.js +1 -3
- package/dist/js/Chips/ChipInput.js.map +1 -1
- package/dist/js/Chips/ChipTypes.d.ts +3 -3
- package/dist/js/Chips/FilterChip.js +2 -4
- package/dist/js/Chips/FilterChip.js.map +1 -1
- package/dist/js/Chips/InputChip.js +2 -4
- package/dist/js/Chips/InputChip.js.map +1 -1
- package/dist/js/Dropdown/BasicDropdown.d.ts +1 -2
- package/dist/js/Dropdown/BasicDropdown.js +3 -2
- package/dist/js/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/js/Dropdown/ChipDropdownInput.d.ts +3 -0
- package/dist/js/Dropdown/ChipDropdownInput.js +2 -4
- package/dist/js/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/js/Dropdown/DropdownFilter.d.ts +1 -2
- package/dist/js/Dropdown/DropdownFilter.js +4 -3
- package/dist/js/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/js/GlobalNavigationBar/ExtendedMainMenu.js +1 -3
- package/dist/js/GlobalNavigationBar/ExtendedMainMenu.js.map +1 -1
- package/dist/js/InputFields/Label.d.ts +1 -2
- package/dist/js/InputFields/Label.js +1 -0
- package/dist/js/InputFields/Label.js.map +1 -1
- package/dist/js/InputFields/PasswordField.d.ts +1 -2
- package/dist/js/InputFields/PasswordField.js +1 -0
- package/dist/js/InputFields/PasswordField.js.map +1 -1
- package/dist/js/InputFields/QuickSearch.d.ts +1 -2
- package/dist/js/InputFields/QuickSearch.js +2 -3
- package/dist/js/InputFields/QuickSearch.js.map +1 -1
- package/dist/js/InputFields/ResponsiveComponentWrapper.d.ts +1 -2
- package/dist/js/InputFields/ResponsiveComponentWrapper.js +2 -3
- package/dist/js/InputFields/ResponsiveComponentWrapper.js.map +1 -1
- package/dist/js/InputFields/SearchBar.d.ts +1 -2
- package/dist/js/InputFields/SearchBar.js +29 -34
- package/dist/js/InputFields/SearchBar.js.map +1 -1
- package/dist/js/InputFields/TextField.d.ts +1 -2
- package/dist/js/InputFields/TextField.js +1 -0
- package/dist/js/InputFields/TextField.js.map +1 -1
- package/dist/js/InputFields/Textarea.d.ts +1 -2
- package/dist/js/InputFields/Textarea.js +1 -0
- package/dist/js/InputFields/Textarea.js.map +1 -1
- package/dist/js/InputFields/__tests__/QuickSearch.test.js +1 -3
- package/dist/js/InputFields/__tests__/QuickSearch.test.js.map +1 -1
- package/dist/js/InputFields/components/SearchBarInput.d.ts +1 -2
- package/dist/js/InputFields/components/SearchBarInput.js +1 -0
- package/dist/js/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/js/LoadingIndicator/LoadingIndicator.d.ts +1 -2
- package/dist/js/LoadingIndicator/LoadingIndicator.js +4 -5
- package/dist/js/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/js/NotificationDot/NotificationDot.d.ts +1 -2
- package/dist/js/NotificationDot/NotificationDot.js +9 -10
- package/dist/js/NotificationDot/NotificationDot.js.map +1 -1
- package/dist/js/NotificationDot/__tests__/NotificationDot.test.js +2 -4
- package/dist/js/NotificationDot/__tests__/NotificationDot.test.js.map +1 -1
- package/dist/js/Table/Table.js +1 -1
- package/dist/js/Table/Table.js.map +1 -1
- package/dist/js/Tabs/HorizontalTabs.d.ts +2 -2
- package/dist/js/Tabs/HorizontalTabs.js +2 -3
- package/dist/js/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/js/Tabs/TabLink.d.ts +1 -2
- package/dist/js/Tabs/TabLink.js +2 -3
- package/dist/js/Tabs/TabLink.js.map +1 -1
- package/dist/js/Tabs/Tabs.d.ts +1 -2
- package/dist/js/Tabs/Tabs.js +14 -15
- package/dist/js/Tabs/Tabs.js.map +1 -1
- package/dist/js/Tabs/VerticalTabs.d.ts +1 -2
- package/dist/js/Tabs/VerticalTabs.js +2 -3
- package/dist/js/Tabs/VerticalTabs.js.map +1 -1
- package/dist/js/Toasters/Toast.js +8 -4
- package/dist/js/Toasters/Toast.js.map +1 -1
- package/dist/js/styles/typography.d.ts +1 -2
- package/dist/js/styles/typography.js +8 -10
- package/dist/js/styles/typography.js.map +1 -1
- package/dist/js/types.d.ts +0 -1
- package/dist/js/types.js +0 -1
- package/dist/js/types.js.map +1 -1
- package/dist/umd/Banners/Banner.js +1 -0
- package/dist/umd/Banners/Banner.js.map +1 -1
- package/dist/umd/Button/BackButton.js +8 -7
- package/dist/umd/Button/BackButton.js.map +1 -1
- package/dist/umd/Button/Iconbutton.js +6 -2
- package/dist/umd/Button/Iconbutton.js.map +1 -1
- package/dist/umd/Button/__tests__/BackButton.test.js +7 -7
- package/dist/umd/Button/__tests__/BackButton.test.js.map +1 -1
- package/dist/umd/Chips/ActionChip.js +6 -6
- package/dist/umd/Chips/ActionChip.js.map +1 -1
- package/dist/umd/Chips/ChipInput.js +5 -5
- package/dist/umd/Chips/ChipInput.js.map +1 -1
- package/dist/umd/Chips/FilterChip.js +6 -6
- package/dist/umd/Chips/FilterChip.js.map +1 -1
- package/dist/umd/Chips/InputChip.js +6 -6
- package/dist/umd/Chips/InputChip.js.map +1 -1
- package/dist/umd/Dropdown/BasicDropdown.js +3 -2
- package/dist/umd/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/umd/Dropdown/ChipDropdownInput.js +6 -6
- package/dist/umd/Dropdown/ChipDropdownInput.js.map +1 -1
- package/dist/umd/Dropdown/DropdownFilter.js +4 -3
- package/dist/umd/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/umd/GlobalNavigationBar/ExtendedMainMenu.js +5 -5
- package/dist/umd/GlobalNavigationBar/ExtendedMainMenu.js.map +1 -1
- package/dist/umd/InputFields/Label.js +1 -0
- package/dist/umd/InputFields/Label.js.map +1 -1
- package/dist/umd/InputFields/PasswordField.js +1 -0
- package/dist/umd/InputFields/PasswordField.js.map +1 -1
- package/dist/umd/InputFields/QuickSearch.js +6 -5
- package/dist/umd/InputFields/QuickSearch.js.map +1 -1
- package/dist/umd/InputFields/ResponsiveComponentWrapper.js +6 -5
- package/dist/umd/InputFields/ResponsiveComponentWrapper.js.map +1 -1
- package/dist/umd/InputFields/SearchBar.js +34 -34
- package/dist/umd/InputFields/SearchBar.js.map +1 -1
- package/dist/umd/InputFields/TextField.js +1 -0
- package/dist/umd/InputFields/TextField.js.map +1 -1
- package/dist/umd/InputFields/Textarea.js +1 -0
- package/dist/umd/InputFields/Textarea.js.map +1 -1
- package/dist/umd/InputFields/__tests__/QuickSearch.test.js +5 -5
- package/dist/umd/InputFields/__tests__/QuickSearch.test.js.map +1 -1
- package/dist/umd/InputFields/components/SearchBarInput.js +1 -0
- package/dist/umd/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/umd/LoadingIndicator/LoadingIndicator.js +8 -7
- package/dist/umd/LoadingIndicator/LoadingIndicator.js.map +1 -1
- package/dist/umd/NotificationDot/NotificationDot.js +13 -12
- package/dist/umd/NotificationDot/NotificationDot.js.map +1 -1
- package/dist/umd/NotificationDot/__tests__/NotificationDot.test.js +6 -6
- package/dist/umd/NotificationDot/__tests__/NotificationDot.test.js.map +1 -1
- package/dist/umd/Table/Table.js +1 -1
- package/dist/umd/Table/Table.js.map +1 -1
- package/dist/umd/Tabs/HorizontalTabs.js +9 -8
- package/dist/umd/Tabs/HorizontalTabs.js.map +1 -1
- package/dist/umd/Tabs/TabLink.js +6 -5
- package/dist/umd/Tabs/TabLink.js.map +1 -1
- package/dist/umd/Tabs/Tabs.js +18 -17
- package/dist/umd/Tabs/Tabs.js.map +1 -1
- package/dist/umd/Tabs/VerticalTabs.js +6 -5
- package/dist/umd/Tabs/VerticalTabs.js.map +1 -1
- package/dist/umd/Toasters/Toast.js +5 -1
- package/dist/umd/Toasters/Toast.js.map +1 -1
- package/dist/umd/styles/typography.js +12 -12
- package/dist/umd/styles/typography.js.map +1 -1
- package/dist/umd/types.js +0 -1
- package/dist/umd/types.js.map +1 -1
- package/package.json +10 -19
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","showLoadingIndicator","React","tmpFilteredRows","filterAndSortRows","setFilteredRows","setTotal","rowsFrom","currentPage","rowsTo","setFrom","setTo","setCurrentPageRows","pagination","setCurrentPage","setRowsPerPage","row","matchFilterCriteria","column","columns","sortingColumn","setSortedDirection","setSortedColumn","a","b","sortTableColumn","tmpColumn","remotePagination","triggerSortingChange","previousPage","previousPageClick","nextPage","nextPageClick","filteredRows","changeRowsPerPage","value","rowsPerPageChange","parseInt","renderHeader","title","length","COLORS","neutral_600","width","justify","onLinkClick","event","linkClick","onIconClick","iconClick","onRowClick","selectedText","window","rowClick","renderBody","currentPageRows","index","key","color","maxWidth","Size","size","className","renderFooter","rowsPerPageValues","x","label","rowsPerPage","total","from","to"],"mappings":";;;;;;;;;;;;;;;;;;;MAGA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAIA;AACA;AACA;AAIA,QAAMA,KAA0C,GAAG,CAAC;AAAA,IAAA,QAAA;AAAA,IAAA,SAAA;AAAA,IAAA,SAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,aAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,oBAAA;AAAA,IAAA,KAAA;AAAA,IAAA,OAAA;AAAA,IAAA,IAAA;AAAA,IAAA,gBAAA;AAAA,IAAA,UAAA;AAalDC,IAAAA;AAbkD,GAAD,KAcjC;AAChB;AACA,UAAM,CAAA,WAAA,EAAA,cAAA,IAAgCC,KAAK,CAALA,QAAAA,CAAtC,EAAsCA,CAAtC;AACA,UAAM,CAAA,YAAA,EAAA,eAAA,IAAkCA,KAAK,CAALA,QAAAA,CAAxC,EAAwCA,CAAxC;AACA,UAAM,CAAA,eAAA,EAAA,kBAAA,IAAwCA,KAAK,CAALA,QAAAA,CAA9C,EAA8CA,CAA9C;AACA,UAAM,CAAA,WAAA,EAAA,cAAA,IAAgCA,KAAK,CAALA,QAAAA,CAAtC,CAAsCA,CAAtC;AACA,UAAM,CAAA,YAAA,EAAA,eAAA,IAAkCA,KAAK,CAALA,QAAAA,CAAxC,EAAwCA,CAAxC;AACA,UAAM,CAAA,eAAA,EAAA,kBAAA,IAAwCA,KAAK,CAALA,QAAAA,CAA9C,KAA8CA,CAA9C;AACA,UAAM,CAAA,IAAA,EAAA,OAAA,IAAkBA,KAAK,CAA7B,QAAwBA,EAAxB;AACA,UAAM,CAAA,EAAA,EAAA,KAAA,IAAcA,KAAK,CAAzB,QAAoBA,EAApB;AACA,UAAM,CAAA,KAAA,EAAA,QAAA,IAAoBA,KAAK,CAA/B,QAA0BA,EAA1B;AAEA;AACF;AACA;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAI,CAAJ,gBAAA,EAAuB;AACrB;AACA,cAAMC,eAAe,GAAGC,iBAAxB,EAAA;AACAC,QAAAA,eAAe,CAAfA,eAAe,CAAfA;AACAC,QAAAA,QAAQ,CAACH,eAAe,CAJH,MAIb,CAARG,CAJqB,CAMrB;;AACA,cAAMC,QAAQ,GAAG,CAACC,WAAW,GAAZ,CAAA,IAAjB,WAAA;AACA,cAAMC,MAAM,GAAGF,QAAQ,GAARA,WAAAA,IAA0BJ,eAAe,CAAzCI,MAAAA,GAAmDJ,eAAe,CAAlEI,MAAAA,GAA4EA,QAAQ,GAR9E,WAQrB,CARqB,CAUrB;;AACAG,QAAAA,OAAO,CAACH,QAAQ,GAAhBG,CAAO,CAAPA;AACAC,QAAAA,KAAK,CAZgB,MAYhB,CAALA,CAZqB,CAcrB;;AACAC,QAAAA,kBAAkB,CAACT,eAAe,CAAfA,KAAAA,CAAAA,QAAAA,EAAnBS,MAAmBT,CAAD,CAAlBS;AACD;AAjBHV,KAAAA,EAkBG,CAAA,WAAA,EAAA,IAAA,EAAA,WAAA,EAAA,OAAA,EAAA,YAAA,EAAA,eAAA,EAlBHA,gBAkBG,CAlBHA;AAoBA;AACF;AACA;AACA;;AACEA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,gBAAA,EAAsB;AACpBU,QAAAA,kBAAkB,CADE,IACF,CAAlBA,CADoB,CAGpB;;AACAF,QAAAA,OAAO,CAACG,UAAU,EAAlBH,IAAO,CAAPA;AACAC,QAAAA,KAAK,CAACE,UAAU,EAAhBF,EAAK,CAALA;AACAL,QAAAA,QAAQ,CAACO,UAAU,EAAnBP,KAAQ,CAARA;AACAQ,QAAAA,cAAc,CAACD,UAAU,EAAzBC,WAAc,CAAdA;AACAC,QAAAA,cAAc,CAACF,UAAU,EAAzBE,WAAc,CAAdA;AACD;AAVHb,KAAAA,EAWG,CAAA,gBAAA,EAAA,UAAA,EAXHA,IAWG,CAXHA;AAaA;AACF;AACA;AACA;;AACE,UAAME,iBAAiB,GAAG,MAAa;AACrC,UAAID,eAAe,GAAG,IAAI,CAAJ,MAAA,CAAaa,GAAD,IAAS;AACzC;AACA,YAAIC,mBAAmB,GAFkB,IAEzC,CAFyC,CAIzC;;AACA,aAAK,MAAL,MAAA,IAAA,OAAA,EAA8B;AAC5B;AACA;AACA;AACA,cAAIC,MAAM,CAANA,WAAAA,IAAsBF,GAAG,CAACE,MAAM,CAAVF,GAAG,CAAHA,CAAAA,WAAAA,GAAAA,OAAAA,CAAsCE,MAAM,CAANA,WAAAA,CAAtCF,WAAsCE,EAAtCF,MAA4E,CAAtG,CAAA,EAA0G;AACxGC,YAAAA,mBAAmB,GAAnBA,KAAAA;AACD;AAXsC,SAAA,CAczC;;;AACA,YAAA,mBAAA,EAAyB;AACvB,iBAAA,GAAA;AACD;AAlBkC,OACf,CAAtB,CADqC,CAqBrC;;AACA,UAAIE,OAAO,CAAPA,IAAAA,CAAcD,MAAD,IAAYA,MAAM,CAAnC,gBAAIC,CAAJ,EAAuD;AACrD;AACA,cAAMC,aAAa,GAAGD,OAAO,CAAPA,IAAAA,CAAcD,MAAD,IAAYA,MAAM,CAFA,gBAE/BC,CAAtB,CAFqD,CAIrD;;AACAE,QAAAA,kBAAkB,CAACD,aAAa,CAAhCC,gBAAkB,CAAlBA;AACAC,QAAAA,eAAe,CAACF,aAAa,CANwB,GAMtC,CAAfE,CANqD,CAQrD;;AACAnB,QAAAA,eAAe,CAAfA,IAAAA,CAAqB,CAAA,CAAA,EAAA,CAAA,KAAU;AAC7B,cAAIoB,CAAC,CAACH,aAAa,CAAfG,GAAC,CAADA,GAAuBC,CAAC,CAACJ,aAAa,CAA1C,GAA4B,CAA5B,EAAiD;AAC/C,mBAAOA,aAAa,CAAbA,gBAAAA,KAAAA,KAAAA,GAAAA,CAAAA,GAA+C,CAAtD,CAAA;AADF,WAAA,MAEO,IAAIG,CAAC,CAACH,aAAa,CAAfG,GAAC,CAADA,GAAuBC,CAAC,CAACJ,aAAa,CAA1C,GAA4B,CAA5B,EAAiD;AACtD,mBAAOA,aAAa,CAAbA,gBAAAA,KAAAA,KAAAA,GAA2C,CAA3CA,CAAAA,GAAP,CAAA;AADK,WAAA,MAEA;AACL,mBAAA,CAAA;AACD;AAPHjB,SAAAA;AA/BmC,OAAA,CA0CrC;;;AACA,aAAA,eAAA;AA3CF,KAAA;AA8CA;AACF;AACA;AACA;AACA;;;AACE,UAAMsB,eAAe,GAAIP,MAAD,IAA+B;AACrD;AACAC,MAAAA,OAAO,GAAG,OAAO,CAAP,GAAA,CAAaO,SAAD,IAA4B;AAChD;AACA;AACA,YAAIR,MAAM,CAANA,GAAAA,KAAeQ,SAAS,CAAxBR,GAAAA,IAAgCQ,SAAS,CAA7C,QAAA,EAAwD;AACtD;AACA;AACA,cAAIA,SAAS,CAATA,gBAAAA,KAAJ,SAAA,EAA8C;AAC5C,gBAAIA,SAAS,CAATA,gBAAAA,KAAJ,KAAA,EAA0C;AACxCA,cAAAA,SAAS,CAATA,gBAAAA,GADwC,MACxCA,CADwC,CAGxC;;AACAJ,cAAAA,eAAe,CAACJ,MAAM,CAAtBI,GAAe,CAAfA;AACAD,cAAAA,kBAAkB,CALsB,MAKtB,CAAlBA,CALwC,CAOxC;;AACA,kBAAIM,gBAAgB,IAApB,oBAAA,EAA8C;AAC5CC,gBAAAA,oBAAoB,CAACV,MAAM,CAAP,GAAA,EAApBU,MAAoB,CAApBA;AACD;AAVH,aAAA,MAWO;AACLF,cAAAA,SAAS,CAATA,gBAAAA,GADK,KACLA,CADK,CAGL;;AACAJ,cAAAA,eAAe,CAACJ,MAAM,CAAtBI,GAAe,CAAfA;AACAD,cAAAA,kBAAkB,CALb,KAKa,CAAlBA,CALK,CAOL;;AACA,kBAAIM,gBAAgB,IAApB,oBAAA,EAA8C;AAC5CC,gBAAAA,oBAAoB,CAACV,MAAM,CAAP,GAAA,EAApBU,KAAoB,CAApBA;AACD;AACF;AAvBH,WAAA,MAwBO;AACL;AACAF,YAAAA,SAAS,CAATA,gBAAAA,GAFK,KAELA,CAFK,CAIL;;AACAJ,YAAAA,eAAe,CAACJ,MAAM,CAAtBI,GAAe,CAAfA;AACAD,YAAAA,kBAAkB,CANb,KAMa,CAAlBA,CANK,CAQL;;AACA,gBAAIM,gBAAgB,IAApB,oBAAA,EAA8C;AAC5CC,cAAAA,oBAAoB,CAACV,MAAM,CAAP,GAAA,EAApBU,KAAoB,CAApBA;AACD;AACF;AAvCH,SAAA,MAwCO,IAAIF,SAAS,CAATA,gBAAAA,KAAJ,SAAA,EAA8C;AACnD;AACAA,UAAAA,SAAS,CAATA,gBAAAA,GAAAA,SAAAA;AACD;;AAED,eAAA,SAAA;AAhDFP,OAAU,CAAVA;AAFF,KAAA;AAsDA;AACF;AACA;;;AACE,UAAMU,YAAY,GAAG,MAAM;AACzB,UAAA,gBAAA,EAAsB;AACpB;AACA,YAAA,iBAAA,EAAuB;AACrBC,UAAAA,iBAAiB;AAClB;AAJH,OAAA,MAKO;AACL;AACAhB,QAAAA,cAAc,CAACN,WAAW,GAAXA,CAAAA,GAAkBA,WAAW,GAA7BA,CAAAA,GAAfM,CAAc,CAAdA;AACD;AATH,KAAA;AAYA;AACF;AACA;;;AACE,UAAMiB,QAAQ,GAAG,MAAM;AACrB,UAAA,gBAAA,EAAsB;AACpB;AACA,YAAA,aAAA,EAAmB;AACjBC,UAAAA,aAAa;AACd;AAJH,OAAA,MAKO;AACL;AACAlB,QAAAA,cAAc,CAACN,WAAW,GAAXA,WAAAA,IAA6ByB,YAAY,CAAzCzB,MAAAA,GAAAA,WAAAA,GAAiEA,WAAW,GAA3FM,CAAc,CAAdA;AACD;AATH,KAAA;AAYA;AACF;AACA;AACA;;;AACE,UAAMoB,iBAAiB,GAAIC,KAAD,IAAmB;AAC3C;AACA,UAAA,gBAAA,EAAsB;AACpB;AACA,YAAA,iBAAA,EAAuB;AACrBC,UAAAA,iBAAiB,CAACC,QAAQ,CAA1BD,KAA0B,CAAT,CAAjBA;AACD;AAJH,OAAA,MAKO;AACL;AACAtB,QAAAA,cAAc,CAAdA,CAAc,CAAdA;AATyC,OAAA,CAY3C;;;AACAC,MAAAA,cAAc,CAACsB,QAAQ,CAAvBtB,KAAuB,CAAT,CAAdA;AAbF,KAAA;AAgBA;AACF;AACA;;;AACE,UAAMuB,YAAY,GAAG,MAAM;AACzB,aAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACGC,KAAK,IAAA,aACJ,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAI,uBAAY;AAAhB,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,8BAAA,EAAA;AAAmB,QAAA,OAAO,EAAEpB,OAAO,CAACqB;AAApC,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,KAAA,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,QAAA,IAAI,EAAlB,MAAA;AAA0B,QAAA,KAAK,EAAEC,eAAOC;AAAxC,OAAA,CAFF,CADF,CADF,CAFJ,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAI,uBAAY;AAAhB,OAAA,EACGvB,OAAO,CAAPA,GAAAA,CAAaD,MAAD,IAAA,aACX,KAAA,CAAA,aAAA,CAAA,iCAAA,EAAA;AACE,QAAA,OAAO,EAAE,MAAMO,eAAe,CADhC,MACgC,CADhC;AAEE,QAAA,GAAG,EAAEP,MAAM,CAFb,GAAA;AAGE,QAAA,KAAK,EAAE;AAAEyB,UAAAA,KAAK,EAAEzB,MAAM,CAACyB;AAAhB,SAHT;AAIE,QAAA,SAAS,EAAG,GAAEzB,MAAM,CAANA,QAAAA,GAAAA,UAAAA,GAA+B,EAAG,IAAG,CAAA,KAAA,GAAA,WAAA,GAAuB,EAAG,IAAGA,MAAM,CAANA,OAAAA,GAAkB,WAAUA,MAAM,CAAC0B,OAAnC1B,EAAAA,GAA+C,EAAG;AAJpI,OAAA,EAKGA,MAAM,CALT,IAAA,EAOG,MAAM,CAAN,gBAAA,KAAA,KAAA,GAAA,aAAoC,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,QAAA,IAAI,EAAC;AAAlB,OAAA,CAApC,GAAkE,MAAM,CAAN,gBAAA,KAAA,MAAA,GAAA,aAAqC,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,QAAA,IAAI,EAAC;AAApB,OAAA,CAArC,GArB7E,EAcQ,CADDC,CADH,CAXF,CADF;AADF,KAAA;AA8BA;AACF;AACA;AACA;AACA;AACA;;;AACE,UAAM0B,WAAW,GAAG,CAAA,GAAA,EAAA,GAAA,EAAA,KAAA,KAAoD;AACtE,UAAA,SAAA,EAAe;AACbC,QAAAA,KAAK,CAALA,eAAAA;AAEAC,QAAAA,SAAS,CAAA,GAAA,EAATA,GAAS,CAATA;AACD;AALH,KAAA;AAQA;AACF;AACA;AACA;AACA;AACA;;;AACE,UAAMC,WAAW,GAAG,CAAA,GAAA,EAAA,GAAA,EAAA,KAAA,KAAuE;AACzF,UAAA,SAAA,EAAe;AACbF,QAAAA,KAAK,CAALA,eAAAA;AAEAG,QAAAA,SAAS,CAAA,GAAA,EAATA,GAAS,CAATA;AACD;AALH,KAAA;AAQA;AACF;AACA;AACA;;;AACE,UAAMC,UAAU,GAAIlC,GAAD,IAAoB;AACrC,YAAMmC,YAAY,GAAGC,MAAM,EAANA,YAAAA,IADgB,QAChBA,EAArB,CADqC,CAGrC;;AACA,UAAID,YAAY,EAAZA,MAAAA,KAAAA,CAAAA,IAAJ,QAAA,EAA4C;AAC1CE,QAAAA,QAAQ,CAARA,GAAQ,CAARA;AACD;AANH,KAAA;AASA;AACF;AACA;;;AACE,UAAMC,UAAU,GAAG,MAAM;AACvB,aAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACGC,eAAe,CAAfA,MAAAA,GAAAA,CAAAA,GACCA,eAAe,CAAfA,GAAAA,CAAoB,CAAA,GAAA,EAAA,KAAA,KAAA,aAClB,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,QAAA,GAAG,EAAG,OAAMC,KAA1B,EAAA;AAAmC,QAAA,OAAO,EAAE,MAAMN,UAAU,CAA5D,GAA4D,CAA5D;AAAmE,uBAAY;AAA/E,OAAA,EACG/B,OAAO,CAAPA,GAAAA,CAAaD,MAAD,IAAA,aACX,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AACE,QAAA,GAAG,EAAG,OAAMsC,KAAM,IAAGtC,MAAM,CAACuC,GAD9B,EAAA;AAEE,QAAA,KAAK,EAAE,MAAM,CAAN,OAAA,GAAiB;AAAEC,UAAAA,KAAK,EAAExC,MAAM,CAANA,OAAAA,CAAAA,GAAAA,EAAoBA,MAAM,CAAnC,GAASA,CAAT;AAA0CyC,UAAAA,QAAQ,EAAEzC,MAAM,CAACyB;AAA3D,SAAjB,GAAsF;AAAEgB,UAAAA,QAAQ,EAAEzC,MAAM,CAACyB;AAAnB,SAF/F;AAGE,QAAA,SAAS,EAAG,GAAEzB,MAAM,CAANA,WAAAA,IAAuB,eAAe,IAAGA,MAAM,CAANA,OAAAA,GAAkB,WAAUA,MAAM,CAAC0B,OAAnC1B,EAAAA,GAA+C,EAHxG,GAAA;AAIE,QAAA,KAAK,EAAEA,MAAM,CAANA,WAAAA,IAAsBF,GAAG,CAACE,MAAM,CAAP,GAAA;AAJlC,OAAA,EAKGA,MAAM,CAANA,MAAAA,IAAiBF,GAAG,CAACE,MAAM,CAA3BA,GAAoB,CAApBA,GAAAA,aACC,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AACE,QAAA,IAAI,EAAE0C,YADR,KAAA;AAEE,QAAA,OAAO,EAFT,UAAA;AAGE,QAAA,OAAO,EAAGd,KAAD,IAAWD,WAAW,CAAA,GAAA,EAAM3B,MAAM,CAAZ,GAAA,EAHjC,KAGiC,CAHjC;AAIE,QAAA,KAAK,EAAEA,MAAM,CAANA,OAAAA,IAAkB;AAAEwC,UAAAA,KAAK,EAAExC,MAAM,CAANA,OAAAA,CAAAA,GAAAA,EAAoBA,MAAM,CAA1BA,GAAAA;AAAT;AAJ3B,OAAA,EAKGF,GAAG,CAACE,MAAM,CANdA,GAMO,CALN,CADDA,GAQG,MAAM,CAAN,MAAA,IAAiBA,MAAM,CAAvB,IAAA,GAAA,aACF,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,UAAA;AAAiD,QAAA,wBAAwB,EAAzE,IAAA;AAAiF,QAAA,MAAM,EAAG4B,KAAD,IAAWE,WAAW,CAAA,GAAA,EAAM9B,MAAM,CAAZ,GAAA,EAAA,KAAA;AAA/G,OAAA,EACG,mBAAMA,MAAM,CAAZ,IAAA,EAAoB;AAAE2C,QAAAA,IAAI,EAAN,IAAA;AAAcC,QAAAA,SAAS,EAAE;AAAzB,OAApB,CADH,CADE,GAIA5C,MAAM,CAANA,aAAAA,GACFA,MAAM,CAANA,aAAAA,CAAAA,GAAAA,EAA0BA,MAAM,CAD9BA,GACFA,CADEA,GAGFF,GAAG,CAACE,MAAM,CAxBrBqC,GAwBc,CApBP,CADDpC,CADH,CADFoC,CADDA,GAAAA,aA+BC,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,QAAA,SAAS,EAAvB,SAAA;AAAkC,uBAAY;AAA9C,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,QAAA,OAAO,EAAEpC,OAAO,CAA9B,MAAA;AAAuC,QAAA,SAAS,EAAC;AAAjD,OAAA,EAlCR,8BAkCQ,CADF,CAhCJ,CADF;AADF,KAAA;AA4CA;AACF;AACA;;;AACE,UAAM4C,YAAY,GAAG,MAAM;AACzB;AACA,YAAMC,iBAAiB,GAAG,CAAA,IAAA,EAAA,IAAA,EAAA,IAAA,EAA1B,KAA0B,CAA1B;AAEA,aAAA,aACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA;AAAgB,QAAA,OAAO,EAAE7C,OAAO,CAAhC,MAAA;AAAyC,uBAAY;AAArD,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EADF,iBACE,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AACE,QAAA,EAAE,EADJ,eAAA;AAEE,QAAA,IAAI,EAAE,iBAAiB,CAAjB,GAAA,CAAsB8C,CAAC,KAAK;AAAEC,UAAAA,KAAK,EAAED;AAAT,SAAL,CAAvB,CAFR;AAGE,QAAA,cAAc,EAHhB,IAAA;AAIE,QAAA,QAAQ,EAAG9B,KAAD,IAAWD,iBAAiB,CAJxC,KAIwC,CAJxC;AAKE,QAAA,WAAW,EAAEiC,WAAW,CAL1B,QAKeA,EALf;AAME,QAAA,QAAQ,EAAE;AANZ,OAAA,CAFF,EAAA,aAUE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAM,QAAA,SAAS,EAAC;AAAhB,OAAA,EACGC,KAAK,KAALA,CAAAA,GAAAA,CAAAA,GADH,IAAA,EAAA,GAAA,EAAA,EAAA,EAAA,MAAA,EAVF,KAUE,CAVF,EAAA,aAaE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,QAAA,SAAS,EAAC;AAAf,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,UAAA;AAAiD,QAAA,MAAM,EAAE,MAAMvC,YAA/D,EAAA;AAA+E,QAAA,QAAQ,EAAEwC,IAAI,KAAK;AAAlG,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,QAAA,IAAI,EAAjB,IAAA;AAAuB,QAAA,KAAK,EAAE5B,eAAOC;AAArC,OAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,QAAA,OAAO,EAAnB,WAAA;AAAgC,QAAA,KAAK,EAArC,UAAA;AAAiD,QAAA,MAAM,EAAE,MAAMX,QAA/D,EAAA;AAA2E,QAAA,QAAQ,EAAEuC,EAAE,KAAKF;AAA5F,OAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,QAAA,IAAI,EAAlB,IAAA;AAAwB,QAAA,KAAK,EAAE3B,eAAOC;AAAtC,OAAA,CADF,CAJF,CAbF,CADF,CADF,CADF,CADF;AAJF,KAAA;AAoCA;AACF;AACA;;;AACE,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA;AAAgB,MAAA,WAAW,EAA3B,GAAA;AAAgC,MAAA,WAAW,EAA3C,GAAA;AAAgD,qBAAY;AAA5D,KAAA,EACGJ,YADH,EAAA,EAEGgB,UAFH,EAAA,EAGGS,YAJL,EACE,CADF,EAMG9D,oBAAoB,IAAA,aACnB,KAAA,CAAA,aAAA,CAAA,kCAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kCAAA,EAAA;AAAkB,MAAA,IAAI,EAAE2D,YAAxB,MAAA;AAAqC,MAAA,KAAK,EAAC;AAA3C,KAAA,CADF,CAPJ,CADF;AArYF,GAAA;;oBAqZA,K","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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["Table","showLoadingIndicator","React","tmpFilteredRows","filterAndSortRows","setFilteredRows","setTotal","rowsFrom","currentPage","rowsTo","setFrom","setTo","setCurrentPageRows","pagination","setCurrentPage","setRowsPerPage","row","matchFilterCriteria","column","columns","sortingColumn","setSortedDirection","setSortedColumn","a","b","sortTableColumn","tmpColumn","remotePagination","triggerSortingChange","previousPage","previousPageClick","nextPage","nextPageClick","filteredRows","changeRowsPerPage","value","rowsPerPageChange","parseInt","renderHeader","title","length","COLORS","neutral_600","width","justify","onLinkClick","event","linkClick","onIconClick","iconClick","onRowClick","selectedText","window","rowClick","renderBody","currentPageRows","index","key","color","maxWidth","Size","size","className","renderFooter","rowsPerPageValues","x","label","rowsPerPage","total","from","to"],"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"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "../
|
|
3
|
+
define(["exports", "prop-types", "react", "../styles", "styled-components", "../styles/typography"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("../
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("../styles"), require("styled-components"), require("../styles/typography"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.styles, global.styledComponents, global.typography);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react,
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _styles, _styledComponents, _typography) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -221,28 +221,28 @@
|
|
|
221
221
|
}
|
|
222
222
|
}
|
|
223
223
|
|
|
224
|
-
&.size
|
|
224
|
+
&.size-XS {
|
|
225
225
|
${(0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null)}
|
|
226
226
|
padding: 0px 16px;
|
|
227
227
|
height: 32px;
|
|
228
228
|
margin-top: 16px;
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
-
&.size
|
|
231
|
+
&.size-S {
|
|
232
232
|
${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null)}
|
|
233
233
|
padding: 0px 16px;
|
|
234
234
|
height: 40px;
|
|
235
235
|
margin-top: 8px;
|
|
236
236
|
}
|
|
237
237
|
|
|
238
|
-
&.size
|
|
238
|
+
&.size-M {
|
|
239
239
|
${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null)}
|
|
240
240
|
height: 48px;
|
|
241
241
|
min-width: 96px;
|
|
242
242
|
padding: 0px 16px;
|
|
243
243
|
}
|
|
244
244
|
|
|
245
|
-
&.size
|
|
245
|
+
&.size-L {
|
|
246
246
|
${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)}
|
|
247
247
|
height: 56px;
|
|
248
248
|
min-width: 144px;
|
|
@@ -286,6 +286,7 @@
|
|
|
286
286
|
};
|
|
287
287
|
|
|
288
288
|
HorizontalTabs.propTypes = {
|
|
289
|
+
size: _propTypes2.default.oneOf(['XS', 'S', 'M', 'L']).isRequired,
|
|
289
290
|
tabs: _propTypes2.default.arrayOf(_propTypes2.default.shape({
|
|
290
291
|
value: _propTypes2.default.string.isRequired,
|
|
291
292
|
selected: _propTypes2.default.bool.isRequired,
|
|
@@ -1 +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","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","tabs","sideFill","fullWidth","onTabChange","value","selected","to","disabled","HorizontalTabs","doTabChange","document","tab","index","width","length","size"],"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';\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-${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"}
|
|
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","ComponentXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentLStyling","size","tabs","sideFill","fullWidth","onTabChange","value","selected","to","disabled","HorizontalTabs","doTabChange","document","tab","index","width","length"],"mappings":"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","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"}
|
package/dist/umd/Tabs/TabLink.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../NotificationDot", "../
|
|
3
|
+
define(["exports", "prop-types", "react", "react-router-dom", "styled-components", "../NotificationDot", "../styles"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../NotificationDot"), require("../
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("react-router-dom"), require("styled-components"), require("../NotificationDot"), require("../styles"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.NotificationDot, global.
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.reactRouterDom, global.styledComponents, global.NotificationDot, global.styles);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _NotificationDot,
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _reactRouterDom, _styledComponents, _NotificationDot, _styles) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
onLinkClick,
|
|
204
204
|
testId,
|
|
205
205
|
showNotificationDot = false,
|
|
206
|
-
size =
|
|
206
|
+
size = 'small',
|
|
207
207
|
variant = 'critical'
|
|
208
208
|
}) => {
|
|
209
209
|
const location = (0, _reactRouterDom.useLocation)();
|
|
@@ -240,6 +240,7 @@
|
|
|
240
240
|
onLinkClick: _propTypes2.default.func,
|
|
241
241
|
testId: _propTypes2.default.string,
|
|
242
242
|
showNotificationDot: _propTypes2.default.bool,
|
|
243
|
+
size: _propTypes2.default.string,
|
|
243
244
|
variant: _propTypes2.default.oneOf(['positive', 'critical'])
|
|
244
245
|
};
|
|
245
246
|
exports.default = TabLink;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","variant","StyledTabLink","styled","COLORS","neutral_600","props","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","exact","
|
|
1
|
+
{"version":3,"sources":["../../../src/Tabs/TabLink.tsx"],"names":["disabled","requiredLine","optionalLine","onLinkClick","testId","showNotificationDot","size","variant","StyledTabLink","styled","COLORS","neutral_600","props","white","neutral_20","primary_20","primary_600","primary_100","primary_800","primary_500","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","TabLink","exact","location","ref","React","to","OptionalLineIcon"],"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 { 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"}
|
package/dist/umd/Tabs/Tabs.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "styled-components"
|
|
3
|
+
define(["exports", "prop-types", "react", "styled-components"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("styled-components")
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("styled-components"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.styledComponents
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.styledComponents);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _styledComponents
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _styledComponents) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -81,13 +81,13 @@
|
|
|
81
81
|
|
|
82
82
|
const getHeight = size => {
|
|
83
83
|
switch (size) {
|
|
84
|
-
case
|
|
84
|
+
case 'small':
|
|
85
85
|
return '48px';
|
|
86
86
|
|
|
87
|
-
case
|
|
87
|
+
case 'medium':
|
|
88
88
|
return '56px';
|
|
89
89
|
|
|
90
|
-
case
|
|
90
|
+
case 'large':
|
|
91
91
|
return '64px';
|
|
92
92
|
|
|
93
93
|
default:
|
|
@@ -97,13 +97,13 @@
|
|
|
97
97
|
|
|
98
98
|
const getFontSize = size => {
|
|
99
99
|
switch (size) {
|
|
100
|
-
case
|
|
100
|
+
case 'small':
|
|
101
101
|
return '16px';
|
|
102
102
|
|
|
103
|
-
case
|
|
103
|
+
case 'medium':
|
|
104
104
|
return '18px';
|
|
105
105
|
|
|
106
|
-
case
|
|
106
|
+
case 'large':
|
|
107
107
|
return '20px';
|
|
108
108
|
|
|
109
109
|
default:
|
|
@@ -113,13 +113,13 @@
|
|
|
113
113
|
|
|
114
114
|
const getTopMargin = size => {
|
|
115
115
|
switch (size) {
|
|
116
|
-
case
|
|
116
|
+
case 'small':
|
|
117
117
|
return '6px';
|
|
118
118
|
|
|
119
|
-
case
|
|
119
|
+
case 'medium':
|
|
120
120
|
return '10px';
|
|
121
121
|
|
|
122
|
-
case
|
|
122
|
+
case 'large':
|
|
123
123
|
return '12px';
|
|
124
124
|
|
|
125
125
|
default:
|
|
@@ -129,13 +129,13 @@
|
|
|
129
129
|
|
|
130
130
|
const getBottomMargin = size => {
|
|
131
131
|
switch (size) {
|
|
132
|
-
case
|
|
132
|
+
case 'small':
|
|
133
133
|
return '2px';
|
|
134
134
|
|
|
135
|
-
case
|
|
135
|
+
case 'medium':
|
|
136
136
|
return '3px';
|
|
137
137
|
|
|
138
|
-
case
|
|
138
|
+
case 'large':
|
|
139
139
|
return '4px';
|
|
140
140
|
|
|
141
141
|
default:
|
|
@@ -178,7 +178,8 @@
|
|
|
178
178
|
}, children);
|
|
179
179
|
|
|
180
180
|
Tabs.propTypes = {
|
|
181
|
-
children: _propTypes2.default.any
|
|
181
|
+
children: _propTypes2.default.any,
|
|
182
|
+
size: _propTypes2.default.string.isRequired
|
|
182
183
|
};
|
|
183
184
|
exports.default = Tabs;
|
|
184
185
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["children","
|
|
1
|
+
{"version":3,"sources":["../../../src/Tabs/Tabs.tsx"],"names":["children","size","getHeight","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","props","Tabs"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,QAAME,SAAS,GAAID,IAAD,IAAkB;AAClC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,MAAA;;AACF,WAAA,QAAA;AACE,eAAA,MAAA;;AACF,WAAA,OAAA;AACE,eAAA,MAAA;;AACF;AACE,eAAA,MAAA;AARJ;AADF,GAAA;;AAaA,QAAME,WAAW,GAAIF,IAAD,IAAkB;AACpC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,MAAA;;AACF,WAAA,QAAA;AACE,eAAA,MAAA;;AACF,WAAA,OAAA;AACE,eAAA,MAAA;;AACF;AACE,eAAA,MAAA;AARJ;AADF,GAAA;;AAaA,QAAMG,YAAY,GAAIH,IAAD,IAAkB;AACrC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,KAAA;;AACF,WAAA,QAAA;AACE,eAAA,MAAA;;AACF,WAAA,OAAA;AACE,eAAA,MAAA;;AACF;AACE,eAAA,MAAA;AARJ;AADF,GAAA;;AAaA,QAAMI,eAAe,GAAIJ,IAAD,IAAkB;AACxC,YAAA,IAAA;AACE,WAAA,OAAA;AACE,eAAA,KAAA;;AACF,WAAA,QAAA;AACE,eAAA,KAAA;;AACF,WAAA,OAAA;AACE,eAAA,KAAA;;AACF;AACE,eAAA,KAAA;AARJ;AADF,GAAA;;AAaA,QAAMK,GAAG,GAAGC,2BAAOC,GAAe;AAClC;AACA;AACA;AACA;AACA,cAAeC,KAAD,IAAWP,SAAS,CAACO,KAAK,CAAN,IAAA,CAAa;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAkBA,KAAD,IAAWN,WAAW,CAACM,KAAK,CAAN,IAAA,CAAa;AACpD,cAAeA,KAAD,IAAWL,YAAY,CAACK,KAAK,CAAN,IAAA,CAAa,MAAMA,KAAD,IAAWJ,eAAe,CAACI,KAAK,CAAN,IAAA,CAAa;AAC9F;AACA;AACA,iBAAkBA,KAAD,IAAWN,WAAW,CAACM,KAAK,CAAN,IAAA,CAAa;AACpD;AACA;AACA;AACA;AACA;AACA;AAvBA,CAAA;;AA0BA,QAAMC,IAAwC,GAAG,CAAC;AAAA,IAAA,QAAA;AAAYT,IAAAA;AAAZ,GAAD,KAAA,aAC/C,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAK,IAAA,IAAI,EAAT,SAAA;AAAoB,IAAA,IAAI,EAAEA;AAA1B,GAAA,EADF,QACE,CADF;;;AAlFED,IAAAA,Q;AACAC,IAAAA,I;;oBAuFF,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\ntype TabsProps = {\n children?: any;\n size: string;\n};\n\nconst getHeight = (size: string) => {\n switch (size) {\n case 'small':\n return '48px';\n case 'medium':\n return '56px';\n case 'large':\n return '64px';\n default:\n return '48px';\n }\n};\n\nconst getFontSize = (size: string) => {\n switch (size) {\n case 'small':\n return '16px';\n case 'medium':\n return '18px';\n case 'large':\n return '20px';\n default:\n return '20px';\n }\n};\n\nconst getTopMargin = (size: string) => {\n switch (size) {\n case 'small':\n return '6px';\n case 'medium':\n return '10px';\n case 'large':\n return '12px';\n default:\n return '12px';\n }\n};\n\nconst getBottomMargin = (size: string) => {\n switch (size) {\n case 'small':\n return '2px';\n case 'medium':\n return '3px';\n case 'large':\n return '4px';\n default:\n return '4px';\n }\n};\n\nconst Nav = styled.nav<TabsProps>`\n display: flex;\n flex-direction: column;\n\n a {\n height: ${(props) => getHeight(props.size)};\n }\n\n a > div:last-of-type {\n font-size: 12px;\n margin: 0 0 8px 16px;\n }\n a > div:first-child {\n font-size: ${(props) => getFontSize(props.size)};\n margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n }\n a > div:only-of-type {\n font-size: ${(props) => getFontSize(props.size)};\n margin: auto 0 auto 16px;\n }\n\n @media print {\n display: none;\n }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n <Nav role=\"tablist\" size={size}>\n {children}\n </Nav>\n);\n\nexport default Tabs;\n"],"file":"Tabs.js"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
if (typeof define === "function" && define.amd) {
|
|
3
|
-
define(["exports", "prop-types", "react", "./Tabs", "./TabLink"
|
|
3
|
+
define(["exports", "prop-types", "react", "./Tabs", "./TabLink"], factory);
|
|
4
4
|
} else if (typeof exports !== "undefined") {
|
|
5
|
-
factory(exports, require("prop-types"), require("react"), require("./Tabs"), require("./TabLink")
|
|
5
|
+
factory(exports, require("prop-types"), require("react"), require("./Tabs"), require("./TabLink"));
|
|
6
6
|
} else {
|
|
7
7
|
var mod = {
|
|
8
8
|
exports: {}
|
|
9
9
|
};
|
|
10
|
-
factory(mod.exports, global.propTypes, global.react, global.Tabs, global.TabLink
|
|
10
|
+
factory(mod.exports, global.propTypes, global.react, global.Tabs, global.TabLink);
|
|
11
11
|
global.undefined = mod.exports;
|
|
12
12
|
}
|
|
13
|
-
})(this, function (exports, _propTypes, _react, _Tabs, _TabLink
|
|
13
|
+
})(this, function (exports, _propTypes, _react, _Tabs, _TabLink) {
|
|
14
14
|
"use strict";
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
entries
|
|
87
87
|
}) => {
|
|
88
88
|
return /*#__PURE__*/React.createElement(_Tabs2.default, {
|
|
89
|
-
size: size
|
|
89
|
+
size: size || 'large'
|
|
90
90
|
}, entries?.map(entry => /*#__PURE__*/React.createElement(_TabLink2.default, {
|
|
91
91
|
key: entry.to,
|
|
92
92
|
to: entry.to,
|
|
@@ -107,6 +107,7 @@
|
|
|
107
107
|
};
|
|
108
108
|
|
|
109
109
|
VerticalTabs.propTypes = {
|
|
110
|
+
size: _propTypes2.default.string,
|
|
110
111
|
entries: _propTypes2.default.arrayOf(_propTypes2.default.shape({
|
|
111
112
|
requiredLine: _propTypes2.default.string.isRequired,
|
|
112
113
|
optionalLine: _propTypes2.default.string,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Tabs/VerticalTabs.tsx"],"names":["requiredLine","optionalLine","to","disabled","onClick","exact","showNotificationDot","variant","
|
|
1
|
+
{"version":3,"sources":["../../../src/Tabs/VerticalTabs.tsx"],"names":["requiredLine","optionalLine","to","disabled","onClick","exact","showNotificationDot","variant","size","entries","VerticalTabs","entry"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,QAAMU,YAAY,GAAG,CAAC;AAAA,IAAA,IAAA;AAAQD,IAAAA;AAAR,GAAD,KAA0C;AAC7D,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAM,MAAA,IAAI,EAAED,IAAI,IAAI;AAApB,KAAA,EACG,OAAO,EAAP,GAAA,CAAcG,KAAD,IAAA,aACZ,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AACE,MAAA,GAAG,EAAEA,KAAK,CADZ,EAAA;AAEE,MAAA,EAAE,EAAEA,KAAK,CAFX,EAAA;AAGE,MAAA,KAAK,EAAEA,KAAK,CAHd,KAAA;AAIE,MAAA,YAAY,EAAEA,KAAK,CAJrB,YAAA;AAKE,MAAA,YAAY,EAAEA,KAAK,CALrB,YAAA;AAME,MAAA,gBAAgB,EAAEA,KAAK,CANzB,gBAAA;AAOE,MAAA,QAAQ,EAAEA,KAAK,CAPjB,QAAA;AAQE,MAAA,mBAAmB,EAAEA,KAAK,CAR5B,mBAAA;AASE,MAAA,IAAI,EATN,IAAA;AAUE,MAAA,OAAO,EAAEA,KAAK,CAVhB,OAAA;AAWE,MAAA,WAAW,EAAE,MAAM;AACjB,YAAIA,KAAK,CAAT,OAAA,EAAmB;AACjBA,UAAAA,KAAK,CAALA,OAAAA;AACD;AACF;AAfH,KAAA,CADD,CADH,CADF;AADF,GAAA;;;AAJEH,IAAAA,I;AACAC,IAAAA,O;AAZAT,MAAAA,Y;AACAC,MAAAA,Y;AAEAC,MAAAA,E;AACAC,MAAAA,Q;AACAC,MAAAA,O;AACAC,MAAAA,K;AACAC,MAAAA,mB;AACAC,MAAAA,O,6BAAU,U,EAAa,U;;;oBAgCzB,Y","sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\n\nexport interface VerticalTabEntry {\n requiredLine: string;\n optionalLine?: string;\n optionalLineIcon?: React.FunctionComponent<BaseProps>;\n to: string;\n disabled?: boolean;\n onClick?: () => void;\n exact?: boolean;\n showNotificationDot?: boolean;\n variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n size?: string;\n entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n return (\n <Tabs size={size || 'large'}>\n {entries?.map((entry: VerticalTabEntry) => (\n <TabLink\n key={entry.to}\n to={entry.to}\n exact={entry.exact}\n requiredLine={entry.requiredLine}\n optionalLine={entry.optionalLine}\n OptionalLineIcon={entry.optionalLineIcon}\n disabled={entry.disabled}\n showNotificationDot={entry.showNotificationDot}\n size={size}\n variant={entry.variant}\n onLinkClick={() => {\n if (entry.onClick) {\n entry.onClick();\n }\n }}></TabLink>\n ))}\n </Tabs>\n );\n};\n\nexport default VerticalTabs;\n"],"file":"VerticalTabs.js"}
|
|
@@ -359,7 +359,11 @@
|
|
|
359
359
|
}
|
|
360
360
|
|
|
361
361
|
const theme = _types.ToastColor[opts.color ?? _types.ToastColor.BLACK];
|
|
362
|
-
|
|
362
|
+
|
|
363
|
+
if (!shouldRemove) {
|
|
364
|
+
setTimeout(() => elementRef?.current?.focus());
|
|
365
|
+
}
|
|
366
|
+
|
|
363
367
|
return /*#__PURE__*/React.createElement(Container, {
|
|
364
368
|
"data-testid": testId,
|
|
365
369
|
animation: prop,
|