R1: move widget to common folder (#28217)

e2e/testcafe-devextreme/tests/pagination/baseProperties.ts

@@ -37,22 +37,30 @@ test('Pagination elementAttr property', async (t) => {
   },
 }));
 
-test('Pagination hint, disabled and accessKey properties', async (t) => {
+test('Pagination hint and accessKey properties', async (t) => {
   const pagination = new Pagination('#container');
   await t
-    .expect(pagination.element.getAttribute('aria-disabled'))
-    .eql('true')
-    .expect(pagination.element.hasClass('dx-state-disabled'))
-    .ok()
     .expect(pagination.element.getAttribute('accesskey'))
     .eql('F')
     .expect(pagination.element.getAttribute('title'))
     .eql('Best Pagination');
 }).before(async () => createWidget('dxPagination', {
   hint: 'Best Pagination',
-  disabled: true,
   accessKey: 'F',
   itemCount: 50,
+  focusStateEnabled: true,
+}));
+
+test('Pagination disabled property', async (t) => {
+  const pagination = new Pagination('#container');
+  await t
+    .expect(pagination.element.getAttribute('aria-disabled'))
+    .eql('true')
+    .expect(pagination.element.hasClass('dx-state-disabled'))
+    .ok();
+}).before(async () => createWidget('dxPagination', {
+  disabled: true,
+  itemCount: 50,
 }));
 
 test('Pagination tabindex and state properties', async (t) => {
@@ -90,9 +98,11 @@ test('Pagination tabindex and state properties', async (t) => {
   tabIndex: 7,
 }));
 
-test('Pagination focus method without focusStateEnabled', async (t) => {
+test('Pagination focus method & accessKey propery without focusStateEnabled', async (t) => {
   const pagination = new Pagination('#container');
   await t
+    .expect(pagination.element.getAttribute('accesskey'))
+    .eql(null)
     .expect(pagination.getPageSize(0).element.focused)
     .notOk();
 
@@ -105,6 +115,7 @@ test('Pagination focus method without focusStateEnabled', async (t) => {
     .ok();
 }).before(async () => createWidget('dxPagination', {
   focusStateEnabled: false,
+  accessKey: 'F',
   itemCount: 50,
 }));
 

packages/devextreme/js/__internal/pagination/common/widget.tsx → packages/devextreme/js/__internal/core/r1/widget.tsx

@@ -2,40 +2,40 @@
 /* eslint-disable spellcheck/spell-checker */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import '../../../events/click';
-import '../../../events/hover';
+import '@js/events/click';
+import '@js/events/hover';
 
 import {
   createReRenderEffect, InfernoEffect, InfernoWrapperComponent,
 } from '@devextreme/runtime/inferno';
 import type { RefObject } from '@devextreme-generator/declarations';
-import { createRef as infernoCreateRef } from 'inferno';
-
-import domAdapter from '../../../core/dom_adapter';
-import errors from '../../../core/errors';
-import { extend } from '../../../core/utils/extend';
-import resizeCallbacks from '../../../core/utils/resize_callbacks';
-import { normalizeStyleProp } from '../../../core/utils/style';
-import { isFunction } from '../../../core/utils/type';
+import domAdapter from '@js/core/dom_adapter';
+import errors from '@js/core/errors';
+import { extend } from '@js/core/utils/extend';
+import resizeCallbacks from '@js/core/utils/resize_callbacks';
+import { normalizeStyleProp } from '@js/core/utils/style';
+import { isFunction } from '@js/core/utils/type';
 import {
   dxClick, focus, keyboard, resize, visibility,
-} from '../../../events/short';
-import type { ConfigContextValue } from '../../core/r1/config_context';
-import { ConfigContext } from '../../core/r1/config_context';
-import { ConfigProvider } from '../../core/r1/config_provider';
-import type { EffectReturn } from '../../core/r1/utils/effect_return';
-import { combineClasses } from '../../core/r1/utils/render_utils';
-import { resolveRtlEnabled, resolveRtlEnabledDefinition } from '../../core/r1/utils/resolve_rtl';
+} from '@js/events/short';
+import type { ConfigContextValue } from '@ts/core/r1/config_context';
+import { ConfigContext } from '@ts/core/r1/config_context';
+import { ConfigProvider } from '@ts/core/r1/config_provider';
+import type { EffectReturn } from '@ts/core/r1/utils/effect_return';
+import { combineClasses } from '@ts/core/r1/utils/render_utils';
+import { resolveRtlEnabled, resolveRtlEnabledDefinition } from '@ts/core/r1/utils/resolve_rtl';
+import { createRef as infernoCreateRef } from 'inferno';
+
+import type { BaseWidgetProps } from './base_props';
+import { BaseWidgetDefaultProps } from './base_props';
 import {
   subscribeToDxActiveEvent,
   subscribeToDxFocusInEvent,
   subscribeToDxFocusOutEvent,
   subscribeToDxHoverEndEvent,
   subscribeToDxHoverStartEvent,
   subscribeToDxInactiveEvent,
-} from '../../core/r1/utils/subscribe_to_event';
-import type { BaseWidgetProps } from '../base_props';
-import { BaseWidgetDefaultProps } from '../base_props';
+} from './utils/subscribe_to_event';
 
 const DEFAULT_FEEDBACK_HIDE_TIMEOUT = 400;
 const DEFAULT_FEEDBACK_SHOW_TIMEOUT = 30;
@@ -534,30 +534,23 @@ export class Widget extends InfernoWrapperComponent<WidgetProps> {
     const props = {
       ...extend({}, accessKey && { accessKey }) as Record<string, string>,
       ...getAria({ ...aria, disabled, hidden: !visible }),
-      ...extend({}, this.props) as Record<string, string>,
+      ...extend({}, this.getRestAttributes(
+        this.props as Record<string, unknown>,
+      )) as Record<string, string>,
     };
-    return this.getAttributesCore(props);
+    return props;
   }
 
-  getAttributesCore(props: Record<string, string>): Record<string, string> {
-    const {
-      height,
-      width,
-      activeStateEnabled,
-      hoverStateEnabled,
-      focusStateEnabled,
-      _feedbackHideTimeout,
-      _feedbackShowTimeout,
-      addWidgetClass,
-      rootElementRef,
-      rtlEnabled,
-      aria,
-      hint,
-      cssText,
-      classes,
-      name,
-      ...result
-    } = props;
+  getRestAttributes(props: Record<string, unknown>): Record<string, unknown> {
+    const result = { ...props };
+
+    [
+      '_feedbackHideTimeout', '_feedbackShowTimeout', 'accessKey', 'activeStateEnabled', 'activeStateUnit', 'addWidgetClass', 'aria', 'children', 'className', 'classes', 'cssText', 'disabled', 'focusStateEnabled', 'height', 'hint', 'hoverStateEnabled', 'name', 'onActive', 'onClick', 'onDimensionChanged', 'onFocusIn', 'onFocusOut', 'onHoverEnd', 'onHoverStart', 'onInactive', 'onKeyDown', 'onRootElementRendered', 'onVisibilityChange', 'rootElementRef', 'rtlEnabled', 'tabIndex', 'visible', 'width',
+    ].forEach((exclude) => {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete result[exclude];
+    });
+
     return result;
   }
 
@@ -626,11 +619,15 @@ export class Widget extends InfernoWrapperComponent<WidgetProps> {
   }
 
   activate(): void {
-    this.state.active = true;
+    this.setState({
+      active: true,
+    });
   }
 
   deactivate(): void {
-    this.state.active = false;
+    this.setState({
+      active: false,
+    });
   }
 
   render(): JSX.Element {

packages/devextreme/js/__internal/pagination/common/base_pagination_props.ts

@@ -1,9 +1,9 @@
 import type { DisplayMode } from '@js/common';
 import type { PageSize } from '@js/ui/pagination_types';
+import { BaseWidgetDefaultProps, type BaseWidgetProps } from '@ts/core/r1/base_props';
 
 import messageLocalization from '../../../localization/message';
 import type { EventCallback } from '../../core/r1/event_callback';
-import { BaseWidgetDefaultProps, type BaseWidgetProps } from '../base_props';
 
 export interface BasePaginationProps extends BaseWidgetProps {
   isGridCompatibilityMode?: boolean;

packages/devextreme/js/__internal/pagination/content.tsx

@@ -3,6 +3,7 @@
 import { InfernoComponent, InfernoEffect } from '@devextreme/runtime/inferno';
 import type { RefObject } from '@devextreme-generator/declarations';
 import type { DisplayMode } from '@js/common';
+import { Widget } from '@ts/core/r1/widget';
 import { createRef as infernoCreateRef } from 'inferno';
 
 import { registerKeyboardAction } from '../../ui/shared/accessibility';
@@ -21,7 +22,6 @@ import { KeyboardActionContext } from './common/keyboard_action_context';
 import { PaginationConfigProvider } from './common/pagination_config_provider';
 import type { PaginationProps } from './common/pagination_props';
 import { PaginationDefaultProps } from './common/pagination_props';
-import { Widget } from './common/widget';
 import { InfoText } from './info';
 import { PageSizeSelector } from './page_size/selector';
 import { PageIndexSelector } from './pages/page_index_selector';

packages/devextreme/js/__internal/pagination/editors/common/widget_props.ts

@@ -1,6 +1,6 @@
+import { BaseWidgetDefaultProps } from '@ts/core/r1/base_props';
 import type { RefObject } from 'inferno';
 
-import { BaseWidgetDefaultProps } from '../../base_props';
 import type { BaseWidgetProps } from './base_widget_props';
 
 const DEFAULT_FEEDBACK_HIDE_TIMEOUT = 400;

packages/devextreme/js/integration/knockout/component_registrator.js

@@ -7,6 +7,7 @@ import registerComponentCallbacks from '../../core/component_registrator_callbac
 import Widget from '../../ui/widget/ui.widget';
 import VizWidget from '../../__internal/viz/core/m_base_widget';
 import ComponentWrapper from '../../renovation/component_wrapper/common/component';
+import { ComponentWrapper as ComponentWrapperMigrated } from '../../__internal/core/r1/component_wrapper';
 import Draggable from '../../ui/draggable';
 import ScrollView from '../../ui/scroll_view';
 import { KoTemplate } from './template';
@@ -212,7 +213,7 @@ if(ko) {
 
                 return {
                     controlsDescendantBindings: componentClass.subclassOf(Widget) || componentClass.subclassOf(VizWidget) ||
-                    (componentClass.subclassOf(ComponentWrapper) && !(component instanceof ScrollView)) || component instanceof Draggable
+                    ((componentClass.subclassOf(ComponentWrapper) || componentClass.subclassOf(ComponentWrapperMigrated)) && !(component instanceof ScrollView)) || component instanceof Draggable
                 };
             }
         };