@superblocksteam/library 2.0.6 → 2.0.7

package/dist-types/lib/user-facing/components/table/table-utilities.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { HorizontalAlignment, VerticalAlignment } from "./types.js";
-import type { ColumnProperties, EditProps, SingleCellProperties, TagDisplayConfig, TagsColorAssignment, RowDensity, BooleanStyleFalse, UnknownRow } from "./types.js";
+import type { ColumnProperties, EditProps, SingleCellProperties, TagDisplayConfig, RowDensity, BooleanStyleFalse, UnknownRow, ContextualColumnProperty } from "./types.js";
 import type { IconPosition } from "../../icons/constants.js";
 import type { ButtonVariant } from "../button/props.js";
 import type { Dim } from "@superblocksteam/library-shared";
@@ -12,8 +12,7 @@ interface TableTagsProps {
     isHidden: boolean;
     cellProperties: SingleCellProperties;
     tagValues: unknown[];
-    tagsColorAssignment?: TagsColorAssignment;
-    tagsCustomColorAssignment?: Record<string, TagDisplayConfig>;
+    tagsColorAssignment?: Record<string, TagDisplayConfig>;
     rowDensity: RowDensity;
     handleCellFocus?: () => void;
     maxWidth?: number;
@@ -22,8 +21,7 @@ interface TableTagsProps {
 export type TableCellProps = SingleCellProperties & {
     isHidden: boolean;
     cellProperties: SingleCellProperties;
-    tagsColorAssignment?: TagsColorAssignment;
-    tagsCustomColorAssignment?: Record<string, TagDisplayConfig>;
+    tagsColorAssignment?: Record<string, TagDisplayConfig>;
     booleanStyleFalse?: BooleanStyleFalse;
     rowDensity: RowDensity;
     isFocused: boolean;
@@ -34,8 +32,7 @@ interface CellPosition {
     originalRowIndex: number;
     columnId: string;
 }
-export declare const sanitizeCellValue: (cellValue: any) => string;
-export declare const TagsCell: ({ isHidden, cellProperties, tagValues, tagsColorAssignment, tagsCustomColorAssignment, rowDensity, handleCellFocus, maxWidth, maxLinesPerRow, theme, }: TableTagsProps) => React.JSX.Element;
+export declare const TagsCell: ({ isHidden, cellProperties, tagValues, tagsColorAssignment, rowDensity, handleCellFocus, maxWidth, maxLinesPerRow, theme, }: TableTagsProps) => React.JSX.Element;
 interface ColumnAction {
     label: string;
     id: string;
@@ -68,9 +65,9 @@ export declare const EditableCell: (props: {
     maxLinesPerRow?: number;
     theme: UserAccessibleTheme;
 }) => React.JSX.Element;
-export declare function getCellProperties(tableCellTextStyle: TextStyleWithVariant | undefined, columnProperties: ColumnProperties, rowIndex: number): SingleCellProperties;
-export declare function getPropertyValue(value: any, index: number, preserveDataType?: boolean): any;
-export declare function getFirstPropertyValue(value: string | string[] | undefined): string | undefined;
+export declare function getCellProperties(tableCellTextStyle: TextStyleWithVariant | undefined, columnProperties: ColumnProperties, currentRow?: UnknownRow): SingleCellProperties;
+export declare function getPropertyValue<T>(value: ContextualColumnProperty<T>, currentRow?: UnknownRow): T | undefined;
+export declare function getFirstPropertyValue<T>(value: ContextualColumnProperty<T>): T;
 export declare const renderCell: ({ value, columnType, editInputType, cellProps, defaultValue, maxLinesPerRow, tableCellTextStyle, typographies, theme, }: {
     value: any;
     columnType: string;

package/dist-types/lib/user-facing/components/table/table-widget.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { TableManager } from "./table-manager.js";
 import type { InsertRowOptions } from "./constants.js";
-import type { ColumnFilter, ColumnProperties, ReactTableColumnProps, TableWidgetProps } from "./types.js";
+import type { ColumnFilter, ColumnProperties, ReactTableColumnProps, TableWidgetProps, TagDisplayConfig } from "./types.js";
 interface TableWidgetState {
     isSaving: boolean;
 }
@@ -24,6 +24,7 @@ export declare class TableWidget extends React.Component<TableWidgetProps, Table
         columnId: string;
     }[];
     eventListenerController: AbortController | undefined;
+    cachedTagColorAssignment: Record<string, Record<string, TagDisplayConfig>> | undefined;
     componentDidMount(): void;
     addEventListeners(): void;
     componentWillUnmount(): void;
@@ -37,6 +38,10 @@ export declare class TableWidget extends React.Component<TableWidgetProps, Table
     previousColumns: ReactTableColumnProps[];
     handleTableButtonClick: (columnId: string, onComplete: () => void) => void;
     getReactTableColumns(): ReactTableColumnProps[];
+    columnPropertyFunctionMap: WeakMap<WeakKey, any>;
+    functionCounter: number;
+    getColumnPropertiesString: (columnProperties: ColumnProperties) => string;
+    createTableCell(columnProperties: ColumnProperties, isHidden: boolean): (props: any) => React.JSX.Element;
     static transformData: (tableData: Array<Record<string, unknown>>, filteredOrderMap: Array<number>, columns: ReactTableColumnProps[], editOverrides: Record<number, Record<string, {
         value: unknown;
         validationErrors?: Array<string>;
@@ -57,7 +62,7 @@ export declare class TableWidget extends React.Component<TableWidgetProps, Table
     getCurrentRowIndex: (originalIndex: number) => number;
     getIsRowEdited: (rowIndex: number, isOriginalIndex?: boolean) => boolean;
     getIsRowInserted: (rowIndex: number, isOriginalIndex?: boolean) => boolean;
-    getCellBackground: (currentRowIndex: number, columnId: string) => any;
+    getCellBackground: (currentRowIndex: number, columnId: string) => string | undefined;
     getIsLoading: () => boolean;
     getDropdownOptionsLoading: () => boolean;
     render(): React.JSX.Element;
@@ -67,7 +72,7 @@ export declare class TableWidget extends React.Component<TableWidgetProps, Table
         [key: string]: number;
     }) => void;
     handleSearchTable: (searchKey: any) => void;
-    assignTagColors(tableData: Array<Record<string, unknown>>, columns: ReactTableColumnProps[]): void;
+    assignTagColors(tableData?: Array<Record<string, unknown>>, columns?: Record<string, ColumnProperties>): void;
     selectRows: (rows?: "ALL" | "NONE") => void;
     handleRowSelect: (index: number, shiftKey?: boolean) => void;
     getRowContext: (idx?: number) => {
@@ -75,9 +80,6 @@ export declare class TableWidget extends React.Component<TableWidgetProps, Table
             [key: string]: any;
         };
         rowIndex: number | undefined;
-        currentRow: {
-            [key: string]: any;
-        };
     };
     handleRowClick: (_rowData: Record<string, unknown>, index: number) => void;
     updatePageNumber: (pageNo: number) => void;

package/dist-types/lib/user-facing/components/table/types.d.ts

@@ -107,7 +107,6 @@ export type TableInserts = {
 export type RowContext = {
     row: undefined | Record<string, unknown>;
     rowIndex: undefined | number;
-    currentRow: undefined | Record<string, unknown>;
 };
 export type ColumnContext = {
     value: any;
@@ -121,15 +120,14 @@ interface TableFunctions {
         selectedRowIndices?: number[];
         selectedRows?: Array<Record<string, unknown>>;
     }, rowContext: RowContext, triggerEventHandlers: boolean) => void;
-    setPageNo: (value: number, rowContext: RowContext, triggerEventHandlers?: boolean) => void;
+    setPageNo: (value: number, triggerEventHandlers?: boolean) => void;
     setTableFilters: (columnId: string, filter: ColumnFilter, rowContext: RowContext) => void;
     setColumnOrder: (value: string[]) => void;
     setSortedColumn: (value: undefined | TableSortColumn) => void;
     setColumnSizeMap: (value: {
         [key: string]: number;
     }) => void;
-    setSearchText: (value: string, context: RowContext) => void;
-    updateTagColorAssignment: (value: TagsColorAssignment) => void;
+    setSearchText: (value: string) => void;
     onRowClicked: (context: RowContext, onComplete?: () => void) => void;
     selectAllRows: (rowIndices: number[], rows: Array<Record<string, unknown>>, rowContext: RowContext) => void;
     deselectAllRows: (rowContext: RowContext) => void;
@@ -237,6 +235,9 @@ export type ColumnPropertyFunctions = {
     onDateSelected?: () => void;
     onCheckChange?: () => void;
 };
+export type ContextualColumnProperty<T> = T | ((params: {
+    currentRow: UnknownRow;
+}) => T);
 export interface ColumnProperties extends ColumnEditConfigs, ColumnPropertiesForEditing, ColumnPropertyFunctions {
     id: string;
     label: string;
@@ -246,41 +247,41 @@ export interface ColumnProperties extends ColumnEditConfigs, ColumnPropertiesFor
     isVisible: boolean;
     index: number;
     width: number;
-    cellBackground?: string;
-    horizontalAlign?: HorizontalAlignment;
-    verticalAlign?: VerticalAlignment;
-    cellProps?: {
+    cellBackground?: ContextualColumnProperty<string>;
+    horizontalAlign?: ContextualColumnProperty<HorizontalAlignment>;
+    verticalAlign?: ContextualColumnProperty<VerticalAlignment>;
+    cellProps?: ContextualColumnProperty<{
         textStyle: TextStyleWithVariant;
-    };
+    }>;
     enableFilter?: boolean;
     enableSort?: boolean;
     isDerived: boolean;
-    computedValue: string | string[];
-    displayedValue?: string | string[];
-    buttonLabel?: string;
-    buttonBackgroundColor?: string;
-    buttonBorder?: PerSideBorder;
-    buttonVariant?: string;
-    buttonTextStyle?: TextStyleWithVariant;
-    cellIcon?: string;
-    cellIconPosition?: IconPosition;
-    buttonIcon?: string;
-    buttonIconPosition?: IconPosition;
-    isDisabled?: boolean;
-    linkUrl?: string;
-    linkLabel?: string;
-    openInNewTab?: boolean;
+    computedValue: ContextualColumnProperty<string>;
+    displayedValue?: ContextualColumnProperty<string>;
+    buttonLabel?: ContextualColumnProperty<string>;
+    buttonBackgroundColor?: ContextualColumnProperty<string>;
+    buttonBorder?: ContextualColumnProperty<PerSideBorder>;
+    buttonVariant?: ContextualColumnProperty<string>;
+    buttonTextStyle?: ContextualColumnProperty<TextStyleWithVariant>;
+    cellIcon?: ContextualColumnProperty<string>;
+    cellIconPosition?: ContextualColumnProperty<IconPosition>;
+    buttonIcon?: ContextualColumnProperty<string>;
+    buttonIconPosition?: ContextualColumnProperty<IconPosition>;
+    isDisabled?: ContextualColumnProperty<boolean>;
+    linkUrl?: ContextualColumnProperty<string>;
+    linkLabel?: ContextualColumnProperty<string>;
+    openInNewTab?: ContextualColumnProperty<boolean>;
     booleanStyleFalse?: BooleanStyleFalse;
-    isEditable?: boolean | string;
+    isEditable?: ContextualColumnProperty<boolean>;
     isFrozen?: boolean;
-    textWrap?: boolean;
-    tagsWrap?: boolean;
+    textWrap?: ContextualColumnProperty<boolean>;
+    tagsWrap?: ContextualColumnProperty<boolean>;
     tagDisplayConfig: Record<string, TagDisplayConfig>;
-    imageSize?: ImageSize;
-    imageBorderRadius?: PerCornerBorderRadius;
-    openImageUrl?: boolean;
-    outputFormat?: string;
-    inputFormat?: string;
+    imageSize?: ContextualColumnProperty<ImageSize>;
+    imageBorderRadius?: ContextualColumnProperty<PerCornerBorderRadius>;
+    openImageUrl?: ContextualColumnProperty<boolean>;
+    outputFormat?: ContextualColumnProperty<string>;
+    inputFormat?: ContextualColumnProperty<string>;
 }
 export type EditProps = ColumnEditConfigs & {
     handleEditStart: () => void;
@@ -382,6 +383,7 @@ export interface TableWidgetProps extends TableFunctions {
     columnHeaderProps?: {
         textStyle: TextStyleWithVariant;
     };
+    columnHeaderTextWrap?: boolean;
     searchProps?: {
         textStyle?: TextStyleWithVariant;
         border?: PerSideBorder;

package/dist-types/lib/user-facing/components/text/index.d.ts

@@ -1,56 +1,56 @@
 export declare const SbText: import("react").FC<import("../../properties-panel/props-builder.js").ExternalProps<{
-    general: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
-        text: import("../../properties-panel/props-builder.js").Prop<string, false>;
-        textType: import("../../properties-panel/props-builder.js").Prop<"number" | "time" | "text" | "date" | "currency", true>;
+    general: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        text: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        textType: import("../../properties-panel/props-builder.js").Prop<"number" | "time" | "text" | "date" | "currency", true, undefined>;
     }>;
-    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & ({
-        textStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
-        horizontalAlign: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").HorizontalAlign, true>;
-        verticalAlign: import("../../properties-panel/props-builder.js").Prop<import("./props.js").VerticalAlign, true>;
-        wrapText: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
-        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
-        shouldScroll: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
-        icon: import("../../properties-panel/props-builder.js").Prop<string, false>;
-        iconPosition: import("../../properties-panel/props-builder.js").Prop<import("../../icons/constants.js").IconPosition, true>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & ({
+        textStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        horizontalAlign: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").HorizontalAlign, true, undefined>;
+        verticalAlign: import("../../properties-panel/props-builder.js").Prop<import("./props.js").VerticalAlign, true, undefined>;
+        wrapText: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        shouldScroll: import("../../properties-panel/props-builder.js").Prop<boolean, false, undefined>;
+        icon: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        iconPosition: import("../../properties-panel/props-builder.js").Prop<import("../../icons/constants.js").IconPosition, true, undefined>;
     } & (Omit<{
-        textType: import("../../properties-panel/props-builder.js").Prop<"number" | "time" | "text" | "date" | "currency", false>;
+        textType: import("../../properties-panel/props-builder.js").Prop<"number" | "time" | "text" | "date" | "currency", false, undefined>;
     }, "textType" | "dateInputFormat" | "dateOutputFormat"> & ({
-        minDecimals: import("../../properties-panel/props-builder.js").Prop<number, false>;
-        maxDecimals: import("../../properties-panel/props-builder.js").Prop<number, false>;
-        textType: import("../../properties-panel/props-builder.js").Prop<"currency", true>;
-        currency: import("../../properties-panel/props-builder.js").Prop<string, true>;
-        numberFormat: import("../../properties-panel/props-builder.js").Prop<"compact" | "standard" | "scientific" | "engineering" | "unformatted", true>;
+        minDecimals: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        maxDecimals: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        textType: import("../../properties-panel/props-builder.js").Prop<"currency", true, undefined>;
+        currency: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        numberFormat: import("../../properties-panel/props-builder.js").Prop<"compact" | "standard" | "scientific" | "engineering" | "unformatted", true, undefined>;
         dateInputFormat?: undefined;
         dateOutputFormat?: undefined;
     } | {
-        minDecimals: import("../../properties-panel/props-builder.js").Prop<number, false>;
-        maxDecimals: import("../../properties-panel/props-builder.js").Prop<number, false>;
-        textType: import("../../properties-panel/props-builder.js").Prop<"number", true>;
-        numberFormat: import("../../properties-panel/props-builder.js").Prop<"compact" | "standard" | "scientific" | "engineering" | "unformatted", true>;
+        minDecimals: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        maxDecimals: import("../../properties-panel/props-builder.js").Prop<number, false, undefined>;
+        textType: import("../../properties-panel/props-builder.js").Prop<"number", true, undefined>;
+        numberFormat: import("../../properties-panel/props-builder.js").Prop<"compact" | "standard" | "scientific" | "engineering" | "unformatted", true, undefined>;
         dateInputFormat?: undefined;
         dateOutputFormat?: undefined;
     } | {
-        textType: import("../../properties-panel/props-builder.js").Prop<"date", true>;
-        dateInputFormat: import("../../properties-panel/props-builder.js").Prop<string, false>;
-        dateOutputFormat: import("../../properties-panel/props-builder.js").Prop<string, false>;
+        textType: import("../../properties-panel/props-builder.js").Prop<"date", true, undefined>;
+        dateInputFormat: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        dateOutputFormat: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
     })))>;
-    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
-        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
-        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
-        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
-        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
-        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
-        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
     } & {
         margin: import("../../properties-panel/props-builder.js").Prop<{
             top: import("@superblocksteam/library-shared").Dim<"px">;
             bottom: import("@superblocksteam/library-shared").Dim<"px">;
             left: import("@superblocksteam/library-shared").Dim<"px">;
             right: import("@superblocksteam/library-shared").Dim<"px">;
-        } | undefined, true>;
+        } | undefined, true, undefined>;
     } & {
-        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
     } & {
-        shouldScroll: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+        shouldScroll: import("../../properties-panel/props-builder.js").Prop<boolean, false, undefined>;
     }>;
 }>>;

package/dist-types/lib/user-facing/components/text/props.d.ts

@@ -10,58 +10,58 @@ import type { Typographies } from "@superblocksteam/library-shared/types";
 export declare const DEFAULT_TEXT_WIDGET_TEXT_STYLE_VARIANT: keyof Typographies;
 export type VerticalAlign = "top" | "center" | "bottom";
 export declare const propertiesDefinition: {
-    general: Section<Record<string, Prop<any, any>> & {
-        text: Prop<string, false>;
-        textType: Prop<"number" | "time" | "text" | "date" | "currency", true>;
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        text: Prop<string, false, undefined>;
+        textType: Prop<"number" | "time" | "text" | "date" | "currency", true, undefined>;
     }>;
-    appearance: Section<Record<string, Prop<any, any>> & ({
-        textStyle: Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
-        horizontalAlign: Prop<HorizontalAlign, true>;
-        verticalAlign: Prop<VerticalAlign, true>;
-        wrapText: Prop<boolean, true>;
-        loading: Prop<boolean, true>;
-        shouldScroll: Prop<boolean, false>;
-        icon: Prop<string, false>;
-        iconPosition: Prop<IconPosition, true>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & ({
+        textStyle: Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        horizontalAlign: Prop<HorizontalAlign, true, undefined>;
+        verticalAlign: Prop<VerticalAlign, true, undefined>;
+        wrapText: Prop<boolean, true, undefined>;
+        loading: Prop<boolean, true, undefined>;
+        shouldScroll: Prop<boolean, false, undefined>;
+        icon: Prop<string, false, undefined>;
+        iconPosition: Prop<IconPosition, true, undefined>;
     } & (Omit<{
-        textType: Prop<"number" | "time" | "text" | "date" | "currency", false>;
+        textType: Prop<"number" | "time" | "text" | "date" | "currency", false, undefined>;
     }, "textType" | "dateInputFormat" | "dateOutputFormat"> & ({
-        minDecimals: Prop<number, false>;
-        maxDecimals: Prop<number, false>;
-        textType: Prop<"currency", true>;
-        currency: Prop<string, true>;
-        numberFormat: Prop<"compact" | "standard" | "scientific" | "engineering" | "unformatted", true>;
+        minDecimals: Prop<number, false, undefined>;
+        maxDecimals: Prop<number, false, undefined>;
+        textType: Prop<"currency", true, undefined>;
+        currency: Prop<string, true, undefined>;
+        numberFormat: Prop<"compact" | "standard" | "scientific" | "engineering" | "unformatted", true, undefined>;
         dateInputFormat?: undefined;
         dateOutputFormat?: undefined;
     } | {
-        minDecimals: Prop<number, false>;
-        maxDecimals: Prop<number, false>;
-        textType: Prop<"number", true>;
-        numberFormat: Prop<"compact" | "standard" | "scientific" | "engineering" | "unformatted", true>;
+        minDecimals: Prop<number, false, undefined>;
+        maxDecimals: Prop<number, false, undefined>;
+        textType: Prop<"number", true, undefined>;
+        numberFormat: Prop<"compact" | "standard" | "scientific" | "engineering" | "unformatted", true, undefined>;
         dateInputFormat?: undefined;
         dateOutputFormat?: undefined;
     } | {
-        textType: Prop<"date", true>;
-        dateInputFormat: Prop<string, false>;
-        dateOutputFormat: Prop<string, false>;
+        textType: Prop<"date", true, undefined>;
+        dateInputFormat: Prop<string, false, undefined>;
+        dateOutputFormat: Prop<string, false, undefined>;
     })))>;
-    layout: Section<Record<string, Prop<any, any>> & {
-        maxHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
-        minHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
-        maxWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
-        minWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
-        width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false>;
-        height: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & {
+        maxHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+        height: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
     } & {
         margin: Prop<{
             top: Dim<"px">;
             bottom: Dim<"px">;
             left: Dim<"px">;
             right: Dim<"px">;
-        } | undefined, true>;
+        } | undefined, true, undefined>;
     } & {
-        isVisible: Prop<boolean, true>;
+        isVisible: Prop<boolean, true, undefined>;
     } & {
-        shouldScroll: Prop<boolean, false>;
+        shouldScroll: Prop<boolean, false, undefined>;
     }>;
 };

package/dist-types/lib/user-facing/constants.d.ts

@@ -1,2 +1,2 @@
 export declare const CANVAS_ROOT_ID = "canvas-root";
-export declare const MODAL_TARGET_ROOT_ID = "modal-target-root";
+export declare const PORTAL_ROOT_ID = "portal-root";

package/dist-types/lib/user-facing/entities/api/props.d.ts

@@ -1,20 +1,29 @@
 import { Section, Prop, type InternalProps } from "../../properties-panel/props-builder.js";
-export type ApiEntity = InternalProps<typeof propertiesDefinition> & {
+import { SuspensibleAPI } from "./suspensible-api.js";
+export type ApiEntity = Omit<InternalProps<typeof propertiesDefinition>, "_suspensibleApi"> & {
     run: () => Promise<any>;
     cancel: () => Promise<any>;
+    _suspensibleApi: SuspensibleAPI<any, any[]>;
 };
 export declare const propertiesDefinition: {
-    events: Section<Record<string, Prop<any, any>> & {
-        onSuccess: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
-        onError: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    events: Section<Record<string, Prop<any, any, undefined>> & {
+        onSuccess: Prop<import("../../sb-event-flow.js").SbEventFlow, false, undefined>;
+        onError: Prop<import("../../sb-event-flow.js").SbEventFlow, false, undefined>;
     }>;
-    metadata: Section<Record<string, Prop<any, any>> & {
-        response: Prop<any, true>;
-        error: Prop<any, true>;
-        isRunning: Prop<boolean, true>;
+    metadata: Section<Record<string, Prop<any, any, undefined>> & {
+        response: Prop<any, true, undefined>;
+        error: Prop<any, true, undefined>;
+        isLoading: Prop<boolean, true, undefined>;
     }>;
-    functions: Section<Record<string, Prop<any, any>> & {
-        run: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], Promise<any>>, true>;
-        cancel: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], Promise<void>>, true>;
+    functions: Section<Record<string, Prop<any, any, undefined>> & {
+        run: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], Promise<any>>, true, undefined>;
+        cancel: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], Promise<void>>, true, undefined>;
+    }>;
+    internal: Section<Record<string, Prop<any, any, undefined>> & {
+        /**
+         * Internal SuspensibleAPI instance that manages loading states and React Suspense integration.
+         * This property is hidden from the public interface but accessible to other properties.
+         */
+        _suspensibleApi: Prop<SuspensibleAPI<any, []>, true, undefined>;
     }>;
 };

package/dist-types/lib/user-facing/entities/api/suspensible-api.d.ts

@@ -0,0 +1,20 @@
+export declare class SuspensibleAPI<TData = any, TArgs extends any[] = any[]> {
+    private _response;
+    private _error;
+    private _promise;
+    private _isLoading;
+    private _runFn;
+    private _cancelFn;
+    constructor({ runFn, cancelFn, }: {
+        runFn: (...args: TArgs) => Promise<TData>;
+        cancelFn: (...args: TArgs) => Promise<void>;
+    });
+    /**
+     * Context-aware response getter that either returns data or throws promises to trigger React Suspense.
+     */
+    get response(): TData | undefined;
+    get isLoading(): boolean;
+    get error(): Error | undefined;
+    run(...args: TArgs): Promise<TData>;
+    cancel(...args: TArgs): Promise<void>;
+}

package/dist-types/lib/user-facing/entities/timer/props.d.ts

@@ -1,19 +1,19 @@
 import { Section, Prop } from "../../properties-panel/props-builder.js";
 export declare const propertiesDefinition: {
-    general: Section<Record<string, Prop<any, any>> & {
-        intervalMs: Prop<number, true>;
-        startOnPageLoad: Prop<boolean, false>;
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        intervalMs: Prop<number, true, undefined>;
+        startOnPageLoad: Prop<boolean, false, undefined>;
     }>;
-    events: Section<Record<string, Prop<any, any>> & {
-        onFire: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    events: Section<Record<string, Prop<any, any, undefined>> & {
+        onFire: Prop<import("../../sb-event-flow.js").SbEventFlow, false, undefined>;
     }>;
-    metadata: Section<Record<string, Prop<any, any>> & {
-        timerId: Prop<string, false>;
-        isRunning: Prop<boolean, true>;
+    metadata: Section<Record<string, Prop<any, any, undefined>> & {
+        timerId: Prop<string, false, undefined>;
+        isRunning: Prop<boolean, true, undefined>;
     }>;
-    functions: Section<Record<string, Prop<any, any>> & {
-        start: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], void>, true>;
-        stop: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], void>, true>;
-        toggle: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], void>, true>;
+    functions: Section<Record<string, Prop<any, any, undefined>> & {
+        start: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], void>, true, undefined>;
+        stop: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], void>, true, undefined>;
+        toggle: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], void>, true, undefined>;
     }>;
 };

package/dist-types/lib/user-facing/entities/variable/props.d.ts

@@ -1,13 +1,13 @@
 import { SbVariablePersistence } from "@superblocksteam/library-shared/types";
 import { Section, Prop } from "../../properties-panel/props-builder.js";
 export declare const propertiesDefinition: {
-    general: Section<Record<string, Prop<any, any>> & {
-        defaultValue: Prop<any, false>;
-        value: Prop<any, false>;
-        persistence: Prop<SbVariablePersistence, true>;
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        defaultValue: Prop<any, false, undefined>;
+        value: Prop<any, false, undefined>;
+        persistence: Prop<SbVariablePersistence, true, undefined>;
     }>;
-    functions: Section<Record<string, Prop<any, any>> & {
-        set: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[value: any], void>, true>;
-        reset: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], void>, true>;
+    functions: Section<Record<string, Prop<any, any, undefined>> & {
+        set: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[value: any], void>, true, undefined>;
+        reset: Prop<import("../../../internal-details/lib/evaluator/base-entity-manager.js").EntityFunction<[], void>, true, undefined>;
     }>;
 };

package/dist-types/lib/user-facing/global-functions.d.ts

@@ -1,4 +1,5 @@
-import { type NotificationPosition, type NotificationType } from "./utils/notification.jsx";
+import { NotificationPosition } from "@superblocksteam/library-shared/types";
+import type { NotificationType } from "@superblocksteam/library-shared/types";
 export declare enum Types {
     STRING = "STRING",
     NUMBER = "NUMBER",

package/dist-types/lib/user-facing/hooks/use-dialog-editing.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A hook to enable editing dialogs.
+ *
+ * Dialog: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+ * E.g: Modal, Slideout, etc
+ *
+ * The hook expects an `isOpen` property on the component, but can be customized by passing a `isOpenPropertyName`.
+ */
+import type { SbInstance } from "@superblocksteam/library-shared/types";
+export declare function useDialogEditing(props: {
+    isOpen: boolean;
+    instanceId: SbInstance;
+    isOpenPropertyName?: string;
+}): void;

package/dist-types/lib/user-facing/internal-index.d.ts

@@ -1,4 +1,4 @@
 export { registerSbComponent } from "../internal-details/sb-wrapper.jsx";
 export { useActions } from "../internal-details/actions-context.jsx";
-export type { Entity } from "../internal-details/lib/evaluator/base-entity-manager.js";
+export type { Entity } from "@superblocksteam/library-shared/types";
 export { useScope } from "../internal-details/scope/scope-context.jsx";

package/dist-types/lib/user-facing/layers.d.ts

@@ -22,7 +22,6 @@ export declare const Layers: {
     selectedRect: Indices;
     focusedRect: Indices;
     namePill: Indices;
-    drawer: Indices;
     closeButton: Indices;
     stickySections: Indices;
     scrollbars: Indices;
@@ -31,7 +30,7 @@ export declare const Layers: {
     parentSelectedWrapper: Indices;
     widgetResizer: Indices;
     resizer: Indices;
-    modal: Indices;
+    dialog: Indices;
     widgetName: Indices;
     selectionConstraintResize: Indices;
     addSectionButton: Indices;

package/dist-types/lib/user-facing/properties-panel/create-managed-props-list.d.ts

@@ -1,5 +1,9 @@
 import { Section } from "./props-builder.js";
 import type { ManagedPropsList } from "./props-builder.js";
 export declare const RECORD_PATH_IDENTIFIER = "*";
+export declare function createInternalPropsList(sections: Record<string, Section>, parentPath?: string): Array<{
+    path: string;
+    factory: () => any;
+}>;
 declare function createManagedPropsList(sections: Record<string, Section>, parentPath?: string): ManagedPropsList;
 export { createManagedPropsList };