@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/filter/Filter.controls.d.ts

@@ -0,0 +1,192 @@
+import { Selection } from 'react-aria-components';
+import { SelectListProps } from '../select-list/SelectList.js';
+import { FilterProps } from './Filter.types.js';
+/**
+ * Represents a single selectable item in a filter.
+ *
+ * Use this type to define the data structure for individual options in your filter.
+ * Each item must have a unique `id` and a human-readable `label`.
+ * @example
+ * ```tsx
+ * const statusItems: FilterItem[] = [
+ *   { id: 'active', label: 'Active' },
+ *   { id: 'inactive', label: 'Inactive' },
+ *   { id: 'pending', label: 'Pending' },
+ * ]
+ * ```
+ */
+export interface FilterItem {
+    /**
+     * Unique identifier for the item. Used as the value in selections.
+     */
+    id: string;
+    /**
+     * Human-readable label displayed to users.
+     */
+    label: string;
+}
+/**
+ * Represents a group of related filter items.
+ *
+ * Use this type to organize filter options into logical categories, improving UX when
+ * dealing with many options. Groups are rendered with a header label and contain multiple
+ * child items.
+ * @example
+ * ```tsx
+ * const departmentGroups: FilterItemGroup[] = [
+ *   {
+ *     id: 'business',
+ *     label: 'Business',
+ *     children: [
+ *       { id: 'sales', label: 'Sales' },
+ *       { id: 'marketing', label: 'Marketing' },
+ *     ],
+ *   },
+ *   {
+ *     id: 'tech',
+ *     label: 'Tech',
+ *     children: [
+ *       { id: 'engineering', label: 'Engineering' },
+ *       { id: 'product', label: 'Product' },
+ *     ],
+ *   },
+ * ]
+ * ```
+ */
+export interface FilterItemGroup {
+    /**
+     * Unique identifier for the group.
+     */
+    id: string;
+    /**
+     * Label for the group header.
+     */
+    label: string;
+    /**
+     * Array of items belonging to this group.
+     */
+    children: FilterItem[];
+}
+/**
+ * Creates a pre-configured SelectList control for use with the Filter component.
+ *
+ * This helper function simplifies the most common filter use case: selecting items from a list.
+ * It handles the rendering of SelectList with proper multi-select behavior, keyboard navigation,
+ * and support for both flat lists and grouped items. Use this function to quickly create filter
+ * controls without manually managing SelectList configuration.
+ *
+ * The function returns a render function compatible with the Filter component's `renderControl` prop.
+ * It automatically configures the SelectList with sensible defaults: multiple selection, selected items
+ * sorted first, and proper accessibility attributes.
+ * @template TFilterType - The type of the filter value (defaults to Selection from React Aria)
+ * @template TItemType - The type of items in the list (FilterItem or FilterItemGroup)
+ * @param items - An iterable collection of items or item groups to display in the list
+ * @param props - Additional props to pass to the SelectList component (excluding items, value,
+ *                onChange, and children which are managed internally)
+ * @returns A render function that creates a SelectList with the provided items and configuration
+ * @example
+ * ```tsx
+ * import { Filter, selectListFilter } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * // Simple flat list
+ * const statusItems = [
+ *   { id: 'active', label: 'Active' },
+ *   { id: 'inactive', label: 'Inactive' },
+ *   { id: 'pending', label: 'Pending' },
+ * ]
+ *
+ * function StatusFilter() {
+ *   const [value, setValue] = useState<Set<string>>(new Set())
+ *
+ *   return (
+ *     <Filter
+ *       label="Status"
+ *       value={value}
+ *       onChange={setValue}
+ *       renderControl={selectListFilter(statusItems, {})}
+ *     />
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Grouped list with custom aria-label
+ * const departmentGroups = [
+ *   {
+ *     id: 'business',
+ *     label: 'Business',
+ *     children: [
+ *       { id: 'sales', label: 'Sales' },
+ *       { id: 'marketing', label: 'Marketing' },
+ *     ],
+ *   },
+ *   {
+ *     id: 'tech',
+ *     label: 'Tech',
+ *     children: [
+ *       { id: 'engineering', label: 'Engineering' },
+ *       { id: 'product', label: 'Product' },
+ *     ],
+ *   },
+ * ]
+ *
+ * function DepartmentFilter() {
+ *   const [value, setValue] = useState<Set<string>>(new Set())
+ *
+ *   return (
+ *     <Filter
+ *       label="Departments"
+ *       value={value}
+ *       onChange={setValue}
+ *       renderControl={selectListFilter(departmentGroups, {
+ *         'aria-label': 'Select departments',
+ *       })}
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The returned SelectList is configured with `selectionMode="multiple"` by default
+ * - Selected items are automatically sorted to the top of the list using `sortSelectedFirst`
+ * - The escape key behavior is set to `"none"` to prevent closing the filter popover accidentally
+ * - A maximum height of 300px is applied with scrolling enabled for long lists
+ * - Both flat lists (FilterItem[]) and grouped lists (FilterItemGroup[]) are supported
+ */
+export declare function selectListFilter<TFilterType extends Selection = Selection, TItemType extends FilterItem | FilterItemGroup = FilterItem | FilterItemGroup>(items: Iterable<TItemType>, props: Omit<SelectListProps<TItemType>, 'items' | 'value' | 'onChange' | 'children'>): (value: TFilterType, onChange: FilterProps<TFilterType>["onChange"]) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Render the label of a filter that uses the default SelectList component.
+ * This function will extract all the labels of all the selected items, and
+ * create a comma-separated string from them.
+ * @param items the array of items used in the select list
+ * @return A curried function that flattens items into a comma-separated string
+ * @example
+ * ```tsx
+ * import { Filter, selectListFilter, selectListLabel } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * // Simple flat list
+ * const statusItems = [
+ *   { id: 'active', label: 'Active' },
+ *   { id: 'inactive', label: 'Inactive' },
+ *   { id: 'pending', label: 'Pending' },
+ * ]
+ *
+ * function StatusFilter() {
+ *   const [value, setValue] = useState<Set<string>>(new Set())
+ *
+ *   return (
+ *     <Filter
+ *       label="Status"
+ *       value={value}
+ *       onChange={setValue}
+ *       renderControl={selectListFilter(statusItems, {})}
+ *       renderLabel={selectListLabel(items)}
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Both flat lists (FilterItem[]) and grouped lists (FilterItemGroup[]) are supported
+ */
+export declare function selectListLabel(items: Array<FilterItem | FilterItemGroup>): (value: Selection) => string;

package/dist/esm/components/filter/Filter.controls.js

@@ -0,0 +1,45 @@
+import { jsx as c } from "react/jsx-runtime";
+import { SelectListOptGroup as u } from "../select-list/parts/SelectListOptGroup.js";
+import { SelectListOption as a } from "../select-list/parts/SelectListOption.js";
+import { SelectList as p } from "../select-list/SelectList.js";
+function s(l) {
+  return "children" in l && l.children.length > 0;
+}
+function m(l, t) {
+  const n = (r) => /* @__PURE__ */ c(u, { items: r.children, label: r.label, children: (o) => /* @__PURE__ */ c(a, { id: o.id, textValue: o.label, children: o.label }) }), e = (r) => /* @__PURE__ */ c(a, { id: r.id, textValue: r.label, children: r.label });
+  return (r, o) => /* @__PURE__ */ c(
+    p,
+    {
+      ...t,
+      items: l,
+      value: r,
+      selectionMode: "multiple",
+      onChange: (i) => {
+        o(i);
+      },
+      escapeKeyBehavior: "none",
+      sortSelectedFirst: !0,
+      className: "uy:overflow-y-auto uy:scroll-pb-500",
+      children: (i) => s(i) ? n(i) : e(i)
+    }
+  );
+}
+function L(l) {
+  return (t) => {
+    if (t === "all")
+      return l.flatMap((e) => s(e) ? e.children : e).map((e) => e.label).join(", ");
+    const n = [];
+    for (const e of l) {
+      if (s(e)) {
+        n.push(...e.children.filter((r) => t.has(r.id)));
+        continue;
+      }
+      t.has(e.id) && n.push(e);
+    }
+    return n.map((e) => e.label).join(", ");
+  };
+}
+export {
+  m as selectListFilter,
+  L as selectListLabel
+};

package/dist/esm/components/filter/Filter.d.ts

@@ -0,0 +1,189 @@
+import { JSX, Ref } from 'react';
+import { FilterProps } from './Filter.types.js';
+import { selectListFilter, selectListLabel } from './Filter.controls.js';
+/**
+ * Tailwind variants for the Filter container.
+ * @internal
+ */
+export declare const filterContainer: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const filterDismissButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+type FilterComponent = {
+    <TType>(props: FilterProps<TType> & {
+        ref?: Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
+/**
+ * The `Filter` component allows users to refine data by selecting specific criteria from a customizable control.
+ * It provides a consistent, accessible interface for filtering operations across the application, reducing the need
+ * to build custom filter UIs for each data set. The component automatically handles common filtering patterns like
+ * multi-select, value display, and popover management, letting you focus on the filtering logic itself.
+ * The Filter component offers flexible value selection through the `renderControl` prop, which can render any
+ * interactive control (SelectList, DateCalendar, CheckboxGroup, etc.). It displays selected values with smart
+ * formatting: showing the values inline when few are selected, or displaying a numeric badge when many values
+ * are selected. The component includes built-in internationalization support and follows accessibility best practices
+ * with proper ARIA attributes and keyboard navigation.
+ * @template TType - The type of the filter value. Use `Set<string>` for multi-select filters or primitive types
+ *                   for single-value filters. This ensures type safety across value, onChange, and renderControl.
+ * @param {FilterProps<TType>} props - The component props
+ * @example
+ * ```tsx
+ * import { Filter, selectListFilter } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * // Define your filter items
+ * const statusItems = [
+ *   { id: 'active', label: 'Active' },
+ *   { id: 'inactive', label: 'Inactive' },
+ *   { id: 'pending', label: 'Pending' },
+ * ]
+ *
+ * function EmployeeFilters() {
+ *   const [status, setStatus] = useState<Set<string>>(new Set())
+ *
+ *   return (
+ *     <Filter
+ *       label="Status"
+ *       value={status}
+ *       onChange={setStatus}
+ *       renderControl={selectListFilter(statusItems, {})}
+ *     />
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Multi-select filter with grouped items and custom formatting
+ * import { Filter, selectListFilter } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * const departmentGroups = [
+ *   {
+ *     id: 'business',
+ *     label: 'Business',
+ *     children: [
+ *       { id: 'sales', label: 'Sales' },
+ *       { id: 'marketing', label: 'Marketing' },
+ *     ],
+ *   },
+ *   {
+ *     id: 'tech',
+ *     label: 'Tech',
+ *     children: [
+ *       { id: 'engineering', label: 'Engineering' },
+ *       { id: 'product', label: 'Product' },
+ *     ],
+ *   },
+ * ]
+ *
+ * function DepartmentFilter() {
+ *   const [selected, setSelected] = useState<Set<string>>(new Set(['sales']))
+ *
+ *   return (
+ *     <Filter
+ *       label="Departments"
+ *       prefixIcon="BusinessCenterOutlined"
+ *       value={selected}
+ *       onChange={setSelected}
+ *       maxVisibleValues={2}
+ *       renderControl={selectListFilter(departmentGroups, {})}
+ *       renderLabel={(values) =>
+ *         Array.from(values)
+ *           .map((v) => v.charAt(0).toUpperCase() + v.slice(1))
+ *           .join(' • ')
+ *       }
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use the `renderControl` prop to provide the interactive element for value selection. The helper function
+ *   `selectListFilter` simplifies this for common SelectList-based filters, but you can render any control
+ *   like DateCalendar, CheckboxGroup, or custom components
+ * - Customize the display of selected values by providing a `renderLabel` function. This function receives
+ *   the current `value` and should return a string representation for display in the filter button
+ * - Control badge visibility with the `maxVisibleValues` prop (default: 3). When the number of selected values
+ *   exceeds this threshold, the filter automatically shows a numeric badge instead of listing all values
+ * - Set `isDismissable={true}` and provide an `onDismiss` callback to allow users to remove the filter entirely.
+ *   This is useful for optional filters that can be added/removed dynamically
+ * - The component is fully internationalized with support for English, French, and Spanish. The "Clear" and
+ *   "Apply" button labels adapt automatically based on the user's locale
+ * @see {@link FilterProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/filter GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=8976-13410&t=Hd2aEwwHm7cNU2L5-4 Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/components-filter--docs unity-components.payfit.io}
+ */
+declare const Filter: FilterComponent;
+/**
+ * This module contains preconfigured render functions
+ * that are ready to be used for the `Filter` component's `renderControl` prop.
+ * @remarks
+ * - Contains utilities for rendering controls: SelectList
+ * - These render functions are higher-order function. When called, they return a function matching the `Filter` component's `renderLabel` signature
+ * @example
+ * ```tsx
+ * import { Filter, FilterControls } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * // Define your filter items
+ * const statusItems = [
+ *   { id: 'active', label: 'Active' },
+ *   { id: 'inactive', label: 'Inactive' },
+ *   { id: 'pending', label: 'Pending' },
+ * ]
+ *
+ * function EmployeeFilters() {
+ *   const [status, setStatus] = useState<Set<string>>(new Set())
+ *
+ *   return (
+ *     <Filter
+ *       label="Status"
+ *       value={status}
+ *       onChange={setStatus}
+ *       renderControl={FilterControls.selectList(statusItems, {})}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare const FilterControls: {
+    selectList: typeof selectListFilter;
+};
+/**
+ * This module contains preconfigured render functions that are ready to be used for `Filter` component's `renderLabel` prop.
+ * @remarks
+ * - Contains utilities for rendering labels managed by: SelectList
+ * - These render functions are higher-order function. When called, they return a function matching the `Filter` component's `renderLabel` signature
+ * @example
+ * ```tsx
+ * import { Filter, FilterControls, FilterLabels } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * // Define your filter items
+ * const statusItems = [
+ *   { id: 'active', label: 'Active' },
+ *   { id: 'inactive', label: 'Inactive' },
+ *   { id: 'pending', label: 'Pending' },
+ * ]
+ *
+ * function EmployeeFilters() {
+ *   const [status, setStatus] = useState<Set<string>>(new Set())
+ *
+ *   return (
+ *     <Filter
+ *       label="Status"
+ *       value={status}
+ *       onChange={setStatus}
+ *       renderControl={FilterControls.selectList(statusItems, {})}
+ *       renderLabel={FilterLabels.selectList(statusItems)}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare const FilterLabels: {
+    selectList: typeof selectListLabel;
+};
+export { Filter };
+export type { FilterProps } from './Filter.types.js';

package/dist/esm/components/filter/Filter.js

@@ -0,0 +1,147 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { forwardRef as A, useCallback as D } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { DialogTrigger as E } from "react-aria-components";
+import { useIntl as G } from "react-intl";
+import { CircularIconButton as H } from "../icon-button/CircularIconButton.js";
+import { selectListFilter as J, selectListLabel as K } from "./Filter.controls.js";
+import { useFilterIds as Q } from "./hooks/useFilterIds.js";
+import { useFilterState as U } from "./hooks/useFilterState.js";
+import { useFilterValue as V } from "./hooks/useFilterValue.js";
+import { FilterButton as W } from "./parts/FilterButton.js";
+import { FilterLabel as X } from "./parts/FilterLabel.js";
+import { FilterPopover as Y } from "./parts/FilterPopover.js";
+import { defaultRenderLabel as Z } from "./utils/value-formatters.js";
+const _ = c({
+  base: [
+    "uy:group uy:transition-colors",
+    "uy:flex uy:items-center",
+    "uy:rounded-md uy:sm:rounded-sm",
+    "uy:border uy:border-solid",
+    "uy:cursor-pointer uy:aria-[disabled=true]:cursor-not-allowed",
+    "uy:w-fit",
+    "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled",
+    "uy:has-data-[hovered]:border-border-form-hover uy:has-data-[hovered]:bg-surface-form-hover",
+    "uy:has-data-[pressed]:border-border-form-pressed uy:has-data-[pressed]:bg-surface-form-pressed",
+    "uy:aria-[disabled=true]:border-border-form-disabled uy:aria-[disabled=true]:bg-surface-form-disabled uy:aria-[disabled=true]:text-content-form-disabled",
+    "uy:data-[status=active]:text-content-primary-enabled",
+    "uy:focus-within:outline-2 uy:focus-within:outline-offset-2 uy:focus-within:outline-utility-focus-ring",
+    'uy:[&:not(:has([data-unity-slot="dismiss"]))]:pr-1.5'
+  ]
+}), $ = c({
+  base: [
+    "uy:rounded-r-sm uy:leading-0",
+    "uy:pl-0.25 uy:py-1 uy:pr-1 uy:h-full"
+  ]
+});
+function ee({
+  id: y,
+  label: p,
+  prefixIcon: b,
+  onDismiss: h,
+  renderControl: g,
+  value: t,
+  onChange: v,
+  isDismissable: F = !0,
+  isDisabled: r = !1,
+  isActive: I = !1,
+  renderLabel: w = Z,
+  maxVisibleValues: i = 3,
+  shouldCloseOnConfirm: C = !0,
+  onClearSelection: L,
+  shouldCloseOnClear: x = !0,
+  onConfirmSelection: B,
+  onFilterOpen: s,
+  onFilterClose: a,
+  isDefaultOpen: O = !1,
+  ...N
+}, R) {
+  const j = G(), { rootId: l, labelId: o, valueId: d, dismissButtonId: M } = Q(y), { isOpen: u, setIsOpen: n, confirm: P, clear: S } = U({
+    initialIsOpen: O,
+    shouldCloseOnConfirm: C,
+    shouldCloseOnClear: x,
+    onConfirmSelection: B,
+    onClearSelection: L
+  }), T = D(
+    (m) => {
+      n(m), m ? s?.() : a?.();
+    },
+    [n, s, a]
+  ), { valuesCount: k, shouldShowBadge: q, formattedValue: z } = V(
+    t,
+    i,
+    w
+  );
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ref: R,
+      role: "group",
+      id: l,
+      className: _(),
+      "aria-labelledby": o,
+      "aria-describedby": d,
+      "aria-disabled": r,
+      "data-dd-privacy": "allow",
+      "data-status": I || u ? "active" : "idle",
+      "data-unity-component": "Filter",
+      ...N,
+      children: [
+        /* @__PURE__ */ f(E, { isOpen: u, onOpenChange: T, children: [
+          /* @__PURE__ */ e(
+            W,
+            {
+              labelId: o,
+              prefixIcon: b,
+              isDisabled: r,
+              children: /* @__PURE__ */ e(
+                X,
+                {
+                  labelId: o,
+                  valueId: d,
+                  label: p,
+                  value: t,
+                  valuesCount: k,
+                  shouldShowBadge: q,
+                  formattedValue: z,
+                  maxVisibleValues: i,
+                  isDisabled: r
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(Y, { onConfirm: P, onClear: S, children: g(t, v) })
+        ] }),
+        F && /* @__PURE__ */ e("div", { "data-unity-slot": "dismiss", className: $(), children: /* @__PURE__ */ e(
+          H,
+          {
+            icon: "CloseOutlined",
+            color: "content.neutral.lowest",
+            title: j.formatMessage({
+              id: "unity:component:filter:dismiss:title",
+              defaultMessage: "Remove filter"
+            }),
+            onPress: h,
+            id: M,
+            "aria-controls": l,
+            isDisabled: r
+          }
+        ) })
+      ]
+    }
+  );
+}
+const re = A(ee);
+re.displayName = "Filter";
+const be = {
+  selectList: J
+}, he = {
+  selectList: K
+};
+export {
+  re as Filter,
+  be as FilterControls,
+  he as FilterLabels,
+  _ as filterContainer,
+  $ as filterDismissButton
+};

package/dist/esm/components/filter/Filter.types.d.ts

@@ -0,0 +1,121 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { ReactNode } from 'react';
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export interface FilterEventProps {
+    /**
+     * Callback function invoked when the filter popover opens.
+     * @default undefined
+     */
+    onFilterOpen?: () => void;
+    /**
+     * Callback function invoked when the filter popover closes.
+     * @default undefined
+     */
+    onFilterClose?: () => void;
+    /**
+     * Callback function called when the user presses "confirm" or "apply" button.
+     * @default undefined
+     */
+    onConfirmSelection?: () => void;
+    /**
+     * Callback function called when the user presses "clear" button.
+     * @default undefined
+     */
+    onClearSelection?: () => void;
+}
+export interface FilterDisplayProps {
+    /**
+     * The label for the filter.
+     */
+    label: string;
+    /**
+     * The prefix icon show at the start of the filter.
+     * @default undefined
+     */
+    prefixIcon?: UnityIcon;
+    /**
+     * The maximum number of visible selected values in the filter label.
+     * If there are more selected values than this number, the label will be hidden and a counter badge will be shown instead.
+     * @default 3
+     */
+    maxVisibleValues?: number;
+    /**
+     * Whether the filter is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the filter is active.
+     * @default false
+     */
+    isActive?: boolean;
+}
+type FilterDismissProps = {
+    /**
+     * Whether the filter is dismissable by the user. Shows a dismiss button at the end of the filter.
+     * @default true
+     */
+    isDismissable: true;
+    /**
+     * Callback function called when the user dismisses the filter.
+     * @default undefined
+     */
+    onDismiss: () => void;
+} | {
+    isDismissable: false;
+    onDismiss?: never;
+} | {
+    isDismissable?: undefined;
+    onDismiss?: never;
+};
+/**
+ * Filter component props supporting both controlled and uncontrolled modes
+ * @template TType - The type of the filter value
+ */
+export type FilterProps<TType> = Prettify<FilterEventProps & FilterDisplayProps & FilterDismissProps & {
+    /**
+     * The unique identifier for the filter.
+     */
+    id?: string;
+    /**
+     * The value of the filter.
+     * @default undefined
+     */
+    value: TType;
+    /**
+     * Callback function to handle changes in the filter value.
+     * @param value - The new value of the filter
+     */
+    onChange: (value: TType) => void;
+    /**
+     * render prop to render the controlling component for filter value selection
+     * @param value
+     * @param onChange
+     */
+    renderControl: (value: TType, onChange: (value: TType) => void) => ReactNode;
+    /**
+     * render prop to render the label for the filter value selection. By default, it will render the value as a string.
+     * If the value is iterable, it will render the values as a comma-separated string.
+     * @param value
+     */
+    renderLabel?: (value: TType) => ReactNode;
+    /**
+     * whether the filter should close when the user confirms the selection.
+     * @default true
+     */
+    shouldCloseOnConfirm?: boolean;
+    /**
+     * whether the filter should close when the user clears the selection.
+     * @default true
+     */
+    shouldCloseOnClear?: boolean;
+    /**
+     * Whether the filter popover should be open by default when the component first mounts.
+     * This only affects the initial state on mount - the component manages its own state after that.
+     * @default false
+     */
+    isDefaultOpen?: boolean;
+}>;
+export {};