@redis-ui/components 37.0.0

package/dist/Filters/Filters.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const FiltersBar = _styled__default.default.div.withConfig({
+  displayName: "Filtersstyle__FiltersBar",
+  componentId: "RedisUI__sc-1vw4w4v-0"
+})(["display:inline-flex;align-items:center;justify-content:space-between;white-space:nowrap;width:100%;gap:", ";padding:", ";"], () => redisUiStyles.useTheme().components.filters.filtersBar.gap, () => redisUiStyles.useTheme().components.filters.filtersBar.padding);
+exports.FiltersBar = FiltersBar;

package/dist/Filters/Filters.style.d.ts

@@ -0,0 +1 @@
+export declare const FiltersBar: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Filters/Filters.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const FiltersBar = _styled.div.withConfig({
+  displayName: "Filtersstyle__FiltersBar",
+  componentId: "RedisUI__sc-1vw4w4v-0"
+})(["display:inline-flex;align-items:center;justify-content:space-between;white-space:nowrap;width:100%;gap:", ";padding:", ";"], () => useTheme().components.filters.filtersBar.gap, () => useTheme().components.filters.filtersBar.padding);
+export {
+  FiltersBar
+};

package/dist/Filters/Filters.types.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes } from 'react';
+export type FilterType = 'MultiSelect' | 'MultiTreeSelect';
+export interface FilterItemConfig {
+    key: string;
+    label: string;
+    options: FilterOption[];
+    type?: FilterType;
+    showSearch?: boolean;
+}
+export interface FilterOption {
+    id?: string;
+    label: string;
+    value: string | number;
+    chipLabel?: string;
+    descendants?: FilterOption[];
+}
+export interface FilterActive {
+    key: string;
+    selectedOptions: FilterOption[];
+    type?: FilterType;
+}
+export interface FiltersProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    availableFilters: FilterItemConfig[];
+    activeFilters: FilterActive[];
+    onChange: (activeFilters: FilterActive[]) => void;
+    showSearchLimit?: number;
+}
+export interface FiltersContextProps {
+    availableFilters: FilterItemConfig[];
+    activeFilters: FilterActive[];
+    onChange: (activeFilters: FilterActive[]) => void;
+    onFilterItemSelect: (filter: FilterItemConfig, filterOption: FilterOption) => void;
+    isOptionSelect: (filter: FilterItemConfig, filterOption: FilterOption) => boolean;
+    getFilterActiveOptions: (filter: FilterItemConfig) => FilterOption[];
+}

package/dist/Filters/Filters.utils.cjs

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const filtersMapToArray = (map) => Array.from(map.keys()).map((key) => {
+  var _a, _b;
+  return {
+    key,
+    selectedOptions: Array.from(((_a = map.get(key)) == null ? void 0 : _a.selectedOptions) || []),
+    type: (_b = map.get(key)) == null ? void 0 : _b.type
+  };
+});
+const arrayToFiltersMap = (activeFilters) => activeFilters.reduce((acc, filter) => {
+  const valueSet = filter.selectedOptions.reduce((setAcc, option) => {
+    setAcc.add(option);
+    return setAcc;
+  }, /* @__PURE__ */ new Set());
+  acc.set(filter.key, {
+    selectedOptions: valueSet,
+    type: filter.type
+  });
+  return acc;
+}, /* @__PURE__ */ new Map());
+const findFilterOptionById = (filter, id) => {
+  const searchOptions = (options) => {
+    let foundOption;
+    options.forEach((option) => {
+      if (option.id === id) {
+        foundOption = option;
+        return;
+      }
+      if (option.descendants) {
+        const foundDescendant = searchOptions(option.descendants);
+        if (foundDescendant) {
+          foundOption = foundDescendant;
+        }
+      }
+    });
+    return foundOption;
+  };
+  return searchOptions(filter.options);
+};
+const convertToTreeData = (filter, isOptionSelect) => {
+  const addDescendants = (options) => {
+    return options.reduce((acc, cur) => {
+      acc[cur.value] = {
+        id: cur.id,
+        label: cur.label,
+        checked: !cur.descendants && isOptionSelect(filter, cur),
+        descendants: cur.descendants && addDescendants(cur.descendants)
+      };
+      return acc;
+    }, {});
+  };
+  return addDescendants(filter.options);
+};
+const getTreeActiveOptionsNum = (filterOptions) => {
+  const getActiveOptionsNum = (options) => options.reduce((acc, cur) => {
+    if (cur.descendants) {
+      return acc + getActiveOptionsNum(cur.descendants) + 1e-3;
+    }
+    return acc + 1;
+  }, 0);
+  return getActiveOptionsNum(filterOptions);
+};
+const filterOptionsLengthFunc = (options) => {
+  let count = 0;
+  count += options.length;
+  for (let index = 0; index < options.length; index++) {
+    const option = options[index];
+    if (option.descendants) {
+      count += filterOptionsLengthFunc(option.descendants);
+    }
+  }
+  return count;
+};
+const recursiveAddIds = (options, acc) => {
+  options.forEach((option) => {
+    option.id = option.id || `${acc}.${option.value}`;
+    if (option.descendants) {
+      recursiveAddIds(option.descendants, option.id);
+    }
+  });
+};
+const addIdsToAvailableFilters = (availableFilters) => {
+  availableFilters.forEach((filter) => {
+    if (filter.type === "MultiTreeSelect") {
+      recursiveAddIds(filter.options, filter.key);
+    }
+  });
+  return availableFilters;
+};
+const addIdsToActiveFilters = (activeFilters) => {
+  activeFilters.forEach((filter) => {
+    if (filter.type === "MultiTreeSelect") {
+      recursiveAddIds(filter.selectedOptions, filter.key);
+    }
+  });
+  return activeFilters;
+};
+const removeFilterOptionIfFound = (optionsSet, newOption) => {
+  const innerRemoveIfFound = (options) => {
+    for (const option of options) {
+      if (option.id === newOption.id) {
+        options.splice(options.indexOf(option), 1);
+        return true;
+      }
+      if (option.descendants) {
+        if (innerRemoveIfFound(option.descendants)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  const optionsArray = Array.from(optionsSet);
+  return {
+    found: innerRemoveIfFound(optionsArray),
+    newSet: new Set(optionsArray)
+  };
+};
+const addFilterOption = (filter, options, newOption) => {
+  const newOptionWithoutDescendants = {
+    ...newOption,
+    descendants: void 0
+  };
+  let added = false;
+  options.forEach((option) => {
+    var _a, _b;
+    const foundOption = findFilterOptionById(filter, option.id);
+    if ((_a = foundOption == null ? void 0 : foundOption.descendants) == null ? void 0 : _a.find((descendant) => descendant.id === newOption.id)) {
+      option.descendants = option.descendants || [];
+      option.descendants.push(newOptionWithoutDescendants);
+      added = true;
+    } else if ((_b = newOption.descendants) == null ? void 0 : _b.find((descendant) => descendant.id === option.id)) {
+      newOptionWithoutDescendants.descendants = newOptionWithoutDescendants.descendants || [];
+      newOptionWithoutDescendants.descendants.push(option);
+      options.delete(option);
+      options.add(newOptionWithoutDescendants);
+      added = true;
+    }
+  });
+  if (!added) {
+    options.add(newOptionWithoutDescendants);
+  }
+};
+const checkHasFilter = (options, optionToSearch) => {
+  if (!options) {
+    return false;
+  }
+  for (const option of options) {
+    if (option.id === optionToSearch.id) {
+      return true;
+    }
+    if (option.descendants) {
+      if (checkHasFilter(option.descendants, optionToSearch)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+exports.addFilterOption = addFilterOption;
+exports.addIdsToActiveFilters = addIdsToActiveFilters;
+exports.addIdsToAvailableFilters = addIdsToAvailableFilters;
+exports.arrayToFiltersMap = arrayToFiltersMap;
+exports.checkHasFilter = checkHasFilter;
+exports.convertToTreeData = convertToTreeData;
+exports.filterOptionsLengthFunc = filterOptionsLengthFunc;
+exports.filtersMapToArray = filtersMapToArray;
+exports.findFilterOptionById = findFilterOptionById;
+exports.getTreeActiveOptionsNum = getTreeActiveOptionsNum;
+exports.removeFilterOptionIfFound = removeFilterOptionIfFound;

package/dist/Filters/Filters.utils.d.ts

@@ -0,0 +1,20 @@
+import { FilterActive, FilterItemConfig, FilterOption, FilterType } from './Filters.types';
+import { TreeNodes } from '../TreeView';
+export type MapType = Map<string, {
+    selectedOptions: Set<FilterOption>;
+    type?: FilterType;
+}>;
+export declare const filtersMapToArray: (map: MapType) => FilterActive[];
+export declare const arrayToFiltersMap: (activeFilters: FilterActive[]) => MapType;
+export declare const findFilterOptionById: (filter: FilterItemConfig, id?: string) => FilterOption | undefined;
+export declare const convertToTreeData: (filter: FilterItemConfig, isOptionSelect: (filter: FilterItemConfig, filterOption: FilterOption) => boolean) => TreeNodes;
+export declare const getTreeActiveOptionsNum: (filterOptions: FilterOption[]) => number;
+export declare const filterOptionsLengthFunc: (options: FilterOption[]) => number;
+export declare const addIdsToAvailableFilters: (availableFilters: FilterItemConfig[]) => FilterItemConfig[];
+export declare const addIdsToActiveFilters: (activeFilters: FilterActive[]) => FilterActive[];
+export declare const removeFilterOptionIfFound: (optionsSet: Set<FilterOption>, newOption: FilterOption) => {
+    found: boolean;
+    newSet: Set<FilterOption>;
+};
+export declare const addFilterOption: (filter: FilterItemConfig, options: Set<FilterOption>, newOption: FilterOption) => void;
+export declare const checkHasFilter: (options: Set<FilterOption> | FilterOption[] | undefined, optionToSearch: FilterOption) => boolean;

package/dist/Filters/Filters.utils.js

@@ -0,0 +1,171 @@
+const filtersMapToArray = (map) => Array.from(map.keys()).map((key) => {
+  var _a, _b;
+  return {
+    key,
+    selectedOptions: Array.from(((_a = map.get(key)) == null ? void 0 : _a.selectedOptions) || []),
+    type: (_b = map.get(key)) == null ? void 0 : _b.type
+  };
+});
+const arrayToFiltersMap = (activeFilters) => activeFilters.reduce((acc, filter) => {
+  const valueSet = filter.selectedOptions.reduce((setAcc, option) => {
+    setAcc.add(option);
+    return setAcc;
+  }, /* @__PURE__ */ new Set());
+  acc.set(filter.key, {
+    selectedOptions: valueSet,
+    type: filter.type
+  });
+  return acc;
+}, /* @__PURE__ */ new Map());
+const findFilterOptionById = (filter, id) => {
+  const searchOptions = (options) => {
+    let foundOption;
+    options.forEach((option) => {
+      if (option.id === id) {
+        foundOption = option;
+        return;
+      }
+      if (option.descendants) {
+        const foundDescendant = searchOptions(option.descendants);
+        if (foundDescendant) {
+          foundOption = foundDescendant;
+        }
+      }
+    });
+    return foundOption;
+  };
+  return searchOptions(filter.options);
+};
+const convertToTreeData = (filter, isOptionSelect) => {
+  const addDescendants = (options) => {
+    return options.reduce((acc, cur) => {
+      acc[cur.value] = {
+        id: cur.id,
+        label: cur.label,
+        checked: !cur.descendants && isOptionSelect(filter, cur),
+        descendants: cur.descendants && addDescendants(cur.descendants)
+      };
+      return acc;
+    }, {});
+  };
+  return addDescendants(filter.options);
+};
+const getTreeActiveOptionsNum = (filterOptions) => {
+  const getActiveOptionsNum = (options) => options.reduce((acc, cur) => {
+    if (cur.descendants) {
+      return acc + getActiveOptionsNum(cur.descendants) + 1e-3;
+    }
+    return acc + 1;
+  }, 0);
+  return getActiveOptionsNum(filterOptions);
+};
+const filterOptionsLengthFunc = (options) => {
+  let count = 0;
+  count += options.length;
+  for (let index = 0; index < options.length; index++) {
+    const option = options[index];
+    if (option.descendants) {
+      count += filterOptionsLengthFunc(option.descendants);
+    }
+  }
+  return count;
+};
+const recursiveAddIds = (options, acc) => {
+  options.forEach((option) => {
+    option.id = option.id || `${acc}.${option.value}`;
+    if (option.descendants) {
+      recursiveAddIds(option.descendants, option.id);
+    }
+  });
+};
+const addIdsToAvailableFilters = (availableFilters) => {
+  availableFilters.forEach((filter) => {
+    if (filter.type === "MultiTreeSelect") {
+      recursiveAddIds(filter.options, filter.key);
+    }
+  });
+  return availableFilters;
+};
+const addIdsToActiveFilters = (activeFilters) => {
+  activeFilters.forEach((filter) => {
+    if (filter.type === "MultiTreeSelect") {
+      recursiveAddIds(filter.selectedOptions, filter.key);
+    }
+  });
+  return activeFilters;
+};
+const removeFilterOptionIfFound = (optionsSet, newOption) => {
+  const innerRemoveIfFound = (options) => {
+    for (const option of options) {
+      if (option.id === newOption.id) {
+        options.splice(options.indexOf(option), 1);
+        return true;
+      }
+      if (option.descendants) {
+        if (innerRemoveIfFound(option.descendants)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  const optionsArray = Array.from(optionsSet);
+  return {
+    found: innerRemoveIfFound(optionsArray),
+    newSet: new Set(optionsArray)
+  };
+};
+const addFilterOption = (filter, options, newOption) => {
+  const newOptionWithoutDescendants = {
+    ...newOption,
+    descendants: void 0
+  };
+  let added = false;
+  options.forEach((option) => {
+    var _a, _b;
+    const foundOption = findFilterOptionById(filter, option.id);
+    if ((_a = foundOption == null ? void 0 : foundOption.descendants) == null ? void 0 : _a.find((descendant) => descendant.id === newOption.id)) {
+      option.descendants = option.descendants || [];
+      option.descendants.push(newOptionWithoutDescendants);
+      added = true;
+    } else if ((_b = newOption.descendants) == null ? void 0 : _b.find((descendant) => descendant.id === option.id)) {
+      newOptionWithoutDescendants.descendants = newOptionWithoutDescendants.descendants || [];
+      newOptionWithoutDescendants.descendants.push(option);
+      options.delete(option);
+      options.add(newOptionWithoutDescendants);
+      added = true;
+    }
+  });
+  if (!added) {
+    options.add(newOptionWithoutDescendants);
+  }
+};
+const checkHasFilter = (options, optionToSearch) => {
+  if (!options) {
+    return false;
+  }
+  for (const option of options) {
+    if (option.id === optionToSearch.id) {
+      return true;
+    }
+    if (option.descendants) {
+      if (checkHasFilter(option.descendants, optionToSearch)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+export {
+  addFilterOption,
+  addIdsToActiveFilters,
+  addIdsToAvailableFilters,
+  arrayToFiltersMap,
+  checkHasFilter,
+  convertToTreeData,
+  filterOptionsLengthFunc,
+  filtersMapToArray,
+  findFilterOptionById,
+  getTreeActiveOptionsNum,
+  removeFilterOptionIfFound
+};

package/dist/Filters/components/Chips/Chips.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Filters_context = require("../../Filters.context.cjs");
+const Filters_utils = require("../../Filters.utils.cjs");
+const Chips_style = require("./Chips.style.cjs");
+const ChipList = require("../../../ChipList/ChipList.cjs");
+const KEY_VAL_SEPARATOR = "__";
+function getMultiTreeSelectChips(activeFilter, filter) {
+  const acc = [];
+  activeFilter.selectedOptions.forEach((option) => {
+    var _a, _b, _c;
+    acc.push({
+      key: activeFilter.key + KEY_VAL_SEPARATOR + String(option.value),
+      label: `${option.chipLabel || option.label}: ${option.descendants && filter && option.descendants.length === ((_b = (_a = Filters_utils.findFilterOptionById(filter, option.id)) == null ? void 0 : _a.descendants) == null ? void 0 : _b.length) && option.descendants.length > 1 ? "All Values" : (_c = option.descendants) == null ? void 0 : _c.map((descendant) => descendant.chipLabel || descendant.label).join(", ")}`
+    });
+  });
+  return acc;
+}
+const getChipsItemsFromFilters = (filters, availableFilters) => filters.reduce((acc, activeFilter) => {
+  if (activeFilter.type === "MultiTreeSelect") {
+    const filter = availableFilters.find((filterConfig) => filterConfig.key === activeFilter.key);
+    acc.push(...getMultiTreeSelectChips(activeFilter, filter));
+    return acc;
+  }
+  activeFilter.selectedOptions.forEach((option) => {
+    acc.push({
+      key: activeFilter.key + KEY_VAL_SEPARATOR + String(option.value),
+      label: option.chipLabel || option.label
+    });
+  });
+  return acc;
+}, []);
+const Chips = (props) => {
+  const {
+    activeFilters,
+    onFilterItemSelect,
+    availableFilters
+  } = Filters_context.useFiltersContext();
+  const onRemoveItemCallback = (item) => {
+    const [key, value] = item.split(KEY_VAL_SEPARATOR);
+    const filter = availableFilters.find((filterConfig) => filterConfig.key === key);
+    const filterOption = filter == null ? void 0 : filter.options.find((option) => option.value === value);
+    if (filter && filterOption) {
+      onFilterItemSelect(filter, filterOption);
+    }
+  };
+  return !activeFilters.length ? null : jsxRuntime.jsxRuntimeExports.jsx(Chips_style.FiltersChipList, {
+    children: jsxRuntime.jsxRuntimeExports.jsx(ChipList.default, {
+      ...props,
+      onRemoveItem: onRemoveItemCallback,
+      chips: getChipsItemsFromFilters(activeFilters, availableFilters),
+      maxRows: 2
+    })
+  });
+};
+exports.default = Chips;

package/dist/Filters/components/Chips/Chips.d.ts

@@ -0,0 +1,3 @@
+import { ChipListProps } from '../../../ChipList';
+declare const _default: (props: Omit<ChipListProps, 'chips'>) => import("react/jsx-runtime").JSX.Element | null;
+export default _default;

package/dist/Filters/components/Chips/Chips.js

@@ -0,0 +1,57 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useFiltersContext } from "../../Filters.context.js";
+import { findFilterOptionById } from "../../Filters.utils.js";
+import { FiltersChipList } from "./Chips.style.js";
+import ChipList from "../../../ChipList/ChipList.js";
+const KEY_VAL_SEPARATOR = "__";
+function getMultiTreeSelectChips(activeFilter, filter) {
+  const acc = [];
+  activeFilter.selectedOptions.forEach((option) => {
+    var _a, _b, _c;
+    acc.push({
+      key: activeFilter.key + KEY_VAL_SEPARATOR + String(option.value),
+      label: `${option.chipLabel || option.label}: ${option.descendants && filter && option.descendants.length === ((_b = (_a = findFilterOptionById(filter, option.id)) == null ? void 0 : _a.descendants) == null ? void 0 : _b.length) && option.descendants.length > 1 ? "All Values" : (_c = option.descendants) == null ? void 0 : _c.map((descendant) => descendant.chipLabel || descendant.label).join(", ")}`
+    });
+  });
+  return acc;
+}
+const getChipsItemsFromFilters = (filters, availableFilters) => filters.reduce((acc, activeFilter) => {
+  if (activeFilter.type === "MultiTreeSelect") {
+    const filter = availableFilters.find((filterConfig) => filterConfig.key === activeFilter.key);
+    acc.push(...getMultiTreeSelectChips(activeFilter, filter));
+    return acc;
+  }
+  activeFilter.selectedOptions.forEach((option) => {
+    acc.push({
+      key: activeFilter.key + KEY_VAL_SEPARATOR + String(option.value),
+      label: option.chipLabel || option.label
+    });
+  });
+  return acc;
+}, []);
+const Chips = (props) => {
+  const {
+    activeFilters,
+    onFilterItemSelect,
+    availableFilters
+  } = useFiltersContext();
+  const onRemoveItemCallback = (item) => {
+    const [key, value] = item.split(KEY_VAL_SEPARATOR);
+    const filter = availableFilters.find((filterConfig) => filterConfig.key === key);
+    const filterOption = filter == null ? void 0 : filter.options.find((option) => option.value === value);
+    if (filter && filterOption) {
+      onFilterItemSelect(filter, filterOption);
+    }
+  };
+  return !activeFilters.length ? null : jsxRuntimeExports.jsx(FiltersChipList, {
+    children: jsxRuntimeExports.jsx(ChipList, {
+      ...props,
+      onRemoveItem: onRemoveItemCallback,
+      chips: getChipsItemsFromFilters(activeFilters, availableFilters),
+      maxRows: 2
+    })
+  });
+};
+export {
+  Chips as default
+};

package/dist/Filters/components/Chips/Chips.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const FiltersChipList = _styled__default.default.div.withConfig({
+  displayName: "Chipsstyle__FiltersChipList",
+  componentId: "RedisUI__sc-zx5n15-0"
+})(["padding:", ";height:auto;border-top:", ";"], () => redisUiStyles.useTheme().components.filters.chipList.padding, () => redisUiStyles.useTheme().components.filters.chipList.border);
+exports.FiltersChipList = FiltersChipList;

package/dist/Filters/components/Chips/Chips.style.d.ts

@@ -0,0 +1 @@
+export declare const FiltersChipList: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Filters/components/Chips/Chips.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const FiltersChipList = _styled.div.withConfig({
+  displayName: "Chipsstyle__FiltersChipList",
+  componentId: "RedisUI__sc-zx5n15-0"
+})(["padding:", ";height:auto;border-top:", ";"], () => useTheme().components.filters.chipList.padding, () => useTheme().components.filters.chipList.border);
+export {
+  FiltersChipList
+};

package/dist/Filters/components/Clear/Clear.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const Filters_context = require("../../Filters.context.cjs");
+const TextButton = require("../../../Button/TextButton/TextButton.cjs");
+const ClearButton = (props) => {
+  const {
+    onChange,
+    activeFilters
+  } = Filters_context.useFiltersContext();
+  return jsxRuntime.jsxRuntimeExports.jsxs(TextButton.default, {
+    disabled: activeFilters.length === 0,
+    onClick: () => onChange([]),
+    variant: "primary",
+    ...props,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.EraserIcon, {
+      customColor: "currentColor"
+    }), "Clear all"]
+  });
+};
+exports.default = ClearButton;

package/dist/Filters/components/Clear/Clear.d.ts

@@ -0,0 +1,3 @@
+import { TextButtonProps } from '../../../Button';
+declare const ClearButton: (props: TextButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ClearButton;

package/dist/Filters/components/Clear/Clear.js

@@ -0,0 +1,22 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { EraserIcon } from "@redislabsdev/redis-ui-icons";
+import { useFiltersContext } from "../../Filters.context.js";
+import TextButton from "../../../Button/TextButton/TextButton.js";
+const ClearButton = (props) => {
+  const {
+    onChange,
+    activeFilters
+  } = useFiltersContext();
+  return jsxRuntimeExports.jsxs(TextButton, {
+    disabled: activeFilters.length === 0,
+    onClick: () => onChange([]),
+    variant: "primary",
+    ...props,
+    children: [jsxRuntimeExports.jsx(EraserIcon, {
+      customColor: "currentColor"
+    }), "Clear all"]
+  });
+};
+export {
+  ClearButton as default
+};