@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/multi-select-field/TanstackMultiSelectField.js

@@ -0,0 +1,48 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { TanstackFormFeedbackText as d } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as f } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as k } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as F } from "../form-field/TanstackFormField.js";
+import { TanstackMultiSelect as T } from "../multi-select/TanstackMultiSelect.js";
+const u = ({
+  label: r,
+  helperText: t,
+  contextualLink: m,
+  isRequired: a,
+  isDisabled: e,
+  isReadOnly: c,
+  requiredVariant: i,
+  ...l
+}, n) => /* @__PURE__ */ s(F, { children: [
+  /* @__PURE__ */ o(
+    k,
+    {
+      requiredVariant: i,
+      isRequired: a,
+      children: r
+    }
+  ),
+  t && /* @__PURE__ */ o(f, { children: t }),
+  /* @__PURE__ */ o(
+    T,
+    {
+      ref: n,
+      ...{
+        isDisabled: e,
+        isReadOnly: c
+      },
+      "aria-label": r,
+      ...l
+    }
+  ),
+  /* @__PURE__ */ o(d, {}),
+  m
+] }), x = p(
+  // @ts-expect-error - forwardRef struggles with generic components
+  u
+);
+x.displayName = "TanstackMultiSelectField";
+export {
+  x as TanstackMultiSelectField
+};

package/dist/esm/components/multi-select-field/test-utils.d.ts

@@ -0,0 +1,17 @@
+import { PlayCtx } from '../../types/testing.js';
+/**
+ * Factory to get multi-select testing utils
+ * @param context the story context
+ */
+export declare const getTestingUtilsMultiSelect: (context: PlayCtx) => {
+    selectOption: ({ labelText, optionNames, container, }: {
+        labelText: string;
+        optionNames: string[];
+        container?: HTMLElement;
+    }) => Promise<void>;
+    assertSelectedOptions: ({ labelText, expectedDisplayValue, container, }: {
+        labelText: string;
+        expectedDisplayValue: string;
+        container?: HTMLElement;
+    }) => Promise<void>;
+};

package/dist/esm/components/multi-select-field/test-utils.js

@@ -0,0 +1,45 @@
+import { within as i, expect as l, userEvent as a, screen as r } from "storybook/test";
+const y = (s) => ({ selectOption: async ({
+  labelText: t,
+  optionNames: e,
+  container: o = s.canvasElement
+}) => {
+  await s.step(
+    `Select options "${e.join(", ")}" in "${t}"`,
+    async () => {
+      const n = i(o).getByLabelText(t, {
+        exact: !1
+      });
+      if (!n)
+        throw new Error(`Multi-select not found for label ${t}`);
+      await a.click(n, { delay: 100 });
+      for (const c of e)
+        await a.click(
+          r.getByRole("option", { name: c }),
+          {
+            delay: 100
+          }
+        );
+      await a.keyboard("{Escape}", { delay: 100 });
+    }
+  );
+}, assertSelectedOptions: async ({
+  labelText: t,
+  expectedDisplayValue: e,
+  container: o = s.canvasElement
+}) => {
+  await s.step(
+    `Assert selected options "${e}" in "${t}"`,
+    async () => {
+      const n = i(o).getByLabelText(t, {
+        exact: !1
+      });
+      if (!n)
+        throw new Error(`Multi-select not found for label ${t}`);
+      await l(n).toHaveTextContent(e);
+    }
+  );
+} });
+export {
+  y as getTestingUtilsMultiSelect
+};

package/dist/esm/components/nav/parts/NavGroup.d.ts

@@ -1,9 +1,9 @@
 import { default as React, ReactNode } from 'react';
 import { DataAttributes } from '../../../types/DataAttributes.js';
-import { NavItem, NavItemProps } from './NavItem.js';
-type NavGroupChildren = React.ReactElement<NavItemProps, typeof NavItem>;
+import { NavItemProps, RawNavItem } from './RawNavItem.js';
+type NavGroupChildren = React.ReactElement<NavItemProps, typeof RawNavItem>;
 type NavGroupProps = {
-    /** The child elements to be rendered inside the NavGroup. They must be `<NavItem>` components. */
+    /** The child elements to be rendered inside the NavGroup. They must be `<RawNavItem>` components. */
     children: NavGroupChildren | NavGroupChildren[];
     /** The label to show for the NavGroup. */
     label: string;

package/dist/esm/components/nav/parts/NavGroup.js

@@ -1,12 +1,12 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import r, { useState as G, useCallback as j } from "react";
-import { uyTv as B } from "@payfit/unity-themes";
-import { Button as D } from "react-aria-components";
-import _ from "../../../hooks/use-id.js";
-import { Icon as $ } from "../../icon/Icon.js";
-import { navItemBase as k } from "./NavItem.js";
-const z = B({
-  extend: k,
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import o, { useState as j, useCallback as B, useMemo as D } from "react";
+import { uyTv as S } from "@payfit/unity-themes";
+import { Button as _ } from "react-aria-components";
+import $ from "../../../hooks/use-id.js";
+import { Icon as k } from "../../icon/Icon.js";
+import { navItemBase as z } from "./RawNavItem.js";
+const H = S({
+  extend: z,
   slots: {
     caret: "uy:transition-transform uy:duration-150 uy:delay-25 uy:ease-linear motion-reduce:transition-none",
     contentWrapper: "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none",
@@ -29,49 +29,60 @@ const z = B({
     }
   }
 });
-function H({
-  children: y,
+function M({
+  children: d,
   label: p,
-  prefix: s,
-  suffix: m,
+  prefix: l,
+  suffix: y,
   defaultExpanded: f = !1,
-  isExpanded: l,
+  isExpanded: r,
   onToggle: i,
-  ...x
+  ...N
 }) {
-  const u = _(), [h, b] = G(f), a = l !== void 0, e = a ? l : h, v = j(() => {
-    a || b((t) => !t), i?.(!e);
-  }, [a, e, i]), g = r.Children.map(y, (t) => r.isValidElement(t) ? r.cloneElement(t, { isDisabled: !e, level: 1 }) : t), c = `${u}-toggle`, d = `${u}-content`, {
-    base: N,
-    prefix: I,
-    label: E,
-    suffix: S,
-    content: w,
-    contentWrapper: C,
-    caret: W
-  } = z({ level: 0, expanded: e });
-  return /* @__PURE__ */ o("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
-    /* @__PURE__ */ o(
-      D,
+  const u = $(), [x, b] = j(f), n = r !== void 0, a = n ? r : x, C = B(() => {
+    n || b((e) => !e), i?.(!a);
+  }, [n, a, i]), h = o.Children.map(d, (e) => o.isValidElement(e) ? o.cloneElement(e, { isDisabled: !a, level: 1 }) : e), c = `${u}-toggle`, m = `${u}-content`, {
+    baseClassName: v,
+    prefixClassName: g,
+    labelClassName: I,
+    suffixClassName: W,
+    contentClassName: E,
+    contentWrapperClassName: w,
+    caretClassName: G
+  } = D(() => {
+    const e = H({ level: 0, expanded: a });
+    return {
+      baseClassName: e.base({ className: "uy:w-full" }),
+      prefixClassName: e.prefix(),
+      suffixClassName: e.suffix(),
+      labelClassName: e.label(),
+      contentWrapperClassName: e.contentWrapper(),
+      contentClassName: e.content(),
+      caretClassName: e.caret()
+    };
+  }, [a]);
+  return /* @__PURE__ */ s("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+    /* @__PURE__ */ s(
+      _,
       {
         id: c,
-        className: N({ className: "uy:w-full" }),
-        onPress: v,
-        "aria-expanded": e,
-        "aria-controls": d,
-        ...x,
+        className: v,
+        onPress: C,
+        "aria-expanded": a,
+        "aria-controls": m,
+        ...N,
         children: [
-          s && /* @__PURE__ */ n("span", { className: I(), children: s({ isExpanded: e }) }),
-          /* @__PURE__ */ n("span", { className: E(), children: p }),
-          /* @__PURE__ */ o("span", { className: S(), role: "presentation", children: [
-            m,
-            /* @__PURE__ */ n(
-              $,
+          l && /* @__PURE__ */ t("span", { className: g, children: l({ isExpanded: a }) }),
+          /* @__PURE__ */ t("span", { className: I, children: p }),
+          /* @__PURE__ */ s("span", { className: W, role: "presentation", children: [
+            y,
+            /* @__PURE__ */ t(
+              k,
               {
                 src: "CaretDownOutlined",
                 alt: "expand group",
                 size: 20,
-                className: W(),
+                className: G,
                 color: "inherit"
               }
             )
@@ -79,26 +90,26 @@ function H({
         ]
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "div",
       {
-        className: C(),
-        style: { maxHeight: e ? 1e3 : 0 },
-        children: /* @__PURE__ */ n(
+        className: w,
+        style: { maxHeight: a ? 1e3 : 0 },
+        children: /* @__PURE__ */ t(
           "ul",
           {
-            id: d,
-            className: w(),
+            id: m,
+            className: E,
             "aria-labelledby": c,
-            "aria-hidden": !e,
-            children: g
+            "aria-hidden": !a,
+            children: h
           }
         )
       }
     )
   ] });
 }
-H.displayName = "NavGroup";
+M.displayName = "NavGroup";
 export {
-  H as NavGroup
+  M as NavGroup
 };

package/dist/esm/components/nav/parts/{NavItem.d.ts → RawNavItem.d.ts}

@@ -155,10 +155,107 @@ export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWi
     isExact?: boolean;
 }> & DataAttributes;
 /**
- * The `NavItem` component represents a single, fully accessible navigation item in a `Nav` component, with support for custom elements at the start or the end of the element. It can render a link or a button depending on the provided properties.
+ * The `RawNavItem` component represents a single, fully accessible navigation item in a `Nav` component, with support for custom elements at the start or the end of the element. It can render a link or a button depending on the provided properties.
  */
-export declare function NavItem({ children, level, prefix, suffix, onPress, href, isCurrent, isDisabled, isExact, ...dataAttributes }: NavItemProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace NavItem {
-    var displayName: string;
-}
+export declare const RawNavItem: import('react').ForwardRefExoticComponent<Pick<VariantProps<import('tailwind-variants').TVReturnType<{
+    isActive: {
+        true: {
+            base: string;
+            prefix: string;
+            label: string;
+        };
+        false: {
+            base: string;
+            prefix: string;
+            label: string;
+        };
+    };
+}, undefined, undefined, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, undefined, {
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        0: string;
+        1: string;
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            label: string;
+        };
+        false: string;
+    };
+}, {
+    base: string[];
+    prefix: string;
+    suffix: string;
+    label: string[];
+}, undefined, unknown, unknown, undefined>>>>, "level"> & {
+    /** The prefix element to be displayed before the label. */
+    prefix?: ({ isCurrent }: {
+        isCurrent: boolean;
+    }) => ReactNode;
+    /** The suffix element to be displayed after the label. */
+    suffix?: ReactNode;
+    /** The click event handler for the nav item. Use it when the item executes an action that  does not redirect to another page */
+    onPress?: AriaButtonProps["onPress"];
+    /** The URL to navigate to when the nav item is clicked. Use it when the item should trigger a navigation to another page */
+    href?: string;
+    /** Whether the nav item is currently active. */
+    isCurrent?: boolean;
+    /** Whether the nav item is disabled. */
+    isDisabled?: boolean;
+    /** Whether the nav item should exactly match the route's path. */
+    isExact?: boolean;
+} & {
+    children?: ReactNode | undefined;
+} & DataAttributes & import('react').RefAttributes<HTMLElement>>;
 export {};

package/dist/esm/components/nav/parts/RawNavItem.js

@@ -0,0 +1,106 @@
+import { jsx as u, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as C, useMemo as I } from "react";
+import { uyTv as i, uyMerge as j } from "@payfit/unity-themes";
+import { Link as R, Button as A } from "react-aria-components";
+import { useRouter as k } from "../../../providers/router/RouterProvider.js";
+const B = i({
+  slots: {
+    base: [
+      "uy:group uy:cursor-pointer uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:rounded-75 uy:outline-0 uy:transition-all",
+      "uy:hover:bg-surface-neutral-low-hover uy:active:bg-surface-neutral-low-active uy:data-[pressed]:bg-surface-neutral-low-pressed",
+      "uy:focus:outline-0 uy:data-[focus-visible]:outline-none uy:data-[focus-visible]:ring-2 uy:data-[focus-visible]:ring-utility-focus-ring uy:data-[focus-visible]:ring-offset-2"
+    ],
+    prefix: "uy:p-25 uy:empty:hidden uy:text-content-neutral-low",
+    suffix: "uy:flex uy:gap-100 uy:items-center uy:text-content-neutral-low uy:justify-self-end uy:text-right uy:empty:hidden",
+    label: [
+      "uy:flex-1 uy:basis-full uy:text-left uy:truncate uy:overflow-hidden uy:whitespace-break-spaces uy:typography-body uy:text-content-neutral"
+    ]
+  },
+  variants: {
+    level: {
+      0: "uy:pl-150",
+      1: "uy:pl-600"
+    },
+    isDisabled: {
+      true: {
+        base: "uy:pointer-events-none",
+        label: "uy:text-content-neutral-disabled"
+      },
+      false: ""
+    }
+  }
+}), M = i({
+  extend: B,
+  variants: {
+    isActive: {
+      true: {
+        base: "uy:bg-surface-neutral-low-active",
+        prefix: "uy:text-content-neutral",
+        label: "uy:typography-body-strong"
+      },
+      false: {
+        base: "",
+        prefix: "uy:text-content-neutral-low",
+        label: "uy:typography-body"
+      }
+    }
+  }
+}), _ = C(
+  ({
+    children: y,
+    level: r = 0,
+    prefix: l,
+    suffix: n,
+    onPress: c,
+    href: t,
+    isCurrent: f,
+    isDisabled: s = !1,
+    isExact: p = !1,
+    ...m
+  }, d) => {
+    const o = k(), b = t ? R : A, e = o && t ? o.isActive(t, p) : f, {
+      rawNavItemClassName: v,
+      labelClassName: x,
+      prefixClassName: g,
+      suffixClassName: N
+    } = I(() => {
+      const a = M({ level: r, isActive: e, isDisabled: s });
+      return {
+        rawNavItemClassName: j(a.base(), a.label()),
+        prefixClassName: a.prefix(),
+        suffixClassName: a.suffix(),
+        labelClassName: a.label()
+      };
+    }, [e, s, r]), w = Object.assign(
+      {},
+      e !== void 0 && {
+        "data-current": e,
+        "aria-current": e ? "page" : void 0
+      },
+      !t && { tabIndex: s ? -1 : void 0 }
+    );
+    return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ h(
+      b,
+      {
+        ...w,
+        ...m,
+        ref: d,
+        className: v,
+        href: t,
+        onPress: c,
+        isDisabled: s,
+        "data-level": r,
+        children: [
+          l && /* @__PURE__ */ u("span", { className: g, children: l({ isCurrent: e ?? !1 }) }),
+          /* @__PURE__ */ u("span", { className: x, children: y }),
+          n && /* @__PURE__ */ u("span", { className: N, children: n })
+        ]
+      }
+    ) });
+  }
+);
+_.displayName = "RawNavItem";
+export {
+  _ as RawNavItem,
+  B as navItemBase
+};

package/dist/esm/components/navigation-card/NavigationCard.context.d.ts

@@ -0,0 +1,31 @@
+export interface NavigationCardContextValue {
+    id: string;
+    labelId: string;
+    descriptionId: string;
+}
+export declare const NavigationCardContext: import('react').Context<NavigationCardContextValue>;
+/**
+ * Accesses the NavigationCard context to retrieve accessibility IDs for proper ARIA relationships.
+ * Use this hook when building custom subcomponents that need to connect to the parent NavigationCard's accessibility structure.
+ * @returns {NavigationCardContextValue} An object containing id, labelId, and descriptionId for ARIA attributes
+ * @example
+ * ```tsx
+ * import { useNavigationCardContext } from '@payfit/unity-components'
+ *
+ * function CustomNavigationCardContent() {
+ *   const { labelId, descriptionId } = useNavigationCardContext()
+ *   return (
+ *     <div>
+ *       <span id={labelId}>Custom Label</span>
+ *       <span id={descriptionId}>Custom Description</span>
+ *     </div>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - This hook must be called within a NavigationCard component
+ * - The context provides unique IDs for accessibility attributes
+ * - Use the provided IDs to maintain proper ARIA labeling relationships
+ * @see {@link NavigationCardContextValue} for the returned value structure
+ */
+export declare function useNavigationCardContext(): NavigationCardContextValue;

package/dist/esm/components/navigation-card/NavigationCard.context.js

@@ -0,0 +1,13 @@
+import { createContext as t, useContext as e } from "react";
+const o = t({
+  id: "",
+  labelId: "",
+  descriptionId: ""
+});
+function i() {
+  return e(o);
+}
+export {
+  o as NavigationCardContext,
+  i as useNavigationCardContext
+};

package/dist/esm/components/navigation-card/NavigationCard.d.ts

@@ -0,0 +1,46 @@
+import { NavigationCardProps } from './NavigationCard.types.js';
+/**
+ * The NavigationCard is a clickable card component for navigating between sections or pages in your application.
+ * Use navigation cards to create intuitive and appealing navigation patterns that guide users through different areas of your app.
+ * The component supports both link and button behaviors, and can be customized with flexible spacing options.
+ * @param {NavigationCardProps} props - Props including standard link/button props, padding, gap, prefix, and suffix
+ * @example
+ * ```tsx
+ * import {
+ *   RawNavigationCard,
+ *   NavigationCardLabel,
+ *   NavigationCardDescription
+ * } from '@payfit/unity-components'
+ * import { Icon } from '@payfit/unity-icons'
+ *
+ * function Example() {
+ *   return (
+ *     <RawNavigationCard
+ *       href="/dashboard"
+ *       prefix={<Icon name="dashboard" />}
+ *     >
+ *       <NavigationCardLabel>Dashboard</NavigationCardLabel>
+ *       <NavigationCardDescription>
+ *         View your company overview
+ *       </NavigationCardDescription>
+ *     </RawNavigationCard>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use `asElement="a"` (default) for navigation links or `asElement="button"` for actions
+ * - Control spacing with `padding` (all sides), `paddingBlock` (vertical), `paddingInline` (horizontal), or individual sides via object notation
+ * - Adjust gap between prefix, body, and suffix with the `gap` prop
+ * - Default spacing values: `padding="$300"` (24px) and `gap="$150"` (12px)
+ * - Compose with `NavigationCardLabel` and `NavigationCardDescription` for proper accessibility
+ * - The component automatically handles focus states, hover effects, and disabled styling
+ * - For Tanstack Router integration, use the `NavigationCard` from `@payfit/unity-components/integrations/tanstack-router`
+ * @see {@link NavigationCardProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/navigation-card GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=14505-64292 Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/navigation-navigationcard--docs unity-components.payfit.io}
+ */
+declare const RawNavigationCard: import('react').ForwardRefExoticComponent<NavigationCardProps & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { RawNavigationCard };
+export type { NavigationCardProps } from './NavigationCard.types.js';

package/dist/esm/components/navigation-card/NavigationCard.js

@@ -0,0 +1,62 @@
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as C, useMemo as P } from "react";
+import { useId as $ } from "react-aria";
+import { Link as w, Button as I } from "react-aria-components";
+import { processPaddingProp as R } from "../../utils/spacing.js";
+import { NavigationCardContext as j } from "./NavigationCard.context.js";
+import { navigationCard as L } from "./NavigationCard.variants.js";
+const k = C(
+  ({
+    children: m,
+    asElement: f = "a",
+    prefix: t,
+    suffix: d,
+    padding: o = "$300",
+    paddingBlock: n,
+    paddingInline: s,
+    gap: c = "$150",
+    ...i
+  }, b) => {
+    const e = $(), l = f === "a" || "href" in i, v = i, a = {
+      id: `unity-navigation-card-${e}`,
+      labelId: i["aria-labelledby"] ?? `unity-navigation-card-label-${e}`,
+      descriptionId: i["aria-describedby"] ?? `unity-navigation-card-description-${e}`
+    }, {
+      base: y,
+      prefix: u,
+      body: p,
+      suffix: x
+    } = P(() => {
+      const g = R(
+        o,
+        n,
+        s
+      );
+      return L({
+        ...g,
+        gap: c
+      });
+    }, [o, n, s, c]), N = l ? w : I;
+    return /* @__PURE__ */ r(j.Provider, { value: a, children: /* @__PURE__ */ h(
+      N,
+      {
+        "data-dd-privacy": "allow",
+        id: a.id,
+        "aria-labelledby": a.labelId,
+        "aria-describedby": a.descriptionId,
+        ...v,
+        ref: b,
+        className: y(),
+        children: [
+          t && /* @__PURE__ */ r("div", { className: u(), children: t }),
+          /* @__PURE__ */ r("div", { className: p(), children: m }),
+          d && /* @__PURE__ */ r("div", { className: x(), children: d })
+        ]
+      }
+    ) });
+  }
+);
+k.displayName = "RawNavigationCard";
+export {
+  k as RawNavigationCard
+};