@elliemae/ds-data-table 3.61.5-rc.1 → 3.70.0-next.10
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/TruncatedTooltipText.js +96 -0
- package/dist/cjs/TruncatedTooltipText.js.map +7 -0
- package/dist/cjs/exported-related/EditableCell.js +1 -1
- package/dist/cjs/exported-related/EditableCell.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js +1 -5
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/index.js +31 -32
- package/dist/cjs/exported-related/FilterPopover/index.js.map +3 -3
- package/dist/cjs/package.json +4 -1
- package/dist/cjs/parts/Cells/Cell.js +2 -2
- package/dist/cjs/parts/Cells/Cell.js.map +2 -2
- package/dist/cjs/parts/Cells/CellFactory.js +2 -2
- package/dist/cjs/parts/Cells/CellFactory.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCellTitle.js +2 -2
- package/dist/cjs/parts/Headers/HeaderCellTitle.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/esm/TruncatedTooltipText.js +70 -0
- package/dist/esm/TruncatedTooltipText.js.map +7 -0
- package/dist/esm/exported-related/EditableCell.js +1 -1
- package/dist/esm/exported-related/EditableCell.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js +2 -6
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/index.js +31 -32
- package/dist/esm/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/esm/package.json +4 -1
- package/dist/esm/parts/Cells/Cell.js +2 -2
- package/dist/esm/parts/Cells/Cell.js.map +2 -2
- package/dist/esm/parts/Cells/CellFactory.js +2 -2
- package/dist/esm/parts/Cells/CellFactory.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCellTitle.js +2 -2
- package/dist/esm/parts/Headers/HeaderCellTitle.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +2 -2
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/types/TruncatedTooltipText.d.ts +9 -0
- package/dist/types/tests/DSDataTable.get-owner-props-arguments-slots.test.d.ts +1 -0
- package/dist/types/tests/callbacks/editableCell.events.test.d.ts +1 -0
- package/dist/types/tests/playwright/DSDataTable.slot-contracts-dynamic.test.playwright.d.ts +1 -0
- package/dist/types/tests/playwright/DSDataTableDropIndicatorTestRenderer.d.ts +1 -0
- package/dist/types/tests/render/cellStyle.test.d.ts +1 -0
- package/package.json +32 -33
- package/skills/ds-data-table-boundaries/SKILL.md +363 -0
- package/skills/ds-data-table-columns/SKILL.md +273 -0
- package/skills/ds-data-table-expandable/SKILL.md +235 -0
- package/skills/ds-data-table-feedback/SKILL.md +190 -0
- package/skills/ds-data-table-filtering/SKILL.md +322 -0
- package/skills/ds-data-table-health-check/SKILL.md +172 -0
- package/skills/ds-data-table-migration/SKILL.md +201 -0
- package/skills/ds-data-table-pagination/SKILL.md +182 -0
- package/skills/ds-data-table-row-variants/SKILL.md +260 -0
- package/skills/ds-data-table-selection/SKILL.md +449 -0
- package/skills/ds-data-table-setup/SKILL.md +229 -0
- package/skills/ds-data-table-slots/SKILL.md +257 -0
|
@@ -0,0 +1,96 @@
|
|
|
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 TruncatedTooltipText_exports = {};
|
|
30
|
+
__export(TruncatedTooltipText_exports, {
|
|
31
|
+
TruncatedTooltipText: () => TruncatedTooltipText,
|
|
32
|
+
default: () => TruncatedTooltipText_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(TruncatedTooltipText_exports);
|
|
35
|
+
var React = __toESM(require("react"));
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
+
var import_react = require("react");
|
|
38
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
+
var import_ds_floating_context = require("@elliemae/ds-floating-context");
|
|
40
|
+
const TruncatedSpan = import_ds_system.styled.span`
|
|
41
|
+
text-overflow: ellipsis;
|
|
42
|
+
white-space: nowrap;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
display: inline-block;
|
|
45
|
+
max-width: 100%;
|
|
46
|
+
`;
|
|
47
|
+
const TooltipContainer = import_ds_system.styled.div`
|
|
48
|
+
text-align: center;
|
|
49
|
+
min-width: ${({ theme }) => theme.space.l};
|
|
50
|
+
max-width: 250px;
|
|
51
|
+
overflow-wrap: break-word;
|
|
52
|
+
word-break: break-word;
|
|
53
|
+
min-height: 30px;
|
|
54
|
+
display: grid;
|
|
55
|
+
align-items: center;
|
|
56
|
+
padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
|
|
57
|
+
position: relative;
|
|
58
|
+
background-color: white;
|
|
59
|
+
border-radius: 2px;
|
|
60
|
+
font-size: 13px;
|
|
61
|
+
color: ${({ theme }) => theme.colors.neutral[600]};
|
|
62
|
+
pointer-events: none;
|
|
63
|
+
`;
|
|
64
|
+
const TruncatedTooltipText = ({ value = "", placement = "top" }) => {
|
|
65
|
+
const [showTooltip, setShowTooltip] = (0, import_react.useState)(false);
|
|
66
|
+
const { refs, floatingStyles, arrowStyles, context } = (0, import_ds_floating_context.useFloatingContext)({
|
|
67
|
+
placement,
|
|
68
|
+
externallyControlledIsOpen: showTooltip,
|
|
69
|
+
withoutAnimation: true
|
|
70
|
+
});
|
|
71
|
+
const handleMouseEnter = (0, import_react.useCallback)((e) => {
|
|
72
|
+
const el = e.currentTarget;
|
|
73
|
+
setShowTooltip(el.offsetWidth < el.scrollWidth);
|
|
74
|
+
}, []);
|
|
75
|
+
const handleMouseLeave = (0, import_react.useCallback)(() => {
|
|
76
|
+
setShowTooltip(false);
|
|
77
|
+
}, []);
|
|
78
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
79
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncatedSpan, { innerRef: refs.setReference, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: value }),
|
|
80
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
import_ds_floating_context.FloatingWrapper,
|
|
82
|
+
{
|
|
83
|
+
innerRef: refs.setFloating,
|
|
84
|
+
isOpen: showTooltip,
|
|
85
|
+
floatingStyles,
|
|
86
|
+
context,
|
|
87
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipContainer, { children: [
|
|
88
|
+
value,
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
|
|
90
|
+
] })
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
] });
|
|
94
|
+
};
|
|
95
|
+
var TruncatedTooltipText_default = TruncatedTooltipText;
|
|
96
|
+
//# sourceMappingURL=TruncatedTooltipText.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/TruncatedTooltipText.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport {\n useFloatingContext,\n FloatingWrapper,\n PopoverArrow,\n type DSHookFloatingContextT,\n} from '@elliemae/ds-floating-context';\n\nconst TruncatedSpan = styled.span`\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n display: inline-block;\n max-width: 100%;\n`;\n\n// Matches DSTooltipV3's StyledTooltipContainer styles for visual consistency\nconst TooltipContainer = styled.div`\n text-align: center;\n min-width: ${({ theme }) => theme.space.l};\n max-width: 250px;\n overflow-wrap: break-word;\n word-break: break-word;\n min-height: 30px;\n display: grid;\n align-items: center;\n padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};\n position: relative;\n background-color: white;\n border-radius: 2px;\n font-size: 13px;\n color: ${({ theme }) => theme.colors.neutral[600]};\n pointer-events: none;\n`;\n\ninterface TruncatedTooltipTextProps {\n // Accepts ReactNode so JSX cell renderers can be passed as value\n value?: React.ReactNode;\n placement?: DSHookFloatingContextT.PopperPlacementsT;\n}\n\nconst TruncatedTooltipText = ({ value = '', placement = 'top' }: TruncatedTooltipTextProps) => {\n const [showTooltip, setShowTooltip] = useState(false);\n\n const { refs, floatingStyles, arrowStyles, context } = useFloatingContext({\n placement,\n externallyControlledIsOpen: showTooltip,\n withoutAnimation: true,\n });\n\n const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLSpanElement>) => {\n const el = e.currentTarget;\n setShowTooltip(el.offsetWidth < el.scrollWidth);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setShowTooltip(false);\n }, []);\n\n return (\n <>\n <TruncatedSpan innerRef={refs.setReference} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n {value}\n </TruncatedSpan>\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={showTooltip}\n floatingStyles={floatingStyles}\n context={context}\n >\n <TooltipContainer>\n {value}\n <PopoverArrow {...arrowStyles} />\n </TooltipContainer>\n </FloatingWrapper>\n </>\n );\n};\n\nexport { TruncatedTooltipText };\nexport default TruncatedTooltipText;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DnB;AA7DJ,mBAA6C;AAC7C,uBAAuB;AACvB,iCAKO;AAEP,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,mBAAmB,wBAAO;AAAA;AAAA,eAEjB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAO9B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,IAAI,MAAM,MAAM,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAUnD,MAAM,uBAAuB,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAM,MAAiC;AAC7F,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,EAAE,MAAM,gBAAgB,aAAa,QAAQ,QAAI,+CAAmB;AAAA,IACxE;AAAA,IACA,4BAA4B;AAAA,IAC5B,kBAAkB;AAAA,EACpB,CAAC;AAED,QAAM,uBAAmB,0BAAY,CAAC,MAAyC;AAC7E,UAAM,KAAK,EAAE;AACb,mBAAe,GAAG,cAAc,GAAG,WAAW;AAAA,EAChD,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,iBAAc,UAAU,KAAK,cAAc,cAAc,kBAAkB,cAAc,kBACvF,iBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QAEA,uDAAC,oBACE;AAAA;AAAA,UACD,4CAAC,2CAAc,GAAG,aAAa;AAAA,WACjC;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAGA,IAAO,+BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/EditableCell.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useLayoutEffect, useState } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { StyledEditableContainer, StyledPencilIcon } from '../styled.js';\n\nexport const EditableCell: React.ComponentType<{\n StandardRender: JSX.Element;\n EditableRenderer: JSX.Element;\n cell: DSDataTableT.Cell<HTMLDivElement>;\n isRowSelected?: boolean;\n}> = (props) => {\n const { StandardRender, EditableRenderer, cell, isRowSelected } = props;\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const virtualListHelpers = usePropsStore((state) => state.virtualListHelpers);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n const [isEditing, setIsEditing] = useState(false);\n const [lastIsEditing, setLastIsEditing] = useState(false);\n // When an editable cell is switched on-off, we recalculate the height of the rows\n useLayoutEffect(() => {\n if (isEditing !== lastIsEditing) {\n virtualListHelpers.measure();\n setLastIsEditing(isEditing);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isEditing]);\n\n const handleCellClick = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (!isEditing) {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EF;AA7ErB,mBAA8D;AAC9D,2CAA8B;AAE9B,oBAA0D;AAEnD,MAAM,eAKR,CAAC,UAAU;AACd,QAAM,EAAE,gBAAgB,kBAAkB,MAAM,cAAc,IAAI;AAClE,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,oCAAgB,MAAM;AACpB,QAAI,cAAc,eAAe;AAC/B,yBAAmB,QAAQ;AAC3B,uBAAiB,SAAS;AAAA,IAC5B;AAAA,EAEF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA8C;AAC7C,UAAI,CAAC,WAAW;AACd,
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useLayoutEffect, useState } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { StyledEditableContainer, StyledPencilIcon } from '../styled.js';\n\nexport const EditableCell: React.ComponentType<{\n StandardRender: JSX.Element;\n EditableRenderer: JSX.Element;\n cell: DSDataTableT.Cell<HTMLDivElement>;\n isRowSelected?: boolean;\n}> = (props) => {\n const { StandardRender, EditableRenderer, cell, isRowSelected } = props;\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const virtualListHelpers = usePropsStore((state) => state.virtualListHelpers);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n const [isEditing, setIsEditing] = useState(false);\n const [lastIsEditing, setLastIsEditing] = useState(false);\n // When an editable cell is switched on-off, we recalculate the height of the rows\n useLayoutEffect(() => {\n if (isEditing !== lastIsEditing) {\n virtualListHelpers.measure();\n setLastIsEditing(isEditing);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isEditing]);\n\n const handleCellClick = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n e.stopPropagation();\n if (!isEditing) {\n setIsEditing(true);\n }\n },\n [isEditing],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (isEditing) {\n e.stopPropagation();\n if (['Enter', 'Escape'].includes(e.code)) {\n setIsEditing(false);\n }\n } else if (['Enter', 'Space'].includes(e.code)) {\n handleCellClick(e);\n }\n },\n [isEditing, handleCellClick, setIsEditing],\n );\n\n const handleOnBlur = useCallback(\n (event: React.FocusEvent) => {\n if (isEditing && !event.currentTarget?.contains(event.relatedTarget)) {\n // Not triggered when swapping focus between children\n setIsEditing(false);\n }\n },\n [isEditing],\n );\n const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];\n return (\n <StyledEditableContainer\n cols={cols}\n tabIndex={isRowSelected && !isEditing ? 0 : -1}\n innerRef={cell.ref}\n onClick={handleCellClick}\n onKeyDown={handleOnKeyDown}\n onBlur={handleOnBlur}\n shouldDisplayEditIcon={cell.column.alwaysDisplayEditIcon}\n role=\"group\"\n aria-labelledby={isEditing ? undefined : cell.id}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {!isEditing ? StandardRender : EditableRenderer}\n {!isEditing && <StyledPencilIcon />}\n <span id={`editable-cell-${cell.id}-${domIdAffix}`} style={{ display: 'none' }} aria-hidden=\"true\">\n {cell.value as string}, editable cell. To edit the content's of this cell, press the Enter key\n </span>\n </StyledEditableContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EF;AA7ErB,mBAA8D;AAC9D,2CAA8B;AAE9B,oBAA0D;AAEnD,MAAM,eAKR,CAAC,UAAU;AACd,QAAM,EAAE,gBAAgB,kBAAkB,MAAM,cAAc,IAAI;AAClE,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,oCAAgB,MAAM;AACpB,QAAI,cAAc,eAAe;AAC/B,yBAAmB,QAAQ;AAC3B,uBAAiB,SAAS;AAAA,IAC5B;AAAA,EAEF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA8C;AAC7C,QAAE,gBAAgB;AAClB,UAAI,CAAC,WAAW;AACd,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,WAAW;AACb,UAAE,gBAAgB;AAClB,YAAI,CAAC,SAAS,QAAQ,EAAE,SAAS,EAAE,IAAI,GAAG;AACxC,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,wBAAgB,CAAC;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,iBAAiB,YAAY;AAAA,EAC3C;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,aAAa,CAAC,MAAM,eAAe,SAAS,MAAM,aAAa,GAAG;AAEpE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,OAAO,CAAC,YAAY,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,iBAAiB,CAAC,YAAY,IAAI;AAAA,MAC5C,UAAU,KAAK;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,uBAAuB,KAAK,OAAO;AAAA,MACnC,MAAK;AAAA,MACL,mBAAiB,YAAY,SAAY,KAAK;AAAA,MAC9C;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,YAAY,iBAAiB;AAAA,QAC9B,CAAC,aAAa,4CAAC,kCAAiB;AAAA,QACjC,6CAAC,UAAK,IAAI,iBAAiB,KAAK,EAAE,IAAI,UAAU,IAAI,OAAO,EAAE,SAAS,OAAO,GAAG,eAAY,QACzF;AAAA,eAAK;AAAA,UAAgB;AAAA,WACxB;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -78,6 +78,7 @@ const FilterPopoverV2 = (props) => {
|
|
|
78
78
|
context
|
|
79
79
|
} = (0, import_ds_floating_context.useFloatingContext)({
|
|
80
80
|
externallyControlledIsOpen: isMenuOpen,
|
|
81
|
+
externalReferenceElement: columnReference,
|
|
81
82
|
placement: "bottom-end",
|
|
82
83
|
withoutAnimation: true,
|
|
83
84
|
customOffset: [0, 0]
|
|
@@ -87,11 +88,6 @@ const FilterPopoverV2 = (props) => {
|
|
|
87
88
|
firstElementRef,
|
|
88
89
|
lastElementRef
|
|
89
90
|
});
|
|
90
|
-
(0, import_react.useEffect)(() => {
|
|
91
|
-
if (columnReference) {
|
|
92
|
-
refs.setReference(columnReference);
|
|
93
|
-
}
|
|
94
|
-
}, [columnReference, refs]);
|
|
95
91
|
return (
|
|
96
92
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
97
93
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/FilterPopover/FilterPopoverV2.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { useOnClickOutside } from './useOnClickOutside.js';\nimport { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopoverV2: React.ComponentType<FilterPopoverV2Props> = (props: FilterPopoverV2Props) => {\n const {\n column,\n customStyles,\n reduxHeader,\n menuContent,\n ariaLabel,\n triggerIcon,\n innerRef,\n columnReference,\n firstElementRef,\n onFilterSubmit,\n onFilterReset,\n } = props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n }),\n [column.id],\n );\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const lastElementRef = useRef<HTMLButtonElement>(null);\n const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n const {\n floatingStyles,\n isOpen: isFloatingOpen,\n refs,\n context,\n } = useFloatingContext({\n externallyControlledIsOpen: isMenuOpen,\n externalReferenceElement: columnReference,\n placement: 'bottom-end',\n withoutAnimation: true,\n customOffset: [0, 0],\n });\n\n useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);\n const handleOnKeyDown = useFocusTrap({\n firstElementRef,\n lastElementRef,\n });\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\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_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON}\n getOwnerProps={getOwnerProps}\n >\n <DSButtonV3\n buttonType=\"icon\"\n size=\"s\"\n onClick={handleTriggerClick}\n onKeyDown={handleMenuOnKeyDown}\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 data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n >\n {triggerIcon}\n </DSButtonV3>\n </FilterButton>\n {refs.reference && (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n ...customStyles,\n minWidth: 'min-content',\n }}\n context={context}\n data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n aria-label={`Filter by ${column.Header as string}`}\n role=\"dialog\"\n >\n <PopperContent getOwnerProps={getOwnerProps} onKeyDown={handleOnKeyDown} innerRef={boundaryRef}>\n <form onSubmit={onFilterSubmit}>\n {menuContent}\n <StyledDSDialogFooter>\n <DSButtonV3 onClick={onFilterReset} buttonType=\"outline\" size=\"s\">\n Reset\n </DSButtonV3>\n <DSButtonV3 type=\"submit\" innerRef={lastElementRef} size=\"s\">\n Apply\n </DSButtonV3>\n </StyledDSDialogFooter>\n </form>\n </PopperContent>\n </StyledFloatingWrapper>\n )}\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkFf;AAlFR,0BAA2B;AAE3B,iCAAmC;AACnC,iCAA6B;AAE7B,uBAA0B;AAC1B,mBAAqD;AAErD,2CAA8B;AAC9B,uBAAuC;AAEvC,kCAAqC;AACrC,oCAAuC;AACvC,+BAAkC;AAClC,oBAAyF;AAElF,MAAM,kBAA6D,CAAC,UAAgC;AACzG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,OAAO,EAAE;AAAA,EACZ;AAEA,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAmC,IAAI;AAErF,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAS,KAAK;AAC5D,QAAM,EAAE,eAAe,WAAW,QAAI,sDAAuB,WAAW;AAExE,QAAM,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB,QACjH,kDAAqB,OAAO,YAAY,iBAAiB,kBAAkB;AAE7E,QAAM,qBAAiB,qBAA0B,IAAI;AACrD,QAAM,kBAAc,qBAA8B,IAAI;AAEtD,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,QAAI,+CAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,0BAA0B;AAAA,IAC1B,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,kDAAkB,aAAa,KAAK,WAAW,MAAM,sBAAsB;AAC3E,QAAM,sBAAkB,yCAAa;AAAA,IACnC;AAAA,IACA;AAAA,EACF,CAAC;AAED;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QAEC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,WAAW;AAAA,QAEX;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,CAAC;AAAA,cACP,eAAa,wCAAuB;AAAA,cACpC;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,YAAW;AAAA,kBACX,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,cAAU,4BAAU,iBAAiB,oBAAoB,QAAQ;AAAA,kBACjE,UAAU,aAAa,eAAe,IAAI;AAAA,kBAC1C,cAAY;AAAA,kBACZ,eAAa,CAAC;AAAA,kBACd,eAAa,wCAAuB;AAAA,kBAEnC;AAAA;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UACC,KAAK,aACJ;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,KAAK;AAAA,cACf,QAAQ;AAAA,cACR,gBAAgB;AAAA,gBACd,GAAG;AAAA,gBACH,GAAG;AAAA,gBACH,UAAU;AAAA,cACZ;AAAA,cACA;AAAA,cACA,eAAa,wCAAuB;AAAA,cACpC;AAAA,cACA;AAAA,cACA,cAAY,aAAa,OAAO,MAAgB;AAAA,cAChD,MAAK;AAAA,cAEL,sDAAC,+BAAc,eAA8B,WAAW,iBAAiB,UAAU,aACjF,uDAAC,UAAK,UAAU,gBACb;AAAA;AAAA,gBACD,6CAAC,sCACC;AAAA,8DAAC,kCAAW,SAAS,eAAe,YAAW,WAAU,MAAK,KAAI,mBAElE;AAAA,kBACA,4CAAC,kCAAW,MAAK,UAAS,UAAU,gBAAgB,MAAK,KAAI,mBAE7D;AAAA,mBACF;AAAA,iBACF,GACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,25 +35,15 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
37
37
|
var import_ds_hooks_focus_trap = require("@elliemae/ds-hooks-focus-trap");
|
|
38
|
-
var
|
|
38
|
+
var import_ds_floating_context = require("@elliemae/ds-floating-context");
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
40
|
var import_react = require("react");
|
|
41
41
|
var import_constants = require("../../configs/constants.js");
|
|
42
42
|
var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
|
|
43
|
-
var import_constants2 = require("../../constants/index.js");
|
|
44
43
|
var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
|
|
45
44
|
var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
${(props) => props.hide ? "opacity: 0; display: none; width: 0;" : ""}
|
|
49
|
-
`;
|
|
50
|
-
const PopperContent = (0, import_ds_system.styled)("div", { name: import_constants2.DSDataTableName, slot: import_constants2.DSDataTableSlots.FILTER_POPOVER_CONTENT })`
|
|
51
|
-
background-color: #fff;
|
|
52
|
-
`;
|
|
53
|
-
const StyledPoppoverJS = (0, import_ds_system.styled)(import_ds_popperjs.DSPopperJS, {
|
|
54
|
-
name: import_constants2.DSDataTableName,
|
|
55
|
-
slot: import_constants2.DSDataTableSlots.FILTER_POPOVER
|
|
56
|
-
})``;
|
|
45
|
+
var import_useOnClickOutside = require("./useOnClickOutside.js");
|
|
46
|
+
var import_styled = require("./styled.js");
|
|
57
47
|
const FilterPopover = (props) => {
|
|
58
48
|
const {
|
|
59
49
|
column,
|
|
@@ -79,17 +69,31 @@ const FilterPopover = (props) => {
|
|
|
79
69
|
const [buttonReference, setButtonReference] = (0, import_react.useState)(null);
|
|
80
70
|
const [isButtonFocused, setIsButtonFocused] = (0, import_react.useState)(false);
|
|
81
71
|
const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } = (0, import_useGetFilterHandlers.useGetFilterHandlers)(props, isMenuOpen, buttonReference, setIsButtonFocused);
|
|
82
|
-
const
|
|
83
|
-
|
|
72
|
+
const floatingOffset = (0, import_react.useMemo)(() => columnReference ? [0, 1] : [5, 4], [columnReference]);
|
|
73
|
+
const externalReferenceElement = columnReference || buttonReference;
|
|
74
|
+
const {
|
|
75
|
+
refs,
|
|
76
|
+
floatingStyles,
|
|
77
|
+
context,
|
|
78
|
+
isOpen: isFloatingOpen,
|
|
79
|
+
forceUpdatePosition
|
|
80
|
+
} = (0, import_ds_floating_context.useFloatingContext)({
|
|
81
|
+
externallyControlledIsOpen: isMenuOpen,
|
|
82
|
+
externalReferenceElement,
|
|
83
|
+
placement: "bottom-end",
|
|
84
|
+
customOffset: floatingOffset,
|
|
85
|
+
withoutAnimation: true,
|
|
86
|
+
placementOrderPreference: ["bottom-end", "top-end"]
|
|
84
87
|
});
|
|
88
|
+
(0, import_react.useEffect)(() => {
|
|
89
|
+
void forceUpdatePosition();
|
|
90
|
+
}, [filters, forceUpdatePosition]);
|
|
91
|
+
(0, import_useOnClickOutside.useOnClickOutside)(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
|
|
85
92
|
const popoverContentRef = (0, import_react.useRef)(null);
|
|
86
93
|
const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
|
|
87
94
|
firstElementRef,
|
|
88
95
|
lastElementRef
|
|
89
96
|
});
|
|
90
|
-
(0, import_react.useEffect)(() => {
|
|
91
|
-
void actionRef.current.update?.();
|
|
92
|
-
}, [filters]);
|
|
93
97
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
94
98
|
"div",
|
|
95
99
|
{
|
|
@@ -97,7 +101,7 @@ const FilterPopover = (props) => {
|
|
|
97
101
|
onKeyDown: handleMenuOnKeyDown,
|
|
98
102
|
children: [
|
|
99
103
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
100
|
-
FilterButton,
|
|
104
|
+
import_styled.FilterButton,
|
|
101
105
|
{
|
|
102
106
|
hide: !isIconVisible,
|
|
103
107
|
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_BUTTON,
|
|
@@ -121,27 +125,22 @@ const FilterPopover = (props) => {
|
|
|
121
125
|
}
|
|
122
126
|
),
|
|
123
127
|
(columnReference || buttonReference) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
124
|
-
|
|
128
|
+
import_styled.StyledFloatingWrapper,
|
|
125
129
|
{
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
|
|
131
|
-
startPlacementPreference: "bottom-end",
|
|
132
|
-
customOffset: columnReference ? [0, 1] : [5, 4],
|
|
133
|
-
withoutArrow: true,
|
|
134
|
-
withoutAnimation: true,
|
|
135
|
-
extraPopperStyles: {
|
|
130
|
+
innerRef: refs.setFloating,
|
|
131
|
+
isOpen: isFloatingOpen,
|
|
132
|
+
floatingStyles: {
|
|
133
|
+
...floatingStyles,
|
|
136
134
|
...customStyles,
|
|
137
135
|
minWidth: column.ref?.current?.offsetWidth ?? "0px"
|
|
138
136
|
},
|
|
139
|
-
|
|
137
|
+
context,
|
|
138
|
+
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
|
|
140
139
|
getOwnerProps,
|
|
141
140
|
getOwnerPropsArguments,
|
|
142
141
|
role: "dialog",
|
|
143
142
|
"aria-label": `Filter by ${column.Header}`,
|
|
144
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperContent, { getOwnerProps, innerRef: popoverContentRef, onKeyDown: handleOnKeyDown, children: menuContent })
|
|
143
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.PopperContent, { getOwnerProps, innerRef: popoverContentRef, onKeyDown: handleOnKeyDown, children: menuContent })
|
|
145
144
|
}
|
|
146
145
|
)
|
|
147
146
|
]
|
|
@@ -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 import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { useOnClickOutside } from './useOnClickOutside.js';\nimport { FilterButton, PopperContent, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n const {\n column,\n customStyles,\n reduxHeader,\n menuContent,\n ariaLabel,\n triggerIcon,\n innerRef,\n columnReference,\n firstElementRef,\n lastElementRef,\n } = props;\n\n const filters = usePropsStore((state) => state.filters);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n }),\n [column.id],\n );\n\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const floatingOffset = useMemo<[number, number]>(() => (columnReference ? [0, 1] : [5, 4]), [columnReference]);\n\n const externalReferenceElement = columnReference || buttonReference;\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n forceUpdatePosition,\n } = useFloatingContext({\n externallyControlledIsOpen: isMenuOpen,\n externalReferenceElement,\n placement: 'bottom-end',\n customOffset: floatingOffset,\n withoutAnimation: true,\n placementOrderPreference: ['bottom-end', 'top-end'],\n });\n\n // When the filter bar changes height, re-compute the floating position\n useEffect(() => {\n void forceUpdatePosition();\n }, [filters, forceUpdatePosition]);\n\n useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);\n\n const popoverContentRef = useRef<HTMLDivElement>(null);\n const handleOnKeyDown = useFocusTrap({\n firstElementRef,\n lastElementRef,\n });\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 data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n >\n {triggerIcon}\n </DSButtonV2>\n </FilterButton>\n {(columnReference || buttonReference) && (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n context={context}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n role=\"dialog\"\n aria-label={`Filter by ${column.Header as string}`}\n >\n <PopperContent getOwnerProps={getOwnerProps} innerRef={popoverContentRef} onKeyDown={handleOnKeyDown}>\n {menuContent}\n </PopperContent>\n </StyledFloatingWrapper>\n )}\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/dist/cjs/package.json
CHANGED
|
@@ -34,7 +34,7 @@ module.exports = __toCommonJS(Cell_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
37
|
-
var
|
|
37
|
+
var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
|
|
38
38
|
var import_react = __toESM(require("react"));
|
|
39
39
|
var import_Columns = require("../../addons/Columns/index.js");
|
|
40
40
|
var import_Editables = require("../../addons/Editables/index.js");
|
|
@@ -89,7 +89,7 @@ const Cell = ({
|
|
|
89
89
|
const textValue = (0, import_react.useMemo)(
|
|
90
90
|
() => appliedTextWrap === "truncate" ? (
|
|
91
91
|
// @ts-expect-error - data-table typescript is broken
|
|
92
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...cellProps }) })
|
|
93
93
|
) : (
|
|
94
94
|
// @ts-expect-error - data-table typescript is broken
|
|
95
95
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...cellProps })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Cells/Cell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBrB;AApBF,qBAAqB;AACrB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<\n PropsWithChildren<{\n cellStyle: React.CSSProperties;\n column: DSDataTableT.InternalColumn;\n getOwnerProps: DSDataTableT.GetOwnerPropsT;\n getOwnerPropsArguments: () => DSDataTableT.Cell;\n }>\n>(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => (\n <StyledCell\n column={column}\n style={cellStyle}\n role=\"cell\"\n data-testid={DATA_TESTID.DATA_TABLE_CELL}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n </StyledCell>\n));\n\ninterface CellProps {\n cell: DSDataTableT.Cell;\n column: DSDataTableT.InternalColumn;\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n cell,\n column,\n row,\n isRowSelected,\n shouldAddExpandCell,\n isDragOverlay,\n}) => {\n const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n const isDisabledRow = disabledRows[row.uid];\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n const cellProps = useMemo(\n () => ({\n ...cellRendererProps,\n cell,\n row,\n isRowSelected,\n draggableProps,\n isDragOverlay,\n role: 'cell',\n cellStyle,\n column,\n isDisabledRow,\n }),\n [cellRendererProps, cell, row, isRowSelected, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow],\n );\n\n const CellComponent = cell.render;\n\n const textValue = useMemo(\n () =>\n appliedTextWrap === 'truncate' ? (\n // @ts-expect-error - data-table typescript is broken\n <TruncatedTooltipText value={<CellComponent {...cellProps} />} />\n ) : (\n // @ts-expect-error - data-table typescript is broken\n <CellComponent {...cellProps} />\n ),\n [CellComponent, appliedTextWrap, cellProps],\n );\n const pureCellContent = useMemo(() => {\n if (shouldAddExpandCell) {\n return (\n <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n {/* @ts-expect-error - data-table typescript is broken */}\n {shouldAddExpandCell && expandRowColumn.Cell && <expandRowColumn.Cell {...cellProps} />}\n {textValue}\n </Grid>\n );\n }\n return textValue;\n }, [cellProps, shouldAddExpandCell, textValue]);\n const DefaultCellContentJSX = useMemo(\n () => (\n <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {pureCellContent}\n </StyledCellContent>\n ),\n [getOwnerProps, getOwnerPropsArguments, pureCellContent],\n );\n\n const EditableContentJSX = useMemo(() => {\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n // @ts-expect-error - data-table typescript is broken\n if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function')\n // @ts-expect-error - data-table typescript is broken\n return column.editable({\n DefaultCellRender: DefaultCellContentJSX,\n ...cellProps,\n }) as JSX.Element;\n\n return null;\n }, [DefaultCellContentJSX, cellProps, column]);\n\n return (\n <PureStandardCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n </PureStandardCell>\n );\n};\n\nexport { Cell };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(CellFactory_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(CellFactory_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var
|
|
36
|
+
var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
|
|
37
37
|
var import_react = __toESM(require("react"));
|
|
38
38
|
var import_Columns = require("../../addons/Columns/index.js");
|
|
39
39
|
var import_Editables = require("../../addons/Editables/index.js");
|
|
@@ -67,7 +67,7 @@ const TruncableCellContent = (0, import_react.memo)((props) => {
|
|
|
67
67
|
const textWrap = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.textWrap);
|
|
68
68
|
const appliedTextWrap = column.textWrap || textWrap;
|
|
69
69
|
if (appliedTextWrap === "truncate") {
|
|
70
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...props }) });
|
|
71
71
|
}
|
|
72
72
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellComponent, { ...props });
|
|
73
73
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Cells/CellFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBjB;AAjBN,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<PropsWithChildren<DSDataTableT.CellProps>>(\n ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {\n const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n return (\n <StyledCell\n column={column}\n style={cellStyle}\n role=\"cell\"\n data-testid={DATA_TESTID.DATA_TABLE_CELL}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n </StyledCell>\n );\n },\n);\n\nconst TruncableCellContent = memo((props: DSDataTableT.CellProps) => {\n const { cell, column } = props;\n const { render: CellComponent } = cell;\n\n const textWrap = usePropsStore((state) => state.textWrap);\n const appliedTextWrap = column.textWrap || textWrap;\n if (appliedTextWrap === 'truncate') {\n return <TruncatedTooltipText value={<CellComponent {...props} />} />;\n }\n return <CellComponent {...props} />;\n});\n\nconst ExpandableCellContent = memo(\n (props: DSDataTableT.CellProps) => expandRowColumn.Cell && <expandRowColumn.Cell {...props} />,\n);\n\nconst DefaultCellContent = memo(\n (\n props: DSDataTableT.CellProps & {\n getOwnerProps: DSDataTableT.GetOwnerPropsT;\n getOwnerPropsArguments: () => DSDataTableT.Cell;\n },\n ) => {\n const { shouldAddExpandCell, getOwnerProps, getOwnerPropsArguments } = props;\n\n return (\n <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {shouldAddExpandCell ? <ExpandableCellContent {...props} /> : <TruncableCellContent {...props} />}\n </StyledCellContent>\n );\n },\n);\n\nconst EditableCell = memo(\n (\n props: DSDataTableT.CellProps & {\n getOwnerProps: DSDataTableT.GetOwnerPropsT;\n getOwnerPropsArguments: () => DSDataTableT.Cell;\n },\n ) => {\n const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n const { column } = restProps;\n const DefaultCellContentJSX = (\n <DefaultCellContent\n {...restProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n // @ts-expect-error - data-table typescript is broken\n if (EditableComponent) return <EditableComponent {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function') {\n const ColumnEditableRenderProps = column.editable as React.ComponentType<\n DSDataTableT.CellProps & { DefaultCellRender: JSX.Element }\n >;\n return <ColumnEditableRenderProps {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n\n return null;\n },\n);\n\ninterface CellFactoryProps {\n cell: DSDataTableT.Cell;\n column: DSDataTableT.InternalColumn;\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n cellIsNextToExpander: boolean;\n isDragOverlay: boolean;\n}\n\nconst CellFactory: React.ComponentType<CellFactoryProps> = (props) => {\n const { column, row, cell } = props;\n const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n const isDisabledRow = disabledRows[row.uid];\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const cellProps: DSDataTableT.CellProps = useMemo(\n () => ({\n ...cellRendererProps,\n ...props,\n role: 'cell',\n draggableProps,\n isDisabledRow,\n domIdAffix,\n }),\n [cellRendererProps, props, draggableProps, isDisabledRow, domIdAffix],\n );\n\n return (\n <PureStandardCell {...cellProps}>\n {column.editable && !disabledRows[row.uid] ? (\n <EditableCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n ) : (\n <DefaultCellContent\n {...cellProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </PureStandardCell>\n );\n};\n\nexport { CellFactory };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -33,10 +33,10 @@ __export(HeaderCellTitle_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(HeaderCellTitle_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var
|
|
36
|
+
var import_TruncatedTooltipText = require("../../TruncatedTooltipText.js");
|
|
37
37
|
var import_RequiredDot = require("./RequiredDot.js");
|
|
38
38
|
var import_constants = require("../../configs/constants.js");
|
|
39
|
-
const StringTitle = ({ text, textWrap }) => textWrap === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
39
|
+
const StringTitle = ({ text, textWrap }) => textWrap === "truncate" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: text }) : text;
|
|
40
40
|
const HeaderCellTitle = ({ column, draggableProps, textWrap }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center" }, "data-testid": import_constants.DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE, children: [
|
|
41
41
|
typeof column.Header === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StringTitle, { text: column.Header, textWrap: column.textWrap || textWrap }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(column.Header, { column, draggableProps }),
|
|
42
42
|
column.required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RequiredDot.RequiredDot, {})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/HeaderCellTitle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcK;AAb5B,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from '../HoC/SortableItemContext.js';\nimport { RequiredDot } from './RequiredDot.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\ninterface HeaderCellTitleProps {\n column: DSDataTableT.InternalColumn;\n draggableProps: SortableItemContextType['draggableProps'];\n textWrap: 'wrap' | 'wrap-all' | 'truncate';\n}\n\nconst StringTitle = ({ text, textWrap }: { textWrap: HeaderCellTitleProps['textWrap']; text: string }) =>\n textWrap === 'truncate' ? <TruncatedTooltipText value={text} /> : text;\n\nexport const HeaderCellTitle: React.ComponentType<HeaderCellTitleProps> = ({ column, draggableProps, textWrap }) => (\n <div style={{ display: 'flex', alignItems: 'center' }} data-testid={DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE}>\n {typeof column.Header === 'string' ? (\n <StringTitle text={column.Header} textWrap={column.textWrap || textWrap} />\n ) : (\n <column.Header column={column} draggableProps={draggableProps} />\n )}\n {column.required && <RequiredDot />}\n </div>\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcK;AAb5B,kCAAqC;AAGrC,yBAA4B;AAC5B,uBAA4B;AAQ5B,MAAM,cAAc,CAAC,EAAE,MAAM,SAAS,MACpC,aAAa,aAAa,4CAAC,oDAAqB,OAAO,MAAM,IAAK;AAE7D,MAAM,kBAA6D,CAAC,EAAE,QAAQ,gBAAgB,SAAS,MAC5G,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAAG,eAAa,6BAAY,8BAC7E;AAAA,SAAO,OAAO,WAAW,WACxB,4CAAC,eAAY,MAAM,OAAO,QAAQ,UAAU,OAAO,YAAY,UAAU,IAEzE,4CAAC,OAAO,QAAP,EAAc,QAAgB,gBAAgC;AAAA,EAEhE,OAAO,YAAY,4CAAC,kCAAY;AAAA,GACnC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -76,7 +76,7 @@ const defaultProps = () => ({
|
|
|
76
76
|
onRowExpand: () => null,
|
|
77
77
|
onColumnSort: () => null,
|
|
78
78
|
isSkeleton: false,
|
|
79
|
-
domIdAffix: (0, import_uid.uid)(
|
|
79
|
+
domIdAffix: (0, import_uid.uid)(8)
|
|
80
80
|
});
|
|
81
81
|
const DSDataTablePropTypes = {
|
|
82
82
|
...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants2.DSDataTableName, import_constants2.DSDataTableSlots),
|
|
@@ -255,7 +255,7 @@ const DSDataTablePropTypes = {
|
|
|
255
255
|
onNoResultsButtonClick: import_ds_props_helpers.PropTypes.func.description("Function invoked when the no results button is clicked").defaultValue(() => null),
|
|
256
256
|
isSkeleton: import_ds_props_helpers.PropTypes.bool.description("Whether to show a skeleton loader in the datatable"),
|
|
257
257
|
getAriaLabelForRow: import_ds_props_helpers.PropTypes.func.description("Function invoked to determine a row aria-label"),
|
|
258
|
-
domIdAffix: import_ds_props_helpers.PropTypes.string.description("Affix to avoid duplicate ids").defaultValue("
|
|
258
|
+
domIdAffix: import_ds_props_helpers.PropTypes.string.description("Affix to avoid duplicate ids").defaultValue("8 randomly generated characters"),
|
|
259
259
|
checkboxSelectAllProps: import_ds_props_helpers.PropTypes.object.description("Props for the select all checkbox")
|
|
260
260
|
};
|
|
261
261
|
const DSDataTablePropTypesSchema = DSDataTablePropTypes;
|