@vectara/vectara-ui 13.1.1 → 13.2.3
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/.github/workflows/publish-on-version-change.yml +17 -17
- package/lib/components/button/buttonPrimary.scss +4 -0
- package/lib/components/code/Code.js +15 -7
- package/lib/components/code/_index.scss +25 -8
- package/lib/components/drawer/Drawer.js +2 -1
- package/lib/components/icon/Icon.js +1 -1
- package/lib/components/image/ImagePreview.js +17 -16
- package/lib/components/modal/Modal.js +2 -1
- package/lib/components/summary/Summary.js +1 -1
- package/lib/components/summary/Summary.test.js +158 -117
- package/lib/components/table/Table.js +22 -14
- package/lib/components/table/_index.scss +13 -2
- package/lib/styles/index.css +31 -8
- package/lib/utils/getOverlayProps.d.ts +5 -0
- package/lib/utils/getOverlayProps.js +8 -0
- package/package.json +2 -1
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
name: publish-on-version-change
|
|
2
|
+
|
|
2
3
|
on:
|
|
3
4
|
push:
|
|
4
5
|
branches:
|
|
5
6
|
- main
|
|
7
|
+
|
|
8
|
+
permissions:
|
|
9
|
+
# Allows GitHub Actions to generate OIDC token.
|
|
10
|
+
id-token: write
|
|
11
|
+
contents: read
|
|
12
|
+
|
|
6
13
|
jobs:
|
|
7
14
|
check-version-change:
|
|
8
15
|
name: check-version-change
|
|
@@ -28,24 +35,17 @@ jobs:
|
|
|
28
35
|
needs: [check-version-change]
|
|
29
36
|
if: needs.check-version-change.outputs.did-version-change == 'true'
|
|
30
37
|
steps:
|
|
31
|
-
-
|
|
32
|
-
uses: actions/checkout@v2
|
|
33
|
-
|
|
34
|
-
# Draft a release if version name changed
|
|
35
|
-
- name: Draft release
|
|
36
|
-
run: 'gh release create v${{ needs.check-version-change.outputs.new-version }} -d --title "Release ${{ needs.check-version-change.outputs.new-version }}" --generate-notes'
|
|
37
|
-
env:
|
|
38
|
-
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
38
|
+
- uses: actions/checkout@v4
|
|
39
39
|
|
|
40
|
-
-
|
|
41
|
-
uses: actions/setup-node@v4
|
|
40
|
+
- uses: actions/setup-node@v4
|
|
42
41
|
with:
|
|
42
|
+
node-version: "20"
|
|
43
43
|
registry-url: "https://registry.npmjs.org"
|
|
44
44
|
|
|
45
|
-
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
# Per https://docs.npmjs.com/trusted-publishers, ensure npm 11.5.1 or later is installed.
|
|
46
|
+
- name: Update npm
|
|
47
|
+
run: npm install -g npm@latest
|
|
48
|
+
- run: npm ci
|
|
49
|
+
- run: npm run build
|
|
50
|
+
- run: npm test
|
|
51
|
+
- run: npm publish
|
|
@@ -36,6 +36,10 @@ 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";
|
|
40
|
+
import { VuiFlexItem } from "../flex/FlexItem";
|
|
41
|
+
import { getOverlayProps } from "../../utils/getOverlayProps";
|
|
42
|
+
import { VuiText } from "../typography/Text";
|
|
39
43
|
// PrismJS clears highlighting when language-none is set.
|
|
40
44
|
export const VuiCode = (_a) => {
|
|
41
45
|
var { onCopy, isFullscreenEnabled = true, isCopyEnabled = true, language = "none", fullHeight, children = "" } = _a, rest = __rest(_a, ["onCopy", "isFullscreenEnabled", "isCopyEnabled", "language", "fullHeight", "children"]);
|
|
@@ -58,11 +62,15 @@ export const VuiCode = (_a) => {
|
|
|
58
62
|
onCopy();
|
|
59
63
|
}) }))] })));
|
|
60
64
|
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
|
-
|
|
65
|
+
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: () => {
|
|
66
|
+
setIsFullscreen(false);
|
|
67
|
+
} }, { children: _jsxs("div", Object.assign({ className: "vuiCodeFullscreen" }, getOverlayProps("fullscreenCodeTitle"), { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween", className: "vuiCodeFullscreen__actions" }, { children: [_jsx(VuiFlexItem, { children: _jsx(VuiText, { children: _jsx("p", Object.assign({ id: "fullscreenCodeTitle" }, { children: _jsx("strong", { children: "Code" }) })) }) }), _jsx(VuiFlexItem, { children: _jsxs(VuiFlexContainer, Object.assign({ 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* () {
|
|
68
|
+
yield copyToClipboard(children);
|
|
69
|
+
if (onCopy)
|
|
70
|
+
onCopy();
|
|
71
|
+
}), tooltip: {
|
|
72
|
+
position: "bottom-end"
|
|
73
|
+
} })), _jsx(VuiIconButton, { className: "vuiCodeFullscreen__closeButton", color: "neutral", size: "m", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), "aria-label": "Exit fullscreen code", onClick: () => setIsFullscreen(false), tooltip: {
|
|
74
|
+
position: "bottom-end"
|
|
75
|
+
} })] })) })] })), code] })) })) })) })] })));
|
|
68
76
|
};
|
|
@@ -37,20 +37,37 @@
|
|
|
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
|
-
background-color:
|
|
62
|
+
background-color: var(--vui-color-light-shade);
|
|
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 {
|
|
53
|
-
|
|
54
|
-
right: $sizeS;
|
|
55
|
-
top: $sizeXxs;
|
|
72
|
+
padding: $sizeXs $sizeXxs 0 $sizeL;
|
|
56
73
|
}
|
|
@@ -21,6 +21,7 @@ import { VuiIcon } from "../icon/Icon";
|
|
|
21
21
|
import { VuiPortal } from "../portal/Portal";
|
|
22
22
|
import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
|
|
23
23
|
import { useVuiContext } from "../context/Context";
|
|
24
|
+
import { getOverlayProps } from "../../utils/getOverlayProps";
|
|
24
25
|
const COLOR = ["primary", "danger"];
|
|
25
26
|
export const VuiDrawer = (_a) => {
|
|
26
27
|
var { className, color = "primary", title, icon, children, isOpen, onClose } = _a, rest = __rest(_a, ["className", "color", "title", "icon", "children", "isOpen", "onClose"]);
|
|
@@ -49,5 +50,5 @@ export const VuiDrawer = (_a) => {
|
|
|
49
50
|
returnFocus: false,
|
|
50
51
|
// Enable focus on contents when it's open,
|
|
51
52
|
// but enable manual focus return to work when it's closed.
|
|
52
|
-
autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiDrawerHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) }))] })) })) })) }));
|
|
53
|
+
autoFocus: isOpen }, { children: _jsxs("div", Object.assign({ className: classes }, rest, getOverlayProps("drawerTitle"), { children: [_jsx("div", Object.assign({ className: "vuiDrawerHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiDrawerHeader__title" }, { children: _jsx(DrawerTitle, Object.assign({ id: "drawerTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "drawerCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiDrawerContent" }, { children: _jsx("div", Object.assign({ className: "vuiDrawerContent__inner" }, { children: children })) }))] })) })) })) }));
|
|
53
54
|
};
|
|
@@ -31,5 +31,5 @@ export const VuiIcon = (_a) => {
|
|
|
31
31
|
const icon = cloneElement(children, {
|
|
32
32
|
size: sizeToValueMap[size]
|
|
33
33
|
});
|
|
34
|
-
return (_jsx(IconContext.Provider, Object.assign({ value: { className: innerClasses } }, { children: _jsx("span", Object.assign({ className: classes }, rest, { children: icon })) })));
|
|
34
|
+
return (_jsx(IconContext.Provider, Object.assign({ value: { className: innerClasses } }, { children: _jsx("span", Object.assign({ className: classes }, rest, { "aria-hidden": "true" }, { children: icon })) })));
|
|
35
35
|
};
|
|
@@ -9,6 +9,7 @@ import { VuiFlexContainer } from "../flex/FlexContainer";
|
|
|
9
9
|
import { VuiFlexItem } from "../flex/FlexItem";
|
|
10
10
|
import { VuiText } from "../typography/Text";
|
|
11
11
|
import { VuiTextColor } from "../typography/TextColor";
|
|
12
|
+
import { getOverlayProps } from "../../utils/getOverlayProps";
|
|
12
13
|
export const VuiImagePreview = ({ images, initialIndex = 0, isOpen, onClose, className }) => {
|
|
13
14
|
const returnFocusElRef = useRef(null);
|
|
14
15
|
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
|
@@ -49,20 +50,20 @@ export const VuiImagePreview = ({ images, initialIndex = 0, isOpen, onClose, cla
|
|
|
49
50
|
const handleOnClose = () => {
|
|
50
51
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
51
52
|
};
|
|
52
|
-
return (_jsx(VuiPortal, { children: isOpen && (_jsx(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
53
|
+
return (_jsx(VuiPortal, { children: isOpen && (_jsx(FocusOn, Object.assign({ onEscapeKey: handleOnClose, returnFocus: false, autoFocus: isOpen }, { children: _jsx("figure", Object.assign({ className: className }, getOverlayProps("imagePreviewTitle"), { children: _jsx("div", Object.assign({ className: "vuiImagePreview__container" }, { children: _jsxs("div", Object.assign({ className: "vuiImagePreview__mask", onClick: handleOnClose }, { children: [_jsx("div", Object.assign({ onClick: (e) => e.stopPropagation() }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween", className: "vuiImagePreview__header" }, { children: [_jsx(VuiFlexItem, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [isCarousel && (_jsxs(_Fragment, { children: [_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Previous image", onClick: (e) => {
|
|
54
|
+
e.stopPropagation();
|
|
55
|
+
handlePrevious();
|
|
56
|
+
}, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronLeft, {}) })), tooltip: {
|
|
57
|
+
darkTheme: true,
|
|
58
|
+
position: "bottom-end"
|
|
59
|
+
} }) }), _jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Next image", onClick: (e) => {
|
|
60
|
+
e.stopPropagation();
|
|
61
|
+
handleNext();
|
|
62
|
+
}, color: "neutral", size: "s", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "empty" }, { children: _jsx(BiChevronRight, {}) })), tooltip: {
|
|
63
|
+
darkTheme: true,
|
|
64
|
+
position: "bottom"
|
|
65
|
+
} }) })] })), _jsx(VuiFlexItem, { children: _jsx(VuiText, Object.assign({ size: "s" }, { children: _jsx(VuiTextColor, Object.assign({ color: "empty" }, { children: _jsxs("figcaption", Object.assign({ id: "imagePreviewTitle" }, { children: [isCarousel && `Image ${currentIndex + 1} of ${images.length}: `, images[currentIndex].caption] })) })) })) })] })) }), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImagePreview__closeButton" }, { children: _jsx(VuiIconButton, { "aria-label": "Close preview", onClick: handleOnClose, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "l", color: "empty" }, { children: _jsx(BiX, {}) })), tooltip: {
|
|
66
|
+
darkTheme: true,
|
|
67
|
+
position: "bottom-end"
|
|
68
|
+
} }) })) }))] })) })), _jsx("div", Object.assign({ className: "vuiImagePreview__imageContainer" }, { children: _jsx("img", { src: images[currentIndex].src, alt: images[currentIndex].alt, className: "vuiImagePreview__image", draggable: false }) }))] })) })) })) }))) }));
|
|
68
69
|
};
|
|
@@ -21,6 +21,7 @@ import { VuiIcon } from "../icon/Icon";
|
|
|
21
21
|
import { VuiPortal } from "../portal/Portal";
|
|
22
22
|
import { VuiScreenBlock } from "../screenBlock/ScreenBlock";
|
|
23
23
|
import { useVuiContext } from "../context/Context";
|
|
24
|
+
import { getOverlayProps } from "../../utils/getOverlayProps";
|
|
24
25
|
const COLOR = ["primary", "danger"];
|
|
25
26
|
export const VuiModal = (_a) => {
|
|
26
27
|
var { className, color = "primary", title, icon, children, isOpen, onClose, key, canClickOutsideToClose = true, size = "s" } = _a, rest = __rest(_a, ["className", "color", "title", "icon", "children", "isOpen", "onClose", "key", "canClickOutsideToClose", "size"]);
|
|
@@ -49,5 +50,5 @@ export const VuiModal = (_a) => {
|
|
|
49
50
|
returnFocus: false,
|
|
50
51
|
// Enable focus on contents when it's open,
|
|
51
52
|
// but enable manual focus return to work when it's closed.
|
|
52
|
-
autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, { children: title }) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "modalCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }, key)) }));
|
|
53
|
+
autoFocus: isOpen }, { children: _jsx("div", Object.assign({ className: "vuiModalContainer" }, getOverlayProps("modalTitle"), { children: _jsxs("div", Object.assign({ className: classes }, rest, { children: [_jsx("div", Object.assign({ className: "vuiModalHeader" }, { children: _jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "l" }, { children: icon })) }))), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiModalHeader__title" }, { children: _jsx(DrawerTitle, Object.assign({ id: "modalTitle" }, { children: title })) })) }))] })) })), onClose && (_jsx(VuiFlexItem, { children: _jsx(VuiIconButton, { "aria-label": "Close", "data-testid": "modalCloseButton", onClick: onCloseDelayed, color: "neutral", icon: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: _jsx(BiX, {}) })) }) }))] })) })), _jsx("div", Object.assign({ className: "vuiModalContent" }, { children: _jsx("div", Object.assign({ className: "vuiModalContent__inner" }, { children: children })) }))] })) })) })) }, key)) }));
|
|
53
54
|
};
|
|
@@ -50,5 +50,5 @@ export const VuiSummary = (_a) => {
|
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
} }));
|
|
53
|
-
return (_jsx("div", Object.assign({ className: classes, dir: "auto" }, rest, { children: summary ? (
|
|
53
|
+
return (_jsx("div", Object.assign({ className: classes, dir: "auto" }, rest, { children: summary ? (_jsxs(VuiText, Object.assign({ size: "m" }, { children: [parsedSummary, statusIndicator] }))) : (statusIndicator) })));
|
|
54
54
|
};
|
|
@@ -40,7 +40,6 @@ With some **bold** and _emphasized_ test. Here is a [link](https://www.vectara.c
|
|
|
40
40
|
<div
|
|
41
41
|
class="vuiText vuiText--m"
|
|
42
42
|
>
|
|
43
|
-
<p />
|
|
44
43
|
<div>
|
|
45
44
|
<h1
|
|
46
45
|
id="heres-a-heading-1"
|
|
@@ -107,34 +106,33 @@ With some **bold** and _emphasized_ test. Here is a [link](https://www.vectara.c
|
|
|
107
106
|
<thead>
|
|
108
107
|
<tr>
|
|
109
108
|
<th>
|
|
110
|
-
|
|
109
|
+
Syntax
|
|
111
110
|
</th>
|
|
112
111
|
<th>
|
|
113
|
-
|
|
112
|
+
Description
|
|
114
113
|
</th>
|
|
115
114
|
</tr>
|
|
116
115
|
</thead>
|
|
117
116
|
<tbody>
|
|
118
117
|
<tr>
|
|
119
118
|
<td>
|
|
120
|
-
|
|
119
|
+
Header
|
|
121
120
|
</td>
|
|
122
121
|
<td>
|
|
123
|
-
|
|
122
|
+
Title
|
|
124
123
|
</td>
|
|
125
124
|
</tr>
|
|
126
125
|
<tr>
|
|
127
126
|
<td>
|
|
128
|
-
|
|
127
|
+
Paragraph
|
|
129
128
|
</td>
|
|
130
129
|
<td>
|
|
131
|
-
|
|
130
|
+
Text
|
|
132
131
|
</td>
|
|
133
132
|
</tr>
|
|
134
133
|
</tbody>
|
|
135
134
|
</table>
|
|
136
135
|
</div>
|
|
137
|
-
<p />
|
|
138
136
|
</div>
|
|
139
137
|
</div>
|
|
140
138
|
</DocumentFragment>
|
|
@@ -175,13 +173,13 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
175
173
|
<div
|
|
176
174
|
class="vuiText vuiText--m"
|
|
177
175
|
>
|
|
178
|
-
<p />
|
|
179
176
|
<div>
|
|
180
177
|
<h1
|
|
181
178
|
id="summarycitation-reference1--heres-a-heading-1"
|
|
182
179
|
>
|
|
183
180
|
<button
|
|
184
181
|
class="vuiSummaryCitation"
|
|
182
|
+
type="button"
|
|
185
183
|
>
|
|
186
184
|
1
|
|
187
185
|
</button>
|
|
@@ -192,6 +190,7 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
192
190
|
>
|
|
193
191
|
<button
|
|
194
192
|
class="vuiSummaryCitation"
|
|
193
|
+
type="button"
|
|
195
194
|
>
|
|
196
195
|
1
|
|
197
196
|
</button>
|
|
@@ -202,6 +201,7 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
202
201
|
>
|
|
203
202
|
<button
|
|
204
203
|
class="vuiSummaryCitation"
|
|
204
|
+
type="button"
|
|
205
205
|
>
|
|
206
206
|
1
|
|
207
207
|
</button>
|
|
@@ -212,6 +212,7 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
212
212
|
>
|
|
213
213
|
<button
|
|
214
214
|
class="vuiSummaryCitation"
|
|
215
|
+
type="button"
|
|
215
216
|
>
|
|
216
217
|
1
|
|
217
218
|
</button>
|
|
@@ -222,13 +223,16 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
222
223
|
<strong>
|
|
223
224
|
bold
|
|
224
225
|
</strong>
|
|
226
|
+
|
|
225
227
|
<button
|
|
226
228
|
class="vuiSummaryCitation"
|
|
229
|
+
type="button"
|
|
227
230
|
>
|
|
228
231
|
2
|
|
229
232
|
</button>
|
|
230
233
|
<button
|
|
231
234
|
class="vuiSummaryCitation"
|
|
235
|
+
type="button"
|
|
232
236
|
>
|
|
233
237
|
3
|
|
234
238
|
</button>
|
|
@@ -236,13 +240,16 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
236
240
|
<em>
|
|
237
241
|
emphasized
|
|
238
242
|
</em>
|
|
243
|
+
|
|
239
244
|
<button
|
|
240
245
|
class="vuiSummaryCitation"
|
|
246
|
+
type="button"
|
|
241
247
|
>
|
|
242
248
|
2
|
|
243
249
|
</button>
|
|
244
250
|
<button
|
|
245
251
|
class="vuiSummaryCitation"
|
|
252
|
+
type="button"
|
|
246
253
|
>
|
|
247
254
|
3
|
|
248
255
|
</button>
|
|
@@ -252,13 +259,16 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
252
259
|
>
|
|
253
260
|
link
|
|
254
261
|
</a>
|
|
262
|
+
|
|
255
263
|
<button
|
|
256
264
|
class="vuiSummaryCitation"
|
|
265
|
+
type="button"
|
|
257
266
|
>
|
|
258
267
|
2
|
|
259
268
|
</button>
|
|
260
269
|
<button
|
|
261
270
|
class="vuiSummaryCitation"
|
|
271
|
+
type="button"
|
|
262
272
|
>
|
|
263
273
|
3
|
|
264
274
|
</button>
|
|
@@ -269,11 +279,13 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
269
279
|
An
|
|
270
280
|
<button
|
|
271
281
|
class="vuiSummaryCitation"
|
|
282
|
+
type="button"
|
|
272
283
|
>
|
|
273
284
|
2
|
|
274
285
|
</button>
|
|
275
286
|
<button
|
|
276
287
|
class="vuiSummaryCitation"
|
|
288
|
+
type="button"
|
|
277
289
|
>
|
|
278
290
|
3
|
|
279
291
|
</button>
|
|
@@ -282,11 +294,13 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
282
294
|
Unordered
|
|
283
295
|
<button
|
|
284
296
|
class="vuiSummaryCitation"
|
|
297
|
+
type="button"
|
|
285
298
|
>
|
|
286
299
|
2
|
|
287
300
|
</button>
|
|
288
301
|
<button
|
|
289
302
|
class="vuiSummaryCitation"
|
|
303
|
+
type="button"
|
|
290
304
|
>
|
|
291
305
|
3
|
|
292
306
|
</button>
|
|
@@ -295,11 +309,13 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
295
309
|
List
|
|
296
310
|
<button
|
|
297
311
|
class="vuiSummaryCitation"
|
|
312
|
+
type="button"
|
|
298
313
|
>
|
|
299
314
|
2
|
|
300
315
|
</button>
|
|
301
316
|
<button
|
|
302
317
|
class="vuiSummaryCitation"
|
|
318
|
+
type="button"
|
|
303
319
|
>
|
|
304
320
|
3
|
|
305
321
|
</button>
|
|
@@ -312,11 +328,13 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
312
328
|
An
|
|
313
329
|
<button
|
|
314
330
|
class="vuiSummaryCitation"
|
|
331
|
+
type="button"
|
|
315
332
|
>
|
|
316
333
|
2
|
|
317
334
|
</button>
|
|
318
335
|
<button
|
|
319
336
|
class="vuiSummaryCitation"
|
|
337
|
+
type="button"
|
|
320
338
|
>
|
|
321
339
|
3
|
|
322
340
|
</button>
|
|
@@ -325,11 +343,13 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
325
343
|
Ordered
|
|
326
344
|
<button
|
|
327
345
|
class="vuiSummaryCitation"
|
|
346
|
+
type="button"
|
|
328
347
|
>
|
|
329
348
|
2
|
|
330
349
|
</button>
|
|
331
350
|
<button
|
|
332
351
|
class="vuiSummaryCitation"
|
|
352
|
+
type="button"
|
|
333
353
|
>
|
|
334
354
|
3
|
|
335
355
|
</button>
|
|
@@ -338,11 +358,13 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
338
358
|
List
|
|
339
359
|
<button
|
|
340
360
|
class="vuiSummaryCitation"
|
|
361
|
+
type="button"
|
|
341
362
|
>
|
|
342
363
|
2
|
|
343
364
|
</button>
|
|
344
365
|
<button
|
|
345
366
|
class="vuiSummaryCitation"
|
|
367
|
+
type="button"
|
|
346
368
|
>
|
|
347
369
|
3
|
|
348
370
|
</button>
|
|
@@ -352,44 +374,46 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
352
374
|
<thead>
|
|
353
375
|
<tr>
|
|
354
376
|
<th>
|
|
355
|
-
|
|
377
|
+
Syntax
|
|
356
378
|
</th>
|
|
357
379
|
<th>
|
|
358
|
-
|
|
380
|
+
Description
|
|
359
381
|
</th>
|
|
360
382
|
</tr>
|
|
361
383
|
</thead>
|
|
362
384
|
<tbody>
|
|
363
385
|
<tr>
|
|
364
386
|
<td>
|
|
365
|
-
|
|
387
|
+
Header
|
|
366
388
|
</td>
|
|
367
389
|
<td>
|
|
368
|
-
|
|
390
|
+
Title
|
|
369
391
|
<button
|
|
370
392
|
class="vuiSummaryCitation"
|
|
393
|
+
type="button"
|
|
371
394
|
>
|
|
372
395
|
2
|
|
373
396
|
</button>
|
|
374
397
|
<button
|
|
375
398
|
class="vuiSummaryCitation"
|
|
399
|
+
type="button"
|
|
376
400
|
>
|
|
377
401
|
3
|
|
378
402
|
</button>
|
|
403
|
+
|
|
379
404
|
</td>
|
|
380
405
|
</tr>
|
|
381
406
|
<tr>
|
|
382
407
|
<td>
|
|
383
|
-
|
|
408
|
+
Paragraph
|
|
384
409
|
</td>
|
|
385
410
|
<td>
|
|
386
|
-
|
|
411
|
+
Text
|
|
387
412
|
</td>
|
|
388
413
|
</tr>
|
|
389
414
|
</tbody>
|
|
390
415
|
</table>
|
|
391
416
|
</div>
|
|
392
|
-
<p />
|
|
393
417
|
</div>
|
|
394
418
|
</div>
|
|
395
419
|
</DocumentFragment>
|
|
@@ -409,45 +433,49 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
409
433
|
<div
|
|
410
434
|
class="vuiText vuiText--m"
|
|
411
435
|
>
|
|
412
|
-
<
|
|
413
|
-
<
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
436
|
+
<span>
|
|
437
|
+
<button
|
|
438
|
+
class="vuiSummaryCitation"
|
|
439
|
+
type="button"
|
|
440
|
+
>
|
|
441
|
+
1
|
|
442
|
+
</button>
|
|
443
|
+
Beginning of summary.
|
|
444
|
+
<button
|
|
445
|
+
class="vuiSummaryCitation"
|
|
446
|
+
type="button"
|
|
447
|
+
>
|
|
448
|
+
2
|
|
449
|
+
</button>
|
|
450
|
+
<button
|
|
451
|
+
class="vuiSummaryCitation"
|
|
452
|
+
type="button"
|
|
453
|
+
>
|
|
454
|
+
3
|
|
455
|
+
</button>
|
|
456
|
+
Multiple at beginning of sentence, and before comma
|
|
457
|
+
<button
|
|
458
|
+
class="vuiSummaryCitation"
|
|
459
|
+
type="button"
|
|
460
|
+
>
|
|
461
|
+
4
|
|
462
|
+
</button>
|
|
463
|
+
, single at middle
|
|
464
|
+
<button
|
|
465
|
+
class="vuiSummaryCitation"
|
|
466
|
+
type="button"
|
|
467
|
+
>
|
|
468
|
+
5
|
|
469
|
+
</button>
|
|
470
|
+
of sentence. At end of sentence
|
|
471
|
+
<button
|
|
472
|
+
class="vuiSummaryCitation"
|
|
473
|
+
type="button"
|
|
474
|
+
>
|
|
475
|
+
6
|
|
476
|
+
</button>
|
|
477
|
+
.
|
|
478
|
+
</span>
|
|
451
479
|
</div>
|
|
452
480
|
</div>
|
|
453
481
|
</DocumentFragment>
|
|
@@ -465,16 +493,15 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
465
493
|
<div
|
|
466
494
|
class="vuiText vuiText--m"
|
|
467
495
|
>
|
|
468
|
-
<
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
</p>
|
|
496
|
+
<span>
|
|
497
|
+
End of summary.
|
|
498
|
+
<button
|
|
499
|
+
class="vuiSummaryCitation"
|
|
500
|
+
type="button"
|
|
501
|
+
>
|
|
502
|
+
1
|
|
503
|
+
</button>
|
|
504
|
+
</span>
|
|
478
505
|
</div>
|
|
479
506
|
</div>
|
|
480
507
|
</DocumentFragment>
|
|
@@ -492,58 +519,72 @@ With some **bold** [2][3] and _emphasized_ [2][3] test. Here is a [link](https:/
|
|
|
492
519
|
<div
|
|
493
520
|
class="vuiText vuiText--m"
|
|
494
521
|
>
|
|
495
|
-
<
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
522
|
+
<span>
|
|
523
|
+
Two citations
|
|
524
|
+
<button
|
|
525
|
+
class="vuiSummaryCitation"
|
|
526
|
+
type="button"
|
|
527
|
+
>
|
|
528
|
+
1
|
|
529
|
+
</button>
|
|
530
|
+
|
|
531
|
+
<button
|
|
532
|
+
class="vuiSummaryCitation"
|
|
533
|
+
type="button"
|
|
534
|
+
>
|
|
535
|
+
2
|
|
536
|
+
</button>
|
|
537
|
+
and seven citations
|
|
538
|
+
<button
|
|
539
|
+
class="vuiSummaryCitation"
|
|
540
|
+
type="button"
|
|
541
|
+
>
|
|
542
|
+
1
|
|
543
|
+
</button>
|
|
544
|
+
|
|
545
|
+
<button
|
|
546
|
+
class="vuiSummaryCitation"
|
|
547
|
+
type="button"
|
|
548
|
+
>
|
|
549
|
+
2
|
|
550
|
+
</button>
|
|
551
|
+
|
|
552
|
+
<button
|
|
553
|
+
class="vuiSummaryCitation"
|
|
554
|
+
type="button"
|
|
555
|
+
>
|
|
556
|
+
3
|
|
557
|
+
</button>
|
|
558
|
+
|
|
559
|
+
<button
|
|
560
|
+
class="vuiSummaryCitation"
|
|
561
|
+
type="button"
|
|
562
|
+
>
|
|
563
|
+
4
|
|
564
|
+
</button>
|
|
565
|
+
|
|
566
|
+
<button
|
|
567
|
+
class="vuiSummaryCitation"
|
|
568
|
+
type="button"
|
|
569
|
+
>
|
|
570
|
+
5
|
|
571
|
+
</button>
|
|
572
|
+
|
|
573
|
+
<button
|
|
574
|
+
class="vuiSummaryCitation"
|
|
575
|
+
type="button"
|
|
576
|
+
>
|
|
577
|
+
6
|
|
578
|
+
</button>
|
|
579
|
+
|
|
580
|
+
<button
|
|
581
|
+
class="vuiSummaryCitation"
|
|
582
|
+
type="button"
|
|
583
|
+
>
|
|
584
|
+
7
|
|
585
|
+
</button>
|
|
586
|
+
.
|
|
587
|
+
</span>
|
|
547
588
|
</div>
|
|
548
589
|
</div>
|
|
549
590
|
</DocumentFragment>
|
|
@@ -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
|
@@ -729,6 +729,9 @@ fieldset {
|
|
|
729
729
|
.vuiButtonPrimary:hover {
|
|
730
730
|
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
|
|
731
731
|
}
|
|
732
|
+
.vuiButtonPrimary:focus-visible {
|
|
733
|
+
outline-offset: 4px;
|
|
734
|
+
}
|
|
732
735
|
|
|
733
736
|
.vuiButtonPrimary--accent {
|
|
734
737
|
color: #ffffff;
|
|
@@ -1377,21 +1380,34 @@ fieldset {
|
|
|
1377
1380
|
color: var(--vui-color-dark-shade) !important;
|
|
1378
1381
|
}
|
|
1379
1382
|
|
|
1383
|
+
@keyframes fullscreenIn {
|
|
1384
|
+
0% {
|
|
1385
|
+
transform: translateY(12px);
|
|
1386
|
+
opacity: 0;
|
|
1387
|
+
}
|
|
1388
|
+
100% {
|
|
1389
|
+
transform: translateY(0);
|
|
1390
|
+
opacity: 1;
|
|
1391
|
+
}
|
|
1392
|
+
}
|
|
1380
1393
|
.vuiCodeFullscreen {
|
|
1381
1394
|
position: fixed;
|
|
1382
|
-
top:
|
|
1383
|
-
left:
|
|
1384
|
-
right:
|
|
1385
|
-
bottom:
|
|
1395
|
+
top: 16px;
|
|
1396
|
+
left: 16px;
|
|
1397
|
+
right: 16px;
|
|
1398
|
+
bottom: 16px;
|
|
1386
1399
|
z-index: 13;
|
|
1387
|
-
background-color:
|
|
1400
|
+
background-color: var(--vui-color-light-shade);
|
|
1388
1401
|
overflow: auto;
|
|
1402
|
+
scrollbar-width: thin;
|
|
1403
|
+
scrollbar-gutter: stable;
|
|
1404
|
+
border-radius: 4px;
|
|
1405
|
+
box-shadow: rgba(57, 57, 75, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
|
|
1406
|
+
animation: fullscreenIn 0.2s cubic-bezier(0, 1, 1, 1);
|
|
1389
1407
|
}
|
|
1390
1408
|
|
|
1391
1409
|
.vuiCodeFullscreen__actions {
|
|
1392
|
-
|
|
1393
|
-
right: 12px;
|
|
1394
|
-
top: 4px;
|
|
1410
|
+
padding: 8px 4px 0 24px;
|
|
1395
1411
|
}
|
|
1396
1412
|
|
|
1397
1413
|
.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
|
|
@@ -4881,6 +4897,10 @@ h2.react-datepicker__current-month {
|
|
|
4881
4897
|
word-break: break-word;
|
|
4882
4898
|
}
|
|
4883
4899
|
|
|
4900
|
+
.vuiTableHeader__responsiveSelectAllCheckbox {
|
|
4901
|
+
display: none;
|
|
4902
|
+
}
|
|
4903
|
+
|
|
4884
4904
|
.vuiTableCell__label {
|
|
4885
4905
|
font-size: 12px;
|
|
4886
4906
|
font-weight: 600;
|
|
@@ -4888,6 +4908,9 @@ h2.react-datepicker__current-month {
|
|
|
4888
4908
|
}
|
|
4889
4909
|
|
|
4890
4910
|
@container (width < 800px) {
|
|
4911
|
+
.vuiTableHeader__responsiveSelectAllCheckbox {
|
|
4912
|
+
display: flex;
|
|
4913
|
+
}
|
|
4891
4914
|
.vuiTable--responsive thead {
|
|
4892
4915
|
display: none;
|
|
4893
4916
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vectara/vectara-ui",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.2.3",
|
|
4
4
|
"homepage": "./",
|
|
5
5
|
"description": "Vectara's design system, codified as a React and Sass component library",
|
|
6
6
|
"author": "Vectara",
|
|
@@ -67,6 +67,7 @@
|
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
69
|
"@testing-library/dom": "^10.4.1",
|
|
70
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
70
71
|
"@testing-library/react": "^16.3.0",
|
|
71
72
|
"@testing-library/user-event": "^14.6.1",
|
|
72
73
|
"@types/lodash": "^4.14.196",
|