@elementor/editor-editing-panel 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -3,42 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [0.4.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.3.0...@elementor/editor-editing-panel@0.4.0) (2024-07-16)
-
+## [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)
 
-### Features
+**Note:** Version bump only for package @elementor/editor-editing-panel
 
-* **editor-editing-panel:** settings control infra for atomic controls [EDS-236] ([#201](https://github.com/elementor/elementor-packages/issues/201)) ([25214f3](https://github.com/elementor/elementor-packages/commit/25214f35970572be059fa3ea98c0905f4535f9f9))
+## [0.4.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.4.0...@elementor/editor-editing-panel@0.4.1) (2024-07-16)
 
+**Note:** Version bump only for package @elementor/editor-editing-panel
 
+# [0.4.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.3.0...@elementor/editor-editing-panel@0.4.0) (2024-07-16)
 
+### Features
 
+- **editor-editing-panel:** settings control infra for atomic controls [EDS-236] ([#201](https://github.com/elementor/elementor-packages/issues/201)) ([25214f3](https://github.com/elementor/elementor-packages/commit/25214f35970572be059fa3ea98c0905f4535f9f9))
 
 # [0.3.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.2.0...@elementor/editor-editing-panel@0.3.0) (2024-07-14)
 
-
 ### Features
 
-* **editor-editing-panel:** element context [EDS-255] ([#200](https://github.com/elementor/elementor-packages/issues/200)) ([cff677e](https://github.com/elementor/elementor-packages/commit/cff677eec3690fe8b9569d5fd27c2512a981334c))
-
-
-
-
+- **editor-editing-panel:** element context [EDS-255] ([#200](https://github.com/elementor/elementor-packages/issues/200)) ([cff677e](https://github.com/elementor/elementor-packages/commit/cff677eec3690fe8b9569d5fd27c2512a981334c))
 
 # [0.2.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.1.0...@elementor/editor-editing-panel@0.2.0) (2024-07-11)
 
-
 ### Features
 
-* **editor-editing-panel:** api for selecting and widget type [EDS-244] ([#199](https://github.com/elementor/elementor-packages/issues/199)) ([3e3da8a](https://github.com/elementor/elementor-packages/commit/3e3da8ac1dc37e502991f0905cbe8054422b3b71))
-
-
-
-
+- **editor-editing-panel:** api for selecting and widget type [EDS-244] ([#199](https://github.com/elementor/elementor-packages/issues/199)) ([3e3da8a](https://github.com/elementor/elementor-packages/commit/3e3da8ac1dc37e502991f0905cbe8054422b3b71))
 
 # 0.1.0 (2024-07-08)
 
-
 ### Features
 
-* **editor-editing-panel:** create editor panel package [EDS-226] ([#188](https://github.com/elementor/elementor-packages/issues/188)) ([e361aed](https://github.com/elementor/elementor-packages/commit/e361aed023c3a5d4dd329b354f1403de238da20e))
+- **editor-editing-panel:** create editor panel package [EDS-226] ([#188](https://github.com/elementor/elementor-packages/issues/188)) ([e361aed](https://github.com/elementor/elementor-packages/commit/e361aed023c3a5d4dd329b354f1403de238da20e))

package/dist/index.js

@@ -51,10 +51,7 @@ function getSelectedElements() {
 // src/hooks/use-selected-elements.ts
 function useSelectedElements() {
   return (0, import_editor_v1_adapters.__privateUseListenTo)(
-    [
-      (0, import_editor_v1_adapters.commandEndEvent)("document/elements/select"),
-      (0, import_editor_v1_adapters.commandEndEvent)("document/elements/deselect")
-    ],
+    [(0, import_editor_v1_adapters.commandEndEvent)("document/elements/select"), (0, import_editor_v1_adapters.commandEndEvent)("document/elements/deselect")],
     () => getSelectedElements()
   );
 }
@@ -126,7 +123,16 @@ var TextControl = ({ placeholder }) => {
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React2.createElement(import_ui2.TextareaAutosize, { size: "tiny", minRows: 3, value, onChange: handleChange, placeholder });
+  return /* @__PURE__ */ React2.createElement(
+    import_ui2.TextareaAutosize,
+    {
+      size: "tiny",
+      minRows: 3,
+      value,
+      onChange: handleChange,
+      placeholder
+    }
+  );
 };
 
 // src/components/controls/settings-control.tsx
@@ -229,18 +235,22 @@ var EditingPanel = () => {
       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__ */ 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 null;
   })))));
 };
 
 // src/panel.ts
-var {
-  panel,
-  usePanelActions,
-  usePanelStatus
-} = (0, import_editor_panels2.__createPanel)({
+var { panel, usePanelActions, usePanelStatus } = (0, import_editor_panels2.__createPanel)({
   id: "editing-panel",
   component: EditingPanel
 });
@@ -264,14 +274,11 @@ var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
   (0, import_react3.useEffect)(() => {
-    return (0, import_editor_v1_adapters5.__privateListenTo)(
-      (0, import_editor_v1_adapters5.commandStartEvent)("panel/editor/open"),
-      () => {
-        if (shouldUseV2Panel()) {
-          open();
-        }
+    return (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.commandStartEvent)("panel/editor/open"), () => {
+      if (shouldUseV2Panel()) {
+        open();
       }
-    );
+    });
   }, []);
 };
 

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 {\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":["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/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"]}

package/dist/index.mjs

@@ -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()
   );
 }
@@ -102,7 +99,16 @@ var TextControl = ({ placeholder }) => {
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React2.createElement(TextareaAutosize, { size: "tiny", minRows: 3, value, onChange: handleChange, placeholder });
+  return /* @__PURE__ */ React2.createElement(
+    TextareaAutosize,
+    {
+      size: "tiny",
+      minRows: 3,
+      value,
+      onChange: handleChange,
+      placeholder
+    }
+  );
 };
 
 // src/components/controls/settings-control.tsx
@@ -205,18 +211,22 @@ var EditingPanel = () => {
       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__ */ 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 null;
   })))));
 };
 
 // src/panel.ts
-var {
-  panel,
-  usePanelActions,
-  usePanelStatus
-} = createPanel({
+var { panel, usePanelActions, usePanelStatus } = createPanel({
   id: "editing-panel",
   component: EditingPanel
 });
@@ -240,14 +250,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/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"]}

package/package.json

@@ -1,45 +1,45 @@
 {
-	"name": "@elementor/editor-editing-panel",
-	"version": "0.4.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.0",
-		"@elementor/editor-panels": "^0.4.15",
-		"@elementor/editor-v1-adapters": "^0.7.0",
-		"@elementor/ui": "^1.4.61",
-		"@wordpress/i18n": "^4.45.0"
-	},
-	"peerDependencies": {
-		"react": "^18.3.1"
-	},
-	"gitHead": "d35136851ca21a11d375734e8e078d5ef5b9d52d"
+  "name": "@elementor/editor-editing-panel",
+  "version": "0.4.2",
+  "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": "10fd8663495a9ced2521f27a74879684ed0cf322"
 }

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

@@ -55,13 +55,11 @@ describe( 'SettingsControl', () => {
 } );
 
 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-context.ts

@@ -1,16 +1,16 @@
 import { createContext, useContext } from 'react';
 import { PropKey, PropValue } from '../../types';
 
-export type ControlContext<T extends PropValue> = null | {
+export type ControlContext< T extends PropValue > = null | {
 	bind: PropKey;
 	setValue: ( value: T ) => void;
 	value: T;
 };
 
-export const ControlContext = createContext<ControlContext<PropValue>>( null );
+export const ControlContext = createContext< ControlContext< PropValue > >( null );
 
-export function useControl<T extends PropValue>( defaultValue?: T ) {
-	const controlContext = useContext<ControlContext<T>>( ControlContext as never );
+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' );

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

@@ -3,14 +3,14 @@ import { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';
 import { useControl } from '../control-context';
 import { PropValue } from '../../../types';
 
-export type SelectControlProps<T> = {
-	options: Array<{ label: string; value: T; disabled?: boolean }>
+export type SelectControlProps< 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 }: SelectControlProps< T > ) => {
+	const { value, setValue } = useControl< T >();
 
-	const handleChange = ( event: SelectChangeEvent<T> ) => {
+	const handleChange = ( event: SelectChangeEvent< T > ) => {
 		setValue( event.target.value as T );
 	};
 

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

@@ -4,16 +4,22 @@ import { useControl } from '../control-context';
 
 export type TextControlProps = {
 	placeholder?: string;
-}
+};
 
 export const TextControl = ( { placeholder }: TextControlProps ) => {
-	const { value, setValue } = useControl<string>( '' );
+	const { value, setValue } = useControl< string >( '' );
 
-	const handleChange = ( event: React.ChangeEvent<HTMLInputElement> ) => {
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.value );
 	};
 
 	return (
-		<TextareaAutosize size="tiny" minRows={ 3 }value={ value } onChange={ handleChange } placeholder={ placeholder } />
+		<TextareaAutosize
+			size="tiny"
+			minRows={ 3 }
+			value={ value }
+			onChange={ handleChange }
+			placeholder={ placeholder }
+		/>
 	);
 };

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

@@ -8,8 +8,8 @@ import { PropKey, PropValue } from '../../types';
 type Props = {
 	bind: PropKey;
 	children: React.ReactNode;
-	elementID: Element['id'];
-}
+	elementID: Element[ 'id' ];
+};
 
 const SettingsControl = ( { bind, children, elementID }: Props ) => {
 	const value = useWidgetSettings( { id: elementID, bind } );
@@ -23,18 +23,18 @@ const SettingsControl = ( { bind, children, elementID }: Props ) => {
 		} );
 	};
 
-	return (
-		<ControlContext.Provider value={ { setValue, value, bind } }>
-			{ children }
-		</ControlContext.Provider>
-	);
+	return <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;
 };
 
 const Label = ( { children }: { children: React.ReactNode } ) => {
-	return <Typography component="label" variant="caption">{ children }</Typography>;
+	return (
+		<Typography component="label" variant="caption">
+			{ children }
+		</Typography>
+	);
 };
 
-const Container = ( { children }: { children: React.ReactNode} ) => (
+const Container = ( { children }: { children: React.ReactNode } ) => (
 	<Stack
 		spacing={ 1 }
 		flexDirection="row"

package/src/components/editing-panel.tsx

@@ -36,29 +36,32 @@ export const EditingPanel = () => {
 			<PanelBody>
 				<ElementContext element={ selectedElement }>
 					<Stack spacing={ 2 }>
-						{
-							elementType.controls.map( ( control ) => {
-								if ( control.type === 'control' ) {
-									const ControlComponent = controlTypes[ control.value.type as keyof typeof controlTypes ];
+						{ elementType.controls.map( ( control ) => {
+							if ( control.type === 'control' ) {
+								const ControlComponent =
+									controlTypes[ control.value.type as keyof typeof controlTypes ];
 
-									if ( ! ControlComponent ) {
-										return null;
-									}
-
-									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>
-									);
+								if ( ! ControlComponent ) {
+									return null;
 								}
 
-								return null;
-							} )
-						}
+								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>
+								);
+							}
+
+							return null;
+						} ) }
 					</Stack>
 				</ElementContext>
 			</PanelBody>

package/src/contexts/settings-controls.tsx

@@ -4,21 +4,17 @@ import { Element } from '../types';
 
 type ContextValue = {
 	element: Element;
-}
+};
 
-const Context = createContext<ContextValue | null>( null );
+const Context = createContext< ContextValue | null >( null );
 
 type Props = {
 	element: Element;
 	children?: ReactNode;
-}
+};
 
 export function ElementContext( { children, element }: Props ) {
-	return (
-		<Context.Provider value={ { element } }>
-			{ children }
-		</Context.Provider>
-	);
+	return <Context.Provider value={ { element } }>{ children }</Context.Provider>;
 }
 
 export function useElementContext() {

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

@@ -71,7 +71,9 @@ describe( 'useWidgetSettings', () => {
 
 		// Act.
 		act( () => {
-			jest.mocked( getContainer ).mockReturnValue( mockV1Element( { settings: { [ bind ]: 'Goodbye, World!' } } ) );
+			jest.mocked( getContainer ).mockReturnValue(
+				mockV1Element( { settings: { [ bind ]: 'Goodbye, World!' } } )
+			);
 			dispatchCommandAfter( 'document/elements/settings' );
 		} );
 

package/src/hooks/use-open-editor-panel.ts

@@ -7,13 +7,10 @@ export const useOpenEditorPanel = () => {
 	const { open } = usePanelActions();
 
 	useEffect( () => {
-		return listenTo(
-			commandStartEvent( 'panel/editor/open' ),
-			() => {
-				if ( shouldUseV2Panel() ) {
-					open();
-				}
+		return listenTo( commandStartEvent( 'panel/editor/open' ), () => {
+			if ( shouldUseV2Panel() ) {
+				open();
 			}
-		);
+		} );
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
 };

package/src/hooks/use-selected-elements.ts

@@ -3,10 +3,7 @@ import getSelectedElements from '../sync/get-selected-elements';
 
 export default function useSelectedElements() {
 	return useListenTo(
-		[
-			commandEndEvent( 'document/elements/select' ),
-			commandEndEvent( 'document/elements/deselect' ),
-		],
+		[ commandEndEvent( 'document/elements/select' ), commandEndEvent( 'document/elements/deselect' ) ],
 		() => getSelectedElements()
 	);
 }

package/src/panel.ts

@@ -1,11 +1,7 @@
 import { __createPanel as createPanel } from '@elementor/editor-panels';
 import { EditingPanel } from './components/editing-panel';
 
-export const {
-	panel,
-	usePanelActions,
-	usePanelStatus,
-} = createPanel( {
+export const { panel, usePanelActions, usePanelStatus } = createPanel( {
 	id: 'editing-panel',
 	component: EditingPanel,
 } );

package/src/sync/get-selected-elements.ts

@@ -6,7 +6,7 @@ export default function getSelectedElements(): Element[] {
 
 	const selectedElements = extendedWindow.elementor?.selection?.getElements?.() ?? [];
 
-	return selectedElements.reduce<Element[]>( ( acc, el ) => {
+	return selectedElements.reduce< Element[] >( ( acc, el ) => {
 		const type = el.model.get( 'widgetType' ) || el.model.get( 'elType' );
 
 		if ( type ) {

package/src/sync/types.ts

@@ -4,29 +4,32 @@ export type ExtendedWindow = Window & {
 	elementor?: {
 		selection?: {
 			getElements: () => V1Element[];
-		},
-		widgetsCache?: Record<string, {
-			atomic_controls?: AtomicControl[],
-			controls: object,
-			title: string,
-		}>,
-		getContainer?: ( id: string ) => V1Element
-	}
-}
+		};
+		widgetsCache?: Record<
+			string,
+			{
+				atomic_controls?: AtomicControl[];
+				controls: object;
+				title: string;
+			}
+		>;
+		getContainer?: ( id: string ) => V1Element;
+	};
+};
 
 export type V1Element = {
-	model: V1Model<V1ElementModelProps>,
-	settings?: V1Model<V1ElementSettingsProps>,
-}
+	model: V1Model< V1ElementModelProps >;
+	settings?: V1Model< V1ElementSettingsProps >;
+};
 
 export type V1ElementModelProps = {
 	widgetType?: string;
 	elType: string;
 	id: string;
-}
+};
 
-export type V1ElementSettingsProps = Record<string, PropValue>;
+export type V1ElementSettingsProps = Record< string, PropValue >;
 
-type V1Model<T> = {
-	get: <K extends keyof T>( key: K ) => T[K],
-}
+type V1Model< T > = {
+	get: < K extends keyof T >( key: K ) => T[ K ];
+};

package/src/sync/update-settings.ts

@@ -2,7 +2,7 @@ import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters
 import { Props } from '../types';
 import getContainer from './get-container';
 
-export const updateSettings = ( { id, props }: { id: string, props: Props } ) => {
+export const updateSettings = ( { id, props }: { id: string; props: Props } ) => {
 	const container = getContainer( id );
 
 	runCommand( 'document/elements/settings', {

package/src/types.ts

@@ -1,38 +1,38 @@
 export type Element = {
 	id: string;
 	type: string;
-}
+};
 
 export type ElementType = {
 	key: string;
 	controls: AtomicControl[];
 	title: string;
-}
+};
 
 export type AtomicControl = {
-	type: 'control',
+	type: 'control';
 	value: {
-		bind: string,
-		label: string,
-		description?: string,
-		type: string,
-		props: Record<string, unknown>,
-	},
-}
+		bind: string;
+		label: string;
+		description?: string;
+		type: string;
+		props: Record< string, unknown >;
+	};
+};
 
-type MaybeArray<T> = T | T[];
+type MaybeArray< T > = T | T[];
 
 type TransformablePropValue = {
-	$$type: string,
-	value: unknown,
-}
+	$$type: string;
+	value: unknown;
+};
 
-export type PlainPropValue = MaybeArray<string | number | boolean | object | null | undefined>;
+export type PlainPropValue = MaybeArray< string | number | boolean | object | null | undefined >;
 
 export type PropValue = PlainPropValue | TransformablePropValue;
 
 export type PropKey = string;
 
-export type Props = Record<PropKey, PropValue>;
+export type Props = Record< PropKey, PropValue >;
 
-export type PlainProps = Record<PropKey, PlainPropValue>;
+export type PlainProps = Record< PropKey, PlainPropValue >;