@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/appheader.json

@@ -0,0 +1,291 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:04.142Z",
+    "source": "https://uikit.developers.rio.cloud/#components/appHeader",
+    "category": "Components",
+    "section": "Application",
+    "slug": "components/appheader",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "a1486a960820924f5e995469c4252a5a5a6a229861d96124b8d675fe2fb15870"
+  },
+  "title": "ApplicationHeader",
+  "lead": "This is the header component for all services. All navigation link components that are passed into the header should be based on react-router",
+  "content": [
+    {
+      "heading": "ApplicationHeader",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"ApplicationLayout\"><div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\"><nav class=\"ApplicationHeader user-select-none\"><div class=\"navbar-header\"><span class=\"navbar-brand home-icon\"><a aria-current=\"page\" class=\"active\" href=\"#\"></a></span></div><ul class=\"ModuleNavigation AppMenu user-select-none hasModules appNavigatorClassName\"><li class=\"dropdown\"><a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between\" role=\"button\" id=\"basic-nav-dropdown\"><span>ApplicationHeader</span><span class=\"caret\"></span></a><ul role=\"menu\" class=\"dropdown-menu ModuleNavigation-dropdown-menu\"><li role=\"presentation\"><div class=\"display-flex flex-column padding-10\"><a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\"><div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\"><div class=\"position-absolute inset-0 display-grid place-items-center\"><span class=\"text-size-20 rioglyph rioglyph-number-1\"></span></div></div><div class=\"flex-1-1\"><div class=\"line-height-125rel margin-top--3\"><div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 1</div><div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 1</div></div></div></a><a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\"><div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\"><div class=\"position-absolute inset-0 display-grid place-items-center\"><span class=\"text-size-20 rioglyph rioglyph-number-2\"></span></div></div><div class=\"flex-1-1\"><div class=\"line-height-125rel margin-top--3\"><div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 2</div><div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 2</div></div></div></a><a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\"><div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\"><div class=\"position-absolute inset-0 display-grid place-items-center\"><span class=\"text-size-20 rioglyph rioglyph-number-3\"></span></div></div><div class=\"flex-1-1\"><div class=\"line-height-125rel margin-top--3\"><div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 3</div><div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 3</div></div></div></a></div></li></ul></li></ul><ul class=\"SubmoduleNavigation nav\"><li class=\"submodule \" data-nav-item-key=\"A\"><a aria-current=\"page\" class=\"active\" href=\"#components/appHeader\">Test A</a></li><li class=\"submodule \" data-nav-item-key=\"B\"><a href=\"#2\">Test B</a></li><li class=\"submodule \" data-nav-item-key=\"C\"><a href=\"#3\">Test C</a></li><li class=\"submodule \" data-nav-item-key=\"D\"><a href=\"#4\">Test D</a></li><li class=\"CollapsedDropdown dropdown \"><a id=\"basic-nav-dropdown\" role=\"button\" class=\"dropdown-toggle text-color-gray\" aria-haspopup=\"true\" aria-expanded=\"true\"><span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\"></span></a><ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"basic-nav-dropdown\"><li class=\"submodule\" data-nav-item-key=\"E\"><a href=\"#5\">Test E</a></li></ul></li></ul><ul class=\"ApplicationActionBar nav navbar-nav navbar-right \"><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-cog\"></span></div></div></li><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-user\"></span></div></div></li></ul></nav></div></div><div class=\"margin-top-20 margin-bottom-20\"><button type=\"button\" class=\"btn btn-default\">Load different Nav Items</button></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useRef, useState } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Dialog from '@rio-cloud/rio-uikit/Dialog';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';\n\nconst manyNavItems = [\n    { key: 'A', route: <NavLink to='/components/appHeader'>Test A</NavLink> },\n    { key: 'B', route: <NavLink to='/2'>Test B</NavLink> },\n    { key: 'C', route: <NavLink to='/3'>Test C</NavLink> },\n    { key: 'D', route: <NavLink to='/4'>Test D</NavLink> },\n    { key: 'E', route: <NavLink to='/5'>Test E</NavLink> },\n];\n\nconst fewNavItems = [\n    { key: '1', route: <NavLink to='/6'>Lorem</NavLink> },\n    { key: '2', route: <NavLink to='/7'>Ipsum</NavLink> },\n    { key: '3', route: <NavLink to='/8'>Dolor</NavLink> },\n];\n\nconst fakeAppNavigator = (\n    <div className='display-flex flex-column padding-10'>\n        {[1, 2, 3].map(index => (\n            <a\n                key={index}\n                href='/'\n                target='_top'\n                className='rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15'\n            >\n                <div className='position-relative padding-20 border border-size-2 border-color-primary bg-white'>\n                    <div className='position-absolute inset-0 display-grid place-items-center'>\n                        <span className={`text-size-20 rioglyph rioglyph-number-${index}`} />\n                    </div>\n                </div>\n                <div className='flex-1-1'>\n                    <div className='line-height-125rel margin-top--3'>\n                        <div className='text-size-18 text-medium margin-bottom-3 text-color-primary'>\n                            Headline {index}\n                        </div>\n                        <div className='text-size-14 text-color-darkest text-capitalize'>Subline {index}</div>\n                    </div>\n                </div>\n            </a>\n        ))}\n    </div>\n);\n\n// We use this component to simulate a pre rendered component\nconst PreRendered = () => {\n    const [index, setIndex] = useState(0);\n\n    useEffect(() => {\n        let counter = 0;\n        const id = setInterval(() => {\n            setIndex(counter++);\n        }, 1000);\n        return () => clearInterval(id);\n    }, []);\n\n    return (\n        <div className='display-flex flex-row justify-content-between align-items-center'>\n            <div>\n                <span className='margin-right-5 text-color-gray'>Counter:</span>\n                <span>{index}</span>\n            </div>\n            <div>\n                <button\n                    className='btn btn-default'\n                    type='button'\n                    onClick={() => Notification.info(`Button clicked with ${index}`)}\n                >\n                    Click Me\n                </button>\n            </div>\n        </div>\n    );\n};\n\nconst AccountMenuComponent = (\n    <ActionBarItem id='accountMenu'>\n        <ActionBarItem.Icon>\n            <span className='icon rioglyph rioglyph-user' />\n        </ActionBarItem.Icon>\n        <ActionBarItem.Popover title='Prerending the Popover' useOffscreen>\n            <PreRendered />\n        </ActionBarItem.Popover>\n    </ActionBarItem>\n);\n\nconst AppHeaderExample = () => {\n    const [navItems, setNavItems] = useState(manyNavItems);\n\n    const [showSettingsDialog, setShowSettingsDialog] = useState(false);\n\n    const headerRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (headerRef.current) {\n            console.log('Header mounted');\n        }\n    }, [headerRef.current]);\n\n    const handleOnClick = () => {\n        setNavItems(prevNavItems => (prevNavItems === fewNavItems ? manyNavItems : fewNavItems));\n    };\n\n    const sampleActionBarComponent = (\n        <ActionBarItem id='cog'>\n            <ActionBarItem.Icon onClick={() => setShowSettingsDialog(true)}>\n                <span className='icon rioglyph rioglyph-cog' />\n            </ActionBarItem.Icon>\n            <Dialog\n                show={showSettingsDialog}\n                body={\n                    <div>\n                        <div className='margin-bottom-15'>\n                            <i>\n                                This is the place for some service specific settings, that are not global for all\n                                services.\n                            </i>\n                        </div>\n                        <div className='margin-bottom-25'>\n                            <legend>Category one settings</legend>\n                            <div className='form-group'>\n                                <label className='width-100pct'>\n                                    <div>Lorem ipsum</div>\n                                    <input\n                                        className='form-control margin-y-5'\n                                        type='text'\n                                        placeholder='Lorem Ipsum Dolor'\n                                    />\n                                </label>\n                                <label className='width-100pct'>\n                                    <div className='margin-bottom-5'>Lorem ipsum</div>\n                                    <div className='input-group'>\n                                        <span className='input-group-addon'>\n                                            <span className='rioglyph rioglyph-user' />\n                                        </span>\n                                        <input className='form-control' type='text' placeholder='Lorem Ipsum Dolor' />\n                                    </div>\n                                </label>\n                            </div>\n                        </div>\n                        <div>\n                            <legend>Category two settings</legend>\n                            <div className='form-group space-y-10'>\n                                <Checkbox>Lorem ipsum solor</Checkbox>\n                                <Checkbox defaultChecked>Ipsum dolor sit</Checkbox>\n                                <Checkbox>Dolor sit amet</Checkbox>\n                            </div>\n                        </div>\n                    </div>\n                }\n                title='Service settings'\n                footer={\n                    <ButtonToolbar>\n                        <Button onClick={() => setShowSettingsDialog(false)}>Discard</Button>\n                        <Button bsStyle='primary' onClick={() => setShowSettingsDialog(false)}>\n                            Apply changes\n                        </Button>\n                    </ButtonToolbar>\n                }\n                onClose={() => setShowSettingsDialog(false)}\n                bsSize={Dialog.SIZE_SM}\n                showCloseButton\n            />\n        </ActionBarItem>\n    );\n\n    return (\n        <div>\n            <ApplicationLayout>\n                <ApplicationLayout.Header>\n                    <ApplicationHeader\n                        ref={headerRef}\n                        label='ApplicationHeader'\n                        homeRoute={<NavLink to='/' />}\n                        appNavigator={fakeAppNavigator}\n                        appNavigatorClassName='appNavigatorClassName'\n                        navItems={navItems}\n                        onToggleAppMenu={isMenuOpen => console.log({ isMenuOpen })}\n                        actionBarItems={[sampleActionBarComponent, AccountMenuComponent]}\n                    />\n                </ApplicationLayout.Header>\n            </ApplicationLayout>\n            <div className='margin-top-20 margin-bottom-20'>\n                <button type='button' className='btn btn-default' onClick={handleOnClick}>\n                    Load different Nav Items\n                </button>\n            </div>\n        </div>\n    );\n};\n\nexport default AppHeaderExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"ApplicationLayout\">\n        <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n            <nav class=\"ApplicationHeader user-select-none\">\n                <div class=\"navbar-header\">\n                    <span class=\"navbar-brand home-icon\">\n                        <a aria-current=\"page\" class=\"active\" href=\"#\">\n                        </a>\n                    </span>\n                </div>\n                <ul class=\"ModuleNavigation AppMenu user-select-none hasModules appNavigatorClassName\">\n                    <li class=\"dropdown\">\n                        <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between\" role=\"button\" id=\"basic-nav-dropdown\">\n                            <span>ApplicationHeader</span>\n                            <span class=\"caret\">\n                            </span>\n                        </a>\n                        <ul role=\"menu\" class=\"dropdown-menu ModuleNavigation-dropdown-menu\">\n                            <li role=\"presentation\">\n                                <div class=\"display-flex flex-column padding-10\">\n                                    <a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\">\n                                        <div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\">\n                                            <div class=\"position-absolute inset-0 display-grid place-items-center\">\n                                                <span class=\"text-size-20 rioglyph rioglyph-number-1\">\n                                                </span>\n                                            </div>\n                                        </div>\n                                        <div class=\"flex-1-1\">\n                                            <div class=\"line-height-125rel margin-top--3\">\n                                                <div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 1</div>\n                                                <div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 1</div>\n                                            </div>\n                                        </div>\n                                    </a>\n                                    <a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\">\n                                        <div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\">\n                                            <div class=\"position-absolute inset-0 display-grid place-items-center\">\n                                                <span class=\"text-size-20 rioglyph rioglyph-number-2\">\n                                                </span>\n                                            </div>\n                                        </div>\n                                        <div class=\"flex-1-1\">\n                                            <div class=\"line-height-125rel margin-top--3\">\n                                                <div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 2</div>\n                                                <div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 2</div>\n                                            </div>\n                                        </div>\n                                    </a>\n                                    <a href=\"/\" target=\"_top\" class=\"rounded link bg-white display-flex align-items-start gap-15 user-select-none text-decoration-none hover-bg-lightest padding-15\">\n                                        <div class=\"position-relative padding-20 border border-size-2 border-color-primary bg-white\">\n                                            <div class=\"position-absolute inset-0 display-grid place-items-center\">\n                                                <span class=\"text-size-20 rioglyph rioglyph-number-3\">\n                                                </span>\n                                            </div>\n                                        </div>\n                                        <div class=\"flex-1-1\">\n                                            <div class=\"line-height-125rel margin-top--3\">\n                                                <div class=\"text-size-18 text-medium margin-bottom-3 text-color-primary\">Headline 3</div>\n                                                <div class=\"text-size-14 text-color-darkest text-capitalize\">Subline 3</div>\n                                            </div>\n                                        </div>\n                                    </a>\n                                </div>\n                            </li>\n                        </ul>\n                    </li>\n                </ul>\n                <ul class=\"SubmoduleNavigation nav\">\n                    <li class=\"submodule \" data-nav-item-key=\"A\">\n                        <a aria-current=\"page\" class=\"active\" href=\"#components/appHeader\">Test A</a>\n                    </li>\n                    <li class=\"submodule \" data-nav-item-key=\"B\">\n                        <a href=\"#2\">Test B</a>\n                    </li>\n                    <li class=\"submodule \" data-nav-item-key=\"C\">\n                        <a href=\"#3\">Test C</a>\n                    </li>\n                    <li class=\"submodule \" data-nav-item-key=\"D\">\n                        <a href=\"#4\">Test D</a>\n                    </li>\n                    <li class=\"CollapsedDropdown dropdown \">\n                        <a id=\"basic-nav-dropdown\" role=\"button\" class=\"dropdown-toggle text-color-gray\" aria-haspopup=\"true\" aria-expanded=\"true\">\n                            <span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\">\n                            </span>\n                        </a>\n                        <ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"basic-nav-dropdown\">\n                            <li class=\"submodule\" data-nav-item-key=\"E\">\n                                <a href=\"#5\">Test E</a>\n                            </li>\n                        </ul>\n                    </li>\n                </ul>\n                <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n                    <li role=\"presentation\" class=\"navigationItem\">\n                        <div class=\"ActionBarItem\">\n                            <div class=\"ActionBarItemIcon\">\n                                <span class=\"icon rioglyph rioglyph-cog\">\n                                </span>\n                            </div>\n                        </div>\n                    </li>\n                    <li role=\"presentation\" class=\"navigationItem\">\n                        <div class=\"ActionBarItem\">\n                            <div class=\"ActionBarItemIcon\">\n                                <span class=\"icon rioglyph rioglyph-user\">\n                                </span>\n                            </div>\n                        </div>\n                    </li>\n                </ul>\n            </nav>\n        </div>\n    </div>\n    <div class=\"margin-top-20 margin-bottom-20\">\n        <button type=\"button\" class=\"btn btn-default\">Load different Nav Items</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "label",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The service name shown as the navigator dropdown label."
+                    },
+                    {
+                      "name": "homeRoute",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The home URL that shall be used for the home button. Pass a react-router-dom NavLink as homeRoute into the header. For example: <NavLink to='https://home.rio.cloud' />"
+                    },
+                    {
+                      "name": "showHomeIcon",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines to either show the home icon or the RIO logo as brand logo."
+                    },
+                    {
+                      "name": "appNavigator",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The component for the navigation between apps which will be shown inside the main dropdown. Platform apps may use the default AppNavigator but there are also other cases like support apps where it's just a simple list In this case, use the prop appMenuItems. If no appNavigator is defined, the dropdown menu will not be rendered."
+                    },
+                    {
+                      "name": "appNavigatorClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the appNavigator."
+                    },
+                    {
+                      "name": "appMenuItems",
+                      "type": "Array",
+                      "default": "",
+                      "description": "List of application navigation link components."
+                    },
+                    {
+                      "name": "└key",
+                      "type": "String",
+                      "default": "",
+                      "description": "Unique key for the navigation component."
+                    },
+                    {
+                      "name": "└route",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The navigation link component used for rendering the name and for routing. For example: <NavLink to='/app1'>{'App 1'}</NavLink>"
+                    },
+                    {
+                      "name": "navItems",
+                      "type": "Array",
+                      "default": "",
+                      "description": "List of sub-module navigation component of an app. Items collapse into a dropdown if remaining space in the header is not sufficient."
+                    },
+                    {
+                      "name": "└key",
+                      "type": "String",
+                      "default": "",
+                      "description": "Unique key for the sub-module navigation component of an app."
+                    },
+                    {
+                      "name": "└route",
+                      "type": "Node",
+                      "default": "",
+                      "description": "The navigation link component used for rendering the name and for routing. For example: <NavLink to='/app/ipsum'>{'Lorem ipsum'}</NavLink>"
+                    },
+                    {
+                      "name": "actionBarItems",
+                      "type": "Array of Nodes",
+                      "default": "[]",
+                      "description": "List of external smart components like the rio-accountmenu or application owned components such as a ServiceInfo icon. These components are based on the ActionBarItem"
+                    },
+                    {
+                      "name": "onToggleAppMenu",
+                      "type": "(isOpen: boolean) => void",
+                      "default": "",
+                      "description": "Callback function triggered when the application menu is open or closed."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the wrapper component."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "ActionBarItem",
+      "body": "The ActionBarItem components consists mainly of two sub-components: Icon and Popover. The Icon component is mandatory and is shown in the header. The Popover component is optional and it's content will be shown inside a Popover.",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-lighter padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"ApplicationLayout\"><div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\"><nav class=\"ApplicationHeader user-select-none\"><div class=\"navbar-header\"><span class=\"navbar-brand home-icon\"></span></div><ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\"><li class=\"dropdown\"><a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\"><span>ApplicationHeader</span></a></li></ul><ul class=\"SubmoduleNavigation nav\"></ul><ul class=\"ApplicationActionBar nav navbar-nav navbar-right \"><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-support\"></span></div></div></li><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem myItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-info-sign\"></span></div></div></li><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-notification\"></span><span class=\"badge badge-primary badge-indicator badge-indicator-pinging\">4</span></div></div></li><li role=\"presentation\" class=\"navigationItem\"><div class=\"ActionBarItem\"><div class=\"ActionBarItemIcon\"><span class=\"icon rioglyph rioglyph-user\"></span></div></div></li></ul></nav></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState, type ChangeEvent } from 'react';\nimport { Link } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';\nimport Select from '@rio-cloud/rio-uikit/Select';\nimport Fade from '@rio-cloud/rio-uikit/Fade';\nimport ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nconst ActionBarItemsExample = () => {\n    const [showFeedbackNotification, setShowFeedbackNotification] = useState(false);\n    const [feedbackButtonText, setFeedbackButtonText] = useState('Send feedback');\n    const [value, setValue] = useState('');\n    const [rows, setRows] = useState(5);\n    const [minRows, setMinRows] = useState(5);\n    const [maxRows, setMaxRows] = useState(30);\n\n    const handleFeedbackCategory = (id: string) => {\n        switch (id) {\n            case '1':\n                setFeedbackButtonText('Send usability feedback');\n                break;\n            case '2':\n                setFeedbackButtonText('Send bug report');\n                break;\n            case '3':\n                setFeedbackButtonText('Send feature request');\n                break;\n            default:\n                setFeedbackButtonText('Send feedback');\n                break;\n        }\n    };\n\n    const handleAutosize = (event: ChangeEvent<HTMLTextAreaElement>) => {\n        const textareaLineHeight = 20.1; // 1.42857143 + 14px\n\n        const previousRows = event.target.rows;\n        event.target.rows = minRows; // reset number of rows in textarea\n\n        const currentRows = Math.floor(event.target.scrollHeight / textareaLineHeight);\n\n        if (currentRows === previousRows) {\n            event.target.rows = currentRows;\n        }\n\n        if (currentRows >= maxRows) {\n            event.target.rows = maxRows;\n            event.target.scrollTop = event.target.scrollHeight;\n        }\n\n        setValue(event.target.value);\n        setRows(currentRows < maxRows ? currentRows : maxRows);\n    };\n\n    const title = (\n        <div>\n            <span>Service XYZ</span>\n            <span className='text-color-gray margin-left-10'>v1.1.0</span>\n        </div>\n    );\n\n    const FeedbackComponent = (\n        <ActionBarItem id='feedback' hidePopoverOnClick={false} popoverWidth={400}>\n            <ActionBarItem.Icon>\n                <span className='icon rioglyph rioglyph-support' />\n            </ActionBarItem.Icon>\n            <ActionBarItem.Popover title='Customer care center' className='padding-20'>\n                <div className='padding-top-5 padding-bottom-5'>\n                    <div className='text-center padding-top-10 padding-bottom-25'>\n                        <a className='text-size-h4' hre='tel:0049-0800-22550746'>\n                            Hotline +(49) 08 00 / 22 55 07 46\n                        </a>\n                        <div className='text-size-16'>Monday - Friday: 8:00 am - 04:30 pm (MEZ)</div>\n                    </div>\n                    <form>\n                        <div className='form-group'>\n                            <input className='form-control' type='email' placeholder='logged.in@user.email' disabled />\n                        </div>\n                        <div className='form-group'>\n                            <Select\n                                placeholder='Type of feedback'\n                                options={[\n                                    {\n                                        id: '1',\n                                        label: 'Usability',\n                                    },\n                                    {\n                                        id: '2',\n                                        label: 'Bug report',\n                                    },\n                                    {\n                                        id: '3',\n                                        label: 'Missing feature',\n                                    },\n                                    {\n                                        id: '4',\n                                        label: 'Other',\n                                    },\n                                ]}\n                                onChange={item => handleFeedbackCategory(item.id)}\n                            />\n                        </div>\n                        <div className='form-group'>\n                            <textarea\n                                rows={rows}\n                                value={value}\n                                className='form-control'\n                                onChange={event => handleAutosize(event)}\n                            />\n                        </div>\n                        <div className='display-flex justify-content-end'>\n                            <ToggleButton\n                                className='margin-bottom-10'\n                                active={showFeedbackNotification}\n                                onClick={() => setShowFeedbackNotification(!showFeedbackNotification)}\n                            >\n                                {feedbackButtonText}\n                            </ToggleButton>\n                        </div>\n                        <Fade show={showFeedbackNotification}>\n                            <div className='alert alert-success margin-bottom-0'>\n                                <strong>Thank you for your feedback!</strong> We will use your feedback for future\n                                improvement. In case it`s necessary, we will contact you for further clarification.\n                            </div>\n                        </Fade>\n                    </form>\n                </div>\n            </ActionBarItem.Popover>\n        </ActionBarItem>\n    );\n\n    const ServiceInfo = () => (\n        <ActionBarItem.List>\n            <ActionBarItem.ListItem icon='rioglyph-hand-right' onClick={() => Notification.info('Show welcome dialog')}>\n                <div className='display-flex align-items-center gap-5'>\n                    <span>Welcome</span>\n                    <span className='badge badge-primary'>1</span>\n                </div>\n            </ActionBarItem.ListItem>\n            <ActionBarItem.ListItem\n                icon='rioglyph-exclamation-sign'\n                onClick={() => Notification.info(\"Show what's new dialog\")}\n            >\n                What's new?\n            </ActionBarItem.ListItem>\n            <ActionBarItem.ListItem\n                icon='rioglyph-question-sign'\n                onClick={() => Notification.info('Show features dialog')}\n            >\n                Features\n            </ActionBarItem.ListItem>\n            <ActionBarItem.ListSeparator />\n            <ActionBarItem.ListItem icon='rioglyph-envelope' hasLink>\n                <Link to='/components/appHeader'>Feedback</Link>\n            </ActionBarItem.ListItem>\n        </ActionBarItem.List>\n    );\n\n    const ServiceInfoComponent = (\n        <ActionBarItem id='serviceInfo' className='myItem'>\n            <ActionBarItem.Icon>\n                <span className='icon rioglyph rioglyph-info-sign' />\n            </ActionBarItem.Icon>\n            <ActionBarItem.Popover className='myItemPopover' title={title}>\n                <ServiceInfo />\n            </ActionBarItem.Popover>\n        </ActionBarItem>\n    );\n\n    const AccountMenuComponent = (\n        <ActionBarItem>\n            <ActionBarItem.Icon>\n                <span className='icon rioglyph rioglyph-user' />\n            </ActionBarItem.Icon>\n            <ActionBarItem.Popover>\n                <ActionBarItem.List>\n                    <div className='padding-10'>\n                        <div className='text-medium'>This is just an example</div>\n                        <div>The real content goes here...</div>\n                    </div>\n                    <ActionBarItem.ListSeparator />\n                    <ActionBarItem.ListItem>\n                        <Button\n                            bsStyle='default'\n                            variant='link'\n                            iconName='rioglyph-logout'\n                            onClick={() => Notification.info('Logout')}\n                        >\n                            <span className='hover-text-decoration-none'>Logout</span>\n                        </Button>\n                    </ActionBarItem.ListItem>\n                </ActionBarItem.List>\n            </ActionBarItem.Popover>\n        </ActionBarItem>\n    );\n\n    const Notifications = (\n        <ActionBarItem>\n            <ActionBarItem.Icon>\n                <span className='icon rioglyph rioglyph-notification' />\n                <span className='badge badge-primary badge-indicator badge-indicator-pinging'>4</span>\n            </ActionBarItem.Icon>\n        </ActionBarItem>\n    );\n\n    return (\n        <ApplicationLayout>\n            <ApplicationLayout.Header>\n                <ApplicationHeader\n                    label='ApplicationHeader'\n                    actionBarItems={[FeedbackComponent, ServiceInfoComponent, Notifications, AccountMenuComponent]}\n                />\n            </ApplicationLayout.Header>\n        </ApplicationLayout>\n    );\n};\n\nexport default ActionBarItemsExample;"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>ApplicationHeader</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-support\">\n                            </span>\n                        </div>\n                    </div>\n                </li>\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem myItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-info-sign\">\n                            </span>\n                        </div>\n                    </div>\n                </li>\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-notification\">\n                            </span>\n                            <span class=\"badge badge-primary badge-indicator badge-indicator-pinging\">4</span>\n                        </div>\n                    </div>\n                </li>\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-user\">\n                            </span>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n        </nav>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "ActionBarItem",
+                  "rows": [
+                    {
+                      "name": "id",
+                      "type": "String",
+                      "default": "",
+                      "description": "The id is used to identify the item in the DOM. If not provided, a random id is used instead."
+                    },
+                    {
+                      "name": "title",
+                      "type": "String",
+                      "default": "",
+                      "description": "The title property for the sub component ActionBarItem.Popover. This can be a String or another component as well as a React-Intl component."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component. It can be defined for the parent and all sub components."
+                    },
+                    {
+                      "name": "mobileDialogBodyClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to dialog fallback modal-body element."
+                    },
+                    {
+                      "name": "hidePopoverOnClick",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defined if the popover should close when any child element is being clicked."
+                    },
+                    {
+                      "name": "popoverWidth",
+                      "type": "Number",
+                      "default": "250",
+                      "description": "Possible values are: 100, 150, 200, 250, 300, 350, 400, 450 or 500"
+                    },
+                    {
+                      "name": "useOffscreen",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Set on ActionBarItem.Popover in order to render the Popover content in the offscreen to have it in place and loaded when the Popover is shown. This flag ignored for mobile, in order to save energy."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to the sub components will be within the respective area. NoteChild elements for ActionItemBar.Icon such as rioglyph or svg icons that shall be shown as icon in the header must have set the class icon"
+                    }
+                  ]
+                },
+                {
+                  "heading": "ActionBarItem.List",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the wrapping list item component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ActionBarItem.ListItem",
+                  "rows": [
+                    {
+                      "name": "hasLink",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Set it to true when you want to use the item as link item. In case, please use the Link component from react-router-dom instead of an anchor tag to prevent side effects when automatically closing the popover."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name of the icon to be used for the item."
+                    },
+                    {
+                      "name": "onClick",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function to be triggered when the internal button of a list item is clicked. Note: When no callback function is provided, the children are rendered as is without wrapping them in a button."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the wrapping list item component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ActionBarItem.ListSeparator",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the wrapping list item component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ActionBarItem.Popover",
+                  "rows": [
+                    {
+                      "name": "title",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "The popover title."
+                    },
+                    {
+                      "name": "useOffscreen",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Define whether the popover content shall be rendered behind the scene to pre-load content or to avoid unmounting the content component"
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the popover content."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}