@payloadcms/ui 3.0.0-alpha.57 → 3.0.0-alpha.59
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/elements/Collapsible/index.d.ts +1 -1
- package/dist/elements/Collapsible/index.d.ts.map +1 -1
- package/dist/elements/Collapsible/index.js +12 -12
- package/dist/elements/Collapsible/index.js.map +1 -1
- package/dist/elements/Collapsible/provider.d.ts +4 -4
- package/dist/elements/Collapsible/provider.d.ts.map +1 -1
- package/dist/elements/Collapsible/provider.js +11 -11
- package/dist/elements/Collapsible/provider.js.map +1 -1
- package/dist/elements/ListControls/getTextFieldsToBeSearched.d.ts +2 -2
- package/dist/elements/ListControls/getTextFieldsToBeSearched.d.ts.map +1 -1
- package/dist/elements/ListControls/getTextFieldsToBeSearched.js +4 -5
- package/dist/elements/ListControls/getTextFieldsToBeSearched.js.map +1 -1
- package/dist/elements/ListControls/index.d.ts +1 -2
- package/dist/elements/ListControls/index.d.ts.map +1 -1
- package/dist/elements/ListControls/index.js +3 -2
- package/dist/elements/ListControls/index.js.map +1 -1
- package/dist/elements/SearchFilter/index.d.ts +2 -2
- package/dist/elements/SearchFilter/index.d.ts.map +1 -1
- package/dist/elements/SearchFilter/index.js +4 -3
- package/dist/elements/SearchFilter/index.js.map +1 -1
- package/dist/elements/SelectAll/index.js +4 -1
- package/dist/elements/SelectAll/index.js.map +1 -1
- package/dist/elements/SelectRow/index.js +4 -1
- package/dist/elements/SelectRow/index.js.map +1 -1
- package/dist/fields/Array/ArrayRow.js +1 -1
- package/dist/fields/Array/ArrayRow.js.map +1 -1
- package/dist/fields/Blocks/BlockRow.js +1 -1
- package/dist/fields/Blocks/BlockRow.js.map +1 -1
- package/dist/fields/Group/index.js +1 -1
- package/dist/fields/Group/index.js.map +1 -1
- package/dist/fields/Tabs/index.js +1 -1
- package/dist/fields/Tabs/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -7,11 +7,11 @@ export type Props = {
|
|
|
7
7
|
actions?: React.ReactNode;
|
|
8
8
|
children: React.ReactNode;
|
|
9
9
|
className?: string;
|
|
10
|
-
collapsed?: boolean;
|
|
11
10
|
collapsibleStyle?: 'default' | 'error';
|
|
12
11
|
dragHandleProps?: DragHandleProps;
|
|
13
12
|
header?: React.ReactNode;
|
|
14
13
|
initCollapsed?: boolean;
|
|
14
|
+
isCollapsed?: boolean;
|
|
15
15
|
onToggle?: (collapsed: boolean) => void;
|
|
16
16
|
};
|
|
17
17
|
export declare const Collapsible: React.FC<Props>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAQ1F,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAQ1F,OAAO,cAAc,CAAA;AACrB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IACtC,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyFvC,CAAA"}
|
|
@@ -8,31 +8,31 @@ import { useTranslation } from '../../providers/Translation/index.js';
|
|
|
8
8
|
import { CollapsibleProvider, useCollapsible } from './provider.js';
|
|
9
9
|
const baseClass = 'collapsible';
|
|
10
10
|
export { CollapsibleProvider, useCollapsible };
|
|
11
|
-
export const Collapsible = ({ actions, children, className,
|
|
11
|
+
export const Collapsible = ({ actions, children, className, collapsibleStyle = 'default', dragHandleProps, header, initCollapsed, isCollapsed: collapsedFromProps, onToggle })=>{
|
|
12
12
|
const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
|
|
13
13
|
const [hoveringToggle, setHoveringToggle] = useState(false);
|
|
14
|
-
const {
|
|
14
|
+
const { isWithinCollapsible } = useCollapsible();
|
|
15
15
|
const { t } = useTranslation();
|
|
16
|
-
const
|
|
16
|
+
const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal;
|
|
17
17
|
const toggleCollapsible = React.useCallback(()=>{
|
|
18
|
-
if (typeof onToggle === 'function') onToggle(!
|
|
19
|
-
setCollapsedLocal(!
|
|
18
|
+
if (typeof onToggle === 'function') onToggle(!isCollapsed);
|
|
19
|
+
setCollapsedLocal(!isCollapsed);
|
|
20
20
|
}, [
|
|
21
21
|
onToggle,
|
|
22
|
-
|
|
22
|
+
isCollapsed
|
|
23
23
|
]);
|
|
24
24
|
return /*#__PURE__*/ React.createElement("div", {
|
|
25
25
|
className: [
|
|
26
26
|
baseClass,
|
|
27
27
|
className,
|
|
28
28
|
dragHandleProps && `${baseClass}--has-drag-handle`,
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
isCollapsed && `${baseClass}--collapsed`,
|
|
30
|
+
isWithinCollapsible && `${baseClass}--nested`,
|
|
31
31
|
hoveringToggle && `${baseClass}--hovered`,
|
|
32
32
|
`${baseClass}--style-${collapsibleStyle}`
|
|
33
33
|
].filter(Boolean).join(' ')
|
|
34
34
|
}, /*#__PURE__*/ React.createElement(CollapsibleProvider, {
|
|
35
|
-
|
|
35
|
+
isCollapsed: isCollapsed,
|
|
36
36
|
toggle: toggleCollapsible
|
|
37
37
|
}, /*#__PURE__*/ React.createElement("div", {
|
|
38
38
|
className: `${baseClass}__toggle-wrap`,
|
|
@@ -45,7 +45,7 @@ export const Collapsible = ({ actions, children, className, collapsed: collapsed
|
|
|
45
45
|
}, /*#__PURE__*/ React.createElement(DragHandle, null)), /*#__PURE__*/ React.createElement("button", {
|
|
46
46
|
className: [
|
|
47
47
|
`${baseClass}__toggle`,
|
|
48
|
-
`${baseClass}__toggle--${
|
|
48
|
+
`${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`
|
|
49
49
|
].filter(Boolean).join(' '),
|
|
50
50
|
onClick: toggleCollapsible,
|
|
51
51
|
type: "button"
|
|
@@ -61,10 +61,10 @@ export const Collapsible = ({ actions, children, className, collapsed: collapsed
|
|
|
61
61
|
}, actions), /*#__PURE__*/ React.createElement("div", {
|
|
62
62
|
className: `${baseClass}__indicator`
|
|
63
63
|
}, /*#__PURE__*/ React.createElement(Chevron, {
|
|
64
|
-
direction: !
|
|
64
|
+
direction: !isCollapsed ? 'up' : undefined
|
|
65
65
|
})))), /*#__PURE__*/ React.createElement(AnimateHeight, {
|
|
66
66
|
duration: 200,
|
|
67
|
-
height:
|
|
67
|
+
height: isCollapsed ? 0 : 'auto'
|
|
68
68
|
}, /*#__PURE__*/ React.createElement("div", {
|
|
69
69
|
className: `${baseClass}__content`
|
|
70
70
|
}, children))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { DragHandle } from '../../icons/DragHandle/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type Props = {\n actions?: React.ReactNode\n children: React.ReactNode\n className?: string\n
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { DragHandle } from '../../icons/DragHandle/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type Props = {\n actions?: React.ReactNode\n children: React.ReactNode\n className?: string\n collapsibleStyle?: 'default' | 'error'\n dragHandleProps?: DragHandleProps\n header?: React.ReactNode\n initCollapsed?: boolean\n isCollapsed?: boolean\n onToggle?: (collapsed: boolean) => void\n}\n\nexport const Collapsible: React.FC<Props> = ({\n actions,\n children,\n className,\n collapsibleStyle = 'default',\n dragHandleProps,\n header,\n initCollapsed,\n isCollapsed: collapsedFromProps,\n onToggle,\n}) => {\n const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n const [hoveringToggle, setHoveringToggle] = useState(false)\n const { isWithinCollapsible } = useCollapsible()\n const { t } = useTranslation()\n\n const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n const toggleCollapsible = React.useCallback(() => {\n if (typeof onToggle === 'function') onToggle(!isCollapsed)\n setCollapsedLocal(!isCollapsed)\n }, [onToggle, isCollapsed])\n\n return (\n <div\n className={[\n baseClass,\n className,\n dragHandleProps && `${baseClass}--has-drag-handle`,\n isCollapsed && `${baseClass}--collapsed`,\n isWithinCollapsible && `${baseClass}--nested`,\n hoveringToggle && `${baseClass}--hovered`,\n `${baseClass}--style-${collapsibleStyle}`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n <div\n className={`${baseClass}__toggle-wrap`}\n onMouseEnter={() => setHoveringToggle(true)}\n onMouseLeave={() => setHoveringToggle(false)}\n >\n {dragHandleProps && (\n <div\n className={`${baseClass}__drag`}\n {...dragHandleProps.attributes}\n {...dragHandleProps.listeners}\n >\n <DragHandle />\n </div>\n )}\n <button\n className={[\n `${baseClass}__toggle`,\n `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n ]\n .filter(Boolean)\n .join(' ')}\n onClick={toggleCollapsible}\n type=\"button\"\n >\n <span>{t('fields:toggleBlock')}</span>\n </button>\n {header && (\n <div\n className={[\n `${baseClass}__header-wrap`,\n dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {header && header}\n </div>\n )}\n <div className={`${baseClass}__actions-wrap`}>\n {actions && <div className={`${baseClass}__actions`}>{actions}</div>}\n <div className={`${baseClass}__indicator`}>\n <Chevron direction={!isCollapsed ? 'up' : undefined} />\n </div>\n </div>\n </div>\n <AnimateHeight duration={200} height={isCollapsed ? 0 : 'auto'}>\n <div className={`${baseClass}__content`}>{children}</div>\n </AnimateHeight>\n </CollapsibleProvider>\n </div>\n )\n}\n"],"names":["React","useState","AnimateHeightImport","AnimateHeight","default","Chevron","DragHandle","useTranslation","CollapsibleProvider","useCollapsible","baseClass","Collapsible","actions","children","className","collapsibleStyle","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","toggleCollapsible","useCallback","div","filter","join","toggle","onMouseEnter","onMouseLeave","attributes","listeners","button","onClick","type","span","direction","undefined","duration","height"],"mappings":"AAAA;AACA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AACvC,OAAOC,yBAAyB,uBAAsB;AAItD,MAAMC,gBAAiBD,oBAAoBE,OAAO,IAChDF;AAEF,SAASG,OAAO,QAAQ,+BAA8B;AACtD,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,SAASC,cAAc,QAAQ,uCAAsC;AAErE,SAASC,mBAAmB,EAAEC,cAAc,QAAQ,gBAAe;AAEnE,MAAMC,YAAY;AAElB,SAASF,mBAAmB,EAAEC,cAAc,GAAE;AAc9C,OAAO,MAAME,cAA+B,CAAC,EAC3CC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,mBAAmB,SAAS,EAC5BC,eAAe,EACfC,MAAM,EACNC,aAAa,EACbC,aAAaC,kBAAkB,EAC/BC,QAAQ,EACT;IACC,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGtB,SAASuB,QAAQN;IAC7D,MAAM,CAACO,gBAAgBC,kBAAkB,GAAGzB,SAAS;IACrD,MAAM,EAAE0B,mBAAmB,EAAE,GAAGlB;IAChC,MAAM,EAAEmB,CAAC,EAAE,GAAGrB;IAEd,MAAMY,cAAc,OAAOC,uBAAuB,YAAYA,qBAAqBE;IAEnF,MAAMO,oBAAoB7B,MAAM8B,WAAW,CAAC;QAC1C,IAAI,OAAOT,aAAa,YAAYA,SAAS,CAACF;QAC9CI,kBAAkB,CAACJ;IACrB,GAAG;QAACE;QAAUF;KAAY;IAE1B,qBACE,oBAACY;QACCjB,WAAW;YACTJ;YACAI;YACAE,mBAAmB,CAAC,EAAEN,UAAU,iBAAiB,CAAC;YAClDS,eAAe,CAAC,EAAET,UAAU,WAAW,CAAC;YACxCiB,uBAAuB,CAAC,EAAEjB,UAAU,QAAQ,CAAC;YAC7Ce,kBAAkB,CAAC,EAAEf,UAAU,SAAS,CAAC;YACzC,CAAC,EAAEA,UAAU,QAAQ,EAAEK,iBAAiB,CAAC;SAC1C,CACEiB,MAAM,CAACR,SACPS,IAAI,CAAC;qBAER,oBAACzB;QAAoBW,aAAaA;QAAae,QAAQL;qBACrD,oBAACE;QACCjB,WAAW,CAAC,EAAEJ,UAAU,aAAa,CAAC;QACtCyB,cAAc,IAAMT,kBAAkB;QACtCU,cAAc,IAAMV,kBAAkB;OAErCV,iCACC,oBAACe;QACCjB,WAAW,CAAC,EAAEJ,UAAU,MAAM,CAAC;QAC9B,GAAGM,gBAAgBqB,UAAU;QAC7B,GAAGrB,gBAAgBsB,SAAS;qBAE7B,oBAAChC,kCAGL,oBAACiC;QACCzB,WAAW;YACT,CAAC,EAAEJ,UAAU,QAAQ,CAAC;YACtB,CAAC,EAAEA,UAAU,UAAU,EAAES,cAAc,cAAc,OAAO,CAAC;SAC9D,CACEa,MAAM,CAACR,SACPS,IAAI,CAAC;QACRO,SAASX;QACTY,MAAK;qBAEL,oBAACC,cAAMd,EAAE,yBAEVX,wBACC,oBAACc;QACCjB,WAAW;YACT,CAAC,EAAEJ,UAAU,aAAa,CAAC;YAC3BM,mBAAmB,CAAC,EAAEN,UAAU,8BAA8B,CAAC;SAChE,CACEsB,MAAM,CAACR,SACPS,IAAI,CAAC;OAEPhB,UAAUA,uBAGf,oBAACc;QAAIjB,WAAW,CAAC,EAAEJ,UAAU,cAAc,CAAC;OACzCE,yBAAW,oBAACmB;QAAIjB,WAAW,CAAC,EAAEJ,UAAU,SAAS,CAAC;OAAGE,wBACtD,oBAACmB;QAAIjB,WAAW,CAAC,EAAEJ,UAAU,WAAW,CAAC;qBACvC,oBAACL;QAAQsC,WAAW,CAACxB,cAAc,OAAOyB;yBAIhD,oBAACzC;QAAc0C,UAAU;QAAKC,QAAQ3B,cAAc,IAAI;qBACtD,oBAACY;QAAIjB,WAAW,CAAC,EAAEJ,UAAU,SAAS,CAAC;OAAGG;AAKpD,EAAC"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
type ContextType = {
|
|
3
|
-
|
|
3
|
+
isCollapsed: boolean;
|
|
4
4
|
isVisible: boolean;
|
|
5
|
+
isWithinCollapsible: boolean;
|
|
5
6
|
toggle: () => void;
|
|
6
|
-
withinCollapsible: boolean;
|
|
7
7
|
};
|
|
8
8
|
export declare const CollapsibleProvider: React.FC<{
|
|
9
9
|
children?: React.ReactNode;
|
|
10
|
-
|
|
10
|
+
isCollapsed?: boolean;
|
|
11
|
+
isWithinCollapsible?: boolean;
|
|
11
12
|
toggle: () => void;
|
|
12
|
-
withinCollapsible?: boolean;
|
|
13
13
|
}>;
|
|
14
14
|
export declare const useCollapsible: () => ContextType;
|
|
15
15
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,KAAK,WAAW,GAAG;IACjB,
|
|
1
|
+
{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AASD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAaA,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,WAAkC,CAAA"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React, { createContext, useContext } from 'react';
|
|
3
3
|
const Context = /*#__PURE__*/ createContext({
|
|
4
|
-
|
|
5
|
-
isVisible:
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
isCollapsed: undefined,
|
|
5
|
+
isVisible: undefined,
|
|
6
|
+
isWithinCollapsible: undefined,
|
|
7
|
+
toggle: ()=>{}
|
|
8
8
|
});
|
|
9
|
-
export const CollapsibleProvider = ({ children,
|
|
10
|
-
const {
|
|
9
|
+
export const CollapsibleProvider = ({ children, isCollapsed, isWithinCollapsible = true, toggle })=>{
|
|
10
|
+
const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible();
|
|
11
11
|
const contextValue = React.useMemo(()=>{
|
|
12
12
|
return {
|
|
13
|
-
|
|
13
|
+
isCollapsed,
|
|
14
14
|
isVisible: isVisible && !parentIsCollapsed,
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
isWithinCollapsible,
|
|
16
|
+
toggle
|
|
17
17
|
};
|
|
18
18
|
}, [
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
isCollapsed,
|
|
20
|
+
isWithinCollapsible,
|
|
21
21
|
toggle,
|
|
22
22
|
parentIsCollapsed,
|
|
23
23
|
isVisible
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\ntype ContextType = {\n
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useContext } from 'react'\n\ntype ContextType = {\n isCollapsed: boolean\n isVisible: boolean\n isWithinCollapsible: boolean\n toggle: () => void\n}\n\nconst Context = createContext({\n isCollapsed: undefined,\n isVisible: undefined,\n isWithinCollapsible: undefined,\n toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n children?: React.ReactNode\n isCollapsed?: boolean\n isWithinCollapsible?: boolean\n toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n const contextValue = React.useMemo((): ContextType => {\n return {\n isCollapsed,\n isVisible: isVisible && !parentIsCollapsed,\n isWithinCollapsible,\n toggle,\n }\n }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n return <Context.Provider value={contextValue}>{children}</Context.Provider>\n}\n\nexport const useCollapsible = (): ContextType => useContext(Context)\n"],"names":["React","createContext","useContext","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","Provider","value"],"mappings":"AAAA;AACA,OAAOA,SAASC,aAAa,EAAEC,UAAU,QAAQ,QAAO;AASxD,MAAMC,wBAAUF,cAAc;IAC5BG,aAAaC;IACbC,WAAWD;IACXE,qBAAqBF;IACrBG,QAAQ,KAAO;AACjB;AAEA,OAAO,MAAMC,sBAKR,CAAC,EAAEC,QAAQ,EAAEN,WAAW,EAAEG,sBAAsB,IAAI,EAAEC,MAAM,EAAE;IACjE,MAAM,EAAEJ,aAAaO,iBAAiB,EAAEL,SAAS,EAAE,GAAGM;IAEtD,MAAMC,eAAeb,MAAMc,OAAO,CAAC;QACjC,OAAO;YACLV;YACAE,WAAWA,aAAa,CAACK;YACzBJ;YACAC;QACF;IACF,GAAG;QAACJ;QAAaG;QAAqBC;QAAQG;QAAmBL;KAAU;IAE3E,qBAAO,oBAACH,QAAQY,QAAQ;QAACC,OAAOH;OAAeH;AACjD,EAAC;AAED,OAAO,MAAME,iBAAiB,IAAmBV,WAAWC,SAAQ"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare const getTextFieldsToBeSearched: (listSearchableFields: string[],
|
|
1
|
+
import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js';
|
|
2
|
+
export declare const getTextFieldsToBeSearched: (listSearchableFields: string[], fieldMap: FieldMap) => MappedField[];
|
|
3
3
|
//# sourceMappingURL=getTextFieldsToBeSearched.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getTextFieldsToBeSearched.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"getTextFieldsToBeSearched.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,yDAAyD,CAAA;AAEpG,eAAO,MAAM,yBAAyB,yBACd,MAAM,EAAE,yBAE7B,WAAW,EASb,CAAA"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export const getTextFieldsToBeSearched = (listSearchableFields, fields)=>{
|
|
1
|
+
import { flattenFieldMap } from '@payloadcms/ui/utilities/flattenFieldMap';
|
|
2
|
+
export const getTextFieldsToBeSearched = (listSearchableFields, fieldMap)=>{
|
|
4
3
|
if (listSearchableFields) {
|
|
5
|
-
const flattenedFields =
|
|
6
|
-
return flattenedFields.filter((field)=>
|
|
4
|
+
const flattenedFields = flattenFieldMap(fieldMap);
|
|
5
|
+
return flattenedFields.filter((field)=>field.isFieldAffectingData && listSearchableFields.includes(field.name));
|
|
7
6
|
}
|
|
8
7
|
return null;
|
|
9
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"sourcesContent":["import { flattenFieldMap } from '@payloadcms/ui/utilities/flattenFieldMap'\n\nimport type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nexport const getTextFieldsToBeSearched = (\n listSearchableFields: string[],\n fieldMap: FieldMap,\n): MappedField[] => {\n if (listSearchableFields) {\n const flattenedFields = flattenFieldMap(fieldMap)\n return flattenedFields.filter(\n (field) => field.isFieldAffectingData && listSearchableFields.includes(field.name),\n )\n }\n\n return null\n}\n"],"names":["flattenFieldMap","getTextFieldsToBeSearched","listSearchableFields","fieldMap","flattenedFields","filter","field","isFieldAffectingData","includes","name"],"mappings":"AAAA,SAASA,eAAe,QAAQ,2CAA0C;AAI1E,OAAO,MAAMC,4BAA4B,CACvCC,sBACAC;IAEA,IAAID,sBAAsB;QACxB,MAAME,kBAAkBJ,gBAAgBG;QACxC,OAAOC,gBAAgBC,MAAM,CAC3B,CAACC,QAAUA,MAAMC,oBAAoB,IAAIL,qBAAqBM,QAAQ,CAACF,MAAMG,IAAI;IAErF;IAEA,OAAO;AACT,EAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ClientCollectionConfig,
|
|
1
|
+
import type { ClientCollectionConfig, Where } from 'payload/types';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { FieldMap } from '../../utilities/buildComponentMap.js';
|
|
4
4
|
import './index.scss';
|
|
@@ -10,7 +10,6 @@ export type ListControlsProps = {
|
|
|
10
10
|
handleSearchChange?: (search: string) => void;
|
|
11
11
|
handleSortChange?: (sort: string) => void;
|
|
12
12
|
handleWhereChange?: (where: Where) => void;
|
|
13
|
-
textFieldsToBeSearched?: FieldAffectingData[];
|
|
14
13
|
};
|
|
15
14
|
/**
|
|
16
15
|
* The ListControls component is used to render the controls (search, filter, where)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAsB,KAAK,EAAE,MAAM,eAAe,CAAA;AAItF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAQvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAA;AAgBpE,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,QAAQ,CAAA;IAClB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgIpD,CAAA"}
|
|
@@ -18,13 +18,14 @@ import { SearchFilter } from '../SearchFilter/index.js';
|
|
|
18
18
|
import { UnpublishMany } from '../UnpublishMany/index.js';
|
|
19
19
|
import { WhereBuilder } from '../WhereBuilder/index.js';
|
|
20
20
|
import validateWhereQuery from '../WhereBuilder/validateWhereQuery.js';
|
|
21
|
+
import { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js';
|
|
21
22
|
const baseClass = 'list-controls';
|
|
22
23
|
/**
|
|
23
24
|
* The ListControls component is used to render the controls (search, filter, where)
|
|
24
25
|
* for a collection's list view. You can find those directly above the table which lists
|
|
25
26
|
* the collection's documents.
|
|
26
27
|
*/ export const ListControls = (props)=>{
|
|
27
|
-
const { collectionConfig, enableColumns = true, enableSort = false, fieldMap
|
|
28
|
+
const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props;
|
|
28
29
|
const { useWindowInfo } = facelessUIImport;
|
|
29
30
|
const { handleSearchChange } = useListQuery();
|
|
30
31
|
const { searchParams } = useSearchParams();
|
|
@@ -41,7 +42,7 @@ const baseClass = 'list-controls';
|
|
|
41
42
|
fieldLabel: (titleField && getTranslation('label' in titleField.fieldComponentProps && typeof titleField.fieldComponentProps.label === 'string' ? titleField.fieldComponentProps.label : titleField.name, i18n)) ?? undefined,
|
|
42
43
|
fieldName: titleField.name,
|
|
43
44
|
handleChange: handleSearchChange,
|
|
44
|
-
listSearchableFields:
|
|
45
|
+
listSearchableFields: getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, fieldMap)
|
|
45
46
|
}), /*#__PURE__*/ React.createElement("div", {
|
|
46
47
|
className: `${baseClass}__buttons`
|
|
47
48
|
}, /*#__PURE__*/ React.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, FieldAffectingData, Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useUseTitleField } from '@payloadcms/ui/hooks/useUseAsTitle'\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n collectionConfig: ClientCollectionConfig\n enableColumns?: boolean\n enableSort?: boolean\n fieldMap: FieldMap\n handleSearchChange?: (search: string) => void\n handleSortChange?: (sort: string) => void\n handleWhereChange?: (where: Where) => void\n textFieldsToBeSearched?: FieldAffectingData[]\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n const {\n collectionConfig,\n enableColumns = true,\n enableSort = false,\n fieldMap,\n textFieldsToBeSearched,\n } = props\n\n const { useWindowInfo } = facelessUIImport\n\n const { handleSearchChange } = useListQuery()\n const { searchParams } = useSearchParams()\n const titleField = useUseTitleField(collectionConfig, fieldMap)\n const { i18n, t } = useTranslation()\n const {\n breakpoints: { s: smallBreak },\n } = useWindowInfo()\n\n const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n shouldInitializeWhereOpened ? 'where' : undefined,\n )\n\n return (\n <div className={baseClass}>\n <div className={`${baseClass}__wrap`}>\n <SearchFilter\n fieldLabel={\n (titleField &&\n getTranslation(\n 'label' in titleField.fieldComponentProps &&\n typeof titleField.fieldComponentProps.label === 'string'\n ? titleField.fieldComponentProps.label\n : titleField.name,\n i18n,\n )) ??\n undefined\n }\n fieldName={titleField.name}\n handleChange={handleSearchChange}\n listSearchableFields={textFieldsToBeSearched}\n />\n <div className={`${baseClass}__buttons`}>\n <div className={`${baseClass}__buttons-wrap`}>\n {!smallBreak && (\n <React.Fragment>\n <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n <PublishMany collection={collectionConfig} />\n <UnpublishMany collection={collectionConfig} />\n <DeleteMany collection={collectionConfig} />\n </React.Fragment>\n )}\n {enableColumns && (\n <Pill\n aria-controls={`${baseClass}-columns`}\n aria-expanded={visibleDrawer === 'columns'}\n className={`${baseClass}__toggle-columns ${\n visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n }`}\n icon={<Chevron />}\n onClick={() =>\n setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n }\n pillStyle=\"light\"\n >\n {t('general:columns')}\n </Pill>\n )}\n <Pill\n aria-controls={`${baseClass}-where`}\n aria-expanded={visibleDrawer === 'where'}\n className={`${baseClass}__toggle-where ${\n visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n }`}\n icon={<Chevron />}\n onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n pillStyle=\"light\"\n >\n {t('general:filters')}\n </Pill>\n {enableSort && (\n <Pill\n aria-controls={`${baseClass}-sort`}\n aria-expanded={visibleDrawer === 'sort'}\n className={`${baseClass}__toggle-sort`}\n icon={<Chevron />}\n onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n pillStyle=\"light\"\n >\n {t('general:sort')}\n </Pill>\n )}\n </div>\n </div>\n </div>\n {enableColumns && (\n <AnimateHeight\n className={`${baseClass}__columns`}\n height={visibleDrawer === 'columns' ? 'auto' : 0}\n id={`${baseClass}-columns`}\n >\n <ColumnSelector collectionSlug={collectionConfig.slug} />\n </AnimateHeight>\n )}\n <AnimateHeight\n className={`${baseClass}__where`}\n height={visibleDrawer === 'where' ? 'auto' : 0}\n id={`${baseClass}-where`}\n >\n <WhereBuilder\n collectionPluralLabel={collectionConfig?.labels?.plural}\n collectionSlug={collectionConfig.slug}\n />\n </AnimateHeight>\n {enableSort && (\n <AnimateHeight\n className={`${baseClass}__sort`}\n height={visibleDrawer === 'sort' ? 'auto' : 0}\n id={`${baseClass}-sort`}\n >\n <p>Sort Complex</p>\n {/* <SortComplex\n collection={collection}\n handleChange={handleSortChange}\n modifySearchQuery={modifySearchQuery}\n /> */}\n </AnimateHeight>\n )}\n </div>\n )\n}\n"],"names":["facelessUIImport","getTranslation","React","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","textFieldsToBeSearched","useWindowInfo","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","shouldInitializeWhereOpened","where","visibleDrawer","setVisibleDrawer","undefined","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","p"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, FieldAffectingData, Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useUseTitleField } from '@payloadcms/ui/hooks/useUseAsTitle'\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n collectionConfig: ClientCollectionConfig\n enableColumns?: boolean\n enableSort?: boolean\n fieldMap: FieldMap\n handleSearchChange?: (search: string) => void\n handleSortChange?: (sort: string) => void\n handleWhereChange?: (where: Where) => void\n}\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\n\n const { useWindowInfo } = facelessUIImport\n\n const { handleSearchChange } = useListQuery()\n const { searchParams } = useSearchParams()\n const titleField = useUseTitleField(collectionConfig, fieldMap)\n const { i18n, t } = useTranslation()\n const {\n breakpoints: { s: smallBreak },\n } = useWindowInfo()\n\n const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n shouldInitializeWhereOpened ? 'where' : undefined,\n )\n\n return (\n <div className={baseClass}>\n <div className={`${baseClass}__wrap`}>\n <SearchFilter\n fieldLabel={\n (titleField &&\n getTranslation(\n 'label' in titleField.fieldComponentProps &&\n typeof titleField.fieldComponentProps.label === 'string'\n ? titleField.fieldComponentProps.label\n : titleField.name,\n i18n,\n )) ??\n undefined\n }\n fieldName={titleField.name}\n handleChange={handleSearchChange}\n listSearchableFields={getTextFieldsToBeSearched(\n collectionConfig.admin.listSearchableFields,\n fieldMap,\n )}\n />\n <div className={`${baseClass}__buttons`}>\n <div className={`${baseClass}__buttons-wrap`}>\n {!smallBreak && (\n <React.Fragment>\n <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n <PublishMany collection={collectionConfig} />\n <UnpublishMany collection={collectionConfig} />\n <DeleteMany collection={collectionConfig} />\n </React.Fragment>\n )}\n {enableColumns && (\n <Pill\n aria-controls={`${baseClass}-columns`}\n aria-expanded={visibleDrawer === 'columns'}\n className={`${baseClass}__toggle-columns ${\n visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n }`}\n icon={<Chevron />}\n onClick={() =>\n setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n }\n pillStyle=\"light\"\n >\n {t('general:columns')}\n </Pill>\n )}\n <Pill\n aria-controls={`${baseClass}-where`}\n aria-expanded={visibleDrawer === 'where'}\n className={`${baseClass}__toggle-where ${\n visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n }`}\n icon={<Chevron />}\n onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n pillStyle=\"light\"\n >\n {t('general:filters')}\n </Pill>\n {enableSort && (\n <Pill\n aria-controls={`${baseClass}-sort`}\n aria-expanded={visibleDrawer === 'sort'}\n className={`${baseClass}__toggle-sort`}\n icon={<Chevron />}\n onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n pillStyle=\"light\"\n >\n {t('general:sort')}\n </Pill>\n )}\n </div>\n </div>\n </div>\n {enableColumns && (\n <AnimateHeight\n className={`${baseClass}__columns`}\n height={visibleDrawer === 'columns' ? 'auto' : 0}\n id={`${baseClass}-columns`}\n >\n <ColumnSelector collectionSlug={collectionConfig.slug} />\n </AnimateHeight>\n )}\n <AnimateHeight\n className={`${baseClass}__where`}\n height={visibleDrawer === 'where' ? 'auto' : 0}\n id={`${baseClass}-where`}\n >\n <WhereBuilder\n collectionPluralLabel={collectionConfig?.labels?.plural}\n collectionSlug={collectionConfig.slug}\n />\n </AnimateHeight>\n {enableSort && (\n <AnimateHeight\n className={`${baseClass}__sort`}\n height={visibleDrawer === 'sort' ? 'auto' : 0}\n id={`${baseClass}-sort`}\n >\n <p>Sort Complex</p>\n {/* <SortComplex\n collection={collection}\n handleChange={handleSortChange}\n modifySearchQuery={modifySearchQuery}\n /> */}\n </AnimateHeight>\n )}\n </div>\n )\n}\n"],"names":["facelessUIImport","getTranslation","React","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","useWindowInfo","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","shouldInitializeWhereOpened","where","visibleDrawer","setVisibleDrawer","undefined","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","admin","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","p"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import type { FieldAffectingData } from 'payload/types';
|
|
2
1
|
import React from 'react';
|
|
3
2
|
export type SearchFilterProps = {
|
|
4
3
|
fieldLabel?: string;
|
|
5
4
|
fieldName?: string;
|
|
6
5
|
handleChange?: (search: string) => void;
|
|
7
|
-
listSearchableFields?:
|
|
6
|
+
listSearchableFields?: MappedField[];
|
|
8
7
|
};
|
|
8
|
+
import type { MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js';
|
|
9
9
|
import './index.scss';
|
|
10
10
|
export declare const SearchFilter: React.FC<SearchFilterProps>;
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SearchFilter/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SearchFilter/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAE1D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,oBAAoB,CAAC,EAAE,WAAW,EAAE,CAAA;CACrC,CAAA;AAED,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yDAAyD,CAAA;AAM1F,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2EpD,CAAA"}
|
|
@@ -37,15 +37,16 @@ export const SearchFilter = (props)=>{
|
|
|
37
37
|
useEffect(()=>{
|
|
38
38
|
if (listSearchableFields?.length > 0) {
|
|
39
39
|
placeholder.current = listSearchableFields.reduce((placeholderText, field, i)=>{
|
|
40
|
+
const label = 'fieldComponentProps' in field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? field.fieldComponentProps.label : field.name;
|
|
40
41
|
if (i === 0) {
|
|
41
42
|
return `${t('general:searchBy', {
|
|
42
|
-
label: getTranslation(
|
|
43
|
+
label: getTranslation(label, i18n)
|
|
43
44
|
})}`;
|
|
44
45
|
}
|
|
45
46
|
if (i === listSearchableFields.length - 1) {
|
|
46
|
-
return `${placeholderText} ${t('general:or')} ${getTranslation(
|
|
47
|
+
return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`;
|
|
47
48
|
}
|
|
48
|
-
return `${placeholderText}, ${getTranslation(
|
|
49
|
+
return `${placeholderText}, ${getTranslation(label, i18n)}`;
|
|
49
50
|
}, '');
|
|
50
51
|
} else {
|
|
51
52
|
placeholder.current = t('general:searchBy', {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/SearchFilter/index.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/SearchFilter/index.tsx"],"sourcesContent":["import { getTranslation } from '@payloadcms/translations'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { usePathname, useRouter } from 'next/navigation.js'\nimport React, { useEffect, useRef, useState } from 'react'\n\nexport type SearchFilterProps = {\n fieldLabel?: string\n fieldName?: string\n handleChange?: (search: string) => void\n listSearchableFields?: MappedField[]\n}\n\nimport type { MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { Search } from '../../icons/Search/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'search-filter'\n\nexport const SearchFilter: React.FC<SearchFilterProps> = (props) => {\n const { fieldLabel = 'ID', fieldName = 'id', handleChange, listSearchableFields } = props\n\n const { searchParams } = useSearchParams()\n const router = useRouter()\n const pathname = usePathname()\n const { i18n, t } = useTranslation()\n\n const [search, setSearch] = useState(\n typeof searchParams?.search === 'string' ? searchParams?.search : '',\n )\n const [previousSearch, setPreviousSearch] = useState('')\n\n const placeholder = useRef(t('general:searchBy', { label: getTranslation(fieldLabel, i18n) }))\n\n const debouncedSearch = useDebounce(search, 300)\n\n useEffect(() => {\n if (debouncedSearch !== previousSearch) {\n if (handleChange) handleChange(debouncedSearch)\n setPreviousSearch(debouncedSearch)\n }\n }, [\n debouncedSearch,\n previousSearch,\n router,\n fieldName,\n searchParams,\n handleChange,\n listSearchableFields,\n pathname,\n ])\n\n useEffect(() => {\n if (listSearchableFields?.length > 0) {\n placeholder.current = listSearchableFields.reduce(\n (placeholderText: string, field, i: number) => {\n const label =\n 'fieldComponentProps' in field &&\n 'label' in field.fieldComponentProps &&\n field.fieldComponentProps.label\n ? field.fieldComponentProps.label\n : field.name\n\n if (i === 0) {\n return `${t('general:searchBy', {\n label: getTranslation(label, i18n),\n })}`\n }\n\n if (i === listSearchableFields.length - 1) {\n return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`\n }\n\n return `${placeholderText}, ${getTranslation(label, i18n)}`\n },\n '',\n )\n } else {\n placeholder.current = t('general:searchBy', { label: getTranslation(fieldLabel, i18n) })\n }\n }, [t, listSearchableFields, i18n, fieldLabel])\n\n return (\n <div className={baseClass}>\n <input\n className={`${baseClass}__input`}\n onChange={(e) => setSearch(e.target.value)}\n placeholder={placeholder.current}\n type=\"text\"\n value={search || ''}\n />\n <Search />\n </div>\n )\n}\n"],"names":["getTranslation","usePathname","useRouter","React","useEffect","useRef","useState","useDebounce","Search","useSearchParams","useTranslation","baseClass","SearchFilter","props","fieldLabel","fieldName","handleChange","listSearchableFields","searchParams","router","pathname","i18n","t","search","setSearch","previousSearch","setPreviousSearch","placeholder","label","debouncedSearch","length","current","reduce","placeholderText","field","i","fieldComponentProps","name","div","className","input","onChange","e","target","value","type"],"mappings":"AAAA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,0EAA0E;AAC1E,SAASC,WAAW,EAAEC,SAAS,QAAQ,qBAAoB;AAC3D,OAAOC,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAW1D,SAASC,WAAW,QAAQ,6BAA4B;AACxD,SAASC,MAAM,QAAQ,8BAA6B;AACpD,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,OAAO,MAAMC,eAA4C,CAACC;IACxD,MAAM,EAAEC,aAAa,IAAI,EAAEC,YAAY,IAAI,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGJ;IAEpF,MAAM,EAAEK,YAAY,EAAE,GAAGT;IACzB,MAAMU,SAASjB;IACf,MAAMkB,WAAWnB;IACjB,MAAM,EAAEoB,IAAI,EAAEC,CAAC,EAAE,GAAGZ;IAEpB,MAAM,CAACa,QAAQC,UAAU,GAAGlB,SAC1B,OAAOY,cAAcK,WAAW,WAAWL,cAAcK,SAAS;IAEpE,MAAM,CAACE,gBAAgBC,kBAAkB,GAAGpB,SAAS;IAErD,MAAMqB,cAActB,OAAOiB,EAAE,oBAAoB;QAAEM,OAAO5B,eAAec,YAAYO;IAAM;IAE3F,MAAMQ,kBAAkBtB,YAAYgB,QAAQ;IAE5CnB,UAAU;QACR,IAAIyB,oBAAoBJ,gBAAgB;YACtC,IAAIT,cAAcA,aAAaa;YAC/BH,kBAAkBG;QACpB;IACF,GAAG;QACDA;QACAJ;QACAN;QACAJ;QACAG;QACAF;QACAC;QACAG;KACD;IAEDhB,UAAU;QACR,IAAIa,sBAAsBa,SAAS,GAAG;YACpCH,YAAYI,OAAO,GAAGd,qBAAqBe,MAAM,CAC/C,CAACC,iBAAyBC,OAAOC;gBAC/B,MAAMP,QACJ,yBAAyBM,SACzB,WAAWA,MAAME,mBAAmB,IACpCF,MAAME,mBAAmB,CAACR,KAAK,GAC3BM,MAAME,mBAAmB,CAACR,KAAK,GAC/BM,MAAMG,IAAI;gBAEhB,IAAIF,MAAM,GAAG;oBACX,OAAO,CAAC,EAAEb,EAAE,oBAAoB;wBAC9BM,OAAO5B,eAAe4B,OAAOP;oBAC/B,GAAG,CAAC;gBACN;gBAEA,IAAIc,MAAMlB,qBAAqBa,MAAM,GAAG,GAAG;oBACzC,OAAO,CAAC,EAAEG,gBAAgB,CAAC,EAAEX,EAAE,cAAc,CAAC,EAAEtB,eAAe4B,OAAOP,MAAM,CAAC;gBAC/E;gBAEA,OAAO,CAAC,EAAEY,gBAAgB,EAAE,EAAEjC,eAAe4B,OAAOP,MAAM,CAAC;YAC7D,GACA;QAEJ,OAAO;YACLM,YAAYI,OAAO,GAAGT,EAAE,oBAAoB;gBAAEM,OAAO5B,eAAec,YAAYO;YAAM;QACxF;IACF,GAAG;QAACC;QAAGL;QAAsBI;QAAMP;KAAW;IAE9C,qBACE,oBAACwB;QAAIC,WAAW5B;qBACd,oBAAC6B;QACCD,WAAW,CAAC,EAAE5B,UAAU,OAAO,CAAC;QAChC8B,UAAU,CAACC,IAAMlB,UAAUkB,EAAEC,MAAM,CAACC,KAAK;QACzCjB,aAAaA,YAAYI,OAAO;QAChCc,MAAK;QACLD,OAAOrB,UAAU;sBAEnB,oBAACf;AAGP,EAAC"}
|
|
@@ -10,7 +10,10 @@ export const SelectAll = ()=>{
|
|
|
10
10
|
return /*#__PURE__*/ React.createElement(CheckboxInput, {
|
|
11
11
|
"aria-label": selectAll === SelectAllStatus.None ? i18n.t('general:selectAllRows') : i18n.t('general:deselectAllRows'),
|
|
12
12
|
checked: selectAll === SelectAllStatus.AllInPage || selectAll === SelectAllStatus.AllAvailable,
|
|
13
|
-
className:
|
|
13
|
+
className: [
|
|
14
|
+
baseClass,
|
|
15
|
+
`${baseClass}__checkbox`
|
|
16
|
+
].join(' '),
|
|
14
17
|
id: "select-all",
|
|
15
18
|
name: "select-all",
|
|
16
19
|
onToggle: ()=>toggleAll(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/SelectAll/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-all'\n\nexport const SelectAll: React.FC = () => {\n const { selectAll, toggleAll } = useSelection()\n const { i18n } = useTranslation()\n\n return (\n <CheckboxInput\n aria-label={\n selectAll === SelectAllStatus.None\n ? i18n.t('general:selectAllRows')\n : i18n.t('general:deselectAllRows')\n }\n checked={\n selectAll === SelectAllStatus.AllInPage || selectAll === SelectAllStatus.AllAvailable\n }\n className={`${baseClass}__checkbox`}\n id=\"select-all\"\n name=\"select-all\"\n onToggle={() => toggleAll()}\n partialChecked={selectAll === SelectAllStatus.Some}\n />\n )\n}\n"],"names":["React","CheckboxInput","SelectAllStatus","useSelection","useTranslation","baseClass","SelectAll","selectAll","toggleAll","i18n","aria-label","None","t","checked","AllInPage","AllAvailable","className","id","name","onToggle","partialChecked","Some"],"mappings":"AAAA;AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,eAAe,EAAEC,YAAY,QAAQ,qCAAoC;AAClF,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAAsB;IACjC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGL;IACjC,MAAM,EAAEM,IAAI,EAAE,GAAGL;IAEjB,qBACE,oBAACH;QACCS,cACEH,cAAcL,gBAAgBS,IAAI,GAC9BF,KAAKG,CAAC,CAAC,2BACPH,KAAKG,CAAC,CAAC;QAEbC,SACEN,cAAcL,gBAAgBY,SAAS,IAAIP,cAAcL,gBAAgBa,YAAY;QAEvFC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/SelectAll/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-all'\n\nexport const SelectAll: React.FC = () => {\n const { selectAll, toggleAll } = useSelection()\n const { i18n } = useTranslation()\n\n return (\n <CheckboxInput\n aria-label={\n selectAll === SelectAllStatus.None\n ? i18n.t('general:selectAllRows')\n : i18n.t('general:deselectAllRows')\n }\n checked={\n selectAll === SelectAllStatus.AllInPage || selectAll === SelectAllStatus.AllAvailable\n }\n className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n id=\"select-all\"\n name=\"select-all\"\n onToggle={() => toggleAll()}\n partialChecked={selectAll === SelectAllStatus.Some}\n />\n )\n}\n"],"names":["React","CheckboxInput","SelectAllStatus","useSelection","useTranslation","baseClass","SelectAll","selectAll","toggleAll","i18n","aria-label","None","t","checked","AllInPage","AllAvailable","className","join","id","name","onToggle","partialChecked","Some"],"mappings":"AAAA;AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,eAAe,EAAEC,YAAY,QAAQ,qCAAoC;AAClF,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAAsB;IACjC,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGL;IACjC,MAAM,EAAEM,IAAI,EAAE,GAAGL;IAEjB,qBACE,oBAACH;QACCS,cACEH,cAAcL,gBAAgBS,IAAI,GAC9BF,KAAKG,CAAC,CAAC,2BACPH,KAAKG,CAAC,CAAC;QAEbC,SACEN,cAAcL,gBAAgBY,SAAS,IAAIP,cAAcL,gBAAgBa,YAAY;QAEvFC,WAAW;YAACX;YAAW,CAAC,EAAEA,UAAU,UAAU,CAAC;SAAC,CAACY,IAAI,CAAC;QACtDC,IAAG;QACHC,MAAK;QACLC,UAAU,IAAMZ;QAChBa,gBAAgBd,cAAcL,gBAAgBoB,IAAI;;AAGxD,EAAC"}
|
|
@@ -9,7 +9,10 @@ export const SelectRow = ()=>{
|
|
|
9
9
|
const { rowData } = useTableCell();
|
|
10
10
|
return /*#__PURE__*/ React.createElement(CheckboxInput, {
|
|
11
11
|
checked: selected?.[rowData?.id],
|
|
12
|
-
className:
|
|
12
|
+
className: [
|
|
13
|
+
baseClass,
|
|
14
|
+
`${baseClass}__checkbox`
|
|
15
|
+
].join(' '),
|
|
13
16
|
onToggle: ()=>setSelection(rowData.id)
|
|
14
17
|
});
|
|
15
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTableCell } from '../../elements/Table/TableCellProvider/index.js'\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC = () => {\n const { selected, setSelection } = useSelection()\n const { rowData } = useTableCell()\n\n return (\n <CheckboxInput\n checked={selected?.[rowData?.id]}\n className={`${baseClass}__checkbox`}\n onToggle={() => setSelection(rowData.id)}\n />\n )\n}\n"],"names":["React","useTableCell","CheckboxInput","useSelection","baseClass","SelectRow","selected","setSelection","rowData","checked","id","className","onToggle"],"mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,kDAAiD;AAC9E,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,YAAY,QAAQ,qCAAoC;AAGjE,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAAsB;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGJ;IACnC,MAAM,EAAEK,OAAO,EAAE,GAAGP;IAEpB,qBACE,oBAACC;QACCO,SAASH,UAAU,CAACE,SAASE,GAAG;QAChCC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/SelectRow/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useTableCell } from '../../elements/Table/TableCellProvider/index.js'\nimport { CheckboxInput } from '../../fields/Checkbox/Input.js'\nimport { useSelection } from '../../providers/Selection/index.js'\nimport './index.scss'\n\nconst baseClass = 'select-row'\n\nexport const SelectRow: React.FC = () => {\n const { selected, setSelection } = useSelection()\n const { rowData } = useTableCell()\n\n return (\n <CheckboxInput\n checked={selected?.[rowData?.id]}\n className={[baseClass, `${baseClass}__checkbox`].join(' ')}\n onToggle={() => setSelection(rowData.id)}\n />\n )\n}\n"],"names":["React","useTableCell","CheckboxInput","useSelection","baseClass","SelectRow","selected","setSelection","rowData","checked","id","className","join","onToggle"],"mappings":"AAAA;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,YAAY,QAAQ,kDAAiD;AAC9E,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,YAAY,QAAQ,qCAAoC;AAGjE,MAAMC,YAAY;AAElB,OAAO,MAAMC,YAAsB;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAE,GAAGJ;IACnC,MAAM,EAAEK,OAAO,EAAE,GAAGP;IAEpB,qBACE,oBAACC;QACCO,SAASH,UAAU,CAACE,SAASE,GAAG;QAChCC,WAAW;YAACP;YAAW,CAAC,EAAEA,UAAU,UAAU,CAAC;SAAC,CAACQ,IAAI,CAAC;QACtDC,UAAU,IAAMN,aAAaC,QAAQE,EAAE;;AAG7C,EAAC"}
|
|
@@ -36,7 +36,6 @@ export const ArrayRow = ({ CustomRowLabel, addRow, attributes, duplicateRow, err
|
|
|
36
36
|
rowCount: rowCount
|
|
37
37
|
}) : undefined,
|
|
38
38
|
className: classNames,
|
|
39
|
-
collapsed: row.collapsed,
|
|
40
39
|
collapsibleStyle: fieldHasErrors ? 'error' : 'default',
|
|
41
40
|
dragHandleProps: {
|
|
42
41
|
id: row.id,
|
|
@@ -56,6 +55,7 @@ export const ArrayRow = ({ CustomRowLabel, addRow, attributes, duplicateRow, err
|
|
|
56
55
|
i18n: i18n,
|
|
57
56
|
withMessage: true
|
|
58
57
|
})),
|
|
58
|
+
isCollapsed: row.collapsed,
|
|
59
59
|
onToggle: (collapsed)=>setCollapse(row.id, collapsed)
|
|
60
60
|
}, /*#__PURE__*/ React.createElement(RenderFields, {
|
|
61
61
|
className: `${baseClass}__fields`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/Array/ArrayRow.tsx"],"sourcesContent":["import type { FieldPermissions } from 'payload/auth'\nimport type { ArrayField, Row } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { ArrayAction } from '../../elements/ArrayAction/index.js'\nimport { Collapsible } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'array-field'\n\ntype ArrayRowProps = UseDraggableSortableReturn & {\n CustomRowLabel?: React.ReactNode\n addRow: (rowIndex: number) => void\n duplicateRow: (rowIndex: number) => void\n errorCount: number\n fieldMap: FieldMap\n forceRender?: boolean\n hasMaxRows?: boolean\n indexPath: string\n labels: ArrayField['labels']\n moveRow: (fromIndex: number, toIndex: number) => void\n path: string\n permissions: FieldPermissions\n readOnly?: boolean\n removeRow: (rowIndex: number) => void\n row: Row\n rowCount: number\n rowIndex: number\n schemaPath: string\n setCollapse: (rowID: string, collapsed: boolean) => void\n}\n\nexport const ArrayRow: React.FC<ArrayRowProps> = ({\n CustomRowLabel,\n addRow,\n attributes,\n duplicateRow,\n errorCount,\n fieldMap,\n forceRender = false,\n hasMaxRows,\n indexPath,\n labels,\n listeners,\n moveRow,\n path: parentPath,\n permissions,\n readOnly,\n removeRow,\n row,\n rowCount,\n rowIndex,\n schemaPath,\n setCollapse,\n setNodeRef,\n transform,\n}) => {\n const path = `${parentPath}.${rowIndex}`\n const { i18n } = useTranslation()\n const hasSubmitted = useFormSubmitted()\n\n const fallbackLabel = `${getTranslation(labels.singular, i18n)} ${String(rowIndex + 1).padStart(\n 2,\n '0',\n )}`\n\n const fieldHasErrors = errorCount > 0 && hasSubmitted\n\n const classNames = [\n `${baseClass}__row`,\n fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n ]\n .filter(Boolean)\n .join(' ')\n\n return (\n <div\n id={`${parentPath.split('.').join('-')}-row-${rowIndex}`}\n key={`${parentPath}-row-${row.id}`}\n ref={setNodeRef}\n style={{\n transform,\n }}\n >\n <Collapsible\n actions={\n !readOnly ? (\n <ArrayAction\n addRow={addRow}\n duplicateRow={duplicateRow}\n hasMaxRows={hasMaxRows}\n index={rowIndex}\n moveRow={moveRow}\n removeRow={removeRow}\n rowCount={rowCount}\n />\n ) : undefined\n }\n className={classNames}\n
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/Array/ArrayRow.tsx"],"sourcesContent":["import type { FieldPermissions } from 'payload/auth'\nimport type { ArrayField, Row } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { ArrayAction } from '../../elements/ArrayAction/index.js'\nimport { Collapsible } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { RowLabel } from '../../forms/RowLabel/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'array-field'\n\ntype ArrayRowProps = UseDraggableSortableReturn & {\n CustomRowLabel?: React.ReactNode\n addRow: (rowIndex: number) => void\n duplicateRow: (rowIndex: number) => void\n errorCount: number\n fieldMap: FieldMap\n forceRender?: boolean\n hasMaxRows?: boolean\n indexPath: string\n labels: ArrayField['labels']\n moveRow: (fromIndex: number, toIndex: number) => void\n path: string\n permissions: FieldPermissions\n readOnly?: boolean\n removeRow: (rowIndex: number) => void\n row: Row\n rowCount: number\n rowIndex: number\n schemaPath: string\n setCollapse: (rowID: string, collapsed: boolean) => void\n}\n\nexport const ArrayRow: React.FC<ArrayRowProps> = ({\n CustomRowLabel,\n addRow,\n attributes,\n duplicateRow,\n errorCount,\n fieldMap,\n forceRender = false,\n hasMaxRows,\n indexPath,\n labels,\n listeners,\n moveRow,\n path: parentPath,\n permissions,\n readOnly,\n removeRow,\n row,\n rowCount,\n rowIndex,\n schemaPath,\n setCollapse,\n setNodeRef,\n transform,\n}) => {\n const path = `${parentPath}.${rowIndex}`\n const { i18n } = useTranslation()\n const hasSubmitted = useFormSubmitted()\n\n const fallbackLabel = `${getTranslation(labels.singular, i18n)} ${String(rowIndex + 1).padStart(\n 2,\n '0',\n )}`\n\n const fieldHasErrors = errorCount > 0 && hasSubmitted\n\n const classNames = [\n `${baseClass}__row`,\n fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n ]\n .filter(Boolean)\n .join(' ')\n\n return (\n <div\n id={`${parentPath.split('.').join('-')}-row-${rowIndex}`}\n key={`${parentPath}-row-${row.id}`}\n ref={setNodeRef}\n style={{\n transform,\n }}\n >\n <Collapsible\n actions={\n !readOnly ? (\n <ArrayAction\n addRow={addRow}\n duplicateRow={duplicateRow}\n hasMaxRows={hasMaxRows}\n index={rowIndex}\n moveRow={moveRow}\n removeRow={removeRow}\n rowCount={rowCount}\n />\n ) : undefined\n }\n className={classNames}\n collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n dragHandleProps={{\n id: row.id,\n attributes,\n listeners,\n }}\n header={\n <div className={`${baseClass}__row-header`}>\n <RowLabel\n RowLabelComponent={CustomRowLabel}\n i18n={i18n}\n path={path}\n rowLabel={fallbackLabel}\n rowNumber={rowIndex + 1}\n />\n {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n </div>\n }\n isCollapsed={row.collapsed}\n onToggle={(collapsed) => setCollapse(row.id, collapsed)}\n >\n <RenderFields\n className={`${baseClass}__fields`}\n fieldMap={fieldMap}\n forceRender={forceRender}\n indexPath={indexPath}\n margins=\"small\"\n path={path}\n permissions={permissions?.fields}\n readOnly={readOnly}\n schemaPath={schemaPath}\n />\n </Collapsible>\n </div>\n )\n}\n"],"names":["getTranslation","React","ArrayAction","Collapsible","ErrorPill","useFormSubmitted","RenderFields","RowLabel","useTranslation","baseClass","ArrayRow","CustomRowLabel","addRow","attributes","duplicateRow","errorCount","fieldMap","forceRender","hasMaxRows","indexPath","labels","listeners","moveRow","path","parentPath","permissions","readOnly","removeRow","row","rowCount","rowIndex","schemaPath","setCollapse","setNodeRef","transform","i18n","hasSubmitted","fallbackLabel","singular","String","padStart","fieldHasErrors","classNames","filter","Boolean","join","div","id","split","key","ref","style","actions","index","undefined","className","collapsibleStyle","dragHandleProps","header","RowLabelComponent","rowLabel","rowNumber","count","withMessage","isCollapsed","collapsed","onToggle","margins","fields"],"mappings":"AAGA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAKzB,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,WAAW,QAAQ,sCAAqC;AACjE,SAASC,SAAS,QAAQ,oCAAmC;AAC7D,SAASC,gBAAgB,QAAQ,8BAA6B;AAC9D,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAwBlB,OAAO,MAAMC,WAAoC,CAAC,EAChDC,cAAc,EACdC,MAAM,EACNC,UAAU,EACVC,YAAY,EACZC,UAAU,EACVC,QAAQ,EACRC,cAAc,KAAK,EACnBC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,OAAO,EACPC,MAAMC,UAAU,EAChBC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,GAAG,EACHC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACV;IACC,MAAMX,OAAO,CAAC,EAAEC,WAAW,CAAC,EAAEM,SAAS,CAAC;IACxC,MAAM,EAAEK,IAAI,EAAE,GAAG3B;IACjB,MAAM4B,eAAe/B;IAErB,MAAMgC,gBAAgB,CAAC,EAAErC,eAAeoB,OAAOkB,QAAQ,EAAEH,MAAM,CAAC,EAAEI,OAAOT,WAAW,GAAGU,QAAQ,CAC7F,GACA,KACA,CAAC;IAEH,MAAMC,iBAAiB1B,aAAa,KAAKqB;IAEzC,MAAMM,aAAa;QACjB,CAAC,EAAEjC,UAAU,KAAK,CAAC;QACnBgC,iBAAiB,CAAC,EAAEhC,UAAU,iBAAiB,CAAC,GAAG,CAAC,EAAEA,UAAU,gBAAgB,CAAC;KAClF,CACEkC,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,qBACE,oBAACC;QACCC,IAAI,CAAC,EAAEvB,WAAWwB,KAAK,CAAC,KAAKH,IAAI,CAAC,KAAK,KAAK,EAAEf,SAAS,CAAC;QACxDmB,KAAK,CAAC,EAAEzB,WAAW,KAAK,EAAEI,IAAImB,EAAE,CAAC,CAAC;QAClCG,KAAKjB;QACLkB,OAAO;YACLjB;QACF;qBAEA,oBAAC/B;QACCiD,SACE,CAAC1B,yBACC,oBAACxB;YACCU,QAAQA;YACRE,cAAcA;YACdI,YAAYA;YACZmC,OAAOvB;YACPR,SAASA;YACTK,WAAWA;YACXE,UAAUA;aAEVyB;QAENC,WAAWb;QACXc,kBAAkBf,iBAAiB,UAAU;QAC7CgB,iBAAiB;YACfV,IAAInB,IAAImB,EAAE;YACVlC;YACAQ;QACF;QACAqC,sBACE,oBAACZ;YAAIS,WAAW,CAAC,EAAE9C,UAAU,YAAY,CAAC;yBACxC,oBAACF;YACCoD,mBAAmBhD;YACnBwB,MAAMA;YACNZ,MAAMA;YACNqC,UAAUvB;YACVwB,WAAW/B,WAAW;YAEvBW,gCAAkB,oBAACrC;YAAU0D,OAAO/C;YAAYoB,MAAMA;YAAM4B,aAAAA;;QAGjEC,aAAapC,IAAIqC,SAAS;QAC1BC,UAAU,CAACD,YAAcjC,YAAYJ,IAAImB,EAAE,EAAEkB;qBAE7C,oBAAC3D;QACCiD,WAAW,CAAC,EAAE9C,UAAU,QAAQ,CAAC;QACjCO,UAAUA;QACVC,aAAaA;QACbE,WAAWA;QACXgD,SAAQ;QACR5C,MAAMA;QACNE,aAAaA,aAAa2C;QAC1B1C,UAAUA;QACVK,YAAYA;;AAKtB,EAAC"}
|
|
@@ -41,7 +41,6 @@ export const BlockRow = ({ addRow, attributes, block, blocks, duplicateRow, erro
|
|
|
41
41
|
rowIndex: rowIndex
|
|
42
42
|
}) : undefined,
|
|
43
43
|
className: classNames,
|
|
44
|
-
collapsed: row.collapsed,
|
|
45
44
|
collapsibleStyle: fieldHasErrors ? 'error' : 'default',
|
|
46
45
|
dragHandleProps: {
|
|
47
46
|
id: row.id,
|
|
@@ -63,6 +62,7 @@ export const BlockRow = ({ addRow, attributes, block, blocks, duplicateRow, erro
|
|
|
63
62
|
i18n: i18n,
|
|
64
63
|
withMessage: true
|
|
65
64
|
})),
|
|
65
|
+
isCollapsed: row.collapsed,
|
|
66
66
|
key: row.id,
|
|
67
67
|
onToggle: (collapsed)=>setCollapse(row.id, collapsed)
|
|
68
68
|
}, /*#__PURE__*/ React.createElement(RenderFields, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/Blocks/BlockRow.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { Labels, Row } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'\nimport type { ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { Collapsible } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { Pill } from '../../elements/Pill/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { RowActions } from './RowActions.js'\nimport { SectionTitle } from './SectionTitle/index.js'\n\nconst baseClass = 'blocks-field'\n\ntype BlockFieldProps = UseDraggableSortableReturn & {\n addRow: (rowIndex: number, blockType: string) => void\n block: ReducedBlock\n blocks: ReducedBlock[]\n duplicateRow: (rowIndex: number) => void\n errorCount: number\n forceRender?: boolean\n hasMaxRows?: boolean\n indexPath: string\n labels: Labels\n moveRow: (fromIndex: number, toIndex: number) => void\n path: string\n permissions: FieldPermissions\n readOnly: boolean\n removeRow: (rowIndex: number) => void\n row: Row\n rowCount: number\n rowIndex: number\n schemaPath: string\n setCollapse: (id: string, collapsed: boolean) => void\n}\n\nexport const BlockRow: React.FC<BlockFieldProps> = ({\n addRow,\n attributes,\n block,\n blocks,\n duplicateRow,\n errorCount,\n forceRender,\n hasMaxRows,\n labels,\n listeners,\n moveRow,\n path: parentPath,\n permissions,\n readOnly,\n removeRow,\n row,\n rowCount,\n rowIndex,\n schemaPath,\n setCollapse,\n setNodeRef,\n transform,\n}) => {\n const path = `${parentPath}.${rowIndex}`\n const { i18n } = useTranslation()\n const hasSubmitted = useFormSubmitted()\n\n const fieldHasErrors = hasSubmitted && errorCount > 0\n\n const classNames = [\n `${baseClass}__row`,\n fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n ]\n .filter(Boolean)\n .join(' ')\n\n return (\n <div\n id={`${parentPath.split('.').join('-')}-row-${rowIndex}`}\n key={`${parentPath}-row-${rowIndex}`}\n ref={setNodeRef}\n style={{\n transform,\n }}\n >\n <Collapsible\n actions={\n !readOnly ? (\n <RowActions\n addRow={addRow}\n blockType={row.blockType}\n blocks={blocks}\n duplicateRow={duplicateRow}\n fieldMap={block.fieldMap}\n hasMaxRows={hasMaxRows}\n labels={labels}\n moveRow={moveRow}\n removeRow={removeRow}\n rowCount={rowCount}\n rowIndex={rowIndex}\n />\n ) : undefined\n }\n className={classNames}\n
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/Blocks/BlockRow.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { Labels, Row } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { UseDraggableSortableReturn } from '../../elements/DraggableSortable/useDraggableSortable/types.js'\nimport type { ReducedBlock } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { Collapsible } from '../../elements/Collapsible/index.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { Pill } from '../../elements/Pill/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { RowActions } from './RowActions.js'\nimport { SectionTitle } from './SectionTitle/index.js'\n\nconst baseClass = 'blocks-field'\n\ntype BlockFieldProps = UseDraggableSortableReturn & {\n addRow: (rowIndex: number, blockType: string) => void\n block: ReducedBlock\n blocks: ReducedBlock[]\n duplicateRow: (rowIndex: number) => void\n errorCount: number\n forceRender?: boolean\n hasMaxRows?: boolean\n indexPath: string\n labels: Labels\n moveRow: (fromIndex: number, toIndex: number) => void\n path: string\n permissions: FieldPermissions\n readOnly: boolean\n removeRow: (rowIndex: number) => void\n row: Row\n rowCount: number\n rowIndex: number\n schemaPath: string\n setCollapse: (id: string, collapsed: boolean) => void\n}\n\nexport const BlockRow: React.FC<BlockFieldProps> = ({\n addRow,\n attributes,\n block,\n blocks,\n duplicateRow,\n errorCount,\n forceRender,\n hasMaxRows,\n labels,\n listeners,\n moveRow,\n path: parentPath,\n permissions,\n readOnly,\n removeRow,\n row,\n rowCount,\n rowIndex,\n schemaPath,\n setCollapse,\n setNodeRef,\n transform,\n}) => {\n const path = `${parentPath}.${rowIndex}`\n const { i18n } = useTranslation()\n const hasSubmitted = useFormSubmitted()\n\n const fieldHasErrors = hasSubmitted && errorCount > 0\n\n const classNames = [\n `${baseClass}__row`,\n fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`,\n ]\n .filter(Boolean)\n .join(' ')\n\n return (\n <div\n id={`${parentPath.split('.').join('-')}-row-${rowIndex}`}\n key={`${parentPath}-row-${rowIndex}`}\n ref={setNodeRef}\n style={{\n transform,\n }}\n >\n <Collapsible\n actions={\n !readOnly ? (\n <RowActions\n addRow={addRow}\n blockType={row.blockType}\n blocks={blocks}\n duplicateRow={duplicateRow}\n fieldMap={block.fieldMap}\n hasMaxRows={hasMaxRows}\n labels={labels}\n moveRow={moveRow}\n removeRow={removeRow}\n rowCount={rowCount}\n rowIndex={rowIndex}\n />\n ) : undefined\n }\n className={classNames}\n collapsibleStyle={fieldHasErrors ? 'error' : 'default'}\n dragHandleProps={{\n id: row.id,\n attributes,\n listeners,\n }}\n header={\n <div className={`${baseClass}__block-header`}>\n <span className={`${baseClass}__block-number`}>\n {String(rowIndex + 1).padStart(2, '0')}\n </span>\n <Pill\n className={`${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`}\n pillStyle=\"white\"\n >\n {getTranslation(block.labels.singular, i18n)}\n </Pill>\n <SectionTitle path={`${path}.blockName`} readOnly={readOnly} />\n {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n </div>\n }\n isCollapsed={row.collapsed}\n key={row.id}\n onToggle={(collapsed) => setCollapse(row.id, collapsed)}\n >\n <RenderFields\n className={`${baseClass}__fields`}\n fieldMap={block.fieldMap}\n forceRender={forceRender}\n margins=\"small\"\n path={path}\n permissions={permissions?.blocks?.[block.slug]?.fields}\n readOnly={readOnly}\n schemaPath={`${schemaPath}.${block.slug}`}\n />\n </Collapsible>\n </div>\n )\n}\n"],"names":["getTranslation","React","Collapsible","ErrorPill","Pill","useFormSubmitted","RenderFields","useTranslation","RowActions","SectionTitle","baseClass","BlockRow","addRow","attributes","block","blocks","duplicateRow","errorCount","forceRender","hasMaxRows","labels","listeners","moveRow","path","parentPath","permissions","readOnly","removeRow","row","rowCount","rowIndex","schemaPath","setCollapse","setNodeRef","transform","i18n","hasSubmitted","fieldHasErrors","classNames","filter","Boolean","join","div","id","split","key","ref","style","actions","blockType","fieldMap","undefined","className","collapsibleStyle","dragHandleProps","header","span","String","padStart","pillStyle","singular","count","withMessage","isCollapsed","collapsed","onToggle","margins","slug","fields"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ const GroupField = (props)=>{
|
|
|
19
19
|
const { CustomDescription, CustomLabel, className, descriptionProps, fieldMap, hideGutter, labelProps, readOnly: readOnlyFromProps, style, width } = props;
|
|
20
20
|
const { path, permissions, readOnly: readOnlyFromContext, schemaPath } = useFieldProps();
|
|
21
21
|
const { i18n } = useTranslation();
|
|
22
|
-
const isWithinCollapsible = useCollapsible();
|
|
22
|
+
const { isWithinCollapsible } = useCollapsible();
|
|
23
23
|
const isWithinGroup = useGroup();
|
|
24
24
|
const isWithinRow = useRow();
|
|
25
25
|
const isWithinTab = useTabs();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/Group/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { FieldBase } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport React, { Fragment } from 'react'\n\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useRow } from '../Row/provider.js'\nimport { useTabs } from '../Tabs/provider.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\nimport { GroupProvider, useGroup } from './provider.js'\n\nconst baseClass = 'group-field'\n\nexport type GroupFieldProps = FormFieldBase & {\n fieldMap: FieldMap\n forceRender?: boolean\n hideGutter?: boolean\n label?: FieldBase['label']\n name?: string\n permissions: FieldPermissions\n width?: string\n}\n\nconst GroupField: React.FC<GroupFieldProps> = (props) => {\n const {\n CustomDescription,\n CustomLabel,\n className,\n descriptionProps,\n fieldMap,\n hideGutter,\n labelProps,\n readOnly: readOnlyFromProps,\n style,\n width,\n } = props\n\n const { path, permissions, readOnly: readOnlyFromContext, schemaPath } = useFieldProps()\n const { i18n } = useTranslation()\n const isWithinCollapsible = useCollapsible()\n const isWithinGroup = useGroup()\n const isWithinRow = useRow()\n const isWithinTab = useTabs()\n const { errorPaths } = useField({ path })\n const submitted = useFormSubmitted()\n const errorCount = errorPaths.length\n const fieldHasErrors = submitted && errorCount > 0\n const readOnly = readOnlyFromProps || readOnlyFromContext\n\n const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow)\n\n return (\n <Fragment>\n <div\n className={[\n fieldBaseClass,\n baseClass,\n isTopLevel && `${baseClass}--top-level`,\n isWithinCollapsible && `${baseClass}--within-collapsible`,\n isWithinGroup && `${baseClass}--within-group`,\n isWithinRow && `${baseClass}--within-row`,\n isWithinTab && `${baseClass}--within-tab`,\n !hideGutter && isWithinGroup && `${baseClass}--gutter`,\n fieldHasErrors && `${baseClass}--has-error`,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n id={`field-${path?.replace(/\\./g, '__')}`}\n style={{\n ...style,\n width,\n }}\n >\n <GroupProvider>\n <div className={`${baseClass}__wrap`}>\n <div className={`${baseClass}__header`}>\n {(CustomLabel || CustomDescription || labelProps?.label) && (\n <header>\n {CustomLabel !== undefined ? (\n CustomLabel\n ) : labelProps?.label ? (\n <h3 className={`${baseClass}__title`}>\n {getTranslation(labelProps.label, i18n)}\n </h3>\n ) : null}\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </header>\n )}\n {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n </div>\n <RenderFields\n fieldMap={fieldMap}\n margins=\"small\"\n path={path}\n permissions={permissions?.fields}\n readOnly={readOnly}\n schemaPath={schemaPath}\n />\n </div>\n </GroupProvider>\n </div>\n </Fragment>\n )\n}\n\nexport { GroupProvider, useGroup }\n\nexport const Group = withCondition(GroupField)\n"],"names":["getTranslation","FieldDescription","React","Fragment","useCollapsible","ErrorPill","useFieldProps","useFormSubmitted","RenderFields","useField","withCondition","useTranslation","useRow","useTabs","fieldBaseClass","GroupProvider","useGroup","baseClass","GroupField","props","CustomDescription","CustomLabel","className","descriptionProps","fieldMap","hideGutter","labelProps","readOnly","readOnlyFromProps","style","width","path","permissions","readOnlyFromContext","schemaPath","i18n","isWithinCollapsible","isWithinGroup","isWithinRow","isWithinTab","errorPaths","submitted","errorCount","length","fieldHasErrors","isTopLevel","div","filter","Boolean","join","id","replace","label","header","undefined","h3","count","withMessage","margins","fields","Group"],"mappings":"AAAA;AAIA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,gBAAgB,QAAQ,wCAAuC;AACxE,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAKvC,SAASC,cAAc,QAAQ,yCAAwC;AACvE,SAASC,SAAS,QAAQ,oCAAmC;AAC7D,SAASC,aAAa,QAAQ,0CAAyC;AACvE,SAASC,gBAAgB,QAAQ,8BAA6B;AAC9D,SAASC,YAAY,QAAQ,oCAAmC;AAChE,SAASC,QAAQ,QAAQ,gCAA+B;AACxD,SAASC,aAAa,QAAQ,qCAAoC;AAClE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,OAAO,QAAQ,sBAAqB;AAC7C,SAASC,cAAc,QAAQ,qBAAoB;AAEnD,SAASC,aAAa,EAAEC,QAAQ,QAAQ,gBAAe;AAEvD,MAAMC,YAAY;AAYlB,MAAMC,aAAwC,CAACC;IAC7C,MAAM,EACJC,iBAAiB,EACjBC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,QAAQ,EACRC,UAAU,EACVC,UAAU,EACVC,UAAUC,iBAAiB,EAC3BC,KAAK,EACLC,KAAK,EACN,GAAGX;IAEJ,MAAM,EAAEY,IAAI,EAAEC,WAAW,EAAEL,UAAUM,mBAAmB,EAAEC,UAAU,EAAE,GAAG5B;IACzE,MAAM,EAAE6B,IAAI,EAAE,GAAGxB;IACjB,
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/Group/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { FieldBase } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport React, { Fragment } from 'react'\n\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { ErrorPill } from '../../elements/ErrorPill/index.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { useFormSubmitted } from '../../forms/Form/context.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useRow } from '../Row/provider.js'\nimport { useTabs } from '../Tabs/provider.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport './index.scss'\nimport { GroupProvider, useGroup } from './provider.js'\n\nconst baseClass = 'group-field'\n\nexport type GroupFieldProps = FormFieldBase & {\n fieldMap: FieldMap\n forceRender?: boolean\n hideGutter?: boolean\n label?: FieldBase['label']\n name?: string\n permissions: FieldPermissions\n width?: string\n}\n\nconst GroupField: React.FC<GroupFieldProps> = (props) => {\n const {\n CustomDescription,\n CustomLabel,\n className,\n descriptionProps,\n fieldMap,\n hideGutter,\n labelProps,\n readOnly: readOnlyFromProps,\n style,\n width,\n } = props\n\n const { path, permissions, readOnly: readOnlyFromContext, schemaPath } = useFieldProps()\n const { i18n } = useTranslation()\n const { isWithinCollapsible } = useCollapsible()\n const isWithinGroup = useGroup()\n const isWithinRow = useRow()\n const isWithinTab = useTabs()\n const { errorPaths } = useField({ path })\n const submitted = useFormSubmitted()\n const errorCount = errorPaths.length\n const fieldHasErrors = submitted && errorCount > 0\n const readOnly = readOnlyFromProps || readOnlyFromContext\n\n const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow)\n\n return (\n <Fragment>\n <div\n className={[\n fieldBaseClass,\n baseClass,\n isTopLevel && `${baseClass}--top-level`,\n isWithinCollapsible && `${baseClass}--within-collapsible`,\n isWithinGroup && `${baseClass}--within-group`,\n isWithinRow && `${baseClass}--within-row`,\n isWithinTab && `${baseClass}--within-tab`,\n !hideGutter && isWithinGroup && `${baseClass}--gutter`,\n fieldHasErrors && `${baseClass}--has-error`,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n id={`field-${path?.replace(/\\./g, '__')}`}\n style={{\n ...style,\n width,\n }}\n >\n <GroupProvider>\n <div className={`${baseClass}__wrap`}>\n <div className={`${baseClass}__header`}>\n {(CustomLabel || CustomDescription || labelProps?.label) && (\n <header>\n {CustomLabel !== undefined ? (\n CustomLabel\n ) : labelProps?.label ? (\n <h3 className={`${baseClass}__title`}>\n {getTranslation(labelProps.label, i18n)}\n </h3>\n ) : null}\n {CustomDescription !== undefined ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n </header>\n )}\n {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}\n </div>\n <RenderFields\n fieldMap={fieldMap}\n margins=\"small\"\n path={path}\n permissions={permissions?.fields}\n readOnly={readOnly}\n schemaPath={schemaPath}\n />\n </div>\n </GroupProvider>\n </div>\n </Fragment>\n )\n}\n\nexport { GroupProvider, useGroup }\n\nexport const Group = withCondition(GroupField)\n"],"names":["getTranslation","FieldDescription","React","Fragment","useCollapsible","ErrorPill","useFieldProps","useFormSubmitted","RenderFields","useField","withCondition","useTranslation","useRow","useTabs","fieldBaseClass","GroupProvider","useGroup","baseClass","GroupField","props","CustomDescription","CustomLabel","className","descriptionProps","fieldMap","hideGutter","labelProps","readOnly","readOnlyFromProps","style","width","path","permissions","readOnlyFromContext","schemaPath","i18n","isWithinCollapsible","isWithinGroup","isWithinRow","isWithinTab","errorPaths","submitted","errorCount","length","fieldHasErrors","isTopLevel","div","filter","Boolean","join","id","replace","label","header","undefined","h3","count","withMessage","margins","fields","Group"],"mappings":"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"}
|
|
@@ -23,7 +23,7 @@ const TabsField = (props)=>{
|
|
|
23
23
|
const { getPreference, setPreference } = usePreferences();
|
|
24
24
|
const { preferencesKey } = useDocumentInfo();
|
|
25
25
|
const { i18n } = useTranslation();
|
|
26
|
-
const isWithinCollapsible = useCollapsible();
|
|
26
|
+
const { isWithinCollapsible } = useCollapsible();
|
|
27
27
|
const [activeTabIndex, setActiveTabIndex] = useState(0);
|
|
28
28
|
const tabsPrefKey = `tabs-${indexPath}`;
|
|
29
29
|
useEffect(()=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/fields/Tabs/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { DocumentPreferences } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { toKebabCase } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { MappedTab } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { TabComponent } from './Tab/index.js'\nimport './index.scss'\nimport { TabsProvider } from './provider.js'\n\nconst baseClass = 'tabs-field'\n\nexport { TabsProvider }\n\nexport type TabsFieldProps = FormFieldBase & {\n forceRender?: boolean\n name?: string\n path?: string\n permissions: FieldPermissions\n tabs?: MappedTab[]\n width?: string\n}\n\nconst TabsField: React.FC<TabsFieldProps> = (props) => {\n const {\n name,\n CustomDescription,\n className,\n descriptionProps,\n forceRender = false,\n path: pathFromProps,\n readOnly: readOnlyFromProps,\n tabs = [],\n } = props\n\n const {\n indexPath,\n path: pathFromContext,\n permissions,\n readOnly: readOnlyFromContext,\n schemaPath,\n } = useFieldProps()\n const readOnly = readOnlyFromProps || readOnlyFromContext\n const path = pathFromContext || pathFromProps || name\n const { getPreference, setPreference } = usePreferences()\n const { preferencesKey } = useDocumentInfo()\n const { i18n } = useTranslation()\n const isWithinCollapsible = useCollapsible()\n const [activeTabIndex, setActiveTabIndex] = useState<number>(0)\n const tabsPrefKey = `tabs-${indexPath}`\n\n useEffect(() => {\n const getInitialPref = async () => {\n const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n const initialIndex = path\n ? existingPreferences?.fields?.[path]?.tabIndex\n : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex\n setActiveTabIndex(initialIndex || 0)\n }\n void getInitialPref()\n }, [path, getPreference, preferencesKey, tabsPrefKey])\n\n const handleTabChange = useCallback(\n async (incomingTabIndex: number) => {\n setActiveTabIndex(incomingTabIndex)\n\n const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n void setPreference(preferencesKey, {\n ...existingPreferences,\n ...(path\n ? {\n fields: {\n ...(existingPreferences?.fields || {}),\n [path]: {\n ...existingPreferences?.fields?.[path],\n tabIndex: incomingTabIndex,\n },\n },\n }\n : {\n fields: {\n ...existingPreferences?.fields,\n [tabsPrefKey]: {\n ...existingPreferences?.fields?.[tabsPrefKey],\n tabIndex: incomingTabIndex,\n },\n },\n }),\n })\n },\n [preferencesKey, getPreference, setPreference, path, tabsPrefKey],\n )\n\n const activeTabConfig = tabs[activeTabIndex]\n\n return (\n <div\n className={[\n fieldBaseClass,\n className,\n baseClass,\n isWithinCollapsible && `${baseClass}--within-collapsible`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <TabsProvider>\n <div className={`${baseClass}__tabs-wrap`}>\n <div className={`${baseClass}__tabs`}>\n {tabs.map((tab, tabIndex) => {\n return (\n <TabComponent\n isActive={activeTabIndex === tabIndex}\n key={tabIndex}\n parentPath={path}\n setIsActive={() => handleTabChange(tabIndex)}\n tab={tab}\n />\n )\n })}\n </div>\n </div>\n <div className={`${baseClass}__content-wrap`}>\n {activeTabConfig && (\n <React.Fragment>\n <div\n className={[\n `${baseClass}__tab`,\n activeTabConfig.label &&\n `${baseClass}__tabConfigLabel-${toKebabCase(\n getTranslation(activeTabConfig.label, i18n),\n )}`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {CustomDescription ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n <RenderFields\n fieldMap={activeTabConfig.fieldMap}\n forceRender={forceRender}\n key={\n activeTabConfig.label\n ? getTranslation(activeTabConfig.label, i18n)\n : activeTabConfig['name']\n }\n margins=\"small\"\n path={`${path ? `${path}.` : ''}${activeTabConfig.name ? `${activeTabConfig.name}` : ''}`}\n permissions={\n 'name' in activeTabConfig && permissions?.fields?.[activeTabConfig.name]?.fields\n ? permissions?.fields?.[activeTabConfig.name]?.fields\n : permissions?.fields\n }\n readOnly={readOnly}\n schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}\n />\n </div>\n </React.Fragment>\n )}\n </div>\n </TabsProvider>\n </div>\n )\n}\n\nexport const Tabs = withCondition(TabsField)\n"],"names":["getTranslation","FieldDescription","toKebabCase","React","useCallback","useEffect","useState","useCollapsible","useFieldProps","RenderFields","withCondition","useDocumentInfo","usePreferences","useTranslation","fieldBaseClass","TabComponent","TabsProvider","baseClass","TabsField","props","name","CustomDescription","className","descriptionProps","forceRender","path","pathFromProps","readOnly","readOnlyFromProps","tabs","indexPath","pathFromContext","permissions","readOnlyFromContext","schemaPath","getPreference","setPreference","preferencesKey","i18n","isWithinCollapsible","activeTabIndex","setActiveTabIndex","tabsPrefKey","getInitialPref","existingPreferences","initialIndex","fields","tabIndex","handleTabChange","incomingTabIndex","activeTabConfig","div","filter","Boolean","join","map","tab","isActive","key","parentPath","setIsActive","Fragment","label","fieldMap","margins","Tabs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/fields/Tabs/index.tsx"],"sourcesContent":["'use client'\nimport type { FieldPermissions } from 'payload/auth'\nimport type { DocumentPreferences } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { FieldDescription } from '@payloadcms/ui/forms/FieldDescription'\nimport { toKebabCase } from 'payload/utilities'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { MappedTab } from '../../providers/ComponentMap/buildComponentMap/types.js'\nimport type { FormFieldBase } from '../shared/index.js'\n\nimport { useCollapsible } from '../../elements/Collapsible/provider.js'\nimport { useFieldProps } from '../../forms/FieldPropsProvider/index.js'\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { TabComponent } from './Tab/index.js'\nimport './index.scss'\nimport { TabsProvider } from './provider.js'\n\nconst baseClass = 'tabs-field'\n\nexport { TabsProvider }\n\nexport type TabsFieldProps = FormFieldBase & {\n forceRender?: boolean\n name?: string\n path?: string\n permissions: FieldPermissions\n tabs?: MappedTab[]\n width?: string\n}\n\nconst TabsField: React.FC<TabsFieldProps> = (props) => {\n const {\n name,\n CustomDescription,\n className,\n descriptionProps,\n forceRender = false,\n path: pathFromProps,\n readOnly: readOnlyFromProps,\n tabs = [],\n } = props\n\n const {\n indexPath,\n path: pathFromContext,\n permissions,\n readOnly: readOnlyFromContext,\n schemaPath,\n } = useFieldProps()\n const readOnly = readOnlyFromProps || readOnlyFromContext\n const path = pathFromContext || pathFromProps || name\n const { getPreference, setPreference } = usePreferences()\n const { preferencesKey } = useDocumentInfo()\n const { i18n } = useTranslation()\n const { isWithinCollapsible } = useCollapsible()\n const [activeTabIndex, setActiveTabIndex] = useState<number>(0)\n const tabsPrefKey = `tabs-${indexPath}`\n\n useEffect(() => {\n const getInitialPref = async () => {\n const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n const initialIndex = path\n ? existingPreferences?.fields?.[path]?.tabIndex\n : existingPreferences?.fields?.[tabsPrefKey]?.tabIndex\n setActiveTabIndex(initialIndex || 0)\n }\n void getInitialPref()\n }, [path, getPreference, preferencesKey, tabsPrefKey])\n\n const handleTabChange = useCallback(\n async (incomingTabIndex: number) => {\n setActiveTabIndex(incomingTabIndex)\n\n const existingPreferences: DocumentPreferences = await getPreference(preferencesKey)\n\n void setPreference(preferencesKey, {\n ...existingPreferences,\n ...(path\n ? {\n fields: {\n ...(existingPreferences?.fields || {}),\n [path]: {\n ...existingPreferences?.fields?.[path],\n tabIndex: incomingTabIndex,\n },\n },\n }\n : {\n fields: {\n ...existingPreferences?.fields,\n [tabsPrefKey]: {\n ...existingPreferences?.fields?.[tabsPrefKey],\n tabIndex: incomingTabIndex,\n },\n },\n }),\n })\n },\n [preferencesKey, getPreference, setPreference, path, tabsPrefKey],\n )\n\n const activeTabConfig = tabs[activeTabIndex]\n\n return (\n <div\n className={[\n fieldBaseClass,\n className,\n baseClass,\n isWithinCollapsible && `${baseClass}--within-collapsible`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n <TabsProvider>\n <div className={`${baseClass}__tabs-wrap`}>\n <div className={`${baseClass}__tabs`}>\n {tabs.map((tab, tabIndex) => {\n return (\n <TabComponent\n isActive={activeTabIndex === tabIndex}\n key={tabIndex}\n parentPath={path}\n setIsActive={() => handleTabChange(tabIndex)}\n tab={tab}\n />\n )\n })}\n </div>\n </div>\n <div className={`${baseClass}__content-wrap`}>\n {activeTabConfig && (\n <React.Fragment>\n <div\n className={[\n `${baseClass}__tab`,\n activeTabConfig.label &&\n `${baseClass}__tabConfigLabel-${toKebabCase(\n getTranslation(activeTabConfig.label, i18n),\n )}`,\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {CustomDescription ? (\n CustomDescription\n ) : (\n <FieldDescription {...(descriptionProps || {})} />\n )}\n <RenderFields\n fieldMap={activeTabConfig.fieldMap}\n forceRender={forceRender}\n key={\n activeTabConfig.label\n ? getTranslation(activeTabConfig.label, i18n)\n : activeTabConfig['name']\n }\n margins=\"small\"\n path={`${path ? `${path}.` : ''}${activeTabConfig.name ? `${activeTabConfig.name}` : ''}`}\n permissions={\n 'name' in activeTabConfig && permissions?.fields?.[activeTabConfig.name]?.fields\n ? permissions?.fields?.[activeTabConfig.name]?.fields\n : permissions?.fields\n }\n readOnly={readOnly}\n schemaPath={`${schemaPath ? `${schemaPath}` : ''}${activeTabConfig.name ? `.${activeTabConfig.name}` : ''}`}\n />\n </div>\n </React.Fragment>\n )}\n </div>\n </TabsProvider>\n </div>\n )\n}\n\nexport const Tabs = withCondition(TabsField)\n"],"names":["getTranslation","FieldDescription","toKebabCase","React","useCallback","useEffect","useState","useCollapsible","useFieldProps","RenderFields","withCondition","useDocumentInfo","usePreferences","useTranslation","fieldBaseClass","TabComponent","TabsProvider","baseClass","TabsField","props","name","CustomDescription","className","descriptionProps","forceRender","path","pathFromProps","readOnly","readOnlyFromProps","tabs","indexPath","pathFromContext","permissions","readOnlyFromContext","schemaPath","getPreference","setPreference","preferencesKey","i18n","isWithinCollapsible","activeTabIndex","setActiveTabIndex","tabsPrefKey","getInitialPref","existingPreferences","initialIndex","fields","tabIndex","handleTabChange","incomingTabIndex","activeTabConfig","div","filter","Boolean","join","map","tab","isActive","key","parentPath","setIsActive","Fragment","label","fieldMap","margins","Tabs"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payloadcms/ui",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.59",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"homepage": "https://payloadcms.com",
|
|
6
6
|
"repository": {
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"webpack": "^5.78.0",
|
|
108
108
|
"webpack-cli": "^5.1.4",
|
|
109
109
|
"@payloadcms/eslint-config": "1.1.1",
|
|
110
|
-
"payload": "3.0.0-alpha.
|
|
110
|
+
"payload": "3.0.0-alpha.59"
|
|
111
111
|
},
|
|
112
112
|
"dependencies": {
|
|
113
113
|
"@dnd-kit/core": "6.0.8",
|
|
@@ -131,12 +131,12 @@
|
|
|
131
131
|
"react-toastify": "10.0.4",
|
|
132
132
|
"use-context-selector": "1.4.1",
|
|
133
133
|
"uuid": "9.0.1",
|
|
134
|
-
"@payloadcms/translations": "3.0.0-alpha.
|
|
134
|
+
"@payloadcms/translations": "3.0.0-alpha.59"
|
|
135
135
|
},
|
|
136
136
|
"peerDependencies": {
|
|
137
137
|
"next": "14.2.0-canary.23",
|
|
138
138
|
"react": "^18.0.0",
|
|
139
|
-
"payload": "3.0.0-alpha.
|
|
139
|
+
"payload": "3.0.0-alpha.59"
|
|
140
140
|
},
|
|
141
141
|
"engines": {
|
|
142
142
|
"node": ">=18.17.0"
|