@elliemae/ds-data-table 3.57.0-next.1 → 3.57.0-next.11
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/addons/Columns/ColumnExpand/ColumnExpand.js +2 -2
- package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js.map +3 -3
- package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +2 -2
- package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +3 -3
- package/dist/cjs/addons/Editables/TextEditableCell/TextEditableCell.js +2 -2
- package/dist/cjs/addons/Editables/TextEditableCell/TextEditableCell.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/FreeTextSearchFilter/index.js +36 -24
- package/dist/cjs/addons/Filters/Components/FreeTextSearchFilter/index.js.map +3 -3
- package/dist/cjs/configs/constants.js +1 -0
- package/dist/cjs/configs/constants.js.map +2 -2
- package/dist/cjs/{DSDataTableDefinitions.js → constants/index.js} +41 -7
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/constants/legacyToBeDeprecated.js +75 -0
- package/dist/cjs/constants/legacyToBeDeprecated.js.map +7 -0
- package/dist/cjs/exported-related/FilterPopover/index.js +20 -8
- package/dist/cjs/exported-related/FilterPopover/index.js.map +3 -3
- package/dist/cjs/exported-related/Toolbar/Toolbar.js +7 -7
- package/dist/cjs/exported-related/Toolbar/Toolbar.js.map +3 -3
- package/dist/cjs/index.js +6 -2
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/parts/DnDHandle.js +4 -4
- package/dist/cjs/parts/DnDHandle.js.map +3 -3
- package/dist/cjs/parts/DropIndicator.js +14 -14
- package/dist/cjs/parts/DropIndicator.js.map +3 -3
- package/dist/cjs/parts/EmptyContent.js +8 -8
- package/dist/cjs/parts/EmptyContent.js.map +2 -2
- package/dist/cjs/parts/FilterBar/styled.js +2 -2
- package/dist/cjs/parts/FilterBar/styled.js.map +2 -2
- package/dist/cjs/parts/Headers/EmptyChildrenGroup.js +2 -2
- package/dist/cjs/parts/Headers/EmptyChildrenGroup.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCellGroup.js +2 -2
- package/dist/cjs/parts/Headers/HeaderCellGroup.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderResizer.js +21 -19
- package/dist/cjs/parts/Headers/useHeaderResizer.js.map +3 -3
- package/dist/cjs/parts/Loader.js +2 -2
- package/dist/cjs/parts/Loader.js.map +2 -2
- package/dist/cjs/parts/Row.js +2 -2
- package/dist/cjs/parts/Row.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +3 -3
- package/dist/cjs/styled.js +43 -43
- package/dist/cjs/styled.js.map +3 -3
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js +1 -1
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js.map +1 -1
- package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +1 -1
- package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +1 -1
- package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js +1 -1
- package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js.map +1 -1
- package/dist/esm/addons/Filters/Components/FreeTextSearchFilter/index.js +34 -22
- package/dist/esm/addons/Filters/Components/FreeTextSearchFilter/index.js.map +2 -2
- package/dist/esm/configs/constants.js +1 -0
- package/dist/esm/configs/constants.js.map +2 -2
- package/dist/esm/constants/index.js +89 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/constants/legacyToBeDeprecated.js +45 -0
- package/dist/esm/constants/legacyToBeDeprecated.js.map +7 -0
- package/dist/esm/exported-related/FilterPopover/index.js +14 -2
- package/dist/esm/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js +1 -1
- package/dist/esm/exported-related/Toolbar/Toolbar.js.map +1 -1
- package/dist/esm/index.js +12 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/parts/DnDHandle.js +1 -1
- package/dist/esm/parts/DnDHandle.js.map +1 -1
- package/dist/esm/parts/DropIndicator.js +1 -1
- package/dist/esm/parts/DropIndicator.js.map +1 -1
- package/dist/esm/parts/EmptyContent.js +1 -1
- package/dist/esm/parts/EmptyContent.js.map +1 -1
- package/dist/esm/parts/FilterBar/styled.js +1 -1
- package/dist/esm/parts/FilterBar/styled.js.map +1 -1
- package/dist/esm/parts/Headers/EmptyChildrenGroup.js +1 -1
- package/dist/esm/parts/Headers/EmptyChildrenGroup.js.map +1 -1
- package/dist/esm/parts/Headers/HeaderCellGroup.js +1 -1
- package/dist/esm/parts/Headers/HeaderCellGroup.js.map +1 -1
- package/dist/esm/parts/Headers/useHeaderResizer.js +21 -19
- package/dist/esm/parts/Headers/useHeaderResizer.js.map +3 -3
- package/dist/esm/parts/Loader.js +1 -1
- package/dist/esm/parts/Loader.js.map +1 -1
- package/dist/esm/parts/Row.js +1 -1
- package/dist/esm/parts/Row.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +5 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/types/configs/constants.d.ts +1 -0
- package/dist/types/constants/index.d.ts +269 -0
- package/dist/types/constants/legacyToBeDeprecated.d.ts +38 -0
- package/dist/types/index.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderResizer.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +5 -59
- package/dist/types/tests/DSDataTable.exports.test.d.ts +1 -0
- package/dist/types/tests/data-testid/DSDataTable.data-testid.test.d.ts +1 -0
- package/dist/types/tests/data-testid/Renderers.d.ts +36 -0
- package/package.json +30 -30
- package/dist/cjs/DSDataTableDefinitions.js.map +0 -7
- package/dist/esm/DSDataTableDefinitions.js +0 -55
- package/dist/esm/DSDataTableDefinitions.js.map +0 -7
- package/dist/types/DSDataTableDefinitions.d.ts +0 -91
|
@@ -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 type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../
|
|
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 type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.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 StyledPoppoverJS = styled(DSPopperJS, {\n name: DSDataTableName,\n slot: DSDataTableSlots.FILTER_POPOVER,\n})``;\n\nconst ButtonTrap = ({ cb }: { cb: () => void }) => (\n <span\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n cb();\n }}\n />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;\n\n const filters = usePropsStore((state) => state.filters);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n }),\n [column.id],\n );\n\n const patchHeader = useInternalStore((state) => state.patchHeader);\n\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const buttonTrapCallback = useCallback(() => {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n buttonReference?.focus();\n }, [columnId, patchHeader, buttonReference]);\n\n const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n update: null,\n });\n\n useEffect(() => {\n // When the filters change, we need to update the popper position,\n // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n void actionRef.current.update?.();\n }, [filters]);\n\n return (\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={handleMenuOnKeyDown}\n >\n <FilterButton\n hide={!isIconVisible}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n getOwnerProps={getOwnerProps}\n >\n <DSButtonV2\n buttonType=\"icon\"\n size=\"s\"\n onClick={handleTriggerClick}\n onFocus={handleTriggerOnFocus}\n onBlur={handleTriggerOnBlur}\n innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n aria-label={ariaLabel}\n aria-hidden={!isButtonFocused}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n >\n {triggerIcon}\n </DSButtonV2>\n </FilterButton>\n {buttonReference && (\n <StyledPoppoverJS\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 getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <PopperContent getOwnerProps={getOwnerProps}>\n <ButtonTrap cb={buttonTrapCallback} />\n {menuContent}\n <ButtonTrap cb={buttonTrapCallback} />\n </PopperContent>\n </StyledPoppoverJS>\n )}\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_constants"]
|
|
7
7
|
}
|
|
@@ -38,10 +38,10 @@ var import_ds_icons = require("@elliemae/ds-icons");
|
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
var import_react = require("react");
|
|
40
40
|
var import_use_onclickoutside = __toESM(require("use-onclickoutside"));
|
|
41
|
-
var
|
|
42
|
-
var
|
|
41
|
+
var import_constants = require("../../constants/index.js");
|
|
42
|
+
var import_constants2 = require("../../configs/constants.js");
|
|
43
43
|
var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
|
|
44
|
-
const ToolbarBtns = (0, import_ds_system.styled)("div", { name:
|
|
44
|
+
const ToolbarBtns = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;
|
|
45
45
|
const boxShadow = import_ds_system.css`
|
|
46
46
|
box-shadow:
|
|
47
47
|
0 1px 2px 0 rgba(0, 0, 0, 0.13),
|
|
@@ -50,7 +50,7 @@ const boxShadow = import_ds_system.css`
|
|
|
50
50
|
border: none;
|
|
51
51
|
}
|
|
52
52
|
`;
|
|
53
|
-
const ToolbarWrapper = (0, import_ds_system.styled)("div", { name:
|
|
53
|
+
const ToolbarWrapper = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.TOOLBAR_WRAPPER })`
|
|
54
54
|
display: flex;
|
|
55
55
|
align-items: center;
|
|
56
56
|
pointer-events: all;
|
|
@@ -61,10 +61,10 @@ const ToolbarWrapper = (0, import_ds_system.styled)("div", { name: import_DSData
|
|
|
61
61
|
|
|
62
62
|
${({ isOpen }) => isOpen && boxShadow}
|
|
63
63
|
`;
|
|
64
|
-
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name:
|
|
64
|
+
const StyledButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.TOOLBAR_BUTTON })`
|
|
65
65
|
background-color: transparent;
|
|
66
66
|
`;
|
|
67
|
-
const ToolbarPosition = (0, import_ds_system.styled)("div", { name:
|
|
67
|
+
const ToolbarPosition = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.TOOLBAR_POSITION })`
|
|
68
68
|
display: flex;
|
|
69
69
|
justify-content: flex-end;
|
|
70
70
|
align-items: center;
|
|
@@ -127,7 +127,7 @@ const Toolbar = ({ isRowSelected, cell, children }) => {
|
|
|
127
127
|
{
|
|
128
128
|
buttonType: "icon",
|
|
129
129
|
className: "toolbar-trigger",
|
|
130
|
-
"data-testid":
|
|
130
|
+
"data-testid": import_constants2.DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
|
|
131
131
|
innerRef: (0, import_ds_system.mergeRefs)(toolbarTriggerRef, cell?.ref),
|
|
132
132
|
onClick: handleOnClick,
|
|
133
133
|
tabIndex: isRowSelected === false ? -1 : 0,
|
|
@@ -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": ["/* eslint-disable import/no-cycle */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2GjB;AA1GN,0BAA2B;AAC3B,sBAAgC;AAChC,uBAAuC;AACvC,mBAAqD;AACrD,gCAA8B;AAC9B,
|
|
6
|
-
"names": ["useOnClickOutside"]
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport useOnClickOutside from 'use-onclickoutside';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/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';\n\nconst ToolbarBtns = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTONS_WRAPPER })``;\n\nconst boxShadow = css`\n box-shadow:\n 0 1px 2px 0 rgba(0, 0, 0, 0.13),\n 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n`;\n\nconst ToolbarWrapper = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_WRAPPER })<{\n isOpen: boolean;\n}>`\n display: flex;\n align-items: center;\n pointer-events: all;\n\n & .toolbar-trigger:focus {\n z-index: 8;\n }\n\n ${({ isOpen }) => isOpen && boxShadow}\n`;\n\nconst StyledButton = styled(DSButtonV3, { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_BUTTON })`\n background-color: transparent;\n`;\n\nconst ToolbarPosition = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.TOOLBAR_POSITION })`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: transparent;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 1px;\n padding-right: 1px;\n outline: none;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: neutral-080;\n z-index: 7;\n }\n`;\n\ninterface ToolbarProps {\n isRowSelected?: boolean;\n cell: DSDataTableT.Cell;\n children: React.ReactNode;\n}\n\nexport const Toolbar: React.ComponentType<ToolbarProps> = ({ isRowSelected, cell, children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef<HTMLDivElement | null>(null);\n const toolbarTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow((prev) => !prev), []);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const stopPropagation: React.MouseEventHandler = useCallback((e) => e.stopPropagation(), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTriggerRef.current?.focus();\n }\n e.stopPropagation();\n }, []);\n\n const handleOnBlurToolBar = useCallback(() => {\n setTimeout(() => {\n if (!toolbarRef?.current?.contains?.(document.activeElement)) {\n setShow(false);\n }\n });\n }, []);\n\n return (\n <ToolbarPosition onBlur={handleOnBlurToolBar} innerRef={toolbarRef} tabIndex={-1} getOwnerProps={getOwnerProps}>\n <ToolbarWrapper\n onKeyDown={onToolbarKeyDown}\n onClick={stopPropagation}\n isOpen={show}\n getOwnerProps={getOwnerProps}\n >\n {show && <ToolbarBtns getOwnerProps={getOwnerProps}>{children}</ToolbarBtns>}\n <StyledButton\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={mergeRefs(toolbarTriggerRef, cell?.ref)}\n onClick={handleOnClick}\n tabIndex={isRowSelected === false ? -1 : 0}\n aria-label=\"Row actions\"\n >\n <MoreOptionsVert />\n </StyledButton>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2GjB;AA1GN,0BAA2B;AAC3B,sBAAgC;AAChC,uBAAuC;AACvC,mBAAqD;AACrD,gCAA8B;AAC9B,uBAAkD;AAClD,IAAAA,oBAA4B;AAC5B,2CAA8B;AAG9B,MAAM,kBAAc,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,wBAAwB,CAAC;AAE3G,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlB,MAAM,qBAAiB,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWlG,CAAC,EAAE,OAAO,MAAM,UAAU,SAAS;AAAA;AAGvC,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,eAAe,CAAC;AAAA;AAAA;AAIxG,MAAM,sBAAkB,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,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;AAAA;AAiCjG,MAAM,UAA6C,CAAC,EAAE,eAAe,MAAM,SAAS,MAAM;AAC/F,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AAEtC,QAAM,iBAAa,qBAA8B,IAAI;AACrD,QAAM,wBAAoB,qBAAiC,IAAI;AAE/D,QAAM,2BAAuB,0BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,oBAAgB,0BAAY,MAAM,QAAQ,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,CAAC;AAEpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,sBAA2C,0BAAY,CAAC,MAAM,EAAE,gBAAgB,GAAG,CAAC,CAAC;AAE3F,gCAAAC,SAAkB,YAAY,oBAAoB;AAElD,QAAM,uBAAmB,0BAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,wBAAkB,SAAS,MAAM;AAAA,IACnC;AACA,MAAE,gBAAgB;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,eAAW,MAAM;AACf,UAAI,CAAC,YAAY,SAAS,WAAW,SAAS,aAAa,GAAG;AAC5D,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SACE,4CAAC,mBAAgB,QAAQ,qBAAqB,UAAU,YAAY,UAAU,IAAI,eAChF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MAEC;AAAA,gBAAQ,4CAAC,eAAY,eAA+B,UAAS;AAAA,QAC9D;AAAA,UAAC;AAAA;AAAA,YACC,YAAW;AAAA,YACX,WAAU;AAAA,YACV,eAAa,8BAAY;AAAA,YACzB,cAAU,4BAAU,mBAAmB,MAAM,GAAG;AAAA,YAChD,SAAS;AAAA,YACT,UAAU,kBAAkB,QAAQ,KAAK;AAAA,YACzC,cAAW;AAAA,YAEX,sDAAC,mCAAgB;AAAA;AAAA,QACnB;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
|
|
6
|
+
"names": ["import_constants", "useOnClickOutside"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
21
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
22
|
// file that has been converted to a CommonJS file using a Babel-
|
|
@@ -29,6 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
29
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
29
|
var index_exports = {};
|
|
31
30
|
__export(index_exports, {
|
|
31
|
+
DATA_TABLE_DATA_TESTID: () => import_constants.DATA_TABLE_DATA_TESTID,
|
|
32
|
+
DATA_TABLE_SLOTS: () => import_constants.DATA_TABLE_SLOTS,
|
|
33
|
+
DSDataTableDataTestIds: () => import_constants.DSDataTableDataTestIds,
|
|
34
|
+
DSDataTableName: () => import_constants.DSDataTableName,
|
|
35
|
+
DSDataTableSlots: () => import_constants.DSDataTableSlots,
|
|
32
36
|
DataTable: () => import_DataTable.DataTable,
|
|
33
37
|
DataTableWithSchema: () => import_DataTable.DataTableWithSchema,
|
|
34
38
|
EditableCell: () => import_exported_related.EditableCell,
|
|
@@ -63,5 +67,5 @@ var import_DataTable = require("./DataTable.js");
|
|
|
63
67
|
var import_exported_related = require("./exported-related/index.js");
|
|
64
68
|
var import_Columns = require("./addons/Columns/index.js");
|
|
65
69
|
var import_useStore = require("./configs/useStore/useStore.js");
|
|
66
|
-
|
|
70
|
+
var import_constants = require("./constants/index.js");
|
|
67
71
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export { DataTable, DataTableWithSchema } from './DataTable.js';\n\nexport {\n FilterPopover,\n EditableCell,\n Toolbar,\n groupBy,\n FILTER_TYPES,\n ROW_VARIANTS,\n ROW_VARIANT_KEY,\n ROW_VARIANT_COMPACT_KEY,\n applyOutOfTheBoxFilters,\n singleDateFilterFn,\n singleSelectFilterFn,\n multiSelectFilterFn,\n numberRangeFilterFn,\n currencyRangeFilterFn,\n dateRangeFilterFn,\n FilterBarDropdownMenu,\n SkeletonCell,\n SkeletonHeaderCell,\n} from './exported-related/index.js';\n\nexport {\n actionColumn,\n expandRowColumn,\n multiSelectColumn,\n singleSelectColumn,\n dragHandleColumn,\n INTERNAL_COLUMNS,\n} from './addons/Columns/index.js';\n\nexport type { DSDataTableT } from './react-desc-prop-types.js';\n\nexport { useWholeStore } from './configs/useStore/useStore.js';\n\nexport
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export { DataTable, DataTableWithSchema } from './DataTable.js';\n\nexport {\n FilterPopover,\n EditableCell,\n Toolbar,\n groupBy,\n FILTER_TYPES,\n ROW_VARIANTS,\n ROW_VARIANT_KEY,\n ROW_VARIANT_COMPACT_KEY,\n applyOutOfTheBoxFilters,\n singleDateFilterFn,\n singleSelectFilterFn,\n multiSelectFilterFn,\n numberRangeFilterFn,\n currencyRangeFilterFn,\n dateRangeFilterFn,\n FilterBarDropdownMenu,\n SkeletonCell,\n SkeletonHeaderCell,\n} from './exported-related/index.js';\n\nexport {\n actionColumn,\n expandRowColumn,\n multiSelectColumn,\n singleSelectColumn,\n dragHandleColumn,\n INTERNAL_COLUMNS,\n} from './addons/Columns/index.js';\n\nexport type { DSDataTableT } from './react-desc-prop-types.js';\n\nexport { useWholeStore } from './configs/useStore/useStore.js';\n\nexport {\n DATA_TABLE_DATA_TESTID,\n DATA_TABLE_SLOTS,\n DSDataTableDataTestIds,\n DSDataTableName,\n DSDataTableSlots,\n} from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA+C;AAE/C,8BAmBO;AAEP,qBAOO;AAIP,sBAA8B;AAE9B,uBAMO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,10 +38,10 @@ var import_ds_icons = require("@elliemae/ds-icons");
|
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
var import_react2 = require("react");
|
|
40
40
|
var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
|
|
41
|
-
var
|
|
42
|
-
var
|
|
41
|
+
var import_constants = require("../constants/index.js");
|
|
42
|
+
var import_constants2 = require("../configs/constants.js");
|
|
43
43
|
var import_SortableItemContext = require("./HoC/SortableItemContext.js");
|
|
44
|
-
const StyledGripperButton = (0, import_ds_system.styled)("div", { name:
|
|
44
|
+
const StyledGripperButton = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.DRAG_AND_DROP_GRIPPER })`
|
|
45
45
|
pointer-events: ${({ isDisabled }) => isDisabled ? "none" : ""};
|
|
46
46
|
cursor: ${({ isActive, isDragOverlay, isDisabled }) => {
|
|
47
47
|
if (isDisabled) return "not-allowed";
|
|
@@ -75,7 +75,7 @@ const DragHandle = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) =>
|
|
|
75
75
|
isDragOverlay,
|
|
76
76
|
innerRef: (0, import_ds_system.mergeRefs)(innerRef, setActivatorNodeRef),
|
|
77
77
|
tabIndex: isReachable ? 0 : -1,
|
|
78
|
-
"data-testid":
|
|
78
|
+
"data-testid": import_constants2.DATA_TESTID.DATA_TABLE_DRAG_HANDLE,
|
|
79
79
|
id: `drag-handle-btn-${id}`,
|
|
80
80
|
key: `${id}-drag-handle`,
|
|
81
81
|
"aria-label": "Drag handle",
|
|
@@ -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 { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AAnBF;AA7CJ,sBAAgC;AAChC,uBAAkC;AAClC,IAAAA,gBAAkC;AAClC,2CAA8B;AAC9B,
|
|
6
|
-
"names": ["import_react"]
|
|
4
|
+
"sourcesContent": ["import { GripperVertical } from '@elliemae/ds-icons';\nimport { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\n\nconst StyledGripperButton = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.DRAG_AND_DROP_GRIPPER })<{\n isActive: boolean;\n isDragOverlay?: boolean;\n isDisabled?: boolean;\n isDragging: boolean;\n}>`\n pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : '')};\n cursor: ${({ isActive, isDragOverlay, isDisabled }) => {\n if (isDisabled) return 'not-allowed';\n if (isActive || isDragOverlay) return 'grabbing';\n return 'grab';\n }};\n outline: none;\n display: flex;\n align-items: center;\n touch-action: none;\n\n svg {\n fill: ${({ isDragging, theme }) => isDragging && theme.colors.neutral['500']};\n }\n`;\n\nexport const DragHandle: React.ComponentType<{\n id: string;\n isReachable: boolean;\n isDragOverlay?: boolean;\n isDisabled?: boolean;\n innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef, isDisabled }) => {\n const { draggableProps } = useContext(SortableItemContext);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const isActive = draggableProps && !!draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n const setActivatorNodeRef = draggableProps && draggableProps.setActivatorNodeRef;\n\n return (\n <StyledGripperButton\n role=\"button\"\n {...(draggableProps &&\n !isDisabled && {\n ...draggableProps.listeners,\n ...draggableProps.attributes,\n })}\n isActive={isActive}\n isDragOverlay={isDragOverlay}\n innerRef={mergeRefs(innerRef, setActivatorNodeRef)}\n tabIndex={isReachable ? 0 : -1}\n data-testid={DATA_TESTID.DATA_TABLE_DRAG_HANDLE}\n id={`drag-handle-btn-${id}`} // the domIdAffix should already be part of the props.id...\n key={`${id}-drag-handle`}\n aria-label=\"Drag handle\"\n isDragging={isDragging}\n isDisabled={isDisabled}\n getOwnerProps={getOwnerProps}\n >\n <GripperVertical size=\"s\" />\n </StyledGripperButton>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEjB;AAnBF;AA7CJ,sBAAgC;AAChC,uBAAkC;AAClC,IAAAA,gBAAkC;AAClC,2CAA8B;AAC9B,uBAAkD;AAClD,IAAAC,oBAA4B;AAC5B,iCAAoC;AAEpC,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,sBAAsB,CAAC;AAAA,oBAM7F,CAAC,EAAE,WAAW,MAAO,aAAa,SAAS,EAAG;AAAA,YACtD,CAAC,EAAE,UAAU,eAAe,WAAW,MAAM;AACrD,MAAI,WAAY,QAAO;AACvB,MAAI,YAAY,cAAe,QAAO;AACtC,SAAO;AACT,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOS,CAAC,EAAE,YAAY,MAAM,MAAM,cAAc,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAIzE,MAAM,aAMR,CAAC,EAAE,IAAI,aAAa,eAAe,UAAU,WAAW,MAAM;AACjE,QAAM,EAAE,eAAe,QAAI,0BAAW,8CAAmB;AACzD,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AACpD,QAAM,sBAAsB,kBAAkB,eAAe;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,kBACH,CAAC,cAAc;AAAA,QACb,GAAG,eAAe;AAAA,QAClB,GAAG,eAAe;AAAA,MACpB;AAAA,MACF;AAAA,MACA;AAAA,MACA,cAAU,4BAAU,UAAU,mBAAmB;AAAA,MACjD,UAAU,cAAc,IAAI;AAAA,MAC5B,eAAa,8BAAY;AAAA,MACzB,IAAI,mBAAmB,EAAE;AAAA,MACzB,KAAK,GAAG,EAAE;AAAA,MACV,cAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,4CAAC,mCAAgB,MAAK,KAAI;AAAA,EAC5B;AAEJ;",
|
|
6
|
+
"names": ["import_react", "import_constants"]
|
|
7
7
|
}
|
|
@@ -34,34 +34,34 @@ module.exports = __toCommonJS(DropIndicator_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
|
-
var
|
|
38
|
-
var
|
|
37
|
+
var import_constants = require("../constants/index.js");
|
|
38
|
+
var import_constants2 = require("../configs/constants.js");
|
|
39
39
|
var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
|
|
40
40
|
var import_zIndexInternalConfig = require("../configs/zIndexInternalConfig.js");
|
|
41
41
|
const getPositionStyles = ({ dropIndicatorPosition, vertical }) => {
|
|
42
42
|
if (vertical) {
|
|
43
43
|
return `
|
|
44
|
-
left: ${dropIndicatorPosition ===
|
|
45
|
-
right: ${dropIndicatorPosition ===
|
|
44
|
+
left: ${dropIndicatorPosition === import_constants2.DropIndicatorPosition.Before ? "0" : "unset"};
|
|
45
|
+
right: ${dropIndicatorPosition === import_constants2.DropIndicatorPosition.After ? "0" : "unset"};
|
|
46
46
|
`;
|
|
47
47
|
}
|
|
48
48
|
return `
|
|
49
|
-
top: ${dropIndicatorPosition ===
|
|
50
|
-
bottom: ${dropIndicatorPosition ===
|
|
49
|
+
top: ${dropIndicatorPosition === import_constants2.DropIndicatorPosition.Before ? "0" : "unset"};
|
|
50
|
+
bottom: ${dropIndicatorPosition === import_constants2.DropIndicatorPosition.After ? "0" : "unset"};
|
|
51
51
|
`;
|
|
52
52
|
};
|
|
53
53
|
const getCircleStyles = ({ dropIndicatorPosition, vertical }) => ({
|
|
54
54
|
position: "absolute",
|
|
55
55
|
zIndex: import_zIndexInternalConfig.ZIndexDataTable.DROP_INDICATOR,
|
|
56
|
-
top: vertical || dropIndicatorPosition ===
|
|
57
|
-
bottom: vertical || dropIndicatorPosition ===
|
|
58
|
-
left: !vertical || dropIndicatorPosition ===
|
|
59
|
-
right: !vertical || dropIndicatorPosition ===
|
|
56
|
+
top: vertical || dropIndicatorPosition === import_constants2.DropIndicatorPosition.After ? "unset" : "-2px",
|
|
57
|
+
bottom: vertical || dropIndicatorPosition === import_constants2.DropIndicatorPosition.Before ? "unset" : "-2px",
|
|
58
|
+
left: !vertical || dropIndicatorPosition === import_constants2.DropIndicatorPosition.After ? "unset" : "-2px",
|
|
59
|
+
right: !vertical || dropIndicatorPosition === import_constants2.DropIndicatorPosition.Before ? "unset" : "-2px",
|
|
60
60
|
opacity: 1
|
|
61
61
|
});
|
|
62
62
|
const StyledIndicator = (0, import_ds_system.styled)("div", {
|
|
63
|
-
name:
|
|
64
|
-
slot:
|
|
63
|
+
name: import_constants.DSDataTableName,
|
|
64
|
+
slot: import_constants.DSDataTableSlots.DROP_INDICATOR
|
|
65
65
|
})`
|
|
66
66
|
position: absolute;
|
|
67
67
|
${getPositionStyles}
|
|
@@ -75,9 +75,9 @@ const CircleIndicator = (style, isDropValid) => /* @__PURE__ */ (0, import_jsx_r
|
|
|
75
75
|
const DropIndicator = (props) => {
|
|
76
76
|
const { vertical, dropIndicatorPosition, isLast, isDropValid } = props;
|
|
77
77
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
78
|
-
if (dropIndicatorPosition === false || dropIndicatorPosition ===
|
|
78
|
+
if (dropIndicatorPosition === false || dropIndicatorPosition === import_constants2.DropIndicatorPosition.None || dropIndicatorPosition === import_constants2.DropIndicatorPosition.Inside)
|
|
79
79
|
return null;
|
|
80
|
-
const safeDropIndicatorPosition = isLast ?
|
|
80
|
+
const safeDropIndicatorPosition = isLast ? import_constants2.DropIndicatorPosition.Before : dropIndicatorPosition;
|
|
81
81
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
82
82
|
CircleIndicator(getCircleStyles({ ...props, dropIndicatorPosition: safeDropIndicatorPosition }), isDropValid),
|
|
83
83
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -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 { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDnB;AArDJ,uBAAuB;AAEvB,
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\nimport { DropIndicatorPosition } from '../configs/constants.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig.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('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 const getOwnerProps = usePropsStore((store) => store.get);\n\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 getOwnerProps={getOwnerProps}\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;ADqDnB;AArDJ,uBAAuB;AAEvB,uBAAkD;AAClD,IAAAA,oBAAsC;AACtC,2CAA8B;AAC9B,kCAAgC;AAUhC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,SAAS,MAA0B;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,wCAAsB,SAAS,MAAM,OAAO;AAAA,eACrE,0BAA0B,wCAAsB,QAAQ,MAAM,OAAO;AAAA;AAAA,EAElF;AACA,SAAO;AAAA,aACI,0BAA0B,wCAAsB,SAAS,MAAM,OAAO;AAAA,gBACnE,0BAA0B,wCAAsB,QAAQ,MAAM,OAAO;AAAA;AAErF;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,SAAS,OAA2B;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,4CAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,wCAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,wCAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,wCAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,wCAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA,IAEG,iBAAiB;AAAA;AAAA,WAEV,CAAC,UAAW,MAAM,WAAW,QAAQ,MAAO;AAAA,YAC3C,CAAC,UAAW,MAAM,WAAW,SAAS,KAAM;AAAA,sBAClC,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,OAAO,GAAG,CAAE;AAAA,aACvG,4CAAgB,cAAc;AAAA;AAG3C,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,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,MACE,0BAA0B,SAC1B,0BAA0B,wCAAsB,QAChD,0BAA0B,wCAAsB;AAEhD,WAAO;AAET,QAAM,4BAA4B,SAAS,wCAAsB,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,QACA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
|
|
6
|
+
"names": ["import_constants"]
|
|
7
7
|
}
|
|
@@ -39,13 +39,13 @@ var import_ds_icons = require("@elliemae/ds-icons");
|
|
|
39
39
|
var import_ds_system = require("@elliemae/ds-system");
|
|
40
40
|
var import_react = __toESM(require("react"));
|
|
41
41
|
var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
|
|
42
|
-
var
|
|
43
|
-
const Icon = (0, import_ds_system.styled)(import_ds_icons.WarningTriangle, { name:
|
|
42
|
+
var import_constants = require("../constants/index.js");
|
|
43
|
+
const Icon = (0, import_ds_system.styled)(import_ds_icons.WarningTriangle, { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.WARNING_ICON })`
|
|
44
44
|
fill: ${(props) => props.theme.colors.neutral[300]};
|
|
45
45
|
color: ${(props) => props.theme.colors.neutral[300]};
|
|
46
46
|
justify-self: center;
|
|
47
47
|
`;
|
|
48
|
-
const PrimaryMessage = (0, import_ds_system.styled)("p", { name:
|
|
48
|
+
const PrimaryMessage = (0, import_ds_system.styled)("p", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.EMPTY_PRIMARY_MESSAGE })`
|
|
49
49
|
text-align: center;
|
|
50
50
|
font-weight: bold;
|
|
51
51
|
font-size: ${(props) => (0, import_ds_system.toMobile)(props.theme.fontSizes.value[400])};
|
|
@@ -53,13 +53,13 @@ const PrimaryMessage = (0, import_ds_system.styled)("p", { name: import_DSDataTa
|
|
|
53
53
|
margin-top: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.s)};
|
|
54
54
|
margin-bottom: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xs)};
|
|
55
55
|
`;
|
|
56
|
-
const SecondaryMessage = (0, import_ds_system.styled)("p", { name:
|
|
56
|
+
const SecondaryMessage = (0, import_ds_system.styled)("p", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.EMPTY_SECONDARY_MESSAGE })`
|
|
57
57
|
text-align: center;
|
|
58
58
|
font-size: ${(props) => (0, import_ds_system.toMobile)(props.theme.fontSizes.value[400])}; /* 13px */
|
|
59
59
|
color: ${(props) => props.theme.colors.neutral[500]};
|
|
60
60
|
margin: 0;
|
|
61
61
|
`;
|
|
62
|
-
const Button = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name:
|
|
62
|
+
const Button = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.EMPTY_BUTTON })`
|
|
63
63
|
margin-top: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.m)};
|
|
64
64
|
justify-self: center;
|
|
65
65
|
width: fit-content;
|
|
@@ -82,15 +82,15 @@ const EmptyStateContent = () => {
|
|
|
82
82
|
] });
|
|
83
83
|
};
|
|
84
84
|
const CenterContentFlexWrapper = (0, import_ds_system.styled)("div", {
|
|
85
|
-
name:
|
|
86
|
-
slot:
|
|
85
|
+
name: import_constants.DSDataTableName,
|
|
86
|
+
slot: import_constants.DSDataTableSlots.CENTER_CONTENT_FLEX_WRAPPER
|
|
87
87
|
})`
|
|
88
88
|
width: ${({ width }) => width};
|
|
89
89
|
height: 100%;
|
|
90
90
|
display: flex;
|
|
91
91
|
align-items: center;
|
|
92
92
|
`;
|
|
93
|
-
const EmptyStateWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
93
|
+
const EmptyStateWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.EMPTY_STATE_WRAPPER })`
|
|
94
94
|
position: sticky;
|
|
95
95
|
height: fit-content;
|
|
96
96
|
top: 0;
|
|
@@ -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 { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+CnB;AA/CJ,0BAA2B;AAC3B,qBAAqB;AACrB,sBAAgC;AAChC,uBAA2D;AAC3D,mBAAkB;AAClB,2CAA8B;AAC9B,
|
|
4
|
+
"sourcesContent": ["import { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, styled, toMobile } from '@elliemae/ds-system';\nimport React from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../constants/index.js';\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`;\n\nconst EmptyStateContent = () => {\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 isSkeleton = usePropsStore((state) => state.isSkeleton);\n const noResultsPlaceholder = usePropsStore((state) => state.noResultsPlaceholder);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n if (isSkeleton) return null;\n\n if (React.isValidElement(noResultsPlaceholder)) return noResultsPlaceholder;\n\n return (\n <>\n <Icon size=\"xxl\" />\n <PrimaryMessage getOwnerProps={getOwnerProps}>{noResultsMessage}</PrimaryMessage>\n {noResultsSecondaryMessage ? (\n <SecondaryMessage getOwnerProps={getOwnerProps}>{noResultsSecondaryMessage}</SecondaryMessage>\n ) : null}\n {noResultsButtonLabel && onNoResultsButtonClick ? (\n <Button buttonType=\"outline\" onClick={onNoResultsButtonClick}>\n {noResultsButtonLabel}\n </Button>\n ) : null}\n </>\n );\n};\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`;\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`;\n\nconst EmptyContent: React.ComponentType = () => {\n const getOwnerProps = usePropsStore((store) => store.get);\n const bodyClientWidth = usePropsStore((state) => state.bodyClientWidth);\n\n return (\n <CenterContentFlexWrapper width=\"100%\" role=\"row\" getOwnerProps={getOwnerProps}>\n <EmptyStateWrapper\n width={bodyClientWidth}\n justifyContent=\"center\"\n role=\"cell\"\n aria-live=\"assertive\"\n getOwnerProps={getOwnerProps}\n >\n <EmptyStateContent />\n </EmptyStateWrapper>\n </CenterContentFlexWrapper>\n );\n};\n\nexport { EmptyContent };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -34,8 +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
|
-
var
|
|
38
|
-
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
37
|
+
var import_constants = require("../../constants/index.js");
|
|
38
|
+
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.FILTER_BAR_WRAPPER })`
|
|
39
39
|
display: flex;
|
|
40
40
|
flex-wrap: wrap;
|
|
41
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';\nimport { DSDataTableName, DSDataTableSlots } from '../../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,qBAAqB;AACrB,uBAAuB;AACvB,
|
|
4
|
+
"sourcesContent": ["import { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.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,uBAAkD;AAE3C,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,mBAAmB,CAAC;AAAA;AAAA;AAAA,WAGnG,CAAC,UAAU,MAAM,KAAK;AAAA;AAAA;AAAA,eAGlB,CAAC,UAAU,MAAM,MAAM,MAAM,IAAI;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,9 +34,9 @@ module.exports = __toCommonJS(EmptyChildrenGroup_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
37
|
-
var
|
|
37
|
+
var import_constants = require("../../constants/index.js");
|
|
38
38
|
var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
|
|
39
|
-
const StyledBox = (0, import_ds_system.styled)("div", { name:
|
|
39
|
+
const StyledBox = (0, import_ds_system.styled)("div", { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.EMPTY_HEADER })`
|
|
40
40
|
height: 24px;
|
|
41
41
|
margin: 0 ${(props) => props.theme.space.xxs};
|
|
42
42
|
border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/EmptyChildrenGroup.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADad;AAbT,uBAAuB;AAEvB,
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledBox = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.EMPTY_HEADER })`\n height: 24px;\n margin: 0 ${(props) => props.theme.space.xxs};\n border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};\n`;\n\nexport const EmptyChildrenGroup: React.ComponentType<Record<string, never>> = () => {\n const getOwnerProps = usePropsStore((store) => store.get);\n return <StyledBox getOwnerProps={getOwnerProps} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADad;AAbT,uBAAuB;AAEvB,uBAAkD;AAClD,2CAA8B;AAE9B,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,kCAAiB,MAAM,kCAAiB,aAAa,CAAC;AAAA;AAAA,cAEhF,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA,0BACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG7D,MAAM,qBAAiE,MAAM;AAClF,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,SAAO,4CAAC,aAAU,eAA8B;AAClD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
37
37
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
var import_react = require("react");
|
|
40
|
-
var
|
|
40
|
+
var import_constants = require("../../constants/index.js");
|
|
41
41
|
var import_configs = require("../../configs/index.js");
|
|
42
42
|
var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
|
|
43
43
|
var import_DropIndicator = require("../DropIndicator.js");
|
|
@@ -46,7 +46,7 @@ var import_withDnDSortableColumnContext = require("../HoC/withDnDSortableColumnC
|
|
|
46
46
|
var import_SortableHeaderCell = require("../SortableHeaderCell.js");
|
|
47
47
|
var import_EmptyChildrenGroup = require("./EmptyChildrenGroup.js");
|
|
48
48
|
var import_HeaderCell = require("./HeaderCell.js");
|
|
49
|
-
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
|
|
49
|
+
const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSDataTableName, slot: import_constants.DSDataTableSlots.HEADER_CELL_WRAPPER })`
|
|
50
50
|
position: relative;
|
|
51
51
|
${({ shouldDropOneLevel, isDragOverlay }) => shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : ""}
|
|
52
52
|
width: ${(props) => props.isDragOverlay ? "fit-content" : "100%"};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/HeaderCellGroup.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqEnB;AAnEJ,qBAAqB;AACrB,uBAAuB;AACvB,mBAAkC;AAClC,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport React, { useContext } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../../constants/index.js';\nimport { DATA_TESTID } from '../../configs/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DropIndicator } from '../DropIndicator.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup.js';\nimport { HeaderCell } from './HeaderCell.js';\n\nconst StyledWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.HEADER_CELL_WRAPPER })<{\n shouldDropOneLevel: boolean;\n isDragOverlay?: boolean;\n isDragging?: boolean;\n isFirst?: boolean;\n isLast?: boolean;\n gridColumn: string;\n}>`\n position: relative;\n ${({ shouldDropOneLevel, isDragOverlay }) => (shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '')}\n width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n grid-column: ${(props) => props.gridColumn};\n background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n border-right: ${({ isLast }) => (isLast ? '1px' : '0px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n header: DSDataTableT.InternalColumn;\n isDragOverlay?: boolean;\n isDraggingParent?: boolean;\n isLast?: boolean;\n isFirst?: boolean;\n level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n header,\n isDragOverlay,\n isDraggingParent,\n isLast,\n isFirst,\n level = 0,\n}) => {\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n const children = header.columns;\n\n const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n const colSpan = children?.length ?? 1;\n return (\n <StyledWrapper\n innerRef={draggableProps ? draggableProps.setNodeRef : undefined}\n gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n isDragOverlay={isDragOverlay}\n isDragging={isDragging}\n cols={['auto']}\n data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n isFirst={isFirst}\n isLast={isLast}\n shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n getOwnerProps={getOwnerProps}\n >\n <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n {!!children?.length && !isDragOverlay && (\n <SortableHeaderCell isGroup items={children} isDragOverlay={isDragOverlay} colId={header.id}>\n {children.map((h, index) => (\n <ChildGroup\n key={h.id}\n header={h}\n isDragOverlay={isDragOverlay}\n isDraggingParent={isDragging}\n isLast={index === children.length - 1}\n isFirst={index === 0}\n level={level + 1}\n />\n ))}\n </SortableHeaderCell>\n )}\n {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} isDropValid />\n </StyledWrapper>\n );\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nexport const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|