@vectara/vectara-ui 15.9.5 → 15.9.6
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.
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from "react";
|
|
3
3
|
import { VuiPopover } from "../popover/Popover";
|
|
4
4
|
import { VuiTab } from "./Tab";
|
|
5
5
|
import { VuiTabs } from "./Tabs";
|
|
6
6
|
import { useVuiContext } from "../context/Context";
|
|
7
|
+
import { VuiIcon } from "../icon/Icon";
|
|
8
|
+
import { BiDotsVertical } from "react-icons/bi";
|
|
7
9
|
export const VuiTabsNavigator = ({ routes, popover }) => {
|
|
8
10
|
var _a;
|
|
9
11
|
const { getPath } = useVuiContext();
|
|
10
12
|
const [isOpen, setIsOpen] = useState(false);
|
|
11
13
|
const activeRoute = routes.find((route) => route.isActive || getPath().includes(route.href));
|
|
12
|
-
return (_jsx(VuiPopover, Object.assign({}, popover, { isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx("
|
|
14
|
+
return (_jsx(VuiPopover, Object.assign({}, popover, { isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsx("button", Object.assign({ className: "vuiTabsNavigatorButton" }, { children: _jsxs("div", Object.assign({ className: "vuiTabsNavigatorButton__inner" }, { children: [_jsx(VuiIcon, Object.assign({ size: "xs" }, { children: _jsx(BiDotsVertical, {}) })), _jsx("div", { children: (_a = activeRoute === null || activeRoute === void 0 ? void 0 : activeRoute.title) !== null && _a !== void 0 ? _a : "No selection" })] })) })), padding: "none" }, { children: _jsx(VuiTabs, Object.assign({ size: "s", tabStyle: "enclosed", vertical: true }, { children: routes.map(({ href, title, render, testId, isActive }, index) => {
|
|
13
15
|
const tabLink = (_jsx(VuiTab, Object.assign({ href: href, isActive: isActive !== null && isActive !== void 0 ? isActive : getPath().includes(href), "data-testid": testId, onClick: () => setIsOpen(false) }, { children: title }), index));
|
|
14
16
|
if (render)
|
|
15
17
|
return render(tabLink);
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
.vuiTabsNavigatorButton {
|
|
2
|
+
font-size: $fontSizeStandard;
|
|
3
|
+
background-color: var(--vui-color-light-shade);
|
|
4
|
+
border-radius: $sizeXxs;
|
|
5
|
+
padding: 6px $sizeXs;
|
|
6
|
+
|
|
7
|
+
&:hover {
|
|
8
|
+
.vuiTabsNavigatorButton__inner {
|
|
9
|
+
box-shadow: $shadowLargeEnd;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.vuiTabsNavigatorButton__inner {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
gap: $sizeXs;
|
|
18
|
+
padding: $sizeXxs $sizeS;
|
|
19
|
+
text-overflow: ellipsis;
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
flex-grow: 0;
|
|
22
|
+
flex-shrink: 0;
|
|
23
|
+
text-decoration: none;
|
|
24
|
+
color: var(--vui-color-full-shade);
|
|
25
|
+
background-color: var(--vui-color-empty-shade);
|
|
26
|
+
box-shadow: $shadowSmallEnd;
|
|
27
|
+
border-radius: $sizeXxs;
|
|
28
|
+
transition: box-shadow $transitionSpeed;
|
|
29
|
+
}
|
package/lib/styles/index.css
CHANGED
|
@@ -5427,6 +5427,33 @@ h2.react-datepicker__current-month {
|
|
|
5427
5427
|
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
|
|
5428
5428
|
}
|
|
5429
5429
|
|
|
5430
|
+
.vuiTabsNavigatorButton {
|
|
5431
|
+
font-size: 14px;
|
|
5432
|
+
background-color: var(--vui-color-light-shade);
|
|
5433
|
+
border-radius: 4px;
|
|
5434
|
+
padding: 6px 8px;
|
|
5435
|
+
}
|
|
5436
|
+
.vuiTabsNavigatorButton:hover .vuiTabsNavigatorButton__inner {
|
|
5437
|
+
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
|
|
5438
|
+
}
|
|
5439
|
+
|
|
5440
|
+
.vuiTabsNavigatorButton__inner {
|
|
5441
|
+
display: flex;
|
|
5442
|
+
align-items: center;
|
|
5443
|
+
gap: 8px;
|
|
5444
|
+
padding: 4px 12px;
|
|
5445
|
+
text-overflow: ellipsis;
|
|
5446
|
+
white-space: nowrap;
|
|
5447
|
+
flex-grow: 0;
|
|
5448
|
+
flex-shrink: 0;
|
|
5449
|
+
text-decoration: none;
|
|
5450
|
+
color: var(--vui-color-full-shade);
|
|
5451
|
+
background-color: var(--vui-color-empty-shade);
|
|
5452
|
+
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
|
|
5453
|
+
border-radius: 4px;
|
|
5454
|
+
transition: box-shadow 0.2s;
|
|
5455
|
+
}
|
|
5456
|
+
|
|
5430
5457
|
.vuiTabs {
|
|
5431
5458
|
align-items: center;
|
|
5432
5459
|
justify-content: space-between;
|