@payloadcms/next 3.0.0-beta.114 → 3.0.0-beta.115

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/elements/DocumentHeader/Tabs/Tab/index.scss +70 -68
  2. package/dist/elements/DocumentHeader/Tabs/index.scss +41 -39
  3. package/dist/elements/DocumentHeader/index.scss +44 -42
  4. package/dist/elements/DocumentLocked/index.scss +28 -26
  5. package/dist/elements/DocumentTakeOver/index.scss +28 -26
  6. package/dist/elements/FormHeader/index.scss +7 -5
  7. package/dist/elements/LeaveWithoutSaving/index.scss +28 -26
  8. package/dist/elements/Nav/NavWrapper/index.scss +20 -18
  9. package/dist/elements/Nav/index.scss +127 -125
  10. package/dist/prod/styles.css +1 -1
  11. package/dist/templates/Default/Wrapper/index.scss +38 -36
  12. package/dist/templates/Default/index.scss +60 -58
  13. package/dist/templates/Minimal/index.scss +22 -20
  14. package/dist/views/API/RenderJSON/index.scss +68 -66
  15. package/package.json +6 -6
package/dist/templates/Default/Wrapper/index.scss CHANGED
@@ -1,55 +1,57 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .template-default {
4
- min-height: 100vh;
5
- display: grid;
6
- position: relative;
7
- isolation: isolate;
8
-
9
- @media (prefers-reduced-motion) {
10
- transition: none;
11
- }
12
-
13
- &--nav-animate {
14
- transition: grid-template-columns var(--nav-trans-time) linear;
15
- }
3
+ @layer payload-default {
4
+ .template-default {
5
+ min-height: 100vh;
6
+ display: grid;
7
+ position: relative;
8
+ isolation: isolate;
16
9
 
17
- &--nav-open {
18
- .template-default {
19
- &__nav-overlay {
20
- transition: opacity var(--nav-trans-time) linear;
21
- }
10
+ @media (prefers-reduced-motion) {
11
+ transition: none;
22
12
  }
23
- }
24
- }
25
13
 
26
- @media (min-width: 1441px) {
27
- .template-default {
28
- grid-template-columns: 0 auto;
14
+ &--nav-animate {
15
+ transition: grid-template-columns var(--nav-trans-time) linear;
16
+ }
29
17
 
30
18
  &--nav-open {
31
- grid-template-columns: var(--nav-width) auto;
19
+ .template-default {
20
+ &__nav-overlay {
21
+ transition: opacity var(--nav-trans-time) linear;
22
+ }
23
+ }
32
24
  }
33
25
  }
34
- }
35
26
 
36
- @media (max-width: 1440px) {
37
- .template-default--nav-hydrated.template-default--nav-open {
38
- grid-template-columns: var(--nav-width) auto;
39
- }
27
+ @media (min-width: 1441px) {
28
+ .template-default {
29
+ grid-template-columns: 0 auto;
40
30
 
41
- .template-default {
42
- grid-template-columns: 1fr auto;
31
+ &--nav-open {
32
+ grid-template-columns: var(--nav-width) auto;
33
+ }
34
+ }
35
+ }
43
36
 
44
- .nav {
45
- display: none;
37
+ @media (max-width: 1440px) {
38
+ .template-default--nav-hydrated.template-default--nav-open {
39
+ grid-template-columns: var(--nav-width) auto;
46
40
  }
47
41
 
48
- &--nav-hydrated {
49
- grid-template-columns: 0 auto;
42
+ .template-default {
43
+ grid-template-columns: 1fr auto;
50
44
 
51
45
  .nav {
52
- display: unset;
46
+ display: none;
47
+ }
48
+
49
+ &--nav-hydrated {
50
+ grid-template-columns: 0 auto;
51
+
52
+ .nav {
53
+ display: unset;
54
+ }
53
55
  }
54
56
  }
55
57
  }
package/dist/templates/Default/index.scss CHANGED
@@ -1,76 +1,78 @@
1
1
  @import '../../scss/styles.scss';
2
2
 
3
- .template-default {
4
- background-color: var(--theme-bg);
5
- color: var(--theme-text);
3
+ @layer payload-default {
4
+ .template-default {
5
+ background-color: var(--theme-bg);
6
+ color: var(--theme-text);
6
7
 
7
- [dir='rtl'] &__nav-toggler-wrapper {
8
- left: unset;
9
- right: 0;
10
- }
8
+ [dir='rtl'] &__nav-toggler-wrapper {
9
+ left: unset;
10
+ right: 0;
11
+ }
11
12
 
12
- &__nav-toggler-wrapper {
13
- position: sticky;
14
- z-index: var(--z-modal);
15
- top: 0;
16
- left: 0;
17
- height: 0;
18
- width: var(--gutter-h);
19
- display: flex;
20
- justify-content: center;
21
- }
13
+ &__nav-toggler-wrapper {
14
+ position: sticky;
15
+ z-index: var(--z-modal);
16
+ top: 0;
17
+ left: 0;
18
+ height: 0;
19
+ width: var(--gutter-h);
20
+ display: flex;
21
+ justify-content: center;
22
+ }
22
23
 
23
- &__nav-toggler-container {
24
- height: var(--app-header-height);
25
- display: flex;
26
- align-items: center;
27
- }
24
+ &__nav-toggler-container {
25
+ height: var(--app-header-height);
26
+ display: flex;
27
+ align-items: center;
28
+ }
28
29
 
29
- &__nav-toggler {
30
- display: flex;
31
- align-items: center;
32
- }
30
+ &__nav-toggler {
31
+ display: flex;
32
+ align-items: center;
33
+ }
33
34
 
34
- &__wrap {
35
- min-width: 0;
36
- width: 100%;
37
- flex-grow: 1;
38
- position: relative;
39
- background-color: var(--theme-bg);
40
- &:before {
41
- content: '';
42
- display: block;
43
- position: absolute;
44
- inset: 0;
45
- background-color: inherit;
46
- opacity: 0;
47
- z-index: var(--z-status);
48
- visibility: hidden;
49
- transition: all var(--nav-trans-time) linear;
35
+ &__wrap {
36
+ min-width: 0;
37
+ width: 100%;
38
+ flex-grow: 1;
39
+ position: relative;
40
+ background-color: var(--theme-bg);
41
+ &:before {
42
+ content: '';
43
+ display: block;
44
+ position: absolute;
45
+ inset: 0;
46
+ background-color: inherit;
47
+ opacity: 0;
48
+ z-index: var(--z-status);
49
+ visibility: hidden;
50
+ transition: all var(--nav-trans-time) linear;
51
+ }
50
52
  }
51
- }
52
53
 
53
- @include mid-break {
54
- &__nav-toggler-wrapper {
55
- .hamburger {
56
- left: unset;
54
+ @include mid-break {
55
+ &__nav-toggler-wrapper {
56
+ .hamburger {
57
+ left: unset;
58
+ }
57
59
  }
58
60
  }
59
- }
60
61
 
61
- @include small-break {
62
- &__nav-toggler-wrapper {
63
- width: unset;
64
- justify-content: unset;
62
+ @include small-break {
63
+ &__nav-toggler-wrapper {
64
+ width: unset;
65
+ justify-content: unset;
65
66
 
66
- .hamburger {
67
- display: none;
67
+ .hamburger {
68
+ display: none;
69
+ }
68
70
  }
69
- }
70
71
 
71
- .template-default {
72
- &__wrap {
73
- min-width: 100%;
72
+ .template-default {
73
+ &__wrap {
74
+ min-width: 100%;
75
+ }
74
76
  }
75
77
  }
76
78
  }
package/dist/templates/Minimal/index.scss CHANGED
@@ -1,28 +1,30 @@
1
1
  @import '../../scss/styles';
2
2
 
3
- .template-minimal {
4
- display: flex;
5
- width: 100%;
6
- justify-content: center;
7
- align-items: center;
8
- padding: base(3) $baseline;
9
- margin-left: auto;
10
- margin-right: auto;
11
- min-height: 100%;
12
- background-color: var(--theme-bg-color);
13
- color: var(--theme-text);
3
+ @layer payload-default {
4
+ .template-minimal {
5
+ display: flex;
6
+ width: 100%;
7
+ justify-content: center;
8
+ align-items: center;
9
+ padding: base(3) $baseline;
10
+ margin-left: auto;
11
+ margin-right: auto;
12
+ min-height: 100%;
13
+ background-color: var(--theme-bg-color);
14
+ color: var(--theme-text);
14
15
 
15
- &--width-normal {
16
- .template-minimal__wrap {
17
- max-width: base(24);
18
- width: 100%;
16
+ &--width-normal {
17
+ .template-minimal__wrap {
18
+ max-width: base(24);
19
+ width: 100%;
20
+ }
19
21
  }
20
- }
21
22
 
22
- &--width-wide {
23
- .template-minimal__wrap {
24
- max-width: base(48);
25
- width: 100%;
23
+ &--width-wide {
24
+ .template-minimal__wrap {
25
+ max-width: base(48);
26
+ width: 100%;
27
+ }
26
28
  }
27
29
  }
28
30
  }
package/dist/views/API/RenderJSON/index.scss CHANGED
@@ -1,90 +1,92 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .query-inspector {
4
- &__json-children {
5
- position: relative;
3
+ @layer payload-default {
4
+ .query-inspector {
5
+ &__json-children {
6
+ position: relative;
6
7
 
7
- &:before {
8
- content: '';
9
- position: absolute;
10
- top: 0;
11
- left: 8px;
12
- width: 1px;
13
- height: 100%;
14
- border-left: 1px dashed var(--theme-elevation-200);
8
+ &:before {
9
+ content: '';
10
+ position: absolute;
11
+ top: 0;
12
+ left: 8px;
13
+ width: 1px;
14
+ height: 100%;
15
+ border-left: 1px dashed var(--theme-elevation-200);
16
+ }
15
17
  }
16
- }
17
18
 
18
- &__list-wrap {
19
- position: relative;
20
- }
19
+ &__list-wrap {
20
+ position: relative;
21
+ }
21
22
 
22
- &__list-toggle {
23
- all: unset;
24
- width: 100%;
25
- text-align: left;
26
- cursor: pointer;
27
- border-radius: 3px;
28
- border-top-right-radius: 0;
29
- border-bottom-right-radius: 0;
30
- position: relative;
31
- display: flex;
32
- gap: 10px;
33
- align-items: center;
34
- left: -3px;
35
- width: calc(100% + 3px);
23
+ &__list-toggle {
24
+ all: unset;
25
+ width: 100%;
26
+ text-align: left;
27
+ cursor: pointer;
28
+ border-radius: 3px;
29
+ border-top-right-radius: 0;
30
+ border-bottom-right-radius: 0;
31
+ position: relative;
32
+ display: flex;
33
+ gap: 10px;
34
+ align-items: center;
35
+ left: -3px;
36
+ width: calc(100% + 3px);
36
37
 
37
- svg {
38
- margin-left: 5px;
39
- }
38
+ svg {
39
+ margin-left: 5px;
40
+ }
40
41
 
41
- svg .stroke {
42
- stroke: var(--theme-elevation-400);
43
- }
42
+ svg .stroke {
43
+ stroke: var(--theme-elevation-400);
44
+ }
44
45
 
45
- &:hover {
46
- background-color: var(--theme-elevation-100);
47
- }
46
+ &:hover {
47
+ background-color: var(--theme-elevation-100);
48
+ }
48
49
 
49
- &--empty {
50
- cursor: default;
51
- pointer-events: none;
50
+ &--empty {
51
+ cursor: default;
52
+ pointer-events: none;
53
+ }
52
54
  }
53
- }
54
55
 
55
- &__toggle-row-icon {
56
- &--open {
57
- transform: rotate(0deg);
58
- }
59
- &--closed {
60
- transform: rotate(-90deg);
56
+ &__toggle-row-icon {
57
+ &--open {
58
+ transform: rotate(0deg);
59
+ }
60
+ &--closed {
61
+ transform: rotate(-90deg);
62
+ }
61
63
  }
62
- }
63
64
 
64
- &__value-type {
65
- &--number {
66
- .query-inspector__value {
67
- color: var(--number-color);
65
+ &__value-type {
66
+ &--number {
67
+ .query-inspector__value {
68
+ color: var(--number-color);
69
+ }
68
70
  }
69
- }
70
71
 
71
- &--string {
72
- .query-inspector__value {
73
- color: var(--string-color);
72
+ &--string {
73
+ .query-inspector__value {
74
+ color: var(--string-color);
75
+ }
74
76
  }
75
77
  }
76
- }
77
78
 
78
- &__row-line--nested {
79
- margin-left: 25px;
80
- }
79
+ &__row-line--nested {
80
+ margin-left: 25px;
81
+ }
81
82
 
82
- &__bracket {
83
- position: relative;
83
+ &__bracket {
84
+ position: relative;
84
85
 
85
- &--position-end {
86
- left: 5px;
87
- width: calc(100% - 5px);
86
+ &--position-end {
87
+ left: 5px;
88
+ width: calc(100% - 5px);
89
+ }
88
90
  }
89
91
  }
90
92
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payloadcms/next",
3
- "version": "3.0.0-beta.114",
3
+ "version": "3.0.0-beta.115",
4
4
  "homepage": "https://payloadcms.com",
5
5
  "repository": {
6
6
  "type": "git",
@@ -71,9 +71,9 @@
71
71
  "sonner": "^1.5.0",
72
72
  "uuid": "10.0.0",
73
73
  "ws": "^8.16.0",
74
- "@payloadcms/translations": "3.0.0-beta.114",
75
- "@payloadcms/graphql": "3.0.0-beta.114",
76
- "@payloadcms/ui": "3.0.0-beta.114"
74
+ "@payloadcms/graphql": "3.0.0-beta.115",
75
+ "@payloadcms/translations": "3.0.0-beta.115",
76
+ "@payloadcms/ui": "3.0.0-beta.115"
77
77
  },
78
78
  "devDependencies": {
79
79
  "@babel/cli": "^7.24.5",
@@ -92,13 +92,13 @@
92
92
  "esbuild-sass-plugin": "3.3.1",
93
93
  "eslint-plugin-react-compiler": "0.0.0-experimental-7670337-20240918",
94
94
  "swc-plugin-transform-remove-imports": "1.15.0",
95
- "payload": "3.0.0-beta.114",
95
+ "payload": "3.0.0-beta.115",
96
96
  "@payloadcms/eslint-config": "3.0.0-beta.112"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "graphql": "^16.8.1",
100
100
  "next": "^15.0.0-canary.173",
101
- "payload": "3.0.0-beta.114"
101
+ "payload": "3.0.0-beta.115"
102
102
  },
103
103
  "engines": {
104
104
  "node": "^18.20.2 || >=20.9.0"