@vezham/react 26.0.0-beta.1 → 26.0.0-beta.2
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/lib/components/panel/header/bookmarks/types.d.ts +0 -5
- package/dist/lib/components/panel/header/bookmarks/types.d.ts.map +1 -1
- package/dist/lib/components/panel/menu/types.d.ts +1 -10
- package/dist/lib/components/panel/menu/types.d.ts.map +1 -1
- package/dist/lib/layouts/section/index.d.ts.map +1 -1
- package/dist/lib/layouts/section/index.js +51 -66
- package/dist/lib/layouts/section/tab-navigation.d.ts +12 -0
- package/dist/lib/layouts/section/tab-navigation.d.ts.map +1 -0
- package/dist/lib/layouts/section/tab-navigation.js +32 -0
- package/dist/lib/layouts/section/toolbar.d.ts +3 -0
- package/dist/lib/layouts/section/toolbar.d.ts.map +1 -1
- package/dist/lib/layouts/section/toolbar.js +10 -13
- package/package.json +2 -2
|
@@ -15,11 +15,6 @@ export interface BookmarkTreeItem {
|
|
|
15
15
|
}
|
|
16
16
|
export type TreeKey = string | number;
|
|
17
17
|
export type TreeSelection = 'all' | Set<TreeKey>;
|
|
18
|
-
export interface BookmarkFileTreeNode {
|
|
19
|
-
key: TreeKey;
|
|
20
|
-
value: BookmarkTreeItem;
|
|
21
|
-
children?: BookmarkFileTreeNode[] | null;
|
|
22
|
-
}
|
|
23
18
|
export interface FavoriteItemRendererProps {
|
|
24
19
|
item: FavoriteItem;
|
|
25
20
|
onItemClick?: (url: string) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/header/bookmarks/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI/E,OAAO,KAAK,EACV,YAAY,EACZ,YAAY,EACb,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,OAAO,EAAO,MAAM,WAAW,CAAA;AAEjD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AAE1C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAA;CAC9B;AAED,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AACrC,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,CAAA;AAEhD,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/header/bookmarks/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
|
|
2
2
|
import { tvProps, tvSlots } from './variant';
|
|
3
|
-
type SubMenuItem = {
|
|
4
|
-
key: string;
|
|
5
|
-
title: string;
|
|
6
|
-
href?: string;
|
|
7
|
-
icon?: string;
|
|
8
|
-
iconActive?: string;
|
|
9
|
-
endContent?: ReactNode;
|
|
10
|
-
submenu?: SubMenuItem[];
|
|
11
|
-
};
|
|
12
3
|
type MenuItem = {
|
|
13
4
|
key: string;
|
|
14
5
|
title: string;
|
|
@@ -518,5 +509,5 @@ declare const useProps: (originalProps: Props) => {
|
|
|
518
509
|
onSubmenuChange: ((state: SubmenuState) => void) | undefined;
|
|
519
510
|
};
|
|
520
511
|
export { useProps };
|
|
521
|
-
export type { Props, MenuItem
|
|
512
|
+
export type { Props, MenuItem };
|
|
522
513
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI/E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAO,MAAM,WAAW,CAAA;AAEjD,KAAK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,KAAK,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI/E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAO,MAAM,WAAW,CAAA;AAEjD,KAAK,QAAQ,GAAG;IACd,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,UAAU,KACR,SAAQ,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/D,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAC7C,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;CAChD;AAED,QAAA,MAAM,QAAQ,GAAI,eAAe,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAgDjC;QACD,IAAI,EAAE,QAAQ,CAAA;QACd,QAAQ,EAAE,OAAO,CAAA;KAClB;;;;;;;;iCAYmC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;;kCAgBpB;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;qBApFzC,MAAM,KAAK,IAAI;8BAEN,YAAY,KAAK,IAAI;CA+GhD,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA;AACnB,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAWd,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAI7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAWd,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAI7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,aAAa,EAElB,KAAK,iBAAiB,EAEvB,MAAM,WAAW,CAAA;AAMlB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAClC,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAA;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAmaD,QAAA,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAI/C,CAAA;AAED,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,aAAa,EAAE,CAAA;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA;AAEjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA"}
|
|
@@ -6,12 +6,13 @@ import { ShortcutButton } from "../../components/shortcut-key/index.js";
|
|
|
6
6
|
import { useSectionPreferences } from "./preferences.js";
|
|
7
7
|
import { useSectionSidebarState } from "./sidebar-state.js";
|
|
8
8
|
import { SectionSidebar } from "./sidebar.js";
|
|
9
|
+
import { SectionTabNavigation } from "./tab-navigation.js";
|
|
9
10
|
import { useMobileToolbarNavigation } from "./toolbar-more-sheet.js";
|
|
10
11
|
import { SectionActiveFilters, SectionToolbar } from "./toolbar.js";
|
|
11
12
|
import { SectionToolbarContentProvider, useRegisteredSectionToolbarContent, useSectionToolbarContent } from "./toolbar-content.js";
|
|
12
13
|
import { useLocation, useNavigate, useRouter } from "@tanstack/react-router";
|
|
13
14
|
import { useCallback, useEffect, useId, useRef, useState } from "react";
|
|
14
|
-
import { Drawer, Surface,
|
|
15
|
+
import { Drawer, Surface, useMediaQuery } from "@vezham/react-v3";
|
|
15
16
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
16
17
|
import { useHotkey } from "@tanstack/react-hotkeys";
|
|
17
18
|
//#region src/lib/layouts/section/index.tsx
|
|
@@ -19,24 +20,7 @@ var EMPTY_SIDEBAR_ITEMS = [];
|
|
|
19
20
|
var EMPTY_MENU_ACTIONS = [];
|
|
20
21
|
var EMPTY_VIEW_ACTIONS = [];
|
|
21
22
|
var matchesPath = (pathname, href) => Boolean(href && (pathname === href || pathname.startsWith(`${href}/`)));
|
|
22
|
-
var
|
|
23
|
-
className: `scrollbar-hide order-2 mb-3 w-fit min-w-0 self-center overflow-x-auto rounded-full ${search && primaryAction ? "max-w-[calc(100%-9rem)]" : "max-w-[calc(100%-1.5rem)]"}`,
|
|
24
|
-
children: /* @__PURE__ */ jsx(Tabs.List, {
|
|
25
|
-
"aria-label": `${title} tabs`,
|
|
26
|
-
className: "flex min-w-max flex-nowrap *:whitespace-nowrap",
|
|
27
|
-
children: displayTabs.map((tab) => /* @__PURE__ */ jsxs(Tabs.Tab, {
|
|
28
|
-
id: tab.key,
|
|
29
|
-
className: "whitespace-nowrap",
|
|
30
|
-
children: [tab.title, /* @__PURE__ */ jsx(Tabs.Indicator, {})]
|
|
31
|
-
}, tab.key))
|
|
32
|
-
})
|
|
33
|
-
}, JSON.stringify(displayTabs.map((tab) => tab.key)));
|
|
34
|
-
var SectionPanels = ({ displayTabs, selectedTab, children }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [displayTabs.length === 0 && children, displayTabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
|
|
35
|
-
id: tab.key,
|
|
36
|
-
className: "m-0 flex min-h-0 flex-1 flex-col p-0",
|
|
37
|
-
children: tab.key === selectedTab?.key && children
|
|
38
|
-
}, tab.key))] });
|
|
39
|
-
var SectionBody = ({ hasSidebar, isNavigationCollapsed, sidebarId, sidebar, filter, selectedFilters, setSelectedFilters, displayTabs, selectedTab, children }) => /* @__PURE__ */ jsxs("div", {
|
|
23
|
+
var SectionBody = ({ hasSidebar, isNavigationCollapsed, sidebarId, sidebar, filter, selectedFilters, setSelectedFilters, panelId, selectedTab, children }) => /* @__PURE__ */ jsxs("div", {
|
|
40
24
|
className: "order-1 flex min-h-0 min-w-0 flex-1",
|
|
41
25
|
children: [hasSidebar && !isNavigationCollapsed && /* @__PURE__ */ jsx("aside", {
|
|
42
26
|
id: sidebarId,
|
|
@@ -49,9 +33,12 @@ var SectionBody = ({ hasSidebar, isNavigationCollapsed, sidebarId, sidebar, filt
|
|
|
49
33
|
onSelectedFiltersChange: setSelectedFilters
|
|
50
34
|
}), /* @__PURE__ */ jsx(Surface, {
|
|
51
35
|
className: "relative flex min-h-0 flex-1 flex-col rounded-lg p-4 sm:p-5",
|
|
52
|
-
children: /* @__PURE__ */ jsx(
|
|
53
|
-
|
|
54
|
-
selectedTab,
|
|
36
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
37
|
+
id: panelId,
|
|
38
|
+
role: selectedTab ? "tabpanel" : void 0,
|
|
39
|
+
"aria-label": selectedTab?.title,
|
|
40
|
+
tabIndex: selectedTab ? 0 : void 0,
|
|
41
|
+
className: "m-0 flex min-h-0 flex-1 flex-col p-0",
|
|
55
42
|
children
|
|
56
43
|
})
|
|
57
44
|
})]
|
|
@@ -166,15 +153,6 @@ var SectionDrawer = ({ title, navigation, children }) => {
|
|
|
166
153
|
})
|
|
167
154
|
});
|
|
168
155
|
};
|
|
169
|
-
var SectionTabs = ({ displayTabs, selectedTab, navigate, children }) => /* @__PURE__ */ jsx(Tabs, {
|
|
170
|
-
selectedKey: selectedTab?.key ?? "",
|
|
171
|
-
onSelectionChange: (key) => {
|
|
172
|
-
const tab = displayTabs.find((item) => item.key === key);
|
|
173
|
-
if (tab?.href) navigate({ to: tab.href });
|
|
174
|
-
},
|
|
175
|
-
className: "flex min-h-0 min-w-0 flex-1 flex-col gap-0",
|
|
176
|
-
children
|
|
177
|
-
});
|
|
178
156
|
var useSectionSearch = (search) => {
|
|
179
157
|
const inputRef = useRef(null);
|
|
180
158
|
const [isOpen, onOpenChange] = useState(false);
|
|
@@ -185,7 +163,7 @@ var useSectionSearch = (search) => {
|
|
|
185
163
|
onOpenChange
|
|
186
164
|
} : void 0;
|
|
187
165
|
};
|
|
188
|
-
var SectionLayoutToolbar = ({ options, navigation, preferences, displayTabs, isCompactToolbar, hideCompactControls }) => {
|
|
166
|
+
var SectionLayoutToolbar = ({ options, navigation, preferences, displayTabs, selectedTab, onPanelIdChange, onTabChange, isCompactToolbar, hideCompactControls }) => {
|
|
189
167
|
const { title, toolbar, search, sync = true, filter = false, sort = false, view = EMPTY_VIEW_ACTIONS, onSync, menuActions = EMPTY_MENU_ACTIONS, primaryAction } = options;
|
|
190
168
|
const { selectedFilters, setSelectedFilters, sortValue, handleSortChange } = preferences;
|
|
191
169
|
const registeredToolbarContent = useRegisteredSectionToolbarContent();
|
|
@@ -207,6 +185,9 @@ var SectionLayoutToolbar = ({ options, navigation, preferences, displayTabs, isC
|
|
|
207
185
|
viewMode,
|
|
208
186
|
onViewModeChange: setViewMode,
|
|
209
187
|
tabs: isCompactToolbar ? [] : displayTabs,
|
|
188
|
+
selectedTabKey: selectedTab?.key,
|
|
189
|
+
onPanelIdChange,
|
|
190
|
+
onTabChange,
|
|
210
191
|
isMenuOpen,
|
|
211
192
|
onMenuOpenChange: setIsMenuOpen,
|
|
212
193
|
search: toolbarSearch,
|
|
@@ -230,6 +211,11 @@ var SectionLayoutContent = (props) => {
|
|
|
230
211
|
const shouldHideCompactControls = isCompactToolbar && isFooterHidden;
|
|
231
212
|
const preferences = useSectionPreferences(getStateScope(sectionKey, navigation.pathname, sidebarItems, tabs, title), onSortChange);
|
|
232
213
|
const { displayTabs, selectedTab } = getSectionTabs(navigation.pathname, sidebarItems, tabs);
|
|
214
|
+
const [panelId, setPanelId] = useState(useId());
|
|
215
|
+
const handleTabChange = useCallback((key) => {
|
|
216
|
+
const tab = displayTabs.find((item) => item.key === String(key));
|
|
217
|
+
if (tab?.href) navigation.navigate({ to: tab.href });
|
|
218
|
+
}, [displayTabs, navigation]);
|
|
233
219
|
const sidebar = /* @__PURE__ */ jsx(SectionSidebar, {
|
|
234
220
|
items: sidebarItems,
|
|
235
221
|
pathname: navigation.pathname,
|
|
@@ -238,42 +224,41 @@ var SectionLayoutContent = (props) => {
|
|
|
238
224
|
onExpandedChange: navigation.setExpandedSidebarKeys,
|
|
239
225
|
onNavigate: () => navigation.setIsDrawerOpen(false)
|
|
240
226
|
});
|
|
241
|
-
const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
242
|
-
/* @__PURE__ */ jsx(SectionLayoutToolbar, {
|
|
243
|
-
options: props,
|
|
244
|
-
navigation,
|
|
245
|
-
preferences,
|
|
246
|
-
displayTabs,
|
|
247
|
-
isCompactToolbar,
|
|
248
|
-
hideCompactControls: shouldHideCompactControls
|
|
249
|
-
}),
|
|
250
|
-
isCompactToolbar && !shouldHideCompactControls && /* @__PURE__ */ jsx(CompactTabs, {
|
|
251
|
-
title,
|
|
252
|
-
displayTabs,
|
|
253
|
-
search,
|
|
254
|
-
primaryAction
|
|
255
|
-
}),
|
|
256
|
-
/* @__PURE__ */ jsx(SectionBody, {
|
|
257
|
-
hasSidebar: navigation.hasSidebar,
|
|
258
|
-
isNavigationCollapsed: navigation.isNavigationCollapsed,
|
|
259
|
-
sidebarId: navigation.sidebarId,
|
|
260
|
-
sidebar,
|
|
261
|
-
filter,
|
|
262
|
-
selectedFilters: preferences.selectedFilters,
|
|
263
|
-
setSelectedFilters: preferences.setSelectedFilters,
|
|
264
|
-
displayTabs,
|
|
265
|
-
selectedTab,
|
|
266
|
-
children
|
|
267
|
-
})
|
|
268
|
-
] });
|
|
269
227
|
return /* @__PURE__ */ jsxs("div", {
|
|
270
228
|
className: "bg-background flex h-full min-h-0 min-w-0 flex-1 flex-col",
|
|
271
|
-
children: [/* @__PURE__ */
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
229
|
+
children: [/* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
230
|
+
/* @__PURE__ */ jsx(SectionLayoutToolbar, {
|
|
231
|
+
options: props,
|
|
232
|
+
navigation,
|
|
233
|
+
preferences,
|
|
234
|
+
displayTabs,
|
|
235
|
+
selectedTab,
|
|
236
|
+
onPanelIdChange: setPanelId,
|
|
237
|
+
onTabChange: handleTabChange,
|
|
238
|
+
isCompactToolbar,
|
|
239
|
+
hideCompactControls: shouldHideCompactControls
|
|
240
|
+
}),
|
|
241
|
+
isCompactToolbar && !shouldHideCompactControls && /* @__PURE__ */ jsx(SectionTabNavigation, {
|
|
242
|
+
title,
|
|
243
|
+
tabs: displayTabs,
|
|
244
|
+
selectedTabKey: selectedTab?.key,
|
|
245
|
+
onPanelIdChange: setPanelId,
|
|
246
|
+
onTabChange: handleTabChange,
|
|
247
|
+
className: `order-2 mb-3 w-fit min-w-0 self-center ${search && primaryAction ? "max-w-[calc(100%-9rem)]" : "max-w-[calc(100%-1.5rem)]"}`
|
|
248
|
+
}),
|
|
249
|
+
/* @__PURE__ */ jsx(SectionBody, {
|
|
250
|
+
hasSidebar: navigation.hasSidebar,
|
|
251
|
+
isNavigationCollapsed: navigation.isNavigationCollapsed,
|
|
252
|
+
sidebarId: navigation.sidebarId,
|
|
253
|
+
sidebar,
|
|
254
|
+
filter,
|
|
255
|
+
selectedFilters: preferences.selectedFilters,
|
|
256
|
+
setSelectedFilters: preferences.setSelectedFilters,
|
|
257
|
+
panelId,
|
|
258
|
+
selectedTab,
|
|
259
|
+
children
|
|
260
|
+
})
|
|
261
|
+
] }), /* @__PURE__ */ jsx(SectionDrawer, {
|
|
277
262
|
title,
|
|
278
263
|
navigation,
|
|
279
264
|
children: sidebar
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { AppNavigationItem } from '../../navigation';
|
|
2
|
+
type Props = {
|
|
3
|
+
title: string;
|
|
4
|
+
tabs: AppNavigationItem[];
|
|
5
|
+
selectedTabKey?: string;
|
|
6
|
+
onPanelIdChange?: (id: string) => void;
|
|
7
|
+
onTabChange?: (key: string) => void;
|
|
8
|
+
className?: string;
|
|
9
|
+
};
|
|
10
|
+
export declare const SectionTabNavigation: ({ title, tabs, selectedTabKey, onPanelIdChange, onTabChange, className }: Props) => import("react").JSX.Element | null;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=tab-navigation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tab-navigation.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/tab-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,0EAOlC,KAAK,uCAqCP,CAAA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { useCallback } from "react";
|
|
2
|
+
import { Tabs } from "@vezham/react-v3";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/lib/layouts/section/tab-navigation.tsx
|
|
5
|
+
var SectionTabNavigation = ({ title, tabs, selectedTabKey, onPanelIdChange, onTabChange, className }) => {
|
|
6
|
+
const handleSelectedTabRef = useCallback((element) => {
|
|
7
|
+
const panelId = element?.getAttribute("aria-controls");
|
|
8
|
+
if (panelId) onPanelIdChange?.(panelId);
|
|
9
|
+
}, [onPanelIdChange]);
|
|
10
|
+
if (tabs.length === 0) return null;
|
|
11
|
+
return /* @__PURE__ */ jsx(Tabs, {
|
|
12
|
+
selectedKey: selectedTabKey,
|
|
13
|
+
className: "contents",
|
|
14
|
+
variant: "primary",
|
|
15
|
+
onSelectionChange: (key) => onTabChange?.(String(key)),
|
|
16
|
+
children: /* @__PURE__ */ jsx(Tabs.ListContainer, {
|
|
17
|
+
className: `max-w-full ${className ?? ""}`,
|
|
18
|
+
children: /* @__PURE__ */ jsx(Tabs.List, {
|
|
19
|
+
"aria-label": `${title} tabs`,
|
|
20
|
+
className: "min-w-max flex-nowrap",
|
|
21
|
+
children: tabs.map((tab) => /* @__PURE__ */ jsxs(Tabs.Tab, {
|
|
22
|
+
id: tab.key,
|
|
23
|
+
ref: tab.key === selectedTabKey ? handleSelectedTabRef : void 0,
|
|
24
|
+
className: "whitespace-nowrap",
|
|
25
|
+
children: [tab.title, /* @__PURE__ */ jsx(Tabs.Indicator, {})]
|
|
26
|
+
}, tab.key))
|
|
27
|
+
})
|
|
28
|
+
})
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
//#endregion
|
|
32
|
+
export { SectionTabNavigation };
|
|
@@ -30,6 +30,9 @@ type ToolbarSearch = SectionSearch & {
|
|
|
30
30
|
type Props = {
|
|
31
31
|
title: string;
|
|
32
32
|
tabs: AppNavigationItem[];
|
|
33
|
+
selectedTabKey?: string;
|
|
34
|
+
onPanelIdChange?: (id: string) => void;
|
|
35
|
+
onTabChange?: (key: string) => void;
|
|
33
36
|
navigationControls: ReactNode;
|
|
34
37
|
isNavigationCollapsed?: boolean;
|
|
35
38
|
toolbar?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAoBd,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACzD,OAAO,EAAgB,KAAK,WAAW,EAAY,MAAM,aAAa,CAAA;AAItE,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,WAAW,GACX,QAAQ,GACR,WAAW,GACX,cAAc,GACd,eAAe,GACf,MAAM,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE,eAAe,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,aAAa,GAAG,aAAa,GAAG;IACnC,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC5C,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,kBAAkB,EAAE,SAAS,CAAA;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,WAAW,EAAE,aAAa,EAAE,CAAA;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,WAAW,CAAA;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC1B,eAAe,EAAE,gBAAgB,EAAE,CAAA;IACnC,uBAAuB,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAA;IAC9D,QAAQ,EAAE,eAAe,CAAA;IACzB,gBAAgB,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAA;IACrD,UAAU,EAAE,OAAO,CAAA;IACnB,gBAAgB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5C,CAAA;AA2GD,QAAA,MAAM,oBAAoB,GAAI,8CAG3B;IACD,eAAe,EAAE,gBAAgB,EAAE,CAAA;IACnC,uBAAuB,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAA;CAC/D,uCA8BA,CAAA;AA+WD,QAAA,MAAM,cAAc,GAAI,OAAO,KAAK,gCAsInC,CAAA;AAED,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -3,9 +3,10 @@ import "../../components/panel/responsive.js";
|
|
|
3
3
|
import { useResponsiveToolbarAction } from "../../components/responsive-toolbar-action/index.js";
|
|
4
4
|
import { ShortcutButton } from "../../components/shortcut-key/index.js";
|
|
5
5
|
import { DEFAULT_SORT, SortMenu } from "./sort-menu.js";
|
|
6
|
+
import { SectionTabNavigation } from "./tab-navigation.js";
|
|
6
7
|
import { ToolbarMoreSheet } from "./toolbar-more-sheet.js";
|
|
7
8
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
8
|
-
import { Button, Chip, CloseButton, Dropdown, Label, Popover, SearchField, Separator,
|
|
9
|
+
import { Button, Chip, CloseButton, Dropdown, Label, Popover, SearchField, Separator, Tooltip, useMediaQuery } from "@vezham/react-v3";
|
|
9
10
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
10
11
|
import { SortFromBottomToTop, SortFromTopToBottom } from "@vezham/icons-react";
|
|
11
12
|
//#region src/lib/layouts/section/toolbar.tsx
|
|
@@ -476,18 +477,14 @@ var SectionToolbar = (props) => {
|
|
|
476
477
|
children: [/* @__PURE__ */ jsx("div", {
|
|
477
478
|
className: "col-start-1 row-start-1 hidden min-w-0 items-center gap-1 md:flex",
|
|
478
479
|
children: navigationControls
|
|
479
|
-
}),
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
children: [tab.title, /* @__PURE__ */ jsx(Tabs.Indicator, {})]
|
|
488
|
-
}, tab.key))
|
|
489
|
-
})
|
|
490
|
-
}, JSON.stringify(tabs.map((tab) => tab.key)))]
|
|
480
|
+
}), /* @__PURE__ */ jsx(SectionTabNavigation, {
|
|
481
|
+
title,
|
|
482
|
+
tabs,
|
|
483
|
+
selectedTabKey: props.selectedTabKey,
|
|
484
|
+
onPanelIdChange: props.onPanelIdChange,
|
|
485
|
+
onTabChange: props.onTabChange,
|
|
486
|
+
className: "col-span-2 row-start-2 mt-2 w-fit max-w-full min-w-0 justify-self-center sm:mt-0 sm:max-w-fit sm:flex-1"
|
|
487
|
+
})]
|
|
491
488
|
}), /* @__PURE__ */ jsx(ToolbarActions, {
|
|
492
489
|
...props,
|
|
493
490
|
isMobile,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vezham/react",
|
|
3
|
-
"version": "26.0.0-beta.
|
|
3
|
+
"version": "26.0.0-beta.2",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/vezham/vx-fe-pkgs.git",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
],
|
|
110
110
|
"dependencies": {
|
|
111
111
|
"@tanstack/react-hotkeys": "^0.10.0",
|
|
112
|
-
"@vezham/hooks": "26.0.0-beta.
|
|
112
|
+
"@vezham/hooks": "26.0.0-beta.2",
|
|
113
113
|
"react-aria-components": "1.21.1"
|
|
114
114
|
}
|
|
115
115
|
}
|