@payfit/unity-components 2.19.2 → 2.20.0

package/dist/esm/components/action-bar/parts/ActionBarButton.d.ts

@@ -0,0 +1,58 @@
+import { ButtonProps } from '../../button/Button.js';
+export type ActionBarButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'color' | 'type'> & {
+    /**
+     * The visual variant of the button.
+     * @default 'secondary'
+     */
+    variant?: 'primary' | 'secondary';
+};
+/**
+ * @deprecated Use ActionBarButtonProps instead
+ */
+export type ActionBarActionProps = ActionBarButtonProps;
+/**
+ * The ActionBarButton component represents an individual button action within an ActionBar.
+ * It renders as a button with appropriate styling for the inverted ActionBar context.
+ * @param {ActionBarButtonProps} props - Props for the button. Identical to the `Button` component props.
+ * @example
+ * ```tsx
+ * import { ActionBarButton } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ActionBarButton
+ *       variant="primary"
+ *       onPress={() => console.log('Button clicked')}
+ *       prefixIcon="TrashOutlined"
+ *     >
+ *       Delete Items
+ *     </ActionBarButton>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically uses inverted button variants to work on dark ActionBar background
+ * - Secondary buttons use 'ghost-inverted' button variant
+ * - Primary buttons use 'inverted-primary' button variant
+ * @see {@link ActionBarButtonProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ */
+declare const ActionBarButton: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "type" | "variant"> & {
+    /**
+     * The visual variant of the button.
+     * @default 'secondary'
+     */
+    variant?: "primary" | "secondary";
+} & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * @deprecated Use ActionBarButton instead
+ */
+declare const ActionBarAction: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "type" | "variant"> & {
+    /**
+     * The visual variant of the button.
+     * @default 'secondary'
+     */
+    variant?: "primary" | "secondary";
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { ActionBarButton, ActionBarAction };

package/dist/esm/components/action-bar/parts/ActionBarButton.js

@@ -0,0 +1,35 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { Button as m } from "../../button/Button.js";
+const o = s(
+  ({ variant: r = "secondary", children: n, onPress: a, ...i }, c) => {
+    const t = {
+      primary: {
+        variant: "primary",
+        color: "inverted"
+      },
+      secondary: {
+        variant: "ghost",
+        color: "inverted"
+      }
+    }[r];
+    return /* @__PURE__ */ e(
+      m,
+      {
+        ref: c,
+        variant: t.variant,
+        color: t.color,
+        onPress: a,
+        size: "default",
+        ...i,
+        children: n
+      }
+    );
+  }
+);
+o.displayName = "ActionBarButton";
+const l = o;
+export {
+  l as ActionBarAction,
+  o as ActionBarButton
+};

package/dist/esm/components/action-bar/parts/ActionBarIconButton.d.ts

@@ -0,0 +1,61 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { IconButtonProps } from '../../icon-button/IconButton.js';
+export interface ActionBarIconButtonProps {
+    /**
+     * The icon to display inside the button.
+     */
+    icon: UnityIcon;
+    /**
+     * The label for accessibility. This is used as the aria-label and shown in a tooltip.
+     */
+    label: string;
+    /**
+     * The visual variant of the button.
+     * @default 'secondary'
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * Callback fired when the button is pressed.
+     */
+    onPress?: IconButtonProps['onPress'];
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the button is in a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+}
+/**
+ * The ActionBarIconButton component represents an icon-only button action within an ActionBar.
+ * It renders as an icon button with appropriate styling for the inverted ActionBar context.
+ * @param {ActionBarIconButtonProps} props - Props for the icon button.
+ * @example
+ * ```tsx
+ * import { ActionBarIconButton } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ActionBarIconButton
+ *       icon="TrashOutlined"
+ *       label="Delete items"
+ *       variant="primary"
+ *       onPress={() => console.log('Delete clicked')}
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically uses inverted icon button variants to work on dark ActionBar background
+ * - The label prop is required for accessibility and is shown in a tooltip on hover
+ * - Secondary icon buttons are hidden on mobile viewports (overflow menu handles them)
+ * - Primary icon buttons remain visible on all screen sizes
+ * @see {@link ActionBarIconButtonProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ */
+declare const ActionBarIconButton: import('react').ForwardRefExoticComponent<ActionBarIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { ActionBarIconButton };

package/dist/esm/components/action-bar/parts/ActionBarIconButton.js

@@ -0,0 +1,41 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { IconButton as f } from "../../icon-button/IconButton.js";
+const l = m(
+  ({
+    icon: r,
+    label: t,
+    variant: n = "secondary",
+    onPress: a,
+    isDisabled: i = !1,
+    isLoading: c = !1
+  }, e) => {
+    const o = {
+      primary: {
+        variant: "primary",
+        color: "inverted"
+      },
+      secondary: {
+        variant: "ghost",
+        color: "inverted"
+      }
+    }[n];
+    return /* @__PURE__ */ s(
+      f,
+      {
+        ref: e,
+        icon: r,
+        label: t,
+        variant: o.variant,
+        color: o.color,
+        onPress: a,
+        isDisabled: i,
+        isLoading: c
+      }
+    );
+  }
+);
+l.displayName = "ActionBarIconButton";
+export {
+  l as ActionBarIconButton
+};

package/dist/esm/components/action-bar/parts/ActionBarOverflowMenu.d.ts

@@ -0,0 +1,10 @@
+import { ActionBarButtonActionItem } from '../ActionBar.types.js';
+interface ActionBarOverflowMenuProps {
+    actions: ActionBarButtonActionItem[];
+}
+/**
+ * Mobile overflow menu for non-primary actions
+ * @internal
+ */
+export declare const ActionBarOverflowMenu: ({ actions, }: ActionBarOverflowMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/action-bar/parts/ActionBarOverflowMenu.js

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useIntl as s } from "react-intl";
+import { IconButton as m } from "../../icon-button/IconButton.js";
+import { Icon as c } from "../../icon/Icon.js";
+import { Menu as a } from "../../menu/Menu.js";
+import { MenuContent as l } from "../../menu/parts/MenuContent.js";
+import { MenuTrigger as d } from "../../menu/parts/MenuTrigger.js";
+import { RawMenuItem as u } from "../../menu/parts/RawMenuItem.js";
+const v = ({
+  actions: i
+}) => {
+  const n = s();
+  return /* @__PURE__ */ e("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ t(a, { children: [
+    /* @__PURE__ */ e(d, { asChild: !0, children: /* @__PURE__ */ e(
+      m,
+      {
+        icon: "DotsThreeOutlined",
+        label: n.formatMessage({
+          id: "unity:component:action-bar:actions:more-actions",
+          defaultMessage: "More actions"
+        }),
+        variant: "ghost",
+        color: "inverted"
+      }
+    ) }),
+    /* @__PURE__ */ e(l, { children: i.map((r) => {
+      const o = r.meta;
+      return /* @__PURE__ */ e(
+        u,
+        {
+          isDisabled: o?.isDisabled,
+          onAction: () => {
+            o?.onPress?.({});
+          },
+          prefix: o?.prefixIcon ? /* @__PURE__ */ e(c, { src: o.prefixIcon, size: 20 }) : void 0,
+          children: r.label
+        },
+        r.id
+      );
+    }) })
+  ] }) });
+};
+export {
+  v as ActionBarOverflowMenu
+};

package/dist/esm/components/action-bar/parts/ActionBarPrefixArea.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+interface ActionBarPrefixAreaProps {
+    children: ReactNode;
+    ariaKeyshortcuts?: string;
+}
+/**
+ * Prefix content area with optional keyboard shortcut announcement
+ * @internal
+ */
+export declare const ActionBarPrefixArea: ({ children, ariaKeyshortcuts, }: ActionBarPrefixAreaProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/action-bar/parts/ActionBarPrefixArea.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { Group as n } from "react-aria-components";
+import { useIntl as i } from "react-intl";
+import { actionBar as c } from "../ActionBar.variants.js";
+const p = ({
+  children: r,
+  ariaKeyshortcuts: o
+}) => {
+  const t = i(), { prefixArea: e } = c();
+  return /* @__PURE__ */ a(
+    n,
+    {
+      className: e(),
+      "aria-label": t.formatMessage({
+        id: "unity:component:action-bar:group:label",
+        defaultMessage: "Toolbar information"
+      }),
+      children: [
+        r,
+        o && /* @__PURE__ */ s("span", { className: "uy:sr-only", children: t.formatMessage(
+          {
+            id: "unity:component:action-bar:key-shortcuts-text",
+            defaultMessage: "Use {keyShortcuts} to focus the action bar"
+          },
+          {
+            keyShortcuts: o
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  p as ActionBarPrefixArea
+};

package/dist/esm/components/action-bar/parts/ActionBarRoot.d.ts

@@ -4,21 +4,44 @@ export declare const actionBarRoot: import('tailwind-variants').TVReturnType<{
         true: string[];
         false: string[];
     };
+    position: {
+        absolute: string[];
+        fixed: string[];
+    };
 }, undefined, string[], {
     isVisible: {
         true: string[];
         false: string[];
     };
+    position: {
+        absolute: string[];
+        fixed: string[];
+    };
 }, undefined, import('tailwind-variants').TVReturnType<{
     isVisible: {
         true: string[];
         false: string[];
     };
+    position: {
+        absolute: string[];
+        fixed: string[];
+    };
 }, undefined, string[], unknown, unknown, undefined>>;
 export interface ActionBarRootProps extends PropsWithChildren {
     /** Offset from the bottom of the table. It uses Unity's standard spacing tokens. */
     offsetBottom?: '$25' | '$50' | '$75' | '$100' | '$125' | '$200' | '$300' | '$400' | '$500' | '$600' | '$800' | '$1000' | number;
+    /**
+     * Control the visibility of the Action bar root, which will in turn hide and show the action bar
+     * @default false
+     */
     isVisible?: boolean;
+    /**
+     * The positioning mode to use:
+     * - `absolute` will place the root at the bottom-center of the closest parent with `position: relative`
+     * - `fixed` will place the root at the bottom-center of the viewport
+     * @default "absolute"
+     */
+    position?: 'absolute' | 'fixed';
 }
 /**
  * The ActionBarRoot component provides positioning context for ActionBar components.

package/dist/esm/components/action-bar/parts/ActionBarRoot.js

@@ -1,9 +1,9 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { uyTv as y } from "@payfit/unity-themes";
-const c = y({
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+const l = c({
   base: [
-    "uy:absolute uy:left-1/2 uy:-translate-x-1/2 uy:z-10",
+    "uy:left-1/2 uy:-translate-x-1/2 uy:z-10",
     "uy:duration-200 uy:ease-out",
     "uy:bottom-[calc(var(--uy-spacing-200)+var(--uy-spacing-offset-bottom))]",
     "uy:starting:opacity-0"
@@ -18,19 +18,29 @@ const c = y({
         "uy:opacity-0",
         "uy:translate-y-10"
       ]
+    },
+    position: {
+      absolute: ["uy:absolute"],
+      fixed: ["uy:fixed"]
     }
   }
-}), p = i(
-  ({ children: o, offsetBottom: a = 0, isVisible: t = !1, ...n }, u) => {
-    const e = typeof a == "number" ? a : a.replace("$", ""), r = typeof a == "number" ? `calc(var(--uy-spacing)*${e})` : `var(--uy-spacing-${e})`;
-    return /* @__PURE__ */ s(
+}), p = y(
+  ({
+    children: o,
+    offsetBottom: a = 0,
+    isVisible: t = !1,
+    position: u = "absolute",
+    ...n
+  }, i) => {
+    const e = typeof a == "number" ? a : a.replace("$", ""), s = typeof a == "number" ? `calc(var(--uy-spacing)*${e})` : `var(--uy-spacing-${e})`;
+    return /* @__PURE__ */ r(
       "div",
       {
-        ref: u,
-        className: c({ isVisible: t }),
+        ref: i,
+        className: l({ isVisible: t, position: u }),
         ...n,
         style: {
-          "--uy-spacing-offset-bottom": r
+          "--uy-spacing-offset-bottom": s
         },
         tabIndex: -1,
         inert: t ? void 0 : "",
@@ -42,5 +52,5 @@ const c = y({
 p.displayName = "ActionBarRoot";
 export {
   p as ActionBarRoot,
-  c as actionBarRoot
+  l as actionBarRoot
 };

package/dist/esm/components/action-bar/utils/action-bar-helpers.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ActionBarActionItem, ActionBarButtonActionItem, ActionBarIconButtonActionItem } from '../ActionBar.types.js';
+/**
+ * Helper function to check if an action is an icon-button type
+ */
+export declare const isIconButtonAction: (action: ActionBarActionItem) => action is ActionBarIconButtonActionItem;
+/**
+ * Extract non-primary actions from dynamic actions array for mobile overflow
+ */
+export declare const extractMobileActionsFromArray: (actions: ActionBarActionItem[]) => ActionBarButtonActionItem[];
+/**
+ * Extract non-primary actions from static children for mobile overflow
+ */
+export declare const extractMobileActionsFromChildren: (children: ReactNode) => ActionBarButtonActionItem[];

package/dist/esm/components/action-bar/utils/action-bar-helpers.js

@@ -0,0 +1,29 @@
+import c, { isValidElement as s } from "react";
+import { ActionBarButton as p } from "../parts/ActionBarButton.js";
+import { ActionBarIconButton as n } from "../parts/ActionBarIconButton.js";
+const u = (e) => e.filter(
+  (o) => o.variant !== "primary"
+), y = (e) => {
+  const o = [];
+  return c.Children.forEach(e, (t) => {
+    if (!s(t) || t.type !== p && t.type !== n)
+      return;
+    const r = t.props;
+    if (r.variant === "primary") return;
+    const i = t.type === n ? r.label : r.children, a = t.type === n ? r.icon : r.prefixIcon;
+    o.push({
+      //eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+      id: t.key ?? r.id,
+      label: i,
+      variant: r.variant,
+      meta: {
+        onPress: r.onPress,
+        prefixIcon: a
+      }
+    });
+  }), o;
+};
+export {
+  u as extractMobileActionsFromArray,
+  y as extractMobileActionsFromChildren
+};

package/dist/esm/components/data-table/parts/DataTableBulkActions.d.ts

@@ -1,25 +1,34 @@
 import { Table as TableType } from '@tanstack/react-table';
-import { ActionBarProps } from '../../action-bar/ActionBar.js';
+import { ActionBarActionItem } from '../../action-bar/ActionBar.js';
 export interface DataTableBulkActionsProps<TData> {
     /** The table instance from @tanstack/react-table */
     table: TableType<TData>;
     /** Bulk actions to perform over the table, rendered in the action bar */
-    actions: ActionBarProps['actions'];
+    actions: ActionBarActionItem[];
+    /**
+     * Custom function to render selection count text.
+     * When provided, pluralization is your responsibility.
+     */
+    renderSelectionText?: (count: number) => string;
 }
 /**
  * The DataTableBulkActions component provides contextual bulk actions when table rows are selected.
- * It automatically shows/hides based on row selection and provides keyboard accessibility via Alt+A (Option+A on Mac).
+ * It automatically shows/hides based on row selection and provides keyboard accessibility via F6.
+ *
+ * This component wraps the ActionBar and handles the selection UI (selection count + clear button)
+ * via the `prefixContent` prop, while accepting bulk actions to display.
  * @param {DataTableBulkActionsProps} props - The props for the DataTableBulkActions component
  * @param props.table - The table instance from `@tanstack/react-table`
  * @param props.actions - Bulk actions to perform over the table, rendered in the action bar
+ * @param props.renderSelectionText - Custom function to render selection count text
  * @example
  * ```tsx
  * import { DataTableRoot, DataTable, DataTableBulkActions } from '@payfit/unity-components'
  *
  * function Example() {
  *   const actions = [
- *     { id: 'delete', label: 'Delete', onPress: handleDelete },
- *     { id: 'archive', label: 'Archive', onPress: handleArchive },
+ *     { id: 'delete', label: 'Delete', meta: { onPress: handleDelete } },
+ *     { id: 'archive', label: 'Archive', meta: { onPress: handleArchive } },
  *   ]
  *
  *   return (
@@ -45,10 +54,11 @@ export interface DataTableBulkActionsProps<TData> {
  * - The keyboard shortcut provides quick access to bulk actions for users with disabilities
  * - When triggered, focus moves to the first focusable element in the action bar (typically the first action button)
  * - The shortcut only works when rows are selected and the action bar is visible
+ * - The selection count and clear button are rendered automatically via `prefixContent`
  * @see {@link DataTableBulkActionsProps} for all available props
  * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/data-table)
  */
-declare function DataTableBulkActions<TData extends object>({ table, actions, }: DataTableBulkActionsProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+declare function DataTableBulkActions<TData extends object>({ table, actions, renderSelectionText, }: DataTableBulkActionsProps<TData>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTableBulkActions {
     var displayName: string;
 }