diff --git a/doc/en/components/grids/_shared/advanced-filtering.md b/doc/en/components/grids/_shared/advanced-filtering.md
index b7f3f3eaf..0e9be8827 100644
--- a/doc/en/components/grids/_shared/advanced-filtering.md
+++ b/doc/en/components/grids/_shared/advanced-filtering.md
@@ -215,7 +215,7 @@ componentDidMount() {
         ignoreCase: true
     });
     tree.filteringOperands.push(subTree);
-    gridRef.current.advancedFilteringExpressionsTree = tree;
+    gridRef.advancedFilteringExpressionsTree = tree;
 }
 ```-->
 <!-- end: React -->
diff --git a/doc/en/components/grids/_shared/cell-editing.md b/doc/en/components/grids/_shared/cell-editing.md
index 43de37bee..ad1368276 100644
--- a/doc/en/components/grids/_shared/cell-editing.md
+++ b/doc/en/components/grids/_shared/cell-editing.md
@@ -70,7 +70,7 @@ this.grid.UpdateCell(newValue, rowID, 'ReorderLevel')
 <!-- React -->
 ```typescript
 function updateCell() {
-    grid1Ref.current.updateCell(newValue, rowID, 'ReorderLevel');
+    grid1Ref.updateCell(newValue, rowID, 'ReorderLevel');
 }
 ```
 <!-- end: React -->
@@ -131,9 +131,9 @@ public updateCell() {
 <!-- React -->
 ```typescript
 function updateCell() {
-    const cell = grid1Ref.current.getCellByColumn(rowIndex, 'ReorderLevel');
+    const cell = grid1Ref.getCellByColumn(rowIndex, 'ReorderLevel');
     // You can also get cell by rowID if primary key is defined
-    // cell = grid1Ref.current.getCellByKey(rowID, 'ReorderLevel');
+    // cell = grid1Ref.getCellByKey(rowID, 'ReorderLevel');
     cell.update(70);
 }
 ```
@@ -559,7 +559,7 @@ public keydownHandler(event) {
 ```typescript
 function keydownHandler(event) {
   const key = event.keyCode;
-  const grid = grid1Ref.current;
+  const grid = grid1Ref;
   const activeElem = grid.navigation.activeNode;
 
   if ((key >= 48 && key <= 57) ||
@@ -610,9 +610,9 @@ if (key == 13) {
     let nextRow = getNextEditableRowIndex(thisRow, rowInfo, event.shiftKey);
 
     // and then we will navigate to it using the grid's built in method navigateTo
-    grid1Ref.current.navigateTo(nextRow, column, (obj) => {
+    grid1Ref.navigateTo(nextRow, column, (obj) => {
         obj.target.activate();
-        grid1Ref.current.clearCellSelection();
+        grid1Ref.clearCellSelection();
     });
 }
 ```
@@ -687,7 +687,7 @@ this.grid.addRow(record);
 // Adding a new record
 // Assuming we have a `getNewRecord` method returning the new row data.
 const record = getNewRecord();
-grid1Ref.current.addRow(record);
+grid1Ref.addRow(record);
 ```
 <!-- end: React -->
 
@@ -755,16 +755,16 @@ row.update(newData);
 <!-- React -->
 ```typescript
 // Updating the whole row
-grid1Ref.current.updateRow(newData, this.selectedCell.cellID.rowID);
+grid1Ref.updateRow(newData, this.selectedCell.cellID.rowID);
 
 // Just a particular cell through the Grid API
-grid1Ref.current.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);
+grid1Ref.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);
 
 // Directly using the cell `update` method
 selectedCell.update(newData);
 
 // Directly using the row `update` method
-const row = grid1Ref.current.getRowByKey(rowID);
+const row = grid1Ref.getRowByKey(rowID);
 row.update(newData);
 ```
 <!-- end: React -->
@@ -876,9 +876,9 @@ row.delete();
 <!-- React -->
 ```typescript
 // Delete row through Grid API
-grid1Ref.current.deleteRow(selectedCell.cellID.rowID);
+grid1Ref.deleteRow(selectedCell.cellID.rowID);
 // Delete row through row object
-const row = grid1Ref.current.getRowByIndex(rowIndex);
+const row = grid1Ref.getRowByIndex(rowIndex);
 row.del();
 ```
 <!-- end: React -->
diff --git a/doc/en/components/grids/_shared/cell-selection.md b/doc/en/components/grids/_shared/cell-selection.md
index 96b07e640..7b688dfef 100644
--- a/doc/en/components/grids/_shared/cell-selection.md
+++ b/doc/en/components/grids/_shared/cell-selection.md
@@ -109,7 +109,7 @@ this.grid.selectRange(range);
 
 ```tsx
 const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
-gridRef.current.selectRange(range);
+gridRef.selectRange(range);
 ```
 
 <!-- Blazor -->
@@ -147,7 +147,7 @@ this.grid.clearCellSelection();
 <!-- end: WebComponents -->
 
 ```tsx
-gridRef.current.clearCellSelection();
+gridRef.clearCellSelection();
 ```
 
 
diff --git a/doc/en/components/grids/_shared/column-pinning.md b/doc/en/components/grids/_shared/column-pinning.md
index ffaa7016d..fcd558761 100644
--- a/doc/en/components/grids/_shared/column-pinning.md
+++ b/doc/en/components/grids/_shared/column-pinning.md
@@ -119,8 +119,8 @@ this.grid.unpinColumn('Name');
 
 <!-- React -->
 ```typescript
-gridRef.current.pinColumn('AthleteNumber');
-gridRef.current.unpinColumn('Name');
+gridRef.pinColumn('AthleteNumber');
+gridRef.unpinColumn('Name');
 ```
 <!-- end: React -->
 
diff --git a/doc/en/components/grids/_shared/live-data.md b/doc/en/components/grids/_shared/live-data.md
index 8d50b0ba8..3e64d4310 100644
--- a/doc/en/components/grids/_shared/live-data.md
+++ b/doc/en/components/grids/_shared/live-data.md
@@ -141,7 +141,7 @@ private updateData(data: any[]) {
         rowData.price = { usd: getUSD(), eur: getEUR() };
         newData.push({...rowData});
     }
-    gridRef.current.data = newData;
+    gridRef.data = newData;
 }
 ```
 <!-- end: React -->
diff --git a/doc/en/components/grids/_shared/remote-data-operations.md b/doc/en/components/grids/_shared/remote-data-operations.md
index 80a5a7d69..a9b3ffba1 100644
--- a/doc/en/components/grids/_shared/remote-data-operations.md
+++ b/doc/en/components/grids/_shared/remote-data-operations.md
@@ -967,7 +967,7 @@ and finally set up the method for loading the data:
         setData(response.items);
         // Stop loading when data is retrieved
         setIsLoading(false);
-        paginator.current.totalRecords = response.totalRecordsCount;
+        paginator.totalRecords = response.totalRecordsCount;
       })
       .catch((error) => {
         console.error(error.message);
@@ -1264,7 +1264,7 @@ next set up the method for loading the data:
         setData(response.items);
         // Stop loading when data is retrieved
         setIsLoading(false);
-        paginator.current.totalRecords = response.totalRecordsCount;
+        paginator.totalRecords = response.totalRecordsCount;
       })
       .catch((error) => {
         console.error(error.message);
diff --git a/doc/en/components/grids/_shared/row-adding.md b/doc/en/components/grids/_shared/row-adding.md
index a0606f008..f9c14435a 100644
--- a/doc/en/components/grids/_shared/row-adding.md
+++ b/doc/en/components/grids/_shared/row-adding.md
@@ -495,8 +495,8 @@ this.grid.beginAddRowById(null);     // Spawns the add row UI as the first recor
 
 <!-- React -->
 ```typescript
-gridRef.current.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
-gridRef.current.beginAddRowById(null);     // Spawns the add row UI as the first record
+gridRef.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
+gridRef.beginAddRowById(null);     // Spawns the add row UI as the first record
 ```
 <!-- end: React -->
 
@@ -518,8 +518,8 @@ this.grid.beginAddRowByIndex(0);    // Spawns the add row UI as the first record
 
 <!-- React -->
 ```typescript
-gridRef.current.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
-gridRef.current.beginAddRowByIndex(0);    // Spawns the add row UI as the first record
+gridRef.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
+gridRef.beginAddRowByIndex(0);    // Spawns the add row UI as the first record
 ```
 <!-- end: React -->
 
@@ -634,7 +634,7 @@ this.grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext) => {
 <!-- React -->
 <!-- ComponentStart: Grid, TreeGrid, HierarchicalGrid -->
 ```tsx
-gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
+gridRef.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
     return ('Adding Row');
 }
 ```            
diff --git a/doc/en/components/grids/_shared/row-pinning.md b/doc/en/components/grids/_shared/row-pinning.md
index 09cd3e46a..245007875 100644
--- a/doc/en/components/grids/_shared/row-pinning.md
+++ b/doc/en/components/grids/_shared/row-pinning.md
@@ -95,7 +95,7 @@ this.grid.getRowByIndex(0).pinned = true;
 <!-- end: Angular, WebComponents -->
 
 ```tsx
-gridRef.current.getRowByIndex(0).pinned = true;
+gridRef.getRowByIndex(0).pinned = true;
 ```
 
 ```razor
@@ -112,8 +112,8 @@ this.grid.unpinRow('ALFKI');
 <!-- end: Angular, WebComponents -->
 
 ```tsx
-gridRef.current.pinRow('ALFKI');
-gridRef.current.unpinRow('ALFKI');
+gridRef.pinRow('ALFKI');
+gridRef.unpinRow('ALFKI');
 ```
 
 
diff --git a/doc/en/components/grids/_shared/row-selection.md b/doc/en/components/grids/_shared/row-selection.md
index 11ff6bfb6..439365813 100644
--- a/doc/en/components/grids/_shared/row-selection.md
+++ b/doc/en/components/grids/_shared/row-selection.md
@@ -276,7 +276,7 @@ public onClickSelect() {
 
 ```tsx
 function onClickSelect() {
-    gridRef.current.selectRows([1,2,5], true);
+    gridRef.selectRows([1,2,5], true);
 }
 
 <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate="true" ref={gridRef}>
@@ -346,7 +346,7 @@ public onClickDeselect() {
 
 ```tsx
 function onClickDeselect() {
-    gridRef.current.deselectRows([1,2,5]);
+    gridRef.deselectRows([1,2,5]);
 }
 
 <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate="true" ref={gridRef}>
@@ -467,7 +467,7 @@ public getSelectedRows() {
 
 ```tsx
 function getSelectedRows() {
-    return gridRef.current.selectedRows;
+    return gridRef.selectedRows;
 }
 ```
 
diff --git a/doc/en/components/grids/_shared/search.md b/doc/en/components/grids/_shared/search.md
index 5d69d9fb1..e8ba0b6fc 100644
--- a/doc/en/components/grids/_shared/search.md
+++ b/doc/en/components/grids/_shared/search.md
@@ -286,11 +286,11 @@ public nextSearch(){
 ```tsx
 function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
     setSearchText(event.detail);
-    gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(event.detail, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 function nextSearch() {
-    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 
@@ -330,11 +330,11 @@ public void NextSearch()
 ```tsx
 function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
     setSearchText(event.detail);
-    gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(event.detail, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 function nextSearch() {
-    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 
@@ -475,11 +475,11 @@ public nextSearch() {
 
 ```tsx
 function prevSearch() {
-    gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findPrev(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 function nextSearch() {
-    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 <IgrIconButton key="prevIconButton" ref={iconButtonPrevRef} variant="flat" name="prev" collection="material" clicked={prevSearch}>
@@ -544,10 +544,10 @@ public onSearchKeydown(evt: KeyboardEvent) {
 function searchKeyDown(e: KeyboardEvent<HTMLElement>) {
     if (e.key === 'Enter') {
         e.preventDefault();
-        gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+        gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
     } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
         e.preventDefault();
-        gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+        gridRef.findPrev(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
     }
 }
 
@@ -610,16 +610,16 @@ public onSearchKeydown(evt: KeyboardEvent) {
 function searchKeyDown(e: KeyboardEvent<HTMLElement>) {
     if (e.key === 'Enter' || e.key === 'ArrowDown') {
         e.preventDefault();
-        gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+        gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
     } else if (e.key === 'ArrowUp') {
         e.preventDefault();
-        gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+        gridRef.findPrev(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
     }
 }
 
 function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
     setSearchText(event.detail);
-    gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(event.detail, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 <div onKeyDown={searchKeyDown}>
@@ -769,7 +769,7 @@ const caseSensitiveChipRef = useRef<IgrChip>(null);
 const exactMatchChipRef = useRef<IgrChip>(null);
 
 function updateSearch() {
-    gridRef.current.findNext("searchValue", caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext("searchValue", caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 <IgrChip ref={caseSensitiveChipRef} key="caseSensitiveChip" selectable="true">
@@ -964,14 +964,14 @@ const clearIconText =
 
 useEffect(() => {
      if (searchIconRef?.current) {
-      searchIconRef.current.registerIconFromText("search", searchIconText, "material");
-      searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
+      searchIconRef.registerIconFromText("search", searchIconText, "material");
+      searchIconRef.registerIconFromText("clear", clearIconText, "material");
     }
     if (iconButtonPrevRef?.current) {
-        iconButtonPrevRef.current.registerIconFromText("prev", prevIconText, "material");
+        iconButtonPrevRef.registerIconFromText("prev", prevIconText, "material");
     }
     if (iconButtonNextRef?.current) {
-        iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
+        iconButtonNextRef.registerIconFromText("next", nextIconText, "material");
     }
 }, []);
 
@@ -1080,20 +1080,20 @@ const clearIconText =
 
 useEffect(() => {
     if (searchIconRef?.current) {
-        searchIconRef.current.registerIconFromText("search", searchIconText, "material");
-        searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
+        searchIconRef.registerIconFromText("search", searchIconText, "material");
+        searchIconRef.registerIconFromText("clear", clearIconText, "material");
     }
     if (iconButtonPrevRef?.current) {
-        iconButtonPrevRef.current.registerIconFromText("prev", prevIconText,"material");
+        iconButtonPrevRef.registerIconFromText("prev", prevIconText,"material");
     }
     if (iconButtonNextRef?.current) {
-        iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
+        iconButtonNextRef.registerIconFromText("next", nextIconText, "material");
     }
 }, []);
 
 function clearSearch() {
   setSearchText('');
-  gridRef.current.clearSearch();
+  gridRef.clearSearch();
 }
 
 <IgrInput name="searchBox" value={searchText} inputOcurred={handleOnSearchChange}>
@@ -1276,10 +1276,10 @@ constructor() {
 </div>
 
 function handleCaseSensitiveChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
-  gridRef.current.findNext(searchText, event.detail, exactMatchChipRef.current.selected);
+  gridRef.findNext(searchText, event.detail, exactMatchChipRef.selected);
 }
 function handleExactMatchChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
-  gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, event.detail);
+  gridRef.findNext(searchText, caseSensitiveChipRef.selected, event.detail);
 }
 ```
 
@@ -1371,11 +1371,11 @@ public nextSearch() {
 
 ```tsx
 function prevSearch() {
-    gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findPrev(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 function nextSearch() {
-    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 <div slot="suffix" key="buttonsSuffix">
diff --git a/doc/en/components/grids/_shared/selection.md b/doc/en/components/grids/_shared/selection.md
index 5431639e4..ceb1771c7 100644
--- a/doc/en/components/grids/_shared/selection.md
+++ b/doc/en/components/grids/_shared/selection.md
@@ -272,7 +272,7 @@ public copySelectedCells(event) {
 
 ```tsx
 function copySelectedRowData() {
-    const selectedData = gridRef.current.getRowData(clickedCell.id.rowID);
+    const selectedData = gridRef.getRowData(clickedCell.id.rowID);
     copyData(selectedData);
     closeContextMenu();
 }
@@ -284,7 +284,7 @@ function copySelectedCellData() {
 }
 
 function copySelectedData() {
-    const selectedData = gridRef.current.getSelectedData(null,null);
+    const selectedData = gridRef.getSelectedData(null,null);
     copyData(selectedData);
     closeContextMenu();
 }
diff --git a/doc/en/components/grids/_shared/sorting.md b/doc/en/components/grids/_shared/sorting.md
index b882351aa..b9ec4e2b0 100644
--- a/doc/en/components/grids/_shared/sorting.md
+++ b/doc/en/components/grids/_shared/sorting.md
@@ -127,10 +127,10 @@ this.grid.sort([
 
 ```tsx
 // Perform a case insensitive ascending sort on the ProductName column.
-gridRef.current.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
+gridRef.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
 
 // Perform sorting on both the ProductName and Price columns.
-gridRef.current.sort([
+gridRef.sort([
     { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
     { fieldName: 'Price', dir: SortingDirection.Desc }
 ]);
@@ -186,10 +186,10 @@ this.treeGrid.sort([
 
 ```tsx
 // Perform a case insensitive ascending sort on the Category column.
-treeGridRef.current.sort([{ fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }]);
+treeGridRef.sort([{ fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }]);
 
 // Perform sorting on both the Category and Price columns.
-treeGridRef.current.sort([
+treeGridRef.sort([
     { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true },
     { fieldName: 'Price', dir: SortingDirection.Desc }
 ]);
@@ -246,10 +246,10 @@ this.hierarchicalGrid.sort([
 
 ```tsx
 // Perform a case insensitive ascending sort on the ProductName column.
-hierarchicalGridRef.current.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
+hierarchicalGridRef.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
 
 // Perform sorting on both the ProductName and Price columns.
-hierarchicalGridRef.current.sort([
+hierarchicalGridRef.sort([
     { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
     { fieldName: 'Price', dir: SortingDirection.Desc }
 ]);
@@ -274,10 +274,10 @@ this.grid.clearSort();
 
 ```tsx
 // Removes the sorting state from the ProductName column
-gridRef.current.clearSort('ProductName');
+gridRef.clearSort('ProductName');
 
 // Removes the sorting state from every column in the {ComponentTitle}
-gridRef.current.clearSort();
+gridRef.clearSort();
 ```
 
 ```razor
@@ -304,10 +304,10 @@ this.treeGrid.clearSort();
 
 ```tsx
 // Removes the sorting state from the Category column
-treeGridRef.current.clearSort('Category');
+treeGridRef.clearSort('Category');
 
 // Removes the sorting state from every column in the {ComponentTitle}
-treeGridRef.current.clearSort();
+treeGridRef.clearSort();
 ```
 
 ```razor
@@ -334,10 +334,10 @@ this.hierarchicalGrid.clearSort();
 
 ```tsx
 // Removes the sorting state from the ProductName column
-hierarchicalGridRef.current.clearSort('ProductName');
+hierarchicalGridRef.clearSort('ProductName');
 
 // Removes the sorting state from every column in the {ComponentTitle}
-hierarchicalGridRef.current.clearSort();
+hierarchicalGridRef.clearSort();
 ```
 
 ```razor
@@ -403,7 +403,7 @@ public connectedCallback() {
 
 ```tsx
 useEffect(() => {
-    gridRef.current.sortingExpressions = [
+    gridRef.sortingExpressions = [
         { fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true },
         { fieldName: 'ProductName', dir: SortingDirection.Desc }
     ];
@@ -453,7 +453,7 @@ public connectedCallback() {
 
 ```tsx
 useEffect(() => {
-    treeGridRef.current.sortingExpressions = [
+    treeGridRef.sortingExpressions = [
         { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true },
         { fieldName: 'Price', dir: SortingDirection.Desc }
     ];
@@ -503,7 +503,7 @@ public connectedCallback() {
 
 ```tsx
 useEffect(() => {
-    hierarchicalGridRef.current.sortingExpressions = [
+    hierarchicalGridRef.sortingExpressions = [
         { fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true },
         { fieldName: 'ProductName', dir: SortingDirection.Desc }
     ];
diff --git a/doc/en/components/grids/_shared/summaries.md b/doc/en/components/grids/_shared/summaries.md
index 6083e812d..e4d4d5d0f 100644
--- a/doc/en/components/grids/_shared/summaries.md
+++ b/doc/en/components/grids/_shared/summaries.md
@@ -281,13 +281,13 @@ public disableSummary() {
 
 ```tsx
 function enableSummary() {
-    gridRef.current.enableSummaries([
+    gridRef.enableSummaries([
         {fieldName: 'ReorderLevel'},
         {fieldName: 'ProductID'}
     ]);
 }
 function disableSummary() {
-    gridRef.current.disableSummaries(['ProductID']);
+    gridRef.disableSummaries(['ProductID']);
 }
 
 <{ComponentSelector} ref={gridRef} auto-generate="false" height="800px" width="800px">
@@ -376,13 +376,13 @@ public disableSummary() {
 
 ```tsx
 function enableSummary() {
-    hierarchicalGridRef.current.enableSummaries([
+    hierarchicalGridRef.enableSummaries([
         {fieldName: 'GrammyNominations'},
         {fieldName: 'GrammyAwards'}
     ]);
 }
 function disableSummary() {
-    hierarchicalGridRef.current.disableSummaries(['GrammyNominations']);
+    hierarchicalGridRef.disableSummaries(['GrammyNominations']);
 }
 
 <IgrHierarchicalGrid autoGenerate="false" data={this.singersData} ref={this.hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID">
@@ -470,13 +470,13 @@ public disableSummary() {
 
 ```tsx
 function enableSummary() {
-    treeGridRef.current.enableSummaries([
+    treeGridRef.enableSummaries([
         {fieldName: 'Name'},
         {fieldName: 'Units'}
     ]);
 }
 function disableSummary() {
-    treeGridRef.current.disableSummaries(['Units']);
+    treeGridRef.disableSummaries(['Units']);
 }
 
 <IgrTreeGrid autoGenerate="false" data={this.ordersTreeData} ref={this.treeGridRef} id="treeGrid" primaryKey="ID">
diff --git a/doc/en/components/grids/data-grid.md b/doc/en/components/grids/data-grid.md
index 516e65c1a..8a9d70e8c 100644
--- a/doc/en/components/grids/data-grid.md
+++ b/doc/en/components/grids/data-grid.md
@@ -1043,7 +1043,7 @@ function fetchData(url: string): void {
       .then(data => onDataLoaded(data));
 }
 function onDataLoaded(jsonData: any[]) {
-    gridRef.current.data = jsonData;
+    gridRef.data = jsonData;
   }
 ```
 
diff --git a/doc/en/components/grids/grid/groupby.md b/doc/en/components/grids/grid/groupby.md
index d9d033dba..0f9369d2d 100644
--- a/doc/en/components/grids/grid/groupby.md
+++ b/doc/en/components/grids/grid/groupby.md
@@ -182,7 +182,7 @@ grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase:
 
 <!-- React -->
 ```typescript
-gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }]);
+gridRef.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }]);
 ```
 <!-- end: React -->
 
@@ -235,12 +235,12 @@ As with `GroupingExpressions`, setting a list of `GroupByExpandState` directly t
 
 <!-- React -->
 ```typescript
-    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
-    gridRef.current.toggleGroup(groupRow);
+    const groupRow = gridRef.getRowByIndex(0).groupRow;
+    gridRef.toggleGroup(groupRow);
 ```
 
 ```typescript
-    const groupRow = gridRef.current.getRowByIndex(0);
+    const groupRow = gridRef.getRowByIndex(0);
     groupRow.expanded = false;
 ```
 <!-- end: React -->
@@ -279,8 +279,8 @@ The code snippet below can be used to select all rows within a group using the g
 
 <!-- React -->
 ```typescript
-    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
-    gridRef.current.selectRowsInGroup(groupRow);
+    const groupRow = gridRef.getRowByIndex(0).groupRow;
+    gridRef.selectRowsInGroup(groupRow);
 ```
 <!-- end: React -->
 
@@ -300,8 +300,8 @@ If you need to deselect all rows within a group programmatically, you can use th
 
 <!-- React -->
 ```typescript
-    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
-    gridRef.current.deselectRowsInGroup(groupRow);
+    const groupRow = gridRef.getRowByIndex(0).groupRow;
+    gridRef.deselectRowsInGroup(groupRow);
 ```
 <!-- end: React -->
 
diff --git a/doc/en/components/grids/hierarchical-grid/load-on-demand.md b/doc/en/components/grids/hierarchical-grid/load-on-demand.md
index 2de0d97ca..a5abefd0e 100644
--- a/doc/en/components/grids/hierarchical-grid/load-on-demand.md
+++ b/doc/en/components/grids/hierarchical-grid/load-on-demand.md
@@ -596,8 +596,8 @@ In order to make sure that our grid is rendered before we request its data from
 useEffect(() => {
     getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
       (data: any) => {
-        hierarchicalGrid.current.data = data;
-        hierarchicalGrid.current.markForCheck();
+        hierarchicalGrid.data = data;
+        hierarchicalGrid.markForCheck();
       }
     );
 }, []);
@@ -815,13 +815,13 @@ public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, _parentKey: stri
 const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);
 
 useEffect(() => {
-    hierarchicalGrid.current.isLoading = true;
+    hierarchicalGrid.isLoading = true;
     
     getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
       (data: any) => {
-        hierarchicalGrid.current.isLoading = false;
-        hierarchicalGrid.current.data = data;
-        hierarchicalGrid.current.markForCheck();
+        hierarchicalGrid.isLoading = false;
+        hierarchicalGrid.data = data;
+        hierarchicalGrid.markForCheck();
     }
   );
 }, []);
diff --git a/doc/en/components/grids/hierarchical-grid/overview.md b/doc/en/components/grids/hierarchical-grid/overview.md
index 609d4463b..704340c68 100644
--- a/doc/en/components/grids/hierarchical-grid/overview.md
+++ b/doc/en/components/grids/hierarchical-grid/overview.md
@@ -412,12 +412,12 @@ export default function Sample() {
   }
 
   useEffect(() => {
-    hierarchicalGrid.current.isLoading = true;
+    hierarchicalGrid.isLoading = true;
     getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
       (data: any) => {
-        hierarchicalGrid.current.isLoading = false;
-        hierarchicalGrid.current.data = data;
-        hierarchicalGrid.current.markForCheck();
+        hierarchicalGrid.isLoading = false;
+        hierarchicalGrid.data = data;
+        hierarchicalGrid.markForCheck();
       }
     );
   }, []);
diff --git a/doc/en/components/inputs/combo/features.md b/doc/en/components/inputs/combo/features.md
index 6814a76da..f0989f3f1 100644
--- a/doc/en/components/inputs/combo/features.md
+++ b/doc/en/components/inputs/combo/features.md
@@ -62,16 +62,16 @@ const comboRef = useRef<IgrCombo>(null);
 const switchCaseSensitiveRef = useRef<IgrSwitch>(null);
 
 const disableFiltering = (switchComponent: IgrSwitch) => {
-    comboRef.current.disableFiltering =
-    switchCaseSensitiveRef.current.disabled = switchComponent.checked;
+    comboRef.disableFiltering =
+    switchCaseSensitiveRef.disabled = switchComponent.checked;
 };
 
 const showCaseSensitiveIcon = (switchComponent: IgrSwitch) => {
-    comboRef.current.caseSensitiveIcon = switchComponent.checked;
+    comboRef.caseSensitiveIcon = switchComponent.checked;
 };
 
 const disableCombo = (switchComponent: IgrSwitch) => {
-    comboRef.current.disabled = switchComponent.checked;
+    comboRef.disabled = switchComponent.checked;
 };
 ```
 
@@ -158,7 +158,7 @@ switchGroup.addEventListener("igcChange", () => {
 
 ```tsx
 const enableGrouping = (switchComponent: IgrSwitch) => {
-    comboRef.current.groupKey = switchComponent.checked ? "country" : undefined;
+    comboRef.groupKey = switchComponent.checked ? "country" : undefined;
 };
 ```
 
@@ -206,7 +206,7 @@ const options = {
     caseSensitive: true
 };
 
-comboRef.current.filteringOptions = options;
+comboRef.filteringOptions = options;
 ```
 <!-- end: React -->
 
diff --git a/doc/en/components/inputs/combo/overview.md b/doc/en/components/inputs/combo/overview.md
index 04a84f881..0205122db 100644
--- a/doc/en/components/inputs/combo/overview.md
+++ b/doc/en/components/inputs/combo/overview.md
@@ -191,10 +191,10 @@ combo.value = ['NY01', 'UK01'];
 const comboRef = useRef<IgrCombo>(null);
 
 // Given the overview example from above this will return ['BG01']
-console.log(comboRef.current.value);
+console.log(comboRef.value);
 
 // Change the selected items to New York and London
-comboRef.current.value = ['NY01', 'UK01'];
+comboRef.value = ['NY01', 'UK01'];
 ```
 
 ### Selection API
@@ -245,8 +245,8 @@ combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']);
 <!-- React -->
 ```tsx
 // Select/deselect items by their IDs as valueKey is set to 'id'
-comboRef.current.select(["UK01", "UK02", "UK03", "UK04", "UK05"]);
-comboRef.current.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]);
+comboRef.select(["UK01", "UK02", "UK03", "UK04", "UK05"]);
+comboRef.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]);
 ```
 <!-- end: React -->
 
@@ -274,8 +274,8 @@ combo.deselect();
 <!-- React -->
 ```tsx
 // Select/deselect all items
-comboRef.current.select([]);
-comboRef.current.deselect([]);
+comboRef.select([]);
+comboRef.deselect([]);
 ```
 <!-- end: React -->
 
@@ -292,8 +292,8 @@ combo.deselect([cities[1], cities[5]]);
 <!-- React -->
 ```tsx
 // Select/deselect values by object references when no valueKey is provided
-comboRef.current.select([cities[1], cities[5]]);
-comboRef.current.deselect([cities[1], cities[5]]);
+comboRef.select([cities[1], cities[5]]);
+comboRef.deselect([cities[1], cities[5]]);
 ```
 <!-- end: React -->
 
diff --git a/doc/en/components/inputs/combo/single-selection.md b/doc/en/components/inputs/combo/single-selection.md
index 18505be15..a67dc738f 100644
--- a/doc/en/components/inputs/combo/single-selection.md
+++ b/doc/en/components/inputs/combo/single-selection.md
@@ -59,7 +59,7 @@ combo.select('BG01');
 <!-- React -->
 ```tsx
 // select the item matching the 'BG01' value of the value key field.
-comboRef.current.select('BG01');
+comboRef.select('BG01');
 ```
 <!-- end: React -->
 
@@ -87,7 +87,7 @@ combo.deselect('BG01');
 <!-- React -->
 ```tsx
 // deselect the item matching the 'BG01' value of the value key field.
-comboRef.current.deselect('BG01');
+comboRef.deselect('BG01');
 ```
 <!-- end: React -->
 
diff --git a/doc/en/components/notifications/banner.md b/doc/en/components/notifications/banner.md
index 2d97e2c87..94e825242 100644
--- a/doc/en/components/notifications/banner.md
+++ b/doc/en/components/notifications/banner.md
@@ -80,7 +80,7 @@ In order to display the banner component, use its `Show` method and call it on a
 ```
 
 ```tsx
-<IgrButton clicked={() => bannerRef.current.show()}>
+<IgrButton clicked={() => bannerRef.show()}>
     <span>Show Banner</span>
 </IgrButton>
 
@@ -211,7 +211,7 @@ The `Banner` exposes the `actions` slot for templating the banner buttons. This
     <IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
     <span key="message">You have lost connection to the internet. This app is offline.</span>
     <div key="actions" slot="actions">
-        <IgrButton key="button" variant="flat" clicked={() => bannerRef.current.toggle()}>
+        <IgrButton key="button" variant="flat" clicked={() => bannerRef.toggle()}>
             <IgrRipple key="ripple" />
             <span key="action-text">Toggle Banner</span>
         </IgrButton>
@@ -270,7 +270,7 @@ banner.addEventListener('igcClosing', (event) => {
 const bannerRef = useRef<IgrBanner>(null);
 
 useEffect(() => {
-    bannerRef.current.nativeElement.addEventListener('igcClosing', (event) => {
+    bannerRef.nativeElement.addEventListener('igcClosing', (event) => {
         event.preventDefault();
     });
 }, [])
@@ -331,7 +331,7 @@ Let's create a banner with two custom buttons - one for dismissing the notificat
     <IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
     <span key="message">You have lost connection to the internet. This app is offline.</span>
     <div key="actions" slot="actions">
-        <IgrButton key="button-offline" variant="flat" clicked={() => bannerRef.current.hide()}>
+        <IgrButton key="button-offline" variant="flat" clicked={() => bannerRef.hide()}>
             <IgrRipple key="ripple-offline" />
             <span key="action-offline">Continue Offline</span>
         </IgrButton>
@@ -446,11 +446,11 @@ const [wifiState, setWifiState] = useState(false);
 
 function refreshBanner() {
     if (!wifiState) {
-        iconRef.current.name = 'signal_wifi_4_bar';
-        bannerRef.current.hide();
+        iconRef.name = 'signal_wifi_4_bar';
+        bannerRef.hide();
     } else {
-        iconRef.current.name = 'signal_wifi_off';
-        bannerRef.current.show();
+        iconRef.name = 'signal_wifi_off';
+        bannerRef.show();
     }
     setWifiState(current => !current);
 }
diff --git a/doc/en/components/scheduling/date-picker.md b/doc/en/components/scheduling/date-picker.md
index d03337280..64b3f4684 100644
--- a/doc/en/components/scheduling/date-picker.md
+++ b/doc/en/components/scheduling/date-picker.md
@@ -104,7 +104,7 @@ const date = new Date();
 DatePicker.value = date;
 ```
 ```tsx
-datePickerRef.current.value = new Date();
+datePickerRef.value = new Date();
 ```
 ```Razor
 <IgbDatePicker @ref="DatePicker" Value="@SelectedDate">
@@ -143,7 +143,7 @@ With prefix and suffix slots we can add different content before and after the m
         name="arrow_upward" 
         collection="material" 
         class="small" 
-        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
+        onClick={() => datePickerRef.stepUp(DatePart.Month)}>
     </IgrIcon>
 </IgrDatePicker>
 ```
@@ -193,7 +193,7 @@ The picker's action buttons can be templated using the `actions` slot:
 <IgrDatePicker>
     <IgrButton 
         slot='actions' 
-        onClick={() => datePickerRef.current.showWeekNumbers = true}>
+        onClick={() => datePickerRef.showWeekNumbers = true}>
         <span>Show Week Numbers</span>
     </IgrButton>
 </IgrDatePicker>
@@ -263,13 +263,13 @@ The `DatePicker` exposes `StepUp` and `StepDown` methods. Both of which come fro
         slot="prefix" 
         name="arrow_upward" 
         collection="material" 
-        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
+        onClick={() => datePickerRef.stepUp(DatePart.Month)}>
     </IgrIcon>
     <IgrIcon 
         slot="suffix" 
         name="arrow_downward" 
         collection="material" 
-        onClick={() => datePickerRef.current.stepDown(DatePart.Month)}>
+        onClick={() => datePickerRef.stepDown(DatePart.Month)}>
     </IgrIcon>
 </IgrDatePicker>
 ```
diff --git a/doc/jp/components/grids/_shared/advanced-filtering.md b/doc/jp/components/grids/_shared/advanced-filtering.md
index 240694b2e..7a0204e8d 100644
--- a/doc/jp/components/grids/_shared/advanced-filtering.md
+++ b/doc/jp/components/grids/_shared/advanced-filtering.md
@@ -216,7 +216,7 @@ componentDidMount() {
         ignoreCase: true
     });
     tree.filteringOperands.push(subTree);
-    gridRef.current.advancedFilteringExpressionsTree = tree;
+    gridRef.advancedFilteringExpressionsTree = tree;
 }
 ```-->
 <!-- end: React -->
diff --git a/doc/jp/components/grids/_shared/cell-editing.md b/doc/jp/components/grids/_shared/cell-editing.md
index 7a714a665..be8e58454 100644
--- a/doc/jp/components/grids/_shared/cell-editing.md
+++ b/doc/jp/components/grids/_shared/cell-editing.md
@@ -71,7 +71,7 @@ this.grid.UpdateCell(newValue, rowID, 'ReorderLevel')
 <!-- React -->
 ```typescript
 function updateCell() {
-    grid1Ref.current.updateCell(newValue, rowID, 'ReorderLevel');
+    grid1Ref.updateCell(newValue, rowID, 'ReorderLevel');
 }
 ```
 <!-- end: React -->
@@ -132,9 +132,9 @@ public updateCell() {
 <!-- React -->
 ```typescript
 function updateCell() {
-    const cell = grid1Ref.current.getCellByColumn(rowIndex, 'ReorderLevel');
+    const cell = grid1Ref.getCellByColumn(rowIndex, 'ReorderLevel');
     // You can also get cell by rowID if primary key is defined
-    // cell = grid1Ref.current.getCellByKey(rowID, 'ReorderLevel');
+    // cell = grid1Ref.getCellByKey(rowID, 'ReorderLevel');
     cell.update(70);
 }
 ```
@@ -611,9 +611,9 @@ if (key == 13) {
     let nextRow = getNextEditableRowIndex(thisRow, rowInfo, event.shiftKey);
 
     // and then we will navigate to it using the grid's built in method navigateTo
-    grid1Ref.current.navigateTo(nextRow, column, (obj) => {
+    grid1Ref.navigateTo(nextRow, column, (obj) => {
         obj.target.activate();
-        grid1Ref.current.clearCellSelection();
+        grid1Ref.clearCellSelection();
     });
 }
 ```
@@ -688,7 +688,7 @@ this.grid.addRow(record);
 // Adding a new record
 // Assuming we have a `getNewRecord` method returning the new row data.
 const record = getNewRecord();
-grid1Ref.current.addRow(record);
+grid1Ref.addRow(record);
 ```
 <!-- end: React -->
 
@@ -756,16 +756,16 @@ row.update(newData);
 <!-- React -->
 ```typescript
 // Updating the whole row
-grid1Ref.current.updateRow(newData, this.selectedCell.cellID.rowID);
+grid1Ref.updateRow(newData, this.selectedCell.cellID.rowID);
 
 // Just a particular cell through the Grid API
-grid1Ref.current.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);
+grid1Ref.updateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);
 
 // Directly using the cell `update` method
 selectedCell.update(newData);
 
 // Directly using the row `update` method
-const row = grid1Ref.current.getRowByKey(rowID);
+const row = grid1Ref.getRowByKey(rowID);
 row.update(newData);
 ```
 <!-- end: React -->
@@ -877,9 +877,9 @@ row.delete();
 <!-- React -->
 ```typescript
 // Delete row through Grid API
-grid1Ref.current.deleteRow(selectedCell.cellID.rowID);
+grid1Ref.deleteRow(selectedCell.cellID.rowID);
 // Delete row through row object
-const row = grid1Ref.current.getRowByIndex(rowIndex);
+const row = grid1Ref.getRowByIndex(rowIndex);
 row.del();
 ```
 <!-- end: React -->
diff --git a/doc/jp/components/grids/_shared/cell-selection.md b/doc/jp/components/grids/_shared/cell-selection.md
index 61c470ee6..dce5abd7a 100644
--- a/doc/jp/components/grids/_shared/cell-selection.md
+++ b/doc/jp/components/grids/_shared/cell-selection.md
@@ -110,7 +110,7 @@ this.grid.selectRange(range);
 
 ```tsx
 const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
-gridRef.current.selectRange(range);
+gridRef.selectRange(range);
 ```
 
 <!-- Blazor -->
@@ -148,7 +148,7 @@ this.grid.clearCellSelection();
 <!-- end: WebComponents -->
 
 ```tsx
-gridRef.current.clearCellSelection();
+gridRef.clearCellSelection();
 ```
 
 
diff --git a/doc/jp/components/grids/_shared/column-pinning.md b/doc/jp/components/grids/_shared/column-pinning.md
index 086df720f..8337dbfbc 100644
--- a/doc/jp/components/grids/_shared/column-pinning.md
+++ b/doc/jp/components/grids/_shared/column-pinning.md
@@ -121,8 +121,8 @@ this.grid.unpinColumn('Name');
 
 <!-- React -->
 ```typescript
-gridRef.current.pinColumn('AthleteNumber');
-gridRef.current.unpinColumn('Name');
+gridRef.pinColumn('AthleteNumber');
+gridRef.unpinColumn('Name');
 ```
 <!-- end: React -->
 
diff --git a/doc/jp/components/grids/_shared/live-data.md b/doc/jp/components/grids/_shared/live-data.md
index 91ea65776..e740a7d97 100644
--- a/doc/jp/components/grids/_shared/live-data.md
+++ b/doc/jp/components/grids/_shared/live-data.md
@@ -142,7 +142,7 @@ private updateData(data: any[]) {
         rowData.price = { usd: getUSD(), eur: getEUR() };
         newData.push({...rowData});
     }
-    gridRef.current.data = newData;
+    gridRef.data = newData;
 }
 ```
 <!-- end: React -->
diff --git a/doc/jp/components/grids/_shared/row-adding.md b/doc/jp/components/grids/_shared/row-adding.md
index 863a8106a..0a05e9578 100644
--- a/doc/jp/components/grids/_shared/row-adding.md
+++ b/doc/jp/components/grids/_shared/row-adding.md
@@ -496,8 +496,8 @@ this.grid.beginAddRowById(null);     // Spawns the add row UI as the first recor
 
 <!-- React -->
 ```typescript
-gridRef.current.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
-gridRef.current.beginAddRowById(null);     // Spawns the add row UI as the first record
+gridRef.beginAddRowById('ALFKI');  // Spawns the add row UI under the row with PK 'ALFKI'
+gridRef.beginAddRowById(null);     // Spawns the add row UI as the first record
 ```
 <!-- end: React -->
 
@@ -519,8 +519,8 @@ this.grid.beginAddRowByIndex(0);    // Spawns the add row UI as the first record
 
 <!-- React -->
 ```typescript
-gridRef.current.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
-gridRef.current.beginAddRowByIndex(0);    // Spawns the add row UI as the first record
+gridRef.beginAddRowByIndex(10);   // Spawns the add row UI at index 10
+gridRef.beginAddRowByIndex(0);    // Spawns the add row UI as the first record
 ```
 <!-- end: React -->
 
@@ -635,7 +635,7 @@ this.grid.rowAddTextTemplate = (ctx: IgcGridEmptyTemplateContext) => {
 <!-- React -->
 <!-- ComponentStart: Grid, TreeGrid, HierarchicalGrid -->
 ```tsx
-gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
+gridRef.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
     return ('Adding Row');
 }
 ```            
diff --git a/doc/jp/components/grids/_shared/row-pinning.md b/doc/jp/components/grids/_shared/row-pinning.md
index 69615a728..bfa9fa167 100644
--- a/doc/jp/components/grids/_shared/row-pinning.md
+++ b/doc/jp/components/grids/_shared/row-pinning.md
@@ -96,7 +96,7 @@ this.grid.getRowByIndex(0).pinned = true;
 <!-- end: Angular, WebComponents -->
 
 ```tsx
-gridRef.current.getRowByIndex(0).pinned = true;
+gridRef.getRowByIndex(0).pinned = true;
 ```
 
 ```razor
@@ -113,8 +113,8 @@ this.grid.unpinRow('ALFKI');
 <!-- end: Angular, WebComponents -->
 
 ```tsx
-gridRef.current.pinRow('ALFKI');
-gridRef.current.unpinRow('ALFKI');
+gridRef.pinRow('ALFKI');
+gridRef.unpinRow('ALFKI');
 ```
 
 
diff --git a/doc/jp/components/grids/_shared/row-selection.md b/doc/jp/components/grids/_shared/row-selection.md
index 57576a56a..1b920c95c 100644
--- a/doc/jp/components/grids/_shared/row-selection.md
+++ b/doc/jp/components/grids/_shared/row-selection.md
@@ -277,7 +277,7 @@ public onClickSelect() {
 
 ```tsx
 function onClickSelect() {
-    gridRef.current.selectRows([1,2,5], true);
+    gridRef.selectRows([1,2,5], true);
 }
 
 <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate="true" ref={gridRef}>
@@ -347,7 +347,7 @@ public onClickDeselect() {
 
 ```tsx
 function onClickDeselect() {
-    gridRef.current.deselectRows([1,2,5]);
+    gridRef.deselectRows([1,2,5]);
 }
 
 <{ComponentSelector} primaryKey="ProductID" rowSelection="multiple" autoGenerate="true" ref={gridRef}>
@@ -468,7 +468,7 @@ public getSelectedRows() {
 
 ```tsx
 function getSelectedRows() {
-    return gridRef.current.selectedRows;
+    return gridRef.selectedRows;
 }
 ```
 
diff --git a/doc/jp/components/grids/_shared/search.md b/doc/jp/components/grids/_shared/search.md
index 59a6e1208..9dc63c637 100644
--- a/doc/jp/components/grids/_shared/search.md
+++ b/doc/jp/components/grids/_shared/search.md
@@ -287,11 +287,11 @@ public nextSearch(){
 ```tsx
 function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
     setSearchText(event.detail);
-    gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(event.detail, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 function nextSearch() {
-    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 
@@ -331,11 +331,11 @@ public void NextSearch()
 ```tsx
 function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
     setSearchText(event.detail);
-    gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(event.detail, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 function nextSearch() {
-    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 
@@ -476,11 +476,11 @@ public nextSearch() {
 
 ```tsx
 function prevSearch() {
-    gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findPrev(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 function nextSearch() {
-    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 <IgrIconButton key="prevIconButton" ref={iconButtonPrevRef} variant="flat" name="prev" collection="material" clicked={prevSearch}>
@@ -545,10 +545,10 @@ public onSearchKeydown(evt: KeyboardEvent) {
 function searchKeyDown(e: KeyboardEvent<HTMLElement>) {
     if (e.key === 'Enter') {
         e.preventDefault();
-        gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+        gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
     } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
         e.preventDefault();
-        gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+        gridRef.findPrev(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
     }
 }
 
@@ -611,16 +611,16 @@ public onSearchKeydown(evt: KeyboardEvent) {
 function searchKeyDown(e: KeyboardEvent<HTMLElement>) {
     if (e.key === 'Enter' || e.key === 'ArrowDown') {
         e.preventDefault();
-        gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+        gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
     } else if (e.key === 'ArrowUp') {
         e.preventDefault();
-        gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+        gridRef.findPrev(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
     }
 }
 
 function handleOnSearchChange(input: IgrInput, event: IgrComponentValueChangedEventArgs) {
     setSearchText(event.detail);
-    gridRef.current.findNext(event.detail, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(event.detail, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 <div onKeyDown={searchKeyDown}>
@@ -770,7 +770,7 @@ const caseSensitiveChipRef = useRef<IgrChip>(null);
 const exactMatchChipRef = useRef<IgrChip>(null);
 
 function updateSearch() {
-    gridRef.current.findNext("searchValue", caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext("searchValue", caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 <IgrChip ref={caseSensitiveChipRef} key="caseSensitiveChip" selectable="true">
@@ -965,14 +965,14 @@ const clearIconText =
 
 useEffect(() => {
      if (searchIconRef?.current) {
-      searchIconRef.current.registerIconFromText("search", searchIconText, "material");
-      searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
+      searchIconRef.registerIconFromText("search", searchIconText, "material");
+      searchIconRef.registerIconFromText("clear", clearIconText, "material");
     }
     if (iconButtonPrevRef?.current) {
-        iconButtonPrevRef.current.registerIconFromText("prev", prevIconText, "material");
+        iconButtonPrevRef.registerIconFromText("prev", prevIconText, "material");
     }
     if (iconButtonNextRef?.current) {
-        iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
+        iconButtonNextRef.registerIconFromText("next", nextIconText, "material");
     }
 }, []);
 
@@ -1081,20 +1081,20 @@ const clearIconText =
 
 useEffect(() => {
     if (searchIconRef?.current) {
-        searchIconRef.current.registerIconFromText("search", searchIconText, "material");
-        searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
+        searchIconRef.registerIconFromText("search", searchIconText, "material");
+        searchIconRef.registerIconFromText("clear", clearIconText, "material");
     }
     if (iconButtonPrevRef?.current) {
-        iconButtonPrevRef.current.registerIconFromText("prev", prevIconText,"material");
+        iconButtonPrevRef.registerIconFromText("prev", prevIconText,"material");
     }
     if (iconButtonNextRef?.current) {
-        iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
+        iconButtonNextRef.registerIconFromText("next", nextIconText, "material");
     }
 }, []);
 
 function clearSearch() {
   setSearchText('');
-  gridRef.current.clearSearch();
+  gridRef.clearSearch();
 }
 
 <IgrInput name="searchBox" value={searchText} inputOcurred={handleOnSearchChange}>
@@ -1277,10 +1277,10 @@ constructor() {
 </div>
 
 function handleCaseSensitiveChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
-  gridRef.current.findNext(searchText, event.detail, exactMatchChipRef.current.selected);
+  gridRef.findNext(searchText, event.detail, exactMatchChipRef.selected);
 }
 function handleExactMatchChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
-  gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, event.detail);
+  gridRef.findNext(searchText, caseSensitiveChipRef.selected, event.detail);
 }
 ```
 
@@ -1372,11 +1372,11 @@ public nextSearch() {
 
 ```tsx
 function prevSearch() {
-    gridRef.current.findPrev(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findPrev(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 function nextSearch() {
-    gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, exactMatchChipRef.current.selected);
+    gridRef.findNext(searchText, caseSensitiveChipRef.selected, exactMatchChipRef.selected);
 }
 
 <div slot="suffix" key="buttonsSuffix">
diff --git a/doc/jp/components/grids/_shared/selection.md b/doc/jp/components/grids/_shared/selection.md
index 01c1974a7..25fa48aff 100644
--- a/doc/jp/components/grids/_shared/selection.md
+++ b/doc/jp/components/grids/_shared/selection.md
@@ -273,7 +273,7 @@ public copySelectedCells(event) {
 
 ```tsx
 function copySelectedRowData() {
-    const selectedData = gridRef.current.getRowData(clickedCell.id.rowID);
+    const selectedData = gridRef.getRowData(clickedCell.id.rowID);
     copyData(selectedData);
     closeContextMenu();
 }
@@ -285,7 +285,7 @@ function copySelectedCellData() {
 }
 
 function copySelectedData() {
-    const selectedData = gridRef.current.getSelectedData(null,null);
+    const selectedData = gridRef.getSelectedData(null,null);
     copyData(selectedData);
     closeContextMenu();
 }
diff --git a/doc/jp/components/grids/_shared/sorting.md b/doc/jp/components/grids/_shared/sorting.md
index 0dcb221ab..d68ee1064 100644
--- a/doc/jp/components/grids/_shared/sorting.md
+++ b/doc/jp/components/grids/_shared/sorting.md
@@ -128,10 +128,10 @@ this.grid.sort([
 
 ```tsx
 // Perform a case insensitive ascending sort on the ProductName column.
-gridRef.current.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
+gridRef.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
 
 // Perform sorting on both the ProductName and Price columns.
-gridRef.current.sort([
+gridRef.sort([
     { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
     { fieldName: 'Price', dir: SortingDirection.Desc }
 ]);
@@ -187,10 +187,10 @@ this.treeGrid.sort([
 
 ```tsx
 // Perform a case insensitive ascending sort on the Category column.
-treeGridRef.current.sort([{ fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }]);
+treeGridRef.sort([{ fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }]);
 
 // Perform sorting on both the Category and Price columns.
-treeGridRef.current.sort([
+treeGridRef.sort([
     { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true },
     { fieldName: 'Price', dir: SortingDirection.Desc }
 ]);
@@ -247,10 +247,10 @@ this.hierarchicalGrid.sort([
 
 ```tsx
 // Perform a case insensitive ascending sort on the ProductName column.
-hierarchicalGridRef.current.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
+hierarchicalGridRef.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
 
 // Perform sorting on both the ProductName and Price columns.
-hierarchicalGridRef.current.sort([
+hierarchicalGridRef.sort([
     { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
     { fieldName: 'Price', dir: SortingDirection.Desc }
 ]);
@@ -275,10 +275,10 @@ this.grid.clearSort();
 
 ```tsx
 // Removes the sorting state from the ProductName column
-gridRef.current.clearSort('ProductName');
+gridRef.clearSort('ProductName');
 
 // Removes the sorting state from every column in the {ComponentTitle}
-gridRef.current.clearSort();
+gridRef.clearSort();
 ```
 
 ```razor
@@ -305,10 +305,10 @@ this.treeGrid.clearSort();
 
 ```tsx
 // Removes the sorting state from the Category column
-treeGridRef.current.clearSort('Category');
+treeGridRef.clearSort('Category');
 
 // Removes the sorting state from every column in the {ComponentTitle}
-treeGridRef.current.clearSort();
+treeGridRef.clearSort();
 ```
 
 ```razor
@@ -335,10 +335,10 @@ this.hierarchicalGrid.clearSort();
 
 ```tsx
 // Removes the sorting state from the ProductName column
-hierarchicalGridRef.current.clearSort('ProductName');
+hierarchicalGridRef.clearSort('ProductName');
 
 // Removes the sorting state from every column in the {ComponentTitle}
-hierarchicalGridRef.current.clearSort();
+hierarchicalGridRef.clearSort();
 ```
 
 ```razor
@@ -404,7 +404,7 @@ public connectedCallback() {
 
 ```tsx
 useEffect(() => {
-    gridRef.current.sortingExpressions = [
+    gridRef.sortingExpressions = [
         { fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true },
         { fieldName: 'ProductName', dir: SortingDirection.Desc }
     ];
@@ -454,7 +454,7 @@ public connectedCallback() {
 
 ```tsx
 useEffect(() => {
-    treeGridRef.current.sortingExpressions = [
+    treeGridRef.sortingExpressions = [
         { fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true },
         { fieldName: 'Price', dir: SortingDirection.Desc }
     ];
@@ -504,7 +504,7 @@ public connectedCallback() {
 
 ```tsx
 useEffect(() => {
-    hierarchicalGridRef.current.sortingExpressions = [
+    hierarchicalGridRef.sortingExpressions = [
         { fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true },
         { fieldName: 'ProductName', dir: SortingDirection.Desc }
     ];
diff --git a/doc/jp/components/grids/_shared/summaries.md b/doc/jp/components/grids/_shared/summaries.md
index 7d0f4c4a5..4f8294562 100644
--- a/doc/jp/components/grids/_shared/summaries.md
+++ b/doc/jp/components/grids/_shared/summaries.md
@@ -282,13 +282,13 @@ public disableSummary() {
 
 ```tsx
 function enableSummary() {
-    gridRef.current.enableSummaries([
+    gridRef.enableSummaries([
         {fieldName: 'ReorderLevel'},
         {fieldName: 'ProductID'}
     ]);
 }
 function disableSummary() {
-    gridRef.current.disableSummaries(['ProductID']);
+    gridRef.disableSummaries(['ProductID']);
 }
 
 <{ComponentSelector} ref={gridRef} auto-generate="false" height="800px" width="800px">
@@ -377,13 +377,13 @@ public disableSummary() {
 
 ```tsx
 function enableSummary() {
-    hierarchicalGridRef.current.enableSummaries([
+    hierarchicalGridRef.enableSummaries([
         {fieldName: 'GrammyNominations'},
         {fieldName: 'GrammyAwards'}
     ]);
 }
 function disableSummary() {
-    hierarchicalGridRef.current.disableSummaries(['GrammyNominations']);
+    hierarchicalGridRef.disableSummaries(['GrammyNominations']);
 }
 
 <IgrHierarchicalGrid autoGenerate="false" data={this.singersData} ref={this.hierarchicalGridRef} id="hierarchicalGrid" primaryKey="ID">
@@ -471,13 +471,13 @@ public disableSummary() {
 
 ```tsx
 function enableSummary() {
-    treeGridRef.current.enableSummaries([
+    treeGridRef.enableSummaries([
         {fieldName: 'Name'},
         {fieldName: 'Units'}
     ]);
 }
 function disableSummary() {
-    treeGridRef.current.disableSummaries(['Units']);
+    treeGridRef.disableSummaries(['Units']);
 }
 
 <IgrTreeGrid autoGenerate="false" data={this.ordersTreeData} ref={this.treeGridRef} id="treeGrid" primaryKey="ID">
diff --git a/doc/jp/components/grids/data-grid.md b/doc/jp/components/grids/data-grid.md
index 40fcbb781..48cfa1ca8 100644
--- a/doc/jp/components/grids/data-grid.md
+++ b/doc/jp/components/grids/data-grid.md
@@ -1042,7 +1042,7 @@ function fetchData(url: string): void {
       .then(data => onDataLoaded(data));
 }
 function onDataLoaded(jsonData: any[]) {
-    gridRef.current.data = jsonData;
+    gridRef.data = jsonData;
   }
 ```
 
diff --git a/doc/jp/components/grids/grid/groupby.md b/doc/jp/components/grids/grid/groupby.md
index 5739f8b41..290a098dc 100644
--- a/doc/jp/components/grids/grid/groupby.md
+++ b/doc/jp/components/grids/grid/groupby.md
@@ -183,7 +183,7 @@ grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase:
 
 <!-- React -->
 ```typescript
-gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }]);
+gridRef.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true }]);
 ```
 <!-- end: React -->
 
@@ -236,12 +236,12 @@ gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc,
 
 <!-- React -->
 ```typescript
-    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
-    gridRef.current.toggleGroup(groupRow);
+    const groupRow = gridRef.getRowByIndex(0).groupRow;
+    gridRef.toggleGroup(groupRow);
 ```
 
 ```typescript
-    const groupRow = gridRef.current.getRowByIndex(0);
+    const groupRow = gridRef.getRowByIndex(0);
     groupRow.expanded = false;
 ```
 <!-- end: React -->
@@ -280,8 +280,8 @@ gridRef.current.groupBy([{ fieldName: 'ProductName', dir: SortingDirection.Desc,
 
 <!-- React -->
 ```typescript
-    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
-    gridRef.current.selectRowsInGroup(groupRow);
+    const groupRow = gridRef.getRowByIndex(0).groupRow;
+    gridRef.selectRowsInGroup(groupRow);
 ```
 <!-- end: React -->
 
@@ -301,8 +301,8 @@ this.grid.SelectRowsInGroup(row.GroupRow, true);
 
 <!-- React -->
 ```typescript
-    const groupRow = gridRef.current.getRowByIndex(0).groupRow;
-    gridRef.current.deselectRowsInGroup(groupRow);
+    const groupRow = gridRef.getRowByIndex(0).groupRow;
+    gridRef.deselectRowsInGroup(groupRow);
 ```
 <!-- end: React -->
 
diff --git a/doc/jp/components/grids/hierarchical-grid/load-on-demand.md b/doc/jp/components/grids/hierarchical-grid/load-on-demand.md
index b738911db..ddeaebb53 100644
--- a/doc/jp/components/grids/hierarchical-grid/load-on-demand.md
+++ b/doc/jp/components/grids/hierarchical-grid/load-on-demand.md
@@ -597,8 +597,8 @@ const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);
 useEffect(() => {
     getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
       (data: any) => {
-        hierarchicalGrid.current.data = data;
-        hierarchicalGrid.current.markForCheck();
+        hierarchicalGrid.data = data;
+        hierarchicalGrid.markForCheck();
       }
     );
 }, []);
@@ -816,13 +816,13 @@ public gridCreated(event: CustomEvent<IgcGridCreatedEventArgs>, _parentKey: stri
 const hierarchicalGrid = useRef<IgrHierarchicalGrid>(null);
 
 useEffect(() => {
-    hierarchicalGrid.current.isLoading = true;
+    hierarchicalGrid.isLoading = true;
     
     getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
       (data: any) => {
-        hierarchicalGrid.current.isLoading = false;
-        hierarchicalGrid.current.data = data;
-        hierarchicalGrid.current.markForCheck();
+        hierarchicalGrid.isLoading = false;
+        hierarchicalGrid.data = data;
+        hierarchicalGrid.markForCheck();
     }
   );
 }, []);
diff --git a/doc/jp/components/grids/hierarchical-grid/overview.md b/doc/jp/components/grids/hierarchical-grid/overview.md
index ce58577b4..075c8a8e5 100644
--- a/doc/jp/components/grids/hierarchical-grid/overview.md
+++ b/doc/jp/components/grids/hierarchical-grid/overview.md
@@ -415,12 +415,12 @@ export default function Sample() {
   }
 
   useEffect(() => {
-    hierarchicalGrid.current.isLoading = true;
+    hierarchicalGrid.isLoading = true;
     getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
       (data: any) => {
-        hierarchicalGrid.current.isLoading = false;
-        hierarchicalGrid.current.data = data;
-        hierarchicalGrid.current.markForCheck();
+        hierarchicalGrid.isLoading = false;
+        hierarchicalGrid.data = data;
+        hierarchicalGrid.markForCheck();
       }
     );
   }, []);
diff --git a/doc/jp/components/inputs/combo/features.md b/doc/jp/components/inputs/combo/features.md
index f4a49ed19..e63445a69 100644
--- a/doc/jp/components/inputs/combo/features.md
+++ b/doc/jp/components/inputs/combo/features.md
@@ -63,16 +63,16 @@ const comboRef = useRef<IgrCombo>(null);
 const switchCaseSensitiveRef = useRef<IgrSwitch>(null);
 
 const disableFiltering = (switchComponent: IgrSwitch) => {
-    comboRef.current.disableFiltering =
-    switchCaseSensitiveRef.current.disabled = switchComponent.checked;
+    comboRef.disableFiltering =
+    switchCaseSensitiveRef.disabled = switchComponent.checked;
 };
 
 const showCaseSensitiveIcon = (switchComponent: IgrSwitch) => {
-    comboRef.current.caseSensitiveIcon = switchComponent.checked;
+    comboRef.caseSensitiveIcon = switchComponent.checked;
 };
 
 const disableCombo = (switchComponent: IgrSwitch) => {
-    comboRef.current.disabled = switchComponent.checked;
+    comboRef.disabled = switchComponent.checked;
 };
 ```
 
@@ -159,7 +159,7 @@ switchGroup.addEventListener("igcChange", () => {
 
 ```tsx
 const enableGrouping = (switchComponent: IgrSwitch) => {
-    comboRef.current.groupKey = switchComponent.checked ? "country" : undefined;
+    comboRef.groupKey = switchComponent.checked ? "country" : undefined;
 };
 ```
 
@@ -207,7 +207,7 @@ const options = {
     caseSensitive: true
 };
 
-comboRef.current.filteringOptions = options;
+comboRef.filteringOptions = options;
 ```
 <!-- end: React -->
 
diff --git a/doc/jp/components/inputs/combo/overview.md b/doc/jp/components/inputs/combo/overview.md
index c270a9166..a78680c8d 100644
--- a/doc/jp/components/inputs/combo/overview.md
+++ b/doc/jp/components/inputs/combo/overview.md
@@ -192,10 +192,10 @@ combo.value = ['NY01', 'UK01'];
 const comboRef = useRef<IgrCombo>(null);
 
 // Given the overview example from above this will return ['BG01']
-console.log(comboRef.current.value);
+console.log(comboRef.value);
 
 // Change the selected items to New York and London
-comboRef.current.value = ['NY01', 'UK01'];
+comboRef.value = ['NY01', 'UK01'];
 ```
 
 ### 選択 API
@@ -246,8 +246,8 @@ combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']);
 <!-- React -->
 ```tsx
 // Select/deselect items by their IDs as valueKey is set to 'id'
-comboRef.current.select(["UK01", "UK02", "UK03", "UK04", "UK05"]);
-comboRef.current.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]);
+comboRef.select(["UK01", "UK02", "UK03", "UK04", "UK05"]);
+comboRef.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]);
 ```
 <!-- end: React -->
 
@@ -275,8 +275,8 @@ combo.deselect();
 <!-- React -->
 ```tsx
 // Select/deselect all items
-comboRef.current.select([]);
-comboRef.current.deselect([]);
+comboRef.select([]);
+comboRef.deselect([]);
 ```
 <!-- end: React -->
 
@@ -293,8 +293,8 @@ combo.deselect([cities[1], cities[5]]);
 <!-- React -->
 ```tsx
 // Select/deselect values by object references when no valueKey is provided
-comboRef.current.select([cities[1], cities[5]]);
-comboRef.current.deselect([cities[1], cities[5]]);
+comboRef.select([cities[1], cities[5]]);
+comboRef.deselect([cities[1], cities[5]]);
 ```
 <!-- end: React -->
 
diff --git a/doc/jp/components/inputs/combo/single-selection.md b/doc/jp/components/inputs/combo/single-selection.md
index 79fcb1d7a..ce5299a0e 100644
--- a/doc/jp/components/inputs/combo/single-selection.md
+++ b/doc/jp/components/inputs/combo/single-selection.md
@@ -60,7 +60,7 @@ combo.select('BG01');
 <!-- React -->
 ```tsx
 // select the item matching the 'BG01' value of the value key field.
-comboRef.current.select('BG01');
+comboRef.select('BG01');
 ```
 <!-- end: React -->
 
@@ -88,7 +88,7 @@ combo.deselect('BG01');
 <!-- React -->
 ```tsx
 // deselect the item matching the 'BG01' value of the value key field.
-comboRef.current.deselect('BG01');
+comboRef.deselect('BG01');
 ```
 <!-- end: React -->
 
diff --git a/doc/jp/components/notifications/banner.md b/doc/jp/components/notifications/banner.md
index dd12b9a53..98ed4f752 100644
--- a/doc/jp/components/notifications/banner.md
+++ b/doc/jp/components/notifications/banner.md
@@ -81,7 +81,7 @@ Banner コンポーネントを表示するには、ボタン クリックで `S
 ```
 
 ```tsx
-<IgrButton clicked={() => bannerRef.current.show()}>
+<IgrButton clicked={() => bannerRef.show()}>
     <span>Show Banner</span>
 </IgrButton>
 
@@ -212,7 +212,7 @@ Banner コンポーネントを表示するには、ボタン クリックで `S
     <IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
     <span key="message">You have lost connection to the internet. This app is offline.</span>
     <div key="actions" slot="actions">
-        <IgrButton key="button" variant="flat" clicked={() => bannerRef.current.toggle()}>
+        <IgrButton key="button" variant="flat" clicked={() => bannerRef.toggle()}>
             <IgrRipple key="ripple" />
             <span key="action-text">Toggle Banner</span>
         </IgrButton>
@@ -271,7 +271,7 @@ banner.addEventListener('igcClosing', (event) => {
 const bannerRef = useRef<IgrBanner>(null);
 
 useEffect(() => {
-    bannerRef.current.nativeElement.addEventListener('igcClosing', (event) => {
+    bannerRef.nativeElement.addEventListener('igcClosing', (event) => {
         event.preventDefault();
     });
 }, [])
@@ -332,7 +332,7 @@ function handleClosing() {
     <IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
     <span key="message">You have lost connection to the internet. This app is offline.</span>
     <div key="actions" slot="actions">
-        <IgrButton key="button-offline" variant="flat" clicked={() => bannerRef.current.hide()}>
+        <IgrButton key="button-offline" variant="flat" clicked={() => bannerRef.hide()}>
             <IgrRipple key="ripple-offline" />
             <span key="action-offline">Continue Offline</span>
         </IgrButton>
@@ -447,11 +447,11 @@ const [wifiState, setWifiState] = useState(false);
 
 function refreshBanner() {
     if (!wifiState) {
-        iconRef.current.name = 'signal_wifi_4_bar';
-        bannerRef.current.hide();
+        iconRef.name = 'signal_wifi_4_bar';
+        bannerRef.hide();
     } else {
-        iconRef.current.name = 'signal_wifi_off';
-        bannerRef.current.show();
+        iconRef.name = 'signal_wifi_off';
+        bannerRef.show();
     }
     setWifiState(current => !current);
 }
diff --git a/doc/jp/components/scheduling/date-picker.md b/doc/jp/components/scheduling/date-picker.md
index eea769026..7f7621cba 100644
--- a/doc/jp/components/scheduling/date-picker.md
+++ b/doc/jp/components/scheduling/date-picker.md
@@ -105,7 +105,7 @@ const date = new Date();
 DatePicker.value = date;
 ```
 ```tsx
-datePickerRef.current.value = new Date();
+datePickerRef.value = new Date();
 ```
 ```Razor
 <IgbDatePicker @ref="DatePicker" Value="@SelectedDate">
@@ -144,7 +144,7 @@ prefix スロットと suffix スロットを使用すると、入力のメイ
         name="arrow_upward" 
         collection="material" 
         class="small" 
-        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
+        onClick={() => datePickerRef.stepUp(DatePart.Month)}>
     </IgrIcon>
 </IgrDatePicker>
 ```
@@ -194,7 +194,7 @@ prefix スロットと suffix スロットを使用すると、入力のメイ
 <IgrDatePicker>
     <IgrButton 
         slot='actions' 
-        onClick={() => datePickerRef.current.showWeekNumbers = true}>
+        onClick={() => datePickerRef.showWeekNumbers = true}>
         <span>Show Week Numbers</span>
     </IgrButton>
 </IgrDatePicker>
@@ -264,13 +264,13 @@ DatePicker は `dialog` モードもサポートしています。
         slot="prefix" 
         name="arrow_upward" 
         collection="material" 
-        onClick={() => datePickerRef.current.stepUp(DatePart.Month)}>
+        onClick={() => datePickerRef.stepUp(DatePart.Month)}>
     </IgrIcon>
     <IgrIcon 
         slot="suffix" 
         name="arrow_downward" 
         collection="material" 
-        onClick={() => datePickerRef.current.stepDown(DatePart.Month)}>
+        onClick={() => datePickerRef.stepDown(DatePart.Month)}>
     </IgrIcon>
 </IgrDatePicker>
 ```