@elementor/editor-responsive 0.10.6 → 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-responsive@0.10.6...@elementor/editor-responsive@0.11.0) (2024-07-18)
+
+### Features
+
+- **editor-responsive:** separate data and ui [EDS-272] ([#206](https://github.com/elementor/elementor-packages/issues/206)) ([a5a24cc](https://github.com/elementor/elementor-packages/commit/a5a24cc8abed5f5a9b1523436e1c63f24a202198))
+
 ## [0.10.6](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.10.5...@elementor/editor-responsive@0.10.6) (2024-07-16)
 
 **Note:** Version bump only for package @elementor/editor-responsive

package/dist/index.d.mts

@@ -1,2 +1,17 @@
+type BreakpointId = 'widescreen' | 'desktop' | 'laptop' | 'tablet_extra' | 'tablet' | 'mobile_extra' | 'mobile';
+type BreakpointSize = number;
+type BreakpointLabel = string;
+type Breakpoint = {
+    id: BreakpointId;
+    label: BreakpointLabel;
+    width?: BreakpointSize;
+    type?: 'min-width' | 'max-width';
+};
 
-export { }
+declare function useBreakpoints(): Breakpoint[];
+
+declare function useActiveBreakpoint(): BreakpointId | null;
+
+declare function useActivateBreakpoint(): (breakpoint: BreakpointId) => Promise<any>;
+
+export { Breakpoint, BreakpointId, BreakpointSize, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };

package/dist/index.d.ts

@@ -1,2 +1,17 @@
+type BreakpointId = 'widescreen' | 'desktop' | 'laptop' | 'tablet_extra' | 'tablet' | 'mobile_extra' | 'mobile';
+type BreakpointSize = number;
+type BreakpointLabel = string;
+type Breakpoint = {
+    id: BreakpointId;
+    label: BreakpointLabel;
+    width?: BreakpointSize;
+    type?: 'min-width' | 'max-width';
+};
 
-export { }
+declare function useBreakpoints(): Breakpoint[];
+
+declare function useActiveBreakpoint(): BreakpointId | null;
+
+declare function useActivateBreakpoint(): (breakpoint: BreakpointId) => Promise<any>;
+
+export { Breakpoint, BreakpointId, BreakpointSize, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };

package/dist/index.js

@@ -1,10 +1,12 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -13,262 +15,80 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/store/index.ts
-var import_store = require("@elementor/store");
-var initialState = {
-  entities: {},
-  activeId: null
-};
-var slice = (0, import_store.__createSlice)({
-  name: "breakpoints",
-  initialState,
-  reducers: {
-    init(state, action) {
-      state.activeId = action.payload.activeId;
-      state.entities = normalizeEntities(action.payload.entities);
-    },
-    activateBreakpoint(state, action) {
-      if (state.entities[action.payload]) {
-        state.activeId = action.payload;
-      }
-    }
-  }
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  useActivateBreakpoint: () => useActivateBreakpoint,
+  useActiveBreakpoint: () => useActiveBreakpoint,
+  useBreakpoints: () => useBreakpoints
 });
-function normalizeEntities(entities) {
-  return entities.reduce(
-    (acc, breakpoint) => {
-      return {
-        ...acc,
-        [breakpoint.id]: breakpoint
-      };
-    },
-    {}
-  );
-}
+module.exports = __toCommonJS(src_exports);
 
-// src/sync/sync-store.ts
-var import_store3 = require("@elementor/store");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+// src/hooks/use-breakpoints.ts
 var import_i18n = require("@wordpress/i18n");
-function syncStore() {
-  syncInitialization();
-  syncOnChange();
-}
-function syncInitialization() {
-  const { init: init2 } = slice.actions;
-  (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.v1ReadyEvent)(), () => {
-    (0, import_store3.__dispatch)(
-      init2({
-        entities: getBreakpoints(),
-        activeId: getActiveBreakpoint()
-      })
-    );
-  });
-}
-function syncOnChange() {
-  const { activateBreakpoint } = slice.actions;
-  (0, import_editor_v1_adapters.__privateListenTo)(deviceModeChangeEvent(), () => {
-    const activeBreakpoint = getActiveBreakpoint();
-    (0, import_store3.__dispatch)(activateBreakpoint(activeBreakpoint));
-  });
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+function useBreakpoints() {
+  return (0, import_editor_v1_adapters.__privateUseListenTo)((0, import_editor_v1_adapters.v1ReadyEvent)(), getBreakpoints);
 }
 function getBreakpoints() {
   const { breakpoints } = window.elementor?.config?.responsive || {};
-  if (!breakpoints) {
+  if (!breakpoints || Object.entries(breakpoints).length === 0) {
     return [];
   }
-  const entities = Object.entries(breakpoints).filter(([, breakpoint]) => breakpoint.is_enabled).map(([id, { value, direction, label }]) => {
-    return {
+  const minWidth = [];
+  const maxWidth = [];
+  const defaults = [
+    // Desktop breakpoint is not included in V1 config.
+    { id: "desktop", label: (0, import_i18n.__)("Desktop", "elementor") }
+  ];
+  Object.entries(breakpoints).forEach(([id, v1Breakpoint]) => {
+    if (!v1Breakpoint.is_enabled) {
+      return;
+    }
+    const breakpoint = {
       id,
-      label,
-      width: value,
-      type: direction === "min" ? "min-width" : "max-width"
+      label: v1Breakpoint.label,
+      width: v1Breakpoint.value,
+      type: v1Breakpoint.direction === "min" ? "min-width" : "max-width"
     };
+    if (!breakpoint.width) {
+      defaults.push(breakpoint);
+    } else if (breakpoint.type === "min-width") {
+      minWidth.push(breakpoint);
+    } else if (breakpoint.type === "max-width") {
+      maxWidth.push(breakpoint);
+    }
   });
-  entities.push({
-    id: "desktop",
-    label: (0, import_i18n.__)("Desktop", "elementor")
-  });
-  return entities;
-}
-function getActiveBreakpoint() {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
-}
-function deviceModeChangeEvent() {
-  return (0, import_editor_v1_adapters.windowEvent)("elementor/device-mode/change");
-}
-
-// src/init.ts
-var import_editor_app_bar = require("@elementor/editor-app-bar");
-
-// src/components/breakpoints-switcher.tsx
-var React = __toESM(require("react"));
-var import_i18n2 = require("@wordpress/i18n");
-
-// src/hooks/use-breakpoints.ts
-var import_store5 = require("@elementor/store");
-
-// src/store/selectors.ts
-var import_store4 = require("@elementor/store");
-var selectEntities = (state) => state.breakpoints.entities;
-var selectActiveId = (state) => state.breakpoints.activeId;
-var selectActiveBreakpoint = (0, import_store4.__createSelector)(
-  selectEntities,
-  selectActiveId,
-  (entities, activeId) => activeId && entities[activeId] ? entities[activeId] : null
-);
-var selectSortedBreakpoints = (0, import_store4.__createSelector)(selectEntities, (entities) => {
   const byWidth = (a, b) => {
     return a.width && b.width ? b.width - a.width : 0;
   };
-  const all = Object.values(entities);
-  const defaults = all.filter((breakpoint) => !breakpoint.width);
-  const minWidth = all.filter((breakpoint) => breakpoint.type === "min-width");
-  const maxWidth = all.filter((breakpoint) => breakpoint.type === "max-width");
   return [...minWidth.sort(byWidth), ...defaults, ...maxWidth.sort(byWidth)];
-});
-
-// src/hooks/use-breakpoints.ts
-function useBreakpoints() {
-  const all = (0, import_store5.__useSelector)(selectSortedBreakpoints);
-  const active = (0, import_store5.__useSelector)(selectActiveBreakpoint);
-  return {
-    all,
-    active
-  };
 }
 
-// src/components/breakpoints-switcher.tsx
-var import_ui = require("@elementor/ui");
-var import_icons = require("@elementor/icons");
-
-// src/hooks/use-breakpoints-actions.ts
-var import_react = require("react");
+// src/hooks/use-active-breakpoint.ts
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-function useBreakpointsActions() {
-  const activate = (0, import_react.useCallback)((device) => {
-    return (0, import_editor_v1_adapters2.__privateRunCommand)("panel/change-device-mode", { device });
-  }, []);
-  return {
-    activate
-  };
+function useActiveBreakpoint() {
+  return (0, import_editor_v1_adapters2.__privateUseListenTo)((0, import_editor_v1_adapters2.windowEvent)("elementor/device-mode/change"), getActiveBreakpoint);
 }
-
-// src/components/breakpoints-switcher.tsx
-function BreakpointsSwitcher() {
-  const { all, active } = useBreakpoints();
-  const { activate } = useBreakpointsActions();
-  if (!all.length || !active) {
-    return null;
-  }
-  const onChange = (_, value) => {
-    const extendedWindow = window;
-    const config = extendedWindow?.elementor?.editorEvents?.config;
-    if (config) {
-      extendedWindow.elementor.editorEvents.dispatchEvent(config.names.topBar.responsiveControls, {
-        location: config.locations.topBar,
-        secondaryLocation: config.secondaryLocations.responsiveControls,
-        trigger: config.triggers.click,
-        element: config.elements.buttonIcon,
-        mode: value
-      });
-    }
-    activate(value);
-  };
-  return /* @__PURE__ */ React.createElement(
-    import_ui.Tabs,
-    {
-      textColor: "inherit",
-      indicatorColor: "secondary",
-      value: active.id,
-      onChange,
-      "aria-label": (0, import_i18n2.__)("Switch Device", "elementor"),
-      sx: {
-        "& .MuiTabs-indicator": {
-          backgroundColor: "text.primary"
-        }
-      }
-    },
-    all.map(({ id, label, type, width }) => {
-      const Icon = iconsMap[id];
-      const title = labelsMap[type || "default"].replace("%s", label).replace("%d", width?.toString() || "");
-      return /* @__PURE__ */ React.createElement(
-        import_ui.Tab,
-        {
-          value: id,
-          key: id,
-          "aria-label": title,
-          icon: /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Icon, null)),
-          sx: { minWidth: "auto" },
-          "data-testid": `switch-device-to-${id}`
-        }
-      );
-    })
-  );
-}
-function Tooltip(props) {
-  return /* @__PURE__ */ React.createElement(
-    import_ui.Tooltip,
-    {
-      PopperProps: {
-        sx: {
-          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
-            mt: 2.5
-          }
-        }
-      },
-      ...props
-    }
-  );
+function getActiveBreakpoint() {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
 }
-var iconsMap = {
-  widescreen: import_icons.WidescreenIcon,
-  desktop: import_icons.DesktopIcon,
-  laptop: import_icons.LaptopIcon,
-  tablet_extra: import_icons.TabletLandscapeIcon,
-  tablet: import_icons.TabletPortraitIcon,
-  mobile_extra: import_icons.MobileLandscapeIcon,
-  mobile: import_icons.MobilePortraitIcon
-};
-var labelsMap = {
-  default: "%s",
-  // translators: %s: Breakpoint label, %d: Breakpoint size.
-  "min-width": (0, import_i18n2.__)("%s (%dpx and up)", "elementor"),
-  // translators: %s: Breakpoint label, %d: Breakpoint size.
-  "max-width": (0, import_i18n2.__)("%s (up to %dpx)", "elementor")
-};
 
-// src/init.ts
-var import_store7 = require("@elementor/store");
-function init() {
-  initStore();
-  registerAppBarUI();
-}
-function initStore() {
-  (0, import_store7.__registerSlice)(slice);
-  syncStore();
-}
-function registerAppBarUI() {
-  (0, import_editor_app_bar.injectIntoResponsive)({
-    id: "responsive-breakpoints-switcher",
-    component: BreakpointsSwitcher,
-    options: {
-      priority: 20
-      // After document indication.
-    }
-  });
+// src/hooks/use-activate-breakpoint.ts
+var import_react = require("react");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+function useActivateBreakpoint() {
+  return (0, import_react.useCallback)((breakpoint) => {
+    return (0, import_editor_v1_adapters3.__privateRunCommand)("panel/change-device-mode", { device: breakpoint });
+  }, []);
 }
-
-// src/index.ts
-init();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useActivateBreakpoint,
+  useActiveBreakpoint,
+  useBreakpoints
+});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/store/index.ts","../src/sync/sync-store.ts","../src/init.ts","../src/components/breakpoints-switcher.tsx","../src/hooks/use-breakpoints.ts","../src/store/selectors.ts","../src/hooks/use-breakpoints-actions.ts","../src/index.ts"],"sourcesContent":["import { __createSlice, PayloadAction } from '@elementor/store';\nimport { Breakpoint, BreakpointId } from '../types';\n\nexport type State = {\n\tentities: Record< BreakpointId, Breakpoint >;\n\tactiveId: BreakpointId | null;\n};\nconst initialState: State = {\n\tentities: {} as State[ 'entities' ],\n\tactiveId: null,\n};\n\nexport const slice = __createSlice( {\n\tname: 'breakpoints',\n\tinitialState,\n\treducers: {\n\t\tinit(\n\t\t\tstate,\n\t\t\taction: PayloadAction< {\n\t\t\t\tentities: Breakpoint[];\n\t\t\t\tactiveId: State[ 'activeId' ];\n\t\t\t} >\n\t\t) {\n\t\t\tstate.activeId = action.payload.activeId;\n\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t},\n\n\t\tactivateBreakpoint( state, action: PayloadAction< BreakpointId > ) {\n\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\tstate.activeId = action.payload;\n\t\t\t}\n\t\t},\n\t},\n} );\n\nfunction normalizeEntities( entities: Breakpoint[] ) {\n\treturn entities.reduce(\n\t\t( acc, breakpoint ) => {\n\t\t\treturn {\n\t\t\t\t...acc,\n\t\t\t\t[ breakpoint.id ]: breakpoint,\n\t\t\t};\n\t\t},\n\t\t{} as State[ 'entities' ]\n\t);\n}\n","import { slice } from '../store';\nimport { __dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow } from '../types';\nimport { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore() {\n\tsyncInitialization();\n\tsyncOnChange();\n}\n\nfunction syncInitialization() {\n\tconst { init } = slice.actions;\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\t__dispatch(\n\t\t\tinit( {\n\t\t\t\tentities: getBreakpoints(),\n\t\t\t\tactiveId: getActiveBreakpoint(),\n\t\t\t} )\n\t\t);\n\t} );\n}\n\nfunction syncOnChange() {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo( deviceModeChangeEvent(), () => {\n\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t__dispatch( activateBreakpoint( activeBreakpoint ) );\n\t} );\n}\n\nfunction getBreakpoints() {\n\tconst { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};\n\n\tif ( ! breakpoints ) {\n\t\treturn [];\n\t}\n\n\tconst entities = Object.entries( breakpoints )\n\t\t.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )\n\t\t.map( ( [ id, { value, direction, label } ] ) => {\n\t\t\treturn {\n\t\t\t\tid,\n\t\t\t\tlabel,\n\t\t\t\twidth: value,\n\t\t\t\ttype: direction === 'min' ? 'min-width' : 'max-width',\n\t\t\t} as Breakpoint;\n\t\t} );\n\n\t// Desktop breakpoint is not included in V1 config.\n\tentities.push( {\n\t\tid: 'desktop',\n\t\tlabel: __( 'Desktop', 'elementor' ),\n\t} );\n\n\treturn entities;\n}\n\nfunction getActiveBreakpoint() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;\n}\n\nfunction deviceModeChangeEvent() {\n\treturn windowEvent( 'elementor/device-mode/change' );\n}\n","import { slice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\nimport { __registerSlice } from '@elementor/store';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\t__registerSlice( slice );\n\n\tsyncStore();\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tid: 'responsive-breakpoints-switcher',\n\t\tcomponent: BreakpointsSwitcher,\n\t\toptions: {\n\t\t\tpriority: 20, // After document indication.\n\t\t},\n\t} );\n}\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { BreakpointId, ExtendedWindow } from '../types';\nimport useBreakpoints from '../hooks/use-breakpoints';\nimport { Tab, Tabs, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';\nimport {\n\tDesktopIcon,\n\tTabletPortraitIcon,\n\tMobilePortraitIcon,\n\tWidescreenIcon,\n\tLaptopIcon,\n\tTabletLandscapeIcon,\n\tMobileLandscapeIcon,\n} from '@elementor/icons';\nimport useBreakpointsActions from '../hooks/use-breakpoints-actions';\n\nexport default function BreakpointsSwitcher() {\n\tconst { all, active } = useBreakpoints();\n\tconst { activate } = useBreakpointsActions();\n\n\tif ( ! all.length || ! active ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( _: unknown, value: BreakpointId ) => {\n\t\tconst extendedWindow = window as unknown as ExtendedWindow;\n\t\tconst config = extendedWindow?.elementor?.editorEvents?.config;\n\n\t\tif ( config ) {\n\t\t\textendedWindow.elementor.editorEvents.dispatchEvent( config.names.topBar.responsiveControls, {\n\t\t\t\tlocation: config.locations.topBar,\n\t\t\t\tsecondaryLocation: config.secondaryLocations.responsiveControls,\n\t\t\t\ttrigger: config.triggers.click,\n\t\t\t\telement: config.elements.buttonIcon,\n\t\t\t\tmode: value,\n\t\t\t} );\n\t\t}\n\n\t\tactivate( value );\n\t};\n\n\treturn (\n\t\t<Tabs\n\t\t\ttextColor=\"inherit\"\n\t\t\tindicatorColor=\"secondary\"\n\t\t\tvalue={ active.id }\n\t\t\tonChange={ onChange }\n\t\t\taria-label={ __( 'Switch Device', 'elementor' ) }\n\t\t\tsx={ {\n\t\t\t\t'& .MuiTabs-indicator': {\n\t\t\t\t\tbackgroundColor: 'text.primary',\n\t\t\t\t},\n\t\t\t} }\n\t\t>\n\t\t\t{ all.map( ( { id, label, type, width } ) => {\n\t\t\t\tconst Icon = iconsMap[ id ];\n\n\t\t\t\tconst title = labelsMap[ type || 'default' ]\n\t\t\t\t\t.replace( '%s', label )\n\t\t\t\t\t.replace( '%d', width?.toString() || '' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<Tab\n\t\t\t\t\t\tvalue={ id }\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<Tooltip title={ title }>\n\t\t\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsx={ { minWidth: 'auto' } }\n\t\t\t\t\t\tdata-testid={ `switch-device-to-${ id }` }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Tabs>\n\t);\n}\n\nfunction Tooltip( props: TooltipProps ) {\n\treturn (\n\t\t<BaseTooltip\n\t\t\tPopperProps={ {\n\t\t\t\tsx: {\n\t\t\t\t\t'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {\n\t\t\t\t\t\tmt: 2.5,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nconst iconsMap = {\n\twidescreen: WidescreenIcon,\n\tdesktop: DesktopIcon,\n\tlaptop: LaptopIcon,\n\ttablet_extra: TabletLandscapeIcon,\n\ttablet: TabletPortraitIcon,\n\tmobile_extra: MobileLandscapeIcon,\n\tmobile: MobilePortraitIcon,\n};\n\nconst labelsMap = {\n\tdefault: '%s',\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'min-width': __( '%s (%dpx and up)', 'elementor' ),\n\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'max-width': __( '%s (up to %dpx)', 'elementor' ),\n} as const;\n","import { __useSelector as useSelector } from '@elementor/store';\nimport { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';\n\nexport default function useBreakpoints() {\n\tconst all = useSelector( selectSortedBreakpoints );\n\tconst active = useSelector( selectActiveBreakpoint );\n\n\treturn {\n\t\tall,\n\t\tactive,\n\t};\n}\n","import { slice } from './index';\nimport { Breakpoint } from '../types';\nimport { __createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState< typeof slice >;\n\nexport const selectEntities = ( state: State ) => state.breakpoints.entities;\nexport const selectActiveId = ( state: State ) => state.breakpoints.activeId;\n\nexport const selectActiveBreakpoint = __createSelector( selectEntities, selectActiveId, ( entities, activeId ) =>\n\tactiveId && entities[ activeId ] ? entities[ activeId ] : null\n);\n\nexport const selectSortedBreakpoints = __createSelector( selectEntities, ( entities ) => {\n\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\treturn a.width && b.width ? b.width - a.width : 0;\n\t};\n\n\tconst all = Object.values( entities );\n\n\tconst defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.\n\tconst minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );\n\tconst maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );\n\n\t// Sort by size, big to small.\n\treturn [ ...minWidth.sort( byWidth ), ...defaults, ...maxWidth.sort( byWidth ) ];\n} );\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nexport default function useBreakpointsActions() {\n\tconst activate = useCallback( ( device: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device } );\n\t}, [] );\n\n\treturn {\n\t\tactivate,\n\t};\n}\n","import init from './init';\n\ninit();\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mBAA6C;AAO7C,IAAM,eAAsB;AAAA,EAC3B,UAAU,CAAC;AAAA,EACX,UAAU;AACX;AAEO,IAAM,YAAQ,4BAAe;AAAA,EACnC,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KACC,OACA,QAIC;AACD,YAAM,WAAW,OAAO,QAAQ;AAChC,YAAM,WAAW,kBAAmB,OAAO,QAAQ,QAAS;AAAA,IAC7D;AAAA,IAEA,mBAAoB,OAAO,QAAwC;AAClE,UAAK,MAAM,SAAU,OAAO,OAAQ,GAAI;AACvC,cAAM,WAAW,OAAO;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD,CAAE;AAEF,SAAS,kBAAmB,UAAyB;AACpD,SAAO,SAAS;AAAA,IACf,CAAE,KAAK,eAAgB;AACtB,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,WAAW,EAAG,GAAG;AAAA,MACpB;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AACD;;;AC5CA,IAAAA,gBAA2B;AAE3B,gCAAyE;AACzE,kBAAmB;AAEJ,SAAR,YAA6B;AACnC,qBAAmB;AACnB,eAAa;AACd;AAEA,SAAS,qBAAqB;AAC7B,QAAM,EAAE,MAAAC,MAAK,IAAI,MAAM;AAEvB,gCAAAC,uBAAU,wCAAa,GAAG,MAAM;AAC/B;AAAA,MACCD,MAAM;AAAA,QACL,UAAU,eAAe;AAAA,QACzB,UAAU,oBAAoB;AAAA,MAC/B,CAAE;AAAA,IACH;AAAA,EACD,CAAE;AACH;AAEA,SAAS,eAAe;AACvB,QAAM,EAAE,mBAAmB,IAAI,MAAM;AAErC,gCAAAC,mBAAU,sBAAsB,GAAG,MAAM;AACxC,UAAM,mBAAmB,oBAAoB;AAE7C,kCAAY,mBAAoB,gBAAiB,CAAE;AAAA,EACpD,CAAE;AACH;AAEA,SAAS,iBAAiB;AACzB,QAAM,EAAE,YAAY,IAAM,OAAsC,WAAW,QAAQ,cAAc,CAAC;AAElG,MAAK,CAAE,aAAc;AACpB,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,WAAW,OAAO,QAAS,WAAY,EAC3C,OAAQ,CAAE,CAAE,EAAE,UAAW,MAAO,WAAW,UAAW,EACtD,IAAK,CAAE,CAAE,IAAI,EAAE,OAAO,WAAW,MAAM,CAAE,MAAO;AAChD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,MAAM,cAAc,QAAQ,cAAc;AAAA,IAC3C;AAAA,EACD,CAAE;AAGH,WAAS,KAAM;AAAA,IACd,IAAI;AAAA,IACJ,WAAO,gBAAI,WAAW,WAAY;AAAA,EACnC,CAAE;AAEF,SAAO;AACR;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,YAAY,UAAW,aAAc,KAAK;AACtF;AAEA,SAAS,wBAAwB;AAChC,aAAO,uCAAa,8BAA+B;AACpD;;;ACnEA,4BAAqC;;;ACFrC,YAAuB;AACvB,IAAAC,eAAmB;;;ACDnB,IAAAC,gBAA6C;;;ACE7C,IAAAC,gBAA6C;AAItC,IAAM,iBAAiB,CAAE,UAAkB,MAAM,YAAY;AAC7D,IAAM,iBAAiB,CAAE,UAAkB,MAAM,YAAY;AAE7D,IAAM,6BAAyB;AAAA,EAAkB;AAAA,EAAgB;AAAA,EAAgB,CAAE,UAAU,aACnG,YAAY,SAAU,QAAS,IAAI,SAAU,QAAS,IAAI;AAC3D;AAEO,IAAM,8BAA0B,gCAAkB,gBAAgB,CAAE,aAAc;AACxF,QAAM,UAAU,CAAE,GAAe,MAAmB;AACnD,WAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ;AAAA,EACjD;AAEA,QAAM,MAAM,OAAO,OAAQ,QAAS;AAEpC,QAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,CAAE,WAAW,KAAM;AAClE,QAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,WAAW,SAAS,WAAY;AAC/E,QAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,WAAW,SAAS,WAAY;AAG/E,SAAO,CAAE,GAAG,SAAS,KAAM,OAAQ,GAAG,GAAG,UAAU,GAAG,SAAS,KAAM,OAAQ,CAAE;AAChF,CAAE;;;ADvBa,SAAR,iBAAkC;AACxC,QAAM,UAAM,cAAAC,eAAa,uBAAwB;AACjD,QAAM,aAAS,cAAAA,eAAa,sBAAuB;AAEnD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;;;ADPA,gBAAgE;AAChE,mBAQO;;;AGbP,mBAA4B;AAE5B,IAAAC,6BAAkD;AAEnC,SAAR,wBAAyC;AAC/C,QAAM,eAAW,0BAAa,CAAE,WAA0B;AACzD,eAAO,2BAAAC,qBAAY,4BAA4B,EAAE,OAAO,CAAE;AAAA,EAC3D,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN;AAAA,EACD;AACD;;;AHIe,SAAR,sBAAuC;AAC7C,QAAM,EAAE,KAAK,OAAO,IAAI,eAAe;AACvC,QAAM,EAAE,SAAS,IAAI,sBAAsB;AAE3C,MAAK,CAAE,IAAI,UAAU,CAAE,QAAS;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,WAAW,CAAE,GAAY,UAAyB;AACvD,UAAM,iBAAiB;AACvB,UAAM,SAAS,gBAAgB,WAAW,cAAc;AAExD,QAAK,QAAS;AACb,qBAAe,UAAU,aAAa,cAAe,OAAO,MAAM,OAAO,oBAAoB;AAAA,QAC5F,UAAU,OAAO,UAAU;AAAA,QAC3B,mBAAmB,OAAO,mBAAmB;AAAA,QAC7C,SAAS,OAAO,SAAS;AAAA,QACzB,SAAS,OAAO,SAAS;AAAA,QACzB,MAAM;AAAA,MACP,CAAE;AAAA,IACH;AAEA,aAAU,KAAM;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,gBAAe;AAAA,MACf,OAAQ,OAAO;AAAA,MACf;AAAA,MACA,kBAAa,iBAAI,iBAAiB,WAAY;AAAA,MAC9C,IAAK;AAAA,QACJ,wBAAwB;AAAA,UACvB,iBAAiB;AAAA,QAClB;AAAA,MACD;AAAA;AAAA,IAEE,IAAI,IAAK,CAAE,EAAE,IAAI,OAAO,MAAM,MAAM,MAAO;AAC5C,YAAM,OAAO,SAAU,EAAG;AAE1B,YAAM,QAAQ,UAAW,QAAQ,SAAU,EACzC,QAAS,MAAM,KAAM,EACrB,QAAS,MAAM,OAAO,SAAS,KAAK,EAAG;AAEzC,aACC;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,KAAM;AAAA,UACN,cAAa;AAAA,UACb,MACC,oCAAC,WAAQ,SACR,oCAAC,UAAK,CACP;AAAA,UAED,IAAK,EAAE,UAAU,OAAO;AAAA,UACxB,eAAc,oBAAqB,EAAG;AAAA;AAAA,MACvC;AAAA,IAEF,CAAE;AAAA,EACH;AAEF;AAEA,SAAS,QAAS,OAAsB;AACvC,SACC;AAAA,IAAC,UAAAC;AAAA,IAAA;AAAA,MACA,aAAc;AAAA,QACb,IAAI;AAAA,UACH,6EAA6E;AAAA,YAC5E,IAAI;AAAA,UACL;AAAA,QACD;AAAA,MACD;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;AAEA,IAAM,WAAW;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AACT;AAEA,IAAM,YAAY;AAAA,EACjB,SAAS;AAAA;AAAA,EAET,iBAAa,iBAAI,oBAAoB,WAAY;AAAA;AAAA,EAGjD,iBAAa,iBAAI,mBAAmB,WAAY;AACjD;;;AD5GA,IAAAC,gBAAgC;AAEjB,SAAR,OAAwB;AAC9B,YAAU;AAEV,mBAAiB;AAClB;AAEA,SAAS,YAAY;AACpB,qCAAiB,KAAM;AAEvB,YAAU;AACX;AAEA,SAAS,mBAAmB;AAC3B,kDAAsB;AAAA,IACrB,IAAI;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,MACR,UAAU;AAAA;AAAA,IACX;AAAA,EACD,CAAE;AACH;;;AKxBA,KAAK;","names":["import_store","init","listenTo","import_i18n","import_store","import_store","useSelector","import_editor_v1_adapters","runCommand","BaseTooltip","import_store"]}
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-breakpoints.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-activate-breakpoint.ts"],"sourcesContent":["export { useBreakpoints } from './hooks/use-breakpoints';\nexport { useActiveBreakpoint } from './hooks/use-active-breakpoint';\nexport { useActivateBreakpoint } from './hooks/use-activate-breakpoint';\n\nexport type { BreakpointId, BreakpointSize, Breakpoint } from './types';\n","import { __ } from '@wordpress/i18n';\nimport { Breakpoint, BreakpointId, ExtendedWindow } from '../types';\nimport { v1ReadyEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\n\nexport function useBreakpoints() {\n\treturn useListenTo( v1ReadyEvent(), getBreakpoints );\n}\n\nfunction getBreakpoints() {\n\tconst { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};\n\n\tif ( ! breakpoints || Object.entries( breakpoints ).length === 0 ) {\n\t\treturn [];\n\t}\n\n\tconst minWidth: Breakpoint[] = [];\n\tconst maxWidth: Breakpoint[] = [];\n\n\tconst defaults: Breakpoint[] = [\n\t\t// Desktop breakpoint is not included in V1 config.\n\t\t{ id: 'desktop', label: __( 'Desktop', 'elementor' ) },\n\t];\n\n\tObject.entries( breakpoints ).forEach( ( [ id, v1Breakpoint ] ) => {\n\t\tif ( ! v1Breakpoint.is_enabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst breakpoint: Breakpoint = {\n\t\t\tid: id as BreakpointId,\n\t\t\tlabel: v1Breakpoint.label,\n\t\t\twidth: v1Breakpoint.value,\n\t\t\ttype: v1Breakpoint.direction === 'min' ? 'min-width' : 'max-width',\n\t\t};\n\n\t\tif ( ! breakpoint.width ) {\n\t\t\tdefaults.push( breakpoint );\n\t\t} else if ( breakpoint.type === 'min-width' ) {\n\t\t\tminWidth.push( breakpoint );\n\t\t} else if ( breakpoint.type === 'max-width' ) {\n\t\t\tmaxWidth.push( breakpoint );\n\t\t}\n\t} );\n\n\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\treturn a.width && b.width ? b.width - a.width : 0;\n\t};\n\n\treturn [ ...minWidth.sort( byWidth ), ...defaults, ...maxWidth.sort( byWidth ) ];\n}\n","import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\nimport { BreakpointId, ExtendedWindow } from '../types';\n\nexport function useActiveBreakpoint(): BreakpointId | null {\n\treturn useListenTo( windowEvent( 'elementor/device-mode/change' ), getActiveBreakpoint );\n}\n\nfunction getActiveBreakpoint() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;\n}\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nexport function useActivateBreakpoint() {\n\treturn useCallback( ( breakpoint: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device: breakpoint } );\n\t}, [] );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAmB;AAEnB,gCAAkE;AAE3D,SAAS,iBAAiB;AAChC,aAAO,0BAAAA,0BAAa,wCAAa,GAAG,cAAe;AACpD;AAEA,SAAS,iBAAiB;AACzB,QAAM,EAAE,YAAY,IAAM,OAAsC,WAAW,QAAQ,cAAc,CAAC;AAElG,MAAK,CAAE,eAAe,OAAO,QAAS,WAAY,EAAE,WAAW,GAAI;AAClE,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,WAAyB,CAAC;AAChC,QAAM,WAAyB,CAAC;AAEhC,QAAM,WAAyB;AAAA;AAAA,IAE9B,EAAE,IAAI,WAAW,WAAO,gBAAI,WAAW,WAAY,EAAE;AAAA,EACtD;AAEA,SAAO,QAAS,WAAY,EAAE,QAAS,CAAE,CAAE,IAAI,YAAa,MAAO;AAClE,QAAK,CAAE,aAAa,YAAa;AAChC;AAAA,IACD;AAEA,UAAM,aAAyB;AAAA,MAC9B;AAAA,MACA,OAAO,aAAa;AAAA,MACpB,OAAO,aAAa;AAAA,MACpB,MAAM,aAAa,cAAc,QAAQ,cAAc;AAAA,IACxD;AAEA,QAAK,CAAE,WAAW,OAAQ;AACzB,eAAS,KAAM,UAAW;AAAA,IAC3B,WAAY,WAAW,SAAS,aAAc;AAC7C,eAAS,KAAM,UAAW;AAAA,IAC3B,WAAY,WAAW,SAAS,aAAc;AAC7C,eAAS,KAAM,UAAW;AAAA,IAC3B;AAAA,EACD,CAAE;AAEF,QAAM,UAAU,CAAE,GAAe,MAAmB;AACnD,WAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ;AAAA,EACjD;AAEA,SAAO,CAAE,GAAG,SAAS,KAAM,OAAQ,GAAG,GAAG,UAAU,GAAG,SAAS,KAAM,OAAQ,CAAE;AAChF;;;ACjDA,IAAAC,6BAAiE;AAG1D,SAAS,sBAA2C;AAC1D,aAAO,2BAAAC,0BAAa,wCAAa,8BAA+B,GAAG,mBAAoB;AACxF;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,YAAY,UAAW,aAAc,KAAK;AACtF;;;ACXA,mBAA4B;AAE5B,IAAAC,6BAAkD;AAE3C,SAAS,wBAAwB;AACvC,aAAO,0BAAa,CAAE,eAA8B;AACnD,eAAO,2BAAAC,qBAAY,4BAA4B,EAAE,QAAQ,WAAW,CAAE;AAAA,EACvE,GAAG,CAAC,CAAE;AACP;","names":["useListenTo","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand"]}