@irontec/ivoz-ui 1.7.12 → 1.7.14

package/components/Dashboard/Dashboard.js

@@ -10,12 +10,12 @@ const Dashboard = (props) => {
         return { name, platform, dLicences, mLicenses };
     }
     const rows = [
-        createData('Acies Abogados', 'IvozProvider Irontec', 10, 8),
-        createData('Ayuntamiento Bilbao', 'IvozProvider Irontec', 10, 8),
-        createData('BicBerrilan', 'IvozProvider Irontec', 10, 8),
-        createData('CaritasSoria', 'IvozProvider Irontec', 10, 8),
+        createData('Client 1', 'Platform A', 5, 3),
+        createData('Client 2', 'Platform B', 8, 2),
+        createData('Client 3', 'Platform C', 4, 6),
+        createData('Client 4', 'Platform D', 7, 1),
     ];
-    return (_jsxs("section", Object.assign({ className: className }, { children: [_jsx("div", Object.assign({ className: 'card welcome' }, { children: _jsxs("div", Object.assign({ className: 'card-container' }, { children: [_jsxs("div", { children: [_jsxs("h3", { children: ["Welcome to ", _jsx("br", {}), " Advanced Provisioning System"] }), _jsx("p", { children: "APS is an Open Source solution by Irontec. Add platforms, manage clients, assign license to VoIP users and much more." }), _jsx(LightButton, { children: "Get started" })] }), _jsx("img", { src: 'assets/img/dashboard-welcome.svg' })] })) })), _jsxs("div", Object.assign({ className: 'card activity' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Recent activity" })), _jsxs("div", Object.assign({ className: 'content' }, { children: [_jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "5m" })), _jsx("div", Object.assign({ className: 'value' }, { children: "Login (Antonio)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "30m" })), _jsx("div", Object.assign({ className: 'value' }, { children: "New admin added (Mikel)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "6h" })), _jsx("div", Object.assign({ className: 'value' }, { children: "Login (Mikel)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "1d" })), _jsx("div", Object.assign({ className: 'value' }, { children: "10 new licenses assigned (Carlos)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "1d" })), _jsx("div", Object.assign({ className: 'value' }, { children: "New client added (Carlos)" }))] }))] }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconPlatformsDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "5" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Platforms" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "+ 0" }), _jsx("img", { src: 'assets/img/same.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "Go to platforms" }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconClientsDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "120" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Clients" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "+ 3" }), _jsx("img", { src: 'assets/img/up.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "Go to clients" }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconUsersDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "1264" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Users" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "- 15" }), _jsx("img", { src: 'assets/img/down.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "Go to users" }))] })), _jsxs("div", Object.assign({ className: 'card licenses' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Licenses" })), _jsxs("div", Object.assign({ className: 'radial' }, { children: [_jsx("div", { className: 'circle' }), _jsxs("div", Object.assign({ className: 'data' }, { children: [_jsx("div", Object.assign({ className: 'total' }, { children: "Total" })), _jsx("div", Object.assign({ className: 'number' }, { children: "1632" }))] }))] })), _jsxs("div", Object.assign({ className: 'legend' }, { children: [_jsxs("div", Object.assign({ className: 'label' }, { children: [_jsx("div", { className: 'color orange' }), _jsx("div", Object.assign({ className: 'text' }, { children: "Desktop" }))] })), _jsxs("div", Object.assign({ className: 'label' }, { children: [_jsx("div", { className: 'color red' }), _jsx("div", Object.assign({ className: 'text' }, { children: "Mobile" }))] }))] }))] })), _jsxs("div", Object.assign({ className: 'card last' }, { children: [_jsxs("div", Object.assign({ className: 'header' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Last added clients" })), _jsx(SolidButton, { children: "+ Add" })] })), _jsx("div", Object.assign({ className: 'table' }, { children: _jsx(TableContainer, Object.assign({ component: Paper, sx: { boxShadow: 'none' } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": 'simple table' }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, Object.assign({ style: { fontSize: '13px' } }, { children: [_jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Name" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Platform" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Desktop licenses" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Mobile licenses" }))] })) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, Object.assign({ sx: { '&:last-child td, &:last-child th': { border: 0 } } }, { children: [_jsx(TableCell, Object.assign({ component: 'th', scope: 'row' }, { children: row.name })), _jsx(TableCell, { children: row.platform }), _jsx(TableCell, { children: row.dLicences }), _jsx(TableCell, { children: row.mLicenses })] }), row.name))) })] })) })) }))] }))] })));
+    return (_jsxs("section", Object.assign({ className: className }, { children: [_jsx("div", Object.assign({ className: 'card welcome' }, { children: _jsxs("div", Object.assign({ className: 'card-container' }, { children: [_jsxs("div", { children: [_jsxs("h3", { children: ["Welcome to ", _jsx("br", {}), " Demo System"] }), _jsx("p", { children: "This is a demo. Add platforms, manage clients, assign licenses and more." }), _jsx(LightButton, { children: "Get started" })] }), _jsx("img", { src: 'assets/img/dashboard-welcome.svg' })] })) })), _jsxs("div", Object.assign({ className: 'card activity' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Recent activity" })), _jsxs("div", Object.assign({ className: 'content' }, { children: [_jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "5m" })), _jsx("div", Object.assign({ className: 'value' }, { children: "Login (User1)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "30m" })), _jsx("div", Object.assign({ className: 'value' }, { children: "New admin added (User2)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "6h" })), _jsx("div", Object.assign({ className: 'value' }, { children: "Login (User2)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "1d" })), _jsx("div", Object.assign({ className: 'value' }, { children: "10 licenses assigned (User3)" }))] })), _jsxs("div", Object.assign({ className: 'row' }, { children: [_jsx("div", Object.assign({ className: 'time' }, { children: "1d" })), _jsx("div", Object.assign({ className: 'value' }, { children: "New client added (User3)" }))] }))] }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconPlatformsDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "4" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Platforms" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "+ 0" }), _jsx("img", { src: 'assets/img/same.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "View platforms" }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconClientsDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "20" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Clients" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "+ 1" }), _jsx("img", { src: 'assets/img/up.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "View clients" }))] })), _jsxs("div", Object.assign({ className: 'card amount' }, { children: [_jsx("div", Object.assign({ className: 'img-container' }, { children: _jsx(IconUsersDashboard, {}) })), _jsx("div", Object.assign({ className: 'number' }, { children: "100" })), _jsx("div", Object.assign({ className: 'name' }, { children: "Users" })), _jsxs("div", Object.assign({ className: 'progress' }, { children: [_jsx("span", { children: "- 2" }), _jsx("img", { src: 'assets/img/down.svg' })] })), _jsx("a", Object.assign({ href: '', className: 'link' }, { children: "View users" }))] })), _jsxs("div", Object.assign({ className: 'card licenses' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Licenses" })), _jsxs("div", Object.assign({ className: 'radial' }, { children: [_jsx("div", { className: 'circle' }), _jsxs("div", Object.assign({ className: 'data' }, { children: [_jsx("div", Object.assign({ className: 'total' }, { children: "Total" })), _jsx("div", Object.assign({ className: 'number' }, { children: "120" }))] }))] })), _jsxs("div", Object.assign({ className: 'legend' }, { children: [_jsxs("div", Object.assign({ className: 'label' }, { children: [_jsx("div", { className: 'color orange' }), _jsx("div", Object.assign({ className: 'text' }, { children: "Desktop" }))] })), _jsxs("div", Object.assign({ className: 'label' }, { children: [_jsx("div", { className: 'color red' }), _jsx("div", Object.assign({ className: 'text' }, { children: "Mobile" }))] }))] }))] })), _jsxs("div", Object.assign({ className: 'card last' }, { children: [_jsxs("div", Object.assign({ className: 'header' }, { children: [_jsx("div", Object.assign({ className: 'title' }, { children: "Last added clients" })), _jsx(SolidButton, { children: "+ Add" })] })), _jsx("div", Object.assign({ className: 'table' }, { children: _jsx(TableContainer, Object.assign({ component: Paper, sx: { boxShadow: 'none' } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": 'simple table' }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, Object.assign({ style: { fontSize: '13px' } }, { children: [_jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Name" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Platform" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Desktop licenses" })), _jsx(TableCell, Object.assign({ style: { fontSize: '13px', color: 'var(--color-text)' } }, { children: "Mobile licenses" }))] })) }), _jsx(TableBody, { children: rows.map((row) => (_jsxs(TableRow, Object.assign({ sx: { '&:last-child td, &:last-child th': { border: 0 } } }, { children: [_jsx(TableCell, Object.assign({ component: 'th', scope: 'row' }, { children: row.name })), _jsx(TableCell, { children: row.platform }), _jsx(TableCell, { children: row.dLicences }), _jsx(TableCell, { children: row.mLicenses })] }), row.name))) })] })) })) }))] }))] })));
 };
 export default styled(Dashboard)(({ theme }) => {
     return {

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/ConfirmDialog.styles.d.ts

@@ -10,8 +10,8 @@ export declare const StyledDialogContentText: import("@emotion/styled").StyledCo
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | "align" | ("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") | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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,6 +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;
@@ -90,6 +99,8 @@ 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>;
     List: React.FunctionComponent<ListContentProps>;

package/helpers/fetchFilteredPage.d.ts

@@ -0,0 +1,9 @@
+import { CancelToken } from 'axios';
+import { FetchFksCallback } from '../entities/EntityInterface';
+export declare type fetchFilteredPageProps = {
+    endpoint: string;
+    params: Record<string, unknown>;
+    setter: FetchFksCallback;
+    cancelToken?: CancelToken;
+};
+export declare const fetchFilteredPage: (props: fetchFilteredPageProps) => Promise<unknown>;

package/helpers/fetchFilteredPage.js

@@ -0,0 +1,31 @@
+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 fetchFilteredPage = (props) => __awaiter(void 0, void 0, void 0, function* () {
+    const { endpoint, params, setter, cancelToken } = props;
+    const getAction = StoreContainer.store.getActions().api.get;
+    const response = [];
+    try {
+        yield getAction({
+            path: endpoint,
+            silenceErrors: false,
+            params: Object.assign(Object.assign({ _itemsPerPage: 20 }, params), { _pagination: true, _page: 1 }),
+            successCallback: (data) => __awaiter(void 0, void 0, void 0, function* () {
+                response.push(...data);
+            }),
+            cancelToken,
+        });
+    }
+    catch (error) {
+        console.error(error);
+    }
+    setter(response);
+    return response;
+});

package/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './fechAllPages';
+export * from './fetchFilteredPage';

package/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './fechAllPages';
+export * from './fetchFilteredPage';

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './entities';
+export * from './helpers';
 export * from './hooks';
 export * from './router';
 export * from './services';

package/index.js

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './entities';
+export * from './helpers';
 export * from './hooks';
 export * from './router';
 export * from './services';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.12",
+  "version": "1.7.14",
   "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

@@ -0,0 +1,27 @@
+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 {
+    choices: DropdownChoices;
+    selectOptions?: SelectOptionsType;
+    nullOption?: string | React.ReactElement<any>;
+    className?: string;
+    name: string;
+    label: string | ReactElement<any, string | JSXElementConstructor<any>>;
+    placeholder?: string;
+    value: any;
+    multiple: boolean;
+    required: boolean;
+    disabled: boolean;
+    onBlur: (event: React.FocusEvent) => void;
+    error?: boolean;
+    errorMsg?: React.ReactNode;
+    helperText?: string | React.ReactNode;
+    hasChanged: boolean;
+    InputProps?: Partial<InputProps>;
+    onChange: (event: FormOnChangeEvent) => void;
+}
+declare const DynamicAutocomplete: (props: DynamicAutocompleteProps) => JSX.Element | null;
+export default DynamicAutocomplete;

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

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Paper, Typography } from '@mui/material';
+import MuiAutocomplete from '@mui/material/Autocomplete';
+import { useCallback, useEffect, useState, useRef, } from 'react';
+import { useTranslation } from 'react-i18next';
+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, choices, selectOptions, onChange, } = props;
+    const { t } = useTranslation();
+    let className = props.className;
+    if (hasChanged) {
+        className += ' changed';
+    }
+    if (multiple) {
+        className += ' multiselect';
+    }
+    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 [currentOption, setCurrentOption] = useState(nullOptionObject);
+    const debounceTimeoutRef = useRef();
+    useEffect(() => {
+        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 (!choices) {
+            return;
+        }
+        const choicesIncludesValue = Array.isArray(choices)
+            ? choices.some((item) => item.id === value)
+            : choices && value in choices;
+        if (choicesIncludesValue) {
+            return;
+        }
+        selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions({
+            callback: (options) => {
+                const option = options[0];
+                arrayChoices.push(option);
+                setArrayChoices(arrayChoices);
+            },
+        }, {
+            id: value,
+        });
+    }, []);
+    const setOptions = useCallback((options) => {
+        const isCurrentOptionIncluded = options.some((option) => option.id == (currentOption === null || currentOption === void 0 ? void 0 : currentOption.id));
+        if (!isCurrentOptionIncluded &&
+            currentOption &&
+            currentOption.id !== '__null__') {
+            options.unshift(currentOption);
+        }
+        if (nullOptionObject) {
+            options.unshift(nullOptionObject);
+        }
+        setArrayChoices(options);
+    }, [nullOptionObject, currentOption]);
+    const clearSearch = useCallback(() => {
+        if (debounceTimeoutRef.current) {
+            clearTimeout(debounceTimeoutRef.current);
+        }
+        setLoading(false);
+    }, []);
+    const loadOptions = useCallback((searchValue) => {
+        if (!selectOptions) {
+            console.error('selectOptions is not defined');
+            return;
+        }
+        setLoading(true);
+        debounceTimeoutRef.current = setTimeout(() => {
+            selectOptions({
+                callback: (options) => {
+                    setLoading(false);
+                    setOptions(options);
+                },
+            }, {
+                searchTerm: searchValue,
+            });
+        }, 500);
+    }, [searchTerm, selectOptions]);
+    useEffect(() => {
+        clearSearch();
+        const searchTermMatchNullOption = getOptionLabel(nullOptionObject) === searchTerm;
+        if (searchTermMatchNullOption) {
+            return;
+        }
+        const isSearchTermIncluded = searchTerm !== '' &&
+            (arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.some((option) => getOptionLabel(option).includes(searchTerm)));
+        if (isSearchTermIncluded) {
+            return;
+        }
+        loadOptions(searchTerm);
+    }, [searchTerm, selectOptions]);
+    const handleInputChange = useCallback((e, value, reason) => {
+        if (reason === 'clear') {
+            setSearchTerm('');
+            return;
+        }
+        if (reason === 'input') {
+            setSearchTerm(value);
+            return;
+        }
+        if (reason === 'reset') {
+            if (arrayChoices.length === 0) {
+                setSearchTerm('');
+            }
+        }
+    }, []);
+    const onChangeWrapper = useCallback((e, option, reason) => {
+        let selectedValue = undefined;
+        if (reason !== 'clear' && option !== null) {
+            selectedValue = multiple
+                ? option.map((item) => typeof item === 'object' ? item.id : item)
+                : option.id;
+        }
+        else if (reason === 'clear') {
+            selectedValue = '';
+        }
+        else {
+            selectedValue = (arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.find((item) => item.id === '__null__'))
+                ? '__null__'
+                : null;
+        }
+        setCurrentOption(option);
+        onChange({
+            target: {
+                name: name,
+                value: selectedValue,
+            },
+        });
+    }, [multiple, onChange, name, arrayChoices]);
+    const getOptionLabel = useCallback((value) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (typeof value !== 'object') {
+            value = arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.find((option) => option.id == value);
+        }
+        const isTranslation = (value === null || value === void 0 ? void 0 : value.label) &&
+            typeof value.label === 'object' &&
+            ((_b = (_a = value.label) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.defaults) &&
+            typeof ((_d = (_c = value.label) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.defaults) === 'string';
+        if (isTranslation) {
+            const translatableText = (_f = (_e = value.label) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.defaults;
+            return t(translatableText);
+        }
+        return (value === null || value === void 0 ? void 0 : value.label) || '';
+    }, [arrayChoices, t]);
+    const isOptionEqualToValue = useCallback((option, value) => {
+        if (value === (currentOption === null || currentOption === void 0 ? void 0 : currentOption.id)) {
+            return true;
+        }
+        if ((option === null || option === void 0 ? void 0 : option.id) == value) {
+            return true;
+        }
+        if ((option === null || option === void 0 ? void 0 : option.id) == value.id) {
+            return true;
+        }
+        return false;
+    }, []);
+    const arrayChoicesLength = (_a = arrayChoices === null || arrayChoices === void 0 ? void 0 : arrayChoices.length) !== null && _a !== void 0 ? _a : 0;
+    const renderInput = useCallback((props) => {
+        const inputProps = Object.assign(Object.assign({}, props.InputProps), { notched: true });
+        const showPlaceholder = !searchTerm && !loading;
+        const inputPlaceholder = showPlaceholder
+            ? t('Type to search')
+            : props.placeholder;
+        return (_jsx(StyledAutocompleteTextField, Object.assign({}, props, { name: name, label: label, required: required, disabled: disabled, InputProps: inputProps, InputLabelProps: { shrink: true, required: required }, error: error, errorMsg: errorMsg, helperText: helperText, placeholder: inputPlaceholder })));
+    }, [
+        name,
+        label,
+        required,
+        disabled,
+        error,
+        errorMsg,
+        helperText,
+        arrayChoicesLength,
+        searchTerm,
+        loading,
+    ]);
+    const dropdownHelperText = 'Type to load more options';
+    const CustomOption = useCallback((props) => {
+        return (_jsxs(Paper, Object.assign({}, props, { children: [props.children, dropdownHelperText && (_jsxs(Box, Object.assign({ sx: {
+                        p: 2,
+                        borderTop: '1px solid',
+                        borderColor: 'divider',
+                        backgroundColor: 'var(--color-background)',
+                        color: 'var(--color-text)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '4px',
+                    } }, { children: [_jsx(SearchIcon, { sx: { fontSize: '18px' } }), _jsx(Typography, Object.assign({ variant: 'caption' }, { children: t(dropdownHelperText) }))] })))] })));
+    }, [dropdownHelperText]);
+    const disableClearable = arrayChoices.find((item) => item.id === '__null__')
+        ? false
+        : true;
+    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/DynamicAutocomplete/DynamicAutocomplete.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledDynamicAutocomplete: import("@emotion/styled").StyledComponent<import("./DynamicAutocomplete").DynamicAutocompleteProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material';
+import DynamicAutocomplete from './DynamicAutocomplete';
+const TextFieldBaseStyles = () => {
+    return {};
+};
+export const StyledDynamicAutocomplete = styled(DynamicAutocomplete)(TextFieldBaseStyles);

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

@@ -0,0 +1,2 @@
+import { StyledDynamicAutocomplete } from './DynamicAutocomplete.styles';
+export { StyledDynamicAutocomplete as DynamicAutocomplete };

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

@@ -0,0 +1,2 @@
+import { StyledDynamicAutocomplete } from './DynamicAutocomplete.styles';
+export { StyledDynamicAutocomplete as DynamicAutocomplete };

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

@@ -1,4 +1,5 @@
 export * from './FileUploader';
+export * from './DynamicAutocomplete';
 export * from './Autocomplete';
 export * from './CustomComponentWrapper.styles';
 export * from './CustomComponentWrapper';

package/services/form/Field/index.js

@@ -1,4 +1,5 @@
 export * from './FileUploader';
+export * from './DynamicAutocomplete';
 export * from './Autocomplete';
 export * from './CustomComponentWrapper.styles';
 export * from './CustomComponentWrapper';

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { PropertySpec } from '../../../api';
+import { ScalarEntityValue } from '../../../entity';
+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;
+    handleBlur: (event: React.FocusEvent) => void;
+    entityService: EntityService;
+};
+export declare const DynamicAutocompleteFactory: (props: DynamicAutocompleteFactoryPropsType) => JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+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 { 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/Factory/index.d.ts

@@ -1,3 +1,4 @@
+import { DynamicAutocompleteFactory } from './DynamicAutocompleteFactory';
 import { AutocompleteFactory } from './AutocompleteFactory';
 import { DateFactory } from './DateFactory';
 import { DateTimeFactory } from './DateTimeFactory';
@@ -11,4 +12,4 @@ import { SwitchFactory } from './SwitchFactory';
 import { TextareaFactory } from './TextareaFactory';
 import { TimeFactory } from './TimeFactory';
 import { ColorFactory } from './ColorFactory';
-export { AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, };
+export { DynamicAutocompleteFactory, AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, };

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

@@ -1,3 +1,4 @@
+import { DynamicAutocompleteFactory } from './DynamicAutocompleteFactory';
 import { AutocompleteFactory } from './AutocompleteFactory';
 import { DateFactory } from './DateFactory';
 import { DateTimeFactory } from './DateTimeFactory';
@@ -11,4 +12,4 @@ import { SwitchFactory } from './SwitchFactory';
 import { TextareaFactory } from './TextareaFactory';
 import { TimeFactory } from './TimeFactory';
 import { ColorFactory } from './ColorFactory';
-export { AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, };
+export { DynamicAutocompleteFactory, AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, };

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

@@ -12,6 +12,8 @@ export default class FormFieldFactory {
     private handleBlur;
     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

@@ -3,7 +3,8 @@ import { InputAdornment, } from '@mui/material';
 import React from 'react';
 import { isPropertyEmbeddable, isPropertyFk, isPropertyScalar, } from '../../api/ParsedApiSpecInterface';
 import { CustomFunctionComponentContext, } from '../../form/Field/CustomComponentWrapper';
-import { AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, } from './Factory/index';
+import { DynamicAutocompleteFactory, AutocompleteFactory, DateFactory, DateTimeFactory, DropdownFactory, FileUploadFactory, InputTextFactory, MultilangFactory, NumberFactory, PasswordFactory, SwitchFactory, TextareaFactory, TimeFactory, ColorFactory, } from './Factory/index';
+import { StoreContainer } from '../../../store';
 export default class FormFieldFactory {
     constructor(entityService, formik, changeHandler, handleBlur, divRef) {
         this.entityService = entityService;
@@ -12,6 +13,30 @@ export default class FormFieldFactory {
         this.handleBlur = handleBlur;
         this.divRef = divRef;
     }
+    getDynamicSelectOptions(property) {
+        var _a;
+        if (!isPropertyFk(property)) {
+            return undefined;
+        }
+        const entities = StoreContainer.store.getState().entities.entities;
+        const entityName = property.$ref.replace('#/definitions/', '');
+        if (!((_a = entities[entityName]) === null || _a === void 0 ? void 0 : _a.dynamicSelectOptions)) {
+            return undefined;
+        }
+        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) {
@@ -34,6 +59,9 @@ 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 }));
         }
+        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 }));
         }

package/translations/ca.json

@@ -40,6 +40,8 @@
   "Starts with": "empieza por",
   "This change will affect": "Aquest canvi afectarà",
   "True": "Verdadero",
+  "Type to load more options": "Escriu per carregar més opcions",
+  "Type to search": "Escriu per cercar",
   "Upload image": "Subir imagen",
   "Username": "Usuari",
   "Validation error": "Error de validación",

package/translations/en.json

@@ -40,6 +40,8 @@
   "Starts with": "Starts with",
   "This change will affect": "This change will affect",
   "True": "True",
+  "Type to load more options": "Type to load more options",
+  "Type to search": "Type to search",
   "Upload image": "Upload image",
   "Username": "Username",
   "Validation error": "Validation error",
@@ -48,7 +50,7 @@
   "Yes, delete it": "Yes, delete it",
   "You are about to remove": "You are about to remove",
   "You are about to update": "You are about to update",
-  "You haven’t created any {{entity}} yet.": "You haven’t created any {{entity}} yet.",
+  "You haven't created any {{entity}} yet.": "You haven't created any {{entity}} yet.",
   "entities": "entities",
   "invalid pattern": "invalid pattern",
   "required value": "required value",

package/translations/es.json

@@ -40,6 +40,8 @@
   "Starts with": "empieza por",
   "This change will affect": "Este cambio afectará",
   "True": "Verdadero",
+  "Type to load more options": "Escribe para cargar más opciones",
+  "Type to search": "Escribe para buscar",
   "Upload image": "Subir imagen",
   "Username": "Usuario",
   "Validation error": "Error de validación",
@@ -48,7 +50,7 @@
   "Yes, delete it": "Si, eliminar",
   "You are about to remove": "Estás a punto de eliminar",
   "You are about to update": "Estás a punto de actualizar",
-  "You haven’t created any {{entity}} yet.": "Aún no has creado ningún {{entity}}",
+  "You haven't created any {{entity}} yet.": "Aún no has creado ningún {{entity}}",
   "entities": "entidades",
   "invalid pattern": "Patrón invalido",
   "required value": "valor requerido",

package/translations/it.json

@@ -40,6 +40,8 @@
   "Starts with": "Starts with",
   "This change will affect": "Questa modifica influirà",
   "True": "True",
+  "Type to load more options": "Digita per caricare più opzioni",
+  "Type to search": "Digita per cercare",
   "Upload image": "Upload image",
   "Username": "Username",
   "Validation error": "Validation error",