@fernir2/saas-kit-cli 0.1.4 → 0.1.5

package/packages/level2/meta/resource-list/ResourceList.jsx

@@ -1,63 +0,0 @@
-"use client";
-import { createContext, Fragment, useLayoutEffect, use, useRef, useMemo } from "react";
-import { isFilterListPositionLeft } from "@meta/resource-list/ResourceList.funcs";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { tableDisplayModes } from "@fd-toolbox/enums/enums";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdSubHeading } from "@fd-component-toolbox/subheading/FdSubHeading";
-import { FdResourceListFilter } from "@meta/resource-list/resource-list-filter/FdResourceListFilter";
-import { FdResourceListTable } from "@meta/resource-list/resource-table-list/FdResourceTableList";
-import { FdResourceListCard } from "@meta/resource-list/resource-list-card/FdResourceListCard";
-import { useRefreshResources, useResourceListEffects, useResourceListFilterCallbacks, useResourceListState, useResourcePaginationAndNavigation, } from "@meta/resource-list/resource-list-hooks";
-import { useFdSearchParams } from "@meta/client/framework/hooks";
-import { onRestoreState } from "@root/packages/level2/meta/resource-list/resource-list-persist-state";
-import { useGlobalConfig } from "@meta/providers/global-provider/FdGlobalContext";
-import { getResourceListConfig } from "@meta/resource-list/resource-list-global-config";
-/**
- * Context for {@link ResourceList}
- */
-export const ResourceListContext = createContext(null);
-/**
- * Displays a list of resources with optional filtering and table display modes.
- *
- * @see {@link ResourceListProps} for component props
- * @see {@link ResourceListContext} for context values
- * @see {@link ResourceListConfig} for configuration options
- */
-export function ResourceList({ externalResources, resourceListConfig: resourceListConfigProp, resourceName: resourceNameProp, filters: filtersProp, showFilters, displayMode, isTableRequired, pluralName, resourcesPromise, uiResourceMeta: uiResourceMetaProp, relatedUiResourceMetas, }) {
-    const searchParams = Object.fromEntries(useFdSearchParams().entries());
-    const resourcesProp = resourcesPromise ? use(resourcesPromise) : resourcesPromise;
-    const tableComponentRef = useRef(null);
-    const { globalConfig } = useGlobalConfig();
-    const globalResourceListConfig = useMemo(() => getResourceListConfig(globalConfig, resourceNameProp, resourceListConfigProp), [resourceListConfigProp, resourceNameProp, globalConfig]);
-    const { state } = useResourceListState(isTableRequired ?? true, globalResourceListConfig, resourceNameProp, filtersProp, uiResourceMetaProp);
-    useLayoutEffect(() => {
-        state.setResourceMeta(uiResourceMetaProp?.resourceMeta ?? undefined);
-        onRestoreState(ResourceList.name + resourceNameProp, state.setComponentState, resourceNameProp, state.setIsLoading);
-    }, [
-        resourceNameProp,
-        state.setIsLoading,
-        state.setResourceMeta,
-        state.setComponentState,
-        uiResourceMetaProp,
-    ]);
-    useResourceListEffects(state, searchParams, externalResources, showFilters, globalResourceListConfig, resourceNameProp, resourcesProp, uiResourceMetaProp);
-    const { onFilterChangeCallback, onSortCallback, isCreateOnlyResourceState } = useResourceListFilterCallbacks(state, externalResources, resourceNameProp);
-    const { refreshResources } = useRefreshResources(state, externalResources);
-    const { onPagingCallback, onNavigateToResource } = useResourcePaginationAndNavigation(state, externalResources);
-    const contextValue = useMemo(() => ({ tableComponentRef, refreshResources }), [tableComponentRef, refreshResources]);
-    return (<ResourceListContext.Provider value={contextValue}>
-            {state.hasNeededAccess && (<div className={cn(isFilterListPositionLeft(state.resourceListConfig) &&
-                "flex w-full max-w-full flex-col md:flex-row")}>
-                    {!state.isLoading && (<FdResourceListFilter showFilters={showFilters ?? true} resourceListConfig={state.resourceListConfig} uiResourceMeta={state.uiResourceMeta} resourceMeta={state.resourceMeta} onFilterChange={onFilterChangeCallback} queryODataFilters={state.queryODataFilters} onRefreshResources={refreshResources} onViewModeChange={state.setViewMode} viewMode={state.viewMode} externalResources={externalResources} filterListRef={state.resourceFilterListComponentRef} relatedUiResourceMetas={relatedUiResourceMetas}/>)}
-                    <div className={cn("m-0 flex gap-4 p-0", state.shouldDisplayTable ? "flex-col" : "items-start", isFilterListPositionLeft(state.resourceListConfig) &&
-                "max-h-full w-full overflow-x-auto")}>
-                        {!(isTableRequired ?? true) && <FdSubHeading>{pluralName}</FdSubHeading>}
-                        <FdResourceListCard onRefreshResources={refreshResources} resourcesState={state.resourcesState} uiResourceMeta={state.uiResourceMeta} viewMode={state.viewMode} displayMode={displayMode ?? tableDisplayModes.default}/>
-                        {state.resourceListConfig.filtersTableInBetweenContainer?.map((Component) => (<Fragment key={Component?.toString()}>{Component}</Fragment>))}
-                        <FdResourceListTable shouldDisplayTable={state.shouldDisplayTable} resourceName={state.resourceName} resourceListConfig={state.resourceListConfig} uiResourceMeta={state.uiResourceMeta} resourcesState={state.resourcesState} state={state.componentState} onSort={onSortCallback} onPaging={onPagingCallback} onRefreshResources={refreshResources} displayMode={displayMode ?? tableDisplayModes.default} isLoading={state.isLoading} readonly={state.readonly} tableComponentRef={tableComponentRef} relatedUiResourceMetas={relatedUiResourceMetas}/>
-                    </div>
-                </div>)}
-            {isCreateOnlyResourceState && <FdButton onClick={onNavigateToResource}>Add</FdButton>}
-        </ResourceListContext.Provider>);
-}

package/packages/level2/meta/resource-list/resource-add-button.jsx

@@ -1,11 +0,0 @@
-import { tableElementSuffixes } from "@fd-component-toolbox/table-element-suffixes";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { FdViewSheet } from "@meta/view/FdViewSheet";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-export function ResourceAddButton({ resourceName, onRefreshResources, editMode }) {
-    return (<FdViewSheet resourceName={resourceName} onRefreshResources={onRefreshResources} editMode={editMode}>
-            <FdButton id={tableElementSuffixes.addButton} variant="icon" size="icon" className="size-4">
-                <FdIcon name={iconNames.plus} size={iconSizes.extraSmall} className="stroke-muted-foreground stroke-0.65"/>
-            </FdButton>
-        </FdViewSheet>);
-}

package/packages/level2/meta/resource-list/resource-list-card/FdResourceListCard.jsx

@@ -1,7 +0,0 @@
-import { FdCardList } from "@meta/card-list/FdCardList";
-import { shouldDisplayCardList } from "@meta/resource-list/resource-list-card/FdResourceListCard.funcs";
-export function FdResourceListCard({ onRefreshResources, resourcesState, uiResourceMeta, viewMode, displayMode, }) {
-    if (!shouldDisplayCardList(viewMode))
-        return null;
-    return (<FdCardList onRefreshResources={onRefreshResources} resources={resourcesState} uiResourceMeta={uiResourceMeta} itemDeleted={onRefreshResources} displayMode={displayMode}/>);
-}

package/packages/level2/meta/resource-list/resource-list-filter/FdResourceListFilter.jsx

@@ -1,11 +0,0 @@
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdResourceFilterList, } from "@meta/filtering/resource-filter-list/FdResourceFilterList";
-import { isFilterListPositionLeft } from "@meta/resource-list/ResourceList.funcs";
-import { shouldDisplayFilterList } from "@meta/resource-list/resource-list-filter/FdResourceListFilter.funcs";
-export function FdResourceListFilter({ showFilters, resourceListConfig, uiResourceMeta, resourceMeta, onFilterChange, queryODataFilters, onRefreshResources, onViewModeChange, viewMode, externalResources, filterListRef, relatedUiResourceMetas, }) {
-    return (<div className={cn(isFilterListPositionLeft(resourceListConfig) && "md:h-full md:min-w-max")}>
-            {shouldDisplayFilterList(showFilters, resourceMeta, externalResources) && (<div className={cn("flex w-full flex-col items-center md:p-0", isFilterListPositionLeft(resourceListConfig) && "h-full max-h-full")}>
-                    <FdResourceFilterList ref={filterListRef} uiResourceMeta={uiResourceMeta} stateKey={`${FdResourceFilterList.displayName}_${resourceMeta.id}_resourceList`} onFilterChange={onFilterChange} queryODataFilters={queryODataFilters} onRefreshResources={onRefreshResources} position={resourceListConfig.tableConfig.filterListPosition} onViewModeChanged={onViewModeChange} viewMode={viewMode} showBackButton={true} relatedUiResourceMetas={relatedUiResourceMetas}/>
-                </div>)}
-        </div>);
-}

package/packages/level2/meta/resource-list/resource-table-list/FdResourceTableList.jsx

@@ -1,14 +0,0 @@
-import { FdTable } from "@meta/table/FdTable";
-import { cn } from "@fd-toolbox/lib/utils";
-import { isFilterListPositionLeft } from "@meta/resource-list/ResourceList.funcs";
-import { getResourceListTableId } from "@meta/resource-list/resource-table-list/FdResourceTableList.funcs";
-export function FdResourceListTable({ shouldDisplayTable, resourceName, resourceListConfig, uiResourceMeta, resourcesState, state, onSort, onPaging, onRefreshResources, displayMode, isLoading, readonly, tableComponentRef, relatedUiResourceMetas, }) {
-    if (!shouldDisplayTable)
-        return null;
-    return (<div className="w-full overflow-auto px-0">
-            <div>
-                <FdTable className={cn(isFilterListPositionLeft(resourceListConfig) &&
-            "max-h-full w-full min-w-min overflow-hidden pl-2 pt-4")} id={getResourceListTableId(resourceName)} ref={tableComponentRef} items={resourcesState} readonly={readonly} uiResourceMeta={uiResourceMeta} tableConfig={resourceListConfig.tableConfig} externalSorting={true} tableSort={state.tableSort} sort={onSort} onPaging={onPaging} onRefreshItems={onRefreshResources} itemDeleted={onRefreshResources} displayMode={displayMode} isLoading={isLoading} relatedUiResourceMetas={relatedUiResourceMetas}/>
-            </div>
-        </div>);
-}

package/packages/level2/meta/table/FdTable.jsx

@@ -1,147 +0,0 @@
-import React, { useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect, useImperativeHandle, } from "react";
-import { tableDisplayModes, } from "@fd-toolbox/enums/enums";
-import { onTableSort, getHeight, handlePaging, setTableConfig, initializeFdTable, createInternalTableColumns, } from "@meta/table/FdTable.funcs";
-import { cn } from "@fd-toolbox/lib/utils";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { FdTableBody } from "@meta/table/body/FdTableBody";
-import { FdTableHeader } from "@meta/table/header/FdTableHeader";
-import { FdPager } from "@meta/table/pager/FdPager";
-import { minColumnWidthPx, targetColumnWidthPx } from "@meta/table/table-constants";
-import { useMediaQuery } from "@fd-toolbox/hooks/use-media-query";
-import { FdTableContext } from "@meta/table/table-context";
-import { processLocalRowDeletion } from "@meta/table/services/fd-table-private-rows";
-import { tableElementSuffixes } from "@fd-component-toolbox/table-element-suffixes";
-import { calculateTableAndColumnsWidths, getTableWidthStyles } from "@meta/table/table-widths-functions";
-let instanceCount = { count: 0 };
-/**
- * Advanced data table component with sorting, pagination, and extensive configuration options through {@link FdTableConfig}
- *
- * @see {@link FdTableProps} for component props
- * @see {@link FdTableComponent} for available ref methods
- * @see {@link FdTableConfig} for configuration options
- */
-export function FdTable({ id: idProp, readonly, notForDisplayProps, heightPixels, widthPixels, tableConfig, externalSorting, uiResourceMeta, tableSort, items, sort, onPaging, onRefreshItems, itemDeleted, onRowClick, className, pageSize: pageSizeProp, rowHighlightBehaviour, displayMode, adaptiveWidth, onRowsUpdate, isLoading, relatedUiResourceMetas, dataInfo, ref, }) {
-    const id = idProp ?? tableElementSuffixes.table;
-    const effectiveDisplayMode = displayMode ?? tableDisplayModes.default;
-    const [pageSize, setPageSize] = useState(pageSizeProp ?? 50);
-    const [tableBodyHeightPixels, setTableBodyHeightPixels] = useState(heightPixels ?? 0);
-    const [internalTableColumns, setInternalTableColumns] = useState([]);
-    const [tableRows, setTableRows] = useState([]);
-    const [tableId, setTableId] = useState(id);
-    const [instanceNumber, setInstanceNumber] = useState(instanceCount.count);
-    const fdTableRef = useRef(null);
-    const fdTableHeaderRef = useRef(null);
-    const possibleColumnValues = useMemo(() => new Map(), []);
-    const [isHovered, setIsHovered] = useState(false);
-    const [isActive, setIsActive] = useState(false);
-    const [pageNumber, setPageNumber] = useState(1);
-    const [columnWidths, setColumnWidths] = useState([]);
-    const targetWidth = internalTableColumns.length * targetColumnWidthPx;
-    const minWidth = internalTableColumns.length * minColumnWidthPx;
-    const isSmallScreen = useMediaQuery(`(max-width: calc(${targetWidth / 16}rem + 10vw))`);
-    const tableHeight = pageSize - tableRows.length < 25 && getHeight(pageSize);
-    const deleteRowsLocally = useCallback((itemIds) => {
-        setTableRows((prevRows) => processLocalRowDeletion(prevRows, itemIds, onRowsUpdate));
-    }, [onRowsUpdate]);
-    useImperativeHandle(ref, () => ({
-        getSelectedRows: () => tableRows.filter((r) => r.selected),
-        getSelectedRowsIds: () => tableRows.filter((r) => r.selected).map((selectedRow) => selectedRow.item.id),
-        resetSelectedRows: () => {
-            setTableRows(tableRows.map((r) => ({ ...r, selected: false })));
-        },
-        deleteRowsLocally,
-    }), [tableRows, deleteRowsLocally]);
-    useEffect(() => {
-        setTableConfig(setInternalTableColumns, setColumnWidths);
-    }, []);
-    useAsyncEffect(() => {
-        createInternalTableColumns(setInternalTableColumns, tableConfig, readonly ?? false, notForDisplayProps ?? [], possibleColumnValues, effectiveDisplayMode, uiResourceMeta, fdTableRef?.current?.getBoundingClientRect().width, [], dataInfo);
-        return initializeFdTable(setInternalTableColumns, tableConfig, readonly ?? false, notForDisplayProps ?? [], possibleColumnValues, effectiveDisplayMode, instanceNumber, setInstanceNumber, instanceCount, setTableId, heightPixels ?? 0, tableId, setTableBodyHeightPixels, setTableRows, tableRows, internalTableColumns, setPageNumber, fdTableRef?.current ?? undefined, fdTableHeaderRef?.current ?? undefined, tableSort, sort, externalSorting, uiResourceMeta, relatedUiResourceMetas, dataInfo);
-    }, [uiResourceMeta]);
-    useLayoutEffect(() => {
-        setTableRows(items.slice(0, pageSize).map((item, index) => ({ selected: false, item: item, index: index })));
-    }, [setTableRows, items, pageSize]);
-    const onGetPossibleValues = useCallback((str) => possibleColumnValues.get(str), [possibleColumnValues]);
-    useEffect(() => {
-        setPageSize(pageSizeProp ?? 50);
-    }, [pageSizeProp]);
-    const tableInstance = useMemo(() => ({
-        id: tableId,
-        tableRows: tableRows,
-        internalTableColumns: internalTableColumns,
-        uiResourceMeta: uiResourceMeta,
-        getColumnPossibleValues: onGetPossibleValues,
-        customActions: tableConfig?.customActions,
-        editMode: tableConfig.editMode,
-        multiSelect: tableConfig.multiSelect,
-        isBrowser: tableConfig.isBrowser,
-    }), [
-        tableId,
-        tableRows,
-        internalTableColumns,
-        uiResourceMeta,
-        onGetPossibleValues,
-        tableConfig?.customActions,
-        tableConfig.editMode,
-        tableConfig.multiSelect,
-        tableConfig.isBrowser,
-    ]);
-    const handleMouseEnter = useCallback(() => {
-        if (effectiveDisplayMode === tableDisplayModes.minimal) {
-            setIsHovered(true);
-        }
-    }, [effectiveDisplayMode]);
-    const handleMouseLeave = useCallback(() => {
-        if (effectiveDisplayMode === tableDisplayModes.minimal) {
-            setIsHovered(false);
-        }
-    }, [effectiveDisplayMode]);
-    const onPagingCallback = useCallback((paging) => {
-        handlePaging(paging, setPageSize, onPaging);
-    }, [onPaging]);
-    const onSortCallback = useCallback((column) => onTableSort(column, internalTableColumns, tableRows, (updatedRows) => setTableRows([...updatedRows]), sort, externalSorting), [externalSorting, internalTableColumns, sort, tableRows, setTableRows]);
-    const [columnToWidthPercent, setColumnToWidthPercent] = useState({});
-    const [tableWidthRem, setTableWidthRem] = useState(minWidth / 16);
-    useEffect(() => {
-        calculateTableAndColumnsWidths(internalTableColumns, setColumnToWidthPercent, setTableWidthRem);
-    }, [internalTableColumns]);
-    const tableContextValue = useMemo(() => {
-        return {
-            columnWidths,
-            setColumnWidths,
-            tableRows,
-            setTableRows,
-            isLoading: isLoading ?? false,
-        };
-    }, [columnWidths, setColumnWidths, tableRows, setTableRows, isLoading]);
-    return (<FdTableContext.Provider value={tableContextValue}>
-            <div className={cn("relative flex size-full flex-col justify-between overflow-visible", className)} style={getTableWidthStyles(isSmallScreen, minWidth, targetWidth, tableWidthRem, adaptiveWidth)} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-                <div className="flex flex-col">
-                    {internalTableColumns.length > 0 && (<div className="flex flex-col justify-start border-b border-muted" style={{
-                width: widthPixels,
-            }}>
-                            <div ref={fdTableHeaderRef}>
-                                <FdTableHeader tableInstance={tableInstance} tableSorted={onSortCallback} onRefreshItems={onRefreshItems} displayMode={effectiveDisplayMode} isTableHovered={isHovered} columnToWidthPercent={columnToWidthPercent}/>
-                            </div>
-                        </div>)}
-                    <div id={tableId} ref={fdTableRef} className={`h-full ${tableHeight}`}>
-                        {internalTableColumns.length > 0 && (<div className="flex flex-col justify-start" style={{
-                width: widthPixels,
-                ...(tableBodyHeightPixels && {
-                    height: tableBodyHeightPixels,
-                }),
-            }}>
-                                <FdTableBody tableInstance={tableInstance} onRefreshItems={onRefreshItems} deleteItem={itemDeleted} onRowClick={onRowClick} rowHighlightBehaviour={rowHighlightBehaviour} tableActionType={effectiveDisplayMode}/>
-                            </div>)}
-                    </div>
-                </div>
-                <div className={cn(!isHovered &&
-            !isActive &&
-            effectiveDisplayMode === tableDisplayModes.minimal &&
-            "invisible")}>
-                    <FdPager displayMode={effectiveDisplayMode} pageSize={pageSize} rowCount={tableRows.length} onPaging={onPagingCallback} setIsActive={setIsActive} setPageNumber={setPageNumber} pageNumber={pageNumber}/>
-                </div>
-            </div>
-        </FdTableContext.Provider>);
-}
-FdTable.displayName = "FdTable";

package/packages/level2/meta/table/body/FdTableBody.jsx

@@ -1,9 +0,0 @@
-import React, { memo } from "react";
-import { rowHighlightBehaviors, } from "@fd-toolbox/enums/enums";
-import { getTableBodyRowClasses, getTableBodyRowId } from "@meta/table/body/FdTableBody.funcs";
-import { FdTableBodyRow } from "@meta/table/body-row/FdTableBodyRow";
-const FdTableBody = memo(({ tableInstance, displayMode, onRefreshItems, deleteItem, onRowClick, tableActionType, rowHighlightBehaviour, }) => tableInstance.tableRows.length > 0 ? (<>
-                {tableInstance.tableRows.map((row, index) => (<FdTableBodyRow key={getTableBodyRowId(tableInstance, index)} rowContext={{ row, tableInstance, internalTableColumns: [] }} displayMode={displayMode} onRefreshItems={onRefreshItems} itemDeleted={deleteItem} cellClick={onRowClick} className={getTableBodyRowClasses(rowHighlightBehaviour ?? rowHighlightBehaviors.default)} tableActionType={tableActionType}/>))}
-            </>) : (<FdTableBodyRow className="table-cell"/>));
-FdTableBody.displayName = "FdTableBody";
-export { FdTableBody };

package/packages/level2/meta/table/body-cell/FdActionBodyCell.jsx

@@ -1,145 +0,0 @@
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { FdViewSheet } from "@meta/view/FdViewSheet";
-import { YesOrNoDialog } from "@fd-component-toolbox/dialog/YesOrNoDialog";
-import { messages } from "@fd-toolbox-core/constants/messages-constants";
-import { FdDropdownMenu, FdDropdownMenuContent, FdDropdownMenuTrigger, } from "@fd-component-toolbox/dropdown-menu/FdDropdownMenu";
-import { internalTableColumnTypes, tableCustomActionTypes, tableCustomActionPositions, } from "@meta/table/table-models";
-import { tableActionTypes } from "@fd-toolbox/enums/enums";
-import { useCallback, useMemo, useState } from "react";
-import { tabsNames } from "@meta/view/view-constants";
-import { TableCustomAction } from "@meta/table/table-custom-action/TableCustomAction";
-import { FdTooltip, FdTooltipContent, FdTooltipProvider, FdTooltipTrigger, } from "@fd-component-toolbox/tooltip/FdTooltip";
-import { FdFadeOutText } from "@fd-component-toolbox/fade-out-text/FdFadeOutText";
-import { getCellId } from "@meta/table/body-cell/FdBodyCell.funcs";
-import { tableElementSuffixes } from "@fd-component-toolbox/table-element-suffixes";
-import { FdCustomActionLink } from "@meta/table/body-cell/FdCustomActionLink";
-import { shouldShowActionHelper } from "@meta/table/body-cell/FdActionBodyCell.funcs";
-export function FdActionBodyCell({ cellContext, actionType, shouldShowEditButton, shouldShowViewButton, shouldShowDeleteButton, viewCellId, isHovered, onRefreshItems, onViewClick, onDialogResponse, }) {
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const onDropdownOpenChange = useCallback((open) => {
-        setDropdownOpen(open);
-    }, []);
-    const shouldShowCustomActions = useMemo(() => {
-        return !!(cellContext.tableInstance.customActions?.length &&
-            (cellContext.internalTableColumn.type === internalTableColumnTypes.action ||
-                cellContext.internalTableColumn.type === internalTableColumnTypes.customHeaderAction));
-    }, [cellContext]);
-    const shouldShowAction = useCallback((action) => {
-        return shouldShowActionHelper(action, cellContext, shouldShowCustomActions);
-    }, [cellContext, shouldShowCustomActions]);
-    const onCustomAction = useCallback((result) => {
-        if (result.shouldRefresh)
-            onRefreshItems?.();
-    }, [onRefreshItems]);
-    return (<>
-            {actionType === tableActionTypes.minimal &&
-            (shouldShowEditButton || shouldShowViewButton || shouldShowDeleteButton) && (<FdDropdownMenu open={dropdownOpen} onOpenChange={onDropdownOpenChange}>
-                        <FdDropdownMenuTrigger asChild>
-                            <FdButton size="icon" variant="ghost" className={cn("size-5 p-1", isHovered || dropdownOpen ? "animate-fade-in" : "animate-fade-out")}>
-                                <FdIcon name={iconNames.dotsVerticalIcon}/>
-                            </FdButton>
-                        </FdDropdownMenuTrigger>
-                        <FdDropdownMenuContent className={cn("top-2 z-50 mt-2 box-border min-w-20 rounded-md border bg-background")}>
-                            {shouldShowViewButton && (<div className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                                    <FdViewSheet id={cellContext.row.item.id} resourceName={cellContext.tableInstance.uiResourceMeta?.resourceMeta
-                    .resourceName} onRefreshResources={onRefreshItems} onEditClick={onViewClick} onCloseClick={setDropdownOpen} editMode={cellContext.tableInstance.editMode}>
-                                        <div id={viewCellId} className={"flex cursor-pointer items-center gap-2 px-1.5 py-1 text-muted-foreground"}>
-                                            <FdIcon name={iconNames.visibility}/>
-                                            <p>View</p>
-                                        </div>
-                                    </FdViewSheet>
-                                </div>)}
-                            {!cellContext.tableInstance.hideDeleteButton && shouldShowDeleteButton && (<div className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                                    <YesOrNoDialog title={messages.deleteConfirmation} onResponse={onDialogResponse} onCloseClick={setDropdownOpen} trigger={<div className="flex cursor-pointer items-center gap-2 px-1.5 py-1 text-muted-foreground">
-                                                <FdIcon name={iconNames.trash}/>
-                                                <p>Delete</p>
-                                            </div>}/>
-                                </div>)}
-                            {shouldShowCustomActions &&
-                cellContext.tableInstance.customActions.map((item) => (<div key={`customAction_${item.name}`} className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                                        <TableCustomAction onAction={onCustomAction} customAction={item} cellContext={cellContext}/>
-                                    </div>))}
-                        </FdDropdownMenuContent>
-                    </FdDropdownMenu>)}
-            {actionType === tableActionTypes.default && (<div className="flex w-full items-center justify-center">
-                    <FdCustomActionValue cellContext={cellContext} shouldShowCustomActions={shouldShowCustomActions} shouldShowAction={shouldShowAction} onCustomAction={onCustomAction}/>
-                    {(cellContext.internalTableColumn.actionPosition === tableCustomActionPositions.default ||
-                !cellContext.internalTableColumn.actionPosition) && (<FdDropdownMenu open={dropdownOpen} onOpenChange={onDropdownOpenChange}>
-                            <FdDropdownMenuTrigger asChild>
-                                <FdButton id={getCellId(cellContext.row.index, cellContext, tableElementSuffixes.actionsMenu)} size="icon" variant="ghost" className="size-5 p-1">
-                                    <FdIcon name={iconNames.dotsVerticalIcon}/>
-                                </FdButton>
-                            </FdDropdownMenuTrigger>
-                            <FdDropdownMenuContent>
-                                <div className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                                    <FdViewSheet id={cellContext.row.item.id} resourceName={cellContext.tableInstance.uiResourceMeta?.resourceMeta
-                    .resourceName} onRefreshResources={onRefreshItems} onEditClick={onViewClick} defaultTab={tabsNames.comments} editMode={cellContext.tableInstance.editMode}>
-                                        <div className="flex cursor-pointer items-center gap-2 px-1.5 py-1 text-muted-foreground">
-                                            <p>Comments</p>
-                                        </div>
-                                    </FdViewSheet>
-                                </div>
-                                {!cellContext.tableInstance.hideDeleteButton && shouldShowDeleteButton && (<div className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                                        <YesOrNoDialog title={messages.deleteConfirmation} onResponse={onDialogResponse} onCloseClick={setDropdownOpen} trigger={<div className="flex cursor-pointer items-center gap-2 px-1.5 py-1 text-muted-foreground">
-                                                    <p>Delete</p>
-                                                </div>}/>
-                                    </div>)}
-                                {shouldShowCustomActions &&
-                    cellContext.tableInstance
-                        .customActions.filter((action) => action.isInShowMoreDropdown)
-                        .map((item) => (<div key={`customAction_${item.name}`} className="flex select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent">
-                                                <TableCustomAction onAction={onCustomAction} customAction={item} cellContext={cellContext}/>
-                                            </div>))}
-                            </FdDropdownMenuContent>
-                        </FdDropdownMenu>)}
-                </div>)}
-        </>);
-}
-function FdCustomActionValue({ cellContext, shouldShowCustomActions, shouldShowAction, onCustomAction, }) {
-    if (shouldShowCustomActions &&
-        cellContext.internalTableColumn.actionType === tableCustomActionTypes.icon) {
-        return cellContext.tableInstance
-            .customActions.filter((action) => shouldShowAction(action) && action.actionType === tableCustomActionTypes.icon)
-            .map((action) => (<FdTooltipProvider key={`customAction_button_${action.name}`}>
-                    <FdTooltip>
-                        <FdTooltipTrigger asChild>
-                            <FdButton size="lg" variant="ghost" className={cn("size-7 p-1")} onClick={() => {
-                action.cellAction?.(cellContext);
-                onCustomAction({ shouldRefresh: true });
-            }}>
-                                {action.icon && (<FdIcon name={action.icon} className={cn("size-8 font-bold", action.dynamicClassName?.(cellContext))}/>)}
-                            </FdButton>
-                        </FdTooltipTrigger>
-                        <FdTooltipContent>{action.name}</FdTooltipContent>
-                    </FdTooltip>
-                </FdTooltipProvider>));
-    }
-    else if (cellContext.internalTableColumn.actionType === tableCustomActionTypes.text) {
-        return (<div className="w-full flex-col">
-                {cellContext.tableInstance
-                .customActions.filter((action) => action.actionType === tableCustomActionTypes.text)
-                .map((action) => (<FdFadeOutText key={action.name} className="cursor-pointer select-none justify-center text-center text-primary hover:text-primary-hover hover:underline" onClick={() => {
-                    action.cellAction?.(cellContext);
-                    onCustomAction({ shouldRefresh: action.shouldRefresh });
-                }}>
-                            {action.name}
-                        </FdFadeOutText>))}
-            </div>);
-    }
-    else if (cellContext.internalTableColumn.actionType === tableCustomActionTypes.link) {
-        return (<div className="w-full flex-col">
-                {cellContext.tableInstance
-                .customActions.filter((action) => action.actionType === tableCustomActionTypes.link)
-                .map((action) => (<FdFadeOutText key={action.name} className="cursor-pointer select-none justify-center text-center text-primary hover:text-primary-hover hover:underline" onClick={() => {
-                    action.cellAction?.(cellContext);
-                    onCustomAction({
-                        shouldRefresh: action.shouldRefresh,
-                    });
-                }}>
-                            {action.dynamicLink ? (<FdCustomActionLink text={action.name} dynamicLink={action.dynamicLink} cellContext={cellContext}/>) : (action.name)}
-                        </FdFadeOutText>))}
-            </div>);
-    }
-}

package/packages/level2/meta/table/body-cell/FdBlobBodyCell.jsx

@@ -1,27 +0,0 @@
-import { useEffect, useState } from "react";
-import { FdDialog, FdDialogContent, FdDialogTitle, FdDialogTrigger, } from "@fd-component-toolbox/dialog/FdDialog";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { getBlobUrl } from "@meta/core/resources/blob/blob-urls";
-import { extractScreenshotBlobUrl } from "@meta/table/body-cell/FdBlobBodyCell.funcs";
-export function FdBlobBodyCell({ cellContext }) {
-    const [fileName, setFileName] = useState("");
-    const imageUrl = getBlobUrl(fileName);
-    useEffect(() => {
-        extractScreenshotBlobUrl(cellContext.row.item, setFileName);
-    }, [cellContext.row.item]);
-    if (!fileName)
-        return null;
-    return (<FdDialog>
-            <FdDialogTrigger className="flex size-full">
-                <div className="relative flex h-32 w-44">
-                    <FdFrameworkImage src={imageUrl} alt="Automatically generated screenshot preview" fill className="rounded-md object-contain" loading="lazy"/>
-                </div>
-            </FdDialogTrigger>
-            <FdDialogContent className="h-4/5 w-full max-w-5xl">
-                <FdDialogTitle className="hidden"/>
-                <div className="relative size-full">
-                    <FdFrameworkImage src={imageUrl} alt="Automatically generated screenshot preview" fill className="object-contain"/>
-                </div>
-            </FdDialogContent>
-        </FdDialog>);
-}

package/packages/level2/meta/table/body-cell/FdBodyCell.jsx

@@ -1,133 +0,0 @@
-import { createElement, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdCheckbox } from "@fd-component-toolbox/checkbox/FdCheckbox";
-import { internalTableColumnTypes } from "@meta/table/table-models";
-import { getBodyImageCell, handleDialogResponse, initBodyCell, isRightAlignColumn, updateSelectedRow, } from "@meta/table/body-cell/FdBodyCell.funcs";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { routes } from "@fd-toolbox/routing/routes";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { FdActionBodyCell } from "@meta/table/body-cell/FdActionBodyCell";
-import { getResourceUrl } from "@meta/services/meta-navigations";
-import { FdAvatar, FdAvatarFallback, FdAvatarImage } from "@fd-component-toolbox/avatar/FdAvatar";
-import { FdFrameworkImage } from "@fd-component-toolbox/client/framework";
-import { silentChangeUrl } from "@fd-toolbox/routing/routers";
-import { isClickableCell } from "@meta/table/services/fd-table-private-cell";
-import { FdFadeOutText } from "@fd-component-toolbox/fade-out-text/FdFadeOutText";
-import { imageNotFoundUrl } from "@fd-toolbox/constants/public-files";
-import { isMarkdown, isRichText } from "@meta/core/property-types";
-import { markdownToHtml, parseText } from "@fd-component-toolbox/markdown/markdown-parser";
-import { FdTableContext } from "@meta/table/table-context";
-import { FdBodyCellValue } from "@meta/table/body-cell/FdBodyCellValue";
-import { isString } from "@fd-toolbox/types/ensure-type";
-export function FdBodyCell({ className, width, cellContext, onRefreshItems, itemDeleted, actionType, isHovered, }) {
-    const [cellId, setCellId] = useState("");
-    const [checkboxId, setCheckboxId] = useState("");
-    const [iconId, setIconId] = useState("");
-    const [viewCellId, setViewCellId] = useState("");
-    const [cellValue, setCellValue] = useState("");
-    const [parsedMarkdown, setParsedMarkdown] = useState("");
-    const [parsedRichText, setParsedRichText] = useState([]);
-    const [cellImage, setCellImage] = useState(null);
-    const [imageSrc, setImageSrc] = useState(imageNotFoundUrl);
-    const [cellWidth, setCellWidth] = useState(cellContext?.internalTableColumn.width ?? 0);
-    const [isDefaultOrExpandAdvisableCell, setIsDefaultOrExpandAdvisableCell] = useState(false);
-    const [isCheckmarkCell, setIsCheckmarkCell] = useState(false);
-    const [shouldShowEditButton, setShouldShowEditButton] = useState(false);
-    const [shouldShowViewButton, setShouldShowViewButton] = useState(false);
-    const [shouldShowDeleteButton, setShouldShowDeleteButton] = useState(false);
-    const { isLoading, setTableRows } = useContext(FdTableContext);
-    useEffect(() => {
-        if (cellContext) {
-            const loadImage = async () => {
-                const image = getBodyImageCell(cellContext);
-                if (image) {
-                    const src = await image;
-                    setImageSrc(src ?? imageNotFoundUrl);
-                }
-            };
-            loadImage();
-        }
-    }, [cellContext]);
-    useAsyncEffect(async () => {
-        await initBodyCell(cellId, setCellValue, setCellImage, setCheckboxId, setViewCellId, setCellId, setIconId, setIsDefaultOrExpandAdvisableCell, setIsCheckmarkCell, setCellWidth, setShouldShowEditButton, setShouldShowViewButton, setShouldShowDeleteButton, cellContext);
-    }, [cellContext, cellId]);
-    useAsyncEffect(async () => {
-        if (cellContext?.internalTableColumn?.propertyMeta && isString(cellValue)) {
-            if (isMarkdown(cellContext.internalTableColumn.propertyType, cellContext.internalTableColumn.propertyTypeFormat)) {
-                const html = await markdownToHtml(cellValue);
-                setParsedMarkdown(html ?? "");
-            }
-            if (isRichText(cellContext.internalTableColumn.propertyType, cellContext.internalTableColumn.propertyTypeFormat)) {
-                setParsedRichText(parseText(cellValue));
-            }
-        }
-    }, [cellValue]);
-    const alignmentClass = useMemo(() => {
-        return isRightAlignColumn(cellContext?.internalTableColumn) ? "justify-end" : "";
-    }, [cellContext?.internalTableColumn]);
-    const onCheckboxChange = useCallback((isChecked) => {
-        updateSelectedRow(isChecked, cellContext, setTableRows);
-    }, [cellContext, setTableRows]);
-    const onDialogResponse = useCallback((isYes) => handleDialogResponse(isYes, itemDeleted, cellContext), [cellContext, itemDeleted]);
-    const onViewClick = useCallback(() => {
-        if (cellContext) {
-            const url = getResourceUrl(routes.view, cellContext.tableInstance.uiResourceMeta.resourceMeta.resourceName, cellContext.row.item.id);
-            silentChangeUrl(url);
-        }
-    }, [cellContext]);
-    const onStopPropagationClick = useCallback((event) => {
-        event.stopPropagation();
-    }, []);
-    if (!cellContext)
-        return (<div className="p-4 text-xs text-muted-foreground lg:text-sm">
-                {isLoading ? "Loading..." : "No data"}
-            </div>);
-    return (<div style={{ minWidth: cellWidth, width }} className={cn("flex flex-col justify-around px-1 text-xs lg:text-sm", className)}>
-            {isDefaultOrExpandAdvisableCell && (<div className="relative w-full pl-1.5 pr-0.5 text-foreground">
-                    {!cellContext.internalTableColumn.cellTemplate ? (<div className={cn("hover:overflow-visible hover:whitespace-nowrap", isClickableCell(cellContext) &&
-                    "cursor-pointer text-fd-accent hover:cursor-pointer")}>
-                            <div className="transition-colors duration-200 ease-linear">
-                                <FdFadeOutText isRightAlign={isRightAlignColumn(cellContext?.internalTableColumn)}>
-                                    <div className={cn("flex items-center", alignmentClass)}>
-                                        {cellImage && (<FdAvatar className="mr-2 size-5">
-                                                <FdAvatarImage />
-                                                <FdAvatarFallback>
-                                                    <FdFrameworkImage className="object-fill" src={cellImage} alt="Cell image" width={40} height={40} loading="lazy"/>
-                                                </FdAvatarFallback>
-                                            </FdAvatar>)}
-                                    </div>
-                                    <div id={cellId} className="flex">
-                                        <FdBodyCellValue cellContext={cellContext} onRefreshItems={onRefreshItems} cellValue={String(cellValue)} imageSrc={imageSrc} onViewClick={onViewClick} parsedMarkdown={parsedMarkdown} parsedRichText={parsedRichText}/>
-                                    </div>
-                                </FdFadeOutText>
-                            </div>
-                        </div>) : (<div className="hover:overflow-visible hover:whitespace-nowrap">
-                            <div className="transition-colors duration-200 ease-linear">
-                                <div id={cellId} className="truncate transition-colors duration-200 ease-linear">
-                                    {createElement(cellContext.internalTableColumn.cellTemplate, {
-                    resource: cellContext.row.item,
-                    internalTableColumn: cellContext.internalTableColumn,
-                    resourceName: cellContext.tableInstance.uiResourceMeta.resourceMeta
-                        .resourceName,
-                })}
-                                </div>
-                            </div>
-                        </div>)}
-                </div>)}
-            <div className="flex w-full flex-row items-center justify-center gap-2" onClick={onStopPropagationClick}>
-                {cellContext.internalTableColumn.type === internalTableColumnTypes.checkBox &&
-            cellContext.tableInstance.multiSelect && (<div>
-                            <FdCheckbox id={checkboxId} onCheckedChange={onCheckboxChange} checked={cellContext.row.selected}/>
-                        </div>)}
-                {(cellContext.internalTableColumn.type === internalTableColumnTypes.action ||
-            cellContext.internalTableColumn.type === internalTableColumnTypes.customHeaderAction) && (<FdActionBodyCell cellContext={cellContext} actionType={actionType} shouldShowEditButton={shouldShowEditButton} shouldShowViewButton={shouldShowViewButton} shouldShowDeleteButton={shouldShowDeleteButton} viewCellId={viewCellId} isHovered={isHovered ?? false} onRefreshItems={onRefreshItems} onViewClick={onViewClick} onDialogResponse={onDialogResponse}/>)}
-            </div>
-            {isCheckmarkCell && (<div id={cellId} className="flex w-full justify-end">
-                    {!!cellValue && (<FdButton id={iconId} className="size-5" size="icon" variant="icon">
-                            <FdIcon name={iconNames.check}/>
-                        </FdButton>)}
-                    &nbsp;
-                </div>)}
-        </div>);
-}