@uniformdev/design-system 19.186.4-alpha.4 → 19.187.0

package/dist/index.d.mts

@@ -28,6 +28,7 @@ import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
 export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
 import { Spread, SerializedElementNode, ElementNode, NodeKey, EditorConfig, DOMConversionMap, RangeSelection, SerializedEditorState, LexicalEditor } from 'lexical';
 import * as _uniformdev_richtext from '@uniformdev/richtext';
+import { RichTextBuiltInElement } from '@uniformdev/richtext';
 export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/richtext';
 export { Id as ToastId, toast } from 'react-toastify';
 
@@ -20210,17 +20211,22 @@ type AnimationFileProps = LottieComponentProps & {
  */
 declare const AnimationFile: ({ label, loop, autoplay, width, height, ...props }: AnimationFileProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type AvatarSizeProp = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarSizeProp = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type AvatarProps = {
     src?: string;
     label?: string;
     size?: AvatarSizeProp;
-} & React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * The HTML element to render the component as.
+     * @default 'div'
+     */
+    as?: 'div' | 'button';
+} & React.HTMLAttributes<HTMLDivElement | HTMLButtonElement>;
 /**
  * @description A component to render rounded avatars of a user or an app.
  * @example <Avatar>AB</Avatar>
  */
-declare const Avatar: ({ src, label, children, size, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, label, children, size, as, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type AvatarGroupProps = {
     /**
@@ -22564,13 +22570,15 @@ type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> &
  */
 declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type LoadingIndicatorProps = {
+    color?: 'gray' | 'accent-alt';
+    size?: 'lg' | 'sm';
+} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
 /**
  * Loading Indicator
  * @example <LoadingIndicator />
  */
-declare const LoadingIndicator: ({ size, ...props }: HTMLAttributes<HTMLDivElement> & {
-    size?: "lg" | "sm";
-}) => _emotion_react_jsx_runtime.JSX.Element;
+declare const LoadingIndicator: ({ size, color, ...props }: LoadingIndicatorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface LoadingOverlayProps {
     /** sets whether to display the loading overlay components */
@@ -22695,7 +22703,7 @@ type MenuGroupProps = {
 };
 declare const MenuGroup: ({ title, children }: MenuGroupProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type MenuItemTextThemeProps = 'base' | 'red';
+type MenuItemTextThemeProps = 'base' | 'red' | 'accent-alt';
 type MenuItemProps = MenuItemProps$1 & {
     /**
      * Sets child elements within the component.
@@ -23303,15 +23311,17 @@ type RichTextToolbarProps = {
         rows: number;
         columns: number;
     } | null>;
+    onInsertAsset?: () => void;
 };
+
 type UseRichTextToolbarStateProps = {
     config?: RichTextParamConfiguration;
 };
 declare const useRichTextToolbarState: ({ config }: UseRichTextToolbarStateProps) => {
     activeFormats: _uniformdev_richtext.RichTextBuiltInFormat[];
     setActiveFormats: React$1.Dispatch<React$1.SetStateAction<_uniformdev_richtext.RichTextBuiltInFormat[]>>;
-    activeElement: "paragraph" | _uniformdev_richtext.RichTextBuiltInElement;
-    setActiveElement: React$1.Dispatch<React$1.SetStateAction<"paragraph" | _uniformdev_richtext.RichTextBuiltInElement>>;
+    activeElement: "paragraph" | RichTextBuiltInElement;
+    setActiveElement: React$1.Dispatch<React$1.SetStateAction<"paragraph" | RichTextBuiltInElement>>;
     visibleFormatsWithIcon: {
         label: string;
         type: _uniformdev_richtext.RichTextBuiltInFormat;
@@ -23322,7 +23332,7 @@ declare const useRichTextToolbarState: ({ config }: UseRichTextToolbarStateProps
     }[];
     visibleTextualElements: {
         label: string;
-        type: _uniformdev_richtext.RichTextBuiltInElement;
+        type: RichTextBuiltInElement;
     }[];
     isLink: boolean;
     setIsLink: React$1.Dispatch<React$1.SetStateAction<boolean>>;
@@ -23331,6 +23341,7 @@ declare const useRichTextToolbarState: ({ config }: UseRichTextToolbarStateProps
     quoteElementVisible: boolean;
     codeElementVisible: boolean;
     tableElementVisible: boolean;
+    assetElementVisible: boolean;
     visibleElementsWithIcons: Set<string>;
     visibleInsertElementsWithIcons: Set<string>;
 };
@@ -23359,6 +23370,8 @@ type RichTextProps = {
         rows: number;
         columns: number;
     } | null>;
+    /** Assets */
+    onInsertAsset?: () => void;
 };
 type RichTextParamValue = SerializedEditorState | undefined | null;
 type ParameterRichTextInnerProps = RichTextProps & {
@@ -23367,8 +23380,8 @@ type ParameterRichTextInnerProps = RichTextProps & {
     editorFooter?: React.ReactNode;
 };
 type ParameterRichTextProps = CommonParameterInputProps & ParameterRichTextInnerProps;
-declare const ParameterRichText: ({ label, labelLeadingIcon, hiddenLabel, id, errorMessage, caption, errorTestId, captionTestId, menuItems, value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorInputWrapperClassName, editorFooter, customNodes, children, variables, customControls, onInsertTable, minimalInteractivity, }: ParameterRichTextProps) => _emotion_react_jsx_runtime.JSX.Element;
-declare const ParameterRichTextInner: ({ value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorInputWrapperClassName, editorFooter, children, customNodes, variables, customControls, onInsertTable, minimalInteractivity, }: ParameterRichTextInnerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ParameterRichText: ({ label, labelLeadingIcon, hiddenLabel, id, errorMessage, caption, errorTestId, captionTestId, menuItems, value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorInputWrapperClassName, editorFooter, customNodes, children, variables, customControls, onInsertTable, onInsertAsset, minimalInteractivity, }: ParameterRichTextProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ParameterRichTextInner: ({ value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorInputWrapperClassName, editorFooter, children, customNodes, variables, customControls, onInsertTable, onInsertAsset, minimalInteractivity, }: ParameterRichTextInnerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ParameterSelectProps = CommonParameterInputProps & CommonParameterSelectProps & React.InputHTMLAttributes<HTMLSelectElement>;
 /** @example <ParameterSelect label="my label" id="my-id" options={[{ label: 'option label', value: 0}]} */

package/dist/index.d.ts

@@ -28,6 +28,7 @@ import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
 export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
 import { Spread, SerializedElementNode, ElementNode, NodeKey, EditorConfig, DOMConversionMap, RangeSelection, SerializedEditorState, LexicalEditor } from 'lexical';
 import * as _uniformdev_richtext from '@uniformdev/richtext';
+import { RichTextBuiltInElement } from '@uniformdev/richtext';
 export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/richtext';
 export { Id as ToastId, toast } from 'react-toastify';
 
@@ -20210,17 +20211,22 @@ type AnimationFileProps = LottieComponentProps & {
  */
 declare const AnimationFile: ({ label, loop, autoplay, width, height, ...props }: AnimationFileProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type AvatarSizeProp = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarSizeProp = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type AvatarProps = {
     src?: string;
     label?: string;
     size?: AvatarSizeProp;
-} & React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * The HTML element to render the component as.
+     * @default 'div'
+     */
+    as?: 'div' | 'button';
+} & React.HTMLAttributes<HTMLDivElement | HTMLButtonElement>;
 /**
  * @description A component to render rounded avatars of a user or an app.
  * @example <Avatar>AB</Avatar>
  */
-declare const Avatar: ({ src, label, children, size, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ src, label, children, size, as, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type AvatarGroupProps = {
     /**
@@ -22564,13 +22570,15 @@ type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> &
  */
 declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type LoadingIndicatorProps = {
+    color?: 'gray' | 'accent-alt';
+    size?: 'lg' | 'sm';
+} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
 /**
  * Loading Indicator
  * @example <LoadingIndicator />
  */
-declare const LoadingIndicator: ({ size, ...props }: HTMLAttributes<HTMLDivElement> & {
-    size?: "lg" | "sm";
-}) => _emotion_react_jsx_runtime.JSX.Element;
+declare const LoadingIndicator: ({ size, color, ...props }: LoadingIndicatorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface LoadingOverlayProps {
     /** sets whether to display the loading overlay components */
@@ -22695,7 +22703,7 @@ type MenuGroupProps = {
 };
 declare const MenuGroup: ({ title, children }: MenuGroupProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type MenuItemTextThemeProps = 'base' | 'red';
+type MenuItemTextThemeProps = 'base' | 'red' | 'accent-alt';
 type MenuItemProps = MenuItemProps$1 & {
     /**
      * Sets child elements within the component.
@@ -23303,15 +23311,17 @@ type RichTextToolbarProps = {
         rows: number;
         columns: number;
     } | null>;
+    onInsertAsset?: () => void;
 };
+
 type UseRichTextToolbarStateProps = {
     config?: RichTextParamConfiguration;
 };
 declare const useRichTextToolbarState: ({ config }: UseRichTextToolbarStateProps) => {
     activeFormats: _uniformdev_richtext.RichTextBuiltInFormat[];
     setActiveFormats: React$1.Dispatch<React$1.SetStateAction<_uniformdev_richtext.RichTextBuiltInFormat[]>>;
-    activeElement: "paragraph" | _uniformdev_richtext.RichTextBuiltInElement;
-    setActiveElement: React$1.Dispatch<React$1.SetStateAction<"paragraph" | _uniformdev_richtext.RichTextBuiltInElement>>;
+    activeElement: "paragraph" | RichTextBuiltInElement;
+    setActiveElement: React$1.Dispatch<React$1.SetStateAction<"paragraph" | RichTextBuiltInElement>>;
     visibleFormatsWithIcon: {
         label: string;
         type: _uniformdev_richtext.RichTextBuiltInFormat;
@@ -23322,7 +23332,7 @@ declare const useRichTextToolbarState: ({ config }: UseRichTextToolbarStateProps
     }[];
     visibleTextualElements: {
         label: string;
-        type: _uniformdev_richtext.RichTextBuiltInElement;
+        type: RichTextBuiltInElement;
     }[];
     isLink: boolean;
     setIsLink: React$1.Dispatch<React$1.SetStateAction<boolean>>;
@@ -23331,6 +23341,7 @@ declare const useRichTextToolbarState: ({ config }: UseRichTextToolbarStateProps
     quoteElementVisible: boolean;
     codeElementVisible: boolean;
     tableElementVisible: boolean;
+    assetElementVisible: boolean;
     visibleElementsWithIcons: Set<string>;
     visibleInsertElementsWithIcons: Set<string>;
 };
@@ -23359,6 +23370,8 @@ type RichTextProps = {
         rows: number;
         columns: number;
     } | null>;
+    /** Assets */
+    onInsertAsset?: () => void;
 };
 type RichTextParamValue = SerializedEditorState | undefined | null;
 type ParameterRichTextInnerProps = RichTextProps & {
@@ -23367,8 +23380,8 @@ type ParameterRichTextInnerProps = RichTextProps & {
     editorFooter?: React.ReactNode;
 };
 type ParameterRichTextProps = CommonParameterInputProps & ParameterRichTextInnerProps;
-declare const ParameterRichText: ({ label, labelLeadingIcon, hiddenLabel, id, errorMessage, caption, errorTestId, captionTestId, menuItems, value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorInputWrapperClassName, editorFooter, customNodes, children, variables, customControls, onInsertTable, minimalInteractivity, }: ParameterRichTextProps) => _emotion_react_jsx_runtime.JSX.Element;
-declare const ParameterRichTextInner: ({ value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorInputWrapperClassName, editorFooter, children, customNodes, variables, customControls, onInsertTable, minimalInteractivity, }: ParameterRichTextInnerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ParameterRichText: ({ label, labelLeadingIcon, hiddenLabel, id, errorMessage, caption, errorTestId, captionTestId, menuItems, value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorInputWrapperClassName, editorFooter, customNodes, children, variables, customControls, onInsertTable, onInsertAsset, minimalInteractivity, }: ParameterRichTextProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ParameterRichTextInner: ({ value, onChange, onConnectLink, config, onRichTextInit, readOnly, editorWrapperClassName, editorInputClassName, editorInputWrapperClassName, editorFooter, children, customNodes, variables, customControls, onInsertTable, onInsertAsset, minimalInteractivity, }: ParameterRichTextInnerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ParameterSelectProps = CommonParameterInputProps & CommonParameterSelectProps & React.InputHTMLAttributes<HTMLSelectElement>;
 /** @example <ParameterSelect label="my label" id="my-id" options={[{ label: 'option label', value: 0}]} */