chore: Release 4.4.0

CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+* `@egjs/react-infinitegrid` 4.4.0
+* `@egjs/svelte-infinitegrid` 4.4.0
+* `@egjs/vue-infinitegrid` 4.4.0
+* `@egjs/vue3-infinitegrid` 4.4.0
+* `@egjs/ngx-infinitegrid` 4.4.0
+
+
+### :rocket: New Features
+
+* `@egjs/react-infinitegrid`, `@egjs/infinitegrid`
+    * add includePlaceholders param (#484) ([39852c3](https://github.com/naver/egjs-infinitegrid/commit/39852c38f643afe56a959831b73e78bf84b7c0a9))
+
+
+### :mega: Other
+
+* All
+    * update packages versions ([29bdea0](https://github.com/naver/egjs-infinitegrid/commit/29bdea08f334113e4a73180dd5f9e803c4befc99))
+
+
+
 ## [4.3.1](https://github.com/naver/egjs-infinitegrid/compare/4.3.0...4.3.1) (2022-05-17)
 ### :sparkles: Packages
 * `@egjs/infinitegrid` 4.3.1

package.json

@@ -39,7 +39,7 @@
   ],
   "devDependencies": {
     "@daybrush/jsdoc": "^0.3.12",
-    "@egjs/release-helper": "^0.2.1",
+    "@egjs/release-helper": "^0.2.3",
     "egjs-jsdoc-template": "^1.4.4",
     "jsdoc-to-mdx": "^1.1.2",
     "lerna": "^4.0.0",

packages/docs/docs/api/FrameInfiniteGrid.mdx

@@ -209,6 +209,7 @@ ig.insert(4, [HTMLElement1, HTMLElement2]);
 |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
 |:---:|:---:|:---:|:---:|:---:|
 |type|STATUS_TYPE|✔️||<p>STATUS_TYPE.NOT_REMOVE = Get all information about items. STATUS_TYPE.REMOVE_INVISIBLE_ITEMS = Get information on visible items only. STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS = Compress invisible items. You can replace it with a placeholder. STATUS_TYPE.MINIMIZE_INVISIBLE_GROUPS = Compress invisible groups. </p>|
+|includePlaceholders|boolean|✔️||<p>Whether to include items corresponding to placeholders. </p>|
 
 ### setPlaceholder {#setPlaceholder}
 

packages/docs/docs/api/FrameInfiniteGridOptions.mdx

@@ -10,51 +10,51 @@ custom_edit_url: null
 
 |PROPERTY|TYPE|DESCRIPTION|
 |:---:|:---:|:---:|
-|horizontal|boolean|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.<br /></p>|
-|percentage|Array&lt;"position" \| "size"&gt; \| boolean|<p>Whether to set the css size and position of the item to %.<br /></p>|
-|isEqualSize|boolean|<p>Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to &quot;true&quot;, the performance of layout arrangement can be improved.<br /></p>|
-|isConstantSize|boolean|<p>Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.<br /></p>|
-|gap|number|<p>Gap used to create space around items.<br /></p>|
-|attributePrefix|string|<p>The prefix to use element's data attribute.<br /></p>|
-|resizeDebounce|number|<p>Debounce time to set in the resize event. (unit: ms)<br /></p>|
-|maxResizeDebounce|number|<p>Maximum time to debounce the resize event. (0 is not set)<br /></p>|
-|autoResize|boolean|<p>Whether the resize method should be called automatically after a window resize event.<br /></p>|
-|useFit|boolean|<p>Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0.<br /></p>|
-|useTransform|boolean|<p>Whether to use transform property instead of using left and top css properties.<br /></p>|
-|renderOnPropertyChange|boolean|<p>Whether to automatically render through property change.<br /></p>|
-|preserveUIOnDestroy|boolean|<p>Whether to preserve the UI of the existing container or item when destroying.<br /></p>|
-|defaultDirection|"start" \| "end"|<p>The default direction value when direction is not set in the render option.<br /></p>|
-|outlineLength|number|<p>The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.<br /></p>|
-|outlineSize|number|<p>The size of the outline. If the outline size is 0, it is calculated according to the grid type.<br /></p>|
-|useRoundedSize|boolean|<p>Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.<br /></p>|
-|useResizeObserver|boolean|<p>Whether to use ResizeObserver event to detect container size change when <code>autoResize</code> option is used.<br /></p>|
-|observeChildren|boolean|<p>Whether to detect size change of children if useResizeObserver option is used.<br /></p>|
-|externalItemRenderer|ItemRenderer \| null|<p>You can set the ItemRenderer directly externally.<br /></p>|
-|externalContainerManager|ContainerManager \| null|<p>You can set the ContainerManager directly externally.<br /></p>|
+|horizontal|boolean||
+|percentage|Array&lt;"position" \| "size"&gt; \| boolean||
+|isEqualSize|boolean||
+|isConstantSize|boolean||
+|gap|number||
+|attributePrefix|string||
+|resizeDebounce|number||
+|maxResizeDebounce|number||
+|autoResize|boolean||
+|useFit|boolean||
+|useTransform|boolean||
+|renderOnPropertyChange|boolean||
+|preserveUIOnDestroy|boolean||
+|defaultDirection|"start" \| "end"||
+|outlineLength|number||
+|outlineSize|number||
+|useRoundedSize|boolean||
+|useResizeObserver|boolean||
+|observeChildren|boolean||
+|externalItemRenderer|ItemRenderer \| null||
+|externalContainerManager|ContainerManager \| null||
 |frame|number[][]|<p>The shape of the grid. You can set the shape and order of items with a 2d array ([contentPos][inlinePos]). You can place items as many times as you fill the array with numbers, and zeros and spaces are empty spaces. The order of the items is arranged in ascending order of the numeric values that fill the array. (default: [])<br /></p>|
 |useFrameFill|boolean|<p>Make sure that the frame can be attached after the previous frame. (default: true) </p>|
 |rectSize|number \| {inlineSize: number, contentSize: number}|<p>1x1 rect size. If it is 0, it is determined by the number of columns in the frame. (default: 0) </p>|
-|horizontal|boolean|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.<br /></p>|
-|percentage|Array&lt;"position" \| "size"&gt; \| boolean|<p>Whether to set the css size and position of the item to %.<br /></p>|
-|isEqualSize|boolean|<p>Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to &quot;true&quot;, the performance of layout arrangement can be improved.<br /></p>|
-|isConstantSize|boolean|<p>Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.<br /></p>|
-|gap|number|<p>Gap used to create space around items.<br /></p>|
-|attributePrefix|string|<p>The prefix to use element's data attribute.<br /></p>|
-|resizeDebounce|number|<p>Debounce time to set in the resize event. (unit: ms)<br /></p>|
-|maxResizeDebounce|number|<p>Maximum time to debounce the resize event. (0 is not set)<br /></p>|
-|autoResize|boolean|<p>Whether the resize method should be called automatically after a window resize event.<br /></p>|
-|useFit|boolean|<p>Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0.<br /></p>|
-|useTransform|boolean|<p>Whether to use transform property instead of using left and top css properties.<br /></p>|
-|renderOnPropertyChange|boolean|<p>Whether to automatically render through property change.<br /></p>|
-|preserveUIOnDestroy|boolean|<p>Whether to preserve the UI of the existing container or item when destroying.<br /></p>|
-|defaultDirection|"start" \| "end"|<p>The default direction value when direction is not set in the render option.<br /></p>|
-|outlineLength|number|<p>The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.<br /></p>|
-|outlineSize|number|<p>The size of the outline. If the outline size is 0, it is calculated according to the grid type.<br /></p>|
-|useRoundedSize|boolean|<p>Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.<br /></p>|
-|useResizeObserver|boolean|<p>Whether to use ResizeObserver event to detect container size change when <code>autoResize</code> option is used.<br /></p>|
-|observeChildren|boolean|<p>Whether to detect size change of children if useResizeObserver option is used.<br /></p>|
-|externalItemRenderer|ItemRenderer \| null|<p>You can set the ItemRenderer directly externally.<br /></p>|
-|externalContainerManager|ContainerManager \| null|<p>You can set the ContainerManager directly externally.<br /></p>|
+|horizontal|boolean||
+|percentage|Array&lt;"position" \| "size"&gt; \| boolean||
+|isEqualSize|boolean||
+|isConstantSize|boolean||
+|gap|number||
+|attributePrefix|string||
+|resizeDebounce|number||
+|maxResizeDebounce|number||
+|autoResize|boolean||
+|useFit|boolean||
+|useTransform|boolean||
+|renderOnPropertyChange|boolean||
+|preserveUIOnDestroy|boolean||
+|defaultDirection|"start" \| "end"||
+|outlineLength|number||
+|outlineSize|number||
+|useRoundedSize|boolean||
+|useResizeObserver|boolean||
+|observeChildren|boolean||
+|externalItemRenderer|ItemRenderer \| null||
+|externalContainerManager|ContainerManager \| null||
 |container|boolean \| string \| HTMLElement|<p>The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly. (default: false) </p>|
 |containerTag|string|<p>If you create a container, you can set the container's tag. (default: &quot;div&quot;) </p>|
 |threshold|number|<p>The size of the scrollable area for adding the next group of items. (default: 100) </p>|

packages/docs/docs/api/InfiniteGrid.mdx

@@ -240,6 +240,7 @@ ig.insert(4, [HTMLElement1, HTMLElement2]);
 |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
 |:---:|:---:|:---:|:---:|:---:|
 |type|STATUS_TYPE|✔️||<p>STATUS_TYPE.NOT_REMOVE = Get all information about items. STATUS_TYPE.REMOVE_INVISIBLE_ITEMS = Get information on visible items only. STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS = Compress invisible items. You can replace it with a placeholder. STATUS_TYPE.MINIMIZE_INVISIBLE_GROUPS = Compress invisible groups. </p>|
+|includePlaceholders|boolean|✔️||<p>Whether to include items corresponding to placeholders. </p>|
 
 ### setPlaceholder {#setPlaceholder}
 

packages/docs/docs/api/InfiniteGridOptions.mdx

@@ -10,27 +10,27 @@ custom_edit_url: null
 
 |PROPERTY|TYPE|DESCRIPTION|
 |:---:|:---:|:---:|
-|horizontal|boolean|<p>Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, <code>inlinePos</code> is left, <code>inlineSize</code> is width, <code>contentPos</code> is top, and <code>contentSize</code> is height. If horizontal is true, <code>inlinePos</code> is top, <code>inlineSize</code> is height, <code>contentPos</code> is left, and <code>contentSize</code> is width.<br /></p>|
-|percentage|Array&lt;"position" \| "size"&gt; \| boolean|<p>Whether to set the css size and position of the item to %.<br /></p>|
-|isEqualSize|boolean|<p>Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to &quot;true&quot;, the performance of layout arrangement can be improved.<br /></p>|
-|isConstantSize|boolean|<p>Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.<br /></p>|
-|gap|number|<p>Gap used to create space around items.<br /></p>|
-|attributePrefix|string|<p>The prefix to use element's data attribute.<br /></p>|
-|resizeDebounce|number|<p>Debounce time to set in the resize event. (unit: ms)<br /></p>|
-|maxResizeDebounce|number|<p>Maximum time to debounce the resize event. (0 is not set)<br /></p>|
-|autoResize|boolean|<p>Whether the resize method should be called automatically after a window resize event.<br /></p>|
-|useFit|boolean|<p>Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0.<br /></p>|
-|useTransform|boolean|<p>Whether to use transform property instead of using left and top css properties.<br /></p>|
-|renderOnPropertyChange|boolean|<p>Whether to automatically render through property change.<br /></p>|
-|preserveUIOnDestroy|boolean|<p>Whether to preserve the UI of the existing container or item when destroying.<br /></p>|
-|defaultDirection|"start" \| "end"|<p>The default direction value when direction is not set in the render option.<br /></p>|
-|outlineLength|number|<p>The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.<br /></p>|
-|outlineSize|number|<p>The size of the outline. If the outline size is 0, it is calculated according to the grid type.<br /></p>|
-|useRoundedSize|boolean|<p>Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.<br /></p>|
-|useResizeObserver|boolean|<p>Whether to use ResizeObserver event to detect container size change when <code>autoResize</code> option is used.<br /></p>|
-|observeChildren|boolean|<p>Whether to detect size change of children if useResizeObserver option is used.<br /></p>|
-|externalItemRenderer|ItemRenderer \| null|<p>You can set the ItemRenderer directly externally.<br /></p>|
-|externalContainerManager|ContainerManager \| null|<p>You can set the ContainerManager directly externally.<br /></p>|
+|horizontal|boolean||
+|percentage|Array&lt;"position" \| "size"&gt; \| boolean||
+|isEqualSize|boolean||
+|isConstantSize|boolean||
+|gap|number||
+|attributePrefix|string||
+|resizeDebounce|number||
+|maxResizeDebounce|number||
+|autoResize|boolean||
+|useFit|boolean||
+|useTransform|boolean||
+|renderOnPropertyChange|boolean||
+|preserveUIOnDestroy|boolean||
+|defaultDirection|"start" \| "end"||
+|outlineLength|number||
+|outlineSize|number||
+|useRoundedSize|boolean||
+|useResizeObserver|boolean||
+|observeChildren|boolean||
+|externalItemRenderer|ItemRenderer \| null||
+|externalContainerManager|ContainerManager \| null||
 |container|boolean \| string \| HTMLElement|<p>The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly. (default: false) </p>|
 |containerTag|string|<p>If you create a container, you can set the container's tag. (default: &quot;div&quot;) </p>|
 |threshold|number|<p>The size of the scrollable area for adding the next group of items. (default: 100) </p>|

packages/docs/docs/api/JustifiedInfiniteGrid.mdx

@@ -209,6 +209,7 @@ ig.insert(4, [HTMLElement1, HTMLElement2]);
 |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
 |:---:|:---:|:---:|:---:|:---:|
 |type|STATUS_TYPE|✔️||<p>STATUS_TYPE.NOT_REMOVE = Get all information about items. STATUS_TYPE.REMOVE_INVISIBLE_ITEMS = Get information on visible items only. STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS = Compress invisible items. You can replace it with a placeholder. STATUS_TYPE.MINIMIZE_INVISIBLE_GROUPS = Compress invisible groups. </p>|
+|includePlaceholders|boolean|✔️||<p>Whether to include items corresponding to placeholders. </p>|
 
 ### setPlaceholder {#setPlaceholder}