npm - @perspective-dev/react - Versions diffs - 4.5.2 → 5.0.0 - Mend

@perspective-dev/react 4.5.2 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/esm/index.d.ts +0 -1
package/dist/esm/index.js +1 -1
package/dist/esm/index.js.map +4 -4
package/dist/esm/utils.d.ts +1 -1
package/dist/esm/viewer.d.ts +1 -1
package/package.json +2 -3
package/src/index.tsx +0 -1
package/src/utils.tsx +2 -1
package/src/viewer.tsx +31 -11
package/test/js/basic.story.tsx +0 -2
package/test/js/index.css +1 -1
package/test/js/react.spec.tsx +25 -28
package/test/js/workspace.story.tsx +55 -43
package/dist/esm/workspace.d.ts +0 -21
package/src/workspace.tsx +0 -95

package/dist/esm/index.d.ts CHANGED Viewed

@@ -8,4 +8,3 @@
  * @module
  */
 export * from "./viewer";
-export * from "./workspace";

package/dist/esm/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as s from"react";import*as d from"react";function c(e,t,n){d.useEffect(()=>{if(!n||!e)return;let o=new AbortController,p=a=>n(a.detail);return e?.addEventListener(t,p,{signal:o.signal}),()=>o.abort()},[e,n])}function w(e){let[t,n]=s.useState(null);return s.useEffect(()=>()=>{t?.delete()},[t]),s.useEffect(()=>{e.client?t?.load(e.client):t?.eject()},[t,e.client]),s.useEffect(()=>{e.client&&e.config&&t?.restore(e.config)},[t,e.client,JSON.stringify(e.config)]),c(t,"perspective-click",e.onClick),c(t,"perspective-select",e.onSelect),c(t,"perspective-config-update",e.onConfigUpdate),s.createElement("perspective-viewer",{ref:n,id:e.id,className:e.className,hidden:e.hidden,slot:e.slot,style:e.style,tabIndex:e.tabIndex,title:e.title})}var k=s.memo(w);import*as i from"react";var g=i.forwardRef(({client:e,layout:t,onLayoutUpdate:n,onNewView:o,onToggleGlobalFilter:p,...a},f)=>{let[r,v]=i.useState();return i.useImperativeHandle(f,()=>r,[r]),i.useEffect(()=>{r&&t&&r.restore(t)},[r,t]),i.useEffect(()=>{r&&e&&r.load(e)},[r,e]),c(r,"workspace-new-view",o),c(r,"workspace-layout-update",n?({layout:l})=>r?.save().then(u=>n(u)):void 0),c(r,"workspace-toggle-global-filter",p),i.createElement("perspective-workspace",{ref:l=>v(l??void 0),...a})}),C=i.memo(g);export{k as PerspectiveViewer,C as PerspectiveWorkspace};
+import*as i from"react";import*as a from"react";function c(e,t,r,n=s=>s.detail){a.useEffect(()=>{if(!r||!e)return;let s=new AbortController,l=o=>r(n(o));return e?.addEventListener(t,l,{signal:s.signal}),()=>s.abort()},[e,r])}function d(e){let[t,r]=i.useState(null);return i.useEffect(()=>()=>{t?.delete()},[t]),i.useEffect(()=>{if(!t)return;let n=!1;return(async()=>{if(!e.client){await t.eject();return}await t.load(e.client),!(n||!e.config)&&("panels"in e.config?await t.restoreWorkspace(e.config):await t.restore(e.config))})(),()=>{n=!0}},[t,e.client,JSON.stringify(e.config)]),c(t,"perspective-click",e.onClick),c(t,"perspective-select",e.onSelect),c(t,"perspective-config-update",e.onConfigUpdate,n=>n.detail.getConfig()),i.createElement("perspective-viewer",{ref:r,id:e.id,className:e.className,hidden:e.hidden,slot:e.slot,style:e.style,tabIndex:e.tabIndex,title:e.title})}var u=i.memo(d);export{u as PerspectiveViewer};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/viewer.tsx", "../../src/utils.tsx", "../../src/workspace.tsx"],
-  "sourcesContent": ["// \u250F\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\n// \u2503 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588       \u2588      \u2588      \u2588      \u2588      \u2588 \u2588\u2584  \u2580\u2588\u2588\u2588 \u2588       \u2503\n// \u2503 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2584\u2584\u2584\u2584\u2584 \u2584\u2584\u2584\u2584\u2584\u2588  \u2580\u2580\u2580\u2580\u2580\u2588\u2580\u2580\u2580\u2580\u2580 \u2588 \u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2584  \u2580\u2588 \u2588 \u2580\u2580\u2580\u2580\u2580 \u2503\n// \u2503 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2588\u2588\u2580\u2580 \u2584\u2584\u2584\u2584\u2584 \u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2584   \u2588 \u2584\u2584\u2584\u2584\u2584 \u2503\n// \u2503 \u2588      \u2588\u2588\u2588\u2588\u2588\u2588 \u2588  \u2580\u2588\u2584       \u2588 \u2588\u2588\u2588\u2588\u2588\u2588      \u2588      \u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588       \u2503\n// \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252B\n// \u2503 Copyright (c) 2017, the Perspective Authors.                              \u2503\n// \u2503 \u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C \u2503\n// \u2503 This file is part of the Perspective library, distributed under the terms \u2503\n// \u2503 of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). \u2503\n// \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251B\n\nimport * as React from \"react\";\nimport type * as psp from \"@perspective-dev/client\";\nimport type * as pspViewer from \"@perspective-dev/viewer\";\nimport { usePspListener } from \"./utils\";\n\nfunction PerspectiveViewerImpl(props: PerspectiveViewerProps) {\n    const [viewer, setViewer] =\n        React.useState<pspViewer.HTMLPerspectiveViewerElement | null>(null);\n\n    React.useEffect(() => {\n        return () => {\n            viewer?.delete();\n        };\n    }, [viewer]);\n\n    React.useEffect(() => {\n        if (props.client) {\n            viewer?.load(props.client);\n        } else {\n            viewer?.eject();\n        }\n    }, [viewer, props.client]);\n\n    React.useEffect(() => {\n        if (props.client && props.config) {\n            viewer?.restore(props.config);\n        }\n    }, [viewer, props.client, JSON.stringify(props.config)]);\n\n    usePspListener(viewer, \"perspective-click\", props.onClick);\n    usePspListener(viewer, \"perspective-select\", props.onSelect);\n    usePspListener(viewer, \"perspective-config-update\", props.onConfigUpdate);\n\n    return (\n        <perspective-viewer\n            ref={setViewer}\n            id={props.id}\n            className={props.className}\n            hidden={props.hidden}\n            slot={props.slot}\n            style={props.style}\n            tabIndex={props.tabIndex}\n            title={props.title}\n        />\n    );\n}\n\n/**\n * Props for the `<PerspectiveViewer>` component.\n */\nexport interface PerspectiveViewerProps {\n    client?: psp.Client | Promise<psp.Client> | psp.Table | Promise<psp.Table>;\n    config?: pspViewer.ViewerConfigUpdate;\n    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;\n    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;\n    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;\n\n    // Applicable props from `React.HTMLAttributes`, which we cannot extend\n    // directly because Perspective changes the signature of `onClick`.\n    className?: string | undefined;\n    hidden?: boolean | undefined;\n    id?: string | undefined;\n    slot?: string | undefined;\n    style?: React.CSSProperties | undefined;\n    tabIndex?: number | undefined;\n    title?: string | undefined;\n}\n\n/**\n * A React wrapper component for `<perspective-viewer>` Custom Element.\n */\nexport const PerspectiveViewer: React.FC<PerspectiveViewerProps> = React.memo(\n    PerspectiveViewerImpl,\n);\n", "// \u250F\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\n// \u2503 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588       \u2588      \u2588      \u2588      \u2588      \u2588 \u2588\u2584  \u2580\u2588\u2588\u2588 \u2588       \u2503\n// \u2503 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2584\u2584\u2584\u2584\u2584 \u2584\u2584\u2584\u2584\u2584\u2588  \u2580\u2580\u2580\u2580\u2580\u2588\u2580\u2580\u2580\u2580\u2580 \u2588 \u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2584  \u2580\u2588 \u2588 \u2580\u2580\u2580\u2580\u2580 \u2503\n// \u2503 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2588\u2588\u2580\u2580 \u2584\u2584\u2584\u2584\u2584 \u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2584   \u2588 \u2584\u2584\u2584\u2584\u2584 \u2503\n// \u2503 \u2588      \u2588\u2588\u2588\u2588\u2588\u2588 \u2588  \u2580\u2588\u2584       \u2588 \u2588\u2588\u2588\u2588\u2588\u2588      \u2588      \u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588       \u2503\n// \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252B\n// \u2503 Copyright (c) 2017, the Perspective Authors.                              \u2503\n// \u2503 \u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C \u2503\n// \u2503 This file is part of the Perspective library, distributed under the terms \u2503\n// \u2503 of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). \u2503\n// \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251B\n\nimport * as React from \"react\";\n\nexport function usePspListener<A>(\n    el: HTMLElement | undefined | null,\n    event: string,\n    cb?: (x: A) => void,\n) {\n    React.useEffect(() => {\n        if (!cb || !el) return;\n        const ctx = new AbortController();\n        const callback = (e: Event) => cb((e as CustomEvent).detail);\n        el?.addEventListener(event, callback, { signal: ctx.signal });\n        return () => ctx.abort();\n    }, [el, cb]);\n}\n", "// \u250F\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\n// \u2503 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588       \u2588      \u2588      \u2588      \u2588      \u2588 \u2588\u2584  \u2580\u2588\u2588\u2588 \u2588       \u2503\n// \u2503 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2584\u2584\u2584\u2584\u2584 \u2584\u2584\u2584\u2584\u2584\u2588  \u2580\u2580\u2580\u2580\u2580\u2588\u2580\u2580\u2580\u2580\u2580 \u2588 \u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2584  \u2580\u2588 \u2588 \u2580\u2580\u2580\u2580\u2580 \u2503\n// \u2503 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2588\u2588\u2580\u2580 \u2584\u2584\u2584\u2584\u2584 \u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2584   \u2588 \u2584\u2584\u2584\u2584\u2584 \u2503\n// \u2503 \u2588      \u2588\u2588\u2588\u2588\u2588\u2588 \u2588  \u2580\u2588\u2584       \u2588 \u2588\u2588\u2588\u2588\u2588\u2588      \u2588      \u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588       \u2503\n// \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252B\n// \u2503 Copyright (c) 2017, the Perspective Authors.                              \u2503\n// \u2503 \u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C \u2503\n// \u2503 This file is part of the Perspective library, distributed under the terms \u2503\n// \u2503 of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). \u2503\n// \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251B\n\nimport type * as psp from \"@perspective-dev/client\";\nimport type * as psp_viewer from \"@perspective-dev/viewer\";\nimport type * as pspWorkspace from \"@perspective-dev/workspace\";\nimport { PerspectiveWorkspaceConfig } from \"@perspective-dev/workspace\";\nimport * as utils from \"./utils\";\nimport * as React from \"react\";\n\nexport interface NewViewEventDetail {\n    config: psp_viewer.ViewerConfigUpdate;\n    widget: pspWorkspace.PerspectiveViewerWidget;\n}\n\nexport interface ToggleGloalFilterEventDetail {\n    widget: pspWorkspace.PerspectiveViewerWidget;\n    isGlobalFilter: boolean;\n}\n\nexport interface PerspectiveWorkspaceProps\n    extends React.HTMLAttributes<HTMLElement> {\n    client: psp.Client | Promise<psp.Client>;\n    layout: PerspectiveWorkspaceConfig;\n    onLayoutUpdate?: (layout: PerspectiveWorkspaceConfig) => void;\n    onNewView?: (detail: NewViewEventDetail) => void;\n    onToggleGlobalFilter?: (detail: ToggleGloalFilterEventDetail) => void;\n}\n\nconst PerspectiveWorkspaceImpl = React.forwardRef<\n    pspWorkspace.HTMLPerspectiveWorkspaceElement | undefined,\n    PerspectiveWorkspaceProps\n>(\n    (\n        {\n            client,\n            layout,\n            onLayoutUpdate,\n            onNewView,\n            onToggleGlobalFilter,\n            ...htmlAttributes\n        },\n        ref,\n    ) => {\n        const [workspace, setWorkspace] =\n            React.useState<pspWorkspace.HTMLPerspectiveWorkspaceElement>();\n\n        React.useImperativeHandle(ref, () => workspace, [workspace]);\n        React.useEffect(() => {\n            if (workspace && layout) {\n                workspace.restore(layout);\n            }\n        }, [workspace, layout]);\n\n        React.useEffect(() => {\n            if (workspace && client) {\n                workspace.load(client);\n            }\n        }, [workspace, client]);\n\n        utils.usePspListener(workspace, \"workspace-new-view\", onNewView);\n        utils.usePspListener(\n            workspace,\n            \"workspace-layout-update\",\n            onLayoutUpdate\n                ? ({ layout }: { layout: PerspectiveWorkspaceConfig }) =>\n                      workspace?.save().then((x) => onLayoutUpdate(x))\n                : undefined,\n        );\n\n        utils.usePspListener(\n            workspace,\n            \"workspace-toggle-global-filter\",\n            onToggleGlobalFilter,\n        );\n\n        return (\n            <perspective-workspace\n                ref={(r) => setWorkspace(r ?? undefined)}\n                {...htmlAttributes}\n            ></perspective-workspace>\n        );\n    },\n);\n\nexport const PerspectiveWorkspace = React.memo(PerspectiveWorkspaceImpl);\n"],
-  "mappings": "AAYA,UAAYA,MAAW,QCAvB,UAAYC,MAAW,QAEhB,SAASC,EACZC,EACAC,EACAC,EACF,CACQ,YAAU,IAAM,CAClB,GAAI,CAACA,GAAM,CAACF,EAAI,OAChB,IAAMG,EAAM,IAAI,gBACVC,EAAYC,GAAaH,EAAIG,EAAkB,MAAM,EAC3D,OAAAL,GAAI,iBAAiBC,EAAOG,EAAU,CAAE,OAAQD,EAAI,MAAO,CAAC,EACrD,IAAMA,EAAI,MAAM,CAC3B,EAAG,CAACH,EAAIE,CAAE,CAAC,CACf,CDTA,SAASI,EAAsBC,EAA+B,CAC1D,GAAM,CAACC,EAAQC,CAAS,EACd,WAAwD,IAAI,EAEtE,OAAM,YAAU,IACL,IAAM,CACTD,GAAQ,OAAO,CACnB,EACD,CAACA,CAAM,CAAC,EAEL,YAAU,IAAM,CACdD,EAAM,OACNC,GAAQ,KAAKD,EAAM,MAAM,EAEzBC,GAAQ,MAAM,CAEtB,EAAG,CAACA,EAAQD,EAAM,MAAM,CAAC,EAEnB,YAAU,IAAM,CACdA,EAAM,QAAUA,EAAM,QACtBC,GAAQ,QAAQD,EAAM,MAAM,CAEpC,EAAG,CAACC,EAAQD,EAAM,OAAQ,KAAK,UAAUA,EAAM,MAAM,CAAC,CAAC,EAEvDG,EAAeF,EAAQ,oBAAqBD,EAAM,OAAO,EACzDG,EAAeF,EAAQ,qBAAsBD,EAAM,QAAQ,EAC3DG,EAAeF,EAAQ,4BAA6BD,EAAM,cAAc,EAGpE,gBAAC,sBACG,IAAKE,EACL,GAAIF,EAAM,GACV,UAAWA,EAAM,UACjB,OAAQA,EAAM,OACd,KAAMA,EAAM,KACZ,MAAOA,EAAM,MACb,SAAUA,EAAM,SAChB,MAAOA,EAAM,MACjB,CAER,CA0BO,IAAMI,EAA4D,OACrEL,CACJ,EEpEA,UAAYM,MAAW,QAqBvB,IAAMC,EAAiC,aAInC,CACI,CACI,OAAAC,EACA,OAAAC,EACA,eAAAC,EACA,UAAAC,EACA,qBAAAC,EACA,GAAGC,CACP,EACAC,IACC,CACD,GAAM,CAACC,EAAWC,CAAY,EACpB,WAAuD,EAEjE,OAAM,sBAAoBF,EAAK,IAAMC,EAAW,CAACA,CAAS,CAAC,EACrD,YAAU,IAAM,CACdA,GAAaN,GACbM,EAAU,QAAQN,CAAM,CAEhC,EAAG,CAACM,EAAWN,CAAM,CAAC,EAEhB,YAAU,IAAM,CACdM,GAAaP,GACbO,EAAU,KAAKP,CAAM,CAE7B,EAAG,CAACO,EAAWP,CAAM,CAAC,EAEhBS,EAAeF,EAAW,qBAAsBJ,CAAS,EACzDM,EACFF,EACA,0BACAL,EACM,CAAC,CAAE,OAAAD,CAAO,IACNM,GAAW,KAAK,EAAE,KAAMG,GAAMR,EAAeQ,CAAC,CAAC,EACnD,MACV,EAEMD,EACFF,EACA,iCACAH,CACJ,EAGI,gBAAC,yBACG,IAAMO,GAAMH,EAAaG,GAAK,MAAS,EACtC,GAAGN,EACP,CAET,CACJ,EAEaO,EAA6B,OAAKb,CAAwB",
-  "names": ["React", "React", "usePspListener", "el", "event", "cb", "ctx", "callback", "e", "PerspectiveViewerImpl", "props", "viewer", "setViewer", "usePspListener", "PerspectiveViewer", "React", "PerspectiveWorkspaceImpl", "client", "layout", "onLayoutUpdate", "onNewView", "onToggleGlobalFilter", "htmlAttributes", "ref", "workspace", "setWorkspace", "usePspListener", "x", "r", "PerspectiveWorkspace"]
+  "sources": ["../../src/viewer.tsx", "../../src/utils.tsx"],
+  "sourcesContent": ["// \u250F\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\n// \u2503 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588       \u2588      \u2588      \u2588      \u2588      \u2588 \u2588\u2584  \u2580\u2588\u2588\u2588 \u2588       \u2503\n// \u2503 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2584\u2584\u2584\u2584\u2584 \u2584\u2584\u2584\u2584\u2584\u2588  \u2580\u2580\u2580\u2580\u2580\u2588\u2580\u2580\u2580\u2580\u2580 \u2588 \u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2584  \u2580\u2588 \u2588 \u2580\u2580\u2580\u2580\u2580 \u2503\n// \u2503 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2588\u2588\u2580\u2580 \u2584\u2584\u2584\u2584\u2584 \u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2584   \u2588 \u2584\u2584\u2584\u2584\u2584 \u2503\n// \u2503 \u2588      \u2588\u2588\u2588\u2588\u2588\u2588 \u2588  \u2580\u2588\u2584       \u2588 \u2588\u2588\u2588\u2588\u2588\u2588      \u2588      \u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588       \u2503\n// \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252B\n// \u2503 Copyright (c) 2017, the Perspective Authors.                              \u2503\n// \u2503 \u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C \u2503\n// \u2503 This file is part of the Perspective library, distributed under the terms \u2503\n// \u2503 of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). \u2503\n// \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251B\n\nimport * as React from \"react\";\nimport type * as psp from \"@perspective-dev/client\";\nimport type * as pspViewer from \"@perspective-dev/viewer\";\nimport { usePspListener } from \"./utils\";\n\nfunction PerspectiveViewerImpl(props: PerspectiveViewerProps) {\n    const [viewer, setViewer] =\n        React.useState<pspViewer.HTMLPerspectiveViewerElement | null>(null);\n\n    React.useEffect(() => {\n        return () => {\n            viewer?.delete();\n        };\n    }, [viewer]);\n\n    React.useEffect(() => {\n        if (!viewer) {\n            return;\n        }\n\n        let cancelled = false;\n        (async () => {\n            if (!props.client) {\n                await viewer.eject();\n                return;\n            }\n\n            await viewer.load(props.client);\n            if (cancelled || !props.config) {\n                return;\n            }\n\n            if (\"panels\" in props.config) {\n                await viewer.restoreWorkspace(props.config);\n            } else {\n                await viewer.restore(props.config);\n            }\n        })();\n\n        return () => {\n            cancelled = true;\n        };\n    }, [viewer, props.client, JSON.stringify(props.config)]);\n\n    usePspListener(viewer, \"perspective-click\", props.onClick);\n    usePspListener(viewer, \"perspective-select\", props.onSelect);\n    usePspListener(\n        viewer,\n        \"perspective-config-update\",\n        props.onConfigUpdate,\n        (e) => e.detail.getConfig(),\n    );\n\n    return (\n        <perspective-viewer\n            ref={setViewer}\n            id={props.id}\n            className={props.className}\n            hidden={props.hidden}\n            slot={props.slot}\n            style={props.style}\n            tabIndex={props.tabIndex}\n            title={props.title}\n        />\n    );\n}\n\n/**\n * Props for the `<PerspectiveViewer>` component.\n */\nexport interface PerspectiveViewerProps {\n    client?: psp.Client | Promise<psp.Client> | psp.Table | Promise<psp.Table>;\n    config?: pspViewer.ViewerConfigUpdate | pspViewer.WorkspaceConfigUpdate;\n    onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;\n    onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;\n    onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;\n\n    // Applicable props from `React.HTMLAttributes`, which we cannot extend\n    // directly because Perspective changes the signature of `onClick`.\n    className?: string | undefined;\n    hidden?: boolean | undefined;\n    id?: string | undefined;\n    slot?: string | undefined;\n    style?: React.CSSProperties | undefined;\n    tabIndex?: number | undefined;\n    title?: string | undefined;\n}\n\n/**\n * A React wrapper component for `<perspective-viewer>` Custom Element.\n */\nexport const PerspectiveViewer: React.FC<PerspectiveViewerProps> = React.memo(\n    PerspectiveViewerImpl,\n);\n", "// \u250F\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2513\n// \u2503 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588       \u2588      \u2588      \u2588      \u2588      \u2588 \u2588\u2584  \u2580\u2588\u2588\u2588 \u2588       \u2503\n// \u2503 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2584\u2584\u2584\u2584\u2584 \u2584\u2584\u2584\u2584\u2584\u2588  \u2580\u2580\u2580\u2580\u2580\u2588\u2580\u2580\u2580\u2580\u2580 \u2588 \u2580\u2580\u2580\u2580\u2580\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2584  \u2580\u2588 \u2588 \u2580\u2580\u2580\u2580\u2580 \u2503\n// \u2503 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2580\u2580\u2580\u2580 \u2588\u2580\u2588\u2588\u2580\u2580 \u2584\u2584\u2584\u2584\u2584 \u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2584\u2584\u2584\u2584\u2584\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2584   \u2588 \u2584\u2584\u2584\u2584\u2584 \u2503\n// \u2503 \u2588      \u2588\u2588\u2588\u2588\u2588\u2588 \u2588  \u2580\u2588\u2584       \u2588 \u2588\u2588\u2588\u2588\u2588\u2588      \u2588      \u2588\u2588\u2588\u258C\u2590\u2588\u2588\u2588 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588       \u2503\n// \u2523\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u252B\n// \u2503 Copyright (c) 2017, the Perspective Authors.                              \u2503\n// \u2503 \u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C\u254C \u2503\n// \u2503 This file is part of the Perspective library, distributed under the terms \u2503\n// \u2503 of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). \u2503\n// \u2517\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u251B\n\nimport * as React from \"react\";\n\nexport function usePspListener<A>(\n    el: HTMLElement | undefined | null,\n    event: string,\n    cb?: (x: A) => void,\n    map: (e: CustomEvent) => A = (e) => e.detail,\n) {\n    React.useEffect(() => {\n        if (!cb || !el) return;\n        const ctx = new AbortController();\n        const callback = (e: Event) => cb(map(e as CustomEvent));\n        el?.addEventListener(event, callback, { signal: ctx.signal });\n        return () => ctx.abort();\n    }, [el, cb]);\n}\n"],
+  "mappings": "AAYA,UAAYA,MAAW,QCAvB,UAAYC,MAAW,QAEhB,SAASC,EACZC,EACAC,EACAC,EACAC,EAA8BC,GAAMA,EAAE,OACxC,CACQ,YAAU,IAAM,CAClB,GAAI,CAACF,GAAM,CAACF,EAAI,OAChB,IAAMK,EAAM,IAAI,gBACVC,EAAYF,GAAaF,EAAGC,EAAIC,CAAgB,CAAC,EACvD,OAAAJ,GAAI,iBAAiBC,EAAOK,EAAU,CAAE,OAAQD,EAAI,MAAO,CAAC,EACrD,IAAMA,EAAI,MAAM,CAC3B,EAAG,CAACL,EAAIE,CAAE,CAAC,CACf,CDVA,SAASK,EAAsBC,EAA+B,CAC1D,GAAM,CAACC,EAAQC,CAAS,EACd,WAAwD,IAAI,EAEtE,OAAM,YAAU,IACL,IAAM,CACTD,GAAQ,OAAO,CACnB,EACD,CAACA,CAAM,CAAC,EAEL,YAAU,IAAM,CAClB,GAAI,CAACA,EACD,OAGJ,IAAIE,EAAY,GAChB,OAAC,SAAY,CACT,GAAI,CAACH,EAAM,OAAQ,CACf,MAAMC,EAAO,MAAM,EACnB,MACJ,CAEA,MAAMA,EAAO,KAAKD,EAAM,MAAM,EAC1B,EAAAG,GAAa,CAACH,EAAM,UAIpB,WAAYA,EAAM,OAClB,MAAMC,EAAO,iBAAiBD,EAAM,MAAM,EAE1C,MAAMC,EAAO,QAAQD,EAAM,MAAM,EAEzC,GAAG,EAEI,IAAM,CACTG,EAAY,EAChB,CACJ,EAAG,CAACF,EAAQD,EAAM,OAAQ,KAAK,UAAUA,EAAM,MAAM,CAAC,CAAC,EAEvDI,EAAeH,EAAQ,oBAAqBD,EAAM,OAAO,EACzDI,EAAeH,EAAQ,qBAAsBD,EAAM,QAAQ,EAC3DI,EACIH,EACA,4BACAD,EAAM,eACLK,GAAMA,EAAE,OAAO,UAAU,CAC9B,EAGI,gBAAC,sBACG,IAAKH,EACL,GAAIF,EAAM,GACV,UAAWA,EAAM,UACjB,OAAQA,EAAM,OACd,KAAMA,EAAM,KACZ,MAAOA,EAAM,MACb,SAAUA,EAAM,SAChB,MAAOA,EAAM,MACjB,CAER,CA0BO,IAAMM,EAA4D,OACrEP,CACJ",
+  "names": ["React", "React", "usePspListener", "el", "event", "cb", "map", "e", "ctx", "callback", "PerspectiveViewerImpl", "props", "viewer", "setViewer", "cancelled", "usePspListener", "e", "PerspectiveViewer"]
 }

package/dist/esm/utils.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export declare function usePspListener<A>(el: HTMLElement \| undefined \| null, event: string, cb?: (x: A) => void): void;
1	+ export declare function usePspListener<A>(el: HTMLElement \| undefined \| null, event: string, cb?: (x: A) => void, map?: (e: CustomEvent) => A): void;

package/dist/esm/viewer.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ import type * as pspViewer from "@perspective-dev/viewer";
  */
 export interface PerspectiveViewerProps {
     client?: psp.Client | Promise<psp.Client> | psp.Table | Promise<psp.Table>;
-    config?: pspViewer.ViewerConfigUpdate;
+    config?: pspViewer.ViewerConfigUpdate | pspViewer.WorkspaceConfigUpdate;
     onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;
     onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;
     onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@perspective-dev/react",
-  "version": "4.5.2",
-  "description": "React component wrappers for `<perspective-viewer>` and `<perspective-workspace>`",
+  "version": "5.0.0",
+  "description": "React component wrappers for `<perspective-viewer>`",
   "keywords": [
     "perspective",
     "react",
@@ -31,7 +31,6 @@
   "dependencies": {
     "@perspective-dev/client": "",
     "@perspective-dev/viewer": "",
-    "@perspective-dev/workspace": "",
     "@types/react": ">17 <20",
     "react": ">17 <20",
     "react-dom": ">17 <20"

package/src/index.tsx CHANGED Viewed

@@ -21,4 +21,3 @@
  */
 export * from "./viewer";
-export * from "./workspace";

package/src/utils.tsx CHANGED Viewed

@@ -16,11 +16,12 @@ export function usePspListener<A>(
     el: HTMLElement | undefined | null,
     event: string,
     cb?: (x: A) => void,
+    map: (e: CustomEvent) => A = (e) => e.detail,
 ) {
     React.useEffect(() => {
         if (!cb || !el) return;
         const ctx = new AbortController();
-        const callback = (e: Event) => cb((e as CustomEvent).detail);
+        const callback = (e: Event) => cb(map(e as CustomEvent));
         el?.addEventListener(event, callback, { signal: ctx.signal });
         return () => ctx.abort();
     }, [el, cb]);

package/src/viewer.tsx CHANGED Viewed

@@ -26,22 +26,42 @@ function PerspectiveViewerImpl(props: PerspectiveViewerProps) {
     }, [viewer]);
     React.useEffect(() => {
-        if (props.client) {
-            viewer?.load(props.client);
-        } else {
-            viewer?.eject();
+        if (!viewer) {
+            return;
         }
-    }, [viewer, props.client]);
-    React.useEffect(() => {
-        if (props.client && props.config) {
-            viewer?.restore(props.config);
-        }
+        let cancelled = false;
+        (async () => {
+            if (!props.client) {
+                await viewer.eject();
+                return;
+            }
+            await viewer.load(props.client);
+            if (cancelled || !props.config) {
+                return;
+            }
+            if ("panels" in props.config) {
+                await viewer.restoreWorkspace(props.config);
+            } else {
+                await viewer.restore(props.config);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
     }, [viewer, props.client, JSON.stringify(props.config)]);
     usePspListener(viewer, "perspective-click", props.onClick);
     usePspListener(viewer, "perspective-select", props.onSelect);
-    usePspListener(viewer, "perspective-config-update", props.onConfigUpdate);
+    usePspListener(
+        viewer,
+        "perspective-config-update",
+        props.onConfigUpdate,
+        (e) => e.detail.getConfig(),
+    );
     return (
         <perspective-viewer
@@ -62,7 +82,7 @@ function PerspectiveViewerImpl(props: PerspectiveViewerProps) {
  */
 export interface PerspectiveViewerProps {
     client?: psp.Client | Promise<psp.Client> | psp.Table | Promise<psp.Table>;
-    config?: pspViewer.ViewerConfigUpdate;
+    config?: pspViewer.ViewerConfigUpdate | pspViewer.WorkspaceConfigUpdate;
     onConfigUpdate?: (config: pspViewer.ViewerConfigUpdate) => void;
     onClick?: (data: pspViewer.PerspectiveClickEventDetail) => void;
     onSelect?: (data: pspViewer.PerspectiveSelectEventDetail) => void;

package/test/js/basic.story.tsx CHANGED Viewed

@@ -14,7 +14,6 @@ import perspective from "@perspective-dev/client";
 import perspective_viewer from "@perspective-dev/viewer";
 import "@perspective-dev/viewer-datagrid";
 import "@perspective-dev/viewer-charts";
-import "@perspective-dev/workspace";
 // @ts-ignore
 import SERVER_WASM from "@perspective-dev/server/dist/wasm/perspective-server.wasm?url";
@@ -36,7 +35,6 @@ import SUPERSTORE_ARROW from "superstore-arrow/superstore.lz4.arrow?url";
 import * as React from "react";
 import {
     PerspectiveViewer,
-    PerspectiveWorkspace,
 } from "@perspective-dev/react";
 import "@perspective-dev/viewer/dist/css/themes.css";

package/test/js/index.css CHANGED Viewed

@@ -62,7 +62,7 @@ button {
         flex-direction: row;
     }
-    perspective-workspace {
+    perspective-viewer {
         height: 100vh;
     }
 }

package/test/js/react.spec.tsx CHANGED Viewed

@@ -30,19 +30,19 @@ test.describe("Perspective React", () => {
         const comp = await mount(<EmptyWorkspace />);
         const toggleMount = comp.locator("button.toggle-mount");
         const addViewer = comp.locator("button.add-viewer");
-        const workspace = comp.locator("perspective-workspace");
-        const viewer = comp.locator("perspective-viewer");
+        const workspace = comp.locator("perspective-viewer");
         await toggleMount.waitFor();
         await addViewer.click();
         await addViewer.click();
         await addViewer.click();
         await page.waitForFunction(
-            () =>
-                document.querySelector("perspective-workspace")!.children
-                    .length === 3,
+            (expected) =>
+                (
+                    document.querySelector("perspective-viewer") as any
+                )?.getPanelNames?.().length === expected,
+            3,
         );
-        await expect(viewer).toHaveCount(3);
         await toggleMount.click();
         await workspace.waitFor({ state: "detached" });
@@ -51,43 +51,40 @@ test.describe("Perspective React", () => {
         await toggleMount.click();
         await workspace.waitFor();
         await page.waitForFunction(
-            () =>
-                document.querySelector("perspective-workspace")!.children
-                    .length === 3,
+            (expected) =>
+                (
+                    document.querySelector("perspective-viewer") as any
+                )?.getPanelNames?.().length === expected,
+            3,
         );
-        await expect(viewer).toHaveCount(3);
     });
-    test("Adding a viewer in single-document mode leaves SDM", async ({
-        page,
-        mount,
-    }) => {
+    test("Adding a panel to a lone-panel viewer", async ({ page, mount }) => {
         const name = "abcdef";
         const comp = await mount(<SingleView name={name} />);
         const addViewer = comp.locator("button.add-viewer");
-        const viewer = comp.locator("perspective-viewer");
-        const settingsBtn = comp.locator(`perspective-viewer #settings_button`);
+        const settingsBtn = comp.locator(
+            `perspective-viewer perspective-viewer-tab .psp-tab-settings`,
+        );
         await settingsBtn.waitFor();
         await addViewer.waitFor();
         await addViewer.click();
         await page.waitForFunction(
-            () =>
-                document.querySelector("perspective-workspace")!.children
-                    .length === 2,
+            (expected) =>
+                (
+                    document.querySelector("perspective-viewer") as any
+                )?.getPanelNames?.().length === expected,
+            2,
         );
-        expect(await viewer.count()).toBe(2);
-        await settingsBtn.first().click();
-        const settingsPanel = viewer.locator("#settings_panel");
-        await settingsPanel.waitFor();
         await addViewer.click();
         await page.waitForFunction(
-            () =>
-                document.querySelector("perspective-workspace")!.children
-                    .length === 3,
+            (expected) =>
+                (
+                    document.querySelector("perspective-viewer") as any
+                )?.getPanelNames?.().length === expected,
+            3,
         );
-        expect(await viewer.count()).toBe(3);
-        await settingsPanel.waitFor({ state: "detached" });
     });
 });

package/test/js/workspace.story.tsx CHANGED Viewed

@@ -9,27 +9,19 @@
 // ┃ This file is part of the Perspective library, distributed under the terms ┃
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-import "@perspective-dev/workspace";
-import {
-    HTMLPerspectiveWorkspaceElement,
-    PerspectiveWorkspaceConfig,
-} from "@perspective-dev/workspace";
 import * as React from "react";
-import { PerspectiveWorkspace } from "@perspective-dev/react";
+import { PerspectiveViewer } from "@perspective-dev/react";
 import perspective_viewer from "@perspective-dev/viewer";
+import type { ViewerConfigUpdate } from "@perspective-dev/viewer";
 import "@perspective-dev/viewer-datagrid";
 import "@perspective-dev/viewer-charts";
-import "@perspective-dev/workspace";
-import * as Workspace from "@perspective-dev/workspace";
 import * as perspective from "@perspective-dev/client";
 import "@perspective-dev/viewer/dist/css/themes.css";
-import "@perspective-dev/workspace/dist/css/pro.css";
 import "./index.css";
 // @ts-ignore
@@ -45,19 +37,51 @@ await Promise.all([
 const CLIENT = await perspective.worker();
+/// The merged `<perspective-viewer>` whole-element config: a `regular-layout`
+/// tree + a per-panel `ViewerConfig` map. (Formerly
+/// `@perspective-dev/workspace`'s `PerspectiveWorkspaceConfig`.)
+interface MultiPanelConfig {
+    layout?: Record<string, unknown>;
+    panels: Record<string, Record<string, unknown>>;
+}
+/// Append a panel, re-deriving an even horizontal split of one stack per
+/// panel. (Formerly `Workspace.addViewer`.)
+function addPanel(
+    config: MultiPanelConfig,
+    panel: Record<string, unknown>,
+    id: string,
+): MultiPanelConfig {
+    const panels = { ...config.panels, [id]: panel };
+    const ids = Object.keys(panels);
+    return {
+        layout: {
+            type: "split-layout",
+            orientation: "horizontal",
+            sizes: ids.map(() => 1 / ids.length),
+            children: ids.map((k) => ({
+                type: "tab-layout",
+                tabs: [k],
+                selected: 0,
+            })),
+        },
+        panels,
+    };
+}
 interface WorkspaceState {
-    layout: PerspectiveWorkspaceConfig;
+    config: MultiPanelConfig;
     mounted: boolean;
 }
 interface WorkspaceAppProps {
-    layout: PerspectiveWorkspaceConfig;
+    config: MultiPanelConfig;
     onSpecial?: () => void;
 }
 const WorkspaceApp: React.FC<WorkspaceAppProps> = (props) => {
     const [state, setState] = React.useState<WorkspaceState>({
-        layout: props.layout,
+        config: props.config,
         mounted: true,
     });
@@ -65,35 +89,30 @@ const WorkspaceApp: React.FC<WorkspaceAppProps> = (props) => {
         const name = window.crypto.randomUUID();
         const data = `a,b,c\n${Math.random()},${Math.random()},${Math.random()}`;
         CLIENT.table(data, { name });
-        const nextId = Workspace.genId(state.layout);
-        const layout = Workspace.addViewer(
-            state.layout,
+        const config = addPanel(
+            state.config,
             {
                 table: name,
                 title: name,
             },
-            nextId,
+            name,
         );
         setState({
             ...state,
-            layout,
+            config,
         });
     };
     const onClickToggleMount = () =>
         setState((old) => ({ ...old, mounted: !state.mounted }));
-    const onLayoutUpdate = (layout: PerspectiveWorkspaceConfig) => {
-        setState({ ...state, layout });
-    };
     React.useEffect(() => {
         setState((s) => ({
             ...s,
-            layout: props.layout,
+            config: props.config,
         }));
-    }, [props.layout]);
+    }, [props.config]);
     return (
         <div className="workspace-container">
@@ -111,37 +130,30 @@ const WorkspaceApp: React.FC<WorkspaceAppProps> = (props) => {
                 )}
             </div>
             {state.mounted && (
-                <PerspectiveWorkspace
+                <PerspectiveViewer
                     client={CLIENT}
-                    layout={state.layout}
-                    onLayoutUpdate={onLayoutUpdate}
+                    config={state.config as unknown as ViewerConfigUpdate}
                 />
             )}
         </div>
     );
 };
-/// Renders the app with a default empty workspace
+/// Renders the app with a default empty workspace (a multi-panel viewer always
+/// has at least one — empty — seed panel).
 export const EmptyWorkspace: React.FC = () => {
-    return (
-        <WorkspaceApp
-            layout={{ sizes: [1], viewers: {}, detail: { main: null } }}
-        />
-    );
+    return <WorkspaceApp config={{ panels: {} }} />;
 };
 export const SingleView: React.FC<{ name: string }> = ({ name }) => {
     const _table = CLIENT.table("a,b,c\n1,2,3", { name });
-    const layout: PerspectiveWorkspaceConfig = {
-        sizes: [1],
-        detail: {
-            main: {
-                type: "tab-area",
-                currentIndex: 0,
-                widgets: [name],
-            },
+    const config: MultiPanelConfig = {
+        layout: {
+            type: "tab-layout",
+            tabs: [name],
+            selected: 0,
         },
-        viewers: {
+        panels: {
             [name]: {
                 table: name,
                 columns: ["a", "b", "c"],
@@ -150,5 +162,5 @@ export const SingleView: React.FC<{ name: string }> = ({ name }) => {
         },
     };
-    return <WorkspaceApp layout={layout} />;
+    return <WorkspaceApp config={config} />;
 };

package/dist/esm/workspace.d.ts DELETED Viewed

@@ -1,21 +0,0 @@
-import type * as psp from "@perspective-dev/client";
-import type * as psp_viewer from "@perspective-dev/viewer";
-import type * as pspWorkspace from "@perspective-dev/workspace";
-import { PerspectiveWorkspaceConfig } from "@perspective-dev/workspace";
-import * as React from "react";
-export interface NewViewEventDetail {
-    config: psp_viewer.ViewerConfigUpdate;
-    widget: pspWorkspace.PerspectiveViewerWidget;
-}
-export interface ToggleGloalFilterEventDetail {
-    widget: pspWorkspace.PerspectiveViewerWidget;
-    isGlobalFilter: boolean;
-}
-export interface PerspectiveWorkspaceProps extends React.HTMLAttributes<HTMLElement> {
-    client: psp.Client | Promise<psp.Client>;
-    layout: PerspectiveWorkspaceConfig;
-    onLayoutUpdate?: (layout: PerspectiveWorkspaceConfig) => void;
-    onNewView?: (detail: NewViewEventDetail) => void;
-    onToggleGlobalFilter?: (detail: ToggleGloalFilterEventDetail) => void;
-}
-export declare const PerspectiveWorkspace: React.NamedExoticComponent<PerspectiveWorkspaceProps & React.RefAttributes<pspWorkspace.HTMLPerspectiveWorkspaceElement | undefined>>;

package/src/workspace.tsx DELETED Viewed

@@ -1,95 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-import type * as psp from "@perspective-dev/client";
-import type * as psp_viewer from "@perspective-dev/viewer";
-import type * as pspWorkspace from "@perspective-dev/workspace";
-import { PerspectiveWorkspaceConfig } from "@perspective-dev/workspace";
-import * as utils from "./utils";
-import * as React from "react";
-export interface NewViewEventDetail {
-    config: psp_viewer.ViewerConfigUpdate;
-    widget: pspWorkspace.PerspectiveViewerWidget;
-}
-export interface ToggleGloalFilterEventDetail {
-    widget: pspWorkspace.PerspectiveViewerWidget;
-    isGlobalFilter: boolean;
-}
-export interface PerspectiveWorkspaceProps
-    extends React.HTMLAttributes<HTMLElement> {
-    client: psp.Client | Promise<psp.Client>;
-    layout: PerspectiveWorkspaceConfig;
-    onLayoutUpdate?: (layout: PerspectiveWorkspaceConfig) => void;
-    onNewView?: (detail: NewViewEventDetail) => void;
-    onToggleGlobalFilter?: (detail: ToggleGloalFilterEventDetail) => void;
-}
-const PerspectiveWorkspaceImpl = React.forwardRef<
-    pspWorkspace.HTMLPerspectiveWorkspaceElement | undefined,
-    PerspectiveWorkspaceProps
->(
-    (
-        {
-            client,
-            layout,
-            onLayoutUpdate,
-            onNewView,
-            onToggleGlobalFilter,
-            ...htmlAttributes
-        },
-        ref,
-    ) => {
-        const [workspace, setWorkspace] =
-            React.useState<pspWorkspace.HTMLPerspectiveWorkspaceElement>();
-        React.useImperativeHandle(ref, () => workspace, [workspace]);
-        React.useEffect(() => {
-            if (workspace && layout) {
-                workspace.restore(layout);
-            }
-        }, [workspace, layout]);
-        React.useEffect(() => {
-            if (workspace && client) {
-                workspace.load(client);
-            }
-        }, [workspace, client]);
-        utils.usePspListener(workspace, "workspace-new-view", onNewView);
-        utils.usePspListener(
-            workspace,
-            "workspace-layout-update",
-            onLayoutUpdate
-                ? ({ layout }: { layout: PerspectiveWorkspaceConfig }) =>
-                      workspace?.save().then((x) => onLayoutUpdate(x))
-                : undefined,
-        );
-        utils.usePspListener(
-            workspace,
-            "workspace-toggle-global-filter",
-            onToggleGlobalFilter,
-        );
-        return (
-            <perspective-workspace
-                ref={(r) => setWorkspace(r ?? undefined)}
-                {...htmlAttributes}
-            ></perspective-workspace>
-        );
-    },
-);
-export const PerspectiveWorkspace = React.memo(PerspectiveWorkspaceImpl);