tycho-components 0.8.4 → 0.8.6

package/dist/AppCard/AppCard.d.ts

@@ -7,6 +7,7 @@ type Props = {
     footer?: React.ReactNode;
     options?: DropdownMenuItem[];
     className?: string;
+    onClick?: () => void;
 };
-export default function AppCard({ title, children, extraHeaderActions, footer, options, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppCard({ title, children, extraHeaderActions, footer, options, className, onClick, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppCard/AppCard.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cx from 'classnames';
 import { DropdownMenu } from 'tycho-storybook';
 import './style.scss';
-export default function AppCard({ title, children, extraHeaderActions, footer, options, className, }) {
-    return (_jsxs("div", { className: cx('ds-app-card', className), children: [title && (_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: title }), extraHeaderActions && (_jsx("div", { className: "extra-header-actions", children: extraHeaderActions })), options && _jsx(DropdownMenu, { list: options })] })), _jsx("div", { className: "body", children: children }), footer && _jsx("div", { className: "footer", children: footer })] }));
+export default function AppCard({ title, children, extraHeaderActions, footer, options, className, onClick, }) {
+    return (_jsxs("div", { className: cx('ds-app-card', className), onClick: onClick, children: [title && (_jsxs("div", { className: "header", children: [_jsx("div", { className: "title", children: title }), extraHeaderActions && (_jsx("div", { className: "extra-header-actions", children: extraHeaderActions })), options && _jsx(DropdownMenu, { list: options })] })), _jsx("div", { className: "body", children: children }), footer && _jsx("div", { className: "footer", children: footer })] }));
 }

package/dist/AppSelect/AppSelect.d.ts

@@ -5,5 +5,5 @@ type Props = {
     onChange: (value: any) => void;
     emptyValue?: boolean;
 };
-export default function AppSelect({ options, onChange, emptyValue, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppSelect({ options, value, onChange, emptyValue, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AppSelect/AppSelect.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form } from 'react-bootstrap';
-import './style.scss';
+import { MenuItem, Select } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-export default function AppSelect({ options, onChange, emptyValue = true, }) {
+import './style.scss';
+export default function AppSelect({ options, value, onChange, emptyValue = true, }) {
     const { t } = useTranslation('common');
     const getValues = () => {
         if (Array.isArray(options))
@@ -16,5 +16,5 @@ export default function AppSelect({ options, onChange, emptyValue = true, }) {
         });
         return arr;
     };
-    return (_jsxs(Form.Select, { onChange: (e) => onChange(e.target.value), children: [emptyValue && _jsx("option", { value: "", children: t('select.empty') }), getValues().map((option, idx) => (_jsx("option", { value: option.value, children: option.label }, idx.valueOf())))] }));
+    return (_jsxs(Select, { onChange: (e) => onChange(e.target.value), value: value ?? '', fullWidth: true, children: [emptyValue && _jsx(MenuItem, { value: "", children: t('select.empty') }), getValues().map((option, idx) => (_jsx(MenuItem, { value: option.value, children: option.label }, idx.valueOf())))] }));
 }

package/dist/Header/HeaderReplaceAll/HeaderReplaceAll.js

@@ -1,13 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Popover } from '@mui/material';
 import { useState } from 'react';
-import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
-import { IconButton, getCurrentInput, getCurrentOnChange } from 'tycho-storybook';
+import { IconButton, getCurrentInput, getCurrentOnChange, } from 'tycho-storybook';
 import './style.scss';
 export default function HeaderReplaceAll() {
     const { t } = useTranslation('header');
     const [findValue, setFindValue] = useState('');
     const [replaceValue, setReplaceValue] = useState('');
+    const [anchorEl, setAnchorEl] = useState(null);
     const replaceAll = (str, find, replace) => {
         // Escape special regex characters in 'find'
         var escapedFind = find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
@@ -23,7 +24,20 @@ export default function HeaderReplaceAll() {
             input.focus();
             onChange({ target: input });
         }
+        setAnchorEl(null);
     };
-    const popoverReplace = (_jsx(Popover, { className: "popover-replace", children: _jsxs(Popover.Body, { children: [_jsx("input", { type: "text", placeholder: t('replace.find.placeholder'), value: findValue, onChange: (e) => setFindValue(e.target.value) }), _jsx("input", { type: "text", placeholder: t('replace.placeholder'), value: replaceValue, onChange: (e) => setReplaceValue(e.target.value) }), _jsx(Button, { size: "sm", onClick: handleReplaceAll, children: "confirm" })] }) }));
-    return (_jsx(OverlayTrigger, { placement: "bottom", trigger: "click", overlay: popoverReplace, rootClose: true, children: _jsx(IconButton, { name: "autorenew", size: "small", title: t('replace.all.tooltip') }) }));
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const open = Boolean(anchorEl);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { name: "autorenew", size: "small", title: t('replace.all.tooltip'), onClick: handleClick }), _jsx(Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, className: "popover-replace", children: _jsxs("div", { className: "popover-body", children: [_jsx("input", { type: "text", placeholder: t('replace.find.placeholder'), value: findValue, onChange: (e) => setFindValue(e.target.value) }), _jsx("input", { type: "text", placeholder: t('replace.placeholder'), value: replaceValue, onChange: (e) => setReplaceValue(e.target.value) }), _jsx(Button, { size: "small", onClick: handleReplaceAll, children: "confirm" })] }) })] }));
 }

package/dist/Header/HeaderReplaceAll/style.scss

@@ -1,7 +1,7 @@
 .popover-replace {
   max-width: 10vw;
 
-  > .popover-body {
+  .popover-body {
     display: flex;
     flex-direction: column;
     gap: 4px;

package/dist/Participants/Participants.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MenuItem, Select } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'tycho-storybook';
 import AppEditable from '../AppEditable';
@@ -39,9 +39,9 @@ export default function Participants({ document, participants, onChange, useChat
         if (participants.length > 0)
             setParticipant(participants[0]);
     }, []);
-    return (_jsxs("div", { className: "participants-container", children: [_jsxs("div", { className: "header", children: [_jsx("h3", { children: t('label.title') }), _jsx("div", { className: "actions", children: _jsx(Button, { icon: "add", text: t('button.label.add'), onClick: () => setOpenCreate(true), size: "small", mode: "outlined" }) })] }), _jsx("div", { className: "body", children: participant && (_jsxs(_Fragment, { children: [_jsx(Form.Select, { onChange: (e) => setParticipant(participants[Number(e.target.value)]), value: participant
+    return (_jsxs("div", { className: "participants-container", children: [_jsxs("div", { className: "header", children: [_jsx("h3", { children: t('label.title') }), _jsx("div", { className: "actions", children: _jsx(Button, { icon: "add", text: t('button.label.add'), onClick: () => setOpenCreate(true), size: "small", mode: "outlined" }) })] }), _jsx("div", { className: "body", children: participant && (_jsxs(_Fragment, { children: [_jsx(Select, { onChange: (e) => setParticipant(participants[Number(e.target.value)]), value: participant
                                 ? participants.findIndex((p) => p.code === participant.code)
-                                : 0, children: participants.map((el, idx) => (_jsx("option", { value: idx, children: `${el.code} - ${el.name}` }, idx))) }), _jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: PARTICIPANT_FIELDS, className: "fields", reference: "code" }), useChat && (_jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: CHAT_FIELDS, className: "fields", reference: "code" })), _jsx("div", { className: "footer", children: _jsx(Button, { icon: "delete", text: t('common:button.remove'), size: "small", className: "danger", onClick: () => {
+                                : 0, fullWidth: true, children: participants.map((el, idx) => (_jsx(MenuItem, { value: idx, children: `${el.code} - ${el.name}` }, idx))) }), _jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: PARTICIPANT_FIELDS, className: "fields", reference: "code" }), useChat && (_jsx(AppEditable, { translation: "participants", group: "participant", save: handleSave, item: { ...participant, uid: document }, fields: CHAT_FIELDS, className: "fields", reference: "code" })), _jsx("div", { className: "footer", children: _jsx(Button, { icon: "delete", text: t('common:button.remove'), size: "small", className: "danger", onClick: () => {
                                     setParticipant(participant);
                                     setOpenRemove(true);
                                 } }) })] })) }), participant && openRemove && (_jsx(ParticipantRemove, { document: document, onChange: (list) => {

package/dist/configs/Localization.d.ts

@@ -158,6 +158,7 @@ export declare const commonResources: {
             'participant.field.code': string;
             'participant.field.name': string;
             'participant.field.color': string;
+            'participant.field.select': string;
             'participant.field.separator': string;
             'participant.field.color.tooltip': string;
             'participant.field.language': string;
@@ -424,6 +425,7 @@ export declare const commonResources: {
             'participant.field.code': string;
             'participant.field.name': string;
             'participant.field.color': string;
+            'participant.field.select': string;
             'participant.field.separator': string;
             'participant.field.color.tooltip': string;
             'participant.field.language': string;
@@ -689,6 +691,7 @@ export declare const commonResources: {
             'participant.field.code': string;
             'participant.field.name': string;
             'participant.field.color': string;
+            'participant.field.select': string;
             'participant.field.separator': string;
             'participant.field.color.tooltip': string;
             'participant.field.language': string;

package/dist/configs/localization/ParticipantsTexts.d.ts

@@ -6,6 +6,7 @@ export declare const ParticipantsTexts: {
         'participant.field.code': string;
         'participant.field.name': string;
         'participant.field.color': string;
+        'participant.field.select': string;
         'participant.field.separator': string;
         'participant.field.color.tooltip': string;
         'participant.field.language': string;
@@ -32,6 +33,7 @@ export declare const ParticipantsTexts: {
         'participant.field.code': string;
         'participant.field.name': string;
         'participant.field.color': string;
+        'participant.field.select': string;
         'participant.field.separator': string;
         'participant.field.color.tooltip': string;
         'participant.field.language': string;
@@ -57,6 +59,7 @@ export declare const ParticipantsTexts: {
         'participant.field.code': string;
         'participant.field.name': string;
         'participant.field.color': string;
+        'participant.field.select': string;
         'participant.field.separator': string;
         'participant.field.color.tooltip': string;
         'participant.field.language': string;

package/dist/configs/localization/ParticipantsTexts.js

@@ -6,6 +6,7 @@ export const ParticipantsTexts = {
         'participant.field.code': 'Code',
         'participant.field.name': 'Name',
         'participant.field.color': 'Color',
+        'participant.field.select': 'Select participant',
         'participant.field.separator': 'Separator',
         'participant.field.color.tooltip': 'A color for transcription visual identifier',
         'participant.field.language': 'Language',
@@ -32,6 +33,7 @@ export const ParticipantsTexts = {
         'participant.field.code': 'Código',
         'participant.field.name': 'Nome',
         'participant.field.color': 'Cor',
+        'participant.field.select': 'Selecionar participante',
         'participant.field.separator': 'Separador',
         'participant.field.color.tooltip': 'Cor para identificação visual da sentença na transcrição',
         'participant.field.language': 'Língua',
@@ -57,6 +59,7 @@ export const ParticipantsTexts = {
         'participant.field.code': 'Codice',
         'participant.field.name': 'Nome',
         'participant.field.color': 'Colore',
+        'participant.field.select': 'Seleziona partecipante',
         'participant.field.separator': 'Separatore',
         'participant.field.color.tooltip': "Un colore per l'identificatore visivo della trascrizione",
         'participant.field.language': 'Lingua',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.8.4",
+  "version": "0.8.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -38,16 +38,14 @@
     "@hookform/resolvers": "^3.1.1",
     "@mui/icons-material": "7.3.0",
     "@mui/material": "7.3.0",
-    "bootstrap": "^5.3.1",
     "i18next": "^23.3.0",
     "i18next-browser-languagedetector": "^7.1.0",
     "react": ">=17 <19",
-    "react-bootstrap": "^2.8.0",
     "react-dom": ">=17 <19",
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
-    "tycho-storybook": "0.5.8",
+    "tycho-storybook": "0.5.9",
     "yup": "^1.2.0"
   },
   "devDependencies": {