@vectara/vectara-ui 13.1.0 → 13.2.0
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.
|
@@ -36,6 +36,7 @@ import { VuiIcon } from "../icon/Icon";
|
|
|
36
36
|
import { VuiFlexContainer } from "../flex/FlexContainer";
|
|
37
37
|
import { VuiPortal } from "../portal/Portal";
|
|
38
38
|
import { copyToClipboard } from "../../utils/copyToClipboard";
|
|
39
|
+
import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
|
|
39
40
|
// PrismJS clears highlighting when language-none is set.
|
|
40
41
|
export const VuiCode = (_a) => {
|
|
41
42
|
var { onCopy, isFullscreenEnabled = true, isCopyEnabled = true, language = "none", fullHeight, children = "" } = _a, rest = __rest(_a, ["onCopy", "isFullscreenEnabled", "isCopyEnabled", "language", "fullHeight", "children"]);
|
|
@@ -58,11 +59,15 @@ export const VuiCode = (_a) => {
|
|
|
58
59
|
onCopy();
|
|
59
60
|
}) }))] })));
|
|
60
61
|
const code = (_jsx("pre", Object.assign({ className: "vuiCodePre" }, { children: _jsx("code", Object.assign({ className: classes }, { children: children })) })));
|
|
61
|
-
return (_jsxs("div", Object.assign({ className: containerClasses }, rest, { children: [code, actions, testId && (_jsx("div", Object.assign({ "data-testid": `${testId}-hidden`, hidden: true }, { children: children }))), _jsx(VuiPortal, { children: isFullscreen && (_jsx(FocusOn, Object.assign({ onEscapeKey: () => {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
return (_jsxs("div", Object.assign({ className: containerClasses }, rest, { children: [code, actions, testId && (_jsx("div", Object.assign({ "data-testid": `${testId}-hidden`, hidden: true }, { children: children }))), _jsx(VuiPortal, { children: isFullscreen && (_jsx(VuiScreenBlock, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: () => {
|
|
63
|
+
setIsFullscreen(false);
|
|
64
|
+
} }, { children: _jsxs("div", Object.assign({ className: "vuiCodeFullscreen" }, { children: [_jsxs(VuiFlexContainer, Object.assign({ className: "vuiCodeFullscreen__actions", spacing: "xxs" }, { children: [isCopyEnabled && (_jsx(VuiIconButton, { color: "neutral", size: "m", icon: _jsx(VuiIcon, { children: _jsx(BiClipboard, {}) }), "aria-label": "Copy to clipboard", onClick: () => __awaiter(void 0, void 0, void 0, function* () {
|
|
65
|
+
yield copyToClipboard(children);
|
|
66
|
+
if (onCopy)
|
|
67
|
+
onCopy();
|
|
68
|
+
}), tooltip: {
|
|
69
|
+
position: "bottom-end"
|
|
70
|
+
} })), _jsx(VuiIconButton, { className: "vuiCodeFullscreen__closeButton", color: "neutral", size: "m", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), "aria-label": "Exit fullscreen code", onClick: () => setIsFullscreen(false), tooltip: {
|
|
71
|
+
position: "bottom-end"
|
|
72
|
+
} })] })), code] })) })) })) })] })));
|
|
68
73
|
};
|
|
@@ -37,16 +37,35 @@
|
|
|
37
37
|
color: var(--vui-color-dark-shade) !important;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
+
@keyframes fullscreenIn {
|
|
41
|
+
0% {
|
|
42
|
+
transform: translateY(12px);
|
|
43
|
+
opacity: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
100% {
|
|
47
|
+
transform: translateY(0);
|
|
48
|
+
opacity: 1;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
$fullscreenMargin: $sizeM;
|
|
53
|
+
|
|
40
54
|
.vuiCodeFullscreen {
|
|
41
55
|
position: fixed;
|
|
42
|
-
top:
|
|
43
|
-
left:
|
|
44
|
-
right:
|
|
45
|
-
bottom:
|
|
56
|
+
top: $fullscreenMargin;
|
|
57
|
+
left: $fullscreenMargin;
|
|
58
|
+
right: $fullscreenMargin;
|
|
59
|
+
bottom: $fullscreenMargin;
|
|
46
60
|
z-index: $fullscreenZIndex;
|
|
47
61
|
// PrismJS theme color.
|
|
48
62
|
background-color: #f5f2f0;
|
|
49
63
|
overflow: auto;
|
|
64
|
+
scrollbar-width: thin;
|
|
65
|
+
scrollbar-gutter: stable;
|
|
66
|
+
border-radius: $sizeXxs;
|
|
67
|
+
box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
|
68
|
+
animation: fullscreenIn $transitionSpeed cubic-bezier(0, 1, 1, 1);
|
|
50
69
|
}
|
|
51
70
|
|
|
52
71
|
.vuiCodeFullscreen__actions {
|
|
@@ -184,10 +184,14 @@ export const toStyle = (theme) => {
|
|
|
184
184
|
"--vui-color-full-shade-rgb": theme.colorFullShadeRgb,
|
|
185
185
|
// Text colors
|
|
186
186
|
"--vui-color-text": theme.colorText,
|
|
187
|
+
"--vui-color-text-rgb": theme.colorTextRgb,
|
|
187
188
|
"--vui-color-label": theme.colorLabel,
|
|
189
|
+
"--vui-color-label-rgb": theme.colorLabelRgb,
|
|
188
190
|
// Border colors
|
|
189
191
|
"--vui-color-border-medium": theme.colorBorderMedium,
|
|
190
|
-
"--vui-color-border-
|
|
192
|
+
"--vui-color-border-medium-rgb": theme.colorBorderMediumRgb,
|
|
193
|
+
"--vui-color-border-light": theme.colorBorderLight,
|
|
194
|
+
"--vui-color-border-light-rgb": theme.colorBorderLightRgb
|
|
191
195
|
};
|
|
192
196
|
// Remove undefined values.
|
|
193
197
|
return Object.fromEntries(Object.entries(vars).filter(([_, v]) => v !== undefined));
|
|
@@ -122,24 +122,32 @@ export const VuiTable = (_a) => {
|
|
|
122
122
|
}, testId: (_c = actionsTestIdProvider === null || actionsTestIdProvider === void 0 ? void 0 : actionsTestIdProvider(row)) !== null && _c !== void 0 ? _c : undefined }) })))] }), rowId));
|
|
123
123
|
});
|
|
124
124
|
}
|
|
125
|
+
const selectAllCheckboxProps = {
|
|
126
|
+
disabled: !isInteractive,
|
|
127
|
+
checked: isInteractive ? allRowsSelected : false,
|
|
128
|
+
onChange: () => {
|
|
129
|
+
let newSelectedRows;
|
|
130
|
+
if (allRowsSelected) {
|
|
131
|
+
newSelectedRows = [];
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
newSelectedRows = rows.reduce((acc, row) => {
|
|
135
|
+
acc.push(row);
|
|
136
|
+
return acc;
|
|
137
|
+
}, []);
|
|
138
|
+
}
|
|
139
|
+
onSelectRow === null || onSelectRow === void 0 ? void 0 : onSelectRow(newSelectedRows);
|
|
140
|
+
},
|
|
141
|
+
"data-testid": "selectAllRowsCheckbox"
|
|
142
|
+
};
|
|
143
|
+
// @ts-expect-error data-testid doesn't exist on {}.
|
|
144
|
+
const { "data-testid": dataTestId } = rest, restProps = __rest(rest, ["data-testid"]);
|
|
125
145
|
return (
|
|
126
146
|
// @ts-expect-error React doesn't support inert yet
|
|
127
|
-
_jsxs("div", Object.assign({ className: "vuiTableWrapper", inert: isDisabled ? "" : null }, { children: [isDisabled && _jsx("div", { className: "vuiTableBlock" }), (hasSearch ||
|
|
147
|
+
_jsxs("div", Object.assign({ className: "vuiTableWrapper", inert: isDisabled ? "" : null, "data-testid": dataTestId }, { children: [isDisabled && _jsx("div", { className: "vuiTableBlock" }), (hasSearch ||
|
|
128
148
|
customControls ||
|
|
129
149
|
(hasBulkActions && selectedRows && selectedRows.length > 0) ||
|
|
130
|
-
Boolean(onReload)) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ spacing: "s", alignItems: "
|
|
131
|
-
let newSelectedRows;
|
|
132
|
-
if (allRowsSelected) {
|
|
133
|
-
newSelectedRows = [];
|
|
134
|
-
}
|
|
135
|
-
else {
|
|
136
|
-
newSelectedRows = rows.reduce((acc, row) => {
|
|
137
|
-
acc.push(row);
|
|
138
|
-
return acc;
|
|
139
|
-
}, []);
|
|
140
|
-
}
|
|
141
|
-
onSelectRow(newSelectedRows);
|
|
142
|
-
} }) }) }))), columns.map((column) => {
|
|
150
|
+
Boolean(onReload)) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ spacing: "s", alignItems: "center", className: isHeaderSticky ? "vuiTableStickyHeader" : undefined, wrap: true }, { children: [onSelectRow && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false, className: "vuiTableHeader__responsiveSelectAllCheckbox" }, { children: _jsx(VuiCheckbox, Object.assign({ label: "Select all" }, selectAllCheckboxProps)) }))), selectedRows && selectedRows.length > 0 && hasBulkActions && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiTableBulkActions, { selectedRows: selectedRows, actions: bulkActions }) }))), hasSearch && (_jsx(VuiFlexItem, Object.assign({ grow: 1, shrink: false }, { children: _jsx(VuiTextInput, Object.assign({ fullWidth: true }, search)) }))), customControls && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: customControls }))), onReload && (_jsx(VuiFlexItem, Object.assign({ grow: 1, shrink: false }, { children: _jsx(VuiFlexContainer, Object.assign({ justifyContent: "end" }, { children: _jsx(VuiButtonSecondary, Object.assign({ color: "neutral", onClick: () => onReload(), "data-testid": reloadTestId }, { children: "Reload" })) })) })))] })), _jsx(VuiSpacer, { size: "s" })] })), _jsxs("table", Object.assign({ className: classes }, restProps, { children: [_jsx("thead", { children: _jsxs("tr", { children: [onSelectRow && (_jsx("th", Object.assign({ className: "vuiTableHeaderSelect" }, { children: _jsx(VuiTableCell, { children: _jsx(VuiCheckbox, Object.assign({}, selectAllCheckboxProps)) }) }))), columns.map((column) => {
|
|
143
151
|
const { name, width } = column;
|
|
144
152
|
const styles = width ? { width } : undefined;
|
|
145
153
|
return (_jsx("th", Object.assign({ style: styles }, { children: _jsx(VuiTableHeaderCell, { column: column, onSort: handleSort, sortDirection: sortColumn === name ? sortDirection : "none" }) }), name));
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
$tableResponsiveBreakpointMedium: 800px;
|
|
2
|
+
$tableResponsiveBreakpointSmall: 500px;
|
|
3
|
+
|
|
1
4
|
.vuiTableWrapper {
|
|
2
5
|
container-type: inline-size;
|
|
3
6
|
width: 100%;
|
|
@@ -66,13 +69,21 @@
|
|
|
66
69
|
}
|
|
67
70
|
}
|
|
68
71
|
|
|
72
|
+
.vuiTableHeader__responsiveSelectAllCheckbox {
|
|
73
|
+
display: none;
|
|
74
|
+
}
|
|
75
|
+
|
|
69
76
|
.vuiTableCell__label {
|
|
70
77
|
font-size: $fontSizeSmall;
|
|
71
78
|
font-weight: $labelFontWeight;
|
|
72
79
|
color: var(--vui-color-label);
|
|
73
80
|
}
|
|
74
81
|
|
|
75
|
-
@container (width <
|
|
82
|
+
@container (width < #{$tableResponsiveBreakpointMedium}) {
|
|
83
|
+
.vuiTableHeader__responsiveSelectAllCheckbox {
|
|
84
|
+
display: flex;
|
|
85
|
+
}
|
|
86
|
+
|
|
76
87
|
.vuiTable--responsive {
|
|
77
88
|
thead {
|
|
78
89
|
display: none;
|
|
@@ -140,7 +151,7 @@
|
|
|
140
151
|
}
|
|
141
152
|
}
|
|
142
153
|
|
|
143
|
-
@container (width <
|
|
154
|
+
@container (width < #{$tableResponsiveBreakpointSmall}) {
|
|
144
155
|
.vuiTable--responsive {
|
|
145
156
|
tbody tr {
|
|
146
157
|
grid-template-columns: 1fr;
|
package/lib/styles/index.css
CHANGED
|
@@ -1377,15 +1377,30 @@ fieldset {
|
|
|
1377
1377
|
color: var(--vui-color-dark-shade) !important;
|
|
1378
1378
|
}
|
|
1379
1379
|
|
|
1380
|
+
@keyframes fullscreenIn {
|
|
1381
|
+
0% {
|
|
1382
|
+
transform: translateY(12px);
|
|
1383
|
+
opacity: 0;
|
|
1384
|
+
}
|
|
1385
|
+
100% {
|
|
1386
|
+
transform: translateY(0);
|
|
1387
|
+
opacity: 1;
|
|
1388
|
+
}
|
|
1389
|
+
}
|
|
1380
1390
|
.vuiCodeFullscreen {
|
|
1381
1391
|
position: fixed;
|
|
1382
|
-
top:
|
|
1383
|
-
left:
|
|
1384
|
-
right:
|
|
1385
|
-
bottom:
|
|
1392
|
+
top: 16px;
|
|
1393
|
+
left: 16px;
|
|
1394
|
+
right: 16px;
|
|
1395
|
+
bottom: 16px;
|
|
1386
1396
|
z-index: 13;
|
|
1387
1397
|
background-color: #f5f2f0;
|
|
1388
1398
|
overflow: auto;
|
|
1399
|
+
scrollbar-width: thin;
|
|
1400
|
+
scrollbar-gutter: stable;
|
|
1401
|
+
border-radius: 4px;
|
|
1402
|
+
box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
|
1403
|
+
animation: fullscreenIn 0.2s cubic-bezier(0, 1, 1, 1);
|
|
1389
1404
|
}
|
|
1390
1405
|
|
|
1391
1406
|
.vuiCodeFullscreen__actions {
|
|
@@ -4881,6 +4896,10 @@ h2.react-datepicker__current-month {
|
|
|
4881
4896
|
word-break: break-word;
|
|
4882
4897
|
}
|
|
4883
4898
|
|
|
4899
|
+
.vuiTableHeader__responsiveSelectAllCheckbox {
|
|
4900
|
+
display: none;
|
|
4901
|
+
}
|
|
4902
|
+
|
|
4884
4903
|
.vuiTableCell__label {
|
|
4885
4904
|
font-size: 12px;
|
|
4886
4905
|
font-weight: 600;
|
|
@@ -4888,6 +4907,9 @@ h2.react-datepicker__current-month {
|
|
|
4888
4907
|
}
|
|
4889
4908
|
|
|
4890
4909
|
@container (width < 800px) {
|
|
4910
|
+
.vuiTableHeader__responsiveSelectAllCheckbox {
|
|
4911
|
+
display: flex;
|
|
4912
|
+
}
|
|
4891
4913
|
.vuiTable--responsive thead {
|
|
4892
4914
|
display: none;
|
|
4893
4915
|
}
|