@elliemae/ds-data-table 3.0.0-alpha.3 → 3.0.0-next.11
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/Filters/Components/SelectFilter/BaseSelectFilter.js +1 -1
- package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCellGroup.js +19 -5
- package/dist/cjs/parts/Headers/HeaderCellGroup.js.map +2 -2
- package/dist/cjs/parts/Headers/index.js +1 -1
- package/dist/cjs/parts/Headers/index.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js +4 -0
- package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/dist/cjs/styled.js +19 -11
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +1 -1
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCellGroup.js +19 -5
- package/dist/esm/parts/Headers/HeaderCellGroup.js.map +2 -2
- package/dist/esm/parts/Headers/index.js +2 -2
- package/dist/esm/parts/Headers/index.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js +4 -0
- package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/dist/esm/styled.js +19 -11
- package/dist/esm/styled.js.map +2 -2
- package/package.json +22 -22
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isSingle?: boolean;\n isMulti?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems,\n column,\n type,\n column: { id, filterOptions: userFilterOptions },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n innerRef,\n onValueChange,\n } = props;\n\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const handleOnChange = (value) => {\n if (isMulti) {\n const multiSelectedItem = selectedItems as FilterOptionT[];\n const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);\n if (isFound) {\n onValueChange(\n type,\n multiSelectedItem.filter((item) => item.dsId !== value.dsId),\n );\n } else {\n onValueChange(type, [...multiSelectedItem, value]);\n }\n } else {\n const singleSelectedItem = selectedItems as FilterOptionT;\n onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);\n }\n };\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n const filteredOptions = useCallback(\n (filter) =>\n filterOptions.filter(\n (option) => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase()),\n ),\n [filterOptions],\n );\n\n const handleOnFilter = useCallback(\n (newFilter) => {\n setFilteredOptions(filteredOptions(newFilter));\n },\n [filteredOptions],\n );\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative' }}\n >\n <DSComboBox\n inline\n autoFocus\n options={filters}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n onFilter={handleOnFilter}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filteredOptions(''));\n };\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={Select}\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Selection Filter\"\n onClickOutsideMenu={handleOnClickOutside}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiE;AACjE,qBAAqB;AACrB,gCAA2B;AAC3B,sBAA6B;AAC7B,8BAA8B;AAE9B,uBAA4B;AAgBrB,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isSingle?: boolean;\n isMulti?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems = null,\n column,\n type,\n column: { id, filterOptions: userFilterOptions },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n innerRef,\n onValueChange,\n } = props;\n\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const handleOnChange = (value) => {\n if (isMulti) {\n const multiSelectedItem = selectedItems as FilterOptionT[];\n const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);\n if (isFound) {\n onValueChange(\n type,\n multiSelectedItem.filter((item) => item.dsId !== value.dsId),\n );\n } else {\n onValueChange(type, [...multiSelectedItem, value]);\n }\n } else {\n const singleSelectedItem = selectedItems as FilterOptionT;\n onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);\n }\n };\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n const filteredOptions = useCallback(\n (filter) =>\n filterOptions.filter(\n (option) => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase()),\n ),\n [filterOptions],\n );\n\n const handleOnFilter = useCallback(\n (newFilter) => {\n setFilteredOptions(filteredOptions(newFilter));\n },\n [filteredOptions],\n );\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative' }}\n >\n <DSComboBox\n inline\n autoFocus\n options={filters}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n onFilter={handleOnFilter}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filteredOptions(''));\n };\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={Select}\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Selection Filter\"\n onClickOutsideMenu={handleOnClickOutside}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiE;AACjE,qBAAqB;AACrB,gCAA2B;AAC3B,sBAA6B;AAC7B,8BAA8B;AAE9B,uBAA4B;AAgBrB,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe;AAAA,IAC7B,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAiC,0BAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB,CAAC,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,cAAc,IAAI,CAAC,SAAU;AAAA,QAC9F,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA;AAGT,aAAO;AAAA;AAIT,QAAI,MAAM,QAAQ;AAAoB,aAAO;AAE7C,WAAO;AAAA,KACN,CAAC,MAAM,IAAI;AAEd,QAAM,iBAAiB,CAAC,UAAU;AAChC,QAAI,SAAS;AACX,YAAM,oBAAoB;AAC1B,YAAM,UAAU,kBAAkB,KAAK,CAAC,SAAS,KAAK,SAAS,MAAM;AACrE,UAAI,SAAS;AACX,sBACE,MACA,kBAAkB,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM;AAAA,aAEpD;AACL,sBAAc,MAAM,CAAC,GAAG,mBAAmB;AAAA;AAAA,WAExC;AACL,YAAM,qBAAqB;AAC3B,oBAAc,MAAM,oBAAoB,SAAS,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1E,QAAM,CAAC,SAAS,sBAAsB,2BAAS;AAE/C,8BAAU,MAAM;AACd,uBAAmB;AAAA,KAClB,CAAC;AAEJ,QAAM,kBAAkB,8BACtB,CAAC,WACC,cAAc,OACZ,CAAC,WAAW,OAAO,SAAS,eAAe,OAAO,MAAM,cAAc,SAAS,OAAO,iBAE1F,CAAC;AAGH,QAAM,iBAAiB,8BACrB,CAAC,cAAc;AACb,uBAAmB,gBAAgB;AAAA,KAErC,CAAC;AAGH,QAAM,SACJ,mDAAC,qBAAD;AAAA,IACE,eACE,UAAU,6BAAY,oCAAoC,6BAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU;AAAA,KAEvC,mDAAC,sCAAD;AAAA,IACE,QAAM;AAAA,IACN,WAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA;AAKrB,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,gBAAgB;AAAA;AAErC,SACE,mDAAC,uCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,mDAAC,8BAAD;AAAA,IACb;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,6 +28,7 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
|
28
28
|
var HeaderCellGroup_exports = {};
|
|
29
29
|
__export(HeaderCellGroup_exports, {
|
|
30
30
|
HeaderCellGroup: () => HeaderCellGroup,
|
|
31
|
+
HeaderCellGroupSortable: () => HeaderCellGroupSortable,
|
|
31
32
|
default: () => HeaderCellGroup_default
|
|
32
33
|
});
|
|
33
34
|
var React = __toESM(require("react"));
|
|
@@ -41,22 +42,29 @@ var import_withDnDSortableColumnContext = require("../HoC/withDnDSortableColumnC
|
|
|
41
42
|
var import_DropIndicator = require("../DropIndicator");
|
|
42
43
|
var import_SortableHeaderCell = require("../SortableHeaderCell");
|
|
43
44
|
var import_EmptyChildrenGroup = require("./EmptyChildrenGroup");
|
|
44
|
-
var
|
|
45
|
+
var import_configs = require("../../configs");
|
|
46
|
+
var import_DataTableContext = __toESM(require("../../DataTableContext"));
|
|
45
47
|
const StyledWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
|
|
46
48
|
position: relative;
|
|
49
|
+
${({ shouldDropOneLevel }) => shouldDropOneLevel ? `top: 50%; height: 50%;` : ""}
|
|
47
50
|
width: ${(props) => props.isDragOverlay ? "fit-content" : "100%"};
|
|
48
51
|
grid-column: ${(props) => props.gridColumn};
|
|
49
52
|
background: ${(props) => props.isDragging ? props.theme.colors.neutral["080"] : "white"};
|
|
50
53
|
opacity: ${(props) => props.isDragging ? 0.8 : 1};
|
|
51
54
|
box-shadow: 0 2px 4px 0 ${(props) => props.isDragOverlay ? "rgba(0,0,0,0.5)" : "transparent"};
|
|
55
|
+
border-left: ${({ isFirst }) => isFirst ? "0px" : "1px"} solid ${(props) => props.theme.colors.neutral["080"]};
|
|
52
56
|
`;
|
|
53
57
|
const HeaderCellGroupComp = ({
|
|
54
58
|
header,
|
|
55
59
|
isDragOverlay,
|
|
56
60
|
isDraggingParent,
|
|
57
|
-
isLast
|
|
61
|
+
isLast,
|
|
62
|
+
isFirst,
|
|
63
|
+
level = 0
|
|
58
64
|
}) => {
|
|
65
|
+
const { visibleColumns } = (0, import_react.useContext)(import_DataTableContext.default);
|
|
59
66
|
const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
|
|
67
|
+
const isMultiLevel = visibleColumns.some((col) => !!col.columns);
|
|
60
68
|
const children = header.columns;
|
|
61
69
|
const isDragging = draggableProps && draggableProps.isDragging || isDraggingParent;
|
|
62
70
|
const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
|
|
@@ -68,7 +76,9 @@ const HeaderCellGroupComp = ({
|
|
|
68
76
|
isDragOverlay,
|
|
69
77
|
isDragging,
|
|
70
78
|
cols: ["auto"],
|
|
71
|
-
"data-testid": isDragOverlay ?
|
|
79
|
+
"data-testid": isDragOverlay ? import_configs.DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : void 0,
|
|
80
|
+
isFirst,
|
|
81
|
+
shouldDropOneLevel: isMultiLevel && level === 0 && !children
|
|
72
82
|
}, /* @__PURE__ */ import_react.default.createElement(import_HeaderCell.HeaderCell, {
|
|
73
83
|
column: header,
|
|
74
84
|
isDragOverlay,
|
|
@@ -81,7 +91,9 @@ const HeaderCellGroupComp = ({
|
|
|
81
91
|
header: h,
|
|
82
92
|
isDragOverlay,
|
|
83
93
|
isDraggingParent: isDragging,
|
|
84
|
-
isLast: index === children.length - 1
|
|
94
|
+
isLast: index === children.length - 1,
|
|
95
|
+
isFirst: index === 0,
|
|
96
|
+
level: level + 1
|
|
85
97
|
}))), children?.length && isDragOverlay && /* @__PURE__ */ import_react.default.createElement(import_EmptyChildrenGroup.EmptyChildrenGroup, null), /* @__PURE__ */ import_react.default.createElement(import_DropIndicator.DropIndicator, {
|
|
86
98
|
vertical: true,
|
|
87
99
|
dropIndicatorPosition,
|
|
@@ -92,7 +104,9 @@ HeaderCellGroupComp.propTypes = {
|
|
|
92
104
|
header: import_prop_types.default.any,
|
|
93
105
|
isDragOverlay: import_prop_types.default.bool,
|
|
94
106
|
isDraggingParent: import_prop_types.default.bool,
|
|
95
|
-
isLast: import_prop_types.default.bool
|
|
107
|
+
isLast: import_prop_types.default.bool,
|
|
108
|
+
isFirst: import_prop_types.default.bool,
|
|
109
|
+
level: import_prop_types.default.number
|
|
96
110
|
};
|
|
97
111
|
const HeaderCellGroup = HeaderCellGroupComp;
|
|
98
112
|
const HeaderCellGroupSortable = (0, import_withDnDSortableColumnContext.withDnDSortableColumnContext)(HeaderCellGroupComp);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/HeaderCellGroup.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,qBAAqB;AACrB,+BAAmB;AACnB,wBAAsB;AACtB,wBAA2B;AAC3B,iCAAoC;AACpC,0CAA6C;AAC7C,2BAA8B;AAC9B,gCAAmC;AAEnC,gCAAmC;AACnC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs';\nimport DataTableContext from '../../DataTableContext';\n\nconst StyledWrapper = styled(Grid)`\n position: relative;\n ${({ shouldDropOneLevel }) => (shouldDropOneLevel ? `top: 50%; height: 50%;` : '')}\n width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n grid-column: ${(props) => props.gridColumn};\n background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n header: TypescriptColumn;\n isDragOverlay?: boolean;\n isDraggingParent?: boolean;\n isLast?: boolean;\n isFirst?: boolean;\n level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n header,\n isDragOverlay,\n isDraggingParent,\n isLast,\n isFirst,\n level = 0,\n}) => {\n const { visibleColumns } = useContext(DataTableContext);\n const { draggableProps } = useContext(SortableItemContext);\n\n const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n const children = header.columns;\n\n const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n const colSpan = children?.length ?? 1;\n return (\n <StyledWrapper\n ref={draggableProps ? draggableProps.setNodeRef : null}\n gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n isDragOverlay={isDragOverlay}\n isDragging={isDragging}\n cols={['auto']}\n data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n isFirst={isFirst}\n shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n >\n <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n {!!children?.length && !isDragOverlay && (\n <SortableHeaderCell items={children} isDragOverlay={isDragOverlay}>\n {children.map((h, index) => (\n <ChildGroup\n key={h.id}\n header={h}\n isDragOverlay={isDragOverlay}\n isDraggingParent={isDragging}\n isLast={index === children.length - 1}\n isFirst={index === 0}\n level={level + 1}\n />\n ))}\n </SortableHeaderCell>\n )}\n {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} />\n </StyledWrapper>\n );\n};\n\nHeaderCellGroupComp.propTypes = {\n header: PropTypes.any,\n isDragOverlay: PropTypes.bool,\n isDraggingParent: PropTypes.bool,\n isLast: PropTypes.bool,\n isFirst: PropTypes.bool,\n level: PropTypes.number,\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n\nexport default HeaderCellGroupSortable;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,qBAAqB;AACrB,+BAAmB;AACnB,wBAAsB;AACtB,wBAA2B;AAC3B,iCAAoC;AACpC,0CAA6C;AAC7C,2BAA8B;AAC9B,gCAAmC;AAEnC,gCAAmC;AACnC,qBAA4B;AAC5B,8BAA6B;AAE7B,MAAM,gBAAgB,sCAAO;AAAA;AAAA,IAEzB,CAAC,EAAE,yBAA0B,qBAAqB,2BAA2B;AAAA,WACtE,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,SAAS;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,cAAe,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAY3G,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,MACJ;AACJ,QAAM,EAAE,mBAAmB,6BAAW;AACtC,QAAM,EAAE,mBAAmB,6BAAW;AAEtC,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI;AAExD,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE,mDAAC,eAAD;AAAA,IACE,KAAK,iBAAiB,eAAe,aAAa;AAAA,IAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM,CAAC;AAAA,IACP,eAAa,gBAAgB,2BAAY,iCAAiC;AAAA,IAC1E;AAAA,IACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,KAEpD,mDAAC,8BAAD;AAAA,IAAY,QAAQ;AAAA,IAAQ;AAAA,IAA8B;AAAA,MACzD,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,mDAAC,8CAAD;AAAA,IAAoB,OAAO;AAAA,IAAU;AAAA,KAClC,SAAS,IAAI,CAAC,GAAG,UAChB,mDAAC,YAAD;AAAA,IACE,KAAK,EAAE;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,IAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,IACpC,SAAS,UAAU;AAAA,IACnB,OAAO,QAAQ;AAAA,QAKtB,UAAU,UAAU,iBAAiB,mDAAC,8CAAD,OACtC,mDAAC,oCAAD;AAAA,IAAe,UAAQ;AAAA,IAAC;AAAA,IAA8C,QAAQ,UAAU;AAAA;AAAA;AAK9F,oBAAoB,YAAY;AAAA,EAC9B,QAAQ,0BAAU;AAAA,EAClB,eAAe,0BAAU;AAAA,EACzB,kBAAkB,0BAAU;AAAA,EAC5B,QAAQ,0BAAU;AAAA,EAClB,SAAS,0BAAU;AAAA,EACnB,OAAO,0BAAU;AAAA;AAKZ,MAAM,kBAAkB;AAExB,MAAM,0BAA0B,sEAA6B;AAEpE,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -51,7 +51,7 @@ const HeadersComp = () => {
|
|
|
51
51
|
cols: gridLayout,
|
|
52
52
|
colsLayoutStyle,
|
|
53
53
|
isExpandable
|
|
54
|
-
}, visibleColumns.map((h, index) => /* @__PURE__ */ import_react.default.createElement(import_HeaderCellGroup.
|
|
54
|
+
}, visibleColumns.map((h, index) => /* @__PURE__ */ import_react.default.createElement(import_HeaderCellGroup.HeaderCellGroupSortable, {
|
|
55
55
|
header: h,
|
|
56
56
|
key: h.id,
|
|
57
57
|
isLast: index === visibleColumns.length - 1
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,oBAAgD;AAChD,8BAAiC;AACjC,6CAAgD;AAChD,
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\n\nconst HeadersComp = (): JSX.Element => {\n const {\n tableProps: { isExpandable, colsLayoutStyle },\n layoutHelpers: { gridLayout, totalColumnsWidth },\n columnHeaderRef,\n visibleColumns,\n } = useContext(DataTableContext);\n const HeadersCells = useMemo(\n () => (\n <SortableHeaderCell items={visibleColumns}>\n <StyledHeadTr role=\"row\" cols={gridLayout} colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\n {visibleColumns.map((h: TypescriptColumn, index) => (\n <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n ))}\n </StyledHeadTr>\n </SortableHeaderCell>\n ),\n [isExpandable, visibleColumns, gridLayout, colsLayoutStyle],\n );\n\n const PureHeaders = useMemo(\n () => (\n <StyledHeadWrapper totalColumnsWidth={totalColumnsWidth} colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n {HeadersCells}\n </StyledHeadWrapper>\n ),\n [totalColumnsWidth, colsLayoutStyle, columnHeaderRef, HeadersCells],\n );\n return PureHeaders;\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\nexport default Headers;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAC3C,oBAAgD;AAChD,8BAAiC;AACjC,6CAAgD;AAChD,6BAAwC;AACxC,gCAAmC;AAGnC,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B,eAAe,EAAE,YAAY;AAAA,IAC7B;AAAA,IACA;AAAA,MACE,6BAAW;AACf,QAAM,eAAe,0BACnB,MACE,mDAAC,8CAAD;AAAA,IAAoB,OAAO;AAAA,KACzB,mDAAC,4BAAD;AAAA,IAAc,MAAK;AAAA,IAAM,MAAM;AAAA,IAAY;AAAA,IAAkC;AAAA,KAC1E,eAAe,IAAI,CAAC,GAAqB,UACxC,mDAAC,gDAAD;AAAA,IAAyB,QAAQ;AAAA,IAAG,KAAK,EAAE;AAAA,IAAI,QAAQ,UAAU,eAAe,SAAS;AAAA,SAKjG,CAAC,cAAc,gBAAgB,YAAY;AAG7C,QAAM,cAAc,0BAClB,MACE,mDAAC,iCAAD;AAAA,IAAmB;AAAA,IAAsC;AAAA,IAAkC,KAAK;AAAA,KAC7F,eAGL,CAAC,mBAAmB,iBAAiB,iBAAiB;AAExD,SAAO;AAAA;AAGF,MAAM,UAAU,4EAAgC;AACvD,IAAO,kBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -52,6 +52,7 @@ var import_sortable = require("@dnd-kit/sortable");
|
|
|
52
52
|
var import_DataTableContext = require("../../DataTableContext");
|
|
53
53
|
var import_HeaderCellGroup = require("../Headers/HeaderCellGroup");
|
|
54
54
|
var import_constants = require("../../configs/constants");
|
|
55
|
+
var import_Columns = require("../../addons/Columns");
|
|
55
56
|
const DnDGroupContext = (0, import_react.createContext)({
|
|
56
57
|
activeIndex: void 0
|
|
57
58
|
});
|
|
@@ -81,6 +82,9 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
|
|
|
81
82
|
});
|
|
82
83
|
const newData = [];
|
|
83
84
|
newFlattenedData.forEach(([dndData, colData]) => {
|
|
85
|
+
if (import_Columns.INTERNAL_COLUMNS.includes(dndData.id)) {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
84
88
|
if (dndData.parentId) {
|
|
85
89
|
const parentNode = nodes[dndData.parentId];
|
|
86
90
|
if (parentNode.columns)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup';\nimport { DATA_TESTID } from '../../configs/constants';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => el.scrollTo(0, y);\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA2D;AAC3D,kBAAwC;AACxC,8BAAyC;AACzC,sBAA0B;AAE1B,8BAAiC;AAGjC,6BAAgC;AAChC,uBAA4B;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => el.scrollTo(0, y);\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA2D;AAC3D,kBAAwC;AACxC,8BAAyC;AACzC,sBAA0B;AAE1B,8BAAiC;AAGjC,6BAAgC;AAChC,uBAA4B;AAC5B,qBAAiC;AAM1B,MAAM,kBAAkB,gCAAmC;AAAA,EAChE,aAAa;AAAA;AAGf,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY;AAClB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,SAAS;AACzC,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY;AAAA;AAE5G,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK;AAC1C,SAAO;AAAA;AAIF,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,qBAAM,WAAW;AAErB,QAAM,iBAAiB,0BAAQ,MAAM,eAAe,iBAAiB,CAAC;AAEtE,QAAM,YAAY,8BAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,+BAAU,gBAAgB,QAAQ,WAAW,QAAQ;AAE9E,UAAM,QAAQ;AACd,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA;AAEtB,UAAM,UAAU;AAChB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAE/C,UAAI,gCAAiB,SAAS,QAAQ,KAAK;AACzC;AAAA;AAIF,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK;AAAA;AAC3C,qBAAW,UAAU,CAAC;AAAA;AACtB,gBAAQ,KAAK;AAAA;AAEtB,qBAAiB,SAAS;AAAA,KAE5B,CAAC,gBAAgB;AAGnB,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,6BAAY;AAE/B,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,KAC3B;AAEH,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,6BAAY;AAE/B,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM,GAAG,SAAS,GAAG;AAAA;AAAA,KAEpC;AAEH,QAAM,EAAE,iBAAiB,UAAU,gBAAgB,sDAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,6BAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA;AAGF,MAAI;AACF,WACE,mDAAC,wBAAD,mBAAgB,kBACd,mDAAC,gBAAgB,UAAjB;AAAA,MAA0B,OAAO,EAAE;AAAA,OACjC,mDAAC,WAAD,mBAAe,UAEjB,mDAAC,yBAAD,MACG,WACC,mDAAC,wCAAD;AAAA,MAAiB,QAAQ,eAAe,KAAK,CAAC,CAAC,UAAU,KAAK,OAAO,UAAU;AAAA,MAAI,eAAa;AAAA,SAC9F;AAIZ,SAAO,mDAAC,WAAD,mBAAe;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styled.js
CHANGED
|
@@ -127,6 +127,8 @@ const StyledHeadTr = (0, import_styled_components.default)(import_ds_grid.Grid)`
|
|
|
127
127
|
isExpandable: props.isExpandable,
|
|
128
128
|
colsLayoutStyle: props.colsLayoutStyle
|
|
129
129
|
})};
|
|
130
|
+
border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
|
|
131
|
+
border-bottom: 1px solid ${(props) => props.theme.colors.neutral["080"]};
|
|
130
132
|
`;
|
|
131
133
|
const getStyledHeadTHBorderColor = (props) => {
|
|
132
134
|
if (props.dragOverlay)
|
|
@@ -145,16 +147,27 @@ const StyledHeadTh = import_styled_components.default.div`
|
|
|
145
147
|
${import_helpers.columnPadding}
|
|
146
148
|
color: #353c46;
|
|
147
149
|
min-height: 1.84615rem;
|
|
148
|
-
position: relative;
|
|
149
150
|
position: sticky;
|
|
150
|
-
top: 0;
|
|
151
151
|
z-index: ${import_zIndexInternalConfig.ZIndexDataTable.HEADER_ROW};
|
|
152
152
|
display: flex;
|
|
153
153
|
justify-content: space-between;
|
|
154
154
|
box-sizing: border-box;
|
|
155
|
-
border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
|
|
156
|
-
border-bottom: 1px solid ${getStyledHeadTHBorderColor};
|
|
157
155
|
outline: none;
|
|
156
|
+
${(props) => props.isDraggingActive ? "" : `:hover {
|
|
157
|
+
&:after {
|
|
158
|
+
display: block;
|
|
159
|
+
content: ' ';
|
|
160
|
+
position: absolute;
|
|
161
|
+
top: 0;
|
|
162
|
+
left: 0;
|
|
163
|
+
right: 0;
|
|
164
|
+
bottom: 0;
|
|
165
|
+
border-bottom: 1px solid ${props.theme.colors.brand[700]};
|
|
166
|
+
pointer-events: none;
|
|
167
|
+
z-index: ${import_zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER};
|
|
168
|
+
}
|
|
169
|
+
cursor: pointer;
|
|
170
|
+
}`}
|
|
158
171
|
|
|
159
172
|
:focus {
|
|
160
173
|
&:after {
|
|
@@ -163,18 +176,13 @@ const StyledHeadTh = import_styled_components.default.div`
|
|
|
163
176
|
position: absolute;
|
|
164
177
|
top: 0;
|
|
165
178
|
left: 0;
|
|
166
|
-
right:
|
|
167
|
-
bottom:
|
|
179
|
+
right: 0;
|
|
180
|
+
bottom: 0;
|
|
168
181
|
border: 2px solid ${(props) => props.theme.colors.brand[700]};
|
|
169
182
|
pointer-events: none;
|
|
170
183
|
z-index: ${import_zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER};
|
|
171
184
|
}
|
|
172
185
|
}
|
|
173
|
-
|
|
174
|
-
${(props) => props.isDraggingActive ? "" : `:hover {
|
|
175
|
-
border-bottom: 1px solid ${props.isDragOverlay ? "transparent" : props.theme.colors.brand[800]};
|
|
176
|
-
cursor: pointer;
|
|
177
|
-
}`}
|
|
178
186
|
`;
|
|
179
187
|
const StyledHeaderRightIconsWrapper = import_styled_components.default.div`
|
|
180
188
|
height: 100%;
|
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 'styled-components';\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 }) => `\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 ${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.div<WidthAndHeight & { noSelectionAllowed: boolean }>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\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%', height = '100%' }) => `\n width: ${sizeToCss(width)};\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n overflow: auto;\n ${({ height = 'auto', width = '100%' }) => `\n height: ${sizeToCss(height)};\n width: ${sizeToCss(width)};\n `}\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)`\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`;\n\nconst getStyledHeadTHBorderColor = (props) => {\n if (props.dragOverlay) return 'transparent';\n if (props.isFirstRowGroup) return 'transparent';\n return props.theme.colors.neutral['080'];\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:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,qBAAqB;AACrB,sBAA2B;AAC3B,qBAAsD;AACtD,kCAAgC;AAChC,uBAAgC;AAOhC,MAAM,iBAAiB,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAShB,MAAM,OAAO,MAAM;AAAA;AAAA,aAE5B,4CAAgB;AAAA;AAGtB,MAAM,oBAAoB,sCAAO;AAAA;AAAA,MAElC,CAAC,UAAW,MAAM,YAAY,KAAK,eAAe;AAAA;AAAA;AAIjD,MAAM,yBAAyB,iCAAO;AAAA,WAClC,CAAC,UAAU,8BAAU,MAAM,SAAS;AAAA,YACnC,CAAC,UAAU,8BAAU,MAAM,UAAU;AAAA,iBAChC,CAAC,EAAE,yBAA0B,qBAAqB,SAAS;AAAA;AAErE,MAAM,qBAAqB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrC,CAAC,EAAE,QAAQ,QAAQ,SAAS,aAAa;AAAA,WAClC,8BAAU;AAAA,YACT,8BAAU;AAAA;AAAA;AAGf,MAAM,4BAA4B,iCAAO;AAAA;AAAA,IAE5C,CAAC,EAAE,SAAS,aAAa;AAAA,YACjB,8BAAU;AAAA;AAAA;AAGf,MAAM,2BAA2B,iCAAO;AAAA;AAAA,IAE3C,CAAC,EAAE,SAAS,QAAQ,QAAQ,aAAa;AAAA,YACjC,8BAAU;AAAA,WACX,8BAAU;AAAA;AAAA;AAYrB,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA,kBAAkB,iCAAgB;AAAA,MACA;AAClC,MAAI,CAAC;AAAM,WAAO;AAClB,MAAI,oBAAoB,SAAS;AAC/B,UAAM,YAAY,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,KAAK;AAC9D,WAAO,0BAA0B;AAAA;AAGnC,SAAO,0BAA0B,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,KAAK;AAAA;AAGxE,MAAM,oBAAoB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAS7B,CAAC,UAAW,MAAM,oBAAoB,iCAAgB,QAAQ,8BAAU,MAAM,qBAAqB;AAAA;AAGvG,MAAM,eAAe,sCAAO;AAAA,IAC/B,CAAC,UAAW,MAAM,oBAAoB,iCAAgB,OAAO,eAAe;AAAA,IAC5E,CAAC,UACD,4BAA4B;AAAA,EAC1B,MAAM,MAAM;AAAA,EACZ,cAAc,MAAM;AAAA,EACpB,iBAAiB,MAAM;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\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 }) => `\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 ${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.div<WidthAndHeight & { noSelectionAllowed: boolean }>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\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%', height = '100%' }) => `\n width: ${sizeToCss(width)};\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n overflow: auto;\n ${({ height = 'auto', width = '100%' }) => `\n height: ${sizeToCss(height)};\n width: ${sizeToCss(width)};\n `}\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)`\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`;\n\nconst getStyledHeadTHBorderColor = (props) => {\n if (props.dragOverlay) return 'transparent';\n if (props.isFirstRowGroup) return 'transparent';\n return props.theme.colors.neutral['080'];\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: ${({ isResizing, theme }) => (isResizing ? theme.colors.brand[600] : theme.colors.brand[400])};\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 /* border-bottom: 1px solid #ebedf0; */\n /* box-sizing: border-box; */\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 /* width: ${(props) =>\n props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%'}; */\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ padding: string }>`\n position: relative;\n background-color: ${({ theme }) => theme.colors.brand[200]};\n align-items: center;\n padding: 0 ${(props) => props.padding};\n border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n grid-template-columns: min-content 1fr;\n`;\n\nexport const GroupHeaderTitle = styled.span`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)`\n 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, theme }) => {\n if (!isDropIndicatorPositionInside) return '';\n return styledFocusCss({ theme });\n }}\n\n ${({ shouldDisplayHover, theme }) =>\n shouldDisplayHover\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.disabled ? props.theme.colors.neutral['500'] : '#333333')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isSingle?: boolean;\n isMulti?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems,\n column,\n type,\n column: { id, filterOptions: userFilterOptions },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n innerRef,\n onValueChange,\n } = props;\n\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const handleOnChange = (value) => {\n if (isMulti) {\n const multiSelectedItem = selectedItems as FilterOptionT[];\n const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);\n if (isFound) {\n onValueChange(\n type,\n multiSelectedItem.filter((item) => item.dsId !== value.dsId),\n );\n } else {\n onValueChange(type, [...multiSelectedItem, value]);\n }\n } else {\n const singleSelectedItem = selectedItems as FilterOptionT;\n onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);\n }\n };\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n const filteredOptions = useCallback(\n (filter) =>\n filterOptions.filter(\n (option) => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase()),\n ),\n [filterOptions],\n );\n\n const handleOnFilter = useCallback(\n (newFilter) => {\n setFilteredOptions(filteredOptions(newFilter));\n },\n [filteredOptions],\n );\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative' }}\n >\n <DSComboBox\n inline\n autoFocus\n options={filters}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n onFilter={handleOnFilter}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filteredOptions(''));\n };\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={Select}\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Selection Filter\"\n onClickOutsideMenu={handleOnClickOutside}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AAgBO,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isSingle?: boolean;\n isMulti?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems = null,\n column,\n type,\n column: { id, filterOptions: userFilterOptions },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n innerRef,\n onValueChange,\n } = props;\n\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const handleOnChange = (value) => {\n if (isMulti) {\n const multiSelectedItem = selectedItems as FilterOptionT[];\n const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);\n if (isFound) {\n onValueChange(\n type,\n multiSelectedItem.filter((item) => item.dsId !== value.dsId),\n );\n } else {\n onValueChange(type, [...multiSelectedItem, value]);\n }\n } else {\n const singleSelectedItem = selectedItems as FilterOptionT;\n onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);\n }\n };\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n const filteredOptions = useCallback(\n (filter) =>\n filterOptions.filter(\n (option) => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase()),\n ),\n [filterOptions],\n );\n\n const handleOnFilter = useCallback(\n (newFilter) => {\n setFilteredOptions(filteredOptions(newFilter));\n },\n [filteredOptions],\n );\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative' }}\n >\n <DSComboBox\n inline\n autoFocus\n options={filters}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n onFilter={handleOnFilter}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filteredOptions(''));\n };\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={Select}\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Selection Filter\"\n onClickOutsideMenu={handleOnClickOutside}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AAgBO,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe;AAAA,IAC7B,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAiC,QAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB,CAAC,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,cAAc,IAAI,CAAC,SAAU;AAAA,QAC9F,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA;AAGT,aAAO;AAAA;AAIT,QAAI,MAAM,QAAQ;AAAoB,aAAO;AAE7C,WAAO;AAAA,KACN,CAAC,MAAM,IAAI;AAEd,QAAM,iBAAiB,CAAC,UAAU;AAChC,QAAI,SAAS;AACX,YAAM,oBAAoB;AAC1B,YAAM,UAAU,kBAAkB,KAAK,CAAC,SAAS,KAAK,SAAS,MAAM;AACrE,UAAI,SAAS;AACX,sBACE,MACA,kBAAkB,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM;AAAA,aAEpD;AACL,sBAAc,MAAM,CAAC,GAAG,mBAAmB;AAAA;AAAA,WAExC;AACL,YAAM,qBAAqB;AAC3B,oBAAc,MAAM,oBAAoB,SAAS,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1E,QAAM,CAAC,SAAS,sBAAsB,SAAS;AAE/C,YAAU,MAAM;AACd,uBAAmB;AAAA,KAClB,CAAC;AAEJ,QAAM,kBAAkB,YACtB,CAAC,WACC,cAAc,OACZ,CAAC,WAAW,OAAO,SAAS,eAAe,OAAO,MAAM,cAAc,SAAS,OAAO,iBAE1F,CAAC;AAGH,QAAM,iBAAiB,YACrB,CAAC,cAAc;AACb,uBAAmB,gBAAgB;AAAA,KAErC,CAAC;AAGH,QAAM,SACJ,qCAAC,MAAD;AAAA,IACE,eACE,UAAU,YAAY,oCAAoC,YAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU;AAAA,KAEvC,qCAAC,YAAD;AAAA,IACE,QAAM;AAAA,IACN,WAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA;AAKrB,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,gBAAgB;AAAA;AAErC,SACE,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,qCAAC,cAAD;AAAA,IACb;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,22 +9,29 @@ import { withDnDSortableColumnContext } from "../HoC/withDnDSortableColumnContex
|
|
|
9
9
|
import { DropIndicator } from "../DropIndicator";
|
|
10
10
|
import { SortableHeaderCell } from "../SortableHeaderCell";
|
|
11
11
|
import { EmptyChildrenGroup } from "./EmptyChildrenGroup";
|
|
12
|
-
import { DATA_TESTID } from "../../configs
|
|
12
|
+
import { DATA_TESTID } from "../../configs";
|
|
13
|
+
import DataTableContext from "../../DataTableContext";
|
|
13
14
|
const StyledWrapper = styled(Grid)`
|
|
14
15
|
position: relative;
|
|
16
|
+
${({ shouldDropOneLevel }) => shouldDropOneLevel ? `top: 50%; height: 50%;` : ""}
|
|
15
17
|
width: ${(props) => props.isDragOverlay ? "fit-content" : "100%"};
|
|
16
18
|
grid-column: ${(props) => props.gridColumn};
|
|
17
19
|
background: ${(props) => props.isDragging ? props.theme.colors.neutral["080"] : "white"};
|
|
18
20
|
opacity: ${(props) => props.isDragging ? 0.8 : 1};
|
|
19
21
|
box-shadow: 0 2px 4px 0 ${(props) => props.isDragOverlay ? "rgba(0,0,0,0.5)" : "transparent"};
|
|
22
|
+
border-left: ${({ isFirst }) => isFirst ? "0px" : "1px"} solid ${(props) => props.theme.colors.neutral["080"]};
|
|
20
23
|
`;
|
|
21
24
|
const HeaderCellGroupComp = ({
|
|
22
25
|
header,
|
|
23
26
|
isDragOverlay,
|
|
24
27
|
isDraggingParent,
|
|
25
|
-
isLast
|
|
28
|
+
isLast,
|
|
29
|
+
isFirst,
|
|
30
|
+
level = 0
|
|
26
31
|
}) => {
|
|
32
|
+
const { visibleColumns } = useContext(DataTableContext);
|
|
27
33
|
const { draggableProps } = useContext(SortableItemContext);
|
|
34
|
+
const isMultiLevel = visibleColumns.some((col) => !!col.columns);
|
|
28
35
|
const children = header.columns;
|
|
29
36
|
const isDragging = draggableProps && draggableProps.isDragging || isDraggingParent;
|
|
30
37
|
const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
|
|
@@ -36,7 +43,9 @@ const HeaderCellGroupComp = ({
|
|
|
36
43
|
isDragOverlay,
|
|
37
44
|
isDragging,
|
|
38
45
|
cols: ["auto"],
|
|
39
|
-
"data-testid": isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : void 0
|
|
46
|
+
"data-testid": isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : void 0,
|
|
47
|
+
isFirst,
|
|
48
|
+
shouldDropOneLevel: isMultiLevel && level === 0 && !children
|
|
40
49
|
}, /* @__PURE__ */ React2.createElement(HeaderCell, {
|
|
41
50
|
column: header,
|
|
42
51
|
isDragOverlay,
|
|
@@ -49,7 +58,9 @@ const HeaderCellGroupComp = ({
|
|
|
49
58
|
header: h,
|
|
50
59
|
isDragOverlay,
|
|
51
60
|
isDraggingParent: isDragging,
|
|
52
|
-
isLast: index === children.length - 1
|
|
61
|
+
isLast: index === children.length - 1,
|
|
62
|
+
isFirst: index === 0,
|
|
63
|
+
level: level + 1
|
|
53
64
|
}))), children?.length && isDragOverlay && /* @__PURE__ */ React2.createElement(EmptyChildrenGroup, null), /* @__PURE__ */ React2.createElement(DropIndicator, {
|
|
54
65
|
vertical: true,
|
|
55
66
|
dropIndicatorPosition,
|
|
@@ -60,13 +71,16 @@ HeaderCellGroupComp.propTypes = {
|
|
|
60
71
|
header: PropTypes.any,
|
|
61
72
|
isDragOverlay: PropTypes.bool,
|
|
62
73
|
isDraggingParent: PropTypes.bool,
|
|
63
|
-
isLast: PropTypes.bool
|
|
74
|
+
isLast: PropTypes.bool,
|
|
75
|
+
isFirst: PropTypes.bool,
|
|
76
|
+
level: PropTypes.number
|
|
64
77
|
};
|
|
65
78
|
const HeaderCellGroup = HeaderCellGroupComp;
|
|
66
79
|
const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);
|
|
67
80
|
var HeaderCellGroup_default = HeaderCellGroupSortable;
|
|
68
81
|
export {
|
|
69
82
|
HeaderCellGroup,
|
|
83
|
+
HeaderCellGroupSortable,
|
|
70
84
|
HeaderCellGroup_default as default
|
|
71
85
|
};
|
|
72
86
|
//# sourceMappingURL=HeaderCellGroup.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAM,gBAAgB,OAAO;AAAA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs';\nimport DataTableContext from '../../DataTableContext';\n\nconst StyledWrapper = styled(Grid)`\n position: relative;\n ${({ shouldDropOneLevel }) => (shouldDropOneLevel ? `top: 50%; height: 50%;` : '')}\n width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n grid-column: ${(props) => props.gridColumn};\n background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n header: TypescriptColumn;\n isDragOverlay?: boolean;\n isDraggingParent?: boolean;\n isLast?: boolean;\n isFirst?: boolean;\n level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n header,\n isDragOverlay,\n isDraggingParent,\n isLast,\n isFirst,\n level = 0,\n}) => {\n const { visibleColumns } = useContext(DataTableContext);\n const { draggableProps } = useContext(SortableItemContext);\n\n const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n const children = header.columns;\n\n const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n const colSpan = children?.length ?? 1;\n return (\n <StyledWrapper\n ref={draggableProps ? draggableProps.setNodeRef : null}\n gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n isDragOverlay={isDragOverlay}\n isDragging={isDragging}\n cols={['auto']}\n data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n isFirst={isFirst}\n shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n >\n <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n {!!children?.length && !isDragOverlay && (\n <SortableHeaderCell items={children} isDragOverlay={isDragOverlay}>\n {children.map((h, index) => (\n <ChildGroup\n key={h.id}\n header={h}\n isDragOverlay={isDragOverlay}\n isDraggingParent={isDragging}\n isLast={index === children.length - 1}\n isFirst={index === 0}\n level={level + 1}\n />\n ))}\n </SortableHeaderCell>\n )}\n {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} />\n </StyledWrapper>\n );\n};\n\nHeaderCellGroupComp.propTypes = {\n header: PropTypes.any,\n isDragOverlay: PropTypes.bool,\n isDraggingParent: PropTypes.bool,\n isLast: PropTypes.bool,\n isFirst: PropTypes.bool,\n level: PropTypes.number,\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n\nexport default HeaderCellGroupSortable;\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA,MAAM,gBAAgB,OAAO;AAAA;AAAA,IAEzB,CAAC,EAAE,yBAA0B,qBAAqB,2BAA2B;AAAA,WACtE,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,SAAS;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,cAAe,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAY3G,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,MACJ;AACJ,QAAM,EAAE,mBAAmB,WAAW;AACtC,QAAM,EAAE,mBAAmB,WAAW;AAEtC,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI;AAExD,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE,qCAAC,eAAD;AAAA,IACE,KAAK,iBAAiB,eAAe,aAAa;AAAA,IAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM,CAAC;AAAA,IACP,eAAa,gBAAgB,YAAY,iCAAiC;AAAA,IAC1E;AAAA,IACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,KAEpD,qCAAC,YAAD;AAAA,IAAY,QAAQ;AAAA,IAAQ;AAAA,IAA8B;AAAA,MACzD,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,qCAAC,oBAAD;AAAA,IAAoB,OAAO;AAAA,IAAU;AAAA,KAClC,SAAS,IAAI,CAAC,GAAG,UAChB,qCAAC,YAAD;AAAA,IACE,KAAK,EAAE;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,IAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,IACpC,SAAS,UAAU;AAAA,IACnB,OAAO,QAAQ;AAAA,QAKtB,UAAU,UAAU,iBAAiB,qCAAC,oBAAD,OACtC,qCAAC,eAAD;AAAA,IAAe,UAAQ;AAAA,IAAC;AAAA,IAA8C,QAAQ,UAAU;AAAA;AAAA;AAK9F,oBAAoB,YAAY;AAAA,EAC9B,QAAQ,UAAU;AAAA,EAClB,eAAe,UAAU;AAAA,EACzB,kBAAkB,UAAU;AAAA,EAC5B,QAAQ,UAAU;AAAA,EAClB,SAAS,UAAU;AAAA,EACnB,OAAO,UAAU;AAAA;AAKZ,MAAM,kBAAkB;AAExB,MAAM,0BAA0B,6BAA6B;AAEpE,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,7 +3,7 @@ import React2, { useContext, useMemo } from "react";
|
|
|
3
3
|
import { StyledHeadWrapper, StyledHeadTr } from "../../styled";
|
|
4
4
|
import { DataTableContext } from "../../DataTableContext";
|
|
5
5
|
import { withConditionalDnDColumnContext } from "../HoC/withConditionalDnDColumnContext";
|
|
6
|
-
import {
|
|
6
|
+
import { HeaderCellGroupSortable } from "./HeaderCellGroup";
|
|
7
7
|
import { SortableHeaderCell } from "../SortableHeaderCell";
|
|
8
8
|
const HeadersComp = () => {
|
|
9
9
|
const {
|
|
@@ -19,7 +19,7 @@ const HeadersComp = () => {
|
|
|
19
19
|
cols: gridLayout,
|
|
20
20
|
colsLayoutStyle,
|
|
21
21
|
isExpandable
|
|
22
|
-
}, visibleColumns.map((h, index) => /* @__PURE__ */ React2.createElement(
|
|
22
|
+
}, visibleColumns.map((h, index) => /* @__PURE__ */ React2.createElement(HeaderCellGroupSortable, {
|
|
23
23
|
header: h,
|
|
24
24
|
key: h.id,
|
|
25
25
|
isLast: index === visibleColumns.length - 1
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext';\nimport {
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B,eAAe,EAAE,YAAY;AAAA,IAC7B;AAAA,IACA;AAAA,MACE,WAAW;AACf,QAAM,eAAe,QACnB,MACE,qCAAC,oBAAD;AAAA,IAAoB,OAAO;AAAA,KACzB,qCAAC,cAAD;AAAA,IAAc,MAAK;AAAA,IAAM,MAAM;AAAA,IAAY;AAAA,IAAkC;AAAA,KAC1E,eAAe,IAAI,CAAC,GAAqB,UACxC,qCAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\n\nconst HeadersComp = (): JSX.Element => {\n const {\n tableProps: { isExpandable, colsLayoutStyle },\n layoutHelpers: { gridLayout, totalColumnsWidth },\n columnHeaderRef,\n visibleColumns,\n } = useContext(DataTableContext);\n const HeadersCells = useMemo(\n () => (\n <SortableHeaderCell items={visibleColumns}>\n <StyledHeadTr role=\"row\" cols={gridLayout} colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\n {visibleColumns.map((h: TypescriptColumn, index) => (\n <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n ))}\n </StyledHeadTr>\n </SortableHeaderCell>\n ),\n [isExpandable, visibleColumns, gridLayout, colsLayoutStyle],\n );\n\n const PureHeaders = useMemo(\n () => (\n <StyledHeadWrapper totalColumnsWidth={totalColumnsWidth} colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n {HeadersCells}\n </StyledHeadWrapper>\n ),\n [totalColumnsWidth, colsLayoutStyle, columnHeaderRef, HeadersCells],\n );\n return PureHeaders;\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\nexport default Headers;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B,eAAe,EAAE,YAAY;AAAA,IAC7B;AAAA,IACA;AAAA,MACE,WAAW;AACf,QAAM,eAAe,QACnB,MACE,qCAAC,oBAAD;AAAA,IAAoB,OAAO;AAAA,KACzB,qCAAC,cAAD;AAAA,IAAc,MAAK;AAAA,IAAM,MAAM;AAAA,IAAY;AAAA,IAAkC;AAAA,KAC1E,eAAe,IAAI,CAAC,GAAqB,UACxC,qCAAC,yBAAD;AAAA,IAAyB,QAAQ;AAAA,IAAG,KAAK,EAAE;AAAA,IAAI,QAAQ,UAAU,eAAe,SAAS;AAAA,SAKjG,CAAC,cAAc,gBAAgB,YAAY;AAG7C,QAAM,cAAc,QAClB,MACE,qCAAC,mBAAD;AAAA,IAAmB;AAAA,IAAsC;AAAA,IAAkC,KAAK;AAAA,KAC7F,eAGL,CAAC,mBAAmB,iBAAiB,iBAAiB;AAExD,SAAO;AAAA;AAGF,MAAM,UAAU,gCAAgC;AACvD,IAAO,kBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -22,6 +22,7 @@ import { arrayMove } from "@dnd-kit/sortable";
|
|
|
22
22
|
import { DataTableContext } from "../../DataTableContext";
|
|
23
23
|
import { HeaderCellGroup } from "../Headers/HeaderCellGroup";
|
|
24
24
|
import { DATA_TESTID } from "../../configs/constants";
|
|
25
|
+
import { INTERNAL_COLUMNS } from "../../addons/Columns";
|
|
25
26
|
const DnDGroupContext = createContext({
|
|
26
27
|
activeIndex: void 0
|
|
27
28
|
});
|
|
@@ -51,6 +52,9 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
|
|
|
51
52
|
});
|
|
52
53
|
const newData = [];
|
|
53
54
|
newFlattenedData.forEach(([dndData, colData]) => {
|
|
55
|
+
if (INTERNAL_COLUMNS.includes(dndData.id)) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
54
58
|
if (dndData.parentId) {
|
|
55
59
|
const parentNode = nodes[dndData.parentId];
|
|
56
60
|
if (parentNode.columns)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup';\nimport { DATA_TESTID } from '../../configs/constants';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => el.scrollTo(0, y);\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AAEA;AAGA;AACA;AAMO,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AAAA;AAGf,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY;AAClB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,SAAS;AACzC,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY;AAAA;AAE5G,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK;AAC1C,SAAO;AAAA;AAIF,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,OAAM,WAAW;AAErB,QAAM,iBAAiB,QAAQ,MAAM,eAAe,iBAAiB,CAAC;AAEtE,QAAM,YAAY,YAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ;AAE9E,UAAM,QAAQ;AACd,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA;AAEtB,UAAM,UAAU;AAChB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => el.scrollTo(0, y);\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAMO,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AAAA;AAGf,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY;AAClB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,SAAS;AACzC,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY;AAAA;AAE5G,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK;AAC1C,SAAO;AAAA;AAIF,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,OAAM,WAAW;AAErB,QAAM,iBAAiB,QAAQ,MAAM,eAAe,iBAAiB,CAAC;AAEtE,QAAM,YAAY,YAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ;AAE9E,UAAM,QAAQ;AACd,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA;AAEtB,UAAM,UAAU;AAChB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAE/C,UAAI,iBAAiB,SAAS,QAAQ,KAAK;AACzC;AAAA;AAIF,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK;AAAA;AAC3C,qBAAW,UAAU,CAAC;AAAA;AACtB,gBAAQ,KAAK;AAAA;AAEtB,qBAAiB,SAAS;AAAA,KAE5B,CAAC,gBAAgB;AAGnB,QAAM,sBAAsB,YAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY;AAE/B,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,KAC3B;AAEH,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY;AAE/B,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM,GAAG,SAAS,GAAG;AAAA;AAAA,KAEpC;AAEH,QAAM,EAAE,iBAAiB,UAAU,gBAAgB,yBAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,YAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA;AAGF,MAAI;AACF,WACE,qCAAC,YAAD,mBAAgB,kBACd,qCAAC,gBAAgB,UAAjB;AAAA,MAA0B,OAAO,EAAE;AAAA,OACjC,qCAAC,WAAD,mBAAe,UAEjB,qCAAC,aAAD,MACG,WACC,qCAAC,iBAAD;AAAA,MAAiB,QAAQ,eAAe,KAAK,CAAC,CAAC,UAAU,KAAK,OAAO,UAAU;AAAA,MAAI,eAAa;AAAA,SAC9F;AAIZ,SAAO,qCAAC,WAAD,mBAAe;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -78,6 +78,8 @@ const StyledHeadTr = styled(Grid)`
|
|
|
78
78
|
isExpandable: props.isExpandable,
|
|
79
79
|
colsLayoutStyle: props.colsLayoutStyle
|
|
80
80
|
})};
|
|
81
|
+
border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
|
|
82
|
+
border-bottom: 1px solid ${(props) => props.theme.colors.neutral["080"]};
|
|
81
83
|
`;
|
|
82
84
|
const getStyledHeadTHBorderColor = (props) => {
|
|
83
85
|
if (props.dragOverlay)
|
|
@@ -96,16 +98,27 @@ const StyledHeadTh = styled.div`
|
|
|
96
98
|
${columnPadding}
|
|
97
99
|
color: #353c46;
|
|
98
100
|
min-height: 1.84615rem;
|
|
99
|
-
position: relative;
|
|
100
101
|
position: sticky;
|
|
101
|
-
top: 0;
|
|
102
102
|
z-index: ${ZIndexDataTable.HEADER_ROW};
|
|
103
103
|
display: flex;
|
|
104
104
|
justify-content: space-between;
|
|
105
105
|
box-sizing: border-box;
|
|
106
|
-
border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
|
|
107
|
-
border-bottom: 1px solid ${getStyledHeadTHBorderColor};
|
|
108
106
|
outline: none;
|
|
107
|
+
${(props) => props.isDraggingActive ? "" : `:hover {
|
|
108
|
+
&:after {
|
|
109
|
+
display: block;
|
|
110
|
+
content: ' ';
|
|
111
|
+
position: absolute;
|
|
112
|
+
top: 0;
|
|
113
|
+
left: 0;
|
|
114
|
+
right: 0;
|
|
115
|
+
bottom: 0;
|
|
116
|
+
border-bottom: 1px solid ${props.theme.colors.brand[700]};
|
|
117
|
+
pointer-events: none;
|
|
118
|
+
z-index: ${ZIndexDataTable.FOCUS_BORDER};
|
|
119
|
+
}
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
}`}
|
|
109
122
|
|
|
110
123
|
:focus {
|
|
111
124
|
&:after {
|
|
@@ -114,18 +127,13 @@ const StyledHeadTh = styled.div`
|
|
|
114
127
|
position: absolute;
|
|
115
128
|
top: 0;
|
|
116
129
|
left: 0;
|
|
117
|
-
right:
|
|
118
|
-
bottom:
|
|
130
|
+
right: 0;
|
|
131
|
+
bottom: 0;
|
|
119
132
|
border: 2px solid ${(props) => props.theme.colors.brand[700]};
|
|
120
133
|
pointer-events: none;
|
|
121
134
|
z-index: ${ZIndexDataTable.FOCUS_BORDER};
|
|
122
135
|
}
|
|
123
136
|
}
|
|
124
|
-
|
|
125
|
-
${(props) => props.isDraggingActive ? "" : `:hover {
|
|
126
|
-
border-bottom: 1px solid ${props.isDragOverlay ? "transparent" : props.theme.colors.brand[800]};
|
|
127
|
-
cursor: pointer;
|
|
128
|
-
}`}
|
|
129
137
|
`;
|
|
130
138
|
const StyledHeaderRightIconsWrapper = styled.div`
|
|
131
139
|
height: 100%;
|
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 styled from 'styled-components';\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 }) => `\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 ${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.div<WidthAndHeight & { noSelectionAllowed: boolean }>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\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%', height = '100%' }) => `\n width: ${sizeToCss(width)};\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n overflow: auto;\n ${({ height = 'auto', width = '100%' }) => `\n height: ${sizeToCss(height)};\n width: ${sizeToCss(width)};\n `}\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)`\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`;\n\nconst getStyledHeadTHBorderColor = (props) => {\n if (props.dragOverlay) return 'transparent';\n if (props.isFirstRowGroup) return 'transparent';\n return props.theme.colors.neutral['080'];\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:
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAOA,MAAM,iBAAiB,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAShB,MAAM,OAAO,MAAM;AAAA;AAAA,aAE5B,gBAAgB;AAAA;AAGtB,MAAM,oBAAoB,OAAO;AAAA;AAAA,MAElC,CAAC,UAAW,MAAM,YAAY,KAAK,eAAe;AAAA;AAAA;AAIjD,MAAM,yBAAyB,OAAO;AAAA,WAClC,CAAC,UAAU,UAAU,MAAM,SAAS;AAAA,YACnC,CAAC,UAAU,UAAU,MAAM,UAAU;AAAA,iBAChC,CAAC,EAAE,yBAA0B,qBAAqB,SAAS;AAAA;AAErE,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrC,CAAC,EAAE,QAAQ,QAAQ,SAAS,aAAa;AAAA,WAClC,UAAU;AAAA,YACT,UAAU;AAAA;AAAA;AAGf,MAAM,4BAA4B,OAAO;AAAA;AAAA,IAE5C,CAAC,EAAE,SAAS,aAAa;AAAA,YACjB,UAAU;AAAA;AAAA;AAGf,MAAM,2BAA2B,OAAO;AAAA;AAAA,IAE3C,CAAC,EAAE,SAAS,QAAQ,QAAQ,aAAa;AAAA,YACjC,UAAU;AAAA,WACX,UAAU;AAAA;AAAA;AAYrB,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA,kBAAkB,gBAAgB;AAAA,MACA;AAClC,MAAI,CAAC;AAAM,WAAO;AAClB,MAAI,oBAAoB,SAAS;AAC/B,UAAM,YAAY,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,KAAK;AAC9D,WAAO,0BAA0B;AAAA;AAGnC,SAAO,0BAA0B,KAAK,IAAI,CAAC,QAAQ,aAAa,QAAQ,KAAK;AAAA;AAGxE,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAS7B,CAAC,UAAW,MAAM,oBAAoB,gBAAgB,QAAQ,UAAU,MAAM,qBAAqB;AAAA;AAGvG,MAAM,eAAe,OAAO;AAAA,IAC/B,CAAC,UAAW,MAAM,oBAAoB,gBAAgB,OAAO,eAAe;AAAA,IAC5E,CAAC,UACD,4BAA4B;AAAA,EAC1B,MAAM,MAAM;AAAA,EACZ,cAAc,MAAM;AAAA,EACpB,iBAAiB,MAAM;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\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 }) => `\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 ${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.div<WidthAndHeight & { noSelectionAllowed: boolean }>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\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%', height = '100%' }) => `\n width: ${sizeToCss(width)};\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n overflow: auto;\n ${({ height = 'auto', width = '100%' }) => `\n height: ${sizeToCss(height)};\n width: ${sizeToCss(width)};\n `}\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)`\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`;\n\nconst getStyledHeadTHBorderColor = (props) => {\n if (props.dragOverlay) return 'transparent';\n if (props.isFirstRowGroup) return 'transparent';\n return props.theme.colors.neutral['080'];\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: ${({ isResizing, theme }) => (isResizing ? theme.colors.brand[600] : theme.colors.brand[400])};\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 /* border-bottom: 1px solid #ebedf0; */\n /* box-sizing: border-box; */\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 /* width: ${(props) =>\n props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%'}; */\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ padding: string }>`\n position: relative;\n background-color: ${({ theme }) => theme.colors.brand[200]};\n align-items: center;\n padding: 0 ${(props) => props.padding};\n border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n grid-template-columns: min-content 1fr;\n`;\n\nexport const GroupHeaderTitle = styled.span`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)`\n 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, theme }) => {\n if (!isDropIndicatorPositionInside) return '';\n return styledFocusCss({ theme });\n }}\n\n ${({ shouldDisplayHover, theme }) =>\n shouldDisplayHover\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.disabled ? props.theme.colors.neutral['500'] : '#333333')};\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-next.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -573,25 +573,25 @@
|
|
|
573
573
|
"dependencies": {
|
|
574
574
|
"@dnd-kit/core": "~4.0.3",
|
|
575
575
|
"@dnd-kit/sortable": "~5.0.0",
|
|
576
|
-
"@elliemae/ds-button": "3.0.0-
|
|
577
|
-
"@elliemae/ds-circular-progress-indicator": "3.0.0-
|
|
578
|
-
"@elliemae/ds-controlled-form": "3.0.0-
|
|
579
|
-
"@elliemae/ds-drag-and-drop": "3.0.0-
|
|
580
|
-
"@elliemae/ds-dropdownmenu": "3.0.0-
|
|
581
|
-
"@elliemae/ds-form": "3.0.0-
|
|
582
|
-
"@elliemae/ds-form-layout-blocks": "3.0.0-
|
|
583
|
-
"@elliemae/ds-grid": "3.0.0-
|
|
584
|
-
"@elliemae/ds-icons": "3.0.0-
|
|
585
|
-
"@elliemae/ds-indeterminate-progress-indicator": "3.0.0-
|
|
586
|
-
"@elliemae/ds-pagination": "3.0.0-
|
|
587
|
-
"@elliemae/ds-pills": "3.0.0-
|
|
588
|
-
"@elliemae/ds-popperjs": "3.0.0-
|
|
589
|
-
"@elliemae/ds-props-helpers": "3.0.0-
|
|
590
|
-
"@elliemae/ds-system": "3.0.0-
|
|
591
|
-
"@elliemae/ds-toolbar": "3.0.0-
|
|
592
|
-
"@elliemae/ds-truncated-tooltip-text": "3.0.0-
|
|
593
|
-
"@elliemae/ds-utilities": "3.0.0-
|
|
594
|
-
"@reduxjs/toolkit": "~1.7.
|
|
576
|
+
"@elliemae/ds-button": "3.0.0-next.11",
|
|
577
|
+
"@elliemae/ds-circular-progress-indicator": "3.0.0-next.11",
|
|
578
|
+
"@elliemae/ds-controlled-form": "3.0.0-next.11",
|
|
579
|
+
"@elliemae/ds-drag-and-drop": "3.0.0-next.11",
|
|
580
|
+
"@elliemae/ds-dropdownmenu": "3.0.0-next.11",
|
|
581
|
+
"@elliemae/ds-form": "3.0.0-next.11",
|
|
582
|
+
"@elliemae/ds-form-layout-blocks": "3.0.0-next.11",
|
|
583
|
+
"@elliemae/ds-grid": "3.0.0-next.11",
|
|
584
|
+
"@elliemae/ds-icons": "3.0.0-next.11",
|
|
585
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.0.0-next.11",
|
|
586
|
+
"@elliemae/ds-pagination": "3.0.0-next.11",
|
|
587
|
+
"@elliemae/ds-pills": "3.0.0-next.11",
|
|
588
|
+
"@elliemae/ds-popperjs": "3.0.0-next.11",
|
|
589
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.11",
|
|
590
|
+
"@elliemae/ds-system": "3.0.0-next.11",
|
|
591
|
+
"@elliemae/ds-toolbar": "3.0.0-next.11",
|
|
592
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-next.11",
|
|
593
|
+
"@elliemae/ds-utilities": "3.0.0-next.11",
|
|
594
|
+
"@reduxjs/toolkit": "~1.7.2",
|
|
595
595
|
"csstype": "~3.0.10",
|
|
596
596
|
"moment": "~2.29.1",
|
|
597
597
|
"prop-types": "~15.8.1",
|
|
@@ -604,7 +604,7 @@
|
|
|
604
604
|
"devDependencies": {
|
|
605
605
|
"@testing-library/react": "~12.1.2",
|
|
606
606
|
"@testing-library/user-event": "~13.5.0",
|
|
607
|
-
"@types/styled-components": "~5.1.
|
|
607
|
+
"@types/styled-components": "~5.1.22",
|
|
608
608
|
"styled-components": "~5.3.3",
|
|
609
609
|
"styled-system": "~5.1.5"
|
|
610
610
|
},
|
|
@@ -620,10 +620,10 @@
|
|
|
620
620
|
"typeSafety": false
|
|
621
621
|
},
|
|
622
622
|
"scripts": {
|
|
623
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
623
624
|
"test": "node ../../scripts/testing/test.mjs",
|
|
624
625
|
"lint": "node ../../scripts/lint.mjs",
|
|
625
626
|
"dts": "node ../../scripts/dts.mjs",
|
|
626
|
-
"dev": "node ../../scripts/build/build.js -w",
|
|
627
627
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
628
628
|
}
|
|
629
629
|
}
|