@laerdal/life-react-components 2.3.1-dev.11.full → 2.3.1-dev.13
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/Banners/Banner.cjs.map +1 -1
- package/dist/Banners/Banner.js.map +1 -1
- package/dist/Dropdown/DropdownButtonTypes.d.ts +1 -0
- package/dist/Dropdown/DropdownContent.cjs +1 -1
- package/dist/Dropdown/DropdownContent.js +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map +1 -1
- package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
- package/dist/Footer/SiteFooter.cjs +19 -30
- package/dist/Footer/SiteFooter.cjs.map +1 -1
- package/dist/Footer/SiteFooter.d.ts +1 -3
- package/dist/Footer/SiteFooter.js +19 -31
- package/dist/Footer/SiteFooter.js.map +1 -1
- package/dist/GlobalNavigationBar/Logo.cjs.map +1 -1
- package/dist/GlobalNavigationBar/Logo.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +2 -0
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +2 -0
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs +2 -0
- package/dist/GlobalNavigationBar/desktop/MainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/MainMenu.js +2 -0
- package/dist/GlobalNavigationBar/desktop/MainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.js.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.cjs +2 -4
- package/dist/InputFields/DatepickerFieldHeader.cjs.map +1 -1
- package/dist/InputFields/DatepickerFieldHeader.js +2 -4
- package/dist/InputFields/DatepickerFieldHeader.js.map +1 -1
- package/dist/Layouts/index.cjs +6 -4
- package/dist/Layouts/index.cjs.map +1 -1
- package/dist/Layouts/index.d.ts +1 -0
- package/dist/Layouts/index.js +4 -3
- package/dist/Layouts/index.js.map +1 -1
- package/dist/NavItem/NestedNavItem.cjs.map +1 -1
- package/dist/NavItem/NestedNavItem.js.map +1 -1
- package/dist/Paginator/Paginator.cjs.map +1 -1
- package/dist/Paginator/Paginator.js.map +1 -1
- package/dist/SideMenu/types.d.ts +1 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs +3 -0
- package/dist/Switcher/MobileCustomMenuContent.cjs.map +1 -1
- package/dist/Switcher/MobileCustomMenuContent.d.ts +1 -0
- package/dist/Switcher/MobileCustomMenuContent.js +3 -0
- package/dist/Switcher/MobileCustomMenuContent.js.map +1 -1
- package/dist/Table/Table.cjs +1 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableTypes.d.ts +1 -0
- package/dist/Tabs/TabLink.cjs +50 -48
- package/dist/Tabs/TabLink.cjs.map +1 -1
- package/dist/Tabs/TabLink.js +50 -48
- package/dist/Tabs/TabLink.js.map +1 -1
- package/dist/Toggles/TogglerTypes.d.ts +1 -0
- package/dist/Tooltips/TooltipOverflow.cjs +1 -1
- package/dist/Tooltips/TooltipOverflow.cjs.map +1 -1
- package/dist/Tooltips/TooltipOverflow.js +1 -1
- package/dist/Tooltips/TooltipOverflow.js.map +1 -1
- package/dist/Tooltips/TooltipTypes.d.ts +1 -0
- package/dist/assets/index.cjs.map +1 -1
- package/dist/assets/index.js.map +1 -1
- package/dist/common/ActionWithin.cjs +1 -1
- package/dist/common/ActionWithin.js +1 -1
- package/dist/common/FocusVisible.cjs +1 -1
- package/dist/common/FocusVisible.js +1 -1
- package/dist/icons/systemicons/LoadingMedium.cjs.map +1 -1
- package/dist/icons/systemicons/LoadingMedium.js.map +1 -1
- package/dist/icons/systemicons/LoadingSmall.cjs.map +1 -1
- package/dist/icons/systemicons/LoadingSmall.js.map +1 -1
- package/package.json +7 -8
package/dist/Layouts/index.d.ts
CHANGED
package/dist/Layouts/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { BREAKPOINTS } from '../styles';
|
|
5
5
|
var GRID = {
|
|
@@ -14,14 +14,14 @@ var GRID = {
|
|
|
14
14
|
LARGE: '32px 64px 128px'
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
|
-
export var PageWidth = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: block;\n margin: ", ";\n ", "\n
|
|
17
|
+
export var PageWidth = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: block;\n margin: ", ";\n\n ", "\n ", " {\n margin: ", ";\n ", "\n }\n\n ", " {\n margin: ", ";\n ", "\n }\n\n ", " {\n max-width: ", ";\n\n margin: 32px auto 128px;\n ", "\n\n }\n"])), GRID.GUTTER.SMALL, function (props) {
|
|
18
18
|
return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
|
|
19
19
|
}, BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) {
|
|
20
20
|
return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
|
|
21
21
|
}, BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, function (props) {
|
|
22
22
|
return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
|
|
23
23
|
}, BREAKPOINTS.LARGE, function (props) {
|
|
24
|
-
return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(
|
|
24
|
+
return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600 - 128px)';
|
|
25
25
|
}, function (props) {
|
|
26
26
|
return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
|
|
27
27
|
});
|
|
@@ -38,4 +38,5 @@ export var Columns = styled.section(_templateObject2 || (_templateObject2 = _tag
|
|
|
38
38
|
}, GRID.GAP.MEDIUM, function (props) {
|
|
39
39
|
return props.printColumns || 'none';
|
|
40
40
|
});
|
|
41
|
+
export var ContainerMargins = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n /* X small devices (mobile phones, 320px and up) */\n @media only screen and (min-width: 320px) {\n margin: 16px;\n column-gap: 16px;\n }\n\n /* Medium devices (landscape tablets, 768px and up) */\n @media only screen and (min-width: 768px) {\n margin: 32px;\n column-gap: 32px;\n }\n\n /* X large devices (laptops/desktops, 1200px and up) */\n @media only screen and (min-width: 1200px) {\n margin: 56px;\n column-gap: 40px;\n }\n"])));
|
|
41
42
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n GAP: {\n SMALL: '16px',\n MEDIUM: '24px',\n LARGE: '32px',\n },\n GUTTER: {\n SMALL: '16px 16px 32px',\n MEDIUM: '24px 32px 64px',\n LARGE: '32px 64px 128px',\n },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n display: block;\n margin: ${GRID.GUTTER.SMALL};\n ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","props","unsetMargin","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"sources":["../../src/Layouts/index.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport {BREAKPOINTS} from '../styles';\n\nconst GRID = {\n GAP: {\n SMALL: '16px',\n MEDIUM: '24px',\n LARGE: '32px',\n },\n GUTTER: {\n SMALL: '16px 16px 32px',\n MEDIUM: '24px 32px 64px',\n LARGE: '32px 64px 128px',\n },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number; unsetMargin?: boolean; }>`\n display: block;\n margin: ${GRID.GUTTER.SMALL};\n\n ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n ${BREAKPOINTS.MEDIUM} {\n margin: ${GRID.GUTTER.MEDIUM};\n ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n }\n\n ${BREAKPOINTS.LARGE} {\n margin: ${GRID.GUTTER.LARGE};\n ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n }\n\n ${BREAKPOINTS.LARGE} {\n max-width: ${(props) => (\n props.useMaxWidth\n ? (props.maxWidth\n ? 'min(100% - 128px,' + props.maxWidth + 'px)'\n : 'calc(100% - 128px)')\n : 'calc(1600 - 128px)')};\n\n margin: 32px auto 128px;\n ${props => props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'}\n\n }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n width: 100%;\n display: grid;\n grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n ${BREAKPOINTS.MEDIUM} {\n grid-template-columns: ${(props) => props.columns};\n -ms-grid-columns: ${(props) => props.columns};\n grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n }\n\n ${BREAKPOINTS.LARGE} {\n grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n }\n\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n display: -ms-grid;\n\n > *:not(:first-child) {\n margin-left: ${GRID.GAP.MEDIUM};\n }\n }\n\n @media print {\n grid-gap: 0;\n grid-template-columns: ${(props) => props.printColumns || 'none'};\n }\n`;\n\nexport const ContainerMargins = styled.div`\n /* X small devices (mobile phones, 320px and up) */\n @media only screen and (min-width: 320px) {\n margin: 16px;\n column-gap: 16px;\n }\n\n /* Medium devices (landscape tablets, 768px and up) */\n @media only screen and (min-width: 768px) {\n margin: 32px;\n column-gap: 32px;\n }\n\n /* X large devices (laptops/desktops, 1200px and up) */\n @media only screen and (min-width: 1200px) {\n margin: 56px;\n column-gap: 40px;\n }\n`;\n"],"mappings":";;AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,QAAO,WAAW;AAErC,IAAMC,IAAI,GAAG;EACXC,GAAG,EAAE;IACHC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,KAAK,EAAE;EACT,CAAC;EACDC,MAAM,EAAE;IACNH,KAAK,EAAE,gBAAgB;IACvBC,MAAM,EAAE,gBAAgB;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAED,OAAO,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAG,mSAEvBP,IAAI,CAACK,MAAM,CAACH,KAAK,EAEzB,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAChEV,WAAW,CAACI,MAAM,EACRH,IAAI,CAACK,MAAM,CAACF,MAAM,EAC1B,UAAAK,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACPJ,IAAI,CAACK,MAAM,CAACD,KAAK,EACzB,UAAAI,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,GAGlEV,WAAW,CAACK,KAAK,EACJ,UAACI,KAAK;EAAA,OACXA,KAAK,CAACE,WAAW,GACNF,KAAK,CAACG,QAAQ,GACP,mBAAmB,GAAGH,KAAK,CAACG,QAAQ,GAAG,KAAK,GAC5C,oBAAoB,GAC5B,oBAAoB;AAAA,CAAC,EAGrC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,WAAW,IAAI,kCAAkC;AAAA,EAGrE;AAED,OAAO,IAAMG,OAAO,GAAGd,MAAM,CAACe,OAAO,snBAGvB,UAACL,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACC,KAAK;AAAA,GAGhDH,WAAW,CAACI,MAAM,EACO,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAC7B,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACO,OAAO;AAAA,GAChC,UAACP,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACE,MAAM;AAAA,GAGnDJ,WAAW,CAACK,KAAK,EACL,UAACI,KAAK;EAAA,OAAKA,KAAK,CAACM,GAAG,IAAId,IAAI,CAACC,GAAG,CAACG,KAAK;AAAA,GAOjCJ,IAAI,CAACC,GAAG,CAACE,MAAM,EAMP,UAACK,KAAK;EAAA,OAAKA,KAAK,CAACQ,YAAY,IAAI,MAAM;AAAA,EAEnE;AAED,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAG,ohBAkBzC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NestedNavItem.cjs","names":["NestedNavItem","React","forwardRef","ref","active","item","onClickHandler","size","Size","Medium","className","tabIndex","iconRight","id","rest"],"sources":["../../src/NavItem/NestedNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {Size} from '../types';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\nexport interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {\n item: DropdownItem;\n onClickHandler: (e: React.MouseEvent) => void;\n active: boolean;\n id: string;\n size?: Size;\n iconRight?: React.ReactElement;\n}\n\n\nconst NestedNavItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n active,\n item,\n onClickHandler,\n size = Size.Medium,\n className,\n tabIndex,\n iconRight,\n id,\n ...rest\n }: MenuItemProps, ref) => {\n return (\n <></>\n );\n});\n\nexport default NestedNavItem;\n"],"mappings":";;;;;;;;;;AAAA;
|
|
1
|
+
{"version":3,"file":"NestedNavItem.cjs","names":["NestedNavItem","React","forwardRef","ref","active","item","onClickHandler","size","Size","Medium","className","tabIndex","iconRight","id","rest"],"sources":["../../src/NavItem/NestedNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {\n item: DropdownItem;\n onClickHandler: (e: React.MouseEvent) => void;\n active: boolean;\n id: string;\n size?: Size;\n iconRight?: React.ReactElement;\n}\n\n\nconst NestedNavItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n active,\n item,\n onClickHandler,\n size = Size.Medium,\n className,\n tabIndex,\n iconRight,\n id,\n ...rest\n }: MenuItemProps, ref) => {\n return (\n <></>\n );\n});\n\nexport default NestedNavItem;\n"],"mappings":";;;;;;;;;;AAAA;AAIA;AAAuC;AAAA;AAAA;AAAA;AAevC,IAAMA,aAAa,gBAAGC,KAAK,CAACC,UAAU,CAAmC,gBAUcC,GAAG,EAAK;EAAA,IATxBC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,cAAc,QAAdA,cAAc;IAAA,iBACdC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,EAAE,QAAFA,EAAE;IACCC,IAAI;EAE5E,oBACC,8CAAK;AAER,CAAC,CAAC;AAAC;EAtBAR,cAAc;EACdF,MAAM;EACNS,EAAE;EAEFD,SAAS;AAAA;AAAA,eAoBGZ,aAAa;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NestedNavItem.js","names":["React","Size","NestedNavItem","forwardRef","ref","active","item","onClickHandler","size","Medium","className","tabIndex","iconRight","id","rest"],"sources":["../../src/NavItem/NestedNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {Size} from '../types';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\nexport interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {\n item: DropdownItem;\n onClickHandler: (e: React.MouseEvent) => void;\n active: boolean;\n id: string;\n size?: Size;\n iconRight?: React.ReactElement;\n}\n\n\nconst NestedNavItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n active,\n item,\n onClickHandler,\n size = Size.Medium,\n className,\n tabIndex,\n iconRight,\n id,\n ...rest\n }: MenuItemProps, ref) => {\n return (\n <></>\n );\n});\n\nexport default NestedNavItem;\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;
|
|
1
|
+
{"version":3,"file":"NestedNavItem.js","names":["React","Size","NestedNavItem","forwardRef","ref","active","item","onClickHandler","size","Medium","className","tabIndex","iconRight","id","rest"],"sources":["../../src/NavItem/NestedNavItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Product, Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\nimport {CommonInteractionStyling, defaultOnMouseDownHandler} from '../common';\n\nexport interface MenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'onMouseDown' | 'onClick'> {\n item: DropdownItem;\n onClickHandler: (e: React.MouseEvent) => void;\n active: boolean;\n id: string;\n size?: Size;\n iconRight?: React.ReactElement;\n}\n\n\nconst NestedNavItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(({\n active,\n item,\n onClickHandler,\n size = Size.Medium,\n className,\n tabIndex,\n iconRight,\n id,\n ...rest\n }: MenuItemProps, ref) => {\n return (\n <></>\n );\n});\n\nexport default NestedNavItem;\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAI9B,SAAiBC,IAAI,QAAO,UAAU;AAAC;AAAA;AAevC,IAAMC,aAAa,gBAAGF,KAAK,CAACG,UAAU,CAAmC,gBAUcC,GAAG,EAAK;EAAA,IATxBC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACJC,cAAc,QAAdA,cAAc;IAAA,iBACdC,IAAI;IAAJA,IAAI,0BAAGP,IAAI,CAACQ,MAAM;IAClBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,EAAE,QAAFA,EAAE;IACCC,IAAI;EAE5E,oBACC,mBAAK;AAER,CAAC,CAAC;AAAC;EAtBAP,cAAc;EACdF,MAAM;EACNQ,EAAE;EAEFD,SAAS;AAAA;AAoBZ,eAAeV,aAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.cjs","names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","useNavigate","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n ${focusStyles}\n }\n }\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n cursor: not-allowed;\n &:after{\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n content: '...';\n }\n`;\n\nconst ItemContent = styled('div')`\n text-align:center;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n \n &.active:after{\n content: '';\n position: absolute;\n bottom: 4px;\n width: 32px;\n border-radius: 4px;\n height: 4px;\n background-color: ${COLORS.primary_500}\n }\n &.active:hover:after{\n background-color: ${COLORS.primary_700}\n }\n &.active:active:after{\n background-color: ${COLORS.primary_800}\n }\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n id,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n id?: string;\n}) => {\n const navigateHook = useNavigate();\n\n const handleButtonClick = () => {\n navigateHook(target);\n onPageChange && onPageChange(page);\n }\n\n return (\n <IconButton id={id}\n action={event => handleButtonClick()}\n variant={'secondary'}\n shape={'circular'}\n disabled={disabled}>\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n </IconButton>\n )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n id=\"paginator-left\"/>\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\n <span>1</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots/>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent className={currentPage === page ? 'active' : ''}>\n <span>{page}</span>\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots/>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n <span>{pageCount}</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n id=\"paginator-right\"/>\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Paginator.cjs","names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","Regular","COLORS","neutral_600","focusStyles","Z_INDEXES","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","useNavigate","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n ${focusStyles}\n }\n }\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n cursor: not-allowed;\n &:after{\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n content: '...';\n }\n`;\n\nconst ItemContent = styled('div')`\n text-align:center;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n \n &.active:after{\n content: '';\n position: absolute;\n bottom: 4px;\n width: 32px;\n border-radius: 4px;\n height: 4px;\n background-color: ${COLORS.primary_500}\n }\n &.active:hover:after{\n background-color: ${COLORS.primary_700}\n }\n &.active:active:after{\n background-color: ${COLORS.primary_800}\n }\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n id,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n id?: string;\n}) => {\n const navigateHook = useNavigate();\n\n const handleButtonClick = () => {\n navigateHook(target);\n onPageChange && onPageChange(page);\n }\n\n return (\n <IconButton id={id}\n action={event => handleButtonClick()}\n variant={'secondary'}\n shape={'circular'}\n disabled={disabled}>\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n </IconButton>\n )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n id=\"paginator-left\"/>\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\n <span>1</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots/>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent className={currentPage === page ? 'active' : ''}>\n <span>{page}</span>\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots/>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n <span>{pageCount}</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n id=\"paginator-right\"/>\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n ${focusStyles}\n }\n }\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n cursor: not-allowed;\n &:after{\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n content: '...';\n }\n`;\n\nconst ItemContent = styled('div')`\n text-align:center;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n \n &.active:after{\n content: '';\n position: absolute;\n bottom: 4px;\n width: 32px;\n border-radius: 4px;\n height: 4px;\n background-color: ${COLORS.primary_500}\n }\n &.active:hover:after{\n background-color: ${COLORS.primary_700}\n }\n &.active:active:after{\n background-color: ${COLORS.primary_800}\n }\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n id,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n id?: string;\n}) => {\n const navigateHook = useNavigate();\n\n const handleButtonClick = () => {\n navigateHook(target);\n onPageChange && onPageChange(page);\n }\n\n return (\n <IconButton id={id}\n action={event => handleButtonClick()}\n variant={'secondary'}\n shape={'circular'}\n disabled={disabled}>\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n </IconButton>\n )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n id=\"paginator-left\"/>\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\n <span>1</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots/>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent className={currentPage === page ? 'active' : ''}>\n <span>{page}</span>\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots/>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n <span>{pageCount}</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n id=\"paginator-right\"/>\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Paginator.js","names":["React","styled","NavLink","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","SystemIcons","ComponentMStyling","Z_INDEXES","useNavigate","IconButton","Container","nav","MEDIUM","Items","ul","Item","li","Regular","neutral_600","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","primary_500","Step","up","target","disabled","page","onPageChange","id","navigateHook","handleButtonClick","event","Paginator","pageCount","currentPage","baseUrl","pages","from","to","i","push","findIndex","item","map"],"sources":["../../src/Paginator/Paginator.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {SystemIcons} from '../icons';\nimport {ComponentMStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport { useNavigate } from 'react-router';\nimport {IconButton} from '../Button';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n ${focusStyles}\n }\n }\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n cursor: not-allowed;\n &:after{\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n content: '...';\n }\n`;\n\nconst ItemContent = styled('div')`\n text-align:center;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n \n &.active:after{\n content: '';\n position: absolute;\n bottom: 4px;\n width: 32px;\n border-radius: 4px;\n height: 4px;\n background-color: ${COLORS.primary_500}\n }\n &.active:hover:after{\n background-color: ${COLORS.primary_700}\n }\n &.active:active:after{\n background-color: ${COLORS.primary_800}\n }\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n id,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n id?: string;\n}) => {\n const navigateHook = useNavigate();\n\n const handleButtonClick = () => {\n navigateHook(target);\n onPageChange && onPageChange(page);\n }\n\n return (\n <IconButton id={id}\n action={event => handleButtonClick()}\n variant={'secondary'}\n shape={'circular'}\n disabled={disabled}>\n {up ? <SystemIcons.ChevronRight/> : <SystemIcons.ChevronLeft/>}\n </IconButton>\n )\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n id=\"paginator-left\"/>\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent className={currentPage === 1 ? 'active' : ''}>\n <span>1</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots/>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent className={currentPage === page ? 'active' : ''}>\n <span>{page}</span>\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots/>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent className={currentPage === pageCount ? 'active' : ''}>\n <span>{pageCount}</span>\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n id=\"paginator-right\"/>\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"mappings":"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"}
|
package/dist/SideMenu/types.d.ts
CHANGED
|
@@ -38,4 +38,7 @@ var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
|
38
38
|
});
|
|
39
39
|
};
|
|
40
40
|
exports.MobileCustomMenuContent = MobileCustomMenuContent;
|
|
41
|
+
MobileCustomMenuContent.propTypes = {
|
|
42
|
+
children: _propTypes.default.node
|
|
43
|
+
};
|
|
41
44
|
//# sourceMappingURL=MobileCustomMenuContent.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileCustomMenuContent.cjs","names":["MobileCustomMenuContent","children","header","action","useScrollableContainer","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;AACA;AAEA;AACA;AAA4F;AAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"MobileCustomMenuContent.cjs","names":["MobileCustomMenuContent","children","header","action","useScrollableContainer","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;AACA;AAEA;AACA;AAA4F;AAAA;AAAA;AAQrF,IAAMA,uBAA8E,GAAG,SAAjFA,uBAA8E,OAAqC;EAAA,IAA/BC,QAAQ,QAARA,QAAQ;IAAEC,MAAM,QAANA,MAAM;IAAEC,MAAM,QAANA,MAAM;EACvH,4BAAyC,IAAAC,2CAAsB,EAAC,CAACH,QAAQ,CAAC,CAAC;IAAA;IAApEI,kBAAkB;IAAEC,UAAU;EAErC,oBACE,sBAAC,+BAAiB;IAAA,wBAChB,sBAAC,iCAAmB;MAAC,GAAG,EAAED,kBAA0B;MAAC,SAAS,EAAEC,UAAU,GAAG,YAAY,GAAG,EAAG;MAAA,WAC5F,CAAC,CAACJ,MAAM,iBACP,sBAAC,mCAAqB;QAAA,wBACpB,qBAAC,8BAAgB;UAAA,UAAEA,MAAM,CAACA;QAAM,EAAoB,EACnDA,MAAM,CAACK,IAAI,iBAAI,qBAAC,8BAAgB;UAAA,UAAEL,MAAM,CAACK;QAAI,EAAoB;MAAA,EAErE,EACAN,QAAQ;IAAA,EACW,EACrBE,MAAM,iBAAI,qBAAC,4CAAqB,oBAAKA,MAAM,EAAI;EAAA,EAC9B;AAExB,CAAC;AAAC;AAAA;EApBAF,QAAQ;AAAA"}
|
|
@@ -3,6 +3,7 @@ import { MenuButton, MenuGroupHeader } from '../GlobalNavigationBar';
|
|
|
3
3
|
interface MobileCustomMenuContentProps {
|
|
4
4
|
header?: MenuGroupHeader;
|
|
5
5
|
action?: MenuButton;
|
|
6
|
+
children?: React.ReactNode;
|
|
6
7
|
}
|
|
7
8
|
export declare const MobileCustomMenuContent: React.FunctionComponent<MobileCustomMenuContentProps>;
|
|
8
9
|
export {};
|
|
@@ -31,4 +31,7 @@ export var MobileCustomMenuContent = function MobileCustomMenuContent(_ref) {
|
|
|
31
31
|
}), action && /*#__PURE__*/_jsx(MobileActionContainer, _objectSpread({}, action))]
|
|
32
32
|
});
|
|
33
33
|
};
|
|
34
|
+
MobileCustomMenuContent.propTypes = {
|
|
35
|
+
children: _pt.node
|
|
36
|
+
};
|
|
34
37
|
//# sourceMappingURL=MobileCustomMenuContent.js.map
|
|
@@ -1 +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;
|
|
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 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/Table/Table.cjs
CHANGED
|
@@ -23,7 +23,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
23
23
|
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; }
|
|
24
24
|
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; } } }; }
|
|
25
25
|
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); }
|
|
26
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
26
|
+
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; }
|
|
27
27
|
var Table = function Table(props) {
|
|
28
28
|
var onPreviousPageClick = props.onPreviousPageClick,
|
|
29
29
|
onNextPageClick = props.onNextPageClick,
|
package/dist/Table/Table.js
CHANGED
|
@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
5
5
|
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; }
|
|
6
6
|
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; } } }; }
|
|
7
7
|
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); }
|
|
8
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++)
|
|
8
|
+
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; }
|
|
9
9
|
/**
|
|
10
10
|
* Import React libraries.
|
|
11
11
|
*/
|
|
@@ -1 +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":";;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AAMA;AAAoD;AAepD,IAAMA,WAAsD,GAAG,SAAzDA,WAAsD,CAAIC,KAAK,EAAK;EAAA;EACxE,IAAMC,iBAAiC,GAAG,CAAC;IAACC,KAAK,EAAE;EAAI,CAAC,EAAE;IAACA,KAAK,EAAE;EAAI,CAAC,EAAE;IAACA,KAAK,EAAE;EAAI,CAAC,EAAE;IAACA,KAAK,EAAE;EAAK,CAAC,CAAC;EAEvG,IAAMC,YAAY,sCAAMH,KAAK,CAACI,gBAAgB,yEAAI,eAAe,gBAAMJ,KAAK,CAACK,WAAW,CAAE;EAE1F,oBACE,sBAAC,8BAAiB;IAAC,eAAY,oBAAoB;IAAA,WAE3CL,KAAK,CAACM,SAAS,iBACf,sBAAC,4CAA+B;MAAC,OAAO,EAAE;QAAA,OAAMN,KAAK,CAACO,cAAc,CAAC,CAACP,KAAK,CAACQ,WAAW,CAAC;MAAA,CAAC;MACxD,WAAW,EAAEC,iCAA0B;MACvC,QAAQ,EAAET,KAAK,CAACQ,WAAW,IAAIR,KAAK,CAACU,IAAI,CAACC,MAAM,IAAIX,KAAK,CAACK,WAAY;MAAA,WAEnGL,KAAK,CAACQ,WAAW,iBACjB;QAAA,wBACE;UAAA,mCAAOR,KAAK,CAACY,aAAa,uEAAI,WAAW,
|
|
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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"}
|
|
@@ -1 +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":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,cAAc,QAAqB,aAAa;AACxD,SAAQC,UAAU,QAAO,WAAW;AACpC,SAASC,WAAW,QAAO,UAAU;AACrC,SAAQC,MAAM,QAAO,WAAW;AAChC,SACEC,iBAAiB,EAAEC,+BAA+B,EAClDC,wBAAwB,EACxBC,yBAAyB,EACzBC,4BAA4B,QACvB,eAAe;AACtB,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAAA;AAepD,IAAMC,WAAsD,GAAG,SAAzDA,WAAsD,CAAIC,KAAK,EAAK;EAAA;EACxE,IAAMC,iBAAiC,GAAG,CAAC;IAACC,KAAK,EAAE;EAAI,CAAC,EAAE;IAACA,KAAK,EAAE;EAAI,CAAC,EAAE;IAACA,KAAK,EAAE;EAAI,CAAC,EAAE;IAACA,KAAK,EAAE;EAAK,CAAC,CAAC;EAEvG,IAAMC,YAAY,sCAAMH,KAAK,CAACI,gBAAgB,yEAAI,eAAe,gBAAMJ,KAAK,CAACK,WAAW,CAAE;EAE1F,oBACE,MAAC,iBAAiB;IAAC,eAAY,oBAAoB;IAAA,WAE3CL,KAAK,CAACM,SAAS,iBACf,MAAC,+BAA+B;MAAC,OAAO,EAAE;QAAA,OAAMN,KAAK,CAACO,cAAc,CAAC,CAACP,KAAK,CAACQ,WAAW,CAAC;MAAA,CAAC;MACxD,WAAW,EAAEV,yBAA0B;MACvC,QAAQ,EAAEE,KAAK,CAACQ,WAAW,IAAIR,KAAK,CAACS,IAAI,CAACC,MAAM,IAAIV,KAAK,CAACK,WAAY;MAAA,WAEnGL,KAAK,CAACQ,WAAW,iBACjB;QAAA,wBACE;UAAA,mCAAOR,KAAK,CAACW,aAAa,uEAAI,WAAW,
|
|
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":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,cAAc,QAAqB,aAAa;AACxD,SAAQC,UAAU,QAAO,WAAW;AACpC,SAASC,WAAW,QAAO,UAAU;AACrC,SAAQC,MAAM,QAAO,WAAW;AAChC,SACEC,iBAAiB,EAAEC,+BAA+B,EAClDC,wBAAwB,EACxBC,yBAAyB,EACzBC,4BAA4B,QACvB,eAAe;AACtB,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAAA;AAepD,IAAMC,WAAsD,GAAG,SAAzDA,WAAsD,CAAIC,KAAK,EAAK;EAAA;EACxE,IAAMC,iBAAiC,GAAG,CAAC;IAACC,KAAK,EAAE;EAAI,CAAC,EAAE;IAACA,KAAK,EAAE;EAAI,CAAC,EAAE;IAACA,KAAK,EAAE;EAAI,CAAC,EAAE;IAACA,KAAK,EAAE;EAAK,CAAC,CAAC;EAEvG,IAAMC,YAAY,sCAAMH,KAAK,CAACI,gBAAgB,yEAAI,eAAe,gBAAMJ,KAAK,CAACK,WAAW,CAAE;EAE1F,oBACE,MAAC,iBAAiB;IAAC,eAAY,oBAAoB;IAAA,WAE3CL,KAAK,CAACM,SAAS,iBACf,MAAC,+BAA+B;MAAC,OAAO,EAAE;QAAA,OAAMN,KAAK,CAACO,cAAc,CAAC,CAACP,KAAK,CAACQ,WAAW,CAAC;MAAA,CAAC;MACxD,WAAW,EAAEV,yBAA0B;MACvC,QAAQ,EAAEE,KAAK,CAACQ,WAAW,IAAIR,KAAK,CAACS,IAAI,CAACC,MAAM,IAAIV,KAAK,CAACK,WAAY;MAAA,WAEnGL,KAAK,CAACQ,WAAW,iBACjB;QAAA,wBACE;UAAA,mCAAOR,KAAK,CAACW,aAAa,uEAAI,WAAW,EAAC,IAAE,EAACX,KAAK,CAACS,IAAI,CAACC,MAAM,GAAGV,KAAK,CAACK,WAAW,EAAC,GAAC;QAAA,EAAO,eAC3F,KAAC,WAAW,CAAC,aAAa,KAAE;MAAA,EAC3B,EAGH,CAACL,KAAK,CAACQ,WAAW,iBAClB;QAAA,wBACE;UAAA,mCAAOR,KAAK,CAACY,cAAc,yEAAI;QAAY,EAAQ,eACnD,KAAC,WAAW,CAAC,WAAW,KAAE;MAAA,EACzB;IAAA,EAE2B,EAGlC,CAACZ,KAAK,CAACM,SAAS,iBAChB,MAAC,wBAAwB;MAAA,wBACvB,KAAC,cAAc;QACb,IAAI,EAAE,MAAO;QACb,KAAK,EAAEL,iBAAkB;QACzB,QAAQ,EAAED,KAAK,CAACa,oBAAqB;QACrC,KAAK,EAAE,WAAIb,KAAK,CAACK,WAAW,EAAI;QAChC,OAAO,EAAE,iBAACH,KAAK;UAAA,OAAKF,KAAK,CAACc,mBAAmB,CAAC,CAACZ,KAAK,CAAC,CAAC,CAAC,CAAC;QAAA,CAAC;QACzD,KAAK,EAAEC,YAAa;QACpB,SAAS,EAAE;MAAK,EAChB,eACF,MAAC,4BAA4B;QAAA,WAC1BH,KAAK,CAACe,KAAK,KAAK,CAAC,GAAG,CAAC,GAAGf,KAAK,CAACgB,IAAI,EAAC,GAAC,EAAChB,KAAK,CAACiB,EAAE,EAAC,MAAI,EAACjB,KAAK,CAACe,KAAK;MAAA,EAClC,eAC/B,MAAC,yBAAyB;QAAA,wBACxB,KAAC,UAAU;UAAC,OAAO,EAAC,WAAW;UAAC,KAAK,EAAC,UAAU;UAAC,MAAM,EAAE;YAAA,OAAMf,KAAK,CAACkB,QAAQ,EAAE;UAAA,CAAC;UACpE,QAAQ,EAAElB,KAAK,CAACgB,IAAI,KAAK,CAAC,IAAIhB,KAAK,CAACa,oBAAqB;UAAA,uBACnE,KAAC,WAAW,CAAC,WAAW;YAAC,IAAI,EAAC,IAAI;YAAC,KAAK,EAAErB,MAAM,CAAC2B;UAAY;QAAE,EACpD,eACb,KAAC,UAAU;UAAC,OAAO,EAAC,WAAW;UAAC,KAAK,EAAC,UAAU;UAAC,MAAM,EAAE;YAAA,OAAMnB,KAAK,CAACoB,QAAQ,EAAE;UAAA,CAAC;UACpE,QAAQ,EAAEpB,KAAK,CAACiB,EAAE,KAAKjB,KAAK,CAACe,KAAK,IAAIf,KAAK,CAACa,oBAAqB;UAAA,uBAC3E,KAAC,WAAW,CAAC,YAAY;YAAC,IAAI,EAAC,IAAI;YAAC,KAAK,EAAErB,MAAM,CAAC2B;UAAY;QAAE,EACrD;MAAA,EACa;IAAA,EACH;EAAA,EAEf;AAExB,CAAC;AAAC;EApEAL,mBAAmB;EACnBT,WAAW;EACXW,IAAI;EACJC,EAAE;EACFF,KAAK;EACLK,QAAQ;EACRF,QAAQ;EACRX,cAAc;EACdC,WAAW;AAAA;AA+Db,eAAeT,WAAW"}
|
package/dist/Tabs/TabLink.cjs
CHANGED
|
@@ -32,7 +32,7 @@ var StyledNotification = _styledComponents.default.div(_templateObject4 || (_tem
|
|
|
32
32
|
var EndLineIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 15px 0 0 !important;\n"])));
|
|
33
33
|
var OptionalLineWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n"])));
|
|
34
34
|
//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
|
|
35
|
-
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
|
|
35
|
+
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 {\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) {
|
|
36
36
|
return props.disabled ? _styles.COLORS.neutral_100 : 'transparent';
|
|
37
37
|
}, function (props) {
|
|
38
38
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
@@ -65,58 +65,60 @@ var TabLink = function TabLink(_ref) {
|
|
|
65
65
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
66
66
|
activeState = _useState2[0],
|
|
67
67
|
setActiveState = _useState2[1];
|
|
68
|
-
return /*#__PURE__*/(0, _jsxRuntime.
|
|
68
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
|
|
69
69
|
disabled: disabled,
|
|
70
70
|
className: disabled ? 'disabled' : '',
|
|
71
71
|
onMouseEnter: containerOnMouseEnter,
|
|
72
72
|
onMouseLeave: containerOnMouseLeave,
|
|
73
|
-
children:
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
if (
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.
|
|
98
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
99
|
-
children:
|
|
73
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
74
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, _objectSpread(_objectSpread({
|
|
75
|
+
to: forceDeactivate ? 'invalid' : to.toString()
|
|
76
|
+
//disabled={disabled}
|
|
77
|
+
,
|
|
78
|
+
className: function className(_ref2) {
|
|
79
|
+
var isActive = _ref2.isActive;
|
|
80
|
+
onActiveStateChanged && onActiveStateChanged(activeState);
|
|
81
|
+
if (forceDeactivate) {
|
|
82
|
+
if (disabled) return 'disabled';else return '';
|
|
83
|
+
}
|
|
84
|
+
if (isActive != activeState) setActiveState(isActive);
|
|
85
|
+
return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
|
|
86
|
+
},
|
|
87
|
+
onMouseDown: _common.defaultOnMouseDownHandler,
|
|
88
|
+
tabIndex: disabled ? -1 : 0,
|
|
89
|
+
role: "tab",
|
|
90
|
+
"aria-selected": activeState,
|
|
91
|
+
onClick: function onClick(e) {
|
|
92
|
+
return !disabled && onLinkClick && onLinkClick(e);
|
|
93
|
+
},
|
|
94
|
+
ref: ref,
|
|
95
|
+
"data-testid": testId
|
|
96
|
+
}, rest), {}, {
|
|
97
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
|
|
98
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TopWrapper, {
|
|
99
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
100
|
+
children: requiredLine
|
|
101
|
+
})
|
|
102
|
+
}), optionalLine && OptionalLineIcon ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionalLineWrapperWithIcon, {
|
|
103
|
+
children: [OptionalLineIcon, !!optionalLine && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
104
|
+
children: optionalLine
|
|
105
|
+
})]
|
|
106
|
+
}) : optionalLine ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionalLineWrapper, {
|
|
107
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
108
|
+
children: optionalLine
|
|
109
|
+
})
|
|
110
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})]
|
|
111
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledNotification, {
|
|
112
|
+
children: showNotificationDot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
|
|
113
|
+
testId: "NotificationDot",
|
|
114
|
+
size: size,
|
|
115
|
+
variant: variant
|
|
100
116
|
})
|
|
101
|
-
}),
|
|
102
|
-
children:
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
107
|
-
children: optionalLine
|
|
108
|
-
})
|
|
109
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})]
|
|
110
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledNotification, {
|
|
111
|
-
children: showNotificationDot && /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
|
|
112
|
-
testId: "NotificationDot",
|
|
113
|
-
size: size,
|
|
114
|
-
variant: variant
|
|
115
|
-
})
|
|
116
|
-
}), endLineIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndLineIcon, {
|
|
117
|
-
children: endLineIcon
|
|
118
|
-
})]
|
|
119
|
-
})), children]
|
|
117
|
+
}), endLineIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndLineIcon, {
|
|
118
|
+
children: endLineIcon
|
|
119
|
+
})]
|
|
120
|
+
})), children]
|
|
121
|
+
})
|
|
120
122
|
});
|
|
121
123
|
};
|
|
122
124
|
var _default = TabLink;
|
|
@@ -1 +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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"}
|
|
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 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 <>\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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"}
|