@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,72 @@
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { uyTv as I } from "@payfit/unity-themes";
+import { useFormContext as P } from "react-hook-form";
+import { FormField as T } from "../form-field/FormField.js";
+import { FormControl as k } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as M } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as B } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as L } from "../form-field/parts/FormLabel.js";
+import { MultiSelect as R } from "../multi-select/MultiSelect.js";
+const g = I({
+  base: "uy:flex uy:flex-col uy:gap-100"
+});
+function j(e, a) {
+  const { control: m, setValue: s } = P(), {
+    name: l,
+    label: c,
+    helperText: t,
+    feedbackText: d,
+    contextualLink: u,
+    isRequired: f,
+    isInvalid: p,
+    isLoading: o,
+    isDisabled: i,
+    isReadOnly: n,
+    requiredVariant: x,
+    children: F,
+    onClearButtonPress: b,
+    ...h
+  } = e, S = {
+    isRequired: f,
+    isInvalid: p,
+    isLoading: o,
+    isDisabled: i,
+    isReadOnly: n
+  }, V = {
+    onClearButtonPress: () => {
+      s(l, /* @__PURE__ */ new Set()), b?.();
+    },
+    placeholder: e.placeholder,
+    isSearchable: e.isSearchable,
+    maxVisibleItems: e.maxVisibleItems,
+    isDisabled: i,
+    isReadOnly: n,
+    isLoading: o,
+    ...e.renderValue && { renderValue: e.renderValue }
+  };
+  return /* @__PURE__ */ y(
+    T,
+    {
+      control: m,
+      name: l,
+      className: g(),
+      ...S,
+      children: [
+        /* @__PURE__ */ r(L, { requiredVariant: x, children: c }),
+        t && /* @__PURE__ */ r(B, { children: t }),
+        /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(R, { ...h, ...V, ref: a, children: F }) }),
+        /* @__PURE__ */ r(M, { children: d }),
+        u
+      ]
+    }
+  );
+}
+const q = (
+  // @ts-expect-error - forwardRef struggles with generic components
+  C(j)
+);
+q.displayName = "MultiSelectField";
+export {
+  q as MultiSelectField
+};

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

@@ -0,0 +1,92 @@
+import { ForwardedRef, ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { TanstackMultiSelectProps } from '../multi-select/TanstackMultiSelect.js';
+export type TanstackMultiSelectFieldProps<TItems = undefined> = TanstackMultiSelectProps<TItems> & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
+    /** The label for the multi-select field. */
+    label: string;
+    /** Helper text to display below the multi-select field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the multi-select field. */
+    contextualLink?: ReactNode;
+};
+type TanstackMultiSelectFieldComponent = <TItems = undefined>(props: TanstackMultiSelectFieldProps<TItems> & {
+    ref?: ForwardedRef<HTMLButtonElement>;
+}) => React.JSX.Element;
+/**
+ * The `TanstackMultiSelectField` component renders a full field (label, multi-select, feedback)
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+  @example
+ * ```tsx
+ * import { TanstackMultiSelectField } from "@/components/multi-select-field/TanstackMultiSelectField"
+ * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
+ * import { MultiSelectOption } from "@/components/multi-select/parts/MultiSelectOption"
+ *
+ * function Example() {
+ *  const schema = z.object({
+ *     fruits: z.set(z.string()).min(1, 'Select at least one fruit'),
+ *  })
+ *
+ *   const form = useTanstackUnityForm({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form>
+ *       <form.AppField name="fruits">
+ *         {() => (
+ *           <TanstackMultiSelectField
+ *             label="Favorite Fruits"
+ *             helperText="Choose your favorites"
+ *             placeholder="Select fruits..."
+ *           >
+ *             <MultiSelectOption value="apple">Apple</MultiSelectOption>
+ *             <MultiSelectOption value="banana">Banana</MultiSelectOption>
+ *             <MultiSelectOption value="orange">Orange</MultiSelectOption>
+ *           </TanstackMultiSelectField>
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * interface Fruit { id: string; name: string }
+ * const fruits = new Set<Fruit>([...])
+ *
+ * function Example() {
+ *  const schema = z.object({
+ *     fruits: z.set(z.string()).min(1, 'Select at least one fruit'),
+ *  })
+ *
+ *   const form = useTanstackUnityForm({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form>
+ *       <form.AppField name="fruits">
+ *         {() => (
+ *           <TanstackMultiSelectField
+ *             label="Favorite Fruits"
+ *             items={fruits}
+ *             getItemValue={fruit => fruit.id}
+ *             renderValue={items => Array.from(items).map(i => i.name).join(', ')}
+ *           >
+ *             {fruit => (
+ *               <MultiSelectOption value={fruit.id}>{fruit.name}</MultiSelectOption>
+ *             )}
+ *           </TanstackMultiSelectField>
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ * @remarks Migration from `MultiSelectField` (non‑TanStack):
+ * - Do not pass a `name` prop to the field: use `<form.AppField name="…">`.
+ * - `value`, `defaultValue`, `onChange`, and `isInvalid` are derived from the TanStack form context.
+ */
+export declare const TanstackMultiSelectField: TanstackMultiSelectFieldComponent & {
+    displayName: string;
+};
+export {};

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/Nav.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export type NavProps = PropsWithChildren<Pick<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-describedby' | 'aria-labelledby' | 'aria-hidden' | 'aria-live'> & {
+    /** The title of the navigation menu. */
+    title?: string;
+}>;
+/**
+ * The `Nav` component represents a vertical navigation menu with optional title and navigation items of multiple types.
+ */
+export declare function Nav({ children, title, ...rest }: NavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Nav {
+    var displayName: string;
+}

package/dist/esm/components/nav/Nav.js

@@ -0,0 +1,28 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import u from "../../hooks/use-id.js";
+function o({ children: a, title: t, ...y }) {
+  const l = `nav-title-${u()}`;
+  return /* @__PURE__ */ n(
+    "nav",
+    {
+      ...y,
+      className: "uy:flex uy:flex-col uy:gap-50 uy:min-w-[264px]",
+      "aria-labelledby": l,
+      children: [
+        /* @__PURE__ */ e(
+          "h3",
+          {
+            id: l,
+            className: "uy:typography-body-strong uy:text-content-neutral uy:py-100 uy:px-150",
+            children: t
+          }
+        ),
+        /* @__PURE__ */ e("ul", { className: "uy:flex uy:flex-col uy:gap-50 uy:list-none", children: a })
+      ]
+    }
+  );
+}
+o.displayName = "Nav";
+export {
+  o as Nav
+};

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

@@ -0,0 +1,30 @@
+import { default as React, ReactNode } from 'react';
+import { DataAttributes } from '../../../types/DataAttributes.js';
+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 `<RawNavItem>` components. */
+    children: NavGroupChildren | NavGroupChildren[];
+    /** The label to show for the NavGroup. */
+    label: string;
+    /** The prefix element to be displayed before the label. It can be any valid React element. */
+    prefix?: ({ isExpanded }: {
+        isExpanded: boolean;
+    }) => ReactNode;
+    /** The suffix element to be displayed after the label.  It can be any valid React element. */
+    suffix?: ReactNode;
+    /** Whether the NavGroup is currently expanded. Use it to switch the component to a controlled mode. */
+    isExpanded?: boolean;
+    /** Whether the NavGroup is expanded by default. It only has effect in uncontrolled mode */
+    defaultExpanded?: boolean;
+    /** Callback function to be called when the NavGroup is expanded or collapsed. */
+    onToggle?: (isExpanded: boolean) => void;
+} & DataAttributes;
+/**
+ * The `NavGroup` component represents a tree of navigation items grouped under a single root element in a `Nav` component. It can be expanded or collapsed to show or hide its children.
+ */
+export declare function NavGroup({ children, label, prefix, suffix, defaultExpanded, isExpanded: controlledIsExpanded, onToggle, ...dataAttributes }: NavGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NavGroup {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,125 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import s, { 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/Button";
+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: {
+    base: "uy:theme-rebrand:border-1 uy:theme-rebrand:border-solid",
+    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",
+    content: "uy:list-none uy:flex uy:flex-col uy:gap-50 uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear"
+  },
+  variants: {
+    expanded: {
+      true: {
+        base: [
+          "uy:theme-legacy:bg-surface-neutral-low-active",
+          "uy:theme-rebrand:bg-surface-neutral uy:theme-rebrand:border-border-neutral uy:theme-rebrand:shadow-100"
+        ],
+        prefix: [
+          "uy:theme-legacy:text-content-neutral",
+          "uy:theme-rebrand:text-content-primary"
+        ],
+        caret: "uy:rotate-180",
+        contentWrapper: "uy:max-h-[1000px] uy:overflow-visible",
+        label: "uy:typography-body-strong",
+        content: "uy:opacity-100 uy:visible"
+      },
+      false: {
+        caret: "uy:rotate-0",
+        contentWrapper: "uy:max-h-0 uy:overflow-hidden",
+        content: "uy:opacity-0 uy:invisible uy:pointer-events-none",
+        label: "uy:typography-body",
+        base: "uy:theme-rebrand:border-transparent"
+      }
+    }
+  }
+});
+function M({
+  children: m,
+  label: y,
+  prefix: o,
+  suffix: p,
+  defaultExpanded: b = !1,
+  isExpanded: l,
+  onToggle: i,
+  ...f
+}) {
+  const u = $(), [x, h] = j(b), n = l !== void 0, a = n ? l : x, N = B(() => {
+    n || h((e) => !e), i?.(!a);
+  }, [n, a, i]), C = s.Children.map(m, (e) => s.isValidElement(e) ? s.cloneElement(e, { isDisabled: !a, level: 1 }) : e), c = `${u}-toggle`, d = `${u}-content`, {
+    baseClassName: v,
+    prefixClassName: g,
+    labelClassName: w,
+    suffixClassName: I,
+    contentClassName: W,
+    contentWrapperClassName: E,
+    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__ */ r("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+    /* @__PURE__ */ r(
+      _,
+      {
+        id: c,
+        className: v,
+        onPress: N,
+        "aria-expanded": a,
+        "aria-controls": d,
+        ...f,
+        children: [
+          o && /* @__PURE__ */ t("span", { className: g, children: o({ isExpanded: a }) }),
+          /* @__PURE__ */ t("span", { className: w, children: y }),
+          /* @__PURE__ */ r("span", { className: I, role: "presentation", children: [
+            p,
+            /* @__PURE__ */ t(
+              k,
+              {
+                src: "CaretDownOutlined",
+                alt: "expand group",
+                size: 20,
+                className: G,
+                color: "inherit"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: E,
+        style: { maxHeight: a ? 1e3 : 0 },
+        children: /* @__PURE__ */ t(
+          "ul",
+          {
+            id: d,
+            className: W,
+            "aria-labelledby": c,
+            "aria-hidden": !a,
+            children: C
+          }
+        )
+      }
+    )
+  ] });
+}
+M.displayName = "NavGroup";
+export {
+  M as NavGroup
+};