@payfit/unity-components 2.46.12 → 2.46.13

package/dist/esm/components/table/parts/TableCell.js

@@ -1,62 +0,0 @@
-import { jsx as C } from "react/jsx-runtime";
-import { memo as v, forwardRef as g, useMemo as T } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { useTableContext as k } from "../Table.context.js";
-const D = w({
-  base: [
-    "uy:px-200 uy:py-150 uy:text-content-neutral uy:typography-body",
-    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
-  ],
-  variants: {
-    align: {
-      left: "uy:text-left",
-      center: "uy:text-center",
-      right: "uy:text-right"
-    }
-  }
-}), K = v(
-  g(
-    ({
-      children: s,
-      colIndex: t = 0,
-      rowIndex: u = 0,
-      align: o,
-      onKeyDown: i,
-      onFocus: r,
-      className: l,
-      isRowHeader: a = !1,
-      isFocusable: n = !0,
-      ...y
-    }, c) => {
-      const { keyboardNavigation: f } = k(), { isCellFocused: b, handleCellKeyDown: d, handleCellFocus: m } = f, p = T(
-        () => D({ align: o, className: l }),
-        [o, l]
-      ), x = n && b(u, t), h = (e) => {
-        e.key !== "Tab" && (d(e), i?.(e));
-      };
-      return /* @__PURE__ */ C(
-        a ? "th" : "td",
-        {
-          ref: c,
-          role: a ? "rowheader" : "gridcell",
-          "aria-colindex": t + 1,
-          tabIndex: x ? 0 : -1,
-          "data-focusable": n,
-          className: p,
-          onKeyDown: h,
-          onFocus: (e) => {
-            m(e), r?.(e);
-          },
-          "data-dd-privacy": "mask",
-          ...y,
-          children: s
-        }
-      );
-    }
-  )
-);
-K.displayName = "TableCell";
-export {
-  K as TableCell,
-  D as tableCell
-};

package/dist/esm/components/table/parts/TableColumnHeader.d.ts

@@ -1,66 +0,0 @@
-import { default as React } from 'react';
-import { ActionableProps } from '../../actionable/Actionable.js';
-type BaseTableColumnHeaderProps = {
-    colIndex?: number;
-    rowIndex?: number;
-    align?: 'left' | 'center' | 'right';
-    isFocusable?: boolean;
-};
-type StaticTableColumnHeaderProps = BaseTableColumnHeaderProps & React.ThHTMLAttributes<HTMLTableCellElement>;
-type InteractiveTableColumnHeaderProps = BaseTableColumnHeaderProps & ActionableProps;
-export type TableColumnHeaderProps = (StaticTableColumnHeaderProps & {
-    onPress?: never;
-}) | InteractiveTableColumnHeaderProps;
-export declare const tableColumnHeader: import('tailwind-variants').TVReturnType<{
-    align: {
-        left: string;
-        center: string;
-        right: string;
-    };
-}, undefined, string[], {
-    align: {
-        left: string;
-        center: string;
-        right: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    align: {
-        left: string;
-        center: string;
-        right: string;
-    };
-}, undefined, string[], unknown, unknown, undefined>>;
-/**
- * The `TableColumnHeader` component renders a header cell in the table's header row.
- * It can be either static or interactive (clickable) and supports text alignment.
- * @param {TableColumnHeaderProps} props - The props for the `TableColumnHeader` component
- * @param {ReactNode} props.children - The content to render in the header cell
- * @param {number} [props.colIndex=0] - The index of the column (automatically set by TableHeader)
- * @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableHeader)
- * @param {'left' | 'center' | 'right'} [props.align] - The text alignment within the header cell
- * @param {Function} [props.onPress] - Optional callback for when the header is clicked (makes the header interactive)
- * @example
- * ```tsx
- * import { TableColumnHeader } from '@payfit/unity-components'
- *
- * <TableColumnHeader>Name</TableColumnHeader>
- * ```
- * @example
- * ```tsx
- * // Interactive header with center alignment
- * import { TableColumnHeader } from '@payfit/unity-components'
- *
- * <TableColumnHeader
- *   align="center"
- *   onPress={() => console.log('Header clicked')}
- * >
- *   Department
- * </TableColumnHeader>
- * ```
- * @see {@link TableColumnHeaderProps} for all available props
- * @remarks
- * {@link https://unity-components.payfit.io/?path=/story/data-table-tablecolumnheader--docs|API and Demos} •
- * {@link https://payfit.design|Design docs}
- */
-declare const TableColumnHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<TableColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>>>;
-export { TableColumnHeader };

package/dist/esm/components/table/parts/TableColumnHeader.js

@@ -1,78 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { memo as x, forwardRef as g } from "react";
-import { uyTv as w } from "@payfit/unity-themes";
-import { Actionable as C } from "../../actionable/Actionable.js";
-import { useTableContext as T } from "../Table.context.js";
-const d = w({
-  base: [
-    "uy:align-middle uy:leading-[1.00]",
-    "uy:px-200 uy:py-100 uy:typography-action uy:text-content-neutral",
-    "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
-    "uy:hover:bg-surface-neutral-hover"
-  ],
-  variants: {
-    align: {
-      left: "uy:text-left",
-      center: "uy:text-center",
-      right: "uy:text-right"
-    }
-  }
-}), D = x(
-  g(
-    ({
-      children: r,
-      colIndex: t = 0,
-      rowIndex: m = 0,
-      align: l,
-      onKeyDown: f,
-      onFocus: i,
-      className: u,
-      isFocusable: o = !0,
-      ...a
-    }, s) => {
-      const { keyboardNavigation: b } = T(), { isCellFocused: h, handleCellKeyDown: v, handleCellFocus: c } = b, p = o && h(m, t), y = (e) => {
-        e.key !== "Tab" && (v(e), f?.(
-          e
-        ));
-      };
-      return "onPress" in a ? /* @__PURE__ */ n(
-        "th",
-        {
-          ref: s,
-          role: "columnheader",
-          "aria-colindex": t + 1,
-          "data-focusable": o,
-          className: d({ align: l, className: u }),
-          "data-dd-privacy": "allow",
-          onKeyDown: y,
-          onFocus: (e) => {
-            c(e), i?.(e);
-          },
-          children: /* @__PURE__ */ n(C, { ...a, children: r })
-        }
-      ) : /* @__PURE__ */ n(
-        "th",
-        {
-          ref: s,
-          role: "columnheader",
-          "aria-colindex": t + 1,
-          tabIndex: p ? 0 : -1,
-          "data-focusable": o,
-          className: d({ align: l, className: u }),
-          onKeyDown: y,
-          onFocus: (e) => {
-            c(e), i?.(e);
-          },
-          "data-dd-privacy": "allow",
-          ...a,
-          children: r
-        }
-      );
-    }
-  )
-);
-D.displayName = "TableColumnHeader";
-export {
-  D as TableColumnHeader,
-  d as tableColumnHeader
-};

package/dist/esm/components/table/parts/TableEmptyState.d.ts

@@ -1,187 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren, ReactNode } from 'react';
-export declare const tableEmptyState: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string;
-    wrapper: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string;
-    wrapper: string;
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string;
-    wrapper: string;
-}, undefined, unknown, unknown, undefined>>;
-export type TableEmptyStateProps = PropsWithChildren<VariantProps<typeof tableEmptyState>> & {
-    className?: string;
-};
-export interface TableEmptyStateTextProps extends PropsWithChildren {
-    /**
-     * The text's variant. It can be one of two options:
-     * - `title` renders an `h6` element with `bodyStrong` style
-     * - `description` renders a `p` element with `body` style
-     */
-    variant: 'title' | 'description';
-}
-/**
- * The `TableEmptyStateText` component provides styled text elements for empty state messages.
- * Use this component to create consistent text hierarchies within empty states, with support for titles and descriptions.
- * @param {TableEmptyStateTextProps} props - The props for the `TableEmptyStateText` component
- * @see {TableEmptyStateTextProps} for all available props
- * @example
- * ```tsx
- * import { TableEmptyStateText } from '@payfit/unity-components'
- *
- * <TableEmptyStateText variant="title">No results found</TableEmptyStateText>
- * <TableEmptyStateText variant="description">Try adjusting your search filters</TableEmptyStateText>
- * ```
- * @remarks
- * [API](https://unity-components.payfit.io/?path=/story/data-table-tableemptystate--docs) • [Design docs]()
- */
-declare const TableEmptyStateText: import('react').ForwardRefExoticComponent<TableEmptyStateTextProps & import('react').RefAttributes<HTMLElement>>;
-/**
- * The `TableEmptyState` component provides a standardized way to display empty states in tables when there's no data to show.
- * Use this component to improve user experience by providing clear feedback and guidance when a table has no content.
- * @param {TableEmptyStateProps} props - The props for the `TableEmptyState` component
- * @see {@link TableEmptyStateProps} for all available props
- * @example
- * ```tsx
- * import { TableEmptyState } from '@payfit/unity-components'
- *
- * <TableEmptyState>
- *   <img src="/images/empty-state.svg" alt="No data" />
- *   <TableEmptyStateText>No data available</TableEmptyStateText>
- * </TableEmptyState>
- * ```
- * @remarks
- * {@link https://unity-components.payfit.io/?path=/story/data-table-tableemptystate--docs|API and Demos} • {@link https://payfit.design|Design docs}
- */
-declare const TableEmptyState: import('react').ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string;
-    wrapper: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string;
-    wrapper: string;
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string;
-    wrapper: string;
-}, undefined, unknown, unknown, undefined>>> & {
-    children?: ReactNode | undefined;
-} & {
-    className?: string;
-} & import('react').RefAttributes<HTMLDivElement>>;
-/**
- * A pre-configured loading state for tables.
- * Use this component to indicate that data is being loaded.
- * @see {TableEmptyState}
- * @example
- * ```tsx
- * import { TableEmptyStateLoading } from '@payfit/unity-components'
- *
- * <TableBody renderEmptyState={() => <TableEmptyStateLoading />}>{[]}</TableBody>
- * ```
- */
-declare const TableEmptyStateLoading: () => import("react/jsx-runtime").JSX.Element;
-/**
- * A pre-configured empty state for tables with no data.
- * Use this component to indicate that no results were found and provide guidance on how to adjust search or filters.
- * @param props - The component props
- * @param props.description - The description text to display explaining why there's no data
- * @param props.onButtonPress - Optional callback fired when the "Enable settings" button is clicked. If not provided, the button won't be rendered.
- * @see {TableEmptyState}
- * @example
- * ```tsx
- * import { TableEmptyStateNoData } from '@payfit/unity-components'
- *
- * // Without button
- * <TableBody renderEmptyState={() => <TableEmptyStateNoData description="No data available" />}>{[]}</TableBody>
- *
- * // With "Enable settings" button
- * <TableBody renderEmptyState={() => <TableEmptyStateNoData description="No data available" onButtonPress={() => console.log('Enable settings')} />}>{[]}</TableBody>
- * ```
- */
-declare const TableEmptyStateNoData: ({ description, onButtonPress, }: {
-    description: ReactNode;
-    onButtonPress?: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
-/**
- * A pre-configured error state for tables.
- * Use this component to indicate that an error occurred while loading data and provide guidance on how to resolve it.
- * @param props - The component props
- * @param props.onButtonPress - Optional callback fired when the "Go to dashboard" button is clicked. If not provided, the button won't be rendered.
- * @see {TableEmptyState}
- * @example
- * ```tsx
- * import { TableEmptyStateError } from '@payfit/unity-components'
- *
- * // Without button
- * <TableBody renderEmptyState={() => <TableEmptyStateError />}>{[]}</TableBody>
- *
- * // With "Go to dashboard" button
- * <TableBody renderEmptyState={() => <TableEmptyStateError onButtonPress={() => navigate('/dashboard')} />}>{[]}</TableBody>
- * ```
- */
-declare const TableEmptyStateError: ({ onButtonPress, }: {
-    onButtonPress?: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
-/**
- * A pre-configured empty state for tables when no search results are found.
- * Use this component to indicate that the current filters or search didn't return any results.
- * @param props - The component props
- * @param props.onButtonPress - Optional callback fired when the "Reset filters" button is clicked. If not provided, the button won't be rendered.
- * @see {TableEmptyState}
- * @example
- * ```tsx
- * import { TableNoSearchResults } from '@payfit/unity-components'
- *
- * // Without button
- * <TableBody renderEmptyState={() => <TableNoSearchResults />}>{[]}</TableBody>
- *
- * // With "Reset filters" button
- * <TableBody renderEmptyState={() => <TableNoSearchResults onButtonPress={() => clearFilters()} />}>{[]}</TableBody>
- * ```
- */
-declare const TableNoSearchResults: ({ onButtonPress, }: {
-    onButtonPress?: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export { TableEmptyState, TableEmptyStateText, TableEmptyStateLoading, TableEmptyStateNoData, TableEmptyStateError, TableNoSearchResults, };

package/dist/esm/components/table/parts/TableEmptyState.js

@@ -1,161 +0,0 @@
-import { jsx as t, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as f, useMemo as d } from "react";
-import { uyTv as g } from "@payfit/unity-themes";
-import { useIntl as b, FormattedMessage as a } from "react-intl";
-import { Button as c } from "../../button/Button.js";
-import { EmptyState as m } from "../../empty-state/EmptyState.js";
-import { EmptyStateActions as u } from "../../empty-state/parts/EmptyStateActions.js";
-import { EmptyStateContent as p } from "../../empty-state/parts/EmptyStateContent.js";
-import { EmptyStateIcon as y } from "../../empty-state/parts/EmptyStateIcon.js";
-import { Spinner as x } from "../../spinner/Spinner.js";
-import { Text as v } from "../../text/Text.js";
-const w = g({
-  slots: {
-    base: "uy:flex uy:flex-col uy:items-center uy:justify-center",
-    wrapper: "uy:max-w-[300px] uy:flex uy:flex-col uy:items-center uy:py-800"
-  }
-}), E = f(
-  (e, n) => {
-    const { variant: r, children: i } = e, s = d(() => {
-      switch (r) {
-        case "title":
-          return "bodyStrong";
-        case "description":
-        default:
-          return "body";
-      }
-    }, [r]), o = d(() => {
-      switch (r) {
-        case "title":
-          return "h6";
-        case "description":
-        default:
-          return "p";
-      }
-    }, [r]);
-    return /* @__PURE__ */ t(
-      v,
-      {
-        variant: s,
-        asElement: o,
-        ref: n,
-        className: "uy:text-center",
-        children: i
-      }
-    );
-  }
-);
-E.displayName = "TableEmptyStateText";
-const h = f(
-  ({ children: e, className: n, ...r }, i) => {
-    const { base: s, wrapper: o } = w();
-    return /* @__PURE__ */ t("div", { "data-dd-privacy": "allow", ...r, ref: i, className: s(), children: /* @__PURE__ */ t("div", { className: o({ className: n }), children: e }) });
-  }
-);
-h.displayName = "TableEmptyState";
-const G = () => {
-  const e = b();
-  return /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
-    x,
-    {
-      size: "medium",
-      label: e.formatMessage({
-        id: "unity:component:table:empty-state:loading:title"
-      })
-    }
-  ) });
-}, q = ({
-  description: e,
-  onButtonPress: n
-}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
-  /* @__PURE__ */ t(y, { icon: "InfoOutlined", variant: "neutral" }),
-  /* @__PURE__ */ t(
-    p,
-    {
-      title: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:empty-state:waiting-for-data:title",
-          defaultMessage: "No available results yet"
-        }
-      ),
-      description: e
-    }
-  ),
-  n && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: n, children: /* @__PURE__ */ t(
-    a,
-    {
-      id: "unity:component:empty-state:waiting-for-data:button-label",
-      defaultMessage: "Enable settings"
-    }
-  ) }) })
-] }), z = ({
-  onButtonPress: e
-}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
-  /* @__PURE__ */ t(y, { icon: "WarningCircleOutlined", variant: "neutral" }),
-  /* @__PURE__ */ t(
-    p,
-    {
-      title: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:error-state:common:main-title",
-          defaultMessage: "Something went wrong"
-        }
-      ),
-      description: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:error-state:common:main-description-component",
-          defaultMessage: "Please refresh the page or check your connection. We’ve been notified of the issue and are working to resolve it as quickly as possible."
-        }
-      )
-    }
-  ),
-  e && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: e, children: /* @__PURE__ */ t(
-    a,
-    {
-      id: "unity:component:error-state:button:label",
-      defaultMessage: "Go to dashboard"
-    }
-  ) }) })
-] }), A = ({
-  onButtonPress: e
-}) => /* @__PURE__ */ l(m, { className: "uy:max-w-[524px] uy:h-[400px] uy:justify-self-center uy:p-300", children: [
-  /* @__PURE__ */ t(y, { icon: "MagnifyingGlassOutlined", variant: "neutral" }),
-  /* @__PURE__ */ t(
-    p,
-    {
-      title: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:empty-state:no-search-results:title",
-          defaultMessage: "We didn't find any results"
-        }
-      ),
-      description: /* @__PURE__ */ t(
-        a,
-        {
-          id: "unity:component:empty-state:no-search-results:description",
-          defaultMessage: "Try adjusting your search or filters to find what you're looking for."
-        }
-      )
-    }
-  ),
-  e && /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(c, { variant: "ghost", onPress: e, children: /* @__PURE__ */ t(
-    a,
-    {
-      id: "unity:component:empty-state:no-search-results:button-label",
-      defaultMessage: "Reset filters"
-    }
-  ) }) })
-] });
-export {
-  h as TableEmptyState,
-  z as TableEmptyStateError,
-  G as TableEmptyStateLoading,
-  q as TableEmptyStateNoData,
-  E as TableEmptyStateText,
-  A as TableNoSearchResults,
-  w as tableEmptyState
-};

package/dist/esm/components/table/parts/TableHeader.d.ts

@@ -1,29 +0,0 @@
-import { default as React, PropsWithChildren } from 'react';
-import { VariantProps } from '@payfit/unity-themes';
-export declare const tableHeader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
-export type TableHeaderProps = PropsWithChildren<VariantProps<typeof tableHeader>>;
-/**
- * The `TableHeader` component renders the header section of a table, containing column headers.
- * It automatically processes its children to add row indices and applies appropriate styling.
- * @param {TableHeaderProps} props - The props for the `TableHeader` component
- * @param {ReactNode} props.children - The column headers to render (typically TableColumnHeader components)
- * @example
- * ```tsx
- * import { TableHeader, TableColumnHeader } from '@payfit/unity-components'
- *
- * <TableHeader>
- *   <TableColumnHeader>Name</TableColumnHeader>
- *   <TableColumnHeader>Email</TableColumnHeader>
- *   <TableColumnHeader>Department</TableColumnHeader>
- * </TableHeader>
- * ```
- * @see {@link TableHeaderProps} for all available props
- * @see {@link TableColumnHeader} for the column header component
- * @remarks
- * {@link https://unity-components.payfit.io/?path=/story/data-table-tableheader--docs|API and Demos} •
- * {@link https://payfit.design|Design docs}
- */
-declare const TableHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<VariantProps<import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>> & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLTableSectionElement>>>;
-export { TableHeader };

package/dist/esm/components/table/parts/TableHeader.js

@@ -1,37 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import r, { memo as l, forwardRef as s, useMemo as y } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-const b = m({
-  base: [
-    "uy:h-500 uy:bg-surface-neutral-low uy:rounded-tl-100 uy:rounded-tr-100 uy:overflow-hidden",
-    "uy:sticky uy:top-0 uy:z-[1]",
-    "uy:[&_tr]:border-b uy:[&_tr]:border-solid uy:[&_tr]:border-b-border-neutral-enabled"
-  ]
-}), i = l(
-  s(
-    ({ children: o, ...a }, d) => {
-      const u = y(() => r.Children.map(o, (e, n) => r.isValidElement(e) ? r.cloneElement(
-        e,
-        {
-          rowIndex: n,
-          ...e.props
-        }
-      ) : e), [o]);
-      return /* @__PURE__ */ t(
-        "thead",
-        {
-          ref: d,
-          className: b(),
-          "data-dd-privacy": "allow",
-          ...a,
-          children: /* @__PURE__ */ t("tr", { children: u })
-        }
-      );
-    }
-  )
-);
-i.displayName = "TableHeader";
-export {
-  i as TableHeader,
-  b as tableHeader
-};