@datalayer/core 0.0.26 → 1.0.1

package/lib/state/substates/LayoutState.d.ts

@@ -15,7 +15,7 @@ export type PortalDisplay = {
     portal: ReactPortal;
     pinned: boolean;
 };
-export type ScreenshotDisplay = {
+export type ScreencaptureDisplay = {
     open: boolean;
     message?: string | void;
 };
@@ -30,13 +30,13 @@ export type ILayoutState = {
     organization?: IAnyOrganization;
     rightPortal?: PortalDisplay;
     screenCapture?: string;
-    screenshot?: ScreenshotDisplay;
+    screenshot?: ScreencaptureDisplay;
     space?: IAnySpace;
     team?: IAnyTeam;
 };
 export type LayoutState = ILayoutState & {
     hideBackdrop: () => void;
-    hideScreenshot: () => void;
+    hideScreencapture: () => void;
     reset: () => void;
     resetForcedLeftPortal: () => void;
     resetForcedRightPortal: () => void;
@@ -48,9 +48,9 @@ export type LayoutState = ILayoutState & {
     setLeftPortal: (leftPortal: PortalDisplay) => void;
     setLeftSidebarVariant: (leftSidebarVariant: LeftSidebarVariant) => void;
     setRightPortal: (rightPortal: PortalDisplay) => void;
-    setScreenCapture: (screenCapture?: string) => void;
+    setScreencapture: (screenCapture?: string) => void;
     showBackdrop: (message?: string) => void;
-    showScreenshot: (message?: string) => void;
+    showScreencapture: (message?: string) => void;
     triggerItemsRefresh: () => void;
     updateLayoutOrganization: (organization?: Partial<IAnyOrganization>) => void;
     updateLayoutSpace: (space?: Partial<IAnySpace>) => void;

package/lib/state/substates/LayoutState.js

@@ -20,12 +20,12 @@ export const layoutStore = createStore((set, get) => ({
     hideBackdrop: () => set((state) => ({
         backdrop: { open: false, message: undefined },
     })),
-    hideScreenshot: () => set((state) => ({
+    hideScreencapture: () => set((state) => ({
         screenshot: { open: false, message: undefined },
     })),
     setBootstrapped: (bootstrapped) => set((state) => ({ bootstrapped })),
     showBackdrop: (message) => set((state) => ({ backdrop: { open: true, message } })),
-    showScreenshot: (message) => set((state) => ({ screenshot: { open: true, message } })),
+    showScreencapture: (message) => set((state) => ({ screenshot: { open: true, message } })),
     setBanner: (bannerDisplay) => set((state) => ({
         banner: {
             timestamp: new Date(),
@@ -78,7 +78,7 @@ export const layoutStore = createStore((set, get) => ({
     triggerItemsRefresh: () => set((state) => ({
         itemsRefreshCount: state.itemsRefreshCount + 1,
     })),
-    setScreenCapture: (screenCapture) => set((state) => ({ screenCapture })),
+    setScreencapture: (screenCapture) => set((state) => ({ screenCapture })),
     reset: () => set((state) => ({ bootstrapped: false })),
 }));
 export function useLayoutStore(selector) {

package/lib/theme/DatalayerTheme.js

@@ -74,9 +74,9 @@ const datalayerThemeDefs = {
                         hoverBg: datalayerColors.greenHover,
                         hoverBorder: datalayerColors.greenHover,
                         selectedBg: datalayerColors.greenHover,
-                        disabledText: 'rgba(255, 255, 255, 0.7)',
-                        disabledBg: datalayerColors.gray,
-                        disabledBorder: datalayerColors.gray,
+                        disabledText: 'rgba(255, 255, 255, 0.8)',
+                        disabledBg: '#94C9B9',
+                        disabledBorder: '#94C9B9',
                         icon: datalayerColors.white,
                         counterBg: 'rgba(0, 0, 0, 0.2)',
                     },
@@ -165,8 +165,8 @@ const datalayerThemeDefs = {
                         hoverBorder: 'rgba(240, 246, 252, 0.1)',
                         selectedBg: datalayerColors.greenBright,
                         disabledText: 'rgba(255, 255, 255, 0.5)',
-                        disabledBg: 'rgba(22, 160, 133, 0.6)',
-                        disabledBorder: 'rgba(240, 246, 252, 0.1)',
+                        disabledBg: 'rgba(22, 160, 133, 0.35)',
+                        disabledBorder: 'rgba(22, 160, 133, 0.2)',
                         icon: datalayerColors.white,
                         counterBg: 'rgba(0, 0, 0, 0.2)',
                     },

package/lib/utils/Screencapture.d.ts

@@ -0,0 +1 @@
+export declare const takeHTMLNodeScreencapture: (node: HTMLDivElement) => Promise<string>;

package/lib/utils/{Screenshot.js → Screencapture.js}

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import html2canvas from 'html2canvas';
-export const takeHTMLNodeScreenshot = async (node) => {
+export const takeHTMLNodeScreencapture = async (node) => {
     const sc = html2canvas(node, {
         width: node.getBoundingClientRect().width,
         height: node.getBoundingClientRect().height,

package/lib/utils/index.js

@@ -23,7 +23,7 @@ export * from './Notebook';
 export * from './Number';
 export * from './Plots';
 export * from './Random';
-// export * from './Screenshot'; Do not export html2canvas for now.
+// export * from './Screencapture'; Do not export html2canvas for now.
 export * from './Sleep';
 export * from './Snapshot';
 export * from './String';

package/lib/views/datasources/DatasourceNew.d.ts

@@ -1,2 +1,8 @@
-export declare const DatasourceNew: () => import("react/jsx-runtime").JSX.Element;
+export type DatasourceNewProps = {
+    /** Route to navigate after creating a datasource. Defaults to '/settings/integrations/datasources'. */
+    datasourcesListRoute?: string;
+    /** Route to navigate to the secrets page. Defaults to '/settings/iam/secrets'. */
+    secretsRoute?: string;
+};
+export declare const DatasourceNew: ({ datasourcesListRoute, secretsRoute, }?: DatasourceNewProps) => import("react/jsx-runtime").JSX.Element;
 export default DatasourceNew;

package/lib/views/datasources/DatasourceNew.js

@@ -8,7 +8,7 @@ import { PageHeader, FormControl, Button, TextInput, Text, Textarea, Select, Fla
 import { Box } from '@datalayer/primer-addons';
 import { useCache, useNavigate, useToast } from '../../hooks';
 import { useRunStore } from '../../state';
-export const DatasourceNew = () => {
+export const DatasourceNew = ({ datasourcesListRoute = '/settings/integrations/datasources', secretsRoute = '/settings/iam/secrets', } = {}) => {
     const runStore = useRunStore();
     const { useCreateDatasource } = useCache();
     const createDatasourceMutation = useCreateDatasource();
@@ -99,7 +99,7 @@ export const DatasourceNew = () => {
             onSuccess: (resp) => {
                 if (resp.success) {
                     enqueueToast(resp.message, { variant: 'success' });
-                    navigate(`/settings/integrations/datasources`);
+                    navigate(datasourcesListRoute);
                 }
             },
             onSettled: () => {
@@ -107,7 +107,7 @@ export const DatasourceNew = () => {
             },
         });
     };
-    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Datasource" }) }) }), _jsxs(Flash, { variant: "warning", children: [formValues.variant === 'athena' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://aws.amazon.com/athena", children: "Amazon Athena" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secrets" }), ' ', "are available:", '  ', _jsx(Text, { as: "code", children: "AWS_SECRET_ACCESS_KEY" }), '  ', _jsx(Text, { as: "code", children: "AWS_ACCESS_KEY_ID" }), '  ', _jsx(Text, { as: "code", children: "AWS_DEFAULT_REGION" })] })), formValues.variant === 'bigquery' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://cloud.google.com/bigquery", children: "Google Big Query" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "GOOGLE_APPLICATION_CREDENTIALS" })] })), formValues.variant === 'mssentinel' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://learn.microsoft.com/en-us/azure/sentinel/overview?tabs=defender-portaly", children: "Microsoft Sentinel" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "AZURE_TENANT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_SECRET" }), ` `, _jsx(Text, { as: "code", children: "AZURE_SUBSCRIPTION_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_RESOURCE_GROUP" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_ID" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_NAME" })] })), formValues.variant === 'splunk' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://www.splunk.com/", children: "Splunk" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/settings/iam/secrets', e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "SPLUNK_HOST" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PORT" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_USERNAME" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PASSWORD" })] }))] }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Datasource type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: [_jsx(Select.Option, { value: "athena", children: "Amazon Athena" }), _jsx(Select.Option, { value: "bigquery", children: "Google BigQuery" }), _jsx(Select.Option, { value: "mssentinel", children: "Microsoft Sentinel" }), _jsx(Select.Option, { value: "splunk", children: "Splunk" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate datasource type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The datasource name is a short name that identifies in a unique way your datasource." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), formValues.variant === 'athena' && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Database" }), _jsx(TextInput, { block: true, value: formValues.database, onChange: valueDatabaseChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Database must have more than 1." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Output Bucket" }), _jsx(TextInput, { block: true, value: formValues.outputBucket, onChange: valueOutputBucketChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Output bucket must have more than 1." }))] })] })), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.database ||
+    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Datasource" }) }) }), _jsxs(Flash, { variant: "warning", children: [formValues.variant === 'athena' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://aws.amazon.com/athena", children: "Amazon Athena" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secrets" }), ' ', "are available:", '  ', _jsx(Text, { as: "code", children: "AWS_SECRET_ACCESS_KEY" }), '  ', _jsx(Text, { as: "code", children: "AWS_ACCESS_KEY_ID" }), '  ', _jsx(Text, { as: "code", children: "AWS_DEFAULT_REGION" })] })), formValues.variant === 'bigquery' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://cloud.google.com/bigquery", children: "Google Big Query" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "GOOGLE_APPLICATION_CREDENTIALS" })] })), formValues.variant === 'mssentinel' && (_jsxs(Text, { children: ["For", ' ', _jsx(Link, { href: "https://learn.microsoft.com/en-us/azure/sentinel/overview?tabs=defender-portaly", children: "Microsoft Sentinel" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "AZURE_TENANT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_CLIENT_SECRET" }), ` `, _jsx(Text, { as: "code", children: "AZURE_SUBSCRIPTION_ID" }), ` `, _jsx(Text, { as: "code", children: "AZURE_RESOURCE_GROUP" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_ID" }), ` `, _jsx(Text, { as: "code", children: "MSSENTINEL_WORKSPACE_NAME" })] })), formValues.variant === 'splunk' && (_jsxs(Text, { children: ["For ", _jsx(Link, { href: "https://www.splunk.com/", children: "Splunk" }), ", ensure the following", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate(secretsRoute, e), children: "Secret" }), ' ', "is available:", '  ', _jsx(Text, { as: "code", children: "SPLUNK_HOST" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PORT" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_USERNAME" }), ` `, _jsx(Text, { as: "code", children: "SPLUNK_PASSWORD" })] }))] }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Datasource type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: [_jsx(Select.Option, { value: "athena", children: "Amazon Athena" }), _jsx(Select.Option, { value: "bigquery", children: "Google BigQuery" }), _jsx(Select.Option, { value: "mssentinel", children: "Microsoft Sentinel" }), _jsx(Select.Option, { value: "splunk", children: "Splunk" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate datasource type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The datasource name is a short name that identifies in a unique way your datasource." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), formValues.variant === 'athena' && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Database" }), _jsx(TextInput, { block: true, value: formValues.database, onChange: valueDatabaseChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Database must have more than 1." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Output Bucket" }), _jsx(TextInput, { block: true, value: formValues.outputBucket, onChange: valueOutputBucketChange }), validationResult.database === false && (_jsx(FormControl.Validation, { variant: "error", children: "Output bucket must have more than 1." }))] })] })), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.database ||
                                     !validationResult.outputBucket ||
                                     !validationResult.name ||
                                     !validationResult.description, sx: { marginTop: 2 }, onClick: e => {

package/lib/views/datasources/Datasources.d.ts

@@ -1,2 +1,8 @@
-export declare const Datasources: () => import("react/jsx-runtime").JSX.Element;
+export type DatasourcesProps = {
+    /** Route to navigate when clicking "New datasource" button. Defaults to '/new/datasource'. */
+    newDatasourceRoute?: string;
+    /** Base route for the datasources list (used for edit navigation). Defaults to current relative path. */
+    datasourcesListRoute?: string;
+};
+export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, }?: DatasourcesProps) => import("react/jsx-runtime").JSX.Element;
 export default Datasources;

package/lib/views/datasources/Datasources.js

@@ -9,7 +9,7 @@ import { Blankslate, PageHeader, Table, DataTable, } from '@primer/react/experim
 import { Box } from '@datalayer/primer-addons';
 import { EditIcon } from '@datalayer/icons-react';
 import { useCache, useNavigate } from '../../hooks';
-const DatasourcesTable = () => {
+const DatasourcesTable = ({ datasourcesListRoute, }) => {
     const { useDatasources } = useCache();
     const datasourcesQuery = useDatasources();
     const navigate = useNavigate();
@@ -38,12 +38,14 @@ const DatasourcesTable = () => {
                     {
                         header: '',
                         field: 'id',
-                        renderCell: datasource => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${datasource.id}`, e) })),
+                        renderCell: datasource => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(datasourcesListRoute
+                                ? `${datasourcesListRoute}/${datasource.id}`
+                                : `${datasource.id}`, e) })),
                     },
                 ] })] }));
 };
-export const Datasources = () => {
+export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasourcesListRoute, } = {}) => {
     const navigate = useNavigate();
-    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Datasources" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/new/datasource', e), children: "New datasource" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(DatasourcesTable, {}) }) })] }));
+    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Datasources" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newDatasourceRoute, e), children: "New datasource" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute }) }) })] }));
 };
 export default Datasources;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "0.0.26",
+  "version": "1.0.1",
   "type": "module",
   "workspaces": [
     ".",

package/style/screencapture/index.css

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+.crosshairs {
+  position: fixed;
+  width: 100%;
+  z-index: 2147483645;
+}
+
+.crosshairs.hidden {
+  display: none;
+}
+
+.crosshairs::before,
+.crosshairs::after {
+  content: '';
+  position: absolute;
+}
+
+.crosshairs::before {
+  height: 24px;
+  width: 2px;
+  background: #fff;
+  top: -11px;
+}
+
+.crosshairs::after {
+  width: 24px;
+  height: 2px;
+  background: #fff;
+  left: -11px;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.overlay.highlighting {
+  background: none;
+  border-color: rgba(0, 0, 0, 0.5);
+  border-style: solid;
+}
+
+.crosshairs,
+.crosshairs:before,
+.crosshairs:after,
+.overlay,
+.overlay:before,
+.overlay:after {
+  box-sizing: border-box;
+}

package/lib/components/screenshot/ScreenCaptureButton.d.ts

@@ -1,3 +0,0 @@
-import { PropsWithChildren } from 'react';
-export declare const ScreenCaptureButton: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-export default ScreenCaptureButton;

package/lib/components/screenshot/index.d.ts

@@ -1,2 +0,0 @@
-export * from './ScreenCapture';
-export * from './ScreenCaptureButton';

package/lib/hooks/layouts/LayoutScreenshot.d.ts

@@ -1,3 +0,0 @@
-import './LayoutScreenshot.css';
-export declare const LayoutScreenshot: () => import("react/jsx-runtime").JSX.Element;
-export default LayoutScreenshot;

package/lib/hooks/useScreenshot.d.ts

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-export type ScreenshotContextType = {
-    closeScreenshot: () => void;
-    displayScreenshot: (nextScreenshot: any) => void;
-};
-export declare const ScreenshotContext: import("react").Context<ScreenshotContextType>;
-export declare function useScreenshot(): ScreenshotContextType;
-/**
- * The type for the Screenshot context provider.
- */
-export declare const ScreenshotContextProvider: import("react").Provider<ScreenshotContextType>;
-export type IScreenshotProviderProps = {
-    children?: ReactNode;
-    zIndex?: number;
-    disableDarken?: boolean;
-    screenshotSurface?: (qfds: any) => JSX.Element;
-};
-export declare function ScreenshotProvider({ children, zIndex, disableDarken, screenshotSurface, }: IScreenshotProviderProps): import("react/jsx-runtime").JSX.Element;

package/lib/hooks/useScreenshot.js

@@ -1,53 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { createContext, useState, useContext } from 'react';
-import { LayoutScreenshot } from './layouts';
-export const ScreenshotContext = createContext({
-    closeScreenshot: () => { },
-    displayScreenshot: (nextScreenshot) => { },
-});
-export function useScreenshot() {
-    const context = useContext(ScreenshotContext);
-    if (!context)
-        throw new Error('useContext must be inside a provider with a value.');
-    return context;
-}
-/**
- * The type for the Screenshot context provider.
- */
-export const ScreenshotContextProvider = ScreenshotContext.Provider;
-export function ScreenshotProvider({ children = null, zIndex = 9999, disableDarken = false, screenshotSurface = undefined, }) {
-    const defaultScreenshotSurface = {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: disableDarken ? 'initial' : 'rgba(0, 0, 0, 0.5)',
-        zIndex,
-    };
-    const [screenshot, setScreenshot] = useState({
-        open: false,
-        render: (closeScreenshot) => _jsx(_Fragment, {}),
-    });
-    const displayScreenshot = (nextScreenshot) => {
-        setScreenshot({
-            open: true,
-            render: nextScreenshot,
-        });
-    };
-    const closeScreenshot = () => {
-        setScreenshot({
-            open: false,
-            render: (closeScreenshot) => _jsx(_Fragment, {}),
-        });
-    };
-    return (_jsxs(ScreenshotContextProvider, { value: { closeScreenshot, displayScreenshot }, children: [_jsx(LayoutScreenshot, {}), children, screenshot.open &&
-                (screenshotSurface ? (screenshotSurface(screenshot.render(closeScreenshot))) : (_jsx("div", { style: defaultScreenshotSurface, children: screenshot.render(closeScreenshot) })))] }));
-}

package/lib/utils/Screenshot.d.ts

@@ -1 +0,0 @@
-export declare const takeHTMLNodeScreenshot: (node: HTMLDivElement) => Promise<string>;