1167 Commits

Author SHA1 Message Date
Elliot DeNolf
a6ba9e3a41 chore(release): v3.3.0 [skip ci] 2024-12-03 12:53:42 -05:00
Paul
d1de106944 fix(ui): data disappearing when form state updates in globals (#9682)
Fixes a bug where data would visually disappear from the form when
merging new form stats when saving globals.
2024-12-03 15:41:21 +00:00
Dan Ribbens
6104fe5011 feat: disableLocalStrategy with auth fields still enabled (#9579)
Adds configuration options to `auth.disableLocalStrategy` to allow
customization of how payload treats an auth enabled collection.

Two new properties have been added to `disableLocalStrategy`:

- `enableFields` Include auth fields on the collection even though the
local strategy is disabled. Useful when you do not want the database or
types to vary depending on the auth configuration used.
- `optionalPassword`: makes the password field not required
2024-12-03 09:52:23 -05:00
Patrik
58b7415385 feat(ui): adds beforeInput & afterInput props for arrays, blocks, collapsible, group, radio, & relationship fields. (#9674)
The following fields did not have the ability to add beforeInput &
afterInput:
- Arrays
- Blocks
- Collapsibles
- Groups
- Radios
- Relationships

### How?

Adds the ability to define and add before and after inputs to these
fields in your config.

Here are examples of the above fields with beforeInputs & afterInputs
defined (I.e. `#before-input` & `#after-input`):

`Arrays`:
![Screenshot 2024-12-02 at 1 22
15 PM](https://github.com/user-attachments/assets/8a2d5351-acab-4b28-b9bd-b19e1942da7e)


`Blocks`:
![Screenshot 2024-12-02 at 1 35
53 PM](https://github.com/user-attachments/assets/e9b5f22b-2671-4efb-8ee4-b4de3a1addc5)


`Collapsible`:
![Screenshot 2024-12-02 at 1 46
34 PM](https://github.com/user-attachments/assets/38f7a016-8a79-4ece-90d2-0b1761db19cd)


`Groups`:
![Screenshot 2024-12-02 at 1 52
34 PM](https://github.com/user-attachments/assets/dc6a123b-ee01-4021-bbbf-ac1b8c086072)


`Radios`:
![Screenshot 2024-12-02 at 1 59
35 PM](https://github.com/user-attachments/assets/4ddd16a1-2ad2-44f5-a7e9-86aa6e4e947b)


`Relationships`:
![Screenshot 2024-12-02 at 1 21
55 PM](https://github.com/user-attachments/assets/b4679baf-6157-41c9-8485-ca570be979d2)
2024-12-02 19:37:16 +00:00
Jacob Fletcher
edc04aec56 refactor: deprecates params and search params contexts (#9581)
As described in #9576, the `SearchParamsProvider` can become stale when
navigating routes and relying on search params during initial render.
This is because this context, along with the `ParamsProvider`, is
duplicative to the internal lifecycle of `useSearchParams` and
`useParams` from `next/navigation`– but always one render behind.
Instead, we need to use the hooks directly from `next/navigation` as
described in the jsdocs. This will also remove any abstraction over top
the web standard for `URLSearchParams`.

For this reason, these providers and their corresponding hooks have been
marked with the deprecated flag and will continue to behave as they do
now, but will be removed in the next major release. This PR replaces all
internal reliance on these hooks with `next/navigation` as suggested,
except for the `useParams` hook, which was never used in the first
place.

```diff
'use client'
- import { useSearchParams } from '@payloadcms/ui'
+ import { useSearchParams } from 'next/navigation'
+ import { parseSearchParams } from '@payloadcms/ui'

export function MyClientComponent() {
- const { searchParams } = useSearchParams()
+ const searchParams = useSearchParams()
+ const parsedParams = parseSearchParams(searchParams)

  // ...
}
```
_MyClientComponent.tsx_
2024-12-02 13:57:59 -05:00
Jacob Fletcher
d04cea123c fix(ui): properly animates height for dynamically rendered children (#9665)
Fixes https://github.com/payloadcms/payload/issues/9567. When using the
`AnimateHeight` component on a patched browser such as Webkit,
components with dynamically rendered children are not properly animating
in, such as blocks with rich text. This is because the height of that
content is unable to be calculated before it's rendered, preventing the
component from acquiring a target height to animate toward. This change
was originally introduced in #9456 in effort to remove unnecessary
dependencies.

The fix is to setup a ResizeObserver during animation to watch for
changes to the content's height. This way, as components dynamically
render in based on the "open" state, the hook will simply increment the
target height accordingly.
2024-12-02 13:18:16 -05:00
Alessio Gravili
24c75b09c0 fix(ui): upgrade sonner from 1.5.0 to 1.7.0 (#9666)
This fixes React 19 peer dependency warnings for sonner
2024-12-02 18:08:22 +00:00
Alessio Gravili
877b89962e chore: upgrade all dependencies used to build payload (swc, esbuild, react compiler, babel) (#9658) 2024-12-02 09:07:48 -07:00
Alessio Gravili
71ba4a8bce chore: upgrade all react and next-related packages (#9655)
This PR updates all react and next-related packages to the latest
version in our test directory and in our templates, while still allowing
older versions to be used.

Additionally, this ensures that the "scheduler" package version we
install matches the version installed by react-dom
2024-12-02 00:48:39 -07:00
Alessio Gravili
9d724086c7 feat(ui): upgrade react-datepicker dependency from 6.2.0 to 7.5.0 (#9654)
The new version comes with included types (we can uninstall
`@types/react-datepicker`!), removes 1 dependency and adds official
support for React 19
2024-12-02 05:53:12 +00:00
Alessio Gravili
73e0e25e14 fix(ui): upgrade react-select, fixes type issues with select input (#9653)
React-select fixed React 19 type compatibility here:
https://github.com/JedWatson/react-select/pull/5974
2024-12-01 21:35:03 -07:00
Alessio Gravili
963387f7b0 feat(ui): export CodeEditor (#9650)
Requirement for https://github.com/payloadcms/payload/pull/9645
2024-12-02 03:19:26 +00:00
Alessio Gravili
f151723745 feat(ui): export TabsProvider and TabComponent (#9647)
Requirement for https://github.com/payloadcms/payload/pull/9645
2024-12-02 02:28:13 +00:00
Elliot DeNolf
07e40d37ac chore(release): v3.2.2 [skip ci] 2024-11-29 12:59:59 -05:00
Alessio Gravili
c4327f2294 fix(ui): ensure UI is reactive to HMR changes, without having to refresh the page (#9602)
**Before:**

https://github.com/user-attachments/assets/c4ad9184-4629-419d-a30e-68dd802da387


**After:**

https://github.com/user-attachments/assets/4f7bcd4a-e1a7-464e-8036-55f48c1d5da1
2024-11-28 14:55:41 -07:00
Alessio Gravili
36a6a19de8 fix(ui): css is not defined error in production build (#9603)
Related: https://github.com/payloadcms/payload/pull/9456
Fixes https://github.com/payloadcms/payload/issues/9598

This ensures that the `CSS` property is accessed safely, preventing the
"CSS is not defined" error
2024-11-28 21:00:23 +00:00
Jarrod Flesch
4b302f22a0 fix: incorrect formState after doc save (#9573)
### What?
When the document is saved the formState was not being reset from the
server.

### Why?
getFormState was not being called onSuccess of the form submission

### How?
The `Form` onSuccess function now allows for an optional return type of
`FormState` if the functions returns formState then we check to see if
that differs from the current formState on the client. If it does then
we dispatch the `REPLACE_STATE` action with the newState.

Fixes https://github.com/payloadcms/payload/issues/9423
2024-11-27 16:45:10 -05:00
Jacob Fletcher
3961223cc1 fix(ui): retains search params when navigating back (#9576)
Closes #9132. When query params are present in the URL, such as after
searching or filtering in the list view, they are not being retained
after navigating back to that view via `history.back()` (i.e. the back
button). This makes it difficult to quickly navigate in and out of
documents from the list view when an underlying search exists. This was
because the `SearchParamsProvider` is stale when the new view renders,
which then replaces the URL with these stale params. The fix here is to
_not_ use the `SearchParamsProvider` at all, and instead use
`next/navigation` directly. Ultimately, this provider should likely be
marked deprecated and then removed in the next major release for this
very reason.
2024-11-27 14:49:53 -05:00
Alessio Gravili
ca07c9f0d7 fix(ui): ensure Form submit button only uses onClick handler when needed, as that was causing issues with password manager extensions (#9572) 2024-11-27 17:50:26 +00:00
Elliot DeNolf
be59d52ac7 chore(release): v3.2.1 [skip ci] 2024-11-26 22:29:29 -05:00
Elliot DeNolf
c8bee29920 chore(release): v3.2.0 [skip ci] 2024-11-26 20:39:41 -05:00
Jarrod Flesch
2248be4a2e fix: utilizes override access false (#9550)
### What?
overrideAccess was missing on local operations inside the server
function for copy locale.

### How?
Adds overrideAccess: false
2024-11-26 20:29:16 -05:00
Jacob Fletcher
5d18a5288e fix: overrides entity visibility within drawers (#9546)
When using the `admin.hidden: true` property on a collection, it
rightfully removes all navigation and routing for that particular
collection. However, this also affects the expected behavior of hidden
entities when they are rendered within a drawer, such as the document
drawer or list drawer. For example, when creating a new _admin.hidden_
document through the relationship or join field, the drawer should still
render the view, despite the underlying route for that view being
disabled. This change was a result of the introduction of on-demand
server components in #8364, where we now make a server roundtrip to
render the view in its entirety, which include the logic that redirects
these hidden entities.

Now, we pass a new `overrideEntityVisibility` argument through the
server function that, when true, skips this step. This way documents can
continue to respect `admin.hidden` while also having the ability to
override on a case-by-case basis throughout the UI.
2024-11-26 18:22:04 -05:00
Jessica Chowdhury
601759d967 feat: adds ability to copy data from across locales (#8203)
### What?

Adds ability to copy data from one locale to another at a document
level.

### How?

For any localized collection, you will find a new option in the document
controls called `Copy to Locale`.

This option will open a drawer, from here you can select your origin and
destination locales.

If data already exists in the destination locale, you can choose to: 
1. Overwrite this data (this will copy any empty fields in your origin
locale)
2. Not overwrite existing data (this will only copy data into empty
fields in the destination locale)

---------

Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>
2024-11-26 17:06:30 -05:00
Alessio Gravili
fd0ff51296 perf: faster page navigation by speeding up createClientConfig, speed up version fetching, speed up lexical init. Up to 100x faster (#9457)
If you had a lot of fields and collections, createClientConfig would be
extremely slow, as it was copying a lot of memory. In my test config
with a lot of fields and collections, it took 4 seconds(!!).

And not only that, it also ran between every single page navigation.

This PR significantly speeds up the createClientConfig function. In my
test config, its execution speed went from 4 seconds to 50 ms.
Additionally, createClientConfig is now properly cached in both dev &
prod. It no longer runs between every single page navigation. Even if
you trigger a full page reload, createClientConfig will be cached and
not run again. Despite that, HMR remains fully-functional.

This will make payload feel noticeably faster for large configs -
especially if it contains a lot of richtext fields, as it was previously
deep-copying the relatively large richText editor configs over and over
again.

## Before - 40 sec navigation speed

https://github.com/user-attachments/assets/fe6b707a-459b-44c6-982a-b277f6cbb73f

## After - 1 sec navigation speed

https://github.com/user-attachments/assets/384fba63-dc32-4396-b3c2-0353fcac6639

## Todo

- [x] Implement ClientSchemaMap and cache it, to remove
createClientField call in our form state endpoint
- [x] Enable schemaMap caching for dev
- [x] Cache lexical clientField generation, or add it to the parent
clientConfig

## Lexical changes

Red: old / removed
Green: new

![CleanShot 2024-11-22 at 21 07
41@2x](https://github.com/user-attachments/assets/f8321218-763c-4120-9353-076c381f33fb)

### Speed up version queries

This PR comes with performance optimizations for fetching versions
before a document is loaded. Not only does it use the new select API to
limit the fields it queries, it also completely skips a database query
if the current document is published.

### Speed up lexical init

Removes a bunch of unnecessary deep copying of lexical objects which
caused higher memory usage and slower load times. Additionally, the
lexical default config sanitization now happens less often.
2024-11-26 14:31:14 -07:00
Elliot DeNolf
bb648b3b5f chore(eslint): disable no-direct-set-state-in-use-effect (#9542)
Disables
[`@eslint-react/hooks-extra/no-direct-set-state-in-use-effect`](https://eslint-react.xyz/docs/rules/hooks-extra-no-direct-set-state-in-use-effect)
2024-11-26 13:25:37 -05:00
Harley Salas
910b68154e fix: corrects localizer positioning in RTL mode (#9494)
### What?
Localizer's RTL code was not being applied, to shift it's position to
the left side of the screen when the user's account/admin locale was set
to a RTL language.

Before:

![before](https://github.com/user-attachments/assets/54a96087-2b40-46ed-a55b-2b08438e9b84)

After:

![after](https://github.com/user-attachments/assets/4ad6e3f0-b229-4446-8d61-c0a4034bd520)


### How?
Moved css class to ensure existing css code did not face issues with
inheritance.

Fixes #9482
2024-11-26 09:39:25 -05:00
Paul
82145f7bb0 fix(ui): remove overflow hidden from app-header wrappers since it breaks any popout elements (#9525)
Unblocks https://github.com/payloadcms/payload/pull/9391

It was previously impossible to create popout, dropdown or other menus
from buttons added to the app-header component
2024-11-25 18:26:54 -06:00
Jacob Fletcher
0757e06e71 feat: deprecates react-animate-height in favor of native css (#9456)
Deprecates `react-animate-height` in favor of native CSS, specifically
the `interpolate-size: allow-keywords;` property which can be used to
animate to `height: auto`—the primary reason this package exists. This
is one less dependency in our `node_modules`. Tried to replicate the
current DOM structure, class names, and API of `react-animate-height`
for best compatibility.

Note that this CSS property is experimental BUT this PR includes a patch
for browsers without native support. Once full support is reached, the
patch can be safely removed.
2024-11-25 17:48:16 -05:00
Elliot DeNolf
058bd02ebd chore(release): v3.1.1 [skip ci] 2024-11-25 16:42:21 -05:00
Jacob Fletcher
8383426313 fix(ui): prevents column reset on sort (#9517)
Fixes #9492. Sorting columns would unintentionally clear column
preferences.
2024-11-25 15:15:07 -05:00
Francisco Lourenço
af096a374a fix(ui): z-index on react-select menu (#9512)
The [previous fix](https://github.com/payloadcms/payload/pull/8735)
worked but was a breaking change because it set a `z-index` in the
`.react-select` wrapper instead of the `.rs__menu`, creating a new
stacking-context, therefore making any existing customizations to the
menu's `z-index` not work. This was a way to fix a regression introduced
by the css-layers, in which Payload's custom `z-index: 4` no longer took
precedence over react-select's default `z-index: 1`.

With this PR we remove the default `z-index: 1` applied by react-select,
so that the `z-index: 4` set in the "payload-default" css layer can take
effect. An alternative to this fix would be to use `z-index: 4
!important`, but this has the advantage of allowing the `z-index` to be
easily customized by the consumers of the CMS, as with all the other
styles.

### Screenshots

![2024-11-25 18 21
22](https://github.com/user-attachments/assets/3dc9a067-901a-41ea-b04e-c811788f8415)
2024-11-25 14:10:20 -06:00
Jarrod Flesch
6ffd4c7825 fix: incorrect locale registration in datepicker (#9516)
### What?
This log was appearing when the DatePicker loaded without a registered
locale:
```
A locale object was not found for the provided string ["enUS"].
```
Also fixes css misalignment of icons inside date picker field

### Why?
If i`18n.dateFNS` had not loaded, we were registering the locale with an
undefined value.

### How?
Only register the locale for react-datepicker if i18n.dateFNS is
present.
2024-11-25 15:05:15 -05:00
Jacob Fletcher
f136a7db2a fix: improper spread of list preferences (#9510)
List preferences were improperly saving their own records onto
themselves when building table state through the server function. This
was happening because the entire preference document was being spread
onto the new preferences, as opposed to just the value itself:

```diff
const mergedPrefs = {
-  ...(preferencesResult || {}),
+  ...(preferencesResult?.value || {}),
   columns,
}
```

This PR also swaps `dequal` out for `dequal/lite`.
2024-11-25 13:56:35 -05:00
Alessio Gravili
13fc94dc4d chore: upgrade to TypeScript 5.7, ensure tsconfig targed and lib properties match the APIs we support (#9473)
TS 5.7 added support for ES2024. By keeping target: “esnext”, we would
have accidentally set our minimum supported ES version to ES2024.

This sets it to ES2022, which is the version supported by Node 18
2024-11-23 16:35:27 -07:00
Elliot DeNolf
65ac739da9 chore(release): v3.1.0 [skip ci] 2024-11-22 11:54:08 -05:00
Riley Pearce
27acdaee7a fix(ui): add disabled attribute to blocks drawer toggler (#9424)
### What?

When `update` access control is set to `false`, the blocks drawer can
still be accessed. Blocks still cannot be saved to the document, making
this more of a QoL improvement.

### Why?

The blocks `DrawerToggler` is missing the `disabled` attribute.

### How?

Adding the `disabled` attribute to the blocks `DrawerToggler`.

### Reproduction steps

https://github.com/rilrom/payload/tree/issue/disabled-add-block-button

1. Navigate to the posts collection.
2. Click the 'Add blocks' button.
3. Blocks can be selected (however they are still readonly in the
document and cannot be saved).

### Recordings

Before


https://github.com/user-attachments/assets/da12829d-5b27-4da9-bbd1-067d679a89ba

After


https://github.com/user-attachments/assets/67166477-b83a-4495-98ae-2d272542103b
2024-11-22 08:59:38 -07:00
Alessio Gravili
e3866c4035 fix(ui): stale server components when rows are moved (#9410)
We need to trigger server component re-rendering for moving rows, just
like we do for adding or deleting rows.

Video of the issue:


https://github.com/user-attachments/assets/32fb31c5-f304-4082-8028-59a6ad723fbe
2024-11-21 20:14:57 +00:00
Jarrod Flesch
ee1a91ee7c fix: unable to load documents with non-standard ids (#9407)
### What?
Non-standard ids caused an issue when finding the document on the
server.

This is an odd regression, in 2.0 we were fetching the document on the
client so the request would handle decoding the url. Now we are fetching
the document on the server and need to do this manually when reading id
from route params.

### Why?
The slug pulled out of the url for an id of `id 1` would equate to
`id%201` which would fail in the `payload.find` call since there is not
an id stored as `id%201` but instead `id 1`.

### How?
Wherever we are calling payload.find in the views and querying by `id`
it gets ran through a helper function that decodes it properly.

Fixes #9373
2024-11-21 14:16:01 -05:00
Alessio Gravili
90e37fe78d fix(ui): error when collapsing sidebar groups (#9393)
Fixes
https://discord.com/channels/967097582721572934/1308933812914229368/1308933812914229368

![CleanShot 2024-11-20 at 19 04
45@2x](https://github.com/user-attachments/assets/3c2c8054-9d09-4090-adf8-57aef8635baf)
2024-11-21 02:17:45 +00:00
Elliot DeNolf
025d917fa0 chore(release): v3.0.2 [skip ci] 2024-11-20 16:06:04 -05:00
Alessio Gravili
c67291d538 fix(ui): invalid permissions passed to group and named tab sub-fields (#9366)
Fixes https://github.com/payloadcms/payload/issues/9363

This fixes the following issues that caused fields to be either hidden,
or incorrectly set to readOnly in certain configurations:
- In some cases, permissions were sanitized incorrectly. This PR
rewrites the sanitizePermissions function and adds new unit tests
- after a document save, the client was receiving unsanitized
permissions. Moving the sanitization logic to the endpoint fixes this
- Various incorrect handling of permissions in our form state endpoints
/ RenderFields
2024-11-20 13:03:35 -07:00
Jacob Fletcher
ef3748319e fix(ui): bulk update and delete ignoring search query (#9377)
Fixes #9374.
2024-11-20 13:22:43 -05:00
Jarrod Flesch
439dcd493e fix: prioritize server rendered Actions in ActionsProvider (#9379)
### What?
Actions were not being re-rendered when router.refresh was called.
[Discord
Link](https://discord.com/channels/967097582721572934/1308636510203154462/1308648116031066173)

### Why?
They were stored in state and the state was persisting.

### How?
Spread the stateful actions and the Actions from props on top of the
client state actions.
2024-11-20 13:18:28 -05:00
Jacob Fletcher
9e85be0006 fix(next): autosave document rendering (#9364)
Closes #9242 and #9365. Autosave-enabled documents rendered within a
drawer were not being properly handled. This was causing multiple draft
documents to be created upon opening the drawer, as well as an empty
document returned from the server function, etc.
2024-11-19 19:01:54 -05:00
Elliot DeNolf
9ea26638e9 chore(release): v3.0.1 [skip ci] 2024-11-19 14:33:41 -05:00
Jarrod Flesch
661f450c61 fix(ui): client side doc data not updating after save (#9340)
### What?
When a document is saved the data from useDocumentInfo was stale.

### Why?
Previously we would refresh the entire document by calling the
form-state endpoint, we no longer do that.

### How?
Adds a new variable accessible from useDocumentInfo,
`savedDocumentData`, that is updated when the document is successfully
saved and defaults to initialData.
2024-11-19 13:22:23 -05:00
Said Akhrarov
2c7ea6362a fix(ui): show required indicator for select fields (#9348)
### What?
Select field was not showing required indicator despite being marked
required in config.

### Why?
To give end-user feedback when editting required select fields.

### How?
Replacing hardcoded required prop with required prop passed in from
config.

[See
here.](https://github.com/payloadcms/payload/blob/main/packages/ui/src/fields/Select/Input.tsx#L100)
2024-11-19 12:55:26 -05:00
Jacob Fletcher
0f3f6e73da fix(ui): addFieldRow set modified (#9324)
Fixes #9264. When externally updating array or block rows through the
`addFieldRow` or `replaceFieldRow` methods, nested rich text fields
along with any custom components within them are never rendered. This is
because unless the form is explicitly set to modified, as the default
array and blocks fields currently do, the newly generated form-state
will skip the rendering step. Now, the underlying callbacks themselves
automatically set the form to modified to trigger rendering.
2024-11-19 08:52:50 -05:00
Jarrod Flesch
f42b1e1e05 fix: could not save selection from upload has many drawer (#9325)
### What?
Could not finalize selection of `hasMany` uploads inside of the drawer.

### Why?
The Select component was not being rendered in the beforeActions prop of
the ListControls when row selections was enabled.

### How?
Renders the Select component when row selections are enabled and
onBulkSelect is present.
2024-11-19 08:23:02 -05:00