@elliemae/ds-data-table 3.37.0-rc.4 → 3.37.0-rc.5
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/Row.js +1 -2
- package/dist/cjs/parts/Row.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/Row.js +1 -2
- package/dist/esm/parts/Row.js.map +2 -2
- package/dist/types/configs/useNativeResizeObserver.d.ts +4 -0
- 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
|
}
|
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
|
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useEffect, useMemo } from "react";
|
|
3
|
+
const useNativeResizeObserver = (el, callback) => {
|
|
4
|
+
const resizeObserver = useMemo(
|
|
5
|
+
() => new ResizeObserver((entries) => {
|
|
6
|
+
const entry = entries[0];
|
|
7
|
+
const contentRect = entry.contentRect;
|
|
8
|
+
const target = entry.target;
|
|
9
|
+
callback({ contentRect, target });
|
|
10
|
+
}),
|
|
11
|
+
[callback]
|
|
12
|
+
);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
if (el) resizeObserver.observe(el);
|
|
15
|
+
return () => resizeObserver.disconnect();
|
|
16
|
+
}, [el, resizeObserver]);
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
useNativeResizeObserver
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=useNativeResizeObserver.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useNativeResizeObserver.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,eAAe;AAO5B,MAAM,0BAA0B,CACrC,IACA,aACG;AACH,QAAM,iBAAiB;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,YAAU,MAAM;AACd,QAAI,GAAI,gBAAe,QAAQ,EAAE;AACjC,WAAO,MAAM,eAAe,WAAW;AAAA,EACzC,GAAG,CAAC,IAAI,cAAc,CAAC;AACzB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
|
-
import { useNativeResizeObserver } from "
|
|
3
|
+
import { useNativeResizeObserver } from "./useNativeResizeObserver.js";
|
|
4
4
|
const useTableResizeCb = (config) => {
|
|
5
5
|
const { virtualListRef, propsWithDefault } = config;
|
|
6
6
|
const { onTableResize } = propsWithDefault;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useTableResizeCb.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useNativeResizeObserver } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,+BAA+B;AAYjC,MAAM,mBAAqC,CAAC,WAAW;AAC5D,QAAM,EAAE,gBAAgB,iBAAiB,IAAI;AAC7C,QAAM,EAAE,cAAc,IAAI;AAE1B,QAAM,eAAuCA,OAAM;AAAA,IACjD,CAAC,UAAU;AACT,UAAI,cAAe,eAAc,KAAK;AAAA,IACxC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,0BAAwB,eAAe,SAAS,YAAY;AAC9D;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -3,8 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
4
4
|
import { DSButtonV2 } from "@elliemae/ds-button-v2";
|
|
5
5
|
import { DSPopperJS } from "@elliemae/ds-popperjs";
|
|
6
|
-
import { styled } from "@elliemae/ds-system";
|
|
7
|
-
import { mergeRefs } from "@elliemae/ds-utilities";
|
|
6
|
+
import { styled, mergeRefs } from "@elliemae/ds-system";
|
|
8
7
|
import { DATA_TESTID } from "../../configs/constants.js";
|
|
9
8
|
import { useGetFilterVisibility } from "./useGetFilterVisibility.js";
|
|
10
9
|
import { useGetFilterHandlers } from "./useGetFilterHandlers.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback, useRef, useState } from "react";
|
|
4
|
-
import
|
|
4
|
+
import useOnClickOutside from "use-onclickoutside";
|
|
5
|
+
import { styled, css, mergeRefs } from "@elliemae/ds-system";
|
|
5
6
|
import { DSButtonV3 } from "@elliemae/ds-button-v2";
|
|
6
7
|
import { MoreOptionsVert } from "@elliemae/ds-icons";
|
|
7
|
-
import { useOnClickOutside, mergeRefs } from "@elliemae/ds-utilities";
|
|
8
8
|
import { DATA_TESTID } from "../../configs/constants.js";
|
|
9
9
|
import { DSDataTableName, DSDataTableSlots } from "../../DSDataTableDefinitions.js";
|
|
10
10
|
import { usePropsStore } from "../../configs/useStore/useStore.js";
|
|
@@ -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 { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACyGjB,SAMW,KANX;AAzGN,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,QAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyGjB,SAMW,KANX;AAzGN,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,OAAO,uBAAuB;AAC9B,SAAS,QAAQ,KAAK,iBAAiB;AACvC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,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,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,oBAAoB,OAAiC,IAAI;AAE/D,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,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,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,oBAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,YAAY;AAAA,YACzB,UAAU,UAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -3,8 +3,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { createElement } from "react";
|
|
4
4
|
import { useContext } from "react";
|
|
5
5
|
import { GripperVertical } from "@elliemae/ds-icons";
|
|
6
|
-
import { styled } from "@elliemae/ds-system";
|
|
7
|
-
import { mergeRefs } from "@elliemae/ds-utilities";
|
|
6
|
+
import { styled, mergeRefs } from "@elliemae/ds-system";
|
|
8
7
|
import { SortableItemContext } from "./HoC/SortableItemContext.js";
|
|
9
8
|
import { DATA_TESTID } from "../configs/constants.js";
|
|
10
9
|
import { DSDataTableName, DSDataTableSlots } from "../DSDataTableDefinitions.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DnDHandle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { styled
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgEjB;AAnBF;AA7CJ,SAAgB,kBAAkB;AAClC,SAAS,uBAAuB;AAChC,SAAS,QAAQ,iBAAiB;AAClC,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB,wBAAwB;AAClD,SAAS,qBAAqB;AAE9B,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,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,IAAI,WAAW,mBAAmB;AACzD,QAAM,gBAAgB,cAAc,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,UAAU,UAAU,UAAU,mBAAmB;AAAA,MACjD,UAAU,cAAc,IAAI;AAAA,MAC5B,eAAa,YAAY;AAAA,MACzB,IAAI,mBAAmB,EAAE;AAAA,MACzB,KAAK,GAAG,EAAE;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,oBAAC,mBAAgB,MAAK,KAAI;AAAA,EAC5B;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Row.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useCallback, useContext } from "react";
|
|
4
|
-
import { mergeRefs } from "@elliemae/ds-
|
|
5
|
-
import { styled } from "@elliemae/ds-system";
|
|
4
|
+
import { styled, mergeRefs } from "@elliemae/ds-system";
|
|
6
5
|
import { SortableItemContext } from "./HoC/SortableItemContext.js";
|
|
7
6
|
import { withDnDSortableRowContext } from "./HoC/withDnDSortableRowContext.js";
|
|
8
7
|
import { RowVariantMapItem } from "./RowVariants/index.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Row.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoCjB;AApCN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,QAAQ,iBAAiB;AAClC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAElC,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,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,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AAC3D,QAAM,eAAe,iBAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AAEvE,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;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,UAAU,UAAU,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,iBAAiB,0BAA0B,GAAG;",
|
|
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.37.0-rc.
|
|
3
|
+
"version": "3.37.0-rc.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -38,39 +38,39 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"react-virtual": "~2.10.4",
|
|
40
40
|
"uid": "~2.0.1",
|
|
41
|
-
"
|
|
42
|
-
"@elliemae/ds-circular-progress-indicator": "3.37.0-rc.
|
|
43
|
-
"@elliemae/ds-
|
|
44
|
-
"@elliemae/ds-
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-form-helpers-mask-hooks": "3.37.0-rc.
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-button": "3.37.0-rc.
|
|
51
|
-
"@elliemae/ds-grid": "3.37.0-rc.
|
|
52
|
-
"@elliemae/ds-icons": "3.37.0-rc.
|
|
53
|
-
"@elliemae/ds-
|
|
54
|
-
"@elliemae/ds-
|
|
55
|
-
"@elliemae/ds-
|
|
56
|
-
"@elliemae/ds-
|
|
57
|
-
"@elliemae/ds-
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"@elliemae/ds-typescript-helpers": "3.37.0-rc.
|
|
61
|
-
"@elliemae/ds-
|
|
62
|
-
"@elliemae/ds-
|
|
63
|
-
"@elliemae/ds-form-
|
|
64
|
-
"@elliemae/ds-
|
|
65
|
-
"@elliemae/ds-
|
|
66
|
-
"@elliemae/ds-skeleton": "3.37.0-rc.
|
|
41
|
+
"use-onclickoutside": "0.4.1",
|
|
42
|
+
"@elliemae/ds-circular-progress-indicator": "3.37.0-rc.5",
|
|
43
|
+
"@elliemae/ds-button-v2": "3.37.0-rc.5",
|
|
44
|
+
"@elliemae/ds-dropdownmenu": "3.37.0-rc.5",
|
|
45
|
+
"@elliemae/ds-form-checkbox": "3.37.0-rc.5",
|
|
46
|
+
"@elliemae/ds-form-combobox": "3.37.0-rc.5",
|
|
47
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.37.0-rc.5",
|
|
48
|
+
"@elliemae/ds-dropdownmenu-v2": "3.37.0-rc.5",
|
|
49
|
+
"@elliemae/ds-form-date-range-picker": "3.37.0-rc.5",
|
|
50
|
+
"@elliemae/ds-button": "3.37.0-rc.5",
|
|
51
|
+
"@elliemae/ds-grid": "3.37.0-rc.5",
|
|
52
|
+
"@elliemae/ds-icons": "3.37.0-rc.5",
|
|
53
|
+
"@elliemae/ds-pills-v2": "3.37.0-rc.5",
|
|
54
|
+
"@elliemae/ds-popperjs": "3.37.0-rc.5",
|
|
55
|
+
"@elliemae/ds-props-helpers": "3.37.0-rc.5",
|
|
56
|
+
"@elliemae/ds-pagination": "3.37.0-rc.5",
|
|
57
|
+
"@elliemae/ds-system": "3.37.0-rc.5",
|
|
58
|
+
"@elliemae/ds-truncated-tooltip-text": "3.37.0-rc.5",
|
|
59
|
+
"@elliemae/ds-drag-and-drop": "3.37.0-rc.5",
|
|
60
|
+
"@elliemae/ds-typescript-helpers": "3.37.0-rc.5",
|
|
61
|
+
"@elliemae/ds-form-layout-blocks": "3.37.0-rc.5",
|
|
62
|
+
"@elliemae/ds-form-date-time-picker": "3.37.0-rc.5",
|
|
63
|
+
"@elliemae/ds-form-input-text": "3.37.0-rc.5",
|
|
64
|
+
"@elliemae/ds-form-radio": "3.37.0-rc.5",
|
|
65
|
+
"@elliemae/ds-zustand-helpers": "3.37.0-rc.5",
|
|
66
|
+
"@elliemae/ds-skeleton": "3.37.0-rc.5"
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
70
70
|
"styled-components": "~5.3.9",
|
|
71
71
|
"styled-system": "~5.1.5",
|
|
72
|
-
"@elliemae/ds-monorepo-devops": "3.37.0-rc.
|
|
73
|
-
"@elliemae/ds-toolbar-v2": "3.37.0-rc.
|
|
72
|
+
"@elliemae/ds-monorepo-devops": "3.37.0-rc.5",
|
|
73
|
+
"@elliemae/ds-toolbar-v2": "3.37.0-rc.5"
|
|
74
74
|
},
|
|
75
75
|
"peerDependencies": {
|
|
76
76
|
"lodash": "^4.17.21",
|