uiconfig-blueprint 0.1.0-dev.1 → 0.1.0-dev.12

package/src/components/DialogContext.tsx

@@ -23,10 +23,20 @@ export function setupDialog(){
         setDialog({...dialog, isOpen: true, ...d})
     }, [dialog, setDialog])
     const close = useCallback(()=>setDialog({...dialog, isOpen: false}), [dialog, setDialog])
-    return {dialog, open, close, setDialog}
+    const setDialogState = useCallback((state: any)=>{
+        setDialog({...dialog, state})
+    }, [dialog, setDialog])
+    return {dialog, open, close, setDialog, state: dialog.state, setState: setDialogState}
 }
-export const DialogContext = createContext<{dialog: DialogStateType, open: (d: Partial<DialogStateType>)=>void, close: ()=>void, setDialog: Dispatch<SetStateAction<DialogStateType>>}>(
-    {dialog: defaultDialogContext, open: ()=>{}, close: ()=>{}, setDialog: ()=>{}}
+export const DialogContext = createContext<{
+    dialog: DialogStateType,
+    open: (d: Partial<DialogStateType>)=>void,
+    close: ()=>void,
+    setDialog: Dispatch<SetStateAction<DialogStateType>>,
+    setState: Dispatch<SetStateAction<any>>,
+    state: any
+}>(
+    {dialog: defaultDialogContext, open: ()=>{}, close: ()=>{}, setDialog: ()=>{}, setState: ()=>{}, state: {}}
 )
 export const useDialog = () => useContext(DialogContext)
 
@@ -48,6 +58,21 @@ export function DialogComponent(){
     </Dialog>)
 }
 
+interface DialogPromptState {
+    value: string,
+    intent: Intent,
+    helperText: string,
+}
+interface DialogPromptProps extends Partial<DialogStateType>{
+    closeButtonText?: string,
+    submitButtonText?: string,
+    message?: string,
+    placeholder?: string,
+    value?: string,
+    showInput?: boolean,
+    onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
+    onSubmit?: (value: string)=>boolean|undefined|any|Promise<boolean|undefined|any>, // does not close if false
+}
 /**
  * Usage:
  * ```tsx
@@ -66,9 +91,6 @@ export function DialogComponent(){
  */
 export function useDialogPrompt(){
     const {open, close} = useDialog()
-    const {loadingState, updateLoading} = useLoadingState()
-    const [intent, setIntent] = useState<Intent>(Intent.NONE)
-    const [helperText, setHelperText] = useState('')
     const prompt = useCallback(({
         closeButtonText = 'Close',
         submitButtonText = 'Okay',
@@ -77,74 +99,112 @@ export function useDialogPrompt(){
         value = '',
         showInput = true,
         onClose, onSubmit,
-        ...props}: Partial<DialogStateType> &
-        {
-            closeButtonText?: string,
-            submitButtonText?: string,
-            message?: string,
-            placeholder?: string,
-            value?: string,
-            showInput?: boolean,
-            onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
-            onSubmit?: (value: string)=>boolean|undefined|any|Promise<boolean|undefined|any>, // does not close if false
-    }) => {
+        ...props}: DialogPromptProps) => {
         return new Promise<string|null>((resolve)=>{
-            const state = {value}
-            const doClose = async()=> {
-                if (onClose && (await onClose(state.value)) !== false) return
-                close()
-                resolve(null)
-            }
-            const doSubmit = async()=> {
-                if (onSubmit) {
-                    const res = await onSubmit(state.value)
-                    if(res.error){
-                        setIntent(Intent.DANGER)
-                        setHelperText(res.error)
-                    }
-                    if(res !== false) return
-                }
-                close()
-                resolve(state.value)
-            }
             open({
                 canClose: false,
                 ...props,
-                state,
+                state: {
+                    value,
+                    intent: Intent.NONE,
+                    helperText: '',
+                } as DialogPromptState,
                 content: (
-                    <FormGroup
-                        helperText={helperText||undefined}
-                        intent={intent}
-                        label={message}
-                        labelFor="dialog-prompt-text-input"
-                    >
-                        <InputGroup
-                            intent={intent}
-                            id="dialog-prompt-text-input"
-                            placeholder={placeholder}
-                            defaultValue={state.value}
-                            style={{display: showInput ? 'block' : 'none'}}
-                            onChange={(e: any) => {
-                                state.value = e.target.value
-                                if(helperText) setHelperText('')
-                                if(intent !== Intent.NONE) setIntent(Intent.NONE)
-                            }} // todo: submit on enter
-                        />
-                    </FormGroup>
+                    <DialogPromptContent message={message} showInput={showInput} placeholder={placeholder}/>
                 ),
                 actions: (
-                    <>
-                        <Button text={closeButtonText}
-                                loading={loadingState['popup-close']}
-                                onClick={() => updateLoading('popup-close', doClose())}/>
-                        <Button text={submitButtonText}
-                                intent="primary"
-                                loading={loadingState['popup-submit']}
-                                onClick={() => updateLoading('popup-submit', doSubmit())}/>
-                    </>
+                    <DialogPromptButtons closeButtonText={closeButtonText} submitButtonText={submitButtonText} onClose={onClose} onSubmit={onSubmit} resolve={resolve}/>
                 ),
             })
         })
-    }, [open, close, loadingState, updateLoading])
+    }, [open, close])
     return {prompt, close}
 }
+
+function DialogPromptButtons({
+    closeButtonText = 'Close',
+    submitButtonText = 'Okay',
+    onClose, onSubmit, resolve
+ }:{
+    closeButtonText?: string,
+    submitButtonText?: string,
+    onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
+    onSubmit?: (value: string)=>boolean|undefined|{error: string}|Promise<boolean|undefined|{error: string}>, // does not close if false
+    resolve: (value: string|null)=>void,
+}){
+    const {loadingState, updateLoading} = useLoadingState()
+    const {state, setState, close} = useDialog() as {state: DialogPromptState, setState: Dispatch<SetStateAction<DialogPromptState>>, close: ()=>void}
+    const doClose = async()=> {
+        if (onClose && (await onClose(state.value)) !== true) return
+        close()
+        resolve(null)
+    }
+    const doSubmit = async()=> {
+        if (onSubmit) {
+            const res = await onSubmit(state.value)
+            if(res && (res as any).error){
+                setState({...state, intent: Intent.DANGER, helperText: (res as any).error})
+            }
+            if(res !== true) return
+        }
+        close()
+        resolve(state.value)
+    }
+    return <>
+        <Button text={closeButtonText}
+                loading={loadingState['popup-close']}
+                onClick={() => updateLoading('popup-close', doClose())}/>
+        <Button text={submitButtonText}
+                intent="primary"
+                data-dialog-submit="true"
+                loading={loadingState['popup-submit']}
+                onClick={() => updateLoading('popup-submit', doSubmit())}/>
+    </>
+
+}
+
+function DialogPromptContent({
+    message = 'Enter some text: ',
+    placeholder = '',
+    showInput = true,
+}: {
+    message?: string,
+    placeholder?: string,
+    showInput?: boolean,
+}){
+    const {state, setState} = useDialog() as {state: DialogPromptState, setState: Dispatch<SetStateAction<DialogPromptState>>}
+    const {loadingState} = useLoadingState()
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            // Get the submit button using the data attribute and simulate a click
+            const submitButton = document.querySelector('[data-dialog-submit="true"]') as HTMLButtonElement;
+            if (submitButton && !loadingState['popup-submit']) {
+                submitButton.click();
+            }
+        }
+    }
+
+    return <FormGroup
+        helperText={state.helperText||undefined}
+        intent={state.intent}
+        label={message}
+        labelFor="dialog-prompt-text-input"
+    >
+        <InputGroup
+            intent={state.intent}
+            id="dialog-prompt-text-input"
+            placeholder={placeholder}
+            defaultValue={state.value}
+            style={{display: showInput ? 'block' : 'none'}}
+            autoFocus={true}
+            onChange={(e: any) => {
+                state.value = e.target.value
+                state.helperText = ''
+                state.intent = Intent.NONE
+                setState({...state})
+            }}
+            onKeyDown={handleKeyDown}
+        />
+    </FormGroup>
+}

package/src/components/DraggableIcon.tsx

@@ -2,13 +2,13 @@ import * as React from "react";
 import {Icon, IconName, MaybeElement} from "@blueprintjs/core";
 
 // todo: bounds and stepsize
-export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, size?: number, value: number, stepSize?: number, small?: boolean, onChange: (v: number, last?: boolean) => void }> {
+export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, size?: number, value: number, stepSize?: number, small?: boolean, disabled?: boolean, onChange: (v: number, last?: boolean) => void }> {
     private cursor = 'auto'
     private dragStartOffset = -Infinity
     private dragStartValue = -Infinity
     private lastValue = -Infinity
     private removeEvents = () => {
-        if (isFinite(this.lastValue)) this.props.onChange(this.lastValue)
+        if (isFinite(this.lastValue) && !this.props.disabled) this.props.onChange(this.lastValue)
         this.lastValue = -Infinity
         this.dragStartOffset = -Infinity
         this.dragStartValue = -Infinity
@@ -42,7 +42,7 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
                 let val = this.dragStartValue - off;
                 // val = Math.min(props.max, Math.max(props.min, val)); // todo
                 val = Number(val.toFixed(Math.max(1, -Math.log10(stepSize / 10)))); // clip decimal places depending on step size
-                this.props.onChange(val, false)
+                if(!this.props.disabled) this.props.onChange(val, false)
                 this.lastValue = val;
             }
         } else {
@@ -55,9 +55,10 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
         // const [dragging, setDragging] = React.useState(false)
 
         return (
-            <div style={{cursor: 'ew-resize', marginLeft: "6px", marginRight: "6px", marginTop: this.props.small ? "3px" : "6px", marginBottom: this.props.small ? "3px" : "6px"}}
+            <div style={{cursor: !this.props.disabled ? 'ew-resize': 'auto', marginLeft: "6px", marginRight: "6px", marginTop: this.props.small ? "3px" : "6px", marginBottom: this.props.small ? "3px" : "6px"}}
                  onMouseDown={(ev) => {
                      // if(dragging) return
+                     if(this.props.disabled) return
                      this.dragStartOffset = ev.clientX
                      this.dragStartValue = this.props.value
                      ev.stopPropagation()
@@ -69,7 +70,7 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
                      // setDragging(true)
                  }}
             >
-                <Icon icon={this.props.icon} size={this.props.size}/>
+                <Icon icon={this.props.icon} size={this.props.size} aria-disabled={this.props.disabled} />
             </div>
         )
     }

package/src/components/ExtendedNumericInput.tsx

@@ -20,7 +20,7 @@
 import React from "react";
 
 import type {HTMLInputProps, NumericInputProps} from "@blueprintjs/core";
-import {NumericInput} from "@blueprintjs/core";
+import {NumericInput} from "./NumericInput";
 import {DraggableIcon} from "./DraggableIcon";
 
 export interface IExtendedNumericInputState {
@@ -35,39 +35,87 @@ const NumberAbbreviation = {
 
 const NUMBER_ABBREVIATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(k|m|b)\b/gi;
 const SCIENTIFIC_NOTATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(e\d+)\b/gi;
+type Props = HTMLInputProps & NumericInputProps & {
+    onChange2?: (v: number, last?: boolean) => void,
+    transformValue?: (v: number) => number,
+    invTransformValue?: (v: number) => number,
+    draggableIcon?: boolean
+    value?: number | undefined
+    defaultValue?: number | undefined
+}
 // todo: bounds and stepsize
-export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & NumericInputProps & { onChange2: (v: number, last?: boolean) => void }, IExtendedNumericInputState> {
+export class ExtendedNumericInput extends React.PureComponent<Props, IExtendedNumericInputState> {
+    invTransformValue = (v: number|undefined) => {
+        v = v || 0
+        const v1 = this.props.invTransformValue ? this.props.invTransformValue(v) : v;
+        return v1
+    }
+    transformValue = (v: number|undefined) => {
+        v = v || 0
+        const v1 = this.props.transformValue ? this.props.transformValue(v) : v;
+        return v1
+    }
+
     public state: IExtendedNumericInputState = {
-        value: (this.props.value ?? this.props.defaultValue ?? '').toString(),
+        value: this.invTransformValue(this.props.value ?? this.props.defaultValue).toString(),
     };
 
     async setValue(val?: number) {
         return new Promise<void>((resolve) => {
-            this.setState({value: (val ?? this.props.value ?? this.props.defaultValue ?? '').toString()}, resolve)
+            this.setState({value: this.invTransformValue(val ?? this.props.value ?? this.props.defaultValue).toString()}, resolve)
         })
     }
 
+    componentDidUpdate(prevProps: Props) {
+        if (prevProps.value !== this.props.value && this.props.value !== undefined) {
+            this.setState({ value: this.invTransformValue(this.props.value).toString() });
+        }
+    }
     public render() {
         const {value} = this.state;
-        const props2: HTMLInputProps & NumericInputProps & { onChange2?: (v: number, last?: boolean) => void } = {...this.props}
-        if (props2.onChange2) delete props2.onChange2
+       const {
+            invTransformValue,
+            transformValue,
+            draggableIcon,
+            onChange2,
+            value: _value,
+            leftIcon,
+            defaultValue,
+            ...props2
+        } = this.props;
+
+        if(transformValue && !invTransformValue ||
+              !transformValue && invTransformValue) {
+            console.error('ExtendedNumericInput: Both transformValue and invTransformValue must be provided or neither. This is to ensure that the value can be transformed back and forth correctly.');
+        }
+
+        if(transformValue){
+            if(props2.min !== undefined) props2.min = this.invTransformValue(props2.min);
+            if(props2.max !== undefined) props2.max = this.invTransformValue(props2.max);
+            if(props2.stepSize !== undefined) props2.stepSize = this.invTransformValue(props2.stepSize);
+            if(props2.minorStepSize /*!== undefined*/) props2.minorStepSize = this.invTransformValue(props2.minorStepSize);
+            if(props2.majorStepSize /*!== undefined*/) props2.majorStepSize = this.invTransformValue(props2.majorStepSize);
+        }
 
         return (
             <NumericInput
                 {...props2}
-                leftElement={(
-                    <DraggableIcon icon={this.props.leftIcon ?? "variable"}
+                leftElement={(  // props2.leftElement could be null
+                    props2.leftElement !== undefined ? props2.leftElement :
+                        draggableIcon !== false ? <DraggableIcon icon={leftIcon ?? "variable"}
                                    size={16}
-                                   small={this.props.small}
+                                   disabled={props2.readOnly}
+                                   small={props2.small}
                                    value={parseFloat(value ?? '0')}
-                                   stepSize={this.props.stepSize}
+                                   stepSize={props2.stepSize}
                                    onChange={(v, last) => {
                                        this.handleValueChange(v, v.toString(), null, last, true)
-                                   }}/>
+                                   }}/> : undefined
                 )}
                 // leftIcon={"variable"}
-                buttonPosition={this.props.buttonPosition ?? (this.props.disabled ? "none" : "right")}
+                buttonPosition={props2.buttonPosition ?? (props2.disabled ? "none" : "right")}
                 allowNumericCharactersOnly={false}
+                clampValueOnBlur={true}
                 onBlur={this.handleBlur}
                 onKeyDown={this.handleKeyDown}
                 onButtonClick={this.handleButtonClick}
@@ -107,9 +155,11 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
     private handleValueChange = (_valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement | null, last?: boolean, dispatchOnChange2 = false) => {
         this._lastChangedValue = [_valueAsNumber, valueAsString]
         this.setState({value: valueAsString}, () => {
-            this.props.onValueChange?.(_valueAsNumber, valueAsString, inputElement)
-            if(dispatchOnChange2)
-                this.props.onChange2?.(_valueAsNumber, last)
+            const transformed = this.transformValue(_valueAsNumber)
+            this.props.onValueChange?.(transformed, valueAsString, inputElement)
+            if(dispatchOnChange2) {
+                this.props.onChange2?.(transformed, last)
+            }
         });
     };
 
@@ -124,8 +174,10 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
         result = this.evaluateSimpleMathExpression(result);
         result = this.nanStringToEmptyString(result);
         this.setState({value: result}, () => {
-            this.props.onValueChange?.(parseFloat(result) || 0, result, null)
-            this.props.onChange2?.(parseFloat(result) || 0)
+            const _valueAsNumber = parseFloat(result) || 0;
+            const transformed = this.transformValue(_valueAsNumber)
+            this.props.onValueChange?.(transformed, result, null)
+            this.props.onChange2?.(transformed, true)
         });
 
         // the user could have typed a different expression that evaluates to
@@ -151,7 +203,7 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
     };
 
     // Adapted from http://stackoverflow.com/questions/2276021/evaluating-a-string-as-a-mathematical-expression-in-javascript
-    // maybe try a better solution from above, right now it only works left to right
+    // todo - use a proper parser and evaluator, right now it only works left to right
     private evaluateSimpleMathExpression = (value: string) => {
         // leave empty strings empty
         if (!value) {
@@ -239,7 +291,7 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
         return (+value).toString();
     };
 
-    private roundValue = (value: number, precision: number = 1) => {
+    private roundValue = (value: number, precision: number = 6) => {
         // round to at most two decimal places
         return Math.round(value * 10 ** precision) / 10 ** precision;
     };

package/src/components/FileComponent.tsx

@@ -1,12 +1,15 @@
 import React, {useEffect, useRef} from "react";
 import {Button, ControlGroup, FileInput, HTMLSelect, InputGroup} from "@blueprintjs/core";
 import {BPFileComponentState} from "../bpComponents/BPFileComponent";
+import {useLoadingStateKey} from './loadingState'
 
 export interface FileComponentProps {
     state: BPFileComponentState
-    onChange: (state: Partial<BPFileComponentState>)=>void
+    onChange: (state: Partial<BPFileComponentState>)=>Promise<void>
+    previewSlot?: React.ReactNode,
+    uuid?: string
 }
-export const FileComponent: React.FC<FileComponentProps> = ({state, onChange})=>{
+export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, previewSlot})=>{
     const fileInputRef = useRef<HTMLInputElement>()
     const textInputRef = useRef<HTMLInputElement>()
     // console.log('render file component', state)
@@ -33,47 +36,67 @@ export const FileComponent: React.FC<FileComponentProps> = ({state, onChange})=>
     //     fileInputRef.current && (fileInputRef.current.placeholder = 'https://example.com/file.png')
     // }, []);
 
+    // const hasValue = !!state.value || !!state.preview
+
+    const {loadingState, updateLoading} = useLoadingStateKey()
+
     return (
-        <div style={{flexGrow: "1", display: "flex", height: "100%"}}>
-            <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
-                {!state.readOnly ? (<HTMLSelect options={['url', 'file']} minimal={true} fill={false}
+        <div style={{position: "relative", flexGrow: "1", display: "flex", height: "100%", flexDirection: "column"}}>
+            {!!state.preview && (
+                <>
+                    {previewSlot}
+                    <Button icon="small-cross"
+                            minimal={false}
+                            small={true}
                             disabled={state.disabled}
-                            value={state.mode} onChange={(e)=>{
-                    onChange({mode: e.target.value as 'url'|'file'})
-                }} /> ) : null}
+                            intent={"danger"}
+                            style={{position: "absolute", top: 0, right: 0, opacity: 0.7}}
+                            loading={loadingState}
+                            onClick={() => updateLoading(onChange({value: null}))}></Button>
+                </>
+            )}
+            {(!state.preview || !previewSlot) && <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
+                {!state.readOnly && !state.value ? (<HTMLSelect options={['url', 'file']} minimal={true} fill={false}
+                                                                disabled={state.disabled}
+                                                                className={"file-component-select"}
+                                                                value={state.mode} onChange={(e) => {
+                    onChange({mode: e.target.value as 'url' | 'file'})
+                }}/>) : null}
                 {state.mode === 'url' ? (
-                    <InputGroup style={{flexGrow: "1", flexShrink: "1"}} inputRef={textInputRef as any} type="url" defaultValue={typeof state.value === 'string' ? state.value : ''}
+                    <InputGroup style={{flexGrow: "1", flexShrink: "1"}} inputRef={textInputRef as any} type="url"
+                                defaultValue={typeof state.value === 'string' ? state.value : ''}
                                 rightElement={(
-                                    <Button disabled={state.readOnly} minimal={true} icon="arrow-right" onClick={()=>{
-                                        onChange({mode:'url', value: textInputRef.current?.value??''})
-                                    }} ></Button>
+                                    <Button disabled={state.readOnly} minimal={true} icon="arrow-right" onClick={() => {
+                                        onChange({mode: 'url', value: textInputRef.current?.value ?? ''})
+                                    }}></Button>
                                 )}
                                 disabled={state.disabled} readOnly={state.readOnly}
-                                onChange={(_)=>{
+                                onChange={(_) => {
                                 }} placeholder="https://example.com/file.png"/>
                 ) : (
-                    <FileInput inputProps={{ref: fileInputRef as any}} style={{flexGrow: "1", flexShrink: "1", minWidth: "50px"}}
+                    <FileInput inputProps={{ref: fileInputRef as any}}
+                               style={{flexGrow: "1", flexShrink: "1", minWidth: "50px"}}
                                text={(state.value as File)?.name || 'No file'}
                                disabled={state.disabled}
-                               onClick={(e)=>{
-                                   if(state.readOnly) {
+                               onClick={(e) => {
+                                   if (state.readOnly) {
                                        e.preventDefault()
                                        e.stopPropagation()
                                    }
                                }}
                                buttonText={state.readOnly ? '-' : state.value ? 'Change' : 'Choose'}
-                               onChange={()=>{
-                                   onChange({mode: 'file', value: fileInputRef.current?.files?.[0]??null})
-                               }} className="inputGroupFile" />
+                               onChange={() => {
+                                   onChange({mode: 'file', value: fileInputRef.current?.files?.[0] ?? null})
+                               }} className="inputGroupFile"/>
                 )}
                 {!state.readOnly && state.value && (
-                <Button minimal={true} icon="small-cross"
-                        disabled={state.disabled}
-                        onClick={()=>{
-                    onChange({value: null})
-                }}></Button>
+                    <Button minimal={true} icon="small-cross"
+                            disabled={state.disabled}
+                            loading={loadingState}
+                            onClick={() => updateLoading(onChange({value: null}))
+                            }></Button>
                 )}
-            </ControlGroup>
+            </ControlGroup>}
         </div>
     )
 }

package/src/components/InspectorStackComponent.tsx

@@ -6,7 +6,7 @@ import {UiConfigRendererContext} from '../bpComponents/BPComponent'
 
 // import {ViewerAppContext} from "./ViewerAppComponent";
 
-export function InspectorStackComponent({config}: { config: UiObjectConfig<any, 'panel'> }) {
+export function InspectorStackComponent({config, className}: { config: UiObjectConfig<any, 'panel'>, className?: string }) {
     const renderer = React.useContext(UiConfigRendererContext)
     const stackItem = React.useCallback(() => {
         return {
@@ -30,7 +30,7 @@ export function InspectorStackComponent({config}: { config: UiObjectConfig<any,
     }, [setCurrentPanelStack, stackItem])
 
     return (
-        <Card id="bpInspectorCard" style={{height: "100%", flexGrow: "1", position: "relative"}}>
+        <Card className={"bpInspectorCard " + className||''} style={{borderRadius: 0}}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}