@irontec/ivoz-ui 1.7.13 → 1.7.16

package/components/List/Filter/ContentFilterSelector/ContentFilterRow.js

@@ -6,9 +6,11 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import { LightButton, TonalButton, } from '../../../../components/shared/Button/Button.styles';
 import { isPropertyFk, isPropertyScalar, } from '../../../../services/api/ParsedApiSpecInterface';
 import { StyledDropdown } from '../../../../services/form/Field/Dropdown/Dropdown.styles';
+import { StyledDynamicAutocomplete } from '../../../../services/form/Field/DynamicAutocomplete/DynamicAutocomplete.styles';
 import { StyledTextField } from '../../../../services/form/Field/TextField/TextField.styles';
 import _ from '../../../../services/translations/translate';
 import FilterIconFactory from '../icons/FilterIconFactory';
+import StoreContainer from '../../../../store/StoreContainer';
 const StyledDropdownMemo = memo(StyledDropdown, (prev, next) => {
     return prev.value === next.value;
 });
@@ -36,19 +38,50 @@ export default function ContentFilterRow(props) {
         setValue(row.value);
     }, [row]);
     const column = columns[name];
-    let enumValue = null;
-    if (isPropertyFk(column)) {
-        enumValue = fkChoices[name] || {};
-    }
-    else if (column.enum) {
-        enumValue = column.enum;
-    }
-    else if (column.type === 'boolean') {
-        enumValue = {
-            true: _('True'),
-            false: _('False'),
+    const [selectOptions, setSelectOptions] = useState(null);
+    const { useDynamicAutocomplete, entityName, enumValue } = useMemo(() => {
+        var _a;
+        let enumVal = null;
+        let useDynamic = false;
+        let entName = '';
+        if (isPropertyFk(column)) {
+            const entities = StoreContainer.store.getState().entities.entities;
+            entName = ((_a = column.$ref) === null || _a === void 0 ? void 0 : _a.replace('#/definitions/', '')) || '';
+            const entity = entities === null || entities === void 0 ? void 0 : entities[entName];
+            if (entity === null || entity === void 0 ? void 0 : entity.dynamicSelectOptions) {
+                useDynamic = true;
+            }
+            else {
+                enumVal = fkChoices[name] || {};
+            }
+        }
+        else if (column.enum) {
+            enumVal = column.enum;
+        }
+        else if (column.type === 'boolean') {
+            enumVal = {
+                true: _('True'),
+                false: _('False'),
+            };
+        }
+        return {
+            useDynamicAutocomplete: useDynamic,
+            entityName: entName,
+            enumValue: enumVal,
         };
-    }
+    }, [column, name, fkChoices]);
+    useEffect(() => {
+        if (!useDynamicAutocomplete || !entityName) {
+            return;
+        }
+        const entities = StoreContainer.store.getState().entities.entities;
+        const entity = entities === null || entities === void 0 ? void 0 : entities[entityName];
+        if (entity === null || entity === void 0 ? void 0 : entity.selectOptions) {
+            entity.selectOptions().then((handler) => {
+                setSelectOptions(() => handler);
+            });
+        }
+    }, [useDynamicAutocomplete, entityName]);
     const columnFormat = isPropertyScalar(column) && column.format;
     let textFieldInputType = 'text';
     const inputProps = {};
@@ -81,13 +114,17 @@ export default function ContentFilterRow(props) {
                     setType(target.value);
                 }, onBlur: () => {
                     /* noop */
-                }, choices: filterChoices, error: false, errorMsg: '', hasChanged: false }), type !== 'exists' && !enumValue && (_jsx(StyledTextField, { name: 'value', value: value, type: textFieldInputType, error: false, errorMsg: '', inputProps: inputProps, InputProps: {}, hasChanged: false, onChange: ({ target }) => {
+                }, choices: filterChoices, error: false, errorMsg: '', hasChanged: false }), type !== 'exists' && !enumValue && !useDynamicAutocomplete && (_jsx(StyledTextField, { name: 'value', value: value, type: textFieldInputType, error: false, errorMsg: '', inputProps: inputProps, InputProps: {}, hasChanged: false, onChange: ({ target }) => {
                     let { value } = target;
                     if (textFieldInputType === 'datetime-local') {
                         value = value.replace('T', ' ');
                     }
                     setValue(value);
-                } })), type !== 'exists' && enumValue && (_jsx(StyledDropdown, { name: 'value', label: '', value: value, required: false, disabled: false, onChange: ({ target }) => {
+                } })), type !== 'exists' && useDynamicAutocomplete && selectOptions && (_jsx(StyledDynamicAutocomplete, { name: 'value', label: '', value: value, choices: {}, multiple: false, required: false, disabled: false, onChange: ({ target }) => {
+                    setValue(target.value);
+                }, onBlur: () => {
+                    /* noop */
+                }, selectOptions: selectOptions, error: false, errorMsg: '', hasChanged: false })), type !== 'exists' && enumValue && !useDynamicAutocomplete && (_jsx(StyledDropdown, { name: 'value', label: '', value: value, required: false, disabled: false, onChange: ({ target }) => {
                     setValue(target.value);
                 }, onBlur: () => {
                     /* noop */

package/components/List/Filter/ContentFilterSelector/ContentFilterRow.styles.js

@@ -5,6 +5,10 @@ export const StyledContentFilterRow = styled(ContentFilterRow)(({ theme }) => {
         display: 'flex',
         alignItems: 'center',
         gap: 'var(--spacing-md)',
+        '& > *:not(button)': {
+            flex: 1,
+            minWidth: 0,
+        },
         [theme.breakpoints.down('md')]: {
             flexDirection: 'column',
             gap: 'var(--spacing-sm)',

package/components/shared/ConfirmDialog.d.ts

@@ -4,8 +4,8 @@ interface ConfirmDialogProps {
     open: boolean;
     doubleCheck?: boolean;
     doubleCheckExpectedStr?: string;
-    handleClose: (event: unknown) => void;
-    handleApply: (event: unknown) => void;
+    handleClose: () => void;
+    handleApply: (event: React.MouseEvent) => void;
 }
 export default function ConfirmDialog(props: ConfirmDialogProps): JSX.Element;
 export {};

package/components/shared/ConfirmDialog.js

@@ -1,20 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogTitle from '@mui/material/DialogTitle';
-import Slide from '@mui/material/Slide';
-import { forwardRef, useCallback, useState, } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
 import { StyledSearchTextField } from '../../services/form/Field/TextField/TextField.styles';
 import _ from '../../services/translations/translate';
-import { OutlinedButton, SolidButton } from './Button/Button.styles';
 import { StyledDialogContentText } from './ConfirmDialog.styles';
-const Transition = forwardRef(function (props, ref) {
-    return _jsx(Slide, Object.assign({}, props, { direction: 'up', ref: ref }));
-});
-Transition.displayName = 'ConfirmDialogTransition';
+import Modal from './Modal/Modal';
 export default function ConfirmDialog(props) {
     const { text, open, doubleCheck, doubleCheckExpectedStr, handleClose, handleApply, } = props;
     const [inputVal, setInputVal] = useState('');
@@ -22,9 +11,21 @@ export default function ConfirmDialog(props) {
         const val = event.target.value;
         setInputVal(val || '');
     }, []);
-    const handleKeyDown = (event) => {
-        event.stopPropagation();
-    };
-    const sumbitEnabled = !doubleCheck || inputVal == doubleCheckExpectedStr;
-    return (_jsxs(Dialog, Object.assign({ open: open, TransitionComponent: Transition, keepMounted: true, onClose: handleClose, "aria-labelledby": 'alert-dialog-slide-title', "aria-describedby": 'alert-dialog-slide-description', onKeyDown: handleKeyDown }, { children: [_jsx(CloseRoundedIcon, { className: 'close-icon', onClick: handleClose }), _jsx("img", { src: 'assets/img/delete-dialog.svg', className: 'modal-icon' }), _jsx(DialogTitle, Object.assign({ id: 'alert-dialog-slide-title' }, { children: _('Remove element') })), _jsxs(DialogContent, { children: [_jsx(DialogContentText, Object.assign({ id: 'alert-dialog-slide-description' }, { children: text })), doubleCheck && (_jsx(StyledDialogContentText, Object.assign({ id: 'alert-dialog-double-check-description' }, { children: _('Please type the item name, as shown in bold font above, to continue') }))), doubleCheck && (_jsx(StyledSearchTextField, { type: 'text', hasChanged: false, defaultValue: inputVal, onChange: onChangeHandler }))] }), _jsxs(DialogActions, { children: [_jsx(OutlinedButton, Object.assign({ onClick: handleClose, sx: { flexGrow: '1' }, color: 'error' }, { children: _('No, keep it') })), _jsx(SolidButton, Object.assign({ disabled: !sumbitEnabled, onClick: handleApply, sx: { flexGrow: '1' }, color: 'error' }, { children: _('Yes, delete it') }))] })] })));
+    const submitEnabled = !doubleCheck || inputVal == doubleCheckExpectedStr;
+    const customButtons = [
+        {
+            label: _('No, keep it'),
+            onClick: () => handleClose(),
+            variant: 'outlined',
+            autoFocus: false,
+        },
+        {
+            label: _('Yes, delete it'),
+            onClick: (event) => handleApply(event),
+            variant: 'solid',
+            autoFocus: true,
+            disabled: !submitEnabled,
+        },
+    ];
+    return (_jsx(Modal, Object.assign({ title: _('Remove element'), description: text, open: open, onClose: handleClose, buttons: customButtons, icon: 'assets/img/delete-dialog.svg', keepMounted: true }, { children: doubleCheck && (_jsxs(_Fragment, { children: [_jsx(StyledDialogContentText, Object.assign({ id: 'alert-dialog-double-check-description' }, { children: _('Please type the item name, as shown in bold font above, to continue') })), _jsx(StyledSearchTextField, { type: 'text', hasChanged: false, defaultValue: inputVal, onChange: onChangeHandler })] })) })));
 }

package/components/shared/ConfirmEditDialog.js

@@ -1,27 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, forwardRef, } from 'react';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box } from '@mui/material';
 import LinearProgress from '@mui/material/LinearProgress';
-import { DialogContentText, Slide } from '@mui/material';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import _ from '../../services/translations/translate';
-const Transition = forwardRef(function (props, ref) {
-    return _jsx(Slide, Object.assign({}, props, { direction: 'up', ref: ref }));
-});
-Transition.displayName = 'ConfirmDialogTransition';
+import Modal from './Modal/Modal';
 export const ConfirmEditionDialog = (props) => {
     const { open, handleClose, text, handleSave, formEvent } = props;
     const TOTAL_TIME = 100;
     const [progress, setProgress] = useState(TOTAL_TIME);
-    const handleKeyDown = (event) => {
-        if (event.key === 'Tab') {
-            event.stopPropagation();
-        }
-    };
     useEffect(() => {
         let timer = null;
         if (open) {
@@ -41,11 +27,27 @@ export const ConfirmEditionDialog = (props) => {
             }
         };
     }, [open]);
-    return (_jsxs(Dialog, Object.assign({ open: open, TransitionComponent: Transition, keepMounted: true, onClose: handleClose, onKeyDown: handleKeyDown, "aria-labelledby": 'alert-dialog-slide-title', "aria-describedby": 'alert-dialog-slide-description' }, { children: [_jsx(CloseRoundedIcon, { className: 'close-icon', onClick: handleClose }), _jsx("img", { src: 'assets/img/warning-dialog.svg', className: 'modal-icon' }), _jsx(DialogTitle, Object.assign({ id: 'alert-dialog-slide-title' }, { children: _('Save element') })), _jsxs(DialogContent, { children: [_jsx(DialogContentText, Object.assign({ id: 'alert-dialog-slide-description' }, { children: text })), _jsx(LinearProgress, { variant: 'determinate', value: progress })] }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: () => {
-                            handleClose();
-                        } }, { children: "Cancel" })), _jsx(Button, Object.assign({ hidden: progress !== 0, onClick: () => {
-                            if (formEvent) {
-                                handleSave(formEvent);
-                            }
-                        }, disabled: progress !== 0 }, { children: "Apply" }))] })] })));
+    const customButtons = [
+        {
+            label: _('Cancel'),
+            onClick: () => handleClose(),
+            variant: 'outlined',
+            autoFocus: false,
+        },
+        ...(progress === 0
+            ? [
+                {
+                    label: _('Apply'),
+                    onClick: () => {
+                        if (formEvent) {
+                            handleSave(formEvent);
+                        }
+                    },
+                    variant: 'solid',
+                    autoFocus: true,
+                },
+            ]
+            : []),
+    ];
+    return (_jsx(Modal, Object.assign({ title: _('Save element'), description: text, open: open, onClose: handleClose, buttons: customButtons, keepMounted: true }, { children: _jsx(Box, Object.assign({ sx: { width: '100%', mt: 2 } }, { children: _jsx(LinearProgress, { variant: 'determinate', value: progress }) })) })));
 };

package/components/shared/Modal/Modal.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material';
+interface Button {
+    label: React.ReactNode;
+    onClick: (event: React.MouseEvent) => void;
+    autoFocus?: boolean;
+    variant?: 'outlined' | 'solid';
+    disabled?: boolean;
+}
+interface ModalContentProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    sx?: SxProps<Theme>;
+    open: boolean;
+    onClose: () => void;
+    buttons?: Button[];
+    icon?: string;
+    keepMounted?: boolean;
+}
+export default function Modal(props: ModalContentProps): JSX.Element;
+export {};

package/components/shared/Modal/Modal.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledDialogContentBody, StyledDialogContent, StyledDialogActions, } from './Modal.styles';
+import { OutlinedButton, SolidButton } from '../Button/Button.styles';
+import { forwardRef } from 'react';
+import Slide from '@mui/material/Slide';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { Box, Dialog, DialogContentText, DialogTitle, IconButton, } from '@mui/material';
+const Transition = forwardRef(function Transition(props, ref) {
+    return _jsx(Slide, Object.assign({}, props, { direction: 'up', ref: ref }));
+});
+export default function Modal(props) {
+    const { title, description, children, sx, open, onClose, buttons, icon, keepMounted = false, } = props;
+    const handleKeyDown = (event) => {
+        event.stopPropagation();
+    };
+    const renderButton = (button, index) => {
+        var _a;
+        const ButtonTypeComponent = button.variant === 'outlined' ? OutlinedButton : SolidButton;
+        return (_jsx(ButtonTypeComponent, Object.assign({ onClick: button.onClick, autoFocus: button.autoFocus, disabled: (_a = button.disabled) !== null && _a !== void 0 ? _a : false, sx: { flex: 1 } }, { children: button.label }), index));
+    };
+    return (_jsxs(Dialog, Object.assign({ open: open, onClose: onClose, TransitionComponent: Transition, "aria-labelledby": 'alert-dialog-slide-title', "aria-describedby": 'alert-dialog-slide-description', onKeyDown: handleKeyDown, keepMounted: keepMounted }, { children: [_jsx(Box, Object.assign({ sx: { position: 'absolute', right: 8, top: 8 } }, { children: _jsx(IconButton, Object.assign({ onClick: onClose }, { children: _jsx(CloseRoundedIcon, {}) })) })), icon && _jsx("img", { src: icon, className: 'modal-icon', alt: 'dialog icon' }), _jsx(DialogTitle, Object.assign({ id: 'alert-dialog-slide-title' }, { children: title })), _jsxs(StyledDialogContent, { children: [description && (_jsx(DialogContentText, Object.assign({ id: 'alert-dialog-slide-description' }, { children: description }))), _jsx(StyledDialogContentBody, Object.assign({ sx: sx }, { children: children }))] }), buttons && (_jsx(StyledDialogActions, Object.assign({ style: { padding: 0 } }, { children: buttons === null || buttons === void 0 ? void 0 : buttons.map(renderButton) })))] })));
+}

package/components/shared/Modal/Modal.styles.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { SxProps, Theme } from '@mui/material';
+declare type StyledDialogContentBodyProps = {
+    sx?: SxProps<Theme>;
+};
+export declare const StyledDialogContentBody: import("@mui/styles").StyledComponent<Omit<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: SxProps<Theme> | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | "key"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "ref" | "sx" | "component" | ("color" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")>, "classes" | "className"> & import("@mui/styles").StyledComponentProps<"root"> & Omit<Pick<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: SxProps<Theme> | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | "key"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "ref" | "sx" | "component" | ("color" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")>, "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "component" | ("color" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")>, "className" | "theme"> & {
+    className?: string | undefined;
+    theme?: StyledDialogContentBodyProps | undefined;
+}>;
+export declare const StyledDialogContent: import("@mui/styles").StyledComponent<Omit<import("@mui/material").DialogContentProps, "classes" | "className"> & import("@mui/styles").StyledComponentProps<"root"> & Omit<Pick<import("@mui/material").DialogContentProps, "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "dividers">, "className" | "theme"> & {
+    className?: string | undefined;
+    theme?: import("@mui/styles").DefaultTheme | undefined;
+}>;
+export declare const StyledDialogActions: import("@mui/styles").StyledComponent<Omit<import("@mui/material").DialogActionsProps, "classes" | "className"> & import("@mui/styles").StyledComponentProps<"root"> & Omit<Pick<import("@mui/material").DialogActionsProps, "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "disableSpacing">, "className" | "theme"> & {
+    className?: string | undefined;
+    theme?: import("@mui/styles").DefaultTheme | undefined;
+}>;
+export {};

package/components/shared/Modal/Modal.styles.js

@@ -0,0 +1,17 @@
+import { Box, DialogContent, DialogActions, } from '@mui/material';
+import { styled } from '@mui/styles';
+export const StyledDialogContentBody = styled(Box)(({ sx }) => {
+    const resolvedStyles = Object.assign({ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-md)' }, sx);
+    return resolvedStyles;
+});
+export const StyledDialogContent = styled(DialogContent)(() => {
+    return {
+        minWidth: '350px',
+    };
+});
+export const StyledDialogActions = styled(DialogActions)(() => {
+    return {
+        padding: 0,
+        marginTop: '10px',
+    };
+});

package/entities/DefaultEntityBehavior/AutoSelectOptions.d.ts

@@ -1,6 +1,7 @@
 import EntityService from '../../services/entity/EntityService';
 import { CancelToken } from 'axios';
 import { EntityList } from 'router/parseRoutes';
+import { SelectOptionsType } from 'entities/EntityInterface';
 declare type AutoSelectOptionsArgs = {
     cancelToken?: CancelToken;
     entities?: EntityList;
@@ -9,4 +10,9 @@ declare type AutoSelectOptionsArgs = {
     response: Record<string, Array<unknown>> | any;
 };
 export declare const autoSelectOptions: (props: AutoSelectOptionsArgs) => Array<Promise<unknown>>;
+declare type AutoSelectOptionHandlersArgs = {
+    entityService: EntityService;
+    skip?: string[];
+};
+export declare const autoSelectOptionHandlers: (props: AutoSelectOptionHandlersArgs) => Promise<Record<string, SelectOptionsType>>;
 export default autoSelectOptions;

package/entities/DefaultEntityBehavior/AutoSelectOptions.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { StoreContainer } from '../../store';
 export const autoSelectOptions = (props) => {
     const { cancelToken, response, entityService } = props;
@@ -51,4 +60,46 @@ export const autoSelectOptions = (props) => {
     }
     return promises;
 };
+export const autoSelectOptionHandlers = (props) => __awaiter(void 0, void 0, void 0, function* () {
+    const { entityService } = props;
+    const entities = StoreContainer.store.getState().entities.entities;
+    const handlers = {};
+    if (!entities) {
+        return handlers;
+    }
+    const skip = props.skip || [];
+    const fkProperties = entityService === null || entityService === void 0 ? void 0 : entityService.getFkProperties();
+    const promises = [];
+    for (const idx in fkProperties) {
+        if (skip.includes(idx)) {
+            continue;
+        }
+        const cleanRef = fkProperties[idx].$ref.replace('#/definitions/', '');
+        const entity = entities[cleanRef];
+        if (!entity) {
+            if (cleanRef && cleanRef.indexOf('_') < 0) {
+                console.log('autoSelectOptionsHandlers', `${cleanRef} not found`);
+            }
+            continue;
+        }
+        if (!entity.selectOptions) {
+            if (cleanRef && cleanRef.indexOf('_') < 0) {
+                console.log('autoSelectOptionsHandlers', `${cleanRef} selectOption is not defined`);
+            }
+            continue;
+        }
+        if (!entity.dynamicSelectOptions) {
+            continue;
+        }
+        const selectOptionsLoader = entity.selectOptions;
+        if (!selectOptionsLoader) {
+            continue;
+        }
+        promises.push(selectOptionsLoader().then((handler) => {
+            handlers[cleanRef] = handler;
+        }));
+    }
+    yield Promise.all(promises);
+    return handlers;
+});
 export default autoSelectOptions;

package/entities/DefaultEntityBehavior/DynamicAutocompleteGetter.d.ts

@@ -0,0 +1,3 @@
+import { DynamicAutocompleteGetterType } from '../EntityInterface';
+declare const dynamicAutocompleteGetters: DynamicAutocompleteGetterType;
+export default dynamicAutocompleteGetters;

package/entities/DefaultEntityBehavior/DynamicAutocompleteGetter.js

@@ -0,0 +1,19 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { autoSelectOptionHandlers } from './AutoSelectOptions';
+const dynamicAutocompleteGetters = (props) => __awaiter(void 0, void 0, void 0, function* () {
+    const { entityService } = props;
+    const getters = yield autoSelectOptionHandlers({
+        entityService,
+        skip: [],
+    });
+    return getters;
+});
+export default dynamicAutocompleteGetters;

package/entities/DefaultEntityBehavior.d.ts

@@ -1,9 +1,9 @@
 import { CancelToken } from 'axios';
 import * as React from 'react';
 import { EntityValues } from '../services/entity/EntityService';
-import { ChildDecoratorProps, ChildDecoratorType, EntityAclType, FetchFksCallback, OrderDirection, calculateAclType } from './EntityInterface';
+import { ChildDecoratorProps, ChildDecoratorType, DynamicAutocompleteGetterTypeArgs, EntityAclType, FetchFksCallback, OrderDirection, calculateAclType } from './EntityInterface';
 import autoForeignKeyResolver from './DefaultEntityBehavior/AutoForeignKeyResolver';
-import autoSelectOptions from './DefaultEntityBehavior/AutoSelectOptions';
+import autoSelectOptions, { autoSelectOptionHandlers } from './DefaultEntityBehavior/AutoSelectOptions';
 import filterFieldsetGroups, { FieldsetGroups } from './DefaultEntityBehavior/FilterFieldsetGroups';
 import foreignKeyGetter from './DefaultEntityBehavior/ForeignKeyGetter';
 import foreignKeyResolver from './DefaultEntityBehavior/ForeignKeyResolver';
@@ -34,6 +34,7 @@ declare const DefaultEntityBehavior: {
     unmarshaller: (row: MarshallerValues, properties: import("..").PartialPropertyList) => MarshallerValues;
     foreignKeyResolver: () => Promise<import("./EntityInterface").foreignKeyResolverType>;
     foreignKeyGetter: () => Promise<import("./EntityInterface").ForeignKeyGetterType>;
+    dynamicAutocompleteGetters: (props: DynamicAutocompleteGetterTypeArgs) => Promise<Record<string, import("./EntityInterface").SelectOptionsType<any>>>;
     columns: never[];
     properties: {};
     acl: EntityAclType;
@@ -51,5 +52,5 @@ declare const DefaultEntityBehavior: {
     defaultOrderDirection: OrderDirection;
 };
 export default DefaultEntityBehavior;
-export { Form, ListDecorator, View, autoForeignKeyResolver, autoSelectOptions, filterFieldsetGroups, foreignKeyGetter, foreignKeyResolver, marshaller, unmarshaller, validator, };
+export { Form, ListDecorator, View, autoForeignKeyResolver, autoSelectOptions, autoSelectOptionHandlers, filterFieldsetGroups, foreignKeyGetter, foreignKeyResolver, marshaller, unmarshaller, validator, };
 export type { EntityFormProps, EntityFormType, FieldsetGroups, FkChoices, MarshallerValues, NullablePropertyFkChoices, PropertyFkChoices, };

package/entities/DefaultEntityBehavior.js

@@ -12,7 +12,7 @@ import { OrderDirection, } from './EntityInterface';
 import { fetchAllPages } from '../helpers/fechAllPages';
 import { isEntityItem } from '../router';
 import autoForeignKeyResolver from './DefaultEntityBehavior/AutoForeignKeyResolver';
-import autoSelectOptions from './DefaultEntityBehavior/AutoSelectOptions';
+import autoSelectOptions, { autoSelectOptionHandlers, } from './DefaultEntityBehavior/AutoSelectOptions';
 import filterFieldsetGroups from './DefaultEntityBehavior/FilterFieldsetGroups';
 import foreignKeyGetter from './DefaultEntityBehavior/ForeignKeyGetter';
 import foreignKeyResolver from './DefaultEntityBehavior/ForeignKeyResolver';
@@ -74,6 +74,10 @@ const DefaultEntityBehavior = {
         const module = yield import('./DefaultEntityBehavior/ForeignKeyGetter');
         return module.default;
     }),
+    dynamicAutocompleteGetters: (props) => __awaiter(void 0, void 0, void 0, function* () {
+        const module = yield import('./DefaultEntityBehavior/DynamicAutocompleteGetter');
+        return module.default(props);
+    }),
     columns,
     properties,
     acl,
@@ -99,4 +103,4 @@ const DefaultEntityBehavior = {
     defaultOrderDirection: OrderDirection.asc,
 };
 export default DefaultEntityBehavior;
-export { Form, ListDecorator, View, autoForeignKeyResolver, autoSelectOptions, filterFieldsetGroups, foreignKeyGetter, foreignKeyResolver, marshaller, unmarshaller, validator, };
+export { Form, ListDecorator, View, autoForeignKeyResolver, autoSelectOptions, autoSelectOptionHandlers, filterFieldsetGroups, foreignKeyGetter, foreignKeyResolver, marshaller, unmarshaller, validator, };

package/entities/EntityInterface.d.ts

@@ -47,10 +47,15 @@ export declare type SelectOptionsArgs = {
     callback: FetchFksCallback;
     cancelToken?: CancelToken;
 };
+export declare type DynamicAutocompleteGetterTypeArgs = {
+    entityService: EntityService;
+    skip?: Array<string>;
+};
 export declare type DynamicSelectOptionsArgs = {
     searchTerm?: string;
     id?: string;
 };
+export declare type DynamicAutocompleteGetterType = (props: DynamicAutocompleteGetterTypeArgs) => Promise<Record<string, SelectOptionsType>>;
 export declare type SelectOptionsType<T = any> = (props: SelectOptionsArgs, customProps?: T) => Promise<unknown>;
 export declare type EntityAclType = {
     iden?: string;
@@ -94,6 +99,7 @@ export default interface EntityInterface {
     foreignKeyResolver: () => Promise<foreignKeyResolverType>;
     foreignKeyGetter: () => Promise<ForeignKeyGetterType>;
     selectOptions?: () => Promise<SelectOptionsType>;
+    dynamicAutocompleteGetters: DynamicAutocompleteGetterType;
     dynamicSelectOptions?: boolean;
     Form: () => Promise<React.FunctionComponent<EntityFormProps>>;
     View: () => Promise<ViewType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.13",
+  "version": "1.7.16",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",

package/services/entity/EntityService.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IvozStoreState } from 'store';
 import { SearchFilterType } from '../../components/List/Filter/icons/FilterIconFactory';
-import EntityInterface, { EntityAclType, ForeignKeyGetterType, OrderDirection } from '../../entities/EntityInterface';
+import EntityInterface, { DynamicAutocompleteGetterTypeArgs, EntityAclType, ForeignKeyGetterType, OrderDirection, SelectOptionsType } from '../../entities/EntityInterface';
 import { ActionModelSpec, ActionsSpec, PropertyList, fkPropertyList, visualToggleList } from '../../services/api/ParsedApiSpecInterface';
 export declare type VisualToggleStates = {
     [key: string]: boolean;
@@ -42,6 +42,7 @@ export default class EntityService<T extends IvozStoreState = IvozStoreState> {
     getOrderDirection(): OrderDirection;
     getAcls(parentRow?: EntityValues): EntityAclType;
     getForeignKeyGetter(): ForeignKeyGetterType;
+    getDynamicAutocompleteGetters(props: DynamicAutocompleteGetterTypeArgs): Promise<Record<string, SelectOptionsType>>;
     getListDecorator(): import("../../entities/EntityInterface").ListDecoratorType;
     getPropertyFilters(propertyName: string, path?: string): Array<SearchFilterType>;
     private getIden;

package/services/entity/EntityService.js

@@ -347,6 +347,9 @@ export default class EntityService {
     getForeignKeyGetter() {
         return this.entityDefinition.foreignKeyGetter;
     }
+    getDynamicAutocompleteGetters(props) {
+        return this.entityDefinition.dynamicAutocompleteGetters(props);
+    }
     getListDecorator() {
         return this.entityDefinition.ListDecorator;
     }

package/services/form/Field/DynamicAutocomplete/DynamicAutocomplete.d.ts

@@ -1,9 +1,11 @@
 import { InputProps } from '@mui/material';
 import React, { JSXElementConstructor, ReactElement } from 'react';
+import { DropdownChoices } from '../Dropdown';
 import { SelectOptionsType } from 'entities/EntityInterface';
 import { FormOnChangeEvent } from 'entities/DefaultEntityBehavior/Form/Form';
 export interface DynamicAutocompleteProps {
-    selectOptions: (() => Promise<SelectOptionsType>) | undefined;
+    choices: DropdownChoices;
+    selectOptions?: SelectOptionsType;
     nullOption?: string | React.ReactElement<any>;
     className?: string;
     name: string;

package/services/form/Field/DynamicAutocomplete/DynamicAutocomplete.js

@@ -7,7 +7,7 @@ import { StyledAutocompleteTextField } from '../TextField';
 import SearchIcon from '@mui/icons-material/Search';
 const DynamicAutocomplete = (props) => {
     var _a;
-    const { nullOption, name, label, required, multiple, disabled, onBlur, error, errorMsg, helperText, hasChanged, value, selectOptions, onChange, } = props;
+    const { nullOption, name, label, required, multiple, disabled, onBlur, error, errorMsg, helperText, hasChanged, value, choices, selectOptions, onChange, } = props;
     const { t } = useTranslation();
     let className = props.className;
     if (hasChanged) {
@@ -16,15 +16,56 @@ const DynamicAutocomplete = (props) => {
     if (multiple) {
         className += ' multiselect';
     }
-    const nullOptionObject = nullOption
-        ? { id: '__null__', label: nullOption }
-        : null;
-    const [arrayChoices, setArrayChoices] = useState(nullOptionObject ? [nullOptionObject] : []);
+    const nullOptionObject = {
+        id: '__null__',
+        label: nullOption !== null && nullOption !== void 0 ? nullOption : '',
+    };
+    const [arrayChoices, setArrayChoices] = useState([]);
     const [searchTerm, setSearchTerm] = useState('');
     const [loading, setLoading] = useState(false);
-    const [open, setOpen] = useState(false);
     const [currentOption, setCurrentOption] = useState(nullOptionObject);
     const debounceTimeoutRef = useRef();
+    const loadedValuesRef = useRef(new Set());
+    useEffect(() => {
+        if (selectOptions && Object.keys(choices).length === 0) {
+            return;
+        }
+        if (Array.isArray(choices)) {
+            setArrayChoices(choices);
+            return;
+        }
+        const arrayValue = [];
+        for (const idx in choices) {
+            arrayValue.push({ id: idx, label: choices[idx] });
+        }
+        setArrayChoices(arrayValue);
+    }, [choices]);
+    useEffect(() => {
+        const nullValue = !value || value === '__null__';
+        if (nullValue) {
+            return;
+        }
+        if (!selectOptions) {
+            return;
+        }
+        if (loadedValuesRef.current.has(value)) {
+            return;
+        }
+        loadedValuesRef.current.add(value);
+        selectOptions({
+            callback: (options) => {
+                const option = options[0];
+                if (option) {
+                    setArrayChoices((prev) => {
+                        const exists = prev.some((item) => item.id == option.id);
+                        return exists ? prev : [...prev, option];
+                    });
+                }
+            },
+        }, {
+            id: value,
+        });
+    }, [value, selectOptions]);
     const setOptions = useCallback((options) => {
         const isCurrentOptionIncluded = options.some((option) => option.id == (currentOption === null || currentOption === void 0 ? void 0 : currentOption.id));
         if (!isCurrentOptionIncluded &&
@@ -35,59 +76,45 @@ const DynamicAutocomplete = (props) => {
         if (nullOptionObject) {
             options.unshift(nullOptionObject);
         }
-        console.log('setOptions', options);
         setArrayChoices(options);
     }, [nullOptionObject, currentOption]);
-    useEffect(() => {
-        const hasOptions = arrayChoices.some((option) => option.id !== '__null__');
-        if (hasOptions) {
-            return;
+    const clearSearch = useCallback(() => {
+        if (debounceTimeoutRef.current) {
+            clearTimeout(debounceTimeoutRef.current);
         }
-        const searchParams = {};
-        if (value) {
-            searchParams.id = value;
+        setLoading(false);
+    }, []);
+    const loadOptions = useCallback((searchValue) => {
+        if (!selectOptions) {
+            console.error('selectOptions is not defined');
+            return;
         }
-        selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions().then((selectOptions) => {
+        setLoading(true);
+        debounceTimeoutRef.current = setTimeout(() => {
             selectOptions({
                 callback: (options) => {
-                    if (options.length > 0) {
-                        setOptions(options);
-                    }
+                    setLoading(false);
+                    setOptions(options);
                 },
-            }, searchParams);
-        });
-    }, []);
+            }, {
+                searchTerm: searchValue,
+            });
+        }, 500);
+    }, [searchTerm, selectOptions]);
     useEffect(() => {
-        if (!selectOptions) {
-            return;
-        }
-        if (debounceTimeoutRef.current) {
-            clearTimeout(debounceTimeoutRef.current);
-        }
+        clearSearch();
         const searchTermMatchNullOption = getOptionLabel(nullOptionObject) === searchTerm;
         if (searchTermMatchNullOption) {
             return;
         }
-        const isSearchTermIncluded = arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.some((option) => getOptionLabel(option).includes(searchTerm));
+        const isSearchTermIncluded = searchTerm !== '' &&
+            (arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.some((option) => getOptionLabel(option).includes(searchTerm)));
         if (isSearchTermIncluded) {
             return;
         }
-        setLoading(true);
-        debounceTimeoutRef.current = setTimeout(() => {
-            selectOptions().then((selectOptions) => {
-                selectOptions({
-                    callback: (options) => {
-                        setLoading(false);
-                        setOptions(options);
-                    },
-                }, {
-                    searchTerm: searchTerm,
-                });
-            });
-        }, 500);
+        loadOptions(searchTerm);
     }, [searchTerm, selectOptions]);
     const handleInputChange = useCallback((e, value, reason) => {
-        console.log('inputChange', arrayChoices);
         if (reason === 'clear') {
             setSearchTerm('');
             return;
@@ -188,7 +215,9 @@ const DynamicAutocomplete = (props) => {
     const disableClearable = arrayChoices.find((item) => item.id === '__null__')
         ? false
         : true;
-    const safeValue = value.length !== '' ? value : null;
-    return (_jsx(MuiAutocomplete, { className: 'dynamic-autocomplete' + className, value: safeValue, multiple: multiple, disabled: disabled, disableClearable: disableClearable, onChange: onChangeWrapper, onBlur: onBlur, onInputChange: handleInputChange, onClose: () => setOpen(false), onOpen: () => setOpen(true), options: arrayChoices !== null && arrayChoices !== void 0 ? arrayChoices : [], getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, loading: loading, placeholder: props.placeholder, renderInput: renderInput, PaperComponent: CustomOption, renderOption: (props, option) => (_jsx(Box, Object.assign({ component: 'li', className: 'autocomplete-option', "data-value": option.id }, props, { children: option.label }))) }));
+    const safeValue = arrayChoices.find((item) => item.id == value)
+        ? value
+        : null;
+    return (_jsx(MuiAutocomplete, { className: 'dynamic-autocomplete' + className, value: safeValue, multiple: multiple, disabled: disabled, disableClearable: disableClearable, onChange: onChangeWrapper, onBlur: onBlur, onInputChange: handleInputChange, options: arrayChoices !== null && arrayChoices !== void 0 ? arrayChoices : [], getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, loading: loading, placeholder: props.placeholder, renderInput: renderInput, PaperComponent: CustomOption, renderOption: (props, option) => (_jsx(Box, Object.assign({ component: 'li', className: 'autocomplete-option', "data-value": option.id }, props, { children: option.label }))) }));
 };
 export default DynamicAutocomplete;

package/services/form/Field/TextField/TextField.styles.js

@@ -103,6 +103,7 @@ export const StyledAutocompleteTextField = styled(StyledTextField)(() => {
     return {
         '& .input-field': {
             paddingLeft: '9px',
+            maxHeight: '25px',
         },
     };
 });

package/services/form/FormFieldFactory/Factory/DynamicAutocompleteFactory.d.ts

@@ -1,22 +1,22 @@
 /// <reference types="react" />
 import { PropertySpec } from '../../../api';
 import { ScalarEntityValue } from '../../../entity';
-import { NullableFormFieldFactoryChoices } from '../FormFieldFactory';
-import { SelectOptionsType } from 'entities/EntityInterface';
 import { FormOnChangeEvent } from 'entities/DefaultEntityBehavior/Form/Form';
+import EntityService from 'services/entity/EntityService';
+import { NullableFormFieldFactoryChoices } from 'services/form';
 declare type DynamicAutocompleteFactoryPropsType = {
     fld: string;
     property: PropertySpec;
     disabled: boolean;
     multiSelect: boolean;
     value: ScalarEntityValue | Array<ScalarEntityValue>;
+    choices: NullableFormFieldFactoryChoices;
     hasChanged: boolean;
     error: React.ReactNode;
     touched: boolean | undefined;
     changeHandler: (event: FormOnChangeEvent) => void;
-    choices: NullableFormFieldFactoryChoices;
     handleBlur: (event: React.FocusEvent) => void;
-    selectOptions: (() => Promise<SelectOptionsType>) | undefined;
+    entityService: EntityService;
 };
 export declare const DynamicAutocompleteFactory: (props: DynamicAutocompleteFactoryPropsType) => JSX.Element;
 export {};

package/services/form/FormFieldFactory/Factory/DynamicAutocompleteFactory.js

@@ -1,6 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isPropertyFk } from '../../../api';
 import { DynamicAutocomplete } from '../../Field/DynamicAutocomplete';
+import { Skeleton } from '@mui/material';
+import { useEffect, useState } from 'react';
 export const DynamicAutocompleteFactory = (props) => {
-    const { selectOptions, fld, disabled, multiSelect, value, hasChanged, error, touched, property, changeHandler, handleBlur, } = props;
-    return (_jsx(DynamicAutocomplete, { name: fld, label: property.label, value: value, multiple: multiSelect, nullOption: property.null, required: property.required, disabled: disabled, onBlur: handleBlur, error: touched && Boolean(error), errorMsg: touched && error, helperText: property.helpText, hasChanged: hasChanged, onChange: changeHandler, selectOptions: selectOptions }));
+    const { entityService, fld, disabled, multiSelect, value, hasChanged, error, touched, property, changeHandler, handleBlur, } = props;
+    let { choices } = props;
+    const [selectOptionsLoader, setSelectOptionsLoader] = useState(undefined);
+    const cleanRef = isPropertyFk(property)
+        ? property.$ref.replace('#/definitions/', '')
+        : '';
+    useEffect(() => {
+        if (!cleanRef) {
+            return;
+        }
+        const selectOptionsGetter = entityService.getDynamicAutocompleteGetters({
+            entityService,
+            skip: [],
+        });
+        selectOptionsGetter.then((getters) => {
+            const selectOptions = getters[cleanRef];
+            if (selectOptions) {
+                setSelectOptionsLoader({ selectOptions: selectOptions });
+            }
+        });
+    }, [cleanRef, entityService]);
+    if (!selectOptionsLoader || !choices) {
+        return (_jsxs(_Fragment, { children: [_jsx(Skeleton, { width: '50%' }), _jsx(Skeleton, { variant: 'rectangular', height: 42 })] }));
+    }
+    if (property.null) {
+        if (Array.isArray(choices)) {
+            const nullAlreadyAssigned = choices.find((item) => item.id == '__null__');
+            if (!nullAlreadyAssigned) {
+                choices = [{ label: property.null, id: '__null__' }, ...choices];
+            }
+        }
+        else {
+            choices = Object.assign({ __null__: property.null }, choices);
+        }
+    }
+    return (_jsx(DynamicAutocomplete, { name: fld, label: property.label, value: value, choices: choices, multiple: multiSelect, nullOption: property.null, required: property.required, disabled: disabled, onBlur: handleBlur, error: touched && Boolean(error), errorMsg: touched && error, helperText: property.helpText, hasChanged: hasChanged, onChange: changeHandler, selectOptions: selectOptionsLoader.selectOptions }));
 };

package/services/form/FormFieldFactory/FormFieldFactory.d.ts

@@ -13,6 +13,7 @@ export default class FormFieldFactory {
     private divRef?;
     constructor(entityService: EntityService, formik: useFormikType, changeHandler: (event: FormOnChangeEvent) => void, handleBlur: (event: React.FocusEvent) => void, divRef?: React.RefObject<HTMLDivElement> | undefined);
     private getDynamicSelectOptions;
+    private isDynamicAutocomplete;
     getFormField(fld: string, choices: NullableFormFieldFactoryChoices, readOnly?: boolean): JSX.Element | null;
     createByPropertySpec(fld: string, property: PropertySpec, choices: NullableFormFieldFactoryChoices, readOnly?: boolean): JSX.Element | null;
     getProperty(fld: string): PropertySpec | null;

package/services/form/FormFieldFactory/FormFieldFactory.js

@@ -25,6 +25,18 @@ export default class FormFieldFactory {
         }
         return entities[entityName].selectOptions;
     }
+    isDynamicAutocomplete(property) {
+        var _a;
+        if (!isPropertyFk(property)) {
+            return false;
+        }
+        const entities = StoreContainer.store.getState().entities.entities;
+        const cleanRef = property.$ref.replace('#/definitions/', '');
+        if (!((_a = entities[cleanRef]) === null || _a === void 0 ? void 0 : _a.dynamicSelectOptions)) {
+            return false;
+        }
+        return true;
+    }
     getFormField(fld, choices, readOnly = false) {
         const property = this.getProperty(fld);
         if (!property) {
@@ -47,9 +59,8 @@ export default class FormFieldFactory {
                 .component;
             return (_jsx(PropertyComponent, { _context: CustomFunctionComponentContext.write, _columnName: fld, readOnly: readOnly, formik: this.formik, values: this.formik.values, choices: choices, property: property, disabled: disabled, changeHandler: this.changeHandler, onBlur: this.handleBlur, formFieldFactory: this }));
         }
-        const dynamicSelectOptions = this.getDynamicSelectOptions(property);
-        if (dynamicSelectOptions) {
-            return (_jsx(DynamicAutocompleteFactory, { fld: fld, property: property, disabled: disabled, multiSelect: multiSelect, value: value, hasChanged: hasChanged, error: error, touched: touched, selectOptions: dynamicSelectOptions, choices: choices, changeHandler: this.changeHandler, handleBlur: this.handleBlur }));
+        if (this.isDynamicAutocomplete(property)) {
+            return (_jsx(DynamicAutocompleteFactory, { fld: fld, property: property, disabled: disabled, multiSelect: multiSelect, value: value, hasChanged: hasChanged, error: error, touched: touched, choices: choices, changeHandler: this.changeHandler, handleBlur: this.handleBlur, entityService: this.entityService }));
         }
         if (isPropertyFk(property) || multiSelect) {
             return (_jsx(AutocompleteFactory, { fld: fld, property: property, disabled: disabled, multiSelect: multiSelect, value: value, hasChanged: hasChanged, error: error, touched: touched, choices: choices, changeHandler: this.changeHandler, handleBlur: this.handleBlur }));