@elliemae/ds-data-table 3.33.0-next.2 → 3.33.0-next.3
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/DSDataTableDefinitions.js +81 -0
- package/dist/cjs/DSDataTableDefinitions.js.map +7 -0
- package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js +2 -1
- package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js.map +2 -2
- package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +2 -1
- package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +2 -2
- package/dist/cjs/addons/Editables/TextEditableCell/TextEditableCell.js +2 -1
- package/dist/cjs/addons/Editables/TextEditableCell/TextEditableCell.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/index.js +3 -2
- package/dist/cjs/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/cjs/exported-related/Toolbar/Toolbar.js +5 -4
- package/dist/cjs/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/dist/cjs/parts/DnDHandle.js +2 -1
- package/dist/cjs/parts/DnDHandle.js.map +2 -2
- package/dist/cjs/parts/DropIndicator.js +5 -1
- package/dist/cjs/parts/DropIndicator.js.map +2 -2
- package/dist/cjs/parts/EmptyContent.js +10 -6
- package/dist/cjs/parts/EmptyContent.js.map +2 -2
- package/dist/cjs/parts/FilterBar/styled.js +2 -1
- package/dist/cjs/parts/FilterBar/styled.js.map +2 -2
- package/dist/cjs/parts/Headers/EmptyChildrenGroup.js +2 -1
- package/dist/cjs/parts/Headers/EmptyChildrenGroup.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCellGroup.js +2 -1
- package/dist/cjs/parts/Headers/HeaderCellGroup.js.map +2 -2
- package/dist/cjs/parts/Loader.js +2 -1
- package/dist/cjs/parts/Loader.js.map +2 -2
- package/dist/cjs/parts/Row.js +2 -1
- package/dist/cjs/parts/Row.js.map +2 -2
- package/dist/cjs/styled.js +81 -20
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/DSDataTableDefinitions.js +51 -0
- package/dist/esm/DSDataTableDefinitions.js.map +7 -0
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js +2 -1
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +2 -1
- package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +2 -2
- package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js +2 -1
- package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/index.js +3 -2
- package/dist/esm/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js +5 -4
- package/dist/esm/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/dist/esm/parts/DnDHandle.js +2 -1
- package/dist/esm/parts/DnDHandle.js.map +2 -2
- package/dist/esm/parts/DropIndicator.js +5 -1
- package/dist/esm/parts/DropIndicator.js.map +2 -2
- package/dist/esm/parts/EmptyContent.js +10 -6
- package/dist/esm/parts/EmptyContent.js.map +2 -2
- package/dist/esm/parts/FilterBar/styled.js +2 -1
- package/dist/esm/parts/FilterBar/styled.js.map +2 -2
- package/dist/esm/parts/Headers/EmptyChildrenGroup.js +2 -1
- package/dist/esm/parts/Headers/EmptyChildrenGroup.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCellGroup.js +2 -1
- package/dist/esm/parts/Headers/HeaderCellGroup.js.map +2 -2
- package/dist/esm/parts/Loader.js +2 -1
- package/dist/esm/parts/Loader.js.map +2 -2
- package/dist/esm/parts/Row.js +2 -1
- package/dist/esm/parts/Row.js.map +2 -2
- package/dist/esm/styled.js +81 -20
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/DSDataTableDefinitions.d.ts +45 -0
- package/dist/types/parts/Loader.d.ts +1 -1
- package/package.json +29 -29
|
@@ -0,0 +1,81 @@
|
|
|
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 DSDataTableDefinitions_exports = {};
|
|
30
|
+
__export(DSDataTableDefinitions_exports, {
|
|
31
|
+
DSDataTableName: () => DSDataTableName,
|
|
32
|
+
DSDataTableSlots: () => DSDataTableSlots
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(DSDataTableDefinitions_exports);
|
|
35
|
+
var React = __toESM(require("react"));
|
|
36
|
+
const DSDataTableName = "DSDataTable";
|
|
37
|
+
const DSDataTableSlots = {
|
|
38
|
+
ROOT: "root",
|
|
39
|
+
CONTENT_WRAPPER: "content-wrapper",
|
|
40
|
+
TABLE_WRAPPER: "table-wrapper",
|
|
41
|
+
PAGINATION_WRAPPER: "pagination-wrapper",
|
|
42
|
+
TABLE_CONTENT_WRAPPER: "table-content-wrapper",
|
|
43
|
+
VIRTUAL_LIST_WRAPPER: "virtual-list-wrapper",
|
|
44
|
+
HEAD_WRAPPER: "head-wrapper",
|
|
45
|
+
HEAD_TR: "head-tr",
|
|
46
|
+
HEAD_TH: "head-th",
|
|
47
|
+
HEAD_RIGHT_ICONS_WRAPPER: "head-right-icons-wrapper",
|
|
48
|
+
HEADER_CELL_WRAPPER: "header-cell-wrapper",
|
|
49
|
+
EMPTY_HEADER: "empty-header",
|
|
50
|
+
RESIZER: "resizer",
|
|
51
|
+
ACTION_CELL: "action-cell",
|
|
52
|
+
EXPAND_CELL_CONTAINER: "expand-cell-container",
|
|
53
|
+
SINGLE_CELL_CONTAINER: "single-cell-container",
|
|
54
|
+
DRAG_AND_DROP_GRIPPER: "drag-and-drop-gripper",
|
|
55
|
+
TEXT_EDITABLE_CELL_INPUT: "text-editable-cell-input",
|
|
56
|
+
FILTER_POPOVER_BUTTON: "filter-popover-button",
|
|
57
|
+
FILTER_POPOVER_CONTENT: "filter-popover-content",
|
|
58
|
+
DROP_INDICATOR: "drop-indicator",
|
|
59
|
+
CELL: "cell",
|
|
60
|
+
CELL_CONTENT: "cell-content",
|
|
61
|
+
PENCIL_ICON: "pencil-icon",
|
|
62
|
+
EDITABLE_CONTAINER: "editable-container",
|
|
63
|
+
FULLSIZE_GRID: "fullsize-grid",
|
|
64
|
+
ROW: "row",
|
|
65
|
+
GROUP_HEADER_CONTAINER: "group-header-container",
|
|
66
|
+
GROUP_HEADER_TITLE: "header-title",
|
|
67
|
+
CELL_CONTAINER: "cell-container",
|
|
68
|
+
TOOLBAR_WRAPPER: "toolbar-wrapper",
|
|
69
|
+
TOOLBAR_BUTTONS_WRAPPER: "toolbar-buttons-wrapper",
|
|
70
|
+
TOOLBAR_BUTTON: "toolbar-button",
|
|
71
|
+
TOOLBAR_POSITION: "toolbar-position",
|
|
72
|
+
EMPTY_STATE_WRAPPER: "empty-state-wrapper",
|
|
73
|
+
WARNING_ICON: "warning-icon",
|
|
74
|
+
EMPTY_PRIMARY_MESSAGE: "empty-primary-message",
|
|
75
|
+
EMPTY_SECONDARY_MESSAGE: "empty-secondary-message",
|
|
76
|
+
EMPTY_BUTTON: "empty-button",
|
|
77
|
+
CENTER_CONTENT_FLEX_WRAPPER: "center-content-flex-wrapper",
|
|
78
|
+
LOADER_WRAPPER: "loader-wrapper",
|
|
79
|
+
FILTER_BAR_WRAPPER: "filter-bar-wrapper"
|
|
80
|
+
};
|
|
81
|
+
//# sourceMappingURL=DSDataTableDefinitions.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/DSDataTableDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export const DSDataTableName = 'DSDataTable';\n\nexport const DSDataTableSlots = {\n ROOT: 'root',\n CONTENT_WRAPPER: 'content-wrapper',\n TABLE_WRAPPER: 'table-wrapper',\n PAGINATION_WRAPPER: 'pagination-wrapper',\n TABLE_CONTENT_WRAPPER: 'table-content-wrapper',\n VIRTUAL_LIST_WRAPPER: 'virtual-list-wrapper',\n HEAD_WRAPPER: 'head-wrapper',\n HEAD_TR: 'head-tr',\n HEAD_TH: 'head-th',\n HEAD_RIGHT_ICONS_WRAPPER: 'head-right-icons-wrapper',\n HEADER_CELL_WRAPPER: 'header-cell-wrapper',\n EMPTY_HEADER: 'empty-header',\n RESIZER: 'resizer',\n ACTION_CELL: 'action-cell',\n EXPAND_CELL_CONTAINER: 'expand-cell-container',\n SINGLE_CELL_CONTAINER: 'single-cell-container',\n DRAG_AND_DROP_GRIPPER: 'drag-and-drop-gripper',\n TEXT_EDITABLE_CELL_INPUT: 'text-editable-cell-input',\n FILTER_POPOVER_BUTTON: 'filter-popover-button',\n FILTER_POPOVER_CONTENT: 'filter-popover-content',\n DROP_INDICATOR: 'drop-indicator',\n CELL: 'cell',\n CELL_CONTENT: 'cell-content',\n PENCIL_ICON: 'pencil-icon',\n EDITABLE_CONTAINER: 'editable-container',\n FULLSIZE_GRID: 'fullsize-grid',\n ROW: 'row',\n GROUP_HEADER_CONTAINER: 'group-header-container',\n GROUP_HEADER_TITLE: 'header-title',\n CELL_CONTAINER: 'cell-container',\n TOOLBAR_WRAPPER: 'toolbar-wrapper',\n TOOLBAR_BUTTONS_WRAPPER: 'toolbar-buttons-wrapper',\n TOOLBAR_BUTTON: 'toolbar-button',\n TOOLBAR_POSITION: 'toolbar-position',\n EMPTY_STATE_WRAPPER: 'empty-state-wrapper',\n WARNING_ICON: 'warning-icon',\n EMPTY_PRIMARY_MESSAGE: 'empty-primary-message',\n EMPTY_SECONDARY_MESSAGE: 'empty-secondary-message',\n EMPTY_BUTTON: 'empty-button',\n CENTER_CONTENT_FLEX_WRAPPER: 'center-content-flex-wrapper',\n LOADER_WRAPPER: 'loader-wrapper',\n FILTER_BAR_WRAPPER: 'filter-bar-wrapper',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,0BAA0B;AAAA,EAC1B,uBAAuB;AAAA,EACvB,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,KAAK;AAAA,EACL,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,cAAc;AAAA,EACd,6BAA6B;AAAA,EAC7B,gBAAgB;AAAA,EAChB,oBAAoB;AACtB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -39,11 +39,12 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
39
39
|
var import_styled = require("../../../styled.js");
|
|
40
40
|
var import_constants = require("../../../configs/constants.js");
|
|
41
41
|
var import_useStore = require("../../../configs/useStore/useStore.js");
|
|
42
|
+
var import_DSDataTableDefinitions = require("../../../DSDataTableDefinitions.js");
|
|
42
43
|
const disabledCaret = import_ds_system.css`
|
|
43
44
|
cursor: not-allowed;
|
|
44
45
|
pointer-events: none;
|
|
45
46
|
`;
|
|
46
|
-
const StyledSpan = import_ds_system.styled.
|
|
47
|
+
const StyledSpan = (0, import_ds_system.styled)("span", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.EXPAND_CELL_CONTAINER })`
|
|
47
48
|
cursor: pointer;
|
|
48
49
|
box-sizing: border-box;
|
|
49
50
|
outline: none;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnExpand/ColumnExpand.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, createRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n pointer-events: none;\n`;\nconst StyledSpan = styled.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, createRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n pointer-events: none;\n`;\nconst StyledSpan = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.EXPAND_CELL_CONTAINER })<{\n disabled?: boolean;\n}>`\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n ${({ disabled }) => disabled && disabledCaret}\n`;\n\nconst ArrowDown: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n <ArrowheadRight\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n style={{ transform: 'rotate(45deg)' }}\n />\n);\n\nconst ArrowRight: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: DSDataTableT.InternalColumn<HTMLSpanElement> = {\n // Build our expander column\n id: 'expander', // Make sure it has an ID\n accessor: 'expandRowColumn',\n Header: () => {\n const expandedRows = usePropsStore((state) => state.expandedRows);\n const onRowExpand = usePropsStore((state) => state.onRowExpand);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n\n const allExpandable = useMemo(() => {\n const expandable: Record<string, boolean> = {};\n allDataFlattened.forEach((row) => {\n const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n });\n return expandable;\n }, [allDataFlattened, disabledRows]);\n\n const isAllRowsExpanded = useMemo(\n () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n [allExpandable, expandedRows],\n );\n\n const onExpandedAllHandler = useCallback(() => {\n if (isAllRowsExpanded) onRowExpand({}, 'All');\n else onRowExpand({ ...allExpandable }, 'All');\n }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n onExpandedAllHandler();\n e.preventDefault();\n }\n },\n [onExpandedAllHandler],\n );\n\n const GlobalExpandIcon = useMemo(() => {\n if (isAllRowsExpanded) return <ArrowDown />;\n if (Object.keys(expandedRows).length) return <ArrowMixed />;\n return <ArrowRight />;\n }, [expandedRows, isAllRowsExpanded]);\n\n return (\n <StyledFocusWithin>\n <StyledSpan\n role=\"button\"\n tabIndex={0}\n title={\n isEmptyContent && firstFocuseableColumnHeaderId === 'expander'\n ? `${noResultsMessage}. ${\n noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''\n } Toggle All Rows Expanded`\n : 'Toggle All Rows Expanded'\n }\n onClick={onExpandedAllHandler}\n onKeyDown={onKeyDownHandler}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n aria-expanded={isAllRowsExpanded}\n style={{ width: '24px', height: '24px' }}\n >\n {GlobalExpandIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n },\n Cell: ({ cell, row, isRowSelected, draggableProps }) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const expandedRows = usePropsStore((state) => state.expandedRows);\n const onRowExpand = usePropsStore((state) => state.onRowExpand);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n\n const uniqueId = row.uid;\n\n const isExpanded = !!expandedRows[uniqueId];\n\n const shouldPrintCaret = useMemo(\n () =>\n (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n row.original.tableRowDetails ||\n row.original.dimsumHeaderValue,\n [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n );\n\n const onRowExpandHandler = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (disabledRows[row.uid]) return;\n e.stopPropagation(); // to prevent on row click\n const newExpandedRows = { ...expandedRows };\n if (newExpandedRows[uniqueId]) {\n delete newExpandedRows[uniqueId];\n } else {\n newExpandedRows[uniqueId] = true;\n }\n onRowExpand(newExpandedRows, uniqueId);\n },\n [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n );\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onRowExpandHandler(e);\n }\n },\n [onRowExpandHandler],\n );\n\n const isDragging = draggableProps && draggableProps.isDragging;\n const isDragOverlay = dragAndDropRows && !draggableProps;\n\n const indentStyle: React.CSSProperties = useMemo(\n () => ({\n marginLeft: `${row.depth * 32}px`,\n marginRight: '12px',\n paddingLeft: '3px',\n paddingRight: '2px',\n position: 'relative',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n }),\n [row.depth],\n );\n\n const PureCaretIcon = useMemo(() => {\n const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n return (\n <Caret\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n />\n );\n }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n if (shouldPrintCaret)\n return (\n <StyledFocusWithin style={indentStyle}>\n <StyledSpan\n role=\"button\"\n key={`${row.uid}-expand-button`}\n title=\"Toggle Row Expanded\"\n onClick={onRowExpandHandler}\n onKeyDown={onKeyDownHandler}\n innerRef={cell.ref}\n tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n data-testid=\"data-table-row-expand-cell\"\n aria-expanded={isExpanded}\n disabled={disabledRows[row.uid]}\n aria-disabled={disabledRows[row.uid]}\n >\n {PureCaretIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n\n if (row.depth !== 0)\n return (\n <span style={indentStyle}>\n <ArrowShortReturn\n size=\"s\"\n data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n color={['brand-primary', '600']}\n />\n </span>\n );\n\n return <div style={{ width: '36px' }} />;\n },\n textWrap: 'wrap',\n canResize: false,\n width: 25,\n padding: 0,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n ref: createRef(),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,7 +39,8 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
39
39
|
var import_constants = require("../../../configs/constants.js");
|
|
40
40
|
var import_styled = require("../../../styled.js");
|
|
41
41
|
var import_useStore = require("../../../configs/useStore/useStore.js");
|
|
42
|
-
|
|
42
|
+
var import_DSDataTableDefinitions = require("../../../DSDataTableDefinitions.js");
|
|
43
|
+
const CenteredContent = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.SINGLE_CELL_CONTAINER })`
|
|
43
44
|
display: flex;
|
|
44
45
|
height: 100%;
|
|
45
46
|
width: 100%;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { createRef, useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../styled.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\n\nconst CenteredContent = styled.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { createRef, useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../styled.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst CenteredContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.SINGLE_CELL_CONTAINER })`\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: DSDataTableT.InternalColumn<HTMLInputElement> = {\n // Build our singleSelecter column\n id: 'singleSelecter', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <ScreenReaderOnly>Single Select Column</ScreenReaderOnly>,\n Cell: ({ cell, row, isRowSelected }) => {\n const onSelectionChange = usePropsStore((state) => state.onSelectionChange);\n const selection = usePropsStore((state) => state.selection);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const { uid } = row;\n const selectedState = !!selection?.[uid];\n\n const onChangeHandler = useCallback(\n (newValue: string, e: React.ChangeEvent) => {\n // in single select we only allow one item to be selected\n onSelectionChange({ [uid]: !selectedState }, uid, e);\n },\n [onSelectionChange, selectedState, uid],\n );\n\n return (\n <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n <DSControlledRadio\n aria-checked={selectedState}\n aria-disabled={disabledRows[row.uid]}\n title=\"Toggle row selected\"\n aria-label=\"Toggle row selected\"\n checked={selectedState}\n onChange={onChangeHandler}\n data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n value={uid}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </CenteredContent>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 4,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n ref: createRef(),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBP;AAvBhB,mBAA8C;AAC9C,2BAAkC;AAClC,uBAAuB;AAEvB,uBAA4B;AAC5B,oBAAiC;AACjC,sBAA8B;AAC9B,oCAAkD;AAElD,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7G,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAoE;AAAA;AAAA,EAE/E,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,4CAAC,kCAAiB,kCAAoB;AAAA,EACpD,MAAM,CAAC,EAAE,MAAM,KAAK,cAAc,MAAM;AACtC,UAAM,wBAAoB,+BAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,UAAM,gBAAY,+BAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,UAAM,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,UAAM,EAAE,IAAI,IAAI;AAChB,UAAM,gBAAgB,CAAC,CAAC,YAAY,GAAG;AAEvC,UAAM,sBAAkB;AAAA,MACtB,CAAC,UAAkB,MAAyB;AAE1C,0BAAkB,EAAE,CAAC,GAAG,GAAG,CAAC,cAAc,GAAG,KAAK,CAAC;AAAA,MACrD;AAAA,MACA,CAAC,mBAAmB,eAAe,GAAG;AAAA,IACxC;AAEA,WACE,4CAAC,mBAAgB,SAAS,oBAAoB,WAAW,oBACvD;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc;AAAA,QACd,iBAAe,aAAa,IAAI,GAAG;AAAA,QACnC,OAAM;AAAA,QACN,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,6BAAY;AAAA,QACzB,UAAU,aAAa,IAAI,GAAG;AAAA,QAC9B,UAAU,KAAK;AAAA,QACf,OAAO;AAAA,QACP,UAAU,gBAAgB,IAAI;AAAA;AAAA,IAChC,GACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAK,wBAAU;AACjB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,8 @@ var import_react = require("react");
|
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
var import_exported_related = require("../../../exported-related/index.js");
|
|
39
39
|
var import_useStore = require("../../../configs/useStore/useStore.js");
|
|
40
|
-
|
|
40
|
+
var import_DSDataTableDefinitions = require("../../../DSDataTableDefinitions.js");
|
|
41
|
+
const StyledInput = (0, import_ds_system.styled)("input", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`
|
|
41
42
|
outline: none;
|
|
42
43
|
:focus {
|
|
43
44
|
border: 2px solid ${(props) => props.theme.colors.brand[700]};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Editables/TextEditableCell/TextEditableCell.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\n\nconst StyledInput = styled.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst StyledInput = styled('input', { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`\n outline: none;\n :focus {\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n }\n max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<{\n cell: DSDataTableT.Cell<HTMLDivElement>;\n DefaultCellRender: JSX.Element;\n isRowSelected: boolean;\n}> = (props) => {\n const { cell, DefaultCellRender, isRowSelected } = props;\n\n const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n\n const [value, setValue] = useState<string>(cell.value as string);\n\n const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n const {\n target: { value: tValue },\n } = e;\n setValue(tValue);\n }, []);\n\n const handleOnBlur = useCallback(() => {\n const property = cell.column.id;\n const rowIndex = cell.row.index;\n onCellValueChange({ value, property, rowIndex });\n }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'Enter') {\n cell.ref.current?.focus();\n // will exec on blur callback from input and save new value\n }\n if (e.code === 'Escape') {\n setValue(cell.value as string);\n const auxRef = cell.ref.current;\n // this prevent the on blur\n setTimeout(() => {\n auxRef?.focus();\n });\n }\n },\n [cell],\n );\n return (\n <EditableCell\n StandardRender={DefaultCellRender}\n EditableRenderer={\n <StyledInput\n value={value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n onBlur={handleOnBlur}\n autoFocus\n />\n }\n cell={cell}\n isRowSelected={isRowSelected}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6Df;AA5DR,mBAA6C;AAC7C,uBAAuB;AACvB,8BAA6B;AAE7B,sBAA8B;AAC9B,oCAAkD;AAElD,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,yBAAyB,CAAC;AAAA;AAAA;AAAA,wBAGtF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAKxD,MAAM,mBAIR,CAAC,UAAU;AACd,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,wBAAoB,+BAAc,CAAC,UAAU,MAAM,iBAAiB;AAE1E,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,KAAK,KAAe;AAE/D,QAAM,qBAAiB,0BAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAe,0BAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU,SAAS,CAAC;AAAA,EACjD,GAAG,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC;AAE7D,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,SAAS;AACtB,aAAK,IAAI,SAAS,MAAM;AAAA,MAE1B;AACA,UAAI,EAAE,SAAS,UAAU;AACvB,iBAAS,KAAK,KAAe;AAC7B,cAAM,SAAS,KAAK,IAAI;AAExB,mBAAW,MAAM;AACf,kBAAQ,MAAM;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAS;AAAA;AAAA,MACX;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,11 +42,12 @@ var import_constants = require("../../configs/constants.js");
|
|
|
42
42
|
var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
|
|
43
43
|
var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
|
|
44
44
|
var import_useStore = require("../../configs/useStore/useStore.js");
|
|
45
|
-
|
|
45
|
+
var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
|
|
46
|
+
const FilterButton = (0, import_ds_system.styled)("span", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.FILTER_POPOVER_BUTTON })`
|
|
46
47
|
display: inline-grid;
|
|
47
48
|
${(props) => props.hide ? "opacity: 0; display: none; width: 0;" : ""}
|
|
48
49
|
`;
|
|
49
|
-
const PopperContent = import_ds_system.styled.
|
|
50
|
+
const PopperContent = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.FILTER_POPOVER_CONTENT })`
|
|
50
51
|
background-color: #fff;
|
|
51
52
|
`;
|
|
52
53
|
const ButtonTrap = ({ cb }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -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 } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\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';\n\nconst FilterButton = 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 } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\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 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 hide={!isIconVisible} data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}>\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>\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
|
}
|
|
@@ -39,7 +39,8 @@ var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
|
39
39
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
40
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
|
+
const ToolbarBtns = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })`
|
|
43
44
|
& > .em-ds-toolbar {
|
|
44
45
|
box-shadow: none;
|
|
45
46
|
}
|
|
@@ -52,7 +53,7 @@ const boxShadow = import_ds_system.css`
|
|
|
52
53
|
border: none;
|
|
53
54
|
}
|
|
54
55
|
`;
|
|
55
|
-
const ToolbarWrapper = import_ds_system.styled.
|
|
56
|
+
const ToolbarWrapper = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TOOLBAR_WRAPPER })`
|
|
56
57
|
display: flex;
|
|
57
58
|
align-items: center;
|
|
58
59
|
height: 36px;
|
|
@@ -65,10 +66,10 @@ const ToolbarWrapper = import_ds_system.styled.div`
|
|
|
65
66
|
z-index: 8;
|
|
66
67
|
}
|
|
67
68
|
`;
|
|
68
|
-
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
|
|
69
|
+
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TOOLBAR_BUTTON })`
|
|
69
70
|
background-color: transparent;
|
|
70
71
|
`;
|
|
71
|
-
const ToolbarPosition = import_ds_system.styled.
|
|
72
|
+
const ToolbarPosition = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.TOOLBAR_POSITION })`
|
|
72
73
|
display: flex;
|
|
73
74
|
justify-content: flex-end;
|
|
74
75
|
align-items: center;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/Toolbar/Toolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nconst ToolbarBtns = styled.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside, mergeRefs } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\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`;\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n isOpen: boolean;\n}>`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n\n ${({ isOpen }) => isOpen && boxShadow}\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n`;\n\nconst StyledButton = styled(DSButtonV2, { 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: 4px;\n outline: none;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: 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 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}>\n <ToolbarWrapper onKeyDown={onToolbarKeyDown} onClick={stopPropagation} isOpen={show}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2GjB;AA3GN,mBAAqD;AACrD,uBAA4B;AAC5B,0BAA2B;AAC3B,sBAAgC;AAChC,0BAA6C;AAC7C,uBAA4B;AAE5B,oCAAkD;AAElD,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAM3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlB,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASlG,CAAC,EAAE,OAAO,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9B,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,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,6CAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAC5E,uDAAC,kBAAe,WAAW,kBAAkB,SAAS,iBAAiB,QAAQ,MAC5E;AAAA,YAAQ,4CAAC,eAAa,UAAS;AAAA,IAChC;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,WAAU;AAAA,QACV,eAAa,6BAAY;AAAA,QACzB,cAAU,+BAAU,mBAAmB,MAAM,GAAG;AAAA,QAChD,SAAS;AAAA,QACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,QACzC,cAAW;AAAA,QAEX,sDAAC,mCAAgB;AAAA;AAAA,IACnB;AAAA,KACF,GACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,7 +40,8 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
|
40
40
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
41
41
|
var import_SortableItemContext = require("./HoC/SortableItemContext.js");
|
|
42
42
|
var import_constants = require("../configs/constants.js");
|
|
43
|
-
|
|
43
|
+
var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
|
|
44
|
+
const StyledGripperButton = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.DRAG_AND_DROP_GRIPPER })`
|
|
44
45
|
pointer-events: ${({ isDisabled }) => isDisabled ? "none" : ""};
|
|
45
46
|
cursor: ${({ isActive, isDragOverlay, isDisabled }) => {
|
|
46
47
|
if (isDisabled)
|
|
@@ -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 } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\n\nconst StyledGripperButton = 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 } from '@elliemae/ds-system';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.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 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={`${id}-drag-handle`}\n key={`${id}-drag-handle`}\n aria-label=\"Drag handle\"\n isDragging={isDragging}\n isDisabled={isDisabled}\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;AD6DjB;AAlBF;AA3CJ,IAAAA,gBAAkC;AAClC,sBAAgC;AAChC,uBAAuB;AACvB,0BAA0B;AAC1B,iCAAoC;AACpC,uBAA4B;AAC5B,oCAAkD;AAElD,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,sBAAsB,CAAC;AAAA,oBAM7F,CAAC,EAAE,WAAW,MAAO,aAAa,SAAS;AAAA,YACnD,CAAC,EAAE,UAAU,eAAe,WAAW,MAAM;AACrD,MAAI;AAAY,WAAO;AACvB,MAAI,YAAY;AAAe,WAAO;AACtC,SAAO;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOU,CAAC,EAAE,YAAY,MAAM,MAAM,cAAc,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAIxE,MAAM,aAMR,CAAC,EAAE,IAAI,aAAa,eAAe,UAAU,WAAW,MAAM;AACjE,QAAM,EAAE,eAAe,QAAI,0BAAW,8CAAmB;AACzD,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,+BAAU,UAAU,mBAAmB;AAAA,MACjD,UAAU,cAAc,IAAI;AAAA,MAC5B,eAAa,6BAAY;AAAA,MACzB,IAAI,GAAG;AAAA,MACP,KAAK,GAAG;AAAA,MACR,cAAW;AAAA,MACX;AAAA,MACA;AAAA;AAAA,IAEA,4CAAC,mCAAgB,MAAK,KAAI;AAAA,EAC5B;AAEJ;",
|
|
6
6
|
"names": ["import_react"]
|
|
7
7
|
}
|
|
@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
37
|
var import_zIndexInternalConfig = require("../configs/zIndexInternalConfig.js");
|
|
38
38
|
var import_constants = require("../configs/constants.js");
|
|
39
|
+
var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
|
|
39
40
|
const getPositionStyles = ({ dropIndicatorPosition, vertical }) => {
|
|
40
41
|
if (vertical) {
|
|
41
42
|
return `
|
|
@@ -57,7 +58,10 @@ const getCircleStyles = ({ dropIndicatorPosition, vertical }) => ({
|
|
|
57
58
|
right: !vertical || dropIndicatorPosition === import_constants.DropIndicatorPosition.Before ? "unset" : "-2px",
|
|
58
59
|
opacity: 1
|
|
59
60
|
});
|
|
60
|
-
const StyledIndicator = import_ds_system.styled
|
|
61
|
+
const StyledIndicator = (0, import_ds_system.styled)("div", {
|
|
62
|
+
name: import_DSDataTableDefinitions.DSDataTableName,
|
|
63
|
+
slot: import_DSDataTableDefinitions.DSDataTableSlots.DROP_INDICATOR
|
|
64
|
+
})`
|
|
61
65
|
position: absolute;
|
|
62
66
|
${getPositionStyles}
|
|
63
67
|
box-sizing: border-box;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/DropIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';\nimport { DropIndicatorPosition } from '../configs/constants.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\ninterface DropIndicatorProps {\n vertical: boolean;\n dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;\n isDropValid: boolean;\n isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n if (vertical) {\n return `\n left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n `;\n }\n return `\n top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n position: 'absolute',\n zIndex: ZIndexDataTable.DROP_INDICATOR,\n top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n opacity: 1,\n});\n\nconst StyledIndicator = styled.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';\nimport { DropIndicatorPosition } from '../configs/constants.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\n\ninterface DropIndicatorProps {\n vertical: boolean;\n dropIndicatorPosition: false | DSDataTableT.DropIndicatorPositionValues;\n isDropValid: boolean;\n isLast?: boolean;\n}\n\nconst getPositionStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => {\n if (vertical) {\n return `\n left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n `;\n }\n return `\n top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};\n bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};\n `;\n};\n\nconst getCircleStyles = ({ dropIndicatorPosition, vertical }: DropIndicatorProps) => ({\n position: 'absolute',\n zIndex: ZIndexDataTable.DROP_INDICATOR,\n top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',\n right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',\n opacity: 1,\n});\n\nconst StyledIndicator = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.DROP_INDICATOR,\n})<DropIndicatorProps>`\n position: absolute;\n ${getPositionStyles}\n box-sizing: border-box;\n width: ${(props) => (props.vertical ? '2px' : '100%')};\n height: ${(props) => (props.vertical ? '100%' : '2px')};\n background-color: ${({ isDropValid, theme }) => (isDropValid ? theme.colors.brand[600] : theme.colors.danger[900])};\n z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>, isDropValid: boolean) => (\n <svg height=\"6\" width=\"6\" style={style}>\n <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill={isDropValid ? '#1E79C2' : '#C64252'} />\n </svg>\n);\n\nconst DropIndicator: React.ComponentType<DropIndicatorProps> = (props) => {\n const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;\n if (\n dropIndicatorPosition === false ||\n dropIndicatorPosition === DropIndicatorPosition.None ||\n dropIndicatorPosition === DropIndicatorPosition.Inside\n )\n return null;\n\n const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n return (\n <>\n {CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid)}\n <StyledIndicator\n vertical={vertical}\n dropIndicatorPosition={safeDropIndicatorPosition}\n isDropValid={isDropValid}\n />\n </>\n );\n};\n\nexport { DropIndicator };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDnB;AAnDJ,uBAAuB;AACvB,kCAAgC;AAChC,uBAAsC;AAEtC,oCAAkD;AASlD,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,uCAAsB,SAAS,MAAM;AAAA,eAC9D,0BAA0B,uCAAsB,QAAQ,MAAM;AAAA;AAAA,EAE3E;AACA,SAAO;AAAA,aACI,0BAA0B,uCAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,uCAAsB,QAAQ,MAAM;AAAA;AAE9E;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,4CAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,uCAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,uCAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,uCAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,uCAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA;AAAA,IAEG;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG;AAAA,aACrG,4CAAgB;AAAA;AAG7B,MAAM,kBAAkB,CAAC,OAAgC,gBACvD,4CAAC,SAAI,QAAO,KAAI,OAAM,KAAI,OACxB,sDAAC,YAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI,aAAY,KAAI,MAAM,cAAc,YAAY,WAAW,GACzF;AAGF,MAAM,gBAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,UAAU,uBAAuB,QAAQ,YAAY,IAAI;AACjE,MACE,0BAA0B,SAC1B,0BAA0B,uCAAsB,QAChD,0BAA0B,uCAAsB;AAEhD,WAAO;AAET,QAAM,4BAA4B,SAAS,uCAAsB,SAAS;AAE1E,SACE,4EACG;AAAA,oBAAgB,gBAAgB,EAAE,GAAG,OAAO,uBAAuB,0BAA0B,CAAC,GAAG,WAAW;AAAA,IAC7G;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,18 +39,19 @@ var import_ds_icons = require("@elliemae/ds-icons");
|
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
40
|
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
41
41
|
var import_useStore = require("../configs/useStore/useStore.js");
|
|
42
|
-
|
|
42
|
+
var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
|
|
43
|
+
const EmptyStateWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.EMPTY_STATE_WRAPPER })`
|
|
43
44
|
position: sticky;
|
|
44
45
|
height: fit-content;
|
|
45
46
|
top: 0;
|
|
46
47
|
left: 0;
|
|
47
48
|
`;
|
|
48
|
-
const Icon = (0, import_ds_system.styled)(import_ds_icons.WarningTriangle)`
|
|
49
|
+
const Icon = (0, import_ds_system.styled)(import_ds_icons.WarningTriangle, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.WARNING_ICON })`
|
|
49
50
|
fill: ${(props) => props.theme.colors.neutral[300]};
|
|
50
51
|
color: ${(props) => props.theme.colors.neutral[300]};
|
|
51
52
|
justify-self: center;
|
|
52
53
|
`;
|
|
53
|
-
const PrimaryMessage = import_ds_system.styled.
|
|
54
|
+
const PrimaryMessage = (0, import_ds_system.styled)("p", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`
|
|
54
55
|
text-align: center;
|
|
55
56
|
font-weight: bold;
|
|
56
57
|
font-size: ${(props) => (0, import_ds_system.toMobile)(props.theme.fontSizes.value[400])};
|
|
@@ -58,18 +59,21 @@ const PrimaryMessage = import_ds_system.styled.p`
|
|
|
58
59
|
margin-top: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.s)};
|
|
59
60
|
margin-bottom: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xs)};
|
|
60
61
|
`;
|
|
61
|
-
const SecondaryMessage = import_ds_system.styled.
|
|
62
|
+
const SecondaryMessage = (0, import_ds_system.styled)("p", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`
|
|
62
63
|
text-align: center;
|
|
63
64
|
font-size: ${(props) => (0, import_ds_system.toMobile)(props.theme.fontSizes.value[400])}; /* 13px */
|
|
64
65
|
color: ${(props) => props.theme.colors.neutral[500]};
|
|
65
66
|
margin: 0;
|
|
66
67
|
`;
|
|
67
|
-
const Button = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)`
|
|
68
|
+
const Button = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.EMPTY_BUTTON })`
|
|
68
69
|
margin-top: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.m)};
|
|
69
70
|
justify-self: center;
|
|
70
71
|
width: fit-content;
|
|
71
72
|
`;
|
|
72
|
-
const CenterContentFlexWrapper = import_ds_system.styled
|
|
73
|
+
const CenterContentFlexWrapper = (0, import_ds_system.styled)("div", {
|
|
74
|
+
name: import_DSDataTableDefinitions.DSDataTableName,
|
|
75
|
+
slot: import_DSDataTableDefinitions.DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER
|
|
76
|
+
})`
|
|
73
77
|
width: ${({ width }) => width};
|
|
74
78
|
height: 100%;
|
|
75
79
|
display: flex;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/EmptyContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../configs/useStore/useStore.js';\n\nconst EmptyStateWrapper = styled(Grid)`\n position: sticky;\n height: fit-content;\n top: 0;\n left: 0;\n`;\nconst Icon = styled(WarningTriangle)`\n fill: ${(props) => props.theme.colors.neutral[300]};\n color: ${(props) => props.theme.colors.neutral[300]};\n justify-self: center;\n`;\nconst PrimaryMessage = styled.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile, styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { usePropsStore } from '../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\n\nconst EmptyStateWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_STATE_WRAPPER })`\n position: sticky;\n height: fit-content;\n top: 0;\n left: 0;\n`;\nconst Icon = styled(WarningTriangle, { name: DSDataTableName, slot: DSDataTableSlots.WARNING_ICON })`\n fill: ${(props) => props.theme.colors.neutral[300]};\n color: ${(props) => props.theme.colors.neutral[300]};\n justify-self: center;\n`;\nconst PrimaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`\n text-align: center;\n font-weight: bold;\n font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n color: ${(props) => props.theme.colors.neutral[600]};\n margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled('p', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`\n text-align: center;\n font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n color: ${(props) => props.theme.colors.neutral[500]};\n margin: 0;\n`;\nconst Button = styled(DSButtonV2, { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_BUTTON })`\n margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n justify-self: center;\n width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled('div', {\n name: DSDataTableName,\n slot: DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER,\n})<{ width: string }>`\n width: ${({ width }) => width};\n height: 100%;\n display: flex;\n align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType = () => {\n const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n const noResultsButtonLabel = usePropsStore((state) => state.noResultsButtonLabel);\n const onNoResultsButtonClick = usePropsStore((state) => state.onNoResultsButtonClick);\n const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n if (React.isValidElement(noResultsPlaceholder))\n return (\n <CenterContentFlexWrapper width=\"100%\" role=\"row\">\n <EmptyStateWrapper\n width={virtualListRef.current?.clientWidth}\n justifyContent=\"center\"\n role=\"cell\"\n aria-live=\"assertive\"\n >\n {noResultsPlaceholder}\n </EmptyStateWrapper>\n </CenterContentFlexWrapper>\n );\n\n return (\n <CenterContentFlexWrapper width=\"100%\" role=\"row\">\n <EmptyStateWrapper\n width={virtualListRef.current?.clientWidth}\n justifyContent=\"center\"\n role=\"cell\"\n aria-live=\"assertive\"\n >\n <Icon size=\"xxl\" />\n <PrimaryMessage>{noResultsMessage}</PrimaryMessage>\n {noResultsSecondaryMessage ? <SecondaryMessage>{noResultsSecondaryMessage}</SecondaryMessage> : null}\n {noResultsButtonLabel && onNoResultsButtonClick ? (\n <Button buttonType=\"outline\" onClick={onNoResultsButtonClick}>\n {noResultsButtonLabel}\n </Button>\n ) : null}\n </EmptyStateWrapper>\n </CenterContentFlexWrapper>\n );\n};\n\nexport { EmptyContent };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Df;AA3DR,mBAAkB;AAClB,qBAAqB;AACrB,sBAAgC;AAChC,uBAA2D;AAC3D,0BAA2B;AAC3B,sBAA8B;AAC9B,oCAAkD;AAElD,MAAM,wBAAoB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAM5G,MAAM,WAAO,yBAAO,iCAAiB,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,aAAa,CAAC;AAAA,UACzF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,WACxC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAGpD,MAAM,qBAAiB,yBAAO,KAAK,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,sBAAsB,CAAC;AAAA;AAAA;AAAA,eAG3F,CAAC,cAAU,2BAAS,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACpC,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,uBAAmB,yBAAO,KAAK,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,wBAAwB,CAAC;AAAA;AAAA,eAE/F,CAAC,cAAU,2BAAS,MAAM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAGpD,MAAM,aAAS,yBAAO,gCAAY,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,aAAa,CAAC;AAAA,gBAChF,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAAA,WACU,CAAC,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAoC,MAAM;AAC9C,QAAM,2BAAuB,+BAAc,CAAC,UAAU,MAAM,oBAAoB;AAChF,QAAM,uBAAmB,+BAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,gCAA4B,+BAAc,CAAC,UAAU,MAAM,yBAAyB;AAC1F,QAAM,2BAAuB,+BAAc,CAAC,UAAU,MAAM,oBAAoB;AAChF,QAAM,6BAAyB,+BAAc,CAAC,UAAU,MAAM,sBAAsB;AACpF,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,MAAI,aAAAA,QAAM,eAAe,oBAAoB;AAC3C,WACE,4CAAC,4BAAyB,OAAM,QAAO,MAAK,OAC1C;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,eAAe,SAAS;AAAA,QAC/B,gBAAe;AAAA,QACf,MAAK;AAAA,QACL,aAAU;AAAA,QAET;AAAA;AAAA,IACH,GACF;AAGJ,SACE,4CAAC,4BAAyB,OAAM,QAAO,MAAK,OAC1C;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,eAAe,SAAS;AAAA,MAC/B,gBAAe;AAAA,MACf,MAAK;AAAA,MACL,aAAU;AAAA,MAEV;AAAA,oDAAC,QAAK,MAAK,OAAM;AAAA,QACjB,4CAAC,kBAAgB,4BAAiB;AAAA,QACjC,4BAA4B,4CAAC,oBAAkB,qCAA0B,IAAsB;AAAA,QAC/F,wBAAwB,yBACvB,4CAAC,UAAO,YAAW,WAAU,SAAS,wBACnC,gCACH,IACE;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -34,7 +34,8 @@ module.exports = __toCommonJS(styled_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
36
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
|
-
|
|
37
|
+
var import_DSDataTableDefinitions = require("../../DSDataTableDefinitions.js");
|
|
38
|
+
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.FILTER_BAR_WRAPPER })`
|
|
38
39
|
display: flex;
|
|
39
40
|
flex-wrap: wrap;
|
|
40
41
|
width: ${(props) => props.width};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/FilterBar/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\n\nexport const StyledWrapper = styled(Grid)`\n display: flex;\n flex-wrap: wrap;\n width: ${(props) => props.width};\n align-items: center;\n min-height: 33px; // height of the pills\n padding: 0 ${(props) => props.theme.space.xxxs};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAAuB;
|
|
4
|
+
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nexport const StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.FILTER_BAR_WRAPPER })`\n display: flex;\n flex-wrap: wrap;\n width: ${(props) => props.width};\n align-items: center;\n min-height: 33px; // height of the pills\n padding: 0 ${(props) => props.theme.space.xxxs};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAAuB;AACvB,oCAAkD;AAE3C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,mBAAmB,CAAC;AAAA;AAAA;AAAA,WAGnG,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA,eAGb,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|