Pimcore Studio UI SDK Hooks: A Practical Guide for Developers

const { asset, isLoading, isError } = useAssetDraft(id) 

import { useMessage } from '@pimcore/studio-ui-bundle/components' 
 
const useMessage: (messageConfig?: ConfigOptions) => MessageInstance 

import { useNotification } from '@pimcore/studio-ui-bundle/components' 
 
const useNotification: () => readonly [NotificationInstance] 

import { useModal } from '@pimcore/studio-ui-bundle/components' 
 
const useModal: (config?: { type: string }) => IUseModalReturnType 
 
interface IUseModalReturnType { 
    renderModal: (props: IModalProps) => React.JSX.Element; 
    showModal: () => void; 
    handleOk: () => void; 
    handleCancel: () => void; 
    closeModal: () => void; 
} 

import { useAlertModal } from '@pimcore/studio-ui-bundle/components' 
 
const useAlertModal: () => { 
    info: (props: ContentAware) => { destroy: () => void; update: (configUpdate: ConfigUpdate) => void }; 
    error: (props: ContentAware) => { destroy: () => void; update: (configUpdate: ConfigUpdate) => void }; 
    warn: (props: ContentAware) => { destroy: () => void; update: (configUpdate: ConfigUpdate) => void }; 
    success: (props: ContentAware) => { destroy: () => void; update: (configUpdate: ConfigUpdate) => void }; 
} 

import { useFormModal } from '@pimcore/studio-ui-bundle/components' 
 
function useFormModal(): { 
    input: (props: InputFormModalProps) => { destroy: () => void; update: (configUpdate: ConfigUpdate) => void }; 
    textarea: (props: TextareaFormModalProps) => { destroy: () => void; update: (configUpdate: ConfigUpdate) => void }; 
    confirm: (props: ModalFuncProps) => { destroy: () => void; update: (configUpdate: ConfigUpdate) => void }; 
    upload: (props: UploadFormProps) => { destroy: () => void; update: (configUpdate: ConfigUpdate) => void }; 
} 

const useElementTree: () => { 
    setLoading: (nodeId: string, loading: boolean) => void; 
    setFetching: (nodeId: string, isFetching: boolean) => void; 
    setExpanded: (nodeId: string, expanded: boolean) => void; 
    setPage: (nodeId: string, page: number) => void; 
    setSearchTerm: (nodeId: string, searchTerm?: string) => void; 
    setSelectedIds: (selectedNodeIds: string[]) => void; 
    setScrollTo: (nodeId: string, scrollTo: boolean) => void; 
    refreshChildren: (nodeId: string, forceLoading: boolean) => void; 
} 

const useElementTreeNode: (nodeId: string) => NodeState & { 
    isExpanded: boolean; 
    setLoading: (loading: boolean) => void; 
    setFetching: (isFetching: boolean) => void; 
    setExpanded: (expanded: boolean) => void; 
    setPage: (page: number) => void; 
    setSearchTerm: (searchTerm?: string) => void; 
    setSelectedIds: (selectedNodeIds: string[]) => void; 
    setScrollTo: (scrollTo: boolean) => void; 
    getChildren: () => string[]; 
} 

import { useElementTreeRootNode } from '@pimcore/studio-ui-bundle/components' 
 
interface UseElementTreeRootNodeResult { 
    rootNode?: TreeNode; 
    isLoading: boolean; 
} 
 
const useElementTreeRootNode: (id: number, showRoot: boolean) => UseElementTreeRootNodeResult; 

import { useNodeApiHook } from '@pimcore/studio-ui-bundle/components' 
 
interface INodeApiHookContext { 
    nodeApiHook: NodeApiHook; 
} 
 
const useNodeApiHook: () => INodeApiHookContext; 

import { useUploadModalContext } from '@pimcore/studio-ui-bundle/components' 
 
const useUploadModalContext: () => UploadContextProps 

import { useTranslation } from '@pimcore/studio-ui-bundle/app'  

import { useSettings } from '@pimcore/studio-ui-bundle/modules/app' 
 
const useSettings: () => SystemSettingsGetApiResponse 

import { useMainNav } from '@pimcore/studio-ui-bundle/modules/app' 
 
interface IUseMainNavReturn { 
    navItems: IMainNavItem[]; 
} 
 
const useMainNav: () => IUseMainNavReturn 

import { useElementContext } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useElementContext: () => { id: number; elementType: ElementType } 

import { useOptionalElementContext } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useOptionalElementContext: () => { id: number; elementType: ElementType } | null 

import { useElementApi } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useElementApi: (elementType: ElementType, cacheKey?: string) => { 
    elementPatch: (args: ElementPatchArgs) => Promise<boolean>; 
    getElementById: (id: number) => Promise<AssetGetByIdApiResponse | DataObjectGetByIdApiResponse | undefined>; 
    elementClone: (args: ElementCloneArgs) => Promise<ElementCloneResponse>; 
} 

import { useElementDraft } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useElementDraft: (id: number, elementType: ElementType) => { 
    element: IElementDraft | undefined; 
    editorType: ElementEditorType | undefined; 
    isLoading: boolean; 
    isError: boolean; 
    // + UsePropertiesDraftReturn, UseSchedulesDraftReturn, UseTabsDraftReturn, 
    // + UseModifiedObjectDataDraftReturn, UseDraftDataReturn, UseTrackableChangesDraftReturn, UsePublishedData 
} 

import { useElementHelper } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useElementHelper: () => { 
    openElement: (props: OpenElementWidgetProps) => Promise<void>; 
    mapToElementType: (elementType: string, silent?: boolean) => ElementType | undefined; 
    executeElementTask: (elementType: ElementType, id: number, task: SaveTaskType, onFinish?: () => void) => void; 
} 

import { useGlobalElementContext } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useGlobalElementContext: () => { 
    context: GlobalAssetContext | GlobalDataObjectContext | GlobalDocumentContext | undefined; 
} 

import { useCacheUpdate } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useCacheUpdate: (elementType: ElementType, tags: ReadonlyArray<TagDescription<string>>) => { 
    update: (props: UpdateCacheProps) => void; 
    updateFieldValue: (id: number, field: string, value: any) => void; 
} 

import { useElementSelector } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useElementSelector: (props: UseElementSelectorProps) => { open: () => void }

import { useDynamicTypeResolver } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useDynamicTypeResolver: () => { 
    getComponentRenderer: (props: typeProps) => IComponentRenderer; 
    hasType: (props: typeProps) => boolean; 
    getType: (dynamicTypeId: DynamicTypeAbstract['id']) => DynamicTypeAbstract | null; 
} 

import { useTabManager } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useTabManager: () => TabManager 

import { useFieldWidth } from '@pimcore/studio-ui-bundle/modules/element' 
 
interface IFieldWidthContext { 
    small: number; 
    medium: number; 
    large: number; 
} 
 
const useFieldWidth: () => IFieldWidthContext 

import { useAddFolder } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useAddFolder: (elementType: ElementType) => { 
    addFolder: (parentId: number) => void; 
    addFolderTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    addFolderMutation: (parentId: number, value: string) => Promise<void>; 
}

import { useCopyPaste } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useCopyPaste: (elementType: ElementType) => { 
    storedNode: StoreNode; 
    nodeTask: 'copy' | 'cut' | undefined; 
    copy: (node: TreeNodeProps) => void; 
    cut: (node: TreeNodeProps) => void; 
    paste: (parentId: number, cloneParameters?: CloneParameters, node?: StoreNode) => Promise<void>; 
    pasteCut: (parentId: number) => Promise<void>; 
    move: (props: MoveProps) => Promise<void>; 
    copyTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    copyContextMenuItem: (node: Element, onFinish?: () => void) => ItemType; 
    cutTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    cutContextMenuItem: (node: Element, onFinish?: () => void) => ItemType; 
    pasteTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    pasteCutContextMenuItem: (parentId: number) => ItemType; 
} 

import { useDelete } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useDelete: (elementType: ElementType, cacheKey?: string) => { 
    deleteElement: (id: number, label: string, parentId?: number) => void; 
    deleteTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    deleteContextMenuItem: (node: Element, onFinish?: () => void) => ItemType; 
    deleteGridContextMenuItem: (row: any) => ItemType | undefined; 
    deleteMutation: (id: number, parentId?: number) => Promise<void>; 
} 

import { useDeleteDraft } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useDeleteDraft: (elementType: ElementType) => { 
    deleteDraft: () => Promise<void>; 
    buttonText: string; 
    isLoading: boolean; 
    isError: boolean; 
} 

import { useLocateInTree } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useLocateInTree: (elementType: ElementType) => { 
    locateInTree: (elementId: number, onFinished?: () => void) => void; 
    locateInTreeGridContextMenuItem: (row: any, onFinish?: () => void) => ItemType | undefined; 
} 

import { useLock } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useLock: (elementType: ElementType) => { 
    lock: (id: number) => Promise<void>; 
    lockAndPropagate: (id: number) => Promise<void>; 
    unlock: (id: number) => Promise<void>; 
    unlockAndPropagate: (id: number) => Promise<void>; 
    lockTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    lockContextMenuItem: (node: Element, onFinish?: () => void) => ItemType; 
    lockAndPropagateTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    lockAndPropagateContextMenuItem: (node: Element, onFinish?: () => void) => ItemType; 
    unlockTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    unlockContextMenuItem: (node: Element, onFinish?: () => void) => ItemType; 
    unlockAndPropagateTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    unlockAndPropagateContextMenuItem: (node: Element, onFinish?: () => void) => ItemType; 
    isLockMenuHidden: (node: Element | TreeNodeProps) => boolean; 
} 

import { usePublish } from '@pimcore/studio-ui-bundle/modules/element' 
 
const usePublish: (elementType: ElementType) => { 
    publishTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    publishNode: (node: TreeNodeProps | Element) => void; 
} 

import { useElementRefresh } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useElementRefresh: (elementType: ElementType) => { 
    refreshElement: (id: number, inElementTab?: boolean) => void; 
} 

import { useRefreshGrid } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useRefreshGrid: (elementType: ElementType) => { 
    refreshGrid: (parentId?: number) => Promise<void>; 
} 

import { useRename } from '@pimcore/studio-ui-bundle/modules/element' 
 
const useRename: (elementType: ElementType, cacheKey?: string) => { 
    rename: (parentId: number, currentLabel: string) => void; 
    renameTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    renameContextMenuItem: (node: Element, onFinish?: () => void) => ItemType; 
    renameGridContextMenuItem: (row: any) => ItemType | undefined; 
    renameMutation: (parentId: number, value: string) => Promise<void>; 
} 

const useDraftDataDraft: (id: number, setDraftDataAction: ActionCreatorWithPayload<{ id: number; draftData: any }>) => { 
    setDraftData: (draftData: any) => void; 
} 

import { usePropertiesDraft } from '@pimcore/studio-ui-bundle/modules/element' 
 
interface UsePropertiesDraftReturn { 
    properties: undefined | DataProperty[]; 
    updateProperty: (key: string, updatedProperty: DataProperty) => void; 
    addProperty: (property: DataProperty) => void; 
    removeProperty: (property: DataProperty) => void; 
    setProperties: (properties: DataProperty[]) => void; 
} 
 
const usePropertiesDraft: ( 
    id: number, 
    draft: PropertiesDraft, 
    updatePropertyAction: ActionCreatorWithPayload<PropertyAction>, 
    addPropertyAction: ActionCreatorWithPayload<PropertyAction>, 
    removePropertyAction: ActionCreatorWithPayload<PropertyAction>, 
    setPropertiesAction: ActionCreatorWithPayload<PropertiesAction> 
) => UsePropertiesDraftReturn 

import { useSchedulesDraft } from '@pimcore/studio-ui-bundle/modules/element' 
 
interface UseSchedulesDraftReturn { 
    schedules: undefined | Schedule[]; 
    updateSchedule: (schedule: Schedule) => void; 
    addSchedule: (schedule: Schedule) => void; 
    removeSchedule: (schedule: Schedule) => void; 
    setSchedules: (schedules: Schedule[]) => void; 
    resetSchedulesChanges: () => void; 
} 
 
const useSchedulesDraft: ( 
    id: number, 
    draft: SchedulesDraft, 
    updateScheduleAction: ActionCreatorWithPayload<ScheduleAction>, 
    addScheduleAction: ActionCreatorWithPayload<ScheduleAction>, 
    removeScheduleAction: ActionCreatorWithPayload<ScheduleAction>, 
    setSchedulesAction: ActionCreatorWithPayload<SchedulesAction>, 
    resetSchedulesChangesAction: ActionCreatorWithPayload<number> 
) => UseSchedulesDraftReturn 

import { useTabsDraft } from '@pimcore/studio-ui-bundle/modules/element' 
 
interface UseTabsDraftReturn extends TabsDraft { 
    setActiveTab: (tab: string) => void; 
} 
 
// TabsDraft: { activeTab: string | null } 
 
const useTabsDraft: ( 
    id: number, 
    draft: TabsDraft, 
    setActiveTabAction: ActionCreatorWithPayload<SetActiveTabAction> 
) => UseTabsDraftReturn 

import { useTrackableChangesDraft } from '@pimcore/studio-ui-bundle/modules/element' 
 
interface UseTrackableChangesDraftReturn { 
    removeTrackedChanges: () => void; 
    setModifiedCells: (type: string, modifiedCells: ModifiedCells) => void; 
} 
 
const useTrackableChangesDraft: ( 
    id: number, 
    resetChangesAction: ActionCreatorWithPayload<number>, 
    setModifiedCellsAction: ActionCreatorWithPayload<ModifiedCellsAction> 
) => UseTrackableChangesDraftReturn 

import { usePublishedDraft } from '@pimcore/studio-ui-bundle/modules/element' 
 
interface UsePublishedData { 
    publishDraft: () => void; 
    unpublishDraft: () => void; 
} 
 
const usePublishedDraft: ( 
    id: number, 
    publishDraftAction: ActionCreatorWithPayload<{ id: number }>, 
    unpublishDraftAction: ActionCreatorWithPayload<{ id: number }> 
) => UsePublishedData 

import { useDataObject } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
const useDataObject: () => { id: number | undefined } 

import { useDataObjectDraft } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
const useDataObjectDraft: (id: number) => { 
    isLoading: boolean; 
    isError: boolean; 
    dataObject: undefined | DataObjectDraftState; 
    editorType: ElementEditorType | undefined; 
    // + UsePropertiesDraftReturn, UseSchedulesDraftReturn, UseTabsDraftReturn, 
    // + UseModifiedObjectDataDraftReturn, UseDraftDataReturn, UseTrackableChangesDraftReturn, UsePublishedData 
} 

import { useDataObjectHelper } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
const useDataObjectHelper: () => { 
    openDataObject: (props: OpenDataObjectWidgetProps) => Promise<void>; 
    executeDataObjectTask: (id: number, task: SaveTaskType, onFinish?: () => void) => Promise<void>; 
} 

import { useGlobalDataObjectContext } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
const useGlobalDataObjectContext: () => { 
    context: { type: 'data-object'; config: { id: number } } | undefined; 
    setContext: (config: { id: number }) => void; 
    removeContext: () => void; 
} 

import { useCustomLayouts } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
const useCustomLayouts: (id: number) => { 
    layouts: Layout[] | undefined; 
    getDefaultLayoutId: (currentLayout?: string | null) => string | null; 
    isLoading: boolean; 
} 

import { useQuantityValueUnits } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
const useQuantityValueUnits: () => { 
    getSelectOptions: (validUnits?: string[]) => DefaultOptionType[]; 
    convertValue: (fromUnitId: string, toUnitId: string, value: number) => Promise<number | null>; 
    getAbbreviation: (unitId: string) => string; 
} 

import { useSave } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
const useSave: (useDraftData?: boolean) => { 
    save: (editableData: Record<string, any>, task?: SaveTaskType, onFinish?: () => void) => Promise<void>; 
    isLoading: boolean; 
    isSuccess: boolean; 
    isError: boolean; 
    error: FetchBaseQueryError | SerializedError | undefined; 
} 
 
enum SaveTaskType { 
    Version = "version", 
    AutoSave = "autoSave", 
    Publish = "publish", 
    Save = "save", 
    Unpublish = "unpublish" 
} 

import { useAddObject } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
const useAddObject: () => { 
    addObjectTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
} 

import { useLanguageSelection } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
const useLanguageSelection: () => UseLanguageSelectionReturn 

import { useModifiedObjectDataDraft } from '@pimcore/studio-ui-bundle/modules/data-object' 
 
interface UseModifiedObjectDataDraftReturn { 
    markObjectDataAsModified: () => void; 
} 
 
const useModifiedObjectDataDraft: ( 
    id: number, 
    draft: ModifiedObjectDataDraft, 
    markObjectDataAsModifiedAction: ActionCreatorWithPayload<number> 
) => UseModifiedObjectDataDraftReturn 

import { useAsset } from '@pimcore/studio-ui-bundle/modules/asset' 
 
const useAsset: () => { id: number } 

import { useAssetDraft } from '@pimcore/studio-ui-bundle/modules/asset' 
 
const useAssetDraft: (id: number) => { 
    isLoading: boolean; 
    isError: boolean; 
    asset: undefined | AssetDraftState; 
    editorType: ElementEditorType | undefined; 
    // + UseCustomMetadataDraftReturn, UseCustomSettingsDraftReturn, UsePropertiesDraftReturn, 
    // + UseSchedulesDraftReturn, UseTrackableChangesDraftReturn, UseTabsDraftReturn, 
    // + UseTextDataDraftReturn, UseImageSettingsDraftReturn 
} 

import { useAssetHelper } from '@pimcore/studio-ui-bundle/modules/asset' 
 
const useAssetHelper: () => { 
    openAsset: (props: OpenAssetWidgetProps) => void; 
} 

import { useGlobalAssetContext } from '@pimcore/studio-ui-bundle/modules/asset' 
 
const useGlobalAssetContext: () => { 
    context: { type: 'asset'; config: { id: number } } | undefined; 
    setContext: (config: { id: number }) => void; 
    removeContext: () => void; 
} 

import { useClearThumbnails } from '@pimcore/studio-ui-bundle/modules/asset' 
 
const useClearThumbnails: () => { 
    clearImageThumbnailContextMenuItem: (node: Asset, onFinish?: () => void) => ItemType; 
    clearVideoThumbnailContextMenuItem: (node: Asset, onFinish?: () => void) => ItemType; 
    clearPdfThumbnailContextMenuItem: (node: Asset, onFinish?: () => void) => ItemType; 
} 

import { useDownload } from '@pimcore/studio-ui-bundle/modules/asset' 
 
const useDownload: () => { 
    download: (id: string, label?: string) => void; 
    downloadContextMenuItem: (node: Asset, onFinish?: () => void) => ItemType; 
    downloadTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
    downloadGridContextMenuItem: (row: any) => ItemType | undefined; 
} 

import { useZipDownload } from '@pimcore/studio-ui-bundle/modules/asset' 
 
const useZipDownload: (props: { type: 'folder' | 'asset-list' }) => { 
    createZipDownload: CreateFolderZipDownload | CreateAssetListZipDownload; 
    createZipDownloadContextMenuItem: (node: Element, onFinish?: () => void) => ItemType; 
    createZipDownloadTreeContextMenuItem: (node: TreeNodeProps) => ItemType; 
} 

import { useCustomMetadataDraft } from '@pimcore/studio-ui-bundle/modules/asset' 
 
interface UseCustomMetadataDraftReturn { 
    customMetadata: undefined | CustomMetadata[]; 
    updateCustomMetadata: (customMetadata: CustomMetadata) => void; 
    addCustomMetadata: (customMetadata: CustomMetadata) => void; 
    removeCustomMetadata: (customMetadata: CustomMetadata) => void; 
    updateAllCustomMetadata: (customMetadata: CustomMetadata[]) => void; 
    setCustomMetadata: (customMetadata: CustomMetadata[]) => void; 
} 
 
const useCustomMetadataDraft: ( 
    id: number, 
    draft: CustomMetadataDraft, 
    updateCustomMetadataAction: ActionCreatorWithPayload<CustomMetadataAction>, 
    addCustomMetadataAction: ActionCreatorWithPayload<CustomMetadataAction>, 
    removeCustomMetadataAction: ActionCreatorWithPayload<CustomMetadataAction>, 
    setCustomMetadataAction: ActionCreatorWithPayload<CustomMetadataArrayAction>, 
    updateAllCustomMetadataAction: ActionCreatorWithPayload<CustomMetadataArrayAction> 
) => UseCustomMetadataDraftReturn 

import { useImageSettingsDraft } from '@pimcore/studio-ui-bundle/modules/asset' 
 
interface UseImageSettingsDraftReturn { 
    imageSettings: undefined | ImageData; 
    addImageSettings: (settings: ImageData) => void; 
    removeImageSetting: (setting: keyof ImageData) => void; 
    updateImageSetting: (setting: keyof ImageData, value: ImageData[keyof ImageData]) => void; 
} 
 
const useImageSettingsDraft: ( 
    id: number, 
    draft: ImageSettingsDraft, 
    addSettingsAction: ActionCreatorWithPayload<ImageSettingsAction>, 
    removeSettingAction: ActionCreatorWithPayload<ImageSettingAction>, 
    updateSettingAction: ActionCreatorWithPayload<UpdateImageSettingAction> 
) => UseImageSettingsDraftReturn 

import { useGlobalUserContext } from '@pimcore/studio-ui-bundle/modules/user' 
 
const useGlobalUserContext: () => { 
    context: { type: 'user'; config: { id: number } } | undefined; 
    setContext: (config: { id: number }) => void; 
    removeContext: () => void; 
} 

import { useUserManagementDraft } from '@pimcore/studio-ui-bundle/modules/user' 
 
const useUserManagementDraft: (id: number) => { 
    isLoading: boolean; 
    isError: boolean; 
    user: undefined | UserDraftState; 
    removeUserFromState: () => void; 
    changeUserInState: (changedValues: any) => void; 
    updateUserKeyBinding: (name: string, code: object) => void; 
    reloadUser: () => void; 
} 

import { useUserManagementHelper } from '@pimcore/studio-ui-bundle/modules/user' 
 
const useUserManagementHelper: () => { 
    openUser: (id: number) => void; 
    closeUser: (id: number) => void; 
    addNewUser: (props: AddItemArgs) => Promise<{ data: UserCreateApiResponse; error: any }>; 
    removeUser: (props: UserDeleteByIdApiArg) => Promise<{ data: UserDeleteByIdApiResponse; error: any }>; 
    cloneUser: (props: { id: number; name: string }) => Promise<{ data: UserCloneByIdApiResponse; error: any }>; 
    updateUserById: (props: { id: number; user: User2 | User }) => Promise<{ data: UserUpdateByIdApiResponse; error: any }>; 
    moveUserById: (props: { id: number; parentId: number }) => Promise<{ data: UserUpdateByIdApiResponse; error: any }>; 
    fetchUserList: () => Promise<UserGetCollectionApiResponse>; 
    searchUserByText: (query: string) => Promise<PimcoreStudioApiUserSearchApiResponse>; 
    uploadUserAvatar: (props: { id: number; file: File }) => Promise<{ data: UserUploadImageApiResponse; error: any }>; 
    activeId: number; 
    getAllIds: number[]; 
    // ... more methods 
} 

import { useRoleDraft } from '@pimcore/studio-ui-bundle/modules/user' 
 
const useRoleDraft: (id: number) => { 
    isLoading: boolean; 
    isError: boolean; 
    role: undefined | RoleDraftState; 
    removeRoleFromState: () => void; 
    changeRoleInState: (changedValues: any) => void; 
    reloadRole: () => void; 
} 

import { useRoleHelper } from '@pimcore/studio-ui-bundle/modules/user' 
 
const useRoleHelper: () => { 
    openRole: (id: number) => void; 
    closeRole: (id: number) => void; 
    addNewRole: (props: IAddRoleArgs) => Promise<{ data: RoleCreateApiResponse; error: any }>; 
    removeRole: (props: RoleDeleteByIdApiArg) => Promise<{ data: RoleDeleteByIdApiResponse; error: any }>; 
    cloneRole: (props: { id: number; name: string }) => Promise<{ data: RoleCloneByIdApiResponse; error: any }>; 
    updateRoleById: (props: { id: number; item: DetailedUserRole }) => Promise<{ data: RoleUpdateByIdApiResponse; error: any }>; 
    moveRoleById: (props: { id: number; parentId: number }) => Promise<{ data: RoleUpdateByIdApiResponse; error: any }>; 
    getRoleCollection: () => Promise<RoleGetCollectionApiResponse>; 
    activeId: number; 
    getAllIds: number[]; 
} 

import { useWidgetManager } from '@pimcore/studio-ui-bundle/modules/widget-manager' 
 
const useWidgetManager: () => { 
    openMainWidget: (tabConfig: WidgetManagerTabConfig) => void; 
    openBottomWidget: (tabConfig: WidgetManagerTabConfig) => void; 
    openLeftWidget: (tabConfig: WidgetManagerTabConfig) => void; 
    openRightWidget: (tabConfig: WidgetManagerTabConfig) => void; 
    switchToWidget: (id: string) => void; 
    closeWidget: (id: string) => void; 
    isMainWidgetOpen: (id: string) => boolean; 
    getOpenedMainWidget: () => TabNode | undefined; 
} 

import { useClickOutside } from '@pimcore/studio-ui-bundle/utils' 
 
const useClickOutside: ( 
    ref: MutableRefObject<any>, 
    handler: (event: MouseEvent) => void, 
    selectors?: string 
) => void 

import { useCssContainer } from '@pimcore/studio-ui-bundle/utils' 
 
const useCssContainer: ({ name, type }: { name: string; type?: string }) => { 
    styleDefinition: ReturnType<typeof useCssContainerStyles>; 
} 

import { usePrevious } from '@pimcore/studio-ui-bundle/utils' 
 
const usePrevious: <T>(value: T) => T | undefined 

import { useServerSideEvent } from '@pimcore/studio-ui-bundle/utils' 
 
const useServerSideEvent: (props: { 
    topics: NonEmptyArray<string>; 
    messageHandler?: (event: MessageEvent) => void; 
    openHandler?: () => void; 
}) => { 
    open: () => void; 
    close: () => void; 
} 

import { useElementResize } from '@pimcore/studio-ui-bundle/utils' 
 
const useElementResize: (ref: RefObject<HTMLDivElement>) => number 

import { useElementVisible } from '@pimcore/studio-ui-bundle/utils' 
 
const useElementVisible: ( 
    ref: RefObject<HTMLElement>, 
    continueObserving?: boolean, 
    disable?: boolean 
) => boolean