@elliemae/ds-data-table 3.60.0-next.43 → 3.60.0-next.45
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/Filters/Components/CurrencyRangeFilter/CurrencyRangeFilterV2.js +11 -0
- package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/CurrencyRangeFilterV2.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js +11 -0
- package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/CurrencyRangeFilterV2.js +11 -0
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/CurrencyRangeFilterV2.js.map +2 -2
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js +11 -0
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/package.json +30 -30
|
@@ -41,6 +41,7 @@ var import_ds_form_layout_blocks = require("@elliemae/ds-form-layout-blocks");
|
|
|
41
41
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
42
42
|
var import_uid = require("uid");
|
|
43
43
|
var import_exported_related = require("../../../../exported-related/index.js");
|
|
44
|
+
var import_styled = require("../../../../styled.js");
|
|
44
45
|
var import_constants = require("../../../../configs/constants.js");
|
|
45
46
|
var import_FilterPopoverV2 = require("../../../../exported-related/FilterPopover/FilterPopoverV2.js");
|
|
46
47
|
const opts = {
|
|
@@ -62,6 +63,7 @@ const CurrencyRangeFilterV2 = (props) => {
|
|
|
62
63
|
} = props;
|
|
63
64
|
const [from, setFrom] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.from ?? "", opts));
|
|
64
65
|
const [to, setTo] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.to ?? "", opts));
|
|
66
|
+
const groupLabelId = `${idPreffix}-group-label-${column.id}-${domIdAffix}`;
|
|
65
67
|
const ref = (0, import_react.useRef)(null);
|
|
66
68
|
const shouldFocus = (0, import_react.useRef)(true);
|
|
67
69
|
const fromInputProps = (0, import_ds_form_helpers_mask_hooks.useNumberMask)({
|
|
@@ -138,7 +140,16 @@ const CurrencyRangeFilterV2 = (props) => {
|
|
|
138
140
|
cols: ["auto", "auto"],
|
|
139
141
|
style: { background: "white" },
|
|
140
142
|
onKeyDown: handleOnKeyDown,
|
|
143
|
+
role: "group",
|
|
144
|
+
"aria-labelledby": groupLabelId,
|
|
141
145
|
children: [
|
|
146
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
147
|
+
import_styled.ScreenReaderOnly,
|
|
148
|
+
{
|
|
149
|
+
id: groupLabelId,
|
|
150
|
+
children: `${typeof column.Header === "string" && column.Header !== "" ? column.Header : "Currency"} range`
|
|
151
|
+
}
|
|
152
|
+
),
|
|
142
153
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_layout_blocks.DSFormLayoutBlockItem, { label: "Min", inputID: `${idPreffix}-min-${column.id}-${domIdAffix}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
143
154
|
import_ds_form_input_text.DSInputText,
|
|
144
155
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/CurrencyRangeFilterV2.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 { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FilterPopoverV2 } from '../../../../exported-related/FilterPopover/FilterPopoverV2.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 CurrencyRangeFilterV2: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (\n props,\n) => {\n const {\n column,\n referenceColumn,\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 const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n\n const fromInputProps = useNumberMask({\n valueSetter: setFrom,\n ...opts,\n });\n\n const toInputProps = useNumberMask({\n valueSetter: setTo,\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 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 // menu closed without applying: discard draft and sync with applied filter\n setFrom(getNumberMaskedValue(filterValue.from ?? '', opts));\n setTo(getNumberMaskedValue(filterValue.to ?? '', opts));\n }\n }, [filterValue.from, filterValue.to, reduxHeader?.hideFilterMenu]);\n\n const handleSubmit = useCallback(\n (e: React.SyntheticEvent) => {\n e.preventDefault();\n if (!from || !to) {\n return;\n }\n\n onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, { from: from ?? '', to: to ?? '' });\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n },\n [column.id, from, to, innerRef, onValueChange, patchHeader],\n );\n\n const handleReset = useCallback(() => {\n setFrom('');\n setTo('');\n onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, undefined);\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n }, [column.id, innerRef, onValueChange, patchHeader]);\n\n return (\n <FilterPopoverV2\n onFilterSubmit={handleSubmit}\n onFilterReset={handleReset}\n firstElementRef={ref}\n reduxHeader={reduxHeader}\n column={column}\n columnReference={referenceColumn}\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: referenceColumn?.offsetWidth }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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 { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { ScreenReaderOnly } from '../../../../styled.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FilterPopoverV2 } from '../../../../exported-related/FilterPopover/FilterPopoverV2.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 CurrencyRangeFilterV2: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (\n props,\n) => {\n const {\n column,\n referenceColumn,\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 const groupLabelId = `${idPreffix}-group-label-${column.id}-${domIdAffix}`;\n\n const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n\n const fromInputProps = useNumberMask({\n valueSetter: setFrom,\n ...opts,\n });\n\n const toInputProps = useNumberMask({\n valueSetter: setTo,\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 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 // menu closed without applying: discard draft and sync with applied filter\n setFrom(getNumberMaskedValue(filterValue.from ?? '', opts));\n setTo(getNumberMaskedValue(filterValue.to ?? '', opts));\n }\n }, [filterValue.from, filterValue.to, reduxHeader?.hideFilterMenu]);\n\n const handleSubmit = useCallback(\n (e: React.SyntheticEvent) => {\n e.preventDefault();\n if (!from || !to) {\n return;\n }\n\n onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, { from: from ?? '', to: to ?? '' });\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n },\n [column.id, from, to, innerRef, onValueChange, patchHeader],\n );\n\n const handleReset = useCallback(() => {\n setFrom('');\n setTo('');\n onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, undefined);\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n }, [column.id, innerRef, onValueChange, patchHeader]);\n\n return (\n <FilterPopoverV2\n onFilterSubmit={handleSubmit}\n onFilterReset={handleReset}\n firstElementRef={ref}\n reduxHeader={reduxHeader}\n column={column}\n columnReference={referenceColumn}\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 role=\"group\"\n aria-labelledby={groupLabelId}\n >\n <ScreenReaderOnly\n id={groupLabelId}\n >{`${typeof column.Header === 'string' && column.Header !== '' ? column.Header : 'Currency'} range`}</ScreenReaderOnly>\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: referenceColumn?.offsetWidth }}\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
|
}
|
|
@@ -42,6 +42,7 @@ var import_ds_icons = require("@elliemae/ds-icons");
|
|
|
42
42
|
var import_uid = require("uid");
|
|
43
43
|
var import_exported_related = require("../../../../exported-related/index.js");
|
|
44
44
|
var import_constants = require("../../../../configs/constants.js");
|
|
45
|
+
var import_styled = require("../../../../styled.js");
|
|
45
46
|
const opts = {
|
|
46
47
|
includeThousandsSeparator: false,
|
|
47
48
|
decimalPlaces: 2,
|
|
@@ -61,6 +62,7 @@ const CurrencyRangeFilter = (props) => {
|
|
|
61
62
|
} = props;
|
|
62
63
|
const [from, setFrom] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.from ?? "", opts));
|
|
63
64
|
const [to, setTo] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.to ?? "", opts));
|
|
65
|
+
const groupLabelId = `${idPreffix}-group-label-${column.id}-${domIdAffix}`;
|
|
64
66
|
(0, import_react.useEffect)(() => {
|
|
65
67
|
setFrom(filterValue.from ?? "");
|
|
66
68
|
setTo(filterValue.to ?? "");
|
|
@@ -140,7 +142,16 @@ const CurrencyRangeFilter = (props) => {
|
|
|
140
142
|
cols: ["auto", "auto"],
|
|
141
143
|
style: { background: "white" },
|
|
142
144
|
onKeyDown: handleOnKeyDown,
|
|
145
|
+
role: "group",
|
|
146
|
+
"aria-labelledby": groupLabelId,
|
|
143
147
|
children: [
|
|
148
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
149
|
+
import_styled.ScreenReaderOnly,
|
|
150
|
+
{
|
|
151
|
+
id: groupLabelId,
|
|
152
|
+
children: `${typeof column.Header === "string" && column.Header !== "" ? column.Header : "Currency"} range`
|
|
153
|
+
}
|
|
154
|
+
),
|
|
144
155
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_form_layout_blocks.DSFormLayoutBlockItem, { label: "Min", inputID: `${idPreffix}-min-${column.id}-${domIdAffix}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
145
156
|
import_ds_form_input_text.DSInputText,
|
|
146
157
|
{
|
|
@@ -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 referenceColumn,\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 lastElementRef = 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 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 firstElementRef={ref}\n lastElementRef={lastElementRef}\n reduxHeader={reduxHeader}\n column={column}\n columnReference={referenceColumn}\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 innerRef={lastElementRef}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: referenceColumn?.offsetWidth }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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';\nimport { ScreenReaderOnly } from '../../../../styled.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 referenceColumn,\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 const groupLabelId = `${idPreffix}-group-label-${column.id}-${domIdAffix}`;\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 lastElementRef = 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 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 firstElementRef={ref}\n lastElementRef={lastElementRef}\n reduxHeader={reduxHeader}\n column={column}\n columnReference={referenceColumn}\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 role=\"group\"\n aria-labelledby={groupLabelId}\n >\n <ScreenReaderOnly\n id={groupLabelId}\n >{`${typeof column.Header === 'string' && column.Header !== '' ? column.Header : 'Currency'} range`}</ScreenReaderOnly>\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 innerRef={lastElementRef}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: referenceColumn?.offsetWidth }}\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
|
}
|
|
@@ -8,6 +8,7 @@ import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
|
|
|
8
8
|
import { SearchXsmall } from "@elliemae/ds-icons";
|
|
9
9
|
import { uid } from "uid";
|
|
10
10
|
import { FILTER_TYPES } from "../../../../exported-related/index.js";
|
|
11
|
+
import { ScreenReaderOnly } from "../../../../styled.js";
|
|
11
12
|
import { DATA_TESTID } from "../../../../configs/constants.js";
|
|
12
13
|
import { FilterPopoverV2 } from "../../../../exported-related/FilterPopover/FilterPopoverV2.js";
|
|
13
14
|
const opts = {
|
|
@@ -29,6 +30,7 @@ const CurrencyRangeFilterV2 = (props) => {
|
|
|
29
30
|
} = props;
|
|
30
31
|
const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? "", opts));
|
|
31
32
|
const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? "", opts));
|
|
33
|
+
const groupLabelId = `${idPreffix}-group-label-${column.id}-${domIdAffix}`;
|
|
32
34
|
const ref = useRef(null);
|
|
33
35
|
const shouldFocus = useRef(true);
|
|
34
36
|
const fromInputProps = useNumberMask({
|
|
@@ -105,7 +107,16 @@ const CurrencyRangeFilterV2 = (props) => {
|
|
|
105
107
|
cols: ["auto", "auto"],
|
|
106
108
|
style: { background: "white" },
|
|
107
109
|
onKeyDown: handleOnKeyDown,
|
|
110
|
+
role: "group",
|
|
111
|
+
"aria-labelledby": groupLabelId,
|
|
108
112
|
children: [
|
|
113
|
+
/* @__PURE__ */ jsx(
|
|
114
|
+
ScreenReaderOnly,
|
|
115
|
+
{
|
|
116
|
+
id: groupLabelId,
|
|
117
|
+
children: `${typeof column.Header === "string" && column.Header !== "" ? column.Header : "Currency"} range`
|
|
118
|
+
}
|
|
119
|
+
),
|
|
109
120
|
/* @__PURE__ */ jsx(DSFormLayoutBlockItem, { label: "Min", inputID: `${idPreffix}-min-${column.id}-${domIdAffix}`, children: /* @__PURE__ */ jsx(
|
|
110
121
|
DSInputText,
|
|
111
122
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/CurrencyRangeFilterV2.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FilterPopoverV2 } from '../../../../exported-related/FilterPopover/FilterPopoverV2.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 CurrencyRangeFilterV2: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (\n props,\n) => {\n const {\n column,\n referenceColumn,\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 const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n\n const fromInputProps = useNumberMask({\n valueSetter: setFrom,\n ...opts,\n });\n\n const toInputProps = useNumberMask({\n valueSetter: setTo,\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 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 // menu closed without applying: discard draft and sync with applied filter\n setFrom(getNumberMaskedValue(filterValue.from ?? '', opts));\n setTo(getNumberMaskedValue(filterValue.to ?? '', opts));\n }\n }, [filterValue.from, filterValue.to, reduxHeader?.hideFilterMenu]);\n\n const handleSubmit = useCallback(\n (e: React.SyntheticEvent) => {\n e.preventDefault();\n if (!from || !to) {\n return;\n }\n\n onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, { from: from ?? '', to: to ?? '' });\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n },\n [column.id, from, to, innerRef, onValueChange, patchHeader],\n );\n\n const handleReset = useCallback(() => {\n setFrom('');\n setTo('');\n onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, undefined);\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n }, [column.id, innerRef, onValueChange, patchHeader]);\n\n return (\n <FilterPopoverV2\n onFilterSubmit={handleSubmit}\n onFilterReset={handleReset}\n firstElementRef={ref}\n reduxHeader={reduxHeader}\n column={column}\n columnReference={referenceColumn}\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: referenceColumn?.offsetWidth }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { ScreenReaderOnly } from '../../../../styled.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FilterPopoverV2 } from '../../../../exported-related/FilterPopover/FilterPopoverV2.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 CurrencyRangeFilterV2: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (\n props,\n) => {\n const {\n column,\n referenceColumn,\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 const groupLabelId = `${idPreffix}-group-label-${column.id}-${domIdAffix}`;\n\n const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n\n const fromInputProps = useNumberMask({\n valueSetter: setFrom,\n ...opts,\n });\n\n const toInputProps = useNumberMask({\n valueSetter: setTo,\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 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 // menu closed without applying: discard draft and sync with applied filter\n setFrom(getNumberMaskedValue(filterValue.from ?? '', opts));\n setTo(getNumberMaskedValue(filterValue.to ?? '', opts));\n }\n }, [filterValue.from, filterValue.to, reduxHeader?.hideFilterMenu]);\n\n const handleSubmit = useCallback(\n (e: React.SyntheticEvent) => {\n e.preventDefault();\n if (!from || !to) {\n return;\n }\n\n onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, { from: from ?? '', to: to ?? '' });\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n },\n [column.id, from, to, innerRef, onValueChange, patchHeader],\n );\n\n const handleReset = useCallback(() => {\n setFrom('');\n setTo('');\n onValueChange(FILTER_TYPES.CURRENCY_RANGE_V2, undefined);\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n }, [column.id, innerRef, onValueChange, patchHeader]);\n\n return (\n <FilterPopoverV2\n onFilterSubmit={handleSubmit}\n onFilterReset={handleReset}\n firstElementRef={ref}\n reduxHeader={reduxHeader}\n column={column}\n columnReference={referenceColumn}\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 role=\"group\"\n aria-labelledby={groupLabelId}\n >\n <ScreenReaderOnly\n id={groupLabelId}\n >{`${typeof column.Header === 'string' && column.Header !== '' ? column.Header : 'Currency'} range`}</ScreenReaderOnly>\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: referenceColumn?.offsetWidth }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,6 +9,7 @@ import { SearchXsmall } from "@elliemae/ds-icons";
|
|
|
9
9
|
import { uid } from "uid";
|
|
10
10
|
import { FilterPopover, FILTER_TYPES } from "../../../../exported-related/index.js";
|
|
11
11
|
import { DATA_TESTID } from "../../../../configs/constants.js";
|
|
12
|
+
import { ScreenReaderOnly } from "../../../../styled.js";
|
|
12
13
|
const opts = {
|
|
13
14
|
includeThousandsSeparator: false,
|
|
14
15
|
decimalPlaces: 2,
|
|
@@ -28,6 +29,7 @@ const CurrencyRangeFilter = (props) => {
|
|
|
28
29
|
} = props;
|
|
29
30
|
const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? "", opts));
|
|
30
31
|
const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? "", opts));
|
|
32
|
+
const groupLabelId = `${idPreffix}-group-label-${column.id}-${domIdAffix}`;
|
|
31
33
|
useEffect(() => {
|
|
32
34
|
setFrom(filterValue.from ?? "");
|
|
33
35
|
setTo(filterValue.to ?? "");
|
|
@@ -107,7 +109,16 @@ const CurrencyRangeFilter = (props) => {
|
|
|
107
109
|
cols: ["auto", "auto"],
|
|
108
110
|
style: { background: "white" },
|
|
109
111
|
onKeyDown: handleOnKeyDown,
|
|
112
|
+
role: "group",
|
|
113
|
+
"aria-labelledby": groupLabelId,
|
|
110
114
|
children: [
|
|
115
|
+
/* @__PURE__ */ jsx(
|
|
116
|
+
ScreenReaderOnly,
|
|
117
|
+
{
|
|
118
|
+
id: groupLabelId,
|
|
119
|
+
children: `${typeof column.Header === "string" && column.Header !== "" ? column.Header : "Currency"} range`
|
|
120
|
+
}
|
|
121
|
+
),
|
|
111
122
|
/* @__PURE__ */ jsx(DSFormLayoutBlockItem, { label: "Min", inputID: `${idPreffix}-min-${column.id}-${domIdAffix}`, children: /* @__PURE__ */ jsx(
|
|
112
123
|
DSInputText,
|
|
113
124
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 referenceColumn,\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 lastElementRef = 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 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 firstElementRef={ref}\n lastElementRef={lastElementRef}\n reduxHeader={reduxHeader}\n column={column}\n columnReference={referenceColumn}\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 innerRef={lastElementRef}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: referenceColumn?.offsetWidth }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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';\nimport { ScreenReaderOnly } from '../../../../styled.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 referenceColumn,\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 const groupLabelId = `${idPreffix}-group-label-${column.id}-${domIdAffix}`;\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 lastElementRef = 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 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 firstElementRef={ref}\n lastElementRef={lastElementRef}\n reduxHeader={reduxHeader}\n column={column}\n columnReference={referenceColumn}\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 role=\"group\"\n aria-labelledby={groupLabelId}\n >\n <ScreenReaderOnly\n id={groupLabelId}\n >{`${typeof column.Header === 'string' && column.Header !== '' ? column.Header : 'Currency'} range`}</ScreenReaderOnly>\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 innerRef={lastElementRef}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: referenceColumn?.offsetWidth }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.60.0-next.
|
|
3
|
+
"version": "3.60.0-next.45",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -40,40 +40,40 @@
|
|
|
40
40
|
"react-virtual": "~2.10.4",
|
|
41
41
|
"uid": "^2.0.2",
|
|
42
42
|
"use-onclickoutside": "0.4.1",
|
|
43
|
-
"@elliemae/ds-button-v2": "3.60.0-next.
|
|
44
|
-
"@elliemae/ds-circular-progress-indicator": "3.60.0-next.
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-form-combobox": "3.60.0-next.
|
|
50
|
-
"@elliemae/ds-form-date-range-picker": "3.60.0-next.
|
|
51
|
-
"@elliemae/ds-form-
|
|
52
|
-
"@elliemae/ds-form-
|
|
53
|
-
"@elliemae/ds-form-input-text": "3.60.0-next.
|
|
54
|
-
"@elliemae/ds-form-layout-blocks": "3.60.0-next.
|
|
55
|
-
"@elliemae/ds-form-radio": "3.60.0-next.
|
|
56
|
-
"@elliemae/ds-grid": "3.60.0-next.
|
|
57
|
-
"@elliemae/ds-hooks-focus-trap": "3.60.0-next.
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"@elliemae/ds-pagination": "3.60.0-next.
|
|
61
|
-
"@elliemae/ds-pills-v2": "3.60.0-next.
|
|
62
|
-
"@elliemae/ds-popperjs": "3.60.0-next.
|
|
63
|
-
"@elliemae/ds-props-helpers": "3.60.0-next.
|
|
64
|
-
"@elliemae/ds-
|
|
65
|
-
"@elliemae/ds-
|
|
66
|
-
"@elliemae/ds-truncated-tooltip-text": "3.60.0-next.
|
|
67
|
-
"@elliemae/ds-typescript-helpers": "3.60.0-next.
|
|
68
|
-
"@elliemae/ds-zustand-helpers": "3.60.0-next.
|
|
43
|
+
"@elliemae/ds-button-v2": "3.60.0-next.45",
|
|
44
|
+
"@elliemae/ds-circular-progress-indicator": "3.60.0-next.45",
|
|
45
|
+
"@elliemae/ds-dropdownmenu-v2": "3.60.0-next.45",
|
|
46
|
+
"@elliemae/ds-drag-and-drop": "3.60.0-next.45",
|
|
47
|
+
"@elliemae/ds-floating-context": "3.60.0-next.45",
|
|
48
|
+
"@elliemae/ds-form-checkbox": "3.60.0-next.45",
|
|
49
|
+
"@elliemae/ds-form-combobox": "3.60.0-next.45",
|
|
50
|
+
"@elliemae/ds-form-date-range-picker": "3.60.0-next.45",
|
|
51
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.60.0-next.45",
|
|
52
|
+
"@elliemae/ds-form-date-time-picker": "3.60.0-next.45",
|
|
53
|
+
"@elliemae/ds-form-input-text": "3.60.0-next.45",
|
|
54
|
+
"@elliemae/ds-form-layout-blocks": "3.60.0-next.45",
|
|
55
|
+
"@elliemae/ds-form-radio": "3.60.0-next.45",
|
|
56
|
+
"@elliemae/ds-grid": "3.60.0-next.45",
|
|
57
|
+
"@elliemae/ds-hooks-focus-trap": "3.60.0-next.45",
|
|
58
|
+
"@elliemae/ds-icons": "3.60.0-next.45",
|
|
59
|
+
"@elliemae/ds-menu-button": "3.60.0-next.45",
|
|
60
|
+
"@elliemae/ds-pagination": "3.60.0-next.45",
|
|
61
|
+
"@elliemae/ds-pills-v2": "3.60.0-next.45",
|
|
62
|
+
"@elliemae/ds-popperjs": "3.60.0-next.45",
|
|
63
|
+
"@elliemae/ds-props-helpers": "3.60.0-next.45",
|
|
64
|
+
"@elliemae/ds-system": "3.60.0-next.45",
|
|
65
|
+
"@elliemae/ds-skeleton": "3.60.0-next.45",
|
|
66
|
+
"@elliemae/ds-truncated-tooltip-text": "3.60.0-next.45",
|
|
67
|
+
"@elliemae/ds-typescript-helpers": "3.60.0-next.45",
|
|
68
|
+
"@elliemae/ds-zustand-helpers": "3.60.0-next.45"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"jest": "^30.0.0",
|
|
72
72
|
"styled-components": "~5.3.9",
|
|
73
73
|
"styled-system": "^5.1.5",
|
|
74
|
-
"@elliemae/ds-monorepo-devops": "3.60.0-next.
|
|
75
|
-
"@elliemae/ds-test-utils": "3.60.0-next.
|
|
76
|
-
"@elliemae/ds-toolbar-v2": "3.60.0-next.
|
|
74
|
+
"@elliemae/ds-monorepo-devops": "3.60.0-next.45",
|
|
75
|
+
"@elliemae/ds-test-utils": "3.60.0-next.45",
|
|
76
|
+
"@elliemae/ds-toolbar-v2": "3.60.0-next.45"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|
|
79
79
|
"lodash-es": "^4.17.21",
|