chore: Release 4.5.0

CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.0](https://github.com/naver/egjs-infinitegrid/compare/4.4.0...4.5.0) (2022-06-23)
+### :sparkles: Packages
+* `@egjs/infinitegrid` 4.5.0
+* `@egjs/react-infinitegrid` 4.5.0
+* `@egjs/svelte-infinitegrid` 4.5.0
+* `@egjs/vue-infinitegrid` 4.5.0
+* `@egjs/vue3-infinitegrid` 4.5.0
+* `@egjs/ngx-infinitegrid` 4.5.0
+
+
+### :rocket: New Features
+
+* `@egjs/infinitegrid`
+    * add insertByGroupIndex method (#489) ([87a06ef](https://github.com/naver/egjs-infinitegrid/commit/87a06ef9aad2a289e1360ac6c17f36e125ea75cf))
+    * add nextGroupKeys property in request events (#493) ([b0260ad](https://github.com/naver/egjs-infinitegrid/commit/b0260ad828e725e6f1266898e0df7ac30a116d80))
+
+
+### :mega: Other
+
+* All
+    * update packages versions ([171bb74](https://github.com/naver/egjs-infinitegrid/commit/171bb74f708110a2fd986276c9b8d65472fa64ab))
+* `@egjs/react-infinitegrid`
+    * remove browser field (#486) ([14b063c](https://github.com/naver/egjs-infinitegrid/commit/14b063cc220eb71fb946614f2c82207d19a682ab))
+
+
+
 ## [4.4.0](https://github.com/naver/egjs-infinitegrid/compare/4.3.1...4.4.0) (2022-05-25)
 ### :sparkles: Packages
 * `@egjs/infinitegrid` 4.4.0

packages/docs/docs/api/FrameInfiniteGrid.mdx

@@ -14,7 +14,7 @@ class FrameInfiniteGrid extends InfiniteGrid
 
 <div className="container">
   <div className="row mb-2"><div className="col col--6"><strong>Methods</strong></div><div className="col col--6"><strong>Events</strong></div></div>
-  <div className="row"><div className="col col--6"><a href="#renderItems">renderItems</a><br/><a href="#getWrapperElement">getWrapperElement</a><br/><a href="#getScrollContainerElement">getScrollContainerElement</a><br/><a href="#getContainerElement">getContainerElement</a><br/><a href="#syncItems">syncItems</a><br/><a href="#setCursors">setCursors</a><br/><a href="#getStartCursor">getStartCursor</a><br/><a href="#getEndCursor">getEndCursor</a><br/><a href="#append">append</a><br/><a href="#prepend">prepend</a><br/><a href="#insert">insert</a><br/><a href="#getStatus">getStatus</a><br/><a href="#setPlaceholder">setPlaceholder</a><br/><a href="#setLoading">setLoading</a><br/><a href="#appendPlaceholders">appendPlaceholders</a><br/><a href="#prependPlaceholders">prependPlaceholders</a><br/><a href="#removePlaceholders">removePlaceholders</a><br/><a href="#setStatus">setStatus</a><br/><a href="#removeGroupByIndex">removeGroupByIndex</a><br/><a href="#removeGroupByKey">removeGroupByKey</a><br/><a href="#removeByIndex">removeByIndex</a><br/><a href="#removeByKey">removeByKey</a><br/><a href="#updateItems">updateItems</a><br/><a href="#getItems">getItems</a><br/><a href="#getVisibleItems">getVisibleItems</a><br/><a href="#getRenderingItems">getRenderingItems</a><br/><a href="#getGroups">getGroups</a><br/><a href="#getVisibleGroups">getVisibleGroups</a><br/><a href="#wait">wait</a><br/><a href="#ready">ready</a><br/><a href="#isWait">isWait</a><br/><a href="#destroy">destroy</a><br/><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div><div className="col col--6"><a href="#event-changeScroll">changeScroll</a><br/><a href="#event-requestAppend">requestAppend</a><br/><a href="#event-requestPrepend">requestPrepend</a><br/><a href="#event-contentError">contentError</a><br/><a href="#event-renderComplete">renderComplete</a></div></div>
+  <div className="row"><div className="col col--6"><a href="#renderItems">renderItems</a><br/><a href="#getWrapperElement">getWrapperElement</a><br/><a href="#getScrollContainerElement">getScrollContainerElement</a><br/><a href="#getContainerElement">getContainerElement</a><br/><a href="#syncItems">syncItems</a><br/><a href="#setCursors">setCursors</a><br/><a href="#getStartCursor">getStartCursor</a><br/><a href="#getEndCursor">getEndCursor</a><br/><a href="#append">append</a><br/><a href="#prepend">prepend</a><br/><a href="#insert">insert</a><br/><a href="#insertByGroupIndex">insertByGroupIndex</a><br/><a href="#getStatus">getStatus</a><br/><a href="#setPlaceholder">setPlaceholder</a><br/><a href="#setLoading">setLoading</a><br/><a href="#appendPlaceholders">appendPlaceholders</a><br/><a href="#prependPlaceholders">prependPlaceholders</a><br/><a href="#removePlaceholders">removePlaceholders</a><br/><a href="#setStatus">setStatus</a><br/><a href="#removeGroupByIndex">removeGroupByIndex</a><br/><a href="#removeGroupByKey">removeGroupByKey</a><br/><a href="#removeByIndex">removeByIndex</a><br/><a href="#removeByKey">removeByKey</a><br/><a href="#updateItems">updateItems</a><br/><a href="#getItems">getItems</a><br/><a href="#getVisibleItems">getVisibleItems</a><br/><a href="#getRenderingItems">getRenderingItems</a><br/><a href="#getGroups">getGroups</a><br/><a href="#getVisibleGroups">getVisibleGroups</a><br/><a href="#wait">wait</a><br/><a href="#ready">ready</a><br/><a href="#isWait">isWait</a><br/><a href="#destroy">destroy</a><br/><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div><div className="col col--6"><a href="#event-changeScroll">changeScroll</a><br/><a href="#event-requestAppend">requestAppend</a><br/><a href="#event-requestPrepend">requestPrepend</a><br/><a href="#event-contentError">contentError</a><br/><a href="#event-renderComplete">renderComplete</a></div></div>
 </div>
 
 ## constructor
@@ -196,6 +196,29 @@ ig.insert(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`])
 ig.insert(4, [HTMLElement1, HTMLElement2]);
 ```
 
+### insertByGroupIndex {#insertByGroupIndex}
+
+<div>
+  <span className="badge badge--danger">inherited</span>
+</div>
+
+<p>Add items based on group index.</p>
+
+**Returns**: this
+- <ul><br /><li>An instance of a module itself</li><br /></ul>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|groupIndex|number|||<p>group index to add </p>|
+|items|InfiniteGridInsertedItems|||<p>items to be added </p>|
+|groupKey|string \| number|✔️||<p>The group key to be configured in items. It is automatically generated by default. </p>|
+
+```ts
+ig.insertByGroupIndex(2, `<div class="item">test1</div><div class="item">test2</div>`);
+ig.insertByGroupIndex(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`]);
+ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);
+```
+
 ### getStatus {#getStatus}
 
 <div>

packages/docs/docs/api/InfiniteGrid.mdx

@@ -14,7 +14,7 @@ class InfiniteGrid extends Component
 
 <div className="container">
   <div className="row mb-2"><div className="col col--6"><strong>Methods</strong></div><div className="col col--6"><strong>Events</strong></div></div>
-  <div className="row"><div className="col col--6"><a href="#renderItems">renderItems</a><br/><a href="#getWrapperElement">getWrapperElement</a><br/><a href="#getScrollContainerElement">getScrollContainerElement</a><br/><a href="#getContainerElement">getContainerElement</a><br/><a href="#syncItems">syncItems</a><br/><a href="#setCursors">setCursors</a><br/><a href="#getStartCursor">getStartCursor</a><br/><a href="#getEndCursor">getEndCursor</a><br/><a href="#append">append</a><br/><a href="#prepend">prepend</a><br/><a href="#insert">insert</a><br/><a href="#getStatus">getStatus</a><br/><a href="#setPlaceholder">setPlaceholder</a><br/><a href="#setLoading">setLoading</a><br/><a href="#appendPlaceholders">appendPlaceholders</a><br/><a href="#prependPlaceholders">prependPlaceholders</a><br/><a href="#removePlaceholders">removePlaceholders</a><br/><a href="#setStatus">setStatus</a><br/><a href="#removeGroupByIndex">removeGroupByIndex</a><br/><a href="#removeGroupByKey">removeGroupByKey</a><br/><a href="#removeByIndex">removeByIndex</a><br/><a href="#removeByKey">removeByKey</a><br/><a href="#updateItems">updateItems</a><br/><a href="#getItems">getItems</a><br/><a href="#getVisibleItems">getVisibleItems</a><br/><a href="#getRenderingItems">getRenderingItems</a><br/><a href="#getGroups">getGroups</a><br/><a href="#getVisibleGroups">getVisibleGroups</a><br/><a href="#wait">wait</a><br/><a href="#ready">ready</a><br/><a href="#isWait">isWait</a><br/><a href="#destroy">destroy</a><br/><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div><div className="col col--6"><a href="#event-changeScroll">changeScroll</a><br/><a href="#event-requestAppend">requestAppend</a><br/><a href="#event-requestPrepend">requestPrepend</a><br/><a href="#event-contentError">contentError</a><br/><a href="#event-renderComplete">renderComplete</a></div></div>
+  <div className="row"><div className="col col--6"><a href="#renderItems">renderItems</a><br/><a href="#getWrapperElement">getWrapperElement</a><br/><a href="#getScrollContainerElement">getScrollContainerElement</a><br/><a href="#getContainerElement">getContainerElement</a><br/><a href="#syncItems">syncItems</a><br/><a href="#setCursors">setCursors</a><br/><a href="#getStartCursor">getStartCursor</a><br/><a href="#getEndCursor">getEndCursor</a><br/><a href="#append">append</a><br/><a href="#prepend">prepend</a><br/><a href="#insert">insert</a><br/><a href="#insertByGroupIndex">insertByGroupIndex</a><br/><a href="#getStatus">getStatus</a><br/><a href="#setPlaceholder">setPlaceholder</a><br/><a href="#setLoading">setLoading</a><br/><a href="#appendPlaceholders">appendPlaceholders</a><br/><a href="#prependPlaceholders">prependPlaceholders</a><br/><a href="#removePlaceholders">removePlaceholders</a><br/><a href="#setStatus">setStatus</a><br/><a href="#removeGroupByIndex">removeGroupByIndex</a><br/><a href="#removeGroupByKey">removeGroupByKey</a><br/><a href="#removeByIndex">removeByIndex</a><br/><a href="#removeByKey">removeByKey</a><br/><a href="#updateItems">updateItems</a><br/><a href="#getItems">getItems</a><br/><a href="#getVisibleItems">getVisibleItems</a><br/><a href="#getRenderingItems">getRenderingItems</a><br/><a href="#getGroups">getGroups</a><br/><a href="#getVisibleGroups">getVisibleGroups</a><br/><a href="#wait">wait</a><br/><a href="#ready">ready</a><br/><a href="#isWait">isWait</a><br/><a href="#destroy">destroy</a><br/><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div><div className="col col--6"><a href="#event-changeScroll">changeScroll</a><br/><a href="#event-requestAppend">requestAppend</a><br/><a href="#event-requestPrepend">requestPrepend</a><br/><a href="#event-contentError">contentError</a><br/><a href="#event-renderComplete">renderComplete</a></div></div>
 </div>
 
 ## constructor
@@ -227,6 +227,29 @@ ig.insert(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`])
 ig.insert(4, [HTMLElement1, HTMLElement2]);
 ```
 
+### insertByGroupIndex {#insertByGroupIndex}
+
+<div>
+
+</div>
+
+<p>Add items based on group index.</p>
+
+**Returns**: this
+- <ul><br /><li>An instance of a module itself</li><br /></ul>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|groupIndex|number|||<p>group index to add </p>|
+|items|InfiniteGridInsertedItems|||<p>items to be added </p>|
+|groupKey|string \| number|✔️||<p>The group key to be configured in items. It is automatically generated by default. </p>|
+
+```ts
+ig.insertByGroupIndex(2, `<div class="item">test1</div><div class="item">test2</div>`);
+ig.insertByGroupIndex(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`]);
+ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);
+```
+
 ### getStatus {#getStatus}
 
 <div>

packages/docs/docs/api/JustifiedInfiniteGrid.mdx

@@ -14,7 +14,7 @@ class JustifiedInfiniteGrid extends InfiniteGrid
 
 <div className="container">
   <div className="row mb-2"><div className="col col--6"><strong>Methods</strong></div><div className="col col--6"><strong>Events</strong></div></div>
-  <div className="row"><div className="col col--6"><a href="#renderItems">renderItems</a><br/><a href="#getWrapperElement">getWrapperElement</a><br/><a href="#getScrollContainerElement">getScrollContainerElement</a><br/><a href="#getContainerElement">getContainerElement</a><br/><a href="#syncItems">syncItems</a><br/><a href="#setCursors">setCursors</a><br/><a href="#getStartCursor">getStartCursor</a><br/><a href="#getEndCursor">getEndCursor</a><br/><a href="#append">append</a><br/><a href="#prepend">prepend</a><br/><a href="#insert">insert</a><br/><a href="#getStatus">getStatus</a><br/><a href="#setPlaceholder">setPlaceholder</a><br/><a href="#setLoading">setLoading</a><br/><a href="#appendPlaceholders">appendPlaceholders</a><br/><a href="#prependPlaceholders">prependPlaceholders</a><br/><a href="#removePlaceholders">removePlaceholders</a><br/><a href="#setStatus">setStatus</a><br/><a href="#removeGroupByIndex">removeGroupByIndex</a><br/><a href="#removeGroupByKey">removeGroupByKey</a><br/><a href="#removeByIndex">removeByIndex</a><br/><a href="#removeByKey">removeByKey</a><br/><a href="#updateItems">updateItems</a><br/><a href="#getItems">getItems</a><br/><a href="#getVisibleItems">getVisibleItems</a><br/><a href="#getRenderingItems">getRenderingItems</a><br/><a href="#getGroups">getGroups</a><br/><a href="#getVisibleGroups">getVisibleGroups</a><br/><a href="#wait">wait</a><br/><a href="#ready">ready</a><br/><a href="#isWait">isWait</a><br/><a href="#destroy">destroy</a><br/><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div><div className="col col--6"><a href="#event-changeScroll">changeScroll</a><br/><a href="#event-requestAppend">requestAppend</a><br/><a href="#event-requestPrepend">requestPrepend</a><br/><a href="#event-contentError">contentError</a><br/><a href="#event-renderComplete">renderComplete</a></div></div>
+  <div className="row"><div className="col col--6"><a href="#renderItems">renderItems</a><br/><a href="#getWrapperElement">getWrapperElement</a><br/><a href="#getScrollContainerElement">getScrollContainerElement</a><br/><a href="#getContainerElement">getContainerElement</a><br/><a href="#syncItems">syncItems</a><br/><a href="#setCursors">setCursors</a><br/><a href="#getStartCursor">getStartCursor</a><br/><a href="#getEndCursor">getEndCursor</a><br/><a href="#append">append</a><br/><a href="#prepend">prepend</a><br/><a href="#insert">insert</a><br/><a href="#insertByGroupIndex">insertByGroupIndex</a><br/><a href="#getStatus">getStatus</a><br/><a href="#setPlaceholder">setPlaceholder</a><br/><a href="#setLoading">setLoading</a><br/><a href="#appendPlaceholders">appendPlaceholders</a><br/><a href="#prependPlaceholders">prependPlaceholders</a><br/><a href="#removePlaceholders">removePlaceholders</a><br/><a href="#setStatus">setStatus</a><br/><a href="#removeGroupByIndex">removeGroupByIndex</a><br/><a href="#removeGroupByKey">removeGroupByKey</a><br/><a href="#removeByIndex">removeByIndex</a><br/><a href="#removeByKey">removeByKey</a><br/><a href="#updateItems">updateItems</a><br/><a href="#getItems">getItems</a><br/><a href="#getVisibleItems">getVisibleItems</a><br/><a href="#getRenderingItems">getRenderingItems</a><br/><a href="#getGroups">getGroups</a><br/><a href="#getVisibleGroups">getVisibleGroups</a><br/><a href="#wait">wait</a><br/><a href="#ready">ready</a><br/><a href="#isWait">isWait</a><br/><a href="#destroy">destroy</a><br/><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div><div className="col col--6"><a href="#event-changeScroll">changeScroll</a><br/><a href="#event-requestAppend">requestAppend</a><br/><a href="#event-requestPrepend">requestPrepend</a><br/><a href="#event-contentError">contentError</a><br/><a href="#event-renderComplete">renderComplete</a></div></div>
 </div>
 
 ## constructor
@@ -196,6 +196,29 @@ ig.insert(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`])
 ig.insert(4, [HTMLElement1, HTMLElement2]);
 ```
 
+### insertByGroupIndex {#insertByGroupIndex}
+
+<div>
+  <span className="badge badge--danger">inherited</span>
+</div>
+
+<p>Add items based on group index.</p>
+
+**Returns**: this
+- <ul><br /><li>An instance of a module itself</li><br /></ul>
+
+|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
+|:---:|:---:|:---:|:---:|:---:|
+|groupIndex|number|||<p>group index to add </p>|
+|items|InfiniteGridInsertedItems|||<p>items to be added </p>|
+|groupKey|string \| number|✔️||<p>The group key to be configured in items. It is automatically generated by default. </p>|
+
+```ts
+ig.insertByGroupIndex(2, `<div class="item">test1</div><div class="item">test2</div>`);
+ig.insertByGroupIndex(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`]);
+ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);
+```
+
 ### getStatus {#getStatus}
 
 <div>