@canonical/react-components 1.6.0 → 1.7.0

package/dist/esm/components/NotificationProvider/types.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { ValueOf } from "../../types";
+import { NotificationSeverity } from "../Notification";
+export interface NotifyProviderProps {
+    state?: {
+        queuedNotification: NotificationType | null;
+    };
+    pathname?: string;
+    children: ReactNode;
+}
+export interface NotificationAction {
+    label: string;
+    onClick: () => void;
+}
+export interface NotificationType {
+    actions?: NotificationAction[];
+    message: ReactNode;
+    title?: string;
+    type: ValueOf<typeof NotificationSeverity>;
+}
+export interface QueuedNotification {
+    state?: {
+        queuedNotification: NotificationType | null;
+    };
+    pathname?: string;
+}
+export interface NotificationHelper {
+    notification: NotificationType | null;
+    clear: () => void;
+    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;
+    info: (message: ReactNode, title?: string) => NotificationType;
+    success: (message: ReactNode, title?: string) => NotificationType;
+    queue: (notification: NotificationType) => QueuedNotification;
+    setDeduplicated: (value: NotificationType) => NotificationType;
+}

package/dist/esm/components/NotificationProvider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Pagination/Pagination.d.ts

@@ -0,0 +1,102 @@
+import type { HTMLProps } from "react";
+import type { PropsWithSpread } from "../../types";
+type BaseProps = {
+    /**
+     * Whether to scroll to the top of the list on page change.
+     */
+    scrollToTop?: boolean;
+    /**
+     * The number of pages at which to truncate the pagination items.
+     */
+    truncateThreshold?: number;
+    /**
+     * Whether the pagination is ceneterd on the page.
+     */
+    centered?: boolean;
+    /**
+     * Whether to show the labels for forward and back buttons.
+     */
+    showLabels?: boolean;
+    /**
+     * Whether forward button is disabled.
+     */
+    forwardDisabled?: boolean;
+    /**
+     * Whether back button is disabled.
+     */
+    backDisabled?: boolean;
+    /**
+     * Custom label for forward button.
+     */
+    forwardLabel?: string;
+    /**
+     * Custom label for back button.
+     */
+    backLabel?: string;
+};
+type NumberedPagination = BaseProps & {
+    /**
+     * The current page being viewed.<br>
+     * **Required for Numbered Pagination.**
+     */
+    currentPage: number;
+    /**
+     * The number of items to show per page.<br>
+     * **Required for numbered pagination.**
+     */
+    itemsPerPage: number;
+    /**
+     * Function to handle paginating the items.<br>
+     * **Required for numbered pagination.**
+     */
+    paginate: (page: number) => void;
+    /**
+     * The total number of items.<br>
+     * **Required for numbered pagination.**
+     */
+    totalItems: number;
+    /**
+     * Whether to hide the pagination items.
+     */
+    hideNumbers?: boolean;
+    /**
+     * Function to handle page transition to a higher-numbered page for
+     * numbered pagination and to next page for buttons-only pagination.<br>
+     * _Called with page parameter for numbered pagination and_
+     * _with no parameter for buttons-only pagination._<br>
+     * **Required for buttons-only pagination.**
+     */
+    onForward?: (page: number) => void;
+    /**
+     * Function to handle page transition to a lower-numbered page for
+     * numbered pagination and to next page for buttons-only pagination.<br>
+     * _Called with page parameter for numbered pagination and_
+     * _with no parameter for buttons-only pagination._<br>
+     * **Required for buttons-only pagination.**
+     */
+    onBack?: (page: number) => void;
+};
+type ButtonsOnlyPagination = BaseProps & {
+    itemsPerPage?: never;
+    totalItems?: never;
+    currentPage?: never;
+    paginate?: never;
+    hideNumbers?: never;
+    onForward: () => void;
+    onBack: () => void;
+};
+export type Props = PropsWithSpread<NumberedPagination | ButtonsOnlyPagination, HTMLProps<HTMLElement>>;
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla [Pagination](https://docs.vanillaframework.io/patterns/pagination/).
+
+The pagination component should be used to navigate between pages of content. There are two types of pagination being provided:
+
+* **Numbered Pagination:** used when the total number of items is known.<br />
+  Depending on the length provided, the pagination component will automatically scale.<br />
+  **Required props:** itemsPerPage, totalItems, paginate, currentPage.
+
+* **Buttons-only Pagination:** used when the total number of items is unknown.<br />
+  **Required props:** onForward, onBack.
+ */
+declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, centered, showLabels, hideNumbers, onForward, onBack, forwardDisabled, backDisabled, forwardLabel, backLabel, ...navProps }: Props) => JSX.Element;
+export default Pagination;

package/dist/esm/components/Pagination/Pagination.js

@@ -0,0 +1,173 @@
+var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold", "centered", "showLabels", "hideNumbers", "onForward", "onBack", "forwardDisabled", "backDisabled", "forwardLabel", "backLabel"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+import PaginationButton from "./PaginationButton";
+import PaginationItem from "./PaginationItem";
+var scrollTop = () => window.scrollTo(0, 0);
+var generatePaginationItems = (pageNumbers, currentPage, truncateThreshold, changePage) => {
+  var lastPage = pageNumbers.length;
+  var truncated = lastPage > truncateThreshold;
+  var visiblePages;
+  if (truncated) {
+    // the default range for pages outside the start and end threshold
+    var start = currentPage - 2;
+    var end = currentPage + 1;
+    // on page 1, also show pages 2, 3 and 4
+    if (currentPage === 1) {
+      start = 1;
+      end = Math.min(lastPage - 1, currentPage + 3);
+    }
+    // on page 2, show page 1, and also pages 3, and 4
+    if (currentPage === 2) {
+      start = 1;
+      end = Math.min(lastPage - 1, currentPage + 3);
+    }
+    // on the last page and page before last, also show the 3 previous pages
+    if (currentPage === lastPage || currentPage === lastPage - 1) {
+      start = Math.max(1, lastPage - 4);
+      end = lastPage - 1;
+    }
+    visiblePages = pageNumbers.slice(start, end);
+  } else {
+    visiblePages = pageNumbers;
+  }
+  var items = [];
+  if (truncated) {
+    // render first in sequence
+    items.push( /*#__PURE__*/React.createElement(PaginationItem, {
+      key: 1,
+      number: 1,
+      isActive: currentPage === 1,
+      onClick: () => changePage(1)
+    }));
+    if (!visiblePages.includes(2)) {
+      items.push( /*#__PURE__*/React.createElement(PaginationItemSeparator, {
+        key: "sep1"
+      }));
+    }
+  }
+  items.push(visiblePages.map(number => /*#__PURE__*/React.createElement(PaginationItem, {
+    key: number,
+    number: number,
+    isActive: number === currentPage,
+    onClick: () => changePage(number)
+  })));
+  if (truncated) {
+    // render last in sequence
+    if (!visiblePages.includes(lastPage - 1)) {
+      items.push( /*#__PURE__*/React.createElement(PaginationItemSeparator, {
+        key: "sep2"
+      }));
+    }
+    items.push( /*#__PURE__*/React.createElement(PaginationItem, {
+      key: lastPage,
+      number: lastPage,
+      isActive: currentPage === lastPage,
+      onClick: () => changePage(lastPage)
+    }));
+  }
+  return items;
+};
+var PaginationItemSeparator = () => /*#__PURE__*/React.createElement("li", {
+  className: "p-pagination__item p-pagination__item--truncation"
+}, "\u2026");
+
+// Props that are used in both types of paginations.
+
+// Used when number of items per page, number of total items,
+// current page and paginate function is defined. Pagination
+// is handled by paginate function and optional onForward and
+// onBack functions.
+
+// Used when number of items per page, number of total items,
+// current page and paginate function are undefined.
+// Pagination is handled by onForward and onBack function.
+
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla [Pagination](https://docs.vanillaframework.io/patterns/pagination/).
+
+The pagination component should be used to navigate between pages of content. There are two types of pagination being provided:
+
+* **Numbered Pagination:** used when the total number of items is known.<br />
+  Depending on the length provided, the pagination component will automatically scale.<br />
+  **Required props:** itemsPerPage, totalItems, paginate, currentPage.
+
+* **Buttons-only Pagination:** used when the total number of items is unknown.<br />
+  **Required props:** onForward, onBack.
+ */
+var Pagination = _ref => {
+  var {
+      itemsPerPage,
+      totalItems,
+      paginate,
+      currentPage,
+      scrollToTop,
+      truncateThreshold = 10,
+      centered,
+      showLabels,
+      hideNumbers,
+      onForward,
+      onBack,
+      forwardDisabled,
+      backDisabled,
+      forwardLabel,
+      backLabel
+    } = _ref,
+    navProps = _objectWithoutProperties(_ref, _excluded);
+  var isNumberedPagination = !!itemsPerPage && !!totalItems && !!currentPage && !!paginate;
+  var pageNumbers = [];
+  if (isNumberedPagination) {
+    // return early if no pagination is required
+    if (totalItems <= itemsPerPage) {
+      return null;
+    }
+    for (var i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
+      pageNumbers.push(i);
+    }
+  }
+  var changeNumberedPage = page => {
+    paginate(page);
+    if (page > currentPage) {
+      onForward === null || onForward === void 0 || onForward(page);
+    }
+    if (page < currentPage) {
+      onBack === null || onBack === void 0 || onBack(page);
+    }
+    scrollToTop && scrollTop();
+  };
+  var changeButtonsOnlyPage = direction => {
+    if (direction === "forward") {
+      onForward === null || onForward === void 0 || onForward(undefined);
+    }
+    if (direction === "back") {
+      onBack === null || onBack === void 0 || onBack(undefined);
+    }
+    scrollToTop && scrollTop();
+  };
+  return /*#__PURE__*/React.createElement("nav", _extends({
+    className: "p-pagination",
+    "aria-label": "Pagination"
+  }, navProps), /*#__PURE__*/React.createElement("ol", {
+    className: classNames("p-pagination__items", {
+      "u-align--center": centered
+    })
+  }, /*#__PURE__*/React.createElement(PaginationButton, {
+    key: "back",
+    direction: "back",
+    disabled: backDisabled || currentPage === 1,
+    onClick: () => isNumberedPagination ? changeNumberedPage(currentPage - 1) : changeButtonsOnlyPage("back"),
+    showLabel: showLabels,
+    label: backLabel
+  }), isNumberedPagination && !hideNumbers ? generatePaginationItems(pageNumbers, currentPage, truncateThreshold, changeNumberedPage) : null, /*#__PURE__*/React.createElement(PaginationButton, {
+    key: "forward",
+    direction: "forward",
+    disabled: forwardDisabled || currentPage === pageNumbers.length,
+    onClick: () => isNumberedPagination ? changeNumberedPage(currentPage + 1) : changeButtonsOnlyPage("forward"),
+    showLabel: showLabels,
+    label: forwardLabel
+  })));
+};
+export default Pagination;

package/dist/esm/components/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Pagination from "./Pagination";
+declare const meta: Meta<typeof Pagination>;
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;
+export declare const TruncatedNumberedPagination: Story;
+export declare const DisabledControlsNumberedPagination: Story;
+export declare const CenteredNumberedPagination: Story;
+export declare const DisabledPaginationItemsNumberedPagination: Story;
+export declare const DefaultButtonsOnlyPagination: Story;
+export declare const DefaultButtonLabelsButtonsOnlyPagination: Story;
+export declare const CustomButtonLabelsButtonsOnlyPagination: Story;
+export declare const CenteredButtonsOnlyPagination: Story;

package/dist/esm/components/Pagination/Pagination.stories.js

@@ -0,0 +1,87 @@
+import React from "react";
+import Pagination from "./Pagination";
+var meta = {
+  component: Pagination,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    itemsPerPage: 20,
+    totalItems: 100,
+    paginate: () => {},
+    currentPage: 3
+  }
+};
+export var TruncatedNumberedPagination = {
+  render: () => /*#__PURE__*/React.createElement(Pagination, {
+    itemsPerPage: 10,
+    totalItems: 1000,
+    paginate: () => {},
+    currentPage: 34
+  }),
+  name: "Truncated (Numbered Pagination)"
+};
+export var DisabledControlsNumberedPagination = {
+  render: () => /*#__PURE__*/React.createElement(Pagination, {
+    itemsPerPage: 20,
+    totalItems: 100,
+    paginate: () => {},
+    currentPage: 1
+  }),
+  name: "Disabled controls (Numbered Pagination)"
+};
+export var CenteredNumberedPagination = {
+  render: () => /*#__PURE__*/React.createElement(Pagination, {
+    itemsPerPage: 10,
+    totalItems: 50,
+    paginate: () => {},
+    currentPage: 1,
+    centered: true
+  }),
+  name: "Centered (Numbered Pagination)"
+};
+export var DisabledPaginationItemsNumberedPagination = {
+  render: () => /*#__PURE__*/React.createElement(Pagination, {
+    itemsPerPage: 10,
+    totalItems: 50,
+    paginate: () => {},
+    currentPage: 1,
+    hideNumbers: true
+  }),
+  name: "Disabled pagination items (Numbered Pagination)"
+};
+export var DefaultButtonsOnlyPagination = {
+  render: () => /*#__PURE__*/React.createElement(Pagination, {
+    onForward: () => {},
+    onBack: () => {}
+  }),
+  name: "Default (Buttons-only Pagination)"
+};
+export var DefaultButtonLabelsButtonsOnlyPagination = {
+  render: () => /*#__PURE__*/React.createElement(Pagination, {
+    onForward: () => {},
+    onBack: () => {},
+    showLabels: true
+  }),
+  name: "Default button labels (Buttons-only Pagination)"
+};
+export var CustomButtonLabelsButtonsOnlyPagination = {
+  render: () => /*#__PURE__*/React.createElement(Pagination, {
+    onForward: () => {},
+    onBack: () => {},
+    showLabels: true,
+    forwardLabel: "Custom forward label",
+    backLabel: "Custom back label"
+  }),
+  name: "Custom button labels (Buttons-only Pagination)"
+};
+export var CenteredButtonsOnlyPagination = {
+  render: () => /*#__PURE__*/React.createElement(Pagination, {
+    onForward: () => {},
+    onBack: () => {},
+    centered: true
+  }),
+  name: "Centered (Buttons-only Pagination)"
+};

package/dist/esm/components/Pagination/Pagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Pagination/PaginationButton/PaginationButton.d.ts

@@ -0,0 +1,30 @@
+import type { MouseEventHandler } from "react";
+export declare enum Label {
+    Next = "Next page",
+    Previous = "Previous page"
+}
+export type PaginationDirection = "forward" | "back";
+export type Props = {
+    /**
+     * The direction of the pagination.
+     */
+    direction: PaginationDirection;
+    /**
+     * Whether the pagination button should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Function to handle clicking the pagination button.
+     */
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Whether to show the label for button.
+     */
+    showLabel?: boolean;
+    /**
+     * Custom label for button.
+     */
+    label?: string;
+};
+declare const PaginationButton: ({ direction, onClick, disabled, showLabel, label, }: Props) => JSX.Element;
+export default PaginationButton;

package/dist/esm/components/Pagination/PaginationButton/PaginationButton.js

@@ -0,0 +1,31 @@
+import classNames from "classnames";
+import React from "react";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Next"] = "Next page";
+  Label["Previous"] = "Previous page";
+  return Label;
+}({});
+var PaginationButton = _ref => {
+  var {
+    direction,
+    onClick,
+    disabled = false,
+    showLabel,
+    label
+  } = _ref;
+  var buttonLabel = label || (direction === "back" ? Label.Previous : Label.Next);
+  return /*#__PURE__*/React.createElement("li", {
+    className: "p-pagination__item"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: classNames({
+      "p-pagination__link--previous": direction === "back",
+      "p-pagination__link--next": direction === "forward"
+    }),
+    disabled: disabled,
+    onClick: onClick,
+    type: "button"
+  }, direction === "forward" && showLabel && /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement("i", {
+    className: "p-icon--chevron-down"
+  }, buttonLabel), direction === "back" && showLabel && /*#__PURE__*/React.createElement("span", null, buttonLabel)));
+};
+export default PaginationButton;

package/dist/esm/components/Pagination/PaginationButton/PaginationButton.test.d.ts

@@ -0,0 +1,4 @@
+export declare enum CustomLabel {
+    Next = "Custom forward label",
+    Previous = "Custom back label"
+}

package/dist/esm/components/Pagination/PaginationButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./PaginationButton";
+export type { Props as PaginationButtonProps } from "./PaginationButton";

package/dist/esm/components/Pagination/PaginationButton/index.js

@@ -0,0 +1 @@
+export { default } from "./PaginationButton";

package/dist/esm/components/Pagination/PaginationItem/PaginationItem.d.ts

@@ -0,0 +1,17 @@
+import type { MouseEventHandler } from "react";
+export type Props = {
+    /**
+     * Whether the pagination item is active, i.e. the current page is this page.
+     */
+    isActive?: boolean;
+    /**
+     * The page number.
+     */
+    number: number;
+    /**
+     * Function to handle clicking the pagination item.
+     */
+    onClick: MouseEventHandler<HTMLButtonElement>;
+};
+declare const PaginationItem: ({ number, onClick, isActive, }: Props) => JSX.Element;
+export default PaginationItem;

package/dist/esm/components/Pagination/PaginationItem/PaginationItem.js

@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import React from "react";
+var PaginationItem = _ref => {
+  var {
+    number,
+    onClick,
+    isActive = false
+  } = _ref;
+  return /*#__PURE__*/React.createElement("li", {
+    className: "p-pagination__item"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: classNames("p-pagination__link", {
+      "is-active": isActive
+    }),
+    onClick: onClick,
+    "aria-current": isActive ? "page" : undefined,
+    type: "button"
+  }, number));
+};
+export default PaginationItem;

package/dist/esm/components/Pagination/PaginationItem/PaginationItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Pagination/PaginationItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./PaginationItem";
+export type { Props as PaginationItemProps } from "./PaginationItem";

package/dist/esm/components/Pagination/PaginationItem/index.js

@@ -0,0 +1 @@
+export { default } from "./PaginationItem";

package/dist/esm/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Pagination";
+export type { Props as PaginationProps } from "./Pagination";

package/dist/esm/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default } from "./Pagination";

package/dist/esm/components/Panel/Panel.d.ts

@@ -0,0 +1,123 @@
+import React from "react";
+import type { PropsWithSpread } from "../../types";
+import type { ComponentType, ElementType, HTMLProps, PropsWithChildren, ReactNode } from "react";
+import type { ExclusiveProps } from "../../types";
+export type LogoDefaultElement = HTMLProps<HTMLAnchorElement>;
+type PanelLogo<L = LogoDefaultElement> = ReactNode | PropsWithSpread<{
+    /**
+     * The url of the icon image.
+     */
+    icon: string;
+    /**
+     * The alt text for the icon image.
+     */
+    iconAlt?: string;
+    /**
+     * The url of the name image.
+     */
+    name: string;
+    /**
+     * The alt text for the name image.
+     */
+    nameAlt?: string;
+    /**
+     * The element or component to use for displaying the logo e.g. `a` or `NavLink`.
+     * @default a
+     */
+    component?: ElementType | ComponentType<L>;
+}, L>;
+type PanelToggle = {
+    /**
+     * The panel toggle label.
+     */
+    label: string;
+    /**
+     * The function to call when clicking the panel toggle.
+     */
+    onClick: () => void;
+};
+type LogoProps<L = LogoDefaultElement> = {
+    /**
+     * The panel logo content or attributes.
+     */
+    logo?: PanelLogo<L>;
+};
+type TitleProps = {
+    /**
+     * The panel title.
+     */
+    title: ReactNode;
+    /**
+     * Classes to apply to the title element.
+     */
+    titleClassName?: string;
+    /**
+     * The element to use for the panel title e.g. `h1`.
+     * @default h4
+     */
+    titleComponent?: ElementType;
+    /**
+     * An ID for the title element.
+     */
+    titleId?: string;
+};
+type HeaderProps<L = LogoDefaultElement> = ExclusiveProps<{
+    /**
+     * This prop can be used to replace the header area of the panel when the default implementation is not sufficient.
+     */
+    header: ReactNode;
+}, {
+    /**
+     * Content that will be displayed in the controls area.
+     */
+    controls?: ReactNode;
+    /**
+     * Classes that will be applied to the controls element.
+     */
+    controlsClassName?: string;
+    /**
+     * Whether the header should be sticky.
+     */
+    stickyHeader?: boolean;
+    /**
+     * The panel toggle attributes.
+     */
+    toggle?: PanelToggle;
+} & ExclusiveProps<LogoProps<L>, TitleProps>>;
+export type Props<L = LogoDefaultElement> = {
+    /**
+     * The panel content.
+     */
+    children?: PropsWithChildren["children"];
+    /**
+     * Classes that are applied to the content container (when using `wrapContent`).
+     */
+    contentClassName?: string | null;
+    /**
+     * Classes that are applied to the top level panel element.
+     */
+    className?: string | null;
+    /**
+     * Whether to use the dark theme.
+     */
+    dark?: boolean;
+    /**
+     * Whether the panel should wrap the content in the `p-panel__content` element.
+     * @default true
+     */
+    wrapContent?: boolean;
+    /**
+     * A ref to pass to the top level panel element.
+     */
+    forwardRef?: React.Ref<HTMLDivElement> | null;
+} & HeaderProps<L>;
+/**
+ * This is a [React](https://reactjs.org/) component for panels in the
+ * [Vanilla](https://vanillaframework.io/docs/) layouts.
+ *
+ * The Panel component can be used in many areas of the application layout. It
+ * can be the child element of `AppAside`, `AppMain`, `AppNavigation`, `AppNavigationBar`
+ * and `AppStatus`.
+ */
+declare const Panel: <L = LogoDefaultElement>({ forwardRef, children, className, contentClassName, controlsClassName, controls, dark, header, logo, stickyHeader, title, titleClassName, titleComponent: TitleComponent, titleId, toggle, wrapContent, ...props }: Props<L>) => React.JSX.Element;
+export default Panel;