@elliemae/ds-data-table 3.55.0-next.6 → 3.55.0-next.8
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/Editables/TextEditableCell/TextEditableCell.js +4 -2
- package/dist/cjs/addons/Editables/TextEditableCell/TextEditableCell.js.map +3 -3
- package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js +2 -2
- package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/FreeTextSearchFilter/index.js +8 -9
- package/dist/cjs/addons/Filters/Components/FreeTextSearchFilter/index.js.map +2 -2
- package/dist/cjs/exported-related/EditableCell.js +3 -1
- package/dist/cjs/exported-related/EditableCell.js.map +3 -3
- package/dist/cjs/exported-related/Filters/freeTextSearchFilterFn.js +4 -0
- package/dist/cjs/exported-related/Filters/freeTextSearchFilterFn.js.map +2 -2
- package/dist/cjs/parts/Cells/Cell.js +13 -2
- package/dist/cjs/parts/Cells/Cell.js.map +2 -2
- package/dist/cjs/parts/Cells/CellFactory.js +38 -17
- package/dist/cjs/parts/Cells/CellFactory.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js +4 -2
- package/dist/esm/addons/Editables/TextEditableCell/TextEditableCell.js.map +3 -3
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js +2 -2
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/dist/esm/addons/Filters/Components/FreeTextSearchFilter/index.js +8 -9
- package/dist/esm/addons/Filters/Components/FreeTextSearchFilter/index.js.map +2 -2
- package/dist/esm/exported-related/EditableCell.js +3 -1
- package/dist/esm/exported-related/EditableCell.js.map +3 -3
- package/dist/esm/exported-related/Filters/freeTextSearchFilterFn.js +4 -0
- package/dist/esm/exported-related/Filters/freeTextSearchFilterFn.js.map +2 -2
- package/dist/esm/parts/Cells/Cell.js +13 -2
- package/dist/esm/parts/Cells/Cell.js.map +2 -2
- package/dist/esm/parts/Cells/CellFactory.js +38 -17
- package/dist/esm/parts/Cells/CellFactory.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/react-desc-prop-types.d.ts +2 -0
- package/package.json +29 -29
|
@@ -33,7 +33,7 @@ __export(TextEditableCell_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(TextEditableCell_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_ds_system = require("@elliemae/ds-system");
|
|
38
38
|
var import_exported_related = require("../../../exported-related/index.js");
|
|
39
39
|
var import_createInternalAndPropsContext = require("../../../configs/useStore/createInternalAndPropsContext.js");
|
|
@@ -49,6 +49,7 @@ const TextEditableCell = (props) => {
|
|
|
49
49
|
const { cell, DefaultCellRender, isRowSelected } = props;
|
|
50
50
|
const onCellValueChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onCellValueChange);
|
|
51
51
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
52
|
+
const getOwnerPropsArguments = import_react.default.useCallback(() => cell, [cell]);
|
|
52
53
|
const [value, setValue] = (0, import_react.useState)(cell.value);
|
|
53
54
|
const handleOnChange = (0, import_react.useCallback)((e) => {
|
|
54
55
|
const {
|
|
@@ -88,7 +89,8 @@ const TextEditableCell = (props) => {
|
|
|
88
89
|
onChange: handleOnChange,
|
|
89
90
|
onBlur: handleOnBlur,
|
|
90
91
|
autoFocus: true,
|
|
91
|
-
getOwnerProps
|
|
92
|
+
getOwnerProps,
|
|
93
|
+
getOwnerPropsArguments
|
|
92
94
|
}
|
|
93
95
|
),
|
|
94
96
|
cell,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Editables/TextEditableCell/TextEditableCell.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst StyledInput = styled('input', { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`\n outline: none;\n :focus {\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n }\n max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n const { cell, DefaultCellRender, isRowSelected } = props;\n\n const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const [value, setValue] = useState<string>(cell.value as string);\n\n const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n const {\n target: { value: tValue },\n } = e;\n setValue(tValue);\n }, []);\n\n const handleOnBlur = useCallback(() => {\n const property = cell.column.id;\n const rowIndex = cell.row.index;\n onCellValueChange({ value, property, rowIndex });\n }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'Enter') {\n cell.ref.current?.focus();\n // will exec on blur callback from input and save new value\n }\n if (e.code === 'Escape') {\n setValue(cell.value as string);\n const auxRef = cell.ref.current;\n // this prevent the on blur\n setTimeout(() => {\n auxRef?.focus();\n });\n }\n },\n [cell],\n );\n return (\n <EditableCell\n StandardRender={DefaultCellRender}\n EditableRenderer={\n <StyledInput\n value={value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n onBlur={handleOnBlur}\n autoFocus\n getOwnerProps={getOwnerProps}\n />\n }\n cell={cell}\n isRowSelected={isRowSelected}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useState, useCallback } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { EditableCell } from '../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../DSDataTableDefinitions.js';\n\nconst StyledInput = styled('input', { name: DSDataTableName, slot: DSDataTableSlots.TEXT_EDITABLE_CELL_INPUT })`\n outline: none;\n :focus {\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n }\n max-width: 100%;\n`;\n\nexport const TextEditableCell: React.ComponentType<DSDataTableT.EditableCellProps<HTMLDivElement>> = (props) => {\n const { cell, DefaultCellRender, isRowSelected } = props;\n\n const onCellValueChange = usePropsStore((state) => state.onCellValueChange);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n const [value, setValue] = useState<string>(cell.value as string);\n\n const handleOnChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n const {\n target: { value: tValue },\n } = e;\n setValue(tValue);\n }, []);\n\n const handleOnBlur = useCallback(() => {\n const property = cell.column.id;\n const rowIndex = cell.row.index;\n onCellValueChange({ value, property, rowIndex });\n }, [value, onCellValueChange, cell.column.id, cell.row.index]);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.code === 'Enter') {\n cell.ref.current?.focus();\n // will exec on blur callback from input and save new value\n }\n if (e.code === 'Escape') {\n setValue(cell.value as string);\n const auxRef = cell.ref.current;\n // this prevent the on blur\n setTimeout(() => {\n auxRef?.focus();\n });\n }\n },\n [cell],\n );\n return (\n <EditableCell\n StandardRender={DefaultCellRender}\n EditableRenderer={\n <StyledInput\n value={value}\n onKeyDown={handleOnKeyDown}\n onChange={handleOnChange}\n onBlur={handleOnBlur}\n autoFocus\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n }\n cell={cell}\n isRowSelected={isRowSelected}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Df;AA1DR,mBAA6C;AAC7C,uBAAuB;AACvB,8BAA6B;AAE7B,2CAA8B;AAC9B,oCAAkD;AAElD,MAAM,kBAAc,yBAAO,SAAS,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,yBAAyB,CAAC;AAAA;AAAA;AAAA,wBAGtF,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKzD,MAAM,mBAAwF,CAAC,UAAU;AAC9G,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM,wBAAoB,oDAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,KAAK,KAAe;AAE/D,QAAM,qBAAiB,0BAAY,CAAC,MAA2C;AAC7E,UAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,OAAO;AAAA,IAC1B,IAAI;AACJ,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAe,0BAAY,MAAM;AACrC,UAAM,WAAW,KAAK,OAAO;AAC7B,UAAM,WAAW,KAAK,IAAI;AAC1B,sBAAkB,EAAE,OAAO,UAAU,SAAS,CAAC;AAAA,EACjD,GAAG,CAAC,OAAO,mBAAmB,KAAK,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC;AAE7D,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,SAAS;AACtB,aAAK,IAAI,SAAS,MAAM;AAAA,MAE1B;AACA,UAAI,EAAE,SAAS,UAAU;AACvB,iBAAS,KAAK,KAAe;AAC7B,cAAM,SAAS,KAAK,IAAI;AAExB,mBAAW,MAAM;AACf,kBAAQ,MAAM;AAAA,QAChB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,UACX,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,WAAS;AAAA,UACT;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -61,8 +61,8 @@ const CurrencyRangeFilter = (props) => {
|
|
|
61
61
|
const [from, setFrom] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.from ?? "", opts));
|
|
62
62
|
const [to, setTo] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.to ?? "", opts));
|
|
63
63
|
(0, import_react.useEffect)(() => {
|
|
64
|
-
setFrom(
|
|
65
|
-
setTo(
|
|
64
|
+
setFrom(filterValue.from ?? "");
|
|
65
|
+
setTo(filterValue.to ?? "");
|
|
66
66
|
}, [filterValue.from, filterValue.to]);
|
|
67
67
|
const ref = (0, import_react.useRef)(null);
|
|
68
68
|
const shouldFocus = (0, import_react.useRef)(true);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n includeThousandsSeparator: false,\n decimalPlaces: 2,\n decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n from: string | null;\n to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n const {\n column,\n filterValue = { from: null, to: null },\n reduxHeader,\n patchHeader,\n onValueChange,\n innerRef,\n domIdAffix = uid(4),\n } = props;\n\n const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n useEffect(() => {\n // in order to update the input values when the user clear the filters\n // we need to update the state when the filterValue changes\n setFrom(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmHf;AAnHR,mBAAgE;AAChE,qBAAqB;AACrB,gCAA4B;AAC5B,wCAAoD;AACpD,mCAAsC;AACtC,sBAA6B;AAC7B,iBAAoB;AACpB,8BAA4C;AAE5C,uBAA4B;AAE5B,MAAM,OAAO;AAAA,EACX,2BAA2B;AAAA,EAC3B,eAAe;AAAA,EACf,iBAAiB;AACnB;AAEA,MAAM,YAAY;AAOX,MAAM,sBAA8F,CAAC,UAAU;AACpH,QAAM;AAAA,IACJ;AAAA,IACA,cAAc,EAAE,MAAM,MAAM,IAAI,KAAK;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAa,gBAAI,CAAC;AAAA,EACpB,IAAI;AAEJ,QAAM,CAAC,MAAM,OAAO,QAAI,2BAAS,wDAAqB,YAAY,QAAQ,IAAI,IAAI,CAAC;AACnF,QAAM,CAAC,IAAI,KAAK,QAAI,2BAAS,wDAAqB,YAAY,MAAM,IAAI,IAAI,CAAC;AAE7E,8BAAU,MAAM;AAGd,
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n includeThousandsSeparator: false,\n decimalPlaces: 2,\n decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n from: string | null;\n to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n const {\n column,\n filterValue = { from: null, to: null },\n reduxHeader,\n patchHeader,\n onValueChange,\n innerRef,\n domIdAffix = uid(4),\n } = props;\n\n const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n useEffect(() => {\n // in order to update the input values when the user clear the filters\n // we need to update the state when the filterValue changes\n setFrom(filterValue.from ?? '');\n setTo(filterValue.to ?? '');\n }, [filterValue.from, filterValue.to]);\n\n const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n\n const handleApplyChange = useCallback(\n ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n },\n [onValueChange],\n );\n\n const handleFromChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n handleApplyChange({ newFrom, newTo: to });\n },\n [handleApplyChange, to],\n );\n const handleToChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n handleApplyChange({ newFrom: from, newTo });\n },\n [from, handleApplyChange],\n );\n\n const fromInputProps = useNumberMask({\n valueSetter: setFrom,\n onChange: handleFromChange,\n ...opts,\n });\n\n const toInputProps = useNumberMask({\n valueSetter: setTo,\n onChange: handleToChange,\n ...opts,\n });\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n }\n },\n [column.id, innerRef, patchHeader],\n );\n\n const handleRef = useCallback(\n (newRef: HTMLInputElement | null) => {\n if (ref.current) ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n newRef?.focus();\n shouldFocus.current = false;\n });\n }\n },\n [shouldFocus],\n );\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={\n <Grid\n data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n gutter=\"xxxs\"\n padding=\"xxs\"\n cols={['auto', 'auto']}\n style={{ background: 'white' }}\n onKeyDown={handleOnKeyDown}\n >\n <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={from}\n {...fromInputProps}\n id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0.00\"\n innerRef={handleRef}\n />\n </DSFormLayoutBlockItem>\n <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={to}\n {...toInputProps}\n id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0.00\"\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -51,8 +51,7 @@ const StyledInputFreeTextSearch = (0, import_ds_system.styled)(import_ds_form_in
|
|
|
51
51
|
const FreeTextSearchFilter = (props) => {
|
|
52
52
|
const {
|
|
53
53
|
column,
|
|
54
|
-
column: { id },
|
|
55
|
-
filterValue,
|
|
54
|
+
column: { id, persistFilterInputAfterSubmit = false },
|
|
56
55
|
onValueChange,
|
|
57
56
|
patchHeaderFilterButtonAndMenu,
|
|
58
57
|
reduxHeader,
|
|
@@ -66,7 +65,7 @@ const FreeTextSearchFilter = (props) => {
|
|
|
66
65
|
() => ({
|
|
67
66
|
columnId: id
|
|
68
67
|
}),
|
|
69
|
-
[]
|
|
68
|
+
[id]
|
|
70
69
|
);
|
|
71
70
|
const handleRef = (0, import_react.useCallback)((newRef) => {
|
|
72
71
|
ref.current = newRef;
|
|
@@ -82,21 +81,21 @@ const FreeTextSearchFilter = (props) => {
|
|
|
82
81
|
shouldFocus.current = true;
|
|
83
82
|
}
|
|
84
83
|
}, [reduxHeader?.hideFilterMenu]);
|
|
85
|
-
const [value, setValue] = (0, import_react.useState)(
|
|
86
|
-
(0, import_react.useEffect)(() => {
|
|
87
|
-
setValue(filterValue || "");
|
|
88
|
-
}, [filterValue]);
|
|
84
|
+
const [value, setValue] = (0, import_react.useState)("");
|
|
89
85
|
const onKeyDown = (0, import_react.useCallback)(
|
|
90
86
|
(event) => {
|
|
91
87
|
if (event.key === "Enter") {
|
|
92
|
-
onValueChange(import_exported_related.FILTER_TYPES.FREE_TEXT_SEARCH, value);
|
|
88
|
+
onValueChange(import_exported_related.FILTER_TYPES.FREE_TEXT_SEARCH, value || void 0);
|
|
89
|
+
if (!persistFilterInputAfterSubmit) {
|
|
90
|
+
setValue("");
|
|
91
|
+
}
|
|
93
92
|
setTimeout(() => {
|
|
94
93
|
patchHeaderFilterButtonAndMenu(id, true);
|
|
95
94
|
innerRef?.current?.focus();
|
|
96
95
|
}, 0);
|
|
97
96
|
}
|
|
98
97
|
},
|
|
99
|
-
[id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, value]
|
|
98
|
+
[id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value]
|
|
100
99
|
);
|
|
101
100
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
102
101
|
import_exported_related.FilterPopover,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/FreeTextSearchFilter/index.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useCallback, useState, useEffect } from 'react';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../../styled.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledInputFreeTextSearch = styled(DSInputText, {\n name: DSDataTableName,\n slot: DSDataTableSlots.FREE_TEXT_SEARCH_FILTER,\n})``;\n\nexport const FreeTextSearchFilter: React.ComponentType<DSDataTableT.FilterProps<string>> = (props) => {\n const {\n column,\n column: { id },\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useCallback, useState, useEffect } from 'react';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { ScreenReaderOnly } from '../../../../styled.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../../../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledInputFreeTextSearch = styled(DSInputText, {\n name: DSDataTableName,\n slot: DSDataTableSlots.FREE_TEXT_SEARCH_FILTER,\n})``;\n\nexport const FreeTextSearchFilter: React.ComponentType<DSDataTableT.FilterProps<string>> = (props) => {\n const {\n column,\n column: { id, persistFilterInputAfterSubmit = false },\n onValueChange,\n patchHeaderFilterButtonAndMenu,\n reduxHeader,\n innerRef,\n domIdAffix = uid(4),\n } = props;\n\n const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: id,\n }),\n [id],\n );\n\n const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n ref.current = newRef;\n if (shouldFocus.current) {\n requestAnimationFrame(() => {\n ref.current?.focus();\n shouldFocus.current = false;\n });\n }\n }, []);\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n const [value, setValue] = useState<string>('');\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n // || undefined to clear the filter when empty\n onValueChange(FILTER_TYPES.FREE_TEXT_SEARCH, value || undefined);\n if (!persistFilterInputAfterSubmit) {\n setValue('');\n }\n setTimeout(() => {\n patchHeaderFilterButtonAndMenu(id, true);\n innerRef?.current?.focus();\n }, 0);\n }\n },\n [id, innerRef, onValueChange, patchHeaderFilterButtonAndMenu, persistFilterInputAfterSubmit, value],\n );\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={id}\n customStyles={{\n backgroundColor: '#fff',\n width: column.ref?.current?.offsetWidth,\n minWidth: '80px',\n }}\n menuContent={\n <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n <ScreenReaderOnly id=\"filter-input-instructions\">\n Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this\n dialog.\n </ScreenReaderOnly>\n <StyledInputFreeTextSearch\n id={`ds-data-table-free-text-search-${id}-${domIdAffix}`}\n placeholder=\"\"\n value={value}\n onValueChange={(newValue) => {\n setValue(newValue);\n }}\n innerRef={handleRef}\n onKeyDown={onKeyDown}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH}\n aria-label=\"Free Text Search Filter\"\n aria-describedby=\"filter-input-instructions\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Free Text Search Filter\"\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoFf;AApFR,mBAAgE;AAChE,sBAA6B;AAC7B,gCAA4B;AAC5B,uBAAuB;AACvB,qBAAqB;AACrB,iBAAoB;AACpB,8BAA4C;AAE5C,uBAA4B;AAC5B,oBAAiC;AACjC,oCAAkD;AAClD,2CAA8B;AAE9B,MAAM,gCAA4B,yBAAO,uCAAa;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,+CAAiB;AACzB,CAAC;AAEM,MAAM,uBAA8E,CAAC,UAAU;AACpG,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ,EAAE,IAAI,gCAAgC,MAAM;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAa,gBAAI,CAAC;AAAA,EACpB,IAAI;AAEJ,QAAM,UAAM,qBAAgC,IAAI;AAChD,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,EAAE;AAAA,EACL;AAEA,QAAM,gBAAY,0BAAY,CAAC,WAAoC;AACjE,QAAI,UAAU;AACd,QAAI,YAAY,SAAS;AACvB,4BAAsB,MAAM;AAC1B,YAAI,SAAS,MAAM;AACnB,oBAAY,UAAU;AAAA,MACxB,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,CAAC;AACL,8BAAU,MAAM;AACd,QAAI,aAAa,gBAAgB;AAC/B,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,EAAE;AAE7C,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAiD;AAChD,UAAI,MAAM,QAAQ,SAAS;AAEzB,sBAAc,qCAAa,kBAAkB,SAAS,MAAS;AAC/D,YAAI,CAAC,+BAA+B;AAClC,mBAAS,EAAE;AAAA,QACb;AACA,mBAAW,MAAM;AACf,yCAA+B,IAAI,IAAI;AACvC,oBAAU,SAAS,MAAM;AAAA,QAC3B,GAAG,CAAC;AAAA,MACN;AAAA,IACF;AAAA,IACA,CAAC,IAAI,UAAU,eAAe,gCAAgC,+BAA+B,KAAK;AAAA,EACpG;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,cAAc;AAAA,QACZ,iBAAiB;AAAA,QACjB,OAAO,OAAO,KAAK,SAAS;AAAA,QAC5B,UAAU;AAAA,MACZ;AAAA,MACA,aACE,6CAAC,uBAAK,GAAE,OAAM,QAAO,OAAM,OAAO,EAAE,YAAY,QAAQ,GACtD;AAAA,oDAAC,kCAAiB,IAAG,6BAA4B,4HAGjD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI,kCAAkC,EAAE,IAAI,UAAU;AAAA,YACtD,aAAY;AAAA,YACZ;AAAA,YACA,eAAe,CAAC,aAAa;AAC3B,uBAAS,QAAQ;AAAA,YACnB;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA,eAAa,6BAAY;AAAA,YACzB,cAAW;AAAA,YACX,oBAAiB;AAAA,YACjB;AAAA,YACA;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MAEF,aAAa,4CAAC,gCAAa;AAAA,MAC3B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,7 +33,7 @@ __export(EditableCell_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(EditableCell_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
|
|
38
38
|
var import_styled = require("../styled.js");
|
|
39
39
|
const EditableCell = (props) => {
|
|
@@ -41,6 +41,7 @@ const EditableCell = (props) => {
|
|
|
41
41
|
const domIdAffix = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.domIdAffix);
|
|
42
42
|
const virtualListHelpers = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListHelpers);
|
|
43
43
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
44
|
+
const getOwnerPropsArguments = import_react.default.useCallback(() => cell, [cell]);
|
|
44
45
|
const [isEditing, setIsEditing] = (0, import_react.useState)(false);
|
|
45
46
|
const [lastIsEditing, setLastIsEditing] = (0, import_react.useState)(false);
|
|
46
47
|
(0, import_react.useLayoutEffect)(() => {
|
|
@@ -93,6 +94,7 @@ const EditableCell = (props) => {
|
|
|
93
94
|
role: "group",
|
|
94
95
|
"aria-labelledby": isEditing ? void 0 : cell.id,
|
|
95
96
|
getOwnerProps,
|
|
97
|
+
getOwnerPropsArguments,
|
|
96
98
|
children: [
|
|
97
99
|
!isEditing ? StandardRender : EditableRenderer,
|
|
98
100
|
!isEditing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPencilIcon, {}),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/EditableCell.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useLayoutEffect, useState } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { StyledEditableContainer, StyledPencilIcon } from '../styled.js';\n\nexport const EditableCell: React.ComponentType<{\n StandardRender: JSX.Element;\n EditableRenderer: JSX.Element;\n cell: DSDataTableT.Cell<HTMLDivElement>;\n isRowSelected?: boolean;\n}> = (props) => {\n const { StandardRender, EditableRenderer, cell, isRowSelected } = props;\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const virtualListHelpers = usePropsStore((state) => state.virtualListHelpers);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const [isEditing, setIsEditing] = useState(false);\n const [lastIsEditing, setLastIsEditing] = useState(false);\n // When an editable cell is switched on-off, we recalculate the height of the rows\n useLayoutEffect(() => {\n if (isEditing !== lastIsEditing) {\n virtualListHelpers.measure();\n setLastIsEditing(isEditing);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isEditing]);\n\n const handleCellClick = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (!isEditing) {\n e.stopPropagation();\n setIsEditing(true);\n }\n },\n [isEditing],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (isEditing) {\n e.stopPropagation();\n if (['Enter', 'Escape'].includes(e.code)) {\n setIsEditing(false);\n }\n } else if (['Enter', 'Space'].includes(e.code)) {\n handleCellClick(e);\n }\n },\n [isEditing, handleCellClick, setIsEditing],\n );\n\n const handleOnBlur = useCallback(\n (event: React.FocusEvent) => {\n if (isEditing && !event.currentTarget?.contains(event.relatedTarget)) {\n // Not triggered when swapping focus between children\n setIsEditing(false);\n }\n },\n [isEditing],\n );\n const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];\n return (\n <StyledEditableContainer\n cols={cols}\n tabIndex={isRowSelected && !isEditing ? 0 : -1}\n innerRef={cell.ref}\n onClick={handleCellClick}\n onKeyDown={handleOnKeyDown}\n onBlur={handleOnBlur}\n shouldDisplayEditIcon={cell.column.alwaysDisplayEditIcon}\n role=\"group\"\n aria-labelledby={isEditing ? undefined : cell.id}\n getOwnerProps={getOwnerProps}\n >\n {!isEditing ? StandardRender : EditableRenderer}\n {!isEditing && <StyledPencilIcon />}\n <span id={`editable-cell-${cell.id}-${domIdAffix}`} style={{ display: 'none' }} aria-hidden=\"true\">\n {cell.value as string}, editable cell. To edit the content's of this cell, press the Enter key\n </span>\n </StyledEditableContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useLayoutEffect, useState } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { StyledEditableContainer, StyledPencilIcon } from '../styled.js';\n\nexport const EditableCell: React.ComponentType<{\n StandardRender: JSX.Element;\n EditableRenderer: JSX.Element;\n cell: DSDataTableT.Cell<HTMLDivElement>;\n isRowSelected?: boolean;\n}> = (props) => {\n const { StandardRender, EditableRenderer, cell, isRowSelected } = props;\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const virtualListHelpers = usePropsStore((state) => state.virtualListHelpers);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n const [isEditing, setIsEditing] = useState(false);\n const [lastIsEditing, setLastIsEditing] = useState(false);\n // When an editable cell is switched on-off, we recalculate the height of the rows\n useLayoutEffect(() => {\n if (isEditing !== lastIsEditing) {\n virtualListHelpers.measure();\n setLastIsEditing(isEditing);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isEditing]);\n\n const handleCellClick = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (!isEditing) {\n e.stopPropagation();\n setIsEditing(true);\n }\n },\n [isEditing],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (isEditing) {\n e.stopPropagation();\n if (['Enter', 'Escape'].includes(e.code)) {\n setIsEditing(false);\n }\n } else if (['Enter', 'Space'].includes(e.code)) {\n handleCellClick(e);\n }\n },\n [isEditing, handleCellClick, setIsEditing],\n );\n\n const handleOnBlur = useCallback(\n (event: React.FocusEvent) => {\n if (isEditing && !event.currentTarget?.contains(event.relatedTarget)) {\n // Not triggered when swapping focus between children\n setIsEditing(false);\n }\n },\n [isEditing],\n );\n const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];\n return (\n <StyledEditableContainer\n cols={cols}\n tabIndex={isRowSelected && !isEditing ? 0 : -1}\n innerRef={cell.ref}\n onClick={handleCellClick}\n onKeyDown={handleOnKeyDown}\n onBlur={handleOnBlur}\n shouldDisplayEditIcon={cell.column.alwaysDisplayEditIcon}\n role=\"group\"\n aria-labelledby={isEditing ? undefined : cell.id}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {!isEditing ? StandardRender : EditableRenderer}\n {!isEditing && <StyledPencilIcon />}\n <span id={`editable-cell-${cell.id}-${domIdAffix}`} style={{ display: 'none' }} aria-hidden=\"true\">\n {cell.value as string}, editable cell. To edit the content's of this cell, press the Enter key\n </span>\n </StyledEditableContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6EF;AA7ErB,mBAA8D;AAC9D,2CAA8B;AAE9B,oBAA0D;AAEnD,MAAM,eAKR,CAAC,UAAU;AACd,QAAM,EAAE,gBAAgB,kBAAkB,MAAM,cAAc,IAAI;AAClE,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AAEnE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,oCAAgB,MAAM;AACpB,QAAI,cAAc,eAAe;AAC/B,yBAAmB,QAAQ;AAC3B,uBAAiB,SAAS;AAAA,IAC5B;AAAA,EAEF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA8C;AAC7C,UAAI,CAAC,WAAW;AACd,UAAE,gBAAgB;AAClB,qBAAa,IAAI;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,WAAW;AACb,UAAE,gBAAgB;AAClB,YAAI,CAAC,SAAS,QAAQ,EAAE,SAAS,EAAE,IAAI,GAAG;AACxC,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,wBAAgB,CAAC;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,WAAW,iBAAiB,YAAY;AAAA,EAC3C;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,aAAa,CAAC,MAAM,eAAe,SAAS,MAAM,aAAa,GAAG;AAEpE,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,OAAO,CAAC,YAAY,CAAC,QAAQ,aAAa,IAAI,CAAC,MAAM;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,iBAAiB,CAAC,YAAY,IAAI;AAAA,MAC5C,UAAU,KAAK;AAAA,MACf,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,uBAAuB,KAAK,OAAO;AAAA,MACnC,MAAK;AAAA,MACL,mBAAiB,YAAY,SAAY,KAAK;AAAA,MAC9C;AAAA,MACA;AAAA,MAEC;AAAA,SAAC,YAAY,iBAAiB;AAAA,QAC9B,CAAC,aAAa,4CAAC,kCAAiB;AAAA,QACjC,6CAAC,UAAK,IAAI,iBAAiB,KAAK,EAAE,IAAI,UAAU,IAAI,OAAO,EAAE,SAAS,OAAO,GAAG,eAAY,QACzF;AAAA,eAAK;AAAA,UAAgB;AAAA,WACxB;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -32,6 +32,7 @@ __export(freeTextSearchFilterFn_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(freeTextSearchFilterFn_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
+
var import_constants = require("../../configs/constants.js");
|
|
35
36
|
const freeTextSearchFilterFn = (unfilteredData, filterKey, filterValue) => {
|
|
36
37
|
if (!filterValue) return unfilteredData;
|
|
37
38
|
if (typeof filterValue !== "string") {
|
|
@@ -41,6 +42,9 @@ const freeTextSearchFilterFn = (unfilteredData, filterKey, filterValue) => {
|
|
|
41
42
|
}
|
|
42
43
|
const lowerCaseFilterValue = filterValue.toLowerCase();
|
|
43
44
|
return unfilteredData.filter((datum) => {
|
|
45
|
+
if (filterValue === import_constants.EMPTY_FILTER) {
|
|
46
|
+
return datum[filterKey] === null || datum[filterKey] === void 0 || datum[filterKey] === "";
|
|
47
|
+
}
|
|
44
48
|
const cellValue = String(datum[filterKey]).toLowerCase();
|
|
45
49
|
return cellValue.includes(lowerCaseFilterValue);
|
|
46
50
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/Filters/freeTextSearchFilterFn.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSDataTableT } from '../../react-desc-prop-types.js';\n\nexport const freeTextSearchFilterFn: DSDataTableT.FilterFnOutOfTheBoxFreeTextSearch = (\n unfilteredData,\n filterKey,\n filterValue,\n) => {\n if (!filterValue) return unfilteredData;\n if (typeof filterValue !== 'string') {\n throw new Error(\n `Invalid filter value for free text search filter, expected string received: ${JSON.stringify(filterValue)}`,\n );\n }\n const lowerCaseFilterValue = filterValue.toLowerCase();\n return unfilteredData.filter((datum) => {\n const cellValue = String(datum[filterKey]).toLowerCase();\n return cellValue.includes(lowerCaseFilterValue);\n });\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { EMPTY_FILTER } from '../../configs/constants.js';\n\nexport const freeTextSearchFilterFn: DSDataTableT.FilterFnOutOfTheBoxFreeTextSearch = (\n unfilteredData,\n filterKey,\n filterValue,\n) => {\n if (!filterValue) return unfilteredData;\n if (typeof filterValue !== 'string') {\n throw new Error(\n `Invalid filter value for free text search filter, expected string received: ${JSON.stringify(filterValue)}`,\n );\n }\n const lowerCaseFilterValue = filterValue.toLowerCase();\n return unfilteredData.filter((datum) => {\n if (filterValue === EMPTY_FILTER) {\n return datum[filterKey] === null || datum[filterKey] === undefined || datum[filterKey] === '';\n }\n const cellValue = String(datum[filterKey]).toLowerCase();\n return cellValue.includes(lowerCaseFilterValue);\n });\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA6B;AAEtB,MAAM,yBAAyE,CACpF,gBACA,WACA,gBACG;AACH,MAAI,CAAC,YAAa,QAAO;AACzB,MAAI,OAAO,gBAAgB,UAAU;AACnC,UAAM,IAAI;AAAA,MACR,+EAA+E,KAAK,UAAU,WAAW,CAAC;AAAA,IAC5G;AAAA,EACF;AACA,QAAM,uBAAuB,YAAY,YAAY;AACrD,SAAO,eAAe,OAAO,CAAC,UAAU;AACtC,QAAI,gBAAgB,+BAAc;AAChC,aAAO,MAAM,SAAS,MAAM,QAAQ,MAAM,SAAS,MAAM,UAAa,MAAM,SAAS,MAAM;AAAA,IAC7F;AACA,UAAM,YAAY,OAAO,MAAM,SAAS,CAAC,EAAE,YAAY;AACvD,WAAO,UAAU,SAAS,oBAAoB;AAAA,EAChD,CAAC;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,7 +43,18 @@ var import_createInternalAndPropsContext = require("../../configs/useStore/creat
|
|
|
43
43
|
var import_styled = require("../../styled.js");
|
|
44
44
|
var import_SortableItemContext = require("../HoC/SortableItemContext.js");
|
|
45
45
|
var import_useCellStyle = require("./useCellStyle.js");
|
|
46
|
-
const PureStandardCell = (0, import_react.memo)(({ cellStyle, children, column }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
46
|
+
const PureStandardCell = (0, import_react.memo)(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
47
|
+
import_styled.StyledCell,
|
|
48
|
+
{
|
|
49
|
+
column,
|
|
50
|
+
style: cellStyle,
|
|
51
|
+
role: "cell",
|
|
52
|
+
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_CELL,
|
|
53
|
+
getOwnerProps,
|
|
54
|
+
getOwnerPropsArguments,
|
|
55
|
+
children
|
|
56
|
+
}
|
|
57
|
+
));
|
|
47
58
|
const Cell = ({
|
|
48
59
|
cell,
|
|
49
60
|
column,
|
|
@@ -110,6 +121,6 @@ const Cell = ({
|
|
|
110
121
|
});
|
|
111
122
|
return null;
|
|
112
123
|
}, [DefaultCellContentJSX, cellProps, column]);
|
|
113
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PureStandardCell, { ...cellProps, children: column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX });
|
|
124
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PureStandardCell, { ...cellProps, getOwnerProps, getOwnerPropsArguments, children: column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX });
|
|
114
125
|
};
|
|
115
126
|
//# sourceMappingURL=Cell.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Cells/Cell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<\n PropsWithChildren<{
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { Grid } from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<\n PropsWithChildren<{\n cellStyle: React.CSSProperties;\n column: DSDataTableT.InternalColumn;\n getOwnerProps: DSDataTableT.GetOwnerPropsT;\n getOwnerPropsArguments: () => DSDataTableT.Cell;\n }>\n>(({ cellStyle, children, column, getOwnerProps, getOwnerPropsArguments }) => (\n <StyledCell\n column={column}\n style={cellStyle}\n role=\"cell\"\n data-testid={DATA_TESTID.DATA_TABLE_CELL}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n </StyledCell>\n));\n\ninterface CellProps {\n cell: DSDataTableT.Cell;\n column: DSDataTableT.InternalColumn;\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n isDragOverlay: boolean;\n}\n\nconst Cell: React.ComponentType<CellProps> = ({\n cell,\n column,\n row,\n isRowSelected,\n shouldAddExpandCell,\n isDragOverlay,\n}) => {\n const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n const isDisabledRow = disabledRows[row.uid];\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);\n\n const cellProps = useMemo(\n () => ({\n ...cellRendererProps,\n cell,\n row,\n isRowSelected,\n draggableProps,\n isDragOverlay,\n role: 'cell',\n cellStyle,\n column,\n isDisabledRow,\n }),\n [cellRendererProps, cell, row, isRowSelected, draggableProps, isDragOverlay, cellStyle, column, isDisabledRow],\n );\n\n const CellComponent = cell.render;\n\n const textValue = useMemo(\n () =>\n appliedTextWrap === 'truncate' ? (\n // @ts-expect-error - data-table typescript is broken\n <SimpleTruncatedTooltipText value={<CellComponent {...cellProps} />} />\n ) : (\n // @ts-expect-error - data-table typescript is broken\n <CellComponent {...cellProps} />\n ),\n [CellComponent, appliedTextWrap, cellProps],\n );\n const pureCellContent = useMemo(() => {\n if (shouldAddExpandCell) {\n return (\n <Grid cols={['min-content', 'auto']} alignItems=\"center\" height=\"100%\">\n {/* @ts-expect-error - data-table typescript is broken */}\n {shouldAddExpandCell && expandRowColumn.Cell && <expandRowColumn.Cell {...cellProps} />}\n {textValue}\n </Grid>\n );\n }\n return textValue;\n }, [cellProps, shouldAddExpandCell, textValue]);\n const DefaultCellContentJSX = useMemo(\n () => (\n <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {pureCellContent}\n </StyledCellContent>\n ),\n [getOwnerProps, getOwnerPropsArguments, pureCellContent],\n );\n\n const EditableContentJSX = useMemo(() => {\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n // @ts-expect-error - data-table typescript is broken\n if (EditableComponent) return <EditableComponent {...cellProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function')\n // @ts-expect-error - data-table typescript is broken\n return column.editable({\n DefaultCellRender: DefaultCellContentJSX,\n ...cellProps,\n }) as JSX.Element;\n\n return null;\n }, [DefaultCellContentJSX, cellProps, column]);\n\n return (\n <PureStandardCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX}\n </PureStandardCell>\n );\n};\n\nexport { Cell };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -74,28 +74,42 @@ const TruncableCellContent = (0, import_react.memo)((props) => {
|
|
|
74
74
|
const ExpandableCellContent = (0, import_react.memo)(
|
|
75
75
|
(props) => import_Columns.expandRowColumn.Cell && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Columns.expandRowColumn.Cell, { ...props })
|
|
76
76
|
);
|
|
77
|
-
const DefaultCellContent = (0, import_react.memo)(
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
});
|
|
81
|
-
const EditableCell = (0, import_react.memo)((props) => {
|
|
82
|
-
const { column } = props;
|
|
83
|
-
const DefaultCellContentJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultCellContent, { ...props });
|
|
84
|
-
if (typeof column.editable === "string") {
|
|
85
|
-
const { EditableComponent } = import_Editables.outOfTheBoxEditables?.[column.editable] ?? {};
|
|
86
|
-
if (EditableComponent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditableComponent, { ...props, DefaultCellRender: DefaultCellContentJSX });
|
|
77
|
+
const DefaultCellContent = (0, import_react.memo)(
|
|
78
|
+
(props) => {
|
|
79
|
+
const { shouldAddExpandCell, getOwnerProps, getOwnerPropsArguments } = props;
|
|
80
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCellContent, { getOwnerProps, getOwnerPropsArguments, children: shouldAddExpandCell ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExpandableCellContent, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruncableCellContent, { ...props }) });
|
|
87
81
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
82
|
+
);
|
|
83
|
+
const EditableCell = (0, import_react.memo)(
|
|
84
|
+
(props) => {
|
|
85
|
+
const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;
|
|
86
|
+
const { column } = restProps;
|
|
87
|
+
const DefaultCellContentJSX = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
88
|
+
DefaultCellContent,
|
|
89
|
+
{
|
|
90
|
+
...restProps,
|
|
91
|
+
getOwnerProps,
|
|
92
|
+
getOwnerPropsArguments
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
if (typeof column.editable === "string") {
|
|
96
|
+
const { EditableComponent } = import_Editables.outOfTheBoxEditables?.[column.editable] ?? {};
|
|
97
|
+
if (EditableComponent) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditableComponent, { ...restProps, DefaultCellRender: DefaultCellContentJSX });
|
|
98
|
+
}
|
|
99
|
+
if (typeof column.editable === "function") {
|
|
100
|
+
const ColumnEditableRenderProps = column.editable;
|
|
101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColumnEditableRenderProps, { ...restProps, DefaultCellRender: DefaultCellContentJSX });
|
|
102
|
+
}
|
|
103
|
+
return null;
|
|
91
104
|
}
|
|
92
|
-
|
|
93
|
-
});
|
|
105
|
+
);
|
|
94
106
|
const CellFactory = (props) => {
|
|
95
|
-
const { column, row } = props;
|
|
107
|
+
const { column, row, cell } = props;
|
|
96
108
|
const cellRendererProps = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.cellRendererProps);
|
|
97
109
|
const disabledRows = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.disabledRows);
|
|
98
110
|
const domIdAffix = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.domIdAffix);
|
|
111
|
+
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
112
|
+
const getOwnerPropsArguments = import_react.default.useCallback(() => cell, [cell]);
|
|
99
113
|
const isDisabledRow = disabledRows[row.uid];
|
|
100
114
|
const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
|
|
101
115
|
const cellProps = (0, import_react.useMemo)(
|
|
@@ -109,6 +123,13 @@ const CellFactory = (props) => {
|
|
|
109
123
|
}),
|
|
110
124
|
[cellRendererProps, props, draggableProps, isDisabledRow, domIdAffix]
|
|
111
125
|
);
|
|
112
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PureStandardCell, { ...cellProps, children: column.editable && !disabledRows[row.uid] ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditableCell, { ...cellProps }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PureStandardCell, { ...cellProps, children: column.editable && !disabledRows[row.uid] ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditableCell, { ...cellProps, getOwnerProps, getOwnerPropsArguments }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
127
|
+
DefaultCellContent,
|
|
128
|
+
{
|
|
129
|
+
...cellProps,
|
|
130
|
+
getOwnerProps,
|
|
131
|
+
getOwnerPropsArguments
|
|
132
|
+
}
|
|
133
|
+
) });
|
|
113
134
|
};
|
|
114
135
|
//# sourceMappingURL=CellFactory.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Cells/CellFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<PropsWithChildren<DSDataTableT.CellProps>>(\n ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {\n const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n return (\n <StyledCell\n column={column}\n style={cellStyle}\n role=\"cell\"\n data-testid={DATA_TESTID.DATA_TABLE_CELL}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n </StyledCell>\n );\n },\n);\n\nconst TruncableCellContent = memo((props: DSDataTableT.CellProps) => {\n const { cell, column } = props;\n const { render: CellComponent } = cell;\n\n const textWrap = usePropsStore((state) => state.textWrap);\n const appliedTextWrap = column.textWrap || textWrap;\n if (appliedTextWrap === 'truncate') {\n return <SimpleTruncatedTooltipText value={<CellComponent {...props} />} />;\n }\n return <CellComponent {...props} />;\n});\n\nconst ExpandableCellContent = memo(\n (props: DSDataTableT.CellProps) => expandRowColumn.Cell && <expandRowColumn.Cell {...props} />,\n);\n\nconst DefaultCellContent = memo((props: DSDataTableT.CellProps) => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkBjB;AAjBN,uCAA2C;AAC3C,mBAAyE;AACzE,qBAAgC;AAChC,uBAAqC;AACrC,uBAA4B;AAC5B,2CAA8B;AAE9B,oBAA8C;AAC9C,iCAAoC;AACpC,0BAA6B;AAE7B,MAAM,uBAAmB;AAAA,EACvB,CAAC,EAAE,QAAQ,MAAM,qBAAqB,sBAAsB,KAAK,SAAS,MAAM;AAC9E,UAAM,gBAAY,kCAAa,QAAQ,qBAAqB,sBAAsB,GAAG,EAAE,CAAC;AACxF,UAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,UAAM,yBAAyB,aAAAA,QAAM,YAAY,MAAM,MAAM,CAAC,IAAI,CAAC;AACnE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,MAAK;AAAA,QACL,eAAa,6BAAY;AAAA,QACzB;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,MAAM,2BAAuB,mBAAK,CAAC,UAAkC;AACnE,QAAM,EAAE,MAAM,OAAO,IAAI;AACzB,QAAM,EAAE,QAAQ,cAAc,IAAI;AAElC,QAAM,eAAW,oDAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,kBAAkB,OAAO,YAAY;AAC3C,MAAI,oBAAoB,YAAY;AAClC,WAAO,4CAAC,+DAA2B,OAAO,4CAAC,iBAAe,GAAG,OAAO,GAAI;AAAA,EAC1E;AACA,SAAO,4CAAC,iBAAe,GAAG,OAAO;AACnC,CAAC;AAED,MAAM,4BAAwB;AAAA,EAC5B,CAAC,UAAkC,+BAAgB,QAAQ,4CAAC,+BAAgB,MAAhB,EAAsB,GAAG,OAAO;AAC9F;AAEA,MAAM,yBAAqB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport React, { memo, useContext, useMemo, type PropsWithChildren } from 'react';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { outOfTheBoxEditables } from '../../addons/Editables/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { StyledCell, StyledCellContent } from '../../styled.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { useCellStyle } from './useCellStyle.js';\n\nconst PureStandardCell = memo<PropsWithChildren<DSDataTableT.CellProps>>(\n ({ column, cell, shouldAddExpandCell, cellIsNextToExpander, row, children }) => {\n const cellStyle = useCellStyle(column, shouldAddExpandCell, cellIsNextToExpander, row)[1];\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n return (\n <StyledCell\n column={column}\n style={cellStyle}\n role=\"cell\"\n data-testid={DATA_TESTID.DATA_TABLE_CELL}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n </StyledCell>\n );\n },\n);\n\nconst TruncableCellContent = memo((props: DSDataTableT.CellProps) => {\n const { cell, column } = props;\n const { render: CellComponent } = cell;\n\n const textWrap = usePropsStore((state) => state.textWrap);\n const appliedTextWrap = column.textWrap || textWrap;\n if (appliedTextWrap === 'truncate') {\n return <SimpleTruncatedTooltipText value={<CellComponent {...props} />} />;\n }\n return <CellComponent {...props} />;\n});\n\nconst ExpandableCellContent = memo(\n (props: DSDataTableT.CellProps) => expandRowColumn.Cell && <expandRowColumn.Cell {...props} />,\n);\n\nconst DefaultCellContent = memo(\n (\n props: DSDataTableT.CellProps & {\n getOwnerProps: DSDataTableT.GetOwnerPropsT;\n getOwnerPropsArguments: () => DSDataTableT.Cell;\n },\n ) => {\n const { shouldAddExpandCell, getOwnerProps, getOwnerPropsArguments } = props;\n\n return (\n <StyledCellContent getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {shouldAddExpandCell ? <ExpandableCellContent {...props} /> : <TruncableCellContent {...props} />}\n </StyledCellContent>\n );\n },\n);\n\nconst EditableCell = memo(\n (\n props: DSDataTableT.CellProps & {\n getOwnerProps: DSDataTableT.GetOwnerPropsT;\n getOwnerPropsArguments: () => DSDataTableT.Cell;\n },\n ) => {\n const { getOwnerProps, getOwnerPropsArguments, ...restProps } = props;\n const { column } = restProps;\n const DefaultCellContentJSX = (\n <DefaultCellContent\n {...restProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n );\n\n if (typeof column.editable === 'string') {\n const { EditableComponent } = outOfTheBoxEditables?.[column.editable] ?? {};\n // @ts-expect-error - data-table typescript is broken\n if (EditableComponent) return <EditableComponent {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n if (typeof column.editable === 'function') {\n const ColumnEditableRenderProps = column.editable as React.ComponentType<\n DSDataTableT.CellProps & { DefaultCellRender: JSX.Element }\n >;\n return <ColumnEditableRenderProps {...restProps} DefaultCellRender={DefaultCellContentJSX} />;\n }\n\n return null;\n },\n);\n\ninterface CellFactoryProps {\n cell: DSDataTableT.Cell;\n column: DSDataTableT.InternalColumn;\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n shouldAddExpandCell: boolean;\n cellIsNextToExpander: boolean;\n isDragOverlay: boolean;\n}\n\nconst CellFactory: React.ComponentType<CellFactoryProps> = (props) => {\n const { column, row, cell } = props;\n const cellRendererProps = usePropsStore((state) => state.cellRendererProps);\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = React.useCallback(() => cell, [cell]);\n\n const isDisabledRow = disabledRows[row.uid];\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const cellProps: DSDataTableT.CellProps = useMemo(\n () => ({\n ...cellRendererProps,\n ...props,\n role: 'cell',\n draggableProps,\n isDisabledRow,\n domIdAffix,\n }),\n [cellRendererProps, props, draggableProps, isDisabledRow, domIdAffix],\n );\n\n return (\n <PureStandardCell {...cellProps}>\n {column.editable && !disabledRows[row.uid] ? (\n <EditableCell {...cellProps} getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n ) : (\n <DefaultCellContent\n {...cellProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n </PureStandardCell>\n );\n};\n\nexport { CellFactory };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|