@elliemae/ds-data-table 3.1.0-next.2 → 3.1.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.
Files changed (61) hide show
  1. package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js +3 -3
  2. package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js.map +2 -2
  3. package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +3 -3
  4. package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +2 -2
  5. package/dist/cjs/addons/Editables/TextEditableCell/TextEditableCell.js +2 -2
  6. package/dist/cjs/addons/Editables/TextEditableCell/TextEditableCell.js.map +2 -2
  7. package/dist/cjs/addons/Filters/Components/SelectFilter/components.js +7 -7
  8. package/dist/cjs/addons/Filters/Components/SelectFilter/components.js.map +2 -2
  9. package/dist/cjs/exported-related/FilterPopover.js +4 -4
  10. package/dist/cjs/exported-related/FilterPopover.js.map +2 -2
  11. package/dist/cjs/exported-related/Toolbar/Toolbar.js +4 -4
  12. package/dist/cjs/exported-related/Toolbar/Toolbar.js.map +2 -2
  13. package/dist/cjs/parts/DnDHandle.js +2 -2
  14. package/dist/cjs/parts/DnDHandle.js.map +2 -2
  15. package/dist/cjs/parts/DropIndicator.js +2 -2
  16. package/dist/cjs/parts/DropIndicator.js.map +2 -2
  17. package/dist/cjs/parts/EmptyContent.js +7 -7
  18. package/dist/cjs/parts/EmptyContent.js.map +2 -2
  19. package/dist/cjs/parts/FilterBar/styled.js +3 -3
  20. package/dist/cjs/parts/FilterBar/styled.js.map +2 -2
  21. package/dist/cjs/parts/Headers/EmptyChildrenGroup.js +2 -2
  22. package/dist/cjs/parts/Headers/EmptyChildrenGroup.js.map +2 -2
  23. package/dist/cjs/parts/Headers/HeaderCellGroup.js +2 -2
  24. package/dist/cjs/parts/Headers/HeaderCellGroup.js.map +2 -2
  25. package/dist/cjs/parts/Loader.js +2 -2
  26. package/dist/cjs/parts/Loader.js.map +2 -2
  27. package/dist/cjs/parts/RowLoading.js +2 -2
  28. package/dist/cjs/parts/RowLoading.js.map +2 -2
  29. package/dist/cjs/styled.js +21 -21
  30. package/dist/cjs/styled.js.map +2 -2
  31. package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js +1 -1
  32. package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js.map +1 -1
  33. package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +1 -1
  34. package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +1 -1
  35. package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js +1 -1
  36. package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js.map +1 -1
  37. package/dist/esm/addons/Filters/Components/SelectFilter/components.js +1 -1
  38. package/dist/esm/addons/Filters/Components/SelectFilter/components.js.map +1 -1
  39. package/dist/esm/exported-related/FilterPopover.js +1 -1
  40. package/dist/esm/exported-related/FilterPopover.js.map +1 -1
  41. package/dist/esm/exported-related/Toolbar/Toolbar.js +1 -1
  42. package/dist/esm/exported-related/Toolbar/Toolbar.js.map +1 -1
  43. package/dist/esm/parts/DnDHandle.js +1 -1
  44. package/dist/esm/parts/DnDHandle.js.map +1 -1
  45. package/dist/esm/parts/DropIndicator.js +1 -1
  46. package/dist/esm/parts/DropIndicator.js.map +1 -1
  47. package/dist/esm/parts/EmptyContent.js +1 -1
  48. package/dist/esm/parts/EmptyContent.js.map +1 -1
  49. package/dist/esm/parts/FilterBar/styled.js +1 -1
  50. package/dist/esm/parts/FilterBar/styled.js.map +1 -1
  51. package/dist/esm/parts/Headers/EmptyChildrenGroup.js +1 -1
  52. package/dist/esm/parts/Headers/EmptyChildrenGroup.js.map +1 -1
  53. package/dist/esm/parts/Headers/HeaderCellGroup.js +1 -1
  54. package/dist/esm/parts/Headers/HeaderCellGroup.js.map +1 -1
  55. package/dist/esm/parts/Loader.js +1 -1
  56. package/dist/esm/parts/Loader.js.map +1 -1
  57. package/dist/esm/parts/RowLoading.js +1 -1
  58. package/dist/esm/parts/RowLoading.js.map +1 -1
  59. package/dist/esm/styled.js +1 -1
  60. package/dist/esm/styled.js.map +1 -1
  61. package/package.json +28 -32
@@ -40,13 +40,13 @@ module.exports = __toCommonJS(ColumnExpand_exports);
40
40
  var React = __toESM(require("react"));
41
41
  var import_react = __toESM(require("react"));
42
42
  var import_ds_icons = require("@elliemae/ds-icons");
43
- var import_styled_components = __toESM(require("styled-components"));
43
+ var import_ds_system = require("@elliemae/ds-system");
44
44
  var import_styled = require("../../../styled");
45
45
  var import_constants = require("../../../configs/constants");
46
- const disabledCaret = import_styled_components.css`
46
+ const disabledCaret = import_ds_system.css`
47
47
  cursor: not-allowed;
48
48
  `;
49
- const StyledSpan = import_styled_components.default.span`
49
+ const StyledSpan = import_ds_system.styled.span`
50
50
  cursor: pointer;
51
51
  box-sizing: border-box;
52
52
  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 react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useMemo, useCallback } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';\nimport * as CSS from 'csstype';\nimport styled, { css } from 'styled-components';\nimport { TypescriptColumn } from '../../../types/props';\nimport { StyledFocusWithin } from '../../../styled';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n`;\nconst StyledSpan = styled.span<{ disabled: boolean }>`\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n\n ${({ disabled }) => disabled && disabledCaret}\n`;\n\nexport const expandRowColumn: TypescriptColumn = {\n // Build our expander column\n id: 'expander', // Make sure it has an ID\n accessor: 'expandRowColumn',\n Header: ({ ctx }) => {\n const {\n tableProps: { expandedRows, onRowExpand, disabledRows },\n allDataFlattened,\n } = ctx;\n\n const allExpandable = useMemo(() => {\n const expandable = {};\n allDataFlattened.forEach((row) => {\n if (\n !disabledRows[row.uid] &&\n (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue)\n )\n 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 GlobalExpandIcon = useMemo(() => {\n if (isAllRowsExpanded)\n return (\n <ArrowheadDown\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN}\n />\n );\n\n // Mixed\n if (Object.keys(expandedRows).length) {\n return (\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 }\n return (\n <ArrowheadRight\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT}\n />\n );\n }, [expandedRows, isAllRowsExpanded]);\n\n return (\n <StyledFocusWithin>\n <StyledSpan\n role=\"button\"\n tabIndex={0}\n title=\"Toggle All Rows Expanded\"\n onClick={onExpandedAllHandler}\n onKeyDown={(e) => {\n if (['Enter', 'Space'].includes(e.code)) {\n onExpandedAllHandler();\n e.preventDefault();\n }\n }}\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, ctx, draggableProps }) => {\n const {\n tableProps: { dragAndDropRows, expandedRows, onRowExpand, disabledRows },\n } = ctx;\n\n const uniqueId = row.uid;\n\n const isExpanded = expandedRows[uniqueId];\n\n const shouldPrintCaret =\n (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n row.original.tableRowDetails ||\n row.original.dimsumHeaderValue;\n\n const onRowExpandHandler = useCallback(\n (e) => {\n e.stopPropagation();\n if (expandedRows[uniqueId]) {\n delete expandedRows[uniqueId];\n } else {\n expandedRows[uniqueId] = true;\n }\n onRowExpand({ ...expandedRows }, uniqueId);\n },\n [expandedRows, uniqueId, onRowExpand],\n );\n\n const isDragging = draggableProps ? draggableProps.isDragging : false;\n const isDragOverlay = dragAndDropRows && !draggableProps;\n\n const indentStyle: CSS.Properties = useMemo(\n () => ({\n marginLeft: `${row.depth * 32}px`,\n marginRight: '18px',\n paddingLeft: '2px',\n paddingRight: '2px',\n position: 'relative',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n }),\n [row.depth],\n );\n\n const rowProps = useMemo(\n () => ({\n role: 'button',\n key: `${row.uid}-expand-button`,\n title: 'Toggle Row Expanded',\n onClick: !disabledRows[row.uid] ? onRowExpandHandler : undefined,\n onKeyDown: (e) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onRowExpandHandler(e);\n }\n },\n ref: cell.ref,\n tabIndex: isRowSelected && !disabledRows[row.uid] ? 0 : -1,\n 'data-testid': 'data-table-row-expand-cell',\n 'aria-expanded': isExpanded,\n isRightArrow: !isExpanded || isDragging || isDragOverlay,\n disabled: disabledRows[row.uid],\n }),\n [row.uid, disabledRows, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay],\n );\n\n const PureCaretIcon = useMemo(\n () =>\n isExpanded && !isDragging && !isDragOverlay ? (\n <ArrowheadDown\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n size=\"s\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN}\n />\n ) : (\n <ArrowheadRight\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n size=\"s\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT}\n />\n ),\n [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid],\n );\n\n const ChildIcon = useMemo(\n () => (\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 ),\n [],\n );\n\n if (shouldPrintCaret)\n return (\n <StyledFocusWithin style={indentStyle}>\n <StyledSpan {...rowProps}>{PureCaretIcon}</StyledSpan>\n </StyledFocusWithin>\n );\n if (row.depth !== 0) return <span style={indentStyle}>{ChildIcon}</span>;\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};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useMemo, useCallback } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';\nimport * as CSS from 'csstype';\nimport { styled, css } from '@elliemae/ds-system';\nimport { TypescriptColumn } from '../../../types/props';\nimport { StyledFocusWithin } from '../../../styled';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n`;\nconst StyledSpan = styled.span<{ disabled: boolean }>`\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n\n ${({ disabled }) => disabled && disabledCaret}\n`;\n\nexport const expandRowColumn: TypescriptColumn = {\n // Build our expander column\n id: 'expander', // Make sure it has an ID\n accessor: 'expandRowColumn',\n Header: ({ ctx }) => {\n const {\n tableProps: { expandedRows, onRowExpand, disabledRows },\n allDataFlattened,\n } = ctx;\n\n const allExpandable = useMemo(() => {\n const expandable = {};\n allDataFlattened.forEach((row) => {\n if (\n !disabledRows[row.uid] &&\n (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue)\n )\n 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 GlobalExpandIcon = useMemo(() => {\n if (isAllRowsExpanded)\n return (\n <ArrowheadDown\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN}\n />\n );\n\n // Mixed\n if (Object.keys(expandedRows).length) {\n return (\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 }\n return (\n <ArrowheadRight\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT}\n />\n );\n }, [expandedRows, isAllRowsExpanded]);\n\n return (\n <StyledFocusWithin>\n <StyledSpan\n role=\"button\"\n tabIndex={0}\n title=\"Toggle All Rows Expanded\"\n onClick={onExpandedAllHandler}\n onKeyDown={(e) => {\n if (['Enter', 'Space'].includes(e.code)) {\n onExpandedAllHandler();\n e.preventDefault();\n }\n }}\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, ctx, draggableProps }) => {\n const {\n tableProps: { dragAndDropRows, expandedRows, onRowExpand, disabledRows },\n } = ctx;\n\n const uniqueId = row.uid;\n\n const isExpanded = expandedRows[uniqueId];\n\n const shouldPrintCaret =\n (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n row.original.tableRowDetails ||\n row.original.dimsumHeaderValue;\n\n const onRowExpandHandler = useCallback(\n (e) => {\n e.stopPropagation();\n if (expandedRows[uniqueId]) {\n delete expandedRows[uniqueId];\n } else {\n expandedRows[uniqueId] = true;\n }\n onRowExpand({ ...expandedRows }, uniqueId);\n },\n [expandedRows, uniqueId, onRowExpand],\n );\n\n const isDragging = draggableProps ? draggableProps.isDragging : false;\n const isDragOverlay = dragAndDropRows && !draggableProps;\n\n const indentStyle: CSS.Properties = useMemo(\n () => ({\n marginLeft: `${row.depth * 32}px`,\n marginRight: '18px',\n paddingLeft: '2px',\n paddingRight: '2px',\n position: 'relative',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n }),\n [row.depth],\n );\n\n const rowProps = useMemo(\n () => ({\n role: 'button',\n key: `${row.uid}-expand-button`,\n title: 'Toggle Row Expanded',\n onClick: !disabledRows[row.uid] ? onRowExpandHandler : undefined,\n onKeyDown: (e) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onRowExpandHandler(e);\n }\n },\n ref: cell.ref,\n tabIndex: isRowSelected && !disabledRows[row.uid] ? 0 : -1,\n 'data-testid': 'data-table-row-expand-cell',\n 'aria-expanded': isExpanded,\n isRightArrow: !isExpanded || isDragging || isDragOverlay,\n disabled: disabledRows[row.uid],\n }),\n [row.uid, disabledRows, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay],\n );\n\n const PureCaretIcon = useMemo(\n () =>\n isExpanded && !isDragging && !isDragOverlay ? (\n <ArrowheadDown\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n size=\"s\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN}\n />\n ) : (\n <ArrowheadRight\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n size=\"s\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT}\n />\n ),\n [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid],\n );\n\n const ChildIcon = useMemo(\n () => (\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 ),\n [],\n );\n\n if (shouldPrintCaret)\n return (\n <StyledFocusWithin style={indentStyle}>\n <StyledSpan {...rowProps}>{PureCaretIcon}</StyledSpan>\n </StyledFocusWithin>\n );\n if (row.depth !== 0) return <span style={indentStyle}>{ChildIcon}</span>;\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};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -26,16 +26,16 @@ module.exports = __toCommonJS(ColumnSelectSingle_exports);
26
26
  var React = __toESM(require("react"));
27
27
  var import_react = __toESM(require("react"));
28
28
  var import_ds_form = require("@elliemae/ds-form");
29
- var import_styled_components = __toESM(require("styled-components"));
29
+ var import_ds_system = require("@elliemae/ds-system");
30
30
  var import_constants = require("../../../configs/constants");
31
- const CenteredContent = import_styled_components.default.div`
31
+ const CenteredContent = import_ds_system.styled.div`
32
32
  display: flex;
33
33
  height: 100%;
34
34
  width: 100%;
35
35
  justify-content: center;
36
36
  align-items: center;
37
37
  `;
38
- const StyledDSRadio = (0, import_styled_components.default)(import_ds_form.DSRadio)`
38
+ const StyledDSRadio = (0, import_ds_system.styled)(import_ds_form.DSRadio)`
39
39
  padding-bottom: 0;
40
40
  cursor: pointer;
41
41
  `;
@@ -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, { useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport styled from 'styled-components';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst CenteredContent = styled.div`\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\nconst StyledDSRadio = styled(DSRadio)`\n padding-bottom: 0;\n cursor: pointer;\n`;\n\nexport const singleSelectColumn: TypescriptColumn = {\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: () => <div />,\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid];\n\n const PureCheckBox = useMemo(\n () => (\n <CenteredContent>\n <StyledDSRadio\n // eslint-disable-next-line react/prop-types\n containerProps={{\n 'aria-checked': selectedState,\n 'aria-disabled': false,\n title: 'Toggle Row Selected',\n }}\n checked={selectedState}\n onChange={() => {\n // in single select we only allow one item to be selected\n onSelectionChange(!selectedState ? { [uid]: !selectedState } : {});\n }}\n data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n value=\"\"\n tabIndex={isRowSelected ? 0 : -1}\n />\n </CenteredContent>\n ),\n [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, onSelectionChange, uid],\n );\n return PureCheckBox;\n },\n textWrap: 'wrap',\n width: 32,\n padding: 4,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAC/B,qBAAwB;AACxB,+BAAmB;AAEnB,uBAA4B;AAE5B,MAAM,kBAAkB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,MAAM,gBAAgB,sCAAO,sBAAO;AAAA;AAAA;AAAA;AAK7B,MAAM,qBAAuC;AAAA,EAElD,IAAI;AAAA,EAEJ,QAAQ,MAAM,mDAAC,WAAI;AAAA,EACnB,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,UAAU;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW;AAAA,QAC1C;AACJ,UAAM,EAAE,QAAQ;AAChB,UAAM,gBAAgB,YAAY;AAElC,UAAM,eAAe,0BACnB,MACE,mDAAC,uBACC,mDAAC;AAAA,MAEC,gBAAgB;AAAA,QACd,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,UAAU,MAAM;AAEd,0BAAkB,CAAC,gBAAgB,GAAG,MAAM,CAAC,cAAc,IAAI,CAAC,CAAC;AAAA,MACnE;AAAA,MACA,eAAa,6BAAY;AAAA,MACzB,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,OAAM;AAAA,MACN,UAAU,gBAAgB,IAAI;AAAA,KAChC,CACF,GAEF,CAAC,eAAe,cAAc,IAAI,KAAK,KAAK,KAAK,eAAe,mBAAmB,GAAG,CACxF;AACA,WAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
4
+ "sourcesContent": ["import React, { useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport { styled } from '@elliemae/ds-system';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst CenteredContent = styled.div`\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\nconst StyledDSRadio = styled(DSRadio)`\n padding-bottom: 0;\n cursor: pointer;\n`;\n\nexport const singleSelectColumn: TypescriptColumn = {\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: () => <div />,\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid];\n\n const PureCheckBox = useMemo(\n () => (\n <CenteredContent>\n <StyledDSRadio\n // eslint-disable-next-line react/prop-types\n containerProps={{\n 'aria-checked': selectedState,\n 'aria-disabled': false,\n title: 'Toggle Row Selected',\n }}\n checked={selectedState}\n onChange={() => {\n // in single select we only allow one item to be selected\n onSelectionChange(!selectedState ? { [uid]: !selectedState } : {});\n }}\n data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n value=\"\"\n tabIndex={isRowSelected ? 0 : -1}\n />\n </CenteredContent>\n ),\n [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, onSelectionChange, uid],\n );\n return PureCheckBox;\n },\n textWrap: 'wrap',\n width: 32,\n padding: 4,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAC/B,qBAAwB;AACxB,uBAAuB;AAEvB,uBAA4B;AAE5B,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,MAAM,gBAAgB,6BAAO,sBAAO;AAAA;AAAA;AAAA;AAK7B,MAAM,qBAAuC;AAAA,EAElD,IAAI;AAAA,EAEJ,QAAQ,MAAM,mDAAC,WAAI;AAAA,EACnB,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,UAAU;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW;AAAA,QAC1C;AACJ,UAAM,EAAE,QAAQ;AAChB,UAAM,gBAAgB,YAAY;AAElC,UAAM,eAAe,0BACnB,MACE,mDAAC,uBACC,mDAAC;AAAA,MAEC,gBAAgB;AAAA,QACd,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,QACjB,OAAO;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,UAAU,MAAM;AAEd,0BAAkB,CAAC,gBAAgB,GAAG,MAAM,CAAC,cAAc,IAAI,CAAC,CAAC;AAAA,MACnE;AAAA,MACA,eAAa,6BAAY;AAAA,MACzB,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,OAAM;AAAA,MACN,UAAU,gBAAgB,IAAI;AAAA,KAChC,CACF,GAEF,CAAC,eAAe,cAAc,IAAI,KAAK,KAAK,KAAK,eAAe,mBAAmB,GAAG,CACxF;AACA,WAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
6
6
  "names": []
7
7
  }
@@ -25,11 +25,11 @@ __export(TextEditableCell_exports, {
25
25
  module.exports = __toCommonJS(TextEditableCell_exports);
26
26
  var React = __toESM(require("react"));
27
27
  var import_react = __toESM(require("react"));
28
- var import_styled_components = __toESM(require("styled-components"));
28
+ var import_ds_system = require("@elliemae/ds-system");
29
29
  var import_exported_related = require("../../../exported-related");
30
30
  var import_DataTableContext = require("../../../DataTableContext");
31
31
  var import_prop_types = require("../../../prop-types");
32
- const StyledInput = import_styled_components.default.input`
32
+ const StyledInput = import_ds_system.styled.input`
33
33
  outline: none;
34
34
  :focus {
35
35
  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, { useContext, useState, useRef, useCallback } from 'react';\nimport styled from 'styled-components';\nimport { EditableCell } from '../../../exported-related';\nimport { DataTableContext } from '../../../DataTableContext';\nimport { editableCellPropType } from '../../../prop-types';\n\nconst StyledInput = styled.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<any> = (props) => {\n const { cell, DefaultCellRender, isRowSelected } = props;\n const {\n tableProps: { onCellValueChange },\n } = useContext(DataTableContext);\n\n const [value, setValue] = useState<string>(cell.value);\n\n const handleOnChange = useCallback((e) => {\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);\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 setValue={setValue}\n isRowSelected={isRowSelected}\n />\n );\n};\nTextEditableCell.propTypes = editableCellPropType;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiE;AACjE,+BAAmB;AACnB,8BAA6B;AAC7B,8BAAiC;AACjC,wBAAqC;AAErC,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA,wBAGH,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKrD,MAAM,mBAA6C,CAAC,UAAU;AACnE,QAAM,EAAE,MAAM,mBAAmB,kBAAkB;AACnD,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,MACZ,6BAAW,wCAAgB;AAE/B,QAAM,CAAC,OAAO,YAAY,2BAAiB,KAAK,KAAK;AAErD,QAAM,iBAAiB,8BAAY,CAAC,MAAM;AACxC,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO;AAAA,QACf;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,8BAAY,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,kBAAkB,8BACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,SAAS,SAAS;AACtB,WAAK,IAAI,QAAQ,MAAM;AAAA,IAEzB;AACA,QAAI,EAAE,SAAS,UAAU;AACvB,eAAS,KAAK,KAAK;AACnB,YAAM,SAAS,KAAK,IAAI;AAExB,iBAAW,MAAM;AACf,eAAO,MAAM;AAAA,MACf,CAAC;AAAA,IACH;AAAA,EACF,GACA,CAAC,IAAI,CACP;AACA,SACE,mDAAC;AAAA,IACC,gBAAgB;AAAA,IAChB,kBACE,mDAAC;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,WAAS;AAAA,KACX;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,GACF;AAEJ;AACA,iBAAiB,YAAY;",
4
+ "sourcesContent": ["/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useContext, useState, useRef, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related';\nimport { DataTableContext } from '../../../DataTableContext';\nimport { editableCellPropType } from '../../../prop-types';\n\nconst StyledInput = styled.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<any> = (props) => {\n const { cell, DefaultCellRender, isRowSelected } = props;\n const {\n tableProps: { onCellValueChange },\n } = useContext(DataTableContext);\n\n const [value, setValue] = useState<string>(cell.value);\n\n const handleOnChange = useCallback((e) => {\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);\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 setValue={setValue}\n isRowSelected={isRowSelected}\n />\n );\n};\nTextEditableCell.propTypes = editableCellPropType;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiE;AACjE,uBAAuB;AACvB,8BAA6B;AAC7B,8BAAiC;AACjC,wBAAqC;AAErC,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA,wBAGH,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKrD,MAAM,mBAA6C,CAAC,UAAU;AACnE,QAAM,EAAE,MAAM,mBAAmB,kBAAkB;AACnD,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,MACZ,6BAAW,wCAAgB;AAE/B,QAAM,CAAC,OAAO,YAAY,2BAAiB,KAAK,KAAK;AAErD,QAAM,iBAAiB,8BAAY,CAAC,MAAM;AACxC,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO;AAAA,QACf;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,8BAAY,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,kBAAkB,8BACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,SAAS,SAAS;AACtB,WAAK,IAAI,QAAQ,MAAM;AAAA,IAEzB;AACA,QAAI,EAAE,SAAS,UAAU;AACvB,eAAS,KAAK,KAAK;AACnB,YAAM,SAAS,KAAK,IAAI;AAExB,iBAAW,MAAM;AACf,eAAO,MAAM;AAAA,MACf,CAAC;AAAA,IACH;AAAA,EACF,GACA,CAAC,IAAI,CACP;AACA,SACE,mDAAC;AAAA,IACC,gBAAgB;AAAA,IAChB,kBACE,mDAAC;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,WAAS;AAAA,KACX;AAAA,IAEF;AAAA,IACA;AAAA,IACA;AAAA,GACF;AAEJ;AACA,iBAAiB,YAAY;",
6
6
  "names": []
7
7
  }
@@ -29,17 +29,17 @@ __export(components_exports, {
29
29
  });
30
30
  module.exports = __toCommonJS(components_exports);
31
31
  var React = __toESM(require("react"));
32
- var import_styled_components = __toESM(require("styled-components"));
33
- const Wrapper = import_styled_components.default.div`
32
+ var import_ds_system = require("@elliemae/ds-system");
33
+ const Wrapper = import_ds_system.styled.div`
34
34
  display: flex;
35
35
  flex-direction: column;
36
36
  align-items: center;
37
37
  `;
38
- const InputWrapper = import_styled_components.default.div`
38
+ const InputWrapper = import_ds_system.styled.div`
39
39
  width: 100%;
40
40
  padding: 10px;
41
41
  `;
42
- const Input = import_styled_components.default.input`
42
+ const Input = import_ds_system.styled.input`
43
43
  width: 100%;
44
44
  border: 1px solid #eee;
45
45
  height: 25px;
@@ -48,11 +48,11 @@ const Input = import_styled_components.default.input`
48
48
  border: 1px solid ${(props) => props.theme.colors.brand[600]};
49
49
  }
50
50
  `;
51
- const MenuList = import_styled_components.default.div`
51
+ const MenuList = import_ds_system.styled.div`
52
52
  position: relative;
53
53
  width: 100%;
54
54
  `;
55
- const MenuItem = import_styled_components.default.div`
55
+ const MenuItem = import_ds_system.styled.div`
56
56
  display: flex;
57
57
  box-sizing: border-box;
58
58
  align-items: center;
@@ -71,7 +71,7 @@ const MenuItem = import_styled_components.default.div`
71
71
  border: 1px solid ${(props) => props.theme.colors.brand[600]};
72
72
  }
73
73
  `;
74
- const VirtualListWrapper = import_styled_components.default.div`
74
+ const VirtualListWrapper = import_ds_system.styled.div`
75
75
  width: 100%;
76
76
  overflow: auto; // needed to virtualization
77
77
  max-height: 300px;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/components.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import styled from 'styled-components';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const InputWrapper = styled.div`\n width: 100%;\n padding: 10px;\n`;\n\n// TODO: use dimsum text input\nexport const Input = styled.input`\n width: 100%;\n border: 1px solid #eee;\n height: 25px;\n &:focus {\n outline: none;\n border: 1px solid ${(props) => props.theme.colors.brand[600]};\n }\n`;\n\nexport const MenuList = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const MenuItem = styled.div`\n display: flex;\n box-sizing: border-box;\n align-items: center;\n white-space: wrap;\n position: absolute; // needed to virtualization\n top: 0;\n left: 0;\n width: 100%;\n padding: 10px;\n border: 1px solid transparent;\n cursor: pointer;\n &:hover {\n border: 1px solid ${(props) => props.theme.colors.brand[600]};\n }\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.brand[600]};\n }\n`;\n\nexport const VirtualListWrapper = styled.div`\n width: 100%;\n overflow: auto; // needed to virtualization\n max-height: 300px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,eAAe,iCAAO;AAAA;AAAA;AAAA;AAM5B,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMJ,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrD,MAAM,WAAW,iCAAO;AAAA;AAAA;AAAA;AAKxB,MAAM,WAAW,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAaP,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,wBAGpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrD,MAAM,qBAAqB,iCAAO;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n`;\n\nexport const InputWrapper = styled.div`\n width: 100%;\n padding: 10px;\n`;\n\n// TODO: use dimsum text input\nexport const Input = styled.input`\n width: 100%;\n border: 1px solid #eee;\n height: 25px;\n &:focus {\n outline: none;\n border: 1px solid ${(props) => props.theme.colors.brand[600]};\n }\n`;\n\nexport const MenuList = styled.div`\n position: relative;\n width: 100%;\n`;\n\nexport const MenuItem = styled.div`\n display: flex;\n box-sizing: border-box;\n align-items: center;\n white-space: wrap;\n position: absolute; // needed to virtualization\n top: 0;\n left: 0;\n width: 100%;\n padding: 10px;\n border: 1px solid transparent;\n cursor: pointer;\n &:hover {\n border: 1px solid ${(props) => props.theme.colors.brand[600]};\n }\n &:focus {\n border: 1px solid ${(props) => props.theme.colors.brand[600]};\n }\n`;\n\nexport const VirtualListWrapper = styled.div`\n width: 100%;\n overflow: auto; // needed to virtualization\n max-height: 300px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAM5B,MAAM,QAAQ,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMJ,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrD,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA;AAKxB,MAAM,WAAW,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAaP,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,wBAGpC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIrD,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -44,18 +44,18 @@ var React = __toESM(require("react"));
44
44
  var import_react = __toESM(require("react"));
45
45
  var import_ds_button = require("@elliemae/ds-button");
46
46
  var import_ds_popperjs = require("@elliemae/ds-popperjs");
47
- var import_styled_components = __toESM(require("styled-components"));
47
+ var import_ds_system = require("@elliemae/ds-system");
48
48
  var import_DataTableContext = __toESM(require("../DataTableContext"));
49
49
  var import_constants = require("../configs/constants");
50
- const FilterButton = import_styled_components.default.span`
50
+ const FilterButton = import_ds_system.styled.span`
51
51
  display: inline-grid;
52
52
  ${(props) => props.hide ? "opacity: 0; display: none; width: 0;" : ""}
53
53
  `;
54
- const Button = (0, import_styled_components.default)(import_ds_button.DSButton)`
54
+ const Button = (0, import_ds_system.styled)(import_ds_button.DSButton)`
55
55
  position: relative;
56
56
  justify-self: flex-end;
57
57
  `;
58
- const PopperContent = import_styled_components.default.div`
58
+ const PopperContent = import_ds_system.styled.div`
59
59
  background-color: #fff;
60
60
  `;
61
61
  const ButtonTrap = ({ cb }) => /* @__PURE__ */ import_react.default.createElement("span", {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/exported-related/FilterPopover.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useCallback, useContext, useEffect, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport styled from 'styled-components';\nimport DataTableContext from '../DataTableContext';\nimport { DATA_TESTID } from '../configs/constants';\nimport { ReduxHeader, TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n display: inline-grid;\n ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n position: relative;\n justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n background-color: #fff;\n`;\ninterface FilterPopoverProps {\n column: TypescriptColumn;\n columnId: string;\n triggerIcon: JSX.Element;\n menuContent: JSX.Element;\n onTriggerClick?: (id: string, e: UIEvent) => void;\n onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n reduxHeader: ReduxHeader;\n innerRef: MutableRefObject<HTMLDivElement>;\n ariaLabel: string;\n customStyles?: React.CSSProperties;\n}\n\nconst ButtonTrap = ({ cb }) => (\n <span\n aria-hidden=\"true\"\n tabIndex={0}\n onFocus={(e) => {\n e.stopPropagation();\n cb();\n }}\n />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n column,\n columnId,\n triggerIcon,\n menuContent,\n onTriggerClick = () => null,\n onClickOutsideMenu = () => null,\n reduxHeader,\n innerRef,\n ariaLabel,\n customStyles,\n}) => {\n const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n hideFilterButton: true,\n hideFilterMenu: true,\n };\n const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);\n const isIconVisible = !hideFilterButton || !hideFilterMenu;\n const isMenuOpen = !hideFilterMenu;\n\n const handleClickOutsideMenu = (e) => {\n onClickOutsideMenu(columnId, e);\n if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n };\n\n useEffect(() => {\n const closeMenu = () => {\n patchHeaderFilterButtonAndMenu(columnId, true);\n };\n window.addEventListener('blur', closeMenu);\n\n return () => {\n window.removeEventListener('blur', closeMenu);\n };\n }, [columnId, patchHeaderFilterButtonAndMenu]);\n\n const handleTriggerClick = (e) => {\n onTriggerClick(columnId, e);\n patchHeaderFilterButtonAndMenu(columnId, false);\n e.stopPropagation();\n };\n\n const [referenceElement, setReferenceElement] = useState(null);\n\n const buttonTrapCallback = useCallback(() => {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n referenceElement?.focus();\n }, [columnId, patchHeader, referenceElement]);\n return (\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => {\n e.stopPropagation();\n if (e.code === 'Escape') {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n referenceElement.focus();\n }\n // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n // so we just prevent default behaviour in this case\n if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n e.preventDefault();\n }\n }}\n style={{ display: 'flex' }}\n >\n <FilterButton hide={!isIconVisible} data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}>\n <Button\n onClick={handleTriggerClick}\n buttonType=\"text\"\n aria-label={ariaLabel}\n aria-hidden=\"true\"\n size=\"s\"\n leftIcon={triggerIcon}\n // implement treeview mergerefs\n innerRef={(_ref) => {\n if (isIconVisible) setReferenceElement(_ref);\n innerRef.current = _ref;\n }}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n />\n </FilterButton>\n {referenceElement && (\n <DSPopperJS\n referenceElement={referenceElement}\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 zIndex={10}\n withoutAnimation\n extraPopperStyles={{\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n placementOrderPreference={['bottom-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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",
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useCallback, useContext, useEffect, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { DATA_TESTID } from '../configs/constants';\nimport { ReduxHeader, TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n display: inline-grid;\n ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n position: relative;\n justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n background-color: #fff;\n`;\ninterface FilterPopoverProps {\n column: TypescriptColumn;\n columnId: string;\n triggerIcon: JSX.Element;\n menuContent: JSX.Element;\n onTriggerClick?: (id: string, e: UIEvent) => void;\n onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n reduxHeader: ReduxHeader;\n innerRef: MutableRefObject<HTMLDivElement>;\n ariaLabel: string;\n customStyles?: React.CSSProperties;\n}\n\nconst ButtonTrap = ({ cb }) => (\n <span\n aria-hidden=\"true\"\n tabIndex={0}\n onFocus={(e) => {\n e.stopPropagation();\n cb();\n }}\n />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n column,\n columnId,\n triggerIcon,\n menuContent,\n onTriggerClick = () => null,\n onClickOutsideMenu = () => null,\n reduxHeader,\n innerRef,\n ariaLabel,\n customStyles,\n}) => {\n const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n hideFilterButton: true,\n hideFilterMenu: true,\n };\n const { patchHeaderFilterButtonAndMenu, patchHeader } = useContext(DataTableContext);\n const isIconVisible = !hideFilterButton || !hideFilterMenu;\n const isMenuOpen = !hideFilterMenu;\n\n const handleClickOutsideMenu = (e) => {\n onClickOutsideMenu(columnId, e);\n if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n };\n\n useEffect(() => {\n const closeMenu = () => {\n patchHeaderFilterButtonAndMenu(columnId, true);\n };\n window.addEventListener('blur', closeMenu);\n\n return () => {\n window.removeEventListener('blur', closeMenu);\n };\n }, [columnId, patchHeaderFilterButtonAndMenu]);\n\n const handleTriggerClick = (e) => {\n onTriggerClick(columnId, e);\n patchHeaderFilterButtonAndMenu(columnId, false);\n e.stopPropagation();\n };\n\n const [referenceElement, setReferenceElement] = useState(null);\n\n const buttonTrapCallback = useCallback(() => {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n referenceElement?.focus();\n }, [columnId, patchHeader, referenceElement]);\n return (\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => {\n e.stopPropagation();\n if (e.code === 'Escape') {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n referenceElement.focus();\n }\n // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n // so we just prevent default behaviour in this case\n if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n e.preventDefault();\n }\n }}\n style={{ display: 'flex' }}\n >\n <FilterButton hide={!isIconVisible} data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}>\n <Button\n onClick={handleTriggerClick}\n buttonType=\"text\"\n aria-label={ariaLabel}\n aria-hidden=\"true\"\n size=\"s\"\n leftIcon={triggerIcon}\n // implement treeview mergerefs\n innerRef={(_ref) => {\n if (isIconVisible) setReferenceElement(_ref);\n innerRef.current = _ref;\n }}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n />\n </FilterButton>\n {referenceElement && (\n <DSPopperJS\n referenceElement={referenceElement}\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 zIndex={10}\n withoutAnimation\n extraPopperStyles={{\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n placementOrderPreference={['bottom-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
  }
@@ -25,17 +25,17 @@ __export(Toolbar_exports, {
25
25
  module.exports = __toCommonJS(Toolbar_exports);
26
26
  var React = __toESM(require("react"));
27
27
  var import_react = __toESM(require("react"));
28
- var import_styled_components = __toESM(require("styled-components"));
28
+ var import_ds_system = require("@elliemae/ds-system");
29
29
  var import_ds_button = require("@elliemae/ds-button");
30
30
  var import_ds_icons = require("@elliemae/ds-icons");
31
31
  var import_ds_utilities = require("@elliemae/ds-utilities");
32
32
  var import_constants = require("../../configs/constants");
33
- const ToolbarBtns = import_styled_components.default.div`
33
+ const ToolbarBtns = import_ds_system.styled.div`
34
34
  & > .em-ds-toolbar {
35
35
  box-shadow: none;
36
36
  }
37
37
  `;
38
- const ToolbarWrapper = import_styled_components.default.div`
38
+ const ToolbarWrapper = import_ds_system.styled.div`
39
39
  display: flex;
40
40
  align-items: center;
41
41
  height: 36px;
@@ -48,7 +48,7 @@ const ToolbarWrapper = import_styled_components.default.div`
48
48
  }
49
49
  }
50
50
  `;
51
- const ToolbarPosition = import_styled_components.default.div`
51
+ const ToolbarPosition = import_ds_system.styled.div`
52
52
  display: flex;
53
53
  justify-content: flex-end;
54
54
  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 from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n &:hover {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\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: ${(props) => props.theme.colors.neutral['080']};\n z-index: 7;\n }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar: React.ComponentType = ({ children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow(true), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n return (\n <ToolbarPosition ref={toolbarRef} onClick={(e) => e.stopPropagation()}>\n <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <DSButtonV2\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n onClick={handleOnClick}\n onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && handleOnClick()}\n tabIndex={0}\n >\n <MoreOptionsVert />\n </DSButtonV2>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,+BAAmB;AACnB,uBAA2B;AAC3B,sBAAgC;AAChC,0BAAkC;AAClC,uBAA4B;AAE5B,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAMvD,MAAM,UAA+B,CAAC,EAAE,eAAe;AAC5D,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AAEtC,QAAM,aAAa,yBAAO,IAAI;AAE9B,QAAM,uBAAuB,8BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,8BAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,6CAAkB,YAAY,oBAAoB;AAElD,SACE,mDAAC;AAAA,IAAgB,KAAK;AAAA,IAAY,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,KAClE,mDAAC;AAAA,IAAe,cAAc,MAAM,QAAQ,IAAI;AAAA,IAAG,cAAc,MAAM,QAAQ,KAAK;AAAA,KACjF,QAAQ,mDAAC,mBAAa,QAAS,GAChC,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,SAAS;AAAA,IACT,WAAW,CAAC,MAAM,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAK,cAAc;AAAA,IACvE,UAAU;AAAA,KAEV,mDAAC,qCAAgB,CACnB,CACF,CACF;AAEJ;",
4
+ "sourcesContent": ["import React, { useCallback, useRef, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n &:hover {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\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: ${(props) => props.theme.colors.neutral['080']};\n z-index: 7;\n }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar: React.ComponentType = ({ children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow(true), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n return (\n <ToolbarPosition ref={toolbarRef} onClick={(e) => e.stopPropagation()}>\n <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <DSButtonV2\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n onClick={handleOnClick}\n onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && handleOnClick()}\n tabIndex={0}\n >\n <MoreOptionsVert />\n </DSButtonV2>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,uBAAuB;AACvB,uBAA2B;AAC3B,sBAAgC;AAChC,0BAAkC;AAClC,uBAA4B;AAE5B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAMvD,MAAM,UAA+B,CAAC,EAAE,eAAe;AAC5D,QAAM,CAAC,MAAM,WAAW,2BAAS,KAAK;AAEtC,QAAM,aAAa,yBAAO,IAAI;AAE9B,QAAM,uBAAuB,8BAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,8BAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,6CAAkB,YAAY,oBAAoB;AAElD,SACE,mDAAC;AAAA,IAAgB,KAAK;AAAA,IAAY,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,KAClE,mDAAC;AAAA,IAAe,cAAc,MAAM,QAAQ,IAAI;AAAA,IAAG,cAAc,MAAM,QAAQ,KAAK;AAAA,KACjF,QAAQ,mDAAC,mBAAa,QAAS,GAChC,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,6BAAY;AAAA,IACzB,SAAS;AAAA,IACT,WAAW,CAAC,MAAM,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,KAAK,cAAc;AAAA,IACvE,UAAU;AAAA,KAEV,mDAAC,qCAAgB,CACnB,CACF,CACF;AAEJ;",
6
6
  "names": []
7
7
  }
@@ -43,10 +43,10 @@ module.exports = __toCommonJS(DnDHandle_exports);
43
43
  var React = __toESM(require("react"));
44
44
  var import_react = __toESM(require("react"));
45
45
  var import_ds_icons = require("@elliemae/ds-icons");
46
- var import_styled_components = __toESM(require("styled-components"));
46
+ var import_ds_system = require("@elliemae/ds-system");
47
47
  var import_SortableItemContext = require("./HoC/SortableItemContext");
48
48
  var import_constants = require("../configs/constants");
49
- const StyledGripperButton = import_styled_components.default.div`
49
+ const StyledGripperButton = import_ds_system.styled.div`
50
50
  cursor: ${({ isActive, isDragOverlay }) => isActive || isDragOverlay ? "grabbing" : "grab"};
51
51
  outline: none;
52
52
  display: flex;
@@ -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": ["/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport styled from 'styled-components';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { DATA_TESTID } from '../configs/constants';\n\nconst StyledGripperButton = styled.div<{\n isActive: boolean;\n isDragOverlay: boolean;\n}>`\n cursor: ${({ isActive, isDragOverlay }) => (isActive || isDragOverlay ? 'grabbing' : 'grab')};\n outline: none;\n display: flex;\n align-items: center;\n touch-action: none;\n`;\n\nconst DragHandle: React.ComponentType<{\n id: string;\n isReachable: boolean;\n isDragOverlay: boolean;\n innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef }) => {\n const { draggableProps } = useContext(SortableItemContext);\n const isActive = draggableProps && !!draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n\n return (\n <StyledGripperButton\n role=\"button\"\n {...(draggableProps && {\n ...draggableProps.listeners,\n ...draggableProps.attributes,\n })}\n isActive={isActive}\n isDragOverlay={isDragOverlay}\n ref={innerRef}\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 >\n <GripperVertical size=\"s\" color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n </StyledGripperButton>\n );\n};\nexport default DragHandle;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,sBAAgC;AAChC,+BAAmB;AACnB,iCAAoC;AACpC,uBAA4B;AAE5B,MAAM,sBAAsB,iCAAO;AAAA,YAIvB,CAAC,EAAE,UAAU,oBAAqB,YAAY,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvF,MAAM,aAKD,CAAC,EAAE,IAAI,aAAa,eAAe,eAAe;AACrD,QAAM,EAAE,mBAAmB,6BAAW,8CAAmB;AACzD,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,mDAAC;AAAA,IACC,MAAK;AAAA,KACA,kBAAkB,kCAClB,eAAe,YACf,eAAe,cAJrB;AAAA,IAMC;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,UAAU,cAAc,IAAI;AAAA,IAC5B,eAAa,6BAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,MAER,mDAAC;AAAA,IAAgB,MAAK;AAAA,IAAI,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,GAAG,CAC/F;AAEJ;AACA,IAAO,oBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { GripperVertical } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { DATA_TESTID } from '../configs/constants';\n\nconst StyledGripperButton = styled.div<{\n isActive: boolean;\n isDragOverlay: boolean;\n}>`\n cursor: ${({ isActive, isDragOverlay }) => (isActive || isDragOverlay ? 'grabbing' : 'grab')};\n outline: none;\n display: flex;\n align-items: center;\n touch-action: none;\n`;\n\nconst DragHandle: React.ComponentType<{\n id: string;\n isReachable: boolean;\n isDragOverlay: boolean;\n innerRef: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;\n}> = ({ id, isReachable, isDragOverlay, innerRef }) => {\n const { draggableProps } = useContext(SortableItemContext);\n const isActive = draggableProps && !!draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n\n return (\n <StyledGripperButton\n role=\"button\"\n {...(draggableProps && {\n ...draggableProps.listeners,\n ...draggableProps.attributes,\n })}\n isActive={isActive}\n isDragOverlay={isDragOverlay}\n ref={innerRef}\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 >\n <GripperVertical size=\"s\" color={isDragging ? ['neutral', '500'] : ['brand-primary', '800']} />\n </StyledGripperButton>\n );\n};\nexport default DragHandle;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,sBAAgC;AAChC,uBAAuB;AACvB,iCAAoC;AACpC,uBAA4B;AAE5B,MAAM,sBAAsB,wBAAO;AAAA,YAIvB,CAAC,EAAE,UAAU,oBAAqB,YAAY,gBAAgB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvF,MAAM,aAKD,CAAC,EAAE,IAAI,aAAa,eAAe,eAAe;AACrD,QAAM,EAAE,mBAAmB,6BAAW,8CAAmB;AACzD,QAAM,WAAW,kBAAkB,CAAC,CAAC,eAAe;AACpD,QAAM,aAAa,kBAAkB,eAAe;AAEpD,SACE,mDAAC;AAAA,IACC,MAAK;AAAA,KACA,kBAAkB,kCAClB,eAAe,YACf,eAAe,cAJrB;AAAA,IAMC;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,UAAU,cAAc,IAAI;AAAA,IAC5B,eAAa,6BAAY;AAAA,IACzB,IAAI,GAAG;AAAA,IACP,KAAK,GAAG;AAAA,MAER,mDAAC;AAAA,IAAgB,MAAK;AAAA,IAAI,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,CAAC,iBAAiB,KAAK;AAAA,GAAG,CAC/F;AAEJ;AACA,IAAO,oBAAQ;",
6
6
  "names": []
7
7
  }
@@ -26,7 +26,7 @@ __export(DropIndicator_exports, {
26
26
  module.exports = __toCommonJS(DropIndicator_exports);
27
27
  var React = __toESM(require("react"));
28
28
  var import_react = __toESM(require("react"));
29
- var import_styled_components = __toESM(require("styled-components"));
29
+ var import_ds_system = require("@elliemae/ds-system");
30
30
  var import_zIndexInternalConfig = require("../configs/zIndexInternalConfig");
31
31
  var import_SortableItemContext = require("./HoC/SortableItemContext");
32
32
  const getPositionStyles = ({ dropIndicatorPosition, vertical }) => {
@@ -50,7 +50,7 @@ const getCircleStyles = ({ dropIndicatorPosition, vertical }) => ({
50
50
  right: !vertical || dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.Before ? "unset" : "-2px",
51
51
  opacity: 1
52
52
  });
53
- const StyledIndicator = import_styled_components.default.div`
53
+ const StyledIndicator = import_ds_system.styled.div`
54
54
  position: absolute;
55
55
  ${getPositionStyles}
56
56
  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 'styled-components';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig';\nimport { DropIndicatorPosition } from './HoC/SortableItemContext';\n\ninterface DropIndicatorProps {\n vertical: boolean;\n dropIndicatorPosition: DropIndicatorPosition;\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<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: ${(props) => props.theme.colors.brand[600]};\n z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>) => (\n <svg height=\"6\" width=\"6\" style={style}>\n <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill=\"#1E79C2\" />\n </svg>\n);\n\nconst DropIndicator = ({ vertical, dropIndicatorPosition, isLast }: DropIndicatorProps): JSX.Element => {\n if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)) return null;\n\n const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n return (\n <>\n {CircleIndicator(getCircleStyles({ vertical, dropIndicatorPosition: safeDropIndicatorPosition }))}\n <StyledIndicator vertical={vertical} dropIndicatorPosition={safeDropIndicatorPosition} />\n </>\n );\n};\n\nexport { DropIndicator };\nexport default DropIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AACnB,kCAAgC;AAChC,iCAAsC;AAQtC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,eAAmC;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,iDAAsB,SAAS,MAAM;AAAA,eAC9D,0BAA0B,iDAAsB,QAAQ,MAAM;AAAA;AAAA,EAE3E;AACA,SAAO;AAAA,aACI,0BAA0B,iDAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,iDAAsB,QAAQ,MAAM;AAAA;AAE9E;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,eAAoC;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,4CAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,iDAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,iDAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,iDAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,iDAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,kBAAkB,iCAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aAC7C,4CAAgB;AAAA;AAG7B,MAAM,kBAAkB,CAAC,UACvB,mDAAC;AAAA,EAAI,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI;AAAA,GACxB,mDAAC;AAAA,EAAO,IAAG;AAAA,EAAI,IAAG;AAAA,EAAI,GAAE;AAAA,EAAI,aAAY;AAAA,EAAI,MAAK;AAAA,CAAU,CAC7D;AAGF,MAAM,gBAAgB,CAAC,EAAE,UAAU,uBAAuB,aAA8C;AACtG,MAAI,CAAC,CAAC,iDAAsB,OAAO,iDAAsB,MAAM,EAAE,SAAS,qBAAqB;AAAG,WAAO;AAEzG,QAAM,4BAA4B,SAAS,iDAAsB,SAAS;AAE1E,SACE,wFACG,gBAAgB,gBAAgB,EAAE,UAAU,uBAAuB,0BAA0B,CAAC,CAAC,GAChG,mDAAC;AAAA,IAAgB;AAAA,IAAoB,uBAAuB;AAAA,GAA2B,CACzF;AAEJ;AAGA,IAAO,wBAAQ;",
4
+ "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ZIndexDataTable } from '../configs/zIndexInternalConfig';\nimport { DropIndicatorPosition } from './HoC/SortableItemContext';\n\ninterface DropIndicatorProps {\n vertical: boolean;\n dropIndicatorPosition: DropIndicatorPosition;\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<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: ${(props) => props.theme.colors.brand[600]};\n z-index: ${ZIndexDataTable.DROP_INDICATOR};\n`;\n\nconst CircleIndicator = (style: Record<string, unknown>) => (\n <svg height=\"6\" width=\"6\" style={style}>\n <circle cx=\"3\" cy=\"3\" r=\"3\" strokeWidth=\"0\" fill=\"#1E79C2\" />\n </svg>\n);\n\nconst DropIndicator = ({ vertical, dropIndicatorPosition, isLast }: DropIndicatorProps): JSX.Element => {\n if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)) return null;\n\n const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;\n\n return (\n <>\n {CircleIndicator(getCircleStyles({ vertical, dropIndicatorPosition: safeDropIndicatorPosition }))}\n <StyledIndicator vertical={vertical} dropIndicatorPosition={safeDropIndicatorPosition} />\n </>\n );\n};\n\nexport { DropIndicator };\nexport default DropIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAuB;AACvB,kCAAgC;AAChC,iCAAsC;AAQtC,MAAM,oBAAoB,CAAC,EAAE,uBAAuB,eAAmC;AACrF,MAAI,UAAU;AACZ,WAAO;AAAA,cACG,0BAA0B,iDAAsB,SAAS,MAAM;AAAA,eAC9D,0BAA0B,iDAAsB,QAAQ,MAAM;AAAA;AAAA,EAE3E;AACA,SAAO;AAAA,aACI,0BAA0B,iDAAsB,SAAS,MAAM;AAAA,gBAC5D,0BAA0B,iDAAsB,QAAQ,MAAM;AAAA;AAE9E;AAEA,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,eAAoC;AAAA,EACpF,UAAU;AAAA,EACV,QAAQ,4CAAgB;AAAA,EACxB,KAAK,YAAY,0BAA0B,iDAAsB,QAAQ,UAAU;AAAA,EACnF,QAAQ,YAAY,0BAA0B,iDAAsB,SAAS,UAAU;AAAA,EACvF,MAAM,CAAC,YAAY,0BAA0B,iDAAsB,QAAQ,UAAU;AAAA,EACrF,OAAO,CAAC,YAAY,0BAA0B,iDAAsB,SAAS,UAAU;AAAA,EACvF,SAAS;AACX;AAEA,MAAM,kBAAkB,wBAAO;AAAA;AAAA,IAE3B;AAAA;AAAA,WAEO,CAAC,UAAW,MAAM,WAAW,QAAQ;AAAA,YACpC,CAAC,UAAW,MAAM,WAAW,SAAS;AAAA,sBAC5B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,aAC7C,4CAAgB;AAAA;AAG7B,MAAM,kBAAkB,CAAC,UACvB,mDAAC;AAAA,EAAI,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI;AAAA,GACxB,mDAAC;AAAA,EAAO,IAAG;AAAA,EAAI,IAAG;AAAA,EAAI,GAAE;AAAA,EAAI,aAAY;AAAA,EAAI,MAAK;AAAA,CAAU,CAC7D;AAGF,MAAM,gBAAgB,CAAC,EAAE,UAAU,uBAAuB,aAA8C;AACtG,MAAI,CAAC,CAAC,iDAAsB,OAAO,iDAAsB,MAAM,EAAE,SAAS,qBAAqB;AAAG,WAAO;AAEzG,QAAM,4BAA4B,SAAS,iDAAsB,SAAS;AAE1E,SACE,wFACG,gBAAgB,gBAAgB,EAAE,UAAU,uBAAuB,0BAA0B,CAAC,CAAC,GAChG,mDAAC;AAAA,IAAgB;AAAA,IAAoB,uBAAuB;AAAA,GAA2B,CACzF;AAEJ;AAGA,IAAO,wBAAQ;",
6
6
  "names": []
7
7
  }
@@ -30,21 +30,21 @@ var import_ds_grid = require("@elliemae/ds-grid");
30
30
  var import_ds_icons = require("@elliemae/ds-icons");
31
31
  var import_ds_system = require("@elliemae/ds-system");
32
32
  var import_ds_button = require("@elliemae/ds-button");
33
- var import_styled_components = __toESM(require("styled-components"));
33
+ var import_ds_system2 = require("@elliemae/ds-system");
34
34
  var import_prop_types = __toESM(require("prop-types"));
35
35
  var import_DataTableContext = require("../DataTableContext");
36
- const EmptyStateWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
36
+ const EmptyStateWrapper = (0, import_ds_system2.styled)(import_ds_grid.Grid)`
37
37
  position: sticky;
38
38
  height: fit-content;
39
39
  top: 0;
40
40
  left: 0;
41
41
  `;
42
- const Icon = (0, import_styled_components.default)(import_ds_icons.WarningTriangle)`
42
+ const Icon = (0, import_ds_system2.styled)(import_ds_icons.WarningTriangle)`
43
43
  fill: ${(props) => props.theme.colors.neutral[300]};
44
44
  color: ${(props) => props.theme.colors.neutral[300]};
45
45
  justify-self: center;
46
46
  `;
47
- const PrimaryMessage = import_styled_components.default.p`
47
+ const PrimaryMessage = import_ds_system2.styled.p`
48
48
  text-align: center;
49
49
  font-weight: bold;
50
50
  font-size: ${(props) => (0, import_ds_system.toMobile)(props.theme.fontSizes.value[400])};
@@ -52,18 +52,18 @@ const PrimaryMessage = import_styled_components.default.p`
52
52
  margin-top: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.s)};
53
53
  margin-bottom: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.xs)};
54
54
  `;
55
- const SecondaryMessage = import_styled_components.default.p`
55
+ const SecondaryMessage = import_ds_system2.styled.p`
56
56
  text-align: center;
57
57
  font-size: ${(props) => (0, import_ds_system.toMobile)(props.theme.fontSizes.value[400])}; /* 13px */
58
58
  color: ${(props) => props.theme.colors.neutral[500]};
59
59
  margin: 0;
60
60
  `;
61
- const Button = (0, import_styled_components.default)(import_ds_button.DSButton)`
61
+ const Button = (0, import_ds_system2.styled)(import_ds_button.DSButton)`
62
62
  margin-top: ${(props) => (0, import_ds_system.__UNSAFE_SPACE_TO_DIMSUM)(props.theme.space.m)};
63
63
  justify-self: center;
64
64
  width: fit-content;
65
65
  `;
66
- const CenterContentFlexWrapper = import_styled_components.default.div`
66
+ const CenterContentFlexWrapper = import_ds_system2.styled.div`
67
67
  width: ${({ width }) => width}px;
68
68
  height: calc(100% - 48px);
69
69
  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, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\nimport { DataTableContext } from '../DataTableContext';\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.p`\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`\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(DSButton)`\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<{ width: number | string }>`\n width: ${({ width }) => width}px;\n height: calc(100% - 48px);\n display: flex;\n align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType<{ width: string | number }> = ({ width }) => {\n const {\n tableProps: {\n noResultsPlaceholder,\n noResultsMessage,\n noResultsSecondaryMessage,\n noResultsButtonLabel,\n onNoResultsButtonClick,\n width: tableWidth,\n },\n } = useContext(DataTableContext);\n\n if (React.isValidElement(noResultsPlaceholder))\n return <CenterContentFlexWrapper width={width}>{noResultsPlaceholder}</CenterContentFlexWrapper>;\n\n return (\n <CenterContentFlexWrapper width={width} aria-live=\"assertive\" role=\"status\">\n <EmptyStateWrapper width={tableWidth} justifyContent=\"center\">\n <Icon size=\"xxl\" />\n <PrimaryMessage>{noResultsMessage}</PrimaryMessage>\n {noResultsSecondaryMessage ? <SecondaryMessage>{noResultsSecondaryMessage}</SecondaryMessage> : null}\n {noResultsButtonLabel && onNoResultsButtonClick ? (\n <Button buttonType=\"secondary\" labelText={noResultsButtonLabel} onClick={onNoResultsButtonClick} />\n ) : null}\n </EmptyStateWrapper>\n </CenterContentFlexWrapper>\n );\n};\n\nEmptyContent.propTypes = {\n width: PropTypes.number,\n};\n\nexport { EmptyContent };\nexport default EmptyContent;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,qBAAqB;AACrB,sBAAgC;AAChC,uBAAmD;AACnD,uBAAyB;AACzB,+BAAmB;AACnB,wBAAsB;AAEtB,8BAAiC;AAEjC,MAAM,oBAAoB,sCAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,sCAAO,+BAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,+BAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,iCAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,+BAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,sCAAO,yBAAQ;AAAA,gBACd,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,iCAAO;AAAA,WAC7B,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,YAAY;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA;AAAA,MAEP,6BAAW,wCAAgB;AAE/B,MAAI,qBAAM,eAAe,oBAAoB;AAC3C,WAAO,mDAAC;AAAA,MAAyB;AAAA,OAAe,oBAAqB;AAEvE,SACE,mDAAC;AAAA,IAAyB;AAAA,IAAc,aAAU;AAAA,IAAY,MAAK;AAAA,KACjE,mDAAC;AAAA,IAAkB,OAAO;AAAA,IAAY,gBAAe;AAAA,KACnD,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAM,GACjB,mDAAC,sBAAgB,gBAAiB,GACjC,4BAA4B,mDAAC,wBAAkB,yBAA0B,IAAsB,MAC/F,wBAAwB,yBACvB,mDAAC;AAAA,IAAO,YAAW;AAAA,IAAY,WAAW;AAAA,IAAsB,SAAS;AAAA,GAAwB,IAC/F,IACN,CACF;AAEJ;AAEA,aAAa,YAAY;AAAA,EACvB,OAAO,0BAAU;AACnB;AAGA,IAAO,uBAAQ;",
4
+ "sourcesContent": ["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\n\nimport { DataTableContext } from '../DataTableContext';\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.p`\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`\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(DSButton)`\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<{ width: number | string }>`\n width: ${({ width }) => width}px;\n height: calc(100% - 48px);\n display: flex;\n align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType<{ width: string | number }> = ({ width }) => {\n const {\n tableProps: {\n noResultsPlaceholder,\n noResultsMessage,\n noResultsSecondaryMessage,\n noResultsButtonLabel,\n onNoResultsButtonClick,\n width: tableWidth,\n },\n } = useContext(DataTableContext);\n\n if (React.isValidElement(noResultsPlaceholder))\n return <CenterContentFlexWrapper width={width}>{noResultsPlaceholder}</CenterContentFlexWrapper>;\n\n return (\n <CenterContentFlexWrapper width={width} aria-live=\"assertive\" role=\"status\">\n <EmptyStateWrapper width={tableWidth} justifyContent=\"center\">\n <Icon size=\"xxl\" />\n <PrimaryMessage>{noResultsMessage}</PrimaryMessage>\n {noResultsSecondaryMessage ? <SecondaryMessage>{noResultsSecondaryMessage}</SecondaryMessage> : null}\n {noResultsButtonLabel && onNoResultsButtonClick ? (\n <Button buttonType=\"secondary\" labelText={noResultsButtonLabel} onClick={onNoResultsButtonClick} />\n ) : null}\n </EmptyStateWrapper>\n </CenterContentFlexWrapper>\n );\n};\n\nEmptyContent.propTypes = {\n width: PropTypes.number,\n};\n\nexport { EmptyContent };\nexport default EmptyContent;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,qBAAqB;AACrB,sBAAgC;AAChC,uBAAmD;AACnD,uBAAyB;AACzB,wBAAuB;AACvB,wBAAsB;AAEtB,8BAAiC;AAEjC,MAAM,oBAAoB,8BAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,8BAAO,+BAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,yBAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,+BAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,yBAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,+BAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,8BAAO,yBAAQ;AAAA,gBACd,CAAC,UAAU,+CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,yBAAO;AAAA,WAC7B,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,YAAY;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA;AAAA,MAEP,6BAAW,wCAAgB;AAE/B,MAAI,qBAAM,eAAe,oBAAoB;AAC3C,WAAO,mDAAC;AAAA,MAAyB;AAAA,OAAe,oBAAqB;AAEvE,SACE,mDAAC;AAAA,IAAyB;AAAA,IAAc,aAAU;AAAA,IAAY,MAAK;AAAA,KACjE,mDAAC;AAAA,IAAkB,OAAO;AAAA,IAAY,gBAAe;AAAA,KACnD,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAM,GACjB,mDAAC,sBAAgB,gBAAiB,GACjC,4BAA4B,mDAAC,wBAAkB,yBAA0B,IAAsB,MAC/F,wBAAwB,yBACvB,mDAAC;AAAA,IAAO,YAAW;AAAA,IAAY,WAAW;AAAA,IAAsB,SAAS;AAAA,GAAwB,IAC/F,IACN,CACF;AAEJ;AAEA,aAAa,YAAY;AAAA,EACvB,OAAO,0BAAU;AACnB;AAGA,IAAO,uBAAQ;",
6
6
  "names": []
7
7
  }
@@ -27,8 +27,8 @@ module.exports = __toCommonJS(styled_exports);
27
27
  var React = __toESM(require("react"));
28
28
  var import_ds_dropdownmenu = require("@elliemae/ds-dropdownmenu");
29
29
  var import_ds_grid = require("@elliemae/ds-grid");
30
- var import_styled_components = __toESM(require("styled-components"));
31
- const StyledWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
30
+ var import_ds_system = require("@elliemae/ds-system");
31
+ const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
32
32
  display: flex;
33
33
  flex-wrap: wrap;
34
34
  width: ${(props) => props.width};
@@ -36,7 +36,7 @@ const StyledWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)
36
36
  min-height: 33px; // height of the pills
37
37
  padding: 0 ${(props) => props.theme.space.xxxs};
38
38
  `;
39
- const StyledDropdownMenu = (0, import_styled_components.default)(import_ds_dropdownmenu.DSDropdownMenu)`
39
+ const StyledDropdownMenu = (0, import_ds_system.styled)(import_ds_dropdownmenu.DSDropdownMenu)`
40
40
  margin-left: auto;
41
41
  `;
42
42
  //# sourceMappingURL=styled.js.map
@@ -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 { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\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\nexport const StyledDropdownMenu = styled(DSDropdownMenu)`\n margin-left: auto;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,6BAA+B;AAC/B,qBAAqB;AACrB,+BAAmB;AAEZ,MAAM,gBAAgB,sCAAO,mBAAI;AAAA;AAAA;AAAA,WAG7B,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA,eAGb,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGrC,MAAM,qBAAqB,sCAAO,qCAAc;AAAA;AAAA;",
4
+ "sourcesContent": ["import { DSDropdownMenu } from '@elliemae/ds-dropdownmenu';\nimport { 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\nexport const StyledDropdownMenu = styled(DSDropdownMenu)`\n margin-left: auto;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,6BAA+B;AAC/B,qBAAqB;AACrB,uBAAuB;AAEhB,MAAM,gBAAgB,6BAAO,mBAAI;AAAA;AAAA;AAAA,WAG7B,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA,eAGb,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAGrC,MAAM,qBAAqB,6BAAO,qCAAc;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
@@ -25,8 +25,8 @@ __export(EmptyChildrenGroup_exports, {
25
25
  module.exports = __toCommonJS(EmptyChildrenGroup_exports);
26
26
  var React = __toESM(require("react"));
27
27
  var import_react = __toESM(require("react"));
28
- var import_styled_components = __toESM(require("styled-components"));
29
- const StyledBox = import_styled_components.default.div`
28
+ var import_ds_system = require("@elliemae/ds-system");
29
+ const StyledBox = import_ds_system.styled.div`
30
30
  height: 24px;
31
31
  margin: 0 ${(props) => props.theme.space.xxs};
32
32
  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 React from 'react';\nimport styled from 'styled-components';\n\nconst StyledBox = styled.div`\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>> = () => <StyledBox />;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AAEnB,MAAM,YAAY,iCAAO;AAAA;AAAA,cAEX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,0BACjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGzD,MAAM,qBAAiE,MAAM,mDAAC,eAAU;",
4
+ "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\n\nconst StyledBox = styled.div`\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>> = () => <StyledBox />;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAuB;AAEvB,MAAM,YAAY,wBAAO;AAAA;AAAA,cAEX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,0BACjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGzD,MAAM,qBAAiE,MAAM,mDAAC,eAAU;",
6
6
  "names": []
7
7
  }