@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,63 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:37.320Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/usePrevious",
+    "category": "Utilities",
+    "section": "Lifecycle & execution hooks",
+    "slug": "utilities/useprevious",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "06956f6b5c43a6d251786610518a02caa155319d9d4a9d217ac7fe55195919ef"
+  },
+  "title": "usePrevious",
+  "lead": "The usePrevious hook allows to easily access state from previous component render. Instead of using a React.ref and a useEffect, this hook uses a useState internally to keep track of the previous state value.",
+  "content": [
+    {
+      "heading": "usePrevious",
+      "body": "- If the value you need can be computed entirely from the current props or other state, remove that redundant state altogether. If you’re worried about recomputing too often, the useMemo Hook can help.\n- If you want to reset the entire component tree’s state, pass a different key to your component.\n- If you can, update all the relevant state in the event handlers.\n\n```jsx\nfunction List({ items }) {\n  const [isReverse, setIsReverse] = useState(false);\n  const [selection, setSelection] = useState(null);\n\n  // Better: Adjust the state while rendering\n  const [prevItems, setPrevItems] = useState(items);\n  if (items !== prevItems) {\n    setPrevItems(items);\n    setSelection(null);\n  }\n  // ...\n}\n```\n\n> Note: If you want to use this to update the internal state due to a prop change, you might run into a loop. Therefore, use the following snippet suggested by the React team here: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex flex-wrap gap-20 align-items-center\"><div class=\"NumberControl margin-0 width-100\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"1\"></div><div class=\"input-group-addon \"><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div><div class=\"text-italic text-color-darker\">{ count: 1, previousCount: 1 }</div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport usePrevious from '@rio-cloud/rio-uikit/usePrevious';\nimport NumberControl from '@rio-cloud/rio-uikit/NumberControl';\n\nexport default () => {\n    const [count, setCount] = useState<number | undefined>(1);\n\n    const previousCount = usePrevious(count);\n\n    return (\n        <div className='display-flex flex-wrap gap-20 align-items-center'>\n            <NumberControl\n                value={count}\n                onChange={(value?: number) => setCount(value)}\n                className='margin-0 width-100'\n            />\n            <div className='text-italic text-color-darker'>\n                {`{ count: ${count}, previousCount: ${previousCount} }`}\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"display-flex flex-wrap gap-20 align-items-center\">\n    <div class=\"NumberControl margin-0 width-100\">\n        <div class=\"input-group\">\n            <div class=\"form-control-feedback-wrapper\">\n                <input type=\"number\" step=\"1\" min=\"0\" max=\"1.7976931348623157e+308\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"1\">\n            </div>\n            <div class=\"input-group-addon \">\n                <div class=\"display-flex padding-left-10\">\n                    <div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\">\n                        <div class=\"rioglyph rioglyph-minus scale-90\">\n                        </div>\n                    </div>\n                    <div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\">\n                        <div class=\"rioglyph rioglyph-plus scale-90\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"text-italic text-color-darker\">{ count: 1, previousCount: 1 }</div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "state",
+                      "type": "any",
+                      "default": "",
+                      "description": "The value of the current state to keep track of."
+                    },
+                    {
+                      "name": "",
+                      "type": "any",
+                      "default": "",
+                      "description": "Returns the previous value of the state to keep track of."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,65 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:42.668Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useResizeObserver",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/useresizeobserver",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "42e366f22c330b8b47ba5048ecca931604b8c8864bedbd21d38aad32f081aba7"
+  },
+  "title": "useResizeObserver",
+  "lead": "The useResizeObserver hook allows to react on resize changes of a given element.",
+  "content": [
+    {
+      "heading": "useResizeObserver",
+      "body": "Note that is important to consider the padding of the element to observe and to take it into consideration when working with its width and height. When using the contentRect from the observerEntry, keep in mind that this will not include the paddings.\n\nTo include the target elements padding, please use the borderBoxSize instead.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Box with padding</label><div class=\"height-50 bg-info position-relative display-flex align-items-center justify-content-center padding-5\" style=\"width: 200px;\"><div class=\"text-color-white text-medium\">200x50</div><div class=\"Resizer resize-horizontal resize-right\"><div class=\"width-5 height-100pct bg-light\"></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\nimport Resizer from '@rio-cloud/rio-uikit/Resizer';\nimport useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';\n\nexport default () => {\n    const [boxWidth, setBoxWidth] = useState(200);\n\n    // To include target elements padding, use \"borderBoxSize\" or for convenience\n    // purpose, use the dedicated return object already containing \"inlineSize\" and \"blockSize\".\n    // const [ref, { borderBox }] = useResizeObserver();\n    const [ref, _, { inlineSize, blockSize }] = useResizeObserver();\n\n    const handleResizeHorizontal = (diff: number) => setBoxWidth(previousValue => previousValue - diff);\n\n    return (\n        <>\n            <label>Box with padding</label>\n            <div\n                className={\n                    'height-50 bg-info position-relative display-flex align-items-center ' +\n                    'justify-content-center padding-5'\n                }\n                style={{ width: boxWidth }}\n                ref={ref}\n            >\n                <div className='text-color-white text-medium'>\n                    {inlineSize}x{blockSize}\n                </div>\n                <Resizer onResize={handleResizeHorizontal}>\n                    <div className='width-5 height-100pct bg-light' />\n                </Resizer>\n            </div>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Box with padding</label>\n<div class=\"height-50 bg-info position-relative display-flex align-items-center justify-content-center padding-5\" style=\"width: 200px;\">\n    <div class=\"text-color-white text-medium\">200x50</div>\n    <div class=\"Resizer resize-horizontal resize-right\">\n        <div class=\"width-5 height-100pct bg-light\">\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "ref"
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Box without padding</label><div class=\"height-50 bg-info position-relative display-flex align-items-center justify-content-center\" style=\"width: 200px;\"><div class=\"text-color-white text-medium\">200x50</div><div class=\"Resizer resize-horizontal resize-right\"><div class=\"width-5 height-100pct bg-light\"></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, useCallback } from 'react';\n\nimport Resizer from '@rio-cloud/rio-uikit/Resizer';\nimport useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';\n\nexport default () => {\n    const [boxWidth, setBoxWidth] = useState(200);\n\n    const [ref, observerEntry] = useResizeObserver();\n\n    const contentRect = observerEntry?.contentRect;\n\n    const getContentRect = useCallback(\n        (key: keyof DOMRectReadOnly) => Math.round(contentRect?.[key] as number),\n        [contentRect]\n    );\n\n    const handleResizeHorizontal = (diff: number) => setBoxWidth(previousValue => previousValue - diff);\n\n    return (\n        <>\n            <label>Box without padding</label>\n            <div\n                className='height-50 bg-info position-relative display-flex align-items-center justify-content-center'\n                style={{ width: boxWidth }}\n                ref={ref}\n            >\n                <div className='text-color-white text-medium'>\n                    {getContentRect('width')}x{getContentRect('height')}\n                </div>\n                <Resizer onResize={handleResizeHorizontal}>\n                    <div className='width-5 height-100pct bg-light' />\n                </Resizer>\n            </div>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Box without padding</label>\n<div class=\"height-50 bg-info position-relative display-flex align-items-center justify-content-center\" style=\"width: 200px;\">\n    <div class=\"text-color-white text-medium\">200x50</div>\n    <div class=\"Resizer resize-horizontal resize-right\">\n        <div class=\"width-5 height-100pct bg-light\">\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": "ref"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,103 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:42.551Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useScrollPosition",
+    "category": "Utilities",
+    "section": "DOM behavior hooks",
+    "slug": "utilities/usescrollposition",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "bbeff86c4843e890ab49b99caca4cbe929d61d4debd23cdede5c8a14b1a8c591"
+  },
+  "title": "useScrollPosition",
+  "lead": "The useScrollPosition hook allows to react on a desired scroll position of a given target. Use it when showing or hiding content based on the scroll position.",
+  "content": [
+    {
+      "heading": "useScrollPosition",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Default example for scroll position of the ApplicationBody module-content</label><div class=\"position-relative\"><div class=\"position-sticky top-0 well well-sm border shadow-default\">0 px</div><div class=\"display-flex flex-column align-items-center text-size-14\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nMauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\nNam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nMauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\nNam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import useScrollPosition from '@rio-cloud/rio-uikit/useScrollPosition';\n\nimport { dummyTextExtraLong } from '../../../utils/data';\n\nexport default () => {\n    const scrollPosition = useScrollPosition();\n\n    return (\n        <>\n            <label>Default example for scroll position of the ApplicationBody module-content</label>\n            <div className='position-relative'>\n                <div className='position-sticky top-0 well well-sm border shadow-default'>{`${scrollPosition} px`}</div>\n                <div className='display-flex flex-column align-items-center text-size-14'>{dummyTextExtraLong}</div>\n            </div>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Default example for scroll position of the ApplicationBody module-content</label>\n<div class=\"position-relative\">\n    <div class=\"position-sticky top-0 well well-sm border shadow-default\">0 px</div>\n    <div class=\"display-flex flex-column align-items-center text-size-14\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\n        In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n        Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\n        Mauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\n        Nam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\n\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\n        In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n        Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\n        Mauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\n        Nam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\n\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "target",
+                      "type": "Window | HTMLBodyElement | React.ReactElement | React.MutableRefObject<object> | undefined",
+                      "default": "",
+                      "description": "The target element to get the scroll position for."
+                    },
+                    {
+                      "name": "return",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The hook returns the scroll position as a number"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><label>Example for scroll position of a certain element</label><div class=\"height-200 position-relative overflow-auto height-200 position-relative overflow-auto\"><div class=\"position-sticky top-0 well well-sm border shadow-default\">0 px</div><div class=\"text-size-14\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nMauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\nNam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nMauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\nNam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useRef } from 'react';\n\nimport useScrollPosition from '@rio-cloud/rio-uikit/useScrollPosition';\n\nimport { dummyTextExtraLong } from '../../../utils/data';\n\nexport default () => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    const scrollPosition = useScrollPosition(contentRef);\n\n    return (\n        <>\n            <label>Example for scroll position of a certain element</label>\n            <div\n                ref={contentRef}\n                className='height-200 position-relative overflow-auto height-200 position-relative overflow-auto'\n            >\n                <div className='position-sticky top-0 well well-sm border shadow-default'>{`${scrollPosition} px`}</div>\n                <div className='text-size-14'>{dummyTextExtraLong}</div>\n            </div>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<label>Example for scroll position of a certain element</label>\n<div class=\"height-200 position-relative overflow-auto height-200 position-relative overflow-auto\">\n    <div class=\"position-sticky top-0 well well-sm border shadow-default\">0 px</div>\n    <div class=\"text-size-14\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\n        In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n        Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\n        Mauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\n        Nam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\n\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\n        In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\n        Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\n        Mauris sed blandit nisi. In tellus sem, auctor ut porttitor eget, dictum et eros. Integer in sem nec lacus hendrerit cursus. Nulla mattis nisi et tincidunt tincidunt. Fusce ullamcorper nunc in quam euismod mattis et dignissim nulla. Ut tincidunt sodales felis, id feugiat ligula suscipit vel. Suspendisse ullamcorper commodo maximus.\n\n        Nam in dapibus eros, eget tristique enim. Vivamus non neque at elit cursus tempus vel vitae neque. Aenean pellentesque aliquet lorem, commodo ornare dolor tempus id. Curabitur efficitur nulla eu libero consectetur, at ultricies nisi condimentum. Nam imperdiet ac magna ut congue. Vivamus id aliquet turpis, quis suscipit nulla. Nunc placerat pulvinar neque. Donec ullamcorper vel ante ac iaculis. Phasellus eget dapibus turpis. Nam interdum enim at bibendum faucibus. Nunc ipsum urna, finibus ut hendrerit at, laoreet sit amet eros. Morbi ligula arcu, eleifend et dictum egestas, consequat vitae nunc.\n\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "target",
+                      "type": "Window | HTMLBodyElement | React.ReactElement | React.MutableRefObject<object> | undefined",
+                      "default": "",
+                      "description": "The target element to get the scroll position for."
+                    },
+                    {
+                      "name": "return",
+                      "type": "Number",
+                      "default": "",
+                      "description": "The hook returns the scroll position as a number"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,197 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:46.471Z",
+    "source": "https://uikit.developers.rio.cloud/#utilities/useSearch",
+    "category": "Utilities",
+    "section": "UI state & input hooks",
+    "slug": "utilities/usesearch",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "c5a57996b1201d36c4bfff74b7df04bb43a48395f2938f93ee349d7e9986a3a9"
+  },
+  "title": "useSearch",
+  "lead": "The useSearch hook is a custom hook to filter a list of objects by a search value. Supports field-based filtering, custom filtering logic, debounce, and case sensitivity.",
+  "content": [
+    {
+      "heading": "useSearch",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Search a list of objects",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group max-width-300\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Search a list of objects</div><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Search for fruits\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div class=\"display-flex gap-10\"><span>Apple</span><span>Banana</span><span>Fig</span><span>Pear</span><span>Mango</span></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import isEmpty from 'lodash/fp/isEmpty';\nimport useSearch from '@rio-cloud/rio-uikit/useSearch';\nimport ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\ntype ListType = { name: string };\n\nexport default () => {\n    const items = [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Fig' }, { name: 'Pear' }, { name: 'Mango' }];\n\n    const { searchValue, setSearchValue, filteredList } = useSearch(items);\n\n    return (\n        <>\n            <div className='form-group max-width-300'>\n                <FormLabel>Search a list of objects</FormLabel>\n                <div className='input-group'>\n                    <span className='input-group-addon'>\n                        <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                    </span>\n                    <ClearableInput\n                        value={searchValue}\n                        onChange={(newValue: string) => setSearchValue(newValue)}\n                        onClear={() => setSearchValue('')}\n                        placeholder='Search for fruits'\n                    />\n                </div>\n            </div>\n            <div className='display-flex gap-10'>\n                {isEmpty(filteredList)\n                    ? 'Nothing found'\n                    : filteredList.map(listItem => <span key={listItem.name}>{listItem.name}</span>)}\n            </div>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"form-group max-width-300\">\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Search a list of objects</div>\n    <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n            <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n            </span>\n        </span>\n        <div class=\"ClearableInput input-group\">\n            <input placeholder=\"Search for fruits\" class=\"form-control\" 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 class=\"display-flex gap-10\">\n    <span>Apple</span>\n    <span>Banana</span>\n    <span>Fig</span>\n    <span>Pear</span>\n    <span>Mango</span>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options for the `useSearch` hook",
+                  "rows": [
+                    {
+                      "name": "list",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The array of objects to search through."
+                    },
+                    {
+                      "name": "options",
+                      "type": "object",
+                      "default": "",
+                      "description": "Configuration options for the search behavior."
+                    },
+                    {
+                      "name": "└fields",
+                      "type": "(keyof T | string)[]",
+                      "default": "",
+                      "description": "Fields to search through. If omitted, all top-level string/number fields are used."
+                    },
+                    {
+                      "name": "└customFilter",
+                      "type": "(item: T, query: string) => boolean",
+                      "default": "",
+                      "description": "Optional custom filter function overriding field-based filtering."
+                    },
+                    {
+                      "name": "└debounceMs",
+                      "type": "number",
+                      "default": "",
+                      "description": "Debounce time in milliseconds. If omitted, debounce is disabled."
+                    },
+                    {
+                      "name": "└caseSensitive",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Whether the search should be case-sensitive."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Return value of the `useSearch` hook",
+                  "rows": [
+                    {
+                      "name": "searchValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The current search input string."
+                    },
+                    {
+                      "name": "setSearchValue",
+                      "type": "Function",
+                      "default": "",
+                      "description": "A setter function to update the search query."
+                    },
+                    {
+                      "name": "filteredList",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The list of items matching the current search query."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Search a list of objects for multiple fields",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"form-group max-width-300\"><div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Search a list of objects for multiple fields</div><div class=\"input-group\"><span class=\"input-group-addon\"><span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\"></span></span><div class=\"ClearableInput input-group\"><input placeholder=\"Search for users\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\"><span class=\"clearButton hide\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span></div></div></div><div><div>Alice - 30 | Berlin</div><div>Bob - 25 | Munich</div><div>Charlie - 35 | </div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import isEmpty from 'lodash/fp/isEmpty';\nimport useSearch from '@rio-cloud/rio-uikit/useSearch';\nimport ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';\nimport FormLabel from '@rio-cloud/rio-uikit/FormLabel';\n\ntype ListType = { name: string; age: number; address?: { city: string } };\n\nexport default () => {\n    const users = [\n        { name: 'Alice', age: 30, address: { city: 'Berlin' } },\n        { name: 'Bob', age: 25, address: { city: 'Munich' } },\n        { name: 'Charlie', age: 35 },\n    ];\n\n    const { searchValue, setSearchValue, filteredList } = useSearch(users, { fields: ['name', 'age', 'address.city'] });\n\n    return (\n        <>\n            <div className='form-group max-width-300'>\n                <FormLabel>Search a list of objects for multiple fields</FormLabel>\n                <div className='input-group'>\n                    <span className='input-group-addon'>\n                        <span className='rioglyph rioglyph-search' aria-hidden='true' />\n                    </span>\n                    <ClearableInput\n                        value={searchValue}\n                        onChange={(newValue: string) => setSearchValue(newValue)}\n                        onClear={() => setSearchValue('')}\n                        placeholder='Search for users'\n                    />\n                </div>\n            </div>\n            <div>\n                {isEmpty(filteredList)\n                    ? 'Nothing found'\n                    : filteredList.map(listItem => (\n                          <div key={listItem.name}>\n                              {listItem.name} - {listItem.age} | {listItem.address?.city}\n                          </div>\n                      ))}\n            </div>\n        </>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"form-group max-width-300\">\n    <div class=\"text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5\">Search a list of objects for multiple fields</div>\n    <div class=\"input-group\">\n        <span class=\"input-group-addon\">\n            <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n            </span>\n        </span>\n        <div class=\"ClearableInput input-group\">\n            <input placeholder=\"Search for users\" class=\"form-control\" 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>\n    <div>Alice - 30 | Berlin</div>\n    <div>Bob - 25 | Munich</div>\n    <div>Charlie - 35 | </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "Options for the `useSearch` hook",
+                  "rows": [
+                    {
+                      "name": "list",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The array of objects to search through."
+                    },
+                    {
+                      "name": "options",
+                      "type": "object",
+                      "default": "",
+                      "description": "Configuration options for the search behavior."
+                    },
+                    {
+                      "name": "└fields",
+                      "type": "(keyof T | string)[]",
+                      "default": "",
+                      "description": "Fields to search through. If omitted, all top-level string/number fields are used."
+                    },
+                    {
+                      "name": "└customFilter",
+                      "type": "(item: T, query: string) => boolean",
+                      "default": "",
+                      "description": "Optional custom filter function overriding field-based filtering."
+                    },
+                    {
+                      "name": "└debounceMs",
+                      "type": "number",
+                      "default": "",
+                      "description": "Debounce time in milliseconds. If omitted, debounce is disabled."
+                    },
+                    {
+                      "name": "└caseSensitive",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Whether the search should be case-sensitive."
+                    }
+                  ]
+                },
+                {
+                  "heading": "Return value of the `useSearch` hook",
+                  "rows": [
+                    {
+                      "name": "searchValue",
+                      "type": "string",
+                      "default": "",
+                      "description": "The current search input string."
+                    },
+                    {
+                      "name": "setSearchValue",
+                      "type": "Function",
+                      "default": "",
+                      "description": "A setter function to update the search query."
+                    },
+                    {
+                      "name": "filteredList",
+                      "type": "T[]",
+                      "default": "",
+                      "description": "The list of items matching the current search query."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}