@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Utilities/utilities/uselocationsuggestions.json

@@ -0,0 +1,110 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:45.553Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useLocationSuggestions",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "slug": "utilities/uselocationsuggestions",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "f3c9a3bb71df3b7a71b5b2fe0fde3c0f9ff747da11d62b70aa4909a728ffbfb4"
+  },
+  "title": "useLocationSuggestions",
+  "lead": "The useLocationSuggestions hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.",
+  "content": [
+    {
+      "heading": "useLocationSuggestions",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"max-width-600\"><label for=\"locationAutosuggest\" class=\"display-inline-block\"><span>Here map location search</span></label><div class=\"AutoSuggest dropdown\"><div class=\"input-group width-100pct\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input id=\"locationAutosuggest\" placeholder=\"Search for location\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../../components/map/uikit_demo_credentials';\nimport AutoSuggest, { type AutoSuggestSuggestion } from '@rio-cloud/rio-uikit/AutoSuggest';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\nimport useLocationSuggestions from '@rio-cloud/rio-uikit/useLocationSuggestions';\n\nexport default () => {\n    const [searchValue, setSearchValue] = useState('');\n\n    const { suggestions, loading, error } = useLocationSuggestions(searchValue, {\n        apiKey: UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT.apikey,\n        limit: 20, // optional, but has to be between 5...20\n        lang: 'de-DE', // optional\n        // ... Add any additional options dynamically. See API documentation - https://www.here.com/docs/bundle/geocoding-and-search-api-v7-api-reference/page/index.html#/paths/~1autocomplete/get\n    });\n\n    const handleSuggestionsFetchRequested = (result: { value: string }) => {\n        setSearchValue(result.value);\n    };\n\n    const renderSuggestion = (suggestion: AutoSuggestSuggestion) => <span>{suggestion.label}</span>;\n\n    const inputProps = {\n        icon: 'rioglyph rioglyph-search',\n        placeholder: 'Search for location',\n        value: searchValue,\n    };\n\n    return (\n        <div className='max-width-600'>\n            <FormLabel htmlFor='locationAutosuggest'>Here map location search</FormLabel>\n            <AutoSuggest\n                id='locationAutosuggest'\n                inputProps={inputProps}\n                suggestions={suggestions}\n                onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n                renderSuggestion={renderSuggestion}\n                isLoading={loading}\n                openOnFocus={false}\n            />\n            {error && <div>{error.message}</div>}\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"max-width-600\">\n    <label for=\"locationAutosuggest\" class=\"display-inline-block\">\n        <span>Here map location search</span>\n    </label>\n    <div class=\"AutoSuggest dropdown\">\n        <div class=\"input-group width-100pct\">\n            <span class=\"input-group-addon\">\n                <span class=\"rioglyph rioglyph rioglyph-search\" aria-hidden=\"true\">\n                </span>\n            </span>\n            <div class=\"ClearableInput input-group\">\n                <input id=\"locationAutosuggest\" placeholder=\"Search for location\" class=\"form-control\" autocomplete=\"off\" type=\"text\" tabindex=\"0\" value=\"\">\n                <span class=\"clearButton hide\">\n                    <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                    </span>\n                </span>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "query",
+                      "type": "string",
+                      "default": "",
+                      "description": "The user input string to search for location suggestions."
+                    },
+                    {
+                      "name": "options",
+                      "type": "object",
+                      "default": "",
+                      "description": "Optional configuration for the hook."
+                    },
+                    {
+                      "name": "└apiKey",
+                      "type": "string",
+                      "default": "",
+                      "description": "Your HERE Maps API key. Defaults to \"YOUR_API_KEY\" if not provided."
+                    },
+                    {
+                      "name": "└fetchUrl",
+                      "type": "string",
+                      "default": "",
+                      "description": "Optional override for the autocomplete endpoint URL. Defaults to HERE Maps API URL."
+                    },
+                    {
+                      "name": "└limit",
+                      "type": "number",
+                      "default": "5",
+                      "description": "Optional value to define the result limit (between 5 and 20)."
+                    },
+                    {
+                      "name": "└...additionalOptions",
+                      "type": "unknown",
+                      "default": "",
+                      "description": "Pass in any additional option for the fetch API."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Returns",
+                  "rows": [
+                    {
+                      "name": "suggestions",
+                      "type": "LocationSuggestion[]",
+                      "default": "",
+                      "description": "An array of suggestion objects containing an id and label."
+                    },
+                    {
+                      "name": "loading",
+                      "type": "boolean",
+                      "default": "",
+                      "description": "Indicates whether the suggestions are currently being fetched."
+                    },
+                    {
+                      "name": "error",
+                      "type": "Error | null",
+                      "default": "",
+                      "description": "Error object if the fetch fails, otherwise null."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/usemax.json

@@ -0,0 +1,86 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:47.621Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useMax",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "slug": "utilities/usemax",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "581281227aba01d0368f15d4725086bf01642ffb37515d2cb9214e7e6f1bebdf"
+  },
+  "title": "useMax",
+  "lead": "Returns the largest valid numeric value found at the specified path within a list of objects. Supports localized formats and gracefully skips unparsable values.",
+  "content": [
+    {
+      "heading": "useMax",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div>Longest duration: 1440 min</div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import useMax from '@rio-cloud/rio-uikit/useMax';\n\nconst deliveries = [\n    { shipment: { duration: 90 } }, // in minutes\n    { shipment: { duration: 150 } },\n    { shipment: { duration: 1440 } },\n    { shipment: { duration: 180 } },\n];\n\nexport default () => {\n    const maxDuration = useMax(deliveries, 'shipment.duration');\n\n    return <div>Longest duration: {maxDuration} min</div>;\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>Longest duration: 1440 min</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options for the `useMax` hook",
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "unknown[]",
+                      "default": "",
+                      "description": "The array of objects to evaluate."
+                    },
+                    {
+                      "name": "path",
+                      "type": "string",
+                      "default": "",
+                      "description": "Dot-separated path to the numeric value inside each object."
+                    },
+                    {
+                      "name": "options",
+                      "type": "object",
+                      "default": "",
+                      "description": "Optional configuration for number parsing."
+                    },
+                    {
+                      "name": "└locale",
+                      "type": "string",
+                      "default": "\"en-GB\"",
+                      "description": "Locale string used for parsing localized number formats. Affects grouping and decimal separator interpretation."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Return value of the `useMax` hook",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "number",
+                      "default": "",
+                      "description": "The largest valid numeric value found at the given path, or 0 if none could be parsed."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/usemin.json

@@ -0,0 +1,86 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:47.852Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useMin",
+    "category": "Utilities",
+    "section": "Data aggregation hooks",
+    "slug": "utilities/usemin",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "df8f296cf5139bc46145c72a7dd8c8546417dc5eb725c20163aa79b0c6479838"
+  },
+  "title": "useMin",
+  "lead": "Returns the smallest valid numeric value found at the specified path within a list of objects. Handles localized number strings and safely ignores invalid values.",
+  "content": [
+    {
+      "heading": "useMin",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div>Lowest shipment value: 850&nbsp;€</div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { FormattedNumber, IntlProvider } from 'react-intl';\nimport useMin from '@rio-cloud/rio-uikit/useMin';\n\nconst deliveries = [\n    { shipment: { value: '2.345,50 €' } },\n    { shipment: { value: '1.000,75 €' } },\n    { shipment: { value: 850 } },\n    { shipment: { value: '2.000' } },\n];\n\nexport default () => {\n    const minValue = useMin(deliveries, 'shipment.value', {\n        locale: 'de-DE',\n    });\n\n    return (\n        <IntlProvider locale='de-DE'>\n            <div>\n                Lowest shipment value:{' '}\n                <FormattedNumber\n                    value={minValue}\n                    style='currency'\n                    currency='EUR'\n                    minimumFractionDigits={0}\n                    maximumFractionDigits={0}\n                />\n            </div>\n        </IntlProvider>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>Lowest shipment value: 850&nbsp;€</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options for the `useMin` hook",
+                  "rows": [
+                    {
+                      "name": "items",
+                      "type": "unknown[]",
+                      "default": "",
+                      "description": "The array of objects to evaluate."
+                    },
+                    {
+                      "name": "path",
+                      "type": "string",
+                      "default": "",
+                      "description": "Dot-separated path to the numeric value inside each object."
+                    },
+                    {
+                      "name": "options",
+                      "type": "object",
+                      "default": "",
+                      "description": "Optional configuration for number parsing."
+                    },
+                    {
+                      "name": "└locale",
+                      "type": "string",
+                      "default": "\"en-GB\"",
+                      "description": "Locale string used for parsing localized number formats. Affects grouping and decimal separator interpretation."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Return value of the `useMin` hook",
+                  "rows": [
+                    {
+                      "name": "value",
+                      "type": "number",
+                      "default": "",
+                      "description": "The smallest valid numeric value found at the given path, or 0 if none could be parsed."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/usemutationobserver.json

@@ -0,0 +1,69 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:41.235Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useMutationObserver",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/usemutationobserver",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "d319386425b8b2201644d797d7e65ea0cf664fb306d3fbf53257e86158b01eec"
+  },
+  "title": "useMutationObserver",
+  "lead": "The useMutationObserver hook enables you to listen for changes on the given element or on its children. For more details, check out https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver",
+  "content": [
+    {
+      "heading": "useMutationObserver",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-grid\"><div class=\"margin-y-15\"><div class=\"callout callout-default\"><div class=\" text-medium text-size-20 line-height-125rel margin-bottom-10\">Demo callout</div><p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p></div></div><div class=\"margin-top-20\"><div class=\"btn-toolbar\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Default Style</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Primary Style</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Secondary Style</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Warning Style</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Danger Style</button></div><div class=\"margin-top-15\"><label>Element Changes:</label><div>-</div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useRef, useCallback, useState } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport useMutationObserver from '@rio-cloud/rio-uikit/useMutationObserver';\n\nexport default () => {\n    const [changes, setChanges] = useState('-');\n    const [calloutStyle, setCalloutStyle] = useState('default');\n\n    const ref = useRef<HTMLElement>(null);\n\n    const handleTargetMutation = useCallback((mutationList: MutationRecord[]) => {\n        mutationList.map((mutation: MutationRecord) => {\n            console.log(mutation);\n            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {\n                setChanges(`className: ${(mutation.target as HTMLElement).className}`);\n            }\n        });\n    }, []);\n\n    useMutationObserver(ref, handleTargetMutation);\n\n    return (\n        <div className='display-grid'>\n            <div className='margin-y-15'>\n                <div ref={ref} className={`callout callout-${calloutStyle}`}>\n                    <div className=' text-medium text-size-20 line-height-125rel margin-bottom-10'>Demo callout</div>\n                    <p>\n                        At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.\n                    </p>\n                </div>\n            </div>\n            <div className='margin-top-20'>\n                <div className='btn-toolbar'>\n                    <Button onClick={() => setCalloutStyle('default')}>Set Default Style</Button>\n                    <Button onClick={() => setCalloutStyle('primary')}>Set Primary Style</Button>\n                    <Button onClick={() => setCalloutStyle('secondary')}>Set Secondary Style</Button>\n                    <Button onClick={() => setCalloutStyle('warning')}>Set Warning Style</Button>\n                    <Button onClick={() => setCalloutStyle('danger')}>Set Danger Style</Button>\n                </div>\n                <div className='margin-top-15'>\n                    <label>Element Changes:</label>\n                    <div>{changes}</div>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-grid\">\n    <div class=\"margin-y-15\">\n        <div class=\"callout callout-default\">\n            <div class=\" text-medium text-size-20 line-height-125rel margin-bottom-10\">Demo callout</div>\n            <p>At vero eos et accusam et justo duo dolores et ea rebum clita kasd gubergren, no sea takimata.</p>\n        </div>\n    </div>\n    <div class=\"margin-top-20\">\n        <div class=\"btn-toolbar\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Default Style</button>\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Primary Style</button>\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Secondary Style</button>\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Warning Style</button>\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Set Danger Style</button>\n        </div>\n        <div class=\"margin-top-15\">\n            <label>Element Changes:</label>\n            <div>-</div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "targetElement",
+                      "type": "HTMLElement | React.MutableRefObject<object> | null | undefined",
+                      "default": "",
+                      "description": "The ref or target element to observe changes for."
+                    },
+                    {
+                      "name": "callback",
+                      "type": "MutationCallback",
+                      "default": "",
+                      "description": "The callback to execute when mutations are observed."
+                    },
+                    {
+                      "name": "options",
+                      "type": "{ attributes?: boolean; childList?: boolean; subtree?: boolean; }",
+                      "default": "",
+                      "description": "Options passed to the mutation observer."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/useonlinestatus.json

@@ -0,0 +1,39 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:44.149Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useOnlineStatus",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "slug": "utilities/useonlinestatus",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "98b3e3aaec261d01ad5114973db557e74f3fc070b0fa57548171f8f89a9585fa"
+  },
+  "title": "useOnlineStatus",
+  "lead": "The useOnlineStatus hook tells you when there is a network connection or not.",
+  "content": [
+    {
+      "heading": "useOnlineStatus",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex justify-content-center align-items-center\"><div class=\"display-flex flex-column align-items-center text-size-14\"><span class=\"rioglyph rioglyph-wifi text-size-200pct \"></span><div>You are online</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import useOnlineStatus from '@rio-cloud/rio-uikit/useOnlineStatus';\n\nexport default () => {\n    const isOnline = useOnlineStatus();\n\n    return (\n        <div className='display-flex justify-content-center align-items-center'>\n            <div className='display-flex flex-column align-items-center text-size-14'>\n                <span className={`rioglyph rioglyph-wifi text-size-200pct ${isOnline ? '' : 'text-color-light'}`} />\n                <div>{`You are ${isOnline ? 'online' : 'offline'}`}</div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex justify-content-center align-items-center\">\n    <div class=\"display-flex flex-column align-items-center text-size-14\">\n        <span class=\"rioglyph rioglyph-wifi text-size-200pct \">\n        </span>\n        <div>You are online</div>\n    </div>\n</div>"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/useonscreen.json

@@ -0,0 +1,63 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:41.374Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useOnScreen",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/useonscreen",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "afb31ed6d19bcdc11f1de1380ac7be5eafa4a12178202cfe2991ed79dfa60e6f"
+  },
+  "title": "useOnScreen",
+  "lead": "The useOnScreen hook tells you when an element is visible on screen.",
+  "content": [
+    {
+      "heading": "useOnScreen",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"text-medium text-size-14\">Header 2 is not visible</div><hr><div class=\"height-300 overflow-scroll\"><div class=\"h1\">Header</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit</div><div class=\"h1\">Header 2 </div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit veritatis fugiat quia voluptates cupiditate vel rerum eligendi facere sint nostrum quam, maiores dolorem repellat voluptas! Magnam ullam quis quas aut consequuntur quo doloremque, earum sint soluta vero iste quasi voluptates labore rerum aspernatur illum esse maxime laudantium? Tempore perspiciatis perferendis ea dolorem et quasi eos illo beatae consectetur maxime, enim ducimus corrupti, accusantium quisquam rem dolorum itaque iste velit. Amet similique accusamus doloribus expedita modi a architecto accusantium labore unde non, dolore totam quaerat sit laboriosam quae ullam impedit, pariatur repudiandae quisquam debitis repellendus nihil. Cumque blanditiis ut recusandae illum! Maiores eveniet nulla exercitationem natus delectus est minus a architecto pariatur molestias quo nihil maxime quasi facere magnam neque dolorem ad, doloribus hic! Qui corporis perspiciatis dolores rem minima tenetur. Fugit ipsa consectetur ad reiciendis, quia iste, sapiente rerum exercitationem reprehenderit laborum eligendi cumque? Quia porro modi repudiandae nostrum accusamus! Corporis eum fugit nihil facilis placeat ab est obcaecati consequuntur qui atque tempore soluta aliquid saepe ducimus, at sed modi illo ipsa numquam ratione vero eos reprehenderit! Sapiente nesciunt consequatur labore iste quas possimus rem cumque, fugit laborum repellendus nisi adipisci officia temporibus quaerat! Beatae doloribus veritatis at, maiores suscipit debitis reiciendis cum impedit non aut modi iste? Placeat illo quisquam assumenda esse cum ipsum quasi perspiciatis voluptatem rerum itaque, similique quidem molestias exercitationem ullam eum amet tempore dolor aliquid unde deserunt dolore excepturi. Aut dolore rerum sequi nihil soluta eum expedita consequatur aliquid consequuntur saepe esse necessitatibus repudiandae, natus, officia enim odit rem nobis adipisci, voluptates autem dolor blanditiis ipsam animi a. Illo accusantium iure qui aperiam commodi, quidem, dolorem error eum animi, id nam? Corporis, non adipisci!</div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useRef } from 'react';\n\nimport useOnScreen from '@rio-cloud/rio-uikit/useOnScreen';\n\nexport default () => {\n    const headerTwoRef = useRef<HTMLDivElement>(null);\n    const visible = useOnScreen(headerTwoRef);\n\n    console.log(visible);\n\n    return (\n        <div>\n            <div className='text-medium text-size-14'>{`Header 2 is ${visible ? 'visible' : 'not visible'}`}</div>\n            <hr />\n            <div className='height-300 overflow-scroll'>\n                <div className='h1'>Header</div>\n                <div>\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta?\n                    Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates\n                    modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto\n                    dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate\n                    nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel\n                    cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto,\n                    eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae\n                    temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto,\n                    unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos,\n                    tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam\n                    repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis\n                    ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores\n                    accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a,\n                    inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam\n                    facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos,\n                    nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis\n                    exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum\n                    id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus\n                    cumque nobis iste asperiores illum fugit\n                </div>\n                <div className='h1' ref={headerTwoRef}>\n                    Header 2 {visible && '(Visible)'}\n                </div>\n                <div>\n                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta?\n                    Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates\n                    modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto\n                    dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate\n                    nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel\n                    cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto,\n                    eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae\n                    temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto,\n                    unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos,\n                    tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam\n                    repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis\n                    ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores\n                    accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a,\n                    inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam\n                    facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos,\n                    nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis\n                    exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum\n                    id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus\n                    cumque nobis iste asperiores illum fugit veritatis fugiat quia voluptates cupiditate vel rerum\n                    eligendi facere sint nostrum quam, maiores dolorem repellat voluptas! Magnam ullam quis quas aut\n                    consequuntur quo doloremque, earum sint soluta vero iste quasi voluptates labore rerum aspernatur\n                    illum esse maxime laudantium? Tempore perspiciatis perferendis ea dolorem et quasi eos illo beatae\n                    consectetur maxime, enim ducimus corrupti, accusantium quisquam rem dolorum itaque iste velit. Amet\n                    similique accusamus doloribus expedita modi a architecto accusantium labore unde non, dolore totam\n                    quaerat sit laboriosam quae ullam impedit, pariatur repudiandae quisquam debitis repellendus nihil.\n                    Cumque blanditiis ut recusandae illum! Maiores eveniet nulla exercitationem natus delectus est minus\n                    a architecto pariatur molestias quo nihil maxime quasi facere magnam neque dolorem ad, doloribus\n                    hic! Qui corporis perspiciatis dolores rem minima tenetur. Fugit ipsa consectetur ad reiciendis,\n                    quia iste, sapiente rerum exercitationem reprehenderit laborum eligendi cumque? Quia porro modi\n                    repudiandae nostrum accusamus! Corporis eum fugit nihil facilis placeat ab est obcaecati\n                    consequuntur qui atque tempore soluta aliquid saepe ducimus, at sed modi illo ipsa numquam ratione\n                    vero eos reprehenderit! Sapiente nesciunt consequatur labore iste quas possimus rem cumque, fugit\n                    laborum repellendus nisi adipisci officia temporibus quaerat! Beatae doloribus veritatis at, maiores\n                    suscipit debitis reiciendis cum impedit non aut modi iste? Placeat illo quisquam assumenda esse cum\n                    ipsum quasi perspiciatis voluptatem rerum itaque, similique quidem molestias exercitationem ullam\n                    eum amet tempore dolor aliquid unde deserunt dolore excepturi. Aut dolore rerum sequi nihil soluta\n                    eum expedita consequatur aliquid consequuntur saepe esse necessitatibus repudiandae, natus, officia\n                    enim odit rem nobis adipisci, voluptates autem dolor blanditiis ipsam animi a. Illo accusantium iure\n                    qui aperiam commodi, quidem, dolorem error eum animi, id nam? Corporis, non adipisci!\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"text-medium text-size-14\">Header 2 is not visible</div>\n    <hr>\n    <div class=\"height-300 overflow-scroll\">\n        <div class=\"h1\">Header</div>\n        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit</div>\n        <div class=\"h1\">Header 2 </div>\n        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde incidunt, nam id itaque error dicta? Numquam earum iusto optio officia, molestias debitis illum facilis nemo asperiores eaque voluptates modi? Dicta mollitia fugit doloremque vitae, dolores sequi fuga quas vel incidunt animi architecto dignissimos amet in quam praesentium corrupti voluptate dolorem impedit numquam aut cupiditate nulla! Nisi dolore dicta, cumque illum tempora enim dolores eum quis itaque nostrum architecto vel cum officiis aperiam qui exercitationem voluptatibus. Veritatis unde doloribus dolorem architecto, eum reprehenderit possimus similique eius cum obcaecati totam placeat. Delectus nulla, quae temporibus omnis assumenda autem ad quibusdam facilis aspernatur inventore nobis. Vitae architecto, unde consequuntur velit consequatur dicta mollitia, fuga iure hic accusamus blanditiis. Dignissimos, tenetur amet adipisci nostrum perferendis ad rerum accusamus distinctio repellendus eius, quisquam repellat nesciunt, consequatur culpa neque? Inventore vitae laborum aperiam ullam dolorem officiis ipsum aliquid doloribus pariatur, commodi iure illum soluta delectus, architecto ratione maiores accusamus. Provident quia sequi dolorum asperiores necessitatibus consequatur perspiciatis at a, inventore, deserunt corporis recusandae earum vero voluptas saepe pariatur, libero illo. Numquam facilis magnam exercitationem ipsam libero quidem minima dolores perferendis eveniet impedit eos, nesciunt unde velit facere itaque eum quasi laboriosam veritatis aliquid tenetur. Blanditiis exercitationem laborum, optio nulla minima libero sed doloremque soluta, dignissimos tempora rerum id nostrum iusto eveniet illo corrupti dicta. Non fuga exercitationem sit dignissimos voluptatibus cumque nobis iste asperiores illum fugit veritatis fugiat quia voluptates cupiditate vel rerum eligendi facere sint nostrum quam, maiores dolorem repellat voluptas! Magnam ullam quis quas aut consequuntur quo doloremque, earum sint soluta vero iste quasi voluptates labore rerum aspernatur illum esse maxime laudantium? Tempore perspiciatis perferendis ea dolorem et quasi eos illo beatae consectetur maxime, enim ducimus corrupti, accusantium quisquam rem dolorum itaque iste velit. Amet similique accusamus doloribus expedita modi a architecto accusantium labore unde non, dolore totam quaerat sit laboriosam quae ullam impedit, pariatur repudiandae quisquam debitis repellendus nihil. Cumque blanditiis ut recusandae illum! Maiores eveniet nulla exercitationem natus delectus est minus a architecto pariatur molestias quo nihil maxime quasi facere magnam neque dolorem ad, doloribus hic! Qui corporis perspiciatis dolores rem minima tenetur. Fugit ipsa consectetur ad reiciendis, quia iste, sapiente rerum exercitationem reprehenderit laborum eligendi cumque? Quia porro modi repudiandae nostrum accusamus! Corporis eum fugit nihil facilis placeat ab est obcaecati consequuntur qui atque tempore soluta aliquid saepe ducimus, at sed modi illo ipsa numquam ratione vero eos reprehenderit! Sapiente nesciunt consequatur labore iste quas possimus rem cumque, fugit laborum repellendus nisi adipisci officia temporibus quaerat! Beatae doloribus veritatis at, maiores suscipit debitis reiciendis cum impedit non aut modi iste? Placeat illo quisquam assumenda esse cum ipsum quasi perspiciatis voluptatem rerum itaque, similique quidem molestias exercitationem ullam eum amet tempore dolor aliquid unde deserunt dolore excepturi. Aut dolore rerum sequi nihil soluta eum expedita consequatur aliquid consequuntur saepe esse necessitatibus repudiandae, natus, officia enim odit rem nobis adipisci, voluptates autem dolor blanditiis ipsam animi a. Illo accusantium iure qui aperiam commodi, quidem, dolorem error eum animi, id nam? Corporis, non adipisci!</div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "React.MutableRefObject<HTMLElement>",
+                      "default": "",
+                      "description": "The react ref to the element to observe visibility for."
+                    },
+                    {
+                      "name": "options",
+                      "type": "Object",
+                      "default": "{ rootMargin: \"0px\" }",
+                      "description": "Additional IntersectionObserver options. See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

package/data/pages/Utilities/utilities/usepostmessage.json

@@ -0,0 +1,80 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:44.352Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/usePostMessage",
+    "category": "Utilities",
+    "section": "Browser & device hooks",
+    "slug": "utilities/usepostmessage",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "b4be9019abc63ba95b485d4762a0fedaf0ded3bf05a9f3c6886903c410c070c5"
+  },
+  "title": "usePostMessage",
+  "lead": "The usePostMessage hook allows to easily exchange events and data between the parent windown and embedded iframes.",
+  "content": [
+    {
+      "heading": "usePostMessage",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex gap-25\"><div class=\"border rounded padding-20 height-200\"><div class=\"text-medium\">Parent window</div><div class=\"btn-toolbar margin-top-20\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Send message to widget iframe</button></div><div class=\"margin-top-20\"><label>Message from widget:</label><div>-</div></div></div><div class=\"iframe-wrapper\"><iframe title=\"iframe\" id=\"postMessageExample\" src=\"/#postMessageExample\" class=\"unstyled width-100pct\" style=\"width: 1px; min-width: 100%; overflow: hidden;\" scrolling=\"no\"></iframe></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\nimport IframeResizer from 'iframe-resizer-react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport usePostMessage, { type RemoteAction } from '@rio-cloud/rio-uikit/usePostMessage';\n\nconst PREFIX = 'EVENT';\nconst EVENT_TYPE = `${PREFIX}_POST_MESSAGE_EXAMPLE`;\n\nexport default () => {\n    const [messageFromWidget, setMessageFromWidget] = useState('-');\n\n    const { sendMessageToWidget } = usePostMessage(PREFIX, (remoteAction: RemoteAction) => {\n        if (remoteAction.type === EVENT_TYPE) {\n            setMessageFromWidget(remoteAction.payload);\n        }\n    });\n\n    const handleSentToWidget = () => {\n        sendMessageToWidget(\n            {\n                type: EVENT_TYPE,\n                payload: 'Hello from the parent',\n            },\n            document.getElementById('postMessageExample') as HTMLIFrameElement\n        );\n    };\n\n    return (\n        <div className='display-flex gap-25'>\n            <div className='border rounded padding-20 height-200'>\n                <div className='text-medium'>Parent window</div>\n                <div className='btn-toolbar margin-top-20'>\n                    <Button onClick={handleSentToWidget}>Send message to widget iframe</Button>\n                </div>\n                <div className='margin-top-20'>\n                    <label>Message from widget:</label>\n                    <div>{messageFromWidget}</div>\n                </div>\n            </div>\n            <div className='iframe-wrapper'>\n                <IframeResizer\n                    id='postMessageExample'\n                    src='/#postMessageExample'\n                    className='unstyled width-100pct'\n                    style={{ width: '1px', minWidth: '100%' }}\n                />\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex gap-25\">\n    <div class=\"border rounded padding-20 height-200\">\n        <div class=\"text-medium\">Parent window</div>\n        <div class=\"btn-toolbar margin-top-20\">\n            <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Send message to widget iframe</button>\n        </div>\n        <div class=\"margin-top-20\">\n            <label>Message from widget:</label>\n            <div>-</div>\n        </div>\n    </div>\n    <div class=\"iframe-wrapper\">\n        <iframe title=\"iframe\" id=\"postMessageExample\" src=\"/#postMessageExample\" class=\"unstyled width-100pct\" style=\"width: 1px; min-width: 100%; overflow: hidden; height: 200px;\" scrolling=\"no\">\n        </iframe>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "messagePrefix",
+                      "type": "string",
+                      "default": "",
+                      "description": "A custom prefix to limit the event listener for these events."
+                    },
+                    {
+                      "name": "onReceiveMessage",
+                      "type": "(eventData: any) => void",
+                      "default": "",
+                      "description": "A callback function triggered when a message is received."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Returns",
+                  "rows": [
+                    {
+                      "name": "sendMessageToParent",
+                      "type": "(message: RemoteAction) => void",
+                      "default": "",
+                      "description": "Function to send an event with payload to the parent window."
+                    },
+                    {
+                      "name": "sendMessageToWidget",
+                      "type": "(message: RemoteAction, targetFrames: HTMLIFrameElement[])",
+                      "default": "",
+                      "description": "Function to send an event with payload to a list of iframes."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}