@irontec/ivoz-ui 1.7.19 → 1.8.1

package/components/List/Content/Empty.js

@@ -26,7 +26,7 @@ export const Empty = (props) => {
     const globalActions = Object.values(entity.customActions).filter((action) => action.global);
     return (_jsx(Fade, Object.assign({ in: true, style: {
             transitionDelay: '750ms',
-        }, unmountOnExit: true }, { children: _jsxs("section", Object.assign({ className: className }, { children: [_jsx("img", { src: 'assets/img/empty.svg', alt: '' }), _jsx("h3", { children: _('No {{entity}} yet', { entity: pluralTitle }) }), _jsx("p", { children: _('You haven’t created any {{entity}} yet.', {
+        }, unmountOnExit: true }, { children: _jsxs("section", Object.assign({ className: className }, { children: [_jsx("img", { src: 'assets/img/empty.svg', alt: '' }), _jsx("h3", { children: _('No {{entity}} yet', { entity: pluralTitle }) }), _jsx("p", { children: _("You haven't created any {{entity}} yet.", {
                         entity: singularTitle,
                     }) }), create && (_jsxs(Box, Object.assign({ className: 'empty-actions' }, { children: [globalActions &&
                             globalActions.length < 2 &&

package/components/List/Content/ListContentValue.js

@@ -58,7 +58,7 @@ const ListContentValue = (props) => {
         response = _jsx(StyledCheckBoxOutlineBlankIcon, {});
     }
     else {
-        response = _jsx(ListDecorator, { field: columnName, row: row, property: column, entityPath: entityService.getEntity().path });
+        response = (_jsx(ListDecorator, { field: columnName, row: row, property: column, entityPath: entityService.getEntity().path }));
     }
     if (isDownloadable && isFileType) {
         response = (_jsx(DownloadFile, { row: row, path: entityService.getEntity().path, fileType: columnName }));

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" | "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;
+    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;
 }, "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>, {}, {}>;
+}, "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") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.19",
+  "version": "1.8.1",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",
@@ -57,7 +57,6 @@
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-sprintf-postprocessor": "^0.2.2",
     "query-string": "^7.0.0",
-    "react-audio-player": "^0.17.0",
     "react-color": "^2.19.3",
     "react-i18next": "^13.0.0",
     "sync-request": "^6.1.0",

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

@@ -26,6 +26,11 @@ const DynamicAutocomplete = (props) => {
     const [currentOption, setCurrentOption] = useState(nullOptionObject);
     const debounceTimeoutRef = useRef();
     const loadedValuesRef = useRef(new Set());
+    const currentOptionRef = useRef(nullOptionObject);
+    const updateCurrentOption = useCallback((option) => {
+        currentOptionRef.current = option;
+        setCurrentOption(option);
+    }, []);
     useEffect(() => {
         if (selectOptions && Object.keys(choices).length === 0) {
             return;
@@ -54,30 +59,30 @@ const DynamicAutocomplete = (props) => {
         loadedValuesRef.current.add(value);
         selectOptions({
             callback: (options) => {
-                const option = options[0];
+                var _a;
+                const allChoices = options;
+                const option = (_a = allChoices.find((item) => item.id == value)) !== null && _a !== void 0 ? _a : allChoices[0];
                 if (option) {
+                    updateCurrentOption(option);
                     setArrayChoices((prev) => {
                         const exists = prev.some((item) => item.id == option.id);
                         return exists ? prev : [...prev, option];
                     });
                 }
             },
-        }, {
-            id: value,
-        });
+        }, { id: value });
     }, [value, selectOptions]);
     const setOptions = useCallback((options) => {
-        const isCurrentOptionIncluded = options.some((option) => option.id == (currentOption === null || currentOption === void 0 ? void 0 : currentOption.id));
-        if (!isCurrentOptionIncluded &&
-            currentOption &&
-            currentOption.id !== '__null__') {
-            options.unshift(currentOption);
+        const co = currentOptionRef.current;
+        const isCurrentOptionIncluded = options.some((option) => option.id == (co === null || co === void 0 ? void 0 : co.id));
+        if (!isCurrentOptionIncluded && co && co.id !== '__null__') {
+            options.unshift(co);
         }
         if (nullOptionObject) {
             options.unshift(nullOptionObject);
         }
         setArrayChoices(options);
-    }, [nullOptionObject, currentOption]);
+    }, [nullOptionObject]);
     const clearSearch = useCallback(() => {
         if (debounceTimeoutRef.current) {
             clearTimeout(debounceTimeoutRef.current);
@@ -96,14 +101,12 @@ const DynamicAutocomplete = (props) => {
                     setLoading(false);
                     setOptions(options);
                 },
-            }, {
-                searchTerm: searchValue,
-            });
+            }, { searchTerm: searchValue });
         }, 500);
-    }, [searchTerm, selectOptions]);
+    }, [selectOptions, setOptions]);
     useEffect(() => {
         clearSearch();
-        const searchTermMatchNullOption = getOptionLabel(nullOptionObject) === searchTerm;
+        const searchTermMatchNullOption = searchTerm !== '' && getOptionLabel(nullOptionObject) === searchTerm;
         if (searchTermMatchNullOption) {
             return;
         }
@@ -144,7 +147,7 @@ const DynamicAutocomplete = (props) => {
                 ? '__null__'
                 : null;
         }
-        setCurrentOption(option);
+        updateCurrentOption(option);
         onChange({
             target: {
                 name: name,

package/services/form/Field/FileUploader/Variant/AudioFileUploader.js

@@ -11,14 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
 import UploadFileRoundedIcon from '@mui/icons-material/UploadFileRounded';
 import { useEffect, useState } from 'react';
-import ReactAudioPlayerSrc from 'react-audio-player';
 import { useStoreActions } from 'store';
 import { StyledFileNameContainer, StyledFileUploaderContainer, StyledUploadButtonLabel, } from '../FileUploader.styles';
 import { Box } from '@mui/material';
-// see https://github.com/justinmc/react-audio-player/issues/164
-const ReactAudioPlayer = process.env.NODE_ENV === 'production'
-    ? ReactAudioPlayerSrc.default
-    : ReactAudioPlayerSrc;
+import AudioPlayer from './AudioPlayer';
 export const AudioFileUploader = (props) => {
     var _a, _b;
     const { _columnName, accept, values, disabled, downloadPath, handleDownload, changeHandler, onBlur, } = props;
@@ -63,5 +59,5 @@ export const AudioFileUploader = (props) => {
                             display: 'flex',
                             justifyContent: 'space-between',
                             marginBottom: 'var(--spacing-sm)',
-                        } }, { children: [fileName && (_jsxs(StyledFileNameContainer, Object.assign({ className: disabled ? 'disabled' : '' }, { children: [values.id && _jsx(DownloadRoundedIcon, { onClick: handleDownload }), fileName, " (", fileSizeMb, "MB)"] }))), !disabled && (_jsx(StyledUploadButtonLabel, Object.assign({ htmlFor: id, className: 'upload-icon' }, { children: _jsx(UploadFileRoundedIcon, {}) })))] })), _jsx(ReactAudioPlayer, { src: audioSrc, controls: true })] }), _jsx("div", Object.assign({ className: 'uploader-backdrop' }, { children: "Audio" }))] }));
+                        } }, { children: [fileName && (_jsxs(StyledFileNameContainer, Object.assign({ className: disabled ? 'disabled' : '' }, { children: [values.id && _jsx(DownloadRoundedIcon, { onClick: handleDownload }), fileName, " (", fileSizeMb, "MB)"] }))), !disabled && (_jsx(StyledUploadButtonLabel, Object.assign({ htmlFor: id, className: 'upload-icon' }, { children: _jsx(UploadFileRoundedIcon, {}) })))] })), _jsx(AudioPlayer, { src: audioSrc })] }), _jsx("div", Object.assign({ className: 'uploader-backdrop' }, { children: "Audio" }))] }));
 };

package/services/form/Field/FileUploader/Variant/AudioPlayer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface AudioPlayerProps {
+    src: string;
+}
+export default function AudioPlayer({ src }: AudioPlayerProps): JSX.Element;
+export {};

package/services/form/Field/FileUploader/Variant/AudioPlayer.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
+import VolumeUpRoundedIcon from '@mui/icons-material/VolumeUpRounded';
+import VolumeOffRoundedIcon from '@mui/icons-material/VolumeOffRounded';
+import { Box, IconButton, Slider, Typography } from '@mui/material';
+import { useRef, useState, useEffect, useCallback } from 'react';
+function formatTime(seconds) {
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+}
+export default function AudioPlayer({ src }) {
+    const audioRef = useRef(null);
+    const [playing, setPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [muted, setMuted] = useState(false);
+    const [showVolume, setShowVolume] = useState(false);
+    const toggle = useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (playing) {
+            audio.pause();
+        }
+        else {
+            audio.play();
+        }
+        setPlaying(!playing);
+    }, [playing]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const onTime = () => setCurrentTime(audio.currentTime);
+        const onMeta = () => setDuration(audio.duration);
+        const onEnded = () => setPlaying(false);
+        audio.addEventListener('timeupdate', onTime);
+        audio.addEventListener('loadedmetadata', onMeta);
+        audio.addEventListener('ended', onEnded);
+        return () => {
+            audio.removeEventListener('timeupdate', onTime);
+            audio.removeEventListener('loadedmetadata', onMeta);
+            audio.removeEventListener('ended', onEnded);
+        };
+    }, []);
+    const seek = (_, value) => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const t = value;
+        audio.currentTime = t;
+        setCurrentTime(t);
+    };
+    return (_jsxs(Box, Object.assign({ sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            bgcolor: 'grey.100',
+            borderRadius: '24px',
+            px: 1,
+            py: 0.5,
+        } }, { children: [_jsx("audio", { ref: audioRef, src: src, preload: 'metadata' }), _jsx(IconButton, Object.assign({ size: 'small', onClick: toggle }, { children: playing ? (_jsx(PauseRoundedIcon, { fontSize: 'small' })) : (_jsx(PlayArrowRoundedIcon, { fontSize: 'small' })) })), _jsxs(Typography, Object.assign({ variant: 'caption', sx: { whiteSpace: 'nowrap', minWidth: 70 } }, { children: [formatTime(currentTime), " / ", formatTime(duration || 0)] })), _jsx(Slider, { size: 'small', min: 0, max: duration || 1, value: currentTime, onChange: seek, sx: { mx: 1, flex: 1, minWidth: 60 } }), _jsxs(Box, Object.assign({ sx: { position: 'relative', display: 'flex', alignItems: 'center' }, onMouseEnter: () => setShowVolume(true), onMouseLeave: () => setShowVolume(false) }, { children: [_jsx(IconButton, Object.assign({ size: 'small', onClick: () => {
+                            const next = !muted;
+                            if (audioRef.current) {
+                                audioRef.current.muted = next;
+                            }
+                            setMuted(next);
+                        } }, { children: muted || volume === 0 ? (_jsx(VolumeOffRoundedIcon, { fontSize: 'small' })) : (_jsx(VolumeUpRoundedIcon, { fontSize: 'small' })) })), showVolume && (_jsx(Box, Object.assign({ sx: {
+                            position: 'absolute',
+                            left: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            bgcolor: 'grey.100',
+                            borderRadius: '12px',
+                            px: 1,
+                            width: 80,
+                        } }, { children: _jsx(Slider, { size: 'small', min: 0, max: 1, step: 0.01, value: muted ? 0 : volume, onChange: (_, v) => {
+                                const val = v;
+                                setVolume(val);
+                                setMuted(val === 0);
+                                if (audioRef.current) {
+                                    audioRef.current.volume = val;
+                                    audioRef.current.muted = val === 0;
+                                }
+                            } }) })))] }))] })));
+}

package/translations/ca.json

@@ -50,7 +50,7 @@
   "Yes, delete it": "Si, eliminar",
   "You are about to remove": "Esteu a punt d'eliminar-lo",
   "You are about to update": "Estàs a punt d'actualitzar",
-  "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": "entitats",
   "invalid pattern": "Patrón invalido",
   "required value": "valor requerido",

package/translations/it.json

@@ -50,7 +50,7 @@
   "Yes, delete it": "Yes, delete it",
   "You are about to remove": "Stai per rimuovere",
   "You are about to update": "Stai per aggiornare ",
-  "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": "entità",
   "invalid pattern": "invalid pattern",
   "required value": "required value",