@elliemae/ds-data-table 3.26.0 → 3.26.1-rc.1
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/cjs/parts/TableContent.js +3 -2
- package/dist/cjs/parts/TableContent.js.map +2 -2
- package/dist/cjs/styled.js +4 -0
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/parts/TableContent.js +4 -3
- package/dist/esm/parts/TableContent.js.map +2 -2
- package/dist/esm/styled.js +4 -0
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/styled.d.ts +1 -0
- package/package.json +27 -27
|
@@ -47,7 +47,8 @@ const TableContent = () => {
|
|
|
47
47
|
isShiftPressed,
|
|
48
48
|
setIsShiftPressed,
|
|
49
49
|
paginationHelpers: { hasPagination },
|
|
50
|
-
tableProps: { isLoading, isSkeleton, height }
|
|
50
|
+
tableProps: { isLoading, isSkeleton, height },
|
|
51
|
+
setFocusedRowId
|
|
51
52
|
} = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
|
|
52
53
|
const handleOnKeyDown = (0, import_react.useCallback)(
|
|
53
54
|
(e) => {
|
|
@@ -77,7 +78,7 @@ const TableContent = () => {
|
|
|
77
78
|
children: isSkeleton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SkeletonTable.SkeletonTable, { height }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VirtualRowsList.VirtualRowsList, {})
|
|
78
79
|
}
|
|
79
80
|
),
|
|
80
|
-
hasPagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.Pagination, {}) : null
|
|
81
|
+
hasPagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPaginationWrapper, { onFocus: () => setFocusedRowId(null), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.Pagination, {}) }) : null
|
|
81
82
|
]
|
|
82
83
|
}
|
|
83
84
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TableContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled.js';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { Pagination } from '../addons/Pagination/index.js';\nimport { VirtualRowsList } from './VirtualRowsList.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SkeletonTable } from './SkeletonTable.js';\nexport const TableContent = () => {\n const {\n allDataFlattened,\n visibleColumns,\n isShiftPressed,\n setIsShiftPressed,\n paginationHelpers: { hasPagination },\n tableProps: { isLoading, isSkeleton, height },\n } = useContext(DataTableContext);\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.shiftKey);\n },\n [setIsShiftPressed],\n );\n\n const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n return (\n <StyledDataTableContentWrapper\n data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n noSelectionAllowed={isShiftPressed}\n onKeyDown={handleOnKeyDown}\n onKeyUp={handleOnKeyUp}\n rows={hasPagination ? ['1fr', 'auto'] : ['auto']}\n cols={['100%']}\n >\n <StyledTableWrapper\n role=\"table\"\n aria-rowcount={allDataFlattened.length}\n aria-colcount={visibleColumns.length}\n data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n aria-busy={isLoading || isSkeleton}\n >\n {isSkeleton ? <SkeletonTable height={height} /> : <VirtualRowsList />}\n </StyledTableWrapper>\n {hasPagination ? <Pagination
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper, StyledPaginationWrapper } from '../styled.js';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { Pagination } from '../addons/Pagination/index.js';\nimport { VirtualRowsList } from './VirtualRowsList.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SkeletonTable } from './SkeletonTable.js';\nexport const TableContent = () => {\n const {\n allDataFlattened,\n visibleColumns,\n isShiftPressed,\n setIsShiftPressed,\n paginationHelpers: { hasPagination },\n tableProps: { isLoading, isSkeleton, height },\n setFocusedRowId,\n } = useContext(DataTableContext);\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.shiftKey);\n },\n [setIsShiftPressed],\n );\n\n const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n return (\n <StyledDataTableContentWrapper\n data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n noSelectionAllowed={isShiftPressed}\n onKeyDown={handleOnKeyDown}\n onKeyUp={handleOnKeyUp}\n rows={hasPagination ? ['1fr', 'auto'] : ['auto']}\n cols={['100%']}\n >\n <StyledTableWrapper\n role=\"table\"\n aria-rowcount={allDataFlattened.length}\n aria-colcount={visibleColumns.length}\n data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n aria-busy={isLoading || isSkeleton}\n >\n {isSkeleton ? <SkeletonTable height={height} /> : <VirtualRowsList />}\n </StyledTableWrapper>\n {hasPagination ? (\n <StyledPaginationWrapper onFocus={() => setFocusedRowId(null)}>\n <Pagination />\n </StyledPaginationWrapper>\n ) : null}\n </StyledDataTableContentWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BnB;AA7BJ,mBAA+C;AAE/C,oBAA2F;AAC3F,8BAAiC;AACjC,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA4B;AAC5B,2BAA8B;AACvB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,cAAc;AAAA,IACnC,YAAY,EAAE,WAAW,YAAY,OAAO;AAAA,IAC5C;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,QAAM,sBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,gBAAgB,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC/C,MAAM,CAAC,MAAM;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,6BAAY;AAAA,YACzB,aAAW,aAAa;AAAA,YAEvB,uBAAa,4CAAC,sCAAc,QAAgB,IAAK,4CAAC,0CAAgB;AAAA;AAAA,QACrE;AAAA,QACC,gBACC,4CAAC,yCAAwB,SAAS,MAAM,gBAAgB,IAAI,GAC1D,sDAAC,gCAAW,GACd,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -44,6 +44,7 @@ __export(styled_exports, {
|
|
|
44
44
|
StyledHeadTr: () => StyledHeadTr,
|
|
45
45
|
StyledHeadWrapper: () => StyledHeadWrapper,
|
|
46
46
|
StyledHeaderRightIconsWrapper: () => StyledHeaderRightIconsWrapper,
|
|
47
|
+
StyledPaginationWrapper: () => StyledPaginationWrapper,
|
|
47
48
|
StyledPencilIcon: () => StyledPencilIcon,
|
|
48
49
|
StyledResizer: () => StyledResizer,
|
|
49
50
|
StyledTableContentWrapper: () => StyledTableContentWrapper,
|
|
@@ -96,6 +97,9 @@ const StyledTableWrapper = import_ds_system.styled.div`
|
|
|
96
97
|
width: 100%;
|
|
97
98
|
height: 100%;
|
|
98
99
|
`;
|
|
100
|
+
const StyledPaginationWrapper = import_ds_system.styled.div`
|
|
101
|
+
width: 100%;
|
|
102
|
+
`;
|
|
99
103
|
const StyledTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
100
104
|
position: relative;
|
|
101
105
|
${({ height = "auto" }) => `
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${color ?? theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n }\n svg {\n fill: ${(props) => props.theme.colors.brand['800']};\n }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number }>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height) as string};\n `}\n width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n overflow: auto;\n height: 100%;\n --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\n colsLayoutStyle: string;\n}>`\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid)<{\n isExpandable: boolean;\n colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n grid-template-columns: var(--grid-layout);\n border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{\n isDraggingActive?: boolean;\n column: DSDataTableT.InternalColumn;\n shouldShowDnD?: boolean;\n}>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n height: 100%;\n display: flex;\n align-items: center;\n max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n border: none;\n outline: none;\n\n &:hover,\n &:focus,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n input {\n appearance: none;\n cursor: col-resize;\n background-image: transparent;\n padding: 0;\n border-radius: 0;\n\n &:focus::-webkit-slider-runnable-track {\n background: transparent;\n }\n\n &:focus-visible {\n background: brand-700;\n ::-webkit-slider-runnable-track {\n background: transparent;\n }\n }\n\n &::-webkit-slider-runnable-track {\n background: transparent;\n }\n\n &::-webkit-slider-thumb {\n appearance: none;\n background: transparent;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n background: transparent;\n border: none;\n }\n }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background: white;\n`;\n\nexport const StyledCell = styled.div`\n ${cellPadding}\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n display: grid;\n justify-self: flex-end;\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon?: boolean }>`\n width: 100%;\n height: 100%;\n align-items: center;\n & ${StyledPencilIcon} {\n display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n }\n &:hover {\n ${StyledPencilIcon} {\n display: block;\n }\n }\n &:focus {\n ${styledFocusCss}\n ${StyledPencilIcon} {\n display: block;\n }\n }\n outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)<{ minHeight: string }>`\n position: relative;\n z-index: ${ZIndexDataTable.ROW};\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n position: relative;\n background-color: ${({ theme }) => theme.colors.brand[200]};\n align-items: center;\n padding-left: ${(props) => props.paddingLeft};\n border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{\n backgroundColor?: string;\n isDragOverlay?: boolean;\n isDragging?: boolean;\n isDisabled?: boolean;\n isDropValid?: boolean;\n shouldDisplayHover?: boolean;\n isDropIndicatorPositionInside?: boolean;\n minHeight?: string;\n gridTemplateColumns?: string;\n}>`\n position: relative;\n z-index: 2;\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n\n width: 100%;\n ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n grid-template-columns: ${(props) =>\n props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : props.gridTemplateColumns ?? `var(--grid-layout)`};\n\n background-color: ${({ backgroundColor, isDragging, theme }) =>\n isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n outline: none;\n\n :focus {\n ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n }\n\n ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n if (!isDropIndicatorPositionInside) return '';\n return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n }}\n\n ${({ shouldDisplayHover, theme, isDisabled }) =>\n shouldDisplayHover && !isDisabled\n ? `:hover {\n background-color: ${theme.colors.brand[200]};\n }`\n : ''}\n\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n ${(props) =>\n !props.selected\n ? ''\n : `\n background-color: ${props.theme.colors.brand[200]};\n border: 1px solid ${props.theme.colors.brand[500]};\n `}\n\n ${GroupHeaderTitle} {\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n }\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n svg {\n fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAmC;AACnC,qBAAqB;AACrB,sBAA2B;AAC3B,qBAAsD;AACtD,kCAAgC;AAChC,uBAAgC;AAEhC,gCAA4B;AAO5B,MAAM,iBAAiB,CAAC,EAAE,MAAM,GAAqB,UAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBASlD,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,aAExC,4CAAgB;AAAA;AAGtB,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA,MAEtC,CAAC,UAAW,MAAM,YAAY,KAAK,eAAe,KAAK;AAAA;AAAA;AAAA,YAGjD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAI9C,MAAM,6BAAyB,yBAAO,mBAAI;AAAA,WACtC,CAAC,cAAU,0BAAU,MAAM,SAAS,OAAO;AAAA,YAC1C,CAAC,cAAU,0BAAU,MAAM,UAAU,OAAO;AAAA;AAGjD,MAAM,oCAAgC,yBAAO,mBAAI;AAAA,iBACvC,CAAC,EAAE,mBAAmB,MAAO,qBAAqB,SAAS;AAAA;AAAA;AAIrE,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${color ?? theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n }\n svg {\n fill: ${(props) => props.theme.colors.brand['800']};\n }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled.div`\n width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number }>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height) as string};\n `}\n width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n overflow: auto;\n height: 100%;\n --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\n colsLayoutStyle: string;\n}>`\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid)<{\n isExpandable: boolean;\n colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n grid-template-columns: var(--grid-layout);\n border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{\n isDraggingActive?: boolean;\n column: DSDataTableT.InternalColumn;\n shouldShowDnD?: boolean;\n}>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n height: 100%;\n display: flex;\n align-items: center;\n max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n border: none;\n outline: none;\n\n &:hover,\n &:focus,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n input {\n appearance: none;\n cursor: col-resize;\n background-image: transparent;\n padding: 0;\n border-radius: 0;\n\n &:focus::-webkit-slider-runnable-track {\n background: transparent;\n }\n\n &:focus-visible {\n background: brand-700;\n ::-webkit-slider-runnable-track {\n background: transparent;\n }\n }\n\n &::-webkit-slider-runnable-track {\n background: transparent;\n }\n\n &::-webkit-slider-thumb {\n appearance: none;\n background: transparent;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n background: transparent;\n border: none;\n }\n }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background: white;\n`;\n\nexport const StyledCell = styled.div`\n ${cellPadding}\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n display: grid;\n justify-self: flex-end;\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon?: boolean }>`\n width: 100%;\n height: 100%;\n align-items: center;\n & ${StyledPencilIcon} {\n display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n }\n &:hover {\n ${StyledPencilIcon} {\n display: block;\n }\n }\n &:focus {\n ${styledFocusCss}\n ${StyledPencilIcon} {\n display: block;\n }\n }\n outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)<{ minHeight: string }>`\n position: relative;\n z-index: ${ZIndexDataTable.ROW};\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n position: relative;\n background-color: ${({ theme }) => theme.colors.brand[200]};\n align-items: center;\n padding-left: ${(props) => props.paddingLeft};\n border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{\n backgroundColor?: string;\n isDragOverlay?: boolean;\n isDragging?: boolean;\n isDisabled?: boolean;\n isDropValid?: boolean;\n shouldDisplayHover?: boolean;\n isDropIndicatorPositionInside?: boolean;\n minHeight?: string;\n gridTemplateColumns?: string;\n}>`\n position: relative;\n z-index: 2;\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n\n width: 100%;\n ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n grid-template-columns: ${(props) =>\n props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : props.gridTemplateColumns ?? `var(--grid-layout)`};\n\n background-color: ${({ backgroundColor, isDragging, theme }) =>\n isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n outline: none;\n\n :focus {\n ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n }\n\n ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n if (!isDropIndicatorPositionInside) return '';\n return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n }}\n\n ${({ shouldDisplayHover, theme, isDisabled }) =>\n shouldDisplayHover && !isDisabled\n ? `:hover {\n background-color: ${theme.colors.brand[200]};\n }`\n : ''}\n\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n ${(props) =>\n !props.selected\n ? ''\n : `\n background-color: ${props.theme.colors.brand[200]};\n border: 1px solid ${props.theme.colors.brand[500]};\n `}\n\n ${GroupHeaderTitle} {\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n }\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n svg {\n fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAmC;AACnC,qBAAqB;AACrB,sBAA2B;AAC3B,qBAAsD;AACtD,kCAAgC;AAChC,uBAAgC;AAEhC,gCAA4B;AAO5B,MAAM,iBAAiB,CAAC,EAAE,MAAM,GAAqB,UAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBASlD,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,aAExC,4CAAgB;AAAA;AAGtB,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA,MAEtC,CAAC,UAAW,MAAM,YAAY,KAAK,eAAe,KAAK;AAAA;AAAA;AAAA,YAGjD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAI9C,MAAM,6BAAyB,yBAAO,mBAAI;AAAA,WACtC,CAAC,cAAU,0BAAU,MAAM,SAAS,OAAO;AAAA,YAC1C,CAAC,cAAU,0BAAU,MAAM,UAAU,OAAO;AAAA;AAGjD,MAAM,oCAAgC,yBAAO,mBAAI;AAAA,iBACvC,CAAC,EAAE,mBAAmB,MAAO,qBAAqB,SAAS;AAAA;AAAA;AAIrE,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlC,MAAM,0BAA0B,wBAAO;AAAA;AAAA;AAIvC,MAAM,gCAA4B,yBAAO,mBAAI;AAAA;AAAA,IAEhD,CAAC,EAAE,SAAS,OAAO,MAAM;AAAA,gBACjB,0BAAU,MAAM;AAAA;AAAA;AAAA;AAKrB,MAAM,+BAA2B,yBAAO,mBAAI;AAAA;AAAA;AAAA,mBAGhC,CAAC,UAAU,MAAM,WAAW,IAAI,CAAC,QAAQ,aAAa,MAAM,EAAE,KAAK,GAAG;AAAA,mBACtE,CAAC,cAAU,0BAAU,MAAM,iBAAiB;AAAA;AAGxD,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUrC,MAAM,mBAAe,yBAAO,mBAAI;AAAA,IAInC,CAAC,UAAW,MAAM,oBAAoB,iCAAgB,OAAO,eAAe;AAAA;AAAA,4BAEpD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,6BAC1C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIjE,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAW/B;AAAA;AAAA;AAAA;AAAA,aAIS,4CAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzB,CAAC,UACD,MAAM,mBACF,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAS+B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,uBAE5C,4CAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAcb,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,iBAEhD,4CAAgB;AAAA;AAAA;AAAA;AAK1B,MAAM,gCAAgC,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO7C,MAAM,oBAAgB,yBAAO,qCAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyDxC,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,aAAa,wBAAO;AAAA,IAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAOG,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASjC,MAAM,uBAAmB,yBAAO,0BAAU;AAE1C,MAAM,8BAA0B,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,MAI5C;AAAA,eACS,CAAC,EAAE,sBAAsB,MAAO,wBAAwB,UAAU;AAAA;AAAA;AAAA,MAG3E;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA;AAAA,MACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQC,MAAM,yBAAqB,yBAAO,mBAAI;AAAA;AAAA,aAEhC,4CAAgB;AAAA;AAAA,gBAEb,CAAC,UAAU,MAAM,aAAa;AAAA,YAClC,CAAC,UAAU,MAAM,UAAU;AAAA;AAGhC,MAAM,2BAAuB,yBAAO,mBAAI;AAAA;AAAA,sBAEzB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,kBAEzC,CAAC,UAAU,MAAM;AAAA,0BACT,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAGxD,MAAM,mBAAmB,wBAAO;AAAA,iBACtB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,WAEzC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG7C,MAAM,0BAAsB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,gBAc9B,CAAC,UAAU,MAAM,aAAa;AAAA,YAClC,CAAC,UAAU,MAAM,UAAU;AAAA;AAAA;AAAA,IAGnC,CAAC,UAAW,MAAM,gBAAgB,wBAAwB;AAAA;AAAA,2BAEnC,CAAC,UACxB,MAAM,gBAAgB,oCAAoC,MAAM,uBAAuB;AAAA;AAAA,sBAErE,CAAC,EAAE,iBAAiB,YAAY,MAAM,MACxD,aAAa,MAAM,OAAO,QAAQ,GAAG,IAAI,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,MAK1D,CAAC,UAAW,MAAM,gBAAgB,KAAK,eAAe,KAAK;AAAA;AAAA;AAAA,IAG7D,CAAC,EAAE,+BAA+B,aAAa,MAAM,MAAM;AAC3D,MAAI,CAAC;AAA+B,WAAO;AAC3C,SAAO,eAAe,EAAE,MAAM,GAAG,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG,CAAC;AACnG;AAAA;AAAA,IAEE,CAAC,EAAE,oBAAoB,OAAO,WAAW,MACzC,sBAAsB,CAAC,aACnB;AAAA,gCACwB,MAAM,OAAO,MAAM,GAAG;AAAA,eAE9C;AAAA;AAAA,4BAEoB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA;AAAA,aAErE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA;AAAA,IAE9C,CAAC,UACD,CAAC,MAAM,WACH,KACA;AAAA,wBACgB,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,wBAC5B,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,IAGhD;AAAA,aACS,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA,WAErG,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,YAGlE,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAItG,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useContext, useCallback } from "react";
|
|
4
|
-
import { StyledTableWrapper, StyledDataTableContentWrapper } from "../styled.js";
|
|
4
|
+
import { StyledTableWrapper, StyledDataTableContentWrapper, StyledPaginationWrapper } from "../styled.js";
|
|
5
5
|
import { DataTableContext } from "../DataTableContext.js";
|
|
6
6
|
import { Pagination } from "../addons/Pagination/index.js";
|
|
7
7
|
import { VirtualRowsList } from "./VirtualRowsList.js";
|
|
@@ -14,7 +14,8 @@ const TableContent = () => {
|
|
|
14
14
|
isShiftPressed,
|
|
15
15
|
setIsShiftPressed,
|
|
16
16
|
paginationHelpers: { hasPagination },
|
|
17
|
-
tableProps: { isLoading, isSkeleton, height }
|
|
17
|
+
tableProps: { isLoading, isSkeleton, height },
|
|
18
|
+
setFocusedRowId
|
|
18
19
|
} = useContext(DataTableContext);
|
|
19
20
|
const handleOnKeyDown = useCallback(
|
|
20
21
|
(e) => {
|
|
@@ -44,7 +45,7 @@ const TableContent = () => {
|
|
|
44
45
|
children: isSkeleton ? /* @__PURE__ */ jsx(SkeletonTable, { height }) : /* @__PURE__ */ jsx(VirtualRowsList, {})
|
|
45
46
|
}
|
|
46
47
|
),
|
|
47
|
-
hasPagination ? /* @__PURE__ */ jsx(Pagination, {}) : null
|
|
48
|
+
hasPagination ? /* @__PURE__ */ jsx(StyledPaginationWrapper, { onFocus: () => setFocusedRowId(null), children: /* @__PURE__ */ jsx(Pagination, {}) }) : null
|
|
48
49
|
]
|
|
49
50
|
}
|
|
50
51
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TableContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled.js';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { Pagination } from '../addons/Pagination/index.js';\nimport { VirtualRowsList } from './VirtualRowsList.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SkeletonTable } from './SkeletonTable.js';\nexport const TableContent = () => {\n const {\n allDataFlattened,\n visibleColumns,\n isShiftPressed,\n setIsShiftPressed,\n paginationHelpers: { hasPagination },\n tableProps: { isLoading, isSkeleton, height },\n } = useContext(DataTableContext);\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.shiftKey);\n },\n [setIsShiftPressed],\n );\n\n const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n return (\n <StyledDataTableContentWrapper\n data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n noSelectionAllowed={isShiftPressed}\n onKeyDown={handleOnKeyDown}\n onKeyUp={handleOnKeyUp}\n rows={hasPagination ? ['1fr', 'auto'] : ['auto']}\n cols={['100%']}\n >\n <StyledTableWrapper\n role=\"table\"\n aria-rowcount={allDataFlattened.length}\n aria-colcount={visibleColumns.length}\n data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n aria-busy={isLoading || isSkeleton}\n >\n {isSkeleton ? <SkeletonTable height={height} /> : <VirtualRowsList />}\n </StyledTableWrapper>\n {hasPagination ? <Pagination
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper, StyledPaginationWrapper } from '../styled.js';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { Pagination } from '../addons/Pagination/index.js';\nimport { VirtualRowsList } from './VirtualRowsList.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SkeletonTable } from './SkeletonTable.js';\nexport const TableContent = () => {\n const {\n allDataFlattened,\n visibleColumns,\n isShiftPressed,\n setIsShiftPressed,\n paginationHelpers: { hasPagination },\n tableProps: { isLoading, isSkeleton, height },\n setFocusedRowId,\n } = useContext(DataTableContext);\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.shiftKey);\n },\n [setIsShiftPressed],\n );\n\n const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n return (\n <StyledDataTableContentWrapper\n data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n noSelectionAllowed={isShiftPressed}\n onKeyDown={handleOnKeyDown}\n onKeyUp={handleOnKeyUp}\n rows={hasPagination ? ['1fr', 'auto'] : ['auto']}\n cols={['100%']}\n >\n <StyledTableWrapper\n role=\"table\"\n aria-rowcount={allDataFlattened.length}\n aria-colcount={visibleColumns.length}\n data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n aria-busy={isLoading || isSkeleton}\n >\n {isSkeleton ? <SkeletonTable height={height} /> : <VirtualRowsList />}\n </StyledTableWrapper>\n {hasPagination ? (\n <StyledPaginationWrapper onFocus={() => setFocusedRowId(null)}>\n <Pagination />\n </StyledPaginationWrapper>\n ) : null}\n </StyledDataTableContentWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6BnB,SAekB,KAflB;AA7BJ,SAAgB,YAAY,mBAAmB;AAE/C,SAAS,oBAAoB,+BAA+B,+BAA+B;AAC3F,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AACvB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,cAAc;AAAA,IACnC,YAAY,EAAE,WAAW,YAAY,OAAO;AAAA,IAC5C;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,QAAM,kBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,gBAAgB,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC/C,MAAM,CAAC,MAAM;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,YAAY;AAAA,YACzB,aAAW,aAAa;AAAA,YAEvB,uBAAa,oBAAC,iBAAc,QAAgB,IAAK,oBAAC,mBAAgB;AAAA;AAAA,QACrE;AAAA,QACC,gBACC,oBAAC,2BAAwB,SAAS,MAAM,gBAAgB,IAAI,GAC1D,8BAAC,cAAW,GACd,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -43,6 +43,9 @@ const StyledTableWrapper = styled.div`
|
|
|
43
43
|
width: 100%;
|
|
44
44
|
height: 100%;
|
|
45
45
|
`;
|
|
46
|
+
const StyledPaginationWrapper = styled.div`
|
|
47
|
+
width: 100%;
|
|
48
|
+
`;
|
|
46
49
|
const StyledTableContentWrapper = styled(Grid)`
|
|
47
50
|
position: relative;
|
|
48
51
|
${({ height = "auto" }) => `
|
|
@@ -314,6 +317,7 @@ export {
|
|
|
314
317
|
StyledHeadTr,
|
|
315
318
|
StyledHeadWrapper,
|
|
316
319
|
StyledHeaderRightIconsWrapper,
|
|
320
|
+
StyledPaginationWrapper,
|
|
317
321
|
StyledPencilIcon,
|
|
318
322
|
StyledResizer,
|
|
319
323
|
StyledTableContentWrapper,
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${color ?? theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n }\n svg {\n fill: ${(props) => props.theme.colors.brand['800']};\n }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number }>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height) as string};\n `}\n width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n overflow: auto;\n height: 100%;\n --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\n colsLayoutStyle: string;\n}>`\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid)<{\n isExpandable: boolean;\n colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n grid-template-columns: var(--grid-layout);\n border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{\n isDraggingActive?: boolean;\n column: DSDataTableT.InternalColumn;\n shouldShowDnD?: boolean;\n}>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n height: 100%;\n display: flex;\n align-items: center;\n max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n border: none;\n outline: none;\n\n &:hover,\n &:focus,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n input {\n appearance: none;\n cursor: col-resize;\n background-image: transparent;\n padding: 0;\n border-radius: 0;\n\n &:focus::-webkit-slider-runnable-track {\n background: transparent;\n }\n\n &:focus-visible {\n background: brand-700;\n ::-webkit-slider-runnable-track {\n background: transparent;\n }\n }\n\n &::-webkit-slider-runnable-track {\n background: transparent;\n }\n\n &::-webkit-slider-thumb {\n appearance: none;\n background: transparent;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n background: transparent;\n border: none;\n }\n }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background: white;\n`;\n\nexport const StyledCell = styled.div`\n ${cellPadding}\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n display: grid;\n justify-self: flex-end;\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon?: boolean }>`\n width: 100%;\n height: 100%;\n align-items: center;\n & ${StyledPencilIcon} {\n display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n }\n &:hover {\n ${StyledPencilIcon} {\n display: block;\n }\n }\n &:focus {\n ${styledFocusCss}\n ${StyledPencilIcon} {\n display: block;\n }\n }\n outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)<{ minHeight: string }>`\n position: relative;\n z-index: ${ZIndexDataTable.ROW};\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n position: relative;\n background-color: ${({ theme }) => theme.colors.brand[200]};\n align-items: center;\n padding-left: ${(props) => props.paddingLeft};\n border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{\n backgroundColor?: string;\n isDragOverlay?: boolean;\n isDragging?: boolean;\n isDisabled?: boolean;\n isDropValid?: boolean;\n shouldDisplayHover?: boolean;\n isDropIndicatorPositionInside?: boolean;\n minHeight?: string;\n gridTemplateColumns?: string;\n}>`\n position: relative;\n z-index: 2;\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n\n width: 100%;\n ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n grid-template-columns: ${(props) =>\n props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : props.gridTemplateColumns ?? `var(--grid-layout)`};\n\n background-color: ${({ backgroundColor, isDragging, theme }) =>\n isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n outline: none;\n\n :focus {\n ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n }\n\n ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n if (!isDropIndicatorPositionInside) return '';\n return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n }}\n\n ${({ shouldDisplayHover, theme, isDisabled }) =>\n shouldDisplayHover && !isDisabled\n ? `:hover {\n background-color: ${theme.colors.brand[200]};\n }`\n : ''}\n\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n ${(props) =>\n !props.selected\n ? ''\n : `\n background-color: ${props.theme.colors.brand[200]};\n border: 1px solid ${props.theme.colors.brand[500]};\n `}\n\n ${GroupHeaderTitle} {\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n }\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n svg {\n fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAqB,cAAc;AACnC,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,WAAW,aAAa,qBAAqB;AACtD,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEhC,SAAS,mBAAmB;AAO5B,MAAM,iBAAiB,CAAC,EAAE,MAAM,GAAqB,UAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBASlD,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,aAExC,gBAAgB;AAAA;AAGtB,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA,MAEtC,CAAC,UAAW,MAAM,YAAY,KAAK,eAAe,KAAK;AAAA;AAAA;AAAA,YAGjD,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAI9C,MAAM,yBAAyB,OAAO,IAAI;AAAA,WACtC,CAAC,UAAU,UAAU,MAAM,SAAS,OAAO;AAAA,YAC1C,CAAC,UAAU,UAAU,MAAM,UAAU,OAAO;AAAA;AAGjD,MAAM,gCAAgC,OAAO,IAAI;AAAA,iBACvC,CAAC,EAAE,mBAAmB,MAAO,qBAAqB,SAAS;AAAA;AAAA;AAIrE,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { type Theme, styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }: { theme: Theme }, color?: string) => `\n&:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${color ?? theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)<{ hideFocus?: boolean }>`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n }\n svg {\n fill: ${(props) => props.theme.colors.brand['800']};\n }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledPaginationWrapper = styled.div`\n width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid)<{ height?: string | number }>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height) as string};\n `}\n width: var(--total-width);\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)<{ gridLayout: string[]; totalColumnsWidth: string | number }>`\n overflow: auto;\n height: 100%;\n --grid-layout: ${(props) => props.gridLayout.map((col) => `minmax(0, ${col})`).join(' ')};\n --total-width: ${(props) => sizeToCss(props.totalColumnsWidth)};\n`;\n\nexport const StyledHeadWrapper = styled(Grid)<{\n colsLayoutStyle: string;\n}>`\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: 100%;\n`;\n\nexport const StyledHeadTr = styled(Grid)<{\n isExpandable: boolean;\n colsLayoutStyle: DSDataTableT.ColsLayoutStyleValues;\n}>`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n grid-template-columns: var(--grid-layout);\n border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<{\n isDraggingActive?: boolean;\n column: DSDataTableT.InternalColumn;\n shouldShowDnD?: boolean;\n}>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n height: 100%;\n display: flex;\n align-items: center;\n max-height: 24px;\n`;\n\nexport const StyledResizer = styled(DSInputText)`\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n border: none;\n outline: none;\n\n &:hover,\n &:focus,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n input {\n appearance: none;\n cursor: col-resize;\n background-image: transparent;\n padding: 0;\n border-radius: 0;\n\n &:focus::-webkit-slider-runnable-track {\n background: transparent;\n }\n\n &:focus-visible {\n background: brand-700;\n ::-webkit-slider-runnable-track {\n background: transparent;\n }\n }\n\n &::-webkit-slider-runnable-track {\n background: transparent;\n }\n\n &::-webkit-slider-thumb {\n appearance: none;\n background: transparent;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n background: transparent;\n border: none;\n }\n }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background: white;\n`;\n\nexport const StyledCell = styled.div`\n ${cellPadding}\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n display: grid;\n justify-self: flex-end;\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon?: boolean }>`\n width: 100%;\n height: 100%;\n align-items: center;\n & ${StyledPencilIcon} {\n display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n }\n &:hover {\n ${StyledPencilIcon} {\n display: block;\n }\n }\n &:focus {\n ${styledFocusCss}\n ${StyledPencilIcon} {\n display: block;\n }\n }\n outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)<{ minHeight: string }>`\n position: relative;\n z-index: ${ZIndexDataTable.ROW};\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n position: relative;\n background-color: ${({ theme }) => theme.colors.brand[200]};\n align-items: center;\n padding-left: ${(props) => props.paddingLeft};\n border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n`;\n\nexport const GroupHeaderTitle = styled.span`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)<{\n backgroundColor?: string;\n isDragOverlay?: boolean;\n isDragging?: boolean;\n isDisabled?: boolean;\n isDropValid?: boolean;\n shouldDisplayHover?: boolean;\n isDropIndicatorPositionInside?: boolean;\n minHeight?: string;\n gridTemplateColumns?: string;\n}>`\n position: relative;\n z-index: 2;\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n\n width: 100%;\n ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n\n grid-template-columns: ${(props) =>\n props.isDragOverlay ? `minmax(0, 24px) minmax(0, auto)` : props.gridTemplateColumns ?? `var(--grid-layout)`};\n\n background-color: ${({ backgroundColor, isDragging, theme }) =>\n isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n outline: none;\n\n :focus {\n ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n }\n\n ${({ isDropIndicatorPositionInside, isDropValid, theme }) => {\n if (!isDropIndicatorPositionInside) return '';\n return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n }}\n\n ${({ shouldDisplayHover, theme, isDisabled }) =>\n shouldDisplayHover && !isDisabled\n ? `:hover {\n background-color: ${theme.colors.brand[200]};\n }`\n : ''}\n\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n ${(props) =>\n !props.selected\n ? ''\n : `\n background-color: ${props.theme.colors.brand[200]};\n border: 1px solid ${props.theme.colors.brand[500]};\n `}\n\n ${GroupHeaderTitle} {\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n }\n color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n svg {\n fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n }\n`;\n\nexport const ScreenReaderOnly = styled.div`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export declare const StyledDataTableContentWrapper: import("styled-components").
|
|
|
13
13
|
noSelectionAllowed: boolean;
|
|
14
14
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
|
15
15
|
export declare const StyledTableWrapper: import("styled-components").StyledComponent<"div", Theme, WidthAndHeight & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
16
|
+
export declare const StyledPaginationWrapper: import("styled-components").StyledComponent<"div", Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
16
17
|
export declare const StyledTableContentWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, Theme, {
|
|
17
18
|
height?: string | number | undefined;
|
|
18
19
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.26.
|
|
3
|
+
"version": "3.26.1-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -573,37 +573,37 @@
|
|
|
573
573
|
"dependencies": {
|
|
574
574
|
"react-virtual": "~2.10.4",
|
|
575
575
|
"uid": "~2.0.1",
|
|
576
|
-
"@elliemae/ds-button": "3.26.
|
|
577
|
-
"@elliemae/ds-button-v2": "3.26.
|
|
578
|
-
"@elliemae/ds-circular-progress-indicator": "3.26.
|
|
579
|
-
"@elliemae/ds-drag-and-drop": "3.26.
|
|
580
|
-
"@elliemae/ds-dropdownmenu": "3.26.
|
|
581
|
-
"@elliemae/ds-dropdownmenu-v2": "3.26.
|
|
582
|
-
"@elliemae/ds-form-checkbox": "3.26.
|
|
583
|
-
"@elliemae/ds-form-combobox": "3.26.
|
|
584
|
-
"@elliemae/ds-form-date-
|
|
585
|
-
"@elliemae/ds-form-
|
|
586
|
-
"@elliemae/ds-form-
|
|
587
|
-
"@elliemae/ds-form-
|
|
588
|
-
"@elliemae/ds-form-
|
|
589
|
-
"@elliemae/ds-
|
|
590
|
-
"@elliemae/ds-
|
|
591
|
-
"@elliemae/ds-
|
|
592
|
-
"@elliemae/ds-
|
|
593
|
-
"@elliemae/ds-
|
|
594
|
-
"@elliemae/ds-
|
|
595
|
-
"@elliemae/ds-
|
|
596
|
-
"@elliemae/ds-
|
|
597
|
-
"@elliemae/ds-
|
|
598
|
-
"@elliemae/ds-
|
|
599
|
-
"@elliemae/ds-
|
|
600
|
-
"@elliemae/ds-
|
|
576
|
+
"@elliemae/ds-button": "3.26.1-rc.1",
|
|
577
|
+
"@elliemae/ds-button-v2": "3.26.1-rc.1",
|
|
578
|
+
"@elliemae/ds-circular-progress-indicator": "3.26.1-rc.1",
|
|
579
|
+
"@elliemae/ds-drag-and-drop": "3.26.1-rc.1",
|
|
580
|
+
"@elliemae/ds-dropdownmenu": "3.26.1-rc.1",
|
|
581
|
+
"@elliemae/ds-dropdownmenu-v2": "3.26.1-rc.1",
|
|
582
|
+
"@elliemae/ds-form-checkbox": "3.26.1-rc.1",
|
|
583
|
+
"@elliemae/ds-form-combobox": "3.26.1-rc.1",
|
|
584
|
+
"@elliemae/ds-form-date-range-picker": "3.26.1-rc.1",
|
|
585
|
+
"@elliemae/ds-form-date-time-picker": "3.26.1-rc.1",
|
|
586
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.26.1-rc.1",
|
|
587
|
+
"@elliemae/ds-form-input-text": "3.26.1-rc.1",
|
|
588
|
+
"@elliemae/ds-form-layout-blocks": "3.26.1-rc.1",
|
|
589
|
+
"@elliemae/ds-form-radio": "3.26.1-rc.1",
|
|
590
|
+
"@elliemae/ds-grid": "3.26.1-rc.1",
|
|
591
|
+
"@elliemae/ds-icons": "3.26.1-rc.1",
|
|
592
|
+
"@elliemae/ds-pagination": "3.26.1-rc.1",
|
|
593
|
+
"@elliemae/ds-pills-v2": "3.26.1-rc.1",
|
|
594
|
+
"@elliemae/ds-popperjs": "3.26.1-rc.1",
|
|
595
|
+
"@elliemae/ds-props-helpers": "3.26.1-rc.1",
|
|
596
|
+
"@elliemae/ds-skeleton": "3.26.1-rc.1",
|
|
597
|
+
"@elliemae/ds-system": "3.26.1-rc.1",
|
|
598
|
+
"@elliemae/ds-toolbar": "3.26.1-rc.1",
|
|
599
|
+
"@elliemae/ds-truncated-tooltip-text": "3.26.1-rc.1",
|
|
600
|
+
"@elliemae/ds-utilities": "3.26.1-rc.1"
|
|
601
601
|
},
|
|
602
602
|
"devDependencies": {
|
|
603
603
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
604
604
|
"styled-components": "~5.3.9",
|
|
605
605
|
"styled-system": "~5.1.5",
|
|
606
|
-
"@elliemae/ds-monorepo-devops": "3.26.
|
|
606
|
+
"@elliemae/ds-monorepo-devops": "3.26.1-rc.1"
|
|
607
607
|
},
|
|
608
608
|
"peerDependencies": {
|
|
609
609
|
"lodash": "^4.17.21",
|