@luscii-healthtech/web-ui 7.5.0 → 7.6.1

package/dist/components/FilterBar/ActiveFilters.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { CategorisedFilters, FilterBarLocalization, OnFilterBarFilterChange } from "./FilterBarProps.type";
+import { CategorizedFilters, FilterBarLocalization, OnFilterBarFilterChange } from "./FilterBarProps.type";
 type ActiveFiltersProps = {
-    filters: CategorisedFilters;
+    filters: CategorizedFilters;
     onRemoveActiveFilter: OnFilterBarFilterChange;
     localization: Pick<FilterBarLocalization, "filtersLabel">;
 };

package/dist/components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,96 @@
+import { ReactElement } from "react";
+import { CategorizedFilters, FilterBarLocalization, TransformedSortingOptions } from "./FilterBarProps.type";
+type FilterBarProps<SortableEntity extends object> = {
+    /**
+     * A list of grouped filters to be displayed in the FilterBar.
+     *
+     * This is an array with items shaped as:
+     * ```ts
+     * type CategorizedFilter = {
+     *    key: string;
+     *    label: string;
+     *    options: TransformedFilterOptions;
+     * }
+     * ```
+     *
+     * You can choose to manually create this option or use the `getFilterGroups` helper function that will do the same
+     * for you based on your data.
+     *
+     * @example
+     *
+     * If you decided to use the `getFilterGroups` function:
+     *
+     *
+     * ```ts
+     * const items = []; // any list of object you are working with
+     *
+     * // the list of filter generators, the `filterValuePredicate` will be the displayed
+     * // value in the filter dropdown, so you can map and transform it to any custom string if necessary, or use
+     * // the value from the object entry
+     *
+     * const filterGenerators: FilterGenerator<TShirtFromApi>[] = [
+     *   {
+     *     id: "brand",
+     *     label: "Brand",
+     *     filterValuePredicate: (tshirt) => tshirt.brand,
+     *   },
+     *   {
+     *     id: "size",
+     *     label: "Size",
+     *     filterValuePredicate: (tshirt) => tshirt.size,
+     *   },
+     *   {
+     *     id: "color",
+     *     label: "Color",
+     *     filterValuePredicate: (tshirt) => tshirt.color,
+     *   },
+     * ];
+     *
+     * const categorizedFilters = getFilterGroups(items, filterGenerators);
+     * ```
+     *
+     *
+     * A compliant entry in the `categorizedFilters` has a shape like the object below:
+     *
+     *
+     * ```json
+     * {
+     *  "key": "color",
+     *  "label": "Color",
+     *  "options": [
+     *     {
+     *         "isChecked": false,
+     *         "id": "yellow",
+     *         "label": "yellow",
+     *         "value": "yellow"
+     *     },
+     *     {
+     *         "isChecked": false,
+     *         "id": "red",
+     *         "label": "red",
+     *         "value": "red"
+     *     },
+     *     {
+     *         "isChecked": false,
+     *         "id": "green",
+     *         "label": "green",
+     *         "value": "green"
+     *     }
+     *   ]
+     * }
+     *```
+     */
+    categorizedFilters: CategorizedFilters;
+    /**
+     * For more details, see {@link TransformedSortingOptions}.
+     */
+    sortingOptions: TransformedSortingOptions<SortableEntity>;
+    onFilterChange: (updatedFilters: CategorizedFilters) => void;
+    onSortingChange: (updatedSortingOptions: TransformedSortingOptions<SortableEntity>) => void;
+    /**
+     * See {@link FilterBarLocalization}.
+     */
+    localization: FilterBarLocalization;
+};
+export declare const FilterBar: <SortableEntity extends object>({ localization, categorizedFilters, sortingOptions, ...props }: FilterBarProps<SortableEntity>) => ReactElement | null;
+export {};

package/dist/components/FilterBar/FilterBar.utils.d.ts

@@ -1,4 +1,4 @@
-import { CategorisedFilters, FilterGenerator, TransformedSortingOption } from "./FilterBarProps.type";
+import { CategorizedFilters, FilterGenerator, TransformedSortingOptions } from "./FilterBarProps.type";
 /**
  * Generates the list of filters based on the data (see this as what you'd like to be filtered in your component).
  *
@@ -6,7 +6,7 @@ import { CategorisedFilters, FilterGenerator, TransformedSortingOption } from ".
  * @param groupers a list of functions used to create the filters dropdown
  * @returns {CategorisedFilters} a list of filters properly grouped.
  */
-export declare function getFilterGroups<T extends unknown[]>(dataToGenerateFiltersFrom: T, groupers: FilterGenerator<T[number]>[]): CategorisedFilters;
+export declare function getFilterGroups<T extends unknown[]>(dataToGenerateFiltersFrom: T, groupers: FilterGenerator<T[number]>[]): CategorizedFilters;
 /**
  *
  * @param filterKey the key of the categorized filter (eg. color, size, brand) - which one of them are you gonna check.
@@ -20,7 +20,7 @@ export declare function getFilterGroups<T extends unknown[]>(dataToGenerateFilte
  *   const filteredBySize = items.filter(sizeFilterPredicate);
  *
  */
-export declare const createFilterPredicate: <T extends object>(filterKey: keyof T, categorizedFilters: CategorisedFilters, attributeGetter: (item: T) => string) => (item: T) => boolean;
+export declare const createFilterPredicate: <T extends object>(filterKey: string, categorizedFilters: CategorizedFilters, attributeGetter: (item: T) => string) => (item: T) => boolean;
 /**
  * Creates a sorting function to be used on a specific object attribute.
  *
@@ -29,4 +29,4 @@ export declare const createFilterPredicate: <T extends object>(filterKey: keyof
  * @returns the sorting comparer function to be used in Array.sort
  */
 export declare const createSortingComparer: <T extends object>(getter: (item: T) => string | number, order?: "asc" | "desc") => (itemA: T, itemB: T) => number;
-export declare const applySorting: <T extends object[]>(sortable: T, sortingOptions: TransformedSortingOption[]) => T;
+export declare const applySorting: <T extends object[]>(sortable: T, sortingOptions: TransformedSortingOptions<T[number]>) => T;

package/dist/components/FilterBar/FilterBarProps.type.d.ts

@@ -3,7 +3,7 @@
  * This is used based on the dataset passed to FilterBar, so we always calculate the filters
  * looking at the data.
  */
-export type FilterGenerator<T> = {
+export type FilterGenerator<SortableEntity> = {
     id: string;
     label: string;
     /**
@@ -13,7 +13,7 @@ export type FilterGenerator<T> = {
      *
      * @example
      *
-     * ```json
+     * ```ts
      * {
           id: "brand",
           label: "Brand",
@@ -22,7 +22,7 @@ export type FilterGenerator<T> = {
      * ```
      * in the above, all unique values from `brand` will be used to populate the `Brand` filter.
      */
-    filterValuePredicate: (data: T) => string;
+    filterValuePredicate: (data: SortableEntity) => string;
 };
 /**
  * Allows customization of labels related to filter.
@@ -65,30 +65,22 @@ export type TransformedFilterOption = {
     isChecked: boolean;
 };
 export type TransformedFilterOptions = TransformedFilterOption[];
-type CategorisedFilter = {
+type CategorizedFilter = {
     key: string;
     label: string;
     options: TransformedFilterOptions;
 };
-export type CategorisedFilters = CategorisedFilter[];
-export type TransformedSortingOption = {
+export type CategorizedFilters = CategorizedFilter[];
+export type TransformedSortingOption<SortableEntity extends object> = {
     id: string;
     label: string;
     value: string;
     isChecked: boolean;
-    sortingCompare: (itemA: any, itemB: any) => number;
+    sortingCompare: (itemA: SortableEntity, itemB: SortableEntity) => number;
 };
-export type TransformedSortingOptions = TransformedSortingOption[];
+export type TransformedSortingOptions<SortableEntity extends object> = TransformedSortingOption<SortableEntity>[];
 export type OnFilterBarFilterChange = (params: {
-    category: string;
     changedFilterOption: TransformedFilterOption;
 }) => void;
-export type OnFilterBarSortingChange = (changedSortingOption: TransformedSortingOption) => void;
-export type FilterBarProps = {
-    categorizedFilters: CategorisedFilters;
-    sortingOptions: TransformedSortingOptions;
-    onFilterChange: (updatedFilters: CategorisedFilters) => void;
-    onSortingChange: (updatedSortingOptions: TransformedSortingOptions) => void;
-    localization: FilterBarLocalization;
-};
+export type OnFilterBarSortingChange<SortableEntity extends object> = (changedSortingOption: TransformedSortingOption<SortableEntity>) => void;
 export {};

package/dist/components/FilterBar/FiltersMenus.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import { CategorisedFilters, OnFilterBarFilterChange } from "./FilterBarProps.type";
+import { CategorizedFilters, OnFilterBarFilterChange } from "./FilterBarProps.type";
 type FiltersMenusProps = {
-    filters: CategorisedFilters;
+    filters: CategorizedFilters;
     onFilterOptionChange: OnFilterBarFilterChange;
 };
 export declare const FiltersMenus: React.FC<FiltersMenusProps>;

package/dist/components/FilterBar/SortMenu.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
+import { ReactElement } from "react";
 import { FilterBarLocalization, OnFilterBarSortingChange, TransformedSortingOption } from "./FilterBarProps.type";
-type SortMenuProps = {
+type SortMenuProps<SortableEntity extends object> = {
     localization: FilterBarLocalization;
-    sortingOptions: TransformedSortingOption[];
-    onSortOptionChange: OnFilterBarSortingChange;
+    sortingOptions: TransformedSortingOption<SortableEntity>[];
+    onSortOptionChange: OnFilterBarSortingChange<SortableEntity>;
 };
-export declare const SortMenu: React.FC<SortMenuProps>;
+export declare const SortMenu: <SortableEntity extends object>(props: SortMenuProps<SortableEntity>) => ReactElement | null;
 export {};

package/dist/components/FilterBar/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterBar } from "./FilterBar";
+export * as FilterBarUtils from "./FilterBar.utils";

package/dist/index.d.ts

@@ -78,4 +78,5 @@ export { Divider } from "./components/Divider/Divider";
 export { FullPageModal } from "./components/Modal/FullPageModal";
 export { Card, type CardProps } from "./components/Card/Card";
 export { Dropzone, DropzoneProps } from "./components/Dropzone";
+export { FilterBar, FilterBarUtils } from "./components/FilterBar";
 export { default as DragHandle, DragHandleProps, } from "./components/DragHandle";

package/dist/index.development.js

@@ -28,6 +28,8 @@ var htmlToDraft = require('html-to-draftjs');
 require('react-draft-wysiwyg/dist/react-draft-wysiwyg.css');
 var pick = require('lodash/pick');
 var index_ie11 = require('react-hook-form/dist/index.ie11');
+var react = require('@headlessui/react');
+var solid = require('@heroicons/react/20/solid');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -5254,6 +5256,237 @@ const Card = ({ title, children, dataTestId }) => {
   );
 };
 
+const CloseIcon = () => React__namespace.default.createElement(
+  "svg",
+  { className: "ui-h-2 ui-w-2", stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" },
+  React__namespace.default.createElement("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" })
+);
+const ActiveFilters = (props) => {
+  const { onRemoveActiveFilter, filters, localization } = props;
+  const activeFilters = filters.flatMap((categorizedFilter) => {
+    return categorizedFilter.options.map((categorizedFilterOption) => {
+      return categorizedFilterOption;
+    });
+  }).filter((activeFilter) => activeFilter.isChecked);
+  return React__namespace.default.createElement(
+    "div",
+    { className: "ui-bg-gray-100" },
+    React__namespace.default.createElement(
+      "div",
+      { className: "ui-min-h-15 ui-max-w-7xl ui-px-4 ui-py-3 sm:ui-flex sm:ui-items-center sm:ui-px-6" },
+      React__namespace.default.createElement("h3", { className: "ui-text-sm ui-font-medium ui-text-gray-500" }, localization.filtersLabel),
+      React__namespace.default.createElement("div", { "aria-hidden": "true", className: "ui-hidden ui-h-5 ui-w-px ui-bg-gray-300 sm:ui-ml-4 sm:ui-block" }),
+      React__namespace.default.createElement(
+        "div",
+        { className: "ui-mt-2 sm:ui-ml-4 sm:ui-mt-0" },
+        React__namespace.default.createElement("div", { className: "-ui-m-1 ui-flex ui-flex-wrap ui-items-center" }, activeFilters.map((activeFilter) => React__namespace.default.createElement(
+          "span",
+          { key: activeFilter.value, className: "pr-2 ui-m-1 ui-inline-flex ui-items-center ui-rounded-full ui-border ui-border-gray-200 ui-bg-white ui-py-1.5 ui-pl-3 ui-text-sm ui-font-medium ui-text-gray-900" },
+          React__namespace.default.createElement("span", null, activeFilter.label),
+          React__namespace.default.createElement(
+            "button",
+            { type: "button", className: "ui-mx-1 ui-inline-flex ui-h-4 ui-w-4 ui-flex-shrink-0 ui-rounded-full ui-p-1 ui-text-gray-400 hover:ui-bg-gray-200 hover:ui-text-gray-500", onClick: () => onRemoveActiveFilter({
+              changedFilterOption: {
+                isChecked: false,
+                id: activeFilter.id,
+                label: activeFilter.label,
+                value: activeFilter.value
+              }
+            }) },
+            React__namespace.default.createElement(CloseIcon, null)
+          )
+        )))
+      )
+    )
+  );
+};
+
+const SortMenu = (props) => {
+  const { localization, sortingOptions, onSortOptionChange } = props;
+  const selectedSorting = sortingOptions.find((sortingOption) => sortingOption.isChecked);
+  const menuLabel = selectedSorting ? `${localization.sortedByLabel} ${selectedSorting.label}` : localization.sortLabel;
+  return React__namespace.default.createElement(
+    react.Menu,
+    { as: "div", className: "ui-relative ui-inline-block ui-text-left" },
+    React__namespace.default.createElement(
+      "div",
+      null,
+      React__namespace.default.createElement(
+        react.Menu.Button,
+        { className: "ui-group ui-inline-flex ui-justify-center ui-text-sm ui-font-medium ui-text-slate-700 hover:ui-text-slate-900" },
+        menuLabel,
+        React__namespace.default.createElement(solid.ChevronDownIcon, { className: "ui-group-hover:ui-text-slate-500 -ui-mr-1 ui-ml-1 ui-h-5 ui-w-5 ui-flex-shrink-0 ui-text-slate-400", "aria-hidden": "true" })
+      )
+    ),
+    React__namespace.default.createElement(
+      react.Transition,
+      { as: React.Fragment, enter: "ui-transition ui-ease-out ui-duration-100", enterFrom: "ui-transform ui-opacity-0 ui-scale-95", enterTo: "ui-transform ui-opacity-100 ui-scale-100", leave: "ui-transition ui-ease-in ui-duration-75", leaveFrom: "ui-transform ui-opacity-100 ui-scale-100", leaveTo: "ui-transform ui-opacity-0 ui-scale-95" },
+      React__namespace.default.createElement(
+        react.Menu.Items,
+        { className: "ui-absolute ui-left-0 ui-z-10 ui-mt-2 ui-w-40 ui-origin-top-left ui-rounded-md ui-bg-white ui-shadow-2xl ui-ring-1 ui-ring-black ui-ring-opacity-5 focus:ui-outline-none" },
+        React__namespace.default.createElement("div", { className: "ui-py-1" }, sortingOptions.map((option) => React__namespace.default.createElement(react.Menu.Item, { key: option.id }, ({ active }) => React__namespace.default.createElement("span", { onClick: () => onSortOptionChange(Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })), role: "button", className: classNames__default.default(option.isChecked ? "ui-font-medium ui-text-slate-900" : "ui-text-slate-500", "ui-block ui-px-4 ui-py-2 ui-text-sm", "ui-cursor-pointer", { "ui-bg-slate-100": active }) }, option.label))))
+      )
+    )
+  );
+};
+
+const FiltersMenus = (props) => {
+  const { filters } = props;
+  return React__namespace.default.createElement(
+    "div",
+    { className: "ui-hidden sm:ui-block" },
+    React__namespace.default.createElement(
+      "div",
+      { className: "ui-flow-root" },
+      React__namespace.default.createElement(react.Popover.Group, { className: "-ui-mx-4 ui-flex ui-items-center ui-divide-x ui-divide-slate-200" }, filters.map((categorizedFilter) => {
+        const amountOfCheckedItems = categorizedFilter.options.filter((option) => option.isChecked).length;
+        return React__namespace.default.createElement(
+          react.Popover,
+          { key: categorizedFilter.key, className: "ui-relative ui-inline-block ui-px-4 ui-text-left" },
+          React__namespace.default.createElement(
+            react.Popover.Button,
+            { className: "ui-group ui-inline-flex ui-justify-center ui-text-sm ui-font-medium ui-text-slate-700 hover:ui-text-slate-900" },
+            React__namespace.default.createElement("span", null, categorizedFilter.label),
+            amountOfCheckedItems > 0 ? React__namespace.default.createElement("span", { className: "ui-ml-1.5 ui-rounded ui-bg-slate-200 ui-px-1.5 ui-py-0.5 ui-text-xs ui-font-semibold ui-tabular-nums ui-text-slate-700" }, amountOfCheckedItems) : null,
+            React__namespace.default.createElement(solid.ChevronDownIcon, { className: "ui-group-hover:ui-text-slate-500 -ui-mr-1 ui-ml-1 ui-h-5 ui-w-5 ui-flex-shrink-0 ui-text-slate-400", "aria-hidden": "true" })
+          ),
+          React__namespace.default.createElement(
+            react.Transition,
+            { as: React.Fragment, enter: "ui-transition ui-ease-out ui-duration-100", enterFrom: "ui-transform ui-opacity-0 ui-scale-95", enterTo: "ui-transform ui-opacity-100 ui-scale-100", leave: "ui-transition ui-ease-in ui-duration-75", leaveFrom: "ui-transform ui-opacity-100 ui-scale-100", leaveTo: "ui-transform ui-opacity-0 ui-scale-95" },
+            React__namespace.default.createElement(
+              react.Popover.Panel,
+              { className: "ui-absolute ui-right-0 ui-z-10 ui-mt-2 ui-origin-top-right ui-rounded-md ui-bg-white ui-p-4 ui-shadow-2xl ui-ring-1 ui-ring-black ui-ring-opacity-5 focus:ui-outline-none" },
+              React__namespace.default.createElement("form", { className: "ui-space-y-4" }, categorizedFilter.options.map((option) => React__namespace.default.createElement(
+                "label",
+                { key: `${option.id}`, className: "ui-flex ui-items-center", htmlFor: `filter-${option.id}` },
+                React__namespace.default.createElement("input", { id: `filter-${option.id}`, name: `${option.value}`, defaultValue: option.value, type: "checkbox", defaultChecked: option.isChecked, onChange: () => {
+                  props.onFilterOptionChange({
+                    changedFilterOption: Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })
+                  });
+                }, className: "ui-form-checkbox ui-h-4 ui-w-4 ui-rounded ui-border-slate-300 ui-text-blue-800 focus:ui-ring-blue-800" }),
+                React__namespace.default.createElement("span", { className: "ui-ml-3 ui-whitespace-nowrap ui-pr-6 ui-text-sm ui-font-medium ui-capitalize ui-text-slate-900" }, option.label)
+              )))
+            )
+          )
+        );
+      }))
+    )
+  );
+};
+
+const FilterBar = (_a) => {
+  var { localization, categorizedFilters, sortingOptions } = _a, props = __rest(_a, ["localization", "categorizedFilters", "sortingOptions"]);
+  const onSortOptionChange = (changedSortingOption) => {
+    const updatedSortingOptions = sortingOptions.map((previousSortingOption) => {
+      if (previousSortingOption.id === changedSortingOption.id) {
+        return Object.assign({}, changedSortingOption);
+      }
+      return Object.assign(Object.assign({}, previousSortingOption), { isChecked: false });
+    });
+    props.onSortingChange(updatedSortingOptions);
+  };
+  const onFilterOptionChange = ({ changedFilterOption }) => {
+    const updatedFilters = categorizedFilters.map((categorizedFilter) => {
+      return Object.assign(Object.assign({}, categorizedFilter), { options: categorizedFilter.options.map((categorizedFilterOption) => {
+        if (categorizedFilterOption.id === changedFilterOption.id) {
+          return changedFilterOption;
+        }
+        return categorizedFilterOption;
+      }) });
+    });
+    props.onFilterChange(updatedFilters);
+  };
+  return React__namespace.default.createElement(
+    "div",
+    null,
+    React__namespace.default.createElement(
+      "section",
+      { "aria-labelledby": "filter-heading" },
+      React__namespace.default.createElement(
+        "div",
+        { className: "ui-rounded-lg ui-bg-white ui-py-4" },
+        React__namespace.default.createElement(
+          "div",
+          { className: "ui-flex ui-items-center ui-justify-between ui-px-4 sm:ui-px-6" },
+          React__namespace.default.createElement(SortMenu, { localization, sortingOptions, onSortOptionChange }),
+          React__namespace.default.createElement(FiltersMenus, { filters: categorizedFilters, onFilterOptionChange })
+        )
+      ),
+      React__namespace.default.createElement(ActiveFilters, { localization, filters: categorizedFilters, onRemoveActiveFilter: onFilterOptionChange })
+    )
+  );
+};
+
+function getFilterGroups(dataToGenerateFiltersFrom, groupers) {
+  const res = [];
+  for (const group of groupers) {
+    const { id, label, filterValuePredicate } = group;
+    const uniqueValues = Array.from(new Set(dataToGenerateFiltersFrom.map(filterValuePredicate)));
+    const options = uniqueValues.map((uniqueValue) => ({
+      isChecked: false,
+      id: uniqueValue,
+      label: uniqueValue,
+      value: uniqueValue
+    }));
+    res.push({ key: id, label, options });
+  }
+  return res;
+}
+const createFilterGroupedValues = (filterKey, categorizedFilters) => {
+  const filterForKey = categorizedFilters.find((option) => option.key === filterKey);
+  if (!filterForKey) {
+    throw new ReferenceError(`No filter has been found for key: [${String(filterKey)}]`, {
+      cause: {
+        message: "You have tried to retrieve a filter with a key that does not exist in the categorized filters.",
+        existingKeys: categorizedFilters.map((categorizedFilter) => categorizedFilter.key).join(", ")
+      }
+    });
+  }
+  const selectedOptions = filterForKey.options.filter((option) => option.isChecked).map((option) => option.value);
+  return selectedOptions;
+};
+const createFilterPredicate = (filterKey, categorizedFilters, attributeGetter) => {
+  const selectedFilters = createFilterGroupedValues(filterKey, categorizedFilters);
+  if (selectedFilters.length === 0) {
+    return () => true;
+  }
+  return (item) => {
+    const valueToBeCheckedInFilter = attributeGetter(item);
+    return selectedFilters.includes(valueToBeCheckedInFilter);
+  };
+};
+const createSortingComparer = (getter, order = "asc") => {
+  return (a, b) => {
+    const attributeToSortFromA = getter(a);
+    const attributeToSortFromB = getter(b);
+    const orderEnforcer = order === "asc" ? 1 : -1;
+    if (attributeToSortFromA > attributeToSortFromB) {
+      return 1 * orderEnforcer;
+    }
+    if (attributeToSortFromA < attributeToSortFromB) {
+      return -1 * orderEnforcer;
+    }
+    return 0;
+  };
+};
+const applySorting = (sortable, sortingOptions) => {
+  const selectedSorting = sortingOptions.find((sortingOption) => sortingOption.isChecked);
+  if (selectedSorting) {
+    const arrayCopy = [...sortable];
+    arrayCopy.sort(selectedSorting.sortingCompare);
+    return arrayCopy;
+  }
+  return sortable;
+};
+
+var FilterBar_utils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    applySorting: applySorting,
+    createFilterPredicate: createFilterPredicate,
+    createSortingComparer: createSortingComparer,
+    getFilterGroups: getFilterGroups
+});
+
 exports.AccordionList = AccordionList;
 exports.AddIcon = AddIcon;
 exports.AlertsIcon = AlertsIcon;
@@ -5293,6 +5526,8 @@ exports.EmptyStateDashboardIcon = EmptyStateDashboardIcon;
 exports.ErrorBlock = ErrorBlock;
 exports.ExclamationMarkIcon = ExclamationMarkIcon;
 exports.EyeIcon = EyeIcon;
+exports.FilterBar = FilterBar;
+exports.FilterBarUtils = FilterBar_utils;
 exports.FlexColumn = FlexColumn;
 exports.FlexRow = FlexRow;
 exports.Form = Form;