@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,18 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ListBoxItemProps } from 'react-aria-components/ListBox';
+export declare const addFilterItem: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface AddFilterItemProps extends VariantProps<typeof addFilterItem>, ListBoxItemProps {
+}
+/**
+ * Internal component that renders individual filter options in the add filter menu.
+ * Each item represents a filter that can be added to the toolbar.
+ * @param props - AddFilterItem component props
+ * @param props.id - Unique identifier for the filter item
+ * @param props.children - Label content to display for the filter
+ * @internal
+ */
+declare const AddFilterItem: {
+    ({ id, children, ...rest }: AddFilterItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AddFilterItem };

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

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import { uyTv as o } from "@payfit/unity-themes";
+import { ListBoxItem as i } from "react-aria-components/ListBox";
+const s = o({
+  base: [
+    "uy:flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
+    "uy:px-150 uy:py-100",
+    "uy:rounded-50 uy:cursor-pointer",
+    "uy:hover:bg-surface-neutral-hover",
+    "uy:active:bg-surface-neutral-pressed",
+    "uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2"
+  ]
+}), y = ({ id: e, children: t, ...u }) => /* @__PURE__ */ r(i, { className: s(), id: e, ...u, children: t });
+y.displayName = "AddFilterItem";
+export {
+  y as AddFilterItem,
+  s as addFilterItem
+};

package/dist/esm/components/filter-toolbar/utils/filter-adapters.d.ts

@@ -0,0 +1,93 @@
+import { ColumnFiltersState } from '@tanstack/react-table';
+import { AppliedFilter } from '../FilterToolbar.types.js';
+/**
+ * Adapters for converting FilterToolbar's AppliedFilter format to and from external formats.
+ *
+ * Use these adapters to integrate FilterToolbar with other libraries like Tanstack Table.
+ * Each adapter provides bidirectional conversion methods.
+ * @example
+ * ```tsx
+ * import { FilterAdapters } from '@payfit/unity-components'
+ *
+ * // Convert FilterToolbar filters to Tanstack Table format
+ * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
+ *
+ * // Convert Tanstack Table filters back to FilterToolbar format
+ * const appliedFilters = FilterAdapters.TanstackTable.fromColumnFilters(columnFilters)
+ * ```
+ */
+export declare const FilterAdapters: {
+    /**
+     * Adapter for Tanstack Table integration.
+     *
+     * Handles conversion between FilterToolbar's AppliedFilter format and
+     * Tanstack Table's ColumnFiltersState format.
+     * @example
+     * ```tsx
+     * const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([])
+     * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
+     *
+     * const table = useReactTable({
+     *   state: { columnFilters },
+     *   // ... other config
+     * })
+     *
+     * return (
+     *   <>
+     *     <FilterToolbar
+     *       filterDefs={filterDefs}
+     *       initialValue={appliedFilters}
+     *       onChange={setAppliedFilters}
+     *     />
+     *     <DataTable table={table} />
+     *   </>
+     * )
+     * ```
+     * @see {@link https://tanstack.com/table/latest/docs/guide/filters Tanstack Table Filters Documentation}
+     */
+    TanstackTable: {
+        /**
+         * Converts FilterToolbar's AppliedFilter format to Tanstack Table's ColumnFiltersState format.
+         *
+         * This method handles two key transformations:
+         * 1. Filters out empty filters (filters without values) so the table shows all results
+         * 2. Converts Set values to Arrays (React Aria uses Set, Tanstack Table uses Array)
+         * @param appliedFilters - Array of applied filters from FilterToolbar's onChange callback
+         * @returns Column filters compatible with Tanstack Table's state.columnFilters
+         * @remarks
+         * - Empty filters (undefined values or empty Sets) are excluded from the result
+         * - This ensures that adding a filter without selecting values doesn't hide all table rows
+         * - Set values are converted to Arrays for compatibility with Tanstack Table's filter functions
+         * @example
+         * ```tsx
+         * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters([
+         *   { id: 'status', value: new Set(['active', 'pending']) },
+         *   { id: 'department', value: undefined }, // Will be filtered out
+         * ])
+         * // Result: [{ id: 'status', value: ['active', 'pending'] }]
+         * ```
+         */
+        toColumnFilters(appliedFilters: AppliedFilter[]): ColumnFiltersState;
+        /**
+         * Converts Tanstack Table's ColumnFiltersState format to FilterToolbar's AppliedFilter format.
+         *
+         * This is useful when you need to initialize FilterToolbar from existing table state,
+         * URL parameters, or server-side filter state.
+         * @param columnFilters - Column filters from Tanstack Table's state
+         * @returns Array of applied filters compatible with FilterToolbar's initialValue
+         * @remarks
+         * - Array values are converted to Sets for compatibility with React Aria's SelectList
+         * - In most cases, you should make FilterToolbar the source of truth and use toColumnFilters
+         *   to derive table state instead of syncing bidirectionally
+         * @example
+         * ```tsx
+         * // Initialize FilterToolbar from URL params
+         * const urlFilters = parseUrlToColumnFilters(searchParams)
+         * const appliedFilters = FilterAdapters.TanstackTable.fromColumnFilters(urlFilters)
+         *
+         * return <FilterToolbar initialValue={appliedFilters} />
+         * ```
+         */
+        fromColumnFilters(columnFilters: ColumnFiltersState): AppliedFilter[];
+    };
+};

package/dist/esm/components/filter-toolbar/utils/filter-adapters.js

@@ -0,0 +1,88 @@
+const u = {
+  /**
+   * Adapter for Tanstack Table integration.
+   *
+   * Handles conversion between FilterToolbar's AppliedFilter format and
+   * Tanstack Table's ColumnFiltersState format.
+   * @example
+   * ```tsx
+   * const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([])
+   * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
+   *
+   * const table = useReactTable({
+   *   state: { columnFilters },
+   *   // ... other config
+   * })
+   *
+   * return (
+   *   <>
+   *     <FilterToolbar
+   *       filterDefs={filterDefs}
+   *       initialValue={appliedFilters}
+   *       onChange={setAppliedFilters}
+   *     />
+   *     <DataTable table={table} />
+   *   </>
+   * )
+   * ```
+   * @see {@link https://tanstack.com/table/latest/docs/guide/filters Tanstack Table Filters Documentation}
+   */
+  TanstackTable: {
+    /**
+     * Converts FilterToolbar's AppliedFilter format to Tanstack Table's ColumnFiltersState format.
+     *
+     * This method handles two key transformations:
+     * 1. Filters out empty filters (filters without values) so the table shows all results
+     * 2. Converts Set values to Arrays (React Aria uses Set, Tanstack Table uses Array)
+     * @param appliedFilters - Array of applied filters from FilterToolbar's onChange callback
+     * @returns Column filters compatible with Tanstack Table's state.columnFilters
+     * @remarks
+     * - Empty filters (undefined values or empty Sets) are excluded from the result
+     * - This ensures that adding a filter without selecting values doesn't hide all table rows
+     * - Set values are converted to Arrays for compatibility with Tanstack Table's filter functions
+     * @example
+     * ```tsx
+     * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters([
+     *   { id: 'status', value: new Set(['active', 'pending']) },
+     *   { id: 'department', value: undefined }, // Will be filtered out
+     * ])
+     * // Result: [{ id: 'status', value: ['active', 'pending'] }]
+     * ```
+     */
+    toColumnFilters(e) {
+      return e.filter((a) => a.value instanceof Set ? a.value.size > 0 : a.value !== void 0 && a.value !== null).map((a) => ({
+        id: a.id,
+        value: a.value instanceof Set ? Array.from(a.value) : a.value
+      }));
+    },
+    /**
+     * Converts Tanstack Table's ColumnFiltersState format to FilterToolbar's AppliedFilter format.
+     *
+     * This is useful when you need to initialize FilterToolbar from existing table state,
+     * URL parameters, or server-side filter state.
+     * @param columnFilters - Column filters from Tanstack Table's state
+     * @returns Array of applied filters compatible with FilterToolbar's initialValue
+     * @remarks
+     * - Array values are converted to Sets for compatibility with React Aria's SelectList
+     * - In most cases, you should make FilterToolbar the source of truth and use toColumnFilters
+     *   to derive table state instead of syncing bidirectionally
+     * @example
+     * ```tsx
+     * // Initialize FilterToolbar from URL params
+     * const urlFilters = parseUrlToColumnFilters(searchParams)
+     * const appliedFilters = FilterAdapters.TanstackTable.fromColumnFilters(urlFilters)
+     *
+     * return <FilterToolbar initialValue={appliedFilters} />
+     * ```
+     */
+    fromColumnFilters(e) {
+      return e.map((a) => ({
+        id: a.id,
+        value: Array.isArray(a.value) ? new Set(a.value) : a.value
+      }));
+    }
+  }
+};
+export {
+  u as FilterAdapters
+};

package/dist/esm/components/filter-toolbar/utils/normalize-filter-value.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Normalizes filter values to serializable formats (string or string array).
+ * This ensures filter values can be safely serialized to URLs or JSON.
+ * Handles various JavaScript types including primitives, arrays, Sets, Dates, and objects.
+ * @param value - The filter value to normalize (can be any type)
+ * @returns A string, string array, or undefined
+ * @example
+ * ```ts
+ * // React Aria Selection (Set)
+ * normalizeFilterValue(new Set(['apple', 'banana'])) // ['apple', 'banana']
+ *
+ * // Arrays
+ * normalizeFilterValue(['apple', 'banana', 123]) // ['apple', 'banana', '123']
+ *
+ * // Primitives
+ * normalizeFilterValue(42) // '42'
+ * normalizeFilterValue('hello') // 'hello'
+ *
+ * // Objects
+ * normalizeFilterValue({ key: 'value' }) // '{"key":"value"}'
+ * ```
+ * @internal
+ */
+export declare function normalizeFilterValue(value: unknown): string | string[] | undefined;

package/dist/esm/components/filter-toolbar/utils/normalize-filter-value.js

@@ -0,0 +1,19 @@
+function i(r) {
+  if (r != null) {
+    if (Array.isArray(r))
+      return r.map((t) => String(t));
+    if (typeof r == "object" && Symbol.iterator in r)
+      return Array.from(r).map((t) => String(t));
+    if (r instanceof Date)
+      return r.toISOString();
+    if (typeof r == "object")
+      return JSON.stringify(r);
+    if (typeof r == "string")
+      return r;
+    if (typeof r == "number" || typeof r == "boolean")
+      return String(r);
+  }
+}
+export {
+  i as normalizeFilterValue
+};

package/dist/esm/components/flex/Flex.d.ts

@@ -0,0 +1,64 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { flex } from './Flex.variants.js';
+export type FlexContainerVariantProps = VariantProps<typeof flex>;
+type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
+export interface FlexProps {
+    /** Render the flex container as a specific HTML element */
+    asElement?: ElementType;
+    /** Create an inline flex container instead of a block-level container */
+    inline?: FlexContainerVariantProps['inline'];
+    /** Set the main axis direction. Use 'row' for horizontal or 'col' for vertical layout */
+    direction?: FlexContainerVariantProps['direction'];
+    /** Reverse the flow of items along the main axis */
+    isReversed?: FlexContainerVariantProps['isReversed'];
+    /** Control how items wrap when they exceed container size. Use 'wrap', 'wrap-reverse', or 'nowrap' */
+    wrap?: FlexContainerVariantProps['wrap'];
+    /** Add equal spacing between items in both directions */
+    gap?: FlexContainerVariantProps['gap'];
+    /** Add horizontal spacing between items */
+    gapX?: FlexContainerVariantProps['gapX'];
+    /** Add vertical spacing between items */
+    gapY?: FlexContainerVariantProps['gapY'];
+    /** Align items along the main axis. Use 'start', 'center', 'end', 'between', 'around', or 'evenly' */
+    justify?: FlexContainerVariantProps['justify'];
+    /** Align items along the cross axis. Use 'start', 'center', 'end', 'baseline', or 'stretch' */
+    align?: FlexContainerVariantProps['align'];
+    /** Align wrapped lines. Use 'start', 'center', 'end', 'between', 'around', or 'evenly' */
+    alignContent?: FlexContainerVariantProps['alignContent'];
+    /** Add custom classes to the flex container */
+    className?: string;
+    /** The content to be laid out using flexbox */
+    children?: React.ReactNode;
+}
+/**
+ * The Flex component provides a powerful and intuitive way to create flexible layouts using CSS Flexbox.
+ * Use it to create rows, columns, and complex layouts with precise control over item alignment and spacing.
+ *
+ * Key features:
+ * - Create row or column layouts with the `direction` prop
+ * - Control spacing with `gap`, `gapX`, and `gapY` props
+ * - Align items with `justify` and `align` props
+ * - Control wrapping behavior with the `wrap` prop
+ * - Reverse item order with `isReversed`
+ *
+ * Use `FlexItem` components inside `Flex` to control individual item behavior.
+ *
+ * > Note: `Flex` and `FlexItem` also export the aliases `Stack` and `StackItem`. We recommend you use `Flex` and `FlexItem` for clarity.
+ * @example
+ * ```tsx
+ * // Create a basic row layout with gap
+ * <Flex gap="100">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Flex>
+ *
+ * // Create a column layout with items centered
+ * <Flex direction="col" align="center" justify="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Flex>
+ * ```
+ */
+export declare const Flex: import('react').ForwardRefExoticComponent<FlexProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexProps> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Stack: import('react').ForwardRefExoticComponent<FlexProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexProps> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/components/flex/Flex.js

@@ -0,0 +1,57 @@
+import { jsx as E } from "react/jsx-runtime";
+import { forwardRef as M, useMemo as S } from "react";
+import { flex as b } from "./Flex.variants.js";
+const N = M(
+  ({
+    asElement: a = "div",
+    children: d,
+    className: m,
+    inline: o,
+    direction: r,
+    isReversed: e,
+    wrap: f,
+    gap: s,
+    gapX: t,
+    gapY: x,
+    justify: l,
+    align: c,
+    alignContent: F,
+    ...k
+  }, p) => {
+    const u = S(
+      () => b({
+        inline: o,
+        direction: r,
+        isReversed: e,
+        wrap: f,
+        gap: s,
+        gapX: t,
+        gapY: x,
+        justify: l,
+        align: c,
+        alignContent: F,
+        className: m
+      }),
+      [
+        c,
+        F,
+        m,
+        r,
+        s,
+        t,
+        x,
+        o,
+        e,
+        l,
+        f
+      ]
+    );
+    return /* @__PURE__ */ E(a, { ref: p, className: u, ...k, children: d });
+  }
+);
+N.displayName = "Flex";
+const v = N;
+export {
+  N as Flex,
+  v as Stack
+};