‏Mantine 9.6 با لایت‌باکس و چهار نمودار تازه

مهم‌ترین خبر این نسخه پکیج مستقل @mantine/lightbox هست؛ یه لایت‌باکس تمام‌صفحه با ناوبری کروسلی که زوم با کلیک روی دسکتاپ و دابل‌تپ روی موبایل، نوار تامبنیل، اسلاید ویدیویی با توقف خودکار موقع جابه‌جایی و اسلاید دلخواه رو پشتیبانی می‌کنه. مثل Spotlight و Notifications یه store API داره، یعنی یه بار mountش می‌کنی و بعد از هر جای اپ بازش می‌کنی. استایلش هم فایل styles.css خودشو داره که باید جدا import بشه.

نوتیفیکیشن‌ها دو تا قابلیت گرفتن. پراپ renderNotification کل ظاهر پیش‌فرض رو با محتوای دلخواه عوض می‌کنه بدون اینکه انیمیشن‌های ورود و خروج و کشیدن برای بستن از دست برن. layout="stacked" هم نوتیفیکیشن‌ها رو روی هم می‌چینه، جوری که فقط آخری کامل دیده می‌شه و بقیه از پشتش بیرون می‌زنن. کامپوننت تازهٔ ActionBar هم یه نوار ثابت پایین صفحه‌ست برای کارهای گروهی روی ردیف‌های انتخاب‌شدهٔ جدول.

بستهٔ charts چهار عضو تازه گرفت: GaugeChart برای نمایش KPI با بخش‌های آستانه و نشانگر هدف، WaffleChart به‌عنوان جایگزین جمع‌وجورتر نمودار دایره‌ای، MatrixChart که یه هیت‌مپ x/y با محورهای دسته‌ایه و CandlestickChart برای دادهٔ مالی OHLC. سادگی API رو از همین نمونهٔ گیج می‌شه دید:

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return <GaugeChart value={72} size={200} thickness={12} />;
}

نمودارهای قدیمی‌تر هم پراپ‌های تازه دارن. referenceAreas یه ناحیهٔ مستطیلی از نمودار رو هایلایت می‌کنه، مثلاً باند آخر هفته یا محدودهٔ هدف، و با x1/x2 یا y1/y2 محدود می‌شه و رنگ و لیبل می‌گیره. reference dots هم برای نقطهٔ نشانه اومده، AreaChart با type="stream" نمودار استریم‌گراف با خط پایهٔ شناور می‌کشه و ScatterChart محور Y سمت راست رو پشتیبانی می‌کنه.

برای RichTextEditor مجموعه کنترل‌های جدول اضافه شده که با اکستنشن TableKit تیپ‌تپ کار می‌کنه و وقتی مکان‌نما بیرون جدوله خودکار غیرفعال می‌شه، به‌علاوهٔ کنترل بخش‌های تاشو و نمایش کاراکترهای نامرئی. تو Schedule هم withEventResize برای ResourcesMonthView اومده و پراپ‌های eventDragInterval و eventResizeInterval گام جابه‌جایی و تغییر اندازهٔ رویداد رو مستقل از اندازهٔ شبکه تعیین می‌کنن؛ مثلاً شبکهٔ ۳۰ دقیقه‌ای با گام ۱۵ دقیقه.

نکات کلیدی:

• @mantine/lightbox یه پکیج جداست و فایل styles.css خودشو لازم داره
• renderNotification ظاهر نوتیفیکیشن رو کامل عوض می‌کنه ولی انیمیشن‌های پیش‌فرض سر جاشون می‌مونن
• چهار نمودار تازه: GaugeChart، WaffleChart، MatrixChart و CandlestickChart
• کنترل‌های جدول RichTextEditor به اکستنشن TableKit تیپ‌تپ نیاز دارن
• eventDragInterval و eventResizeInterval گام درگ و ریسایز رو از intervalMinutes جدا می‌کنن