@elliemae/ds-data-table 3.0.0-next.4 → 3.0.0-next.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +1 -1
  2. package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
  3. package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +1 -1
  4. package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
  5. package/package.json +19 -19
package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js CHANGED
@@ -39,7 +39,7 @@ var import_constants = require("../../../../configs/constants");
39
39
  const BaseSelectFilter = (props) => {
40
40
  const {
41
41
  isMulti = false,
42
- selectedItems,
42
+ selectedItems = null,
43
43
  column,
44
44
  type,
45
45
  column: { id, filterOptions: userFilterOptions },
package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map CHANGED
@@ -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": ["/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isSingle?: boolean;\n isMulti?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems,\n column,\n type,\n column: { id, filterOptions: userFilterOptions },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n innerRef,\n onValueChange,\n } = props;\n\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\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 handleOnChange = (value) => {\n if (isMulti) {\n const multiSelectedItem = selectedItems as FilterOptionT[];\n const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);\n if (isFound) {\n onValueChange(\n type,\n multiSelectedItem.filter((item) => item.dsId !== value.dsId),\n );\n } else {\n onValueChange(type, [...multiSelectedItem, value]);\n }\n } else {\n const singleSelectedItem = selectedItems as FilterOptionT;\n onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);\n }\n };\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n const filteredOptions = useCallback(\n (filter) =>\n filterOptions.filter(\n (option) => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase()),\n ),\n [filterOptions],\n );\n\n const handleOnFilter = useCallback(\n (newFilter) => {\n setFilteredOptions(filteredOptions(newFilter));\n },\n [filteredOptions],\n );\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative' }}\n >\n <DSComboBox\n inline\n autoFocus\n options={filters}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n onFilter={handleOnFilter}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filteredOptions(''));\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={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiE;AACjE,qBAAqB;AACrB,gCAA2B;AAC3B,sBAA6B;AAC7B,8BAA8B;AAE9B,uBAA4B;AAgBrB,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe;AAAA,IAC7B,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAiC,0BAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB,CAAC,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,cAAc,IAAI,CAAC,SAAU;AAAA,QAC9F,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA;AAGT,aAAO;AAAA;AAIT,QAAI,MAAM,QAAQ;AAAoB,aAAO;AAE7C,WAAO;AAAA,KACN,CAAC,MAAM,IAAI;AAEd,QAAM,iBAAiB,CAAC,UAAU;AAChC,QAAI,SAAS;AACX,YAAM,oBAAoB;AAC1B,YAAM,UAAU,kBAAkB,KAAK,CAAC,SAAS,KAAK,SAAS,MAAM;AACrE,UAAI,SAAS;AACX,sBACE,MACA,kBAAkB,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM;AAAA,aAEpD;AACL,sBAAc,MAAM,CAAC,GAAG,mBAAmB;AAAA;AAAA,WAExC;AACL,YAAM,qBAAqB;AAC3B,oBAAc,MAAM,oBAAoB,SAAS,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1E,QAAM,CAAC,SAAS,sBAAsB,2BAAS;AAE/C,8BAAU,MAAM;AACd,uBAAmB;AAAA,KAClB,CAAC;AAEJ,QAAM,kBAAkB,8BACtB,CAAC,WACC,cAAc,OACZ,CAAC,WAAW,OAAO,SAAS,eAAe,OAAO,MAAM,cAAc,SAAS,OAAO,iBAE1F,CAAC;AAGH,QAAM,iBAAiB,8BACrB,CAAC,cAAc;AACb,uBAAmB,gBAAgB;AAAA,KAErC,CAAC;AAGH,QAAM,SACJ,mDAAC,qBAAD;AAAA,IACE,eACE,UAAU,6BAAY,oCAAoC,6BAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU;AAAA,KAEvC,mDAAC,sCAAD;AAAA,IACE,QAAM;AAAA,IACN,WAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA;AAKrB,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,gBAAgB;AAAA;AAErC,SACE,mDAAC,uCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,mDAAC,8BAAD;AAAA,IACb;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe;AAAA;AAAA;",
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isSingle?: boolean;\n isMulti?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems = null,\n column,\n type,\n column: { id, filterOptions: userFilterOptions },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n innerRef,\n onValueChange,\n } = props;\n\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\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 handleOnChange = (value) => {\n if (isMulti) {\n const multiSelectedItem = selectedItems as FilterOptionT[];\n const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);\n if (isFound) {\n onValueChange(\n type,\n multiSelectedItem.filter((item) => item.dsId !== value.dsId),\n );\n } else {\n onValueChange(type, [...multiSelectedItem, value]);\n }\n } else {\n const singleSelectedItem = selectedItems as FilterOptionT;\n onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);\n }\n };\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n const filteredOptions = useCallback(\n (filter) =>\n filterOptions.filter(\n (option) => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase()),\n ),\n [filterOptions],\n );\n\n const handleOnFilter = useCallback(\n (newFilter) => {\n setFilteredOptions(filteredOptions(newFilter));\n },\n [filteredOptions],\n );\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative' }}\n >\n <DSComboBox\n inline\n autoFocus\n options={filters}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n onFilter={handleOnFilter}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filteredOptions(''));\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={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAiE;AACjE,qBAAqB;AACrB,gCAA2B;AAC3B,sBAA6B;AAC7B,8BAA8B;AAE9B,uBAA4B;AAgBrB,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe;AAAA,IAC7B,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAiC,0BAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB,CAAC,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,cAAc,IAAI,CAAC,SAAU;AAAA,QAC9F,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA;AAGT,aAAO;AAAA;AAIT,QAAI,MAAM,QAAQ;AAAoB,aAAO;AAE7C,WAAO;AAAA,KACN,CAAC,MAAM,IAAI;AAEd,QAAM,iBAAiB,CAAC,UAAU;AAChC,QAAI,SAAS;AACX,YAAM,oBAAoB;AAC1B,YAAM,UAAU,kBAAkB,KAAK,CAAC,SAAS,KAAK,SAAS,MAAM;AACrE,UAAI,SAAS;AACX,sBACE,MACA,kBAAkB,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM;AAAA,aAEpD;AACL,sBAAc,MAAM,CAAC,GAAG,mBAAmB;AAAA;AAAA,WAExC;AACL,YAAM,qBAAqB;AAC3B,oBAAc,MAAM,oBAAoB,SAAS,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1E,QAAM,CAAC,SAAS,sBAAsB,2BAAS;AAE/C,8BAAU,MAAM;AACd,uBAAmB;AAAA,KAClB,CAAC;AAEJ,QAAM,kBAAkB,8BACtB,CAAC,WACC,cAAc,OACZ,CAAC,WAAW,OAAO,SAAS,eAAe,OAAO,MAAM,cAAc,SAAS,OAAO,iBAE1F,CAAC;AAGH,QAAM,iBAAiB,8BACrB,CAAC,cAAc;AACb,uBAAmB,gBAAgB;AAAA,KAErC,CAAC;AAGH,QAAM,SACJ,mDAAC,qBAAD;AAAA,IACE,eACE,UAAU,6BAAY,oCAAoC,6BAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU;AAAA,KAEvC,mDAAC,sCAAD;AAAA,IACE,QAAM;AAAA,IACN,WAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA;AAKrB,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,gBAAgB;AAAA;AAErC,SACE,mDAAC,uCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,mDAAC,8BAAD;AAAA,IACb;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js CHANGED
@@ -8,7 +8,7 @@ import { DATA_TESTID } from "../../../../configs/constants";
8
8
  const BaseSelectFilter = (props) => {
9
9
  const {
10
10
  isMulti = false,
11
- selectedItems,
11
+ selectedItems = null,
12
12
  column,
13
13
  type,
14
14
  column: { id, filterOptions: userFilterOptions },
package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isSingle?: boolean;\n isMulti?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems,\n column,\n type,\n column: { id, filterOptions: userFilterOptions },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n innerRef,\n onValueChange,\n } = props;\n\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\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 handleOnChange = (value) => {\n if (isMulti) {\n const multiSelectedItem = selectedItems as FilterOptionT[];\n const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);\n if (isFound) {\n onValueChange(\n type,\n multiSelectedItem.filter((item) => item.dsId !== value.dsId),\n );\n } else {\n onValueChange(type, [...multiSelectedItem, value]);\n }\n } else {\n const singleSelectedItem = selectedItems as FilterOptionT;\n onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);\n }\n };\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n const filteredOptions = useCallback(\n (filter) =>\n filterOptions.filter(\n (option) => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase()),\n ),\n [filterOptions],\n );\n\n const handleOnFilter = useCallback(\n (newFilter) => {\n setFilteredOptions(filteredOptions(newFilter));\n },\n [filteredOptions],\n );\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative' }}\n >\n <DSComboBox\n inline\n autoFocus\n options={filters}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n onFilter={handleOnFilter}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filteredOptions(''));\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={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n />\n );\n};\n"],
5
- "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AAgBO,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe;AAAA,IAC7B,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAiC,QAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB,CAAC,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,cAAc,IAAI,CAAC,SAAU;AAAA,QAC9F,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA;AAGT,aAAO;AAAA;AAIT,QAAI,MAAM,QAAQ;AAAoB,aAAO;AAE7C,WAAO;AAAA,KACN,CAAC,MAAM,IAAI;AAEd,QAAM,iBAAiB,CAAC,UAAU;AAChC,QAAI,SAAS;AACX,YAAM,oBAAoB;AAC1B,YAAM,UAAU,kBAAkB,KAAK,CAAC,SAAS,KAAK,SAAS,MAAM;AACrE,UAAI,SAAS;AACX,sBACE,MACA,kBAAkB,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM;AAAA,aAEpD;AACL,sBAAc,MAAM,CAAC,GAAG,mBAAmB;AAAA;AAAA,WAExC;AACL,YAAM,qBAAqB;AAC3B,oBAAc,MAAM,oBAAoB,SAAS,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1E,QAAM,CAAC,SAAS,sBAAsB,SAAS;AAE/C,YAAU,MAAM;AACd,uBAAmB;AAAA,KAClB,CAAC;AAEJ,QAAM,kBAAkB,YACtB,CAAC,WACC,cAAc,OACZ,CAAC,WAAW,OAAO,SAAS,eAAe,OAAO,MAAM,cAAc,SAAS,OAAO,iBAE1F,CAAC;AAGH,QAAM,iBAAiB,YACrB,CAAC,cAAc;AACb,uBAAmB,gBAAgB;AAAA,KAErC,CAAC;AAGH,QAAM,SACJ,qCAAC,MAAD;AAAA,IACE,eACE,UAAU,YAAY,oCAAoC,YAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU;AAAA,KAEvC,qCAAC,YAAD;AAAA,IACE,QAAM;AAAA,IACN,WAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA;AAKrB,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,gBAAgB;AAAA;AAErC,SACE,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,qCAAC,cAAD;AAAA,IACb;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe;AAAA;AAAA;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isSingle?: boolean;\n isMulti?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems = null,\n column,\n type,\n column: { id, filterOptions: userFilterOptions },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n innerRef,\n onValueChange,\n } = props;\n\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [...new Set(data.map((datum) => datum[id].toString()))].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\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 handleOnChange = (value) => {\n if (isMulti) {\n const multiSelectedItem = selectedItems as FilterOptionT[];\n const isFound = multiSelectedItem.find((item) => item.dsId === value.dsId);\n if (isFound) {\n onValueChange(\n type,\n multiSelectedItem.filter((item) => item.dsId !== value.dsId),\n );\n } else {\n onValueChange(type, [...multiSelectedItem, value]);\n }\n } else {\n const singleSelectedItem = selectedItems as FilterOptionT;\n onValueChange(type, singleSelectedItem?.dsId !== value.dsId ? value : null);\n }\n };\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n useEffect(() => {\n setFilteredOptions(filterOptions);\n }, [filterOptions]);\n\n const filteredOptions = useCallback(\n (filter) =>\n filterOptions.filter(\n (option) => option.type === 'separator' || option.label.toLowerCase().includes(filter.toLowerCase()),\n ),\n [filterOptions],\n );\n\n const handleOnFilter = useCallback(\n (newFilter) => {\n setFilteredOptions(filteredOptions(newFilter));\n },\n [filteredOptions],\n );\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative' }}\n >\n <DSComboBox\n inline\n autoFocus\n options={filters}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n onFilter={handleOnFilter}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filteredOptions(''));\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={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n />\n );\n};\n"],
5
+ "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA;AAgBO,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe;AAAA,IAC7B,KAAK;AAAA,MACH,YAAY,EAAE;AAAA;AAAA,IAEhB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAiC,QAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB,CAAC,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,MAAM,IAAI,cAAc,IAAI,CAAC,SAAU;AAAA,QAC9F,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA;AAGT,aAAO;AAAA;AAIT,QAAI,MAAM,QAAQ;AAAoB,aAAO;AAE7C,WAAO;AAAA,KACN,CAAC,MAAM,IAAI;AAEd,QAAM,iBAAiB,CAAC,UAAU;AAChC,QAAI,SAAS;AACX,YAAM,oBAAoB;AAC1B,YAAM,UAAU,kBAAkB,KAAK,CAAC,SAAS,KAAK,SAAS,MAAM;AACrE,UAAI,SAAS;AACX,sBACE,MACA,kBAAkB,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM;AAAA,aAEpD;AACL,sBAAc,MAAM,CAAC,GAAG,mBAAmB;AAAA;AAAA,WAExC;AACL,YAAM,qBAAqB;AAC3B,oBAAc,MAAM,oBAAoB,SAAS,MAAM,OAAO,QAAQ;AAAA;AAAA;AAI1E,QAAM,CAAC,SAAS,sBAAsB,SAAS;AAE/C,YAAU,MAAM;AACd,uBAAmB;AAAA,KAClB,CAAC;AAEJ,QAAM,kBAAkB,YACtB,CAAC,WACC,cAAc,OACZ,CAAC,WAAW,OAAO,SAAS,eAAe,OAAO,MAAM,cAAc,SAAS,OAAO,iBAE1F,CAAC;AAGH,QAAM,iBAAiB,YACrB,CAAC,cAAc;AACb,uBAAmB,gBAAgB;AAAA,KAErC,CAAC;AAGH,QAAM,SACJ,qCAAC,MAAD;AAAA,IACE,eACE,UAAU,YAAY,oCAAoC,YAAY;AAAA,IAExE,OAAO,EAAE,YAAY,QAAQ,UAAU;AAAA,KAEvC,qCAAC,YAAD;AAAA,IACE,QAAM;AAAA,IACN,WAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,eAAe;AAAA;AAKrB,QAAM,uBAAuB,MAAM;AACjC,uBAAmB,gBAAgB;AAAA;AAErC,SACE,qCAAC,eAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU,OAAO;AAAA,IACjB,aAAa;AAAA,IACb,aAAa,qCAAC,cAAD;AAAA,IACb;AAAA,IACA,WAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,cAAc,EAAE,OAAO,OAAO,KAAK,SAAS,eAAe;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table",
3
- "version": "3.0.0-next.4",
3
+ "version": "3.0.0-next.5",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "files": [
@@ -573,24 +573,24 @@
573
573
  "dependencies": {
574
574
  "@dnd-kit/core": "~4.0.3",
575
575
  "@dnd-kit/sortable": "~5.0.0",
576
- "@elliemae/ds-button": "3.0.0-next.4",
577
- "@elliemae/ds-circular-progress-indicator": "3.0.0-next.4",
578
- "@elliemae/ds-controlled-form": "3.0.0-next.4",
579
- "@elliemae/ds-drag-and-drop": "3.0.0-next.4",
580
- "@elliemae/ds-dropdownmenu": "3.0.0-next.4",
581
- "@elliemae/ds-form": "3.0.0-next.4",
582
- "@elliemae/ds-form-layout-blocks": "3.0.0-next.4",
583
- "@elliemae/ds-grid": "3.0.0-next.4",
584
- "@elliemae/ds-icons": "3.0.0-next.4",
585
- "@elliemae/ds-indeterminate-progress-indicator": "3.0.0-next.4",
586
- "@elliemae/ds-pagination": "3.0.0-next.4",
587
- "@elliemae/ds-pills": "3.0.0-next.4",
588
- "@elliemae/ds-popperjs": "3.0.0-next.4",
589
- "@elliemae/ds-props-helpers": "3.0.0-next.4",
590
- "@elliemae/ds-system": "3.0.0-next.4",
591
- "@elliemae/ds-toolbar": "3.0.0-next.4",
592
- "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.4",
593
- "@elliemae/ds-utilities": "3.0.0-next.4",
576
+ "@elliemae/ds-button": "3.0.0-next.5",
577
+ "@elliemae/ds-circular-progress-indicator": "3.0.0-next.5",
578
+ "@elliemae/ds-controlled-form": "3.0.0-next.5",
579
+ "@elliemae/ds-drag-and-drop": "3.0.0-next.5",
580
+ "@elliemae/ds-dropdownmenu": "3.0.0-next.5",
581
+ "@elliemae/ds-form": "3.0.0-next.5",
582
+ "@elliemae/ds-form-layout-blocks": "3.0.0-next.5",
583
+ "@elliemae/ds-grid": "3.0.0-next.5",
584
+ "@elliemae/ds-icons": "3.0.0-next.5",
585
+ "@elliemae/ds-indeterminate-progress-indicator": "3.0.0-next.5",
586
+ "@elliemae/ds-pagination": "3.0.0-next.5",
587
+ "@elliemae/ds-pills": "3.0.0-next.5",
588
+ "@elliemae/ds-popperjs": "3.0.0-next.5",
589
+ "@elliemae/ds-props-helpers": "3.0.0-next.5",
590
+ "@elliemae/ds-system": "3.0.0-next.5",
591
+ "@elliemae/ds-toolbar": "3.0.0-next.5",
592
+ "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.5",
593
+ "@elliemae/ds-utilities": "3.0.0-next.5",
594
594
  "@reduxjs/toolkit": "~1.7.1",
595
595
  "csstype": "~3.0.10",
596
596
  "moment": "~2.29.1",