@elliemae/ds-data-table 3.12.0-rc.21 → 3.12.0-rc.22
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/addons/Columns/ColumnDragHandle/ColumnDragHandle.js +3 -2
- package/dist/cjs/addons/Columns/ColumnDragHandle/ColumnDragHandle.js.map +2 -2
- package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js +1 -1
- package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js.map +2 -2
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +2 -6
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js +1 -10
- package/dist/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js.map +2 -2
- package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js +6 -12
- package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/dist/cjs/parts/Cells/Cell.js +5 -3
- package/dist/cjs/parts/Cells/Cell.js.map +2 -2
- package/dist/cjs/parts/DnDHandle.js +18 -5
- package/dist/cjs/parts/DnDHandle.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js +4 -3
- package/dist/cjs/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/parts/RowVariants/RowVariantHeader.js +4 -1
- package/dist/cjs/parts/RowVariants/RowVariantHeader.js.map +2 -2
- package/dist/cjs/styled.js +8 -1
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnDragHandle/ColumnDragHandle.js +3 -2
- package/dist/esm/addons/Columns/ColumnDragHandle/ColumnDragHandle.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js +1 -1
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +2 -6
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js +2 -11
- package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js.map +2 -2
- package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js +6 -12
- package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/dist/esm/parts/Cells/Cell.js +5 -3
- package/dist/esm/parts/Cells/Cell.js.map +2 -2
- package/dist/esm/parts/DnDHandle.js +18 -5
- package/dist/esm/parts/DnDHandle.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js +4 -3
- package/dist/esm/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/esm/parts/RowVariants/RowVariantHeader.js +4 -1
- package/dist/esm/parts/RowVariants/RowVariantHeader.js.map +2 -2
- package/dist/esm/styled.js +8 -1
- package/dist/esm/styled.js.map +2 -2
- package/package.json +18 -18
|
@@ -39,7 +39,7 @@ const RowContent = (props) => {
|
|
|
39
39
|
row,
|
|
40
40
|
ctx,
|
|
41
41
|
ctx: {
|
|
42
|
-
tableProps: { groupedRowsRenderHeader }
|
|
42
|
+
tableProps: { groupedRowsRenderHeader, disabledRows }
|
|
43
43
|
},
|
|
44
44
|
backgroundColor = "white",
|
|
45
45
|
focusedRowId,
|
|
@@ -61,6 +61,7 @@ const RowContent = (props) => {
|
|
|
61
61
|
rowRef.current?.focus();
|
|
62
62
|
}
|
|
63
63
|
}, [focusedRowId, row.uid]);
|
|
64
|
+
const isDisabled = (0, import_react.useMemo)(() => disabledRows[row.uid] !== void 0, [disabledRows, row]);
|
|
64
65
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
66
|
import_styled.StyledCellContainer,
|
|
66
67
|
{
|
|
@@ -69,6 +70,8 @@ const RowContent = (props) => {
|
|
|
69
70
|
tabIndex: 0,
|
|
70
71
|
role: "row",
|
|
71
72
|
backgroundColor,
|
|
73
|
+
"aria-disabled": isDisabled ? "true" : "false",
|
|
74
|
+
isDisabled,
|
|
72
75
|
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_ROW_HEADER_CONTENT,
|
|
73
76
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
74
77
|
import_styled.GroupHeaderContainer,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/RowVariants/RowVariantHeader.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useLayoutEffect, useMemo, useRef } from 'react';\nimport { RowRenderer } from '../../exported-related/RowRenderer';\nimport { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from '../../styled';\nimport type { RowVariantProps } from './types';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst RowContent: React.ComponentType<RowVariantProps> = (props) => {\n const {\n row,\n ctx,\n ctx: {\n tableProps: { groupedRowsRenderHeader },\n },\n backgroundColor = 'white',\n focusedRowId,\n drilldownRowId,\n } = props;\n\n const rowRef = useRef<HTMLDivElement>(null);\n\n const hasExpandCell = useMemo(\n () => row.original.subRows && row.cells.find((cell) => cell.column.accessor === 'expandRowColumn'),\n [row],\n );\n\n const titleContent = useMemo(() => {\n if (typeof groupedRowsRenderHeader === 'function') {\n return groupedRowsRenderHeader(row.original.dimsumHeaderValue, row.original.subRows);\n }\n return row.original.dimsumHeaderValue;\n }, [groupedRowsRenderHeader, row]);\n\n useLayoutEffect(() => {\n if (row.uid === focusedRowId) {\n rowRef.current?.focus();\n }\n }, [focusedRowId, row.uid]);\n\n return (\n <StyledCellContainer\n ref={rowRef}\n minHeight=\"0px\"\n tabIndex={0}\n role=\"row\"\n backgroundColor={backgroundColor}\n data-testid={DATA_TESTID.DATA_TABLE_ROW_HEADER_CONTENT}\n >\n <GroupHeaderContainer\n data-testid={DATA_TESTID.DATA_TABLE_ROW_GROUP_HEADER}\n cols={hasExpandCell ? ['min-content', 'auto'] : ['auto']}\n paddingLeft={hasExpandCell ? '2px' : '8px'}\n >\n {hasExpandCell && (\n <expandRowColumn.Cell\n row={row}\n cell={row.cells[0]}\n isRowSelected={drilldownRowId === row.uid}\n ctx={ctx}\n draggableProps={{}}\n />\n )}\n <GroupHeaderTitle>{titleContent}</GroupHeaderTitle>\n </GroupHeaderContainer>\n </StyledCellContainer>\n );\n};\n\nexport const RowVariantHeader: React.ComponentType<RowVariantProps> = ({\n row,\n itemIndex,\n isDragOverlay,\n focusedRowId,\n drilldownRowId,\n}) => (\n <RowRenderer\n row={row}\n itemIndex={itemIndex}\n isDragOverlay={isDragOverlay}\n minHeight=\"0px\"\n height=\"24px\"\n CustomRowContentRenderer={RowContent}\n focusedRowId={focusedRowId}\n drilldownRowId={drilldownRowId}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useLayoutEffect, useMemo, useRef } from 'react';\nimport { RowRenderer } from '../../exported-related/RowRenderer';\nimport { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from '../../styled';\nimport type { RowVariantProps } from './types';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst RowContent: React.ComponentType<RowVariantProps> = (props) => {\n const {\n row,\n ctx,\n ctx: {\n tableProps: { groupedRowsRenderHeader, disabledRows },\n },\n backgroundColor = 'white',\n focusedRowId,\n drilldownRowId,\n } = props;\n\n const rowRef = useRef<HTMLDivElement>(null);\n\n const hasExpandCell = useMemo(\n () => row.original.subRows && row.cells.find((cell) => cell.column.accessor === 'expandRowColumn'),\n [row],\n );\n\n const titleContent = useMemo(() => {\n if (typeof groupedRowsRenderHeader === 'function') {\n return groupedRowsRenderHeader(row.original.dimsumHeaderValue, row.original.subRows);\n }\n return row.original.dimsumHeaderValue;\n }, [groupedRowsRenderHeader, row]);\n\n useLayoutEffect(() => {\n if (row.uid === focusedRowId) {\n rowRef.current?.focus();\n }\n }, [focusedRowId, row.uid]);\n\n const isDisabled = useMemo(() => disabledRows[row.uid] !== undefined, [disabledRows, row]);\n return (\n <StyledCellContainer\n ref={rowRef}\n minHeight=\"0px\"\n tabIndex={0}\n role=\"row\"\n backgroundColor={backgroundColor}\n aria-disabled={isDisabled ? 'true' : 'false'}\n isDisabled={isDisabled}\n data-testid={DATA_TESTID.DATA_TABLE_ROW_HEADER_CONTENT}\n >\n <GroupHeaderContainer\n data-testid={DATA_TESTID.DATA_TABLE_ROW_GROUP_HEADER}\n cols={hasExpandCell ? ['min-content', 'auto'] : ['auto']}\n paddingLeft={hasExpandCell ? '2px' : '8px'}\n >\n {hasExpandCell && (\n <expandRowColumn.Cell\n row={row}\n cell={row.cells[0]}\n isRowSelected={drilldownRowId === row.uid}\n ctx={ctx}\n draggableProps={{}}\n />\n )}\n <GroupHeaderTitle>{titleContent}</GroupHeaderTitle>\n </GroupHeaderContainer>\n </StyledCellContainer>\n );\n};\n\nexport const RowVariantHeader: React.ComponentType<RowVariantProps> = ({\n row,\n itemIndex,\n isDragOverlay,\n focusedRowId,\n drilldownRowId,\n}) => (\n <RowRenderer\n row={row}\n itemIndex={itemIndex}\n isDragOverlay={isDragOverlay}\n minHeight=\"0px\"\n height=\"24px\"\n CustomRowContentRenderer={RowContent}\n focusedRowId={focusedRowId}\n drilldownRowId={drilldownRowId}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDjB;AAnDN,mBAAwD;AACxD,yBAA4B;AAC5B,oBAA4E;AAE5E,qBAAgC;AAChC,uBAA4B;AAE5B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,YAAY,EAAE,yBAAyB,aAAa;AAAA,IACtD;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAS,qBAAuB,IAAI;AAE1C,QAAM,oBAAgB;AAAA,IACpB,MAAM,IAAI,SAAS,WAAW,IAAI,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,aAAa,iBAAiB;AAAA,IACjG,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,OAAO,4BAA4B,YAAY;AACjD,aAAO,wBAAwB,IAAI,SAAS,mBAAmB,IAAI,SAAS,OAAO;AAAA,IACrF;AACA,WAAO,IAAI,SAAS;AAAA,EACtB,GAAG,CAAC,yBAAyB,GAAG,CAAC;AAEjC,oCAAgB,MAAM;AACpB,QAAI,IAAI,QAAQ,cAAc;AAC5B,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,cAAc,IAAI,GAAG,CAAC;AAE1B,QAAM,iBAAa,sBAAQ,MAAM,aAAa,IAAI,SAAS,QAAW,CAAC,cAAc,GAAG,CAAC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,iBAAe,aAAa,SAAS;AAAA,MACrC;AAAA,MACA,eAAa,6BAAY;AAAA,MAEzB;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,6BAAY;AAAA,UACzB,MAAM,gBAAgB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AAAA,UACvD,aAAa,gBAAgB,QAAQ;AAAA,UAEpC;AAAA,6BACC;AAAA,cAAC,+BAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,MAAM,IAAI,MAAM;AAAA,gBAChB,eAAe,mBAAmB,IAAI;AAAA,gBACtC;AAAA,gBACA,gBAAgB,CAAC;AAAA;AAAA,YACnB;AAAA,YAEF,4CAAC,kCAAkB,wBAAa;AAAA;AAAA;AAAA,MAClC;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,mBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAU;AAAA,IACV,QAAO;AAAA,IACP,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -301,6 +301,13 @@ const StyledCellContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
301
301
|
border: 1px solid ${props.theme.colors.brand[500]};
|
|
302
302
|
`}
|
|
303
303
|
|
|
304
|
-
|
|
304
|
+
${GroupHeaderTitle} {
|
|
305
|
+
color: ${(props) => props.isDisabled ? props.theme.colors.neutral["200"] : props.theme.colors.neutral["700"]};
|
|
306
|
+
}
|
|
307
|
+
color: ${(props) => props.isDisabled ? props.theme.colors.neutral["200"] : "#333333"};
|
|
308
|
+
|
|
309
|
+
svg {
|
|
310
|
+
fill: ${(props) => props.isDisabled ? props.theme.colors.neutral["200"] : props.theme.colors.brand["800"]};
|
|
311
|
+
}
|
|
305
312
|
`;
|
|
306
313
|
//# sourceMappingURL=styled.js.map
|
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 { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ 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)`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\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)<WidthAndHeight & { 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)<WidthAndHeight>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n overflow: auto;\n height: 100%;\n width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n cols: string[];\n isExpandable: boolean;\n colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n cols,\n colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n if (!cols) return '';\n if (colsLayoutStyle === 'fixed') {\n const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n return `grid-template-columns: ${widthAttr}`;\n }\n\n return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n colsLayoutStyle: string;\n totalColumnsWidth: number | string;\n}>`\n position: relative; /* ie11 fallback */\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle }>`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n isExpandable: props.isExpandable,\n colsLayoutStyle: props.colsLayoutStyle,\n })};\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<any>`\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.div<{ isResizing: boolean }>`\n display: inline-block;\n background: transparent;\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: relative; /* ie11 fallback */\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: string }>`\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 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)<{ backgroundColor?: string }>`\n position: relative;\n z-index: 2;\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n\n width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n colsLayoutStyle: props.colLayoutStyle,\n isExpandable: props.isExpandable,\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 color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ 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)`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\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)<WidthAndHeight & { 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)<WidthAndHeight>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n overflow: auto;\n height: 100%;\n width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n cols: string[];\n isExpandable: boolean;\n colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n cols,\n colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n if (!cols) return '';\n if (colsLayoutStyle === 'fixed') {\n const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n return `grid-template-columns: ${widthAttr}`;\n }\n\n return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n colsLayoutStyle: string;\n totalColumnsWidth: number | string;\n}>`\n position: relative; /* ie11 fallback */\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle }>`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n isExpandable: props.isExpandable,\n colsLayoutStyle: props.colsLayoutStyle,\n })};\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<any>`\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.div<{ isResizing: boolean }>`\n display: inline-block;\n background: transparent;\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: relative; /* ie11 fallback */\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: string }>`\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 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)<{ backgroundColor?: string }>`\n position: relative;\n z-index: 2;\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n\n width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n colsLayoutStyle: props.colLayoutStyle,\n isExpandable: props.isExpandable,\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -5,7 +5,7 @@ import { StyledFocusWithin } from "../../../styled";
|
|
|
5
5
|
const dragHandleColumn = {
|
|
6
6
|
id: "dragHandleColumn",
|
|
7
7
|
Header: () => /* @__PURE__ */ jsx("div", {}),
|
|
8
|
-
Cell: ({ row, isRowSelected, cell, isDragOverlay, draggableProps }) => /* @__PURE__ */ jsx(
|
|
8
|
+
Cell: ({ row, isRowSelected, cell, isDragOverlay, draggableProps, isDisabledRow }) => /* @__PURE__ */ jsx(
|
|
9
9
|
StyledFocusWithin,
|
|
10
10
|
{
|
|
11
11
|
style: { width: "100%", height: "100%" },
|
|
@@ -19,7 +19,8 @@ const dragHandleColumn = {
|
|
|
19
19
|
if (!isDragOverlay)
|
|
20
20
|
cell.ref.current = _ref;
|
|
21
21
|
},
|
|
22
|
-
isDragOverlay
|
|
22
|
+
isDragOverlay,
|
|
23
|
+
isDisabled: isDisabledRow
|
|
23
24
|
},
|
|
24
25
|
row.uid
|
|
25
26
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnDragHandle/ColumnDragHandle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { DnDHandle } from '../../../parts';\nimport { StyledFocusWithin } from '../../../styled';\nimport type { TypescriptColumn } from '../../../types/props';\n\nexport const dragHandleColumn: TypescriptColumn<HTMLDivElement> = {\n // Build our singleSelecter column\n id: 'dragHandleColumn', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ row, isRowSelected, cell, isDragOverlay, draggableProps }) => (\n <StyledFocusWithin\n style={{ width: '100%', height: '100%' }}\n hideFocus={draggableProps && draggableProps.isDragging}\n >\n <DnDHandle\n id={row.uid}\n key={row.uid}\n isReachable={isRowSelected}\n innerRef={(_ref) => {\n if (!isDragOverlay) cell.ref.current = _ref;\n }}\n isDragOverlay={isDragOverlay}\n />\n </StyledFocusWithin>\n ),\n textWrap: 'wrap-all',\n width: 24,\n padding: 4,\n canResize: false,\n disableDnD: true,\n isFocuseable: false,\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACUP;AARhB,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAG3B,MAAM,mBAAqD;AAAA,EAEhE,IAAI;AAAA,EAEJ,QAAQ,MAAM,oBAAC,SAAI;AAAA,EACnB,MAAM,CAAC,EAAE,KAAK,eAAe,MAAM,eAAe,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { DnDHandle } from '../../../parts';\nimport { StyledFocusWithin } from '../../../styled';\nimport type { TypescriptColumn } from '../../../types/props';\n\nexport const dragHandleColumn: TypescriptColumn<HTMLDivElement> = {\n // Build our singleSelecter column\n id: 'dragHandleColumn', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ row, isRowSelected, cell, isDragOverlay, draggableProps, isDisabledRow }) => (\n <StyledFocusWithin\n style={{ width: '100%', height: '100%' }}\n hideFocus={draggableProps && draggableProps.isDragging}\n >\n <DnDHandle\n id={row.uid}\n key={row.uid}\n isReachable={isRowSelected}\n innerRef={(_ref) => {\n if (!isDragOverlay) cell.ref.current = _ref;\n }}\n isDragOverlay={isDragOverlay}\n isDisabled={isDisabledRow}\n />\n </StyledFocusWithin>\n ),\n textWrap: 'wrap-all',\n width: 24,\n padding: 4,\n canResize: false,\n disableDnD: true,\n isFocuseable: false,\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACUP;AARhB,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAG3B,MAAM,mBAAqD;AAAA,EAEhE,IAAI;AAAA,EAEJ,QAAQ,MAAM,oBAAC,SAAI;AAAA,EACnB,MAAM,CAAC,EAAE,KAAK,eAAe,MAAM,eAAe,gBAAgB,cAAc,MAC9E;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,MACvC,WAAW,kBAAkB,eAAe;AAAA,MAE5C;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,IAAI;AAAA,UAER,aAAa;AAAA,UACb,UAAU,CAAC,SAAS;AAClB,gBAAI,CAAC;AAAe,mBAAK,IAAI,UAAU;AAAA,UACzC;AAAA,UACA;AAAA,UACA,YAAY;AAAA;AAAA,QANP,IAAI;AAAA,MAOX;AAAA;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,6 +7,7 @@ import { StyledFocusWithin } from "../../../styled";
|
|
|
7
7
|
import { DATA_TESTID } from "../../../configs/constants";
|
|
8
8
|
const disabledCaret = css`
|
|
9
9
|
cursor: not-allowed;
|
|
10
|
+
pointer-events: none;
|
|
10
11
|
`;
|
|
11
12
|
const StyledSpan = styled.span`
|
|
12
13
|
cursor: pointer;
|
|
@@ -15,7 +16,6 @@ const StyledSpan = styled.span`
|
|
|
15
16
|
display: flex;
|
|
16
17
|
justify-content: center;
|
|
17
18
|
align-items: center;
|
|
18
|
-
|
|
19
19
|
${({ disabled }) => disabled && disabledCaret}
|
|
20
20
|
`;
|
|
21
21
|
const ArrowDown = ({ color = ["brand-primary", "600"], ...rest }) => /* @__PURE__ */ jsx(ArrowheadDown, { size: "s", color, "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN, ...rest });
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnExpand/ColumnExpand.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useCallback } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { TypescriptColumn } from '../../../types/props';\nimport { StyledFocusWithin } from '../../../styled';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n`;\nconst StyledSpan = styled.span<{ disabled: boolean }>`\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuBrB;AAtBF,SAAgB,SAAS,mBAAmB;AAC5C,SAAS,eAAe,gBAAgB,wBAAwB;AAChE,SAAS,QAAQ,WAAW;AAE5B,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAE5B,MAAM,gBAAgB;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useMemo, useCallback } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { TypescriptColumn } from '../../../types/props';\nimport { StyledFocusWithin } from '../../../styled';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n pointer-events: none;\n`;\nconst StyledSpan = styled.span<{ disabled: boolean }>`\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n ${({ disabled }) => disabled && disabledCaret}\n`;\n\nconst ArrowDown = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n <ArrowheadRight\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n style={{ transform: 'rotate(45deg)' }}\n />\n);\n\nconst ArrowRight = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: TypescriptColumn<HTMLSpanElement> = {\n // Build our expander column\n id: 'expander', // Make sure it has an ID\n accessor: 'expandRowColumn',\n Header: ({ ctx }) => {\n const {\n tableProps: { expandedRows, onRowExpand, disabledRows },\n allDataFlattened,\n } = ctx;\n\n const allExpandable = useMemo(() => {\n const expandable: Record<string, boolean> = {};\n allDataFlattened.forEach((row) => {\n const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n });\n return expandable;\n }, [allDataFlattened, disabledRows]);\n\n const isAllRowsExpanded = useMemo(\n () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n [allExpandable, expandedRows],\n );\n\n const onExpandedAllHandler = useCallback(() => {\n if (isAllRowsExpanded) onRowExpand({}, 'All');\n else onRowExpand({ ...allExpandable }, 'All');\n }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n onExpandedAllHandler();\n e.preventDefault();\n }\n },\n [onExpandedAllHandler],\n );\n\n const GlobalExpandIcon = useMemo(() => {\n if (isAllRowsExpanded) return <ArrowDown />;\n if (Object.keys(expandedRows).length) return <ArrowMixed />;\n return <ArrowRight />;\n }, [expandedRows, isAllRowsExpanded]);\n\n return (\n <StyledFocusWithin>\n <StyledSpan\n role=\"button\"\n tabIndex={0}\n title=\"Toggle All Rows Expanded\"\n onClick={onExpandedAllHandler}\n onKeyDown={onKeyDownHandler}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n aria-expanded={isAllRowsExpanded}\n style={{ width: '24px', height: '24px' }}\n >\n {GlobalExpandIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {\n const {\n tableProps: { dragAndDropRows, expandedRows, onRowExpand, disabledRows },\n } = ctx;\n\n const uniqueId = row.uid;\n\n const isExpanded = !!expandedRows[uniqueId];\n\n const shouldPrintCaret = useMemo(\n () =>\n (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n row.original.tableRowDetails ||\n row.original.dimsumHeaderValue,\n [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n );\n\n const onRowExpandHandler = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (disabledRows[row.uid]) return;\n e.stopPropagation(); // to prevent on row click\n if (expandedRows[uniqueId]) {\n delete expandedRows[uniqueId];\n } else {\n expandedRows[uniqueId] = true;\n }\n onRowExpand({ ...expandedRows }, uniqueId);\n },\n [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n );\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onRowExpandHandler(e);\n }\n },\n [onRowExpandHandler],\n );\n\n const isDragging = draggableProps && draggableProps.isDragging;\n const isDragOverlay = dragAndDropRows && !draggableProps;\n\n const indentStyle: React.CSSProperties = useMemo(\n () => ({\n marginLeft: `${row.depth * 32}px`,\n marginRight: '12px',\n paddingLeft: '3px',\n paddingRight: '2px',\n position: 'relative',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n }),\n [row.depth],\n );\n\n const PureCaretIcon = useMemo(() => {\n const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n return (\n <Caret\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n />\n );\n }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n if (shouldPrintCaret)\n return (\n <StyledFocusWithin style={indentStyle}>\n <StyledSpan\n role=\"button\"\n key={`${row.uid}-expand-button`}\n title=\"Toggle Row Expanded\"\n onClick={onRowExpandHandler}\n onKeyDown={onKeyDownHandler}\n ref={cell.ref}\n tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n data-testid=\"data-table-row-expand-cell\"\n aria-expanded={isExpanded}\n isRightArrow={!isExpanded || isDragging || isDragOverlay}\n disabled={disabledRows[row.uid]}\n aria-disabled={disabledRows[row.uid]}\n >\n {PureCaretIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n\n if (row.depth !== 0)\n return (\n <span style={indentStyle}>\n <ArrowShortReturn\n size=\"s\"\n data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n color={['brand-primary', '600']}\n />\n </span>\n );\n\n return <div style={{ width: '36px' }} />;\n },\n textWrap: 'wrap',\n canResize: false,\n width: 25,\n padding: 0,\n isFocuseable: false,\n disableDnD: true,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,8 +43,7 @@ const multiSelectColumn = {
|
|
|
43
43
|
"data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX,
|
|
44
44
|
"aria-label": "Toggle all rows selected",
|
|
45
45
|
checked: currentGlobalState,
|
|
46
|
-
onChange: onChangeHandler
|
|
47
|
-
style: { cursor: "pointer" }
|
|
46
|
+
onChange: onChangeHandler
|
|
48
47
|
}
|
|
49
48
|
);
|
|
50
49
|
},
|
|
@@ -106,14 +105,11 @@ const multiSelectColumn = {
|
|
|
106
105
|
id: `data-table-checkbox-${uid}`,
|
|
107
106
|
"data-testid": DATA_TESTID.DATA_TABLE_CHECKBOX,
|
|
108
107
|
"aria-label": "Toggle row selected",
|
|
109
|
-
"aria-checked": selectedState,
|
|
110
|
-
"aria-disabled": false,
|
|
111
108
|
checked: selectedState,
|
|
112
109
|
onChange: onChangeHandler,
|
|
113
110
|
disabled: disabledRows[row.uid],
|
|
114
111
|
innerRef: cell.ref,
|
|
115
|
-
tabIndex: isRowSelected ? 0 : -1
|
|
116
|
-
style: { cursor: "pointer" }
|
|
112
|
+
tabIndex: isRowSelected ? 0 : -1
|
|
117
113
|
}
|
|
118
114
|
) });
|
|
119
115
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useRef, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport type { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n allDataFlattened,\n flattenedData,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n const selectionKeyCount = Object.keys(dtSelection).filter((selection) => dtSelection[selection]).length;\n\n const currentGlobalState = useMemo(\n () =>\n selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.id]).length\n ? 'mixed'\n : selectionKeyCount > 0,\n [selectionKeyCount, flattenedData, disabledRows],\n );\n\n // global state toggling: false to true, mixed to true, true to false\n const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n const newSelection: TypescriptSelection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n return newSelectionObject;\n }, {});\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (newState: boolean, e: React.ChangeEvent) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const ariaControls = useMemo(\n () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n [allDataFlattened],\n );\n\n return (\n <DSControlledCheckbox\n aria-controls={ariaControls}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n aria-label=\"Toggle all rows selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACoDjB;AApDN,SAAgB,SAAS,QAAQ,mBAAmB;AACpD,SAAS,4BAA4B;AAErC,SAAS,mBAAmB;AAErB,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,IAAI,MAAM;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,aAAa;AAAA,MACzD;AAAA,MACA;AAAA,IACF,IAAI;AAGJ,UAAM,cAAc,aAAa,CAAC;AAClC,UAAM,oBAAoB,OAAO,KAAK,WAAW,EAAE,OAAO,CAACA,eAAc,YAAYA,WAAU,EAAE;AAEjG,UAAM,qBAAqB;AAAA,MACzB,MACE,oBAAoB,KAAK,oBAAoB,cAAc,OAAO,CAAC,UAAU,CAAC,aAAa,MAAM,GAAG,EAAE,SAClG,UACA,oBAAoB;AAAA,MAC1B,CAAC,mBAAmB,eAAe,YAAY;AAAA,IACjD;AAGA,UAAM,4BAA4B,QAAQ,MAAM,uBAAuB,MAAM,CAAC,kBAAkB,CAAC;AAEjG,UAAM,eAAoC,QAAQ,MAAM;AACtD,UAAI,CAAC;AAA2B,eAAO,CAAC;AAExC,aAAO,iBAAiB,OAA4B,CAAC,oBAAoB,UAAU;AACjF,2BAAmB,MAAM,OAAO,CAAC,aAAa,MAAM;AACpD,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAAmB,MAAyB;AAC3C,0BAAkB,cAAc,OAAO,CAAC;AAAA,MAC1C;AAAA,MACA,CAAC,cAAc,iBAAiB;AAAA,IAClC;AAEA,UAAM,eAAe;AAAA,MACnB,MAAM,iBAAiB,IAAI,CAAC,UAAU,uBAAuB,MAAM,KAAK,EAAE,KAAK,GAAG;AAAA,MAClF,CAAC,gBAAgB;AAAA,IACnB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe;AAAA,QACf,eAAa,YAAY;AAAA,QACzB,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useRef, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport type { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n allDataFlattened,\n flattenedData,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n const selectionKeyCount = Object.keys(dtSelection).filter((selection) => dtSelection[selection]).length;\n\n const currentGlobalState = useMemo(\n () =>\n selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.id]).length\n ? 'mixed'\n : selectionKeyCount > 0,\n [selectionKeyCount, flattenedData, disabledRows],\n );\n\n // global state toggling: false to true, mixed to true, true to false\n const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n const newSelection: TypescriptSelection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n return newSelectionObject;\n }, {});\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (newState: boolean, e: React.ChangeEvent) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const ariaControls = useMemo(\n () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n [allDataFlattened],\n );\n\n return (\n <DSControlledCheckbox\n aria-controls={ariaControls}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n aria-label=\"Toggle all rows selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n />\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n isShiftPressed,\n setIsShiftPressed,\n flattenedData,\n lastSelected,\n } = ctx;\n\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\n const isShiftPressedKeyRef = useRef(false);\n const onChangeHandler = useCallback(\n (newState: boolean, e: React.ChangeEvent) => {\n const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n const now = Number.parseInt(uid, 10);\n if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n const correctDataIndex = flattenedData[i].id;\n if (!Object.keys(disabledRows).includes(correctDataIndex))\n newSelection[correctDataIndex] = newSelection[lastSelected.current];\n if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n }\n }\n lastSelected.current = now;\n onSelectionChange(newSelection, uid, e);\n },\n [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n );\n\n const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n e.stopPropagation();\n },\n [setIsShiftPressed],\n );\n\n const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(false);\n isShiftPressedKeyRef.current = false;\n e.stopPropagation();\n },\n [setIsShiftPressed],\n );\n\n const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n if (e.shiftKey) {\n isShiftPressedKeyRef.current = true;\n }\n e.stopPropagation();\n }, []);\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n <DSControlledCheckbox\n id={`data-table-checkbox-${uid}`}\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n aria-label=\"Toggle row selected\"\n checked={selectedState}\n onChange={onChangeHandler}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </div>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 7,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["selection"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useMemo,
|
|
3
|
+
import { useMemo, useLayoutEffect, useRef } from "react";
|
|
4
4
|
import { INTERNAL_COLUMNS } from "../../addons/Columns";
|
|
5
5
|
import { DATA_TESTID } from "../../configs/constants";
|
|
6
6
|
import { Cells } from "../../parts/Cells";
|
|
@@ -65,21 +65,13 @@ const DefaultRowContentRenderer = (props) => {
|
|
|
65
65
|
}
|
|
66
66
|
return padding;
|
|
67
67
|
}, [row.depth, visibleColumns]);
|
|
68
|
-
const handleSelectDisableRow = useCallback(
|
|
69
|
-
(e) => {
|
|
70
|
-
if (disabledRows[row.uid]) {
|
|
71
|
-
e.preventDefault();
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
[disabledRows, row.uid]
|
|
75
|
-
);
|
|
76
68
|
const DetailsView = row.original.tableRowDetails;
|
|
77
69
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
78
70
|
/* @__PURE__ */ jsx(
|
|
79
71
|
StyledCellContainer,
|
|
80
72
|
{
|
|
81
73
|
ref: rowRef,
|
|
82
|
-
tabIndex:
|
|
74
|
+
tabIndex: 0,
|
|
83
75
|
role: "row",
|
|
84
76
|
"aria-rowindex": row.realIndex + 1,
|
|
85
77
|
"aria-label": ariaLabelMessage(row, selection?.[row.uid] === true),
|
|
@@ -98,7 +90,6 @@ const DefaultRowContentRenderer = (props) => {
|
|
|
98
90
|
selected: noSelectionColumn && selection?.[row.uid] === true,
|
|
99
91
|
isDisabled: disabledRows[row.uid],
|
|
100
92
|
"data-testid": DATA_TESTID.DATA_TABLE_ROW_CONTENT,
|
|
101
|
-
onMouseDown: handleSelectDisableRow,
|
|
102
93
|
children: /* @__PURE__ */ jsx(Cells, { row, isRowSelected: drilldownRowId === row.uid, isDragOverlay }, row.uid)
|
|
103
94
|
},
|
|
104
95
|
row.uid
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/DefaultRowContentRenderer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useLayoutEffect, useRef } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { Cells } from '../../parts/Cells';\nimport type { RowVariantProps } from '../../parts/RowVariants/types';\nimport { StyledCellContainer } from '../../styled';\nimport type { TypescriptRow } from '../../types/props';\nimport { DropIndicatorPosition } from '../../types/props';\n\nconst DetailsWrapper = (props) => (\n // This can be further customized\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n data-role=\"detail-view\"\n style={{\n borderTop: '1px solid #EBEDF0',\n borderBottom: '1px solid #EBEDF0',\n }}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n >\n {props.children}\n </div>\n);\n\nconst ariaLabelMessage = (row: TypescriptRow, selected: boolean) =>\n `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n selected ? 'Selected. ' : ''\n }To interact with the cells press enter`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n const {\n row,\n ctx: {\n tableProps: { isExpandable, colsLayoutStyle, selection, noSelectionColumn, expandedRows, disabledRows },\n layoutHelpers: { gridLayout },\n visibleColumns,\n },\n draggableProps,\n isDragOverlay,\n backgroundColor = 'white',\n dropIndicatorPosition,\n isDropValid,\n focusedRowId,\n drilldownRowId,\n compact,\n } = props;\n\n const rowRef = useRef<HTMLDivElement>(null);\n const isDndActive = draggableProps && draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n\n useLayoutEffect(() => {\n if (row.uid === focusedRowId) {\n rowRef.current?.focus();\n }\n }, [focusedRowId, row.uid]);\n\n const gridTemplateColProps = useMemo(\n () => ({\n cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,\n isExpandable,\n colLayoutStyle: colsLayoutStyle,\n }),\n [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable],\n );\n\n const detailsIndent = useMemo(() => {\n let padding = 0;\n for (let i = 0; i < visibleColumns.length; i += 1) {\n if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n padding += visibleColumns[i].width;\n } else {\n padding += row.depth * 32 + 15;\n break;\n }\n }\n return padding;\n }, [row.depth, visibleColumns]);\n\n const
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACcrB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, useLayoutEffect, useRef } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { Cells } from '../../parts/Cells';\nimport type { RowVariantProps } from '../../parts/RowVariants/types';\nimport { StyledCellContainer } from '../../styled';\nimport type { TypescriptRow } from '../../types/props';\nimport { DropIndicatorPosition } from '../../types/props';\n\nconst DetailsWrapper = (props) => (\n // This can be further customized\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n data-role=\"detail-view\"\n style={{\n borderTop: '1px solid #EBEDF0',\n borderBottom: '1px solid #EBEDF0',\n }}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n >\n {props.children}\n </div>\n);\n\nconst ariaLabelMessage = (row: TypescriptRow, selected: boolean) =>\n `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n selected ? 'Selected. ' : ''\n }To interact with the cells press enter`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n const {\n row,\n ctx: {\n tableProps: { isExpandable, colsLayoutStyle, selection, noSelectionColumn, expandedRows, disabledRows },\n layoutHelpers: { gridLayout },\n visibleColumns,\n },\n draggableProps,\n isDragOverlay,\n backgroundColor = 'white',\n dropIndicatorPosition,\n isDropValid,\n focusedRowId,\n drilldownRowId,\n compact,\n } = props;\n\n const rowRef = useRef<HTMLDivElement>(null);\n const isDndActive = draggableProps && draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n\n useLayoutEffect(() => {\n if (row.uid === focusedRowId) {\n rowRef.current?.focus();\n }\n }, [focusedRowId, row.uid]);\n\n const gridTemplateColProps = useMemo(\n () => ({\n cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,\n isExpandable,\n colLayoutStyle: colsLayoutStyle,\n }),\n [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable],\n );\n\n const detailsIndent = useMemo(() => {\n let padding = 0;\n for (let i = 0; i < visibleColumns.length; i += 1) {\n if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n padding += visibleColumns[i].width;\n } else {\n padding += row.depth * 32 + 15;\n break;\n }\n }\n return padding;\n }, [row.depth, visibleColumns]);\n\n const DetailsView = row.original.tableRowDetails;\n\n return (\n <>\n <StyledCellContainer\n ref={rowRef}\n key={row.uid}\n tabIndex={0}\n role=\"row\"\n aria-rowindex={row.realIndex + 1}\n aria-label={ariaLabelMessage(row, selection?.[row.uid] === true)}\n aria-selected={selection?.[row.uid] === true}\n aria-expanded={isExpandable ? expandedRows[row.uid] === true : undefined}\n aria-disabled={disabledRows[row.uid]}\n {...gridTemplateColProps}\n backgroundColor={backgroundColor}\n height={compact ? '24px' : 'auto'}\n minHeight={compact ? '24px' : '36px'}\n isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n isDropValid={isDropValid}\n shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n isDragOverlay={isDragOverlay}\n isDragging={isDragging}\n selected={noSelectionColumn && selection?.[row.uid] === true}\n isDisabled={disabledRows[row.uid]}\n data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n >\n <Cells row={row} isRowSelected={drilldownRowId === row.uid} isDragOverlay={isDragOverlay} key={row.uid} />\n </StyledCellContainer>\n {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n <DetailsWrapper>\n <DetailsView row={row} detailsIndent={detailsIndent} />\n </DetailsWrapper>\n )}\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,14 +17,9 @@ const useRowRendererHandlers = ({
|
|
|
17
17
|
lastSelected,
|
|
18
18
|
flattenedData
|
|
19
19
|
} = useContext(DataTableContext);
|
|
20
|
-
const
|
|
21
|
-
(opt) => !disabledRows[opt.uid],
|
|
22
|
-
[disabledRows]
|
|
23
|
-
);
|
|
24
|
-
const findInCircularList = (list, from, criteria, step = 1) => {
|
|
20
|
+
const findInCircularList = (list, from, step = 1) => {
|
|
25
21
|
for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
|
|
26
|
-
|
|
27
|
-
return i;
|
|
22
|
+
return i;
|
|
28
23
|
}
|
|
29
24
|
return from;
|
|
30
25
|
};
|
|
@@ -110,12 +105,12 @@ const useRowRendererHandlers = ({
|
|
|
110
105
|
if (e.code === "ArrowDown") {
|
|
111
106
|
e.preventDefault();
|
|
112
107
|
e.stopPropagation();
|
|
113
|
-
const next = findInCircularList(items, itemIndex
|
|
108
|
+
const next = findInCircularList(items, itemIndex);
|
|
114
109
|
setFocusedRowId(items[next].uid);
|
|
115
110
|
}
|
|
116
111
|
if (e.code === "ArrowUp") {
|
|
117
112
|
e.preventDefault();
|
|
118
|
-
const prev = findInCircularList(items, itemIndex,
|
|
113
|
+
const prev = findInCircularList(items, itemIndex, -1);
|
|
119
114
|
setFocusedRowId(items[prev].uid);
|
|
120
115
|
}
|
|
121
116
|
},
|
|
@@ -128,7 +123,6 @@ const useRowRendererHandlers = ({
|
|
|
128
123
|
handleItemClick,
|
|
129
124
|
items,
|
|
130
125
|
itemIndex,
|
|
131
|
-
isOptionFocuseable,
|
|
132
126
|
setFocusedRowId
|
|
133
127
|
]
|
|
134
128
|
);
|
|
@@ -142,11 +136,11 @@ const useRowRendererHandlers = ({
|
|
|
142
136
|
);
|
|
143
137
|
const handleOnFocus = useCallback(
|
|
144
138
|
(e) => {
|
|
145
|
-
if (
|
|
139
|
+
if (e.target && e.target.getAttribute("role") === "row") {
|
|
146
140
|
setFocusedRowId(row.uid);
|
|
147
141
|
}
|
|
148
142
|
},
|
|
149
|
-
[row.uid, setFocusedRowId
|
|
143
|
+
[row.uid, setFocusedRowId]
|
|
150
144
|
);
|
|
151
145
|
return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };
|
|
152
146
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowRendererHandlers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: InternalTypescriptRow;\n itemIndex: number;\n items: InternalTypescriptRow[];\n draggableProps: SortableItemContextType['draggableProps'];\n isDragOverlay: boolean;\n drilldownRowId: string | null;\n}): {\n handleItemClick: React.MouseEventHandler;\n handleKeyDown: React.KeyboardEventHandler;\n handleOnBlur: React.FocusEventHandler;\n handleOnFocus: React.FocusEventHandler;\n} => {\n const {\n tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },\n virtualListHelpers: { scrollToIndex },\n setDrilldownRowId,\n setFocusedRowId,\n lastSelected,\n flattenedData,\n } = useContext(DataTableContext);\n\n const
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,wBAAwB;AAI1B,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAYK;AACH,QAAM;AAAA,IACJ,YAAY,EAAE,YAAY,mBAAmB,cAAc,WAAW,YAAY,aAAa;AAAA,IAC/F,oBAAoB,EAAE,cAAc;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,QAAM,qBAAqB
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: InternalTypescriptRow;\n itemIndex: number;\n items: InternalTypescriptRow[];\n draggableProps: SortableItemContextType['draggableProps'];\n isDragOverlay: boolean;\n drilldownRowId: string | null;\n}): {\n handleItemClick: React.MouseEventHandler;\n handleKeyDown: React.KeyboardEventHandler;\n handleOnBlur: React.FocusEventHandler;\n handleOnFocus: React.FocusEventHandler;\n} => {\n const {\n tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },\n virtualListHelpers: { scrollToIndex },\n setDrilldownRowId,\n setFocusedRowId,\n lastSelected,\n flattenedData,\n } = useContext(DataTableContext);\n\n const findInCircularList = (\n list: InternalTypescriptRow[],\n from: number,\n step = 1,\n // eslint-disable-next-line max-params\n ): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n return i;\n }\n return from; // return same item\n };\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent, { original, uid } = row) => {\n if (disabledRows[uid]) return;\n onRowClick(original, e, uid);\n if (selection && onSelectionChange) {\n if (selectSingle) {\n onSelectionChange({ [uid]: true }, uid, e);\n } else {\n const newSelection = { ...selection, [uid]: !selection[uid] }; // we only want true and mixed values\n if (!newSelection[uid]) delete newSelection[uid]; // if newState is false, remove from the new selection\n const now = Number.parseInt(uid, 10);\n if (e.shiftKey && lastSelected.current > -1) {\n for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n const correctDataIndex = flattenedData[i].id;\n if (!Object.keys(disabledRows).includes(correctDataIndex))\n newSelection[correctDataIndex] = newSelection[lastSelected.current];\n if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n }\n }\n lastSelected.current = now;\n\n onSelectionChange(newSelection, uid, e);\n }\n }\n onRowFocus(\n {\n itemIndex,\n scrollToItem: (\n opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n align: 'start',\n },\n ) => scrollToIndex(itemIndex, opts),\n original,\n },\n e,\n );\n },\n [\n row,\n disabledRows,\n onRowClick,\n selection,\n onSelectionChange,\n onRowFocus,\n itemIndex,\n selectSingle,\n lastSelected,\n flattenedData,\n scrollToIndex,\n ],\n );\n\n const isActive = draggableProps && draggableProps.active;\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (isDragOverlay || isActive) {\n e.preventDefault();\n return;\n }\n const { target } = e;\n const isChildEvent = (target as HTMLElement).getAttribute('role') !== 'row'; // if the event comes from a row\n\n if (e.code === 'Enter') {\n if (!isChildEvent) {\n e.preventDefault();\n if (drilldownRowId !== row.uid) {\n setDrilldownRowId(row.uid);\n setTimeout(() => {\n const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n if (focuseableCell) focuseableCell.ref.current?.focus?.();\n });\n }\n }\n }\n if (e.code === 'Space') {\n if (!isChildEvent) {\n e.preventDefault();\n }\n handleItemClick(e, row);\n }\n if (e.code === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n const next = findInCircularList(items, itemIndex);\n setFocusedRowId(items[next].uid);\n }\n if (e.code === 'ArrowUp') {\n e.preventDefault();\n const prev = findInCircularList(items, itemIndex, -1);\n setFocusedRowId(items[prev].uid);\n }\n },\n [\n isDragOverlay,\n isActive,\n drilldownRowId,\n row,\n setDrilldownRowId,\n handleItemClick,\n items,\n itemIndex,\n setFocusedRowId,\n ],\n );\n\n const handleOnBlur: React.FocusEventHandler = useCallback(\n (e) => {\n if (e.relatedTarget?.getAttribute('role') === 'row') {\n setDrilldownRowId(null);\n }\n },\n [setDrilldownRowId],\n );\n\n const handleOnFocus: React.FocusEventHandler = useCallback(\n (e) => {\n if (e.target && e.target.getAttribute('role') === 'row') {\n setFocusedRowId(row.uid);\n }\n },\n [row.uid, setFocusedRowId],\n );\n\n return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -23,6 +23,7 @@ const Cell = ({
|
|
|
23
23
|
const {
|
|
24
24
|
tableProps: { cellRendererProps, disabledRows }
|
|
25
25
|
} = ctx;
|
|
26
|
+
const isDisabledRow = disabledRows[row.uid];
|
|
26
27
|
const { draggableProps } = useContext(SortableItemContext);
|
|
27
28
|
const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);
|
|
28
29
|
const cellProps = useMemo(
|
|
@@ -36,9 +37,10 @@ const Cell = ({
|
|
|
36
37
|
isDragOverlay,
|
|
37
38
|
role: "cell",
|
|
38
39
|
cellStyle,
|
|
39
|
-
column
|
|
40
|
+
column,
|
|
41
|
+
isDisabledRow
|
|
40
42
|
}),
|
|
41
|
-
[cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column]
|
|
43
|
+
[cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow]
|
|
42
44
|
);
|
|
43
45
|
const CellComponent = cell.render;
|
|
44
46
|
const pureCellContent = useMemo(() => {
|
|
@@ -49,7 +51,7 @@ const Cell = ({
|
|
|
49
51
|
] });
|
|
50
52
|
}
|
|
51
53
|
return /* @__PURE__ */ jsx(CellComponent, { ...cellProps });
|
|
52
|
-
}, [CellComponent, cellProps, shouldAddExpandCell]);
|
|
54
|
+
}, [CellComponent, cellProps, isDisabledRow, shouldAddExpandCell]);
|
|
53
55
|
const DefaultCellContentJSX = useMemo(
|
|
54
56
|
() => /* @__PURE__ */ jsx(StyledCellContent, { children: appliedTextWrap === "truncate" ? /* @__PURE__ */ jsx(SimpleTruncatedTooltipText, { value: pureCellContent }) : pureCellContent }),
|
|
55
57
|
[appliedTextWrap, pureCellContent]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/Cell.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useMemo, memo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCell, StyledCellContent } from '../../styled';\nimport { outOfTheBoxEditables } from '../../addons/Editables';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { TypescriptColumn, TypescriptRow } from '../../types/props';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { useCellStyle } from './useCellStyle';\n\nconst PureStandardCell = memo<{ cellStyle: unknown; column: TypescriptColumn }>(({ cellStyle, children, column }) => (\n <StyledCell column={column} style={cellStyle} role=\"cell\" data-testid={DATA_TESTID.DATA_TABLE_CELL}>\n {children}\n </StyledCell>\n));\n\ninterface CellProps {\n cell: any;\n column: TypescriptColumn;\n row: TypescriptRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n cell,\n column,\n row,\n isRowSelected,\n shouldAddExpandCell,\n isDragOverlay,\n}) => {\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { cellRendererProps, disabledRows },\n } = ctx;\n const { draggableProps } = useContext(SortableItemContext);\n\n const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n const cellProps = useMemo(\n () => ({\n ...cellRendererProps,\n cell,\n row,\n isRowSelected,\n ctx,\n draggableProps,\n isDragOverlay,\n role: 'cell',\n cellStyle,\n column,\n }),\n [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column],\n );\n\n const CellComponent = cell.render;\n\n const pureCellContent = useMemo(() => {\n if (shouldAddExpandCell) {\n return (\n <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n {shouldAddExpandCell && <expandRowColumn.Cell {...cellProps} />}\n <CellComponent {...cellProps} />\n </Grid>\n );\n }\n return <CellComponent {...cellProps} />;\n }, [CellComponent, cellProps, shouldAddExpandCell]);\n\n const DefaultCellContentJSX = useMemo(\n () => (\n <StyledCellContent>\n {appliedTextWrap === 'truncate' ? <SimpleTruncatedTooltipText value={pureCellContent} /> : pureCellContent}\n </StyledCellContent>\n ),\n [appliedTextWrap, pureCellContent],\n );\n\n const EditableContentJSX = useMemo(() => {\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function')\n return column.editable({\n DefaultCellRender: DefaultCellContentJSX,\n ...cellProps,\n }) as JSX.Element;\n\n return null;\n }, [DefaultCellContentJSX, cellProps, column]);\n\n return (\n <PureStandardCell {...cellProps}>\n {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n </PureStandardCell>\n );\n};\n\nexport { Cell };\nexport default Cell;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACcrB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useMemo, memo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCell, StyledCellContent } from '../../styled';\nimport { outOfTheBoxEditables } from '../../addons/Editables';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { TypescriptColumn, TypescriptRow } from '../../types/props';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { useCellStyle } from './useCellStyle';\n\nconst PureStandardCell = memo<{ cellStyle: unknown; column: TypescriptColumn }>(({ cellStyle, children, column }) => (\n <StyledCell column={column} style={cellStyle} role=\"cell\" data-testid={DATA_TESTID.DATA_TABLE_CELL}>\n {children}\n </StyledCell>\n));\n\ninterface CellProps {\n cell: any;\n column: TypescriptColumn;\n row: TypescriptRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n cell,\n column,\n row,\n isRowSelected,\n shouldAddExpandCell,\n isDragOverlay,\n}) => {\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { cellRendererProps, disabledRows },\n } = ctx;\n const isDisabledRow = disabledRows[row.uid];\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n const cellProps = useMemo(\n () => ({\n ...cellRendererProps,\n cell,\n row,\n isRowSelected,\n ctx,\n draggableProps,\n isDragOverlay,\n role: 'cell',\n cellStyle,\n column,\n isDisabledRow,\n }),\n [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow],\n );\n\n const CellComponent = cell.render;\n\n const pureCellContent = useMemo(() => {\n if (shouldAddExpandCell) {\n return (\n <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n {shouldAddExpandCell && <expandRowColumn.Cell {...cellProps} />}\n <CellComponent {...cellProps} />\n </Grid>\n );\n }\n return <CellComponent {...cellProps} />;\n }, [CellComponent, cellProps, isDisabledRow, shouldAddExpandCell]);\n\n const DefaultCellContentJSX = useMemo(\n () => (\n <StyledCellContent>\n {appliedTextWrap === 'truncate' ? <SimpleTruncatedTooltipText value={pureCellContent} /> : pureCellContent}\n </StyledCellContent>\n ),\n [appliedTextWrap, pureCellContent],\n );\n\n const EditableContentJSX = useMemo(() => {\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function')\n return column.editable({\n DefaultCellRender: DefaultCellContentJSX,\n ...cellProps,\n }) as JSX.Element;\n\n return null;\n }, [DefaultCellContentJSX, cellProps, column]);\n\n return (\n <PureStandardCell {...cellProps}>\n {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n </PureStandardCell>\n );\n};\n\nexport { Cell };\nexport default Cell;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACcrB,cAsDM,YAtDN;AAbF,SAAgB,YAAY,SAAS,YAAY;AACjD,SAAS,kCAAkC;AAC3C,SAAS,YAAY;AACrB,SAAS,YAAY,yBAAyB;AAC9C,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAEjC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAE7B,MAAM,mBAAmB,KAAuD,CAAC,EAAE,WAAW,UAAU,OAAO,MAC7G,oBAAC,cAAW,QAAgB,OAAO,WAAW,MAAK,QAAO,eAAa,YAAY,iBAChF,UACH,CACD;AAWD,MAAM,OAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB,aAAa;AAAA,EAChD,IAAI;AACJ,QAAM,gBAAgB,aAAa,IAAI;AAEvC,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,CAAC,iBAAiB,SAAS,IAAI,aAAa,QAAQ,mBAAmB;AAE7E,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,MAAM,KAAK,eAAe,KAAK,gBAAgB,eAAe,WAAW,QAAQ,aAAa;AAAA,EACpH;AAEA,QAAM,gBAAgB,KAAK;AAE3B,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,qBAAqB;AACvB,aACE,qBAAC,QAAK,MAAM,CAAC,eAAe,MAAM,GAAG,YAAW,UAAS,QAAO,QAC7D;AAAA,+BAAuB,oBAAC,gBAAgB,MAAhB,EAAsB,GAAG,WAAW;AAAA,QAC7D,oBAAC,iBAAe,GAAG,WAAW;AAAA,SAChC;AAAA,IAEJ;AACA,WAAO,oBAAC,iBAAe,GAAG,WAAW;AAAA,EACvC,GAAG,CAAC,eAAe,WAAW,eAAe,mBAAmB,CAAC;AAEjE,QAAM,wBAAwB;AAAA,IAC5B,MACE,oBAAC,qBACE,8BAAoB,aAAa,oBAAC,8BAA2B,OAAO,iBAAiB,IAAK,iBAC7F;AAAA,IAEF,CAAC,iBAAiB,eAAe;AAAA,EACnC;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,kBAAkB,IAAI,uBAAuB,OAAO;AAC5D,UAAI;AAAmB,eAAO,oBAAC,qBAAmB,GAAG,WAAW,mBAAmB,uBAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa;AAC7B,aAAO,OAAO,SAAS;AAAA,QACrB,mBAAmB;AAAA,QACnB,GAAG;AAAA,MACL,CAAC;AAEH,WAAO;AAAA,EACT,GAAG,CAAC,uBAAuB,WAAW,MAAM,CAAC;AAE7C,SACE,oBAAC,oBAAkB,GAAG,WACnB,iBAAO,YAAY,CAAC,aAAa,IAAI,OAAO,qBAAqB,uBACpE;AAEJ;AAGA,IAAO,eAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|