diff --git a/api/@internal/component/ets/alert_dialog.d.ts b/api/@internal/component/ets/alert_dialog.d.ts
index 6a017f197..ccb7d6c8b 100644
--- a/api/@internal/component/ets/alert_dialog.d.ts
+++ b/api/@internal/component/ets/alert_dialog.d.ts
@@ -44,6 +44,42 @@ export declare enum DialogAlignment {
    * @since 7
    */
   Default,
+
+  /**
+   * Align the upper left corner.
+   * @since 8
+   */
+  TopStart,
+
+  /**
+   * Align the upper right corner.
+   * @since 8
+   */
+  TopEnd,
+
+  /**
+   * Left center alignment.
+   * @since 8
+   */
+  CenterStart,
+
+  /**
+   * Right center alignment.
+   * @since 8
+   */
+  CenterEnd,
+
+  /**
+   * Align the lower left corner.
+   * @since 8
+   */
+  BottomStart,
+
+  /**
+   * Align the lower right corner.
+   * @since 8
+   */
+  BottomEnd,
 }
 
 /**
diff --git a/api/@internal/component/ets/alphabet_indexer.d.ts b/api/@internal/component/ets/alphabet_indexer.d.ts
index 57aa49bc4..100e14bc2 100644
--- a/api/@internal/component/ets/alphabet_indexer.d.ts
+++ b/api/@internal/component/ets/alphabet_indexer.d.ts
@@ -123,6 +123,30 @@ declare class AlphabetIndexerAttribute<T> extends CommonMethod<T> {
    * @since 7
    */
   alignStyle(value: IndexerAlign): T;
+
+  /**
+   * Index bar selection callback and return the strings which display on pop-up.
+   * @since 8
+   */
+  onRequestPopupData(event: (index: number) => Array<string>): T;
+
+  /**
+   * Pop-up selection callback.
+   * @since 8
+   */
+  onPopupSelected(event: (index: number) => void): T;
+
+  /**
+   * Select the index.
+   * @since 8
+   */
+  selectedIndex(index: number): T;
+
+  /**
+   * Position of the pop-up windows, relative to the midpoint of the top border of the indexer bar.
+   * @since 8
+   */
+  popupPosition(value: {offsetX: number, offsetY: number}): T;
 }
 
 export declare const AlphabetIndexerInterface: AlphabetIndexer;
diff --git a/api/@internal/component/ets/button.d.ts b/api/@internal/component/ets/button.d.ts
index 86a596211..e0f94093e 100644
--- a/api/@internal/component/ets/button.d.ts
+++ b/api/@internal/component/ets/button.d.ts
@@ -13,10 +13,9 @@
  * limitations under the License.
  */
 
-import { Resource } from '.';
 import { CommonMethod } from "./common";
 import { FontWeight, FontStyle } from "./enums";
-import { Length, ResourceColor, ResourceStr } from "./units";
+import { Length, ResourceColor, ResourceStr, Resource } from "./units";
 
 /**
  * Provides a button component.
diff --git a/api/@internal/component/ets/canvas.d.ts b/api/@internal/component/ets/canvas.d.ts
index 87c0fdb6d..c860017b2 100644
--- a/api/@internal/component/ets/canvas.d.ts
+++ b/api/@internal/component/ets/canvas.d.ts
@@ -23,7 +23,7 @@ import { Matrix2D } from "./matrix2d";
  * "nonzero": (Default) Non-zero Wrap Rules
  * @since 8
  */
-export declare type CanvasFillRule = 'evenodd' | 'nonzero';
+export declare type CanvasFillRule = "evenodd" | "nonzero";
 
 /**
  * Specifies the attribute of drawing the end of each line segment. The following configurations are supported:
@@ -33,7 +33,7 @@ export declare type CanvasFillRule = 'evenodd' | 'nonzero';
  *    as the segment and is half the thickness of the segment.
  * @since 8
  */
-export declare type CanvasLineCap = 'butt' | 'round' | 'square';
+export declare type CanvasLineCap = "butt" | "round" | "square";
 
 /**
  * Sets the attribute of how two connected parts (line segments, arcs, and curves) whose length is not 0
@@ -46,7 +46,7 @@ export declare type CanvasLineCap = 'butt' | 'round' | 'square';
  *    connected section. The radius of the fillet is the width of the segment.
  * @since 8
  */
-export declare type CanvasLineJoin = 'bevel' | 'miter' | 'round';
+export declare type CanvasLineJoin = "bevel" | "miter" | "round";
 
 /**
  * Indicates the attribute of the current text direction. The options are as follows:
@@ -55,7 +55,7 @@ export declare type CanvasLineJoin = 'bevel' | 'miter' | 'round';
  * "rtl": The text direction is from right to left.
  * @since 8
  */
-export declare type CanvasDirection = 'inherit' | 'ltr' | 'rtl';
+export declare type CanvasDirection = "inherit" | "ltr" | "rtl";
 
 /**
  * Describes the alignment mode for drawing text. The options are as follows:
@@ -68,7 +68,7 @@ export declare type CanvasDirection = 'inherit' | 'ltr' | 'rtl';
  *    and right alignment refers to the local from right to left)
  * @since 8
  */
-export declare type CanvasTextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
+export declare type CanvasTextAlign = "center" | "end" | "left" | "right" | "start";
 
 /**
  * Text baseline, which supports the following configurations:
@@ -82,7 +82,7 @@ export declare type CanvasTextAlign = 'center' | 'end' | 'left' | 'right' | 'sta
  * "top": The text baseline is at the top of the text block.
  * @since 8
  */
-export declare type CanvasTextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top';
+export declare type CanvasTextBaseline = "alphabetic" | "bottom" | "hanging" | "ideographic" | "middle" | "top";
 
 /**
  * Sets the image smoothness attribute. The options are as follows:
@@ -91,7 +91,7 @@ export declare type CanvasTextBaseline = 'alphabetic' | 'bottom' | 'hanging' | '
  * "medium": medium
  * @since 8
  */
-export declare type ImageSmoothingQuality = 'high' | 'low' | 'medium';
+export declare type ImageSmoothingQuality = "high" | "low" | "medium";
 
 /**
  * Opaque objects that describe gradients, created by createLinearGradient() or createRadialGradient()
@@ -395,7 +395,7 @@ export declare class ImageBitmap {
  * Image data object
  * @since 8
  */
-export declare interface ImageData {
+export declare class ImageData {
   /**
    * Array containing image pixel data
    * @since 8
@@ -998,7 +998,7 @@ declare class CanvasRenderer extends CanvasPath {
  * Draw context object for the Canvas component.
  * @since 8
  */
-export declare class RenderingContext extends CanvasRenderer {
+export declare class CanvasRenderingContext2D extends CanvasRenderer {
   /**
    * The default value is 0, which is bound to the height of the specified canvas. The value is read-only.
    * @since 8
@@ -1032,7 +1032,7 @@ export declare class RenderingContext extends CanvasRenderer {
  * Draw context object for the OffscreenCanvas component.
  * @since 8
  */
-export declare class OffscreenRenderingContext extends CanvasRenderer {
+export declare class OffscreenCanvasRenderingContext2D extends CanvasRenderer {
   /**
    * Generate a character string in the data url format.
    * @param type Image format. The default value is image/png.
@@ -1055,14 +1055,14 @@ export declare class OffscreenRenderingContext extends CanvasRenderer {
    * @param settings Drawing attribute. For details, see {@link RenderingContextSettings}.
    * @since 8
    */
-  constructor(width: number, height: number, settings?: RenderingContextSettings);
+  constructor(width: number, height: number,settings?: RenderingContextSettings);
 }
 
 /**
  * Draw an object off the screen. The drawing content is not directly displayed on the screen.
  * @since 8
  */
-export declare interface OffscreenCanvas extends CanvasRenderer {
+export declare class OffscreenCanvas extends CanvasRenderer {
   /**
    * Height of the off-screen canvas.
    * @since 8
@@ -1097,10 +1097,10 @@ export declare interface OffscreenCanvas extends CanvasRenderer {
 interface Canvas extends CanvasAttribute<Canvas> {
   /**
    * Construct a canvas component.
-   * @param context Canvas context object. For details, see {@link RenderingContext}.
+   * @param context Canvas context object. For details, see {@link CanvasRenderingContext2D}.
    * @since 8
    */
-  (context?: RenderingContext): Canvas;
+  (context?: CanvasRenderingContext2D): Canvas;
 }
 
 declare class CanvasAttribute<T> extends CommonMethod<T> {
diff --git a/api/@internal/component/ets/checkbox.d.ts b/api/@internal/component/ets/checkbox.d.ts
new file mode 100644
index 000000000..f777f68c9
--- /dev/null
+++ b/api/@internal/component/ets/checkbox.d.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common";
+import { ResourceColor } from "./units";
+
+/**
+ * Defines the option of Checkbox.
+ * @since 8
+ */
+export declare interface CheckboxOption {
+  /**
+   * Current name of Checkbox.
+   * @since 8
+   */
+   name?: string;
+
+  /**
+   * Sets the group of Checkbox.
+   * @since 8
+   */
+   group?: string;
+}
+
+/**
+ * Provides an interface for the Checkbox component.
+ * @since 8
+ */
+interface Checkbox extends CheckboxAttribute<Checkbox> {
+  /**
+   * Construct the Checkbox component.
+   * Called when the Checkbox component is used.
+   * @since 8
+   */
+  (options?: CheckboxOption): Checkbox;
+}
+
+/**
+ * Defines the attribute functions of Checkbox.
+ * @since 8
+ */
+declare class CheckboxAttribute<T> extends CommonMethod<T> {
+
+  /**
+   * setting whether checkbox is selected.
+   * @since 8
+   */
+   select(value: boolean): T;
+
+  /**
+   * setting the display color of checkbox.
+   * @since 8
+   */
+   selectedColor(value: ResourceColor): T;
+
+  /**
+   * Called when the selection status changes.
+   * @since 8
+   */
+  onChange(callback: (value: boolean) => void): T;
+}
+
+export declare class CheckboxExtend<T> extends CheckboxAttribute<T> {}
+export declare const CheckboxInterface: Checkbox;
diff --git a/api/@internal/component/ets/checkboxgroup.d.ts b/api/@internal/component/ets/checkboxgroup.d.ts
new file mode 100644
index 000000000..3c556a3f9
--- /dev/null
+++ b/api/@internal/component/ets/checkboxgroup.d.ts
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common";
+import { ResourceColor } from "./units";
+
+/**
+ * CheckboxGroup SelectStatus
+ * @since 8
+ */
+export declare enum SelectStatus {
+  /**
+   * All checkboxs is selected.
+   * @since 8
+   */
+  All,
+  /**
+   * Part of the checkbox is selected.
+   * @since 8
+   */
+  Part,
+  /**
+   * None of the checkbox is selected.
+   * @since 8
+   */
+  None,
+}
+
+/**
+ * Defines the option of CheckboxGroup.
+ * @since 8
+ */
+export declare interface CheckboxGroupOption {
+  /**
+   * Setting the group of CheckboxGroup.
+   * @since 8
+   */
+   group?: string;
+}
+
+/**
+ * Provides an interface for the CheckboxGroup component.
+ * @since 8
+ */
+interface CheckboxGroup extends CheckboxGroupAttribute<CheckboxGroup> {
+  /**
+   * Called when the CheckboxGroup component is used.
+   * @since 8
+   */
+  (options?: CheckboxGroupOption): CheckboxGroup;
+}
+
+/**
+ * Defines the attribute functions of CheckboxGroup.
+ * @since 8
+ */
+declare class CheckboxGroupAttribute<T> extends CommonMethod<T> {
+
+  /**
+   * setting whether all checkbox is selected.
+   * @since 8
+   */
+   selectAll(value: boolean): T;
+
+  /**
+   * setting the display color of checkbox.
+   * @since 8
+   */
+   selectedColor(value: ResourceColor): T;
+
+  /**
+   * Called when the selection status changes.
+   * @since 8
+   */
+  onChange(callback: (name: Array<any>, status: SelectStatus) => void): T;
+}
+
+export declare class CheckboxGroupExtend<T> extends CheckboxGroupAttribute<T> {}
+export declare const CheckboxGroupInterface: CheckboxGroup;
diff --git a/api/@internal/component/ets/common.d.ts b/api/@internal/component/ets/common.d.ts
index 8bfd39222..81735680e 100644
--- a/api/@internal/component/ets/common.d.ts
+++ b/api/@internal/component/ets/common.d.ts
@@ -36,7 +36,8 @@ import {
   SharedTransitionEffectType,
   TransitionType,
   Visibility,
-  FocusDirection,
+  MouseButton,
+  MouseAction,
   Placement,
   HoverEffect,
 } from "./enums";
@@ -225,6 +226,24 @@ interface PreviewParams {
   dpi?: number;
 }
 
+/**
+ * ItemDragInfo object description
+ * @since 8
+ */
+export interface ItemDragInfo {
+  /**
+   * Obtains the X coordinate of the drag window, in vp.
+   * @since 8
+   */
+  x: number;
+
+  /**
+   * Obtains the Y coordinate of the drag window, in vp.
+   * @since 8
+   */
+  y: number;
+}
+
 /**
  * Defining animation function.
  * @since 7
@@ -327,6 +346,48 @@ export interface ClickEvent extends BaseEvent {
   y: number;
 }
 
+/**
+ * The mouse click action triggers this method invocation.
+ * @since 8
+ */
+export interface MouseEvent extends BaseEvent {
+  /**
+   * Mouse button of the click event.
+   * @since 8
+   */
+  button: MouseButton;
+
+  /**
+   * Mouse action of the click event.
+   * @since 8
+   */
+  action: MouseAction;
+
+  /**
+   * X coordinate of the click point relative to the left edge of the device screen.
+   * @since 8
+   */
+  screenX: number;
+
+  /**
+   * The Y coordinate of the click point relative to the upper edge of the device screen.
+   * @since 8
+   */
+  screenY: number;
+
+  /**
+   * X coordinate of the click point relative to the left edge of the clicked element.
+   * @since 8
+   */
+  x: number;
+
+  /**
+   * Y coordinate of the click point relative to the upper edge of the clicked element.
+   * @since 8
+   */
+  y: number;
+}
+
 /**
  * Type of the touch event.
  * @since 7
@@ -488,7 +549,7 @@ export interface KeyEvent {
  * Component State Styels.
  * @since 8
  */
-export interface StateStyels {
+interface StateStyels {
   /**
    * Defines normal state styles.
    * @since 8
@@ -768,6 +829,24 @@ export declare class CommonMethod<T> {
    */
   onClick(event: (event?: ClickEvent) => void): T;
 
+  /**
+   * Trigger a mouse hover event.
+   * @since 8
+   */
+  onHover(event: (isHover?: boolean) => void): T;
+
+  /**
+   * Set hover effect.
+   * @since 8
+   */
+  hoverEffect(value: HoverEffect): T;
+
+  /**
+   * Trigger a mouse event.
+   * @since 8
+   */
+  onMouse(event: (event?: MouseEvent) => void): T;
+
   /**
    * Trigger a touch event when touched.
    * @since 7
@@ -1223,6 +1302,12 @@ export declare class CommonMethod<T> {
    */
   key(value: string): T;
 
+  /**
+   * Id. User can set an id to the component to identify it.
+   * @since 8
+   */
+  id(value: string): T;
+
   /**
    * geometryTransition
    * @since 7
diff --git a/api/@internal/component/ets/counter.d.ts b/api/@internal/component/ets/counter.d.ts
index b2ae935bb..ef55ad952 100644
--- a/api/@internal/component/ets/counter.d.ts
+++ b/api/@internal/component/ets/counter.d.ts
@@ -17,36 +17,30 @@ import { CommonMethod } from "./common";
 
 /**
  * Counter component, which provides corresponding increment or decrement counting operations.
- * @since 8
+ * @since 7
  */
 interface Counter extends CounterAttribute<Counter> {
   /**
    * Return Counter.
-   * @since 8
+   * @since 7
    */
   (): Counter;
 }
 
 /**
  * Defines the Counter attribute functions.
- * @since 8
+ * @since 7
  */
 declare class CounterAttribute<T> extends CommonMethod<T> {
-  /**
-   * Listens to the value change event.
-   * @since 8
-   */
-  onStateChange(event: () => void): T;
-
   /**
    * Listen to the event that the value increases.
-   * @since 8
+   * @since 7
    */
   onInc(event: () => void): T;
 
   /**
    * Listens to the number decrease event.
-   * @since 8
+   * @since 7
    */
   onDec(event: () => void): T;
 }
diff --git a/api/@internal/component/ets/data_panel.d.ts b/api/@internal/component/ets/data_panel.d.ts
index 9441404e3..bcecffdba 100644
--- a/api/@internal/component/ets/data_panel.d.ts
+++ b/api/@internal/component/ets/data_panel.d.ts
@@ -30,7 +30,7 @@ export declare enum DataPanelType {
    * Line Rainbow
    * @since 8
    */
-  Rainbow,
+  Circle,
 }
 
 /**
diff --git a/api/@internal/component/ets/date_picker.d.ts b/api/@internal/component/ets/date_picker.d.ts
index 5ea5d15c5..ed2f1aa57 100644
--- a/api/@internal/component/ets/date_picker.d.ts
+++ b/api/@internal/component/ets/date_picker.d.ts
@@ -33,6 +33,10 @@ export declare enum DatePickerType {
   Date,
 }
 
+/**
+ * Defines the struct of DatePickerResult.
+ * @since 8
+ */
 export declare interface DatePickerResult {
   /**
    * Application year
@@ -132,5 +136,71 @@ declare class DatePickerAttribute<T> extends CommonMethod<T> {
   onChange(callback: (value: DatePickerResult) => void): T;
 }
 
+/**
+ * Defines the DatePickerDialogOption for Data Picker Dialog.
+ * @since 8
+ */
+export declare interface DatePickerDialogOption extends DatePickerOption {
+  /**
+   * Date selector: true: displays the lunar calendar. false: The lunar calendar is not displayed.
+   * @since 8
+   */
+  lunar?: boolean;
+
+  /**
+   * Time Selector: indicates whether to display the 24-hour clock.
+   * @since 8
+   */
+  useMilitaryTime?: boolean;
+}
+
+/**
+ * Defines the event callback status in the pop-up window state.
+ * @since 8
+ */
+export declare enum DialogStatus {
+  /**
+   * Triggered when a user clicks the OK button.
+   * @since 8
+   */
+  Accept,
+
+  /**
+   * Triggered when a user taps the Cancel button.
+   * @since 8
+   */
+  Cancel,
+
+  /**
+   * Triggered when a user performs scrolling selection.
+   * @since 8
+   */
+  Update,
+}
+
+/**
+ * Defines the DatePickerDialogResult for DatePickerDialog.
+ * @since 8
+ */
+export declare interface DatePickerDialogResult extends DatePickerResult {
+  /**
+   * Operation status of the current user.
+   * @since 8
+   */
+  status: DialogStatus;
+}
+
+/**
+ * Defines DatePickerDialog which uses show method to show DatePicker dialog.
+ * @since 8
+ */
+export declare class DatePickerDialog {
+  /**
+   * Invoking method display.
+   * @since 8
+   */
+  static show(options?: DatePickerDialogOption, callback?: (value: DatePickerDialogResult) => void);
+}
+
 export declare class DatePickerExtend<T> extends DatePickerAttribute<T> {}
 export declare const DatePickerInterface: DatePicker;
diff --git a/api/@internal/component/ets/enums.d.ts b/api/@internal/component/ets/enums.d.ts
index e9050ce5a..0387bfb73 100644
--- a/api/@internal/component/ets/enums.d.ts
+++ b/api/@internal/component/ets/enums.d.ts
@@ -205,6 +205,84 @@ export declare enum TouchType {
   Cancel,
 }
 
+/**
+ * Function Called by Mouse
+ * @since 8
+ */
+export declare enum MouseButton {
+  /**
+   * Mouse Left Button.
+   * @since 8
+   */
+  Left,
+
+  /**
+   * Mouse Right Button.
+   * @since 8
+   */
+  Right,
+
+  /**
+   * Mouse Middle Button.
+   * @since 8
+   */
+  Middle,
+
+  /**
+   * Mouse Back Button.
+   * @since 8
+   */
+  Back,
+
+  /**
+   * Mouse Forward Button.
+   * @since 8
+   */
+  Forward,
+
+  /**
+   * Mouse None Button.
+   * @since 8
+   */
+  None,
+}
+
+/**
+ * Function Called by Mouse
+ * @since 8
+ */
+export declare enum MouseAction {
+  /**
+   * Triggered when the mouse is pressed.
+   * @since 8
+   */
+  Press,
+
+  /**
+   * Triggered when the mouse is released.
+   * @since 8
+   */
+  Release,
+
+  /**
+   * Triggered when the mouse is Moved.
+   * @since 8
+   */
+  Move,
+
+  /**
+   * Triggered when the mouse is Hovered.
+   * @since 8
+   */
+  Hover,
+
+  /**
+   * Triggered when the mouse status is None.
+   * @since 8
+   */
+  None,
+}
+
 /**
  * Animation status.
  * @since 7
diff --git a/api/@internal/component/ets/gauge.d.ts b/api/@internal/component/ets/gauge.d.ts
index 17f32b8e6..90c0b3a48 100644
--- a/api/@internal/component/ets/gauge.d.ts
+++ b/api/@internal/component/ets/gauge.d.ts
@@ -63,18 +63,6 @@ declare class GaugeAttribute<T> extends CommonMethod<T> {
    * @since 8
    */
   strokeWidth(length: number): T;
-
-  /**
-   * Mark points describe the content of the text.
-   * @since 8
-   */
-  labelTextConfig(markedLabelText: string): T;
-
-  /**
-   * Color of the marker point description text.
-   * @since 8
-   */
-  labelColorConfig(markedLabelColor: Color): T;
 }
 
 export declare class GaugeExtend<T> extends GaugeAttribute<T> {}
diff --git a/api/@internal/component/ets/gesture.d.ts b/api/@internal/component/ets/gesture.d.ts
index 3860c2702..c5591e0fe 100644
--- a/api/@internal/component/ets/gesture.d.ts
+++ b/api/@internal/component/ets/gesture.d.ts
@@ -447,8 +447,7 @@ interface SwipeGesture {
    * Set the value.
    * @since 8
    */
-  (value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
-  : SwipeGesture;
+  (value?: { fingers?: number; direction?: SwipeDirection; speed?: number }): SwipeGesture;
 
   /**
    * Slide gesture recognition success callback.
diff --git a/api/@internal/component/ets/grid.d.ts b/api/@internal/component/ets/grid.d.ts
index 227084a5a..0528025cc 100644
--- a/api/@internal/component/ets/grid.d.ts
+++ b/api/@internal/component/ets/grid.d.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { CommonMethod } from "./common";
+import { CommonMethod, ItemDragInfo } from "./common";
 import { BarState, Color } from "./enums";
 import { Scroller } from "./scroll";
 import { Length } from "./units";
@@ -29,6 +29,17 @@ interface Grid extends GridAttribute<Grid> {
   (scroller?: Scroller): Grid;
 }
 
+/**
+ * The enum of property layoutDirection
+ * @since 8
+ */
+export declare enum GridDirection {
+  Row,
+  Column,
+  RowReverse,
+  ColumnReverse
+}
+
 /**
  * @since 7
  */
@@ -86,6 +97,75 @@ declare class GridAttribute<T> extends CommonMethod<T> {
    * @since 7
    */
   cachedCount(value: number): T;
+
+  /**
+   * editMode
+   * @since 8
+   */
+  editMode(value: boolean): T;
+
+  /**
+   * maxCount
+   * @since 8
+   */
+  maxCount(value: number): T;
+
+   /**
+    * minCount
+    * @since 8
+    */
+  minCount(value: number): T;
+
+  /**
+   * cellLength
+   * @since 8
+   */
+  cellLength(value: number): T;
+
+  /**
+   * control GridDirection of the grid.
+   * @since 8
+   */
+  layoutDirection(value: GridDirection): T;
+
+  /**
+   * control if the grid supports animation.
+   * @since 8
+   */
+  supportAnimation(value: boolean): T;
+
+  /**
+   * After a listener is bound, the component can be dragged. After the drag occurs, a callback is triggered.
+   * (To be triggered, press and hold for 170 milliseconds (ms))
+   * @since 8
+   */
+  onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) | void): T;
+
+  /**
+   * After binding, a callback is triggered when the component is dragged to the range of the component.
+   * @since 8
+   */
+  onItemDragEnter(event: (event: ItemDragInfo) => void): T;
+
+  /**
+   * After binding, a callback is triggered when the drag moves within the range of a placeable component.
+   * @since 8
+   */
+  onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void): T;
+
+  /**
+   * After binding, a callback is triggered when the component is dragged out of the component range.
+   * @since 8
+   */
+  onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void): T;
+
+  /**
+   * The component bound to this event can be used as the drag release target.
+   * This callback is triggered when the drag behavior is stopped within the scope of the component.
+   * @since 8
+   */
+  onItemDrop(event:
+    (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void): T;
 }
 
 export declare class GridExtend<T> extends GridAttribute<T> {}
diff --git a/api/@internal/component/ets/grid_container.d.ts b/api/@internal/component/ets/grid_container.d.ts
index dd3642795..fed3cf23a 100644
--- a/api/@internal/component/ets/grid_container.d.ts
+++ b/api/@internal/component/ets/grid_container.d.ts
@@ -60,7 +60,7 @@ export declare interface GridContainerOption {
    * Sets the total number of columns in the current layout.
    * @since 7
    */
-  columns?: number | 'auto';
+  columns?: number | "auto";
 
   /**
    * Select the device width type.
diff --git a/api/@internal/component/ets/index.d.ts b/api/@internal/component/ets/index.d.ts
index e15f82249..ad2b84352 100644
--- a/api/@internal/component/ets/index.d.ts
+++ b/api/@internal/component/ets/index.d.ts
@@ -22,6 +22,8 @@ export * from "./blank";
 export * from "./button";
 export * from "./calendar";
 export * from "./canvas";
+export * from "./checkbox";
+export * from "./checkboxgroup";
 export * from "./circle";
 export * from "./column";
 export * from "./column_split";
@@ -43,7 +45,6 @@ export * from "./gridItem";
 export * from "./grid_container";
 export * from "./image";
 export * from "./image_animator";
-export * from "./inspector";
 export * from "./lazyForEach";
 export * from "./line";
 export * from "./list";
@@ -55,7 +56,9 @@ export * from "./navigator";
 export * from "./pageTransition";
 export * from "./panel";
 export * from "./path";
+export * from "./pattern_lock";
 export * from "./piece";
+export * from "./plugin_component";
 export * from "./polygon";
 export * from "./polyline";
 export * from "./progress";
@@ -69,6 +72,7 @@ export * from "./row_split";
 export * from "./scroll";
 export * from "./scroll_bar";
 export * from "./search";
+export * from "./select";
 export * from "./shape";
 export * from "./sheet";
 export * from "./slider";
@@ -82,9 +86,12 @@ export * from "./tabs";
 export * from "./tab_content";
 export * from "./text";
 export * from "./text_area";
+export * from "./text_clock";
 export * from "./text_input";
 export * from "./text_picker";
+export * from "./text_timer";
 export * from "./toggle";
 export * from "./units";
 export * from "./video";
 export * from "./xcomponent";
+export * from "./inspector";
diff --git a/api/@internal/component/ets/inspector.d.ts b/api/@internal/component/ets/inspector.d.ts
index cce44ea6b..d093971a2 100644
--- a/api/@internal/component/ets/inspector.d.ts
+++ b/api/@internal/component/ets/inspector.d.ts
@@ -13,10 +13,15 @@
  * limitations under the License.
  */
 
+import { TouchObject } from "./common";
+import { KeyEvent } from "./common";
+import { MouseEvent } from "./common";
+
 /**
  * Get inspector node infos.
  * @since 7
  * @systemapi
+ * @deprecated
  */
 export declare function getInspectorNodes(): object;
 
@@ -24,6 +29,7 @@ export declare function getInspectorNodes(): object;
  * Get inspector node info by node id.
  * @since 7
  * @systemapi
+ * @deprecated
  */
 export declare function getInspectorNodeById(id: number): object;
 
@@ -31,13 +37,15 @@ export declare function getInspectorNodeById(id: number): object;
  * Get inspector info by key.
  * @since 8
  * @systemapi
+ * @test
  */
-export declare function getInspectorByKey(key: string): string;
+export declare function getInspectorByKey(id: string): string;
 
 /**
  * Get inspector tree.
- * @systemapi
  * @since 8
+ * @systemapi
+ * @test
  */
 export declare function getInspectorTree(): string;
 
@@ -45,5 +53,55 @@ export declare function getInspectorTree(): string;
  * Send event to inspector by key. Return false if no inspector with key is found.
  * @since 8
  * @systemapi
+ * @test
  */
-export declare function sendEventByKey(key: string, action: number, params: string): boolean;
+export declare function sendEventByKey(id: string, action: number, params: string): boolean;
+
+/**
+ * Send touch event.
+ * @since 8
+ * @systemapi
+ * @test
+ */
+export declare function sendTouchEvent(event: TouchObject): boolean;
+
+/**
+ * Send key event.
+ * @since 8
+ * @systemapi
+ * @test
+ */
+export declare function sendKeyEvent(event: KeyEvent): boolean;
+
+/**
+ * Send mouse event.
+ * @since 8
+ * @systemapi
+ * @test
+ */
+export declare function sendMouseEvent(event: MouseEvent): boolean;
+
+/**
+ * Profiler tools for inspectors.
+ * @since 8
+ * @systemapi
+ * @test
+ */
+export declare namespace Profiler {
+  /**
+   * Registers vsync callback for profiler.
+   * @param callback the callback info is json string with ui update info.
+   * @since 8
+   * @systemapi
+   * @test
+   */
+  export function registerVsyncCallback(callback: (info: string) => void): void;
+
+  /**
+   * Unregisters vsync callback.
+   * @since 8
+   * @systemapi
+   * @test
+   */
+  export function unregisterVsyncCallback(): void;
+}
diff --git a/api/@internal/component/ets/list.d.ts b/api/@internal/component/ets/list.d.ts
index 4f6efa812..cd07b3137 100644
--- a/api/@internal/component/ets/list.d.ts
+++ b/api/@internal/component/ets/list.d.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { CommonMethod } from "./common";
+import { CommonMethod, ItemDragInfo } from "./common";
 import { Axis, BarState, EdgeEffect } from "./enums";
 import { Scroller } from "./scroll";
 import { Length, ResourceColor } from "./units";
@@ -42,24 +42,6 @@ export declare enum ScrollState {
   Fling,
 }
 
-/**
- * ItemDragInfo object description
- * @since 8
- */
-export interface ItemDragInfo {
-  /**
-   * Obtains the X coordinate of the drag window, in vp.
-   * @since 8
-   */
-  x: number;
-
-  /**
-   * Obtains the Y coordinate of the drag window, in vp.
-   * @since 8
-   */
-  y: number;
-}
-
 /**
  * ListExtend extension declaration.
  * @since 7
diff --git a/api/@internal/component/ets/navigation.d.ts b/api/@internal/component/ets/navigation.d.ts
index 254cb4e13..e65d69753 100644
--- a/api/@internal/component/ets/navigation.d.ts
+++ b/api/@internal/component/ets/navigation.d.ts
@@ -108,7 +108,13 @@ declare class NavigationAttribute<T> extends CommonMethod<T> {
    * Navigation title bar's menus
    * @since 8
    */
-  menus(value: Array<NavigationMenuItem> | CustomBuilder) : T;
+  menus(value: Array<NavigationMenuItem> | CustomBuilder): T;
+
+  /**
+   * The amount of the menu in Navigation.
+   * @since 8
+   */
+  menuCount(value: number): T;
 
   /**
    * Tool bar
diff --git a/api/@internal/component/ets/pattern_lock.d.ts b/api/@internal/component/ets/pattern_lock.d.ts
new file mode 100644
index 000000000..9bc361f4e
--- /dev/null
+++ b/api/@internal/component/ets/pattern_lock.d.ts
@@ -0,0 +1,109 @@
+/*
+  * Copyright (c) 2021 Huawei Device Co., Ltd.
+  * Licensed under the Apache License, Version 2.0 (the "License");
+  * you may not use this file except in compliance with the License.
+  * You may obtain a copy of the License at
+  *
+  *     http://www.apache.org/licenses/LICENSE-2.0
+  *
+  * Unless required by applicable law or agreed to in writing, software
+  * distributed under the License is distributed on an "AS IS" BASIS,
+  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  * See the License for the specific language governing permissions and
+  * limitations under the License.
+  */
+
+import { CommonMethod } from "./common"
+import { Length, ResourceColor } from "./units";
+
+/**
+ * Provides methods for control pattern lock component.
+ * @since 8
+ */
+export declare class PatternLockController {
+  /**
+   * constructor.
+   */
+  constructor();
+
+  /**
+   * Reset pattern lock.
+   */
+  reset();
+}
+
+/**
+ * Provides an interface for generating PatternLock.
+ * @since 8
+ */
+interface PatternLock extends PatternLockAttribute<PatternLock> {
+  (controller?: PatternLockController): PatternLock;
+}
+
+/**
+ * @since 8
+ */
+declare class PatternLockAttribute<T> extends CommonMethod<T> {
+  /**
+   * The square side length of pattern lock component.
+   * @since 8
+   */
+  sideLength(value: Length): T;
+
+  /**
+   * Circle radius.
+   * @since 8
+   */
+  circleRadius(value: Length): T;
+
+  /**
+   * The background color.
+   * @since 8
+   */
+  backgroundColor(value: ResourceColor): T;
+
+  /**
+   * Regular color.
+   * @since 8
+   */
+  regularColor(value: ResourceColor): T;
+
+  /**
+   * The color when cell is selected.
+   * @since 8
+   */
+  selectedColor(value: ResourceColor): T;
+
+  /**
+   * The color when cell is active state.
+   * @since 8
+   */
+  activeColor(value: ResourceColor): T;
+
+  /**
+   * The path line color.
+   * @since 8
+   */
+  pathColor(value: ResourceColor): T;
+
+  /**
+   * The path line stroke width.
+   * @since 8
+   */
+  pathStrokeWidth(value: number | string): T;
+
+  /**
+   * Called when the pattern input completed.
+   * @since 8
+   */
+  onPatternComplete(callback: (input: Array<number>) => void): T;
+
+  /**
+   * Called when judging whether the input state can be reset by touch pattern lock.
+   * @since 8
+   */
+  autoReset(value: boolean): T;
+}
+
+export declare class PatternLockExtend<T> extends PatternLockAttribute<T> {}
+export declare const PatternLockInterface: PatternLock;
\ No newline at end of file
diff --git a/api/@internal/component/ets/piece.d.ts b/api/@internal/component/ets/piece.d.ts
index d0b3a25c2..fca192f7d 100644
--- a/api/@internal/component/ets/piece.d.ts
+++ b/api/@internal/component/ets/piece.d.ts
@@ -95,5 +95,4 @@ declare class PieceAttribute<T> extends CommonMethod<T> {
 }
 
 export declare class PieceExtend<T> extends PieceAttribute<T> {}
-
 export declare const PieceInterface: Piece;
diff --git a/api/@internal/component/ets/plugin_component.d.ts b/api/@internal/component/ets/plugin_component.d.ts
new file mode 100644
index 000000000..6f6a3f3ce
--- /dev/null
+++ b/api/@internal/component/ets/plugin_component.d.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common";
+
+/**
+ * PluginComponentTemplate
+ * @since 8
+ */
+interface PluginComponentTemplate {
+  source: string;
+  ability: string;
+}
+
+/**
+ * Provides plugin component.
+ * @since 8
+ */
+interface PluginComponent extends PluginComponentAttribute<PluginComponent> {
+  /**
+   * Called when setting the plugin.
+   * @since 8
+   */
+  (value: { template: PluginComponentTemplate; data: any }): PluginComponent;
+}
+
+/**
+ * @since 8
+ */
+declare class PluginComponentAttribute<T> extends CommonMethod<T> {
+  /**
+   * Set pluginComponent size,
+   * @since 8
+   */
+  size(value: { width: number; height: number }): T;
+
+  /**
+   * pluginComponent onComplete callback,
+   * @since 8
+   */
+  onComplete(callback: () => void): T;
+
+  /**
+   * pluginComponent onError callback,
+   * @since 8
+   */
+  onError(callback: (info: { errcode: number; msg: string }) => void): T;
+}
+
+export declare class PluginComponentExtend<T> extends PluginComponentAttribute<T> {}
+export declare const PluginComponentInterface: PluginComponent;
diff --git a/api/@internal/component/ets/progress.d.ts b/api/@internal/component/ets/progress.d.ts
index 84f5e0d2a..4759cb910 100644
--- a/api/@internal/component/ets/progress.d.ts
+++ b/api/@internal/component/ets/progress.d.ts
@@ -55,7 +55,6 @@ export declare enum ProgressStyle {
    * @since 8
    */
   Capsule,
-
 }
 
 /**
diff --git a/api/@internal/component/ets/search.d.ts b/api/@internal/component/ets/search.d.ts
index fa36e0b07..a2555d290 100644
--- a/api/@internal/component/ets/search.d.ts
+++ b/api/@internal/component/ets/search.d.ts
@@ -16,12 +16,33 @@
 import { CommonMethod } from "./common";
 import { ResourceColor, Font } from "./units";
 
+/**
+ * Provides the method of switching the cursor position.
+ * @since 8
+ */
+export declare class SearchController {
+  /**
+   * constructor.
+   * @since 8
+   */
+  constructor();
+  /**
+   * Called when the position of the insertion cursor is set.
+   * @since 8
+   */
+  caretPosition(value: number): void;
+}
+
 /**
  * The construct function of search
  * @since 8
  */
 interface Search extends SearchAttribute<Search> {
-  (options?: { value?: string; placeholder?: string; icon?: string }): Search;
+  (options?: { value?: string;
+      placeholder?: string;
+      icon?: string;
+      controller?: SearchController
+  }): Search;
 }
 
 /**
diff --git a/api/@internal/component/ets/select.d.ts b/api/@internal/component/ets/select.d.ts
new file mode 100644
index 000000000..33f7f832e
--- /dev/null
+++ b/api/@internal/component/ets/select.d.ts
@@ -0,0 +1,122 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common";
+import { ResourceStr, Font, ResourceColor } from "./units";
+
+/**
+ * The declare of slectOption.
+ * @since 8
+ */
+export declare interface SelectOption {
+  /**
+   * option string.
+   * @since 8
+   */
+  value: ResourceStr;
+
+  /**
+   * option icon.
+   * @since 8
+   */
+  icon?: ResourceStr;
+}
+
+/**
+ * Provides the select interface.
+ * @since 8
+ */
+interface Select extends SelectAttribute<Select> {
+  /**
+   * Called when the select is set.
+   * @since 8
+   */
+  (options: Array<SelectOption>): Select;
+}
+
+/**
+ * The commonMethod of select.
+ * @since 8
+ */
+declare class SelectAttribute<T> extends CommonMethod<T> {
+  /**
+   * Sets the serial number of the select item, starting from 0.
+   * @since 8
+   */
+  selected(value: number): T;
+
+  /**
+   * Sets the text display of the select button itself.
+   * @since 8
+   */
+  value(value: string): T;
+
+  /**
+   * Sets the text properties of the select button itself.
+   * @since 8
+   */
+  font(value: Font): T;
+
+  /**
+   * Sets the text color of the select button itself.
+   * @since 8
+   */
+  fontColor(value: ResourceColor): T;
+
+  /**
+   * Sets the background color of the selected items in the select.
+   * @since 8
+   */
+  selectedOptionBgColor(value: ResourceColor): T;
+
+  /**
+   * Sets the text style of the selected items in the select.
+   * @since 8
+   */
+  selectedOptionFont(value: Font): T;
+
+  /**
+   * Sets the text color of the selected item in the select.
+   * @since 8
+   */
+  selectedOptionFontColor(value: ResourceColor): T;
+
+  /**
+   * Sets the background color of the select item.
+   * @since 8
+   */
+  optionBgColor(value: ResourceColor): T;
+
+  /**
+   * Sets the text style for select items.
+   * @since 8
+   */
+  optionFont(value: Font): T;
+
+  /**
+   * Sets the text color for select items.
+   * @since 8
+   */
+  optionFontColor(value: ResourceColor): T;
+
+  /**
+   * Callback for selecting an item from the select.
+   * @since 8
+   */
+  onSelected(event: (index: number) => void): T;
+}
+
+export declare class SelectExtend<T> extends SelectAttribute<T> {}
+export declare const SelectInterface: Select;
diff --git a/api/@internal/component/ets/slider.d.ts b/api/@internal/component/ets/slider.d.ts
index 0f877be21..38370eca5 100644
--- a/api/@internal/component/ets/slider.d.ts
+++ b/api/@internal/component/ets/slider.d.ts
@@ -33,12 +33,6 @@ export declare enum SliderStyle {
    * @since 7
    */
   InSet,
-
-  /**
-   * Capsule style slider.
-   * @since 8
-   */
-  Capsule,
 }
 
 /**
diff --git a/api/@internal/component/ets/stateManagement.d.ts b/api/@internal/component/ets/stateManagement.d.ts
index e6ca10444..808f9071b 100644
--- a/api/@internal/component/ets/stateManagement.d.ts
+++ b/api/@internal/component/ets/stateManagement.d.ts
@@ -378,6 +378,12 @@ export declare enum LayoutDirection {
    * @since 7
    */
   RTL,
+
+  /**
+   * Elements are laid out from auto.
+   * @since 8
+   */
+  Auto
 }
 
 /**
diff --git a/api/@internal/component/ets/text_area.d.ts b/api/@internal/component/ets/text_area.d.ts
index 964256f84..6427e8666 100644
--- a/api/@internal/component/ets/text_area.d.ts
+++ b/api/@internal/component/ets/text_area.d.ts
@@ -15,9 +15,26 @@
 
 import { ResourceStr } from ".";
 import { CommonMethod } from "./common";
-import { TextAlign, FontWeight, FontStyle } from "./enums";
+import { TextAlign, FontStyle, FontWeight } from "./enums";
 import { Font, Length, ResourceColor } from "./units";
 
+/**
+ * Provides the method of switching the cursor position.
+ * @since 8
+ */
+export declare class TextAreaController {
+  /**
+   * constructor.
+   * @since 8
+   */
+  constructor();
+  /**
+   * Called when the position of the insertion cursor is set.
+   * @since 8
+   */
+  caretPosition(value: number): void;
+}
+
 /**
  * Defines the option of TextArea.
  * @since 7
@@ -34,6 +51,12 @@ export declare interface TextAreaOption {
    * @since 7
    */
   text?: ResourceStr;
+
+  /**
+   * Called when the position of the insertion cursor is set.
+   * @since 8
+   */
+  controller?: TextAreaController;
 }
 
 /**
@@ -107,6 +130,12 @@ declare class TextAreaAttribute<T> extends CommonMethod<T> {
    */
   fontFamily(value: ResourceStr): T;
 
+  /**
+   * Called when the inputFilter of text is set.
+   * @since 8
+   */
+  inputFilter(value: ResourceStr, error?: (value: string) => void): T;
+
   /**
    * Called when the input changes.
    * @devices phone, tablet, car.
diff --git a/api/@internal/component/ets/text_clock.d.ts b/api/@internal/component/ets/text_clock.d.ts
new file mode 100644
index 000000000..db422c5af
--- /dev/null
+++ b/api/@internal/component/ets/text_clock.d.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common";
+import { ResourceStr, ResourceColor, Length } from "./units";
+import { FontStyle, FontWeight } from "./enums";
+
+/**
+ * TextClock component, which provides the text clock capability.
+ * @since 8
+ */
+interface TextClock extends TextClockAttribute<TextClock> {
+  /**
+   * Construct the text clock component.
+   * Specifies the current time zone.
+   * The valid value is an integer ranging from - 12 to 12,
+   * Where a negative value indicates the eastern time zone, for example, -8.
+   * @since 8
+   */
+  (options?: {hourswest?: number}): TextClock;
+}
+
+declare class TextClockAttribute<T> extends CommonMethod<T> {
+  /**
+   * set display time format，such as "yyyy/mm/dd"、“yyyy-mm-dd".
+   * support time format：yyyy,mm,mmm(English month abbreviation),mmmm(Full name of the month in English),
+   * dd,ddd(English Week abbreviation),dddd(Full name of the week in English),
+   * HH/hh(24-hour clock/12-hour clock),MM/mm(minute),SS/ss(second)
+   * @since 8
+   */
+  format(value: string): T;
+  /**
+   * sets the start and stop of the text clock. You can customize the start and stop of the text clock.
+   * when the value is true, the time of the current custom style is displayed.
+   * the time is recalled every second.
+   * if the value is false, the clock stops updating the time and stops updating the callback.
+   * @since 8
+   */
+  status(value: boolean): T;
+  /**
+   * Provides a date change callback.
+   * The callback parameter is Unix Time Stamp,
+   * The number of milliseconds that have elapsed since January 1, 1970 (UTC).
+   * The minimum callback interval for this event is seconds.
+   * You can listen to this callback,
+   * Use the format attribute method to customize data display in the callback.
+   * @param event Listening date event callback.
+   * @since 8
+   */
+  onDateChange(event: (value: number) => void): T;
+  /**
+   * Called when the value of TextClock fontColor is set
+   * @since 8
+   */
+  fontColor(value: ResourceColor): T;
+  /**
+   * Called when the value of TextClock fontSize is set
+   * @since 8
+   */
+  fontSize(value: Length): T;
+  /**
+   * Called when the value of TextClock fontStyle is set
+   * @since 8
+   */
+  fontStyle(value: FontStyle): T;
+  /**
+   * Called when the value of TextClock fontWeight is set
+   * @since 8
+   */
+  fontWeight(value: number | FontWeight | string): T;
+  /**
+   * Called when the value of TextClock fontFamily is set
+   * @since 8
+   */
+  fontFamily(value: ResourceStr): T;
+}
+
+export declare class TextClockExtend<T> extends TextClockAttribute<T> {}
+
+export declare const TextClockInterface: TextClock;
diff --git a/api/@internal/component/ets/text_input.d.ts b/api/@internal/component/ets/text_input.d.ts
index 13f305029..bb5388bd6 100644
--- a/api/@internal/component/ets/text_input.d.ts
+++ b/api/@internal/component/ets/text_input.d.ts
@@ -14,9 +14,9 @@
  */
 
 import { Font } from ".";
-import { FontWeight, FontStyle } from "./enums";
 import { CommonMethod } from "./common";
 import { ResourceColor, ResourceStr, Length } from "./units";
+import { FontStyle, FontWeight } from "./enums";
 
 /**
  * Declare the type of input box
@@ -84,6 +84,23 @@ export declare enum EnterKeyType {
   Done,
 }
 
+/**
+ * Provides the method of switching the cursor position.
+ * @since 8
+ */
+export declare class TextInputController {
+  /**
+   * constructor.
+   * @since 8
+   */
+  constructor();
+  /**
+   * Called when the position of the insertion cursor is set.
+   * @since 8
+   */
+  caretPosition(value: number): void;
+}
+
 /**
  * Defines the option of TextInput.
  * @since 7
@@ -100,6 +117,12 @@ export declare interface TextInputOption {
    * @since 7
    */
   text?: ResourceStr;
+
+  /**
+   * Called when the position of the insertion cursor is set.
+   * @since 8
+   */
+  controller?: TextInputController;
 }
 
 /**
@@ -202,6 +225,12 @@ declare class TextInputAttribute<T> extends CommonMethod<T> {
    */
   fontFamily(value: ResourceStr): T;
 
+  /**
+   * Called when the inputFilter of text is set.
+   * @since 8
+   */
+  inputFilter(value: ResourceStr, error?: (value: string) => void): T;
+
   /**
    * Called when using the Clipboard menu
    * @since 7
diff --git a/api/@internal/component/ets/text_picker.d.ts b/api/@internal/component/ets/text_picker.d.ts
index f5c4916b6..db6415e38 100644
--- a/api/@internal/component/ets/text_picker.d.ts
+++ b/api/@internal/component/ets/text_picker.d.ts
@@ -17,27 +17,22 @@ import { CommonMethod } from "./common";
 import { Resource } from "./units";
 
 /**
- * Declare the type of selector
+ * Defines the option of TextPicker.
  * @since 8
  */
-export declare enum PickerStyle {
+export declare interface TextPickerOption {
   /**
-   * Inside the line.
-   * @since 8
+   * Specifies the range of the text selector.
    */
-  INLINE = 0,
-
+  range: string[] | Resource;
   /**
-   * Block-level elements.
-   * @since 8
+   * Value of the current selection.
    */
-  BLOCK,
-
+  value?: string;
   /**
-   * fade.
-   * @since 8
+   * Current selected subscript.
    */
-  FADE,
+  selected?: number;
 }
 
 /**
@@ -45,16 +40,10 @@ export declare enum PickerStyle {
  */
 interface TextPicker extends TextPickerAttribute<TextPicker> {
   /**
-   * Add the property of the selector value range.
+   * Defines the TextPicker constructor.
    * @since 8
    */
-  (options?: {
-    range: string[] | Resource;
-    value?: string;
-    selected?: number;
-    loop?: boolean;
-    style?: PickerStyle;
-  }): TextPicker;
+  (options?: TextPickerOption): TextPicker;
 }
 
 /**
@@ -67,19 +56,16 @@ declare class TextPickerAttribute<T> extends CommonMethod<T> {
    * @since 8
    */
   defaultPickerItemHeight(value: number | string): T;
-
   /**
    * Called when the pop-up value is returned.
    * @since 8
    */
   onAccept(callback: (value: string, index: number) => void): T;
-
   /**
    * Called when the Cancel button in the pop-up window is clicked.
    * @since 8
    */
   onCancel(callback: () => void): T;
-
   /**
    * Called when the OK button in the pop-up window is clicked.
    * @since 8
@@ -87,5 +73,72 @@ declare class TextPickerAttribute<T> extends CommonMethod<T> {
   onChange(callback: (value: string, index: number) => void): T;
 }
 
+/**
+ * Defines the TextPickerDialogOption for Text Picker Dialog.
+ * @since 8
+ */
+export declare interface TextPickerDialogOption extends TextPickerOption {
+  /**
+   * Called when the default height of the selected element is set.
+   * @since 8
+   */
+  defaultPickerItemHeight?: number | string;
+}
+
+/**
+ * Defines the event callback status in the pop-up window state.
+ * @since 8
+ */
+export declare enum TextPickerDialogStatus {
+  /**
+   * Triggered when a user clicks the OK button.
+   * @since 8
+   */
+  Accept,
+  /**
+   * Triggered when a user taps the Cancel button.
+   * @since 8
+   */
+  Cancel,
+  /**
+   * Triggered when a user performs scrolling selection.
+   * @since 8
+   */
+  Update,
+}
+
+/**
+ * Defines the TextPickerDialogResult for TextPickerDialog.
+ * @since 8
+ */
+export declare interface TextPickerDialogResult {
+ /**
+   * The currently selected value.
+   * @since 8
+   */
+  value: string;
+  /**
+   * The subscript of the current selection.
+   * @since 8
+   */
+  index: number;
+  /**
+   * Operation status of the current user.
+   * @since 8
+   */
+  status: TextPickerDialogStatus;
+}
+/**
+ * Defines TextPickerDialog which uses show method to show TextPicker dialog.
+ * @since 8
+ */
+export declare class TextPickerDialog {
+  /**
+   * Invoking method display.
+   * @since 8
+   */
+  static show(options?: TextPickerDialogOption, callback?: (value: TextPickerDialogResult) => void);
+}
+
 export declare class TextPickerExtend<T> extends TextPickerAttribute<T> {}
 export declare const TextPickerInterface: TextPicker;
diff --git a/api/@internal/component/ets/text_timer.d.ts b/api/@internal/component/ets/text_timer.d.ts
new file mode 100644
index 000000000..2ce795377
--- /dev/null
+++ b/api/@internal/component/ets/text_timer.d.ts
@@ -0,0 +1,131 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common";
+import { Length, ResourceColor, ResourceStr } from "./units";
+import { FontStyle, FontWeight } from "./enums";
+
+/**
+ * Provides a way to control the process.
+ * @since 8
+ */
+export declare class TextTimerController {
+  /**
+   * constructor.
+   * @since 8
+   */
+  constructor();
+
+  /**
+   * Provides a start event for timer.
+   * @since 8
+   */
+  start();
+
+  /**
+   * Provides a pause event for timer.
+   * @since 8
+   */
+  pause();
+
+  /**
+   * Provides an event to reset timer.
+   * @since 8
+   */
+  reset();
+}
+
+/**
+ * Defines the option of TextTimer.
+ * @since 8
+ */
+interface TextTimerOption {
+  /**
+   * Sets whether to countdown.The default value is false.
+   * @since 8
+   */
+  isCountDown?: boolean;
+  /**
+   * Specifies the timer range.
+   * In the non-countDown scenario, a negative value indicates that the timer is not limited.
+   * The unit is millisecond.
+   * @since 8
+   */
+  count?: number;
+
+  /**
+   * Controller of Texttimer.
+   * @since 8
+   */
+  controller?: TextTimerController;
+}
+
+/**
+ * Provides an interface for texttimer containers.
+ * @since 8
+ */
+interface TextTimer extends TextTimerAttribute<TextTimer> {
+  /**
+   * Defines the TextTimer constructor.
+   * @since 8
+   */
+  (options?: TextTimerOption): TextTimer;
+}
+
+/**
+ * Defines the TextTimer attribute functions.
+ * @since 8
+ */
+declare class TextTimerAttribute<T> extends CommonMethod<T> {
+  /**
+   * Set the display time format, for example, now is hh/mm/ss/ms and current: hh-mm-ss-ms.
+   * The time format string can be hh, mm, ss, or ms.
+   * @since 8
+   */
+  format(value: string): T;
+   /**
+    * Called when the font color is set.
+    * @since 8
+    */
+  fontColor(value: ResourceColor): T;
+  /**
+   * Called when the font size is set.
+   * @since 8
+   */
+  fontSize(value: Length): T;
+  /**
+   * Called when the fontStyle is set
+   * @since 8
+   */
+  fontStyle(value: FontStyle): T;
+   /**
+    * Called when the fontWeight is set
+    * @since 8
+    */
+  fontWeight(value: number | FontWeight | string): T;
+   /**
+    * Called when the fontFamily is set
+    * @since 8
+    */
+  fontFamily(value: ResourceStr): T;
+  /**
+   * Called when the timer value is returned.
+   * @since 8
+   */
+  onTimer(event: (utc: number, elapsedTime: number) => void): T;
+}
+
+export declare class TextTimerExtend<T> extends TextTimerAttribute<T> {}
+export declare const TextTimerInterface: TextTimer;
diff --git a/api/@ohos.pluginComponent.d.ts b/api/@ohos.pluginComponent.d.ts
new file mode 100644
index 000000000..c73c4d734
--- /dev/null
+++ b/api/@ohos.pluginComponent.d.ts
@@ -0,0 +1,111 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AsyncCallback } from './basic';
+import { Want } from './ability/want';
+
+/**
+ * Plugin component template property.
+ * @since 8
+ */
+interface PluginComponentTemplate {
+  source: string;
+  ability: string;
+}
+
+/**
+ * Plugin component manager interface.
+ * @since 8
+ */
+declare namespace pluginComponentManager {
+  type KVObject = {[key: string]: number | string | boolean | [] | KVObject}
+
+  /**
+   * Plugin component push parameters.
+   * @since 8
+   */
+  interface PushParameters {
+    want: Want;
+    name: string;
+    data: KVObject;
+    extraData: KVObject;
+    jsonPath?: string;
+  }
+
+  /**
+   * Plugin component request parameters.
+   * @since 8
+   */
+  interface RequestParameters {
+    want: Want;
+    name: string;
+    data: KVObject;
+    jsonPath?: string;
+  }
+
+  /**
+   * Plugin component request callback parameters.
+   * @since 8
+   */
+  interface RequestCallbackParameters {
+    componentTemplate: PluginComponentTemplate;
+    data: KVObject;
+    extraData: KVObject;
+  }
+
+  /**
+   * Plugin component request event result value.
+   * @since 8
+   */
+  interface RequestEventResult {
+    template?: string;
+    data?: KVObject;
+    extraData?: KVObject;
+  }
+
+  /**
+   * Plugin component push event callback.
+   * @since 8
+   */
+  type OnPushEventCallback = (source: Want, template: PluginComponentTemplate, data: KVObject,
+    extraData: KVObject) => void;
+
+  /**
+   * Plugin component request event callback.
+   * @since 8
+   */
+
+  type OnRequestEventCallback = (source: Want, name: string, data: KVObject) => RequestEventResult;
+
+  /**
+   * Plugin component push method.
+   * @since 8
+   */
+  function push(param: PushParameters, callback: AsyncCallback<void>): void;
+
+  /**
+   * Plugin component request method.
+   * @since 8
+   */
+  function request(param: RequestParameters, callback: AsyncCallback<RequestCallbackParameters>): void;
+
+  /**
+   * Plugin component event listener.
+   * @since 8
+   */
+  function on(eventType: string, callback: OnPushEventCallback | OnRequestEventCallback): void;
+}
+
+export default pluginComponentManager;