@payfit/unity-components 2.34.0 → 2.35.1

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

@@ -1,177 +1,145 @@
-import { jsxs as o, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { forwardRef as O, useEffect as F } from "react";
-import { uyTv as G } from "@payfit/unity-themes";
-import { Button as P } from "react-aria-components/Button";
-import { Link as z } from "react-aria-components/Link";
-import { useIntl as A, FormattedMessage as g } from "react-intl";
-import { useRouter as B } from "../../../providers/router/RouterProvider.js";
-import { Icon as y } from "../../icon/Icon.js";
-import { Text as f } from "../../text/Text.js";
-import { useTaskMenuContext as V } from "../TaskMenu.context.js";
-import { commonTask as D } from "./task.variants.js";
-const H = G({
-  extend: D,
+import { jsxs as n, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { forwardRef as G, useEffect as O } from "react";
+import { uyTv as P } from "@payfit/unity-themes";
+import { Button as z } from "react-aria-components/Button";
+import { Link as A } from "react-aria-components/Link";
+import { useIntl as B, FormattedMessage as k } from "react-intl";
+import { useRouter as S } from "../../../providers/router/RouterProvider.js";
+import { Icon as g } from "../../icon/Icon.js";
+import { Text as y } from "../../text/Text.js";
+import { useTaskMenuContext as D } from "../TaskMenu.context.js";
+import { commonTask as H } from "./task.variants.js";
+const I = P({
+  extend: H,
   slots: {
     base: [],
-    element: ["uy:p-200", "uy:md:p-0", "uy:cursor-pointer"],
+    element: [
+      "uy:p-200",
+      "uy:md:p-0",
+      "uy:cursor-pointer",
+      "uy:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-surface-neutral-selected",
+      "uy:md:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-[transparent]"
+    ],
     text: "uy:leading-[1]",
     lock: "uy:self-center",
     number: ""
-  },
-  variants: {
-    isSelected: {
-      false: "",
-      true: ""
-    }
-  },
-  compoundVariants: [
-    {
-      isSelected: !0,
-      taskStatus: "uncompleted",
-      className: {
-        element: ["uy:bg-surface-neutral-selected", "uy:md:bg-[transparent]"],
-        text: ["uy:md:bg-surface-neutral-selected uy:md:bg-[transparent]"]
-      }
-    },
-    {
-      isSelected: !1,
-      taskStatus: "uncompleted",
-      className: {
-        number: [
-          "uy:group-data-[pressed=true]/element:bg-surface-neutral-lowest-pressed",
-          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-lowest-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
-        ],
-        text: [
-          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
-        ]
-      }
-    },
-    {
-      isSelected: !1,
-      taskStatus: "locked",
-      className: {
-        number: [
-          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover',
-          "uy:group-data-[pressed]/element:bg-surface-neutral-lowest-pressed"
-        ],
-        text: [
-          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
-        ]
-      }
-    }
-  ]
-}), I = O(
+  }
+}), J = G(
   ({
-    href: a,
-    isExact: u = !1,
+    href: t,
+    isExact: c = !1,
     label: s,
-    onPress: k,
+    onPress: f,
     taskNumber: b,
-    taskStatus: n = "uncompleted",
-    children: h,
+    taskStatus: o = "uncompleted",
+    children: T,
     uniqueId: r,
-    ...m
-  }, v) => {
-    const c = B(), d = A(), {
-      currentTask: x,
-      setCurrentTask: l,
-      state: N,
+    ...l
+  }, N) => {
+    const d = S(), u = B(), {
+      currentTask: h,
+      setCurrentTask: m,
+      state: x,
       expandedTaskGroup: i,
-      toggleTaskGroup: T
-    } = V(), S = a ? z : P;
-    F(() => {
-      a && c?.isActive(a.toString(), u) && l?.({ uniqueId: r, label: s });
-    }, [a, u, c, s, r, l]);
-    const t = x?.uniqueId === r, M = Object.assign(
-      {},
-      t !== void 0 && {
-        "data-current": t,
-        "aria-current": t ? "page" : void 0
+      toggleTaskGroup: M
+    } = D(), v = t ? A : z;
+    O(() => {
+      t && d?.isActive(t.toString(), c) && m?.({ uniqueId: r, label: s });
+    }, [t, c, d, s, r, m]);
+    const a = h?.uniqueId === r, C = {
+      "data-current": a,
+      "aria-current": a ? "page" : void 0
+    }, { base: w, number: L, element: R, text: E, lock: j } = I({ taskStatus: o });
+    return /* @__PURE__ */ n(
+      "li",
+      {
+        ref: N,
+        "data-task-status": o,
+        className: w(),
+        ...a ? { "data-current": !0 } : {},
+        ...l,
+        children: [
+          /* @__PURE__ */ n(
+            v,
+            {
+              className: R(),
+              href: t,
+              onPress: (F) => {
+                m?.({ uniqueId: r, label: s }), x?.toggle(), i && M?.(i), f?.(F);
+              },
+              ...C,
+              ...l,
+              children: [
+                /* @__PURE__ */ e("div", { className: L(), children: o === "completed" ? /* @__PURE__ */ n(p, { children: [
+                  /* @__PURE__ */ e(
+                    g,
+                    {
+                      size: 24,
+                      "aria-hidden": "true",
+                      src: "CheckOutlined",
+                      alt: u.formatMessage({
+                        id: "unity:component:task-menu:task:completed:label",
+                        defaultMessage: "Completed"
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "uy:sr-only", children: /* @__PURE__ */ e(
+                    k,
+                    {
+                      id: "unity:component:task-menu:task:completed:label",
+                      defaultMessage: "Completed"
+                    }
+                  ) })
+                ] }) : /* @__PURE__ */ e(
+                  y,
+                  {
+                    asElement: "span",
+                    variant: a ? "bodyStrong" : "body",
+                    className: "uy:leading-[1]",
+                    children: b
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  y,
+                  {
+                    asElement: "span",
+                    className: E(),
+                    variant: a ? "bodyStrong" : "body",
+                    children: s
+                  }
+                ),
+                o === "locked" && /* @__PURE__ */ n(p, { children: [
+                  /* @__PURE__ */ e(
+                    g,
+                    {
+                      "aria-hidden": "true",
+                      className: j(),
+                      src: "LockOutlined",
+                      alt: u.formatMessage({
+                        id: "unity:component:task-menu:task:lock:label",
+                        defaultMessage: "Locked"
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "uy:sr-only", children: /* @__PURE__ */ e(
+                    k,
+                    {
+                      id: "unity:component:task-menu:task:lock:label",
+                      defaultMessage: "Locked"
+                    }
+                  ) })
+                ] })
+              ]
+            }
+          ),
+          T
+        ]
       }
-    ), { base: w, number: C, element: L, text: R, lock: j } = H({
-      isSelected: t,
-      taskStatus: n
-    });
-    return /* @__PURE__ */ o("li", { ref: v, className: w(), ...m, children: [
-      /* @__PURE__ */ o(
-        S,
-        {
-          className: L(),
-          href: a,
-          onPress: (E) => {
-            l?.({ uniqueId: r, label: s }), N?.toggle(), i && T?.(i), k?.(E);
-          },
-          ...M,
-          ...m,
-          children: [
-            /* @__PURE__ */ e("div", { className: C(), children: n === "completed" ? /* @__PURE__ */ o(p, { children: [
-              /* @__PURE__ */ e(
-                y,
-                {
-                  size: 24,
-                  "aria-hidden": "true",
-                  src: "CheckOutlined",
-                  alt: d.formatMessage({
-                    id: "unity:component:task-menu:task:completed:label",
-                    defaultMessage: "Completed"
-                  })
-                }
-              ),
-              /* @__PURE__ */ e("span", { className: "uy:sr-only", children: /* @__PURE__ */ e(
-                g,
-                {
-                  id: "unity:component:task-menu:task:completed:label",
-                  defaultMessage: "Completed"
-                }
-              ) })
-            ] }) : /* @__PURE__ */ e(
-              f,
-              {
-                asElement: "span",
-                variant: t ? "bodyStrong" : "body",
-                className: "uy:leading-[1]",
-                children: b
-              }
-            ) }),
-            /* @__PURE__ */ e(
-              f,
-              {
-                asElement: "span",
-                className: R(),
-                variant: t ? "bodyStrong" : "body",
-                children: s
-              }
-            ),
-            n === "locked" && /* @__PURE__ */ o(p, { children: [
-              /* @__PURE__ */ e(
-                y,
-                {
-                  "aria-hidden": "true",
-                  className: j(),
-                  src: "LockOutlined",
-                  alt: d.formatMessage({
-                    id: "unity:component:task-menu:task:lock:label",
-                    defaultMessage: "Locked"
-                  })
-                }
-              ),
-              /* @__PURE__ */ e("span", { className: "uy:sr-only", children: /* @__PURE__ */ e(
-                g,
-                {
-                  id: "unity:component:task-menu:task:lock:label",
-                  defaultMessage: "Locked"
-                }
-              ) })
-            ] })
-          ]
-        }
-      ),
-      h
-    ] });
+    );
   }
 );
-I.displayName = "RawTask";
+J.displayName = "RawTask";
 export {
-  I as RawTask,
-  H as rawTask
+  J as RawTask,
+  I as rawTask
 };

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

@@ -1,15 +1,15 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { forwardRef as j, Children as i, isValidElement as o, cloneElement as A } from "react";
-import { uyTv as V } from "@payfit/unity-themes";
-import { Button as $ } from "react-aria-components/Button";
-import { useId as B } from "react-aria/useId";
-import { useIntl as D } from "react-intl";
-import { Icon as F } from "../../icon/Icon.js";
-import { Text as f } from "../../text/Text.js";
-import { useTaskMenuContext as H } from "../TaskMenu.context.js";
-import { commonTask as O } from "./task.variants.js";
-const P = V({
-  extend: O,
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { forwardRef as A, Children as l, isValidElement as u, cloneElement as $ } from "react";
+import { uyTv as B } from "@payfit/unity-themes";
+import { Button as D } from "react-aria-components/Button";
+import { useId as F } from "react-aria/useId";
+import { useIntl as H } from "react-intl";
+import { Icon as O } from "../../icon/Icon.js";
+import { Text as g } from "../../text/Text.js";
+import { useTaskMenuContext as P } from "../TaskMenu.context.js";
+import { commonTask as R } from "./task.variants.js";
+const U = B({
+  extend: R,
   slots: {
     base: ["uy:relative uy:flex-col uy:px-200", "uy:md:px-0"],
     element: ["uy:z-[1] uy:py-200", "uy:md:py-0", "uy:cursor-pointer"],
@@ -18,155 +18,116 @@ const P = V({
       "uy:md:my-75"
     ],
     containerSubTasks: [
-      "uy:list-none uy:ml-100 uy:flex uy:flex-col uy:gap-100 uy:z-[1] uy:relative uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear uy:mt-100"
+      "uy:list-none uy:ml-100 uy:flex uy:flex-col uy:gap-100 uy:z-[1] uy:relative uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear uy:mt-100",
+      "uy:group-data-[expanded=true]/base:opacity-100 uy:group-data-[expanded=true]/base:visible",
+      "uy:group-data-[expanded=false]/base:opacity-0 uy:group-data-[expanded=false]/base:invisible uy:group-data-[expanded=false]/base:pointer-events-none"
     ],
     containerSubTasksWrapper: [
       "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none"
     ],
-    number: "uy:bg-surface-neutral-lowest"
-  },
-  variants: {
-    expanded: {
-      true: {
-        containerSubTasksWrapper: "uy:max-h-[1000px] uy:overflow-visible",
-        containerSubTasks: "uy:opacity-100 uy:visible"
-      },
-      false: {
-        containerSubTasksWrapper: "uy:max-h-0 uy:overflow-hidden",
-        containerSubTasks: "uy:opacity-0 uy:invisible uy:pointer-events-none"
-      }
-    },
-    hasSelectedSubTask: {
-      true: "",
-      false: ""
-    }
-  },
-  compoundVariants: [
-    {
-      hasSelectedSubTask: !0,
-      taskStatus: "uncompleted",
-      className: {
-        number: ["uy:bg-surface-primary-active uy:text-content-inverted"],
-        text: ["uy:text-content-primary-active"]
-      }
-    },
-    {
-      hasSelectedSubTask: !1,
-      taskStatus: "uncompleted",
-      className: {
-        number: [
-          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-lowest-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover uy:group-data-[pressed=true]/element:bg-surface-neutral-lowest-pressed'
-        ],
-        text: [
-          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
-        ]
-      }
-    },
-    {
-      hasSelectedSubTask: !1,
-      taskStatus: "locked",
-      className: {
-        number: [
-          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover uy:group-data-[pressed=true]/element:bg-surface-neutral-pressed'
-        ],
-        text: [
-          'uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
-        ]
-      }
-    }
-  ]
-}), R = (e, t) => e ? i.toArray(t).some(
-  (s) => o(s) && s.props.uniqueId === e
-) : !1, U = (e) => e ? i.toArray(e).find(
-  (t) => o(t) && t.props.taskStatus !== "completed" && t.props.taskStatus !== "locked"
-) : null, J = j(
+    number: [
+      "uy:bg-surface-neutral-lowest",
+      "uy:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:text-content-inverted",
+      "uy:theme-legacy:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:bg-surface-primary-active",
+      "uy:theme-rebrand:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:bg-surface-neutral-highest-active"
+    ],
+    text: [
+      "uy:theme-legacy:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:text-content-primary-active",
+      "uy:theme-rebrand:group-[&[data-task-status=uncompleted][data-active-group=true]]/base:text-content-neutral-active"
+    ]
+  }
+}), V = (e, t) => e ? l.toArray(t).some(
+  (r) => u(r) && r.props.uniqueId === e
+) : !1, W = (e) => e ? l.toArray(e).find(
+  (t) => u(t) && t.props.taskStatus !== "completed" && t.props.taskStatus !== "locked"
+) : null, J = A(
   ({
     children: e,
     label: t,
-    taskNumber: s,
-    taskStatus: d = "uncompleted",
-    uniqueId: m,
-    ...g
-  }, k) => {
-    const { currentTask: v, setCurrentTask: x, toggleTaskGroup: S, expandedTaskGroup: h } = H(), c = B(), T = D(), a = h === m, N = (u) => {
-      if (S?.(m), !u) {
-        const b = U(e);
-        if (o(b)) {
-          const { uniqueId: M, label: W } = b.props;
-          x?.({ uniqueId: M, label: W });
+    taskNumber: r,
+    taskStatus: n = "uncompleted",
+    uniqueId: p,
+    ...f
+  }, x) => {
+    const { currentTask: k, setCurrentTask: v, toggleTaskGroup: T, expandedTaskGroup: h } = P(), c = F(), S = H(), a = h === p, I = (s) => {
+      if (T?.(p), !s) {
+        const b = W(e);
+        if (u(b)) {
+          const { uniqueId: M, label: j } = b.props;
+          v?.({ uniqueId: M, label: j });
         }
       }
-    }, w = i.map(e, (u) => o(u) ? A(u, { isDisabled: !a }) : u), p = `${c}-toggle`, y = `${c}-content`, n = R(
-      v?.uniqueId,
+    }, N = l.map(e, (s) => u(s) ? $(s, { isDisabled: !a }) : s), m = `${c}-toggle`, y = `${c}-content`, d = V(
+      k?.uniqueId,
       e
-    ), { base: I, number: C, text: E, bar: G, element: z, containerSubTasks: q } = P({
-      taskStatus: d,
-      hasSelectedSubTask: n,
-      expanded: a
+    ), { base: C, number: E, text: G, bar: w, element: z, containerSubTasks: q } = U({
+      taskStatus: n
     });
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ i(
       "li",
       {
-        ref: k,
+        ref: x,
         "data-group": "true",
-        "data-active-group": n,
-        className: I(),
+        "data-task-status": n,
+        "data-expanded": a,
+        "data-active-group": d,
+        className: C(),
         children: [
-          /* @__PURE__ */ l(
-            $,
+          /* @__PURE__ */ i(
+            D,
             {
-              id: p,
+              id: m,
               className: z(),
               onPress: () => {
-                N(a);
+                I(a);
               },
               "aria-expanded": a,
               "aria-controls": y,
-              ...g,
+              ...f,
               children: [
-                /* @__PURE__ */ r("div", { className: C(), children: d === "completed" ? /* @__PURE__ */ r(
-                  F,
+                /* @__PURE__ */ o("div", { className: E(), children: n === "completed" ? /* @__PURE__ */ o(
+                  O,
                   {
                     size: 24,
                     src: "CheckOutlined",
-                    alt: T.formatMessage({
+                    alt: S.formatMessage({
                       id: "unity:component:task-menu:task:completed:label",
                       defaultMessage: "Completed"
                     })
                   }
-                ) : /* @__PURE__ */ r(
-                  f,
+                ) : /* @__PURE__ */ o(
+                  g,
                   {
                     asElement: "span",
-                    variant: n ? "bodyStrong" : "body",
+                    variant: d ? "bodyStrong" : "body",
                     className: "uy:leading-[1]",
-                    children: s
+                    children: r
                   }
                 ) }),
-                /* @__PURE__ */ r(
-                  f,
+                /* @__PURE__ */ o(
+                  g,
                   {
                     asElement: "span",
-                    className: E(),
-                    variant: n ? "bodyStrong" : "body",
+                    className: G(),
+                    variant: d ? "bodyStrong" : "body",
                     children: t
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ l("div", { style: { maxHeight: a ? 1e3 : 0 }, children: [
-            /* @__PURE__ */ r(
+          /* @__PURE__ */ i("div", { style: { maxHeight: a ? 1e3 : 0 }, children: [
+            /* @__PURE__ */ o(
               "ol",
               {
                 id: y,
-                "aria-labelledby": p,
+                "aria-labelledby": m,
                 "aria-hidden": !a,
                 className: q(),
-                children: w
+                children: N
               }
             ),
-            a && /* @__PURE__ */ r("div", { role: "presentation", className: G() })
+            a && /* @__PURE__ */ o("div", { role: "presentation", className: w() })
           ] })
         ]
       }

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

@@ -1,76 +1,37 @@
 export declare const commonTask: 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[];
-        };
+        uncompleted: string;
+        completed: string;
+        locked: string;
     };
 }, {
     base: string[];
     number: string[];
     element: string[];
     text: string[];
-    lock: 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[];
-        };
+        uncompleted: string;
+        completed: string;
+        locked: string;
     };
 }, {
     base: string[];
     number: string[];
     element: string[];
     text: string[];
-    lock: 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[];
-        };
+        uncompleted: string;
+        completed: string;
+        locked: string;
     };
 }, {
     base: string[];
     number: string[];
     element: string[];
     text: string[];
-    lock: string;
+    lock: string[];
 }, undefined, unknown, unknown, undefined>>;