@elementor/editor-ui 0.1.0 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,22 +1,22 @@
 
-> @elementor/editor-ui@0.1.0 build
+> @elementor/editor-ui@0.3.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
 CLI Using tsconfig: ../../../tsconfig.json
-CLI tsup v8.3.5
+CLI tsup v8.4.0
 CLI Using tsup config: /home/runner/work/elementor-packages/elementor-packages/tsup.build.ts
 CLI Target: esnext
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     1.38 KB
-ESM dist/index.mjs.map 2.97 KB
-ESM ⚡️ Build success in 116ms
-CJS dist/index.js     3.05 KB
-CJS dist/index.js.map 3.10 KB
-CJS ⚡️ Build success in 121ms
+ESM dist/index.mjs     5.11 KB
+ESM dist/index.mjs.map 10.24 KB
+ESM ⚡️ Build success in 224ms
+CJS dist/index.js     7.00 KB
+CJS dist/index.js.map 10.53 KB
+CJS ⚡️ Build success in 214ms
 DTS Build start
-DTS ⚡️ Build success in 32739ms
-DTS dist/index.d.mts 388.00 B
-DTS dist/index.d.ts  388.00 B
+DTS ⚡️ Build success in 36327ms
+DTS dist/index.d.mts 1.77 KB
+DTS dist/index.d.ts  1.77 KB

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @elementor/editor-ui
 
+## 0.3.0
+
+### Minor Changes
+
+- dd8654a: Add introduction modal to class manager panel
+
+### Patch Changes
+
+- 158d092: Set `EditableField` component to full width.
+
+## 0.2.0
+
+### Minor Changes
+
+- 910044c: update `@elementor/icons` and `@elementor/ui` packages.
+- 4ed562a: Support renaming label in classes manager.
+- 5caf78d: update `@elementor/ui` package.
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,10 +1,45 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 
-type EllipsisWithTooltipProps<T extends React.ElementType> = {
-    maxWidth?: React.CSSProperties['maxWidth'];
+type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
+    maxWidth?: React$1.CSSProperties['maxWidth'];
     title: string;
     as?: T;
-} & React.ComponentProps<T>;
-declare const EllipsisWithTooltip: <T extends React.ElementType>({ maxWidth, title, as, ...props }: EllipsisWithTooltipProps<T>) => React.JSX.Element;
+} & React$1.ComponentProps<T>;
+declare const EllipsisWithTooltip: <T extends React$1.ElementType>({ maxWidth, title, as, ...props }: EllipsisWithTooltipProps<T>) => React$1.JSX.Element;
 
-export { EllipsisWithTooltip };
+declare const EditableField: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
+
+type IntroductionModalProps = {
+    open: boolean;
+    handleClose: (shouldShowAgain: boolean) => void;
+    title: string;
+    content: React$1.ReactNode;
+};
+declare const IntroductionModal: ({ open, handleClose, title, content }: IntroductionModalProps) => React$1.JSX.Element;
+
+type UseEditableParams = {
+    value: string;
+    onSubmit: (value: string) => unknown;
+    validation?: (value: string) => string | undefined | null;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+declare const useEditable: ({ value, onSubmit, validation, onClick }: UseEditableParams) => {
+    readonly ref: React$1.MutableRefObject<HTMLElement | null>;
+    readonly isEditing: boolean;
+    readonly openEditMode: () => void;
+    readonly closeEditMode: () => void;
+    readonly value: string;
+    readonly error: string | null | undefined;
+    readonly getProps: () => {
+        suppressContentEditableWarning?: boolean | undefined;
+        value: string;
+        role: "textbox";
+        contentEditable: boolean;
+        onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        onInput: (event: React.ChangeEvent<HTMLSpanElement>) => void;
+        onBlur: () => void;
+    };
+};
+
+export { EditableField, EllipsisWithTooltip, IntroductionModal, useEditable };

package/dist/index.d.ts

@@ -1,10 +1,45 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 
-type EllipsisWithTooltipProps<T extends React.ElementType> = {
-    maxWidth?: React.CSSProperties['maxWidth'];
+type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
+    maxWidth?: React$1.CSSProperties['maxWidth'];
     title: string;
     as?: T;
-} & React.ComponentProps<T>;
-declare const EllipsisWithTooltip: <T extends React.ElementType>({ maxWidth, title, as, ...props }: EllipsisWithTooltipProps<T>) => React.JSX.Element;
+} & React$1.ComponentProps<T>;
+declare const EllipsisWithTooltip: <T extends React$1.ElementType>({ maxWidth, title, as, ...props }: EllipsisWithTooltipProps<T>) => React$1.JSX.Element;
 
-export { EllipsisWithTooltip };
+declare const EditableField: React$1.ForwardRefExoticComponent<Omit<any, "ref"> & React$1.RefAttributes<unknown>>;
+
+type IntroductionModalProps = {
+    open: boolean;
+    handleClose: (shouldShowAgain: boolean) => void;
+    title: string;
+    content: React$1.ReactNode;
+};
+declare const IntroductionModal: ({ open, handleClose, title, content }: IntroductionModalProps) => React$1.JSX.Element;
+
+type UseEditableParams = {
+    value: string;
+    onSubmit: (value: string) => unknown;
+    validation?: (value: string) => string | undefined | null;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+};
+declare const useEditable: ({ value, onSubmit, validation, onClick }: UseEditableParams) => {
+    readonly ref: React$1.MutableRefObject<HTMLElement | null>;
+    readonly isEditing: boolean;
+    readonly openEditMode: () => void;
+    readonly closeEditMode: () => void;
+    readonly value: string;
+    readonly error: string | null | undefined;
+    readonly getProps: () => {
+        suppressContentEditableWarning?: boolean | undefined;
+        value: string;
+        role: "textbox";
+        contentEditable: boolean;
+        onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        onInput: (event: React.ChangeEvent<HTMLSpanElement>) => void;
+        onBlur: () => void;
+    };
+};
+
+export { EditableField, EllipsisWithTooltip, IntroductionModal, useEditable };

package/dist/index.js

@@ -30,7 +30,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  EllipsisWithTooltip: () => EllipsisWithTooltip
+  EditableField: () => EditableField,
+  EllipsisWithTooltip: () => EllipsisWithTooltip,
+  IntroductionModal: () => IntroductionModal,
+  useEditable: () => useEditable
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -77,8 +80,133 @@ var useIsOverflowing = () => {
   }, [el]);
   return [setEl, isOverflowing];
 };
+
+// src/components/editable-field.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_ui2 = require("@elementor/ui");
+var EditableField = (0, import_react2.forwardRef)(
+  ({ value, error, as: Component = "span", sx, ...props }, ref) => {
+    return /* @__PURE__ */ React2.createElement(import_ui2.Tooltip, { title: error, open: !!error, placement: "top" }, /* @__PURE__ */ React2.createElement(Component, { ref, sx: { width: "100%", ...sx }, ...props }, value));
+  }
+);
+
+// src/components/introduction-modal.tsx
+var React3 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_ui3 = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+var IntroductionModal = ({ open, handleClose, title, content }) => {
+  const [shouldShowAgain, setShouldShowAgain] = (0, import_react3.useState)(true);
+  return /* @__PURE__ */ React3.createElement(import_ui3.Dialog, { open, onClose: handleClose, maxWidth: "sm" }, /* @__PURE__ */ React3.createElement(import_ui3.DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(import_ui3.DialogTitle, null, title)), 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: (0, import_i18n.__)("Don't show this again")
+    }
+  ), /* @__PURE__ */ React3.createElement(import_ui3.Button, { size: "medium", onClick: () => handleClose(shouldShowAgain), variant: "contained" }, (0, import_i18n.__)("Got it"))));
+};
+
+// src/hooks/use-editable.ts
+var import_react4 = require("react");
+var useEditable = ({ value, onSubmit, validation, onClick }) => {
+  const [isEditing, setIsEditing] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const ref = useSelection(isEditing);
+  const openEditMode = () => {
+    setIsEditing(true);
+  };
+  const closeEditMode = () => {
+    ref.current?.blur();
+    setError(null);
+    setIsEditing(false);
+  };
+  const submit = (newValue) => {
+    if (!error) {
+      try {
+        onSubmit(newValue);
+      } finally {
+        closeEditMode();
+      }
+    }
+  };
+  const onChange = (event) => {
+    const { innerText: newValue } = event.target;
+    if (validation) {
+      setError(validation(newValue));
+    }
+  };
+  const handleKeyDown = (event) => {
+    event.stopPropagation();
+    if (["Escape"].includes(event.key)) {
+      return closeEditMode();
+    }
+    if (["Enter"].includes(event.key)) {
+      event.preventDefault();
+      return submit(event.target.innerText);
+    }
+  };
+  const handleClick = (event) => {
+    if (isEditing) {
+      event.stopPropagation();
+    }
+    onClick?.(event);
+  };
+  const listeners = {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onInput: onChange,
+    onBlur: closeEditMode
+  };
+  const attributes = {
+    value,
+    role: "textbox",
+    contentEditable: isEditing,
+    ...isEditing && {
+      suppressContentEditableWarning: true
+    }
+  };
+  return {
+    ref,
+    isEditing,
+    openEditMode,
+    closeEditMode,
+    value,
+    error,
+    getProps: () => ({ ...listeners, ...attributes })
+  };
+};
+var useSelection = (isEditing) => {
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (isEditing) {
+      selectAll(ref.current);
+    }
+  }, [isEditing]);
+  return ref;
+};
+var selectAll = (el) => {
+  const selection = getSelection();
+  if (!selection || !el) {
+    return;
+  }
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  selection.removeAllRanges();
+  selection.addRange(range);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  EllipsisWithTooltip
+  EditableField,
+  EllipsisWithTooltip,
+  IntroductionModal,
+  useEditable
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/ellipsis-with-tooltip.tsx"],"sourcesContent":["export { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.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';\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 { 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: Component = '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<Component ref={ ref } sx={ { width: '100%', ...sx } } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</Component>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { Button, Checkbox, Dialog, DialogActions, DialogHeader, DialogTitle, FormControlLabel } 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};\n\nexport const IntroductionModal = ( { open, handleClose, title, content }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' }>\n\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t</DialogHeader>\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={ __( \"Don't show this again\" ) }\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' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\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 | undefined | 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 | undefined >( null );\n\n\tconst ref = useSelection( isEditing );\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 ( ! 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( validation( newValue ) );\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","import_react"]}

package/dist/index.mjs

@@ -41,7 +41,132 @@ var useIsOverflowing = () => {
   }, [el]);
   return [setEl, isOverflowing];
 };
+
+// src/components/editable-field.tsx
+import * as React2 from "react";
+import { forwardRef as forwardRef2 } from "react";
+import { Tooltip as Tooltip2 } from "@elementor/ui";
+var EditableField = forwardRef2(
+  ({ value, error, as: Component = "span", sx, ...props }, ref) => {
+    return /* @__PURE__ */ React2.createElement(Tooltip2, { title: error, open: !!error, placement: "top" }, /* @__PURE__ */ React2.createElement(Component, { ref, sx: { width: "100%", ...sx }, ...props }, value));
+  }
+);
+
+// src/components/introduction-modal.tsx
+import * as React3 from "react";
+import { useState as useState2 } from "react";
+import { Button, Checkbox, Dialog, DialogActions, DialogHeader, DialogTitle, FormControlLabel } from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+var IntroductionModal = ({ open, handleClose, title, content }) => {
+  const [shouldShowAgain, setShouldShowAgain] = useState2(true);
+  return /* @__PURE__ */ React3.createElement(Dialog, { open, onClose: handleClose, maxWidth: "sm" }, /* @__PURE__ */ React3.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(DialogTitle, null, title)), content, /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(
+    FormControlLabel,
+    {
+      sx: { marginRight: "auto" },
+      control: /* @__PURE__ */ React3.createElement(
+        Checkbox,
+        {
+          checked: !shouldShowAgain,
+          onChange: () => setShouldShowAgain(!shouldShowAgain)
+        }
+      ),
+      label: __("Don't show this again")
+    }
+  ), /* @__PURE__ */ React3.createElement(Button, { size: "medium", onClick: () => handleClose(shouldShowAgain), variant: "contained" }, __("Got it"))));
+};
+
+// src/hooks/use-editable.ts
+import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+var useEditable = ({ value, onSubmit, validation, onClick }) => {
+  const [isEditing, setIsEditing] = useState3(false);
+  const [error, setError] = useState3(null);
+  const ref = useSelection(isEditing);
+  const openEditMode = () => {
+    setIsEditing(true);
+  };
+  const closeEditMode = () => {
+    ref.current?.blur();
+    setError(null);
+    setIsEditing(false);
+  };
+  const submit = (newValue) => {
+    if (!error) {
+      try {
+        onSubmit(newValue);
+      } finally {
+        closeEditMode();
+      }
+    }
+  };
+  const onChange = (event) => {
+    const { innerText: newValue } = event.target;
+    if (validation) {
+      setError(validation(newValue));
+    }
+  };
+  const handleKeyDown = (event) => {
+    event.stopPropagation();
+    if (["Escape"].includes(event.key)) {
+      return closeEditMode();
+    }
+    if (["Enter"].includes(event.key)) {
+      event.preventDefault();
+      return submit(event.target.innerText);
+    }
+  };
+  const handleClick = (event) => {
+    if (isEditing) {
+      event.stopPropagation();
+    }
+    onClick?.(event);
+  };
+  const listeners = {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onInput: onChange,
+    onBlur: closeEditMode
+  };
+  const attributes = {
+    value,
+    role: "textbox",
+    contentEditable: isEditing,
+    ...isEditing && {
+      suppressContentEditableWarning: true
+    }
+  };
+  return {
+    ref,
+    isEditing,
+    openEditMode,
+    closeEditMode,
+    value,
+    error,
+    getProps: () => ({ ...listeners, ...attributes })
+  };
+};
+var useSelection = (isEditing) => {
+  const ref = useRef(null);
+  useEffect2(() => {
+    if (isEditing) {
+      selectAll(ref.current);
+    }
+  }, [isEditing]);
+  return ref;
+};
+var selectAll = (el) => {
+  const selection = getSelection();
+  if (!selection || !el) {
+    return;
+  }
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  selection.removeAllRanges();
+  selection.addRange(range);
+};
 export {
-  EllipsisWithTooltip
+  EditableField,
+  EllipsisWithTooltip,
+  IntroductionModal,
+  useEditable
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx"],"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"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,WAAW,gBAAgB;AACpC,SAAS,KAAK,eAAe;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,WAAQ,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,KAAK,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,IAAI,SAAgC,IAAK;AAC3D,QAAM,CAAE,eAAe,cAAe,IAAI,SAAU,KAAM;AAE1D,YAAW,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;","names":[]}
+{"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.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 { 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: Component = '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<Component ref={ ref } sx={ { width: '100%', ...sx } } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</Component>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { Button, Checkbox, Dialog, DialogActions, DialogHeader, DialogTitle, FormControlLabel } 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};\n\nexport const IntroductionModal = ( { open, handleClose, title, content }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' }>\n\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t</DialogHeader>\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={ __( \"Don't show this again\" ) }\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' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\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 | undefined | 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 | undefined >( null );\n\n\tconst ref = useSelection( isEditing );\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 ( ! 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( validation( newValue ) );\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","Tooltip","React","useState","useEffect","useState"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -36,6 +36,10 @@
     "react": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/ui": "1.24.1"
+    "@elementor/ui": "1.26.0",
+    "@wordpress/i18n": "^5.13.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
   }
 }

package/src/components/editable-field.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { Tooltip } from '@elementor/ui';
+
+type EditableFieldProps< T extends React.ElementType > = {
+	value: string;
+	error?: string;
+	as?: T;
+} & React.ComponentPropsWithRef< T >;
+
+export const EditableField = forwardRef(
+	< T extends React.ElementType >(
+		{ value, error, as: Component = 'span', sx, ...props }: EditableFieldProps< T >,
+		ref: unknown
+	) => {
+		return (
+			<Tooltip title={ error } open={ !! error } placement="top">
+				<Component ref={ ref } sx={ { width: '100%', ...sx } } { ...props }>
+					{ value }
+				</Component>
+			</Tooltip>
+		);
+	}
+);

package/src/components/introduction-modal.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Button, Checkbox, Dialog, DialogActions, DialogHeader, DialogTitle, FormControlLabel } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type IntroductionModalProps = {
+	open: boolean;
+	handleClose: ( shouldShowAgain: boolean ) => void;
+	title: string;
+	content: React.ReactNode;
+};
+
+export const IntroductionModal = ( { open, handleClose, title, content }: IntroductionModalProps ) => {
+	const [ shouldShowAgain, setShouldShowAgain ] = useState( true );
+
+	return (
+		<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' }>
+			<DialogHeader logo={ false }>
+				<DialogTitle>{ title }</DialogTitle>
+			</DialogHeader>
+			{ content }
+			<DialogActions>
+				<FormControlLabel
+					sx={ { marginRight: 'auto' } }
+					control={
+						<Checkbox
+							checked={ ! shouldShowAgain }
+							onChange={ () => setShouldShowAgain( ! shouldShowAgain ) }
+						/>
+					}
+					label={ __( "Don't show this again" ) }
+				/>
+				<Button size={ 'medium' } onClick={ () => handleClose( shouldShowAgain ) } variant="contained">
+					{ __( 'Got it' ) }
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};

package/src/hooks/__tests__/use-editable.test.ts

@@ -0,0 +1,158 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useEditable } from '../use-editable';
+
+describe( 'useEditable', () => {
+	it( 'should return editable content attributes and handlers', () => {
+		// Arrange & Act.
+		const { result } = renderHook( () =>
+			useEditable( {
+				value: '',
+				onSubmit: jest.fn(),
+			} )
+		);
+
+		const props = result.current.getProps();
+
+		// Assert.
+		expect( props ).toEqual( {
+			value: '',
+			role: 'textbox',
+			contentEditable: false,
+			suppressContentEditableWarning: undefined,
+			onBlur: expect.any( Function ),
+			onClick: expect.any( Function ),
+			onInput: expect.any( Function ),
+			onKeyDown: expect.any( Function ),
+		} );
+	} );
+
+	it( 'should set editable to true', () => {
+		// Arrange & Act.
+		const { result } = renderHook( () => useEditable( { value: '', onSubmit: jest.fn() } ) );
+
+		// Assert.
+		expect( result.current.isEditing ).toBe( false );
+
+		// Act.
+		act( result.current.openEditMode );
+
+		// Assert.
+		expect( result.current.isEditing ).toBe( true );
+		expect( result.current.getProps() ).toMatchObject( {
+			contentEditable: true,
+			suppressContentEditableWarning: true,
+		} );
+	} );
+
+	it( 'should call onSubmit with the new value on enter', async () => {
+		// Arrange.
+		const onSubmit = jest.fn();
+		const value = 'Some value';
+		const newValue = 'New value';
+		const validation = jest.fn();
+
+		// Act.
+		const { result } = renderHook( () =>
+			useEditable( {
+				value,
+				onSubmit,
+				validation,
+			} )
+		);
+
+		act( () => {
+			result.current.openEditMode();
+			result.current.getProps().onInput( { target: { innerText: newValue } } as never );
+		} );
+
+		// Assert.
+		expect( validation ).toHaveBeenCalledWith( newValue );
+
+		// Act.
+		const { onKeyDown } = result.current.getProps();
+
+		act( () => {
+			onKeyDown( {
+				key: 'Enter',
+				stopPropagation: jest.fn(),
+				preventDefault: jest.fn(),
+				target: { innerText: newValue },
+			} as never );
+		} );
+
+		expect( onSubmit ).toHaveBeenCalledWith( newValue );
+	} );
+
+	it( 'should remove the editable content attribute on blur', () => {
+		// Arrange
+		const { result } = renderHook( () =>
+			useEditable( {
+				value: '',
+				onSubmit: jest.fn(),
+			} )
+		);
+
+		// Act.
+		act( result.current.openEditMode );
+
+		// Assert.
+		expect( result.current.isEditing ).toBe( true );
+
+		// Act.
+		act( result.current.getProps().onBlur );
+
+		// Assert.
+		expect( result.current.isEditing ).toBe( false );
+	} );
+
+	it( 'should set error message id validation fails', () => {
+		// Arrange.
+		const newValue = 'invalid-value';
+		const value = 'Some value';
+		const onSubmit = jest.fn();
+
+		const validation = ( v: string ) => {
+			if ( v === newValue ) {
+				return 'Nope';
+			}
+
+			return null;
+		};
+
+		const { result } = renderHook( () =>
+			useEditable( {
+				value,
+				onSubmit,
+				validation,
+			} )
+		);
+
+		// Act.
+		act( result.current.openEditMode );
+
+		// Assert.
+		expect( result.current.error ).toBeNull();
+
+		// Act.
+		act( () => {
+			result.current.getProps().onInput( { target: { innerText: newValue } } as never );
+		} );
+
+		// Assert.
+		expect( result.current.error ).toBe( 'Nope' );
+
+		// Act.
+		act( () => {
+			result.current.getProps().onKeyDown( {
+				key: 'Enter',
+				stopPropagation: jest.fn(),
+				preventDefault: jest.fn(),
+				target: { innerText: newValue },
+			} as never );
+		} );
+
+		// Assert.
+		expect( onSubmit ).not.toHaveBeenCalled();
+	} );
+} );

package/src/hooks/use-editable.ts

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState } from 'react';
+
+type UseEditableParams = {
+	value: string;
+	onSubmit: ( value: string ) => unknown;
+	validation?: ( value: string ) => string | undefined | null;
+	onClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;
+};
+
+export const useEditable = ( { value, onSubmit, validation, onClick }: UseEditableParams ) => {
+	const [ isEditing, setIsEditing ] = useState( false );
+	const [ error, setError ] = useState< string | null | undefined >( null );
+
+	const ref = useSelection( isEditing );
+
+	const openEditMode = () => {
+		setIsEditing( true );
+	};
+
+	const closeEditMode = () => {
+		ref.current?.blur();
+
+		setError( null );
+		setIsEditing( false );
+	};
+
+	const submit = ( newValue: string ) => {
+		if ( ! error ) {
+			try {
+				onSubmit( newValue );
+			} finally {
+				closeEditMode();
+			}
+		}
+	};
+
+	const onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {
+		const { innerText: newValue } = event.target;
+
+		if ( validation ) {
+			setError( validation( newValue ) );
+		}
+	};
+
+	const handleKeyDown = ( event: React.KeyboardEvent ) => {
+		event.stopPropagation();
+
+		if ( [ 'Escape' ].includes( event.key ) ) {
+			return closeEditMode();
+		}
+
+		if ( [ 'Enter' ].includes( event.key ) ) {
+			event.preventDefault();
+			return submit( ( event.target as HTMLElement ).innerText );
+		}
+	};
+
+	const handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {
+		if ( isEditing ) {
+			event.stopPropagation();
+		}
+
+		onClick?.( event );
+	};
+
+	const listeners = {
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		onInput: onChange,
+		onBlur: closeEditMode,
+	} as const;
+
+	const attributes = {
+		value,
+		role: 'textbox',
+		contentEditable: isEditing,
+		...( isEditing && {
+			suppressContentEditableWarning: true,
+		} ),
+	} as const;
+
+	return {
+		ref,
+		isEditing,
+		openEditMode,
+		closeEditMode,
+		value,
+		error,
+		getProps: () => ( { ...listeners, ...attributes } ),
+	} as const;
+};
+
+const useSelection = ( isEditing: boolean ) => {
+	const ref = useRef< HTMLElement | null >( null );
+
+	useEffect( () => {
+		if ( isEditing ) {
+			selectAll( ref.current );
+		}
+	}, [ isEditing ] );
+
+	return ref;
+};
+
+const selectAll = ( el: HTMLElement | null ) => {
+	const selection = getSelection();
+
+	if ( ! selection || ! el ) {
+		return;
+	}
+
+	const range = document.createRange();
+	range.selectNodeContents( el );
+
+	selection.removeAllRanges();
+	selection.addRange( range );
+};

package/src/index.ts

@@ -1 +1,7 @@
+// components
 export { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';
+export { EditableField } from './components/editable-field';
+export { IntroductionModal } from './components/introduction-modal';
+
+// hooks
+export { useEditable } from './hooks/use-editable';