@splunk/react-ui 5.7.1 → 5.8.0

package/docs-llm/Side Panel.md

@@ -0,0 +1,777 @@
+# Side Panel
+
+## Examples
+
+
+### Basic
+
+The size of the Panels is determined by the size of the content or by directly setting innerStyle.
+
+```typescript
+import React, { useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import SidePanel from '@splunk/react-ui/SidePanel';
+
+type Position = 'leftOpen' | 'rightOpen' | 'topOpen' | 'bottomOpen';
+
+
+function Basic() {
+    const [leftOpen, setLeftOpen] = useState(false);
+    const [rightOpen, setRightOpen] = useState(false);
+    const [topOpen, setTopOpen] = useState(false);
+    const [bottomOpen, setBottomOpen] = useState(false);
+
+    const handleRequestOpen = (dockPosition: Position) => {
+        if (dockPosition === 'bottomOpen') {
+            setBottomOpen(true);
+        } else if (dockPosition === 'leftOpen') {
+            setLeftOpen(true);
+        } else if (dockPosition === 'rightOpen') {
+            setRightOpen(true);
+        } else if (dockPosition === 'topOpen') {
+            setTopOpen(true);
+        }
+    };
+
+    const openLeftPanel = () => {
+        handleRequestOpen('leftOpen');
+    };
+
+    const openRightPanel = () => {
+        handleRequestOpen('rightOpen');
+    };
+
+    const openTopPanel = () => {
+        handleRequestOpen('topOpen');
+    };
+
+    const openBottomPanel = () => {
+        handleRequestOpen('bottomOpen');
+    };
+
+    const handleRequestClose = () => {
+        setLeftOpen(false);
+        setRightOpen(false);
+        setTopOpen(false);
+        setBottomOpen(false);
+    };
+
+    return (
+        <>
+            <Button key="left" onClick={openLeftPanel} label="left" />
+            <Button key="right" onClick={openRightPanel} label="right" />
+            <Button key="top" onClick={openTopPanel} label="top" />
+            <Button key="bottom" onClick={openBottomPanel} label="bottom" />
+            <SidePanel
+                open={leftOpen}
+                dockPosition="left"
+                onRequestClose={handleRequestClose}
+                innerStyle={{ width: 300 }}
+            >
+                This is a Panel
+            </SidePanel>
+            <SidePanel
+                open={rightOpen}
+                dockPosition="right"
+                onRequestClose={handleRequestClose}
+                innerStyle={{ width: 300 }}
+            >
+                This is a Panel
+            </SidePanel>
+            <SidePanel
+                open={topOpen}
+                dockPosition="top"
+                onRequestClose={handleRequestClose}
+                innerStyle={{ height: 300 }}
+            >
+                This is a Panel
+            </SidePanel>
+            <SidePanel
+                open={bottomOpen}
+                dockPosition="bottom"
+                onRequestClose={handleRequestClose}
+                innerStyle={{ height: 300 }}
+            >
+                This is a Panel
+            </SidePanel>
+        </>
+    );
+}
+
+export default Basic;
+```
+
+
+
+### Complex
+
+Composition with other components.
+
+```typescript
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+
+import ChartArea from '@splunk/react-icons/ChartArea';
+import ChartBar from '@splunk/react-icons/ChartBar';
+import ChartBubble from '@splunk/react-icons/ChartBubble';
+import ChartChoroplethMap from '@splunk/react-icons/ChartChoroplethMap';
+import ChartColumn from '@splunk/react-icons/ChartColumn';
+import ChartGauge from '@splunk/react-icons/ChartGauge';
+import ChartGaugeFiller from '@splunk/react-icons/ChartGaugeFiller';
+import ChartGaugeMarker from '@splunk/react-icons/ChartGaugeMarker';
+import ChartLine from '@splunk/react-icons/ChartLine';
+import ChartPie from '@splunk/react-icons/ChartPie';
+import ChartScatter from '@splunk/react-icons/ChartScatter';
+import ChartSingleValueRadial from '@splunk/react-icons/ChartSingleValueRadial';
+import ChevronsSlash from '@splunk/react-icons/ChevronsSlash';
+import CrossIcon from '@splunk/react-icons/Cross';
+import GeoTag from '@splunk/react-icons/GeoTag';
+import List from '@splunk/react-icons/List';
+import TableIcon from '@splunk/react-icons/Table';
+import Button from '@splunk/react-ui/Button';
+import CollapsiblePanel from '@splunk/react-ui/CollapsiblePanel';
+import Heading from '@splunk/react-ui/Heading';
+import Menu from '@splunk/react-ui/Menu';
+import Search from '@splunk/react-ui/Search';
+import SidePanel from '@splunk/react-ui/SidePanel';
+
+
+function Composition() {
+    const StyledButton = styled(Button)`
+        float: right;
+    `;
+
+    const [open, setOpen] = useState(false);
+
+    const handleOpen = () => {
+        setOpen(true);
+    };
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    const headerStyle: React.CSSProperties = {
+        width: '100%',
+        padding: '10px',
+        boxSizing: 'border-box',
+        display: 'table',
+        position: 'relative',
+    };
+
+    const menuStyle: React.CSSProperties = {
+        width: 300,
+    };
+
+    return (
+        <div>
+            <Button onClick={handleOpen} label="Add Panels" />
+            <SidePanel
+                dockPosition="right"
+                open={open}
+                onRequestClose={handleClose}
+                useLayerForClickAway={false}
+                innerStyle={{ width: 300, display: 'flex', flexDirection: 'column' }}
+            >
+                <div style={headerStyle}>
+                    <StyledButton
+                        appearance="subtle"
+                        onClick={handleClose}
+                        icon={<CrossIcon width={20} height={20} />}
+                    />
+
+                    <Heading level={4}>Add title</Heading>
+                    <Search placeholder="Find..." />
+                </div>
+                <div style={{ flex: '1 0 0px', overflowY: 'auto' }}>
+                    <CollapsiblePanel title="New (15)" defaultOpen>
+                        <Menu style={menuStyle}>
+                            <Menu.Item startAdornment={<List />}>Events</Menu.Item>
+                            <Menu.Item startAdornment={<TableIcon />}>Statistic table</Menu.Item>
+                            <Menu.Item startAdornment={<ChartArea />}>Area chart</Menu.Item>
+                            <Menu.Item startAdornment={<ChartBar />}>Bar chart</Menu.Item>
+                            <Menu.Item startAdornment={<ChartBubble />}>Bubble chart</Menu.Item>
+                            <Menu.Item startAdornment={<ChartColumn />}>Column chart</Menu.Item>
+                            <Menu.Item startAdornment={<ChartLine />}>Line chart</Menu.Item>
+                            <Menu.Item startAdornment={<ChartPie />}>Pie chart</Menu.Item>
+                            <Menu.Item startAdornment={<ChartScatter />}>Scatter chart</Menu.Item>
+                            <Menu.Item startAdornment={<ChartChoroplethMap />}>
+                                Choropleth map
+                            </Menu.Item>
+                            <Menu.Item startAdornment={<GeoTag />}>Cluster map</Menu.Item>
+                            <Menu.Item startAdornment={<ChartGaugeFiller />}>
+                                Filler gauge
+                            </Menu.Item>
+                            <Menu.Item startAdornment={<ChartGaugeMarker />}>
+                                Marker gauge
+                            </Menu.Item>
+                            <Menu.Item startAdornment={<ChartGauge />}>Radial gauge</Menu.Item>
+                            <Menu.Item startAdornment={<ChartSingleValueRadial />}>
+                                Single value
+                            </Menu.Item>
+                        </Menu>
+                    </CollapsiblePanel>
+                    <CollapsiblePanel title="New from report (4)">
+                        <Menu style={menuStyle}>
+                            <Menu.Item startAdornment={<List />}>
+                                Errors in the last 24 hours
+                            </Menu.Item>
+                            <Menu.Item startAdornment={<List />}>Errors in the last hour</Menu.Item>
+                            <Menu.Item startAdornment={<List />}>License Usage Data Cube</Menu.Item>
+                            <Menu.Item startAdornment={<List />}>
+                                Splunk errors last 24 hours
+                            </Menu.Item>
+                        </Menu>
+                    </CollapsiblePanel>
+                    <CollapsiblePanel title="Clone from Dashboard (3)">
+                        <CollapsiblePanel title="Integrity check of installed files">
+                            <Menu style={menuStyle}>
+                                <Menu.Item startAdornment={<ChevronsSlash />}>
+                                    Untitled Panel
+                                </Menu.Item>
+                                <Menu.Item startAdornment={<TableIcon />}>Untitled Panel</Menu.Item>
+                                <Menu.Item startAdornment={<ChevronsSlash />}>
+                                    Untitled Panel
+                                </Menu.Item>
+                            </Menu>
+                        </CollapsiblePanel>
+                    </CollapsiblePanel>
+                    <CollapsiblePanel title="Add prebuilt Panel (0)" />
+                </div>
+            </SidePanel>
+        </div>
+    );
+}
+
+export default Composition;
+```
+
+
+
+### Change Panel Size
+
+```typescript
+import React, { useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import ControlGroup from '@splunk/react-ui/ControlGroup';
+import Number, { NumberChangeHandler } from '@splunk/react-ui/Number';
+import SidePanel from '@splunk/react-ui/SidePanel';
+
+
+function ChangeWidth() {
+    const [open, setOpen] = useState(false);
+    const [panelSize, setPanelSize] = useState<number | undefined>(300);
+
+    const togglePanelOpen = () => {
+        setOpen(!open);
+    };
+
+    const handleChangePanelSize: NumberChangeHandler = (e, { value }) => {
+        setPanelSize(value);
+    };
+
+    return (
+        <div>
+            <ControlGroup label="Panel size:" controlsLayout="none">
+                <Number
+                    inline
+                    value={panelSize}
+                    onChange={handleChangePanelSize}
+                    style={{ width: 90 }}
+                />
+            </ControlGroup>
+
+            <Button onClick={togglePanelOpen} label="Open Panel" />
+            <SidePanel
+                open={open}
+                dockPosition="right"
+                onRequestClose={togglePanelOpen}
+                innerStyle={{ width: panelSize ?? 300 }}
+            >
+                This is a Panel
+            </SidePanel>
+        </div>
+    );
+}
+
+export default ChangeWidth;
+```
+
+
+
+### exampleContent
+
+```typescript
+import React, { useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import ControlGroup from '@splunk/react-ui/ControlGroup';
+import RadioBar, { RadioBarChangeHandler } from '@splunk/react-ui/RadioBar';
+import SidePanel from '@splunk/react-ui/SidePanel';
+
+const exampleContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit quis justo sed rutrum. Vivamus vehicula consequat metus nec lobortis. Phasellus tempus tempus ultrices. Nullam imperdiet leo pretium massa congue, a tristique mi porttitor. Vivamus bibendum lectus id mattis laoreet. Quisque venenatis ipsum pharetra diam ultricies, nec euismod massa pharetra. Nulla facilisi. In mattis leo eu facilisis fermentum.';
+
+const PageTop = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999' }}>
+            <SidePanel
+                open={open}
+                dockPosition="top"
+                onRequestClose={() => setOpen(false)}
+                dockLayout="page"
+            >
+                <div style={{ padding: 20 }}>
+                    <h4>Page Panel</h4>
+                    <p>
+                        Positions relative to the viewport. Takes full viewport width and overlays
+                        all content.
+                    </p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+
+            <div style={{ padding: 20 }}>
+                <h3>Page Top</h3>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+        </div>
+    );
+};
+
+const PageBottom = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999' }}>
+            <div style={{ padding: 20 }}>
+                <h3>Page Bottom</h3>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+
+            <SidePanel
+                open={open}
+                dockPosition="bottom"
+                onRequestClose={() => setOpen(false)}
+                dockLayout="page"
+            >
+                <div style={{ padding: 20 }}>
+                    <h4>Page Panel</h4>
+                    <p>
+                        Positions relative to the viewport. Takes full viewport width and overlays
+                        all content.
+                    </p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+        </div>
+    );
+};
+
+const PageLeft = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999' }}>
+            <SidePanel
+                open={open}
+                dockPosition="left"
+                onRequestClose={() => setOpen(false)}
+                dockLayout="page"
+            >
+                <div style={{ width: '200px', padding: 20 }}>
+                    <h4>Page Panel</h4>
+                    <p>
+                        Positions relative to the viewport. Takes full viewport height and overlays
+                        all content.
+                    </p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+
+            <div style={{ padding: 20 }}>
+                <h3>Page Left</h3>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+        </div>
+    );
+};
+
+const PageRight = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999' }}>
+            <div style={{ padding: 20 }}>
+                <h3>Page Right</h3>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+
+            <SidePanel
+                open={open}
+                dockPosition="right"
+                onRequestClose={() => setOpen(false)}
+                dockLayout="page"
+            >
+                <div style={{ width: '200px', padding: 20 }}>
+                    <h4>Page Panel</h4>
+                    <p>
+                        Positions relative to the viewport. Takes full viewport height and overlays
+                        all content.
+                    </p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+        </div>
+    );
+};
+
+const ContainerTop = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999', position: 'relative' }}>
+            <SidePanel open={open} dockPosition="top" dockLayout="container">
+                <div style={{ padding: 20 }}>
+                    <h4>Container Panel</h4>
+                    <p>Positions to the nearest positioned ancestor (this container).</p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+
+            <div style={{ padding: 20 }}>
+                <h3>Container Top</h3>
+                <p>{exampleContent}</p>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+        </div>
+    );
+};
+
+const ContainerBottom = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999', position: 'relative' }}>
+            <div style={{ padding: 20 }}>
+                <h3>Container Bottom</h3>
+                <p>{exampleContent}</p>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+
+            <SidePanel open={open} dockPosition="bottom" dockLayout="container">
+                <div style={{ padding: 20 }}>
+                    <h4>Container Panel</h4>
+                    <p>Positions to the nearest positioned ancestor (this container).</p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+        </div>
+    );
+};
+
+const ContainerLeft = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999', position: 'relative' }}>
+            <SidePanel open={open} dockPosition="left" dockLayout="container">
+                <div style={{ width: '200px', padding: 20 }}>
+                    <h4>Container Panel</h4>
+                    <p>Positions to the nearest positioned ancestor (this container).</p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+
+            <div style={{ padding: 20 }}>
+                <h3>Container Left</h3>
+                <p>{exampleContent}</p>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+        </div>
+    );
+};
+
+const ContainerRight = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999', position: 'relative' }}>
+            <div style={{ padding: 20 }}>
+                <h3>Container Right</h3>
+                <p>{exampleContent}</p>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+
+            <SidePanel open={open} dockPosition="right" dockLayout="container">
+                <div style={{ width: '200px', padding: 20 }}>
+                    <h4>Container Panel</h4>
+                    <p>Positions to the nearest positioned ancestor (this container).</p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+        </div>
+    );
+};
+
+const InlineTop = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999' }}>
+            <SidePanel open={open} dockPosition="top" dockLayout="inline">
+                <div style={{ padding: 20 }}>
+                    <h4>Inline Panel</h4>
+                    <p>Renders inline pushing content down.</p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+
+            <div style={{ padding: 20 }}>
+                <h3>Inline Top</h3>
+                <p>{exampleContent}</p>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+        </div>
+    );
+};
+
+const InlineBottom = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999' }}>
+            <div style={{ padding: 20 }}>
+                <h3>Inline Bottom</h3>
+                <p>{exampleContent}</p>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+
+            <SidePanel open={open} dockPosition="bottom" dockLayout="inline">
+                <div style={{ padding: 20 }}>
+                    <h4>Inline Panel</h4>
+                    <p>Renders inline after content..</p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+        </div>
+    );
+};
+
+const InlineLeft = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999', display: 'flex', flexDirection: 'row' }}>
+            <SidePanel open={open} dockPosition="left" dockLayout="inline">
+                <div style={{ width: '200px', padding: 20 }}>
+                    <h4>Inline Panel</h4>
+                    <p>Renders inline pushing content to the side.</p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+
+            <div style={{ flex: 1, padding: 20 }}>
+                <h3>Inline Left</h3>
+                <p>{exampleContent}</p>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+        </div>
+    );
+};
+
+const InlineRight = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <div style={{ border: '2px dashed #999', display: 'flex', flexDirection: 'row' }}>
+            <div style={{ flex: 1, padding: 20 }}>
+                <h3>Inline Right</h3>
+                <p>{exampleContent}</p>
+                <Button onClick={() => setOpen(!open)} label="Toggle Panel" />
+            </div>
+
+            <SidePanel open={open} dockPosition="right" dockLayout="inline">
+                <div style={{ width: '200px', padding: 20 }}>
+                    <h4>Inline Panel</h4>
+                    <p>Renders inline pushing content to the side.</p>
+                    <Button onClick={() => setOpen(false)} label="Close" />
+                </div>
+            </SidePanel>
+        </div>
+    );
+};
+
+
+function DockLayout() {
+    const [dockPosition, setDockPosition] = useState<'top' | 'bottom' | 'left' | 'right'>('right');
+    const [dockLayout, setDockLayout] = useState<'page' | 'container' | 'inline'>('page');
+
+    const handleDockPositionChange: RadioBarChangeHandler = (e, { value }) => {
+        setDockPosition(value as 'top' | 'bottom' | 'left' | 'right');
+    };
+
+    const handleDockLayoutChange: RadioBarChangeHandler = (e, { value }) => {
+        setDockLayout(value as 'page' | 'container' | 'inline');
+    };
+
+    const componentMap = {
+        page: {
+            top: PageTop,
+            bottom: PageBottom,
+            left: PageLeft,
+            right: PageRight,
+        },
+        container: {
+            top: ContainerTop,
+            bottom: ContainerBottom,
+            left: ContainerLeft,
+            right: ContainerRight,
+        },
+        inline: {
+            top: InlineTop,
+            bottom: InlineBottom,
+            left: InlineLeft,
+            right: InlineRight,
+        },
+    };
+
+    const SelectedComponent = componentMap[dockLayout][dockPosition];
+
+    return (
+        <div style={{ width: '800px' }}>
+            <div style={{ marginBottom: 20 }}>
+                <p>
+                    Select a dock position and layout mode, then click the button to see how the
+                    panel behaves:
+                </p>
+
+                <ControlGroup label="Dock Position" controlsLayout="none">
+                    <RadioBar value={dockPosition} onChange={handleDockPositionChange}>
+                        <RadioBar.Option value="left" label="Left" />
+                        <RadioBar.Option value="right" label="Right" />
+                        <RadioBar.Option value="top" label="Top" />
+                        <RadioBar.Option value="bottom" label="Bottom" />
+                    </RadioBar>
+                </ControlGroup>
+
+                <ControlGroup label="Dock Layout" controlsLayout="none">
+                    <RadioBar value={dockLayout} onChange={handleDockLayoutChange}>
+                        <RadioBar.Option value="page" label="Page" />
+                        <RadioBar.Option value="container" label="Container" />
+                        <RadioBar.Option value="inline" label="Inline" />
+                    </RadioBar>
+                </ControlGroup>
+            </div>
+
+            <SelectedComponent />
+        </div>
+    );
+}
+
+export default DockLayout;
+```
+
+
+
+### Initial focus
+
+Initial focus can be set to a different element using the `initialFocus` prop. Use `'first'` to focus the first focusable element, `'container'` to focus the panel itself, or pass a ref to a specific element.
+
+```typescript
+import React, { useCallback, useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import P from '@splunk/react-ui/Paragraph';
+import SidePanel from '@splunk/react-ui/SidePanel';
+
+
+function InitialFocus() {
+    const [acceptButton, setAcceptButton] = useState<HTMLButtonElement | null>();
+    const acceptButtonRef = useCallback((el: HTMLButtonElement | null) => setAcceptButton(el), []);
+
+    const [open, setOpen] = useState(false);
+
+    const handleRequestOpen = () => {
+        setOpen(true);
+    };
+
+    const handleRequestClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <Button onClick={handleRequestOpen} label="Open Panel" />
+            <SidePanel
+                initialFocus={acceptButton}
+                onRequestClose={handleRequestClose}
+                open={open}
+                dockPosition="right"
+                innerStyle={{ width: 400 }}
+            >
+                <div style={{ padding: 20 }}>
+                    <P>
+                        This panel demonstrates how to set initial focus to a specific element. When
+                        the panel opens, focus is set to the Accept button instead of the first
+                        focusable element.
+                    </P>
+                    <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+                        <Button
+                            appearance="secondary"
+                            onClick={handleRequestClose}
+                            label="Cancel"
+                        />
+                        <Button appearance="primary" elementRef={acceptButtonRef} label="Accept" />
+                    </div>
+                </div>
+            </SidePanel>
+        </>
+    );
+}
+
+export default InitialFocus;
+```
+
+
+
+
+## API
+
+
+### SidePanel API
+
+#### Props
+
+| Name | Type | Required | Default | Description |
+|------|------|------|------|------|
+| children | React.ReactNode | no |  |  |
+| dockLayout | 'page' \| 'container' \| 'inline' | no | 'page' | The layout mode for the panel. - page: Positions relative to the viewport (default) - container: Positions relative to nearest positioned ancestor - inline: Renders inline allowing content to reflow around the panel |
+| dockPosition | 'top' \| 'bottom' \| 'left' \| 'right' | no | 'right' | The position of the Panel on the screen. |
+| elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
+| initialFocus | \| 'first' \| 'container' \| (React.Component & { focus: () => void }) \| HTMLElement \| null | no |  | Allows focus to be set to a component other than the default. Supports `'first'` (first focusable element), `'container'` (the panel itself), or a ref. Note: Panel should be in view on open. |
+| innerClassName | string | no |  | The inner element can control the width of the side bar when placed left or right and the height when placed top or bottom. |
+| innerStyle | React.CSSProperties | no |  | The inner element can control the width of the side bar when placed left or right and the height when placed top or bottom. |
+| onAnimationEnd | () => void | no |  | A function called when the open / close animation ends. |
+| onRequestClose | SidePanelRequestCloseHandler | no |  | Only applies to dockLayout=page because other dockLayout modes do not support closing via the escape key or click away.  A function that is called when a close event occurs. The callback is passed a reason and the event.  Generally, this callback should be used to toggle the `open` prop. |
+| open | boolean | no |  | Indicates the current open state of the panel. |
+| outerClassName | string | no |  | The outer element grows to the width of the side bar when placed left or right or the height when placed top or bottom. It has minimal styles: a white background and a box shadow. Adding styles to this container can be useful when the sidebar must be shorter than the width or height of the page or when multiple sidebars are shown. |
+| outerStyle | React.CSSProperties | no |  | The outer element grows to the width of the side bar when placed left or right or the height when placed top or bottom. It has minimal styles: a white background and a box shadow. Adding styles to this container can be useful when the sidebar must be shorter than the width or height of the page or when multiple sidebars are shown. |
+| returnFocus | \| React.MutableRefObject<(React.Component & { focus: () => void }) \| HTMLElement \| null> \| (() => void) | no |  | Pass the ref of the invoking element (or other element that follows the logical flow of the application) to automatically move focus to the invoking element on SidePanel close. If using a ref is not possible, you can pass a function that sets focus to the appropriate element. This function will be called when the panel closes. |
+| useLayerForClickAway | boolean | no | true | Only applies to dockLayout=page because other dockLayout modes do not support closing via click away.  Indicates whether to add an overlay mask on the whole page, blocking other interactions while the Panel is open. |
+
+#### Types
+
+| Name | Type | Description |
+|------|------|------|
+| SidePanelRequestCloseHandler | (data: {     event: React.MouseEvent<HTMLDivElement> \| MouseEvent \| KeyboardEvent \| TouchEvent;     reason: 'clickAway' \| 'escapeKey'; }) => void |  |
+
+
+
+
+