@splunk/react-ui 5.7.1 → 5.8.0

package/docs-llm/Transition Open.md

@@ -0,0 +1,406 @@
+# Transition Open
+
+## Examples
+
+
+### Slide from Top
+
+Transition Open content sliding in from the top.
+
+```typescript
+import React, { useCallback, useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import TransitionOpen from '@splunk/react-ui/TransitionOpen';
+
+
+function SlideFromTop() {
+    const [open, setOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setOpen((isOpen) => !isOpen);
+    }, []);
+
+    const style: React.CSSProperties = {
+        border: '1px solid black',
+        textAlign: 'center',
+        width: 150,
+    };
+
+    // Container and outer styles allow for inset animations
+    const containerStyle: React.CSSProperties = {
+        border: '1px solid black',
+        height: 228,
+        marginTop: 10,
+        position: 'relative',
+    };
+    const outerStyle: React.CSSProperties = {
+        position: 'absolute',
+        top: 0,
+    };
+
+    return (
+        <>
+            <Button onClick={handleClick}>Click me!</Button>
+            <div style={containerStyle}>
+                <TransitionOpen animation="slideFromTop" open={open} outerStyle={outerStyle}>
+                    <div style={style}>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                    </div>
+                </TransitionOpen>
+            </div>
+        </>
+    );
+}
+
+export default SlideFromTop;
+```
+
+
+
+### Slide from Bottom
+
+Transition Open content sliding in from the bottom.
+
+```typescript
+import React, { useCallback, useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import TransitionOpen from '@splunk/react-ui/TransitionOpen';
+
+
+function SlideFromBottom() {
+    const [open, setOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setOpen((isOpen) => !isOpen);
+    }, []);
+
+    const style: React.CSSProperties = {
+        border: '1px solid black',
+        textAlign: 'center',
+        width: 150,
+    };
+
+    // Container and outer styles allow for inset animations
+    const containerStyle: React.CSSProperties = {
+        border: '1px solid black',
+        height: 228,
+        marginTop: 10,
+        position: 'relative',
+    };
+    const outerStyle: React.CSSProperties = {
+        bottom: 0,
+        position: 'absolute',
+    };
+
+    return (
+        <>
+            <Button onClick={handleClick}>Click me!</Button>
+            <div style={containerStyle}>
+                <TransitionOpen animation="slideFromBottom" open={open} outerStyle={outerStyle}>
+                    <div style={style}>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                    </div>
+                </TransitionOpen>
+            </div>
+        </>
+    );
+}
+
+export default SlideFromBottom;
+```
+
+
+
+### Slide from Left
+
+Transition Open content sliding in from the left.
+
+```typescript
+import React, { useCallback, useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import TransitionOpen from '@splunk/react-ui/TransitionOpen';
+
+
+function SlideFromLeft() {
+    const [open, setOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setOpen((isOpen) => !isOpen);
+    }, []);
+
+    const style: React.CSSProperties = {
+        border: '1px solid black',
+        textAlign: 'center',
+        width: 150,
+    };
+
+    // Container and outer styles allow for inset animations
+    const containerStyle: React.CSSProperties = {
+        border: '1px solid black',
+        height: 228,
+        marginTop: 10,
+        position: 'relative',
+    };
+    const outerStyle: React.CSSProperties = {
+        left: 0,
+        position: 'absolute',
+    };
+
+    return (
+        <>
+            <Button onClick={handleClick}>Click me!</Button>
+            <div style={containerStyle}>
+                <TransitionOpen animation="slideFromLeft" open={open} outerStyle={outerStyle}>
+                    <div style={style}>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                    </div>
+                </TransitionOpen>
+            </div>
+        </>
+    );
+}
+
+export default SlideFromLeft;
+```
+
+
+
+### Slide from Right
+
+Transition Open content sliding in from the right.
+
+```typescript
+import React, { useCallback, useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import TransitionOpen from '@splunk/react-ui/TransitionOpen';
+
+
+function SlideFromRight() {
+    const [open, setOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setOpen((isOpen) => !isOpen);
+    }, []);
+
+    const style: React.CSSProperties = {
+        border: '1px solid black',
+        textAlign: 'center',
+        width: 150,
+    };
+
+    // Container and outer styles allow for inset animations
+    const containerStyle: React.CSSProperties = {
+        border: '1px solid black',
+        height: 228,
+        marginTop: 10,
+        position: 'relative',
+    };
+    const outerStyle: React.CSSProperties = {
+        position: 'absolute',
+        right: 0,
+    };
+
+    return (
+        <>
+            <Button onClick={handleClick}>Click me!</Button>
+            <div style={containerStyle}>
+                <TransitionOpen animation="slideFromRight" open={open} outerStyle={outerStyle}>
+                    <div style={style}>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                        <p>Hello world</p>
+                    </div>
+                </TransitionOpen>
+            </div>
+        </>
+    );
+}
+
+export default SlideFromRight;
+```
+
+
+
+### Expand Height
+
+```typescript
+import React, { useCallback, useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import TransitionOpen from '@splunk/react-ui/TransitionOpen';
+
+
+function ExpandHeight() {
+    const [open, setOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setOpen((isOpen) => !isOpen);
+    }, []);
+
+    const style: React.CSSProperties = {
+        border: '1px solid black',
+        marginTop: 10,
+        textAlign: 'center',
+        width: 150,
+    };
+    return (
+        <div>
+            <Button onClick={handleClick}>Click me!</Button>
+            <TransitionOpen animation="expandHeight" open={open}>
+                <div style={style}>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                </div>
+            </TransitionOpen>
+        </div>
+    );
+}
+
+export default ExpandHeight;
+```
+
+
+
+### Expand Width
+
+```typescript
+import React, { useCallback, useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import TransitionOpen from '@splunk/react-ui/TransitionOpen';
+
+
+function ExpandWidth() {
+    const [open, setOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setOpen((isOpen) => !isOpen);
+    }, []);
+
+    const style: React.CSSProperties = {
+        border: '1px solid black',
+        marginTop: 10,
+        textAlign: 'center',
+        width: 150,
+    };
+
+    return (
+        <div style={{ height: 228 }}>
+            <Button onClick={handleClick}>Click me!</Button>
+            <TransitionOpen animation="expandWidth" open={open}>
+                <div style={style}>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                </div>
+            </TransitionOpen>
+        </div>
+    );
+}
+
+export default ExpandWidth;
+```
+
+
+
+### None
+
+Transition Open content appears with no animation.
+
+```typescript
+import React, { useCallback, useState } from 'react';
+
+import Button from '@splunk/react-ui/Button';
+import TransitionOpen from '@splunk/react-ui/TransitionOpen';
+
+
+function None() {
+    const [open, setOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setOpen((isOpen) => !isOpen);
+    }, []);
+
+    const style: React.CSSProperties = {
+        border: '1px solid black',
+        marginTop: 10,
+        textAlign: 'center',
+        width: 150,
+    };
+
+    return (
+        <div>
+            <Button onClick={handleClick}>Click me!</Button>
+            <TransitionOpen animation="none" open={open}>
+                <div style={style}>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                    <p>Hello world</p>
+                </div>
+            </TransitionOpen>
+        </div>
+    );
+}
+
+export default None;
+```
+
+
+
+
+## API
+
+
+### TransitionOpen API
+
+#### Props
+
+| Name | Type | Required | Default | Description |
+|------|------|------|------|------|
+| animateOnMount | boolean | no |  |  |
+| animation | AnimationType \| AnimationOnOpen \| AnimationOnClose | no | 'expandHeight' | The animation to use when opening and closing. Can be: - A string (e.g., 'expandHeight') to animate both open and close - An object with `{ open: AnimationType, close: 'none' }` to animate only when opening - An object with `{ open: 'none', close: AnimationType }` to animate only when closing |
+| children | React.ReactNode | no |  |  |
+| elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
+| id | string | no |  | The `id` of the inner container. |
+| innerClassName | string | no |  | An additional className to inner container. |
+| innerStyle | React.CSSProperties | no | {} |  |
+| onAnimationEnd | () => void | no |  |  |
+| onAnimationStart | () => void | no |  |  |
+| open | boolean | no |  | Whether the component is currently open or not. |
+| outerClassName | string | no |  | An additional className to outer container. |
+| outerId | string | no |  | The `id` of the outer container. |
+| outerStyle | React.CSSProperties | no | {} |  |
+| renderChildrenWhenCollapsed | boolean | no |  | When true, children are always rendered whether open or closed. |
+| retainFocus | boolean | no |  | Keep focus within `TransitionOpen` while open. |
+| takeFocus | boolean | no |  | When true, the `TransitionOpen` automatically takes focus when 'open' changes to true. |
+
+#### Types
+
+| Name | Type | Description |
+|------|------|------|
+| AnimationOnClose | { open: 'none'; close: AnimationType } |  |
+| AnimationOnOpen | { open: AnimationType; close: 'none' } |  |
+| AnimationType | \| 'slideFromTop'     \| 'slideFromRight'     \| 'slideFromBottom'     \| 'slideFromLeft'     \| 'expandHeight'     \| 'expandWidth'     \| 'none' |  |
+
+
+
+
+