@yuno-payments/dashboard-design-system 0.0.164 → 0.0.165

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 (3) hide show
  1. package/dist/components/atoms/multi-values-field/multi-values-field.js +112 -88
  2. package/dist/components/atoms/multi-values-field/multi-values-field.types.d.ts +17 -0
  3. package/package.json +1 -1
package/dist/components/atoms/multi-values-field/multi-values-field.js CHANGED
@@ -1,134 +1,158 @@
1
- import { j as n } from "../../../_virtual/jsx-runtime.js";
2
- import { forwardRef as q, useId as z, useState as g } from "react";
3
- import { cn as b } from "../../../lib/utils.js";
4
- import { Field as G, FieldLabel as H, FieldDescription as J, FieldError as O } from "../../../vendor/shadcn/field.js";
5
- import { Badge as Q } from "../badge/badge.js";
6
- import { Icon as U } from "../icon/icon.js";
7
- const W = q(
1
+ import { j as r } from "../../../_virtual/jsx-runtime.js";
2
+ import { forwardRef as O, useId as Q, useState as b } from "react";
3
+ import { cn as y } from "../../../lib/utils.js";
4
+ import { Field as U, FieldLabel as W, FieldDescription as Y, FieldError as Z } from "../../../vendor/shadcn/field.js";
5
+ import { Badge as E } from "../badge/badge.js";
6
+ import { Icon as _ } from "../icon/icon.js";
7
+ const A = O(
8
8
  ({
9
9
  value: t = [],
10
- onChange: c,
11
- label: y,
12
- description: u,
13
- error: w,
14
- placeholder: F = "Type and press Enter...",
15
- disabled: p = !1,
16
- id: D,
10
+ onChange: p,
11
+ label: w,
12
+ description: f,
13
+ error: k,
14
+ placeholder: v = "Type and press Enter...",
15
+ disabled: l = !1,
16
+ id: C,
17
17
  name: V,
18
- triggerKeys: s = ["Enter", "Tab", "Comma", "Space"],
18
+ triggerKeys: c = ["Enter", "Tab", "Comma", "Space"],
19
19
  addOnBlur: B = !0,
20
- allowDuplicates: v = !1,
21
- maxItems: f,
22
- validate: k,
23
- badgeVariant: I = "outline",
24
- orientation: N = "vertical",
25
- className: $
26
- }, C) => {
27
- const T = z(), o = D || T, m = !!w, [x, j] = g(""), [R, E] = g(!1), [h, l] = g(""), i = (e) => {
28
- const r = e.trim();
29
- if (r !== "") {
30
- if (f && t.length >= f) {
31
- l(`Maximum ${f} items allowed`);
20
+ allowDuplicates: I = !1,
21
+ maxItems: m,
22
+ validate: j,
23
+ badgeVariant: N = "outline",
24
+ orientation: $ = "vertical",
25
+ className: T,
26
+ deleteAll: a
27
+ }, R) => {
28
+ const M = Q(), o = C || M, h = !!k, [x, D] = b(""), [S, F] = b(!1), [g, i] = b(""), s = (e) => {
29
+ const n = e.trim();
30
+ if (n !== "") {
31
+ if (m && t.length >= m) {
32
+ i(`Maximum ${m} items allowed`);
32
33
  return;
33
34
  }
34
- if (!v && t.includes(r)) {
35
- l("Duplicate values are not allowed");
35
+ if (!I && t.includes(n)) {
36
+ i("Duplicate values are not allowed");
36
37
  return;
37
38
  }
38
- if (k) {
39
- const a = k(r);
40
- if (a !== !0) {
41
- l(
42
- typeof a == "string" ? a : "Invalid value"
39
+ if (j) {
40
+ const d = j(n);
41
+ if (d !== !0) {
42
+ i(
43
+ typeof d == "string" ? d : "Invalid value"
43
44
  );
44
45
  return;
45
46
  }
46
47
  }
47
- l(""), c([...t, r]), j("");
48
+ i(""), p([...t, n]), D("");
48
49
  }
49
- }, M = (e) => {
50
- c(t.filter((r) => r !== e)), l("");
51
- }, S = (e) => {
52
- const r = e.currentTarget.value;
53
- e.key === "Enter" && s.includes("Enter") ? (e.preventDefault(), i(r)) : e.key === "Tab" && s.includes("Tab") ? r.trim() !== "" && (e.preventDefault(), i(r)) : (e.key === "," || e.key === ",") && s.includes("Comma") || e.key === " " && s.includes("Space") ? (e.preventDefault(), i(r)) : e.key === "Backspace" && r === "" && t.length > 0 && c(t.slice(0, -1));
54
- }, A = (e) => {
55
- j(e.target.value), l("");
56
- }, L = () => {
57
- E(!0);
58
- }, P = () => {
59
- E(!1), B && x.trim() !== "" && i(x);
60
- }, X = (e, r) => {
61
- e.preventDefault(), e.stopPropagation(), M(r);
62
- }, d = w || h;
63
- return /* @__PURE__ */ n.jsxs(
64
- G,
50
+ }, P = (e) => {
51
+ p(t.filter((n) => n !== e)), i("");
52
+ }, L = (e) => {
53
+ const n = e.currentTarget.value;
54
+ e.key === "Enter" && c.includes("Enter") ? (e.preventDefault(), s(n)) : e.key === "Tab" && c.includes("Tab") ? n.trim() !== "" && (e.preventDefault(), s(n)) : (e.key === "," || e.key === ",") && c.includes("Comma") || e.key === " " && c.includes("Space") ? (e.preventDefault(), s(n)) : e.key === "Backspace" && n === "" && t.length > 0 && p(t.slice(0, -1));
55
+ }, X = (e) => {
56
+ D(e.target.value), i("");
57
+ }, q = () => {
58
+ F(!0);
59
+ }, z = () => {
60
+ F(!1), B && x.trim() !== "" && s(x);
61
+ }, G = (e, n) => {
62
+ e.preventDefault(), e.stopPropagation(), P(n);
63
+ }, H = () => {
64
+ l || !a?.onClick || a.onClick();
65
+ }, u = k || g;
66
+ return /* @__PURE__ */ r.jsxs(
67
+ U,
65
68
  {
66
- orientation: N,
67
- "data-invalid": m,
68
- className: b("w-full", $),
69
+ orientation: $,
70
+ "data-invalid": h,
71
+ className: y("w-full", T),
69
72
  children: [
70
- y && /* @__PURE__ */ n.jsx(H, { htmlFor: o, children: y }),
71
- /* @__PURE__ */ n.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
72
- /* @__PURE__ */ n.jsxs(
73
+ w && /* @__PURE__ */ r.jsx(W, { htmlFor: o, children: w }),
74
+ /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
75
+ /* @__PURE__ */ r.jsxs(
73
76
  "div",
74
77
  {
75
- className: b(
78
+ className: y(
76
79
  "font-normal file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1.5 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 text-sm",
77
80
  "flex-wrap gap-1.5 items-center",
78
- R && "border-ring ring-ring/50 ring-[3px]",
79
- (m || h) && "border-destructive ring-destructive/20 dark:ring-destructive/40",
80
- p && "opacity-50 cursor-not-allowed"
81
+ S && "border-ring ring-ring/50 ring-[3px]",
82
+ (h || g) && "border-destructive ring-destructive/20 dark:ring-destructive/40",
83
+ l && "opacity-50 cursor-not-allowed"
81
84
  ),
82
85
  onClick: () => {
83
- p || document.getElementById(o)?.focus();
86
+ l || document.getElementById(o)?.focus();
84
87
  },
85
88
  children: [
86
- t.map((e, r) => /* @__PURE__ */ n.jsxs(Q, { variant: I, children: [
87
- e,
88
- /* @__PURE__ */ n.jsx(
89
- "button",
90
- {
91
- type: "button",
92
- onClick: (a) => X(a, e),
93
- children: /* @__PURE__ */ n.jsx(U, { name: "X", className: "h-3 w-3" })
94
- }
95
- )
96
- ] }, `${e}-${r}`)),
97
- /* @__PURE__ */ n.jsx(
89
+ (() => {
90
+ const e = a && !l && t.length >= a.length;
91
+ return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
92
+ e && /* @__PURE__ */ r.jsx(
93
+ "div",
94
+ {
95
+ onClick: (n) => {
96
+ n.preventDefault(), n.stopPropagation(), H();
97
+ },
98
+ children: /* @__PURE__ */ r.jsx(
99
+ E,
100
+ {
101
+ variant: "secondary",
102
+ className: "gap-1 cursor-pointer flex items-center",
103
+ children: a.label || "Delete all"
104
+ }
105
+ )
106
+ }
107
+ ),
108
+ t.map((n, d) => /* @__PURE__ */ r.jsxs(E, { variant: N, children: [
109
+ n,
110
+ /* @__PURE__ */ r.jsx(
111
+ "button",
112
+ {
113
+ type: "button",
114
+ onClick: (J) => G(J, n),
115
+ children: /* @__PURE__ */ r.jsx(_, { name: "X", className: "h-3 w-3" })
116
+ }
117
+ )
118
+ ] }, `${n}-${d}`))
119
+ ] });
120
+ })(),
121
+ /* @__PURE__ */ r.jsx(
98
122
  "input",
99
123
  {
100
- ref: C,
124
+ ref: R,
101
125
  id: o,
102
126
  name: V,
103
127
  type: "text",
104
128
  value: x,
105
- onChange: A,
106
- onKeyDown: S,
107
- onFocus: L,
108
- onBlur: P,
109
- placeholder: t.length === 0 ? F : "",
110
- disabled: p,
111
- className: b(
129
+ onChange: X,
130
+ onKeyDown: L,
131
+ onFocus: q,
132
+ onBlur: z,
133
+ placeholder: t.length === 0 ? v : "",
134
+ disabled: l,
135
+ className: y(
112
136
  "flex-1 min-w-[120px] outline-none bg-transparent border-none shadow-none p-0 h-6",
113
137
  "placeholder:text-muted-foreground",
114
138
  "disabled:cursor-not-allowed"
115
139
  ),
116
- "aria-invalid": m || !!h,
117
- "aria-describedby": u || d ? `${o}-description` : void 0
140
+ "aria-invalid": h || !!g,
141
+ "aria-describedby": f || u ? `${o}-description` : void 0
118
142
  }
119
143
  )
120
144
  ]
121
145
  }
122
146
  ),
123
- u && !d && /* @__PURE__ */ n.jsx(J, { id: `${o}-description`, children: u }),
124
- d && /* @__PURE__ */ n.jsx(O, { id: `${o}-description`, children: d })
147
+ f && !u && /* @__PURE__ */ r.jsx(Y, { id: `${o}-description`, children: f }),
148
+ u && /* @__PURE__ */ r.jsx(Z, { id: `${o}-description`, children: u })
125
149
  ] })
126
150
  ]
127
151
  }
128
152
  );
129
153
  }
130
154
  );
131
- W.displayName = "MultiValuesField";
155
+ A.displayName = "MultiValuesField";
132
156
  export {
133
- W as MultiValuesField
157
+ A as MultiValuesField
134
158
  };
package/dist/components/atoms/multi-values-field/multi-values-field.types.d.ts CHANGED
@@ -81,4 +81,21 @@ export interface MultiValuesFieldProps {
81
81
  * Additional CSS classes
82
82
  */
83
83
  className?: string;
84
+ /**
85
+ * Configuration for "Delete All" chip functionality
86
+ */
87
+ deleteAll?: {
88
+ /**
89
+ * Label for the delete all chip
90
+ */
91
+ label?: string;
92
+ /**
93
+ * Minimum number of selected items to show delete all
94
+ */
95
+ length: number;
96
+ /**
97
+ * Callback fired when delete all is clicked
98
+ */
99
+ onClick: () => void;
100
+ };
84
101
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuno-payments/dashboard-design-system",
3
- "version": "0.0.164",
3
+ "version": "0.0.165",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",