@payfit/unity-components 1.2.0 → 2.1.4

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;

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

@@ -0,0 +1,31 @@
+import { useMemo as l } from "react";
+import { isIterable as s } from "../utils/value-formatters.js";
+function d(t, e, r) {
+  return l(() => {
+    if (t == null || t === "")
+      return {
+        valuesCount: 0,
+        shouldShowBadge: !1,
+        formattedValue: null
+      };
+    let o;
+    if (s(t)) {
+      if (o = Array.from(t).length, o === 0)
+        return {
+          valuesCount: 0,
+          shouldShowBadge: !1,
+          formattedValue: null
+        };
+    } else
+      o = 1;
+    const u = !isNaN(e) && o > e, n = u ? null : r(t);
+    return {
+      valuesCount: o,
+      shouldShowBadge: u,
+      formattedValue: n
+    };
+  }, [t, e, r]);
+}
+export {
+  d as useFilterValue
+};

package/dist/esm/components/filter/parts/FilterButton.d.ts

@@ -0,0 +1,75 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { ReactNode } from 'react';
+/**
+ * Tailwind variants for the FilterButton component.
+ * @internal
+ */
+export declare const filterButton: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            prefix?: import('tailwind-merge').ClassNameValue;
+            button?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            prefix?: import('tailwind-merge').ClassNameValue;
+            button?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    prefix: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            prefix?: import('tailwind-merge').ClassNameValue;
+            button?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    prefix: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    button: string[];
+    prefix: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Props for the FilterButton component.
+ * @internal
+ */
+export interface FilterButtonProps {
+    /**
+     * The ID of the label element that labels this button.
+     */
+    labelId: string;
+    /**
+     * Optional icon to display before the label.
+     */
+    prefixIcon?: UnityIcon;
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled: boolean;
+    /**
+     * The label content to display inside the button.
+     */
+    children: ReactNode;
+}
+/**
+ * Internal component that renders the main filter trigger button.
+ * This component wraps the filter label in an interactive button that opens
+ * the filter popover when pressed. It supports an optional prefix icon and
+ * maintains proper accessibility attributes.
+ * The button uses the Actionable component from Unity for consistent
+ * interaction states (hover, pressed, focus, disabled).
+ * @param props - The FilterButton props
+ * @param props.labelId - The ID of the label element that labels this button.
+ * @param props.prefixIcon - Optional icon to display before the label.
+ * @param props.isDisabled - Whether the button is disabled.
+ * @param props.children - The label content to display inside the button.
+ * @returns The rendered button element
+ * @internal
+ */
+export declare function FilterButton({ labelId, prefixIcon, isDisabled, children, }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/filter/parts/FilterButton.js

@@ -0,0 +1,55 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { Icon as l } from "@payfit/unity-icons";
+import { uyTv as s } from "@payfit/unity-themes";
+import { Actionable as p } from "../../actionable/Actionable.js";
+const y = s({
+  slots: {
+    button: [
+      "uy:flex uy:gap-0.5 uy:items-center",
+      "uy:focus-visible:outline-none",
+      // spacing based on children
+      "uy:py-1",
+      "uy:pl-1.5 uy:has-data-[unity-slot=prefix]:pl-1",
+      "uy:pr-0"
+    ],
+    prefix: [
+      "uy:p-0.25",
+      "uy:text-content-neutral-low",
+      "uy:group-data-[status=active]:text-content-primary-enabled",
+      "uy:group-aria-[disabled=true]:text-content-neutral-disabled"
+    ]
+  }
+});
+function x({
+  labelId: o,
+  prefixIcon: t,
+  isDisabled: r,
+  children: a
+}) {
+  const { button: i, prefix: n } = y();
+  return /* @__PURE__ */ u(
+    p,
+    {
+      className: i(),
+      "aria-labelledby": o,
+      isDisabled: r,
+      "aria-haspopup": "dialog",
+      children: [
+        t && /* @__PURE__ */ e("span", { "data-unity-slot": "prefix", className: n(), children: /* @__PURE__ */ e(
+          l,
+          {
+            src: t,
+            size: 20,
+            role: "presentation",
+            color: "inherit"
+          }
+        ) }),
+        a
+      ]
+    }
+  );
+}
+export {
+  x as FilterButton,
+  y as filterButton
+};

package/dist/esm/components/filter/parts/FilterLabel.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Tailwind variants for the FilterLabel component.
+ * @internal
+ */
+export declare const filterLabel: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            value?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            value?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
+    value: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            value?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
+    value: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    container: string[];
+    value: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Props for the FilterLabel component.
+ * @internal
+ */
+export interface FilterLabelProps {
+    /**
+     * The ID for the label element (for accessibility).
+     */
+    labelId: string;
+    /**
+     * The ID for the value element (for accessibility).
+     */
+    valueId: string;
+    /**
+     * The label text to display.
+     */
+    label: string;
+    /**
+     * The current filter value.
+     */
+    value: unknown;
+    /**
+     * The number of selected values.
+     */
+    valuesCount: number;
+    /**
+     * Whether to show a badge with the count instead of the formatted value.
+     */
+    shouldShowBadge: boolean;
+    /**
+     * The formatted string representation of the value.
+     */
+    formattedValue: string | null;
+    /**
+     * Maximum number of values to display before showing a badge.
+     */
+    maxVisibleValues: number;
+    /**
+     * Whether the filter is disabled.
+     */
+    isDisabled: boolean;
+}
+/**
+ * Internal component that renders the filter's label and value display.
+ * This component handles the display logic for showing either:
+ * - The formatted value (when count is within threshold)
+ * - A badge with the count (when count exceeds threshold)
+ * The label text is always visible and marked with `data-dd-privacy="allow"`,
+ * while the value is masked with `data-dd-privacy="mask"` for data privacy.
+ * @param props - The FilterLabel props
+ * @param props.labelId - The ID for the label element (for accessibility).
+ * @param props.valueId - The ID for the value element (for accessibility).
+ * @param props.label - The label text to display.
+ * @param props.valuesCount - The number of selected values.
+ * @param props.formattedValue - The formatted string representation of the value.
+ * @param props.maxVisibleValues - Maximum number of values to display before showing a badge.
+ * @param props.isDisabled - Whether the filter is disabled.
+ * @returns The rendered label element
+ * @internal
+ */
+export declare function FilterLabel({ labelId, valueId, label, valuesCount, formattedValue, maxVisibleValues, isDisabled, }: FilterLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/filter/parts/FilterLabel.js

@@ -0,0 +1,57 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { uyTv as p } from "@payfit/unity-themes";
+import { FormattedMessage as y } from "react-intl";
+import { Badge as m } from "../../badge/Badge.js";
+const h = p({
+  slots: {
+    container: [
+      "uy:typography-action",
+      "uy:flex uy:gap-0.25 uy:items-baseline"
+    ],
+    value: [
+      "uy:whitespace-nowrap uy:overflow-hidden uy:max-w-[20ch] uy:text-ellipsis"
+    ]
+  }
+});
+function g({
+  labelId: n,
+  valueId: t,
+  label: o,
+  valuesCount: e,
+  formattedValue: l,
+  maxVisibleValues: r,
+  isDisabled: i
+}) {
+  const { container: c, value: d } = h(), u = e > 0 && e <= r && l;
+  return /* @__PURE__ */ a("div", { id: n, className: c(), children: [
+    /* @__PURE__ */ a("span", { "data-dd-privacy": "allow", children: [
+      o,
+      u && /* @__PURE__ */ a("span", { "data-dd-privacy": "mask", className: d(), id: t, children: [
+        ": ",
+        l
+      ] })
+    ] }),
+    !isNaN(r) && e > r && /* @__PURE__ */ a(
+      m,
+      {
+        variant: i ? "neutral" : "numeric",
+        className: "uy:h-300",
+        children: [
+          e,
+          /* @__PURE__ */ s("span", { className: "uy:sr-only", id: t, children: /* @__PURE__ */ s(
+            y,
+            {
+              id: "unity:component:filter:label:values-count",
+              defaultMessage: "{count, plural, =0 {no values} one {value} other {values}} selected",
+              values: { count: e }
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  g as FilterLabel,
+  h as filterLabel
+};

package/dist/esm/components/filter/parts/FilterPopover.d.ts

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+/**
+ * Tailwind variants for the FilterPopover component.
+ * @internal
+ */
+export declare const filterPopover: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            dialog?: import('tailwind-merge').ClassNameValue;
+            footer?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            popover?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            dialog?: import('tailwind-merge').ClassNameValue;
+            footer?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            popover?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    popover: string[];
+    dialog: string[];
+    content: string[];
+    footer: string[];
+    separator: string[];
+    actions: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            dialog?: import('tailwind-merge').ClassNameValue;
+            footer?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            popover?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    popover: string[];
+    dialog: string[];
+    content: string[];
+    footer: string[];
+    separator: string[];
+    actions: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    popover: string[];
+    dialog: string[];
+    content: string[];
+    footer: string[];
+    separator: string[];
+    actions: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Props for the FilterPopover component.
+ * @internal
+ */
+export interface FilterPopoverProps {
+    /**
+     * The content to render inside the popover (the filter control).
+     */
+    children: ReactNode;
+    /**
+     * Callback invoked when the "Apply" button is pressed.
+     */
+    onConfirm: () => void;
+    /**
+     * Callback invoked when the "Clear" button is pressed.
+     */
+    onClear: () => void;
+}
+/**
+ * Internal component that renders the filter's popover dialog.
+ * This component provides the popover container that appears when the filter
+ * button is clicked. It includes:
+ * - A content area for the custom filter control (passed as children)
+ * - A footer with two action buttons: "Clear" (danger) and "Apply" (primary)
+ * - Smooth animations for opening/closing
+ * - Proper positioning relative to the trigger
+ * The popover is controlled by React Aria's DialogTrigger in the parent component.
+ * @param props - The FilterPopover props
+ * @param props.children - The content to render inside the popover (the filter control).
+ * @param props.onConfirm - Callback invoked when the "Apply" button is pressed.
+ * @param props.onClear - Callback invoked when the "Clear" button is pressed.
+ * @returns The rendered popover element
+ * @internal
+ */
+export declare function FilterPopover({ children, onConfirm, onClear, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;