@payloadcms/ui 3.0.0-beta.111 → 3.0.0-beta.113

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 (169) hide show
  1. package/dist/elements/AddNewRelation/index.scss +36 -34
  2. package/dist/elements/AppHeader/index.scss +152 -150
  3. package/dist/elements/ArrayAction/index.scss +23 -21
  4. package/dist/elements/Autosave/index.scss +4 -2
  5. package/dist/elements/Banner/index.scss +51 -49
  6. package/dist/elements/BulkUpload/ActionsBar/index.scss +45 -43
  7. package/dist/elements/BulkUpload/AddFilesView/index.scss +23 -21
  8. package/dist/elements/BulkUpload/AddingFilesView/index.scss +16 -14
  9. package/dist/elements/BulkUpload/DrawerCloseButton/index.scss +23 -21
  10. package/dist/elements/BulkUpload/EditForm/index.scss +6 -4
  11. package/dist/elements/BulkUpload/FileSidebar/index.scss +214 -212
  12. package/dist/elements/BulkUpload/Header/index.scss +11 -9
  13. package/dist/elements/Button/index.scss +202 -200
  14. package/dist/elements/Card/index.scss +58 -56
  15. package/dist/elements/CodeEditor/index.scss +16 -14
  16. package/dist/elements/Collapsible/index.scss +125 -123
  17. package/dist/elements/ColumnSelector/index.scss +36 -34
  18. package/dist/elements/CopyToClipboard/index.scss +21 -19
  19. package/dist/elements/DatePicker/index.scss +309 -307
  20. package/dist/elements/DeleteDocument/index.scss +32 -30
  21. package/dist/elements/DeleteMany/index.scss +29 -27
  22. package/dist/elements/DocumentControls/index.js +1 -1
  23. package/dist/elements/DocumentControls/index.js.map +1 -1
  24. package/dist/elements/DocumentControls/index.scss +190 -188
  25. package/dist/elements/DocumentDrawer/index.scss +55 -53
  26. package/dist/elements/DocumentFields/index.scss +144 -142
  27. package/dist/elements/Drawer/index.scss +111 -109
  28. package/dist/elements/Dropzone/index.scss +32 -30
  29. package/dist/elements/DuplicateDocument/index.scss +31 -29
  30. package/dist/elements/EditMany/index.scss +162 -160
  31. package/dist/elements/EditUpload/index.scss +180 -178
  32. package/dist/elements/ErrorPill/index.scss +27 -25
  33. package/dist/elements/FieldSelect/index.scss +4 -2
  34. package/dist/elements/FileDetails/DraggableFileDetails/index.scss +25 -23
  35. package/dist/elements/FileDetails/FileMeta/index.scss +21 -19
  36. package/dist/elements/FileDetails/StaticFileDetails/index.scss +104 -102
  37. package/dist/elements/GenerateConfirmation/index.scss +29 -27
  38. package/dist/elements/Gutter/index.scss +14 -12
  39. package/dist/elements/Hamburger/index.scss +38 -36
  40. package/dist/elements/IDLabel/index.scss +11 -9
  41. package/dist/elements/ListControls/index.scss +71 -69
  42. package/dist/elements/ListDrawer/index.scss +93 -91
  43. package/dist/elements/ListHeader/index.scss +9 -7
  44. package/dist/elements/ListSelection/index.scss +14 -12
  45. package/dist/elements/Loading/index.scss +108 -106
  46. package/dist/elements/Localizer/LocalizerLabel/index.scss +44 -42
  47. package/dist/elements/Localizer/index.scss +7 -5
  48. package/dist/elements/Locked/index.scss +11 -9
  49. package/dist/elements/Nav/NavToggler/index.scss +9 -7
  50. package/dist/elements/NavGroup/index.scss +43 -41
  51. package/dist/elements/Pagination/ClickableArrow/index.scss +34 -32
  52. package/dist/elements/Pagination/index.scss +40 -38
  53. package/dist/elements/PerPage/index.scss +37 -35
  54. package/dist/elements/Pill/index.scss +103 -101
  55. package/dist/elements/Popup/PopupButtonList/index.scss +45 -43
  56. package/dist/elements/Popup/PopupTrigger/index.scss +23 -21
  57. package/dist/elements/Popup/index.scss +185 -183
  58. package/dist/elements/PreviewSizes/index.scss +115 -113
  59. package/dist/elements/PublishMany/index.scss +28 -26
  60. package/dist/elements/ReactSelect/ClearIndicator/index.scss +6 -4
  61. package/dist/elements/ReactSelect/DropdownIndicator/index.scss +11 -9
  62. package/dist/elements/ReactSelect/MultiValue/index.scss +26 -24
  63. package/dist/elements/ReactSelect/MultiValueLabel/index.scss +16 -14
  64. package/dist/elements/ReactSelect/MultiValueRemove/index.scss +20 -18
  65. package/dist/elements/ReactSelect/ValueContainer/index.scss +22 -20
  66. package/dist/elements/ReactSelect/index.d.ts.map +1 -1
  67. package/dist/elements/ReactSelect/index.js +1 -0
  68. package/dist/elements/ReactSelect/index.js.map +1 -1
  69. package/dist/elements/ReactSelect/index.scss +63 -60
  70. package/dist/elements/RelationshipTable/cells/DrawerLink/index.scss +5 -3
  71. package/dist/elements/RelationshipTable/index.scss +21 -19
  72. package/dist/elements/RenderTitle/index.scss +7 -5
  73. package/dist/elements/SearchFilter/index.scss +31 -28
  74. package/dist/elements/SelectAll/index.scss +5 -3
  75. package/dist/elements/SelectRow/index.scss +6 -4
  76. package/dist/elements/ShimmerEffect/index.scss +26 -24
  77. package/dist/elements/SortColumn/index.scss +51 -49
  78. package/dist/elements/SortComplex/index.scss +27 -25
  79. package/dist/elements/Status/index.scss +45 -43
  80. package/dist/elements/StayLoggedIn/index.scss +28 -26
  81. package/dist/elements/StepNav/index.scss +62 -61
  82. package/dist/elements/Table/DefaultCell/fields/Checkbox/index.scss +20 -18
  83. package/dist/elements/Table/DefaultCell/fields/Code/index.scss +22 -20
  84. package/dist/elements/Table/DefaultCell/fields/File/index.scss +18 -16
  85. package/dist/elements/Table/DefaultCell/fields/JSON/index.scss +20 -18
  86. package/dist/elements/Table/index.scss +74 -72
  87. package/dist/elements/Thumbnail/index.scss +37 -35
  88. package/dist/elements/ThumbnailCard/index.scss +31 -29
  89. package/dist/elements/Tooltip/index.scss +77 -75
  90. package/dist/elements/UnpublishMany/index.scss +28 -26
  91. package/dist/elements/Upload/index.scss +122 -120
  92. package/dist/elements/WhereBuilder/Condition/Number/index.scss +4 -2
  93. package/dist/elements/WhereBuilder/Condition/Relationship/index.scss +9 -7
  94. package/dist/elements/WhereBuilder/Condition/Text/index.scss +4 -2
  95. package/dist/elements/WhereBuilder/Condition/index.scss +43 -41
  96. package/dist/elements/WhereBuilder/index.scss +28 -26
  97. package/dist/exports/client/index.d.ts +1 -0
  98. package/dist/exports/client/index.d.ts.map +1 -1
  99. package/dist/exports/client/index.js +7 -7
  100. package/dist/exports/client/index.js.map +3 -3
  101. package/dist/fields/Array/index.scss +74 -72
  102. package/dist/fields/Blocks/BlocksDrawer/BlockSearch/index.scss +25 -23
  103. package/dist/fields/Blocks/BlocksDrawer/index.scss +36 -34
  104. package/dist/fields/Blocks/SectionTitle/index.scss +51 -49
  105. package/dist/fields/Blocks/index.scss +89 -87
  106. package/dist/fields/Checkbox/index.scss +107 -105
  107. package/dist/fields/Code/index.scss +18 -16
  108. package/dist/fields/Collapsible/index.d.ts.map +1 -1
  109. package/dist/fields/Collapsible/index.scss +8 -6
  110. package/dist/fields/ConfirmPassword/index.scss +18 -16
  111. package/dist/fields/DateTime/index.scss +13 -11
  112. package/dist/fields/Email/index.scss +21 -19
  113. package/dist/fields/FieldDescription/index.scss +9 -7
  114. package/dist/fields/FieldError/index.scss +13 -11
  115. package/dist/fields/FieldLabel/index.scss +17 -15
  116. package/dist/fields/Group/index.scss +107 -105
  117. package/dist/fields/JSON/index.scss +11 -9
  118. package/dist/fields/Number/index.scss +19 -17
  119. package/dist/fields/Password/index.scss +18 -16
  120. package/dist/fields/Point/index.scss +33 -31
  121. package/dist/fields/RadioGroup/Radio/index.scss +58 -56
  122. package/dist/fields/RadioGroup/index.scss +57 -55
  123. package/dist/fields/Relationship/index.scss +44 -42
  124. package/dist/fields/Relationship/select-components/MultiValueLabel/index.scss +40 -38
  125. package/dist/fields/Relationship/select-components/SingleValue/index.scss +43 -41
  126. package/dist/fields/Row/index.scss +31 -29
  127. package/dist/fields/Select/index.scss +16 -14
  128. package/dist/fields/Tabs/Tab/index.scss +58 -56
  129. package/dist/fields/Tabs/index.scss +46 -44
  130. package/dist/fields/Text/index.scss +23 -21
  131. package/dist/fields/Textarea/index.scss +89 -87
  132. package/dist/fields/Upload/HasMany/index.scss +20 -18
  133. package/dist/fields/Upload/HasOne/index.scss +5 -3
  134. package/dist/fields/Upload/RelationshipContent/index.scss +44 -42
  135. package/dist/fields/Upload/UploadCard/index.scss +21 -19
  136. package/dist/fields/Upload/index.scss +49 -47
  137. package/dist/forms/Form/index.scss +5 -3
  138. package/dist/forms/RenderFields/index.scss +47 -45
  139. package/dist/forms/Submit/index.scss +5 -3
  140. package/dist/graphics/Account/Default/index.scss +43 -41
  141. package/dist/icons/Calendar/index.scss +8 -6
  142. package/dist/icons/Check/index.scss +9 -7
  143. package/dist/icons/Chevron/index.scss +18 -16
  144. package/dist/icons/CloseMenu/index.scss +7 -5
  145. package/dist/icons/Copy/index.scss +9 -7
  146. package/dist/icons/DragHandle/index.scss +9 -7
  147. package/dist/icons/Edit/index.scss +9 -7
  148. package/dist/icons/Line/index.scss +8 -6
  149. package/dist/icons/Link/index.scss +8 -6
  150. package/dist/icons/Lock/index.scss +6 -4
  151. package/dist/icons/LogOut/index.scss +8 -6
  152. package/dist/icons/Menu/index.scss +6 -4
  153. package/dist/icons/More/index.scss +8 -6
  154. package/dist/icons/Plus/index.scss +6 -4
  155. package/dist/icons/Search/index.scss +8 -6
  156. package/dist/icons/Swap/index.scss +9 -7
  157. package/dist/icons/X/index.scss +6 -4
  158. package/dist/providers/Auth/index.d.ts +9 -4
  159. package/dist/providers/Auth/index.d.ts.map +1 -1
  160. package/dist/providers/Auth/index.js +51 -56
  161. package/dist/providers/Auth/index.js.map +1 -1
  162. package/dist/scss/app.scss +166 -162
  163. package/dist/scss/colors.scss +256 -254
  164. package/dist/scss/resets.scss +9 -7
  165. package/dist/scss/toastify.scss +42 -40
  166. package/dist/scss/toasts.scss +105 -103
  167. package/dist/scss/type.scss +81 -79
  168. package/dist/styles.css +1 -1
  169. package/package.json +5 -5
@@ -1,145 +1,147 @@
1
1
  @import '../../scss/styles.scss';
2
2
 
3
- .preview-sizes {
4
- margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
5
- border-top: 1px solid var(--theme-elevation-150);
6
- max-height: calc(100vh - base(6));
7
- height: 100%;
8
- display: flex;
9
- flex-direction: row;
10
-
11
- &__imageWrap {
12
- min-width: 60%;
13
- border-right: 1px solid var(--theme-elevation-150);
14
- }
3
+ @layer payload-default {
4
+ .preview-sizes {
5
+ margin: base(2) calc(var(--gutter-h) * -1) 0 calc(var(--gutter-h) * -1);
6
+ border-top: 1px solid var(--theme-elevation-150);
7
+ max-height: calc(100vh - base(6));
8
+ height: 100%;
9
+ display: flex;
10
+ flex-direction: row;
15
11
 
16
- &__preview {
17
- max-height: calc(100% - base(6));
18
- padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
19
- object-fit: contain;
20
- }
12
+ &__imageWrap {
13
+ min-width: 60%;
14
+ border-right: 1px solid var(--theme-elevation-150);
15
+ }
21
16
 
22
- &__meta {
23
- border-bottom: 1px solid var(--theme-elevation-150);
24
- padding: base(1) var(--gutter-h);
25
- display: flex;
26
- flex-wrap: wrap;
27
- column-gap: base(1);
17
+ &__preview {
18
+ max-height: calc(100% - base(6));
19
+ padding: base(1.5) base(1.5) base(1.5) var(--gutter-h);
20
+ object-fit: contain;
21
+ }
28
22
 
29
- .file-meta {
23
+ &__meta {
24
+ border-bottom: 1px solid var(--theme-elevation-150);
25
+ padding: base(1) var(--gutter-h);
30
26
  display: flex;
31
27
  flex-wrap: wrap;
32
28
  column-gap: base(1);
33
- text-wrap: wrap;
34
- width: 100%;
35
- }
36
29
 
37
- .file-meta__url {
38
- width: 100%;
30
+ .file-meta {
31
+ display: flex;
32
+ flex-wrap: wrap;
33
+ column-gap: base(1);
34
+ text-wrap: wrap;
35
+ width: 100%;
36
+ }
37
+
38
+ .file-meta__url {
39
+ width: 100%;
40
+ }
39
41
  }
40
- }
41
42
 
42
- &__sizeName,
43
- .file-meta__size-type {
44
- color: var(--theme-elevation-600);
45
- }
46
-
47
- &__listWrap {
48
- padding-right: var(--gutter-h);
49
- overflow-y: scroll;
43
+ &__sizeName,
44
+ .file-meta__size-type {
45
+ color: var(--theme-elevation-600);
46
+ }
50
47
 
51
- &::-webkit-scrollbar {
52
- width: 0;
48
+ &__listWrap {
49
+ padding-right: var(--gutter-h);
50
+ overflow-y: scroll;
51
+
52
+ &::-webkit-scrollbar {
53
+ width: 0;
54
+ }
55
+
56
+ &::after {
57
+ content: '';
58
+ display: block;
59
+ position: sticky;
60
+ bottom: 0;
61
+ left: 0;
62
+ height: base(4);
63
+ width: 100%;
64
+ background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%);
65
+ pointer-events: none;
66
+ }
53
67
  }
54
68
 
55
- &::after {
56
- content: '';
57
- display: block;
58
- position: sticky;
59
- bottom: 0;
60
- left: 0;
61
- height: base(4);
62
- width: 100%;
63
- background: linear-gradient(180deg, transparent 0, var(--theme-bg) 100%);
64
- pointer-events: none;
69
+ &__list {
70
+ list-style: none;
71
+ display: flex;
72
+ flex-direction: column;
73
+ gap: base(0.5);
74
+ margin: 0;
75
+ padding: base(1.5) 0 base(1.5) base(1.5);
65
76
  }
66
- }
67
77
 
68
- &__list {
69
- list-style: none;
70
- display: flex;
71
- flex-direction: column;
72
- gap: base(0.5);
73
- margin: 0;
74
- padding: base(1.5) 0 base(1.5) base(1.5);
75
- }
78
+ &__sizeOption {
79
+ padding: base(0.5);
80
+ display: flex;
81
+ gap: base(1);
82
+ cursor: pointer;
83
+ transition: background-color 0.2s ease-in-out;
76
84
 
77
- &__sizeOption {
78
- padding: base(0.5);
79
- display: flex;
80
- gap: base(1);
81
- cursor: pointer;
82
- transition: background-color 0.2s ease-in-out;
85
+ &:hover {
86
+ background-color: var(--theme-elevation-100);
87
+ }
88
+ }
83
89
 
84
- &:hover {
90
+ &--selected {
85
91
  background-color: var(--theme-elevation-100);
86
92
  }
87
- }
88
-
89
- &--selected {
90
- background-color: var(--theme-elevation-100);
91
- }
92
-
93
- &__image {
94
- display: flex;
95
- width: 30%;
96
- min-width: 30%;
97
- align-items: center;
98
- justify-content: center;
99
- }
100
-
101
- &__sizeMeta {
102
- padding: base(0.5) 0;
103
- }
104
-
105
- &__sizeName,
106
- &__sizeMeta {
107
- overflow: hidden;
108
- text-overflow: ellipsis;
109
- }
110
-
111
- @include mid-break {
112
- margin-top: base(1);
113
- max-height: calc(100vh - base(4));
114
- }
115
93
 
116
- @include small-break {
117
- margin-top: 0;
118
- max-height: calc(100vh - base(3.5));
119
- flex-direction: column;
120
- justify-content: space-between;
121
-
122
- &__imageWrap {
123
- height: 60%;
124
- border: none;
94
+ &__image {
95
+ display: flex;
96
+ width: 30%;
97
+ min-width: 30%;
98
+ align-items: center;
99
+ justify-content: center;
125
100
  }
126
101
 
127
- &__list,
128
- &__preview {
129
- padding: calc(var(--gutter-h) * 2) var(--gutter-h);
102
+ &__sizeMeta {
103
+ padding: base(0.5) 0;
130
104
  }
131
105
 
132
- &__preview {
133
- max-height: calc(100% - base(4));
106
+ &__sizeName,
107
+ &__sizeMeta {
108
+ overflow: hidden;
109
+ text-overflow: ellipsis;
134
110
  }
135
111
 
136
- &__sizeOption {
137
- padding: base(0.25);
112
+ @include mid-break {
113
+ margin-top: base(1);
114
+ max-height: calc(100vh - base(4));
138
115
  }
139
116
 
140
- &__listWrap {
141
- border-top: 1px solid var(--theme-elevation-150);
142
- height: 40%;
117
+ @include small-break {
118
+ margin-top: 0;
119
+ max-height: calc(100vh - base(3.5));
120
+ flex-direction: column;
121
+ justify-content: space-between;
122
+
123
+ &__imageWrap {
124
+ height: 60%;
125
+ border: none;
126
+ }
127
+
128
+ &__list,
129
+ &__preview {
130
+ padding: calc(var(--gutter-h) * 2) var(--gutter-h);
131
+ }
132
+
133
+ &__preview {
134
+ max-height: calc(100% - base(4));
135
+ }
136
+
137
+ &__sizeOption {
138
+ padding: base(0.25);
139
+ }
140
+
141
+ &__listWrap {
142
+ border-top: 1px solid var(--theme-elevation-150);
143
+ height: 40%;
144
+ }
143
145
  }
144
146
  }
145
147
  }
@@ -1,37 +1,39 @@
1
1
  @import '../../scss/styles.scss';
2
2
 
3
- .publish-many {
4
- @include blur-bg;
5
- display: flex;
6
- align-items: center;
7
- justify-content: center;
8
- height: 100%;
9
-
10
- &__wrapper {
11
- z-index: 1;
12
- position: relative;
3
+ @layer payload-default {
4
+ .publish-many {
5
+ @include blur-bg;
13
6
  display: flex;
14
- flex-direction: column;
15
- gap: base(0.8);
16
- padding: base(2);
17
- }
7
+ align-items: center;
8
+ justify-content: center;
9
+ height: 100%;
18
10
 
19
- &__content {
20
- display: flex;
21
- flex-direction: column;
22
- gap: base(0.4);
11
+ &__wrapper {
12
+ z-index: 1;
13
+ position: relative;
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: base(0.8);
17
+ padding: base(2);
18
+ }
23
19
 
24
- > * {
25
- margin: 0;
20
+ &__content {
21
+ display: flex;
22
+ flex-direction: column;
23
+ gap: base(0.4);
24
+
25
+ > * {
26
+ margin: 0;
27
+ }
26
28
  }
27
- }
28
29
 
29
- &__controls {
30
- display: flex;
31
- gap: base(0.4);
30
+ &__controls {
31
+ display: flex;
32
+ gap: base(0.4);
32
33
 
33
- .btn {
34
- margin: 0;
34
+ .btn {
35
+ margin: 0;
36
+ }
35
37
  }
36
38
  }
37
39
  }
@@ -1,9 +1,11 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .clear-indicator {
4
- cursor: pointer;
3
+ @layer payload-default {
4
+ .clear-indicator {
5
+ cursor: pointer;
5
6
 
6
- &:focus-visible {
7
- outline: var(--accessibility-outline);
7
+ &:focus-visible {
8
+ outline: var(--accessibility-outline);
9
+ }
8
10
  }
9
11
  }
@@ -1,16 +1,18 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .dropdown-indicator {
4
- cursor: pointer;
5
- @include btn-reset;
3
+ @layer payload-default {
4
+ .dropdown-indicator {
5
+ cursor: pointer;
6
+ @include btn-reset;
6
7
 
7
- &:focus-visible {
8
- outline: var(--accessibility-outline);
9
- }
8
+ &:focus-visible {
9
+ outline: var(--accessibility-outline);
10
+ }
10
11
 
11
- &__icon {
12
- .stroke {
13
- stroke-width: 1px;
12
+ &__icon {
13
+ .stroke {
14
+ stroke-width: 1px;
15
+ }
14
16
  }
15
17
  }
16
18
  }
@@ -1,37 +1,39 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .multi-value {
4
- &.rs__multi-value {
5
- display: flex;
6
- padding: 0;
7
- border: 1px solid var(--theme-border-color);
8
- border-radius: var(--style-radius-s);
9
- line-height: calc(#{$baseline} - 2px);
10
- margin: base(0.25) base(0.5) base(0.25) 0;
11
- transition: border 0.2s cubic-bezier(0.2, 0, 0, 1);
3
+ @layer payload-default {
4
+ .multi-value {
5
+ &.rs__multi-value {
6
+ display: flex;
7
+ padding: 0;
8
+ border: 1px solid var(--theme-border-color);
9
+ border-radius: var(--style-radius-s);
10
+ line-height: calc(#{$baseline} - 2px);
11
+ margin: base(0.25) base(0.5) base(0.25) 0;
12
+ transition: border 0.2s cubic-bezier(0.2, 0, 0, 1);
12
13
 
13
- &:hover {
14
- border: 1px solid var(--theme-elevation-250);
14
+ &:hover {
15
+ border: 1px solid var(--theme-elevation-250);
16
+ }
15
17
  }
16
- }
17
18
 
18
- &--is-dragging {
19
- z-index: 2;
19
+ &--is-dragging {
20
+ z-index: 2;
21
+ }
20
22
  }
21
- }
22
23
 
23
- html[data-theme='light'] {
24
- .multi-value {
25
- &.rs__multi-value {
26
- background: var(--theme-elevation-50);
24
+ html[data-theme='light'] {
25
+ .multi-value {
26
+ &.rs__multi-value {
27
+ background: var(--theme-elevation-50);
28
+ }
27
29
  }
28
30
  }
29
- }
30
31
 
31
- html[data-theme='dark'] {
32
- .multi-value {
33
- &.rs__multi-value {
34
- background: var(--theme-elevation-50);
32
+ html[data-theme='dark'] {
33
+ .multi-value {
34
+ &.rs__multi-value {
35
+ background: var(--theme-elevation-50);
36
+ }
35
37
  }
36
38
  }
37
39
  }
@@ -1,20 +1,22 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .multi-value-label {
4
- @extend %small;
5
- display: flex;
6
- align-items: center;
7
- max-width: 150px;
8
- color: currentColor;
9
- padding: 0 base(0.4);
3
+ @layer payload-default {
4
+ .multi-value-label {
5
+ @extend %small;
6
+ display: flex;
7
+ align-items: center;
8
+ max-width: 150px;
9
+ color: currentColor;
10
+ padding: 0 base(0.4);
10
11
 
11
- &__text {
12
- text-overflow: ellipsis;
13
- overflow: hidden;
14
- white-space: nowrap;
15
- }
12
+ &__text {
13
+ text-overflow: ellipsis;
14
+ overflow: hidden;
15
+ white-space: nowrap;
16
+ }
16
17
 
17
- &:focus-visible {
18
- outline: var(--accessibility-outline);
18
+ &:focus-visible {
19
+ outline: var(--accessibility-outline);
20
+ }
19
21
  }
20
22
  }
@@ -1,24 +1,26 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .multi-value-remove {
4
- cursor: pointer;
5
- width: base(1);
6
- display: flex;
7
- align-items: center;
8
- justify-content: center;
9
- position: relative;
10
- background-color: transparent;
11
- border: none;
12
- padding: 0;
13
- color: inherit;
3
+ @layer payload-default {
4
+ .multi-value-remove {
5
+ cursor: pointer;
6
+ width: base(1);
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: center;
10
+ position: relative;
11
+ background-color: transparent;
12
+ border: none;
13
+ padding: 0;
14
+ color: inherit;
14
15
 
15
- &:hover {
16
- color: var(--theme-elevation-800);
17
- background: var(--theme-elevation-150);
18
- }
16
+ &:hover {
17
+ color: var(--theme-elevation-800);
18
+ background: var(--theme-elevation-150);
19
+ }
19
20
 
20
- &__icon {
21
- width: 100%;
22
- height: 100%;
21
+ &__icon {
22
+ width: 100%;
23
+ height: 100%;
24
+ }
23
25
  }
24
26
  }
@@ -1,31 +1,33 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .value-container {
4
- flex-grow: 1;
5
- min-width: 0;
3
+ @layer payload-default {
4
+ .value-container {
5
+ flex-grow: 1;
6
+ min-width: 0;
6
7
 
7
- .rs__value-container {
8
- overflow: visible;
9
- padding: 2px;
10
- gap: 2px;
8
+ .rs__value-container {
9
+ overflow: visible;
10
+ padding: 2px;
11
+ gap: 2px;
11
12
 
12
- > * {
13
- margin: 0;
14
- padding-top: 0;
15
- padding-bottom: 0;
16
- color: currentColor;
17
-
18
- .field-label {
13
+ > * {
14
+ margin: 0;
15
+ padding-top: 0;
19
16
  padding-bottom: 0;
17
+ color: currentColor;
18
+
19
+ .field-label {
20
+ padding-bottom: 0;
21
+ }
20
22
  }
21
- }
22
23
 
23
- &--is-multi {
24
- width: calc(100% + base(0.25));
24
+ &--is-multi {
25
+ width: calc(100% + base(0.25));
25
26
 
26
- &.rs__value-container--has-value {
27
- padding: 0;
28
- margin-inline-start: -4px;
27
+ &.rs__value-container--has-value {
28
+ padding: 0;
29
+ margin-inline-start: -4px;
30
+ }
29
31
  }
30
32
  }
31
33
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAQxC,OAAO,cAAc,CAAA;AAsMrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAQxC,OAAO,cAAc,CAAA;AAuMrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}
@@ -97,6 +97,7 @@ const SelectAdapter = props => {
97
97
  onMenuClose: onMenuClose,
98
98
  onMenuOpen: onMenuOpen,
99
99
  options: options,
100
+ unstyled: true,
100
101
  value: value
101
102
  });
102
103
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["arrayMove","getTranslation","React","useEffect","useId","Select","CreatableSelect","useTranslation","DraggableSortable","ShimmerEffect","ClearIndicator","Control","DropdownIndicator","Input","generateMultiValueDraggableID","MultiValue","MultiValueLabel","MultiValueRemove","SingleValue","ValueContainer","createOption","label","value","SelectAdapter","props","i18n","t","inputValue","setInputValue","useState","uuid","hasMounted","setHasMounted","className","components","customProps","disabled","filterOption","undefined","getOptionValue","isClearable","isCreatable","isLoading","isSearchable","noOptionsMessage","numberOnly","onChange","onMenuClose","onMenuOpen","options","placeholder","showError","loadingMessage","classes","filter","Boolean","join","_jsx","height","captureMenuScroll","classNamePrefix","instanceId","isDisabled","menuPlacement","handleKeyDown","event","acceptableKeys","isNumber","test","key","isActionKey","includes","preventDefault","trim","onInputChange","newValue","onKeyDown","SortableSelect","draggableIDs","Array","isArray","map","optionValue","ids","onDragEnd","moveFromIndex","moveToIndex","sorted","ReactSelect","isMulti","isSortable"],"sources":["../../../src/elements/ReactSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { KeyboardEventHandler } from 'react'\n\nimport { arrayMove } from '@dnd-kit/sortable'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useId } from 'react'\nimport Select from 'react-select'\nimport CreatableSelect from 'react-select/creatable'\n\nimport type { Option, ReactSelectAdapterProps } from './types.js'\nexport type { Option } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { ClearIndicator } from './ClearIndicator/index.js'\nimport { Control } from './Control/index.js'\nimport { DropdownIndicator } from './DropdownIndicator/index.js'\nimport './index.scss'\nimport { Input } from './Input/index.js'\nimport { generateMultiValueDraggableID, MultiValue } from './MultiValue/index.js'\nimport { MultiValueLabel } from './MultiValueLabel/index.js'\nimport { MultiValueRemove } from './MultiValueRemove/index.js'\nimport { SingleValue } from './SingleValue/index.js'\nimport { ValueContainer } from './ValueContainer/index.js'\n\nconst createOption = (label: string) => ({\n label,\n value: label,\n})\n\nconst SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {\n const { i18n, t } = useTranslation()\n const [inputValue, setInputValue] = React.useState('') // for creatable select\n const uuid = useId()\n const [hasMounted, setHasMounted] = React.useState(false)\n\n useEffect(() => {\n setHasMounted(true)\n }, [])\n\n const {\n className,\n components,\n customProps,\n disabled = false,\n filterOption = undefined,\n getOptionValue,\n isClearable = true,\n isCreatable,\n isLoading,\n isSearchable = true,\n noOptionsMessage = () => t('general:noOptions'),\n numberOnly = false,\n onChange,\n onMenuClose,\n onMenuOpen,\n options,\n placeholder = t('general:selectValue'),\n showError,\n value,\n } = props\n\n const loadingMessage = () => t('general:loading') + '...'\n\n const classes = [className, 'react-select', showError && 'react-select--error']\n .filter(Boolean)\n .join(' ')\n\n if (!hasMounted) {\n return <ShimmerEffect height=\"calc(var(--base) * 2 + 2px)\" />\n }\n\n if (!isCreatable) {\n return (\n <Select\n captureMenuScroll\n customProps={customProps}\n isLoading={isLoading}\n placeholder={getTranslation(placeholder, i18n)}\n {...props}\n className={classes}\n classNamePrefix=\"rs\"\n components={{\n ClearIndicator,\n Control,\n DropdownIndicator,\n Input,\n MultiValue,\n MultiValueLabel,\n MultiValueRemove,\n SingleValue,\n ValueContainer,\n ...components,\n }}\n filterOption={filterOption}\n getOptionValue={getOptionValue}\n instanceId={uuid}\n isClearable={isClearable}\n isDisabled={disabled}\n isSearchable={isSearchable}\n loadingMessage={loadingMessage}\n menuPlacement=\"auto\"\n noOptionsMessage={noOptionsMessage}\n onChange={onChange}\n onMenuClose={onMenuClose}\n onMenuOpen={onMenuOpen}\n options={options}\n value={value}\n />\n )\n }\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (numberOnly === true) {\n const acceptableKeys = [\n 'Tab',\n 'Escape',\n 'Backspace',\n 'Enter',\n 'ArrowRight',\n 'ArrowLeft',\n 'ArrowUp',\n 'ArrowDown',\n ]\n const isNumber = !/\\D/.test(event.key)\n const isActionKey = acceptableKeys.includes(event.key)\n if (!isNumber && !isActionKey) {\n event.preventDefault()\n return\n }\n }\n if (!value || !inputValue || inputValue.trim() === '') {\n return\n }\n if (filterOption && !filterOption(null, inputValue)) {\n return\n }\n switch (event.key) {\n case 'Enter':\n case 'Tab':\n onChange([...(value as Option[]), createOption(inputValue)])\n setInputValue('')\n event.preventDefault()\n break\n default:\n break\n }\n }\n\n return (\n <CreatableSelect\n captureMenuScroll\n isLoading={isLoading}\n placeholder={getTranslation(placeholder, i18n)}\n {...props}\n className={classes}\n classNamePrefix=\"rs\"\n components={{\n ClearIndicator,\n Control,\n DropdownIndicator,\n Input,\n MultiValue,\n MultiValueLabel,\n MultiValueRemove,\n SingleValue,\n ValueContainer,\n ...components,\n }}\n filterOption={filterOption}\n inputValue={inputValue}\n instanceId={uuid}\n isClearable={isClearable}\n isDisabled={disabled}\n isSearchable={isSearchable}\n loadingMessage={loadingMessage}\n menuPlacement=\"auto\"\n noOptionsMessage={noOptionsMessage}\n onChange={onChange}\n onInputChange={(newValue) => setInputValue(newValue)}\n onKeyDown={handleKeyDown}\n onMenuClose={onMenuClose}\n onMenuOpen={onMenuOpen}\n options={options}\n value={value}\n />\n )\n}\n\nconst SortableSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n const { getOptionValue, onChange, value } = props\n\n let draggableIDs: string[] = []\n if (value) {\n draggableIDs = (Array.isArray(value) ? value : [value]).map((optionValue) => {\n return generateMultiValueDraggableID(optionValue, getOptionValue)\n })\n }\n\n return (\n <DraggableSortable\n className=\"react-select-container\"\n ids={draggableIDs}\n onDragEnd={({ moveFromIndex, moveToIndex }) => {\n let sorted = value\n if (value && Array.isArray(value)) {\n sorted = arrayMove(value, moveFromIndex, moveToIndex)\n }\n onChange(sorted)\n }}\n >\n <SelectAdapter {...props} />\n </DraggableSortable>\n )\n}\n\nexport const ReactSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n const { isMulti, isSortable } = props\n\n if (isMulti && isSortable) {\n return <SortableSelect {...props} />\n }\n\n return <SelectAdapter {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["arrayMove","getTranslation","React","useEffect","useId","Select","CreatableSelect","useTranslation","DraggableSortable","ShimmerEffect","ClearIndicator","Control","DropdownIndicator","Input","generateMultiValueDraggableID","MultiValue","MultiValueLabel","MultiValueRemove","SingleValue","ValueContainer","createOption","label","value","SelectAdapter","props","i18n","t","inputValue","setInputValue","useState","uuid","hasMounted","setHasMounted","className","components","customProps","disabled","filterOption","undefined","getOptionValue","isClearable","isCreatable","isLoading","isSearchable","noOptionsMessage","numberOnly","onChange","onMenuClose","onMenuOpen","options","placeholder","showError","loadingMessage","classes","filter","Boolean","join","_jsx","height","captureMenuScroll","classNamePrefix","instanceId","isDisabled","menuPlacement","unstyled","handleKeyDown","event","acceptableKeys","isNumber","test","key","isActionKey","includes","preventDefault","trim","onInputChange","newValue","onKeyDown","SortableSelect","draggableIDs","Array","isArray","map","optionValue","ids","onDragEnd","moveFromIndex","moveToIndex","sorted","ReactSelect","isMulti","isSortable"],"sources":["../../../src/elements/ReactSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { KeyboardEventHandler } from 'react'\n\nimport { arrayMove } from '@dnd-kit/sortable'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useId } from 'react'\nimport Select from 'react-select'\nimport CreatableSelect from 'react-select/creatable'\n\nimport type { Option, ReactSelectAdapterProps } from './types.js'\nexport type { Option } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { ClearIndicator } from './ClearIndicator/index.js'\nimport { Control } from './Control/index.js'\nimport { DropdownIndicator } from './DropdownIndicator/index.js'\nimport './index.scss'\nimport { Input } from './Input/index.js'\nimport { generateMultiValueDraggableID, MultiValue } from './MultiValue/index.js'\nimport { MultiValueLabel } from './MultiValueLabel/index.js'\nimport { MultiValueRemove } from './MultiValueRemove/index.js'\nimport { SingleValue } from './SingleValue/index.js'\nimport { ValueContainer } from './ValueContainer/index.js'\n\nconst createOption = (label: string) => ({\n label,\n value: label,\n})\n\nconst SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {\n const { i18n, t } = useTranslation()\n const [inputValue, setInputValue] = React.useState('') // for creatable select\n const uuid = useId()\n const [hasMounted, setHasMounted] = React.useState(false)\n\n useEffect(() => {\n setHasMounted(true)\n }, [])\n\n const {\n className,\n components,\n customProps,\n disabled = false,\n filterOption = undefined,\n getOptionValue,\n isClearable = true,\n isCreatable,\n isLoading,\n isSearchable = true,\n noOptionsMessage = () => t('general:noOptions'),\n numberOnly = false,\n onChange,\n onMenuClose,\n onMenuOpen,\n options,\n placeholder = t('general:selectValue'),\n showError,\n value,\n } = props\n\n const loadingMessage = () => t('general:loading') + '...'\n\n const classes = [className, 'react-select', showError && 'react-select--error']\n .filter(Boolean)\n .join(' ')\n\n if (!hasMounted) {\n return <ShimmerEffect height=\"calc(var(--base) * 2 + 2px)\" />\n }\n\n if (!isCreatable) {\n return (\n <Select\n captureMenuScroll\n customProps={customProps}\n isLoading={isLoading}\n placeholder={getTranslation(placeholder, i18n)}\n {...props}\n className={classes}\n classNamePrefix=\"rs\"\n components={{\n ClearIndicator,\n Control,\n DropdownIndicator,\n Input,\n MultiValue,\n MultiValueLabel,\n MultiValueRemove,\n SingleValue,\n ValueContainer,\n ...components,\n }}\n filterOption={filterOption}\n getOptionValue={getOptionValue}\n instanceId={uuid}\n isClearable={isClearable}\n isDisabled={disabled}\n isSearchable={isSearchable}\n loadingMessage={loadingMessage}\n menuPlacement=\"auto\"\n noOptionsMessage={noOptionsMessage}\n onChange={onChange}\n onMenuClose={onMenuClose}\n onMenuOpen={onMenuOpen}\n options={options}\n unstyled={true}\n value={value}\n />\n )\n }\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (numberOnly === true) {\n const acceptableKeys = [\n 'Tab',\n 'Escape',\n 'Backspace',\n 'Enter',\n 'ArrowRight',\n 'ArrowLeft',\n 'ArrowUp',\n 'ArrowDown',\n ]\n const isNumber = !/\\D/.test(event.key)\n const isActionKey = acceptableKeys.includes(event.key)\n if (!isNumber && !isActionKey) {\n event.preventDefault()\n return\n }\n }\n if (!value || !inputValue || inputValue.trim() === '') {\n return\n }\n if (filterOption && !filterOption(null, inputValue)) {\n return\n }\n switch (event.key) {\n case 'Enter':\n case 'Tab':\n onChange([...(value as Option[]), createOption(inputValue)])\n setInputValue('')\n event.preventDefault()\n break\n default:\n break\n }\n }\n\n return (\n <CreatableSelect\n captureMenuScroll\n isLoading={isLoading}\n placeholder={getTranslation(placeholder, i18n)}\n {...props}\n className={classes}\n classNamePrefix=\"rs\"\n components={{\n ClearIndicator,\n Control,\n DropdownIndicator,\n Input,\n MultiValue,\n MultiValueLabel,\n MultiValueRemove,\n SingleValue,\n ValueContainer,\n ...components,\n }}\n filterOption={filterOption}\n inputValue={inputValue}\n instanceId={uuid}\n isClearable={isClearable}\n isDisabled={disabled}\n isSearchable={isSearchable}\n loadingMessage={loadingMessage}\n menuPlacement=\"auto\"\n noOptionsMessage={noOptionsMessage}\n onChange={onChange}\n onInputChange={(newValue) => setInputValue(newValue)}\n onKeyDown={handleKeyDown}\n onMenuClose={onMenuClose}\n onMenuOpen={onMenuOpen}\n options={options}\n value={value}\n />\n )\n}\n\nconst SortableSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n const { getOptionValue, onChange, value } = props\n\n let draggableIDs: string[] = []\n if (value) {\n draggableIDs = (Array.isArray(value) ? value : [value]).map((optionValue) => {\n return generateMultiValueDraggableID(optionValue, getOptionValue)\n })\n }\n\n return (\n <DraggableSortable\n className=\"react-select-container\"\n ids={draggableIDs}\n onDragEnd={({ moveFromIndex, moveToIndex }) => {\n let sorted = value\n if (value && Array.isArray(value)) {\n sorted = arrayMove(value, moveFromIndex, moveToIndex)\n }\n onChange(sorted)\n }}\n >\n <SelectAdapter {...props} />\n </DraggableSortable>\n )\n}\n\nexport const ReactSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n const { isMulti, isSortable } = props\n\n if (isMulti && isSortable) {\n return <SortableSelect {...props} />\n }\n\n return <SelectAdapter {...props} />\n}\n"],"mappings":"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","ignoreList":[]}