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

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';
 
 /**

package/src/panels/properties/InputTypeWrapper.tsx

@@ -24,15 +24,15 @@ import {
     STRING_VALUE_TYPE
 } from '@sap-ux-private/control-property-editor-common';
 
-import { IconName } from '../../icons';
-import { ChangeIndicator } from '../../components/ChangeIndicator';
+import { IconName } from '../../icons.js';
+import { ChangeIndicator } from '../../components/ChangeIndicator.js';
 
-import type { CacheValue } from './propertyValuesCache';
-import type { InputTypeToggleOptionProps, InputTypeWrapperProps } from './types';
-import { InputType, isExpression } from './types';
-import { PropertyDocumentation } from './PropertyDocumentation';
-import { defaultFontSize } from './constants';
-import { InputTypeSelector } from './InputTypeSelector';
+import type { CacheValue } from './propertyValuesCache.js';
+import type { InputTypeToggleOptionProps, InputTypeWrapperProps } from './types.js';
+import { InputType, isExpression } from './types.js';
+import { PropertyDocumentation } from './PropertyDocumentation.js';
+import { defaultFontSize } from './constants.js';
+import { InputTypeSelector } from './InputTypeSelector.js';
 import { useTranslation } from 'react-i18next';
 
 export const getDefaultInputType = (editor: string, type: string, value: CacheValue): InputType => {

package/src/panels/properties/Properties.scss

@@ -83,7 +83,8 @@
 }
 .filter-properties {
     display: flex;
-    padding: 0px 15px 15px 15px;
+    padding: 0 0 15px 0;
+    margin: 0 15px;
     flex-direction: row;
     align-items: center;
     border-bottom: 1px solid var(--vscode-menu-separatorBackground);

package/src/panels/properties/PropertiesList.tsx

@@ -7,24 +7,24 @@ import {
     DROPDOWN_EDITOR_TYPE,
     INPUT_EDITOR_TYPE
 } from '@sap-ux-private/control-property-editor-common';
-import { Separator } from '../../components/Separator';
-import type { RootState } from '../../store';
-import { DropdownEditor } from './DropdownEditor';
-import { HeaderField } from './HeaderField';
-import { getDefaultInputType, getInputTypeToggleOptions, InputTypeWrapper } from './InputTypeWrapper';
-import { setCachedValue } from './propertyValuesCache';
-import { StringEditor } from './StringEditor';
-import type { InputTypeWrapperProps } from './types';
-import { isExpression } from './types';
-import { sectionHeaderFontSize } from './constants';
+import { Separator } from '../../components/Separator.js';
+import type { RootState } from '../../store.js';
+import { DropdownEditor } from './DropdownEditor.js';
+import { HeaderField } from './HeaderField.js';
+import { getDefaultInputType, getInputTypeToggleOptions, InputTypeWrapper } from './InputTypeWrapper.js';
+import { setCachedValue } from './propertyValuesCache.js';
+import { StringEditor } from './StringEditor.js';
+import type { InputTypeWrapperProps } from './types.js';
+import { isExpression } from './types.js';
+import { sectionHeaderFontSize } from './constants.js';
 import { useSelector } from 'react-redux';
 import { UISearchBox } from '@sap-ux/ui-components';
-import { NoControlSelected } from './NoControlSelected';
+import { NoControlSelected } from './NoControlSelected.js';
 import { Label } from '@fluentui/react';
 import './Properties.scss';
-import { Funnel } from './Funnel';
-import type { ControlChangeStats, FilterOptions } from '../../slice';
-import { FilterName } from '../../slice';
+import { Funnel } from './Funnel.js';
+import type { ControlChangeStats, FilterOptions } from '../../slice.js';
+import { FilterName } from '../../slice.js';
 
 /**
  * React element for all properties including id & type and property editors.
@@ -122,8 +122,7 @@ export function PropertiesList(): ReactElement {
             </div>
             <Separator
                 style={{
-                    marginTop: '0px',
-                    marginBottom: '15px'
+                    margin: '0 15px 15px'
                 }}
             />
             <div className="filter-properties">

package/src/panels/properties/PropertyDocumentation.tsx

@@ -7,8 +7,8 @@ import { Text, Stack } from '@fluentui/react';
 import { UIIcon, UIIconButton, UiIcons } from '@sap-ux/ui-components';
 
 import type { Control, SavedGenericChange, PendingGenericChange } from '@sap-ux-private/control-property-editor-common';
-import { Separator } from '../../components';
-import type { RootState } from '../../store';
+import { Separator } from '../../components/index.js';
+import type { RootState } from '../../store.js';
 
 import styles from './PropertyDocumentation.module.scss';
 

package/src/panels/properties/StringEditor.tsx

@@ -5,18 +5,18 @@ import { useDispatch, useSelector } from 'react-redux';
 import type { UITextInputProps } from '@sap-ux/ui-components';
 import { UITextInput } from '@sap-ux/ui-components';
 
-import { changeProperty } from '../../slice';
+import { changeProperty } from '../../slice.js';
 
-import type { PropertyInputProps } from './types';
-import { isExpression, InputType } from './types';
-import { setCachedValue } from './propertyValuesCache';
+import type { PropertyInputProps } from './types.js';
+import { isExpression, InputType } from './types.js';
+import { setCachedValue } from './propertyValuesCache.js';
 
 import './Properties.scss';
 import { reportTelemetry, FLOAT_VALUE_TYPE, INTEGER_VALUE_TYPE } from '@sap-ux-private/control-property-editor-common';
 import './SapUiIcon.scss';
-import { IconValueHelp } from './IconValueHelp';
+import { IconValueHelp } from './IconValueHelp.js';
 import type { IconDetails } from '@sap-ux-private/control-property-editor-common';
-import type { RootState } from '../../store';
+import type { RootState } from '../../store.js';
 
 /**
  * React element for string editor in property panel.

package/src/panels/properties/index.ts

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

package/src/panels/properties/propertyValuesCache.ts

@@ -1,4 +1,4 @@
-import { InputType, isExpression } from './types';
+import { InputType, isExpression } from './types.js';
 
 export type CacheValue = string | boolean | number;
 

package/src/panels/properties/types.ts

@@ -7,7 +7,7 @@ import type {
     INPUT_EDITOR_TYPE
 } from '@sap-ux-private/control-property-editor-common';
 
-import type { PropertyChangeStats } from '../../slice';
+import type { PropertyChangeStats } from '../../slice.js';
 
 export interface PropertyInputProps<T extends ControlProperty = ControlProperty> {
     controlId: string;

package/src/panels/quick-actions/NestedQuickAction.tsx

@@ -7,8 +7,8 @@ import { UIDirectionalHint, UIIcon, UILink, UIContextualMenu, UIContextualMenuLa
 
 import type { NestedQuickAction, NestedQuickActionChild } from '@sap-ux-private/control-property-editor-common';
 import { executeQuickAction } from '@sap-ux-private/control-property-editor-common';
-import { IconName } from '../../icons';
-import type { RootState } from '../../store';
+import { IconName } from '../../icons.js';
+import type { RootState } from '../../store.js';
 
 export interface NestedQuickActionListItemProps {
     action: Readonly<NestedQuickAction>;

package/src/panels/quick-actions/QuickActionList.tsx

@@ -7,11 +7,11 @@ import { useSelector } from 'react-redux';
 import type { QuickActionGroup } from '@sap-ux-private/control-property-editor-common';
 import { NESTED_QUICK_ACTION_KIND, SIMPLE_QUICK_ACTION_KIND } from '@sap-ux-private/control-property-editor-common';
 
-import type { RootState } from '../../store';
-import { sectionHeaderFontSize } from '../properties/constants';
+import type { RootState } from '../../store.js';
+import { sectionHeaderFontSize } from '../properties/constants.js';
 
-import { SimpleQuickActionListItem } from './SimpleQuickAction';
-import { NestedQuickActionListItem } from './NestedQuickAction';
+import { SimpleQuickActionListItem } from './SimpleQuickAction.js';
+import { NestedQuickActionListItem } from './NestedQuickAction.js';
 
 import './QuickAction.scss';
 

package/src/panels/quick-actions/SimpleQuickAction.tsx

@@ -7,7 +7,7 @@ import { UILink } from '@sap-ux/ui-components';
 import type { SimpleQuickAction } from '@sap-ux-private/control-property-editor-common';
 import { executeQuickAction } from '@sap-ux-private/control-property-editor-common';
 
-import type { RootState } from '../../store';
+import type { RootState } from '../../store.js';
 
 export interface SimpleQuickActionListItemProps {
     action: Readonly<SimpleQuickAction>;

package/src/panels/quick-actions/index.ts

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

package/src/slice.ts

@@ -45,7 +45,7 @@ import {
     GENERIC_CHANGE_KIND,
     toggleAppPreviewVisibility
 } from '@sap-ux-private/control-property-editor-common';
-import { DeviceType } from './devices';
+import { DeviceType } from './devices.js';
 
 export interface SliceState {
     deviceType: DeviceType;

package/src/store.ts

@@ -1,8 +1,8 @@
 import { configureStore, compose, applyMiddleware } from '@reduxjs/toolkit';
 import { useDispatch } from 'react-redux';
-import { communicationMiddleware } from './middleware';
-import reducer from './slice';
-import { webSocketMiddleware } from './ws-middleware';
+import { communicationMiddleware } from './middleware.js';
+import reducer from './slice.js';
+import { webSocketMiddleware } from './ws-middleware.js';
 
 declare let window: Window & { __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: <R>(data: R) => R };
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?? compose;

package/src/toolbar/DeviceSelector.tsx

@@ -2,10 +2,10 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { DeviceType } from '../devices';
+import { DeviceType } from '../devices.js';
 
-import type { DeviceToggleProps } from './DeviceToggle';
-import { DeviceToggle } from './DeviceToggle';
+import type { DeviceToggleProps } from './DeviceToggle.js';
+import { DeviceToggle } from './DeviceToggle.js';
 
 /**
  * React element for Device Selector.

package/src/toolbar/DeviceToggle.tsx

@@ -4,9 +4,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import type { AnyAction } from 'redux';
 import { UIIconButton } from '@sap-ux/ui-components';
 
-import type { DeviceType } from '../devices';
-import { changeDeviceType } from '../slice';
-import type { RootState } from '../store';
+import type { DeviceType } from '../devices.js';
+import { changeDeviceType } from '../slice.js';
+import type { RootState } from '../store.js';
 
 export interface DeviceToggleProps {
     deviceType: DeviceType;

package/src/toolbar/ModeSwitcher.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { setAppMode } from '@sap-ux-private/control-property-editor-common';
 import { UIDefaultButton, UILabel } from '@sap-ux/ui-components';
 
-import type { RootState } from '../store';
+import type { RootState } from '../store.js';
 
 import './ModeSwitcher.scss';
 

package/src/toolbar/ToolBar.tsx

@@ -6,13 +6,13 @@ import { useSelector } from 'react-redux';
 import { UIFocusZone, UILabel, UIToolbar, UIToolbarColumn } from '@sap-ux/ui-components';
 import type { Scenario } from '@sap-ux-private/control-property-editor-common';
 
-import type { RootState } from '../store';
-import { Separator, ThemeSelectorCallout } from '../components';
+import type { RootState } from '../store.js';
+import { Separator, ThemeSelectorCallout } from '../components/index.js';
 
-import { ViewChanger } from './ViewChanger';
-import { DeviceSelector } from './DeviceSelector';
-import { ModeSwitcher } from './ModeSwitcher';
-import { UndoRedoSaveActions } from './UndoRedoSaveActions';
+import { ViewChanger } from './ViewChanger.js';
+import { DeviceSelector } from './DeviceSelector.js';
+import { ModeSwitcher } from './ModeSwitcher.js';
+import { UndoRedoSaveActions } from './UndoRedoSaveActions.js';
 
 import './ToolBar.scss';
 

package/src/toolbar/UndoRedoSaveActions.tsx

@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next';
 import { redo, reloadApplication, save, undo } from '@sap-ux-private/control-property-editor-common';
 import { UIIconButton, UiIcons } from '@sap-ux/ui-components';
 
-import type { ChangesSlice } from '../slice';
-import type { RootState } from '../store';
-import { Separator } from '../components';
-import { IconName } from '../icons';
+import type { ChangesSlice } from '../slice.js';
+import type { RootState } from '../store.js';
+import { Separator } from '../components/index.js';
+import { IconName } from '../icons.js';
 
 /**
  * React element for Undo, Redo and Save.

package/src/toolbar/ViewChanger.tsx

@@ -6,8 +6,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import type { UIComboBoxOption, UIComboBoxRef } from '@sap-ux/ui-components';
 import { UIComboBox, UIIconButton, UiIcons } from '@sap-ux/ui-components';
 
-import type { RootState } from '../store';
-import { changePreviewScale, changePreviewScaleMode } from '../slice';
+import type { RootState } from '../store.js';
+import { changePreviewScale, changePreviewScaleMode } from '../slice.js';
 
 import styles from './ViewChanger.module.scss';
 

package/src/toolbar/index.ts

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

package/src/use-theme.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { useEffect } from 'react';
-import { useLocalStorage } from './use-local-storage';
+import { useLocalStorage } from './use-local-storage.js';
 
 export type ThemeName = 'dark modern' | 'light modern' | 'high contrast black';
 /**

package/src/ws-middleware.ts

@@ -1,9 +1,9 @@
 import type { AnyAction, Dispatch } from 'redux';
 import type { Middleware, MiddlewareAPI } from '@reduxjs/toolkit';
 
-import type { Action } from './actions';
-import type reducer from './slice';
-import { fileChanged, initializeLivereload } from './slice';
+import type { Action } from './actions.js';
+import type reducer from './slice.js';
+import { fileChanged, initializeLivereload } from './slice.js';
 import { externalFileChange } from '@sap-ux-private/control-property-editor-common';
 
 /**

package/test/unit/App.test.tsx

@@ -1,6 +1,8 @@
+import { jest } from '@jest/globals';
 import React from 'react';
 import { fireEvent, screen } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import reactDomTestUtils from 'react-dom/test-utils';
+const { act } = reactDomTestUtils;
 
 import { render, mockDomEventListener } from './utils';
 

package/test/unit/appIndex.test.ts

@@ -1,19 +1,37 @@
-import { start } from '../../src/index';
-import * as i18n from '../../src/i18n';
-import * as icons from '../../src/icons';
-import * as initIcon from '@sap-ux/ui-components/dist/components/Icons'; // bug in TS 4.6 https://github.com/microsoft/TypeScript/issues/43081
-import * as initTheme from '@sap-ux/ui-components/dist/theme';
-import ReactDOM from 'react-dom';
-import { store } from '../../src/store';
-import { initializeLivereload, setFeatureToggles, setProjectScenario } from '../../src/slice';
+import { jest } from '@jest/globals';
+import * as actualUiComponents from '@sap-ux/ui-components';
+
+const mockInitI18n = jest.fn();
+const mockRegisterAppIcons = jest.fn();
+const mockInitIcons = jest.fn();
+const mockInitTheme = jest.fn();
+const mockReactDOMRender = jest.fn();
+
+jest.unstable_mockModule('../../src/i18n', () => ({
+    initI18n: mockInitI18n
+}));
+
+jest.unstable_mockModule('../../src/icons', () => ({
+    registerAppIcons: mockRegisterAppIcons,
+    IconName: {}
+}));
+
+jest.unstable_mockModule('@sap-ux/ui-components', () => ({
+    ...actualUiComponents,
+    initIcons: mockInitIcons,
+    initTheme: mockInitTheme
+}));
+
+jest.unstable_mockModule('react-dom', () => ({
+    default: { render: mockReactDOMRender },
+    render: mockReactDOMRender
+}));
+
+const { start } = await import('../../src/index');
+const { store } = await import('../../src/store');
+const { initializeLivereload, setFeatureToggles, setProjectScenario } = await import('../../src/slice');
 
 describe('index', () => {
-    const i18nSpy = jest.spyOn(i18n, 'initI18n');
-    const iconsSpy = jest.spyOn(icons, 'registerAppIcons');
-    // ts-ignore
-    const initIconSpy = jest.spyOn(initIcon, 'initIcons');
-    const initThemeSpy = jest.spyOn(initTheme, 'initTheme');
-    const reactSpy = jest.spyOn(ReactDOM, 'render').mockReturnValue();
     const dispatchSpy = jest.spyOn(store, 'dispatch');
 
     test('start', () => {
@@ -26,11 +44,11 @@ describe('index', () => {
             }
         ];
         start({ previewUrl, rootElementId, livereloadPort: 8080, scenario: 'APP_VARIANT', features });
-        expect(i18nSpy).toHaveBeenCalledTimes(1);
-        expect(iconsSpy).toHaveBeenCalledTimes(1);
-        expect(initIconSpy).toHaveBeenCalledTimes(1);
-        expect(initThemeSpy).toHaveBeenCalledTimes(1);
-        expect(reactSpy).toHaveBeenCalledTimes(1);
+        expect(mockInitI18n).toHaveBeenCalledTimes(1);
+        expect(mockRegisterAppIcons).toHaveBeenCalledTimes(1);
+        expect(mockInitIcons).toHaveBeenCalledTimes(1);
+        expect(mockInitTheme).toHaveBeenCalledTimes(1);
+        expect(mockReactDOMRender).toHaveBeenCalledTimes(1);
         expect(dispatchSpy).toHaveBeenCalledTimes(3);
         expect(dispatchSpy).toHaveBeenNthCalledWith(1, setFeatureToggles(features));
         expect(dispatchSpy).toHaveBeenNthCalledWith(2, setProjectScenario('APP_VARIANT'));