@laerdal/life-react-components 1.11.0-dev.1.full → 1.11.0-dev.5

package/dist/Table/TableStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"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, scrollBarStyling} 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';\nimport {Size} from \"../types\";\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.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\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 StyledTableHeaderRow = styled.thead`\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 StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\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.div`\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(255, 255, 255, 0.75);\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\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;"],"file":"TableStyles.js"}
+{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"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, scrollBarStyling} 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';\nimport {Size} from \"../types\";\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.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\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 StyledTableHeaderRow = styled.thead`\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 StyledTableHeaderColumnSortDirection = styled.span`\n  width: 24px;\n  height: 24px;\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 StyledTableNoRowsLabelRow = styled.tr`\n  position: relative;\n  outline: none;\n  background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n  ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_50};\n  }\n\n  ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n    background-color: ${COLORS.neutral_20};\n  }\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.div`\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(255, 255, 255, 0.75);\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\n\nexport const StyledTableBodyWrapper = styled.div`\n  overflow-x: auto;\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 6px;\n  }\n\n  &.scrollable{\n    margin-bottom: 6px;\n    padding-bottom: 10px;\n  }\n`;\n"],"file":"TableStyles.js"}

package/dist/Table/TableTypes.d.ts

@@ -17,7 +17,7 @@ export interface TableProps {
     onPreviousPageClick?: () => void;
     onNextPageClick?: () => void;
     onRowsPerPageChange?: (count: number) => void;
-    onTriggerSortingChange?: (key: string, direction: TableSortingDirection) => void;
+    onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void;
     showLoadingIndicator?: boolean;
     rowsPerPageLabel?: string;
     noRowsLabel?: string;
@@ -45,7 +45,6 @@ export interface TableColumn {
     additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled'> | Pick<HyperlinkProps, 'variant'>;
     customContent?: (row: any, key: string) => any;
     sortable?: boolean;
-    sortingDirection?: TableSortingDirection;
 }
 export declare type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
 export declare type TableJustification = 'right' | 'left' | 'center';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.11.0-dev.1.full",
+  "version": "1.11.0-dev.5",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [