@elliemae/ds-data-table 3.2.0-rc.4 → 3.2.1-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.
@@ -91,8 +91,9 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
91
91
  cell.ref.current = _ref;
92
92
  }
93
93
  }
94
- }, []);
94
+ }, [cell?.ref]);
95
95
  const onToolbarKeyDown = (0, import_react.useCallback)((e) => {
96
+ console.log(e, "onToolbarKeyDown");
96
97
  if (e.code === "Escape") {
97
98
  setShow(false);
98
99
  toolbarTrigger.current?.focus();
@@ -100,6 +101,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
100
101
  e.stopPropagation();
101
102
  }, []);
102
103
  const onTriggerKeyDown = (0, import_react.useCallback)((e) => {
104
+ console.log(e, "ESTO DEBERIA");
103
105
  if (["Enter", "Space"].includes(e.code)) {
104
106
  handleOnClick();
105
107
  }
@@ -112,6 +114,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
112
114
  }
113
115
  });
114
116
  }, []);
117
+ console.log("toolbar");
115
118
  return /* @__PURE__ */ import_react.default.createElement(ToolbarPosition, {
116
119
  onBlur: handleOnBlurToolBar,
117
120
  ref: toolbarRef,
@@ -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((_ref: HTMLButtonElement | null) => {\n if (_ref) {\n toolbarTrigger.current = _ref;\n if (cell?.ref?.current) {\n cell.ref.current = _ref;\n }\n }\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 onTriggerKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\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 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,8BAAY,CAAC,SAAmC;AACrE,QAAI,MAAM;AACR,qBAAe,UAAU;AACzB,UAAI,MAAM,KAAK,SAAS;AACtB,aAAK,IAAI,UAAU;AAAA,MACrB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,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,mBAAmB,8BACvB,CAAC,MAA2B;AAC1B,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,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 ${({ 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;",
6
6
  "names": []
7
7
  }
@@ -66,8 +66,9 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
66
66
  cell.ref.current = _ref;
67
67
  }
68
68
  }
69
- }, []);
69
+ }, [cell?.ref]);
70
70
  const onToolbarKeyDown = useCallback((e) => {
71
+ console.log(e, "onToolbarKeyDown");
71
72
  if (e.code === "Escape") {
72
73
  setShow(false);
73
74
  toolbarTrigger.current?.focus();
@@ -75,6 +76,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
75
76
  e.stopPropagation();
76
77
  }, []);
77
78
  const onTriggerKeyDown = useCallback((e) => {
79
+ console.log(e, "ESTO DEBERIA");
78
80
  if (["Enter", "Space"].includes(e.code)) {
79
81
  handleOnClick();
80
82
  }
@@ -87,6 +89,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
87
89
  }
88
90
  });
89
91
  }, []);
92
+ console.log("toolbar");
90
93
  return /* @__PURE__ */ React2.createElement(ToolbarPosition, {
91
94
  onBlur: handleOnBlurToolBar,
92
95
  ref: toolbarRef,
@@ -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((_ref: HTMLButtonElement | null) => {\n if (_ref) {\n toolbarTrigger.current = _ref;\n if (cell?.ref?.current) {\n cell.ref.current = _ref;\n }\n }\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 onTriggerKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\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 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,YAAY,CAAC,SAAmC;AACrE,QAAI,MAAM;AACR,qBAAe,UAAU;AACzB,UAAI,MAAM,KAAK,SAAS;AACtB,aAAK,IAAI,UAAU;AAAA,MACrB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,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,mBAAmB,YACvB,CAAC,MAA2B;AAC1B,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,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 ${({ 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;",
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.2.0-rc.4",
3
+ "version": "3.2.1-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.2.0-rc.4",
575
- "@elliemae/ds-circular-progress-indicator": "3.2.0-rc.4",
576
- "@elliemae/ds-controlled-form": "3.2.0-rc.4",
577
- "@elliemae/ds-drag-and-drop": "3.2.0-rc.4",
578
- "@elliemae/ds-dropdownmenu": "3.2.0-rc.4",
579
- "@elliemae/ds-form": "3.2.0-rc.4",
580
- "@elliemae/ds-form-layout-blocks": "3.2.0-rc.4",
581
- "@elliemae/ds-grid": "3.2.0-rc.4",
582
- "@elliemae/ds-icons": "3.2.0-rc.4",
583
- "@elliemae/ds-pagination": "3.2.0-rc.4",
584
- "@elliemae/ds-pills": "3.2.0-rc.4",
585
- "@elliemae/ds-popperjs": "3.2.0-rc.4",
586
- "@elliemae/ds-skeleton": "3.2.0-rc.4",
587
- "@elliemae/ds-system": "3.2.0-rc.4",
588
- "@elliemae/ds-toolbar": "3.2.0-rc.4",
589
- "@elliemae/ds-truncated-tooltip-text": "3.2.0-rc.4",
590
- "@elliemae/ds-utilities": "3.2.0-rc.4",
574
+ "@elliemae/ds-button": "3.2.1-rc.1",
575
+ "@elliemae/ds-circular-progress-indicator": "3.2.1-rc.1",
576
+ "@elliemae/ds-controlled-form": "3.2.1-rc.1",
577
+ "@elliemae/ds-drag-and-drop": "3.2.1-rc.1",
578
+ "@elliemae/ds-dropdownmenu": "3.2.1-rc.1",
579
+ "@elliemae/ds-form": "3.2.1-rc.1",
580
+ "@elliemae/ds-form-layout-blocks": "3.2.1-rc.1",
581
+ "@elliemae/ds-grid": "3.2.1-rc.1",
582
+ "@elliemae/ds-icons": "3.2.1-rc.1",
583
+ "@elliemae/ds-pagination": "3.2.1-rc.1",
584
+ "@elliemae/ds-pills": "3.2.1-rc.1",
585
+ "@elliemae/ds-popperjs": "3.2.1-rc.1",
586
+ "@elliemae/ds-skeleton": "3.2.1-rc.1",
587
+ "@elliemae/ds-system": "3.2.1-rc.1",
588
+ "@elliemae/ds-toolbar": "3.2.1-rc.1",
589
+ "@elliemae/ds-truncated-tooltip-text": "3.2.1-rc.1",
590
+ "@elliemae/ds-utilities": "3.2.1-rc.1",
591
591
  "react-virtual": "~2.10.4",
592
592
  "uid": "~2.0.0"
593
593
  },