@elliemae/ds-data-table 3.37.0-rc.4 → 3.37.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.
- package/dist/cjs/configs/useNativeResizeObserver.js +51 -0
- package/dist/cjs/configs/useNativeResizeObserver.js.map +7 -0
- package/dist/cjs/configs/useTableResizeCb.js +2 -2
- package/dist/cjs/configs/useTableResizeCb.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/index.js +1 -2
- package/dist/cjs/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/cjs/exported-related/Toolbar/Toolbar.js +3 -3
- package/dist/cjs/exported-related/Toolbar/Toolbar.js.map +3 -3
- package/dist/cjs/parts/DnDHandle.js +1 -2
- package/dist/cjs/parts/DnDHandle.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js +3 -1
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/cjs/parts/Row.js +1 -2
- package/dist/cjs/parts/Row.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +5 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/configs/useNativeResizeObserver.js +21 -0
- package/dist/esm/configs/useNativeResizeObserver.js.map +7 -0
- package/dist/esm/configs/useTableResizeCb.js +1 -1
- package/dist/esm/configs/useTableResizeCb.js.map +1 -1
- package/dist/esm/exported-related/FilterPopover/index.js +1 -2
- package/dist/esm/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js +2 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/dist/esm/parts/DnDHandle.js +1 -2
- package/dist/esm/parts/DnDHandle.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js +4 -2
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/esm/parts/Row.js +1 -2
- package/dist/esm/parts/Row.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +6 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/configs/useNativeResizeObserver.d.ts +4 -0
- package/dist/types/react-desc-prop-types.d.ts +58 -4
- package/package.json +29 -29
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var useNativeResizeObserver_exports = {};
|
|
30
|
+
__export(useNativeResizeObserver_exports, {
|
|
31
|
+
useNativeResizeObserver: () => useNativeResizeObserver
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(useNativeResizeObserver_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_react = require("react");
|
|
36
|
+
const useNativeResizeObserver = (el, callback) => {
|
|
37
|
+
const resizeObserver = (0, import_react.useMemo)(
|
|
38
|
+
() => new ResizeObserver((entries) => {
|
|
39
|
+
const entry = entries[0];
|
|
40
|
+
const contentRect = entry.contentRect;
|
|
41
|
+
const target = entry.target;
|
|
42
|
+
callback({ contentRect, target });
|
|
43
|
+
}),
|
|
44
|
+
[callback]
|
|
45
|
+
);
|
|
46
|
+
(0, import_react.useEffect)(() => {
|
|
47
|
+
if (el) resizeObserver.observe(el);
|
|
48
|
+
return () => resizeObserver.disconnect();
|
|
49
|
+
}, [el, resizeObserver]);
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=useNativeResizeObserver.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/configs/useNativeResizeObserver.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo } from 'react';\n\n// Custom hook to use the resize observer api,\n// to observe changes in the size of an **UNIQUE** element\n// Will trigger the callback with the contentRect,\n// which contains width, height, top, bottom, etc of the element,\n// and the html element itself, so you can query for offsetWidth, etc\nexport const useNativeResizeObserver = <T extends HTMLElement>(\n el: T | null,\n callback: (entry: { contentRect: DOMRectReadOnly; target: T }) => void,\n) => {\n const resizeObserver = useMemo(\n () =>\n new ResizeObserver((entries) => {\n const entry = entries[0]; // We will only observe one element\n\n const contentRect = entry.contentRect;\n\n const target = entry.target as T;\n\n callback({ contentRect, target });\n }),\n [callback],\n );\n\n useEffect(() => {\n if (el) resizeObserver.observe(el);\n return () => resizeObserver.disconnect();\n }, [el, resizeObserver]);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AAO5B,MAAM,0BAA0B,CACrC,IACA,aACG;AACH,QAAM,qBAAiB;AAAA,IACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,YAAM,QAAQ,QAAQ,CAAC;AAEvB,YAAM,cAAc,MAAM;AAE1B,YAAM,SAAS,MAAM;AAErB,eAAS,EAAE,aAAa,OAAO,CAAC;AAAA,IAClC,CAAC;AAAA,IACH,CAAC,QAAQ;AAAA,EACX;AAEA,8BAAU,MAAM;AACd,QAAI,GAAI,gBAAe,QAAQ,EAAE;AACjC,WAAO,MAAM,eAAe,WAAW;AAAA,EACzC,GAAG,CAAC,IAAI,cAAc,CAAC;AACzB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -33,7 +33,7 @@ __export(useTableResizeCb_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(useTableResizeCb_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = __toESM(require("react"));
|
|
36
|
-
var
|
|
36
|
+
var import_useNativeResizeObserver = require("./useNativeResizeObserver.js");
|
|
37
37
|
const useTableResizeCb = (config) => {
|
|
38
38
|
const { virtualListRef, propsWithDefault } = config;
|
|
39
39
|
const { onTableResize } = propsWithDefault;
|
|
@@ -43,6 +43,6 @@ const useTableResizeCb = (config) => {
|
|
|
43
43
|
},
|
|
44
44
|
[onTableResize]
|
|
45
45
|
);
|
|
46
|
-
(0,
|
|
46
|
+
(0, import_useNativeResizeObserver.useNativeResizeObserver)(virtualListRef.current, handleResize);
|
|
47
47
|
};
|
|
48
48
|
//# sourceMappingURL=useTableResizeCb.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/configs/useTableResizeCb.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { useNativeResizeObserver } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { useNativeResizeObserver } from './useNativeResizeObserver.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\n// type for the second parameter of useNativeResizeObserver\ntype NativeResizeObserverCB = Parameters<typeof useNativeResizeObserver>[1];\n\n// type declaration for the custom hook\nexport type UseTableResizeCb = (config: {\n virtualListRef: React.RefObject<HTMLElement>;\n propsWithDefault: DSDataTableT.InternalProps;\n}) => void;\n\nexport const useTableResizeCb: UseTableResizeCb = (config) => {\n const { virtualListRef, propsWithDefault } = config;\n const { onTableResize } = propsWithDefault;\n\n const handleResize: NativeResizeObserverCB = React.useCallback(\n (entry) => {\n if (onTableResize) onTableResize(entry);\n },\n [onTableResize],\n );\n\n useNativeResizeObserver(virtualListRef.current, handleResize);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,qCAAwC;AAYjC,MAAM,mBAAqC,CAAC,WAAW;AAC5D,QAAM,EAAE,gBAAgB,iBAAiB,IAAI;AAC7C,QAAM,EAAE,cAAc,IAAI;AAE1B,QAAM,eAAuC,aAAAA,QAAM;AAAA,IACjD,CAAC,UAAU;AACT,UAAI,cAAe,eAAc,KAAK;AAAA,IACxC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,8DAAwB,eAAe,SAAS,YAAY;AAC9D;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -37,7 +37,6 @@ var import_react = require("react");
|
|
|
37
37
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
38
38
|
var import_ds_popperjs = require("@elliemae/ds-popperjs");
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
|
-
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
41
40
|
var import_constants = require("../../configs/constants.js");
|
|
42
41
|
var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
|
|
43
42
|
var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
|
|
@@ -99,7 +98,7 @@ const FilterPopover = (props) => {
|
|
|
99
98
|
onClick: handleTriggerClick,
|
|
100
99
|
onFocus: handleTriggerOnFocus,
|
|
101
100
|
onBlur: handleTriggerOnBlur,
|
|
102
|
-
innerRef: (0,
|
|
101
|
+
innerRef: (0, import_ds_system.mergeRefs)(isIconVisible && setButtonReference, innerRef),
|
|
103
102
|
tabIndex: reduxHeader?.withTabStops ? 0 : -1,
|
|
104
103
|
"aria-label": ariaLabel,
|
|
105
104
|
"aria-hidden": !isButtonFocused,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/FilterPopover/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { styled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst FilterButton = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })<{\n hide: boolean;\n}>`\n display: inline-grid;\n ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n background-color: #fff;\n`;\n\nconst ButtonTrap = ({ cb }: { cb: () => void }) => (\n <span\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n cb();\n }}\n />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;\n\n const filters = usePropsStore((state) => state.filters);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const patchHeader = useInternalStore((state) => state.patchHeader);\n\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const buttonTrapCallback = useCallback(() => {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n buttonReference?.focus();\n }, [columnId, patchHeader, buttonReference]);\n\n const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n update: null,\n });\n\n useEffect(() => {\n // When the filters change, we need to update the popper position,\n // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n void actionRef.current.update?.();\n }, [filters]);\n\n return (\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={handleMenuOnKeyDown}\n >\n <FilterButton\n hide={!isIconVisible}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n getOwnerProps={getOwnerProps}\n >\n <DSButtonV2\n buttonType=\"icon\"\n size=\"s\"\n onClick={handleTriggerClick}\n onFocus={handleTriggerOnFocus}\n onBlur={handleTriggerOnBlur}\n innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n aria-label={ariaLabel}\n aria-hidden={!isButtonFocused}\n >\n {triggerIcon}\n </DSButtonV2>\n </FilterButton>\n {buttonReference && (\n <DSPopperJS\n actionRef={actionRef}\n referenceElement={buttonReference}\n showPopover={isMenuOpen}\n closeContextMenu={handleClickOutsideMenu}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n startPlacementPreference=\"bottom-end\"\n customOffset={[5, 4]}\n withoutArrow\n withoutAnimation\n extraPopperStyles={{\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n placementOrderPreference={['bottom-end', 'top-end']}\n >\n <PopperContent getOwnerProps={getOwnerProps}>\n <ButtonTrap cb={buttonTrapCallback} />\n {menuContent}\n <ButtonTrap cb={buttonTrapCallback} />\n </PopperContent>\n </DSPopperJS>\n )}\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,10 +34,10 @@ module.exports = __toCommonJS(Toolbar_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_react = require("react");
|
|
37
|
+
var import_use_onclickoutside = __toESM(require("use-onclickoutside"));
|
|
37
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
39
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
39
40
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
40
|
-
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
41
41
|
var import_constants = require("../../configs/constants.js");
|
|
42
42
|
var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
|
|
43
43
|
var import_useStore = require("../../configs/useStore/useStore.js");
|
|
@@ -97,7 +97,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
|
|
|
97
97
|
const handleOnClick = (0, import_react.useCallback)(() => setShow((prev) => !prev), []);
|
|
98
98
|
const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
|
|
99
99
|
const stopPropagation = (0, import_react.useCallback)((e) => e.stopPropagation(), []);
|
|
100
|
-
(0,
|
|
100
|
+
(0, import_use_onclickoutside.default)(toolbarRef, handleOnClickOutside);
|
|
101
101
|
const onToolbarKeyDown = (0, import_react.useCallback)((e) => {
|
|
102
102
|
if (e.code === "Escape") {
|
|
103
103
|
setShow(false);
|
|
@@ -127,7 +127,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
|
|
|
127
127
|
buttonType: "icon",
|
|
128
128
|
className: "toolbar-trigger",
|
|
129
129
|
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
|
|
130
|
-
innerRef: (0,
|
|
130
|
+
innerRef: (0, import_ds_system.mergeRefs)(toolbarTriggerRef, cell?.ref),
|
|
131
131
|
onClick: handleOnClick,
|
|
132
132
|
tabIndex: isRowSelected === false ? -1 : 0,
|
|
133
133
|
"aria-label": "Row actions",
|
|
@@ -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 { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyGjB;AAzGN,mBAAqD;AACrD,
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { styled, css, mergeRefs } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n box-shadow:\n 0 1px 2px 0 rgba(0, 0, 0, 0.13),\n 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n isOpen: boolean;\n}>`\n display: flex;\n align-items: center;\n pointer-events: all;\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n\n ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\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: 2px;\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: DSDataTableT.Cell;\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<HTMLDivElement | null>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n const getOwnerProps = usePropsStore((store) => store.get);\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} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n <ToolbarWrapper\n onKeyDown={onToolbarKeyDown}\n onClick={stopPropagation}\n isOpen={show}\n getOwnerProps={getOwnerProps}\n >\n {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{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;ADyGjB;AAzGN,mBAAqD;AACrD,gCAA8B;AAC9B,uBAAuC;AACvC,0BAA2B;AAC3B,sBAAgC;AAChC,uBAA4B;AAE5B,oCAAkD;AAClD,sBAA8B;AAE9B,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,iBAAiB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,gCAAAA,SAAkB,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,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,4CAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,6BAAY;AAAA,YACzB,cAAU,4BAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,sDAAC,mCAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
|
|
6
|
+
"names": ["useOnClickOutside"]
|
|
7
7
|
}
|
|
@@ -37,7 +37,6 @@ var import_react = require("react");
|
|
|
37
37
|
var import_react2 = require("react");
|
|
38
38
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
|
-
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
41
40
|
var import_SortableItemContext = require("./HoC/SortableItemContext.js");
|
|
42
41
|
var import_constants = require("../configs/constants.js");
|
|
43
42
|
var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
|
|
@@ -74,7 +73,7 @@ const DragHandle = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) =>
|
|
|
74
73
|
},
|
|
75
74
|
isActive,
|
|
76
75
|
isDragOverlay,
|
|
77
|
-
innerRef: (0,
|
|
76
|
+
innerRef: (0, import_ds_system.mergeRefs)(innerRef, setActivatorNodeRef),
|
|
78
77
|
tabIndex: isReachable ? 0 : -1,
|
|
79
78
|
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_DRAG_HANDLE,
|
|
80
79
|
id: `drag-handle-btn-${id}`,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DnDHandle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { styled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../configs/useStore/useStore.js';\n\nconst StyledGripperButton = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })<{\n isActive: boolean;\n isDragOverlay?: boolean;\n isDisabled?: boolean;\n isDragging: boolean;\n}>`\n pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : '')};\n cursor: ${({ isActive, isDragOverlay, isDisabled }) => {\n if (isDisabled) return 'not-allowed';\n if (isActive || isDragOverlay) return 'grabbing';\n return 'grab';\n }};\n outline: none;\n display: flex;\n align-items: center;\n touch-action: none;\n\n svg {\n fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral['500']};\n }\n`;\n\nexport const DragHandle: React.ComponentType<{\n id: string;\n isReachable: boolean;\n isDragOverlay?: boolean;\n isDisabled?: boolean;\n innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) => {\n const { draggableProps } = useContext(SortableItemContext);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const isActive = draggableProps && !!draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;\n\n return (\n <StyledGripperButton\n role=\"button\"\n {...(draggableProps &&\n !isDisabled && {\n ...draggableProps.listeners,\n ...draggableProps.attributes,\n })}\n isActive={isActive}\n isDragOverlay={isDragOverlay}\n innerRef={mergeRefs(innerRef, setActivatorNodeRef)}\n tabIndex={isReachable ? 0 : -1}\n data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n id={`drag-handle-btn-${id}`} // the domIdAffix should already be part of the props.id...\n key={`${id}-drag-handle`}\n aria-label=\"Drag handle\"\n isDragging={isDragging}\n isDisabled={isDisabled}\n getOwnerProps={getOwnerProps}\n >\n <GripperVertical size=\"s\" />\n </StyledGripperButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AAnBF;AA7CJ,IAAAA,gBAAkC;AAClC,sBAAgC;AAChC,uBAAkC;AAClC,iCAAoC;AACpC,uBAA4B;AAC5B,oCAAkD;AAClD,sBAA8B;AAE9B,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,sBAAsB,CAAC;AAAA,oBAM7F,CAAC,EAAE,WAAW,MAAO,aAAa,SAAS,EAAG;AAAA,YACtD,CAAC,EAAE,UAAU,eAAe,WAAW,MAAM;AACrD,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,cAAe,QAAO;AACtC,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOS,CAAC,EAAE,YAAY,MAAM,MAAM,cAAc,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIzE,MAAM,aAMR,CAAC,EAAE,IAAI,aAAa,eAAe,UAAU,WAAW,MAAM;AACjE,QAAM,EAAE,eAAe,QAAI,0BAAW,8CAAmB;AACzD,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AACpD,QAAM,sBAAsB,kBAAkB,eAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,kBACH,CAAC,cAAc;AAAA,QACb,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB;AAAA,MACF;AAAA,MACA;AAAA,MACA,cAAU,4BAAU,UAAU,mBAAmB;AAAA,MACjD,UAAU,cAAc,IAAI;AAAA,MAC5B,eAAa,6BAAY;AAAA,MACzB,IAAI,mBAAmB,EAAE;AAAA,MACzB,KAAK,GAAG,EAAE;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,4CAAC,mCAAgB,MAAK,KAAI;AAAA,EAC5B;AAEJ;",
|
|
6
6
|
"names": ["import_react"]
|
|
7
7
|
}
|
|
@@ -47,6 +47,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
47
47
|
const getIsDropValid = (0, import_useStore.usePropsStore)((state) => state.getIsDropValid);
|
|
48
48
|
const flattenedData = (0, import_useStore.usePropsStore)((state) => state.flattenedData);
|
|
49
49
|
const allDataFlattened = (0, import_useStore.usePropsStore)((state) => state.allDataFlattened);
|
|
50
|
+
const setDrilldownRowId = (0, import_useStore.useInternalStore)((state) => state.setDrilldownRowId);
|
|
50
51
|
const onReorder = (0, import_react.useCallback)(
|
|
51
52
|
(_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {
|
|
52
53
|
const rootMovedData = movedData.root;
|
|
@@ -68,8 +69,9 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
68
69
|
flattenedData,
|
|
69
70
|
allDataFlattened
|
|
70
71
|
});
|
|
72
|
+
setDrilldownRowId(_active.uid.toString());
|
|
71
73
|
},
|
|
72
|
-
[allDataFlattened, flattenedData, onRowsReorder]
|
|
74
|
+
[allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId]
|
|
73
75
|
);
|
|
74
76
|
const theFlattenedItems = (0, import_react.useMemo)(
|
|
75
77
|
() => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = movedData.root;\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n },\n [allDataFlattened, flattenedData, onRowsReorder],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore, useInternalStore } from '../../configs/useStore/useStore.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = movedData.root;\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n },\n [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/parts/Row.js
CHANGED
|
@@ -35,7 +35,6 @@ module.exports = __toCommonJS(Row_exports);
|
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var import_react = require("react");
|
|
38
|
-
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
39
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
39
|
var import_SortableItemContext = require("./HoC/SortableItemContext.js");
|
|
41
40
|
var import_withDnDSortableRowContext = require("./HoC/withDnDSortableRowContext.js");
|
|
@@ -59,7 +58,7 @@ const Row = (props) => {
|
|
|
59
58
|
{
|
|
60
59
|
isDisabled: disabledRows[row.uid],
|
|
61
60
|
style: !isDragOverlay ? itemWrapperStyle : {},
|
|
62
|
-
innerRef: (0,
|
|
61
|
+
innerRef: (0, import_ds_system.mergeRefs)(measureRef, draggableRef),
|
|
63
62
|
getOwnerProps,
|
|
64
63
|
getOwnerPropsArguments,
|
|
65
64
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Row.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext.js';\nimport { RowVariantMapItem } from './RowVariants/index.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\n\nconst StyledRow = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.ROW })<{ isDisabled: boolean }>`\n cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row: React.ComponentType<{\n row: DSDataTableT.InternalRow;\n measureRef?: (el: HTMLElement | null) => void;\n itemWrapperStyle?: React.CSSProperties;\n isDragOverlay: boolean;\n}> = (props) => {\n const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(() => row, [row]);\n const focusedRowId = useInternalStore((state) => state.focusedRowId);\n const drilldownRowId = useInternalStore((state) => state.drilldownRowId);\n\n const { draggableProps } = useContext(SortableItemContext);\n const draggableRef = draggableProps && draggableProps.setNodeRef;\n return (\n <StyledRow\n isDisabled={disabledRows[row.uid]}\n style={!isDragOverlay ? itemWrapperStyle : {}}\n innerRef={mergeRefs(measureRef, draggableRef)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <RowVariantMapItem\n row={row}\n itemIndex={row.realIndex}\n isDragOverlay={isDragOverlay}\n focusedRowId={focusedRowId}\n drilldownRowId={drilldownRowId}\n />\n </StyledRow>\n );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCjB;AApCN,mBAA+C;AAC/C,uBAAkC;AAClC,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAElC,sBAAgD;AAChD,oCAAkD;AAElD,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,IAAI,CAAC;AAAA,YACzE,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB,QAAS;AAAA;AAGhE,MAAM,MAKR,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AAC3D,QAAM,mBAAe,kCAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,qBAAiB,kCAAiB,CAAC,UAAU,MAAM,cAAc;AAEvE,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI,GAAG;AAAA,MAChC,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,cAAU,4BAAU,YAAY,YAAY;AAAA,MAC5C;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,qBAAiB,4DAA0B,GAAG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -36,8 +36,9 @@ module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_uid = require("uid");
|
|
38
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
|
-
var import_constants = require("./configs/constants.js");
|
|
40
39
|
var import_exported_related = require("./exported-related/index.js");
|
|
40
|
+
var import_constants = require("./configs/constants.js");
|
|
41
|
+
var import_DSDataTableDefinitions = require("./DSDataTableDefinitions.js");
|
|
41
42
|
const defaultProps = () => ({
|
|
42
43
|
height: "100%",
|
|
43
44
|
width: "100%",
|
|
@@ -78,6 +79,7 @@ const defaultProps = () => ({
|
|
|
78
79
|
domIdAffix: (0, import_uid.uid)(4)
|
|
79
80
|
});
|
|
80
81
|
const DSDataTablePropTypes = {
|
|
82
|
+
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_DSDataTableDefinitions.DSDataTableName, import_DSDataTableDefinitions.DSDataTableSlots),
|
|
81
83
|
columns: import_ds_props_helpers.PropTypes.arrayOf(
|
|
82
84
|
import_ds_props_helpers.PropTypes.shape({
|
|
83
85
|
Header: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.node]).description(
|
|
@@ -240,7 +242,8 @@ const DSDataTablePropTypes = {
|
|
|
240
242
|
onNoResultsButtonClick: import_ds_props_helpers.PropTypes.func.description("Function invoked when the no results button is clicked").defaultValue(() => null),
|
|
241
243
|
isSkeleton: import_ds_props_helpers.PropTypes.bool.description("Whether to show a skeleton loader in the datatable"),
|
|
242
244
|
getAriaLabelForRow: import_ds_props_helpers.PropTypes.func.description("Function invoked to determine a row aria-label"),
|
|
243
|
-
domIdAffix: import_ds_props_helpers.PropTypes.string.description("Affix to avoid duplicate ids").defaultValue("4 randomly generated characters")
|
|
245
|
+
domIdAffix: import_ds_props_helpers.PropTypes.string.description("Affix to avoid duplicate ids").defaultValue("4 randomly generated characters"),
|
|
246
|
+
checkboxSelectAllProps: import_ds_props_helpers.PropTypes.object.description("Props for the select all checkbox")
|
|
244
247
|
};
|
|
245
248
|
const DSDataTablePropTypesSchema = DSDataTablePropTypes;
|
|
246
249
|
//# sourceMappingURL=react-desc-prop-types.js.map
|