@payloadcms/next 3.80.0-internal.c396c15 → 3.80.0-internal.cdd7ef7

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.
Files changed (108) hide show
  1. package/dist/elements/HierarchyTypeField/index.d.ts +9 -0
  2. package/dist/elements/HierarchyTypeField/index.d.ts.map +1 -0
  3. package/dist/elements/HierarchyTypeField/index.js +114 -0
  4. package/dist/elements/HierarchyTypeField/index.js.map +1 -0
  5. package/dist/elements/HierarchyTypeField/index.server.d.ts +9 -0
  6. package/dist/elements/HierarchyTypeField/index.server.d.ts.map +1 -0
  7. package/dist/elements/HierarchyTypeField/index.server.js +32 -0
  8. package/dist/elements/HierarchyTypeField/index.server.js.map +1 -0
  9. package/dist/elements/Nav/SidebarTabs/TabError/index.d.ts +8 -0
  10. package/dist/elements/Nav/SidebarTabs/TabError/index.d.ts.map +1 -0
  11. package/dist/elements/Nav/SidebarTabs/TabError/index.js +42 -0
  12. package/dist/elements/Nav/SidebarTabs/TabError/index.js.map +1 -0
  13. package/dist/elements/Nav/SidebarTabs/constants.d.ts +2 -0
  14. package/dist/elements/Nav/SidebarTabs/constants.d.ts.map +1 -0
  15. package/dist/elements/Nav/SidebarTabs/constants.js +2 -0
  16. package/dist/elements/Nav/SidebarTabs/constants.js.map +1 -0
  17. package/dist/elements/Nav/SidebarTabs/index.client.d.ts +22 -0
  18. package/dist/elements/Nav/SidebarTabs/index.client.d.ts.map +1 -0
  19. package/dist/elements/Nav/SidebarTabs/index.client.js +194 -0
  20. package/dist/elements/Nav/SidebarTabs/index.client.js.map +1 -0
  21. package/dist/elements/Nav/SidebarTabs/index.d.ts +17 -0
  22. package/dist/elements/Nav/SidebarTabs/index.d.ts.map +1 -0
  23. package/dist/elements/Nav/SidebarTabs/index.js +85 -0
  24. package/dist/elements/Nav/SidebarTabs/index.js.map +1 -0
  25. package/dist/elements/Nav/SidebarTabs/renderTabServerFn.d.ts +10 -0
  26. package/dist/elements/Nav/SidebarTabs/renderTabServerFn.d.ts.map +1 -0
  27. package/dist/elements/Nav/SidebarTabs/renderTabServerFn.js +54 -0
  28. package/dist/elements/Nav/SidebarTabs/renderTabServerFn.js.map +1 -0
  29. package/dist/elements/Nav/getNavPrefs.d.ts.map +1 -1
  30. package/dist/elements/Nav/getNavPrefs.js +36 -2
  31. package/dist/elements/Nav/getNavPrefs.js.map +1 -1
  32. package/dist/elements/Nav/index.client.d.ts.map +1 -1
  33. package/dist/elements/Nav/index.client.js +27 -44
  34. package/dist/elements/Nav/index.client.js.map +1 -1
  35. package/dist/elements/Nav/index.d.ts.map +1 -1
  36. package/dist/elements/Nav/index.js +35 -7
  37. package/dist/elements/Nav/index.js.map +1 -1
  38. package/dist/exports/client.d.ts +2 -1
  39. package/dist/exports/client.d.ts.map +1 -1
  40. package/dist/exports/client.js +2 -1
  41. package/dist/exports/client.js.map +1 -1
  42. package/dist/exports/rsc.d.ts +2 -1
  43. package/dist/exports/rsc.d.ts.map +1 -1
  44. package/dist/exports/rsc.js +2 -1
  45. package/dist/exports/rsc.js.map +1 -1
  46. package/dist/exports/utilities.d.ts +2 -0
  47. package/dist/exports/utilities.d.ts.map +1 -1
  48. package/dist/exports/utilities.js +1 -0
  49. package/dist/exports/utilities.js.map +1 -1
  50. package/dist/prod/styles.css +1 -1
  51. package/dist/utilities/getHierarchyAncestry.d.ts +24 -0
  52. package/dist/utilities/getHierarchyAncestry.d.ts.map +1 -0
  53. package/dist/utilities/getHierarchyAncestry.js +103 -0
  54. package/dist/utilities/getHierarchyAncestry.js.map +1 -0
  55. package/dist/utilities/handleServerFunctions.js +2 -2
  56. package/dist/utilities/handleServerFunctions.js.map +1 -1
  57. package/dist/views/Account/ResetPreferences/index.d.ts.map +1 -1
  58. package/dist/views/Account/ResetPreferences/index.js +2 -4
  59. package/dist/views/Account/ResetPreferences/index.js.map +1 -1
  60. package/dist/views/Document/renderDocumentSlots.d.ts.map +1 -1
  61. package/dist/views/Document/renderDocumentSlots.js +8 -0
  62. package/dist/views/Document/renderDocumentSlots.js.map +1 -1
  63. package/dist/views/List/handleHierarchy.d.ts +18 -0
  64. package/dist/views/List/handleHierarchy.d.ts.map +1 -0
  65. package/dist/views/List/handleHierarchy.js +258 -0
  66. package/dist/views/List/handleHierarchy.js.map +1 -0
  67. package/dist/views/List/index.d.ts.map +1 -1
  68. package/dist/views/List/index.js +84 -28
  69. package/dist/views/List/index.js.map +1 -1
  70. package/dist/views/Root/getRouteData.d.ts +1 -4
  71. package/dist/views/Root/getRouteData.d.ts.map +1 -1
  72. package/dist/views/Root/getRouteData.js +27 -91
  73. package/dist/views/Root/getRouteData.js.map +1 -1
  74. package/dist/views/Root/index.d.ts.map +1 -1
  75. package/dist/views/Root/index.js +5 -11
  76. package/dist/views/Root/index.js.map +1 -1
  77. package/dist/views/Root/metadata.d.ts.map +1 -1
  78. package/dist/views/Root/metadata.js +1 -37
  79. package/dist/views/Root/metadata.js.map +1 -1
  80. package/package.json +7 -7
  81. package/dist/views/BrowseByFolder/buildView.d.ts +0 -13
  82. package/dist/views/BrowseByFolder/buildView.d.ts.map +0 -1
  83. package/dist/views/BrowseByFolder/buildView.js +0 -170
  84. package/dist/views/BrowseByFolder/buildView.js.map +0 -1
  85. package/dist/views/BrowseByFolder/index.d.ts +0 -4
  86. package/dist/views/BrowseByFolder/index.d.ts.map +0 -1
  87. package/dist/views/BrowseByFolder/index.js +0 -20
  88. package/dist/views/BrowseByFolder/index.js.map +0 -1
  89. package/dist/views/BrowseByFolder/metadata.d.ts +0 -4
  90. package/dist/views/BrowseByFolder/metadata.d.ts.map +0 -1
  91. package/dist/views/BrowseByFolder/metadata.js +0 -18
  92. package/dist/views/BrowseByFolder/metadata.js.map +0 -1
  93. package/dist/views/CollectionFolders/buildView.d.ts +0 -15
  94. package/dist/views/CollectionFolders/buildView.d.ts.map +0 -1
  95. package/dist/views/CollectionFolders/buildView.js +0 -156
  96. package/dist/views/CollectionFolders/buildView.js.map +0 -1
  97. package/dist/views/CollectionFolders/index.d.ts +0 -4
  98. package/dist/views/CollectionFolders/index.d.ts.map +0 -1
  99. package/dist/views/CollectionFolders/index.js +0 -20
  100. package/dist/views/CollectionFolders/index.js.map +0 -1
  101. package/dist/views/CollectionFolders/metadata.d.ts +0 -7
  102. package/dist/views/CollectionFolders/metadata.d.ts.map +0 -1
  103. package/dist/views/CollectionFolders/metadata.js +0 -25
  104. package/dist/views/CollectionFolders/metadata.js.map +0 -1
  105. package/dist/views/CollectionFolders/renderFolderViewSlots.d.ts +0 -11
  106. package/dist/views/CollectionFolders/renderFolderViewSlots.d.ts.map +0 -1
  107. package/dist/views/CollectionFolders/renderFolderViewSlots.js +0 -64
  108. package/dist/views/CollectionFolders/renderFolderViewSlots.js.map +0 -1
@@ -0,0 +1,9 @@
1
+ import type { Option, SelectFieldClientProps } from 'payload';
2
+ import React from 'react';
3
+ type HierarchyTypeFieldProps = {
4
+ options: Option[];
5
+ parentFieldName: string;
6
+ } & SelectFieldClientProps;
7
+ export declare const HierarchyTypeField: React.FC<HierarchyTypeFieldProps>;
8
+ export {};
9
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/HierarchyTypeField/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAgB,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAS3E,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,KAAK,uBAAuB,GAAG;IAC7B,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,eAAe,EAAE,MAAM,CAAA;CACxB,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAyHhE,CAAA"}
@@ -0,0 +1,114 @@
1
+ 'use client';
2
+
3
+ import { jsx as _jsx } from "react/jsx-runtime";
4
+ import { formatOptions, mergeFieldStyles, SelectInput, useField, useHierarchy } from '@payloadcms/ui';
5
+ import React, { useCallback, useMemo } from 'react';
6
+ export const HierarchyTypeField = ({
7
+ options: allSelectOptions,
8
+ parentFieldName,
9
+ ...props
10
+ }) => {
11
+ const {
12
+ field,
13
+ field: {
14
+ name,
15
+ admin: {
16
+ className,
17
+ isClearable = true,
18
+ isSortable = true,
19
+ placeholder
20
+ } = {},
21
+ hasMany = false,
22
+ label,
23
+ localized,
24
+ required
25
+ },
26
+ onChange: onChangeFromProps,
27
+ path: pathFromProps,
28
+ readOnly,
29
+ validate
30
+ } = props;
31
+ const {
32
+ allowedCollections
33
+ } = useHierarchy();
34
+ const options = useMemo(() => {
35
+ if (!allowedCollections || allowedCollections.length === 0) {
36
+ return formatOptions(allSelectOptions);
37
+ }
38
+ return formatOptions(allSelectOptions.filter(option => {
39
+ if (typeof option === 'object' && 'value' in option && option.value) {
40
+ return allowedCollections.some(c => c.slug === option.value);
41
+ }
42
+ return true;
43
+ }));
44
+ }, [allSelectOptions, allowedCollections]);
45
+ const {
46
+ customComponents: {
47
+ AfterInput,
48
+ BeforeInput,
49
+ Description,
50
+ Error,
51
+ Label
52
+ } = {},
53
+ disabled,
54
+ path,
55
+ selectFilterOptions,
56
+ setValue,
57
+ showError,
58
+ value
59
+ } = useField({
60
+ potentiallyStalePath: pathFromProps,
61
+ validate
62
+ });
63
+ const onChange = useCallback(selectedOption => {
64
+ if (readOnly || disabled) {
65
+ return;
66
+ }
67
+ let newValue = null;
68
+ if (selectedOption && hasMany) {
69
+ if (Array.isArray(selectedOption)) {
70
+ newValue = selectedOption.map(option_0 => option_0.value);
71
+ } else {
72
+ newValue = [];
73
+ }
74
+ } else if (selectedOption && !Array.isArray(selectedOption)) {
75
+ newValue = selectedOption.value;
76
+ }
77
+ if (typeof onChangeFromProps === 'function') {
78
+ onChangeFromProps(newValue);
79
+ }
80
+ setValue(newValue);
81
+ }, [readOnly, disabled, hasMany, setValue, onChangeFromProps]);
82
+ const styles = useMemo(() => mergeFieldStyles(field), [field]);
83
+ const isRequired = required || Array.isArray(allowedCollections) && allowedCollections.length > 0;
84
+ return /*#__PURE__*/_jsx("div", {
85
+ children: /*#__PURE__*/_jsx(SelectInput, {
86
+ AfterInput: AfterInput,
87
+ BeforeInput: BeforeInput,
88
+ className: className,
89
+ Description: Description,
90
+ description: "Select the collection types this item can contain",
91
+ Error: Error,
92
+ filterOption: selectFilterOptions ? ({
93
+ value: optionValue
94
+ }) => selectFilterOptions?.some(option_1 => (typeof option_1 === 'string' ? option_1 : option_1.value) === optionValue) : undefined,
95
+ hasMany: hasMany,
96
+ isClearable: isClearable,
97
+ isSortable: isSortable,
98
+ Label: Label,
99
+ label: label,
100
+ localized: localized,
101
+ name: name,
102
+ onChange: onChange,
103
+ options: options,
104
+ path: path,
105
+ placeholder: placeholder,
106
+ readOnly: readOnly || disabled,
107
+ required: isRequired,
108
+ showError: showError,
109
+ style: styles,
110
+ value: value
111
+ })
112
+ });
113
+ };
114
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["formatOptions","mergeFieldStyles","SelectInput","useField","useHierarchy","React","useCallback","useMemo","HierarchyTypeField","options","allSelectOptions","parentFieldName","props","field","name","admin","className","isClearable","isSortable","placeholder","hasMany","label","localized","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","allowedCollections","length","filter","option","value","some","c","slug","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","selectFilterOptions","setValue","showError","potentiallyStalePath","selectedOption","newValue","Array","isArray","map","styles","isRequired","_jsx","description","filterOption","optionValue","undefined","style"],"sources":["../../../src/elements/HierarchyTypeField/index.tsx"],"sourcesContent":["'use client'\nimport type { ReactSelectAdapterProps } from '@payloadcms/ui'\nimport type { Option, OptionObject, SelectFieldClientProps } from 'payload'\n\nimport {\n formatOptions,\n mergeFieldStyles,\n SelectInput,\n useField,\n useHierarchy,\n} from '@payloadcms/ui'\nimport React, { useCallback, useMemo } from 'react'\n\ntype HierarchyTypeFieldProps = {\n options: Option[]\n parentFieldName: string\n} & SelectFieldClientProps\n\nexport const HierarchyTypeField: React.FC<HierarchyTypeFieldProps> = ({\n options: allSelectOptions,\n parentFieldName,\n ...props\n}) => {\n const {\n field,\n field: {\n name,\n admin: { className, isClearable = true, isSortable = true, placeholder } = {} as NonNullable<\n SelectFieldClientProps['field']['admin']\n >,\n hasMany = false,\n label,\n localized,\n required,\n },\n onChange: onChangeFromProps,\n path: pathFromProps,\n readOnly,\n validate,\n } = props\n\n const { allowedCollections } = useHierarchy()\n\n const options = useMemo(() => {\n if (!allowedCollections || allowedCollections.length === 0) {\n return formatOptions(allSelectOptions)\n }\n\n return formatOptions(\n allSelectOptions.filter((option) => {\n if (typeof option === 'object' && 'value' in option && option.value) {\n return allowedCollections.some((c) => c.slug === option.value)\n }\n return true\n }),\n )\n }, [allSelectOptions, allowedCollections])\n\n const {\n customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n disabled,\n path,\n selectFilterOptions,\n setValue,\n showError,\n value,\n } = useField({\n potentiallyStalePath: pathFromProps,\n validate,\n })\n\n const onChange: ReactSelectAdapterProps['onChange'] = useCallback(\n (selectedOption: OptionObject | OptionObject[]) => {\n if (readOnly || disabled) {\n return\n }\n\n let newValue: null | string | string[] = null\n\n if (selectedOption && hasMany) {\n if (Array.isArray(selectedOption)) {\n newValue = selectedOption.map((option) => option.value)\n } else {\n newValue = []\n }\n } else if (selectedOption && !Array.isArray(selectedOption)) {\n newValue = selectedOption.value\n }\n\n if (typeof onChangeFromProps === 'function') {\n onChangeFromProps(newValue)\n }\n\n setValue(newValue)\n },\n [readOnly, disabled, hasMany, setValue, onChangeFromProps],\n )\n\n const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n const isRequired =\n required || (Array.isArray(allowedCollections) && allowedCollections.length > 0)\n\n return (\n <div>\n <SelectInput\n AfterInput={AfterInput}\n BeforeInput={BeforeInput}\n className={className}\n Description={Description}\n description=\"Select the collection types this item can contain\"\n Error={Error}\n filterOption={\n selectFilterOptions\n ? ({ value: optionValue }) =>\n selectFilterOptions?.some(\n (option) => (typeof option === 'string' ? option : option.value) === optionValue,\n )\n : undefined\n }\n hasMany={hasMany}\n isClearable={isClearable}\n isSortable={isSortable}\n Label={Label}\n label={label}\n localized={localized}\n name={name}\n onChange={onChange}\n options={options}\n path={path}\n placeholder={placeholder}\n readOnly={readOnly || disabled}\n required={isRequired}\n showError={showError}\n style={styles}\n value={value as string | string[]}\n />\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,9 @@
1
+ import type { Option, SelectFieldServerProps } from 'payload';
2
+ import React from 'react';
3
+ type HierarchyTypeFieldServerProps = {
4
+ collectionOptions: Option[];
5
+ parentFieldName: string;
6
+ } & SelectFieldServerProps;
7
+ export declare const HierarchyTypeFieldServer: React.FC<HierarchyTypeFieldServerProps>;
8
+ export {};
9
+ //# sourceMappingURL=index.server.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.server.d.ts","sourceRoot":"","sources":["../../../src/elements/HierarchyTypeField/index.server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAG7D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,6BAA6B,GAAG;IACnC,iBAAiB,EAAE,MAAM,EAAE,CAAA;IAC3B,eAAe,EAAE,MAAM,CAAA;CACxB,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA6B5E,CAAA"}
@@ -0,0 +1,32 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { getTranslation } from '@payloadcms/translations';
3
+ import React from 'react';
4
+ import { HierarchyTypeField } from './index.js';
5
+ export const HierarchyTypeFieldServer = ({
6
+ clientField,
7
+ collectionOptions,
8
+ i18n,
9
+ parentFieldName,
10
+ path,
11
+ permissions,
12
+ readOnly
13
+ }) => {
14
+ const translatedOptions = collectionOptions.map(option => {
15
+ if (typeof option === 'object' && 'label' in option) {
16
+ return {
17
+ ...option,
18
+ label: getTranslation(option.label, i18n)
19
+ };
20
+ }
21
+ return option;
22
+ });
23
+ return /*#__PURE__*/_jsx(HierarchyTypeField, {
24
+ field: clientField,
25
+ options: translatedOptions,
26
+ parentFieldName: parentFieldName,
27
+ path: path,
28
+ permissions: permissions,
29
+ readOnly: readOnly
30
+ });
31
+ };
32
+ //# sourceMappingURL=index.server.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.server.js","names":["getTranslation","React","HierarchyTypeField","HierarchyTypeFieldServer","clientField","collectionOptions","i18n","parentFieldName","path","permissions","readOnly","translatedOptions","map","option","label","_jsx","field","options"],"sources":["../../../src/elements/HierarchyTypeField/index.server.tsx"],"sourcesContent":["import type { Option, SelectFieldServerProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { HierarchyTypeField } from './index.js'\n\ntype HierarchyTypeFieldServerProps = {\n collectionOptions: Option[]\n parentFieldName: string\n} & SelectFieldServerProps\n\nexport const HierarchyTypeFieldServer: React.FC<HierarchyTypeFieldServerProps> = ({\n clientField,\n collectionOptions,\n i18n,\n parentFieldName,\n path,\n permissions,\n readOnly,\n}) => {\n const translatedOptions: Option[] = collectionOptions.map((option) => {\n if (typeof option === 'object' && 'label' in option) {\n return {\n ...option,\n label: getTranslation(option.label, i18n),\n }\n }\n return option\n })\n\n return (\n <HierarchyTypeField\n field={clientField}\n options={translatedOptions}\n parentFieldName={parentFieldName}\n path={path}\n permissions={permissions}\n readOnly={readOnly}\n />\n )\n}\n"],"mappings":";AAEA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,kBAAkB,QAAQ;AAOnC,OAAO,MAAMC,wBAAA,GAAoEA,CAAC;EAChFC,WAAW;EACXC,iBAAiB;EACjBC,IAAI;EACJC,eAAe;EACfC,IAAI;EACJC,WAAW;EACXC;AAAQ,CACT;EACC,MAAMC,iBAAA,GAA8BN,iBAAA,CAAkBO,GAAG,CAAEC,MAAA;IACzD,IAAI,OAAOA,MAAA,KAAW,YAAY,WAAWA,MAAA,EAAQ;MACnD,OAAO;QACL,GAAGA,MAAM;QACTC,KAAA,EAAOd,cAAA,CAAea,MAAA,CAAOC,KAAK,EAAER,IAAA;MACtC;IACF;IACA,OAAOO,MAAA;EACT;EAEA,oBACEE,IAAA,CAACb,kBAAA;IACCc,KAAA,EAAOZ,WAAA;IACPa,OAAA,EAASN,iBAAA;IACTJ,eAAA,EAAiBA,eAAA;IACjBC,IAAA,EAAMA,IAAA;IACNC,WAAA,EAAaA,WAAA;IACbC,QAAA,EAAUA;;AAGhB","ignoreList":[]}
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import './index.scss';
3
+ export type TabErrorProps = {
4
+ message: string;
5
+ onRetry: () => void;
6
+ };
7
+ export declare const TabError: React.FC<TabErrorProps>;
8
+ //# sourceMappingURL=index.d.ts.map
@@ -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,cAAc,CAAA;AAIrB,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.scss'\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,2 @@
1
+ export declare const DEFAULT_NAV_TAB_SLUG = "nav";
2
+ //# sourceMappingURL=constants.d.ts.map
@@ -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,2 @@
1
+ export const DEFAULT_NAV_TAB_SLUG = 'nav';
2
+ //# sourceMappingURL=constants.js.map
@@ -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,194 @@
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
+ reloadTabContent: reloadTabContent,
139
+ children: /*#__PURE__*/_jsxs("div", {
140
+ className: baseClass,
141
+ children: [/*#__PURE__*/_jsx("div", {
142
+ className: `${baseClass}__tabs`,
143
+ role: "tablist",
144
+ children: tabs.map((tab_0, index) => {
145
+ const isActive = tab_0.slug === activeTabID;
146
+ return /*#__PURE__*/_jsxs("button", {
147
+ "aria-selected": isActive,
148
+ className: `${baseClass}__tab ${isActive ? `${baseClass}__tab--active` : ''}`,
149
+ onClick: () => handleTabChange(tab_0.slug),
150
+ onKeyDown: e_0 => handleTabKeyDown(e_0, index),
151
+ onMouseEnter: () => setHoveredTab(tab_0.slug),
152
+ onMouseLeave: () => setHoveredTab(null),
153
+ role: "tab",
154
+ tabIndex: isActive ? 0 : -1,
155
+ type: "button",
156
+ children: [/*#__PURE__*/_jsx(Tooltip, {
157
+ className: `${baseClass}__tooltip`,
158
+ position: index === 0 ? 'bottom' : 'top',
159
+ show: hoveredTab === tab_0.slug,
160
+ children: tab_0.label
161
+ }), /*#__PURE__*/_jsx("span", {
162
+ className: `${baseClass}__tab-icon`,
163
+ children: tab_0.icon
164
+ }), /*#__PURE__*/_jsx("span", {
165
+ className: `${baseClass}__tab-label`,
166
+ children: tab_0.label
167
+ })]
168
+ }, tab_0.slug);
169
+ })
170
+ }), /*#__PURE__*/_jsxs("div", {
171
+ className: `${baseClass}__content`,
172
+ role: "tabpanel",
173
+ children: [/*#__PURE__*/_jsx(DelayedSpinner, {
174
+ baseClass: baseClass,
175
+ delay: loadingDelay,
176
+ isLoading: loadingTab === activeTabID
177
+ }), tabs.map(tab_1 => {
178
+ const content = tabContent[tab_1.slug];
179
+ if (!content) {
180
+ return null;
181
+ }
182
+ const isActive_0 = tab_1.slug === activeTabID && loadingTab !== activeTabID;
183
+ return /*#__PURE__*/_jsx("div", {
184
+ style: isActive_0 ? undefined : {
185
+ display: 'none'
186
+ },
187
+ children: content
188
+ }, tab_1.slug);
189
+ })]
190
+ })]
191
+ })
192
+ });
193
+ };
194
+ //# 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","_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 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,17 @@
1
+ import type { NavPreferences, PayloadComponent, SidebarTab } from 'payload';
2
+ import React from 'react';
3
+ import type { NavProps } from '../index.js';
4
+ import './index.scss';
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,cAAc,CAAA;AAErB,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