@elementor/editor-ui 0.4.3 → 0.5.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-ui@0.4.3 build
+> @elementor/editor-ui@0.5.0 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     5.55 KB
-ESM dist/index.mjs.map 10.96 KB
-ESM ⚡️ Build success in 173ms
-CJS dist/index.js     7.44 KB
-CJS dist/index.js.map 11.24 KB
-CJS ⚡️ Build success in 163ms
+ESM dist/index.mjs     6.02 KB
+ESM dist/index.mjs.map 11.72 KB
+ESM ⚡️ Build success in 249ms
+CJS dist/index.js     7.96 KB
+CJS dist/index.js.map 12.06 KB
+CJS ⚡️ Build success in 260ms
 DTS Build start
-DTS ⚡️ Build success in 42627ms
-DTS dist/index.d.mts 1.75 KB
-DTS dist/index.d.ts  1.75 KB
+DTS ⚡️ Build success in 42228ms
+DTS dist/index.d.mts 1.90 KB
+DTS dist/index.d.ts  1.90 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @elementor/editor-ui
 
+## 0.5.0
+
+### Minor Changes
+
+- 50938e4: Change controls menus text style
+
 ## 0.4.3
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as React$1 from 'react';
+import { MenuItemProps } from '@elementor/ui';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
     maxWidth?: React$1.CSSProperties['maxWidth'];
@@ -17,6 +18,8 @@ type IntroductionModalProps = {
 };
 declare const IntroductionModal: ({ open, handleClose, title, content }: IntroductionModalProps) => React$1.JSX.Element;
 
+declare const MenuListItem: ({ children, ...props }: MenuItemProps) => React$1.JSX.Element;
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -42,4 +45,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick }: UseEditabl
     };
 };
 
-export { EditableField, EllipsisWithTooltip, IntroductionModal, useEditable };
+export { EditableField, EllipsisWithTooltip, IntroductionModal, MenuListItem, useEditable };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as React$1 from 'react';
+import { MenuItemProps } from '@elementor/ui';
 
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
     maxWidth?: React$1.CSSProperties['maxWidth'];
@@ -17,6 +18,8 @@ type IntroductionModalProps = {
 };
 declare const IntroductionModal: ({ open, handleClose, title, content }: IntroductionModalProps) => React$1.JSX.Element;
 
+declare const MenuListItem: ({ children, ...props }: MenuItemProps) => React$1.JSX.Element;
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -42,4 +45,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick }: UseEditabl
     };
 };
 
-export { EditableField, EllipsisWithTooltip, IntroductionModal, useEditable };
+export { EditableField, EllipsisWithTooltip, IntroductionModal, MenuListItem, useEditable };

package/dist/index.js

@@ -33,6 +33,7 @@ __export(index_exports, {
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
   IntroductionModal: () => IntroductionModal,
+  MenuListItem: () => MenuListItem,
   useEditable: () => useEditable
 });
 module.exports = __toCommonJS(index_exports);
@@ -135,6 +136,29 @@ var IntroductionModal = ({ open, handleClose, title, content }) => {
   );
 };
 
+// src/components/menu-item.tsx
+var React4 = __toESM(require("react"));
+var import_ui4 = require("@elementor/ui");
+var MenuListItem = ({ children, ...props }) => /* @__PURE__ */ React4.createElement(
+  import_ui4.MenuItem,
+  {
+    dense: true,
+    ...props,
+    sx: {
+      ...props.sx ?? {}
+    }
+  },
+  /* @__PURE__ */ React4.createElement(
+    import_ui4.MenuItemText,
+    {
+      primary: children,
+      primaryTypographyProps: {
+        variant: "caption"
+      }
+    }
+  )
+);
+
 // src/hooks/use-editable.ts
 var import_react4 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick }) => {
@@ -232,6 +256,7 @@ var selectAll = (el) => {
   EditableField,
   EllipsisWithTooltip,
   IntroductionModal,
+  MenuListItem,
   useEditable
 });
 //# sourceMappingURL=index.js.map

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/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 { 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 { 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\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content }: 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<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\", 'elementor' ) }\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 { 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","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/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 { 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 { 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\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content }: 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<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\", 'elementor' ) }\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 { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => (\n\t<MenuItem\n\t\tdense\n\t\t{ ...props }\n\t\tsx={ {\n\t\t\t...( props.sx ?? {} ),\n\t\t} }\n\t>\n\t\t<MenuItemText\n\t\t\tprimary={ children }\n\t\t\tprimaryTypographyProps={ {\n\t\t\t\tvariant: 'caption',\n\t\t\t} }\n\t\t/>\n\t</MenuItem>\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"]}

package/dist/index.mjs

@@ -96,6 +96,29 @@ var IntroductionModal = ({ open, handleClose, title, content }) => {
   );
 };
 
+// src/components/menu-item.tsx
+import * as React4 from "react";
+import { MenuItem, MenuItemText } from "@elementor/ui";
+var MenuListItem = ({ children, ...props }) => /* @__PURE__ */ React4.createElement(
+  MenuItem,
+  {
+    dense: true,
+    ...props,
+    sx: {
+      ...props.sx ?? {}
+    }
+  },
+  /* @__PURE__ */ React4.createElement(
+    MenuItemText,
+    {
+      primary: children,
+      primaryTypographyProps: {
+        variant: "caption"
+      }
+    }
+  )
+);
+
 // src/hooks/use-editable.ts
 import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick }) => {
@@ -192,6 +215,7 @@ export {
   EditableField,
   EllipsisWithTooltip,
   IntroductionModal,
+  MenuListItem,
   useEditable
 };
 //# sourceMappingURL=index.mjs.map

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/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 { 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\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content }: 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<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\", 'elementor' ) }\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 { 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","useEffect","useState"]}
+{"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../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 { 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\nconst OPEN_DELAY = 1000;\n\nexport const IntroductionModal = ( { open, handleClose, title, content }: 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<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\", 'elementor' ) }\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 { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => (\n\t<MenuItem\n\t\tdense\n\t\t{ ...props }\n\t\tsx={ {\n\t\t\t...( props.sx ?? {} ),\n\t\t} }\n\t>\n\t\t<MenuItemText\n\t\t\tprimary={ children }\n\t\t\tprimaryTypographyProps={ {\n\t\t\t\tvariant: 'caption',\n\t\t\t} }\n\t\t/>\n\t</MenuItem>\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"]}

package/package.json

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

package/src/components/menu-item.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';
+
+export const MenuListItem = ( { children, ...props }: MenuItemProps ) => (
+	<MenuItem
+		dense
+		{ ...props }
+		sx={ {
+			...( props.sx ?? {} ),
+		} }
+	>
+		<MenuItemText
+			primary={ children }
+			primaryTypographyProps={ {
+				variant: 'caption',
+			} }
+		/>
+	</MenuItem>
+);

package/src/index.ts

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