@elliemae/ds-data-table 3.55.0-next.10 → 3.55.0-next.12
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/index.js +2 -1
- package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/FreeTextSearchFilter/index.js +2 -1
- package/dist/cjs/addons/Filters/Components/FreeTextSearchFilter/index.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/NumberRangeFilter/index.js +2 -1
- package/dist/cjs/addons/Filters/Components/NumberRangeFilter/index.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +1 -0
- package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/SelectFilter/MultiCreatableFilter.js +3 -1
- package/dist/cjs/addons/Filters/Components/SelectFilter/MultiCreatableFilter.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/SelectFilter/MultiSelectFilter.js +3 -1
- package/dist/cjs/addons/Filters/Components/SelectFilter/MultiSelectFilter.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/SelectFilter/SingleCreatableFilter.js +3 -1
- package/dist/cjs/addons/Filters/Components/SelectFilter/SingleCreatableFilter.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/SelectFilter/SingleSelectFilter.js +3 -1
- package/dist/cjs/addons/Filters/Components/SelectFilter/SingleSelectFilter.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js +15 -10
- package/dist/cjs/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js +2 -1
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/dist/esm/addons/Filters/Components/FreeTextSearchFilter/index.js +2 -1
- package/dist/esm/addons/Filters/Components/FreeTextSearchFilter/index.js.map +2 -2
- package/dist/esm/addons/Filters/Components/NumberRangeFilter/index.js +2 -1
- package/dist/esm/addons/Filters/Components/NumberRangeFilter/index.js.map +2 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +1 -0
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/MultiCreatableFilter.js +3 -1
- package/dist/esm/addons/Filters/Components/SelectFilter/MultiCreatableFilter.js.map +2 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/MultiSelectFilter.js +3 -1
- package/dist/esm/addons/Filters/Components/SelectFilter/MultiSelectFilter.js.map +2 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/SingleCreatableFilter.js +3 -1
- package/dist/esm/addons/Filters/Components/SelectFilter/SingleCreatableFilter.js.map +2 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/SingleSelectFilter.js +3 -1
- package/dist/esm/addons/Filters/Components/SelectFilter/SingleSelectFilter.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js +16 -11
- package/dist/esm/parts/Headers/HeaderCell.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
|
@@ -51,6 +51,7 @@ const idPreffix = "datatable-currency-range";
|
|
|
51
51
|
const CurrencyRangeFilter = (props) => {
|
|
52
52
|
const {
|
|
53
53
|
column,
|
|
54
|
+
columnWidth,
|
|
54
55
|
filterValue = { from: null, to: null },
|
|
55
56
|
reduxHeader,
|
|
56
57
|
patchHeader,
|
|
@@ -161,7 +162,7 @@ const CurrencyRangeFilter = (props) => {
|
|
|
161
162
|
}
|
|
162
163
|
),
|
|
163
164
|
triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.SearchXsmall, {}),
|
|
164
|
-
customStyles: { width:
|
|
165
|
+
customStyles: { width: columnWidth },
|
|
165
166
|
innerRef,
|
|
166
167
|
ariaLabel: "Open Currency Range Filter"
|
|
167
168
|
}
|
|
@@ -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(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:
|
|
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';\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 columnWidth,\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: columnWidth }}\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,6 +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
|
+
columnWidth,
|
|
54
55
|
column: { id, persistFilterInputAfterSubmit = false },
|
|
55
56
|
onValueChange,
|
|
56
57
|
patchHeaderFilterButtonAndMenu,
|
|
@@ -105,7 +106,7 @@ const FreeTextSearchFilter = (props) => {
|
|
|
105
106
|
columnId: id,
|
|
106
107
|
customStyles: {
|
|
107
108
|
backgroundColor: "#fff",
|
|
108
|
-
width:
|
|
109
|
+
width: columnWidth,
|
|
109
110
|
minWidth: "80px"
|
|
110
111
|
},
|
|
111
112
|
menuContent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { p: "xxs", gutter: "xxs", style: { background: "white" }, children: [
|
|
@@ -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, 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:
|
|
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 columnWidth,\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: columnWidth,\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;ADqFf;AArFR,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;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;AAAA,QACP,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
|
}
|
|
@@ -54,6 +54,7 @@ const conform = (value) => {
|
|
|
54
54
|
const NumberRangeFilter = (props) => {
|
|
55
55
|
const {
|
|
56
56
|
column,
|
|
57
|
+
columnWidth,
|
|
57
58
|
filterValue = { from: null, to: null },
|
|
58
59
|
reduxHeader,
|
|
59
60
|
patchHeader,
|
|
@@ -153,7 +154,7 @@ const NumberRangeFilter = (props) => {
|
|
|
153
154
|
}
|
|
154
155
|
),
|
|
155
156
|
triggerIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.SearchXsmall, {}),
|
|
156
|
-
customStyles: { width:
|
|
157
|
+
customStyles: { width: columnWidth },
|
|
157
158
|
innerRef,
|
|
158
159
|
ariaLabel: "Open Number Range Filter"
|
|
159
160
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/NumberRangeFilter/index.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue } 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\ninterface NumberRangeFilterValue {\n from: number | '' | null;\n to: number | '' | null;\n}\n\nconst opts = {\n includeThousandsSeparator: false,\n decimalPlaces: 0,\n};\n\nconst idPreffix = 'datatable-number-range';\n\nconst conform = (value: number | string | null) => {\n const valueAsString = value?.toString() ?? '';\n return getNumberMaskedValue(valueAsString, opts);\n};\n\nexport const NumberRangeFilter: React.ComponentType<DSDataTableT.FilterProps<NumberRangeFilterValue>> = (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 handleFromChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const from: NumberRangeFilterValue['from'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n from,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n },\n [filterValue, onValueChange],\n );\n\n const handleToChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const to: NumberRangeFilterValue['to'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n to,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n },\n [filterValue, onValueChange],\n );\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const onKeyDownHandler = 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 ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\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_NUMBER_RANGE_CONTROLLER}\n gutter=\"xxxs\"\n padding=\"xxs\"\n cols={['auto', 'auto']}\n style={{ background: 'white' }}\n >\n <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={conform(filterValue.from)}\n onChange={handleFromChange}\n id={`${idPreffix}-low-${column.id}-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0\"\n innerRef={handleRef}\n onKeyDown={onKeyDownHandler}\n />\n </DSFormLayoutBlockItem>\n <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={conform(filterValue.to)}\n onChange={handleToChange}\n id={`${idPreffix}-high-${column.id}-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0\"\n onKeyDown={onKeyDownHandler}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue } 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\ninterface NumberRangeFilterValue {\n from: number | '' | null;\n to: number | '' | null;\n}\n\nconst opts = {\n includeThousandsSeparator: false,\n decimalPlaces: 0,\n};\n\nconst idPreffix = 'datatable-number-range';\n\nconst conform = (value: number | string | null) => {\n const valueAsString = value?.toString() ?? '';\n return getNumberMaskedValue(valueAsString, opts);\n};\n\nexport const NumberRangeFilter: React.ComponentType<DSDataTableT.FilterProps<NumberRangeFilterValue>> = (props) => {\n const {\n column,\n columnWidth,\n filterValue = { from: null, to: null },\n reduxHeader,\n patchHeader,\n onValueChange,\n innerRef,\n domIdAffix = uid(4),\n } = props;\n\n const handleFromChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const from: NumberRangeFilterValue['from'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n from,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n },\n [filterValue, onValueChange],\n );\n\n const handleToChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const to: NumberRangeFilterValue['to'] = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n to,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n },\n [filterValue, onValueChange],\n );\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const onKeyDownHandler = 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 ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\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_NUMBER_RANGE_CONTROLLER}\n gutter=\"xxxs\"\n padding=\"xxs\"\n cols={['auto', 'auto']}\n style={{ background: 'white' }}\n >\n <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={conform(filterValue.from)}\n onChange={handleFromChange}\n id={`${idPreffix}-low-${column.id}-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0\"\n innerRef={handleRef}\n onKeyDown={onKeyDownHandler}\n />\n </DSFormLayoutBlockItem>\n <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={conform(filterValue.to)}\n onChange={handleToChange}\n id={`${idPreffix}-high-${column.id}-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0\"\n onKeyDown={onKeyDownHandler}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: columnWidth }}\n innerRef={innerRef}\n ariaLabel=\"Open Number 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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { DSComboBox } from '@elliemae/ds-form-combobox';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID, EMPTY_FILTER } from '../../../../configs/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface BaseSelectProps {\n isMulti?: boolean;\n creatable?: boolean;\n type: string;\n}\n\ntype MaybeToStringable =\n | string\n | number\n | boolean\n | Date\n | RegExp\n | Array<unknown>\n | Record<string, unknown>\n | null\n | undefined;\n\nconst getValue = (datum: unknown) => (datum as MaybeToStringable)?.toString();\n\ntype BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const BaseSelectFilter: React.ComponentType<\n DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n const {\n isMulti = false,\n filterValue: selectedItems = null,\n creatable = false,\n column,\n type,\n column: { id, filterOptions: userFilterOptions, filterMinWidth, disableFirstOptionFocusOnFilter = false },\n reduxHeader,\n patchHeaderFilterButtonAndMenu,\n innerRef,\n onValueChange,\n } = props;\n\n const data = usePropsStore((state) => state.data);\n const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n const filterOptions = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];\n\n const hasEmptyValue = automaticFilters.some((item) => item === null || item === undefined || item === '');\n\n const finalAutomaticFilters: DSDataTableT.FilterOptionT[] = automaticFilters\n .filter((item) => item !== null && item !== undefined && item !== '')\n .map((item) => ({\n type: 'option',\n dsId: item as string,\n value: item as string,\n label: item as string,\n }));\n\n if (hasEmptyValue) {\n finalAutomaticFilters.push({\n type: 'option',\n dsId: EMPTY_FILTER,\n value: EMPTY_FILTER,\n label: '(Empty)',\n });\n }\n\n return finalAutomaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n const handleOnChange = useCallback(\n (value: BaseSelectFilterValue) => {\n if (isMulti && Array.isArray(value)) {\n onValueChange(type, value.length !== 0 ? value : undefined);\n } else {\n onValueChange(type, value !== null ? value : undefined);\n patchHeaderFilterButtonAndMenu(column.id, true);\n innerRef?.current?.focus();\n }\n },\n [column.id, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\n );\n\n const handleOnCreate = useCallback(\n (label: string) => {\n if (label.trim() === '') {\n return;\n }\n if (filterOptions.some((item) => 'label' in item && item.label === label)) {\n return;\n }\n const newId = uid();\n const newItem: DSDataTableT.FilterOptionT = {\n dsId: newId,\n value: newId,\n label,\n type: 'option',\n };\n filterOptions.unshift(newItem);\n handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n setFilteredOptions([...filterOptions]);\n },\n [filterOptions, handleOnChange, selectedItems],\n );\n\n const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n ref.current?.focus();\n shouldFocus.current = false;\n });\n }\n }, []);\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n const Select = useMemo(\n () => (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n >\n <DSComboBox\n inline\n aria-label=\"Search filter options\"\n innerRef={handleRef}\n allOptions={filters}\n onCreate={creatable ? handleOnCreate : undefined}\n forceFocusFirstOptionOnType={creatable && disableFirstOptionFocusOnFilter === false}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n menuMaxHeight={300}\n />\n </Grid>\n ),\n [\n creatable,\n disableFirstOptionFocusOnFilter,\n filters,\n handleOnChange,\n handleOnCreate,\n handleRef,\n isMulti,\n selectedItems,\n ],\n );\n\n const handleOnClickOutside = useCallback(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={Select}\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Selection Filter\"\n onClickOutsideMenu={handleOnClickOutside}\n customStyles={{\n backgroundColor: '#fff',\n width: filterMinWidth ?? column.ref?.current?.offsetWidth,\n }}\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, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { DSComboBox } from '@elliemae/ds-form-combobox';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID, EMPTY_FILTER } from '../../../../configs/index.js';\nimport { usePropsStore } from '../../../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface BaseSelectProps {\n isMulti?: boolean;\n creatable?: boolean;\n type: string;\n}\n\ntype MaybeToStringable =\n | string\n | number\n | boolean\n | Date\n | RegExp\n | Array<unknown>\n | Record<string, unknown>\n | null\n | undefined;\n\nconst getValue = (datum: unknown) => (datum as MaybeToStringable)?.toString();\n\ntype BaseSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const BaseSelectFilter: React.ComponentType<\n DSDataTableT.FilterProps<BaseSelectFilterValue> & BaseSelectProps\n> = (props) => {\n const {\n isMulti = false,\n columnWidth,\n filterValue: selectedItems = null,\n creatable = false,\n column,\n type,\n column: { id, filterOptions: userFilterOptions, filterMinWidth, disableFirstOptionFocusOnFilter = false },\n reduxHeader,\n patchHeaderFilterButtonAndMenu,\n innerRef,\n onValueChange,\n } = props;\n\n const data = usePropsStore((state) => state.data);\n const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n const filterOptions = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => getValue(datum?.[id])))];\n\n const hasEmptyValue = automaticFilters.some((item) => item === null || item === undefined || item === '');\n\n const finalAutomaticFilters: DSDataTableT.FilterOptionT[] = automaticFilters\n .filter((item) => item !== null && item !== undefined && item !== '')\n .map((item) => ({\n type: 'option',\n dsId: item as string,\n value: item as string,\n label: item as string,\n }));\n\n if (hasEmptyValue) {\n finalAutomaticFilters.push({\n type: 'option',\n dsId: EMPTY_FILTER,\n value: EMPTY_FILTER,\n label: '(Empty)',\n });\n }\n\n return finalAutomaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => setFilteredOptions(filterOptions), [filterOptions]);\n\n const handleOnChange = useCallback(\n (value: BaseSelectFilterValue) => {\n if (isMulti && Array.isArray(value)) {\n onValueChange(type, value.length !== 0 ? value : undefined);\n } else {\n onValueChange(type, value !== null ? value : undefined);\n patchHeaderFilterButtonAndMenu(column.id, true);\n innerRef?.current?.focus();\n }\n },\n [column.id, innerRef, isMulti, onValueChange, patchHeaderFilterButtonAndMenu, type],\n );\n\n const handleOnCreate = useCallback(\n (label: string) => {\n if (label.trim() === '') {\n return;\n }\n if (filterOptions.some((item) => 'label' in item && item.label === label)) {\n return;\n }\n const newId = uid();\n const newItem: DSDataTableT.FilterOptionT = {\n dsId: newId,\n value: newId,\n label,\n type: 'option',\n };\n filterOptions.unshift(newItem);\n handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n setFilteredOptions([...filterOptions]);\n },\n [filterOptions, handleOnChange, selectedItems],\n );\n\n const handleRef = useCallback((newRef: HTMLInputElement | null) => {\n ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n ref.current?.focus();\n shouldFocus.current = false;\n });\n }\n }, []);\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n const Select = useMemo(\n () => (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n >\n <DSComboBox\n inline\n aria-label=\"Search filter options\"\n innerRef={handleRef}\n allOptions={filters}\n onCreate={creatable ? handleOnCreate : undefined}\n forceFocusFirstOptionOnType={creatable && disableFirstOptionFocusOnFilter === false}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n menuMaxHeight={300}\n />\n </Grid>\n ),\n [\n creatable,\n disableFirstOptionFocusOnFilter,\n filters,\n handleOnChange,\n handleOnCreate,\n handleRef,\n isMulti,\n selectedItems,\n ],\n );\n\n const handleOnClickOutside = useCallback(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={Select}\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Selection Filter\"\n onClickOutsideMenu={handleOnClickOutside}\n customStyles={{\n backgroundColor: '#fff',\n width: filterMinWidth ?? column.ref?.current?.offsetWidth,\n }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,6 +39,7 @@ var import_exported_related = require("../../../../exported-related/index.js");
|
|
|
39
39
|
var import_constants = require("../../../../configs/constants.js");
|
|
40
40
|
const MultiCreatableFilter = ({
|
|
41
41
|
column,
|
|
42
|
+
columnWidth,
|
|
42
43
|
onValueChange,
|
|
43
44
|
patchHeaderFilterButtonAndMenu,
|
|
44
45
|
patchHeader,
|
|
@@ -60,7 +61,8 @@ const MultiCreatableFilter = ({
|
|
|
60
61
|
patchHeaderFilterButtonAndMenu,
|
|
61
62
|
patchHeader,
|
|
62
63
|
innerRef,
|
|
63
|
-
domIdAffix
|
|
64
|
+
domIdAffix,
|
|
65
|
+
columnWidth
|
|
64
66
|
}
|
|
65
67
|
);
|
|
66
68
|
//# sourceMappingURL=MultiCreatableFilter.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/MultiCreatableFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<MultiCreatableFilterValue>> = ({\n column,\n onValueChange,\n patchHeaderFilterButtonAndMenu,\n patchHeader,\n reduxHeader,\n filterValue,\n innerRef,\n domIdAffix = uid(4),\n}) => (\n <BaseSelectFilter\n creatable\n reduxHeader={reduxHeader}\n data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n isMulti\n column={column}\n filterValue={filterValue ?? []}\n type={FILTER_TYPES.MULTI_SELECT}\n onValueChange={onValueChange}\n patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n patchHeader={patchHeader}\n innerRef={innerRef}\n domIdAffix={domIdAffix}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<MultiCreatableFilterValue>> = ({\n column,\n columnWidth,\n onValueChange,\n patchHeaderFilterButtonAndMenu,\n patchHeader,\n reduxHeader,\n filterValue,\n innerRef,\n domIdAffix = uid(4),\n}) => (\n <BaseSelectFilter\n creatable\n reduxHeader={reduxHeader}\n data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n isMulti\n column={column}\n filterValue={filterValue ?? []}\n type={FILTER_TYPES.MULTI_SELECT}\n onValueChange={onValueChange}\n patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n patchHeader={patchHeader}\n innerRef={innerRef}\n domIdAffix={domIdAffix}\n columnWidth={columnWidth}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBrB;AAnBF,iBAAoB;AAEpB,8BAAiC;AACjC,8BAA6B;AAC7B,uBAA4B;AAIrB,MAAM,uBAAiG,CAAC;AAAA,EAC7G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,6 +39,7 @@ var import_exported_related = require("../../../../exported-related/index.js");
|
|
|
39
39
|
var import_constants = require("../../../../configs/constants.js");
|
|
40
40
|
const MultiSelectFilter = ({
|
|
41
41
|
column,
|
|
42
|
+
columnWidth,
|
|
42
43
|
onValueChange,
|
|
43
44
|
patchHeaderFilterButtonAndMenu,
|
|
44
45
|
patchHeader,
|
|
@@ -59,7 +60,8 @@ const MultiSelectFilter = ({
|
|
|
59
60
|
patchHeaderFilterButtonAndMenu,
|
|
60
61
|
patchHeader,
|
|
61
62
|
innerRef,
|
|
62
|
-
domIdAffix
|
|
63
|
+
domIdAffix,
|
|
64
|
+
columnWidth
|
|
63
65
|
}
|
|
64
66
|
);
|
|
65
67
|
//# sourceMappingURL=MultiSelectFilter.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/MultiSelectFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiSelectFilter: React.ComponentType<DSDataTableT.FilterProps<MultiSelectFilterValue>> = ({\n column,\n onValueChange,\n patchHeaderFilterButtonAndMenu,\n patchHeader,\n reduxHeader,\n filterValue,\n innerRef,\n domIdAffix = uid(4),\n}) => (\n <BaseSelectFilter\n reduxHeader={reduxHeader}\n data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n isMulti\n column={column}\n filterValue={filterValue ?? []}\n type={FILTER_TYPES.MULTI_SELECT}\n onValueChange={onValueChange}\n patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n patchHeader={patchHeader}\n innerRef={innerRef}\n domIdAffix={domIdAffix}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { uid } from 'uid';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype MultiSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const MultiSelectFilter: React.ComponentType<DSDataTableT.FilterProps<MultiSelectFilterValue>> = ({\n column,\n columnWidth,\n onValueChange,\n patchHeaderFilterButtonAndMenu,\n patchHeader,\n reduxHeader,\n filterValue,\n innerRef,\n domIdAffix = uid(4),\n}) => (\n <BaseSelectFilter\n reduxHeader={reduxHeader}\n data-testid={DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER}\n isMulti\n column={column}\n filterValue={filterValue ?? []}\n type={FILTER_TYPES.MULTI_SELECT}\n onValueChange={onValueChange}\n patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n patchHeader={patchHeader}\n innerRef={innerRef}\n domIdAffix={domIdAffix}\n columnWidth={columnWidth}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBrB;AAnBF,iBAAoB;AAEpB,8BAAiC;AACjC,8BAA6B;AAC7B,uBAA4B;AAIrB,MAAM,oBAA2F,CAAC;AAAA,EACvG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB,SAAO;AAAA,IACP;AAAA,IACA,aAAa,eAAe,CAAC;AAAA,IAC7B,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,6 +39,7 @@ var import_exported_related = require("../../../../exported-related/index.js");
|
|
|
39
39
|
var import_constants = require("../../../../configs/constants.js");
|
|
40
40
|
const SingleCreatableFilter = ({
|
|
41
41
|
column,
|
|
42
|
+
columnWidth,
|
|
42
43
|
patchHeaderFilterButtonAndMenu,
|
|
43
44
|
patchHeader,
|
|
44
45
|
onValueChange,
|
|
@@ -59,7 +60,8 @@ const SingleCreatableFilter = ({
|
|
|
59
60
|
patchHeaderFilterButtonAndMenu,
|
|
60
61
|
patchHeader,
|
|
61
62
|
innerRef,
|
|
62
|
-
domIdAffix
|
|
63
|
+
domIdAffix,
|
|
64
|
+
columnWidth
|
|
63
65
|
}
|
|
64
66
|
);
|
|
65
67
|
//# sourceMappingURL=SingleCreatableFilter.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/SingleCreatableFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype SingleCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<SingleCreatableFilterValue>> = ({\n column,\n patchHeaderFilterButtonAndMenu,\n patchHeader,\n onValueChange,\n filterValue,\n reduxHeader,\n innerRef,\n domIdAffix = uid(4),\n}) => (\n <BaseSelectFilter\n creatable\n reduxHeader={reduxHeader}\n data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n column={column}\n filterValue={filterValue}\n type={FILTER_TYPES.SELECT}\n onValueChange={onValueChange}\n patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n patchHeader={patchHeader}\n innerRef={innerRef}\n domIdAffix={domIdAffix}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { uid } from 'uid';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\ntype SingleCreatableFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleCreatableFilter: React.ComponentType<DSDataTableT.FilterProps<SingleCreatableFilterValue>> = ({\n column,\n columnWidth,\n patchHeaderFilterButtonAndMenu,\n patchHeader,\n onValueChange,\n filterValue,\n reduxHeader,\n innerRef,\n domIdAffix = uid(4),\n}) => (\n <BaseSelectFilter\n creatable\n reduxHeader={reduxHeader}\n data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n column={column}\n filterValue={filterValue}\n type={FILTER_TYPES.SELECT}\n onValueChange={onValueChange}\n patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n patchHeader={patchHeader}\n innerRef={innerRef}\n domIdAffix={domIdAffix}\n columnWidth={columnWidth}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBrB;AApBF,iBAAoB;AAEpB,8BAAiC;AAEjC,8BAA6B;AAC7B,uBAA4B;AAIrB,MAAM,wBAAmG,CAAC;AAAA,EAC/G;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC,WAAS;AAAA,IACT;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,6 +39,7 @@ var import_exported_related = require("../../../../exported-related/index.js");
|
|
|
39
39
|
var import_BaseSelectFilter = require("./BaseSelectFilter.js");
|
|
40
40
|
const SingleSelectFilter = ({
|
|
41
41
|
column,
|
|
42
|
+
columnWidth,
|
|
42
43
|
patchHeaderFilterButtonAndMenu,
|
|
43
44
|
patchHeader,
|
|
44
45
|
onValueChange,
|
|
@@ -58,7 +59,8 @@ const SingleSelectFilter = ({
|
|
|
58
59
|
patchHeaderFilterButtonAndMenu,
|
|
59
60
|
patchHeader,
|
|
60
61
|
innerRef,
|
|
61
|
-
domIdAffix
|
|
62
|
+
domIdAffix,
|
|
63
|
+
columnWidth
|
|
62
64
|
}
|
|
63
65
|
);
|
|
64
66
|
//# sourceMappingURL=SingleSelectFilter.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/SingleSelectFilter.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\n\ntype SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleSelectFilter: React.ComponentType<DSDataTableT.FilterProps<SingleSelectFilterValue>> = ({\n column,\n patchHeaderFilterButtonAndMenu,\n patchHeader,\n onValueChange,\n filterValue,\n reduxHeader,\n innerRef,\n domIdAffix = uid(4),\n}) => (\n <BaseSelectFilter\n reduxHeader={reduxHeader}\n data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n column={column}\n filterValue={filterValue}\n type={FILTER_TYPES.SELECT}\n onValueChange={onValueChange}\n patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n patchHeader={patchHeader}\n innerRef={innerRef}\n domIdAffix={domIdAffix}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport React from 'react';\nimport { uid } from 'uid';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\nimport { FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { BaseSelectFilter } from './BaseSelectFilter.js';\n\ntype SingleSelectFilterValue = DSComboboxT.SelectedOptionsT;\n\nexport const SingleSelectFilter: React.ComponentType<DSDataTableT.FilterProps<SingleSelectFilterValue>> = ({\n column,\n columnWidth,\n patchHeaderFilterButtonAndMenu,\n patchHeader,\n onValueChange,\n filterValue,\n reduxHeader,\n innerRef,\n domIdAffix = uid(4),\n}) => (\n <BaseSelectFilter\n reduxHeader={reduxHeader}\n data-testid={DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER}\n column={column}\n filterValue={filterValue}\n type={FILTER_TYPES.SELECT}\n onValueChange={onValueChange}\n patchHeaderFilterButtonAndMenu={patchHeaderFilterButtonAndMenu}\n patchHeader={patchHeader}\n innerRef={innerRef}\n domIdAffix={domIdAffix}\n columnWidth={columnWidth}\n />\n);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBrB;AAnBF,iBAAoB;AACpB,uBAA4B;AAC5B,8BAA6B;AAE7B,8BAAiC;AAI1B,MAAM,qBAA6F,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAa,gBAAI,CAAC;AACpB,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,eAAa,6BAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,qCAAa;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -75,6 +75,7 @@ const HeaderCell = (props) => {
|
|
|
75
75
|
const isEmptyContent = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isEmptyContent);
|
|
76
76
|
const firstFocuseableColumnHeaderId = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.firstFocuseableColumnHeaderId);
|
|
77
77
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
78
|
+
const [referenceElement, setReferenceElement] = (0, import_react.useState)(null);
|
|
78
79
|
const reduxHeaders = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.reduxHeaders);
|
|
79
80
|
const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
|
|
80
81
|
const dragHandleRef = (0, import_react.useRef)(null);
|
|
@@ -102,6 +103,7 @@ const HeaderCell = (props) => {
|
|
|
102
103
|
import_Filters.FilterMapItem,
|
|
103
104
|
{
|
|
104
105
|
column,
|
|
106
|
+
columnWidth: !isDragOverlay ? referenceElement?.offsetWidth ?? 0 : void 0,
|
|
105
107
|
onFiltersChange,
|
|
106
108
|
reduxHeader,
|
|
107
109
|
filters,
|
|
@@ -123,7 +125,18 @@ const HeaderCell = (props) => {
|
|
|
123
125
|
}
|
|
124
126
|
)
|
|
125
127
|
] });
|
|
126
|
-
}, [
|
|
128
|
+
}, [
|
|
129
|
+
hasRightIcons,
|
|
130
|
+
getOwnerProps,
|
|
131
|
+
column,
|
|
132
|
+
isDragOverlay,
|
|
133
|
+
referenceElement?.offsetWidth,
|
|
134
|
+
onFiltersChange,
|
|
135
|
+
reduxHeader,
|
|
136
|
+
filters,
|
|
137
|
+
hasSortingCaret,
|
|
138
|
+
handleSort
|
|
139
|
+
]);
|
|
127
140
|
const DnDHandleComponent = (0, import_react.useMemo)(
|
|
128
141
|
() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { mr: "2px", alignItems: "center", style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
129
142
|
import_DnDHandle.DragHandle,
|
|
@@ -138,14 +151,6 @@ const HeaderCell = (props) => {
|
|
|
138
151
|
) }) }),
|
|
139
152
|
[column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops]
|
|
140
153
|
);
|
|
141
|
-
const handleRef = (0, import_react.useCallback)(
|
|
142
|
-
(_ref) => {
|
|
143
|
-
if (!isDragOverlay) {
|
|
144
|
-
column.ref.current = _ref;
|
|
145
|
-
}
|
|
146
|
-
},
|
|
147
|
-
[column.ref, isDragOverlay]
|
|
148
|
-
);
|
|
149
154
|
const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, "");
|
|
150
155
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
151
156
|
import_styled.StyledHeadTh,
|
|
@@ -161,7 +166,7 @@ const HeaderCell = (props) => {
|
|
|
161
166
|
tabIndex: column.isFocuseable === false ? -1 : 0,
|
|
162
167
|
isDraggingActive: Boolean(draggableProps && draggableProps.active),
|
|
163
168
|
shouldShowDnD,
|
|
164
|
-
innerRef:
|
|
169
|
+
innerRef: setReferenceElement,
|
|
165
170
|
getOwnerProps,
|
|
166
171
|
children: [
|
|
167
172
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { width: "100%", cols: hCols, children: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/HeaderCell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useRef, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst buildScreenReaderInstructions = ({\n colSpan,\n draggable,\n filterable,\n sortable,\n}: {\n colSpan: number;\n draggable: boolean;\n filterable: boolean;\n sortable: boolean;\n}) => {\n const preffix = colSpan === 1 ? '' : 'Column Group. ';\n if (!draggable && !filterable && !sortable) return preffix;\n\n let message = sortable\n ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n : '';\n if (draggable && filterable) {\n message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n } else if (draggable || filterable) {\n message = `This column is ${\n draggable ? 'draggable' : 'filterable'\n }. To enable this interaction press the enter key. ${message}`;\n }\n return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n column: DSDataTableT.InternalColumn;\n isDragOverlay?: boolean;\n colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n const { column, isDragOverlay, colSpan } = props;\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n const filters = usePropsStore((state) => state.filters);\n const textWrap = usePropsStore((state) => state.textWrap);\n const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n const getOwnerProps = usePropsStore((store) => store.get);\n const [referenceElement, setReferenceElement] = useState<HTMLTableColElement | null>(null);\n\n const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n const dragHandleRef = useRef<HTMLDivElement | null>(null);\n const filterIconRef = useRef<HTMLButtonElement | null>(null);\n const resizeHandlerRef = useRef<HTMLInputElement | null>(null);\n const sortRef = useRef<HTMLButtonElement | null>(null);\n const { draggableProps } = useContext(SortableItemContext);\n\n const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n useHeaderCellConfig(props);\n\n const { handleSort, ...handlers } = useHeaderCellHandlers({\n hasFilter,\n column,\n hasDnD,\n dragHandleRef,\n filterIconRef,\n resizeHandlerRef,\n sortRef,\n hasSortingCaret,\n isDragOverlay,\n draggableProps,\n });\n\n const rightIcons = useMemo(() => {\n if (!hasRightIcons) return null;\n return (\n <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps}>\n <FilterMapItem\n column={column}\n columnWidth={!isDragOverlay ? (referenceElement?.offsetWidth ?? 0) : undefined}\n onFiltersChange={onFiltersChange}\n reduxHeader={reduxHeader}\n filters={filters}\n innerRef={filterIconRef}\n />\n {hasSortingCaret && (\n <SortByCaret\n isSortedDesc={column.isSortedDesc}\n onClick={(e) => {\n e.stopPropagation();\n handleSort(e as React.MouseEvent);\n }}\n isReachable={reduxHeader?.withTabStops ?? false}\n column={column}\n reduxHeader={reduxHeader}\n innerRef={sortRef}\n />\n )}\n </StyledHeaderRightIconsWrapper>\n );\n }, [\n hasRightIcons,\n getOwnerProps,\n column,\n isDragOverlay,\n referenceElement?.offsetWidth,\n onFiltersChange,\n reduxHeader,\n filters,\n hasSortingCaret,\n handleSort,\n ]);\n\n const DnDHandleComponent = useMemo(\n () => (\n <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n <StyledFocusWithin hideFocus={isDragging}>\n <DragHandle\n key={column.id}\n innerRef={dragHandleRef}\n isReachable={reduxHeader?.withTabStops ?? false}\n id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n isDragOverlay={isDragOverlay}\n isDisabled={disabledRows[column.id]}\n />\n </StyledFocusWithin>\n </Grid>\n ),\n [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n );\n\n const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n return (\n <StyledHeadTh\n column={column}\n onClick={handleSort}\n {...handlers}\n role=\"columnheader\"\n {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n : {})}\n aria-describedby={screenReaderInstructionsId}\n aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n tabIndex={column.isFocuseable === false ? -1 : 0}\n isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n shouldShowDnD={shouldShowDnD}\n innerRef={setReferenceElement as React.Ref<HTMLTableColElement>}\n getOwnerProps={getOwnerProps}\n >\n <Grid width=\"100%\" cols={hCols}>\n {shouldShowDnD && DnDHandleComponent}\n <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n {rightIcons}\n {shouldShowResize && (\n <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n )}\n </Grid>\n <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n {buildScreenReaderInstructions({\n colSpan,\n draggable: dragAndDropColumns && column.disableDnD !== true,\n filterable: hasFilter,\n sortable: column.canSort ?? false,\n })}\n </span>\n </StyledHeadTh>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|