@elementor/editor-editing-panel 0.4.1 → 0.5.0

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
@@ -27,10 +27,7 @@ function getSelectedElements() {
 // src/hooks/use-selected-elements.ts
 function useSelectedElements() {
   return useListenTo(
-    [
-      commandEndEvent("document/elements/select"),
-      commandEndEvent("document/elements/deselect")
-    ],
+    [commandEndEvent("document/elements/select"), commandEndEvent("document/elements/deselect")],
     () => getSelectedElements()
   );
 }
@@ -71,46 +68,30 @@ 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);
-function useControl(defaultValue) {
-  const controlContext = useContext(ControlContext);
-  if (!controlContext) {
-    throw new Error("useControl must be used within a ControlContext");
+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 { ...controlContext, value: controlContext.value ?? defaultValue };
+  return context;
 }
 
-// src/components/controls/control-types/select-control.tsx
-var SelectControl = ({ options }) => {
-  const { value, setValue } = useControl();
-  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)));
-};
-
-// src/components/controls/control-types/text-control.tsx
-import * as React2 from "react";
-import { TextareaAutosize } from "@elementor/ui";
-var TextControl = ({ placeholder }) => {
-  const { value, setValue } = useControl("");
-  const handleChange = (event) => {
-    setValue(event.target.value);
-  };
-  return /* @__PURE__ */ React2.createElement(TextareaAutosize, { size: "tiny", minRows: 3, value, onChange: handleChange, placeholder });
-};
-
-// src/components/controls/settings-control.tsx
-import * as React3 from "react";
-import { Stack, Typography } from "@elementor/ui";
-
-// src/sync/update-settings.ts
-import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
+// 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) {
@@ -119,19 +100,7 @@ function 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"),
@@ -144,23 +113,74 @@ var useWidgetSettings = ({ id, bind }) => {
   );
 };
 
-// src/components/controls/settings-control.tsx
-var SettingsControl = ({ bind, children, elementID }) => {
-  const value = useWidgetSettings({ id: elementID, 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 = 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: elementID,
+      id: element.id,
       props: {
         [bind]: newValue
       }
     });
   };
-  return /* @__PURE__ */ React3.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
+  return /* @__PURE__ */ React2.createElement(ControlContext.Provider, { value: { setValue, value, bind } }, children);
 };
-var Label = ({ children }) => {
-  return /* @__PURE__ */ React3.createElement(Typography, { component: "label", variant: "caption" }, children);
+
+// src/components/controls/control-types/select-control.tsx
+var SelectControl = ({ options }) => {
+  const { value, setValue } = useControl();
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  return /* @__PURE__ */ React3.createElement(Select, { size: "tiny", value: value ?? "", onChange: handleChange }, options.map(({ label, ...props }) => /* @__PURE__ */ React3.createElement(MenuItem, { key: props.value, ...props }, label)));
 };
-var Container = ({ children }) => /* @__PURE__ */ React3.createElement(
+
+// src/components/controls/control-types/text-area-control.tsx
+import * as React4 from "react";
+import { TextareaAutosize } from "@elementor/ui";
+var TextAreaControl = ({ placeholder }) => {
+  const { value, setValue } = useControl("");
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  return /* @__PURE__ */ React4.createElement(
+    TextareaAutosize,
+    {
+      size: "tiny",
+      minRows: 3,
+      value,
+      onChange: handleChange,
+      placeholder
+    }
+  );
+};
+
+// src/components/controls/settings-control.tsx
+import * as React5 from "react";
+import { Stack, Typography } from "@elementor/ui";
+var SettingsControl = ({ children, bind }) => /* @__PURE__ */ React5.createElement(
   Stack,
   {
     spacing: 1,
@@ -170,53 +190,46 @@ 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, { 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 })));
+      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,
+        {
+          ...control.value.props
+        }
+      ));
     }
     return null;
   })))));
 };
 
 // src/panel.ts
-var {
-  panel,
-  usePanelActions,
-  usePanelStatus
-} = createPanel({
+var { panel, usePanelActions, usePanelStatus } = createPanel({
   id: "editing-panel",
   component: EditingPanel
 });
@@ -240,14 +253,11 @@ import { commandStartEvent, __privateListenTo as listenTo } from "@elementor/edi
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
   useEffect(() => {
-    return listenTo(
-      commandStartEvent("panel/editor/open"),
-      () => {
-        if (shouldUseV2Panel()) {
-          open();
-        }
+    return listenTo(commandStartEvent("panel/editor/open"), () => {
+      if (shouldUseV2Panel()) {
+        open();
       }
-    );
+    });
   }, []);
 };
 

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 {\n\tpanel,\n\tusePanelActions,\n\tusePanelStatus,\n} = 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{\n\t\t\t\t\t\t\telementType.controls.map( ( control ) => {\n\t\t\t\t\t\t\t\tif ( control.type === 'control' ) {\n\t\t\t\t\t\t\t\t\tconst ControlComponent = controlTypes[ control.value.type as keyof typeof controlTypes ];\n\n\t\t\t\t\t\t\t\t\tif ( ! ControlComponent ) {\n\t\t\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<SettingsControl key={ control.value.bind } bind={ control.value.bind } elementID={ elements[ 0 ].id }>\n\t\t\t\t\t\t\t\t\t\t\t<SettingsControl.Container>\n\t\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\t{ /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ }\n\t\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\t</SettingsControl.Container>\n\t\t\t\t\t\t\t\t\t\t</SettingsControl>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t} )\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[\n\t\t\tcommandEndEvent( 'document/elements/select' ),\n\t\t\tcommandEndEvent( 'document/elements/deselect' ),\n\t\t],\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 size=\"tiny\" minRows={ 3 }value={ value } onChange={ handleChange } placeholder={ placeholder } />\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 (\n\t\t<ControlContext.Provider value={ { setValue, value, bind } }>\n\t\t\t{ children }\n\t\t</ControlContext.Provider>\n\t);\n};\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn <Typography component=\"label\" variant=\"caption\">{ children }</Typography>;\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 (\n\t\t<Context.Provider value={ { element } }>\n\t\t\t{ children }\n\t\t</Context.Provider>\n\t);\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(\n\t\t\tcommandStartEvent( 'panel/editor/open' ),\n\t\t\t() => {\n\t\t\t\tif ( shouldUseV2Panel() ) {\n\t\t\t\t\topen();\n\t\t\t\t}\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[]\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,45 +1,45 @@
 {
-	"name": "@elementor/editor-editing-panel",
-	"version": "0.4.1",
-	"private": false,
-	"author": "Elementor Team",
-	"homepage": "https://elementor.com/",
-	"license": "GPL-3.0-or-later",
-	"main": "dist/index.js",
-	"module": "dist/index.mjs",
-	"types": "dist/index.d.ts",
-	"exports": {
-		".": {
-			"import": "./dist/index.mjs",
-			"require": "./dist/index.js",
-			"types": "./dist/index.d.ts"
-		},
-		"./package.json": "./package.json"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/elementor/elementor-packages.git",
-		"directory": "packages/core/editor-editing-panel"
-	},
-	"bugs": {
-		"url": "https://github.com/elementor/elementor-packages/issues"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"build": "tsup --config=../../tsup.build.ts",
-		"dev": "tsup --config=../../tsup.dev.ts"
-	},
-	"dependencies": {
-		"@elementor/editor": "^0.11.1",
-		"@elementor/editor-panels": "^0.4.16",
-		"@elementor/editor-v1-adapters": "^0.7.0",
-		"@elementor/ui": "^1.4.61",
-		"@wordpress/i18n": "^4.45.0"
-	},
-	"peerDependencies": {
-		"react": "^18.3.1"
-	},
-	"gitHead": "ea48212f4a9084fa323c3e70af093c5c0f6aa2d1"
+  "name": "@elementor/editor-editing-panel",
+  "version": "0.5.0",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/core/editor-editing-panel"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/editor": "^0.11.2",
+    "@elementor/editor-panels": "^0.4.17",
+    "@elementor/editor-v1-adapters": "^0.8.0",
+    "@elementor/ui": "^1.4.61",
+    "@wordpress/i18n": "^4.45.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "gitHead": "7f9c4e85193d2855159a7b3e48f4d8b1f101535e"
 }

package/src/__tests__/utils.ts

@@ -4,8 +4,8 @@ export function mockV1Element( {
 	model: partialModel = {},
 	settings: partialSettings = {},
 }: {
-	model?: Partial<V1ElementModelProps>,
-	settings?: Partial<V1ElementSettingsProps>
+	model?: Partial< V1ElementModelProps >;
+	settings?: Partial< V1ElementSettingsProps >;
 } ): V1Element {
 	const model = {
 		elType: 'widget',

package/src/components/__tests__/editing-panel.test.tsx

@@ -73,15 +73,11 @@ describe( '<EditingPanel />', () => {
 		},
 		{
 			title: 'the element type does not exist',
-			selected: [
-				mockV1Element( { model: { widgetType: 'atomic-button' } } ),
-			],
+			selected: [ mockV1Element( { model: { widgetType: 'atomic-button' } } ) ],
 		},
 		{
 			title: 'the element does not have atomic controls',
-			selected: [
-				mockV1Element( { model: { widgetType: 'heading' } } ),
-			],
+			selected: [ mockV1Element( { model: { widgetType: 'heading' } } ) ],
 		},
 	] )( 'should not render panel when $title', ( { selected } ) => {
 		// Arrange.

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,20 +54,18 @@ describe( 'SettingsControl', () => {
 
 		// Assert.
 		expect( jest.mocked( updateSettings ) ).toHaveBeenCalledWith( {
-			id: elementID,
+			id: element.id,
 			props: { [ bind ]: newValue },
 		} );
 	} );
 } );
 
 const MockControl = () => {
-	const { value, setValue, bind } = useControl<string>( '' );
+	const { value, setValue, bind } = useControl< string >( '' );
 
-	const handleChange = ( event: React.ChangeEvent<HTMLInputElement> ) => {
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.value );
 	};
 
-	return (
-		<input type="text" aria-label={ bind } value={ value } onChange={ handleChange } />
-	);
+	return <input type="text" aria-label={ bind } value={ value } onChange={ handleChange } />;
 };

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,24 +1,24 @@
 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> = {
-	options: Array<{ label: string; value: T; disabled?: boolean }>
+type Props< T > = {
+	options: Array< { label: string; value: T; disabled?: boolean } >;
 };
 
-export const SelectControl = <T extends PropValue>( { options }: SelectControlProps<T> ) => {
-	const { value, setValue } = useControl<T>();
+export const SelectControl = < T extends PropValue >( { options }: Props< T > ) => {
+	const { value, setValue } = useControl< T >();
 
-	const handleChange = ( event: SelectChangeEvent<T> ) => {
+	const handleChange = ( event: SelectChangeEvent< T > ) => {
 		setValue( event.target.value as T );
 	};
 
 	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>