@deck.gl-community/widgets 9.3.1-alpha.0 → 9.3.1

package/dist/widgets/settings-widget.js

@@ -1,148 +0,0 @@
-var _a;
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-/** @jsxImportSource preact */
-import { Widget } from '@deck.gl/core';
-import { render } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { SettingsPanelContent } from "../widget-panels/settings-panel.js";
-import { IconButton, makeTextIcon } from "../widget-components/icon-button.js";
-const PANE_STYLE = {
-    position: 'absolute',
-    top: 'calc(100% + 8px)',
-    left: 0,
-    width: '380px',
-    maxHeight: 'min(460px, calc(100vh - 60px))',
-    borderRadius: '8px',
-    border: '1px solid rgba(71, 85, 105, 0.55)',
-    background: 'rgba(15, 23, 42, 0.94)',
-    color: 'rgba(241, 245, 249, 0.98)',
-    boxShadow: '0 12px 32px rgba(2, 6, 23, 0.55)',
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    pointerEvents: 'auto',
-    zIndex: 20,
-    '--button-background': 'rgba(30, 41, 59, 0.92)',
-    '--button-background-hover': 'rgba(15, 23, 42, 0.9)',
-    '--button-inner-stroke': '1px solid rgba(100, 116, 139, 0.72)',
-    '--button-corner-radius': '8px',
-    '--button-text': 'rgba(241, 245, 249, 0.98)',
-    '--button-icon-idle': 'rgba(203, 213, 225, 0.92)',
-    '--button-icon-hover': 'rgba(125, 211, 252, 0.98)',
-    '--button-backdrop-filter': 'blur(10px)',
-    '--container-background': 'rgba(15, 23, 42, 0.98)',
-    '--menu-item-hover': 'rgba(51, 65, 85, 0.82)'
-};
-const HEADER_STYLE = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderBottom: '1px solid rgba(100, 116, 139, 0.45)',
-    padding: '10px 12px'
-};
-const SETTINGS_BUTTON_ICON = makeTextIcon('⚙', 24, 36);
-function stopPropagation(event) {
-    event.stopPropagation();
-}
-const DEFAULT_SETTINGS_WIDGET_SCHEMA = { sections: [] };
-const DEFAULT_SETTINGS_WIDGET_STATE = {};
-function SettingsWidgetView({ label, schema, settings, onSettingsChange }) {
-    const containerRef = useRef(null);
-    const [isPaneOpen, setIsPaneOpen] = useState(false);
-    useEffect(() => {
-        if (isPaneOpen && typeof document !== 'undefined') {
-            const handleDocumentPointerDown = (event) => {
-                if (!containerRef.current || !event.target) {
-                    return;
-                }
-                if (!containerRef.current.contains(event.target)) {
-                    setIsPaneOpen(false);
-                }
-            };
-            document.addEventListener('pointerdown', handleDocumentPointerDown);
-            return () => {
-                document.removeEventListener('pointerdown', handleDocumentPointerDown);
-            };
-        }
-        return undefined;
-    }, [isPaneOpen]);
-    return (_jsxs("div", { ref: containerRef, style: { position: 'relative', pointerEvents: 'auto' }, children: [_jsx(IconButton, { icon: SETTINGS_BUTTON_ICON, title: label, className: isPaneOpen ? 'deck-widget-button-active' : '', onClick: () => setIsPaneOpen((previous) => !previous) }), isPaneOpen && (_jsxs("div", { role: "dialog", "aria-label": schema.title ?? label, style: PANE_STYLE, onPointerDown: (event) => stopPropagation(event), onMouseDown: (event) => stopPropagation(event), onWheel: (event) => stopPropagation(event), onClick: (event) => stopPropagation(event), children: [_jsxs("div", { style: HEADER_STYLE, children: [_jsx("div", { style: { fontSize: '13px', fontWeight: 700 }, children: schema.title ?? label }), _jsx("button", { type: "button", onClick: () => setIsPaneOpen(false), style: {
-                                    border: 0,
-                                    borderRadius: '4px',
-                                    padding: '2px 6px',
-                                    background: 'rgba(51, 65, 85, 0.8)',
-                                    color: 'inherit',
-                                    cursor: 'pointer',
-                                    fontSize: '14px',
-                                    lineHeight: 1
-                                }, title: "Close settings", "aria-label": "Close settings", children: "\u00D7" })] }), _jsx(SettingsPanelContent, { schema: schema, settings: settings, onSettingsChange: onSettingsChange })] }))] }));
-}
-export class SettingsWidget extends Widget {
-    static defaultProps = {
-        ...Widget.defaultProps,
-        id: 'settings',
-        placement: 'top-left',
-        label: 'Settings',
-        schema: DEFAULT_SETTINGS_WIDGET_SCHEMA,
-        settings: DEFAULT_SETTINGS_WIDGET_STATE,
-        onSettingsChange: undefined
-    };
-    className = 'deck-widget-settings';
-    placement = _a.defaultProps.placement;
-    #label = _a.defaultProps.label;
-    #schema = _a.defaultProps.schema;
-    #settings = _a.defaultProps.settings;
-    #onSettingsChange = _a.defaultProps.onSettingsChange;
-    #rootElement = null;
-    constructor(props = {}) {
-        super({ ..._a.defaultProps, ...props });
-        if (props.placement !== undefined) {
-            this.placement = props.placement;
-        }
-        if (props.label !== undefined) {
-            this.#label = props.label;
-        }
-        if (props.schema !== undefined) {
-            this.#schema = props.schema;
-        }
-        if (props.settings !== undefined) {
-            this.#settings = props.settings;
-        }
-        if (props.onSettingsChange !== undefined) {
-            this.#onSettingsChange = props.onSettingsChange;
-        }
-    }
-    setProps(props) {
-        if (props.placement !== undefined) {
-            this.placement = props.placement;
-        }
-        if (props.label !== undefined) {
-            this.#label = props.label;
-        }
-        if (props.schema !== undefined) {
-            this.#schema = props.schema;
-        }
-        if (props.settings !== undefined) {
-            this.#settings = props.settings;
-        }
-        if (props.onSettingsChange !== undefined) {
-            this.#onSettingsChange = props.onSettingsChange;
-        }
-        super.setProps(props);
-    }
-    onRenderHTML(rootElement) {
-        this.#rootElement = rootElement;
-        const className = ['deck-widget', this.className, this.props.className]
-            .filter(Boolean)
-            .join(' ');
-        rootElement.className = className;
-        render(_jsx(SettingsWidgetView, { label: this.#label, schema: this.#schema, settings: this.#settings, onSettingsChange: this.#onSettingsChange }), rootElement);
-    }
-    onRemove() {
-        if (this.#rootElement) {
-            render(null, this.#rootElement);
-        }
-    }
-}
-_a = SettingsWidget;
-//# sourceMappingURL=settings-widget.js.map

package/dist/widgets/settings-widget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"settings-widget.js","sourceRoot":"","sources":["../../src/widgets/settings-widget.tsx"],"names":[],"mappings":"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"}

package/src/widgets/keyboard-shortcuts-widget.tsx

@@ -1,245 +0,0 @@
-/** @jsxImportSource preact */
-import {Widget} from '@deck.gl/core';
-import {render} from 'preact';
-import {useState} from 'preact/hooks';
-
-import {formatKey} from '../keyboard-shortcuts/keyboard-shortcuts';
-import {KeyboardShortcutsManager} from '../keyboard-shortcuts/keyboard-shortcuts-manager';
-
-import type {KeyboardShortcut} from '../keyboard-shortcuts/keyboard-shortcuts';
-import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
-import type {JSX} from 'preact';
-
-export type KeyboardShortcutsWidgetProps = WidgetProps & {
-  placement?: WidgetPlacement;
-  keyboardShortcuts: KeyboardShortcut[];
-  installShortcuts?: boolean;
-};
-
-export class KeyboardShortcutsWidget extends Widget<KeyboardShortcutsWidgetProps> {
-  static override defaultProps = {
-    ...Widget.defaultProps,
-    id: 'keyboard-bindings',
-    placement: 'top-left',
-    keyboardShortcuts: []
-  } satisfies Required<WidgetProps> &
-    Required<Pick<KeyboardShortcutsWidgetProps, 'placement' | 'keyboardShortcuts'>> &
-    KeyboardShortcutsWidgetProps;
-
-  className = 'deck-widget-keyboard-bindings';
-  placement: WidgetPlacement = KeyboardShortcutsWidget.defaultProps.placement;
-
-  #rootElement: HTMLElement | null = null;
-  #keyboardShortcuts: KeyboardShortcut[] = KeyboardShortcutsWidget.defaultProps.keyboardShortcuts;
-  #keyboardShortcutsManager: KeyboardShortcutsManager | null = null;
-
-  constructor(props: KeyboardShortcutsWidgetProps) {
-    super({...KeyboardShortcutsWidget.defaultProps, ...props});
-    this.#keyboardShortcuts = props.keyboardShortcuts;
-    if (props.placement !== undefined) {
-      this.placement = props.placement;
-    }
-  }
-
-  override setProps(props: Partial<KeyboardShortcutsWidgetProps>): void {
-    if (props.keyboardShortcuts !== undefined) {
-      this.#keyboardShortcuts = props.keyboardShortcuts;
-    }
-    if (props.placement !== undefined) {
-      this.placement = props.placement;
-    }
-    super.setProps(props);
-  }
-
-  override onAdd(): void {
-    // @ts-expect-error Accessing protected member 'eventManager'.
-    const eventManager = this.deck?.eventManager;
-    if (eventManager && this.props.installShortcuts) {
-      this.#keyboardShortcutsManager = new KeyboardShortcutsManager(
-        eventManager,
-        this.#keyboardShortcuts
-      );
-      this.#keyboardShortcutsManager.start();
-    }
-  }
-
-  override onRenderHTML(rootElement: HTMLElement): void {
-    this.#rootElement = rootElement;
-
-    const className = ['deck-widget', this.className, this.props.className]
-      .filter(Boolean)
-      .join(' ');
-    rootElement.className = className;
-
-    render(
-      <KeyboardShortcutsWidgetView keyboardShortcuts={this.#keyboardShortcuts} />,
-      rootElement
-    );
-  }
-
-  override onRemove(): void {
-    if (this.#rootElement) {
-      render(null, this.#rootElement);
-    }
-    if (this.#keyboardShortcutsManager) {
-      this.#keyboardShortcutsManager.stop();
-      this.#keyboardShortcutsManager = null;
-    }
-  }
-}
-
-const MODAL_BACKDROP_STYLE: JSX.CSSProperties = {
-  position: 'fixed',
-  inset: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: 'rgba(15, 23, 42, 0.28)',
-  pointerEvents: 'auto',
-  zIndex: 1000
-};
-
-const MODAL_STYLE: JSX.CSSProperties = {
-  width: 'min(420px, calc(100vw - 24px))',
-  maxHeight: 'min(460px, calc(100vh - 24px))',
-  borderRadius: '10px',
-  border: '1px solid rgba(148, 163, 184, 0.75)',
-  backgroundColor: 'rgba(255, 255, 255, 0.98)',
-  boxShadow: '0 14px 40px rgba(15, 23, 42, 0.28)',
-  display: 'flex',
-  flexDirection: 'column',
-  overflow: 'hidden'
-};
-
-const KEY_STYLE: JSX.CSSProperties = {
-  borderRadius: '6px',
-  border: '1px solid rgba(148, 163, 184, 0.85)',
-  backgroundColor: 'rgba(248, 250, 252, 1)',
-  padding: '2px 8px',
-  fontSize: '11px',
-  color: 'rgb(51, 65, 85)',
-  whiteSpace: 'nowrap'
-};
-
-function KeyboardShortcutsWidgetView({keyboardShortcuts}: {keyboardShortcuts: KeyboardShortcut[]}) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <div className="deck-widget-button">
-        <button
-          className="deck-widget-icon-button"
-          type="button"
-          title="Keyboard shortcuts"
-          aria-label="Keyboard shortcuts"
-          onClick={() => setIsOpen(true)}
-        >
-          <span
-            style={{
-              fontSize: '12px',
-              fontWeight: 700,
-              color: 'var(--deck-widget-icon-color, #0f172a)'
-            }}
-          >
-            <kbd
-              style={{
-                color: 'var(--deck-widget-icon-color, #0f172a)'
-              }}
-            >
-              ?
-            </kbd>
-          </span>
-        </button>
-      </div>
-
-      {isOpen && (
-        <div style={MODAL_BACKDROP_STYLE} onClick={() => setIsOpen(false)}>
-          <div
-            style={MODAL_STYLE}
-            role="dialog"
-            aria-label="Keyboard Shortcuts"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <div
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                borderBottom: '1px solid rgba(226, 232, 240, 1)',
-                padding: '10px 12px'
-              }}
-            >
-              <div style={{fontSize: '14px', fontWeight: 700, color: 'rgb(30, 41, 59)'}}>
-                Keyboard Shortcuts
-              </div>
-              <button
-                type="button"
-                onClick={() => setIsOpen(false)}
-                style={{
-                  border: 0,
-                  background: 'transparent',
-                  color: 'rgb(71, 85, 105)',
-                  cursor: 'pointer',
-                  fontSize: '18px',
-                  lineHeight: '18px'
-                }}
-                aria-label="Close keyboard shortcuts"
-                title="Close"
-              >
-                ×
-              </button>
-            </div>
-
-            <div style={{overflowY: 'auto', padding: '10px 12px'}}>
-              <div style={{display: 'grid', gap: '8px'}}>
-                {keyboardShortcuts.map((shortcut, index) => (
-                  <div
-                    key={`${shortcut.name}-${shortcut.key}-${index}`}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      gap: '8px'
-                    }}
-                  >
-                    <ShortcutKey shortcut={shortcut} />
-                    <span style={{fontSize: '12px', color: 'rgb(71, 85, 105)'}}>
-                      {shortcut.name}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
-function ShortcutKey({shortcut}: {shortcut: KeyboardShortcut}) {
-  return (
-    <div style={{color: 'rgb(51, 65, 85)', fontSize: '11px'}}>
-      {shortcut.commandKey && (
-        <span>
-          <kbd style={KEY_STYLE}>⌘</kbd>
-          {' + '}
-        </span>
-      )}
-      {shortcut.ctrlKey && (
-        <span>
-          <kbd style={KEY_STYLE}>^</kbd>
-          {' + '}
-        </span>
-      )}
-      {shortcut.shiftKey && (
-        <span>
-          <kbd style={KEY_STYLE}>Shift</kbd>
-          {' + '}
-        </span>
-      )}
-      {shortcut.key && <kbd style={KEY_STYLE}>{formatKey(shortcut.key)}</kbd>}
-      {shortcut.dragMouse && 'drag mouse'}
-    </div>
-  );
-}

package/src/widgets/settings-widget.tsx

@@ -1,277 +0,0 @@
-/** @jsxImportSource preact */
-import {Widget} from '@deck.gl/core';
-import {render} from 'preact';
-import {useEffect, useRef, useState} from 'preact/hooks';
-
-import {SettingsPanelContent} from '../widget-panels/settings-panel';
-import {IconButton, makeTextIcon} from '../widget-components/icon-button';
-
-import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
-import type {JSX} from 'preact';
-
-export type SettingsWidgetValue = boolean | number | string;
-
-export type SettingsWidgetSettingType = 'boolean' | 'number' | 'string' | 'select';
-
-export type SettingsWidgetOption =
-  | SettingsWidgetValue
-  | {
-      label: string;
-      value: SettingsWidgetValue;
-    };
-
-export type SettingsWidgetSettingDescriptor = {
-  /** Path in the settings object (dot notation supported). */
-  name: string;
-  /** Human-friendly label shown in the control list. Defaults to `name`. */
-  label?: string;
-  description?: string;
-  type: SettingsWidgetSettingType;
-  min?: number;
-  max?: number;
-  step?: number;
-  options?: SettingsWidgetOption[];
-  defaultValue?: SettingsWidgetValue;
-};
-
-export type SettingsWidgetSectionDescriptor = {
-  /** Optional stable id for preserving collapse state across re-renders. */
-  id?: string;
-  name: string;
-  description?: string;
-  /** Whether this section starts collapsed when first seen. Defaults to true. */
-  initiallyCollapsed?: boolean;
-  settings: SettingsWidgetSettingDescriptor[];
-};
-
-export type SettingsWidgetSchema = {
-  title?: string;
-  sections: SettingsWidgetSectionDescriptor[];
-};
-
-export type SettingsWidgetState = Record<string, unknown>;
-
-export type SettingsWidgetProps = WidgetProps & {
-  placement?: WidgetPlacement;
-  label?: string;
-  schema?: SettingsWidgetSchema;
-  settings?: SettingsWidgetState;
-  onSettingsChange?: (settings: SettingsWidgetState) => void;
-};
-
-const PANE_STYLE: JSX.CSSProperties & Record<string, string | number> = {
-  position: 'absolute',
-  top: 'calc(100% + 8px)',
-  left: 0,
-  width: '380px',
-  maxHeight: 'min(460px, calc(100vh - 60px))',
-  borderRadius: '8px',
-  border: '1px solid rgba(71, 85, 105, 0.55)',
-  background: 'rgba(15, 23, 42, 0.94)',
-  color: 'rgba(241, 245, 249, 0.98)',
-  boxShadow: '0 12px 32px rgba(2, 6, 23, 0.55)',
-  display: 'flex',
-  flexDirection: 'column',
-  overflow: 'hidden',
-  pointerEvents: 'auto',
-  zIndex: 20,
-  '--button-background': 'rgba(30, 41, 59, 0.92)',
-  '--button-background-hover': 'rgba(15, 23, 42, 0.9)',
-  '--button-inner-stroke': '1px solid rgba(100, 116, 139, 0.72)',
-  '--button-corner-radius': '8px',
-  '--button-text': 'rgba(241, 245, 249, 0.98)',
-  '--button-icon-idle': 'rgba(203, 213, 225, 0.92)',
-  '--button-icon-hover': 'rgba(125, 211, 252, 0.98)',
-  '--button-backdrop-filter': 'blur(10px)',
-  '--container-background': 'rgba(15, 23, 42, 0.98)',
-  '--menu-item-hover': 'rgba(51, 65, 85, 0.82)'
-};
-
-const HEADER_STYLE: JSX.CSSProperties = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  borderBottom: '1px solid rgba(100, 116, 139, 0.45)',
-  padding: '10px 12px'
-};
-
-const SETTINGS_BUTTON_ICON = makeTextIcon('⚙', 24, 36);
-
-function stopPropagation(event: Event) {
-  event.stopPropagation();
-}
-
-type SettingsWidgetViewProps = {
-  label: string;
-  schema: SettingsWidgetSchema;
-  settings: SettingsWidgetState;
-  onSettingsChange?: (settings: SettingsWidgetState) => void;
-};
-
-const DEFAULT_SETTINGS_WIDGET_SCHEMA: SettingsWidgetSchema = {sections: []};
-const DEFAULT_SETTINGS_WIDGET_STATE: SettingsWidgetState = {};
-
-function SettingsWidgetView({label, schema, settings, onSettingsChange}: SettingsWidgetViewProps) {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [isPaneOpen, setIsPaneOpen] = useState(false);
-
-  useEffect(() => {
-    if (isPaneOpen && typeof document !== 'undefined') {
-      const handleDocumentPointerDown = (event: PointerEvent) => {
-        if (!containerRef.current || !event.target) {
-          return;
-        }
-        if (!containerRef.current.contains(event.target as Node)) {
-          setIsPaneOpen(false);
-        }
-      };
-
-      document.addEventListener('pointerdown', handleDocumentPointerDown);
-      return () => {
-        document.removeEventListener('pointerdown', handleDocumentPointerDown);
-      };
-    }
-
-    return undefined;
-  }, [isPaneOpen]);
-
-  return (
-    <div ref={containerRef} style={{position: 'relative', pointerEvents: 'auto'}}>
-      <IconButton
-        icon={SETTINGS_BUTTON_ICON}
-        title={label}
-        className={isPaneOpen ? 'deck-widget-button-active' : ''}
-        onClick={() => setIsPaneOpen((previous) => !previous)}
-      />
-
-      {isPaneOpen && (
-        <div
-          role="dialog"
-          aria-label={schema.title ?? label}
-          style={PANE_STYLE}
-          onPointerDown={(event) => stopPropagation(event as unknown as Event)}
-          onMouseDown={(event) => stopPropagation(event as unknown as Event)}
-          onWheel={(event) => stopPropagation(event as unknown as Event)}
-          onClick={(event) => stopPropagation(event as unknown as Event)}
-        >
-          <div style={HEADER_STYLE}>
-            <div style={{fontSize: '13px', fontWeight: 700}}>{schema.title ?? label}</div>
-            <button
-              type="button"
-              onClick={() => setIsPaneOpen(false)}
-              style={{
-                border: 0,
-                borderRadius: '4px',
-                padding: '2px 6px',
-                background: 'rgba(51, 65, 85, 0.8)',
-                color: 'inherit',
-                cursor: 'pointer',
-                fontSize: '14px',
-                lineHeight: 1
-              }}
-              title="Close settings"
-              aria-label="Close settings"
-            >
-              ×
-            </button>
-          </div>
-
-          <SettingsPanelContent
-            schema={schema}
-            settings={settings}
-            onSettingsChange={onSettingsChange}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export class SettingsWidget extends Widget<SettingsWidgetProps> {
-  static override defaultProps = {
-    ...Widget.defaultProps,
-    id: 'settings',
-    placement: 'top-left',
-    label: 'Settings',
-    schema: DEFAULT_SETTINGS_WIDGET_SCHEMA,
-    settings: DEFAULT_SETTINGS_WIDGET_STATE,
-    onSettingsChange: undefined
-  } satisfies Required<WidgetProps> &
-    Required<Pick<SettingsWidgetProps, 'placement' | 'label' | 'schema' | 'settings'>> &
-    SettingsWidgetProps;
-
-  className = 'deck-widget-settings';
-  placement: WidgetPlacement = SettingsWidget.defaultProps.placement;
-
-  #label = SettingsWidget.defaultProps.label;
-  #schema = SettingsWidget.defaultProps.schema;
-  #settings = SettingsWidget.defaultProps.settings;
-  #onSettingsChange: SettingsWidgetProps['onSettingsChange'] =
-    SettingsWidget.defaultProps.onSettingsChange;
-  #rootElement: HTMLElement | null = null;
-
-  constructor(props: SettingsWidgetProps = {}) {
-    super({...SettingsWidget.defaultProps, ...props});
-
-    if (props.placement !== undefined) {
-      this.placement = props.placement;
-    }
-    if (props.label !== undefined) {
-      this.#label = props.label;
-    }
-    if (props.schema !== undefined) {
-      this.#schema = props.schema;
-    }
-    if (props.settings !== undefined) {
-      this.#settings = props.settings;
-    }
-    if (props.onSettingsChange !== undefined) {
-      this.#onSettingsChange = props.onSettingsChange;
-    }
-  }
-
-  override setProps(props: Partial<SettingsWidgetProps>): void {
-    if (props.placement !== undefined) {
-      this.placement = props.placement;
-    }
-    if (props.label !== undefined) {
-      this.#label = props.label;
-    }
-    if (props.schema !== undefined) {
-      this.#schema = props.schema;
-    }
-    if (props.settings !== undefined) {
-      this.#settings = props.settings;
-    }
-    if (props.onSettingsChange !== undefined) {
-      this.#onSettingsChange = props.onSettingsChange;
-    }
-    super.setProps(props);
-  }
-
-  override onRenderHTML(rootElement: HTMLElement): void {
-    this.#rootElement = rootElement;
-
-    const className = ['deck-widget', this.className, this.props.className]
-      .filter(Boolean)
-      .join(' ');
-
-    rootElement.className = className;
-
-    render(
-      <SettingsWidgetView
-        label={this.#label}
-        schema={this.#schema}
-        settings={this.#settings}
-        onSettingsChange={this.#onSettingsChange}
-      />,
-      rootElement
-    );
-  }
-
-  override onRemove(): void {
-    if (this.#rootElement) {
-      render(null, this.#rootElement);
-    }
-  }
-}