@fernir2/saas-kit-cli 0.1.4 → 0.1.5

package/packages/level2/fd-component-toolbox/textarea/FdTextArea.jsx

@@ -1,42 +0,0 @@
-import React, { useEffect, useMemo, useState, useCallback } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import FdLabelAnimation from "@fd-component-toolbox/animation/FdLabelAnimation";
-import { useHover } from "@fd-toolbox/hooks/use-hover";
-import { onIncomingValueChange, onTextAreaBlur, onTextAreaValueChange, } from "@fd-component-toolbox/textarea/FdTextArea.funcs";
-/**
- * Textarea component with animated label
- *
- * @param FdTextareaProps {@link FdTextareaProps}
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *     const [text, setText] = useState('');
- *
- *     return (
- *         <FdTextarea label="Description" value={text} onChange={setText} placeholder="Enter description"/>
- *     );
- * }
- * ```
- */
-export function FdTextarea({ placeholder, onChange, label, value, onBlur, skipAnimationOnce, className, ref, ...props }) {
-    const isError = props["aria-invalid"] && props["aria-invalid"] !== "false";
-    const [isInputHovered, hoverHandlers] = useHover();
-    const [isInFocus, setIsInFocus] = useState(false);
-    const [textareaValue, setTextareaValue] = useState("");
-    useEffect(() => {
-        onIncomingValueChange(value, setTextareaValue);
-    }, [value]);
-    const onTextAreaValueChangeCallback = useCallback((e) => {
-        onTextAreaValueChange(e, setTextareaValue, onChange);
-    }, [onChange]);
-    const onTextAreaBlurCallback = useCallback((e) => {
-        onTextAreaBlur(e, setIsInFocus, onBlur);
-    }, [onBlur]);
-    const shouldLabelAnimate = useMemo(() => !!value || !!placeholder || isInFocus, [value, placeholder, isInFocus]);
-    return (<div className="relative">
-            <textarea ref={ref} onChange={onTextAreaValueChangeCallback} value={textareaValue} className={cn("flex h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", isError && "border-destructive focus-visible:outline-none", className)} placeholder={placeholder} onFocus={() => setIsInFocus(true)} onBlur={onTextAreaBlurCallback} {...props} {...hoverHandlers}/>
-            <FdLabelAnimation className="max-w-full" label={label} shouldAnimate={shouldLabelAnimate} isParentHovered={isInputHovered} isErrorStyle={isError} skipAnimationOnce={skipAnimationOnce}/>
-        </div>);
-}
-FdTextarea.displayName = "FdTextarea";

package/packages/level2/fd-component-toolbox/toaster/FdToaster.jsx

@@ -1,20 +0,0 @@
-"use client";
-import { Toaster } from "sonner";
-import { getFdToasterId } from "@fd-component-toolbox/toaster/FdToaster.funcs";
-/**
- * Toast notification component for displaying messages
- *
- * Based on {@link https://ui.shadcn.com/docs/components/sonner Sonner}
- */
-function FdToaster({ ...props }) {
-    return (<Toaster id={getFdToasterId()} richColors closeButton position="bottom-right" expand={false} className="toaster group" toastOptions={{
-            classNames: {
-                toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground " +
-                    "group-[.toaster]:shadow-lg",
-                description: "group-[.toast]:text-muted-foreground",
-                actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-                cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-            },
-        }} {...props}/>);
-}
-export { FdToaster };

package/packages/level2/fd-component-toolbox/tooltip/FdTooltip.jsx

@@ -1,80 +0,0 @@
-"use client";
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cn } from "@fd-toolbox/lib/utils";
-/**
- * Tooltip provider for managing tooltip context
- *
- * Based on {@link https://ui.shadcn.com/docs/components/tooltip Tooltip.Provider}
- */
-function FdTooltipProvider({ delayDuration, skipDelayDuration, ...props }) {
-    return (<TooltipPrimitive.Provider delayDuration={delayDuration ?? 350} skipDelayDuration={skipDelayDuration ?? 0} {...props}/>);
-}
-/**
- * Root component for creating a tooltip
- *
- * Based on {@link https://ui.shadcn.com/docs/components/tooltip Tooltip}
- *
- * @example
- * ```tsx
- * <FdTooltip delayDuration={100}>
- *     ...
- * </FdTooltip>
- * ```
- */
-const FdTooltip = TooltipPrimitive.Root;
-/**
- * Trigger element for showing tooltip
- *
- * Based on {@link https://ui.shadcn.com/docs/components/tooltip Tooltip.Trigger}
- *
- * @example
- * ```tsx
- * function MyComponent({ shouldHideTooltip }) {
- *     return (
- *         <FdTooltipTrigger disabled={shouldHideTooltip} onClick={...}>
- *             ...
- *         </FdTooltipTrigger>
- *     );
- * }
- * ```
- */
-const FdTooltipTrigger = TooltipPrimitive.Trigger;
-/**
- * Content container for tooltip text
- *
- * Based on {@link https://ui.shadcn.com/docs/components/tooltip Tooltip.Content}
- *
- * ```tsx
- * <FdTooltipContent align="start" side="right" sideOffset={17}>
- *     ...
- * </FdTooltipContent>
- * ```
- */
-export const tooltipContentSides = {
-    bottom: 0,
-    top: 1,
-    left: 2,
-    right: 3,
-};
-export const tooltipContentSidesStrings = {
-    [tooltipContentSides.bottom]: "bottom",
-    [tooltipContentSides.top]: "top",
-    [tooltipContentSides.left]: "left",
-    [tooltipContentSides.right]: "right",
-};
-export const tooltipAligns = {
-    start: 0,
-    center: 1,
-    end: 2,
-};
-export const tooltipAlignsStrings = {
-    [tooltipAligns.start]: "start",
-    [tooltipAligns.center]: "center",
-    [tooltipAligns.end]: "end",
-};
-function FdTooltipContent({ className, ref, ...props }) {
-    return (<TooltipPrimitive.Content ref={ref} className={cn("z-50 overflow-hidden rounded-md bg-fd-tertiary-900 px-3 py-1.5 text-xs text-primary-foreground shadow-md shadow-fd-tertiary-600", "animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "transition-all duration-200 ease-in-out", "dark:bg-primary dark:shadow-none", className)} {...props}/>);
-}
-FdTooltipContent.displayName = TooltipPrimitive.Content.displayName;
-export { FdTooltip, FdTooltipTrigger, FdTooltipContent, FdTooltipProvider };

package/packages/level2/meta/browsers/base-multi-browser/FdBaseMultiBrowser.jsx

@@ -1,72 +0,0 @@
-"use client";
-import { useCallback, useEffect, useState, useRef, useMemo, useImperativeHandle, } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { onMultiBrowserFilterReset, setMultiBrowserSelectionState, } from "@meta/browsers/base-multi-browser/FdBaseMultiBrowser.funcs";
-import { FdInput } from "@fd-component-toolbox/input/FdInput";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { FdFormControl, FdFormField, FdFormItem, FdFormMessage } from "@fd-component-toolbox/form/FdForm";
-import { FdBaseMultiBrowserDialog } from "@meta/browsers/base-multi-browser/base-multi-browser-dialog/FdBaseMultiBrowserDialog";
-import { multiBrowserDialogMaxWidth } from "@fd-component-toolbox/dialog/dialog-constants";
-import { getRequiredLabel } from "@meta/edit-resource/edit-resource-property-block/FdEditResourcePropertyBlock.funcs";
-import { browserTypes, browserTypeToSuffix } from "@meta/browsers/browser-type";
-import { elements } from "@fd-toolbox/constants/elements";
-export function FdBaseMultiBrowser({ required, propertyMeta, form, relatedResourceId, selectedResources, onCloseDialog, onDescriptionChange, parentContextName: parentContextNameProp, short, disabled, readOnly, relatedResourcePropertyMeta, onSetRelatedResourcePropertyMeta, propertyResourceMeta, onChange, setSelectedResources, setSelectedResourceIds, skipAnimationOnce, variant, relatedUiResourceMeta, children: icons, ref, }) {
-    const [selectedValues, setSelectedValues] = useState("");
-    const [isHovered, setIsHovered] = useState(false);
-    const parentContextName = parentContextNameProp ?? "";
-    const browser = parentContextName.includes(elements.multiBrowser.FdManyToManyBrowser)
-        ? browserTypeToSuffix[browserTypes.manyToManyBrowser]
-        : browserTypeToSuffix[browserTypes.multiBrowser];
-    const inputId = `${parentContextName}${propertyMeta.name}${browser}`;
-    const iconId = `${parentContextName}${propertyMeta.name}${elements.browser.browserIcon}`;
-    const dialogRef = useRef(null);
-    const buttonRef = useRef(null);
-    const data = useMemo(() => ({
-        maxWidth: multiBrowserDialogMaxWidth,
-        relatedResourcePropertyMeta: onSetRelatedResourcePropertyMeta
-            ? relatedResourcePropertyMeta
-            : propertyMeta,
-        selectedResources,
-        relatedResourceId,
-    }), [
-        onSetRelatedResourcePropertyMeta,
-        relatedResourcePropertyMeta,
-        propertyMeta,
-        selectedResources,
-        relatedResourceId,
-    ]);
-    useEffect(() => {
-        setMultiBrowserSelectionState(selectedResources, setSelectedValues, setIsHovered, propertyResourceMeta);
-    }, [selectedResources, propertyResourceMeta]);
-    const onFilterReset = useCallback(() => onMultiBrowserFilterReset(onChange, setSelectedResources, setSelectedResourceIds, dialogRef.current?.resetDialog), [onChange, setSelectedResourceIds, setSelectedResources, dialogRef]);
-    const onMouseEnter = useCallback(() => setIsHovered(true), []);
-    const onMouseLeave = useCallback(() => setIsHovered(false), []);
-    const onInputClick = useCallback(() => buttonRef.current?.click(), []);
-    useImperativeHandle(ref, () => ({
-        open: () => {
-            onInputClick();
-        },
-    }), [onInputClick]);
-    return (<div className={cn("relative h-8", short ? "max-w-48" : "w-full")} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-            {form && (<FdFormField control={form.control} name={propertyMeta.name} defaultValue={""} render={({ field }) => (<FdFormItem>
-                            <FdFormControl>
-                                <FdInput inputId={inputId} showClearIcon={!(disabled ?? readOnly)} placeholder={variant === "float" ? "" : propertyMeta.displayName} required={required} onChangeCapture={onDescriptionChange} label={getRequiredLabel(required, propertyMeta.displayName)} disabled={disabled} readOnly={true} id={field.name} onBlur={field.onBlur} onChange={field.onChange} ref={field.ref} value={selectedValues} onClear={onFilterReset} skipAnimationOnce={skipAnimationOnce} variant={variant} className="cursor-pointer placeholder:truncate" onClick={onInputClick} isDisableFocus={true}>
-                                    <div className="flex items-center gap-1">
-                                        {icons}
-                                        <FdBaseMultiBrowserDialog ref={dialogRef} disabled={disabled ?? readOnly} onTriggerClick={onSetRelatedResourcePropertyMeta} trigger={<FdButton ref={buttonRef} size="icon" variant="icon" className={cn("w-5 focus:outline-none focus-visible:ring-0", disabled || readOnly ? "cursor-not-allowed" : "")}>
-                                                    <FdIcon id={iconId} name="magnifyingGlass"/>
-                                                </FdButton>} data={data} onCloseDialog={onCloseDialog} relatedUiResourceMeta={relatedUiResourceMeta}/>
-                                    </div>
-                                </FdInput>
-                            </FdFormControl>
-                            <FdFormMessage />
-                        </FdFormItem>)}/>)}
-
-            {!form && selectedValues && isHovered && !disabled && (<div className="absolute right-3.5 top-1/2 flex h-4 -translate-x-1/2 -translate-y-1/2 items-center">
-                    <FdButton variant="icon" size="icon" onClick={onFilterReset} className="size-6">
-                        <FdIcon name={iconNames.cross2} className="bg-background"/>
-                    </FdButton>
-                </div>)}
-        </div>);
-}

package/packages/level2/meta/browsers/base-multi-browser/base-multi-browser-dialog/FdBaseMultiBrowserDialog.jsx

@@ -1,159 +0,0 @@
-import React, { useCallback, useContext, useRef, useState, useImperativeHandle } from "react";
-import { FdDialog, FdDialogClose, FdDialogContent, FdDialogDescription, FdDialogTitle, FdDialogTrigger, } from "@fd-component-toolbox/dialog/FdDialog";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames } from "@fd-component-toolbox/icon/FdIcon";
-import { addPaging } from "@fd-toolbox/odata/odataconfig";
-import { rowHighlightBehaviors } from "@fd-toolbox/enums/enums";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { resourceEditModes } from "@fd-toolbox/constants/resource-list-configs-enums";
-import { elements } from "@fd-toolbox/constants/elements";
-import { FdResourceFilterList, } from "@meta/filtering/resource-filter-list/FdResourceFilterList";
-import { FdTable } from "@meta/table/FdTable";
-import { initBaseMultiBrowserDialog, onBrowserTablePaging, refreshRightResources, moveResourcesFromLeftTable, moveAllResourcesFromLeftTable, moveMultipleResources, moveSingleResource, moveResourcesFromRightTable, moveAllResourcesFromRightTable, onMultiBrowserDialogOpenChange, } from "@meta/browsers/base-multi-browser/base-multi-browser-dialog/FdBaseMultiBrowserDialog.funcs";
-import { goBack } from "@fd-toolbox/routing/routers";
-import { oDataDefaultTop } from "@fd-toolbox/odata/odata-constants";
-const InstanceNumberContext = React.createContext(0);
-const tableConfig = {
-    hideDeleteButton: true,
-    maxNumberOfColumns: 4,
-    editMode: resourceEditModes.default,
-    multiSelect: true,
-    isBrowser: true,
-};
-export function FdBaseMultiBrowserDialog({ data, trigger, onCloseDialog: closeDialog, disabled, onTriggerClick, relatedUiResourceMeta, ref, }) {
-    const instanceNumber = useContext(InstanceNumberContext);
-    const leftTable = useRef(null);
-    const rightTable = useRef(null);
-    const [leftResources, setLeftResources] = useState([]);
-    const [rightResources, setRightResources] = useState([]);
-    const [browserDialogTitle, setBrowserDialogTitle] = useState("");
-    const [resourceMeta, setResourceMeta] = useState();
-    const [uiResourceMeta, setUiResourceMeta] = useState();
-    const [dialogOpened, setDialogOpened] = useState(false);
-    const [leftPageSize, setLeftPageSize] = useState(oDataDefaultTop);
-    const [rightPageSize, setRightPageSize] = useState(oDataDefaultTop);
-    const [leftODataConfig, setLeftODataConfig] = useState(addPaging({}, leftPageSize));
-    const [rightODataConfig, setRightODataConfig] = useState(addPaging({}, rightPageSize));
-    const [isComponentRefSet, setIsComponentRefSet] = useState(false);
-    const [isRightResourcesLoading, setIsRightResourcesLoading] = useState(true);
-    const resourceFilterListComponentRef = useRef(null);
-    useAsyncEffect(async () => {
-        if (data.relatedResourcePropertyMeta)
-            await initBaseMultiBrowserDialog(data, setBrowserDialogTitle, setLeftResources, setResourceMeta, setUiResourceMeta, relatedUiResourceMeta);
-    }, [data.selectedResources.length, data.relatedResourcePropertyMeta]);
-    const areResourcesSet = useCallback(() => {
-        return !!(data && (rightResources || leftResources));
-    }, [data, rightResources, leftResources]);
-    const onPagingRightTable = useCallback(async (fdTablePaging) => {
-        await onBrowserTablePaging(rightODataConfig, setRightODataConfig, setRightPageSize, fdTablePaging, resourceMeta, refreshRightResources, data, leftResources, setRightResources, resourceFilterListComponentRef.current ?? undefined);
-    }, [data, rightODataConfig, resourceMeta, leftResources, setRightResources, setRightPageSize]);
-    const onPagingLeftTable = useCallback(async (fdTablePaging) => {
-        await onBrowserTablePaging(leftODataConfig, setLeftODataConfig, setLeftPageSize, fdTablePaging, resourceMeta);
-    }, [leftODataConfig, resourceMeta, setLeftPageSize]);
-    const onRefreshRightTable = useCallback(async () => {
-        await refreshRightResources(data, leftResources, setRightResources, rightODataConfig, resourceMeta, setIsRightResourcesLoading, resourceFilterListComponentRef.current ?? undefined);
-    }, [data, leftResources, rightODataConfig, resourceMeta]);
-    useAsyncEffect(async () => {
-        if (resourceMeta?.properties && isComponentRefSet)
-            await onRefreshRightTable();
-    }, [resourceMeta, isComponentRefSet, onRefreshRightTable]);
-    const onMoveResourcesFromLeftToRight = useCallback(() => {
-        if (leftTable.current)
-            moveResourcesFromLeftTable(leftResources, setLeftResources, rightResources, setRightResources, leftTable.current.getSelectedRows(), data);
-    }, [data, leftResources, leftTable, rightResources]);
-    const onMoveAllResourcesFromLeftToRight = useCallback(() => {
-        moveAllResourcesFromLeftTable(leftResources, setLeftResources, rightResources, setRightResources);
-    }, [leftResources, rightResources]);
-    const onResourceClick = useCallback((resource) => {
-        if (leftTable?.current && rightTable.current) {
-            const selectedLeftResources = leftTable.current.getSelectedRows().map((row) => row.item);
-            const selectedRightResources = rightTable.current.getSelectedRows().map((row) => row.item);
-            if (selectedLeftResources.length > 1 || selectedRightResources.length > 1) {
-                moveMultipleResources(selectedLeftResources, selectedRightResources, leftResources, setLeftResources, rightResources, setRightResources);
-            }
-            else {
-                moveSingleResource(resource, leftResources, setLeftResources, rightResources, setRightResources);
-            }
-        }
-    }, [leftResources, rightResources, setLeftResources, setRightResources, leftTable, rightTable]);
-    const onMoveResourcesFromRightToLeft = useCallback(() => {
-        if (rightTable.current)
-            moveResourcesFromRightTable(leftResources, setLeftResources, rightResources, setRightResources, rightTable.current.getSelectedRows());
-    }, [leftResources, rightResources, rightTable]);
-    const onMoveAllResourcesFromRightToLeft = useCallback(() => {
-        moveAllResourcesFromRightTable(leftResources, setLeftResources, rightResources, setRightResources);
-    }, [leftResources, rightResources]);
-    const onCloseDialog = useCallback(() => closeDialog(leftResources), [closeDialog, leftResources]);
-    const onCloseDialogWithoutSelected = useCallback(() => closeDialog([]), [closeDialog]);
-    useImperativeHandle(ref, () => ({
-        resetDialog() {
-            onMoveAllResourcesFromLeftToRight();
-        },
-    }), [onMoveAllResourcesFromLeftToRight]);
-    const setRef = useCallback((component) => {
-        if (component) {
-            resourceFilterListComponentRef.current = component;
-            setIsComponentRefSet(true);
-        }
-    }, []);
-    const onOpenChangeCallback = useCallback((value) => {
-        onMultiBrowserDialogOpenChange(value, leftResources, closeDialog, setDialogOpened);
-    }, [setDialogOpened, leftResources, closeDialog]);
-    const onSortCallback = useCallback(async (tableSort) => {
-        await refreshRightResources(data, leftResources, setRightResources, rightODataConfig, resourceMeta, setIsRightResourcesLoading, resourceFilterListComponentRef.current ?? undefined, tableSort);
-    }, [resourceMeta, data, leftResources, rightODataConfig, resourceFilterListComponentRef]);
-    return (<InstanceNumberContext.Provider value={instanceNumber + 1}>
-            <FdDialog open={!disabled && dialogOpened} onOpenChange={onOpenChangeCallback} modal>
-                <FdDialogTrigger onClick={onTriggerClick} className="w-full focus:outline-none focus-visible:ring-0" asChild>
-                    {trigger}
-                </FdDialogTrigger>
-                <FdDialogContent className="min-w-full gap-4 overflow-auto rounded-none sm:min-w-[92%] sm:rounded lg:min-w-[87%]">
-                    <FdDialogTitle className="flex w-full flex-col items-start justify-between pl-1">
-                        {browserDialogTitle}
-                    </FdDialogTitle>
-                    <FdDialogDescription className="sr-only"></FdDialogDescription>
-                    <div>
-                        <FdResourceFilterList ref={setRef} uiResourceMeta={uiResourceMeta} stateKey={`${FdResourceFilterList.displayName}_${resourceMeta?.id}_multiBrowser_${instanceNumber}`} onFilterChange={onRefreshRightTable} showRefreshButton={true} showResetButton={false}/>
-                    </div>
-                    {areResourcesSet() && (<div className="grid max-h-[27rem] w-full grid-cols-[1fr_auto_1fr] items-stretch justify-between overflow-x-auto">
-                            <div className="overflow-auto">
-                                <FdTable id={elements.multiBrowser.leftTable + instanceNumber} uiResourceMeta={uiResourceMeta} onPaging={onPagingLeftTable} tableConfig={tableConfig} items={leftResources} pageSize={leftPageSize} ref={leftTable} className="h-96" onRowClick={onResourceClick} externalSorting={false} readonly={true} rowHighlightBehaviour={rowHighlightBehaviors.pointer}/>
-                            </div>
-                            <div className="mx-7 flex flex-col justify-center gap-2">
-                                <FdButton id={elements.multiBrowser.moveResourcesToRightTable + instanceNumber} onClick={onMoveAllResourcesFromLeftToRight} variant="ghost" size="icon">
-                                    <FdIcon name={iconNames.doubleArrowRight}/>
-                                </FdButton>
-                                <FdButton id={elements.multiBrowser.moveResourcesToRightTable + instanceNumber} onClick={onMoveResourcesFromLeftToRight} variant="ghost" size="icon">
-                                    <FdIcon name={iconNames.arrowRight}/>
-                                </FdButton>
-                                <FdButton id={elements.multiBrowser.moveResourcesToLeftTable + instanceNumber} onClick={onMoveResourcesFromRightToLeft} variant="ghost" size="icon">
-                                    <FdIcon name={iconNames.arrowLeft} onClick={goBack}/>
-                                </FdButton>
-                                <FdButton id={elements.multiBrowser.moveResourcesToLeftTable + instanceNumber} onClick={onMoveAllResourcesFromRightToLeft} variant="ghost" size="icon">
-                                    <FdIcon name={iconNames.doubleArrowLeft}/>
-                                </FdButton>
-                            </div>
-                            <div className="overflow-auto">
-                                <FdTable id={elements.multiBrowser.rightTable + instanceNumber} uiResourceMeta={uiResourceMeta} onPaging={onPagingRightTable} items={rightResources} pageSize={rightPageSize} tableConfig={tableConfig} ref={rightTable} className="h-96" onRowClick={onResourceClick} externalSorting={true} readonly={true} rowHighlightBehaviour={rowHighlightBehaviors.pointer} isLoading={isRightResourcesLoading} sort={onSortCallback}/>
-                            </div>
-                        </div>)}
-                    <div className="flex items-end justify-end space-x-2">
-                        <FdDialogClose asChild>
-                            <FdButton id={elements.browser.okBrowserButton + instanceNumber} onClick={onCloseDialog}>
-                                Ok
-                            </FdButton>
-                        </FdDialogClose>
-                        <FdButton id={`clearBrowserButton${instanceNumber}`} onClick={onMoveAllResourcesFromLeftToRight} variant="outline">
-                            Clear
-                        </FdButton>
-                        <FdDialogClose asChild>
-                            <FdButton id={`cancelBrowserButton${instanceNumber}`} onClick={onCloseDialogWithoutSelected} variant="outline">
-                                Cancel
-                            </FdButton>
-                        </FdDialogClose>
-                    </div>
-                </FdDialogContent>
-            </FdDialog>
-        </InstanceNumberContext.Provider>);
-}
-FdBaseMultiBrowserDialog.displayName = "FdBaseMultiBrowserDialog";

package/packages/level2/meta/browsers/browser/FdBrowser.jsx

@@ -1,58 +0,0 @@
-"use client";
-import { useState, useCallback, useRef } from "react";
-import { FdInput } from "@fd-component-toolbox/input/FdInput";
-import { FdFormControl, FdFormField, FdFormItem } from "@fd-component-toolbox/form/FdForm";
-import { cn } from "@fd-toolbox/lib/utils";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { FdIcon, iconNames, iconSizes } from "@fd-component-toolbox/icon/FdIcon";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { getRequiredLabel } from "@meta/edit-resource/edit-resource-property-block/FdEditResourcePropertyBlock.funcs";
-import { browserTypeToSuffix, browserTypes } from "@meta/browsers/browser-type";
-import { FdBrowserDialog } from "@meta/browsers/browser/browser-dialog/FdBrowserDialog";
-import { getBrowserEmptyShortResourceDescriptor, onUpdateBrowserInput, setBrowserDescription, handleLoadRelatedResourceDescription, } from "@meta/browsers/browser/FdBrowser.funcs";
-import { elements } from "@fd-toolbox/constants/elements";
-/**
- * Browser component for single resource selection with integrated search dialog.
- * Used for many-to-one relationships.
- * @see {@link FdBrowserProps} for component props
- */
-export function FdBrowser({ required, propertyMeta, onChange, excludeResourceIds, short, disabled, readOnly, parentContextName: parentContextNameProp, relatedResourceId, form, children: icons, }) {
-    const [shortResourceDescriptor, setShortResourceDescriptor] = useState(getBrowserEmptyShortResourceDescriptor());
-    const [description, setDescription] = useState("");
-    const [isValid, setIsValid] = useState(true);
-    const [loadComplete, setLoadComplete] = useState(false);
-    useAsyncEffect(async () => {
-        setIsValid(!!form?.watch(propertyMeta.name));
-    }, [description]);
-    const parentContextName = parentContextNameProp ?? "";
-    const contextName = `${parentContextName}${elements.browser.FdBrowser}${propertyMeta.name}`;
-    const inputId = `${contextName}${browserTypeToSuffix[browserTypes.browser]}`;
-    const iconId = `${contextName}${elements.browser.browserIcon}`;
-    const buttonRef = useRef(null);
-    useAsyncEffect(async () => {
-        handleLoadRelatedResourceDescription(propertyMeta, setDescription, setLoadComplete, form, relatedResourceId);
-    }, [relatedResourceId, form]);
-    const onInputModelChange = useCallback((v) => {
-        onUpdateBrowserInput(v, setShortResourceDescriptor, setDescription, onChange);
-    }, [onChange]);
-    const onCloseEditProperty = useCallback((data) => {
-        if (data) {
-            setShortResourceDescriptor(data);
-            setBrowserDescription(data, setDescription);
-            onChange?.(data.id);
-        }
-    }, [onChange]);
-    const onInputClick = useCallback(() => buttonRef.current?.click(), []);
-    return (<FdFormField control={form?.control} name={propertyMeta.name} render={({ field, fieldState }) => (<FdFormItem className={cn("relative", short ? "max-w-48" : "w-full")}>
-                    <FdFormControl>
-                        <FdInput {...field} value={description} inputId={inputId} showClearIcon={!(disabled ?? readOnly)} label={getRequiredLabel(propertyMeta.required, propertyMeta.displayName)} readOnly={readOnly} required={required} disabled={disabled} aria-invalid={fieldState.invalid && !isValid} onChange={onInputModelChange} skipAnimationOnce={!loadComplete} onClick={onInputClick} isDisableFocus={true} className="cursor-pointer">
-                            <div className="flex items-center gap-1">
-                                {icons}
-                                <FdBrowserDialog propertyMeta={propertyMeta} currentResourceId={shortResourceDescriptor.id ?? relatedResourceId} excludeResourceIds={excludeResourceIds} closeDialog={onCloseEditProperty} trigger={<FdButton ref={buttonRef} size="icon" variant="icon" className={cn("w-4", disabled || readOnly ? "cursor-not-allowed" : "")}>
-                                            <FdIcon id={iconId} name={iconNames.magnifyingGlass} size={iconSizes.small}/>
-                                        </FdButton>} setDescription={setDescription} disabled={disabled ?? readOnly}/>
-                            </div>
-                        </FdInput>
-                    </FdFormControl>
-                </FdFormItem>)}/>);
-}

package/packages/level2/meta/browsers/browser/browser-dialog/FdBrowserDialog.jsx

@@ -1,89 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-import { FdButton } from "@fd-component-toolbox/button/FdButton";
-import { onInitBrowserDialog, refreshBrowserDialogResources, onBrowserDialogPaging as onPagingFunc, onItemSelected as onItemSelectedFunc, setBrowserDialogResourceDescription, } from "@meta/browsers/browser/browser-dialog/FdBrowserDialog.funcs";
-import { FdDialog, FdDialogClose, FdDialogContent, FdDialogFooter, FdDialogHeader, FdDialogTitle, FdDialogTrigger, } from "@fd-component-toolbox/dialog/FdDialog";
-import { getBrowserEmptyShortResourceDescriptor } from "@meta/browsers/browser/FdBrowser.funcs";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { rowHighlightBehaviors } from "@fd-toolbox/enums/enums";
-import { elements } from "@fd-toolbox/constants/elements";
-import { FdResourceFilterList, } from "@meta/filtering/resource-filter-list/FdResourceFilterList";
-import { FdTable } from "@meta/table/FdTable";
-import { FdBrowser } from "@meta/browsers/browser/FdBrowser";
-export function FdBrowserDialog({ propertyMeta, currentResourceId, closeDialog, trigger, setDescription, excludeResourceIds, disabled, }) {
-    const contextName = `${FdBrowser.name}${propertyMeta.name}${FdBrowserDialog.name}`;
-    const [resources, setResources] = useState([]);
-    const [uiResourceMeta, setUiResourceMeta] = useState();
-    const [oDataConfig, setODataConfig] = useState({});
-    const [isOpen, setIsOpen] = useState(false);
-    const tableConfig = { isBrowser: true };
-    const resourceFilterListRef = useRef(null);
-    const getFilters = useCallback(() => {
-        if (resourceFilterListRef.current) {
-            return resourceFilterListRef.current.getFilters();
-        }
-        else {
-            return {};
-        }
-    }, [resourceFilterListRef]);
-    useAsyncEffect(async () => {
-        await onInitBrowserDialog(setUiResourceMeta, propertyMeta, setResources, setODataConfig, oDataConfig, getFilters, excludeResourceIds);
-    }, []);
-    useAsyncEffect(async () => {
-        await setBrowserDialogResourceDescription(resources, currentResourceId, uiResourceMeta?.resourceMeta, setDescription);
-    }, [resources, currentResourceId, setDescription, uiResourceMeta?.resourceMeta]);
-    const onRefreshResources = useCallback(() => {
-        refreshBrowserDialogResources(setResources, setODataConfig, oDataConfig, getFilters, uiResourceMeta.resourceMeta, excludeResourceIds);
-    }, [excludeResourceIds, getFilters, oDataConfig, uiResourceMeta]);
-    const onCancel = useCallback(() => {
-        closeDialog?.(undefined);
-    }, [closeDialog]);
-    const onClear = useCallback(() => {
-        closeDialog?.(getBrowserEmptyShortResourceDescriptor());
-    }, [closeDialog]);
-    const onPaging = useCallback((paging) => {
-        onPagingFunc(paging, setResources, setODataConfig, oDataConfig, getFilters, uiResourceMeta.resourceMeta, excludeResourceIds);
-    }, [setResources, setODataConfig, oDataConfig, getFilters, uiResourceMeta, excludeResourceIds]);
-    const onItemSelected = useCallback((item) => {
-        if (uiResourceMeta?.resourceMeta && closeDialog) {
-            onItemSelectedFunc(item, uiResourceMeta.resourceMeta, closeDialog);
-            setIsOpen(false);
-        }
-    }, [uiResourceMeta?.resourceMeta, closeDialog]);
-    const onOpenChange = useCallback((open) => {
-        setIsOpen(open);
-        if (!open) {
-            closeDialog?.(undefined);
-        }
-    }, [closeDialog]);
-    return (<FdDialog open={isOpen && !disabled} onOpenChange={onOpenChange}>
-            <FdDialogTrigger asChild className="w-full">
-                {trigger}
-            </FdDialogTrigger>
-            <FdDialogContent className="box-border flex max-h-[90vh] w-full max-w-sm flex-col sm:max-w-lg md:max-w-3xl lg:max-w-4xl">
-                <FdDialogTitle className="absolute -m-px size-px overflow-hidden whitespace-nowrap border-0 p-0">
-                    {propertyMeta.displayName}
-                </FdDialogTitle>
-                <FdDialogHeader>
-                    <h1 className="text-lg font-bold">{propertyMeta.displayName}</h1>
-                </FdDialogHeader>
-                {uiResourceMeta?.resourceMeta && (<div className="flex flex-row items-center justify-start gap-1">
-                        <FdResourceFilterList ref={resourceFilterListRef} uiResourceMeta={uiResourceMeta} stateKey={`${FdResourceFilterList.displayName}_${uiResourceMeta.resourceMeta.id}_browser`} onFilterChange={onRefreshResources} parentContextName={contextName} showRefreshButton={true} showResetButton={false} onRefreshResources={onRefreshResources}/>
-                    </div>)}
-                {propertyMeta && resources && (<div className="flex size-full overflow-auto">
-                        <FdTable id={elements.table.tableElementId + elements.browserDialog.browserDialogElementId} items={resources} uiResourceMeta={uiResourceMeta} onPaging={onPaging} tableConfig={tableConfig} externalSorting={false} onRowClick={onItemSelected} rowHighlightBehaviour={rowHighlightBehaviors.pointer} pageSize={6} adaptiveWidth={true} onRefreshItems={onRefreshResources}/>
-                    </div>)}
-                <FdDialogFooter>
-                    {propertyMeta?.required && (<FdDialogClose asChild>
-                            <FdButton onClick={onCancel} className="ml-4 min-w-20" variant="outline">
-                                Cancel
-                            </FdButton>
-                        </FdDialogClose>)}
-                    <FdDialogClose asChild>
-                        <FdButton onClick={onClear} className="ml-4 min-w-20" variant="outline">
-                            Clear
-                        </FdButton>
-                    </FdDialogClose>
-                </FdDialogFooter>
-            </FdDialogContent>
-        </FdDialog>);
-}

package/packages/level2/meta/browsers/many-to-many-browser/FdManyToManyBrowser.jsx

@@ -1,33 +0,0 @@
-"use client";
-import React, { useCallback, useState } from "react";
-import { closeDialog, onMultiBrowserInputUpdate, } from "@meta/browsers/base-multi-browser/FdBaseMultiBrowser.funcs";
-import { getManyToManyBrowserRelatedResourcePropertyMeta, writeValue, } from "@meta/browsers/many-to-many-browser/FdManyToManyBrowser.funcs";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { FdBaseMultiBrowser } from "@meta/browsers/base-multi-browser/FdBaseMultiBrowser";
-import { elements } from "@fd-toolbox/constants/elements";
-/**
- * Many-to-many browser component for multiple resource selection with integrated search dialog.
- * Used for many-to-many relationships.
- * @see {@link FdManyToManyBrowserProps} for component props
- */
-export function FdManyToManyBrowser({ required, propertyMeta, form, onChange, parentContextName: parentContextNameProp, short, disabled, readOnly, relatedResourceId, children: icons, }) {
-    const [propertyResourceMeta, setPropertyResourceMeta] = useState();
-    const [selectedResources, setSelectedResources] = useState([]);
-    const [relatedResourcePropertyMeta, setRelatedResourcePropertyMeta] = useState();
-    const [loadComplete, setLoadComplete] = useState(false);
-    const parentContextName = parentContextNameProp ?? "";
-    const contextName = `${parentContextName}${elements.multiBrowser.FdManyToManyBrowser}`;
-    useAsyncEffect(async () => {
-        await writeValue(propertyMeta, setSelectedResources, setPropertyResourceMeta, setLoadComplete, setRelatedResourcePropertyMeta, propertyResourceMeta, relatedResourceId, form?.setValue);
-    }, [propertyMeta.name]);
-    const onCloseDialog = useCallback((resources) => {
-        closeDialog(resources, setSelectedResources, propertyMeta, setPropertyResourceMeta, propertyResourceMeta, onChange);
-    }, [onChange, propertyMeta, propertyResourceMeta]);
-    const onInputModelChange = useCallback((e) => onMultiBrowserInputUpdate(e.target.value, setSelectedResources, propertyResourceMeta, onChange), [onChange, propertyResourceMeta]);
-    const onSetRelatedResourcePropertyMeta = useCallback(async () => {
-        setRelatedResourcePropertyMeta(await getManyToManyBrowserRelatedResourcePropertyMeta(propertyMeta));
-    }, [propertyMeta]);
-    return (<FdBaseMultiBrowser parentContextName={contextName} required={required} propertyMeta={propertyMeta} form={form} relatedResourceId={relatedResourceId} selectedResources={selectedResources} onCloseDialog={onCloseDialog} onDescriptionChange={onInputModelChange} short={short} disabled={disabled} readOnly={readOnly} relatedResourcePropertyMeta={relatedResourcePropertyMeta} setSelectedResources={setSelectedResources} onSetRelatedResourcePropertyMeta={onSetRelatedResourcePropertyMeta} propertyResourceMeta={propertyResourceMeta} skipAnimationOnce={!loadComplete}>
-            {icons}
-        </FdBaseMultiBrowser>);
-}

package/packages/level2/meta/browsers/multi-browser/FdMultiBrowser.jsx

@@ -1,32 +0,0 @@
-"use client";
-import React, { useCallback, useState } from "react";
-import { handleInputModelChange, onInitMultiBrowser, } from "@meta/browsers/multi-browser/FdMultiBrowser.funcs";
-import { FdBaseMultiBrowser } from "@meta/browsers/base-multi-browser/FdBaseMultiBrowser";
-import { closeDialog } from "@meta/browsers/base-multi-browser/FdBaseMultiBrowser.funcs";
-import { useAsyncEffect } from "@fd-toolbox/hooks/use-async-effect";
-import { elements } from "@fd-toolbox/constants/elements";
-/**
- * Multi-browser component for multiple resource selection with integrated search dialog.
- * Used for one-to-many relationships.
- * @see {@link FdMultiBrowserProps} for component props
- */
-export function FdMultiBrowser({ required, propertyMeta, form, onChange, onClose, parentContextName: parentContextNameProp, short, disabled, readOnly, getSelectedResourcesFromApi, relatedResourceId, selectedResourceIds, setSelectedResourceIds, variant, relatedUiResourceMeta, children: icons, ref, }) {
-    const [propertyResourceMeta, setPropertyResourceMeta] = useState(relatedUiResourceMeta?.resourceMeta);
-    const [selectedResources, setSelectedResources] = useState([]);
-    const [loadComplete, setLoadComplete] = useState(false);
-    const parentContextName = parentContextNameProp ?? "";
-    const contextName = `${parentContextName}${elements.multiBrowser.FdMultiBrowser}`;
-    useAsyncEffect(async () => {
-        await onInitMultiBrowser(propertyMeta, setSelectedResources, setPropertyResourceMeta, setLoadComplete, getSelectedResourcesFromApi, propertyResourceMeta, selectedResourceIds, relatedResourceId, setSelectedResourceIds, form?.setValue);
-    }, [selectedResourceIds?.join(), relatedResourceId]);
-    const onCloseDialog = useCallback((resources) => {
-        if (propertyResourceMeta)
-            closeDialog(resources, setSelectedResources, propertyMeta, setPropertyResourceMeta, propertyResourceMeta, onChange, onClose);
-    }, [onChange, propertyMeta, propertyResourceMeta, onClose]);
-    const onInputModelChange = useCallback((e) => {
-        handleInputModelChange(e, setSelectedResources, onChange, propertyResourceMeta);
-    }, [onChange, propertyResourceMeta]);
-    return (<FdBaseMultiBrowser parentContextName={contextName} required={required ?? false} propertyMeta={propertyMeta} form={form} relatedResourceId={relatedResourceId} selectedResources={selectedResources} onCloseDialog={onCloseDialog} onDescriptionChange={onInputModelChange} short={short} disabled={disabled} readOnly={readOnly} propertyResourceMeta={propertyResourceMeta} onChange={onChange} setSelectedResources={setSelectedResources} setSelectedResourceIds={setSelectedResourceIds} skipAnimationOnce={!loadComplete} variant={variant ?? "float"} relatedUiResourceMeta={relatedUiResourceMeta} ref={ref}>
-            {icons}
-        </FdBaseMultiBrowser>);
-}

package/packages/level2/meta/card-list/FdCardList.jsx

@@ -1,40 +0,0 @@
-import { useMemo } from "react";
-import { cn } from "@fd-toolbox/lib/utils";
-import { cardListLayouts } from "@fd-toolbox/constants/card-list-configs";
-import { getCardConfig } from "@meta/card-list/config/card-config";
-import { FdCard } from "@meta/card-list/card/FdCard";
-import { tableDisplayModes } from "@fd-toolbox/enums/enums";
-import { resourceEditModes } from "@fd-toolbox/constants/resource-list-configs-enums";
-import { ResourceAddButton } from "@meta/resource-list/resource-add-button";
-/**
- * This component renders in a card-based interface with support for different
- * layouts and includes an add button for creating new resources.
- *
- * @param props - {@link FdCardListProps}
- *
- * @example
- * ```tsx
- * <FdCardList
- *     onRefreshResources={onRefreshResources}
- *     uiResourceMeta={uiResourceMeta}
- *     resources={resourcesState}
- *     displayMode={tableDisplayModes.default}
- * />
- * ```
- */
-export function FdCardList({ onRefreshResources, config, uiResourceMeta, resources, itemDeleted, displayMode, }) {
-    const cardConfig = config ?? getCardConfig();
-    const layoutClasses = useMemo(() => cn("flex w-full gap-2 p-2", {
-        "flex-col": cardConfig.layout === cardListLayouts.horizontal,
-        "flex-wrap": cardConfig.layout === cardListLayouts.vertical,
-    }), [cardConfig.layout]);
-    return (<div className={layoutClasses}>
-            {uiResourceMeta && (<div className="pl-2">
-                    <ResourceAddButton resourceName={uiResourceMeta.resourceMeta.resourceName} onRefreshResources={onRefreshResources} editMode={resourceEditModes.simple}/>
-                </div>)}
-            {resources &&
-            resources?.length > 0 &&
-            uiResourceMeta &&
-            resources.map((resource) => (<FdCard key={resource.id} resource={resource} uiResourceMeta={uiResourceMeta} cardConfig={cardConfig} itemDeleted={itemDeleted} onRefreshResources={onRefreshResources} displayMode={displayMode ?? tableDisplayModes.default}/>))}
-        </div>);
-}