@payloadcms/ui 3.59.0-internal.3d25465 → 3.59.0-internal.3d3f76c
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 +2 -15
- package/dist/elements/Collapsible/index.d.ts.map +1 -1
- package/dist/elements/Collapsible/index.js +60 -59
- package/dist/elements/Collapsible/index.js.map +1 -1
- package/dist/elements/Collapsible/index.scss +2 -6
- package/dist/elements/Nav/context.d.ts +0 -6
- package/dist/elements/Nav/context.d.ts.map +1 -1
- package/dist/elements/Nav/context.js +0 -6
- package/dist/elements/Nav/context.js.map +1 -1
- package/dist/elements/PageControls/index.d.ts +0 -9
- package/dist/elements/PageControls/index.d.ts.map +1 -1
- package/dist/elements/PageControls/index.js +45 -101
- package/dist/elements/PageControls/index.js.map +1 -1
- package/dist/elements/StickyToolbar/index.d.ts +0 -3
- package/dist/elements/StickyToolbar/index.d.ts.map +1 -1
- package/dist/elements/StickyToolbar/index.js +0 -3
- package/dist/elements/StickyToolbar/index.js.map +1 -1
- package/dist/exports/client/index.d.ts +1 -4
- package/dist/exports/client/index.d.ts.map +1 -1
- package/dist/exports/client/index.js +12 -12
- package/dist/exports/client/index.js.map +4 -4
- package/dist/fields/Code/index.d.ts.map +1 -1
- package/dist/fields/Code/index.js +1 -3
- package/dist/fields/Code/index.js.map +1 -1
- package/dist/hooks/useControllableState.d.ts +0 -2
- package/dist/hooks/useControllableState.d.ts.map +1 -1
- package/dist/hooks/useControllableState.js +11 -44
- package/dist/hooks/useControllableState.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +4 -4
|
@@ -3,29 +3,16 @@ import type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem
|
|
|
3
3
|
import './index.scss';
|
|
4
4
|
import { CollapsibleProvider, useCollapsible } from './provider.js';
|
|
5
5
|
export { CollapsibleProvider, useCollapsible };
|
|
6
|
-
export type
|
|
6
|
+
export type Props = {
|
|
7
7
|
actions?: React.ReactNode;
|
|
8
|
-
/**
|
|
9
|
-
* Components that will be rendered within the collapsible provider but after the wrapper.
|
|
10
|
-
*/
|
|
11
|
-
AfterCollapsible?: React.ReactNode;
|
|
12
8
|
children: React.ReactNode;
|
|
13
9
|
className?: string;
|
|
14
10
|
collapsibleStyle?: 'default' | 'error';
|
|
15
|
-
/**
|
|
16
|
-
* If set to true, clicking on the collapsible header will not toggle the collapsible state.
|
|
17
|
-
* This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).
|
|
18
|
-
*/
|
|
19
|
-
disableHeaderToggle?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.
|
|
22
|
-
*/
|
|
23
|
-
disableToggleIndicator?: boolean;
|
|
24
11
|
dragHandleProps?: DragHandleProps;
|
|
25
12
|
header?: React.ReactNode;
|
|
26
13
|
initCollapsed?: boolean;
|
|
27
14
|
isCollapsed?: boolean;
|
|
28
15
|
onToggle?: (collapsed: boolean) => Promise<void> | void;
|
|
29
16
|
};
|
|
30
|
-
export declare const Collapsible: React.FC<
|
|
17
|
+
export declare const Collapsible: React.FC<Props>;
|
|
31
18
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAK1F,OAAO,cAAc,CAAA;AAErB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAInE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAA;AAE9C,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAA;AAK1F,OAAO,cAAc,CAAA;AAErB,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,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2FvC,CAAA"}
|
|
@@ -12,15 +12,12 @@ import { CollapsibleProvider, useCollapsible } from './provider.js';
|
|
|
12
12
|
const baseClass = 'collapsible';
|
|
13
13
|
export { CollapsibleProvider, useCollapsible };
|
|
14
14
|
export const Collapsible = t0 => {
|
|
15
|
-
const $ = _c(
|
|
15
|
+
const $ = _c(24);
|
|
16
16
|
const {
|
|
17
17
|
actions,
|
|
18
|
-
AfterCollapsible,
|
|
19
18
|
children,
|
|
20
19
|
className,
|
|
21
20
|
collapsibleStyle: t1,
|
|
22
|
-
disableHeaderToggle: t2,
|
|
23
|
-
disableToggleIndicator: t3,
|
|
24
21
|
dragHandleProps,
|
|
25
22
|
header,
|
|
26
23
|
initCollapsed,
|
|
@@ -28,8 +25,6 @@ export const Collapsible = t0 => {
|
|
|
28
25
|
onToggle
|
|
29
26
|
} = t0;
|
|
30
27
|
const collapsibleStyle = t1 === undefined ? "default" : t1;
|
|
31
|
-
const disableHeaderToggle = t2 === undefined ? false : t2;
|
|
32
|
-
const disableToggleIndicator = t3 === undefined ? false : t3;
|
|
33
28
|
const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
|
|
34
29
|
const [hoveringToggle, setHoveringToggle] = useState(false);
|
|
35
30
|
const {
|
|
@@ -39,9 +34,9 @@ export const Collapsible = t0 => {
|
|
|
39
34
|
t
|
|
40
35
|
} = useTranslation();
|
|
41
36
|
const isCollapsed = typeof collapsedFromProps === "boolean" ? collapsedFromProps : collapsedLocal;
|
|
42
|
-
let
|
|
37
|
+
let t2;
|
|
43
38
|
if ($[0] !== isCollapsed || $[1] !== onToggle) {
|
|
44
|
-
|
|
39
|
+
t2 = () => {
|
|
45
40
|
if (typeof onToggle === "function") {
|
|
46
41
|
onToggle(!isCollapsed);
|
|
47
42
|
}
|
|
@@ -49,55 +44,64 @@ export const Collapsible = t0 => {
|
|
|
49
44
|
};
|
|
50
45
|
$[0] = isCollapsed;
|
|
51
46
|
$[1] = onToggle;
|
|
52
|
-
$[2] =
|
|
47
|
+
$[2] = t2;
|
|
53
48
|
} else {
|
|
54
|
-
|
|
49
|
+
t2 = $[2];
|
|
55
50
|
}
|
|
56
|
-
const toggleCollapsible =
|
|
57
|
-
const
|
|
58
|
-
const
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
const
|
|
62
|
-
let
|
|
63
|
-
if ($[3] !== className || $[4] !==
|
|
64
|
-
|
|
51
|
+
const toggleCollapsible = t2;
|
|
52
|
+
const t3 = dragHandleProps && `${baseClass}--has-drag-handle`;
|
|
53
|
+
const t4 = isCollapsed && `${baseClass}--collapsed`;
|
|
54
|
+
const t5 = isWithinCollapsible && `${baseClass}--nested`;
|
|
55
|
+
const t6 = hoveringToggle && `${baseClass}--hovered`;
|
|
56
|
+
const t7 = `${baseClass}--style-${collapsibleStyle}`;
|
|
57
|
+
let t8;
|
|
58
|
+
if ($[3] !== className || $[4] !== t3 || $[5] !== t4 || $[6] !== t5 || $[7] !== t6 || $[8] !== t7) {
|
|
59
|
+
t8 = [baseClass, className, t3, t4, t5, t6, t7].filter(Boolean);
|
|
65
60
|
$[3] = className;
|
|
66
|
-
$[4] =
|
|
67
|
-
$[5] =
|
|
68
|
-
$[6] =
|
|
69
|
-
$[7] =
|
|
70
|
-
$[8] =
|
|
71
|
-
$[9] =
|
|
61
|
+
$[4] = t3;
|
|
62
|
+
$[5] = t4;
|
|
63
|
+
$[6] = t5;
|
|
64
|
+
$[7] = t6;
|
|
65
|
+
$[8] = t7;
|
|
66
|
+
$[9] = t8;
|
|
72
67
|
} else {
|
|
73
|
-
|
|
68
|
+
t8 = $[9];
|
|
74
69
|
}
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
let
|
|
78
|
-
let t14;
|
|
70
|
+
const t9 = t8.join(" ");
|
|
71
|
+
let t10;
|
|
72
|
+
let t11;
|
|
79
73
|
if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
$[10] =
|
|
83
|
-
$[11] =
|
|
74
|
+
t10 = () => setHoveringToggle(true);
|
|
75
|
+
t11 = () => setHoveringToggle(false);
|
|
76
|
+
$[10] = t10;
|
|
77
|
+
$[11] = t11;
|
|
78
|
+
} else {
|
|
79
|
+
t10 = $[10];
|
|
80
|
+
t11 = $[11];
|
|
81
|
+
}
|
|
82
|
+
const t12 = `${baseClass}__toggle--${isCollapsed ? "collapsed" : "open"}`;
|
|
83
|
+
let t13;
|
|
84
|
+
if ($[12] !== t12) {
|
|
85
|
+
t13 = [`${baseClass}__toggle`, t12].filter(Boolean);
|
|
86
|
+
$[12] = t12;
|
|
87
|
+
$[13] = t13;
|
|
84
88
|
} else {
|
|
85
|
-
t13 = $[
|
|
86
|
-
t14 = $[11];
|
|
89
|
+
t13 = $[13];
|
|
87
90
|
}
|
|
91
|
+
const t14 = t13.join(" ");
|
|
88
92
|
let t15;
|
|
89
|
-
if ($[
|
|
93
|
+
if ($[14] !== actions || $[15] !== children || $[16] !== dragHandleProps || $[17] !== header || $[18] !== isCollapsed || $[19] !== t || $[20] !== t14 || $[21] !== t9 || $[22] !== toggleCollapsible) {
|
|
90
94
|
t15 = _jsx("div", {
|
|
91
|
-
className:
|
|
95
|
+
className: t9,
|
|
92
96
|
children: _jsxs(CollapsibleProvider, {
|
|
93
97
|
isCollapsed,
|
|
94
98
|
toggle: toggleCollapsible,
|
|
95
99
|
children: [_jsxs("div", {
|
|
96
|
-
className:
|
|
97
|
-
onMouseEnter:
|
|
98
|
-
onMouseLeave:
|
|
99
|
-
children: [
|
|
100
|
-
className:
|
|
100
|
+
className: `${baseClass}__toggle-wrap`,
|
|
101
|
+
onMouseEnter: t10,
|
|
102
|
+
onMouseLeave: t11,
|
|
103
|
+
children: [_jsx("button", {
|
|
104
|
+
className: t14,
|
|
101
105
|
onClick: toggleCollapsible,
|
|
102
106
|
type: "button",
|
|
103
107
|
children: _jsx("span", {
|
|
@@ -116,7 +120,7 @@ export const Collapsible = t0 => {
|
|
|
116
120
|
children: [actions ? _jsx("div", {
|
|
117
121
|
className: `${baseClass}__actions`,
|
|
118
122
|
children: actions
|
|
119
|
-
}) : null,
|
|
123
|
+
}) : null, _jsx("div", {
|
|
120
124
|
className: `${baseClass}__indicator`,
|
|
121
125
|
children: _jsx(ChevronIcon, {
|
|
122
126
|
direction: !isCollapsed ? "up" : undefined
|
|
@@ -129,24 +133,21 @@ export const Collapsible = t0 => {
|
|
|
129
133
|
className: `${baseClass}__content`,
|
|
130
134
|
children
|
|
131
135
|
})
|
|
132
|
-
})
|
|
136
|
+
})]
|
|
133
137
|
})
|
|
134
138
|
});
|
|
135
|
-
$[
|
|
136
|
-
$[
|
|
137
|
-
$[
|
|
138
|
-
$[
|
|
139
|
-
$[
|
|
140
|
-
$[
|
|
141
|
-
$[
|
|
142
|
-
$[
|
|
143
|
-
$[
|
|
144
|
-
$[
|
|
145
|
-
$[22] = t12;
|
|
146
|
-
$[23] = toggleCollapsible;
|
|
147
|
-
$[24] = t15;
|
|
139
|
+
$[14] = actions;
|
|
140
|
+
$[15] = children;
|
|
141
|
+
$[16] = dragHandleProps;
|
|
142
|
+
$[17] = header;
|
|
143
|
+
$[18] = isCollapsed;
|
|
144
|
+
$[19] = t;
|
|
145
|
+
$[20] = t14;
|
|
146
|
+
$[21] = t9;
|
|
147
|
+
$[22] = toggleCollapsible;
|
|
148
|
+
$[23] = t15;
|
|
148
149
|
} else {
|
|
149
|
-
t15 = $[
|
|
150
|
+
t15 = $[23];
|
|
150
151
|
}
|
|
151
152
|
return t15;
|
|
152
153
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["c","_c","React","useState","ChevronIcon","DragHandleIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","
|
|
1
|
+
{"version":3,"file":"index.js","names":["c","_c","React","useState","ChevronIcon","DragHandleIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","children","className","collapsibleStyle","t1","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t2","toggleCollapsible","t3","t4","t5","t6","t7","t8","filter","t9","join","t10","t11","Symbol","for","t12","t13","t14","t15","_jsx","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","attributes","listeners","direction","height"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { DragHandleIcon } from '../../icons/DragHandle/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\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) => Promise<void> | 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') {\n void onToggle(!isCollapsed)\n }\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 <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 {dragHandleProps && (\n <div\n className={`${baseClass}__drag`}\n {...dragHandleProps.attributes}\n {...dragHandleProps.listeners}\n >\n <DragHandleIcon />\n </div>\n )}\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}\n </div>\n ) : null}\n <div className={`${baseClass}__actions-wrap`}>\n {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n <div className={`${baseClass}__indicator`}>\n <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n </div>\n </div>\n </div>\n <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n <div className={`${baseClass}__content`}>{children}</div>\n </AnimateHeight>\n </CollapsibleProvider>\n </div>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
@layer payload-default {
|
|
4
4
|
.collapsible {
|
|
5
|
-
position: relative;
|
|
6
5
|
--toggle-pad-h: #{base(0.75)};
|
|
7
6
|
--toggle-pad-v: #{base(0.6)};
|
|
8
7
|
|
|
@@ -21,7 +20,7 @@
|
|
|
21
20
|
border-top-left-radius: $style-radius-m;
|
|
22
21
|
width: 100%;
|
|
23
22
|
|
|
24
|
-
&:
|
|
23
|
+
&:hover {
|
|
25
24
|
background: var(--theme-elevation-100);
|
|
26
25
|
}
|
|
27
26
|
|
|
@@ -48,6 +47,7 @@
|
|
|
48
47
|
@extend %btn-reset;
|
|
49
48
|
@extend %body;
|
|
50
49
|
text-align: left;
|
|
50
|
+
cursor: pointer;
|
|
51
51
|
border-top-right-radius: $style-radius-m;
|
|
52
52
|
border-top-left-radius: $style-radius-m;
|
|
53
53
|
width: 100%;
|
|
@@ -57,10 +57,6 @@
|
|
|
57
57
|
top: 0;
|
|
58
58
|
left: 0;
|
|
59
59
|
|
|
60
|
-
&:not(.toggle-disabled) {
|
|
61
|
-
cursor: pointer;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
60
|
span {
|
|
65
61
|
user-select: none;
|
|
66
62
|
}
|
|
@@ -6,14 +6,8 @@ type NavContextType = {
|
|
|
6
6
|
setNavOpen: (value: boolean) => void;
|
|
7
7
|
shouldAnimate: boolean;
|
|
8
8
|
};
|
|
9
|
-
/**
|
|
10
|
-
* @internal
|
|
11
|
-
*/
|
|
12
9
|
export declare const NavContext: React.Context<NavContextType>;
|
|
13
10
|
export declare const useNav: () => NavContextType;
|
|
14
|
-
/**
|
|
15
|
-
* @internal
|
|
16
|
-
*/
|
|
17
11
|
export declare const NavProvider: React.FC<{
|
|
18
12
|
children: React.ReactNode;
|
|
19
13
|
initialIsOpen?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,aAAa,EAAE,OAAO,CAAA;CACvB,CAAA;AAED
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,aAAa,EAAE,OAAO,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,UAAU,+BAMrB,CAAA;AAEF,eAAO,MAAM,MAAM,sBAA8B,CAAA;AAYjD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAkFA,CAAA"}
|
|
@@ -5,9 +5,6 @@ import { useWindowInfo } from '@faceless-ui/window-info';
|
|
|
5
5
|
import { usePathname } from 'next/navigation.js';
|
|
6
6
|
import React, { useEffect, useRef } from 'react';
|
|
7
7
|
import { usePreferences } from '../../providers/Preferences/index.js';
|
|
8
|
-
/**
|
|
9
|
-
* @internal
|
|
10
|
-
*/
|
|
11
8
|
export const NavContext = /*#__PURE__*/React.createContext({
|
|
12
9
|
hydrated: false,
|
|
13
10
|
navOpen: true,
|
|
@@ -25,9 +22,6 @@ const getNavPreference = async getPreference => {
|
|
|
25
22
|
return true;
|
|
26
23
|
}
|
|
27
24
|
};
|
|
28
|
-
/**
|
|
29
|
-
* @internal
|
|
30
|
-
*/
|
|
31
25
|
export const NavProvider = ({
|
|
32
26
|
children,
|
|
33
27
|
initialIsOpen
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","names":["useWindowInfo","usePathname","React","useEffect","useRef","usePreferences","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","shouldAnimate","useNav","use","getNavPreference","getPreference","navPrefs","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","pathname","useState","setShouldAnimate","setHydrated","setNavFromPreferences","current","style","overscrollBehavior","timeout","setTimeout","clearTimeout","_jsx","value"],"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { usePathname } from 'next/navigation.js'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePreferences } from '../../providers/Preferences/index.js'\n\ntype NavContextType = {\n hydrated: boolean\n navOpen: boolean\n navRef: React.RefObject<HTMLDivElement | null>\n setNavOpen: (value: boolean) => void\n shouldAnimate: boolean\n}\n\
|
|
1
|
+
{"version":3,"file":"context.js","names":["useWindowInfo","usePathname","React","useEffect","useRef","usePreferences","NavContext","createContext","hydrated","navOpen","navRef","setNavOpen","shouldAnimate","useNav","use","getNavPreference","getPreference","navPrefs","preferredState","open","NavProvider","children","initialIsOpen","breakpoints","l","largeBreak","m","midBreak","s","smallBreak","pathname","useState","setShouldAnimate","setHydrated","setNavFromPreferences","current","style","overscrollBehavior","timeout","setTimeout","clearTimeout","_jsx","value"],"sources":["../../../src/elements/Nav/context.tsx"],"sourcesContent":["'use client'\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { usePathname } from 'next/navigation.js'\nimport React, { useEffect, useRef } from 'react'\n\nimport { usePreferences } from '../../providers/Preferences/index.js'\n\ntype NavContextType = {\n hydrated: boolean\n navOpen: boolean\n navRef: React.RefObject<HTMLDivElement | null>\n setNavOpen: (value: boolean) => void\n shouldAnimate: boolean\n}\n\nexport const NavContext = React.createContext<NavContextType>({\n hydrated: false,\n navOpen: true,\n navRef: null,\n setNavOpen: () => {},\n shouldAnimate: false,\n})\n\nexport const useNav = () => React.use(NavContext)\n\nconst getNavPreference = async (getPreference): Promise<boolean> => {\n const navPrefs = await getPreference('nav')\n const preferredState = navPrefs?.open\n if (typeof preferredState === 'boolean') {\n return preferredState\n } else {\n return true\n }\n}\n\nexport const NavProvider: React.FC<{\n children: React.ReactNode\n initialIsOpen?: boolean\n}> = ({ children, initialIsOpen }) => {\n const {\n breakpoints: { l: largeBreak, m: midBreak, s: smallBreak },\n } = useWindowInfo()\n\n const pathname = usePathname()\n\n const { getPreference } = usePreferences()\n const navRef = useRef(null)\n\n // initialize the nav to be closed\n // this is because getting the preference is async\n // so instead of closing it after the preference is loaded\n // we will open it after the preference is loaded\n const [navOpen, setNavOpen] = React.useState(initialIsOpen)\n\n const [shouldAnimate, setShouldAnimate] = React.useState(false)\n const [hydrated, setHydrated] = React.useState(false)\n\n // on load check the user's preference and set \"initial\" state\n useEffect(() => {\n if (largeBreak === false) {\n const setNavFromPreferences = async () => {\n const preferredState = await getNavPreference(getPreference)\n setNavOpen(preferredState)\n }\n\n void setNavFromPreferences()\n }\n }, [largeBreak, getPreference, setNavOpen])\n\n // on smaller screens where the nav is a modal\n // close the nav when the user navigates away\n useEffect(() => {\n if (smallBreak === true) {\n setNavOpen(false)\n }\n }, [pathname])\n\n // on open and close, lock the body scroll\n // do not do this on desktop, the sidebar is not a modal\n useEffect(() => {\n if (navRef.current) {\n if (navOpen && midBreak) {\n navRef.current.style.overscrollBehavior = 'contain'\n } else {\n navRef.current.style.overscrollBehavior = 'auto'\n }\n }\n }, [navOpen, midBreak])\n\n // on smaller screens where the nav is a modal\n // close the nav when the user resizes down to mobile\n // the sidebar is a modal on mobile\n useEffect(() => {\n if (largeBreak === true || midBreak === true || smallBreak === true) {\n setNavOpen(false)\n }\n setHydrated(true)\n\n const timeout = setTimeout(() => {\n setShouldAnimate(true)\n }, 100)\n return () => {\n clearTimeout(timeout)\n }\n }, [largeBreak, midBreak, smallBreak])\n\n // when the component unmounts, clear all body scroll locks\n useEffect(() => {\n return () => {\n if (navRef.current) {\n navRef.current.style.overscrollBehavior = 'auto'\n }\n }\n }, [])\n\n return (\n <NavContext value={{ hydrated, navOpen, navRef, setNavOpen, shouldAnimate }}>\n {children}\n </NavContext>\n )\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,9 +2,6 @@ import type { ClientCollectionConfig, PaginatedDocs } from 'payload';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import type { IListQueryContext } from '../../providers/ListQuery/types.js';
|
|
4
4
|
import './index.scss';
|
|
5
|
-
/**
|
|
6
|
-
* @internal
|
|
7
|
-
*/
|
|
8
5
|
export declare const PageControlsComponent: React.FC<{
|
|
9
6
|
AfterPageControls?: React.ReactNode;
|
|
10
7
|
collectionConfig: ClientCollectionConfig;
|
|
@@ -13,12 +10,6 @@ export declare const PageControlsComponent: React.FC<{
|
|
|
13
10
|
handlePerPageChange?: IListQueryContext['handlePerPageChange'];
|
|
14
11
|
limit?: number;
|
|
15
12
|
}>;
|
|
16
|
-
/**
|
|
17
|
-
* These page controls are controlled by the global ListQuery state.
|
|
18
|
-
* To override thi behavior, build your own wrapper around PageControlsComponent.
|
|
19
|
-
*
|
|
20
|
-
* @internal
|
|
21
|
-
*/
|
|
22
13
|
export declare const PageControls: React.FC<{
|
|
23
14
|
AfterPageControls?: React.ReactNode;
|
|
24
15
|
collectionConfig: ClientCollectionConfig;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PageControls/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PageControls/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGpE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,IAAI,EAAE,aAAa,CAAA;IACnB,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAA;IACxD,mBAAmB,CAAC,EAAE,iBAAiB,CAAC,qBAAqB,CAAC,CAAA;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CA2CA,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,gBAAgB,EAAE,sBAAsB,CAAA;CACzC,CAmBA,CAAA"}
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { c as _c } from "react/compiler-runtime";
|
|
4
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
2
|
import { isNumber } from 'payload/shared';
|
|
6
3
|
import React, { Fragment } from 'react';
|
|
@@ -10,81 +7,50 @@ import { useListQuery } from '../../providers/ListQuery/context.js';
|
|
|
10
7
|
import { useTranslation } from '../../providers/Translation/index.js';
|
|
11
8
|
import './index.scss';
|
|
12
9
|
const baseClass = 'page-controls';
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
data,
|
|
22
|
-
handlePageChange,
|
|
23
|
-
handlePerPageChange,
|
|
24
|
-
limit
|
|
25
|
-
} = t0;
|
|
10
|
+
export const PageControlsComponent = ({
|
|
11
|
+
AfterPageControls,
|
|
12
|
+
collectionConfig,
|
|
13
|
+
data,
|
|
14
|
+
handlePageChange,
|
|
15
|
+
handlePerPageChange,
|
|
16
|
+
limit
|
|
17
|
+
}) => {
|
|
26
18
|
const {
|
|
27
19
|
i18n
|
|
28
20
|
} = useTranslation();
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
children: [
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
})]
|
|
54
|
-
});
|
|
55
|
-
$[0] = AfterPageControls;
|
|
56
|
-
$[1] = collectionConfig?.admin?.pagination?.limits;
|
|
57
|
-
$[2] = data.hasNextPage;
|
|
58
|
-
$[3] = data.hasPrevPage;
|
|
59
|
-
$[4] = data.limit;
|
|
60
|
-
$[5] = data.nextPage;
|
|
61
|
-
$[6] = data.page;
|
|
62
|
-
$[7] = data.pagingCounter;
|
|
63
|
-
$[8] = data.prevPage;
|
|
64
|
-
$[9] = data.totalDocs;
|
|
65
|
-
$[10] = data.totalPages;
|
|
66
|
-
$[11] = handlePageChange;
|
|
67
|
-
$[12] = handlePerPageChange;
|
|
68
|
-
$[13] = i18n;
|
|
69
|
-
$[14] = limit;
|
|
70
|
-
$[15] = t1;
|
|
71
|
-
} else {
|
|
72
|
-
t1 = $[15];
|
|
73
|
-
}
|
|
74
|
-
return t1;
|
|
21
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
22
|
+
className: baseClass,
|
|
23
|
+
children: [/*#__PURE__*/_jsx(Pagination, {
|
|
24
|
+
hasNextPage: data.hasNextPage,
|
|
25
|
+
hasPrevPage: data.hasPrevPage,
|
|
26
|
+
limit: data.limit,
|
|
27
|
+
nextPage: data.nextPage,
|
|
28
|
+
numberOfNeighbors: 1,
|
|
29
|
+
onChange: handlePageChange,
|
|
30
|
+
page: data.page,
|
|
31
|
+
prevPage: data.prevPage,
|
|
32
|
+
totalPages: data.totalPages
|
|
33
|
+
}), data.totalDocs > 0 && /*#__PURE__*/_jsxs(Fragment, {
|
|
34
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
35
|
+
className: `${baseClass}__page-info`,
|
|
36
|
+
children: [data.page * data.limit - (data.limit - 1), "-", data.totalPages > 1 && data.totalPages !== data.page ? data.limit * data.page : data.totalDocs, ' ', i18n.t('general:of'), " ", data.totalDocs]
|
|
37
|
+
}), /*#__PURE__*/_jsx(PerPage, {
|
|
38
|
+
handleChange: handlePerPageChange,
|
|
39
|
+
limit: limit,
|
|
40
|
+
limits: collectionConfig?.admin?.pagination?.limits,
|
|
41
|
+
resetPage: data.totalDocs <= data.pagingCounter
|
|
42
|
+
}), AfterPageControls]
|
|
43
|
+
})]
|
|
44
|
+
});
|
|
75
45
|
};
|
|
76
|
-
|
|
46
|
+
/*
|
|
77
47
|
* These page controls are controlled by the global ListQuery state.
|
|
78
48
|
* To override thi behavior, build your own wrapper around PageControlsComponent.
|
|
79
|
-
*
|
|
80
|
-
* @internal
|
|
81
49
|
*/
|
|
82
|
-
export const PageControls =
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
collectionConfig
|
|
87
|
-
} = t0;
|
|
50
|
+
export const PageControls = ({
|
|
51
|
+
AfterPageControls,
|
|
52
|
+
collectionConfig
|
|
53
|
+
}) => {
|
|
88
54
|
const {
|
|
89
55
|
data,
|
|
90
56
|
defaultLimit: initialLimit,
|
|
@@ -92,35 +58,13 @@ export const PageControls = t0 => {
|
|
|
92
58
|
handlePerPageChange,
|
|
93
59
|
query
|
|
94
60
|
} = useListQuery();
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
let t2;
|
|
105
|
-
if ($[3] !== AfterPageControls || $[4] !== collectionConfig || $[5] !== data || $[6] !== handlePageChange || $[7] !== handlePerPageChange || $[8] !== t1) {
|
|
106
|
-
t2 = _jsx(PageControlsComponent, {
|
|
107
|
-
AfterPageControls,
|
|
108
|
-
collectionConfig,
|
|
109
|
-
data,
|
|
110
|
-
handlePageChange,
|
|
111
|
-
handlePerPageChange,
|
|
112
|
-
limit: t1
|
|
113
|
-
});
|
|
114
|
-
$[3] = AfterPageControls;
|
|
115
|
-
$[4] = collectionConfig;
|
|
116
|
-
$[5] = data;
|
|
117
|
-
$[6] = handlePageChange;
|
|
118
|
-
$[7] = handlePerPageChange;
|
|
119
|
-
$[8] = t1;
|
|
120
|
-
$[9] = t2;
|
|
121
|
-
} else {
|
|
122
|
-
t2 = $[9];
|
|
123
|
-
}
|
|
124
|
-
return t2;
|
|
61
|
+
return /*#__PURE__*/_jsx(PageControlsComponent, {
|
|
62
|
+
AfterPageControls: AfterPageControls,
|
|
63
|
+
collectionConfig: collectionConfig,
|
|
64
|
+
data: data,
|
|
65
|
+
handlePageChange: handlePageChange,
|
|
66
|
+
handlePerPageChange: handlePerPageChange,
|
|
67
|
+
limit: isNumber(query.limit) ? query.limit : initialLimit
|
|
68
|
+
});
|
|
125
69
|
};
|
|
126
70
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["isNumber","React","Fragment","Pagination","PerPage","useListQuery","useTranslation","baseClass","PageControlsComponent","AfterPageControls","collectionConfig","data","handlePageChange","handlePerPageChange","limit","i18n","_jsxs","className","_jsx","hasNextPage","hasPrevPage","nextPage","numberOfNeighbors","onChange","page","prevPage","totalPages","totalDocs","t","handleChange","limits","admin","pagination","resetPage","pagingCounter","PageControls","defaultLimit","initialLimit","query"],"sources":["../../../src/elements/PageControls/index.tsx"],"sourcesContent":["import type { ClientCollectionConfig, PaginatedDocs } from 'payload'\n\nimport { isNumber } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nimport type { IListQueryContext } from '../../providers/ListQuery/types.js'\n\nimport { Pagination } from '../../elements/Pagination/index.js'\nimport { PerPage } from '../../elements/PerPage/index.js'\nimport { useListQuery } from '../../providers/ListQuery/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'page-controls'\n\nexport const PageControlsComponent: React.FC<{\n AfterPageControls?: React.ReactNode\n collectionConfig: ClientCollectionConfig\n data: PaginatedDocs\n handlePageChange?: IListQueryContext['handlePageChange']\n handlePerPageChange?: IListQueryContext['handlePerPageChange']\n limit?: number\n}> = ({\n AfterPageControls,\n collectionConfig,\n data,\n handlePageChange,\n handlePerPageChange,\n limit,\n}) => {\n const { i18n } = useTranslation()\n\n return (\n <div className={baseClass}>\n <Pagination\n hasNextPage={data.hasNextPage}\n hasPrevPage={data.hasPrevPage}\n limit={data.limit}\n nextPage={data.nextPage}\n numberOfNeighbors={1}\n onChange={handlePageChange}\n page={data.page}\n prevPage={data.prevPage}\n totalPages={data.totalPages}\n />\n {data.totalDocs > 0 && (\n <Fragment>\n <div className={`${baseClass}__page-info`}>\n {data.page * data.limit - (data.limit - 1)}-\n {data.totalPages > 1 && data.totalPages !== data.page\n ? data.limit * data.page\n : data.totalDocs}{' '}\n {i18n.t('general:of')} {data.totalDocs}\n </div>\n <PerPage\n handleChange={handlePerPageChange}\n limit={limit}\n limits={collectionConfig?.admin?.pagination?.limits}\n resetPage={data.totalDocs <= data.pagingCounter}\n />\n {AfterPageControls}\n </Fragment>\n )}\n </div>\n )\n}\n\n/*\n * These page controls are controlled by the global ListQuery state.\n * To override thi behavior, build your own wrapper around PageControlsComponent.\n */\nexport const PageControls: React.FC<{\n AfterPageControls?: React.ReactNode\n collectionConfig: ClientCollectionConfig\n}> = ({ AfterPageControls, collectionConfig }) => {\n const {\n data,\n defaultLimit: initialLimit,\n handlePageChange,\n handlePerPageChange,\n query,\n } = useListQuery()\n\n return (\n <PageControlsComponent\n AfterPageControls={AfterPageControls}\n collectionConfig={collectionConfig}\n data={data}\n handlePageChange={handlePageChange}\n handlePerPageChange={handlePerPageChange}\n limit={isNumber(query.limit) ? query.limit : initialLimit}\n />\n )\n}\n"],"mappings":";AAEA,SAASA,QAAQ,QAAQ;AACzB,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAIhC,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAORA,CAAC;EACJC,iBAAiB;EACjBC,gBAAgB;EAChBC,IAAI;EACJC,gBAAgB;EAChBC,mBAAmB;EACnBC;AAAK,CACN;EACC,MAAM;IAAEC;EAAI,CAAE,GAAGT,cAAA;EAEjB,oBACEU,KAAA,CAAC;IAAIC,SAAA,EAAWV,SAAA;4BACdW,IAAA,CAACf,UAAA;MACCgB,WAAA,EAAaR,IAAA,CAAKQ,WAAW;MAC7BC,WAAA,EAAaT,IAAA,CAAKS,WAAW;MAC7BN,KAAA,EAAOH,IAAA,CAAKG,KAAK;MACjBO,QAAA,EAAUV,IAAA,CAAKU,QAAQ;MACvBC,iBAAA,EAAmB;MACnBC,QAAA,EAAUX,gBAAA;MACVY,IAAA,EAAMb,IAAA,CAAKa,IAAI;MACfC,QAAA,EAAUd,IAAA,CAAKc,QAAQ;MACvBC,UAAA,EAAYf,IAAA,CAAKe;QAElBf,IAAA,CAAKgB,SAAS,GAAG,kBAChBX,KAAA,CAACd,QAAA;8BACCc,KAAA,CAAC;QAAIC,SAAA,EAAW,GAAGV,SAAA,aAAsB;mBACtCI,IAAA,CAAKa,IAAI,GAAGb,IAAA,CAAKG,KAAK,IAAIH,IAAA,CAAKG,KAAK,GAAG,IAAG,KAC1CH,IAAA,CAAKe,UAAU,GAAG,KAAKf,IAAA,CAAKe,UAAU,KAAKf,IAAA,CAAKa,IAAI,GACjDb,IAAA,CAAKG,KAAK,GAAGH,IAAA,CAAKa,IAAI,GACtBb,IAAA,CAAKgB,SAAS,EAAE,KACnBZ,IAAA,CAAKa,CAAC,CAAC,eAAc,KAAEjB,IAAA,CAAKgB,SAAS;uBAExCT,IAAA,CAACd,OAAA;QACCyB,YAAA,EAAchB,mBAAA;QACdC,KAAA,EAAOA,KAAA;QACPgB,MAAA,EAAQpB,gBAAA,EAAkBqB,KAAA,EAAOC,UAAA,EAAYF,MAAA;QAC7CG,SAAA,EAAWtB,IAAA,CAAKgB,SAAS,IAAIhB,IAAA,CAAKuB;UAEnCzB,iBAAA;;;AAKX;AAEA;;;;AAIA,OAAO,MAAM0B,YAAA,GAGRA,CAAC;EAAE1B,iBAAiB;EAAEC;AAAgB,CAAE;EAC3C,MAAM;IACJC,IAAI;IACJyB,YAAA,EAAcC,YAAY;IAC1BzB,gBAAgB;IAChBC,mBAAmB;IACnByB;EAAK,CACN,GAAGjC,YAAA;EAEJ,oBACEa,IAAA,CAACV,qBAAA;IACCC,iBAAA,EAAmBA,iBAAA;IACnBC,gBAAA,EAAkBA,gBAAA;IAClBC,IAAA,EAAMA,IAAA;IACNC,gBAAA,EAAkBA,gBAAA;IAClBC,mBAAA,EAAqBA,mBAAA;IACrBC,KAAA,EAAOd,QAAA,CAASsC,KAAA,CAAMxB,KAAK,IAAIwB,KAAA,CAAMxB,KAAK,GAAGuB;;AAGnD","ignoreList":[]}
|