@payfit/unity-components 2.35.0 → 2.35.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/esm/components/task-menu/parts/RawSubTask.d.ts +46 -84
  2. package/dist/esm/components/task-menu/parts/RawSubTask.js +83 -115
  3. package/dist/esm/components/task-menu/parts/RawTask.d.ts +49 -72
  4. package/dist/esm/components/task-menu/parts/RawTask.js +130 -162
  5. package/dist/esm/components/task-menu/parts/TaskGroup.js +73 -112
  6. package/dist/esm/components/task-menu/parts/task.variants.d.ts +12 -51
  7. package/dist/esm/components/task-menu/parts/task.variants.js +46 -37
  8. package/package.json +8 -8
package/dist/esm/components/task-menu/parts/RawSubTask.d.ts CHANGED
@@ -1,22 +1,36 @@
1
1
  import { TaskProps } from './RawTask.js';
2
2
  export declare const rawSubTask: import('tailwind-variants').TVReturnType<{
3
- taskStatus: {
4
- uncompleted: {
5
- dot: string[];
6
- };
7
- completed: {
8
- dot: string[];
9
- };
10
- locked: {
11
- dot: string[];
3
+ [key: string]: {
4
+ [key: string]: import('tailwind-merge').ClassNameValue | {
5
+ number?: import('tailwind-merge').ClassNameValue;
6
+ text?: import('tailwind-merge').ClassNameValue;
7
+ base?: import('tailwind-merge').ClassNameValue;
8
+ dot?: import('tailwind-merge').ClassNameValue;
9
+ element?: import('tailwind-merge').ClassNameValue;
12
10
  };
13
11
  };
14
- isSelected: {
15
- true: {
16
- dot: string[];
17
- };
18
- false: {
19
- number: string[];
12
+ } | {
13
+ taskStatus: {
14
+ uncompleted: import('tailwind-merge').ClassNameValue | {
15
+ number?: import('tailwind-merge').ClassNameValue;
16
+ text?: import('tailwind-merge').ClassNameValue;
17
+ base?: import('tailwind-merge').ClassNameValue;
18
+ dot?: import('tailwind-merge').ClassNameValue;
19
+ element?: import('tailwind-merge').ClassNameValue;
20
+ };
21
+ completed: import('tailwind-merge').ClassNameValue | {
22
+ number?: import('tailwind-merge').ClassNameValue;
23
+ text?: import('tailwind-merge').ClassNameValue;
24
+ base?: import('tailwind-merge').ClassNameValue;
25
+ dot?: import('tailwind-merge').ClassNameValue;
26
+ element?: import('tailwind-merge').ClassNameValue;
27
+ };
28
+ locked: import('tailwind-merge').ClassNameValue | {
29
+ number?: import('tailwind-merge').ClassNameValue;
30
+ text?: import('tailwind-merge').ClassNameValue;
31
+ base?: import('tailwind-merge').ClassNameValue;
32
+ dot?: import('tailwind-merge').ClassNameValue;
33
+ element?: import('tailwind-merge').ClassNameValue;
20
34
  };
21
35
  };
22
36
  }, {
@@ -24,107 +38,55 @@ export declare const rawSubTask: import('tailwind-variants').TVReturnType<{
24
38
  dot: string[];
25
39
  text: string[];
26
40
  element: string[];
27
- number: string;
41
+ number: string[];
28
42
  }, undefined, {
29
43
  taskStatus: {
30
- uncompleted: {
31
- base: string[];
32
- element: string[];
33
- number: string[];
34
- text: string[];
35
- };
36
- completed: {
37
- base: string[];
38
- number: string[];
39
- text: string[];
40
- };
41
- locked: {
42
- text: string[];
43
- number: string[];
44
- lock: string[];
45
- };
44
+ uncompleted: string;
45
+ completed: string;
46
+ locked: string;
46
47
  };
47
48
  }, {
48
49
  base: string[];
49
50
  number: string[];
50
51
  element: string[];
51
52
  text: string[];
52
- lock: string;
53
+ lock: string[];
53
54
  }, import('tailwind-variants').TVReturnType<{
54
55
  taskStatus: {
55
- uncompleted: {
56
- base: string[];
57
- element: string[];
58
- number: string[];
59
- text: string[];
60
- };
61
- completed: {
62
- base: string[];
63
- number: string[];
64
- text: string[];
65
- };
66
- locked: {
67
- text: string[];
68
- number: string[];
69
- lock: string[];
70
- };
56
+ uncompleted: string;
57
+ completed: string;
58
+ locked: string;
71
59
  };
72
60
  }, {
73
61
  base: string[];
74
62
  number: string[];
75
63
  element: string[];
76
64
  text: string[];
77
- lock: string;
65
+ lock: string[];
78
66
  }, undefined, {
79
67
  taskStatus: {
80
- uncompleted: {
81
- base: string[];
82
- element: string[];
83
- number: string[];
84
- text: string[];
85
- };
86
- completed: {
87
- base: string[];
88
- number: string[];
89
- text: string[];
90
- };
91
- locked: {
92
- text: string[];
93
- number: string[];
94
- lock: string[];
95
- };
68
+ uncompleted: string;
69
+ completed: string;
70
+ locked: string;
96
71
  };
97
72
  }, {
98
73
  base: string[];
99
74
  number: string[];
100
75
  element: string[];
101
76
  text: string[];
102
- lock: string;
77
+ lock: string[];
103
78
  }, import('tailwind-variants').TVReturnType<{
104
79
  taskStatus: {
105
- uncompleted: {
106
- base: string[];
107
- element: string[];
108
- number: string[];
109
- text: string[];
110
- };
111
- completed: {
112
- base: string[];
113
- number: string[];
114
- text: string[];
115
- };
116
- locked: {
117
- text: string[];
118
- number: string[];
119
- lock: string[];
120
- };
80
+ uncompleted: string;
81
+ completed: string;
82
+ locked: string;
121
83
  };
122
84
  }, {
123
85
  base: string[];
124
86
  number: string[];
125
87
  element: string[];
126
88
  text: string[];
127
- lock: string;
89
+ lock: string[];
128
90
  }, undefined, unknown, unknown, undefined>>>;
129
91
  export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
130
92
  /** internal prop to disable the button, do not use this prop */
package/dist/esm/components/task-menu/parts/RawSubTask.js CHANGED
@@ -1,96 +1,69 @@
1
- import { jsxs as n, jsx as e, Fragment as m } from "react/jsx-runtime";
2
- import { forwardRef as L, useEffect as R } from "react";
1
+ import { jsxs as o, jsx as e, Fragment as p } from "react/jsx-runtime";
2
+ import { forwardRef as R, useEffect as S } from "react";
3
3
  import { uyTv as j } from "@payfit/unity-themes";
4
- import { Button as O } from "react-aria-components/Button";
5
- import { Link as z } from "react-aria-components/Link";
6
- import { useIntl as E, FormattedMessage as i } from "react-intl";
7
- import { useRouter as F } from "../../../providers/router/RouterProvider.js";
8
- import { Icon as p } from "../../icon/Icon.js";
4
+ import { Button as z } from "react-aria-components/Button";
5
+ import { Link as E } from "react-aria-components/Link";
6
+ import { useIntl as F, FormattedMessage as m } from "react-intl";
7
+ import { useRouter as O } from "../../../providers/router/RouterProvider.js";
8
+ import { Icon as g } from "../../icon/Icon.js";
9
9
  import { Text as P } from "../../text/Text.js";
10
10
  import { useTaskMenuContext as A } from "../TaskMenu.context.js";
11
11
  import D from "./dot.svg.js";
12
12
  import { commonTask as I } from "./task.variants.js";
13
- const V = j({
13
+ const B = j({
14
14
  extend: I,
15
15
  slots: {
16
16
  base: ["uy:gap-300 uy:py-100", "uy:md:py-50"],
17
- dot: ["uy:self-center"],
17
+ dot: [
18
+ "uy:self-center",
19
+ "uy:fill-content-neutral-lowest",
20
+ "uy:theme-legacy:group-data-[current=true]/base:fill-content-primary",
21
+ "uy:theme-rebrand:group-data-[current=true]/base:fill-surface-neutral-highest-active"
22
+ ],
18
23
  text: [
19
24
  "uy:bg-surface-neutral-enabled",
20
25
  "uy:md:bg-[transparent]",
21
- "uy:leading-[1]"
26
+ "uy:leading-[1]",
27
+ "uy:group-data-[task-status=uncompleted]/base:group-data-[hovered=true]/element:bg-surface-neutral-hover",
28
+ "uy:group-data-[task-status=uncompleted]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
29
+ "uy:group-data-[task-status=completed]/base:group-data-[hovered=true]/element:bg-surface-neutral-hover",
30
+ "uy:group-data-[task-status=completed]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
31
+ "uy:group-data-[task-status=locked]/base:group-data-[hovered=true]/element:bg-surface-neutral-hover",
32
+ "uy:group-data-[task-status=locked]/base:group-data-[hovered=true]/element:text-content-neutral-hover",
33
+ "uy:group-data-[task-status=uncompleted]/base:group-data-[pressed=true]/element:bg-surface-neutral-pressed",
34
+ "uy:group-data-[task-status=uncompleted]/base:group-data-[pressed=true]/element:text-content-neutral-pressed",
35
+ "uy:group-data-[task-status=completed]/base:group-data-[pressed=true]/element:bg-surface-neutral-pressed",
36
+ "uy:group-data-[task-status=completed]/base:group-data-[pressed=true]/element:text-content-neutral-pressed",
37
+ "uy:group-data-[task-status=locked]/base:group-data-[pressed=true]/element:bg-surface-neutral-pressed",
38
+ "uy:group-data-[task-status=locked]/base:group-data-[pressed=true]/element:text-content-neutral-pressed",
39
+ "uy:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-surface-neutral-selected",
40
+ "uy:md:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-[transparent]",
41
+ "uy:theme-rebrand:group-data-[task-status=uncompleted]/base:group-data-[current=true]/base:bg-surface-neutral-selected"
22
42
  ],
23
43
  element: ["uy:rounded-50"],
24
- number: ""
25
- },
26
- variants: {
27
- taskStatus: {
28
- uncompleted: {
29
- dot: [
30
- "uy:fill-content-neutral-lowest",
31
- 'uy:group-data-[current="true"]:fill-content-primary'
32
- ]
33
- },
34
- completed: {
35
- dot: ["uy:fill-content-neutral-lowest"]
36
- },
37
- locked: {
38
- dot: ["uy:fill-content-neutral-lowest"]
39
- }
40
- },
41
- isSelected: {
42
- true: { dot: ["uy:fill-content-primary"] },
43
- false: {
44
- number: ["uy:group-data-[pressed]/element:bg-surface-neutral-pressed"]
45
- }
46
- }
47
- },
48
- compoundVariants: [
49
- {
50
- isSelected: !0,
51
- taskStatus: "uncompleted",
52
- className: {
53
- text: ["uy:bg-surface-neutral-selected", "uy:md:bg-[transparent]"]
54
- }
55
- },
56
- {
57
- isSelected: !1,
58
- taskStatus: "uncompleted",
59
- className: {
60
- text: [
61
- 'uy:group-data-[hovered="true"]/element:bg-surface-neutral-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
62
- ]
63
- }
64
- },
65
- {
66
- isSelected: !1,
67
- taskStatus: "locked",
68
- className: {
69
- text: [
70
- 'uy:group-data-[hovered="true"]/element:bg-surface-neutral-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
71
- ]
72
- }
73
- }
74
- ]
75
- }), B = (t, o, a) => {
44
+ number: [
45
+ "uy:group-data-[task-status=uncompleted]/base:group-[&[data-pressed]:not([aria-current=page])]/element:bg-surface-neutral-pressed"
46
+ ]
47
+ }
48
+ }), G = (t, a, r) => {
76
49
  switch (t) {
77
50
  case "completed":
78
- return /* @__PURE__ */ n(m, { children: [
51
+ return /* @__PURE__ */ o(p, { children: [
79
52
  /* @__PURE__ */ e(
80
- p,
53
+ g,
81
54
  {
82
- className: a?.completed,
55
+ className: r?.completed,
83
56
  src: "CheckCircleOutlined",
84
57
  size: 20,
85
58
  color: "content.success",
86
- alt: o.formatMessage({
59
+ alt: a.formatMessage({
87
60
  id: "unity:component:task-menu:task:completed:label",
88
61
  defaultMessage: "Completed"
89
62
  })
90
63
  }
91
64
  ),
92
65
  /* @__PURE__ */ e("span", { className: "uy:sr-only", children: /* @__PURE__ */ e(
93
- i,
66
+ m,
94
67
  {
95
68
  id: "unity:component:task-menu:task:completed:label",
96
69
  defaultMessage: "Completed"
@@ -98,23 +71,23 @@ const V = j({
98
71
  ) })
99
72
  ] });
100
73
  case "locked":
101
- return /* @__PURE__ */ n(m, { children: [
74
+ return /* @__PURE__ */ o(p, { children: [
102
75
  /* @__PURE__ */ e(
103
- p,
76
+ g,
104
77
  {
105
78
  "aria-hidden": "true",
106
- className: a?.locked,
79
+ className: r?.locked,
107
80
  src: "LockOutlined",
108
81
  size: 20,
109
82
  color: "content.neutral.lowest",
110
- alt: o.formatMessage({
83
+ alt: a.formatMessage({
111
84
  id: "unity:component:task-menu:task:lock:label",
112
85
  defaultMessage: "Locked"
113
86
  })
114
87
  }
115
88
  ),
116
89
  /* @__PURE__ */ e("span", { className: "uy:sr-only", children: /* @__PURE__ */ e(
117
- i,
90
+ m,
118
91
  {
119
92
  id: "unity:component:task-menu:task:lock:label",
120
93
  defaultMessage: "Locked"
@@ -124,63 +97,58 @@ const V = j({
124
97
  default:
125
98
  return null;
126
99
  }
127
- }, G = L(
100
+ }, H = R(
128
101
  ({
129
102
  href: t,
130
- label: o,
131
- taskStatus: a = "uncompleted",
132
- isExact: u,
133
- isDisabled: y,
134
- onPress: f,
103
+ label: a,
104
+ taskStatus: r = "uncompleted",
105
+ isExact: d,
106
+ isDisabled: i,
107
+ onPress: b,
135
108
  uniqueId: s,
136
- ...c
137
- }, g) => {
138
- const k = E(), d = F(), { currentTask: b, setCurrentTask: l, state: h } = A();
139
- R(() => {
140
- t && d?.isActive(t.toString(), u) && l?.({ uniqueId: s, label: o });
141
- }, [t, u, d, s, o, l]);
142
- const r = b?.uniqueId === s, { base: v, element: S, text: x, dot: N, lock: w } = V({
143
- isSelected: r,
144
- taskStatus: a
145
- }), M = Object.assign(
146
- {},
147
- r !== void 0 && {
148
- "data-current": r,
149
- "aria-current": r ? "page" : void 0
150
- }
151
- ), T = t ? z : O;
152
- return /* @__PURE__ */ n(
109
+ ...l
110
+ }, k) => {
111
+ const y = F(), c = O(), { currentTask: f, setCurrentTask: n, state: h } = A();
112
+ S(() => {
113
+ t && c?.isActive(t.toString(), d) && n?.({ uniqueId: s, label: a });
114
+ }, [t, d, c, s, a, n]);
115
+ const u = f?.uniqueId === s, { base: v, element: x, text: w, dot: M, lock: N } = B({ taskStatus: r }), T = {
116
+ "data-current": u,
117
+ "aria-current": u ? "page" : void 0
118
+ }, C = t ? E : z;
119
+ return /* @__PURE__ */ o(
153
120
  "li",
154
121
  {
155
- ref: g,
122
+ ref: k,
123
+ "data-task-status": r,
156
124
  className: v(),
157
- ...r ? { "data-current": !0 } : {},
158
- ...c,
125
+ ...u ? { "data-current": !0 } : {},
126
+ ...l,
159
127
  children: [
160
- /* @__PURE__ */ e(D, { width: 8, height: 8, className: N(), role: "presentation" }),
161
- /* @__PURE__ */ n(
162
- T,
128
+ /* @__PURE__ */ e(D, { width: 8, height: 8, className: M(), role: "presentation" }),
129
+ /* @__PURE__ */ o(
130
+ C,
163
131
  {
164
- className: S(),
132
+ className: x(),
165
133
  href: t,
166
- onPress: (C) => {
167
- l?.({ uniqueId: s, label: o }), h?.toggle(), f?.(C);
134
+ onPress: (L) => {
135
+ n?.({ uniqueId: s, label: a }), h?.toggle(), b?.(L);
168
136
  },
169
- isDisabled: y,
170
- ...M,
171
- ...c,
137
+ isDisabled: i,
138
+ ...T,
139
+ ...l,
172
140
  children: [
173
141
  /* @__PURE__ */ e(
174
142
  P,
175
143
  {
176
144
  asElement: "span",
177
- className: x(),
178
- variant: r ? "bodyStrong" : "body",
179
- children: o
145
+ className: w(),
146
+ variant: u ? "bodyStrong" : "body",
147
+ children: a
180
148
  }
181
149
  ),
182
- B(a, k, {
183
- locked: w(),
150
+ G(r, y, {
151
+ locked: N(),
184
152
  completed: "uy:self-center"
185
153
  })
186
154
  ]
@@ -191,8 +159,8 @@ const V = j({
191
159
  );
192
160
  }
193
161
  );
194
- G.displayName = "RawSubTask";
162
+ H.displayName = "RawSubTask";
195
163
  export {
196
- G as RawSubTask,
197
- V as rawSubTask
164
+ H as RawSubTask,
165
+ B as rawSubTask
198
166
  };
package/dist/esm/components/task-menu/parts/RawTask.d.ts CHANGED
@@ -2,9 +2,38 @@ import { VariantProps } from '@payfit/unity-themes';
2
2
  import { PropsWithChildren } from 'react';
3
3
  import { AriaButtonProps } from 'react-aria/useButton';
4
4
  export declare const rawTask: import('tailwind-variants').TVReturnType<{
5
- isSelected: {
6
- false: string;
7
- true: string;
5
+ [key: string]: {
6
+ [key: string]: import('tailwind-merge').ClassNameValue | {
7
+ number?: import('tailwind-merge').ClassNameValue;
8
+ text?: import('tailwind-merge').ClassNameValue;
9
+ base?: import('tailwind-merge').ClassNameValue;
10
+ lock?: import('tailwind-merge').ClassNameValue;
11
+ element?: import('tailwind-merge').ClassNameValue;
12
+ };
13
+ };
14
+ } | {
15
+ taskStatus: {
16
+ uncompleted: import('tailwind-merge').ClassNameValue | {
17
+ number?: import('tailwind-merge').ClassNameValue;
18
+ text?: import('tailwind-merge').ClassNameValue;
19
+ base?: import('tailwind-merge').ClassNameValue;
20
+ lock?: import('tailwind-merge').ClassNameValue;
21
+ element?: import('tailwind-merge').ClassNameValue;
22
+ };
23
+ completed: import('tailwind-merge').ClassNameValue | {
24
+ number?: import('tailwind-merge').ClassNameValue;
25
+ text?: import('tailwind-merge').ClassNameValue;
26
+ base?: import('tailwind-merge').ClassNameValue;
27
+ lock?: import('tailwind-merge').ClassNameValue;
28
+ element?: import('tailwind-merge').ClassNameValue;
29
+ };
30
+ locked: import('tailwind-merge').ClassNameValue | {
31
+ number?: import('tailwind-merge').ClassNameValue;
32
+ text?: import('tailwind-merge').ClassNameValue;
33
+ base?: import('tailwind-merge').ClassNameValue;
34
+ lock?: import('tailwind-merge').ClassNameValue;
35
+ element?: import('tailwind-merge').ClassNameValue;
36
+ };
8
37
  };
9
38
  }, {
10
39
  base: never[];
@@ -14,110 +43,58 @@ export declare const rawTask: import('tailwind-variants').TVReturnType<{
14
43
  number: string;
15
44
  }, undefined, {
16
45
  taskStatus: {
17
- uncompleted: {
18
- base: string[];
19
- element: string[];
20
- number: string[];
21
- text: string[];
22
- };
23
- completed: {
24
- base: string[];
25
- number: string[];
26
- text: string[];
27
- };
28
- locked: {
29
- text: string[];
30
- number: string[];
31
- lock: string[];
32
- };
46
+ uncompleted: string;
47
+ completed: string;
48
+ locked: string;
33
49
  };
34
50
  }, {
35
51
  base: string[];
36
52
  number: string[];
37
53
  element: string[];
38
54
  text: string[];
39
- lock: string;
55
+ lock: string[];
40
56
  }, import('tailwind-variants').TVReturnType<{
41
57
  taskStatus: {
42
- uncompleted: {
43
- base: string[];
44
- element: string[];
45
- number: string[];
46
- text: string[];
47
- };
48
- completed: {
49
- base: string[];
50
- number: string[];
51
- text: string[];
52
- };
53
- locked: {
54
- text: string[];
55
- number: string[];
56
- lock: string[];
57
- };
58
+ uncompleted: string;
59
+ completed: string;
60
+ locked: string;
58
61
  };
59
62
  }, {
60
63
  base: string[];
61
64
  number: string[];
62
65
  element: string[];
63
66
  text: string[];
64
- lock: string;
67
+ lock: string[];
65
68
  }, undefined, {
66
69
  taskStatus: {
67
- uncompleted: {
68
- base: string[];
69
- element: string[];
70
- number: string[];
71
- text: string[];
72
- };
73
- completed: {
74
- base: string[];
75
- number: string[];
76
- text: string[];
77
- };
78
- locked: {
79
- text: string[];
80
- number: string[];
81
- lock: string[];
82
- };
70
+ uncompleted: string;
71
+ completed: string;
72
+ locked: string;
83
73
  };
84
74
  }, {
85
75
  base: string[];
86
76
  number: string[];
87
77
  element: string[];
88
78
  text: string[];
89
- lock: string;
79
+ lock: string[];
90
80
  }, import('tailwind-variants').TVReturnType<{
91
81
  taskStatus: {
92
- uncompleted: {
93
- base: string[];
94
- element: string[];
95
- number: string[];
96
- text: string[];
97
- };
98
- completed: {
99
- base: string[];
100
- number: string[];
101
- text: string[];
102
- };
103
- locked: {
104
- text: string[];
105
- number: string[];
106
- lock: string[];
107
- };
82
+ uncompleted: string;
83
+ completed: string;
84
+ locked: string;
108
85
  };
109
86
  }, {
110
87
  base: string[];
111
88
  number: string[];
112
89
  element: string[];
113
90
  text: string[];
114
- lock: string;
91
+ lock: string[];
115
92
  }, undefined, unknown, unknown, undefined>>>;
116
93
  /**
117
94
  * Props for the Task component, defining the configuration options for individual task items.
118
95
  * Supports both link-based navigation and button-based interactions with various visual states.
119
96
  */
120
- export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof rawTask>, 'isSelected'>> {
97
+ export interface TaskProps extends PropsWithChildren<VariantProps<typeof rawTask>> {
121
98
  /**
122
99
  * Unique identifier for the task, used for state management and accessibility.
123
100
  * This ID is used to track the current selected task and manage focus states.