@elementor/editor-responsive 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/dist/index.js

@@ -0,0 +1,253 @@
+"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 __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+));
+
+// src/store/index.ts
+var import_store = require("@elementor/store");
+var initialState = {
+  entities: {},
+  activeId: null
+};
+function createSlice() {
+  return (0, import_store.addSlice)({
+    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;
+        }
+      }
+    }
+  });
+}
+function normalizeEntities(entities) {
+  return entities.reduce((acc, breakpoint) => {
+    return {
+      ...acc,
+      [breakpoint.id]: breakpoint
+    };
+  }, {});
+}
+
+// src/sync/sync-store.ts
+var import_store2 = require("@elementor/store");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_i18n = require("@wordpress/i18n");
+function syncStore(slice) {
+  syncInitialization(slice);
+  syncOnChange(slice);
+}
+function syncInitialization(slice) {
+  const { init: init2 } = slice.actions;
+  (0, import_editor_v1_adapters.listenTo)(
+    (0, import_editor_v1_adapters.v1ReadyEvent)(),
+    () => {
+      (0, import_store2.dispatch)(init2({
+        entities: getBreakpoints(),
+        activeId: getActiveBreakpoint()
+      }));
+    }
+  );
+}
+function syncOnChange(slice) {
+  const { activateBreakpoint } = slice.actions;
+  (0, import_editor_v1_adapters.listenTo)(
+    deviceModeChangeEvent(),
+    () => {
+      const activeBreakpoint = getActiveBreakpoint();
+      (0, import_store2.dispatch)(activateBreakpoint(activeBreakpoint));
+    }
+  );
+}
+function getBreakpoints() {
+  const { breakpoints } = window.elementor?.config?.responsive || {};
+  if (!breakpoints) {
+    return [];
+  }
+  const entities = Object.entries(breakpoints).filter(([, breakpoint]) => breakpoint.is_enabled).map(([id, { value, direction, label }]) => {
+    return {
+      id,
+      label,
+      width: value,
+      type: direction === "min" ? "min-width" : "max-width"
+    };
+  });
+  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_store4 = require("@elementor/store");
+
+// src/store/selectors.ts
+var import_store3 = require("@elementor/store");
+var selectEntities = (state) => state.breakpoints.entities;
+var selectActiveId = (state) => state.breakpoints.activeId;
+var selectActiveBreakpoint = (0, import_store3.createSelector)(
+  selectEntities,
+  selectActiveId,
+  (entities, activeId) => activeId && entities[activeId] ? entities[activeId] : null
+);
+var selectSortedBreakpoints = (0, import_store3.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_store4.useSelector)(selectSortedBreakpoints);
+  const active = (0, import_store4.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");
+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.runCommand)("panel/change-device-mode", { device });
+  }, []);
+  return {
+    activate
+  };
+}
+
+// src/components/breakpoints-switcher.tsx
+function BreakpointsSwitcher() {
+  const { all, active } = useBreakpoints();
+  const { activate } = useBreakpointsActions();
+  if (!all.length || !active) {
+    return null;
+  }
+  const onChange = (_, value) => activate(value);
+  return /* @__PURE__ */ React.createElement(import_ui.Tabs, { value: active.id, onChange, "aria-label": (0, import_i18n2.__)("Switch Device", "elementor") }, 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))
+      }
+    );
+  }));
+}
+function Tooltip(props) {
+  return /* @__PURE__ */ React.createElement(
+    import_ui.Tooltip,
+    {
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 7
+          }
+        }
+      },
+      ...props
+    }
+  );
+}
+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
+function init() {
+  initStore();
+  registerAppBarUI();
+}
+function initStore() {
+  const slice = createSlice();
+  syncStore(slice);
+}
+function registerAppBarUI() {
+  (0, import_editor_app_bar.injectIntoResponsive)({
+    name: "responsive-breakpoints-switcher",
+    filler: BreakpointsSwitcher,
+    options: {
+      priority: 20
+      // After document indication.
+    }
+  });
+}
+
+// src/index.ts
+init();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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 { addSlice, 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 function createSlice() {\n\treturn addSlice( {\n\t\tname: 'breakpoints',\n\t\tinitialState,\n\t\treducers: {\n\t\t\tinit( state, action: PayloadAction<{\n\t\t\t\tentities: Breakpoint[],\n\t\t\t\tactiveId: State['activeId'],\n\t\t\t}> ) {\n\t\t\t\tstate.activeId = action.payload.activeId;\n\t\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t\t},\n\n\t\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\t\tstate.activeId = action.payload;\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t} );\n}\n\nfunction normalizeEntities( entities: Breakpoint[] ) {\n\treturn entities.reduce( ( acc, breakpoint ) => {\n\t\treturn {\n\t\t\t...acc,\n\t\t\t[ breakpoint.id ]: breakpoint,\n\t\t};\n\t}, {} as State['entities'] );\n}\n","import { dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow, Slice } from '../types';\nimport { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore( slice: Slice ) {\n\tsyncInitialization( slice );\n\tsyncOnChange( slice );\n}\n\nfunction syncInitialization( slice: Slice ) {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\tdispatch( init( {\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( slice: Slice ) {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\tdispatch( activateBreakpoint( activeBreakpoint ) );\n\t\t},\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\n\t\t.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 { createSlice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\tconst slice = createSlice();\n\n\tsyncStore( slice );\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tname: 'responsive-breakpoints-switcher',\n\t\tfiller: 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 } 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 ) => activate( value );\n\n\treturn (\n\t\t<Tabs value={ active.id } onChange={ onChange } aria-label={ __( 'Switch Device', 'elementor' ) }>\n\t\t\t{\n\t\t\t\tall.map( ( { id, label, type, width } ) => {\n\t\t\t\t\tconst Icon = iconsMap[ id ];\n\n\t\t\t\t\tconst title = labelsMap[ type || 'default' ]\n\t\t\t\t\t\t.replace( '%s', label )\n\t\t\t\t\t\t.replace( '%d', width?.toString() || '' );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tab value={ id }\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\ticon={ <Tooltip title={ title }><Icon /></Tooltip> }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t}\n\t\t</Tabs>\n\n\t);\n}\n\nfunction Tooltip( props: TooltipProps ) {\n\treturn <BaseTooltip\n\t\tPopperProps={ {\n\t\t\tsx: {\n\t\t\t\t'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {\n\t\t\t\t\tmt: 7,\n\t\t\t\t},\n\t\t\t},\n\t\t} }\n\t\t{ ...props }\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 } 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 { Breakpoint, Slice } from '../types';\nimport { createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<Slice>;\n\nexport const selectEntities = ( state: State ) => state.breakpoints.entities;\nexport const selectActiveId = ( state: State ) => state.breakpoints.activeId;\n\nexport const selectActiveBreakpoint = createSelector(\n\tselectEntities,\n\tselectActiveId,\n\t( entities, activeId ) => activeId && entities[ activeId ]\n\t\t? entities[ activeId ]\n\t\t: null,\n);\n\nexport const selectSortedBreakpoints = createSelector(\n\tselectEntities,\n\t( entities ) => {\n\t\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\t\treturn ( a.width && b.width ) ? b.width - a.width : 0;\n\t\t};\n\n\t\tconst all = Object.values( entities );\n\n\t\tconst defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.\n\t\tconst minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );\n\t\tconst maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );\n\n\t\t// Sort by size, big to small.\n\t\treturn [\n\t\t\t...minWidth.sort( byWidth ),\n\t\t\t...defaults,\n\t\t\t...maxWidth.sort( byWidth ),\n\t\t];\n\t},\n);\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { 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":"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","names":["import_store","init","import_i18n","import_store","import_store","import_editor_v1_adapters","BaseTooltip"]}

package/dist/index.mjs

@@ -0,0 +1,237 @@
+// src/store/index.ts
+import { addSlice } from "@elementor/store";
+var initialState = {
+  entities: {},
+  activeId: null
+};
+function createSlice() {
+  return addSlice({
+    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;
+        }
+      }
+    }
+  });
+}
+function normalizeEntities(entities) {
+  return entities.reduce((acc, breakpoint) => {
+    return {
+      ...acc,
+      [breakpoint.id]: breakpoint
+    };
+  }, {});
+}
+
+// src/sync/sync-store.ts
+import { dispatch } from "@elementor/store";
+import { listenTo, v1ReadyEvent, windowEvent } from "@elementor/editor-v1-adapters";
+import { __ } from "@wordpress/i18n";
+function syncStore(slice) {
+  syncInitialization(slice);
+  syncOnChange(slice);
+}
+function syncInitialization(slice) {
+  const { init: init2 } = slice.actions;
+  listenTo(
+    v1ReadyEvent(),
+    () => {
+      dispatch(init2({
+        entities: getBreakpoints(),
+        activeId: getActiveBreakpoint()
+      }));
+    }
+  );
+}
+function syncOnChange(slice) {
+  const { activateBreakpoint } = slice.actions;
+  listenTo(
+    deviceModeChangeEvent(),
+    () => {
+      const activeBreakpoint = getActiveBreakpoint();
+      dispatch(activateBreakpoint(activeBreakpoint));
+    }
+  );
+}
+function getBreakpoints() {
+  const { breakpoints } = window.elementor?.config?.responsive || {};
+  if (!breakpoints) {
+    return [];
+  }
+  const entities = Object.entries(breakpoints).filter(([, breakpoint]) => breakpoint.is_enabled).map(([id, { value, direction, label }]) => {
+    return {
+      id,
+      label,
+      width: value,
+      type: direction === "min" ? "min-width" : "max-width"
+    };
+  });
+  entities.push({
+    id: "desktop",
+    label: __("Desktop", "elementor")
+  });
+  return entities;
+}
+function getActiveBreakpoint() {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
+}
+function deviceModeChangeEvent() {
+  return windowEvent("elementor/device-mode/change");
+}
+
+// src/init.ts
+import { injectIntoResponsive } from "@elementor/editor-app-bar";
+
+// src/components/breakpoints-switcher.tsx
+import * as React from "react";
+import { __ as __2 } from "@wordpress/i18n";
+
+// src/hooks/use-breakpoints.ts
+import { useSelector } from "@elementor/store";
+
+// src/store/selectors.ts
+import { createSelector } from "@elementor/store";
+var selectEntities = (state) => state.breakpoints.entities;
+var selectActiveId = (state) => state.breakpoints.activeId;
+var selectActiveBreakpoint = createSelector(
+  selectEntities,
+  selectActiveId,
+  (entities, activeId) => activeId && entities[activeId] ? entities[activeId] : null
+);
+var selectSortedBreakpoints = 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 = useSelector(selectSortedBreakpoints);
+  const active = useSelector(selectActiveBreakpoint);
+  return {
+    all,
+    active
+  };
+}
+
+// src/components/breakpoints-switcher.tsx
+import { Tab, Tabs, Tooltip as BaseTooltip } from "@elementor/ui";
+import {
+  DesktopIcon,
+  TabletPortraitIcon,
+  MobilePortraitIcon,
+  WidescreenIcon,
+  LaptopIcon,
+  TabletLandscapeIcon,
+  MobileLandscapeIcon
+} from "@elementor/icons";
+
+// src/hooks/use-breakpoints-actions.ts
+import { useCallback } from "react";
+import { runCommand } from "@elementor/editor-v1-adapters";
+function useBreakpointsActions() {
+  const activate = useCallback((device) => {
+    return runCommand("panel/change-device-mode", { device });
+  }, []);
+  return {
+    activate
+  };
+}
+
+// src/components/breakpoints-switcher.tsx
+function BreakpointsSwitcher() {
+  const { all, active } = useBreakpoints();
+  const { activate } = useBreakpointsActions();
+  if (!all.length || !active) {
+    return null;
+  }
+  const onChange = (_, value) => activate(value);
+  return /* @__PURE__ */ React.createElement(Tabs, { value: active.id, onChange, "aria-label": __2("Switch Device", "elementor") }, 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(
+      Tab,
+      {
+        value: id,
+        key: id,
+        "aria-label": title,
+        icon: /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Icon, null))
+      }
+    );
+  }));
+}
+function Tooltip(props) {
+  return /* @__PURE__ */ React.createElement(
+    BaseTooltip,
+    {
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 7
+          }
+        }
+      },
+      ...props
+    }
+  );
+}
+var iconsMap = {
+  widescreen: WidescreenIcon,
+  desktop: DesktopIcon,
+  laptop: LaptopIcon,
+  tablet_extra: TabletLandscapeIcon,
+  tablet: TabletPortraitIcon,
+  mobile_extra: MobileLandscapeIcon,
+  mobile: MobilePortraitIcon
+};
+var labelsMap = {
+  default: "%s",
+  // translators: %s: Breakpoint label, %d: Breakpoint size.
+  "min-width": __2("%s (%dpx and up)", "elementor"),
+  // translators: %s: Breakpoint label, %d: Breakpoint size.
+  "max-width": __2("%s (up to %dpx)", "elementor")
+};
+
+// src/init.ts
+function init() {
+  initStore();
+  registerAppBarUI();
+}
+function initStore() {
+  const slice = createSlice();
+  syncStore(slice);
+}
+function registerAppBarUI() {
+  injectIntoResponsive({
+    name: "responsive-breakpoints-switcher",
+    filler: BreakpointsSwitcher,
+    options: {
+      priority: 20
+      // After document indication.
+    }
+  });
+}
+
+// src/index.ts
+init();
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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 { addSlice, 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 function createSlice() {\n\treturn addSlice( {\n\t\tname: 'breakpoints',\n\t\tinitialState,\n\t\treducers: {\n\t\t\tinit( state, action: PayloadAction<{\n\t\t\t\tentities: Breakpoint[],\n\t\t\t\tactiveId: State['activeId'],\n\t\t\t}> ) {\n\t\t\t\tstate.activeId = action.payload.activeId;\n\t\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t\t},\n\n\t\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\t\tstate.activeId = action.payload;\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t} );\n}\n\nfunction normalizeEntities( entities: Breakpoint[] ) {\n\treturn entities.reduce( ( acc, breakpoint ) => {\n\t\treturn {\n\t\t\t...acc,\n\t\t\t[ breakpoint.id ]: breakpoint,\n\t\t};\n\t}, {} as State['entities'] );\n}\n","import { dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow, Slice } from '../types';\nimport { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore( slice: Slice ) {\n\tsyncInitialization( slice );\n\tsyncOnChange( slice );\n}\n\nfunction syncInitialization( slice: Slice ) {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\tdispatch( init( {\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( slice: Slice ) {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\tdispatch( activateBreakpoint( activeBreakpoint ) );\n\t\t},\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\n\t\t.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 { createSlice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\tconst slice = createSlice();\n\n\tsyncStore( slice );\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tname: 'responsive-breakpoints-switcher',\n\t\tfiller: 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 } 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 ) => activate( value );\n\n\treturn (\n\t\t<Tabs value={ active.id } onChange={ onChange } aria-label={ __( 'Switch Device', 'elementor' ) }>\n\t\t\t{\n\t\t\t\tall.map( ( { id, label, type, width } ) => {\n\t\t\t\t\tconst Icon = iconsMap[ id ];\n\n\t\t\t\t\tconst title = labelsMap[ type || 'default' ]\n\t\t\t\t\t\t.replace( '%s', label )\n\t\t\t\t\t\t.replace( '%d', width?.toString() || '' );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tab value={ id }\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\ticon={ <Tooltip title={ title }><Icon /></Tooltip> }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} )\n\t\t\t}\n\t\t</Tabs>\n\n\t);\n}\n\nfunction Tooltip( props: TooltipProps ) {\n\treturn <BaseTooltip\n\t\tPopperProps={ {\n\t\t\tsx: {\n\t\t\t\t'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {\n\t\t\t\t\tmt: 7,\n\t\t\t\t},\n\t\t\t},\n\t\t} }\n\t\t{ ...props }\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 } 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 { Breakpoint, Slice } from '../types';\nimport { createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<Slice>;\n\nexport const selectEntities = ( state: State ) => state.breakpoints.entities;\nexport const selectActiveId = ( state: State ) => state.breakpoints.activeId;\n\nexport const selectActiveBreakpoint = createSelector(\n\tselectEntities,\n\tselectActiveId,\n\t( entities, activeId ) => activeId && entities[ activeId ]\n\t\t? entities[ activeId ]\n\t\t: null,\n);\n\nexport const selectSortedBreakpoints = createSelector(\n\tselectEntities,\n\t( entities ) => {\n\t\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\t\treturn ( a.width && b.width ) ? b.width - a.width : 0;\n\t\t};\n\n\t\tconst all = Object.values( entities );\n\n\t\tconst defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.\n\t\tconst minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );\n\t\tconst maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );\n\n\t\t// Sort by size, big to small.\n\t\treturn [\n\t\t\t...minWidth.sort( byWidth ),\n\t\t\t...defaults,\n\t\t\t...maxWidth.sort( byWidth ),\n\t\t];\n\t},\n);\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { 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":"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","names":["init","__","__"]}

package/package.json

@@ -0,0 +1,49 @@
+{
+	"name": "@elementor/editor-responsive",
+	"version": "0.1.0",
+	"private": false,
+	"author": "Elementor Team",
+	"homepage": "https://elementor.com/",
+	"license": "GPL-3.0-or-later",
+	"main": "dist/index.js",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		},
+		"./package.json": "./package.json"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/elementor/elementor-packages.git",
+		"directory": "packages/editor-responsive"
+	},
+	"bugs": {
+		"url": "https://github.com/elementor/elementor-packages/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"build": "tsup --config=../../tsup.build.ts",
+		"dev": "tsup --config=../../tsup.dev.ts"
+	},
+	"dependencies": {
+		"@elementor/editor-app-bar": "^0.1.0",
+		"@elementor/editor-v1-adapters": "^0.1.0",
+		"@elementor/icons": "^0.1.0",
+		"@elementor/store": "^0.1.0",
+		"@elementor/ui": "^1.4.47",
+		"@wordpress/i18n": "^4.31.0"
+	},
+	"peerDependencies": {
+		"react": "17.x"
+	},
+	"elementor": {
+		"type": "extension"
+	},
+	"gitHead": "2ba9f13a9dbd085eb6ed8e6e303e9275ce626b8d"
+}