@elementor/editor-editing-panel 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.11.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.10.0...@elementor/editor-editing-panel@0.11.0) (2024-08-15)
+
+### Features
+
+- **edito-editing-panel:** add control internal state hook [EDS-359] ([#232](https://github.com/elementor/elementor-packages/issues/232)) ([c9cbced](https://github.com/elementor/elementor-packages/commit/c9cbced3d8136f8bb157a0ab3878076b08e521f5))
+
 # [0.10.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-editing-panel@0.9.1...@elementor/editor-editing-panel@0.10.0) (2024-08-14)
 
 ### Features

package/dist/index.js

@@ -256,10 +256,10 @@ var import_icons = require("@elementor/icons");
 var import_i18n = require("@wordpress/i18n");
 var import_wp_media = require("@elementor/wp-media");
 var isImageAttachment = (value) => {
-  return value.$$type === "image-attachment";
+  return value?.$$type === "image-attachment";
 };
 var isImageUrl = (value) => {
-  return value.$$type === "image-url";
+  return value?.$$type === "image-url";
 };
 var defaultState = {
   $$type: "image-url",
@@ -486,26 +486,78 @@ StyleControl.Label = Label2;
 // src/controls/control-types/size-control.tsx
 var React11 = __toESM(require("react"));
 var import_ui9 = require("@elementor/ui");
+
+// src/controls/hooks/use-sync-external-state.tsx
+var import_react5 = require("react");
+var useSyncExternalState = ({
+  external,
+  setExternal,
+  persistWhen,
+  fallback
+}) => {
+  function toExternal(internalValue) {
+    if (persistWhen(internalValue)) {
+      return internalValue;
+    }
+    return void 0;
+  }
+  function toInternal(externalValue, internalValue) {
+    if (!externalValue) {
+      return fallback(internalValue);
+    }
+    return externalValue;
+  }
+  const [internal, setInternal] = (0, import_react5.useState)(toInternal(external, void 0));
+  (0, import_react5.useEffect)(() => {
+    setInternal(toInternal(external, internal));
+  }, [external]);
+  const setInternalValue = (setter) => {
+    const setterFn = typeof setter === "function" ? setter : () => setter;
+    const updated = setterFn(internal);
+    setInternal(updated);
+    setExternal(toExternal(updated));
+  };
+  return [internal, setInternalValue];
+};
+
+// src/controls/control-types/size-control.tsx
 var SizeControl = ({ units: units2, placeholder }) => {
-  const { value, setValue } = useControl(defaultState2);
-  const propValue = value.value;
+  const { value, setValue } = useControl();
+  const [state, setState] = useSyncExternalState({
+    external: value,
+    setExternal: setValue,
+    persistWhen: (controlValue) => !!controlValue?.value.size || controlValue?.value.size === 0,
+    fallback: (controlValue) => ({
+      $$type: "size",
+      value: { unit: controlValue?.value.unit || "px", size: NaN }
+    })
+  });
   const handleUnitChange = (event) => {
     const unit = event.target.value;
-    setValue({ $$type: "size", value: { ...propValue, unit } });
+    setState((prev) => ({
+      ...prev,
+      value: {
+        ...prev.value,
+        unit
+      }
+    }));
   };
   const handleSizeChange = (event) => {
-    const { valueAsNumber: size } = event.target;
-    if (Number.isNaN(size)) {
-      return;
-    }
-    setValue({ $$type: "size", value: { ...propValue, size } });
+    const { value: size } = event.target;
+    setState((prev) => ({
+      ...prev,
+      value: {
+        ...prev.value,
+        size: size || size === "0" ? parseFloat(size) : NaN
+      }
+    }));
   };
   return /* @__PURE__ */ React11.createElement(import_ui9.Stack, { direction: "row" }, /* @__PURE__ */ React11.createElement(
     import_ui9.TextField,
     {
       size: "tiny",
       type: "number",
-      value: propValue.size,
+      value: Number.isNaN(state.value.size) ? "" : state.value.size,
       onChange: handleSizeChange,
       placeholder
     }
@@ -513,7 +565,7 @@ var SizeControl = ({ units: units2, placeholder }) => {
     import_ui9.Select,
     {
       size: "tiny",
-      value: propValue.unit,
+      value: state.value.unit,
       onChange: handleUnitChange,
       MenuProps: {
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -523,10 +575,6 @@ var SizeControl = ({ units: units2, placeholder }) => {
     units2.map((unit) => /* @__PURE__ */ React11.createElement(import_ui9.MenuItem, { key: unit, value: unit }, unit.toUpperCase()))
   ));
 };
-var defaultState2 = {
-  $$type: "size",
-  value: { unit: "px", size: 0 }
-};
 
 // src/components/style-sections/size-section.tsx
 var import_ui10 = require("@elementor/ui");
@@ -585,11 +633,11 @@ var shouldUseV2Panel = () => {
 };
 
 // src/hooks/use-open-editor-panel.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return (0, import_editor_v1_adapters8.__privateListenTo)((0, import_editor_v1_adapters8.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/contexts/element-context.tsx","../src/components/editing-panel-tabs.tsx","../src/components/settings-tab.tsx","../src/controls/settings-control.tsx","../src/controls/control-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/collapsible-section.tsx","../src/controls/control-types/select-control.tsx","../src/controls/control-types/text-area-control.tsx","../src/controls/control-types/text-control.tsx","../src/controls/control-types/attachment-control.tsx","../src/controls/get-control-by-type.ts","../src/components/style-tab.tsx","../src/contexts/style-context.tsx","../src/hooks/use-element-styles.ts","../src/sync/get-element-styles.ts","../src/components/style-sections/size-section.tsx","../src/controls/style-control.tsx","../src/sync/update-style.ts","../src/hooks/use-element-style-prop.ts","../src/controls/control-types/size-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 { ElementContext } from '../contexts/element-context';\nimport { EditingPanelTabs } from './editing-panel-tabs';\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<EditingPanelTabs />\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 { 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 { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';\nimport * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { SettingsTab } from './settings-tab';\nimport { StyleTab } from './style-tab';\n\ntype TabValue = 'settings' | 'style';\n\nexport const EditingPanelTabs = () => {\n\tconst { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );\n\n\treturn (\n\t\t<Stack direction=\"column\" sx={ { width: '100%' } }>\n\t\t\t<Tabs variant=\"fullWidth\" indicatorColor=\"secondary\" textColor=\"inherit\" { ...getTabsProps() }>\n\t\t\t\t<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />\n\t\t\t\t<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />\n\t\t\t</Tabs>\n\t\t\t<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>\n\t\t\t\t<SettingsTab />\n\t\t\t</TabPanel>\n\t\t\t<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>\n\t\t\t\t<StyleTab />\n\t\t\t</TabPanel>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { Stack } from '@elementor/ui';\nimport { SettingsControl } from '../controls/settings-control';\nimport { useElementContext } from '../contexts/element-context';\nimport useElementType from '../hooks/use-element-type';\nimport type { Control } from '../types';\nimport { CollapsibleSection } from './collapsible-section';\nimport { getControlByType } from '../controls/get-control-by-type';\n\nexport const SettingsTab = () => {\n\tconst { element } = useElementContext();\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( ! elementType ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Stack>\n\t\t\t{ elementType.controls.map( ( { type, value }, index ) => {\n\t\t\t\tif ( type === 'control' ) {\n\t\t\t\t\treturn <Control key={ value.bind } control={ value } />;\n\t\t\t\t}\n\n\t\t\t\tif ( type === 'section' ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollapsibleSection key={ type + '.' + index } title={ value.label }>\n\t\t\t\t\t\t\t{ value.items?.map( ( item ) => {\n\t\t\t\t\t\t\t\tif ( item.type === 'control' ) {\n\t\t\t\t\t\t\t\t\treturn <Control key={ item.value.bind } control={ item.value } />;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// TODO: Handle 2nd level sections\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</CollapsibleSection>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n};\n\n// TODO: Create control wrapper by type for different layouts.\nconst Control = ( { control }: { control: Control[ 'value' ] } ) => {\n\tconst ControlComponent = getControlByType( control.type );\n\n\tif ( ! ControlComponent ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<SettingsControl bind={ control.bind }>\n\t\t\t{ control.label ? <SettingsControl.Label>{ control.label }</SettingsControl.Label> : null }\n\t\t\t<ControlComponent\n\t\t\t\t/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n\t\t\t\t{ ...( control.props as any ) }\n\t\t\t/>\n\t\t</SettingsControl>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from '../controls/control-context';\nimport { Stack, styled, Typography } from '@elementor/ui';\nimport { PropKey, PropValue } from '../types';\nimport { useElementContext } from '../contexts/element-context';\nimport { useWidgetSettings } from '../hooks/use-widget-settings';\nimport { updateSettings } from '../sync/update-settings';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const SettingsControlProvider = ( { 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\nconst SettingsControl = ( { children, bind }: Props ) => (\n\t<SettingsControlProvider bind={ bind }>\n\t\t<StyledStack gap={ 1 } direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" flexWrap=\"wrap\">\n\t\t\t{ children }\n\t\t</StyledStack>\n\t</SettingsControlProvider>\n);\n\nconst StyledStack = styled( Stack )`\n\t& > * {\n\t\tflex-grow: 1;\n\t}\n\n\t& > label {\n\t\tmin-width: 50%;\n\t}\n`;\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nSettingsControl.Label = Label;\n\nexport { SettingsControl };\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../types';\n\nexport type ControlContext< T extends PropValue > = {\n\tbind: PropKey;\n\tsetValue: ( value: T ) => void;\n\tvalue: T;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > | null >( null );\n\nexport function useControl< T extends PropValue >(): ControlContext< T | undefined >;\nexport function useControl< T extends PropValue >( defaultValue: T ): ControlContext< T >;\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 { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[ id, bind ]\n\t);\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';\n\nexport type CollapsibleSectionProps = React.PropsWithChildren< {\n\ttitle: React.ReactNode;\n} >;\n\nexport const CollapsibleSection = ( { title, children }: CollapsibleSectionProps ) => {\n\tconst uid = useId();\n\tconst labelId = `label-${ uid }`;\n\tconst contentId = `content-${ uid }`;\n\n\t// TODO: Change to collapsible list item\n\treturn (\n\t\t<Accordion disableGutters defaultExpanded>\n\t\t\t<AccordionSummary aria-controls={ contentId } id={ labelId }>\n\t\t\t\t<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>\n\t\t\t</AccordionSummary>\n\t\t\t<AccordionDetails id={ contentId } aria-labelledby={ labelId }>\n\t\t\t\t<Stack gap={ 2.5 }>{ children }</Stack>\n\t\t\t</AccordionDetails>\n\t\t</Accordion>\n\t);\n};\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../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 { TextField } from '@elementor/ui';\nimport { useControl } from '../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<TextField\n\t\t\tsize=\"tiny\"\n\t\t\tmultiline\n\t\t\tfullWidth\n\t\t\trows={ 5 }\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 { TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport const TextControl = ( { placeholder }: { placeholder?: string } ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );\n\n\treturn <TextField type=\"text\" size=\"tiny\" value={ value } onChange={ handleChange } placeholder={ placeholder } />;\n};\n","import * as React from 'react';\nimport { Button, Card, CardMedia, CardOverlay } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { UploadIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\nimport { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';\n\ntype ImageAttachment = {\n\t$$type: 'image-attachment';\n\tvalue: {\n\t\tid: number;\n\t};\n};\n\ntype ImageURL = {\n\t$$type: 'image-url';\n\tvalue: {\n\t\turl: string;\n\t};\n};\n\ntype Props = {\n\tmediaTypes: Array< 'image' >;\n};\n\nconst isImageAttachment = ( value: ImageAttachment | ImageURL ): value is ImageAttachment => {\n\treturn value.$$type === 'image-attachment';\n};\n\nconst isImageUrl = ( value: ImageAttachment | ImageURL ): value is ImageURL => {\n\treturn value.$$type === 'image-url';\n};\n\n// TODO: Use schema to get default image.\nconst defaultState: ImageURL = {\n\t$$type: 'image-url',\n\tvalue: {\n\t\turl: '/wp-content/plugins/elementor/assets/images/placeholder.png',\n\t},\n};\n\nexport const AttachmentControl = ( props: Props ) => {\n\tconst { value, setValue } = useControl< ImageAttachment | ImageURL >( defaultState );\n\tconst { data: attachment } = useWpMediaAttachment( isImageAttachment( value ) ? value.value.id : undefined );\n\n\tconst getImageSrc = () => {\n\t\tif ( attachment?.url ) {\n\t\t\treturn attachment.url;\n\t\t}\n\n\t\tif ( isImageUrl( value ) ) {\n\t\t\treturn value.value.url;\n\t\t}\n\n\t\treturn defaultState.value.url;\n\t};\n\n\tconst { open } = useWpMediaFrame( {\n\t\ttypes: props.mediaTypes,\n\t\tmultiple: false,\n\t\tselected: isImageAttachment( value ) ? value.value?.id : undefined,\n\t\tonSelect: ( val ) => {\n\t\t\tsetValue( {\n\t\t\t\t$$type: 'image-attachment',\n\t\t\t\tvalue: {\n\t\t\t\t\tid: val.id,\n\t\t\t\t},\n\t\t\t} );\n\t\t},\n\t} );\n\n\treturn (\n\t\t<Card variant=\"outlined\">\n\t\t\t<CardMedia image={ getImageSrc() } sx={ { height: 150 } } />\n\t\t\t<CardOverlay>\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'browse' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Select Image', 'elementor' ) }\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\tstartIcon={ <UploadIcon /> }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'upload' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Upload Image', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardOverlay>\n\t\t</Card>\n\t);\n};\n","import { SelectControl } from './control-types/select-control';\nimport { TextAreaControl } from './control-types/text-area-control';\nimport { TextControl } from './control-types/text-control';\nimport { AttachmentControl } from './control-types/attachment-control';\n\nconst controlTypes = {\n\tattachment: AttachmentControl,\n\tselect: SelectControl,\n\ttext: TextControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const getControlByType = ( type: string ) => {\n\treturn controlTypes[ type as keyof typeof controlTypes ] ?? null;\n};\n","import * as React from 'react';\nimport { StyleContext } from '../contexts/style-context';\nimport { useElementContext } from '../contexts/element-context';\nimport { useElementStyles } from '../hooks/use-element-styles';\nimport { Stack } from '@elementor/ui';\nimport { SizeSection } from './style-sections/size-section';\n\nexport const StyleTab = () => {\n\tconst { element } = useElementContext();\n\tconst elementStyles = useElementStyles( element.id );\n\t// TODO: Handle selected style state.\n\tconst [ selectedStyleDef = null ] = Object.values( elementStyles || {} );\n\n\treturn (\n\t\t<StyleContext selectedStyleDef={ selectedStyleDef }>\n\t\t\t<Stack>\n\t\t\t\t<SizeSection />\n\t\t\t</Stack>\n\t\t</StyleContext>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { useActiveBreakpoint } from '@elementor/editor-responsive';\nimport { StyleDefinition, StyleVariant } from '@elementor/editor-style';\n\ntype ContextValue = {\n\tselectedStyleDef: StyleDefinition | null;\n\tselectedMeta: StyleVariant[ 'meta' ];\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\tchildren: ReactNode;\n\tselectedStyleDef: StyleDefinition | null;\n};\n\nexport function StyleContext( { children, selectedStyleDef }: Props ) {\n\tconst breakpoint = useActiveBreakpoint();\n\t// TODO: Handle state when we support it.\n\tconst selectedMeta = { breakpoint, state: null } as const;\n\n\treturn <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;\n}\n\nexport function useStyleContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'UseStyleContext must be used within a StyleContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { ElementID } from '../types';\n\nexport const useElementStyles = ( elementID: ElementID ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\treturn getElementStyles( elementID );\n\t\t},\n\t\t[ elementID ]\n\t);\n};\n","import getContainer from './get-container';\nimport { ElementID } from '../types';\nimport { StyleDefinition } from '@elementor/editor-style';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import * as React from 'react';\nimport { CollapsibleSection } from '../../components/collapsible-section';\nimport { StyleControl, StyleControlProps } from '../../controls/style-control';\nimport { SizeControl, Unit } from '../../controls/control-types/size-control';\nimport { Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const SizeSection = () => {\n\treturn (\n\t\t<CollapsibleSection title={ __( 'Size', 'elementor' ) }>\n\t\t\t<Stack gap={ 1.5 }>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"width\" label={ __( 'Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"height\" label={ __( 'Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"min-width\" label={ __( 'Min. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"min-height\" label={ __( 'Min. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"max-width\" label={ __( 'Max. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"max-height\" label={ __( 'Max. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</CollapsibleSection>\n\t);\n};\n\nconst units: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];\n\ntype ControlProps = {\n\tbind: StyleControlProps[ 'bind' ];\n\tlabel: string;\n};\n\nconst Control = ( { label, bind }: ControlProps ) => {\n\treturn (\n\t\t<StyleControl bind={ bind }>\n\t\t\t<Stack gap={ 1 } sx={ { flex: '0 1 50%' } }>\n\t\t\t\t<StyleControl.Label>{ label }</StyleControl.Label>\n\t\t\t\t<SizeControl units={ units } />\n\t\t\t</Stack>\n\t\t</StyleControl>\n\t);\n};\n","import * as React from 'react';\nimport { PropKey, PropValue } from '../types';\nimport { ControlContext } from '../controls/control-context';\nimport { updateStyle } from '../sync/update-style';\nimport { useElementStyleProp } from '../hooks/use-element-style-prop';\nimport { useElementContext } from '../contexts/element-context';\nimport { useStyleContext } from '../contexts/style-context';\nimport { Typography } from '@elementor/ui';\n\nexport type StyleControlProps = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nconst StyleControl = ( { bind, children }: StyleControlProps ) => {\n\tconst { element } = useElementContext();\n\tconst { selectedStyleDef, selectedMeta } = useStyleContext();\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateStyle( {\n\t\t\telementID: element.id,\n\t\t\tstyleDefID: selectedStyleDef?.id,\n\t\t\tprops: { [ bind ]: newValue },\n\t\t\tmeta: selectedMeta,\n\t\t} );\n\t};\n\n\tconst value = useElementStyleProp( {\n\t\telementID: element.id,\n\t\tstyleDefID: selectedStyleDef?.id,\n\t\tmeta: selectedMeta,\n\t\tpropName: bind,\n\t} );\n\n\treturn <ControlContext.Provider value={ { bind, value, setValue } }>{ children }</ControlContext.Provider>;\n};\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nStyleControl.Label = Label;\n\nexport { StyleControl };\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, Props } from '../types';\nimport getContainer from './get-container';\nimport { StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UpdateStyleProps = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tprops: Props;\n\tbind?: PropKey;\n};\n\nexport const updateStyle = ( { elementID, styleDefID, meta, props, bind = 'classes' }: UpdateStyleProps ) => {\n\tconst container = getContainer( elementID );\n\n\trunCommand( 'document/atomic-widgets/styles', {\n\t\tcontainer,\n\t\tstyleDefID,\n\t\tbind,\n\t\tmeta,\n\t\tprops,\n\t} );\n};\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, PropValue } from '../types';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UseElementStylePropArgs = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tpropName: PropKey;\n};\n\nexport const useElementStyleProp = < T extends PropValue >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropName,\n}: UseElementStylePropArgs ): T | null => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\t// TODO: return default value for style prop\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn variant?.props[ propName ] ?? null;\n\t\t},\n\t\t[ elementID, styleDefID, propName, meta ]\n\t) as T;\n};\n\nfunction getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {\n\treturn styleDef.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { TransformablePropValue } from '../../types';\n\nexport type SizeControlProps = {\n\tunits: Unit[];\n\tplaceholder?: string;\n};\n\nexport type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';\n\nexport type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;\n\nexport const SizeControl = ( { units, placeholder }: SizeControlProps ) => {\n\tconst { value, setValue } = useControl< SizeControlValue >( defaultState );\n\tconst propValue = value.value;\n\n\tconst handleUnitChange = ( event: SelectChangeEvent< Unit > ) => {\n\t\tconst unit = event.target.value as Unit;\n\n\t\tsetValue( { $$type: 'size', value: { ...propValue, unit } } );\n\t};\n\n\tconst handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tconst { valueAsNumber: size } = event.target;\n\n\t\tif ( Number.isNaN( size ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetValue( { $$type: 'size', value: { ...propValue, size } } );\n\t};\n\n\treturn (\n\t\t<Stack direction=\"row\">\n\t\t\t<TextField\n\t\t\t\tsize=\"tiny\"\n\t\t\t\ttype=\"number\"\n\t\t\t\tvalue={ propValue.size }\n\t\t\t\tonChange={ handleSizeChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t/>\n\t\t\t<Select\n\t\t\t\tsize=\"tiny\"\n\t\t\t\tvalue={ propValue.unit }\n\t\t\t\tonChange={ handleUnitChange }\n\t\t\t\tMenuProps={ {\n\t\t\t\t\tanchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ units.map( ( unit ) => (\n\t\t\t\t\t<MenuItem key={ unit } value={ unit }>\n\t\t\t\t\t\t{ unit.toUpperCase() }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) ) }\n\t\t\t</Select>\n\t\t</Stack>\n\t);\n};\n\nconst defaultState: SizeControlValue = {\n\t$$type: 'size',\n\tvalue: { unit: 'px', size: 0 },\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","import_i18n","useListenTo","import_editor_v1_adapters","useListenTo","import_ui","React","import_i18n","React","import_ui","React","import_react","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","React","import_react","import_ui","React","import_ui","React","import_ui","React","import_ui","React","import_ui","React","React","import_react","Context","import_editor_v1_adapters","useListenTo","import_ui","React","React","import_editor_v1_adapters","runCommand","import_editor_v1_adapters","useListenTo","import_ui","Label","React","import_ui","units","defaultState","import_ui","import_i18n","Control","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/contexts/element-context.tsx","../src/components/editing-panel-tabs.tsx","../src/components/settings-tab.tsx","../src/controls/settings-control.tsx","../src/controls/control-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/collapsible-section.tsx","../src/controls/control-types/select-control.tsx","../src/controls/control-types/text-area-control.tsx","../src/controls/control-types/text-control.tsx","../src/controls/control-types/attachment-control.tsx","../src/controls/get-control-by-type.ts","../src/components/style-tab.tsx","../src/contexts/style-context.tsx","../src/hooks/use-element-styles.ts","../src/sync/get-element-styles.ts","../src/components/style-sections/size-section.tsx","../src/controls/style-control.tsx","../src/sync/update-style.ts","../src/hooks/use-element-style-prop.ts","../src/controls/control-types/size-control.tsx","../src/controls/hooks/use-sync-external-state.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 { ElementContext } from '../contexts/element-context';\nimport { EditingPanelTabs } from './editing-panel-tabs';\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<EditingPanelTabs />\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 { 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 { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';\nimport * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { SettingsTab } from './settings-tab';\nimport { StyleTab } from './style-tab';\n\ntype TabValue = 'settings' | 'style';\n\nexport const EditingPanelTabs = () => {\n\tconst { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );\n\n\treturn (\n\t\t<Stack direction=\"column\" sx={ { width: '100%' } }>\n\t\t\t<Tabs variant=\"fullWidth\" indicatorColor=\"secondary\" textColor=\"inherit\" { ...getTabsProps() }>\n\t\t\t\t<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />\n\t\t\t\t<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />\n\t\t\t</Tabs>\n\t\t\t<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>\n\t\t\t\t<SettingsTab />\n\t\t\t</TabPanel>\n\t\t\t<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>\n\t\t\t\t<StyleTab />\n\t\t\t</TabPanel>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { Stack } from '@elementor/ui';\nimport { SettingsControl } from '../controls/settings-control';\nimport { useElementContext } from '../contexts/element-context';\nimport useElementType from '../hooks/use-element-type';\nimport type { Control } from '../types';\nimport { CollapsibleSection } from './collapsible-section';\nimport { getControlByType } from '../controls/get-control-by-type';\n\nexport const SettingsTab = () => {\n\tconst { element } = useElementContext();\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( ! elementType ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Stack>\n\t\t\t{ elementType.controls.map( ( { type, value }, index ) => {\n\t\t\t\tif ( type === 'control' ) {\n\t\t\t\t\treturn <Control key={ value.bind } control={ value } />;\n\t\t\t\t}\n\n\t\t\t\tif ( type === 'section' ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollapsibleSection key={ type + '.' + index } title={ value.label }>\n\t\t\t\t\t\t\t{ value.items?.map( ( item ) => {\n\t\t\t\t\t\t\t\tif ( item.type === 'control' ) {\n\t\t\t\t\t\t\t\t\treturn <Control key={ item.value.bind } control={ item.value } />;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// TODO: Handle 2nd level sections\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</CollapsibleSection>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n};\n\n// TODO: Create control wrapper by type for different layouts.\nconst Control = ( { control }: { control: Control[ 'value' ] } ) => {\n\tconst ControlComponent = getControlByType( control.type );\n\n\tif ( ! ControlComponent ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<SettingsControl bind={ control.bind }>\n\t\t\t{ control.label ? <SettingsControl.Label>{ control.label }</SettingsControl.Label> : null }\n\t\t\t<ControlComponent\n\t\t\t\t/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n\t\t\t\t{ ...( control.props as any ) }\n\t\t\t/>\n\t\t</SettingsControl>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from '../controls/control-context';\nimport { Stack, styled, Typography } from '@elementor/ui';\nimport { PropKey, PropValue } from '../types';\nimport { useElementContext } from '../contexts/element-context';\nimport { useWidgetSettings } from '../hooks/use-widget-settings';\nimport { updateSettings } from '../sync/update-settings';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const SettingsControlProvider = ( { 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\nconst SettingsControl = ( { children, bind }: Props ) => (\n\t<SettingsControlProvider bind={ bind }>\n\t\t<StyledStack gap={ 1 } direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" flexWrap=\"wrap\">\n\t\t\t{ children }\n\t\t</StyledStack>\n\t</SettingsControlProvider>\n);\n\nconst StyledStack = styled( Stack )`\n\t& > * {\n\t\tflex-grow: 1;\n\t}\n\n\t& > label {\n\t\tmin-width: 50%;\n\t}\n`;\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nSettingsControl.Label = Label;\n\nexport { SettingsControl };\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../types';\n\nexport type ControlContext< T extends PropValue > = {\n\tbind: PropKey;\n\tsetValue: ( value: T | undefined ) => void;\n\tvalue: T | undefined;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > | null >( null );\n\nexport function useControl< T extends PropValue >(): ControlContext< T | undefined >;\nexport function useControl< T extends PropValue >( defaultValue: T ): ControlContext< T >;\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 { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[ id, bind ]\n\t);\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';\n\nexport type CollapsibleSectionProps = React.PropsWithChildren< {\n\ttitle: React.ReactNode;\n} >;\n\nexport const CollapsibleSection = ( { title, children }: CollapsibleSectionProps ) => {\n\tconst uid = useId();\n\tconst labelId = `label-${ uid }`;\n\tconst contentId = `content-${ uid }`;\n\n\t// TODO: Change to collapsible list item\n\treturn (\n\t\t<Accordion disableGutters defaultExpanded>\n\t\t\t<AccordionSummary aria-controls={ contentId } id={ labelId }>\n\t\t\t\t<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>\n\t\t\t</AccordionSummary>\n\t\t\t<AccordionDetails id={ contentId } aria-labelledby={ labelId }>\n\t\t\t\t<Stack gap={ 2.5 }>{ children }</Stack>\n\t\t\t</AccordionDetails>\n\t\t</Accordion>\n\t);\n};\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../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 { TextField } from '@elementor/ui';\nimport { useControl } from '../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<TextField\n\t\t\tsize=\"tiny\"\n\t\t\tmultiline\n\t\t\tfullWidth\n\t\t\trows={ 5 }\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 { TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport const TextControl = ( { placeholder }: { placeholder?: string } ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );\n\n\treturn <TextField type=\"text\" size=\"tiny\" value={ value } onChange={ handleChange } placeholder={ placeholder } />;\n};\n","import * as React from 'react';\nimport { Button, Card, CardMedia, CardOverlay } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { UploadIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\nimport { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';\n\ntype ImageAttachment = {\n\t$$type: 'image-attachment';\n\tvalue: {\n\t\tid: number;\n\t};\n};\n\ntype ImageURL = {\n\t$$type: 'image-url';\n\tvalue: {\n\t\turl: string;\n\t};\n};\n\ntype Props = {\n\tmediaTypes: Array< 'image' >;\n};\n\nconst isImageAttachment = ( value: ImageAttachment | ImageURL | undefined ): value is ImageAttachment => {\n\treturn value?.$$type === 'image-attachment';\n};\n\nconst isImageUrl = ( value: ImageAttachment | ImageURL | undefined ): value is ImageURL => {\n\treturn value?.$$type === 'image-url';\n};\n\n// TODO: Use schema to get default image.\nconst defaultState: ImageURL = {\n\t$$type: 'image-url',\n\tvalue: {\n\t\turl: '/wp-content/plugins/elementor/assets/images/placeholder.png',\n\t},\n};\n\nexport const AttachmentControl = ( props: Props ) => {\n\tconst { value, setValue } = useControl< ImageAttachment | ImageURL >( defaultState );\n\tconst { data: attachment } = useWpMediaAttachment( isImageAttachment( value ) ? value.value.id : undefined );\n\n\tconst getImageSrc = () => {\n\t\tif ( attachment?.url ) {\n\t\t\treturn attachment.url;\n\t\t}\n\n\t\tif ( isImageUrl( value ) ) {\n\t\t\treturn value.value.url;\n\t\t}\n\n\t\treturn defaultState.value.url;\n\t};\n\n\tconst { open } = useWpMediaFrame( {\n\t\ttypes: props.mediaTypes,\n\t\tmultiple: false,\n\t\tselected: isImageAttachment( value ) ? value.value?.id : undefined,\n\t\tonSelect: ( val ) => {\n\t\t\tsetValue( {\n\t\t\t\t$$type: 'image-attachment',\n\t\t\t\tvalue: {\n\t\t\t\t\tid: val.id,\n\t\t\t\t},\n\t\t\t} );\n\t\t},\n\t} );\n\n\treturn (\n\t\t<Card variant=\"outlined\">\n\t\t\t<CardMedia image={ getImageSrc() } sx={ { height: 150 } } />\n\t\t\t<CardOverlay>\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'browse' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Select Image', 'elementor' ) }\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\tstartIcon={ <UploadIcon /> }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'upload' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Upload Image', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardOverlay>\n\t\t</Card>\n\t);\n};\n","import { SelectControl } from './control-types/select-control';\nimport { TextAreaControl } from './control-types/text-area-control';\nimport { TextControl } from './control-types/text-control';\nimport { AttachmentControl } from './control-types/attachment-control';\n\nconst controlTypes = {\n\tattachment: AttachmentControl,\n\tselect: SelectControl,\n\ttext: TextControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const getControlByType = ( type: string ) => {\n\treturn controlTypes[ type as keyof typeof controlTypes ] ?? null;\n};\n","import * as React from 'react';\nimport { StyleContext } from '../contexts/style-context';\nimport { useElementContext } from '../contexts/element-context';\nimport { useElementStyles } from '../hooks/use-element-styles';\nimport { Stack } from '@elementor/ui';\nimport { SizeSection } from './style-sections/size-section';\n\nexport const StyleTab = () => {\n\tconst { element } = useElementContext();\n\tconst elementStyles = useElementStyles( element.id );\n\t// TODO: Handle selected style state.\n\tconst [ selectedStyleDef = null ] = Object.values( elementStyles || {} );\n\n\treturn (\n\t\t<StyleContext selectedStyleDef={ selectedStyleDef }>\n\t\t\t<Stack>\n\t\t\t\t<SizeSection />\n\t\t\t</Stack>\n\t\t</StyleContext>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { useActiveBreakpoint } from '@elementor/editor-responsive';\nimport { StyleDefinition, StyleVariant } from '@elementor/editor-style';\n\ntype ContextValue = {\n\tselectedStyleDef: StyleDefinition | null;\n\tselectedMeta: StyleVariant[ 'meta' ];\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\tchildren: ReactNode;\n\tselectedStyleDef: StyleDefinition | null;\n};\n\nexport function StyleContext( { children, selectedStyleDef }: Props ) {\n\tconst breakpoint = useActiveBreakpoint();\n\t// TODO: Handle state when we support it.\n\tconst selectedMeta = { breakpoint, state: null } as const;\n\n\treturn <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;\n}\n\nexport function useStyleContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'UseStyleContext must be used within a StyleContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { ElementID } from '../types';\n\nexport const useElementStyles = ( elementID: ElementID ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\treturn getElementStyles( elementID );\n\t\t},\n\t\t[ elementID ]\n\t);\n};\n","import getContainer from './get-container';\nimport { ElementID } from '../types';\nimport { StyleDefinition } from '@elementor/editor-style';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import * as React from 'react';\nimport { CollapsibleSection } from '../../components/collapsible-section';\nimport { StyleControl, StyleControlProps } from '../../controls/style-control';\nimport { SizeControl, Unit } from '../../controls/control-types/size-control';\nimport { Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const SizeSection = () => {\n\treturn (\n\t\t<CollapsibleSection title={ __( 'Size', 'elementor' ) }>\n\t\t\t<Stack gap={ 1.5 }>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"width\" label={ __( 'Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"height\" label={ __( 'Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"min-width\" label={ __( 'Min. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"min-height\" label={ __( 'Min. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"max-width\" label={ __( 'Max. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"max-height\" label={ __( 'Max. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</CollapsibleSection>\n\t);\n};\n\nconst units: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];\n\ntype ControlProps = {\n\tbind: StyleControlProps[ 'bind' ];\n\tlabel: string;\n};\n\nconst Control = ( { label, bind }: ControlProps ) => {\n\treturn (\n\t\t<StyleControl bind={ bind }>\n\t\t\t<Stack gap={ 1 } sx={ { flex: '0 1 50%' } }>\n\t\t\t\t<StyleControl.Label>{ label }</StyleControl.Label>\n\t\t\t\t<SizeControl units={ units } />\n\t\t\t</Stack>\n\t\t</StyleControl>\n\t);\n};\n","import * as React from 'react';\nimport { PropKey, PropValue } from '../types';\nimport { ControlContext } from '../controls/control-context';\nimport { updateStyle } from '../sync/update-style';\nimport { useElementStyleProp } from '../hooks/use-element-style-prop';\nimport { useElementContext } from '../contexts/element-context';\nimport { useStyleContext } from '../contexts/style-context';\nimport { Typography } from '@elementor/ui';\n\nexport type StyleControlProps = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nconst StyleControl = ( { bind, children }: StyleControlProps ) => {\n\tconst { element } = useElementContext();\n\tconst { selectedStyleDef, selectedMeta } = useStyleContext();\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateStyle( {\n\t\t\telementID: element.id,\n\t\t\tstyleDefID: selectedStyleDef?.id,\n\t\t\tprops: { [ bind ]: newValue },\n\t\t\tmeta: selectedMeta,\n\t\t} );\n\t};\n\n\tconst value = useElementStyleProp( {\n\t\telementID: element.id,\n\t\tstyleDefID: selectedStyleDef?.id,\n\t\tmeta: selectedMeta,\n\t\tpropName: bind,\n\t} );\n\n\treturn <ControlContext.Provider value={ { bind, value, setValue } }>{ children }</ControlContext.Provider>;\n};\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nStyleControl.Label = Label;\n\nexport { StyleControl };\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, Props } from '../types';\nimport getContainer from './get-container';\nimport { StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UpdateStyleProps = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tprops: Props;\n\tbind?: PropKey;\n};\n\nexport const updateStyle = ( { elementID, styleDefID, meta, props, bind = 'classes' }: UpdateStyleProps ) => {\n\tconst container = getContainer( elementID );\n\n\trunCommand( 'document/atomic-widgets/styles', {\n\t\tcontainer,\n\t\tstyleDefID,\n\t\tbind,\n\t\tmeta,\n\t\tprops,\n\t} );\n};\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, PropValue } from '../types';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UseElementStylePropArgs = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tpropName: PropKey;\n};\n\nexport const useElementStyleProp = < T extends PropValue >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropName,\n}: UseElementStylePropArgs ): T | null => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\t// TODO: return default value for style prop\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn variant?.props[ propName ] ?? null;\n\t\t},\n\t\t[ elementID, styleDefID, propName, meta ]\n\t) as T;\n};\n\nfunction getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {\n\treturn styleDef.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';\nimport { TransformablePropValue } from '../../types';\nimport { useControl } from '../control-context';\nimport { useSyncExternalState } from '../hooks/use-sync-external-state';\n\nexport type SizeControlProps = {\n\tunits: Unit[];\n\tplaceholder?: string;\n};\n\nexport type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';\n\nexport type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;\n\nexport const SizeControl = ( { units, placeholder }: SizeControlProps ) => {\n\tconst { value, setValue } = useControl< SizeControlValue >();\n\n\tconst [ state, setState ] = useSyncExternalState< SizeControlValue >( {\n\t\texternal: value,\n\t\tsetExternal: setValue,\n\t\tpersistWhen: ( controlValue ) => !! controlValue?.value.size || controlValue?.value.size === 0,\n\t\tfallback: ( controlValue ) => ( {\n\t\t\t$$type: 'size',\n\t\t\tvalue: { unit: controlValue?.value.unit || 'px', size: NaN },\n\t\t} ),\n\t} );\n\n\tconst handleUnitChange = ( event: SelectChangeEvent< Unit > ) => {\n\t\tconst unit = event.target.value as Unit;\n\n\t\tsetState( ( prev ) => ( {\n\t\t\t...prev,\n\t\t\tvalue: {\n\t\t\t\t...prev.value,\n\t\t\t\tunit,\n\t\t\t},\n\t\t} ) );\n\t};\n\n\tconst handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tconst { value: size } = event.target;\n\n\t\tsetState( ( prev ) => ( {\n\t\t\t...prev,\n\t\t\tvalue: {\n\t\t\t\t...prev.value,\n\t\t\t\tsize: size || size === '0' ? parseFloat( size ) : NaN,\n\t\t\t},\n\t\t} ) );\n\t};\n\n\treturn (\n\t\t<Stack direction=\"row\">\n\t\t\t<TextField\n\t\t\t\tsize=\"tiny\"\n\t\t\t\ttype=\"number\"\n\t\t\t\tvalue={ Number.isNaN( state.value.size ) ? '' : state.value.size }\n\t\t\t\tonChange={ handleSizeChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t/>\n\t\t\t<Select\n\t\t\t\tsize=\"tiny\"\n\t\t\t\tvalue={ state.value.unit }\n\t\t\t\tonChange={ handleUnitChange }\n\t\t\t\tMenuProps={ {\n\t\t\t\t\tanchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ units.map( ( unit ) => (\n\t\t\t\t\t<MenuItem key={ unit } value={ unit }>\n\t\t\t\t\t\t{ unit.toUpperCase() }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) ) }\n\t\t\t</Select>\n\t\t</Stack>\n\t);\n};\n","import { useEffect, useState } from 'react';\n\ntype UseInternalStateOptions< TValue > = {\n\texternal: TValue | undefined;\n\tsetExternal: ( value: TValue | undefined ) => void;\n\tpersistWhen: ( value: TValue | undefined ) => boolean;\n\tfallback: ( value: TValue | undefined ) => TValue;\n};\n\nexport const useSyncExternalState = < TValue, >( {\n\texternal,\n\tsetExternal,\n\tpersistWhen,\n\tfallback,\n}: UseInternalStateOptions< TValue > ) => {\n\tfunction toExternal( internalValue: TValue | undefined ) {\n\t\tif ( persistWhen( internalValue ) ) {\n\t\t\treturn internalValue;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tfunction toInternal( externalValue: TValue | undefined, internalValue: TValue | undefined ) {\n\t\tif ( ! externalValue ) {\n\t\t\treturn fallback( internalValue );\n\t\t}\n\n\t\treturn externalValue;\n\t}\n\n\tconst [ internal, setInternal ] = useState< TValue >( toInternal( external, undefined ) );\n\n\tuseEffect( () => {\n\t\tsetInternal( toInternal( external, internal ) );\n\t}, [ external ] );\n\n\ttype SetterFunc = ( value: TValue ) => TValue;\n\n\tconst setInternalValue = ( setter: SetterFunc | TValue ) => {\n\t\tconst setterFn = ( typeof setter === 'function' ? setter : () => setter ) as SetterFunc;\n\t\tconst updated = setterFn( internal );\n\n\t\tsetInternal( updated );\n\t\tsetExternal( toExternal( updated ) );\n\t};\n\n\treturn [ internal, setInternalValue ] as const;\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","import_i18n","useListenTo","import_editor_v1_adapters","useListenTo","import_ui","React","import_i18n","React","import_ui","React","import_react","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand","React","import_react","import_ui","React","import_ui","React","import_ui","React","import_ui","React","import_ui","React","React","import_react","Context","import_editor_v1_adapters","useListenTo","import_ui","React","React","import_editor_v1_adapters","runCommand","import_editor_v1_adapters","useListenTo","import_ui","Label","React","import_ui","import_react","units","import_ui","import_i18n","Control","createPanel","import_react","import_editor_v1_adapters","listenTo","import_editor_panels","import_editor_v1_adapters","registerPanel","blockDataCommand"]}

package/dist/index.mjs

@@ -232,10 +232,10 @@ import { UploadIcon } from "@elementor/icons";
 import { __ } from "@wordpress/i18n";
 import { useWpMediaAttachment, useWpMediaFrame } from "@elementor/wp-media";
 var isImageAttachment = (value) => {
-  return value.$$type === "image-attachment";
+  return value?.$$type === "image-attachment";
 };
 var isImageUrl = (value) => {
-  return value.$$type === "image-url";
+  return value?.$$type === "image-url";
 };
 var defaultState = {
   $$type: "image-url",
@@ -462,26 +462,78 @@ StyleControl.Label = Label2;
 // src/controls/control-types/size-control.tsx
 import * as React11 from "react";
 import { MenuItem as MenuItem2, Select as Select2, Stack as Stack4, TextField as TextField3 } from "@elementor/ui";
+
+// src/controls/hooks/use-sync-external-state.tsx
+import { useEffect, useState } from "react";
+var useSyncExternalState = ({
+  external,
+  setExternal,
+  persistWhen,
+  fallback
+}) => {
+  function toExternal(internalValue) {
+    if (persistWhen(internalValue)) {
+      return internalValue;
+    }
+    return void 0;
+  }
+  function toInternal(externalValue, internalValue) {
+    if (!externalValue) {
+      return fallback(internalValue);
+    }
+    return externalValue;
+  }
+  const [internal, setInternal] = useState(toInternal(external, void 0));
+  useEffect(() => {
+    setInternal(toInternal(external, internal));
+  }, [external]);
+  const setInternalValue = (setter) => {
+    const setterFn = typeof setter === "function" ? setter : () => setter;
+    const updated = setterFn(internal);
+    setInternal(updated);
+    setExternal(toExternal(updated));
+  };
+  return [internal, setInternalValue];
+};
+
+// src/controls/control-types/size-control.tsx
 var SizeControl = ({ units: units2, placeholder }) => {
-  const { value, setValue } = useControl(defaultState2);
-  const propValue = value.value;
+  const { value, setValue } = useControl();
+  const [state, setState] = useSyncExternalState({
+    external: value,
+    setExternal: setValue,
+    persistWhen: (controlValue) => !!controlValue?.value.size || controlValue?.value.size === 0,
+    fallback: (controlValue) => ({
+      $$type: "size",
+      value: { unit: controlValue?.value.unit || "px", size: NaN }
+    })
+  });
   const handleUnitChange = (event) => {
     const unit = event.target.value;
-    setValue({ $$type: "size", value: { ...propValue, unit } });
+    setState((prev) => ({
+      ...prev,
+      value: {
+        ...prev.value,
+        unit
+      }
+    }));
   };
   const handleSizeChange = (event) => {
-    const { valueAsNumber: size } = event.target;
-    if (Number.isNaN(size)) {
-      return;
-    }
-    setValue({ $$type: "size", value: { ...propValue, size } });
+    const { value: size } = event.target;
+    setState((prev) => ({
+      ...prev,
+      value: {
+        ...prev.value,
+        size: size || size === "0" ? parseFloat(size) : NaN
+      }
+    }));
   };
   return /* @__PURE__ */ React11.createElement(Stack4, { direction: "row" }, /* @__PURE__ */ React11.createElement(
     TextField3,
     {
       size: "tiny",
       type: "number",
-      value: propValue.size,
+      value: Number.isNaN(state.value.size) ? "" : state.value.size,
       onChange: handleSizeChange,
       placeholder
     }
@@ -489,7 +541,7 @@ var SizeControl = ({ units: units2, placeholder }) => {
     Select2,
     {
       size: "tiny",
-      value: propValue.unit,
+      value: state.value.unit,
       onChange: handleUnitChange,
       MenuProps: {
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
@@ -499,10 +551,6 @@ var SizeControl = ({ units: units2, placeholder }) => {
     units2.map((unit) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: unit, value: unit }, unit.toUpperCase()))
   ));
 };
-var defaultState2 = {
-  $$type: "size",
-  value: { unit: "px", size: 0 }
-};
 
 // src/components/style-sections/size-section.tsx
 import { Stack as Stack5 } from "@elementor/ui";
@@ -561,11 +609,11 @@ var shouldUseV2Panel = () => {
 };
 
 // src/hooks/use-open-editor-panel.ts
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 import { commandStartEvent, __privateListenTo as listenTo } from "@elementor/editor-v1-adapters";
 var useOpenEditorPanel = () => {
   const { open } = usePanelActions();
-  useEffect(() => {
+  useEffect2(() => {
     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/contexts/element-context.tsx","../src/components/editing-panel-tabs.tsx","../src/components/settings-tab.tsx","../src/controls/settings-control.tsx","../src/controls/control-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/collapsible-section.tsx","../src/controls/control-types/select-control.tsx","../src/controls/control-types/text-area-control.tsx","../src/controls/control-types/text-control.tsx","../src/controls/control-types/attachment-control.tsx","../src/controls/get-control-by-type.ts","../src/components/style-tab.tsx","../src/contexts/style-context.tsx","../src/hooks/use-element-styles.ts","../src/sync/get-element-styles.ts","../src/components/style-sections/size-section.tsx","../src/controls/style-control.tsx","../src/sync/update-style.ts","../src/hooks/use-element-style-prop.ts","../src/controls/control-types/size-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 { ElementContext } from '../contexts/element-context';\nimport { EditingPanelTabs } from './editing-panel-tabs';\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<EditingPanelTabs />\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 { 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 { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';\nimport * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { SettingsTab } from './settings-tab';\nimport { StyleTab } from './style-tab';\n\ntype TabValue = 'settings' | 'style';\n\nexport const EditingPanelTabs = () => {\n\tconst { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );\n\n\treturn (\n\t\t<Stack direction=\"column\" sx={ { width: '100%' } }>\n\t\t\t<Tabs variant=\"fullWidth\" indicatorColor=\"secondary\" textColor=\"inherit\" { ...getTabsProps() }>\n\t\t\t\t<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />\n\t\t\t\t<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />\n\t\t\t</Tabs>\n\t\t\t<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>\n\t\t\t\t<SettingsTab />\n\t\t\t</TabPanel>\n\t\t\t<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>\n\t\t\t\t<StyleTab />\n\t\t\t</TabPanel>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { Stack } from '@elementor/ui';\nimport { SettingsControl } from '../controls/settings-control';\nimport { useElementContext } from '../contexts/element-context';\nimport useElementType from '../hooks/use-element-type';\nimport type { Control } from '../types';\nimport { CollapsibleSection } from './collapsible-section';\nimport { getControlByType } from '../controls/get-control-by-type';\n\nexport const SettingsTab = () => {\n\tconst { element } = useElementContext();\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( ! elementType ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Stack>\n\t\t\t{ elementType.controls.map( ( { type, value }, index ) => {\n\t\t\t\tif ( type === 'control' ) {\n\t\t\t\t\treturn <Control key={ value.bind } control={ value } />;\n\t\t\t\t}\n\n\t\t\t\tif ( type === 'section' ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollapsibleSection key={ type + '.' + index } title={ value.label }>\n\t\t\t\t\t\t\t{ value.items?.map( ( item ) => {\n\t\t\t\t\t\t\t\tif ( item.type === 'control' ) {\n\t\t\t\t\t\t\t\t\treturn <Control key={ item.value.bind } control={ item.value } />;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// TODO: Handle 2nd level sections\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</CollapsibleSection>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n};\n\n// TODO: Create control wrapper by type for different layouts.\nconst Control = ( { control }: { control: Control[ 'value' ] } ) => {\n\tconst ControlComponent = getControlByType( control.type );\n\n\tif ( ! ControlComponent ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<SettingsControl bind={ control.bind }>\n\t\t\t{ control.label ? <SettingsControl.Label>{ control.label }</SettingsControl.Label> : null }\n\t\t\t<ControlComponent\n\t\t\t\t/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n\t\t\t\t{ ...( control.props as any ) }\n\t\t\t/>\n\t\t</SettingsControl>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from '../controls/control-context';\nimport { Stack, styled, Typography } from '@elementor/ui';\nimport { PropKey, PropValue } from '../types';\nimport { useElementContext } from '../contexts/element-context';\nimport { useWidgetSettings } from '../hooks/use-widget-settings';\nimport { updateSettings } from '../sync/update-settings';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const SettingsControlProvider = ( { 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\nconst SettingsControl = ( { children, bind }: Props ) => (\n\t<SettingsControlProvider bind={ bind }>\n\t\t<StyledStack gap={ 1 } direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" flexWrap=\"wrap\">\n\t\t\t{ children }\n\t\t</StyledStack>\n\t</SettingsControlProvider>\n);\n\nconst StyledStack = styled( Stack )`\n\t& > * {\n\t\tflex-grow: 1;\n\t}\n\n\t& > label {\n\t\tmin-width: 50%;\n\t}\n`;\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nSettingsControl.Label = Label;\n\nexport { SettingsControl };\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../types';\n\nexport type ControlContext< T extends PropValue > = {\n\tbind: PropKey;\n\tsetValue: ( value: T ) => void;\n\tvalue: T;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > | null >( null );\n\nexport function useControl< T extends PropValue >(): ControlContext< T | undefined >;\nexport function useControl< T extends PropValue >( defaultValue: T ): ControlContext< T >;\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 { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[ id, bind ]\n\t);\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';\n\nexport type CollapsibleSectionProps = React.PropsWithChildren< {\n\ttitle: React.ReactNode;\n} >;\n\nexport const CollapsibleSection = ( { title, children }: CollapsibleSectionProps ) => {\n\tconst uid = useId();\n\tconst labelId = `label-${ uid }`;\n\tconst contentId = `content-${ uid }`;\n\n\t// TODO: Change to collapsible list item\n\treturn (\n\t\t<Accordion disableGutters defaultExpanded>\n\t\t\t<AccordionSummary aria-controls={ contentId } id={ labelId }>\n\t\t\t\t<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>\n\t\t\t</AccordionSummary>\n\t\t\t<AccordionDetails id={ contentId } aria-labelledby={ labelId }>\n\t\t\t\t<Stack gap={ 2.5 }>{ children }</Stack>\n\t\t\t</AccordionDetails>\n\t\t</Accordion>\n\t);\n};\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../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 { TextField } from '@elementor/ui';\nimport { useControl } from '../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<TextField\n\t\t\tsize=\"tiny\"\n\t\t\tmultiline\n\t\t\tfullWidth\n\t\t\trows={ 5 }\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 { TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport const TextControl = ( { placeholder }: { placeholder?: string } ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );\n\n\treturn <TextField type=\"text\" size=\"tiny\" value={ value } onChange={ handleChange } placeholder={ placeholder } />;\n};\n","import * as React from 'react';\nimport { Button, Card, CardMedia, CardOverlay } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { UploadIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\nimport { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';\n\ntype ImageAttachment = {\n\t$$type: 'image-attachment';\n\tvalue: {\n\t\tid: number;\n\t};\n};\n\ntype ImageURL = {\n\t$$type: 'image-url';\n\tvalue: {\n\t\turl: string;\n\t};\n};\n\ntype Props = {\n\tmediaTypes: Array< 'image' >;\n};\n\nconst isImageAttachment = ( value: ImageAttachment | ImageURL ): value is ImageAttachment => {\n\treturn value.$$type === 'image-attachment';\n};\n\nconst isImageUrl = ( value: ImageAttachment | ImageURL ): value is ImageURL => {\n\treturn value.$$type === 'image-url';\n};\n\n// TODO: Use schema to get default image.\nconst defaultState: ImageURL = {\n\t$$type: 'image-url',\n\tvalue: {\n\t\turl: '/wp-content/plugins/elementor/assets/images/placeholder.png',\n\t},\n};\n\nexport const AttachmentControl = ( props: Props ) => {\n\tconst { value, setValue } = useControl< ImageAttachment | ImageURL >( defaultState );\n\tconst { data: attachment } = useWpMediaAttachment( isImageAttachment( value ) ? value.value.id : undefined );\n\n\tconst getImageSrc = () => {\n\t\tif ( attachment?.url ) {\n\t\t\treturn attachment.url;\n\t\t}\n\n\t\tif ( isImageUrl( value ) ) {\n\t\t\treturn value.value.url;\n\t\t}\n\n\t\treturn defaultState.value.url;\n\t};\n\n\tconst { open } = useWpMediaFrame( {\n\t\ttypes: props.mediaTypes,\n\t\tmultiple: false,\n\t\tselected: isImageAttachment( value ) ? value.value?.id : undefined,\n\t\tonSelect: ( val ) => {\n\t\t\tsetValue( {\n\t\t\t\t$$type: 'image-attachment',\n\t\t\t\tvalue: {\n\t\t\t\t\tid: val.id,\n\t\t\t\t},\n\t\t\t} );\n\t\t},\n\t} );\n\n\treturn (\n\t\t<Card variant=\"outlined\">\n\t\t\t<CardMedia image={ getImageSrc() } sx={ { height: 150 } } />\n\t\t\t<CardOverlay>\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'browse' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Select Image', 'elementor' ) }\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\tstartIcon={ <UploadIcon /> }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'upload' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Upload Image', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardOverlay>\n\t\t</Card>\n\t);\n};\n","import { SelectControl } from './control-types/select-control';\nimport { TextAreaControl } from './control-types/text-area-control';\nimport { TextControl } from './control-types/text-control';\nimport { AttachmentControl } from './control-types/attachment-control';\n\nconst controlTypes = {\n\tattachment: AttachmentControl,\n\tselect: SelectControl,\n\ttext: TextControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const getControlByType = ( type: string ) => {\n\treturn controlTypes[ type as keyof typeof controlTypes ] ?? null;\n};\n","import * as React from 'react';\nimport { StyleContext } from '../contexts/style-context';\nimport { useElementContext } from '../contexts/element-context';\nimport { useElementStyles } from '../hooks/use-element-styles';\nimport { Stack } from '@elementor/ui';\nimport { SizeSection } from './style-sections/size-section';\n\nexport const StyleTab = () => {\n\tconst { element } = useElementContext();\n\tconst elementStyles = useElementStyles( element.id );\n\t// TODO: Handle selected style state.\n\tconst [ selectedStyleDef = null ] = Object.values( elementStyles || {} );\n\n\treturn (\n\t\t<StyleContext selectedStyleDef={ selectedStyleDef }>\n\t\t\t<Stack>\n\t\t\t\t<SizeSection />\n\t\t\t</Stack>\n\t\t</StyleContext>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { useActiveBreakpoint } from '@elementor/editor-responsive';\nimport { StyleDefinition, StyleVariant } from '@elementor/editor-style';\n\ntype ContextValue = {\n\tselectedStyleDef: StyleDefinition | null;\n\tselectedMeta: StyleVariant[ 'meta' ];\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\tchildren: ReactNode;\n\tselectedStyleDef: StyleDefinition | null;\n};\n\nexport function StyleContext( { children, selectedStyleDef }: Props ) {\n\tconst breakpoint = useActiveBreakpoint();\n\t// TODO: Handle state when we support it.\n\tconst selectedMeta = { breakpoint, state: null } as const;\n\n\treturn <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;\n}\n\nexport function useStyleContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'UseStyleContext must be used within a StyleContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { ElementID } from '../types';\n\nexport const useElementStyles = ( elementID: ElementID ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\treturn getElementStyles( elementID );\n\t\t},\n\t\t[ elementID ]\n\t);\n};\n","import getContainer from './get-container';\nimport { ElementID } from '../types';\nimport { StyleDefinition } from '@elementor/editor-style';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import * as React from 'react';\nimport { CollapsibleSection } from '../../components/collapsible-section';\nimport { StyleControl, StyleControlProps } from '../../controls/style-control';\nimport { SizeControl, Unit } from '../../controls/control-types/size-control';\nimport { Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const SizeSection = () => {\n\treturn (\n\t\t<CollapsibleSection title={ __( 'Size', 'elementor' ) }>\n\t\t\t<Stack gap={ 1.5 }>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"width\" label={ __( 'Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"height\" label={ __( 'Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"min-width\" label={ __( 'Min. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"min-height\" label={ __( 'Min. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"max-width\" label={ __( 'Max. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"max-height\" label={ __( 'Max. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</CollapsibleSection>\n\t);\n};\n\nconst units: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];\n\ntype ControlProps = {\n\tbind: StyleControlProps[ 'bind' ];\n\tlabel: string;\n};\n\nconst Control = ( { label, bind }: ControlProps ) => {\n\treturn (\n\t\t<StyleControl bind={ bind }>\n\t\t\t<Stack gap={ 1 } sx={ { flex: '0 1 50%' } }>\n\t\t\t\t<StyleControl.Label>{ label }</StyleControl.Label>\n\t\t\t\t<SizeControl units={ units } />\n\t\t\t</Stack>\n\t\t</StyleControl>\n\t);\n};\n","import * as React from 'react';\nimport { PropKey, PropValue } from '../types';\nimport { ControlContext } from '../controls/control-context';\nimport { updateStyle } from '../sync/update-style';\nimport { useElementStyleProp } from '../hooks/use-element-style-prop';\nimport { useElementContext } from '../contexts/element-context';\nimport { useStyleContext } from '../contexts/style-context';\nimport { Typography } from '@elementor/ui';\n\nexport type StyleControlProps = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nconst StyleControl = ( { bind, children }: StyleControlProps ) => {\n\tconst { element } = useElementContext();\n\tconst { selectedStyleDef, selectedMeta } = useStyleContext();\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateStyle( {\n\t\t\telementID: element.id,\n\t\t\tstyleDefID: selectedStyleDef?.id,\n\t\t\tprops: { [ bind ]: newValue },\n\t\t\tmeta: selectedMeta,\n\t\t} );\n\t};\n\n\tconst value = useElementStyleProp( {\n\t\telementID: element.id,\n\t\tstyleDefID: selectedStyleDef?.id,\n\t\tmeta: selectedMeta,\n\t\tpropName: bind,\n\t} );\n\n\treturn <ControlContext.Provider value={ { bind, value, setValue } }>{ children }</ControlContext.Provider>;\n};\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nStyleControl.Label = Label;\n\nexport { StyleControl };\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, Props } from '../types';\nimport getContainer from './get-container';\nimport { StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UpdateStyleProps = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tprops: Props;\n\tbind?: PropKey;\n};\n\nexport const updateStyle = ( { elementID, styleDefID, meta, props, bind = 'classes' }: UpdateStyleProps ) => {\n\tconst container = getContainer( elementID );\n\n\trunCommand( 'document/atomic-widgets/styles', {\n\t\tcontainer,\n\t\tstyleDefID,\n\t\tbind,\n\t\tmeta,\n\t\tprops,\n\t} );\n};\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, PropValue } from '../types';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UseElementStylePropArgs = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tpropName: PropKey;\n};\n\nexport const useElementStyleProp = < T extends PropValue >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropName,\n}: UseElementStylePropArgs ): T | null => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\t// TODO: return default value for style prop\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn variant?.props[ propName ] ?? null;\n\t\t},\n\t\t[ elementID, styleDefID, propName, meta ]\n\t) as T;\n};\n\nfunction getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {\n\treturn styleDef.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { TransformablePropValue } from '../../types';\n\nexport type SizeControlProps = {\n\tunits: Unit[];\n\tplaceholder?: string;\n};\n\nexport type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';\n\nexport type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;\n\nexport const SizeControl = ( { units, placeholder }: SizeControlProps ) => {\n\tconst { value, setValue } = useControl< SizeControlValue >( defaultState );\n\tconst propValue = value.value;\n\n\tconst handleUnitChange = ( event: SelectChangeEvent< Unit > ) => {\n\t\tconst unit = event.target.value as Unit;\n\n\t\tsetValue( { $$type: 'size', value: { ...propValue, unit } } );\n\t};\n\n\tconst handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tconst { valueAsNumber: size } = event.target;\n\n\t\tif ( Number.isNaN( size ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetValue( { $$type: 'size', value: { ...propValue, size } } );\n\t};\n\n\treturn (\n\t\t<Stack direction=\"row\">\n\t\t\t<TextField\n\t\t\t\tsize=\"tiny\"\n\t\t\t\ttype=\"number\"\n\t\t\t\tvalue={ propValue.size }\n\t\t\t\tonChange={ handleSizeChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t/>\n\t\t\t<Select\n\t\t\t\tsize=\"tiny\"\n\t\t\t\tvalue={ propValue.unit }\n\t\t\t\tonChange={ handleUnitChange }\n\t\t\t\tMenuProps={ {\n\t\t\t\t\tanchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ units.map( ( unit ) => (\n\t\t\t\t\t<MenuItem key={ unit } value={ unit }>\n\t\t\t\t\t\t{ unit.toUpperCase() }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) ) }\n\t\t\t</Select>\n\t\t</Stack>\n\t);\n};\n\nconst defaultState: SizeControlValue = {\n\t$$type: 'size',\n\tvalue: { unit: 'px', size: 0 },\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","Stack","React","__","React","Stack","React","createContext","useContext","commandEndEvent","useListenTo","useListenTo","commandEndEvent","React","Stack","React","React","React","TextField","TextField","React","Stack","React","React","createContext","useContext","Context","useListenTo","commandEndEvent","useListenTo","commandEndEvent","Stack","React","React","runCommand","runCommand","commandEndEvent","useListenTo","useListenTo","commandEndEvent","Typography","Label","React","MenuItem","Select","Stack","TextField","units","defaultState","Stack","TextField","Select","MenuItem","Stack","__","Control","Stack","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/contexts/element-context.tsx","../src/components/editing-panel-tabs.tsx","../src/components/settings-tab.tsx","../src/controls/settings-control.tsx","../src/controls/control-context.tsx","../src/hooks/use-widget-settings.ts","../src/sync/get-container.ts","../src/sync/update-settings.ts","../src/components/collapsible-section.tsx","../src/controls/control-types/select-control.tsx","../src/controls/control-types/text-area-control.tsx","../src/controls/control-types/text-control.tsx","../src/controls/control-types/attachment-control.tsx","../src/controls/get-control-by-type.ts","../src/components/style-tab.tsx","../src/contexts/style-context.tsx","../src/hooks/use-element-styles.ts","../src/sync/get-element-styles.ts","../src/components/style-sections/size-section.tsx","../src/controls/style-control.tsx","../src/sync/update-style.ts","../src/hooks/use-element-style-prop.ts","../src/controls/control-types/size-control.tsx","../src/controls/hooks/use-sync-external-state.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 { ElementContext } from '../contexts/element-context';\nimport { EditingPanelTabs } from './editing-panel-tabs';\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<EditingPanelTabs />\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 { 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 { Stack, Tabs, Tab, TabPanel, useTabs } from '@elementor/ui';\nimport * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { SettingsTab } from './settings-tab';\nimport { StyleTab } from './style-tab';\n\ntype TabValue = 'settings' | 'style';\n\nexport const EditingPanelTabs = () => {\n\tconst { getTabProps, getTabPanelProps, getTabsProps } = useTabs< TabValue >( 'settings' );\n\n\treturn (\n\t\t<Stack direction=\"column\" sx={ { width: '100%' } }>\n\t\t\t<Tabs variant=\"fullWidth\" indicatorColor=\"secondary\" textColor=\"inherit\" { ...getTabsProps() }>\n\t\t\t\t<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />\n\t\t\t\t<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />\n\t\t\t</Tabs>\n\t\t\t<TabPanel { ...getTabPanelProps( 'settings' ) } disablePadding>\n\t\t\t\t<SettingsTab />\n\t\t\t</TabPanel>\n\t\t\t<TabPanel { ...getTabPanelProps( 'style' ) } disablePadding>\n\t\t\t\t<StyleTab />\n\t\t\t</TabPanel>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { Stack } from '@elementor/ui';\nimport { SettingsControl } from '../controls/settings-control';\nimport { useElementContext } from '../contexts/element-context';\nimport useElementType from '../hooks/use-element-type';\nimport type { Control } from '../types';\nimport { CollapsibleSection } from './collapsible-section';\nimport { getControlByType } from '../controls/get-control-by-type';\n\nexport const SettingsTab = () => {\n\tconst { element } = useElementContext();\n\n\tconst elementType = useElementType( element?.type );\n\n\tif ( ! elementType ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Stack>\n\t\t\t{ elementType.controls.map( ( { type, value }, index ) => {\n\t\t\t\tif ( type === 'control' ) {\n\t\t\t\t\treturn <Control key={ value.bind } control={ value } />;\n\t\t\t\t}\n\n\t\t\t\tif ( type === 'section' ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<CollapsibleSection key={ type + '.' + index } title={ value.label }>\n\t\t\t\t\t\t\t{ value.items?.map( ( item ) => {\n\t\t\t\t\t\t\t\tif ( item.type === 'control' ) {\n\t\t\t\t\t\t\t\t\treturn <Control key={ item.value.bind } control={ item.value } />;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// TODO: Handle 2nd level sections\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</CollapsibleSection>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n};\n\n// TODO: Create control wrapper by type for different layouts.\nconst Control = ( { control }: { control: Control[ 'value' ] } ) => {\n\tconst ControlComponent = getControlByType( control.type );\n\n\tif ( ! ControlComponent ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<SettingsControl bind={ control.bind }>\n\t\t\t{ control.label ? <SettingsControl.Label>{ control.label }</SettingsControl.Label> : null }\n\t\t\t<ControlComponent\n\t\t\t\t/* eslint-disable-next-line @typescript-eslint/no-explicit-any */\n\t\t\t\t{ ...( control.props as any ) }\n\t\t\t/>\n\t\t</SettingsControl>\n\t);\n};\n","import * as React from 'react';\nimport { ControlContext } from '../controls/control-context';\nimport { Stack, styled, Typography } from '@elementor/ui';\nimport { PropKey, PropValue } from '../types';\nimport { useElementContext } from '../contexts/element-context';\nimport { useWidgetSettings } from '../hooks/use-widget-settings';\nimport { updateSettings } from '../sync/update-settings';\n\ntype Props = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nexport const SettingsControlProvider = ( { 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\nconst SettingsControl = ( { children, bind }: Props ) => (\n\t<SettingsControlProvider bind={ bind }>\n\t\t<StyledStack gap={ 1 } direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" flexWrap=\"wrap\">\n\t\t\t{ children }\n\t\t</StyledStack>\n\t</SettingsControlProvider>\n);\n\nconst StyledStack = styled( Stack )`\n\t& > * {\n\t\tflex-grow: 1;\n\t}\n\n\t& > label {\n\t\tmin-width: 50%;\n\t}\n`;\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nSettingsControl.Label = Label;\n\nexport { SettingsControl };\n","import { createContext, useContext } from 'react';\nimport { PropKey, PropValue } from '../types';\n\nexport type ControlContext< T extends PropValue > = {\n\tbind: PropKey;\n\tsetValue: ( value: T | undefined ) => void;\n\tvalue: T | undefined;\n};\n\nexport const ControlContext = createContext< ControlContext< PropValue > | null >( null );\n\nexport function useControl< T extends PropValue >(): ControlContext< T | undefined >;\nexport function useControl< T extends PropValue >( defaultValue: T ): ControlContext< T >;\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 { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { PropValue } from '../types';\nimport getContainer from '../sync/get-container';\n\nexport const useWidgetSettings = ( { id, bind }: { id: string; bind: string } ): PropValue => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/elements/settings' ),\n\t\t() => {\n\t\t\tconst container = getContainer( id );\n\t\t\tconst value = container?.settings?.get( bind ) ?? null;\n\n\t\t\treturn value;\n\t\t},\n\t\t[ id, bind ]\n\t);\n};\n","import { ExtendedWindow } from './types';\n\nexport default function getContainer( id: string ) {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\tconst container = extendedWindow.elementor?.getContainer?.( id );\n\n\treturn container ?? null;\n}\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { Props } from '../types';\nimport getContainer from './get-container';\n\nexport const updateSettings = ( { id, props }: { id: string; props: Props } ) => {\n\tconst container = getContainer( id );\n\n\trunCommand( 'document/elements/settings', {\n\t\tcontainer,\n\t\tsettings: {\n\t\t\t...props,\n\t\t},\n\t} );\n};\n","import * as React from 'react';\nimport { useId } from 'react';\nimport { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';\n\nexport type CollapsibleSectionProps = React.PropsWithChildren< {\n\ttitle: React.ReactNode;\n} >;\n\nexport const CollapsibleSection = ( { title, children }: CollapsibleSectionProps ) => {\n\tconst uid = useId();\n\tconst labelId = `label-${ uid }`;\n\tconst contentId = `content-${ uid }`;\n\n\t// TODO: Change to collapsible list item\n\treturn (\n\t\t<Accordion disableGutters defaultExpanded>\n\t\t\t<AccordionSummary aria-controls={ contentId } id={ labelId }>\n\t\t\t\t<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>\n\t\t\t</AccordionSummary>\n\t\t\t<AccordionDetails id={ contentId } aria-labelledby={ labelId }>\n\t\t\t\t<Stack gap={ 2.5 }>{ children }</Stack>\n\t\t\t</AccordionDetails>\n\t\t</Accordion>\n\t);\n};\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';\nimport { useControl } from '../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 { TextField } from '@elementor/ui';\nimport { useControl } from '../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<TextField\n\t\t\tsize=\"tiny\"\n\t\t\tmultiline\n\t\t\tfullWidth\n\t\t\trows={ 5 }\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 { TextField } from '@elementor/ui';\nimport { useControl } from '../control-context';\n\nexport const TextControl = ( { placeholder }: { placeholder?: string } ) => {\n\tconst { value, setValue } = useControl< string >( '' );\n\n\tconst handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );\n\n\treturn <TextField type=\"text\" size=\"tiny\" value={ value } onChange={ handleChange } placeholder={ placeholder } />;\n};\n","import * as React from 'react';\nimport { Button, Card, CardMedia, CardOverlay } from '@elementor/ui';\nimport { useControl } from '../control-context';\nimport { UploadIcon } from '@elementor/icons';\nimport { __ } from '@wordpress/i18n';\nimport { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';\n\ntype ImageAttachment = {\n\t$$type: 'image-attachment';\n\tvalue: {\n\t\tid: number;\n\t};\n};\n\ntype ImageURL = {\n\t$$type: 'image-url';\n\tvalue: {\n\t\turl: string;\n\t};\n};\n\ntype Props = {\n\tmediaTypes: Array< 'image' >;\n};\n\nconst isImageAttachment = ( value: ImageAttachment | ImageURL | undefined ): value is ImageAttachment => {\n\treturn value?.$$type === 'image-attachment';\n};\n\nconst isImageUrl = ( value: ImageAttachment | ImageURL | undefined ): value is ImageURL => {\n\treturn value?.$$type === 'image-url';\n};\n\n// TODO: Use schema to get default image.\nconst defaultState: ImageURL = {\n\t$$type: 'image-url',\n\tvalue: {\n\t\turl: '/wp-content/plugins/elementor/assets/images/placeholder.png',\n\t},\n};\n\nexport const AttachmentControl = ( props: Props ) => {\n\tconst { value, setValue } = useControl< ImageAttachment | ImageURL >( defaultState );\n\tconst { data: attachment } = useWpMediaAttachment( isImageAttachment( value ) ? value.value.id : undefined );\n\n\tconst getImageSrc = () => {\n\t\tif ( attachment?.url ) {\n\t\t\treturn attachment.url;\n\t\t}\n\n\t\tif ( isImageUrl( value ) ) {\n\t\t\treturn value.value.url;\n\t\t}\n\n\t\treturn defaultState.value.url;\n\t};\n\n\tconst { open } = useWpMediaFrame( {\n\t\ttypes: props.mediaTypes,\n\t\tmultiple: false,\n\t\tselected: isImageAttachment( value ) ? value.value?.id : undefined,\n\t\tonSelect: ( val ) => {\n\t\t\tsetValue( {\n\t\t\t\t$$type: 'image-attachment',\n\t\t\t\tvalue: {\n\t\t\t\t\tid: val.id,\n\t\t\t\t},\n\t\t\t} );\n\t\t},\n\t} );\n\n\treturn (\n\t\t<Card variant=\"outlined\">\n\t\t\t<CardMedia image={ getImageSrc() } sx={ { height: 150 } } />\n\t\t\t<CardOverlay>\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"outlined\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'browse' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Select Image', 'elementor' ) }\n\t\t\t\t</Button>\n\n\t\t\t\t<Button\n\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\tstartIcon={ <UploadIcon /> }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen( { mode: 'upload' } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Upload Image', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</CardOverlay>\n\t\t</Card>\n\t);\n};\n","import { SelectControl } from './control-types/select-control';\nimport { TextAreaControl } from './control-types/text-area-control';\nimport { TextControl } from './control-types/text-control';\nimport { AttachmentControl } from './control-types/attachment-control';\n\nconst controlTypes = {\n\tattachment: AttachmentControl,\n\tselect: SelectControl,\n\ttext: TextControl,\n\ttextarea: TextAreaControl,\n};\n\nexport const getControlByType = ( type: string ) => {\n\treturn controlTypes[ type as keyof typeof controlTypes ] ?? null;\n};\n","import * as React from 'react';\nimport { StyleContext } from '../contexts/style-context';\nimport { useElementContext } from '../contexts/element-context';\nimport { useElementStyles } from '../hooks/use-element-styles';\nimport { Stack } from '@elementor/ui';\nimport { SizeSection } from './style-sections/size-section';\n\nexport const StyleTab = () => {\n\tconst { element } = useElementContext();\n\tconst elementStyles = useElementStyles( element.id );\n\t// TODO: Handle selected style state.\n\tconst [ selectedStyleDef = null ] = Object.values( elementStyles || {} );\n\n\treturn (\n\t\t<StyleContext selectedStyleDef={ selectedStyleDef }>\n\t\t\t<Stack>\n\t\t\t\t<SizeSection />\n\t\t\t</Stack>\n\t\t</StyleContext>\n\t);\n};\n","import * as React from 'react';\nimport { createContext, ReactNode, useContext } from 'react';\nimport { useActiveBreakpoint } from '@elementor/editor-responsive';\nimport { StyleDefinition, StyleVariant } from '@elementor/editor-style';\n\ntype ContextValue = {\n\tselectedStyleDef: StyleDefinition | null;\n\tselectedMeta: StyleVariant[ 'meta' ];\n};\n\nconst Context = createContext< ContextValue | null >( null );\n\ntype Props = {\n\tchildren: ReactNode;\n\tselectedStyleDef: StyleDefinition | null;\n};\n\nexport function StyleContext( { children, selectedStyleDef }: Props ) {\n\tconst breakpoint = useActiveBreakpoint();\n\t// TODO: Handle state when we support it.\n\tconst selectedMeta = { breakpoint, state: null } as const;\n\n\treturn <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;\n}\n\nexport function useStyleContext() {\n\tconst context = useContext( Context );\n\n\tif ( ! context ) {\n\t\tthrow new Error( 'UseStyleContext must be used within a StyleContextProvider' );\n\t}\n\n\treturn context;\n}\n","import { __privateUseListenTo as useListenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { ElementID } from '../types';\n\nexport const useElementStyles = ( elementID: ElementID ) => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\treturn getElementStyles( elementID );\n\t\t},\n\t\t[ elementID ]\n\t);\n};\n","import getContainer from './get-container';\nimport { ElementID } from '../types';\nimport { StyleDefinition } from '@elementor/editor-style';\n\nexport const getElementStyles = ( elementID: ElementID ): Record< string, StyleDefinition > | null => {\n\tconst container = getContainer( elementID );\n\n\treturn container?.model.get( 'styles' ) || null;\n};\n","import * as React from 'react';\nimport { CollapsibleSection } from '../../components/collapsible-section';\nimport { StyleControl, StyleControlProps } from '../../controls/style-control';\nimport { SizeControl, Unit } from '../../controls/control-types/size-control';\nimport { Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nexport const SizeSection = () => {\n\treturn (\n\t\t<CollapsibleSection title={ __( 'Size', 'elementor' ) }>\n\t\t\t<Stack gap={ 1.5 }>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"width\" label={ __( 'Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"height\" label={ __( 'Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"min-width\" label={ __( 'Min. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"min-height\" label={ __( 'Min. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap={ 2 }>\n\t\t\t\t\t<Control bind=\"max-width\" label={ __( 'Max. Width', 'elementor' ) } />\n\t\t\t\t\t<Control bind=\"max-height\" label={ __( 'Max. Height', 'elementor' ) } />\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</CollapsibleSection>\n\t);\n};\n\nconst units: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];\n\ntype ControlProps = {\n\tbind: StyleControlProps[ 'bind' ];\n\tlabel: string;\n};\n\nconst Control = ( { label, bind }: ControlProps ) => {\n\treturn (\n\t\t<StyleControl bind={ bind }>\n\t\t\t<Stack gap={ 1 } sx={ { flex: '0 1 50%' } }>\n\t\t\t\t<StyleControl.Label>{ label }</StyleControl.Label>\n\t\t\t\t<SizeControl units={ units } />\n\t\t\t</Stack>\n\t\t</StyleControl>\n\t);\n};\n","import * as React from 'react';\nimport { PropKey, PropValue } from '../types';\nimport { ControlContext } from '../controls/control-context';\nimport { updateStyle } from '../sync/update-style';\nimport { useElementStyleProp } from '../hooks/use-element-style-prop';\nimport { useElementContext } from '../contexts/element-context';\nimport { useStyleContext } from '../contexts/style-context';\nimport { Typography } from '@elementor/ui';\n\nexport type StyleControlProps = {\n\tbind: PropKey;\n\tchildren: React.ReactNode;\n};\n\nconst StyleControl = ( { bind, children }: StyleControlProps ) => {\n\tconst { element } = useElementContext();\n\tconst { selectedStyleDef, selectedMeta } = useStyleContext();\n\n\tconst setValue = ( newValue: PropValue ) => {\n\t\tupdateStyle( {\n\t\t\telementID: element.id,\n\t\t\tstyleDefID: selectedStyleDef?.id,\n\t\t\tprops: { [ bind ]: newValue },\n\t\t\tmeta: selectedMeta,\n\t\t} );\n\t};\n\n\tconst value = useElementStyleProp( {\n\t\telementID: element.id,\n\t\tstyleDefID: selectedStyleDef?.id,\n\t\tmeta: selectedMeta,\n\t\tpropName: bind,\n\t} );\n\n\treturn <ControlContext.Provider value={ { bind, value, setValue } }>{ children }</ControlContext.Provider>;\n};\n\nconst Label = ( { children }: { children: React.ReactNode } ) => {\n\treturn (\n\t\t<Typography component=\"label\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n};\n\nStyleControl.Label = Label;\n\nexport { StyleControl };\n","import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, Props } from '../types';\nimport getContainer from './get-container';\nimport { StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UpdateStyleProps = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tprops: Props;\n\tbind?: PropKey;\n};\n\nexport const updateStyle = ( { elementID, styleDefID, meta, props, bind = 'classes' }: UpdateStyleProps ) => {\n\tconst container = getContainer( elementID );\n\n\trunCommand( 'document/atomic-widgets/styles', {\n\t\tcontainer,\n\t\tstyleDefID,\n\t\tbind,\n\t\tmeta,\n\t\tprops,\n\t} );\n};\n","import { commandEndEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { ElementID, PropKey, PropValue } from '../types';\nimport { getElementStyles } from '../sync/get-element-styles';\nimport { StyleDefinition, StyleDefinitionID, StyleVariant } from '@elementor/editor-style';\n\nexport type UseElementStylePropArgs = {\n\telementID: ElementID;\n\tstyleDefID?: StyleDefinitionID;\n\tmeta: StyleVariant[ 'meta' ];\n\tpropName: PropKey;\n};\n\nexport const useElementStyleProp = < T extends PropValue >( {\n\telementID,\n\tstyleDefID,\n\tmeta,\n\tpropName,\n}: UseElementStylePropArgs ): T | null => {\n\treturn useListenTo(\n\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t() => {\n\t\t\t// TODO: return default value for style prop\n\t\t\tif ( ! styleDefID ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst styleDef = getElementStyles( elementID )?.[ styleDefID ];\n\n\t\t\tif ( ! styleDef ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( styleDef, meta );\n\n\t\t\treturn variant?.props[ propName ] ?? null;\n\t\t},\n\t\t[ elementID, styleDefID, propName, meta ]\n\t) as T;\n};\n\nfunction getVariantByMeta( styleDef: StyleDefinition, meta: StyleVariant[ 'meta' ] ) {\n\treturn styleDef.variants.find( ( variant ) => {\n\t\treturn variant.meta.breakpoint === meta.breakpoint && variant.meta.state === meta.state;\n\t} );\n}\n","import * as React from 'react';\nimport { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';\nimport { TransformablePropValue } from '../../types';\nimport { useControl } from '../control-context';\nimport { useSyncExternalState } from '../hooks/use-sync-external-state';\n\nexport type SizeControlProps = {\n\tunits: Unit[];\n\tplaceholder?: string;\n};\n\nexport type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';\n\nexport type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;\n\nexport const SizeControl = ( { units, placeholder }: SizeControlProps ) => {\n\tconst { value, setValue } = useControl< SizeControlValue >();\n\n\tconst [ state, setState ] = useSyncExternalState< SizeControlValue >( {\n\t\texternal: value,\n\t\tsetExternal: setValue,\n\t\tpersistWhen: ( controlValue ) => !! controlValue?.value.size || controlValue?.value.size === 0,\n\t\tfallback: ( controlValue ) => ( {\n\t\t\t$$type: 'size',\n\t\t\tvalue: { unit: controlValue?.value.unit || 'px', size: NaN },\n\t\t} ),\n\t} );\n\n\tconst handleUnitChange = ( event: SelectChangeEvent< Unit > ) => {\n\t\tconst unit = event.target.value as Unit;\n\n\t\tsetState( ( prev ) => ( {\n\t\t\t...prev,\n\t\t\tvalue: {\n\t\t\t\t...prev.value,\n\t\t\t\tunit,\n\t\t\t},\n\t\t} ) );\n\t};\n\n\tconst handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tconst { value: size } = event.target;\n\n\t\tsetState( ( prev ) => ( {\n\t\t\t...prev,\n\t\t\tvalue: {\n\t\t\t\t...prev.value,\n\t\t\t\tsize: size || size === '0' ? parseFloat( size ) : NaN,\n\t\t\t},\n\t\t} ) );\n\t};\n\n\treturn (\n\t\t<Stack direction=\"row\">\n\t\t\t<TextField\n\t\t\t\tsize=\"tiny\"\n\t\t\t\ttype=\"number\"\n\t\t\t\tvalue={ Number.isNaN( state.value.size ) ? '' : state.value.size }\n\t\t\t\tonChange={ handleSizeChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t/>\n\t\t\t<Select\n\t\t\t\tsize=\"tiny\"\n\t\t\t\tvalue={ state.value.unit }\n\t\t\t\tonChange={ handleUnitChange }\n\t\t\t\tMenuProps={ {\n\t\t\t\t\tanchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n\t\t\t\t\ttransformOrigin: { vertical: 'top', horizontal: 'right' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ units.map( ( unit ) => (\n\t\t\t\t\t<MenuItem key={ unit } value={ unit }>\n\t\t\t\t\t\t{ unit.toUpperCase() }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) ) }\n\t\t\t</Select>\n\t\t</Stack>\n\t);\n};\n","import { useEffect, useState } from 'react';\n\ntype UseInternalStateOptions< TValue > = {\n\texternal: TValue | undefined;\n\tsetExternal: ( value: TValue | undefined ) => void;\n\tpersistWhen: ( value: TValue | undefined ) => boolean;\n\tfallback: ( value: TValue | undefined ) => TValue;\n};\n\nexport const useSyncExternalState = < TValue, >( {\n\texternal,\n\tsetExternal,\n\tpersistWhen,\n\tfallback,\n}: UseInternalStateOptions< TValue > ) => {\n\tfunction toExternal( internalValue: TValue | undefined ) {\n\t\tif ( persistWhen( internalValue ) ) {\n\t\t\treturn internalValue;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tfunction toInternal( externalValue: TValue | undefined, internalValue: TValue | undefined ) {\n\t\tif ( ! externalValue ) {\n\t\t\treturn fallback( internalValue );\n\t\t}\n\n\t\treturn externalValue;\n\t}\n\n\tconst [ internal, setInternal ] = useState< TValue >( toInternal( external, undefined ) );\n\n\tuseEffect( () => {\n\t\tsetInternal( toInternal( external, internal ) );\n\t}, [ external ] );\n\n\ttype SetterFunc = ( value: TValue ) => TValue;\n\n\tconst setInternalValue = ( setter: SetterFunc | TValue ) => {\n\t\tconst setterFn = ( typeof setter === 'function' ? setter : () => setter ) as SetterFunc;\n\t\tconst updated = setterFn( internal );\n\n\t\tsetInternal( updated );\n\t\tsetExternal( toExternal( updated ) );\n\t};\n\n\treturn [ internal, setInternalValue ] as const;\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":";AAAA,SAAS,iBAAiB,mBAAmB;;;ACA7C,YAAYA,aAAW;AACvB,SAAS,MAAAC,WAAU;;;ACDnB,SAAS,wBAAwB,aAAa,uBAAuB;;;ACGtD,SAAR,sBAAkD;AACxD,QAAM,iBAAiB;AAEvB,QAAM,mBAAmB,eAAe,WAAW,WAAW,cAAc,KAAK,CAAC;AAElF,SAAO,iBAAiB,OAAqB,CAAE,KAAK,OAAQ;AAC3D,UAAM,OAAO,GAAG,MAAM,IAAK,YAAa,KAAK,GAAG,MAAM,IAAK,QAAS;AAEpE,QAAK,MAAO;AACX,UAAI,KAAM;AAAA,QACT,IAAI,GAAG,MAAM,IAAK,IAAK;AAAA,QACvB;AAAA,MACD,CAAE;AAAA,IACH;AAEA,WAAO;AAAA,EACR,GAAG,CAAC,CAAE;AACP;;;ADjBe,SAAR,sBAAuC;AAC7C,SAAO;AAAA,IACN,CAAE,gBAAiB,0BAA2B,GAAG,gBAAiB,4BAA6B,CAAE;AAAA,IACjG,MAAM,oBAAoB;AAAA,EAC3B;AACD;;;AERA,SAAS,wBAAwBC,cAAa,mBAAAC,wBAAuB;;;ACEtD,SAAR,kBAAmC;AACzC,QAAM,iBAAiB;AAEvB,SAAO,gBAAgB,WAAW,gBAAgB;AACnD;;;ADFe,SAAR,eAAiC,MAAgB;AACvD,SAAOC;AAAA,IACNC,iBAAiB,uBAAwB;AAAA,IACzC,MAA0B;AACzB,UAAK,CAAE,MAAO;AACb,eAAO;AAAA,MACR;AAEA,YAAM,eAAe,gBAAgB;AACrC,YAAM,cAAc,eAAgB,IAAK;AAEzC,UAAK,CAAE,aAAa,iBAAkB;AACrC,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,QACN,KAAK;AAAA,QACL,UAAU,YAAY;AAAA,QACtB,OAAO,YAAY;AAAA,MACpB;AAAA,IACD;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AACD;;;AHvBA,SAAS,OAAO,WAAW,aAAa,wBAAwB;;;AKJhE,YAAY,WAAW;AACvB,SAAS,eAA0B,kBAAkB;AAOrD,IAAM,UAAU,cAAsC,IAAK;AAOpD,SAAS,eAAgB,EAAE,UAAU,QAAQ,GAAW;AAC9D,SAAO,oCAAC,QAAQ,UAAR,EAAiB,OAAQ,EAAE,QAAQ,KAAM,QAAU;AAC5D;AAEO,SAAS,oBAAoB;AACnC,QAAM,UAAU,WAAY,OAAQ;AAEpC,MAAK,CAAE,SAAU;AAChB,UAAM,IAAI,MAAO,gEAAiE;AAAA,EACnF;AAEA,SAAO;AACR;;;AC3BA,SAAS,SAAAC,QAAO,MAAM,KAAK,UAAU,eAAe;AACpD,YAAYC,aAAW;AACvB,SAAS,MAAAC,WAAU;;;ACFnB,YAAYC,YAAW;AACvB,SAAS,SAAAC,cAAa;;;ACDtB,YAAYC,YAAW;;;ACAvB,SAAS,iBAAAC,gBAAe,cAAAC,mBAAkB;AASnC,IAAM,iBAAiBD,eAAqD,IAAK;AAIjF,SAAS,WAAmC,cAAmB;AACrE,QAAM,iBAAiBC,YAAmC,cAAwB;AAElF,MAAK,CAAE,gBAAiB;AACvB,UAAM,IAAI,MAAO,iDAAkD;AAAA,EACpE;AAEA,SAAO,EAAE,GAAG,gBAAgB,OAAO,eAAe,SAAS,aAAa;AACzE;;;ADnBA,SAAS,OAAO,QAAQ,kBAAkB;;;AEF1C,SAAS,mBAAAC,kBAAiB,wBAAwBC,oBAAmB;;;ACEtD,SAAR,aAA+B,IAAa;AAClD,QAAM,iBAAiB;AACvB,QAAM,YAAY,eAAe,WAAW,eAAgB,EAAG;AAE/D,SAAO,aAAa;AACrB;;;ADHO,IAAM,oBAAoB,CAAE,EAAE,IAAI,KAAK,MAAgD;AAC7F,SAAOC;AAAA,IACNC,iBAAiB,4BAA6B;AAAA,IAC9C,MAAM;AACL,YAAM,YAAY,aAAc,EAAG;AACnC,YAAM,QAAQ,WAAW,UAAU,IAAK,IAAK,KAAK;AAElD,aAAO;AAAA,IACR;AAAA,IACA,CAAE,IAAI,IAAK;AAAA,EACZ;AACD;;;AEfA,SAAS,uBAAuB,kBAAkB;AAI3C,IAAM,iBAAiB,CAAE,EAAE,IAAI,MAAM,MAAqC;AAChF,QAAM,YAAY,aAAc,EAAG;AAEnC,aAAY,8BAA8B;AAAA,IACzC;AAAA,IACA,UAAU;AAAA,MACT,GAAG;AAAA,IACJ;AAAA,EACD,CAAE;AACH;;;AJAO,IAAM,0BAA0B,CAAE,EAAE,MAAM,SAAS,MAAc;AACvE,QAAM,EAAE,QAAQ,IAAI,kBAAkB;AACtC,QAAM,QAAQ,kBAAmB,EAAE,IAAI,QAAQ,IAAI,KAAK,CAAE;AAE1D,QAAM,WAAW,CAAE,aAAyB;AAC3C,mBAAgB;AAAA,MACf,IAAI,QAAQ;AAAA,MACZ,OAAO;AAAA,QACN,CAAE,IAAK,GAAG;AAAA,MACX;AAAA,IACD,CAAE;AAAA,EACH;AAEA,SAAO,qCAAC,eAAe,UAAf,EAAwB,OAAQ,EAAE,UAAU,OAAO,KAAK,KAAM,QAAU;AACjF;AAEA,IAAM,kBAAkB,CAAE,EAAE,UAAU,KAAK,MAC1C,qCAAC,2BAAwB,QACxB,qCAAC,eAAY,KAAM,GAAI,WAAU,OAAM,YAAW,UAAS,gBAAe,iBAAgB,UAAS,UAChG,QACH,CACD;AAGD,IAAM,cAAc,OAAQ,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUlC,IAAM,QAAQ,CAAE,EAAE,SAAS,MAAsC;AAChE,SACC,qCAAC,cAAW,WAAU,SAAQ,SAAQ,WAAU,OAAM,oBACnD,QACH;AAEF;AAEA,gBAAgB,QAAQ;;;AKvDxB,YAAYC,YAAW;AACvB,SAAS,aAAa;AACtB,SAAS,WAAW,kBAAkB,kBAAkB,sBAAsB,SAAAC,cAAa;AAMpF,IAAM,qBAAqB,CAAE,EAAE,OAAO,SAAS,MAAgC;AACrF,QAAM,MAAM,MAAM;AAClB,QAAM,UAAU,SAAU,GAAI;AAC9B,QAAM,YAAY,WAAY,GAAI;AAGlC,SACC,qCAAC,aAAU,gBAAc,MAAC,iBAAe,QACxC,qCAAC,oBAAiB,iBAAgB,WAAY,IAAK,WAClD,qCAAC,wBAAqB,wBAAyB,EAAE,SAAS,UAAU,KAAM,KAAO,CAClF,GACA,qCAAC,oBAAiB,IAAK,WAAY,mBAAkB,WACpD,qCAACA,QAAA,EAAM,KAAM,OAAQ,QAAU,CAChC,CACD;AAEF;;;ACxBA,YAAYC,YAAW;AACvB,SAAS,UAAU,cAAiC;AAQ7C,IAAM,gBAAgB,CAAyB,EAAE,QAAQ,MAAmB;AAClF,QAAM,EAAE,OAAO,SAAS,IAAI,WAAgB;AAE5C,QAAM,eAAe,CAAE,UAAmC;AACzD,aAAU,MAAM,OAAO,KAAW;AAAA,EACnC;AAEA,SACC,qCAAC,UAAO,MAAK,QAAO,OAAQ,SAAS,IAAK,UAAW,gBAClD,QAAQ,IAAK,CAAE,EAAE,OAAO,GAAG,MAAM,MAClC,qCAAC,YAAS,KAAM,MAAM,OAAU,GAAG,SAChC,KACH,CACC,CACH;AAEF;;;ACzBA,YAAYC,YAAW;AACvB,SAAS,iBAAiB;AAOnB,IAAM,kBAAkB,CAAE,EAAE,YAAY,MAAc;AAC5D,QAAM,EAAE,OAAO,SAAS,IAAI,WAAsB,EAAG;AAErD,QAAM,eAAe,CAAE,UAAkD;AACxE,aAAU,MAAM,OAAO,KAAM;AAAA,EAC9B;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,WAAS;AAAA,MACT,WAAS;AAAA,MACT,MAAO;AAAA,MACP;AAAA,MACA,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;;;AC1BA,YAAYC,YAAW;AACvB,SAAS,aAAAC,kBAAiB;AAGnB,IAAM,cAAc,CAAE,EAAE,YAAY,MAAiC;AAC3E,QAAM,EAAE,OAAO,SAAS,IAAI,WAAsB,EAAG;AAErD,QAAM,eAAe,CAAE,UAAkD,SAAU,MAAM,OAAO,KAAM;AAEtG,SAAO,qCAACC,YAAA,EAAU,MAAK,QAAO,MAAK,QAAO,OAAgB,UAAW,cAAe,aAA4B;AACjH;;;ACVA,YAAYC,YAAW;AACvB,SAAS,QAAQ,MAAM,WAAW,mBAAmB;AAErD,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,sBAAsB,uBAAuB;AAoBtD,IAAM,oBAAoB,CAAE,UAA6E;AACxG,SAAO,OAAO,WAAW;AAC1B;AAEA,IAAM,aAAa,CAAE,UAAsE;AAC1F,SAAO,OAAO,WAAW;AAC1B;AAGA,IAAM,eAAyB;AAAA,EAC9B,QAAQ;AAAA,EACR,OAAO;AAAA,IACN,KAAK;AAAA,EACN;AACD;AAEO,IAAM,oBAAoB,CAAE,UAAkB;AACpD,QAAM,EAAE,OAAO,SAAS,IAAI,WAA0C,YAAa;AACnF,QAAM,EAAE,MAAM,WAAW,IAAI,qBAAsB,kBAAmB,KAAM,IAAI,MAAM,MAAM,KAAK,MAAU;AAE3G,QAAM,cAAc,MAAM;AACzB,QAAK,YAAY,KAAM;AACtB,aAAO,WAAW;AAAA,IACnB;AAEA,QAAK,WAAY,KAAM,GAAI;AAC1B,aAAO,MAAM,MAAM;AAAA,IACpB;AAEA,WAAO,aAAa,MAAM;AAAA,EAC3B;AAEA,QAAM,EAAE,KAAK,IAAI,gBAAiB;AAAA,IACjC,OAAO,MAAM;AAAA,IACb,UAAU;AAAA,IACV,UAAU,kBAAmB,KAAM,IAAI,MAAM,OAAO,KAAK;AAAA,IACzD,UAAU,CAAE,QAAS;AACpB,eAAU;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,UACN,IAAI,IAAI;AAAA,QACT;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD,CAAE;AAEF,SACC,qCAAC,QAAK,SAAQ,cACb,qCAAC,aAAU,OAAQ,YAAY,GAAI,IAAK,EAAE,QAAQ,IAAI,GAAI,GAC1D,qCAAC,mBACA;AAAA,IAAC;AAAA;AAAA,MACA,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,SAAU,MAAM;AACf,aAAM,EAAE,MAAM,SAAS,CAAE;AAAA,MAC1B;AAAA;AAAA,IAEE,GAAI,gBAAgB,WAAY;AAAA,EACnC,GAEA;AAAA,IAAC;AAAA;AAAA,MACA,OAAM;AAAA,MACN,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,WAAY,qCAAC,gBAAW;AAAA,MACxB,SAAU,MAAM;AACf,aAAM,EAAE,MAAM,SAAS,CAAE;AAAA,MAC1B;AAAA;AAAA,IAEE,GAAI,gBAAgB,WAAY;AAAA,EACnC,CACD,CACD;AAEF;;;AC/FA,IAAM,eAAe;AAAA,EACpB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AACX;AAEO,IAAM,mBAAmB,CAAE,SAAkB;AACnD,SAAO,aAAc,IAAkC,KAAK;AAC7D;;;AXLO,IAAM,cAAc,MAAM;AAChC,QAAM,EAAE,QAAQ,IAAI,kBAAkB;AAEtC,QAAM,cAAc,eAAgB,SAAS,IAAK;AAElD,MAAK,CAAE,aAAc;AACpB,WAAO;AAAA,EACR;AAEA,SACC,qCAACC,QAAA,MACE,YAAY,SAAS,IAAK,CAAE,EAAE,MAAM,MAAM,GAAG,UAAW;AACzD,QAAK,SAAS,WAAY;AACzB,aAAO,qCAAC,WAAQ,KAAM,MAAM,MAAO,SAAU,OAAQ;AAAA,IACtD;AAEA,QAAK,SAAS,WAAY;AACzB,aACC,qCAAC,sBAAmB,KAAM,OAAO,MAAM,OAAQ,OAAQ,MAAM,SAC1D,MAAM,OAAO,IAAK,CAAE,SAAU;AAC/B,YAAK,KAAK,SAAS,WAAY;AAC9B,iBAAO,qCAAC,WAAQ,KAAM,KAAK,MAAM,MAAO,SAAU,KAAK,OAAQ;AAAA,QAChE;AAGA,eAAO;AAAA,MACR,CAAE,CACH;AAAA,IAEF;AAEA,WAAO;AAAA,EACR,CAAE,CACH;AAEF;AAGA,IAAM,UAAU,CAAE,EAAE,QAAQ,MAAwC;AACnE,QAAM,mBAAmB,iBAAkB,QAAQ,IAAK;AAExD,MAAK,CAAE,kBAAmB;AACzB,WAAO;AAAA,EACR;AAEA,SACC,qCAAC,mBAAgB,MAAO,QAAQ,QAC7B,QAAQ,QAAQ,qCAAC,gBAAgB,OAAhB,MAAwB,QAAQ,KAAO,IAA2B,MACrF;AAAA,IAAC;AAAA;AAAA,MAEE,GAAK,QAAQ;AAAA;AAAA,EAChB,CACD;AAEF;;;AY/DA,YAAYC,aAAW;;;ACAvB,YAAYC,YAAW;AACvB,SAAS,iBAAAC,gBAA0B,cAAAC,mBAAkB;AACrD,SAAS,2BAA2B;AAQpC,IAAMC,WAAUF,eAAsC,IAAK;AAOpD,SAAS,aAAc,EAAE,UAAU,iBAAiB,GAAW;AACrE,QAAM,aAAa,oBAAoB;AAEvC,QAAM,eAAe,EAAE,YAAY,OAAO,KAAK;AAE/C,SAAO,qCAACE,SAAQ,UAAR,EAAiB,OAAQ,EAAE,kBAAkB,aAAa,KAAM,QAAU;AACnF;AAEO,SAAS,kBAAkB;AACjC,QAAM,UAAUD,YAAYC,QAAQ;AAEpC,MAAK,CAAE,SAAU;AAChB,UAAM,IAAI,MAAO,4DAA6D;AAAA,EAC/E;AAEA,SAAO;AACR;;;ACjCA,SAAS,wBAAwBC,cAAa,mBAAAC,wBAAuB;;;ACI9D,IAAM,mBAAmB,CAAE,cAAoE;AACrG,QAAM,YAAY,aAAc,SAAU;AAE1C,SAAO,WAAW,MAAM,IAAK,QAAS,KAAK;AAC5C;;;ADJO,IAAM,mBAAmB,CAAE,cAA0B;AAC3D,SAAOC;AAAA,IACNC,iBAAiB,gCAAiC;AAAA,IAClD,MAAM;AACL,aAAO,iBAAkB,SAAU;AAAA,IACpC;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AACD;;;AFRA,SAAS,SAAAC,cAAa;;;AIJtB,YAAYC,aAAW;;;ACAvB,YAAYC,aAAW;;;ACAvB,SAAS,uBAAuBC,mBAAkB;AAa3C,IAAM,cAAc,CAAE,EAAE,WAAW,YAAY,MAAM,OAAO,OAAO,UAAU,MAAyB;AAC5G,QAAM,YAAY,aAAc,SAAU;AAE1C,EAAAC,YAAY,kCAAkC;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;;;ACvBA,SAAS,mBAAAC,kBAAiB,wBAAwBC,oBAAmB;AAY9D,IAAM,sBAAsB,CAAyB;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAA0C;AACzC,SAAOC;AAAA,IACNC,iBAAiB,gCAAiC;AAAA,IAClD,MAAM;AAEL,UAAK,CAAE,YAAa;AACnB,eAAO;AAAA,MACR;AAEA,YAAM,WAAW,iBAAkB,SAAU,IAAK,UAAW;AAE7D,UAAK,CAAE,UAAW;AACjB,eAAO;AAAA,MACR;AAEA,YAAM,UAAU,iBAAkB,UAAU,IAAK;AAEjD,aAAO,SAAS,MAAO,QAAS,KAAK;AAAA,IACtC;AAAA,IACA,CAAE,WAAW,YAAY,UAAU,IAAK;AAAA,EACzC;AACD;AAEA,SAAS,iBAAkB,UAA2B,MAA+B;AACpF,SAAO,SAAS,SAAS,KAAM,CAAE,YAAa;AAC7C,WAAO,QAAQ,KAAK,eAAe,KAAK,cAAc,QAAQ,KAAK,UAAU,KAAK;AAAA,EACnF,CAAE;AACH;;;AFrCA,SAAS,cAAAC,mBAAkB;AAO3B,IAAM,eAAe,CAAE,EAAE,MAAM,SAAS,MAA0B;AACjE,QAAM,EAAE,QAAQ,IAAI,kBAAkB;AACtC,QAAM,EAAE,kBAAkB,aAAa,IAAI,gBAAgB;AAE3D,QAAM,WAAW,CAAE,aAAyB;AAC3C,gBAAa;AAAA,MACZ,WAAW,QAAQ;AAAA,MACnB,YAAY,kBAAkB;AAAA,MAC9B,OAAO,EAAE,CAAE,IAAK,GAAG,SAAS;AAAA,MAC5B,MAAM;AAAA,IACP,CAAE;AAAA,EACH;AAEA,QAAM,QAAQ,oBAAqB;AAAA,IAClC,WAAW,QAAQ;AAAA,IACnB,YAAY,kBAAkB;AAAA,IAC9B,MAAM;AAAA,IACN,UAAU;AAAA,EACX,CAAE;AAEF,SAAO,sCAAC,eAAe,UAAf,EAAwB,OAAQ,EAAE,MAAM,OAAO,SAAS,KAAM,QAAU;AACjF;AAEA,IAAMC,SAAQ,CAAE,EAAE,SAAS,MAAsC;AAChE,SACC,sCAACD,aAAA,EAAW,WAAU,SAAQ,SAAQ,WAAU,OAAM,oBACnD,QACH;AAEF;AAEA,aAAa,QAAQC;;;AG7CrB,YAAYC,aAAW;AACvB,SAAS,YAAAC,WAAU,UAAAC,SAA2B,SAAAC,QAAO,aAAAC,kBAAiB;;;ACDtE,SAAS,WAAW,gBAAgB;AAS7B,IAAM,uBAAuB,CAAa;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAA0C;AACzC,WAAS,WAAY,eAAoC;AACxD,QAAK,YAAa,aAAc,GAAI;AACnC,aAAO;AAAA,IACR;AAEA,WAAO;AAAA,EACR;AAEA,WAAS,WAAY,eAAmC,eAAoC;AAC3F,QAAK,CAAE,eAAgB;AACtB,aAAO,SAAU,aAAc;AAAA,IAChC;AAEA,WAAO;AAAA,EACR;AAEA,QAAM,CAAE,UAAU,WAAY,IAAI,SAAoB,WAAY,UAAU,MAAU,CAAE;AAExF,YAAW,MAAM;AAChB,gBAAa,WAAY,UAAU,QAAS,CAAE;AAAA,EAC/C,GAAG,CAAE,QAAS,CAAE;AAIhB,QAAM,mBAAmB,CAAE,WAAiC;AAC3D,UAAM,WAAa,OAAO,WAAW,aAAa,SAAS,MAAM;AACjE,UAAM,UAAU,SAAU,QAAS;AAEnC,gBAAa,OAAQ;AACrB,gBAAa,WAAY,OAAQ,CAAE;AAAA,EACpC;AAEA,SAAO,CAAE,UAAU,gBAAiB;AACrC;;;ADjCO,IAAM,cAAc,CAAE,EAAE,OAAAC,QAAO,YAAY,MAAyB;AAC1E,QAAM,EAAE,OAAO,SAAS,IAAI,WAA+B;AAE3D,QAAM,CAAE,OAAO,QAAS,IAAI,qBAA0C;AAAA,IACrE,UAAU;AAAA,IACV,aAAa;AAAA,IACb,aAAa,CAAE,iBAAkB,CAAC,CAAE,cAAc,MAAM,QAAQ,cAAc,MAAM,SAAS;AAAA,IAC7F,UAAU,CAAE,kBAAoB;AAAA,MAC/B,QAAQ;AAAA,MACR,OAAO,EAAE,MAAM,cAAc,MAAM,QAAQ,MAAM,MAAM,IAAI;AAAA,IAC5D;AAAA,EACD,CAAE;AAEF,QAAM,mBAAmB,CAAE,UAAsC;AAChE,UAAM,OAAO,MAAM,OAAO;AAE1B,aAAU,CAAE,UAAY;AAAA,MACvB,GAAG;AAAA,MACH,OAAO;AAAA,QACN,GAAG,KAAK;AAAA,QACR;AAAA,MACD;AAAA,IACD,EAAI;AAAA,EACL;AAEA,QAAM,mBAAmB,CAAE,UAAkD;AAC5E,UAAM,EAAE,OAAO,KAAK,IAAI,MAAM;AAE9B,aAAU,CAAE,UAAY;AAAA,MACvB,GAAG;AAAA,MACH,OAAO;AAAA,QACN,GAAG,KAAK;AAAA,QACR,MAAM,QAAQ,SAAS,MAAM,WAAY,IAAK,IAAI;AAAA,MACnD;AAAA,IACD,EAAI;AAAA,EACL;AAEA,SACC,sCAACC,QAAA,EAAM,WAAU,SAChB;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,MACL,OAAQ,OAAO,MAAO,MAAM,MAAM,IAAK,IAAI,KAAK,MAAM,MAAM;AAAA,MAC5D,UAAW;AAAA,MACX;AAAA;AAAA,EACD,GACA;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAQ,MAAM,MAAM;AAAA,MACpB,UAAW;AAAA,MACX,WAAY;AAAA,QACX,cAAc,EAAE,UAAU,UAAU,YAAY,QAAQ;AAAA,QACxD,iBAAiB,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,MACzD;AAAA;AAAA,IAEEH,OAAM,IAAK,CAAE,SACd,sCAACI,WAAA,EAAS,KAAM,MAAO,OAAQ,QAC5B,KAAK,YAAY,CACpB,CACC;AAAA,EACH,CACD;AAEF;;;AJ1EA,SAAS,SAAAC,cAAa;AACtB,SAAS,MAAAC,WAAU;AAEZ,IAAM,cAAc,MAAM;AAChC,SACC,sCAAC,sBAAmB,OAAQA,IAAI,QAAQ,WAAY,KACnD,sCAACD,QAAA,EAAM,KAAM,OACZ,sCAACA,QAAA,EAAM,WAAU,OAAM,KAAM,KAC5B,sCAACE,UAAA,EAAQ,MAAK,SAAQ,OAAQD,IAAI,SAAS,WAAY,GAAI,GAC3D,sCAACC,UAAA,EAAQ,MAAK,UAAS,OAAQD,IAAI,UAAU,WAAY,GAAI,CAC9D,GACA,sCAACD,QAAA,EAAM,WAAU,OAAM,KAAM,KAC5B,sCAACE,UAAA,EAAQ,MAAK,aAAY,OAAQD,IAAI,cAAc,WAAY,GAAI,GACpE,sCAACC,UAAA,EAAQ,MAAK,cAAa,OAAQD,IAAI,eAAe,WAAY,GAAI,CACvE,GACA,sCAACD,QAAA,EAAM,WAAU,OAAM,KAAM,KAC5B,sCAACE,UAAA,EAAQ,MAAK,aAAY,OAAQD,IAAI,cAAc,WAAY,GAAI,GACpE,sCAACC,UAAA,EAAQ,MAAK,cAAa,OAAQD,IAAI,eAAe,WAAY,GAAI,CACvE,CACD,CACD;AAEF;AAEA,IAAM,QAAgB,CAAE,MAAM,KAAK,MAAM,OAAO,IAAK;AAOrD,IAAMC,WAAU,CAAE,EAAE,OAAO,KAAK,MAAqB;AACpD,SACC,sCAAC,gBAAa,QACb,sCAACF,QAAA,EAAM,KAAM,GAAI,IAAK,EAAE,MAAM,UAAU,KACvC,sCAAC,aAAa,OAAb,MAAqB,KAAO,GAC7B,sCAAC,eAAY,OAAgB,CAC9B,CACD;AAEF;;;AJrCO,IAAM,WAAW,MAAM;AAC7B,QAAM,EAAE,QAAQ,IAAI,kBAAkB;AACtC,QAAM,gBAAgB,iBAAkB,QAAQ,EAAG;AAEnD,QAAM,CAAE,mBAAmB,IAAK,IAAI,OAAO,OAAQ,iBAAiB,CAAC,CAAE;AAEvE,SACC,sCAAC,gBAAa,oBACb,sCAACG,QAAA,MACA,sCAAC,iBAAY,CACd,CACD;AAEF;;;AbZO,IAAM,mBAAmB,MAAM;AACrC,QAAM,EAAE,aAAa,kBAAkB,aAAa,IAAI,QAAqB,UAAW;AAExF,SACC,sCAACC,QAAA,EAAM,WAAU,UAAS,IAAK,EAAE,OAAO,OAAO,KAC9C,sCAAC,QAAK,SAAQ,aAAY,gBAAe,aAAY,WAAU,WAAY,GAAG,aAAa,KAC1F,sCAAC,OAAI,OAAQC,IAAI,WAAW,WAAY,GAAM,GAAG,YAAa,UAAW,GAAI,GAC7E,sCAAC,OAAI,OAAQA,IAAI,SAAS,WAAY,GAAM,GAAG,YAAa,OAAQ,GAAI,CACzE,GACA,sCAAC,YAAW,GAAG,iBAAkB,UAAW,GAAI,gBAAc,QAC7D,sCAAC,iBAAY,CACd,GACA,sCAAC,YAAW,GAAG,iBAAkB,OAAQ,GAAI,gBAAc,QAC1D,sCAAC,cAAS,CACX,CACD;AAEF;;;ANjBO,IAAM,eAAe,MAAM;AACjC,QAAM,WAAW,oBAAoB;AAErC,QAAM,CAAE,eAAgB,IAAI;AAE5B,QAAM,cAAc,eAAgB,iBAAiB,IAAK;AAE1D,MAAK,SAAS,WAAW,KAAK,CAAE,aAAc;AAC7C,WAAO;AAAA,EACR;AAGA,QAAM,aAAaC,IAAI,WAAW,WAAY,EAAE,QAAS,MAAM,YAAY,KAAM;AAEjF,SACC,sCAAC,aACA,sCAAC,mBACA,sCAAC,wBAAmB,UAAY,CACjC,GACA,sCAAC,iBACA,sCAAC,kBAAe,SAAU,mBACzB,sCAAC,sBAAiB,CACnB,CACD,CACD;AAEF;;;AD/BO,IAAM,EAAE,OAAO,iBAAiB,eAAe,IAAI,YAAa;AAAA,EACtE,IAAI;AAAA,EACJ,WAAW;AACZ,CAAE;;;A8BLF,SAAS,uBAAuB;;;ACEzB,IAAM,mBAAmB,MAAM;AACrC,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,cAAc,gBAAgB;AAEpC,MAAK,iBAAiB,WAAW,GAAI;AACpC,WAAO;AAAA,EACR;AAGA,SAAO,CAAC,CAAE,cAAe,iBAAkB,CAAE,EAAE,IAAK,GAAG;AACxD;;;ACbA,SAAS,aAAAC,kBAAiB;AAC1B,SAAS,mBAAmB,qBAAqB,gBAAgB;AAI1D,IAAM,qBAAqB,MAAM;AACvC,QAAM,EAAE,KAAK,IAAI,gBAAgB;AAEjC,EAAAC,WAAW,MAAM;AAChB,WAAO,SAAU,kBAAmB,mBAAoB,GAAG,MAAM;AAChE,UAAK,iBAAiB,GAAI;AACzB,aAAK;AAAA,MACN;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AACP;;;ACbO,IAAM,oBAAoB,MAAM;AACtC,qBAAmB;AAEnB,SAAO;AACR;;;AHFA,SAAS,mBAAmB,qBAAqB;AACjD,SAAS,6BAA6B,wBAAwB;AAE/C,SAAR,OAAwB;AAC9B,gBAAe,KAAM;AACrB,eAAa;AAEb,kBAAiB;AAAA,IAChB,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;AAEA,IAAM,eAAe,MAAM;AAC1B,mBAAkB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA,EACZ,CAAE;AACH;;;AIpBA,KAAK;","names":["React","__","useListenTo","commandEndEvent","useListenTo","commandEndEvent","Stack","React","__","React","Stack","React","createContext","useContext","commandEndEvent","useListenTo","useListenTo","commandEndEvent","React","Stack","React","React","React","TextField","TextField","React","Stack","React","React","createContext","useContext","Context","useListenTo","commandEndEvent","useListenTo","commandEndEvent","Stack","React","React","runCommand","runCommand","commandEndEvent","useListenTo","useListenTo","commandEndEvent","Typography","Label","React","MenuItem","Select","Stack","TextField","units","Stack","TextField","Select","MenuItem","Stack","__","Control","Stack","Stack","__","__","useEffect","useEffect"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -52,5 +52,5 @@
   "peerDependencies": {
     "react": "^18.3.1"
   },
-  "gitHead": "c42e605142983f0171e0f1fbcc902daa6ee00304"
+  "gitHead": "eba8aa343229f43700b3e8d4b2e4da2f9b43c57a"
 }

package/src/controls/control-context.tsx

@@ -3,8 +3,8 @@ import { PropKey, PropValue } from '../types';
 
 export type ControlContext< T extends PropValue > = {
 	bind: PropKey;
-	setValue: ( value: T ) => void;
-	value: T;
+	setValue: ( value: T | undefined ) => void;
+	value: T | undefined;
 };
 
 export const ControlContext = createContext< ControlContext< PropValue > | null >( null );

package/src/controls/control-types/attachment-control.tsx

@@ -23,12 +23,12 @@ type Props = {
 	mediaTypes: Array< 'image' >;
 };
 
-const isImageAttachment = ( value: ImageAttachment | ImageURL ): value is ImageAttachment => {
-	return value.$$type === 'image-attachment';
+const isImageAttachment = ( value: ImageAttachment | ImageURL | undefined ): value is ImageAttachment => {
+	return value?.$$type === 'image-attachment';
 };
 
-const isImageUrl = ( value: ImageAttachment | ImageURL ): value is ImageURL => {
-	return value.$$type === 'image-url';
+const isImageUrl = ( value: ImageAttachment | ImageURL | undefined ): value is ImageURL => {
+	return value?.$$type === 'image-url';
 };
 
 // TODO: Use schema to get default image.

package/src/controls/control-types/size-control.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@elementor/ui';
-import { useControl } from '../control-context';
 import { TransformablePropValue } from '../../types';
+import { useControl } from '../control-context';
+import { useSyncExternalState } from '../hooks/use-sync-external-state';
 
 export type SizeControlProps = {
 	units: Unit[];
@@ -13,23 +14,40 @@ export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';
 export type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;
 
 export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
-	const { value, setValue } = useControl< SizeControlValue >( defaultState );
-	const propValue = value.value;
+	const { value, setValue } = useControl< SizeControlValue >();
+
+	const [ state, setState ] = useSyncExternalState< SizeControlValue >( {
+		external: value,
+		setExternal: setValue,
+		persistWhen: ( controlValue ) => !! controlValue?.value.size || controlValue?.value.size === 0,
+		fallback: ( controlValue ) => ( {
+			$$type: 'size',
+			value: { unit: controlValue?.value.unit || 'px', size: NaN },
+		} ),
+	} );
 
 	const handleUnitChange = ( event: SelectChangeEvent< Unit > ) => {
 		const unit = event.target.value as Unit;
 
-		setValue( { $$type: 'size', value: { ...propValue, unit } } );
+		setState( ( prev ) => ( {
+			...prev,
+			value: {
+				...prev.value,
+				unit,
+			},
+		} ) );
 	};
 
 	const handleSizeChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
-		const { valueAsNumber: size } = event.target;
+		const { value: size } = event.target;
 
-		if ( Number.isNaN( size ) ) {
-			return;
-		}
-
-		setValue( { $$type: 'size', value: { ...propValue, size } } );
+		setState( ( prev ) => ( {
+			...prev,
+			value: {
+				...prev.value,
+				size: size || size === '0' ? parseFloat( size ) : NaN,
+			},
+		} ) );
 	};
 
 	return (
@@ -37,13 +55,13 @@ export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
 			<TextField
 				size="tiny"
 				type="number"
-				value={ propValue.size }
+				value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
 				onChange={ handleSizeChange }
 				placeholder={ placeholder }
 			/>
 			<Select
 				size="tiny"
-				value={ propValue.unit }
+				value={ state.value.unit }
 				onChange={ handleUnitChange }
 				MenuProps={ {
 					anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
@@ -59,8 +77,3 @@ export const SizeControl = ( { units, placeholder }: SizeControlProps ) => {
 		</Stack>
 	);
 };
-
-const defaultState: SizeControlValue = {
-	$$type: 'size',
-	value: { unit: 'px', size: 0 },
-};

package/src/controls/hooks/use-sync-external-state.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+type UseInternalStateOptions< TValue > = {
+	external: TValue | undefined;
+	setExternal: ( value: TValue | undefined ) => void;
+	persistWhen: ( value: TValue | undefined ) => boolean;
+	fallback: ( value: TValue | undefined ) => TValue;
+};
+
+export const useSyncExternalState = < TValue, >( {
+	external,
+	setExternal,
+	persistWhen,
+	fallback,
+}: UseInternalStateOptions< TValue > ) => {
+	function toExternal( internalValue: TValue | undefined ) {
+		if ( persistWhen( internalValue ) ) {
+			return internalValue;
+		}
+
+		return undefined;
+	}
+
+	function toInternal( externalValue: TValue | undefined, internalValue: TValue | undefined ) {
+		if ( ! externalValue ) {
+			return fallback( internalValue );
+		}
+
+		return externalValue;
+	}
+
+	const [ internal, setInternal ] = useState< TValue >( toInternal( external, undefined ) );
+
+	useEffect( () => {
+		setInternal( toInternal( external, internal ) );
+	}, [ external ] );
+
+	type SetterFunc = ( value: TValue ) => TValue;
+
+	const setInternalValue = ( setter: SetterFunc | TValue ) => {
+		const setterFn = ( typeof setter === 'function' ? setter : () => setter ) as SetterFunc;
+		const updated = setterFn( internal );
+
+		setInternal( updated );
+		setExternal( toExternal( updated ) );
+	};
+
+	return [ internal, setInternalValue ] as const;
+};