@sap-ux/control-property-editor 0.8.1 → 1.0.1

package/{esbuild.js → esbuild.mjs}

@@ -1,13 +1,14 @@
-const { esbuildOptionsBrowser, build } = require('../../esbuildConfig');
-const NodeModulesPolyfills = require('@esbuild-plugins/node-modules-polyfill');
-const { copy } = require('esbuild-plugin-copy');
-const alias = require('esbuild-plugin-alias');
+import { esbuildOptionsBrowser, build } from '../../esbuildConfig.mjs';
+import NodeModulesPolyfills from '@esbuild-plugins/node-modules-polyfill';
+import { copy } from 'esbuild-plugin-copy';
+import alias from 'esbuild-plugin-alias';
+import { fileURLToPath } from 'node:url';
 
 // Set esbuild options for this build
 esbuildOptionsBrowser.plugins = esbuildOptionsBrowser.plugins.concat(
     alias({
-        'react': require.resolve('react'),
-        'react-dom': require.resolve('react-dom')
+        'react': fileURLToPath(import.meta.resolve('react')),
+        'react-dom': fileURLToPath(import.meta.resolve('react-dom'))
     })
 );
 const esbuildOptions = { ...esbuildOptionsBrowser };
@@ -19,8 +20,4 @@ esbuildOptions.entryPoints = {
 esbuildOptions.format = 'esm';
 esbuildOptions.plugins = esbuildOptions.plugins.concat([NodeModulesPolyfills.NodeModulesPolyfillPlugin()]);
 
-module.exports = {
-    esbuildOptions
-};
-
 build(esbuildOptions, process.argv.slice(2));

package/{eslint.config.js → eslint.config.mjs}

@@ -1,6 +1,8 @@
-const base = require('../../eslint.config.js');
+import base from '../../eslint.config.mjs';
 
-module.exports = [
+const __dirname = import.meta.dirname;
+
+export default [
     ...base,
     {
         languageOptions: {

package/jest.config.mjs

@@ -0,0 +1,39 @@
+import baseConfig from '../../jest.base.mjs';
+const config = { ...baseConfig };
+config.testEnvironment = 'jsdom';
+config.extensionsToTreatAsEsm = ['.ts', '.tsx'];
+config.collectCoverageFrom = ['src/**/*.{ts,tsx}'];
+config.transform = {
+    '^.+\\.[jt]sx?$': [
+        'ts-jest',
+        {
+            useESM: true,
+            jsx: 'react-jsx',
+            tsconfig: {
+                module: 'NodeNext',
+                moduleResolution: 'NodeNext',
+                isolatedModules: true,
+                allowJs: true,
+                jsx: 'react-jsx'
+            },
+            diagnostics: {
+                warnOnly: true,
+                exclude: /\.(spec|test)\.ts$/,
+                ignoreCodes: [151001]
+            }
+        }
+    ],
+    '.+\\.(css|sass|scss)$': 'jest-scss-transform'
+};
+config.transformIgnorePatterns = [
+    'node_modules/(?!(\\.pnpm|@sap-ux|@sap-ux-private|@fluentui|@reduxjs|@testing-library|@babel|react-redux|react-i18next|i18next|redux|uuid|symbol-observable|hoist-non-react-statics|react-is)/)',
+    'node_modules/\\.pnpm/(?!(@sap-ux|@sap-ux-private|@fluentui|@reduxjs|@testing-library|@babel|react-redux|react-i18next|i18next|redux|uuid|symbol-observable|hoist-non-react-statics|react-is))'
+];
+config.moduleNameMapper = {
+    ...baseConfig.moduleNameMapper,
+    '^@reduxjs/toolkit$': '<rootDir>/node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js',
+    '^react-redux$': '<rootDir>/node_modules/react-redux/lib/index.js'
+};
+config.testMatch = ['**/test/unit/**/*.(test).ts(x)?'];
+config.setupFiles = ['<rootDir>/../../jest.setup.mjs', './test/unit/setup.ts'];
+export default config;

package/package.json

@@ -3,17 +3,19 @@
   "displayName": "Control Property Editor",
   "description": "Control Property Editor",
   "license": "Apache-2.0",
-  "version": "0.8.1",
+  "version": "1.0.1",
   "main": "dist/app.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/SAP/open-ux-tools.git",
     "directory": "packages/control-property-editor"
   },
+  "type": "module",
   "private": false,
   "devDependencies": {
     "@fluentui/react": "8.125.5",
     "@fluentui/react-hooks": "8.10.2",
+    "@jest/globals": "30.3.0",
     "@reduxjs/toolkit": "1.6.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "12.1.5",
@@ -48,8 +50,8 @@
     "esbuild-plugin-copy": "2.1.1",
     "@esbuild-plugins/node-modules-polyfill": "0.2.2",
     "uuid": "11.1.1",
-    "@sap-ux/ui-components": "2.2.1",
-    "@sap-ux-private/control-property-editor-common": "0.8.0"
+    "@sap-ux-private/control-property-editor-common": "1.0.0",
+    "@sap-ux/ui-components": "3.0.0"
   },
   "engines": {
     "node": ">=22.x"
@@ -58,10 +60,10 @@
     "clean": "rimraf --glob dist coverage *.tsbuildinfo",
     "build": "npm-run-all -l -s clean -p build:compile build:webapp",
     "build:compile": "tsc --noEmit",
-    "build:webapp": "node esbuild.js",
+    "build:webapp": "node esbuild.mjs",
     "watch": "npm-run-all -p watch:*",
-    "watch:webapp": "node esbuild.js --watch --minify=false",
-    "test": "jest --maxWorkers=1 --ci --forceExit --detectOpenHandles",
+    "watch:webapp": "node esbuild.mjs --watch --minify=false",
+    "test": "cross-env NODE_OPTIONS='--experimental-vm-modules' jest --maxWorkers=1 --ci --forceExit --detectOpenHandles",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --colors",
     "lint": "eslint",
     "lint:fix": "eslint --fix"

package/src/App.tsx

@@ -4,14 +4,14 @@ import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { UIDialog, UILink, UIToggle } from '@sap-ux/ui-components';
 import type { Scenario } from '@sap-ux-private/control-property-editor-common';
-import { LeftPanel, RightPanel } from './panels';
-import { Toolbar } from './toolbar';
-import { useLocalStorage } from './use-local-storage';
-import type { RootState } from './store';
-import { useAppDispatch } from './store';
-import { changePreviewScale } from './slice';
-import { useWindowSize } from './use-window-size';
-import { DEFAULT_DEVICE_WIDTH, DEVICE_WIDTH_MAP } from './devices';
+import { LeftPanel, RightPanel } from './panels/index.js';
+import { Toolbar } from './toolbar/index.js';
+import { useLocalStorage } from './use-local-storage.js';
+import type { RootState } from './store.js';
+import { useAppDispatch } from './store.js';
+import { changePreviewScale } from './slice.js';
+import { useWindowSize } from './use-window-size.js';
+import { DEFAULT_DEVICE_WIDTH, DEVICE_WIDTH_MAP } from './devices.js';
 
 import './App.scss';
 import './Workarounds.scss';

package/src/actions.ts

@@ -1,3 +1,3 @@
-import type { changeProperty, initializeLivereload } from './slice';
+import type { changeProperty, initializeLivereload } from './slice.js';
 
 export type Action = ReturnType<typeof changeProperty> | ReturnType<typeof initializeLivereload>;

package/src/components/ChangeIndicator.tsx

@@ -2,7 +2,7 @@ import { UIIcon } from '@sap-ux/ui-components';
 import type { ReactElement } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { IconName } from '../../src/icons';
+import { IconName } from '../../src/icons.js';
 
 interface ChangeIndicatorProps {
     saved: number;

package/src/components/ThemeSelectorCallout.tsx

@@ -5,9 +5,9 @@ import { useId } from '@fluentui/react-hooks';
 import { useTranslation } from 'react-i18next';
 
 import './ThemeSelectorCallout.scss';
-import { IconName } from '../icons';
-import { useTheme } from '../use-theme';
-import type { ThemeName } from '../use-theme';
+import { IconName } from '../icons.js';
+import { useTheme } from '../use-theme.js';
+import type { ThemeName } from '../use-theme.js';
 
 /**
  * React element for theme selector.

package/src/components/index.ts

@@ -1,3 +1,3 @@
-export * from './Separator';
-export * from './ThemeSelectorCallout';
-export * from './AppLogo';
+export * from './Separator.js';
+export * from './ThemeSelectorCallout.js';
+export * from './AppLogo.js';

package/src/i18n.ts

@@ -1,6 +1,6 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import * as i18nEn from './i18n/i18n.json';
+import * as i18nEn from './i18n/i18n.json' with { type: 'json' };
 
 /**
  *

package/src/index.tsx

@@ -5,13 +5,13 @@ import { Provider } from 'react-redux';
 import { initIcons, initTheme } from '@sap-ux/ui-components';
 import type { Scenario } from '@sap-ux-private/control-property-editor-common';
 import { enableTelemetry } from '@sap-ux-private/control-property-editor-common';
-import { initI18n } from './i18n';
+import { initI18n } from './i18n.js';
 
 import './index.css';
-import App from './App';
-import { store } from './store';
-import { registerAppIcons } from './icons';
-import { initializeLivereload, setProjectScenario, setFeatureToggles } from './slice';
+import App from './App.js';
+import { store } from './store.js';
+import { registerAppIcons } from './icons.js';
+import { initializeLivereload, setProjectScenario, setFeatureToggles } from './slice.js';
 
 export interface StartOptions {
     previewUrl: string;

package/src/middleware.ts

@@ -20,8 +20,8 @@ import {
     executeContextMenuAction
 } from '@sap-ux-private/control-property-editor-common';
 
-import type reducer from './slice';
-import { changeProperty } from './slice';
+import type reducer from './slice.js';
+import { changeProperty } from './slice.js';
 
 type Action = ReturnType<typeof changeProperty>;
 

package/src/panels/LeftPanel.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import { UISectionLayout, UISections, UISplitterLayoutType, UISplitterType } from '@sap-ux/ui-components';
 
-import { ChangesPanel } from './changes';
-import { OutlinePanel } from './outline';
+import { ChangesPanel } from './changes/index.js';
+import { OutlinePanel } from './outline/index.js';
 
 import './LeftPanel.scss';
 

package/src/panels/RightPanel.tsx

@@ -5,10 +5,10 @@ import { useSelector } from 'react-redux';
 import { UISectionLayout, UISections, UISplitterLayoutType, UISplitterType } from '@sap-ux/ui-components';
 import type { Scenario } from '@sap-ux-private/control-property-editor-common';
 
-import { PropertiesList } from './properties';
-import { QuickActionList } from './quick-actions';
-import { InfoCenter } from './info-center';
-import type { RootState } from '../store';
+import { PropertiesList } from './properties/index.js';
+import { QuickActionList } from './quick-actions/index.js';
+import { InfoCenter } from './info-center/index.js';
+import type { RootState } from '../store.js';
 import './RightPanel.scss';
 
 /**

package/src/panels/changes/ChangeStack.tsx

@@ -17,19 +17,19 @@ import {
     GENERIC_CHANGE_KIND
 } from '@sap-ux-private/control-property-editor-common';
 
-import { Separator } from '../../components';
-import type { UnknownChangeProps } from './UnknownChange';
-import { UnknownChange } from './UnknownChange';
+import { Separator } from '../../components/index.js';
+import type { UnknownChangeProps } from './UnknownChange.js';
+import { UnknownChange } from './UnknownChange.js';
 
 import styles from './ChangeStack.module.scss';
 import { useSelector } from 'react-redux';
-import type { FilterOptions } from '../../slice';
-import { FilterName } from '../../slice';
-import type { RootState } from '../../store';
-import { getFormattedDateAndTime } from './utils';
-import type { ControlItemProps } from './ControlChange';
-import { ControlChange } from './ControlChange';
-import { GenericGroup, type GenericGroupProps } from './GenericGroup';
+import type { FilterOptions } from '../../slice.js';
+import { FilterName } from '../../slice.js';
+import type { RootState } from '../../store.js';
+import { getFormattedDateAndTime } from './utils.js';
+import type { ControlItemProps } from './ControlChange.js';
+import { ControlChange } from './ControlChange.js';
+import { GenericGroup, type GenericGroupProps } from './GenericGroup.js';
 
 export interface ChangeStackProps {
     changes: Change[];

package/src/panels/changes/ChangeStackHeader.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Text } from '@fluentui/react';
 
-import { sectionHeaderFontSize } from '../properties/constants';
+import { sectionHeaderFontSize } from '../properties/constants.js';
 
 export interface ChangeStackHeaderProps {
     backgroundColor: string;

package/src/panels/changes/ChangesPanel.tsx

@@ -7,18 +7,18 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Icon } from '@fluentui/react';
 import { UISearchBox } from '@sap-ux/ui-components';
 
-import type { ChangesSlice } from '../../slice';
-import { FilterName, filterNodes } from '../../slice';
-import type { RootState } from '../../store';
+import type { ChangesSlice } from '../../slice.js';
+import { FilterName, filterNodes } from '../../slice.js';
+import type { RootState } from '../../store.js';
 
-import { Separator } from '../../components';
-import { ChangeStack } from './ChangeStack';
-import { ChangeStackHeader } from './ChangeStackHeader';
+import { Separator } from '../../components/index.js';
+import { ChangeStack } from './ChangeStack.js';
+import { ChangeStackHeader } from './ChangeStackHeader.js';
 
 import styles from './ChangesPanel.module.scss';
-import { FileChange } from './FileChange';
-import { defaultFontSize } from '../properties/constants';
-import { NoChangesFound } from './NoChangesFound';
+import { FileChange } from './FileChange.js';
+import { defaultFontSize } from '../properties/constants.js';
+import { NoChangesFound } from './NoChangesFound.js';
 
 const SEPARATOR_STYLE = {
     margin: '0 15px'

package/src/panels/changes/ControlChange.tsx

@@ -15,7 +15,7 @@ import {
     deletePropertyChanges,
     selectControl
 } from '@sap-ux-private/control-property-editor-common';
-import { getFormattedDateAndTime } from './utils';
+import { getFormattedDateAndTime } from './utils.js';
 
 export interface ControlItemProps {
     fileName: string;

package/src/panels/changes/DisplayAsIcon.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 
 import { UIIcon } from '@sap-ux/ui-components';
 
-import { IconName } from '../../icons';
+import { IconName } from '../../icons.js';
 
-import { getValueIcon } from './utils';
+import { getValueIcon } from './utils.js';
 import styles from './DisplayAsIcon.module.scss';
 import { convertCamelCaseToPascalCase } from '@sap-ux-private/control-property-editor-common';
 

package/src/panels/changes/GenericChange.tsx

@@ -15,9 +15,9 @@ import {
     PENDING_CHANGE_TYPE,
     SAVED_CHANGE_TYPE
 } from '@sap-ux-private/control-property-editor-common';
-import { getFormattedDateAndTime } from './utils';
-import GenericProperty from './GenericProperty';
-import { DisplayAsIcon } from './DisplayAsIcon';
+import { getFormattedDateAndTime } from './utils.js';
+import GenericProperty from './GenericProperty.js';
+import { DisplayAsIcon } from './DisplayAsIcon.js';
 
 export interface GenericChangeProps {
     /**

package/src/panels/changes/GenericGroup.tsx

@@ -10,7 +10,7 @@ import type {
 import { SAVED_CHANGE_TYPE, selectControl } from '@sap-ux-private/control-property-editor-common';
 
 import styles from './GenericGroup.module.scss';
-import { GenericChange } from './GenericChange';
+import { GenericChange } from './GenericChange.js';
 import { useDispatch } from 'react-redux';
 
 export interface GenericGroupProps {

package/src/panels/changes/UnknownChange.tsx

@@ -7,7 +7,7 @@ import styles from './UnknownChange.module.scss';
 import { UIIconButton, UiIcons, UIDialog } from '@sap-ux/ui-components';
 import type { PropertyChangeDeletionDetails } from '@sap-ux-private/control-property-editor-common';
 import { convertCamelCaseToPascalCase, deletePropertyChanges } from '@sap-ux-private/control-property-editor-common';
-import { getFormattedDateAndTime } from './utils';
+import { getFormattedDateAndTime } from './utils.js';
 
 export interface UnknownChangeProps {
     fileName: string;

package/src/panels/changes/index.tsx

@@ -1,2 +1,2 @@
-export { ChangesPanel } from './ChangesPanel';
-export { FileChange } from './FileChange';
+export { ChangesPanel } from './ChangesPanel.js';
+export { FileChange } from './FileChange.js';

package/src/panels/changes/utils.ts

@@ -1,4 +1,4 @@
-import { IconName } from '../../icons';
+import { IconName } from '../../icons.js';
 
 const localeTimeOptions: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit', hour12: false };
 const localeDateOptions: Intl.DateTimeFormatOptions = { day: '2-digit', month: '2-digit', year: '2-digit' };

package/src/panels/index.ts

@@ -1,2 +1,2 @@
-export { LeftPanel } from './LeftPanel';
-export { RightPanel } from './RightPanel';
+export { LeftPanel } from './LeftPanel.js';
+export { RightPanel } from './RightPanel.js';

package/src/panels/info-center/InfoCenter.tsx

@@ -3,11 +3,11 @@ import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Label, Stack } from '@fluentui/react';
 import { useDispatch, useSelector } from 'react-redux';
-import type { InfoCenterItem } from '../../slice';
-import { clearAllInfoCenterMessages, expandableMessage } from '../../slice';
+import type { InfoCenterItem } from '../../slice.js';
+import { clearAllInfoCenterMessages, expandableMessage } from '../../slice.js';
 import { UIIconButton, UiIcons } from '@sap-ux/ui-components';
-import type { RootState } from '../../store';
-import { InfoMessageItem } from './InfoMessageItem';
+import type { RootState } from '../../store.js';
+import { InfoMessageItem } from './InfoMessageItem.js';
 import './InfoCenter.scss';
 
 /**

package/src/panels/info-center/InfoMessageItem.tsx

@@ -3,9 +3,9 @@ import type { ReactElement } from 'react';
 import { Stack, Text } from '@fluentui/react';
 import { UIMessageBar, UIDialog, UITextInput, UIIconButton, UiIcons } from '@sap-ux/ui-components';
 import { useDispatch } from 'react-redux';
-import type { InfoCenterItem } from '../../slice';
+import type { InfoCenterItem } from '../../slice.js';
 import { MessageBarType } from '@sap-ux-private/control-property-editor-common';
-import { clearInfoCenterMessage } from '../../slice';
+import { clearInfoCenterMessage } from '../../slice.js';
 import { useTranslation } from 'react-i18next';
 import './InfoMessageItem.scss';
 

package/src/panels/info-center/index.ts

@@ -1 +1 @@
-export { InfoCenter } from './InfoCenter';
+export { InfoCenter } from './InfoCenter.js';

package/src/panels/outline/Funnel.tsx

@@ -3,10 +3,10 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UICheckbox, UIIconButton, UICallout, UICalloutContentPadding } from '@sap-ux/ui-components';
 import { useDispatch, useSelector } from 'react-redux';
-import { IconName } from '../../icons';
-import type { FilterOptions } from '../../slice';
-import { FilterName, filterNodes } from '../../slice';
-import type { RootState } from '../../store';
+import { IconName } from '../../icons.js';
+import type { FilterOptions } from '../../slice.js';
+import { FilterName, filterNodes } from '../../slice.js';
+import type { RootState } from '../../store.js';
 
 const TARGET = 'control-property-editor-funnel-callout-target-id';
 

package/src/panels/outline/OutlinePanel.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { UISearchBox } from '@sap-ux/ui-components';
-import { FilterName, filterNodes } from '../../slice';
+import { FilterName, filterNodes } from '../../slice.js';
 import './OutlinePanel.scss';
 
-import { Tree } from './Tree';
-import { Funnel } from './Funnel';
+import { Tree } from './Tree.js';
+import { Funnel } from './Funnel.js';
 
 const OutlinePanel = (): ReactElement => {
     const dispatch = useDispatch();

package/src/panels/outline/Tree.tsx

@@ -22,12 +22,12 @@ import {
 } from '@sap-ux-private/control-property-editor-common';
 import type { ContextMenu, Control, OutlineNode } from '@sap-ux-private/control-property-editor-common';
 
-import type { RootState } from '../../store';
-import type { ControlChanges, FilterOptions } from '../../slice';
-import { FilterName } from '../../slice';
-import { NoControlFound } from './NoControlFound';
-import { adaptExpandCollapsed, getFilteredModel, isSame } from './utils';
-import { ChangeIndicator } from '../../components/ChangeIndicator';
+import type { RootState } from '../../store.js';
+import type { ControlChanges, FilterOptions } from '../../slice.js';
+import { FilterName } from '../../slice.js';
+import { NoControlFound } from './NoControlFound.js';
+import { adaptExpandCollapsed, getFilteredModel, isSame } from './utils.js';
+import { ChangeIndicator } from '../../components/ChangeIndicator.js';
 
 interface OutlineNodeItem extends OutlineNode {
     level: number;

package/src/panels/outline/index.ts

@@ -1 +1 @@
-export * from './OutlinePanel';
+export * from './OutlinePanel.js';

package/src/panels/outline/utils.ts

@@ -1,6 +1,6 @@
 import type { OutlineNode } from '@sap-ux-private/control-property-editor-common';
-import type { FilterOptions } from '../../slice';
-import { FilterName } from '../../slice';
+import type { FilterOptions } from '../../slice.js';
+import { FilterName } from '../../slice.js';
 import type { IGroup } from '@fluentui/react';
 
 const commonVisibleControls = new Set([

package/src/panels/properties/Clipboard.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '@fluentui/react';
 import { UICallout, UICalloutContentPadding, UiIcons } from '@sap-ux/ui-components';
 import { useTranslation } from 'react-i18next';
-import { defaultFontSize } from './constants';
+import { defaultFontSize } from './constants.js';
 
 export interface ClipboardProps {
     label: string;

package/src/panels/properties/DropdownEditor.tsx

@@ -10,11 +10,11 @@ import type {
     PropertyType,
     StringControlPropertyWithOptions
 } from '@sap-ux-private/control-property-editor-common';
-import { changeProperty } from '../../slice';
+import { changeProperty } from '../../slice.js';
 
-import { setCachedValue } from './propertyValuesCache';
-import type { PropertyInputProps } from './types';
-import { InputType } from './types';
+import { setCachedValue } from './propertyValuesCache.js';
+import type { PropertyInputProps } from './types.js';
+import { InputType } from './types.js';
 
 import './Properties.scss';
 import { debounce, reportTelemetry } from '@sap-ux-private/control-property-editor-common';

package/src/panels/properties/Funnel.tsx

@@ -3,10 +3,10 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { UICheckbox, UIIconButton, UICallout, UICalloutContentPadding } from '@sap-ux/ui-components';
 import { useDispatch, useSelector } from 'react-redux';
-import { IconName } from '../../icons';
-import type { FilterOptions } from '../../slice';
-import { FilterName, filterNodes } from '../../slice';
-import type { RootState } from '../../store';
+import { IconName } from '../../icons.js';
+import type { FilterOptions } from '../../slice.js';
+import { FilterName, filterNodes } from '../../slice.js';
+import type { RootState } from '../../store.js';
 import './Properties.scss';
 
 const TARGET = 'control-property-editor-property-search-funnel-callout-target-id';

package/src/panels/properties/HeaderField.tsx

@@ -5,10 +5,10 @@ import { TextField, Label, Stack } from '@fluentui/react';
 import { UIIconButton, UiIcons, UITooltip, UITooltipUtils, UIDirectionalHint } from '@sap-ux/ui-components';
 
 import './Properties.scss';
-import { defaultFontSize, sectionHeaderFontSize } from './constants';
-import { PropertyDocumentation } from './PropertyDocumentation';
+import { defaultFontSize, sectionHeaderFontSize } from './constants.js';
+import { PropertyDocumentation } from './PropertyDocumentation.js';
 import type { PropertiesInfo } from '@sap-ux-private/control-property-editor-common';
-import { Clipboard } from './Clipboard';
+import { Clipboard } from './Clipboard.js';
 import { useTranslation } from 'react-i18next';
 
 export interface HeaderFieldProps {

package/src/panels/properties/IconValueHelp.tsx

@@ -6,9 +6,9 @@ import { useTranslation } from 'react-i18next';
 import type { IconDetails, PropertyType } from '@sap-ux-private/control-property-editor-common';
 
 import './SapUiIcon.scss';
-import { changeProperty } from '../../slice';
-import { setCachedValue } from './propertyValuesCache';
-import { InputType } from './types';
+import { changeProperty } from '../../slice.js';
+import { setCachedValue } from './propertyValuesCache.js';
+import { InputType } from './types.js';
 import { useDispatch } from 'react-redux';
 
 export interface IconValueHelpProps {

package/src/panels/properties/InputTypeSelector.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-import { InputTypeToggle } from './InputTypeToggle';
-import type { InputTypeWrapperProps } from './types';
+import { InputTypeToggle } from './InputTypeToggle.js';
+import type { InputTypeWrapperProps } from './types.js';
 
 /**
  * Input type selector.

package/src/panels/properties/InputTypeToggle.tsx

@@ -3,12 +3,12 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import type { ControlProperty, StringControlPropertyWithOptions } from '@sap-ux-private/control-property-editor-common';
-import { changeProperty } from '../../slice';
-import type { CacheValue } from './propertyValuesCache';
-import { getCachedValue } from './propertyValuesCache';
+import { changeProperty } from '../../slice.js';
+import type { CacheValue } from './propertyValuesCache.js';
+import { getCachedValue } from './propertyValuesCache.js';
 import styles from './InputTypeToggle.module.scss';
-import type { InputTypeToggleProps } from './types';
-import { InputType } from './types';
+import type { InputTypeToggleProps } from './types.js';
+import { InputType } from './types.js';
 import { reportTelemetry, STRING_VALUE_TYPE } from '@sap-ux-private/control-property-editor-common';
 
 /**