@squeed/flow-sdk 2.0.2 → 2.0.3

package/dist/index.d.cts

@@ -10,6 +10,7 @@ import { MutableRefObject } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
+import { RefObject } from 'react';
 import { StyledComponent } from '@emotion/styled';
 import { Theme } from '@emotion/react';
 
@@ -753,6 +754,26 @@ export declare const getColorVariant: (color: string) => {
 
 export declare function getDarkerHexColor(hex: string, factor?: number): string;
 
+/** Flat chrome surface: the border and halo only appear while hovered. Colors are CSS values. */
+export declare function getInteractionSurface(surface: string, border: string): {
+    "--flow-start-shadow": string;
+    "@media (hover: hover)": {
+        "&:hover": {
+            borderColor: string;
+            "@media (prefers-reduced-motion: no-preference)": {
+                animation: string;
+            };
+            boxShadow: string;
+        };
+    };
+    "--flow-rest-shadow": string;
+    "--flow-hover-shadow": string;
+    borderWidth: string;
+    borderStyle: string;
+    borderColor: string;
+    boxShadow: string;
+};
+
 export declare function getNode(json: SqueedJson, address: string): any;
 
 export declare interface JsonPlaybackState {
@@ -1179,6 +1200,18 @@ export declare function useCustomColors(theme?: any): {
     greenColor: string;
 };
 
+/**
+ * True while the pointer is within `threshold` px of one edge of `bounds`, or over any `inside`
+ * element. Used to reveal hidden edge toolbars; inactive when disabled or the pointer leaves the page.
+ */
+export declare function useEdgeProximity({ edge, enabled, bounds, inside, threshold, }: {
+    edge: "top" | "bottom";
+    enabled: boolean;
+    bounds: RefObject<HTMLElement | null>;
+    inside?: RefObject<HTMLElement | null>[];
+    threshold?: number;
+}): boolean;
+
 export declare function useFlowData(): {
     nodeById: Map<string, FlowDiagramNode>;
     edgeById: Map<string, FlowDiagramEdge>;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import { MutableRefObject } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
+import { RefObject } from 'react';
 import { StyledComponent } from '@emotion/styled';
 import { Theme } from '@emotion/react';
 
@@ -753,6 +754,26 @@ export declare const getColorVariant: (color: string) => {
 
 export declare function getDarkerHexColor(hex: string, factor?: number): string;
 
+/** Flat chrome surface: the border and halo only appear while hovered. Colors are CSS values. */
+export declare function getInteractionSurface(surface: string, border: string): {
+    "--flow-start-shadow": string;
+    "@media (hover: hover)": {
+        "&:hover": {
+            borderColor: string;
+            "@media (prefers-reduced-motion: no-preference)": {
+                animation: string;
+            };
+            boxShadow: string;
+        };
+    };
+    "--flow-rest-shadow": string;
+    "--flow-hover-shadow": string;
+    borderWidth: string;
+    borderStyle: string;
+    borderColor: string;
+    boxShadow: string;
+};
+
 export declare function getNode(json: SqueedJson, address: string): any;
 
 export declare interface JsonPlaybackState {
@@ -1179,6 +1200,18 @@ export declare function useCustomColors(theme?: any): {
     greenColor: string;
 };
 
+/**
+ * True while the pointer is within `threshold` px of one edge of `bounds`, or over any `inside`
+ * element. Used to reveal hidden edge toolbars; inactive when disabled or the pointer leaves the page.
+ */
+export declare function useEdgeProximity({ edge, enabled, bounds, inside, threshold, }: {
+    edge: "top" | "bottom";
+    enabled: boolean;
+    bounds: RefObject<HTMLElement | null>;
+    inside?: RefObject<HTMLElement | null>[];
+    threshold?: number;
+}): boolean;
+
 export declare function useFlowData(): {
     nodeById: Map<string, FlowDiagramNode>;
     edgeById: Map<string, FlowDiagramEdge>;