@elliemae/ds-data-table 3.12.0-rc.8 → 3.12.0

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.
@@ -92,10 +92,8 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
92
92
  const toolbarRef = (0, import_react.useRef)(null);
93
93
  const toolbarTriggerRef = (0, import_react.useRef)(null);
94
94
  const handleOnClickOutside = (0, import_react.useCallback)(() => setShow(false), []);
95
- const handleOnClick = (0, import_react.useCallback)((e) => {
96
- setShow((prev) => !prev);
97
- e.stopPropagation();
98
- }, []);
95
+ const handleOnClick = (0, import_react.useCallback)(() => setShow((prev) => !prev), []);
96
+ const stopPropagation = (0, import_react.useCallback)((e) => e.stopPropagation(), []);
99
97
  (0, import_ds_utilities.useOnClickOutside)(toolbarRef, handleOnClickOutside);
100
98
  const onToolbarKeyDown = (0, import_react.useCallback)((e) => {
101
99
  if (e.code === "Escape") {
@@ -111,7 +109,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
111
109
  }
112
110
  });
113
111
  }, []);
114
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarPosition, { onBlur: handleOnBlurToolBar, ref: toolbarRef, tabIndex: -1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToolbarWrapper, { onKeyDown: onToolbarKeyDown, isOpen: show, children: [
112
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarPosition, { onBlur: handleOnBlurToolBar, ref: toolbarRef, tabIndex: -1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToolbarWrapper, { onKeyDown: onToolbarKeyDown, onClick: stopPropagation, isOpen: show, children: [
115
113
  show && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarBtns, { children }),
116
114
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
117
115
  StyledButton,
@@ -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, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\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<{ isOpen: boolean }>`\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 outline: none;\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\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: TypescriptCell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLButtonElement>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback((e: React.MouseEvent) => {\n setShow((prev) => !prev);\n e.stopPropagation();\n }, []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.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 onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\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={mergeRefs(toolbarTriggerRef, cell?.ref)}\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;ADuGjB;AAvGN,mBAAqD;AACrD,uBAA4B;AAC5B,uBAA2B;AAC3B,sBAAgC;AAChC,0BAA6C;AAC7C,uBAA4B;AAG5B,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,OAAO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,mBAAe,yBAAO,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;AAAA;AAgCxB,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA0B,IAAI;AACjD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,CAAC,MAAwB;AACzD,YAAQ,CAAC,SAAS,CAAC,IAAI;AACvB,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,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,4CAAC,mBAAgB,QAAQ,qBAAqB,KAAK,YAAY,UAAU,IACvE,uDAAC,kBAAe,WAAW,kBAAkB,QAAQ,MAClD;AAAA,YAAQ,4CAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,6BAAY;AAAA,QACzB,cAAU,+BAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;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, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\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<{ isOpen: boolean }>`\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 outline: none;\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\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: TypescriptCell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLButtonElement>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(() => setShow((prev) => !prev), []);\n\n const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), [])\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.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 onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} 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={mergeRefs(toolbarTriggerRef, cell?.ref)}\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;ADsGjB;AAtGN,mBAAqD;AACrD,uBAA4B;AAC5B,uBAA2B;AAC3B,sBAAgC;AAChC,0BAA6C;AAC7C,uBAA4B;AAG5B,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,OAAO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,MAAM,mBAAe,yBAAO,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;AAAA;AAgCxB,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA0B,IAAI;AACjD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAyC,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAE7F,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,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,4CAAC,mBAAgB,QAAQ,qBAAqB,KAAK,YAAY,UAAU,IACvE,uDAAC,kBAAe,WAAW,kBAAkB,SAAS,iBAAiB,QAAQ,MAC5E;AAAA,YAAQ,4CAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,6BAAY;AAAA,QACzB,cAAU,+BAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -63,10 +63,8 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
63
63
  const toolbarRef = useRef(null);
64
64
  const toolbarTriggerRef = useRef(null);
65
65
  const handleOnClickOutside = useCallback(() => setShow(false), []);
66
- const handleOnClick = useCallback((e) => {
67
- setShow((prev) => !prev);
68
- e.stopPropagation();
69
- }, []);
66
+ const handleOnClick = useCallback(() => setShow((prev) => !prev), []);
67
+ const stopPropagation = useCallback((e) => e.stopPropagation(), []);
70
68
  useOnClickOutside(toolbarRef, handleOnClickOutside);
71
69
  const onToolbarKeyDown = useCallback((e) => {
72
70
  if (e.code === "Escape") {
@@ -82,7 +80,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
82
80
  }
83
81
  });
84
82
  }, []);
85
- return /* @__PURE__ */ jsx(ToolbarPosition, { onBlur: handleOnBlurToolBar, ref: toolbarRef, tabIndex: -1, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { onKeyDown: onToolbarKeyDown, isOpen: show, children: [
83
+ return /* @__PURE__ */ jsx(ToolbarPosition, { onBlur: handleOnBlurToolBar, ref: toolbarRef, tabIndex: -1, children: /* @__PURE__ */ jsxs(ToolbarWrapper, { onKeyDown: onToolbarKeyDown, onClick: stopPropagation, isOpen: show, children: [
86
84
  show && /* @__PURE__ */ jsx(ToolbarBtns, { children }),
87
85
  /* @__PURE__ */ jsx(
88
86
  StyledButton,
@@ -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, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\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<{ isOpen: boolean }>`\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 outline: none;\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\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: TypescriptCell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLButtonElement>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback((e: React.MouseEvent) => {\n setShow((prev) => !prev);\n e.stopPropagation();\n }, []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.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 onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\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={mergeRefs(toolbarTriggerRef, cell?.ref)}\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,YAAY,WAAW;ACuGjB,SACW,KADX;AAvGN,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,QAAQ,WAAW;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,mBAAmB;AAG5B,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,OAAO,MAAM,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;AAAA;AAgCxB,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,CAAC,MAAwB;AACzD,YAAQ,CAAC,SAAS,CAAC,IAAI;AACvB,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;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,oBAAC,mBAAgB,QAAQ,qBAAqB,KAAK,YAAY,UAAU,IACvE,+BAAC,kBAAe,WAAW,kBAAkB,QAAQ,MAClD;AAAA,YAAQ,oBAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;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, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\nimport type { TypescriptCell } from '../../types/props';\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<{ isOpen: boolean }>`\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 outline: none;\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\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: TypescriptCell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLButtonElement>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick: React.MouseEventHandler = useCallback(() => setShow((prev) => !prev), []);\n\n const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), [])\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.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 onBlur={handleOnBlurToolBar} ref={toolbarRef} tabIndex={-1}>\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} 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={mergeRefs(toolbarTriggerRef, cell?.ref)}\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,YAAY,WAAW;ACsGjB,SACW,KADX;AAtGN,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,QAAQ,WAAW;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB,iBAAiB;AAC7C,SAAS,mBAAmB;AAG5B,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,OAAO,MAAM,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;AAAA;AAgCxB,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAyC,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAE7F,QAAM,kBAA2C,YAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;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,oBAAC,mBAAgB,QAAQ,qBAAqB,KAAK,YAAY,UAAU,IACvE,+BAAC,kBAAe,WAAW,kBAAkB,SAAS,iBAAiB,QAAQ,MAC5E;AAAA,YAAQ,oBAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,YAAY;AAAA,QACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,8BAAC,mBAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;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.12.0-rc.8",
3
+ "version": "3.12.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "files": [
@@ -573,23 +573,23 @@
573
573
  "dependencies": {
574
574
  "react-virtual": "~2.10.4",
575
575
  "uid": "~2.0.0",
576
- "@elliemae/ds-button": "3.12.0-rc.8",
577
- "@elliemae/ds-circular-progress-indicator": "3.12.0-rc.8",
578
- "@elliemae/ds-controlled-form": "3.12.0-rc.8",
579
- "@elliemae/ds-drag-and-drop": "3.12.0-rc.8",
580
- "@elliemae/ds-dropdownmenu": "3.12.0-rc.8",
581
- "@elliemae/ds-form": "3.12.0-rc.8",
582
- "@elliemae/ds-form-layout-blocks": "3.12.0-rc.8",
583
- "@elliemae/ds-grid": "3.12.0-rc.8",
584
- "@elliemae/ds-icons": "3.12.0-rc.8",
585
- "@elliemae/ds-pagination": "3.12.0-rc.8",
586
- "@elliemae/ds-pills": "3.12.0-rc.8",
587
- "@elliemae/ds-popperjs": "3.12.0-rc.8",
588
- "@elliemae/ds-skeleton": "3.12.0-rc.8",
589
- "@elliemae/ds-system": "3.12.0-rc.8",
590
- "@elliemae/ds-toolbar": "3.12.0-rc.8",
591
- "@elliemae/ds-truncated-tooltip-text": "3.12.0-rc.8",
592
- "@elliemae/ds-utilities": "3.12.0-rc.8"
576
+ "@elliemae/ds-button": "3.12.0",
577
+ "@elliemae/ds-circular-progress-indicator": "3.12.0",
578
+ "@elliemae/ds-controlled-form": "3.12.0",
579
+ "@elliemae/ds-drag-and-drop": "3.12.0",
580
+ "@elliemae/ds-dropdownmenu": "3.12.0",
581
+ "@elliemae/ds-form": "3.12.0",
582
+ "@elliemae/ds-form-layout-blocks": "3.12.0",
583
+ "@elliemae/ds-grid": "3.12.0",
584
+ "@elliemae/ds-icons": "3.12.0",
585
+ "@elliemae/ds-pagination": "3.12.0",
586
+ "@elliemae/ds-pills": "3.12.0",
587
+ "@elliemae/ds-popperjs": "3.12.0",
588
+ "@elliemae/ds-skeleton": "3.12.0",
589
+ "@elliemae/ds-system": "3.12.0",
590
+ "@elliemae/ds-toolbar": "3.12.0",
591
+ "@elliemae/ds-truncated-tooltip-text": "3.12.0",
592
+ "@elliemae/ds-utilities": "3.12.0"
593
593
  },
594
594
  "devDependencies": {
595
595
  "@testing-library/react": "~12.1.3",