@usereactify/search 5.19.3 → 5.20.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [5.20.1](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.20.0...release-v5.20.1) (2023-05-09)
+
+
+### Bug Fixes
+
+* improve types for range values ([597a6f3](https://bitbucket.org/usereactify/reactify-search-ui/commit/597a6f35dd069b5b7f18f6b248049c319981774a))
+
+## [5.20.0](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.19.3...release-v5.20.0) (2023-05-09)
+
+
+### Features
+
+* allow removing one or more (not just all) filters within SelectedFilters component ([4c486a4](https://bitbucket.org/usereactify/reactify-search-ui/commit/4c486a4d6adf64b39776cda8d074c92d5dc92f44))
+
 ### [5.19.3](https://bitbucket.org/usereactify/reactify-search-ui/compare/release-v5.19.2...release-v5.19.3) (2023-05-07)
 
 

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@usereactify/search",
     "description": "React UI library for Reactify Search",
-    "version": "5.19.3",
+    "version": "5.20.1",
     "license": "MIT",
     "main": "dist/src/index.js",
     "types": "dist/src/index.d.ts",

package/dist/src/components/Example/ExampleFiltersSelected.js

@@ -13,48 +13,21 @@ const ExampleFiltersSelected = (props) => {
 };
 exports.ExampleFiltersSelected = ExampleFiltersSelected;
 const ExampleFiltersSelectedItem = (props) => {
+    var _a;
     const filtersHook = (0, hooks_1.useFilters)();
-    const label = react_1.default.useMemo(() => {
-        var _a;
-        return parseFromSelectedValue(props.selectedFilter.value, ((_a = filtersHook.filters) !== null && _a !== void 0 ? _a : []).find((filter) => filter.handle === props.selectedFilter.key));
-    }, [props.selectedFilter.value, filtersHook.filters]);
+    const filter = (_a = filtersHook.filters) === null || _a === void 0 ? void 0 : _a.find((filter) => filter.handle === props.selectedFilter.key);
     return (react_1.default.createElement("li", { key: props.selectedFilter.key, className: "rs__filters-selected__list-item" },
-        react_1.default.createElement("label", { className: "rs__filters-selected__list-item-label", onClick: () => props.handleRemove(props.selectedFilter.key) },
-            react_1.default.createElement("span", { className: "rs__filters-selected__list-item-label" },
+        react_1.default.createElement("label", { className: "rs__filters-selected__list-item-label" },
+            react_1.default.createElement("span", { className: "rs__filters-selected__list-item-label", onClick: () => props.handleRemove(props.selectedFilter.key) },
                 props.selectedFilter.label,
                 ": "),
-            react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, label))));
-};
-const parseFromSelectedValue = (value, filter) => {
-    if (filter) {
-        if (filter.displayType === "single") {
-            if (filter.displayView === "range") {
-                return value.label;
-            }
-            return value;
-        }
-        if (filter.displayType === "multi") {
-            if (filter.displayView === "range") {
-                return value.map((item) => item.label).join(", ");
-            }
-            return value.join(", ");
-        }
-        if (filter.displayType === "slider") {
-            return `${filter.displaySliderPrefix}${value[0]} to ${filter.displaySliderPrefix}${value[1]}`;
-        }
-    }
-    const labelString = typeof value === "string" ? value : false;
-    const labelObject = !Array.isArray(value) && typeof value === "object"
-        ? `${value.start}-${value.end}`.replace("-0", "+")
-        : false;
-    const labelArray = Array.isArray(value) && typeof value[0] === "string"
-        ? value.join(", ")
-        : false;
-    const labelArrayObject = Array.isArray(value) && typeof value[0] === "object"
-        ? value
-            .map((item) => `${item.start}-${item.end}`.replace("-0", "+"))
-            .join(", ")
-        : false;
-    return labelString || labelObject || labelArray || labelArrayObject;
+            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "single" && filter.displayView === "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" },
+                react_1.default.createElement("span", null, props.selectedFilter.value.label))),
+            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "single" && filter.displayView !== "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" },
+                react_1.default.createElement("span", null, props.selectedFilter.value))),
+            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "multi" && filter.displayView === "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, props.selectedFilter.value.map((value) => (react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [value]) }, value.label))))),
+            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "multi" && filter.displayView !== "range" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" }, props.selectedFilter.value.map((value) => (react_1.default.createElement("span", { onClick: () => props.handleRemove(props.selectedFilter.key, [value]) }, value))))),
+            (filter === null || filter === void 0 ? void 0 : filter.displayType) === "slider" && (react_1.default.createElement("span", { className: "rs__filters-selected__list-item-value" },
+                react_1.default.createElement("span", null, `${filter.displaySliderPrefix}${props.selectedFilter.value[0]} to ${filter.displaySliderPrefix}${props.selectedFilter.value[1]}`))))));
 };
 //# sourceMappingURL=ExampleFiltersSelected.js.map

package/dist/src/components/Example/ExampleFiltersSelected.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleFiltersSelected.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFiltersSelected.tsx"],"names":[],"mappings":"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","sourcesContent":["import { stringArray } from \"@appbaseio/reactivesearch/lib/types\";\nimport React from \"react\";\n\nimport { FiltersSelectedProps } from \"../../components\";\nimport { useFilters } from \"../../hooks\";\nimport { ConfigFilterOption } from \"../../types\";\n\nexport type ExampleFiltersSelectedProps = React.ComponentProps<\n  NonNullable<FiltersSelectedProps[\"render\"]>\n>;\n\nexport const ExampleFiltersSelected: React.FC<ExampleFiltersSelectedProps> = (\n  props\n) => {\n  return (\n    <div className=\"rs__filters-selected\">\n      <h3 className=\"rs__filters-selected__name\">{\"Filters Selected\"}</h3>\n      <ul className=\"rs__filters-selected__list\">\n        {props.selectedFilters.map((selectedFilter) => (\n          <ExampleFiltersSelectedItem\n            selectedFilter={selectedFilter}\n            handleRemove={props.handleRemove}\n          />\n        ))}\n      </ul>\n    </div>\n  );\n};\n\ntype ExampleFiltersSelectedItemProps = {\n  selectedFilter: {\n    label: string;\n    key: string;\n    value: Array<string> | string | { start: number; end: number };\n  };\n  handleRemove: (filterKey: string) => void;\n};\n\nconst ExampleFiltersSelectedItem: React.FC<ExampleFiltersSelectedItemProps> = (\n  props\n) => {\n  const filtersHook = useFilters();\n\n  const label = React.useMemo<string>(() => {\n    return parseFromSelectedValue(\n      props.selectedFilter.value,\n      (filtersHook.filters ?? []).find(\n        (filter) => filter.handle === props.selectedFilter.key\n      )\n    );\n  }, [props.selectedFilter.value, filtersHook.filters]);\n\n  return (\n    <li\n      key={props.selectedFilter.key}\n      className=\"rs__filters-selected__list-item\"\n    >\n      <label\n        className=\"rs__filters-selected__list-item-label\"\n        onClick={() => props.handleRemove(props.selectedFilter.key)}\n      >\n        <span className=\"rs__filters-selected__list-item-label\">\n          {props.selectedFilter.label}\n          {\": \"}\n        </span>\n        <span className=\"rs__filters-selected__list-item-value\">{label}</span>\n      </label>\n    </li>\n  );\n};\n\nconst parseFromSelectedValue = (value: any, filter?: ConfigFilterOption) => {\n  if (filter) {\n    if (filter.displayType === \"single\") {\n      if (filter.displayView === \"range\") {\n        return value.label;\n      }\n      return value;\n    }\n    if (filter.displayType === \"multi\") {\n      if (filter.displayView === \"range\") {\n        return value.map((item: any) => item.label).join(\", \");\n      }\n      return value.join(\", \");\n    }\n    if (filter.displayType === \"slider\") {\n      return `${filter.displaySliderPrefix}${value[0]} to ${filter.displaySliderPrefix}${value[1]}`;\n    }\n  }\n\n  const labelString = typeof value === \"string\" ? value : false;\n\n  const labelObject =\n    !Array.isArray(value) && typeof value === \"object\"\n      ? `${value.start}-${value.end}`.replace(\"-0\", \"+\")\n      : false;\n\n  const labelArray =\n    Array.isArray(value) && typeof value[0] === \"string\"\n      ? value.join(\", \")\n      : false;\n\n  const labelArrayObject =\n    Array.isArray(value) && typeof value[0] === \"object\"\n      ? value\n          .map((item) => `${item.start}-${item.end}`.replace(\"-0\", \"+\"))\n          .join(\", \")\n      : false;\n\n  return labelString || labelObject || labelArray || labelArrayObject;\n};\n"]}
+{"version":3,"file":"ExampleFiltersSelected.js","sourceRoot":"","sources":["../../../../src/components/Example/ExampleFiltersSelected.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport { FiltersSelectedProps } from \"../../components\";\nimport { useFilters } from \"../../hooks\";\n\nexport type ExampleFiltersSelectedProps = React.ComponentProps<\n  NonNullable<FiltersSelectedProps[\"render\"]>\n>;\n\nexport const ExampleFiltersSelected: React.FC<ExampleFiltersSelectedProps> = (\n  props\n) => {\n  return (\n    <div className=\"rs__filters-selected\">\n      <h3 className=\"rs__filters-selected__name\">{\"Filters Selected\"}</h3>\n      <ul className=\"rs__filters-selected__list\">\n        {props.selectedFilters.map((selectedFilter) => (\n          <ExampleFiltersSelectedItem\n            selectedFilter={selectedFilter}\n            handleRemove={props.handleRemove}\n          />\n        ))}\n      </ul>\n    </div>\n  );\n};\n\ntype ExampleFiltersSelectedItemProps = {\n  selectedFilter: {\n    label: string;\n    key: string;\n    value:\n      | Array<string>\n      | string\n      | { label: string; start: number; end: number };\n  };\n  handleRemove: ExampleFiltersSelectedProps[\"handleRemove\"];\n};\n\nconst ExampleFiltersSelectedItem: React.FC<ExampleFiltersSelectedItemProps> = (\n  props\n) => {\n  const filtersHook = useFilters();\n  const filter = filtersHook.filters?.find(\n    (filter) => filter.handle === props.selectedFilter.key\n  );\n\n  return (\n    <li\n      key={props.selectedFilter.key}\n      className=\"rs__filters-selected__list-item\"\n    >\n      <label className=\"rs__filters-selected__list-item-label\">\n        <span\n          className=\"rs__filters-selected__list-item-label\"\n          onClick={() => props.handleRemove(props.selectedFilter.key)}\n        >\n          {props.selectedFilter.label}\n          {\": \"}\n        </span>\n\n        {filter?.displayType === \"single\" && filter.displayView === \"range\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            <span>{(props.selectedFilter.value as any).label}</span>\n          </span>\n        )}\n        {filter?.displayType === \"single\" && filter.displayView !== \"range\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            <span>{props.selectedFilter.value as any}</span>\n          </span>\n        )}\n        {filter?.displayType === \"multi\" && filter.displayView === \"range\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            {(props.selectedFilter.value as any).map((value: any) => (\n              <span\n                onClick={() =>\n                  props.handleRemove(props.selectedFilter.key, [value])\n                }\n              >\n                {value.label}\n              </span>\n            ))}\n          </span>\n        )}\n        {filter?.displayType === \"multi\" && filter.displayView !== \"range\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            {(props.selectedFilter.value as any).map((value: any) => (\n              <span\n                onClick={() =>\n                  props.handleRemove(props.selectedFilter.key, [value])\n                }\n              >\n                {value}\n              </span>\n            ))}\n          </span>\n        )}\n        {filter?.displayType === \"slider\" && (\n          <span className=\"rs__filters-selected__list-item-value\">\n            <span>\n              {`${filter.displaySliderPrefix}${\n                (props.selectedFilter.value as any)[0]\n              } to ${filter.displaySliderPrefix}${\n                (props.selectedFilter.value as any)[1]\n              }`}\n            </span>\n          </span>\n        )}\n      </label>\n    </li>\n  );\n};\n"]}

package/dist/src/components/Filter/Filter.js

@@ -77,7 +77,7 @@ const FilterRangeMulti = (props) => {
                 display: "none",
             } },
             react_1.default.createElement(MultiRange_1.default, Object.assign({}, reactiveFilterRangeProps, { value: filterRangeProps.values, 
-                // NOTE: onChange handler must be defined for controlled component to work correctly
+                // @note: onChange handler must be defined for controlled component to work correctly
                 onChange: () => { }, onValueChange: (values) => {
                     if (values.length === 0) {
                         filterRangeProps.handleClear();

package/dist/src/components/Filter/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport ReactiveComponent from \"@appbaseio/reactivesearch/lib/components/basic/ReactiveComponent\";\nimport MultiList from \"@appbaseio/reactivesearch/lib/components/list/MultiList\";\nimport SingleList from \"@appbaseio/reactivesearch/lib/components/list/SingleList\";\nimport SingleRange from \"@appbaseio/reactivesearch/lib/components/range/SingleRange\";\nimport MultiRange from \"@appbaseio/reactivesearch/lib/components/range/MultiRange\";\n\nimport type {\n  ConfigFilterOption,\n  ReactivesearchFilterListProps,\n} from \"../../types\";\nimport {\n  useFilterListProps,\n  useFilterRangeProps,\n  useFilterSliderProps,\n  useReactiveFilterListProps,\n  useReactiveFilterRangeProps,\n  useReactiveFilterSharedProps,\n  useReactiveFilterSliderProps,\n} from \"../../hooks\";\nimport {\n  ExampleFilterList,\n  ExampleFilterRange,\n  ExampleFilterSlider,\n} from \"../../components\";\nimport { useReactSliderProps } from \"../../hooks/react-slider/useReactSliderProps\";\n\nexport type FilterProps = {\n  /** The filter option being rendered */\n  filter: ConfigFilterOption;\n  /** Render method for List filters */\n  renderFilterList?: React.FC<{\n    filter: ConfigFilterOption;\n    filterListProps: ReturnType<typeof useFilterListProps>;\n  }>;\n  /** Render method for Range filters */\n  renderFilterRange?: React.FC<{\n    filter: ConfigFilterOption;\n    filterRangeProps: ReturnType<typeof useFilterRangeProps>;\n  }>;\n  /** Render method for Slider filters */\n  renderFilterSlider?: React.FC<{\n    filter: ConfigFilterOption;\n    filterSliderProps: ReturnType<typeof useFilterSliderProps>;\n    // reactSliderProps: ReturnType<typeof useReactSliderProps>;\n  }>;\n};\n\nexport const Filter: React.FC<FilterProps> = (props) => {\n  if (\"single\" === props.filter.displayType) {\n    if (\"range\" === props.filter.displayView) {\n      return <FilterRangeSingle {...props} />;\n    }\n    return <FilterSingleList {...props} />;\n  }\n\n  if (\"multi\" === props.filter.displayType) {\n    if (\"range\" === props.filter.displayView) {\n      return <FilterRangeMulti {...props} />;\n    }\n    return <FilterMultiList {...props} />;\n  }\n\n  if (\"slider\" === props.filter.displayType) {\n    return <FilterSlider {...props} />;\n  }\n\n  // TODO: Legacy range filter, migrate to new single and multi ranges\n  if (\"range\" === props.filter.displayType) {\n    return <FilterRangeSingle {...props} />;\n  }\n\n  console.warn(\n    `filter with display type \"${props.filter.displayType}\" not yet supported`\n  );\n\n  return null;\n};\n\nconst FilterSingleList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <SingleList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterMultiList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <MultiList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterRangeSingle: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  const filterRangeProps = useFilterRangeProps(props.filter);\n\n  const RenderRangeComponent = props.renderFilterRange ?? ExampleFilterRange;\n\n  return (\n    <>\n      <div\n        style={{\n          display: \"none\",\n        }}\n      >\n        <SingleRange\n          {...reactiveFilterRangeProps}\n          value={filterRangeProps.values[0]}\n          onChange={filterRangeProps.handleChange}\n        />\n      </div>\n      <RenderRangeComponent\n        filterRangeProps={filterRangeProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\nconst FilterRangeMulti: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  const filterRangeProps = useFilterRangeProps(props.filter);\n\n  const RenderRangeComponent = props.renderFilterRange ?? ExampleFilterRange;\n\n  return (\n    <>\n      <div\n        style={{\n          display: \"none\",\n        }}\n      >\n        <MultiRange\n          {...reactiveFilterRangeProps}\n          value={filterRangeProps.values}\n          // NOTE: onChange handler must be defined for controlled component to work correctly\n          onChange={() => {}}\n          onValueChange={(values) => {\n            if (values.length === 0) {\n              filterRangeProps.handleClear();\n            }\n          }}\n        />\n      </div>\n      <RenderRangeComponent\n        filterRangeProps={filterRangeProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\nconst FilterSlider: React.FC<FilterProps> = (props) => {\n  const reactiveFilterSharedProps = useReactiveFilterSharedProps(props.filter);\n  const [value, setValue] = React.useState<[number, number]>();\n\n  return (\n    <ReactiveComponent\n      {...reactiveFilterSharedProps}\n      defaultQuery={() => ({\n        aggs: {\n          min: {\n            min: {\n              field: props.filter.field,\n            },\n          },\n          max: {\n            max: {\n              field: props.filter.field,\n            },\n          },\n        },\n      })}\n      render={(reactivesearchFilterProps: any) => {\n        return (\n          <FilterSliderInner\n            {...props}\n            reactivesearchFilterProps={reactivesearchFilterProps}\n          />\n        );\n      }}\n    />\n  );\n};\n\n// inner component exists only so we can use memos in reactivesearch render functions\nconst FilterSliderInner: React.FC<\n  FilterProps & { reactivesearchFilterProps: any }\n> = (props) => {\n  const {\n    filter,\n    renderFilterSlider,\n    reactivesearchFilterProps,\n    ...otherProps\n  } = props;\n\n  const filterSliderProps = useFilterSliderProps(filter);\n\n  React.useEffect(() => {\n    if (reactivesearchFilterProps.aggregations) {\n      filterSliderProps.handleRange([\n        reactivesearchFilterProps.aggregations.min.value,\n        reactivesearchFilterProps.aggregations.max.value,\n      ]);\n    }\n  }, [\n    reactivesearchFilterProps.aggregations?.min.value,\n    reactivesearchFilterProps.aggregations?.max.value,\n  ]);\n\n  React.useEffect(() => {\n    if (filterSliderProps.value[0] === 0 && filterSliderProps.value[1] === 0) {\n      return;\n    }\n\n    props.reactivesearchFilterProps.setQuery({\n      query: {\n        query: {\n          bool: {\n            must: [\n              {\n                bool: {\n                  must: [\n                    {\n                      match: {\n                        published: true,\n                      },\n                    },\n                    {\n                      range: {\n                        [props.filter.field]: {\n                          gte: filterSliderProps.value[0],\n                          lte: filterSliderProps.value[1],\n                          boost: 2,\n                        },\n                      },\n                    },\n                  ],\n                },\n              },\n            ],\n          },\n        },\n      },\n      value: filterSliderProps.value,\n    });\n  }, [filterSliderProps.value]);\n\n  if (renderFilterSlider) {\n    const Component = renderFilterSlider;\n    return (\n      <Component\n        filterSliderProps={filterSliderProps}\n        filter={filter}\n        {...otherProps}\n      />\n    );\n  }\n\n  return (\n    <ExampleFilterSlider\n      filterSliderProps={filterSliderProps}\n      filter={filter}\n      {...otherProps}\n    />\n  );\n};\n\n// inner component exists only so we can use memos in reactivesearch render functions\nconst FilterListInner: React.FC<\n  FilterProps & { reactivesearchFilterProps: ReactivesearchFilterListProps }\n> = (props) => {\n  const { filter, renderFilterList, reactivesearchFilterProps, ...otherProps } =\n    props;\n\n  const filterListProps = useFilterListProps(filter, reactivesearchFilterProps);\n\n  // hide entire filter when no options available\n  if (0 === filterListProps.options.length) {\n    return null;\n  }\n\n  if (renderFilterList) {\n    const Component = renderFilterList;\n    return (\n      <Component\n        filterListProps={filterListProps}\n        filter={filter}\n        {...otherProps}\n      />\n    );\n  }\n\n  return (\n    <ExampleFilterList\n      filterListProps={filterListProps}\n      filter={filter}\n      {...otherProps}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport ReactiveComponent from \"@appbaseio/reactivesearch/lib/components/basic/ReactiveComponent\";\nimport MultiList from \"@appbaseio/reactivesearch/lib/components/list/MultiList\";\nimport SingleList from \"@appbaseio/reactivesearch/lib/components/list/SingleList\";\nimport SingleRange from \"@appbaseio/reactivesearch/lib/components/range/SingleRange\";\nimport MultiRange from \"@appbaseio/reactivesearch/lib/components/range/MultiRange\";\n\nimport type {\n  ConfigFilterOption,\n  ReactivesearchFilterListProps,\n} from \"../../types\";\nimport {\n  useFilterListProps,\n  useFilterRangeProps,\n  useFilterSliderProps,\n  useReactiveFilterListProps,\n  useReactiveFilterRangeProps,\n  useReactiveFilterSharedProps,\n  useReactiveFilterSliderProps,\n} from \"../../hooks\";\nimport {\n  ExampleFilterList,\n  ExampleFilterRange,\n  ExampleFilterSlider,\n} from \"../../components\";\n\nexport type FilterProps = {\n  /** The filter option being rendered */\n  filter: ConfigFilterOption;\n  /** Render method for List filters */\n  renderFilterList?: React.FC<{\n    filter: ConfigFilterOption;\n    filterListProps: ReturnType<typeof useFilterListProps>;\n  }>;\n  /** Render method for Range filters */\n  renderFilterRange?: React.FC<{\n    filter: ConfigFilterOption;\n    filterRangeProps: ReturnType<typeof useFilterRangeProps>;\n  }>;\n  /** Render method for Slider filters */\n  renderFilterSlider?: React.FC<{\n    filter: ConfigFilterOption;\n    filterSliderProps: ReturnType<typeof useFilterSliderProps>;\n    // reactSliderProps: ReturnType<typeof useReactSliderProps>;\n  }>;\n};\n\nexport const Filter: React.FC<FilterProps> = (props) => {\n  if (\"single\" === props.filter.displayType) {\n    if (\"range\" === props.filter.displayView) {\n      return <FilterRangeSingle {...props} />;\n    }\n    return <FilterSingleList {...props} />;\n  }\n\n  if (\"multi\" === props.filter.displayType) {\n    if (\"range\" === props.filter.displayView) {\n      return <FilterRangeMulti {...props} />;\n    }\n    return <FilterMultiList {...props} />;\n  }\n\n  if (\"slider\" === props.filter.displayType) {\n    return <FilterSlider {...props} />;\n  }\n\n  // TODO: Legacy range filter, migrate to new single and multi ranges\n  if (\"range\" === props.filter.displayType) {\n    return <FilterRangeSingle {...props} />;\n  }\n\n  console.warn(\n    `filter with display type \"${props.filter.displayType}\" not yet supported`\n  );\n\n  return null;\n};\n\nconst FilterSingleList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <SingleList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterMultiList: React.FC<FilterProps> = (props) => {\n  const reactiveFilterListProps = useReactiveFilterListProps(props.filter);\n\n  return (\n    <MultiList\n      {...reactiveFilterListProps}\n      render={(reactivesearchFilterProps: ReactivesearchFilterListProps) => (\n        <FilterListInner\n          {...props}\n          reactivesearchFilterProps={reactivesearchFilterProps}\n        />\n      )}\n    />\n  );\n};\n\nconst FilterRangeSingle: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  const filterRangeProps = useFilterRangeProps(props.filter);\n\n  const RenderRangeComponent = props.renderFilterRange ?? ExampleFilterRange;\n\n  return (\n    <>\n      <div\n        style={{\n          display: \"none\",\n        }}\n      >\n        <SingleRange\n          {...reactiveFilterRangeProps}\n          value={filterRangeProps.values[0]}\n          onChange={filterRangeProps.handleChange}\n        />\n      </div>\n      <RenderRangeComponent\n        filterRangeProps={filterRangeProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\nconst FilterRangeMulti: React.FC<FilterProps> = (props) => {\n  const reactiveFilterRangeProps = useReactiveFilterRangeProps(props.filter);\n\n  const filterRangeProps = useFilterRangeProps(props.filter);\n\n  const RenderRangeComponent = props.renderFilterRange ?? ExampleFilterRange;\n\n  return (\n    <>\n      <div\n        style={{\n          display: \"none\",\n        }}\n      >\n        <MultiRange\n          {...reactiveFilterRangeProps}\n          value={filterRangeProps.values}\n          // @note: onChange handler must be defined for controlled component to work correctly\n          onChange={() => {}}\n          onValueChange={(values) => {\n            if (values.length === 0) {\n              filterRangeProps.handleClear();\n            }\n          }}\n        />\n      </div>\n      <RenderRangeComponent\n        filterRangeProps={filterRangeProps}\n        filter={props.filter}\n      />\n    </>\n  );\n};\n\nconst FilterSlider: React.FC<FilterProps> = (props) => {\n  const reactiveFilterSharedProps = useReactiveFilterSharedProps(props.filter);\n  const [value, setValue] = React.useState<[number, number]>();\n\n  return (\n    <ReactiveComponent\n      {...reactiveFilterSharedProps}\n      defaultQuery={() => ({\n        aggs: {\n          min: {\n            min: {\n              field: props.filter.field,\n            },\n          },\n          max: {\n            max: {\n              field: props.filter.field,\n            },\n          },\n        },\n      })}\n      render={(reactivesearchFilterProps: any) => {\n        return (\n          <FilterSliderInner\n            {...props}\n            reactivesearchFilterProps={reactivesearchFilterProps}\n          />\n        );\n      }}\n    />\n  );\n};\n\n// inner component exists only so we can use memos in reactivesearch render functions\nconst FilterSliderInner: React.FC<\n  FilterProps & { reactivesearchFilterProps: any }\n> = (props) => {\n  const {\n    filter,\n    renderFilterSlider,\n    reactivesearchFilterProps,\n    ...otherProps\n  } = props;\n\n  const filterSliderProps = useFilterSliderProps(filter);\n\n  React.useEffect(() => {\n    if (reactivesearchFilterProps.aggregations) {\n      filterSliderProps.handleRange([\n        reactivesearchFilterProps.aggregations.min.value,\n        reactivesearchFilterProps.aggregations.max.value,\n      ]);\n    }\n  }, [\n    reactivesearchFilterProps.aggregations?.min.value,\n    reactivesearchFilterProps.aggregations?.max.value,\n  ]);\n\n  React.useEffect(() => {\n    if (filterSliderProps.value[0] === 0 && filterSliderProps.value[1] === 0) {\n      return;\n    }\n\n    props.reactivesearchFilterProps.setQuery({\n      query: {\n        query: {\n          bool: {\n            must: [\n              {\n                bool: {\n                  must: [\n                    {\n                      match: {\n                        published: true,\n                      },\n                    },\n                    {\n                      range: {\n                        [props.filter.field]: {\n                          gte: filterSliderProps.value[0],\n                          lte: filterSliderProps.value[1],\n                          boost: 2,\n                        },\n                      },\n                    },\n                  ],\n                },\n              },\n            ],\n          },\n        },\n      },\n      value: filterSliderProps.value,\n    });\n  }, [filterSliderProps.value]);\n\n  if (renderFilterSlider) {\n    const Component = renderFilterSlider;\n    return (\n      <Component\n        filterSliderProps={filterSliderProps}\n        filter={filter}\n        {...otherProps}\n      />\n    );\n  }\n\n  return (\n    <ExampleFilterSlider\n      filterSliderProps={filterSliderProps}\n      filter={filter}\n      {...otherProps}\n    />\n  );\n};\n\n// inner component exists only so we can use memos in reactivesearch render functions\nconst FilterListInner: React.FC<\n  FilterProps & { reactivesearchFilterProps: ReactivesearchFilterListProps }\n> = (props) => {\n  const { filter, renderFilterList, reactivesearchFilterProps, ...otherProps } =\n    props;\n\n  const filterListProps = useFilterListProps(filter, reactivesearchFilterProps);\n\n  // hide entire filter when no options available\n  if (0 === filterListProps.options.length) {\n    return null;\n  }\n\n  if (renderFilterList) {\n    const Component = renderFilterList;\n    return (\n      <Component\n        filterListProps={filterListProps}\n        filter={filter}\n        {...otherProps}\n      />\n    );\n  }\n\n  return (\n    <ExampleFilterList\n      filterListProps={filterListProps}\n      filter={filter}\n      {...otherProps}\n    />\n  );\n};\n"]}

package/dist/src/components/Filter/FiltersSelected.d.ts

@@ -6,11 +6,12 @@ export declare type FiltersSelectedProps = {
             key: string;
             label: string;
             value: Array<string> | string | {
+                label: string;
                 start: number;
                 end: number;
             };
         }>;
-        handleRemove: (filterKey: string) => void;
+        handleRemove: (filterKey: string, filterValues?: Array<string>) => void;
     }>;
 };
 export declare const FiltersSelected: React.FC<FiltersSelectedProps>;

package/dist/src/components/Filter/FiltersSelected.js

@@ -7,8 +7,10 @@ exports.FiltersSelected = void 0;
 const react_1 = __importDefault(require("react"));
 const SelectedFilters_1 = __importDefault(require("@appbaseio/reactivesearch/lib/components/basic/SelectedFilters"));
 const components_1 = require("../../components");
+const hooks_1 = require("../../hooks");
 const FiltersSelected = (props) => {
     var _a;
+    const filtersHook = (0, hooks_1.useFilters)();
     const RenderComponent = (_a = props.render) !== null && _a !== void 0 ? _a : components_1.ExampleFiltersSelected;
     return (react_1.default.createElement(SelectedFilters_1.default, { render: ({ selectedValues, setValue }) => {
             const selectedFilters = Object.entries(selectedValues)
@@ -23,8 +25,40 @@ const FiltersSelected = (props) => {
                 label: item.label,
                 value: item.value,
             }));
-            const handleRemove = (selectedFilterKey) => {
-                setValue(selectedFilterKey, null);
+            const handleRemove = (selectedFilterKey, selectedFilterValues = []) => {
+                var _a;
+                const filter = (_a = filtersHook.filters) === null || _a === void 0 ? void 0 : _a.find((filter) => filter.handle === selectedFilterKey);
+                if (!filter) {
+                    return;
+                }
+                if (selectedFilterValues.length === 0) {
+                    setValue(selectedFilterKey, null);
+                    return;
+                }
+                if (selectedFilterValues.length > 0) {
+                    if (filter.displayType === "single") {
+                        setValue(selectedFilterKey, null);
+                    }
+                    if (filter.displayType === "multi") {
+                        if (filter.displayView === "range") {
+                            const selectedFilterValueLabels = selectedFilterValues.map((selectedFilterValue) => selectedFilterValue.label);
+                            const values = selectedValues[selectedFilterKey].value
+                                .filter((value) => !selectedFilterValueLabels.includes(value.label))
+                                .map((value) => value.label);
+                            const event = new CustomEvent(`@usereactify/search:filter:${filter.handle}:update`, {
+                                detail: {
+                                    handle: filter.handle,
+                                    value: values,
+                                },
+                            });
+                            window.dispatchEvent(event);
+                        }
+                        if (filter.displayView !== "range") {
+                            const values = selectedValues[selectedFilterKey].value.filter((value) => !selectedFilterValues.includes(value));
+                            setValue(selectedFilterKey, values);
+                        }
+                    }
+                }
             };
             if (!selectedFilters.length) {
                 return null;

package/dist/src/components/Filter/FiltersSelected.js.map

@@ -1 +1 @@
-{"version":3,"file":"FiltersSelected.js","sourceRoot":"","sources":["../../../../src/components/Filter/FiltersSelected.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qHAA6F;AAE7F,iDAA0D;AAcnD,MAAM,eAAe,GAAmC,CAAC,KAAK,EAAE,EAAE;;IACvE,MAAM,eAAe,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,mCAAsB,CAAC;IAE/D,OAAO,CACL,8BAAC,yBAAe,IACd,MAAM,EAAE,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE;YACvC,MAAM,eAAe,GACnB,MAAM,CAAC,OAAO,CAAC,cAAc,CAC9B;iBACE,MAAM,CACL,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE;;gBACd,OAAA,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS;qBACf,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,CAAA;oBAChB,CAAC,CAAC,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,MAAM,CAAA,IAAI,CAAC,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,KAAK,CAAA,CAAC,CAAA;aAAA,CAClD;iBACA,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;gBACrB,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC,CAAC;YAEN,MAAM,YAAY,GAAG,CAAC,iBAAyB,EAAE,EAAE;gBACjD,QAAQ,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;YACpC,CAAC,CAAC;YAEF,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;gBAC3B,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,8BAAC,eAAe,IACd,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC;QACJ,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,eAAe,mBAsC1B","sourcesContent":["import React from \"react\";\nimport SelectedFilters from \"@appbaseio/reactivesearch/lib/components/basic/SelectedFilters\";\n\nimport { ExampleFiltersSelected } from \"../../components\";\n\nexport type FiltersSelectedProps = {\n  /** Render method called once for all active filters */\n  render?: React.FC<{\n    selectedFilters: Array<{\n      key: string;\n      label: string;\n      value: Array<string> | string | { start: number; end: number };\n    }>;\n    handleRemove: (filterKey: string) => void;\n  }>;\n};\n\nexport const FiltersSelected: React.FC<FiltersSelectedProps> = (props) => {\n  const RenderComponent = props.render ?? ExampleFiltersSelected;\n\n  return (\n    <SelectedFilters\n      render={({ selectedValues, setValue }) => {\n        const selectedFilters = (\n          Object.entries(selectedValues) as Array<[string, any]>\n        )\n          .filter(\n            ([key, item]) =>\n              item?.URLParams &&\n              item?.showFilter &&\n              (!!item?.value?.length || !!item?.value?.label)\n          )\n          .map(([key, item]) => ({\n            key: key,\n            label: item.label,\n            value: item.value,\n          }));\n\n        const handleRemove = (selectedFilterKey: string) => {\n          setValue(selectedFilterKey, null);\n        };\n\n        if (!selectedFilters.length) {\n          return null;\n        }\n\n        return (\n          <RenderComponent\n            selectedFilters={selectedFilters}\n            handleRemove={handleRemove}\n          />\n        );\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"FiltersSelected.js","sourceRoot":"","sources":["../../../../src/components/Filter/FiltersSelected.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport SelectedFilters from \"@appbaseio/reactivesearch/lib/components/basic/SelectedFilters\";\n\nimport { ExampleFiltersSelected } from \"../../components\";\nimport { useFilters } from \"../../hooks\";\n\nexport type FiltersSelectedProps = {\n  /** Render method called once for all active filters */\n  render?: React.FC<{\n    selectedFilters: Array<{\n      key: string;\n      label: string;\n      value:\n        | Array<string>\n        | string\n        | { label: string; start: number; end: number };\n    }>;\n    handleRemove: (filterKey: string, filterValues?: Array<string>) => void;\n  }>;\n};\n\nexport const FiltersSelected: React.FC<FiltersSelectedProps> = (props) => {\n  const filtersHook = useFilters();\n\n  const RenderComponent = props.render ?? ExampleFiltersSelected;\n\n  return (\n    <SelectedFilters\n      render={({ selectedValues, setValue }) => {\n        const selectedFilters = (\n          Object.entries(selectedValues) as Array<[string, any]>\n        )\n          .filter(\n            ([key, item]) =>\n              item?.URLParams &&\n              item?.showFilter &&\n              (!!item?.value?.length || !!item?.value?.label)\n          )\n          .map(([key, item]) => ({\n            key: key,\n            label: item.label,\n            value: item.value,\n          }));\n\n        const handleRemove = (\n          selectedFilterKey: string,\n          selectedFilterValues: Array<string> = []\n        ) => {\n          const filter = filtersHook.filters?.find(\n            (filter) => filter.handle === selectedFilterKey\n          );\n          if (!filter) {\n            return;\n          }\n\n          if (selectedFilterValues.length === 0) {\n            setValue(selectedFilterKey, null);\n\n            return;\n          }\n\n          if (selectedFilterValues.length > 0) {\n            if (filter.displayType === \"single\") {\n              setValue(selectedFilterKey, null);\n            }\n            if (filter.displayType === \"multi\") {\n              if (filter.displayView === \"range\") {\n                const selectedFilterValueLabels = (\n                  selectedFilterValues as any as Array<{ label: string }>\n                ).map((selectedFilterValue) => selectedFilterValue.label);\n                const values = selectedValues[selectedFilterKey].value\n                  .filter(\n                    (value: { label: string }) =>\n                      !selectedFilterValueLabels.includes(value.label)\n                  )\n                  .map((value: { label: string }) => value.label);\n                const event = new CustomEvent<{\n                  handle: string;\n                  value: Array<string>;\n                }>(`@usereactify/search:filter:${filter.handle}:update`, {\n                  detail: {\n                    handle: filter.handle,\n                    value: values,\n                  },\n                });\n                window.dispatchEvent(event);\n              }\n              if (filter.displayView !== \"range\") {\n                const values = selectedValues[selectedFilterKey].value.filter(\n                  (value: string) => !selectedFilterValues.includes(value)\n                );\n                setValue(selectedFilterKey, values);\n              }\n            }\n          }\n        };\n\n        if (!selectedFilters.length) {\n          return null;\n        }\n\n        return (\n          <RenderComponent\n            selectedFilters={selectedFilters}\n            handleRemove={handleRemove}\n          />\n        );\n      }}\n    />\n  );\n};\n"]}

package/dist/src/hooks/useFilterRangeProps.js

@@ -41,6 +41,26 @@ const useFilterRangeProps = (filter) => {
     const handleClear = react_1.default.useCallback(() => {
         setFilterValues([]);
     }, []);
+    react_1.default.useEffect(() => {
+        var _a;
+        try {
+            if (filter.displayView === "range") {
+                const url = new URL(window.location.href);
+                const value = JSON.parse((_a = url.searchParams.get(filter.handle)) !== null && _a !== void 0 ? _a : "[]");
+                setFilterValues(value);
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }, []);
+    react_1.default.useEffect(() => {
+        const handler = (event) => {
+            setFilterValues(event.detail.value);
+        };
+        window.addEventListener(`@usereactify/search:filter:${filter.handle}:update`, handler);
+        return () => window.removeEventListener(`@usereactify/search:filter:${filter.handle}:update`, handler);
+    }, []);
     const filterRangeProps = react_1.default.useMemo(() => {
         var _a, _b;
         const options = (_b = (_a = filter.displayRangeOptions) === null || _a === void 0 ? void 0 : _a.map((option) => {

package/dist/src/hooks/useFilterRangeProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilterRangeProps.js","sourceRoot":"","sources":["../../../src/hooks/useFilterRangeProps.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,oCAAwC;AACxC,wCAAmC;AAE5B,MAAM,mBAAmB,GAAG,CACjC,MAA0B,EAW1B,EAAE;IACF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IACjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,eAAK,CAAC,WAAW,CACpC,CAAC,GAAW,EAAE,EAAE;QACd,eAAK,CAAC,UAAU,CAAC;YACf,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,uBAAuB;YAChC,IAAI,EAAE;gBACJ,MAAM,EAAE,MAAM,CAAC,IAAI;gBACnB,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,KAAK,EAAE,GAAG;aACX;SACF,CAAC,CAAC;QAEH,eAAK,CAAC,GAAG,CAAC,0BAA0B,EAAE,mBAAmB,EAAE,GAAG,CAAC,CAAC;QAEhE,IAAI,MAAM,CAAC,WAAW,KAAK,OAAO,EAAE;YAClC,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC;gBAChE,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC;gBAC/C,CAAC,CAAC,CAAC,GAAG,YAAY,EAAE,GAAG,CAAC,CAAC;YAE3B,eAAe,CAAC,QAAQ,CAAC,CAAC;SAC3B;QACD,IAAI,MAAM,CAAC,WAAW,KAAK,QAAQ,EAAE;YACnC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;SACxB;QAED,KAAK,CAAC;YACJ,SAAS,EAAE,cAAc;YACzB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,GAAG;aACX;SACF,CAAC,CAAC;IACL,CAAC,EACD,CAAC,MAAM,EAAE,YAAY,CAAC,CACvB,CAAC;IAEF,MAAM,WAAW,GAAG,eAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,eAAe,CAAC,EAAE,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;;QAC1C,MAAM,OAAO,GACX,MAAA,MAAA,MAAM,CAAC,mBAAmB,0CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACzC,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAChC,OAAO;gBACL,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,GAAG;gBACzD,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC;aACpC,CAAC;QACJ,CAAC,CAAC,mCAAI,EAAE,CAAC;QAEX,OAAO;YACL,YAAY;YACZ,WAAW;YACX,MAAM;YACN,MAAM,EAAE,YAAY;YACpB,OAAO;SACR,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEzC,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AA7EW,QAAA,mBAAmB,uBA6E9B","sourcesContent":["import React from \"react\";\n\nimport { ConfigFilterOption } from \"../types/config\";\nimport { useAnalytics } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useFilterRangeProps = (\n  filter: ConfigFilterOption\n): {\n  filter: ConfigFilterOption;\n  options: Array<{\n    key: string;\n    label: string;\n    checked: boolean;\n  }>;\n  values: string[];\n  handleChange: (key: string) => void;\n  handleClear: () => void;\n} => {\n  const { track } = useAnalytics();\n  const [filterValues, setFilterValues] = React.useState<string[]>([]);\n\n  const handleChange = React.useCallback(\n    (key: string) => {\n      debug.breadcrumb({\n        category: \"filter\",\n        message: \"filter option changed\",\n        data: {\n          filter: filter.name,\n          field: filter.field,\n          value: key,\n        },\n      });\n\n      debug.log(\"useFilterRangeMultiProps\", \"handleChange[key]\", key);\n\n      if (filter.displayType === \"multi\") {\n        const selected = filterValues.find((item: string) => item === key)\n          ? filterValues.filter((value) => value !== key)\n          : [...filterValues, key];\n\n        setFilterValues(selected);\n      }\n      if (filter.displayType === \"single\") {\n        setFilterValues([key]);\n      }\n\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: key,\n        },\n      });\n    },\n    [filter, filterValues]\n  );\n\n  const handleClear = React.useCallback(() => {\n    setFilterValues([]);\n  }, []);\n\n  const filterRangeProps = React.useMemo(() => {\n    const options =\n      filter.displayRangeOptions?.map((option) => {\n        const [key] = option.split(\":\");\n        return {\n          key: key,\n          label: filter.settingsUppercase ? key.toUpperCase() : key,\n          checked: filterValues.includes(key),\n        };\n      }) ?? [];\n\n    return {\n      handleChange,\n      handleClear,\n      filter,\n      values: filterValues,\n      options,\n    };\n  }, [filter, filterValues, handleChange]);\n\n  return filterRangeProps;\n};\n"]}
+{"version":3,"file":"useFilterRangeProps.js","sourceRoot":"","sources":["../../../src/hooks/useFilterRangeProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport { ConfigFilterOption } from \"../types/config\";\nimport { useAnalytics } from \"../hooks\";\nimport { debug } from \"../utility\";\n\nexport const useFilterRangeProps = (\n  filter: ConfigFilterOption\n): {\n  filter: ConfigFilterOption;\n  options: Array<{\n    key: string;\n    label: string;\n    checked: boolean;\n  }>;\n  values: string[];\n  handleChange: (key: string) => void;\n  handleClear: () => void;\n} => {\n  const { track } = useAnalytics();\n  const [filterValues, setFilterValues] = React.useState<string[]>([]);\n\n  const handleChange = React.useCallback(\n    (key: string) => {\n      debug.breadcrumb({\n        category: \"filter\",\n        message: \"filter option changed\",\n        data: {\n          filter: filter.name,\n          field: filter.field,\n          value: key,\n        },\n      });\n\n      debug.log(\"useFilterRangeMultiProps\", \"handleChange[key]\", key);\n\n      if (filter.displayType === \"multi\") {\n        const selected = filterValues.find((item: string) => item === key)\n          ? filterValues.filter((value) => value !== key)\n          : [...filterValues, key];\n\n        setFilterValues(selected);\n      }\n      if (filter.displayType === \"single\") {\n        setFilterValues([key]);\n      }\n\n      track({\n        eventName: \"filterChange\",\n        payload: {\n          name: filter.name,\n          value: key,\n        },\n      });\n    },\n    [filter, filterValues]\n  );\n\n  const handleClear = React.useCallback(() => {\n    setFilterValues([]);\n  }, []);\n\n  React.useEffect(() => {\n    try {\n      if (filter.displayView === \"range\") {\n        const url = new URL(window.location.href);\n        const value = JSON.parse(url.searchParams.get(filter.handle) ?? \"[]\");\n        setFilterValues(value);\n      }\n    } catch (error) {\n      console.error(error);\n    }\n  }, []);\n\n  React.useEffect(() => {\n    const handler = (\n      event: CustomEvent<{ handle: string; value: Array<string> }>\n    ) => {\n      setFilterValues(event.detail.value);\n    };\n    window.addEventListener(\n      `@usereactify/search:filter:${filter.handle}:update`,\n      handler as EventListener\n    );\n\n    return () =>\n      window.removeEventListener(\n        `@usereactify/search:filter:${filter.handle}:update`,\n        handler as EventListener\n      );\n  }, []);\n\n  const filterRangeProps = React.useMemo(() => {\n    const options =\n      filter.displayRangeOptions?.map((option) => {\n        const [key] = option.split(\":\");\n        return {\n          key: key,\n          label: filter.settingsUppercase ? key.toUpperCase() : key,\n          checked: filterValues.includes(key),\n        };\n      }) ?? [];\n\n    return {\n      handleChange,\n      handleClear,\n      filter,\n      values: filterValues,\n      options,\n    };\n  }, [filter, filterValues, handleChange]);\n\n  return filterRangeProps;\n};\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "5.19.3",
+  "version": "5.20.1",
   "license": "MIT",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",