@elementor/editor 0.15.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 0.17.0
+
+### Minor Changes
+
+- e4c6e3b: update @elementor/ui version
+  fix color picker position in box shadow repeater control
+  make the color control full width
+
+### Patch Changes
+
+- 7781969: Update `@elementor/ui` version
+- Updated dependencies [0c6bcb6]
+  - @elementor/editor-v1-adapters@0.8.4
+
+## 0.16.0
+
+### Minor Changes
+
+- 22f8240: Replaced `UnstableColorPicker` with `UnstableColorField` in color control
+
+### Patch Changes
+
+- 9abdfaf: Fix package.json exports field
+- Updated dependencies [9abdfaf]
+  - @elementor/editor-v1-adapters@0.8.3
+  - @elementor/locations@0.7.6
+  - @elementor/query@0.2.3
+  - @elementor/store@0.8.6
+
 ## 0.15.0
 
 ### Minor Changes

package/dist/index.js

@@ -45,6 +45,10 @@ var { Slot: LogicSlot, inject: injectIntoLogic } = (0, import_locations.createLo
 var React3 = __toESM(require("react"));
 var ReactDOM = __toESM(require("react-dom"));
 var import_client = require("react-dom/client");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_query = require("@elementor/query");
+var import_store = require("@elementor/store");
+var import_ui2 = require("@elementor/ui");
 
 // src/components/shell.tsx
 var React = __toESM(require("react"));
@@ -52,11 +56,6 @@ function Shell() {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TopSlot, null), /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, /* @__PURE__ */ React.createElement(LogicSlot, null)));
 }
 
-// src/init.tsx
-var import_ui2 = require("@elementor/ui");
-var import_store = require("@elementor/store");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-
 // src/components/theme-provider.tsx
 var React2 = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
@@ -91,7 +90,6 @@ function ThemeProvider({ children }) {
 }
 
 // src/init.tsx
-var import_query = require("@elementor/query");
 function init(domElement) {
   const store = (0, import_store.__createStore)();
   const queryClient = (0, import_query.createQueryClient)();

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["export { injectIntoTop, injectIntoLogic } from './locations';\nexport { default as init } from './init';\n","import { createLocation } from '@elementor/locations';\n\nexport const { Slot: TopSlot, inject: injectIntoTop } = createLocation();\n\nexport const { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { JSX } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { __StoreProvider as StoreProvider, __createStore } from '@elementor/store';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\n\nexport default function init( domElement: Element ): void {\n\tconst store = __createStore();\n\tconst queryClient = createQueryClient();\n\n\tdispatchReadyEvent();\n\n\trender(\n\t\t<StoreProvider store={ store }>\n\t\t\t<QueryClientProvider client={ queryClient }>\n\t\t\t\t<DirectionProvider rtl={ window.document.dir === 'rtl' }>\n\t\t\t\t\t<ThemeProvider>\n\t\t\t\t\t\t<Shell />\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</DirectionProvider>\n\t\t\t</QueryClientProvider>\n\t\t</StoreProvider>,\n\t\tdomElement\n\t);\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch {\n\t\trenderFn = () => {\n\t\t\t// eslint-disable-next-line react/no-deprecated\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\nimport { LogicSlot, TopSlot } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<>\n\t\t\t<TopSlot />\n\t\t\t<div style={ { display: 'none' } }>\n\t\t\t\t<LogicSlot />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn <ThemeProviderBase colorScheme={ colorScheme }>{ children }</ThemeProviderBase>;\n}\n","import { useEffect, useState } from 'react';\nimport {\n\tcommandEndEvent,\n\tCommandEvent,\n\t__privateListenTo as listenTo,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAA+B;AAExB,IAAM,EAAE,MAAM,SAAS,QAAQ,cAAc,QAAI,iCAAe;AAEhE,IAAM,EAAE,MAAM,WAAW,QAAQ,gBAAgB,QAAI,iCAAe;;;ACJ3E,IAAAA,SAAuB;AACvB,eAA0B;AAE1B,oBAA2B;;;ACH3B,YAAuB;AAGR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ADPA,IAAAC,aAAkC;AAClC,mBAAgE;AAChE,IAAAC,6BAAkE;;;AEPlE,IAAAC,SAAuB;AACvB,gBAAmD;;;ACDnD,mBAAoC;AACpC,gCAKO;AAUA,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,QAAI,uBAAyB,MAAM,iBAAiB,CAAE;AAE1F,8BAAW,MAAM;AAChB,eAAO,0BAAAC,uBAAU,wCAAa,GAAG,MAAM,eAAgB,iBAAiB,CAAE,CAAE;AAAA,EAC7E,GAAG,CAAC,CAAE;AAEN,8BAAW,MAAM;AAChB,eAAO,0BAAAA,uBAAU,2CAAiB,4BAA6B,GAAG,CAAE,MAAO;AAC1E,YAAM,QAAQ;AAOd,YAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,UAAK,eAAgB;AACpB,uBAAgB,iBAAiB,CAAE;AAAA,MACpC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;ADzCe,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SAAO,qCAAC,UAAAC,eAAA,EAAkB,eAA8B,QAAU;AACnE;;;AFCA,mBAAuD;AAExC,SAAR,KAAuB,YAA4B;AACzD,QAAM,YAAQ,4BAAc;AAC5B,QAAM,kBAAc,gCAAkB;AAEtC,iCAAAC,6BAAmB;AAEnB,EAAAC;AAAA,IACC,qCAAC,aAAAC,iBAAA,EAAc,SACd,qCAAC,oCAAoB,QAAS,eAC7B,qCAAC,gCAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD;AAAA,IACA;AAAA,EACD;AACD;AAIA,SAASD,QAAQ,KAAkB,YAAsB;AACxD,MAAI;AAEJ,MAAI;AACH,UAAM,WAAO,0BAAY,UAAW;AAEpC,eAAW,MAAM;AAChB,WAAK,OAAQ,GAAI;AAAA,IAClB;AAAA,EACD,QAAQ;AACP,eAAW,MAAM;AAEhB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","import_ui","import_editor_v1_adapters","React","listenTo","ThemeProviderBase","dispatchReadyEvent","render","StoreProvider"]}
+{"version":3,"sources":["../src/index.ts","../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["export { injectIntoTop, injectIntoLogic } from './locations';\nexport { default as init } from './init';\n","import { createLocation } from '@elementor/locations';\n\nexport const { Slot: TopSlot, inject: injectIntoTop } = createLocation();\n\nexport const { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();\n","import * as React from 'react';\nimport { type JSX } from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { createRoot } from 'react-dom/client';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\nimport { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';\nimport { DirectionProvider } from '@elementor/ui';\n\nimport Shell from './components/shell';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = __createStore();\n\tconst queryClient = createQueryClient();\n\n\tdispatchReadyEvent();\n\n\trender(\n\t\t<StoreProvider store={ store }>\n\t\t\t<QueryClientProvider client={ queryClient }>\n\t\t\t\t<DirectionProvider rtl={ window.document.dir === 'rtl' }>\n\t\t\t\t\t<ThemeProvider>\n\t\t\t\t\t\t<Shell />\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</DirectionProvider>\n\t\t\t</QueryClientProvider>\n\t\t</StoreProvider>,\n\t\tdomElement\n\t);\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch {\n\t\trenderFn = () => {\n\t\t\t// eslint-disable-next-line react/no-deprecated\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\n\nimport { LogicSlot, TopSlot } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<>\n\t\t\t<TopSlot />\n\t\t\t<div style={ { display: 'none' } }>\n\t\t\t\t<LogicSlot />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\n\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn <ThemeProviderBase colorScheme={ colorScheme }>{ children }</ThemeProviderBase>;\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAA+B;AAExB,IAAM,EAAE,MAAM,SAAS,QAAQ,cAAc,QAAI,iCAAe;AAEhE,IAAM,EAAE,MAAM,WAAW,QAAQ,gBAAgB,QAAI,iCAAe;;;ACJ3E,IAAAA,SAAuB;AAEvB,eAA0B;AAC1B,oBAA2B;AAC3B,IAAAC,6BAAkE;AAClE,mBAAuD;AACvD,mBAAgE;AAChE,IAAAC,aAAkC;;;ACPlC,YAAuB;AAIR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ACbA,IAAAC,SAAuB;AACvB,gBAAmD;;;ACDnD,mBAAoC;AACpC,gCAKO;AAUA,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,QAAI,uBAAyB,MAAM,iBAAiB,CAAE;AAE1F,8BAAW,MAAM;AAChB,eAAO,0BAAAC,uBAAU,wCAAa,GAAG,MAAM,eAAgB,iBAAiB,CAAE,CAAE;AAAA,EAC7E,GAAG,CAAC,CAAE;AAEN,8BAAW,MAAM;AAChB,eAAO,0BAAAA,uBAAU,2CAAiB,4BAA6B,GAAG,CAAE,MAAO;AAC1E,YAAM,QAAQ;AAOd,YAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,UAAK,eAAgB;AACpB,uBAAgB,iBAAiB,CAAE;AAAA,MACpC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;ADxCe,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SAAO,qCAAC,UAAAC,eAAA,EAAkB,eAA8B,QAAU;AACnE;;;AFGe,SAAR,KAAuB,YAA4B;AACzD,QAAM,YAAQ,4BAAc;AAC5B,QAAM,kBAAc,gCAAkB;AAEtC,iCAAAC,6BAAmB;AAEnB,EAAAC;AAAA,IACC,qCAAC,aAAAC,iBAAA,EAAc,SACd,qCAAC,oCAAoB,QAAS,eAC7B,qCAAC,gCAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD;AAAA,IACA;AAAA,EACD;AACD;AAIA,SAASD,QAAQ,KAAkB,YAAsB;AACxD,MAAI;AAEJ,MAAI;AACH,UAAM,WAAO,0BAAY,UAAW;AAEpC,eAAW,MAAM;AAChB,WAAK,OAAQ,GAAI;AAAA,IAClB;AAAA,EACD,QAAQ;AACP,eAAW,MAAM;AAEhB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","import_editor_v1_adapters","import_ui","React","listenTo","ThemeProviderBase","dispatchReadyEvent","render","StoreProvider"]}

package/dist/index.mjs

@@ -7,6 +7,10 @@ var { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();
 import * as React3 from "react";
 import * as ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
+import { __privateDispatchReadyEvent as dispatchReadyEvent } from "@elementor/editor-v1-adapters";
+import { createQueryClient, QueryClientProvider } from "@elementor/query";
+import { __createStore, __StoreProvider as StoreProvider } from "@elementor/store";
+import { DirectionProvider } from "@elementor/ui";
 
 // src/components/shell.tsx
 import * as React from "react";
@@ -14,11 +18,6 @@ function Shell() {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TopSlot, null), /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, /* @__PURE__ */ React.createElement(LogicSlot, null)));
 }
 
-// src/init.tsx
-import { DirectionProvider } from "@elementor/ui";
-import { __StoreProvider as StoreProvider, __createStore } from "@elementor/store";
-import { __privateDispatchReadyEvent as dispatchReadyEvent } from "@elementor/editor-v1-adapters";
-
 // src/components/theme-provider.tsx
 import * as React2 from "react";
 import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
@@ -26,8 +25,8 @@ import { ThemeProvider as ThemeProviderBase } from "@elementor/ui";
 // src/sync/use-color-scheme.ts
 import { useEffect, useState } from "react";
 import {
-  commandEndEvent,
   __privateListenTo as listenTo,
+  commandEndEvent,
   v1ReadyEvent
 } from "@elementor/editor-v1-adapters";
 function useColorScheme() {
@@ -57,7 +56,6 @@ function ThemeProvider({ children }) {
 }
 
 // src/init.tsx
-import { createQueryClient, QueryClientProvider } from "@elementor/query";
 function init(domElement) {
   const store = __createStore();
   const queryClient = createQueryClient();

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["import { createLocation } from '@elementor/locations';\n\nexport const { Slot: TopSlot, inject: injectIntoTop } = createLocation();\n\nexport const { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();\n","import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { JSX } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Shell from './components/shell';\nimport { DirectionProvider } from '@elementor/ui';\nimport { __StoreProvider as StoreProvider, __createStore } from '@elementor/store';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport ThemeProvider from './components/theme-provider';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\n\nexport default function init( domElement: Element ): void {\n\tconst store = __createStore();\n\tconst queryClient = createQueryClient();\n\n\tdispatchReadyEvent();\n\n\trender(\n\t\t<StoreProvider store={ store }>\n\t\t\t<QueryClientProvider client={ queryClient }>\n\t\t\t\t<DirectionProvider rtl={ window.document.dir === 'rtl' }>\n\t\t\t\t\t<ThemeProvider>\n\t\t\t\t\t\t<Shell />\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</DirectionProvider>\n\t\t\t</QueryClientProvider>\n\t\t</StoreProvider>,\n\t\tdomElement\n\t);\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch {\n\t\trenderFn = () => {\n\t\t\t// eslint-disable-next-line react/no-deprecated\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\nimport { LogicSlot, TopSlot } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<>\n\t\t\t<TopSlot />\n\t\t\t<div style={ { display: 'none' } }>\n\t\t\t\t<LogicSlot />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn <ThemeProviderBase colorScheme={ colorScheme }>{ children }</ThemeProviderBase>;\n}\n","import { useEffect, useState } from 'react';\nimport {\n\tcommandEndEvent,\n\tCommandEvent,\n\t__privateListenTo as listenTo,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":";AAAA,SAAS,sBAAsB;AAExB,IAAM,EAAE,MAAM,SAAS,QAAQ,cAAc,IAAI,eAAe;AAEhE,IAAM,EAAE,MAAM,WAAW,QAAQ,gBAAgB,IAAI,eAAe;;;ACJ3E,YAAYA,YAAW;AACvB,YAAY,cAAc;AAE1B,SAAS,kBAAkB;;;ACH3B,YAAY,WAAW;AAGR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ADPA,SAAS,yBAAyB;AAClC,SAAS,mBAAmB,eAAe,qBAAqB;AAChE,SAAS,+BAA+B,0BAA0B;;;AEPlE,YAAYC,YAAW;AACvB,SAAS,iBAAiB,yBAAyB;;;ACDnD,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACC;AAAA,EAEA,qBAAqB;AAAA,EACrB;AAAA,OACM;AAUA,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,IAAI,SAAyB,MAAM,iBAAiB,CAAE;AAE1F,YAAW,MAAM;AAChB,WAAO,SAAU,aAAa,GAAG,MAAM,eAAgB,iBAAiB,CAAE,CAAE;AAAA,EAC7E,GAAG,CAAC,CAAE;AAEN,YAAW,MAAM;AAChB,WAAO,SAAU,gBAAiB,4BAA6B,GAAG,CAAE,MAAO;AAC1E,YAAM,QAAQ;AAOd,YAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,UAAK,eAAgB;AACpB,uBAAgB,iBAAiB,CAAE;AAAA,MACpC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;ADzCe,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SAAO,qCAAC,qBAAkB,eAA8B,QAAU;AACnE;;;AFCA,SAAS,mBAAmB,2BAA2B;AAExC,SAAR,KAAuB,YAA4B;AACzD,QAAM,QAAQ,cAAc;AAC5B,QAAM,cAAc,kBAAkB;AAEtC,qBAAmB;AAEnB,EAAAC;AAAA,IACC,qCAAC,iBAAc,SACd,qCAAC,uBAAoB,QAAS,eAC7B,qCAAC,qBAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD;AAAA,IACA;AAAA,EACD;AACD;AAIA,SAASA,QAAQ,KAAkB,YAAsB;AACxD,MAAI;AAEJ,MAAI;AACH,UAAM,OAAO,WAAY,UAAW;AAEpC,eAAW,MAAM;AAChB,WAAK,OAAQ,GAAI;AAAA,IAClB;AAAA,EACD,QAAQ;AACP,eAAW,MAAM;AAEhB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","React","render"]}
+{"version":3,"sources":["../src/locations.ts","../src/init.tsx","../src/components/shell.tsx","../src/components/theme-provider.tsx","../src/sync/use-color-scheme.ts"],"sourcesContent":["import { createLocation } from '@elementor/locations';\n\nexport const { Slot: TopSlot, inject: injectIntoTop } = createLocation();\n\nexport const { Slot: LogicSlot, inject: injectIntoLogic } = createLocation();\n","import * as React from 'react';\nimport { type JSX } from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { createRoot } from 'react-dom/client';\nimport { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';\nimport { createQueryClient, QueryClientProvider } from '@elementor/query';\nimport { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';\nimport { DirectionProvider } from '@elementor/ui';\n\nimport Shell from './components/shell';\nimport ThemeProvider from './components/theme-provider';\n\nexport default function init( domElement: Element ): void {\n\tconst store = __createStore();\n\tconst queryClient = createQueryClient();\n\n\tdispatchReadyEvent();\n\n\trender(\n\t\t<StoreProvider store={ store }>\n\t\t\t<QueryClientProvider client={ queryClient }>\n\t\t\t\t<DirectionProvider rtl={ window.document.dir === 'rtl' }>\n\t\t\t\t\t<ThemeProvider>\n\t\t\t\t\t\t<Shell />\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</DirectionProvider>\n\t\t\t</QueryClientProvider>\n\t\t</StoreProvider>,\n\t\tdomElement\n\t);\n}\n\n// Support conditional rendering based on the React version.\n// We use `createRoot` when available, but fallback to `ReactDOM.render` for older versions.\nfunction render( app: JSX.Element, domElement: Element ) {\n\tlet renderFn: () => void;\n\n\ttry {\n\t\tconst root = createRoot( domElement );\n\n\t\trenderFn = () => {\n\t\t\troot.render( app );\n\t\t};\n\t} catch {\n\t\trenderFn = () => {\n\t\t\t// eslint-disable-next-line react/no-deprecated\n\t\t\tReactDOM.render( app, domElement );\n\t\t};\n\t}\n\n\trenderFn();\n}\n","import * as React from 'react';\n\nimport { LogicSlot, TopSlot } from '../locations';\n\nexport default function Shell() {\n\treturn (\n\t\t<>\n\t\t\t<TopSlot />\n\t\t\t<div style={ { display: 'none' } }>\n\t\t\t\t<LogicSlot />\n\t\t\t</div>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase } from '@elementor/ui';\n\nimport { useColorScheme } from '../sync/use-color-scheme';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn <ThemeProviderBase colorScheme={ colorScheme }>{ children }</ThemeProviderBase>;\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n"],"mappings":";AAAA,SAAS,sBAAsB;AAExB,IAAM,EAAE,MAAM,SAAS,QAAQ,cAAc,IAAI,eAAe;AAEhE,IAAM,EAAE,MAAM,WAAW,QAAQ,gBAAgB,IAAI,eAAe;;;ACJ3E,YAAYA,YAAW;AAEvB,YAAY,cAAc;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,+BAA+B,0BAA0B;AAClE,SAAS,mBAAmB,2BAA2B;AACvD,SAAS,eAAe,mBAAmB,qBAAqB;AAChE,SAAS,yBAAyB;;;ACPlC,YAAY,WAAW;AAIR,SAAR,QAAyB;AAC/B,SACC,0DACC,oCAAC,aAAQ,GACT,oCAAC,SAAI,OAAQ,EAAE,SAAS,OAAO,KAC9B,oCAAC,eAAU,CACZ,CACD;AAEF;;;ACbA,YAAYC,YAAW;AACvB,SAAS,iBAAiB,yBAAyB;;;ACDnD,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACC,qBAAqB;AAAA,EACrB;AAAA,EAEA;AAAA,OACM;AAUA,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,IAAI,SAAyB,MAAM,iBAAiB,CAAE;AAE1F,YAAW,MAAM;AAChB,WAAO,SAAU,aAAa,GAAG,MAAM,eAAgB,iBAAiB,CAAE,CAAE;AAAA,EAC7E,GAAG,CAAC,CAAE;AAEN,YAAW,MAAM;AAChB,WAAO,SAAU,gBAAiB,4BAA6B,GAAG,CAAE,MAAO;AAC1E,YAAM,QAAQ;AAOd,YAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,UAAK,eAAgB;AACpB,uBAAgB,iBAAiB,CAAE;AAAA,MACpC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;ADxCe,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SAAO,qCAAC,qBAAkB,eAA8B,QAAU;AACnE;;;AFGe,SAAR,KAAuB,YAA4B;AACzD,QAAM,QAAQ,cAAc;AAC5B,QAAM,cAAc,kBAAkB;AAEtC,qBAAmB;AAEnB,EAAAC;AAAA,IACC,qCAAC,iBAAc,SACd,qCAAC,uBAAoB,QAAS,eAC7B,qCAAC,qBAAkB,KAAM,OAAO,SAAS,QAAQ,SAChD,qCAAC,qBACA,qCAAC,WAAM,CACR,CACD,CACD,CACD;AAAA,IACA;AAAA,EACD;AACD;AAIA,SAASA,QAAQ,KAAkB,YAAsB;AACxD,MAAI;AAEJ,MAAI;AACH,UAAM,OAAO,WAAY,UAAW;AAEpC,eAAW,MAAM;AAChB,WAAK,OAAQ,GAAI;AAAA,IAClB;AAAA,EACD,QAAQ;AACP,eAAW,MAAM;AAEhB,MAAS,gBAAQ,KAAK,UAAW;AAAA,IAClC;AAAA,EACD;AAEA,WAAS;AACV;","names":["React","React","render"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor",
   "description": "The main application for Elementor's editor",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -11,9 +11,9 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -40,11 +40,11 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "^0.8.2",
-    "@elementor/locations": "^0.7.5",
-    "@elementor/query": "^0.2.2",
-    "@elementor/store": "^0.8.5",
-    "@elementor/ui": "^1.21.1"
+    "@elementor/editor-v1-adapters": "^0.8.4",
+    "@elementor/locations": "^0.7.6",
+    "@elementor/query": "^0.2.3",
+    "@elementor/store": "^0.8.6",
+    "@elementor/ui": "^1.21.13"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/shell.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { LogicSlot, TopSlot } from '../locations';
 
 export default function Shell() {

package/src/components/theme-provider.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ThemeProvider as ThemeProviderBase } from '@elementor/ui';
+
 import { useColorScheme } from '../sync/use-color-scheme';
 
 export default function ThemeProvider( { children }: { children: React.ReactNode } ) {

package/src/init.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
+import { type JSX } from 'react';
 import * as ReactDOM from 'react-dom';
-import { JSX } from 'react';
 import { createRoot } from 'react-dom/client';
-import Shell from './components/shell';
-import { DirectionProvider } from '@elementor/ui';
-import { __StoreProvider as StoreProvider, __createStore } from '@elementor/store';
 import { __privateDispatchReadyEvent as dispatchReadyEvent } from '@elementor/editor-v1-adapters';
-import ThemeProvider from './components/theme-provider';
 import { createQueryClient, QueryClientProvider } from '@elementor/query';
+import { __createStore, __StoreProvider as StoreProvider } from '@elementor/store';
+import { DirectionProvider } from '@elementor/ui';
+
+import Shell from './components/shell';
+import ThemeProvider from './components/theme-provider';
 
 export default function init( domElement: Element ): void {
 	const store = __createStore();

package/src/sync/use-color-scheme.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import {
-	commandEndEvent,
-	CommandEvent,
 	__privateListenTo as listenTo,
+	commandEndEvent,
+	type CommandEvent,
 	v1ReadyEvent,
 } from '@elementor/editor-v1-adapters';