@type-dom/ui 0.0.9 → 0.1.0

package/src/components/feedback/td-message-box/td-message-box.class.js

@@ -4,16 +4,21 @@ exports.TdMessageBox = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_button_class_1 = require("../../basic/td-button/td-button.class");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_input_class_1 = require("../../form/td-input/td-input.class");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
 const td_message_box_style_1 = require("./td-message-box.style");
-class TdMessageBox extends ui_abstract_1.UI {
+class TdMessageBox extends framework_1.TypeFragment {
     constructor(params = {}) {
         var _a, _b;
-        super(params, 'fragment');
+        super();
+        // 作为参数调用要用箭头函数
+        this.handleWrapperClick = () => {
+            if (this.props.closeOnClickModal) {
+                this.handleAction(this.state.distinguishCancelAndClose ? 'close' : 'cancel');
+            }
+        };
         this.handleInputEnter = (e) => {
             if (this.state.inputType !== 'textarea') {
                 e.preventDefault();
@@ -104,7 +109,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             slot: this.dialog,
         });
         this.overlayEvent = (0, framework_1.useSameTarget)(this.handleWrapperClick);
-        this.transition = new framework_1.Transition({
+        this.content = new framework_1.Transition({
             name: 'fade-in-linear',
             emits: {
                 afterLeave: () => {
@@ -114,7 +119,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             },
             slot: this.overlay,
         });
-        this.addChild(this.transition);
+        this.addChild(this.content);
         let iconComponent;
         if (params === null || params === void 0 ? void 0 : params.icon) {
             iconComponent = params.icon;
@@ -169,11 +174,11 @@ class TdMessageBox extends ui_abstract_1.UI {
                 }));
             }
         }
-        this.content = new framework_1.Div({
-            name: 'content',
+        this.msgContent = new framework_1.Div({
+            name: 'msg-content',
             styleObj: td_message_box_style_1.$messageBoxContentStyle,
         });
-        this.messageBox.addChild(this.content);
+        this.messageBox.addChild(this.msgContent);
         this.container = new framework_1.Div({
             name: 'message-box-container',
             styleObj: td_message_box_style_1.$messageBoxContainerStyle,
@@ -255,7 +260,7 @@ class TdMessageBox extends ui_abstract_1.UI {
                 }
             }
         }
-        this.content.addChild(this.container);
+        this.msgContent.addChild(this.container);
         if (params === null || params === void 0 ? void 0 : params.showInput) {
             this.input = new td_input_class_1.TdInput({
                 // id: params.inputId,
@@ -281,7 +286,7 @@ class TdMessageBox extends ui_abstract_1.UI {
                 styleObj: td_message_box_style_1.$messageBoxInputStyle,
                 childNodes: [this.input, this.errorMsg],
             });
-            this.content.addChild(this.inputDiv);
+            this.msgContent.addChild(this.inputDiv);
         }
         this.btns = new framework_1.Div({
             name: 'btns',
@@ -301,11 +306,13 @@ class TdMessageBox extends ui_abstract_1.UI {
                     click: () => {
                         console.log('this.cancelBtn click . ');
                         this.handleAction('cancel');
+                        this.resolve({ action: 'cancel' });
                     },
                     keydown: (evt) => {
                         evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                        if (evt.key === 'Enter') {
+                        if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
                             this.handleAction('cancel');
+                            this.resolve({ action: 'cancel' });
                         }
                     }
                 },
@@ -326,11 +333,15 @@ class TdMessageBox extends ui_abstract_1.UI {
             events: {
                 click: () => {
                     this.handleAction('confirm');
+                    const input = this.input;
+                    this.resolve({ action: 'confirm', input });
                 },
-                keydown: (evt) => {
+                keydown: (evt, element) => {
                     evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                    if (evt.key === 'Enter') {
+                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
                         this.handleAction('confirm');
+                        const input = this.input;
+                        this.resolve({ action: 'confirm', input });
                     }
                 },
             },
@@ -370,10 +381,9 @@ class TdMessageBox extends ui_abstract_1.UI {
     //     offDraggable()
     //   })
     // 普通显示
-    static show(params) {
+    static info(params) {
         console.log('TdMessageBox show params is ', params);
-        const msgBox = new TdMessageBox(params);
-        return msgBox.promise();
+        return new TdMessageBox(params);
     }
     // 用 callback
     static alert(message, title, params) {
@@ -381,46 +391,19 @@ class TdMessageBox extends ui_abstract_1.UI {
             title }, params));
     }
     static confirm(message, title, params) {
-        const msgBox = new TdMessageBox(Object.assign({ boxType: 'confirm', message,
+        return new TdMessageBox(Object.assign({ boxType: 'confirm', message,
             title, showCancelButton: true }, params));
-        return msgBox.promise();
     }
     // todo 多次提交时，不触发返回操作。
     static prompt(message, title, params) {
-        const msgBox = new TdMessageBox(Object.assign({ boxType: 'prompt', message,
+        return new TdMessageBox(Object.assign({ boxType: 'prompt', message,
             title, showCancelButton: true, showInput: true }, params));
-        const input = msgBox.input;
-        return msgBox.promise(input);
-    }
-    promise(input) {
-        return new Promise((resolve, reject) => {
-            var _a;
-            this.confirmBtn.setEvent('click', () => {
-                console.log('confirm click . then resolve . ');
-                resolve({ action: 'confirm', input });
-            });
-            // this.cancelBtn.removeEvent('click', this.cancelBtn.dom);
-            (_a = this.cancelBtn) === null || _a === void 0 ? void 0 : _a.setEvents({
-                click: () => {
-                    // todo
-                    console.log('this.cancelBtn click . ');
-                    // this.handleAction('cancel');
-                    resolve({ action: 'cancel' }); // todo why must add catch(...)  .otherwise it will not be resolved
-                },
-                keydown: (evt) => {
-                    // evt?.preventDefault();
-                    if ((evt === null || evt === void 0 ? void 0 : evt.key) === 'Enter') {
-                        // this.handleAction('cancel');
-                        resolve({ action: 'cancel' });
-                    }
-                },
-            });
-        });
     }
     doClose() {
         console.log('doClose . ');
-        if (!this.visible)
+        if (!this.visible) {
             return;
+        }
         this.visible = false;
         this.messageBox.style.hide();
         (0, framework_1.nextTick)(() => {
@@ -431,11 +414,6 @@ class TdMessageBox extends ui_abstract_1.UI {
             }
         });
     }
-    handleWrapperClick() {
-        if (this.props.closeOnClickModal) {
-            this.handleAction(this.state.distinguishCancelAndClose ? 'close' : 'cancel');
-        }
-    }
     handleAction(action) {
         var _a, _b, _c;
         console.log('handleAction', action);

package/src/components/feedback/td-message-box/td-message-box.interface.d.ts

@@ -1,9 +1,8 @@
-import { InputEnum, TypeElement, TypeSvgSvg } from '@type-dom/framework';
+import { InputEnum, ITypeConfig, ITypeElement, TypeElement, TypeSvgSvg } from '@type-dom/framework';
 import { IStyle } from '@type-dom/css-type';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { ISize } from '../../../styles/size';
 import { TdInput } from '../../form';
-export interface ITdMessageBox extends IUI {
+export interface ITdMessageBox extends ITypeElement {
     className: 'TdMessageBox';
 }
 type MessageType = '' | 'success' | 'warning' | 'info' | 'error';
@@ -55,8 +54,8 @@ export declare interface IMessageBoxState {
     validateError?: boolean;
     zIndex?: number;
 }
-export type Callback = ((value: string, action?: IAction) => any) | ((action: IAction) => any);
-export interface ITdMessageBoxConfig extends IUIConfig {
+export type Callback = (action: IAction) => void;
+export interface ITdMessageBoxConfig extends ITypeConfig {
     /**
      * auto focus when open message-box
      */

package/src/components/feedback/td-notification/td-notification.class.d.ts

@@ -1,15 +1,14 @@
-import { TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Transition, TypeFragment, TypeNode } from '@type-dom/framework';
 import { INotificationPosition, ITdNotification, ITdNotificationConfig } from './td-notification.interface';
-export declare class TdNotification extends UI<undefined> implements ITdNotification {
+export declare class TdNotification extends TypeFragment implements ITdNotification {
     className: 'TdNotification';
+    content: Transition;
     props: ITdNotificationConfig;
     visible: boolean;
-    private transition;
     private notification;
     private group;
     private title;
-    private content;
+    private groupContent;
     private closeBtn?;
     static notifyId: number;
     static notifications: Record<INotificationPosition, TdNotification[]>;

package/src/components/feedback/td-notification/td-notification.class.js

@@ -4,19 +4,11 @@ exports.TdNotification = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
 const td_notification_style_1 = require("./td-notification.style");
-class TdNotification extends ui_abstract_1.UI {
+class TdNotification extends framework_1.TypeFragment {
     constructor(option) {
-        let params;
-        if (typeof option === 'string') {
-            params = { message: option };
-        }
-        else {
-            params = option;
-        }
-        super(params, 'fragment');
+        super();
         this.visible = false;
         // the gap size between each notification
         this.GAP_SIZE = 16;
@@ -37,10 +29,17 @@ class TdNotification extends ui_abstract_1.UI {
                 this.startTimer(); // resume timer
             }
         };
+        let params;
+        if (typeof option === 'string') {
+            params = { message: option };
+        }
+        else {
+            params = option;
+        }
         this.className = 'TdNotification';
         (0, td_notification_style_1.useStyle)(params);
         this.to = document.body;
-        this.transition = new framework_1.Transition({
+        this.content = new framework_1.Transition({
             name: 'fade',
             emits: {
                 beforeLeave: (el, done) => {
@@ -54,7 +53,7 @@ class TdNotification extends ui_abstract_1.UI {
                 },
             },
         });
-        this.addChild(this.transition);
+        this.addChild(this.content);
         this.notification = new framework_1.Div({
             attrObj: {
                 role: 'alert',
@@ -72,7 +71,7 @@ class TdNotification extends ui_abstract_1.UI {
                 },
             },
         });
-        this.transition.addChild(this.notification);
+        this.content.addChild(this.notification);
         let iconComponent;
         if ((params === null || params === void 0 ? void 0 : params.type) && svgs_1.TypeComponentsMap[params.type]) {
             console.log('params.type is ', params.type);
@@ -101,19 +100,19 @@ class TdNotification extends ui_abstract_1.UI {
             styleObj: td_notification_style_1.$notificationTitleStyle,
         });
         this.group.addChild(this.title);
-        this.content = new framework_1.Div({
+        this.groupContent = new framework_1.Div({
             name: 'content',
             styleObj: td_notification_style_1.$notificationContentStyle,
         });
         if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.content.slotChild(params.slot);
+            this.groupContent.slotChild(params.slot);
         }
         else {
             if (params === null || params === void 0 ? void 0 : params.dangerouslyUseHTMLString) {
                 if (typeof params.message === 'string') {
                     const parser = new framework_1.Parser();
                     const el = parser.parseFromString(params.message);
-                    this.content.addChild(new framework_1.P({
+                    this.groupContent.addChild(new framework_1.P({
                         childNodes: [el],
                     }));
                 }
@@ -129,10 +128,10 @@ class TdNotification extends ui_abstract_1.UI {
                 else {
                     p.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.message));
                 }
-                this.content.addChild(p);
+                this.groupContent.addChild(p);
             }
         }
-        this.group.addChild(this.content);
+        this.group.addChild(this.groupContent);
         if ((params === null || params === void 0 ? void 0 : params.showClose) !== false) {
             this.closeBtn = new td_icon_class_1.TdIcon({
                 name: 'close-btn',

package/src/components/feedback/td-notification/td-notification.interface.d.ts

@@ -1,11 +1,10 @@
-import { TypeElement, TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeElement, TypeElement, TypeSvgSvg } from '@type-dom/framework';
 export type INotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export type INotificationType = 'success' | 'info' | 'warning' | 'error';
-export interface ITdNotification extends IUI {
+export interface ITdNotification extends ITypeElement {
     className: 'TdNotification';
 }
-export interface ITdNotificationConfig extends IUIConfig {
+export interface ITdNotificationConfig extends ITypeConfig {
     /**
      * @description custom class name for Notification
      *     default: ''

package/src/components/feedback/td-notification/td-notification.style.js

@@ -52,27 +52,27 @@ exports.$notificationStyle = {
     boxShadow: exports.$notification.shadow,
     // transition: opacity getCssVar('transition-duration'),
     transition: 'opacity ' +
-        var_1.$transitionDuration +
+        var_1.$transitionDurationDefault +
         ', ' +
         //   transform getCssVar('transition-duration'),
         'transform ' +
-        var_1.$transitionDuration +
+        var_1.$transitionDurationDefault +
         ', ' +
         //   top getCssVar('transition-duration'),
         'top ' +
-        var_1.$transitionDuration +
+        var_1.$transitionDurationDefault +
         ', ' +
         //   left getCssVar('transition-duration'),
         'left ' +
-        var_1.$transitionDuration +
+        var_1.$transitionDurationDefault +
         ', ' +
         //   right getCssVar('transition-duration'), top 0.4s,
         'right ' +
-        var_1.$transitionDuration +
+        var_1.$transitionDurationDefault +
         ', ' +
         //   bottom getCssVar('transition-duration'),
         'bottom ' +
-        var_1.$transitionDuration +
+        var_1.$transitionDurationDefault +
         ', ',
     overflowWrap: 'break-word',
     overflow: 'hidden',

package/src/components/feedback/td-only-child/td-only-child.class.d.ts

@@ -1,7 +1,7 @@
-import { ITypeConfig } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
-export declare class TdOnlyChild extends UI {
+import { ITypeConfig, SlotNode, TypeFragment } from '@type-dom/framework';
+export declare class TdOnlyChild extends TypeFragment {
     className: 'TdOnlyChild';
+    content: SlotNode;
     constructor(params?: ITypeConfig);
     setup(): null;
 }

package/src/components/feedback/td-only-child/td-only-child.class.js

@@ -4,11 +4,11 @@ exports.TdOnlyChild = void 0;
 const framework_1 = require("@type-dom/framework");
 const utils_1 = require("@type-dom/utils");
 const use_forward_ref_1 = require("../../../hooks/use-forward-ref");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdOnlyChild extends ui_abstract_1.UI {
+class TdOnlyChild extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdOnlyChild';
+        this.content = new framework_1.SlotNode();
         this.props = this.useParams(params);
     }
     setup() {

package/src/components/feedback/td-overlay/td-overlay.class.d.ts

@@ -1,8 +1,7 @@
-import { TypeElement } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv, TypeElement } from '@type-dom/framework';
 import { ITdOverlay, ITdOverlayConfig } from './td-overlay.interface';
 export declare let overlayZIndex: number;
-export declare class TdOverlay extends UI implements ITdOverlay {
+export declare class TdOverlay extends TypeDiv implements ITdOverlay {
     className: 'TdOverlay';
     props: ITdOverlayConfig;
     constructor(params?: ITdOverlayConfig);

package/src/components/feedback/td-overlay/td-overlay.class.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdOverlay = exports.overlayZIndex = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
 const td_overlay_style_1 = require("./td-overlay.style");
 exports.overlayZIndex = 2000;
-class TdOverlay extends ui_abstract_1.UI {
+class TdOverlay extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         exports.overlayZIndex = exports.overlayZIndex + 1;
         this.className = 'TdOverlay';
         this.style.addObj(td_overlay_style_1.$tdOverlayStyle);
@@ -25,11 +25,12 @@ class TdOverlay extends ui_abstract_1.UI {
                 left: '0px',
             });
         }
-        this.addChild(this.getSlotNode());
+        // this.addChild(this.getSlotNode());
+        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
     addSlot(slot) {
-        this.getSlotNode().resetSlot(slot);
+        // this.getSlotNode().resetSlot(slot);
     }
 }
 exports.TdOverlay = TdOverlay;

package/src/components/feedback/td-overlay/td-overlay.interface.d.ts

@@ -1,9 +1,9 @@
 import { Property } from '@type-dom/css-type';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdOverlay extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdOverlay extends ITypeDiv {
     className: 'TdOverlay';
 }
-export interface ITdOverlayConfig extends IUIConfig {
+export interface ITdOverlayConfig extends ITypeConfig {
     mask?: boolean;
     customMaskEvent?: boolean;
     zIndex?: Property.ZIndex;

package/src/components/feedback/td-popper/arrow/arrow.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeSpan } from '@type-dom/framework';
 import { ITdPopperArrow, ITdPopperArrowConfig } from './arrow.interface';
-export declare class TdPopperArrow extends UI implements ITdPopperArrow {
+export declare class TdPopperArrow extends TypeSpan implements ITdPopperArrow {
     className: 'TdPopperArrow';
     props: ITdPopperArrowConfig;
     private arrowOffset?;

package/src/components/feedback/td-popper/arrow/arrow.class.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperArrow = void 0;
+const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../../styles/var");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-const td_popper_const_1 = require("../td-popper.const");
-class TdPopperArrow extends ui_abstract_1.UI {
+const constants_1 = require("../constants");
+class TdPopperArrow extends framework_1.TypeSpan {
     constructor(params = {}) {
-        super(params, 'span');
+        super();
+        // this.useTag('span');
         this.className = 'TdPopperArrow';
         this.attr.addName('td-popper-arrow');
         this.style.addObj({
@@ -27,13 +28,13 @@ class TdPopperArrow extends ui_abstract_1.UI {
             boxSizing: 'border-box'
             // }
         });
-        this.buildProps({
+        this.assignProps({
             arrowOffset: 5,
         });
         this.props = this.useParams(params);
     }
     setup() {
-        const { arrowOffset, arrowRef, arrowStyle } = this.inject(td_popper_const_1.POPPER_CONTENT_INJECTION_KEY, undefined);
+        const { arrowOffset, arrowRef, arrowStyle } = this.inject(constants_1.POPPER_CONTENT_INJECTION_KEY, undefined);
         this.arrowOffset = arrowOffset;
         this.arrowRef = arrowRef;
         this.arrowStyle = arrowStyle;

package/src/components/feedback/td-popper/arrow/arrow.const.d.ts

@@ -0,0 +1,3 @@
+export declare const popperArrowProps: {
+    arrowOffset: number;
+};

package/src/components/feedback/td-popper/arrow/arrow.const.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popperArrowProps = void 0;
+exports.popperArrowProps = {
+    arrowOffset: 5,
+};

package/src/components/feedback/td-popper/arrow/arrow.interface.d.ts

@@ -1,10 +1,9 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdPopperArrow extends IUI {
+import { ITypeConfig, ITypeSpan } from '@type-dom/framework';
+export interface ITdPopperArrow extends ITypeSpan {
     className: 'TdPopperArrow';
 }
-export interface ITdPopperArrowConfig extends IUIConfig {
+export interface ITdPopperArrowConfig extends ITypeConfig {
     /**
-     *
      *     default: 5,
      */
     arrowOffset?: number;

package/src/components/feedback/td-popper/constants.d.ts

@@ -0,0 +1,25 @@
+import { IStyle } from '@type-dom/css-type';
+import { InjectionKey } from '@type-dom/framework';
+import { TdPopper } from './td-popper.class';
+export type Measurable = {
+    getBoundingClientRect: () => DOMRect;
+};
+/**
+ * triggerRef indicates the element that triggers popper
+ * contentRef indicates the element of popper content
+ * referenceRef indicates the element that popper content relative with
+ */
+export type TdPopperInjectionContext = {
+    triggerRef: Measurable | undefined;
+    contentRef: HTMLElement | undefined;
+    popperInstanceRef: TdPopper | undefined;
+    referenceRef: Measurable | undefined;
+    role: string;
+};
+export type TdPopperContentInjectionContext = {
+    arrowRef: HTMLElement | undefined;
+    arrowOffset: number | undefined;
+    arrowStyle: IStyle;
+};
+export declare const POPPER_INJECTION_KEY: InjectionKey<TdPopperInjectionContext>;
+export declare const POPPER_CONTENT_INJECTION_KEY: InjectionKey<TdPopperContentInjectionContext>;

package/src/components/feedback/td-popper/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POPPER_CONTENT_INJECTION_KEY = exports.POPPER_INJECTION_KEY = void 0;
+exports.POPPER_INJECTION_KEY = Symbol('popper');
+exports.POPPER_CONTENT_INJECTION_KEY = Symbol('popperContent');

package/src/components/feedback/td-popper/content/content.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdPopperContent, ITdPopperContentConfig } from './content.interface';
-export declare class TdPopperContent extends UI implements ITdPopperContent {
+export declare class TdPopperContent extends TypeDiv implements ITdPopperContent {
     className: 'TdPopperContent';
     props: ITdPopperContentConfig;
     private focusTrap;

package/src/components/feedback/td-popper/content/content.class.js

@@ -2,37 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperContent = void 0;
 const utils_1 = require("@type-dom/utils");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const td_form_const_1 = require("../../../form/td-form/td-form.const");
 const td_focus_trap_class_1 = require("../../td-focus-trap/td-focus-trap.class");
+const constants_1 = require("../constants");
 const content_const_1 = require("./content.const");
-const td_form_const_1 = require("../../../form/td-form/td-form.const");
-const td_popper_const_1 = require("../td-popper.const");
-class TdPopperContent extends ui_abstract_1.UI {
+class TdPopperContent extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdPopperContent';
         this.attr.addName('td-popper-content');
         this.attr.addObj({
             tabindex: -1
         });
-        this.style.addObj({
-        // padding: '10px',
-        // backgroundColor: $bgColors.default,
-        // borderRadius: $borderRadius.base,
-        // boxShadow: $boxShadow.base,
-        });
         this.focusTrap = new td_focus_trap_class_1.TdFocusTrap();
         this.addChild(this.focusTrap);
         if (params.contentStyle) { // todo
             this.style.addObj(params.contentStyle);
         }
-        this.buildProps(content_const_1.popperContentProps);
+        this.assignProps(content_const_1.popperContentProps);
         this.props = this.useParams(params);
     }
     setup() {
         const formItemContext = this.inject(td_form_const_1.formItemContextKey, undefined);
         const arrowOffset = 0;
-        this.provide(td_popper_const_1.POPPER_CONTENT_INJECTION_KEY, {
+        this.provide(constants_1.POPPER_CONTENT_INJECTION_KEY, {
             // arrowStyle,
             // arrowRef,
             arrowOffset,

package/src/components/feedback/td-popper/content/content.const.d.ts

@@ -1,3 +1,3 @@
-import { IPopperCoreConfigProps, ITdPopperContentConfig } from './content.interface';
-export declare const popperCoreConfigProps: IPopperCoreConfigProps;
+import { IPopperCoreConfig, ITdPopperContentConfig } from './content.interface';
+export declare const popperCoreProps: IPopperCoreConfig;
 export declare const popperContentProps: ITdPopperContentConfig;

package/src/components/feedback/td-popper/content/content.const.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.popperContentProps = exports.popperCoreConfigProps = void 0;
-exports.popperCoreConfigProps = {
+exports.popperContentProps = exports.popperCoreProps = void 0;
+exports.popperCoreProps = {
     boundariesPadding: 0,
-    // fallbackPlacements: undefined,
     gpuAcceleration: true,
     /**
      * @description offset of the Tooltip
@@ -19,7 +18,7 @@ exports.popperCoreConfigProps = {
     // popperOptions:  () => ({}),
     strategy: 'absolute',
 };
-exports.popperContentProps = Object.assign(Object.assign({}, exports.popperCoreConfigProps), { 
+exports.popperContentProps = Object.assign(Object.assign({}, exports.popperCoreProps), { 
     // style: {
     //   type: definePropType<StyleValue>([String, Array, Object]),
     // },