@cratis/scene.react 4.0.0 → 4.1.1

package/dist/esm/interactions/useInteractionHosts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInteractionHosts.js","sources":["../../../interactions/useInteractionHosts.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, useCallback, useMemo, useRef, useState } from 'react';\nimport { NotificationLevel } from '@cratis/scene.model';\nimport { BrowserDispatcherHost } from './createBrowserDispatcher';\nimport { ConfirmHost } from './ConfirmHost';\nimport { ConfirmRequest } from './ConfirmRequest';\nimport { NotificationHost } from './NotificationHost';\nimport { SceneNotification } from './SceneNotification';\nimport { UnresolvedAction } from './UnresolvedAction';\nimport { UnresolvedActionHost } from './UnresolvedActionHost';\n\n/**\n * What {@link useInteractionHosts} gives an application.\n */\nexport interface InteractionHosts {\n    /** The parts of a {@link BrowserDispatcherHost} these surfaces provide. Spread it into the host you build. */\n    readonly host: Pick<BrowserDispatcherHost, 'notify' | 'confirm' | 'onUnsupported'>;\n\n    /** The surfaces themselves. Render them once, anywhere inside the application. */\n    readonly surfaces: ReactNode;\n}\n\n/**\n * How long a notification stays before it removes itself, in milliseconds.\n */\nexport interface InteractionHostOptions {\n    /** How long a notification stays up. `0` keeps it until it is dismissed. */\n    readonly dismissAfter?: number;\n}\n\n/**\n * Provides the default surfaces for the actions that need somewhere to appear.\n *\n * `notify` and `confirm` are the two actions a document can take that have no backend and no route: they are\n * purely things the user sees. Without a surface, a host either invents one or the action goes to the console,\n * which is why these ship with Scene rather than being every application's first chore.\n *\n * The three are returned as one unit because they are wired the same way and forgetting to render one of them\n * is exactly the failure they exist to prevent:\n *\n * ```tsx\n * const { host, surfaces } = useInteractionHosts();\n * const dispatcher = useMemo(() => createBrowserDispatcher({ ...host, executeCommand, navigate }), [host]);\n *\n * return <InteractionScope dispatcher={dispatcher}>{children}{surfaces}</InteractionScope>;\n * ```\n *\n * An application with a design system of its own passes its own `notify` after the spread and keeps the rest.\n * @param options The {@link InteractionHostOptions}.\n * @returns The {@link InteractionHosts}.\n */\nexport function useInteractionHosts(options: InteractionHostOptions = {}): InteractionHosts {\n    const { dismissAfter = 6000 } = options;\n    const [notifications, setNotifications] = useState<readonly SceneNotification[]>([]);\n    const [unresolved, setUnresolved] = useState<readonly UnresolvedAction[]>([]);\n    const [request, setRequest] = useState<ConfirmRequest | undefined>(undefined);\n    const nextId = useRef(0);\n\n    const dismiss = useCallback((id: number) => setNotifications(current => current.filter(_ => _.id !== id)), []);\n\n    const notify = useCallback((level: NotificationLevel, message: string) => {\n        const id = nextId.current++;\n        setNotifications(current => [...current, { id, level, message }]);\n\n        if (dismissAfter > 0) {\n            setTimeout(() => setNotifications(current => current.filter(_ => _.id !== id)), dismissAfter);\n        }\n    }, [dismissAfter]);\n\n    const confirm = useCallback((message: string) => new Promise<boolean>(resolve => {\n        setRequest({\n            message,\n            answer(confirmed) {\n                // Cleared before resolving, so the sequence that continues cannot find a question on screen\n                // that has already been answered.\n                setRequest(undefined);\n                resolve(confirmed);\n            },\n        });\n    }), []);\n\n    const onUnsupported = useCallback((action: string) => {\n        // Reported once per distinct action. An unsupported action on a hover or an interval would otherwise\n        // grow the list until it covered the application it is trying to tell you about.\n        setUnresolved(current => current.some(_ => _.action === action) ? current : [...current, { id: nextId.current++, action }]);\n    }, []);\n\n    const host = useMemo(() => ({ notify, confirm, onUnsupported }), [notify, confirm, onUnsupported]);\n\n    const surfaces = useMemo(() => (\n        <>\n            <NotificationHost notifications={notifications} onDismiss={dismiss} />\n            <ConfirmHost request={request} />\n            <UnresolvedActionHost unresolved={unresolved} />\n        </>\n    ), [notifications, dismiss, request, unresolved]);\n\n    return { host, surfaces };\n}\n"],"names":["useInteractionHosts","options","dismissAfter","notifications","setNotifications","useState","unresolved","setUnresolved","request","setRequest","undefined","nextId","useRef","dismiss","useCallback","id","current","filter","_","notify","level","message","setTimeout","confirm","Promise","resolve","answer","confirmed","onUnsupported","action","some","host","useMemo","surfaces","_jsxs","_Fragment","_jsx","NotificationHost","onDismiss","ConfirmHost","UnresolvedActionHost"],"mappings":"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"}

package/dist/esm/renderer/InteractiveComponent.js

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import 'react/jsx-runtime';
 import { useInteractions } from '../interactions/useInteractions.js';
+import '../interactions/NotificationHost.js';
 
 // Copyright (c) Cratis. All rights reserved.
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.

package/dist/esm/renderer/InteractiveComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveComponent.js","sources":["../../../renderer/InteractiveComponent.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ComponentType, ReactNode, createElement } from 'react';\nimport { ExternalComponent } from '@cratis/scene.model';\nimport { useInteractions } from '../interactions';\nimport { RegisteredComponentProps } from './ComponentRegistry';\n\nexport interface InteractiveComponentProps {\n    component: ComponentType<RegisteredComponentProps>;\n    element: ExternalComponent;\n    slots: Record<string, ReactNode[]>;\n}\n\n/**\n * Resolves an element's interactions and hands them to the component that renders it.\n *\n * This exists as a component rather than as a call inside the renderer because resolving them is a hook, and a\n * hook cannot run inside the plain function a {@link Renderer} is. Keeping the renderer plain is what lets the\n * same element tree be rendered by something that is not React at all.\n */\nexport function InteractiveComponent({ component, element, slots }: InteractiveComponentProps) {\n    const interactions = useInteractions(element.id, element.behaviors);\n    return createElement(component, { element, slots, interactions });\n}\n"],"names":["InteractiveComponent","component","element","slots","interactions","useInteractions","id","behaviors","createElement"],"mappings":";;;;AAAA;AACA;AAaA;;;;;;IAOO,SAASA,oBAAAA,CAAqB,EAAEC,SAAS,EAAEC,OAAO,EAAEC,KAAK,EAA6B,EAAA;AACzF,IAAA,MAAMC,eAAeC,eAAAA,CAAgBH,OAAAA,CAAQI,EAAE,EAAEJ,QAAQK,SAAS,CAAA;AAClE,IAAA,qBAAOC,cAAcP,SAAAA,EAAW;AAAEC,QAAAA,OAAAA;AAASC,QAAAA,KAAAA;AAAOC,QAAAA;AAAa,KAAA,CAAA;AACnE;;"}
+{"version":3,"file":"InteractiveComponent.js","sources":["../../../renderer/InteractiveComponent.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ComponentType, ReactNode, createElement } from 'react';\nimport { ExternalComponent } from '@cratis/scene.model';\nimport { useInteractions } from '../interactions';\nimport { RegisteredComponentProps } from './ComponentRegistry';\n\nexport interface InteractiveComponentProps {\n    component: ComponentType<RegisteredComponentProps>;\n    element: ExternalComponent;\n    slots: Record<string, ReactNode[]>;\n}\n\n/**\n * Resolves an element's interactions and hands them to the component that renders it.\n *\n * This exists as a component rather than as a call inside the renderer because resolving them is a hook, and a\n * hook cannot run inside the plain function a {@link Renderer} is. Keeping the renderer plain is what lets the\n * same element tree be rendered by something that is not React at all.\n */\nexport function InteractiveComponent({ component, element, slots }: InteractiveComponentProps) {\n    const interactions = useInteractions(element.id, element.behaviors);\n    return createElement(component, { element, slots, interactions });\n}\n"],"names":["InteractiveComponent","component","element","slots","interactions","useInteractions","id","behaviors","createElement"],"mappings":";;;;;AAAA;AACA;AAaA;;;;;;IAOO,SAASA,oBAAAA,CAAqB,EAAEC,SAAS,EAAEC,OAAO,EAAEC,KAAK,EAA6B,EAAA;AACzF,IAAA,MAAMC,eAAeC,eAAAA,CAAgBH,OAAAA,CAAQI,EAAE,EAAEJ,QAAQK,SAAS,CAAA;AAClE,IAAA,qBAAOC,cAAcP,SAAAA,EAAW;AAAEC,QAAAA,OAAAA;AAASC,QAAAA,KAAAA;AAAOC,QAAAA;AAAa,KAAA,CAAA;AACnE;;"}