@elliemae/ds-data-table 3.3.0-next.8 → 3.3.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/cjs/exported-related/Toolbar/Toolbar.js +8 -16
  2. package/dist/cjs/exported-related/Toolbar/Toolbar.js.map +2 -2
  3. package/dist/cjs/parts/Cells/Cell.js +1 -0
  4. package/dist/cjs/parts/Cells/Cell.js.map +2 -2
  5. package/dist/cjs/parts/VirtualRowsList.js +1 -1
  6. package/dist/cjs/parts/VirtualRowsList.js.map +2 -2
  7. package/dist/cjs/styled.js +1 -1
  8. package/dist/cjs/styled.js.map +1 -1
  9. package/dist/esm/exported-related/Toolbar/Toolbar.js +8 -16
  10. package/dist/esm/exported-related/Toolbar/Toolbar.js.map +2 -2
  11. package/dist/esm/parts/Cells/Cell.js +1 -0
  12. package/dist/esm/parts/Cells/Cell.js.map +2 -2
  13. package/dist/esm/parts/VirtualRowsList.js +1 -1
  14. package/dist/esm/parts/VirtualRowsList.js.map +2 -2
  15. package/dist/esm/styled.js +1 -1
  16. package/dist/esm/styled.js.map +1 -1
  17. package/package.json +18 -18
package/dist/cjs/exported-related/Toolbar/Toolbar.js CHANGED
@@ -48,18 +48,22 @@ const ToolbarWrapper = import_ds_system.styled.div`
48
48
  height: 36px;
49
49
  margin-right: 1px;
50
50
  pointer-events: all;
51
+
51
52
  ${({ isOpen }) => isOpen && boxShadow}
52
53
 
53
54
  & .toolbar-trigger:focus {
54
55
  z-index: 8;
55
56
  }
56
57
  `;
58
+ const StyledButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2)`
59
+ background-color: transparent;
60
+ `;
57
61
  const ToolbarPosition = import_ds_system.styled.div`
58
62
  display: flex;
59
63
  justify-content: flex-end;
60
64
  align-items: center;
61
65
  pointer-events: none;
62
- background: white;
66
+ background: transparent;
63
67
  height: 28px;
64
68
  margin-top: 4px;
65
69
  width: 100%;
@@ -94,20 +98,12 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
94
98
  }
95
99
  }, [cell?.ref]);
96
100
  const onToolbarKeyDown = (0, import_react.useCallback)((e) => {
97
- console.log(e, "onToolbarKeyDown");
98
101
  if (e.code === "Escape") {
99
102
  setShow(false);
100
103
  toolbarTrigger.current?.focus();
101
104
  }
102
105
  e.stopPropagation();
103
106
  }, []);
104
- const onTriggerKeyDown = (0, import_react.useCallback)((e) => {
105
- console.log(e, "ESTO DEBERIA");
106
- if (["Enter", "Space"].includes(e.code)) {
107
- handleOnClick();
108
- }
109
- e.stopPropagation();
110
- }, [handleOnClick]);
111
107
  const handleOnBlurToolBar = (0, import_react.useCallback)(() => {
112
108
  setTimeout(() => {
113
109
  if (!toolbarRef?.current?.contains?.(document.activeElement)) {
@@ -115,23 +111,19 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
115
111
  }
116
112
  });
117
113
  }, []);
118
- console.log("toolbar");
119
114
  return /* @__PURE__ */ import_react.default.createElement(ToolbarPosition, {
120
115
  onBlur: handleOnBlurToolBar,
121
116
  ref: toolbarRef,
122
117
  onClick: (e) => e.stopPropagation()
123
118
  }, /* @__PURE__ */ import_react.default.createElement(ToolbarWrapper, {
124
- isOpen: show,
125
- onMouseEnter: () => setShow(true),
126
- onMouseLeave: () => setShow(false),
127
- onKeyDown: onToolbarKeyDown
128
- }, show && /* @__PURE__ */ import_react.default.createElement(ToolbarBtns, null, children), /* @__PURE__ */ import_react.default.createElement(import_ds_button.DSButtonV2, {
119
+ onKeyDown: onToolbarKeyDown,
120
+ isOpen: show
121
+ }, show && /* @__PURE__ */ import_react.default.createElement(ToolbarBtns, null, children), /* @__PURE__ */ import_react.default.createElement(StyledButton, {
129
122
  buttonType: "icon",
130
123
  className: "toolbar-trigger",
131
124
  "data-testid": import_constants.DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
132
125
  innerRef: setTriggerRefs,
133
126
  onClick: handleOnClick,
134
- onKeyDown: onTriggerKeyDown,
135
127
  tabIndex: isRowSelected === false ? -1 : 0,
136
128
  "aria-label": "Row actions"
137
129
  }, /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MoreOptionsVert, null))));
package/dist/cjs/exported-related/Toolbar/Toolbar.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/exported-related/Toolbar/Toolbar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst boxShadow = css`\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n ${({ isOpen }) => isOpen && boxShadow}\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\nexport const Toolbar: React.ComponentType<Record<string, unknown>> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n const toolbarTrigger = useRef<HTMLButtonElement | null>();\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const setTriggerRefs = useCallback(\n (_ref: HTMLButtonElement | null) => {\n if (_ref) {\n toolbarTrigger.current = _ref;\n if (cell?.ref?.current) {\n cell.ref.current = _ref;\n }\n }\n },\n [cell?.ref],\n );\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n console.log(e, 'onToolbarKeyDown');\n\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTrigger.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const onTriggerKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n console.log(e, 'ESTO DEBERIA');\n if (['Enter', 'Space'].includes(e.code)) {\n handleOnClick();\n }\n e.stopPropagation();\n },\n [handleOnClick],\n );\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n console.log('toolbar');\n\n return (\n <ToolbarPosition\n onBlur={handleOnBlurToolBar}\n ref={toolbarRef}\n onClick={(e: React.MouseEvent) => e.stopPropagation()}\n >\n <ToolbarWrapper\n isOpen={show}\n onMouseEnter={() => setShow(true)}\n onMouseLeave={() => setShow(false)}\n onKeyDown={onToolbarKeyDown}\n >\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <DSButtonV2\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={setTriggerRefs}\n onClick={handleOnClick}\n onKeyDown={onTriggerKeyDown}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </DSButtonV2>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,uBAA4B;AAC5B,uBAA2B;AAC3B,sBAAgC;AAChC,0BAAkC;AAClC,uBAA4B;AAE5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM1B,CAAC,EAAE,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBxB,MAAM,UAAwD,CAAC,EAAE,eAAe,MAAM,eAAe;AAC1G,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AAEtC,QAAM,aAAa,yBAAO,IAAI;AAC9B,QAAM,iBAAiB,yBAAiC;AAExD,QAAM,uBAAuB,8BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,8BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,iBAAiB,8BACrB,CAAC,SAAmC;AAClC,QAAI,MAAM;AACR,qBAAe,UAAU;AACzB,UAAI,MAAM,KAAK,SAAS;AACtB,aAAK,IAAI,UAAU;AAAA,MACrB;AAAA,IACF;AAAA,EACF,GACA,CAAC,MAAM,GAAG,CACZ;AAEA,QAAM,mBAAmB,8BAAY,CAAC,MAA2B;AAC/D,YAAQ,IAAI,GAAG,kBAAkB;AAEjC,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,qBAAe,SAAS,MAAM;AAAA,IAChC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,8BACvB,CAAC,MAA2B;AAC1B,YAAQ,IAAI,GAAG,cAAc;AAC7B,QAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,oBAAc;AAAA,IAChB;AACA,MAAE,gBAAgB;AAAA,EACpB,GACA,CAAC,aAAa,CAChB;AAEA,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AACL,UAAQ,IAAI,SAAS;AAErB,SACE,mDAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS,CAAC,MAAwB,EAAE,gBAAgB;AAAA,KAEpD,mDAAC;AAAA,IACC,QAAQ;AAAA,IACR,cAAc,MAAM,QAAQ,IAAI;AAAA,IAChC,cAAc,MAAM,QAAQ,KAAK;AAAA,IACjC,WAAW;AAAA,KAEV,QAAQ,mDAAC,mBAAa,QAAS,GAChC,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,kBAAkB,QAAQ,KAAK;AAAA,IACzC,cAAW;AAAA,KAEX,mDAAC,qCAAgB,CACnB,CACF,CACF;AAEJ;",
4
+ "sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst boxShadow = css`\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n\n ${({ isOpen }) => isOpen && boxShadow}\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\nexport const Toolbar: React.ComponentType<Record<string, unknown>> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n const toolbarTrigger = useRef<HTMLButtonElement | null>();\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const setTriggerRefs = useCallback(\n (_ref: HTMLButtonElement | null) => {\n if (_ref) {\n toolbarTrigger.current = _ref;\n if (cell?.ref?.current) {\n cell.ref.current = _ref;\n }\n }\n },\n [cell?.ref],\n );\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTrigger.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n\n return (\n <ToolbarPosition\n onBlur={handleOnBlurToolBar}\n ref={toolbarRef}\n onClick={(e: React.MouseEvent) => e.stopPropagation()}\n >\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} isOpen={show}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={setTriggerRefs}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,uBAA4B;AAC5B,uBAA2B;AAC3B,sBAAgC;AAChC,0BAAkC;AAClC,uBAA4B;AAE5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1B,CAAC,EAAE,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,eAAe,6BAAO,2BAAU;AAAA;AAAA;AAItC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBxB,MAAM,UAAwD,CAAC,EAAE,eAAe,MAAM,eAAe;AAC1G,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AAEtC,QAAM,aAAa,yBAAO,IAAI;AAC9B,QAAM,iBAAiB,yBAAiC;AAExD,QAAM,uBAAuB,8BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,8BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,iBAAiB,8BACrB,CAAC,SAAmC;AAClC,QAAI,MAAM;AACR,qBAAe,UAAU;AACzB,UAAI,MAAM,KAAK,SAAS;AACtB,aAAK,IAAI,UAAU;AAAA,MACrB;AAAA,IACF;AAAA,EACF,GACA,CAAC,MAAM,GAAG,CACZ;AAEA,QAAM,mBAAmB,8BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,qBAAe,SAAS,MAAM;AAAA,IAChC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,mDAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS,CAAC,MAAwB,EAAE,gBAAgB;AAAA,KAEpD,mDAAC;AAAA,IAAe,WAAW;AAAA,IAAkB,QAAQ;AAAA,KAClD,QAAQ,mDAAC,mBAAa,QAAS,GAChC,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,IACzC,cAAW;AAAA,KAEX,mDAAC,qCAAgB,CACnB,CACF,CACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Cells/Cell.js CHANGED
@@ -37,6 +37,7 @@ var import_Columns = require("../../addons/Columns");
37
37
  var import_constants = require("../../configs/constants");
38
38
  var import_useCellStyle = require("./useCellStyle");
39
39
  const PureStandardCell = (0, import_react.memo)(({ cellStyle, children, column }) => /* @__PURE__ */ import_react.default.createElement(import_styled.StyledCell, {
40
+ onKeyDown: (e) => e.stopPropagation(),
40
41
  column,
41
42
  style: cellStyle,
42
43
  role: "cell",
package/dist/cjs/parts/Cells/Cell.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/Cells/Cell.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useMemo, memo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCell, StyledCellContent } from '../../styled';\nimport { outOfTheBoxEditables } from '../../addons/Editables';\nimport { DataTableContext } from '../../DataTableContext';\nimport { TypescriptColumn, TypescriptRow } from '../../types/props';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { useCellStyle } from './useCellStyle';\n\nconst PureStandardCell = memo<{ cellStyle: unknown; column: TypescriptColumn }>(({ cellStyle, children, column }) => (\n <StyledCell column={column} style={cellStyle} role=\"cell\" data-testid={DATA_TESTID.DATA_TABLE_CELL}>\n {children}\n </StyledCell>\n));\n\ninterface CellProps {\n cell: any;\n column: TypescriptColumn;\n row: TypescriptRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n cell,\n column,\n row,\n isRowSelected,\n shouldAddExpandCell,\n isDragOverlay,\n}) => {\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { cellRendererProps, disabledRows },\n } = ctx;\n const { draggableProps } = useContext(SortableItemContext);\n\n const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n const cellProps = useMemo(\n () => ({\n ...cellRendererProps,\n cell,\n row,\n isRowSelected,\n ctx,\n draggableProps,\n isDragOverlay,\n role: 'cell',\n cellStyle,\n column,\n }),\n [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column],\n );\n\n const CellComponent = cell.render;\n\n const pureCellContent = useMemo(() => {\n if (shouldAddExpandCell) {\n return (\n <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n {shouldAddExpandCell && <expandRowColumn.Cell {...cellProps} />}\n <CellComponent {...cellProps} />\n </Grid>\n );\n }\n return <CellComponent {...cellProps} />;\n }, [CellComponent, cellProps, shouldAddExpandCell]);\n\n const DefaultCellContentJSX = useMemo(\n () => (\n <StyledCellContent>\n {appliedTextWrap === 'truncate' ? <SimpleTruncatedTooltipText value={pureCellContent} /> : pureCellContent}\n </StyledCellContent>\n ),\n [appliedTextWrap, pureCellContent],\n );\n\n const EditableContentJSX = useMemo(() => {\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function')\n return column.editable({\n DefaultCellRender: DefaultCellContentJSX,\n ...cellProps,\n }) as JSX.Element;\n\n return null;\n }, [DefaultCellContentJSX, cellProps, column]);\n\n return (\n <PureStandardCell {...cellProps}>\n {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n </PureStandardCell>\n );\n};\n\nexport { Cell };\nexport default Cell;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,uCAA2C;AAC3C,qBAAqB;AACrB,oBAA8C;AAC9C,uBAAqC;AACrC,8BAAiC;AAEjC,iCAAoC;AACpC,qBAAgC;AAChC,uBAA4B;AAC5B,0BAA6B;AAE7B,MAAM,mBAAmB,uBAAuD,CAAC,EAAE,WAAW,UAAU,aACtG,mDAAC;AAAA,EAAW;AAAA,EAAgB,OAAO;AAAA,EAAW,MAAK;AAAA,EAAO,eAAa,6BAAY;AAAA,GAChF,QACH,CACD;AAWD,MAAM,OAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,MAAM,6BAAW,wCAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,MAC/B;AACJ,QAAM,EAAE,mBAAmB,6BAAW,8CAAmB;AAEzD,QAAM,CAAC,iBAAiB,aAAa,sCAAa,QAAQ,mBAAmB;AAE7E,QAAM,YAAY,0BAChB,MAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IACA,CAAC,mBAAmB,MAAM,KAAK,eAAe,KAAK,gBAAgB,eAAe,WAAW,MAAM,CACrG;AAEA,QAAM,gBAAgB,KAAK;AAE3B,QAAM,kBAAkB,0BAAQ,MAAM;AACpC,QAAI,qBAAqB;AACvB,aACE,mDAAC;AAAA,QAAK,MAAM,CAAC,eAAe,MAAM;AAAA,QAAG,YAAW;AAAA,QAAS,QAAO;AAAA,SAC7D,uBAAuB,mDAAC,+BAAgB,MAAhB;AAAA,QAAsB,GAAG;AAAA,OAAW,GAC7D,mDAAC;AAAA,QAAe,GAAG;AAAA,OAAW,CAChC;AAAA,IAEJ;AACA,WAAO,mDAAC;AAAA,MAAe,GAAG;AAAA,KAAW;AAAA,EACvC,GAAG,CAAC,eAAe,WAAW,mBAAmB,CAAC;AAElD,QAAM,wBAAwB,0BAC5B,MACE,mDAAC,uCACE,oBAAoB,aAAa,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,IAAK,eAC7F,GAEF,CAAC,iBAAiB,eAAe,CACnC;AAEA,QAAM,qBAAqB,0BAAQ,MAAM;AACvC,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,sBAAsB,wCAAuB,OAAO;AAC5D,UAAI;AAAmB,eAAO,mDAAC;AAAA,UAAmB,GAAG;AAAA,UAAW,mBAAmB;AAAA,SAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa;AAC7B,aAAO,OAAO,SAAS;AAAA,QACrB,mBAAmB;AAAA,QACnB,GAAG;AAAA,MACL,CAAC;AAEH,WAAO;AAAA,EACT,GAAG,CAAC,uBAAuB,WAAW,MAAM,CAAC;AAE7C,SACE,mDAAC;AAAA,IAAkB,GAAG;AAAA,KACnB,OAAO,YAAY,CAAC,aAAa,IAAI,OAAO,qBAAqB,qBACpE;AAEJ;AAGA,IAAO,eAAQ;",
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useMemo, memo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCell, StyledCellContent } from '../../styled';\nimport { outOfTheBoxEditables } from '../../addons/Editables';\nimport { DataTableContext } from '../../DataTableContext';\nimport { TypescriptColumn, TypescriptRow } from '../../types/props';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { useCellStyle } from './useCellStyle';\n\nconst PureStandardCell = memo<{ cellStyle: unknown; column: TypescriptColumn }>(({ cellStyle, children, column }) => (\n <StyledCell\n onKeyDown={(e: KeyboardEvent) => e.stopPropagation()}\n column={column}\n style={cellStyle}\n role=\"cell\"\n data-testid={DATA_TESTID.DATA_TABLE_CELL}\n >\n {children}\n </StyledCell>\n));\n\ninterface CellProps {\n cell: any;\n column: TypescriptColumn;\n row: TypescriptRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n cell,\n column,\n row,\n isRowSelected,\n shouldAddExpandCell,\n isDragOverlay,\n}) => {\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { cellRendererProps, disabledRows },\n } = ctx;\n const { draggableProps } = useContext(SortableItemContext);\n\n const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n const cellProps = useMemo(\n () => ({\n ...cellRendererProps,\n cell,\n row,\n isRowSelected,\n ctx,\n draggableProps,\n isDragOverlay,\n role: 'cell',\n cellStyle,\n column,\n }),\n [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column],\n );\n\n const CellComponent = cell.render;\n\n const pureCellContent = useMemo(() => {\n if (shouldAddExpandCell) {\n return (\n <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n {shouldAddExpandCell && <expandRowColumn.Cell {...cellProps} />}\n <CellComponent {...cellProps} />\n </Grid>\n );\n }\n return <CellComponent {...cellProps} />;\n }, [CellComponent, cellProps, shouldAddExpandCell]);\n\n const DefaultCellContentJSX = useMemo(\n () => (\n <StyledCellContent>\n {appliedTextWrap === 'truncate' ? <SimpleTruncatedTooltipText value={pureCellContent} /> : pureCellContent}\n </StyledCellContent>\n ),\n [appliedTextWrap, pureCellContent],\n );\n\n const EditableContentJSX = useMemo(() => {\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function')\n return column.editable({\n DefaultCellRender: DefaultCellContentJSX,\n ...cellProps,\n }) as JSX.Element;\n\n return null;\n }, [DefaultCellContentJSX, cellProps, column]);\n\n return (\n <PureStandardCell {...cellProps}>\n {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n </PureStandardCell>\n );\n};\n\nexport { Cell };\nexport default Cell;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiD;AACjD,uCAA2C;AAC3C,qBAAqB;AACrB,oBAA8C;AAC9C,uBAAqC;AACrC,8BAAiC;AAEjC,iCAAoC;AACpC,qBAAgC;AAChC,uBAA4B;AAC5B,0BAA6B;AAE7B,MAAM,mBAAmB,uBAAuD,CAAC,EAAE,WAAW,UAAU,aACtG,mDAAC;AAAA,EACC,WAAW,CAAC,MAAqB,EAAE,gBAAgB;AAAA,EACnD;AAAA,EACA,OAAO;AAAA,EACP,MAAK;AAAA,EACL,eAAa,6BAAY;AAAA,GAExB,QACH,CACD;AAWD,MAAM,OAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,MAAM,6BAAW,wCAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,MAC/B;AACJ,QAAM,EAAE,mBAAmB,6BAAW,8CAAmB;AAEzD,QAAM,CAAC,iBAAiB,aAAa,sCAAa,QAAQ,mBAAmB;AAE7E,QAAM,YAAY,0BAChB,MAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IACA,CAAC,mBAAmB,MAAM,KAAK,eAAe,KAAK,gBAAgB,eAAe,WAAW,MAAM,CACrG;AAEA,QAAM,gBAAgB,KAAK;AAE3B,QAAM,kBAAkB,0BAAQ,MAAM;AACpC,QAAI,qBAAqB;AACvB,aACE,mDAAC;AAAA,QAAK,MAAM,CAAC,eAAe,MAAM;AAAA,QAAG,YAAW;AAAA,QAAS,QAAO;AAAA,SAC7D,uBAAuB,mDAAC,+BAAgB,MAAhB;AAAA,QAAsB,GAAG;AAAA,OAAW,GAC7D,mDAAC;AAAA,QAAe,GAAG;AAAA,OAAW,CAChC;AAAA,IAEJ;AACA,WAAO,mDAAC;AAAA,MAAe,GAAG;AAAA,KAAW;AAAA,EACvC,GAAG,CAAC,eAAe,WAAW,mBAAmB,CAAC;AAElD,QAAM,wBAAwB,0BAC5B,MACE,mDAAC,uCACE,oBAAoB,aAAa,mDAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,IAAK,eAC7F,GAEF,CAAC,iBAAiB,eAAe,CACnC;AAEA,QAAM,qBAAqB,0BAAQ,MAAM;AACvC,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,sBAAsB,wCAAuB,OAAO;AAC5D,UAAI;AAAmB,eAAO,mDAAC;AAAA,UAAmB,GAAG;AAAA,UAAW,mBAAmB;AAAA,SAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa;AAC7B,aAAO,OAAO,SAAS;AAAA,QACrB,mBAAmB;AAAA,QACnB,GAAG;AAAA,MACL,CAAC;AAEH,WAAO;AAAA,EACT,GAAG,CAAC,uBAAuB,WAAW,MAAM,CAAC;AAE7C,SACE,mDAAC;AAAA,IAAkB,GAAG;AAAA,KACnB,OAAO,YAAY,CAAC,aAAa,IAAI,OAAO,qBAAqB,qBACpE;AAEJ;AAGA,IAAO,eAAQ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/VirtualRowsList.js CHANGED
@@ -62,7 +62,7 @@ const VirtualRowsList = () => {
62
62
  tabIndex: -1
63
63
  }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledTableContentWrapper, {
64
64
  role: "rowgroup",
65
- height: "100%"
65
+ height: isEmptyContent ? "100%" : totalSize
66
66
  }, /* @__PURE__ */ import_react.default.createElement(import_Headers.Headers, null), isEmptyContent && /* @__PURE__ */ import_react.default.createElement(import_EmptyContent.EmptyContent, {
67
67
  width: totalColumnsWidth
68
68
  }), isLoading ? /* @__PURE__ */ import_react.default.createElement(import_Loader.MemoizedLoader, null) : null, !isLoading && !isEmptyContent && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Rows.RowsWithContext, null), /* @__PURE__ */ import_react.default.createElement(import_Footer.Footer, null))));
package/dist/cjs/parts/VirtualRowsList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/VirtualRowsList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { EmptyContent } from './EmptyContent'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers'; // imported this way to avoid circular dependencies\nimport { Footer } from './Footer'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled';\nimport { MemoizedLoader as Loader } from './Loader';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const VirtualRowsList = () => {\n const {\n virtualListRef,\n tableProps: { isLoading },\n virtualListHelpers,\n layoutHelpers: { totalColumnsWidth },\n flattenedData,\n setFocusedRowId,\n } = useContext(DataTableContext);\n const { totalSize, scrollToIndex } = virtualListHelpers;\n\n const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.ctrlKey && e.code === 'End') {\n scrollToIndex(flattenedData.length - 1);\n setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n } else if (e.ctrlKey && e.code === 'Home') {\n scrollToIndex(0, { align: 'center' });\n setFocusedRowId(flattenedData[0].uid);\n }\n },\n [scrollToIndex, setFocusedRowId, flattenedData],\n );\n\n return (\n <StyledVirtualListWrapper\n ref={virtualListRef}\n data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n onKeyDown={onKeyDown}\n tabIndex={-1}\n >\n <StyledTableContentWrapper role=\"rowgroup\" height=\"100%\">\n <Headers />\n {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n {isLoading ? <Loader /> : null}\n {!isLoading && !isEmptyContent && (\n <>\n <Rows />\n <Footer />\n </>\n )}\n </StyledTableContentWrapper>\n </StyledVirtualListWrapper>\n );\n};\n\nexport default VirtualRowsList;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,0BAA6B;AAC7B,kBAAwC;AACxC,qBAAwB;AACxB,oBAAuB;AACvB,8BAAiC;AACjC,oBAAoE;AACpE,oBAAyC;AACzC,uBAA4B;AAErB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE;AAAA,IACd;AAAA,IACA,eAAe,EAAE;AAAA,IACjB;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM,EAAE,WAAW,kBAAkB;AAErC,QAAM,iBAAiB,0BAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,YAAY,8BAChB,CAAC,MAA2B;AAC1B,QAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,oBAAc,cAAc,SAAS,CAAC;AACtC,sBAAgB,cAAc,cAAc,SAAS,GAAG,GAAG;AAAA,IAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,oBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,sBAAgB,cAAc,GAAG,GAAG;AAAA,IACtC;AAAA,EACF,GACA,CAAC,eAAe,iBAAiB,aAAa,CAChD;AAEA,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,KAEV,mDAAC;AAAA,IAA0B,MAAK;AAAA,IAAW,QAAO;AAAA,KAChD,mDAAC,4BAAQ,GACR,kBAAkB,mDAAC;AAAA,IAAa,OAAO;AAAA,GAAmB,GAC1D,YAAY,mDAAC,kCAAO,IAAK,MACzB,CAAC,aAAa,CAAC,kBACd,wFACE,mDAAC,iCAAK,GACN,mDAAC,0BAAO,CACV,CAEJ,CACF;AAEJ;AAEA,IAAO,0BAAQ;",
4
+ "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { EmptyContent } from './EmptyContent'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers'; // imported this way to avoid circular dependencies\nimport { Footer } from './Footer'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled';\nimport { MemoizedLoader as Loader } from './Loader';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const VirtualRowsList = () => {\n const {\n virtualListRef,\n tableProps: { isLoading },\n virtualListHelpers,\n layoutHelpers: { totalColumnsWidth },\n flattenedData,\n setFocusedRowId,\n } = useContext(DataTableContext);\n const { totalSize, scrollToIndex } = virtualListHelpers;\n\n const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.ctrlKey && e.code === 'End') {\n scrollToIndex(flattenedData.length - 1);\n setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n } else if (e.ctrlKey && e.code === 'Home') {\n scrollToIndex(0, { align: 'center' });\n setFocusedRowId(flattenedData[0].uid);\n }\n },\n [scrollToIndex, setFocusedRowId, flattenedData],\n );\n\n return (\n <StyledVirtualListWrapper\n ref={virtualListRef}\n data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n onKeyDown={onKeyDown}\n tabIndex={-1}\n >\n <StyledTableContentWrapper role=\"rowgroup\" height={isEmptyContent ? '100%' : totalSize}>\n <Headers />\n {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n {isLoading ? <Loader /> : null}\n {!isLoading && !isEmptyContent && (\n <>\n <Rows />\n <Footer />\n </>\n )}\n </StyledTableContentWrapper>\n </StyledVirtualListWrapper>\n );\n};\n\nexport default VirtualRowsList;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,0BAA6B;AAC7B,kBAAwC;AACxC,qBAAwB;AACxB,oBAAuB;AACvB,8BAAiC;AACjC,oBAAoE;AACpE,oBAAyC;AACzC,uBAA4B;AAErB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE;AAAA,IACd;AAAA,IACA,eAAe,EAAE;AAAA,IACjB;AAAA,IACA;AAAA,MACE,6BAAW,wCAAgB;AAC/B,QAAM,EAAE,WAAW,kBAAkB;AAErC,QAAM,iBAAiB,0BAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,YAAY,8BAChB,CAAC,MAA2B;AAC1B,QAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,oBAAc,cAAc,SAAS,CAAC;AACtC,sBAAgB,cAAc,cAAc,SAAS,GAAG,GAAG;AAAA,IAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,oBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,sBAAgB,cAAc,GAAG,GAAG;AAAA,IACtC;AAAA,EACF,GACA,CAAC,eAAe,iBAAiB,aAAa,CAChD;AAEA,SACE,mDAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,KAEV,mDAAC;AAAA,IAA0B,MAAK;AAAA,IAAW,QAAQ,iBAAiB,SAAS;AAAA,KAC3E,mDAAC,4BAAQ,GACR,kBAAkB,mDAAC;AAAA,IAAa,OAAO;AAAA,GAAmB,GAC1D,YAAY,mDAAC,kCAAO,IAAK,MACzB,CAAC,aAAa,CAAC,kBACd,wFACE,mDAAC,iCAAK,GACN,mDAAC,0BAAO,CACV,CAEJ,CACF;AAEJ;AAEA,IAAO,0BAAQ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/styled.js CHANGED
@@ -200,7 +200,7 @@ const StyledActionCell = import_ds_system.styled.div`
200
200
  display: inline-block;
201
201
  right: 0;
202
202
  /* border-bottom: 1px solid #ebedf0; */
203
- background: white;
203
+ background-color: transparent;
204
204
  `;
205
205
  const StyledCell = import_ds_system.styled.div`
206
206
  ${import_helpers.cellPadding}
package/dist/cjs/styled.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\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(Grid)<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<WidthAndHeight & { noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\nexport const StyledTableContentWrapper = styled.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: 100%;\n width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n cols: string[];\n isExpandable: boolean;\n colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n cols,\n colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n if (!cols) return '';\n if (colsLayoutStyle === 'fixed') {\n const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n return `grid-template-columns: ${widthAttr}`;\n }\n\n return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n colsLayoutStyle: string;\n totalColumnsWidth: number | string;\n}>`\n position: relative; /* ie11 fallback */\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n isExpandable: props.isExpandable,\n colsLayoutStyle: props.colsLayoutStyle,\n })};\n border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<any>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n height: 100%;\n display: flex;\n align-items: center;\n max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n display: inline-block;\n background: transparent;\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: relative; /* ie11 fallback */\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background: white;\n`;\n\nexport const StyledCell = styled.div`\n ${cellPadding}\n /* 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, disabled }) =>\n shouldDisplayHover && !disabled\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"],
4
+ "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\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(Grid)<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<WidthAndHeight & { noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\nexport const StyledTableContentWrapper = styled.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: 100%;\n width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n cols: string[];\n isExpandable: boolean;\n colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n cols,\n colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n if (!cols) return '';\n if (colsLayoutStyle === 'fixed') {\n const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n return `grid-template-columns: ${widthAttr}`;\n }\n\n return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n colsLayoutStyle: string;\n totalColumnsWidth: number | string;\n}>`\n position: relative; /* ie11 fallback */\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n isExpandable: props.isExpandable,\n colsLayoutStyle: props.colsLayoutStyle,\n })};\n border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<any>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n height: 100%;\n display: flex;\n align-items: center;\n max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n display: inline-block;\n background: transparent;\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: relative; /* ie11 fallback */\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background-color: transparent;\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, disabled }) =>\n shouldDisplayHover && !disabled\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
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/exported-related/Toolbar/Toolbar.js CHANGED
@@ -23,18 +23,22 @@ const ToolbarWrapper = styled.div`
23
23
  height: 36px;
24
24
  margin-right: 1px;
25
25
  pointer-events: all;
26
+
26
27
  ${({ isOpen }) => isOpen && boxShadow}
27
28
 
28
29
  & .toolbar-trigger:focus {
29
30
  z-index: 8;
30
31
  }
31
32
  `;
33
+ const StyledButton = styled(DSButtonV2)`
34
+ background-color: transparent;
35
+ `;
32
36
  const ToolbarPosition = styled.div`
33
37
  display: flex;
34
38
  justify-content: flex-end;
35
39
  align-items: center;
36
40
  pointer-events: none;
37
- background: white;
41
+ background: transparent;
38
42
  height: 28px;
39
43
  margin-top: 4px;
40
44
  width: 100%;
@@ -69,20 +73,12 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
69
73
  }
70
74
  }, [cell?.ref]);
71
75
  const onToolbarKeyDown = useCallback((e) => {
72
- console.log(e, "onToolbarKeyDown");
73
76
  if (e.code === "Escape") {
74
77
  setShow(false);
75
78
  toolbarTrigger.current?.focus();
76
79
  }
77
80
  e.stopPropagation();
78
81
  }, []);
79
- const onTriggerKeyDown = useCallback((e) => {
80
- console.log(e, "ESTO DEBERIA");
81
- if (["Enter", "Space"].includes(e.code)) {
82
- handleOnClick();
83
- }
84
- e.stopPropagation();
85
- }, [handleOnClick]);
86
82
  const handleOnBlurToolBar = useCallback(() => {
87
83
  setTimeout(() => {
88
84
  if (!toolbarRef?.current?.contains?.(document.activeElement)) {
@@ -90,23 +86,19 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
90
86
  }
91
87
  });
92
88
  }, []);
93
- console.log("toolbar");
94
89
  return /* @__PURE__ */ React2.createElement(ToolbarPosition, {
95
90
  onBlur: handleOnBlurToolBar,
96
91
  ref: toolbarRef,
97
92
  onClick: (e) => e.stopPropagation()
98
93
  }, /* @__PURE__ */ React2.createElement(ToolbarWrapper, {
99
- isOpen: show,
100
- onMouseEnter: () => setShow(true),
101
- onMouseLeave: () => setShow(false),
102
- onKeyDown: onToolbarKeyDown
103
- }, show && /* @__PURE__ */ React2.createElement(ToolbarBtns, null, children), /* @__PURE__ */ React2.createElement(DSButtonV2, {
94
+ onKeyDown: onToolbarKeyDown,
95
+ isOpen: show
96
+ }, show && /* @__PURE__ */ React2.createElement(ToolbarBtns, null, children), /* @__PURE__ */ React2.createElement(StyledButton, {
104
97
  buttonType: "icon",
105
98
  className: "toolbar-trigger",
106
99
  "data-testid": DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
107
100
  innerRef: setTriggerRefs,
108
101
  onClick: handleOnClick,
109
- onKeyDown: onTriggerKeyDown,
110
102
  tabIndex: isRowSelected === false ? -1 : 0,
111
103
  "aria-label": "Row actions"
112
104
  }, /* @__PURE__ */ React2.createElement(MoreOptionsVert, null))));
package/dist/esm/exported-related/Toolbar/Toolbar.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Toolbar/Toolbar.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst boxShadow = css`\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n ${({ isOpen }) => isOpen && boxShadow}\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\nexport const Toolbar: React.ComponentType<Record<string, unknown>> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n const toolbarTrigger = useRef<HTMLButtonElement | null>();\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const setTriggerRefs = useCallback(\n (_ref: HTMLButtonElement | null) => {\n if (_ref) {\n toolbarTrigger.current = _ref;\n if (cell?.ref?.current) {\n cell.ref.current = _ref;\n }\n }\n },\n [cell?.ref],\n );\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n console.log(e, 'onToolbarKeyDown');\n\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTrigger.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const onTriggerKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n console.log(e, 'ESTO DEBERIA');\n if (['Enter', 'Space'].includes(e.code)) {\n handleOnClick();\n }\n e.stopPropagation();\n },\n [handleOnClick],\n );\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n console.log('toolbar');\n\n return (\n <ToolbarPosition\n onBlur={handleOnBlurToolBar}\n ref={toolbarRef}\n onClick={(e: React.MouseEvent) => e.stopPropagation()}\n >\n <ToolbarWrapper\n isOpen={show}\n onMouseEnter={() => setShow(true)}\n onMouseLeave={() => setShow(false)}\n onKeyDown={onToolbarKeyDown}\n >\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <DSButtonV2\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={setTriggerRefs}\n onClick={handleOnClick}\n onKeyDown={onTriggerKeyDown}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </DSButtonV2>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n"],
5
- "mappings": ";AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM1B,CAAC,EAAE,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBxB,MAAM,UAAwD,CAAC,EAAE,eAAe,MAAM,eAAe;AAC1G,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,iBAAiB,OAAiC;AAExD,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,iBAAiB,YACrB,CAAC,SAAmC;AAClC,QAAI,MAAM;AACR,qBAAe,UAAU;AACzB,UAAI,MAAM,KAAK,SAAS;AACtB,aAAK,IAAI,UAAU;AAAA,MACrB;AAAA,IACF;AAAA,EACF,GACA,CAAC,MAAM,GAAG,CACZ;AAEA,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,YAAQ,IAAI,GAAG,kBAAkB;AAEjC,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,qBAAe,SAAS,MAAM;AAAA,IAChC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YACvB,CAAC,MAA2B;AAC1B,YAAQ,IAAI,GAAG,cAAc;AAC7B,QAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,oBAAc;AAAA,IAChB;AACA,MAAE,gBAAgB;AAAA,EACpB,GACA,CAAC,aAAa,CAChB;AAEA,QAAM,sBAAsB,YAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AACL,UAAQ,IAAI,SAAS;AAErB,SACE,qCAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS,CAAC,MAAwB,EAAE,gBAAgB;AAAA,KAEpD,qCAAC;AAAA,IACC,QAAQ;AAAA,IACR,cAAc,MAAM,QAAQ,IAAI;AAAA,IAChC,cAAc,MAAM,QAAQ,KAAK;AAAA,IACjC,WAAW;AAAA,KAEV,QAAQ,qCAAC,mBAAa,QAAS,GAChC,qCAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,kBAAkB,QAAQ,KAAK;AAAA,IACzC,cAAW;AAAA,KAEX,qCAAC,qBAAgB,CACnB,CACF,CACF;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst boxShadow = css`\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n\n ${({ isOpen }) => isOpen && boxShadow}\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n`;\n\nconst StyledButton = styled(DSButtonV2)`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\nexport const Toolbar: React.ComponentType<Record<string, unknown>> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n const toolbarTrigger = useRef<HTMLButtonElement | null>();\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const setTriggerRefs = useCallback(\n (_ref: HTMLButtonElement | null) => {\n if (_ref) {\n toolbarTrigger.current = _ref;\n if (cell?.ref?.current) {\n cell.ref.current = _ref;\n }\n }\n },\n [cell?.ref],\n );\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTrigger.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n\n return (\n <ToolbarPosition\n onBlur={handleOnBlurToolBar}\n ref={toolbarRef}\n onClick={(e: React.MouseEvent) => e.stopPropagation()}\n >\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} isOpen={show}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={setTriggerRefs}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n"],
5
+ "mappings": ";AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAMlB,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1B,CAAC,EAAE,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,eAAe,OAAO,UAAU;AAAA;AAAA;AAItC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBxB,MAAM,UAAwD,CAAC,EAAE,eAAe,MAAM,eAAe;AAC1G,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,iBAAiB,OAAiC;AAExD,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,iBAAiB,YACrB,CAAC,SAAmC;AAClC,QAAI,MAAM;AACR,qBAAe,UAAU;AACzB,UAAI,MAAM,KAAK,SAAS;AACtB,aAAK,IAAI,UAAU;AAAA,MACrB;AAAA,IACF;AAAA,EACF,GACA,CAAC,MAAM,GAAG,CACZ;AAEA,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,qBAAe,SAAS,MAAM;AAAA,IAChC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,qCAAC;AAAA,IACC,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS,CAAC,MAAwB,EAAE,gBAAgB;AAAA,KAEpD,qCAAC;AAAA,IAAe,WAAW;AAAA,IAAkB,QAAQ;AAAA,KAClD,QAAQ,qCAAC,mBAAa,QAAS,GAChC,qCAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,IACzC,cAAW;AAAA,KAEX,qCAAC,qBAAgB,CACnB,CACF,CACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Cells/Cell.js CHANGED
@@ -11,6 +11,7 @@ import { expandRowColumn } from "../../addons/Columns";
11
11
  import { DATA_TESTID } from "../../configs/constants";
12
12
  import { useCellStyle } from "./useCellStyle";
13
13
  const PureStandardCell = memo(({ cellStyle, children, column }) => /* @__PURE__ */ React2.createElement(StyledCell, {
14
+ onKeyDown: (e) => e.stopPropagation(),
14
15
  column,
15
16
  style: cellStyle,
16
17
  role: "cell",
package/dist/esm/parts/Cells/Cell.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Cells/Cell.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useMemo, memo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCell, StyledCellContent } from '../../styled';\nimport { outOfTheBoxEditables } from '../../addons/Editables';\nimport { DataTableContext } from '../../DataTableContext';\nimport { TypescriptColumn, TypescriptRow } from '../../types/props';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { useCellStyle } from './useCellStyle';\n\nconst PureStandardCell = memo<{ cellStyle: unknown; column: TypescriptColumn }>(({ cellStyle, children, column }) => (\n <StyledCell column={column} style={cellStyle} role=\"cell\" data-testid={DATA_TESTID.DATA_TABLE_CELL}>\n {children}\n </StyledCell>\n));\n\ninterface CellProps {\n cell: any;\n column: TypescriptColumn;\n row: TypescriptRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n cell,\n column,\n row,\n isRowSelected,\n shouldAddExpandCell,\n isDragOverlay,\n}) => {\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { cellRendererProps, disabledRows },\n } = ctx;\n const { draggableProps } = useContext(SortableItemContext);\n\n const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n const cellProps = useMemo(\n () => ({\n ...cellRendererProps,\n cell,\n row,\n isRowSelected,\n ctx,\n draggableProps,\n isDragOverlay,\n role: 'cell',\n cellStyle,\n column,\n }),\n [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column],\n );\n\n const CellComponent = cell.render;\n\n const pureCellContent = useMemo(() => {\n if (shouldAddExpandCell) {\n return (\n <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n {shouldAddExpandCell && <expandRowColumn.Cell {...cellProps} />}\n <CellComponent {...cellProps} />\n </Grid>\n );\n }\n return <CellComponent {...cellProps} />;\n }, [CellComponent, cellProps, shouldAddExpandCell]);\n\n const DefaultCellContentJSX = useMemo(\n () => (\n <StyledCellContent>\n {appliedTextWrap === 'truncate' ? <SimpleTruncatedTooltipText value={pureCellContent} /> : pureCellContent}\n </StyledCellContent>\n ),\n [appliedTextWrap, pureCellContent],\n );\n\n const EditableContentJSX = useMemo(() => {\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function')\n return column.editable({\n DefaultCellRender: DefaultCellContentJSX,\n ...cellProps,\n }) as JSX.Element;\n\n return null;\n }, [DefaultCellContentJSX, cellProps, column]);\n\n return (\n <PureStandardCell {...cellProps}>\n {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n </PureStandardCell>\n );\n};\n\nexport { Cell };\nexport default Cell;\n"],
5
- "mappings": ";AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,KAAuD,CAAC,EAAE,WAAW,UAAU,aACtG,qCAAC;AAAA,EAAW;AAAA,EAAgB,OAAO;AAAA,EAAW,MAAK;AAAA,EAAO,eAAa,YAAY;AAAA,GAChF,QACH,CACD;AAWD,MAAM,OAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,MAC/B;AACJ,QAAM,EAAE,mBAAmB,WAAW,mBAAmB;AAEzD,QAAM,CAAC,iBAAiB,aAAa,aAAa,QAAQ,mBAAmB;AAE7E,QAAM,YAAY,QAChB,MAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IACA,CAAC,mBAAmB,MAAM,KAAK,eAAe,KAAK,gBAAgB,eAAe,WAAW,MAAM,CACrG;AAEA,QAAM,gBAAgB,KAAK;AAE3B,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,qBAAqB;AACvB,aACE,qCAAC;AAAA,QAAK,MAAM,CAAC,eAAe,MAAM;AAAA,QAAG,YAAW;AAAA,QAAS,QAAO;AAAA,SAC7D,uBAAuB,qCAAC,gBAAgB,MAAhB;AAAA,QAAsB,GAAG;AAAA,OAAW,GAC7D,qCAAC;AAAA,QAAe,GAAG;AAAA,OAAW,CAChC;AAAA,IAEJ;AACA,WAAO,qCAAC;AAAA,MAAe,GAAG;AAAA,KAAW;AAAA,EACvC,GAAG,CAAC,eAAe,WAAW,mBAAmB,CAAC;AAElD,QAAM,wBAAwB,QAC5B,MACE,qCAAC,yBACE,oBAAoB,aAAa,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,IAAK,eAC7F,GAEF,CAAC,iBAAiB,eAAe,CACnC;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,sBAAsB,uBAAuB,OAAO;AAC5D,UAAI;AAAmB,eAAO,qCAAC;AAAA,UAAmB,GAAG;AAAA,UAAW,mBAAmB;AAAA,SAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa;AAC7B,aAAO,OAAO,SAAS;AAAA,QACrB,mBAAmB;AAAA,QACnB,GAAG;AAAA,MACL,CAAC;AAEH,WAAO;AAAA,EACT,GAAG,CAAC,uBAAuB,WAAW,MAAM,CAAC;AAE7C,SACE,qCAAC;AAAA,IAAkB,GAAG;AAAA,KACnB,OAAO,YAAY,CAAC,aAAa,IAAI,OAAO,qBAAqB,qBACpE;AAEJ;AAGA,IAAO,eAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useContext, useMemo, memo } from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledCell, StyledCellContent } from '../../styled';\nimport { outOfTheBoxEditables } from '../../addons/Editables';\nimport { DataTableContext } from '../../DataTableContext';\nimport { TypescriptColumn, TypescriptRow } from '../../types/props';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { useCellStyle } from './useCellStyle';\n\nconst PureStandardCell = memo<{ cellStyle: unknown; column: TypescriptColumn }>(({ cellStyle, children, column }) => (\n <StyledCell\n onKeyDown={(e: KeyboardEvent) => e.stopPropagation()}\n column={column}\n style={cellStyle}\n role=\"cell\"\n data-testid={DATA_TESTID.DATA_TABLE_CELL}\n >\n {children}\n </StyledCell>\n));\n\ninterface CellProps {\n cell: any;\n column: TypescriptColumn;\n row: TypescriptRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n cell,\n column,\n row,\n isRowSelected,\n shouldAddExpandCell,\n isDragOverlay,\n}) => {\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { cellRendererProps, disabledRows },\n } = ctx;\n const { draggableProps } = useContext(SortableItemContext);\n\n const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n const cellProps = useMemo(\n () => ({\n ...cellRendererProps,\n cell,\n row,\n isRowSelected,\n ctx,\n draggableProps,\n isDragOverlay,\n role: 'cell',\n cellStyle,\n column,\n }),\n [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column],\n );\n\n const CellComponent = cell.render;\n\n const pureCellContent = useMemo(() => {\n if (shouldAddExpandCell) {\n return (\n <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n {shouldAddExpandCell && <expandRowColumn.Cell {...cellProps} />}\n <CellComponent {...cellProps} />\n </Grid>\n );\n }\n return <CellComponent {...cellProps} />;\n }, [CellComponent, cellProps, shouldAddExpandCell]);\n\n const DefaultCellContentJSX = useMemo(\n () => (\n <StyledCellContent>\n {appliedTextWrap === 'truncate' ? <SimpleTruncatedTooltipText value={pureCellContent} /> : pureCellContent}\n </StyledCellContent>\n ),\n [appliedTextWrap, pureCellContent],\n );\n\n const EditableContentJSX = useMemo(() => {\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable];\n if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function')\n return column.editable({\n DefaultCellRender: DefaultCellContentJSX,\n ...cellProps,\n }) as JSX.Element;\n\n return null;\n }, [DefaultCellContentJSX, cellProps, column]);\n\n return (\n <PureStandardCell {...cellProps}>\n {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n </PureStandardCell>\n );\n};\n\nexport { Cell };\nexport default Cell;\n"],
5
+ "mappings": ";AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,KAAuD,CAAC,EAAE,WAAW,UAAU,aACtG,qCAAC;AAAA,EACC,WAAW,CAAC,MAAqB,EAAE,gBAAgB;AAAA,EACnD;AAAA,EACA,OAAO;AAAA,EACP,MAAK;AAAA,EACL,eAAa,YAAY;AAAA,GAExB,QACH,CACD;AAWD,MAAM,OAAuC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,MAC/B;AACJ,QAAM,EAAE,mBAAmB,WAAW,mBAAmB;AAEzD,QAAM,CAAC,iBAAiB,aAAa,aAAa,QAAQ,mBAAmB;AAE7E,QAAM,YAAY,QAChB,MAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IACA,CAAC,mBAAmB,MAAM,KAAK,eAAe,KAAK,gBAAgB,eAAe,WAAW,MAAM,CACrG;AAEA,QAAM,gBAAgB,KAAK;AAE3B,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,qBAAqB;AACvB,aACE,qCAAC;AAAA,QAAK,MAAM,CAAC,eAAe,MAAM;AAAA,QAAG,YAAW;AAAA,QAAS,QAAO;AAAA,SAC7D,uBAAuB,qCAAC,gBAAgB,MAAhB;AAAA,QAAsB,GAAG;AAAA,OAAW,GAC7D,qCAAC;AAAA,QAAe,GAAG;AAAA,OAAW,CAChC;AAAA,IAEJ;AACA,WAAO,qCAAC;AAAA,MAAe,GAAG;AAAA,KAAW;AAAA,EACvC,GAAG,CAAC,eAAe,WAAW,mBAAmB,CAAC;AAElD,QAAM,wBAAwB,QAC5B,MACE,qCAAC,yBACE,oBAAoB,aAAa,qCAAC;AAAA,IAA2B,OAAO;AAAA,GAAiB,IAAK,eAC7F,GAEF,CAAC,iBAAiB,eAAe,CACnC;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,QAAI,OAAO,OAAO,aAAa,UAAU;AACvC,YAAM,EAAE,sBAAsB,uBAAuB,OAAO;AAC5D,UAAI;AAAmB,eAAO,qCAAC;AAAA,UAAmB,GAAG;AAAA,UAAW,mBAAmB;AAAA,SAAuB;AAAA,IAC5G;AACA,QAAI,OAAO,OAAO,aAAa;AAC7B,aAAO,OAAO,SAAS;AAAA,QACrB,mBAAmB;AAAA,QACnB,GAAG;AAAA,MACL,CAAC;AAEH,WAAO;AAAA,EACT,GAAG,CAAC,uBAAuB,WAAW,MAAM,CAAC;AAE7C,SACE,qCAAC;AAAA,IAAkB,GAAG;AAAA,KACnB,OAAO,YAAY,CAAC,aAAa,IAAI,OAAO,qBAAqB,qBACpE;AAEJ;AAGA,IAAO,eAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/VirtualRowsList.js CHANGED
@@ -36,7 +36,7 @@ const VirtualRowsList = () => {
36
36
  tabIndex: -1
37
37
  }, /* @__PURE__ */ React2.createElement(StyledTableContentWrapper, {
38
38
  role: "rowgroup",
39
- height: "100%"
39
+ height: isEmptyContent ? "100%" : totalSize
40
40
  }, /* @__PURE__ */ React2.createElement(Headers, null), isEmptyContent && /* @__PURE__ */ React2.createElement(EmptyContent, {
41
41
  width: totalColumnsWidth
42
42
  }), isLoading ? /* @__PURE__ */ React2.createElement(Loader, null) : null, !isLoading && !isEmptyContent && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Rows, null), /* @__PURE__ */ React2.createElement(Footer, null))));
package/dist/esm/parts/VirtualRowsList.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/VirtualRowsList.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { EmptyContent } from './EmptyContent'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers'; // imported this way to avoid circular dependencies\nimport { Footer } from './Footer'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled';\nimport { MemoizedLoader as Loader } from './Loader';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const VirtualRowsList = () => {\n const {\n virtualListRef,\n tableProps: { isLoading },\n virtualListHelpers,\n layoutHelpers: { totalColumnsWidth },\n flattenedData,\n setFocusedRowId,\n } = useContext(DataTableContext);\n const { totalSize, scrollToIndex } = virtualListHelpers;\n\n const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.ctrlKey && e.code === 'End') {\n scrollToIndex(flattenedData.length - 1);\n setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n } else if (e.ctrlKey && e.code === 'Home') {\n scrollToIndex(0, { align: 'center' });\n setFocusedRowId(flattenedData[0].uid);\n }\n },\n [scrollToIndex, setFocusedRowId, flattenedData],\n );\n\n return (\n <StyledVirtualListWrapper\n ref={virtualListRef}\n data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n onKeyDown={onKeyDown}\n tabIndex={-1}\n >\n <StyledTableContentWrapper role=\"rowgroup\" height=\"100%\">\n <Headers />\n {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n {isLoading ? <Loader /> : null}\n {!isLoading && !isEmptyContent && (\n <>\n <Rows />\n <Footer />\n </>\n )}\n </StyledTableContentWrapper>\n </StyledVirtualListWrapper>\n );\n};\n\nexport default VirtualRowsList;\n"],
5
- "mappings": ";AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE;AAAA,IACd;AAAA,IACA,eAAe,EAAE;AAAA,IACjB;AAAA,IACA;AAAA,MACE,WAAW,gBAAgB;AAC/B,QAAM,EAAE,WAAW,kBAAkB;AAErC,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,YAAY,YAChB,CAAC,MAA2B;AAC1B,QAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,oBAAc,cAAc,SAAS,CAAC;AACtC,sBAAgB,cAAc,cAAc,SAAS,GAAG,GAAG;AAAA,IAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,oBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,sBAAgB,cAAc,GAAG,GAAG;AAAA,IACtC;AAAA,EACF,GACA,CAAC,eAAe,iBAAiB,aAAa,CAChD;AAEA,SACE,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,YAAY;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,KAEV,qCAAC;AAAA,IAA0B,MAAK;AAAA,IAAW,QAAO;AAAA,KAChD,qCAAC,aAAQ,GACR,kBAAkB,qCAAC;AAAA,IAAa,OAAO;AAAA,GAAmB,GAC1D,YAAY,qCAAC,YAAO,IAAK,MACzB,CAAC,aAAa,CAAC,kBACd,4DACE,qCAAC,UAAK,GACN,qCAAC,YAAO,CACV,CAEJ,CACF;AAEJ;AAEA,IAAO,0BAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { EmptyContent } from './EmptyContent'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers'; // imported this way to avoid circular dependencies\nimport { Footer } from './Footer'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled';\nimport { MemoizedLoader as Loader } from './Loader';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const VirtualRowsList = () => {\n const {\n virtualListRef,\n tableProps: { isLoading },\n virtualListHelpers,\n layoutHelpers: { totalColumnsWidth },\n flattenedData,\n setFocusedRowId,\n } = useContext(DataTableContext);\n const { totalSize, scrollToIndex } = virtualListHelpers;\n\n const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.ctrlKey && e.code === 'End') {\n scrollToIndex(flattenedData.length - 1);\n setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n } else if (e.ctrlKey && e.code === 'Home') {\n scrollToIndex(0, { align: 'center' });\n setFocusedRowId(flattenedData[0].uid);\n }\n },\n [scrollToIndex, setFocusedRowId, flattenedData],\n );\n\n return (\n <StyledVirtualListWrapper\n ref={virtualListRef}\n data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n onKeyDown={onKeyDown}\n tabIndex={-1}\n >\n <StyledTableContentWrapper role=\"rowgroup\" height={isEmptyContent ? '100%' : totalSize}>\n <Headers />\n {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n {isLoading ? <Loader /> : null}\n {!isLoading && !isEmptyContent && (\n <>\n <Rows />\n <Footer />\n </>\n )}\n </StyledTableContentWrapper>\n </StyledVirtualListWrapper>\n );\n};\n\nexport default VirtualRowsList;\n"],
5
+ "mappings": ";AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE;AAAA,IACd;AAAA,IACA,eAAe,EAAE;AAAA,IACjB;AAAA,IACA;AAAA,MACE,WAAW,gBAAgB;AAC/B,QAAM,EAAE,WAAW,kBAAkB;AAErC,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,YAAY,YAChB,CAAC,MAA2B;AAC1B,QAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,oBAAc,cAAc,SAAS,CAAC;AACtC,sBAAgB,cAAc,cAAc,SAAS,GAAG,GAAG;AAAA,IAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,oBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,sBAAgB,cAAc,GAAG,GAAG;AAAA,IACtC;AAAA,EACF,GACA,CAAC,eAAe,iBAAiB,aAAa,CAChD;AAEA,SACE,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,YAAY;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,KAEV,qCAAC;AAAA,IAA0B,MAAK;AAAA,IAAW,QAAQ,iBAAiB,SAAS;AAAA,KAC3E,qCAAC,aAAQ,GACR,kBAAkB,qCAAC;AAAA,IAAa,OAAO;AAAA,GAAmB,GAC1D,YAAY,qCAAC,YAAO,IAAK,MACzB,CAAC,aAAa,CAAC,kBACd,4DACE,qCAAC,UAAK,GACN,qCAAC,YAAO,CACV,CAEJ,CACF;AAEJ;AAEA,IAAO,0BAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/styled.js CHANGED
@@ -156,7 +156,7 @@ const StyledActionCell = styled.div`
156
156
  display: inline-block;
157
157
  right: 0;
158
158
  /* border-bottom: 1px solid #ebedf0; */
159
- background: white;
159
+ background-color: transparent;
160
160
  `;
161
161
  const StyledCell = styled.div`
162
162
  ${cellPadding}
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 '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\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(Grid)<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<WidthAndHeight & { noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\nexport const StyledTableContentWrapper = styled.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: 100%;\n width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n cols: string[];\n isExpandable: boolean;\n colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n cols,\n colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n if (!cols) return '';\n if (colsLayoutStyle === 'fixed') {\n const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n return `grid-template-columns: ${widthAttr}`;\n }\n\n return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n colsLayoutStyle: string;\n totalColumnsWidth: number | string;\n}>`\n position: relative; /* ie11 fallback */\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n isExpandable: props.isExpandable,\n colsLayoutStyle: props.colsLayoutStyle,\n })};\n border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<any>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n height: 100%;\n display: flex;\n align-items: center;\n max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n display: inline-block;\n background: transparent;\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: relative; /* ie11 fallback */\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background: white;\n`;\n\nexport const StyledCell = styled.div`\n ${cellPadding}\n /* 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, disabled }) =>\n shouldDisplayHover && !disabled\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"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\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(Grid)<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<WidthAndHeight & { noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\nexport const StyledTableContentWrapper = styled.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: 100%;\n width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n cols: string[];\n isExpandable: boolean;\n colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n cols,\n colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n if (!cols) return '';\n if (colsLayoutStyle === 'fixed') {\n const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n return `grid-template-columns: ${widthAttr}`;\n }\n\n return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n colsLayoutStyle: string;\n totalColumnsWidth: number | string;\n}>`\n position: relative; /* ie11 fallback */\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n isExpandable: props.isExpandable,\n colsLayoutStyle: props.colsLayoutStyle,\n })};\n border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<any>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n height: 100%;\n display: flex;\n align-items: center;\n max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n display: inline-block;\n background: transparent;\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: relative; /* ie11 fallback */\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background-color: transparent;\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, disabled }) =>\n shouldDisplayHover && !disabled\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
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.3.0-next.8",
3
+ "version": "3.3.0-rc.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "files": [
@@ -571,23 +571,23 @@
571
571
  "indent": 4
572
572
  },
573
573
  "dependencies": {
574
- "@elliemae/ds-button": "3.3.0-next.8",
575
- "@elliemae/ds-circular-progress-indicator": "3.3.0-next.8",
576
- "@elliemae/ds-controlled-form": "3.3.0-next.8",
577
- "@elliemae/ds-drag-and-drop": "3.3.0-next.8",
578
- "@elliemae/ds-dropdownmenu": "3.3.0-next.8",
579
- "@elliemae/ds-form": "3.3.0-next.8",
580
- "@elliemae/ds-form-layout-blocks": "3.3.0-next.8",
581
- "@elliemae/ds-grid": "3.3.0-next.8",
582
- "@elliemae/ds-icons": "3.3.0-next.8",
583
- "@elliemae/ds-pagination": "3.3.0-next.8",
584
- "@elliemae/ds-pills": "3.3.0-next.8",
585
- "@elliemae/ds-popperjs": "3.3.0-next.8",
586
- "@elliemae/ds-skeleton": "3.3.0-next.8",
587
- "@elliemae/ds-system": "3.3.0-next.8",
588
- "@elliemae/ds-toolbar": "3.3.0-next.8",
589
- "@elliemae/ds-truncated-tooltip-text": "3.3.0-next.8",
590
- "@elliemae/ds-utilities": "3.3.0-next.8",
574
+ "@elliemae/ds-button": "3.3.0-rc.1",
575
+ "@elliemae/ds-circular-progress-indicator": "3.3.0-rc.1",
576
+ "@elliemae/ds-controlled-form": "3.3.0-rc.1",
577
+ "@elliemae/ds-drag-and-drop": "3.3.0-rc.1",
578
+ "@elliemae/ds-dropdownmenu": "3.3.0-rc.1",
579
+ "@elliemae/ds-form": "3.3.0-rc.1",
580
+ "@elliemae/ds-form-layout-blocks": "3.3.0-rc.1",
581
+ "@elliemae/ds-grid": "3.3.0-rc.1",
582
+ "@elliemae/ds-icons": "3.3.0-rc.1",
583
+ "@elliemae/ds-pagination": "3.3.0-rc.1",
584
+ "@elliemae/ds-pills": "3.3.0-rc.1",
585
+ "@elliemae/ds-popperjs": "3.3.0-rc.1",
586
+ "@elliemae/ds-skeleton": "3.3.0-rc.1",
587
+ "@elliemae/ds-system": "3.3.0-rc.1",
588
+ "@elliemae/ds-toolbar": "3.3.0-rc.1",
589
+ "@elliemae/ds-truncated-tooltip-text": "3.3.0-rc.1",
590
+ "@elliemae/ds-utilities": "3.3.0-rc.1",
591
591
  "react-virtual": "~2.10.4",
592
592
  "uid": "~2.0.0"
593
593
  },