@elliemae/ds-data-table 3.70.0-next.43 → 3.70.0-next.44
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/exported-related/FilterBar/PillsFromDataTableFilters.js +2 -1
- package/dist/cjs/exported-related/FilterBar/PillsFromDataTableFilters.js.map +2 -2
- package/dist/cjs/parts/FilterBar/FiltersBar.js +2 -1
- package/dist/cjs/parts/FilterBar/FiltersBar.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js +13 -24
- package/dist/cjs/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderResizer.js +39 -17
- package/dist/cjs/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/cjs/parts/Headers/buildScreenReaderInstructions.js +63 -0
- package/dist/cjs/parts/Headers/buildScreenReaderInstructions.js.map +7 -0
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map +1 -1
- package/dist/cjs/parts/Headers/useHeaderResizer.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +4 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +9 -35
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/exported-related/FilterBar/PillsFromDataTableFilters.js +2 -1
- package/dist/esm/exported-related/FilterBar/PillsFromDataTableFilters.js.map +2 -2
- package/dist/esm/parts/FilterBar/FiltersBar.js +2 -1
- package/dist/esm/parts/FilterBar/FiltersBar.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js +13 -24
- package/dist/esm/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderResizer.js +40 -18
- package/dist/esm/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/esm/parts/Headers/buildScreenReaderInstructions.js +33 -0
- package/dist/esm/parts/Headers/buildScreenReaderInstructions.js.map +7 -0
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map +1 -1
- package/dist/esm/parts/Headers/useHeaderResizer.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +4 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +9 -35
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/parts/Headers/HeaderResizer.d.ts +1 -1
- package/dist/types/parts/Headers/buildScreenReaderInstructions.d.ts +19 -0
- package/dist/types/parts/Headers/useHeaderCellHandlers.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderResizer.d.ts +1 -1
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/dist/types/styled.d.ts +1 -1
- package/package.json +30 -30
- package/skills/ds-data-table-slots/SKILL.md +6 -3
package/dist/esm/styled.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { DSButtonV3 } from "@elliemae/ds-button-v2";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { EditPencil } from "@elliemae/ds-icons";
|
|
5
5
|
import { styled } from "@elliemae/ds-system";
|
|
@@ -163,22 +163,26 @@ const StyledHeaderRightIconsWrapper = styled("div", {
|
|
|
163
163
|
align-self: flex-start;
|
|
164
164
|
padding-top: 2px;
|
|
165
165
|
`;
|
|
166
|
-
const StyledResizer = styled(
|
|
166
|
+
const StyledResizer = styled(DSButtonV3, {
|
|
167
167
|
name: DSDataTableName,
|
|
168
168
|
slot: DSDataTableSlots.RESIZER
|
|
169
169
|
})`
|
|
170
170
|
width: 4px;
|
|
171
171
|
height: 100%;
|
|
172
|
+
min-width: unset;
|
|
173
|
+
min-height: unset;
|
|
174
|
+
padding: 0;
|
|
172
175
|
position: absolute;
|
|
173
176
|
right: 0;
|
|
174
177
|
top: 0;
|
|
175
178
|
z-index: 0;
|
|
176
|
-
|
|
179
|
+
cursor: col-resize;
|
|
177
180
|
// prevents from scrolling while dragging on touch devices
|
|
178
181
|
touch-action: none;
|
|
179
182
|
|
|
180
183
|
border: none;
|
|
181
184
|
outline: none;
|
|
185
|
+
background: transparent;
|
|
182
186
|
|
|
183
187
|
&:hover,
|
|
184
188
|
&:focus,
|
|
@@ -187,38 +191,8 @@ const StyledResizer = styled(DSInputText, {
|
|
|
187
191
|
outline: none;
|
|
188
192
|
}
|
|
189
193
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
cursor: col-resize;
|
|
193
|
-
background-image: transparent;
|
|
194
|
-
padding: 0;
|
|
195
|
-
border-radius: 0;
|
|
196
|
-
|
|
197
|
-
&:focus::-webkit-slider-runnable-track {
|
|
198
|
-
background: transparent;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
&:focus-visible {
|
|
202
|
-
background: brand-700;
|
|
203
|
-
::-webkit-slider-runnable-track {
|
|
204
|
-
background: transparent;
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
&::-webkit-slider-runnable-track {
|
|
209
|
-
background: transparent;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
&::-webkit-slider-thumb {
|
|
213
|
-
appearance: none;
|
|
214
|
-
background: transparent;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
&::-moz-range-thumb {
|
|
218
|
-
appearance: none;
|
|
219
|
-
background: transparent;
|
|
220
|
-
border: none;
|
|
221
|
-
}
|
|
194
|
+
&:focus-visible {
|
|
195
|
+
background: brand-700;
|
|
222
196
|
}
|
|
223
197
|
`;
|
|
224
198
|
const StyledActionCell = styled("div", {
|
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 { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { cellPadding, columnPadding, sizeToCss } from './helpers/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\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, {\n name: DSDataTableName,\n slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.TABLE_WRAPPER,\n})<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 name: DSDataTableName,\n slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ 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, {\n name: DSDataTableName,\n slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ gridLayout: string[]; totalColumnsWidth: string | number; headerHeightPx: number }>`\n overflow: auto;\n height: 100%;\n /**\n * PUI-18626: reserve the sticky header's height as scroll-padding so the browser-native\n * focus scroll (fired when keyboard navigation focuses a row) lands the focused row below\n * the sticky header instead of behind it. Honored by scrollIntoView / native focus scroll;\n * orthogonal to react-virtual's paddingStart, which only affects scrollToIndex offsets.\n */\n scroll-padding-top: ${(props) => props.headerHeightPx}px;\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 name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\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 name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_TR,\n})<{\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-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_TH,\n})<{\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 name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n display: flex;\n align-items: center;\n align-self: flex-start;\n padding-top: 2px;\n`;\n\nexport const StyledResizer = styled(DSInputText, {\n name: DSDataTableName,\n slot: DSDataTableSlots.RESIZER,\n})`\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n min-height: unset;\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 name: DSDataTableName,\n slot: DSDataTableSlots.ACTION_CELL,\n})`\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 name: DSDataTableName,\n slot: DSDataTableSlots.CELL,\n})`\n ${cellPadding}\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.CELL_CONTENT,\n})`\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 name: DSDataTableName,\n slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ 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, {\n name: DSDataTableName,\n slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ 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, {\n name: DSDataTableName,\n slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ 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 name: DSDataTableName,\n slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\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 name: DSDataTableName,\n slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\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,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { styled, type Theme } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { cellPadding, columnPadding, sizeToCss } from './helpers/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\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, {\n name: DSDataTableName,\n slot: DSDataTableSlots.ROOT,\n})<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.CONTENT_WRAPPER,\n})<{ noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.TABLE_WRAPPER,\n})<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 name: DSDataTableName,\n slot: DSDataTableSlots.PAGINATION_WRAPPER,\n})`\n width: 100%;\n`;\n\nexport const StyledTableContentWrapper = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.TABLE_CONTENT_WRAPPER,\n})<{ 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, {\n name: DSDataTableName,\n slot: DSDataTableSlots.VIRTUAL_LIST_WRAPPER,\n})<{ gridLayout: string[]; totalColumnsWidth: string | number; headerHeightPx: number }>`\n overflow: auto;\n height: 100%;\n /**\n * PUI-18626: reserve the sticky header's height as scroll-padding so the browser-native\n * focus scroll (fired when keyboard navigation focuses a row) lands the focused row below\n * the sticky header instead of behind it. Honored by scrollIntoView / native focus scroll;\n * orthogonal to react-virtual's paddingStart, which only affects scrollToIndex offsets.\n */\n scroll-padding-top: ${(props) => props.headerHeightPx}px;\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 name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_WRAPPER,\n})<{\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 name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_TR,\n})<{\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-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_TH,\n})<{\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 name: DSDataTableName,\n slot: DSDataTableSlots.HEAD_RIGHT_ICONS_WRAPPER,\n})`\n display: flex;\n align-items: center;\n align-self: flex-start;\n padding-top: 2px;\n`;\n\n// Column resize handle \u2014 a DSButtonV3 with buttonType=\"raw\" (unstyled) narrowed to a 4px grab strip.\n// A real <button> (role=button) via a Dimsum component: preserves the RESIZER slot data-testid and keeps\n// the control inside the design system, while \"raw\" strips the default button chrome. No value semantics\n// (this resize has no bounded range \u2014 the neighbouring column does not change).\nexport const StyledResizer = styled(DSButtonV3, {\n name: DSDataTableName,\n slot: DSDataTableSlots.RESIZER,\n})`\n width: 4px;\n height: 100%;\n min-width: unset;\n min-height: unset;\n padding: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n cursor: col-resize;\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n border: none;\n outline: none;\n background: transparent;\n\n &:hover,\n &:focus,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n &:focus-visible {\n background: brand-700;\n }\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.ACTION_CELL,\n})`\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 name: DSDataTableName,\n slot: DSDataTableSlots.CELL,\n})`\n ${cellPadding}\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledCellContent = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.CELL_CONTENT,\n})`\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 name: DSDataTableName,\n slot: DSDataTableSlots.PENCIL_ICON,\n})``;\n\nexport const StyledEditableContainer = styled(Grid, {\n name: DSDataTableName,\n slot: DSDataTableSlots.EDITABLE_CONTAINER,\n})<{ 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, {\n name: DSDataTableName,\n slot: DSDataTableSlots.FULLSIZE_GRID,\n})<{ 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, {\n name: DSDataTableName,\n slot: DSDataTableSlots.GROUP_HEADER_CONTAINER,\n})<{ 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 name: DSDataTableName,\n slot: DSDataTableSlots.GROUP_HEADER_TITLE,\n})`\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 name: DSDataTableName,\n slot: DSDataTableSlots.CELL_CONTAINER,\n})<{\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
|
}
|
|
@@ -2,6 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import type { DSDataTableT } from '../../react-desc-prop-types.js';
|
|
3
3
|
export declare const HeaderResizer: React.ComponentType<{
|
|
4
4
|
column: DSDataTableT.InternalColumn;
|
|
5
|
-
innerRef: React.MutableRefObject<
|
|
5
|
+
innerRef: React.MutableRefObject<HTMLButtonElement | null>;
|
|
6
6
|
isReachable: boolean;
|
|
7
7
|
}>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Builds the screen-reader instructions announced for a column header (via the header's
|
|
3
|
+
* aria-describedby).
|
|
4
|
+
*
|
|
5
|
+
* Draggable, filterable and resizable share the SAME activation — pressing Enter on the focused
|
|
6
|
+
* header reveals and focuses those controls (see useHeaderCellHandlers onKeyDown) — so they are
|
|
7
|
+
* announced together as a single grammatical list with ONE "press the enter key" instruction, for
|
|
8
|
+
* any combination/permutation, instead of repeating the instruction per affordance.
|
|
9
|
+
*
|
|
10
|
+
* Sorting is a distinct interaction (Up / Down arrow keys directly on the header, no Enter), so it
|
|
11
|
+
* gets its own sentence. Wording pending a11y SME review.
|
|
12
|
+
*/
|
|
13
|
+
export declare const buildScreenReaderInstructions: ({ colSpan, draggable, filterable, sortable, resizable, }: {
|
|
14
|
+
colSpan: number;
|
|
15
|
+
draggable: boolean;
|
|
16
|
+
filterable: boolean;
|
|
17
|
+
sortable: boolean;
|
|
18
|
+
resizable: boolean;
|
|
19
|
+
}) => string;
|
|
@@ -6,7 +6,7 @@ type UseHeaderCellHandlersType = (args: {
|
|
|
6
6
|
dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
7
7
|
sortRef: React.MutableRefObject<HTMLButtonElement | null>;
|
|
8
8
|
filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;
|
|
9
|
-
resizeHandlerRef: React.MutableRefObject<
|
|
9
|
+
resizeHandlerRef: React.MutableRefObject<HTMLButtonElement | null>;
|
|
10
10
|
hasSortingCaret: boolean;
|
|
11
11
|
isDragOverlay?: boolean;
|
|
12
12
|
draggableProps: DSDataTableT.DraggablePropsT;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare const useHeaderResizer: ({ columnId, innerRef, }: {
|
|
3
3
|
columnId: string;
|
|
4
|
-
innerRef: React.MutableRefObject<
|
|
4
|
+
innerRef: React.MutableRefObject<HTMLButtonElement | null>;
|
|
5
5
|
}) => {
|
|
6
6
|
isResizing: boolean;
|
|
7
7
|
onResizeStart: () => void;
|
|
@@ -197,6 +197,7 @@ export declare namespace DSDataTableT {
|
|
|
197
197
|
canResize?: boolean;
|
|
198
198
|
isFocuseable?: boolean;
|
|
199
199
|
textWrap?: 'wrap' | 'wrap-all' | 'truncate';
|
|
200
|
+
pillLabel?: string;
|
|
200
201
|
ref?: React.MutableRefObject<HTMLTableColElement | null>;
|
|
201
202
|
required?: boolean;
|
|
202
203
|
cellStyle?: React.CSSProperties;
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -34,7 +34,7 @@ export declare const StyledHeadTh: import("styled-components").StyledComponent<"
|
|
|
34
34
|
shouldShowDnD?: boolean;
|
|
35
35
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
36
36
|
export declare const StyledHeaderRightIconsWrapper: import("styled-components").StyledComponent<"div", Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
37
|
-
export declare const StyledResizer: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-
|
|
37
|
+
export declare const StyledResizer: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
|
|
38
38
|
export declare const StyledActionCell: import("styled-components").StyledComponent<"div", Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
39
39
|
export declare const StyledCell: import("styled-components").StyledComponent<"div", Theme, {
|
|
40
40
|
theme: Theme;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.44",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -41,40 +41,40 @@
|
|
|
41
41
|
"react-virtual": "~2.10.4",
|
|
42
42
|
"uid": "^2.0.2",
|
|
43
43
|
"use-onclickoutside": "0.4.1",
|
|
44
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
45
|
-
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-floating-context": "3.70.0-next.
|
|
49
|
-
"@elliemae/ds-form-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-
|
|
52
|
-
"@elliemae/ds-form-
|
|
53
|
-
"@elliemae/ds-form-
|
|
54
|
-
"@elliemae/ds-form-date-
|
|
55
|
-
"@elliemae/ds-form-input-text": "3.70.0-next.
|
|
56
|
-
"@elliemae/ds-form-layout-blocks": "3.70.0-next.
|
|
57
|
-
"@elliemae/ds-form-radio": "3.70.0-next.
|
|
58
|
-
"@elliemae/ds-grid": "3.70.0-next.
|
|
59
|
-
"@elliemae/ds-hooks-focus-trap": "3.70.0-next.
|
|
60
|
-
"@elliemae/ds-
|
|
61
|
-
"@elliemae/ds-
|
|
62
|
-
"@elliemae/ds-
|
|
63
|
-
"@elliemae/ds-
|
|
64
|
-
"@elliemae/ds-
|
|
65
|
-
"@elliemae/ds-
|
|
66
|
-
"@elliemae/ds-
|
|
67
|
-
"@elliemae/ds-
|
|
68
|
-
"@elliemae/ds-zustand-helpers": "3.70.0-next.
|
|
44
|
+
"@elliemae/ds-button-v2": "3.70.0-next.44",
|
|
45
|
+
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.44",
|
|
46
|
+
"@elliemae/ds-dialog": "3.70.0-next.44",
|
|
47
|
+
"@elliemae/ds-drag-and-drop": "3.70.0-next.44",
|
|
48
|
+
"@elliemae/ds-floating-context": "3.70.0-next.44",
|
|
49
|
+
"@elliemae/ds-form-combobox": "3.70.0-next.44",
|
|
50
|
+
"@elliemae/ds-dropdownmenu-v2": "3.70.0-next.44",
|
|
51
|
+
"@elliemae/ds-form-checkbox": "3.70.0-next.44",
|
|
52
|
+
"@elliemae/ds-form-date-range-picker": "3.70.0-next.44",
|
|
53
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.44",
|
|
54
|
+
"@elliemae/ds-form-date-time-picker": "3.70.0-next.44",
|
|
55
|
+
"@elliemae/ds-form-input-text": "3.70.0-next.44",
|
|
56
|
+
"@elliemae/ds-form-layout-blocks": "3.70.0-next.44",
|
|
57
|
+
"@elliemae/ds-form-radio": "3.70.0-next.44",
|
|
58
|
+
"@elliemae/ds-grid": "3.70.0-next.44",
|
|
59
|
+
"@elliemae/ds-hooks-focus-trap": "3.70.0-next.44",
|
|
60
|
+
"@elliemae/ds-menu-button": "3.70.0-next.44",
|
|
61
|
+
"@elliemae/ds-icons": "3.70.0-next.44",
|
|
62
|
+
"@elliemae/ds-pills-v2": "3.70.0-next.44",
|
|
63
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.44",
|
|
64
|
+
"@elliemae/ds-system": "3.70.0-next.44",
|
|
65
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.44",
|
|
66
|
+
"@elliemae/ds-pagination": "3.70.0-next.44",
|
|
67
|
+
"@elliemae/ds-skeleton": "3.70.0-next.44",
|
|
68
|
+
"@elliemae/ds-zustand-helpers": "3.70.0-next.44"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"jest": "^30.0.0",
|
|
72
72
|
"styled-components": "~5.3.9",
|
|
73
73
|
"styled-system": "^5.1.5",
|
|
74
|
-
"@elliemae/ds-
|
|
75
|
-
"@elliemae/ds-
|
|
76
|
-
"@elliemae/ds-
|
|
77
|
-
"@elliemae/ds-
|
|
74
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.44",
|
|
75
|
+
"@elliemae/ds-tabs": "3.70.0-next.44",
|
|
76
|
+
"@elliemae/ds-test-utils": "3.70.0-next.44",
|
|
77
|
+
"@elliemae/ds-toolbar-v2": "3.70.0-next.44"
|
|
78
78
|
},
|
|
79
79
|
"peerDependencies": {
|
|
80
80
|
"lodash-es": "^4.18.1",
|
|
@@ -50,9 +50,12 @@ ROOT (dsDatatableRoot) · div
|
|
|
50
50
|
│ │ ├── EXPAND_CELL_CONTAINER (dsDatatableExpandCellContainer) · span[role="button"]
|
|
51
51
|
│ │ │ present in: the expand column header cell only
|
|
52
52
|
│ │ └── RESIZER (dsDatatableResizer) ← isResizeable=true only
|
|
53
|
-
│ │
|
|
54
|
-
│ │
|
|
55
|
-
│ │
|
|
53
|
+
│ │ wraps DSButtonV3 (buttonType="raw") · button[role="button"] (dsButtonRoot)
|
|
54
|
+
│ │ data-testid="ds-datatable-resizer" lands on the button; the RESIZER slot is
|
|
55
|
+
│ │ its data-dimsum-parent-slot. NO value; name via name-from-content (sr-only
|
|
56
|
+
│ │ span); operating instruction via aria-describedby. aria-hidden until the
|
|
57
|
+
│ │ header is entered (aria-hidden ⟺ tabIndex -1) so it stays out of the header's
|
|
58
|
+
│ │ announcement. See docs → "DataTable — Column Resizer Accessibility".
|
|
56
59
|
│ │
|
|
57
60
|
│ ├── LOADER_WRAPPER (dsDatatableLoaderWrapper) · div[role="row"]
|
|
58
61
|
│ │ present when: isLoading=true (sibling of HEAD_WRAPPER)
|