@elementor/editor-ui 0.5.1 → 0.7.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-ui@0.5.1 build
+> @elementor/editor-ui@0.7.1 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     7.57 KB
-ESM dist/index.mjs.map 14.92 KB
-ESM ⚡️ Build success in 149ms
-CJS dist/index.js     9.64 KB
-CJS dist/index.js.map 15.26 KB
-CJS ⚡️ Build success in 135ms
+CJS dist/index.js     10.74 KB
+CJS dist/index.js.map 17.26 KB
+CJS ⚡️ Build success in 121ms
+ESM dist/index.mjs     8.64 KB
+ESM dist/index.mjs.map 16.93 KB
+ESM ⚡️ Build success in 122ms
 DTS Build start
-DTS ⚡️ Build success in 17237ms
-DTS dist/index.d.mts 2.09 KB
-DTS dist/index.d.ts  2.09 KB
+DTS ⚡️ Build success in 18858ms
+DTS dist/index.d.mts 2.41 KB
+DTS dist/index.d.ts  2.41 KB

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @elementor/editor-ui
 
+## 0.7.1
+
+### Patch Changes
+
+- 044815b: Fix introduction modal transition.
+
+## 0.7.0
+
+### Minor Changes
+
+- f644084: Added a "take me there" button in link-in-link restriction info-tip
+
+## 0.6.0
+
+### Minor Changes
+
+- fdfc87a: Classes and selector UI updates.
+- 548209b: Add link restriction infotip
+
 ## 0.5.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as React$1 from 'react';
+import { ReactNode } from 'react';
 import { MenuItemProps } from '@elementor/ui';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -10,17 +11,12 @@ declare const EllipsisWithTooltip: <T extends React$1.ElementType>({ maxWidth, t
 
 declare const EditableField: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
 
-type IntroductionModalProps = {
+type IntroductionModalProps = React$1.PropsWithChildren<{
     open: boolean;
     handleClose: (shouldShowAgain: boolean) => void;
     title?: string;
-    content: React$1.ReactNode;
-    image?: {
-        src: string;
-        alt: string;
-    };
-};
-declare const IntroductionModal: ({ open, handleClose, title, content, image }: IntroductionModalProps) => React$1.JSX.Element;
+}>;
+declare const IntroductionModal: ({ open, handleClose, title, children }: IntroductionModalProps) => React$1.JSX.Element;
 
 declare function ThemeProvider({ children }: {
     children: React$1.ReactNode;
@@ -28,6 +24,20 @@ declare function ThemeProvider({ children }: {
 
 declare const MenuListItem: ({ children, ...props }: MenuItemProps) => React$1.JSX.Element;
 
+type InfoTipCardProps = {
+    content: ReactNode;
+    svgIcon: ReactNode;
+    learnMoreButton?: {
+        label: string;
+        href: string;
+    };
+    ctaButton?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+declare const InfoTipCard: ({ content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps) => React$1.JSX.Element;
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -53,4 +63,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick }: UseEditabl
     };
 };
 
-export { EditableField, EllipsisWithTooltip, IntroductionModal, MenuListItem, ThemeProvider, useEditable };
+export { EditableField, EllipsisWithTooltip, InfoTipCard, IntroductionModal, MenuListItem, ThemeProvider, useEditable };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as React$1 from 'react';
+import { ReactNode } from 'react';
 import { MenuItemProps } from '@elementor/ui';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
@@ -10,17 +11,12 @@ declare const EllipsisWithTooltip: <T extends React$1.ElementType>({ maxWidth, t
 
 declare const EditableField: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
 
-type IntroductionModalProps = {
+type IntroductionModalProps = React$1.PropsWithChildren<{
     open: boolean;
     handleClose: (shouldShowAgain: boolean) => void;
     title?: string;
-    content: React$1.ReactNode;
-    image?: {
-        src: string;
-        alt: string;
-    };
-};
-declare const IntroductionModal: ({ open, handleClose, title, content, image }: IntroductionModalProps) => React$1.JSX.Element;
+}>;
+declare const IntroductionModal: ({ open, handleClose, title, children }: IntroductionModalProps) => React$1.JSX.Element;
 
 declare function ThemeProvider({ children }: {
     children: React$1.ReactNode;
@@ -28,6 +24,20 @@ declare function ThemeProvider({ children }: {
 
 declare const MenuListItem: ({ children, ...props }: MenuItemProps) => React$1.JSX.Element;
 
+type InfoTipCardProps = {
+    content: ReactNode;
+    svgIcon: ReactNode;
+    learnMoreButton?: {
+        label: string;
+        href: string;
+    };
+    ctaButton?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+declare const InfoTipCard: ({ content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps) => React$1.JSX.Element;
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -53,4 +63,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick }: UseEditabl
     };
 };
 
-export { EditableField, EllipsisWithTooltip, IntroductionModal, MenuListItem, ThemeProvider, useEditable };
+export { EditableField, EllipsisWithTooltip, InfoTipCard, IntroductionModal, MenuListItem, ThemeProvider, useEditable };

package/dist/index.js

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
+  InfoTipCard: () => InfoTipCard,
   IntroductionModal: () => IntroductionModal,
   MenuListItem: () => MenuListItem,
   ThemeProvider: () => ThemeProvider,
@@ -104,39 +105,43 @@ var React3 = __toESM(require("react"));
 var import_react3 = require("react");
 var import_ui3 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
-var OPEN_DELAY = 1e3;
-var IntroductionModal = ({ open, handleClose, title, content, image }) => {
+var IntroductionModal = ({ open, handleClose, title, children }) => {
   const [shouldShowAgain, setShouldShowAgain] = (0, import_react3.useState)(true);
-  return /* @__PURE__ */ React3.createElement(
-    import_ui3.Dialog,
+  return /* @__PURE__ */ React3.createElement(import_ui3.Dialog, { open, onClose: handleClose, maxWidth: "sm", TransitionComponent: Transition }, title && /* @__PURE__ */ React3.createElement(import_ui3.DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(import_ui3.DialogTitle, null, title)), children, /* @__PURE__ */ React3.createElement(import_ui3.DialogActions, null, /* @__PURE__ */ React3.createElement(
+    import_ui3.FormControlLabel,
     {
-      open,
-      onClose: handleClose,
-      maxWidth: "sm",
-      TransitionProps: {
-        timeout: 700,
-        style: { transitionDelay: open ? `${OPEN_DELAY}ms` : "0ms" }
-      }
+      sx: { marginRight: "auto" },
+      control: /* @__PURE__ */ React3.createElement(
+        import_ui3.Checkbox,
+        {
+          checked: !shouldShowAgain,
+          onChange: () => setShouldShowAgain(!shouldShowAgain)
+        }
+      ),
+      label: /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "body2" }, (0, import_i18n.__)("Don't show this again", "elementor"))
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    import_ui3.Button,
+    {
+      size: "medium",
+      variant: "contained",
+      sx: { minWidth: "135px" },
+      onClick: () => handleClose(shouldShowAgain)
     },
-    title && /* @__PURE__ */ React3.createElement(import_ui3.DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(import_ui3.DialogTitle, null, title)),
-    image && /* @__PURE__ */ React3.createElement(import_ui3.Image, { sx: { width: "100%" }, src: image.src, alt: image.alt }),
-    content,
-    /* @__PURE__ */ React3.createElement(import_ui3.DialogActions, null, /* @__PURE__ */ React3.createElement(
-      import_ui3.FormControlLabel,
-      {
-        sx: { marginRight: "auto" },
-        control: /* @__PURE__ */ React3.createElement(
-          import_ui3.Checkbox,
-          {
-            checked: !shouldShowAgain,
-            onChange: () => setShouldShowAgain(!shouldShowAgain)
-          }
-        ),
-        label: /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "body2" }, (0, import_i18n.__)("Don't show this again", "elementor"))
-      }
-    ), /* @__PURE__ */ React3.createElement(import_ui3.Button, { size: "medium", onClick: () => handleClose(shouldShowAgain), variant: "contained" }, (0, import_i18n.__)("Got it", "elementor")))
-  );
+    (0, import_i18n.__)("Got it", "elementor")
+  )));
 };
+var Transition = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(
+  import_ui3.Fade,
+  {
+    ref,
+    ...props,
+    timeout: {
+      enter: 1e3,
+      exit: 200
+    }
+  }
+));
 
 // src/components/theme-provider.tsx
 var React4 = __toESM(require("react"));
@@ -197,6 +202,13 @@ var MenuListItem = ({ children, ...props }) => {
   );
 };
 
+// src/components/infotip-card.tsx
+var React6 = __toESM(require("react"));
+var import_ui6 = require("@elementor/ui");
+var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
+  return /* @__PURE__ */ React6.createElement(import_ui6.Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React6.createElement(import_ui6.CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React6.createElement(import_ui6.Box, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React6.createElement(import_ui6.SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React6.createElement(import_ui6.Typography, { variant: "body2" }, content))), (ctaButton || learnMoreButton) && /* @__PURE__ */ React6.createElement(import_ui6.CardActions, null, learnMoreButton && /* @__PURE__ */ React6.createElement(import_ui6.Button, { size: "small", color: "warning", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label), ctaButton && /* @__PURE__ */ React6.createElement(import_ui6.Button, { size: "small", color: "warning", variant: "contained", onClick: ctaButton.onClick }, ctaButton.label)));
+};
+
 // src/hooks/use-editable.ts
 var import_react5 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick }) => {
@@ -293,6 +305,7 @@ var selectAll = (el) => {
 0 && (module.exports = {
   EditableField,
   EllipsisWithTooltip,
+  InfoTipCard,
   IntroductionModal,
   MenuListItem,
   ThemeProvider,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["// components\nexport { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';\nexport { EditableField } from './components/editable-field';\nexport { IntroductionModal } from './components/introduction-modal';\nexport { default as ThemeProvider } from './components/theme-provider';\nexport { MenuListItem } from './components/menu-item';\n\n// hooks\nexport { useEditable } from './hooks/use-editable';\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFormControlLabel,\n\tImage,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n\tcontent: React.ReactNode;\n\timage?: {\n\t\tsrc: string;\n\t\talt: string;\n\t};\n};\n\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content, image }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog\n\t\t\topen={ open }\n\t\t\tonClose={ handleClose }\n\t\t\tmaxWidth={ 'sm' }\n\t\t\tTransitionProps={ {\n\t\t\t\ttimeout: 700,\n\t\t\t\tstyle: { transitionDelay: open ? `${ OPEN_DELAY }ms` : '0ms' },\n\t\t\t} }\n\t\t>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ image && <Image sx={ { width: '100%' } } src={ image.src } alt={ image.alt } /> }\n\t\t\t{ content }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button size={ 'medium' } onClick={ () => handleClose( shouldShowAgain ) } variant=\"contained\">\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tsetError( isDirty( newValue ) ? validation( newValue ) : null );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","import_react","import_ui","React","import_react","import_ui","React","import_ui","import_react","listenTo","ThemeProviderBase","React","import_ui","import_react"]}
+{"version":3,"sources":["../src/index.ts","../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/components/infotip-card.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["// components\nexport { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';\nexport { EditableField } from './components/editable-field';\nexport { IntroductionModal } from './components/introduction-modal';\nexport { default as ThemeProvider } from './components/theme-provider';\nexport { MenuListItem } from './components/menu-item';\nexport { InfoTipCard } from './components/infotip-card';\n\n// hooks\nexport { useEditable } from './hooks/use-editable';\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFade,\n\ttype FadeProps,\n\tFormControlLabel,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = React.PropsWithChildren< {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n} >;\n\nexport const IntroductionModal = ( { open, handleClose, title, children }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' } TransitionComponent={ Transition }>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tsize={ 'medium' }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tsx={ { minWidth: '135px' } }\n\t\t\t\t\tonClick={ () => handleClose( shouldShowAgain ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nconst Transition = React.forwardRef( ( props: FadeProps, ref: React.Ref< unknown > ) => (\n\t<Fade\n\t\tref={ ref }\n\t\t{ ...props }\n\t\ttimeout={ {\n\t\t\tenter: 1000,\n\t\t\texit: 200,\n\t\t} }\n\t/>\n) );\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n","import * as React from 'react';\nimport { type ReactNode } from 'react';\nimport { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';\n\ntype InfoTipCardProps = {\n\tcontent: ReactNode;\n\tsvgIcon: ReactNode;\n\tlearnMoreButton?: {\n\t\tlabel: string;\n\t\thref: string;\n\t};\n\tctaButton?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\nexport const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps ) => {\n\treturn (\n\t\t<Card elevation={ 0 } sx={ { width: 320 } }>\n\t\t\t<CardContent sx={ { pb: 0 } }>\n\t\t\t\t<Box display=\"flex\" alignItems=\"start\">\n\t\t\t\t\t<SvgIcon fontSize=\"tiny\" sx={ { mr: 0.5 } }>\n\t\t\t\t\t\t{ svgIcon }\n\t\t\t\t\t</SvgIcon>\n\t\t\t\t\t<Typography variant=\"body2\">{ content }</Typography>\n\t\t\t\t</Box>\n\t\t\t</CardContent>\n\n\t\t\t{ ( ctaButton || learnMoreButton ) && (\n\t\t\t\t<CardActions>\n\t\t\t\t\t{ learnMoreButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" href={ learnMoreButton.href } target=\"_blank\">\n\t\t\t\t\t\t\t{ learnMoreButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ctaButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" variant=\"contained\" onClick={ ctaButton.onClick }>\n\t\t\t\t\t\t\t{ ctaButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</CardActions>\n\t\t\t) }\n\t\t</Card>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tsetError( isDirty( newValue ) ? validation( newValue ) : null );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,mBAAoC;AACpC,gBAA6B;AAQtB,IAAM,sBAAsB,CAAiC;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAsC;AACrC,QAAM,CAAE,QAAQ,aAAc,IAAI,iBAAiB;AAEnD,MAAK,eAAgB;AACpB,WACC,oCAAC,qBAAQ,OAAgB,WAAU,SAClC,oCAAC,WAAQ,UAAsB,KAAM,QAAS,IAAY,GAAG,SAC1D,KACH,CACD;AAAA,EAEF;AAEA,SACC,oCAAC,WAAQ,UAAsB,KAAM,QAAS,IAAY,GAAG,SAC1D,KACH;AAEF;AAMA,IAAM,UAAgB;AAAA,EACrB,CACC,EAAE,UAAU,IAAI,YAAY,eAAK,GAAG,MAAM,GAE1C,QAEA;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,UAAS;AAAA,MACP,GAAG;AAAA,MACL,OAAQ,EAAE,UAAU,UAAU,cAAc,YAAY,YAAY,UAAU,SAAS;AAAA;AAAA,EACxF;AAEF;AAEA,IAAM,mBAAmB,MAAM;AAC9B,QAAM,CAAE,IAAI,KAAM,QAAI,uBAAgC,IAAK;AAC3D,QAAM,CAAE,eAAe,cAAe,QAAI,uBAAU,KAAM;AAE1D,8BAAW,MAAM;AAChB,UAAM,WAAW,IAAI,eAAgB,CAAE,CAAE,EAAE,OAAO,CAAE,MAAO;AAC1D,qBAAgB,OAAO,cAAc,OAAO,WAAY;AAAA,IACzD,CAAE;AAEF,QAAK,IAAK;AACT,eAAS,QAAS,EAAG;AAAA,IACtB;AAEA,WAAO,MAAM;AACZ,eAAS,WAAW;AAAA,IACrB;AAAA,EACD,GAAG,CAAE,EAAG,CAAE;AAEV,SAAO,CAAE,OAAO,aAAc;AAC/B;;;ACzEA,IAAAA,SAAuB;AACvB,IAAAC,gBAA2B;AAC3B,IAAAC,aAAqC;AAQ9B,IAAM,oBAAgB;AAAA,EAC5B,CACC,EAAE,OAAO,OAAO,KAAK,QAAQ,IAAI,GAAG,MAAM,GAC1C,QACI;AACJ,WACC,qCAAC,sBAAQ,OAAQ,OAAQ,MAAO,CAAC,CAAE,OAAQ,WAAU,SACpD,qCAAC,eAAY,KAAY,WAAY,IAAO,GAAG,SAC5C,KACH,CACD;AAAA,EAEF;AACD;AAEA,IAAM,kBAAc,mBAAQ,cAAI;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACzBhC,IAAAC,SAAuB;AACvB,IAAAC,gBAAyB;AACzB,IAAAC,aAWO;AACP,kBAAmB;AAQZ,IAAM,oBAAoB,CAAE,EAAE,MAAM,aAAa,OAAO,SAAS,MAA+B;AACtG,QAAM,CAAE,iBAAiB,kBAAmB,QAAI,wBAAU,IAAK;AAE/D,SACC,qCAAC,qBAAO,MAAc,SAAU,aAAc,UAAW,MAAO,qBAAsB,cACnF,SACD,qCAAC,2BAAa,MAAO,SACpB,qCAAC,8BAAc,KAAO,CACvB,GAEC,UACF,qCAAC,gCACA;AAAA,IAAC;AAAA;AAAA,MACA,IAAK,EAAE,aAAa,OAAO;AAAA,MAC3B,SACC;AAAA,QAAC;AAAA;AAAA,UACA,SAAU,CAAE;AAAA,UACZ,UAAW,MAAM,mBAAoB,CAAE,eAAgB;AAAA;AAAA,MACxD;AAAA,MAED,OACC,qCAAC,yBAAW,SAAU,eAAY,gBAAI,yBAAyB,WAAY,CAAG;AAAA;AAAA,EAEhF,GACA;AAAA,IAAC;AAAA;AAAA,MACA,MAAO;AAAA,MACP,SAAQ;AAAA,MACR,IAAK,EAAE,UAAU,QAAQ;AAAA,MACzB,SAAU,MAAM,YAAa,eAAgB;AAAA;AAAA,QAE3C,gBAAI,UAAU,WAAY;AAAA,EAC7B,CACD,CACD;AAEF;AAEA,IAAM,aAAmB,kBAAY,CAAE,OAAkB,QACxD;AAAA,EAAC;AAAA;AAAA,IACA;AAAA,IACE,GAAG;AAAA,IACL,SAAU;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IACP;AAAA;AACD,CACC;;;ACpEF,IAAAC,SAAuB;AACvB,IAAAC,aAA4E;;;ACD5E,IAAAC,gBAAoC;AACpC,gCAKO;AAUA,SAAS,iBAAiB;AAChC,QAAM,CAAE,aAAa,cAAe,QAAI,wBAAyB,MAAM,iBAAiB,CAAE;AAE1F,+BAAW,MAAM;AAChB,eAAO,0BAAAC,uBAAU,wCAAa,GAAG,MAAM,eAAgB,iBAAiB,CAAE,CAAE;AAAA,EAC7E,GAAG,CAAC,CAAE;AAEN,+BAAW,MAAM;AAChB,eAAO,0BAAAA,uBAAU,2CAAiB,4BAA6B,GAAG,CAAE,MAAO;AAC1E,YAAM,QAAQ;AAOd,YAAM,gBAAgB,MAAM,MAAM,YAAY,cAAc,MAAM,KAAK;AAEvE,UAAK,eAAgB;AACpB,uBAAgB,iBAAiB,CAAE;AAAA,MACpC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;AAEA,SAAS,mBAAmB;AAC3B,SAAS,OAAsC,WAAW,iBAAkB,UAAW,KAAK;AAC7F;;;ADxCA,IAAM,kBAAmD;AAE1C,SAAR,cAAgC,EAAE,SAAS,GAAmC;AACpF,QAAM,cAAc,eAAe;AAEnC,SACC,qCAAC,WAAAC,eAAA,EAAkB,aAA4B,SAAU,mBACtD,QACH;AAEF;;;AEfA,IAAAC,SAAuB;AACvB,IAAAC,aAA2D;AAEpD,IAAM,eAAe,CAAE,EAAE,UAAU,GAAG,MAAM,MAAsB;AACxE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAK;AAAA,MACH,GAAG;AAAA,MACL,IAAK;AAAA,QACJ,GAAK,MAAM,MAAM,CAAC;AAAA,MACnB;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,SAAU;AAAA,QACV,wBAAyB;AAAA,UACxB,SAAS;AAAA,QACV;AAAA;AAAA,IACD;AAAA,EACD;AAEF;;;ACpBA,IAAAC,SAAuB;AAEvB,IAAAC,aAAiF;AAe1E,IAAM,cAAc,CAAE,EAAE,SAAS,SAAS,iBAAiB,UAAU,MAAyB;AACpG,SACC,qCAAC,mBAAK,WAAY,GAAI,IAAK,EAAE,OAAO,IAAI,KACvC,qCAAC,0BAAY,IAAK,EAAE,IAAI,EAAE,KACzB,qCAAC,kBAAI,SAAQ,QAAO,YAAW,WAC9B,qCAAC,sBAAQ,UAAS,QAAO,IAAK,EAAE,IAAI,IAAI,KACrC,OACH,GACA,qCAAC,yBAAW,SAAQ,WAAU,OAAS,CACxC,CACD,IAEI,aAAa,oBAChB,qCAAC,8BACE,mBACD,qCAAC,qBAAO,MAAK,SAAQ,OAAM,WAAU,MAAO,gBAAgB,MAAO,QAAO,YACvE,gBAAgB,KACnB,GAEC,aACD,qCAAC,qBAAO,MAAK,SAAQ,OAAM,WAAU,SAAQ,aAAY,SAAU,UAAU,WAC1E,UAAU,KACb,CAEF,CAEF;AAEF;;;AC7CA,IAAAC,gBAA4C;AASrC,IAAM,cAAc,CAAE,EAAE,OAAO,UAAU,YAAY,QAAQ,MAA0B;AAC7F,QAAM,CAAE,WAAW,YAAa,QAAI,wBAAU,KAAM;AACpD,QAAM,CAAE,OAAO,QAAS,QAAI,wBAA2B,IAAK;AAE5D,QAAM,MAAM,aAAc,SAAU;AAEpC,QAAM,UAAU,CAAE,aAAsB,aAAa;AAErD,QAAM,eAAe,MAAM;AAC1B,iBAAc,IAAK;AAAA,EACpB;AAEA,QAAM,gBAAgB,MAAM;AAC3B,QAAI,SAAS,KAAK;AAElB,aAAU,IAAK;AACf,iBAAc,KAAM;AAAA,EACrB;AAEA,QAAM,SAAS,CAAE,aAAsB;AACtC,QAAK,CAAE,QAAS,QAAS,GAAI;AAC5B;AAAA,IACD;AAEA,QAAK,CAAE,OAAQ;AACd,UAAI;AACH,iBAAU,QAAS;AAAA,MACpB,UAAE;AACD,sBAAc;AAAA,MACf;AAAA,IACD;AAAA,EACD;AAEA,QAAM,WAAW,CAAE,UAAiD;AACnE,UAAM,EAAE,WAAW,SAAS,IAAI,MAAM;AAEtC,QAAK,YAAa;AACjB,eAAU,QAAS,QAAS,IAAI,WAAY,QAAS,IAAI,IAAK;AAAA,IAC/D;AAAA,EACD;AAEA,QAAM,gBAAgB,CAAE,UAAgC;AACvD,UAAM,gBAAgB;AAEtB,QAAK,CAAE,QAAS,EAAE,SAAU,MAAM,GAAI,GAAI;AACzC,aAAO,cAAc;AAAA,IACtB;AAEA,QAAK,CAAE,OAAQ,EAAE,SAAU,MAAM,GAAI,GAAI;AACxC,YAAM,eAAe;AACrB,aAAO,OAAU,MAAM,OAAwB,SAAU;AAAA,IAC1D;AAAA,EACD;AAEA,QAAM,cAAc,CAAE,UAA+C;AACpE,QAAK,WAAY;AAChB,YAAM,gBAAgB;AAAA,IACvB;AAEA,cAAW,KAAM;AAAA,EAClB;AAEA,QAAM,YAAY;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,EACT;AAEA,QAAM,aAAa;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,GAAK,aAAa;AAAA,MACjB,gCAAgC;AAAA,IACjC;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,OAAQ,EAAE,GAAG,WAAW,GAAG,WAAW;AAAA,EACjD;AACD;AAEA,IAAM,eAAe,CAAE,cAAwB;AAC9C,QAAM,UAAM,sBAA8B,IAAK;AAE/C,+BAAW,MAAM;AAChB,QAAK,WAAY;AAChB,gBAAW,IAAI,OAAQ;AAAA,IACxB;AAAA,EACD,GAAG,CAAE,SAAU,CAAE;AAEjB,SAAO;AACR;AAEA,IAAM,YAAY,CAAE,OAA4B;AAC/C,QAAM,YAAY,aAAa;AAE/B,MAAK,CAAE,aAAa,CAAE,IAAK;AAC1B;AAAA,EACD;AAEA,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAoB,EAAG;AAE7B,YAAU,gBAAgB;AAC1B,YAAU,SAAU,KAAM;AAC3B;","names":["React","import_react","import_ui","React","import_react","import_ui","React","import_ui","import_react","listenTo","ThemeProviderBase","React","import_ui","React","import_ui","import_react"]}

package/dist/index.mjs

@@ -68,44 +68,48 @@ import {
   DialogActions,
   DialogHeader,
   DialogTitle,
+  Fade,
   FormControlLabel,
-  Image,
   Typography
 } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
-var OPEN_DELAY = 1e3;
-var IntroductionModal = ({ open, handleClose, title, content, image }) => {
+var IntroductionModal = ({ open, handleClose, title, children }) => {
   const [shouldShowAgain, setShouldShowAgain] = useState2(true);
-  return /* @__PURE__ */ React3.createElement(
-    Dialog,
+  return /* @__PURE__ */ React3.createElement(Dialog, { open, onClose: handleClose, maxWidth: "sm", TransitionComponent: Transition }, title && /* @__PURE__ */ React3.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(DialogTitle, null, title)), children, /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(
+    FormControlLabel,
     {
-      open,
-      onClose: handleClose,
-      maxWidth: "sm",
-      TransitionProps: {
-        timeout: 700,
-        style: { transitionDelay: open ? `${OPEN_DELAY}ms` : "0ms" }
-      }
+      sx: { marginRight: "auto" },
+      control: /* @__PURE__ */ React3.createElement(
+        Checkbox,
+        {
+          checked: !shouldShowAgain,
+          onChange: () => setShouldShowAgain(!shouldShowAgain)
+        }
+      ),
+      label: /* @__PURE__ */ React3.createElement(Typography, { variant: "body2" }, __("Don't show this again", "elementor"))
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Button,
+    {
+      size: "medium",
+      variant: "contained",
+      sx: { minWidth: "135px" },
+      onClick: () => handleClose(shouldShowAgain)
     },
-    title && /* @__PURE__ */ React3.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(DialogTitle, null, title)),
-    image && /* @__PURE__ */ React3.createElement(Image, { sx: { width: "100%" }, src: image.src, alt: image.alt }),
-    content,
-    /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(
-      FormControlLabel,
-      {
-        sx: { marginRight: "auto" },
-        control: /* @__PURE__ */ React3.createElement(
-          Checkbox,
-          {
-            checked: !shouldShowAgain,
-            onChange: () => setShouldShowAgain(!shouldShowAgain)
-          }
-        ),
-        label: /* @__PURE__ */ React3.createElement(Typography, { variant: "body2" }, __("Don't show this again", "elementor"))
-      }
-    ), /* @__PURE__ */ React3.createElement(Button, { size: "medium", onClick: () => handleClose(shouldShowAgain), variant: "contained" }, __("Got it", "elementor")))
-  );
+    __("Got it", "elementor")
+  )));
 };
+var Transition = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(
+  Fade,
+  {
+    ref,
+    ...props,
+    timeout: {
+      enter: 1e3,
+      exit: 200
+    }
+  }
+));
 
 // src/components/theme-provider.tsx
 import * as React4 from "react";
@@ -170,6 +174,13 @@ var MenuListItem = ({ children, ...props }) => {
   );
 };
 
+// src/components/infotip-card.tsx
+import * as React6 from "react";
+import { Box as Box3, Button as Button2, Card, CardActions, CardContent, SvgIcon, Typography as Typography2 } from "@elementor/ui";
+var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
+  return /* @__PURE__ */ React6.createElement(Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React6.createElement(CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React6.createElement(Box3, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React6.createElement(SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React6.createElement(Typography2, { variant: "body2" }, content))), (ctaButton || learnMoreButton) && /* @__PURE__ */ React6.createElement(CardActions, null, learnMoreButton && /* @__PURE__ */ React6.createElement(Button2, { size: "small", color: "warning", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label), ctaButton && /* @__PURE__ */ React6.createElement(Button2, { size: "small", color: "warning", variant: "contained", onClick: ctaButton.onClick }, ctaButton.label)));
+};
+
 // src/hooks/use-editable.ts
 import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick }) => {
@@ -265,6 +276,7 @@ var selectAll = (el) => {
 export {
   EditableField,
   EllipsisWithTooltip,
+  InfoTipCard,
   IntroductionModal,
   MenuListItem,
   ThemeProvider,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFormControlLabel,\n\tImage,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n\tcontent: React.ReactNode;\n\timage?: {\n\t\tsrc: string;\n\t\talt: string;\n\t};\n};\n\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content, image }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog\n\t\t\topen={ open }\n\t\t\tonClose={ handleClose }\n\t\t\tmaxWidth={ 'sm' }\n\t\t\tTransitionProps={ {\n\t\t\t\ttimeout: 700,\n\t\t\t\tstyle: { transitionDelay: open ? `${ OPEN_DELAY }ms` : '0ms' },\n\t\t\t} }\n\t\t>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ image && <Image sx={ { width: '100%' } } src={ image.src } alt={ image.alt } /> }\n\t\t\t{ content }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button size={ 'medium' } onClick={ () => handleClose( shouldShowAgain ) } variant=\"contained\">\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tsetError( isDirty( newValue ) ? validation( newValue ) : null );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","forwardRef","Box","Tooltip","React","useState","React","useEffect","useState","React","useEffect","useState"]}
+{"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/components/infotip-card.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFade,\n\ttype FadeProps,\n\tFormControlLabel,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = React.PropsWithChildren< {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n} >;\n\nexport const IntroductionModal = ( { open, handleClose, title, children }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' } TransitionComponent={ Transition }>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tsize={ 'medium' }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tsx={ { minWidth: '135px' } }\n\t\t\t\t\tonClick={ () => handleClose( shouldShowAgain ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nconst Transition = React.forwardRef( ( props: FadeProps, ref: React.Ref< unknown > ) => (\n\t<Fade\n\t\tref={ ref }\n\t\t{ ...props }\n\t\ttimeout={ {\n\t\t\tenter: 1000,\n\t\t\texit: 200,\n\t\t} }\n\t/>\n) );\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n","import * as React from 'react';\nimport { type ReactNode } from 'react';\nimport { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';\n\ntype InfoTipCardProps = {\n\tcontent: ReactNode;\n\tsvgIcon: ReactNode;\n\tlearnMoreButton?: {\n\t\tlabel: string;\n\t\thref: string;\n\t};\n\tctaButton?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\nexport const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps ) => {\n\treturn (\n\t\t<Card elevation={ 0 } sx={ { width: 320 } }>\n\t\t\t<CardContent sx={ { pb: 0 } }>\n\t\t\t\t<Box display=\"flex\" alignItems=\"start\">\n\t\t\t\t\t<SvgIcon fontSize=\"tiny\" sx={ { mr: 0.5 } }>\n\t\t\t\t\t\t{ svgIcon }\n\t\t\t\t\t</SvgIcon>\n\t\t\t\t\t<Typography variant=\"body2\">{ content }</Typography>\n\t\t\t\t</Box>\n\t\t\t</CardContent>\n\n\t\t\t{ ( ctaButton || learnMoreButton ) && (\n\t\t\t\t<CardActions>\n\t\t\t\t\t{ learnMoreButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" href={ learnMoreButton.href } target=\"_blank\">\n\t\t\t\t\t\t\t{ learnMoreButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ctaButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" variant=\"contained\" onClick={ ctaButton.onClick }>\n\t\t\t\t\t\t\t{ ctaButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</CardActions>\n\t\t\t) }\n\t\t</Card>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tsetError( isDirty( newValue ) ? validation( newValue ) : null );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","forwardRef","Box","Tooltip","React","useState","React","useEffect","useState","React","React","Box","Button","Typography","useEffect","useState"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "0.5.1",
+  "version": "0.7.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",

package/src/components/infotip-card.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type ReactNode } from 'react';
+import { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';
+
+type InfoTipCardProps = {
+	content: ReactNode;
+	svgIcon: ReactNode;
+	learnMoreButton?: {
+		label: string;
+		href: string;
+	};
+	ctaButton?: {
+		label: string;
+		onClick: () => void;
+	};
+};
+
+export const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps ) => {
+	return (
+		<Card elevation={ 0 } sx={ { width: 320 } }>
+			<CardContent sx={ { pb: 0 } }>
+				<Box display="flex" alignItems="start">
+					<SvgIcon fontSize="tiny" sx={ { mr: 0.5 } }>
+						{ svgIcon }
+					</SvgIcon>
+					<Typography variant="body2">{ content }</Typography>
+				</Box>
+			</CardContent>
+
+			{ ( ctaButton || learnMoreButton ) && (
+				<CardActions>
+					{ learnMoreButton && (
+						<Button size="small" color="warning" href={ learnMoreButton.href } target="_blank">
+							{ learnMoreButton.label }
+						</Button>
+					) }
+					{ ctaButton && (
+						<Button size="small" color="warning" variant="contained" onClick={ ctaButton.onClick }>
+							{ ctaButton.label }
+						</Button>
+					) }
+				</CardActions>
+			) }
+		</Card>
+	);
+};

package/src/components/introduction-modal.tsx

@@ -7,45 +7,30 @@ import {
 	DialogActions,
 	DialogHeader,
 	DialogTitle,
+	Fade,
+	type FadeProps,
 	FormControlLabel,
-	Image,
 	Typography,
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-type IntroductionModalProps = {
+type IntroductionModalProps = React.PropsWithChildren< {
 	open: boolean;
 	handleClose: ( shouldShowAgain: boolean ) => void;
 	title?: string;
-	content: React.ReactNode;
-	image?: {
-		src: string;
-		alt: string;
-	};
-};
-
-const OPEN_DELAY = 1000;
+} >;
 
-export const IntroductionModal = ( { open, handleClose, title, content, image }: IntroductionModalProps ) => {
+export const IntroductionModal = ( { open, handleClose, title, children }: IntroductionModalProps ) => {
 	const [ shouldShowAgain, setShouldShowAgain ] = useState( true );
 
 	return (
-		<Dialog
-			open={ open }
-			onClose={ handleClose }
-			maxWidth={ 'sm' }
-			TransitionProps={ {
-				timeout: 700,
-				style: { transitionDelay: open ? `${ OPEN_DELAY }ms` : '0ms' },
-			} }
-		>
+		<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' } TransitionComponent={ Transition }>
 			{ title && (
 				<DialogHeader logo={ false }>
 					<DialogTitle>{ title }</DialogTitle>
 				</DialogHeader>
 			) }
-			{ image && <Image sx={ { width: '100%' } } src={ image.src } alt={ image.alt } /> }
-			{ content }
+			{ children }
 			<DialogActions>
 				<FormControlLabel
 					sx={ { marginRight: 'auto' } }
@@ -59,10 +44,26 @@ export const IntroductionModal = ( { open, handleClose, title, content, image }:
 						<Typography variant={ 'body2' }>{ __( "Don't show this again", 'elementor' ) }</Typography>
 					}
 				/>
-				<Button size={ 'medium' } onClick={ () => handleClose( shouldShowAgain ) } variant="contained">
+				<Button
+					size={ 'medium' }
+					variant="contained"
+					sx={ { minWidth: '135px' } }
+					onClick={ () => handleClose( shouldShowAgain ) }
+				>
 					{ __( 'Got it', 'elementor' ) }
 				</Button>
 			</DialogActions>
 		</Dialog>
 	);
 };
+
+const Transition = React.forwardRef( ( props: FadeProps, ref: React.Ref< unknown > ) => (
+	<Fade
+		ref={ ref }
+		{ ...props }
+		timeout={ {
+			enter: 1000,
+			exit: 200,
+		} }
+	/>
+) );

package/src/index.ts

@@ -4,6 +4,7 @@ export { EditableField } from './components/editable-field';
 export { IntroductionModal } from './components/introduction-modal';
 export { default as ThemeProvider } from './components/theme-provider';
 export { MenuListItem } from './components/menu-item';
+export { InfoTipCard } from './components/infotip-card';
 
 // hooks
 export { useEditable } from './hooks/use-editable';