@memori.ai/memori-react 8.11.0 → 8.13.0

package/esm/components/DateSelector/DateSelector.js

@@ -1,60 +1,119 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, memo, Fragment } from 'react';
-import { Listbox, Transition } from '@headlessui/react';
+import { useEffect, useState, memo, useMemo, useRef } from 'react';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
-import SelectIcon from '../icons/SelectIcon';
-const months = {
-    en: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December',
-    ],
-    it: [
-        'Gennaio',
-        'Febbraio',
-        'Marzo',
-        'Aprile',
-        'Maggio',
-        'Giugno',
-        'Luglio',
-        'Agosto',
-        'Settembre',
-        'Ottobre',
-        'Novembre',
-        'Dicembre',
-    ],
-};
 const DateSelector = memo(({ defaultDate, onChange, disabled = false }) => {
-    const { t, i18n } = useTranslation();
-    const [date, setDate] = useState(!defaultDate
-        ? DateTime.now()
-        : typeof defaultDate === 'string'
-            ? DateTime.fromISO(defaultDate)
-            : DateTime.fromJSDate(defaultDate));
+    const { t } = useTranslation();
+    const maxDate = useMemo(() => DateTime.now().minus({ years: 18 }), []);
+    const minDate = useMemo(() => DateTime.fromObject({ year: 1900, month: 1, day: 1 }), []);
+    const [day, setDay] = useState('');
+    const [month, setMonth] = useState('');
+    const [year, setYear] = useState('');
     useEffect(() => {
-        onChange(date);
-    }, [date, onChange]);
-    return (_jsxs("div", { className: "memori--date-selector", children: [_jsx("div", { className: "memori--date-selector__select", children: _jsxs(Listbox, { value: date, onChange: value => {
-                        setDate(value);
-                    }, disabled: disabled, name: "day", children: [_jsxs(Listbox.Label, { className: "memori--date-selector__select-label", children: [t('day'), ":"] }), _jsxs(Listbox.Button, { "aria-label": t('day'), className: "memori--date-selector__select-button", children: [_jsx("span", { className: "memori--date-selector__select--value", children: date.day }), _jsx("span", { className: "memori--date-selector__select--icon", children: _jsx(SelectIcon, {}) })] }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Listbox.Options, { className: "memori--date-selector__select-options", children: [...Array(31).keys()].map(day => (_jsx(Listbox.Option, { value: date.set({ day: day + 1 }), className: "memori--date-selector__select-option", children: day + 1 }, day))) }) })] }) }), _jsx("div", { className: "memori--date-selector__select", children: _jsxs(Listbox, { value: date, onChange: value => {
-                        setDate(value);
-                    }, disabled: disabled, name: "month", children: [_jsxs(Listbox.Label, { className: "memori--date-selector__select-label", children: [t('month'), ":"] }), _jsxs(Listbox.Button, { "aria-label": t('month'), className: "memori--date-selector__select-button", children: [_jsx("span", { className: "memori--date-selector__select--value", children: months[i18n.language === 'it' ? 'it' : 'en'][date.month - 1] }), _jsx("span", { className: "memori--date-selector__select--icon", children: _jsx(SelectIcon, {}) })] }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Listbox.Options, { className: "memori--date-selector__select-options", children: months[i18n.language === 'it' ? 'it' : 'en'].map(month => (_jsx(Listbox.Option, { className: "memori--date-selector__select-option", value: date.set({
-                                        month: months[i18n.language === 'it' ? 'it' : 'en'].findIndex(m => m === month) + 1,
-                                    }), children: month }, month))) }) })] }) }), _jsx("div", { className: "memori--date-selector__select", children: _jsxs(Listbox, { value: date, onChange: value => {
-                        setDate(value);
-                    }, disabled: disabled, name: "year", children: [_jsxs(Listbox.Label, { className: "memori--date-selector__select-label", children: [t('year'), ":"] }), _jsxs(Listbox.Button, { "aria-label": t('year'), className: "memori--date-selector__select-button", children: [_jsx("span", { className: "memori--date-selector__select--value", children: date.year }), _jsx("span", { className: "memori--date-selector__select--icon", children: _jsx(SelectIcon, {}) })] }), _jsx(Transition, { as: Fragment, leave: "transition ease-in duration-100", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: _jsx(Listbox.Options, { className: "memori--date-selector__select-options", children: [...Array(DateTime.now().year - 1899).keys()]
-                                    .sort((a, b) => b - a)
-                                    .map(year => (_jsx(Listbox.Option, { value: date.set({ year: year + 1900 }), className: "memori--date-selector__select-option", children: year + 1900 }, year))) }) })] }) })] }));
+        if (defaultDate) {
+            const dt = typeof defaultDate === 'string'
+                ? DateTime.fromISO(defaultDate)
+                : DateTime.fromJSDate(defaultDate);
+            if (dt.isValid) {
+                setDay(dt.day.toString());
+                setMonth(dt.month.toString());
+                setYear(dt.year.toString());
+            }
+        }
+    }, [defaultDate]);
+    const [isMobile, setIsMobile] = useState(false);
+    const dayRef = useRef(null);
+    const monthRef = useRef(null);
+    const yearRef = useRef(null);
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    useEffect(() => {
+        if (!day || !month || !year) {
+            onChange(undefined);
+            return;
+        }
+        const d = parseInt(day);
+        const m = parseInt(month);
+        const y = parseInt(year);
+        if (isNaN(d) || isNaN(m) || isNaN(y)) {
+            onChange(undefined);
+            return;
+        }
+        const newDate = DateTime.fromObject({ year: y, month: m, day: d });
+        if (newDate.isValid && newDate >= minDate && newDate <= maxDate) {
+            onChange(newDate);
+        }
+        else {
+            onChange(undefined);
+        }
+    }, [day, month, year, onChange, minDate, maxDate]);
+    const handleMobileChange = (e) => {
+        const value = e.target.value;
+        if (value) {
+            const newDate = DateTime.fromISO(value);
+            if (newDate.isValid) {
+                setDay(newDate.day.toString());
+                setMonth(newDate.month.toString());
+                setYear(newDate.year.toString());
+            }
+        }
+        else {
+            setDay('');
+            setMonth('');
+            setYear('');
+        }
+    };
+    const handleDayChange = (e) => {
+        var _a;
+        const val = e.target.value;
+        if (val === '' || /^\d+$/.test(val)) {
+            if (val.length > 2)
+                return;
+            const numVal = parseInt(val);
+            if (numVal > 31)
+                return;
+            setDay(val);
+            if (val.length >= 2) {
+                (_a = monthRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    };
+    const handleMonthChange = (e) => {
+        var _a;
+        const val = e.target.value;
+        if (val === '' || /^\d+$/.test(val)) {
+            if (val.length > 2)
+                return;
+            const numVal = parseInt(val);
+            if (numVal > 12)
+                return;
+            setMonth(val);
+            if (val.length >= 2) {
+                (_a = yearRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    };
+    const handleYearChange = (e) => {
+        const val = e.target.value;
+        if (val === '' || /^\d+$/.test(val)) {
+            if (val.length > 4)
+                return;
+            setYear(val);
+        }
+    };
+    if (isMobile) {
+        const currentDate = (day && month && year)
+            ? DateTime.fromObject({ year: parseInt(year), month: parseInt(month), day: parseInt(day) })
+            : null;
+        return (_jsxs("div", { className: "memori--date-selector memori--date-selector--mobile", children: [_jsxs("label", { className: "memori--date-selector__mobile-label", children: [t('birthDate') || 'Birth Date', ":"] }), _jsx("input", { type: "date", className: "memori--date-selector__mobile-input", value: (currentDate === null || currentDate === void 0 ? void 0 : currentDate.isValid) ? currentDate.toISODate() || '' : '', onChange: handleMobileChange, disabled: disabled, min: minDate.toISODate() || '1900-01-01', max: maxDate.toISODate() || '', "aria-label": String(t('dateOfBirth') || t('date')) })] }));
+    }
+    return (_jsxs("div", { className: "memori--date-selector memori--date-selector--desktop", children: [_jsxs("div", { className: "memori--date-selector__input-group", children: [_jsx("label", { className: "memori--date-selector__label", children: t('day') || 'Day' }), _jsx("input", { ref: dayRef, type: "number", className: "memori--date-selector__input", value: day, onChange: handleDayChange, placeholder: t('dayPlaceholder') || 'DD', min: 1, max: 31, disabled: disabled })] }), _jsxs("div", { className: "memori--date-selector__input-group", children: [_jsx("label", { className: "memori--date-selector__label", children: t('month') || 'Month' }), _jsx("input", { ref: monthRef, type: "number", className: "memori--date-selector__input", value: month, onChange: handleMonthChange, placeholder: t('monthPlaceholder') || 'MM', min: 1, max: 12, disabled: disabled })] }), _jsxs("div", { className: "memori--date-selector__input-group memori--date-selector__input-group--year", children: [_jsx("label", { className: "memori--date-selector__label", children: t('year') || 'Year' }), _jsx("input", { ref: yearRef, type: "number", className: "memori--date-selector__input", value: year, onChange: handleYearChange, placeholder: t('yearPlaceholder') || 'YYYY', min: minDate.year, max: maxDate.year, disabled: disabled })] })] }));
 });
 DateSelector.displayName = 'DateSelector';
 export default DateSelector;

package/esm/components/DateSelector/DateSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateSelector.js","sourceRoot":"","sources":["../../../src/components/DateSelector/DateSelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateSelector.js","sourceRoot":"","sources":["../../../src/components/DateSelector/DateSelector.tsx"],"names":[],"mappings":"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"}

package/esm/components/FilePreview/FilePreview.css

@@ -1,223 +1,302 @@
 /* Updated FilePreview Styles */
 
 .memori--preview-container {
-  z-index: 10;
-  min-width: 100%;
-  padding: 12px;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  animation: slide-in 0.3s ease;
-  background: white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
+    z-index: 10;
+    min-width: 100%;
+    /* padding: 12px; */
+    border-radius: 8px;
+    /* margin-bottom: 12px; */
+    animation: slide-in 0.3s ease;
+    background: white;
+    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
+    transition: all 0.3s ease;
 }
 
 .memori--preview-container.slide-down {
-  animation: slide-down 0.3s ease;
-}
-
-.memori--absolute-preview {
-  position: absolute;
-  z-index: 10;
-  right: 0;
-  bottom: 100%;
-  left: 0;
-  max-height: 200px;
-  overflow-y: auto;
+    animation: slide-down 0.3s ease;
 }
 
 /* Responsive adjustments for file preview */
 @media (max-width: 768px) {
-  .memori--absolute-preview {
-    max-height: 150px;
-  }
+    .memori--absolute-preview {
+        max-height: 150px;
+    }
 
-  .memori--preview-container {
-    padding: 8px;
-    margin-bottom: 8px;
-  }
+    .memori--preview-container {
+        padding: 8px;
+        margin-bottom: 8px;
+    }
 
-  .memori--preview-filename {
-    max-width: 150px;
-    font-size: 12px;
-  }
+    .memori--preview-filename {
+        max-width: 150px;
+        font-size: 12px;
+    }
+
+    /* Make remove button always visible on mobile */
+    .memori--remove-button {
+        opacity: 1 !important;
+        transform: scale(1) !important;
+    }
+
+    /* Increase card size for easier interaction */
+    .memori--preview-item {
+        min-width: 140px;
+        min-height: 60px;
+        padding: 12px;
+    }
+
+    .memori--preview-icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    .memori--preview-thumbnail {
+        min-width: 50px;
+        min-height: 50px;
+    }
+
+    .memori--preview-thumbnail img {
+        width: 50px;
+        height: 50px;
+        object-fit: cover;
+    }
 }
 
 @media (max-width: 480px) {
-  .memori--absolute-preview {
-    max-height: 120px;
-  }
+    .memori--absolute-preview {
+        max-height: 120px;
+    }
 
-  .memori--preview-container {
-    padding: 6px;
-    margin-bottom: 6px;
-  }
+    .memori--preview-container {
+        padding: 6px;
+        margin-bottom: 6px;
+    }
 
-  .memori--preview-filename {
-    max-width: 100px;
-    font-size: 11px;
-  }
+    .memori--preview-filename {
+        max-width: 100px;
+        font-size: 11px;
+    }
+
+    /* Make remove button always visible on mobile */
+    .memori--remove-button {
+        opacity: 1 !important;
+        transform: scale(1) !important;
+    }
+
+    /* Increase card size for easier interaction on small screens */
+    .memori--preview-item {
+        min-width: 160px;
+        min-height: 70px;
+        padding: 14px;
+    }
+
+    .memori--preview-icon {
+        width: 28px;
+        height: 28px;
+    }
+
+    .memori--preview-thumbnail {
+        min-width: 60px;
+        min-height: 60px;
+    }
+
+    .memori--preview-thumbnail img {
+        width: 60px;
+        height: 60px;
+        object-fit: cover;
+    }
 }
 
 .memori--message-preview {
-  max-width: 100%;
-  margin: 12px 0;
+    max-width: 100%;
+    margin: 12px 0;
 }
 
 .memori--preview-list {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  overflow-x: auto;
+    display: flex;
+    flex-direction: row;
+    padding: 0.875rem;
+    padding-bottom: 0.625rem;
+    gap: 8px;
+    overflow-x: auto;
+    scrollbar-color: hsla(var(--border-300) / 35%) transparent;
+    scrollbar-width: thin;
 }
 
 .memori--preview-item {
-  position: relative;
-  display: flex;
-  max-width: fit-content;
-  align-items: center;
-  padding: 8px;
-  border-radius: 8px;
-  animation: slide-in 0.3s ease;
-  background-color: #f8f9fa;
-  cursor: pointer;
-  gap: 8px;
-  transition: all 0.2s ease;
+    position: relative;
+    display: flex;
+    max-width: fit-content;
+    align-items: center;
+    padding: 8px;
+    border-radius: 8px;
+    animation: slide-in 0.3s ease;
+    background-color: #f8f9fa;
+    cursor: pointer;
+    gap: 8px;
+    transition: all 0.2s ease;
 }
 
 .memori--preview-item:hover {
-  background-color: #f1f3f5;
-  transform: translateX(4px);
+    background-color: #f1f3f5;
+    transform: translateX(4px);
 }
 
 .memori--preview-icon {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  color: #fff;
-  fill: var(--memori-primary);
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    color: #fff;
+    fill: var(--memori-primary);
+}
+
+.memori--preview-thumbnail {
+    display: flex;
+    overflow: hidden;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+}
+
+.memori--preview-thumbnail img {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    object-fit: cover;
 }
 
 .memori--preview-file-info {
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+}
+
+.memori-modal--title {
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori--preview-filename {
-  overflow: hidden;
-  max-width: 200px;
-  color: #495057;
-  font-size: 14px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    max-width: 100px;
+    color: #495057;
+    font-size: 14px;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori--preview-filetype {
-  margin-top: 2px;
-  color: #868e96;
-  font-size: 12px;
+    margin-top: 2px;
+    color: #868e96;
+    font-size: 12px;
 }
 
 .memori--modal-title-preview {
-  margin-top: 12px;
-  margin-bottom: 12px;
-  font-size: 20px;
-  font-weight: 600;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    font-size: 20px;
+    font-weight: 600;
 }
 
 .memori--remove-button {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  padding: 4px;
-  border: none;
-  border-radius: 50%;
-  background-color: #e03131;
-  color: white;
-  cursor: pointer;
-  opacity: 0;
-  transform: scale(0.75);
-  transition: all 0.2s ease;
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    padding: 4px;
+    border: none;
+    border-radius: 50%;
+    background-color: #e03131;
+    color: white;
+    cursor: pointer;
+    opacity: 0;
+    transform: scale(0.75);
+    transition: all 0.2s ease;
 }
 
 .memori--remove-button.visible {
-  opacity: 1;
-  transform: scale(1);
+    opacity: 1;
+    transform: scale(1);
 }
 
 .memori--remove-button:hover {
-  background-color: #c92a2a;
-  transform: scale(1.1);
+    background-color: #c92a2a;
+    transform: scale(1.1);
 }
 
 .memori--remove-icon {
-  width: 12px;
-  height: 12px;
+    width: 12px;
+    height: 12px;
 }
 
 .memori--modal-preview-file {
-  width: 100%;
-  max-width: 800px;
-  height: 100%;
-  padding: 12px;
+    width: 100%;
+    max-width: 800px;
+    height: 100%;
+    padding: 12px;
 }
 
 .memori--preview-content {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f8f9fa;
-  font-family: monospace;
-  font-size: 14px;
-  line-height: 1.5;
+    padding: 16px;
+    border-radius: 8px;
+    /* background-color: #f8f9fa; */
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1.5;
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
 }
 
 @keyframes slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 @keyframes slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 @keyframes slide-down {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-}
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+}