@edusight/notification-widget 1.0.33 → 1.0.35

package/README.md

@@ -2,32 +2,32 @@
 
 A modern, accessible React notification center widget built with clean architecture principles, featuring real-time updates, comprehensive notification management, and SDK dependency injection.
 
-## ✨ Version 3.0.0 Features
-
-- 🏗️ **Refactored Architecture** - Clean architecture with dependency injection and separation of concerns
-- 🔌 **SDK Integration** - Direct integration with @edusight/notification-sdk using dependency injection pattern
-- 🚀 **Performance Optimized** - Code splitting, memoization, and optimized bundle size (<25KB gzipped)
-- ♿ **Enhanced Accessibility** - WCAG 2.1 AA compliance with improved keyboard navigation
-- 🌙 **Dynamic Theming** - Runtime theme switching with dark mode support
-- 📱 **Responsive Design** - Mobile-first approach with responsive breakpoints
-- 🛡️ **Error Boundaries** - Comprehensive error handling with fallback components
-- 🔄 **Real-time Sync** - WebSocket integration with fallback polling and cross-tab synchronization
-- 🧪 **Comprehensive Testing** - Unit, integration, and accessibility tests with >90% coverage
+## Version 1.0.35 Features
+
+- **Refactored Architecture** - Clean architecture with dependency injection and separation of concerns
+- **SDK Integration** - Direct integration with @edusight/notification-sdk using dependency injection pattern
+- **Performance Optimized** - Code splitting, memoization, and optimized bundle size (<25KB gzipped)
+- **Enhanced Accessibility** - WCAG 2.1 AA compliance with improved keyboard navigation
+- **Dynamic Theming** - Runtime theme switching with dark mode support
+- **Responsive Design** - Mobile-first approach with responsive breakpoints
+- **Error Boundaries** - Comprehensive error handling with fallback components
+- **Real-time Sync** - WebSocket integration with fallback polling and cross-tab synchronization
+- **Comprehensive Testing** - Unit, integration, and accessibility tests with >90% coverage
 
 ## Features
 
-- 🔔 **Real-time Updates** - WebSocket integration with automatic reconnection and fallback polling
-- 📱 **Responsive Design** - Works seamlessly on desktop, tablet, and mobile
-- ✅ **Full CRUD Operations** - Mark as read/unread, archive, delete with optimistic updates
-- 🎨 **Customizable UI** - Dynamic theme support with CSS variables
-- 🔐 **SDK Integration** - Direct integration with @edusight/notification-sdk using dependency injection
-- ♿ **Accessibility** - Full WCAG 2.1 compliance with keyboard navigation
-- 🚀 **Performance** - Lazy loading, memoization, and optimized re-renders
-- 🌍 **Multi-tenant** - Built-in tenant and environment scoping
-- 🛡️ **Error Boundaries** - Component-level error boundaries with fallback UI
-- ⚙️ **Live Preferences** - Real-time preference management with debounced saving
-- 🔄 **Cross-tab Sync** - Synchronization across multiple browser tabs
-- 🎯 **Clean Architecture** - Separation of concerns with dependency injection pattern
+- **Real-time Updates** - WebSocket integration with automatic reconnection and fallback polling
+- **Responsive Design** - Works seamlessly on desktop, tablet, and mobile
+- **Full CRUD Operations** - Mark as read/unread, archive, delete with optimistic updates
+- **Customizable UI** - Dynamic theme support with CSS variables
+- **SDK Integration** - Direct integration with @edusight/notification-sdk using dependency injection
+- **Accessibility** - Full WCAG 2.1 compliance with keyboard navigation
+- **Performance** - Lazy loading, memoization, and optimized re-renders
+- **Multi-tenant** - Built-in tenant and environment scoping
+- **Error Boundaries** - Component-level error boundaries with fallback UI
+- **Live Preferences** - Real-time preference management with debounced saving
+- **Cross-tab Sync** - Synchronization across multiple browser tabs
+- **Clean Architecture** - Separation of concerns with dependency injection pattern
 
 ## Installation
 
@@ -53,6 +53,21 @@ import '@edusight/notification-widget/styles';
 import '@edusight/notification-widget/styles.css';
 ```
 
+### Custom Selectors
+
+Each widget section exposes `mx-widget-*` hooks so host apps can override colors or spacing without touching the bundled CSS:
+
+| Attribute | Target |
+| --- | --- |
+| `data-mx-widget="root"` | Widget shell/bell container |
+| `data-mx-widget="popover"` | Notifications popover root |
+| `data-mx-widget="tabs"` | Tab navigation bar |
+| `data-mx-widget="item"` | Individual notification item |
+| `data-mx-widget="action"` | Primary/secondary action buttons |
+| `data-mx-widget="bell"` | Bell button itself |
+
+Use these selectors in your global CSS to align the widget with your design system (for example `.mx-widget-root { background-color: #fff; }`). No need to import the widget CSS if you only rely on the shared CSS variables.
+
 ## Quick Start
 
 ### Basic Setup with NotificationWidget

package/dist/{components-Cfc2kMlt.js → components-Dq8aSwWR.js}

@@ -135,6 +135,7 @@ const Fe = ({
         focus:outline-none focus:ring-1 focus:ring-[var(--widget-primary)] focus:ring-offset-1
         disabled:opacity-70 disabled:cursor-not-allowed
         w-10 h-10
+        mx-widget-bell
         ${n}
       `,
       onClick: r,
@@ -144,6 +145,7 @@ const Fe = ({
       "aria-expanded": !1,
       "aria-haspopup": "dialog",
       "data-testid": "bell-component",
+      "data-mx-widget": "bell",
       children: [
         /* @__PURE__ */ i("div", { className: "relative inline-flex items-center justify-center text-align-center", children: [
           /* @__PURE__ */ t(ve, { className: "w-6 h-6" }),
@@ -334,7 +336,7 @@ const P = ({
     "div",
     {
       className: `
-        relative group flex items-start gap-3 px-4 py-3 border-b border-border-light
+        mx-widget-item relative group flex items-start gap-3 px-4 py-3 border-b border-border-light
         transition-all duration-200
         bg-widget-background hover:bg-widget-hover
         min-w-[20rem]
@@ -344,6 +346,7 @@ const P = ({
       onMouseLeave: () => o(!1),
       "data-testid": "notification-item",
       "data-notification-id": e.id,
+      "data-mx-widget": "item",
       children: [
         a && /* @__PURE__ */ t("div", { className: "flex-shrink-0 pt-0.5", children: /* @__PURE__ */ t(
           "input",
@@ -381,6 +384,7 @@ const P = ({
                   px-3 py-1.5 rounded-md text-sm font-medium transition-colors
                   ${b === 0 ? "bg-[var(--widget-primary)] text-[var(--widget-text)] hover:bg-[var(--widget-primary-hover)] shadow-sm" : "bg-transparent text-[var(--widget-text-secondary)] hover:bg-[var(--widget-bg-hover)] border border-[var(--widget-border)]"}
                 `,
+              "data-mx-widget": "action",
               children: c.label
             },
             b
@@ -861,10 +865,11 @@ const P = ({
     "div",
     {
       className: `
-        flex items-center gap-1 overflow-x-auto widget-scrollbar border-b border-[var(--widget-border)] px-2 py-1.5 bg-[var(--widget-background)]
+        mx-widget-tabs flex items-center gap-1 overflow-x-auto widget-scrollbar border-b border-[var(--widget-border)] px-2 py-1.5 bg-[var(--widget-background)]
         ${s}
       `,
       role: "tablist",
+      "data-mx-widget": "tabs",
       children: o.map((h) => {
         const f = r === h.id;
         return /* @__PURE__ */ i(
@@ -1405,7 +1410,7 @@ const Le = ({ onRetry: e, error: r }) => /* @__PURE__ */ i(
       {
         ref: c,
         className: `
-          absolute top-full mt-2 ${oe[a]}
+          mx-widget-popover absolute top-full mt-2 ${oe[a]}
           w-[var(--widget-popover-width,400px)] max-h-[var(--widget-popover-max-height,580px)]
           border border-[var(--widget-border)] rounded-2xl overflow-hidden
           shadow-[var(--widget-shadow-xl)] bg-[var(--widget-background)]
@@ -1418,6 +1423,7 @@ const Le = ({ onRetry: e, error: r }) => /* @__PURE__ */ i(
         "aria-modal": "true",
         "aria-label": "Notifications",
         "data-testid": "inbox-popover",
+        "data-mx-widget": "popover",
         children: [
           /* @__PURE__ */ i("div", { className: "flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-[var(--widget-border)] bg-[var(--widget-background)]", children: [
             /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ t("h2", { className: "text-base font-semibold text-[var(--widget-text)]", children: n === "notifications" ? "Notifications" : "Preferences" }) }),
@@ -1535,4 +1541,4 @@ export {
   Ke as S,
   Ue as a
 };
-//# sourceMappingURL=components-Cfc2kMlt.js.map
+//# sourceMappingURL=components-Dq8aSwWR.js.map