@elliemae/ds-data-table 3.55.0-next.11 → 3.55.0-next.14
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 +2 -1
- 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/configs/useTableColsWithAddons.js +1 -0
- package/dist/cjs/configs/useTableColsWithAddons.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js +4 -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 +2 -1
- 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/configs/useTableColsWithAddons.js +1 -0
- package/dist/esm/configs/useTableColsWithAddons.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js +5 -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 +3 -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
|
+
referenceColumn,
|
|
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: referenceColumn?.offsetWidth },
|
|
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 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 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: 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
|
}
|
|
@@ -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
|
+
referenceColumn,
|
|
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: referenceColumn?.offsetWidth,
|
|
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 referenceColumn,\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: referenceColumn?.offsetWidth,\n minWidth: '80px',\n }}\n menuContent={\n <Grid p=\"xxs\" gutter=\"xxs\" style={{ background: 'white' }}>\n <ScreenReaderOnly id=\"filter-input-instructions\">\n Press Enter to apply the filter and close the dialog. Focus will return to the button that opened this\n dialog.\n </ScreenReaderOnly>\n <StyledInputFreeTextSearch\n id={`ds-data-table-free-text-search-${id}-${domIdAffix}`}\n placeholder=\"\"\n value={value}\n onValueChange={(newValue) => {\n setValue(newValue);\n }}\n innerRef={handleRef}\n onKeyDown={onKeyDown}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_FREE_TEXT_SEARCH}\n aria-label=\"Free Text Search Filter\"\n aria-describedby=\"filter-input-instructions\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Free Text Search Filter\"\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;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,iBAAiB;AAAA,QACxB,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
|
+
referenceColumn,
|
|
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: referenceColumn?.offsetWidth },
|
|
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 referenceColumn,\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: referenceColumn?.offsetWidth }}\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
|
}
|
|
@@ -45,6 +45,7 @@ const getValue = (datum) => datum?.toString();
|
|
|
45
45
|
const BaseSelectFilter = (props) => {
|
|
46
46
|
const {
|
|
47
47
|
isMulti = false,
|
|
48
|
+
referenceColumn,
|
|
48
49
|
filterValue: selectedItems = null,
|
|
49
50
|
creatable = false,
|
|
50
51
|
column,
|
|
@@ -178,7 +179,7 @@ const BaseSelectFilter = (props) => {
|
|
|
178
179
|
onClickOutsideMenu: handleOnClickOutside,
|
|
179
180
|
customStyles: {
|
|
180
181
|
backgroundColor: "#fff",
|
|
181
|
-
width: filterMinWidth ??
|
|
182
|
+
width: filterMinWidth ?? referenceColumn?.offsetWidth
|
|
182
183
|
}
|
|
183
184
|
}
|
|
184
185
|
);
|
|
@@ -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 ??
|
|
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 referenceColumn,\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 ?? referenceColumn?.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
|
+
referenceColumn,
|
|
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
|
+
referenceColumn
|
|
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 referenceColumn,\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 referenceColumn={referenceColumn}\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
|
+
referenceColumn,
|
|
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
|
+
referenceColumn
|
|
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 referenceColumn,\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 referenceColumn={referenceColumn}\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
|
+
referenceColumn,
|
|
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
|
+
referenceColumn
|
|
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 referenceColumn,\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 referenceColumn={referenceColumn}\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
|
+
referenceColumn,
|
|
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
|
+
referenceColumn
|
|
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 referenceColumn,\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 referenceColumn={referenceColumn}\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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/configs/useTableColsWithAddons.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n dragHandleColumn,\n expandRowColumn,\n actionColumn,\n singleSelectColumn,\n multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n const augmentColumn = (\n column: DSDataTableT.Column,\n index: number,\n parentId: string | null = null,\n depth = 0,\n ): DSDataTableT.InternalColumn => {\n let id = `column${index}`;\n if (typeof column.Header === 'string') id = column.Header;\n if (typeof column.accessor === 'string') id = column.accessor;\n const { columns: childColumns, ...restOfColumn } = column;\n const newCol: DSDataTableT.InternalColumn = {\n id,\n parentId,\n depth,\n ...restOfColumn,\n ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n };\n if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n return newCol;\n };\n return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n {\n columns,\n renderRowActions,\n isExpandable,\n selectSingle,\n selection,\n dragAndDropRows,\n noSelectionColumn,\n }: DSDataTableT.InternalProps,\n hiddenColumns: string[],\n) => {\n const withSelection = Boolean(selection);\n\n return useMemo(() => {\n const columnsWithAddons = [...augmentColumns(columns)];\n // Columns to be prepended\n const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n // Columns to be appended\n const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n if (isExpandable) colsToPrepend.push(expandRowColumn);\n if (withSelection && !noSelectionColumn) {\n if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n }\n if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n // Prepend or append all the columns that were not extended by the user\n colsToPrepend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n });\n colsToAppend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n });\n\n return columnsWithAddons\n .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n .map((col) => {\n if (col.columns) {\n col.columns = col.columns.filter(\n (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n );\n }\n return col;\n });\n }, [\n columns,\n isExpandable,\n withSelection,\n noSelectionColumn,\n dragAndDropRows,\n renderRowActions,\n selectSingle,\n hiddenColumns,\n ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n columnAccessor: string,\n columns: DSDataTableT.Column[] | undefined,\n hiddenColumns: string[],\n) => {\n if (!columns) return hiddenColumns.includes(columnAccessor);\n if (hiddenColumns.includes(columnAccessor)) return true;\n return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAmC;AAEnC,qBAMO;AAEP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,SAAK,wBAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAyB,CAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,kBACG;AACH,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,aAAO,sBAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAErD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,8BAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,iCAA4D;AAAA,UAC5F,eAAc,KAAK,gCAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,+BAA0D;AAClG,QAAI,iBAAkB,cAAa,SAAK,6BAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO,kBACJ,OAAO,CAAC,QAAQ,IAAI,aAAa,UAAa,CAAC,gBAAgB,IAAI,UAAU,IAAI,SAAS,aAAa,CAAC,EACxG,IAAI,CAAC,QAAQ;AACZ,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAAgC,OAAO,aAAa,UAAa,CAAC,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC5G;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACL,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAIA,MAAM,kBAAkB,CACtB,gBACA,SACA,kBACG;AACH,MAAI,CAAC,QAAS,QAAO,cAAc,SAAS,cAAc;AAC1D,MAAI,cAAc,SAAS,cAAc,EAAG,QAAO;AACnD,SAAO,QAAQ,MAAM,CAAC,QAAQ,cAAc,SAAS,IAAI,YAAY,IAAI,EAAG,CAAC;AAC/E;",
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport {\n dragHandleColumn,\n expandRowColumn,\n actionColumn,\n singleSelectColumn,\n multiSelectColumn,\n} from '../addons/Columns/index.js';\n\nconst augmentColumns = (columns: DSDataTableT.Column[]): DSDataTableT.InternalColumn[] => {\n const augmentColumn = (\n column: DSDataTableT.Column,\n index: number,\n parentId: string | null = null,\n depth = 0,\n ): DSDataTableT.InternalColumn => {\n let id = `column${index}`;\n if (typeof column.Header === 'string') id = column.Header;\n if (typeof column.accessor === 'string') id = column.accessor;\n const { columns: childColumns, ...restOfColumn } = column;\n const newCol: DSDataTableT.InternalColumn = {\n index,\n id,\n parentId,\n depth,\n ...restOfColumn,\n ref: createRef<HTMLTableColElement>() as React.MutableRefObject<HTMLTableColElement>,\n };\n if (childColumns) newCol.columns = childColumns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n return newCol;\n };\n return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: DSDataTableT.Column[], col: DSDataTableT.Column) =>\n columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons = (\n {\n columns,\n renderRowActions,\n isExpandable,\n selectSingle,\n selection,\n dragAndDropRows,\n noSelectionColumn,\n }: DSDataTableT.InternalProps,\n hiddenColumns: string[],\n) => {\n const withSelection = Boolean(selection);\n\n return useMemo(() => {\n const columnsWithAddons = [...augmentColumns(columns)];\n // Columns to be prepended\n const colsToPrepend: DSDataTableT.InternalColumn[] = [];\n // Columns to be appended\n const colsToAppend: DSDataTableT.InternalColumn[] = [];\n\n if (isExpandable) colsToPrepend.push(expandRowColumn);\n if (withSelection && !noSelectionColumn) {\n if (selectSingle) colsToPrepend.push(singleSelectColumn as unknown as DSDataTableT.InternalColumn);\n else colsToPrepend.push(multiSelectColumn as unknown as DSDataTableT.InternalColumn);\n }\n if (dragAndDropRows) colsToPrepend.push(dragHandleColumn as unknown as DSDataTableT.InternalColumn);\n if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n // Prepend or append all the columns that were not extended by the user\n colsToPrepend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n });\n colsToAppend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n });\n\n return columnsWithAddons\n .filter((col) => col.accessor === undefined || !isColumnVisible(col.accessor, col.columns, hiddenColumns))\n .map((col) => {\n if (col.columns) {\n col.columns = col.columns.filter(\n (subCol: DSDataTableT.Column) => subCol.accessor === undefined || !hiddenColumns?.includes(subCol.accessor),\n );\n }\n return col;\n });\n }, [\n columns,\n isExpandable,\n withSelection,\n noSelectionColumn,\n dragAndDropRows,\n renderRowActions,\n selectSingle,\n hiddenColumns,\n ]);\n};\n\nexport { useTableColsWithAddons };\n\nconst isColumnVisible = (\n columnAccessor: string,\n columns: DSDataTableT.Column[] | undefined,\n hiddenColumns: string[],\n) => {\n if (!columns) return hiddenColumns.includes(columnAccessor);\n if (hiddenColumns.includes(columnAccessor)) return true;\n return columns.every((col) => hiddenColumns.includes(col.accessor || col.id!));\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAmC;AAEnC,qBAMO;AAEP,MAAM,iBAAiB,CAAC,YAAkE;AACxF,QAAM,gBAAgB,CACpB,QACA,OACA,WAA0B,MAC1B,QAAQ,MACwB;AAChC,QAAI,KAAK,SAAS,KAAK;AACvB,QAAI,OAAO,OAAO,WAAW,SAAU,MAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa,SAAU,MAAK,OAAO;AACrD,UAAM,EAAE,SAAS,cAAc,GAAG,aAAa,IAAI;AACnD,UAAM,SAAsC;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,SAAK,wBAA+B;AAAA,IACtC;AACA,QAAI,aAAc,QAAO,UAAU,aAAa,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACpG,WAAO;AAAA,EACT;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAAgC,QAChE,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAyB,CAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,kBACG;AACH,QAAM,gBAAgB,QAAQ,SAAS;AAEvC,aAAO,sBAAQ,MAAM;AACnB,UAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAErD,UAAM,gBAA+C,CAAC;AAEtD,UAAM,eAA8C,CAAC;AAErD,QAAI,aAAc,eAAc,KAAK,8BAAe;AACpD,QAAI,iBAAiB,CAAC,mBAAmB;AACvC,UAAI,aAAc,eAAc,KAAK,iCAA4D;AAAA,UAC5F,eAAc,KAAK,gCAA2D;AAAA,IACrF;AACA,QAAI,gBAAiB,eAAc,KAAK,+BAA0D;AAClG,QAAI,iBAAkB,cAAa,SAAK,6BAAa,gBAAgB,CAAC;AAGtE,kBAAc,QAAQ,CAAC,QAAQ;AAC7B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,QAAQ,GAAG;AAAA,IACtF,CAAC;AACD,iBAAa,QAAQ,CAAC,QAAQ;AAC5B,UAAI,CAAC,yBAAyB,mBAAmB,GAAG,EAAG,mBAAkB,KAAK,GAAG;AAAA,IACnF,CAAC;AAED,WAAO,kBACJ,OAAO,CAAC,QAAQ,IAAI,aAAa,UAAa,CAAC,gBAAgB,IAAI,UAAU,IAAI,SAAS,aAAa,CAAC,EACxG,IAAI,CAAC,QAAQ;AACZ,UAAI,IAAI,SAAS;AACf,YAAI,UAAU,IAAI,QAAQ;AAAA,UACxB,CAAC,WAAgC,OAAO,aAAa,UAAa,CAAC,eAAe,SAAS,OAAO,QAAQ;AAAA,QAC5G;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACL,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAIA,MAAM,kBAAkB,CACtB,gBACA,SACA,kBACG;AACH,MAAI,CAAC,QAAS,QAAO,cAAc,SAAS,cAAc;AAC1D,MAAI,cAAc,SAAS,cAAc,EAAG,QAAO;AACnD,SAAO,QAAQ,MAAM,CAAC,QAAQ,cAAc,SAAS,IAAI,YAAY,IAAI,EAAG,CAAC;AAC/E;",
|
|
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 reference = (0, import_react.useRef)(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
|
+
referenceColumn: !isDragOverlay ? reference.current : void 0,
|
|
105
107
|
onFiltersChange,
|
|
106
108
|
reduxHeader,
|
|
107
109
|
filters,
|
|
@@ -123,7 +125,7 @@ const HeaderCell = (props) => {
|
|
|
123
125
|
}
|
|
124
126
|
)
|
|
125
127
|
] });
|
|
126
|
-
}, [hasRightIcons, getOwnerProps,
|
|
128
|
+
}, [hasRightIcons, getOwnerProps, column, onFiltersChange, reduxHeader, filters, hasSortingCaret, handleSort]);
|
|
127
129
|
const DnDHandleComponent = (0, import_react.useMemo)(
|
|
128
130
|
() => /* @__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
131
|
import_DnDHandle.DragHandle,
|
|
@@ -138,14 +140,6 @@ const HeaderCell = (props) => {
|
|
|
138
140
|
) }) }),
|
|
139
141
|
[column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops]
|
|
140
142
|
);
|
|
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
143
|
const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, "");
|
|
150
144
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
151
145
|
import_styled.StyledHeadTh,
|
|
@@ -161,7 +155,7 @@ const HeaderCell = (props) => {
|
|
|
161
155
|
tabIndex: column.isFocuseable === false ? -1 : 0,
|
|
162
156
|
isDraggingActive: Boolean(draggableProps && draggableProps.active),
|
|
163
157
|
shouldShowDnD,
|
|
164
|
-
innerRef:
|
|
158
|
+
innerRef: reference,
|
|
165
159
|
getOwnerProps,
|
|
166
160
|
children: [
|
|
167
161
|
/* @__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 } 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 reference = useRef<HTMLDivElement | 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 referenceColumn={!isDragOverlay ? reference.current : 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 }, [hasRightIcons, getOwnerProps, column, onFiltersChange, reduxHeader, filters, hasSortingCaret, handleSort]);\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={reference}\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
|
}
|