[QUESTION] - Is it possible make dependent components?

[oarkflow]

Scenario:

I've a a table component and an input component. On Dropzone I want to have an input as Search for Table component with an ability to have delay on Search.

I see there's Dynamic Fields, https://puckeditor.com/docs/integrating-puck/dynamic-fields

But I've to group all components (related) to single as shown in example:

const config = {
  components: {
    MyComponent: {
      resolveFields: async (data, { changed, lastFields }) => {
        // Don't call the API unless `category` has changed
        if (!changed.category) return lastFields;
 
        // Make an asynchronous API call to get the options
        const options = await getOptions(data.category);
 
        return {
          category: {
            type: "radio",
            options: [
              { label: "Fruit", value: "fruit" },
              { label: "Vegetables", value: "vegetables" },
            ],
          },
          item: {
            type: "select",
            options,
          },
        };
      },
      render: ({ item }) => <h1>{item}</h1>,
    },
  },
};

With this approach, I've to hard code those components. It would be great if there's a support of applying similar feature using drag and drop where I could drop those components and add dependency.

Is it possible to implement such in Puck Editor? Any solution would be helpful.

[chrisvxd]

I see you also asked this in Discord. React context is the correct way to do this, with the Table component setting it up with a provider. Something like this:

const ctx = createContext();

const { Provider } = ctx;

const config = {
  components: {
    Table: {
      render: () => {
        const [query, setQuery] = useState();
        
        return (<Provider value={{ query, setQuery }}>
          <DropZone allow={[ "TableSearch" ]} zone="filters" />
          <table></table>
        </Provider>)
      }
    },
    TableSearch: {
      render: () => {
        const { setQuery } = useContext(ctx);
        
        return <input type="text" onChange=(e => setQuery(e.target.value)) name="search" />
      }
    }
  }
};