@irontec/ivoz-ui 1.7.0 → 1.7.3

package/components/List/Content/CTA/DeleteRowButton.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip } from '@mui/material';
 import { useState } from 'react';
 import ConfirmDialog from '../../../../components/shared/ConfirmDialog';
@@ -49,6 +49,13 @@ const DeleteRowButton = (props) => {
     });
     const entity = entityService.getEntity();
     const iden = entity.toStr(row);
-    return (_jsxs(_Fragment, { children: [variant === 'icon' && (_jsx(Tooltip, Object.assign({ title: _('Delete'), placement: 'bottom', enterTouchDelay: 0, arrow: true }, { children: _jsx("span", { children: _jsx(LightButton, Object.assign({ disabled: disabled, onClick: () => !disabled && setShowDelete(true) }, { children: _jsx(StyledDeleteIcon, {}) })) }) }))), variant === 'text' && (_jsx(MoreMenuItem, Object.assign({ className: disabled ? 'disabled' : '', onClick: () => !disabled && setShowDelete(true) }, { children: _('Delete') }))), _jsx(ConfirmDialog, { text: _jsxs("span", { children: [_('You are about to remove'), " ", _jsx("strong", { children: iden })] }), open: showDelete, doubleCheck: entity.deleteDoubleCheck || false, doubleCheckExpectedStr: iden, handleClose: handleHideDelete, handleApply: handleDelete })] }));
+    const isIdenInt = Number.isInteger(parseInt(iden, 10));
+    const printStrongIden = () => {
+        if (!isIdenInt) {
+            return _jsx("strong", { children: iden });
+        }
+        return _jsx(_Fragment, {});
+    };
+    return (_jsxs(_Fragment, { children: [variant === 'icon' && (_jsx(Tooltip, Object.assign({ title: _('Delete'), placement: 'bottom', enterTouchDelay: 0, arrow: true }, { children: _jsx("span", { children: _jsx(LightButton, Object.assign({ disabled: disabled, onClick: () => !disabled && setShowDelete(true) }, { children: _jsx(StyledDeleteIcon, {}) })) }) }))), variant === 'text' && (_jsx(MoreMenuItem, Object.assign({ className: disabled ? 'disabled' : '', onClick: () => !disabled && setShowDelete(true) }, { children: _('Delete') }))), _jsx(ConfirmDialog, { text: _jsxs("span", { children: [_('You are about to remove'), " ", printStrongIden()] }), open: showDelete, doubleCheck: entity.deleteDoubleCheck || false, doubleCheckExpectedStr: iden, handleClose: handleHideDelete, handleApply: handleDelete })] }));
 };
 export default DeleteRowButton;

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import AddIcon from '@mui/icons-material/Add';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import { Box, useMediaQuery, useTheme } from '@mui/material';
-import { memo, useEffect, useState } from 'react';
+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';
@@ -18,13 +18,16 @@ export default function ContentFilterRow(props) {
     if (!filters[name]) {
         return null;
     }
-    const filterChoices = {};
-    for (const filter of filters[name]) {
-        filterChoices[filter] = FilterIconFactory({
-            name: filter,
-            includeLabel: true,
-        });
-    }
+    const filterChoices = useMemo(() => {
+        const choices = {};
+        for (const filter of filters[name]) {
+            choices[filter] = FilterIconFactory({
+                name: filter,
+                includeLabel: true,
+            });
+        }
+        return choices;
+    }, [filters, name]);
     const [type, setType] = useState(row.type);
     const [value, setValue] = useState(row.value);
     useEffect(() => {
@@ -74,7 +77,7 @@ export default function ContentFilterRow(props) {
                     setValue('');
                 }, onBlur: () => {
                     /* noop */
-                }, choices: fieldNames, error: false, errorMsg: '', hasChanged: false }), _jsx(StyledDropdownMemo, { name: 'type', label: '', value: type, required: false, disabled: false, onChange: ({ target }) => {
+                }, choices: fieldNames, error: false, errorMsg: '', hasChanged: false }), _jsx(StyledDropdown, { name: 'type', label: '', value: type, required: false, disabled: false, onChange: ({ target }) => {
                     setType(target.value);
                 }, onBlur: () => {
                     /* noop */

package/components/shared/ConfirmDialog.js

@@ -22,6 +22,11 @@ export default function ConfirmDialog(props) {
         const val = event.target.value;
         setInputVal(val || '');
     }, []);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Tab') {
+            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' }, { 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') }))] })] })));
+    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') }))] })] })));
 }

package/components/shared/ConfirmEditDialog.js

@@ -17,6 +17,11 @@ 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) {
@@ -36,7 +41,7 @@ export const ConfirmEditionDialog = (props) => {
             }
         };
     }, [open]);
-    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' }, { 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: () => {
+    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) {

package/package.json

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