@alixpartners/ui-components 2.4.2 → 2.4.4
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.
- package/dist/assets/FilePicker.css +1 -1
- package/dist/assets/SplitButton.css +1 -1
- package/dist/assets/ap-icons-types.d.ts +1 -1
- package/dist/assets/ap-icons.d.ts +1 -1
- package/dist/assets/main.css +1 -1
- package/dist/components/DragAndDrop/DragAndDrop.d.ts +8 -5
- package/dist/components/DragAndDrop/DragAndDrop.js +110 -110
- package/dist/components/DragAndDrop/DragAndDrop.test.js +16 -12
- package/dist/components/FilePicker/FilePicker.d.ts +8 -4
- package/dist/components/FilePicker/FilePicker.js +197 -191
- package/dist/components/FilePicker/FilePicker.test.js +90 -86
- package/dist/components/Icons/IconsGallery.js +1 -1
- package/dist/components/SplitButton/SplitButton.js +132 -127
- package/dist/components/Tooltip/Tooltip.d.ts +3 -1
- package/dist/components/Tooltip/Tooltip.js +200 -196
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { d as
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { d as B, i as n, r as s, g as e, s as l, w as m, v as f, f as T } from "../../vi.bdSIJ99Y-017e_Pkz.js";
|
|
3
3
|
import { u as r } from "../../index-DkTDHhag.js";
|
|
4
|
-
import
|
|
5
|
-
const
|
|
4
|
+
import a from "./FilePicker.js";
|
|
5
|
+
const c = {
|
|
6
6
|
fileExtensionsAllowed: ["xlsx", "csv"],
|
|
7
7
|
maxSize: 5,
|
|
8
8
|
maxFiles: 10,
|
|
@@ -13,141 +13,145 @@ const a = {
|
|
|
13
13
|
helpLink: "https://example.com",
|
|
14
14
|
helpLinkText: "Help link"
|
|
15
15
|
};
|
|
16
|
-
function d(t,
|
|
17
|
-
return new File(["x".repeat(
|
|
16
|
+
function d(t, i = 100, u = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
|
|
17
|
+
return new File(["x".repeat(i)], t, {
|
|
18
18
|
type: u
|
|
19
19
|
});
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}),
|
|
26
|
-
|
|
21
|
+
B("FilePicker", () => {
|
|
22
|
+
B("Rendering", () => {
|
|
23
|
+
n("should render with required props", () => {
|
|
24
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c })), e(l.getByText("Upload files")).toBeInTheDocument(), e(l.getByText("Select a file")).toBeInTheDocument(), e(l.getByText("Browse file")).toBeInTheDocument();
|
|
25
|
+
}), n("should render required asterisk when required is true", () => {
|
|
26
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c, required: !0 }));
|
|
27
27
|
const t = document.querySelector('[aria-hidden="true"]');
|
|
28
28
|
e(t).toBeInTheDocument(), e(t).toHaveTextContent("*");
|
|
29
|
-
}),
|
|
30
|
-
|
|
31
|
-
}),
|
|
32
|
-
|
|
33
|
-
}),
|
|
34
|
-
|
|
35
|
-
}),
|
|
36
|
-
|
|
37
|
-
}),
|
|
38
|
-
|
|
39
|
-
}),
|
|
40
|
-
|
|
29
|
+
}), n("should render single mode with Browse file button", () => {
|
|
30
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c })), e(l.getByText("Browse file")).toBeInTheDocument(), e(l.queryByText(/Browse files \(max/)).not.toBeInTheDocument();
|
|
31
|
+
}), n("should render multiple mode with Browse files button and max count", () => {
|
|
32
|
+
s(/* @__PURE__ */ o(a, { type: "multiple", ...c, maxFiles: 5, multipleHelpText: "Only xlsx, csv files with max size of 5MB", multipleButtonHelpText: "(max 5 files)" })), e(l.getByText("Browse files (max 5 files)")).toBeInTheDocument(), e(l.getByText(/Only xlsx, csv files with max size of 5MB/)).toBeInTheDocument();
|
|
33
|
+
}), n("should display custom multipleHelpText when provided in multiple mode", () => {
|
|
34
|
+
s(/* @__PURE__ */ o(a, { type: "multiple", ...c, multipleHelpText: "Custom extensions and size info" })), e(l.getByText("Custom extensions and size info")).toBeInTheDocument();
|
|
35
|
+
}), n("should not render multipleHelpText in single mode", () => {
|
|
36
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c, multipleHelpText: "This should not appear" })), e(l.queryByText("This should not appear")).not.toBeInTheDocument();
|
|
37
|
+
}), n("should display custom multipleButtonHelpText in button when provided in multiple mode", () => {
|
|
38
|
+
s(/* @__PURE__ */ o(a, { type: "multiple", ...c, multipleButtonHelpText: "(max 3 files, 2MB each)" })), e(l.getByText("Browse files (max 3 files, 2MB each)")).toBeInTheDocument();
|
|
39
|
+
}), n("should render file input with correct accept and multiple attributes", () => {
|
|
40
|
+
s(/* @__PURE__ */ o(a, { type: "multiple", ...c }));
|
|
41
41
|
const t = l.getByTestId("file-picker-input");
|
|
42
42
|
e(t).toHaveAttribute("accept", ".xlsx,.csv"), e(t).toHaveAttribute("multiple");
|
|
43
|
-
}),
|
|
44
|
-
|
|
43
|
+
}), n("should render single file input without multiple attribute", () => {
|
|
44
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c }));
|
|
45
45
|
const t = l.getByTestId("file-picker-input");
|
|
46
46
|
e(t).not.toHaveAttribute("multiple");
|
|
47
|
-
}),
|
|
47
|
+
}), n("should display selected file name in single mode", async () => {
|
|
48
48
|
const t = d("report.xlsx");
|
|
49
|
-
|
|
50
|
-
const
|
|
51
|
-
await r.upload(
|
|
49
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c }));
|
|
50
|
+
const i = l.getByTestId("file-picker-input");
|
|
51
|
+
await r.upload(i, t), await m(() => {
|
|
52
52
|
e(l.getByText("report.xlsx")).toBeInTheDocument();
|
|
53
53
|
});
|
|
54
|
-
}),
|
|
55
|
-
|
|
54
|
+
}), n("should display error message when provided", () => {
|
|
55
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c, errorMessage: "Please select a file" })), e(l.getByText("Please select a file")).toBeInTheDocument();
|
|
56
56
|
});
|
|
57
|
-
}),
|
|
58
|
-
|
|
59
|
-
const t = f.fn(),
|
|
60
|
-
|
|
57
|
+
}), B("onUpload", () => {
|
|
58
|
+
n("should call onUpload with uploaded file when single file is selected", async () => {
|
|
59
|
+
const t = f.fn(), i = d("document.xlsx");
|
|
60
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c, onUpload: t }));
|
|
61
61
|
const u = l.getByTestId("file-picker-input");
|
|
62
|
-
await r.upload(u,
|
|
62
|
+
await r.upload(u, i), await m(() => {
|
|
63
63
|
e(t).toHaveBeenCalledTimes(1), e(t).toHaveBeenCalledWith([e.objectContaining({
|
|
64
64
|
file: e.any(File),
|
|
65
65
|
error: void 0
|
|
66
66
|
})]), e(t.mock.calls[0][0][0].file.name).toBe("document.xlsx");
|
|
67
67
|
});
|
|
68
|
-
}),
|
|
69
|
-
const t = f.fn(),
|
|
70
|
-
|
|
71
|
-
const
|
|
72
|
-
await r.upload(
|
|
68
|
+
}), n("should call onUpload with all selected files when multiple files selected (non-queue)", async () => {
|
|
69
|
+
const t = f.fn(), i = d("a.xlsx"), u = d("b.xlsx");
|
|
70
|
+
s(/* @__PURE__ */ o(a, { type: "multiple", queueFiles: !1, ...c, onUpload: t }));
|
|
71
|
+
const x = l.getByTestId("file-picker-input");
|
|
72
|
+
await r.upload(x, [i, u]), await m(() => {
|
|
73
73
|
e(t).toHaveBeenCalledTimes(1);
|
|
74
74
|
const p = t.mock.calls[0][0];
|
|
75
75
|
e(p).toHaveLength(2), e(p[0].file.name).toBe("a.xlsx"), e(p[1].file.name).toBe("b.xlsx");
|
|
76
76
|
});
|
|
77
|
-
}),
|
|
78
|
-
const t = f.fn(),
|
|
79
|
-
|
|
80
|
-
const
|
|
81
|
-
await r.upload(
|
|
77
|
+
}), n("should call onUpload with accumulated files when queueFiles is true", async () => {
|
|
78
|
+
const t = f.fn(), i = d("first.xlsx"), u = d("second.xlsx");
|
|
79
|
+
s(/* @__PURE__ */ o(a, { type: "multiple", queueFiles: !0, ...c, maxFiles: 10, onUpload: t }));
|
|
80
|
+
const x = l.getByTestId("file-picker-input");
|
|
81
|
+
await r.upload(x, i), await m(() => {
|
|
82
82
|
e(t).toHaveBeenCalledTimes(1);
|
|
83
83
|
const p = t.mock.calls[0][0];
|
|
84
84
|
e(p).toHaveLength(1), e(p[0].file.name).toBe("first.xlsx");
|
|
85
|
-
}), await r.upload(
|
|
85
|
+
}), await r.upload(x, u), await m(() => {
|
|
86
86
|
e(t).toHaveBeenCalledTimes(2);
|
|
87
87
|
const p = t.mock.calls[1][0];
|
|
88
88
|
e(p).toHaveLength(2), e(p[0].file.name).toBe("first.xlsx"), e(p[1].file.name).toBe("second.xlsx");
|
|
89
89
|
});
|
|
90
|
-
}),
|
|
91
|
-
const t = f.fn(),
|
|
92
|
-
|
|
90
|
+
}), n("should include validation error in onUpload when file extension is invalid", async () => {
|
|
91
|
+
const t = f.fn(), i = d("document.pdf", 100, "application/pdf");
|
|
92
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c, fileExtensionsAllowed: ["xlsx"], onUpload: t }));
|
|
93
93
|
const u = l.getByTestId("file-picker-input");
|
|
94
|
-
|
|
94
|
+
T.change(u, {
|
|
95
95
|
target: {
|
|
96
|
-
files: [
|
|
96
|
+
files: [i]
|
|
97
97
|
}
|
|
98
|
-
}), await
|
|
98
|
+
}), await m(() => {
|
|
99
99
|
e(t).toHaveBeenCalledWith([e.objectContaining({
|
|
100
100
|
file: e.any(File),
|
|
101
101
|
error: e.stringContaining("file format is incorrect")
|
|
102
102
|
})]);
|
|
103
103
|
});
|
|
104
104
|
});
|
|
105
|
-
}),
|
|
106
|
-
|
|
107
|
-
const t = f.fn(),
|
|
108
|
-
|
|
105
|
+
}), B("onRemoveFile", () => {
|
|
106
|
+
n("should call onRemoveFile when remove button is clicked in single mode", async () => {
|
|
107
|
+
const t = f.fn(), i = d("to-remove.xlsx");
|
|
108
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c, onRemoveFile: t }));
|
|
109
109
|
const u = l.getByTestId("file-picker-input");
|
|
110
|
-
await r.upload(u,
|
|
110
|
+
await r.upload(u, i), await m(() => {
|
|
111
111
|
e(l.getByText("to-remove.xlsx")).toBeInTheDocument();
|
|
112
112
|
});
|
|
113
|
-
const
|
|
114
|
-
await r.click(
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
const
|
|
119
|
-
|
|
113
|
+
const x = l.getByTestId("file-picker-remove-single");
|
|
114
|
+
await r.click(x), e(t).toHaveBeenCalledTimes(1);
|
|
115
|
+
const [p, h] = t.mock.calls[0];
|
|
116
|
+
e(p).toBe(i), e(h).toHaveLength(0);
|
|
117
|
+
}), n("should call onRemoveFile when remove button is clicked in multiple mode", async () => {
|
|
118
|
+
const t = f.fn(), i = d("one.xlsx"), u = d("two.xlsx");
|
|
119
|
+
s(/* @__PURE__ */ o(a, { type: "multiple", ...c, onRemoveFile: t }));
|
|
120
|
+
const x = l.getByTestId("file-picker-input");
|
|
121
|
+
await r.upload(x, [i, u]), await m(() => {
|
|
120
122
|
e(l.getByText("one.xlsx")).toBeInTheDocument(), e(l.getByText("two.xlsx")).toBeInTheDocument();
|
|
121
123
|
});
|
|
122
|
-
const p = l.getByTestId("file-picker-remove-
|
|
123
|
-
await r.click(p), e(t).
|
|
124
|
+
const p = l.getByTestId("file-picker-remove-1");
|
|
125
|
+
await r.click(p), e(t).toHaveBeenCalledTimes(1);
|
|
126
|
+
const [h, y] = t.mock.calls[0];
|
|
127
|
+
e(h).toBe(u), e(y).toHaveLength(1), e(y[0].file).toBe(i);
|
|
124
128
|
});
|
|
125
|
-
}),
|
|
126
|
-
|
|
127
|
-
const t = f.fn(),
|
|
128
|
-
|
|
129
|
+
}), B("Disabled state", () => {
|
|
130
|
+
n("should not call onUpload when disabled and file is selected", async () => {
|
|
131
|
+
const t = f.fn(), i = d("doc.xlsx");
|
|
132
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c, disabled: !0, onUpload: t }));
|
|
129
133
|
const u = l.getByTestId("file-picker-input");
|
|
130
|
-
await r.upload(u,
|
|
131
|
-
}),
|
|
132
|
-
const t = f.fn(),
|
|
133
|
-
|
|
134
|
+
await r.upload(u, i), e(t).not.toHaveBeenCalled();
|
|
135
|
+
}), n("should not call onRemoveFile when disabled and remove is clicked", async () => {
|
|
136
|
+
const t = f.fn(), i = d("doc.xlsx");
|
|
137
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c, disabled: !0, value: [i], onRemoveFile: t })), e(l.getByText("doc.xlsx")).toBeInTheDocument();
|
|
134
138
|
const u = l.getByTestId("file-picker-remove-single");
|
|
135
139
|
e(u).toBeDisabled(), await r.click(u), e(t).not.toHaveBeenCalled();
|
|
136
140
|
});
|
|
137
|
-
}),
|
|
138
|
-
|
|
141
|
+
}), B("Controlled value", () => {
|
|
142
|
+
n("should display files from value prop", () => {
|
|
139
143
|
const t = d("controlled.xlsx");
|
|
140
|
-
|
|
141
|
-
}),
|
|
144
|
+
s(/* @__PURE__ */ o(a, { type: "single", ...c, value: [t] })), e(l.getByText("controlled.xlsx")).toBeInTheDocument();
|
|
145
|
+
}), n("should display multiple files from value prop", () => {
|
|
142
146
|
const t = [d("a.xlsx"), d("b.xlsx")];
|
|
143
|
-
|
|
147
|
+
s(/* @__PURE__ */ o(a, { type: "multiple", ...c, value: t })), e(l.getByText("a.xlsx")).toBeInTheDocument(), e(l.getByText("b.xlsx")).toBeInTheDocument();
|
|
144
148
|
});
|
|
145
|
-
}),
|
|
146
|
-
|
|
149
|
+
}), B("Max files exceeded", () => {
|
|
150
|
+
n("should show max files exceeded message when over limit in multiple mode", async () => {
|
|
147
151
|
const t = [d("1.xlsx"), d("2.xlsx"), d("3.xlsx")];
|
|
148
|
-
|
|
149
|
-
const
|
|
150
|
-
await r.upload(
|
|
152
|
+
s(/* @__PURE__ */ o(a, { type: "multiple", ...c, maxFiles: 2 }));
|
|
153
|
+
const i = l.getByTestId("file-picker-input");
|
|
154
|
+
await r.upload(i, t), await m(() => {
|
|
151
155
|
e(l.getByText(/You can only upload up to 2 files/)).toBeInTheDocument();
|
|
152
156
|
});
|
|
153
157
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
2
|
-
import '../../assets/IconsGallery.css';const c = ["ap-icon-add", "ap-icon-add-bold", "ap-icon-add-filled", "ap-icon-add-outlined", "ap-icon-aggregation", "ap-icon-agreements", "ap-icon-ai", "ap-icon-alert", "ap-icon-alert-filled", "ap-icon-alixpartners", "ap-icon-approved", "ap-icon-ascendant", "ap-icon-at", "ap-icon-attach", "ap-icon-bar", "ap-icon-bold", "ap-icon-book", "ap-icon-bookmark", "ap-icon-bookmark-list", "ap-icon-bookmark-saved", "ap-icon-
|
|
2
|
+
import '../../assets/IconsGallery.css';const c = ["ap-icon-add", "ap-icon-add-bold", "ap-icon-add-filled", "ap-icon-add-outlined", "ap-icon-aggregation", "ap-icon-agreements", "ap-icon-ai", "ap-icon-alert", "ap-icon-alert-filled", "ap-icon-alixpartners", "ap-icon-approved", "ap-icon-ascendant", "ap-icon-at", "ap-icon-attach", "ap-icon-bar", "ap-icon-bold", "ap-icon-book", "ap-icon-bookmark", "ap-icon-bookmark-list", "ap-icon-bookmark-saved", "ap-icon-box-collapse", "ap-icon-box-expand", "ap-icon-box-list", "ap-icon-branch", "ap-icon-chapter11", "ap-icon-check", "ap-icon-clock", "ap-icon-clock-filled", "ap-icon-close", "ap-icon-close-bold", "ap-icon-collapse-all", "ap-icon-collapse-filled", "ap-icon-collapse-outlined", "ap-icon-color", "ap-icon-columns", "ap-icon-comment", "ap-icon-copy", "ap-icon-copy-file", "ap-icon-date", "ap-icon-deedi", "ap-icon-delete", "ap-icon-descendant", "ap-icon-deselect-branch", "ap-icon-deselect-individual", "ap-icon-direction", "ap-icon-document", "ap-icon-document-rpm", "ap-icon-dot", "ap-icon-dot-filled", "ap-icon-down", "ap-icon-download", "ap-icon-drag", "ap-icon-drilldown", "ap-icon-edit", "ap-icon-edit-filled", "ap-icon-elevation", "ap-icon-expand-all", "ap-icon-expand-filled", "ap-icon-expand-less", "ap-icon-expand-more", "ap-icon-expand-outlined", "ap-icon-expand-section", "ap-icon-export", "ap-icon-external", "ap-icon-file-csv", "ap-icon-file-docx", "ap-icon-file-pdf", "ap-icon-file-ppt", "ap-icon-file-xls", "ap-icon-filter", "ap-icon-filter-advanced", "ap-icon-financial", "ap-icon-financial-filled", "ap-icon-fit", "ap-icon-flag-filled", "ap-icon-folder", "ap-icon-font-size", "ap-icon-fullscreen", "ap-icon-function", "ap-icon-gantt", "ap-icon-grid", "ap-icon-gto", "ap-icon-help", "ap-icon-help-filled", "ap-icon-hide", "ap-icon-hide-source", "ap-icon-history", "ap-icon-idea", "ap-icon-image", "ap-icon-import", "ap-icon-in-progress-filled", "ap-icon-industry", "ap-icon-info", "ap-icon-info-filled", "ap-icon-italic", "ap-icon-job", "ap-icon-key", "ap-icon-layers", "ap-icon-left", "ap-icon-line", "ap-icon-link", "ap-icon-list", "ap-icon-list-numbered", "ap-icon-location", "ap-icon-lock", "ap-icon-logout", "ap-icon-mail", "ap-icon-milestone-filled", "ap-icon-more", "ap-icon-more-horizontal", "ap-icon-move", "ap-icon-new", "ap-icon-new-filled", "ap-icon-next", "ap-icon-notification-filled", "ap-icon-notification-warning", "ap-icon-person", "ap-icon-person-actions", "ap-icon-person-add", "ap-icon-person-add-filled", "ap-icon-person-check", "ap-icon-person-check-filled", "ap-icon-person-discard", "ap-icon-person-filled", "ap-icon-person-group", "ap-icon-person-group-checked", "ap-icon-person-group-checked-filled", "ap-icon-person-group-dashed", "ap-icon-person-group-dashed-filled", "ap-icon-person-group-filled", "ap-icon-person-group-filled-wide", "ap-icon-person-move", "ap-icon-person-move-filled", "ap-icon-person-remove", "ap-icon-person-remove-filled", "ap-icon-phone", "ap-icon-pin", "ap-icon-pin-filled", "ap-icon-platforms", "ap-icon-present", "ap-icon-previous", "ap-icon-projects", "ap-icon-quote", "ap-icon-radial", "ap-icon-remove", "ap-icon-remove-filled", "ap-icon-remove-outlined", "ap-icon-reply", "ap-icon-reset", "ap-icon-resize", "ap-icon-right", "ap-icon-rotate-left", "ap-icon-rotate-right", "ap-icon-row-height", "ap-icon-rpms", "ap-icon-screenshot", "ap-icon-search", "ap-icon-select-branch", "ap-icon-select-individual", "ap-icon-send", "ap-icon-settings", "ap-icon-settings-filled", "ap-icon-show", "ap-icon-show-filled", "ap-icon-sign", "ap-icon-smart-factory", "ap-icon-star", "ap-icon-star-dashed", "ap-icon-star-filled", "ap-icon-strikethrough", "ap-icon-success", "ap-icon-summary", "ap-icon-sxr", "ap-icon-sync", "ap-icon-table", "ap-icon-tip-bottom", "ap-icon-tip-left", "ap-icon-tip-right", "ap-icon-tip-top", "ap-icon-tree", "ap-icon-underline", "ap-icon-unpin", "ap-icon-unpin-filled", "ap-icon-up", "ap-icon-upload", "ap-icon-web", "ap-icon-working-capital", "ap-icon-zip", "ap-icon-zoom-in", "ap-icon-zoom-out"], p = "IconsGallery-module__grid___oQqfO", e = "IconsGallery-module__icon___7ZdqB", n = {
|
|
3
3
|
grid: p,
|
|
4
4
|
icon: e
|
|
5
5
|
};
|