@deck.gl-community/widgets 9.2.8 → 9.3.0-beta.1

package/src/widget-panels/toast-widget.test.tsx

@@ -0,0 +1,105 @@
+import {afterEach, beforeEach, describe, expect, it} from 'vitest';
+
+import {toastManager} from './toast-manager';
+import {ToastWidget} from './toast-widget';
+
+function mountToastWidget() {
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+
+  const widget = new ToastWidget();
+  widget.onAdd();
+  widget.onRenderHTML(root);
+  const cleanup = () => {
+    widget.onRemove();
+    root.remove();
+  };
+
+  return {
+    root,
+    widget,
+    cleanup
+  };
+}
+
+beforeEach(() => {
+  toastManager.clear();
+});
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  toastManager.clear();
+});
+
+describe('ToastWidget', () => {
+  it('renders existing toasts from the manager', () => {
+    toastManager.toast({
+      type: 'info',
+      title: 'Loaded',
+      message: 'Data loaded'
+    });
+
+    const {root, cleanup} = mountToastWidget();
+
+    expect(root.textContent).toContain('Loaded');
+    expect(root.textContent).toContain('Data loaded');
+    expect(root.querySelectorAll('[data-toast-id]').length).toBe(1);
+
+    cleanup();
+  });
+
+  it('dismisses a toast when the close button is clicked', () => {
+    const id = toastManager.toast({
+      type: 'warning',
+      title: 'Warning',
+      message: 'Needs attention'
+    });
+
+    const {root, cleanup} = mountToastWidget();
+
+    const closeButton = root.querySelector<HTMLButtonElement>(`[data-toast-close="${id}"]`);
+    expect(closeButton).toBeTruthy();
+    closeButton?.click();
+
+    expect(root.querySelector(`[data-toast-id="${id}"]`)).toBeNull();
+    expect(toastManager.getToasts()).toHaveLength(0);
+
+    cleanup();
+  });
+
+  it('unsubscribes from the manager on remove to avoid listener leaks', () => {
+    const {root, widget} = mountToastWidget();
+    toastManager.toast({type: 'error', message: 'Initial toast'});
+
+    expect(root.querySelector('[data-toast-id]')).toBeTruthy();
+
+    widget.onRemove();
+
+    expect(root.textContent).toBe('');
+    toastManager.toast({type: 'info', message: 'Should not appear'});
+    expect(root.textContent).toBe('');
+
+    root.remove();
+  });
+
+  it('renders the toast host with visible, viewport-safe dimensions', () => {
+    const {root, cleanup} = mountToastWidget();
+
+    toastManager.toast({type: 'info', message: 'Width-safe toast'});
+    const stack = root.querySelector('.deck-widget-toast-stack');
+
+    expect(stack).toBeTruthy();
+    expect(root.getAttribute('style') || '').toContain('width: 360px');
+    expect(root.getAttribute('style') || '').toContain('max-width: calc(-24px + 100vw)');
+    expect(root.getAttribute('style') || '').toContain('pointer-events: auto');
+    expect(root.getAttribute('style') || '').toContain('position: absolute');
+    expect(root.getAttribute('style') || '').toContain('bottom: 0px');
+    expect(root.getAttribute('style') || '').toContain('right: 0px');
+
+    const card = root.querySelector('[data-toast-id]');
+    expect(card?.getAttribute('style') || '').toContain('width: 100%');
+    expect(card?.getAttribute('style') || '').toContain('min-width: 0');
+
+    cleanup();
+  });
+});

package/src/widget-panels/toast-widget.tsx

@@ -0,0 +1,293 @@
+/** @jsxImportSource preact */
+import {Widget} from '@deck.gl/core';
+import {render} from 'preact';
+
+import {toastManager} from './toast-manager';
+
+import type {ToastEntry, ToastKind} from './toast-manager';
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import type {JSX} from 'preact';
+
+export type ToastWidgetProps = WidgetProps & {
+  placement?: WidgetPlacement;
+  showBorder?: boolean;
+};
+
+type ToastWidgetViewProps = {
+  toasts: ReadonlyArray<ToastEntry>;
+  showBorder: boolean;
+};
+
+const TOAST_KIND_STYLES: Record<ToastKind, {accent: string; background: string; icon: string}> = {
+  error: {
+    accent: 'var(--deck-widget-error-color, var(--button-icon-idle, currentColor))',
+    background: 'var(--button-background)',
+    icon: '⚠'
+  },
+  info: {
+    accent: 'var(--deck-widget-info-color, var(--button-icon-idle, currentColor))',
+    background: 'var(--button-background)',
+    icon: 'ⓘ'
+  },
+  warning: {
+    accent: 'var(--deck-widget-warning-color, var(--button-icon-idle, currentColor))',
+    background: 'var(--button-background)',
+    icon: '⚠'
+  }
+};
+
+const TOAST_KIND_ICON_COLOR: Record<ToastKind, string> = {
+  error: 'var(--deck-widget-error-color, var(--button-icon-idle, currentColor))',
+  info: 'var(--deck-widget-info-color, var(--button-icon-idle, currentColor))',
+  warning: 'var(--deck-widget-warning-color, var(--button-icon-idle, currentColor))'
+};
+
+const TOAST_CONTAINER_STYLE: JSX.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 'var(--widget-margin, 8px)',
+  alignItems: 'stretch',
+  pointerEvents: 'auto',
+  width: '100%',
+  maxWidth: 'calc(100vw - 24px)',
+  maxHeight: 'calc(100vh - 24px)',
+  overflow: 'auto',
+  boxSizing: 'border-box'
+};
+
+const TOAST_CARD_STYLE: JSX.CSSProperties = {
+  position: 'relative',
+  borderRadius: 'var(--button-corner-radius, 8px)',
+  border: '1px solid transparent',
+  borderLeft: '4px solid transparent',
+  boxShadow: 'var(--button-shadow)',
+  backgroundColor: 'var(--button-background)',
+  color: 'var(--button-text)',
+  padding: '10px 10px 10px 12px',
+  width: '100%',
+  minWidth: 0,
+  animation: 'deck-toast-enter 160ms ease-out',
+  transformOrigin: 'top right',
+  backdropFilter: 'var(--button-backdrop-filter)',
+  WebkitBackdropFilter: 'var(--button-backdrop-filter)'
+};
+
+const CLOSE_BUTTON_STYLE: JSX.CSSProperties = {
+  border: 0,
+  borderRadius: 'var(--button-corner-radius, 4px)',
+  color: 'var(--button-text)',
+  background: 'transparent',
+  width: '22px',
+  height: '22px',
+  fontSize: '12px',
+  fontWeight: 700,
+  lineHeight: 1,
+  cursor: 'pointer',
+  padding: 0,
+  minWidth: 'unset',
+  minHeight: 'unset'
+};
+
+const TOAST_WIDGET_CLASS = 'deck-widget-toast';
+const TOAST_WIDGET_STACK_CLASS = 'deck-widget-toast-stack';
+
+function ToastWidgetStyles() {
+  return (
+    <style>{`
+      @keyframes deck-toast-enter {
+        from {
+          opacity: 0;
+          transform: translateY(4px) scale(0.98);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+
+      .${TOAST_WIDGET_CLASS} {
+        color: var(--button-text);
+        pointer-events: auto;
+        position: relative;
+        z-index: 3;
+      }
+
+      .${TOAST_WIDGET_STACK_CLASS} {
+        margin: 0;
+      }
+
+      .${TOAST_WIDGET_CLASS} .deck-widget-icon-button {
+        border: 0;
+        box-shadow: none;
+      }
+    `}</style>
+  );
+}
+
+function ToastWidgetView({toasts, showBorder}: ToastWidgetViewProps) {
+  return (
+    <div
+      className={TOAST_WIDGET_STACK_CLASS}
+      style={TOAST_CONTAINER_STYLE}
+      role="status"
+      aria-live="polite"
+    >
+      <ToastWidgetStyles />
+      {toasts.map((toast) => {
+        const palette = TOAST_KIND_STYLES[toast.type];
+        const iconColor = TOAST_KIND_ICON_COLOR[toast.type];
+
+        return (
+          <div
+            key={toast.id}
+            style={{
+              ...TOAST_CARD_STYLE,
+              backgroundColor: palette.background,
+              borderLeftColor: palette.accent,
+              boxShadow: showBorder
+                ? 'inset 0 0 0 0.5px var(--deck-widget-toast-border, rgba(148, 163, 184, 0.35)), var(--button-shadow)'
+                : 'var(--button-shadow)'
+            }}
+            data-toast-id={toast.id}
+          >
+            <div
+              style={{
+                position: 'relative',
+                display: 'grid',
+                gridTemplateColumns: 'auto 1fr auto',
+                alignItems: 'start',
+                gap: '8px'
+              }}
+            >
+              <div style={{fontSize: '16px', lineHeight: 1, color: iconColor}} aria-hidden="true">
+                {palette.icon}
+              </div>
+              <div style={{minWidth: 0}}>
+                {toast.title && (
+                  <div
+                    style={{
+                      fontSize: '13px',
+                      fontWeight: 700,
+                      color: 'var(--button-text)',
+                      marginBottom: '2px'
+                    }}
+                  >
+                    {toast.title}
+                  </div>
+                )}
+                <div
+                  style={{
+                    fontSize: '12px',
+                    lineHeight: 1.35,
+                    color: 'var(--button-text)',
+                    opacity: '0.8'
+                  }}
+                >
+                  {toast.message}
+                </div>
+              </div>
+              <button
+                className="deck-widget-icon-button"
+                type="button"
+                title="Dismiss"
+                aria-label="Dismiss toast"
+                style={CLOSE_BUTTON_STYLE}
+                onClick={() => toastManager.dismiss(toast.id)}
+                onPointerDown={(event) => {
+                  event.stopPropagation();
+                }}
+                data-toast-close={toast.id}
+              >
+                ×
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export class ToastWidget extends Widget<ToastWidgetProps> {
+  static defaultProps: Required<ToastWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'toast',
+    placement: 'bottom-right',
+    showBorder: false
+  };
+
+  className = TOAST_WIDGET_CLASS;
+  placement: WidgetPlacement = 'bottom-right';
+  showBorder = false;
+  #unsubscriber: () => void = () => {};
+  #toasts: ReadonlyArray<ToastEntry> = [];
+  #rootElement: HTMLElement | null = null;
+
+  constructor(props: ToastWidgetProps = {}) {
+    super(props);
+    this.setProps(this.props);
+  }
+
+  setProps(props: Partial<ToastWidgetProps>): void {
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    if (props.showBorder !== undefined) {
+      this.showBorder = props.showBorder;
+    }
+
+    super.setProps(props);
+  }
+
+  onAdd() {
+    this.#unsubscriber();
+    this.#unsubscriber = toastManager.subscribe((toasts) => {
+      this.#toasts = toasts;
+      if (this.#rootElement) {
+        render(
+          <ToastWidgetView toasts={this.#toasts} showBorder={this.showBorder} />,
+          this.#rootElement
+        );
+      }
+    });
+  }
+
+  onRemove(): void {
+    this.#unsubscriber();
+    this.#unsubscriber = () => {};
+    if (this.#rootElement) {
+      render(null, this.#rootElement);
+    }
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    this.#rootElement = rootElement;
+    const className = ['deck-widget', this.className, this.props.className]
+      .filter(Boolean)
+      .join(' ');
+    rootElement.className = className;
+    rootElement.style.pointerEvents = 'auto';
+    rootElement.style.position = 'absolute';
+    rootElement.style.width = '360px';
+    rootElement.style.maxWidth = 'calc(100vw - 24px)';
+    rootElement.style.top = '';
+    rootElement.style.right = '';
+    rootElement.style.bottom = '';
+    rootElement.style.left = '';
+
+    if (this.placement.includes('top')) {
+      rootElement.style.top = '0px';
+    } else {
+      rootElement.style.bottom = '0px';
+    }
+
+    if (this.placement.includes('right')) {
+      rootElement.style.right = '0px';
+    } else {
+      rootElement.style.left = '0px';
+    }
+
+    this.#toasts = toastManager.getToasts();
+    render(<ToastWidgetView toasts={this.#toasts} showBorder={this.showBorder} />, rootElement);
+  }
+}

package/src/widget-panels/toggle-widget.tsx

@@ -0,0 +1,93 @@
+import {Widget} from '@deck.gl/core';
+import {render} from 'preact';
+
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+
+/** @jsxImportSource preact */
+
+export type ToggleWidgetProps = WidgetProps & {
+  placement?: WidgetPlacement;
+  viewId?: string | null;
+  /** @default false */
+  defaultChecked?: boolean;
+  /** data url of icon */
+  icon: string;
+  /** Optional data url of icon when checked */
+  onIcon?: string;
+  /** Tooltip text */
+  label?: string;
+  /** Optional tooltip text when checked */
+  onLabel?: string;
+  /** Icon color when checked
+   * @default #3b82f6
+   */
+  onColor?: string;
+  /** Callback on state change */
+  onChange?: (checked: boolean) => void;
+};
+
+export class ToggleWidget extends Widget<ToggleWidgetProps> {
+  static defaultProps: Required<ToggleWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'toggle',
+    placement: 'top-left',
+    viewId: null,
+    icon: '',
+    label: '',
+    defaultChecked: false,
+    onIcon: undefined!,
+    onLabel: undefined!,
+    onColor: '#3b82f6',
+    onChange: undefined!
+  };
+
+  className = 'deck-widget-toggle';
+  placement: WidgetPlacement = 'top-left';
+
+  checked: boolean = false;
+
+  constructor(props: ToggleWidgetProps) {
+    super(props);
+    this.setProps(this.props);
+    this.checked = this.props.defaultChecked;
+  }
+
+  setProps(props: Partial<ToggleWidgetProps>): void {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
+    super.setProps(props);
+  }
+
+  toggle = () => {
+    this.checked = !this.checked;
+    this.props.onChange?.(this.checked);
+    this.updateHTML();
+  };
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const {icon, label, onIcon = icon, onLabel = label, onColor} = this.props;
+    const on = this.checked;
+    const title = on ? onLabel : label;
+
+    render(
+      <div className="deck-widget-button">
+        <button
+          className="deck-widget-icon-button"
+          type="button"
+          title={title}
+          aria-label={title}
+          onClick={this.toggle}
+        >
+          <div
+            className="deck-widget-icon"
+            style={{
+              backgroundColor: on ? onColor : '',
+              maskImage: `url('${on ? onIcon : icon}')`
+            }}
+          />
+        </button>
+      </div>,
+      rootElement
+    );
+  }
+}

package/src/widget-panels/toolbar-widget.test.ts

@@ -0,0 +1,129 @@
+import {afterEach, describe, expect, it, vi} from 'vitest';
+
+import {ToolbarWidget} from './toolbar-widget';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('ToolbarWidget', () => {
+  it('fires action callbacks when action buttons are clicked', () => {
+    const root = document.createElement('div');
+    const onClick = vi.fn();
+    document.body.appendChild(root);
+    const widget = new ToolbarWidget({
+      id: 'toolbar-actions',
+      items: [
+        {
+          kind: 'action',
+          id: 'reset',
+          label: 'Reset',
+          onClick
+        }
+      ]
+    });
+
+    widget.onRenderHTML(root);
+
+    root.querySelector<HTMLButtonElement>('[data-toolbar-item-id="reset"]')?.click();
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires toggle selection callbacks and reflects selected state', () => {
+    const root = document.createElement('div');
+    const onSelect = vi.fn();
+    document.body.appendChild(root);
+    const widget = new ToolbarWidget({
+      id: 'toolbar-toggle',
+      items: [
+        {
+          kind: 'toggle-group',
+          id: 'boolean-op',
+          selectedId: 'union',
+          onSelect,
+          options: [
+            {id: 'union', label: 'Union'},
+            {id: 'difference', label: 'Difference'}
+          ]
+        }
+      ]
+    });
+
+    widget.onRenderHTML(root);
+
+    const unionButton = root.querySelector<HTMLButtonElement>('[data-toolbar-option-id="union"]');
+    const differenceButton = root.querySelector<HTMLButtonElement>(
+      '[data-toolbar-option-id="difference"]'
+    );
+
+    expect(unionButton?.getAttribute('aria-pressed')).toBe('true');
+    expect(differenceButton?.getAttribute('aria-pressed')).toBe('false');
+
+    differenceButton?.click();
+
+    expect(onSelect).toHaveBeenCalledWith('difference');
+  });
+
+  it('respects disabled state for actions and toggle groups', () => {
+    const root = document.createElement('div');
+    const onClick = vi.fn();
+    const onSelect = vi.fn();
+    document.body.appendChild(root);
+    const widget = new ToolbarWidget({
+      id: 'toolbar-disabled',
+      items: [
+        {
+          kind: 'action',
+          id: 'disabled-action',
+          label: 'Disabled action',
+          disabled: true,
+          onClick
+        },
+        {
+          kind: 'toggle-group',
+          id: 'disabled-group',
+          disabled: true,
+          onSelect,
+          options: [{id: 'one', label: 'One'}]
+        }
+      ]
+    });
+
+    widget.onRenderHTML(root);
+
+    const actionButton = root.querySelector<HTMLButtonElement>(
+      '[data-toolbar-item-id="disabled-action"]'
+    );
+    const toggleButton = root.querySelector<HTMLButtonElement>('[data-toolbar-option-id="one"]');
+
+    expect(actionButton?.disabled).toBe(true);
+    expect(toggleButton?.disabled).toBe(true);
+
+    actionButton?.click();
+    toggleButton?.click();
+
+    expect(onClick).not.toHaveBeenCalled();
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it('renders badges as read-only status items', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    const widget = new ToolbarWidget({
+      id: 'toolbar-badge',
+      items: [
+        {
+          kind: 'badge',
+          id: 'status',
+          label: '3 clusters'
+        }
+      ]
+    });
+
+    widget.onRenderHTML(root);
+
+    const badge = root.querySelector<HTMLElement>('[data-toolbar-item-kind="badge"]');
+    expect(badge?.textContent).toContain('3 clusters');
+  });
+});