@superblocksteam/library 2.0.0-next.94 → 2.0.0-next.96

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

@@ -1,5 +1,5 @@
 import { Section, Prop } from "../../properties-panel/props-builder.js";
-import { CompactMode } from "./types.js";
+import { RowDensity } from "./types.js";
 import type { UnknownRow, PaginationType } from "./types.js";
 export declare const propertiesDefinition: {
     general: Section<Record<string, Prop<any, any>> & {
@@ -25,14 +25,14 @@ export declare const propertiesDefinition: {
                 notation: Prop<"compact" | "standard" | "scientific" | "engineering" | "unformatted", false>;
                 minimumFractionDigits: Prop<number, false>;
                 maximumFractionDigits: Prop<number, false>;
-                currency: Prop<string, false>;
+                currency: Prop<string, true>;
                 columnType: Prop<"currency", true>;
             } | {
                 minimumFractionDigits: Prop<number, false>;
                 maximumFractionDigits: Prop<number, false>;
                 columnType: Prop<"percentage", true>;
             } | {
-                openImageUrl: Prop<boolean, false>;
+                openImageUrl: Prop<boolean, true>;
                 columnType: Prop<"image", true>;
             } | {
                 columnType: Prop<"video", true>;
@@ -48,14 +48,11 @@ export declare const propertiesDefinition: {
                 isDisabled: Prop<boolean, false>;
                 columnType: Prop<"button", true>;
             } | {
-                linkUrl: Prop<string, false>;
                 linkLabel: Prop<string, false>;
-                openInNewTab: Prop<boolean, false>;
                 columnType: Prop<"link", true>;
             } | {
                 columnType: Prop<"boolean", true>;
             } | {
-                computedValue: Prop<string, false>;
                 columnType: Prop<"tags", true>;
             } | {
                 displayedValue: Prop<string, false>;
@@ -114,17 +111,13 @@ export declare const propertiesDefinition: {
                 cellIconPosition: Prop<import("../../icons/constants.js").IconPosition, true>;
                 columnType: Prop<"percentage", true>;
             } | {
-                horizontalAlign: Prop<"center" | "left" | "right", true>;
-                verticalAlign: Prop<"center" | "bottom" | "top", true>;
-                "cellProps.textStyle": Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
-                cellBackground: Prop<string, true>;
                 imageSize: Prop<import("./types.js").ImageSize, false>;
                 imageBorderRadius: Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
+                horizontalAlign: Prop<"center" | "left" | "right", true>;
+                cellBackground: Prop<string, true>;
                 columnType: Prop<"image", true>;
             } | {
                 horizontalAlign: Prop<"center" | "left" | "right", true>;
-                verticalAlign: Prop<"center" | "bottom" | "top", true>;
-                "cellProps.textStyle": Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
                 cellBackground: Prop<string, true>;
                 columnType: Prop<"video", true>;
             } | {
@@ -140,9 +133,9 @@ export declare const propertiesDefinition: {
                 buttonIcon: Prop<string, false>;
                 buttonIconPosition: Prop<import("../../icons/constants.js").IconPosition, true>;
                 buttonVariant: Prop<import("../button/props.js").ButtonVariant, true>;
+                buttonTextStyle: Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
                 buttonBackgroundColor: Prop<string, false>;
                 buttonBorder: Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
-                buttonLabelColor: Prop<string, false>;
                 columnType: Prop<"button", true>;
             } | {
                 horizontalAlign: Prop<"center" | "left" | "right", true>;
@@ -151,18 +144,17 @@ export declare const propertiesDefinition: {
                 cellBackground: Prop<string, true>;
                 columnType: Prop<"link", true>;
             } | {
-                booleanStyleFalse: Prop<import("./types.js").BooleanStyleFalse, true>;
                 horizontalAlign: Prop<"center" | "left" | "right", true>;
                 verticalAlign: Prop<"center" | "bottom" | "top", true>;
-                "cellProps.textStyle": Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
                 cellBackground: Prop<string, true>;
+                booleanStyleFalse: Prop<import("./types.js").BooleanStyleFalse, true>;
                 columnType: Prop<"boolean", true>;
             } | {
-                tagDisplayConfig: Prop<any, false>;
                 horizontalAlign: Prop<"center" | "left" | "right", true>;
                 verticalAlign: Prop<"center" | "bottom" | "top", true>;
-                "cellProps.textStyle": Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
                 cellBackground: Prop<string, true>;
+                tagsWrap: Prop<boolean, false>;
+                tagDisplayConfig: Prop<any, false>;
                 columnType: Prop<"tags", true>;
             } | {
                 horizontalAlign: Prop<"center" | "left" | "right", true>;
@@ -221,8 +213,8 @@ export declare const propertiesDefinition: {
         selectedRowBackgroundColor: Prop<string, true>;
         border: Prop<import("@superblocksteam/library-shared/types").PerSideBorder, false>;
         borderRadius: Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
-        compactMode: Prop<CompactMode, false>;
-        maxLinesPerRow: Prop<number, false>;
+        rowDensity: Prop<RowDensity, true>;
+        maxLinesPerRow: Prop<number, true>;
         animateLoading: Prop<boolean, false>;
         isVisible: Prop<boolean, false>;
         collapseWhenHidden: Prop<boolean, false>;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { InsertRowOptions } from "./constants.js";
-import type { ColumnFilter, CompactMode, PaginationType, ReactTableColumnProps, TableFilters } from "./types.js";
+import type { ColumnFilter, RowDensity, PaginationType, ReactTableColumnProps, TableFilters } from "./types.js";
 import type { Dim, DimModes } from "@superblocksteam/library-shared";
 import type { TextStyleWithVariant, UserAccessibleTheme, PerCornerBorderRadius, PerSideBorder } from "@superblocksteam/library-shared/types";
 export interface TableProps {
@@ -55,7 +55,7 @@ export interface TableProps {
     filters?: TableFilters;
     setColumnFilter: (columnId: string, filter: ColumnFilter) => void;
     columns: ReactTableColumnProps[];
-    compactMode?: CompactMode;
+    rowDensity?: RowDensity;
     isDownloadable: boolean;
     isFilterable: boolean;
     showColumnBorders: boolean;

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

@@ -1,4 +1,4 @@
-import { CompactMode } from "./types.js";
+import { RowDensity } from "./types.js";
 import type { TableSizes } from "./constants.js";
 import type { SingleCellProperties, ColumnProperties } from "./types.js";
 import type { UserAccessibleTheme } from "@superblocksteam/library-shared/types";
@@ -17,19 +17,15 @@ export declare const TableCSSVariables: {
     rowHoverBgColor: string;
 };
 export declare const TableWrapper: import("styled-components").StyledComponent<"div", any, TableWrapperProps, never>;
-export declare const buildCellStyles: ({ cellTextStyle, fontStyle, textColor, horizontalAlign, verticalAlign, textSize, compactMode, }: {
+export declare const buildCellStyles: ({ cellTextStyle, horizontalAlign, verticalAlign, }: {
     cellTextStyle?: SingleCellProperties["cellTextStyle"];
-    fontStyle?: SingleCellProperties["fontStyle"];
-    textColor?: SingleCellProperties["textColor"];
     horizontalAlign?: SingleCellProperties["horizontalAlign"];
     verticalAlign?: SingleCellProperties["verticalAlign"];
-    textSize?: SingleCellProperties["textSize"];
-    compactMode: CompactMode;
 }) => CSSProperties;
 export declare const CELL_WRAPPER_HOR_MARGIN = 8;
 interface CellWrapperProps {
     cellProperties: SingleCellProperties;
-    compactMode: CompactMode;
+    rowDensity: RowDensity;
     hasLeftIcon?: boolean;
     hasRightIcon?: boolean;
     isDropdownType?: boolean;

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

@@ -1,7 +1,6 @@
 import React from "react";
-import { CellAlignmentTypes, TextSizes, VerticalAlignmentTypes } from "./types.js";
-import type { CompactMode, BooleanStyleFalse, UnknownRows } from "./types.js";
-import type { ColumnProperties, EditProps, SingleCellProperties, TagDisplayConfig, TagsColorAssignment } from "./types.js";
+import { HorizontalAlignment, VerticalAlignment } from "./types.js";
+import type { ColumnProperties, EditProps, SingleCellProperties, TagDisplayConfig, TagsColorAssignment, RowDensity, BooleanStyleFalse, UnknownRow } from "./types.js";
 import type { IconPosition } from "../../icons/constants.js";
 import type { ButtonVariant } from "../button/props.js";
 import type { Dim } from "@superblocksteam/library-shared";
@@ -15,7 +14,7 @@ interface TableTagsProps {
     tagValues: unknown[];
     tagsColorAssignment?: TagsColorAssignment;
     tagsCustomColorAssignment?: Record<string, TagDisplayConfig>;
-    compactMode: CompactMode;
+    rowDensity: RowDensity;
     handleCellFocus?: () => void;
     maxWidth?: number;
     maxLinesPerRow?: number;
@@ -26,7 +25,7 @@ export type TableCellProps = SingleCellProperties & {
     tagsColorAssignment?: TagsColorAssignment;
     tagsCustomColorAssignment?: Record<string, TagDisplayConfig>;
     booleanStyleFalse?: BooleanStyleFalse;
-    compactMode: CompactMode;
+    rowDensity: RowDensity;
     isFocused: boolean;
     isMultiselecting: boolean;
 };
@@ -36,7 +35,7 @@ interface CellPosition {
     columnId: string;
 }
 export declare const sanitizeCellValue: (cellValue: any) => string;
-export declare const TagsCell: ({ isHidden, cellProperties, tagValues, tagsColorAssignment, tagsCustomColorAssignment, compactMode, handleCellFocus, maxWidth, maxLinesPerRow, theme, }: TableTagsProps) => React.JSX.Element;
+export declare const TagsCell: ({ isHidden, cellProperties, tagValues, tagsColorAssignment, tagsCustomColorAssignment, rowDensity, handleCellFocus, maxWidth, maxLinesPerRow, theme, }: TableTagsProps) => React.JSX.Element;
 interface ColumnAction {
     label: string;
     id: string;
@@ -62,7 +61,7 @@ export declare const EditableCell: (props: {
     cellProps: TableCellProps;
     editProps: EditProps;
     tableName: string;
-    compactMode: CompactMode;
+    rowDensity: RowDensity;
     position: CellPosition;
     isInserted: boolean;
     columnName: string;
@@ -92,11 +91,11 @@ interface TableButtonProps {
     backgroundColor?: string;
     buttonBorder?: PerSideBorder;
     buttonVariant: ButtonVariant;
-    buttonLabelColor: string | undefined;
+    buttonTextStyle?: TextStyleWithVariant;
     cellIcon?: string;
     cellIconPosition: IconPosition;
     handleRowSelect: (rowIndex: number) => void;
-    compactMode: CompactMode;
+    rowDensity: RowDensity;
     theme: UserAccessibleTheme;
     buttonLabel: string;
     onClick: (onComplete: () => void) => void;
@@ -105,10 +104,11 @@ export declare const TableButton: (props: TableButtonProps) => React.JSX.Element
 export declare const renderLink: (props: {
     isHidden: boolean;
     cellProperties: SingleCellProperties;
-    compactMode: CompactMode;
+    rowDensity: RowDensity;
     position: CellPosition;
     maxLinesPerRow?: number;
     tableCellTextStyle?: TextStyleWithVariant;
+    value?: string;
 }) => React.JSX.Element;
 export declare const renderEmptyRow: (columns: any, page: any, prepareRow: any, index: number, columnSizeMap: undefined | {
     [key: string]: number;
@@ -144,12 +144,9 @@ export declare const getColumnWidth: (colId: string, columnSizeMap: {
     actualFlexWidth: number;
 };
 export declare function collapseTableData(data: unknown[][], largestRow?: number): unknown[][];
-export declare function createTableColumns(columns: Record<string, any> | undefined, tableData: UnknownRows | undefined, tableStyles: {
-    textColor?: string;
-    textSize?: TextSizes;
-    fontStyle?: string;
+export declare function createTableColumns(columns: Record<string, any> | undefined, tableData: UnknownRow[] | undefined, tableStyles: {
     cellBackground?: string;
-    verticalAlign?: VerticalAlignmentTypes;
-    horizontalAlign?: CellAlignmentTypes;
+    verticalAlign?: VerticalAlignment;
+    horizontalAlign?: HorizontalAlignment;
 }, widgetName: string): Record<string, ColumnProperties> | undefined;
 export {};

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

@@ -1,7 +1,7 @@
 import type { IconPosition } from "../../icons/constants";
 import type { Dim, DimModes } from "@superblocksteam/library-shared";
 import type { TextStyleWithVariant, UserAccessibleTheme, PerCornerBorderRadius, PerSideBorder } from "@superblocksteam/library-shared/types";
-export type PaginationType = "none" | "client_side" | "server_side";
+export type PaginationType = "none" | "client-side" | "server-side";
 export interface TableFilters {
     byColumn?: {
         [column: string]: ColumnFilter;
@@ -55,30 +55,25 @@ interface Condition2 {
     param1: any;
     param2: any;
 }
-export declare const CompactMode: {
-    readonly SHORT: "SHORT";
-    readonly DEFAULT: "DEFAULT";
-    readonly TALL: "TALL";
-    readonly VERY_SHORT: "VERY_SHORT";
+export declare const RowDensity: {
+    readonly "extra-small": "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
 };
-export type CompactMode = (typeof CompactMode)[keyof typeof CompactMode];
-export declare enum CellAlignmentTypes {
-    LEFT = "LEFT",
-    RIGHT = "RIGHT",
-    CENTER = "CENTER"
-}
-export declare enum VerticalAlignmentTypes {
-    TOP = "TOP",
-    BOTTOM = "BOTTOM",
-    CENTER = "CENTER"
-}
-export declare enum TextSizes {
-    HEADING1 = "HEADING1",
-    HEADING2 = "HEADING2",
-    HEADING3 = "HEADING3",
-    PARAGRAPH = "PARAGRAPH",
-    PARAGRAPH2 = "PARAGRAPH2"
-}
+export type RowDensity = (typeof RowDensity)[keyof typeof RowDensity];
+export declare const HorizontalAlignment: {
+    readonly left: "left";
+    readonly right: "right";
+    readonly center: "center";
+};
+export type HorizontalAlignment = (typeof HorizontalAlignment)[keyof typeof HorizontalAlignment];
+export declare const VerticalAlignment: {
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly center: "center";
+};
+export type VerticalAlignment = (typeof VerticalAlignment)[keyof typeof VerticalAlignment];
 export declare enum EditInputType {
     Text = "TEXT",
     Number = "NUMBER",
@@ -169,27 +164,18 @@ export declare const ColumnType: {
 export type ColumnType = (typeof ColumnType)[keyof typeof ColumnType];
 export interface TableStyles {
     cellBackground?: string;
-    textColor?: string;
-    textSize?: TextSize;
-    fontStyle?: string;
-    horizontalAlign?: CellAlignment;
+    horizontalAlign?: HorizontalAlignment;
     verticalAlign?: VerticalAlignment;
 }
-type CellAlignment = keyof typeof CellAlignmentTypes;
-type VerticalAlignment = keyof typeof VerticalAlignmentTypes;
-type TextSize = keyof typeof TextSizes;
 export type SingleCellProperties = ColumnPropertiesForEditing & {
-    horizontalAlign?: CellAlignment;
+    horizontalAlign?: HorizontalAlignment;
     verticalAlign?: VerticalAlignment;
-    textSize?: TextSize;
-    fontStyle?: string;
-    textColor?: string;
     cellTextStyle?: TextStyleWithVariant;
     cellBackground?: string;
     buttonBackgroundColor?: string;
     buttonBorder?: PerSideBorder;
     buttonVariant?: string;
-    buttonLabelColor?: string;
+    buttonTextStyle?: TextStyleWithVariant;
     buttonLabel?: string;
     cellIcon?: string;
     cellIconPosition?: IconPosition;
@@ -199,6 +185,7 @@ export type SingleCellProperties = ColumnPropertiesForEditing & {
     isDisabled?: boolean;
     displayedValue?: string;
     textWrap?: boolean;
+    tagsWrap?: boolean;
     dropdownIcon?: string;
     imageBorderRadius?: PerCornerBorderRadius;
     imageSize?: ImageSize;
@@ -260,11 +247,8 @@ export interface ColumnProperties extends ColumnEditConfigs, ColumnPropertiesFor
     index: number;
     width: number;
     cellBackground?: string;
-    horizontalAlign?: CellAlignment;
+    horizontalAlign?: HorizontalAlignment;
     verticalAlign?: VerticalAlignment;
-    textSize?: TextSize;
-    fontStyle?: string;
-    textColor?: string;
     cellProps?: {
         textStyle: TextStyleWithVariant;
     };
@@ -277,7 +261,7 @@ export interface ColumnProperties extends ColumnEditConfigs, ColumnPropertiesFor
     buttonBackgroundColor?: string;
     buttonBorder?: PerSideBorder;
     buttonVariant?: string;
-    buttonLabelColor?: string;
+    buttonTextStyle?: TextStyleWithVariant;
     cellIcon?: string;
     cellIconPosition?: IconPosition;
     buttonIcon?: string;
@@ -290,6 +274,7 @@ export interface ColumnProperties extends ColumnEditConfigs, ColumnPropertiesFor
     isEditable?: boolean | string;
     isFrozen?: boolean;
     textWrap?: boolean;
+    tagsWrap?: boolean;
     tagDisplayConfig: Record<string, TagDisplayConfig>;
     imageSize?: ImageSize;
     imageBorderRadius?: PerCornerBorderRadius;
@@ -384,7 +369,7 @@ export interface TableWidgetProps extends TableFunctions {
     showColumnBorders: boolean;
     isSearchable: boolean;
     header: string;
-    compactMode: CompactMode;
+    rowDensity: RowDensity;
     enableRowDeletion: boolean;
     enableRowInsertion: boolean;
     maxLinesPerRow?: number;

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

@@ -1,2 +1,2 @@
-import { CompactMode } from "./types.js";
-export declare const getCompactMode: (compactMode: unknown) => CompactMode;
+import { RowDensity } from "./types.js";
+export declare const getRowDensity: (rowDensity: unknown) => RowDensity;

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

@@ -11,6 +11,7 @@ export declare const SbText: import("react").FC<import("../../properties-panel/p
         animateLoading: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
         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>;
     } & (Omit<{
         textType: import("../../properties-panel/props-builder.js").Prop<"number" | "time" | "text" | "date" | "currency", false>;
     }, "textType" | "dateInputFormat" | "dateOutputFormat"> & ({

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

@@ -1,4 +1,5 @@
 import { Prop, Section } from "../../properties-panel/props-builder.js";
+import type { IconPosition } from "../../icons/constants.js";
 import type { HorizontalAlign } from "@superblocksteam/library-shared/props";
 import type { Typographies } from "@superblocksteam/library-shared/types";
 /**
@@ -20,6 +21,7 @@ export declare const propertiesDefinition: {
         animateLoading: Prop<boolean, false>;
         shouldScroll: Prop<boolean, false>;
         icon: Prop<string, false>;
+        iconPosition: Prop<IconPosition, true>;
     } & (Omit<{
         textType: Prop<"number" | "time" | "text" | "date" | "currency", false>;
     }, "textType" | "dateInputFormat" | "dateOutputFormat"> & ({

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

@@ -9,8 +9,8 @@ export declare const useTextClassName: ({ textStyleVariant, isLoading, }: {
     isLoading?: boolean;
 }) => string;
 export declare const getFontSizePx: (textStyle: TextStyleWithVariant, theme: UserAccessibleTheme) => number;
-export declare const useIcon: ({ textStyleWithVariant, }: {
-    textStyleWithVariant: TextStyleWithVariant;
+export declare const useIcon: ({ textStyle }: {
+    textStyle: TextStyleWithVariant;
 }) => {
     iconGap: {
         gap: string;

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

@@ -1,5 +1,5 @@
 import type { Dim, DimModes } from "@superblocksteam/library-shared";
-import type { Padding, TextStyleWithVariant } from "@superblocksteam/library-shared/types";
+import type { Padding } from "@superblocksteam/library-shared/types";
 import type React from "react";
 export declare const getCustomTypographyAccessor: (typographyKey: string) => string;
 export declare const getCustomTypographyNameFromAccessor: (accessor: string) => string;
@@ -8,7 +8,6 @@ export declare const getTextCssClassFromVariant: (textStyleVariant?: string) =>
 export declare const camelCaseToSentenceCase: (input: string) => string;
 export declare const extractPixels: (pxValue: string | number) => number;
 export declare const getLineHeightInPixels: (lineHeight: string | number, fontSize: number) => number;
-export declare const mergeTextStyles: (base: TextStyleWithVariant | undefined, override: TextStyleWithVariant | undefined) => TextStyleWithVariant | undefined;
 export declare const isColorToken: (value?: string) => boolean;
 export declare function getDefaultTypographies(themeVersion?: number): import("@superblocksteam/library-shared/types").Typographies;
 export declare function generatePaddingStyle(padding: Padding): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/library",
-  "version": "2.0.0-next.94",
+  "version": "2.0.0-next.96",
   "type": "module",
   "exports": {
     ".": {
@@ -33,7 +33,7 @@
     "@react-hook/resize-observer": "1.2.6",
     "@superblocksteam/fast-deep-equal": "3.1.4",
     "@superblocksteam/iso-currency": "2.0.0",
-    "@superblocksteam/library-shared": "2.0.0-next.94",
+    "@superblocksteam/library-shared": "2.0.0-next.96",
     "@superblocksteam/shared": "0.9149.0",
     "antd": "4.24.15",
     "apca-w3": "^0.1.9",
@@ -59,6 +59,7 @@
     "normalize.css": "8.0.1",
     "react-dnd": "^16.0.1",
     "react-hotkeys-hook": "3.3.1",
+    "react-player": "2.3.1",
     "react-router": "^7.0.2",
     "react-svg": "^16.1.29",
     "react-virtuoso": "^4.6.3",