@squeed/flow-sdk 2.0.2 → 2.0.4

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';
 
@@ -138,6 +139,7 @@ export declare const contentObjTheme: (color: any) => {
 
 declare interface ContractPort {
     kind: "input" | "config" | "output" | "error";
+    label?: string;
     resourceType?: string;
     multiple?: boolean;
 }
@@ -537,7 +539,7 @@ export declare interface FlowDiagramNode {
 export declare interface FlowDiagramProps {
     /** Show the loader while the host fetches data; initial compilation waits until false. */
     loading?: boolean;
-    /** Custom loading content. Defaults to an accessible status message. Also shown while new JSON is prepared. */
+    /** Custom loading content while fetching or preparing JSON. Set null to hide the overlay; aria-busy and the interaction lock remain active. */
     loader?: React.ReactNode;
     /** Title shown on the root node */
     title?: string;
@@ -634,10 +636,11 @@ export declare interface FlowNodeCreationRequest {
     };
 }
 
-export declare function FlowPort({ id, role, side, position, placement, children, style, }: FlowPortProps): JSX_2.Element;
+export declare function FlowPort({ id, label, role, side, position, placement, children, style, }: FlowPortProps): JSX_2.Element;
 
 export declare interface FlowPortProps {
     id: string;
+    label?: string;
     role: "source" | "target";
     side?: PortSide;
     position?: number;
@@ -753,6 +756,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 +1202,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';
 
@@ -138,6 +139,7 @@ export declare const contentObjTheme: (color: any) => {
 
 declare interface ContractPort {
     kind: "input" | "config" | "output" | "error";
+    label?: string;
     resourceType?: string;
     multiple?: boolean;
 }
@@ -537,7 +539,7 @@ export declare interface FlowDiagramNode {
 export declare interface FlowDiagramProps {
     /** Show the loader while the host fetches data; initial compilation waits until false. */
     loading?: boolean;
-    /** Custom loading content. Defaults to an accessible status message. Also shown while new JSON is prepared. */
+    /** Custom loading content while fetching or preparing JSON. Set null to hide the overlay; aria-busy and the interaction lock remain active. */
     loader?: React.ReactNode;
     /** Title shown on the root node */
     title?: string;
@@ -634,10 +636,11 @@ export declare interface FlowNodeCreationRequest {
     };
 }
 
-export declare function FlowPort({ id, role, side, position, placement, children, style, }: FlowPortProps): JSX_2.Element;
+export declare function FlowPort({ id, label, role, side, position, placement, children, style, }: FlowPortProps): JSX_2.Element;
 
 export declare interface FlowPortProps {
     id: string;
+    label?: string;
     role: "source" | "target";
     side?: PortSide;
     position?: number;
@@ -753,6 +756,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 +1202,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>;