+ )
+}
diff --git a/src/docs/App.tsx b/src/docs/App.tsx
index f84dc4f3..3145b443 100644
--- a/src/docs/App.tsx
+++ b/src/docs/App.tsx
@@ -38,8 +38,6 @@ function App() {
return (
}
statusIcons={{
diff --git a/src/docs/data/docs.json b/src/docs/data/docs.json
index 242d3fa7..687c890f 100644
--- a/src/docs/data/docs.json
+++ b/src/docs/data/docs.json
@@ -1 +1 @@
-{"src\\components\\ActionMenu.tsx":{"description":"The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.","displayName":"ActionMenu","methods":[],"props":{"hideToggleAction":{"required":false,"tsType":{"name":"boolean"},"description":"Hides the toggle button in mobile view. Can be useful when using multiple ActionMenus and not show the toggle button for each menu."},"children":{"required":false,"tsType":{"name":"any"},"description":""},"toggleIcon":{"required":false,"tsType":{"name":"any"},"description":"Icon component for the toggle icon."},"className":{"required":false,"tsType":{"name":"string"},"description":""},"break":{"required":false,"tsType":{"name":"union","raw":"breakOption | \"none\"","elements":[{"name":"breakOption"},{"name":"literal","value":"\"none\""}]},"description":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"none\""}},"exampleCode":"import { useState } from \"react\"\r\nimport { Link } from \"react-router-dom\"\r\nimport { Switch } from \"blue-react\"\r\n\r\nexport default function ActionMenuExample() {\r\n const [isChecked, setIsChecked] = useState(false)\r\n const toggleIsChecked = () => setIsChecked(!isChecked)\r\n\r\n const style = {\r\n width: isChecked && window.innerWidth > 600 ? \"600px\" : \"\"\r\n }\r\n\r\n return (\r\n
\r\n \r\n\r\n
\r\n \r\n Open in new tab\r\n \r\n
\r\n\r\n
\r\n \r\n {/**\r\n * This is how the Code looks like: \r\n import React from \"react\"\r\n import {Page, Body, Header, Actions, MenuItem} from \"blue-react\"\r\n \r\n export const ActionMenuExamplePage = () => {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n label=\"Test\"\r\n >\r\n \r\n \r\n \r\n }\r\n label=\"Test2\"\r\n > \r\n \r\n ...\r\n \r\n )\r\n }\r\n */}\r\n
\r\n
\r\n )\r\n}\r\n"},"src\\components\\ActionMenuSwitch.tsx":{"description":"@deprecated\r\nUse a solution with Bootstrap's `.form-check.form-switch` or `MenuItem` with a switch icon.\r\nSwitch for the Action Menu.","displayName":"ActionMenuSwitch","methods":[],"props":{"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""},"label":{"required":false,"tsType":{"name":"any"},"description":""}},"composes":["SwitchProps"],"exampleCode":"import ActionMenuExample from \"./ActionMenu\"\r\n\r\nexport default function ActionMenuSwitchExample() {\r\n // For source code see \"ActionMenu\" documentation example.\r\n return \r\n}\r\n"},"src\\components\\Body.tsx":{"description":"Contains the content of the page.","displayName":"Body","methods":[],"props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"containerClass":{"required":false,"tsType":{"name":"string"},"description":"Class name for the container. More info: https://getbootstrap.com/docs/4.0/layout/overview/#containers"},"hasActions":{"required":false,"tsType":{"name":"boolean"},"description":"Set `true` if this page uses ``, so this component will get enough padding to avoid overlapping of the content."},"break":{"required":false,"tsType":{"name":"breakOption"},"description":""},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: any) => void","signature":{"arguments":[{"name":"event","type":{"name":"any"}}],"return":{"name":"void"}}},"description":""},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Caret.tsx":{"description":"Caret icon component.","displayName":"Caret","methods":[],"props":{"open":{"required":false,"tsType":{"name":"boolean"},"description":"Indicates if open or not."},"mirrored":{"required":false,"tsType":{"name":"boolean"},"description":"By default the caret points to the right when closed. Set mirrored and it will point to the left."},"className":{"required":false,"tsType":{"name":"string"},"description":""}},"exampleCode":"import React from \"react\"\r\nimport { Caret } from \"blue-react\"\r\n\r\nclass CaretExample extends React.Component {\r\n constructor() {\r\n super()\r\n\r\n this.state = {\r\n isOpen: false\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n
\r\n \r\n this.setState({ isOpen: !this.state.isOpen })\r\n }\r\n >\r\n {\" \"}\r\n Click to toggle the caret\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default CaretExample\r\n"},"src\\components\\DocumentView.tsx":{"description":"Tries to display content in an iframe. When the content can't displayed in an iframe, it will show a download button instead.","displayName":"DocumentView","methods":[],"props":{"src":{"required":false,"tsType":{"name":"string"},"description":"Source of the content (URL)","defaultValue":{"value":"\"about:blank\"","computed":false}},"content":{"required":false,"tsType":{"name":"string"},"description":"Instead of a source, you can also set the content directly (HTML)"},"mimeType":{"required":true,"tsType":{"name":"string"},"description":"MIME type of the content (e.g. \"application/pdf\")"},"showDocumentLabel":{"required":false,"tsType":{"name":"string"},"description":"Label for the button to display","defaultValue":{"value":"\"Show document\"","computed":false}}},"exampleCode":"import React from \"react\"\r\nimport { DocumentView } from \"blue-react\"\r\n\r\nclass DocumentViewExample extends React.Component {\r\n render() {\r\n return (\r\n
\r\n \r\n
\r\n )\r\n }\r\n}\r\n\r\nexport default DocumentViewExample\r\n"},"src\\components\\Header.tsx":{"description":"The top of a page.","displayName":"Header","methods":[],"props":{"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\HeaderTitle.tsx":{"description":"The title area at the header bar.\r\nDepending on its content, the document's title will be set aswell (what will be shown in the browser title bar).","displayName":"HeaderTitle","methods":[],"props":{"logo":{"required":false,"tsType":{"name":"string"},"description":"Can be an image. Will be placed inside of the `src` attribute."},"appTitle":{"required":false,"tsType":{"name":"string"},"description":"Text next to the logo."},"keepAppTitle":{"required":false,"tsType":{"name":"boolean"},"description":"Disables that the app title will disappear at a specific view width."},"children":{"required":false,"tsType":{"name":"any"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":"Extends `className` from parent element."},"sidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Is the component used on the sidebar?"}}},"src\\components\\Intro.tsx":{"description":"Can be used for a sign-in page.","displayName":"Intro","methods":[],"props":{"logo":{"required":false,"tsType":{"name":"string"},"description":"Can be an image. Will be placed inside of the `src` attribute."},"logoMaxWidth":{"required":false,"tsType":{"name":"string"},"description":"Max width from the logo.","defaultValue":{"value":"\"100px\"","computed":false}},"title":{"required":false,"tsType":{"name":"string"},"description":"Text which will be placed under the logo."},"children":{"required":false,"tsType":{"name":"any"},"description":"Content"}}},"src\\components\\Layout.tsx":{"description":"The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.\r\nYou can also append your own event listeners.\r\n\r\nAllowed events:\r\n\r\n* **componentDidUpdate** - Component was updated.\r\n Example: `window.blueLayoutRef.addEventListener(\"componentDidUpdate\", (prevProps, prevState) => { })`\r\n* **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.\r\n Example: `window.blueLayoutRef.addEventListener(\"pageDidShowAgain\", \"home\", (prevProps, prevState) => { })`\r\n* **pageDidHide** - This page disappeared and another page appears instead.\r\n Example: `window.blueLayoutRef.addEventListener(\"pageDidHide\", \"home\", (prevProps, prevState) => { })`\r\n\r\nMethod to add event listeners:\r\n* `window.blueLayoutRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`\r\n\r\nMethods to remove event listeners:\r\n* `window.blueLayoutRef.`**removeEventListener**`(eventName: string, listenerId: string)`\r\n* `window.blueLayoutRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`","displayName":"Layout","methods":[{"name":"onHashChange","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"defaultProps","docblock":null,"modifiers":["static","get"],"params":[],"returns":null},{"name":"toggleSidebar","docblock":null,"modifiers":[],"params":[{"name":"event","type":{"name":"any"}}],"returns":null},{"name":"hideSidebar","docblock":null,"modifiers":[],"params":[{"name":"e","type":{"name":"any"}}],"returns":null},{"name":"initMatch","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"addEventListener","docblock":null,"modifiers":[],"params":[{"name":"param1","type":{"name":"any"}},{"name":"param2","type":{"name":"any"}},{"name":"param3","type":{"name":"any"}},{"name":"listenerId","optional":true,"type":{"name":"string"}}],"returns":null},{"name":"removeEventListener","docblock":null,"modifiers":[],"params":[{"name":"type","type":{"name":"string"}},{"name":"listenerId","type":{"name":"string"}}],"returns":null},{"name":"removeDuplicatedEventListeners","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"sidebarIn":{"required":false,"tsType":{"name":"boolean"},"description":""},"style":{"required":false,"tsType":{"name":"CSSProperties"},"description":""},"expandSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Sidebar is automatically expanded on wider views.","defaultValue":{"value":"false","computed":false}},"hideSidebarMenu":{"required":false,"tsType":{"name":"boolean"},"description":"Disables sidebar.","defaultValue":{"value":"false","computed":false}},"pages":{"required":false,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{ name: string; component: JSX.Element }","signature":{"properties":[{"key":"name","value":{"name":"string","required":true}},{"key":"component","value":{"name":"JSX.Element","required":true}}]}}],"raw":"{ name: string; component: JSX.Element }[]"},"description":"Registers pages for the built-in routing system. Example: `[{name: \"home\", component: }]`"},"unrouteable":{"required":false,"tsType":{"name":"boolean"},"description":"When `true`, always the \"home\" route will be rendered.","defaultValue":{"value":"false","computed":false}},"className":{"required":false,"tsType":{"name":"string"},"description":"Extends `className`."},"disableTitleSet":{"required":false,"tsType":{"name":"boolean"},"description":"By default, the document title will automatically set. Set this prop to `true` to disable this behaviour.","defaultValue":{"value":"false","computed":false}},"sidebarToggleIconComponent":{"required":false,"tsType":{"name":"any"},"description":"If you don't use blueicon, you can define another icon element for the sidebar toggle button.","defaultValue":{"value":"","computed":false}},"statusIcons":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\r\n danger: any\r\n info: any\r\n success: any\r\n warning: any\r\n}","signature":{"properties":[{"key":"danger","value":{"name":"any","required":true}},{"key":"info","value":{"name":"any","required":true}},{"key":"success","value":{"name":"any","required":true}},{"key":"warning","value":{"name":"any","required":true}}]}},"description":"Will replace status icons with custom ones. This will also overwrite the `useBlueicons` option.\r\nThis can be a SVG component or a normal element component.","defaultValue":{"value":"{\r\n danger: ,\r\n info: ,\r\n success: ,\r\n warning: \r\n}","computed":false}},"disableHeaders":{"required":false,"tsType":{"name":"boolean"},"description":"Disables the header bars on pages."},"blockRouting":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(newMatch: string[], currentMatch: string[]) => void | boolean","signature":{"arguments":[{"name":"newMatch","type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}},{"name":"currentMatch","type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}}],"return":{"name":"union","raw":"void | boolean","elements":[{"name":"void"},{"name":"boolean"}]}}},"description":"Define a function, that will be fired when switching routes. When your function returns `true`, the default route behaviour will be blocked.\r\nYou can use something like `window.blueLayoutRef.setState({ blockRouting: onHashChange })` globally to set the value from anywhere in your app."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\MenuItem.tsx":{"description":"Link, button or custom component for Sidebar, Actions or ActionMenu","displayName":"MenuItem","methods":[],"props":{"to":{"required":false,"tsType":{"name":"string"},"description":"Sets `to` prop, e.g. when you use the `NavLink` component from React Router."},"exact":{"required":false,"tsType":{"name":"boolean"},"description":"Prop for components by React Router."},"href":{"required":false,"tsType":{"name":"string"},"description":""},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"}}],"return":{"name":"void"}}},"description":""},"onClickAttached":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"}}],"return":{"name":"void"}}},"description":"Will be fired after `onClick`"},"icon":{"required":false,"tsType":{"name":"any"},"description":"Icon component or a class name."},"iconForActive":{"required":false,"tsType":{"name":"any"},"description":"Icon component or a class name when the MenuItem is active."},"label":{"required":false,"tsType":{"name":"any"},"description":"Label of the link."},"isActive":{"required":false,"tsType":{"name":"boolean"},"description":"Should be set as active."},"isHome":{"required":false,"tsType":{"name":"boolean"},"description":"When using Blue React's routing system: define this link as home page link."},"dropdownClassName":{"required":false,"tsType":{"name":"string"},"description":"Extends class name of the dropdown menu."},"children":{"required":false,"tsType":{"name":"any"},"description":"Set children to create a nested `MenuItem` as a dropdown."},"className":{"required":false,"tsType":{"name":"any"},"description":"Defines class name."},"showDropdown":{"required":false,"tsType":{"name":"boolean"},"description":"Defines dropdown status from outside."},"supportOutside":{"required":false,"tsType":{"name":"boolean"},"description":"Close on click outside."},"elementType":{"required":false,"tsType":{"name":"any"},"description":"By default, MenuItem is a `\"button\"`. If you set a `href`, it's a `\"a\"`.\r\nIf you want to have it another type, you can pass a component reference with this prop (e.g. `Link`)."},"target":{"required":false,"tsType":{"name":"string"},"description":""},"rel":{"required":false,"tsType":{"name":"string"},"description":""},"title":{"required":false,"tsType":{"name":"string"},"description":""},"onDragStart":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when the user starts to drag an element"},"onDrag":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when an element is being dragged"},"onDragEnd":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when the user has finished dragging the element"},"onDragEnter":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element enters the drop target"},"onDragOver":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element is over the drop target"},"onDragLeave":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element leaves the drop target"},"onDrop":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element is dropped on the drop target"},"draggable":{"required":false,"tsType":{"name":"boolean"},"description":"Specifies whether an element is draggable or not."}}},"src\\components\\Modal.tsx":{"description":"Simple modal/dialog. Designed to work as an alternative to JavaScript's native `alert()`, `prompt()` and `confirm()` functions.\r\nIt uses Bootstrap's Modal components.\r\n\r\nFor easy use, you should use the hook `useModal` together with `ModalProvider`. See the example there.","displayName":"Modal","methods":[],"props":{"modalContent":{"required":false,"tsType":{"name":"string"},"description":""},"modalTitle":{"required":false,"tsType":{"name":"string"},"description":""},"unSetModalContent":{"required":true,"tsType":{"name":"signature","type":"function","raw":"(modalContent?: string) => void","signature":{"arguments":[{"name":"modalContent","type":{"name":"string"}}],"return":{"name":"void"}}},"description":""},"onSubmit":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(input: string | boolean | null) => void","signature":{"arguments":[{"name":"input","type":{"name":"union","raw":"string | boolean | null","elements":[{"name":"string"},{"name":"boolean"},{"name":"null"}]}}],"return":{"name":"void"}}},"description":"Type of `input` depends on `type` prop and which action occured.\r\nWhen it's a string, the user entered something. When it's a boolean, the user clicked \"Yes\" or \"No\".\r\nWhen it's `null`, the user cancelled the modal."},"defaultInput":{"required":false,"tsType":{"name":"string"},"description":""},"type":{"required":true,"tsType":{"name":"ModalType"},"description":"`\"ask\"` | `\"tell\"` | `\"verify\"`"}}},"src\\components\\ModalProvider.tsx":{"description":"","displayName":"ModalProvider","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""}},"exampleCode":"import { ModalProvider, useModal } from \"blue-react\"\r\n\r\nfunction InsideComp() {\r\n // Use the `useModal` hook.\r\n const { tell, verify, ask } = useModal()\r\n\r\n return (\r\n <>\r\n
\r\n Allowed params for the functions tell, verify and ask: \r\n (text: string, title?: string)\r\n
\r\n\r\n
\r\n {\r\n tell(\"Hey, what's up\")\r\n }}\r\n >\r\n tell\r\n \r\n\r\n {\r\n // Use \"await\" to wait until the user enters something\r\n const answer = await ask(\"What is 1 + 1?\", \"Tell me the correct answer\")\r\n if (answer && parseInt(answer.toString()) === 2) {\r\n tell(\"That's correct!\")\r\n } else {\r\n tell(\"Wrong!\")\r\n }\r\n }\r\n }\r\n >\r\n ask\r\n \r\n\r\n {\r\n const answer = await verify(\"Are you sure?\", \"Say yes or no\")\r\n console.log({ answer })\r\n if (answer === true) {\r\n tell(\"So, you're sure\")\r\n }\r\n }}\r\n >\r\n verify\r\n \r\n\r\n {\r\n const name = await ask(\"What is your name?\")\r\n console.log(name)\r\n if (name) {\r\n const retVal = await tell(\"Hello, \" + name)\r\n console.log(retVal)\r\n\r\n if (await verify(\"Is everything alright?\")) {\r\n await tell(\"Oh, nice\")\r\n } else {\r\n await tell(\"Oh no :(\")\r\n }\r\n }\r\n }}\r\n >\r\n Start a conversation\r\n \r\n\r\n \r\n\r\n {\r\n alert(\"Hello there!\")\r\n if (window.confirm(\"Everything okay?\")) {\r\n alert(\"Alright\")\r\n }\r\n }}\r\n >\r\n How a native alert() would look like\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\n/**\r\n * Your component where you use `useModal` has to be wrapped around ``.\r\n * Best practice is to wrap it around your root component.\r\n */\r\nexport default function ModalProviderExample() {\r\n return (\r\n \r\n \r\n \r\n )\r\n}\r\n"},"src\\components\\Outside.tsx":{"description":"Component that fires an event if you click outside of it","displayName":"Outside","methods":[],"props":{"children":{"required":true,"tsType":{"name":"any"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"onClickOutside":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"MouseEvent"}}],"return":{"name":"void"}}},"description":""}}},"src\\components\\Page.tsx":{"description":"Main component for each page.","displayName":"Page","methods":[],"props":{"title":{"required":false,"tsType":{"name":"string"},"description":"Will be set to the document's `` tag."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Search.tsx":{"description":"A search bar that can be placed to the sidebar or on a page.","displayName":"Search","methods":[],"props":{"autoFocus":{"required":false,"tsType":{"name":"boolean"},"description":""},"body":{"required":false,"tsType":{"name":"boolean"},"description":"Is component inside of a page?"},"className":{"required":false,"tsType":{"name":"string"},"description":""},"icon":{"required":false,"tsType":{"name":"any"},"description":""},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.ChangeEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactChangeEvent","raw":"React.ChangeEvent"}}],"return":{"name":"void"}}},"description":""},"onSubmit":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.FormEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactFormEvent","raw":"React.FormEvent"}}],"return":{"name":"void"}}},"description":""},"placeholder":{"required":false,"tsType":{"name":"string"},"description":""},"reset":{"required":false,"tsType":{"name":"boolean"},"description":"Allow reset?"},"resetIcon":{"required":false,"tsType":{"name":"any"},"description":"Define custom icon for the reset button."},"sidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Is component inside of the sidebar?"},"value":{"required":false,"tsType":{"name":"string"},"description":""},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"id":{"required":false,"tsType":{"name":"string"},"description":""}},"exampleCode":"import React from \"react\"\r\nimport { Search } from \"blue-react\"\r\n\r\nclass SearchExample extends React.Component {\r\n constructor() {\r\n super()\r\n\r\n this.state = {\r\n search: \"\"\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div>\r\n <Search\r\n body\r\n className=\"w-50\"\r\n onChange={({ target }) =>\r\n this.setState({ search: target.value })\r\n }\r\n onSubmit={() => alert(\"Do form submit now!\")}\r\n placeholder=\"Begin typing...\"\r\n reset\r\n value={this.state.search}\r\n />\r\n </div>\r\n )\r\n }\r\n}\r\n\r\nexport default SearchExample\r\n"},"src\\components\\SidebarMenu.tsx":{"description":"Sidebar for the `Layout` component.","displayName":"SidebarMenu","methods":[],"props":{"sidebarClass":{"required":false,"tsType":{"name":"string"},"description":"Extends the class name by the sidebar."},"sidebarStyle":{"required":false,"tsType":{"name":"object"},"description":"Sets the `style` prop by the sidebar."},"menuClass":{"required":false,"tsType":{"name":"string"},"description":"Extends the class name by the menu."},"menuStyle":{"required":false,"tsType":{"name":"object"},"description":"Sets the `style` prop by the menu."},"topContent":{"required":false,"tsType":{"name":"any"},"description":"Content on top of the menu."},"bottomContent":{"required":false,"tsType":{"name":"any"},"description":"Content for the bottom part of the sidebar."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Status.tsx":{"description":"","displayName":"Status","methods":[],"props":{"alert":{"required":false,"tsType":{"name":"StatusAlert"},"description":""},"onUnsetAlert":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""},"successIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"✔\"","computed":false}},"infoIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"ℹ️\"","computed":false}},"warningIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"⚠️\"","computed":false}},"dangerIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"❌\"","computed":false}},"status":{"required":false,"tsType":{"name":"StatusType"},"description":"","defaultValue":{"value":"null","computed":false}}}},"src\\components\\StatusProvider.tsx":{"description":"","displayName":"StatusProvider","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"successIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"infoIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"warningIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"dangerIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""}},"exampleCode":"import {\r\n CheckCircleFill,\r\n ExclamationCircleFill,\r\n InfoCircleFill,\r\n XCircleFill\r\n} from \"react-bootstrap-icons\"\r\nimport { StatusProvider, useStatus } from \"blue-react\"\r\n\r\nfunction InsideComp() {\r\n const { setAlert, setStatus } = useStatus()\r\n\r\n return (\r\n <>\r\n <div className=\"mb-1 d-flex gap-1\">\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() =>\r\n setAlert({\r\n title: \"Hello World\",\r\n status: \"success\"\r\n })\r\n }\r\n >\r\n Set alert\r\n </button>\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() =>\r\n setAlert({\r\n title: \"Hello World\",\r\n status: \"danger\",\r\n detailText: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\r\n\r\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`\r\n })\r\n }\r\n >\r\n Set full alert\r\n </button>\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() => setAlert(null)}\r\n >\r\n Unset alert\r\n </button>\r\n </div>\r\n\r\n <div className=\"mb-1 d-flex gap-1\">\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() => setStatus(\"loading\")}\r\n >\r\n Show loading\r\n </button>\r\n <button\r\n className=\"btn btn-outline-success\"\r\n onClick={() => setStatus(\"success\")}\r\n >\r\n Show success\r\n </button>\r\n <button\r\n className=\"btn btn-outline-info\"\r\n onClick={() => setStatus(\"info\")}\r\n >\r\n Show info\r\n </button>\r\n <button\r\n className=\"btn btn-outline-warning\"\r\n onClick={() => setStatus(\"warning\")}\r\n >\r\n Show warning\r\n </button>\r\n <button\r\n className=\"btn btn-outline-danger\"\r\n onClick={() => setStatus(\"danger\")}\r\n >\r\n Show danger\r\n </button>\r\n </div>\r\n\r\n <div className=\"mb-1 d-flex gap-1\">\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() => setStatus(null)}\r\n >\r\n Hide status\r\n </button>\r\n </div>\r\n </>\r\n )\r\n}\r\n\r\nexport default function StatusExample() {\r\n return (\r\n <StatusProvider\r\n successIcon={<CheckCircleFill />}\r\n infoIcon={<InfoCircleFill />}\r\n warningIcon={<ExclamationCircleFill />}\r\n dangerIcon={<XCircleFill />}\r\n >\r\n <InsideComp />\r\n </StatusProvider>\r\n )\r\n}\r\n"},"src\\components\\Switch.tsx":{"description":"@deprecated\r\nUse Bootstrap's `.form-check.form-switch` instead:\r\nhttps://getbootstrap.com/docs/5.2/forms/checks-radios/#switches\r\n\r\nFor now, this component acts as proxy for Bootstrap's Switch.\r\nTo place a label next to the switch, use the new `label` prop.\r\n\r\nMigrate to Blue React 8.4.0 and use legacy support: Set the `label` with a string. Or set the `legacy` prop to use the previous look and behaviour.","displayName":"Switch","methods":[],"props":{"className":{"required":false,"tsType":{"name":"string"},"description":""},"checked":{"required":false,"tsType":{"name":"boolean"},"description":""},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.ChangeEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactChangeEvent","raw":"React.ChangeEvent"}}],"return":{"name":"void"}}},"description":""},"sliderLabel":{"required":false,"tsType":{"name":"string"},"description":"Sets label inside of the switch. If you set this, you should also set the className \"lg\" to make the switch larger."},"elementType":{"required":false,"tsType":{"name":"string"},"description":"You can change the type of the wrapper element. If you do, the `onChange` event might not be triggered.","defaultValue":{"value":"\"label\"","computed":false}},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":""},"legacy":{"required":false,"tsType":{"name":"boolean"},"description":"Set prop to use the older look and feel. Will disappear in future releases.","defaultValue":{"value":"false","computed":false}},"label":{"required":false,"tsType":{"name":"union","raw":"ReactNode | string","elements":[{"name":"ReactNode"},{"name":"string"}]},"description":""}},"exampleCode":"import { useState } from \"react\"\r\nimport { Switch } from \"blue-react\"\r\n\r\nexport default function SwitchExample() {\r\n const [isChecked, setIsChecked] = useState(false)\r\n const toggleIsChecked = () => setIsChecked(!isChecked)\r\n\r\n return (\r\n <div>\r\n <Switch checked={isChecked} onChange={toggleIsChecked} label=\"Hi\" />\r\n <br />\r\n <div className=\"form-check form-switch\">\r\n <input\r\n className=\"form-check-input\"\r\n type=\"checkbox\"\r\n role=\"switch\"\r\n id=\"flexSwitchCheckDefault\"\r\n checked={isChecked}\r\n onChange={toggleIsChecked}\r\n />\r\n <label className=\"form-check-label\" htmlFor=\"flexSwitchCheckDefault\">\r\n Bootstrap's form-switch\r\n </label>\r\n </div>\r\n <h4 className=\"mt-4 mb-3\">Legacy support</h4>\r\n <p>Use the `legacy` prop to use the older look and feel.</p>\r\n <Switch\r\n className=\"lg\"\r\n checked={isChecked}\r\n onChange={toggleIsChecked}\r\n sliderLabel={isChecked ? \"Yay🎉\" : \"😒\"}\r\n legacy\r\n />\r\n <br />\r\n <Switch checked={isChecked} onChange={toggleIsChecked} legacy /> <label>Normal switch</label>\r\n </div>\r\n )\r\n}\r\n"}}
\ No newline at end of file
+{"src\\components\\ActionMenu.tsx":{"description":"The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.","displayName":"ActionMenu","methods":[],"props":{"hideToggleAction":{"required":false,"tsType":{"name":"boolean"},"description":"Hides the toggle button in mobile view. Can be useful when using multiple ActionMenus and not show the toggle button for each menu."},"children":{"required":false,"tsType":{"name":"any"},"description":""},"toggleIcon":{"required":false,"tsType":{"name":"any"},"description":"Icon component for the toggle icon."},"className":{"required":false,"tsType":{"name":"string"},"description":""},"break":{"required":false,"tsType":{"name":"union","raw":"breakOption | \"none\"","elements":[{"name":"breakOption"},{"name":"literal","value":"\"none\""}]},"description":"\"sm\" | \"md\" | \"lg\" | \"xl\" | \"none\""}},"exampleCode":"import { useState } from \"react\"\r\nimport { Link } from \"react-router-dom\"\r\nimport { Switch } from \"blue-react\"\r\n\r\nexport default function ActionMenuExample() {\r\n const [isChecked, setIsChecked] = useState(false)\r\n const toggleIsChecked = () => setIsChecked(!isChecked)\r\n\r\n const style = {\r\n width: isChecked && window.innerWidth > 600 ? \"600px\" : \"\"\r\n }\r\n\r\n return (\r\n <div>\r\n <Switch\r\n className=\"lg me-3\"\r\n checked={isChecked}\r\n onChange={toggleIsChecked}\r\n legacy\r\n sliderLabel={isChecked ? \"Mobile\" : \"PC\"}\r\n />\r\n\r\n <p>\r\n <Link to=\"/action-menu-example\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n Open in new tab\r\n </Link>\r\n </p>\r\n\r\n <div className=\"ratio ratio-16x9\">\r\n <iframe src={`${process.env.PUBLIC_URL}/action-menu-example`} style={style} title=\"Actions Demo page\" />\r\n {/**\r\n * This is how the Code looks like: \r\n import React from \"react\"\r\n import {Page, Body, Header, Actions, MenuItem} from \"blue-react\"\r\n \r\n export const ActionMenuExamplePage = () => {\r\n return (\r\n <Page hasActions={true}>\r\n <Header>\r\n </Header>\r\n <Actions>\r\n <MenuItem\r\n icon={\r\n <svg\r\n width=\"1em\"\r\n height=\"1em\"\r\n viewBox=\"0 0 16 16\"\r\n className=\"bi bi-bag-fill\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M1 4h14v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm7-2.5A2.5 2.5 0 0 0 5.5 4h-1a3.5 3.5 0 1 1 7 0h-1A2.5 2.5 0 0 0 8 1.5z\"\r\n />\r\n </svg>\r\n }\r\n label=\"Test\"\r\n ></MenuItem>\r\n <MenuItem\r\n icon={\r\n <svg\r\n width=\"1em\"\r\n height=\"1em\"\r\n viewBox=\"0 0 16 16\"\r\n className=\"bi bi-bell-fill\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zm.995-14.901a1 1 0 1 0-1.99 0A5.002 5.002 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901z\"\r\n />\r\n </svg>\r\n }\r\n label=\"Test2\"\r\n > </MenuItem>\r\n </Actions>\r\n <Body>...</Body>\r\n </Page>\r\n )\r\n }\r\n */}\r\n </div>\r\n </div>\r\n )\r\n}\r\n"},"src\\components\\ActionMenuSwitch.tsx":{"description":"@deprecated\r\nUse a solution with Bootstrap's `.form-check.form-switch` or `MenuItem` with a switch icon.\r\nSwitch for the Action Menu.","displayName":"ActionMenuSwitch","methods":[],"props":{"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""},"label":{"required":false,"tsType":{"name":"any"},"description":""}},"composes":["SwitchProps"],"exampleCode":"import ActionMenuExample from \"./ActionMenu\"\r\n\r\nexport default function ActionMenuSwitchExample() {\r\n // For source code see \"ActionMenu\" documentation example.\r\n return <ActionMenuExample />\r\n}\r\n"},"src\\components\\Body.tsx":{"description":"Contains the content of the page.","displayName":"Body","methods":[],"props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"containerClass":{"required":false,"tsType":{"name":"string"},"description":"Class name for the container. More info: https://getbootstrap.com/docs/4.0/layout/overview/#containers"},"hasActions":{"required":false,"tsType":{"name":"boolean"},"description":"Set `true` if this page uses `<Actions />`, so this component will get enough padding to avoid overlapping of the content."},"break":{"required":false,"tsType":{"name":"breakOption"},"description":""},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: any) => void","signature":{"arguments":[{"name":"event","type":{"name":"any"}}],"return":{"name":"void"}}},"description":""},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Caret.tsx":{"description":"Caret icon component.","displayName":"Caret","methods":[],"props":{"open":{"required":false,"tsType":{"name":"boolean"},"description":"Indicates if open or not."},"mirrored":{"required":false,"tsType":{"name":"boolean"},"description":"By default the caret points to the right when closed. Set mirrored and it will point to the left."},"className":{"required":false,"tsType":{"name":"string"},"description":""}},"exampleCode":"import React from \"react\"\r\nimport { Caret } from \"blue-react\"\r\n\r\nclass CaretExample extends React.Component {\r\n constructor() {\r\n super()\r\n\r\n this.state = {\r\n isOpen: false\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div>\r\n <button\r\n className=\"btn btn-secondary\"\r\n onClick={() =>\r\n this.setState({ isOpen: !this.state.isOpen })\r\n }\r\n >\r\n <Caret open={this.state.isOpen} />{\" \"}\r\n <span>Click to toggle the caret</span>\r\n </button>\r\n </div>\r\n )\r\n }\r\n}\r\n\r\nexport default CaretExample\r\n"},"src\\components\\DocumentView.tsx":{"description":"Tries to display content in an iframe. When the content can't displayed in an iframe, it will show a download button instead.","displayName":"DocumentView","methods":[],"props":{"src":{"required":false,"tsType":{"name":"string"},"description":"Source of the content (URL)","defaultValue":{"value":"\"about:blank\"","computed":false}},"content":{"required":false,"tsType":{"name":"string"},"description":"Instead of a source, you can also set the content directly (HTML)"},"mimeType":{"required":true,"tsType":{"name":"string"},"description":"MIME type of the content (e.g. \"application/pdf\")"},"showDocumentLabel":{"required":false,"tsType":{"name":"string"},"description":"Label for the button to display","defaultValue":{"value":"\"Show document\"","computed":false}}},"exampleCode":"import React from \"react\"\r\nimport { DocumentView } from \"blue-react\"\r\n\r\nclass DocumentViewExample extends React.Component {\r\n render() {\r\n return (\r\n <div>\r\n <DocumentView\r\n src=\"/blue-react/v8/example-document.pdf\"\r\n mimeType=\"application/pdf\"\r\n />\r\n </div>\r\n )\r\n }\r\n}\r\n\r\nexport default DocumentViewExample\r\n"},"src\\components\\Header.tsx":{"description":"The top of a page.","displayName":"Header","methods":[],"props":{"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\HeaderTitle.tsx":{"description":"The title area at the header bar.\r\nDepending on its content, the document's title will be set aswell (what will be shown in the browser title bar).","displayName":"HeaderTitle","methods":[],"props":{"logo":{"required":false,"tsType":{"name":"string"},"description":"Can be an image. Will be placed inside of the `src` attribute."},"appTitle":{"required":false,"tsType":{"name":"string"},"description":"Text next to the logo."},"keepAppTitle":{"required":false,"tsType":{"name":"boolean"},"description":"Disables that the app title will disappear at a specific view width."},"children":{"required":false,"tsType":{"name":"any"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":"Extends `className` from parent element."},"sidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Is the component used on the sidebar?"}}},"src\\components\\Intro.tsx":{"description":"Can be used for a sign-in page.","displayName":"Intro","methods":[],"props":{"logo":{"required":false,"tsType":{"name":"string"},"description":"Can be an image. Will be placed inside of the `src` attribute."},"logoMaxWidth":{"required":false,"tsType":{"name":"string"},"description":"Max width from the logo.","defaultValue":{"value":"\"100px\"","computed":false}},"title":{"required":false,"tsType":{"name":"string"},"description":"Text which will be placed under the logo."},"children":{"required":false,"tsType":{"name":"any"},"description":"Content"}}},"src\\components\\Layout.tsx":{"description":"The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.","displayName":"Layout","methods":[{"name":"onHashChange","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"defaultProps","docblock":null,"modifiers":["static","get"],"params":[],"returns":null},{"name":"toggleSidebar","docblock":null,"modifiers":[],"params":[{"name":"event","type":{"name":"any"}}],"returns":null},{"name":"hideSidebar","docblock":null,"modifiers":[],"params":[{"name":"e","type":{"name":"any"}}],"returns":null}],"props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"sidebarIn":{"required":false,"tsType":{"name":"boolean"},"description":""},"style":{"required":false,"tsType":{"name":"CSSProperties"},"description":""},"expandSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Sidebar is automatically expanded on wider views.","defaultValue":{"value":"false","computed":false}},"hideSidebarMenu":{"required":false,"tsType":{"name":"boolean"},"description":"Disables sidebar.","defaultValue":{"value":"false","computed":false}},"className":{"required":false,"tsType":{"name":"string"},"description":"Extends `className`."},"disableTitleSet":{"required":false,"tsType":{"name":"boolean"},"description":"By default, the document title will automatically set. Set this prop to `true` to disable this behaviour.","defaultValue":{"value":"false","computed":false}},"sidebarToggleIconComponent":{"required":false,"tsType":{"name":"any"},"description":"If you don't use blueicon, you can define another icon element for the sidebar toggle button.","defaultValue":{"value":"<span className=\"bi-menu\" />","computed":false}},"statusIcons":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\r\n danger: any\r\n info: any\r\n success: any\r\n warning: any\r\n}","signature":{"properties":[{"key":"danger","value":{"name":"any","required":true}},{"key":"info","value":{"name":"any","required":true}},{"key":"success","value":{"name":"any","required":true}},{"key":"warning","value":{"name":"any","required":true}}]}},"description":"Will replace status icons with custom ones. This will also overwrite the `useBlueicons` option.\r\nThis can be a SVG component or a normal element component.","defaultValue":{"value":"{\r\n danger: <span className=\"bi-error\" />,\r\n info: <span className=\"bi-information\" />,\r\n success: <span className=\"bi-check\" />,\r\n warning: <span className=\"bi-sign_warning\" />\r\n}","computed":false}},"disableHeaders":{"required":false,"tsType":{"name":"boolean"},"description":"Disables the header bars on pages."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\LayoutLegacy.tsx":{"description":"The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.\r\nYou can also append your own event listeners.\r\n\r\nAllowed events:\r\n\r\n* **componentDidUpdate** - Component was updated.\r\n Example: `window.blueLayoutRef.addEventListener(\"componentDidUpdate\", (prevProps, prevState) => { })`\r\n* **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.\r\n Example: `window.blueLayoutRef.addEventListener(\"pageDidShowAgain\", \"home\", (prevProps, prevState) => { })`\r\n* **pageDidHide** - This page disappeared and another page appears instead.\r\n Example: `window.blueLayoutRef.addEventListener(\"pageDidHide\", \"home\", (prevProps, prevState) => { })`\r\n\r\nMethod to add event listeners:\r\n* `window.blueLayoutRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`\r\n\r\nMethods to remove event listeners:\r\n* `window.blueLayoutRef.`**removeEventListener**`(eventName: string, listenerId: string)`\r\n* `window.blueLayoutRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`","displayName":"LayoutLegacy","methods":[{"name":"onHashChange","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"defaultProps","docblock":null,"modifiers":["static","get"],"params":[],"returns":null},{"name":"toggleSidebar","docblock":null,"modifiers":[],"params":[{"name":"event","type":{"name":"any"}}],"returns":null},{"name":"hideSidebar","docblock":null,"modifiers":[],"params":[{"name":"e","type":{"name":"any"}}],"returns":null},{"name":"initMatch","docblock":null,"modifiers":[],"params":[],"returns":null},{"name":"addEventListener","docblock":null,"modifiers":[],"params":[{"name":"param1","type":{"name":"any"}},{"name":"param2","type":{"name":"any"}},{"name":"param3","type":{"name":"any"}},{"name":"listenerId","optional":true,"type":{"name":"string"}}],"returns":null},{"name":"removeEventListener","docblock":null,"modifiers":[],"params":[{"name":"type","type":{"name":"string"}},{"name":"listenerId","type":{"name":"string"}}],"returns":null},{"name":"removeDuplicatedEventListeners","docblock":null,"modifiers":[],"params":[],"returns":null}],"props":{"id":{"required":false,"tsType":{"name":"string"},"description":""},"sidebarIn":{"required":false,"tsType":{"name":"boolean"},"description":""},"style":{"required":false,"tsType":{"name":"CSSProperties"},"description":""},"expandSidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Sidebar is automatically expanded on wider views.","defaultValue":{"value":"false","computed":false}},"hideSidebarMenu":{"required":false,"tsType":{"name":"boolean"},"description":"Disables sidebar.","defaultValue":{"value":"false","computed":false}},"routes":{"required":false,"tsType":{"name":"Array","elements":[{"name":"signature","type":"object","raw":"{ name: string; component: JSX.Element }","signature":{"properties":[{"key":"name","value":{"name":"string","required":true}},{"key":"component","value":{"name":"JSX.Element","required":true}}]}}],"raw":"{ name: string; component: JSX.Element }[]"},"description":"Registers pages for the built-in routing system. Example: `[{name: \"home\", component: <HomePage />}]`"},"unrouteable":{"required":false,"tsType":{"name":"boolean"},"description":"When `true`, always the \"home\" route will be rendered.","defaultValue":{"value":"false","computed":false}},"className":{"required":false,"tsType":{"name":"string"},"description":"Extends `className`."},"disableTitleSet":{"required":false,"tsType":{"name":"boolean"},"description":"By default, the document title will automatically set. Set this prop to `true` to disable this behaviour.","defaultValue":{"value":"false","computed":false}},"sidebarToggleIconComponent":{"required":false,"tsType":{"name":"any"},"description":"If you don't use blueicon, you can define another icon element for the sidebar toggle button.","defaultValue":{"value":"<span className=\"bi-menu\" />","computed":false}},"statusIcons":{"required":false,"tsType":{"name":"signature","type":"object","raw":"{\r\n danger: any\r\n info: any\r\n success: any\r\n warning: any\r\n}","signature":{"properties":[{"key":"danger","value":{"name":"any","required":true}},{"key":"info","value":{"name":"any","required":true}},{"key":"success","value":{"name":"any","required":true}},{"key":"warning","value":{"name":"any","required":true}}]}},"description":"Will replace status icons with custom ones. This will also overwrite the `useBlueicons` option.\r\nThis can be a SVG component or a normal element component.","defaultValue":{"value":"{\r\n danger: <span className=\"bi-error\" />,\r\n info: <span className=\"bi-information\" />,\r\n success: <span className=\"bi-check\" />,\r\n warning: <span className=\"bi-sign_warning\" />\r\n}","computed":false}},"disableHeaders":{"required":false,"tsType":{"name":"boolean"},"description":"Disables the header bars on pages."},"blockRouting":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(newMatch: string[], currentMatch: string[]) => void | boolean","signature":{"arguments":[{"name":"newMatch","type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}},{"name":"currentMatch","type":{"name":"Array","elements":[{"name":"string"}],"raw":"string[]"}}],"return":{"name":"union","raw":"void | boolean","elements":[{"name":"void"},{"name":"boolean"}]}}},"description":"Define a function, that will be fired when switching routes. When your function returns `true`, the default route behaviour will be blocked.\r\nYou can use something like `window.blueLayoutRef.setState({ blockRouting: onHashChange })` globally to set the value from anywhere in your app."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\MenuItem.tsx":{"description":"Link, button or custom component for Sidebar, Actions or ActionMenu","displayName":"MenuItem","methods":[],"props":{"to":{"required":false,"tsType":{"name":"string"},"description":"Sets `to` prop, e.g. when you use the `NavLink` component from React Router."},"exact":{"required":false,"tsType":{"name":"boolean"},"description":"Prop for components by React Router."},"href":{"required":false,"tsType":{"name":"string"},"description":""},"onClick":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"}}],"return":{"name":"void"}}},"description":""},"onClickAttached":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactMouseEvent","raw":"React.MouseEvent"}}],"return":{"name":"void"}}},"description":"Will be fired after `onClick`"},"icon":{"required":false,"tsType":{"name":"any"},"description":"Icon component or a class name."},"iconForActive":{"required":false,"tsType":{"name":"any"},"description":"Icon component or a class name when the MenuItem is active."},"label":{"required":false,"tsType":{"name":"any"},"description":"Label of the link."},"isActive":{"required":false,"tsType":{"name":"boolean"},"description":"Should be set as active."},"isHome":{"required":false,"tsType":{"name":"boolean"},"description":"When using Blue React's routing system: define this link as home page link."},"dropdownClassName":{"required":false,"tsType":{"name":"string"},"description":"Extends class name of the dropdown menu."},"children":{"required":false,"tsType":{"name":"any"},"description":"Set children to create a nested `MenuItem` as a dropdown."},"className":{"required":false,"tsType":{"name":"any"},"description":"Defines class name."},"showDropdown":{"required":false,"tsType":{"name":"boolean"},"description":"Defines dropdown status from outside."},"supportOutside":{"required":false,"tsType":{"name":"boolean"},"description":"Close on click outside."},"elementType":{"required":false,"tsType":{"name":"any"},"description":"By default, MenuItem is a `\"button\"`. If you set a `href`, it's a `\"a\"`.\r\nIf you want to have it another type, you can pass a component reference with this prop (e.g. `Link`)."},"target":{"required":false,"tsType":{"name":"string"},"description":""},"rel":{"required":false,"tsType":{"name":"string"},"description":""},"title":{"required":false,"tsType":{"name":"string"},"description":""},"onDragStart":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when the user starts to drag an element"},"onDrag":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when an element is being dragged"},"onDragEnd":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the draggable target (the source element): occurs when the user has finished dragging the element"},"onDragEnter":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element enters the drop target"},"onDragOver":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element is over the drop target"},"onDragLeave":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element leaves the drop target"},"onDrop":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.DragEvent) => void | React.DragEventHandler","signature":{"arguments":[{"name":"event","type":{"name":"ReactDragEvent","raw":"React.DragEvent"}}],"return":{"name":"union","raw":"void | React.DragEventHandler","elements":[{"name":"void"},{"name":"ReactDragEventHandler","raw":"React.DragEventHandler"}]}}},"description":"Fired on the drop target: occurs when the dragged element is dropped on the drop target"},"draggable":{"required":false,"tsType":{"name":"boolean"},"description":"Specifies whether an element is draggable or not."}}},"src\\components\\Modal.tsx":{"description":"Simple modal/dialog. Designed to work as an alternative to JavaScript's native `alert()`, `prompt()` and `confirm()` functions.\r\nIt uses Bootstrap's Modal components.\r\n\r\nFor easy use, you should use the hook `useModal` together with `ModalProvider`. See the example there.","displayName":"Modal","methods":[],"props":{"modalContent":{"required":false,"tsType":{"name":"string"},"description":""},"modalTitle":{"required":false,"tsType":{"name":"string"},"description":""},"unSetModalContent":{"required":true,"tsType":{"name":"signature","type":"function","raw":"(modalContent?: string) => void","signature":{"arguments":[{"name":"modalContent","type":{"name":"string"}}],"return":{"name":"void"}}},"description":""},"onSubmit":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(input: string | boolean | null) => void","signature":{"arguments":[{"name":"input","type":{"name":"union","raw":"string | boolean | null","elements":[{"name":"string"},{"name":"boolean"},{"name":"null"}]}}],"return":{"name":"void"}}},"description":"Type of `input` depends on `type` prop and which action occured.\r\nWhen it's a string, the user entered something. When it's a boolean, the user clicked \"Yes\" or \"No\".\r\nWhen it's `null`, the user cancelled the modal."},"defaultInput":{"required":false,"tsType":{"name":"string"},"description":""},"type":{"required":true,"tsType":{"name":"ModalType"},"description":"`\"ask\"` | `\"tell\"` | `\"verify\"`"}}},"src\\components\\ModalProvider.tsx":{"description":"","displayName":"ModalProvider","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""}},"exampleCode":"import { ModalProvider, useModal } from \"blue-react\"\r\n\r\nfunction InsideComp() {\r\n // Use the `useModal` hook.\r\n const { tell, verify, ask } = useModal()\r\n\r\n return (\r\n <>\r\n <p>\r\n Allowed params for the functions <code>tell</code>, <code>verify</code> and <code>ask</code>:<br />\r\n <code>(text: string, title?: string)</code>\r\n </p>\r\n\r\n <div className=\"d-flex gap-2\">\r\n <button\r\n className=\"btn btn-outline-secondary\"\r\n onClick={() => {\r\n tell(\"Hey, what's up\")\r\n }}\r\n >\r\n tell\r\n </button>\r\n\r\n <button\r\n className=\"btn btn-outline-secondary\"\r\n onClick={\r\n // Make sure to make your function \"async\" when using \"await\"\r\n async () => {\r\n // Use \"await\" to wait until the user enters something\r\n const answer = await ask(\"What is 1 + 1?\", \"Tell me the correct answer\")\r\n if (answer && parseInt(answer.toString()) === 2) {\r\n tell(\"That's correct!\")\r\n } else {\r\n tell(\"Wrong!\")\r\n }\r\n }\r\n }\r\n >\r\n ask\r\n </button>\r\n\r\n <button\r\n className=\"btn btn-outline-secondary\"\r\n onClick={async () => {\r\n const answer = await verify(\"Are you sure?\", \"Say yes or no\")\r\n console.log({ answer })\r\n if (answer === true) {\r\n tell(\"So, you're sure\")\r\n }\r\n }}\r\n >\r\n verify\r\n </button>\r\n\r\n <button\r\n className=\"btn btn-secondary\"\r\n onClick={async () => {\r\n const name = await ask(\"What is your name?\")\r\n console.log(name)\r\n if (name) {\r\n const retVal = await tell(\"Hello, \" + name)\r\n console.log(retVal)\r\n\r\n if (await verify(\"Is everything alright?\")) {\r\n await tell(\"Oh, nice\")\r\n } else {\r\n await tell(\"Oh no :(\")\r\n }\r\n }\r\n }}\r\n >\r\n Start a conversation\r\n </button>\r\n\r\n <br />\r\n\r\n <button\r\n className=\"btn btn-outline-secondary\"\r\n onClick={() => {\r\n alert(\"Hello there!\")\r\n if (window.confirm(\"Everything okay?\")) {\r\n alert(\"Alright\")\r\n }\r\n }}\r\n >\r\n How a native <code>alert()</code> would look like\r\n </button>\r\n </div>\r\n </>\r\n )\r\n}\r\n\r\n/**\r\n * Your component where you use `useModal` has to be wrapped around `<ModalProvider></ModalProvider>`.\r\n * Best practice is to wrap it around your root component.\r\n */\r\nexport default function ModalProviderExample() {\r\n return (\r\n <ModalProvider>\r\n <InsideComp />\r\n </ModalProvider>\r\n )\r\n}\r\n"},"src\\components\\Outside.tsx":{"description":"Component that fires an event if you click outside of it","displayName":"Outside","methods":[],"props":{"children":{"required":true,"tsType":{"name":"any"},"description":""},"className":{"required":false,"tsType":{"name":"string"},"description":""},"onClickOutside":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: MouseEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"MouseEvent"}}],"return":{"name":"void"}}},"description":""}}},"src\\components\\Page.tsx":{"description":"Main component for each page.","displayName":"Page","methods":[],"props":{"title":{"required":false,"tsType":{"name":"string"},"description":"Will be set to the document's `<title>` tag."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Router.tsx":{"description":"A relatively simple Router System based on hash URLs. If you need something more advanced, you should use\r\nsomething like [React Router](https://github.com/remix-run/react-router#readme) or [Wouter](https://github.com/molefrog/wouter#readme).\r\n\r\n## `useMatch` hook\r\nUse the hook inside of a React Functional Component to get easy access to hash params. The function returns an array of current params.\r\n### Example\r\n```javascript\r\nconst [routeName, param2] = useMatch()\r\n\r\nuseEffect(() => {\r\n console.log(\"Do something with \" + param2)\r\n}, [param2])\r\n```\r\nThe function returns an array of current hash params.\r\n\r\n### Options\r\nYou can pass options like this: `useMatch({ decodeParams: false })`\r\n* `decodeParams` - Run `decodeURIComponent` for each param value. - Default: `true`","displayName":"Router","methods":[],"props":{"defaultRouteName":{"required":false,"tsType":{"name":"string"},"description":"Will be rendered, when there is no current route / hash.","defaultValue":{"value":"\"home\"","computed":false}},"routes":{"required":true,"tsType":{"name":"Array","elements":[{"name":"Route"}],"raw":"Route[]"},"description":"Registers routes for the built-in routing system. Example: `[{name: \"home\", component: <HomePage />}]`"}}},"src\\components\\Search.tsx":{"description":"A search bar that can be placed to the sidebar or on a page.","displayName":"Search","methods":[],"props":{"autoFocus":{"required":false,"tsType":{"name":"boolean"},"description":""},"body":{"required":false,"tsType":{"name":"boolean"},"description":"Is component inside of a page?"},"className":{"required":false,"tsType":{"name":"string"},"description":""},"icon":{"required":false,"tsType":{"name":"any"},"description":""},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.ChangeEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactChangeEvent","raw":"React.ChangeEvent"}}],"return":{"name":"void"}}},"description":""},"onSubmit":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.FormEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactFormEvent","raw":"React.FormEvent"}}],"return":{"name":"void"}}},"description":""},"placeholder":{"required":false,"tsType":{"name":"string"},"description":""},"reset":{"required":false,"tsType":{"name":"boolean"},"description":"Allow reset?"},"resetIcon":{"required":false,"tsType":{"name":"any"},"description":"Define custom icon for the reset button."},"sidebar":{"required":false,"tsType":{"name":"boolean"},"description":"Is component inside of the sidebar?"},"value":{"required":false,"tsType":{"name":"string"},"description":""},"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"id":{"required":false,"tsType":{"name":"string"},"description":""}},"exampleCode":"import React from \"react\"\r\nimport { Search } from \"blue-react\"\r\n\r\nclass SearchExample extends React.Component {\r\n constructor() {\r\n super()\r\n\r\n this.state = {\r\n search: \"\"\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div>\r\n <Search\r\n body\r\n className=\"w-50\"\r\n onChange={({ target }) =>\r\n this.setState({ search: target.value })\r\n }\r\n onSubmit={() => alert(\"Do form submit now!\")}\r\n placeholder=\"Begin typing...\"\r\n reset\r\n value={this.state.search}\r\n />\r\n </div>\r\n )\r\n }\r\n}\r\n\r\nexport default SearchExample\r\n"},"src\\components\\SidebarMenu.tsx":{"description":"Sidebar for the `Layout` component.","displayName":"SidebarMenu","methods":[],"props":{"sidebarClass":{"required":false,"tsType":{"name":"string"},"description":"Extends the class name by the sidebar."},"sidebarStyle":{"required":false,"tsType":{"name":"object"},"description":"Sets the `style` prop by the sidebar."},"menuClass":{"required":false,"tsType":{"name":"string"},"description":"Extends the class name by the menu."},"menuStyle":{"required":false,"tsType":{"name":"object"},"description":"Sets the `style` prop by the menu."},"topContent":{"required":false,"tsType":{"name":"any"},"description":"Content on top of the menu."},"bottomContent":{"required":false,"tsType":{"name":"any"},"description":"Content for the bottom part of the sidebar."},"children":{"required":false,"tsType":{"name":"any"},"description":""}}},"src\\components\\Status.tsx":{"description":"","displayName":"Status","methods":[],"props":{"alert":{"required":false,"tsType":{"name":"StatusAlert"},"description":""},"onUnsetAlert":{"required":false,"tsType":{"name":"signature","type":"function","raw":"() => void","signature":{"arguments":[],"return":{"name":"void"}}},"description":""},"successIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"✔\"","computed":false}},"infoIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"ℹ️\"","computed":false}},"warningIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"⚠️\"","computed":false}},"dangerIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":"","defaultValue":{"value":"\"❌\"","computed":false}},"status":{"required":false,"tsType":{"name":"StatusType"},"description":"","defaultValue":{"value":"null","computed":false}}}},"src\\components\\StatusProvider.tsx":{"description":"","displayName":"StatusProvider","methods":[],"props":{"children":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"successIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"infoIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"warningIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""},"dangerIcon":{"required":false,"tsType":{"name":"ReactNode"},"description":""}},"exampleCode":"import {\r\n CheckCircleFill,\r\n ExclamationCircleFill,\r\n InfoCircleFill,\r\n XCircleFill\r\n} from \"react-bootstrap-icons\"\r\nimport { StatusProvider, useStatus } from \"blue-react\"\r\n\r\nfunction InsideComp() {\r\n const { setAlert, setStatus } = useStatus()\r\n\r\n return (\r\n <>\r\n <div className=\"mb-1 d-flex gap-1\">\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() =>\r\n setAlert({\r\n title: \"Hello World\",\r\n status: \"success\"\r\n })\r\n }\r\n >\r\n Set alert\r\n </button>\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() =>\r\n setAlert({\r\n title: \"Hello World\",\r\n status: \"danger\",\r\n detailText: `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\r\n\r\n Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.`\r\n })\r\n }\r\n >\r\n Set full alert\r\n </button>\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() => setAlert(null)}\r\n >\r\n Unset alert\r\n </button>\r\n </div>\r\n\r\n <div className=\"mb-1 d-flex gap-1\">\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() => setStatus(\"loading\")}\r\n >\r\n Show loading\r\n </button>\r\n <button\r\n className=\"btn btn-outline-success\"\r\n onClick={() => setStatus(\"success\")}\r\n >\r\n Show success\r\n </button>\r\n <button\r\n className=\"btn btn-outline-info\"\r\n onClick={() => setStatus(\"info\")}\r\n >\r\n Show info\r\n </button>\r\n <button\r\n className=\"btn btn-outline-warning\"\r\n onClick={() => setStatus(\"warning\")}\r\n >\r\n Show warning\r\n </button>\r\n <button\r\n className=\"btn btn-outline-danger\"\r\n onClick={() => setStatus(\"danger\")}\r\n >\r\n Show danger\r\n </button>\r\n </div>\r\n\r\n <div className=\"mb-1 d-flex gap-1\">\r\n <button\r\n className=\"btn btn-light\"\r\n onClick={() => setStatus(null)}\r\n >\r\n Hide status\r\n </button>\r\n </div>\r\n </>\r\n )\r\n}\r\n\r\nexport default function StatusExample() {\r\n return (\r\n <StatusProvider\r\n successIcon={<CheckCircleFill />}\r\n infoIcon={<InfoCircleFill />}\r\n warningIcon={<ExclamationCircleFill />}\r\n dangerIcon={<XCircleFill />}\r\n >\r\n <InsideComp />\r\n </StatusProvider>\r\n )\r\n}\r\n"},"src\\components\\Switch.tsx":{"description":"@deprecated\r\nUse Bootstrap's `.form-check.form-switch` instead:\r\nhttps://getbootstrap.com/docs/5.2/forms/checks-radios/#switches\r\n\r\nFor now, this component acts as proxy for Bootstrap's Switch.\r\nTo place a label next to the switch, use the new `label` prop.\r\n\r\nMigrate to Blue React 8.4.0 and use legacy support: Set the `label` with a string. Or set the `legacy` prop to use the previous look and behaviour.","displayName":"Switch","methods":[],"props":{"className":{"required":false,"tsType":{"name":"string"},"description":""},"checked":{"required":false,"tsType":{"name":"boolean"},"description":""},"onChange":{"required":false,"tsType":{"name":"signature","type":"function","raw":"(event: React.ChangeEvent) => void","signature":{"arguments":[{"name":"event","type":{"name":"ReactChangeEvent","raw":"React.ChangeEvent"}}],"return":{"name":"void"}}},"description":""},"sliderLabel":{"required":false,"tsType":{"name":"string"},"description":"Sets label inside of the switch. If you set this, you should also set the className \"lg\" to make the switch larger."},"elementType":{"required":false,"tsType":{"name":"string"},"description":"You can change the type of the wrapper element. If you do, the `onChange` event might not be triggered.","defaultValue":{"value":"\"label\"","computed":false}},"disabled":{"required":false,"tsType":{"name":"boolean"},"description":""},"legacy":{"required":false,"tsType":{"name":"boolean"},"description":"Set prop to use the older look and feel. Will disappear in future releases.","defaultValue":{"value":"false","computed":false}},"label":{"required":false,"tsType":{"name":"union","raw":"ReactNode | string","elements":[{"name":"ReactNode"},{"name":"string"}]},"description":""}},"exampleCode":"import { useState } from \"react\"\r\nimport { Switch } from \"blue-react\"\r\n\r\nexport default function SwitchExample() {\r\n const [isChecked, setIsChecked] = useState(false)\r\n const toggleIsChecked = () => setIsChecked(!isChecked)\r\n\r\n return (\r\n <div>\r\n <Switch checked={isChecked} onChange={toggleIsChecked} label=\"Hi\" />\r\n <br />\r\n <div className=\"form-check form-switch\">\r\n <input\r\n className=\"form-check-input\"\r\n type=\"checkbox\"\r\n role=\"switch\"\r\n id=\"flexSwitchCheckDefault\"\r\n checked={isChecked}\r\n onChange={toggleIsChecked}\r\n />\r\n <label className=\"form-check-label\" htmlFor=\"flexSwitchCheckDefault\">\r\n Bootstrap's form-switch\r\n </label>\r\n </div>\r\n <h4 className=\"mt-4 mb-3\">Legacy support</h4>\r\n <p>Use the `legacy` prop to use the older look and feel.</p>\r\n <Switch\r\n className=\"lg\"\r\n checked={isChecked}\r\n onChange={toggleIsChecked}\r\n sliderLabel={isChecked ? \"Yay🎉\" : \"😒\"}\r\n legacy\r\n />\r\n <br />\r\n <Switch checked={isChecked} onChange={toggleIsChecked} legacy /> <label>Normal switch</label>\r\n </div>\r\n )\r\n}\r\n"}}
\ No newline at end of file