@payfit/unity-components 2.46.12 → 2.46.13

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

@@ -1,189 +0,0 @@
-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

@@ -1,147 +0,0 @@
-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/Dialog";
-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-form-selected",
-    "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

@@ -1,121 +0,0 @@
-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

@@ -1,49 +0,0 @@
-/**
- * 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

@@ -1,13 +0,0 @@
-import { useId as i } from "react-aria/useId";
-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

@@ -1,74 +0,0 @@
-/**
- * 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

@@ -1,23 +0,0 @@
-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

@@ -1,61 +0,0 @@
-/**
- * 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;