@payfit/unity-components 2.0.0 → 2.2.0

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 {};

package/dist/esm/components/filter/hooks/useFilterIds.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Return value of the filter IDs hook.
+ * @internal
+ */
+export interface UseFilterIdsReturn {
+    /**
+     * ID for the filter's root container element.
+     */
+    rootId: string;
+    /**
+     * ID for the filter's label element.
+     */
+    labelId: string;
+    /**
+     * ID for the filter's value element.
+     */
+    valueId: string;
+    /**
+     * ID for the dismiss button element.
+     */
+    dismissButtonId: string;
+}
+/**
+ * Custom hook to generate consistent accessibility IDs for the filter component.
+ * This hook ensures that all filter elements have unique, properly associated IDs
+ * for accessibility purposes. If no ID is provided, it generates one using React
+ * Aria's `useId` hook. All generated IDs follow the pattern: `filter-{id}__{suffix}`.
+ * These IDs are used for ARIA attributes like `aria-labelledby`, `aria-describedby`,
+ * and `aria-controls` to create proper semantic relationships between elements.
+ * @param id - Optional custom ID for the filter. If not provided, a unique ID will be generated.
+ * @returns An object containing all necessary IDs for the filter component
+ * @example
+ * ```tsx
+ * // With custom ID
+ * const { rootId, labelId, dismissButtonId } = useFilterIds('status-filter')
+ * // rootId: 'filter-status-filter'
+ * // labelId: 'filter-status-filter__label'
+ * // dismissButtonId: 'filter-status-filter__dismiss-button'
+ *
+ * // With auto-generated ID
+ * const ids = useFilterIds()
+ * // rootId: 'filter-react-aria-123'
+ * // labelId: 'filter-react-aria-123__label'
+ * // valueId: 'filter-react-aria-123__value'
+ * // dismissButtonId: 'filter-react-aria-123__dismiss-button'
+ * ```
+ * @internal
+ */
+export declare function useFilterIds(id?: string): UseFilterIdsReturn;

package/dist/esm/components/filter/hooks/useFilterIds.js

@@ -0,0 +1,13 @@
+import { useId as i } from "react-aria";
+function d(e) {
+  const r = i(), t = e ?? r;
+  return {
+    rootId: `filter-${t}`,
+    labelId: `filter-${t}__label`,
+    valueId: `filter-${t}__value`,
+    dismissButtonId: `filter-${t}__dismiss-button`
+  };
+}
+export {
+  d as useFilterIds
+};

package/dist/esm/components/filter/hooks/useFilterState.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Configuration options for the filter state hook.
+ * @internal
+ */
+export interface UseFilterStateOptions {
+    /**
+     * Whether the 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
+     */
+    initialIsOpen?: boolean;
+    /**
+     * Whether the popover should close when the user confirms the selection.
+     * @default true
+     */
+    shouldCloseOnConfirm?: boolean;
+    /**
+     * Whether the popover should close when the user clears the selection.
+     * @default true
+     */
+    shouldCloseOnClear?: boolean;
+    /**
+     * Callback function invoked when the user confirms their selection.
+     * @default undefined
+     */
+    onConfirmSelection?: () => void;
+    /**
+     * Callback function invoked when the user clears their selection.
+     * @default undefined
+     */
+    onClearSelection?: () => void;
+}
+/**
+ * Return value of the filter state hook.
+ * @internal
+ */
+export interface UseFilterStateReturn {
+    /**
+     * Whether the filter popover is currently open.
+     */
+    isOpen: boolean;
+    /**
+     * Function to control the open/close state of the popover.
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Function to confirm the current selection. Invokes the `onConfirmSelection` callback
+     * and closes the popover if `shouldCloseOnConfirm` is true.
+     */
+    confirm: () => void;
+    /**
+     * Function to clear the current selection. Invokes the `onClearSelection` callback
+     * and closes the popover if `shouldCloseOnClear` is true.
+     */
+    clear: () => void;
+}
+/**
+ * Custom hook to manage the filter popover state and user actions.
+ * This hook encapsulates the logic for opening/closing the filter popover
+ * and handling confirm and clear actions with their associated callbacks.
+ * @param options - Configuration options for the filter state
+ * @returns An object containing the popover state and action handlers
+ * @example
+ * ```tsx
+ * const { isOpen, setIsOpen, confirm, clear } = useFilterState({
+ *   shouldCloseOnConfirm: true,
+ *   shouldCloseOnClear: true,
+ *   onConfirmSelection: () => console.log('Confirmed'),
+ *   onClearSelection: () => console.log('Cleared'),
+ * })
+ * ```
+ * @internal
+ */
+export declare function useFilterState(options?: UseFilterStateOptions): UseFilterStateReturn;

package/dist/esm/components/filter/hooks/useFilterState.js

@@ -0,0 +1,23 @@
+import { useState as u, useCallback as l } from "react";
+function m(i = {}) {
+  const {
+    initialIsOpen: r = !1,
+    shouldCloseOnConfirm: n = !0,
+    shouldCloseOnClear: o = !0,
+    onConfirmSelection: t,
+    onClearSelection: s
+  } = i, [a, e] = u(r), c = l(() => {
+    n && e(!1), t?.();
+  }, [n, t]), f = l(() => {
+    o && e(!1), s?.();
+  }, [o, s]);
+  return {
+    isOpen: a,
+    setIsOpen: e,
+    confirm: c,
+    clear: f
+  };
+}
+export {
+  m as useFilterState
+};

package/dist/esm/components/filter/hooks/useFilterValue.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Return value of the filter value hook.
+ * @internal
+ */
+export interface UseFilterValueReturn {
+    /**
+     * The number of selected values in the filter.
+     * Returns 1 for non-iterable values, or the count of items for iterables.
+     */
+    valuesCount: number;
+    /**
+     * Whether a badge should be displayed instead of the formatted value.
+     * True when the count exceeds maxVisibleValues.
+     */
+    shouldShowBadge: boolean;
+    /**
+     * The formatted string representation of the value.
+     * Only populated when shouldShowBadge is false.
+     */
+    formattedValue: string | null;
+}
+/**
+ * Custom hook to calculate display metadata for filter values.
+ * This hook determines how many values are selected, whether to show a badge
+ * indicating the count, and provides a formatted string representation of the
+ * value for display in the filter label.
+ * The hook uses memoization to prevent unnecessary recalculations when the
+ * value, maxVisibleValues, or renderLabel function haven't changed.
+ * @param value - The current filter value (can be single value or iterable)
+ * @param maxVisibleValues - Maximum number of values to display before showing a badge
+ * @param renderLabel - Function to format the value as a string
+ * @returns Metadata about the value for display purposes
+ * @example
+ * ```tsx
+ * // Single value
+ * const { valuesCount, shouldShowBadge, formattedValue } = useFilterValue(
+ *   'active',
+ *   3,
+ *   (v) => String(v)
+ * )
+ * // valuesCount: 1, shouldShowBadge: false, formattedValue: 'active'
+ *
+ * // Multiple values within threshold
+ * const result = useFilterValue(
+ *   ['apple', 'banana'],
+ *   3,
+ *   (v) => v.join(', ')
+ * )
+ * // valuesCount: 2, shouldShowBadge: false, formattedValue: 'apple, banana'
+ *
+ * // Multiple values exceeding threshold
+ * const result = useFilterValue(
+ *   ['a', 'b', 'c', 'd'],
+ *   3,
+ *   (v) => v.join(', ')
+ * )
+ * // valuesCount: 4, shouldShowBadge: true, formattedValue: null
+ * ```
+ * @internal
+ */
+export declare function useFilterValue<TType>(value: TType, maxVisibleValues: number, renderLabel: (value: TType) => string): UseFilterValueReturn;