@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/filter-toolbar/FilterToolbar.js

@@ -0,0 +1,173 @@
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import { forwardRef as B, useState as G, useMemo as f } from "react";
+import { uyTv as H } from "@payfit/unity-themes";
+import { Group as W } from "react-aria-components/Group";
+import { Toolbar as Y } from "react-aria-components/Toolbar";
+import { useId as k } from "react-aria/useId";
+import { useIntl as q, FormattedMessage as z } from "react-intl";
+import { Button as J } from "../button/Button.js";
+import { Filter as K } from "../filter/Filter.js";
+import { useFilterToolbarState as Q } from "./hooks/use-filter-toolbar-state.js";
+import { AddFilter as U } from "./parts/AddFilter.js";
+const X = H({
+  slots: {
+    base: ["uy:flex uy:gap-100 uy:flex-wrap uy:items-center"],
+    filters: ["uy:list-none uy:contents"],
+    actions: ["uy:contents"]
+  }
+}), Z = B(
+  ({
+    filterDefs: a,
+    initialValue: F,
+    onChange: y,
+    onClearFiltersPress: g,
+    onAddFilterPress: h,
+    ...C
+  }, L) => {
+    const i = q(), s = k(), [M, c] = G(
+      /* @__PURE__ */ new Set()
+    ), {
+      appliedFilters: m,
+      availableFilterDefs: v,
+      filterValues: A,
+      status: u,
+      addFilter: S,
+      clearFilters: T,
+      removeFilter: w,
+      setFilterValue: n
+    } = Q({
+      filterDefs: a,
+      initialValue: F,
+      onChange: y
+    }), x = f(
+      () => new Map(a.map((t) => [t.id, t])),
+      [a]
+    ), D = (t) => {
+      if (t === "all") return;
+      const l = Array.from(t).map(String);
+      S(l), c((e) => /* @__PURE__ */ new Set([...e, ...l])), h?.(l);
+    }, I = () => {
+      T(), g?.();
+    }, _ = (t, l) => {
+      n(t, l);
+    }, N = (t) => {
+      w(t);
+    }, P = (t) => {
+      c((l) => {
+        const e = new Set(l);
+        return e.delete(t), e;
+      });
+    }, E = u === "WITH_ALL_FILTERS_APPLIED", O = u !== "EMPTY", { base: V, filters: $, actions: j } = X(), d = f(() => ({
+      toolbar: i.formatMessage({
+        id: "unity:component:filter-toolbar:label",
+        defaultMessage: "Filter toolbar"
+      }),
+      filterList: i.formatMessage({
+        id: "unity:component:filter-toolbar:filter-list:label",
+        defaultMessage: "Applied filters"
+      }),
+      filterControls: i.formatMessage({
+        id: "unity:component:filter-toolbar:filter-controls:label",
+        defaultMessage: "Filter control"
+      })
+    }), [i]), o = f(() => ({
+      filterList: `filter-toolbar-${s}__filter-list`,
+      filterControls: `filter-toolbar-${s}__filter-controls`
+    }), [s]);
+    return /* @__PURE__ */ b(
+      Y,
+      {
+        ref: L,
+        className: V(),
+        "aria-label": d.toolbar,
+        ...C,
+        children: [
+          m.length > 0 && /* @__PURE__ */ r(
+            "ul",
+            {
+              className: $(),
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              "aria-relevant": "additions removals",
+              "aria-label": d.filterList,
+              id: o.filterList,
+              children: m.map((t, l) => {
+                const e = x.get(t);
+                if (!e) return null;
+                const p = A.get(t);
+                return /* @__PURE__ */ r("li", { role: "presentation", children: /* @__PURE__ */ r(
+                  K,
+                  {
+                    id: e.id,
+                    label: e.label,
+                    value: p,
+                    onChange: (R) => {
+                      _(e.id, R);
+                    },
+                    renderControl: e.renderControl,
+                    renderLabel: e.renderLabel,
+                    isDismissable: !0,
+                    isDefaultOpen: M.has(t),
+                    onFilterOpen: () => {
+                      P(e.id);
+                    },
+                    onDismiss: () => {
+                      N(e.id);
+                    },
+                    onClearSelection: () => {
+                      n(e.id, void 0);
+                    },
+                    onConfirmSelection: () => {
+                      n(e.id, p);
+                    },
+                    ...e.filterProps
+                  }
+                ) }, `filter-item-${l}`);
+              })
+            }
+          ),
+          /* @__PURE__ */ b(
+            W,
+            {
+              className: j(),
+              "aria-label": d.filterControls,
+              id: o.filterControls,
+              children: [
+                /* @__PURE__ */ r(
+                  U,
+                  {
+                    availableFilterDefs: [...v],
+                    isDisabled: E,
+                    onSelectionChange: D,
+                    "aria-controls": o.filterControls
+                  }
+                ),
+                O && /* @__PURE__ */ r(
+                  J,
+                  {
+                    variant: "ghost",
+                    color: "neutral",
+                    onPress: I,
+                    "aria-controls": o.filterList,
+                    children: /* @__PURE__ */ r(
+                      z,
+                      {
+                        id: "unity:component:filter-toolbar:clear-filters:label",
+                        defaultMessage: "Clear filters"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "FilterToolbar";
+export {
+  Z as FilterToolbar,
+  X as filterToolbar
+};

package/dist/esm/components/filter-toolbar/FilterToolbar.types.d.ts

@@ -0,0 +1,119 @@
+import { FilterDisplayProps, FilterEventProps, FilterProps } from '../filter/Filter.types.js';
+import { AppliedFilter, SerializableAppliedFilter } from './hooks/use-filter-toolbar-state.js';
+export type { AppliedFilter, SerializableAppliedFilter };
+/**
+ * Defines the configuration for an individual filter within the FilterToolbar.
+ * Each FilterDef specifies how a filter should render its control UI, display selected values,
+ * and handle user interactions.
+ * @template TDataType - The type of data this filter works with (e.g., string, number, string[], etc.)
+ * @example
+ * ```tsx
+ * const statusFilterDef: FilterDef<string> = {
+ *   id: 'status',
+ *   label: 'Employee Status',
+ *   renderControl: (value, onChange) => (
+ *     <Select value={value} onChange={onChange}>
+ *       <Option value="active">Active</Option>
+ *       <Option value="inactive">Inactive</Option>
+ *     </Select>
+ *   ),
+ *   renderLabel: (value) => value,
+ *   filterProps: {
+ *     prefixIcon: 'filter',
+ *     maxVisibleValues: 2
+ *   }
+ * }
+ * ```
+ */
+export interface FilterDef<TDataType = unknown> {
+    /**
+     * Unique identifier for the filter. Used to track filter state and must be unique across all filters in the toolbar.
+     */
+    id: string;
+    /**
+     * Display label shown on the filter button.
+     */
+    label: string;
+    /**
+     * Render function that provides the control UI for selecting filter values.
+     * Receives the current value and an onChange callback to update the value.
+     * @param value - The current filter value
+     * @param onChange - Callback to update the filter value
+     * @returns ReactNode representing the filter control (e.g., Select, Checkbox group, DatePicker)
+     */
+    renderControl: FilterProps<TDataType>['renderControl'];
+    /**
+     * render function to customize how selected values are displayed in the filter button.
+     * If not provided, values are rendered as strings or comma-separated lists for arrays.
+     * @param value - The current filter value
+     * @returns ReactNode representing the formatted value display
+     */
+    renderLabel?: FilterProps<TDataType>['renderLabel'];
+    /**
+     * Optional additional props to customize the filter button appearance and behavior.
+     * Accepts a subset of Filter component props including display and event handler props.
+     */
+    filterProps?: Partial<FilterDisplayProps & FilterEventProps>;
+    /**
+     * Index signature allowing additional custom properties for extended filter definitions.
+     */
+    [key: string]: unknown;
+}
+/**
+ * Props for the FilterToolbar component.
+ * @example
+ * ```tsx
+ * const filterToolbarProps: FilterToolbarProps = {
+ *   filterDefs: [
+ *     { id: 'status', label: 'Status', renderControl: (v, onChange) => <Select value={v} onChange={onChange} /> }
+ *   ],
+ *   initialValue: [{ id: 'status', value: 'active' }],
+ *   onChange: (filters) => console.log('Filters changed:', filters),
+ *   onClearFiltersPress: () => console.log('Filters cleared'),
+ *   onAddFilterPress: (filterIds) => console.log('Filters added:', filterIds)
+ * }
+ * ```
+ */
+export type FilterToolbarProps = {
+    /**
+     * Array of filter definitions that configure the available filters in the toolbar.
+     * Each definition specifies the filter's UI, behavior, and data type.
+     */
+    filterDefs: FilterDef[];
+    /**
+     * Optional array of filters to prepopulate the toolbar on initial render.
+     * Use this to restore previously applied filters or set default filters.
+     * @default undefined
+     */
+    initialValue?: AppliedFilter[];
+    /**
+     * Callback invoked whenever the filter state changes (filters added, removed, or values modified).
+     * Receives an array of serializable filter objects containing filter IDs and their current values.
+     * @param filters - Array of currently applied filters with their values
+     * @default undefined
+     */
+    onChange?: (filters: SerializableAppliedFilter[]) => void;
+    /**
+     * Callback invoked when the user presses the "Clear filters" button.
+     * Use this to perform additional cleanup or analytics tracking.
+     * @default undefined
+     */
+    onClearFiltersPress?: () => void;
+    /**
+     * Callback invoked when the user adds one or more filters using the "Add filter" button.
+     * Receives the ID(s) of the newly added filter(s).
+     * @param filterId - Single filter ID or array of filter IDs that were added
+     * @default undefined
+     */
+    onAddFilterPress?: (filterId: string | string[]) => void;
+    /**
+     * Custom label for the "Add filter" button.
+     * @default "Add filter" (internationalized)
+     */
+    addFilterLabel?: string;
+    /**
+     * Custom label for the "Clear filters" button.
+     * @default "Clear filters" (internationalized)
+     */
+    clearAllLabel?: string;
+};

package/dist/esm/components/filter-toolbar/hooks/use-filter-toolbar-state.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Represents a filter that has been added to the toolbar with an optional value.
+ * Used internally to track applied filters and their current state.
+ * @internal
+ */
+export type AppliedFilter = {
+    /** Unique identifier matching a filter definition ID */
+    id: string;
+    /** Optional value for the filter, can be any type supported by the filter's control */
+    value?: unknown;
+};
+/**
+ * Serializable representation of an applied filter suitable for URL parameters or JSON storage.
+ * Filter values are normalized to strings or string arrays for consistent serialization.
+ * @internal
+ */
+export type SerializableAppliedFilter = {
+    /** Unique identifier matching a filter definition ID */
+    id: string;
+    /** Normalized filter value as string or string array */
+    value?: string | string[];
+};
+/**
+ * Minimal filter definition interface required for state management.
+ * Extends this interface to add additional properties specific to your filter implementation.
+ * @internal
+ */
+export type FilterDefBase = {
+    /** Unique identifier for the filter */
+    id: string;
+    /** Index signature allowing additional custom properties */
+    [key: string]: unknown;
+};
+/**
+ * Configuration parameters for the useFilterToolbarState hook.
+ * @template T - Filter definition type extending FilterDefBase
+ * @internal
+ */
+export type UseFilterToolbarStateParams<T extends FilterDefBase = FilterDefBase> = {
+    /** Array of available filter definitions */
+    filterDefs: T[];
+    /** Optional initial filters to prepopulate the toolbar */
+    initialValue?: AppliedFilter[];
+    /** Callback invoked when filter state changes */
+    onChange?: (appliedFilters: SerializableAppliedFilter[]) => void;
+};
+type FilterToolbarStatus = 'EMPTY' | 'WITH_SOME_FILTERS_APPLIED' | 'WITH_ALL_FILTERS_APPLIED';
+/**
+ * Return value from the useFilterToolbarState hook providing state and actions.
+ * @template T - Filter definition type extending FilterDefBase
+ * @internal
+ */
+export type UseFilterToolbarStateReturn<T extends FilterDefBase = FilterDefBase> = {
+    /** Current status of the toolbar */
+    status: FilterToolbarStatus;
+    /** Array of currently applied filter IDs in order */
+    appliedFilters: readonly string[];
+    /** Array of filter IDs that haven't been applied yet */
+    remainingFilters: readonly string[];
+    /** Filter definitions for filters that haven't been applied */
+    availableFilterDefs: T[];
+    /** Map of filter IDs to their current values */
+    filterValues: ReadonlyMap<string, unknown>;
+    /** Add one or more filters to the toolbar */
+    addFilter: (filterId: string | string[]) => void;
+    /** Remove one or more filters from the toolbar */
+    removeFilter: (filterId: string | string[]) => void;
+    /** Clear all applied filters */
+    clearFilters: () => void;
+    /** Set the value for a specific filter */
+    setFilterValue: (filterId: string, value: unknown) => void;
+};
+/**
+ * Manages the state for a filter toolbar, handling filter application, removal, and value updates.
+ * This hook provides a complete state management solution for dynamic filter toolbars where users can
+ * add and remove filters on demand. It maintains an internal reducer for efficient state updates and
+ * provides serializable filter values through callbacks.
+ * @template T - Filter definition type extending FilterDefBase
+ * @param params - Configuration including filter definitions, initial values, and change callback
+ * @returns State and action handlers for the filter toolbar
+ * @example
+ * ```tsx
+ * const { appliedFilters, addFilter, setFilterValue } = useFilterToolbarState({
+ *   filterDefs: [
+ *     { id: 'status', label: 'Status' },
+ *     { id: 'department', label: 'Department' }
+ *   ],
+ *   onChange: (filters) => {
+ *     console.log('Filters changed:', filters)
+ *   }
+ * })
+ * ```
+ * @internal
+ */
+export declare function useFilterToolbarState<T extends FilterDefBase = FilterDefBase>(params: UseFilterToolbarStateParams<T>): UseFilterToolbarStateReturn<T>;
+export {};

package/dist/esm/components/filter-toolbar/hooks/use-filter-toolbar-state.js

@@ -0,0 +1,132 @@
+import { useMemo as u, useReducer as g, useCallback as c } from "react";
+import { normalizeFilterValue as M } from "../utils/normalize-filter-value.js";
+function v(E) {
+  return (r, d) => {
+    switch (d.type) {
+      case "ADD_FILTERS": {
+        const t = new Set(r.appliedFilters);
+        let s = !1;
+        for (const a of d.payload)
+          E.has(a) && !t.has(a) && (t.add(a), s = !0);
+        return s ? { appliedFilters: t, filterValues: r.filterValues } : r;
+      }
+      case "REMOVE_FILTERS": {
+        const t = new Set(r.appliedFilters), s = new Map(r.filterValues);
+        let a = !1;
+        for (const F of d.payload)
+          t.delete(F) && (s.delete(F), a = !0);
+        return a ? { appliedFilters: t, filterValues: s } : r;
+      }
+      case "CLEAR_FILTERS":
+        return { appliedFilters: /* @__PURE__ */ new Set(), filterValues: /* @__PURE__ */ new Map() };
+      case "SET_FILTER_VALUE": {
+        const { filterId: t, value: s } = d.payload;
+        if (!r.appliedFilters.has(t))
+          return r;
+        const a = new Map(r.filterValues);
+        if (s == null) {
+          if (!a.has(t))
+            return r;
+          a.delete(t);
+        } else {
+          if (a.get(t) === s)
+            return r;
+          a.set(t, s);
+        }
+        return {
+          appliedFilters: r.appliedFilters,
+          filterValues: a
+        };
+      }
+      default:
+        return r;
+    }
+  };
+}
+function D(E) {
+  const { filterDefs: r, initialValue: d, onChange: t } = E, s = u(
+    () => new Set(r.map((e) => e.id)),
+    [r]
+  ), a = u(() => {
+    const e = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Map();
+    if (d)
+      for (const n of d) {
+        const o = n.id, p = n.value;
+        s.has(o) && (e.add(o), p != null && i.set(o, p));
+      }
+    return { appliedFilters: e, filterValues: i };
+  }, [d, s]), F = u(() => v(s), [s]), [l, V] = g(F, a), S = u(
+    () => Array.from(l.appliedFilters),
+    [l.appliedFilters]
+  ), y = u(() => Array.from(s).filter(
+    (e) => !l.appliedFilters.has(e)
+  ), [s, l.appliedFilters]), L = u(() => {
+    const e = [];
+    for (const i of r)
+      l.appliedFilters.has(i.id) || e.push(i);
+    return e;
+  }, [r, l.appliedFilters]), R = u(() => {
+    const e = l.appliedFilters.size, i = s.size;
+    return e === 0 ? "EMPTY" : i > 0 && e === i ? "WITH_ALL_FILTERS_APPLIED" : "WITH_SOME_FILTERS_APPLIED";
+  }, [l.appliedFilters.size, s.size]), f = c(
+    (e, i) => Array.from(e).map((n) => ({
+      id: n,
+      value: M(i.get(n))
+    })),
+    []
+  ), T = c(
+    (e) => {
+      const i = Array.isArray(e) ? e : [e], n = new Set(l.appliedFilters);
+      let o = !1;
+      for (const p of i)
+        s.has(p) && !n.has(p) && (n.add(p), o = !0);
+      o && (V({ type: "ADD_FILTERS", payload: i }), t && t(f(n, l.filterValues)));
+    },
+    [
+      t,
+      l.appliedFilters,
+      l.filterValues,
+      s,
+      f
+    ]
+  ), m = c(
+    (e) => {
+      const i = Array.isArray(e) ? e : [e], n = new Set(l.appliedFilters);
+      let o = !1;
+      for (const p of i)
+        n.delete(p) && (o = !0);
+      if (o && (V({ type: "REMOVE_FILTERS", payload: i }), t)) {
+        const p = new Map(l.filterValues);
+        for (const A of i)
+          p.delete(A);
+        t(f(n, p));
+      }
+    },
+    [t, l.appliedFilters, l.filterValues, f]
+  ), w = c(() => {
+    l.appliedFilters.size > 0 && (V({ type: "CLEAR_FILTERS" }), t && t([]));
+  }, [t, l.appliedFilters.size]), _ = c(
+    (e, i) => {
+      const n = l.filterValues.get(e), o = i == null, p = l.filterValues.has(e);
+      if (l.appliedFilters.has(e) && (o ? p : n !== i) && (V({ type: "SET_FILTER_VALUE", payload: { filterId: e, value: i } }), t)) {
+        const h = new Map(l.filterValues);
+        o ? h.delete(e) : h.set(e, i), t(f(l.appliedFilters, h));
+      }
+    },
+    [t, l.appliedFilters, l.filterValues, f]
+  );
+  return {
+    status: R,
+    appliedFilters: S,
+    remainingFilters: y,
+    availableFilterDefs: L,
+    filterValues: l.filterValues,
+    addFilter: T,
+    removeFilter: m,
+    clearFilters: w,
+    setFilterValue: _
+  };
+}
+export {
+  D as useFilterToolbarState
+};

package/dist/esm/components/filter-toolbar/parts/AddFilter.d.ts

@@ -0,0 +1,63 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { Selection } from 'react-aria-components/GridList';
+import { FilterDef } from '../FilterToolbar.types.js';
+export interface AddFilterProps extends VariantProps<typeof addFilter> {
+    /** Available filter definitions that can be added */
+    availableFilterDefs: FilterDef[];
+    /** Callback invoked when user selects filters to add */
+    onSelectionChange?: (selection: Selection) => void;
+    /** Whether the add filter button is disabled */
+    isDisabled?: boolean;
+}
+declare const addFilter: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
+            listbox?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
+            listbox?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    icon: string[];
+    listbox: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
+            listbox?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    icon: string[];
+    listbox: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    button: string[];
+    icon: string[];
+    listbox: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Internal component that renders the "Add filter" button and popover menu.
+ * Displays a list of available filters that users can add to the toolbar.
+ * The popover closes automatically when a filter is selected.
+ * @param props - AddFilter component props
+ * @param props.availableFilterDefs - Available filter definitions that can be added
+ * @param props.onSelectionChange - Callback invoked when user selects filters to add
+ * @param props.isDisabled - Whether the add filter button is disabled
+ * @internal
+ */
+declare const AddFilter: {
+    ({ availableFilterDefs, onSelectionChange, isDisabled, ...rest }: AddFilterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AddFilter };

package/dist/esm/components/filter-toolbar/parts/AddFilter.js

@@ -0,0 +1,110 @@
+import { jsxs as s, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { useState as g, useRef as h } from "react";
+import { Icon as v } from "@payfit/unity-icons";
+import { uyTv as x } from "@payfit/unity-themes";
+import { Button as F } from "react-aria-components/Button";
+import { Dialog as N } from "react-aria-components/Dialog";
+import { ListBox as M } from "react-aria-components/ListBox";
+import { Popover as A } from "react-aria-components/Popover";
+import { useIntl as O, FormattedMessage as P } from "react-intl";
+import { filterPopover as w } from "../../filter/parts/FilterPopover.js";
+import { AddFilterItem as I } from "./AddFilterItem.js";
+const S = x({
+  slots: {
+    button: [
+      "uy:flex uy:group uy:items-center",
+      "uy:rounded-sm",
+      "uy:border uy:border-solid",
+      "uy:cursor-pointer uy:data-[disabled=true]:cursor-not-allowed",
+      "uy:w-fit uy:p-100 uy:pl-100 uy:pr-150",
+      "uy:typography-action",
+      "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled",
+      "uy:hover:border-border-form-hover uy:hover:bg-surface-form-hover",
+      "uy:data-[pressed=true]:border-border-form-pressed uy:data-[pressed=true]:bg-surface-form-pressed",
+      "uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled uy:data-[disabled=true]:text-content-form-disabled",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    ],
+    icon: [
+      "uy:p-0.25",
+      "uy:text-content-neutral-low",
+      "uy:group-data-[status=active]:text-content-primary-enabled",
+      "uy:group-data-[disabled=true]:text-content-neutral-disabled"
+    ],
+    listbox: ["uy:p-100"]
+  }
+}), j = ({
+  availableFilterDefs: a,
+  onSelectionChange: l,
+  isDisabled: d = !1,
+  ...i
+}) => {
+  const u = O(), [n, t] = g(!1), o = h(null), { popover: f, dialog: m } = w(), { icon: c, button: p, listbox: b } = S();
+  return /* @__PURE__ */ s(y, { children: [
+    /* @__PURE__ */ s(
+      F,
+      {
+        className: p(),
+        ref: o,
+        onPress: () => {
+          t(!0);
+        },
+        isDisabled: d,
+        ...i,
+        children: [
+          /* @__PURE__ */ e(
+            v,
+            {
+              src: "PlusOutlined",
+              role: "presentation",
+              size: 20,
+              className: c()
+            }
+          ),
+          /* @__PURE__ */ e(
+            P,
+            {
+              id: "unity:component:filter-toolbar:add-filter:label",
+              defaultMessage: "Add filter"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      A,
+      {
+        className: f(),
+        triggerRef: o,
+        isOpen: n,
+        onOpenChange: t,
+        placement: "bottom start",
+        children: /* @__PURE__ */ e(
+          N,
+          {
+            className: m(),
+            "aria-label": u.formatMessage({
+              id: "unity:component:filter-toolbar:add-filter:popover:label",
+              defaultMessage: "Select a filter to add"
+            }),
+            children: /* @__PURE__ */ e(
+              M,
+              {
+                className: b(),
+                selectionMode: "single",
+                items: a,
+                onSelectionChange: (r) => {
+                  l?.(r), t(!1);
+                },
+                children: (r) => /* @__PURE__ */ e(I, { id: r.id, children: r.label })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+j.displayName = "AddFilter";
+export {
+  j as AddFilter
+};