@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

package/dist/esm/components/task-menu/TaskMenu.d.ts

@@ -0,0 +1,80 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const taskMenu: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface TaskMenuProps extends PropsWithChildren<VariantProps<typeof taskMenu>> {
+    /**
+     * The label for the task menu. This is used for accessibility purposes.
+     */
+    label: string;
+}
+/**
+ * The `TaskMenu` component provides a navigation menu for tasks and task groups with expandable functionality.
+ * @example
+ * ```tsx
+ * import { TaskMenu, Task, TaskGroup, SubTask } from '@payfit/unity-components'
+ *
+ * <TaskMenu>
+ *  <Task
+ *    uniqueId="task1"
+ *    label="Complete Profile"
+ *    taskNumber={1}
+ *    taskStatus="completed"
+ *    href="/profile"
+ *   />
+ *  <Task
+ *    uniqueId="task2"
+ *    label="Upload Documents"
+ *    taskNumber={2}
+ *    taskStatus="uncompleted"
+ *    href="/documents"
+ *  />
+ *  <TaskGroup
+ *    uniqueId="onboarding"
+ *    label="Onboarding Steps"
+ *    taskNumber={3}
+ *    taskStatus="uncompleted"
+ *  >
+ *    <SubTask
+ *      uniqueId="step1"
+ *      label="Welcome Video"
+ *      href="/onboarding/welcome"
+ *      taskStatus="completed"
+ *    />
+ *    <SubTask
+ *      uniqueId="step2"
+ *      label="Company Policies"
+ *      href="/onboarding/policies"
+ *      taskStatus="uncompleted"
+ *    />
+ *  </TaskGroup>
+ *     </TaskMenu>
+ * ```
+ * @see {@link TaskMenuProps} for all available props
+ * @remarks [API Docs]{https://unity-components.payfit.io/?path=/story/navigation-taskmenu--docs}
+ */
+declare const TaskMenu: import('react').ForwardRefExoticComponent<TaskMenuProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TaskMenu };

package/dist/esm/components/task-menu/TaskMenu.js

@@ -0,0 +1,28 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
+import { useBreakpointListener as l } from "../../hooks/use-breakpoint-listener.js";
+import { Content as y } from "./parts/Content.js";
+import { Header as f } from "./parts/Header.js";
+import { TaskMenuProvider as p } from "./TaskMenu.context.js";
+const c = d({
+  slots: {
+    base: [
+      "uy:relative uy:flex uy:flex-col uy:shadow-raising uy:bg-surface-neutral",
+      "uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:md:rounded-200 uy:md:p-400"
+    ]
+  }
+}), b = u(
+  ({ children: o, label: s, ...t }, a) => {
+    const { base: n } = c(), e = l(), i = e === "xs" || e === "sm";
+    return /* @__PURE__ */ r("nav", { ...t, className: n(), ref: a, "aria-label": s, children: /* @__PURE__ */ m(p, { children: [
+      i && /* @__PURE__ */ r(f, {}),
+      /* @__PURE__ */ r(y, { children: o })
+    ] }) });
+  }
+);
+b.displayName = "TaskMenu";
+export {
+  b as TaskMenu,
+  c as taskMenu
+};

package/dist/esm/components/task-menu/parts/Content.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface ContentProps {
+    children: ReactNode;
+}
+declare const Content: {
+    ({ children }: ContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Content };

package/dist/esm/components/task-menu/parts/Content.js

@@ -0,0 +1,47 @@
+import { jsx as n } from "react/jsx-runtime";
+import { uyTv as a } from "@payfit/unity-themes";
+import { FocusScope as p, useOverlay as f, mergeProps as b } from "react-aria";
+import { useBreakpointListener as i } from "../../../hooks/use-breakpoint-listener.js";
+import { useTaskMenuContext as r } from "../TaskMenu.context.js";
+const v = a({
+  base: [
+    "uy:flex uy:flex-col uy:mt-100",
+    "uy:flex uy:md:flex-col uy:md:gap-200 uy:md:list-none uy:md:mt-0",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+  ]
+}), l = ({ children: s }) => {
+  const {
+    taskMenuContentId: e,
+    state: o,
+    overlayProps: c,
+    overlayRef: t
+  } = r(), u = i(), y = u === "xs" || u === "sm", { overlayProps: m } = f(
+    {
+      onClose: () => o == null ? void 0 : o.close(),
+      isOpen: o == null ? void 0 : o.isOpen,
+      isDismissable: !1
+    },
+    t
+  );
+  return /* @__PURE__ */ n(
+    "ol",
+    {
+      ...b(m, c),
+      ref: t,
+      className: v(),
+      id: e,
+      ...y && { "data-mobile-open": o == null ? void 0 : o.isOpen },
+      children: s
+    }
+  );
+}, d = ({ children: s }) => {
+  const { state: e } = r();
+  return !!(e != null && e.isOpen) && /* @__PURE__ */ n("div", { className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral", children: /* @__PURE__ */ n(p, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ n(l, { children: s }) }) });
+}, x = ({ children: s }) => {
+  const e = i();
+  return e === "xs" || e === "sm" ? /* @__PURE__ */ n(d, { children: s }) : /* @__PURE__ */ n(l, { children: s });
+};
+x.displayName = "TaskMenuContent";
+export {
+  x as Content
+};

package/dist/esm/components/task-menu/parts/Header.d.ts

@@ -0,0 +1,5 @@
+declare const Header: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Header };

package/dist/esm/components/task-menu/parts/Header.js

@@ -0,0 +1,55 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { uyTv as m } from "@payfit/unity-themes";
+import { useIntl as p } from "react-intl";
+import { IconButton as c } from "../../icon-button/IconButton.js";
+import { Text as f } from "../../text/Text.js";
+import { useTaskMenuContext as y } from "../TaskMenu.context.js";
+const h = m({
+  slots: {
+    header: ["uy:flex uy:px-300 uy:py-200 uy:gap-200 uy:shadow-raising"],
+    headerSelectedTask: ["uy:flex-1 uy:basis-full uy:self-center"]
+  }
+}), g = () => {
+  const {
+    currentTask: n,
+    taskMenuId: r,
+    taskMenuContentId: s,
+    state: e,
+    triggerProps: a,
+    triggerRef: i
+  } = y(), l = p(), { header: t, headerSelectedTask: u } = h();
+  return /* @__PURE__ */ d("div", { className: t(), children: [
+    /* @__PURE__ */ o(
+      f,
+      {
+        asElement: "span",
+        className: u(),
+        "aria-describedby": r,
+        children: n == null ? void 0 : n.label
+      }
+    ),
+    /* @__PURE__ */ o(
+      c,
+      {
+        ...a,
+        ref: i,
+        variant: "ghost",
+        color: "neutral",
+        icon: e != null && e.isOpen ? "CloseOutlined" : "ListOutlined",
+        label: l.formatMessage({
+          id: e != null && e.isOpen ? "unity:component:task-menu:header:menu-close" : "unity:component:task-menu:header:menu-open",
+          defaultMessage: e != null && e.isOpen ? "Close task menu" : "Open task menu"
+        }),
+        onClick: () => {
+          e == null || e.toggle();
+        },
+        "aria-expanded": !!(e != null && e.isOpen),
+        "aria-controls": s
+      }
+    )
+  ] });
+};
+g.displayName = "Header";
+export {
+  g as Header
+};

package/dist/esm/components/task-menu/parts/SubTask.d.ts

@@ -0,0 +1,166 @@
+import { TaskProps } from './Task.js';
+export declare const subTask: import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: {
+            dot: string[];
+        };
+        completed: {
+            dot: string[];
+        };
+        locked: {
+            dot: string[];
+        };
+    };
+    isSelected: {
+        true: {
+            dot: string[];
+        };
+        false: {
+            number: string[];
+        };
+    };
+}, {
+    base: string[];
+    dot: string[];
+    text: string[];
+    element: string[];
+    number: string;
+}, undefined, {
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, undefined, {
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, import('tailwind-variants').TVReturnType<{
+    taskStatus: {
+        uncompleted: {
+            base: string[];
+            element: string[];
+            number: string[];
+            text: string[];
+        };
+        completed: {
+            base: string[];
+            number: string[];
+            text: string[];
+        };
+        locked: {
+            text: string[];
+            number: string[];
+            lock: string[];
+        };
+    };
+}, {
+    base: string[];
+    number: string[];
+    element: string[];
+    text: string[];
+    lock: string;
+}, undefined, unknown, unknown, undefined>>>;
+export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
+    /** internal prop to disable the button, do not use this prop */
+    isDisabled?: boolean;
+}
+/**
+ * The `SubTask` component represents an individual subtask item within a TaskGroup that can be either a link or button.
+ * It supports various visual states including completed, uncompleted, locked.
+ * The component adapts its behavior based on whether an href is provided and displays
+ * a dot indicator instead of a numbered badge to distinguish it from main Task components.
+ *
+ * ```tsx
+ * // Link-based subtask for navigation within a task group
+ * <SubTask
+ *   uniqueId="profile-setup"
+ *   label="Complete Profile Information"
+ *   taskStatus="uncompleted"
+ *   href="/onboarding/profile"
+ * />
+ *
+ * // Button-based subtask for custom interactions
+ * <SubTask
+ *   uniqueId="validate-email"
+ *   label="Validate Email Address"
+ *   taskStatus="completed"
+ *   onPress={() => handleEmailValidation()}
+ * />
+ *
+ * // Locked subtask that cannot be interacted with
+ * <SubTask
+ *   uniqueId="final-approval"
+ *   label="Manager Approval"
+ *   taskStatus="locked"
+ * />
+ * ```
+ * @see {@link SubTaskProps} for all available props
+ */
+declare const SubTask: import('react').ForwardRefExoticComponent<SubTaskProps & import('react').RefAttributes<HTMLLIElement>>;
+export { SubTask };

package/dist/esm/components/task-menu/parts/SubTask.js

@@ -0,0 +1,197 @@
+import { jsxs as s, jsx as t, Fragment as f } from "react/jsx-runtime";
+import { forwardRef as O, useEffect as z } from "react";
+import { uyTv as E } from "@payfit/unity-themes";
+import { Link as F, Button as R } from "react-aria-components";
+import { useIntl as A, FormattedMessage as g } from "react-intl";
+import { useRouter as D } from "../../../providers/router/RouterProvider.js";
+import { Icon as y } from "../../icon/Icon.js";
+import { Text as I } from "../../text/Text.js";
+import { useTaskMenuContext as V } from "../TaskMenu.context.js";
+import G from "./dot.svg.js";
+import { commonTask as H } from "./task.variants.js";
+const J = E({
+  extend: H,
+  slots: {
+    base: ["uy:gap-300 uy:py-100", "uy:md:py-50"],
+    dot: ["uy:self-center"],
+    text: [
+      "uy:bg-surface-neutral-enabled",
+      "uy:md:bg-[transparent]",
+      "uy:leading-[1]"
+    ],
+    element: ["uy:rounded-50"],
+    number: ""
+  },
+  variants: {
+    taskStatus: {
+      uncompleted: {
+        dot: [
+          "uy:fill-content-neutral-lowest",
+          'uy:group-data-[current="true"]:fill-content-primary'
+        ]
+      },
+      completed: {
+        dot: ["uy:fill-content-neutral-lowest"]
+      },
+      locked: {
+        dot: ["uy:fill-content-neutral-lowest"]
+      }
+    },
+    isSelected: {
+      true: { dot: ["uy:fill-content-primary"] },
+      false: {
+        number: ["uy:group-data-[pressed]/element:bg-surface-neutral-pressed"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isSelected: !0,
+      taskStatus: "uncompleted",
+      className: {
+        text: ["uy:bg-surface-neutral-selected", "uy:md:bg-[transparent]"]
+      }
+    },
+    {
+      isSelected: !1,
+      taskStatus: "uncompleted",
+      className: {
+        text: [
+          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+        ]
+      }
+    },
+    {
+      isSelected: !1,
+      taskStatus: "locked",
+      className: {
+        text: [
+          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+        ]
+      }
+    }
+  ]
+}), K = (o, n, e) => {
+  switch (o) {
+    case "completed":
+      return /* @__PURE__ */ s(f, { children: [
+        /* @__PURE__ */ t(
+          y,
+          {
+            className: e == null ? void 0 : e.completed,
+            src: "CheckCircleOutlined",
+            size: 20,
+            color: "content.success",
+            alt: n.formatMessage({
+              id: "unity:component:task-menu:task:completed:label",
+              defaultMessage: "Completed"
+            })
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "uy:sr-only", children: /* @__PURE__ */ t(
+          g,
+          {
+            id: "unity:component:task-menu:task:completed:label",
+            defaultMessage: "Completed"
+          }
+        ) })
+      ] });
+    case "locked":
+      return /* @__PURE__ */ s(f, { children: [
+        /* @__PURE__ */ t(
+          y,
+          {
+            "aria-hidden": "true",
+            className: e == null ? void 0 : e.locked,
+            src: "LockOutlined",
+            size: 20,
+            color: "content.neutral.lowest",
+            alt: n.formatMessage({
+              id: "unity:component:task-menu:task:lock:label",
+              defaultMessage: "Locked"
+            })
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "uy:sr-only", children: /* @__PURE__ */ t(
+          g,
+          {
+            id: "unity:component:task-menu:task:lock:label",
+            defaultMessage: "Locked"
+          }
+        ) })
+      ] });
+    default:
+      return null;
+  }
+}, Q = O(
+  ({
+    href: o,
+    label: n,
+    taskStatus: e = "uncompleted",
+    isExact: i,
+    isDisabled: b,
+    onPress: d,
+    uniqueId: r,
+    ...p
+  }, h) => {
+    const k = A(), u = D(), { currentTask: a, setCurrentTask: l, state: m } = V();
+    z(() => {
+      o && (u != null && u.isActive(o.toString(), i)) && (l == null || l({ uniqueId: r, label: n }));
+    }, [o, i, u, r, n]);
+    const c = (a == null ? void 0 : a.uniqueId) === r, { base: v, element: M, text: w, dot: L, lock: S } = J({
+      isSelected: c,
+      taskStatus: e
+    }), j = Object.assign(
+      {},
+      c !== void 0 && {
+        "data-current": c,
+        "aria-current": c ? "page" : void 0
+      }
+    ), x = o ? F : R;
+    return /* @__PURE__ */ s(
+      "li",
+      {
+        ref: h,
+        className: v(),
+        ...c ? { "data-current": !0 } : {},
+        ...p,
+        children: [
+          /* @__PURE__ */ t(G, { width: 8, height: 8, className: L(), role: "presentation" }),
+          /* @__PURE__ */ s(
+            x,
+            {
+              className: M(),
+              href: o,
+              onPress: (N) => {
+                l == null || l({ uniqueId: r, label: n }), m == null || m.toggle(), d == null || d(N);
+              },
+              isDisabled: b,
+              ...j,
+              ...p,
+              children: [
+                /* @__PURE__ */ t(
+                  I,
+                  {
+                    asElement: "span",
+                    className: w(),
+                    variant: c ? "bodyStrong" : "body",
+                    children: n
+                  }
+                ),
+                K(e, k, {
+                  locked: S(),
+                  completed: "uy:self-center"
+                })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Q.displayName = "SubTask";
+export {
+  Q as SubTask,
+  J as subTask
+};