@elementor/editor-components 3.33.0-131 → 3.33.0-133

package/dist/index.js

@@ -37,13 +37,17 @@ module.exports = __toCommonJS(index_exports);
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
-var import_i18n3 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 
-// src/components/components-tab.tsx
-var React = __toESM(require("react"));
-var import_editor_canvas = require("@elementor/editor-canvas");
-var import_editor_elements3 = require("@elementor/editor-elements");
-var import_ui = require("@elementor/ui");
+// src/components/components.tsx
+var React4 = __toESM(require("react"));
+var import_editor_ui2 = require("@elementor/editor-ui");
+
+// src/components/components-list.tsx
+var React3 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
 
 // src/hooks/use-components.ts
 var import_query = require("@elementor/query");
@@ -66,6 +70,14 @@ var useComponents = () => {
   });
 };
 
+// src/components/components-item.tsx
+var React = __toESM(require("react"));
+var import_editor_elements3 = require("@elementor/editor-elements");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+
 // src/utils/get-container-for-new-element.ts
 var import_editor_elements = require("@elementor/editor-elements");
 var getContainerForNewElement = () => {
@@ -125,36 +137,48 @@ var createComponentModel = (component) => {
   };
 };
 
-// src/components/components-tab.tsx
-function ComponentsTab() {
-  const { data: components } = useComponents();
-  return /* @__PURE__ */ React.createElement(import_ui.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5, px: 2 } }, components?.map((component) => /* @__PURE__ */ React.createElement(ComponentItem, { key: component.id, component })));
-}
+// src/components/components-item.tsx
 var ComponentItem = ({ component }) => {
-  const componentModel = createComponentModel({ id: component.id, name: component.name });
+  const popupState = (0, import_ui.usePopupState)({
+    variant: "popover",
+    disableAutoFocus: true
+  });
   const handleClick = () => {
-    addComponentToPage(componentModel);
+    addComponentToPage(component);
   };
-  return /* @__PURE__ */ React.createElement(import_ui.ListItem, { disablePadding: true }, /* @__PURE__ */ React.createElement(
-    import_ui.ListItemButton,
+  return /* @__PURE__ */ React.createElement(import_ui.ListItemButton, { shape: "rounded", sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 } }, /* @__PURE__ */ React.createElement(import_ui.Box, { sx: { display: "flex", width: "100%", alignItems: "center", gap: 1 }, onClick: handleClick }, /* @__PURE__ */ React.createElement(import_ui.ListItemIcon, { size: "tiny" }, /* @__PURE__ */ React.createElement(import_icons.EyeIcon, { fontSize: "tiny" })), /* @__PURE__ */ React.createElement(
+    import_ui.ListItemText,
+    {
+      primary: /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "caption", sx: { color: "text.primary" } }, component.name)
+    }
+  )), /* @__PURE__ */ React.createElement(import_ui.IconButton, { size: "tiny", "aria-label": "More actions", ...(0, import_ui.bindTrigger)(popupState) }, /* @__PURE__ */ React.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })), /* @__PURE__ */ React.createElement(
+    import_ui.Menu,
     {
-      sx: { border: "1px solid", borderColor: "divider", py: 0.5, px: 1 },
-      shape: "rounded",
-      onClick: handleClick,
-      draggable: true,
-      onDragStart: () => (0, import_editor_canvas.startDragElementFromPanel)(componentModel),
-      onDragEnd: import_editor_canvas.endDragElementFromPanel
+      ...(0, import_ui.bindMenu)(popupState),
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      }
     },
+    /* @__PURE__ */ React.createElement(import_editor_ui.MenuListItem, { sx: { minWidth: "160px" } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n.__)("Rename", "elementor"))),
     /* @__PURE__ */ React.createElement(
-      import_ui.ListItemText,
+      import_editor_ui.MenuListItem,
       {
-        primary: /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "caption", sx: { color: "text.primary" } }, component.name)
-      }
+        onClick: () => {
+          popupState.close();
+        }
+      },
+      /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n.__)("Delete", "elementor"))
     )
   ));
 };
-var addComponentToPage = (model) => {
+var addComponentToPage = (component) => {
   const { container, options } = getContainerForNewElement();
+  const model = createComponentModel(component);
   if (!container) {
     throw new Error(`Can't find container to drop new component instance at`);
   }
@@ -165,14 +189,104 @@ var addComponentToPage = (model) => {
   });
 };
 
-// src/components/create-component-form/create-component-form.tsx
+// src/components/loading-components.tsx
 var React2 = __toESM(require("react"));
+var import_ui2 = require("@elementor/ui");
+var ROWS_COUNT = 6;
+var rows = Array.from({ length: ROWS_COUNT }, (_, index) => index);
+var LoadingComponents = () => {
+  return /* @__PURE__ */ React2.createElement(
+    import_ui2.Stack,
+    {
+      "aria-label": "Loading components",
+      gap: 1,
+      sx: {
+        pointerEvents: "none",
+        position: "relative",
+        maxHeight: "300px",
+        overflow: "hidden",
+        "&:after": {
+          position: "absolute",
+          top: 0,
+          content: '""',
+          left: 0,
+          width: "100%",
+          height: "300px",
+          background: "linear-gradient(to top, white, transparent)",
+          pointerEvents: "none"
+        }
+      }
+    },
+    rows.map((row) => /* @__PURE__ */ React2.createElement(
+      import_ui2.ListItemButton,
+      {
+        key: row,
+        sx: { border: "solid 1px", borderColor: "divider", py: 0.5, px: 1 },
+        shape: "rounded"
+      },
+      /* @__PURE__ */ React2.createElement(import_ui2.Box, { display: "flex", gap: 1, width: "100%" }, /* @__PURE__ */ React2.createElement(import_ui2.Skeleton, { variant: "text", width: "24px", height: "36px" }), /* @__PURE__ */ React2.createElement(import_ui2.Skeleton, { variant: "text", width: "100%", height: "36px" }))
+    ))
+  );
+};
+
+// src/components/components-list.tsx
+function ComponentsList() {
+  const { data: components, isLoading } = useComponents();
+  if (isLoading) {
+    return /* @__PURE__ */ React3.createElement(LoadingComponents, null);
+  }
+  if (!components || components.length === 0) {
+    return /* @__PURE__ */ React3.createElement(EmptyState, null);
+  }
+  return /* @__PURE__ */ React3.createElement(import_ui3.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5, px: 2 } }, components?.map((component) => /* @__PURE__ */ React3.createElement(ComponentItem, { key: component.id, component })));
+}
+var EmptyState = () => {
+  return /* @__PURE__ */ React3.createElement(
+    import_ui3.Stack,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      height: "100%",
+      sx: { px: 2.5, pt: 10 },
+      gap: 1.75,
+      overflow: "hidden"
+    },
+    /* @__PURE__ */ React3.createElement(import_ui3.Icon, { fontSize: "large" }, /* @__PURE__ */ React3.createElement(import_icons2.EyeIcon, { fontSize: "large" })),
+    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", fontWeight: "bold" }, (0, import_i18n2.__)("Text that explains that there are no Components yet.", "elementor")),
+    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "caption", align: "center", color: "text.secondary" }, (0, import_i18n2.__)(
+      "Once you have Components, this is where you can manage them\u2014rearrange, duplicate, rename and delete irrelevant classes.",
+      "elementor"
+    )),
+    /* @__PURE__ */ React3.createElement(import_ui3.Divider, { sx: { width: "100%" }, color: "text.secondary" }),
+    /* @__PURE__ */ React3.createElement(import_ui3.Typography, { align: "left", variant: "caption", color: "text.secondary" }, (0, import_i18n2.__)("To create a component, first design it, then choose one of three options:", "elementor")),
+    /* @__PURE__ */ React3.createElement(
+      import_ui3.Typography,
+      {
+        align: "left",
+        variant: "caption",
+        color: "text.secondary",
+        sx: { display: "flex", flexDirection: "column" }
+      },
+      /* @__PURE__ */ React3.createElement("span", null, (0, import_i18n2.__)("1. Right-click and select Create Component", "elementor")),
+      /* @__PURE__ */ React3.createElement("span", null, (0, import_i18n2.__)("2. Use the component icon in the Structure panel", "elementor")),
+      /* @__PURE__ */ React3.createElement("span", null, (0, import_i18n2.__)("3. Use the component icon in the Edit panel header", "elementor"))
+    )
+  );
+};
+
+// src/components/components.tsx
+var Components = () => {
+  return /* @__PURE__ */ React4.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React4.createElement(ComponentsList, null));
+};
+
+// src/components/create-component-form/create-component-form.tsx
+var React5 = __toESM(require("react"));
 var import_react2 = require("react");
 var import_editor_elements4 = require("@elementor/editor-elements");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_icons = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_icons3 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/hooks/use-create-component.ts
 var import_query2 = require("@elementor/query");
@@ -235,16 +349,16 @@ var validateForm = (values, schema) => {
 
 // src/components/create-component-form/utils/component-form-schema.ts
 var import_schema = require("@elementor/schema");
-var import_i18n = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 var MIN_NAME_LENGTH = 2;
 var MAX_NAME_LENGTH = 50;
 var createBaseComponentSchema = (existingNames) => {
   return import_schema.z.object({
     componentName: import_schema.z.string().trim().max(
       MAX_NAME_LENGTH,
-      (0, import_i18n.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
+      (0, import_i18n3.__)("Component name is too long. Please keep it under 50 characters.", "elementor")
     ).refine((value) => !existingNames.includes(value), {
-      message: (0, import_i18n.__)("Component name already exists", "elementor")
+      message: (0, import_i18n3.__)("Component name already exists", "elementor")
     })
   });
 };
@@ -252,9 +366,9 @@ var createSubmitComponentSchema = (existingNames) => {
   const baseSchema = createBaseComponentSchema(existingNames);
   return baseSchema.extend({
     componentName: baseSchema.shape.componentName.refine((value) => value.length > 0, {
-      message: (0, import_i18n.__)("Component name is required.", "elementor")
+      message: (0, import_i18n3.__)("Component name is required.", "elementor")
     }).refine((value) => value.length >= MIN_NAME_LENGTH, {
-      message: (0, import_i18n.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
+      message: (0, import_i18n3.__)("Component name is too short. Please enter at least 2 characters.", "elementor")
     })
   });
 };
@@ -297,13 +411,13 @@ function CreateComponentForm() {
           setResultNotification({
             show: true,
             // Translators: %1$s: Component name, %2$s: Component ID
-            message: (0, import_i18n2.__)("Component saved successfully as: %1$s (ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", result.component_id.toString()),
+            message: (0, import_i18n4.__)("Component saved successfully as: %1$s (ID: %2$s)", "elementor").replace("%1$s", values.componentName).replace("%2$s", result.component_id.toString()),
             type: "success"
           });
           resetAndClosePopup();
         },
         onError: () => {
-          const errorMessage = (0, import_i18n2.__)("Failed to save component. Please try again.", "elementor");
+          const errorMessage = (0, import_i18n4.__)("Failed to save component. Please try again.", "elementor");
           setResultNotification({
             show: true,
             message: errorMessage,
@@ -317,15 +431,15 @@ function CreateComponentForm() {
     setElement(null);
     setAnchorPosition(void 0);
   };
-  return /* @__PURE__ */ React2.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React2.createElement(
-    import_ui2.Popover,
+  return /* @__PURE__ */ React5.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React5.createElement(
+    import_ui4.Popover,
     {
       open: element !== null,
       onClose: resetAndClosePopup,
       anchorReference: "anchorPosition",
       anchorPosition
     },
-    element !== null && /* @__PURE__ */ React2.createElement(
+    element !== null && /* @__PURE__ */ React5.createElement(
       Form,
       {
         initialValues: { componentName: element.elementLabel },
@@ -334,8 +448,8 @@ function CreateComponentForm() {
         closePopup: resetAndClosePopup
       }
     )
-  ), /* @__PURE__ */ React2.createElement(import_ui2.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React2.createElement(
-    import_ui2.Alert,
+  ), /* @__PURE__ */ React5.createElement(import_ui4.Snackbar, { open: resultNotification?.show, onClose: () => setResultNotification(null) }, /* @__PURE__ */ React5.createElement(
+    import_ui4.Alert,
     {
       onClose: () => setResultNotification(null),
       severity: resultNotification?.type,
@@ -370,8 +484,8 @@ var Form = ({
       handleSave(parsedValues);
     }
   };
-  return /* @__PURE__ */ React2.createElement(import_ui2.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React2.createElement(
-    import_ui2.Stack,
+  return /* @__PURE__ */ React5.createElement(import_ui4.Stack, { alignItems: "start", width: "268px" }, /* @__PURE__ */ React5.createElement(
+    import_ui4.Stack,
     {
       direction: "row",
       alignItems: "center",
@@ -379,10 +493,10 @@ var Form = ({
       px: 1.5,
       sx: { columnGap: 0.5, borderBottom: "1px solid", borderColor: "divider", width: "100%" }
     },
-    /* @__PURE__ */ React2.createElement(import_icons.StarIcon, { fontSize: FONT_SIZE }),
-    /* @__PURE__ */ React2.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, (0, import_i18n2.__)("Save as a component", "elementor"))
-  ), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(import_ui2.FormLabel, { htmlFor: "component-name", size: "tiny" }, (0, import_i18n2.__)("Name", "elementor"))), /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React2.createElement(
-    import_ui2.TextField,
+    /* @__PURE__ */ React5.createElement(import_icons3.StarIcon, { fontSize: FONT_SIZE }),
+    /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary", fontWeight: "500", lineHeight: 1 } }, (0, import_i18n4.__)("Save as a component", "elementor"))
+  ), /* @__PURE__ */ React5.createElement(import_ui4.Grid, { container: true, gap: 0.75, alignItems: "start", p: 1.5 }, /* @__PURE__ */ React5.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(import_ui4.FormLabel, { htmlFor: "component-name", size: "tiny" }, (0, import_i18n4.__)("Name", "elementor"))), /* @__PURE__ */ React5.createElement(import_ui4.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React5.createElement(
+    import_ui4.TextField,
     {
       id: "component-name",
       size: FONT_SIZE,
@@ -393,8 +507,8 @@ var Form = ({
       error: Boolean(errors.componentName),
       helperText: errors.componentName
     }
-  ))), /* @__PURE__ */ React2.createElement(import_ui2.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React2.createElement(import_ui2.Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, (0, import_i18n2.__)("Cancel", "elementor")), /* @__PURE__ */ React2.createElement(
-    import_ui2.Button,
+  ))), /* @__PURE__ */ React5.createElement(import_ui4.Stack, { direction: "row", justifyContent: "flex-end", alignSelf: "end", py: 1, px: 1.5 }, /* @__PURE__ */ React5.createElement(import_ui4.Button, { onClick: closePopup, disabled: isSubmitting, color: "secondary", variant: "text", size: "small" }, (0, import_i18n4.__)("Cancel", "elementor")), /* @__PURE__ */ React5.createElement(
+    import_ui4.Button,
     {
       onClick: handleSubmit,
       disabled: isSubmitting || !isValid,
@@ -402,7 +516,7 @@ var Form = ({
       color: "primary",
       size: "small"
     },
-    isSubmitting ? (0, import_i18n2.__)("Creating\u2026", "elementor") : (0, import_i18n2.__)("Create", "elementor")
+    isSubmitting ? (0, import_i18n4.__)("Creating\u2026", "elementor") : (0, import_i18n4.__)("Create", "elementor")
   )));
 };
 
@@ -410,8 +524,8 @@ var Form = ({
 function init() {
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n3.__)("Components", "elementor"),
-    component: ComponentsTab
+    label: (0, import_i18n5.__)("Components", "elementor"),
+    component: Components
   });
   (0, import_editor.injectIntoTop)({
     id: "create-component-popup",

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/components-tab.tsx","../src/hooks/use-components.ts","../src/api.ts","../src/utils/get-container-for-new-element.ts","../src/components/create-component-form/utils/replace-element-with-component.ts","../src/components/create-component-form/create-component-form.tsx","../src/hooks/use-create-component.ts","../src/components/create-component-form/hooks/use-form.ts","../src/components/create-component-form/utils/component-form-schema.ts"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\nimport { injectTab } from '@elementor/editor-elements-panel';\nimport { __ } from '@wordpress/i18n';\n\nimport { ComponentsTab } from './components/components-tab';\nimport { CreateComponentForm } from './components/create-component-form/create-component-form';\n\nexport function init() {\n\tinjectTab( {\n\t\tid: 'components',\n\t\tlabel: __( 'Components', 'elementor' ),\n\t\tcomponent: ComponentsTab,\n\t} );\n\n\tinjectIntoTop( {\n\t\tid: 'create-component-popup',\n\t\tcomponent: CreateComponentForm,\n\t} );\n}\n","import * as React from 'react';\nimport { endDragElementFromPanel, startDragElementFromPanel } from '@elementor/editor-canvas';\nimport { dropElement, type DropElementParams } from '@elementor/editor-elements';\nimport { List, ListItem, ListItemButton, ListItemText, Typography } from '@elementor/ui';\n\nimport { useComponents } from '../hooks/use-components';\nimport { type Component } from '../types';\nimport { getContainerForNewElement } from '../utils/get-container-for-new-element';\nimport { createComponentModel } from './create-component-form/utils/replace-element-with-component';\n\nexport function ComponentsTab() {\n\tconst { data: components } = useComponents();\n\n\treturn (\n\t\t<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5, px: 2 } }>\n\t\t\t{ components?.map( ( component ) => <ComponentItem key={ component.id } component={ component } /> ) }\n\t\t</List>\n\t);\n}\n\nconst ComponentItem = ( { component }: { component: Component } ) => {\n\tconst componentModel = createComponentModel( { id: component.id, name: component.name } );\n\n\tconst handleClick = () => {\n\t\taddComponentToPage( componentModel );\n\t};\n\n\treturn (\n\t\t<ListItem disablePadding>\n\t\t\t<ListItemButton\n\t\t\t\tsx={ { border: '1px solid', borderColor: 'divider', py: 0.5, px: 1 } }\n\t\t\t\tshape=\"rounded\"\n\t\t\t\tonClick={ handleClick }\n\t\t\t\tdraggable\n\t\t\t\tonDragStart={ () => startDragElementFromPanel( componentModel ) }\n\t\t\t\tonDragEnd={ endDragElementFromPanel }\n\t\t\t>\n\t\t\t\t<ListItemText\n\t\t\t\t\tprimary={\n\t\t\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary' } }>\n\t\t\t\t\t\t\t{ component.name }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ListItemButton>\n\t\t</ListItem>\n\t);\n};\n\nconst addComponentToPage = ( model: DropElementParams[ 'model' ] ) => {\n\tconst { container, options } = getContainerForNewElement();\n\n\tif ( ! container ) {\n\t\tthrow new Error( `Can't find container to drop new component instance at` );\n\t}\n\n\tdropElement( {\n\t\tcontainerId: container.id,\n\t\tmodel,\n\t\toptions: { ...options, useHistory: false, scrollIntoView: true },\n\t} );\n};\n","import { useQuery } from '@elementor/query';\n\nimport { apiClient } from '../api';\n\nexport const COMPONENTS_QUERY_KEY = 'components';\n\nexport const useComponents = () => {\n\treturn useQuery( {\n\t\tqueryKey: [ COMPONENTS_QUERY_KEY ],\n\t\tqueryFn: apiClient.get,\n\t\tstaleTime: Infinity,\n\t} );\n};\n","import { type V1ElementModelProps } from '@elementor/editor-elements';\nimport { type HttpResponse, httpService } from '@elementor/http-client';\n\nimport { type Component } from './types';\n\nconst BASE_URL = 'elementor/v1/components';\n\ntype CreateComponentPayload = {\n\tname: string;\n\tcontent: V1ElementModelProps[];\n};\n\ntype GetComponentResponse = Array< Component >;\n\nexport type CreateComponentResponse = {\n\tcomponent_id: number;\n};\n\nexport const apiClient = {\n\tget: () =>\n\t\thttpService()\n\t\t\t.get< HttpResponse< GetComponentResponse > >( `${ BASE_URL }` )\n\t\t\t.then( ( res ) => res.data.data ),\n\tcreate: ( payload: CreateComponentPayload ) =>\n\t\thttpService()\n\t\t\t.post< HttpResponse< CreateComponentResponse > >( `${ BASE_URL }`, payload )\n\t\t\t.then( ( res ) => res.data.data ),\n};\n","import {\n\tgetContainer,\n\tgetCurrentDocumentContainer,\n\tgetSelectedElements,\n\ttype V1Element,\n} from '@elementor/editor-elements';\n\nexport const getContainerForNewElement = (): { container: V1Element | null; options?: { at: number } } => {\n\tconst currentDocumentContainer = getCurrentDocumentContainer();\n\tconst selectedElement = getSelectedElementContainer();\n\n\tlet container, options;\n\n\tif ( selectedElement ) {\n\t\tswitch ( selectedElement.model.get( 'elType' ) ) {\n\t\t\tcase 'widget': {\n\t\t\t\tcontainer = selectedElement?.parent;\n\n\t\t\t\tconst selectedElIndex = selectedElement.view?._index ?? -1;\n\n\t\t\t\tif ( selectedElIndex > -1 ) {\n\t\t\t\t\toptions = { at: selectedElIndex + 1 };\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'section': {\n\t\t\t\tcontainer = selectedElement?.children?.[ 0 ];\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tcontainer = selectedElement;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn { container: container ?? currentDocumentContainer, options };\n};\n\nfunction getSelectedElementContainer() {\n\tconst selectedElements = getSelectedElements();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn undefined;\n\t}\n\n\treturn getContainer( selectedElements[ 0 ].id );\n}\n","import { replaceElement, type V1Element } from '@elementor/editor-elements';\nimport { numberPropTypeUtil } from '@elementor/editor-props';\n\nimport { type Component } from '../../../types';\n\nexport const replaceElementWithComponent = async ( element: V1Element, component: Component ) => {\n\treplaceElement( {\n\t\tcurrentElement: element,\n\t\tnewElement: createComponentModel( component ),\n\t\twithHistory: false,\n\t} );\n};\n\nexport const createComponentModel = ( component: Component ) => {\n\treturn {\n\t\telType: 'widget',\n\t\twidgetType: 'e-component',\n\t\tsettings: {\n\t\t\tcomponent_id: numberPropTypeUtil.create( component.id ),\n\t\t},\n\t\teditor_settings: {\n\t\t\ttitle: component.name,\n\t\t},\n\t};\n};\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getElementLabel, type V1Element } from '@elementor/editor-elements';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { StarIcon } from '@elementor/icons';\nimport { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type CreateComponentResponse } from '../../api';\nimport { useComponents } from '../../hooks/use-components';\nimport { useCreateComponentMutation } from '../../hooks/use-create-component';\nimport { type ComponentFormValues } from '../../types';\nimport { useForm } from './hooks/use-form';\nimport { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';\nimport { replaceElementWithComponent } from './utils/replace-element-with-component';\n\ntype SaveAsComponentEventData = {\n\telement: V1Element;\n\tanchorPosition: { top: number; left: number };\n};\n\ntype ResultNotification = {\n\tshow: boolean;\n\tmessage: string;\n\ttype: 'success' | 'error';\n};\n\nexport function CreateComponentForm() {\n\tconst [ element, setElement ] = useState< {\n\t\telement: V1Element;\n\t\telementLabel: string;\n\t} | null >( null );\n\n\tconst [ anchorPosition, setAnchorPosition ] = useState< { top: number; left: number } >();\n\n\tconst [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );\n\n\tconst { mutate: createComponent, isPending } = useCreateComponentMutation();\n\n\tuseEffect( () => {\n\t\tconst OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';\n\n\t\tconst openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {\n\t\t\tsetElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );\n\t\t\tsetAnchorPosition( event.detail.anchorPosition );\n\t\t};\n\n\t\twindow.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\t\t};\n\t}, [] );\n\n\tconst handleSave = async ( values: ComponentFormValues ) => {\n\t\tif ( ! element ) {\n\t\t\tthrow new Error( `Can't save element as component: element not found` );\n\t\t}\n\n\t\tcreateComponent(\n\t\t\t{\n\t\t\t\tname: values.componentName,\n\t\t\t\tcontent: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],\n\t\t\t},\n\t\t\t{\n\t\t\t\tonSuccess: ( result: CreateComponentResponse ) => {\n\t\t\t\t\tif ( ! element ) {\n\t\t\t\t\t\tthrow new Error( `Can't replace element with component: element not found` );\n\t\t\t\t\t}\n\n\t\t\t\t\treplaceElementWithComponent( element.element, {\n\t\t\t\t\t\tid: result.component_id,\n\t\t\t\t\t\tname: values.componentName,\n\t\t\t\t\t} );\n\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\t// Translators: %1$s: Component name, %2$s: Component ID\n\t\t\t\t\t\tmessage: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )\n\t\t\t\t\t\t\t.replace( '%1$s', values.componentName )\n\t\t\t\t\t\t\t.replace( '%2$s', result.component_id.toString() ),\n\t\t\t\t\t\ttype: 'success',\n\t\t\t\t\t} );\n\n\t\t\t\t\tresetAndClosePopup();\n\t\t\t\t},\n\t\t\t\tonError: () => {\n\t\t\t\t\tconst errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\tmessage: errorMessage,\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t} );\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t};\n\n\tconst resetAndClosePopup = () => {\n\t\tsetElement( null );\n\t\tsetAnchorPosition( undefined );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Popover\n\t\t\t\topen={ element !== null }\n\t\t\t\tonClose={ resetAndClosePopup }\n\t\t\t\tanchorReference=\"anchorPosition\"\n\t\t\t\tanchorPosition={ anchorPosition }\n\t\t\t>\n\t\t\t\t{ element !== null && (\n\t\t\t\t\t<Form\n\t\t\t\t\t\tinitialValues={ { componentName: element.elementLabel } }\n\t\t\t\t\t\thandleSave={ handleSave }\n\t\t\t\t\t\tisSubmitting={ isPending }\n\t\t\t\t\t\tclosePopup={ resetAndClosePopup }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Popover>\n\t\t\t<Snackbar open={ resultNotification?.show } onClose={ () => setResultNotification( null ) }>\n\t\t\t\t<Alert\n\t\t\t\t\tonClose={ () => setResultNotification( null ) }\n\t\t\t\t\tseverity={ resultNotification?.type }\n\t\t\t\t\tsx={ { width: '100%' } }\n\t\t\t\t>\n\t\t\t\t\t{ resultNotification?.message }\n\t\t\t\t</Alert>\n\t\t\t</Snackbar>\n\t\t</ThemeProvider>\n\t);\n}\n\nconst FONT_SIZE = 'tiny';\n\nconst Form = ( {\n\tinitialValues,\n\thandleSave,\n\tisSubmitting,\n\tclosePopup,\n}: {\n\tinitialValues: ComponentFormValues;\n\thandleSave: ( values: ComponentFormValues ) => void;\n\tisSubmitting: boolean;\n\tclosePopup: () => void;\n} ) => {\n\tconst { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );\n\n\tconst { data: components } = useComponents();\n\n\tconst existingComponentNames = useMemo( () => {\n\t\treturn components?.map( ( component ) => component.name ) ?? [];\n\t}, [ components ] );\n\n\tconst changeValidationSchema = useMemo(\n\t\t() => createBaseComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\tconst submitValidationSchema = useMemo(\n\t\t() => createSubmitComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\n\tconst handleSubmit = () => {\n\t\tconst { success, parsedValues } = validateForm( submitValidationSchema );\n\n\t\tif ( success ) {\n\t\t\thandleSave( parsedValues );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Stack alignItems=\"start\" width=\"268px\">\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talignItems=\"center\"\n\t\t\t\tpy={ 1 }\n\t\t\t\tpx={ 1.5 }\n\t\t\t\tsx={ { columnGap: 0.5, borderBottom: '1px solid', borderColor: 'divider', width: '100%' } }\n\t\t\t>\n\t\t\t\t<StarIcon fontSize={ FONT_SIZE } />\n\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>\n\t\t\t\t\t{ __( 'Save as a component', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Stack>\n\t\t\t<Grid container gap={ 0.75 } alignItems=\"start\" p={ 1.5 }>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<FormLabel htmlFor={ 'component-name' } size=\"tiny\">\n\t\t\t\t\t\t{ __( 'Name', 'elementor' ) }\n\t\t\t\t\t</FormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tid={ 'component-name' }\n\t\t\t\t\t\tsize={ FONT_SIZE }\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tvalue={ values.componentName }\n\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>\n\t\t\t\t\t\t\thandleChange( e, 'componentName', changeValidationSchema )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinputProps={ { style: { color: 'text.primary', fontWeight: '600' } } }\n\t\t\t\t\t\terror={ Boolean( errors.componentName ) }\n\t\t\t\t\t\thelperText={ errors.componentName }\n\t\t\t\t\t/>\n\t\t\t\t</Grid>\n\t\t\t</Grid>\n\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" alignSelf=\"end\" py={ 1 } px={ 1.5 }>\n\t\t\t\t<Button onClick={ closePopup } disabled={ isSubmitting } color=\"secondary\" variant=\"text\" size=\"small\">\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ handleSubmit }\n\t\t\t\t\tdisabled={ isSubmitting || ! isValid }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t{ isSubmitting ? __( 'Creating…', 'elementor' ) : __( 'Create', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import { useMutation, useQueryClient } from '@elementor/query';\n\nimport { apiClient } from '../api';\nimport { COMPONENTS_QUERY_KEY } from './use-components';\n\nexport const useCreateComponentMutation = () => {\n\tconst queryClient = useQueryClient();\n\n\treturn useMutation( {\n\t\tmutationFn: apiClient.create,\n\t\tonSuccess: () => queryClient.invalidateQueries( { queryKey: [ COMPONENTS_QUERY_KEY ] } ),\n\t} );\n};\n","import { useMemo, useState } from 'react';\nimport { type z } from '@elementor/schema';\n\nexport const useForm = < TValues extends Record< string, unknown > >( initialValues: TValues ) => {\n\tconst [ values, setValues ] = useState< TValues >( initialValues );\n\tconst [ errors, setErrors ] = useState< Partial< Record< keyof TValues, string > > >( {} );\n\n\tconst isValid = useMemo( () => {\n\t\treturn ! Object.values( errors ).some( ( error ) => error );\n\t}, [ errors ] );\n\n\tconst handleChange = (\n\t\te: React.ChangeEvent< HTMLInputElement >,\n\t\tfield: keyof TValues,\n\t\tvalidationSchema: z.ZodType< TValues >\n\t) => {\n\t\tconst updated = { ...values, [ field ]: e.target.value };\n\t\tsetValues( updated );\n\n\t\tconst { success, errors: validationErrors } = validateForm( updated, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t} else {\n\t\t\tsetErrors( {} );\n\t\t}\n\t};\n\n\tconst validate = (\n\t\tvalidationSchema: z.ZodType< TValues >\n\t): { success: true; parsedValues: TValues } | { success: false; parsedValues?: never } => {\n\t\tconst { success, errors: validationErrors, parsedValues } = validateForm( values, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t\treturn { success };\n\t\t}\n\t\tsetErrors( {} );\n\t\treturn { success, parsedValues };\n\t};\n\n\treturn {\n\t\tvalues,\n\t\terrors,\n\t\tisValid,\n\t\thandleChange,\n\t\tvalidateForm: validate,\n\t};\n};\n\nconst validateForm = < TValues extends Record< string, unknown > >(\n\tvalues: TValues,\n\tschema: z.ZodType< TValues >\n):\n\t| { success: false; parsedValues?: never; errors: Partial< Record< keyof TValues, string > > }\n\t| { success: true; parsedValues: TValues; errors?: never } => {\n\tconst result = schema.safeParse( values );\n\n\tif ( result.success ) {\n\t\treturn { success: true, parsedValues: result.data };\n\t}\n\n\tconst errors = {} as Partial< Record< keyof TValues, string > >;\n\n\t( Object.entries( result.error.formErrors.fieldErrors ) as Array< [ keyof TValues, string[] ] > ).forEach(\n\t\t( [ field, error ] ) => {\n\t\t\terrors[ field ] = error[ 0 ];\n\t\t}\n\t);\n\n\treturn { success: false, errors };\n};\n","import { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nconst MIN_NAME_LENGTH = 2;\nconst MAX_NAME_LENGTH = 50;\n\nexport const createBaseComponentSchema = ( existingNames: string[] ) => {\n\treturn z.object( {\n\t\tcomponentName: z\n\t\t\t.string()\n\t\t\t.trim()\n\t\t\t.max(\n\t\t\t\tMAX_NAME_LENGTH,\n\t\t\t\t__( 'Component name is too long. Please keep it under 50 characters.', 'elementor' )\n\t\t\t)\n\t\t\t.refine( ( value ) => ! existingNames.includes( value ), {\n\t\t\t\tmessage: __( 'Component name already exists', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n\nexport const createSubmitComponentSchema = ( existingNames: string[] ) => {\n\tconst baseSchema = createBaseComponentSchema( existingNames );\n\n\treturn baseSchema.extend( {\n\t\tcomponentName: baseSchema.shape.componentName\n\t\t\t.refine( ( value ) => value.length > 0, {\n\t\t\t\tmessage: __( 'Component name is required.', 'elementor' ),\n\t\t\t} )\n\t\t\t.refine( ( value ) => value.length >= MIN_NAME_LENGTH, {\n\t\t\t\tmessage: __( 'Component name is too short. Please enter at least 2 characters.', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n"],"mappings":"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","names":["import_i18n","import_editor_elements","import_editor_elements","React","import_react","import_editor_elements","import_ui","import_i18n","import_query","validateForm"]}
+{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/components.tsx","../src/components/components-list.tsx","../src/hooks/use-components.ts","../src/api.ts","../src/components/components-item.tsx","../src/utils/get-container-for-new-element.ts","../src/components/create-component-form/utils/replace-element-with-component.ts","../src/components/loading-components.tsx","../src/components/create-component-form/create-component-form.tsx","../src/hooks/use-create-component.ts","../src/components/create-component-form/hooks/use-form.ts","../src/components/create-component-form/utils/component-form-schema.ts"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\nimport { injectTab } from '@elementor/editor-elements-panel';\nimport { __ } from '@wordpress/i18n';\n\nimport { Components } from './components/components';\nimport { CreateComponentForm } from './components/create-component-form/create-component-form';\n\nexport function init() {\n\tinjectTab( {\n\t\tid: 'components',\n\t\tlabel: __( 'Components', 'elementor' ),\n\t\tcomponent: Components,\n\t} );\n\n\tinjectIntoTop( {\n\t\tid: 'create-component-popup',\n\t\tcomponent: CreateComponentForm,\n\t} );\n}\n","import * as React from 'react';\nimport { ThemeProvider } from '@elementor/editor-ui';\n\nimport { ComponentsList } from './components-list';\n\nexport const Components = () => {\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<ComponentsList />\n\t\t</ThemeProvider>\n\t);\n};\n","import * as React from 'react';\nimport { EyeIcon } from '@elementor/icons';\nimport { Divider, Icon, List, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { useComponents } from '../hooks/use-components';\nimport { ComponentItem } from './components-item';\nimport { LoadingComponents } from './loading-components';\n\nexport function ComponentsList() {\n\tconst { data: components, isLoading } = useComponents();\n\n\tif ( isLoading ) {\n\t\treturn <LoadingComponents />;\n\t}\n\n\tif ( ! components || components.length === 0 ) {\n\t\treturn <EmptyState />;\n\t}\n\n\treturn (\n\t\t<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5, px: 2 } }>\n\t\t\t{ components?.map( ( component ) => <ComponentItem key={ component.id } component={ component } /> ) }\n\t\t</List>\n\t);\n}\n\nconst EmptyState = () => {\n\treturn (\n\t\t<Stack\n\t\t\talignItems=\"center\"\n\t\t\tjustifyContent=\"center\"\n\t\t\theight=\"100%\"\n\t\t\tsx={ { px: 2.5, pt: 10 } }\n\t\t\tgap={ 1.75 }\n\t\t\toverflow=\"hidden\"\n\t\t>\n\t\t\t<Icon fontSize=\"large\">\n\t\t\t\t<EyeIcon fontSize=\"large\" />\n\t\t\t</Icon>\n\t\t\t<Typography align=\"center\" variant=\"subtitle2\" color=\"text.secondary\" fontWeight=\"bold\">\n\t\t\t\t{ __( 'Text that explains that there are no Components yet.', 'elementor' ) }\n\t\t\t</Typography>\n\t\t\t<Typography variant=\"caption\" align=\"center\" color=\"text.secondary\">\n\t\t\t\t{ __(\n\t\t\t\t\t'Once you have Components, this is where you can manage them—rearrange, duplicate, rename and delete irrelevant classes.',\n\t\t\t\t\t'elementor'\n\t\t\t\t) }\n\t\t\t</Typography>\n\t\t\t<Divider sx={ { width: '100%' } } color=\"text.secondary\" />\n\t\t\t<Typography align=\"left\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t\t{ __( 'To create a component, first design it, then choose one of three options:', 'elementor' ) }\n\t\t\t</Typography>\n\t\t\t<Typography\n\t\t\t\talign=\"left\"\n\t\t\t\tvariant=\"caption\"\n\t\t\t\tcolor=\"text.secondary\"\n\t\t\t\tsx={ { display: 'flex', flexDirection: 'column' } }\n\t\t\t>\n\t\t\t\t<span>{ __( '1. Right-click and select Create Component', 'elementor' ) }</span>\n\t\t\t\t<span>{ __( '2. Use the component icon in the Structure panel', 'elementor' ) }</span>\n\t\t\t\t<span>{ __( '3. Use the component icon in the Edit panel header', 'elementor' ) }</span>\n\t\t\t</Typography>\n\t\t</Stack>\n\t);\n};\n","import { useQuery } from '@elementor/query';\n\nimport { apiClient } from '../api';\n\nexport const COMPONENTS_QUERY_KEY = 'components';\n\nexport const useComponents = () => {\n\treturn useQuery( {\n\t\tqueryKey: [ COMPONENTS_QUERY_KEY ],\n\t\tqueryFn: apiClient.get,\n\t\tstaleTime: Infinity,\n\t} );\n};\n","import { type V1ElementModelProps } from '@elementor/editor-elements';\nimport { type HttpResponse, httpService } from '@elementor/http-client';\n\nimport { type Component } from './types';\n\nconst BASE_URL = 'elementor/v1/components';\n\ntype CreateComponentPayload = {\n\tname: string;\n\tcontent: V1ElementModelProps[];\n};\n\ntype GetComponentResponse = Array< Component >;\n\nexport type CreateComponentResponse = {\n\tcomponent_id: number;\n};\n\nexport const apiClient = {\n\tget: () =>\n\t\thttpService()\n\t\t\t.get< HttpResponse< GetComponentResponse > >( `${ BASE_URL }` )\n\t\t\t.then( ( res ) => res.data.data ),\n\tcreate: ( payload: CreateComponentPayload ) =>\n\t\thttpService()\n\t\t\t.post< HttpResponse< CreateComponentResponse > >( `${ BASE_URL }`, payload )\n\t\t\t.then( ( res ) => res.data.data ),\n};\n","import * as React from 'react';\nimport { dropElement } from '@elementor/editor-elements';\nimport { MenuListItem } from '@elementor/editor-ui';\nimport { DotsVerticalIcon, EyeIcon } from '@elementor/icons';\nimport {\n\tbindMenu,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tListItemButton,\n\tListItemIcon,\n\tListItemText,\n\tMenu,\n\tTypography,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type Component } from '../types';\nimport { getContainerForNewElement } from '../utils/get-container-for-new-element';\nimport { createComponentModel } from './create-component-form/utils/replace-element-with-component';\n\nexport const ComponentItem = ( { component }: { component: Component } ) => {\n\tconst popupState = usePopupState( {\n\t\tvariant: 'popover',\n\t\tdisableAutoFocus: true,\n\t} );\n\n\tconst handleClick = () => {\n\t\taddComponentToPage( component );\n\t};\n\n\treturn (\n\t\t<ListItemButton shape=\"rounded\" sx={ { border: 'solid 1px', borderColor: 'divider', py: 0.5, px: 1 } }>\n\t\t\t<Box sx={ { display: 'flex', width: '100%', alignItems: 'center', gap: 1 } } onClick={ handleClick }>\n\t\t\t\t<ListItemIcon size=\"tiny\">\n\t\t\t\t\t<EyeIcon fontSize=\"tiny\" />\n\t\t\t\t</ListItemIcon>\n\t\t\t\t<ListItemText\n\t\t\t\t\tprimary={\n\t\t\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary' } }>\n\t\t\t\t\t\t\t{ component.name }\n\t\t\t\t\t\t</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</Box>\n\t\t\t<IconButton size=\"tiny\" aria-label=\"More actions\" { ...bindTrigger( popupState ) }>\n\t\t\t\t<DotsVerticalIcon fontSize=\"tiny\" />\n\t\t\t</IconButton>\n\t\t\t<Menu\n\t\t\t\t{ ...bindMenu( popupState ) }\n\t\t\t\tanchorOrigin={ {\n\t\t\t\t\tvertical: 'bottom',\n\t\t\t\t\thorizontal: 'right',\n\t\t\t\t} }\n\t\t\t\ttransformOrigin={ {\n\t\t\t\t\tvertical: 'top',\n\t\t\t\t\thorizontal: 'right',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<MenuListItem sx={ { minWidth: '160px' } }>\n\t\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary' } }>\n\t\t\t\t\t\t{ __( 'Rename', 'elementor' ) }\n\t\t\t\t\t</Typography>\n\t\t\t\t</MenuListItem>\n\t\t\t\t<MenuListItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'error.light' } }>\n\t\t\t\t\t\t{ __( 'Delete', 'elementor' ) }\n\t\t\t\t\t</Typography>\n\t\t\t\t</MenuListItem>\n\t\t\t</Menu>\n\t\t</ListItemButton>\n\t);\n};\n\nconst addComponentToPage = ( component: Component ) => {\n\tconst { container, options } = getContainerForNewElement();\n\tconst model = createComponentModel( component );\n\n\tif ( ! container ) {\n\t\tthrow new Error( `Can't find container to drop new component instance at` );\n\t}\n\n\tdropElement( {\n\t\tcontainerId: container.id,\n\t\tmodel,\n\t\toptions: { ...options, useHistory: false, scrollIntoView: true },\n\t} );\n};\n","import {\n\tgetContainer,\n\tgetCurrentDocumentContainer,\n\tgetSelectedElements,\n\ttype V1Element,\n} from '@elementor/editor-elements';\n\nexport const getContainerForNewElement = (): { container: V1Element | null; options?: { at: number } } => {\n\tconst currentDocumentContainer = getCurrentDocumentContainer();\n\tconst selectedElement = getSelectedElementContainer();\n\n\tlet container, options;\n\n\tif ( selectedElement ) {\n\t\tswitch ( selectedElement.model.get( 'elType' ) ) {\n\t\t\tcase 'widget': {\n\t\t\t\tcontainer = selectedElement?.parent;\n\n\t\t\t\tconst selectedElIndex = selectedElement.view?._index ?? -1;\n\n\t\t\t\tif ( selectedElIndex > -1 ) {\n\t\t\t\t\toptions = { at: selectedElIndex + 1 };\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'section': {\n\t\t\t\tcontainer = selectedElement?.children?.[ 0 ];\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tcontainer = selectedElement;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn { container: container ?? currentDocumentContainer, options };\n};\n\nfunction getSelectedElementContainer() {\n\tconst selectedElements = getSelectedElements();\n\n\tif ( selectedElements.length !== 1 ) {\n\t\treturn undefined;\n\t}\n\n\treturn getContainer( selectedElements[ 0 ].id );\n}\n","import { replaceElement, type V1Element } from '@elementor/editor-elements';\nimport { numberPropTypeUtil } from '@elementor/editor-props';\n\nimport { type Component } from '../../../types';\n\nexport const replaceElementWithComponent = async ( element: V1Element, component: Component ) => {\n\treplaceElement( {\n\t\tcurrentElement: element,\n\t\tnewElement: createComponentModel( component ),\n\t\twithHistory: false,\n\t} );\n};\n\nexport const createComponentModel = ( component: Component ) => {\n\treturn {\n\t\telType: 'widget',\n\t\twidgetType: 'e-component',\n\t\tsettings: {\n\t\t\tcomponent_id: numberPropTypeUtil.create( component.id ),\n\t\t},\n\t\teditor_settings: {\n\t\t\ttitle: component.name,\n\t\t},\n\t};\n};\n","import * as React from 'react';\nimport { Box, ListItemButton, Skeleton, Stack } from '@elementor/ui';\nconst ROWS_COUNT = 6;\n\nconst rows = Array.from( { length: ROWS_COUNT }, ( _, index ) => index );\n\nexport const LoadingComponents = () => {\n\treturn (\n\t\t<Stack\n\t\t\taria-label=\"Loading components\"\n\t\t\tgap={ 1 }\n\t\t\tsx={ {\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\tposition: 'relative',\n\t\t\t\tmaxHeight: '300px',\n\t\t\t\toverflow: 'hidden',\n\t\t\t\t'&:after': {\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tcontent: '\"\"',\n\t\t\t\t\tleft: 0,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\theight: '300px',\n\t\t\t\t\tbackground: 'linear-gradient(to top, white, transparent)',\n\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t},\n\t\t\t} }\n\t\t>\n\t\t\t{ rows.map( ( row ) => (\n\t\t\t\t<ListItemButton\n\t\t\t\t\tkey={ row }\n\t\t\t\t\tsx={ { border: 'solid 1px', borderColor: 'divider', py: 0.5, px: 1 } }\n\t\t\t\t\tshape=\"rounded\"\n\t\t\t\t>\n\t\t\t\t\t<Box display=\"flex\" gap={ 1 } width=\"100%\">\n\t\t\t\t\t\t<Skeleton variant=\"text\" width={ '24px' } height={ '36px' } />\n\t\t\t\t\t\t<Skeleton variant=\"text\" width={ '100%' } height={ '36px' } />\n\t\t\t\t\t</Box>\n\t\t\t\t</ListItemButton>\n\t\t\t) ) }\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getElementLabel, type V1Element } from '@elementor/editor-elements';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { StarIcon } from '@elementor/icons';\nimport { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { type CreateComponentResponse } from '../../api';\nimport { useComponents } from '../../hooks/use-components';\nimport { useCreateComponentMutation } from '../../hooks/use-create-component';\nimport { type ComponentFormValues } from '../../types';\nimport { useForm } from './hooks/use-form';\nimport { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';\nimport { replaceElementWithComponent } from './utils/replace-element-with-component';\n\ntype SaveAsComponentEventData = {\n\telement: V1Element;\n\tanchorPosition: { top: number; left: number };\n};\n\ntype ResultNotification = {\n\tshow: boolean;\n\tmessage: string;\n\ttype: 'success' | 'error';\n};\n\nexport function CreateComponentForm() {\n\tconst [ element, setElement ] = useState< {\n\t\telement: V1Element;\n\t\telementLabel: string;\n\t} | null >( null );\n\n\tconst [ anchorPosition, setAnchorPosition ] = useState< { top: number; left: number } >();\n\n\tconst [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );\n\n\tconst { mutate: createComponent, isPending } = useCreateComponentMutation();\n\n\tuseEffect( () => {\n\t\tconst OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';\n\n\t\tconst openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {\n\t\t\tsetElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );\n\t\t\tsetAnchorPosition( event.detail.anchorPosition );\n\t\t};\n\n\t\twindow.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );\n\t\t};\n\t}, [] );\n\n\tconst handleSave = async ( values: ComponentFormValues ) => {\n\t\tif ( ! element ) {\n\t\t\tthrow new Error( `Can't save element as component: element not found` );\n\t\t}\n\n\t\tcreateComponent(\n\t\t\t{\n\t\t\t\tname: values.componentName,\n\t\t\t\tcontent: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],\n\t\t\t},\n\t\t\t{\n\t\t\t\tonSuccess: ( result: CreateComponentResponse ) => {\n\t\t\t\t\tif ( ! element ) {\n\t\t\t\t\t\tthrow new Error( `Can't replace element with component: element not found` );\n\t\t\t\t\t}\n\n\t\t\t\t\treplaceElementWithComponent( element.element, {\n\t\t\t\t\t\tid: result.component_id,\n\t\t\t\t\t\tname: values.componentName,\n\t\t\t\t\t} );\n\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\t// Translators: %1$s: Component name, %2$s: Component ID\n\t\t\t\t\t\tmessage: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )\n\t\t\t\t\t\t\t.replace( '%1$s', values.componentName )\n\t\t\t\t\t\t\t.replace( '%2$s', result.component_id.toString() ),\n\t\t\t\t\t\ttype: 'success',\n\t\t\t\t\t} );\n\n\t\t\t\t\tresetAndClosePopup();\n\t\t\t\t},\n\t\t\t\tonError: () => {\n\t\t\t\t\tconst errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );\n\t\t\t\t\tsetResultNotification( {\n\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\tmessage: errorMessage,\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t} );\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t};\n\n\tconst resetAndClosePopup = () => {\n\t\tsetElement( null );\n\t\tsetAnchorPosition( undefined );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Popover\n\t\t\t\topen={ element !== null }\n\t\t\t\tonClose={ resetAndClosePopup }\n\t\t\t\tanchorReference=\"anchorPosition\"\n\t\t\t\tanchorPosition={ anchorPosition }\n\t\t\t>\n\t\t\t\t{ element !== null && (\n\t\t\t\t\t<Form\n\t\t\t\t\t\tinitialValues={ { componentName: element.elementLabel } }\n\t\t\t\t\t\thandleSave={ handleSave }\n\t\t\t\t\t\tisSubmitting={ isPending }\n\t\t\t\t\t\tclosePopup={ resetAndClosePopup }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Popover>\n\t\t\t<Snackbar open={ resultNotification?.show } onClose={ () => setResultNotification( null ) }>\n\t\t\t\t<Alert\n\t\t\t\t\tonClose={ () => setResultNotification( null ) }\n\t\t\t\t\tseverity={ resultNotification?.type }\n\t\t\t\t\tsx={ { width: '100%' } }\n\t\t\t\t>\n\t\t\t\t\t{ resultNotification?.message }\n\t\t\t\t</Alert>\n\t\t\t</Snackbar>\n\t\t</ThemeProvider>\n\t);\n}\n\nconst FONT_SIZE = 'tiny';\n\nconst Form = ( {\n\tinitialValues,\n\thandleSave,\n\tisSubmitting,\n\tclosePopup,\n}: {\n\tinitialValues: ComponentFormValues;\n\thandleSave: ( values: ComponentFormValues ) => void;\n\tisSubmitting: boolean;\n\tclosePopup: () => void;\n} ) => {\n\tconst { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );\n\n\tconst { data: components } = useComponents();\n\n\tconst existingComponentNames = useMemo( () => {\n\t\treturn components?.map( ( component ) => component.name ) ?? [];\n\t}, [ components ] );\n\n\tconst changeValidationSchema = useMemo(\n\t\t() => createBaseComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\tconst submitValidationSchema = useMemo(\n\t\t() => createSubmitComponentSchema( existingComponentNames ),\n\t\t[ existingComponentNames ]\n\t);\n\n\tconst handleSubmit = () => {\n\t\tconst { success, parsedValues } = validateForm( submitValidationSchema );\n\n\t\tif ( success ) {\n\t\t\thandleSave( parsedValues );\n\t\t}\n\t};\n\n\treturn (\n\t\t<Stack alignItems=\"start\" width=\"268px\">\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\talignItems=\"center\"\n\t\t\t\tpy={ 1 }\n\t\t\t\tpx={ 1.5 }\n\t\t\t\tsx={ { columnGap: 0.5, borderBottom: '1px solid', borderColor: 'divider', width: '100%' } }\n\t\t\t>\n\t\t\t\t<StarIcon fontSize={ FONT_SIZE } />\n\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary', fontWeight: '500', lineHeight: 1 } }>\n\t\t\t\t\t{ __( 'Save as a component', 'elementor' ) }\n\t\t\t\t</Typography>\n\t\t\t</Stack>\n\t\t\t<Grid container gap={ 0.75 } alignItems=\"start\" p={ 1.5 }>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<FormLabel htmlFor={ 'component-name' } size=\"tiny\">\n\t\t\t\t\t\t{ __( 'Name', 'elementor' ) }\n\t\t\t\t\t</FormLabel>\n\t\t\t\t</Grid>\n\t\t\t\t<Grid item xs={ 12 }>\n\t\t\t\t\t<TextField\n\t\t\t\t\t\tid={ 'component-name' }\n\t\t\t\t\t\tsize={ FONT_SIZE }\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\tvalue={ values.componentName }\n\t\t\t\t\t\tonChange={ ( e: React.ChangeEvent< HTMLInputElement > ) =>\n\t\t\t\t\t\t\thandleChange( e, 'componentName', changeValidationSchema )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinputProps={ { style: { color: 'text.primary', fontWeight: '600' } } }\n\t\t\t\t\t\terror={ Boolean( errors.componentName ) }\n\t\t\t\t\t\thelperText={ errors.componentName }\n\t\t\t\t\t/>\n\t\t\t\t</Grid>\n\t\t\t</Grid>\n\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" alignSelf=\"end\" py={ 1 } px={ 1.5 }>\n\t\t\t\t<Button onClick={ closePopup } disabled={ isSubmitting } color=\"secondary\" variant=\"text\" size=\"small\">\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ handleSubmit }\n\t\t\t\t\tdisabled={ isSubmitting || ! isValid }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t{ isSubmitting ? __( 'Creating…', 'elementor' ) : __( 'Create', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import { useMutation, useQueryClient } from '@elementor/query';\n\nimport { apiClient } from '../api';\nimport { COMPONENTS_QUERY_KEY } from './use-components';\n\nexport const useCreateComponentMutation = () => {\n\tconst queryClient = useQueryClient();\n\n\treturn useMutation( {\n\t\tmutationFn: apiClient.create,\n\t\tonSuccess: () => queryClient.invalidateQueries( { queryKey: [ COMPONENTS_QUERY_KEY ] } ),\n\t} );\n};\n","import { useMemo, useState } from 'react';\nimport { type z } from '@elementor/schema';\n\nexport const useForm = < TValues extends Record< string, unknown > >( initialValues: TValues ) => {\n\tconst [ values, setValues ] = useState< TValues >( initialValues );\n\tconst [ errors, setErrors ] = useState< Partial< Record< keyof TValues, string > > >( {} );\n\n\tconst isValid = useMemo( () => {\n\t\treturn ! Object.values( errors ).some( ( error ) => error );\n\t}, [ errors ] );\n\n\tconst handleChange = (\n\t\te: React.ChangeEvent< HTMLInputElement >,\n\t\tfield: keyof TValues,\n\t\tvalidationSchema: z.ZodType< TValues >\n\t) => {\n\t\tconst updated = { ...values, [ field ]: e.target.value };\n\t\tsetValues( updated );\n\n\t\tconst { success, errors: validationErrors } = validateForm( updated, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t} else {\n\t\t\tsetErrors( {} );\n\t\t}\n\t};\n\n\tconst validate = (\n\t\tvalidationSchema: z.ZodType< TValues >\n\t): { success: true; parsedValues: TValues } | { success: false; parsedValues?: never } => {\n\t\tconst { success, errors: validationErrors, parsedValues } = validateForm( values, validationSchema );\n\n\t\tif ( ! success ) {\n\t\t\tsetErrors( validationErrors );\n\t\t\treturn { success };\n\t\t}\n\t\tsetErrors( {} );\n\t\treturn { success, parsedValues };\n\t};\n\n\treturn {\n\t\tvalues,\n\t\terrors,\n\t\tisValid,\n\t\thandleChange,\n\t\tvalidateForm: validate,\n\t};\n};\n\nconst validateForm = < TValues extends Record< string, unknown > >(\n\tvalues: TValues,\n\tschema: z.ZodType< TValues >\n):\n\t| { success: false; parsedValues?: never; errors: Partial< Record< keyof TValues, string > > }\n\t| { success: true; parsedValues: TValues; errors?: never } => {\n\tconst result = schema.safeParse( values );\n\n\tif ( result.success ) {\n\t\treturn { success: true, parsedValues: result.data };\n\t}\n\n\tconst errors = {} as Partial< Record< keyof TValues, string > >;\n\n\t( Object.entries( result.error.formErrors.fieldErrors ) as Array< [ keyof TValues, string[] ] > ).forEach(\n\t\t( [ field, error ] ) => {\n\t\t\terrors[ field ] = error[ 0 ];\n\t\t}\n\t);\n\n\treturn { success: false, errors };\n};\n","import { z } from '@elementor/schema';\nimport { __ } from '@wordpress/i18n';\n\nconst MIN_NAME_LENGTH = 2;\nconst MAX_NAME_LENGTH = 50;\n\nexport const createBaseComponentSchema = ( existingNames: string[] ) => {\n\treturn z.object( {\n\t\tcomponentName: z\n\t\t\t.string()\n\t\t\t.trim()\n\t\t\t.max(\n\t\t\t\tMAX_NAME_LENGTH,\n\t\t\t\t__( 'Component name is too long. Please keep it under 50 characters.', 'elementor' )\n\t\t\t)\n\t\t\t.refine( ( value ) => ! existingNames.includes( value ), {\n\t\t\t\tmessage: __( 'Component name already exists', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n\nexport const createSubmitComponentSchema = ( existingNames: string[] ) => {\n\tconst baseSchema = createBaseComponentSchema( existingNames );\n\n\treturn baseSchema.extend( {\n\t\tcomponentName: baseSchema.shape.componentName\n\t\t\t.refine( ( value ) => value.length > 0, {\n\t\t\t\tmessage: __( 'Component name is required.', 'elementor' ),\n\t\t\t} )\n\t\t\t.refine( ( value ) => value.length >= MIN_NAME_LENGTH, {\n\t\t\t\tmessage: __( 'Component name is too short. Please enter at least 2 characters.', 'elementor' ),\n\t\t\t} ),\n\t} );\n};\n"],"mappings":"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","names":["import_i18n","React","import_editor_ui","React","import_icons","import_ui","import_i18n","import_editor_elements","import_editor_elements","React","import_ui","React","import_react","import_editor_elements","import_editor_ui","import_icons","import_ui","import_i18n","import_query","import_i18n","validateForm"]}