@laerdal/life-react-components 1.9.8-dev.23 → 1.9.8-dev.24
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/Card/HorizontalCard/HorizontalCardActions.cjs +2 -8
- package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.js +2 -2
- package/dist/Card/HorizontalCard/HorizontalCardActions.js.map +1 -1
- package/dist/Dropdown/BasicDropdown.cjs +67 -57
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.d.ts +14 -7
- package/dist/Dropdown/BasicDropdown.js +67 -58
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs +2 -8
- package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js +2 -2
- package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +44 -38
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.d.ts +17 -20
- package/dist/InputFields/DatepickerField.js +33 -20
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/NumberField.cjs +63 -52
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.d.ts +14 -19
- package/dist/InputFields/NumberField.js +60 -53
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs +1 -1
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.d.ts +1 -1
- package/dist/InputFields/RadioButton.js +1 -1
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/TextField.cjs +5 -3
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +2 -1
- package/dist/InputFields/TextField.js +5 -4
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/index.cjs +26 -0
- package/dist/InputFields/index.cjs.map +1 -1
- package/dist/InputFields/index.d.ts +1 -0
- package/dist/InputFields/index.js +1 -0
- package/dist/InputFields/index.js.map +1 -1
- package/dist/Table/Table.cjs +3 -3
- package/dist/Table/Table.cjs.map +1 -1
- package/dist/Table/Table.js +3 -3
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableFooter.cjs +1 -4
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.d.ts +0 -1
- package/dist/Table/TableFooter.js +1 -4
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableStyles.cjs +2 -2
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.js +2 -2
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Table/TableTypes.d.ts +0 -1
- package/dist/Toggles/ToggleSwitch.cjs +24 -17
- package/dist/Toggles/ToggleSwitch.cjs.map +1 -1
- package/dist/Toggles/ToggleSwitch.d.ts +5 -1
- package/dist/Toggles/ToggleSwitch.js +21 -12
- package/dist/Toggles/ToggleSwitch.js.map +1 -1
- package/dist/Toggles/TogglerTypes.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","
|
|
1
|
+
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAOA;;AACA;;;;AAEA;AACA;AACA;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,4GAAlB;;;;AAKA,IAAMC,WAAW,GAAGF,0BAAOG,KAAV,6NAAjB;;;;AAaA,IAAMC,iBAAiB,GAAGJ,0BAAOK,KAAV,uFAAvB;;;;AAGA,IAAMC,sBAAsB,GAAGN,0BAAOO,EAAV,uFAA5B;;;;AAGA,IAAMC,6BAA6B,GAAGR,0BAAOC,GAAV,oXAObQ,eAAOC,WAPM,EAQhBD,eAAOC,WARS,EAWtC,mCAAkBC,+BAAmBC,IAArC,EAA2CH,eAAOI,KAAlD,CAXsC,CAAnC;;;;AAiBA,IAAMC,wBAAwB,GAAGd,0BAAOO,EAAV,uFAA9B;;;;AAGA,IAAMQ,8BAA8B,GAAGf,0BAAOC,GAAV,2TAQjBQ,eAAOC,WARU,EASdD,eAAOC,WATO,CAApC;;;;AAYA,IAAMM,uBAAuB,GAAGhB,0BAAOiB,EAAV,mpBAChC,mCAAkBN,+BAAmBC,IAArC,EAA2CH,eAAOS,WAAlD,CADgC,EAIdT,eAAOU,KAJO,EAaVV,eAAOW,UAbG,EAcrBX,eAAOY,WAdc,EAenBC,oBAAUC,KAfS,EAmBVd,eAAOe,WAnBG,EAoBrBf,eAAOgB,WApBc,EAqBnBH,oBAAUI,MArBS,EAyB5BC,mBAzB4B,EA6BrBZ,8BA7BqB,EAiCdA,8BAjCc,EAsCZN,eAAOmB,UAtCK,CAA7B;;;;AA0CA,IAAMC,kBAAkB,GAAG7B,0BAAOO,EAAV,wVAMPE,eAAOe,WANA,EAUPf,eAAOqB,WAVA,EAWhBR,oBAAUC,KAXM,EAezBI,mBAfyB,EAmBhBL,oBAAUI,MAnBM,CAAxB;;;;AAwBA,IAAMK,eAAe,GAAG/B,0BAAOgC,KAAV,yFAArB;;;;AAIA,IAAMC,eAAe,GAAGjC,0BAAOkC,EAAV,uFAArB;;;;AAEA,IAAMC,sBAAsB,GAAGnC,0BAAOC,GAAV,mnBAI/B,mCAAkBU,+BAAmByB,OAArC,EAA8C3B,eAAOI,KAArD,CAJ+B,EAmC/BwB,wBAnC+B,CAA5B;;;;AAwCA,IAAMC,mBAAmB,GAAGtC,0BAAOC,GAAV,kNACrBQ,eAAO8B,WADc,EAMnB9B,eAAO8B,WANY,CAAzB;;;;AAYA,IAAMC,mBAAmB,GAAGxC,0BAAOyC,IAAV,6GAAzB;;;;AAKA,IAAMC,iBAAiB,GAAG1C,0BAAO2C,KAAV,yFAAvB;;;;AAGA,IAAMC,wBAAwB,GAAG5C,0BAAOC,GAAV,oRACXQ,eAAOC,WADI,EAERD,eAAOC,WAFC,CAA9B;;;;AAYA,IAAMmC,4BAA4B,GAAG7C,0BAAOyC,IAAV,sHAErC,oCAAmB9B,+BAAmByB,OAAtC,EAA+C3B,eAAOI,KAAtD,CAFqC,CAAlC;;;;AAKA,IAAMiC,yBAAyB,GAAG9C,0BAAOC,GAAV,2GAA/B;;;;AAIA,IAAM8C,kBAAkB,GAAG/C,0BAAOC,GAAV,wNAMlBqB,oBAAU0B,QANQ,CAAxB;;;;AASA,IAAMC,+BAA+B,GAAGjD,0BAAOkD,MAAV,upBAEfzC,eAAOC,WAFQ,EAGlBD,eAAOC,WAHW,EAa5BD,eAAOU,KAbqB,EAiBxC,mCAAkBR,+BAAmBC,IAArC,EAA2CH,eAAOS,WAAlD,CAjBwC,EAoBtCS,mBApBsC,EAwB7BL,oBAAUC,KAxBmB,EAyB1Bd,eAAOW,UAzBmB,EA0B/BX,eAAOY,WA1BwB,EA8B7BC,oBAAUI,MA9BmB,EA+B1BjB,eAAOe,WA/BmB,EAgC/Bf,eAAOgB,WAhCwB,CAArC","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n min-height: 48px;\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n ${focusStyles}\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n"],"file":"TableStyles.cjs"}
|
|
@@ -27,7 +27,7 @@ export var StyledTableHeaderColumns = styled.tr(_templateObject6 || (_templateOb
|
|
|
27
27
|
export var StyledTableHeaderColumnContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ", ";\n border-bottom: 1px solid ", ";\n"])), COLORS.neutral_200, COLORS.neutral_200);
|
|
28
28
|
export var StyledTableHeaderColumn = styled.th(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n position: relative;\n text-align: unset;\n background-color: ", ";\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n }\n\n &.sortable ", " > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ", " > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ", ";\n }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
|
|
29
29
|
export var StyledTableBodyRow = styled.tr(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ", ";\n }\n \n &:hover {\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n z-index: ", ";\n }\n\n"])), COLORS.primary_100, COLORS.primary_200, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
|
|
30
|
-
export var StyledTableBody = styled.tbody(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n
|
|
30
|
+
export var StyledTableBody = styled.tbody(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n"])));
|
|
31
31
|
export var StyledTableCell = styled.td(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([""])));
|
|
32
32
|
export var StyledTableCellContent = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n min-height: 48px;\n\n padding: 0 16px;\n ", "\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ", "{\n width: fit-content;\n }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
|
|
33
33
|
export var StyledTableCellIcon = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n color: ", ";\n width: 24px;\n height: 24px;\n\n svg {\n color: ", ";\n width: 24px;\n height: 24px;\n }\n"])), COLORS.neutral_700, COLORS.neutral_700);
|
|
@@ -36,6 +36,6 @@ export var StyledTableFooter = styled.tfoot(_templateObject15 || (_templateObjec
|
|
|
36
36
|
export var StyledTableFooterContent = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n border-top: 2px solid ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n"])), COLORS.neutral_200, COLORS.neutral_200);
|
|
37
37
|
export var StyledTableFooterCurrentInfo = styled.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n padding: 0 16px;\n ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
|
|
38
38
|
export var StyledTableFooterControls = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
39
|
-
export var StyledTableSpinner = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(
|
|
39
|
+
export var StyledTableSpinner = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n z-index: ", ";\n"])), Z_INDEXES.backdrop);
|
|
40
40
|
export var StyledTableFooterCollapseButton = styled.button(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n position: relative;\n border-bottom: 1px solid ", ";\n border-top: 1px solid ", ";\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ", ";\n\n cursor: pointer;\n\n ", "\n \n &:focus {\n ", "\n }\n\n &:hover {\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:active {\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:disabled {\n display: none;\n }\n\n"])), COLORS.neutral_200, COLORS.neutral_200, COLORS.white, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), focusStyles, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800);
|
|
41
41
|
//# sourceMappingURL=TableStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","TableWrapper","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","
|
|
1
|
+
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","TableWrapper","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n min-height: 48px;\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.tfoot`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n ${focusStyles}\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n"],"file":"TableStyles.js"}
|
|
@@ -19,7 +19,6 @@ export interface TableProps {
|
|
|
19
19
|
onRowsPerPageChange?: (count: number) => void;
|
|
20
20
|
onTriggerSortingChange?: (key: string, direction: TableSortingDirection) => void;
|
|
21
21
|
showLoadingIndicator?: boolean;
|
|
22
|
-
rowsPerPageLabel?: string;
|
|
23
22
|
menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;
|
|
24
23
|
selectable?: boolean;
|
|
25
24
|
onSelectionChange?: (value: any | any[]) => void;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
3
5
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
6
|
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
@@ -7,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
9
|
});
|
|
8
10
|
exports.default = void 0;
|
|
9
11
|
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
+
|
|
10
16
|
var React = _interopRequireWildcard(require("react"));
|
|
11
17
|
|
|
12
18
|
var _TogglerStyles = require("./TogglerStyles");
|
|
@@ -17,18 +23,17 @@ var _common = require("../common");
|
|
|
17
23
|
|
|
18
24
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
25
|
|
|
26
|
+
var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
|
|
27
|
+
|
|
20
28
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
29
|
|
|
22
30
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
23
31
|
|
|
24
|
-
|
|
25
|
-
* Import React libraries.
|
|
26
|
-
*/
|
|
32
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
27
33
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
*/
|
|
31
|
-
var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
34
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
35
|
+
|
|
36
|
+
var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
32
37
|
var _size;
|
|
33
38
|
|
|
34
39
|
var id = _ref.id,
|
|
@@ -37,7 +42,9 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
|
37
42
|
label = _ref.label,
|
|
38
43
|
isSemantic = _ref.isSemantic,
|
|
39
44
|
size = _ref.size,
|
|
40
|
-
onToggle = _ref.onToggle
|
|
45
|
+
onToggle = _ref.onToggle,
|
|
46
|
+
className = _ref.className,
|
|
47
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
41
48
|
|
|
42
49
|
/**
|
|
43
50
|
* Does all required pre-requisites and toggles the switcher state.
|
|
@@ -49,19 +56,20 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
|
49
56
|
onToggle(!selected);
|
|
50
57
|
};
|
|
51
58
|
|
|
52
|
-
var focusVisibleRef = (0, _common.useFocusVisibleRef)();
|
|
59
|
+
var focusVisibleRef = (0, _common.useFocusVisibleRef)([], ref);
|
|
53
60
|
size = (_size = size) !== null && _size !== void 0 ? _size : _.Size.Medium;
|
|
54
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TogglerStyles.StyledSwitch, {
|
|
61
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TogglerStyles.StyledSwitch, _objectSpread(_objectSpread({
|
|
55
62
|
ref: focusVisibleRef,
|
|
56
63
|
onClick: function onClick(e) {
|
|
57
64
|
return toggle();
|
|
58
65
|
},
|
|
59
|
-
|
|
60
|
-
return e.key === 'Enter' && toggle();
|
|
66
|
+
onKeyDown: function onKeyDown(e) {
|
|
67
|
+
return (e.key === 'Enter' || e.key === ' ') && toggle();
|
|
61
68
|
},
|
|
62
|
-
className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
|
|
69
|
+
className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(className ? " ".concat(className) : ''),
|
|
63
70
|
selected: selected,
|
|
64
|
-
tabIndex: disabled ? -1 : 0
|
|
71
|
+
tabIndex: disabled ? -1 : 0
|
|
72
|
+
}, rest), {}, {
|
|
65
73
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitchContainer, {
|
|
66
74
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitch, {
|
|
67
75
|
className: isSemantic ? 'semantic' : ''
|
|
@@ -71,9 +79,8 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
|
71
79
|
htmlFor: id,
|
|
72
80
|
children: label
|
|
73
81
|
})]
|
|
74
|
-
});
|
|
75
|
-
};
|
|
76
|
-
|
|
82
|
+
}));
|
|
83
|
+
});
|
|
77
84
|
var _default = ToggleSwitch;
|
|
78
85
|
exports.default = _default;
|
|
79
86
|
//# sourceMappingURL=ToggleSwitch.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","id","disabled","selected","label","isSemantic","size","onToggle","toggle","focusVisibleRef","Size","Medium","e","key","toString","toLowerCase","concat"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["ToggleSwitch","React","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","Size","Medium","e","key","toString","toLowerCase","concat"],"mappings":";;;;;;;;;;;;;;;AAGA;;AAUA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,YAAY,gBAAGC,KAAK,CAACC,UAAN,CAAiB,gBAUuBC,GAVvB,EAU+B;AAAA;;AAAA,MAT5BC,EAS4B,QAT5BA,EAS4B;AAAA,MAR5BC,QAQ4B,QAR5BA,QAQ4B;AAAA,MAP5BC,QAO4B,QAP5BA,QAO4B;AAAA,MAN5BC,KAM4B,QAN5BA,KAM4B;AAAA,MAL5BC,UAK4B,QAL5BA,UAK4B;AAAA,MAJ5BC,IAI4B,QAJ5BA,IAI4B;AAAA,MAH5BC,QAG4B,QAH5BA,QAG4B;AAAA,MAF5BC,SAE4B,QAF5BA,SAE4B;AAAA,MADzBC,IACyB;;AACnE;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIR,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAQA,MAAMQ,eAAe,GAAG,gCAAmB,EAAnB,EAAuBX,GAAvB,CAAxB;AAEAM,EAAAA,IAAI,YAAGA,IAAH,yCAAWM,OAAKC,MAApB;AAEA,sBACE,sBAAC,2BAAD;AACE,IAAA,GAAG,EAAEF,eADP;AAEE,IAAA,OAAO,EAAE,iBAAAG,CAAC;AAAA,aAAIJ,MAAM,EAAV;AAAA,KAFZ;AAGE,IAAA,SAAS,EAAE,mBAAAI,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwCL,MAAM,EAAlD;AAAA,KAHd;AAIE,IAAA,SAAS,EAAEJ,IAAI,CACZU,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDhB,QAAQ,GAAG,WAAH,GAAiB,EAHxB,EAIRgB,MAJQ,CAIDV,SAAS,cAAOA,SAAP,IAAqB,EAJ7B,CAJb;AASE,IAAA,QAAQ,EAAEL,QATZ;AAUE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ;AAV5B,KAWMO,IAXN;AAAA,4BAYE,qBAAC,oCAAD;AAAA,6BACE,qBAAC,2BAAD;AAAQ,QAAA,SAAS,EAAEJ,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MAZF,EAeGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAhBJ;AAAA,KADF;AAuBD,CAjDoB,CAArB;eAmDeP,Y","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport {ToggleSwitchProps} from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\nimport {Size} from '..';\nimport {useFocusVisibleRef} from '../common';\n\nconst ToggleSwitch = React.forwardRef(({\n id,\n disabled,\n selected,\n label,\n isSemantic,\n size,\n onToggle,\n className,\n ...rest\n }: ToggleSwitchProps, ref) => {\n /**\n * Does all required pre-requisites and toggles the switcher state.\n */\n const toggle = () => {\n // If disabled, don't do anything\n if (disabled) return;\n\n // Toggle state change\n onToggle(!selected);\n };\n\n const focusVisibleRef = useFocusVisibleRef([], ref);\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={e => toggle()}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')\n .concat(className ? ` ${className}` : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n {...rest}>\n <ToggleSwitchContainer>\n <Switch className={isSemantic ? 'semantic' : ''}/>\n </ToggleSwitchContainer>\n {label && (\n <label className={'label'} htmlFor={id}>\n {label}\n </label>\n )}\n </StyledSwitch>\n );\n});\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.cjs"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Import React libraries.
|
|
3
|
+
*/
|
|
4
|
+
import * as React from 'react';
|
|
1
5
|
/**
|
|
2
6
|
* Import custom types.
|
|
3
7
|
*/
|
|
4
8
|
import { ToggleSwitchProps } from './TogglerTypes';
|
|
5
|
-
declare const ToggleSwitch:
|
|
9
|
+
declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<unknown>>;
|
|
6
10
|
export default ToggleSwitch;
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
|
|
4
|
+
|
|
5
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
+
|
|
7
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
8
|
+
|
|
1
9
|
/**
|
|
2
10
|
* Import React libraries.
|
|
3
11
|
*/
|
|
@@ -14,8 +22,7 @@ import { Size } from '..';
|
|
|
14
22
|
import { useFocusVisibleRef } from '../common';
|
|
15
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
24
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
|
|
18
|
-
var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
25
|
+
var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
19
26
|
var _size;
|
|
20
27
|
|
|
21
28
|
var id = _ref.id,
|
|
@@ -24,7 +31,9 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
|
24
31
|
label = _ref.label,
|
|
25
32
|
isSemantic = _ref.isSemantic,
|
|
26
33
|
size = _ref.size,
|
|
27
|
-
onToggle = _ref.onToggle
|
|
34
|
+
onToggle = _ref.onToggle,
|
|
35
|
+
className = _ref.className,
|
|
36
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
28
37
|
|
|
29
38
|
/**
|
|
30
39
|
* Does all required pre-requisites and toggles the switcher state.
|
|
@@ -36,19 +45,20 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
|
36
45
|
onToggle(!selected);
|
|
37
46
|
};
|
|
38
47
|
|
|
39
|
-
var focusVisibleRef = useFocusVisibleRef();
|
|
48
|
+
var focusVisibleRef = useFocusVisibleRef([], ref);
|
|
40
49
|
size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
|
|
41
|
-
return /*#__PURE__*/_jsxs(StyledSwitch, {
|
|
50
|
+
return /*#__PURE__*/_jsxs(StyledSwitch, _objectSpread(_objectSpread({
|
|
42
51
|
ref: focusVisibleRef,
|
|
43
52
|
onClick: function onClick(e) {
|
|
44
53
|
return toggle();
|
|
45
54
|
},
|
|
46
|
-
|
|
47
|
-
return e.key === 'Enter' && toggle();
|
|
55
|
+
onKeyDown: function onKeyDown(e) {
|
|
56
|
+
return (e.key === 'Enter' || e.key === ' ') && toggle();
|
|
48
57
|
},
|
|
49
|
-
className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
|
|
58
|
+
className: size.toString().toLowerCase().concat(disabled ? ' disabled' : '').concat(className ? " ".concat(className) : ''),
|
|
50
59
|
selected: selected,
|
|
51
|
-
tabIndex: disabled ? -1 : 0
|
|
60
|
+
tabIndex: disabled ? -1 : 0
|
|
61
|
+
}, rest), {}, {
|
|
52
62
|
children: [/*#__PURE__*/_jsx(ToggleSwitchContainer, {
|
|
53
63
|
children: /*#__PURE__*/_jsx(Switch, {
|
|
54
64
|
className: isSemantic ? 'semantic' : ''
|
|
@@ -58,8 +68,7 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
|
|
|
58
68
|
htmlFor: id,
|
|
59
69
|
children: label
|
|
60
70
|
})]
|
|
61
|
-
});
|
|
62
|
-
};
|
|
63
|
-
|
|
71
|
+
}));
|
|
72
|
+
});
|
|
64
73
|
export default ToggleSwitch;
|
|
65
74
|
//# sourceMappingURL=ToggleSwitch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","useFocusVisibleRef","id","disabled","selected","label","isSemantic","size","onToggle","toggle","focusVisibleRef","Medium","e","key","toString","toLowerCase","concat"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,
|
|
1
|
+
{"version":3,"sources":["../../src/Toggles/ToggleSwitch.tsx"],"names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","useFocusVisibleRef","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","Medium","e","key","toString","toLowerCase","concat"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAAQC,qBAAR,EAA+BC,YAAY,IAAIC,MAA/C,EAAuDC,YAAvD,QAA0E,iBAA1E;AACA,SAAQC,IAAR,QAAmB,IAAnB;AACA,SAAQC,kBAAR,QAAiC,WAAjC;;;AAEA,IAAMJ,YAAY,gBAAGF,KAAK,CAACO,UAAN,CAAiB,gBAUuBC,GAVvB,EAU+B;AAAA;;AAAA,MAT5BC,EAS4B,QAT5BA,EAS4B;AAAA,MAR5BC,QAQ4B,QAR5BA,QAQ4B;AAAA,MAP5BC,QAO4B,QAP5BA,QAO4B;AAAA,MAN5BC,KAM4B,QAN5BA,KAM4B;AAAA,MAL5BC,UAK4B,QAL5BA,UAK4B;AAAA,MAJ5BC,IAI4B,QAJ5BA,IAI4B;AAAA,MAH5BC,QAG4B,QAH5BA,QAG4B;AAAA,MAF5BC,SAE4B,QAF5BA,SAE4B;AAAA,MADzBC,IACyB;;AACnE;AACF;AACA;AACE,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB;AACA,QAAIR,QAAJ,EAAc,OAFK,CAInB;;AACAK,IAAAA,QAAQ,CAAC,CAACJ,QAAF,CAAR;AACD,GAND;;AAQA,MAAMQ,eAAe,GAAGb,kBAAkB,CAAC,EAAD,EAAKE,GAAL,CAA1C;AAEAM,EAAAA,IAAI,YAAGA,IAAH,yCAAWT,IAAI,CAACe,MAApB;AAEA,sBACE,MAAC,YAAD;AACE,IAAA,GAAG,EAAED,eADP;AAEE,IAAA,OAAO,EAAE,iBAAAE,CAAC;AAAA,aAAIH,MAAM,EAAV;AAAA,KAFZ;AAGE,IAAA,SAAS,EAAE,mBAAAG,CAAC;AAAA,aAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwCJ,MAAM,EAAlD;AAAA,KAHd;AAIE,IAAA,SAAS,EAAEJ,IAAI,CACZS,QADQ,GAERC,WAFQ,GAGRC,MAHQ,CAGDf,QAAQ,GAAG,WAAH,GAAiB,EAHxB,EAIRe,MAJQ,CAIDT,SAAS,cAAOA,SAAP,IAAqB,EAJ7B,CAJb;AASE,IAAA,QAAQ,EAAEL,QATZ;AAUE,IAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ;AAV5B,KAWMO,IAXN;AAAA,4BAYE,KAAC,qBAAD;AAAA,6BACE,KAAC,MAAD;AAAQ,QAAA,SAAS,EAAEJ,UAAU,GAAG,UAAH,GAAgB;AAA7C;AADF,MAZF,EAeGD,KAAK,iBACJ;AAAO,MAAA,SAAS,EAAE,OAAlB;AAA2B,MAAA,OAAO,EAAEH,EAApC;AAAA,gBACGG;AADH,MAhBJ;AAAA,KADF;AAuBD,CAjDoB,CAArB;AAmDA,eAAeV,YAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport {ToggleSwitchProps} from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\nimport {Size} from '..';\nimport {useFocusVisibleRef} from '../common';\n\nconst ToggleSwitch = React.forwardRef(({\n id,\n disabled,\n selected,\n label,\n isSemantic,\n size,\n onToggle,\n className,\n ...rest\n }: ToggleSwitchProps, ref) => {\n /**\n * Does all required pre-requisites and toggles the switcher state.\n */\n const toggle = () => {\n // If disabled, don't do anything\n if (disabled) return;\n\n // Toggle state change\n onToggle(!selected);\n };\n\n const focusVisibleRef = useFocusVisibleRef([], ref);\n\n size = size ?? Size.Medium;\n\n return (\n <StyledSwitch\n ref={focusVisibleRef}\n onClick={e => toggle()}\n onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n className={size\n .toString()\n .toLowerCase()\n .concat(disabled ? ' disabled' : '')\n .concat(className ? ` ${className}` : '')}\n selected={selected}\n tabIndex={disabled ? -1 : 0}\n {...rest}>\n <ToggleSwitchContainer>\n <Switch className={isSemantic ? 'semantic' : ''}/>\n </ToggleSwitchContainer>\n {label && (\n <label className={'label'} htmlFor={id}>\n {label}\n </label>\n )}\n </StyledSwitch>\n );\n});\n\nexport default ToggleSwitch;\n"],"file":"ToggleSwitch.js"}
|
|
@@ -2,7 +2,7 @@ import { Size } from '..';
|
|
|
2
2
|
/**
|
|
3
3
|
* Types for the table.
|
|
4
4
|
*/
|
|
5
|
-
export interface ToggleSwitchProps {
|
|
5
|
+
export interface ToggleSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'onClick' | 'tabIndex'> {
|
|
6
6
|
id: string;
|
|
7
7
|
label?: string;
|
|
8
8
|
disabled?: boolean;
|