@elliemae/ds-data-table 3.70.0-next.53 → 3.70.0-next.58
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/configs/constants.js +0 -5
- package/dist/cjs/configs/constants.js.map +2 -2
- package/dist/cjs/configs/useStore/useStore.js +19 -0
- package/dist/cjs/configs/useStore/useStore.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js +12 -1
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/index.js +28 -1
- package/dist/cjs/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/cjs/package.json +1 -4
- package/dist/cjs/parts/Headers/HeaderResizer.js +31 -31
- package/dist/cjs/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js +11 -1
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderResizer.js +3 -1
- package/dist/cjs/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js +3 -1
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +0 -4
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +75 -52
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/configs/constants.js +0 -5
- package/dist/esm/configs/constants.js.map +2 -2
- package/dist/esm/configs/useStore/useStore.js +19 -0
- package/dist/esm/configs/useStore/useStore.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js +12 -1
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/index.js +28 -1
- package/dist/esm/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/Headers/HeaderResizer.js +33 -33
- package/dist/esm/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js +11 -1
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderResizer.js +4 -2
- package/dist/esm/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js +3 -1
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -5
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +33 -10
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/TruncatedTooltipText.d.ts +1 -1
- package/dist/types/configs/constants.d.ts +0 -4
- package/dist/types/exported-related/Skeleton/SkeletonCell.d.ts +2 -1
- package/dist/types/exported-related/Skeleton/SkeletonHeaderCell.d.ts +2 -1
- package/dist/types/parts/Headers/HeaderCellGroup.d.ts +1 -1
- package/dist/types/parts/Headers/HeaderResizer.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderCellHandlers.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderResizer.d.ts +1 -1
- package/dist/types/parts/HoC/withConditionalDnDSortableContext.d.ts +1 -1
- package/dist/types/parts/HoC/withDnDSortableColumnContext.d.ts +1 -1
- package/dist/types/parts/HoC/withDnDSortableRowContext.d.ts +1 -1
- package/dist/types/parts/Loader.d.ts +1 -1
- package/dist/types/parts/Row.d.ts +1 -1
- package/dist/types/parts/SkeletonTable.d.ts +1 -1
- package/dist/types/parts/TableContent.d.ts +2 -1
- package/dist/types/parts/VirtualRowsList.d.ts +2 -1
- package/dist/types/react-desc-prop-types.d.ts +3 -3
- package/dist/types/styled.d.ts +2 -2
- package/package.json +33 -33
- package/skills/ds-data-table-slots/SKILL.md +9 -6
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 { 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 plain div narrowed to a 4px grab strip, exposed as role=\"separator\" (or\n// \"slider\", see resizerA11yMode) with a bounded aria-valuenow/min/max/text (PUI-17784). Not a native\n// <button>: \"separator\" is not in <button>'s ARIA-allowed-role-transformation list, and a button's\n// implicit Enter/Space activation is the wrong fit for a value-bearing separator.\nexport const StyledResizer = styled('div', {\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": "AAAA,YAAY,WAAW;ACCvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,cAA0B;AACnC,SAAS,
|
|
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 { ColsLayoutStyle } from './configs/constants.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { DSDataTableName, DSDataTableSlots } from './constants/index.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\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\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 &:focus::-webkit-slider-runnable-track {\n background: transparent;\n }\n &:focus-visible {\n background: brand-700;\n ::-webkit-slider-runnable-track {\n background: transparent;\n }\n }\n &::-webkit-slider-runnable-track {\n background: transparent;\n }\n &::-webkit-slider-thumb {\n appearance: none;\n background: transparent;\n }\n &::-moz-range-thumb {\n appearance: none;\n background: transparent;\n border: none;\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
|
}
|
|
@@ -4,6 +4,6 @@ interface TruncatedTooltipTextProps {
|
|
|
4
4
|
value?: React.ReactNode;
|
|
5
5
|
placement?: DSHookFloatingContextT.PopperPlacementsT;
|
|
6
6
|
}
|
|
7
|
-
declare const TruncatedTooltipText: ({ value, placement }: TruncatedTooltipTextProps) =>
|
|
7
|
+
declare const TruncatedTooltipText: ({ value, placement }: TruncatedTooltipTextProps) => React.JSX.Element;
|
|
8
8
|
export { TruncatedTooltipText };
|
|
9
9
|
export default TruncatedTooltipText;
|
|
@@ -9,10 +9,6 @@ export declare const DropIndicatorPosition: {
|
|
|
9
9
|
readonly After: "after";
|
|
10
10
|
readonly Inside: "inside";
|
|
11
11
|
};
|
|
12
|
-
export declare const ResizerA11yMode: {
|
|
13
|
-
readonly Separator: "separator";
|
|
14
|
-
readonly Slider: "slider";
|
|
15
|
-
};
|
|
16
12
|
export declare const DEFAULT_MIN_COLUMN_WIDTH = 30;
|
|
17
13
|
export declare const DEFAULT_MAX_COLUMN_WIDTH = 600;
|
|
18
14
|
export declare const DATA_TESTID: {
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const SkeletonCell: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const SkeletonHeaderCell: () => React.JSX.Element;
|
|
@@ -9,5 +9,5 @@ interface HeaderCellGroupCompProps {
|
|
|
9
9
|
level?: number;
|
|
10
10
|
}
|
|
11
11
|
export declare const HeaderCellGroup: React.FunctionComponent<HeaderCellGroupCompProps>;
|
|
12
|
-
export declare const HeaderCellGroupSortable: (props: HeaderCellGroupCompProps) =>
|
|
12
|
+
export declare const HeaderCellGroupSortable: (props: HeaderCellGroupCompProps) => React.JSX.Element;
|
|
13
13
|
export {};
|
|
@@ -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<HTMLInputElement | null>;
|
|
6
6
|
isReachable: boolean;
|
|
7
7
|
}>;
|
|
@@ -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<HTMLInputElement | 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<HTMLInputElement | null>;
|
|
5
5
|
}) => {
|
|
6
6
|
isResizing: boolean;
|
|
7
7
|
columnWidth: number | undefined;
|
|
@@ -4,5 +4,5 @@ interface Props {
|
|
|
4
4
|
items: DSDataTableT.InternalColumn[];
|
|
5
5
|
isDragOverlay: boolean;
|
|
6
6
|
}
|
|
7
|
-
export declare const withConditionalDnDSortableContext: <T>(Component: React.ComponentType<T>) => (props: T & React.JSX.IntrinsicAttributes & Props) =>
|
|
7
|
+
export declare const withConditionalDnDSortableContext: <T>(Component: React.ComponentType<T>) => (props: T & React.JSX.IntrinsicAttributes & Props) => React.JSX.Element;
|
|
8
8
|
export {};
|
|
@@ -2,4 +2,4 @@ import React from 'react';
|
|
|
2
2
|
import type { DSDataTableT } from '../../react-desc-prop-types.js';
|
|
3
3
|
export declare const withDnDSortableColumnContext: <T extends {
|
|
4
4
|
header: DSDataTableT.InternalColumn;
|
|
5
|
-
}>(Component: React.ComponentType<T>) => (props: T) =>
|
|
5
|
+
}>(Component: React.ComponentType<T>) => (props: T) => React.JSX.Element;
|
|
@@ -2,4 +2,4 @@ import React from 'react';
|
|
|
2
2
|
import type { DSDataTableT } from '../../react-desc-prop-types.js';
|
|
3
3
|
export declare const withDnDSortableRowContext: <T extends {
|
|
4
4
|
row: DSDataTableT.InternalRow;
|
|
5
|
-
}>(Component: React.ComponentType<T>) => (props: T) =>
|
|
5
|
+
}>(Component: React.ComponentType<T>) => (props: T) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const MemoizedLoader: import("react").MemoExoticComponent<() => import("react
|
|
1
|
+
export declare const MemoizedLoader: import("react").MemoExoticComponent<() => import("react").JSX.Element>;
|
|
@@ -11,5 +11,5 @@ declare const RowWithContext: (props: {
|
|
|
11
11
|
measureRef?: (el: HTMLElement | null) => void;
|
|
12
12
|
itemWrapperStyle?: React.CSSProperties;
|
|
13
13
|
isDragOverlay: boolean;
|
|
14
|
-
}) =>
|
|
14
|
+
}) => React.JSX.Element;
|
|
15
15
|
export { RowWithContext };
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const TableContent: () => React.JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const VirtualRowsList: () => React.JSX.Element;
|
|
@@ -6,7 +6,7 @@ import type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';
|
|
|
6
6
|
import type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';
|
|
7
7
|
import type { DSComboboxT } from '@elliemae/ds-form-combobox';
|
|
8
8
|
import { type DSPropTypesSchema, type ValidationMap } from '@elliemae/ds-props-helpers';
|
|
9
|
-
import { type DropIndicatorPosition, ColsLayoutStyle
|
|
9
|
+
import { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';
|
|
10
10
|
import { DSDataTableName, DSDataTableSlots } from './constants/index.js';
|
|
11
11
|
export declare namespace DSDataTableT {
|
|
12
12
|
type PropsT<D, R, O> = Partial<D> & R & O;
|
|
@@ -51,6 +51,7 @@ export declare namespace DSDataTableT {
|
|
|
51
51
|
patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;
|
|
52
52
|
patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;
|
|
53
53
|
resetAllHeadersExcept: (exceptHeaderId: string) => void;
|
|
54
|
+
closeFilterMenuIfOpen: (headerId: string) => void;
|
|
54
55
|
};
|
|
55
56
|
export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;
|
|
56
57
|
export interface Filter {
|
|
@@ -159,7 +160,6 @@ export declare namespace DSDataTableT {
|
|
|
159
160
|
export type RenderRowActions = false | RenderRowActionsConfig;
|
|
160
161
|
export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;
|
|
161
162
|
export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;
|
|
162
|
-
export type ResizerA11yModeValues = TypescriptHelpersT.ObjectValues<typeof ResizerA11yMode>;
|
|
163
163
|
export type DraggablePropsT = false | (ReturnType<typeof useSortable> & {
|
|
164
164
|
dropIndicatorPosition: DropIndicatorPositionValues;
|
|
165
165
|
shouldShowDropIndicatorPosition: boolean;
|
|
@@ -301,6 +301,7 @@ export declare namespace DSDataTableT {
|
|
|
301
301
|
patchHeader: (headerId: string, newHeader: ReduxHeader) => void;
|
|
302
302
|
patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;
|
|
303
303
|
resetAllHeadersExcept: (exceptHeaderId: string) => void;
|
|
304
|
+
closeFilterMenuIfOpen: (headerId: string) => void;
|
|
304
305
|
isShiftPressed: boolean;
|
|
305
306
|
setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;
|
|
306
307
|
lastSelected: React.MutableRefObject<number>;
|
|
@@ -325,7 +326,6 @@ export declare namespace DSDataTableT {
|
|
|
325
326
|
pagination: false | Pagination;
|
|
326
327
|
filters: Filter[];
|
|
327
328
|
colsLayoutStyle: ColsLayoutStyleValues;
|
|
328
|
-
resizerA11yMode: ResizerA11yModeValues;
|
|
329
329
|
hiddenColumns: string[];
|
|
330
330
|
noResultsMessage: string;
|
|
331
331
|
dragAndDropRows: boolean;
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -34,14 +34,14 @@ 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<"
|
|
37
|
+
export declare const StyledResizer: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-form-input-text").DSInputTextT.Props>, Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-form-input-text").DSInputTextT.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;
|
|
41
41
|
column: DSDataTableT.InternalColumn;
|
|
42
42
|
} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
43
43
|
export declare const StyledCellContent: import("styled-components").StyledComponent<"div", Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
44
|
-
export declare const StyledPencilIcon: import("styled-components").StyledComponent<(rest: import("@elliemae/ds-icons").SvgIconT.Props) => import("react
|
|
44
|
+
export declare const StyledPencilIcon: import("styled-components").StyledComponent<(rest: import("@elliemae/ds-icons").SvgIconT.Props) => import("react").JSX.Element, Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<(rest: import("@elliemae/ds-icons").SvgIconT.Props) => import("react").JSX.Element>, never>;
|
|
45
45
|
export declare const StyledEditableContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, Theme, {
|
|
46
46
|
shouldDisplayEditIcon?: boolean;
|
|
47
47
|
} & 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.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.58",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -41,46 +41,46 @@
|
|
|
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-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-dropdownmenu-v2": "3.70.0-next.
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-form-
|
|
52
|
-
"@elliemae/ds-form-date-range-picker": "3.70.0-next.
|
|
53
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.
|
|
54
|
-
"@elliemae/ds-form-
|
|
55
|
-
"@elliemae/ds-form-
|
|
56
|
-
"@elliemae/ds-
|
|
57
|
-
"@elliemae/ds-form-
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"@elliemae/ds-
|
|
61
|
-
"@elliemae/ds-
|
|
62
|
-
"@elliemae/ds-pagination": "3.70.0-next.
|
|
63
|
-
"@elliemae/ds-pills-v2": "3.70.0-next.
|
|
64
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
65
|
-
"@elliemae/ds-skeleton": "3.70.0-next.
|
|
66
|
-
"@elliemae/ds-
|
|
67
|
-
"@elliemae/ds-
|
|
68
|
-
"@elliemae/ds-
|
|
44
|
+
"@elliemae/ds-button-v2": "3.70.0-next.58",
|
|
45
|
+
"@elliemae/ds-drag-and-drop": "3.70.0-next.58",
|
|
46
|
+
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.58",
|
|
47
|
+
"@elliemae/ds-dialog": "3.70.0-next.58",
|
|
48
|
+
"@elliemae/ds-dropdownmenu-v2": "3.70.0-next.58",
|
|
49
|
+
"@elliemae/ds-floating-context": "3.70.0-next.58",
|
|
50
|
+
"@elliemae/ds-form-checkbox": "3.70.0-next.58",
|
|
51
|
+
"@elliemae/ds-form-date-time-picker": "3.70.0-next.58",
|
|
52
|
+
"@elliemae/ds-form-date-range-picker": "3.70.0-next.58",
|
|
53
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.58",
|
|
54
|
+
"@elliemae/ds-form-input-text": "3.70.0-next.58",
|
|
55
|
+
"@elliemae/ds-form-combobox": "3.70.0-next.58",
|
|
56
|
+
"@elliemae/ds-form-radio": "3.70.0-next.58",
|
|
57
|
+
"@elliemae/ds-form-layout-blocks": "3.70.0-next.58",
|
|
58
|
+
"@elliemae/ds-grid": "3.70.0-next.58",
|
|
59
|
+
"@elliemae/ds-hooks-focus-trap": "3.70.0-next.58",
|
|
60
|
+
"@elliemae/ds-menu-button": "3.70.0-next.58",
|
|
61
|
+
"@elliemae/ds-icons": "3.70.0-next.58",
|
|
62
|
+
"@elliemae/ds-pagination": "3.70.0-next.58",
|
|
63
|
+
"@elliemae/ds-pills-v2": "3.70.0-next.58",
|
|
64
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.58",
|
|
65
|
+
"@elliemae/ds-skeleton": "3.70.0-next.58",
|
|
66
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.58",
|
|
67
|
+
"@elliemae/ds-zustand-helpers": "3.70.0-next.58",
|
|
68
|
+
"@elliemae/ds-system": "3.70.0-next.58"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"jest": "^30.0.0",
|
|
72
|
-
"styled-components": "~5.3.
|
|
72
|
+
"styled-components": "~5.3.11",
|
|
73
73
|
"styled-system": "^5.1.5",
|
|
74
|
-
"@elliemae/ds-
|
|
75
|
-
"@elliemae/ds-
|
|
76
|
-
"@elliemae/ds-
|
|
77
|
-
"@elliemae/ds-toolbar-v2": "3.70.0-next.
|
|
74
|
+
"@elliemae/ds-test-utils": "3.70.0-next.58",
|
|
75
|
+
"@elliemae/ds-tabs": "3.70.0-next.58",
|
|
76
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.58",
|
|
77
|
+
"@elliemae/ds-toolbar-v2": "3.70.0-next.58"
|
|
78
78
|
},
|
|
79
79
|
"peerDependencies": {
|
|
80
80
|
"lodash-es": "^4.18.1",
|
|
81
81
|
"react": "^18.3.1",
|
|
82
82
|
"react-dom": "^18.3.1",
|
|
83
|
-
"styled-components": "~5.3.
|
|
83
|
+
"styled-components": "~5.3.11",
|
|
84
84
|
"styled-system": "^5.1.5"
|
|
85
85
|
},
|
|
86
86
|
"publishConfig": {
|
|
@@ -96,4 +96,4 @@
|
|
|
96
96
|
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
97
97
|
"checkDeps": "npx -yes ../../util/ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
98
98
|
}
|
|
99
|
-
}
|
|
99
|
+
}
|
|
@@ -50,14 +50,17 @@ 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
|
-
│ │
|
|
56
|
-
│ │ data-
|
|
57
|
-
│ │
|
|
53
|
+
│ │ styled(DSInputText, { slot: RESIZER }) — DSInputText consumes the
|
|
54
|
+
│ │ slot prop internally and does NOT emit data-dimsum-slot="dsDatatableResizer"
|
|
55
|
+
│ │ on any wrapper element. Only the inner <input type="range"> is visible:
|
|
56
|
+
│ │ • inner <input> → data-testid="ds-datatable-resizer"
|
|
57
|
+
│ │ data-dimsum-slot="dsInputtextInput"
|
|
58
|
+
│ │ data-dimsum-parent-slot="dsDatatableResizer"
|
|
59
|
+
│ │ Bounded aria-valuenow/valuemin/valuemax/valuetext + native value/min/max
|
|
60
|
+
│ │ (minWidth/maxWidth, default 30/600px); name via aria-labelledby (sr-only
|
|
58
61
|
│ │ span); operating instruction via aria-describedby. aria-hidden until the
|
|
59
62
|
│ │ header is entered (aria-hidden ⟺ tabIndex -1) so it stays out of the header's
|
|
60
|
-
│ │ announcement. See docs → "DataTable — Column Resizer Accessibility".
|
|
63
|
+
│ │ announcement. Supports keyboard resizing via arrow keys. See docs → "DataTable — Column Resizer Accessibility".
|
|
61
64
|
│ │
|
|
62
65
|
│ ├── LOADER_WRAPPER (dsDatatableLoaderWrapper) · div[role="row"]
|
|
63
66
|
│ │ present when: isLoading=true (sibling of HEAD_WRAPPER)
|