@superblocksteam/library 2.0.33 → 2.0.34-next.0

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

@@ -0,0 +1,5 @@
+import type { Typographies } from "@superblocksteam/shared";
+export declare const DropdownEntireObjectOption = "$$ENTIRE_OBJECT";
+export declare const DEFAULT_DROPDOWN_WIDGET_INPUT_STYLE_VARIANT: keyof Typographies;
+export declare const DEFAULT_DROPDOWN_WIDGET_LABEL_STYLE_VARIANT: keyof Typographies;
+export declare const DEFAULT_DROPDOWN_BORDER = 1;

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

@@ -0,0 +1,106 @@
+import React from "react";
+import { FixedSizeList } from "react-window";
+import type { DropdownProps } from "./props.js";
+import type { DropdownOption } from "./types.js";
+import type { ItemRendererProps, ItemListRendererProps } from "@blueprintjs/select";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { ErrorMessagePlacement } from "@superblocksteam/library-shared/props";
+import type { Padding } from "@superblocksteam/library-shared/types";
+import type { ReactNode } from "react";
+export declare const INPUT_ADDITIONAL_MIN_HEIGHT = 17.7;
+export declare const LABEL_EXTRA_HEIGHT_MARGIN = 4;
+interface DropDownComponentState {
+    activeItemIndex: number | undefined;
+    isFocused: boolean;
+    query?: string;
+    isPopoverOpen: boolean;
+}
+declare class DropDownComponent extends React.PureComponent<DropDownComponentProps, DropDownComponentState> {
+    listRef: React.RefObject<FixedSizeList<any>>;
+    containerRef: React.RefObject<HTMLDivElement>;
+    state: {
+        activeItemIndex: number;
+        isFocused: boolean;
+        query: string;
+        isPopoverOpen: boolean;
+    };
+    componentDidMount: () => void;
+    componentDidUpdate: (prevProps: DropDownComponentProps) => void;
+    getFilteredItems(): any;
+    handleActiveItemChange: (activeItem: DropdownOption | null) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    handlePopoverOpening: () => void;
+    handlePopoverClose: () => void;
+    handlePopoverClosing: () => void;
+    handleQueryChanged: (newQuery: string, event: any) => void;
+    getIconClassNames: (hasSelection?: boolean) => string;
+    render(): React.JSX.Element;
+    itemListPredicate: (query: string, items: DropdownOption[]) => DropdownOption[];
+    onItemSelect: (item: DropdownOption) => void;
+    onItemRemoved: (_tag: ReactNode, index: number) => void;
+    onClear: () => void;
+    renderTag: (option: DropdownOption) => React.JSX.Element;
+    isOptionSelected: (selectedOption: DropdownOption) => boolean;
+    renderSingleSelectItem: (option: DropdownOption, itemProps: ItemRendererProps) => React.JSX.Element | null;
+    renderMultiSelectItem: (option: DropdownOption, itemProps: ItemRendererProps) => React.JSX.Element | null;
+    handleSelectAll: (clearAll?: boolean) => void;
+    shouldShowSelectAll: () => boolean | undefined;
+    renderMultiSelectAll: () => React.JSX.Element | null;
+    renderDropdown: ({ filteredItems, itemsParentRef, renderItem, query, }: ItemListRendererProps<DropdownOption>) => React.JSX.Element;
+}
+type ComponentBaseProps = Omit<DropdownProps, "onOptionChange" | "onClear" | "onSearchTextChange">;
+export interface BaseDropDownComponentProps extends ComponentBaseProps {
+    vertical?: boolean;
+    disabled?: boolean;
+    query?: string;
+    placeholder?: string;
+    label?: string;
+    labelClassName?: string;
+    labelStyleOverride?: React.CSSProperties;
+    labelWidth?: Dim;
+    inputClassName?: string;
+    inputStyleOverride?: React.CSSProperties;
+    inputLineHeightPx?: number;
+    inputPadding: Padding;
+    parentId?: string;
+    options: DropdownOption[];
+    isLoading: boolean;
+    required?: boolean;
+    isInvalid?: boolean;
+    validationError?: string;
+    width?: number;
+    clientSideFiltering: boolean;
+    rowAboveOptions?: React.ReactNode;
+    noResultsText?: string;
+    canvasMode?: boolean;
+    fuzzySearch?: boolean;
+    forceOpen?: boolean;
+    portalClassname?: string;
+    icon?: string;
+    overflowTags?: boolean;
+    errorMessagePlacement: ErrorMessagePlacement;
+    isTouched?: boolean;
+    iconSize?: number;
+    allowClearing?: boolean;
+    showError?: boolean;
+    inputHeightPx?: number;
+    onDropdownClosed?: () => void;
+    onFocusChange?: (focusState: boolean) => void;
+    onSearchTextChange?: (searchText: string) => void;
+}
+export interface SingleDropDownComponentProps extends BaseDropDownComponentProps {
+    selectionType: "SINGLE_SELECT";
+    selectedIndex: number;
+    onOptionSelected: (optionSelected: DropdownOption | null) => void;
+}
+export interface MultiselectDropDownComponentProps extends BaseDropDownComponentProps {
+    selectionType: "MULTI_SELECT";
+    selectedIndexArr: number[];
+    allowSelectAll?: boolean;
+    onOptionSelected: (optionSelected: DropdownOption | null) => void;
+    onOptionRemoved: (removedIndex: number) => void;
+    onSelectAll?: (options: DropdownOption[]) => void;
+}
+export type DropDownComponentProps = SingleDropDownComponentProps | MultiselectDropDownComponentProps;
+export default DropDownComponent;

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

@@ -0,0 +1,5 @@
+import type { propertiesDefinition } from "./props.js";
+import type { EditorTemplate } from "../../../internal-details/sb-wrapper.jsx";
+import type { EditorConfig } from "@superblocksteam/library-shared/types";
+export declare const editorTemplate: EditorTemplate<typeof propertiesDefinition>;
+export declare const editorConfig: EditorConfig;

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

@@ -0,0 +1,150 @@
+import type { OptionValue } from "./types.js";
+export declare const Dropdown: import("../../../internal-details/sb-wrapper.jsx").ChainableComponent<{
+    general: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        label: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        options: import("../../properties-panel/props-builder.js").Prop<import("./types.js").UnknownOption[], false, undefined>;
+        defaultValue: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        transformation: import("../../properties-panel/props-builder.js").Prop<{
+            value: string;
+            label: string;
+            icon?: string;
+        }, false, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        labelPosition: import("../../properties-panel/props-builder.js").Prop<"left" | "top", true, undefined>;
+        labelStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        icon: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        placeholder: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        textStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        padding: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").Spacing, true, undefined>;
+    } & {
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<"px" | "columns" | "rows" | "fill" | "%">, false, 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;
+        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>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        customValidationRule: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        customErrorMessage: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        multiselect: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        allowSelectAll: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        allowClearing: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        clientSideFiltering: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        required: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        isDisabled: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        errorMessagePlacement: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onOptionChange: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onSearchTextChange: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onClear: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        metaSelectedOptionValue: import("../../properties-panel/props-builder.js").Prop<any, true, undefined>;
+        metaSelectedOptionValueArr: import("../../properties-panel/props-builder.js").Prop<any, true, undefined>;
+        isTouched: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        searchText: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }>;
+    derived: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        value: import("../../properties-panel/props-builder.js").Prop<any, true, undefined>;
+        defaultTransformation: import("../../properties-panel/props-builder.js").Prop<import("./types.js").DropdownOptionsTransformation, true, undefined>;
+        transformedOptions: import("../../properties-panel/props-builder.js").Prop<import("./types.js").TransformedDropdownOption[], true, undefined>;
+        validationErrors: import("../../properties-panel/props-builder.js").Prop<any, true, undefined>;
+        selectedOptionValue: import("../../properties-panel/props-builder.js").Prop<OptionValue, true, undefined>;
+        selectedOptionValues: import("../../properties-panel/props-builder.js").Prop<OptionValue[], true, undefined>;
+        selectedOption: import("../../properties-panel/props-builder.js").Prop<import("./types.js").ExternalDropdownOption, true, undefined>;
+        selectedOptionArr: import("../../properties-panel/props-builder.js").Prop<import("./types.js").ExternalDropdownOption[], true, undefined>;
+        selectedIndex: import("../../properties-panel/props-builder.js").Prop<number, true, undefined>;
+        selectedIndexArr: import("../../properties-panel/props-builder.js").Prop<number[], true, undefined>;
+        isValid: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        showError: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+}, 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, undefined>> & {
+        label: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        options: import("../../properties-panel/props-builder.js").Prop<import("./types.js").UnknownOption[], false, undefined>;
+        defaultValue: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        transformation: import("../../properties-panel/props-builder.js").Prop<{
+            value: string;
+            label: string;
+            icon?: string;
+        }, false, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        labelPosition: import("../../properties-panel/props-builder.js").Prop<"left" | "top", true, undefined>;
+        labelStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        icon: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        placeholder: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        textStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        padding: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").Spacing, true, undefined>;
+    } & {
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<"px" | "columns" | "rows" | "fill" | "%">, false, 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;
+        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>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        customValidationRule: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        customErrorMessage: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        multiselect: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        allowSelectAll: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        allowClearing: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        clientSideFiltering: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        required: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        isDisabled: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        errorMessagePlacement: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onOptionChange: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onSearchTextChange: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onClear: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        metaSelectedOptionValue: import("../../properties-panel/props-builder.js").Prop<any, true, undefined>;
+        metaSelectedOptionValueArr: import("../../properties-panel/props-builder.js").Prop<any, true, undefined>;
+        isTouched: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        searchText: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+    }>;
+    derived: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        value: import("../../properties-panel/props-builder.js").Prop<any, true, undefined>;
+        defaultTransformation: import("../../properties-panel/props-builder.js").Prop<import("./types.js").DropdownOptionsTransformation, true, undefined>;
+        transformedOptions: import("../../properties-panel/props-builder.js").Prop<import("./types.js").TransformedDropdownOption[], true, undefined>;
+        validationErrors: import("../../properties-panel/props-builder.js").Prop<any, true, undefined>;
+        selectedOptionValue: import("../../properties-panel/props-builder.js").Prop<OptionValue, true, undefined>;
+        selectedOptionValues: import("../../properties-panel/props-builder.js").Prop<OptionValue[], true, undefined>;
+        selectedOption: import("../../properties-panel/props-builder.js").Prop<import("./types.js").ExternalDropdownOption, true, undefined>;
+        selectedOptionArr: import("../../properties-panel/props-builder.js").Prop<import("./types.js").ExternalDropdownOption[], true, undefined>;
+        selectedIndex: import("../../properties-panel/props-builder.js").Prop<number, true, undefined>;
+        selectedIndexArr: import("../../properties-panel/props-builder.js").Prop<number[], true, undefined>;
+        isValid: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        showError: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+}>>;

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

@@ -0,0 +1,18 @@
+import { MultiSelect } from "@blueprintjs/select";
+import React from "react";
+import type { DropdownOption } from "./types.js";
+import type { Padding } from "@superblocksteam/library-shared/types";
+interface StyledMultiDropdownProps {
+    labelHeight: number;
+    width?: number;
+    isValid?: boolean;
+    canvasMode?: boolean;
+    hasIcon?: boolean;
+    inputPadding?: Padding;
+    overflowTags?: boolean;
+    query?: string;
+}
+export declare const MORE_TAGS_VALUE = "__SB_EXTRA_TAGS__";
+declare const BlueprintMultiDropDown: new (props: import("@blueprintjs/select").MultiSelectProps<DropdownOption>) => MultiSelect<DropdownOption>;
+export declare function MultiDropDown({ selectedItems, ...props }: React.ComponentProps<typeof BlueprintMultiDropDown> & StyledMultiDropdownProps): React.JSX.Element | null;
+export {};

package/dist-types/lib/user-facing/components/dropdown/normalize-values.d.ts

@@ -0,0 +1,2 @@
+import type { OptionValue, DropdownOptionsTransformation } from "./types.js";
+export declare const normalizeFunction: (val: OptionValue, transformationValue: DropdownOptionsTransformation["value"] | undefined) => OptionValue;

package/dist-types/lib/user-facing/components/dropdown/normalize-values.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,79 @@
+import { Section, Prop } from "../../properties-panel/props-builder.js";
+import type { DropdownOptionsTransformation, ExternalDropdownOption, OptionValue, TransformedDropdownOption, UnknownOption } from "./types.js";
+import type { InternalProps } from "../../properties-panel/props-builder.js";
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        label: Prop<string, true, undefined>;
+        options: Prop<UnknownOption[], false, undefined>;
+        defaultValue: Prop<string, false, undefined>;
+        transformation: Prop<{
+            value: string;
+            label: string;
+            icon?: string;
+        }, false, undefined>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & {
+        labelPosition: Prop<"left" | "top", true, undefined>;
+        labelStyle: Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        icon: Prop<string, false, undefined>;
+        placeholder: Prop<string, true, undefined>;
+        textStyle: Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true, undefined>;
+        loading: Prop<boolean, true, undefined>;
+    }>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & {
+        padding: Prop<import("@superblocksteam/library-shared/types").Spacing, true, undefined>;
+    } & {
+        width: Prop<import("@superblocksteam/library-shared").Dim<"px" | "columns" | "rows" | "fill" | "%">, false, undefined>;
+        maxHeight?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        height: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+    } & {
+        margin: 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>;
+    } & {
+        isVisible: Prop<boolean, true, undefined>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any, undefined>> & {
+        customValidationRule: Prop<string, true, undefined>;
+        customErrorMessage: Prop<string, true, undefined>;
+        multiselect: Prop<boolean, true, undefined>;
+        allowSelectAll: Prop<boolean, true, undefined>;
+        allowClearing: Prop<boolean, true, undefined>;
+        clientSideFiltering: Prop<boolean, true, undefined>;
+        required: Prop<boolean, true, undefined>;
+        isDisabled: Prop<boolean, true, undefined>;
+        errorMessagePlacement: Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true, undefined>;
+    }>;
+    events: Section<Record<string, Prop<any, any, undefined>> & {
+        onOptionChange: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onSearchTextChange: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onClear: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: Section<Record<string, Prop<any, any, undefined>> & {
+        metaSelectedOptionValue: Prop<any, true, undefined>;
+        metaSelectedOptionValueArr: Prop<any, true, undefined>;
+        isTouched: Prop<boolean, true, undefined>;
+        searchText: Prop<string, false, undefined>;
+    }>;
+    derived: Section<Record<string, Prop<any, any, undefined>> & {
+        value: Prop<any, true, undefined>;
+        defaultTransformation: Prop<DropdownOptionsTransformation, true, undefined>;
+        transformedOptions: Prop<TransformedDropdownOption[], true, undefined>;
+        validationErrors: Prop<any, true, undefined>;
+        selectedOptionValue: Prop<OptionValue, true, undefined>;
+        selectedOptionValues: Prop<OptionValue[], true, undefined>;
+        selectedOption: Prop<ExternalDropdownOption, true, undefined>;
+        selectedOptionArr: Prop<ExternalDropdownOption[], true, undefined>;
+        selectedIndex: Prop<number, true, undefined>;
+        selectedIndexArr: Prop<number[], true, undefined>;
+        isValid: Prop<boolean, true, undefined>;
+        showError: Prop<boolean, true, undefined>;
+    }>;
+};
+export type DropdownProps = InternalProps<typeof propertiesDefinition>;

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

@@ -0,0 +1,88 @@
+import type { Intent } from "@blueprintjs/core";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { MultiStepDef, TextStyleWithVariant } from "@superblocksteam/library-shared/types";
+import type { ApplicationScope, Padding, PerSideBorder } from "@superblocksteam/shared";
+export type ExternalDropdownOption = {
+    label: string;
+    value: string;
+};
+export type UnknownOption = string | Record<string, unknown> | ExternalDropdownOption;
+export type TransformedDropdownOption = ExternalDropdownOption & {
+    normalizedValue: string;
+};
+export interface DropdownOption {
+    label: string;
+    value: string;
+    normalizedValue?: string;
+    icon?: string;
+    subText?: string;
+    id?: string;
+    onSelect?: (option: DropdownOption) => void;
+    children?: DropdownOption[];
+    intent?: Intent;
+    disabled?: boolean;
+    isValid?: boolean;
+    scope?: ApplicationScope;
+    hiddenLabels?: string[];
+}
+export interface DropdownOptionsTransformation {
+    label: string;
+    value: string;
+    icon?: string;
+}
+export type OptionValue = string | number | object;
+interface DropdownComponentOption extends Omit<DropdownOption, "normalizedValue"> {
+    normalizedValue: string;
+}
+export interface DropdownComponentProps extends BaseProps {
+    transformedOptions?: DropdownComponentOption[];
+    placeholderText?: string;
+    selectedIndex?: number;
+    selectedIndexArr?: number[];
+    selectedOption: DropdownComponentOption;
+    selectedOptionValue: OptionValue;
+    selectedOptionValues: OptionValue[];
+    isValid?: boolean;
+    validationErrors?: Record<string, string>;
+    metaSelectedOptionValue: OptionValue;
+    metaSelectedOptionValueArr: OptionValue[];
+    customErrorMessage?: string;
+    customValidationRule?: string;
+    isTouched?: boolean;
+    showError?: boolean;
+}
+export interface DropdownComponentState {
+    selectedIndexArr?: number[];
+}
+export interface BaseProps {
+    defaultValue?: string | string[];
+    multiselect?: boolean;
+    required?: boolean;
+    clientSideFiltering?: boolean;
+    isVertical?: boolean;
+    label?: string;
+    onOptionChange?: MultiStepDef;
+    onClear?: MultiStepDef;
+    onSearchTextChange?: MultiStepDef;
+    options: string;
+    placeholderText?: string;
+    allowClearing?: boolean;
+    allowSelectAll?: boolean;
+    transformation?: DropdownOptionsTransformation;
+    icon?: string;
+    labelProps?: {
+        textStyle: TextStyleWithVariant;
+        width?: Dim;
+    };
+    inputProps?: {
+        textStyle: TextStyleWithVariant;
+        padding?: Padding;
+    };
+    isDisabled?: boolean;
+    isVisible?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    border?: PerSideBorder;
+    dataTest?: string;
+}
+export {};

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

@@ -0,0 +1,8 @@
+import type { Padding } from "@superblocksteam/library-shared/types";
+export declare function getTagElementSpace(element: HTMLElement): number;
+export declare const createCssVariablesForPadding: import("memoize-one").MemoizedFn<(hasIcon: boolean, inputPadding?: Padding, iconSize?: number) => {
+    [key: `--${string}`]: string;
+}>;
+export declare const getClearableIconRight: import("memoize-one").MemoizedFn<(allowClearing: boolean, inputPadding?: Padding, iconSize?: number) => number | undefined>;
+export declare const getInputPaddingFactorForVerticalCenter: (inputPadding?: Padding) => number;
+export declare const getCaretCorrectionForVerticalCenter: (vertical?: boolean, inlineError?: boolean) => 0 | 1 | -1;

package/dist-types/lib/user-facing/components/grid/calculations/calculate-constraints.d.ts

@@ -0,0 +1,26 @@
+export type InputItem = {
+    name: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export type OutputItem = {
+    name: string;
+    constraintTop: string[];
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+declare const calculateConstraints: (items: InputItem[]) => OutputItem[];
+/**
+ * takes an array of `Widget` objects and creates a map where each
+ * `Widget` is mapped to a set of `Widget` objects that are directly above it, removing any indirect
+ * relationships.
+ * @param {InputItem[]} widgets - An array of Widget objects.
+ * @returns The function `createAboveMap` returns an object that maps widget IDs to an array of widgets
+ * that are directly above them.
+ */
+export declare function createAboveMap(widgets_: InputItem[]): Map<string, InputItem[]>;
+export default calculateConstraints;

package/dist-types/lib/user-facing/components/grid/calculations/calculate-row-positions.d.ts

@@ -0,0 +1,2 @@
+import type { GridChild } from "..";
+export declare const calculateRowPositions: (orderedNames: string[], childrenArray: GridChild[], rowHeight: number, pxHeights: Record<string, number>) => Record<string, number>;

package/dist-types/lib/user-facing/components/grid/calculations/calculate-row-positions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/lib/user-facing/components/grid/calculations/order-constraints.d.ts

@@ -0,0 +1,2 @@
+import type { GridChild } from "..";
+export declare const orderConstraints: (children: GridChild[]) => string[];

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

@@ -0,0 +1,43 @@
+import { Dim } from "@superblocksteam/library-shared";
+import React from "react";
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+import type { InternalProps } from "../../properties-panel/props-builder.js";
+import type { DimModes } from "@superblocksteam/library-shared";
+export type GridChild = {
+    marginTop?: Dim<"rows">;
+    marginLeft?: Dim<"columns">;
+    width?: Dim<"columns">;
+    height?: Dim<"rows" | "fit">;
+    constraintTop?: string | [string];
+    name: string;
+    sbType?: string;
+};
+declare const _propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        spacing: Prop<Dim<"px">, true, undefined>;
+        columns: Prop<number, false, undefined>;
+        rowHeight: Prop<Dim<"px">, false, undefined>;
+    }>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & {
+        maxHeight?: Prop<Dim<DimModes>, false, undefined> | undefined;
+        minHeight?: Prop<Dim<DimModes>, false, undefined> | undefined;
+        maxWidth?: Prop<Dim<DimModes>, false, undefined> | undefined;
+        minWidth?: Prop<Dim<DimModes>, false, undefined> | undefined;
+        width: Prop<Dim<DimModes>, false, undefined>;
+        height: Prop<Dim<DimModes>, false, undefined>;
+    } & {
+        margin: Prop<{
+            top: Dim<"px">;
+            bottom: Dim<"px">;
+            left: Dim<"px">;
+            right: Dim<"px">;
+        } | undefined, true, undefined>;
+    } & {
+        isVisible: Prop<boolean, true, undefined>;
+    }>;
+};
+export type GridProps = InternalProps<typeof _propertiesDefinition>;
+export declare const InternalGrid: (({ children, ...props }: GridProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

package/dist-types/lib/user-facing/components/grid/use-height-observer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const useHeightObserver: () => {
+    ref: React.RefObject<HTMLDivElement>;
+    height: number;
+};

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

@@ -0,0 +1,5 @@
+import type { IconProps } from "./props.js";
+import type { EditorTemplate } from "../../../internal-details/sb-wrapper.jsx";
+import type { EditorConfig } from "@superblocksteam/library-shared/types";
+export declare const editorTemplate: EditorTemplate<IconProps>;
+export declare const editorConfig: EditorConfig<IconProps>;

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

@@ -0,0 +1,47 @@
+export declare const Icon: import("../../../internal-details/sb-wrapper.jsx").ChainableComponent<{
+    general: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        icon: 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, undefined>> & {
+        size: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, true, 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>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        color: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onClick: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+}, 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, undefined>> & {
+        icon: 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, undefined>> & {
+        size: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, true, 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>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        color: import("../../properties-panel/props-builder.js").Prop<string, false, undefined>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onClick: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+}>>;