snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)

packages/excalidraw/components/TTDDialog/TTDDialogPanel.tsx

@@ -0,0 +1,124 @@
+import clsx from "clsx";
+
+import { Fragment } from "react";
+
+import { Button } from "../Button";
+import Spinner from "../Spinner";
+
+import type { ReactNode } from "react";
+
+export type TTDPanelAction = {
+  label: string;
+  action?: () => void;
+  icon?: ReactNode;
+  variant: "button" | "link" | "rateLimit";
+  disabled?: boolean;
+  className?: string;
+};
+
+interface TTDDialogPanelProps {
+  label?: string | ReactNode;
+  children: ReactNode;
+  panelActions?: TTDPanelAction[];
+  onTextSubmitInProgess?: boolean;
+  renderTopRight?: () => ReactNode;
+  renderSubmitShortcut?: () => ReactNode;
+  className?: string;
+  panelActionJustifyContent?:
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-between"
+    | "space-around"
+    | "space-evenly";
+}
+
+export const TTDDialogPanel = ({
+  label,
+  children,
+  panelActions = [],
+  onTextSubmitInProgess,
+  renderTopRight,
+  renderSubmitShortcut,
+  className,
+  panelActionJustifyContent = "flex-start",
+}: TTDDialogPanelProps) => {
+  const renderPanelAction = (panelAction: TTDPanelAction) => {
+    if (panelAction?.variant === "link") {
+      return (
+        <button
+          className={clsx(
+            "ttd-dialog-panel-action-link",
+            panelAction.className,
+          )}
+          onClick={panelAction.action}
+          disabled={panelAction?.disabled || onTextSubmitInProgess}
+          type="button"
+        >
+          {panelAction.label}
+          {panelAction.icon && (
+            <span className="ttd-dialog-panel-action-link__icon">
+              {panelAction.icon}
+            </span>
+          )}
+        </button>
+      );
+    }
+
+    if (panelAction?.variant === "button") {
+      return (
+        <Button
+          className={clsx("ttd-dialog-panel-button", panelAction.className)}
+          onSelect={panelAction.action ? panelAction.action : () => {}}
+          disabled={panelAction?.disabled || onTextSubmitInProgess}
+        >
+          <div className={clsx({ invisible: onTextSubmitInProgess })}>
+            {panelAction?.label}
+            {panelAction?.icon && <span>{panelAction.icon}</span>}
+          </div>
+          {onTextSubmitInProgess && <Spinner />}
+        </Button>
+      );
+    }
+
+    if (panelAction?.variant === "rateLimit") {
+      return (
+        <div
+          className={clsx(
+            "ttd-dialog-panel__rate-limit",
+            panelAction.className,
+          )}
+        >
+          {panelAction.label}
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div className={clsx("ttd-dialog-panel", className)}>
+      {(label || renderTopRight) && (
+        <div className="ttd-dialog-panel__header">
+          {typeof label === "string" ? <label>{label}</label> : label}
+          {renderTopRight?.()}
+        </div>
+      )}
+      {children}
+      <div
+        className={clsx("ttd-dialog-panel-button-container", {
+          invisible: !panelActions.length,
+        })}
+        style={{
+          justifyContent: panelActionJustifyContent,
+        }}
+      >
+        {panelActions.filter(Boolean).map((panelAction) => (
+          <Fragment key={panelAction.label}>
+            {renderPanelAction(panelAction)}
+          </Fragment>
+        ))}
+        {!onTextSubmitInProgess && renderSubmitShortcut?.()}
+      </div>
+    </div>
+  );
+};