@itwin/itwinui-react 3.0.0-dev.4 → 3.0.0-dev.6

package/cjs/core/Header/HeaderButton.js

@@ -1,38 +1,16 @@
-"use strict";
+'use strict';
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.HeaderButton = void 0;
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const HeaderSplitButton_js_1 = require("./HeaderSplitButton.js");
-const HeaderDropdownButton_js_1 = require("./HeaderDropdownButton.js");
-const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
+const tslib_1 = require('tslib');
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const HeaderSplitButton_js_1 = require('./HeaderSplitButton.js');
+const HeaderDropdownButton_js_1 = require('./HeaderDropdownButton.js');
+const HeaderBasicButton_js_1 = require('./HeaderBasicButton.js');
 /**
  * Header button that handles slim state of the `Header` it's in.
  * When in slim mode, will only display the name and reduce icon size.
@@ -44,18 +22,73 @@ const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
  * <HeaderButton name='Project D' isActive />
  */
 exports.HeaderButton = React.forwardRef((props, ref) => {
-    const { name, description, isActive = false, startIcon, menuItems, disabled, ...rest } = props;
-    const buttonProps = {
-        startIcon: startIcon ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-icon', "aria-hidden": true }, startIcon)) : null,
-        children: (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-text' },
-            React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-label' }, name),
-            description && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-breadcrumb-button-text-sublabel' }, description)))),
-        ref: ref,
-        disabled: disabled,
-        ...(!!menuItems && { menuItems }),
-        ...rest,
-    }; // eslint-disable-line @typescript-eslint/no-explicit-any
-    const headerButton = !!props.menuItems && !!props.onClick ? (React.createElement(HeaderSplitButton_js_1.HeaderSplitButton, { ...buttonProps })) : !!props.menuItems ? (React.createElement(HeaderDropdownButton_js_1.HeaderDropdownButton, { ...buttonProps })) : (React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, { ...buttonProps }));
-    return (React.createElement(index_js_1.Box, { as: 'li', className: 'iui-header-breadcrumb-item', "aria-current": isActive ? 'location' : undefined, "aria-disabled": disabled ? 'true' : undefined }, headerButton));
+  const {
+    name,
+    description,
+    htmlName,
+    isActive = false,
+    startIcon,
+    menuItems,
+    disabled,
+    ...rest
+  } = props;
+  const buttonProps = {
+    startIcon: startIcon
+      ? React.createElement(
+          index_js_1.Box,
+          {
+            as: 'span',
+            className: 'iui-header-breadcrumb-button-icon',
+            'aria-hidden': true,
+          },
+          startIcon,
+        )
+      : null,
+    children: React.createElement(
+      index_js_1.Box,
+      { as: 'span', className: 'iui-header-breadcrumb-button-text' },
+      React.createElement(
+        index_js_1.Box,
+        { as: 'span', className: 'iui-header-breadcrumb-button-text-label' },
+        name,
+      ),
+      description &&
+        React.createElement(
+          index_js_1.Box,
+          {
+            as: 'span',
+            className: 'iui-header-breadcrumb-button-text-sublabel',
+          },
+          description,
+        ),
+    ),
+    ref: ref,
+    disabled: disabled,
+    name: htmlName,
+    ...(!!menuItems && { menuItems }),
+    ...rest,
+  }; // eslint-disable-line @typescript-eslint/no-explicit-any
+  const headerButton =
+    !!props.menuItems && !!props.onClick
+      ? React.createElement(HeaderSplitButton_js_1.HeaderSplitButton, {
+          ...buttonProps,
+        })
+      : !!props.menuItems
+      ? React.createElement(HeaderDropdownButton_js_1.HeaderDropdownButton, {
+          ...buttonProps,
+        })
+      : React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, {
+          ...buttonProps,
+        });
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'li',
+      className: 'iui-header-breadcrumb-item',
+      'aria-current': isActive ? 'location' : undefined,
+      'aria-disabled': disabled ? 'true' : undefined,
+    },
+    headerButton,
+  );
 });
 exports.default = exports.HeaderButton;

package/cjs/core/Header/HeaderDropdownButton.js

@@ -1,53 +1,57 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.HeaderDropdownButton = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../DropdownMenu/index.js");
-const index_js_2 = require("../utils/index.js");
-const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../DropdownMenu/index.js');
+const index_js_2 = require('../utils/index.js');
+const HeaderBasicButton_js_1 = require('./HeaderBasicButton.js');
 exports.HeaderDropdownButton = React.forwardRef((props, ref) => {
-    const { menuItems, className, children, ...rest } = props;
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const [menuWidth, setMenuWidth] = React.useState(0);
-    const buttonRef = React.useRef(null);
-    const refs = (0, index_js_2.useMergedRefs)(ref, buttonRef);
-    React.useEffect(() => {
-        if (buttonRef.current) {
-            setMenuWidth(buttonRef.current.offsetWidth);
-        }
-    }, [children]);
-    return (React.createElement(index_js_1.DropdownMenu, { menuItems: menuItems, style: { minWidth: menuWidth }, onShow: () => setIsMenuOpen(true), onHide: () => setIsMenuOpen(false) },
-        React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, { className: (0, classnames_1.default)('iui-header-breadcrumb-button', className), ref: refs, "aria-label": 'Dropdown', endIcon: isMenuOpen ? (React.createElement(index_js_2.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(index_js_2.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })), ...rest }, children)));
+  const { menuItems, className, children, ...rest } = props;
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [menuWidth, setMenuWidth] = React.useState(0);
+  const buttonRef = React.useRef(null);
+  const refs = (0, index_js_2.useMergedRefs)(ref, buttonRef);
+  React.useEffect(() => {
+    if (buttonRef.current) {
+      setMenuWidth(buttonRef.current.offsetWidth);
+    }
+  }, [children]);
+  return React.createElement(
+    index_js_1.DropdownMenu,
+    {
+      menuItems: menuItems,
+      style: { minWidth: menuWidth },
+      onShow: () => setIsMenuOpen(true),
+      onHide: () => setIsMenuOpen(false),
+    },
+    React.createElement(
+      HeaderBasicButton_js_1.HeaderBasicButton,
+      {
+        className: (0, classnames_1.default)(
+          'iui-header-breadcrumb-button',
+          className,
+        ),
+        ref: refs,
+        'aria-label': 'Dropdown',
+        endIcon: isMenuOpen
+          ? React.createElement(index_js_2.SvgCaretUpSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            })
+          : React.createElement(index_js_2.SvgCaretDownSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            }),
+        ...rest,
+      },
+      children,
+    ),
+  );
 });
 exports.default = exports.HeaderDropdownButton;

package/cjs/core/Header/HeaderLogo.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type HeaderLogoOwnProps = {
+type HeaderLogoOwnProps = {
     /**
      * Logo shown before the main content.
      */

package/cjs/core/Header/HeaderLogo.js

@@ -1,39 +1,14 @@
-"use strict";
+'use strict';
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.HeaderLogo = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const tslib_1 = require('tslib');
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Header Title section
  * @example
@@ -43,10 +18,41 @@ const index_js_1 = require("../utils/index.js");
  * <HeaderLogo logo={<img src='data:image/png;base64,...' />}>Downloaded Image</HeaderLogo>
  */
 exports.HeaderLogo = React.forwardRef((props, ref) => {
-    const { className, children, logo, onClick, as = (!!onClick ? 'button' : 'div'), // eslint-disable-line @typescript-eslint/no-explicit-any
-    ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-header-brand', className), as: as, type: as === 'button' ? 'button' : undefined, onClick: onClick, ref: ref, ...rest },
-        logo ? (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-brand-icon', "aria-hidden": true }, logo)) : null,
-        children && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-header-brand-label' }, children))));
+  const {
+    className,
+    children,
+    logo,
+    onClick,
+    as = !!onClick ? 'button' : 'div', // eslint-disable-line @typescript-eslint/no-explicit-any
+    ...rest
+  } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-header-brand', className),
+      as: as,
+      type: as === 'button' ? 'button' : undefined,
+      onClick: onClick,
+      ref: ref,
+      ...rest,
+    },
+    logo
+      ? React.createElement(
+          index_js_1.Box,
+          {
+            as: 'span',
+            className: 'iui-header-brand-icon',
+            'aria-hidden': true,
+          },
+          logo,
+        )
+      : null,
+    children &&
+      React.createElement(
+        index_js_1.Box,
+        { as: 'span', className: 'iui-header-brand-label' },
+        children,
+      ),
+  );
 });
 exports.default = exports.HeaderLogo;

package/cjs/core/Header/HeaderSplitButton.js

@@ -1,54 +1,76 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.HeaderSplitButton = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../DropdownMenu/index.js");
-const index_js_2 = require("../utils/index.js");
-const HeaderBasicButton_js_1 = require("./HeaderBasicButton.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../DropdownMenu/index.js');
+const index_js_2 = require('../utils/index.js');
+const HeaderBasicButton_js_1 = require('./HeaderBasicButton.js');
 exports.HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
-    const { menuItems, className, menuPlacement = 'bottom-end', children, disabled, ...rest } = props;
-    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-    const [menuWidth, setMenuWidth] = React.useState(0);
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (ref.current) {
-            setMenuWidth(ref.current.offsetWidth);
-        }
-    }, [children]);
-    return (React.createElement(index_js_2.Box, { className: (0, classnames_1.default)('iui-header-breadcrumb-button-wrapper', className), ref: ref },
-        React.createElement(HeaderBasicButton_js_1.HeaderBasicButton, { ref: forwardedRef, disabled: disabled, ...rest }, children),
-        React.createElement(index_js_1.DropdownMenu, { placement: menuPlacement, menuItems: menuItems, style: { minWidth: menuWidth }, onShow: React.useCallback(() => setIsMenuOpen(true), []), onHide: React.useCallback(() => setIsMenuOpen(false), []) },
-            React.createElement(index_js_2.Box, { as: 'button', type: 'button', className: 'iui-header-breadcrumb-button iui-header-breadcrumb-button-split', disabled: disabled }, isMenuOpen ? (React.createElement(index_js_2.SvgCaretUpSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true })) : (React.createElement(index_js_2.SvgCaretDownSmall, { className: 'iui-header-breadcrumb-button-dropdown-icon', "aria-hidden": true }))))));
+  const {
+    menuItems,
+    className,
+    menuPlacement = 'bottom-end',
+    children,
+    disabled,
+    ...rest
+  } = props;
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [menuWidth, setMenuWidth] = React.useState(0);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current) {
+      setMenuWidth(ref.current.offsetWidth);
+    }
+  }, [children]);
+  return React.createElement(
+    index_js_2.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-header-breadcrumb-button-wrapper',
+        className,
+      ),
+      ref: ref,
+    },
+    React.createElement(
+      HeaderBasicButton_js_1.HeaderBasicButton,
+      { ref: forwardedRef, disabled: disabled, ...rest },
+      children,
+    ),
+    React.createElement(
+      index_js_1.DropdownMenu,
+      {
+        placement: menuPlacement,
+        menuItems: menuItems,
+        style: { minWidth: menuWidth },
+        onShow: React.useCallback(() => setIsMenuOpen(true), []),
+        onHide: React.useCallback(() => setIsMenuOpen(false), []),
+      },
+      React.createElement(
+        index_js_2.Box,
+        {
+          as: 'button',
+          type: 'button',
+          className:
+            'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
+          disabled: disabled,
+        },
+        isMenuOpen
+          ? React.createElement(index_js_2.SvgCaretUpSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            })
+          : React.createElement(index_js_2.SvgCaretDownSmall, {
+              className: 'iui-header-breadcrumb-button-dropdown-icon',
+              'aria-hidden': true,
+            }),
+      ),
+    ),
+  );
 });
 exports.default = exports.HeaderSplitButton;

package/cjs/core/Header/index.js

@@ -1,16 +1,40 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderBreadcrumbs = exports.HeaderLogo = exports.HeaderButton = exports.Header = void 0;
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.HeaderBreadcrumbs =
+  exports.HeaderLogo =
+  exports.HeaderButton =
+  exports.Header =
+    void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Header_js_1 = require("./Header.js");
-Object.defineProperty(exports, "Header", { enumerable: true, get: function () { return Header_js_1.Header; } });
+var Header_js_1 = require('./Header.js');
+Object.defineProperty(exports, 'Header', {
+  enumerable: true,
+  get: function () {
+    return Header_js_1.Header;
+  },
+});
 exports.default = './Header';
-var HeaderButton_js_1 = require("./HeaderButton.js");
-Object.defineProperty(exports, "HeaderButton", { enumerable: true, get: function () { return HeaderButton_js_1.HeaderButton; } });
-var HeaderLogo_js_1 = require("./HeaderLogo.js");
-Object.defineProperty(exports, "HeaderLogo", { enumerable: true, get: function () { return HeaderLogo_js_1.HeaderLogo; } });
-var HeaderBreadcrumbs_js_1 = require("./HeaderBreadcrumbs.js");
-Object.defineProperty(exports, "HeaderBreadcrumbs", { enumerable: true, get: function () { return HeaderBreadcrumbs_js_1.HeaderBreadcrumbs; } });
+var HeaderButton_js_1 = require('./HeaderButton.js');
+Object.defineProperty(exports, 'HeaderButton', {
+  enumerable: true,
+  get: function () {
+    return HeaderButton_js_1.HeaderButton;
+  },
+});
+var HeaderLogo_js_1 = require('./HeaderLogo.js');
+Object.defineProperty(exports, 'HeaderLogo', {
+  enumerable: true,
+  get: function () {
+    return HeaderLogo_js_1.HeaderLogo;
+  },
+});
+var HeaderBreadcrumbs_js_1 = require('./HeaderBreadcrumbs.js');
+Object.defineProperty(exports, 'HeaderBreadcrumbs', {
+  enumerable: true,
+  get: function () {
+    return HeaderBreadcrumbs_js_1.HeaderBreadcrumbs;
+  },
+});

package/cjs/core/InformationPanel/InformationPanel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type InformationPanelProps = {
+type InformationPanelProps = {
     /**
      * Is the panel open?
      * @default false