@elementor/editor-editing-panel 0.4.2 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.5.0...@elementor/editor-editing-panel@0.5.1) (2024-07-18)
+
+### Bug Fixes
+
+- **editor-editing-panel:** add missing deps to useWidgetSettings [EDS-273] ([#205](https://github.com/elementor/elementor-packages/issues/205)) ([d6dc5df](https://github.com/elementor/elementor-packages/commit/d6dc5dfcd7f0eb7354570051292e4bf4079a28cc))
+
+# [0.5.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.4.2...@elementor/editor-editing-panel@0.5.0) (2024-07-17)
+
+### Features
+
+- **editor-editing-panel:** connect controls to element context [EDS-253] ([#203](https://github.com/elementor/elementor-packages/issues/203)) ([12bd853](https://github.com/elementor/elementor-packages/commit/12bd8530713b92aa56716ad3b496f326d7e1b2b9))
+
 ## [0.4.2](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.4.1...@elementor/editor-editing-panel@0.4.2) (2024-07-16)
 
 **Note:** Version bump only for package @elementor/editor-editing-panel

package/dist/index.js

@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/editing-panel.tsx
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_i18n = require("@wordpress/i18n");
 
 // src/hooks/use-selected-elements.ts
@@ -92,19 +92,85 @@ function useElementType(type) {
 var import_editor_panels = require("@elementor/editor-panels");
 
 // src/components/controls/control-types/select-control.tsx
-var React = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
 
-// src/components/controls/control-context.ts
+// src/contexts/control-context.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+
+// src/contexts/element-context.tsx
+var React = __toESM(require("react"));
 var import_react = require("react");
-var ControlContext = (0, import_react.createContext)(null);
+var Context = (0, import_react.createContext)(null);
+function ElementContext({ children, element }) {
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { element } }, children);
+}
+function useElementContext() {
+  const context = (0, import_react.useContext)(Context);
+  if (!context) {
+    throw new Error("useElementContext must be used within a ElementContextProvider");
+  }
+  return context;
+}
+
+// src/hooks/use-widget-settings.ts
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+
+// src/sync/get-container.ts
+function getContainer(id) {
+  const extendedWindow = window;
+  const container = extendedWindow.elementor?.getContainer?.(id);
+  return container ?? null;
+}
+
+// src/hooks/use-widget-settings.ts
+var useWidgetSettings = ({ id, bind }) => {
+  return (0, import_editor_v1_adapters3.__privateUseListenTo)(
+    (0, import_editor_v1_adapters3.commandEndEvent)("document/elements/settings"),
+    () => {
+      const container = getContainer(id);
+      const value = container?.settings?.get(bind) ?? null;
+      return value;
+    },
+    [id, bind]
+  );
+};
+
+// src/sync/update-settings.ts
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var updateSettings = ({ id, props }) => {
+  const container = getContainer(id);
+  (0, import_editor_v1_adapters4.__privateRunCommand)("document/elements/settings", {
+    container,
+    settings: {
+      ...props
+    }
+  });
+};
+
+// src/contexts/control-context.tsx
+var ControlContext = (0, import_react2.createContext)(null);
 function useControl(defaultValue) {
-  const controlContext = (0, import_react.useContext)(ControlContext);
+  const controlContext = (0, import_react2.useContext)(ControlContext);
   if (!controlContext) {
     throw new Error("useControl must be used within a ControlContext");
   }
   return { ...controlContext, value: controlContext.value ?? defaultValue };
 }
+var ControlContextProvider = ({ bind, children }) => {
+  const { element } = useElementContext();
+  const value = useWidgetSettings({ id: element.id, bind });
+  const setValue = (newValue) => {
+    updateSettings({
+      id: element.id,
+      props: {
+        [bind]: newValue
+      }
+    });
+  };
+  return /* @__PURE__ */ React2.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
+};
 
 // src/components/controls/control-types/select-control.tsx
 var SelectControl = ({ options }) => {
@@ -112,18 +178,18 @@ var SelectControl = ({ options }) => {
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React.createElement(import_ui.Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map((option) => /* @__PURE__ */ React.createElement(import_ui.MenuItem, { key: option.value, value: option.value, disabled: option.disabled }, option.label)));
+  return /* @__PURE__ */ React3.createElement(import_ui.Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map(({ label, ...props }) => /* @__PURE__ */ React3.createElement(import_ui.MenuItem, { key: props.value, ...props }, label)));
 };
 
-// src/components/controls/control-types/text-control.tsx
-var React2 = __toESM(require("react"));
+// src/components/controls/control-types/text-area-control.tsx
+var React4 = __toESM(require("react"));
 var import_ui2 = require("@elementor/ui");
-var TextControl = ({ placeholder }) => {
+var TextAreaControl = ({ placeholder }) => {
   const { value, setValue } = useControl("");
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React4.createElement(
     import_ui2.TextareaAutosize,
     {
       size: "tiny",
@@ -136,61 +202,9 @@ var TextControl = ({ placeholder }) => {
 };
 
 // src/components/controls/settings-control.tsx
-var React3 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_ui3 = require("@elementor/ui");
-
-// src/sync/update-settings.ts
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-
-// src/sync/get-container.ts
-function getContainer(id) {
-  const extendedWindow = window;
-  const container = extendedWindow.elementor?.getContainer?.(id);
-  return container ?? null;
-}
-
-// src/sync/update-settings.ts
-var updateSettings = ({ id, props }) => {
-  const container = getContainer(id);
-  (0, import_editor_v1_adapters3.__privateRunCommand)("document/elements/settings", {
-    container,
-    settings: {
-      ...props
-    }
-  });
-};
-
-// src/hooks/use-widget-settings.ts
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var useWidgetSettings = ({ id, bind }) => {
-  return (0, import_editor_v1_adapters4.__privateUseListenTo)(
-    (0, import_editor_v1_adapters4.commandEndEvent)("document/elements/settings"),
-    () => {
-      const container = getContainer(id);
-      const value = container?.settings?.get(bind) ?? null;
-      return value;
-    },
-    []
-  );
-};
-
-// src/components/controls/settings-control.tsx
-var SettingsControl = ({ bind, children, elementID }) => {
-  const value = useWidgetSettings({ id: elementID, bind });
-  const setValue = (newValue) => {
-    updateSettings({
-      id: elementID,
-      props: {
-        [bind]: newValue
-      }
-    });
-  };
-  return /* @__PURE__ */ React3.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
-};
-var Label = ({ children }) => {
-  return /* @__PURE__ */ React3.createElement(import_ui3.Typography, { component: "label", variant: "caption" }, children);
-};
-var Container = ({ children }) => /* @__PURE__ */ React3.createElement(
+var SettingsControl = ({ children, bind }) => /* @__PURE__ */ React5.createElement(
   import_ui3.Stack,
   {
     spacing: 1,
@@ -200,50 +214,39 @@ var Container = ({ children }) => /* @__PURE__ */ React3.createElement(
     flexWrap: "wrap",
     sx: { px: 2 }
   },
-  children
+  /* @__PURE__ */ React5.createElement(ControlContextProvider, { bind }, children)
 );
+var Label = ({ children }) => {
+  return /* @__PURE__ */ React5.createElement(import_ui3.Typography, { component: "label", variant: "caption" }, children);
+};
 SettingsControl.Label = Label;
-SettingsControl.Container = Container;
 
 // src/components/editing-panel.tsx
 var import_ui4 = require("@elementor/ui");
-
-// src/contexts/settings-controls.tsx
-var React4 = __toESM(require("react"));
-var import_react2 = require("react");
-var Context = (0, import_react2.createContext)(null);
-function ElementContext({ children, element }) {
-  return /* @__PURE__ */ React4.createElement(Context.Provider, { value: { element } }, children);
-}
-
-// src/components/editing-panel.tsx
 var controlTypes = {
   select: SelectControl,
-  text: TextControl
+  textarea: TextAreaControl
 };
 var EditingPanel = () => {
   const elements = useSelectedElements();
-  const selectedElement = elements[0];
+  const [selectedElement] = elements;
   const elementType = useElementType(selectedElement?.type);
   if (elements.length !== 1 || !elementType) {
     return null;
   }
   const panelTitle = (0, import_i18n.__)("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React5.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React5.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React5.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React5.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React5.createElement(import_ui4.Stack, { spacing: 2 }, elementType.controls.map((control) => {
+  return /* @__PURE__ */ React6.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React6.createElement(import_editor_panels.PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React6.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React6.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React6.createElement(import_ui4.Stack, { spacing: 2 }, elementType.controls.map((control) => {
     if (control.type === "control") {
       const ControlComponent = controlTypes[control.value.type];
       if (!ControlComponent) {
         return null;
       }
-      return /* @__PURE__ */ React5.createElement(
-        SettingsControl,
+      return /* @__PURE__ */ React6.createElement(SettingsControl, { key: control.value.bind, bind: control.value.bind }, /* @__PURE__ */ React6.createElement(SettingsControl.Label, null, control.value.label), /* @__PURE__ */ React6.createElement(
+        ControlComponent,
         {
-          key: control.value.bind,
-          bind: control.value.bind,
-          elementID: elements[0].id
-        },
-        /* @__PURE__ */ React5.createElement(SettingsControl.Container, null, /* @__PURE__ */ React5.createElement(SettingsControl.Label, null, control.value.label), /* @__PURE__ */ React5.createElement(ControlComponent, { ...control.value.props }))
-      );
+          ...control.value.props
+        }
+      ));
     }
     return null;
   })))));

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/components/controls/control-types/select-control.tsx","../src/components/controls/control-context.ts","../src/components/controls/control-types/text-control.tsx","../src/components/controls/settings-control.tsx","../src/sync/update-settings.ts","../src/sync/get-container.ts","../src/hooks/use-widget-settings.ts","../src/contexts/settings-controls.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const { panel, usePanelActions, usePanelStatus } = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';\nimport { SelectControl } from './controls/control-types/select-control';\nimport { TextControl } from './controls/control-types/text-control';\nimport { SettingsControl } from '../components/controls/settings-control';\nimport { Stack } from '@elementor/ui';\nimport { ElementContext } from '../contexts/settings-controls';\n\nconst controlTypes = {\n\tselect: SelectControl,\n\ttext: TextControl,\n};\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst selectedElement = elements[ 0 ];\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Stack spacing={ 2 }>\n\t\t\t\t\t\t{ elementType.controls.map( ( control ) => {\n\t\t\t\t\t\t\tif ( control.type === 'control' ) {\n\t\t\t\t\t\t\t\tconst ControlComponent =\n\t\t\t\t\t\t\t\t\tcontrolTypes[ control.value.type as keyof typeof controlTypes ];\n\n\t\t\t\t\t\t\t\tif ( ! ControlComponent ) {\n\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<SettingsControl\n\t\t\t\t\t\t\t\t\t\tkey={ control.value.bind }\n\t\t\t\t\t\t\t\t\t\tbind={ control.value.bind }\n\t\t\t\t\t\t\t\t\t\telementID={ elements[ 0 ].id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SettingsControl.Container>\n\t\t\t\t\t\t\t\t\t\t\t<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>\n\t\t\t\t\t\t\t\t\t\t\t{ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }\n\t\t\t\t\t\t\t\t\t\t\t<ControlComponent { ...( control.value.props as any ) } />\n\t\t\t\t\t\t\t\t\t\t</SettingsControl.Container>\n\t\t\t\t\t\t\t\t\t</SettingsControl>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getWidgetsCache from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport default function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { PropValue } from '../../../types';\n\nexport type SelectControlProps< T > = {\n\toptions: Array< { label: string; value: T; disabled?: boolean } >;\n};\n\nexport const SelectControl = < T extends PropValue >( { options }: SelectControlProps< T > ) => {\n\tconst { value, setValue } = useControl< T >();\n\n\tconst handleChange = ( event: SelectChangeEvent< T > ) => {\n\t\tsetValue( event.target.value as T );\n\t};\n\n\treturn (\n\t\t<Select size=\"tiny\" value={ value ?? '' } onChange={ handleChange }>\n\t\t\t{ options.map( ( option ) => (\n\t\t\t\t<MenuItem key={ option.value } value={ option.value } disabled={ option.disabled }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../../types';\n\nexport type ControlContext< T extends PropValue > = null | {\n\tbind: PropKey;\n\tsetValue: ( value: T ) => void;\n\tvalue: T;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > >( null );\n\nexport function useControl< T extends PropValue >( defaultValue?: T ) {\n\tconst controlContext = useContext< ControlContext< T > >( ControlContext as never );\n\n\tif ( ! controlContext ) {\n\t\tthrow new Error( 'useControl must be used within a ControlContext' );\n\t}\n\n\treturn { ...controlContext, value: controlContext.value ?? defaultValue };\n}\n","import * as React from 'react';\nimport { TextareaAutosize } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport type TextControlProps = {\n\tplaceholder?: string;\n};\n\nexport const TextControl = ( { placeholder }: TextControlProps ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tsetValue( event.target.value );\n\t};\n\n\treturn (\n\t\t<TextareaAutosize\n\t\t\tsize=\"tiny\"\n\t\t\tminRows={ 3 }\n\t\t\tvalue={ value }\n\t\t\tonChange={ handleChange }\n\t\t\tplaceholder={ placeholder }\n\t\t/>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from './control-context';\nimport { Stack, Typography } from '@elementor/ui';\nimport { updateSettings } from '../../sync/update-settings';\nimport { useWidgetSettings } from '../../hooks/use-widget-settings';\nimport { PropKey, PropValue } from '../../types';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n\telementID: Element[ 'id' ];\n};\n\nconst SettingsControl = ( { bind, children, elementID }: Props ) => {\n\tconst value = useWidgetSettings( { id: elementID, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: elementID,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;\n};\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nconst Container = ( { children }: { children: React.ReactNode } ) => (\n\t<Stack\n\t\tspacing={ 1 }\n\t\tflexDirection=\"row\"\n\t\talignItems=\"center\"\n\t\tjustifyContent=\"space-between\"\n\t\tflexWrap=\"wrap\"\n\t\tsx={ { px: 2 } }\n\t>\n\t\t{ children }\n\t</Stack>\n);\n\nSettingsControl.Label = Label;\nSettingsControl.Container = Container;\n\nexport { SettingsControl };\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[]\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n};\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn <Context.Provider value={ { element } }>{ children }</Context.Provider>;\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandStartEvent( 'panel/editor/open' ), () => {\n\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\topen();\n\t\t\t}\n\t\t} );\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","React","useListenTo","import_editor_v1_adapters","useListenTo","React","import_ui","React","import_ui","import_editor_v1_adapters","runCommand","import_editor_v1_adapters","useListenTo","import_ui","React","import_react","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}
+{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/components/controls/control-types/select-control.tsx","../src/contexts/control-context.tsx","../src/contexts/element-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/controls/control-types/text-area-control.tsx","../src/components/controls/settings-control.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const { panel, usePanelActions, usePanelStatus } = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';\nimport { SelectControl } from './controls/control-types/select-control';\nimport { TextAreaControl } from './controls/control-types/text-area-control';\nimport { SettingsControl } from '../components/controls/settings-control';\nimport { Stack } from '@elementor/ui';\nimport { ElementContext } from '../contexts/element-context';\n\nconst controlTypes = {\n\tselect: SelectControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst [ selectedElement ] = elements;\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Stack spacing={ 2 }>\n\t\t\t\t\t\t{ elementType.controls.map( ( control ) => {\n\t\t\t\t\t\t\tif ( control.type === 'control' ) {\n\t\t\t\t\t\t\t\tconst ControlComponent =\n\t\t\t\t\t\t\t\t\tcontrolTypes[ control.value.type as keyof typeof controlTypes ];\n\n\t\t\t\t\t\t\t\tif ( ! ControlComponent ) {\n\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<SettingsControl key={ control.value.bind } bind={ control.value.bind }>\n\t\t\t\t\t\t\t\t\t\t<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>\n\t\t\t\t\t\t\t\t\t\t<ControlComponent\n\t\t\t\t\t\t\t\t\t\t\t/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n\t\t\t\t\t\t\t\t\t\t\t{ ...( control.value.props as any ) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</SettingsControl>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getWidgetsCache from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport default function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../../../contexts/control-context';\nimport { PropValue } from '../../../types';\n\ntype Props< T > = {\n\toptions: Array< { label: string; value: T; disabled?: boolean } >;\n};\n\nexport const SelectControl = < T extends PropValue >( { options }: Props< T > ) => {\n\tconst { value, setValue } = useControl< T >();\n\n\tconst handleChange = ( event: SelectChangeEvent< T > ) => {\n\t\tsetValue( event.target.value as T );\n\t};\n\n\treturn (\n\t\t<Select size=\"tiny\" value={ value ?? '' } onChange={ handleChange }>\n\t\t\t{ options.map( ( { label, ...props } ) => (\n\t\t\t\t<MenuItem key={ props.value } { ...props }>\n\t\t\t\t\t{ label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../types';\nimport { useElementContext } from './element-context';\nimport { useWidgetSettings } from '../hooks/use-widget-settings';\nimport { updateSettings } from '../sync/update-settings';\n\nexport type ControlContext< T extends PropValue > = null | {\n\tbind: PropKey;\n\tsetValue: ( value: T ) => void;\n\tvalue: T;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > >( null );\n\nexport function useControl< T extends PropValue >( defaultValue?: T ) {\n\tconst controlContext = useContext< ControlContext< T > >( ControlContext as never );\n\n\tif ( ! controlContext ) {\n\t\tthrow new Error( 'useControl must be used within a ControlContext' );\n\t}\n\n\treturn { ...controlContext, value: controlContext.value ?? defaultValue };\n}\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const ControlContextProvider = ( { bind, children }: Props ) => {\n\tconst { element } = useElementContext();\n\tconst value = useWidgetSettings( { id: element.id, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: element.id,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n};\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn <Context.Provider value={ { element } }>{ children }</Context.Provider>;\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[ id, bind ]\n\t);\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import * as React from 'react';\nimport { TextareaAutosize } from '@elementor/ui';\nimport { useControl } from '../../../contexts/control-context';\n\ntype Props = {\n\tplaceholder?: string;\n};\n\nexport const TextAreaControl = ( { placeholder }: Props ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tsetValue( event.target.value );\n\t};\n\n\treturn (\n\t\t<TextareaAutosize\n\t\t\tsize=\"tiny\"\n\t\t\tminRows={ 3 }\n\t\t\tvalue={ value }\n\t\t\tonChange={ handleChange }\n\t\t\tplaceholder={ placeholder }\n\t\t/>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContextProvider } from '../../contexts/control-context';\nimport { Stack, Typography } from '@elementor/ui';\nimport { PropKey } from '../../types';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nconst SettingsControl = ( { children, bind }: Props ) => (\n\t<Stack\n\t\tspacing={ 1 }\n\t\tflexDirection=\"row\"\n\t\talignItems=\"center\"\n\t\tjustifyContent=\"space-between\"\n\t\tflexWrap=\"wrap\"\n\t\tsx={ { px: 2 } }\n\t>\n\t\t<ControlContextProvider bind={ bind }>{ children }</ControlContextProvider>\n\t</Stack>\n);\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nSettingsControl.Label = Label;\nexport { SettingsControl };\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandStartEvent( 'panel/editor/open' ), () => {\n\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\topen();\n\t\t\t}\n\t\t} );\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","React","useListenTo","import_editor_v1_adapters","useListenTo","React","React","import_react","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","React","import_ui","React","import_ui","import_ui","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { __createPanel as createPanel } from "@elementor/editor-panels";
 
 // src/components/editing-panel.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { __ } from "@wordpress/i18n";
 
 // src/hooks/use-selected-elements.ts
@@ -68,19 +68,85 @@ function useElementType(type) {
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 
 // src/components/controls/control-types/select-control.tsx
-import * as React from "react";
+import * as React3 from "react";
 import { MenuItem, Select } from "@elementor/ui";
 
-// src/components/controls/control-context.ts
+// src/contexts/control-context.tsx
+import * as React2 from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+
+// src/contexts/element-context.tsx
+import * as React from "react";
 import { createContext, useContext } from "react";
-var ControlContext = createContext(null);
+var Context = createContext(null);
+function ElementContext({ children, element }) {
+  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { element } }, children);
+}
+function useElementContext() {
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("useElementContext must be used within a ElementContextProvider");
+  }
+  return context;
+}
+
+// src/hooks/use-widget-settings.ts
+import { commandEndEvent as commandEndEvent3, __privateUseListenTo as useListenTo3 } from "@elementor/editor-v1-adapters";
+
+// src/sync/get-container.ts
+function getContainer(id) {
+  const extendedWindow = window;
+  const container = extendedWindow.elementor?.getContainer?.(id);
+  return container ?? null;
+}
+
+// src/hooks/use-widget-settings.ts
+var useWidgetSettings = ({ id, bind }) => {
+  return useListenTo3(
+    commandEndEvent3("document/elements/settings"),
+    () => {
+      const container = getContainer(id);
+      const value = container?.settings?.get(bind) ?? null;
+      return value;
+    },
+    [id, bind]
+  );
+};
+
+// src/sync/update-settings.ts
+import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
+var updateSettings = ({ id, props }) => {
+  const container = getContainer(id);
+  runCommand("document/elements/settings", {
+    container,
+    settings: {
+      ...props
+    }
+  });
+};
+
+// src/contexts/control-context.tsx
+var ControlContext = createContext2(null);
 function useControl(defaultValue) {
-  const controlContext = useContext(ControlContext);
+  const controlContext = useContext2(ControlContext);
   if (!controlContext) {
     throw new Error("useControl must be used within a ControlContext");
   }
   return { ...controlContext, value: controlContext.value ?? defaultValue };
 }
+var ControlContextProvider = ({ bind, children }) => {
+  const { element } = useElementContext();
+  const value = useWidgetSettings({ id: element.id, bind });
+  const setValue = (newValue) => {
+    updateSettings({
+      id: element.id,
+      props: {
+        [bind]: newValue
+      }
+    });
+  };
+  return /* @__PURE__ */ React2.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
+};
 
 // src/components/controls/control-types/select-control.tsx
 var SelectControl = ({ options }) => {
@@ -88,18 +154,18 @@ var SelectControl = ({ options }) => {
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React.createElement(Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map((option) => /* @__PURE__ */ React.createElement(MenuItem, { key: option.value, value: option.value, disabled: option.disabled }, option.label)));
+  return /* @__PURE__ */ React3.createElement(Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map(({ label, ...props }) => /* @__PURE__ */ React3.createElement(MenuItem, { key: props.value, ...props }, label)));
 };
 
-// src/components/controls/control-types/text-control.tsx
-import * as React2 from "react";
+// src/components/controls/control-types/text-area-control.tsx
+import * as React4 from "react";
 import { TextareaAutosize } from "@elementor/ui";
-var TextControl = ({ placeholder }) => {
+var TextAreaControl = ({ placeholder }) => {
   const { value, setValue } = useControl("");
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React4.createElement(
     TextareaAutosize,
     {
       size: "tiny",
@@ -112,61 +178,9 @@ var TextControl = ({ placeholder }) => {
 };
 
 // src/components/controls/settings-control.tsx
-import * as React3 from "react";
+import * as React5 from "react";
 import { Stack, Typography } from "@elementor/ui";
-
-// src/sync/update-settings.ts
-import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
-
-// src/sync/get-container.ts
-function getContainer(id) {
-  const extendedWindow = window;
-  const container = extendedWindow.elementor?.getContainer?.(id);
-  return container ?? null;
-}
-
-// src/sync/update-settings.ts
-var updateSettings = ({ id, props }) => {
-  const container = getContainer(id);
-  runCommand("document/elements/settings", {
-    container,
-    settings: {
-      ...props
-    }
-  });
-};
-
-// src/hooks/use-widget-settings.ts
-import { commandEndEvent as commandEndEvent3, __privateUseListenTo as useListenTo3 } from "@elementor/editor-v1-adapters";
-var useWidgetSettings = ({ id, bind }) => {
-  return useListenTo3(
-    commandEndEvent3("document/elements/settings"),
-    () => {
-      const container = getContainer(id);
-      const value = container?.settings?.get(bind) ?? null;
-      return value;
-    },
-    []
-  );
-};
-
-// src/components/controls/settings-control.tsx
-var SettingsControl = ({ bind, children, elementID }) => {
-  const value = useWidgetSettings({ id: elementID, bind });
-  const setValue = (newValue) => {
-    updateSettings({
-      id: elementID,
-      props: {
-        [bind]: newValue
-      }
-    });
-  };
-  return /* @__PURE__ */ React3.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
-};
-var Label = ({ children }) => {
-  return /* @__PURE__ */ React3.createElement(Typography, { component: "label", variant: "caption" }, children);
-};
-var Container = ({ children }) => /* @__PURE__ */ React3.createElement(
+var SettingsControl = ({ children, bind }) => /* @__PURE__ */ React5.createElement(
   Stack,
   {
     spacing: 1,
@@ -176,50 +190,39 @@ var Container = ({ children }) => /* @__PURE__ */ React3.createElement(
     flexWrap: "wrap",
     sx: { px: 2 }
   },
-  children
+  /* @__PURE__ */ React5.createElement(ControlContextProvider, { bind }, children)
 );
+var Label = ({ children }) => {
+  return /* @__PURE__ */ React5.createElement(Typography, { component: "label", variant: "caption" }, children);
+};
 SettingsControl.Label = Label;
-SettingsControl.Container = Container;
 
 // src/components/editing-panel.tsx
 import { Stack as Stack2 } from "@elementor/ui";
-
-// src/contexts/settings-controls.tsx
-import * as React4 from "react";
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var Context = createContext2(null);
-function ElementContext({ children, element }) {
-  return /* @__PURE__ */ React4.createElement(Context.Provider, { value: { element } }, children);
-}
-
-// src/components/editing-panel.tsx
 var controlTypes = {
   select: SelectControl,
-  text: TextControl
+  textarea: TextAreaControl
 };
 var EditingPanel = () => {
   const elements = useSelectedElements();
-  const selectedElement = elements[0];
+  const [selectedElement] = elements;
   const elementType = useElementType(selectedElement?.type);
   if (elements.length !== 1 || !elementType) {
     return null;
   }
   const panelTitle = __("Edit %s", "elementor").replace("%s", elementType.title);
-  return /* @__PURE__ */ React5.createElement(Panel, null, /* @__PURE__ */ React5.createElement(PanelHeader, null, /* @__PURE__ */ React5.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React5.createElement(PanelBody, null, /* @__PURE__ */ React5.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React5.createElement(Stack2, { spacing: 2 }, elementType.controls.map((control) => {
+  return /* @__PURE__ */ React6.createElement(Panel, null, /* @__PURE__ */ React6.createElement(PanelHeader, null, /* @__PURE__ */ React6.createElement(PanelHeaderTitle, null, panelTitle)), /* @__PURE__ */ React6.createElement(PanelBody, null, /* @__PURE__ */ React6.createElement(ElementContext, { element: selectedElement }, /* @__PURE__ */ React6.createElement(Stack2, { spacing: 2 }, elementType.controls.map((control) => {
     if (control.type === "control") {
       const ControlComponent = controlTypes[control.value.type];
       if (!ControlComponent) {
         return null;
       }
-      return /* @__PURE__ */ React5.createElement(
-        SettingsControl,
+      return /* @__PURE__ */ React6.createElement(SettingsControl, { key: control.value.bind, bind: control.value.bind }, /* @__PURE__ */ React6.createElement(SettingsControl.Label, null, control.value.label), /* @__PURE__ */ React6.createElement(
+        ControlComponent,
         {
-          key: control.value.bind,
-          bind: control.value.bind,
-          elementID: elements[0].id
-        },
-        /* @__PURE__ */ React5.createElement(SettingsControl.Container, null, /* @__PURE__ */ React5.createElement(SettingsControl.Label, null, control.value.label), /* @__PURE__ */ React5.createElement(ControlComponent, { ...control.value.props }))
-      );
+          ...control.value.props
+        }
+      ));
     }
     return null;
   })))));

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/components/controls/control-types/select-control.tsx","../src/components/controls/control-context.ts","../src/components/controls/control-types/text-control.tsx","../src/components/controls/settings-control.tsx","../src/sync/update-settings.ts","../src/sync/get-container.ts","../src/hooks/use-widget-settings.ts","../src/contexts/settings-controls.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const { panel, usePanelActions, usePanelStatus } = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';\nimport { SelectControl } from './controls/control-types/select-control';\nimport { TextControl } from './controls/control-types/text-control';\nimport { SettingsControl } from '../components/controls/settings-control';\nimport { Stack } from '@elementor/ui';\nimport { ElementContext } from '../contexts/settings-controls';\n\nconst controlTypes = {\n\tselect: SelectControl,\n\ttext: TextControl,\n};\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst selectedElement = elements[ 0 ];\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Stack spacing={ 2 }>\n\t\t\t\t\t\t{ elementType.controls.map( ( control ) => {\n\t\t\t\t\t\t\tif ( control.type === 'control' ) {\n\t\t\t\t\t\t\t\tconst ControlComponent =\n\t\t\t\t\t\t\t\t\tcontrolTypes[ control.value.type as keyof typeof controlTypes ];\n\n\t\t\t\t\t\t\t\tif ( ! ControlComponent ) {\n\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<SettingsControl\n\t\t\t\t\t\t\t\t\t\tkey={ control.value.bind }\n\t\t\t\t\t\t\t\t\t\tbind={ control.value.bind }\n\t\t\t\t\t\t\t\t\t\telementID={ elements[ 0 ].id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<SettingsControl.Container>\n\t\t\t\t\t\t\t\t\t\t\t<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>\n\t\t\t\t\t\t\t\t\t\t\t{ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }\n\t\t\t\t\t\t\t\t\t\t\t<ControlComponent { ...( control.value.props as any ) } />\n\t\t\t\t\t\t\t\t\t\t</SettingsControl.Container>\n\t\t\t\t\t\t\t\t\t</SettingsControl>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getWidgetsCache from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport default function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { PropValue } from '../../../types';\n\nexport type SelectControlProps< T > = {\n\toptions: Array< { label: string; value: T; disabled?: boolean } >;\n};\n\nexport const SelectControl = < T extends PropValue >( { options }: SelectControlProps< T > ) => {\n\tconst { value, setValue } = useControl< T >();\n\n\tconst handleChange = ( event: SelectChangeEvent< T > ) => {\n\t\tsetValue( event.target.value as T );\n\t};\n\n\treturn (\n\t\t<Select size=\"tiny\" value={ value ?? '' } onChange={ handleChange }>\n\t\t\t{ options.map( ( option ) => (\n\t\t\t\t<MenuItem key={ option.value } value={ option.value } disabled={ option.disabled }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../../types';\n\nexport type ControlContext< T extends PropValue > = null | {\n\tbind: PropKey;\n\tsetValue: ( value: T ) => void;\n\tvalue: T;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > >( null );\n\nexport function useControl< T extends PropValue >( defaultValue?: T ) {\n\tconst controlContext = useContext< ControlContext< T > >( ControlContext as never );\n\n\tif ( ! controlContext ) {\n\t\tthrow new Error( 'useControl must be used within a ControlContext' );\n\t}\n\n\treturn { ...controlContext, value: controlContext.value ?? defaultValue };\n}\n","import * as React from 'react';\nimport { TextareaAutosize } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport type TextControlProps = {\n\tplaceholder?: string;\n};\n\nexport const TextControl = ( { placeholder }: TextControlProps ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tsetValue( event.target.value );\n\t};\n\n\treturn (\n\t\t<TextareaAutosize\n\t\t\tsize=\"tiny\"\n\t\t\tminRows={ 3 }\n\t\t\tvalue={ value }\n\t\t\tonChange={ handleChange }\n\t\t\tplaceholder={ placeholder }\n\t\t/>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from './control-context';\nimport { Stack, Typography } from '@elementor/ui';\nimport { updateSettings } from '../../sync/update-settings';\nimport { useWidgetSettings } from '../../hooks/use-widget-settings';\nimport { PropKey, PropValue } from '../../types';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n\telementID: Element[ 'id' ];\n};\n\nconst SettingsControl = ( { bind, children, elementID }: Props ) => {\n\tconst value = useWidgetSettings( { id: elementID, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: elementID,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;\n};\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nconst Container = ( { children }: { children: React.ReactNode } ) => (\n\t<Stack\n\t\tspacing={ 1 }\n\t\tflexDirection=\"row\"\n\t\talignItems=\"center\"\n\t\tjustifyContent=\"space-between\"\n\t\tflexWrap=\"wrap\"\n\t\tsx={ { px: 2 } }\n\t>\n\t\t{ children }\n\t</Stack>\n);\n\nSettingsControl.Label = Label;\nSettingsControl.Container = Container;\n\nexport { SettingsControl };\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[]\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n};\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn <Context.Provider value={ { element } }>{ children }</Context.Provider>;\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandStartEvent( 'panel/editor/open' ), () => {\n\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\topen();\n\t\t\t}\n\t\t} );\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["React","useListenTo","commandEndEvent","useListenTo","commandEndEvent","React","React","commandEndEvent","useListenTo","useListenTo","commandEndEvent","Stack","React","createContext","useContext","Stack"]}
+{"version":3,"sources":["../src/panel.ts","../src/components/editing-panel.tsx","../src/hooks/use-selected-elements.ts","../src/sync/get-selected-elements.ts","../src/hooks/use-element-type.ts","../src/sync/get-widgets-cache.ts","../src/components/controls/control-types/select-control.tsx","../src/contexts/control-context.tsx","../src/contexts/element-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/controls/control-types/text-area-control.tsx","../src/components/controls/settings-control.tsx","../src/init.ts","../src/sync/should-use-v2-panel.ts","../src/hooks/use-open-editor-panel.ts","../src/components/editing-panel-hooks.tsx","../src/index.ts"],"sourcesContent":["import { __createPanel as createPanel } from '@elementor/editor-panels';\nimport { EditingPanel } from './components/editing-panel';\n\nexport const { panel, usePanelActions, usePanelStatus } = createPanel( {\n\tid: 'editing-panel',\n\tcomponent: EditingPanel,\n} );\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport useSelectedElements from '../hooks/use-selected-elements';\nimport useElementType from '../hooks/use-element-type';\nimport { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';\nimport { SelectControl } from './controls/control-types/select-control';\nimport { TextAreaControl } from './controls/control-types/text-area-control';\nimport { SettingsControl } from '../components/controls/settings-control';\nimport { Stack } from '@elementor/ui';\nimport { ElementContext } from '../contexts/element-context';\n\nconst controlTypes = {\n\tselect: SelectControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const EditingPanel = () => {\n\tconst elements = useSelectedElements();\n\n\tconst [ selectedElement ] = elements;\n\n\tconst elementType = useElementType( selectedElement?.type );\n\n\tif ( elements.length !== 1 || ! elementType ) {\n\t\treturn null;\n\t}\n\n\t/* translators: %s: Element type title. */\n\tconst panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );\n\n\treturn (\n\t\t<Panel>\n\t\t\t<PanelHeader>\n\t\t\t\t<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>\n\t\t\t</PanelHeader>\n\t\t\t<PanelBody>\n\t\t\t\t<ElementContext element={ selectedElement }>\n\t\t\t\t\t<Stack spacing={ 2 }>\n\t\t\t\t\t\t{ elementType.controls.map( ( control ) => {\n\t\t\t\t\t\t\tif ( control.type === 'control' ) {\n\t\t\t\t\t\t\t\tconst ControlComponent =\n\t\t\t\t\t\t\t\t\tcontrolTypes[ control.value.type as keyof typeof controlTypes ];\n\n\t\t\t\t\t\t\t\tif ( ! ControlComponent ) {\n\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<SettingsControl key={ control.value.bind } bind={ control.value.bind }>\n\t\t\t\t\t\t\t\t\t\t<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>\n\t\t\t\t\t\t\t\t\t\t<ControlComponent\n\t\t\t\t\t\t\t\t\t\t\t/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n\t\t\t\t\t\t\t\t\t\t\t{ ...( control.value.props as any ) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</SettingsControl>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</Stack>\n\t\t\t\t</ElementContext>\n\t\t\t</PanelBody>\n\t\t</Panel>\n\t);\n};\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getSelectedElements from '../sync/get-selected-elements';\n\nexport default function useSelectedElements() {\n\treturn useListenTo(\n\t\t[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],\n\t\t() => getSelectedElements()\n\t);\n}\n","import { ExtendedWindow } from './types';\nimport { Element } from '../types';\n\nexport default function getSelectedElements(): Element[] {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\tconst selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];\n\n\treturn selectedElements.reduce< Element[] >( ( acc, el ) => {\n\t\tconst type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );\n\n\t\tif ( type ) {\n\t\t\tacc.push( {\n\t\t\t\tid: el.model.get( 'id' ),\n\t\t\t\ttype,\n\t\t\t} );\n\t\t}\n\n\t\treturn acc;\n\t}, [] );\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport getWidgetsCache from '../sync/get-widgets-cache';\nimport { ElementType } from '../types';\n\nexport default function useElementType( type?: string ) {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'editor/documents/load' ),\n\t\t(): ElementType | null => {\n\t\t\tif ( ! type ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst widgetsCache = getWidgetsCache();\n\t\t\tconst elementType = widgetsCache?.[ type ];\n\n\t\t\tif ( ! elementType?.atomic_controls ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tkey: type,\n\t\t\t\tcontrols: elementType.atomic_controls,\n\t\t\t\ttitle: elementType.title,\n\t\t\t};\n\t\t},\n\t\t[ type ]\n\t);\n}\n","import { ExtendedWindow } from './types';\n\nexport default function getWidgetsCache() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow?.elementor?.widgetsCache || null;\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../../../contexts/control-context';\nimport { PropValue } from '../../../types';\n\ntype Props< T > = {\n\toptions: Array< { label: string; value: T; disabled?: boolean } >;\n};\n\nexport const SelectControl = < T extends PropValue >( { options }: Props< T > ) => {\n\tconst { value, setValue } = useControl< T >();\n\n\tconst handleChange = ( event: SelectChangeEvent< T > ) => {\n\t\tsetValue( event.target.value as T );\n\t};\n\n\treturn (\n\t\t<Select size=\"tiny\" value={ value ?? '' } onChange={ handleChange }>\n\t\t\t{ options.map( ( { label, ...props } ) => (\n\t\t\t\t<MenuItem key={ props.value } { ...props }>\n\t\t\t\t\t{ label }\n\t\t\t\t</MenuItem>\n\t\t\t) ) }\n\t\t</Select>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../types';\nimport { useElementContext } from './element-context';\nimport { useWidgetSettings } from '../hooks/use-widget-settings';\nimport { updateSettings } from '../sync/update-settings';\n\nexport type ControlContext< T extends PropValue > = null | {\n\tbind: PropKey;\n\tsetValue: ( value: T ) => void;\n\tvalue: T;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > >( null );\n\nexport function useControl< T extends PropValue >( defaultValue?: T ) {\n\tconst controlContext = useContext< ControlContext< T > >( ControlContext as never );\n\n\tif ( ! controlContext ) {\n\t\tthrow new Error( 'useControl must be used within a ControlContext' );\n\t}\n\n\treturn { ...controlContext, value: controlContext.value ?? defaultValue };\n}\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const ControlContextProvider = ( { bind, children }: Props ) => {\n\tconst { element } = useElementContext();\n\tconst value = useWidgetSettings( { id: element.id, bind } );\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateSettings( {\n\t\t\tid: element.id,\n\t\t\tprops: {\n\t\t\t\t[ bind ]: newValue,\n\t\t\t},\n\t\t} );\n\t};\n\n\treturn <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { Element } from '../types';\n\ntype ContextValue = {\n\telement: Element;\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\telement: Element;\n\tchildren?: ReactNode;\n};\n\nexport function ElementContext( { children, element }: Props ) {\n\treturn <Context.Provider value={ { element } }>{ children }</Context.Provider>;\n}\n\nexport function useElementContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'useElementContext must be used within a ElementContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[ id, bind ]\n\t);\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import * as React from 'react';\nimport { TextareaAutosize } from '@elementor/ui';\nimport { useControl } from '../../../contexts/control-context';\n\ntype Props = {\n\tplaceholder?: string;\n};\n\nexport const TextAreaControl = ( { placeholder }: Props ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tsetValue( event.target.value );\n\t};\n\n\treturn (\n\t\t<TextareaAutosize\n\t\t\tsize=\"tiny\"\n\t\t\tminRows={ 3 }\n\t\t\tvalue={ value }\n\t\t\tonChange={ handleChange }\n\t\t\tplaceholder={ placeholder }\n\t\t/>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContextProvider } from '../../contexts/control-context';\nimport { Stack, Typography } from '@elementor/ui';\nimport { PropKey } from '../../types';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nconst SettingsControl = ( { children, bind }: Props ) => (\n\t<Stack\n\t\tspacing={ 1 }\n\t\tflexDirection=\"row\"\n\t\talignItems=\"center\"\n\t\tjustifyContent=\"space-between\"\n\t\tflexWrap=\"wrap\"\n\t\tsx={ { px: 2 } }\n\t>\n\t\t<ControlContextProvider bind={ bind }>{ children }</ControlContextProvider>\n\t</Stack>\n);\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nSettingsControl.Label = Label;\nexport { SettingsControl };\n","import { panel } from './panel';\nimport { injectIntoLogic } from '@elementor/editor';\nimport { shouldUseV2Panel } from './sync/should-use-v2-panel';\nimport { EditingPanelHooks } from './components/editing-panel-hooks';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { __privateBlockDataCommand as blockDataCommand } from '@elementor/editor-v1-adapters';\n\nexport default function init() {\n\tregisterPanel( panel );\n\tblockV1Panel();\n\n\tinjectIntoLogic( {\n\t\tid: 'editing-panel-hooks',\n\t\tcomponent: EditingPanelHooks,\n\t} );\n}\n\nconst blockV1Panel = () => {\n\tblockDataCommand( {\n\t\tcommand: 'panel/editor/open',\n\t\tcondition: shouldUseV2Panel,\n\t} );\n};\n","import getSelectedElements from './get-selected-elements';\nimport getWidgetsCache from './get-widgets-cache';\n\nexport const shouldUseV2Panel = () => {\n\tconst selectedElements = getSelectedElements();\n\tconst widgetCache = getWidgetsCache();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn false;\n\t}\n\n\t// Check if the selected element has atomic controls, meaning it's a V2 element.\n\treturn !! widgetCache?.[ selectedElements[ 0 ].type ]?.atomic_controls;\n};\n","import { useEffect } from 'react';\nimport { commandStartEvent, __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\nimport { usePanelActions } from '../panel';\nimport { shouldUseV2Panel } from '../sync/should-use-v2-panel';\n\nexport const useOpenEditorPanel = () => {\n\tconst { open } = usePanelActions();\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandStartEvent( 'panel/editor/open' ), () => {\n\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\topen();\n\t\t\t}\n\t\t} );\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n};\n","import { useOpenEditorPanel } from '../hooks/use-open-editor-panel';\n\nexport const EditingPanelHooks = () => {\n\tuseOpenEditorPanel();\n\n\treturn null;\n};\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["React","useListenTo","commandEndEvent","useListenTo","commandEndEvent","React","React","createContext","useContext","commandEndEvent","useListenTo","useListenTo","commandEndEvent","createContext","useContext","React","React","Stack","Stack"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,5 +41,5 @@
   "peerDependencies": {
     "react": "^18.3.1"
   },
-  "gitHead": "10fd8663495a9ced2521f27a74879684ed0cf322"
+  "gitHead": "798651db4dee37daa852f6e54654b6b3f961027b"
 }

package/src/components/controls/__tests__/settings-control.test.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { SettingsControl } from '../settings-control';
-import { useControl } from '../control-context';
+import { useControl } from '../../../contexts/control-context';
 import { updateSettings } from '../../../sync/update-settings';
 import { useWidgetSettings } from '../../../hooks/use-widget-settings';
+import { ElementContext } from '../../../contexts/element-context';
+import { Element } from '../../../types';
 
 jest.mock( '../../../sync/update-settings' );
 jest.mock( '../../../hooks/use-widget-settings' );
@@ -15,14 +17,16 @@ describe( 'SettingsControl', () => {
 
 	it( 'should set the initial value', () => {
 		// Arrange.
-		const elementID = '1-heading';
+		const element = { id: '1-heading' } as Element;
 		const bind = 'text';
 
 		// Act.
 		render(
-			<SettingsControl bind={ bind } elementID={ elementID }>
-				<MockControl />
-			</SettingsControl>
+			<ElementContext element={ element }>
+				<SettingsControl bind={ bind }>
+					<MockControl />
+				</SettingsControl>
+			</ElementContext>
 		);
 
 		// Assert.
@@ -31,14 +35,16 @@ describe( 'SettingsControl', () => {
 
 	it( 'should pass the updated payload when input value changes', () => {
 		// Arrange.
-		const elementID = '1-heading';
+		const element = { id: '1-heading' } as Element;
 		const bind = 'text';
 
 		// Act.
 		render(
-			<SettingsControl bind={ bind } elementID={ elementID }>
-				<MockControl />
-			</SettingsControl>
+			<ElementContext element={ element }>
+				<SettingsControl bind={ bind }>
+					<MockControl />
+				</SettingsControl>
+			</ElementContext>
 		);
 
 		const input = screen.getByRole( 'textbox', { name: bind } );
@@ -48,7 +54,7 @@ describe( 'SettingsControl', () => {
 
 		// Assert.
 		expect( jest.mocked( updateSettings ) ).toHaveBeenCalledWith( {
-			id: elementID,
+			id: element.id,
 			props: { [ bind ]: newValue },
 		} );
 	} );

package/src/components/controls/control-types/__tests__/select-control.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { ControlContext } from '../../control-context';
+import { ControlContext } from '../../../../contexts/control-context';
 import { SelectControl } from '../select-control';
 
 describe( 'SelectControl', () => {

package/src/components/controls/control-types/__tests__/{text-control.test.tsx → text-area-control.test.tsx}

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { TextControl } from '../text-control';
-import { ControlContext } from '../../control-context';
+import { TextAreaControl } from '../text-area-control';
+import { ControlContext } from '../../../../contexts/control-context';
 
-describe( 'TextControl', () => {
+describe( 'TextAreaControl', () => {
 	it( 'should pass the updated payload when input value changes', () => {
 		// Arrange.
 		const setValue = jest.fn();
@@ -11,7 +11,7 @@ describe( 'TextControl', () => {
 		// Act.
 		render(
 			<ControlContext.Provider value={ { setValue, value: 'Hi', bind: 'text' } }>
-				<TextControl placeholder="type text here" />
+				<TextAreaControl placeholder="type text here" />
 			</ControlContext.Provider>
 		);
 

package/src/components/controls/control-types/select-control.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';
-import { useControl } from '../control-context';
+import { useControl } from '../../../contexts/control-context';
 import { PropValue } from '../../../types';
 
-export type SelectControlProps< T > = {
+type Props< T > = {
 	options: Array< { label: string; value: T; disabled?: boolean } >;
 };
 
-export const SelectControl = < T extends PropValue >( { options }: SelectControlProps< T > ) => {
+export const SelectControl = < T extends PropValue >( { options }: Props< T > ) => {
 	const { value, setValue } = useControl< T >();
 
 	const handleChange = ( event: SelectChangeEvent< T > ) => {
@@ -16,9 +16,9 @@ export const SelectControl = < T extends PropValue >( { options }: SelectControl
 
 	return (
 		<Select size="tiny" value={ value ?? '' } onChange={ handleChange }>
-			{ options.map( ( option ) => (
-				<MenuItem key={ option.value } value={ option.value } disabled={ option.disabled }>
-					{ option.label }
+			{ options.map( ( { label, ...props } ) => (
+				<MenuItem key={ props.value } { ...props }>
+					{ label }
 				</MenuItem>
 			) ) }
 		</Select>

package/src/components/controls/control-types/{text-control.tsx → text-area-control.tsx}

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { TextareaAutosize } from '@elementor/ui';
-import { useControl } from '../control-context';
+import { useControl } from '../../../contexts/control-context';
 
-export type TextControlProps = {
+type Props = {
 	placeholder?: string;
 };
 
-export const TextControl = ( { placeholder }: TextControlProps ) => {
+export const TextAreaControl = ( { placeholder }: Props ) => {
 	const { value, setValue } = useControl< string >( '' );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {

package/src/components/controls/settings-control.tsx

@@ -1,40 +1,14 @@
 import * as React from 'react';
-import { ControlContext } from './control-context';
+import { ControlContextProvider } from '../../contexts/control-context';
 import { Stack, Typography } from '@elementor/ui';
-import { updateSettings } from '../../sync/update-settings';
-import { useWidgetSettings } from '../../hooks/use-widget-settings';
-import { PropKey, PropValue } from '../../types';
+import { PropKey } from '../../types';
 
 type Props = {
 	bind: PropKey;
 	children: React.ReactNode;
-	elementID: Element[ 'id' ];
 };
 
-const SettingsControl = ( { bind, children, elementID }: Props ) => {
-	const value = useWidgetSettings( { id: elementID, bind } );
-
-	const setValue = ( newValue: PropValue ) => {
-		updateSettings( {
-			id: elementID,
-			props: {
-				[ bind ]: newValue,
-			},
-		} );
-	};
-
-	return <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;
-};
-
-const Label = ( { children }: { children: React.ReactNode } ) => {
-	return (
-		<Typography component="label" variant="caption">
-			{ children }
-		</Typography>
-	);
-};
-
-const Container = ( { children }: { children: React.ReactNode } ) => (
+const SettingsControl = ( { children, bind }: Props ) => (
 	<Stack
 		spacing={ 1 }
 		flexDirection="row"
@@ -43,11 +17,17 @@ const Container = ( { children }: { children: React.ReactNode } ) => (
 		flexWrap="wrap"
 		sx={ { px: 2 } }
 	>
-		{ children }
+		<ControlContextProvider bind={ bind }>{ children }</ControlContextProvider>
 	</Stack>
 );
 
-SettingsControl.Label = Label;
-SettingsControl.Container = Container;
+const Label = ( { children }: { children: React.ReactNode } ) => {
+	return (
+		<Typography component="label" variant="caption">
+			{ children }
+		</Typography>
+	);
+};
 
+SettingsControl.Label = Label;
 export { SettingsControl };

package/src/components/editing-panel.tsx

@@ -4,20 +4,20 @@ import useSelectedElements from '../hooks/use-selected-elements';
 import useElementType from '../hooks/use-element-type';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
 import { SelectControl } from './controls/control-types/select-control';
-import { TextControl } from './controls/control-types/text-control';
+import { TextAreaControl } from './controls/control-types/text-area-control';
 import { SettingsControl } from '../components/controls/settings-control';
 import { Stack } from '@elementor/ui';
-import { ElementContext } from '../contexts/settings-controls';
+import { ElementContext } from '../contexts/element-context';
 
 const controlTypes = {
 	select: SelectControl,
-	text: TextControl,
+	textarea: TextAreaControl,
 };
 
 export const EditingPanel = () => {
 	const elements = useSelectedElements();
 
-	const selectedElement = elements[ 0 ];
+	const [ selectedElement ] = elements;
 
 	const elementType = useElementType( selectedElement?.type );
 
@@ -46,16 +46,12 @@ export const EditingPanel = () => {
 								}
 
 								return (
-									<SettingsControl
-										key={ control.value.bind }
-										bind={ control.value.bind }
-										elementID={ elements[ 0 ].id }
-									>
-										<SettingsControl.Container>
-											<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>
-											{ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }
-											<ControlComponent { ...( control.value.props as any ) } />
-										</SettingsControl.Container>
+									<SettingsControl key={ control.value.bind } bind={ control.value.bind }>
+										<SettingsControl.Label>{ control.value.label }</SettingsControl.Label>
+										<ControlComponent
+											/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+											{ ...( control.value.props as any ) }
+										/>
 									</SettingsControl>
 								);
 							}

package/src/contexts/control-context.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { createContext, useContext } from 'react';
+import { PropKey, PropValue } from '../types';
+import { useElementContext } from './element-context';
+import { useWidgetSettings } from '../hooks/use-widget-settings';
+import { updateSettings } from '../sync/update-settings';
+
+export type ControlContext< T extends PropValue > = null | {
+	bind: PropKey;
+	setValue: ( value: T ) => void;
+	value: T;
+};
+
+export const ControlContext = createContext< ControlContext< PropValue > >( null );
+
+export function useControl< T extends PropValue >( defaultValue?: T ) {
+	const controlContext = useContext< ControlContext< T > >( ControlContext as never );
+
+	if ( ! controlContext ) {
+		throw new Error( 'useControl must be used within a ControlContext' );
+	}
+
+	return { ...controlContext, value: controlContext.value ?? defaultValue };
+}
+
+type Props = {
+	bind: PropKey;
+	children: React.ReactNode;
+};
+
+export const ControlContextProvider = ( { bind, children }: Props ) => {
+	const { element } = useElementContext();
+	const value = useWidgetSettings( { id: element.id, bind } );
+
+	const setValue = ( newValue: PropValue ) => {
+		updateSettings( {
+			id: element.id,
+			props: {
+				[ bind ]: newValue,
+			},
+		} );
+	};
+
+	return <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;
+};

package/src/hooks/__tests__/use-widget-settings.test.ts

@@ -80,4 +80,49 @@ describe( 'useWidgetSettings', () => {
 		// Assert.
 		expect( result.current ).toEqual( 'Goodbye, World!' );
 	} );
+
+	it( 'should get new snapshot for different elements', () => {
+		// Arrange.
+		jest.mocked( getContainer ).mockImplementation(
+			( id: string ) =>
+				( {
+					'element-id-1': mockV1Element( { settings: { prop: 'value' } } ),
+					'element-id-2': mockV1Element( { settings: { prop: 'value-2' } } ),
+				} )[ id ] || null
+		);
+
+		// Act.
+		const { result, rerender } = renderHook( ( props ) => useWidgetSettings( props ), {
+			initialProps: { bind: 'prop', id: 'element-id-1' },
+		} );
+
+		// Assert.
+		expect( result.current ).toEqual( 'value' );
+
+		// Act.
+		rerender( { bind: 'prop', id: 'element-id-2' } );
+
+		// Assert.
+		expect( result.current ).toEqual( 'value-2' );
+	} );
+
+	it( 'should get new snapshot for different binds', () => {
+		// Arrange.
+		jest.mocked( getContainer ).mockReturnValue(
+			mockV1Element( { settings: { prop: 'value', 'prop-2': 'value-2' } } )
+		);
+
+		// Act.
+		const { rerender, result } = renderHook( ( props ) => useWidgetSettings( props ), {
+			initialProps: { bind: 'prop', id: 'element-id' },
+		} );
+
+		expect( result.current ).toEqual( 'value' );
+
+		// Act.
+		rerender( { bind: 'prop-2', id: 'element-id' } );
+
+		// Assert.
+		expect( result.current ).toEqual( 'value-2' );
+	} );
 } );

package/src/hooks/use-widget-settings.ts

@@ -11,6 +11,6 @@ export const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ):
 
 			return value;
 		},
-		[]
+		[ id, bind ]
 	);
 };

package/src/components/controls/control-context.ts

@@ -1,20 +0,0 @@
-import { createContext, useContext } from 'react';
-import { PropKey, PropValue } from '../../types';
-
-export type ControlContext< T extends PropValue > = null | {
-	bind: PropKey;
-	setValue: ( value: T ) => void;
-	value: T;
-};
-
-export const ControlContext = createContext< ControlContext< PropValue > >( null );
-
-export function useControl< T extends PropValue >( defaultValue?: T ) {
-	const controlContext = useContext< ControlContext< T > >( ControlContext as never );
-
-	if ( ! controlContext ) {
-		throw new Error( 'useControl must be used within a ControlContext' );
-	}
-
-	return { ...controlContext, value: controlContext.value ?? defaultValue };
-}