@payloadcms/next 3.84.0 → 4.0.0-internal.38b7f1d
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/cjs/withPayload.cjs +15 -176
- package/dist/cjs/withPayload.cjs.map +4 -4
- package/dist/elements/DocumentHeader/Tabs/tabs/index.d.ts.map +1 -1
- package/dist/elements/DocumentHeader/Tabs/tabs/index.js +0 -4
- package/dist/elements/DocumentHeader/Tabs/tabs/index.js.map +1 -1
- package/dist/elements/HierarchyTypeField/index.d.ts +9 -0
- package/dist/elements/HierarchyTypeField/index.d.ts.map +1 -0
- package/dist/elements/HierarchyTypeField/index.js +114 -0
- package/dist/elements/HierarchyTypeField/index.js.map +1 -0
- package/dist/elements/HierarchyTypeField/index.server.d.ts +9 -0
- package/dist/elements/HierarchyTypeField/index.server.d.ts.map +1 -0
- package/dist/elements/HierarchyTypeField/index.server.js +32 -0
- package/dist/elements/HierarchyTypeField/index.server.js.map +1 -0
- package/dist/elements/Nav/SidebarTabs/TabError/index.css +29 -0
- package/dist/elements/Nav/SidebarTabs/TabError/index.d.ts +8 -0
- package/dist/elements/Nav/SidebarTabs/TabError/index.d.ts.map +1 -0
- package/dist/elements/Nav/SidebarTabs/TabError/index.js +42 -0
- package/dist/elements/Nav/SidebarTabs/TabError/index.js.map +1 -0
- package/dist/elements/Nav/SidebarTabs/constants.d.ts +2 -0
- package/dist/elements/Nav/SidebarTabs/constants.d.ts.map +1 -0
- package/dist/elements/Nav/SidebarTabs/constants.js +2 -0
- package/dist/elements/Nav/SidebarTabs/constants.js.map +1 -0
- package/dist/elements/Nav/SidebarTabs/index.client.d.ts +22 -0
- package/dist/elements/Nav/SidebarTabs/index.client.d.ts.map +1 -0
- package/dist/elements/Nav/SidebarTabs/index.client.js +195 -0
- package/dist/elements/Nav/SidebarTabs/index.client.js.map +1 -0
- package/dist/elements/Nav/SidebarTabs/index.css +80 -0
- package/dist/elements/Nav/SidebarTabs/index.d.ts +17 -0
- package/dist/elements/Nav/SidebarTabs/index.d.ts.map +1 -0
- package/dist/elements/Nav/SidebarTabs/index.js +85 -0
- package/dist/elements/Nav/SidebarTabs/index.js.map +1 -0
- package/dist/elements/Nav/SidebarTabs/renderTabServerFn.d.ts +10 -0
- package/dist/elements/Nav/SidebarTabs/renderTabServerFn.d.ts.map +1 -0
- package/dist/elements/Nav/SidebarTabs/renderTabServerFn.js +54 -0
- package/dist/elements/Nav/SidebarTabs/renderTabServerFn.js.map +1 -0
- package/dist/elements/Nav/getNavPrefs.d.ts.map +1 -1
- package/dist/elements/Nav/getNavPrefs.js +36 -2
- package/dist/elements/Nav/getNavPrefs.js.map +1 -1
- package/dist/elements/Nav/index.client.d.ts.map +1 -1
- package/dist/elements/Nav/index.client.js +48 -63
- package/dist/elements/Nav/index.client.js.map +1 -1
- package/dist/elements/Nav/index.css +155 -0
- package/dist/elements/Nav/index.d.ts +1 -1
- package/dist/elements/Nav/index.d.ts.map +1 -1
- package/dist/elements/Nav/index.js +39 -8
- package/dist/elements/Nav/index.js.map +1 -1
- package/dist/exports/client.d.ts +2 -1
- package/dist/exports/client.d.ts.map +1 -1
- package/dist/exports/client.js +2 -1
- package/dist/exports/client.js.map +1 -1
- package/dist/exports/rsc.d.ts +2 -1
- package/dist/exports/rsc.d.ts.map +1 -1
- package/dist/exports/rsc.js +2 -1
- package/dist/exports/rsc.js.map +1 -1
- package/dist/exports/utilities.d.ts +2 -67
- package/dist/exports/utilities.d.ts.map +1 -1
- package/dist/exports/utilities.js +1 -49
- package/dist/exports/utilities.js.map +1 -1
- package/dist/layouts/Root/index.d.ts +18 -1
- package/dist/layouts/Root/index.d.ts.map +1 -1
- package/dist/layouts/Root/index.js +25 -4
- package/dist/layouts/Root/index.js.map +1 -1
- package/dist/prod/styles.css +1 -1
- package/dist/utilities/getHierarchyAncestry.d.ts +24 -0
- package/dist/utilities/getHierarchyAncestry.d.ts.map +1 -0
- package/dist/utilities/getHierarchyAncestry.js +103 -0
- package/dist/utilities/getHierarchyAncestry.js.map +1 -0
- package/dist/utilities/getRequestHighContrast.d.ts +10 -0
- package/dist/utilities/getRequestHighContrast.d.ts.map +1 -0
- package/dist/utilities/getRequestHighContrast.js +18 -0
- package/dist/utilities/getRequestHighContrast.js.map +1 -0
- package/dist/utilities/handleServerFunctions.js +2 -2
- package/dist/utilities/handleServerFunctions.js.map +1 -1
- package/dist/views/Account/Settings/index.d.ts.map +1 -1
- package/dist/views/Account/Settings/index.js +2 -1
- package/dist/views/Account/Settings/index.js.map +1 -1
- package/dist/views/Account/ToggleHighContrast/index.d.ts +3 -0
- package/dist/views/Account/ToggleHighContrast/index.d.ts.map +1 -0
- package/dist/views/Account/ToggleHighContrast/index.js +45 -0
- package/dist/views/Account/ToggleHighContrast/index.js.map +1 -0
- package/dist/views/Dashboard/Default/ModularDashboard/DashboardStepNav.js +3 -3
- package/dist/views/Dashboard/Default/ModularDashboard/DashboardStepNav.js.map +1 -1
- package/dist/views/Dashboard/Default/ModularDashboard/index.client.js +1 -1
- package/dist/views/Dashboard/Default/ModularDashboard/index.client.js.map +1 -1
- package/dist/views/Document/getDocumentView.d.ts.map +1 -1
- package/dist/views/Document/getDocumentView.js +3 -9
- package/dist/views/Document/getDocumentView.js.map +1 -1
- package/dist/views/Document/renderDocumentSlots.d.ts.map +1 -1
- package/dist/views/Document/renderDocumentSlots.js +16 -8
- package/dist/views/Document/renderDocumentSlots.js.map +1 -1
- package/dist/views/Hierarchy/index.d.ts +18 -0
- package/dist/views/Hierarchy/index.d.ts.map +1 -0
- package/dist/views/Hierarchy/index.js +20 -0
- package/dist/views/Hierarchy/index.js.map +1 -0
- package/dist/views/List/handleHierarchy.d.ts +18 -0
- package/dist/views/List/handleHierarchy.d.ts.map +1 -0
- package/dist/views/List/handleHierarchy.js +258 -0
- package/dist/views/List/handleHierarchy.js.map +1 -0
- package/dist/views/List/index.d.ts.map +1 -1
- package/dist/views/List/index.js +101 -30
- package/dist/views/List/index.js.map +1 -1
- package/dist/views/Root/getCustomGlobalViewByRoute.d.ts +12 -0
- package/dist/views/Root/getCustomGlobalViewByRoute.d.ts.map +1 -0
- package/dist/views/Root/getCustomGlobalViewByRoute.js +46 -0
- package/dist/views/Root/getCustomGlobalViewByRoute.js.map +1 -0
- package/dist/views/Root/getRouteData.d.ts +1 -4
- package/dist/views/Root/getRouteData.d.ts.map +1 -1
- package/dist/views/Root/getRouteData.js +83 -110
- package/dist/views/Root/getRouteData.js.map +1 -1
- package/dist/views/Root/index.d.ts.map +1 -1
- package/dist/views/Root/index.js +5 -12
- package/dist/views/Root/index.js.map +1 -1
- package/dist/views/Root/metadata.d.ts.map +1 -1
- package/dist/views/Root/metadata.js +1 -37
- package/dist/views/Root/metadata.js.map +1 -1
- package/dist/views/Version/Restore/index.js +1 -1
- package/dist/views/Version/Restore/index.js.map +1 -1
- package/dist/withPayload/withPayload.d.ts +127 -1
- package/dist/withPayload/withPayload.d.ts.map +1 -1
- package/dist/withPayload/withPayload.js +8 -22
- package/dist/withPayload/withPayload.js.map +1 -1
- package/dist/withPayload/withPayload.utils.d.ts +0 -14
- package/dist/withPayload/withPayload.utils.d.ts.map +1 -1
- package/dist/withPayload/withPayload.utils.js +0 -73
- package/dist/withPayload/withPayload.utils.js.map +1 -1
- package/package.json +11 -11
- package/dist/views/BrowseByFolder/buildView.d.ts +0 -13
- package/dist/views/BrowseByFolder/buildView.d.ts.map +0 -1
- package/dist/views/BrowseByFolder/buildView.js +0 -170
- package/dist/views/BrowseByFolder/buildView.js.map +0 -1
- package/dist/views/BrowseByFolder/index.d.ts +0 -4
- package/dist/views/BrowseByFolder/index.d.ts.map +0 -1
- package/dist/views/BrowseByFolder/index.js +0 -20
- package/dist/views/BrowseByFolder/index.js.map +0 -1
- package/dist/views/BrowseByFolder/metadata.d.ts +0 -4
- package/dist/views/BrowseByFolder/metadata.d.ts.map +0 -1
- package/dist/views/BrowseByFolder/metadata.js +0 -18
- package/dist/views/BrowseByFolder/metadata.js.map +0 -1
- package/dist/views/CollectionFolders/buildView.d.ts +0 -15
- package/dist/views/CollectionFolders/buildView.d.ts.map +0 -1
- package/dist/views/CollectionFolders/buildView.js +0 -156
- package/dist/views/CollectionFolders/buildView.js.map +0 -1
- package/dist/views/CollectionFolders/index.d.ts +0 -4
- package/dist/views/CollectionFolders/index.d.ts.map +0 -1
- package/dist/views/CollectionFolders/index.js +0 -20
- package/dist/views/CollectionFolders/index.js.map +0 -1
- package/dist/views/CollectionFolders/metadata.d.ts +0 -7
- package/dist/views/CollectionFolders/metadata.d.ts.map +0 -1
- package/dist/views/CollectionFolders/metadata.js +0 -25
- package/dist/views/CollectionFolders/metadata.js.map +0 -1
- package/dist/views/CollectionFolders/renderFolderViewSlots.d.ts +0 -11
- package/dist/views/CollectionFolders/renderFolderViewSlots.d.ts.map +0 -1
- package/dist/views/CollectionFolders/renderFolderViewSlots.js +0 -64
- package/dist/views/CollectionFolders/renderFolderViewSlots.js.map +0 -1
- package/dist/withPayload/withPayloadLegacy.d.ts +0 -2
- package/dist/withPayload/withPayloadLegacy.d.ts.map +0 -1
- package/dist/withPayload/withPayloadLegacy.js +0 -47
- package/dist/withPayload/withPayloadLegacy.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Nav/SidebarTabs/TabError/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAY5C,CAAA"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { c as _c } from "react/compiler-runtime";
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { useTranslation } from '@payloadcms/ui';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
const baseClass = 'sidebar-tab-error';
|
|
8
|
+
export const TabError = t0 => {
|
|
9
|
+
const $ = _c(4);
|
|
10
|
+
const {
|
|
11
|
+
message,
|
|
12
|
+
onRetry
|
|
13
|
+
} = t0;
|
|
14
|
+
const {
|
|
15
|
+
t
|
|
16
|
+
} = useTranslation();
|
|
17
|
+
let t1;
|
|
18
|
+
if ($[0] !== message || $[1] !== onRetry || $[2] !== t) {
|
|
19
|
+
t1 = _jsx("div", {
|
|
20
|
+
className: baseClass,
|
|
21
|
+
children: _jsxs("div", {
|
|
22
|
+
className: `${baseClass}__content`,
|
|
23
|
+
children: [_jsx("span", {
|
|
24
|
+
children: message
|
|
25
|
+
}), _jsx("button", {
|
|
26
|
+
className: `${baseClass}__retry`,
|
|
27
|
+
onClick: onRetry,
|
|
28
|
+
type: "button",
|
|
29
|
+
children: t("general:retry")
|
|
30
|
+
})]
|
|
31
|
+
})
|
|
32
|
+
});
|
|
33
|
+
$[0] = message;
|
|
34
|
+
$[1] = onRetry;
|
|
35
|
+
$[2] = t;
|
|
36
|
+
$[3] = t1;
|
|
37
|
+
} else {
|
|
38
|
+
t1 = $[3];
|
|
39
|
+
}
|
|
40
|
+
return t1;
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","useTranslation","React","baseClass","TabError","t0","$","message","onRetry","t","t1","_jsx","className","children","_jsxs","onClick","type"],"sources":["../../../../../src/elements/Nav/SidebarTabs/TabError/index.tsx"],"sourcesContent":["'use client'\n\nimport { useTranslation } from '@payloadcms/ui'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'sidebar-tab-error'\n\nexport type TabErrorProps = {\n message: string\n onRetry: () => void\n}\n\nexport const TabError: React.FC<TabErrorProps> = ({ message, onRetry }) => {\n const { t } = useTranslation()\n return (\n <div className={baseClass}>\n <div className={`${baseClass}__content`}>\n <span>{message}</span>\n <button className={`${baseClass}__retry`} onClick={onRetry} type=\"button\">\n {t('general:retry')}\n </button>\n </div>\n </div>\n )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,QAAA,GAAoCC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO,OAAA;IAAAC;EAAA,IAAAH,EAAoB;EACpE;IAAAI;EAAA,IAAcR,cAAA;EAAA,IAAAS,EAAA;EAAA,IAAAJ,CAAA,QAAAC,OAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,CAAA;IAEZC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAT,SAAA;MAAAU,QAAA,EACCC,KAAA,CAAC;QAAAF,SAAA,EAAe,GAAAT,SAAA,WAAuB;QAAAU,QAAA,GACrCF,IAAA,CAAC;UAAAE,QAAA,EAAMN;QAAA,C,GACPI,IAAA,CAAC;UAAAC,SAAA,EAAkB,GAAAT,SAAA,SAAqB;UAAAY,OAAA,EAAWP,OAAA;UAAAQ,IAAA,EAAc;UAAAH,QAAA,EAC9DJ,CAAA,CAAE;QAAA,C;;;;;;;;;;SAJTC,E;CASJ","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SidebarTabs/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,QAAQ,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","names":["DEFAULT_NAV_TAB_SLUG"],"sources":["../../../../src/elements/Nav/SidebarTabs/constants.ts"],"sourcesContent":["export const DEFAULT_NAV_TAB_SLUG = 'nav'\n"],"mappings":"AAAA,OAAO,MAAMA,oBAAA,GAAuB","ignoreList":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type TabMetadata = {
|
|
3
|
+
icon: React.ReactNode;
|
|
4
|
+
isDefaultActive?: boolean;
|
|
5
|
+
label: string;
|
|
6
|
+
/** Whether this tab can be loaded/revalidated via serverFunction */
|
|
7
|
+
lazyLoadable?: boolean;
|
|
8
|
+
slug: string;
|
|
9
|
+
};
|
|
10
|
+
export type SidebarTabsClientProps = {
|
|
11
|
+
baseClass: string;
|
|
12
|
+
initialActiveTabID: string;
|
|
13
|
+
initialTabContents: Record<string, React.ReactNode>;
|
|
14
|
+
/**
|
|
15
|
+
* Delay before showing loading spinner (in ms), prevents flashing on fast loads
|
|
16
|
+
* @default 200
|
|
17
|
+
*/
|
|
18
|
+
loadingDelay?: number;
|
|
19
|
+
tabs: TabMetadata[];
|
|
20
|
+
};
|
|
21
|
+
export declare const SidebarTabsClient: React.FC<SidebarTabsClientProps>;
|
|
22
|
+
//# sourceMappingURL=index.client.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SidebarTabs/index.client.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAM5D,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,EAAE,MAAM,CAAA;IACjB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACnD;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,EAAE,WAAW,EAAE,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4L9D,CAAA"}
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
4
|
+
import { DelayedSpinner, SidebarTabsProvider, Tooltip, usePreferences, useServerFunctions } from '@payloadcms/ui';
|
|
5
|
+
import { PREFERENCE_KEYS } from 'payload/shared';
|
|
6
|
+
import React, { useCallback, useRef, useState } from 'react';
|
|
7
|
+
import { TabError } from './TabError/index.js';
|
|
8
|
+
export const SidebarTabsClient = ({
|
|
9
|
+
baseClass,
|
|
10
|
+
initialActiveTabID,
|
|
11
|
+
initialTabContents,
|
|
12
|
+
loadingDelay = 200,
|
|
13
|
+
tabs
|
|
14
|
+
}) => {
|
|
15
|
+
const {
|
|
16
|
+
setPreference
|
|
17
|
+
} = usePreferences();
|
|
18
|
+
const {
|
|
19
|
+
serverFunction
|
|
20
|
+
} = useServerFunctions();
|
|
21
|
+
const [activeTabID, setActiveTabID] = useState(initialActiveTabID);
|
|
22
|
+
const [tabContent, setTabContent] = useState(initialTabContents);
|
|
23
|
+
const [loadingTab, setLoadingTab] = useState(null);
|
|
24
|
+
const [hoveredTab, setHoveredTab] = useState(null);
|
|
25
|
+
const loadingTabsRef = useRef(new Set());
|
|
26
|
+
const tabContentRef = useRef(initialTabContents);
|
|
27
|
+
// Update cached content when server provides new initialTabContents
|
|
28
|
+
// This is needed because useState only uses initialValue on first mount
|
|
29
|
+
React.useEffect(() => {
|
|
30
|
+
tabContentRef.current = {
|
|
31
|
+
...tabContentRef.current,
|
|
32
|
+
...initialTabContents
|
|
33
|
+
};
|
|
34
|
+
setTabContent(prev => ({
|
|
35
|
+
...prev,
|
|
36
|
+
...initialTabContents
|
|
37
|
+
}));
|
|
38
|
+
}, [initialTabContents]);
|
|
39
|
+
const loadTabContent = useCallback(async (tabSlug, {
|
|
40
|
+
revalidate = false
|
|
41
|
+
} = {}) => {
|
|
42
|
+
const hasCachedContent = Boolean(tabContentRef.current[tabSlug]);
|
|
43
|
+
// Skip if already loaded (unless revalidating) or currently loading
|
|
44
|
+
if (hasCachedContent && !revalidate || loadingTabsRef.current.has(tabSlug)) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
// Mark as loading - only show spinner if no cached content
|
|
48
|
+
loadingTabsRef.current.add(tabSlug);
|
|
49
|
+
if (!hasCachedContent) {
|
|
50
|
+
setLoadingTab(tabSlug);
|
|
51
|
+
}
|
|
52
|
+
try {
|
|
53
|
+
const result = await serverFunction({
|
|
54
|
+
name: 'render-tab',
|
|
55
|
+
args: {
|
|
56
|
+
tabSlug
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
const newContent_0 = {
|
|
60
|
+
...tabContentRef.current,
|
|
61
|
+
[tabSlug]: result.component
|
|
62
|
+
};
|
|
63
|
+
tabContentRef.current = newContent_0;
|
|
64
|
+
setTabContent(newContent_0);
|
|
65
|
+
} catch (error) {
|
|
66
|
+
// On revalidate failure, keep showing cached content
|
|
67
|
+
if (hasCachedContent && revalidate) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
|
|
71
|
+
const handleRetry = () => {
|
|
72
|
+
// Clear the error and retry loading
|
|
73
|
+
const clearedContent = {
|
|
74
|
+
...tabContentRef.current
|
|
75
|
+
};
|
|
76
|
+
delete clearedContent[tabSlug];
|
|
77
|
+
tabContentRef.current = clearedContent;
|
|
78
|
+
setTabContent(clearedContent);
|
|
79
|
+
void loadTabContent(tabSlug);
|
|
80
|
+
};
|
|
81
|
+
const newContent = {
|
|
82
|
+
...tabContentRef.current,
|
|
83
|
+
[tabSlug]: /*#__PURE__*/_jsx(TabError, {
|
|
84
|
+
message: errorMessage,
|
|
85
|
+
onRetry: handleRetry
|
|
86
|
+
})
|
|
87
|
+
};
|
|
88
|
+
tabContentRef.current = newContent;
|
|
89
|
+
setTabContent(newContent);
|
|
90
|
+
} finally {
|
|
91
|
+
loadingTabsRef.current.delete(tabSlug);
|
|
92
|
+
setLoadingTab(null);
|
|
93
|
+
}
|
|
94
|
+
}, [serverFunction]);
|
|
95
|
+
const reloadTabContent = useCallback(tabSlug_0 => {
|
|
96
|
+
// Clear cached content to force reload
|
|
97
|
+
const clearedContent_0 = {
|
|
98
|
+
...tabContentRef.current
|
|
99
|
+
};
|
|
100
|
+
delete clearedContent_0[tabSlug_0];
|
|
101
|
+
tabContentRef.current = clearedContent_0;
|
|
102
|
+
setTabContent(clearedContent_0);
|
|
103
|
+
void loadTabContent(tabSlug_0);
|
|
104
|
+
}, [loadTabContent]);
|
|
105
|
+
const handleTabChange = useCallback(slug => {
|
|
106
|
+
setActiveTabID(slug);
|
|
107
|
+
void setPreference(PREFERENCE_KEYS.NAV_SIDEBAR_ACTIVE_TAB, {
|
|
108
|
+
activeTab: slug
|
|
109
|
+
});
|
|
110
|
+
// Only revalidate tabs that can be loaded via serverFunction
|
|
111
|
+
// Pre-rendered React elements (like default nav) can't be revalidated
|
|
112
|
+
const tab = tabs.find(t => t.slug === slug);
|
|
113
|
+
void loadTabContent(slug, {
|
|
114
|
+
revalidate: tab?.lazyLoadable ?? false
|
|
115
|
+
});
|
|
116
|
+
}, [setPreference, loadTabContent, tabs]);
|
|
117
|
+
const handleTabKeyDown = useCallback((e, currentIndex) => {
|
|
118
|
+
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
|
|
119
|
+
e.preventDefault();
|
|
120
|
+
const direction = e.key === 'ArrowLeft' ? -1 : 1;
|
|
121
|
+
const newIndex = (currentIndex + direction + tabs.length) % tabs.length;
|
|
122
|
+
const newTab = tabs[newIndex];
|
|
123
|
+
handleTabChange(newTab.slug);
|
|
124
|
+
// Focus will be handled by the tabIndex change
|
|
125
|
+
setTimeout(() => {
|
|
126
|
+
document.querySelector(`.${baseClass}__tab--active`)?.focus();
|
|
127
|
+
}, 0);
|
|
128
|
+
}
|
|
129
|
+
}, [baseClass, handleTabChange, tabs]);
|
|
130
|
+
const activeContent = tabContent[activeTabID];
|
|
131
|
+
// If there's only one tab (the default nav), render it without tab UI
|
|
132
|
+
if (tabs.length === 1) {
|
|
133
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
|
134
|
+
children: activeContent
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
return /*#__PURE__*/_jsx(SidebarTabsProvider, {
|
|
138
|
+
activeTabSlug: activeTabID,
|
|
139
|
+
reloadTabContent: reloadTabContent,
|
|
140
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
141
|
+
className: baseClass,
|
|
142
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
143
|
+
className: `${baseClass}__tabs`,
|
|
144
|
+
role: "tablist",
|
|
145
|
+
children: tabs.map((tab_0, index) => {
|
|
146
|
+
const isActive = tab_0.slug === activeTabID;
|
|
147
|
+
return /*#__PURE__*/_jsxs("button", {
|
|
148
|
+
"aria-selected": isActive,
|
|
149
|
+
className: `${baseClass}__tab ${isActive ? `${baseClass}__tab--active` : ''}`,
|
|
150
|
+
onClick: () => handleTabChange(tab_0.slug),
|
|
151
|
+
onKeyDown: e_0 => handleTabKeyDown(e_0, index),
|
|
152
|
+
onMouseEnter: () => setHoveredTab(tab_0.slug),
|
|
153
|
+
onMouseLeave: () => setHoveredTab(null),
|
|
154
|
+
role: "tab",
|
|
155
|
+
tabIndex: isActive ? 0 : -1,
|
|
156
|
+
type: "button",
|
|
157
|
+
children: [/*#__PURE__*/_jsx(Tooltip, {
|
|
158
|
+
className: `${baseClass}__tooltip`,
|
|
159
|
+
position: index === 0 ? 'bottom' : 'top',
|
|
160
|
+
show: hoveredTab === tab_0.slug,
|
|
161
|
+
children: tab_0.label
|
|
162
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
163
|
+
className: `${baseClass}__tab-icon`,
|
|
164
|
+
children: tab_0.icon
|
|
165
|
+
}), /*#__PURE__*/_jsx("span", {
|
|
166
|
+
className: `${baseClass}__tab-label`,
|
|
167
|
+
children: tab_0.label
|
|
168
|
+
})]
|
|
169
|
+
}, tab_0.slug);
|
|
170
|
+
})
|
|
171
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
172
|
+
className: `${baseClass}__content`,
|
|
173
|
+
role: "tabpanel",
|
|
174
|
+
children: [/*#__PURE__*/_jsx(DelayedSpinner, {
|
|
175
|
+
baseClass: baseClass,
|
|
176
|
+
delay: loadingDelay,
|
|
177
|
+
isLoading: loadingTab === activeTabID
|
|
178
|
+
}), tabs.map(tab_1 => {
|
|
179
|
+
const content = tabContent[tab_1.slug];
|
|
180
|
+
if (!content) {
|
|
181
|
+
return null;
|
|
182
|
+
}
|
|
183
|
+
const isActive_0 = tab_1.slug === activeTabID && loadingTab !== activeTabID;
|
|
184
|
+
return /*#__PURE__*/_jsx("div", {
|
|
185
|
+
style: isActive_0 ? undefined : {
|
|
186
|
+
display: 'none'
|
|
187
|
+
},
|
|
188
|
+
children: content
|
|
189
|
+
}, tab_1.slug);
|
|
190
|
+
})]
|
|
191
|
+
})]
|
|
192
|
+
})
|
|
193
|
+
});
|
|
194
|
+
};
|
|
195
|
+
//# sourceMappingURL=index.client.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.client.js","names":["DelayedSpinner","SidebarTabsProvider","Tooltip","usePreferences","useServerFunctions","PREFERENCE_KEYS","React","useCallback","useRef","useState","TabError","SidebarTabsClient","baseClass","initialActiveTabID","initialTabContents","loadingDelay","tabs","setPreference","serverFunction","activeTabID","setActiveTabID","tabContent","setTabContent","loadingTab","setLoadingTab","hoveredTab","setHoveredTab","loadingTabsRef","Set","tabContentRef","useEffect","current","prev","loadTabContent","tabSlug","revalidate","hasCachedContent","Boolean","has","add","result","name","args","newContent","component","error","errorMessage","Error","message","handleRetry","clearedContent","_jsx","onRetry","delete","reloadTabContent","handleTabChange","slug","NAV_SIDEBAR_ACTIVE_TAB","activeTab","tab","find","t","lazyLoadable","handleTabKeyDown","e","currentIndex","key","preventDefault","direction","newIndex","length","newTab","setTimeout","document","querySelector","focus","activeContent","_Fragment","activeTabSlug","_jsxs","className","role","map","index","isActive","onClick","onKeyDown","onMouseEnter","onMouseLeave","tabIndex","type","position","show","label","icon","delay","isLoading","content","style","undefined","display"],"sources":["../../../../src/elements/Nav/SidebarTabs/index.client.tsx"],"sourcesContent":["'use client'\n\nimport {\n DelayedSpinner,\n SidebarTabsProvider,\n Tooltip,\n usePreferences,\n useServerFunctions,\n} from '@payloadcms/ui'\nimport { PREFERENCE_KEYS } from 'payload/shared'\nimport React, { useCallback, useRef, useState } from 'react'\n\nimport type { RenderTabServerFnArgs, RenderTabServerFnReturnType } from './renderTabServerFn.js'\n\nimport { TabError } from './TabError/index.js'\n\nexport type TabMetadata = {\n icon: React.ReactNode\n isDefaultActive?: boolean\n label: string\n /** Whether this tab can be loaded/revalidated via serverFunction */\n lazyLoadable?: boolean\n slug: string\n}\n\nexport type SidebarTabsClientProps = {\n baseClass: string\n initialActiveTabID: string\n initialTabContents: Record<string, React.ReactNode>\n /**\n * Delay before showing loading spinner (in ms), prevents flashing on fast loads\n * @default 200\n */\n loadingDelay?: number\n tabs: TabMetadata[]\n}\n\nexport const SidebarTabsClient: React.FC<SidebarTabsClientProps> = ({\n baseClass,\n initialActiveTabID,\n initialTabContents,\n loadingDelay = 200,\n tabs,\n}) => {\n const { setPreference } = usePreferences()\n const { serverFunction } = useServerFunctions()\n\n const [activeTabID, setActiveTabID] = useState(initialActiveTabID)\n const [tabContent, setTabContent] = useState<Record<string, React.ReactNode>>(initialTabContents)\n const [loadingTab, setLoadingTab] = useState<null | string>(null)\n const [hoveredTab, setHoveredTab] = useState<null | string>(null)\n const loadingTabsRef = useRef<Set<string>>(new Set())\n const tabContentRef = useRef(initialTabContents)\n\n // Update cached content when server provides new initialTabContents\n // This is needed because useState only uses initialValue on first mount\n React.useEffect(() => {\n tabContentRef.current = { ...tabContentRef.current, ...initialTabContents }\n setTabContent((prev) => ({ ...prev, ...initialTabContents }))\n }, [initialTabContents])\n\n const loadTabContent = useCallback(\n async (tabSlug: string, { revalidate = false }: { revalidate?: boolean } = {}) => {\n const hasCachedContent = Boolean(tabContentRef.current[tabSlug])\n\n // Skip if already loaded (unless revalidating) or currently loading\n if ((hasCachedContent && !revalidate) || loadingTabsRef.current.has(tabSlug)) {\n return\n }\n\n // Mark as loading - only show spinner if no cached content\n loadingTabsRef.current.add(tabSlug)\n if (!hasCachedContent) {\n setLoadingTab(tabSlug)\n }\n\n try {\n const result = (await serverFunction({\n name: 'render-tab',\n args: { tabSlug } as RenderTabServerFnArgs,\n })) as RenderTabServerFnReturnType\n\n const newContent = {\n ...tabContentRef.current,\n [tabSlug]: result.component,\n }\n\n tabContentRef.current = newContent\n setTabContent(newContent)\n } catch (error) {\n // On revalidate failure, keep showing cached content\n if (hasCachedContent && revalidate) {\n return\n }\n\n const errorMessage = error instanceof Error ? error.message : 'Unknown error'\n\n const handleRetry = () => {\n // Clear the error and retry loading\n const clearedContent = { ...tabContentRef.current }\n delete clearedContent[tabSlug]\n tabContentRef.current = clearedContent\n setTabContent(clearedContent)\n void loadTabContent(tabSlug)\n }\n\n const newContent = {\n ...tabContentRef.current,\n [tabSlug]: <TabError message={errorMessage} onRetry={handleRetry} />,\n }\n\n tabContentRef.current = newContent\n setTabContent(newContent)\n } finally {\n loadingTabsRef.current.delete(tabSlug)\n setLoadingTab(null)\n }\n },\n [serverFunction],\n )\n\n const reloadTabContent = useCallback(\n (tabSlug: string) => {\n // Clear cached content to force reload\n const clearedContent = { ...tabContentRef.current }\n delete clearedContent[tabSlug]\n tabContentRef.current = clearedContent\n setTabContent(clearedContent)\n\n void loadTabContent(tabSlug)\n },\n [loadTabContent],\n )\n\n const handleTabChange = useCallback(\n (slug: string) => {\n setActiveTabID(slug)\n void setPreference(PREFERENCE_KEYS.NAV_SIDEBAR_ACTIVE_TAB, { activeTab: slug })\n // Only revalidate tabs that can be loaded via serverFunction\n // Pre-rendered React elements (like default nav) can't be revalidated\n const tab = tabs.find((t) => t.slug === slug)\n void loadTabContent(slug, { revalidate: tab?.lazyLoadable ?? false })\n },\n [setPreference, loadTabContent, tabs],\n )\n\n const handleTabKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {\n e.preventDefault()\n const direction = e.key === 'ArrowLeft' ? -1 : 1\n const newIndex = (currentIndex + direction + tabs.length) % tabs.length\n const newTab = tabs[newIndex]\n handleTabChange(newTab.slug)\n // Focus will be handled by the tabIndex change\n setTimeout(() => {\n document.querySelector<HTMLButtonElement>(`.${baseClass}__tab--active`)?.focus()\n }, 0)\n }\n },\n [baseClass, handleTabChange, tabs],\n )\n\n const activeContent = tabContent[activeTabID]\n\n // If there's only one tab (the default nav), render it without tab UI\n if (tabs.length === 1) {\n return <>{activeContent}</>\n }\n\n return (\n <SidebarTabsProvider activeTabSlug={activeTabID} reloadTabContent={reloadTabContent}>\n <div className={baseClass}>\n <div className={`${baseClass}__tabs`} role=\"tablist\">\n {tabs.map((tab, index) => {\n const isActive = tab.slug === activeTabID\n\n return (\n <button\n aria-selected={isActive}\n className={`${baseClass}__tab ${isActive ? `${baseClass}__tab--active` : ''}`}\n key={tab.slug}\n onClick={() => handleTabChange(tab.slug)}\n onKeyDown={(e) => handleTabKeyDown(e, index)}\n onMouseEnter={() => setHoveredTab(tab.slug)}\n onMouseLeave={() => setHoveredTab(null)}\n role=\"tab\"\n tabIndex={isActive ? 0 : -1}\n type=\"button\"\n >\n <Tooltip\n className={`${baseClass}__tooltip`}\n position={index === 0 ? 'bottom' : 'top'} // TODO: set to \"top\" when we portal tooltips\n show={hoveredTab === tab.slug}\n >\n {tab.label}\n </Tooltip>\n <span className={`${baseClass}__tab-icon`}>{tab.icon}</span>\n <span className={`${baseClass}__tab-label`}>{tab.label}</span>\n </button>\n )\n })}\n </div>\n <div className={`${baseClass}__content`} role=\"tabpanel\">\n <DelayedSpinner\n baseClass={baseClass}\n delay={loadingDelay}\n isLoading={loadingTab === activeTabID}\n />\n {tabs.map((tab) => {\n const content = tabContent[tab.slug]\n if (!content) {\n return null\n }\n const isActive = tab.slug === activeTabID && loadingTab !== activeTabID\n return (\n <div key={tab.slug} style={isActive ? undefined : { display: 'none' }}>\n {content}\n </div>\n )\n })}\n </div>\n </div>\n </SidebarTabsProvider>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
@layer payload-default {
|
|
2
|
+
.sidebar-tabs {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
width: 100%;
|
|
6
|
+
flex-grow: 1;
|
|
7
|
+
gap: var(--spacer-2-5);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.sidebar-tabs__tabs {
|
|
11
|
+
display: flex;
|
|
12
|
+
gap: 0;
|
|
13
|
+
background-color: var(--color-bg-secondary);
|
|
14
|
+
border-radius: var(--radius-medium);
|
|
15
|
+
width: 100%;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.sidebar-tabs__tab {
|
|
19
|
+
all: unset;
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
display: flex;
|
|
22
|
+
flex: 1;
|
|
23
|
+
align-items: center;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
height: var(--spacer-4);
|
|
26
|
+
padding: 0 var(--spacer-1);
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
border-radius: var(--radius-medium);
|
|
29
|
+
border: 1px solid transparent;
|
|
30
|
+
background-color: transparent;
|
|
31
|
+
color: var(--color-icon-secondary);
|
|
32
|
+
transition:
|
|
33
|
+
background-color 0.15s ease,
|
|
34
|
+
border-color 0.15s ease,
|
|
35
|
+
color 0.15s ease;
|
|
36
|
+
position: relative;
|
|
37
|
+
|
|
38
|
+
&:hover {
|
|
39
|
+
color: var(--color-icon);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.sidebar-tabs__tab--active {
|
|
44
|
+
background-color: var(--color-bg);
|
|
45
|
+
border-color: var(--color-border);
|
|
46
|
+
color: var(--color-icon);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.sidebar-tabs__tab-icon {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
transition: opacity 0.15s ease;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Visually hidden but still accessible for screen readers */
|
|
57
|
+
.sidebar-tabs__tab-label {
|
|
58
|
+
position: absolute;
|
|
59
|
+
width: 1px;
|
|
60
|
+
height: 1px;
|
|
61
|
+
padding: 0;
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
clip: rect(0, 0, 0, 0);
|
|
64
|
+
white-space: nowrap;
|
|
65
|
+
border-width: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.sidebar-tabs__content {
|
|
69
|
+
width: 100%;
|
|
70
|
+
flex-grow: 1;
|
|
71
|
+
position: relative;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.sidebar-tabs__loading {
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
min-height: calc(var(--spacer-6) * 2.5);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { NavPreferences, PayloadComponent, SidebarTab } from 'payload';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import type { NavProps } from '../index.js';
|
|
4
|
+
import './index.css';
|
|
5
|
+
type SidebarTabWithReactNode = {
|
|
6
|
+
components: {
|
|
7
|
+
Content: PayloadComponent | React.ReactNode;
|
|
8
|
+
Icon: PayloadComponent | React.ReactNode;
|
|
9
|
+
};
|
|
10
|
+
} & Omit<SidebarTab, 'components'>;
|
|
11
|
+
export type SidebarTabsProps = {
|
|
12
|
+
navPreferences: NavPreferences;
|
|
13
|
+
tabs: SidebarTabWithReactNode[];
|
|
14
|
+
} & NavProps;
|
|
15
|
+
export declare const SidebarTabs: React.FC<SidebarTabsProps>;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SidebarTabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAI3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAG3C,OAAO,aAAa,CAAA;AAEpB,KAAK,uBAAuB,GAAG;IAC7B,UAAU,EAAE;QACV,OAAO,EAAE,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAA;QAC3C,IAAI,EAAE,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAA;KACzC,CAAA;CACF,GAAG,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,CAAA;AAElC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,cAAc,CAAA;IAC9B,IAAI,EAAE,uBAAuB,EAAE,CAAA;CAChC,GAAG,QAAQ,CAAA;AAIZ,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4FlD,CAAA"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { getTranslation } from '@payloadcms/translations';
|
|
3
|
+
import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { SidebarTabsClient } from './index.client.js';
|
|
6
|
+
const baseClass = 'sidebar-tabs';
|
|
7
|
+
export const SidebarTabs = props => {
|
|
8
|
+
const {
|
|
9
|
+
documentSubViewType,
|
|
10
|
+
i18n,
|
|
11
|
+
locale,
|
|
12
|
+
navPreferences,
|
|
13
|
+
params,
|
|
14
|
+
payload,
|
|
15
|
+
permissions,
|
|
16
|
+
req,
|
|
17
|
+
searchParams,
|
|
18
|
+
tabs,
|
|
19
|
+
user,
|
|
20
|
+
viewType
|
|
21
|
+
} = props;
|
|
22
|
+
// Determine which tab should be active on initial load
|
|
23
|
+
// First try saved preference, then default tab, then first tab
|
|
24
|
+
const preferredTabSlug = navPreferences.activeTab || tabs.find(tab => tab.isDefaultActive)?.slug || tabs[0]?.slug;
|
|
25
|
+
// Verify the preferred tab actually exists, otherwise fall back to default or first tab
|
|
26
|
+
const activeTab = tabs.find(t => t.slug === preferredTabSlug) || tabs.find(tab => tab.isDefaultActive) || tabs[0];
|
|
27
|
+
const initialActiveTabID = activeTab?.slug || tabs[0]?.slug;
|
|
28
|
+
// Build initial tab contents
|
|
29
|
+
// Strategy: Pre-render tabs that are already React elements (can't be lazy-loaded),
|
|
30
|
+
// and only render the initially active tab if it's a CustomComponent (can be lazy-loaded)
|
|
31
|
+
const initialTabContents = {};
|
|
32
|
+
const renderComponent = component => {
|
|
33
|
+
// Check if component is already a React node (payload provided React component)
|
|
34
|
+
if (/*#__PURE__*/React.isValidElement(component)) {
|
|
35
|
+
return component;
|
|
36
|
+
} else {
|
|
37
|
+
// Otherwise render it as a CustomComponent
|
|
38
|
+
return RenderServerComponent({
|
|
39
|
+
clientProps: {
|
|
40
|
+
documentSubViewType,
|
|
41
|
+
viewType
|
|
42
|
+
},
|
|
43
|
+
Component: component,
|
|
44
|
+
importMap: payload.importMap,
|
|
45
|
+
serverProps: {
|
|
46
|
+
i18n,
|
|
47
|
+
locale,
|
|
48
|
+
params,
|
|
49
|
+
payload,
|
|
50
|
+
permissions,
|
|
51
|
+
req,
|
|
52
|
+
searchParams,
|
|
53
|
+
user
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
for (const tab of tabs) {
|
|
59
|
+
if (/*#__PURE__*/React.isValidElement(tab.components.Content)) {
|
|
60
|
+
initialTabContents[tab.slug] = tab.components.Content;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
// If the active tab is a CustomComponent (lazy-loadable), render it now
|
|
64
|
+
if (activeTab && ! /*#__PURE__*/React.isValidElement(activeTab.components.Content)) {
|
|
65
|
+
initialTabContents[activeTab.slug] = renderComponent(activeTab.components.Content);
|
|
66
|
+
}
|
|
67
|
+
return /*#__PURE__*/_jsx(SidebarTabsClient, {
|
|
68
|
+
baseClass: baseClass,
|
|
69
|
+
initialActiveTabID: initialActiveTabID,
|
|
70
|
+
initialTabContents: initialTabContents,
|
|
71
|
+
tabs: tabs.map(tab => {
|
|
72
|
+
const labelText = tab.label ? getTranslation(tab.label, i18n) : tab.slug;
|
|
73
|
+
// CustomComponents can be lazy-loaded/revalidated, React elements cannot
|
|
74
|
+
const isLazyLoadable = ! /*#__PURE__*/React.isValidElement(tab.components.Content);
|
|
75
|
+
return {
|
|
76
|
+
slug: tab.slug,
|
|
77
|
+
icon: renderComponent(tab.components.Icon),
|
|
78
|
+
isDefaultActive: tab.isDefaultActive,
|
|
79
|
+
label: labelText,
|
|
80
|
+
lazyLoadable: isLazyLoadable
|
|
81
|
+
};
|
|
82
|
+
})
|
|
83
|
+
});
|
|
84
|
+
};
|
|
85
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["getTranslation","RenderServerComponent","React","SidebarTabsClient","baseClass","SidebarTabs","props","documentSubViewType","i18n","locale","navPreferences","params","payload","permissions","req","searchParams","tabs","user","viewType","preferredTabSlug","activeTab","find","tab","isDefaultActive","slug","t","initialActiveTabID","initialTabContents","renderComponent","component","isValidElement","clientProps","Component","importMap","serverProps","components","Content","_jsx","map","labelText","label","isLazyLoadable","icon","Icon","lazyLoadable"],"sources":["../../../../src/elements/Nav/SidebarTabs/index.tsx"],"sourcesContent":["import type { NavPreferences, PayloadComponent, SidebarTab } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\nimport React from 'react'\n\nimport type { NavProps } from '../index.js'\n\nimport { SidebarTabsClient } from './index.client.js'\nimport './index.css'\n\ntype SidebarTabWithReactNode = {\n components: {\n Content: PayloadComponent | React.ReactNode\n Icon: PayloadComponent | React.ReactNode\n }\n} & Omit<SidebarTab, 'components'>\n\nexport type SidebarTabsProps = {\n navPreferences: NavPreferences\n tabs: SidebarTabWithReactNode[]\n} & NavProps\n\nconst baseClass = 'sidebar-tabs'\n\nexport const SidebarTabs: React.FC<SidebarTabsProps> = (props) => {\n const {\n documentSubViewType,\n i18n,\n locale,\n navPreferences,\n params,\n payload,\n permissions,\n req,\n searchParams,\n tabs,\n user,\n viewType,\n } = props\n\n // Determine which tab should be active on initial load\n // First try saved preference, then default tab, then first tab\n const preferredTabSlug =\n navPreferences.activeTab || tabs.find((tab) => tab.isDefaultActive)?.slug || tabs[0]?.slug\n\n // Verify the preferred tab actually exists, otherwise fall back to default or first tab\n const activeTab =\n tabs.find((t) => t.slug === preferredTabSlug) ||\n tabs.find((tab) => tab.isDefaultActive) ||\n tabs[0]\n\n const initialActiveTabID = activeTab?.slug || tabs[0]?.slug\n\n // Build initial tab contents\n // Strategy: Pre-render tabs that are already React elements (can't be lazy-loaded),\n // and only render the initially active tab if it's a CustomComponent (can be lazy-loaded)\n const initialTabContents: Record<string, React.ReactNode> = {}\n\n const renderComponent = (component: PayloadComponent | React.ReactNode): React.ReactNode => {\n // Check if component is already a React node (payload provided React component)\n if (React.isValidElement(component)) {\n return component\n } else {\n // Otherwise render it as a CustomComponent\n return RenderServerComponent({\n clientProps: {\n documentSubViewType,\n viewType,\n },\n Component: component as PayloadComponent,\n importMap: payload.importMap,\n serverProps: {\n i18n,\n locale,\n params,\n payload,\n permissions,\n req,\n searchParams,\n user,\n },\n })\n }\n }\n\n for (const tab of tabs) {\n if (React.isValidElement(tab.components.Content)) {\n initialTabContents[tab.slug] = tab.components.Content\n }\n }\n\n // If the active tab is a CustomComponent (lazy-loadable), render it now\n if (activeTab && !React.isValidElement(activeTab.components.Content)) {\n initialTabContents[activeTab.slug] = renderComponent(activeTab.components.Content)\n }\n\n return (\n <SidebarTabsClient\n baseClass={baseClass}\n initialActiveTabID={initialActiveTabID}\n initialTabContents={initialTabContents}\n tabs={tabs.map((tab) => {\n const labelText = tab.label ? getTranslation(tab.label, i18n) : tab.slug\n // CustomComponents can be lazy-loaded/revalidated, React elements cannot\n const isLazyLoadable = !React.isValidElement(tab.components.Content)\n\n return {\n slug: tab.slug,\n icon: renderComponent(tab.components.Icon),\n isDefaultActive: tab.isDefaultActive,\n label: labelText,\n lazyLoadable: isLazyLoadable,\n }\n })}\n />\n )\n}\n"],"mappings":";AAEA,SAASA,cAAc,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ;AACtC,OAAOC,KAAA,MAAW;AAIlB,SAASC,iBAAiB,QAAQ;AAelC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAA2CC,KAAA;EACtD,MAAM;IACJC,mBAAmB;IACnBC,IAAI;IACJC,MAAM;IACNC,cAAc;IACdC,MAAM;IACNC,OAAO;IACPC,WAAW;IACXC,GAAG;IACHC,YAAY;IACZC,IAAI;IACJC,IAAI;IACJC;EAAQ,CACT,GAAGZ,KAAA;EAEJ;EACA;EACA,MAAMa,gBAAA,GACJT,cAAA,CAAeU,SAAS,IAAIJ,IAAA,CAAKK,IAAI,CAAEC,GAAA,IAAQA,GAAA,CAAIC,eAAe,GAAGC,IAAA,IAAQR,IAAI,CAAC,EAAE,EAAEQ,IAAA;EAExF;EACA,MAAMJ,SAAA,GACJJ,IAAA,CAAKK,IAAI,CAAEI,CAAA,IAAMA,CAAA,CAAED,IAAI,KAAKL,gBAAA,KAC5BH,IAAA,CAAKK,IAAI,CAAEC,GAAA,IAAQA,GAAA,CAAIC,eAAe,KACtCP,IAAI,CAAC,EAAE;EAET,MAAMU,kBAAA,GAAqBN,SAAA,EAAWI,IAAA,IAAQR,IAAI,CAAC,EAAE,EAAEQ,IAAA;EAEvD;EACA;EACA;EACA,MAAMG,kBAAA,GAAsD,CAAC;EAE7D,MAAMC,eAAA,GAAmBC,SAAA;IACvB;IACA,iBAAI3B,KAAA,CAAM4B,cAAc,CAACD,SAAA,GAAY;MACnC,OAAOA,SAAA;IACT,OAAO;MACL;MACA,OAAO5B,qBAAA,CAAsB;QAC3B8B,WAAA,EAAa;UACXxB,mBAAA;UACAW;QACF;QACAc,SAAA,EAAWH,SAAA;QACXI,SAAA,EAAWrB,OAAA,CAAQqB,SAAS;QAC5BC,WAAA,EAAa;UACX1B,IAAA;UACAC,MAAA;UACAE,MAAA;UACAC,OAAA;UACAC,WAAA;UACAC,GAAA;UACAC,YAAA;UACAE;QACF;MACF;IACF;EACF;EAEA,KAAK,MAAMK,GAAA,IAAON,IAAA,EAAM;IACtB,iBAAId,KAAA,CAAM4B,cAAc,CAACR,GAAA,CAAIa,UAAU,CAACC,OAAO,GAAG;MAChDT,kBAAkB,CAACL,GAAA,CAAIE,IAAI,CAAC,GAAGF,GAAA,CAAIa,UAAU,CAACC,OAAO;IACvD;EACF;EAEA;EACA,IAAIhB,SAAA,IAAa,eAAClB,KAAA,CAAM4B,cAAc,CAACV,SAAA,CAAUe,UAAU,CAACC,OAAO,GAAG;IACpET,kBAAkB,CAACP,SAAA,CAAUI,IAAI,CAAC,GAAGI,eAAA,CAAgBR,SAAA,CAAUe,UAAU,CAACC,OAAO;EACnF;EAEA,oBACEC,IAAA,CAAClC,iBAAA;IACCC,SAAA,EAAWA,SAAA;IACXsB,kBAAA,EAAoBA,kBAAA;IACpBC,kBAAA,EAAoBA,kBAAA;IACpBX,IAAA,EAAMA,IAAA,CAAKsB,GAAG,CAAEhB,GAAA;MACd,MAAMiB,SAAA,GAAYjB,GAAA,CAAIkB,KAAK,GAAGxC,cAAA,CAAesB,GAAA,CAAIkB,KAAK,EAAEhC,IAAA,IAAQc,GAAA,CAAIE,IAAI;MACxE;MACA,MAAMiB,cAAA,GAAiB,eAACvC,KAAA,CAAM4B,cAAc,CAACR,GAAA,CAAIa,UAAU,CAACC,OAAO;MAEnE,OAAO;QACLZ,IAAA,EAAMF,GAAA,CAAIE,IAAI;QACdkB,IAAA,EAAMd,eAAA,CAAgBN,GAAA,CAAIa,UAAU,CAACQ,IAAI;QACzCpB,eAAA,EAAiBD,GAAA,CAAIC,eAAe;QACpCiB,KAAA,EAAOD,SAAA;QACPK,YAAA,EAAcH;MAChB;IACF;;AAGN","ignoreList":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ServerFunction } from 'payload';
|
|
2
|
+
import type React from 'react';
|
|
3
|
+
export type RenderTabServerFnArgs = {
|
|
4
|
+
tabSlug: string;
|
|
5
|
+
};
|
|
6
|
+
export type RenderTabServerFnReturnType = {
|
|
7
|
+
component: React.ReactNode;
|
|
8
|
+
};
|
|
9
|
+
export declare const renderTabHandler: ServerFunction<RenderTabServerFnArgs, RenderTabServerFnReturnType>;
|
|
10
|
+
//# sourceMappingURL=renderTabServerFn.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderTabServerFn.d.ts","sourceRoot":"","sources":["../../../../src/elements/Nav/SidebarTabs/renderTabServerFn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACxC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAC3C,qBAAqB,EACrB,2BAA2B,CA6C5B,CAAA"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent';
|
|
2
|
+
export const renderTabHandler = ({
|
|
3
|
+
req,
|
|
4
|
+
tabSlug
|
|
5
|
+
}) => {
|
|
6
|
+
if (!req.user) {
|
|
7
|
+
throw new Error('Unauthorized');
|
|
8
|
+
}
|
|
9
|
+
const {
|
|
10
|
+
importMap
|
|
11
|
+
} = req.payload;
|
|
12
|
+
const {
|
|
13
|
+
tabs
|
|
14
|
+
} = req.payload.config.admin.components?.sidebar || {};
|
|
15
|
+
if (!tabs) {
|
|
16
|
+
return {
|
|
17
|
+
component: null
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
const tabConfig = tabs.find(tab => tab.slug === tabSlug);
|
|
21
|
+
if (!tabConfig) {
|
|
22
|
+
return {
|
|
23
|
+
component: null
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
try {
|
|
27
|
+
const component = RenderServerComponent({
|
|
28
|
+
Component: tabConfig.components.Content,
|
|
29
|
+
importMap,
|
|
30
|
+
serverProps: {
|
|
31
|
+
i18n: req.i18n,
|
|
32
|
+
locale: req.locale,
|
|
33
|
+
params: req.routeParams,
|
|
34
|
+
payload: req.payload,
|
|
35
|
+
req,
|
|
36
|
+
searchParams: req.query,
|
|
37
|
+
user: req.user
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
return {
|
|
41
|
+
component
|
|
42
|
+
};
|
|
43
|
+
} catch (error) {
|
|
44
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
45
|
+
req.payload.logger.error({
|
|
46
|
+
err: error,
|
|
47
|
+
msg: `Error rendering tab "${tabSlug}": ${errorMessage}`
|
|
48
|
+
});
|
|
49
|
+
return {
|
|
50
|
+
component: null
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=renderTabServerFn.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"renderTabServerFn.js","names":["RenderServerComponent","renderTabHandler","req","tabSlug","user","Error","importMap","payload","tabs","config","admin","components","sidebar","component","tabConfig","find","tab","slug","Component","Content","serverProps","i18n","locale","params","routeParams","searchParams","query","error","errorMessage","message","String","logger","err","msg"],"sources":["../../../../src/elements/Nav/SidebarTabs/renderTabServerFn.ts"],"sourcesContent":["import type { ServerFunction } from 'payload'\nimport type React from 'react'\n\nimport { RenderServerComponent } from '@payloadcms/ui/elements/RenderServerComponent'\n\nexport type RenderTabServerFnArgs = {\n tabSlug: string\n}\n\nexport type RenderTabServerFnReturnType = {\n component: React.ReactNode\n}\n\nexport const renderTabHandler: ServerFunction<\n RenderTabServerFnArgs,\n RenderTabServerFnReturnType\n> = ({ req, tabSlug }) => {\n if (!req.user) {\n throw new Error('Unauthorized')\n }\n\n const { importMap } = req.payload\n const { tabs } = req.payload.config.admin.components?.sidebar || {}\n\n if (!tabs) {\n return { component: null }\n }\n\n const tabConfig = tabs.find((tab) => tab.slug === tabSlug)\n\n if (!tabConfig) {\n return { component: null }\n }\n\n try {\n const component = RenderServerComponent({\n Component: tabConfig.components.Content,\n importMap,\n serverProps: {\n i18n: req.i18n,\n locale: req.locale,\n params: req.routeParams,\n payload: req.payload,\n req,\n searchParams: req.query,\n user: req.user,\n },\n })\n\n return { component }\n } catch (error) {\n const errorMessage = error instanceof Error ? error.message : String(error)\n\n req.payload.logger.error({\n err: error,\n msg: `Error rendering tab \"${tabSlug}\": ${errorMessage}`,\n })\n\n return { component: null }\n }\n}\n"],"mappings":"AAGA,SAASA,qBAAqB,QAAQ;AAUtC,OAAO,MAAMC,gBAAA,GAGTA,CAAC;EAAEC,GAAG;EAAEC;AAAO,CAAE;EACnB,IAAI,CAACD,GAAA,CAAIE,IAAI,EAAE;IACb,MAAM,IAAIC,KAAA,CAAM;EAClB;EAEA,MAAM;IAAEC;EAAS,CAAE,GAAGJ,GAAA,CAAIK,OAAO;EACjC,MAAM;IAAEC;EAAI,CAAE,GAAGN,GAAA,CAAIK,OAAO,CAACE,MAAM,CAACC,KAAK,CAACC,UAAU,EAAEC,OAAA,IAAW,CAAC;EAElE,IAAI,CAACJ,IAAA,EAAM;IACT,OAAO;MAAEK,SAAA,EAAW;IAAK;EAC3B;EAEA,MAAMC,SAAA,GAAYN,IAAA,CAAKO,IAAI,CAAEC,GAAA,IAAQA,GAAA,CAAIC,IAAI,KAAKd,OAAA;EAElD,IAAI,CAACW,SAAA,EAAW;IACd,OAAO;MAAED,SAAA,EAAW;IAAK;EAC3B;EAEA,IAAI;IACF,MAAMA,SAAA,GAAYb,qBAAA,CAAsB;MACtCkB,SAAA,EAAWJ,SAAA,CAAUH,UAAU,CAACQ,OAAO;MACvCb,SAAA;MACAc,WAAA,EAAa;QACXC,IAAA,EAAMnB,GAAA,CAAImB,IAAI;QACdC,MAAA,EAAQpB,GAAA,CAAIoB,MAAM;QAClBC,MAAA,EAAQrB,GAAA,CAAIsB,WAAW;QACvBjB,OAAA,EAASL,GAAA,CAAIK,OAAO;QACpBL,GAAA;QACAuB,YAAA,EAAcvB,GAAA,CAAIwB,KAAK;QACvBtB,IAAA,EAAMF,GAAA,CAAIE;MACZ;IACF;IAEA,OAAO;MAAES;IAAU;EACrB,EAAE,OAAOc,KAAA,EAAO;IACd,MAAMC,YAAA,GAAeD,KAAA,YAAiBtB,KAAA,GAAQsB,KAAA,CAAME,OAAO,GAAGC,MAAA,CAAOH,KAAA;IAErEzB,GAAA,CAAIK,OAAO,CAACwB,MAAM,CAACJ,KAAK,CAAC;MACvBK,GAAA,EAAKL,KAAA;MACLM,GAAA,EAAK,wBAAwB9B,OAAA,MAAayB,YAAA;IAC5C;IAEA,OAAO;MAAEf,SAAA,EAAW;IAAK;EAC3B;AACF","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getNavPrefs.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/getNavPrefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7D,eAAO,MAAM,WAAW,QAAqB,cAAc,KAAG,OAAO,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"getNavPrefs.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/getNavPrefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7D,eAAO,MAAM,WAAW,QAAqB,cAAc,KAAG,OAAO,CAAC,cAAc,CAoElF,CAAA"}
|