@vuu-ui/vuu-data-react 0.13.60 → 0.13.61

package/cjs/hooks/useSessionDataSource.js

@@ -1,71 +1,63 @@
 'use strict';
 
-var vuuLayout = require('@vuu-ui/vuu-layout');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var react = require('react');
 
-const NO_CONFIG = {};
-const useSessionDataSource = ({
-  dataSourceSessionKey = "data-source",
-  tableSchema
-}) => {
-  const { id, load, save, loadSession, saveSession, title } = vuuLayout.useViewContext();
+const sessionState = /* @__PURE__ */ new Map();
+const useSessionDataSource = (props) => {
   const { VuuDataSource } = vuuUtils.useData();
-  const { "datasource-config": dataSourceConfigFromState } = react.useMemo(() => load?.() ?? NO_CONFIG, [load]);
-  const dataSourceConfigRef = react.useRef(
-    dataSourceConfigFromState
-  );
-  const handleDataSourceConfigChange = react.useCallback(
-    (config, _range, confirmed) => {
-      if (confirmed !== false) {
-        const { noChanges } = vuuUtils.isConfigChanged(
-          dataSourceConfigRef.current,
-          config
-        );
-        if (noChanges === false) {
-          dataSourceConfigRef.current = config;
-          save?.(config, "datasource-config");
+  const dataSourceConfigRef = react.useRef(void 0);
+  const getDataSource = react.useCallback(
+    (sessionKey, config) => {
+      let ds = sessionState.get(sessionKey);
+      if (ds) {
+        if (config) {
+          ds.applyConfig(config, true);
+        }
+        if (ds.range.from > 0) {
+          ds.range = ds.range.reset;
         }
+        return ds;
+      }
+      if (config?.columns) {
+        ds = new VuuDataSource({
+          ...config,
+          viewport: sessionKey,
+          ...dataSourceConfigRef.current
+        });
+        if (props?.onConfigChange) {
+          ds.on("config", props.onConfigChange);
+        }
+        sessionState.set(sessionKey, ds);
+        return ds;
+      } else {
+        throw Error(
+          `[useSessionDataSource] unable to create new DataSource, columns have not been defined `
+        );
       }
     },
-    [save]
+    [VuuDataSource, props?.onConfigChange]
   );
-  const dataSource = react.useMemo(() => {
-    let ds = loadSession?.(dataSourceSessionKey);
-    if (ds) {
-      if (dataSourceConfigFromState) {
-        ds.applyConfig(dataSourceConfigFromState, true);
-      }
-      if (ds.range.from > 0) {
-        ds.range = ds.range.reset;
+  const clearDataSource = react.useCallback(
+    (sessionKey, unsubscribe) => {
+      const ds = sessionState.get(sessionKey);
+      if (ds) {
+        sessionState.delete(sessionKey);
+        if (unsubscribe === true) {
+          ds.unsubscribe();
+        }
+      } else {
+        console.warn(
+          `[useSessionbDatasource] clearDataSource ${sessionKey} not found `
+        );
       }
-      return ds;
-    }
-    const columns = dataSourceConfigFromState?.columns ?? tableSchema.columns.map((col) => col.name);
-    ds = new VuuDataSource({
-      // bufferSize: 0,
-      viewport: id,
-      table: tableSchema.table,
-      ...dataSourceConfigRef.current,
-      columns,
-      title
-    });
-    ds.on("config", handleDataSourceConfigChange);
-    saveSession?.(ds, "data-source");
-    return ds;
-  }, [
-    VuuDataSource,
-    dataSourceConfigFromState,
-    dataSourceSessionKey,
-    handleDataSourceConfigChange,
-    id,
-    loadSession,
-    saveSession,
-    tableSchema.columns,
-    tableSchema.table,
-    title
-  ]);
-  return dataSource;
+    },
+    []
+  );
+  return {
+    clearDataSource,
+    getDataSource
+  };
 };
 
 exports.useSessionDataSource = useSessionDataSource;

package/cjs/hooks/useSessionDataSource.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSessionDataSource.js","sources":["../../../../packages/vuu-data-react/src/hooks/useSessionDataSource.ts"],"sourcesContent":["import type {\n  DataSource,\n  DataSourceConfig,\n  DataSourceConfigChangeHandler,\n  TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useViewContext } from \"@vuu-ui/vuu-layout\";\nimport type { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { isConfigChanged, useData } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\n\ntype SessionState = {\n  \"datasource-config\"?: DataSourceConfig;\n};\n\nconst NO_CONFIG: SessionState = {};\n\nexport const useSessionDataSource = ({\n  dataSourceSessionKey = \"data-source\",\n  tableSchema,\n}: {\n  dataSourceSessionKey?: string;\n  tableSchema: TableSchema;\n}) => {\n  const { id, load, save, loadSession, saveSession, title } = useViewContext();\n  const { VuuDataSource } = useData();\n\n  const { \"datasource-config\": dataSourceConfigFromState } =\n    useMemo<SessionState>(() => load?.() ?? NO_CONFIG, [load]);\n\n  const dataSourceConfigRef = useRef<DataSourceConfig | undefined>(\n    dataSourceConfigFromState,\n  );\n\n  const handleDataSourceConfigChange =\n    useCallback<DataSourceConfigChangeHandler>(\n      (\n        config: DataSourceConfig | undefined,\n        _range: VuuRange,\n        confirmed?: boolean,\n      ) => {\n        if (confirmed !== false) {\n          const { noChanges } = isConfigChanged(\n            dataSourceConfigRef.current,\n            config,\n          );\n          if (noChanges === false) {\n            dataSourceConfigRef.current = config;\n            save?.(config, \"datasource-config\");\n          }\n        }\n      },\n      [save],\n    );\n\n  const dataSource: DataSource = useMemo(() => {\n    let ds = loadSession?.(dataSourceSessionKey) as DataSource;\n    if (ds) {\n      if (dataSourceConfigFromState) {\n        // this won't do anything if dataSource config already matches this\n        // This is only really used when injecting a dataSource into session\n        // state in Showcase examples\n        // DO we definitely need this ? If not apply config can be provate\n        ds.applyConfig(dataSourceConfigFromState, true);\n      }\n\n      if (ds.range.from > 0) {\n        // UI does not currently restore scroll position, so always reset to top of dataset\n        ds.range = ds.range.reset;\n      }\n\n      return ds;\n    }\n\n    const columns =\n      dataSourceConfigFromState?.columns ??\n      tableSchema.columns.map((col) => col.name);\n\n    ds = new VuuDataSource({\n      // bufferSize: 0,\n      viewport: id,\n      table: tableSchema.table,\n      ...dataSourceConfigRef.current,\n      columns,\n      title,\n    });\n    ds.on(\"config\", handleDataSourceConfigChange);\n    saveSession?.(ds, \"data-source\");\n    return ds;\n  }, [\n    VuuDataSource,\n    dataSourceConfigFromState,\n    dataSourceSessionKey,\n    handleDataSourceConfigChange,\n    id,\n    loadSession,\n    saveSession,\n    tableSchema.columns,\n    tableSchema.table,\n    title,\n  ]);\n\n  return dataSource;\n};\n"],"names":["useViewContext","useData","useMemo","useRef","useCallback","isConfigChanged"],"mappings":";;;;;;AAeA,MAAM,YAA0B,EAAC;AAE1B,MAAM,uBAAuB,CAAC;AAAA,EACnC,oBAAuB,GAAA,aAAA;AAAA,EACvB;AACF,CAGM,KAAA;AACJ,EAAM,MAAA,EAAE,IAAI,IAAM,EAAA,IAAA,EAAM,aAAa,WAAa,EAAA,KAAA,KAAUA,wBAAe,EAAA;AAC3E,EAAM,MAAA,EAAE,aAAc,EAAA,GAAIC,gBAAQ,EAAA;AAElC,EAAM,MAAA,EAAE,mBAAqB,EAAA,yBAAA,EAC3B,GAAAC,aAAA,CAAsB,MAAM,IAAA,IAAY,IAAA,SAAA,EAAW,CAAC,IAAI,CAAC,CAAA;AAE3D,EAAA,MAAM,mBAAsB,GAAAC,YAAA;AAAA,IAC1B;AAAA,GACF;AAEA,EAAA,MAAM,4BACJ,GAAAC,iBAAA;AAAA,IACE,CACE,MACA,EAAA,MAAA,EACA,SACG,KAAA;AACH,MAAA,IAAI,cAAc,KAAO,EAAA;AACvB,QAAM,MAAA,EAAE,WAAc,GAAAC,wBAAA;AAAA,UACpB,mBAAoB,CAAA,OAAA;AAAA,UACpB;AAAA,SACF;AACA,QAAA,IAAI,cAAc,KAAO,EAAA;AACvB,UAAA,mBAAA,CAAoB,OAAU,GAAA,MAAA;AAC9B,UAAA,IAAA,GAAO,QAAQ,mBAAmB,CAAA;AAAA;AACpC;AACF,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEF,EAAM,MAAA,UAAA,GAAyBH,cAAQ,MAAM;AAC3C,IAAI,IAAA,EAAA,GAAK,cAAc,oBAAoB,CAAA;AAC3C,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,IAAI,yBAA2B,EAAA;AAK7B,QAAG,EAAA,CAAA,WAAA,CAAY,2BAA2B,IAAI,CAAA;AAAA;AAGhD,MAAI,IAAA,EAAA,CAAG,KAAM,CAAA,IAAA,GAAO,CAAG,EAAA;AAErB,QAAG,EAAA,CAAA,KAAA,GAAQ,GAAG,KAAM,CAAA,KAAA;AAAA;AAGtB,MAAO,OAAA,EAAA;AAAA;AAGT,IAAM,MAAA,OAAA,GACJ,2BAA2B,OAC3B,IAAA,WAAA,CAAY,QAAQ,GAAI,CAAA,CAAC,GAAQ,KAAA,GAAA,CAAI,IAAI,CAAA;AAE3C,IAAA,EAAA,GAAK,IAAI,aAAc,CAAA;AAAA;AAAA,MAErB,QAAU,EAAA,EAAA;AAAA,MACV,OAAO,WAAY,CAAA,KAAA;AAAA,MACnB,GAAG,mBAAoB,CAAA,OAAA;AAAA,MACvB,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAG,EAAA,CAAA,EAAA,CAAG,UAAU,4BAA4B,CAAA;AAC5C,IAAA,WAAA,GAAc,IAAI,aAAa,CAAA;AAC/B,IAAO,OAAA,EAAA;AAAA,GACN,EAAA;AAAA,IACD,aAAA;AAAA,IACA,yBAAA;AAAA,IACA,oBAAA;AAAA,IACA,4BAAA;AAAA,IACA,EAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAY,CAAA,OAAA;AAAA,IACZ,WAAY,CAAA,KAAA;AAAA,IACZ;AAAA,GACD,CAAA;AAED,EAAO,OAAA,UAAA;AACT;;;;"}
+{"version":3,"file":"useSessionDataSource.js","sources":["../../../../packages/vuu-data-react/src/hooks/useSessionDataSource.ts"],"sourcesContent":["import type {\n  DataSource,\n  DataSourceConfig,\n  DataSourceConfigChangeHandler,\n  DataSourceConstructorProps,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useData } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\n\nconst sessionState = new Map<string, DataSource>();\n\nexport interface SessionStateHookProps {\n  onConfigChange?: DataSourceConfigChangeHandler;\n}\n\nexport const useSessionDataSource = (props?: SessionStateHookProps) => {\n  const { VuuDataSource } = useData();\n\n  const dataSourceConfigRef = useRef<DataSourceConfig | undefined>(undefined);\n\n  const getDataSource = useCallback(\n    (sessionKey: string, config?: DataSourceConstructorProps) => {\n      let ds = sessionState.get(sessionKey);\n      if (ds) {\n        if (config) {\n          // this won't do anything if dataSource config already matches this\n          // This is only really used when injecting a dataSource into session\n          // state in Showcase examples\n          // Do we definitely need this ? If not apply config can be provate\n          ds.applyConfig(config, true);\n        }\n\n        if (ds.range.from > 0) {\n          // UI does not currently restore scroll position, so always reset to top of dataset\n          ds.range = ds.range.reset;\n        }\n        return ds;\n      }\n\n      if (config?.columns) {\n        ds = new VuuDataSource({\n          ...config,\n          viewport: sessionKey,\n          ...dataSourceConfigRef.current,\n        });\n        if (props?.onConfigChange) {\n          ds.on(\"config\", props.onConfigChange);\n        }\n        sessionState.set(sessionKey, ds);\n        return ds;\n      } else {\n        throw Error(\n          `[useSessionDataSource] unable to create new DataSource, columns have not been defined `,\n        );\n      }\n    },\n    [VuuDataSource, props?.onConfigChange],\n  );\n\n  const clearDataSource = useCallback(\n    (sessionKey: string, unsubscribe?: boolean) => {\n      const ds = sessionState.get(sessionKey);\n      if (ds) {\n        sessionState.delete(sessionKey);\n        if (unsubscribe === true) {\n          ds.unsubscribe();\n        }\n      } else {\n        console.warn(\n          `[useSessionbDatasource] clearDataSource ${sessionKey} not found `,\n        );\n      }\n    },\n    [],\n  );\n\n  return {\n    clearDataSource,\n    getDataSource,\n  };\n};\n"],"names":["useData","useRef","useCallback"],"mappings":";;;;;AASA,MAAM,YAAA,uBAAmB,GAAwB,EAAA;AAMpC,MAAA,oBAAA,GAAuB,CAAC,KAAkC,KAAA;AACrE,EAAM,MAAA,EAAE,aAAc,EAAA,GAAIA,gBAAQ,EAAA;AAElC,EAAM,MAAA,mBAAA,GAAsBC,aAAqC,KAAS,CAAA,CAAA;AAE1E,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,YAAoB,MAAwC,KAAA;AAC3D,MAAI,IAAA,EAAA,GAAK,YAAa,CAAA,GAAA,CAAI,UAAU,CAAA;AACpC,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,IAAI,MAAQ,EAAA;AAKV,UAAG,EAAA,CAAA,WAAA,CAAY,QAAQ,IAAI,CAAA;AAAA;AAG7B,QAAI,IAAA,EAAA,CAAG,KAAM,CAAA,IAAA,GAAO,CAAG,EAAA;AAErB,UAAG,EAAA,CAAA,KAAA,GAAQ,GAAG,KAAM,CAAA,KAAA;AAAA;AAEtB,QAAO,OAAA,EAAA;AAAA;AAGT,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,EAAA,GAAK,IAAI,aAAc,CAAA;AAAA,UACrB,GAAG,MAAA;AAAA,UACH,QAAU,EAAA,UAAA;AAAA,UACV,GAAG,mBAAoB,CAAA;AAAA,SACxB,CAAA;AACD,QAAA,IAAI,OAAO,cAAgB,EAAA;AACzB,UAAG,EAAA,CAAA,EAAA,CAAG,QAAU,EAAA,KAAA,CAAM,cAAc,CAAA;AAAA;AAEtC,QAAa,YAAA,CAAA,GAAA,CAAI,YAAY,EAAE,CAAA;AAC/B,QAAO,OAAA,EAAA;AAAA,OACF,MAAA;AACL,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,sFAAA;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,aAAe,EAAA,KAAA,EAAO,cAAc;AAAA,GACvC;AAEA,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CAAC,YAAoB,WAA0B,KAAA;AAC7C,MAAM,MAAA,EAAA,GAAK,YAAa,CAAA,GAAA,CAAI,UAAU,CAAA;AACtC,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,YAAA,CAAa,OAAO,UAAU,CAAA;AAC9B,QAAA,IAAI,gBAAgB,IAAM,EAAA;AACxB,UAAA,EAAA,CAAG,WAAY,EAAA;AAAA;AACjB,OACK,MAAA;AACL,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN,2CAA2C,UAAU,CAAA,WAAA;AAAA,SACvD;AAAA;AACF,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/cjs/hooks/useVisualLinks.js

@@ -54,12 +54,13 @@ const useVisualLinks = (dataSource) => {
       content: /* @__PURE__ */ jsxRuntime.jsx(
         vuuUiControls.IconButton,
         {
+          appearance: "transparent",
           "aria-label": "remove-link",
           icon: "link",
           onClick: removeVisualLink,
           onMouseEnter: highlightVisualLinkTarget,
           onMouseLeave: clearVisualLinkTarget,
-          variant: "secondary"
+          sentiment: "neutral"
         }
       )
     });

package/cjs/hooks/useVisualLinks.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualLinks.js","sources":["../../../../packages/vuu-data-react/src/hooks/useVisualLinks.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { useViewContext } from \"@vuu-ui/vuu-layout\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useCallback, useEffect } from \"react\";\n\nexport const useVisualLinks = (dataSource: DataSource) => {\n  const { dispatch } = useViewContext();\n\n  const clearVisualLinkTarget = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-off\",\n        },\n      });\n    }\n  }, [dataSource, dispatch]);\n\n  const removeVisualLink = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-off\",\n        },\n      });\n\n      dataSource.visualLink = undefined;\n    }\n  }, [dataSource, dispatch]);\n\n  const handleLinkRemoved = useCallback(() => {\n    dispatch?.({\n      type: \"remove-toolbar-contribution\",\n      location: \"post-title\",\n    });\n  }, [dispatch]);\n\n  const highlightVisualLinkTarget = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-on\",\n        },\n      });\n    }\n  }, [dataSource, dispatch]);\n\n  const handleLinkCreated = useCallback(() => {\n    dispatch?.({\n      type: \"add-toolbar-contribution\",\n      location: \"post-title\",\n      content: (\n        <IconButton\n          aria-label=\"remove-link\"\n          icon=\"link\"\n          onClick={removeVisualLink}\n          onMouseEnter={highlightVisualLinkTarget}\n          onMouseLeave={clearVisualLinkTarget}\n          variant=\"secondary\"\n        />\n      ),\n    });\n  }, [\n    dispatch,\n    removeVisualLink,\n    highlightVisualLinkTarget,\n    clearVisualLinkTarget,\n  ]);\n\n  useEffect(() => {\n    dataSource.on(\"visual-link-created\", handleLinkCreated);\n    dataSource.on(\"visual-link-removed\", handleLinkRemoved);\n    return () => {\n      dataSource.removeListener(\"visual-link-created\", handleLinkCreated);\n      dataSource.removeListener(\"visual-link-removed\", handleLinkRemoved);\n    };\n  }, [dataSource, handleLinkCreated, handleLinkRemoved]);\n};\n"],"names":["useViewContext","useCallback","jsx","IconButton","useEffect"],"mappings":";;;;;;;AAKa,MAAA,cAAA,GAAiB,CAAC,UAA2B,KAAA;AACxD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,wBAAe,EAAA;AAEpC,EAAM,MAAA,qBAAA,GAAwBC,kBAAY,MAAM;AAC9C,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAAA;AACH,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,gBAAA,GAAmBA,kBAAY,MAAM;AACzC,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAED,MAAA,UAAA,CAAW,UAAa,GAAA,KAAA,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,iBAAA,GAAoBA,kBAAY,MAAM;AAC1C,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,6BAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,GACH,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,yBAAA,GAA4BA,kBAAY,MAAM;AAClD,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAAA;AACH,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,iBAAA,GAAoBA,kBAAY,MAAM;AAC1C,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,0BAAA;AAAA,MACN,QAAU,EAAA,YAAA;AAAA,MACV,OACE,kBAAAC,cAAA;AAAA,QAACC,wBAAA;AAAA,QAAA;AAAA,UACC,YAAW,EAAA,aAAA;AAAA,UACX,IAAK,EAAA,MAAA;AAAA,UACL,OAAS,EAAA,gBAAA;AAAA,UACT,YAAc,EAAA,yBAAA;AAAA,UACd,YAAc,EAAA,qBAAA;AAAA,UACd,OAAQ,EAAA;AAAA;AAAA;AACV,KAEH,CAAA;AAAA,GACA,EAAA;AAAA,IACD,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,yBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAW,UAAA,CAAA,EAAA,CAAG,uBAAuB,iBAAiB,CAAA;AACtD,IAAW,UAAA,CAAA,EAAA,CAAG,uBAAuB,iBAAiB,CAAA;AACtD,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,uBAAuB,iBAAiB,CAAA;AAClE,MAAW,UAAA,CAAA,cAAA,CAAe,uBAAuB,iBAAiB,CAAA;AAAA,KACpE;AAAA,GACC,EAAA,CAAC,UAAY,EAAA,iBAAA,EAAmB,iBAAiB,CAAC,CAAA;AACvD;;;;"}
+{"version":3,"file":"useVisualLinks.js","sources":["../../../../packages/vuu-data-react/src/hooks/useVisualLinks.tsx"],"sourcesContent":["import type { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { useViewContext } from \"@vuu-ui/vuu-layout\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useCallback, useEffect } from \"react\";\n\nexport const useVisualLinks = (dataSource: DataSource) => {\n  const { dispatch } = useViewContext();\n\n  const clearVisualLinkTarget = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-off\",\n        },\n      });\n    }\n  }, [dataSource, dispatch]);\n\n  const removeVisualLink = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-off\",\n        },\n      });\n\n      dataSource.visualLink = undefined;\n    }\n  }, [dataSource, dispatch]);\n\n  const handleLinkRemoved = useCallback(() => {\n    dispatch?.({\n      type: \"remove-toolbar-contribution\",\n      location: \"post-title\",\n    });\n  }, [dispatch]);\n\n  const highlightVisualLinkTarget = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-on\",\n        },\n      });\n    }\n  }, [dataSource, dispatch]);\n\n  const handleLinkCreated = useCallback(() => {\n    dispatch?.({\n      type: \"add-toolbar-contribution\",\n      location: \"post-title\",\n      content: (\n        <IconButton\n          appearance=\"transparent\"\n          aria-label=\"remove-link\"\n          icon=\"link\"\n          onClick={removeVisualLink}\n          onMouseEnter={highlightVisualLinkTarget}\n          onMouseLeave={clearVisualLinkTarget}\n          sentiment=\"neutral\"\n        />\n      ),\n    });\n  }, [\n    dispatch,\n    removeVisualLink,\n    highlightVisualLinkTarget,\n    clearVisualLinkTarget,\n  ]);\n\n  useEffect(() => {\n    dataSource.on(\"visual-link-created\", handleLinkCreated);\n    dataSource.on(\"visual-link-removed\", handleLinkRemoved);\n    return () => {\n      dataSource.removeListener(\"visual-link-created\", handleLinkCreated);\n      dataSource.removeListener(\"visual-link-removed\", handleLinkRemoved);\n    };\n  }, [dataSource, handleLinkCreated, handleLinkRemoved]);\n};\n"],"names":["useViewContext","useCallback","jsx","IconButton","useEffect"],"mappings":";;;;;;;AAKa,MAAA,cAAA,GAAiB,CAAC,UAA2B,KAAA;AACxD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIA,wBAAe,EAAA;AAEpC,EAAM,MAAA,qBAAA,GAAwBC,kBAAY,MAAM;AAC9C,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAAA;AACH,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,gBAAA,GAAmBA,kBAAY,MAAM;AACzC,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAED,MAAA,UAAA,CAAW,UAAa,GAAA,KAAA,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,iBAAA,GAAoBA,kBAAY,MAAM;AAC1C,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,6BAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,GACH,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,yBAAA,GAA4BA,kBAAY,MAAM;AAClD,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAAA;AACH,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,iBAAA,GAAoBA,kBAAY,MAAM;AAC1C,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,0BAAA;AAAA,MACN,QAAU,EAAA,YAAA;AAAA,MACV,OACE,kBAAAC,cAAA;AAAA,QAACC,wBAAA;AAAA,QAAA;AAAA,UACC,UAAW,EAAA,aAAA;AAAA,UACX,YAAW,EAAA,aAAA;AAAA,UACX,IAAK,EAAA,MAAA;AAAA,UACL,OAAS,EAAA,gBAAA;AAAA,UACT,YAAc,EAAA,yBAAA;AAAA,UACd,YAAc,EAAA,qBAAA;AAAA,UACd,SAAU,EAAA;AAAA;AAAA;AACZ,KAEH,CAAA;AAAA,GACA,EAAA;AAAA,IACD,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,yBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAW,UAAA,CAAA,EAAA,CAAG,uBAAuB,iBAAiB,CAAA;AACtD,IAAW,UAAA,CAAA,EAAA,CAAG,uBAAuB,iBAAiB,CAAA;AACtD,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,uBAAuB,iBAAiB,CAAA;AAClE,MAAW,UAAA,CAAA,cAAA,CAAe,uBAAuB,iBAAiB,CAAA;AAAA,KACpE;AAAA,GACC,EAAA,CAAC,UAAY,EAAA,iBAAA,EAAmB,iBAAiB,CAAC,CAAA;AACvD;;;;"}

package/cjs/index.js

@@ -7,14 +7,14 @@ var UnsavedChangesReport = require('./data-editing/UnsavedChangesReport.js');
 var useEditForm = require('./data-editing/useEditForm.js');
 var formEditState = require('./data-editing/form-edit-state.js');
 var VuuDataSourceProvider = require('./datasource-provider/VuuDataSourceProvider.js');
+var useLookupValues = require('./hooks/useLookupValues.js');
+var useRemoteConnection = require('./hooks/useRemoteConnection.js');
 var useSessionDataSource = require('./hooks/useSessionDataSource.js');
+var useTypeaheadSuggestions = require('./hooks/useTypeaheadSuggestions.js');
+var useVisualLinks = require('./hooks/useVisualLinks.js');
 var useVuuMenuActions = require('./hooks/useVuuMenuActions.js');
 var useVuuTables = require('./hooks/useVuuTables.js');
-var useVisualLinks = require('./hooks/useVisualLinks.js');
-var useTypeaheadSuggestions = require('./hooks/useTypeaheadSuggestions.js');
 var SessionEditingForm = require('./session-editing-form/SessionEditingForm.js');
-var useLookupValues = require('./hooks/useLookupValues.js');
-var useRemoteConnection = require('./hooks/useRemoteConnection.js');
 
 
 
@@ -28,15 +28,15 @@ exports.useEditForm = useEditForm.useEditForm;
 exports.CLEAN_FORM = formEditState.CLEAN_FORM;
 exports.buildFormEditState = formEditState.buildFormEditState;
 exports.VuuDataSourceProvider = VuuDataSourceProvider.VuuDataSourceProvider;
+exports.useLookupValues = useLookupValues.useLookupValues;
+exports.useRemoteConnection = useRemoteConnection.useRemoteConnection;
 exports.useSessionDataSource = useSessionDataSource.useSessionDataSource;
+exports.getTypeaheadParams = useTypeaheadSuggestions.getTypeaheadParams;
+exports.useTypeaheadSuggestions = useTypeaheadSuggestions.useTypeaheadSuggestions;
+exports.useVisualLinks = useVisualLinks.useVisualLinks;
 exports.isRowMenu = useVuuMenuActions.isRowMenu;
 exports.isSelectionMenu = useVuuMenuActions.isSelectionMenu;
 exports.useVuuMenuActions = useVuuMenuActions.useVuuMenuActions;
 exports.useVuuTables = useVuuTables.useVuuTables;
-exports.useVisualLinks = useVisualLinks.useVisualLinks;
-exports.getTypeaheadParams = useTypeaheadSuggestions.getTypeaheadParams;
-exports.useTypeaheadSuggestions = useTypeaheadSuggestions.useTypeaheadSuggestions;
 exports.SessionEditingForm = SessionEditingForm.SessionEditingForm;
-exports.useLookupValues = useLookupValues.useLookupValues;
-exports.useRemoteConnection = useRemoteConnection.useRemoteConnection;
 //# sourceMappingURL=index.js.map

package/esm/hooks/useSessionDataSource.js

@@ -1,69 +1,61 @@
-import { useViewContext } from '@vuu-ui/vuu-layout';
-import { useData, isConfigChanged } from '@vuu-ui/vuu-utils';
-import { useMemo, useRef, useCallback } from 'react';
+import { useData } from '@vuu-ui/vuu-utils';
+import { useRef, useCallback } from 'react';
 
-const NO_CONFIG = {};
-const useSessionDataSource = ({
-  dataSourceSessionKey = "data-source",
-  tableSchema
-}) => {
-  const { id, load, save, loadSession, saveSession, title } = useViewContext();
+const sessionState = /* @__PURE__ */ new Map();
+const useSessionDataSource = (props) => {
   const { VuuDataSource } = useData();
-  const { "datasource-config": dataSourceConfigFromState } = useMemo(() => load?.() ?? NO_CONFIG, [load]);
-  const dataSourceConfigRef = useRef(
-    dataSourceConfigFromState
-  );
-  const handleDataSourceConfigChange = useCallback(
-    (config, _range, confirmed) => {
-      if (confirmed !== false) {
-        const { noChanges } = isConfigChanged(
-          dataSourceConfigRef.current,
-          config
-        );
-        if (noChanges === false) {
-          dataSourceConfigRef.current = config;
-          save?.(config, "datasource-config");
+  const dataSourceConfigRef = useRef(void 0);
+  const getDataSource = useCallback(
+    (sessionKey, config) => {
+      let ds = sessionState.get(sessionKey);
+      if (ds) {
+        if (config) {
+          ds.applyConfig(config, true);
+        }
+        if (ds.range.from > 0) {
+          ds.range = ds.range.reset;
         }
+        return ds;
+      }
+      if (config?.columns) {
+        ds = new VuuDataSource({
+          ...config,
+          viewport: sessionKey,
+          ...dataSourceConfigRef.current
+        });
+        if (props?.onConfigChange) {
+          ds.on("config", props.onConfigChange);
+        }
+        sessionState.set(sessionKey, ds);
+        return ds;
+      } else {
+        throw Error(
+          `[useSessionDataSource] unable to create new DataSource, columns have not been defined `
+        );
       }
     },
-    [save]
+    [VuuDataSource, props?.onConfigChange]
   );
-  const dataSource = useMemo(() => {
-    let ds = loadSession?.(dataSourceSessionKey);
-    if (ds) {
-      if (dataSourceConfigFromState) {
-        ds.applyConfig(dataSourceConfigFromState, true);
-      }
-      if (ds.range.from > 0) {
-        ds.range = ds.range.reset;
+  const clearDataSource = useCallback(
+    (sessionKey, unsubscribe) => {
+      const ds = sessionState.get(sessionKey);
+      if (ds) {
+        sessionState.delete(sessionKey);
+        if (unsubscribe === true) {
+          ds.unsubscribe();
+        }
+      } else {
+        console.warn(
+          `[useSessionbDatasource] clearDataSource ${sessionKey} not found `
+        );
       }
-      return ds;
-    }
-    const columns = dataSourceConfigFromState?.columns ?? tableSchema.columns.map((col) => col.name);
-    ds = new VuuDataSource({
-      // bufferSize: 0,
-      viewport: id,
-      table: tableSchema.table,
-      ...dataSourceConfigRef.current,
-      columns,
-      title
-    });
-    ds.on("config", handleDataSourceConfigChange);
-    saveSession?.(ds, "data-source");
-    return ds;
-  }, [
-    VuuDataSource,
-    dataSourceConfigFromState,
-    dataSourceSessionKey,
-    handleDataSourceConfigChange,
-    id,
-    loadSession,
-    saveSession,
-    tableSchema.columns,
-    tableSchema.table,
-    title
-  ]);
-  return dataSource;
+    },
+    []
+  );
+  return {
+    clearDataSource,
+    getDataSource
+  };
 };
 
 export { useSessionDataSource };

package/esm/hooks/useSessionDataSource.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSessionDataSource.js","sources":["../../../../packages/vuu-data-react/src/hooks/useSessionDataSource.ts"],"sourcesContent":["import type {\n  DataSource,\n  DataSourceConfig,\n  DataSourceConfigChangeHandler,\n  TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useViewContext } from \"@vuu-ui/vuu-layout\";\nimport type { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { isConfigChanged, useData } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\n\ntype SessionState = {\n  \"datasource-config\"?: DataSourceConfig;\n};\n\nconst NO_CONFIG: SessionState = {};\n\nexport const useSessionDataSource = ({\n  dataSourceSessionKey = \"data-source\",\n  tableSchema,\n}: {\n  dataSourceSessionKey?: string;\n  tableSchema: TableSchema;\n}) => {\n  const { id, load, save, loadSession, saveSession, title } = useViewContext();\n  const { VuuDataSource } = useData();\n\n  const { \"datasource-config\": dataSourceConfigFromState } =\n    useMemo<SessionState>(() => load?.() ?? NO_CONFIG, [load]);\n\n  const dataSourceConfigRef = useRef<DataSourceConfig | undefined>(\n    dataSourceConfigFromState,\n  );\n\n  const handleDataSourceConfigChange =\n    useCallback<DataSourceConfigChangeHandler>(\n      (\n        config: DataSourceConfig | undefined,\n        _range: VuuRange,\n        confirmed?: boolean,\n      ) => {\n        if (confirmed !== false) {\n          const { noChanges } = isConfigChanged(\n            dataSourceConfigRef.current,\n            config,\n          );\n          if (noChanges === false) {\n            dataSourceConfigRef.current = config;\n            save?.(config, \"datasource-config\");\n          }\n        }\n      },\n      [save],\n    );\n\n  const dataSource: DataSource = useMemo(() => {\n    let ds = loadSession?.(dataSourceSessionKey) as DataSource;\n    if (ds) {\n      if (dataSourceConfigFromState) {\n        // this won't do anything if dataSource config already matches this\n        // This is only really used when injecting a dataSource into session\n        // state in Showcase examples\n        // DO we definitely need this ? If not apply config can be provate\n        ds.applyConfig(dataSourceConfigFromState, true);\n      }\n\n      if (ds.range.from > 0) {\n        // UI does not currently restore scroll position, so always reset to top of dataset\n        ds.range = ds.range.reset;\n      }\n\n      return ds;\n    }\n\n    const columns =\n      dataSourceConfigFromState?.columns ??\n      tableSchema.columns.map((col) => col.name);\n\n    ds = new VuuDataSource({\n      // bufferSize: 0,\n      viewport: id,\n      table: tableSchema.table,\n      ...dataSourceConfigRef.current,\n      columns,\n      title,\n    });\n    ds.on(\"config\", handleDataSourceConfigChange);\n    saveSession?.(ds, \"data-source\");\n    return ds;\n  }, [\n    VuuDataSource,\n    dataSourceConfigFromState,\n    dataSourceSessionKey,\n    handleDataSourceConfigChange,\n    id,\n    loadSession,\n    saveSession,\n    tableSchema.columns,\n    tableSchema.table,\n    title,\n  ]);\n\n  return dataSource;\n};\n"],"names":[],"mappings":";;;;AAeA,MAAM,YAA0B,EAAC;AAE1B,MAAM,uBAAuB,CAAC;AAAA,EACnC,oBAAuB,GAAA,aAAA;AAAA,EACvB;AACF,CAGM,KAAA;AACJ,EAAM,MAAA,EAAE,IAAI,IAAM,EAAA,IAAA,EAAM,aAAa,WAAa,EAAA,KAAA,KAAU,cAAe,EAAA;AAC3E,EAAM,MAAA,EAAE,aAAc,EAAA,GAAI,OAAQ,EAAA;AAElC,EAAM,MAAA,EAAE,mBAAqB,EAAA,yBAAA,EAC3B,GAAA,OAAA,CAAsB,MAAM,IAAA,IAAY,IAAA,SAAA,EAAW,CAAC,IAAI,CAAC,CAAA;AAE3D,EAAA,MAAM,mBAAsB,GAAA,MAAA;AAAA,IAC1B;AAAA,GACF;AAEA,EAAA,MAAM,4BACJ,GAAA,WAAA;AAAA,IACE,CACE,MACA,EAAA,MAAA,EACA,SACG,KAAA;AACH,MAAA,IAAI,cAAc,KAAO,EAAA;AACvB,QAAM,MAAA,EAAE,WAAc,GAAA,eAAA;AAAA,UACpB,mBAAoB,CAAA,OAAA;AAAA,UACpB;AAAA,SACF;AACA,QAAA,IAAI,cAAc,KAAO,EAAA;AACvB,UAAA,mBAAA,CAAoB,OAAU,GAAA,MAAA;AAC9B,UAAA,IAAA,GAAO,QAAQ,mBAAmB,CAAA;AAAA;AACpC;AACF,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEF,EAAM,MAAA,UAAA,GAAyB,QAAQ,MAAM;AAC3C,IAAI,IAAA,EAAA,GAAK,cAAc,oBAAoB,CAAA;AAC3C,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,IAAI,yBAA2B,EAAA;AAK7B,QAAG,EAAA,CAAA,WAAA,CAAY,2BAA2B,IAAI,CAAA;AAAA;AAGhD,MAAI,IAAA,EAAA,CAAG,KAAM,CAAA,IAAA,GAAO,CAAG,EAAA;AAErB,QAAG,EAAA,CAAA,KAAA,GAAQ,GAAG,KAAM,CAAA,KAAA;AAAA;AAGtB,MAAO,OAAA,EAAA;AAAA;AAGT,IAAM,MAAA,OAAA,GACJ,2BAA2B,OAC3B,IAAA,WAAA,CAAY,QAAQ,GAAI,CAAA,CAAC,GAAQ,KAAA,GAAA,CAAI,IAAI,CAAA;AAE3C,IAAA,EAAA,GAAK,IAAI,aAAc,CAAA;AAAA;AAAA,MAErB,QAAU,EAAA,EAAA;AAAA,MACV,OAAO,WAAY,CAAA,KAAA;AAAA,MACnB,GAAG,mBAAoB,CAAA,OAAA;AAAA,MACvB,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAG,EAAA,CAAA,EAAA,CAAG,UAAU,4BAA4B,CAAA;AAC5C,IAAA,WAAA,GAAc,IAAI,aAAa,CAAA;AAC/B,IAAO,OAAA,EAAA;AAAA,GACN,EAAA;AAAA,IACD,aAAA;AAAA,IACA,yBAAA;AAAA,IACA,oBAAA;AAAA,IACA,4BAAA;AAAA,IACA,EAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAY,CAAA,OAAA;AAAA,IACZ,WAAY,CAAA,KAAA;AAAA,IACZ;AAAA,GACD,CAAA;AAED,EAAO,OAAA,UAAA;AACT;;;;"}
+{"version":3,"file":"useSessionDataSource.js","sources":["../../../../packages/vuu-data-react/src/hooks/useSessionDataSource.ts"],"sourcesContent":["import type {\n  DataSource,\n  DataSourceConfig,\n  DataSourceConfigChangeHandler,\n  DataSourceConstructorProps,\n} from \"@vuu-ui/vuu-data-types\";\nimport { useData } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\n\nconst sessionState = new Map<string, DataSource>();\n\nexport interface SessionStateHookProps {\n  onConfigChange?: DataSourceConfigChangeHandler;\n}\n\nexport const useSessionDataSource = (props?: SessionStateHookProps) => {\n  const { VuuDataSource } = useData();\n\n  const dataSourceConfigRef = useRef<DataSourceConfig | undefined>(undefined);\n\n  const getDataSource = useCallback(\n    (sessionKey: string, config?: DataSourceConstructorProps) => {\n      let ds = sessionState.get(sessionKey);\n      if (ds) {\n        if (config) {\n          // this won't do anything if dataSource config already matches this\n          // This is only really used when injecting a dataSource into session\n          // state in Showcase examples\n          // Do we definitely need this ? If not apply config can be provate\n          ds.applyConfig(config, true);\n        }\n\n        if (ds.range.from > 0) {\n          // UI does not currently restore scroll position, so always reset to top of dataset\n          ds.range = ds.range.reset;\n        }\n        return ds;\n      }\n\n      if (config?.columns) {\n        ds = new VuuDataSource({\n          ...config,\n          viewport: sessionKey,\n          ...dataSourceConfigRef.current,\n        });\n        if (props?.onConfigChange) {\n          ds.on(\"config\", props.onConfigChange);\n        }\n        sessionState.set(sessionKey, ds);\n        return ds;\n      } else {\n        throw Error(\n          `[useSessionDataSource] unable to create new DataSource, columns have not been defined `,\n        );\n      }\n    },\n    [VuuDataSource, props?.onConfigChange],\n  );\n\n  const clearDataSource = useCallback(\n    (sessionKey: string, unsubscribe?: boolean) => {\n      const ds = sessionState.get(sessionKey);\n      if (ds) {\n        sessionState.delete(sessionKey);\n        if (unsubscribe === true) {\n          ds.unsubscribe();\n        }\n      } else {\n        console.warn(\n          `[useSessionbDatasource] clearDataSource ${sessionKey} not found `,\n        );\n      }\n    },\n    [],\n  );\n\n  return {\n    clearDataSource,\n    getDataSource,\n  };\n};\n"],"names":[],"mappings":";;;AASA,MAAM,YAAA,uBAAmB,GAAwB,EAAA;AAMpC,MAAA,oBAAA,GAAuB,CAAC,KAAkC,KAAA;AACrE,EAAM,MAAA,EAAE,aAAc,EAAA,GAAI,OAAQ,EAAA;AAElC,EAAM,MAAA,mBAAA,GAAsB,OAAqC,KAAS,CAAA,CAAA;AAE1E,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,YAAoB,MAAwC,KAAA;AAC3D,MAAI,IAAA,EAAA,GAAK,YAAa,CAAA,GAAA,CAAI,UAAU,CAAA;AACpC,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,IAAI,MAAQ,EAAA;AAKV,UAAG,EAAA,CAAA,WAAA,CAAY,QAAQ,IAAI,CAAA;AAAA;AAG7B,QAAI,IAAA,EAAA,CAAG,KAAM,CAAA,IAAA,GAAO,CAAG,EAAA;AAErB,UAAG,EAAA,CAAA,KAAA,GAAQ,GAAG,KAAM,CAAA,KAAA;AAAA;AAEtB,QAAO,OAAA,EAAA;AAAA;AAGT,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,EAAA,GAAK,IAAI,aAAc,CAAA;AAAA,UACrB,GAAG,MAAA;AAAA,UACH,QAAU,EAAA,UAAA;AAAA,UACV,GAAG,mBAAoB,CAAA;AAAA,SACxB,CAAA;AACD,QAAA,IAAI,OAAO,cAAgB,EAAA;AACzB,UAAG,EAAA,CAAA,EAAA,CAAG,QAAU,EAAA,KAAA,CAAM,cAAc,CAAA;AAAA;AAEtC,QAAa,YAAA,CAAA,GAAA,CAAI,YAAY,EAAE,CAAA;AAC/B,QAAO,OAAA,EAAA;AAAA,OACF,MAAA;AACL,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,sFAAA;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,aAAe,EAAA,KAAA,EAAO,cAAc;AAAA,GACvC;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,YAAoB,WAA0B,KAAA;AAC7C,MAAM,MAAA,EAAA,GAAK,YAAa,CAAA,GAAA,CAAI,UAAU,CAAA;AACtC,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,YAAA,CAAa,OAAO,UAAU,CAAA;AAC9B,QAAA,IAAI,gBAAgB,IAAM,EAAA;AACxB,UAAA,EAAA,CAAG,WAAY,EAAA;AAAA;AACjB,OACK,MAAA;AACL,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN,2CAA2C,UAAU,CAAA,WAAA;AAAA,SACvD;AAAA;AACF,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/esm/hooks/useVisualLinks.js

@@ -52,12 +52,13 @@ const useVisualLinks = (dataSource) => {
       content: /* @__PURE__ */ jsx(
         IconButton,
         {
+          appearance: "transparent",
           "aria-label": "remove-link",
           icon: "link",
           onClick: removeVisualLink,
           onMouseEnter: highlightVisualLinkTarget,
           onMouseLeave: clearVisualLinkTarget,
-          variant: "secondary"
+          sentiment: "neutral"
         }
       )
     });

package/esm/hooks/useVisualLinks.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualLinks.js","sources":["../../../../packages/vuu-data-react/src/hooks/useVisualLinks.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { useViewContext } from \"@vuu-ui/vuu-layout\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useCallback, useEffect } from \"react\";\n\nexport const useVisualLinks = (dataSource: DataSource) => {\n  const { dispatch } = useViewContext();\n\n  const clearVisualLinkTarget = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-off\",\n        },\n      });\n    }\n  }, [dataSource, dispatch]);\n\n  const removeVisualLink = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-off\",\n        },\n      });\n\n      dataSource.visualLink = undefined;\n    }\n  }, [dataSource, dispatch]);\n\n  const handleLinkRemoved = useCallback(() => {\n    dispatch?.({\n      type: \"remove-toolbar-contribution\",\n      location: \"post-title\",\n    });\n  }, [dispatch]);\n\n  const highlightVisualLinkTarget = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-on\",\n        },\n      });\n    }\n  }, [dataSource, dispatch]);\n\n  const handleLinkCreated = useCallback(() => {\n    dispatch?.({\n      type: \"add-toolbar-contribution\",\n      location: \"post-title\",\n      content: (\n        <IconButton\n          aria-label=\"remove-link\"\n          icon=\"link\"\n          onClick={removeVisualLink}\n          onMouseEnter={highlightVisualLinkTarget}\n          onMouseLeave={clearVisualLinkTarget}\n          variant=\"secondary\"\n        />\n      ),\n    });\n  }, [\n    dispatch,\n    removeVisualLink,\n    highlightVisualLinkTarget,\n    clearVisualLinkTarget,\n  ]);\n\n  useEffect(() => {\n    dataSource.on(\"visual-link-created\", handleLinkCreated);\n    dataSource.on(\"visual-link-removed\", handleLinkRemoved);\n    return () => {\n      dataSource.removeListener(\"visual-link-created\", handleLinkCreated);\n      dataSource.removeListener(\"visual-link-removed\", handleLinkRemoved);\n    };\n  }, [dataSource, handleLinkCreated, handleLinkRemoved]);\n};\n"],"names":[],"mappings":";;;;;AAKa,MAAA,cAAA,GAAiB,CAAC,UAA2B,KAAA;AACxD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,cAAe,EAAA;AAEpC,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAAA;AACH,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAED,MAAA,UAAA,CAAW,UAAa,GAAA,KAAA,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,6BAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,GACH,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,yBAAA,GAA4B,YAAY,MAAM;AAClD,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAAA;AACH,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,0BAAA;AAAA,MACN,QAAU,EAAA,YAAA;AAAA,MACV,OACE,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,YAAW,EAAA,aAAA;AAAA,UACX,IAAK,EAAA,MAAA;AAAA,UACL,OAAS,EAAA,gBAAA;AAAA,UACT,YAAc,EAAA,yBAAA;AAAA,UACd,YAAc,EAAA,qBAAA;AAAA,UACd,OAAQ,EAAA;AAAA;AAAA;AACV,KAEH,CAAA;AAAA,GACA,EAAA;AAAA,IACD,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,yBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAW,UAAA,CAAA,EAAA,CAAG,uBAAuB,iBAAiB,CAAA;AACtD,IAAW,UAAA,CAAA,EAAA,CAAG,uBAAuB,iBAAiB,CAAA;AACtD,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,uBAAuB,iBAAiB,CAAA;AAClE,MAAW,UAAA,CAAA,cAAA,CAAe,uBAAuB,iBAAiB,CAAA;AAAA,KACpE;AAAA,GACC,EAAA,CAAC,UAAY,EAAA,iBAAA,EAAmB,iBAAiB,CAAC,CAAA;AACvD;;;;"}
+{"version":3,"file":"useVisualLinks.js","sources":["../../../../packages/vuu-data-react/src/hooks/useVisualLinks.tsx"],"sourcesContent":["import type { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { useViewContext } from \"@vuu-ui/vuu-layout\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { useCallback, useEffect } from \"react\";\n\nexport const useVisualLinks = (dataSource: DataSource) => {\n  const { dispatch } = useViewContext();\n\n  const clearVisualLinkTarget = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-off\",\n        },\n      });\n    }\n  }, [dataSource, dispatch]);\n\n  const removeVisualLink = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-off\",\n        },\n      });\n\n      dataSource.visualLink = undefined;\n    }\n  }, [dataSource, dispatch]);\n\n  const handleLinkRemoved = useCallback(() => {\n    dispatch?.({\n      type: \"remove-toolbar-contribution\",\n      location: \"post-title\",\n    });\n  }, [dispatch]);\n\n  const highlightVisualLinkTarget = useCallback(() => {\n    if (dataSource.visualLink) {\n      dispatch?.({\n        type: \"broadcast-message\",\n        message: {\n          targetId: dataSource.visualLink.parentClientVpId,\n          type: \"highlight-on\",\n        },\n      });\n    }\n  }, [dataSource, dispatch]);\n\n  const handleLinkCreated = useCallback(() => {\n    dispatch?.({\n      type: \"add-toolbar-contribution\",\n      location: \"post-title\",\n      content: (\n        <IconButton\n          appearance=\"transparent\"\n          aria-label=\"remove-link\"\n          icon=\"link\"\n          onClick={removeVisualLink}\n          onMouseEnter={highlightVisualLinkTarget}\n          onMouseLeave={clearVisualLinkTarget}\n          sentiment=\"neutral\"\n        />\n      ),\n    });\n  }, [\n    dispatch,\n    removeVisualLink,\n    highlightVisualLinkTarget,\n    clearVisualLinkTarget,\n  ]);\n\n  useEffect(() => {\n    dataSource.on(\"visual-link-created\", handleLinkCreated);\n    dataSource.on(\"visual-link-removed\", handleLinkRemoved);\n    return () => {\n      dataSource.removeListener(\"visual-link-created\", handleLinkCreated);\n      dataSource.removeListener(\"visual-link-removed\", handleLinkRemoved);\n    };\n  }, [dataSource, handleLinkCreated, handleLinkRemoved]);\n};\n"],"names":[],"mappings":";;;;;AAKa,MAAA,cAAA,GAAiB,CAAC,UAA2B,KAAA;AACxD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,cAAe,EAAA;AAEpC,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAAA;AACH,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAED,MAAA,UAAA,CAAW,UAAa,GAAA,KAAA,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,6BAAA;AAAA,MACN,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,GACH,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,yBAAA,GAA4B,YAAY,MAAM;AAClD,IAAA,IAAI,WAAW,UAAY,EAAA;AACzB,MAAW,QAAA,GAAA;AAAA,QACT,IAAM,EAAA,mBAAA;AAAA,QACN,OAAS,EAAA;AAAA,UACP,QAAA,EAAU,WAAW,UAAW,CAAA,gBAAA;AAAA,UAChC,IAAM,EAAA;AAAA;AACR,OACD,CAAA;AAAA;AACH,GACC,EAAA,CAAC,UAAY,EAAA,QAAQ,CAAC,CAAA;AAEzB,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,0BAAA;AAAA,MACN,QAAU,EAAA,YAAA;AAAA,MACV,OACE,kBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,UAAW,EAAA,aAAA;AAAA,UACX,YAAW,EAAA,aAAA;AAAA,UACX,IAAK,EAAA,MAAA;AAAA,UACL,OAAS,EAAA,gBAAA;AAAA,UACT,YAAc,EAAA,yBAAA;AAAA,UACd,YAAc,EAAA,qBAAA;AAAA,UACd,SAAU,EAAA;AAAA;AAAA;AACZ,KAEH,CAAA;AAAA,GACA,EAAA;AAAA,IACD,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,yBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,SAAA,CAAU,MAAM;AACd,IAAW,UAAA,CAAA,EAAA,CAAG,uBAAuB,iBAAiB,CAAA;AACtD,IAAW,UAAA,CAAA,EAAA,CAAG,uBAAuB,iBAAiB,CAAA;AACtD,IAAA,OAAO,MAAM;AACX,MAAW,UAAA,CAAA,cAAA,CAAe,uBAAuB,iBAAiB,CAAA;AAClE,MAAW,UAAA,CAAA,cAAA,CAAe,uBAAuB,iBAAiB,CAAA;AAAA,KACpE;AAAA,GACC,EAAA,CAAC,UAAY,EAAA,iBAAA,EAAmB,iBAAiB,CAAC,CAAA;AACvD;;;;"}

package/esm/index.js

@@ -5,12 +5,12 @@ export { UnsavedChangesReport } from './data-editing/UnsavedChangesReport.js';
 export { useEditForm } from './data-editing/useEditForm.js';
 export { CLEAN_FORM, buildFormEditState } from './data-editing/form-edit-state.js';
 export { VuuDataSourceProvider } from './datasource-provider/VuuDataSourceProvider.js';
+export { useLookupValues } from './hooks/useLookupValues.js';
+export { useRemoteConnection } from './hooks/useRemoteConnection.js';
 export { useSessionDataSource } from './hooks/useSessionDataSource.js';
+export { getTypeaheadParams, useTypeaheadSuggestions } from './hooks/useTypeaheadSuggestions.js';
+export { useVisualLinks } from './hooks/useVisualLinks.js';
 export { isRowMenu, isSelectionMenu, useVuuMenuActions } from './hooks/useVuuMenuActions.js';
 export { useVuuTables } from './hooks/useVuuTables.js';
-export { useVisualLinks } from './hooks/useVisualLinks.js';
-export { getTypeaheadParams, useTypeaheadSuggestions } from './hooks/useTypeaheadSuggestions.js';
 export { SessionEditingForm } from './session-editing-form/SessionEditingForm.js';
-export { useLookupValues } from './hooks/useLookupValues.js';
-export { useRemoteConnection } from './hooks/useRemoteConnection.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,24 +1,24 @@
 {
-  "version": "0.13.60",
+  "version": "0.13.61",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.13.60",
-    "@vuu-ui/vuu-filter-types": "0.13.60",
-    "@vuu-ui/vuu-popups": "0.13.60",
-    "@vuu-ui/vuu-protocol-types": "0.13.60",
-    "@vuu-ui/vuu-table-types": "0.13.60"
+    "@vuu-ui/vuu-data-types": "0.13.61",
+    "@vuu-ui/vuu-filter-types": "0.13.61",
+    "@vuu-ui/vuu-popups": "0.13.61",
+    "@vuu-ui/vuu-protocol-types": "0.13.61",
+    "@vuu-ui/vuu-table-types": "0.13.61"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "0.13.60",
-    "@vuu-ui/vuu-data-remote": "0.13.60",
-    "@vuu-ui/vuu-filter-parser": "0.13.60",
-    "@vuu-ui/vuu-filters": "0.13.60",
-    "@vuu-ui/vuu-layout": "0.13.60",
-    "@vuu-ui/vuu-popups": "0.13.60",
-    "@vuu-ui/vuu-ui-controls": "0.13.60",
-    "@vuu-ui/vuu-utils": "0.13.60",
-    "@vuu-ui/vuu-table": "0.13.60",
+    "@vuu-ui/vuu-context-menu": "0.13.61",
+    "@vuu-ui/vuu-data-remote": "0.13.61",
+    "@vuu-ui/vuu-filter-parser": "0.13.61",
+    "@vuu-ui/vuu-filters": "0.13.61",
+    "@vuu-ui/vuu-layout": "0.13.61",
+    "@vuu-ui/vuu-popups": "0.13.61",
+    "@vuu-ui/vuu-ui-controls": "0.13.61",
+    "@vuu-ui/vuu-utils": "0.13.61",
+    "@vuu-ui/vuu-table": "0.13.61",
     "@salt-ds/core": "1.48.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"

package/types/hooks/useSessionDataSource.d.ts

@@ -1,5 +1,8 @@
-import type { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
-export declare const useSessionDataSource: ({ dataSourceSessionKey, tableSchema, }: {
-    dataSourceSessionKey?: string;
-    tableSchema: TableSchema;
-}) => DataSource;
+import type { DataSource, DataSourceConfigChangeHandler, DataSourceConstructorProps } from "@vuu-ui/vuu-data-types";
+export interface SessionStateHookProps {
+    onConfigChange?: DataSourceConfigChangeHandler;
+}
+export declare const useSessionDataSource: (props?: SessionStateHookProps) => {
+    clearDataSource: (sessionKey: string, unsubscribe?: boolean) => void;
+    getDataSource: (sessionKey: string, config?: DataSourceConstructorProps) => DataSource;
+};

package/types/hooks/useVisualLinks.d.ts

@@ -1,2 +1,2 @@
-import { DataSource } from "@vuu-ui/vuu-data-types";
+import type { DataSource } from "@vuu-ui/vuu-data-types";
 export declare const useVisualLinks: (dataSource: DataSource) => void;

package/types/index.d.ts

@@ -1,6 +1,10 @@
 export * from "./data-editing";
 export * from "./datasource-provider";
-export * from "./hooks";
-export * from "./session-editing-form";
 export { useLookupValues } from "./hooks/useLookupValues";
 export { useRemoteConnection } from "./hooks/useRemoteConnection";
+export { useSessionDataSource } from "./hooks/useSessionDataSource";
+export { getTypeaheadParams, useTypeaheadSuggestions, } from "./hooks/useTypeaheadSuggestions";
+export { useVisualLinks } from "./hooks/useVisualLinks";
+export { type MenuActionConfig, isRowMenu, isSelectionMenu, useVuuMenuActions, } from "./hooks/useVuuMenuActions";
+export { useVuuTables } from "./hooks/useVuuTables";
+export * from "./session-editing-form";

package/types/hooks/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./useSessionDataSource";
-export * from "./useVuuMenuActions";
-export * from "./useVuuTables";
-export * from "./useVisualLinks";
-export * from "./useTypeaheadSuggestions";